@hubspot/ui-extensions 0.12.3 → 0.13.0

package/dist/pages/internal/trie-router.test.js

@@ -0,0 +1,263 @@
+import { createTrieRouter } from "./trie-router.js";
+describe('addRoute — conflict detection', () => {
+    it('throws on duplicate exact route', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo', 'first');
+        expect(() => router.addRoute('/foo', 'second')).toThrowError('Route conflict: "/foo" conflicts with existing route "/foo"');
+    });
+    it('throws on duplicate root route', () => {
+        const router = createTrieRouter();
+        router.addRoute('/', 'first');
+        expect(() => router.addRoute('/', 'second')).toThrowError('Route conflict: "/" conflicts with existing route "/"');
+    });
+    it('throws when two param-only routes conflict', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:foo', 'first');
+        expect(() => router.addRoute('/:bar', 'second')).toThrowError('Route conflict: "/:bar" conflicts with existing route "/:foo"');
+    });
+    it('throws when param routes with matching suffix conflict', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:foo/suffix', 'first');
+        expect(() => router.addRoute('/:bar/suffix', 'second')).toThrowError('Route conflict: "/:bar/suffix" conflicts with existing route "/:foo/suffix"');
+    });
+    it('allows param routes with different sub-paths', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:foo', 'terminal');
+        router.addRoute('/:bar/baz', 'with-baz');
+        expect(router.matchPath('/hello')).toEqual({
+            data: 'terminal',
+            params: { foo: 'hello' },
+        });
+        expect(router.matchPath('/hello/baz')).toEqual({
+            data: 'with-baz',
+            params: { bar: 'hello' },
+        });
+    });
+    it('throws when wildcard is not the last segment', () => {
+        const router = createTrieRouter();
+        expect(() => router.addRoute('/foo/*/bar', 'data')).toThrowError('Wildcard must be the last segment in route: /foo/*/bar');
+    });
+    it('throws when a param segment has an empty name', () => {
+        const router = createTrieRouter();
+        expect(() => router.addRoute('/:', 'data')).toThrowError('Invalid route "/:": param segment at position 0 has an empty name');
+    });
+    it('throws for mid-path wildcard without corrupting the trie', () => {
+        const router = createTrieRouter();
+        expect(() => router.addRoute('/foo/*/bar', 'data')).toThrowError('Wildcard must be the last segment in route: /foo/*/bar');
+        router.addRoute('/foo/bar', 'data');
+        expect(router.matchPath('/foo/bar')).toEqual({
+            data: 'data',
+            params: {},
+        });
+    });
+    it('throws on duplicate wildcard route', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/*', 'first');
+        expect(() => router.addRoute('/foo/*', 'second')).toThrowError('Route conflict: "/foo/*" conflicts with existing route "/foo/*"');
+    });
+    it("throws when empty string and '/' are both registered as root routes", () => {
+        const router = createTrieRouter();
+        router.addRoute('', 'first');
+        expect(() => router.addRoute('/', 'second')).toThrowError('Route conflict: "/" conflicts with existing route "/"');
+    });
+    it('allows different sub-paths under the same param name', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:id/foo', 'first');
+        router.addRoute('/:id/bar', 'second');
+        expect(router.matchPath('/123/foo')).toEqual({
+            data: 'first',
+            params: { id: '123' },
+        });
+        expect(router.matchPath('/123/bar')).toEqual({
+            data: 'second',
+            params: { id: '123' },
+        });
+    });
+});
+describe('matchPath — static routes', () => {
+    it('matches root path', () => {
+        const router = createTrieRouter();
+        router.addRoute('/', 'root');
+        expect(router.matchPath('/')).toEqual({
+            data: 'root',
+            params: {},
+        });
+    });
+    it('matches single segment', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo', 'foo-page');
+        expect(router.matchPath('/foo')).toEqual({
+            data: 'foo-page',
+            params: {},
+        });
+    });
+    it('matches multi-segment path', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/bar', 'foo-bar');
+        expect(router.matchPath('/foo/bar')).toEqual({
+            data: 'foo-bar',
+            params: {},
+        });
+    });
+    it('returns null for unregistered path', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo', 'foo-page');
+        expect(router.matchPath('/bar')).toBeNull();
+    });
+    it('returns null when path is a prefix of a registered route', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/bar', 'foo-bar');
+        expect(router.matchPath('/foo')).toBeNull();
+    });
+    it('returns null when path extends beyond a registered route', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo', 'foo-page');
+        expect(router.matchPath('/foo/bar')).toBeNull();
+    });
+});
+describe('matchPath — param routes', () => {
+    it('matches param route and extracts param', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:someParam/foo/bar', 'param-route');
+        expect(router.matchPath('/hello/foo/bar')).toEqual({
+            data: 'param-route',
+            params: { someParam: 'hello' },
+        });
+    });
+    it('matches route with multiple params', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:a/:b', 'multi-param');
+        expect(router.matchPath('/x/y')).toEqual({
+            data: 'multi-param',
+            params: { a: 'x', b: 'y' },
+        });
+    });
+    it('decodes URI-encoded param values', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:query', 'search');
+        expect(router.matchPath('/hello%20world')).toEqual({
+            data: 'search',
+            params: { query: 'hello world' },
+        });
+    });
+    it('matches different param names with different sub-paths', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:param1/foo', 'foo-route');
+        router.addRoute('/:param2/bar', 'bar-route');
+        expect(router.matchPath('/x/foo')).toEqual({
+            data: 'foo-route',
+            params: { param1: 'x' },
+        });
+        expect(router.matchPath('/x/bar')).toEqual({
+            data: 'bar-route',
+            params: { param2: 'x' },
+        });
+    });
+});
+describe('matchPath — wildcard routes', () => {
+    it('matches wildcard and captures remaining segments', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/*', 'wildcard');
+        expect(router.matchPath('/foo/a/b/c')).toEqual({
+            data: 'wildcard',
+            params: { '*': 'a/b/c' },
+        });
+    });
+    it('matches root wildcard', () => {
+        const router = createTrieRouter();
+        router.addRoute('/*', 'catch-all');
+        expect(router.matchPath('/anything/here')).toEqual({
+            data: 'catch-all',
+            params: { '*': 'anything/here' },
+        });
+    });
+    it('matches wildcard with single remaining segment', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/*', 'wildcard');
+        expect(router.matchPath('/foo/bar')).toEqual({
+            data: 'wildcard',
+            params: { '*': 'bar' },
+        });
+    });
+    it('returns null when path matches wildcard prefix but has no remaining segment', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/*', 'wildcard');
+        expect(router.matchPath('/foo')).toBeNull();
+    });
+});
+describe('matchPath — undefined data', () => {
+    it('matches static route with undefined data', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo', undefined);
+        expect(router.matchPath('/foo')).toEqual({
+            data: undefined,
+            params: {},
+        });
+    });
+    it('matches param route with undefined data', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:id', undefined);
+        expect(router.matchPath('/123')).toEqual({
+            data: undefined,
+            params: { id: '123' },
+        });
+    });
+    it('matches wildcard route with undefined data', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/*', undefined);
+        expect(router.matchPath('/foo/bar/baz')).toEqual({
+            data: undefined,
+            params: { '*': 'bar/baz' },
+        });
+    });
+    it('returns null for unregistered path when other routes have undefined data', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo', undefined);
+        expect(router.matchPath('/bar')).toBeNull();
+    });
+});
+describe('matchPath — priority', () => {
+    it('static wins over param', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:param/bar', 'param-route');
+        router.addRoute('/foo/bar', 'static-route');
+        expect(router.matchPath('/foo/bar')).toEqual({
+            data: 'static-route',
+            params: {},
+        });
+    });
+    it('static wins over wildcard', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/*', 'wildcard-route');
+        router.addRoute('/foo/bar', 'static-route');
+        expect(router.matchPath('/foo/bar')).toEqual({
+            data: 'static-route',
+            params: {},
+        });
+    });
+    it('param wins over wildcard', () => {
+        const router = createTrieRouter();
+        router.addRoute('/*', 'wildcard-route');
+        router.addRoute('/:id', 'param-route');
+        expect(router.matchPath('/hello')).toEqual({
+            data: 'param-route',
+            params: { id: 'hello' },
+        });
+    });
+    it('falls back to wildcard when static does not match deeper', () => {
+        const router = createTrieRouter();
+        router.addRoute('/foo/bar/baz', 'deep-static');
+        router.addRoute('/foo/*', 'wildcard-route');
+        expect(router.matchPath('/foo/qux')).toEqual({
+            data: 'wildcard-route',
+            params: { '*': 'qux' },
+        });
+    });
+});
+describe('matchPath — invalid URI-encoded param', () => {
+    it('does not throw on malformed URI-encoded param', () => {
+        const router = createTrieRouter();
+        router.addRoute('/:id', 'route');
+        expect(() => router.matchPath('/%ZZ')).not.toThrow();
+    });
+});

package/dist/pages/internal/useAppPageLocation.d.ts

@@ -0,0 +1 @@
+export declare const useAppPageLocation: () => import("../../index.ts").AppPageLocation;

package/dist/pages/internal/useAppPageLocation.js

@@ -0,0 +1,13 @@
+import { getWorkerGlobals } from "../../internal/global-utils.js";
+import { useMocksContext } from "../../internal/hook-utils.js";
+export const useAppPageLocation = () => {
+    const mocksContext = useMocksContext();
+    if (!mocksContext) {
+        // If no mocks context is provided, call the original hook implementation provided by
+        // the worker globals.
+        return getWorkerGlobals().hsWorkerAPI.useAppPageLocation();
+    }
+    // Otherwise, call the mock implementation provided by the mocks context.
+    const { useAppPageLocation } = mocksContext;
+    return useAppPageLocation();
+};

package/dist/pages/types.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentType } from 'react';
+import type { EmptyProps } from '../shared/types/shared.ts';
+/**
+ * Represents the current page route that has been matched by the page router.
+ */
+export interface MatchedPageRoute {
+    /**
+     * The id of the route that has been matched.
+     */
+    routeId?: string;
+    /**
+     * The path of the route that has been matched.
+     */
+    path: string;
+    /**
+     * The parameters of the route that has been matched.
+     */
+    params: Record<string, string>;
+}
+/**
+ * The props type for a PageRouter component.
+ */
+export type PageRouterProps = EmptyProps;
+/**
+ * The component type for the page router that handles rendering matched routes.
+ *
+ */
+export type PageRouterComponent = ComponentType<PageRouterProps>;

package/dist/pages/types.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/remoteComponents.d.ts

@@ -626,7 +626,31 @@ export declare const PrimaryHeaderActionButton: import("./types/shared.ts").HubS
  *
  */
 export declare const SecondaryHeaderActionButton: import("./types/shared.ts").HubSpotReactComponent<componentTypes.HeaderActionButtonProps>;
+/**
+ * The `PageHeader` component renders the actions within the header of the page. It accepts `PrimaryAction` and `SecondaryActions` as children.
+ *
+ * **Links:**
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/app-page-components/page-header Docs}
+ */
+export declare const PageHeader: import("./types/shared.ts").HubSpotReactComponent<import("./types/shared.ts").UnknownComponentProps> & {
+    PrimaryAction: import("./types/shared.ts").HubSpotReactComponent<pageComponentTypes.PageHeaderPrimaryActionProps>;
+    SecondaryActions: import("./types/shared.ts").HubSpotReactComponent<pageComponentTypes.PageHeaderSecondaryActionsProps>;
+    Link: import("./types/shared.ts").HubSpotReactComponent<pageComponentTypes.PageHeaderLinkProps>;
+    PageLink: import("./types/shared.ts").HubSpotReactComponent<pageComponentTypes.PageHeaderPageLinkProps>;
+};
+/**
+ * The 'PageBreadcrumbs' component renders a list of links to show the user's current location within the app and allow them to navigate back to previous pages.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/app-page-components/page-breadcrumbs Docs}
+ */
+export declare const PageBreadcrumbs: import("./types/shared.ts").HubSpotReactComponent<import("./types/shared.ts").UnknownComponentProps> & {
+    PageLink: import("./types/shared.ts").HubSpotReactComponent<pageComponentTypes.PageBreadcrumbsPageLinkProps>;
+    Current: import("./types/shared.ts").HubSpotReactComponent<pageComponentTypes.PageBreadcrumbsCurrentProps>;
+};
 export declare const PageLink: import("./types/shared.ts").HubSpotReactComponent<pageComponentTypes.PageLinkProps>;
+export declare const PageTitle: import("./types/shared.ts").HubSpotReactComponent<pageComponentTypes.PageTitleProps>;
 /**
  * @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
  */

package/dist/shared/remoteComponents.js

@@ -648,7 +648,35 @@ export const SecondaryHeaderActionButton = createAndRegisterRemoteReactComponent
 ////////////////////////////////////////////////////////
 // APP PAGE COMPONENTS
 ////////////////////////////////////////////////////////
+/**
+ * The `PageHeader` component renders the actions within the header of the page. It accepts `PrimaryAction` and `SecondaryActions` as children.
+ *
+ * **Links:**
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/app-page-components/page-header Docs}
+ */
+export const PageHeader = createAndRegisterRemoteCompoundReactComponent('PageHeader', {
+    compoundComponentProperties: {
+        PrimaryAction: createAndRegisterRemoteReactComponent('PageHeaderPrimaryAction'),
+        SecondaryActions: createAndRegisterRemoteReactComponent('PageHeaderSecondaryActions'),
+        Link: createAndRegisterRemoteReactComponent('PageHeaderLink'),
+        PageLink: createAndRegisterRemoteReactComponent('PageHeaderPageLink'),
+    },
+});
+/**
+ * The 'PageBreadcrumbs' component renders a list of links to show the user's current location within the app and allow them to navigate back to previous pages.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/app-page-components/page-breadcrumbs Docs}
+ */
+export const PageBreadcrumbs = createAndRegisterRemoteCompoundReactComponent('PageBreadcrumbs', {
+    compoundComponentProperties: {
+        PageLink: createAndRegisterRemoteReactComponent('PageBreadcrumbsPageLink'),
+        Current: createAndRegisterRemoteReactComponent('PageBreadcrumbsCurrent'),
+    },
+});
 export const PageLink = createAndRegisterRemoteReactComponent('PageLink');
+export const PageTitle = createAndRegisterRemoteReactComponent('PageTitle');
 ////////////////////////////////////////////////////////
 // EXPERIMENTAL COMPONENTS
 ////////////////////////////////////////////////////////

package/dist/shared/types/actions.d.ts

@@ -31,6 +31,11 @@ export type onCrmPropertiesUpdateAction = (properties: string[] | '*', callback:
 /** @ignore */
 export type CloseOverlayAction = (id: string) => void;
 /** @ignore */
+export type NavigateToPageAction = (options: {
+    to: string;
+    params?: Record<string, string>;
+}) => void;
+/** @ignore */
 export interface CrmHostActions {
     addAlert: AddAlertAction;
     reloadPage: ReloadPageAction;
@@ -48,10 +53,15 @@ export interface AppHomeActions {
     addAlert: AddAlertAction;
 }
 /** @ignore */
+export interface PagesActions {
+    addAlert: AddAlertAction;
+}
+/** @ignore */
 export interface UiePlatformActions {
-    copyTextToClipboard: Clipboard['writeText'];
     closeOverlay: CloseOverlayAction;
-    reloadPage: ReloadPageAction;
+    copyTextToClipboard: Clipboard['writeText'];
+    navigateToPage: NavigateToPageAction;
     openIframeModal: OpenIframeModalAction;
+    reloadPage: ReloadPageAction;
 }
 export {};

package/dist/shared/types/components/button.d.ts

@@ -10,9 +10,9 @@ export interface BaseButtonProps extends BaseComponentProps {
      */
     onClick?: ReactionsHandler<ExtensionEvent>;
     /**
-     * Include this prop to open a URL on click. Contains the following fields:
+     * Include this prop to open a URL on click. Can be set to a URL string or an object with the following fields:
      * - `url` (string): the URL that will open on click.
-     * - `external` (boolean): set to `true` to open the URL in a new tab and display an external link icon. By default:
+     * - `external` (boolean, optional): set to `true` to open the URL in a new tab and display an external link icon. By default:
      *   - Links to HubSpot app pages will open in the same tab and will not include an icon.
      *   - Links to non-HubSpot app pages will open in a new tab and include the icon.
      *

package/dist/shared/types/components/image.d.ts

@@ -12,9 +12,9 @@ export interface ImageProps extends OverlayComponentProps, BaseComponentProps {
      */
     alt?: string;
     /**
-     * When provided, sets the URL that will open when the image is clicked. Contains the following fields:
+     * When provided, sets the URL that will open when the image is clicked. Can be set to a URL string or an object with the following fields:
      * - `url` (string): the URL that will open on click.
-     * - `external` (boolean): set to `true` to open the URL in a new tab. By default:
+     * - `external` (boolean, optional): set to `true` to open the URL in a new tab. By default:
      *   - Links to HubSpot app pages will open in the same tab.
      *   - Links to non-HubSpot app pages will open in a new tab.
      *

package/dist/shared/types/components/inputs.d.ts

@@ -155,6 +155,12 @@ export interface NumberInputProps extends BaseInputForNumber {
     formatStyle?: 'decimal' | 'percentage';
     /** @deprecated use onChange instead. It doesn't guarantee valid format */
     onInput?: (value: number) => void;
+    /**
+     * Sets the horizontal alignment of the text in the input.
+     *
+     * @defaultValue `"left"`
+     */
+    textAlign?: 'left' | 'right';
 }
 /**
  * The props type for [CurrencyInput](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/currency-input).
@@ -185,7 +191,7 @@ export interface CurrencyInputProps extends BaseInputForNumber {
  *
  * @category Component Props
  */
-export interface StepperInputProps extends Omit<NumberInputProps, 'onInput'> {
+export interface StepperInputProps extends Omit<NumberInputProps, 'onInput' | 'textAlign'> {
     /** The amount that the current value will increase or decrease by. Default is `1`.
      * @defaultValue `1`
      */

package/dist/shared/types/components/link.d.ts

@@ -13,9 +13,9 @@ export interface LinkProps extends OverlayComponentProps, BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * Sets the link's URL and open behavior. Contains the following fields:
+     * Sets the link's URL and open behavior. Can be set to a URL string or an object with the following fields:
      * - `url` (string): the URL that will open on click.
-     * - `external` (boolean): set to `true` to open the URL in a new tab and display an external link icon. By default:
+     * - `external` (boolean, optional): set to `true` to open the URL in a new tab and display an external link icon. By default:
      *   - Links to HubSpot app pages will open in the same tab and will not include an icon.
      *   - Links to non-HubSpot app pages will open in a new tab and include the icon.
      */

package/dist/shared/types/context.d.ts

@@ -60,6 +60,11 @@ export interface AppHomeContext extends BaseContext {
     extension?: AppContext;
 }
 /** @ignore */
+export interface PagesContext extends BaseContext {
+    location: 'pages';
+    extension?: AppContext;
+}
+/** @ignore */
 export interface GenericContext extends BaseContext {
     location: 'uie.playground.middle';
 }

package/dist/shared/types/crm.d.ts

@@ -372,6 +372,10 @@ export interface CrmActionLinkProps extends BaseActionComponent {
      * @defaultValue `"primary"`
      */
     variant?: 'primary' | 'light' | 'dark' | 'destructive';
+    /**
+     * A function that will be invoked when the link is clicked. It receives no arguments and its return value is ignored.
+     */
+    onClick?: () => void;
 }
 export interface ActionLibraryButtonCardActionConfig<SpecificActionType extends ActionType = ActionType> {
     /**

package/dist/shared/types/extension-points.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
-import type { AppHomeActions, CrmHostActions, SettingsActions, UiePlatformActions } from './actions.ts';
-import type { AppHomeContext, BaseContext, CrmContext, GenericContext, SettingsContext } from './context.ts';
+import type { AppHomeActions, CrmHostActions, PagesActions, SettingsActions, UiePlatformActions } from './actions.ts';
+import type { AppHomeContext, BaseContext, CrmContext, GenericContext, PagesContext, SettingsContext } from './context.ts';
 import type { CrmActionButtonProps, CrmActionLinkProps, CrmAssociationPivotProps, CrmAssociationPropertyListProps, CrmAssociationStageTrackerProps, CrmAssociationTableProps, CrmCardActionsProps, CrmDataHighlightProps, CrmPropertyListProps, CrmRelativeTimelineProps, CrmReportProps, CrmSimpleDeadlineProps, CrmStageTrackerProps, CrmStatisticsProps } from './crm.ts';
 import type { ServerlessFuncRunner } from './http-requests.ts';
 import type { TypesOfReadOnlyArray } from './shared.ts';
@@ -75,6 +75,11 @@ export interface AppHomeExtensionPoint extends ExtensionPointContract {
     actions: AppHomeActions & UiePlatformActions;
     context: AppHomeContext;
 }
+/** @ignore */
+export interface PagesExtensionPoint extends ExtensionPointContract {
+    actions: PagesActions & UiePlatformActions;
+    context: PagesContext;
+}
 export interface ExampleCrmComponentProps {
     name: string;
     size: 'sm' | 'md' | 'lg';
@@ -90,7 +95,7 @@ interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
         ExampleCrmComponent: ComponentType<ExampleCrmComponentProps>;
     };
 }
-export declare const EXTENSION_POINT_LOCATIONS: readonly ["crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings", "home"];
+export declare const EXTENSION_POINT_LOCATIONS: readonly ["crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings", "home", "pages"];
 export type ExtensionPointLocation = TypesOfReadOnlyArray<typeof EXTENSION_POINT_LOCATIONS>;
 /** @ignore */
 interface LocationToExtensionPoint {
@@ -101,6 +106,7 @@ interface LocationToExtensionPoint {
     'helpdesk.sidebar': StandardCrmExtensionPoint;
     settings: SettingsExtensionPoint;
     home: AppHomeExtensionPoint;
+    pages: PagesExtensionPoint;
 }
 /**
  * While this resolves to the same result as LocationToExtensionPoint, it ensures that every location

package/dist/shared/types/extension-points.js

@@ -6,4 +6,5 @@ export const EXTENSION_POINT_LOCATIONS = [
     'uie.playground.middle',
     'settings',
     'home',
+    'pages',
 ];

package/dist/shared/types/pages/components/index.d.ts

@@ -1,2 +1,4 @@
+export type * from './page-breadcrumbs.ts';
+export type * from './page-header.ts';
 export type * from './page-link.ts';
-export type * from './page-routes.ts';
+export type * from './page-title.ts';

package/dist/shared/types/pages/components/page-breadcrumbs.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { BaseComponentProps } from '../../shared.ts';
+/**
+ * The props type for [PageBreadcrumbs](https://developers.hubspot.com/docs/reference/ui-components/app-page-components/page-breadcrumbs)
+ */
+export interface PageBreadcrumbsProps extends BaseComponentProps {
+    /**
+     * The links and text to render as breadcrumbs.
+     * Use `PageBreadcrumbs.PageLink` for navigable crumbs and `PageBreadcrumbs.Current` for the current page.
+     */
+    children: ReactNode;
+}
+export interface PageBreadcrumbsPageLinkProps extends BaseComponentProps {
+    /**
+     * The path to navigate to when the link is clicked. Supports path parameters (e.g. `/view-contact/:contactId`).
+     */
+    to: string;
+    /**
+     * Values for path parameters and query string entries.
+     * Parameters matching `:paramName` tokens in `to` are substituted into the path.
+     * Any remaining parameters are appended as query string entries.
+     */
+    params?: Record<string, string>;
+    /**
+     * The visible text of the breadcrumb link.
+     */
+    children: ReactNode;
+}
+export interface PageBreadcrumbsCurrentProps extends BaseComponentProps {
+    /**
+     * Label for the current location.
+     */
+    children: ReactNode;
+}

package/dist/shared/types/pages/components/page-breadcrumbs.js

@@ -0,0 +1 @@
+export {};