@wallarm-org/design-system 0.50.2 → 0.51.0-rc-feature-AS-1026.2

package/dist/components/AppShell/story-content/_storyConfigRenderer.d.ts

@@ -1,4 +1,4 @@
-import { type NavConfig } from '../../RemoteShell';
+import { type NavConfig } from '../../ProductNav';
 import { type Product } from './_storyLib';
 export interface ConfigRemoteProps {
     config: NavConfig;

package/dist/components/AppShell/story-content/_storyConfigRenderer.js

@@ -1,11 +1,13 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { NavPanel, NavPanelHeader } from "../../NavPanel/index.js";
 import { Page, PageContent, PageHeader, PageTitle } from "../../Page/index.js";
-import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, useRemoteShellContext } from "../../RemoteShell/index.js";
+import { NavPanelSkeleton, ProductNav, ProductNavBreadcrumbs, ProductNavPanel, useProductNavContext } from "../../ProductNav/index.js";
+import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel } from "../../RemoteShell/index.js";
 import { HomeContent } from "./_storyHomeContent.js";
 import { PRODUCT_CONFIGS } from "./_storyLib.js";
 const RemotePageContent = ()=>{
-    const { breadcrumbSegments } = useRemoteShellContext();
+    const { breadcrumbSegments } = useProductNavContext();
     const lastSegment = breadcrumbSegments[breadcrumbSegments.length - 1];
     const pageTitle = lastSegment?.label ?? '';
     const fullPath = breadcrumbSegments.map((s)=>s.label).join(' / ');
@@ -42,24 +44,36 @@ const ConfigRemote = ({ config, basePath })=>{
     }, [
         config.productLabel
     ]);
-    return /*#__PURE__*/ jsx(RemoteShell, {
+    if (loading) return /*#__PURE__*/ jsxs(RemoteShell, {
+        children: [
+            /*#__PURE__*/ jsx(RemoteShellPanel, {
+                children: /*#__PURE__*/ jsxs(NavPanel, {
+                    children: [
+                        /*#__PURE__*/ jsx(NavPanelHeader, {
+                            children: config.productLabel
+                        }),
+                        /*#__PURE__*/ jsx(NavPanelSkeleton, {
+                            count: 6
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(RemoteShellContent, {})
+        ]
+    });
+    return /*#__PURE__*/ jsx(ProductNav, {
         config: config,
         basePath: basePath,
-        children: loading ? /*#__PURE__*/ jsxs(Fragment, {
+        children: /*#__PURE__*/ jsxs(RemoteShell, {
             children: [
                 /*#__PURE__*/ jsx(RemoteShellPanel, {
-                    isLoading: true
+                    children: /*#__PURE__*/ jsx(ProductNavPanel, {
+                        resizable: true
+                    })
                 }),
-                /*#__PURE__*/ jsx(RemoteShellContent, {
-                    isLoading: true
-                })
-            ]
-        }) : /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsx(RemoteShellPanel, {
-                    resizable: true
+                /*#__PURE__*/ jsx(RemoteShellBreadcrumb, {
+                    children: /*#__PURE__*/ jsx(ProductNavBreadcrumbs, {})
                 }),
-                /*#__PURE__*/ jsx(RemoteShellBreadcrumb, {}),
                 /*#__PURE__*/ jsx(RemoteShellContent, {
                     children: /*#__PURE__*/ jsx(RemotePageContent, {})
                 })

package/dist/components/AppShell/story-content/_storyLib.js

@@ -1,4 +1,4 @@
-import { findFirstLinkPath, pushPathname } from "../../RemoteShell/index.js";
+import { findFirstLinkPath, pushPathname } from "../../ProductNav/index.js";
 import { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig } from "./_storyNavConfigs.js";
 const KNOWN_PRODUCTS = [
     'home',

package/dist/components/AppShell/story-content/_storyNavConfigs.d.ts

@@ -1,4 +1,4 @@
-import type { NavConfig } from '../../RemoteShell';
+import type { NavConfig } from '../../ProductNav';
 export declare const edgeNavConfig: NavConfig;
 export declare const aiHypervisorNavConfig: NavConfig;
 export declare const infraDiscoveryNavConfig: NavConfig;

package/dist/components/AppShell/story-content/_storyNavConfigs.js

@@ -1,7 +1,6 @@
 import { CircleDashed, Filter, Plus } from "../../../icons/index.js";
 const edgeNavConfig = {
     productLabel: 'Edge',
-    productPath: '/edge',
     headerActions: [
         {
             icon: Filter,
@@ -341,7 +340,6 @@ const edgeNavConfig = {
 };
 const aiHypervisorNavConfig = {
     productLabel: 'AI Hypervisor',
-    productPath: '/ai-hypervisor',
     items: [
         {
             type: 'link',
@@ -456,7 +454,6 @@ const aiHypervisorNavConfig = {
 };
 const infraDiscoveryNavConfig = {
     productLabel: 'Infra Discovery',
-    productPath: '/infra-discovery',
     headerActions: [
         {
             icon: Filter,
@@ -557,7 +554,6 @@ const infraDiscoveryNavConfig = {
 };
 const securityTestingNavConfig = {
     productLabel: 'Security Testing',
-    productPath: '/security-testing',
     items: [
         {
             type: 'link',
@@ -631,7 +627,6 @@ const securityTestingNavConfig = {
 };
 const settingsNavConfig = {
     productLabel: 'Settings',
-    productPath: '/settings',
     items: [
         {
             type: 'link',

package/dist/components/NavPanel/NavPanelHeader.js

@@ -9,7 +9,7 @@ const NavPanelHeader = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "nav-panel-header",
         "data-testid": testId,
-        className: cn('sticky top-0 z-10 flex shrink-0 items-center p-4 bg-bg-surface-2', className),
+        className: cn('sticky top-0 z-10 flex shrink-0 items-center p-4', className),
         children: /*#__PURE__*/ jsx(Text, {
             size: "sm",
             weight: "medium",

package/dist/components/Page/PageContent.js

@@ -8,7 +8,7 @@ const PageContent = ({ ref, children, className, ...props })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "page-content",
-        className: cn('flex-1 min-h-0 overflow-auto px-16', className),
+        className: cn('flex-1 min-h-0 overflow-auto px-24 py-16', className),
         children: children
     });
 };

package/dist/components/Page/PageHeader.js

@@ -8,7 +8,7 @@ const PageHeader = ({ ref, sticky, children, className, ...props })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "page-header",
-        className: cn('flex items-center px-16 pb-16 gap-12', sticky && 'sticky top-0 z-10 bg-bg-surface-2', className),
+        className: cn('flex items-center px-24 py-16 gap-12', sticky && 'sticky top-0 z-10 bg-bg-primary', className),
         children: children
     });
 };

package/dist/components/{RemoteShell → ProductNav}/HeaderActions.d.ts

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import type { NavConfigHeaderAction } from './model';
+import type { NavConfigHeaderAction } from './types';
 export type HeaderActionsProps = {
     actions: NavConfigHeaderAction[];
 };

package/dist/components/{RemoteShell → ProductNav}/NavItemsList.d.ts

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import type { NavConfigDrill, NavConfigNode } from './model/types';
+import type { NavConfigDrill, NavConfigNode } from './types';
 export type NavItemsListProps = {
     items: NavConfigNode[];
     activeItemId: string | null;

package/dist/components/ProductNav/ProductNav.d.ts

@@ -0,0 +1,13 @@
+import { type FC, type ReactNode } from 'react';
+import type { NavConfig } from './types';
+export interface ProductNavProps {
+    config: NavConfig;
+    /** URL prefix stripped before matching and prepended when navigating.
+     *  Example: `"/edge"` turns URL `/edge/overview` into effective pathname `/overview`. */
+    basePath?: string;
+    /** Custom navigation handler for router integration (React Router, Next.js, etc.).
+     *  Default: uses history.pushState to update the URL directly. */
+    onNavigate?: (pathname: string) => void;
+    children: ReactNode;
+}
+export declare const ProductNav: FC<ProductNavProps>;

package/dist/components/ProductNav/ProductNav.js

@@ -0,0 +1,109 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { matchNav } from "./matchNav.js";
+import { findFirstLinkPath } from "./navUtils.js";
+import { ProductNavContextProvider } from "./ProductNavContext.js";
+import { pushPathname, useLocationPathname } from "./useLocationPathname.js";
+const ProductNav = ({ config, basePath, onNavigate, children })=>{
+    const fullPathname = useLocationPathname();
+    const pathname = basePath && fullPathname.startsWith(basePath) ? fullPathname.slice(basePath.length) || '/' : fullPathname;
+    const setPathname = useCallback((next)=>{
+        const fullPath = basePath ? `${basePath}${next}` : next;
+        if (onNavigate) onNavigate(fullPath);
+        else pushPathname(fullPath);
+    }, [
+        basePath,
+        onNavigate
+    ]);
+    const { navStack, breadcrumbSegments, activeItemId } = useMemo(()=>matchNav(pathname, config), [
+        pathname,
+        config
+    ]);
+    const urlDrillLevel = navStack.length - 1;
+    const [visualDrillLevel, setVisualDrillLevel] = useState(null);
+    useEffect(()=>{
+        setVisualDrillLevel(null);
+    }, [
+        pathname
+    ]);
+    const effectiveDrillLevel = visualDrillLevel ?? urlDrillLevel;
+    const effectiveActiveItemId = effectiveDrillLevel < urlDrillLevel ? navStack[effectiveDrillLevel]?.activeItemId ?? activeItemId : activeItemId;
+    const navigate = useCallback((path)=>{
+        setVisualDrillLevel(null);
+        const segments = pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
+        const prefixSegments = segments.slice(0, 2 * effectiveDrillLevel);
+        setPathname(`/${[
+            ...prefixSegments,
+            path
+        ].join('/')}`);
+    }, [
+        effectiveDrillLevel,
+        pathname,
+        setPathname
+    ]);
+    const drillInto = useCallback((drill)=>{
+        setVisualDrillLevel(null);
+        const segments = pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
+        const prefixSegments = segments.slice(0, 2 * effectiveDrillLevel);
+        const defaultEntity = drill.entities?.[0]?.id ?? 'default';
+        const firstChildPath = findFirstLinkPath(drill.children) ?? '';
+        setPathname(`/${[
+            ...prefixSegments,
+            drill.path,
+            defaultEntity,
+            firstChildPath
+        ].join('/')}`);
+    }, [
+        effectiveDrillLevel,
+        pathname,
+        setPathname
+    ]);
+    const goBack = useCallback(()=>{
+        setVisualDrillLevel((prev)=>{
+            const current = prev ?? urlDrillLevel;
+            return Math.max(current - 1, 0);
+        });
+    }, [
+        urlDrillLevel
+    ]);
+    const navigateTo = useCallback((href)=>{
+        setVisualDrillLevel(null);
+        if ('/' === href) {
+            const firstPath = findFirstLinkPath(config.items) ?? '';
+            setPathname(`/${firstPath}`);
+        } else setPathname(href);
+    }, [
+        config.items,
+        setPathname
+    ]);
+    const navCtxValue = useMemo(()=>({
+            config,
+            pathname,
+            navStack,
+            breadcrumbSegments,
+            activeItemId,
+            drillLevel: effectiveDrillLevel,
+            effectiveActiveItemId,
+            navigate,
+            drillInto,
+            goBack,
+            navigateTo
+        }), [
+        config,
+        pathname,
+        navStack,
+        breadcrumbSegments,
+        activeItemId,
+        effectiveDrillLevel,
+        effectiveActiveItemId,
+        navigate,
+        drillInto,
+        goBack,
+        navigateTo
+    ]);
+    return /*#__PURE__*/ jsx(ProductNavContextProvider, {
+        value: navCtxValue,
+        children: children
+    });
+};
+export { ProductNav };

package/dist/components/ProductNav/ProductNavBreadcrumbs.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const ProductNavBreadcrumbs: FC;

package/dist/components/ProductNav/ProductNavBreadcrumbs.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { Breadcrumbs, BreadcrumbsItem, BreadcrumbsScopeSwitcher } from "../Breadcrumbs/index.js";
+import { useProductNavContext } from "./ProductNavContext.js";
+const ProductNavBreadcrumbs = ()=>{
+    const { breadcrumbSegments, navigateTo } = useProductNavContext();
+    return /*#__PURE__*/ jsx(Breadcrumbs, {
+        "data-slot": "nav-breadcrumbs",
+        children: breadcrumbSegments.map((segment, i)=>{
+            const isLast = i === breadcrumbSegments.length - 1;
+            if ('scope-switcher' === segment.type) {
+                if (segment.scopeItems?.length && segment.paramValue) return /*#__PURE__*/ jsx(BreadcrumbsScopeSwitcher, {
+                    value: segment.paramValue,
+                    items: segment.scopeItems,
+                    onSelect: (item)=>navigateTo?.(item.href),
+                    children: segment.label
+                }, i);
+                return /*#__PURE__*/ jsx(BreadcrumbsItem, {
+                    children: segment.label
+                }, i);
+            }
+            if ('link' === segment.type && !isLast) return /*#__PURE__*/ jsx(BreadcrumbsItem, {
+                href: segment.href,
+                onClick: (e)=>{
+                    if (navigateTo && segment.href) {
+                        e.preventDefault();
+                        navigateTo(segment.href);
+                    }
+                },
+                children: segment.label
+            }, i);
+            return /*#__PURE__*/ jsx(BreadcrumbsItem, {
+                children: segment.label
+            }, i);
+        })
+    });
+};
+ProductNavBreadcrumbs.displayName = 'ProductNavBreadcrumbs';
+export { ProductNavBreadcrumbs };

package/dist/components/{RemoteShell/model/RemoteShellContext.d.ts → ProductNav/ProductNavContext.d.ts}

@@ -1,5 +1,5 @@
 import type { BreadcrumbSegment, NavConfig, NavConfigDrill, NavStackEntry } from './types';
-export interface RemoteShellContextValue {
+export interface ProductNavContextValue {
     config: NavConfig;
     pathname: string;
     navStack: NavStackEntry[];
@@ -18,5 +18,5 @@ export interface RemoteShellContextValue {
     /** Navigate to an absolute href (used by breadcrumbs) */
     navigateTo: (href: string) => void;
 }
-export declare const RemoteShellContextProvider: import("react").Provider<RemoteShellContextValue | null>;
-export declare function useRemoteShellContext(): RemoteShellContextValue;
+export declare const ProductNavContextProvider: import("react").Provider<ProductNavContextValue | null>;
+export declare function useProductNavContext(): ProductNavContextValue;

package/dist/components/ProductNav/ProductNavContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const ProductNavCtx = createContext(null);
+const ProductNavContextProvider = ProductNavCtx.Provider;
+function useProductNavContext() {
+    const ctx = useContext(ProductNavCtx);
+    if (!ctx) throw new Error('useProductNavContext must be used within a ProductNav provider');
+    return ctx;
+}
+export { ProductNavContextProvider, useProductNavContext };

package/dist/components/ProductNav/ProductNavPanel.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+type ProductNavPanelProps = {
+    resizable?: boolean;
+};
+export declare const ProductNavPanel: FC<ProductNavPanelProps>;
+export {};

package/dist/components/ProductNav/ProductNavPanel.js

@@ -0,0 +1,107 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { NavPanel, NavPanelBack, NavPanelDivider, NavPanelHeader } from "../NavPanel/index.js";
+import { Text } from "../Text/index.js";
+import { HeaderActions } from "./HeaderActions.js";
+import { NavItemsList } from "./NavItemsList.js";
+import { findDrillNode } from "./navUtils.js";
+import { useProductNavContext } from "./ProductNavContext.js";
+import { DRILL_ANIMATION_DURATION, DRILL_ANIMATION_EASING, useDrillTransition } from "./useDrillTransition.js";
+const ProductNavPanel = ({ resizable })=>{
+    const { config, navStack, effectiveActiveItemId, navigate, drillInto, goBack, drillLevel } = useProductNavContext();
+    const { transition, clearTransition } = useDrillTransition(drillLevel);
+    const hasHeaderActions = !!config.headerActions?.length;
+    const renderContent = (level)=>{
+        const entry = navStack[Math.min(level, navStack.length - 1)];
+        if (0 === level) return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                hasHeaderActions ? /*#__PURE__*/ jsxs("div", {
+                    className: "sticky top-0 z-10 flex shrink-0 items-center justify-between p-4",
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "sm",
+                            weight: "medium",
+                            children: config.productLabel
+                        }),
+                        /*#__PURE__*/ jsx(HeaderActions, {
+                            actions: config.headerActions
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx(NavPanelHeader, {
+                    children: config.productLabel
+                }),
+                /*#__PURE__*/ jsx(NavItemsList, {
+                    items: config.items,
+                    activeItemId: effectiveActiveItemId,
+                    onNavigate: navigate,
+                    onDrillClick: drillInto
+                })
+            ]
+        });
+        const parentEntry = navStack[level - 1];
+        const drillNode = findDrillNode(parentEntry.items, parentEntry.activeItemId);
+        const backLabel = drillNode?.label ?? 'Back';
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: "sticky top-0 z-10 flex flex-col gap-2 bg-bg-surface-1",
+                    children: [
+                        /*#__PURE__*/ jsx(NavPanelHeader, {
+                            children: entry.title
+                        }),
+                        /*#__PURE__*/ jsx(NavPanelBack, {
+                            onClick: goBack,
+                            children: backLabel
+                        }),
+                        /*#__PURE__*/ jsx(NavPanelDivider, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsx(NavItemsList, {
+                    items: entry.items,
+                    activeItemId: effectiveActiveItemId,
+                    onNavigate: navigate,
+                    onDrillClick: drillInto
+                })
+            ]
+        });
+    };
+    if (transition) {
+        const isForward = 'forward' === transition.direction;
+        const slideAnim = isForward ? 'ds-nav-drill-forward' : 'ds-nav-drill-backward';
+        const timing = `${DRILL_ANIMATION_DURATION} ${DRILL_ANIMATION_EASING} both`;
+        return /*#__PURE__*/ jsx(NavPanel, {
+            resizable: resizable,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "min-h-0 flex-1 overflow-hidden",
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "flex motion-reduce:animate-none",
+                    style: {
+                        animation: `${slideAnim} ${timing}`
+                    },
+                    onAnimationEnd: clearTransition,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "flex w-full shrink-0 flex-col gap-2 motion-reduce:animate-none",
+                            style: {
+                                animation: `${isForward ? 'ds-nav-blur-out' : 'ds-nav-blur-in'} ${timing}`
+                            },
+                            children: renderContent(isForward ? transition.fromLevel : drillLevel)
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "flex w-full shrink-0 flex-col gap-2 motion-reduce:animate-none",
+                            style: {
+                                animation: `${isForward ? 'ds-nav-blur-in' : 'ds-nav-blur-out'} ${timing}`
+                            },
+                            children: renderContent(isForward ? drillLevel : transition.fromLevel)
+                        })
+                    ]
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(NavPanel, {
+        resizable: resizable,
+        children: renderContent(drillLevel)
+    });
+};
+ProductNavPanel.displayName = 'ProductNavPanel';
+export { ProductNavPanel };

package/dist/components/ProductNav/index.d.ts

@@ -0,0 +1,11 @@
+export { NavPanelSkeleton, type NavPanelSkeletonProps } from '../NavPanel';
+export { type MatchNavResult, matchNav } from './matchNav';
+export { findDrillNode, findFirstLinkPath } from './navUtils';
+export { ProductNav, type ProductNavProps } from './ProductNav';
+export { ProductNavBreadcrumbs } from './ProductNavBreadcrumbs';
+export type { ProductNavContextValue } from './ProductNavContext';
+export { useProductNavContext } from './ProductNavContext';
+export { ProductNavPanel } from './ProductNavPanel';
+export type { BreadcrumbSegment, NavConfig, NavConfigDrill, NavConfigGroup, NavConfigHeaderAction, NavConfigLink, NavConfigNode, NavConfigSectionHeader, NavStackEntry, } from './types';
+export { pushPathname, useLocationPathname } from './useLocationPathname';
+export { type UseProductNavResult, useProductNav } from './useProductNav';

package/dist/components/ProductNav/index.js

@@ -0,0 +1,10 @@
+import { NavPanelSkeleton } from "../NavPanel/index.js";
+import { matchNav } from "./matchNav.js";
+import { findDrillNode, findFirstLinkPath } from "./navUtils.js";
+import { ProductNav } from "./ProductNav.js";
+import { ProductNavBreadcrumbs } from "./ProductNavBreadcrumbs.js";
+import { useProductNavContext } from "./ProductNavContext.js";
+import { ProductNavPanel } from "./ProductNavPanel.js";
+import { pushPathname, useLocationPathname } from "./useLocationPathname.js";
+import { useProductNav } from "./useProductNav.js";
+export { NavPanelSkeleton, ProductNav, ProductNavBreadcrumbs, ProductNavPanel, findDrillNode, findFirstLinkPath, matchNav, pushPathname, useLocationPathname, useProductNav, useProductNavContext };

package/dist/components/{RemoteShell/model → ProductNav}/matchNav.js

@@ -28,7 +28,7 @@ const matchNav = (pathname, config)=>{
     breadcrumbSegments.push({
         type: 'link',
         label: config.productLabel,
-        href: config.productPath
+        href: '/'
     });
     let segmentIndex = 0;
     let currentItems = config.items;

package/dist/components/{RemoteShell/model → ProductNav}/types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { SvgIconProps } from '../../../icons/SvgIcon';
+import type { SvgIconProps } from '../../icons/SvgIcon';
 export interface NavConfigHeaderAction {
     icon: ComponentType<SvgIconProps>;
     label: string;
@@ -8,7 +8,6 @@ export interface NavConfigHeaderAction {
 }
 export interface NavConfig {
     productLabel: string;
-    productPath: string;
     items: NavConfigNode[];
     headerActions?: NavConfigHeaderAction[];
 }
@@ -36,6 +35,7 @@ export interface NavConfigDrill {
         label: string;
         description?: string;
     }[];
+    /** Render a visual divider after this item */
     dividerAfter?: boolean;
 }
 export interface NavConfigGroup {
@@ -45,6 +45,7 @@ export interface NavConfigGroup {
     children: NavConfigNode[];
     icon?: ComponentType<SvgIconProps>;
     defaultExpanded?: boolean;
+    /** Render a visual divider after this item */
     dividerAfter?: boolean;
 }
 export interface NavConfigSectionHeader {

package/dist/components/ProductNav/useProductNav.d.ts

@@ -0,0 +1,16 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import type { BreadcrumbSegment, NavStackEntry } from './types';
+export interface UseProductNavResult {
+    navStack: NavStackEntry[];
+    peekDepth: number;
+    setPeekDepth: Dispatch<SetStateAction<number>>;
+    breadcrumbSegments: BreadcrumbSegment[];
+    activeItemId: string | null;
+}
+/**
+ * Hook providing computed nav state + peekDepth management.
+ *
+ * Reads computed state from ProductNav context.
+ * `peekDepth` is the only local mutable state and resets on pathname changes.
+ */
+export declare function useProductNav(): UseProductNavResult;

package/dist/components/ProductNav/useProductNav.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import { useProductNavContext } from "./ProductNavContext.js";
+function useProductNav() {
+    const { pathname, navStack, breadcrumbSegments, activeItemId } = useProductNavContext();
+    const [peekDepth, setPeekDepth] = useState(0);
+    useEffect(()=>{
+        setPeekDepth(0);
+    }, [
+        pathname
+    ]);
+    return {
+        navStack,
+        peekDepth,
+        setPeekDepth,
+        breadcrumbSegments,
+        activeItemId
+    };
+}
+export { useProductNav };

package/dist/components/RemoteShell/RemoteShell.d.ts

@@ -1,14 +1,7 @@
 import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
 import { type TestableProps } from '../../utils/testId';
-import type { NavConfig } from './model';
 export interface RemoteShellProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
-    /** Navigation config used to build nav state for sub-components. */
-    config: NavConfig;
-    /** URL prefix stripped before matching and prepended when navigating (e.g. `"/edge"`). */
-    basePath?: string;
-    /** Custom navigation handler for router integration (React Router, Next.js, etc.). */
-    onNavigate?: (pathname: string) => void;
 }
 export declare const RemoteShell: FC<RemoteShellProps>;