@wallarm-org/design-system 0.43.0 → 0.44.1

package/dist/components/NavPanel/NavPanelResizeHandle.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import { throttle } from "lodash-es";
+import { cn } from "../../utils/cn.js";
+import { useNavPanelInternalContext } from "./NavPanelContext.js";
+const resizeHandleVariants = cva(cn('absolute right-0 top-0 bottom-0 z-1 w-12', 'translate-x-1/2', 'outline-none cursor-ew-resize', 'flex items-center justify-center', 'before:content-[""]', 'before:block', 'before:w-3 before:h-full', 'before:rounded-full', 'before:bg-bg-fill-brand', 'before:transition-opacity before:duration-150'), {
+    variants: {
+        barIsVisible: {
+            true: 'before:opacity-100',
+            false: 'before:opacity-0'
+        }
+    }
+});
+const NavPanelResizeHandle = ()=>{
+    const { width, setWidth, setIsResizing, minWidth, maxWidth } = useNavPanelInternalContext();
+    const [isHovered, setIsHovered] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStateRef = useRef({
+        startX: 0,
+        startWidth: 0
+    });
+    const handleMouseDown = (e)=>{
+        e.preventDefault();
+        const navPanel = e.currentTarget.closest('[data-slot="nav-panel"]');
+        if (!navPanel) return;
+        dragStateRef.current = {
+            startX: e.clientX,
+            startWidth: navPanel.offsetWidth
+        };
+        setIsDragging(true);
+        setIsResizing(true);
+    };
+    const handleMouseMove = useMemo(()=>throttle((e)=>{
+            const { startX, startWidth } = dragStateRef.current;
+            const delta = e.clientX - startX;
+            const newWidth = Math.min(Math.max(startWidth + delta, minWidth), maxWidth);
+            setWidth(newWidth);
+        }, 16), [
+        minWidth,
+        maxWidth,
+        setWidth
+    ]);
+    useEffect(()=>{
+        if (!isDragging) return;
+        const handleMouseUp = ()=>{
+            setIsDragging(false);
+            setIsResizing(false);
+            handleMouseMove.cancel();
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return ()=>{
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            handleMouseMove.cancel();
+        };
+    }, [
+        isDragging,
+        handleMouseMove,
+        setIsResizing
+    ]);
+    const barIsVisible = isHovered || isDragging;
+    return /*#__PURE__*/ jsx("div", {
+        role: "separator",
+        tabIndex: 0,
+        "aria-orientation": "vertical",
+        "aria-valuenow": width,
+        "aria-valuemin": minWidth,
+        "aria-valuemax": maxWidth,
+        "data-slot": "nav-panel-resize-handle",
+        className: cn(resizeHandleVariants({
+            barIsVisible
+        })),
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        onMouseDown: handleMouseDown
+    });
+};
+NavPanelResizeHandle.displayName = 'NavPanelResizeHandle';
+export { NavPanelResizeHandle };

package/dist/components/NavPanel/NavPanelSectionHeader.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface NavPanelSectionHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const NavPanelSectionHeader: FC<NavPanelSectionHeaderProps>;

package/dist/components/NavPanel/NavPanelSectionHeader.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+const NavPanelSectionHeader = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('section-header');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "nav-panel-section-header",
+        "data-testid": testId,
+        className: cn('flex shrink-0 items-center px-8 pt-6', className),
+        children: /*#__PURE__*/ jsx(Text, {
+            size: "xs",
+            weight: "medium",
+            color: "secondary",
+            children: children
+        })
+    });
+};
+NavPanelSectionHeader.displayName = 'NavPanelSectionHeader';
+export { NavPanelSectionHeader };

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

@@ -0,0 +1,6 @@
+export declare const navPanelItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navPanelGroupItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/NavPanel/classes.js

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority";
+const navPanelItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm transition-colors outline-none', {
+    variants: {
+        active: {
+            true: 'overlay-states-primary-active font-semibold text-text-primary',
+            false: 'text-text-secondary hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+        }
+    },
+    defaultVariants: {
+        active: false
+    }
+});
+const navPanelGroupItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm transition-colors outline-none', {
+    variants: {
+        active: {
+            true: 'overlay-states-primary-active font-semibold text-text-primary',
+            false: 'text-text-secondary hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+        }
+    },
+    defaultVariants: {
+        active: false
+    }
+});
+export { navPanelGroupItemVariants, navPanelItemVariants };

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

@@ -0,0 +1,10 @@
+export { NavPanel, type NavPanelProps } from './NavPanel';
+export { NavPanelBack, type NavPanelBackProps } from './NavPanelBack';
+export { NavPanelDivider, type NavPanelDividerProps } from './NavPanelDivider';
+export { NavPanelGroup, type NavPanelGroupProps } from './NavPanelGroup';
+export { NavPanelGroupContent, type NavPanelGroupContentProps } from './NavPanelGroupContent';
+export { NavPanelGroupItem, type NavPanelGroupItemProps } from './NavPanelGroupItem';
+export { NavPanelGroupLabel, type NavPanelGroupLabelProps } from './NavPanelGroupLabel';
+export { NavPanelHeader, type NavPanelHeaderProps } from './NavPanelHeader';
+export { NavPanelItem, type NavPanelItemProps } from './NavPanelItem';
+export { NavPanelSectionHeader, type NavPanelSectionHeaderProps } from './NavPanelSectionHeader';

package/dist/components/NavPanel/index.js

@@ -0,0 +1,11 @@
+import { NavPanel } from "./NavPanel.js";
+import { NavPanelBack } from "./NavPanelBack.js";
+import { NavPanelDivider } from "./NavPanelDivider.js";
+import { NavPanelGroup } from "./NavPanelGroup.js";
+import { NavPanelGroupContent } from "./NavPanelGroupContent.js";
+import { NavPanelGroupItem } from "./NavPanelGroupItem.js";
+import { NavPanelGroupLabel } from "./NavPanelGroupLabel.js";
+import { NavPanelHeader } from "./NavPanelHeader.js";
+import { NavPanelItem } from "./NavPanelItem.js";
+import { NavPanelSectionHeader } from "./NavPanelSectionHeader.js";
+export { NavPanel, NavPanelBack, NavPanelDivider, NavPanelGroup, NavPanelGroupContent, NavPanelGroupItem, NavPanelGroupLabel, NavPanelHeader, NavPanelItem, NavPanelSectionHeader };

package/dist/components/NavRail/NavRail.js

@@ -1,9 +1,39 @@
 import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { useArrowNav } from "../../hooks/useArrowNav.js";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { navRailVariants } from "./classes.js";
 import { NavRailContextProvider } from "./NavRailContext.js";
-const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': testId, ...props })=>{
+    const internalRef = useRef(null);
+    const focusPanel = useCallback(()=>{
+        const panel = document.querySelector('[data-slot="nav-panel"]');
+        const target = panel?.querySelector('[tabindex="0"]');
+        target?.focus();
+    }, []);
+    const focusPanelAfterNav = useCallback(()=>{
+        const observer = new MutationObserver(()=>{
+            const panel = document.querySelector('[data-slot="nav-panel"]');
+            const target = panel?.querySelector('[data-slot="nav-panel-item"], [data-slot="nav-panel-back"]');
+            if (target) {
+                target.setAttribute('tabindex', '0');
+                target.focus();
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        setTimeout(()=>observer.disconnect(), 2000);
+    }, []);
+    useArrowNav(internalRef, '[data-slot="nav-rail-item"]', {
+        onArrowRight: focusPanel,
+        onEnter: focusPanelAfterNav
+    });
+    return /*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
         children: /*#__PURE__*/ jsx(NavRailContextProvider, {
             value: {
@@ -11,7 +41,7 @@ const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': t
             },
             children: /*#__PURE__*/ jsx("nav", {
                 ...props,
-                ref: ref,
+                ref: composeRefs(internalRef, ref),
                 "aria-label": "Global navigation",
                 "data-slot": "nav-rail",
                 "data-testid": testId,
@@ -22,5 +52,6 @@ const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': t
             })
         })
     });
+};
 NavRail.displayName = 'NavRail';
 export { NavRail };

package/dist/components/NavRail/NavRailItem.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment, useRef } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
@@ -9,13 +10,16 @@ import { TooltipContent } from "../Tooltip/TooltipContent.js";
 import { TooltipTrigger } from "../Tooltip/TooltipTrigger.js";
 import { navRailItemVariants } from "./classes.js";
 import { useNavRailContext } from "./NavRailContext.js";
+import { useShortcut } from "./useShortcut.js";
 const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active = false, className, children, ...props })=>{
     const { collapsed } = useNavRailContext();
     const testId = useTestId('item');
     const Comp = asChild ? Slot : 'a';
+    const internalRef = useRef(null);
+    useShortcut(shortcut, internalRef);
     const element = /*#__PURE__*/ jsxs(Comp, {
         ...props,
-        ref: ref,
+        ref: composeRefs(internalRef, ref),
         "aria-current": active ? 'page' : void 0,
         "data-slot": "nav-rail-item",
         "data-testid": testId,
@@ -43,7 +47,10 @@ const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
                 asChild: true,
-                children: element
+                children: props['aria-haspopup'] ? /*#__PURE__*/ jsx("span", {
+                    className: "flex flex-1",
+                    children: element
+                }) : element
             }),
             /*#__PURE__*/ jsxs(TooltipContent, {
                 children: [

package/dist/components/NavRail/classes.js

@@ -10,11 +10,11 @@ const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8
         collapsed: false
     }
 });
-const navRailItemVariants = cva('overlay flex h-32 cursor-pointer items-center rounded-6 p-8 text-sm transition-colors', {
+const navRailItemVariants = cva('overlay flex h-32 w-full cursor-pointer items-center rounded-6 p-8 text-sm transition-colors outline-none', {
     variants: {
         active: {
             true: 'overlay-states-primary-active text-text-primary',
-            false: 'text-text-secondary hover:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            false: 'text-text-secondary hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
         }
     },
     defaultVariants: {

package/dist/components/NavRail/useShortcut.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function useShortcut(shortcut: string[] | undefined, ref: RefObject<HTMLElement | null>): void;

package/dist/components/NavRail/useShortcut.js

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+const SEQUENCE_TIMEOUT = 1000;
+function isEditableTarget(element) {
+    if (!element) return false;
+    const tag = element.tagName;
+    if ('INPUT' === tag || 'TEXTAREA' === tag || 'SELECT' === tag) return true;
+    return element.isContentEditable;
+}
+function useShortcut(shortcut, ref) {
+    const indexRef = useRef(0);
+    const timerRef = useRef(void 0);
+    useEffect(()=>{
+        if (!shortcut || 0 === shortcut.length) return;
+        const handleKeyDown = (event)=>{
+            if (isEditableTarget(document.activeElement)) return;
+            if (event.metaKey || event.ctrlKey || event.altKey) return;
+            const expected = shortcut[indexRef.current];
+            if (!expected) return;
+            if (event.key.toLowerCase() === expected.toLowerCase()) {
+                event.preventDefault();
+                indexRef.current++;
+                if (timerRef.current) clearTimeout(timerRef.current);
+                if (indexRef.current === shortcut.length) {
+                    indexRef.current = 0;
+                    ref.current?.click();
+                } else timerRef.current = setTimeout(()=>{
+                    indexRef.current = 0;
+                }, SEQUENCE_TIMEOUT);
+            } else {
+                indexRef.current = 0;
+                if (timerRef.current) clearTimeout(timerRef.current);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+            if (timerRef.current) clearTimeout(timerRef.current);
+        };
+    }, [
+        shortcut,
+        ref
+    ]);
+}
+export { useShortcut };

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,100 @@
+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 defaultEntity = drill.entities?.[0]?.id ?? 'default';
+        const firstChildPath = findFirstLinkPath(drill.children) ?? '';
+        setPathname(`/${drill.path}/${defaultEntity}/${firstChildPath}`);
+    }, [
+        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/ProductNav/ProductNavContext.d.ts

@@ -0,0 +1,22 @@
+import type { BreadcrumbSegment, NavConfig, NavConfigDrill, NavStackEntry } from './types';
+export interface ProductNavContextValue {
+    config: NavConfig;
+    pathname: string;
+    navStack: NavStackEntry[];
+    breadcrumbSegments: BreadcrumbSegment[];
+    activeItemId: string | null;
+    /** Effective drill level (accounts for visual back-navigation) */
+    drillLevel: number;
+    /** Active item ID adjusted for the effective drill level */
+    effectiveActiveItemId: string | null;
+    /** Navigate to a link item (relative within current drill level) */
+    navigate: (path: string) => void;
+    /** Enter a drill scope */
+    drillInto: (drill: NavConfigDrill) => void;
+    /** Return to previous menu level visually (without URL change) */
+    goBack: () => void;
+    /** 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;

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,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NavPanel, NavPanelBack, NavPanelDivider, NavPanelGroup, NavPanelGroupContent, NavPanelGroupItem, NavPanelGroupLabel, NavPanelHeader, NavPanelItem, NavPanelSectionHeader } from "../NavPanel/index.js";
+import { findDrillNode } from "./navUtils.js";
+import { useProductNavContext } from "./ProductNavContext.js";
+function renderNavItems(items, activeItemId, onNavigate, onDrillClick, level = 'root') {
+    return items.map((item)=>{
+        if ('link' === item.type) {
+            const Item = 'group' === level ? NavPanelGroupItem : NavPanelItem;
+            return /*#__PURE__*/ jsx(Item, {
+                icon: item.icon,
+                active: activeItemId === item.id,
+                onClick: ()=>onNavigate(item.path),
+                children: item.label
+            }, item.id);
+        }
+        if ('group' === item.type) return /*#__PURE__*/ jsxs(NavPanelGroup, {
+            defaultExpanded: item.defaultExpanded,
+            children: [
+                /*#__PURE__*/ jsx(NavPanelGroupLabel, {
+                    icon: item.icon,
+                    children: item.label
+                }),
+                /*#__PURE__*/ jsx(NavPanelGroupContent, {
+                    children: renderNavItems(item.children, activeItemId, onNavigate, onDrillClick, 'group')
+                })
+            ]
+        }, item.id);
+        if ('section-header' === item.type) return /*#__PURE__*/ jsx(NavPanelSectionHeader, {
+            children: item.label
+        }, item.id);
+        if ('drill' === item.type) {
+            const Item = 'group' === level ? NavPanelGroupItem : NavPanelItem;
+            return /*#__PURE__*/ jsx(Item, {
+                icon: item.icon,
+                active: activeItemId === item.id,
+                onClick: ()=>onDrillClick?.(item),
+                children: item.label
+            }, item.id);
+        }
+        return null;
+    });
+}
+const ProductNavPanel = ({ resizable })=>{
+    const { config, navStack, effectiveActiveItemId, navigate, drillInto, goBack, drillLevel } = useProductNavContext();
+    const currentEntry = navStack[Math.min(drillLevel, navStack.length - 1)];
+    if (0 === drillLevel) {
+        const itemsWithDividers = [];
+        for (const item of config.items){
+            itemsWithDividers.push(renderNavItems([
+                item
+            ], effectiveActiveItemId, navigate, drillInto));
+            if (item.dividerAfter) itemsWithDividers.push(/*#__PURE__*/ jsx(NavPanelDivider, {}, `divider-${item.id}`));
+        }
+        return /*#__PURE__*/ jsxs(NavPanel, {
+            resizable: resizable,
+            children: [
+                /*#__PURE__*/ jsx(NavPanelHeader, {
+                    children: config.productLabel
+                }),
+                itemsWithDividers
+            ]
+        });
+    }
+    const parentEntry = navStack[drillLevel - 1];
+    const drillNode = findDrillNode(parentEntry.items, parentEntry.activeItemId);
+    const backLabel = drillNode?.label ?? 'Back';
+    return /*#__PURE__*/ jsxs(NavPanel, {
+        resizable: resizable,
+        children: [
+            /*#__PURE__*/ jsx(NavPanelHeader, {
+                children: currentEntry.title
+            }),
+            /*#__PURE__*/ jsx(NavPanelBack, {
+                onClick: goBack,
+                children: backLabel
+            }),
+            renderNavItems(currentEntry.items, effectiveActiveItemId, navigate, drillInto)
+        ]
+    });
+};
+ProductNavPanel.displayName = 'ProductNavPanel';
+export { ProductNavPanel };

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

@@ -0,0 +1,10 @@
+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, 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,9 @@
+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 { ProductNav, ProductNavBreadcrumbs, ProductNavPanel, findDrillNode, findFirstLinkPath, matchNav, pushPathname, useLocationPathname, useProductNav, useProductNavContext };

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

@@ -0,0 +1,16 @@
+import type { BreadcrumbSegment, NavConfig, NavStackEntry } from './types';
+export interface MatchNavResult {
+    navStack: NavStackEntry[];
+    breadcrumbSegments: BreadcrumbSegment[];
+    activeItemId: string | null;
+}
+/**
+ * Pure function. Matches pathname against nav config.
+ *
+ * - `link` → single URL segment (`{path}`)
+ * - `drill` → segment + dynamic param (`{path}/:param/...`), pushes new stack level
+ * - `group` → NO URL segment, children promoted to parent level
+ *
+ * Called via useMemo on every pathname change.
+ */
+export declare const matchNav: (pathname: string, config: NavConfig) => MatchNavResult;