@uipath/apollo-vertex 1.4.0 → 2.1.0

package/README.md

@@ -26,15 +26,10 @@ import { Button, DataTable } from "@uipath/apollo-vertex";
 Everything, including the app shell, charts, feature flags, Solution Tests and AI chat, is exported
 from the package root. Translation JSON files are available at `@uipath/apollo-vertex/locales/*`.
 
-npm 7+ and pnpm install the packages in `peerDependencies` automatically. Install these three
-yourself:
-
-- `@uipath/vs-core`
-- `@tanstack/react-db`
-- `@uipath/proteus-client`
-
-They are declared only in `peerDependenciesMeta` (as optional) so that pnpm does not try to install them
-in this workspace. The two `@uipath` packages are not on the public npm registry.
+The Proteus feature flag adapter, `createProteusProvider`, is exported from
+`@uipath/apollo-vertex/proteus` instead of the root. It needs `@uipath/proteus-client`, which is not on
+the public npm registry, so it is declared only in `peerDependenciesMeta` (as optional). Install it
+yourself if you import that subpath.
 
 ## Layout
 

package/dist/entries/index.d.ts

@@ -106,7 +106,6 @@ export { FeatureFlagGuard } from "../registry/feature-flag-guard/feature-flag-gu
 export { ProtectedFeatureRoute } from "../registry/protected-feature-route/protected-feature-route";
 export { useFeatureFlag } from "../registry/use-feature-flag/use-feature-flag";
 export type { FeatureFlagProviderConfig, FeatureFlagUserContext, } from "../registry/feature-flag-provider/types";
-export { createProteusProvider, type FlagMapping, type ProteusFeatureFlagValues, } from "../registry/feature-flag-provider/proteus-adapter";
 export { SolutionTestsView } from "../registry/solution-tests/solution-tests-view";
 export type { SolutionTestsViewProps } from "../registry/solution-tests/solution-tests-view";
 export { SaveAsTestButton } from "../registry/solution-tests/save-as-test-button";

package/dist/entries/index.js

@@ -27,7 +27,6 @@ import { FeatureFlagContext, FeatureFlagProvider, useFeatureFlagProvider } from
 import { FeatureFlagGuard } from "../registry/feature-flag-guard/feature-flag-guard.js";
 import { ProtectedFeatureRoute } from "../registry/protected-feature-route/protected-feature-route.js";
 import { useFeatureFlag } from "../registry/use-feature-flag/use-feature-flag.js";
-import { createProteusProvider } from "../registry/feature-flag-provider/proteus-adapter.js";
 import { SolutionTestsView } from "../registry/solution-tests/solution-tests-view.js";
 import { SaveAsTestButton } from "../registry/solution-tests/save-as-test-button.js";
 import { SolutionTestActionError } from "../registry/solution-tests/errors.js";
@@ -145,4 +144,4 @@ export * from "../registry/ai-chat/tools/data-fabric-line/index.js";
 export * from "../registry/ai-chat/tools/data-fabric-multi-line/index.js";
 export * from "../registry/ai-chat/tools/data-fabric-table/index.js";
 export * from "../registry/ai-chat/tools/data-fabric/index.js";
-export { AiChat, AiChatEmptyState, AiChatLoading, AiChatMarkdown, AiChatThinking, ApolloShell, AuthContext, AutopilotGradientIcon, BaselineCompare, CASE_EVALUATION_EVALUATOR_ID, CASE_EVALUATION_OUTPUT_RENDERER, CaseEvaluationDetailsSchema, CaseEvaluationOutputResult, CaseEvaluationOutputSchema, CheckboxField, EvaluationPairStatus, ExpandedAgents, ExpandedAgentsView, ExpandedRunTests, ExpandedRunTestsView, FeatureFlagContext, FeatureFlagGuard, FeatureFlagProvider, FieldError as FormFieldError, GENERIC_RENDERER, GroupMembershipGuard, IXP_EXTRACTION_EVALUATOR_ID, IXP_OUTPUT_RENDERER, IxpDetailsSchema, IxpDocStatus, IxpOutputResult, IxpOutputSchema, IxpVerdict, JSON_SIMILARITY_EVALUATOR_ID, JobRole, LLM_JUDGE_EVALUATOR_ID, LocaleProvider, MembershipDenied, NoDataMessage, ProcessOutputView, ProtectedFeatureRoute, RadioGroupField, Role, RunDetails, RunDetailsView, RunResultStatus, RunStatus, STALE_TIME_MS, STORAGE_KEYS, SUPPORTED_LOCALES, SaveAsTestButton, SelectField, ShellAuthProvider, ShellLayout, ShellLogin, ShellSidebar, ShellUserProvider, SolutionTestActionError, SolutionTestStatus, SolutionTests, SolutionTestsProvider, SolutionTestsView, SubmitButton, SummaryVerdict, SwitchField, TOKEN_QUERY_KEY, TextField, TextareaField, ThemeProvider, VerifyingMembership, VersionDeltaGlyph, addVertexTranslations, assertDateOrString, assertString, cn, configurei18n, createAgentHubConnection, createConversationalAgentConnection, createProteusProvider, ensureValidToken, genericRenderer, getStoredIdToken, getTokenQueryKey, login, logout, makeProcessOutputRenderer, makeRenderer, resolveEvaluatorRenderer, resolveProcessOutputRenderer, resolveReturnPath, toCodedAppFilePath, useAccessToken, useAdoptJob, useAppForm, useAuth, useBaselineJobs, useCreateTest, useDataTable, useDeleteTest, useEntityColumns, useEntityDataTable, useFeatureFlag, useFeatureFlagProvider, useFieldContext, useForceStopBatch, useForceStopRun, useFormContext, useGroupId, useGroupMembers, useIsGroupMember, useIsMobile, useJobExpectedOutput, useRemoveJobBaseline, useResultAttachment, useRunResults, useRunTests, useSolutionTestBatchRuns, useSolutionTestRuns, useSolutionTests, useSolutionTestsConfig, useSolutionTestsContext, useTheme, useToggleTestActive, useTranslatedErrors, useUpdateBaseline, useUser, versionDelta, withForm };
+export { AiChat, AiChatEmptyState, AiChatLoading, AiChatMarkdown, AiChatThinking, ApolloShell, AuthContext, AutopilotGradientIcon, BaselineCompare, CASE_EVALUATION_EVALUATOR_ID, CASE_EVALUATION_OUTPUT_RENDERER, CaseEvaluationDetailsSchema, CaseEvaluationOutputResult, CaseEvaluationOutputSchema, CheckboxField, EvaluationPairStatus, ExpandedAgents, ExpandedAgentsView, ExpandedRunTests, ExpandedRunTestsView, FeatureFlagContext, FeatureFlagGuard, FeatureFlagProvider, FieldError as FormFieldError, GENERIC_RENDERER, GroupMembershipGuard, IXP_EXTRACTION_EVALUATOR_ID, IXP_OUTPUT_RENDERER, IxpDetailsSchema, IxpDocStatus, IxpOutputResult, IxpOutputSchema, IxpVerdict, JSON_SIMILARITY_EVALUATOR_ID, JobRole, LLM_JUDGE_EVALUATOR_ID, LocaleProvider, MembershipDenied, NoDataMessage, ProcessOutputView, ProtectedFeatureRoute, RadioGroupField, Role, RunDetails, RunDetailsView, RunResultStatus, RunStatus, STALE_TIME_MS, STORAGE_KEYS, SUPPORTED_LOCALES, SaveAsTestButton, SelectField, ShellAuthProvider, ShellLayout, ShellLogin, ShellSidebar, ShellUserProvider, SolutionTestActionError, SolutionTestStatus, SolutionTests, SolutionTestsProvider, SolutionTestsView, SubmitButton, SummaryVerdict, SwitchField, TOKEN_QUERY_KEY, TextField, TextareaField, ThemeProvider, VerifyingMembership, VersionDeltaGlyph, addVertexTranslations, assertDateOrString, assertString, cn, configurei18n, createAgentHubConnection, createConversationalAgentConnection, ensureValidToken, genericRenderer, getStoredIdToken, getTokenQueryKey, login, logout, makeProcessOutputRenderer, makeRenderer, resolveEvaluatorRenderer, resolveProcessOutputRenderer, resolveReturnPath, toCodedAppFilePath, useAccessToken, useAdoptJob, useAppForm, useAuth, useBaselineJobs, useCreateTest, useDataTable, useDeleteTest, useEntityColumns, useEntityDataTable, useFeatureFlag, useFeatureFlagProvider, useFieldContext, useForceStopBatch, useForceStopRun, useFormContext, useGroupId, useGroupMembers, useIsGroupMember, useIsMobile, useJobExpectedOutput, useRemoveJobBaseline, useResultAttachment, useRunResults, useRunTests, useSolutionTestBatchRuns, useSolutionTestRuns, useSolutionTests, useSolutionTestsConfig, useSolutionTestsContext, useTheme, useToggleTestActive, useTranslatedErrors, useUpdateBaseline, useUser, versionDelta, withForm };

package/dist/entries/proteus.d.ts

@@ -0,0 +1 @@
+export { createProteusProvider, type FlagMapping, type ProteusFeatureFlagValues, } from "../registry/feature-flag-provider/proteus-adapter";

package/dist/entries/proteus.js

@@ -0,0 +1,2 @@
+import { createProteusProvider } from "../registry/feature-flag-provider/proteus-adapter.js";
+export { createProteusProvider };

package/dist/registry/solution-tests/use-solution-test-collection.d.ts

@@ -4,6 +4,7 @@
  * outside a SolutionProvider or when the named collection is not registered.
  */
 import type { Collection } from "@tanstack/react-db";
+import { useSolution } from "@uipath/vs-core";
 import { ENTITY } from "./constants";
 import type { SolutionTest, SolutionTestBatchRun, SolutionTestJob, SolutionTestRun, SolutionTestRunResult } from "./types";
 /** Row type stored in each Solution Tests collection, keyed by its entity name. */
@@ -14,5 +15,9 @@ type SolutionTestRow = {
     [ENTITY.jobs]: SolutionTestJob;
     [ENTITY.runResults]: SolutionTestRunResult;
 };
-export declare function useSolutionTestCollection<K extends keyof SolutionTestRow>(entity: K): Collection<SolutionTestRow[K]>;
+type SolutionTestCollection<T extends object> = Collection<T, string, {
+    refetch: () => Promise<void>;
+}>;
+export declare function getSolutionTestCollection<K extends keyof SolutionTestRow>(solution: ReturnType<typeof useSolution>, entity: K): SolutionTestCollection<SolutionTestRow[K]> | undefined;
+export declare function useSolutionTestCollection<K extends keyof SolutionTestRow>(entity: K): SolutionTestCollection<SolutionTestRow[K]>;
 export {};

package/dist/registry/solution-tests/use-solution-test-collection.js

@@ -1,11 +1,14 @@
 "use client";
 import { useSolution } from "@uipath/vs-core";
+function getSolutionTestCollection(solution, entity) {
+    const collections = solution.api.collections.solutionTests;
+    return collections[entity];
+}
 function useSolutionTestCollection(entity) {
     const solution = useSolution();
     if (!solution) throw new Error("useSolutionTestCollection must be used within a SolutionProvider.");
-    const selected = solution.api.collections.solutionTests[entity];
-    const collection = selected;
+    const collection = getSolutionTestCollection(solution, entity);
     if (!collection) throw new Error(`Solution Tests collection "${entity}" is unavailable.`);
     return collection;
 }
-export { useSolutionTestCollection };
+export { getSolutionTestCollection, useSolutionTestCollection };

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

@@ -4,7 +4,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useSolution } from "@uipath/vs-core";
 import { ENTITY } from "./constants.js";
 import { useSolutionTestsActions, useSolutionTestsConfig } from "./context.js";
-import { useSolutionTestCollection } from "./use-solution-test-collection.js";
+import { getSolutionTestCollection, useSolutionTestCollection } from "./use-solution-test-collection.js";
 function useSolutionTests() {
     const collection = useSolutionTestCollection(ENTITY.tests);
     const { data, isLoading } = useLiveQuery((q)=>q.from({
@@ -47,7 +47,7 @@ function useToggleTestActive() {
     const { track } = useSolutionTestsConfig();
     return useMutation({
         mutationFn: async ({ testId, isActive })=>{
-            const collection = solution?.api.collections.solutionTests[ENTITY.tests];
+            const collection = solution && getSolutionTestCollection(solution, ENTITY.tests);
             if (!collection) throw new Error("Solution Tests collection is unavailable.");
             const transaction = collection.update(testId, (draft)=>{
                 draft.IsActive = isActive;

package/dist/registry/sonner/sonner.js

@@ -2,7 +2,6 @@
 import { jsx } from "react/jsx-runtime";
 import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
 import { Toaster } from "sonner";
-import { useTheme } from "../shell/shell-theme-provider.js";
 const iconAlign = "[&>[data-icon]]:!items-start [&>[data-icon]>svg]:!mt-0.5";
 const statusTextClasses = "[&>[data-icon]>svg]:!text-[oklch(0.166_0.0283_203.34)] dark:[&>[data-icon]>svg]:!text-foreground [&_[data-title]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-title]]:!text-foreground [&_[data-description]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-description]]:!text-foreground [&_[data-close-button]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-close-button]]:!text-foreground";
 const apolloToastClassNames = {
@@ -10,12 +9,11 @@ const apolloToastClassNames = {
     success: `!border-success !bg-[color-mix(in_srgb,var(--success)_25%,var(--card)_75%)] dark:!bg-[color-mix(in_srgb,var(--success)_25%,var(--popover)_75%)] ${statusTextClasses} ${iconAlign}`,
     warning: `!border-warning !bg-[color-mix(in_srgb,var(--warning)_60%,var(--card)_40%)] dark:!bg-[color-mix(in_srgb,var(--warning)_60%,var(--popover)_40%)] ${statusTextClasses} ${iconAlign}`,
     error: `!border-destructive !bg-[color-mix(in_srgb,var(--destructive)_50%,var(--card)_50%)] dark:!bg-[color-mix(in_srgb,var(--destructive)_50%,var(--popover)_50%)] ${statusTextClasses} ${iconAlign}`,
-    closeButton: "!left-auto !right-2 !top-2 !transform-none !border-none !bg-transparent !rounded-sm"
+    description: "!text-popover-foreground",
+    cancelButton: "dark:!bg-white/30",
+    closeButton: "!left-auto !right-2 !top-2 !transform-none !border-none !bg-transparent !rounded-sm !text-popover-foreground"
 };
-const sonner_Toaster = ({ theme: _theme, ...props })=>{
-    const { resolvedTheme } = useTheme();
-    return /*#__PURE__*/ jsx(Toaster, {
-        theme: resolvedTheme,
+const sonner_Toaster = ({ theme: _theme, ...props })=>/*#__PURE__*/ jsx(Toaster, {
         className: "toaster group",
         position: "top-center",
         duration: 5000,
@@ -48,5 +46,4 @@ const sonner_Toaster = ({ theme: _theme, ...props })=>{
         },
         ...props
     });
-};
 export { sonner_Toaster as Toaster, apolloToastClassNames };

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

@@ -10,7 +10,12 @@ export interface UseEntityDataTableOptions<TRecord extends EntityRecord = Entity
     columnOverrides?: Record<string, (baseDef: ColumnDefWithAccessorKey<TRecord>) => ColumnDefWithAccessorKey<TRecord>>;
 }
 export declare function useEntityDataTable<TRecord extends EntityRecord = EntityRecord>({ entity, storageKey: storageKeyProp, initialVisibleColumnCount, systemFields, columnOrder: columnOrderProp, extraColumns, columnOverrides, }: UseEntityDataTableOptions<TRecord>): {
-    data: Record<string, unknown>[];
+    data: {
+        readonly $synced: boolean;
+        readonly $origin: import("@tanstack/react-db").VirtualOrigin;
+        readonly $key: string;
+        readonly $collectionId: string;
+    }[];
     isLoading: boolean;
     columns: import("../data-table").ColumnDef<TRecord>[];
     sorting: import("@tanstack/react-table").SortingState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-vertex",
-  "version": "1.4.0",
+  "version": "2.1.0",
   "description": "UiPath Apollo Vertex design system components",
   "license": "MIT",
   "keywords": [
@@ -17,6 +17,10 @@
       "types": "./dist/entries/index.d.ts",
       "default": "./dist/entries/index.js"
     },
+    "./proteus": {
+      "types": "./dist/entries/proteus.d.ts",
+      "default": "./dist/entries/proteus.js"
+    },
     "./theme.css": "./dist/theme.css",
     "./tailwind.css": "./dist/tailwind.css",
     "./locales/*": "./dist/locales/*"
@@ -80,10 +84,12 @@
   "peerDependencies": {
     "@tanstack/ai": "^0.14.0",
     "@tanstack/ai-client": "^0.8.0",
+    "@tanstack/react-db": "^0.1.83",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-router": "^1.132.31",
     "@ts-rest/core": "^3.53.0-rc.1",
     "@uipath/uipath-typescript": "^1.7.1",
+    "@uipath/vs-core": "^4.4.0",
     "eventsource-parser": "^3.0.6",
     "highlight.js": "^11.11.1",
     "i18next": "^25.8.1 || ^26.0.0",
@@ -100,14 +106,8 @@
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
-    "@tanstack/react-db": {
-      "optional": true
-    },
     "@uipath/proteus-client": {
       "optional": true
-    },
-    "@uipath/vs-core": {
-      "optional": true
     }
   },
   "devDependencies": {
@@ -116,8 +116,11 @@
     "@rslib/core": "^0.19.6",
     "@tanstack/ai": "0.14.0",
     "@tanstack/ai-client": "0.8.0",
+    "@tanstack/db": "0.6.5",
     "@tanstack/intent": "0.4.0",
-    "@tanstack/react-query": "^5.104.0",
+    "@tanstack/query-db-collection": "1.0.36",
+    "@tanstack/react-db": "0.1.83",
+    "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-router": "^1.170.40",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
@@ -126,6 +129,7 @@
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.2",
     "@uipath/uipath-typescript": "^1.8.0",
+    "@uipath/vs-core": "^4.5.0",
     "@vitest/coverage-v8": "^4.1.5",
     "dependency-cruiser": "^17.3.6",
     "eslint-plugin-react": "^7.37.5",

package/skills/setup/SKILL.md

@@ -30,14 +30,16 @@ 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.
+every package listed there, in a version that matches the range. Install
+`@uipath/proteus-client` only if the app uses Proteus feature flags (it imports
+`@uipath/apollo-vertex/proteus`).
 
 - 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
+- Pick the `@tanstack/react-db` release whose `@tanstack/db` dependency matches
+  the one `@tanstack/query-db-collection` uses in the app. Each release pins an
+  exact `@tanstack/db`, and two copies do not work together.
+- `@uipath/proteus-client` is not on the public npm registry. If installing it
   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

package/skills/use-vertex-components/SKILL.md

@@ -2,12 +2,11 @@
 name: use-vertex-components
 description: >
   Build all new UI from @uipath/apollo-vertex components instead of writing
-  new ones. Covers which Vertex component to use for common needs (buttons,
-  forms, dialogs, tables, page headers, empty states, charts, toasts), how to
-  adapt them with variants, className and composition, and what not to do:
-  hand-rolled primitives, raw Radix or other UI libraries, or copied shadcn
-  code. Load before building or changing any UI in an app that uses Apollo
-  Vertex.
+  new ones. Covers how to adapt them with variants, className and
+  composition, and what not to do: hand-rolled primitives, raw Radix or other
+  UI libraries, or copied shadcn code. Load before building or changing any
+  UI in an app that uses Apollo Vertex, together with
+  vertex-component-catalog to pick the component.
 metadata:
   type: core
   library: '@uipath/apollo-vertex'
@@ -41,23 +40,9 @@ components.
 
 ## Pick the component
 
-| Need | Use |
-| --- | --- |
-| Actions | `Button`, `ButtonGroup`, `Toggle`, `ToggleGroup` |
-| Text and choice inputs | `Input`, `InputGroup`, `Textarea`, `Select`, `Combobox`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `InputOTP` |
-| Dates | `DatePicker`, `Calendar` |
-| Form layout, labels and errors | `Field`, `FieldGroup`, `FieldLabel`, `FieldDescription`, `FieldError`, `Label` |
-| Multi-step forms | `FormWizard`, `Stepper` |
-| Overlays | `Dialog`, `AlertDialog`, `Sheet`, `Drawer`, `Popover`, `HoverCard`, `Tooltip` |
-| Menus | `DropdownMenu`, `ContextMenu`, `Menubar`, `Command`, `NavigationMenu` |
-| Page structure | `PageHeader`, `Breadcrumb`, `Tabs`, `Card`, `Separator`, `ResizablePanelGroup`, `ScrollArea`, `Sidebar` |
-| Lists and tables | `DataTable` with `useDataTable`, `Table`, `Item`, `Pagination` |
-| Status and feedback | `Badge`, `Alert`, `Toaster`, `Progress`, `Spinner`, `Skeleton`, `Empty` |
-| Metrics and charts | `MetricCard`, plus `BarChart`, `LineChart`, `KpiChart` and the other charts |
-| AI content | `AiMark`, `AiGlow`, `AiCaveat`, `ConfidenceSignal`, `FeedbackVoteWidget` |
-| Misc | `Avatar`, `Accordion`, `Collapsible`, `Carousel`, `TimelineRowLayout`, `Kbd`, `AspectRatio` |
-
-Import all of them from `@uipath/apollo-vertex`.
+Load the `vertex-component-catalog` skill to choose the component. It lists
+every documented Vertex component by need, with its exports, when to use it
+and what to use instead. Import all of them from `@uipath/apollo-vertex`.
 
 ## Adapting a component
 

package/skills/vertex-component-catalog/SKILL.md

@@ -0,0 +1,213 @@
+---
+name: vertex-component-catalog
+description: >
+  Catalog of every documented @uipath/apollo-vertex component and pattern,
+  grouped by need (actions, inputs, forms, overlays, menus, layout, data
+  display, feedback, charts), with the names to import, when to use each one
+  and which component to use instead. Load when choosing which Vertex
+  component to build a screen, form, dialog, table or state from.
+metadata:
+  type: core
+  library: '@uipath/apollo-vertex'
+sources:
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/components/*.mdx'
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/components/meta.json'
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/patterns/*.mdx'
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/patterns/meta.json'
+  - 'UiPath/apollo-ui:packages/apollo-vertex/entries/index.ts'
+---
+
+<!-- Generated by apps/apollo-vertex/scripts/generate-component-skill.ts from the
+docs pages. Do not edit by hand. -->
+
+# Apollo Vertex component catalog
+
+Import every name below from `@uipath/apollo-vertex`. Follow the
+`use-vertex-components` skill for how to use and adapt them.
+
+## Actions
+
+- **Button**: Displays a button or a component that looks like a button. Exports: `Button`, `buttonVariants`.
+  - Use when the user triggers an action, such as submitting a form, saving or opening a dialog.
+  - Avoid when the control turns a setting on or off. Use **Switch** instead.
+  - Avoid when the user picks one of a few modes or views. Use **Toggle Group** instead.
+- **Button Group**: Groups multiple buttons together with proper styling and spacing. Exports: `ButtonGroup`, `ButtonGroupSeparator`, `ButtonGroupText`, `buttonGroupVariants`.
+- **Toggle**: A two-state button that can be either on or off. Exports: `Toggle`, `toggleVariants`.
+- **Toggle Group**: A set of two-state buttons that can be toggled on or off. Exports: `ToggleGroup`, `ToggleGroupItem`.
+
+## Inputs
+
+- **Input**: Displays a form input field or a component that looks like an input field. Exports: `Input`.
+- **Input Group**: Groups input elements with addons and buttons. Exports: `InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupInput`, `InputGroupText`, `InputGroupTextarea`.
+- **Textarea**: Displays a form textarea or a component that looks like a textarea. Exports: `Textarea`.
+- **Select**: Displays a list of options for the user to pick from—triggered by a button. Exports: `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue`.
+- **Combobox**: An autocomplete input with a filterable list, supporting single and multi-select with badges. Exports: `Combobox`, `ComboboxBadge`, `ComboboxBadgeList`, `ComboboxContent`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxTrigger`.
+- **Checkbox**: A control that allows the user to toggle between checked and not checked. Exports: `Checkbox`.
+- **Radio Group**: A set of checkable buttons—known as radio buttons—where no more than one can be checked. Exports: `RadioGroup`, `RadioGroupItem`.
+- **Switch**: A control that allows the user to toggle between on and off. Exports: `Switch`.
+- **Slider**: An input where the user selects a value from within a given range. Exports: `Slider`.
+- **Input OTP**: Accessible one-time password component with copy paste functionality. Exports: `InputOTP`, `InputOTPGroup`, `InputOTPSeparator`, `InputOTPSlot`.
+- **Calendar**: A date field component that allows users to enter and edit dates. Exports: `Calendar`, `CalendarDayButton`.
+- **Date Picker**: A date picker component that allows users to select a date from a calendar popover. Exports: `DatePicker`.
+- **Filter Dropdown**: A versatile filter dropdown supporting multi-select, single-select, built-in search, and optional TanStack Table column integration. Use it in data table toolbars or as a standalone page-level filter. Exports: `FilterDropdown`.
+
+## Forms
+
+- **Form**: Exports: `CheckboxField`, `FormFieldError`, `RadioGroupField`, `SelectField`, `SubmitButton`, `SwitchField`, `TextareaField`, `TextField`, `useAppForm`, `useFieldContext`, `useFormContext`, `useTranslatedErrors`, `withForm`.
+- **Field**: A form field component with label, input, and description. Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`.
+- **Label**: Renders an accessible label associated with controls. Exports: `Label`.
+- **Form Wizard**: Exports: `FormWizard`, `FormWizardNav`, `FormWizardStep`, `FormWizardSteps`, `getVisibleSteps`, `useFormWizard`, `useFormWizardContext`.
+
+## Overlays
+
+- **Dialog**: A modal dialog that appears in front of app content to provide critical information. Exports: `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`.
+  - Use when the user must finish or dismiss a short, focused task before returning to the page, such as a small form or a single choice.
+  - Avoid when the content is a long form or a record's details, or the user needs to keep the page in view. Use **Sheet** instead.
+  - Avoid when the user confirms a destructive or irreversible action. Use **Alert Dialog** instead.
+  - Avoid when the content is a few extra controls or details anchored to a trigger. Use **Popover** instead.
+
+    ```tsx
+    import {
+      Button,
+      Dialog,
+      DialogContent,
+      DialogDescription,
+      DialogFooter,
+      DialogHeader,
+      DialogTitle,
+      DialogTrigger,
+    } from "@uipath/apollo-vertex";
+
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Rename</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Rename invoice</DialogTitle>
+          <DialogDescription>Everyone in the workspace sees the new name.</DialogDescription>
+        </DialogHeader>
+        {/* form fields */}
+        <DialogFooter>
+          <Button type="submit">Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+    ```
+
+- **Alert Dialog**: A modal dialog that interrupts the user with important content and expects a response. Exports: `AlertDialog`, `AlertDialogAction`, `AlertDialogCancel`, `AlertDialogContent`, `AlertDialogDescription`, `AlertDialogFooter`, `AlertDialogHeader`, `AlertDialogOverlay`, `AlertDialogPortal`, `AlertDialogTitle`, `AlertDialogTrigger`.
+  - Use when the user must confirm or cancel an action that is destructive or cannot be undone, such as deleting a record.
+  - Avoid when the dialog holds a form or other content beyond a confirm or cancel choice. Use **Dialog** instead.
+- **Sheet**: Extends the Dialog component to display content that complements the main content. Exports: `Sheet`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetTitle`, `SheetTrigger`.
+  - Use when the user views or edits a record, a long form, filters or settings in a side panel while the page stays in context.
+  - Avoid when the task is short and needs the user's full attention. Use **Dialog** instead.
+  - Avoid when the panel is for small screens and should slide up from the bottom and be dismissed with a swipe. Use **Drawer** instead.
+- **Drawer**: A drawer component that slides in from the edge of the screen. Exports: `Drawer`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`.
+  - Use when the screen is small and the panel should slide up from the bottom edge and close with a swipe.
+  - Avoid when the layout is for desktop and needs a side panel for details or a form. Use **Sheet** instead.
+- **Popover**: Displays rich content in a portal, triggered by a button. Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverTrigger`.
+- **Hover Card**: For sighted users to preview content available behind a link. Exports: `HoverCard`, `HoverCardContent`, `HoverCardTrigger`.
+- **Tooltip**: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Exports: `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`.
+
+## Menus
+
+- **Dropdown Menu**: Displays a menu to the user triggered by a button. Exports: `DropdownMenu`, `DropdownMenuCheckboxItem`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuPortal`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`.
+- **Context Menu**: Displays a menu to the user triggered by a right-click or long-press. Exports: `ContextMenu`, `ContextMenuCheckboxItem`, `ContextMenuContent`, `ContextMenuGroup`, `ContextMenuItem`, `ContextMenuLabel`, `ContextMenuPortal`, `ContextMenuRadioGroup`, `ContextMenuRadioItem`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuSub`, `ContextMenuSubContent`, `ContextMenuSubTrigger`, `ContextMenuTrigger`.
+- **Menubar**: A visually persistent menu common in desktop applications. Exports: `Menubar`, `MenubarCheckboxItem`, `MenubarContent`, `MenubarGroup`, `MenubarItem`, `MenubarLabel`, `MenubarMenu`, `MenubarPortal`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarSeparator`, `MenubarShortcut`, `MenubarSub`, `MenubarSubContent`, `MenubarSubTrigger`, `MenubarTrigger`.
+- **Command**: Fast, composable, unstyled command menu for React. Exports: `Command`, `CommandDialog`, `CommandEmpty`, `CommandGroup`, `CommandInput`, `CommandItem`, `CommandList`, `CommandSeparator`, `CommandShortcut`.
+- **Navigation Menu**: A collection of links for navigating websites. Exports: `NavigationMenu`, `NavigationMenuContent`, `NavigationMenuIndicator`, `NavigationMenuItem`, `NavigationMenuLink`, `NavigationMenuList`, `NavigationMenuTrigger`, `navigationMenuTriggerStyle`, `NavigationMenuViewport`.
+
+## Layout and navigation
+
+- **Card**: Exports: `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `cardVariants`, `GLASS_CLASSES`.
+- **Tabs**: A set of layered sections of content—known as tab panels—that are displayed one at a time. Exports: `Tabs`, `TabsContent`, `TabsList`, `TabsTrigger`.
+- **Breadcrumb**: Displays the path to the current resource using a hierarchy of links. Exports: `Breadcrumb`, `BreadcrumbEllipsis`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbList`, `BreadcrumbPage`, `BreadcrumbSeparator`.
+- **Sidebar**: A composable, themeable and customizable sidebar component. Exports: `Sidebar`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupAction`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarInput`, `SidebarInset`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `sidebarMenuButtonVariants`, `SidebarMenuItem`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarRail`, `SidebarSeparator`, `SidebarTrigger`, `useSidebar`.
+- **Accordion**: A vertically stacked set of interactive headings that each reveal a section of content. Exports: `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`.
+- **Collapsible**: An interactive component which expands/collapses a panel. Exports: `Collapsible`, `CollapsibleContent`, `CollapsibleTrigger`.
+- **Separator**: Visually or semantically separates content. Exports: `Separator`.
+- **Resizable**: Accessible resizable panel groups and layouts with keyboard support. Exports: `ResizableHandle`, `ResizablePanel`, `ResizablePanelGroup`.
+- **Scroll Area**: Augments native scroll functionality for custom, cross-browser styling. Exports: `ScrollArea`, `ScrollBar`.
+- **Aspect Ratio**: Displays content within a desired ratio. Exports: `AspectRatio`.
+
+## Data display
+
+- **Data Table**: A data table built on TanStack Table with sorting, filtering, pagination and row selection. Exports: `DataTable`, `DataTableCell`, `DataTableColumnHeader`, `dataTableFacetedFilterFn`, `dataTableGlobalFilterFn`, `DataTablePagination`, `DataTableRow`, `DataTableSearch`, `DataTableSkeleton`, `DataTableToolbar`, `DataTableViewOptions`, `useDataTable`, `useEntityColumns`, `useEntityDataTable`.
+  - Use when a list of records needs sorting, filtering, search, pagination, row selection or column visibility.
+  - Avoid when the data is a small, static table with no interaction. Use **Table** instead.
+
+    ```tsx
+    import { type ColumnDef, DataTable, useDataTable } from "@uipath/apollo-vertex";
+
+    const columns: ColumnDef<Invoice>[] = [
+      { accessorKey: "number", header: "Number" },
+      { accessorKey: "amount", header: "Amount" },
+    ];
+
+    function InvoicesTable({ data }: { data: Invoice[] }) {
+      const tableState = useDataTable({ data, columns, storageKey: "invoices" });
+      return <DataTable {...tableState} />;
+    }
+    ```
+
+- **Table**: A responsive table component for displaying data. Exports: `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`.
+  - Use when the data is small and static, such as a summary or a comparison, and needs no sorting, filtering or pagination.
+  - Avoid when users sort, filter, search, page through or select rows. Use **Data Table** instead.
+- **Pagination**: Pagination with page navigation, next and previous links. Exports: `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLink`, `PaginationNext`, `PaginationPrevious`.
+- **Item**: A versatile list item component for displaying content in lists. Exports: `Item`, `ItemActions`, `ItemContent`, `ItemDescription`, `ItemFooter`, `ItemGroup`, `ItemHeader`, `ItemMedia`, `ItemSeparator`, `ItemTitle`.
+- **Timeline**: Primitives for building an activity timeline: a status marker (the dot) and the row layout (the connecting line and dot slot a row sits in). Together they render a mixed trail of human and agent steps, without knowing anything about your domain. Exports: `TimelineMarker`, `TimelineRowLayout`.
+- **Avatar**: An image element with a fallback for representing the user. Exports: `Avatar`, `AvatarFallback`, `AvatarImage`.
+- **Badge**: Displays a badge or a component that looks like a badge. Exports: `Badge`, `badgeVariants`.
+- **Kbd**: The keyboard key component is used to display keyboard shortcuts. Exports: `Kbd`, `KbdGroup`.
+- **Carousel**: A carousel with motion and swipe built using Embla. Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselNext`, `CarouselPrevious`.
+
+## Feedback
+
+- **Alert**: Displays a callout for user attention. Exports: `Alert`, `AlertDescription`, `AlertTitle`, `alertVariants`.
+  - Use when feedback must stay visible in context, such as validation errors, warnings or a blocking error.
+  - Use when the user must act on the message, or the system raised it without a user action. With no related UI to anchor it to, show it as a persistent full-width banner below the main header.
+  - Avoid when the message only confirms that an action the user just took succeeded. Use **Sonner** instead.
+- **Sonner**: An opinionated toast component for React. Exports: `apolloToastClassNames`, `Toaster`.
+  - Use when the message briefly confirms an action the user just took and asks nothing of them, such as "Changes saved".
+  - Avoid when the message is a blocking error or a validation error, needs user input, or was raised by the system without a user action. Use **Alert** instead.
+
+    ```tsx
+    // Render <Toaster /> once in the root layout. toast comes from the sonner package.
+    import { Toaster } from "@uipath/apollo-vertex";
+    import { toast } from "sonner";
+
+    <Toaster />
+
+    toast.success("Changes saved", { description: "Your updates have been applied." });
+    ```
+
+- **Empty**: An empty state component for when there is no data to display. Exports: `Empty`, `EmptyContent`, `EmptyDescription`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`.
+  - Use when a list, table, search result or page has nothing to show. Say why it is empty and offer the next action when there is one.
+  - Avoid when the content is still loading. Use **Skeleton** instead.
+  - Avoid when loading the content failed. Use **Alert** instead.
+- **Skeleton**: Use to show a placeholder while content is loading. Exports: `Skeleton`.
+- **Spinner**: A loading spinner component to indicate loading state. Exports: `Spinner`.
+- **Progress**: Displays an indicator showing the completion progress of a task. Exports: `Progress`.
+- **Confidence Signal**: A single chip for communicating AI confidence — used everywhere the system needs to say "can you act on this, or should you pause?" Exports: `ConfidenceSignal`, `SignalBars`.
+
+## Charts
+
+- **Chart**: Beautiful charts using Recharts with consistent theming and styling. Exports: `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartStyle`, `ChartTooltip`, `ChartTooltipContent`.
+- **Line Chart**: A time-series line chart over a datetime dimension. Exports: `LineChart`, `LineChartWithAdapter`.
+- **Multi-Line Chart**: Two metrics on a shared datetime axis with independent left and right Y axes. Exports: `MultiLineChart`, `MultiLineChartWithAdapter`.
+- **Bar Chart**: A metric broken down by a categorical dimension. Exports: `BarChart`, `BarChartWithAdapter`.
+- **Distribution Chart**: A histogram over a numeric or datetime dimension. Bins are computed by the adapter and rendered as bars. Exports: `DistributionChart`, `DistributionChartWithAdapter`.
+- **KPI Chart**: A single scalar metric. No dimension, no breakdown — just a label and a formatted value. Exports: `KpiChart`, `KpiChartWithAdapter`.
+- **Table Chart**: A sortable table of entity rows. Use for record-level views — no aggregation, just listing. Exports: `TableChart`, `TableChartWithAdapter`.
+
+## Utilities
+
+- **Feature Flags**: A generic feature flag system with a provider pattern, reactive hook, and guard components. Designed for Proteus SDK integration but supports any backend via adapters. Exports: `createProteusProvider`, `FeatureFlagContext`, `FeatureFlagGuard`, `FeatureFlagProvider`, `ProtectedFeatureRoute`, `useFeatureFlag`, `useFeatureFlagProvider`.
+
+## Patterns
+
+- **AI Chat**: Exports: `AiChat`, `AiChatEmptyState`, `AutopilotGradientIcon`, `CHOICES_TOOL_PROMPT`, `createAgentHubConnection`, `createConversationalAgentConnection`, `createDataFabricBarTool`, `createDataFabricDistributionTool`, `createDataFabricKpiTool`, `createDataFabricLineTool`, `createDataFabricMultiLineTool`, `createDataFabricTableTool`, `dataFabricBarClient`, `dataFabricDistributionClient`, `dataFabricKpiClient`, `dataFabricLineClient`, `dataFabricMultiLineClient`, `dataFabricTableClient`, `generateEntityFieldsDocs`, `NoDataMessage`, `presentChoicesClient`, `renderChoices`.
+- **Feedback Vote Widget**: Exports: `FeedbackVoteWidget`.
+- **Metric Card**: Displays a labeled metric with a value, optional trend direction, and percentage change badge. Includes a skeleton loading state for consistent UX during data fetches. Exports: `MetricCard`, `MetricCardSkeleton`.
+- **Page Header**: A compound page header with back navigation, title, metadata fields, and collapsible action buttons that automatically overflow into a dropdown when space is tight. Exports: `PageHeader`, `PageHeaderActions`, `PageHeaderActionsOverflow`, `PageHeaderBackButton`, `PageHeaderCollapsibleActions`, `PageHeaderContent`, `PageHeaderDescription`, `PageHeaderField`, `PageHeaderFieldLabel`, `PageHeaderFieldValue`, `PageHeaderNav`, `PageHeaderTitle`, `PageHeaderTitleGroup`, `pageHeaderTitleVariants`, `pageHeaderVariants`.
+- **Shell**: A component with a collapsible sidebar, theme and language toggles, and optional OAuth2 authentication. Exports: `ApolloShell`, `AuthContext`, `GroupMembershipGuard`, `LocaleProvider`, `MembershipDenied`, `Role`, `ShellAuthProvider`, `ShellLayout`, `ShellLogin`, `ShellSidebar`, `ShellUserProvider`, `STALE_TIME_MS`, `ThemeProvider`, `useAccessToken`, `useAuth`, `useGroupId`, `useGroupMembers`, `useIsGroupMember`, `useTheme`, `useUser`, `VerifyingMembership`.