@socprime/react-ui 0.0.9 → 0.0.11

package/domain.d.ts

@@ -1,6 +1,31 @@
 import * as React$1 from 'react';
 import { ComponentProps } from 'react';
 
+interface AttackTimelineStep {
+    name: string;
+    description: string;
+    hit: boolean;
+    code: string;
+}
+interface ChainGraphBranch {
+    from_code: string;
+    to_code: string;
+    node: AttackTimelineStep;
+}
+
+type ChainGraphBranchView = {
+    fromIndex: number;
+    toIndex: number;
+    step: ChainGraphBranch['node'];
+};
+declare const mapChainGraphBranches: (branches: ChainGraphBranch[] | undefined, chainGraph: AttackTimelineStep[]) => ChainGraphBranchView[];
+
+interface AttackTimelineProps {
+    steps?: AttackTimelineStep[];
+    branches?: ChainGraphBranchView[];
+}
+declare const AttackTimeline: React.FC<AttackTimelineProps>;
+
 interface CorrelationTimerProps {
     isRunning: boolean;
     runningTime?: number | null;
@@ -20,4 +45,4 @@ declare const SyncProcessBar: () => React$1.JSX.Element;
 
 type SyncProcessBarProps = ComponentProps<typeof SyncProcessBar>;
 
-export { CorrelationTimer, type CorrelationTimerProps, Severity, type SeverityProps, SyncProcessBar, type SyncProcessBarProps, type TSeverity };
+export { AttackTimeline, type AttackTimelineProps, type AttackTimelineStep, type ChainGraphBranch, type ChainGraphBranchView, CorrelationTimer, type CorrelationTimerProps, Severity, type SeverityProps, SyncProcessBar, type SyncProcessBarProps, type TSeverity, mapChainGraphBranches };

package/index.d.ts

@@ -74,6 +74,12 @@ interface AsideProps {
 }
 declare const Aside: React.FC<AsideProps>;
 
+interface AsideHorizontalProps {
+    tabs: AsideTab[];
+    className?: string;
+}
+declare const AsideHorizontal: React.FC<AsideHorizontalProps>;
+
 declare const badgeVariants: (props?: ({
     variant?: "secondary" | "outline" | "yellow" | "purple" | "default" | "dark" | "defaultOutline" | "warning" | "critical" | "success" | "lightBlue" | "redViolet" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -377,6 +383,22 @@ interface LabelInfoProps extends React.ComponentProps<typeof LabelPrimitive.Root
 }
 declare const LabelInfo: React.FC<LabelInfoProps>;
 
+interface MobileNavItem {
+    id: string;
+    label: string;
+    icon: React.FC<{
+        className?: string;
+    }>;
+    to?: string;
+}
+interface MobileNavProps {
+    items: MobileNavItem[];
+    logo?: React.ReactNode;
+    title?: string;
+    className?: string;
+}
+declare const MobileNav: React.FC<MobileNavProps>;
+
 interface MultiSelectOption {
     label: string;
     value: string;
@@ -509,6 +531,7 @@ interface SelectDefaultProps {
     loading?: boolean;
     disabled?: boolean;
     style?: React.CSSProperties;
+    icon?: React.ReactNode;
     renderItemLabel?: (value: string) => React.ReactNode;
     renderTriggerLabel?: (value: string) => React.ReactNode;
     onChange?: (value: string) => void;
@@ -712,4 +735,4 @@ declare function TreeRow({ className, children, ...props }: ComponentProps<'div'
 type TreeGuideProps = ComponentProps<typeof TreeGuide>;
 type TreeRowProps = ComponentProps<typeof TreeRow>;
 
-export { Accordion, type AccordionChevronVariant, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSection, type AccordionSectionProps, AccordionTrigger, type AccordionTriggerProps, AnimatedDots, type AnimatedDotsProps, Aside, type AsideProps, type AsideTab, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, ConditionalContent, type ConditionalContentProps, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, ConfirmDeleteDialog as ConfirmDialog, DefaultDialog, type DefaultDialogProps, DeleteButtonConfirm, type DeleteButtonConfirmProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, DropdownsCheckbox, type DropdownsCheckboxOption, type DropdownsCheckboxProps, DropdownsSelect, type DropdownsSelectOption, type DropdownsSelectProps, EmptyState, type EmptyStateProps, Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, FolderTreeExpandTrigger, type FolderTreeExpandTriggerProps, GroupHeaderRow, type GroupHeaderRowProps, HelperText, type HelperTextProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, LabelInfo, type LabelInfoProps, type LabelProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, PaginationWrap, type PaginationWrapProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar, SearchInput, SearchInputFields, type SearchInputFieldsProps, type SearchInputProps, Select, SelectContent, type SelectContentProps, SelectDefault, type SelectDefaultProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, ServerGroupedTableBody, type ServerGroupedTableBodyProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Slider, type SliderProps, SortableHeader, type SortableHeaderProps, Spinner, SpinnerCircle, type SpinnerCircleProps, SpinnerCustom, type SpinnerProps, SpinnerSquare, type SpinnerSquareProps, type SuggestionOption, Suggestions, type SuggestionsProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, TextTruncate, type TextTruncateProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipParent, type TooltipParentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TreeGuide, type TreeGuideProps, TreeRow, type TreeRowProps, badgeVariants, buttonVariants };
+export { Accordion, type AccordionChevronVariant, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSection, type AccordionSectionProps, AccordionTrigger, type AccordionTriggerProps, AnimatedDots, type AnimatedDotsProps, Aside, AsideHorizontal, type AsideHorizontalProps, type AsideProps, type AsideTab, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, ConditionalContent, type ConditionalContentProps, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, ConfirmDeleteDialog as ConfirmDialog, DefaultDialog, type DefaultDialogProps, DeleteButtonConfirm, type DeleteButtonConfirmProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, DropdownsCheckbox, type DropdownsCheckboxOption, type DropdownsCheckboxProps, DropdownsSelect, type DropdownsSelectOption, type DropdownsSelectProps, EmptyState, type EmptyStateProps, Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, FolderTreeExpandTrigger, type FolderTreeExpandTriggerProps, GroupHeaderRow, type GroupHeaderRowProps, HelperText, type HelperTextProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, LabelInfo, type LabelInfoProps, type LabelProps, MobileNav, type MobileNavItem, type MobileNavProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, PaginationWrap, type PaginationWrapProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar, SearchInput, SearchInputFields, type SearchInputFieldsProps, type SearchInputProps, Select, SelectContent, type SelectContentProps, SelectDefault, type SelectDefaultProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, ServerGroupedTableBody, type ServerGroupedTableBodyProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Slider, type SliderProps, SortableHeader, type SortableHeaderProps, Spinner, SpinnerCircle, type SpinnerCircleProps, SpinnerCustom, type SpinnerProps, SpinnerSquare, type SpinnerSquareProps, type SuggestionOption, Suggestions, type SuggestionsProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, TextTruncate, type TextTruncateProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipParent, type TooltipParentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TreeGuide, type TreeGuideProps, TreeRow, type TreeRowProps, badgeVariants, buttonVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socprime/react-ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "SOC Prime React UI component library and Storybook design system.",
   "license": "MIT",
   "engines": {

package/ui/Aside/AsideHorizontal.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "../../lib/cn.js";
+const AsideHorizontal = ({ tabs, className }) => {
+  const { pathname } = useLocation();
+  const activeRef = useRef(null);
+  useEffect(() => {
+    activeRef.current?.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+  }, [pathname]);
+  const links = tabs.filter(({ title }) => !title);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex snap-x gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: links.map(({ id, label, icon, to }) => {
+      const Icon = icon || void 0;
+      const isActive = pathname.startsWith(id);
+      return /* @__PURE__ */ jsxs(
+        Link,
+        {
+          ref: isActive ? activeRef : void 0,
+          to: to ?? id,
+          className: cn(
+            "flex shrink-0 snap-start items-center gap-2 rounded-full border px-4 py-2 text-xs font-medium whitespace-nowrap transition-colors",
+            isActive ? "border-btn-primary/50 bg-btn-primary/10 text-foreground [&_svg]:text-btn-primary" : "border-border text-subdued hover:bg-hover hover:text-foreground"
+          ),
+          children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+            label
+          ]
+        },
+        id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "from-primary pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r to-transparent" }),
+    /* @__PURE__ */ jsx("div", { className: "from-primary pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-l to-transparent" })
+  ] });
+};
+export {
+  AsideHorizontal
+};

package/ui/Aside/index.js

@@ -1,4 +1,6 @@
 import { Aside } from "./Aside.js";
+import { AsideHorizontal } from "./AsideHorizontal.js";
 export {
-  Aside
+  Aside,
+  AsideHorizontal
 };

package/ui/AttackTimeline/AttackTimeline.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { CyberpunkCorner } from "./CyberpunkCorner.js";
+import { TimelineBranches } from "./TimelineBranches.js";
+import { BRANCH_LAYOUT_PADDING_TOP } from "./timelineConstants.js";
+import { TimelineDividers } from "./TimelineDividers.js";
+import { TimelineSegments } from "./TimelineSegments.js";
+import { TimelineStepItem } from "./TimelineStepItem.js";
+import { useTimeline } from "./useTimeline.js";
+const AttackTimeline = ({ steps, branches = [] }) => {
+  const timelineSteps = steps ?? [];
+  const lastHitIndex = useMemo(
+    () => timelineSteps.reduce((last, step, index) => step.hit ? index : last, -1),
+    [timelineSteps]
+  );
+  const {
+    containerRef,
+    hoveredIndex,
+    hoveredBranchIndex,
+    setHoveredIndex,
+    setHoveredBranchIndex,
+    mouseX,
+    timelineWidth,
+    handleMouseMove,
+    handleMouseLeave
+  } = useTimeline();
+  const makeHoverHandlers = useCallback(
+    (index) => ({
+      onMouseEnter: () => setHoveredIndex(index),
+      onMouseLeave: () => setHoveredIndex(null)
+    }),
+    [setHoveredIndex]
+  );
+  if (timelineSteps.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative p-[12px]", children: [
+    /* @__PURE__ */ jsx(CyberpunkCorner, { position: "top-left" }),
+    /* @__PURE__ */ jsx(CyberpunkCorner, { position: "top-right" }),
+    /* @__PURE__ */ jsx(CyberpunkCorner, { position: "bottom-left" }),
+    /* @__PURE__ */ jsx(CyberpunkCorner, { position: "bottom-right" }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center gap-2" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "overflow-visible",
+        style: { paddingTop: branches.length > 0 ? BRANCH_LAYOUT_PADDING_TOP : void 0 },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative flex w-full items-start justify-between pt-2.5",
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            children: [
+              /* @__PURE__ */ jsx(TimelineSegments, { steps: timelineSteps }),
+              /* @__PURE__ */ jsx(TimelineDividers, { mouseX, timelineWidth }),
+              /* @__PURE__ */ jsx(
+                TimelineBranches,
+                {
+                  branches,
+                  totalSteps: timelineSteps.length,
+                  hoveredBranchIndex,
+                  onBranchMouseEnter: setHoveredBranchIndex,
+                  onBranchMouseLeave: () => setHoveredBranchIndex(null)
+                }
+              ),
+              timelineSteps.map((step, index) => /* @__PURE__ */ jsx(
+                TimelineStepItem,
+                {
+                  step,
+                  index,
+                  totalSteps: timelineSteps.length,
+                  isCurrent: index === lastHitIndex && step.hit,
+                  isHovered: hoveredIndex === index,
+                  ...makeHoverHandlers(index)
+                },
+                `${step.code}-${index}`
+              ))
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  AttackTimeline
+};

package/ui/AttackTimeline/CyberpunkCorner.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const GLOW_SHADOW = "0 0 8px rgba(74, 193, 142, 0.6)";
+const COLOR = "#4ac18e";
+const CyberpunkCorner = ({ position }) => {
+  const isTop = position.startsWith("top");
+  const isLeft = position.endsWith("left");
+  const edge = isTop ? "top-0" : "bottom-0";
+  const side = isLeft ? "left-0" : "right-0";
+  return /* @__PURE__ */ jsxs("div", { className: `pointer-events-none absolute ${edge} ${side} h-3 w-3`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute ${edge} ${side} h-[1px] w-3`,
+        style: { backgroundColor: COLOR, boxShadow: GLOW_SHADOW }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute ${edge} ${side} h-3 w-[1px]`,
+        style: { backgroundColor: COLOR, boxShadow: GLOW_SHADOW }
+      }
+    )
+  ] });
+};
+export {
+  CyberpunkCorner
+};

package/ui/AttackTimeline/TimelineBranchNode.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../lib/cn.js";
+import { TimelineStepTooltip } from "./TimelineStepTooltip.js";
+import { DETECTION_BYPASS_LABEL, TIMELINE_BRANCH_ORANGE_START } from "./timelineConstants.js";
+const TimelineBranchNode = memo(
+  ({ step, leftPercent, topPx, isHovered, onMouseEnter, onMouseLeave }) => {
+    const markerBoxShadow = isHovered ? `0 0 0 4px #252838, 0 0 16px color-mix(in srgb, ${TIMELINE_BRANCH_ORANGE_START} 60%, transparent)` : "0 0 0 4px #252838";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "pointer-events-auto absolute z-[2] flex -translate-x-1/2 flex-col items-center text-center",
+        style: { left: `${leftPercent}%`, top: `${topPx}px` },
+        onMouseEnter,
+        onMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx(TimelineStepTooltip, { step, codeClassName: "text-california", className: "max-w-200", children: /* @__PURE__ */ jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "from-california to-international-orange flex h-6 w-6 rotate-45 cursor-pointer bg-gradient-to-b p-[1.5px] transition-all duration-300",
+                isHovered && "scale-120"
+              ),
+              style: { boxShadow: markerBoxShadow },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative h-full w-full bg-[#2b2419]",
+                    isHovered && "from-california/25 to-international-orange/25 bg-gradient-to-b"
+                  ),
+                  children: /* @__PURE__ */ jsx("div", { className: "from-california to-international-orange absolute top-1/2 left-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-b" })
+                }
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-default max-w-[120px] cursor-pointer text-[11px] font-medium", children: DETECTION_BYPASS_LABEL })
+        ]
+      }
+    );
+  }
+);
+TimelineBranchNode.displayName = "TimelineBranchNode";
+export {
+  TimelineBranchNode
+};

package/ui/AttackTimeline/TimelineBranches.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useId } from "react";
+import { getBranchGeometry } from "./branchGeometry.js";
+import { TimelineBranchNode } from "./TimelineBranchNode.js";
+import {
+  BRANCH_AREA_HEIGHT,
+  BRANCH_NODE_OFFSET_Y,
+  BRANCH_OFFSET_TOP,
+  BRANCH_TOP_Y,
+  TIMELINE_BRANCH_ORANGE_END,
+  TIMELINE_BRANCH_ORANGE_START,
+  TIMELINE_GREEN
+} from "./timelineConstants.js";
+const TimelineBranches = memo(
+  ({ branches, totalSteps, hoveredBranchIndex, onBranchMouseEnter, onBranchMouseLeave }) => {
+    const baseId = useId();
+    if (branches.length === 0) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 overflow-visible",
+        style: { top: BRANCH_OFFSET_TOP, height: BRANCH_AREA_HEIGHT, zIndex: 0 },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "absolute inset-0 h-full w-full overflow-visible",
+              viewBox: `0 0 100 ${BRANCH_AREA_HEIGHT}`,
+              preserveAspectRatio: "none",
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: branches.map((branch, index) => {
+                  const { fromXPercent, toXPercent } = getBranchGeometry(
+                    branch.fromIndex,
+                    branch.toIndex,
+                    totalSteps
+                  );
+                  return /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: `${baseId}-branch-gradient-${index}`,
+                      gradientUnits: "userSpaceOnUse",
+                      x1: fromXPercent,
+                      y1: 0,
+                      x2: toXPercent,
+                      y2: 0,
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: TIMELINE_GREEN }),
+                        /* @__PURE__ */ jsx("stop", { offset: "20%", style: { stopColor: TIMELINE_BRANCH_ORANGE_START } }),
+                        /* @__PURE__ */ jsx("stop", { offset: "80%", style: { stopColor: TIMELINE_BRANCH_ORANGE_END } }),
+                        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: TIMELINE_GREEN })
+                      ]
+                    },
+                    `gradient-${index}`
+                  );
+                }) }),
+                branches.map((branch, index) => {
+                  const geometry = getBranchGeometry(branch.fromIndex, branch.toIndex, totalSteps);
+                  const gradientId = `${baseId}-branch-gradient-${index}`;
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: geometry.outlinePath,
+                      fill: "none",
+                      stroke: `url(#${gradientId})`,
+                      strokeWidth: 1,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      vectorEffect: "non-scaling-stroke"
+                    },
+                    `branch-shape-${index}`
+                  );
+                })
+              ]
+            }
+          ),
+          branches.map((branch, index) => {
+            const { nodeXPercent } = getBranchGeometry(branch.fromIndex, branch.toIndex, totalSteps);
+            return /* @__PURE__ */ jsx(
+              TimelineBranchNode,
+              {
+                step: branch.step,
+                leftPercent: nodeXPercent,
+                topPx: BRANCH_TOP_Y + BRANCH_NODE_OFFSET_Y,
+                isHovered: hoveredBranchIndex === index,
+                onMouseEnter: () => onBranchMouseEnter(index),
+                onMouseLeave: onBranchMouseLeave
+              },
+              `branch-node-${index}`
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+TimelineBranches.displayName = "TimelineBranches";
+export {
+  TimelineBranches
+};

package/ui/AttackTimeline/TimelineDividers.js

@@ -0,0 +1,36 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { calculateLineHeight } from "./useTimeline.js";
+const TOTAL_MARKS = Math.floor(100 / 0.4);
+const TimelineDividers = memo(
+  ({ mouseX, timelineWidth }) => {
+    const marks = useMemo(
+      () => Array.from({ length: TOTAL_MARKS }, (_, i) => {
+        const leftPosition = i * 0.4;
+        const height = calculateLineHeight(leftPosition, mouseX, timelineWidth);
+        const opacity = i % 3 === 0 ? 0.6 : 0.4;
+        const topOffset = 16 - height / 2;
+        return { i, leftPosition, height, opacity, topOffset };
+      }),
+      [mouseX, timelineWidth]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: marks.map(({ i, leftPosition, height, opacity, topOffset }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute w-[1px] bg-[#3b3d4f] transition-all duration-75",
+        style: {
+          height: `${height}px`,
+          opacity,
+          left: `${leftPosition}%`,
+          top: `${topOffset}px`,
+          zIndex: 0
+        }
+      },
+      `mark-${i}`
+    )) });
+  }
+);
+TimelineDividers.displayName = "TimelineDividers";
+export {
+  TimelineDividers
+};

package/ui/AttackTimeline/TimelineSegments.js

@@ -0,0 +1,39 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+const getSegmentColor = (current, next) => {
+  const currentActive = current.hit;
+  const nextActive = next.hit;
+  if (currentActive && nextActive) {
+    return "#4ac18e";
+  }
+  if (currentActive && !nextActive) {
+    return "linear-gradient(to right, #4ac18e, #3b3d4f)";
+  }
+  if (!currentActive && nextActive) {
+    return "linear-gradient(to right, #3b3d4f, #4ac18e)";
+  }
+  return "#3b3d4f";
+};
+const TimelineSegments = ({ steps }) => {
+  const segmentWidth = 100 / steps.length;
+  return /* @__PURE__ */ jsx(Fragment, { children: steps.map((step, index) => {
+    if (index === steps.length - 1) return null;
+    const leftPosition = index * segmentWidth + segmentWidth / 2;
+    const lineColor = getSegmentColor(step, steps[index + 1]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-4 h-[1px]",
+        style: {
+          left: `${leftPosition}%`,
+          width: `${segmentWidth}%`,
+          background: lineColor,
+          zIndex: 1
+        }
+      },
+      `segment-${index}`
+    );
+  }) });
+};
+export {
+  TimelineSegments
+};

package/ui/AttackTimeline/TimelineStepItem.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { TimelineStepTooltip } from "./TimelineStepTooltip.js";
+const TimelineStepItem = memo(
+  ({ step, totalSteps, isCurrent, isHovered, onMouseEnter, onMouseLeave }) => {
+    const isActive = step.hit;
+    const markerBoxShadow = isHovered ? "0 0 0 4px #252838, 0 0 16px rgba(74, 193, 142, 0.6)" : isActive ? "0 0 0 4px #252838" : "none";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group relative flex flex-col items-center text-center",
+        style: { width: `${100 / totalSteps}%`, zIndex: 1 },
+        onMouseEnter,
+        onMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx(TimelineStepTooltip, { step, className: "max-w-200", children: /* @__PURE__ */ jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `h-[13px] w-[13px] rotate-45 transform cursor-pointer transition-all duration-300 ${isActive ? "border-success border-[1.5px] bg-[#1f2b27]" : "border-[1.5px] border-[#57586E] bg-[#252838]"} ${isHovered ? "border-success bg-success scale-150" : ""}`,
+              style: { boxShadow: markerBoxShadow },
+              children: isActive && /* @__PURE__ */ jsx("div", { className: "bg-success absolute top-1/2 left-1/2 h-1 w-1 -translate-x-1/2 -translate-y-1/2 transform" })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-1", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `cursor-pointer text-[11px] font-medium transition-colors ${isActive ? "text-default" : "text-[#8C9290]"}`,
+              style: {
+                textShadow: isCurrent ? "0 0 20px rgba(255,255,255,0.1)" : "none"
+              },
+              children: step.name
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+TimelineStepItem.displayName = "TimelineStepItem";
+export {
+  TimelineStepItem
+};

package/ui/AttackTimeline/TimelineStepTooltip.js

@@ -0,0 +1,31 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Tooltip } from "../Tooltip/index.js";
+const TimelineStepTooltip = ({
+  step,
+  className,
+  codeClassName = "text-success",
+  children
+}) => /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    className: cn("border-border bg-primary max-w-100 rounded-lg border p-3 shadow-xl", className),
+    classNameArrow: "bg-primary fill-primary",
+    content: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-default mb-1 text-xs font-medium", children: [
+        step.name,
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: `text-xs ${codeClassName}`, children: [
+          "(",
+          step.code,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-subdued text-2xs break-words", children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: step.description ?? "" } }) })
+    ] }),
+    children
+  }
+);
+export {
+  TimelineStepTooltip
+};

package/ui/AttackTimeline/branchGeometry.js

@@ -0,0 +1,65 @@
+import { BRANCH_BOTTOM_Y, BRANCH_TOP_Y } from "./timelineConstants.js";
+const CHAMFER_RADIUS = 0;
+const distance = (ax, ay, bx, by) => Math.hypot(bx - ax, by - ay);
+const buildChamferedPath = (points, chamfer) => {
+  if (points.length < 2) return "";
+  const segments = [];
+  for (let i = 0; i < points.length; i++) {
+    const [cx, cy] = points[i];
+    const prev = points[i - 1];
+    const next = points[i + 1];
+    if (!prev || !next) {
+      if (i === 0) {
+        segments.push(`M ${cx} ${cy}`);
+      } else {
+        segments.push(`L ${cx} ${cy}`);
+      }
+      continue;
+    }
+    const [px, py] = prev;
+    const [nx, ny] = next;
+    const inLen = distance(px, py, cx, cy);
+    const outLen = distance(cx, cy, nx, ny);
+    const radius = Math.min(chamfer, inLen * 0.35, outLen * 0.35);
+    const inX = cx + (px - cx) / inLen * radius;
+    const inY = cy + (py - cy) / inLen * radius;
+    const outX = cx + (nx - cx) / outLen * radius;
+    const outY = cy + (ny - cy) / outLen * radius;
+    if (i === 0) {
+      segments.push(`M ${inX} ${inY}`);
+    } else {
+      segments.push(`L ${inX} ${inY}`);
+    }
+    segments.push(`L ${outX} ${outY}`);
+  }
+  return segments.join(" ");
+};
+const getBranchGeometry = (fromIndex, toIndex, totalSteps) => {
+  const segmentWidth = 100 / totalSteps;
+  const from = Math.min(fromIndex, toIndex);
+  const to = Math.max(fromIndex, toIndex);
+  const fromXPercent = (from + 0.5) * segmentWidth;
+  const toXPercent = (to + 0.5) * segmentWidth;
+  const midXPercent = (fromXPercent + toXPercent) / 2;
+  const topHalfWidth = Math.min((toXPercent - fromXPercent) * 0.36, 26);
+  const topLeftX = midXPercent - topHalfWidth;
+  const topRightX = midXPercent + topHalfWidth;
+  const outlinePath = buildChamferedPath(
+    [
+      [fromXPercent, BRANCH_BOTTOM_Y],
+      [topLeftX, BRANCH_TOP_Y],
+      [topRightX, BRANCH_TOP_Y],
+      [toXPercent, BRANCH_BOTTOM_Y]
+    ],
+    CHAMFER_RADIUS
+  );
+  return {
+    fromXPercent,
+    toXPercent,
+    nodeXPercent: midXPercent,
+    outlinePath
+  };
+};
+export {
+  getBranchGeometry
+};

package/ui/AttackTimeline/index.js

@@ -0,0 +1,6 @@
+import { AttackTimeline } from "./AttackTimeline.js";
+import { mapChainGraphBranches } from "./mapChainGraphBranches.js";
+export {
+  AttackTimeline,
+  mapChainGraphBranches
+};

package/ui/AttackTimeline/mapChainGraphBranches.js

@@ -0,0 +1,29 @@
+const buildCodeToIndexMap = (chainGraph) => {
+  const codeToIndex = /* @__PURE__ */ new Map();
+  chainGraph.forEach((node, index) => {
+    if (!codeToIndex.has(node.code)) {
+      codeToIndex.set(node.code, index);
+    }
+  });
+  return codeToIndex;
+};
+const mapChainGraphBranches = (branches, chainGraph) => {
+  const codeToIndex = buildCodeToIndexMap(chainGraph);
+  return (branches ?? []).flatMap((branch) => {
+    const fromIndex = codeToIndex.get(branch.from_code);
+    const toIndex = codeToIndex.get(branch.to_code);
+    if (fromIndex === void 0 || toIndex === void 0 || fromIndex === toIndex) {
+      return [];
+    }
+    return [
+      {
+        fromIndex,
+        toIndex,
+        step: branch.node
+      }
+    ];
+  });
+};
+export {
+  mapChainGraphBranches
+};

package/ui/AttackTimeline/timelineConstants.js

@@ -0,0 +1,30 @@
+const TIMELINE_GREEN = "#4ac18e";
+const TIMELINE_INACTIVE = "#3b3d4f";
+const TIMELINE_BRANCH_ORANGE_START = "var(--bg-california)";
+const TIMELINE_BRANCH_ORANGE_END = "var(--bg-international-orange)";
+const BRANCH_HEIGHT_ABOVE = 75;
+const TIMELINE_PADDING_TOP = 10;
+const MARKER_CENTER_Y = TIMELINE_PADDING_TOP + 6.5;
+const BRANCH_OFFSET_TOP = MARKER_CENTER_Y - BRANCH_HEIGHT_ABOVE;
+const BRANCH_AREA_HEIGHT = BRANCH_HEIGHT_ABOVE;
+const BRANCH_TOP_Y = 0;
+const BRANCH_NODE_OFFSET_Y = -12;
+const BRANCH_BOTTOM_Y = BRANCH_HEIGHT_ABOVE;
+const BRANCH_LAYOUT_PADDING_TOP = BRANCH_HEIGHT_ABOVE;
+const DETECTION_BYPASS_LABEL = "Detection Bypass";
+export {
+  BRANCH_AREA_HEIGHT,
+  BRANCH_BOTTOM_Y,
+  BRANCH_HEIGHT_ABOVE,
+  BRANCH_LAYOUT_PADDING_TOP,
+  BRANCH_NODE_OFFSET_Y,
+  BRANCH_OFFSET_TOP,
+  BRANCH_TOP_Y,
+  DETECTION_BYPASS_LABEL,
+  MARKER_CENTER_Y,
+  TIMELINE_BRANCH_ORANGE_END,
+  TIMELINE_BRANCH_ORANGE_START,
+  TIMELINE_GREEN,
+  TIMELINE_INACTIVE,
+  TIMELINE_PADDING_TOP
+};

package/ui/AttackTimeline/useTimeline.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const calculateLineHeight = (linePositionPercent, mouseX, timelineWidth) => {
+  if (mouseX === null || timelineWidth === 0) return 24;
+  const linePositionPx = linePositionPercent / 100 * timelineWidth;
+  const distance = Math.abs(mouseX - linePositionPx);
+  const maxDistance = 80;
+  if (distance > maxDistance) return 24;
+  const factor = 1 - distance / maxDistance;
+  const maxHeight = 72;
+  return 24 + (maxHeight - 24) * factor;
+};
+const useTimeline = () => {
+  const containerRef = useRef(null);
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [hoveredBranchIndex, setHoveredBranchIndex] = useState(null);
+  const [mouseX, setMouseX] = useState(null);
+  const [timelineWidth, setTimelineWidth] = useState(0);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const updateWidth = () => setTimelineWidth(element.getBoundingClientRect().width);
+    updateWidth();
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const handleMouseMove = useCallback((e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setMouseX(e.clientX - rect.left);
+    setTimelineWidth(rect.width);
+  }, []);
+  const handleMouseLeave = useCallback(() => setMouseX(null), []);
+  return {
+    containerRef,
+    mouseX,
+    hoveredIndex,
+    hoveredBranchIndex,
+    timelineWidth,
+    setHoveredIndex,
+    setHoveredBranchIndex,
+    handleMouseMove,
+    handleMouseLeave
+  };
+};
+export {
+  calculateLineHeight,
+  useTimeline
+};

package/ui/MobileNav/MobileNav.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { MenuIcon, XIcon } from "lucide-react";
+import { motion } from "motion/react";
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "../../lib/cn.js";
+import { Dialog, DialogClose, DialogOverlay, DialogPortal, DialogTrigger } from "../Dialog/index.js";
+const isPathActive = (pathname, linkTo) => pathname === linkTo || pathname.startsWith(`${linkTo}/`);
+const MobileNav = ({ items, logo, title, className }) => {
+  const [open, setOpen] = useState(false);
+  const { pathname } = useLocation();
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "Open menu",
+        className: cn(
+          "border-border text-foreground hover:bg-hover flex size-10 cursor-pointer items-center justify-center rounded-full border transition-colors lg:hidden",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(MenuIcon, { className: "size-5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, { className: "backdrop-blur-sm" }),
+      /* @__PURE__ */ jsx(DialogPrimitive.Content, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          className: "border-border bg-primary fixed inset-y-0 left-0 z-50 flex w-[300px] max-w-[85vw] flex-col border-r shadow-2xl",
+          initial: { x: "-100%" },
+          animate: { x: 0 },
+          transition: { type: "spring", damping: 30, stiffness: 300 },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-between border-b px-5 py-4", children: [
+              /* @__PURE__ */ jsxs(DialogPrimitive.Title, { className: "flex items-center gap-3", children: [
+                logo,
+                title && /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: title })
+              ] }),
+              /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Close menu",
+                  className: "border-border text-foreground hover:bg-hover flex size-9 cursor-pointer items-center justify-center rounded-full border transition-colors",
+                  children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col gap-1 overflow-y-auto p-4", children: items.map(({ id, label, icon, to }, index) => {
+              const Icon = icon;
+              const linkTo = to ?? id;
+              const isActive = isPathActive(pathname, linkTo);
+              return /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { opacity: 0, x: -24 },
+                  animate: { opacity: 1, x: 0 },
+                  transition: { delay: 0.08 + index * 0.05, duration: 0.25 },
+                  children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxs(
+                    Link,
+                    {
+                      to: linkTo,
+                      className: cn(
+                        "group relative flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
+                        isActive ? "bg-btn-primary/10" : "hover:bg-hover"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "bg-btn-primary absolute inset-y-2 left-0 w-1 rounded-full transition-opacity",
+                              isActive ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            className: cn(
+                              "size-5 transition-colors",
+                              isActive ? "text-btn-primary" : "text-subdued group-hover:text-foreground"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "text-sm font-medium transition-colors",
+                              isActive ? "text-foreground" : "text-subdued group-hover:text-foreground"
+                            ),
+                            children: label
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                },
+                id
+              );
+            }) })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  MobileNav
+};

package/ui/MobileNav/index.js

@@ -0,0 +1,4 @@
+import { MobileNav } from "./MobileNav.js";
+export {
+  MobileNav
+};

package/ui/Select/SelectDefault.js

@@ -18,10 +18,16 @@ const SelectDefault = ({
   loading,
   disabled,
   style,
+  icon,
   renderItemLabel,
   renderTriggerLabel,
   onChange
 }) => {
+  const selectValueDefault = /* @__PURE__ */ jsx(SelectValue, { placeholder, children: value && renderTriggerLabel ? renderTriggerLabel(value) : void 0 });
+  const renderValue = icon ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    icon,
+    selectValueDefault
+  ] }) : selectValueDefault;
   return /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
     /* @__PURE__ */ jsx(
       SelectTrigger,
@@ -32,7 +38,7 @@ const SelectDefault = ({
         disabled,
         loading,
         style,
-        children: /* @__PURE__ */ jsx(SelectValue, { placeholder, children: value && renderTriggerLabel ? renderTriggerLabel(value) : void 0 })
+        children: renderValue
       }
     ),
     /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: options.filter((option) => option.value !== "").map((option) => /* @__PURE__ */ jsx(SelectItem, { className: "cursor-pointer", value: option.value, children: renderItemLabel ? renderItemLabel(option.value) : option.label }, option.value)) }) })

package/ui/entries/domain.js

@@ -1,3 +1,4 @@
+export * from "../AttackTimeline/index.js";
 export * from "../CorrelationTimer/index.js";
 export * from "../Severity/index.js";
 export * from "../SyncProcessBar/index.js";

package/ui/index.js

@@ -15,6 +15,7 @@ export * from "./Input/index.js";
 export * from "./InputNumber/index.js";
 export * from "./InputPassword/index.js";
 export * from "./Label/index.js";
+export * from "./MobileNav/index.js";
 export * from "./MultiSelect/index.js";
 export * from "./PageHeader/index.js";
 export * from "./Pagination/index.js";