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

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/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,64 @@
+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 })=>{
+    const { config, navStack, effectiveActiveItemId, navigate, drillInto, goBack } = useRemoteShellContext();
+    const entry = navStack[Math.min(level, navStack.length - 1)];
+    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,119 @@
 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);
+        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(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}/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;
@@ -35,7 +35,6 @@ export interface NavConfigDrill {
         label: string;
         description?: string;
     }[];
-    /** Render a visual divider after this item */
     dividerAfter?: boolean;
 }
 export interface NavConfigGroup {
@@ -45,7 +44,6 @@ export interface NavConfigGroup {
     children: NavConfigNode[];
     icon?: ComponentType<SvgIconProps>;
     defaultExpanded?: boolean;
-    /** Render a visual divider after this item */
     dividerAfter?: boolean;
 }
 export interface NavConfigSectionHeader {

package/dist/index.d.ts

@@ -47,10 +47,9 @@ export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentPro
 export { Page, PageActions, type PageActionsProps, PageContent, type PageContentProps, PageHeader, type PageHeaderProps, type PageHostContextValue, PageHostProvider, type PageLayoutOptions, type PageProps, PageTitle, type PageTitleProps, usePageHost, } from './components/Page';
 export { type CopyFormatData, formatAsFilter, ParameterPath, type ParameterPathProps, } from './components/ParameterPath';
 export { Popover, PopoverContent, PopoverTrigger } from './components/Popover';
-export { type BreadcrumbSegment, findDrillNode, findFirstLinkPath, type MatchNavResult, matchNav, type NavConfig, type NavConfigDrill, type NavConfigGroup, type NavConfigLink, type NavConfigNode, NavPanelSkeleton, type NavPanelSkeletonProps, type NavStackEntry, ProductNav, ProductNavBreadcrumbs, type ProductNavContextValue, ProductNavPanel, type ProductNavProps, type UseProductNavResult, useProductNav, useProductNavContext, } from './components/ProductNav';
 export { Progress, type ProgressColor, type ProgressProps, } from './components/Progress';
 export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type RadioGroupProps, RadioIndicator, RadioLabel, type RadioLabelProps, type RadioProps, } from './components/Radio';
-export { RemoteShell, RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps, RemoteShellContent, type RemoteShellContentProps, RemoteShellPanel, type RemoteShellPanelProps, type RemoteShellProps, } from './components/RemoteShell';
+export { type BreadcrumbSegment, findFirstLinkPath, type NavConfig, type NavConfigDrill, type NavConfigGroup, type NavConfigLink, type NavConfigNode, type NavStackEntry, pushPathname, RemoteShell, RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps, RemoteShellContent, type RemoteShellContentProps, type RemoteShellContextValue, RemoteShellPanel, type RemoteShellPanelProps, type RemoteShellProps, useLocationPathname, useRemoteShellContext, } from './components/RemoteShell';
 export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type ResponseCodeCategory, type ResponseCodeProps, } from './components/ResponseCode';
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';