@wallarm-org/design-system 1.28.0 → 1.28.2-rc-fix-table-window-scroll-root.1

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.27.0",
-  "generatedAt": "2026-09-30T12:41:24.546Z",
+  "version": "1.28.1",
+  "generatedAt": "2026-09-30T15:40:03.193Z",
   "components": [
     {
       "name": "Accordion",
@@ -5341,23 +5341,28 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "({ ambient }) => <Shell ambient={ambient} />",
+          "code": "({ ambient }) => (\n  <StoryRouter>\n    <Shell ambient={ambient} />\n  </StoryRouter>\n)",
           "description": "The three regions composed once — `AppShellHeader`, `AppShellRail`, `AppShellRemote` — with the content surface being the only part that scrolls. Pick a product in the rail to drill into it, and the account item at the bottom for appearance and sidebar mode."
         },
         {
           "name": "Loading",
-          "code": "({ ambient, loading }) => (\n  <Shell ambient={ambient} loading={loading} simulateProductLoading />\n)",
+          "code": "({ ambient, loading }) => (\n  <StoryRouter>\n    <Shell ambient={ambient} loading={loading} simulateProductLoading />\n  </StoryRouter>\n)",
           "description": "How the shell looks while the platform loads. The header actions and the product rail hold skeletons that sit exactly where the real items land, so nothing jumps when they arrive. Turn `loading` off in Controls to watch the swap. Opening a product also shows its own panel and content loading."
         },
         {
           "name": "RevealFlow",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [splashDone, setSplashDone] = useState(false);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const [revealKey, setRevealKey] = useState(0);\n  const { theme, setTheme } = useTheme();\n  const railMode = railModeFor(sidebarMode, activeProduct === 'home');\n\n  useEffect(() => {\n    if (splashDone) return;\n    const timer = setTimeout(() => setSplashDone(true), 2000);\n    return () => clearTimeout(timer);\n  }, [splashDone]);\n\n  const handleReplay = () => {\n    setSplashDone(false);\n    setRevealKey(k => k + 1);\n  };\n\n  if (!splashDone) {\n    return (\n      <div key={revealKey} className='h-screen w-screen bg-bg-page-bg'>\n        <SplashScreen />\n      </div>\n    );\n  }\n\n  return (\n    <AppShell key={revealKey} reveal>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            <HeaderActions />\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail mode={railMode}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            <ProductNavItems activeProduct={activeProduct} />\n          </NavRailBody>\n\n          <NavRailFooterContent\n            activeProduct={activeProduct}\n            sidebarMode={sidebarMode}\n            onSidebarModeChange={setSidebarMode}\n            theme={theme}\n            onThemeChange={setTheme}\n          />\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={handleReplay}>\n            Replay animation\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}",
+          "code": "() => (\n  <StoryRouter>\n    <RevealFlowShell />\n  </StoryRouter>\n)",
           "description": "`reveal` animates the chrome in on the first application load only. Leave it unset for an ordinary screen; this exists for prototyping the boot moment itself."
         },
         {
           "name": "LoginFlow",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [showShell, setShowShell] = useState(false);\n  const [revealed, setRevealed] = useState(false);\n  const [flowKey, setFlowKey] = useState(0);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const railMode = railModeFor(sidebarMode, activeProduct === 'home');\n\n  useEffect(() => {\n    if (!splashVisible) return;\n    const timer = setTimeout(() => setSplashVisible(false), 2000);\n    return () => clearTimeout(timer);\n  }, [splashVisible]);\n\n  const handleSignIn = () => {\n    setShowShell(true);\n  };\n\n  const handleReplay = () => {\n    setShowShell(false);\n    setRevealed(false);\n    setSplashVisible(true);\n    setFlowKey(k => k + 1);\n  };\n\n  return (\n    <div\n      key={flowKey}\n      className='relative h-screen w-screen overflow-hidden bg-component-app-shell-bg'\n    >\n      {!revealed && (\n        <AnimatedBackground\n          className='absolute inset-0'\n          style={{\n            opacity: showShell ? 0 : 1,\n            transition: showShell ? 'opacity 400ms cubic-bezier(0.4, 0, 0.2, 1)' : undefined,\n          }}\n        />\n      )}\n\n      {!showShell && (\n        <div className='absolute inset-0 flex items-center justify-center z-10'>\n          <SplashScreen\n            visible={splashVisible}\n            shrinkTarget={CARD_DIMENSIONS}\n            className='bg-bg-page-bg shadow-lg'\n          >\n            <div className='flex h-full w-full flex-col items-center justify-center gap-16 p-24'>\n              <Text size='xl'>Sign In</Text>\n              <div className='flex w-full flex-col gap-12'>\n                <Input placeholder='Email' />\n                <Input placeholder='Password' type='password' />\n              </div>\n              <Button variant='primary' color='brand' className='w-full' onClick={handleSignIn}>\n                Sign In\n              </Button>\n            </div>\n          </SplashScreen>\n        </div>\n      )}\n\n      {showShell && (\n        <div className='absolute inset-0'>\n          <AppShell expandFrom={CARD_DIMENSIONS} onRevealed={() => setRevealed(true)}>\n            <AppShellHeader>\n              <TopHeader>\n                <TopHeaderLogo href='/'>\n                  <WallarmLogo />\n                </TopHeaderLogo>\n\n                <TopHeaderActions>\n                  <HeaderActions />\n                </TopHeaderActions>\n              </TopHeader>\n            </AppShellHeader>\n\n            <AppShellRail>\n              <NavRail mode={railMode}>\n                <NavRailBody>\n                  <NavRailItem\n                    icon={Home}\n                    label='Home'\n                    active={activeProduct === 'home'}\n                    onClick={() => navigateToProduct('home')}\n                  />\n\n                  <NavRailSeparator />\n\n                  <ProductNavItems activeProduct={activeProduct} />\n                </NavRailBody>\n                <NavRailFooterContent\n                  activeProduct={activeProduct}\n                  sidebarMode={sidebarMode}\n                  onSidebarModeChange={setSidebarMode}\n                  theme={theme}\n                  onThemeChange={setTheme}\n                />\n              </NavRail>\n            </AppShellRail>\n\n            <AppShellRemote>\n              <div className='flex gap-8 absolute top-4 right-4 z-10'>\n                <Button variant='ghost' size='small' color='neutral' onClick={handleReplay}>\n                  Replay animation\n                </Button>\n              </div>\n              <RemoteForProduct product={activeProduct} />\n            </AppShellRemote>\n          </AppShell>\n        </div>\n      )}\n    </div>\n  );\n}",
+          "code": "() => (\n  <StoryRouter>\n    <LoginFlowShell />\n  </StoryRouter>\n)",
           "description": "The whole entrance: the splash hands off, the content surface expands from the sign-in card into the full shell. `onRevealed` fires when it has settled."
+        },
+        {
+          "name": "WithTanStackRouter",
+          "code": "() => {\n  const [router] = useState(createShellRouter);\n\n  return <RouterProvider router={router} />;\n}",
+          "description": "`AppShell` and a `RemoteShell` per product on one TanStack Router: the root route is\nthe shell (rail → `navigate`, `AppShellRemote` → `<Outlet />`), `/$product` is the\nremote (`RemoteShell` with `pathname` + `onNavigate`, content → `<Outlet />`), and\n`/$product/$` is the page. Every way of moving — the rail, the nav panel, the\nbreadcrumbs, links in the page — goes through the router, and the active items follow."
         }
       ]
     },
@@ -56736,6 +56741,7 @@
     },
     {
       "name": "RemoteShell",
+      "description": "Strips `basePath` only on a segment boundary: `/edge-nodes` is not under `/edge`.",
       "importPath": "@wallarm-org/design-system/RemoteShell",
       "props": [
         {
@@ -56750,6 +56756,12 @@
           "required": false,
           "description": "URL prefix stripped before matching and prepended when navigating (e.g. `\"/edge\"`)."
         },
+        {
+          "name": "pathname",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Current pathname. When set, it is the single source of truth for the active nav\nitem, drill level and breadcrumbs, and `window.location` is ignored.\n\nPass it — **together with `onNavigate`** — whenever a router owns the URL: router\nnavigations (links in page content, `router.navigate`, memory history, the host's\nrail) do not fire `popstate`, so without it the shell can go stale. Without\n`onNavigate` the shell's own navigations would only reach `window.history`, which\na controlled shell ignores (a dev warning flags this).\n\nEither form is accepted: with the `basePath` prefix (what `onNavigate` receives) or\nwithout it — the prefix is stripped only when the pathname starts with a whole\n`basePath` segment. With TanStack Router, `useRouterState({ select: s =>\ns.location.pathname })` is router-relative: it excludes the router's own\n`basepath`. So when the router has `basepath`:\n- omit `basePath` here — `pathname` and `onNavigate` are then both router-relative\n  and `onNavigate={to => navigate({ to })}` is correct; or\n- keep `basePath` and strip it in `onNavigate`\n  (`to => navigate({ to: to.slice(basePath.length) || '/' })`), otherwise the\n  router prefixes it a second time.\n\nOmit it to read `window.location.pathname` (updated on `popstate` and on the\nshell's own navigations)."
+        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -57870,7 +57882,13 @@
           ]
         }
       ],
-      "examples": []
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "() => {\n  const navigate = useNavigate();\n  const pathname = useRouterState({ select: state => state.location.pathname });\n\n  return (\n    <div className='h-screen bg-bg-page-bg'>\n      <RemoteShell\n        config={edgeNavConfig}\n        basePath='/edge'\n        pathname={pathname}\n        onNavigate={to => navigate({ to })}\n      >\n        <RemoteShellPanel resizable />\n        <RemoteShellBreadcrumb />\n        <RemoteShellContent>\n          <EdgePage />\n        </RemoteShellContent>\n      </RemoteShell>\n    </div>\n  );\n}",
+          "description": "A standalone product on TanStack Router — the recommended integration. `pathname` is\nthe router’s `location.pathname` and `onNavigate` calls `navigate`, so the menu, drill\nlevel and breadcrumbs follow every navigation: the panel, the breadcrumbs and the\nrouter links in the page. This router has no `basepath` (its routes include `/edge`),\nso both sides use the full pathname. If your router sets `basepath`, its\n`location.pathname` is router-relative: omit `basePath` on `RemoteShell` (or keep it\nand strip it in `onNavigate`), otherwise `navigate` prefixes it twice."
+        }
+      ]
     },
     {
       "name": "Resizable",
@@ -85736,7 +85754,7 @@
           "name": "virtualized",
           "type": "TableVirtualized | undefined",
           "required": false,
-          "description": "Enable row virtualization. `'container'` virtualizes within the scroll container; `'window'` virtualizes against the browser window."
+          "description": "Enable row virtualization. `'container'` virtualizes within the table's own scroll container;\n`'window'` follows the page scroll — the nearest scrollable ancestor, or the browser window."
         },
         {
           "name": "stretch",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.28.0",
+  "version": "1.28.2-rc-fix-table-window-scroll-root.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",
@@ -97,6 +97,7 @@
     "@storybook/addon-docs": "10.4.6",
     "@storybook/addon-themes": "10.4.6",
     "@tailwindcss/postcss": "4.3.3",
+    "@tanstack/react-router": "1.170.21",
     "@testing-library/jest-dom": "7.0.0",
     "@testing-library/react": "catalog:",
     "@testing-library/user-event": "catalog:",

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

@@ -1,11 +0,0 @@
-import { type NavRailMode } from '../../NavRail';
-import { type Theme } from '../../ThemeProvider';
-export type SidebarMode = 'adaptive' | 'expanded' | 'collapsed' | 'compact';
-/** Adaptive collapses the rail inside a product and expands it on Home; the other modes pin it. */
-export declare const railModeFor: (mode: SidebarMode, onHome: boolean) => NavRailMode;
-export declare const AccountDropdown: ({ sidebarMode, onSidebarModeChange, theme, onThemeChange, }: {
-    sidebarMode: SidebarMode;
-    onSidebarModeChange: (mode: SidebarMode) => void;
-    theme: Theme;
-    onThemeChange: (theme: Theme) => void;
-}) => import("react").JSX.Element;

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

@@ -1,242 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { LogOut, PanelLeftDashed, PencilRuler, Settings, User, UserRound } from "../../../icons/index.js";
-import { cn } from "../../../utils/cn.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
-import { NavRailItem } from "../../NavRail/index.js";
-import { HStack, VStack } from "../../Stack/index.js";
-import { Text } from "../../Text/index.js";
-import { useTheme } from "../../ThemeProvider/index.js";
-const railModeFor = (mode, onHome)=>{
-    if ('adaptive' === mode) return onHome ? 'expanded' : 'collapsed';
-    return mode;
-};
-const USER_NAME = 'Meow Meow';
-const USER_EMAIL = 'meow@meow.com';
-const THEMES = [
-    'light',
-    'dark'
-];
-const SIDEBAR_MODE_GROUPS = [
-    [
-        'adaptive'
-    ],
-    [
-        'expanded',
-        'collapsed'
-    ],
-    [
-        'compact'
-    ]
-];
-const SIDEBAR_MODES = SIDEBAR_MODE_GROUPS.flat();
-const THEME_LABELS = {
-    light: 'Light',
-    dark: 'Dark'
-};
-const FRAME_STYLES = [
-    'neutral',
-    'branded'
-];
-const FRAME_STYLE_LABELS = {
-    neutral: 'Neutral',
-    branded: 'Branded'
-};
-const FRAME_STYLE_SWATCH = {
-    neutral: 'bg-icon-secondary',
-    branded: 'bg-icon-brand'
-};
-const SIDEBAR_MODE_LABELS = {
-    adaptive: 'Adaptive',
-    expanded: 'Always expanded',
-    collapsed: 'Always collapsed',
-    compact: 'Compact'
-};
-const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChange })=>{
-    const { frameStyle, setFrameStyle } = useTheme();
-    return /*#__PURE__*/ jsxs(DropdownMenu, {
-        positioning: {
-            placement: 'right-end',
-            gutter: 6,
-            offset: {
-                crossAxis: 12
-            }
-        },
-        children: [
-            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
-                children: /*#__PURE__*/ jsx(NavRailItem, {
-                    icon: UserRound,
-                    label: USER_NAME,
-                    avatar: true
-                })
-            }),
-            /*#__PURE__*/ jsxs(DropdownMenuContent, {
-                className: "w-256",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "rounded-6 border border-border-primary-light bg-states-primary-hover px-8 py-8 mb-4",
-                        children: /*#__PURE__*/ jsxs(HStack, {
-                            gap: 8,
-                            align: "start",
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    children: /*#__PURE__*/ jsx(User, {})
-                                }),
-                                /*#__PURE__*/ jsxs(VStack, {
-                                    gap: 0,
-                                    children: [
-                                        /*#__PURE__*/ jsx(Text, {
-                                            size: "sm",
-                                            color: "primary",
-                                            children: USER_NAME
-                                        }),
-                                        /*#__PURE__*/ jsx(Text, {
-                                            size: "xs",
-                                            color: "secondary",
-                                            children: USER_EMAIL
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                        children: [
-                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
-                                children: /*#__PURE__*/ jsx(Settings, {})
-                            }),
-                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                children: "Profile settings"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(DropdownMenu, {
-                        children: [
-                            /*#__PURE__*/ jsxs(DropdownMenuTriggerItem, {
-                                children: [
-                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
-                                        children: /*#__PURE__*/ jsx(PencilRuler, {})
-                                    }),
-                                    /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Appearance"
-                                            }),
-                                            /*#__PURE__*/ jsxs(Text, {
-                                                size: "xs",
-                                                color: "secondary",
-                                                children: [
-                                                    THEME_LABELS[theme],
-                                                    " and ",
-                                                    FRAME_STYLE_LABELS[frameStyle].toLowerCase()
-                                                ]
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs(DropdownMenuContent, {
-                                className: "w-132",
-                                children: [
-                                    /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
-                                        value: theme,
-                                        onValueChange: ({ value })=>{
-                                            const next = THEMES.find((t)=>t === value);
-                                            if (next) onThemeChange(next);
-                                        },
-                                        children: THEMES.map((t)=>/*#__PURE__*/ jsx(DropdownMenuRadioItem, {
-                                                value: t,
-                                                children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                    children: THEME_LABELS[t]
-                                                })
-                                            }, t))
-                                    }),
-                                    /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
-                                    /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
-                                        value: frameStyle,
-                                        onValueChange: ({ value })=>{
-                                            const next = FRAME_STYLES.find((s)=>s === value);
-                                            if (next) setFrameStyle(next);
-                                        },
-                                        children: FRAME_STYLES.map((s)=>/*#__PURE__*/ jsxs(DropdownMenuRadioItem, {
-                                                value: s,
-                                                children: [
-                                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
-                                                        children: /*#__PURE__*/ jsx("span", {
-                                                            className: "flex size-16 items-center justify-center",
-                                                            children: /*#__PURE__*/ jsx("span", {
-                                                                className: cn('size-8 rounded-full', FRAME_STYLE_SWATCH[s])
-                                                            })
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                        children: FRAME_STYLE_LABELS[s]
-                                                    })
-                                                ]
-                                            }, s))
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(DropdownMenu, {
-                        children: [
-                            /*#__PURE__*/ jsxs(DropdownMenuTriggerItem, {
-                                children: [
-                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
-                                        children: /*#__PURE__*/ jsx(PanelLeftDashed, {})
-                                    }),
-                                    /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Sidebar mode"
-                                            }),
-                                            /*#__PURE__*/ jsx(Text, {
-                                                size: "xs",
-                                                color: "secondary",
-                                                children: SIDEBAR_MODE_LABELS[sidebarMode]
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx(DropdownMenuContent, {
-                                className: "w-200",
-                                children: /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
-                                    value: sidebarMode,
-                                    onValueChange: ({ value })=>{
-                                        const next = SIDEBAR_MODES.find((m)=>m === value);
-                                        if (next) onSidebarModeChange(next);
-                                    },
-                                    children: SIDEBAR_MODE_GROUPS.map((group, index)=>/*#__PURE__*/ jsxs(Fragment, {
-                                            children: [
-                                                index > 0 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
-                                                group.map((m)=>/*#__PURE__*/ jsx(DropdownMenuRadioItem, {
-                                                        value: m,
-                                                        children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                            children: SIDEBAR_MODE_LABELS[m]
-                                                        })
-                                                    }, m))
-                                            ]
-                                        }, group.join('-')))
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
-                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                        children: [
-                            /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
-                                children: /*#__PURE__*/ jsx(LogOut, {})
-                            }),
-                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                children: "Sign out"
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { AccountDropdown, railModeFor };

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

@@ -1,12 +0,0 @@
-import { type NavConfig } from '../../RemoteShell';
-import { type Product } from './_storyLib';
-export interface ConfigRemoteProps {
-    config: NavConfig;
-    basePath?: string;
-    /** Fake a 2s load whenever the product changes, to show the panel and content skeletons. */
-    simulateLoading?: boolean;
-}
-export declare const RemoteForProduct: ({ product, simulateLoading, }: {
-    product: Product;
-    simulateLoading?: boolean;
-}) => import("react").JSX.Element;

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

@@ -1,81 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Page, PageContent, PageHeader, PageTitle } from "../../Page/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 } = useRemoteShellContext();
-    const lastSegment = breadcrumbSegments[breadcrumbSegments.length - 1];
-    const pageTitle = lastSegment?.label ?? '';
-    const fullPath = breadcrumbSegments.map((s)=>s.label).join(' / ');
-    return /*#__PURE__*/ jsxs(Page, {
-        title: pageTitle,
-        fixedHeight: true,
-        children: [
-            /*#__PURE__*/ jsx(PageHeader, {
-                children: /*#__PURE__*/ jsx(PageTitle, {
-                    children: pageTitle
-                })
-            }),
-            /*#__PURE__*/ jsx(PageContent, {
-                children: /*#__PURE__*/ jsxs("p", {
-                    className: "text-sm text-text-secondary",
-                    children: [
-                        "Placeholder page for ",
-                        fullPath,
-                        "."
-                    ]
-                })
-            })
-        ]
-    });
-};
-const ConfigRemote = ({ config, basePath, simulateLoading = true })=>{
-    const [loading, setLoading] = useState(simulateLoading);
-    useEffect(()=>{
-        if (!simulateLoading) return;
-        setLoading(true);
-        const timer = setTimeout(()=>{
-            setLoading(false);
-        }, 2000);
-        return ()=>clearTimeout(timer);
-    }, [
-        config.productLabel,
-        simulateLoading
-    ]);
-    return /*#__PURE__*/ jsx(RemoteShell, {
-        config: config,
-        basePath: basePath,
-        children: loading ? /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsx(RemoteShellPanel, {
-                    isLoading: true
-                }),
-                /*#__PURE__*/ jsx(RemoteShellContent, {
-                    isLoading: true
-                })
-            ]
-        }) : /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsx(RemoteShellPanel, {
-                    resizable: true
-                }),
-                /*#__PURE__*/ jsx(RemoteShellBreadcrumb, {}),
-                /*#__PURE__*/ jsx(RemoteShellContent, {
-                    children: /*#__PURE__*/ jsx(RemotePageContent, {})
-                })
-            ]
-        })
-    });
-};
-const RemoteForProduct = ({ product, simulateLoading = true })=>{
-    if ('home' === product) return /*#__PURE__*/ jsx(HomeContent, {});
-    const { config } = PRODUCT_CONFIGS[product];
-    return /*#__PURE__*/ jsx(ConfigRemote, {
-        config: config,
-        basePath: `/${product}`,
-        simulateLoading: simulateLoading
-    });
-};
-export { RemoteForProduct };

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

@@ -1 +0,0 @@
-export declare const HeaderActions: () => import("react").JSX.Element;

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

@@ -1,59 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Bell, ChevronUpDown } from "../../../icons/index.js";
-import { Button } from "../../Button/index.js";
-import { Code } from "../../Code/index.js";
-import { Text } from "../../Text/index.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
-import { TopHeaderSeparator } from "../../TopHeader/index.js";
-import { QuickHelpDropdown } from "./_storyQuickHelpDropdown.js";
-import { StorySearchModal } from "./_storySearchModal.js";
-const HeaderActions = ()=>/*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(StorySearchModal, {}),
-            /*#__PURE__*/ jsx(TopHeaderSeparator, {}),
-            /*#__PURE__*/ jsxs(Button, {
-                variant: "ghost",
-                size: "small",
-                color: "neutral",
-                className: "py-4 rounded-6",
-                children: [
-                    /*#__PURE__*/ jsx(Text, {
-                        size: "xs",
-                        weight: "medium",
-                        children: "Tenant Name"
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: "text-text-tertiary mx-[-2px]",
-                        children: "•"
-                    }),
-                    /*#__PURE__*/ jsx(Code, {
-                        size: "s",
-                        color: "secondary",
-                        children: "12345"
-                    }),
-                    /*#__PURE__*/ jsx(ChevronUpDown, {
-                        className: "!icon-sm"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(Tooltip, {
-                children: [
-                    /*#__PURE__*/ jsx(TooltipTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ jsx(Button, {
-                            variant: "ghost",
-                            size: "small",
-                            color: "neutral",
-                            "aria-label": "Wallarm Updates",
-                            children: /*#__PURE__*/ jsx(Bell, {})
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(TooltipContent, {
-                        children: "Wallarm updates"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(QuickHelpDropdown, {})
-        ]
-    });
-export { HeaderActions };

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

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

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

@@ -1,15 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-const HomeContent = ()=>/*#__PURE__*/ jsxs("div", {
-        className: "p-24",
-        children: [
-            /*#__PURE__*/ jsx("h1", {
-                className: "text-xl font-semibold text-text-primary",
-                children: "Home"
-            }),
-            /*#__PURE__*/ jsx("p", {
-                className: "mt-4 text-sm text-text-secondary",
-                children: "Cross-product summary. Click any product in the rail to drill into it."
-            })
-        ]
-    });
-export { HomeContent };

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

@@ -1,9 +0,0 @@
-import { edgeNavConfig } from './_storyNavConfigs';
-declare const KNOWN_PRODUCTS: readonly ['home', 'edge', 'ai-hypervisor', 'infra-discovery', 'security-testing', 'settings'];
-export type Product = (typeof KNOWN_PRODUCTS)[number];
-export declare const PRODUCT_CONFIGS: Record<Exclude<Product, 'home'>, {
-    config: typeof edgeNavConfig;
-}>;
-export declare function deriveProduct(pathname: string): Product;
-export declare function navigateToProduct(product: Product): void;
-export {};

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

@@ -1,39 +0,0 @@
-import { findFirstLinkPath, pushPathname } from "../../RemoteShell/index.js";
-import { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig } from "./_storyNavConfigs.js";
-const KNOWN_PRODUCTS = [
-    'home',
-    'edge',
-    'ai-hypervisor',
-    'infra-discovery',
-    'security-testing',
-    'settings'
-];
-const PRODUCT_CONFIGS = {
-    edge: {
-        config: edgeNavConfig
-    },
-    'ai-hypervisor': {
-        config: aiHypervisorNavConfig
-    },
-    'infra-discovery': {
-        config: infraDiscoveryNavConfig
-    },
-    'security-testing': {
-        config: securityTestingNavConfig
-    },
-    settings: {
-        config: settingsNavConfig
-    }
-};
-function deriveProduct(pathname) {
-    const segment = pathname.split('/').filter(Boolean)[0];
-    if (segment && KNOWN_PRODUCTS.includes(segment)) return segment;
-    return 'home';
-}
-function navigateToProduct(product) {
-    if ('home' === product) return void pushPathname('/home');
-    const { config } = PRODUCT_CONFIGS[product];
-    const firstPath = findFirstLinkPath(config.items) ?? '';
-    pushPathname(`/${product}/${firstPath}`);
-}
-export { PRODUCT_CONFIGS, deriveProduct, navigateToProduct };

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

@@ -1,6 +0,0 @@
-import type { NavConfig } from '../../RemoteShell';
-export declare const edgeNavConfig: NavConfig;
-export declare const aiHypervisorNavConfig: NavConfig;
-export declare const infraDiscoveryNavConfig: NavConfig;
-export declare const securityTestingNavConfig: NavConfig;
-export declare const settingsNavConfig: NavConfig;