@jmruthers/pace-core 0.5.76 → 0.5.78

package/dist/{chunk-M5IWZRBT.js → chunk-ZMNXIJP4.js}

@@ -1,17 +1,17 @@
 import {
   useCan,
   useResolvedScope
-} from "./chunk-KHJS6VIA.js";
+} from "./chunk-LRQ6RBJC.js";
 import {
   toast,
   useDataTablePerformance
 } from "./chunk-YCKPEMJA.js";
 import {
   init_UnifiedAuthProvider
-} from "./chunk-URUTVZ7N.js";
+} from "./chunk-FL4ZCQLD.js";
 import {
   useUnifiedAuth
-} from "./chunk-WN6XJWOS.js";
+} from "./chunk-MNJXXD6C.js";
 import {
   cn
 } from "./chunk-PYUXFQJ3.js";
@@ -5502,19 +5502,11 @@ var require_lodash = __commonJS({
 });
 
 // src/components/DataTable/DataTable.tsx
-import React16 from "react";
+import React18 from "react";
 
 // src/components/DataTable/components/DataTableCore.tsx
-import React15, { useMemo as useMemo9, useCallback as useCallback6, useEffect as useEffect8, useRef as useRef6 } from "react";
-import {
-  useReactTable,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  getPaginationRowModel,
-  getGroupedRowModel,
-  getExpandedRowModel
-} from "@tanstack/react-table";
+import React17, { useMemo as useMemo14, useCallback as useCallback10, useEffect as useEffect12, useRef as useRef7 } from "react";
+import { useReactTable } from "@tanstack/react-table";
 import { Edit, Trash, ChevronUp as ChevronUp2, ChevronDown as ChevronDown3, ChevronsUpDown } from "lucide-react";
 
 // src/components/Button/Button.tsx
@@ -6226,6 +6218,7 @@ var SelectItem = React5.forwardRef(
         "data-disabled": disabled ? "true" : void 0,
         role: "option",
         "aria-selected": isSelected,
+        tabIndex: disabled ? -1 : 0,
         children: [
           children,
           isSelected && /* @__PURE__ */ jsx4(Check, { className: "absolute right-2 h-4 w-4 flex-shrink-0 mt-0.5" })
@@ -6566,7 +6559,7 @@ function DataTableToolbar({
 }
 
 // src/components/DataTable/components/UnifiedTableBody.tsx
-import React7, { useRef as useRef3, useEffect as useEffect3 } from "react";
+import React8, { useRef as useRef3, useEffect as useEffect3 } from "react";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronDown as ChevronDown2, ChevronRight } from "lucide-react";
@@ -6584,29 +6577,37 @@ function EmptyState({
 }) {
   const defaultTitle = isFiltered ? "No results found" : "No data available";
   const defaultDescription = isFiltered ? "Try adjusting your search or filter criteria" : "Get started by adding your first entry";
-  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center p-8 text-center", children: [
-    /* @__PURE__ */ jsx9(
-      Icon,
-      {
-        role: "img",
-        "aria-hidden": "true",
-        className: "h-12 w-12 text-muted-foreground mb-4",
-        "data-testid": Icon === Database ? "lucide-database" : Icon === User ? "lucide-user" : "custom-icon"
-      }
-    ),
-    /* @__PURE__ */ jsx9("h3", { className: "text-lg font-semibold mb-2", children: title || defaultTitle }),
-    /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: description || defaultDescription }),
-    isFiltered && onClearFilters || action ? /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
-      isFiltered && onClearFilters && /* @__PURE__ */ jsxs6(Button, { variant: "outline", onClick: onClearFilters, children: [
-        /* @__PURE__ */ jsx9(Search3, { className: "h-4 w-4 mr-2" }),
-        "Clear filters"
-      ] }),
-      action && /* @__PURE__ */ jsxs6(Button, { onClick: action.onClick, children: [
-        /* @__PURE__ */ jsx9(Plus2, { className: "h-4 w-4 mr-2" }),
-        action.label
-      ] })
-    ] }) : null
-  ] });
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "flex flex-col items-center justify-center p-8 text-center",
+      children: [
+        /* @__PURE__ */ jsx9(
+          Icon,
+          {
+            role: "img",
+            "aria-hidden": "true",
+            className: "h-12 w-12 text-muted-foreground mb-4",
+            "data-testid": Icon === Database ? "lucide-database" : Icon === User ? "lucide-user" : "custom-icon"
+          }
+        ),
+        /* @__PURE__ */ jsx9("h3", { className: "text-lg font-semibold mb-2", children: title || defaultTitle }),
+        /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: description || defaultDescription }),
+        isFiltered && onClearFilters || action ? /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
+          isFiltered && onClearFilters && /* @__PURE__ */ jsxs6(Button, { variant: "outline", onClick: onClearFilters, children: [
+            /* @__PURE__ */ jsx9(Search3, { className: "h-4 w-4 mr-2" }),
+            "Clear filters"
+          ] }),
+          action && /* @__PURE__ */ jsxs6(Button, { onClick: action.onClick, children: [
+            /* @__PURE__ */ jsx9(Plus2, { className: "h-4 w-4 mr-2" }),
+            action.label
+          ] })
+        ] }) : null
+      ]
+    }
+  );
 }
 
 // src/components/DataTable/components/ColumnFilter.tsx
@@ -6771,22 +6772,144 @@ function FilterRow({ table, visibleColumns }) {
 }
 
 // src/components/DataTable/components/ActionButtons.tsx
+import React7, { useMemo as useMemo2 } from "react";
 import { MoreHorizontal } from "lucide-react";
+
+// src/utils/logger.ts
+var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
+  LogLevel2[LogLevel2["DEBUG"] = 0] = "DEBUG";
+  LogLevel2[LogLevel2["INFO"] = 1] = "INFO";
+  LogLevel2[LogLevel2["WARN"] = 2] = "WARN";
+  LogLevel2[LogLevel2["ERROR"] = 3] = "ERROR";
+  return LogLevel2;
+})(LogLevel || {});
+var Logger = class {
+  /**
+   * Check if we're in development mode
+   */
+  static get isDevelopment() {
+    return import.meta.env.MODE === "development";
+  }
+  /**
+   * Configure the logger
+   */
+  static configure(config) {
+    this.config = { ...this.config, ...config };
+  }
+  /**
+   * Format a log message with optional timestamp and component
+   */
+  static formatMessage(level, component, message) {
+    const parts = [];
+    if (this.config.prefix) {
+      parts.push(`[${this.config.prefix}]`);
+    }
+    if (this.config.includeTimestamp) {
+      parts.push(`[${(/* @__PURE__ */ new Date()).toISOString()}]`);
+    }
+    parts.push(`[${LogLevel[level]}]`);
+    if (this.config.includeComponent && component) {
+      parts.push(`[${component}]`);
+    }
+    parts.push(message);
+    return parts.join(" ");
+  }
+  /**
+   * Check if a log level should be output
+   */
+  static shouldLog(level) {
+    return this.isDevelopment && level >= this.config.level;
+  }
+  /**
+   * Log debug information (development only)
+   */
+  static debug(component, message, ...args) {
+    if (this.shouldLog(0 /* DEBUG */)) {
+      try {
+        console.debug(this.formatMessage(0 /* DEBUG */, component, message), ...args);
+      } catch (e) {
+      }
+    }
+  }
+  /**
+   * Log info information (development only)
+   */
+  static info(component, message, ...args) {
+    if (this.shouldLog(1 /* INFO */)) {
+      try {
+        console.info(this.formatMessage(1 /* INFO */, component, message), ...args);
+      } catch (e) {
+      }
+    }
+  }
+  /**
+   * Log warning information (development only)
+   */
+  static warn(component, message, ...args) {
+    if (this.shouldLog(2 /* WARN */)) {
+      try {
+        console.warn(this.formatMessage(2 /* WARN */, component, message), ...args);
+      } catch (e) {
+      }
+    }
+  }
+  /**
+   * Log error information (development only)
+   */
+  static error(component, message, ...args) {
+    if (this.shouldLog(3 /* ERROR */)) {
+      try {
+        console.error(this.formatMessage(3 /* ERROR */, component, message), ...args);
+      } catch (e) {
+      }
+    }
+  }
+  /**
+   * Create a scoped logger for a specific component
+   */
+  static createScopedLogger(component) {
+    return {
+      debug: (message, ...args) => this.debug(component, message, ...args),
+      info: (message, ...args) => this.info(component, message, ...args),
+      warn: (message, ...args) => this.warn(component, message, ...args),
+      error: (message, ...args) => this.error(component, message, ...args)
+    };
+  }
+};
+Logger.config = {
+  level: 0 /* DEBUG */,
+  includeTimestamp: false,
+  includeComponent: true
+};
+function createLogger(component) {
+  return Logger.createScopedLogger(component);
+}
+
+// src/components/DataTable/components/ActionButtons.tsx
 import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function ActionButtons({
+var evaluateCondition = (condition, row, defaultValue) => {
+  if (typeof condition === "boolean") {
+    return condition;
+  }
+  if (typeof condition === "function") {
+    return condition(row);
+  }
+  return defaultValue;
+};
+function ActionButtonsComponent({
   row,
   actions = [],
   isEditing = false,
   isParent = false,
   hierarchical = false,
-  rbac,
   permissions
 }) {
+  const logger = createLogger("ActionButtons");
+  const rowData = row.original;
   if (actions.length === 0) {
     return null;
   }
-  const allActions = actions;
-  const visibleActions = allActions.filter((action) => {
+  const visibleActions = useMemo2(() => actions.filter((action) => {
     if (action.hidden) return false;
     if (permissions) {
       if (action.label === "Edit" && !permissions.canUpdate.can) return false;
@@ -6796,51 +6919,54 @@ function ActionButtons({
       if (action.showForParent && !isParent) return false;
       if (action.showForChild && isParent) return false;
     }
-    if (typeof action.visible === "function") {
-      return action.visible(row);
-    } else if (typeof action.visible === "boolean") {
-      return action.visible;
+    if (!evaluateCondition(action.visible, rowData, true)) {
+      return false;
     }
     if (isEditing) {
       return action.showInEditMode !== false;
-    } else {
-      return action.hideInViewMode !== true && action.showInViewMode !== false;
     }
-  });
+    return action.hideInViewMode !== true && action.showInViewMode !== false;
+  }), [actions, permissions, hierarchical, isParent, rowData, isEditing]);
   if (visibleActions.length === 0) {
     return null;
   }
+  const renderAction = (action, actionIndex) => {
+    let Icon = action.icon;
+    let label = action.label;
+    if (hierarchical) {
+      if (isParent && action.parentIcon) {
+        Icon = action.parentIcon;
+      } else if (!isParent && action.childIcon) {
+        Icon = action.childIcon;
+      }
+      if (isParent && action.parentLabel) {
+        label = action.parentLabel;
+      } else if (!isParent && action.childLabel) {
+        label = action.childLabel;
+      }
+    }
+    return { Icon, label };
+  };
   if (visibleActions.length <= 6) {
     return /* @__PURE__ */ jsx12(Fragment, { children: visibleActions.map((action, actionIndex) => {
-      let Icon = action.icon;
-      let label = action.label;
-      if (hierarchical) {
-        if (isParent && action.parentIcon) {
-          Icon = action.parentIcon;
-        } else if (!isParent && action.childIcon) {
-          Icon = action.childIcon;
-        }
-        if (isParent && action.parentLabel) {
-          label = action.parentLabel;
-        } else if (!isParent && action.childLabel) {
-          label = action.childLabel;
-        }
-      }
-      const isDisabled = typeof action.disabled === "function" ? action.disabled(row) : action.disabled;
+      const { Icon, label } = renderAction(action, actionIndex);
+      const isDisabled = evaluateCondition(action.disabled, rowData, false);
       return /* @__PURE__ */ jsx12(
         Button,
         {
           variant: action.variant === "destructive" ? "destructive" : "ghost",
           size: "sm",
           onClick: () => {
-            if (import.meta.env.MODE === "development") {
-              console.log("[ActionButtons] Action clicked:", {
+            if (import.meta.env.MODE === "development" && !isDisabled) {
+              logger.debug("Action clicked:", {
                 actionLabel: action.label,
-                rowOriginal: row.original,
+                rowOriginal: rowData,
                 actionOnClick: typeof action.onClick
               });
             }
-            action.onClick(row.original);
+            if (!isDisabled) {
+              action.onClick(rowData);
+            }
           },
           disabled: isDisabled,
           "aria-disabled": isDisabled,
@@ -6859,38 +6985,29 @@ function ActionButtons({
       /* @__PURE__ */ jsx12(MoreHorizontal, { className: "h-4 w-4" })
     ] }) }),
     /* @__PURE__ */ jsx12(SelectContent, { className: "!bg-main-50 border border-sec-200 shadow-lg z-[9999]", style: { backgroundColor: "white" }, children: visibleActions.map((action, actionIndex) => {
-      let Icon = action.icon;
-      let label = action.label;
-      if (hierarchical) {
-        if (isParent && action.parentIcon) {
-          Icon = action.parentIcon;
-        } else if (!isParent && action.childIcon) {
-          Icon = action.childIcon;
-        }
-        if (isParent && action.parentLabel) {
-          label = action.parentLabel;
-        } else if (!isParent && action.childLabel) {
-          label = action.childLabel;
-        }
-      }
+      const { Icon, label } = renderAction(action, actionIndex);
+      const isDisabled = evaluateCondition(action.disabled, rowData, false);
       return /* @__PURE__ */ jsxs8(
         SelectItem,
         {
           value: `action-${actionIndex}`,
           onClick: () => {
-            if (import.meta.env.MODE === "development") {
-              console.log("[ActionButtons] Dropdown action clicked:", {
+            if (import.meta.env.MODE === "development" && !isDisabled) {
+              logger.debug("Action clicked from dropdown:", {
                 actionLabel: action.label,
-                rowOriginal: row.original,
-                actionOnClick: typeof action.onClick
+                rowOriginal: rowData
               });
             }
-            action.onClick(row.original);
+            if (!isDisabled) {
+              action.onClick(rowData);
+            }
           },
-          className: action.variant === "destructive" ? "text-acc-600" : "",
+          "data-testid": action.testId,
+          className: "flex items-center gap-2",
+          "aria-disabled": isDisabled,
           children: [
-            Icon && /* @__PURE__ */ jsx12(Icon, { className: "mr-2 h-4 w-4" }),
-            label
+            Icon && /* @__PURE__ */ jsx12(Icon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx12("span", { children: label })
           ]
         },
         actionIndex
@@ -6898,31 +7015,26 @@ function ActionButtons({
     }) })
   ] });
 }
+var ActionButtons = React7.memo(ActionButtonsComponent);
 
 // src/components/DataTable/components/EditableRow.tsx
 import { flexRender } from "@tanstack/react-table";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-var renderEditField = (column, value, onChange, editingData = {}, placeholder) => {
+var renderEditField = (column, value, onChange, editingData = {}) => {
   const columnDef = column.columnDef;
   if (columnDef.editable === false) {
-    return /* @__PURE__ */ jsx13("span", { className: "text-sm text-gray-600", children: value || "" });
+    return /* @__PURE__ */ jsx13("span", { className: "text-sm text-gray-600", children: String(value ?? "") });
   }
   if (columnDef.fieldType === "select" && columnDef.fieldOptions) {
-    const editKey = columnDef.editAccessorKey || column.id;
-    const editValue = editingData[editKey] || value;
+    const accessorKey = columnDef.editAccessorKey || column.id;
+    const currentValue = editingData[accessorKey] ?? value ?? "";
     return /* @__PURE__ */ jsxs9(
       Select,
       {
-        value: String(editValue || ""),
-        onValueChange: (newValue) => {
-          if (columnDef.editAccessorKey) {
-            onChange({ [columnDef.editAccessorKey]: Number(newValue) });
-          } else {
-            onChange(newValue);
-          }
-        },
+        value: String(currentValue),
+        onValueChange: (newValue) => onChange({ [accessorKey]: newValue }),
         children: [
-          /* @__PURE__ */ jsx13(SelectTrigger, { className: "w-full h-7", children: /* @__PURE__ */ jsx13(SelectValue, { placeholder: placeholder || `Select ${column.id}` }) }),
+          /* @__PURE__ */ jsx13(SelectTrigger, { className: "w-full h-7", children: /* @__PURE__ */ jsx13(SelectValue, { placeholder: `Select ${column.id}` }) }),
           /* @__PURE__ */ jsx13(SelectContent, { children: columnDef.fieldOptions.map((option) => /* @__PURE__ */ jsx13(SelectItem, { value: String(option.value), children: option.label }, option.value)) })
         ]
       }
@@ -6933,7 +7045,18 @@ var renderEditField = (column, value, onChange, editingData = {}, placeholder) =
       Input,
       {
         type: "date",
-        value: value || "",
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value),
+        className: "w-full h-7"
+      }
+    );
+  }
+  if (columnDef.fieldType === "number") {
+    return /* @__PURE__ */ jsx13(
+      Input,
+      {
+        type: "number",
+        value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
         className: "w-full h-7"
       }
@@ -6943,10 +7066,10 @@ var renderEditField = (column, value, onChange, editingData = {}, placeholder) =
     Input,
     {
       type: "text",
-      value: value || "",
+      value: String(value ?? ""),
       onChange: (e) => onChange(e.target.value),
       className: "w-full h-7",
-      placeholder: placeholder || `Enter ${column.id}`
+      placeholder: `Enter ${column.id}`
     }
   );
 };
@@ -6962,72 +7085,48 @@ function EditableRow({
   hierarchical = false
 }) {
   const rowId = getRowId ? getRowId(row.original, row.index) : String(row.id);
-  const convertedActions = actions.map((action) => ({
-    label: action.label,
-    onClick: action.onClick,
-    icon: action.icon,
-    variant: action.variant === "destructive" ? "destructive" : "default",
-    disabled: action.disabled ? ((row2) => action.disabled(row2)) : false,
-    testId: action.testId || `action-${action.label.toLowerCase().replace(/\s+/g, "-")}-${rowId}`,
-    visible: true
-  }));
-  return /* @__PURE__ */ jsxs9("tr", { children: [
-    row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx13("td", { children: /* @__PURE__ */ jsx13("div", { className: cell.column.columnDef.meta?.align === "right" ? "text-right" : "", children: cell.column.id !== "actions" ? (
-      // Check if column has a custom cell renderer - if so, use it in edit mode
-      cell.column.columnDef.cell ? flexRender(cell.column.columnDef.cell, {
-        ...cell.getContext(),
-        getIsEditing: () => true,
-        // Always true in edit mode
-        setValue: (value) => {
-          if (typeof value === "object" && value !== null) {
-            onEditingDataChange({ ...editingData, ...value });
-          } else {
-            onEditingDataChange({ ...editingData, [cell.column.id]: value });
+  return /* @__PURE__ */ jsxs9(
+    "tr",
+    {
+      role: "row",
+      "aria-selected": typeof row.getIsSelected === "function" ? row.getIsSelected() ? "true" : "false" : "false",
+      "aria-rowindex": row.index + 1,
+      children: [
+        row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx13("td", { role: "cell", children: /* @__PURE__ */ jsx13("div", { className: cell.column.columnDef.meta?.align === "right" ? "text-right" : "", children: cell.column.id !== "actions" ? cell.column.columnDef.cell ? flexRender(cell.column.columnDef.cell, {
+          ...cell.getContext(),
+          getIsEditing: () => true,
+          setValue: (value) => {
+            if (typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+              onEditingDataChange({ ...editingData, ...value });
+            } else {
+              onEditingDataChange({ ...editingData, [cell.column.id]: value });
+            }
           }
-        }
-      }) : (
-        // Fall back to default edit field rendering when no custom cell renderer
-        renderEditField(cell.column, editingData[cell.column.id], (value) => {
-          if (typeof value === "object" && value !== null) {
+        }) : renderEditField(cell.column, editingData[cell.column.id], (value) => {
+          if (typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
             onEditingDataChange({ ...editingData, ...value });
           } else {
             onEditingDataChange({ ...editingData, [cell.column.id]: value });
           }
-        }, editingData)
-      )
-    ) : /* @__PURE__ */ jsxs9("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx13(
-        Button,
-        {
-          onClick: onSave,
-          size: "sm",
-          variant: "default",
-          children: "Save"
-        }
-      ),
-      /* @__PURE__ */ jsx13(
-        Button,
-        {
-          onClick: onCancel,
-          size: "sm",
-          variant: "outline",
-          children: "Cancel"
-        }
-      )
-    ] }) }) }, cell.id)),
-    actions.length > 0 && /* @__PURE__ */ jsx13("td", { children: /* @__PURE__ */ jsx13(
-      ActionButtons,
-      {
-        row: row.original,
-        rowId,
-        index: row.index,
-        actions: convertedActions,
-        isEditing: true,
-        isParent,
-        hierarchical
-      }
-    ) })
-  ] });
+        }, editingData) : /* @__PURE__ */ jsxs9("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx13(Button, { onClick: onSave, size: "sm", variant: "default", children: "Save" }),
+          /* @__PURE__ */ jsx13(Button, { onClick: onCancel, size: "sm", variant: "outline", children: "Cancel" })
+        ] }) }) }, cell.id)),
+        actions.length > 0 && /* @__PURE__ */ jsx13("td", { children: /* @__PURE__ */ jsx13(
+          ActionButtons,
+          {
+            row,
+            rowId,
+            index: row.index,
+            actions,
+            isEditing: true,
+            isParent,
+            hierarchical
+          }
+        ) })
+      ]
+    }
+  );
 }
 
 // src/components/DataTable/utils/hierarchicalUtils.ts
@@ -7214,10 +7313,12 @@ function getRowIdSafe(row, index, getRowId) {
       return String(customId);
     }
   }
-  if (row.id !== void 0 && row.id !== null) {
+  if ("id" in row && row.id !== void 0 && row.id !== null) {
     return String(row.id);
   }
-  return String(index);
+  throw new Error(
+    '[DataTable] Unable to determine a stable row id. Provide a getRowId prop or ensure each record exposes an "id" field.'
+  );
 }
 function hasValidRowId(row, getRowId) {
   try {
@@ -7234,11 +7335,11 @@ var VIRTUALIZATION_THRESHOLD = 1e3;
 var renderEditField2 = (column, value, onChange, editingData = {}, placeholder) => {
   const columnDef = column.columnDef;
   if (columnDef.editable === false) {
-    return /* @__PURE__ */ jsx14("span", { className: "text-sm text-gray-600", children: String(value || "") });
+    return /* @__PURE__ */ jsx14("span", { className: "text-sm text-gray-600", children: String(value ?? "") });
   }
   if (columnDef.fieldType === "select" && columnDef.fieldOptions) {
     const accessorKey = columnDef.editAccessorKey || column.id;
-    const currentValue = editingData[accessorKey] || value || "";
+    const currentValue = editingData[accessorKey] ?? value ?? "";
     return /* @__PURE__ */ jsxs10(
       Select,
       {
@@ -7256,7 +7357,7 @@ var renderEditField2 = (column, value, onChange, editingData = {}, placeholder)
       Input,
       {
         type: "number",
-        value: String(value || ""),
+        value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
         placeholder: placeholder || `Enter ${columnDef.header || column.id}...`,
         className: "h-8"
@@ -7268,7 +7369,7 @@ var renderEditField2 = (column, value, onChange, editingData = {}, placeholder)
       Input,
       {
         type: "date",
-        value: String(value || ""),
+        value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
         className: "h-8"
       }
@@ -7278,14 +7379,14 @@ var renderEditField2 = (column, value, onChange, editingData = {}, placeholder)
     Input,
     {
       type: "text",
-      value: String(value || ""),
+      value: String(value ?? ""),
       onChange: (e) => onChange(e.target.value),
       placeholder: placeholder || `Enter ${columnDef.header || column.id}...`,
       className: "h-8"
     }
   );
 };
-var RowComponent = React7.memo(({
+var RowComponent = React8.memo(({
   row,
   style,
   isEditing,
@@ -7340,7 +7441,7 @@ var RowComponent = React7.memo(({
     const groupValue = row.getValue(grouping[0]);
     const subRowsCount = row.subRows?.length || 0;
     const isExpanded = row.getIsExpanded();
-    return /* @__PURE__ */ jsxs10(React7.Fragment, { children: [
+    return /* @__PURE__ */ jsxs10(React8.Fragment, { children: [
       /* @__PURE__ */ jsx14("tr", { className: "bg-sec-50 hover:bg-sec-100", style, children: /* @__PURE__ */ jsxs10(
         "td",
         {
@@ -7377,9 +7478,9 @@ var RowComponent = React7.memo(({
           {
             className: getTableCellClasses({
               isCompact: true,
-              className: "px-3 py-2 pl-8 whitespace-normal break-words"
+              className: `px-3 py-2 pl-8 ${cell.column.id === "actions" ? "whitespace-nowrap" : "whitespace-normal break-words"} ${cell.column.columnDef.meta?.align === "right" ? "text-right" : ""}`
             }),
-            children: /* @__PURE__ */ jsx14("div", { className: `${cell.column.columnDef.meta?.align === "right" ? "text-right" : ""}`, children: isSubRowEditing && cell.column.id !== "actions" ? (
+            children: isSubRowEditing && cell.column.id !== "actions" ? (
               // Check if column has a custom cell renderer - if so, use it in edit mode
               cell.column.columnDef.cell ? flexRender2(cell.column.columnDef.cell, {
                 ...cell.getContext(),
@@ -7429,7 +7530,7 @@ var RowComponent = React7.memo(({
               rowId: subRowId,
               isExpanded: false,
               hasChildren: false
-            }) })
+            })
           },
           cell.id
         )) }, subRow.id);
@@ -7448,7 +7549,7 @@ var RowComponent = React7.memo(({
         onEditingDataChange,
         onSave: onSaveEditing,
         onCancel: onCancelEditing,
-        actions: (actions || []).filter((a) => !a.disabled),
+        actions: actions ?? [],
         getRowId,
         isParent,
         hierarchical: !!hierarchical
@@ -7464,24 +7565,26 @@ var RowComponent = React7.memo(({
     "tr",
     {
       ref: rowRef,
+      role: "row",
       style: {
         ...style,
         ...isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {}
       },
       className: rowClassName,
+      "aria-selected": typeof row.getIsSelected === "function" ? row.getIsSelected() ? "true" : "false" : "false",
       children: visibleCells.map((cell, cellIndex) => {
         const isFirstCell = cellIndex === 0;
         const shouldShowExpansionButton = isHierarchical && isParent && isFirstCell && hierarchical?.state;
         const isExpanded = shouldShowExpansionButton ? hierarchical?.state?.isExpanded(rowId) : false;
         const hasChildren = shouldShowExpansionButton ? hierarchical?.state?.hasChildren(rowId) : false;
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsxs10(
           "td",
           {
             className: getTableCellClasses({
               isCompact: true,
-              className: "px-3 py-2 whitespace-normal break-words"
+              className: `px-3 py-2 ${cell.column.id === "actions" ? "whitespace-nowrap" : "whitespace-normal break-words"} ${cell.column.columnDef.meta?.align === "right" ? "text-right" : ""}`
             }),
-            children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            children: [
               shouldShowExpansionButton && hasChildren && /* @__PURE__ */ jsx14(
                 Button,
                 {
@@ -7494,7 +7597,7 @@ var RowComponent = React7.memo(({
                   children: isExpanded ? /* @__PURE__ */ jsx14(ChevronDown2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx14(ChevronRight, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ jsx14("div", { className: `flex-1 ${cell.column.columnDef.meta?.align === "right" ? "text-right" : ""}`, children: cell.column.id === "actions" ? /* @__PURE__ */ jsx14(
+              cell.column.id === "actions" ? /* @__PURE__ */ jsx14(
                 ActionButtons,
                 {
                   row,
@@ -7514,8 +7617,8 @@ var RowComponent = React7.memo(({
                 rowId,
                 isExpanded,
                 hasChildren
-              }) })
-            ] })
+              })
+            ]
           },
           cell.id
         );
@@ -7662,7 +7765,7 @@ function UnifiedTableBody({
             className: "px-3 py-2"
           }),
           children: renderEditField2(header.column, creationData[header.column.id], (value) => {
-            if (typeof value === "object" && value !== null) {
+            if (typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
               onCreationDataChange({ ...creationData, ...value });
             } else {
               onCreationDataChange({ ...creationData, [header.column.id]: value });
@@ -7713,7 +7816,7 @@ function UnifiedTableBody({
 }
 
 // src/components/DataTable/components/PaginationControls.tsx
-import React8 from "react";
+import React9 from "react";
 import {
   ChevronLeft,
   ChevronRight as ChevronRight2,
@@ -7723,6 +7826,161 @@ import {
   Database as Database2,
   Zap
 } from "lucide-react";
+
+// src/components/DataTable/utils/paginationUtils.ts
+function getPaginationBinding(config) {
+  const { mode, table, serverData, totalCount, onPageChange, onPageSizeChange } = config;
+  const state = calculatePaginationState(config);
+  const actions = {
+    goToFirstPage: () => {
+      if (mode === "server") {
+        onPageChange?.(0);
+      } else if (table) {
+        table.setPageIndex(0);
+      }
+    },
+    goToPreviousPage: () => {
+      const targetPage = Math.max(0, state.currentPageIndex - 1);
+      if (mode === "server") {
+        onPageChange?.(targetPage);
+      } else if (table) {
+        table.previousPage();
+      }
+    },
+    goToNextPage: () => {
+      const targetPage = Math.min(state.pageCount - 1, state.currentPageIndex + 1);
+      if (mode === "server") {
+        onPageChange?.(targetPage);
+      } else if (table) {
+        table.nextPage();
+      }
+    },
+    goToLastPage: () => {
+      const lastPage = state.pageCount - 1;
+      if (mode === "server") {
+        onPageChange?.(lastPage);
+      } else if (table) {
+        table.setPageIndex(lastPage);
+      }
+    },
+    goToPage: (pageIndex) => {
+      const clampedIndex = Math.max(0, Math.min(state.pageCount - 1, pageIndex));
+      if (mode === "server") {
+        onPageChange?.(clampedIndex);
+      } else if (table) {
+        table.setPageIndex(clampedIndex);
+      }
+    },
+    setPageSize: (pageSize) => {
+      if (mode === "server") {
+        onPageSizeChange?.(pageSize);
+      } else if (table) {
+        table.setPageSize(pageSize);
+      }
+    }
+  };
+  return { state, actions };
+}
+function calculatePaginationState(config) {
+  const { mode, table, serverData, totalCount } = config;
+  if (mode === "server" && serverData) {
+    const startRow = serverData.pageIndex * serverData.pageSize + 1;
+    const endRow = Math.min((serverData.pageIndex + 1) * serverData.pageSize, serverData.totalCount);
+    return {
+      currentPageIndex: serverData.pageIndex,
+      currentPageSize: serverData.pageSize,
+      pageCount: serverData.pageCount,
+      totalRows: serverData.totalCount,
+      canPreviousPage: serverData.hasPreviousPage,
+      canNextPage: serverData.hasNextPage,
+      startRow,
+      endRow
+    };
+  }
+  if (table) {
+    const paginationState = table.getState().pagination;
+    const rowCount = totalCount ?? table.getRowCount();
+    const pageCount = Math.ceil(rowCount / paginationState.pageSize);
+    const startRow = paginationState.pageIndex * paginationState.pageSize + 1;
+    const endRow = Math.min((paginationState.pageIndex + 1) * paginationState.pageSize, rowCount);
+    return {
+      currentPageIndex: paginationState.pageIndex,
+      currentPageSize: paginationState.pageSize,
+      pageCount,
+      totalRows: rowCount,
+      canPreviousPage: table.getCanPreviousPage(),
+      canNextPage: table.getCanNextPage(),
+      startRow,
+      endRow
+    };
+  }
+  return {
+    currentPageIndex: 0,
+    currentPageSize: 10,
+    pageCount: 1,
+    totalRows: 0,
+    canPreviousPage: false,
+    canNextPage: false,
+    startRow: 0,
+    endRow: 0
+  };
+}
+function validatePaginationConfig(config) {
+  const { mode, table, serverData, onPageChange, onPageSizeChange } = config;
+  const logger = createLogger("PaginationUtils");
+  let isValid = true;
+  if (mode === "server") {
+    if (!serverData) {
+      logger.warn("Server mode requires serverData");
+      isValid = false;
+    }
+    if (!onPageChange) {
+      logger.warn("Server mode requires onPageChange callback");
+      isValid = false;
+    }
+    if (!onPageSizeChange) {
+      logger.warn("Server mode requires onPageSizeChange callback");
+      isValid = false;
+    }
+  }
+  if ((mode === "client" || mode === "hybrid") && !table) {
+    logger.warn(`${mode} mode requires table instance`);
+    isValid = false;
+  }
+  if (mode === "hybrid") {
+    if (!onPageChange) {
+      logger.warn("Hybrid mode requires onPageChange callback for server pagination");
+      isValid = false;
+    }
+  }
+  return isValid;
+}
+function getPageSizeOptions(mode, defaultOptions = [10, 20, 30, 40, 50]) {
+  switch (mode) {
+    case "server":
+      return defaultOptions.filter((size) => size <= 250);
+    case "hybrid":
+      return defaultOptions.filter((size) => size >= 50);
+    default:
+      return defaultOptions;
+  }
+}
+function calculateOptimalPageSize(dataSize, mode, availableOptions = [10, 20, 30, 40, 50]) {
+  const filteredOptions = getPageSizeOptions(mode, availableOptions);
+  if (mode === "client" && dataSize <= 100) {
+    return Math.max(dataSize, filteredOptions[0]);
+  }
+  if (mode === "server" && dataSize > 1e4) {
+    return Math.min(...filteredOptions);
+  }
+  if (mode === "hybrid") {
+    const sortedOptions = [...filteredOptions].sort((a, b) => a - b);
+    return sortedOptions[0] || 50;
+  }
+  return filteredOptions[0] || 10;
+}
+
+// src/components/DataTable/components/PaginationControls.tsx
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function PaginationControls({
   table,
@@ -7735,85 +7993,32 @@ function PaginationControls({
   showPerformanceInfo = false,
   totalCount
 }) {
-  const getPaginationState = () => {
-    if (paginationMode === "server" && serverData) {
-      return {
-        currentPageSize: serverData.pageSize,
-        currentPageIndex: serverData.pageIndex,
-        pageCount: serverData.pageCount,
-        totalRows: serverData.totalCount,
-        canPreviousPage: serverData.hasPreviousPage,
-        canNextPage: serverData.hasNextPage
-      };
-    }
-    const state = table.getState().pagination;
-    return {
-      currentPageSize: state.pageSize,
-      currentPageIndex: state.pageIndex,
-      pageCount: table.getPageCount(),
-      totalRows: totalCount ?? table.getRowCount(),
-      canPreviousPage: table.getCanPreviousPage(),
-      canNextPage: table.getCanNextPage()
-    };
-  };
+  const pagination = getPaginationBinding({
+    mode: paginationMode,
+    table,
+    serverData,
+    totalCount,
+    onPageChange,
+    onPageSizeChange
+  });
   const {
     currentPageSize,
     currentPageIndex,
     pageCount,
     totalRows,
     canPreviousPage,
-    canNextPage
-  } = getPaginationState();
-  const handlePageSizeChange = (newPageSize) => {
-    if (paginationMode === "server") {
-      onPageSizeChange?.(newPageSize);
-    } else {
-      table.setPageSize(newPageSize);
-    }
-  };
-  const handleFirstPage = () => {
-    if (paginationMode === "server") {
-      onPageChange?.(0);
-    } else {
-      table.setPageIndex(0);
-    }
-  };
-  const handlePreviousPage = () => {
-    if (paginationMode === "server") {
-      onPageChange?.(Math.max(0, currentPageIndex - 1));
-    } else {
-      table.previousPage();
-    }
-  };
-  const handleNextPage = () => {
-    if (paginationMode === "server") {
-      onPageChange?.(Math.min(pageCount - 1, currentPageIndex + 1));
-    } else {
-      table.nextPage();
-    }
-  };
-  const handleLastPage = () => {
-    if (paginationMode === "server") {
-      onPageChange?.(pageCount - 1);
-    } else {
-      table.setPageIndex(pageCount - 1);
-    }
-  };
-  const startRow = currentPageIndex * currentPageSize + 1;
-  const endRow = Math.min((currentPageIndex + 1) * currentPageSize, totalRows);
-  const getPageSizeOptions = () => {
-    switch (paginationMode) {
-      case "server":
-        return pageSizeOptions.filter((size) => size <= 250);
-      // Limit server-side page sizes
-      case "hybrid":
-        return pageSizeOptions.filter((size) => size >= 50);
-      // Hybrid mode prefers larger pages
-      default:
-        return pageSizeOptions;
-    }
-  };
-  const availablePageSizes = getPageSizeOptions();
+    canNextPage,
+    startRow,
+    endRow
+  } = pagination.state;
+  const {
+    goToFirstPage,
+    goToPreviousPage,
+    goToNextPage,
+    goToLastPage,
+    setPageSize
+  } = pagination.actions;
+  const availablePageSizes = getPageSizeOptions(paginationMode, pageSizeOptions);
   const getModeIcon = () => {
     switch (paginationMode) {
       case "server":
@@ -7846,7 +8051,7 @@ function PaginationControls({
           {
             value: currentPageSize?.toString() || "10",
             selectedText: currentPageSize?.toString() || "10",
-            onValueChange: (value) => handlePageSizeChange(Number(value)),
+            onValueChange: (value) => setPageSize(Number(value)),
             disabled: isLoading,
             className: "w-36 h-8",
             children: [
@@ -7860,7 +8065,7 @@ function PaginationControls({
                   children: /* @__PURE__ */ jsx15(SelectValue, {})
                 }
               ),
-              /* @__PURE__ */ jsx15(SelectContent, { children: pageSizeOptions.map((pageSize) => /* @__PURE__ */ jsx15(SelectItem, { value: pageSize?.toString() || "10", children: pageSize }, pageSize)) })
+              /* @__PURE__ */ jsx15(SelectContent, { children: availablePageSizes.map((pageSize) => /* @__PURE__ */ jsx15(SelectItem, { value: pageSize?.toString() || "10", children: pageSize }, pageSize)) })
             ]
           }
         ),
@@ -7880,7 +8085,7 @@ function PaginationControls({
             variant: "outline",
             size: "sm",
             className: "h-8 w-8 p-0",
-            onClick: handleFirstPage,
+            onClick: goToFirstPage,
             disabled: !canPreviousPage || isLoading,
             "aria-label": "Go to first page",
             tabIndex: 0,
@@ -7893,7 +8098,7 @@ function PaginationControls({
             variant: "outline",
             size: "sm",
             className: "h-8 w-8 p-0",
-            onClick: handlePreviousPage,
+            onClick: goToPreviousPage,
             disabled: !canPreviousPage || isLoading,
             "aria-label": "Go to previous page",
             tabIndex: 0,
@@ -7906,7 +8111,7 @@ function PaginationControls({
             variant: "outline",
             size: "sm",
             className: "h-8 w-8 p-0",
-            onClick: handleNextPage,
+            onClick: goToNextPage,
             disabled: !canNextPage || isLoading,
             "aria-label": "Go to next page",
             tabIndex: 0,
@@ -7919,7 +8124,7 @@ function PaginationControls({
             variant: "outline",
             size: "sm",
             className: "h-8 w-8 p-0",
-            onClick: handleLastPage,
+            onClick: goToLastPage,
             disabled: !canNextPage || isLoading,
             "aria-label": "Go to last page",
             tabIndex: 0,
@@ -7934,24 +8139,23 @@ function EnhancedPaginationControls({
   showJumpToPage = false,
   ...props
 }) {
-  const [jumpToPage, setJumpToPage] = React8.useState("");
-  const { table, paginationMode = "client", serverData, onPageChange } = props;
-  const { pageCount } = (() => {
-    if (paginationMode === "server" && serverData) {
-      return { pageCount: serverData.pageCount };
-    }
-    return { pageCount: table.getPageCount() };
-  })();
+  const [jumpToPage, setJumpToPage] = React9.useState("");
+  const { table, paginationMode = "client", serverData, onPageChange, totalCount } = props;
+  const pagination = getPaginationBinding({
+    mode: paginationMode,
+    table,
+    serverData,
+    totalCount,
+    onPageChange,
+    onPageSizeChange: props.onPageSizeChange
+  });
+  const { pageCount } = pagination.state;
   const handleJumpToPage = (e) => {
     e.preventDefault();
     const pageNumber = parseInt(jumpToPage, 10);
     if (pageNumber >= 1 && pageNumber <= pageCount) {
       const pageIndex = pageNumber - 1;
-      if (paginationMode === "server") {
-        onPageChange?.(pageIndex);
-      } else {
-        table.setPageIndex(pageIndex);
-      }
+      pagination.actions.goToPage(pageIndex);
       setJumpToPage("");
     }
   };
@@ -7985,11 +8189,14 @@ function LoadingState() {
   ] }) });
 }
 
+// src/components/DataTable/components/DataTableModals.tsx
+import { useEffect as useEffect6 } from "react";
+
 // src/components/DataTable/components/ImportModal.tsx
 import { useState as useState4, useRef as useRef4, useEffect as useEffect5 } from "react";
 
 // src/components/Dialog/Dialog.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X as X3 } from "lucide-react";
 
@@ -8065,7 +8272,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -8142,7 +8349,7 @@ var useSmartDimensions = ({
   }
   return result;
 };
-var DialogContent = React9.forwardRef(({
+var DialogContent = React10.forwardRef(({
   className,
   children,
   size = "md",
@@ -8169,17 +8376,17 @@ var DialogContent = React9.forwardRef(({
     minWidth,
     enableScrolling
   });
-  const handleEscapeKeyDown = React9.useCallback((event) => {
+  const handleEscapeKeyDown = React10.useCallback((event) => {
     if (preventCloseOnEscape) {
       event.preventDefault();
     }
   }, [preventCloseOnEscape]);
-  const handlePointerDownOutside = React9.useCallback((event) => {
+  const handlePointerDownOutside = React10.useCallback((event) => {
     if (preventCloseOnOutsideClick) {
       event.preventDefault();
     }
   }, [preventCloseOnOutsideClick]);
-  const mergedStyle = React9.useMemo(() => {
+  const mergedStyle = React10.useMemo(() => {
     if (Object.keys(smartDimensions).length === 0) {
       return style;
     }
@@ -8257,13 +8464,13 @@ var DialogBody = ({
   children,
   ...props
 }) => {
-  const mergedStyle = React9.useMemo(() => {
+  const mergedStyle = React10.useMemo(() => {
     return {
       ...maxHeight && { maxHeight },
       ...style
     };
   }, [maxHeight, style]);
-  const processedHtmlContent = React9.useMemo(() => {
+  const processedHtmlContent = React10.useMemo(() => {
     if (!htmlContent || !allowHtml) {
       return null;
     }
@@ -8325,8 +8532,8 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React9.forwardRef(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
-  const processedHtmlContent = React9.useMemo(() => {
+var DialogTitle = React10.forwardRef(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
+  const processedHtmlContent = React10.useMemo(() => {
     if (!htmlContent || !allowHtml) {
       return null;
     }
@@ -8350,8 +8557,8 @@ var DialogTitle = React9.forwardRef(({ className, htmlContent, allowHtml = true,
   );
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React9.forwardRef(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
-  const processedHtmlContent = React9.useMemo(() => {
+var DialogDescription = React10.forwardRef(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
+  const processedHtmlContent = React10.useMemo(() => {
     if (!htmlContent || !allowHtml) {
       return null;
     }
@@ -8377,11 +8584,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 import { Upload as Upload2, FileText, AlertCircle } from "lucide-react";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function ImportModal({ isOpen, onClose, onImport, config = {} }) {
+  const logger = createLogger("ImportModal");
   const [file, setFile] = useState4(null);
   const [isProcessing, setIsProcessing] = useState4(false);
   const [error, setError] = useState4(null);
   const [previewData, setPreviewData] = useState4(null);
   const [totalCount, setTotalCount] = useState4(0);
+  const [validationErrors, setValidationErrors] = useState4([]);
   const fileInputRef = useRef4(null);
   const isMountedRef = useRef4(true);
   useEffect5(() => {
@@ -8400,34 +8609,11 @@ function ImportModal({ isOpen, onClose, onImport, config = {} }) {
     previewHeaderText = "Preview (first 5 rows)",
     totalRowsText = "Total rows to import: {count}"
   } = config;
-  const handleFileSelect = async (event) => {
-    const selectedFile = event.target.files?.[0];
-    console.log("\u{1F4C1} File selected:", selectedFile?.name);
-    if (selectedFile) {
-      setFile(selectedFile);
-      setError(null);
-      try {
-        const text = await selectedFile.text();
-        console.log("\u{1F4C4} File content length:", text.length);
-        const data = processCSV(text);
-        console.log("\u{1F4CA} Parsed CSV data:", data.length, "rows");
-        console.log("\u{1F440} Setting preview data:", data.slice(0, 5));
-        setPreviewData(data.slice(0, 5));
-        setTotalCount(data.length);
-        console.log("\u{1F440} Preview data state should be updated");
-      } catch (err) {
-        console.error("\u274C CSV parsing error:", err);
-        setError(err instanceof Error ? err.message : "Failed to preview file");
-        setPreviewData(null);
-        setTotalCount(0);
-      }
-    }
-  };
   const processCSV = (csvText) => {
-    console.log("\u{1F4C4} Raw CSV text:", csvText.substring(0, 200) + "...");
+    logger.debug("Raw CSV text:", csvText.substring(0, 200) + "...");
     const lines = csvText.split("\n").filter((line) => line.trim());
-    console.log("\u{1F4C4} CSV lines count:", lines.length);
-    console.log("\u{1F4C4} First few lines:", lines.slice(0, 3));
+    logger.debug("CSV lines count:", lines.length);
+    logger.debug("First few lines:", lines.slice(0, 3));
     if (lines.length < 2) {
       throw new Error("CSV must have at least a header row and one data row");
     }
@@ -8450,17 +8636,17 @@ function ImportModal({ isOpen, onClose, onImport, config = {} }) {
       return result;
     };
     const headers = parseCSVLine(lines[0]).map((h) => h.replace(/"/g, "").trim());
-    console.log("\u{1F4C4} Parsed headers:", headers);
+    logger.debug("Parsed headers:", headers);
     const data = lines.slice(1).map((line, index) => {
       const values = parseCSVLine(line).map((v) => v.replace(/"/g, "").trim());
       const row = {};
       headers.forEach((header, colIndex) => {
         row[header] = values[colIndex] || "";
       });
-      console.log(`\u{1F4C4} Row ${index + 1}:`, row);
+      logger.debug(`Row ${index + 1}:`, row);
       return row;
     });
-    console.log("\u{1F4C4} Final parsed data:", data);
+    logger.debug("Final parsed data:", data);
     return data;
   };
   const handleImport = async () => {
@@ -8489,16 +8675,41 @@ function ImportModal({ isOpen, onClose, onImport, config = {} }) {
     setError(null);
     setPreviewData(null);
     setTotalCount(0);
+    setValidationErrors([]);
     onClose();
   };
-  return /* @__PURE__ */ jsx18(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs14(DialogContent, { className: "sm:max-w-2xl bg-main-50", children: [
-    /* @__PURE__ */ jsxs14(DialogHeader, { children: [
-      /* @__PURE__ */ jsx18(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsx18(DialogDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "border-2 border-dashed border-sec-200 rounded-lg p-6 text-center", children: [
-        /* @__PURE__ */ jsx18(FileText, { className: "h-8 w-8 mx-auto text-sec-400 mb-2" }),
+  const handleFileSelect = async (event) => {
+    const selectedFile = event.target.files?.[0];
+    logger.debug("File selected:", selectedFile?.name);
+    if (selectedFile) {
+      setFile(selectedFile);
+      setError(null);
+      setValidationErrors([]);
+      try {
+        const text = await selectedFile.text();
+        logger.debug("File content length:", text.length);
+        const data = processCSV(text);
+        logger.debug("Parsed CSV data:", data.length, "rows");
+        logger.debug("Setting preview data:", data.slice(0, 5));
+        setPreviewData(data.slice(0, 5));
+        setTotalCount(data.length);
+        logger.debug("Preview data state should be updated");
+      } catch (err) {
+        logger.error("CSV parsing error:", err);
+        setError(err instanceof Error ? err.message : "Failed to preview file");
+        setPreviewData(null);
+        setTotalCount(0);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx18(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs14(DialogContent, { className: "sm:max-w-2xl bg-main-50", children: [
+    /* @__PURE__ */ jsxs14(DialogHeader, { children: [
+      /* @__PURE__ */ jsx18(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx18(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "border-2 border-dashed border-sec-200 rounded-lg p-6 text-center", children: [
+        /* @__PURE__ */ jsx18(FileText, { className: "h-8 w-8 mx-auto text-sec-400 mb-2" }),
         /* @__PURE__ */ jsx18("p", { className: "text-sec-600 mb-2", children: file ? `Selected: ${file.name}` : uploadText }),
         file && /* @__PURE__ */ jsx18("p", { className: "text-xs text-sec-500", children: "File selected, processing preview..." }),
         /* @__PURE__ */ jsxs14(
@@ -8528,6 +8739,34 @@ function ImportModal({ isOpen, onClose, onImport, config = {} }) {
         /* @__PURE__ */ jsx18(AlertCircle, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsx18("span", { className: "text-sm", children: error })
       ] }),
+      validationErrors.length > 0 && /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 p-3 bg-acc-50 border border-acc-200 rounded text-acc-700", children: [
+          /* @__PURE__ */ jsx18(AlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs14("span", { className: "text-sm font-medium", children: [
+            validationErrors.length,
+            " validation error",
+            validationErrors.length !== 1 ? "s" : "",
+            " found"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "max-h-32 overflow-y-auto space-y-1", children: [
+          validationErrors.slice(0, 10).map((err, idx) => /* @__PURE__ */ jsxs14("div", { className: "text-xs text-acc-600 p-2 bg-acc-50 border border-acc-200 rounded", children: [
+            /* @__PURE__ */ jsxs14("span", { className: "font-medium", children: [
+              "Row ",
+              err.row
+            ] }),
+            " \u2022 ",
+            err.field,
+            ": ",
+            err.message
+          ] }, idx)),
+          validationErrors.length > 10 && /* @__PURE__ */ jsxs14("div", { className: "text-xs text-sec-500 italic", children: [
+            "... and ",
+            validationErrors.length - 10,
+            " more errors"
+          ] })
+        ] })
+      ] }),
       previewData && previewData.length > 0 && /* @__PURE__ */ jsxs14("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx18("h4", { className: "text-sec-900", children: previewHeaderText }),
         /* @__PURE__ */ jsx18("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx18("div", { className: "overflow-x-auto max-h-48", children: /* @__PURE__ */ jsxs14("table", { className: "min-w-full text-xs", children: [
@@ -8557,8 +8796,20 @@ function DataTableModals({
   showImportModal,
   onCloseImportModal,
   onImport,
-  importModalConfig
+  importModalConfig,
+  onStoreFocus,
+  onRestoreFocus
 }) {
+  useEffect6(() => {
+    if (showImportModal) {
+      onStoreFocus?.();
+    } else {
+      const timeoutId = setTimeout(() => {
+        onRestoreFocus?.();
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [showImportModal, onStoreFocus, onRestoreFocus]);
   return /* @__PURE__ */ jsx19(Fragment3, { children: /* @__PURE__ */ jsx19(
     ImportModal,
     {
@@ -8571,12 +8822,12 @@ function DataTableModals({
 }
 
 // src/components/DataTable/components/DataTableErrorBoundary.tsx
-import React12, { Component } from "react";
+import React14, { Component } from "react";
 
 // src/components/Alert/Alert.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var AlertContext = React11.createContext({ variant: "default" });
+var AlertContext = React13.createContext({ variant: "default" });
 var getAlertClasses = (variant = "default") => {
   const baseClasses = "relative w-full rounded-lg border p-4";
   const variantClasses = {
@@ -8587,10 +8838,10 @@ var getAlertClasses = (variant = "default") => {
   };
   return `${baseClasses} ${variantClasses[variant]}`;
 };
-var Alert = React11.forwardRef(({ className, variant = "default", ...props }, ref) => {
-  const contextValue = React11.useMemo(() => ({ variant }), [variant]);
+var Alert = React13.forwardRef(({ className, variant = "default", ...props }, ref) => {
+  const contextValue = React13.useMemo(() => ({ variant }), [variant]);
   if (variant === "inline") {
-    return /* @__PURE__ */ jsx20(AlertContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx20(React11.Fragment, { ...props }) });
+    return /* @__PURE__ */ jsx20(AlertContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx20(React13.Fragment, { ...props }) });
   }
   return /* @__PURE__ */ jsx20(AlertContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx20(
     "div",
@@ -8603,8 +8854,8 @@ var Alert = React11.forwardRef(({ className, variant = "default", ...props }, re
   ) });
 });
 Alert.displayName = "Alert";
-var AlertTitle = React11.forwardRef(({ className, ...props }, ref) => {
-  const { variant } = React11.useContext(AlertContext);
+var AlertTitle = React13.forwardRef(({ className, ...props }, ref) => {
+  const { variant } = React13.useContext(AlertContext);
   if (variant === "inline") {
     return /* @__PURE__ */ jsx20("strong", { ...props });
   }
@@ -8618,8 +8869,8 @@ var AlertTitle = React11.forwardRef(({ className, ...props }, ref) => {
   );
 });
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React11.forwardRef(({ className, ...props }, ref) => {
-  const { variant } = React11.useContext(AlertContext);
+var AlertDescription = React13.forwardRef(({ className, ...props }, ref) => {
+  const { variant } = React13.useContext(AlertContext);
   if (variant === "inline") {
     return /* @__PURE__ */ jsx20("span", { ...props });
   }
@@ -8639,12 +8890,13 @@ import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-r
 var DataTableErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
+    this.logger = createLogger("DataTableErrorBoundary");
     this.retryTimeoutId = null;
     this.handleRetry = () => {
       const { onRetry, maxRetries = 3 } = this.props;
       const { retryCount } = this.state;
       if (retryCount >= maxRetries) {
-        console.warn("DataTable Error Boundary: Maximum retry attempts reached");
+        this.logger.warn("Error Boundary: Maximum retry attempts reached");
         return;
       }
       if (onRetry) {
@@ -8686,7 +8938,7 @@ var DataTableErrorBoundary = class extends Component {
       errorInfo
     });
     this.props.onError?.(error, errorInfo);
-    console.error("DataTable Error Boundary caught an error:", error, errorInfo);
+    this.logger.error("Error Boundary caught an error:", error, errorInfo);
   }
   componentWillUnmount() {
     if (this.retryTimeoutId) {
@@ -8753,22 +9005,28 @@ var DataTableErrorBoundary = class extends Component {
 };
 
 // src/components/DataTable/hooks/useColumnOrderPersistence.ts
-import { useState as useState5, useEffect as useEffect6, useCallback as useCallback3 } from "react";
+import { useState as useState5, useEffect as useEffect7, useCallback as useCallback3 } from "react";
 function useColumnOrderPersistence({
   tableId,
   defaultOrder = [],
-  enablePersistence = false
+  enablePersistence = false,
+  storageKey
 }) {
+  const logger = createLogger("ColumnOrderPersistence");
   const [columnOrder, setColumnOrder] = useState5(defaultOrder);
   const [isLoaded, setIsLoaded] = useState5(false);
-  const storageKey = tableId ? `datatable-column-order-${tableId}` : "datatable-column-order";
-  useEffect6(() => {
-    if (!enablePersistence || !tableId) {
+  const finalStorageKey = storageKey ? `${storageKey}-column-order` : tableId ? `datatable-column-order-${tableId}` : "datatable-column-order";
+  useEffect7(() => {
+    if (!enablePersistence || typeof window === "undefined") {
+      setIsLoaded(true);
+      return;
+    }
+    if (!storageKey && !tableId) {
       setIsLoaded(true);
       return;
     }
     try {
-      const savedOrder = localStorage.getItem(storageKey);
+      const savedOrder = localStorage.getItem(finalStorageKey);
       if (savedOrder) {
         const parsedOrder = JSON.parse(savedOrder);
         if (Array.isArray(parsedOrder)) {
@@ -8776,35 +9034,36 @@ function useColumnOrderPersistence({
         }
       }
     } catch (error) {
-      console.warn("Failed to load column order from localStorage:", error);
+      logger.warn("Failed to load column order from localStorage:", error);
     } finally {
       setIsLoaded(true);
     }
-  }, [enablePersistence, tableId, storageKey]);
+  }, [enablePersistence, finalStorageKey, storageKey, tableId]);
   const saveColumnOrder = useCallback3((newOrder) => {
-    if (!enablePersistence || !tableId) return;
+    if (!enablePersistence || typeof window === "undefined") return;
+    if (!storageKey && !tableId) return;
     try {
-      localStorage.setItem(storageKey, JSON.stringify(newOrder));
+      localStorage.setItem(finalStorageKey, JSON.stringify(newOrder));
     } catch (error) {
-      console.warn("Failed to save column order to localStorage:", error);
+      logger.warn("Failed to save column order to localStorage:", error);
     }
-  }, [enablePersistence, tableId, storageKey]);
+  }, [enablePersistence, finalStorageKey, storageKey, tableId]);
   const updateColumnOrder = useCallback3((newOrder) => {
     setColumnOrder(newOrder);
     saveColumnOrder(newOrder);
   }, [saveColumnOrder]);
   const resetColumnOrder = useCallback3(() => {
     setColumnOrder(defaultOrder);
-    if (enablePersistence && tableId) {
+    if (enablePersistence && (storageKey || tableId) && typeof window !== "undefined") {
       try {
-        localStorage.removeItem(storageKey);
+        localStorage.removeItem(finalStorageKey);
       } catch (error) {
-        console.warn("Failed to remove column order from localStorage:", error);
+        logger.warn("Failed to remove column order from localStorage:", error);
       }
     }
-  }, [defaultOrder, enablePersistence, tableId, storageKey]);
+  }, [defaultOrder, enablePersistence, finalStorageKey, storageKey, tableId]);
   const clearAllPreferences = useCallback3(() => {
-    if (!enablePersistence) return;
+    if (!enablePersistence || typeof window === "undefined") return;
     try {
       const keys = Object.keys(localStorage);
       keys.forEach((key) => {
@@ -8813,7 +9072,7 @@ function useColumnOrderPersistence({
         }
       });
     } catch (error) {
-      console.warn("Failed to clear datatable preferences:", error);
+      logger.warn("Failed to clear datatable preferences:", error);
     }
   }, [enablePersistence]);
   return {
@@ -8825,127 +9084,78 @@ function useColumnOrderPersistence({
   };
 }
 
-// src/components/DataTable/hooks/useHierarchicalState.ts
-import { useState as useState6, useCallback as useCallback4, useMemo as useMemo5, useEffect as useEffect7 } from "react";
-function useHierarchicalState(data, config) {
-  const initialExpandedState = useMemo5(() => {
-    if (!config?.defaultExpanded) {
-      return /* @__PURE__ */ new Set();
+// src/components/DataTable/hooks/useColumnVisibilityPersistence.ts
+import { useState as useState6, useEffect as useEffect8, useCallback as useCallback4 } from "react";
+function useColumnVisibilityPersistence({
+  tableId,
+  defaultVisibility = {},
+  enablePersistence = false,
+  storageKey
+}) {
+  const logger = createLogger("ColumnVisibilityPersistence");
+  const [columnVisibility, setColumnVisibility] = useState6(defaultVisibility);
+  const [isLoaded, setIsLoaded] = useState6(false);
+  const finalStorageKey = storageKey ? `${storageKey}-column-visibility` : tableId ? `datatable-column-visibility-${tableId}` : "datatable-column-visibility";
+  useEffect8(() => {
+    if (!enablePersistence || typeof window === "undefined") {
+      setIsLoaded(true);
+      return;
     }
-    if (config.defaultExpanded === true) {
-      return new Set(data.filter((row) => row.isParent).map((row) => row.id));
+    try {
+      const savedVisibility = localStorage.getItem(finalStorageKey);
+      if (savedVisibility) {
+        const parsedVisibility = JSON.parse(savedVisibility);
+        if (typeof parsedVisibility === "object" && parsedVisibility !== null) {
+          setColumnVisibility(parsedVisibility);
+        }
+      }
+    } catch (error) {
+      logger.warn("Failed to load column visibility from localStorage:", error);
+    } finally {
+      setIsLoaded(true);
     }
-    if (Array.isArray(config.defaultExpanded)) {
-      return new Set(config.defaultExpanded);
+  }, [enablePersistence, finalStorageKey]);
+  const saveColumnVisibility = useCallback4((newVisibility) => {
+    if (!enablePersistence || typeof window === "undefined") return;
+    try {
+      localStorage.setItem(finalStorageKey, JSON.stringify(newVisibility));
+    } catch (error) {
+      logger.warn("Failed to save column visibility to localStorage:", error);
     }
-    return /* @__PURE__ */ new Set();
-  }, [data, config?.defaultExpanded]);
-  const [expandedRows, setExpandedRows] = useState6(initialExpandedState);
-  const [prevDataLength, setPrevDataLength] = useState6(data.length);
-  const [prevDefaultExpanded, setPrevDefaultExpanded] = useState6(config?.defaultExpanded);
-  useEffect7(() => {
-    const dataLengthChanged = data.length !== prevDataLength;
-    const configChanged = config?.defaultExpanded !== prevDefaultExpanded;
-    if (configChanged || dataLengthChanged) {
-      if (!config?.defaultExpanded) {
-        setExpandedRows(/* @__PURE__ */ new Set());
-      } else if (config.defaultExpanded === true) {
-        setExpandedRows(new Set(data.filter((row) => row.isParent).map((row) => row.id)));
-      } else if (Array.isArray(config.defaultExpanded)) {
-        setExpandedRows(new Set(config.defaultExpanded));
+  }, [enablePersistence, finalStorageKey]);
+  const updateColumnVisibility = useCallback4((newVisibility) => {
+    setColumnVisibility(newVisibility);
+    saveColumnVisibility(newVisibility);
+  }, [saveColumnVisibility]);
+  const resetColumnVisibility = useCallback4(() => {
+    setColumnVisibility(defaultVisibility);
+    if (enablePersistence && typeof window !== "undefined") {
+      try {
+        localStorage.removeItem(finalStorageKey);
+      } catch (error) {
+        logger.warn("Failed to remove column visibility from localStorage:", error);
       }
-      setPrevDataLength(data.length);
-      setPrevDefaultExpanded(config?.defaultExpanded);
-    }
-  }, [data, config?.defaultExpanded, prevDataLength, prevDefaultExpanded]);
-  const parentChildMap = useMemo5(() => {
-    const map = /* @__PURE__ */ new Map();
-    if (Array.isArray(data)) {
-      data.forEach((row) => {
-        if (row.isParent) {
-          map.set(row.id, []);
-        } else if (row.parentId) {
-          const children = map.get(row.parentId) || [];
-          children.push(row);
-          map.set(row.parentId, children);
-        }
-      });
     }
-    return map;
-  }, [data]);
-  const visibleRows = useMemo5(() => {
-    const visible = [];
-    if (Array.isArray(data)) {
-      data.forEach((row) => {
-        if (row.isParent) {
-          visible.push(row);
-          if (expandedRows.has(row.id)) {
-            const children = parentChildMap.get(row.id) || [];
-            visible.push(...children);
-          }
+  }, [defaultVisibility, enablePersistence, finalStorageKey]);
+  const clearAllPreferences = useCallback4(() => {
+    if (!enablePersistence || typeof window === "undefined") return;
+    try {
+      const keys = Object.keys(localStorage);
+      keys.forEach((key) => {
+        if (key.startsWith("datatable-")) {
+          localStorage.removeItem(key);
         }
       });
+    } catch (error) {
+      logger.warn("Failed to clear datatable preferences:", error);
     }
-    return visible;
-  }, [data, expandedRows, parentChildMap]);
-  const toggleRow = useCallback4((rowId) => {
-    setExpandedRows((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(rowId)) {
-        newSet.delete(rowId);
-      } else {
-        newSet.add(rowId);
-      }
-      if (config?.onExpandedChange) {
-        config.onExpandedChange(Array.from(newSet));
-      }
-      return newSet;
-    });
-  }, [config]);
-  const expandAll = useCallback4(() => {
-    const parentIds = data.filter((row) => row.isParent).map((row) => row.id);
-    setExpandedRows(new Set(parentIds));
-    if (config?.onExpandedChange) {
-      config.onExpandedChange(parentIds);
-    }
-  }, [data, config]);
-  const collapseAll = useCallback4(() => {
-    setExpandedRows(/* @__PURE__ */ new Set());
-    if (config?.onExpandedChange) {
-      config.onExpandedChange([]);
-    }
-  }, [config]);
-  const isExpanded = useCallback4((rowId) => {
-    return expandedRows.has(rowId);
-  }, [expandedRows]);
-  const hasChildren = useCallback4((rowId) => {
-    return parentChildMap.has(rowId) && (parentChildMap.get(rowId)?.length || 0) > 0;
-  }, [parentChildMap]);
-  const getChildrenCount = useCallback4((rowId) => {
-    return parentChildMap.get(rowId)?.length || 0;
-  }, [parentChildMap]);
-  const getExpandedIds = useCallback4(() => {
-    return Array.from(expandedRows);
-  }, [expandedRows]);
-  const setExpandedIds = useCallback4((ids) => {
-    setExpandedRows(new Set(ids));
-  }, []);
+  }, [enablePersistence]);
   return {
-    // State
-    expandedRows,
-    visibleRows,
-    // Actions
-    toggleRow,
-    expandAll,
-    collapseAll,
-    setExpandedIds,
-    // Getters
-    isExpanded,
-    hasChildren,
-    getChildrenCount,
-    getExpandedIds,
-    // Utilities
-    parentChildMap
+    columnVisibility,
+    isLoaded,
+    updateColumnVisibility,
+    resetColumnVisibility,
+    clearAllPreferences
   };
 }
 
@@ -9098,80 +9308,207 @@ function useDataTableState({
   };
 }
 
-// src/components/DataTable/utils/hierarchicalSorting.ts
-function sortHierarchicalDataByStructure(data) {
-  const sorted = [];
-  const processed = /* @__PURE__ */ new Set();
-  data.forEach((row) => {
-    if (row.isParent && !processed.has(row.id)) {
-      sorted.push(row);
-      processed.add(row.id);
+// src/components/DataTable/hooks/useDataTableDataPipeline.ts
+import { useMemo as useMemo8 } from "react";
+
+// src/components/DataTable/hooks/useHierarchicalState.ts
+import { useState as useState7, useCallback as useCallback6, useMemo as useMemo7, useEffect as useEffect9 } from "react";
+function useHierarchicalState(data, config) {
+  const initialExpandedState = useMemo7(() => {
+    if (!config?.defaultExpanded) {
+      return /* @__PURE__ */ new Set();
     }
-  });
-  data.forEach((row) => {
-    if (!row.isParent && !processed.has(row.id)) {
-      sorted.push(row);
-      processed.add(row.id);
+    if (config.defaultExpanded === true) {
+      return new Set(data.filter((row) => row.isParent).map((row) => row.id));
     }
-  });
-  return sorted;
-}
-function sortHierarchicalDataWithSorting(data, sorting) {
-  if (sorting.length === 0) {
-    return data;
-  }
-  const [sortConfig] = sorting;
-  const { id: columnId, desc } = sortConfig;
-  const parentGroups = /* @__PURE__ */ new Map();
-  data.forEach((row) => {
-    if (row.isParent) {
-      parentGroups.set(row.id, { parent: row, children: [] });
-    } else if (row.parentId) {
-      const group = parentGroups.get(row.parentId);
-      if (group) {
-        group.children.push(row);
-      }
+    if (Array.isArray(config.defaultExpanded)) {
+      return new Set(config.defaultExpanded);
     }
-  });
-  const sortedGroups = Array.from(parentGroups.values()).map((group) => {
-    const sortedChildren = [...group.children].sort((a, b) => {
-      const aValue = getSortValue(a, columnId);
-      const bValue = getSortValue(b, columnId);
-      if (aValue === bValue) return 0;
-      const comparison = compareValues(aValue, bValue);
-      return desc ? -comparison : comparison;
-    });
-    return {
-      parent: group.parent,
-      children: sortedChildren
-    };
-  });
-  const sortedData = [];
-  sortedGroups.forEach((group) => {
-    sortedData.push(group.parent);
-    sortedData.push(...group.children);
-  });
-  return sortedData;
-}
-function getSortValue(row, columnId) {
-  const keys = columnId.split(".");
-  let value = row;
-  for (const key of keys) {
-    if (value && typeof value === "object" && key in value) {
-      value = value[key];
-    } else {
-      return null;
+    return /* @__PURE__ */ new Set();
+  }, [data, config?.defaultExpanded]);
+  const [expandedRows, setExpandedRows] = useState7(initialExpandedState);
+  const [prevDataLength, setPrevDataLength] = useState7(data.length);
+  const [prevDefaultExpanded, setPrevDefaultExpanded] = useState7(config?.defaultExpanded);
+  useEffect9(() => {
+    const dataLengthChanged = data.length !== prevDataLength;
+    const configChanged = config?.defaultExpanded !== prevDefaultExpanded;
+    if (configChanged || dataLengthChanged) {
+      if (!config?.defaultExpanded) {
+        setExpandedRows(/* @__PURE__ */ new Set());
+      } else if (config.defaultExpanded === true) {
+        setExpandedRows(new Set(data.filter((row) => row.isParent).map((row) => row.id)));
+      } else if (Array.isArray(config.defaultExpanded)) {
+        setExpandedRows(new Set(config.defaultExpanded));
+      }
+      setPrevDataLength(data.length);
+      setPrevDefaultExpanded(config?.defaultExpanded);
     }
-  }
-  return value;
-}
-function compareValues(a, b) {
-  if (a == null && b == null) return 0;
-  if (a == null) return -1;
-  if (b == null) return 1;
-  if (typeof a === "number" && typeof b === "number") {
-    return a - b;
-  }
+  }, [data, config?.defaultExpanded, prevDataLength, prevDefaultExpanded]);
+  const parentChildMap = useMemo7(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(data)) {
+      data.forEach((row) => {
+        if (row.isParent) {
+          map.set(row.id, []);
+        } else if (row.parentId) {
+          const children = map.get(row.parentId) || [];
+          children.push(row);
+          map.set(row.parentId, children);
+        }
+      });
+    }
+    return map;
+  }, [data]);
+  const visibleRows = useMemo7(() => {
+    const visible = [];
+    if (Array.isArray(data)) {
+      data.forEach((row) => {
+        if (row.isParent) {
+          visible.push(row);
+          if (expandedRows.has(row.id)) {
+            const children = parentChildMap.get(row.id) || [];
+            visible.push(...children);
+          }
+        }
+      });
+    }
+    return visible;
+  }, [data, expandedRows, parentChildMap]);
+  const toggleRow = useCallback6((rowId) => {
+    setExpandedRows((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(rowId)) {
+        newSet.delete(rowId);
+      } else {
+        newSet.add(rowId);
+      }
+      if (config?.onExpandedChange) {
+        config.onExpandedChange(Array.from(newSet));
+      }
+      return newSet;
+    });
+  }, [config]);
+  const expandAll = useCallback6(() => {
+    const parentIds = data.filter((row) => row.isParent).map((row) => row.id);
+    setExpandedRows(new Set(parentIds));
+    if (config?.onExpandedChange) {
+      config.onExpandedChange(parentIds);
+    }
+  }, [data, config]);
+  const collapseAll = useCallback6(() => {
+    setExpandedRows(/* @__PURE__ */ new Set());
+    if (config?.onExpandedChange) {
+      config.onExpandedChange([]);
+    }
+  }, [config]);
+  const isExpanded = useCallback6((rowId) => {
+    return expandedRows.has(rowId);
+  }, [expandedRows]);
+  const hasChildren = useCallback6((rowId) => {
+    return parentChildMap.has(rowId) && (parentChildMap.get(rowId)?.length || 0) > 0;
+  }, [parentChildMap]);
+  const getChildrenCount = useCallback6((rowId) => {
+    return parentChildMap.get(rowId)?.length || 0;
+  }, [parentChildMap]);
+  const getExpandedIds = useCallback6(() => {
+    return Array.from(expandedRows);
+  }, [expandedRows]);
+  const setExpandedIds = useCallback6((ids) => {
+    setExpandedRows(new Set(ids));
+  }, []);
+  return {
+    // State
+    expandedRows,
+    visibleRows,
+    // Actions
+    toggleRow,
+    expandAll,
+    collapseAll,
+    setExpandedIds,
+    // Getters
+    isExpanded,
+    hasChildren,
+    getChildrenCount,
+    getExpandedIds,
+    // Utilities
+    parentChildMap
+  };
+}
+
+// src/components/DataTable/utils/hierarchicalSorting.ts
+function sortHierarchicalDataByStructure(data) {
+  const sorted = [];
+  const processed = /* @__PURE__ */ new Set();
+  data.forEach((row) => {
+    if (row.isParent && !processed.has(row.id)) {
+      sorted.push(row);
+      processed.add(row.id);
+    }
+  });
+  data.forEach((row) => {
+    if (!row.isParent && !processed.has(row.id)) {
+      sorted.push(row);
+      processed.add(row.id);
+    }
+  });
+  return sorted;
+}
+function sortHierarchicalDataWithSorting(data, sorting) {
+  if (sorting.length === 0) {
+    return data;
+  }
+  const [sortConfig] = sorting;
+  const { id: columnId, desc } = sortConfig;
+  const parentGroups = /* @__PURE__ */ new Map();
+  data.forEach((row) => {
+    if (row.isParent) {
+      parentGroups.set(row.id, { parent: row, children: [] });
+    } else if (row.parentId) {
+      const group = parentGroups.get(row.parentId);
+      if (group) {
+        group.children.push(row);
+      }
+    }
+  });
+  const sortedGroups = Array.from(parentGroups.values()).map((group) => {
+    const sortedChildren = [...group.children].sort((a, b) => {
+      const aValue = getSortValue(a, columnId);
+      const bValue = getSortValue(b, columnId);
+      if (aValue === bValue) return 0;
+      const comparison = compareValues(aValue, bValue);
+      return desc ? -comparison : comparison;
+    });
+    return {
+      parent: group.parent,
+      children: sortedChildren
+    };
+  });
+  const sortedData = [];
+  sortedGroups.forEach((group) => {
+    sortedData.push(group.parent);
+    sortedData.push(...group.children);
+  });
+  return sortedData;
+}
+function getSortValue(row, columnId) {
+  const keys = columnId.split(".");
+  let value = row;
+  for (const key of keys) {
+    if (value && typeof value === "object" && key in value) {
+      value = value[key];
+    } else {
+      return null;
+    }
+  }
+  return value;
+}
+function compareValues(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  if (typeof a === "number" && typeof b === "number") {
+    return a - b;
+  }
   if (a instanceof Date && b instanceof Date) {
     return a.getTime() - b.getTime();
   }
@@ -9193,8 +9530,301 @@ function getHierarchicalSortConfig(sorting, columns) {
   return sorting;
 }
 
+// src/components/DataTable/hooks/useDataTableDataPipeline.ts
+function useDataTableDataPipeline({
+  data,
+  features,
+  hierarchical,
+  sorting,
+  finalPaginationMode,
+  serverData
+}) {
+  const hierarchicalEnabled = Boolean(features.hierarchical && hierarchical?.enabled);
+  const hierarchicalValidation = useMemo8(() => {
+    if (!hierarchicalEnabled) {
+      return { isValid: true, errors: [] };
+    }
+    return validateHierarchicalData(data);
+  }, [data, hierarchicalEnabled]);
+  const structuredHierarchicalData = useMemo8(() => {
+    if (!hierarchicalEnabled || !hierarchicalValidation.isValid) {
+      return data;
+    }
+    return sortHierarchicalDataByStructure(data);
+  }, [data, hierarchicalEnabled, hierarchicalValidation.isValid]);
+  const hierarchicalState = useHierarchicalState(
+    hierarchicalEnabled && hierarchicalValidation.isValid ? structuredHierarchicalData : [],
+    hierarchicalEnabled ? hierarchical : void 0
+  );
+  const baseData = useMemo8(() => {
+    if (finalPaginationMode === "server") {
+      return serverData?.data ?? [];
+    }
+    return structuredHierarchicalData;
+  }, [finalPaginationMode, serverData?.data, structuredHierarchicalData]);
+  const tableData = useMemo8(() => {
+    if (!hierarchicalEnabled) {
+      return baseData;
+    }
+    return hierarchicalState.visibleRows ?? [];
+  }, [baseData, hierarchicalEnabled, hierarchicalState.visibleRows]);
+  const sortedHierarchicalData = useMemo8(() => {
+    if (!hierarchicalEnabled || sorting.length === 0) {
+      return tableData;
+    }
+    const visibleRows = hierarchicalState.visibleRows;
+    return sortHierarchicalDataWithSorting(visibleRows, sorting);
+  }, [hierarchicalEnabled, hierarchicalState.visibleRows, sorting, tableData]);
+  const finalTableData = hierarchicalEnabled && sorting.length > 0 ? sortedHierarchicalData : tableData;
+  const dataCount = useMemo8(() => {
+    if (finalPaginationMode === "server") {
+      return serverData?.totalCount ?? 0;
+    }
+    return finalTableData?.length ?? 0;
+  }, [finalPaginationMode, finalTableData?.length, serverData?.totalCount]);
+  return {
+    finalTableData,
+    dataCount,
+    hierarchicalState: hierarchicalEnabled ? hierarchicalState : void 0,
+    hierarchicalValidation
+  };
+}
+
+// src/components/DataTable/hooks/useServerSideDataEffect.ts
+import { useCallback as useCallback7, useEffect as useEffect10 } from "react";
+function useServerSideDataEffect({
+  finalPaginationMode,
+  serverSide,
+  pagination,
+  sorting,
+  columnFilters,
+  grouping,
+  searchQuery,
+  tableDataLength,
+  fetchServerData,
+  cleanup
+}) {
+  const handleServerSideChange = useCallback7(async () => {
+    if (finalPaginationMode !== "server" || !serverSide) {
+      return;
+    }
+    const params = {
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      sorting,
+      columnFilters,
+      globalFilter: searchQuery,
+      grouping
+    };
+    await fetchServerData(params);
+  }, [
+    finalPaginationMode,
+    serverSide,
+    pagination.pageIndex,
+    pagination.pageSize,
+    sorting,
+    columnFilters,
+    searchQuery,
+    grouping,
+    fetchServerData
+  ]);
+  useEffect10(() => {
+    if (finalPaginationMode !== "server" || !serverSide) {
+      return;
+    }
+    if (tableDataLength > 0) {
+      return;
+    }
+    handleServerSideChange();
+  }, [
+    finalPaginationMode,
+    serverSide,
+    tableDataLength,
+    handleServerSideChange
+  ]);
+  useEffect10(() => () => {
+    cleanup?.();
+  }, [cleanup]);
+  return handleServerSideChange;
+}
+
+// src/components/DataTable/hooks/useEffectiveColumnOrder.ts
+import { useMemo as useMemo9 } from "react";
+function useEffectiveColumnOrder({
+  columns,
+  externalColumnOrder,
+  selectionEnabled
+}) {
+  const baseOrder = useMemo9(() => {
+    if (externalColumnOrder && externalColumnOrder.length > 0) {
+      return externalColumnOrder;
+    }
+    return columns.map((column) => column.id || column.accessorKey || "").filter((identifier) => Boolean(identifier));
+  }, [columns, externalColumnOrder]);
+  return useMemo9(() => {
+    if (selectionEnabled && !baseOrder.includes("select")) {
+      return ["select", ...baseOrder];
+    }
+    return baseOrder;
+  }, [baseOrder, selectionEnabled]);
+}
+
+// src/components/DataTable/hooks/useTableHandlers.ts
+import { useCallback as useCallback8, useMemo as useMemo10 } from "react";
+function useTableHandlers({
+  state,
+  stateSnapshot,
+  actions,
+  selection,
+  onRowSelectionChange,
+  effectiveColumnOrder,
+  canPersistVisibility,
+  canPersistOrder,
+  updateSavedColumnVisibility,
+  updateColumnOrder,
+  onLayoutChange
+}) {
+  const handleSortingChange = useCallback8((updaterOrValue) => {
+    const nextValue = typeof updaterOrValue === "function" ? updaterOrValue(stateSnapshot.sorting) : updaterOrValue;
+    actions.setSorting(nextValue);
+  }, [actions, stateSnapshot.sorting]);
+  const handleColumnFiltersChange = useCallback8((updaterOrValue) => {
+    const nextValue = typeof updaterOrValue === "function" ? updaterOrValue(stateSnapshot.columnFilters) : updaterOrValue;
+    actions.setColumnFilters(nextValue);
+  }, [actions, stateSnapshot.columnFilters]);
+  const handleColumnVisibilityChange = useCallback8((updaterOrValue) => {
+    const nextValue = typeof updaterOrValue === "function" ? updaterOrValue(stateSnapshot.columnVisibility) : updaterOrValue;
+    actions.setColumnVisibility(nextValue);
+    if (canPersistVisibility) {
+      updateSavedColumnVisibility(nextValue);
+    }
+    onLayoutChange?.({
+      columnOrder: effectiveColumnOrder,
+      columnVisibility: nextValue
+    });
+  }, [actions, stateSnapshot.columnVisibility, canPersistVisibility, updateSavedColumnVisibility, onLayoutChange, effectiveColumnOrder]);
+  const handleRowSelectionChange = useCallback8((updaterOrValue) => {
+    const currentSelection = selection ?? state.rowSelection;
+    const nextSelection = typeof updaterOrValue === "function" ? updaterOrValue(currentSelection) : updaterOrValue;
+    if (selection === void 0) {
+      actions.setRowSelection(nextSelection);
+      return;
+    }
+    onRowSelectionChange?.(nextSelection);
+  }, [actions, selection, state.rowSelection, onRowSelectionChange]);
+  const handleGroupingChange = useCallback8((updaterOrValue) => {
+    const nextValue = typeof updaterOrValue === "function" ? updaterOrValue(stateSnapshot.grouping) : updaterOrValue;
+    actions.setGrouping(nextValue);
+  }, [actions, stateSnapshot.grouping]);
+  const handleExpandedChange = useCallback8((updaterOrValue) => {
+    const nextValue = typeof updaterOrValue === "function" ? updaterOrValue(stateSnapshot.expanded) : updaterOrValue;
+    actions.setExpanded(nextValue);
+  }, [actions, stateSnapshot.expanded]);
+  const handlePaginationChange = useCallback8((updaterOrValue) => {
+    const nextValue = typeof updaterOrValue === "function" ? updaterOrValue(stateSnapshot.pagination) : updaterOrValue;
+    actions.setPagination(nextValue);
+  }, [actions, stateSnapshot.pagination]);
+  const handleColumnOrderChange = useCallback8((updaterOrValue) => {
+    const nextValue = typeof updaterOrValue === "function" ? updaterOrValue(stateSnapshot.columnOrder) : updaterOrValue;
+    actions.setColumnOrder(nextValue);
+    if (canPersistOrder) {
+      updateColumnOrder(nextValue);
+    }
+    onLayoutChange?.({
+      columnOrder: nextValue,
+      columnVisibility: stateSnapshot.columnVisibility
+    });
+  }, [actions, stateSnapshot.columnOrder, stateSnapshot.columnVisibility, canPersistOrder, updateColumnOrder, onLayoutChange]);
+  return useMemo10(() => ({
+    onSortingChange: handleSortingChange,
+    onColumnFiltersChange: handleColumnFiltersChange,
+    onColumnVisibilityChange: handleColumnVisibilityChange,
+    onRowSelectionChange: handleRowSelectionChange,
+    onGroupingChange: handleGroupingChange,
+    onExpandedChange: handleExpandedChange,
+    onPaginationChange: handlePaginationChange,
+    onColumnOrderChange: handleColumnOrderChange
+  }), [
+    handleSortingChange,
+    handleColumnFiltersChange,
+    handleColumnVisibilityChange,
+    handleRowSelectionChange,
+    handleGroupingChange,
+    handleExpandedChange,
+    handlePaginationChange,
+    handleColumnOrderChange
+  ]);
+}
+
+// src/components/DataTable/hooks/useDataTableConfiguration.ts
+import { useMemo as useMemo11 } from "react";
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel
+} from "@tanstack/react-table";
+function useDataTableConfiguration({
+  data,
+  columns,
+  stateSnapshot,
+  handlers,
+  features,
+  getRowId,
+  finalPaginationMode,
+  finalDataCount,
+  pageSize
+}) {
+  return useMemo11(() => ({
+    data,
+    columns,
+    state: {
+      sorting: stateSnapshot.sorting,
+      columnFilters: stateSnapshot.columnFilters,
+      columnVisibility: stateSnapshot.columnVisibility,
+      rowSelection: stateSnapshot.rowSelection,
+      grouping: stateSnapshot.grouping,
+      expanded: stateSnapshot.expanded,
+      pagination: stateSnapshot.pagination,
+      globalFilter: stateSnapshot.globalFilter,
+      columnOrder: stateSnapshot.columnOrder
+    },
+    initialState: {
+      expanded: features.grouping ? {} : void 0
+    },
+    enableRowSelection: features.selection,
+    enableGrouping: features.grouping,
+    getRowId,
+    ...handlers,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: finalPaginationMode === "client" ? getFilteredRowModel() : void 0,
+    getSortedRowModel: finalPaginationMode === "client" ? getSortedRowModel() : void 0,
+    getPaginationRowModel: features.pagination ? getPaginationRowModel() : void 0,
+    getGroupedRowModel: features.grouping ? getGroupedRowModel() : void 0,
+    getExpandedRowModel: features.grouping ? getExpandedRowModel() : void 0,
+    manualSorting: finalPaginationMode === "server",
+    manualFiltering: finalPaginationMode === "server",
+    manualPagination: finalPaginationMode === "server",
+    pageCount: finalPaginationMode === "server" ? Math.ceil(finalDataCount / pageSize) : void 0
+  }), [
+    data,
+    columns,
+    stateSnapshot,
+    handlers,
+    features.selection,
+    features.grouping,
+    features.pagination,
+    getRowId,
+    finalPaginationMode,
+    finalDataCount,
+    pageSize
+  ]);
+}
+
 // src/components/Card/Card.tsx
-import * as React13 from "react";
+import * as React15 from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 function getCardClasses(variant = "default", size = "default") {
   const baseClasses = "rounded-lg border bg-card text-card-foreground shadow-sm";
@@ -9210,7 +9840,7 @@ function getCardClasses(variant = "default", size = "default") {
   };
   return `${baseClasses} ${variantClasses[variant]} ${sizeClasses2[size]}`;
 }
-var Card = React13.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx22(
+var Card = React15.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx22(
   "article",
   {
     ref,
@@ -9223,7 +9853,7 @@ var Card = React13.forwardRef(({ className, variant, size, ...props }, ref) => /
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var CardHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "header",
   {
     ref,
@@ -9232,7 +9862,7 @@ var CardHeader = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var CardTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "h3",
   {
     ref,
@@ -9244,7 +9874,7 @@ var CardTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var CardDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "p",
   {
     ref,
@@ -9253,7 +9883,7 @@ var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var CardContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "main",
   {
     ref,
@@ -9262,7 +9892,7 @@ var CardContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CardContent.displayName = "CardContent";
-var CardFooter = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var CardFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "footer",
   {
     ref,
@@ -9271,7 +9901,7 @@ var CardFooter = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardFooter.displayName = "CardFooter";
-var CardActions = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var CardActions = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "nav",
   {
     ref,
@@ -9282,7 +9912,7 @@ var CardActions = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CardActions.displayName = "CardActions";
-var HoverCard = React13.forwardRef(({ children, className, ...props }, ref) => {
+var HoverCard = React15.forwardRef(({ children, className, ...props }, ref) => {
   return /* @__PURE__ */ jsx22(
     "section",
     {
@@ -9294,7 +9924,7 @@ var HoverCard = React13.forwardRef(({ children, className, ...props }, ref) => {
   );
 });
 HoverCard.displayName = "HoverCard";
-var HoverCardTrigger = React13.forwardRef(({ className, asChild, children, ...props }, ref) => {
+var HoverCardTrigger = React15.forwardRef(({ className, asChild, children, ...props }, ref) => {
   if (asChild) {
     return /* @__PURE__ */ jsx22("span", { className: cn("cursor-pointer", className), children });
   }
@@ -9313,7 +9943,7 @@ var HoverCardTrigger = React13.forwardRef(({ className, asChild, children, ...pr
   );
 });
 HoverCardTrigger.displayName = "HoverCardTrigger";
-var HoverCardContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var HoverCardContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "aside",
   {
     ref,
@@ -9342,14 +9972,14 @@ function AccessDeniedPage({
   const handleRetry = () => {
     if (onRetry) {
       onRetry();
-    } else {
+    } else if (typeof window !== "undefined") {
       window.location.reload();
     }
   };
   const handleBack = () => {
     if (onBack) {
       onBack();
-    } else {
+    } else if (typeof window !== "undefined") {
       window.history.back();
     }
   };
@@ -9401,31 +10031,76 @@ function AccessDeniedPage({
 }
 
 // src/components/DataTable/utils/exportUtils.ts
+function escapeCSVValue(value, sanitizeForSecurity = true) {
+  if (value === null || value === void 0) {
+    return sanitizeForSecurity ? '""' : "";
+  }
+  let stringValue = String(value);
+  if (sanitizeForSecurity) {
+    if (/^[=+\-@]/.test(stringValue) || stringValue.startsWith("	")) {
+      stringValue = "'" + stringValue;
+    }
+    stringValue = stringValue.replace(/[\x00-\x08\x0B-\x0C\x0E-\x1F]/g, "");
+    const escaped = stringValue.replace(/"/g, '""');
+    return `"${escaped}"`;
+  } else {
+    const escaped = stringValue.replace(/"/g, '""');
+    return `"${escaped}"`;
+  }
+}
+function formatLocaleValue(value, locale) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "number") {
+    return new Intl.NumberFormat(locale).format(value);
+  }
+  if (value instanceof Date) {
+    return new Intl.DateTimeFormat(locale).format(value);
+  }
+  if (typeof value === "boolean") {
+    return "";
+  }
+  return String(value);
+}
 function generateCSVContent(data, columns, options = {}) {
   if (!data.length) return "";
-  const { includeHeaders = true } = options;
-  const headers = columns.map((col) => col.header || col.id || "Column");
+  const {
+    includeHeaders = true,
+    locale,
+    sanitizeForSecurity = true
+  } = options;
+  const headers = columns.map((col) => {
+    const headerValue = col.header || col.id || "Column";
+    return escapeCSVValue(headerValue, sanitizeForSecurity);
+  });
   const csvData = data.map((row) => {
     return columns.map((col) => {
       const key = col.accessorKey || col.id;
-      const value = row[key];
-      const escapedValue = String(value || "").replace(/"/g, '""');
-      return `"${escapedValue}"`;
+      let value = key ? row[key] : void 0;
+      if (locale && (typeof value === "number" || value instanceof Date || typeof value === "boolean")) {
+        value = formatLocaleValue(value, locale);
+      }
+      return escapeCSVValue(value, sanitizeForSecurity);
     }).join(",");
   });
   const csvContent = includeHeaders ? [headers.join(","), ...csvData].join("\n") : csvData.join("\n");
   return csvContent;
 }
-function exportToCSV(data, columns, filename = "download.csv") {
+function exportToCSV(data, columns, filename = "download.csv", options = {}) {
+  const logger = createLogger("ExportUtils");
   return new Promise((resolve, reject) => {
     try {
+      if (typeof window === "undefined") {
+        throw new Error("CSV export is only available in browser environments");
+      }
       if (!data || data.length === 0) {
         throw new Error("No data to export");
       }
       if (!columns || columns.length === 0) {
         throw new Error("No columns defined for export");
       }
-      const csvContent = generateCSVContent(data, columns);
+      const csvContent = generateCSVContent(data, columns, options);
       const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
       const link = document.createElement("a");
       const url = URL.createObjectURL(blob);
@@ -9442,7 +10117,7 @@ function exportToCSV(data, columns, filename = "download.csv") {
       link.click();
       document.body.removeChild(link);
     } catch (error) {
-      console.error("Failed to export data to CSV:", error);
+      logger.error("Failed to export data to CSV:", error);
       reject(error);
     }
   });
@@ -9453,8 +10128,36 @@ init_UnifiedAuthProvider();
 
 // src/components/DataTable/hooks/useDataTablePermissions.ts
 init_UnifiedAuthProvider();
-import { useMemo as useMemo7, useRef as useRef5 } from "react";
-function useDataTablePermissions(rbac, features) {
+import { useMemo as useMemo12, useRef as useRef5 } from "react";
+
+// src/components/DataTable/types.ts
+var defaultDataTableFeatures = {
+  search: false,
+  pagination: false,
+  sorting: false,
+  filtering: false,
+  import: false,
+  export: false,
+  selection: false,
+  creation: false,
+  editing: false,
+  deletion: false,
+  deleteSelected: false,
+  grouping: false,
+  columnVisibility: false,
+  columnReordering: false,
+  hierarchical: false
+};
+function normalizeDataTableFeatures(features) {
+  return {
+    ...defaultDataTableFeatures,
+    ...features ?? {}
+  };
+}
+
+// src/components/DataTable/hooks/useDataTablePermissions.ts
+function useDataTablePermissions(rbac, features = {}) {
+  const logger = createLogger("DataTablePermissions");
   const authResult = useUnifiedAuth();
   const user = authResult.user;
   const pageId = rbac?.pageId;
@@ -9463,11 +10166,18 @@ function useDataTablePermissions(rbac, features) {
     throw new Error("DataTable requires either rbac.pageId or rbac.pageName for permission checking");
   }
   const effectivePageId = pageId || pageName;
-  const { selectedOrganisationId, selectedEventId, supabase } = useUnifiedAuth();
-  const { resolvedScope: rawResolvedScope } = useResolvedScope({
+  const { selectedOrganisation, selectedEvent, supabase, organisations } = useUnifiedAuth();
+  logger.debug("Organisation context:", {
+    hasSelectedOrg: !!selectedOrganisation,
+    selectedOrgId: selectedOrganisation?.id,
+    hasOrganisations: organisations?.length > 0,
+    organisationCount: organisations?.length,
+    selectedEvent: selectedEvent?.event_id
+  });
+  const { resolvedScope: rawResolvedScope, isLoading: scopeLoading } = useResolvedScope({
     supabase,
-    selectedOrganisationId,
-    selectedEventId
+    selectedOrganisationId: selectedOrganisation?.id || null,
+    selectedEventId: selectedEvent?.event_id || null
   });
   const stableScopeRef = useRef5({
     organisationId: "",
@@ -9491,26 +10201,46 @@ function useDataTablePermissions(rbac, features) {
     stableScopeRef.current = { organisationId: "", appId: "", eventId: void 0 };
   }
   const stableScope = stableScopeRef.current;
-  const effectiveScope = stableScope.organisationId ? stableScope : { organisationId: "", eventId: void 0, appId: void 0 };
+  const effectiveScope = !scopeLoading && stableScope.organisationId ? stableScope : null;
+  const userId = user?.id || "";
+  const readPermission = `read:page.${effectivePageId}`;
+  const createPermission = `create:page.${effectivePageId}`;
+  const updatePermission = `update:page.${effectivePageId}`;
+  const deletePermission = `delete:page.${effectivePageId}`;
+  const consistentScope = effectiveScope || { organisationId: "", eventId: void 0, appId: void 0 };
   const permissions = {
-    canRead: useCan(user?.id || "", effectiveScope, `read:page.${effectivePageId}`, effectivePageId, true),
-    canCreate: useCan(user?.id || "", effectiveScope, `create:page.${effectivePageId}`, effectivePageId, true),
-    canUpdate: useCan(user?.id || "", effectiveScope, `update:page.${effectivePageId}`, effectivePageId, true),
-    canDelete: useCan(user?.id || "", effectiveScope, `delete:page.${effectivePageId}`, effectivePageId, true),
-    canExport: useCan(user?.id || "", effectiveScope, `read:page.${effectivePageId}`, effectivePageId, true),
+    canRead: useCan(userId, consistentScope, readPermission, effectivePageId, true),
+    canCreate: useCan(userId, consistentScope, createPermission, effectivePageId, true),
+    canUpdate: useCan(userId, consistentScope, updatePermission, effectivePageId, true),
+    canDelete: useCan(userId, consistentScope, deletePermission, effectivePageId, true),
+    canExport: useCan(userId, consistentScope, readPermission, effectivePageId, true),
     // Use read permission for export
-    canImport: useCan(user?.id || "", effectiveScope, `create:page.${effectivePageId}`, effectivePageId, true)
+    canImport: useCan(userId, consistentScope, createPermission, effectivePageId, true)
     // Use create permission for import
   };
-  const secureFeatures = useMemo7(() => ({
-    ...features,
-    creation: features.creation && permissions.canCreate.can,
-    editing: features.editing && permissions.canUpdate.can,
-    deletion: features.deletion && permissions.canDelete.can,
-    deleteSelected: features.deleteSelected && permissions.canDelete.can,
-    export: features.export && permissions.canExport.can,
-    import: features.import && permissions.canImport.can
-  }), [features, permissions.canCreate.can, permissions.canUpdate.can, permissions.canDelete.can, permissions.canExport.can, permissions.canImport.can]);
+  logger.debug("Permission check results:", {
+    canRead: permissions.canRead.can,
+    canReadLoading: permissions.canRead.isLoading,
+    canReadError: permissions.canRead.error?.message,
+    canCreate: permissions.canCreate.can,
+    pageName: effectivePageId,
+    scope: consistentScope,
+    hasValidScope: !!effectiveScope,
+    scopeLoading
+  });
+  const normalizedFeatures = useMemo12(
+    () => normalizeDataTableFeatures(features),
+    [features]
+  );
+  const secureFeatures = useMemo12(() => ({
+    ...normalizedFeatures,
+    creation: normalizedFeatures.creation && permissions.canCreate.can,
+    editing: normalizedFeatures.editing && permissions.canUpdate.can,
+    deletion: normalizedFeatures.deletion && permissions.canDelete.can,
+    deleteSelected: normalizedFeatures.deleteSelected && permissions.canDelete.can,
+    export: normalizedFeatures.export && permissions.canExport.can,
+    import: normalizedFeatures.import && permissions.canImport.can
+  }), [normalizedFeatures, permissions.canCreate.can, permissions.canUpdate.can, permissions.canDelete.can, permissions.canExport.can, permissions.canImport.can]);
   return {
     permissions,
     secureFeatures,
@@ -9519,7 +10249,7 @@ function useDataTablePermissions(rbac, features) {
 }
 
 // src/components/DataTable/hooks/useTableColumns.ts
-import React14, { useMemo as useMemo8 } from "react";
+import React16, { useMemo as useMemo13 } from "react";
 
 // src/components/DataTable/core/ColumnFactory.ts
 var ColumnFactory = class {
@@ -9647,7 +10377,8 @@ var ColumnFactory = class {
       },
       size: options.size || 150,
       minSize: options.minSize || 100,
-      maxSize: options.maxSize || 200
+      maxSize: options.maxSize || 200,
+      meta: options.meta
     };
   }
   /**
@@ -9699,7 +10430,7 @@ function useTableColumns({
   effectiveActions,
   columnOrder
 }) {
-  const enhancedColumns = useMemo8(() => {
+  const enhancedColumns = useMemo13(() => {
     const baseColumns = [...columns].map((column) => ({
       ...column,
       enableSorting: features.sorting && column.enableSorting !== false,
@@ -9711,14 +10442,14 @@ function useTableColumns({
       header: ({ table }) => {
         const isAllSelected = table.getIsAllPageRowsSelected();
         const isSomeSelected = table.getIsSomePageRowsSelected();
-        return React14.createElement(Checkbox, {
+        return React16.createElement(Checkbox, {
           checked: isAllSelected ? true : isSomeSelected ? "indeterminate" : false,
           onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
           "aria-label": "Select all"
         });
       },
       cell: ({ row }) => {
-        return React14.createElement(Checkbox, {
+        return React16.createElement(Checkbox, {
           checked: row.getIsSelected(),
           onCheckedChange: (value) => row.toggleSelected(!!value),
           "aria-label": "Select row"
@@ -9734,7 +10465,11 @@ function useTableColumns({
     } : null;
     const actionsColumn = effectiveActions.length > 0 ? ColumnFactory.createActionColumn(effectiveActions, {
       header: "Actions",
-      size: 120
+      size: 1,
+      // Shrink to fit content
+      minSize: 0,
+      maxSize: 0,
+      meta: { align: "right" }
     }) : null;
     const finalColumns = [];
     if (columnOrder && columnOrder.length > 0) {
@@ -9754,34 +10489,471 @@ function useTableColumns({
           if (dataColumn) {
             finalColumns.push(dataColumn);
           }
-        }
-      }
-      const remainingDataColumns = baseColumns.filter((col) => {
-        const colId = col.id ? String(col.id) : "accessorKey" in col ? String(col.accessorKey) : "";
-        return !usedColumnIds.has(colId);
-      });
-      finalColumns.push(...remainingDataColumns);
-      if (actionsColumn && !usedColumnIds.has("actions")) {
-        finalColumns.push(actionsColumn);
-      }
-    } else {
-      if (selectionColumn) {
-        finalColumns.push(selectionColumn);
+        }
+      }
+      const remainingDataColumns = baseColumns.filter((col) => {
+        const colId = col.id ? String(col.id) : "accessorKey" in col ? String(col.accessorKey) : "";
+        return !usedColumnIds.has(colId);
+      });
+      finalColumns.push(...remainingDataColumns);
+      if (actionsColumn && !usedColumnIds.has("actions")) {
+        finalColumns.push(actionsColumn);
+      }
+    } else {
+      if (selectionColumn) {
+        finalColumns.push(selectionColumn);
+      }
+      finalColumns.push(...baseColumns);
+      if (actionsColumn) {
+        finalColumns.push(actionsColumn);
+      }
+    }
+    return finalColumns;
+  }, [columns, features, effectiveActions, columnOrder]);
+  return {
+    enhancedColumns
+  };
+}
+
+// src/components/DataTable/utils/a11yUtils.ts
+var liveRegion = null;
+function initializeLiveRegion() {
+  if (typeof window === "undefined") return null;
+  if (liveRegion && document.contains(liveRegion)) {
+    return liveRegion;
+  }
+  liveRegion = document.createElement("div");
+  liveRegion.setAttribute("aria-live", "polite");
+  liveRegion.setAttribute("aria-atomic", "true");
+  liveRegion.setAttribute("class", "sr-only");
+  liveRegion.style.position = "absolute";
+  liveRegion.style.left = "-10000px";
+  liveRegion.style.width = "1px";
+  liveRegion.style.height = "1px";
+  liveRegion.style.overflow = "hidden";
+  document.body.appendChild(liveRegion);
+  return liveRegion;
+}
+function cleanupLiveRegion() {
+  if (typeof window === "undefined") return;
+  if (liveRegion && document.contains(liveRegion)) {
+    document.body.removeChild(liveRegion);
+    liveRegion = null;
+  }
+}
+function announce(message, priority = "polite") {
+  if (!message.trim() || typeof window === "undefined") return;
+  const region = liveRegion || initializeLiveRegion();
+  if (!region) return;
+  if (region.getAttribute("aria-live") !== priority) {
+    region.setAttribute("aria-live", priority);
+  }
+  region.textContent = "";
+  setTimeout(() => {
+    region.textContent = message;
+  }, 100);
+  setTimeout(() => {
+    if (region.textContent === message) {
+      region.textContent = "";
+    }
+  }, 1e3);
+}
+function getSortButtonLabel(columnName, currentSort) {
+  if (currentSort === "asc") {
+    return `Sort ${columnName} descending`;
+  } else if (currentSort === "desc") {
+    return `Remove sort from ${columnName}`;
+  } else {
+    return `Sort ${columnName} ascending`;
+  }
+}
+function announceSortChange(columnName, sortDirection) {
+  let message;
+  if (sortDirection === "asc") {
+    message = `Table sorted by ${columnName} in ascending order`;
+  } else if (sortDirection === "desc") {
+    message = `Table sorted by ${columnName} in descending order`;
+  } else {
+    message = `Sort removed from ${columnName}`;
+  }
+  announce(message);
+}
+function announceFilterChange(columnName, filterValue, resultCount) {
+  if (filterValue.trim()) {
+    const message = `Filtered ${columnName} by "${filterValue}". ${resultCount} ${resultCount === 1 ? "result" : "results"} found.`;
+    announce(message);
+  } else {
+    announce(`Filter removed from ${columnName}`);
+  }
+}
+function announceSearchResults(query, resultCount) {
+  if (query.trim()) {
+    const message = `Search for "${query}" returned ${resultCount} ${resultCount === 1 ? "result" : "results"}.`;
+    announce(message);
+  } else {
+    announce("Search cleared");
+  }
+}
+function announcePaginationChange(currentPage, totalPages, pageSize, totalItems) {
+  const startItem = (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+  const message = `Page ${currentPage} of ${totalPages}. Showing items ${startItem} to ${endItem} of ${totalItems}.`;
+  announce(message);
+}
+function announceSelectionChange(selectedCount, totalCount) {
+  if (selectedCount === 0) {
+    announce("All rows deselected");
+  } else if (selectedCount === totalCount) {
+    announce(`All ${totalCount} rows selected`);
+  } else {
+    announce(`${selectedCount} of ${totalCount} rows selected`);
+  }
+}
+function announceLoadingState(isLoading, hasError = false) {
+  if (hasError) {
+    announce("Error loading data", "assertive");
+  } else if (isLoading) {
+    announce("Loading data...");
+  } else {
+    announce("Data loaded");
+  }
+}
+function announceBulkOperation(operation, count) {
+  const message = `${operation} completed for ${count} ${count === 1 ? "item" : "items"}`;
+  announce(message);
+}
+function getAriaSortValue(sortDirection) {
+  if (sortDirection === "asc") return "ascending";
+  if (sortDirection === "desc") return "descending";
+  return "none";
+}
+function getRowDescription(rowIndex, totalRows, isSelected = false, isEditing = false) {
+  let description = `Row ${rowIndex + 1} of ${totalRows}`;
+  if (isSelected) {
+    description += ", selected";
+  }
+  if (isEditing) {
+    description += ", editing mode";
+  }
+  return description;
+}
+
+// src/components/DataTable/hooks/useKeyboardNavigation.ts
+import { useCallback as useCallback9, useEffect as useEffect11, useRef as useRef6, useState as useState8 } from "react";
+function useKeyboardNavigation(rowCount, columnCount, options = {}) {
+  const {
+    enabled = true,
+    announceNavigation = true,
+    supportsColumnReorder = false,
+    supportsColumnResize = false,
+    onFocusChange,
+    tableRef: externalTableRef
+  } = options;
+  const [state, setState] = useState8({
+    focusedRowIndex: 0,
+    focusedColumnIndex: 0,
+    isNavigating: false
+  });
+  const internalTableRef = useRef6(null);
+  const tableRef = externalTableRef || internalTableRef;
+  const storedFocusRef = useRef6(null);
+  const navigationTimeoutRef = useRef6();
+  const getCellElement = useCallback9((rowIndex, columnIndex) => {
+    if (!tableRef.current) return null;
+    const tbody = tableRef.current.querySelector("tbody");
+    if (!tbody) return null;
+    const rows = tbody.querySelectorAll('tr[role="row"]');
+    const row = rows[rowIndex];
+    if (!row) return null;
+    const cells = row.querySelectorAll('td[role="cell"], th[role="columnheader"]');
+    return cells[columnIndex] || null;
+  }, []);
+  const getHeaderElement = useCallback9((columnIndex) => {
+    if (!tableRef.current) return null;
+    const thead = tableRef.current.querySelector("thead");
+    if (!thead) return null;
+    const headerRow = thead.querySelector('tr[role="row"]');
+    if (!headerRow) return null;
+    const headers = headerRow.querySelectorAll('th[role="columnheader"]');
+    return headers[columnIndex] || null;
+  }, []);
+  const focusCell = useCallback9((rowIndex, columnIndex) => {
+    if (!enabled) return;
+    const clampedRowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
+    const clampedColumnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
+    setState((prev) => ({
+      ...prev,
+      focusedRowIndex: clampedRowIndex,
+      focusedColumnIndex: clampedColumnIndex,
+      isNavigating: true
+    }));
+    const cellElement = getCellElement(clampedRowIndex, clampedColumnIndex);
+    if (cellElement) {
+      cellElement.focus();
+    }
+    onFocusChange?.(clampedRowIndex, clampedColumnIndex);
+    if (announceNavigation) {
+      announce(`Row ${clampedRowIndex + 1}, Column ${clampedColumnIndex + 1}`);
+    }
+  }, [enabled, rowCount, columnCount, getCellElement, onFocusChange, announceNavigation]);
+  const focusNext = useCallback9(() => {
+    const { focusedRowIndex, focusedColumnIndex } = state;
+    if (focusedColumnIndex < columnCount - 1) {
+      focusCell(focusedRowIndex, focusedColumnIndex + 1);
+    } else if (focusedRowIndex < rowCount - 1) {
+      focusCell(focusedRowIndex + 1, 0);
+    }
+  }, [state, columnCount, rowCount, focusCell]);
+  const focusPrevious = useCallback9(() => {
+    const { focusedRowIndex, focusedColumnIndex } = state;
+    if (focusedColumnIndex > 0) {
+      focusCell(focusedRowIndex, focusedColumnIndex - 1);
+    } else if (focusedRowIndex > 0) {
+      focusCell(focusedRowIndex - 1, columnCount - 1);
+    }
+  }, [state, columnCount, focusCell]);
+  const focusUp = useCallback9(() => {
+    const { focusedRowIndex, focusedColumnIndex } = state;
+    if (focusedRowIndex > 0) {
+      focusCell(focusedRowIndex - 1, focusedColumnIndex);
+    }
+  }, [state, focusCell]);
+  const focusDown = useCallback9(() => {
+    const { focusedRowIndex, focusedColumnIndex } = state;
+    if (focusedRowIndex < rowCount - 1) {
+      focusCell(focusedRowIndex + 1, focusedColumnIndex);
+    }
+  }, [state, rowCount, focusCell]);
+  const focusRowStart = useCallback9(() => {
+    const { focusedRowIndex } = state;
+    focusCell(focusedRowIndex, 0);
+  }, [state, focusCell]);
+  const focusRowEnd = useCallback9(() => {
+    const { focusedRowIndex } = state;
+    focusCell(focusedRowIndex, columnCount - 1);
+  }, [state, columnCount, focusCell]);
+  const focusTableStart = useCallback9(() => {
+    focusCell(0, 0);
+  }, [focusCell]);
+  const focusTableEnd = useCallback9(() => {
+    focusCell(rowCount - 1, columnCount - 1);
+  }, [rowCount, columnCount, focusCell]);
+  const getCellTabIndex = useCallback9((rowIndex, columnIndex) => {
+    if (!enabled) return -1;
+    return state.focusedRowIndex === rowIndex && state.focusedColumnIndex === columnIndex ? 0 : -1;
+  }, [enabled, state.focusedRowIndex, state.focusedColumnIndex]);
+  const getCellKeyboardHandlers = useCallback9((rowIndex, columnIndex) => {
+    const onKeyDown = (event) => {
+      if (!enabled) return;
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          if (event.ctrlKey || event.metaKey) {
+            focusRowEnd();
+          } else {
+            focusNext();
+          }
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          if (event.ctrlKey || event.metaKey) {
+            focusRowStart();
+          } else {
+            focusPrevious();
+          }
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          if (event.ctrlKey || event.metaKey) {
+            focusTableEnd();
+          } else {
+            focusDown();
+          }
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          if (event.ctrlKey || event.metaKey) {
+            focusTableStart();
+          } else {
+            focusUp();
+          }
+          break;
+        case "Home":
+          event.preventDefault();
+          if (event.ctrlKey || event.metaKey) {
+            focusTableStart();
+          } else {
+            focusRowStart();
+          }
+          break;
+        case "End":
+          event.preventDefault();
+          if (event.ctrlKey || event.metaKey) {
+            focusTableEnd();
+          } else {
+            focusRowEnd();
+          }
+          break;
+        case "Tab":
+          break;
+        default:
+          break;
       }
-      finalColumns.push(...baseColumns);
-      if (actionsColumn) {
-        finalColumns.push(actionsColumn);
+    };
+    const onFocus = (event) => {
+      setState((prev) => ({
+        ...prev,
+        focusedRowIndex: rowIndex,
+        focusedColumnIndex: columnIndex,
+        isNavigating: true
+      }));
+      onFocusChange?.(rowIndex, columnIndex);
+    };
+    const onBlur = (event) => {
+      if (navigationTimeoutRef.current) {
+        clearTimeout(navigationTimeoutRef.current);
+      }
+      navigationTimeoutRef.current = setTimeout(() => {
+        setState((prev) => ({
+          ...prev,
+          isNavigating: false
+        }));
+      }, 100);
+    };
+    return { onKeyDown, onFocus, onBlur };
+  }, [enabled, focusNext, focusPrevious, focusUp, focusDown, focusRowStart, focusRowEnd, focusTableStart, focusTableEnd, onFocusChange]);
+  const getHeaderKeyboardHandlers = useCallback9((columnIndex, onSort) => {
+    const onKeyDown = (event) => {
+      if (!enabled) return;
+      switch (event.key) {
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          onSort?.();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          const nextHeader = getHeaderElement(columnIndex + 1);
+          if (nextHeader) {
+            nextHeader.focus();
+          }
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          const prevHeader = getHeaderElement(columnIndex - 1);
+          if (prevHeader) {
+            prevHeader.focus();
+          }
+          break;
+        case "Home":
+          event.preventDefault();
+          const firstHeader = getHeaderElement(0);
+          if (firstHeader) {
+            firstHeader.focus();
+          }
+          break;
+        case "End":
+          event.preventDefault();
+          const lastHeader = getHeaderElement(columnCount - 1);
+          if (lastHeader) {
+            lastHeader.focus();
+          }
+          break;
+        // Disable unsupported keyboard operations
+        case "r":
+          if (!supportsColumnReorder && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
+            announce("Column reordering is not supported");
+          }
+          break;
+        case "=":
+        case "+":
+        case "-":
+          if (!supportsColumnResize && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
+            announce("Column resizing is not supported");
+          }
+          break;
       }
+    };
+    const onFocus = (event) => {
+    };
+    return { onKeyDown, onFocus };
+  }, [enabled, getHeaderElement, columnCount, supportsColumnReorder, supportsColumnResize]);
+  const resetFocus = useCallback9(() => {
+    setState({
+      focusedRowIndex: 0,
+      focusedColumnIndex: 0,
+      isNavigating: false
+    });
+  }, []);
+  const storeFocus = useCallback9(() => {
+    storedFocusRef.current = {
+      rowIndex: state.focusedRowIndex,
+      columnIndex: state.focusedColumnIndex
+    };
+  }, [state.focusedRowIndex, state.focusedColumnIndex]);
+  const restoreFocus = useCallback9(() => {
+    if (storedFocusRef.current) {
+      const { rowIndex, columnIndex } = storedFocusRef.current;
+      focusCell(rowIndex, columnIndex);
+      storedFocusRef.current = null;
     }
-    return finalColumns;
-  }, [columns, features, effectiveActions, columnOrder]);
+  }, [focusCell]);
+  useEffect11(() => {
+    return () => {
+      if (navigationTimeoutRef.current) {
+        clearTimeout(navigationTimeoutRef.current);
+      }
+    };
+  }, []);
   return {
-    enhancedColumns
+    state,
+    focusCell,
+    focusNext,
+    focusPrevious,
+    focusUp,
+    focusDown,
+    focusRowStart,
+    focusRowEnd,
+    focusTableStart,
+    focusTableEnd,
+    getCellTabIndex,
+    getCellKeyboardHandlers,
+    getHeaderKeyboardHandlers,
+    resetFocus,
+    storeFocus,
+    restoreFocus
   };
 }
 
 // src/components/DataTable/components/DataTableCore.tsx
 import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var isCellValue = (value) => {
+  if (value === null || value === void 0) {
+    return true;
+  }
+  if (value instanceof Date) {
+    return true;
+  }
+  const valueType = typeof value;
+  return valueType === "string" || valueType === "number" || valueType === "boolean";
+};
+var toCellValueRecord = (row) => {
+  if (typeof row !== "object" || row === null) {
+    return {};
+  }
+  return Object.entries(row).reduce((accumulator, [key, entryValue]) => {
+    if (isCellValue(entryValue)) {
+      accumulator[key] = entryValue;
+    } else if (entryValue && typeof entryValue === "object" && "toString" in entryValue) {
+      accumulator[key] = String(entryValue);
+    } else {
+      accumulator[key] = entryValue;
+    }
+    return accumulator;
+  }, {});
+};
 function DataTableInternal({
   data,
   columns,
@@ -9791,7 +10963,7 @@ function DataTableInternal({
   description,
   variant = "default",
   className,
-  features,
+  features: incomingFeatures = {},
   hierarchical,
   performance = {},
   serverSide,
@@ -9819,23 +10991,38 @@ function DataTableInternal({
   actions = [],
   columnOrder: externalColumnOrder,
   defaultGrouping,
-  defaultSorting
+  defaultSorting,
+  storageKey,
+  onLayoutChange
 }) {
   const authResult = useUnifiedAuth();
   const user = authResult.user;
-  const { permissions, secureFeatures, effectivePageId } = useDataTablePermissions(rbac, features);
-  const baseColumnOrder = useMemo9(() => {
-    if (externalColumnOrder && externalColumnOrder.length > 0) {
-      return externalColumnOrder;
-    }
-    return columns.map((col) => col.id || col.accessorKey || "").filter(Boolean);
-  }, [externalColumnOrder, columns]);
-  const effectiveColumnOrder = useMemo9(() => {
-    if (features.selection && !baseColumnOrder.includes("select")) {
-      return ["select", ...baseColumnOrder];
+  const requestedFeatures = useMemo14(
+    () => normalizeDataTableFeatures(incomingFeatures),
+    [incomingFeatures]
+  );
+  const { permissions, secureFeatures, effectivePageId } = useDataTablePermissions(rbac, requestedFeatures);
+  const effectiveColumnOrder = useEffectiveColumnOrder({
+    columns,
+    externalColumnOrder,
+    selectionEnabled: secureFeatures.selection
+  });
+  const {
+    columnVisibility: savedColumnVisibility,
+    isLoaded: isColumnVisibilityLoaded,
+    updateColumnVisibility: updateSavedColumnVisibility
+  } = useColumnVisibilityPersistence({
+    tableId: title ? `datatable-${title.toLowerCase().replace(/\s+/g, "-")}` : void 0,
+    defaultVisibility: {},
+    enablePersistence: secureFeatures.columnVisibility,
+    storageKey
+  });
+  const initialColumnVisibility = useMemo14(() => {
+    if (secureFeatures.columnVisibility && savedColumnVisibility && Object.keys(savedColumnVisibility).length > 0) {
+      return savedColumnVisibility;
     }
-    return baseColumnOrder;
-  }, [baseColumnOrder, features.selection]);
+    return {};
+  }, [secureFeatures.columnVisibility, savedColumnVisibility]);
   const { state, actions: stateActions } = useDataTableState({
     initialPageSize,
     columnIds: effectiveColumnOrder,
@@ -9844,9 +11031,21 @@ function DataTableInternal({
     defaultSorting: defaultSorting || [],
     defaultGrouping: defaultGrouping || []
   });
+  useEffect12(() => {
+    if (secureFeatures.columnVisibility && isColumnVisibilityLoaded && Object.keys(initialColumnVisibility).length > 0) {
+      stateActions.setColumnVisibility(initialColumnVisibility);
+    }
+  }, [secureFeatures.columnVisibility, isColumnVisibilityLoaded, initialColumnVisibility, stateActions]);
+  useEffect12(() => {
+    initializeLiveRegion();
+  }, []);
   const rowSelection = selection !== void 0 ? selection : state.rowSelection;
-  const hasInitializedExpansion = useRef6(false);
-  useEffect8(() => {
+  const resolvedGetRowId = useCallback10(
+    (row, index) => getRowIdSafe(row, index, getRowId),
+    [getRowId]
+  );
+  const hasInitializedExpansion = useRef7(false);
+  useEffect12(() => {
     if (!hasInitializedExpansion.current && defaultGrouping && defaultGrouping.length > 0) {
       stateActions.setExpanded(true);
       hasInitializedExpansion.current = true;
@@ -9878,8 +11077,6 @@ function DataTableInternal({
     paginationMode: detectedMode,
     isVirtualized,
     pageSizeOptions: optimizedPageSizeOptions,
-    processedData,
-    totalCount,
     isLoading: performanceLoading,
     searchQuery,
     setSearchQuery,
@@ -9887,22 +11084,48 @@ function DataTableInternal({
     serverData,
     cleanup
   } = performanceHook;
-  const hierarchicalValidation = useMemo9(() => {
-    if (features.hierarchical && hierarchical?.enabled) {
-      return validateHierarchicalData(data);
-    }
-    return { isValid: true, errors: [] };
-  }, [features.hierarchical, hierarchical?.enabled, data]);
-  const processedHierarchicalData = useMemo9(() => {
-    if (features.hierarchical && hierarchical?.enabled && hierarchicalValidation.isValid) {
-      return sortHierarchicalDataByStructure(data);
+  const finalPaginationMode = paginationMode || detectedMode;
+  const keyboardNavigation = useKeyboardNavigation(
+    data.length,
+    columns.length,
+    {
+      enabled: true,
+      announceNavigation: true,
+      supportsColumnReorder: secureFeatures.columnReordering,
+      supportsColumnResize: false
+      // Column resizing is not currently supported
     }
-    return data;
-  }, [features.hierarchical, hierarchical?.enabled, hierarchicalValidation.isValid, data]);
-  const hierarchicalState = useHierarchicalState(
-    processedHierarchicalData,
-    hierarchical
   );
+  useEffect12(() => {
+    if (state.showImportModal) {
+      keyboardNavigation.storeFocus();
+    }
+  }, [state.showImportModal, keyboardNavigation]);
+  useEffect12(() => {
+    if (!state.showImportModal) {
+      setTimeout(() => {
+        keyboardNavigation.restoreFocus();
+      }, 100);
+    }
+  }, [state.showImportModal, keyboardNavigation]);
+  const {
+    finalTableData,
+    dataCount: finalDataCount,
+    hierarchicalState,
+    hierarchicalValidation
+  } = useDataTableDataPipeline({
+    data,
+    features: secureFeatures,
+    hierarchical,
+    sorting: state.sorting,
+    finalPaginationMode,
+    serverData
+  });
+  useEffect12(() => {
+    if (!hierarchicalValidation.isValid && import.meta.env?.MODE === "development") {
+      console.error("[DataTable] Hierarchical data validation failed:", hierarchicalValidation.errors);
+    }
+  }, [hierarchicalValidation]);
   const {
     columnOrder: savedColumnOrder,
     isLoaded: isColumnOrderLoaded,
@@ -9910,12 +11133,17 @@ function DataTableInternal({
   } = useColumnOrderPersistence({
     tableId: title ? `datatable-${title.toLowerCase().replace(/\s+/g, "-")}` : void 0,
     defaultOrder: columns.map((col) => col.id || col.accessorKey || ""),
-    enablePersistence: features.columnReordering
+    enablePersistence: secureFeatures.columnReordering,
+    storageKey
   });
-  const finalPaginationMode = paginationMode || detectedMode;
+  useEffect12(() => {
+    if (secureFeatures.columnReordering && isColumnOrderLoaded && savedColumnOrder && savedColumnOrder.length > 0) {
+      stateActions.setColumnOrder(savedColumnOrder);
+    }
+  }, [secureFeatures.columnReordering, isColumnOrderLoaded, savedColumnOrder, stateActions]);
   const finalPageSizeOptions = optimizedPageSizeOptions;
-  const validatedInitialPageSize = useMemo9(() => {
-    if (!features.pagination || !finalPageSizeOptions.length) {
+  const validatedInitialPageSize = useMemo14(() => {
+    if (!secureFeatures.pagination || !finalPageSizeOptions.length) {
       return initialPageSize;
     }
     if (finalPageSizeOptions.includes(initialPageSize)) {
@@ -9925,73 +11153,33 @@ function DataTableInternal({
     const closestOption = sortedOptions.reduce(
       (prev, curr) => Math.abs(curr - initialPageSize) < Math.abs(prev - initialPageSize) ? curr : prev
     );
-    console.warn(
-      `DataTable: initialPageSize ${initialPageSize} is not available in page size options [${finalPageSizeOptions.join(", ")}]. Using closest option: ${closestOption}`
-    );
+    if (import.meta.env?.MODE === "development") {
+      console.warn(
+        `DataTable: initialPageSize ${initialPageSize} is not available in page size options [${finalPageSizeOptions.join(", ")}]. Using closest option: ${closestOption}`
+      );
+    }
     return closestOption;
-  }, [initialPageSize, finalPageSizeOptions, features.pagination]);
+  }, [initialPageSize, finalPageSizeOptions, secureFeatures.pagination]);
   const isLoading = externalIsLoading || performanceLoading;
-  const baseData = useMemo9(() => {
-    return finalPaginationMode === "server" ? serverData?.data || [] : processedHierarchicalData;
-  }, [finalPaginationMode, serverData?.data, processedHierarchicalData]);
-  const tableData = useMemo9(() => {
-    return features.hierarchical && hierarchical?.enabled ? hierarchicalState.visibleRows : baseData;
-  }, [features.hierarchical, hierarchical?.enabled, hierarchicalState.visibleRows, baseData]);
-  const dataCount = useMemo9(() => {
-    return finalPaginationMode === "server" ? serverData?.totalCount || 0 : data?.length || 0;
-  }, [finalPaginationMode, serverData?.totalCount, data?.length]);
-  const sortedTableData = useMemo9(() => {
-    if (features.hierarchical && hierarchical?.enabled && sorting.length > 0) {
-      const hierarchicalVisibleRows = hierarchicalState.visibleRows;
-      return sortHierarchicalDataWithSorting(hierarchicalVisibleRows, sorting);
-    }
-    return tableData;
-  }, [features.hierarchical, hierarchical?.enabled, hierarchicalState.visibleRows, sorting, tableData]);
-  const finalTableData = useMemo9(() => {
-    return features.hierarchical && hierarchical?.enabled && sorting.length > 0 ? sortedTableData : tableData;
-  }, [features.hierarchical, hierarchical?.enabled, sorting.length, sortedTableData, tableData]);
-  const finalDataCount = finalPaginationMode === "server" ? serverData?.totalCount || 0 : finalTableData?.length || 0;
-  const handleSearch = useCallback6((value) => {
+  const handleSearch = useCallback10((value) => {
     stateActions.setSearchQuery(value);
-    if (features.pagination) {
+    if (secureFeatures.pagination) {
       stateActions.setPagination({ ...state.pagination, pageIndex: 0 });
     }
-  }, [stateActions, features.pagination, state.pagination]);
-  const handleServerSideChange = useCallback6(async () => {
-    if (finalPaginationMode !== "server" || !serverSide) return;
-    const params = {
-      pageIndex: state.pagination.pageIndex,
-      pageSize: state.pagination.pageSize,
-      sorting: state.sorting,
-      columnFilters: state.columnFilters,
-      globalFilter: searchQuery,
-      grouping: state.grouping
-    };
-    await fetchServerData(params);
-  }, [
+  }, [stateActions, secureFeatures.pagination, state.pagination]);
+  useServerSideDataEffect({
     finalPaginationMode,
     serverSide,
-    state.pagination,
-    state.sorting,
-    state.columnFilters,
+    pagination: state.pagination,
+    sorting: state.sorting,
+    columnFilters: state.columnFilters,
+    grouping: state.grouping,
     searchQuery,
-    state.grouping,
-    fetchServerData
-  ]);
-  useEffect8(() => {
-    if (finalPaginationMode !== "server") return;
-    if (!serverSide) return;
-    if (tableData && tableData.length > 0 && finalPaginationMode !== "server") return;
-    handleServerSideChange();
-  }, [handleServerSideChange, tableData, finalPaginationMode, serverSide]);
-  useEffect8(() => {
-    return () => {
-      if (typeof cleanup === "function") {
-        cleanup();
-      }
-    };
-  }, [cleanup]);
-  const secureHandlers = useMemo9(() => ({
+    tableDataLength: finalTableData.length,
+    fetchServerData,
+    cleanup
+  });
+  const secureHandlers = useMemo14(() => ({
     onEditRow: permissions.canUpdate.can ? onEditRow : void 0,
     onDeleteRow: permissions.canDelete.can ? onDeleteRow : void 0,
     onCreateRow: permissions.canCreate.can ? onCreateRow : void 0,
@@ -9999,7 +11187,7 @@ function DataTableInternal({
     onExport: permissions.canExport.can ? onExport : void 0,
     onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : void 0
   }), [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, onEditRow, onDeleteRow, onCreateRow, onImport, onExport, onDeleteSelected]);
-  const effectiveActions = useMemo9(() => {
+  const effectiveActions = useMemo14(() => {
     const result = [...actions];
     if (import.meta.env.MODE === "development") {
       console.log("[DataTable] Action Configuration Debug:", {
@@ -10025,18 +11213,9 @@ function DataTableInternal({
           if (!permissions.canUpdate.can) {
             throw new Error("Insufficient permissions to edit this resource");
           }
-          let rowId;
-          if (getRowId) {
-            const rowIndex = data.findIndex((r) => r === row);
-            rowId = getRowId(row, rowIndex);
-          } else {
-            rowId = row.id;
-          }
-          if (!rowId) {
-            console.error("[DataTable] Cannot edit row: no id found. Make sure to provide getRowId or ensure row data has an id property.");
-            return;
-          }
-          stateActions.setEditingRow(rowId, { ...row });
+          const rowIndex = data.findIndex((r) => r === row);
+          const rowId = resolvedGetRowId(row, rowIndex >= 0 ? rowIndex : 0);
+          stateActions.setEditingRow(rowId, toCellValueRecord(row));
         },
         icon: Edit,
         testId: "edit",
@@ -10066,81 +11245,24 @@ function DataTableInternal({
       });
     }
     return result;
-  }, [actions, secureFeatures, permissions, secureHandlers, getRowId, stateActions]);
+  }, [actions, secureFeatures, permissions, secureHandlers, resolvedGetRowId, stateActions, data]);
   const { enhancedColumns } = useTableColumns({
     columns,
     features: secureFeatures,
     effectiveActions,
     columnOrder: state.columnOrder
   });
-  const tableConfig = useMemo9(() => ({
-    data: finalTableData,
-    columns: enhancedColumns,
-    state: {
-      sorting: state.sorting,
-      columnFilters: state.columnFilters,
-      columnVisibility: state.columnVisibility,
-      rowSelection,
-      grouping: state.grouping,
-      expanded: state.expanded,
-      pagination: state.pagination,
-      globalFilter: searchQuery,
-      columnOrder: effectiveColumnOrder
-    },
-    initialState: {
-      expanded: features.grouping ? {} : void 0
-    },
-    enableRowSelection: features.selection,
-    enableGrouping: features.grouping,
-    getRowId: getRowId || ((row) => row?.id || row?.toString() || "unknown"),
-    onSortingChange: (updaterOrValue) => {
-      const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(state.sorting) : updaterOrValue;
-      stateActions.setSorting(newSorting);
-    },
-    onColumnFiltersChange: (updaterOrValue) => {
-      const newFilters = typeof updaterOrValue === "function" ? updaterOrValue(state.columnFilters) : updaterOrValue;
-      stateActions.setColumnFilters(newFilters);
-    },
-    onColumnVisibilityChange: (updaterOrValue) => {
-      const newVisibility = typeof updaterOrValue === "function" ? updaterOrValue(state.columnVisibility) : updaterOrValue;
-      stateActions.setColumnVisibility(newVisibility);
-    },
-    onRowSelectionChange: (updaterOrValue) => {
-      const newSelection = typeof updaterOrValue === "function" ? updaterOrValue(selection !== void 0 ? selection : state.rowSelection) : updaterOrValue;
-      if (selection === void 0) {
-        stateActions.setRowSelection(newSelection);
-      }
-      onRowSelectionChange?.(newSelection);
-    },
-    onGroupingChange: (updaterOrValue) => {
-      const newGrouping = typeof updaterOrValue === "function" ? updaterOrValue(state.grouping) : updaterOrValue;
-      stateActions.setGrouping(newGrouping);
-    },
-    onExpandedChange: (updaterOrValue) => {
-      const newExpanded = typeof updaterOrValue === "function" ? updaterOrValue(state.expanded) : updaterOrValue;
-      stateActions.setExpanded(newExpanded);
-    },
-    onPaginationChange: (updaterOrValue) => {
-      const newPagination = typeof updaterOrValue === "function" ? updaterOrValue(state.pagination) : updaterOrValue;
-      stateActions.setPagination(newPagination);
-    },
-    onColumnOrderChange: (updaterOrValue) => {
-      const newOrder = typeof updaterOrValue === "function" ? updaterOrValue(state.columnOrder) : updaterOrValue;
-      stateActions.setColumnOrder(newOrder);
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: finalPaginationMode === "client" ? getFilteredRowModel() : void 0,
-    getSortedRowModel: finalPaginationMode === "client" ? getSortedRowModel() : void 0,
-    getPaginationRowModel: features.pagination ? getPaginationRowModel() : void 0,
-    getGroupedRowModel: features.grouping ? getGroupedRowModel() : void 0,
-    getExpandedRowModel: features.grouping ? getExpandedRowModel() : void 0,
-    manualSorting: finalPaginationMode === "server",
-    manualFiltering: finalPaginationMode === "server",
-    manualPagination: finalPaginationMode === "server",
-    pageCount: finalPaginationMode === "server" ? Math.ceil(dataCount / state.pagination.pageSize) : void 0
+  const tableStateSnapshot = useMemo14(() => ({
+    sorting: state.sorting,
+    columnFilters: state.columnFilters,
+    columnVisibility: state.columnVisibility,
+    rowSelection,
+    grouping: state.grouping,
+    expanded: state.expanded,
+    pagination: state.pagination,
+    globalFilter: searchQuery,
+    columnOrder: state.columnOrder
   }), [
-    finalTableData,
-    enhancedColumns,
     state.sorting,
     state.columnFilters,
     state.columnVisibility,
@@ -10149,16 +11271,32 @@ function DataTableInternal({
     state.expanded,
     state.pagination,
     searchQuery,
-    effectiveColumnOrder,
-    features.selection,
-    features.grouping,
-    getRowId,
+    state.columnOrder
+  ]);
+  const tableHandlers = useTableHandlers({
+    state,
+    stateSnapshot: tableStateSnapshot,
+    actions: stateActions,
+    selection,
     onRowSelectionChange,
+    effectiveColumnOrder,
+    canPersistVisibility: secureFeatures.columnVisibility && Boolean(storageKey),
+    canPersistOrder: secureFeatures.columnReordering && Boolean(storageKey),
+    updateSavedColumnVisibility,
+    updateColumnOrder,
+    onLayoutChange
+  });
+  const tableConfig = useDataTableConfiguration({
+    data: finalTableData,
+    columns: enhancedColumns,
+    stateSnapshot: tableStateSnapshot,
+    handlers: tableHandlers,
+    features: secureFeatures,
+    getRowId: resolvedGetRowId,
     finalPaginationMode,
-    features.pagination,
-    dataCount,
-    state.pagination.pageSize
-  ]);
+    finalDataCount,
+    pageSize: state.pagination.pageSize
+  });
   const table = useReactTable(tableConfig);
   if (!user) {
     throw new Error("DataTable requires authenticated user for RBAC");
@@ -10177,189 +11315,228 @@ function DataTableInternal({
   const hasSelectColumn = visibleColumns.some((col) => col.id === "select");
   const hasActionsColumn = visibleColumns.some((col) => col.id === "actions");
   return /* @__PURE__ */ jsxs17(Fragment7, { children: [
-    /* @__PURE__ */ jsxs17("table", { className: getTableClasses({
-      isFixed: true,
-      variant,
-      className: cn("border-collapse relative w-full", className)
-    }), style: {
-      tableLayout: "fixed",
-      width: "100%"
-    }, children: [
-      /* @__PURE__ */ jsxs17("caption", { className: "text-left pb-2", children: [
-        (title || description) && /* @__PURE__ */ jsxs17(Fragment7, { children: [
-          title && /* @__PURE__ */ jsx24("h2", { children: title }),
-          description && /* @__PURE__ */ jsx24("p", { children: description })
-        ] }),
-        /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24(
-          DataTableToolbar,
-          {
-            features: secureFeatures,
-            globalFilter: searchQuery,
-            onGlobalFilterChange: handleSearch,
-            columns,
-            grouping: state.grouping,
-            onGroupByChange: (columnId) => {
-              stateActions.setGrouping(columnId ? [columnId] : []);
-            },
-            tableColumns: table?.getAllColumns() || [],
-            onColumnVisibilityChange: (columnId, visible) => {
-              stateActions.setColumnVisibility({ ...state.columnVisibility, [columnId]: visible });
-            },
-            onCreateRow: secureFeatures.creation && secureHandlers.onCreateRow ? () => stateActions.setCreating(true) : void 0,
-            onImportClick: () => stateActions.setImportModal(true),
-            onExport: secureHandlers.onExport || (async () => {
-              try {
-                const currentData = table.getFilteredRowModel().rows.map((row) => row.original);
-                const visibleColumns2 = columns.filter((col) => {
-                  const column = table.getColumn(col.accessorKey);
-                  return column && column.getIsVisible();
-                }).map((col) => ({
-                  ...col,
-                  header: typeof col.header === "string" ? col.header : col.accessorKey || "Column"
-                }));
-                const timestamp = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-                const filename = title ? `${title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_${timestamp}.csv` : `data_export_${timestamp}.csv`;
-                await exportToCSV(currentData, visibleColumns2, filename);
-                toast({
-                  title: "Export Successful",
-                  description: `Data exported to ${filename}`,
-                  variant: "default"
-                });
-                if (import.meta.env.MODE === "development") {
-                  console.log("DataTable: Export completed successfully");
-                }
-              } catch (error) {
-                console.error("DataTable: Failed to export data:", error);
-                const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
-                toast({
-                  title: "Export Failed",
-                  description: `Failed to export data: ${errorMessage}`,
-                  variant: "destructive"
-                });
-                if (import.meta.env.MODE === "development") {
-                  console.error("DataTable: Export error details:", error);
+    /* @__PURE__ */ jsxs17(
+      "table",
+      {
+        className: getTableClasses({
+          isFixed: true,
+          variant,
+          className: cn("border-collapse relative w-full", className)
+        }),
+        "aria-label": title,
+        "aria-describedby": description ? "table-description" : void 0,
+        "aria-busy": isLoading ? "true" : "false",
+        children: [
+          /* @__PURE__ */ jsxs17("caption", { className: "text-left pb-2", children: [
+            (title || description) && /* @__PURE__ */ jsxs17(Fragment7, { children: [
+              title && /* @__PURE__ */ jsx24("h2", { children: title }),
+              description && /* @__PURE__ */ jsx24("p", { id: "table-description", children: description })
+            ] }),
+            /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24(
+              DataTableToolbar,
+              {
+                features: secureFeatures,
+                globalFilter: searchQuery,
+                onGlobalFilterChange: handleSearch,
+                columns,
+                grouping: state.grouping,
+                onGroupByChange: (columnId) => {
+                  stateActions.setGrouping(columnId ? [columnId] : []);
+                },
+                tableColumns: table?.getAllColumns() || [],
+                onColumnVisibilityChange: (columnId, visible) => {
+                  stateActions.setColumnVisibility({ ...state.columnVisibility, [columnId]: visible });
+                },
+                onCreateRow: secureFeatures.creation && secureHandlers.onCreateRow ? () => stateActions.setCreating(true) : void 0,
+                onImportClick: () => stateActions.setImportModal(true),
+                onExport: secureHandlers.onExport || (async () => {
+                  try {
+                    const currentData = table.getFilteredRowModel().rows.map((row) => row.original);
+                    const visibleColumns2 = columns.filter((col) => {
+                      const column = table.getColumn(col.accessorKey);
+                      return column && column.getIsVisible();
+                    }).map((col) => ({
+                      ...col,
+                      header: typeof col.header === "string" ? col.header : col.accessorKey || "Column"
+                    }));
+                    const timestamp = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+                    const filename = title ? `${title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_${timestamp}.csv` : `data_export_${timestamp}.csv`;
+                    await exportToCSV(currentData, visibleColumns2, filename);
+                    toast({
+                      title: "Export Successful",
+                      description: `Data exported to ${filename}`,
+                      variant: "default"
+                    });
+                    if (import.meta.env.MODE === "development") {
+                      console.log("DataTable: Export completed successfully");
+                    }
+                  } catch (error) {
+                    console.error("DataTable: Failed to export data:", error);
+                    const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
+                    toast({
+                      title: "Export Failed",
+                      description: `Failed to export data: ${errorMessage}`,
+                      variant: "destructive"
+                    });
+                    if (import.meta.env.MODE === "development") {
+                      console.error("DataTable: Export error details:", error);
+                    }
+                  }
+                }),
+                rowSelection,
+                onDeleteSelected: secureHandlers.onDeleteSelected,
+                onToggleFilterRow: () => stateActions.setFilterRow(!state.showFilterRow),
+                showFilterRow: state.showFilterRow,
+                rbac,
+                permissions
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs17("colgroup", { children: [
+            hasSelectColumn && /* @__PURE__ */ jsx24("col", { span: 1, "data-col-type": "select", className: "w-12" }),
+            /* @__PURE__ */ jsx24("col", { span: dataColumns, "data-col-type": "data" }),
+            hasActionsColumn && /* @__PURE__ */ jsx24("col", { span: 1, "data-col-type": "actions" })
+          ] }),
+          /* @__PURE__ */ jsx24("thead", { children: table?.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24("tr", { children: headerGroup.headers.filter((header) => {
+            return typeof header.column.getIsVisible === "function" ? header.column.getIsVisible() : true;
+          }).map((header) => {
+            const isSortable = header.column.getCanSort();
+            const ariaSort = isSortable ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0;
+            const isRightAligned = header.column.columnDef.meta?.align === "right";
+            const handleSortClick = (event) => {
+              const originalHandler = header.column.getToggleSortingHandler();
+              if (originalHandler) {
+                originalHandler(event);
+              }
+              const columnName = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column";
+              const currentSort = header.column.getIsSorted();
+              const newSort = currentSort === "asc" ? "desc" : currentSort === "desc" ? null : "asc";
+              announceSortChange(columnName, newSort);
+            };
+            const headerKeyboardHandlers = keyboardNavigation.getHeaderKeyboardHandlers(
+              header.index,
+              () => {
+                const originalHandler = header.column.getToggleSortingHandler();
+                if (originalHandler) {
+                  originalHandler({});
                 }
+                const columnName = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column";
+                const currentSort = header.column.getIsSorted();
+                const newSort = currentSort === "asc" ? "desc" : currentSort === "desc" ? null : "asc";
+                announceSortChange(columnName, newSort);
               }
-            }),
-            rowSelection,
-            onDeleteSelected: secureHandlers.onDeleteSelected,
-            onToggleFilterRow: () => stateActions.setFilterRow(!state.showFilterRow),
-            showFilterRow: state.showFilterRow,
-            rbac,
-            permissions
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxs17("colgroup", { children: [
-        hasSelectColumn && /* @__PURE__ */ jsx24("col", { span: 1, "data-col-type": "select" }),
-        /* @__PURE__ */ jsx24("col", { span: dataColumns, "data-col-type": "data" }),
-        hasActionsColumn && /* @__PURE__ */ jsx24("col", { span: 1, "data-col-type": "actions" })
-      ] }),
-      /* @__PURE__ */ jsx24("thead", { children: table?.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24("tr", { children: headerGroup.headers.filter((header) => {
-        return typeof header.column.getIsVisible === "function" ? header.column.getIsVisible() : true;
-      }).map((header) => {
-        const isSortable = header.column.getCanSort();
-        const ariaSort = isSortable ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0;
-        return /* @__PURE__ */ jsx24(
-          "th",
-          {
-            ...isSortable ? { "aria-sort": ariaSort } : {},
-            children: header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ jsx24(
-              Button,
+            );
+            return /* @__PURE__ */ jsx24(
+              "th",
               {
-                variant: "ghost",
-                className: "h-auto p-0 font-medium hover:bg-transparent",
-                onClick: header.column.getToggleSortingHandler(),
-                "aria-label": `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column"}`,
-                tabIndex: 0,
-                children: /* @__PURE__ */ jsxs17("div", { className: `flex items-center gap-1 ${header.column.columnDef.meta?.align === "right" ? "justify-end" : ""}`, children: [
-                  typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header,
-                  header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx24(ChevronUp2, { className: "h-4 w-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx24(ChevronDown3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx24(ChevronsUpDown, { className: "h-4 w-4" })
-                ] })
-              }
-            ) : /* @__PURE__ */ jsx24("div", { className: header.column.columnDef.meta?.align === "right" ? "text-right" : "", children: typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header })
-          },
-          header.id
-        );
-      }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx24(
-        UnifiedTableBody,
-        {
-          table,
-          isCreating,
-          creationData,
-          onCreationDataChange: stateActions.setCreationData,
-          onSaveCreation: () => {
-            if (onCreateRow) {
-              onCreateRow(creationData);
-              stateActions.clearCreationData();
-              stateActions.setCreating(false);
-            }
-          },
-          onCancelCreation: () => {
-            stateActions.clearCreationData();
-            stateActions.setCreating(false);
-          },
-          editingRowId,
-          editingData,
-          onEditingDataChange: (data2) => {
-            if (editingRowId) {
-              stateActions.setEditingRow(editingRowId, data2);
+                className: `px-3 py-2 ${isRightAligned ? "text-right" : "text-left"}`,
+                scope: "col",
+                role: "columnheader",
+                ...isSortable ? { "aria-sort": ariaSort } : {},
+                ...isSortable ? headerKeyboardHandlers : {},
+                children: header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ jsxs17(
+                  Button,
+                  {
+                    variant: "ghost",
+                    className: `h-auto p-0 font-medium hover:bg-transparent ${isRightAligned ? "justify-end" : "justify-start"}`,
+                    onClick: handleSortClick,
+                    ...headerKeyboardHandlers,
+                    "aria-label": `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "column"}`,
+                    tabIndex: 0,
+                    children: [
+                      typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header,
+                      header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx24(ChevronUp2, { className: "h-4 w-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx24(ChevronDown3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx24(ChevronsUpDown, { className: "h-4 w-4" })
+                    ]
+                  }
+                ) : typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header
+              },
+              header.id
+            );
+          }) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx24(
+            UnifiedTableBody,
+            {
+              table,
+              isCreating,
+              creationData,
+              onCreationDataChange: stateActions.setCreationData,
+              onSaveCreation: () => {
+                if (onCreateRow) {
+                  onCreateRow(creationData);
+                  stateActions.clearCreationData();
+                  stateActions.setCreating(false);
+                }
+              },
+              onCancelCreation: () => {
+                stateActions.clearCreationData();
+                stateActions.setCreating(false);
+              },
+              editingRowId,
+              editingData,
+              onEditingDataChange: (data2) => {
+                if (editingRowId) {
+                  stateActions.setEditingRow(editingRowId, data2);
+                }
+              },
+              onSaveEditing: () => {
+                if (onEditRow && editingRowId) {
+                  const originalRow = data.find((row) => {
+                    try {
+                      const rowId = resolvedGetRowId(row, 0);
+                      return rowId === editingRowId;
+                    } catch {
+                      return false;
+                    }
+                  });
+                  if (originalRow) {
+                    onEditRow(originalRow, editingData);
+                  }
+                }
+                stateActions.clearEditing();
+              },
+              onCancelEditing: () => {
+                stateActions.clearEditing();
+              },
+              grouping: state.grouping,
+              aggregates,
+              getRowId: resolvedGetRowId,
+              emptyState: React17.isValidElement(emptyState) ? void 0 : emptyState,
+              isFiltered: searchQuery !== "" || state.columnFilters.length > 0,
+              onClearFilters: () => {
+                stateActions.setSearchQuery("");
+                stateActions.setColumnFilters([]);
+              },
+              enableFiltering: secureFeatures.filtering,
+              showFilterRow,
+              dataLength: finalTableData?.length || 0,
+              virtualHeight,
+              forceVirtualization: false,
+              hierarchical: secureFeatures.hierarchical && hierarchical?.enabled && hierarchicalState ? {
+                ...hierarchical,
+                state: hierarchicalState,
+                expandAll: hierarchicalState.expandAll,
+                collapseAll: hierarchicalState.collapseAll,
+                isAllExpanded: hierarchicalState.getExpandedIds().length > 0 && hierarchicalState.getExpandedIds().length === finalTableData.filter((row) => row.isParent).length,
+                hasAnyChildren: finalTableData.some((row) => row.isParent)
+              } : void 0,
+              actions: effectiveActions,
+              rbac,
+              permissions
             }
-          },
-          onSaveEditing: () => {
-            if (onEditRow && editingRowId) {
-              const originalRow = data.find((row) => {
-                const rowId = getRowId ? getRowId(row, 0) : row.id || String(0);
-                return rowId === editingRowId;
-              });
-              if (originalRow) {
-                onEditRow(originalRow, editingData);
-              }
+          ),
+          secureFeatures.pagination && /* @__PURE__ */ jsx24("tfoot", { children: /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24("td", { colSpan: visibleColumns.length, children: /* @__PURE__ */ jsx24(
+            PaginationComponent,
+            {
+              table,
+              pageSizeOptions: finalPageSizeOptions,
+              paginationMode: finalPaginationMode,
+              totalCount: finalDataCount,
+              isLoading
             }
-            stateActions.clearEditing();
-          },
-          onCancelEditing: () => {
-            stateActions.clearEditing();
-          },
-          grouping: state.grouping,
-          aggregates,
-          getRowId,
-          emptyState: React15.isValidElement(emptyState) ? void 0 : emptyState,
-          isFiltered: searchQuery !== "" || state.columnFilters.length > 0,
-          onClearFilters: () => {
-            stateActions.setSearchQuery("");
-            stateActions.setColumnFilters([]);
-          },
-          enableFiltering: features.filtering,
-          showFilterRow,
-          dataLength: finalTableData?.length || 0,
-          virtualHeight,
-          forceVirtualization: false,
-          hierarchical: features.hierarchical && hierarchical?.enabled ? {
-            ...hierarchical,
-            state: hierarchicalState,
-            expandAll: hierarchicalState.expandAll,
-            collapseAll: hierarchicalState.collapseAll,
-            isAllExpanded: hierarchicalState.getExpandedIds().length > 0 && hierarchicalState.getExpandedIds().length === finalTableData.filter((row) => row.isParent).length,
-            hasAnyChildren: finalTableData.some((row) => row.isParent)
-          } : void 0,
-          actions: effectiveActions,
-          rbac,
-          permissions
-        }
-      ),
-      features.pagination && /* @__PURE__ */ jsx24("tfoot", { children: /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24("td", { colSpan: visibleColumns.length, children: /* @__PURE__ */ jsx24(
-        PaginationComponent,
-        {
-          table,
-          pageSizeOptions: finalPageSizeOptions,
-          paginationMode: finalPaginationMode,
-          totalCount: finalDataCount,
-          isLoading
-        }
-      ) }) }) })
-    ] }),
+          ) }) }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx24(
       DataTableModals,
       {
@@ -10386,15 +11563,25 @@ function DataTableCore(props) {
 // src/components/DataTable/DataTable.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
 function DataTable(props) {
-  if (!props.features) {
-    throw new Error("DataTable: features configuration is required");
-  }
-  if (props.features.deleteSelected && !props.features.deletion) {
-    console.warn("DataTable: deleteSelected requires deletion to be enabled");
-  }
-  return /* @__PURE__ */ jsx25(DataTableCore, { ...props });
+  const logger = React18.useMemo(() => createLogger("DataTable"), []);
+  const { features, ...rest } = props;
+  const normalizedFeatures = React18.useMemo(
+    () => normalizeDataTableFeatures(features),
+    [features]
+  );
+  React18.useEffect(() => {
+    if (!features && import.meta.env?.MODE === "development") {
+      logger.info("DataTable: no features provided; all capabilities default to disabled. Pass a features object to enable functionality.");
+    }
+  }, [features, logger]);
+  React18.useEffect(() => {
+    if (normalizedFeatures.deleteSelected && !normalizedFeatures.deletion) {
+      logger.warn("deleteSelected requires deletion to be enabled");
+    }
+  }, [normalizedFeatures.deleteSelected, normalizedFeatures.deletion, logger]);
+  return /* @__PURE__ */ jsx25(DataTableCore, { ...rest, features: normalizedFeatures });
 }
-var DataTableComponent = React16.memo(DataTable);
+var DataTableComponent = React18.memo(DataTable);
 
 // src/components/DataTable/components/BulkOperationsDropdown.tsx
 import {
@@ -10557,6 +11744,10 @@ export {
   getRowIdSafe,
   hasValidRowId,
   UnifiedTableBody,
+  getPaginationBinding,
+  validatePaginationConfig,
+  getPageSizeOptions,
+  calculateOptimalPageSize,
   PaginationControls,
   EnhancedPaginationControls,
   LoadingState,
@@ -10569,7 +11760,22 @@ export {
   getHierarchicalSortConfig,
   generateCSVContent,
   exportToCSV,
+  defaultDataTableFeatures,
+  normalizeDataTableFeatures,
   ColumnFactory,
+  initializeLiveRegion,
+  cleanupLiveRegion,
+  announce,
+  getSortButtonLabel,
+  announceSortChange,
+  announceFilterChange,
+  announceSearchResults,
+  announcePaginationChange,
+  announceSelectionChange,
+  announceLoadingState,
+  announceBulkOperation,
+  getAriaSortValue,
+  getRowDescription,
   DataTableCore,
   DataTable,
   BulkOperationsDropdown,
@@ -10587,4 +11793,4 @@ lodash/lodash.js:
    * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    *)
 */
-//# sourceMappingURL=chunk-M5IWZRBT.js.map
+//# sourceMappingURL=chunk-ZMNXIJP4.js.map