mvc-kit 2.12.4 → 2.13.0

package/dist/react/components/DataTable.js

@@ -1,179 +1,156 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { isSelectionHelper, isSortingHelper, isPaginationHelper } from "./types.js";
+import { isPaginationHelper, isSelectionHelper, isSortingHelper } from "./types.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/DataTable.tsx
 function resolveSelectionProp(selection) {
-  if (isSelectionHelper(selection)) {
-    return {
-      selected: selection.selected,
-      onToggle: (key) => selection.toggle(key),
-      onToggleAll: (allKeys) => selection.toggleAll(allKeys)
-    };
-  }
-  return {
-    selected: selection.selected,
-    onToggle: selection.onToggle,
-    onToggleAll: (allKeys) => selection.onToggleAll(allKeys)
-  };
+	if (isSelectionHelper(selection)) return {
+		selected: selection.selected,
+		onToggle: (key) => selection.toggle(key),
+		onToggleAll: (allKeys) => selection.toggleAll(allKeys)
+	};
+	return {
+		selected: selection.selected,
+		onToggle: selection.onToggle,
+		onToggleAll: (allKeys) => selection.onToggleAll(allKeys)
+	};
 }
 function resolveSortProp(sort, onSort) {
-  if (isSortingHelper(sort)) {
-    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };
-  }
-  return { sorts: sort, onSort };
+	if (isSortingHelper(sort)) return {
+		sorts: sort.sorts,
+		onSort: (key) => sort.toggle(key)
+	};
+	return {
+		sorts: sort,
+		onSort
+	};
 }
 function resolvePaginationProp(pagination, pageSize, paginationTotal) {
-  if (isPaginationHelper(pagination)) {
-    const total2 = paginationTotal ?? 0;
-    const ps2 = pagination.pageSize;
-    const pageCount2 = Math.max(1, Math.ceil(total2 / ps2));
-    const page2 = pagination.page;
-    return {
-      page: page2,
-      pageCount: pageCount2,
-      total: total2,
-      pageSize: ps2,
-      hasPrev: page2 > 1,
-      hasNext: page2 < pageCount2,
-      goToPage: (p) => pagination.setPage(p),
-      goPrev: () => pagination.setPage(page2 - 1),
-      goNext: () => pagination.setPage(page2 + 1)
-    };
-  }
-  const total = pagination.total;
-  const ps = pageSize ?? 10;
-  const pageCount = Math.max(1, Math.ceil(total / ps));
-  const page = pagination.page;
-  return {
-    page,
-    pageCount,
-    total,
-    pageSize: ps,
-    hasPrev: page > 1,
-    hasNext: page < pageCount,
-    goToPage: pagination.onPageChange,
-    goPrev: () => pagination.onPageChange(page - 1),
-    goNext: () => pagination.onPageChange(page + 1)
-  };
+	if (isPaginationHelper(pagination)) {
+		const total = paginationTotal ?? 0;
+		const ps = pagination.pageSize;
+		const pageCount = Math.max(1, Math.ceil(total / ps));
+		const page = pagination.page;
+		return {
+			page,
+			pageCount,
+			total,
+			pageSize: ps,
+			hasPrev: page > 1,
+			hasNext: page < pageCount,
+			goToPage: (p) => pagination.setPage(p),
+			goPrev: () => pagination.setPage(page - 1),
+			goNext: () => pagination.setPage(page + 1)
+		};
+	}
+	const total = pagination.total;
+	const ps = pageSize ?? 10;
+	const pageCount = Math.max(1, Math.ceil(total / ps));
+	const page = pagination.page;
+	return {
+		page,
+		pageCount,
+		total,
+		pageSize: ps,
+		hasPrev: page > 1,
+		hasNext: page < pageCount,
+		goToPage: pagination.onPageChange,
+		goPrev: () => pagination.onPageChange(page - 1),
+		goNext: () => pagination.onPageChange(page + 1)
+	};
 }
-const defaultKeyOf = (item) => item.id;
+var defaultKeyOf = (item) => item.id;
 function getAriaSortValue(key, sorts) {
-  if (!sorts) return "none";
-  const desc = sorts.find((s) => s.key === key);
-  if (!desc) return "none";
-  return desc.direction === "asc" ? "ascending" : "descending";
+	if (!sorts) return "none";
+	const desc = sorts.find((s) => s.key === key);
+	if (!desc) return "none";
+	return desc.direction === "asc" ? "ascending" : "descending";
 }
-function DataTable({
-  items,
-  columns,
-  keyOf = defaultKeyOf,
-  pageSize,
-  sort,
-  onSort,
-  selection,
-  loading,
-  error,
-  pagination,
-  paginationTotal,
-  renderEmpty,
-  renderLoading,
-  renderError,
-  renderSortIndicator,
-  renderRow,
-  renderPagination,
-  className,
-  "aria-label": ariaLabel
-}) {
-  if (loading && renderLoading) return /* @__PURE__ */ jsx(Fragment, { children: renderLoading() });
-  if (error && renderError) return /* @__PURE__ */ jsx(Fragment, { children: renderError(error) });
-  if (items.length === 0 && renderEmpty) return /* @__PURE__ */ jsx(Fragment, { children: renderEmpty() });
-  const resolvedSelection = selection ? resolveSelectionProp(selection) : void 0;
-  let resolvedSorts;
-  let resolvedOnSort;
-  if (sort) {
-    const resolved = resolveSortProp(sort, onSort);
-    resolvedSorts = resolved.sorts;
-    resolvedOnSort = resolved.onSort;
-  }
-  let displayItems = items;
-  let paginationInfo;
-  if (pagination) {
-    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);
-  } else if (pageSize && !pagination) {
-    displayItems = items.slice(0, pageSize);
-  }
-  const allKeys = resolvedSelection ? displayItems.map((item) => keyOf(item)) : [];
-  const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
-  const someSelected = resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
-  return /* @__PURE__ */ jsxs("div", { "data-component": "data-table", className, children: [
-    /* @__PURE__ */ jsxs("table", { role: "grid", "aria-label": ariaLabel, children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        resolvedSelection && /* @__PURE__ */ jsx("th", { "data-column": "select", children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: !!allSelected,
-            ref: (el) => {
-              if (el) el.indeterminate = !!someSelected && !allSelected;
-            },
-            onChange: () => resolvedSelection.onToggleAll(allKeys),
-            "aria-label": "Select all"
-          }
-        ) }),
-        columns.map((col) => {
-          const isSortable = col.sortable && resolvedOnSort;
-          const sortDesc = resolvedSorts?.find((s) => s.key === col.key);
-          const isActive = !!sortDesc;
-          const sortIndex = resolvedSorts ? resolvedSorts.findIndex((s) => s.key === col.key) : -1;
-          return /* @__PURE__ */ jsx(
-            "th",
-            {
-              "data-sortable": isSortable ? "" : void 0,
-              "data-sorted": isActive ? "" : void 0,
-              "data-align": col.align,
-              style: col.width ? { width: col.width } : void 0,
-              "aria-sort": isSortable ? getAriaSortValue(col.key, resolvedSorts) : void 0,
-              children: isSortable ? /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => resolvedOnSort(col.key), children: [
-                col.header,
-                renderSortIndicator?.({
-                  active: isActive,
-                  direction: sortDesc?.direction ?? "asc",
-                  index: sortIndex,
-                  onToggle: () => resolvedOnSort(col.key)
-                })
-              ] }) : col.header
-            },
-            col.key
-          );
-        })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: displayItems.map((item, index) => {
-        const key = keyOf(item);
-        const isSelected = resolvedSelection?.selected.has(key);
-        const cells = /* @__PURE__ */ jsxs(Fragment, { children: [
-          resolvedSelection && /* @__PURE__ */ jsx("td", { "data-column": "select", children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              checked: !!isSelected,
-              onChange: () => resolvedSelection.onToggle(key),
-              "aria-label": `Select row ${key}`
-            }
-          ) }),
-          columns.map((col) => /* @__PURE__ */ jsx(
-            "td",
-            {
-              "data-align": col.align,
-              children: col.render(item, index)
-            },
-            col.key
-          ))
-        ] });
-        return /* @__PURE__ */ jsx("tr", { "data-selected": isSelected ? "" : void 0, children: renderRow ? renderRow(item, index, cells) : cells }, key);
-      }) })
-    ] }),
-    paginationInfo && renderPagination?.(paginationInfo)
-  ] });
+/**
+* Headless data table with sort headers, selection checkboxes, and pagination slots.
+* Renders semantic HTML (`<table>`) with data attributes for styling.
+* Accepts Sorting/Selection/Pagination helpers directly via duck-typing.
+*/
+function DataTable({ items, columns, keyOf = defaultKeyOf, pageSize, sort, onSort, selection, loading, error, pagination, paginationTotal, renderEmpty, renderLoading, renderError, renderSortIndicator, renderRow, renderPagination, className, "aria-label": ariaLabel }) {
+	if (loading && renderLoading) return /* @__PURE__ */ jsx(Fragment, { children: renderLoading() });
+	if (error && renderError) return /* @__PURE__ */ jsx(Fragment, { children: renderError(error) });
+	if (items.length === 0 && renderEmpty) return /* @__PURE__ */ jsx(Fragment, { children: renderEmpty() });
+	const resolvedSelection = selection ? resolveSelectionProp(selection) : void 0;
+	let resolvedSorts;
+	let resolvedOnSort;
+	if (sort) {
+		const resolved = resolveSortProp(sort, onSort);
+		resolvedSorts = resolved.sorts;
+		resolvedOnSort = resolved.onSort;
+	}
+	let displayItems = items;
+	let paginationInfo;
+	if (pagination) paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);
+	else if (pageSize && !pagination) displayItems = items.slice(0, pageSize);
+	const allKeys = resolvedSelection ? displayItems.map((item) => keyOf(item)) : [];
+	const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
+	const someSelected = resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-component": "data-table",
+		className,
+		children: [/* @__PURE__ */ jsxs("table", {
+			role: "grid",
+			"aria-label": ariaLabel,
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [resolvedSelection && /* @__PURE__ */ jsx("th", {
+				"data-column": "select",
+				children: /* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: !!allSelected,
+					ref: (el) => {
+						if (el) el.indeterminate = !!someSelected && !allSelected;
+					},
+					onChange: () => resolvedSelection.onToggleAll(allKeys),
+					"aria-label": "Select all"
+				})
+			}), columns.map((col) => {
+				const isSortable = col.sortable && resolvedOnSort;
+				const sortDesc = resolvedSorts?.find((s) => s.key === col.key);
+				const isActive = !!sortDesc;
+				const sortIndex = resolvedSorts ? resolvedSorts.findIndex((s) => s.key === col.key) : -1;
+				return /* @__PURE__ */ jsx("th", {
+					"data-sortable": isSortable ? "" : void 0,
+					"data-sorted": isActive ? "" : void 0,
+					"data-align": col.align,
+					style: col.width ? { width: col.width } : void 0,
+					"aria-sort": isSortable ? getAriaSortValue(col.key, resolvedSorts) : void 0,
+					children: isSortable ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => resolvedOnSort(col.key),
+						children: [col.header, renderSortIndicator?.({
+							active: isActive,
+							direction: sortDesc?.direction ?? "asc",
+							index: sortIndex,
+							onToggle: () => resolvedOnSort(col.key)
+						})]
+					}) : col.header
+				}, col.key);
+			})] }) }), /* @__PURE__ */ jsx("tbody", { children: displayItems.map((item, index) => {
+				const key = keyOf(item);
+				const isSelected = resolvedSelection?.selected.has(key);
+				const cells = /* @__PURE__ */ jsxs(Fragment, { children: [resolvedSelection && /* @__PURE__ */ jsx("td", {
+					"data-column": "select",
+					children: /* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: !!isSelected,
+						onChange: () => resolvedSelection.onToggle(key),
+						"aria-label": `Select row ${key}`
+					})
+				}), columns.map((col) => /* @__PURE__ */ jsx("td", {
+					"data-align": col.align,
+					children: col.render(item, index)
+				}, col.key))] });
+				return /* @__PURE__ */ jsx("tr", {
+					"data-selected": isSelected ? "" : void 0,
+					children: renderRow ? renderRow(item, index, cells) : cells
+				}, key);
+			}) })]
+		}), paginationInfo && renderPagination?.(paginationInfo)]
+	});
 }
-export {
-  DataTable
-};
-//# sourceMappingURL=DataTable.js.map
+//#endregion
+export { DataTable };
+
+//# sourceMappingURL=DataTable.js.map

package/dist/react/components/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/react/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  Column,\n  SortHeaderProps,\n  SelectionState,\n  SelectionHelper,\n  PaginationState,\n  PaginationHelper,\n  PaginationInfo,\n  SortingHelper,\n  AsyncStateProps,\n} from './types';\nimport { isSelectionHelper, isPaginationHelper, isSortingHelper } from './types';\nimport type { SortDescriptor } from '../../Sorting';\n\n// ── Prop resolution helpers ──\n\ninterface ResolvedSelection {\n  selected: ReadonlySet<any>;\n  onToggle: (key: any) => void;\n  onToggleAll: (allKeys: any[]) => void;\n}\n\nfunction resolveSelectionProp(selection: SelectionState | SelectionHelper): ResolvedSelection {\n  if (isSelectionHelper(selection)) {\n    return {\n      selected: selection.selected,\n      onToggle: (key) => selection.toggle(key),\n      onToggleAll: (allKeys) => selection.toggleAll(allKeys),\n    };\n  }\n  return {\n    selected: selection.selected,\n    onToggle: selection.onToggle,\n    onToggleAll: (allKeys) => selection.onToggleAll(allKeys),\n  };\n}\n\nfunction resolveSortProp(\n  sort: readonly SortDescriptor[] | SortingHelper,\n  onSort?: (key: string) => void,\n): { sorts: readonly SortDescriptor[]; onSort: ((key: string) => void) | undefined } {\n  if (isSortingHelper(sort)) {\n    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };\n  }\n  return { sorts: sort, onSort };\n}\n\nfunction resolvePaginationProp(\n  pagination: PaginationState | PaginationHelper,\n  pageSize?: number,\n  paginationTotal?: number,\n): PaginationInfo {\n  if (isPaginationHelper(pagination)) {\n    const total = paginationTotal ?? 0;\n    const ps = pagination.pageSize;\n    const pageCount = Math.max(1, Math.ceil(total / ps));\n    const page = pagination.page;\n    return {\n      page,\n      pageCount,\n      total,\n      pageSize: ps,\n      hasPrev: page > 1,\n      hasNext: page < pageCount,\n      goToPage: (p) => pagination.setPage(p),\n      goPrev: () => pagination.setPage(page - 1),\n      goNext: () => pagination.setPage(page + 1),\n    };\n  }\n  const total = pagination.total;\n  const ps = pageSize ?? 10;\n  const pageCount = Math.max(1, Math.ceil(total / ps));\n  const page = pagination.page;\n  return {\n    page,\n    pageCount,\n    total,\n    pageSize: ps,\n    hasPrev: page > 1,\n    hasNext: page < pageCount,\n    goToPage: pagination.onPageChange,\n    goPrev: () => pagination.onPageChange(page - 1),\n    goNext: () => pagination.onPageChange(page + 1),\n  };\n}\n\n/** Props for the DataTable headless component. */\nexport interface DataTableProps<T> extends AsyncStateProps {\n  items: T[];\n  columns: Column<T>[];\n  keyOf?: (item: T) => string | number;\n  pageSize?: number;\n\n  // Controlled state — accepts object-literal OR helper instance\n  sort?: readonly SortDescriptor[] | SortingHelper;\n  onSort?: (key: string) => void;\n  selection?: SelectionState | SelectionHelper;\n  pagination?: PaginationState | PaginationHelper;\n  paginationTotal?: number;\n\n  // Render slots\n  renderEmpty?: () => ReactNode;\n  renderLoading?: () => ReactNode;\n  renderError?: (error: string) => ReactNode;\n  renderSortIndicator?: (props: SortHeaderProps) => ReactNode;\n  renderRow?: (item: T, index: number, defaultCells: ReactNode) => ReactNode;\n  renderPagination?: (info: PaginationInfo) => ReactNode;\n\n  className?: string;\n  'aria-label'?: string;\n}\n\nconst defaultKeyOf = (item: any) => item.id;\n\nfunction getAriaSortValue(key: string, sorts: readonly SortDescriptor[] | undefined): 'ascending' | 'descending' | 'none' {\n  if (!sorts) return 'none';\n  const desc = sorts.find(s => s.key === key);\n  if (!desc) return 'none';\n  return desc.direction === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * Headless data table with sort headers, selection checkboxes, and pagination slots.\n * Renders semantic HTML (`<table>`) with data attributes for styling.\n * Accepts Sorting/Selection/Pagination helpers directly via duck-typing.\n */\nexport function DataTable<T>({\n  items,\n  columns,\n  keyOf = defaultKeyOf,\n  pageSize,\n  sort,\n  onSort,\n  selection,\n  loading,\n  error,\n  pagination,\n  paginationTotal,\n  renderEmpty,\n  renderLoading,\n  renderError,\n  renderSortIndicator,\n  renderRow,\n  renderPagination,\n  className,\n  'aria-label': ariaLabel,\n}: DataTableProps<T>) {\n  if (loading && renderLoading) return <>{renderLoading()}</>;\n  if (error && renderError) return <>{renderError(error)}</>;\n  if (items.length === 0 && renderEmpty) return <>{renderEmpty()}</>;\n\n  // ── Resolve props ──\n  const resolvedSelection = selection ? resolveSelectionProp(selection) : undefined;\n\n  let resolvedSorts: readonly SortDescriptor[] | undefined;\n  let resolvedOnSort: ((key: string) => void) | undefined;\n  if (sort) {\n    const resolved = resolveSortProp(sort, onSort);\n    resolvedSorts = resolved.sorts;\n    resolvedOnSort = resolved.onSort;\n  }\n\n  let displayItems = items;\n  let paginationInfo: PaginationInfo | undefined;\n  if (pagination) {\n    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);\n  } else if (pageSize && !pagination) {\n    displayItems = items.slice(0, pageSize);\n  }\n\n  // Selection: check indeterminate state\n  const allKeys = resolvedSelection ? displayItems.map(item => keyOf(item)) : [];\n  const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every(k => resolvedSelection!.selected.has(k));\n  const someSelected = resolvedSelection && allKeys.some(k => resolvedSelection!.selected.has(k));\n\n  return (\n    <div data-component=\"data-table\" className={className}>\n      <table role=\"grid\" aria-label={ariaLabel}>\n        <thead>\n          <tr>\n            {resolvedSelection && (\n              <th data-column=\"select\">\n                <input\n                  type=\"checkbox\"\n                  checked={!!allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = !!someSelected && !allSelected;\n                  }}\n                  onChange={() => resolvedSelection!.onToggleAll(allKeys)}\n                  aria-label=\"Select all\"\n                />\n              </th>\n            )}\n            {columns.map((col) => {\n              const isSortable = col.sortable && resolvedOnSort;\n              const sortDesc = resolvedSorts?.find(s => s.key === col.key);\n              const isActive = !!sortDesc;\n              const sortIndex = resolvedSorts ? resolvedSorts.findIndex(s => s.key === col.key) : -1;\n\n              return (\n                <th\n                  key={col.key}\n                  data-sortable={isSortable ? '' : undefined}\n                  data-sorted={isActive ? '' : undefined}\n                  data-align={col.align}\n                  style={col.width ? { width: col.width } : undefined}\n                  aria-sort={isSortable ? getAriaSortValue(col.key, resolvedSorts) : undefined}\n                >\n                  {isSortable ? (\n                    <button type=\"button\" onClick={() => resolvedOnSort!(col.key)}>\n                      {col.header}\n                      {renderSortIndicator?.({\n                        active: isActive,\n                        direction: sortDesc?.direction ?? 'asc',\n                        index: sortIndex,\n                        onToggle: () => resolvedOnSort!(col.key),\n                      })}\n                    </button>\n                  ) : (\n                    col.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {displayItems.map((item, index) => {\n            const key = keyOf(item);\n            const isSelected = resolvedSelection?.selected.has(key);\n\n            const cells = (\n              <>\n                {resolvedSelection && (\n                  <td data-column=\"select\">\n                    <input\n                      type=\"checkbox\"\n                      checked={!!isSelected}\n                      onChange={() => resolvedSelection!.onToggle(key)}\n                      aria-label={`Select row ${key}`}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key}\n                    data-align={col.align}\n                  >\n                    {col.render(item, index)}\n                  </td>\n                ))}\n              </>\n            );\n\n            return (\n              <tr key={key} data-selected={isSelected ? '' : undefined}>\n                {renderRow ? renderRow(item, index, cells) : cells}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      {paginationInfo && renderPagination?.(paginationInfo)}\n    </div>\n  );\n}\n"],"names":["total","ps","pageCount","page"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/react/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  Column,\n  SortHeaderProps,\n  SelectionState,\n  SelectionHelper,\n  PaginationState,\n  PaginationHelper,\n  PaginationInfo,\n  SortingHelper,\n  AsyncStateProps,\n} from './types';\nimport { isSelectionHelper, isPaginationHelper, isSortingHelper } from './types';\nimport type { SortDescriptor } from '../../Sorting';\n\n// ── Prop resolution helpers ──\n\ninterface ResolvedSelection {\n  selected: ReadonlySet<any>;\n  onToggle: (key: any) => void;\n  onToggleAll: (allKeys: any[]) => void;\n}\n\nfunction resolveSelectionProp(selection: SelectionState | SelectionHelper): ResolvedSelection {\n  if (isSelectionHelper(selection)) {\n    return {\n      selected: selection.selected,\n      onToggle: (key) => selection.toggle(key),\n      onToggleAll: (allKeys) => selection.toggleAll(allKeys),\n    };\n  }\n  return {\n    selected: selection.selected,\n    onToggle: selection.onToggle,\n    onToggleAll: (allKeys) => selection.onToggleAll(allKeys),\n  };\n}\n\nfunction resolveSortProp(\n  sort: readonly SortDescriptor[] | SortingHelper,\n  onSort?: (key: string) => void,\n): { sorts: readonly SortDescriptor[]; onSort: ((key: string) => void) | undefined } {\n  if (isSortingHelper(sort)) {\n    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };\n  }\n  return { sorts: sort, onSort };\n}\n\nfunction resolvePaginationProp(\n  pagination: PaginationState | PaginationHelper,\n  pageSize?: number,\n  paginationTotal?: number,\n): PaginationInfo {\n  if (isPaginationHelper(pagination)) {\n    const total = paginationTotal ?? 0;\n    const ps = pagination.pageSize;\n    const pageCount = Math.max(1, Math.ceil(total / ps));\n    const page = pagination.page;\n    return {\n      page,\n      pageCount,\n      total,\n      pageSize: ps,\n      hasPrev: page > 1,\n      hasNext: page < pageCount,\n      goToPage: (p) => pagination.setPage(p),\n      goPrev: () => pagination.setPage(page - 1),\n      goNext: () => pagination.setPage(page + 1),\n    };\n  }\n  const total = pagination.total;\n  const ps = pageSize ?? 10;\n  const pageCount = Math.max(1, Math.ceil(total / ps));\n  const page = pagination.page;\n  return {\n    page,\n    pageCount,\n    total,\n    pageSize: ps,\n    hasPrev: page > 1,\n    hasNext: page < pageCount,\n    goToPage: pagination.onPageChange,\n    goPrev: () => pagination.onPageChange(page - 1),\n    goNext: () => pagination.onPageChange(page + 1),\n  };\n}\n\n/** Props for the DataTable headless component. */\nexport interface DataTableProps<T> extends AsyncStateProps {\n  items: T[];\n  columns: Column<T>[];\n  keyOf?: (item: T) => string | number;\n  pageSize?: number;\n\n  // Controlled state — accepts object-literal OR helper instance\n  sort?: readonly SortDescriptor[] | SortingHelper;\n  onSort?: (key: string) => void;\n  selection?: SelectionState | SelectionHelper;\n  pagination?: PaginationState | PaginationHelper;\n  paginationTotal?: number;\n\n  // Render slots\n  renderEmpty?: () => ReactNode;\n  renderLoading?: () => ReactNode;\n  renderError?: (error: string) => ReactNode;\n  renderSortIndicator?: (props: SortHeaderProps) => ReactNode;\n  renderRow?: (item: T, index: number, defaultCells: ReactNode) => ReactNode;\n  renderPagination?: (info: PaginationInfo) => ReactNode;\n\n  className?: string;\n  'aria-label'?: string;\n}\n\nconst defaultKeyOf = (item: any) => item.id;\n\nfunction getAriaSortValue(key: string, sorts: readonly SortDescriptor[] | undefined): 'ascending' | 'descending' | 'none' {\n  if (!sorts) return 'none';\n  const desc = sorts.find(s => s.key === key);\n  if (!desc) return 'none';\n  return desc.direction === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * Headless data table with sort headers, selection checkboxes, and pagination slots.\n * Renders semantic HTML (`<table>`) with data attributes for styling.\n * Accepts Sorting/Selection/Pagination helpers directly via duck-typing.\n */\nexport function DataTable<T>({\n  items,\n  columns,\n  keyOf = defaultKeyOf,\n  pageSize,\n  sort,\n  onSort,\n  selection,\n  loading,\n  error,\n  pagination,\n  paginationTotal,\n  renderEmpty,\n  renderLoading,\n  renderError,\n  renderSortIndicator,\n  renderRow,\n  renderPagination,\n  className,\n  'aria-label': ariaLabel,\n}: DataTableProps<T>) {\n  if (loading && renderLoading) return <>{renderLoading()}</>;\n  if (error && renderError) return <>{renderError(error)}</>;\n  if (items.length === 0 && renderEmpty) return <>{renderEmpty()}</>;\n\n  // ── Resolve props ──\n  const resolvedSelection = selection ? resolveSelectionProp(selection) : undefined;\n\n  let resolvedSorts: readonly SortDescriptor[] | undefined;\n  let resolvedOnSort: ((key: string) => void) | undefined;\n  if (sort) {\n    const resolved = resolveSortProp(sort, onSort);\n    resolvedSorts = resolved.sorts;\n    resolvedOnSort = resolved.onSort;\n  }\n\n  let displayItems = items;\n  let paginationInfo: PaginationInfo | undefined;\n  if (pagination) {\n    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);\n  } else if (pageSize && !pagination) {\n    displayItems = items.slice(0, pageSize);\n  }\n\n  // Selection: check indeterminate state\n  const allKeys = resolvedSelection ? displayItems.map(item => keyOf(item)) : [];\n  const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every(k => resolvedSelection!.selected.has(k));\n  const someSelected = resolvedSelection && allKeys.some(k => resolvedSelection!.selected.has(k));\n\n  return (\n    <div data-component=\"data-table\" className={className}>\n      <table role=\"grid\" aria-label={ariaLabel}>\n        <thead>\n          <tr>\n            {resolvedSelection && (\n              <th data-column=\"select\">\n                <input\n                  type=\"checkbox\"\n                  checked={!!allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = !!someSelected && !allSelected;\n                  }}\n                  onChange={() => resolvedSelection!.onToggleAll(allKeys)}\n                  aria-label=\"Select all\"\n                />\n              </th>\n            )}\n            {columns.map((col) => {\n              const isSortable = col.sortable && resolvedOnSort;\n              const sortDesc = resolvedSorts?.find(s => s.key === col.key);\n              const isActive = !!sortDesc;\n              const sortIndex = resolvedSorts ? resolvedSorts.findIndex(s => s.key === col.key) : -1;\n\n              return (\n                <th\n                  key={col.key}\n                  data-sortable={isSortable ? '' : undefined}\n                  data-sorted={isActive ? '' : undefined}\n                  data-align={col.align}\n                  style={col.width ? { width: col.width } : undefined}\n                  aria-sort={isSortable ? getAriaSortValue(col.key, resolvedSorts) : undefined}\n                >\n                  {isSortable ? (\n                    <button type=\"button\" onClick={() => resolvedOnSort!(col.key)}>\n                      {col.header}\n                      {renderSortIndicator?.({\n                        active: isActive,\n                        direction: sortDesc?.direction ?? 'asc',\n                        index: sortIndex,\n                        onToggle: () => resolvedOnSort!(col.key),\n                      })}\n                    </button>\n                  ) : (\n                    col.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {displayItems.map((item, index) => {\n            const key = keyOf(item);\n            const isSelected = resolvedSelection?.selected.has(key);\n\n            const cells = (\n              <>\n                {resolvedSelection && (\n                  <td data-column=\"select\">\n                    <input\n                      type=\"checkbox\"\n                      checked={!!isSelected}\n                      onChange={() => resolvedSelection!.onToggle(key)}\n                      aria-label={`Select row ${key}`}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key}\n                    data-align={col.align}\n                  >\n                    {col.render(item, index)}\n                  </td>\n                ))}\n              </>\n            );\n\n            return (\n              <tr key={key} data-selected={isSelected ? '' : undefined}>\n                {renderRow ? renderRow(item, index, cells) : cells}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      {paginationInfo && renderPagination?.(paginationInfo)}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/react/components/InfiniteScroll.cjs

@@ -1,44 +1,53 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-function InfiniteScroll({
-  hasMore,
-  loading = false,
-  onLoadMore,
-  threshold = 0.1,
-  rootMargin = "0px",
-  direction = "down",
-  children,
-  renderLoading,
-  renderEnd,
-  className
-}) {
-  const sentinelRef = react.useRef(null);
-  const onLoadMoreRef = react.useRef(onLoadMore);
-  onLoadMoreRef.current = onLoadMore;
-  react.useEffect(() => {
-    if (typeof IntersectionObserver === "undefined") return;
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting) {
-          onLoadMoreRef.current();
-        }
-      },
-      { threshold, rootMargin }
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [threshold, rootMargin, hasMore, loading]);
-  const style = direction === "up" ? { display: "flex", flexDirection: "column-reverse" } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-component": "infinite-scroll", className, style, children: [
-    children,
-    hasMore && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: sentinelRef, "aria-hidden": "true", "data-sentinel": true }),
-    loading && renderLoading?.(),
-    !hasMore && renderEnd?.()
-  ] });
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/react/components/InfiniteScroll.tsx
+/**
+* Headless infinite scroll wrapper using IntersectionObserver.
+* Renders a sentinel element that triggers `onLoadMore` when visible.
+* Use `direction="up"` for reverse-scroll chat UIs.
+*/
+function InfiniteScroll({ hasMore, loading = false, onLoadMore, threshold = .1, rootMargin = "0px", direction = "down", children, renderLoading, renderEnd, className }) {
+	const sentinelRef = (0, react.useRef)(null);
+	const onLoadMoreRef = (0, react.useRef)(onLoadMore);
+	onLoadMoreRef.current = onLoadMore;
+	(0, react.useEffect)(() => {
+		if (typeof IntersectionObserver === "undefined") return;
+		const sentinel = sentinelRef.current;
+		if (!sentinel) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) onLoadMoreRef.current();
+		}, {
+			threshold,
+			rootMargin
+		});
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		threshold,
+		rootMargin,
+		hasMore,
+		loading
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-component": "infinite-scroll",
+		className,
+		style: direction === "up" ? {
+			display: "flex",
+			flexDirection: "column-reverse"
+		} : void 0,
+		children: [
+			children,
+			hasMore && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: sentinelRef,
+				"aria-hidden": "true",
+				"data-sentinel": true
+			}),
+			loading && renderLoading?.(),
+			!hasMore && renderEnd?.()
+		]
+	});
 }
+//#endregion
 exports.InfiniteScroll = InfiniteScroll;
-//# sourceMappingURL=InfiniteScroll.cjs.map
+
+//# sourceMappingURL=InfiniteScroll.cjs.map

package/dist/react/components/InfiniteScroll.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfiniteScroll.cjs","sources":["../../../src/react/components/InfiniteScroll.tsx"],"sourcesContent":["import { useRef, useEffect, type ReactNode } from 'react';\n\n/** Props for the InfiniteScroll headless component. */\nexport interface InfiniteScrollProps {\n  hasMore: boolean;\n  loading?: boolean;\n  onLoadMore: () => void;\n  threshold?: number;\n  rootMargin?: string;\n  direction?: 'down' | 'up';\n  children: ReactNode;\n  renderLoading?: () => ReactNode;\n  renderEnd?: () => ReactNode;\n  className?: string;\n}\n\n/**\n * Headless infinite scroll wrapper using IntersectionObserver.\n * Renders a sentinel element that triggers `onLoadMore` when visible.\n * Use `direction=\"up\"` for reverse-scroll chat UIs.\n */\nexport function InfiniteScroll({\n  hasMore,\n  loading = false,\n  onLoadMore,\n  threshold = 0.1,\n  rootMargin = '0px',\n  direction = 'down',\n  children,\n  renderLoading,\n  renderEnd,\n  className,\n}: InfiniteScrollProps) {\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const onLoadMoreRef = useRef(onLoadMore);\n  onLoadMoreRef.current = onLoadMore;\n\n  useEffect(() => {\n    if (typeof IntersectionObserver === 'undefined') return;\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries[0]?.isIntersecting) {\n          onLoadMoreRef.current();\n        }\n      },\n      { threshold, rootMargin },\n    );\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [threshold, rootMargin, hasMore, loading]);\n\n  const style = direction === 'up'\n    ? { display: 'flex', flexDirection: 'column-reverse' as const }\n    : undefined;\n\n  return (\n    <div data-component=\"infinite-scroll\" className={className} style={style}>\n      {children}\n      {hasMore && !loading && (\n        <div ref={sentinelRef} aria-hidden=\"true\" data-sentinel />\n      )}\n      {loading && renderLoading?.()}\n      {!hasMore && renderEnd?.()}\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","jsx"],"mappings":";;;;AAqBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,cAAcA,MAAAA,OAAuB,IAAI;AAC/C,QAAM,gBAAgBA,MAAAA,OAAO,UAAU;AACvC,gBAAc,UAAU;AAExBC,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,yBAAyB,YAAa;AACjD,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,SAAU;AAEf,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,YAAI,QAAQ,CAAC,GAAG,gBAAgB;AAC9B,wBAAc,QAAA;AAAA,QAChB;AAAA,MACF;AAAA,MACA,EAAE,WAAW,WAAA;AAAA,IAAW;AAG1B,aAAS,QAAQ,QAAQ;AACzB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,WAAW,YAAY,SAAS,OAAO,CAAC;AAE5C,QAAM,QAAQ,cAAc,OACxB,EAAE,SAAS,QAAQ,eAAe,qBAClC;AAEJ,SACEC,2BAAAA,KAAC,OAAA,EAAI,kBAAe,mBAAkB,WAAsB,OACzD,UAAA;AAAA,IAAA;AAAA,IACA,WAAW,CAAC,WACXC,2BAAAA,IAAC,OAAA,EAAI,KAAK,aAAa,eAAY,QAAO,iBAAa,KAAA,CAAC;AAAA,IAEzD,WAAW,gBAAA;AAAA,IACX,CAAC,WAAW,YAAA;AAAA,EAAY,GAC3B;AAEJ;;"}
+{"version":3,"file":"InfiniteScroll.cjs","names":[],"sources":["../../../src/react/components/InfiniteScroll.tsx"],"sourcesContent":["import { useRef, useEffect, type ReactNode } from 'react';\n\n/** Props for the InfiniteScroll headless component. */\nexport interface InfiniteScrollProps {\n  hasMore: boolean;\n  loading?: boolean;\n  onLoadMore: () => void;\n  threshold?: number;\n  rootMargin?: string;\n  direction?: 'down' | 'up';\n  children: ReactNode;\n  renderLoading?: () => ReactNode;\n  renderEnd?: () => ReactNode;\n  className?: string;\n}\n\n/**\n * Headless infinite scroll wrapper using IntersectionObserver.\n * Renders a sentinel element that triggers `onLoadMore` when visible.\n * Use `direction=\"up\"` for reverse-scroll chat UIs.\n */\nexport function InfiniteScroll({\n  hasMore,\n  loading = false,\n  onLoadMore,\n  threshold = 0.1,\n  rootMargin = '0px',\n  direction = 'down',\n  children,\n  renderLoading,\n  renderEnd,\n  className,\n}: InfiniteScrollProps) {\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const onLoadMoreRef = useRef(onLoadMore);\n  onLoadMoreRef.current = onLoadMore;\n\n  useEffect(() => {\n    if (typeof IntersectionObserver === 'undefined') return;\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries[0]?.isIntersecting) {\n          onLoadMoreRef.current();\n        }\n      },\n      { threshold, rootMargin },\n    );\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [threshold, rootMargin, hasMore, loading]);\n\n  const style = direction === 'up'\n    ? { display: 'flex', flexDirection: 'column-reverse' as const }\n    : undefined;\n\n  return (\n    <div data-component=\"infinite-scroll\" className={className} style={style}>\n      {children}\n      {hasMore && !loading && (\n        <div ref={sentinelRef} aria-hidden=\"true\" data-sentinel />\n      )}\n      {loading && renderLoading?.()}\n      {!hasMore && renderEnd?.()}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAqBA,SAAgB,eAAe,EAC7B,SACA,UAAU,OACV,YACA,YAAY,IACZ,aAAa,OACb,YAAY,QACZ,UACA,eACA,WACA,aACsB;CACtB,MAAM,eAAA,GAAA,MAAA,QAAqC,KAAK;CAChD,MAAM,iBAAA,GAAA,MAAA,QAAuB,WAAW;AACxC,eAAc,UAAU;AAExB,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,OAAO,yBAAyB,YAAa;EACjD,MAAM,WAAW,YAAY;AAC7B,MAAI,CAAC,SAAU;EAEf,MAAM,WAAW,IAAI,sBAClB,YAAY;AACX,OAAI,QAAQ,IAAI,eACd,eAAc,SAAS;KAG3B;GAAE;GAAW;GAAY,CAC1B;AAED,WAAS,QAAQ,SAAS;AAC1B,eAAa,SAAS,YAAY;IACjC;EAAC;EAAW;EAAY;EAAS;EAAQ,CAAC;AAM7C,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,kBAAe;EAA6B;EAAkB,OALvD,cAAc,OACxB;GAAE,SAAS;GAAQ,eAAe;GAA2B,GAC7D,KAAA;YAGF;GACG;GACA,WAAW,CAAC,WACX,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,KAAK;IAAa,eAAY;IAAO,iBAAA;IAAgB,CAAA;GAE3D,WAAW,iBAAiB;GAC5B,CAAC,WAAW,aAAa;GACtB"}

package/dist/react/components/InfiniteScroll.js

@@ -1,44 +1,53 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
-function InfiniteScroll({
-  hasMore,
-  loading = false,
-  onLoadMore,
-  threshold = 0.1,
-  rootMargin = "0px",
-  direction = "down",
-  children,
-  renderLoading,
-  renderEnd,
-  className
-}) {
-  const sentinelRef = useRef(null);
-  const onLoadMoreRef = useRef(onLoadMore);
-  onLoadMoreRef.current = onLoadMore;
-  useEffect(() => {
-    if (typeof IntersectionObserver === "undefined") return;
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting) {
-          onLoadMoreRef.current();
-        }
-      },
-      { threshold, rootMargin }
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [threshold, rootMargin, hasMore, loading]);
-  const style = direction === "up" ? { display: "flex", flexDirection: "column-reverse" } : void 0;
-  return /* @__PURE__ */ jsxs("div", { "data-component": "infinite-scroll", className, style, children: [
-    children,
-    hasMore && !loading && /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true", "data-sentinel": true }),
-    loading && renderLoading?.(),
-    !hasMore && renderEnd?.()
-  ] });
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/InfiniteScroll.tsx
+/**
+* Headless infinite scroll wrapper using IntersectionObserver.
+* Renders a sentinel element that triggers `onLoadMore` when visible.
+* Use `direction="up"` for reverse-scroll chat UIs.
+*/
+function InfiniteScroll({ hasMore, loading = false, onLoadMore, threshold = .1, rootMargin = "0px", direction = "down", children, renderLoading, renderEnd, className }) {
+	const sentinelRef = useRef(null);
+	const onLoadMoreRef = useRef(onLoadMore);
+	onLoadMoreRef.current = onLoadMore;
+	useEffect(() => {
+		if (typeof IntersectionObserver === "undefined") return;
+		const sentinel = sentinelRef.current;
+		if (!sentinel) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) onLoadMoreRef.current();
+		}, {
+			threshold,
+			rootMargin
+		});
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		threshold,
+		rootMargin,
+		hasMore,
+		loading
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-component": "infinite-scroll",
+		className,
+		style: direction === "up" ? {
+			display: "flex",
+			flexDirection: "column-reverse"
+		} : void 0,
+		children: [
+			children,
+			hasMore && !loading && /* @__PURE__ */ jsx("div", {
+				ref: sentinelRef,
+				"aria-hidden": "true",
+				"data-sentinel": true
+			}),
+			loading && renderLoading?.(),
+			!hasMore && renderEnd?.()
+		]
+	});
 }
-export {
-  InfiniteScroll
-};
-//# sourceMappingURL=InfiniteScroll.js.map
+//#endregion
+export { InfiniteScroll };
+
+//# sourceMappingURL=InfiniteScroll.js.map