@krak-stack/registry 0.1.21 → 0.1.23

package/dist/components/ui/data-table.js

@@ -1,7 +1,8 @@
 // ../../src/components/ui/data-table.tsx
 import { useAtom, useAtomSet } from "@effect/atom-react";
-import { Schema as Schema2 } from "effect";
-import { Atom } from "effect/unstable/reactivity";
+import { BrowserKeyValueStore } from "@effect/platform-browser";
+import { Schema } from "effect";
+import { AsyncResult, Atom } from "effect/unstable/reactivity";
 import {
   ArrowDown,
   ArrowUp,
@@ -24,8 +25,10 @@ import {
 import {
   createContext,
   isValidElement,
+  useCallback as useCallback2,
   useContext,
   useLayoutEffect,
+  useMemo,
   useRef as useRef2,
   useState
 } from "react";
@@ -1804,125 +1807,14 @@ function VirtualizedCombobox(props) {
   });
 }
 
-// ../../src/lib/query.ts
-import {
-  Effect,
-  Option,
-  Schema,
-  SchemaIssue,
-  SchemaTransformation
-} from "effect";
-var parseSortParam = (sort) => {
-  const id = sort.startsWith("-") ? sort.slice(1) : sort;
-  if (!id || id.includes(",") || id.includes(":")) {
-    return null;
-  }
-  return { id, direction: sort.startsWith("-") ? "desc" : "asc" };
-};
-var SortDirection = Schema.Union([
-  Schema.Literal("asc"),
-  Schema.Literal("desc")
-]).pipe(Schema.annotate({
-  identifier: "SortDirection",
-  title: "Sort Direction",
-  description: "Sort direction for list query results.",
-  examples: ["asc", "desc"]
-}));
-var SortParam = Schema.Struct({
-  id: Schema.NonEmptyString,
-  direction: SortDirection
-}).pipe(Schema.annotate({
-  identifier: "SortParam",
-  title: "Sort Parameter",
-  description: "Decoded sort parameter with a field id and direction.",
-  examples: [{ id: "publicName", direction: "asc" }]
-}));
-var SortParamFromString = Schema.String.pipe(Schema.decodeTo(SortParam, SchemaTransformation.transformOrFail({
-  decode: (sort) => {
-    const sortParam = parseSortParam(sort);
-    if (!sortParam) {
-      return Effect.fail(new SchemaIssue.InvalidValue(Option.some(sort), {
-        message: 'Expected sort in the format "field" or "-field"'
-      }));
-    }
-    return Effect.succeed(sortParam);
-  },
-  encode: (sort) => Effect.succeed(sort.direction === "desc" ? `-${sort.id}` : sort.id)
-})), Schema.annotate({
-  identifier: "SortParamFromString",
-  title: "Sort Parameter From String",
-  description: 'URL encoded single sort parameter where descending fields are prefixed with "-".',
-  examples: [{ id: "publicName", direction: "asc" }]
-}));
-var SortParamsFromString = Schema.String.pipe(Schema.decodeTo(Schema.Array(SortParam), SchemaTransformation.transformOrFail({
-  decode: (sort) => {
-    const parts = sort.split(",");
-    const sortParams = [];
-    for (const part of parts) {
-      const sortParam = parseSortParam(part);
-      if (!sortParam) {
-        return Effect.fail(new SchemaIssue.InvalidValue(Option.some(sort), {
-          message: 'Expected sort in the format "field,-otherField"'
-        }));
-      }
-      sortParams.push(sortParam);
-    }
-    return Effect.succeed(sortParams);
-  },
-  encode: (sort) => Effect.succeed(sort.map((part) => Schema.encodeSync(SortParamFromString)(part)).join(","))
-})), Schema.annotate({
-  identifier: "SortParamsFromString",
-  title: "Sort Parameters From String",
-  description: 'URL encoded sort parameters where descending fields are prefixed with "-" and multiple fields are comma-separated.',
-  examples: [
-    [
-      { id: "name", direction: "desc" },
-      { id: "age", direction: "asc" }
-    ]
-  ]
-}));
-var SortParamSearch = SortParamsFromString.pipe(Schema.decodeTo(Schema.String, SchemaTransformation.transform({
-  decode: (sort) => Schema.encodeSync(SortParamsFromString)(sort),
-  encode: (sort) => Schema.decodeUnknownSync(SortParamsFromString)(sort)
-})), Schema.annotate({
-  identifier: "SortParamSearch",
-  title: "Sort Search Parameter",
-  description: 'Search parameter sort value normalized to the compact "-field,otherField" URL format.',
-  examples: ["-name,age"]
-}));
-var Query = Schema.Struct({
-  page: Schema.Int.check(Schema.isGreaterThanOrEqualTo(0)).pipe(Schema.withDecodingDefaultKey(Effect.succeed(0))),
-  pageSize: Schema.Int.check(Schema.isBetween({ minimum: 1, maximum: 100 })).pipe(Schema.withDecodingDefaultKey(Effect.succeed(10))),
-  globalFilter: Schema.optional(Schema.String),
-  sort: Schema.optional(SortParamSearch)
-}).annotate({
-  identifier: "Query",
-  title: "Query",
-  description: "Zero-based page request parameters with optional filtering and sorting for list endpoints.",
-  examples: [
-    {
-      page: 0,
-      pageSize: 10,
-      globalFilter: "housing",
-      sort: "-publicName,createdAt"
-    }
-  ]
-});
-var QueryStandard = Schema.toStandardSchemaV1(Query);
-var PaginationMeta = Schema.Struct({
-  page: Schema.Int,
-  pageSize: Schema.Int,
-  total: Schema.Int,
-  pageCount: Schema.Int
-}).pipe(Schema.annotate({
-  identifier: "PaginationMeta",
-  title: "Pagination Metadata",
-  description: "Pagination metadata returned with a paginated list response.",
-  examples: [{ page: 0, pageSize: 10, total: 125, pageCount: 13 }]
-}));
-
 // ../../src/components/ui/data-table.tsx
 import { jsx as jsx17, jsxs as jsxs9, Fragment } from "react/jsx-runtime";
+var DataTablePersistedUiStateSchema = Schema.Struct({
+  columnVisibility: Schema.Record(Schema.String, Schema.Boolean),
+  columnSizing: Schema.Record(Schema.String, Schema.Number),
+  view: Schema.Literals(["table", "gallery"])
+}).annotate({ identifier: "DataTablePersistedUiState" });
+var dataTableStorageRuntime = Atom.runtime(BrowserKeyValueStore.layerLocalStorage);
 var messages3 = {
   en: {
     ...paginationMessages("en"),
@@ -1990,10 +1882,11 @@ var dataTableMessages = (overrides) => ({
 var DEFAULT_MIN_WIDTH = 96;
 var DEFAULT_WIDTH = 208;
 var DEFAULT_MAX_WIDTH = 640;
-var DEFAULT_STATE = {
-  globalFilter: "",
-  sorting: [],
-  pagination: { pageIndex: 0, pageSize: 10 },
+var DEFAULT_QUERY = {
+  page: 0,
+  pageSize: 10
+};
+var DEFAULT_UI_STATE = {
   columnVisibility: {},
   columnSizing: {},
   rowSelection: {},
@@ -2001,6 +1894,16 @@ var DEFAULT_STATE = {
   collapsedGroups: {},
   view: "table"
 };
+var persistedUiFromState = (state) => ({
+  columnVisibility: state.columnVisibility,
+  columnSizing: state.columnSizing,
+  view: state.view
+});
+var transientUiFromState = (state) => ({
+  rowSelection: state.rowSelection,
+  grouping: state.grouping,
+  collapsedGroups: state.collapsedGroups
+});
 var clampWidth = (column, width) => Math.min(column.maxWidth ?? DEFAULT_MAX_WIDTH, Math.max(column.minWidth ?? DEFAULT_MIN_WIDTH, width));
 var normalizeDataTableColumns = (columnDefs, columnSizing = {}) => {
   const ids = new Set;
@@ -2056,9 +1959,9 @@ var sortDataTableRows = (rows, columns, sorting) => {
         continue;
       const leftValue = left.row.values.get(sort.id);
       const rightValue = right.row.values.get(sort.id);
-      const comparison = column.colDef.comparator ? column.colDef.comparator(leftValue, rightValue, left.row.data, right.row.data) : Object.is(leftValue, rightValue) ? 0 : leftValue === null || leftValue === undefined ? 1 : rightValue === null || rightValue === undefined ? -1 : Schema2.is(Schema2.Number)(leftValue) && Schema2.is(Schema2.Number)(rightValue) ? leftValue - rightValue : String(leftValue).localeCompare(String(rightValue), undefined, { numeric: true, sensitivity: "base" });
+      const comparison = column.colDef.comparator ? column.colDef.comparator(leftValue, rightValue, left.row.data, right.row.data) : Object.is(leftValue, rightValue) ? 0 : leftValue === null || leftValue === undefined ? 1 : rightValue === null || rightValue === undefined ? -1 : Schema.is(Schema.Number)(leftValue) && Schema.is(Schema.Number)(rightValue) ? leftValue - rightValue : String(leftValue).localeCompare(String(rightValue), undefined, { numeric: true, sensitivity: "base" });
       if (comparison !== 0)
-        return sort.desc ? -comparison : comparison;
+        return sort.direction === "desc" ? -comparison : comparison;
     }
     return left.stableIndex - right.stableIndex;
   }).map(({ row }) => row);
@@ -2066,22 +1969,11 @@ var sortDataTableRows = (rows, columns, sorting) => {
 var paginateDataTableRows = (rows, pagination) => {
   const pageSize = Math.max(1, pagination.pageSize);
   const lastPageIndex = Math.max(0, Math.ceil(rows.length / pageSize) - 1);
-  const pageIndex = Math.min(lastPageIndex, Math.max(0, pagination.pageIndex));
+  const pageIndex = Math.min(lastPageIndex, Math.max(0, pagination.page));
   const start = pageIndex * pageSize;
   return rows.slice(start, start + pageSize);
 };
-var mergeDataTableState = (state, controlledState = {}) => ({
-  globalFilter: controlledState.globalFilter ?? state.globalFilter,
-  sorting: controlledState.sorting ?? state.sorting,
-  pagination: controlledState.pagination ?? state.pagination,
-  columnVisibility: controlledState.columnVisibility ?? state.columnVisibility,
-  columnSizing: controlledState.columnSizing ?? state.columnSizing,
-  rowSelection: controlledState.rowSelection ?? state.rowSelection,
-  grouping: controlledState.grouping ?? state.grouping,
-  collapsedGroups: controlledState.collapsedGroups ?? state.collapsedGroups,
-  view: controlledState.view ?? state.view
-});
-var sameDataTableState = (left, right) => left.globalFilter === right.globalFilter && left.sorting === right.sorting && left.pagination === right.pagination && left.columnVisibility === right.columnVisibility && left.columnSizing === right.columnSizing && left.rowSelection === right.rowSelection && left.grouping === right.grouping && left.collapsedGroups === right.collapsedGroups && left.view === right.view;
+var sameDataTableState = (left, right) => left.page === right.page && left.pageSize === right.pageSize && left.globalFilter === right.globalFilter && left.sort === right.sort && left.columnVisibility === right.columnVisibility && left.columnSizing === right.columnSizing && left.rowSelection === right.rowSelection && left.grouping === right.grouping && left.collapsedGroups === right.collapsedGroups && left.view === right.view;
 var reorderDataTableRows = (rows, sourceRowId, targetRowId) => {
   const sourceIndex = rows.findIndex((row) => row.id === sourceRowId);
   const targetIndex = rows.findIndex((row) => row.id === targetRowId);
@@ -2127,7 +2019,7 @@ var clearDragPresentation = (root) => {
     element.removeAttribute("data-drop-position");
   });
 };
-var resolveConfig = (props) => {
+var resolveConfig = (props, onUiStateChange) => {
   const features = props.features ?? {};
   const selection = features.selection;
   const getRowId = selection && selection.getRowId || props.getRowId || undefined;
@@ -2136,46 +2028,36 @@ var resolveConfig = (props) => {
   }
   return {
     getRowId,
-    onQueryChange: props.onQueryChange,
     onStateChange: props.onStateChange,
+    onUiStateChange,
     status: props.status ?? {},
     features,
     onRowClicked: props.onRowClicked,
     labels: dataTableMessages(props.messages)
   };
 };
-var dataTableStateFromQuery = (query) => query ? {
-  globalFilter: query.globalFilter ?? "",
-  sorting: query.sort ? Schema2.decodeSync(SortParamsFromString)(query.sort).map(({ id, direction }) => ({
-    id,
-    desc: direction === "desc"
-  })) : [],
-  pagination: { pageIndex: query.page, pageSize: query.pageSize }
-} : {};
-var queryFromDataTableState = (state) => ({
-  page: state.pagination.pageIndex,
-  pageSize: state.pagination.pageSize,
-  globalFilter: state.globalFilter || undefined,
-  sort: state.sorting.length ? Schema2.encodeSync(SortParamsFromString)(state.sorting.map(({ id, desc }) => ({
-    id,
-    direction: desc ? "desc" : "asc"
-  }))) : undefined
+var queryFromState = (state) => ({
+  page: state.page,
+  pageSize: state.pageSize,
+  globalFilter: state.globalFilter,
+  sort: state.sort
 });
-var sameQuery = (left, right) => left.page === right.page && left.pageSize === right.pageSize && left.globalFilter === right.globalFilter && left.sort === right.sort;
-var controlledStateFromProps = (query, state) => ({
-  ...dataTableStateFromQuery(query),
-  ...state
+var uiFromState = (state) => ({
+  columnVisibility: state.columnVisibility,
+  columnSizing: state.columnSizing,
+  rowSelection: state.rowSelection,
+  grouping: state.grouping,
+  collapsedGroups: state.collapsedGroups,
+  view: state.view
+});
+var sameUiState = (left, right) => left.columnVisibility === right.columnVisibility && left.columnSizing === right.columnSizing && left.rowSelection === right.rowSelection && left.grouping === right.grouping && left.collapsedGroups === right.collapsedGroups && left.view === right.view;
+var sameQueryState = (left, right) => left.page === right.page && left.pageSize === right.pageSize && left.globalFilter === right.globalFilter && left.sort === right.sort;
+var initialPublicState = (props, uiState) => ({
+  ...DEFAULT_QUERY,
+  ...props.initialState,
+  ...props.state,
+  ...uiState
 });
-var initialPublicState = (props) => {
-  const grouping = props.features?.grouping;
-  const groupingInitial = grouping && grouping.initial ? grouping.initial : [];
-  return {
-    ...DEFAULT_STATE,
-    grouping: groupingInitial,
-    ...props.initialState,
-    ...controlledStateFromProps(props.query, props.state)
-  };
-};
 var buildDataTableModel = (store) => {
   const columns = normalizeDataTableColumns(store.columnDefs, store.state.columnSizing);
   const selection = store.config.features.selection;
@@ -2183,9 +2065,9 @@ var buildDataTableModel = (store) => {
   const rows = buildDataTableRows(store.rowData, columns, rowId);
   const pagination = store.config.features.pagination ?? { mode: "client" };
   const server = pagination !== false && pagination.mode === "server";
-  const filteredRows = server ? [...rows] : filterDataTableRows(rows, columns, store.state.globalFilter);
-  const sortedRows = server ? filteredRows : sortDataTableRows(filteredRows, columns, store.state.sorting);
-  const pageRows = pagination === false || server ? sortedRows : paginateDataTableRows(sortedRows, store.state.pagination);
+  const filteredRows = server ? [...rows] : filterDataTableRows(rows, columns, store.state.globalFilter ?? "");
+  const sortedRows = server ? filteredRows : sortDataTableRows(filteredRows, columns, store.state.sort ?? []);
+  const pageRows = pagination === false || server ? sortedRows : paginateDataTableRows(sortedRows, store.state);
   const totalRows = server ? pagination.rowCount : sortedRows.length;
   return {
     columns,
@@ -2194,7 +2076,7 @@ var buildDataTableModel = (store) => {
     filteredRows,
     sortedRows,
     pageRows,
-    pageCount: Math.max(1, Math.ceil(totalRows / Math.max(1, store.state.pagination.pageSize))),
+    pageCount: Math.max(1, Math.ceil(totalRows / Math.max(1, store.state.pageSize))),
     totalRows
   };
 };
@@ -2202,13 +2084,15 @@ var useTableAtom = (tableAtom) => useAtom(tableAtom);
 var changeState = (setStore, update) => {
   setStore((store) => {
     const proposed = update(store.state);
-    const previousQuery = queryFromDataTableState(store.state);
-    const nextQuery = queryFromDataTableState(proposed);
-    if (!sameQuery(previousQuery, nextQuery)) {
-      store.config.onQueryChange?.(nextQuery);
+    const query = queryFromState(proposed);
+    if (!sameQueryState(query, store.state)) {
+      store.config.onStateChange?.(query);
+    }
+    const uiState = uiFromState(proposed);
+    if (!sameUiState(uiState, store.state)) {
+      store.config.onUiStateChange(uiState);
     }
-    store.config.onStateChange?.(proposed);
-    const state = mergeDataTableState(proposed, store.controlledState);
+    const state = store.controlledState ? { ...proposed, ...store.controlledState } : proposed;
     if (sameDataTableState(state, store.state))
       return store;
     const next = { ...store, state };
@@ -2253,7 +2137,7 @@ var getActiveGrouping = (store) => {
 };
 var canReorderRows = (store) => {
   const pagination = store.config.features.pagination;
-  return !!store.config.features.reordering && !getActiveGrouping(store).length && !store.state.globalFilter && !store.state.sorting.length && !(pagination && pagination.mode === "server");
+  return !!store.config.features.reordering && !getActiveGrouping(store).length && !store.state.globalFilter && !store.state.sort?.length && !(pagination && pagination.mode === "server");
 };
 var canMoveRowsToGroups = (store) => getActiveGrouping(store).some((field) => !!field.onMoveToGroup);
 var canDragRows = (store) => getActiveGrouping(store).length ? canMoveRowsToGroups(store) : canReorderRows(store);
@@ -2276,11 +2160,11 @@ var renderCell = (row, column) => {
   return column.colDef.valueFormatter?.(params) ?? (value === null || value === undefined ? null : String(value));
 };
 var nodeText = (node) => {
-  if (Schema2.is(Schema2.String)(node) || Schema2.is(Schema2.Number)(node))
+  if (Schema.is(Schema.String)(node) || Schema.is(Schema.Number)(node))
     return String(node);
   if (!isValidElement(node))
     return "";
-  if (Schema2.is(Schema2.String)(node.props.title))
+  if (Schema.is(Schema.String)(node.props.title))
     return node.props.title;
   return nodeText(node.props.children);
 };
@@ -2427,18 +2311,18 @@ var DataTableToolbar = ({
             onChange: (event) => update((state) => ({
               ...state,
               globalFilter: event.target.value,
-              pagination: { ...state.pagination, pageIndex: 0 }
+              page: 0
             })),
             placeholder: labels2.filter,
-            value: store.state.globalFilter
+            value: store.state.globalFilter ?? ""
           }),
           store.state.globalFilter ? /* @__PURE__ */ jsx17(Button, {
             "aria-label": labels2.filter,
             className: "absolute top-1/2 right-1 size-7 -translate-y-1/2",
             onClick: () => update((state) => ({
               ...state,
-              globalFilter: "",
-              pagination: { ...state.pagination, pageIndex: 0 }
+              globalFilter: undefined,
+              page: 0
             })),
             size: "icon",
             variant: "ghost",
@@ -2447,7 +2331,7 @@ var DataTableToolbar = ({
         ]
       }) : null,
       /* @__PURE__ */ jsx17("div", {
-        className: "-m-1 flex w-full overflow-x-auto p-1",
+        className: "-m-1 flex overflow-x-auto p-1",
         children: /* @__PURE__ */ jsxs9(Menubar, {
           className: "h-auto w-max min-w-full justify-start bg-transparent shadow-none [&_[data-slot=menubar-trigger]]:gap-2 [&_[data-slot=menubar-trigger]_svg]:size-4",
           children: [
@@ -2597,18 +2481,18 @@ var SortMenu = ({
   const columns = deriveModel(store).columns.filter(({ colDef }) => colDef.sortable !== false);
   if (!columns.length)
     return null;
-  const current = store.state.sorting[0];
-  const sort = (id, desc) => changeState(setStore, (state) => ({
+  const current = store.state.sort?.[0];
+  const sort = (id, direction) => changeState(setStore, (state) => ({
     ...state,
-    sorting: [{ id, desc }],
-    pagination: { ...state.pagination, pageIndex: 0 }
+    sort: [{ id, direction }],
+    page: 0
   }));
   return /* @__PURE__ */ jsxs9(MenubarMenu, {
     children: [
       /* @__PURE__ */ jsxs9(MenubarTrigger, {
         "aria-label": store.config.labels.sortBy,
         children: [
-          current ? current.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {}),
+          current ? current.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {}),
           /* @__PURE__ */ jsx17("span", {
             className: "hidden sm:inline",
             children: store.config.labels.sortBy
@@ -2619,19 +2503,19 @@ var SortMenu = ({
         align: "end",
         className: "w-52",
         children: columns.map((column) => {
-          const sortState = store.state.sorting.find(({ id }) => id === column.id);
+          const sortState = store.state.sort?.find(({ id }) => id === column.id);
           return /* @__PURE__ */ jsxs9(MenubarSub, {
             children: [
               /* @__PURE__ */ jsxs9(MenubarSubTrigger, {
                 children: [
-                  sortState ? sortState.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : null,
+                  sortState ? sortState.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : null,
                   columnLabel(column)
                 ]
               }),
               /* @__PURE__ */ jsxs9(MenubarSubContent, {
                 children: [
                   /* @__PURE__ */ jsxs9(MenubarItem, {
-                    onClick: () => sort(column.id, false),
+                    onClick: () => sort(column.id, "asc"),
                     children: [
                       /* @__PURE__ */ jsx17(ArrowUp, {}),
                       " ",
@@ -2639,7 +2523,7 @@ var SortMenu = ({
                     ]
                   }),
                   /* @__PURE__ */ jsxs9(MenubarItem, {
-                    onClick: () => sort(column.id, true),
+                    onClick: () => sort(column.id, "desc"),
                     children: [
                       /* @__PURE__ */ jsx17(ArrowDown, {}),
                       " ",
@@ -2652,7 +2536,7 @@ var SortMenu = ({
                       /* @__PURE__ */ jsxs9(MenubarItem, {
                         onClick: () => changeState(setStore, (state) => ({
                           ...state,
-                          sorting: state.sorting.filter(({ id }) => id !== column.id)
+                          sort: state.sort?.filter(({ id }) => id !== column.id)
                         })),
                         children: [
                           /* @__PURE__ */ jsx17(X2, {}),
@@ -3063,12 +2947,20 @@ var GroupedTable = ({
   const renderSections = (items) => items.flatMap((section) => {
     const collapsed = !!store.state.collapsedGroups[section.key];
     const targetKey = getGroupDropKey(section.field.id, section.groupId);
+    const toggleCollapsed = () => changeState(setStore, (state) => ({
+      ...state,
+      collapsedGroups: {
+        ...state.collapsedGroups,
+        [section.key]: !collapsed
+      }
+    }));
     const body = /* @__PURE__ */ jsxs9(TableBody, {
       className: "data-[drop-target=true]:outline-primary relative data-[drop-target=true]:z-30 data-[drop-target=true]:outline-2 data-[drop-target=true]:-outline-offset-2 data-[drop-target=true]:[&>tr]:border-transparent data-[drop-target=true]:[&>tr>td:last-child]:z-0",
       "data-table-group": section.field.onMoveToGroup ? targetKey : undefined,
       children: [
         /* @__PURE__ */ jsx17(TableRow, {
-          className: "bg-muted/40",
+          className: "bg-muted/40 hover:bg-accent! cursor-pointer",
+          onClick: toggleCollapsed,
           children: /* @__PURE__ */ jsx17(TableCell, {
             colSpan: model.visibleColumns.length + extra,
             children: /* @__PURE__ */ jsxs9("div", {
@@ -3077,14 +2969,7 @@ var GroupedTable = ({
               children: [
                 /* @__PURE__ */ jsxs9("button", {
                   "aria-expanded": !collapsed,
-                  className: "flex flex-1 items-center gap-2 text-left",
-                  onClick: () => changeState(setStore, (state) => ({
-                    ...state,
-                    collapsedGroups: {
-                      ...state.collapsedGroups,
-                      [section.key]: !collapsed
-                    }
-                  })),
+                  className: "flex flex-1 cursor-pointer items-center gap-2 text-left font-medium",
                   type: "button",
                   children: [
                     collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
@@ -3143,12 +3028,12 @@ var ColumnHeaderMenu = ({
     return null;
   const sortingEnabled = store.config.features.sorting !== false && column.colDef.sortable !== false;
   const hidingEnabled = store.config.features.columnVisibility !== false && column.colDef.hideable !== false;
-  const sort = store.state.sorting.find(({ id }) => id === column.id);
+  const sort = store.state.sort?.find(({ id }) => id === column.id);
   const update = (next) => changeState(setStore, next);
-  const setSort = (desc) => update((state) => ({
+  const setSort = (direction) => update((state) => ({
     ...state,
-    sorting: [{ id: column.id, desc }],
-    pagination: { ...state.pagination, pageIndex: 0 }
+    sort: [{ id: column.id, direction }],
+    page: 0
   }));
   const label = columnLabel(column);
   if (!sortingEnabled && !hidingEnabled) {
@@ -3170,7 +3055,7 @@ var ColumnHeaderMenu = ({
               className: "truncate",
               children: column.colDef.headerName
             }),
-            sort ? sort.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : sortingEnabled ? /* @__PURE__ */ jsx17(ChevronsUpDown2, {}) : null
+            sort ? sort.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : sortingEnabled ? /* @__PURE__ */ jsx17(ChevronsUpDown2, {}) : null
           ]
         })
       }),
@@ -3182,7 +3067,7 @@ var ColumnHeaderMenu = ({
             sortingEnabled ? /* @__PURE__ */ jsxs9(Fragment, {
               children: [
                 /* @__PURE__ */ jsxs9(DropdownMenuItem, {
-                  onClick: () => setSort(false),
+                  onClick: () => setSort("asc"),
                   children: [
                     /* @__PURE__ */ jsx17(ArrowUp, {}),
                     " ",
@@ -3190,7 +3075,7 @@ var ColumnHeaderMenu = ({
                   ]
                 }),
                 /* @__PURE__ */ jsxs9(DropdownMenuItem, {
-                  onClick: () => setSort(true),
+                  onClick: () => setSort("desc"),
                   children: [
                     /* @__PURE__ */ jsx17(ArrowDown, {}),
                     " ",
@@ -3200,7 +3085,7 @@ var ColumnHeaderMenu = ({
                 sort ? /* @__PURE__ */ jsxs9(DropdownMenuItem, {
                   onClick: () => update((state) => ({
                     ...state,
-                    sorting: state.sorting.filter(({ id }) => id !== column.id)
+                    sort: state.sort?.filter(({ id }) => id !== column.id)
                   })),
                   children: [
                     /* @__PURE__ */ jsx17(X2, {}),
@@ -3436,23 +3321,24 @@ var DataTableGallery = ({
   const renderSections = (sections) => sections.map((section) => {
     const collapsed = !!store.state.collapsedGroups[section.key];
     const targetKey = getGroupDropKey(section.field.id, section.groupId);
+    const toggleCollapsed = () => changeState(setStore, (state) => ({
+      ...state,
+      collapsedGroups: {
+        ...state.collapsedGroups,
+        [section.key]: !collapsed
+      }
+    }));
     return /* @__PURE__ */ jsxs9("section", {
       className: "data-[drop-target=true]:ring-primary space-y-3 rounded-lg transition-shadow data-[drop-target=true]:ring-2",
       "data-table-group": section.field.onMoveToGroup ? targetKey : undefined,
       children: [
         /* @__PURE__ */ jsxs9("div", {
-          className: "flex items-center gap-2 rounded-lg border p-3",
+          className: "hover:bg-accent flex cursor-pointer items-center gap-2 rounded-lg border p-3 transition-colors",
+          onClick: toggleCollapsed,
           children: [
             /* @__PURE__ */ jsxs9("button", {
               "aria-expanded": !collapsed,
-              className: "flex flex-1 items-center gap-2 text-left",
-              onClick: () => changeState(setStore, (state) => ({
-                ...state,
-                collapsedGroups: {
-                  ...state.collapsedGroups,
-                  [section.key]: !collapsed
-                }
-              })),
+              className: "flex flex-1 cursor-pointer items-center gap-2 text-left font-medium",
               type: "button",
               children: [
                 collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
@@ -3505,45 +3391,63 @@ var DataTablePagination = ({
   const pagination = store.config.features.pagination ?? { mode: "client" };
   const clientGrouping = pagination !== false && pagination.mode === "client" && getActiveGrouping(store).length > 0;
   const paginationVisible = pagination !== false && !clientGrouping;
-  const pageIndex = store.state.pagination.pageIndex;
+  const pageIndex = store.state.page;
   const maxPageIndex = model.pageCount - 1;
   useLayoutEffect(() => {
     if (paginationVisible && pageIndex > maxPageIndex) {
       changeState(setStore, (state) => ({
         ...state,
-        pagination: { ...state.pagination, pageIndex: maxPageIndex }
+        page: maxPageIndex
       }));
     }
   }, [maxPageIndex, pageIndex, paginationVisible, setStore]);
   if (!paginationVisible)
     return null;
   const selected = model.rows.filter((row) => store.state.rowSelection[row.id]).length;
-  const setPagination = (next) => changeState(setStore, (state) => ({ ...state, pagination: next }));
+  const setPagination = (next) => changeState(setStore, (state) => ({ ...state, ...next }));
   return /* @__PURE__ */ jsx17("div", {
     className: "pt-4",
     children: /* @__PURE__ */ jsx17(Pagination, {
       messages: store.config.labels,
-      onPageChange: (pageIndex2) => setPagination({ ...store.state.pagination, pageIndex: pageIndex2 }),
-      onPageSizeChange: (pageSize) => setPagination({ pageIndex: 0, pageSize }),
-      page: Math.min(store.state.pagination.pageIndex, model.pageCount - 1),
+      onPageChange: (page) => setPagination({ page, pageSize: store.state.pageSize }),
+      onPageSizeChange: (pageSize) => setPagination({ page: 0, pageSize }),
+      page: Math.min(store.state.page, model.pageCount - 1),
       pageCount: model.pageCount,
-      pageSize: store.state.pagination.pageSize,
+      pageSize: store.state.pageSize,
       pageSizes: pagination.pageSizes,
       selectedRows: selected,
       totalRows: model.totalRows
     })
   });
 };
-var DataTable = (props) => {
-  const validatedConfig = resolveConfig(props);
+var HydratedDataTable = ({
+  persistedUiState,
+  setPersistedUiState,
+  ...props
+}) => {
+  const transientUiAtomRef = useRef2(null);
+  if (!transientUiAtomRef.current) {
+    const grouping = props.features?.grouping;
+    transientUiAtomRef.current = Atom.make({
+      ...transientUiFromState(DEFAULT_UI_STATE),
+      grouping: grouping && grouping.initial ? grouping.initial : []
+    });
+  }
+  const [transientUiState, setTransientUiState] = useAtom(transientUiAtomRef.current);
+  const uiState = useMemo(() => ({ ...persistedUiState, ...transientUiState }), [persistedUiState, transientUiState]);
+  const setUiState = useCallback2((state) => {
+    setPersistedUiState(persistedUiFromState(state));
+    setTransientUiState(transientUiFromState(state));
+  }, [setPersistedUiState, setTransientUiState]);
+  const validatedConfig = resolveConfig(props, (state) => setUiState(state));
   const atomRef = useRef2(null);
   if (!atomRef.current) {
     const initial = {
       rowData: props.rowData,
       columnDefs: props.columnDefs,
       config: validatedConfig,
-      state: initialPublicState(props),
-      controlledState: controlledStateFromProps(props.query, props.state)
+      state: initialPublicState(props, uiState),
+      controlledState: props.state
     };
     atomRef.current = Atom.make({
       ...initial,
@@ -3558,22 +3462,21 @@ var DataTable = (props) => {
       const selection = features.selection;
       const config = {
         getRowId: selection && selection.getRowId || props.getRowId || undefined,
-        onQueryChange: props.onQueryChange,
         onStateChange: props.onStateChange,
+        onUiStateChange: (state2) => setUiState(state2),
         status: props.status ?? {},
         features,
         onRowClicked: props.onRowClicked,
         labels: dataTableMessages(props.messages)
       };
-      const controlledState = controlledStateFromProps(props.query, props.state);
-      const state = mergeDataTableState(store.state, controlledState);
+      const state = { ...store.state, ...uiState, ...props.state };
       const modelChanged = store.rowData !== props.rowData || store.columnDefs !== props.columnDefs || !sameDataTableState(store.state, state) || store.config.getRowId !== config.getRowId || store.config.features.pagination !== config.features.pagination;
       const next = {
         ...store,
         rowData: props.rowData,
         columnDefs: props.columnDefs,
         config,
-        controlledState,
+        controlledState: props.state,
         state
       };
       return modelChanged ? { ...next, model: buildDataTableModel(next) } : next;
@@ -3584,13 +3487,13 @@ var DataTable = (props) => {
     props.getRowId,
     props.messages,
     props.onRowClicked,
-    props.onQueryChange,
     props.onStateChange,
-    props.query,
     props.rowData,
     props.state,
     props.status,
-    setStore
+    setStore,
+    setUiState,
+    uiState
   ]);
   return /* @__PURE__ */ jsxs9("div", {
     className: "w-full max-w-full min-w-0 rounded-md",
@@ -3608,6 +3511,34 @@ var DataTable = (props) => {
     ]
   });
 };
+var DataTable = (props) => {
+  const persistedUiAtomRef = useRef2(null);
+  if (!persistedUiAtomRef.current) {
+    const pathname = globalThis.window?.location.pathname ?? "/";
+    const columnIds = normalizeDataTableColumns(props.columnDefs).map(({ id }) => id).join(",");
+    const viewCapability = props.features?.gallery ? "gallery" : "table";
+    persistedUiAtomRef.current = Atom.kvs({
+      mode: "async",
+      runtime: dataTableStorageRuntime,
+      key: `data-table:${pathname}:${columnIds}:${viewCapability}:ui`,
+      schema: DataTablePersistedUiStateSchema,
+      defaultValue: () => persistedUiFromState(DEFAULT_UI_STATE)
+    });
+  }
+  const [persistedUiResult, setPersistedUiState] = useAtom(persistedUiAtomRef.current);
+  if (!AsyncResult.isSuccess(persistedUiResult) || AsyncResult.isWaiting(persistedUiResult)) {
+    return /* @__PURE__ */ jsx17("div", {
+      "aria-busy": "true",
+      className: "invisible w-full max-w-full min-w-0 rounded-md",
+      "data-table-root": ""
+    });
+  }
+  return /* @__PURE__ */ jsx17(HydratedDataTable, {
+    ...props,
+    persistedUiState: persistedUiResult.value,
+    setPersistedUiState
+  });
+};
 var DataTableContent = ({
   tableAtom
 }) => {
@@ -3690,7 +3621,7 @@ var DataTableListSummary = ({
   visibleCount = 3
 }) => {
   const labels2 = dataTableMessages();
-  const normalized = items.map((item) => Schema2.is(Schema2.String)(item) ? { label: item } : item);
+  const normalized = items.map((item) => Schema.is(Schema.String)(item) ? { label: item } : item);
   if (!normalized.length)
     return /* @__PURE__ */ jsx17("span", {
       className: "text-muted-foreground",
@@ -3789,7 +3720,6 @@ export {
   getDataTableSelectableRows,
   getDataTableWidth,
   groupDataTableRows,
-  mergeDataTableState,
   normalizeDataTableColumns,
   paginateDataTableRows,
   reorderDataTableRows,