@uipath/apollo-vertex 1.2.0 → 1.3.0

package/dist/lib/i18n.d.ts

@@ -277,6 +277,7 @@ declare const localeLoaders: {
             scroll_to_bottom: string;
             search: string;
             search_frameworks: string;
+            search_input: string;
             secondary: string;
             select_a_framework: string;
             select_all: string;
@@ -643,6 +644,7 @@ declare const localeLoaders: {
         scroll_to_bottom: string;
         search: string;
         search_frameworks: string;
+        search_input: string;
         secondary: string;
         select_a_framework: string;
         select_all: string;

package/dist/lib/table-features.d.ts

@@ -0,0 +1,38 @@
+import { type Column, type ColumnDef, type FilterFn, type ReactTable, type Row, type RowData } from "@tanstack/react-table";
+export type { RowData };
+export declare const dataTableFeatures: {
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    rowExpandingFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    columnSizingFeature: import("@tanstack/react-table").TableFeature;
+    columnResizingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    };
+    filterFns: {
+        includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        arrIncludes: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        inDateRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        weakEquals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    };
+};
+export type DataTableFeatures = typeof dataTableFeatures;
+export type DataTableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<DataTableFeatures, TData, TValue>;
+export type DataTableRow<TData extends RowData> = Row<DataTableFeatures, TData>;
+export type DataTableColumn<TData extends RowData, TValue = unknown> = Column<DataTableFeatures, TData, TValue>;
+export type DataTableInstance<TData extends RowData> = ReactTable<DataTableFeatures, TData>;
+export type DataTableFilterFn<TData extends RowData> = FilterFn<DataTableFeatures, TData>;

package/dist/lib/table-features.js

@@ -0,0 +1,32 @@
+import { columnFilteringFeature, columnOrderingFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures } from "@tanstack/react-table";
+const dataTableFeatures = tableFeatures({
+    rowSortingFeature: rowSortingFeature,
+    columnFilteringFeature: columnFilteringFeature,
+    globalFilteringFeature: globalFilteringFeature,
+    rowPaginationFeature: rowPaginationFeature,
+    rowSelectionFeature: rowSelectionFeature,
+    rowExpandingFeature: rowExpandingFeature,
+    columnVisibilityFeature: columnVisibilityFeature,
+    columnOrderingFeature: columnOrderingFeature,
+    columnSizingFeature: columnSizingFeature,
+    columnResizingFeature: columnResizingFeature,
+    sortedRowModel: createSortedRowModel(),
+    filteredRowModel: createFilteredRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    expandedRowModel: createExpandedRowModel(),
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        text: sortFn_text,
+        datetime: sortFn_datetime,
+        basic: sortFn_basic
+    },
+    filterFns: {
+        includesString: filterFn_includesString,
+        inNumberRange: filterFn_inNumberRange,
+        equals: filterFn_equals,
+        arrIncludes: filterFn_arrIncludes,
+        inDateRange: filterFn_inDateRange,
+        weakEquals: filterFn_weakEquals
+    }
+});
+export { dataTableFeatures };

package/dist/locales/en.json

@@ -274,6 +274,7 @@
   "scroll_to_bottom": "Scroll to bottom",
   "search": "Search...",
   "search_frameworks": "Search frameworks",
+  "search_input": "Search",
   "secondary": "Secondary",
   "select_a_framework": "Select a framework",
   "select_all": "Select all",

package/dist/registry/calendar/calendar.js

@@ -34,10 +34,10 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
             caption_label: cn("select-none font-medium", "label" === captionLayout ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label),
             weekdays: cn("flex", defaultClassNames.weekdays),
-            weekday: cn("text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
+            weekday: cn("text-muted-foreground rounded-md flex-1 font-normal text-xs select-none", defaultClassNames.weekday),
             week: cn("flex w-full mt-2", defaultClassNames.week),
             week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
-            week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
+            week_number: cn("text-xs select-none text-muted-foreground", defaultClassNames.week_number),
             day: cn("relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
             range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
             range_middle: cn("rounded-none", defaultClassNames.range_middle),

package/dist/registry/command/command.js

@@ -5,6 +5,7 @@ import { SearchIcon } from "lucide-react";
 import "react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 function command_Command({ className, ...props }) {
     return /*#__PURE__*/ jsx(Command, {
         "data-slot": "command",
@@ -39,6 +40,7 @@ function CommandDialog({ title = "Command Palette", description = "Search for a
     });
 }
 function CommandInput({ className, ...props }) {
+    const { t } = useVertexTranslation();
     return /*#__PURE__*/ jsxs("div", {
         "data-slot": "command-input-wrapper",
         className: "flex h-9 items-center gap-2 border-b px-3",
@@ -48,6 +50,7 @@ function CommandInput({ className, ...props }) {
             }),
             /*#__PURE__*/ jsx(Command.Input, {
                 "data-slot": "command-input",
+                "aria-label": t("search_input"),
                 className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
                 ...props
             })

package/dist/registry/confidence-signal/confidence-signal-chip.js

@@ -5,7 +5,7 @@ import { SignalBars } from "./confidence-signal-bars.js";
 import { LEVEL_CONFIG } from "./confidence-signal-levels.js";
 function ConfidenceSignalChip({ level, label, accessibleLabel, animateIn = false, interactive = false, className, ...props }) {
     return /*#__PURE__*/ jsxs("button", {
-        className: cn("inline-flex items-center gap-1.5 text-xs font-semibold focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", LEVEL_CONFIG[level].textClass, interactive && "cursor-pointer", className),
+        className: cn("relative inline-flex items-center gap-1.5 text-xs font-semibold focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", "after:absolute after:top-1/2 after:left-1/2 after:size-full after:min-h-6 after:min-w-6 after:-translate-x-1/2 after:-translate-y-1/2", LEVEL_CONFIG[level].textClass, interactive && "cursor-pointer", className),
         "aria-label": accessibleLabel,
         ...props,
         type: "button",

package/dist/registry/data-table/data-table-column-header.d.ts

@@ -1,8 +1,9 @@
-import type { Column } from "@tanstack/react-table";
+import { type RowData } from "@tanstack/react-table";
 import * as React from "react";
-interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
-    column: Column<TData, TValue>;
+import type { DataTableColumn } from "../../lib/table-features";
+interface DataTableColumnHeaderProps<TData extends RowData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+    column: DataTableColumn<TData, TValue>;
     title: string;
 }
-declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableColumnHeader<TData extends RowData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export { DataTableColumnHeader };

package/dist/registry/data-table/data-table-column-header.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Subscribe } from "@tanstack/react-table";
 import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
 import "react";
 import { Button } from "../button/button.js";
@@ -16,29 +17,31 @@ function SortIcon({ sortDirection }) {
     });
 }
 function DataTableColumnHeader({ column, title, className }) {
-    "use no memo";
     if (!column.getCanSort()) return /*#__PURE__*/ jsx("div", {
         className: cn(className),
         children: title
     });
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "data-table-column-header",
-        className: cn("flex items-center gap-2", className),
-        children: /*#__PURE__*/ jsxs(Button, {
-            variant: "ghost",
-            size: "sm",
-            onClick: ()=>column.toggleSorting("asc" === column.getIsSorted()),
-            className: "group/sort gap-1.5 -mx-2.5 -my-1 px-2.5 text-xs font-semibold text-muted-foreground",
-            children: [
-                /*#__PURE__*/ jsx("span", {
-                    className: "truncate",
-                    children: title
-                }),
-                /*#__PURE__*/ jsx(SortIcon, {
-                    sortDirection: column.getIsSorted()
+    return /*#__PURE__*/ jsx(Subscribe, {
+        source: column.table.atoms.sorting,
+        children: ()=>/*#__PURE__*/ jsx("div", {
+                "data-slot": "data-table-column-header",
+                className: cn("flex items-center gap-2", className),
+                children: /*#__PURE__*/ jsxs(Button, {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: ()=>column.toggleSorting("asc" === column.getIsSorted()),
+                    className: "group/sort gap-1.5 -mx-2.5 -my-1 px-2.5 text-xs font-semibold text-muted-foreground",
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsx(SortIcon, {
+                            sortDirection: column.getIsSorted()
+                        })
+                    ]
                 })
-            ]
-        })
+            })
     });
 }
 export { DataTableColumnHeader };

package/dist/registry/data-table/data-table-expand-toggle.d.ts

@@ -1,12 +1,13 @@
-import type { Table as TanstackTable } from "@tanstack/react-table";
-interface DataTableExpandAllToggleProps<TData> {
-    table: TanstackTable<TData>;
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableInstance } from "../../lib/table-features";
+interface DataTableExpandAllToggleProps<TData extends RowData> {
+    table: DataTableInstance<TData>;
 }
 /**
  * Expand/collapse-all toggle for a data table's expand-column header. Reflects
  * and toggles the table's all-rows-expanded state, with distinct double-chevron
  * icons to set it apart from the per-row single-chevron expand controls.
  */
-declare function DataTableExpandAllToggle<TData>({ table, }: DataTableExpandAllToggleProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableExpandAllToggle<TData extends RowData>({ table, }: DataTableExpandAllToggleProps<TData>): import("react/jsx-runtime").JSX.Element;
 export { DataTableExpandAllToggle };
 export type { DataTableExpandAllToggleProps };

package/dist/registry/data-table/data-table-expand-toggle.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { ChevronsDownUp, ChevronsUpDown } from "lucide-react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 function DataTableExpandAllToggle({ table }) {
     const { t } = useVertexTranslation();
     const allExpanded = table.getIsAllRowsExpanded();

package/dist/registry/data-table/data-table-filters.d.ts

@@ -1,3 +1,4 @@
-import type { Row, RowData } from "@tanstack/react-table";
-export declare const dataTableGlobalFilterFn: (row: Row<RowData>, _columnId: string, filterValue: string) => boolean;
-export declare const dataTableFacetedFilterFn: (row: Row<RowData>, columnId: string, filterValue: unknown) => boolean;
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableRow } from "../../lib/table-features";
+export declare function dataTableGlobalFilterFn<TData extends RowData>(row: DataTableRow<TData>, _columnId: string, filterValue: string): boolean;
+export declare function dataTableFacetedFilterFn<TData extends RowData>(row: DataTableRow<TData>, columnId: string, filterValue: unknown): boolean;

package/dist/registry/data-table/data-table-filters.js

@@ -1,4 +1,4 @@
-const dataTableGlobalFilterFn = (row, _columnId, filterValue)=>{
+function dataTableGlobalFilterFn(row, _columnId, filterValue) {
     if (!filterValue) return true;
     const searchStr = filterValue.toLowerCase();
     return row.getVisibleCells().some((cell)=>{
@@ -7,10 +7,10 @@ const dataTableGlobalFilterFn = (row, _columnId, filterValue)=>{
         const displayValue = meta?.getFilterValue ? meta.getFilterValue(value, row) : "string" == typeof value ? value : "number" == typeof value || "boolean" == typeof value ? String(value) : "";
         return displayValue.toLowerCase().includes(searchStr);
     });
-};
-const dataTableFacetedFilterFn = (row, columnId, filterValue)=>{
+}
+function dataTableFacetedFilterFn(row, columnId, filterValue) {
     if (!filterValue || !Array.isArray(filterValue) || 0 === filterValue.length) return true;
     const cellValue = String(row.getValue(columnId) ?? "");
     return filterValue.includes(cellValue);
-};
+}
 export { dataTableFacetedFilterFn, dataTableGlobalFilterFn };

package/dist/registry/data-table/data-table-pagination.d.ts

@@ -1,8 +1,9 @@
-import type { Table as TanstackTable } from "@tanstack/react-table";
-interface DataTablePaginationProps<TData> {
-    table: TanstackTable<TData>;
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableInstance } from "../../lib/table-features";
+interface DataTablePaginationProps<TData extends RowData> {
+    table: DataTableInstance<TData>;
     paginationSizes?: number[];
     className?: string;
 }
-declare function DataTablePagination<TData>({ table, paginationSizes, className, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTablePagination<TData extends RowData>({ table, paginationSizes, className, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
 export { DataTablePagination };

package/dist/registry/data-table/data-table-pagination.js

@@ -1,19 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/select.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 function DataTablePagination({ table, paginationSizes = [
     10,
     25,
     50,
     100
 ], className }) {
-    "use no memo";
     const { t } = useVertexTranslation();
-    const { pageIndex, pageSize } = table.getState().pagination;
+    const { pageIndex, pageSize } = table.state.pagination;
     const totalRows = table.getFilteredRowModel().rows.length;
     const pageCount = table.getPageCount();
     const canPreviousPage = pageIndex > 0;

package/dist/registry/data-table/data-table-search.d.ts

@@ -1,8 +1,9 @@
-import type { Table as TanstackTable } from "@tanstack/react-table";
-interface DataTableSearchProps<TData> {
-    table: TanstackTable<TData>;
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableInstance } from "../../lib/table-features";
+interface DataTableSearchProps<TData extends RowData> {
+    table: DataTableInstance<TData>;
     placeholder?: string;
     className?: string;
 }
-declare function DataTableSearch<TData>({ table, placeholder, className, }: DataTableSearchProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableSearch<TData extends RowData>({ table, placeholder, className, }: DataTableSearchProps<TData>): import("react/jsx-runtime").JSX.Element;
 export { DataTableSearch };

package/dist/registry/data-table/data-table-search.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SearchIcon } from "lucide-react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Input } from "../input/input.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 function DataTableSearch({ table, placeholder, className }) {
     const { t } = useVertexTranslation();
     return /*#__PURE__*/ jsxs("div", {
@@ -17,7 +17,7 @@ function DataTableSearch({ table, placeholder, className }) {
                 placeholder: placeholder ?? t("search", {
                     defaultValue: "Search..."
                 }),
-                value: String(table.getState().globalFilter ?? ""),
+                value: String(table.state.globalFilter ?? ""),
                 onChange: (e)=>table.setGlobalFilter(e.target.value),
                 className: "w-full sm:w-80 md:w-96 pl-9 border-0"
             })

package/dist/registry/data-table/data-table-toolbar.d.ts

@@ -1,11 +1,12 @@
-import type { Table } from "@tanstack/react-table";
+import type { RowData } from "@tanstack/react-table";
 import type * as React from "react";
-interface DataTableToolbarProps<TData> {
-    table: Table<TData>;
+import type { DataTableInstance } from "../../lib/table-features";
+interface DataTableToolbarProps<TData extends RowData> {
+    table: DataTableInstance<TData>;
     className?: string;
     enableSearch?: boolean;
     enableViewOptions?: boolean;
     customContent?: React.ReactNode;
 }
-declare function DataTableToolbar<TData>({ table, className, enableSearch, enableViewOptions, customContent, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+declare function DataTableToolbar<TData extends RowData>({ table, className, enableSearch, enableViewOptions, customContent, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element | null;
 export { DataTableToolbar };

package/dist/registry/data-table/data-table-view-options.d.ts

@@ -1,7 +1,8 @@
-import type { Table as TanstackTable } from "@tanstack/react-table";
-interface DataTableViewOptionsProps<TData> {
-    table: TanstackTable<TData>;
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableInstance } from "../../lib/table-features";
+interface DataTableViewOptionsProps<TData extends RowData> {
+    table: DataTableInstance<TData>;
     className?: string;
 }
-declare function DataTableViewOptions<TData>({ table, className, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableViewOptions<TData extends RowData>({ table, className, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
 export { DataTableViewOptions };

package/dist/registry/data-table/data-table-view-options.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Columns3Icon } from "lucide-react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { SortableColumnList } from "./sortable-column-list.js";
 function DataTableViewOptions({ table, className }) {
     const { t } = useVertexTranslation();
     const allReorderableColumns = table.getAllColumns().filter((column)=>null != column.accessorFn && column.getCanHide());
-    const currentOrder = table.getState().columnOrder;
+    const currentOrder = table.state.columnOrder;
     const orderedColumns = ()=>{
         if (!currentOrder || 0 === currentOrder.length) return allReorderableColumns;
         const orderMap = new Map(currentOrder.map((id, index)=>[

package/dist/registry/data-table/data-table.d.ts

@@ -1,14 +1,15 @@
-import { type ColumnDef, type ColumnFiltersState, type ExpandedState, type FilterFn, type OnChangeFn, type PaginationState, type Row, type RowData, type RowSelectionState, type SortingState, type Table as TanstackTable, type VisibilityState } from "@tanstack/react-table";
+import { type ColumnFiltersState, type ColumnVisibilityState, type ExpandedState, type OnChangeFn, type PaginationState, type RowData, type RowSelectionState, type SortingState } from "@tanstack/react-table";
 import * as React from "react";
+import { type DataTableColumnDef, type DataTableFilterFn, type DataTableInstance, type DataTableRow } from "../../lib/table-features";
 declare module "@tanstack/react-table" {
-    interface ColumnMeta<TData extends RowData, TValue> {
+    interface ColumnMeta<TFeatures, TData extends RowData, TValue> {
         displayName?: string;
-        getFilterValue?: (value: unknown, row: Row<TData>) => string;
+        getFilterValue?: (value: unknown, row: DataTableRow<TData>) => string;
         overflowVisible?: boolean;
     }
 }
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
+interface DataTableProps<TData extends RowData, TValue = unknown> {
+    columns: DataTableColumnDef<TData, TValue>[];
     data: TData[];
     className?: string;
     isLoading?: boolean;
@@ -17,8 +18,8 @@ interface DataTableProps<TData, TValue> {
     onSortingChange: OnChangeFn<SortingState>;
     columnFilters: ColumnFiltersState;
     onColumnFiltersChange: OnChangeFn<ColumnFiltersState>;
-    columnVisibility: VisibilityState;
-    onColumnVisibilityChange: OnChangeFn<VisibilityState>;
+    columnVisibility: ColumnVisibilityState;
+    onColumnVisibilityChange: OnChangeFn<ColumnVisibilityState>;
     columnOrder: string[];
     onColumnOrderChange: OnChangeFn<string[]>;
     rowSelection?: RowSelectionState;
@@ -27,22 +28,22 @@ interface DataTableProps<TData, TValue> {
     onGlobalFilterChange: OnChangeFn<string>;
     pagination?: PaginationState;
     onPaginationChange?: OnChangeFn<PaginationState>;
-    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
-    globalFilterFn?: FilterFn<TData>;
+    getRowId?: (originalRow: TData, index: number, parent?: DataTableRow<TData>) => string;
+    globalFilterFn?: DataTableFilterFn<TData>;
     enableSearch?: boolean;
     enableViewOptions?: boolean;
     enableColumnResizing?: boolean;
-    toolbarContent?: (table: TanstackTable<TData>) => React.ReactNode;
+    toolbarContent?: (table: DataTableInstance<TData>) => React.ReactNode;
     noResultsMessage?: React.ReactNode;
     stickyHeader?: boolean;
     expanded?: ExpandedState;
     onExpandedChange?: OnChangeFn<ExpandedState>;
-    renderExpandedRow?: (row: Row<TData>) => React.ReactNode;
+    renderExpandedRow?: (row: DataTableRow<TData>) => React.ReactNode;
     getRowClassName?: (row: TData) => string;
     skeletonColumnWidths?: string[];
     plain?: boolean;
 }
-declare function DataTable<TData, TValue>({ columns, data, className, isLoading, onRowClick, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, rowSelection, onRowSelectionChange, globalFilter, onGlobalFilterChange, pagination, onPaginationChange, getRowId, globalFilterFn, enableSearch, enableViewOptions, enableColumnResizing, toolbarContent, noResultsMessage, stickyHeader, expanded, onExpandedChange, renderExpandedRow, getRowClassName, skeletonColumnWidths, plain, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<TData extends RowData, TValue = unknown>({ columns, data, className, isLoading, onRowClick, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, rowSelection, onRowSelectionChange, globalFilter, onGlobalFilterChange, pagination, onPaginationChange, getRowId, globalFilterFn, enableSearch, enableViewOptions, enableColumnResizing, toolbarContent, noResultsMessage, stickyHeader, expanded, onExpandedChange, renderExpandedRow, getRowClassName, skeletonColumnWidths, plain, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export { DataTable };
 export type { DataTableProps };
 /** @public */

package/dist/registry/data-table/data-table.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/react-table";
+import { flexRender, useTable } from "@tanstack/react-table";
 import { Fragment } from "react";
+import { dataTableFeatures } from "../../lib/table-features.js";
 import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
-import { useReactTableCompat } from "../use-data-table/useReactTableCompat.js";
 import { cn } from "../../lib/utils.js";
 import { DataTableExpandAllToggle } from "./data-table-expand-toggle.js";
 import { DataTablePagination } from "./data-table-pagination.js";
@@ -24,9 +24,10 @@ function DataTable({ columns, data, className, isLoading = false, onRowClick, so
                 pageIndex: 0
             });
     };
-    const table = useReactTableCompat({
+    const table = useTable({
+        features: dataTableFeatures,
         data,
-        columns,
+        columns: columns,
         onSortingChange,
         onColumnFiltersChange: (updater)=>{
             onColumnFiltersChange(updater);
@@ -42,8 +43,10 @@ function DataTable({ columns, data, className, isLoading = false, onRowClick, so
             resetPageIndex();
         },
         ...isPaginationEnabled && {
-            onPaginationChange,
-            getPaginationRowModel: getPaginationRowModel()
+            onPaginationChange
+        },
+        ...!isPaginationEnabled && {
+            manualPagination: true
         },
         ...onExpandedChange ? {
             onExpandedChange
@@ -51,12 +54,6 @@ function DataTable({ columns, data, className, isLoading = false, onRowClick, so
         ...getRowId ? {
             getRowId
         } : {},
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        ...renderExpandedRow ? {
-            getExpandedRowModel: getExpandedRowModel()
-        } : {},
         ...globalFilterFn ? {
             globalFilterFn
         } : {},

package/dist/registry/data-table/index.d.ts

@@ -1,8 +1,9 @@
-export type { ColumnDef, ColumnFiltersState, ExpandedState, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, Table as TanstackTable, VisibilityState, } from "@tanstack/react-table";
+export type { ColumnFiltersState, ColumnVisibilityState, ColumnVisibilityState as VisibilityState, ExpandedState, OnChangeFn, PaginationState, RowSelectionState, SortingState, } from "@tanstack/react-table";
+export { FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, } from "../filter-dropdown/index";
+export type { DataTableColumnDef as ColumnDef, DataTableInstance as TanstackTable, DataTableRow as Row, } from "../../lib/table-features";
 export type { DataTableProps } from "./data-table";
 export { DataTable } from "./data-table";
 export { DataTableColumnHeader } from "./data-table-column-header";
-export { FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, } from "../filter-dropdown/index";
 export { dataTableFacetedFilterFn, dataTableGlobalFilterFn, } from "./data-table-filters";
 export { DataTablePagination } from "./data-table-pagination";
 export { DataTableCell, DataTableRow } from "./data-table-row";

package/dist/registry/data-table/index.js

@@ -1,6 +1,6 @@
+import { FilterDropdown } from "../filter-dropdown/index.js";
 import { DataTable } from "./data-table.js";
 import { DataTableColumnHeader } from "./data-table-column-header.js";
-import { FilterDropdown } from "../filter-dropdown/index.js";
 import { dataTableFacetedFilterFn, dataTableGlobalFilterFn } from "./data-table-filters.js";
 import { DataTablePagination } from "./data-table-pagination.js";
 import { DataTableCell, DataTableRow } from "./data-table-row.js";

package/dist/registry/filter-dropdown/filter-dropdown.d.ts

@@ -1,5 +1,5 @@
-import type { Column } from "@tanstack/react-table";
 import { type ReactNode } from "react";
+import type { DataTableColumn, RowData } from "../../lib/table-features";
 interface FilterDropdownOption {
     label: string;
     value: string;
@@ -7,14 +7,14 @@ interface FilterDropdownOption {
         className?: string;
     }>;
 }
-interface FilterDropdownProps<TData = unknown, TValue = unknown> {
+interface FilterDropdownProps<TData extends RowData = RowData, TValue = unknown> {
     title: string;
     options: FilterDropdownOption[];
     className?: string;
     /** Multi-select (default) or single-select mode */
     multiSelect?: boolean;
     /** TanStack Table column integration (optional) */
-    column?: Column<TData, TValue>;
+    column?: DataTableColumn<TData, TValue>;
     /** Standalone value — used when no column is provided */
     value?: string[] | string;
     /** Standalone onChange — used when no column is provided */
@@ -56,6 +56,6 @@ interface FilterDropdownProps<TData = unknown, TValue = unknown> {
     /** Known options for selected values that may not be loaded yet (used for the trigger label) */
     selectedOptions?: FilterDropdownOption[];
 }
-declare function FilterDropdown<TData, TValue>({ title, options, className, multiSelect, column, value: valueProp, onChange: onChangeProp, enableSearch, searchThreshold, searchPlaceholder, noOptionsMessage, noResultsMessage, align, popoverWidth, isLoading, hasMore, onLoadMore, loadingMessage, onSearchChange, searchDebounceMs, error, errorMessage, onRetry, retryLabel, selectedOptions, }: FilterDropdownProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare function FilterDropdown<TData extends RowData = RowData, TValue = unknown>({ title, options, className, multiSelect, column, value: valueProp, onChange: onChangeProp, enableSearch, searchThreshold, searchPlaceholder, noOptionsMessage, noResultsMessage, align, popoverWidth, isLoading, hasMore, onLoadMore, loadingMessage, onSearchChange, searchDebounceMs, error, errorMessage, onRetry, retryLabel, selectedOptions, }: FilterDropdownProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export { FilterDropdown };
 export type { FilterDropdownOption, FilterDropdownProps };

package/dist/registry/filter-dropdown/filter-dropdown.js

@@ -2,12 +2,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
 import { useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
 import { Input } from "../input/input.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
 import { Separator } from "../separator/separator.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { FilterDropdownOptionRow } from "./filter-dropdown-option.js";
 import { FILTER_DROPDOWN_LIST_SLOT, FilterDropdownError, FilterDropdownLoadingMore, FilterDropdownSentinel, FilterDropdownSkeleton } from "./filter-dropdown-states.js";
 import { useFilterDropdownSearch } from "./use-filter-dropdown-search.js";

package/dist/registry/solution-tests/config.d.ts

@@ -1,5 +1,5 @@
-import type { ColumnDef, Table as TanstackTable } from "@tanstack/react-table";
 import type { ReactNode } from "react";
+import type { DataTableColumnDef, DataTableInstance } from "../../lib/table-features";
 import type { EvaluatorRenderers } from "./evaluators/registry";
 import type { ProcessOutputRenderers } from "./outputs/registry";
 import type { SolutionTest, SolutionTestRun } from "./types";
@@ -71,9 +71,9 @@ export type TrackSolutionTestEvent = UnionToIntersection<{
 /** Per-vertical presentation config; everything else is hard-coded in `constants`. */
 export interface SolutionTestsConfig {
     /** Columns inserted between the Test Name and Version columns. */
-    subjectColumns?: ColumnDef<SolutionTest>[];
+    subjectColumns?: DataTableColumnDef<SolutionTest>[];
     /** Custom content (e.g. faceted filters) rendered in the test-cases table toolbar. */
-    subjectToolbarContent?: (table: TanstackTable<SolutionTest>) => ReactNode;
+    subjectToolbarContent?: (table: DataTableInstance<SolutionTest>) => ReactNode;
     /** When set, the test name links to its subject. */
     getSubjectHref?: (test: SolutionTest) => string | undefined;
     /** Opens a run's details. The host owns the route + navigation; the view
@@ -98,8 +98,8 @@ export interface SolutionTestsConfig {
 }
 /** Config with defaults applied — what components read from context. */
 export interface ResolvedSolutionTestsConfig {
-    subjectColumns: ColumnDef<SolutionTest>[];
-    subjectToolbarContent?: (table: TanstackTable<SolutionTest>) => ReactNode;
+    subjectColumns: DataTableColumnDef<SolutionTest>[];
+    subjectToolbarContent?: (table: DataTableInstance<SolutionTest>) => ReactNode;
     getSubjectHref?: (test: SolutionTest) => string | undefined;
     onOpenRun?: (run: SolutionTestRun) => void;
     subjectNoun?: {

package/dist/registry/solution-tests/solution-tests-view.js

@@ -3,7 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "@tanstack/react-router";
 import { ChevronRightIcon, Play, PlayCircle, Square, Trash2 } from "lucide-react";
 import { useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Alert, AlertDescription } from "../alert/alert.js";
 import { Badge } from "../badge/badge.js";
 import { Button } from "../button/button.js";
@@ -15,6 +14,7 @@ import { Switch } from "../switch/switch.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs/tabs.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
 import { renderValueOrEmptyState } from "../../lib/renderValueOrEmptyState.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { defaultRunStatusLabels, defaultTestStatusLabels } from "./constants.js";
 import { useSolutionTestsConfig } from "./context.js";
 import { DeleteConfirmDialog } from "./delete-confirm-dialog.js";

package/dist/registry/table-chart/table-chart-view.js

@@ -1,9 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { columnVisibilityFeature, flexRender, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
+const tableChartFeatures = tableFeatures({
+    rowSortingFeature: rowSortingFeature,
+    columnVisibilityFeature: columnVisibilityFeature
+});
 function TableChart({ columns, rows, sort, onSortChange }) {
     const { t } = useVertexTranslation();
     const [sorting, setSorting] = useState(()=>sort ? [
@@ -43,7 +47,7 @@ function TableChart({ columns, rows, sort, onSortChange }) {
                 cell: ({ getValue })=>{
                     const value = getValue();
                     return /*#__PURE__*/ jsx("div", {
-                        className: "right" === column.align ? "text-right" : "text-left",
+                        className: "right" === column.align ? "text-right tabular-nums" : "text-left",
                         children: column.format(value)
                     });
                 }
@@ -51,10 +55,10 @@ function TableChart({ columns, rows, sort, onSortChange }) {
         columns,
         t
     ]);
-    const table = useReactTable({
+    const table = useTable({
+        features: tableChartFeatures,
         data: rows,
         columns: columnDefs,
-        getCoreRowModel: getCoreRowModel(),
         manualSorting: true,
         onSortingChange: (updater)=>{
             const newSorting = "function" == typeof updater ? updater(sorting) : updater;

package/dist/registry/timeline/timeline-marker.js

@@ -26,8 +26,8 @@ function TimelineMarker({ variant, initials, compact = false }) {
         case "user":
             return /*#__PURE__*/ jsx(MarkerCircle, {
                 compact: compact,
-                className: cn("bg-muted font-medium text-muted-foreground shadow-sm", compact ? "text-[9px]" : "text-xs"),
-                children: initials ?? "?"
+                className: "bg-muted text-xs font-medium text-muted-foreground shadow-sm",
+                children: (compact ? initials?.[0] : initials) ?? "?"
             });
         case "ai-upcoming":
         case "ai-suspended":

package/dist/registry/use-data-table/types.d.ts

@@ -1,6 +1,7 @@
-import type { ColumnDef } from "@tanstack/react-table";
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
 export type EntityRecord = Record<string, unknown>;
-export type ColumnDefWithAccessorKey<T> = ColumnDef<T> & {
+export type ColumnDefWithAccessorKey<T extends RowData> = DataTableColumnDef<T> & {
     accessorKey: string;
 };
 export interface Column {

package/dist/registry/use-data-table/useColumnVisibility.d.ts

@@ -1,10 +1,10 @@
-import type { OnChangeFn, VisibilityState } from "@tanstack/react-table";
+import type { ColumnVisibilityState, OnChangeFn } from "@tanstack/react-table";
 export interface UseColumnVisibilityOptions {
     storageKey: string;
     allColumnKeys: string[];
     defaultVisibleColumns: string[];
 }
 export declare function useColumnVisibility({ storageKey, allColumnKeys, defaultVisibleColumns, }: UseColumnVisibilityOptions): {
-    columnVisibility: VisibilityState;
-    onColumnVisibilityChange: OnChangeFn<VisibilityState>;
+    columnVisibility: ColumnVisibilityState;
+    onColumnVisibilityChange: OnChangeFn<ColumnVisibilityState>;
 };

package/dist/registry/use-data-table/useDataTable.d.ts

@@ -1,20 +1,21 @@
-import type { ColumnDef, ColumnFiltersState, RowSelectionState } from "@tanstack/react-table";
-export interface UseDataTableOptions<TData> {
+import type { ColumnFiltersState, RowData, RowSelectionState } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
+export interface UseDataTableOptions<TData extends RowData> {
     data: TData[];
-    columns: ColumnDef<TData>[];
+    columns: DataTableColumnDef<TData>[];
     isLoading?: boolean;
     storageKey: string;
     defaultColumnOrder?: string[];
     defaultVisibleColumns?: string[];
 }
-export declare function useDataTable<TData>({ data, columns, isLoading, storageKey, defaultColumnOrder: defaultColumnOrderProp, defaultVisibleColumns: defaultVisibleColumnsProp, }: UseDataTableOptions<TData>): {
+export declare function useDataTable<TData extends RowData>({ data, columns, isLoading, storageKey, defaultColumnOrder: defaultColumnOrderProp, defaultVisibleColumns: defaultVisibleColumnsProp, }: UseDataTableOptions<TData>): {
     data: TData[];
     isLoading: boolean;
-    columns: ColumnDef<TData>[];
+    columns: DataTableColumnDef<TData>[];
     sorting: import("@tanstack/react-table").SortingState;
     onSortingChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").SortingState>;
-    columnVisibility: import("@tanstack/react-table").VisibilityState;
-    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").VisibilityState>;
+    columnVisibility: import("@tanstack/react-table").ColumnVisibilityState;
+    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").ColumnVisibilityState>;
     columnOrder: string[];
     onColumnOrderChange: import("@tanstack/react-table").OnChangeFn<string[]>;
     columnFilters: ColumnFiltersState;

package/dist/registry/use-data-table/useEntityColumns.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnDef } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
 import type { Column, ColumnDefWithAccessorKey, EntityRecord, ExtraColumn, VssEntity } from "./types";
 export interface UseEntityColumnsOptions<TRecord extends EntityRecord = EntityRecord> {
     entity: VssEntity;
@@ -10,5 +10,5 @@ export interface UseEntityColumnsOptions<TRecord extends EntityRecord = EntityRe
 export declare function useEntityColumns<TRecord extends EntityRecord = EntityRecord>({ entity, systemFields, columnOrder: columnOrderProp, extraColumns, columnOverrides, }: UseEntityColumnsOptions<TRecord>): {
     allColumns: Column[];
     allColumnKeys: string[];
-    columns: ColumnDef<TRecord>[];
+    columns: DataTableColumnDef<TRecord>[];
 };

package/dist/registry/use-data-table/useEntityDataTable.d.ts

@@ -12,11 +12,11 @@ export interface UseEntityDataTableOptions<TRecord extends EntityRecord = Entity
 export declare function useEntityDataTable<TRecord extends EntityRecord = EntityRecord>({ entity, storageKey: storageKeyProp, initialVisibleColumnCount, systemFields, columnOrder: columnOrderProp, extraColumns, columnOverrides, }: UseEntityDataTableOptions<TRecord>): {
     data: Record<string, unknown>[];
     isLoading: boolean;
-    columns: import("@tanstack/react-table").ColumnDef<TRecord>[];
+    columns: import("../data-table").ColumnDef<TRecord>[];
     sorting: import("@tanstack/react-table").SortingState;
     onSortingChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").SortingState>;
-    columnVisibility: import("@tanstack/react-table").VisibilityState;
-    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").VisibilityState>;
+    columnVisibility: import("@tanstack/react-table").ColumnVisibilityState;
+    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").ColumnVisibilityState>;
     columnOrder: string[];
     onColumnOrderChange: import("@tanstack/react-table").OnChangeFn<string[]>;
     columnFilters: ColumnFiltersState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-vertex",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "UiPath Apollo Vertex design system components",
   "license": "MIT",
   "keywords": [
@@ -58,7 +58,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-store": "^0.11.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.3",
     "@types/luxon": "^3.7.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/skills/setup/SKILL.md

@@ -0,0 +1,123 @@
+---
+name: setup
+description: >
+  Use when adding @uipath/apollo-vertex to a React app, or when an app that
+  already depends on it is missing the Vertex stylesheet or the agent skill
+  setup. Covers peer dependencies, importing the Vertex CSS, setting up
+  TanStack Intent so agents load the Vertex skills, and adding a rule to the
+  project's agent instructions. Not for building UI: load
+  use-vertex-components for that.
+metadata:
+  purpose: >
+    Set up a React app to use Apollo Vertex and make its coding agents follow
+    the Vertex skills when they change UI.
+  type: lifecycle
+  library: '@uipath/apollo-vertex'
+sources:
+  - 'UiPath/apollo-ui:packages/apollo-vertex/package.json'
+  - 'UiPath/apollo-ui:packages/apollo-vertex/styles/tailwind.css'
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/getting-started.mdx'
+---
+
+# Set up Apollo Vertex
+
+Work from the project root and use the project's package manager (npm, pnpm,
+yarn or bun) for every install. Do each step, then run the completion check.
+
+## 1. Install the package and its peers
+
+Install `@uipath/apollo-vertex` if the project doesn't have it yet.
+
+Then read `peerDependencies` in
+`node_modules/@uipath/apollo-vertex/package.json` and make sure the app has
+every package listed there, in a version that matches the range. Also install
+every package listed in `peerDependenciesMeta`, even the ones marked optional
+or missing from `peerDependencies`: the package entry imports them, so the
+app's bundler fails to resolve the entry without them.
+
+- If the app already has a peer in a version outside the range, tell the user
+  about the conflict instead of upgrading it on your own.
+- Some `@uipath` peers are not on the public npm registry. If installing one
+  fails with a 404 or an authentication error, stop and ask the user for access
+  to UiPath's package registry. Do not install look-alike packages from npm.
+- If the app doesn't use Tailwind yet, set it up for the app's bundler with
+  Tailwind's own install guide: install the integration, such as
+  `@tailwindcss/vite`, and register it in the bundler config. Installing it is
+  not enough.
+
+## 2. Import the stylesheet
+
+Add these lines once to the app's main CSS file, the one that sets up Tailwind,
+and remove its own `@import "tailwindcss";` line. If the app has no CSS file
+yet, create one and import it from the app's entry point:
+
+```css
+@import "@uipath/apollo-vertex/tailwind.css";
+@source "./";
+```
+
+`tailwind.css` includes Tailwind, the Vertex theme and the classes the Vertex
+components use. Keep `@source "./";` and adjust the path if the CSS file is not
+next to the app's sources. Without it, Tailwind drops the classes used in the
+app's own files.
+
+## 3. Set up TanStack Intent
+
+[TanStack Intent](https://tanstack.com/intent) finds the skills that ship in
+`node_modules` and tells agents to load them.
+
+1. Add `@tanstack/intent` as a dev dependency.
+2. Add this to the project's `package.json`. If an `intent.skills` list already
+   exists, add `@uipath/apollo-vertex` to it instead of replacing it:
+
+   ```json
+   {
+     "intent": {
+       "skills": ["@uipath/apollo-vertex"]
+     }
+   }
+   ```
+
+3. Run `intent install` through the package manager, for example
+   `npx intent install` or `pnpm exec intent install`. It writes a skill
+   loading block into `AGENTS.md`, or into another agent instructions file that
+   already has one.
+4. Tell the user that you allowed agents to load the `@uipath/apollo-vertex`
+   skills, and that they can change this with `intent install --review` in a
+   terminal.
+
+Without the `intent.skills` entry, `intent install` stops and asks for
+permissions in an interactive terminal, which an agent can't answer.
+
+## 4. Add the Vertex rule to the agent instructions
+
+`intent install` printed which file it wrote the skill loading block to. The
+block starts with `<!-- intent-skills:start -->`. Add this section to that same
+file, right after the block:
+
+```markdown
+## UI
+
+This app uses Apollo Vertex (`@uipath/apollo-vertex`) for all UI. Before
+building or changing UI, run `intent list` and load the matching
+`@uipath/apollo-vertex` skills, then follow them.
+```
+
+Write the `intent` command the way the skill loading block does, for example
+`npm exec --no -- intent list`.
+
+If that file is `AGENTS.md`, make sure Claude Code reads it too: if the
+project has a `CLAUDE.md`, it must import `AGENTS.md` with an `@AGENTS.md` line,
+and if there is no `CLAUDE.md`, create one that contains only `@AGENTS.md`.
+
+## Completion
+
+- `intent list` shows `@uipath/apollo-vertex` with the `use-vertex-components`
+  skill.
+- One agent instructions file has both the skill loading block and the UI
+  section.
+- The app builds, and a Vertex component such as `Button` renders with Vertex
+  styling.
+
+Then tell the user what you changed, and load `use-vertex-components` before
+building any UI.

package/dist/registry/use-data-table/useReactTableCompat.d.ts

@@ -1,13 +0,0 @@
-import { type Table, useReactTable } from "@tanstack/react-table";
-/**
- * React Compiler compatibility wrapper for useReactTable.
- *
- * useReactTable returns a mutable object with a stable reference. The React
- * Compiler caches values by reference, so child components that receive the
- * table instance never see a "change" and skip re-renders. Spreading into a
- * new object on every render gives children a fresh reference while keeping
- * all methods intact (they are closures, not prototype methods).
- *
- * @see https://github.com/facebook/react/pull/31820
- */
-export declare function useReactTableCompat<TData>(options: Parameters<typeof useReactTable<TData>>[0]): Table<TData>;

package/dist/registry/use-data-table/useReactTableCompat.js

@@ -1,9 +0,0 @@
-"use client";
-import { useReactTable } from "@tanstack/react-table";
-function useReactTableCompat(options) {
-    "use no memo";
-    return {
-        ...useReactTable(options)
-    };
-}
-export { useReactTableCompat };