@wallarm-org/design-system 0.50.1 → 0.50.2-rc-feature-shell.2

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

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

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

@@ -1,13 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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 { NavPanelSkeleton, ProductNav, ProductNavBreadcrumbs, ProductNavPanel, useProductNavContext } from "../../ProductNav/index.js";
-import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel } from "../../RemoteShell/index.js";
+import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, useRemoteShellContext } from "../../RemoteShell/index.js";
 import { HomeContent } from "./_storyHomeContent.js";
 import { PRODUCT_CONFIGS } from "./_storyLib.js";
 const RemotePageContent = ()=>{
-    const { breadcrumbSegments } = useProductNavContext();
+    const { breadcrumbSegments } = useRemoteShellContext();
     const lastSegment = breadcrumbSegments[breadcrumbSegments.length - 1];
     const pageTitle = lastSegment?.label ?? '';
     const fullPath = breadcrumbSegments.map((s)=>s.label).join(' / ');
@@ -44,36 +42,24 @@ const ConfigRemote = ({ config, basePath })=>{
     }, [
         config.productLabel
     ]);
-    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, {
+    return /*#__PURE__*/ jsx(RemoteShell, {
         config: config,
         basePath: basePath,
-        children: /*#__PURE__*/ jsxs(RemoteShell, {
+        children: loading ? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(RemoteShellPanel, {
-                    children: /*#__PURE__*/ jsx(ProductNavPanel, {
-                        resizable: true
-                    })
+                    isLoading: true
                 }),
-                /*#__PURE__*/ jsx(RemoteShellBreadcrumb, {
-                    children: /*#__PURE__*/ jsx(ProductNavBreadcrumbs, {})
+                /*#__PURE__*/ jsx(RemoteShellContent, {
+                    isLoading: true
+                })
+            ]
+        }) : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(RemoteShellPanel, {
+                    resizable: true
                 }),
+                /*#__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 "../../ProductNav/index.js";
+import { findFirstLinkPath, pushPathname } from "../../RemoteShell/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 '../../ProductNav';
+import type { NavConfig } from '../../RemoteShell';
 export declare const edgeNavConfig: NavConfig;
 export declare const aiHypervisorNavConfig: NavConfig;
 export declare const infraDiscoveryNavConfig: NavConfig;

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

@@ -1,6 +1,7 @@
 import { CircleDashed, Filter, Plus } from "../../../icons/index.js";
 const edgeNavConfig = {
     productLabel: 'Edge',
+    productPath: '/edge',
     headerActions: [
         {
             icon: Filter,
@@ -340,6 +341,7 @@ const edgeNavConfig = {
 };
 const aiHypervisorNavConfig = {
     productLabel: 'AI Hypervisor',
+    productPath: '/ai-hypervisor',
     items: [
         {
             type: 'link',
@@ -454,6 +456,7 @@ const aiHypervisorNavConfig = {
 };
 const infraDiscoveryNavConfig = {
     productLabel: 'Infra Discovery',
+    productPath: '/infra-discovery',
     headerActions: [
         {
             icon: Filter,
@@ -554,6 +557,7 @@ const infraDiscoveryNavConfig = {
 };
 const securityTestingNavConfig = {
     productLabel: 'Security Testing',
+    productPath: '/security-testing',
     items: [
         {
             type: 'link',
@@ -627,6 +631,7 @@ 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', className),
+        className: cn('sticky top-0 z-10 flex shrink-0 items-center p-4 bg-bg-surface-2', 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-24 py-16', className),
+        className: cn('flex-1 min-h-0 overflow-auto px-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-24 py-16 gap-12', sticky && 'sticky top-0 z-10 bg-bg-primary', className),
+        className: cn('flex items-center px-16 pb-16 gap-12', sticky && 'sticky top-0 z-10 bg-bg-surface-2', className),
         children: children
     });
 };

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

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

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

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

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

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+interface NavPanelContentProps {
+    level: number;
+}
+export declare const NavPanelContent: FC<NavPanelContentProps>;
+export {};

package/dist/components/RemoteShell/NavPanelContent.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { NavPanelBack, NavPanelDivider, NavPanelHeader } from "../NavPanel/index.js";
+import { Text } from "../Text/index.js";
+import { HeaderActions } from "./HeaderActions.js";
+import { findDrillNode, useRemoteShellContext } from "./model/index.js";
+import { NavItemsList } from "./NavItemsList.js";
+const NavPanelContent = ({ level: rawLevel })=>{
+    const { config, navStack, effectiveActiveItemId, navigate, drillInto, goBack } = useRemoteShellContext();
+    const level = Math.min(rawLevel, navStack.length - 1);
+    const entry = navStack[level];
+    const hasHeaderActions = !!config.headerActions?.length;
+    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 bg-bg-surface-2",
+                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
+            })
+        ]
+    });
+};
+NavPanelContent.displayName = 'NavPanelContent';
+export { NavPanelContent };

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

@@ -1,7 +1,14 @@
 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>;

package/dist/components/RemoteShell/RemoteShell.js

@@ -1,16 +1,116 @@
 import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
-const RemoteShell = ({ ref, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
-        value: testId,
-        children: /*#__PURE__*/ jsx("div", {
-            ...props,
-            ref: ref,
-            "data-slot": "remote-shell",
-            "data-testid": testId,
-            className: cn('grid h-full overflow-hidden overscroll-none [grid-template-areas:"panel_breadcrumb""panel_content"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr]', className),
-            children: children
+import { RemoteShellContextProvider, findFirstLinkPath, matchNav, pushPathname, useLocationPathname } from "./model/index.js";
+const RemoteShell = ({ ref, className, children, config, basePath, onNavigate, 'data-testid': testId, ...props })=>{
+    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);
+        href === config.productPath ? setPathname('/') : setPathname(href);
+    }, [
+        config.productPath,
+        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(RemoteShellContextProvider, {
+        value: navCtxValue,
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: /*#__PURE__*/ jsx("div", {
+                ...props,
+                ref: ref,
+                "data-slot": "remote-shell",
+                "data-testid": testId,
+                className: cn('grid h-full overflow-hidden overscroll-none [grid-template-areas:"panel_breadcrumb""panel_content"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr]', className),
+                children: children
+            })
         })
     });
+};
 RemoteShell.displayName = 'RemoteShell';
 export { RemoteShell };

package/dist/components/RemoteShell/RemoteShellBreadcrumb.js

@@ -1,15 +1,50 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { Breadcrumbs, BreadcrumbsItem, BreadcrumbsScopeSwitcher } from "../Breadcrumbs/index.js";
+import { useRemoteShellContext } from "./model/index.js";
 const RemoteShellBreadcrumb = ({ ref, className, children, ...props })=>{
     const testId = useTestId('breadcrumb');
-    return /*#__PURE__*/ jsx("div", {
+    const { breadcrumbSegments, navigateTo } = useRemoteShellContext();
+    return /*#__PURE__*/ jsxs("div", {
         ...props,
         ref: ref,
         "data-slot": "remote-shell-breadcrumb",
         "data-testid": testId,
-        className: cn('[grid-area:breadcrumb] flex items-center px-24 py-8', className),
-        children: children
+        className: cn('[grid-area:breadcrumb] flex items-center gap-8 px-16 py-8', className),
+        children: [
+            /*#__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);
+                })
+            }),
+            children
+        ]
     });
 };
 RemoteShellBreadcrumb.displayName = 'RemoteShellBreadcrumb';

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

@@ -2,5 +2,6 @@ import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
 export interface RemoteShellContentProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
+    isLoading?: boolean;
 }
 export declare const RemoteShellContent: FC<RemoteShellContentProps>;

package/dist/components/RemoteShell/RemoteShellContent.js

@@ -1,15 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const RemoteShellContent = ({ ref, className, children, ...props })=>{
+import { Loader } from "../Loader/index.js";
+const RemoteShellContent = ({ ref, className, children, isLoading, ...props })=>{
     const testId = useTestId('content');
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "remote-shell-content",
         "data-testid": testId,
-        className: cn('[grid-area:content] min-h-0 overflow-auto overscroll-none px-24 py-16 [scrollbar-width:thin]', className),
-        children: children
+        className: cn('[grid-area:content] min-h-0 overflow-auto overscroll-none [scrollbar-width:thin]', isLoading && 'flex items-center justify-center', className),
+        children: isLoading ? /*#__PURE__*/ jsx(Loader, {
+            size: "3xl",
+            color: "brand"
+        }) : children
     });
 };
 RemoteShellContent.displayName = 'RemoteShellContent';

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

@@ -1,6 +1,8 @@
-import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { FC, HTMLAttributes, Ref } from 'react';
 export interface RemoteShellPanelProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
-    children?: ReactNode;
+    resizable?: boolean;
+    isLoading?: boolean;
+    loaderCount?: number;
 }
 export declare const RemoteShellPanel: FC<RemoteShellPanelProps>;

package/dist/components/RemoteShell/RemoteShellPanel.js

@@ -1,15 +1,88 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const RemoteShellPanel = ({ ref, className, children, ...props })=>{
+import { NavPanel, NavPanelHeader, NavPanelSkeleton } from "../NavPanel/index.js";
+import { useRemoteShellContext } from "./model/index.js";
+import { DRILL_ANIMATION_DURATION, DRILL_ANIMATION_EASING, useDrillTransition } from "./model/useDrillTransition.js";
+import { NavPanelContent } from "./NavPanelContent.js";
+const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount = 6, ...props })=>{
     const testId = useTestId('panel');
+    const { config, drillLevel } = useRemoteShellContext();
+    const { transition, clearTransition } = useDrillTransition(drillLevel);
+    if (isLoading) return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "remote-shell-panel",
+        "data-testid": testId,
+        className: cn('[grid-area:panel] min-h-0', className),
+        children: /*#__PURE__*/ jsxs(NavPanel, {
+            children: [
+                /*#__PURE__*/ jsx(NavPanelHeader, {
+                    children: config.productLabel
+                }),
+                /*#__PURE__*/ jsx(NavPanelSkeleton, {
+                    count: loaderCount
+                })
+            ]
+        })
+    });
+    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("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "remote-shell-panel",
+            "data-testid": testId,
+            className: cn('[grid-area:panel] min-h-0', className),
+            children: /*#__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: /*#__PURE__*/ jsx(NavPanelContent, {
+                                    level: 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: /*#__PURE__*/ jsx(NavPanelContent, {
+                                    level: isForward ? drillLevel : transition.fromLevel
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        });
+    }
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "remote-shell-panel",
         "data-testid": testId,
         className: cn('[grid-area:panel] min-h-0', className),
-        children: children
+        children: /*#__PURE__*/ jsx(NavPanel, {
+            resizable: resizable,
+            children: /*#__PURE__*/ jsx(NavPanelContent, {
+                level: drillLevel
+            })
+        })
     });
 };
 RemoteShellPanel.displayName = 'RemoteShellPanel';

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

@@ -1,3 +1,5 @@
+export type { BreadcrumbSegment, NavConfig, NavConfigDrill, NavConfigGroup, NavConfigHeaderAction, NavConfigLink, NavConfigNode, NavConfigSectionHeader, NavStackEntry, RemoteShellContextValue, } from './model';
+export { findFirstLinkPath, pushPathname, useLocationPathname, useRemoteShellContext, } from './model';
 export { RemoteShell, type RemoteShellProps } from './RemoteShell';
 export { RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps } from './RemoteShellBreadcrumb';
 export { RemoteShellContent, type RemoteShellContentProps } from './RemoteShellContent';

package/dist/components/RemoteShell/index.js

@@ -1,5 +1,6 @@
+import { findFirstLinkPath, pushPathname, useLocationPathname, useRemoteShellContext } from "./model/index.js";
 import { RemoteShell } from "./RemoteShell.js";
 import { RemoteShellBreadcrumb } from "./RemoteShellBreadcrumb.js";
 import { RemoteShellContent } from "./RemoteShellContent.js";
 import { RemoteShellPanel } from "./RemoteShellPanel.js";
-export { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel };
+export { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, findFirstLinkPath, pushPathname, useLocationPathname, useRemoteShellContext };

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

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

package/dist/components/RemoteShell/model/RemoteShellContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const RemoteShellCtx = createContext(null);
+const RemoteShellContextProvider = RemoteShellCtx.Provider;
+function useRemoteShellContext() {
+    const ctx = useContext(RemoteShellCtx);
+    if (!ctx) throw new Error('useRemoteShellContext must be used within a RemoteShell with a config prop');
+    return ctx;
+}
+export { RemoteShellContextProvider, useRemoteShellContext };

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

@@ -0,0 +1,5 @@
+export { type MatchNavResult, matchNav } from './matchNav';
+export { findDrillNode, findFirstLinkPath } from './navUtils';
+export { RemoteShellContextProvider, type RemoteShellContextValue, useRemoteShellContext, } from './RemoteShellContext';
+export type { BreadcrumbSegment, NavConfig, NavConfigDrill, NavConfigGroup, NavConfigHeaderAction, NavConfigLink, NavConfigNode, NavConfigSectionHeader, NavStackEntry, } from './types';
+export { pushPathname, useLocationPathname } from './useLocationPathname';

package/dist/components/RemoteShell/model/index.js

@@ -0,0 +1,5 @@
+import { matchNav } from "./matchNav.js";
+import { findDrillNode, findFirstLinkPath } from "./navUtils.js";
+import { RemoteShellContextProvider, useRemoteShellContext } from "./RemoteShellContext.js";
+import { pushPathname, useLocationPathname } from "./useLocationPathname.js";
+export { RemoteShellContextProvider, findDrillNode, findFirstLinkPath, matchNav, pushPathname, useLocationPathname, useRemoteShellContext };

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

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