@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/table/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../../resources/js/table/components/table.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { getBulkActions } from \"../bulk\";\nimport { getRowActions, getRowKey } from \"../payload\";\nimport { getColumnGridTemplate, getQueryParams, getVisiblePages } from \"../query\";\nimport { useTable } from \"../use-table\";\nimport { useTableSelection } from \"../use-table-selection\";\nimport { BulkBar } from \"./bulk-bar\";\nimport { ColumnFilterControl } from \"./column-filter-control\";\nimport { ColumnHeader } from \"./column-header\";\nimport { FilterStackBar } from \"./filter-stack-bar\";\nimport { TablePagination } from \"./pagination\";\nimport { SortBar } from \"./sort-bar\";\nimport { TableActionNode } from \"./table-action-node\";\nimport { ColumnCell } from \"./table-cell\";\n\nconst TableComponent: RendererComponent<\"table\"> = ({ node }) => {\n  const {\n    columns,\n    rows,\n    pagination,\n    state,\n    filters,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  } = useTable(node);\n\n  const bulkActions = getBulkActions(node.props?.bulkActions);\n  const hasBulkActions = bulkActions.length > 0;\n  const rowEntries = rows.map((row, index) => ({\n    row,\n    actions: getRowActions(row),\n    key: getRowKey(row, index),\n  }));\n  const selection = useTableSelection(rowEntries.map((entry) => entry.key));\n\n  const currentPage = pagination.currentPage ?? state.page;\n  const lastPage = pagination.lastPage ?? currentPage;\n  const mode = pagination.mode ?? \"table\";\n  const visiblePages = getVisiblePages(currentPage, lastPage);\n  const hasNextPage = pagination.hasMore ?? currentPage < lastPage;\n  const hasActions = rowEntries.some((entry) => entry.actions.length > 0);\n  const striped = node.props?.striped === true;\n  const hasFilters = columns.some((column) => column.filter?.enabled);\n  const filterEntries = filters.map((clause, index) => ({ clause, index }));\n  const gridTemplateColumns = getColumnGridTemplate(columns, hasActions, hasBulkActions);\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className=\"overflow-x-auto rounded-lt-sm border border-lt-border\"\n    >\n      {hasBulkActions && selection.active && (\n        <BulkBar\n          actions={bulkActions}\n          selectedKeys={selection.selectedKeys}\n          allMatching={selection.allMatching}\n          total={pagination.total}\n          query={getQueryParams(state)}\n          canSelectAllMatching={\n            selection.allVisibleSelected &&\n            !selection.allMatching &&\n            pagination.total !== undefined &&\n            pagination.total > selection.selectedKeys.length\n          }\n          onSelectAllMatching={selection.selectAllMatching}\n          onCompleted={selection.clear}\n        />\n      )}\n      {filters.length > 0 && (\n        <FilterStackBar\n          filters={filters}\n          columns={columns}\n          processing={processing}\n          onRemove={removeFilter}\n        />\n      )}\n      {state.sorts.length > 0 && (\n        <SortBar columns={columns} state={state} processing={processing} onClear={clearSort} />\n      )}\n      <div className=\"w-max min-w-full text-sm\" role=\"table\">\n        <div className=\"border-b border-lt-border bg-lt-muted/50\" role=\"rowgroup\">\n          <div\n            className=\"hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]\"\n            role=\"row\"\n            style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n          >\n            {hasBulkActions && (\n              <div className=\"flex items-center px-4 py-3\" role=\"columnheader\">\n                <input\n                  type=\"checkbox\"\n                  aria-label=\"Select all rows\"\n                  checked={selection.allSelected}\n                  onChange={selection.toggleAll}\n                />\n              </div>\n            )}\n            {columns.map((column) => (\n              <ColumnHeader\n                column={column}\n                key={column.key}\n                processing={processing}\n                sort={sort}\n                state={state}\n              />\n            ))}\n            {hasActions && (\n              <div\n                className=\"px-4 py-3 text-right align-middle font-medium text-lt-muted-fg\"\n                role=\"columnheader\"\n              >\n                Actions\n              </div>\n            )}\n          </div>\n          {hasFilters && (\n            <div\n              className=\"hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]\"\n              role=\"row\"\n              style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n            >\n              {hasBulkActions && <div className=\"px-4 py-2\" role=\"cell\" />}\n              {columns.map((column) => (\n                <div key={column.key} className=\"px-4 py-2\" role=\"cell\">\n                  {column.filter?.enabled && (\n                    <ColumnFilterControl\n                      column={column}\n                      clauses={filterEntries.filter((entry) => entry.clause.field === column.key)}\n                      processing={processing}\n                      onAdd={addFilter}\n                      onUpdate={updateFilter}\n                      onRemove={removeFilter}\n                    />\n                  )}\n                </div>\n              ))}\n              {hasActions && <div className=\"px-4 py-2\" role=\"cell\" />}\n            </div>\n          )}\n        </div>\n        <div role=\"rowgroup\">\n          {!hasLoaded ? (\n            <div className=\"p-4 text-lt-muted-fg\" role=\"row\">\n              <div role=\"cell\">Loading rows...</div>\n            </div>\n          ) : (\n            rowEntries.map(({ row, actions, key }) => {\n              return (\n                <div\n                  key={key}\n                  className={`grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${\n                    striped ? \"odd:bg-lt-muted/30\" : \"\"\n                  }`}\n                  role=\"row\"\n                  style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n                >\n                  {hasBulkActions && (\n                    <div className=\"flex items-center p-4\" role=\"cell\">\n                      <input\n                        type=\"checkbox\"\n                        aria-label={`Select row ${key}`}\n                        checked={selection.isSelected(key)}\n                        onChange={() => selection.toggle(key)}\n                      />\n                    </div>\n                  )}\n                  {columns.map((column) => (\n                    <div key={column.key} className=\"grid gap-1 p-4 align-middle\" role=\"cell\">\n                      <span\n                        aria-hidden=\"true\"\n                        className=\"text-xs font-medium text-lt-muted-fg md:hidden\"\n                      >\n                        {column.label}\n                      </span>\n                      <ColumnCell column={column} row={row} />\n                    </div>\n                  ))}\n                  {actions.length > 0 && (\n                    <div\n                      className=\"flex items-center justify-start gap-2 p-4 md:justify-end\"\n                      role=\"cell\"\n                    >\n                      {actions.map((action, actionIndex) => (\n                        <TableActionNode\n                          key={action.key ?? action.id ?? actionIndex}\n                          node={action}\n                        />\n                      ))}\n                    </div>\n                  )}\n                </div>\n              );\n            })\n          )}\n        </div>\n      </div>\n      {hasLoaded && (\n        <TablePagination\n          pagination={pagination}\n          currentPage={currentPage}\n          processing={processing}\n          mode={mode}\n          hasNextPage={hasNextPage}\n          visiblePages={visiblePages}\n          infiniteLoaderRef={infiniteLoaderRef}\n          onPage={goToPage}\n          onLoadMore={loadMore}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default TableComponent;\n"],"mappings":"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"}
+{"version":3,"file":"table.js","names":[],"sources":["../../../resources/js/table/components/table.tsx"],"sourcesContent":["import { type ReactNode, useMemo } from \"react\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/use-column-resizing\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { Checkbox } from \"@lattice-php/lattice/core/components/checkbox\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { alignJustifyItems, alignText } from \"../align\";\nimport type { TableNode } from \"../types\";\nimport { getBulkActions } from \"../bulk\";\nimport { flattenColumns, getRowActions, getRowKey } from \"../payload\";\nimport {\n  getQueryParams,\n  getTableSizingColumns,\n  getTableUtilityTracks,\n  getVisiblePages,\n} from \"../query\";\nimport { useTable } from \"../use-table\";\nimport { useTableSelection } from \"../use-table-selection\";\nimport { BulkBar } from \"./bulk-bar\";\nimport { ColumnFilterControl } from \"./column-filter-control\";\nimport { ColumnHeader } from \"./column-header\";\nimport { FilterBar } from \"./filter-bar\";\nimport { FilterStackBar } from \"./filter-stack-bar\";\nimport { TablePagination } from \"./pagination\";\nimport { SortBar } from \"./sort-bar\";\nimport { TableActionNode } from \"./table-action-node\";\nimport { ColumnCell } from \"./table-cell\";\n\nconst TableComponent = ({ node }: { children?: ReactNode; node: TableNode }) => {\n  const { t } = useT(\"lattice\");\n  const {\n    columns,\n    rows,\n    pagination,\n    state,\n    filters,\n    tableFilters,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    setTableFilter,\n    resetFilters,\n    searchFilterOptions,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  } = useTable(node);\n\n  const bulkActions = useMemo(\n    () => getBulkActions(node.props?.bulkActions),\n    [node.props?.bulkActions],\n  );\n  const hasBulkActions = bulkActions.length > 0;\n  const rowEntries = useMemo(\n    () =>\n      rows.map((row, index) => ({ row, actions: getRowActions(row), key: getRowKey(row, index) })),\n    [rows],\n  );\n  const selection = useTableSelection(rowEntries.map((entry) => entry.key));\n\n  const columnsByKey = useMemo(\n    () => new Map(flattenColumns(columns).map((column) => [column.key, column])),\n    [columns],\n  );\n  const currentPage = pagination.currentPage ?? state.page;\n  const lastPage = pagination.lastPage ?? currentPage;\n  const mode = pagination.mode ?? \"table\";\n  const visiblePages = getVisiblePages(currentPage, lastPage);\n  const hasNextPage = pagination.hasMore ?? currentPage < lastPage;\n  const hasActions = rowEntries.some((entry) => entry.actions.length > 0);\n  const striped = node.props?.striped === true;\n  const hasFilters = columns.some((column) => column.filter?.enabled);\n  const filterEntries = filters.map((clause, index) => ({ clause, index }));\n  const filterDefinitions = useMemo(\n    () => (Array.isArray(node.props?.filters) ? node.props.filters : []),\n    [node.props?.filters],\n  );\n  const hasActiveFilters = filters.length > 0 || Object.keys(tableFilters).length > 0;\n  const sizingColumns = useMemo(() => getTableSizingColumns(columns), [columns]);\n  const utilityTracks = useMemo(\n    () => getTableUtilityTracks(hasActions, hasBulkActions),\n    [hasActions, hasBulkActions],\n  );\n  const resizingEnabled = node.props?.resizableColumns === true;\n  const resizeStorageIdentity = nodeIdentity(node);\n  const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } =\n    useColumnResizing({\n      columns: sizingColumns,\n      enabled: resizingEnabled,\n      leadingTracks: utilityTracks.leadingTracks,\n      showIndicator: node.props?.resizeIndicator === true,\n      storageKey:\n        resizingEnabled && resizeStorageIdentity\n          ? `lattice:table-columns:${resizeStorageIdentity}`\n          : undefined,\n      trailingTracks: utilityTracks.trailingTracks,\n    });\n\n  return (\n    <div data-lattice-component={node.id} className=\"relative\">\n      {hasOverrides && (\n        <button\n          aria-label={t(\"a11y.resetColumnWidths\", \"Reset column widths\")}\n          className=\"absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex\"\n          data-test=\"table-reset-columns\"\n          onClick={resetColumns}\n          title={t(\"a11y.resetColumnWidths\", \"Reset column widths\")}\n          type=\"button\"\n        >\n          <Icon name=\"rotate-ccw\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n      <div className=\"overflow-x-auto rounded-lt-sm border border-lt-border\">\n        {filterDefinitions.length > 0 && (\n          <FilterBar\n            filters={filterDefinitions}\n            values={tableFilters}\n            processing={processing}\n            hasActiveFilters={hasActiveFilters}\n            onChange={setTableFilter}\n            onReset={resetFilters}\n            onSearch={searchFilterOptions}\n          />\n        )}\n        {hasBulkActions && selection.active && (\n          <BulkBar\n            actions={bulkActions}\n            selectedKeys={selection.selectedKeys}\n            allMatching={selection.allMatching}\n            total={pagination.total ?? undefined}\n            query={getQueryParams(state)}\n            canSelectAllMatching={\n              selection.allVisibleSelected &&\n              !selection.allMatching &&\n              pagination.total != null &&\n              pagination.total > selection.selectedKeys.length\n            }\n            onSelectAllMatching={selection.selectAllMatching}\n            onCompleted={selection.clear}\n          />\n        )}\n        {filters.length > 0 && (\n          <FilterStackBar\n            filters={filters}\n            columnsByKey={columnsByKey}\n            processing={processing}\n            onRemove={removeFilter}\n          />\n        )}\n        {state.sorts.length > 0 && (\n          <SortBar\n            columnsByKey={columnsByKey}\n            state={state}\n            processing={processing}\n            onClear={clearSort}\n          />\n        )}\n        <div className=\"min-w-full text-sm\" role=\"table\">\n          <div className=\"border-b border-lt-border bg-lt-muted/50\" role=\"rowgroup\">\n            <div\n              className=\"hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]\"\n              role=\"row\"\n              style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n            >\n              {hasBulkActions && (\n                <div className=\"flex items-center px-4 py-3\" role=\"columnheader\">\n                  <Checkbox\n                    aria-label={t(\"a11y.selectAllRows\", \"Select all rows\")}\n                    data-test=\"select-all\"\n                    checked={selection.allSelected}\n                    onCheckedChange={() => selection.toggleAll()}\n                  />\n                </div>\n              )}\n              {columns.map((column, index) => (\n                <ColumnHeader\n                  column={column}\n                  key={column.key}\n                  processing={processing}\n                  resizeHandleProps={\n                    resizingEnabled ? getResizeHandleProps(sizingColumns[index]) : undefined\n                  }\n                  sort={sort}\n                  state={state}\n                />\n              ))}\n              {hasActions && (\n                <div\n                  className=\"px-4 py-3 text-right align-middle font-medium text-lt-muted-fg\"\n                  role=\"columnheader\"\n                >\n                  <span className=\"sr-only\">{node.props?.actionsLabel}</span>\n                </div>\n              )}\n            </div>\n            {hasFilters && (\n              <div\n                className=\"hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]\"\n                role=\"row\"\n                style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n              >\n                {hasBulkActions && <div className=\"px-4 py-2\" role=\"cell\" />}\n                {columns.map((column) => (\n                  <div key={column.key} className=\"min-w-0 px-2 py-2\" role=\"cell\">\n                    {column.filter?.enabled && (\n                      <ColumnFilterControl\n                        column={column}\n                        clauses={filterEntries.filter((entry) => entry.clause.field === column.key)}\n                        processing={processing}\n                        onAdd={addFilter}\n                        onUpdate={updateFilter}\n                        onRemove={removeFilter}\n                        onSearch={(query) => searchFilterOptions(column.key, query)}\n                      />\n                    )}\n                  </div>\n                ))}\n                {hasActions && <div className=\"px-4 py-2\" role=\"cell\" />}\n              </div>\n            )}\n          </div>\n          <div role=\"rowgroup\">\n            {!hasLoaded ? (\n              <div className=\"p-4 text-lt-muted-fg\" role=\"row\">\n                <div role=\"cell\">{t(\"table.loading\", \"Loading rows...\")}</div>\n              </div>\n            ) : rowEntries.length === 0 ? (\n              <div className=\"p-8 text-center text-lt-muted-fg\" role=\"row\">\n                <div role=\"cell\">{node.props?.emptyLabel}</div>\n              </div>\n            ) : (\n              rowEntries.map(({ row, actions, key }) => {\n                return (\n                  <div\n                    key={key}\n                    className={`grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${\n                      striped ? \"odd:bg-lt-muted/30\" : \"\"\n                    }`}\n                    role=\"row\"\n                    style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n                  >\n                    {hasBulkActions && (\n                      <div className=\"flex items-center p-4\" role=\"cell\">\n                        <Checkbox\n                          aria-label={t(\"a11y.selectRow\", \"Select row {{key}}\", { key })}\n                          data-test={`select-row-${key}`}\n                          checked={selection.isSelected(key)}\n                          onCheckedChange={() => selection.toggle(key)}\n                        />\n                      </div>\n                    )}\n                    {columns.map((column) => (\n                      <div\n                        key={column.key}\n                        className={cn(\n                          \"grid min-w-0 gap-1 p-4 align-middle\",\n                          alignText(column.align),\n                          alignJustifyItems(column.align),\n                        )}\n                        role=\"cell\"\n                      >\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"text-xs font-medium text-lt-muted-fg md:hidden\"\n                        >\n                          {column.label}\n                        </span>\n                        <div className=\"min-w-0 truncate\">\n                          <ColumnCell column={column} row={row} />\n                        </div>\n                      </div>\n                    ))}\n                    {actions.length > 0 && (\n                      <div\n                        className=\"flex items-center justify-start gap-2 p-4 md:justify-end\"\n                        role=\"cell\"\n                      >\n                        {actions.map((action, actionIndex) => (\n                          <TableActionNode\n                            key={action.key ?? action.id ?? actionIndex}\n                            node={action}\n                          />\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                );\n              })\n            )}\n          </div>\n        </div>\n        {hasLoaded && (\n          <TablePagination\n            pagination={pagination}\n            currentPage={currentPage}\n            processing={processing}\n            mode={mode}\n            hasNextPage={hasNextPage}\n            visiblePages={visiblePages}\n            infiniteLoaderRef={infiniteLoaderRef}\n            onPage={goToPage}\n            onLoadMore={loadMore}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default TableComponent;\n"],"mappings":"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"}

package/dist/table/filter-values.d.ts

@@ -0,0 +1,13 @@
+import { FilterData, Option } from '../types/generated';
+/**
+ * Whether a table-filter value should clear the filter rather than apply it —
+ * an empty string, empty list, or an object whose every member is empty.
+ */
+export declare function isEmptyFilterValue(value: unknown): boolean;
+export declare function isActiveFilterValue(value: unknown): boolean;
+/**
+ * Read a string entry from a filter's loose `props` bag, falling back when the
+ * key is absent or not a string.
+ */
+export declare function stringProp(filter: FilterData, key: string, fallback: string): string;
+export declare function filterOptions(filter: FilterData): Option[];

package/dist/table/filter-values.js

@@ -0,0 +1,30 @@
+//#region resources/js/table/filter-values.ts
+/**
+* Whether a table-filter value should clear the filter rather than apply it —
+* an empty string, empty list, or an object whose every member is empty.
+*/
+function isEmptyFilterValue(value) {
+	if (value == null || value === "") return true;
+	if (Array.isArray(value)) return value.length === 0;
+	if (typeof value === "object") return Object.values(value).every((member) => member == null || member === "");
+	return false;
+}
+function isActiveFilterValue(value) {
+	return !isEmptyFilterValue(value);
+}
+/**
+* Read a string entry from a filter's loose `props` bag, falling back when the
+* key is absent or not a string.
+*/
+function stringProp(filter, key, fallback) {
+	const value = filter.props[key];
+	return typeof value === "string" ? value : fallback;
+}
+function filterOptions(filter) {
+	const value = filter.props.options;
+	return Array.isArray(value) ? value : [];
+}
+//#endregion
+export { filterOptions, isActiveFilterValue, isEmptyFilterValue, stringProp };
+
+//# sourceMappingURL=filter-values.js.map

package/dist/table/filter-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-values.js","names":[],"sources":["../../resources/js/table/filter-values.ts"],"sourcesContent":["import type { FilterData, Option } from \"@lattice-php/lattice/types/generated\";\n\n/**\n * Whether a table-filter value should clear the filter rather than apply it —\n * an empty string, empty list, or an object whose every member is empty.\n */\nexport function isEmptyFilterValue(value: unknown): boolean {\n  if (value == null || value === \"\") {\n    return true;\n  }\n\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n\n  if (typeof value === \"object\") {\n    return Object.values(value).every((member) => member == null || member === \"\");\n  }\n\n  return false;\n}\n\nexport function isActiveFilterValue(value: unknown): boolean {\n  return !isEmptyFilterValue(value);\n}\n\n/**\n * Read a string entry from a filter's loose `props` bag, falling back when the\n * key is absent or not a string.\n */\nexport function stringProp(filter: FilterData, key: string, fallback: string): string {\n  const value = filter.props[key];\n\n  return typeof value === \"string\" ? value : fallback;\n}\n\nexport function filterOptions(filter: FilterData): Option[] {\n  const value = filter.props.options;\n\n  return Array.isArray(value) ? (value as Option[]) : [];\n}\n"],"mappings":";;;;;AAMA,SAAgB,mBAAmB,OAAyB;CAC1D,IAAI,SAAS,QAAQ,UAAU,IAC7B,OAAO;CAGT,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO,MAAM,WAAW;CAG1B,IAAI,OAAO,UAAU,UACnB,OAAO,OAAO,OAAO,KAAK,EAAE,OAAO,WAAW,UAAU,QAAQ,WAAW,EAAE;CAG/E,OAAO;AACT;AAEA,SAAgB,oBAAoB,OAAyB;CAC3D,OAAO,CAAC,mBAAmB,KAAK;AAClC;;;;;AAMA,SAAgB,WAAW,QAAoB,KAAa,UAA0B;CACpF,MAAM,QAAQ,OAAO,MAAM;CAE3B,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEA,SAAgB,cAAc,QAA8B;CAC1D,MAAM,QAAQ,OAAO,MAAM;CAE3B,OAAO,MAAM,QAAQ,KAAK,IAAK,QAAqB,CAAC;AACvD"}

package/dist/table/format.js

@@ -1,7 +1,8 @@
 //#region resources/js/table/format.ts
 function formatCell(value, column) {
 	if (value === null || value === void 0) return "";
-	if (column?.date) return formatDate(value, column.date.format ?? null);
+	const date = (column?.props)?.date;
+	if (date) return formatDate(value, date.format ?? null);
 	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
 	return JSON.stringify(value);
 }
@@ -27,8 +28,9 @@ function formatDate(value, format) {
 	return format.replace(/[YymndjHGis]/g, (token) => replacements[token] ?? token);
 }
 function resolveLink(column, row, value) {
-	if (!column.link) return null;
-	const href = column.link.href ?? String(value ?? "");
+	const link = column.props?.link;
+	if (!link) return null;
+	const href = link.href ?? String(value ?? "");
 	if (href === "") return null;
 	return href.replace(/\{([^}]+)\}/g, (_, key) => {
 		if (key === "value") return encodeURIComponent(String(value ?? ""));

package/dist/table/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","names":[],"sources":["../../resources/js/table/format.ts"],"sourcesContent":["import type { TableColumn, TableRow } from \"./types\";\n\nexport function formatCell(value: unknown, column?: TableColumn): string {\n  if (value === null || value === undefined) {\n    return \"\";\n  }\n\n  if (column?.date) {\n    return formatDate(value, column.date.format ?? null);\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\" || typeof value === \"boolean\") {\n    return String(value);\n  }\n\n  return JSON.stringify(value);\n}\n\nfunction formatDate(value: unknown, format: string | null): string {\n  const date = new Date(String(value));\n\n  if (Number.isNaN(date.getTime())) {\n    return formatCell(value);\n  }\n\n  if (!format) {\n    return new Intl.DateTimeFormat(undefined, {\n      dateStyle: \"medium\",\n      timeStyle: \"short\",\n    }).format(date);\n  }\n\n  const replacements: Record<string, string> = {\n    Y: String(date.getFullYear()),\n    y: String(date.getFullYear()).slice(-2),\n    m: String(date.getMonth() + 1).padStart(2, \"0\"),\n    n: String(date.getMonth() + 1),\n    d: String(date.getDate()).padStart(2, \"0\"),\n    j: String(date.getDate()),\n    H: String(date.getHours()).padStart(2, \"0\"),\n    G: String(date.getHours()),\n    i: String(date.getMinutes()).padStart(2, \"0\"),\n    s: String(date.getSeconds()).padStart(2, \"0\"),\n  };\n\n  return format.replace(/[YymndjHGis]/g, (token) => replacements[token] ?? token);\n}\n\nexport function resolveLink(column: TableColumn, row: TableRow, value: unknown): string | null {\n  if (!column.link) {\n    return null;\n  }\n\n  const href = column.link.href ?? String(value ?? \"\");\n\n  if (href === \"\") {\n    return null;\n  }\n\n  return href.replace(/\\{([^}]+)\\}/g, (_, key: string) => {\n    if (key === \"value\") {\n      return encodeURIComponent(String(value ?? \"\"));\n    }\n\n    return encodeURIComponent(String(row[key] ?? \"\"));\n  });\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAAgB,QAA8B;CACvE,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO;CAGT,IAAI,QAAQ,MACV,OAAO,WAAW,OAAO,OAAO,KAAK,UAAU,IAAI;CAGrD,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,YAAY,OAAO,UAAU,WAC7E,OAAO,OAAO,KAAK;CAGrB,OAAO,KAAK,UAAU,KAAK;AAC7B;AAEA,SAAS,WAAW,OAAgB,QAA+B;CACjE,MAAM,OAAO,IAAI,KAAK,OAAO,KAAK,CAAC;CAEnC,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B,OAAO,WAAW,KAAK;CAGzB,IAAI,CAAC,QACH,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;EACxC,WAAW;EACX,WAAW;CACb,CAAC,EAAE,OAAO,IAAI;CAGhB,MAAM,eAAuC;EAC3C,GAAG,OAAO,KAAK,YAAY,CAAC;EAC5B,GAAG,OAAO,KAAK,YAAY,CAAC,EAAE,MAAM,EAAE;EACtC,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;EAC9C,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC;EAC7B,GAAG,OAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;EACzC,GAAG,OAAO,KAAK,QAAQ,CAAC;EACxB,GAAG,OAAO,KAAK,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;EAC1C,GAAG,OAAO,KAAK,SAAS,CAAC;EACzB,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;EAC5C,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;CAC9C;CAEA,OAAO,OAAO,QAAQ,kBAAkB,UAAU,aAAa,UAAU,KAAK;AAChF;AAEA,SAAgB,YAAY,QAAqB,KAAe,OAA+B;CAC7F,IAAI,CAAC,OAAO,MACV,OAAO;CAGT,MAAM,OAAO,OAAO,KAAK,QAAQ,OAAO,SAAS,EAAE;CAEnD,IAAI,SAAS,IACX,OAAO;CAGT,OAAO,KAAK,QAAQ,iBAAiB,GAAG,QAAgB;EACtD,IAAI,QAAQ,SACV,OAAO,mBAAmB,OAAO,SAAS,EAAE,CAAC;EAG/C,OAAO,mBAAmB,OAAO,IAAI,QAAQ,EAAE,CAAC;CAClD,CAAC;AACH"}
+{"version":3,"file":"format.js","names":[],"sources":["../../resources/js/table/format.ts"],"sourcesContent":["import type { ColumnPropsOf, TableColumn, TableRow } from \"./types\";\n\nexport function formatCell(value: unknown, column?: TableColumn): string {\n  if (value === null || value === undefined) {\n    return \"\";\n  }\n\n  const date = (column?.props as ColumnPropsOf<\"column.text\"> | null)?.date;\n\n  if (date) {\n    return formatDate(value, date.format ?? null);\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\" || typeof value === \"boolean\") {\n    return String(value);\n  }\n\n  return JSON.stringify(value);\n}\n\nfunction formatDate(value: unknown, format: string | null): string {\n  const date = new Date(String(value));\n\n  if (Number.isNaN(date.getTime())) {\n    return formatCell(value);\n  }\n\n  if (!format) {\n    return new Intl.DateTimeFormat(undefined, {\n      dateStyle: \"medium\",\n      timeStyle: \"short\",\n    }).format(date);\n  }\n\n  const replacements: Record<string, string> = {\n    Y: String(date.getFullYear()),\n    y: String(date.getFullYear()).slice(-2),\n    m: String(date.getMonth() + 1).padStart(2, \"0\"),\n    n: String(date.getMonth() + 1),\n    d: String(date.getDate()).padStart(2, \"0\"),\n    j: String(date.getDate()),\n    H: String(date.getHours()).padStart(2, \"0\"),\n    G: String(date.getHours()),\n    i: String(date.getMinutes()).padStart(2, \"0\"),\n    s: String(date.getSeconds()).padStart(2, \"0\"),\n  };\n\n  return format.replace(/[YymndjHGis]/g, (token) => replacements[token] ?? token);\n}\n\nexport function resolveLink(column: TableColumn, row: TableRow, value: unknown): string | null {\n  const link = (column.props as ColumnPropsOf<\"column.text\"> | null)?.link;\n\n  if (!link) {\n    return null;\n  }\n\n  const href = link.href ?? String(value ?? \"\");\n\n  if (href === \"\") {\n    return null;\n  }\n\n  return href.replace(/\\{([^}]+)\\}/g, (_, key: string) => {\n    if (key === \"value\") {\n      return encodeURIComponent(String(value ?? \"\"));\n    }\n\n    return encodeURIComponent(String(row[key] ?? \"\"));\n  });\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAAgB,QAA8B;CACvE,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO;CAGT,MAAM,QAAQ,QAAQ,QAA+C;CAErE,IAAI,MACF,OAAO,WAAW,OAAO,KAAK,UAAU,IAAI;CAG9C,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,YAAY,OAAO,UAAU,WAC7E,OAAO,OAAO,KAAK;CAGrB,OAAO,KAAK,UAAU,KAAK;AAC7B;AAEA,SAAS,WAAW,OAAgB,QAA+B;CACjE,MAAM,OAAO,IAAI,KAAK,OAAO,KAAK,CAAC;CAEnC,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B,OAAO,WAAW,KAAK;CAGzB,IAAI,CAAC,QACH,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;EACxC,WAAW;EACX,WAAW;CACb,CAAC,EAAE,OAAO,IAAI;CAGhB,MAAM,eAAuC;EAC3C,GAAG,OAAO,KAAK,YAAY,CAAC;EAC5B,GAAG,OAAO,KAAK,YAAY,CAAC,EAAE,MAAM,EAAE;EACtC,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;EAC9C,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC;EAC7B,GAAG,OAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;EACzC,GAAG,OAAO,KAAK,QAAQ,CAAC;EACxB,GAAG,OAAO,KAAK,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;EAC1C,GAAG,OAAO,KAAK,SAAS,CAAC;EACzB,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;EAC5C,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;CAC9C;CAEA,OAAO,OAAO,QAAQ,kBAAkB,UAAU,aAAa,UAAU,KAAK;AAChF;AAEA,SAAgB,YAAY,QAAqB,KAAe,OAA+B;CAC7F,MAAM,OAAQ,OAAO,OAA+C;CAEpE,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,OAAO,KAAK,QAAQ,OAAO,SAAS,EAAE;CAE5C,IAAI,SAAS,IACX,OAAO;CAGT,OAAO,KAAK,QAAQ,iBAAiB,GAAG,QAAgB;EACtD,IAAI,QAAQ,SACV,OAAO,mBAAmB,OAAO,SAAS,EAAE,CAAC;EAG/C,OAAO,mBAAmB,OAAO,IAAI,QAAQ,EAAE,CAAC;CAClD,CAAC;AACH"}

package/dist/table/index.d.ts

@@ -1 +1 @@
-export declare const tableComponents: import('../../../core/registry').Plugin;
+export declare const tableComponents: import('../core/registry').Plugin;

package/dist/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/table/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice/lattice/core/registry\";\n\nexport const tableComponents = createPlugin({\n  components: {\n    table: lazyComponent(() => import(\"./components/table\")),\n  },\n  name: \"lattice/table\",\n});\n"],"mappings":";;AAEA,IAAa,kBAAkB,aAAa;CAC1C,YAAY,EACV,OAAO,oBAAoB,OAAO,wBAAqB,EACzD;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/table/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice-php/lattice/core/types\";\n\nexport const tableComponents = createPlugin({\n  components: {\n    // The table renders an enriched TableNode (rows/pagination/state the server\n    // hydrates onto it); the registry erases per-component node types here.\n    table: lazyComponent(\n      () => import(\"./components/table\") as unknown as Promise<RendererComponentModule<\"table\">>,\n    ),\n  },\n  name: \"lattice/table\",\n});\n"],"mappings":";;AAGA,IAAa,kBAAkB,aAAa;CAC1C,YAAY,EAGV,OAAO,oBACC,OAAO,wBACf,EACF;CACA,MAAM;AACR,CAAC"}

package/dist/table/payload.d.ts

@@ -1,4 +1,4 @@
-import { Node } from '../../../core/types';
+import { Node } from '../core/types';
 import { TableColumn, TablePagination, TableRow, TableState } from './types';
 export declare function getColumns(value: unknown): TableColumn[];
 export declare function getRows(value: unknown): TableRow[];

package/dist/table/payload.js

@@ -11,8 +11,19 @@ function getRows(value) {
 	if (!Array.isArray(value)) return [];
 	return value.filter((row) => typeof row === "object" && row !== null && !Array.isArray(row));
 }
+var EMPTY_PAGINATION = {
+	mode: "none",
+	currentPage: null,
+	lastPage: null,
+	perPage: null,
+	total: null,
+	from: null,
+	to: null,
+	hasMore: false,
+	nextPage: null
+};
 function getPagination(value) {
-	if (typeof value !== "object" || value === null || Array.isArray(value)) return {};
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return EMPTY_PAGINATION;
 	return value;
 }
 function flattenColumns(columns) {
@@ -23,16 +34,26 @@ function getState(value) {
 		filters: [],
 		sorts: [],
 		page: 1,
-		perPage: 25
+		perPage: 25,
+		tableFilters: {}
 	};
 	const state = value;
 	return {
 		filters: getFilters(state.filters),
 		sorts: Array.isArray(state.sorts) ? state.sorts : [],
 		page: typeof state.page === "number" ? state.page : 1,
-		perPage: typeof state.perPage === "number" ? state.perPage : 25
+		perPage: typeof state.perPage === "number" ? state.perPage : 25,
+		tableFilters: getTableFilters(state.tableFilters)
 	};
 }
+/**
+* The wire serializes an empty filter map as `[]` and a populated one as an
+* object, so coerce both to a plain `key => value` record.
+*/
+function getTableFilters(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return {};
+	return value;
+}
 function getRowKey(row, index) {
 	const key = row.id ?? row.uuid ?? row.key ?? index;
 	return String(key);

package/dist/table/payload.js.map

@@ -1 +1 @@
-{"version":3,"file":"payload.js","names":[],"sources":["../../resources/js/table/payload.ts"],"sourcesContent":["import type { Node } from \"@lattice/lattice/core/types\";\nimport type { FilterClause, TableColumn, TablePagination, TableRow, TableState } from \"./types\";\n\nfunction getFilters(value: unknown): FilterClause[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (clause): clause is FilterClause =>\n      typeof clause === \"object\" &&\n      clause !== null &&\n      typeof clause.field === \"string\" &&\n      typeof clause.operator === \"string\" &&\n      typeof clause.value === \"string\",\n  );\n}\n\nexport function getColumns(value: unknown): TableColumn[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (column): column is TableColumn =>\n      typeof column === \"object\" &&\n      column !== null &&\n      \"key\" in column &&\n      \"label\" in column &&\n      typeof column.key === \"string\" &&\n      typeof column.label === \"string\",\n  );\n}\n\nexport function getRows(value: unknown): TableRow[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (row): row is TableRow => typeof row === \"object\" && row !== null && !Array.isArray(row),\n  );\n}\n\nexport function getPagination(value: unknown): TablePagination {\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n    return {};\n  }\n\n  return value as TablePagination;\n}\n\nexport function flattenColumns(columns: TableColumn[]): TableColumn[] {\n  return columns.flatMap((column) => [column, ...flattenColumns(column.columns ?? [])]);\n}\n\nexport function getState(value: unknown): TableState {\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n    return {\n      filters: [],\n      sorts: [],\n      page: 1,\n      perPage: 25,\n    };\n  }\n\n  const state = value as Partial<TableState>;\n\n  return {\n    filters: getFilters(state.filters),\n    sorts: Array.isArray(state.sorts) ? state.sorts : [],\n    page: typeof state.page === \"number\" ? state.page : 1,\n    perPage: typeof state.perPage === \"number\" ? state.perPage : 25,\n  };\n}\n\nexport function getRowKey(row: TableRow, index: number): string {\n  const key = row.id ?? row.uuid ?? row.key ?? index;\n\n  return String(key);\n}\n\nexport function getRowActions(row: TableRow): Node[] {\n  return Array.isArray(row.actions) ? (row.actions as Node[]) : [];\n}\n"],"mappings":";AAGA,SAAS,WAAW,OAAgC;CAClD,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,WACC,OAAO,WAAW,YAClB,WAAW,QACX,OAAO,OAAO,UAAU,YACxB,OAAO,OAAO,aAAa,YAC3B,OAAO,OAAO,UAAU,QAC5B;AACF;AAEA,SAAgB,WAAW,OAA+B;CACxD,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,WACC,OAAO,WAAW,YAClB,WAAW,QACX,SAAS,UACT,WAAW,UACX,OAAO,OAAO,QAAQ,YACtB,OAAO,OAAO,UAAU,QAC5B;AACF;AAEA,SAAgB,QAAQ,OAA4B;CAClD,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,QAAyB,OAAO,QAAQ,YAAY,QAAQ,QAAQ,CAAC,MAAM,QAAQ,GAAG,CACzF;AACF;AAEA,SAAgB,cAAc,OAAiC;CAC7D,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO,CAAC;CAGV,OAAO;AACT;AAEA,SAAgB,eAAe,SAAuC;CACpE,OAAO,QAAQ,SAAS,WAAW,CAAC,QAAQ,GAAG,eAAe,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;AACtF;AAEA,SAAgB,SAAS,OAA4B;CACnD,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO;EACL,SAAS,CAAC;EACV,OAAO,CAAC;EACR,MAAM;EACN,SAAS;CACX;CAGF,MAAM,QAAQ;CAEd,OAAO;EACL,SAAS,WAAW,MAAM,OAAO;EACjC,OAAO,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,CAAC;EACnD,MAAM,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO;EACpD,SAAS,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU;CAC/D;AACF;AAEA,SAAgB,UAAU,KAAe,OAAuB;CAC9D,MAAM,MAAM,IAAI,MAAM,IAAI,QAAQ,IAAI,OAAO;CAE7C,OAAO,OAAO,GAAG;AACnB;AAEA,SAAgB,cAAc,KAAuB;CACnD,OAAO,MAAM,QAAQ,IAAI,OAAO,IAAK,IAAI,UAAqB,CAAC;AACjE"}
+{"version":3,"file":"payload.js","names":[],"sources":["../../resources/js/table/payload.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { FilterClause, TableColumn, TablePagination, TableRow, TableState } from \"./types\";\n\nfunction getFilters(value: unknown): FilterClause[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (clause): clause is FilterClause =>\n      typeof clause === \"object\" &&\n      clause !== null &&\n      typeof clause.field === \"string\" &&\n      typeof clause.operator === \"string\" &&\n      typeof clause.value === \"string\",\n  );\n}\n\nexport function getColumns(value: unknown): TableColumn[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (column): column is TableColumn =>\n      typeof column === \"object\" &&\n      column !== null &&\n      \"key\" in column &&\n      \"label\" in column &&\n      typeof column.key === \"string\" &&\n      typeof column.label === \"string\",\n  );\n}\n\nexport function getRows(value: unknown): TableRow[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (row): row is TableRow => typeof row === \"object\" && row !== null && !Array.isArray(row),\n  );\n}\n\nconst EMPTY_PAGINATION: TablePagination = {\n  mode: \"none\",\n  currentPage: null,\n  lastPage: null,\n  perPage: null,\n  total: null,\n  from: null,\n  to: null,\n  hasMore: false,\n  nextPage: null,\n};\n\nexport function getPagination(value: unknown): TablePagination {\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n    return EMPTY_PAGINATION;\n  }\n\n  return value as TablePagination;\n}\n\nexport function flattenColumns(columns: TableColumn[]): TableColumn[] {\n  return columns.flatMap((column) => [column, ...flattenColumns(column.columns ?? [])]);\n}\n\nexport function getState(value: unknown): TableState {\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n    return {\n      filters: [],\n      sorts: [],\n      page: 1,\n      perPage: 25,\n      tableFilters: {},\n    };\n  }\n\n  const state = value as Partial<TableState>;\n\n  return {\n    filters: getFilters(state.filters),\n    sorts: Array.isArray(state.sorts) ? state.sorts : [],\n    page: typeof state.page === \"number\" ? state.page : 1,\n    perPage: typeof state.perPage === \"number\" ? state.perPage : 25,\n    tableFilters: getTableFilters(state.tableFilters),\n  };\n}\n\n/**\n * The wire serializes an empty filter map as `[]` and a populated one as an\n * object, so coerce both to a plain `key => value` record.\n */\nfunction getTableFilters(value: unknown): Record<string, unknown> {\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n    return {};\n  }\n\n  return value as Record<string, unknown>;\n}\n\nexport function getRowKey(row: TableRow, index: number): string {\n  const key = row.id ?? row.uuid ?? row.key ?? index;\n\n  return String(key);\n}\n\nexport function getRowActions(row: TableRow): Node[] {\n  return Array.isArray(row.actions) ? (row.actions as Node[]) : [];\n}\n"],"mappings":";AAGA,SAAS,WAAW,OAAgC;CAClD,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,WACC,OAAO,WAAW,YAClB,WAAW,QACX,OAAO,OAAO,UAAU,YACxB,OAAO,OAAO,aAAa,YAC3B,OAAO,OAAO,UAAU,QAC5B;AACF;AAEA,SAAgB,WAAW,OAA+B;CACxD,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,WACC,OAAO,WAAW,YAClB,WAAW,QACX,SAAS,UACT,WAAW,UACX,OAAO,OAAO,QAAQ,YACtB,OAAO,OAAO,UAAU,QAC5B;AACF;AAEA,SAAgB,QAAQ,OAA4B;CAClD,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,QAAyB,OAAO,QAAQ,YAAY,QAAQ,QAAQ,CAAC,MAAM,QAAQ,GAAG,CACzF;AACF;AAEA,IAAM,mBAAoC;CACxC,MAAM;CACN,aAAa;CACb,UAAU;CACV,SAAS;CACT,OAAO;CACP,MAAM;CACN,IAAI;CACJ,SAAS;CACT,UAAU;AACZ;AAEA,SAAgB,cAAc,OAAiC;CAC7D,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,eAAe,SAAuC;CACpE,OAAO,QAAQ,SAAS,WAAW,CAAC,QAAQ,GAAG,eAAe,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;AACtF;AAEA,SAAgB,SAAS,OAA4B;CACnD,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO;EACL,SAAS,CAAC;EACV,OAAO,CAAC;EACR,MAAM;EACN,SAAS;EACT,cAAc,CAAC;CACjB;CAGF,MAAM,QAAQ;CAEd,OAAO;EACL,SAAS,WAAW,MAAM,OAAO;EACjC,OAAO,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,CAAC;EACnD,MAAM,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO;EACpD,SAAS,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU;EAC7D,cAAc,gBAAgB,MAAM,YAAY;CAClD;AACF;;;;;AAMA,SAAS,gBAAgB,OAAyC;CAChE,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO,CAAC;CAGV,OAAO;AACT;AAEA,SAAgB,UAAU,KAAe,OAAuB;CAC9D,MAAM,MAAM,IAAI,MAAM,IAAI,QAAQ,IAAI,OAAO;CAE7C,OAAO,OAAO,GAAG;AACnB;AAEA,SAAgB,cAAc,KAAuB;CACnD,OAAO,MAAM,QAAQ,IAAI,OAAO,IAAK,IAAI,UAAqB,CAAC;AACjE"}

package/dist/table/query.d.ts

@@ -1,6 +1,6 @@
+import { ColumnWidth } from '../types/generated';
 import { TableColumn, TableSort, TableState } from './types';
 export declare function getColumnSort(state: TableState, column: TableColumn): TableSort | undefined;
-export declare function getSortColumn(columns: TableColumn[], sort: TableSort): TableColumn | undefined;
 export declare function getColumnAriaSort(sort: TableSort | undefined): "ascending" | "descending" | undefined;
 export declare function buildEndpoint(endpoint: string, state: TableState): string;
 export declare function getQueryParams(state: TableState): Record<string, unknown>;
@@ -9,4 +9,12 @@ export declare function operatorLabel(operator: string): string;
 export declare function getSortDirectionLabel(direction: string): string;
 export declare function nextSort(sorts: TableSort[], column: TableColumn): TableSort[];
 export declare function getVisiblePages(currentPage: number, lastPage: number): number[];
-export declare function getColumnGridTemplate(columns: TableColumn[], hasActions: boolean, hasSelection: boolean): string;
+export declare function getTableSizingColumns(columns: TableColumn[]): {
+    key: string;
+    label: string;
+    width: ColumnWidth;
+}[];
+export declare function getTableUtilityTracks(hasActions: boolean, hasSelection: boolean): {
+    leadingTracks: string[];
+    trailingTracks: string[];
+};

package/dist/table/query.js

@@ -1,11 +1,9 @@
-import { flattenColumns } from "./payload.js";
+import { translate } from "../i18n/instance.js";
+import "../core/column-sizing.js";
 //#region resources/js/table/query.ts
 function getColumnSort(state, column) {
 	return state.sorts.find((currentSort) => currentSort.key === column.key);
 }
-function getSortColumn(columns, sort) {
-	return flattenColumns(columns).find((column) => column.key === sort.key);
-}
 function getColumnAriaSort(sort) {
 	if (sort?.direction === "asc") return "ascending";
 	if (sort?.direction === "desc") return "descending";
@@ -14,14 +12,57 @@ function buildEndpoint(endpoint, state) {
 	const url = new URL(endpoint, window.location.origin);
 	if (state.filters.length > 0) url.searchParams.set("filter", serializeFilters(state));
 	if (state.sorts.length > 0) url.searchParams.set("sort", serializeSorts(state));
+	appendTableFilters(url, state.tableFilters);
 	url.searchParams.set("page", String(state.page));
 	url.searchParams.set("per_page", String(state.perPage));
 	return `${url.pathname}${url.search}`;
 }
+/**
+* Serialize the dedicated table filters as Laravel-native bracket params:
+* `tf[key]=v`, repeated `tf[key][]=v` for multi-value, and `tf[key][sub]=v`
+* for structured values (e.g. a date range's from/until). Empty values are
+* dropped so an unset filter never reaches the server.
+*/
+function appendTableFilters(url, tableFilters) {
+	for (const [key, value] of Object.entries(getTableFilterParams(tableFilters))) {
+		if (typeof value === "string") {
+			url.searchParams.set(`tf[${key}]`, value);
+			continue;
+		}
+		if (Array.isArray(value)) {
+			for (const item of value) if (item != null && item !== "") url.searchParams.append(`tf[${key}][]`, String(item));
+			continue;
+		}
+		if (typeof value === "object" && value !== null) for (const [subKey, subValue] of Object.entries(value)) url.searchParams.set(`tf[${key}][${subKey}]`, String(subValue));
+	}
+}
+function getTableFilterParams(tableFilters) {
+	const params = {};
+	for (const [key, value] of Object.entries(tableFilters)) {
+		const normalized = normalizeTableFilterValue(value);
+		if (normalized !== void 0) params[key] = normalized;
+	}
+	return params;
+}
+function normalizeTableFilterValue(value) {
+	if (value == null || value === "") return;
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) {
+		const items = value.filter((item) => item != null && item !== "").map(String);
+		return items.length > 0 ? items : void 0;
+	}
+	if (typeof value === "object") {
+		const entries = Object.entries(value).filter(([, subValue]) => subValue != null && subValue !== "").map(([subKey, subValue]) => [subKey, String(subValue)]);
+		return entries.length > 0 ? Object.fromEntries(entries) : void 0;
+	}
+	return String(value);
+}
 function getQueryParams(state) {
 	const params = {};
 	if (state.filters.length > 0) params.filter = serializeFilters(state);
 	if (state.sorts.length > 0) params.sort = serializeSorts(state);
+	const tableFilters = getTableFilterParams(state.tableFilters);
+	if (Object.keys(tableFilters).length > 0) params.tf = tableFilters;
 	return params;
 }
 function serializeFilters(state) {
@@ -40,6 +81,8 @@ var operatorLabels = {
 	gte: "≥",
 	lt: "<",
 	lte: "≤",
+	in: "in",
+	not_in: "not in",
 	before: "before",
 	after: "after",
 	empty: "is empty",
@@ -47,7 +90,7 @@ var operatorLabels = {
 };
 var VALUELESS_FILTER_OPERATORS = new Set(["empty", "filled"]);
 function operatorLabel(operator) {
-	return operatorLabels[operator] ?? operator;
+	return translate("lattice", `operators.${operator}`, operatorLabels[operator] ?? operator);
 }
 function getSortDirectionLabel(direction) {
 	return direction === "desc" ? "descending" : "ascending";
@@ -71,13 +114,23 @@ function getVisiblePages(currentPage, lastPage) {
 	const start = Math.max(1, Math.min(currentPage - 2, lastPage - 4));
 	return Array.from({ length: 5 }, (_, index) => start + index);
 }
-function getColumnGridTemplate(columns, hasActions, hasSelection) {
-	const tracks = columns.map((column) => column.type === "stack" ? "minmax(16rem, 2fr)" : "minmax(9rem, 1fr)");
-	if (hasActions) tracks.push("max-content");
-	if (hasSelection) tracks.unshift("max-content");
-	return tracks.join(" ");
+function getTableSizingColumns(columns) {
+	return columns.map((column) => ({
+		key: column.key,
+		label: column.label,
+		width: columnWidthOrDefault(column)
+	}));
+}
+function columnWidthOrDefault(column) {
+	return column.width ?? (column.type === "column.stack" ? "xl" : "md");
+}
+function getTableUtilityTracks(hasActions, hasSelection) {
+	return {
+		leadingTracks: hasSelection ? ["3rem"] : [],
+		trailingTracks: hasActions ? ["10rem"] : []
+	};
 }
 //#endregion
-export { VALUELESS_FILTER_OPERATORS, buildEndpoint, getColumnAriaSort, getColumnGridTemplate, getColumnSort, getQueryParams, getSortColumn, getSortDirectionLabel, getVisiblePages, nextSort, operatorLabel };
+export { VALUELESS_FILTER_OPERATORS, buildEndpoint, getColumnAriaSort, getColumnSort, getQueryParams, getSortDirectionLabel, getTableSizingColumns, getTableUtilityTracks, getVisiblePages, nextSort, operatorLabel };
 
 //# sourceMappingURL=query.js.map

package/dist/table/query.js.map

@@ -1 +1 @@
-{"version":3,"file":"query.js","names":[],"sources":["../../resources/js/table/query.ts"],"sourcesContent":["import { flattenColumns } from \"./payload\";\nimport type { TableColumn, TableSort, TableState } from \"./types\";\n\nexport function getColumnSort(state: TableState, column: TableColumn): TableSort | undefined {\n  return state.sorts.find((currentSort) => currentSort.key === column.key);\n}\n\nexport function getSortColumn(columns: TableColumn[], sort: TableSort): TableColumn | undefined {\n  return flattenColumns(columns).find((column) => column.key === sort.key);\n}\n\nexport function getColumnAriaSort(\n  sort: TableSort | undefined,\n): \"ascending\" | \"descending\" | undefined {\n  if (sort?.direction === \"asc\") {\n    return \"ascending\";\n  }\n\n  if (sort?.direction === \"desc\") {\n    return \"descending\";\n  }\n\n  return undefined;\n}\n\nexport function buildEndpoint(endpoint: string, state: TableState): string {\n  const url = new URL(endpoint, window.location.origin);\n\n  if (state.filters.length > 0) {\n    url.searchParams.set(\"filter\", serializeFilters(state));\n  }\n\n  if (state.sorts.length > 0) {\n    url.searchParams.set(\"sort\", serializeSorts(state));\n  }\n\n  url.searchParams.set(\"page\", String(state.page));\n  url.searchParams.set(\"per_page\", String(state.perPage));\n\n  return `${url.pathname}${url.search}`;\n}\n\nexport function getQueryParams(state: TableState): Record<string, unknown> {\n  const params: Record<string, unknown> = {};\n\n  if (state.filters.length > 0) {\n    params.filter = serializeFilters(state);\n  }\n\n  if (state.sorts.length > 0) {\n    params.sort = serializeSorts(state);\n  }\n\n  return params;\n}\n\nfunction serializeFilters(state: TableState): string {\n  return state.filters\n    .map((clause) => `${clause.field}:${clause.operator}:${encodeURIComponent(clause.value)}`)\n    .join(\",\");\n}\n\nfunction serializeSorts(state: TableState): string {\n  return state.sorts\n    .map((sort) => (sort.direction === \"desc\" ? `-${sort.key}` : sort.key))\n    .join(\",\");\n}\n\nconst operatorLabels: Record<string, string> = {\n  contains: \"contains\",\n  starts_with: \"starts with\",\n  ends_with: \"ends with\",\n  eq: \"equals\",\n  neq: \"not equals\",\n  gt: \">\",\n  gte: \"≥\",\n  lt: \"<\",\n  lte: \"≤\",\n  before: \"before\",\n  after: \"after\",\n  empty: \"is empty\",\n  filled: \"is not empty\",\n};\n\n// Operators that filter on presence alone and carry no value input.\nexport const VALUELESS_FILTER_OPERATORS = new Set<string>([\"empty\", \"filled\"]);\n\nexport function operatorLabel(operator: string): string {\n  return operatorLabels[operator] ?? operator;\n}\n\nexport function getSortDirectionLabel(direction: string): string {\n  return direction === \"desc\" ? \"descending\" : \"ascending\";\n}\n\nexport function nextSort(sorts: TableSort[], column: TableColumn): TableSort[] {\n  if (!column.sortable) {\n    return sorts;\n  }\n\n  const currentSort = sorts.find((sort) => sort.key === column.key);\n  const remainingSorts = sorts.filter((sort) => sort.key !== column.key);\n\n  if (!currentSort) {\n    return [...sorts, { key: column.key, direction: \"asc\" }];\n  }\n\n  if (currentSort.direction === \"asc\") {\n    return [...remainingSorts, { key: column.key, direction: \"desc\" }];\n  }\n\n  return remainingSorts;\n}\n\nexport function getVisiblePages(currentPage: number, lastPage: number): number[] {\n  if (lastPage <= 5) {\n    return Array.from({ length: lastPage }, (_, index) => index + 1);\n  }\n\n  const start = Math.max(1, Math.min(currentPage - 2, lastPage - 4));\n\n  return Array.from({ length: 5 }, (_, index) => start + index);\n}\n\nexport function getColumnGridTemplate(\n  columns: TableColumn[],\n  hasActions: boolean,\n  hasSelection: boolean,\n): string {\n  const tracks: string[] = columns.map((column) =>\n    column.type === \"stack\" ? \"minmax(16rem, 2fr)\" : \"minmax(9rem, 1fr)\",\n  );\n\n  if (hasActions) {\n    tracks.push(\"max-content\");\n  }\n\n  if (hasSelection) {\n    tracks.unshift(\"max-content\");\n  }\n\n  return tracks.join(\" \");\n}\n"],"mappings":"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"}
+{"version":3,"file":"query.js","names":[],"sources":["../../resources/js/table/query.ts"],"sourcesContent":["import { translate } from \"@lattice-php/lattice/i18n\";\nimport { DEFAULT_COLUMN_WIDTH } from \"@lattice-php/lattice/core/column-sizing\";\nimport type { ColumnWidth } from \"@lattice-php/lattice/types/generated\";\nimport type { TableColumn, TableSort, TableState } from \"./types\";\n\nexport function getColumnSort(state: TableState, column: TableColumn): TableSort | undefined {\n  return state.sorts.find((currentSort) => currentSort.key === column.key);\n}\n\nexport function getColumnAriaSort(\n  sort: TableSort | undefined,\n): \"ascending\" | \"descending\" | undefined {\n  if (sort?.direction === \"asc\") {\n    return \"ascending\";\n  }\n\n  if (sort?.direction === \"desc\") {\n    return \"descending\";\n  }\n\n  return undefined;\n}\n\nexport function buildEndpoint(endpoint: string, state: TableState): string {\n  const url = new URL(endpoint, window.location.origin);\n\n  if (state.filters.length > 0) {\n    url.searchParams.set(\"filter\", serializeFilters(state));\n  }\n\n  if (state.sorts.length > 0) {\n    url.searchParams.set(\"sort\", serializeSorts(state));\n  }\n\n  appendTableFilters(url, state.tableFilters);\n\n  url.searchParams.set(\"page\", String(state.page));\n  url.searchParams.set(\"per_page\", String(state.perPage));\n\n  return `${url.pathname}${url.search}`;\n}\n\n/**\n * Serialize the dedicated table filters as Laravel-native bracket params:\n * `tf[key]=v`, repeated `tf[key][]=v` for multi-value, and `tf[key][sub]=v`\n * for structured values (e.g. a date range's from/until). Empty values are\n * dropped so an unset filter never reaches the server.\n */\nfunction appendTableFilters(url: URL, tableFilters: Record<string, unknown>): void {\n  for (const [key, value] of Object.entries(getTableFilterParams(tableFilters))) {\n    if (typeof value === \"string\") {\n      url.searchParams.set(`tf[${key}]`, value);\n\n      continue;\n    }\n\n    if (Array.isArray(value)) {\n      for (const item of value) {\n        if (item != null && item !== \"\") {\n          url.searchParams.append(`tf[${key}][]`, String(item));\n        }\n      }\n\n      continue;\n    }\n\n    if (typeof value === \"object\" && value !== null) {\n      for (const [subKey, subValue] of Object.entries(value as Record<string, unknown>)) {\n        url.searchParams.set(`tf[${key}][${subKey}]`, String(subValue));\n      }\n    }\n  }\n}\n\nfunction getTableFilterParams(tableFilters: Record<string, unknown>): Record<string, unknown> {\n  const params: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(tableFilters)) {\n    const normalized = normalizeTableFilterValue(value);\n\n    if (normalized !== undefined) {\n      params[key] = normalized;\n    }\n  }\n\n  return params;\n}\n\nfunction normalizeTableFilterValue(value: unknown): unknown | undefined {\n  if (value == null || value === \"\") {\n    return undefined;\n  }\n\n  if (typeof value === \"string\") {\n    return value;\n  }\n\n  if (Array.isArray(value)) {\n    const items = value.filter((item) => item != null && item !== \"\").map(String);\n\n    return items.length > 0 ? items : undefined;\n  }\n\n  if (typeof value === \"object\") {\n    const entries = Object.entries(value)\n      .filter(([, subValue]) => subValue != null && subValue !== \"\")\n      .map(([subKey, subValue]) => [subKey, String(subValue)]);\n\n    return entries.length > 0 ? Object.fromEntries(entries) : undefined;\n  }\n\n  return String(value);\n}\n\nexport function getQueryParams(state: TableState): Record<string, unknown> {\n  const params: Record<string, unknown> = {};\n\n  if (state.filters.length > 0) {\n    params.filter = serializeFilters(state);\n  }\n\n  if (state.sorts.length > 0) {\n    params.sort = serializeSorts(state);\n  }\n\n  const tableFilters = getTableFilterParams(state.tableFilters);\n\n  if (Object.keys(tableFilters).length > 0) {\n    params.tf = tableFilters;\n  }\n\n  return params;\n}\n\nfunction serializeFilters(state: TableState): string {\n  return state.filters\n    .map((clause) => `${clause.field}:${clause.operator}:${encodeURIComponent(clause.value)}`)\n    .join(\",\");\n}\n\nfunction serializeSorts(state: TableState): string {\n  return state.sorts\n    .map((sort) => (sort.direction === \"desc\" ? `-${sort.key}` : sort.key))\n    .join(\",\");\n}\n\nconst operatorLabels: Record<string, string> = {\n  contains: \"contains\",\n  starts_with: \"starts with\",\n  ends_with: \"ends with\",\n  eq: \"equals\",\n  neq: \"not equals\",\n  gt: \">\",\n  gte: \"≥\",\n  lt: \"<\",\n  lte: \"≤\",\n  in: \"in\",\n  not_in: \"not in\",\n  before: \"before\",\n  after: \"after\",\n  empty: \"is empty\",\n  filled: \"is not empty\",\n};\n\nexport const VALUELESS_FILTER_OPERATORS = new Set<string>([\"empty\", \"filled\"]);\n\nexport function operatorLabel(operator: string): string {\n  return translate(\"lattice\", `operators.${operator}`, operatorLabels[operator] ?? operator);\n}\n\nexport function getSortDirectionLabel(direction: string): string {\n  return direction === \"desc\" ? \"descending\" : \"ascending\";\n}\n\nexport function nextSort(sorts: TableSort[], column: TableColumn): TableSort[] {\n  if (!column.sortable) {\n    return sorts;\n  }\n\n  const currentSort = sorts.find((sort) => sort.key === column.key);\n  const remainingSorts = sorts.filter((sort) => sort.key !== column.key);\n\n  if (!currentSort) {\n    return [...sorts, { key: column.key, direction: \"asc\" }];\n  }\n\n  if (currentSort.direction === \"asc\") {\n    return [...remainingSorts, { key: column.key, direction: \"desc\" }];\n  }\n\n  return remainingSorts;\n}\n\nexport function getVisiblePages(currentPage: number, lastPage: number): number[] {\n  if (lastPage <= 5) {\n    return Array.from({ length: lastPage }, (_, index) => index + 1);\n  }\n\n  const start = Math.max(1, Math.min(currentPage - 2, lastPage - 4));\n\n  return Array.from({ length: 5 }, (_, index) => start + index);\n}\n\nexport function getTableSizingColumns(columns: TableColumn[]) {\n  return columns.map((column) => ({\n    key: column.key,\n    label: column.label,\n    width: columnWidthOrDefault(column),\n  }));\n}\n\nfunction columnWidthOrDefault(column: TableColumn): ColumnWidth {\n  return (column.width ??\n    (column.type === \"column.stack\" ? \"xl\" : DEFAULT_COLUMN_WIDTH)) as ColumnWidth;\n}\n\nexport function getTableUtilityTracks(hasActions: boolean, hasSelection: boolean) {\n  // Utility tracks are fixed because the independent header/filter/body grids would drift with content-sized tracks.\n  return {\n    leadingTracks: hasSelection ? [\"3rem\"] : [],\n    trailingTracks: hasActions ? [\"10rem\"] : [],\n  };\n}\n"],"mappings":"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"}

package/dist/table/registry.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ColumnPropsOf, TableColumn, TableRow } from './types';
+export type ColumnCellArgs<TType extends string = string> = {
+    /** The full wire column (key, label, type, nested columns). */
+    column: TableColumn;
+    /** The column's `props`, resolved to the type's shape. */
+    props: ColumnPropsOf<TType>;
+    row: TableRow;
+    value: unknown;
+};
+export type ColumnCellComponent<TType extends string = string> = (args: ColumnCellArgs<TType>) => ReactNode;
+export type ColumnRegistry = Record<string, ColumnCellComponent>;
+/**
+ * Registers a typed column cell, erasing the type parameter so it fits the
+ * registry. Mirrors `eagerComponent`/`lazyComponent` for the component registry:
+ * author against `ColumnCellComponent<"my.type">` for typed `props`, register
+ * through this.
+ */
+export declare function columnCell<TType extends string>(cell: ColumnCellComponent<TType>): ColumnCellComponent;

package/dist/table/registry.js

@@ -0,0 +1,14 @@
+//#region resources/js/table/registry.ts
+/**
+* Registers a typed column cell, erasing the type parameter so it fits the
+* registry. Mirrors `eagerComponent`/`lazyComponent` for the component registry:
+* author against `ColumnCellComponent<"my.type">` for typed `props`, register
+* through this.
+*/
+function columnCell(cell) {
+	return cell;
+}
+//#endregion
+export { columnCell };
+
+//# sourceMappingURL=registry.js.map

package/dist/table/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/table/registry.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { ColumnPropsOf, TableColumn, TableRow } from \"./types\";\n\nexport type ColumnCellArgs<TType extends string = string> = {\n  /** The full wire column (key, label, type, nested columns). */\n  column: TableColumn;\n  /** The column's `props`, resolved to the type's shape. */\n  props: ColumnPropsOf<TType>;\n  row: TableRow;\n  value: unknown;\n};\n\nexport type ColumnCellComponent<TType extends string = string> = (\n  args: ColumnCellArgs<TType>,\n) => ReactNode;\n\nexport type ColumnRegistry = Record<string, ColumnCellComponent>;\n\n/**\n * Registers a typed column cell, erasing the type parameter so it fits the\n * registry. Mirrors `eagerComponent`/`lazyComponent` for the component registry:\n * author against `ColumnCellComponent<\"my.type\">` for typed `props`, register\n * through this.\n */\nexport function columnCell<TType extends string>(\n  cell: ColumnCellComponent<TType>,\n): ColumnCellComponent {\n  return cell as ColumnCellComponent;\n}\n"],"mappings":";;;;;;;AAwBA,SAAgB,WACd,MACqB;CACrB,OAAO;AACT"}

package/dist/table/types.d.ts

@@ -1,67 +1,53 @@
-import { ControlType, FilterOperator, PaginationType, TableSort } from '../../../generated/types';
-export type { TableSort };
-export type TableColumn = {
-    columns?: TableColumn[];
-    key: string;
-    label: string;
-    type?: "stack" | "text";
-    sortable?: boolean;
-    filter?: {
-        enabled?: boolean;
-        type?: ControlType;
-        operators?: FilterOperator[];
-        defaultOperator?: FilterOperator;
-    };
-    date?: {
-        format?: string | null;
-    };
-    copyable?: boolean;
-    link?: {
-        href?: string | null;
-        external?: boolean;
-    };
-};
+import { ResolveProps } from '../core/types';
+import { ActionNode, ColumnData, ColumnFilter, ColumnPropsMap, ColumnType, FilterClause as WireFilterClause, Op, Table, TablePagination, TableQuery, TableSort } from '../types/generated';
+export type { ColumnData, ColumnFilter, ColumnType, TablePagination, TableSort };
+export type TableColumn = ColumnData;
 export type TableRow = Record<string, unknown>;
-export type FilterClause = {
-    field: string;
-    operator: FilterOperator;
-    value: string;
+/**
+ * The wire types `operator` as a free string (validated server-side); on the
+ * client a clause always carries a known Op, built from a column's
+ * allowed operators.
+ */
+export type FilterClause = Omit<WireFilterClause, "operator"> & {
+    operator: Op;
 };
-export type TableState = {
+/**
+ * The wire `TableQuery` state, with `filters` narrowed to the client `FilterClause`
+ * (known `Op` operator) instead of the wire's free-string operator.
+ */
+export type TableState = Omit<TableQuery, "filters"> & {
     filters: FilterClause[];
-    sorts: TableSort[];
-    page: number;
-    perPage: number;
-};
-export type TablePagination = {
-    currentPage?: number;
-    hasMore?: boolean;
-    lastPage?: number;
-    mode?: PaginationType;
-    nextPage?: number | null;
-    perPage?: number;
-    total?: number;
-    from?: number | null;
-    to?: number | null;
 };
 export type TableResponse = {
     data?: TableRow[];
     pagination?: TablePagination;
     state?: Partial<TableState>;
 };
-declare module '../../../core/types' {
-    interface ComponentProps {
-        table: {
-            bulkActions?: Array<Record<string, unknown>>;
-            columns?: TableColumn[];
-            data?: TableRow[];
-            endpoint?: string;
-            ref?: string;
-            lazy?: boolean;
-            layout?: string;
-            striped?: boolean;
-            pagination?: Record<string, unknown>;
-            state?: Record<string, unknown>;
-        };
-    }
+/**
+ * The table node as it reaches the client: the generated wire props plus the
+ * rows, pagination, and state the server hydrates onto it for the initial render.
+ */
+export type TableNodeProps = Partial<Omit<Table, "bulkActions">> & {
+    bulkActions?: ActionNode[];
+    data?: TableRow[];
+    pagination?: TablePagination;
+    state?: Partial<TableState>;
+};
+export type TableNode = {
+    type: "table";
+    id?: string;
+    key?: string;
+    props?: TableNodeProps;
+};
+/**
+ * Augmentable map of column `type` string → props. Consumer apps extend it via
+ * `declare module "@lattice-php/lattice"` so their custom columns gain strong
+ * prop types; the entries are generated by `php artisan lattice:typescript`.
+ */
+export interface ColumnProps {
 }
+/**
+ * Resolves a column `type` to its props: consumer augmentations (`ColumnProps`)
+ * first, then the generated built-ins, then a loose bag.
+ */
+export type ColumnPropsOf<TType extends string> = ResolveProps<ColumnProps, ColumnPropsMap, TType, Record<string, unknown> | undefined>;

package/dist/table/use-table.d.ts

@@ -1,14 +1,18 @@
-import { Node } from '../../../core/types';
-import { FilterClause, TableColumn, TableSort, TableState } from './types';
-export declare function useTable(node: Node<"table">): {
-    columns: TableColumn[];
+import { Option } from '../types/generated';
+import { FilterClause, TableColumn, TableNode, TableSort, TableState } from './types';
+export declare function useTable(node: TableNode): {
+    columns: import('../types/generated').ColumnData[];
     rows: import('./types').TableRow[];
-    pagination: import('./types').TablePagination;
+    pagination: import('../types/generated').TablePagination;
     state: TableState;
     filters: FilterClause[];
+    tableFilters: Record<string, unknown>;
     addFilter: (clause: FilterClause) => void;
     updateFilter: (index: number, clause: FilterClause) => void;
     removeFilter: (index: number) => void;
+    setTableFilter: (key: string, value: unknown) => void;
+    resetFilters: () => void;
+    searchFilterOptions: (filterKey: string, query: string) => Promise<Option[]>;
     processing: boolean;
     hasLoaded: boolean;
     infiniteLoaderRef: import('react').RefObject<HTMLDivElement | null>;