@wallarm-org/design-system 0.47.0 → 0.48.0-rc-feature-AS-1033.1

package/dist/components/AppShell/AppShellRemote.js

@@ -8,7 +8,7 @@ const AppShellRemote = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "app-shell-remote",
         "data-testid": testId,
-        className: cn('[grid-area:remote] overflow-auto overscroll-none rounded-tl-12 border border-border-primary-light bg-bg-page-bg', className),
+        className: cn('[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border border-border-primary-light bg-bg-page-bg', className),
         children: children
     });
 };

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

@@ -1,7 +1,9 @@
-import type { FC } from 'react';
-import type { NavConfig } from '../../ProductNav';
+import { type NavConfig } from '../../ProductNav';
+import { type Product } from './_storyLib';
 export interface ConfigRemoteProps {
     config: NavConfig;
     basePath?: string;
 }
-export declare const ConfigRemote: FC<ConfigRemoteProps>;
+export declare const RemoteForProduct: ({ product }: {
+    product: Product;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ProductNav, ProductNavBreadcrumbs, ProductNavPanel, useProductNavContext } from "../../ProductNav/index.js";
+import { useEffect, useState } from "react";
+import { NavPanel, NavPanelHeader } from "../../NavPanel/index.js";
+import { NavPanelSkeleton, ProductNav, ProductNavBreadcrumbs, ProductNavPanel, useProductNavContext } from "../../ProductNav/index.js";
 import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel } from "../../RemoteShell/index.js";
+import { HomeContent } from "./_storyHomeContent.js";
+import { PRODUCT_CONFIGS } from "./_storyLib.js";
 const PageContent = ()=>{
     const { config, breadcrumbSegments } = useProductNavContext();
     const lastSegment = breadcrumbSegments[breadcrumbSegments.length - 1];
@@ -24,7 +28,35 @@ const PageContent = ()=>{
         ]
     });
 };
-const ConfigRemote = ({ config, basePath })=>/*#__PURE__*/ jsx(ProductNav, {
+const ConfigRemote = ({ config, basePath })=>{
+    const [loading, setLoading] = useState(true);
+    useEffect(()=>{
+        setLoading(true);
+        const timer = setTimeout(()=>{
+            setLoading(false);
+        }, 2000);
+        return ()=>clearTimeout(timer);
+    }, [
+        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, {
         config: config,
         basePath: basePath,
         children: /*#__PURE__*/ jsxs(RemoteShell, {
@@ -43,4 +75,13 @@ const ConfigRemote = ({ config, basePath })=>/*#__PURE__*/ jsx(ProductNav, {
             ]
         })
     });
-export { ConfigRemote };
+};
+const RemoteForProduct = ({ product })=>{
+    if ('home' === product) return /*#__PURE__*/ jsx(HomeContent, {});
+    const { config } = PRODUCT_CONFIGS[product];
+    return /*#__PURE__*/ jsx(ConfigRemote, {
+        config: config,
+        basePath: `/${product}`
+    });
+};
+export { RemoteForProduct };

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,39 @@
+import { findFirstLinkPath, pushPathname } from "../../ProductNav/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/_storyRecentDropdown.d.ts

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

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { History } from "../../../icons/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuTrigger } from "../../DropdownMenu/index.js";
+import { NavRailItem } from "../../NavRail/index.js";
+import { Text } from "../../Text/index.js";
+const RECENT_ITEMS = [
+    {
+        pageName: 'WAF Rules',
+        productName: 'Edge'
+    },
+    {
+        pageName: 'API Sessions',
+        dataPlane: 'US Cloud',
+        productName: 'Edge'
+    },
+    {
+        pageName: 'Prompt Inspector',
+        productName: 'AI Hypervisor'
+    },
+    {
+        pageName: 'Scanner Results',
+        dataPlane: 'EU Cloud',
+        productName: 'Security Testing'
+    },
+    {
+        pageName: 'Asset Inventory',
+        productName: 'Infra Discovery'
+    },
+    {
+        pageName: 'Pupu',
+        productName: 'Edge'
+    },
+    {
+        pageName: 'Pupupu',
+        dataPlane: 'US Cloud',
+        productName: 'Edge'
+    },
+    {
+        pageName: 'PuPuPuuu',
+        productName: 'AI Hypervisor'
+    },
+    {
+        pageName: 'MeowMeow',
+        dataPlane: 'EU Cloud',
+        productName: 'Security Testing'
+    },
+    {
+        pageName: '...',
+        productName: '....'
+    }
+];
+const RecentDropdown = ()=>/*#__PURE__*/ jsxs(DropdownMenu, {
+        positioning: {
+            placement: 'right-start',
+            gutter: 8
+        },
+        children: [
+            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                children: /*#__PURE__*/ jsx(NavRailItem, {
+                    icon: History,
+                    label: "Recent"
+                })
+            }),
+            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                className: "w-304 h-290 overscroll-none",
+                children: [
+                    /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                        className: "sticky top-0 z-10 bg-bg-surface-2",
+                        children: "Recent"
+                    }),
+                    RECENT_ITEMS.map((item)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
+                            children: /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                        children: item.pageName
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "xs",
+                                        color: "secondary",
+                                        children: item.dataPlane ? `${item.dataPlane} \u00b7 ${item.productName}` : item.productName
+                                    })
+                                ]
+                            })
+                        }, `${item.pageName}-${item.productName}`))
+                ]
+            })
+        ]
+    });
+export { RecentDropdown };

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

@@ -1,5 +1,7 @@
 export { AccountDropdown, type SidebarMode } from './_storyAccountDropdown';
-export { ConfigRemote } from './_storyConfigRenderer';
+export { RemoteForProduct } from './_storyConfigRenderer';
 export { HomeContent } from './_storyHomeContent';
+export { deriveProduct, navigateToProduct } from './_storyLib';
 export { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig, } from './_storyNavConfigs';
 export { QuickHelpDropdown } from './_storyQuickHelpDropdown';
+export { RecentDropdown } from './_storyRecentDropdown';

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

@@ -1,6 +1,8 @@
 import { AccountDropdown } from "./_storyAccountDropdown.js";
-import { ConfigRemote } from "./_storyConfigRenderer.js";
+import { RemoteForProduct } from "./_storyConfigRenderer.js";
 import { HomeContent } from "./_storyHomeContent.js";
+import { deriveProduct, navigateToProduct } from "./_storyLib.js";
 import { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig } from "./_storyNavConfigs.js";
 import { QuickHelpDropdown } from "./_storyQuickHelpDropdown.js";
-export { AccountDropdown, ConfigRemote, HomeContent, QuickHelpDropdown, aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig };
+import { RecentDropdown } from "./_storyRecentDropdown.js";
+export { AccountDropdown, HomeContent, QuickHelpDropdown, RecentDropdown, RemoteForProduct, aiHypervisorNavConfig, deriveProduct, edgeNavConfig, infraDiscoveryNavConfig, navigateToProduct, securityTestingNavConfig, settingsNavConfig };

package/dist/components/Kbd/Kbd.d.ts

@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const kbdVariants: (props?: ({
-    size?: "small" | "medium" | null | undefined;
+    size?: "small" | "medium" | "xsmall" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type KbdVariantsProps = VariantProps<typeof kbdVariants>;
 type KbdProps = ComponentProps<'kbd'> & KbdVariantsProps & TestableProps;

package/dist/components/Kbd/Kbd.js

@@ -4,6 +4,7 @@ import { cn } from "../../utils/cn.js";
 const kbdVariants = cva(cn('inline-flex items-center justify-center gap-1 w-fit', 'border border-component-border-hotkey rounded-4 bg-bg-surface-2', 'font-sans font-medium', 'text-text-primary  text-xs', 'pointer-events-none select-none'), {
     variants: {
         size: {
+            xsmall: 'h-16 min-w-20 p-2',
             small: 'h-20 min-w-20 p-4',
             medium: 'h-24 min-w-24 p-6'
         }

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

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface NavPanelSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    count?: number;
+}
+export declare const NavPanelSkeleton: FC<NavPanelSkeletonProps>;

package/dist/components/NavPanel/NavPanelSkeleton.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Skeleton } from "../Skeleton/index.js";
+const NavPanelSkeleton = ({ ref, className, count = 6, ...props })=>{
+    const testId = useTestId('skeleton');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "nav-panel-skeleton",
+        "data-testid": testId,
+        className: cn('flex flex-col gap-6', className),
+        children: Array.from({
+            length: count
+        }, (_, i)=>/*#__PURE__*/ jsx(Skeleton, {
+                width: "100%",
+                height: "28px",
+                rounded: 6
+            }, i))
+    });
+};
+NavPanelSkeleton.displayName = 'NavPanelSkeleton';
+export { NavPanelSkeleton };

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

@@ -8,3 +8,4 @@ export { NavPanelGroupLabel, type NavPanelGroupLabelProps } from './NavPanelGrou
 export { NavPanelHeader, type NavPanelHeaderProps } from './NavPanelHeader';
 export { NavPanelItem, type NavPanelItemProps } from './NavPanelItem';
 export { NavPanelSectionHeader, type NavPanelSectionHeaderProps } from './NavPanelSectionHeader';
+export { NavPanelSkeleton, type NavPanelSkeletonProps } from './NavPanelSkeleton';

package/dist/components/NavPanel/index.js

@@ -8,4 +8,5 @@ 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 };
+import { NavPanelSkeleton } from "./NavPanelSkeleton.js";
+export { NavPanel, NavPanelBack, NavPanelDivider, NavPanelGroup, NavPanelGroupContent, NavPanelGroupItem, NavPanelGroupLabel, NavPanelHeader, NavPanelItem, NavPanelSectionHeader, NavPanelSkeleton };

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

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface NavRailSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    count?: number;
+}
+export declare const NavRailSkeleton: FC<NavRailSkeletonProps>;

package/dist/components/NavRail/NavRailSkeleton.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Skeleton } from "../Skeleton/index.js";
+const NavRailSkeleton = ({ ref, className, count = 4, ...props })=>{
+    const testId = useTestId('skeleton');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "nav-rail-skeleton",
+        "data-testid": testId,
+        className: cn('flex flex-col gap-6', className),
+        children: Array.from({
+            length: count
+        }, (_, i)=>/*#__PURE__*/ jsx(Skeleton, {
+                width: "100%",
+                height: "28px",
+                rounded: 6
+            }, i))
+    });
+};
+NavRailSkeleton.displayName = 'NavRailSkeleton';
+export { NavRailSkeleton };

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

@@ -4,3 +4,4 @@ export { useNavRailContext } from './NavRailContext';
 export { NavRailFooter, type NavRailFooterProps } from './NavRailFooter';
 export { NavRailItem, type NavRailItemProps } from './NavRailItem';
 export { NavRailSeparator, type NavRailSeparatorProps } from './NavRailSeparator';
+export { NavRailSkeleton, type NavRailSkeletonProps } from './NavRailSkeleton';

package/dist/components/NavRail/index.js

@@ -4,4 +4,5 @@ import { useNavRailContext } from "./NavRailContext.js";
 import { NavRailFooter } from "./NavRailFooter.js";
 import { NavRailItem } from "./NavRailItem.js";
 import { NavRailSeparator } from "./NavRailSeparator.js";
-export { NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, useNavRailContext };
+import { NavRailSkeleton } from "./NavRailSkeleton.js";
+export { NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, useNavRailContext };

package/dist/components/OverflowList/OverflowList.js

@@ -1,20 +1,23 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useOverflowItems } from "../../hooks/index.js";
 import { cn } from "../../utils/cn.js";
 const OverflowListComponent = ({ items, itemRenderer, overflowRenderer, className, collapseFrom = 'end', minVisibleItems = 0, alwaysRenderOverflow = false, onOverflow, ...props })=>{
-    const memoizedItemRenderer = useCallback((item)=>{
-        const index = items.indexOf(item);
-        return itemRenderer(item, index);
+    const indexMap = useMemo(()=>{
+        const map = new Map();
+        items.forEach((item, index)=>{
+            if (!map.has(item)) map.set(item, index);
+        });
+        return map;
     }, [
-        items,
+        items
+    ]);
+    const memoizedItemRenderer = useCallback((item)=>itemRenderer(item, indexMap.get(item) ?? 0), [
+        indexMap,
         itemRenderer
     ]);
-    const memoizedMeasurementRenderer = useCallback((item)=>{
-        const index = items.indexOf(item);
-        return itemRenderer(item, index);
-    }, [
-        items,
+    const memoizedMeasurementRenderer = useCallback((item)=>itemRenderer(item, indexMap.get(item) ?? 0), [
+        indexMap,
         itemRenderer
     ]);
     const { containerRef, visibleItems, hiddenItems, MeasurementContainer } = useOverflowItems({
@@ -41,8 +44,16 @@ const OverflowListComponent = ({ items, itemRenderer, overflowRenderer, classNam
         hiddenItems
     ]);
     const finalHiddenCount = finalHiddenItems.length;
-    useMemo(()=>{
-        if (onOverflow && finalHiddenItems.length > 0) onOverflow(finalHiddenItems);
+    const prevHiddenRef = useRef(null);
+    useEffect(()=>{
+        if (!onOverflow || 0 === finalHiddenItems.length) {
+            prevHiddenRef.current = finalHiddenItems;
+            return;
+        }
+        const prev = prevHiddenRef.current;
+        const changed = !prev || prev.length !== finalHiddenItems.length || finalHiddenItems.some((item, index)=>item !== prev[index]);
+        if (changed) onOverflow(finalHiddenItems);
+        prevHiddenRef.current = finalHiddenItems;
     }, [
         finalHiddenItems,
         onOverflow
@@ -65,6 +76,7 @@ const OverflowListComponent = ({ items, itemRenderer, overflowRenderer, classNam
             /*#__PURE__*/ jsx(MeasurementContainer, {}),
             /*#__PURE__*/ jsxs("div", {
                 ref: containerRef,
+                "data-slot": "overflow-list",
                 className: cn('flex w-full min-w-0', className),
                 ...props,
                 children: [

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

@@ -1,3 +1,4 @@
+export { NavPanelSkeleton, type NavPanelSkeletonProps } from '../NavPanel';
 export { type MatchNavResult, matchNav } from './matchNav';
 export { findDrillNode, findFirstLinkPath } from './navUtils';
 export { ProductNav, type ProductNavProps } from './ProductNav';

package/dist/components/ProductNav/index.js

@@ -1,3 +1,4 @@
+import { NavPanelSkeleton } from "../NavPanel/index.js";
 import { matchNav } from "./matchNav.js";
 import { findDrillNode, findFirstLinkPath } from "./navUtils.js";
 import { ProductNav } from "./ProductNav.js";
@@ -6,4 +7,4 @@ 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 };
+export { NavPanelSkeleton, ProductNav, ProductNavBreadcrumbs, ProductNavPanel, findDrillNode, findFirstLinkPath, matchNav, pushPathname, useLocationPathname, useProductNav, useProductNavContext };

package/dist/components/Table/mocks.js

@@ -20,7 +20,10 @@ const securityEvents = [
         objectName: 'Rate limiting abuse on the payment endpoint',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 22000,
@@ -40,7 +43,10 @@ const securityEvents = [
         objectName: 'Mass assignment vulnerability in user profile',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 25000,
@@ -60,7 +66,10 @@ const securityEvents = [
         objectName: 'Insecure direct object reference in user data',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: true,
         requests: 30000,
@@ -80,7 +89,10 @@ const securityEvents = [
         objectName: 'Improper error handling leading to info leak',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: true,
         requests: 35000,
@@ -100,7 +112,10 @@ const securityEvents = [
         objectName: 'Broken authentication in the login API',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: true,
         requests: 20000,
@@ -120,7 +135,10 @@ const securityEvents = [
         objectName: 'Lack of resource validation in file upload',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 40000,
@@ -140,7 +158,10 @@ const securityEvents = [
         objectName: 'Server-side request forgery in image proxy',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 50000,
@@ -160,7 +181,10 @@ const securityEvents = [
         objectName: 'Unvalidated redirects and forwards in auth flow',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: true,
         requests: 75000,
@@ -180,7 +204,10 @@ const securityEvents = [
         objectName: 'SQL injection in the user ID',
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 15000,
@@ -200,7 +227,10 @@ const securityEvents = [
         objectName: "Cross-site scripting in the API endpoint",
         tags: [
             'api-abuse',
-            'account-takeover'
+            'account-takeover',
+            'credential-stuffing',
+            'scanner',
+            'brute-force'
         ],
         isActive: false,
         requests: 18000,

package/dist/hooks/useOverflowItems.helpers.d.ts

@@ -0,0 +1,15 @@
+export interface CalculateVisibleCountParams {
+    /** Width of each item in source order (px). */
+    itemWidths: number[];
+    /** Gap between flex children of the container (px). */
+    gap: number;
+    /** Available width of the container (px). */
+    availableWidth: number;
+    /** Measured width of the '+N' indicator (px); fallback — reserveSpace. */
+    indicatorWidth: number;
+}
+/**
+ * Pure arithmetic: how many leading items fit before an overflow indicator
+ * is required. Does not touch the DOM — safe to call on every resize frame.
+ */
+export declare function calculateVisibleCount({ itemWidths, gap, availableWidth, indicatorWidth, }: CalculateVisibleCountParams): number;

package/dist/hooks/useOverflowItems.helpers.js

@@ -0,0 +1,19 @@
+function calculateVisibleCount({ itemWidths, gap, availableWidth, indicatorWidth }) {
+    if (0 === itemWidths.length) return 0;
+    if (availableWidth <= 0) return itemWidths.length;
+    let total = 0;
+    for(let i = 0; i < itemWidths.length; i++)total += (itemWidths[i] ?? 0) + (i > 0 ? gap : 0);
+    if (total <= availableWidth) return itemWidths.length;
+    const maxWidth = availableWidth - indicatorWidth - gap;
+    let accumulated = 0;
+    let count = 0;
+    for(let i = 0; i < itemWidths.length; i++){
+        const widthWithGap = (itemWidths[i] ?? 0) + (i > 0 ? gap : 0);
+        if (accumulated + widthWithGap <= maxWidth || 0 === i) {
+            accumulated += widthWithGap;
+            count++;
+        } else break;
+    }
+    return Math.max(count, 1);
+}
+export { calculateVisibleCount };