@hubspot/ui-extensions 0.12.2 → 0.12.4

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

@@ -0,0 +1,141 @@
+/**
+ * Trie-based URL router. Routes are split into path segments and are stored in a prefix tree for
+ * O(number-of-path-segments) lookup. When multiple route types match, priority is: static > param > wildcard.
+ */
+const WILDCARD = '*';
+const normalizePath = (path) => `/${path.replace(/\/+/g, '/').replace(/\/$/, '').replace(/^\//, '')}`;
+const splitSegments = (normalizedPath) => normalizedPath === '/' ? [] : normalizedPath.slice(1).split('/');
+const isParamSegment = (segment) => segment.startsWith(':');
+const getParamNameForSegment = (segment) => segment.slice(1);
+const safeDecodeURIComponent = (value) => {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+};
+/**
+ * Recursively searches the trie for an existing route that would conflict
+ * with the given segments. Returns the conflicting pattern, or null.
+ */
+const findConflictingPattern = (node, segmentIndex, segments) => {
+    if (segmentIndex === segments.length) {
+        return node.pattern ?? null;
+    }
+    const segment = segments[segmentIndex];
+    if (isParamSegment(segment)) {
+        const { paramChildren } = node;
+        if (paramChildren) {
+            for (const paramChild of Object.values(paramChildren)) {
+                const result = findConflictingPattern(paramChild, segmentIndex + 1, segments);
+                if (result)
+                    return result;
+            }
+        }
+    }
+    else if (segment === WILDCARD) {
+        return node.children?.[WILDCARD]?.pattern ?? null;
+    }
+    else {
+        const childNode = node.children?.[segment];
+        if (childNode) {
+            const result = findConflictingPattern(childNode, segmentIndex + 1, segments);
+            if (result)
+                return result;
+        }
+    }
+    return null;
+};
+/**
+ * Recursively walks the trie to find a route matching the given segments.
+ * Tries static children, then param children, then wildcard (priority order).
+ */
+const findMatchingRoute = (node, params, segments, segmentIndex) => {
+    if (segmentIndex === segments.length) {
+        // Only terminal nodes have data assigned
+        if ('data' in node) {
+            return {
+                data: node.data,
+                params,
+            };
+        }
+        return null;
+    }
+    const segment = segments[segmentIndex];
+    // Try matches in priority order: static > param > wildcard
+    const childNode = node.children?.[segment];
+    if (childNode) {
+        const result = findMatchingRoute(childNode, params, segments, segmentIndex + 1);
+        if (result)
+            return result;
+    }
+    const { paramChildren } = node;
+    if (paramChildren) {
+        for (const [paramName, paramChild] of Object.entries(paramChildren)) {
+            const result = findMatchingRoute(paramChild, { ...params, [paramName]: safeDecodeURIComponent(segment) }, segments, segmentIndex + 1);
+            if (result)
+                return result;
+        }
+    }
+    const wildcardNode = node.children?.[WILDCARD];
+    if (wildcardNode && 'data' in wildcardNode) {
+        return {
+            data: wildcardNode.data,
+            params: {
+                ...params,
+                [WILDCARD]: segments.slice(segmentIndex).join('/'),
+            },
+        };
+    }
+    return null;
+};
+/**
+ * Creates a new TrieRouter instance. After creation, routes can be added to the router using the addRoute method.
+ * Routes can be matched using the matchPath method.
+ *
+ * The order that routes are added does not matter. The router will always match the longest possible route.
+ *
+ * @param TRouteData - The type of the route data that can be associated with each added route
+ * @returns A TrieRouter instance
+ */
+export const createTrieRouter = () => {
+    const rootNode = {};
+    return {
+        matchPath: (path) => {
+            const normalizedPath = normalizePath(path);
+            const segments = splitSegments(normalizedPath);
+            return findMatchingRoute(rootNode, {}, segments, 0);
+        },
+        addRoute: (path, data) => {
+            const normalizedPath = normalizePath(path);
+            const segments = splitSegments(normalizedPath);
+            // Validate the route before we start adding it to the trie to avoid adding invalid routes
+            for (let i = 0; i < segments.length; i++) {
+                const segment = segments[i];
+                if (segment === WILDCARD && i !== segments.length - 1) {
+                    throw new Error(`Wildcard must be the last segment in route: ${normalizedPath}`);
+                }
+                if (isParamSegment(segment) && getParamNameForSegment(segment) === '') {
+                    throw new Error(`Invalid route "${normalizedPath}": param segment at position ${i} has an empty name`);
+                }
+            }
+            const conflictingPattern = findConflictingPattern(rootNode, 0, segments);
+            if (conflictingPattern) {
+                throw new Error(`Route conflict: "${normalizedPath}" conflicts with existing route "${conflictingPattern}"`);
+            }
+            // Add the route to the trie
+            let current = rootNode;
+            for (const segment of segments) {
+                if (isParamSegment(segment)) {
+                    current = (current.paramChildren ??= {})[getParamNameForSegment(segment)] ??= {};
+                }
+                else {
+                    current = (current.children ??= {})[segment] ??= {};
+                }
+            }
+            current.data = data;
+            current.pattern = normalizedPath;
+        },
+    };
+};

package/dist/experimental/pages/internal/trie-router.test.d.ts

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

package/dist/experimental/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/experimental/pages/internal/useAppPageLocation.d.ts

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

package/dist/experimental/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/experimental/pages/types.d.ts

@@ -0,0 +1,29 @@
+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.
+ *
+ * @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.
+ */
+export type PageRouterComponent = ComponentType<PageRouterProps>;

package/dist/experimental/pages/types.js

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

package/dist/hs-internal/__tests__/createRemoteComponentInternal.spec.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { describe, expect, it } from 'vitest';
-import { createRenderer } from "../../testing/index.js";
-import { createRemoteComponentInternal } from "../index.js";
-import { __hubSpotComponentRegistry } from "../../shared/remoteComponents.js";
 import { Button, Text } from "../../index.js";
+import { __hubSpotComponentRegistry } from "../../shared/remoteComponents.js";
+import { createRenderer } from "../../testing/index.js";
 import { InvalidComponentsError } from "../../testing/internal/errors.js";
-import { useState } from 'react';
+import { createRemoteComponentInternal } from "../index.js";
 // Create custom components once at the top level
 const CustomButton = createRemoteComponentInternal('TestCustomButton');
 const CustomCard = createRemoteComponentInternal('TestCustomCard', {

package/dist/hubspot.js

@@ -1,4 +1,3 @@
-/* eslint-disable hubspot-dev/no-confusing-browser-globals */
 import { getWorkerGlobals } from "./internal/global-utils.js";
 const extend_V2 = getWorkerGlobals().extend_V2;
 export function serverless(name, options) {

package/dist/internal/global-utils.d.ts

@@ -1,4 +1,4 @@
-import { WorkerGlobalsInternal } from '../shared/types/worker-globals.ts';
+import type { WorkerGlobalsInternal } from '../shared/types/worker-globals.ts';
 /**
  * Gets the worker globals object for the current environment.
  * @returns The worker globals object.

package/dist/internal/hook-utils.d.ts

@@ -1,4 +1,5 @@
-import { RendererSpies } from '../testing/types.ts';
+import type { RendererMocksContext } from '../testing/internal/mocks/index.ts';
+import type { RendererMocks } from '../testing/types.ts';
 type AnyFunction = (...args: any[]) => any;
 /**
  * Creates a mock-aware hook function that can be used to mock the original hook function.
@@ -8,19 +9,19 @@ type AnyFunction = (...args: any[]) => any;
  * @param originalHookFunction The original hook function to call if no mock is found
  * @returns The mocked hook function or the original hook function if no mock is found
  */
-export declare const createMockAwareHook: <THookName extends keyof RendererSpies, THookFunction extends AnyFunction>(hookName: THookName, originalHookFunction: THookFunction) => THookFunction;
+export declare const createMockAwareHook: <THookName extends keyof RendererMocks, THookFunction extends AnyFunction>(hookName: THookName, originalHookFunction: THookFunction) => THookFunction;
 /**
  * A hook that provides access to the Mocks context.
- * Returns the mocks object if inside a MocksContextProvider, otherwise returns null.
+ * Returns the mocks context value if inside a MocksContextProvider, otherwise returns null.
  *
- * @returns The mocks object or null if not in a test environment.
+ * @returns The mocks context value or null if not in a test environment.
  */
-export declare function useMocksContext(): RendererSpies<"home" | "settings" | "crm.record.tab" | "crm.record.sidebar" | "crm.preview" | "helpdesk.sidebar" | "uie.playground.middle"> | null;
+export declare function useMocksContext(): RendererMocksContext | null;
 /**
  * A React component that provides the Mocks context that can be used to provide mocks to the mock-aware hook functions.
  *
  * @param children The children to render.
  * @returns The children wrapped in the Mocks context provider.
  */
-export declare const MocksContextProvider: import("react").Provider<RendererSpies<"home" | "settings" | "crm.record.tab" | "crm.record.sidebar" | "crm.preview" | "helpdesk.sidebar" | "uie.playground.middle"> | null>;
+export declare const MocksContextProvider: import("react").Provider<RendererMocksContext | null>;
 export {};

package/dist/internal/hook-utils.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-const MocksContext = createContext(null);
+const ReactRenderMocksContext = createContext(null);
 /**
  * Creates a mock-aware hook function that can be used to mock the original hook function.
  * The mock-aware hook function will return the mocked hook function if a mock is found, otherwise it will return the original hook function.
@@ -10,29 +10,28 @@ const MocksContext = createContext(null);
  */
 export const createMockAwareHook = (hookName, originalHookFunction) => {
     const useWrapper = (...args) => {
-        const mocks = useMocksContext();
-        if (!mocks) {
+        const mocksContext = useMocksContext();
+        if (!mocksContext) {
             // If no mocks are provided, call the original hook function
             return originalHookFunction(...args);
         }
-        // When a mock is provided by the testing utilities (via <MocksContextProvider>), return the mocked hook function
+        const { mocks } = mocksContext;
         const mockHook = mocks[hookName];
         if (!mockHook) {
             throw new Error(`Illegal State: Mock for hook ${hookName} not found.`);
         }
-        // Call the mocked hook function with the same arguments as the original hook function and return the result
         return mockHook(...args);
     };
     return useWrapper;
 };
 /**
  * A hook that provides access to the Mocks context.
- * Returns the mocks object if inside a MocksContextProvider, otherwise returns null.
+ * Returns the mocks context value if inside a MocksContextProvider, otherwise returns null.
  *
- * @returns The mocks object or null if not in a test environment.
+ * @returns The mocks context value or null if not in a test environment.
  */
 export function useMocksContext() {
-    return useContext(MocksContext);
+    return useContext(ReactRenderMocksContext);
 }
 /**
  * A React component that provides the Mocks context that can be used to provide mocks to the mock-aware hook functions.
@@ -40,4 +39,4 @@ export function useMocksContext() {
  * @param children The children to render.
  * @returns The children wrapped in the Mocks context provider.
  */
-export const MocksContextProvider = MocksContext.Provider;
+export const MocksContextProvider = ReactRenderMocksContext.Provider;

package/dist/pages/index.d.ts

@@ -0,0 +1 @@
+export { PageBreadcrumbs } from '../shared/remoteComponents.tsx';

package/dist/pages/index.js

@@ -0,0 +1 @@
+export { PageBreadcrumbs } from "../shared/remoteComponents.js";

package/dist/shared/remoteComponents.d.ts

@@ -1,6 +1,7 @@
-import type * as experimentalTypes from './types/experimental.ts';
 import type * as componentTypes from './types/components/index.ts';
-import * as crmTypes from './types/crm.ts';
+import type * as crmTypes from './types/crm.ts';
+import type * as experimentalTypes from './types/experimental.ts';
+import type * as pageComponentTypes from './types/pages/components/index.ts';
 /**
  * Represents a registry of HubSpot-provided React components that should only be used **internally** by the UI extension SDK.
  *
@@ -625,6 +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

@@ -646,6 +646,38 @@ export const SecondaryHeaderActionButton = createAndRegisterRemoteReactComponent
     fragmentProps: ['overlay'],
 });
 ////////////////////////////////////////////////////////
+// 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
 ////////////////////////////////////////////////////////
 /**