entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/navigation/Menu/Menu.js

@@ -1,81 +1,115 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Menu as Menu$1 } from '@base-ui/react/menu';
+import React from 'react';
 import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
 import { CircleIcon } from '../../Icons/CircleIcon.js';
 import { Button } from '../../primitives/Button/Button.js';
-import { Text } from '../../primitives/Text/Text.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
 import { cx } from '../../../utils/cx.js';
-import { useMenu, createItemClickHandler } from './useMenu.js';
-import { renderItemWithSubmenu } from './Menu.helpers.js';
-import { separatorStyle, menuContentStyle } from './Menu.css.js';
+import { menuItemStyle, separatorStyle, itemStartSlotStyle, itemLabelStyle, itemEndSlotStyle, shortcutStyle, menuContentStyle, groupLabelStyle } from './Menu.css.js';
+import { MenuGapContext, DEFAULT_MENU_GAP } from './MenuGapContext.js';
 
 /**
- * A configuration-driven menu component for editor interfaces.
- *
- * Automatically handles radio/checkbox selection states, grouping,
- * and nested submenus based on provided configuration object.
+ * Internal three-slot row used by every interactive menu entry.
+ */
+const ItemLayout = ({ start, children, shortcut, endContent, }) => (jsxs(Fragment, { children: [start != null && jsx("span", { className: itemStartSlotStyle, children: start }), jsx("span", { className: itemLabelStyle, children: children }), (shortcut != null || endContent != null) && (jsxs("span", { className: itemEndSlotStyle, children: [shortcut != null && jsx("span", { className: shortcutStyle, children: shortcut }), endContent] }))] }));
+/**
+ * Merge `onClick` and its `onSelect` alias into one stable handler so a new
+ * function identity isn't handed to Base UI on every render. Returns
+ * `undefined` when neither is set, so no listener is attached.
+ */
+const useActivate = (onClick, onSelect) => {
+    const handlersRef = useLatest({ onClick, onSelect });
+    const handleActivate = React.useCallback(event => {
+        handlersRef.current.onClick?.(event);
+        handlersRef.current.onSelect?.(event);
+    }, [handlersRef]);
+    return onClick || onSelect ? handleActivate : undefined;
+};
+/**
+ * Composable menu for editor interfaces, built on `@base-ui/react` Menu
+ * primitives. Compose the trigger, content and items as children — no config
+ * object.
  *
  * @example
  * ```tsx
- * const config = {
- *   groups: [{
- *     id: 'actions',
- *     items: [
- *       {
- *         id: 'copy',
- *         label: 'Copy',
- *         onClick: handleCopy,
- *         subMenu: nestedConfig,
- *         submenuTrigger: 'hover' // Opens on hover (default)
- *       },
- *       {
- *         id: 'paste',
- *         label: 'Paste',
- *         onClick: handlePaste,
- *         subMenu: nestedConfig,
- *         submenuTrigger: 'click' // Opens on click only
- *       }
- *     ],
- *     itemSelectionType: 'none'
- *   }]
- * };
- *
- * <Menu config={config}>
- *   <Button>Options</Button>
+ * <Menu>
+ *   <Menu.Trigger>File</Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item icon={<SaveIcon />} shortcut="⌘S" onClick={save}>
+ *       Save
+ *     </Menu.Item>
+ *     <Menu.Separator />
+ *     <Menu.Sub>
+ *       <Menu.SubTrigger>Export</Menu.SubTrigger>
+ *       <Menu.SubContent>
+ *         <Menu.Item>PNG</Menu.Item>
+ *         <Menu.Item>SVG</Menu.Item>
+ *       </Menu.SubContent>
+ *     </Menu.Sub>
+ *   </Menu.Content>
  * </Menu>
  * ```
  */
-const Menu = ({ config, selectedItems = {}, onChange, children, checkboxIcon = jsx(CheckIcon, { size: "sm" }), radioIcon = jsx(CircleIcon, { size: "sm" }), disabled = false, className, isSubmenu = false, testId, ...rest }) => {
-    const { handleItemClick, isItemSelected, toggleSubmenu } = useMenu(selectedItems, onChange);
-    const menuItems = useMemo(() => {
-        return config.groups.map((group, groupIndex) => {
-            const items = group.items.map(item => {
-                const isSelected = isItemSelected(group.id, item.id);
-                const clickHandler = createItemClickHandler(item, group, handleItemClick, toggleSubmenu);
-                return renderItemWithSubmenu(item, group, isSelected, checkboxIcon, radioIcon, selectedItems, clickHandler, onChange, Menu);
-            });
-            const showSeparator = groupIndex < config.groups.length - 1 && config.groups.length > 1;
-            // Wrap group items with BaseMenu.Group structure
-            return (jsxs(React.Fragment, { children: [jsxs(Menu$1.Group, { children: [group.label && (jsx(Menu$1.GroupLabel, { children: jsx(Text, { variant: "caption", color: "muted", weight: "semibold", children: group.label }) })), group.itemSelectionType === 'radio' ? (jsx(Menu$1.RadioGroup, { value: selectedItems[group.id]?.[0] ?? '', children: items })) : (items)] }), showSeparator && jsx(Menu$1.Separator, { className: separatorStyle })] }, group.id));
-        });
-    }, [
-        config,
-        selectedItems,
-        isItemSelected,
-        handleItemClick,
-        toggleSubmenu,
-        checkboxIcon,
-        radioIcon,
-        onChange,
-    ]);
-    // For submenu, only render the content without root/trigger wrapper
-    if (isSubmenu) {
-        return jsx(Fragment, { children: menuItems });
-    }
-    return (jsxs(Menu$1.Root, { children: [jsx(Menu$1.Trigger, { render: props => jsx(Button, { ...props }), disabled: disabled, children: children }), jsx(Menu$1.Portal, { children: jsx(Menu$1.Positioner, { children: jsx(Menu$1.Popup, { className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: menuItems }) }) })] }));
+const MenuRoot = ({ children, open, defaultOpen, onOpenChange, modal, disabled, gap = DEFAULT_MENU_GAP, ref, }) => {
+    const actionsRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({ close: () => actionsRef.current?.close() }), []);
+    return (jsx(MenuGapContext.Provider, { value: gap, children: jsx(Menu$1.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, modal: modal, disabled: disabled, actionsRef: actionsRef, children: children }) }));
+};
+MenuRoot.displayName = 'Menu';
+const MenuTrigger = ({ children, render, disabled, openOnHover, className, testId, ...rest }) => (jsx(Menu$1.Trigger, { render: render ?? jsx(Button, {}), disabled: disabled, openOnHover: openOnHover, className: className, "data-testid": testId, ...rest, children: children }));
+MenuTrigger.displayName = 'Menu.Trigger';
+const MenuContent = ({ children, className, side, align = 'start', sideOffset, alignOffset, testId, ref, ...rest }) => {
+    const gap = React.useContext(MenuGapContext);
+    return (jsx(Menu$1.Portal, { children: jsx(Menu$1.Positioner, { side: side, align: align, sideOffset: sideOffset ?? gap, alignOffset: alignOffset, children: jsx(Menu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: children }) }) }));
 };
+MenuContent.displayName = 'Menu.Content';
+const MenuItem = React.memo(({ children, icon, shortcut, endContent, disabled, closeOnClick = true, onClick, onSelect, className, testId, ref, ...rest }) => {
+    const handleActivate = useActivate(onClick, onSelect);
+    return (jsx(Menu$1.Item, { ref: ref, disabled: disabled, closeOnClick: closeOnClick, onClick: handleActivate, className: cx(menuItemStyle, className), "data-testid": testId, ...rest, children: jsx(ItemLayout, { start: icon, shortcut: shortcut, endContent: endContent, children: children }) }));
+});
+MenuItem.displayName = 'Menu.Item';
+const MenuGroup = ({ children, label, className, testId, ...rest }) => (jsxs(Menu$1.Group, { className: className, "data-testid": testId, ...rest, children: [label != null && (jsx(Menu$1.GroupLabel, { className: groupLabelStyle, children: label })), children] }));
+MenuGroup.displayName = 'Menu.Group';
+const MenuSeparator = React.memo(({ className, testId, ...rest }) => (jsx(Menu$1.Separator, { className: cx(separatorStyle, className), "data-testid": testId, ...rest })));
+MenuSeparator.displayName = 'Menu.Separator';
+const MenuRadioGroup = ({ children, value, defaultValue, onValueChange, className, testId, ...rest }) => (jsx(Menu$1.RadioGroup, { value: value, defaultValue: defaultValue, onValueChange: onValueChange, className: className, "data-testid": testId, ...rest, children: children }));
+MenuRadioGroup.displayName = 'Menu.RadioGroup';
+const MenuRadioItem = React.memo(({ children, value, indicator = jsx(CircleIcon, { size: "sm" }), shortcut, endContent, disabled, closeOnClick = false, onClick, onSelect, className, testId, ref, ...rest }) => {
+    const handleActivate = useActivate(onClick, onSelect);
+    return (jsx(Menu$1.RadioItem, { ref: ref, value: value, disabled: disabled, closeOnClick: closeOnClick, onClick: handleActivate, className: cx(menuItemStyle, className), "data-testid": testId, ...rest, children: jsx(ItemLayout, { start: jsx(Menu$1.RadioItemIndicator, { children: indicator }), shortcut: shortcut, endContent: endContent, children: children }) }));
+});
+MenuRadioItem.displayName = 'Menu.RadioItem';
+const MenuCheckboxItem = React.memo(({ children, checked, defaultChecked, onCheckedChange, indicator = jsx(CheckIcon, { size: "sm" }), shortcut, endContent, disabled, closeOnClick = false, onClick, onSelect, className, testId, ref, ...rest }) => {
+    const handleActivate = useActivate(onClick, onSelect);
+    return (jsx(Menu$1.CheckboxItem, { ref: ref, checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, closeOnClick: closeOnClick, onClick: handleActivate, className: cx(menuItemStyle, className), "data-testid": testId, ...rest, children: jsx(ItemLayout, { start: jsx(Menu$1.CheckboxItemIndicator, { children: indicator }), shortcut: shortcut, endContent: endContent, children: children }) }));
+});
+MenuCheckboxItem.displayName = 'Menu.CheckboxItem';
+const MenuSub = ({ children, defaultOpen, }) => (jsx(Menu$1.SubmenuRoot, { defaultOpen: defaultOpen, children: children }));
+MenuSub.displayName = 'Menu.Sub';
+const MenuSubTrigger = React.memo(({ children, icon, disabled, onClick, className, testId, ref, ...rest }) => (jsx(Menu$1.SubmenuTrigger, { ref: ref, disabled: disabled, onClick: onClick, className: cx(menuItemStyle, className), "data-testid": testId, ...rest, children: jsx(ItemLayout, { start: icon, endContent: jsx(ChevronRightIcon, { size: "sm" }), children: children }) })));
+MenuSubTrigger.displayName = 'Menu.SubTrigger';
+/**
+ * Compound Menu API.
+ *
+ * `Content` and `SubContent` are the same popup surface. The gap from the
+ * anchor is set once on the `Menu` root (`gap` prop) and inherited by both.
+ */
+const Menu = /*#__PURE__*/ Object.assign(MenuRoot, {
+    Trigger: MenuTrigger,
+    Content: MenuContent,
+    Item: MenuItem,
+    Group: MenuGroup,
+    Separator: MenuSeparator,
+    RadioGroup: MenuRadioGroup,
+    RadioItem: MenuRadioItem,
+    CheckboxItem: MenuCheckboxItem,
+    Sub: MenuSub,
+    SubTrigger: MenuSubTrigger,
+    SubContent: MenuContent,
+});
 
 export { Menu };
 //# sourceMappingURL=Menu.js.map

package/dist/esm/components/navigation/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../../../src/components/navigation/Menu/Menu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;AACI;AAaL;AAKA;;;AAGM;AACA;;AAkBF;AAEA;;;AAyBF;AACF;;;;;;;;;AASC;;;;;AAOD;AAsBF;;"}
+{"version":3,"file":"Menu.js","sources":["src/components/navigation/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\nimport React from 'react';\n\nimport { CheckIcon } from '@/components/Icons/CheckIcon';\nimport { ChevronRightIcon } from '@/components/Icons/ChevronRightIcon';\nimport { CircleIcon } from '@/components/Icons/CircleIcon';\nimport { Button } from '@/components/primitives/Button';\nimport { useLatest } from '@/hooks/useLatest';\nimport { cx } from '@/utils/cx';\n\nimport {\n  menuContentStyle,\n  menuItemStyle,\n  itemStartSlotStyle,\n  itemLabelStyle,\n  itemEndSlotStyle,\n  shortcutStyle,\n  groupLabelStyle,\n  separatorStyle,\n} from './Menu.css';\nimport { MenuGapContext, DEFAULT_MENU_GAP } from './MenuGapContext';\n\nimport type {\n  MenuRootProps,\n  MenuTriggerProps,\n  MenuContentProps,\n  MenuItemProps,\n  MenuGroupProps,\n  MenuSeparatorProps,\n  MenuRadioGroupProps,\n  MenuRadioItemProps,\n  MenuCheckboxItemProps,\n  MenuSubProps,\n  MenuSubTriggerProps,\n} from './Menu.types';\nimport type { MenuRootActions } from '@base-ui/react/menu';\n\n/**\n * Internal three-slot row used by every interactive menu entry.\n */\nconst ItemLayout = ({\n  start,\n  children,\n  shortcut,\n  endContent,\n}: {\n  start?: React.ReactNode;\n  children?: React.ReactNode;\n  shortcut?: React.ReactNode;\n  endContent?: React.ReactNode;\n}): React.ReactElement => (\n  <>\n    {start != null && <span className={itemStartSlotStyle}>{start}</span>}\n    <span className={itemLabelStyle}>{children}</span>\n    {(shortcut != null || endContent != null) && (\n      <span className={itemEndSlotStyle}>\n        {shortcut != null && <span className={shortcutStyle}>{shortcut}</span>}\n        {endContent}\n      </span>\n    )}\n  </>\n);\n\n/**\n * Merge `onClick` and its `onSelect` alias into one stable handler so a new\n * function identity isn't handed to Base UI on every render. Returns\n * `undefined` when neither is set, so no listener is attached.\n */\nconst useActivate = (\n  onClick?: React.MouseEventHandler<HTMLElement>,\n  onSelect?: React.MouseEventHandler<HTMLElement>\n): React.MouseEventHandler<HTMLElement> | undefined => {\n  const handlersRef = useLatest({ onClick, onSelect });\n  const handleActivate = React.useCallback<\n    React.MouseEventHandler<HTMLElement>\n  >(\n    event => {\n      handlersRef.current.onClick?.(event);\n      handlersRef.current.onSelect?.(event);\n    },\n    [handlersRef]\n  );\n  return onClick || onSelect ? handleActivate : undefined;\n};\n\n/**\n * Composable menu for editor interfaces, built on `@base-ui/react` Menu\n * primitives. Compose the trigger, content and items as children — no config\n * object.\n *\n * @example\n * ```tsx\n * <Menu>\n *   <Menu.Trigger>File</Menu.Trigger>\n *   <Menu.Content>\n *     <Menu.Item icon={<SaveIcon />} shortcut=\"⌘S\" onClick={save}>\n *       Save\n *     </Menu.Item>\n *     <Menu.Separator />\n *     <Menu.Sub>\n *       <Menu.SubTrigger>Export</Menu.SubTrigger>\n *       <Menu.SubContent>\n *         <Menu.Item>PNG</Menu.Item>\n *         <Menu.Item>SVG</Menu.Item>\n *       </Menu.SubContent>\n *     </Menu.Sub>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nconst MenuRoot = ({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal,\n  disabled,\n  gap = DEFAULT_MENU_GAP,\n  ref,\n}: MenuRootProps): React.ReactElement => {\n  const actionsRef = React.useRef<MenuRootActions | null>(null);\n  React.useImperativeHandle(\n    ref,\n    () => ({ close: () => actionsRef.current?.close() }),\n    []\n  );\n  return (\n    <MenuGapContext.Provider value={gap}>\n      <BaseMenu.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        modal={modal}\n        disabled={disabled}\n        actionsRef={actionsRef}\n      >\n        {children}\n      </BaseMenu.Root>\n    </MenuGapContext.Provider>\n  );\n};\nMenuRoot.displayName = 'Menu';\n\nconst MenuTrigger = ({\n  children,\n  render,\n  disabled,\n  openOnHover,\n  className,\n  testId,\n  ...rest\n}: MenuTriggerProps): React.ReactElement => (\n  <BaseMenu.Trigger\n    render={render ?? <Button />}\n    disabled={disabled}\n    openOnHover={openOnHover}\n    className={className}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </BaseMenu.Trigger>\n);\nMenuTrigger.displayName = 'Menu.Trigger';\n\nconst MenuContent = ({\n  children,\n  className,\n  side,\n  align = 'start',\n  sideOffset,\n  alignOffset,\n  testId,\n  ref,\n  ...rest\n}: MenuContentProps): React.ReactElement => {\n  const gap = React.useContext(MenuGapContext);\n  return (\n    <BaseMenu.Portal>\n      <BaseMenu.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset ?? gap}\n        alignOffset={alignOffset}\n      >\n        <BaseMenu.Popup\n          ref={ref}\n          className={cx(menuContentStyle, className)}\n          data-testid={testId}\n          {...rest}\n        >\n          {children}\n        </BaseMenu.Popup>\n      </BaseMenu.Positioner>\n    </BaseMenu.Portal>\n  );\n};\nMenuContent.displayName = 'Menu.Content';\n\nconst MenuItem = React.memo(\n  ({\n    children,\n    icon,\n    shortcut,\n    endContent,\n    disabled,\n    closeOnClick = true,\n    onClick,\n    onSelect,\n    className,\n    testId,\n    ref,\n    ...rest\n  }: MenuItemProps): React.ReactElement => {\n    const handleActivate = useActivate(onClick, onSelect);\n    return (\n      <BaseMenu.Item\n        ref={ref}\n        disabled={disabled}\n        closeOnClick={closeOnClick}\n        onClick={handleActivate}\n        className={cx(menuItemStyle, className)}\n        data-testid={testId}\n        {...rest}\n      >\n        <ItemLayout start={icon} shortcut={shortcut} endContent={endContent}>\n          {children}\n        </ItemLayout>\n      </BaseMenu.Item>\n    );\n  }\n);\nMenuItem.displayName = 'Menu.Item';\n\nconst MenuGroup = ({\n  children,\n  label,\n  className,\n  testId,\n  ...rest\n}: MenuGroupProps): React.ReactElement => (\n  <BaseMenu.Group className={className} data-testid={testId} {...rest}>\n    {label != null && (\n      <BaseMenu.GroupLabel className={groupLabelStyle}>\n        {label}\n      </BaseMenu.GroupLabel>\n    )}\n    {children}\n  </BaseMenu.Group>\n);\nMenuGroup.displayName = 'Menu.Group';\n\nconst MenuSeparator = React.memo(\n  ({ className, testId, ...rest }: MenuSeparatorProps): React.ReactElement => (\n    <BaseMenu.Separator\n      className={cx(separatorStyle, className)}\n      data-testid={testId}\n      {...rest}\n    />\n  )\n);\nMenuSeparator.displayName = 'Menu.Separator';\n\nconst MenuRadioGroup = ({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  testId,\n  ...rest\n}: MenuRadioGroupProps): React.ReactElement => (\n  <BaseMenu.RadioGroup\n    value={value}\n    defaultValue={defaultValue}\n    onValueChange={onValueChange}\n    className={className}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </BaseMenu.RadioGroup>\n);\nMenuRadioGroup.displayName = 'Menu.RadioGroup';\n\nconst MenuRadioItem = React.memo(\n  ({\n    children,\n    value,\n    indicator = <CircleIcon size=\"sm\" />,\n    shortcut,\n    endContent,\n    disabled,\n    closeOnClick = false,\n    onClick,\n    onSelect,\n    className,\n    testId,\n    ref,\n    ...rest\n  }: MenuRadioItemProps): React.ReactElement => {\n    const handleActivate = useActivate(onClick, onSelect);\n    return (\n      <BaseMenu.RadioItem\n        ref={ref}\n        value={value}\n        disabled={disabled}\n        closeOnClick={closeOnClick}\n        onClick={handleActivate}\n        className={cx(menuItemStyle, className)}\n        data-testid={testId}\n        {...rest}\n      >\n        <ItemLayout\n          start={\n            <BaseMenu.RadioItemIndicator>\n              {indicator}\n            </BaseMenu.RadioItemIndicator>\n          }\n          shortcut={shortcut}\n          endContent={endContent}\n        >\n          {children}\n        </ItemLayout>\n      </BaseMenu.RadioItem>\n    );\n  }\n);\nMenuRadioItem.displayName = 'Menu.RadioItem';\n\nconst MenuCheckboxItem = React.memo(\n  ({\n    children,\n    checked,\n    defaultChecked,\n    onCheckedChange,\n    indicator = <CheckIcon size=\"sm\" />,\n    shortcut,\n    endContent,\n    disabled,\n    closeOnClick = false,\n    onClick,\n    onSelect,\n    className,\n    testId,\n    ref,\n    ...rest\n  }: MenuCheckboxItemProps): React.ReactElement => {\n    const handleActivate = useActivate(onClick, onSelect);\n    return (\n      <BaseMenu.CheckboxItem\n        ref={ref}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onCheckedChange={onCheckedChange}\n        disabled={disabled}\n        closeOnClick={closeOnClick}\n        onClick={handleActivate}\n        className={cx(menuItemStyle, className)}\n        data-testid={testId}\n        {...rest}\n      >\n        <ItemLayout\n          start={\n            <BaseMenu.CheckboxItemIndicator>\n              {indicator}\n            </BaseMenu.CheckboxItemIndicator>\n          }\n          shortcut={shortcut}\n          endContent={endContent}\n        >\n          {children}\n        </ItemLayout>\n      </BaseMenu.CheckboxItem>\n    );\n  }\n);\nMenuCheckboxItem.displayName = 'Menu.CheckboxItem';\n\nconst MenuSub = ({\n  children,\n  defaultOpen,\n}: MenuSubProps): React.ReactElement => (\n  <BaseMenu.SubmenuRoot defaultOpen={defaultOpen}>\n    {children}\n  </BaseMenu.SubmenuRoot>\n);\nMenuSub.displayName = 'Menu.Sub';\n\nconst MenuSubTrigger = React.memo(\n  ({\n    children,\n    icon,\n    disabled,\n    onClick,\n    className,\n    testId,\n    ref,\n    ...rest\n  }: MenuSubTriggerProps): React.ReactElement => (\n    <BaseMenu.SubmenuTrigger\n      ref={ref}\n      disabled={disabled}\n      onClick={onClick}\n      className={cx(menuItemStyle, className)}\n      data-testid={testId}\n      {...rest}\n    >\n      <ItemLayout start={icon} endContent={<ChevronRightIcon size=\"sm\" />}>\n        {children}\n      </ItemLayout>\n    </BaseMenu.SubmenuTrigger>\n  )\n);\nMenuSubTrigger.displayName = 'Menu.SubTrigger';\n\n/**\n * Compound Menu API.\n *\n * `Content` and `SubContent` are the same popup surface. The gap from the\n * anchor is set once on the `Menu` root (`gap` prop) and inherited by both.\n */\nexport const Menu = /*#__PURE__*/ Object.assign(MenuRoot, {\n  Trigger: MenuTrigger,\n  Content: MenuContent,\n  Item: MenuItem,\n  Group: MenuGroup,\n  Separator: MenuSeparator,\n  RadioGroup: MenuRadioGroup,\n  RadioItem: MenuRadioItem,\n  CheckboxItem: MenuCheckboxItem,\n  Sub: MenuSub,\n  SubTrigger: MenuSubTrigger,\n  SubContent: MenuContent,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuCA;;AAEG;AACH;AAuBA;;;;AAIG;AACH;;;;;AAWI;;AAIJ;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACH;;;AAgBE;AAcF;AACA;AAEA;AAoBA;AAEA;;;AA+BA;AACA;AAEA;;;AA+BE;AAEF;AAEA;AAgBA;AAEA;AASA;AAEA;AAoBA;AAEA;;AAiBI;AAwBF;AAEF;AAEA;;AAmBI;AA0BF;AAEF;AAEA;AAQA;AAEA;AAyBA;AAEA;;;;;AAKG;AACI;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/navigation/Menu/MenuGapContext.js

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+
+/**
+ * Default gap, in px, between a menu (or submenu) popup and its anchor.
+ * Mirrors the spacing scale (`vars.spacing.md`); floating-ui needs a number,
+ * so it can't read the CSS token directly.
+ */
+const DEFAULT_MENU_GAP = 8;
+/**
+ * Menu-wide popup gap. Provided once by the `Menu` / `ContextMenu` root and
+ * consumed by `Menu.Content` and `Menu.SubContent` as their default
+ * `sideOffset`, so the spacing is defined for the whole menu rather than
+ * per submenu.
+ */
+const MenuGapContext = 
+/*#__PURE__*/ createContext(DEFAULT_MENU_GAP);
+
+export { DEFAULT_MENU_GAP, MenuGapContext };
+//# sourceMappingURL=MenuGapContext.js.map

package/dist/esm/components/navigation/Menu/MenuGapContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGapContext.js","sources":["src/components/navigation/Menu/MenuGapContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\n/**\n * Default gap, in px, between a menu (or submenu) popup and its anchor.\n * Mirrors the spacing scale (`vars.spacing.md`); floating-ui needs a number,\n * so it can't read the CSS token directly.\n */\nexport const DEFAULT_MENU_GAP = 8;\n\n/**\n * Menu-wide popup gap. Provided once by the `Menu` / `ContextMenu` root and\n * consumed by `Menu.Content` and `Menu.SubContent` as their default\n * `sideOffset`, so the spacing is defined for the whole menu rather than\n * per submenu.\n */\nexport const MenuGapContext =\n  /*#__PURE__*/ createContext<number>(DEFAULT_MENU_GAP);\n"],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,MAAM,gBAAgB,GAAG;AAEhC;;;;;AAKG;MACU,cAAc;AACzB,cAAc,aAAa,CAAS,gBAAgB;;;;"}

package/dist/esm/components/navigation/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../../../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AA0BA;;AAMI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;AAKI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;;;;;;;;;;;;;AAcG;AACI;AAoBL;;AAMA;AACE;AACA;AACA;AACA;AACD;;AAGC;;;;;;;;;AASD;;AAIG;;AAEA;;;;AAGA;;;AAgBI;AACA;;;AAYA;;AAMQ;AACD;AASC;;AASV;AAIR;AAEA;;"}
+{"version":3,"file":"Pagination.js","sources":["src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { ChevronLeftIcon } from '@/components/Icons/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/components/Icons/ChevronRightIcon';\nimport { FirstIcon } from '@/components/Icons/FirstIcon';\nimport { LastIcon } from '@/components/Icons/LastIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cx } from '@/utils/cx';\n\nimport {\n  paginationButtonRecipe,\n  paginationEllipsisRecipe,\n  paginationIconStyle,\n  paginationItemStyle,\n  paginationListRecipe,\n  paginationRootStyle,\n} from './Pagination.css';\nimport { usePaginationItems } from './usePagination';\n\nimport type {\n  PaginationItem,\n  PaginationItemAriaLabelGetter,\n  PaginationItemType,\n  PaginationProps,\n  PaginationSize,\n} from './Pagination.types';\n\nconst defaultGetItemAriaLabel: PaginationItemAriaLabelGetter = (\n  type,\n  page,\n  selected\n) => {\n  switch (type) {\n    case 'first':\n      return 'Go to first page';\n    case 'last':\n      return 'Go to last page';\n    case 'previous':\n      return 'Go to previous page';\n    case 'next':\n      return 'Go to next page';\n    case 'ellipsis':\n      return 'More pages';\n    case 'page':\n    default:\n      return selected ? `page ${String(page)}` : `Go to page ${String(page)}`;\n  }\n};\n\nfunction renderItemContent(\n  type: PaginationItemType,\n  page: number | null\n): React.ReactNode {\n  switch (type) {\n    case 'first':\n      return <FirstIcon className={paginationIconStyle} />;\n    case 'last':\n      return <LastIcon className={paginationIconStyle} />;\n    case 'previous':\n      return <ChevronLeftIcon className={paginationIconStyle} />;\n    case 'next':\n      return <ChevronRightIcon className={paginationIconStyle} />;\n    case 'ellipsis':\n      return '…';\n    case 'page':\n    default:\n      return page;\n  }\n}\n\n/**\n * Page navigator with sibling/boundary ellipsis logic. Controlled when `page`\n * is set, otherwise uncontrolled with `defaultPage`. Pages are 1-based.\n *\n * @example\n * ```tsx\n * <Pagination count={20} defaultPage={1} onChange={(_, p) => setPage(p)} />\n *\n * // Compact: only prev/next + numbers\n * <Pagination count={20} siblingCount={0} boundaryCount={1} />\n *\n * // Full controls\n * <Pagination count={50} showFirstButton showLastButton />\n * ```\n */\nexport const Pagination: React.FC<PaginationProps> = ({\n  count,\n  page: pageProp,\n  defaultPage = 1,\n  onChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showFirstButton = false,\n  showLastButton = false,\n  hidePrevButton = false,\n  hideNextButton = false,\n  size = 'md',\n  disabled = false,\n  className,\n  style,\n  testId,\n  getItemAriaLabel = defaultGetItemAriaLabel,\n  ref,\n  ...rest\n}) => {\n  const safeCount = Math.max(0, Math.floor(count));\n  const clampedDefault = Math.min(\n    Math.max(1, defaultPage),\n    Math.max(1, safeCount)\n  );\n\n  const [page, setPage] = useControlledState<number>({\n    value: pageProp,\n    defaultValue: clampedDefault,\n    onChange: undefined,\n    fallback: 1,\n  });\n\n  const items = usePaginationItems({\n    count: safeCount,\n    page,\n    siblingCount: Math.max(0, siblingCount),\n    boundaryCount: Math.max(1, boundaryCount),\n    showFirstButton,\n    showLastButton,\n    hidePrevButton,\n    hideNextButton,\n    disabled,\n  });\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>, item: PaginationItem) => {\n      if (item.disabled || item.page === null || item.type === 'ellipsis')\n        return;\n      const next = item.page;\n      if (next === page) return;\n      setPage(next);\n      onChange?.(event, next);\n    },\n    [onChange, page, setPage]\n  );\n\n  return (\n    <nav\n      ref={ref}\n      aria-label=\"pagination\"\n      className={cx(paginationRootStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <ul className={paginationListRecipe({ size })}>\n        {items.map((item, index) => {\n          const key = `${item.type}-${item.page ?? 'na'}-${String(index)}`;\n          if (item.type === 'ellipsis') {\n            return (\n              <li key={key} className={paginationItemStyle}>\n                <span\n                  className={paginationEllipsisRecipe({ size })}\n                  aria-hidden=\"true\"\n                >\n                  &#8230;\n                </span>\n              </li>\n            );\n          }\n          return (\n            <li key={key} className={paginationItemStyle}>\n              <button\n                type=\"button\"\n                className={paginationButtonRecipe({\n                  size,\n                  selected: item.selected || undefined,\n                })}\n                disabled={item.disabled}\n                aria-current={item.selected ? 'page' : undefined}\n                aria-label={getItemAriaLabel(\n                  item.type,\n                  item.page,\n                  item.selected\n                )}\n                onClick={event => {\n                  handleClick(event, item);\n                }}\n                data-page={item.page ?? undefined}\n                data-type={item.type}\n              >\n                {renderItemContent(item.type, item.page)}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n\nPagination.displayName = 'Pagination';\n\nexport type { PaginationSize };\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BA;;AAMI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;AAKI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;;;;;;;;;;;;;AAcG;AACI;AAoBL;;AAMA;AACE;AACA;AACA;AACA;AACD;;AAGC;;;;;;;;;AASD;;AAIG;;AAEA;;;;AAGA;;;AAgBI;AACA;;;AAYA;;AAMQ;AACD;AASC;;AASV;AAIR;AAEA;;"}

package/dist/esm/components/navigation/Pagination/usePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","sources":["../../../../../../src/components/navigation/Pagination/usePagination.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAiBA;AACE;AACA;AACF;AAEA;;;AAGG;AACG;;;AAgBF;AACA;;;;AAIM;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;AAEH;;AAGF;;AAMA;AAQA;AACA;AAKA;;;AAGG;AACH;AACE;;AAEA;;AAEE;AACE;;AAEJ;AACA;;AAEE;AACE;;AAEJ;;;;;AAOE;AACA;AACA;AACA;AACD;;;;AAIC;;AAEA;AACA;AACD;;AAGH;;;AAGM;AACA;AACA;AACA;AACD;;;;AAGC;AACA;;;AAGD;;;;;AAMD;;AAEA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;AAGH;AACF;;;;;;;;;;AAUC;AACH;;"}
+{"version":3,"file":"usePagination.js","sources":["src/components/navigation/Pagination/usePagination.ts"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport type { PaginationItem } from './Pagination.types';\n\nexport interface UsePaginationOptions {\n  count: number;\n  page: number;\n  siblingCount: number;\n  boundaryCount: number;\n  showFirstButton: boolean;\n  showLastButton: boolean;\n  hidePrevButton: boolean;\n  hideNextButton: boolean;\n  disabled: boolean;\n}\n\nfunction range(start: number, end: number): number[] {\n  const length = Math.max(0, end - start + 1);\n  return Array.from({ length }, (_, i) => start + i);\n}\n\n/**\n * MUI-style pagination algorithm. Produces the list of items to render given\n * the total count, the current page, and the sibling/boundary counts.\n */\nexport function usePaginationItems(\n  options: UsePaginationOptions\n): PaginationItem[] {\n  const {\n    count,\n    page,\n    siblingCount,\n    boundaryCount,\n    showFirstButton,\n    showLastButton,\n    hidePrevButton,\n    hideNextButton,\n    disabled,\n  } = options;\n\n  return useMemo(() => {\n    const safeCount = Math.max(0, Math.floor(count));\n    if (safeCount === 0) {\n      const items: PaginationItem[] = [];\n      if (showFirstButton) {\n        items.push({\n          type: 'first',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      }\n      if (!hidePrevButton) {\n        items.push({\n          type: 'previous',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      }\n      if (!hideNextButton) {\n        items.push({\n          type: 'next',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      }\n      if (showLastButton) {\n        items.push({\n          type: 'last',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      }\n      return items;\n    }\n\n    const startBoundary = range(1, Math.min(boundaryCount, safeCount));\n    const endBoundary = range(\n      Math.max(safeCount - boundaryCount + 1, boundaryCount + 1),\n      safeCount\n    );\n\n    const siblingStart = Math.max(\n      Math.min(\n        page - siblingCount,\n        safeCount - boundaryCount - siblingCount * 2 - 1\n      ),\n      boundaryCount + 2\n    );\n\n    const firstEndBoundary = endBoundary[0];\n    const siblingEnd = Math.min(\n      Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n      firstEndBoundary !== undefined ? firstEndBoundary - 2 : safeCount - 1\n    );\n\n    /**\n     * Builds a sequence:\n     * [1, ..., boundaryCount] [start ellipsis] [siblings] [end ellipsis] [count - boundaryCount + 1, ..., count]\n     */\n    const itemList: (number | 'start-ellipsis' | 'end-ellipsis')[] = [\n      ...startBoundary,\n      // Start ellipsis or single page bridging the gap\n      ...(siblingStart > boundaryCount + 2\n        ? (['start-ellipsis'] as const)\n        : boundaryCount + 1 < safeCount - boundaryCount\n          ? [boundaryCount + 1]\n          : []),\n      ...range(siblingStart, siblingEnd),\n      ...(siblingEnd < safeCount - boundaryCount - 1\n        ? (['end-ellipsis'] as const)\n        : safeCount - boundaryCount > boundaryCount\n          ? [safeCount - boundaryCount]\n          : []),\n      ...endBoundary,\n    ];\n\n    const items: PaginationItem[] = [];\n\n    if (showFirstButton) {\n      items.push({\n        type: 'first',\n        page: 1,\n        selected: false,\n        disabled: disabled || page <= 1,\n      });\n    }\n    if (!hidePrevButton) {\n      items.push({\n        type: 'previous',\n        page: Math.max(1, page - 1),\n        selected: false,\n        disabled: disabled || page <= 1,\n      });\n    }\n\n    for (const it of itemList) {\n      if (it === 'start-ellipsis' || it === 'end-ellipsis') {\n        items.push({\n          type: 'ellipsis',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      } else {\n        items.push({\n          type: 'page',\n          page: it,\n          selected: it === page,\n          disabled,\n        });\n      }\n    }\n\n    if (!hideNextButton) {\n      items.push({\n        type: 'next',\n        page: Math.min(safeCount, page + 1),\n        selected: false,\n        disabled: disabled || page >= safeCount,\n      });\n    }\n    if (showLastButton) {\n      items.push({\n        type: 'last',\n        page: safeCount,\n        selected: false,\n        disabled: disabled || page >= safeCount,\n      });\n    }\n\n    return items;\n  }, [\n    count,\n    page,\n    siblingCount,\n    boundaryCount,\n    showFirstButton,\n    showLastButton,\n    hidePrevButton,\n    hideNextButton,\n    disabled,\n  ]);\n}\n"],"names":[],"mappings":";;;AAkBA;AACE;AACA;AACF;AAEA;;;AAGG;AACG;;;AAgBF;AACA;;;;AAIM;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;AAEH;;AAGF;;AAMA;AAQA;AACA;AAKA;;;AAGG;AACH;AACE;;AAEA;;AAEE;AACE;;AAEJ;AACA;;AAEE;AACE;;AAEJ;;;;;AAOE;AACA;AACA;AACA;AACD;;;;AAIC;;AAEA;AACA;AACD;;AAGH;;;AAGM;AACA;AACA;AACA;AACD;;;;AAGC;AACA;;;AAGD;;;;;AAMD;;AAEA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;AAGH;AACF;;;;;;;;;;AAUC;AACH;;"}

package/dist/esm/components/navigation/PathBar/PathBar.css.js

@@ -0,0 +1,6 @@
+import './../../../assets/src/components/navigation/PathBar/PathBar.css.ts.vanilla-BIEzQQOf.css';
+
+var pathBarSiblingTriggerStyle = 'PathBar_pathBarSiblingTriggerStyle__1baq2v0';
+
+export { pathBarSiblingTriggerStyle };
+//# sourceMappingURL=PathBar.css.js.map

package/dist/esm/components/navigation/PathBar/PathBar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathBar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/components/navigation/PathBar/PathBar.js

@@ -0,0 +1,184 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
+import '../../Icons/InfoIcon.js';
+import '../../Icons/LastIcon.js';
+import '../../Icons/LinkIcon.js';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
+import '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import '../../Icons/FileTextIcon.js';
+import '../../Icons/PauseIcon.js';
+import '../../Icons/StopIcon.js';
+import '../../Icons/SendIcon.js';
+import '../../Icons/TerminalIcon.js';
+import '../../Icons/GitBranchIcon.js';
+import '../../Icons/BugIcon.js';
+import '../../Icons/MinusIcon.js';
+import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
+import { Breadcrumbs } from '../Breadcrumbs/Breadcrumbs.js';
+import { BreadcrumbItem } from '../Breadcrumbs/BreadcrumbItem.js';
+import '../Breadcrumbs/BreadcrumbSeparator.js';
+import '../Breadcrumbs/BreadcrumbEllipsis.js';
+import '../../../utils/devWarn.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { PathBarSiblingMenu } from './PathBarSiblingMenu.js';
+import { normalizePath } from './pathUtils.js';
+
+// Frozen so the shared fallback can never be mutated in place; every write path
+// builds a fresh array via slice/spread.
+const EMPTY_SEGMENTS = Object.freeze([]);
+/**
+ * File-path breadcrumbs, like the VS Code editor breadcrumb bar.
+ *
+ * PathBar specializes {@link Breadcrumbs}: give it a path — a delimited string
+ * or a structured segment array — and it renders each segment as a crumb.
+ * Folder crumbs navigate on click (`onNavigate`); the final segment is the
+ * current location. Provide `getSiblings` to add a VS-Code-style dropdown that
+ * swaps a segment for one of its siblings. Long paths reuse the Breadcrumbs
+ * collapse / ellipsis machinery via `maxItems`.
+ *
+ * The current path is controllable: pass `value` to drive it, or `defaultValue`
+ * to let PathBar track it (clicking an ancestor truncates the trail).
+ *
+ * @example
+ * ```tsx
+ * <PathBar
+ *   defaultValue="src/components/Button/Button.tsx"
+ *   rootIcon={<HomeIcon size="sm" decorative />}
+ *   onNavigate={path => router.push(path)}
+ * />
+ * ```
+ */
+const PathBar = ({ value, defaultValue, delimiter = '/', onNavigate, getSiblings, rootIcon, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, expandable, size = 'sm', className, style, testId, ref, ...rest }) => {
+    // Wrap the consumer callback so navigation handlers don't depend on its
+    // (typically inline, render-fresh) identity.
+    const onNavigateRef = useLatest(onNavigate);
+    const controlledSegments = useMemo(() => (value !== undefined ? normalizePath(value, delimiter) : undefined), [value, delimiter]);
+    const defaultSegments = useMemo(() => defaultValue !== undefined
+        ? normalizePath(defaultValue, delimiter)
+        : undefined, [defaultValue, delimiter]);
+    const [segments, setSegments] = useControlledState({
+        value: controlledSegments,
+        defaultValue: defaultSegments,
+        fallback: EMPTY_SEGMENTS,
+    });
+    // Handlers are invoked only from the crumb-mapping below (recreated every
+    // render anyway), so they close over the current-render `segments` directly —
+    // no ref indirection needed, and the value is always live at click time.
+    const navigateToIndex = (index) => {
+        const target = segments[index];
+        if (!target) {
+            return;
+        }
+        // Navigating to an ancestor drops everything below it (uncontrolled mode;
+        // a controlled `value` is left untouched and driven by the consumer).
+        setSegments(segments.slice(0, index + 1));
+        onNavigateRef.current?.(target.value, target, index);
+    };
+    const selectSibling = (index, sibling) => {
+        // A lateral move: keep the ancestors, swap this segment, drop anything
+        // deeper since the old subtree no longer applies.
+        setSegments([...segments.slice(0, index), sibling]);
+        onNavigateRef.current?.(sibling.value, sibling, index);
+    };
+    const items = segments.map((segment, index) => {
+        const isLast = index === segments.length - 1;
+        const icon = segment.icon ?? (index === 0 ? rootIcon : undefined);
+        return (jsx(BreadcrumbItem, { icon: icon, isCurrent: isLast, onClick: isLast
+                ? undefined
+                : () => {
+                    navigateToIndex(index);
+                }, endContent: getSiblings ? (jsx(PathBarSiblingMenu, { segment: segment, index: index, getSiblings: getSiblings, onSelect: selectSibling, size: size })) : undefined, children: segment.label }, `${index}-${segment.value}`));
+    });
+    return (jsx(Breadcrumbs, { ref: ref, separator: separator ?? jsx(ChevronRightIcon, { size: size, decorative: true }), maxItems: maxItems, itemsBeforeCollapse: itemsBeforeCollapse, itemsAfterCollapse: itemsAfterCollapse, expandable: expandable, size: size, className: className, style: style, testId: testId, ...rest, children: items }));
+};
+PathBar.displayName = 'PathBar';
+
+export { PathBar };
+//# sourceMappingURL=PathBar.js.map

package/dist/esm/components/navigation/PathBar/PathBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathBar.js","sources":["src/components/navigation/PathBar/PathBar.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from 'react';\n\nimport { ChevronRightIcon } from '@/components/Icons';\nimport {\n  Breadcrumbs,\n  BreadcrumbItem,\n} from '@/components/navigation/Breadcrumbs';\nimport { useControlledState, useLatest } from '@/hooks';\n\nimport { PathBarSiblingMenu } from './PathBarSiblingMenu';\nimport { normalizePath } from './pathUtils';\n\nimport type { PathBarProps } from './PathBar.types';\nimport type { ResolvedPathSegment } from './pathUtils';\n\n// Frozen so the shared fallback can never be mutated in place; every write path\n// builds a fresh array via slice/spread.\nconst EMPTY_SEGMENTS: readonly ResolvedPathSegment[] = Object.freeze([]);\n\n/**\n * File-path breadcrumbs, like the VS Code editor breadcrumb bar.\n *\n * PathBar specializes {@link Breadcrumbs}: give it a path — a delimited string\n * or a structured segment array — and it renders each segment as a crumb.\n * Folder crumbs navigate on click (`onNavigate`); the final segment is the\n * current location. Provide `getSiblings` to add a VS-Code-style dropdown that\n * swaps a segment for one of its siblings. Long paths reuse the Breadcrumbs\n * collapse / ellipsis machinery via `maxItems`.\n *\n * The current path is controllable: pass `value` to drive it, or `defaultValue`\n * to let PathBar track it (clicking an ancestor truncates the trail).\n *\n * @example\n * ```tsx\n * <PathBar\n *   defaultValue=\"src/components/Button/Button.tsx\"\n *   rootIcon={<HomeIcon size=\"sm\" decorative />}\n *   onNavigate={path => router.push(path)}\n * />\n * ```\n */\nexport const PathBar = ({\n  value,\n  defaultValue,\n  delimiter = '/',\n  onNavigate,\n  getSiblings,\n  rootIcon,\n  separator,\n  maxItems,\n  itemsBeforeCollapse,\n  itemsAfterCollapse,\n  expandable,\n  size = 'sm',\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}: PathBarProps): React.ReactElement => {\n  // Wrap the consumer callback so navigation handlers don't depend on its\n  // (typically inline, render-fresh) identity.\n  const onNavigateRef = useLatest(onNavigate);\n\n  const controlledSegments = useMemo(\n    () => (value !== undefined ? normalizePath(value, delimiter) : undefined),\n    [value, delimiter]\n  );\n  const defaultSegments = useMemo(\n    () =>\n      defaultValue !== undefined\n        ? normalizePath(defaultValue, delimiter)\n        : undefined,\n    [defaultValue, delimiter]\n  );\n\n  const [segments, setSegments] = useControlledState<\n    readonly ResolvedPathSegment[]\n  >({\n    value: controlledSegments,\n    defaultValue: defaultSegments,\n    fallback: EMPTY_SEGMENTS,\n  });\n\n  // Handlers are invoked only from the crumb-mapping below (recreated every\n  // render anyway), so they close over the current-render `segments` directly —\n  // no ref indirection needed, and the value is always live at click time.\n  const navigateToIndex = (index: number): void => {\n    const target = segments[index];\n    if (!target) {\n      return;\n    }\n    // Navigating to an ancestor drops everything below it (uncontrolled mode;\n    // a controlled `value` is left untouched and driven by the consumer).\n    setSegments(segments.slice(0, index + 1));\n    onNavigateRef.current?.(target.value, target, index);\n  };\n\n  const selectSibling = (index: number, sibling: ResolvedPathSegment): void => {\n    // A lateral move: keep the ancestors, swap this segment, drop anything\n    // deeper since the old subtree no longer applies.\n    setSegments([...segments.slice(0, index), sibling]);\n    onNavigateRef.current?.(sibling.value, sibling, index);\n  };\n\n  const items = segments.map((segment, index) => {\n    const isLast = index === segments.length - 1;\n    const icon = segment.icon ?? (index === 0 ? rootIcon : undefined);\n\n    return (\n      <BreadcrumbItem\n        key={`${index}-${segment.value}`}\n        icon={icon}\n        isCurrent={isLast}\n        onClick={\n          isLast\n            ? undefined\n            : () => {\n                navigateToIndex(index);\n              }\n        }\n        endContent={\n          getSiblings ? (\n            <PathBarSiblingMenu\n              segment={segment}\n              index={index}\n              getSiblings={getSiblings}\n              onSelect={selectSibling}\n              size={size}\n            />\n          ) : undefined\n        }\n      >\n        {segment.label}\n      </BreadcrumbItem>\n    );\n  });\n\n  return (\n    <Breadcrumbs\n      ref={ref}\n      separator={separator ?? <ChevronRightIcon size={size} decorative />}\n      maxItems={maxItems}\n      itemsBeforeCollapse={itemsBeforeCollapse}\n      itemsAfterCollapse={itemsAfterCollapse}\n      expandable={expandable}\n      size={size}\n      className={className}\n      style={style}\n      testId={testId}\n      {...rest}\n    >\n      {items}\n    </Breadcrumbs>\n  );\n};\n\nPathBar.displayName = 'PathBar';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;;AAsBD;AAEA;;AAOM;;AAKN;AAGE;AACA;AACA;AACD;;;;AAKD;AACE;;;;;;AAMA;AACA;AACF;AAEA;;;AAGE;AACA;AACF;;;AAIE;AAEA;AAOQ;;;;AAoBV;;AAmBF;AAEA;;"}