entangle-ui 0.9.0 → 0.10.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":[null],"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":[null],"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":[null],"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":[null],"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,178 @@
+"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 { 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 '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+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":[null],"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;;"}

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

@@ -0,0 +1,145 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { ChevronDownIcon } from '../../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 '../../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 { Menu } from '../Menu/Menu.js';
+import '../../primitives/Avatar/Avatar.js';
+import '../../primitives/Avatar/AvatarGroup.js';
+import '../../primitives/Badge/Badge.js';
+import '../../primitives/Button/Button.js';
+import '../../primitives/Checkbox/Checkbox.js';
+import '../../primitives/Checkbox/CheckboxGroup.js';
+import '../../primitives/Code/Code.js';
+import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/HoverCard/HoverCard.js';
+import '../../primitives/Icon/Icon.js';
+import { IconButton } from '../../primitives/IconButton/IconButton.js';
+import '../../primitives/Input/Input.js';
+import '../../primitives/Kbd/Kbd.js';
+import '../../primitives/Link/Link.js';
+import '../../primitives/Paper/Paper.js';
+import '../../primitives/Popover/Popover.js';
+import '../../primitives/Popover/PopoverClose.js';
+import '../../primitives/Popover/PopoverContent.js';
+import '../../primitives/Popover/PopoverTrigger.js';
+import '../../primitives/Radio/Radio.js';
+import '../../primitives/Radio/RadioGroup.js';
+import '../../primitives/Switch/Switch.js';
+import '../../primitives/Text/Text.js';
+import '../../primitives/TextArea/TextArea.js';
+import '../../primitives/Tooltip/Tooltip.js';
+import '../../primitives/VisuallyHidden/VisuallyHidden.js';
+import 'react';
+import '../../primitives/canvas/CanvasContainer.js';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
+import { pathBarSiblingTriggerStyle } from './PathBar.css.js';
+import { resolveSiblings } from './pathUtils.js';
+
+/**
+ * Trailing caret + dropdown for a single crumb's siblings (the VS Code path-bar
+ * affordance). Rendered as a crumb's `endContent`, so it mounts only for crumbs
+ * Breadcrumbs actually renders — `getSiblings` runs lazily, never for segments
+ * hidden behind the overflow ellipsis. Renders nothing when the segment has no
+ * siblings.
+ */
+const PathBarSiblingMenu = ({ segment, index, getSiblings, onSelect, size, }) => {
+    const siblings = resolveSiblings(segment, getSiblings(segment, index));
+    if (siblings.length === 0) {
+        return null;
+    }
+    return (jsxs(Menu, { children: [jsx(Menu.Trigger, { render: jsx(IconButton, { "aria-label": `Browse ${segment.label} siblings`, size: size, radius: "sm", className: pathBarSiblingTriggerStyle, children: jsx(ChevronDownIcon, { size: size, decorative: true }) }) }), jsx(Menu.Content, { children: siblings.map((sibling, siblingIndex) => (jsx(Menu.Item, { icon: sibling.icon, onSelect: () => {
+                        onSelect(index, sibling);
+                    }, children: sibling.label }, `${sibling.value}-${siblingIndex}`))) })] }));
+};
+PathBarSiblingMenu.displayName = 'PathBarSiblingMenu';
+
+export { PathBarSiblingMenu };
+//# sourceMappingURL=PathBarSiblingMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PathBarSiblingMenu.js","sources":["../../../../../../src/components/navigation/PathBar/PathBarSiblingMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;AAMG;AACI;AAOL;AACA;AACE;;AAGF;AAoBY;AACF;AAQZ;AAEA;;"}