@wallarm-org/design-system 0.51.0-rc-feature-AS-1026.1 → 0.51.1-rc-fix-table-virtualization-scroll-loop.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/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/ParameterPath/ParameterPath.js

@@ -1,17 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from "react";
+import { useControlled } from "../../hooks/index.js";
 import { cn } from "../../utils/cn.js";
+import { hasTextSelection } from "../../utils/hasTextSelection.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
 import { buildFullPathLabel } from "./buildFullPathLabel.js";
+import { EXPAND_KEYS } from "./constants.js";
 import { formatAsFilter } from "./formatAsFilter.js";
-import { ParameterPathEllipsis } from "./ParameterPathEllipsis.js";
-import { ParameterPathEncoding } from "./ParameterPathEncoding.js";
-import { ParameterPathJoint } from "./ParameterPathJoint.js";
-import { ParameterPathMethod } from "./ParameterPathMethod.js";
-import { ParameterPathSegment } from "./ParameterPathSegment.js";
+import { ParameterPathRow } from "./ParameterPathRow.js";
 import { useParameterPathTruncation } from "./useParameterPathTruncation.js";
-const ParameterPath = ({ ref, method, segments, encoding, attack = false, copyFormat = formatAsFilter, className, 'data-testid': testId, ...rest })=>{
+const ParameterPath = ({ ref, method, segments, encoding, attack = false, expandable = false, expanded, defaultExpanded = false, onExpandedChange, copyFormat = formatAsFilter, className, 'data-testid': testId, ...rest })=>{
+    const [expandedState, setExpandedUncontrolled] = useControlled({
+        controlled: expanded,
+        default: defaultExpanded
+    });
+    const setExpanded = useCallback((next)=>{
+        setExpandedUncontrolled(next);
+        onExpandedChange?.(next);
+    }, [
+        setExpandedUncontrolled,
+        onExpandedChange
+    ]);
     const handleCopy = useCallback((event)=>{
         const text = copyFormat({
             method,
@@ -36,63 +46,28 @@ const ParameterPath = ({ ref, method, segments, encoding, attack = false, copyFo
         hasMethod: Boolean(method),
         hasEncoding: Boolean(encoding)
     });
-    const lastIndex = segments.length - 1;
-    const indices = isTruncated && segments.length > 2 ? visibleSegmentIndices : null;
-    const renderRow = (forMeasurement)=>{
-        const visibleIdx = forMeasurement || null === indices ? Array.from({
-            length: segments.length
-        }, (_, i)=>i) : indices;
-        const items = [];
-        const measure = (slot)=>forMeasurement ? slot : void 0;
-        if (method) items.push(/*#__PURE__*/ jsx(ParameterPathMethod, {
-            method: method,
-            "data-measure": measure('method')
-        }, "method"));
-        visibleIdx.forEach((segIndex, position)=>{
-            const value = segments[segIndex];
-            if (void 0 === value) return;
-            const isLast = segIndex === lastIndex;
-            const isFirstShown = 0 === position;
-            const showJointBefore = !(isFirstShown && !method);
-            if (showJointBefore) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {
-                "data-measure": measure('joint')
-            }, `j-${segIndex}-pre`));
-            const isCollapsedBoundary = !forMeasurement && null !== indices && 0 === position && 2 === visibleIdx.length;
-            items.push(/*#__PURE__*/ jsx(ParameterPathSegment, {
-                index: segIndex,
-                variant: isLast ? 'highlighted' : 'default',
-                withZap: isLast && attack,
-                "data-measure": measure('segment'),
-                children: value
-            }, `s-${segIndex}`));
-            if (isCollapsedBoundary) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {}, "ellipsis-joint-pre"), /*#__PURE__*/ jsx(ParameterPathEllipsis, {}, "ellipsis"));
-        });
-        if (encoding) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {
-            "data-measure": measure('joint')
-        }, "enc-joint"), /*#__PURE__*/ jsx(ParameterPathEncoding, {
-            "data-measure": measure('encoding'),
-            children: encoding
-        }, "enc"));
-        return items;
-    };
-    const visibleRow = /*#__PURE__*/ jsx("div", {
-        ref: containerRef,
-        "data-row": "visible",
-        className: "flex items-center gap-0 min-w-0 overflow-hidden",
-        children: renderRow(false)
-    });
-    const measurementRow = /*#__PURE__*/ jsx("div", {
-        ref: measurementRef,
-        "data-row": "measure",
-        "aria-hidden": "true",
-        className: "flex items-center gap-0 absolute left-[-9999px] top-0 invisible pointer-events-none",
-        children: /*#__PURE__*/ jsx(TestIdProvider, {
-            value: void 0,
-            children: renderRow(true)
-        })
-    });
+    const collapsible = isTruncated && segments.length > 2;
+    const isExpanded = Boolean(expandedState) && collapsible;
+    const interactive = expandable && collapsible;
+    const indices = collapsible && !isExpanded ? visibleSegmentIndices : null;
+    const toggleExpanded = useCallback(()=>{
+        if (hasTextSelection()) return;
+        setExpanded(!isExpanded);
+    }, [
+        isExpanded,
+        setExpanded
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        if (EXPAND_KEYS.includes(event.key)) {
+            event.preventDefault();
+            setExpanded(!isExpanded);
+        }
+    }, [
+        isExpanded,
+        setExpanded
+    ]);
     return /*#__PURE__*/ jsxs(Tooltip, {
-        disabled: !isTruncated,
+        disabled: !isTruncated || isExpanded,
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
                 asChild: true,
@@ -101,14 +76,37 @@ const ParameterPath = ({ ref, method, segments, encoding, attack = false, copyFo
                     "data-testid": testId,
                     "data-slot": "parameter-path",
                     "data-truncated": isTruncated || void 0,
+                    "data-expanded": isExpanded || void 0,
                     ref: ref,
                     onCopy: handleCopy,
-                    className: cn('relative flex items-center min-w-0', className),
+                    role: interactive ? 'button' : void 0,
+                    tabIndex: interactive ? 0 : void 0,
+                    "aria-expanded": interactive ? isExpanded : void 0,
+                    onClick: interactive ? toggleExpanded : void 0,
+                    onKeyDown: interactive ? handleKeyDown : void 0,
+                    className: cn('relative flex items-center min-w-0', interactive && 'cursor-pointer', className),
                     children: /*#__PURE__*/ jsxs(TestIdProvider, {
                         value: testId,
                         children: [
-                            visibleRow,
-                            measurementRow
+                            /*#__PURE__*/ jsx(ParameterPathRow, {
+                                ref: containerRef,
+                                forMeasurement: false,
+                                isExpanded: isExpanded,
+                                indices: indices,
+                                method: method,
+                                segments: segments,
+                                encoding: encoding,
+                                attack: attack
+                            }),
+                            /*#__PURE__*/ jsx(ParameterPathRow, {
+                                ref: measurementRef,
+                                forMeasurement: true,
+                                indices: null,
+                                method: method,
+                                segments: segments,
+                                encoding: encoding,
+                                attack: attack
+                            })
                         ]
                     })
                 })

package/dist/components/ParameterPath/ParameterPathRow.d.ts

@@ -0,0 +1,14 @@
+import type { FC, Ref } from 'react';
+import type { HttpMethodName } from '../HttpMethod';
+interface ParameterPathRowProps {
+    ref?: Ref<HTMLDivElement>;
+    method?: HttpMethodName;
+    segments: string[];
+    encoding?: string;
+    attack: boolean;
+    forMeasurement: boolean;
+    indices: number[] | null;
+    isExpanded?: boolean;
+}
+export declare const ParameterPathRow: FC<ParameterPathRowProps>;
+export {};

package/dist/components/ParameterPath/ParameterPathRow.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import { range } from "../../utils/range.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { rowVariants } from "./classes.js";
+import { MEASURE, ROW } from "./constants.js";
+import { ParameterPathEllipsis } from "./ParameterPathEllipsis.js";
+import { ParameterPathEncoding } from "./ParameterPathEncoding.js";
+import { ParameterPathJoint } from "./ParameterPathJoint.js";
+import { ParameterPathMethod } from "./ParameterPathMethod.js";
+import { ParameterPathSegment } from "./ParameterPathSegment.js";
+const ParameterPathRow = ({ ref, method, segments, encoding, attack, forMeasurement, indices, isExpanded = false })=>{
+    const lastIndex = segments.length - 1;
+    const visibleIdx = forMeasurement || null === indices ? range(segments.length) : indices;
+    const measure = (slot)=>forMeasurement ? slot : void 0;
+    const items = [];
+    if (method) items.push(/*#__PURE__*/ jsx(ParameterPathMethod, {
+        method: method,
+        "data-measure": measure(MEASURE.method)
+    }, "method"));
+    visibleIdx.forEach((segIndex, position)=>{
+        const value = segments[segIndex];
+        if (void 0 === value) return;
+        const isLast = segIndex === lastIndex;
+        const isFirstShown = 0 === position;
+        const showJointBefore = !(isFirstShown && !method);
+        if (showJointBefore) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {
+            "data-measure": measure(MEASURE.joint)
+        }, `j-${segIndex}-pre`));
+        const isCollapsedBoundary = !forMeasurement && null !== indices && 0 === position && 2 === visibleIdx.length;
+        items.push(/*#__PURE__*/ jsx(ParameterPathSegment, {
+            index: segIndex,
+            variant: isLast ? 'highlighted' : 'default',
+            withZap: isLast && attack,
+            "data-measure": measure(MEASURE.segment),
+            children: value
+        }, `s-${segIndex}`));
+        if (isCollapsedBoundary) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {}, "ellipsis-joint-pre"), /*#__PURE__*/ jsx(ParameterPathEllipsis, {}, "ellipsis"));
+    });
+    if (encoding) items.push(/*#__PURE__*/ jsx(ParameterPathJoint, {
+        "data-measure": measure(MEASURE.joint)
+    }, "enc-joint"), /*#__PURE__*/ jsx(ParameterPathEncoding, {
+        "data-measure": measure(MEASURE.encoding),
+        children: encoding
+    }, "enc"));
+    if (forMeasurement) return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "parameter-path-row",
+        "data-row": ROW.measure,
+        "aria-hidden": "true",
+        className: "flex items-center gap-0 absolute left-[-9999px] top-0 invisible pointer-events-none",
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: void 0,
+            children: items
+        })
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "parameter-path-row",
+        "data-row": ROW.visible,
+        className: rowVariants({
+            expanded: isExpanded
+        }),
+        children: items
+    });
+};
+ParameterPathRow.displayName = 'ParameterPathRow';
+export { ParameterPathRow };

package/dist/components/ParameterPath/classes.d.ts

@@ -1,3 +1,6 @@
+export declare const rowVariants: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const segmentVariants: (props?: ({
     variant?: "default" | "highlighted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/ParameterPath/classes.js

@@ -1,4 +1,15 @@
 import { cva } from "class-variance-authority";
+const rowVariants = cva('flex items-center gap-0 min-w-0', {
+    variants: {
+        expanded: {
+            true: 'flex-wrap',
+            false: 'overflow-hidden'
+        }
+    },
+    defaultVariants: {
+        expanded: false
+    }
+});
 const segmentVariants = cva('flex items-center justify-center gap-2 shrink-0 text-sm leading-5 whitespace-nowrap font-sans', {
     variants: {
         variant: {
@@ -22,4 +33,4 @@ const ellipsisVariants = cva([
     'h-20 px-2 gap-2',
     'text-text-secondary'
 ]);
-export { ellipsisVariants, encodingVariants, jointVariants, segmentVariants };
+export { ellipsisVariants, encodingVariants, jointVariants, rowVariants, segmentVariants };

package/dist/components/ParameterPath/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const MEASURE: {
+    readonly method: "method";
+    readonly joint: "joint";
+    readonly segment: "segment";
+    readonly encoding: "encoding";
+};
+export declare const ROW: {
+    readonly visible: "visible";
+    readonly measure: "measure";
+};
+export declare const EXPAND_KEYS: readonly string[];

package/dist/components/ParameterPath/constants.js

@@ -0,0 +1,15 @@
+const MEASURE = {
+    method: 'method',
+    joint: 'joint',
+    segment: 'segment',
+    encoding: 'encoding'
+};
+const ROW = {
+    visible: 'visible',
+    measure: 'measure'
+};
+const EXPAND_KEYS = [
+    'Enter',
+    ' '
+];
+export { EXPAND_KEYS, MEASURE, ROW };

package/dist/components/ParameterPath/types.d.ts

@@ -12,5 +12,31 @@ export interface ParameterPathProps extends Omit<HTMLAttributes<HTMLDivElement>,
     segments: string[];
     encoding?: string;
     attack?: boolean;
+    /**
+     * Opt in to click-to-expand. When `true`, a *truncated* path becomes
+     * interactive: clicking the `…` collapse indicator (or the path) expands it
+     * inline to show every segment, and clicking again collapses it back to
+     * `first … last`. No effect when the path already fits without truncation.
+     *
+     * `expandable` only controls the affordance (whether the user can toggle);
+     * the open/closed state is owned by `expanded` / `defaultExpanded`.
+     */
+    expandable?: boolean;
+    /**
+     * Controlled expanded state. When provided, the component does not manage its
+     * own state — pair it with {@link onExpandedChange}.
+     */
+    expanded?: boolean;
+    /**
+     * Initial expanded state for the uncontrolled case. Ignored when `expanded`
+     * is provided. Defaults to `false`.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Called with the next expanded state whenever the user toggles the path.
+     * Required for controlled usage; also useful for analytics in the
+     * uncontrolled case.
+     */
+    onExpandedChange?: (expanded: boolean) => void;
     copyFormat?: (data: CopyFormatData) => string;
 }

package/dist/components/ParameterPath/useParameterPathTruncation.js

@@ -1,10 +1,10 @@
 import { useLayoutEffect, useState } from "react";
+import { range } from "../../utils/range.js";
 import { useContainerWidth } from "../Table/lib/useContainerWidth.js";
+import { MEASURE } from "./constants.js";
 const computeTruncation = ({ containerWidth, methodWidth, encodingWidth, segmentWidths, jointsWidth })=>{
     const segCount = segmentWidths.length;
-    const allIndices = Array.from({
-        length: segCount
-    }, (_, i)=>i);
+    const allIndices = range(segCount);
     if (segCount <= 2 || containerWidth <= 0) return {
         isTruncated: false,
         visibleSegmentIndices: allIndices
@@ -27,17 +27,15 @@ const useParameterPathTruncation = ({ containerRef, measurementRef, segmentCount
     const containerWidth = useContainerWidth(containerRef);
     const [result, setResult] = useState({
         isTruncated: false,
-        visibleSegmentIndices: Array.from({
-            length: segmentCount
-        }, (_, i)=>i)
+        visibleSegmentIndices: range(segmentCount)
     });
     useLayoutEffect(()=>{
         const root = measurementRef.current;
         if (!root) return;
-        const methodEl = root.querySelector('[data-measure="method"]');
-        const encodingEl = root.querySelector('[data-measure="encoding"]');
-        const jointEls = Array.from(root.querySelectorAll('[data-measure="joint"]'));
-        const segmentEls = Array.from(root.querySelectorAll('[data-measure="segment"]'));
+        const methodEl = root.querySelector(`[data-measure="${MEASURE.method}"]`);
+        const encodingEl = root.querySelector(`[data-measure="${MEASURE.encoding}"]`);
+        const jointEls = Array.from(root.querySelectorAll(`[data-measure="${MEASURE.joint}"]`));
+        const segmentEls = Array.from(root.querySelectorAll(`[data-measure="${MEASURE.segment}"]`));
         const segmentWidths = segmentEls.map((el)=>el.getBoundingClientRect().width);
         const methodWidth = hasMethod && methodEl ? methodEl.getBoundingClientRect().width : 0;
         const encodingWidth = hasEncoding && encodingEl ? encodingEl.getBoundingClientRect().width : 0;

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>;