entangle-ui 0.9.0 → 0.10.0

package/dist/esm/components/layout/ScrollArea/ScrollArea.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useId, useRef, useState, useCallback, useEffect } from 'react';
-import { cx } from '../../../utils/cx.js';
 import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { fadeMaskSizeVar, scrollbarPaddingVar, scrollbarWidthVar, viewportRecipe, fadeMaskVisible, fadeMaskHiddenStyle, fadeMaskTop, fadeMaskBase, fadeMaskBottom, fadeMaskLeft, fadeMaskRight, thumbDragging, thumbVertical, thumbBase, scrollbarVisible, scrollbarHidden, scrollbarVertical, thumbHorizontal, scrollbarHorizontal, rootAutoFill, rootStyle } from './ScrollArea.css.js';
 
 // --- Component ---
@@ -19,11 +19,19 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
     const [hThumbOffset, setHThumbOffset] = useState(0);
     const [hasVOverflow, setHasVOverflow] = useState(false);
     const [hasHOverflow, setHasHOverflow] = useState(false);
+    // Scroll position as a 0–100 percentage, exposed via aria-valuenow. Kept in
+    // state (updated in recalculate) so it stays reactive instead of being read
+    // from the viewport ref during render.
+    const [vScrollPercent, setVScrollPercent] = useState(0);
+    const [hScrollPercent, setHScrollPercent] = useState(0);
     // Visibility state
     const [scrollbarVisibleState, setScrollbarVisibleState] = useState(scrollbarVisibility === 'always');
     const hideTimerRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
+    // Ref drives synchronous reads in the move handler; the state mirror is used
+    // for the thumb's dragging class during render.
     const dragAxisRef = useRef(null);
+    const [dragAxis, setDragAxis] = useState(null);
     const dragStartRef = useRef({ pointerPos: 0, scrollPos: 0 });
     // Fade mask state
     const [atTop, setAtTop] = useState(true);
@@ -41,12 +49,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             const ratio = vp.clientHeight / vp.scrollHeight;
             const overflow = ratio < 1;
             setHasVOverflow(overflow);
+            const maxScroll = vp.scrollHeight - vp.clientHeight;
+            const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;
+            setVScrollPercent(Math.round(scrollRatio * 100));
             if (overflow) {
                 const trackHeight = vp.clientHeight - scrollbarPadding * 2;
                 const thumbH = Math.max(minThumbLength, ratio * trackHeight);
                 setVThumbSize(thumbH);
-                const maxScroll = vp.scrollHeight - vp.clientHeight;
-                const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;
                 setVThumbOffset(scrollRatio * (trackHeight - thumbH));
             }
         }
@@ -54,12 +63,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             const ratio = vp.clientWidth / vp.scrollWidth;
             const overflow = ratio < 1;
             setHasHOverflow(overflow);
+            const maxScroll = vp.scrollWidth - vp.clientWidth;
+            const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;
+            setHScrollPercent(Math.round(scrollRatio * 100));
             if (overflow) {
                 const trackWidth = vp.clientWidth - scrollbarPadding * 2;
                 const thumbW = Math.max(minThumbLength, ratio * trackWidth);
                 setHThumbSize(thumbW);
-                const maxScroll = vp.scrollWidth - vp.clientWidth;
-                const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;
                 setHThumbOffset(scrollRatio * (trackWidth - thumbW));
             }
         }
@@ -131,6 +141,7 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             return;
         setIsDragging(true);
         dragAxisRef.current = axis;
+        setDragAxis(axis);
         e.target.setPointerCapture(e.pointerId);
         if (axis === 'vertical') {
             dragStartRef.current = {
@@ -170,6 +181,7 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
     const handleThumbPointerUp = useCallback(() => {
         setIsDragging(false);
         dragAxisRef.current = null;
+        setDragAxis(null);
     }, []);
     // Track click handler
     const handleTrackClick = useCallback((axis, e) => {
@@ -186,6 +198,53 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             vp.scrollLeft = clickRatio * (vp.scrollWidth - vp.clientWidth);
         }
     }, []);
+    // Keyboard scrolling for the focusable scrollbar role, mirroring the native
+    // scrollbar interaction model (arrows step, PageUp/Down page, Home/End jump).
+    const handleTrackKeyDown = useCallback((axis, e) => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const step = 40;
+        const isVertical = axis === 'vertical';
+        const page = isVertical ? vp.clientHeight : vp.clientWidth;
+        const maxScroll = isVertical
+            ? vp.scrollHeight - vp.clientHeight
+            : vp.scrollWidth - vp.clientWidth;
+        const current = isVertical ? vp.scrollTop : vp.scrollLeft;
+        let next;
+        const decKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+        const incKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+        switch (e.key) {
+            case decKey:
+                next = current - step;
+                break;
+            case incKey:
+                next = current + step;
+                break;
+            case 'PageUp':
+                next = current - page;
+                break;
+            case 'PageDown':
+                next = current + page;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = maxScroll;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const clamped = Math.max(0, Math.min(next, maxScroll));
+        if (isVertical) {
+            vp.scrollTop = clamped;
+        }
+        else {
+            vp.scrollLeft = clamped;
+        }
+    }, []);
     // Initial measurement once the viewport is mounted.
     useEffect(() => {
         if (viewportRef.current)
@@ -202,9 +261,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
         const child = vp.firstElementChild;
         if (!child || typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(() => recalculate());
+        const ro = new ResizeObserver(() => {
+            recalculate();
+        });
         ro.observe(child);
-        return () => ro.disconnect();
+        return () => {
+            ro.disconnect();
+        };
     }, [recalculate]);
     // Cleanup timer
     useEffect(() => {
@@ -234,25 +297,30 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             : undefined),
         ...style,
     };
-    return (jsxs("div", { className: cx(rootStyle, autoFill && rootAutoFill, className), style: rootInlineStyle, "data-testid": testId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [jsx("div", { ref: setViewportRef, id: viewportId, role: "region", tabIndex: 0, className: viewportRecipe({ direction }), onScroll: handleScroll, children: children }), fadeMask && showV && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskTop, !atTop ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-top` : undefined }), jsx("div", { className: cx(fadeMaskBase, fadeMaskBottom, !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-bottom` : undefined })] })), fadeMask && showH && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskLeft, !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle) }), jsx("div", { className: cx(fadeMaskBase, fadeMaskRight, !atRight ? fadeMaskVisible : fadeMaskHiddenStyle) })] })), showV && hasVOverflow && (jsx("div", { className: cx(scrollbarVertical, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", "aria-controls": viewportId, "aria-orientation": "vertical", "aria-valuenow": Math.round(viewportRef.current
-                    ? (viewportRef.current.scrollTop /
-                        Math.max(1, viewportRef.current.scrollHeight -
-                            viewportRef.current.clientHeight)) *
-                        100
-                    : 0), "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-v` : undefined, onClick: e => handleTrackClick('vertical', e), children: jsx("div", { className: cx(thumbBase, thumbVertical, isDragging && dragAxisRef.current === 'vertical' && thumbDragging), style: {
+    return (jsxs("div", { className: cx(rootStyle, autoFill && rootAutoFill, className), style: rootInlineStyle, "data-testid": testId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [jsx("div", { ref: setViewportRef, id: viewportId, role: "region", 
+                // The scroll viewport is intentionally focusable so keyboard users can
+                // scroll overflowing content with the arrow/page keys (native behavior
+                // of a focused scroll container).
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, className: viewportRecipe({ direction }), onScroll: handleScroll, children: children }), fadeMask && showV && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskTop, !atTop ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-top` : undefined }), jsx("div", { className: cx(fadeMaskBase, fadeMaskBottom, !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-bottom` : undefined })] })), fadeMask && showH && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskLeft, !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle) }), jsx("div", { className: cx(fadeMaskBase, fadeMaskRight, !atRight ? fadeMaskVisible : fadeMaskHiddenStyle) })] })), showV && hasVOverflow && (jsx("div", { className: cx(scrollbarVertical, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", tabIndex: 0, "aria-controls": viewportId, "aria-orientation": "vertical", "aria-valuenow": vScrollPercent, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-v` : undefined, onClick: e => {
+                    handleTrackClick('vertical', e);
+                }, onKeyDown: e => {
+                    handleTrackKeyDown('vertical', e);
+                }, children: jsx("div", { className: cx(thumbBase, thumbVertical, isDragging && dragAxis === 'vertical' && thumbDragging), style: {
                         height: `${vThumbSize}px`,
                         transform: `translateY(${vThumbOffset}px)`,
-                    }, onPointerDown: e => handleThumbPointerDown('vertical', e), onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-v` : undefined }) })), showH && hasHOverflow && (jsx("div", { className: cx(scrollbarHorizontal, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", "aria-controls": viewportId, "aria-orientation": "horizontal", "aria-valuenow": Math.round(viewportRef.current
-                    ? (viewportRef.current.scrollLeft /
-                        Math.max(1, viewportRef.current.scrollWidth -
-                            viewportRef.current.clientWidth)) *
-                        100
-                    : 0), "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-h` : undefined, onClick: e => handleTrackClick('horizontal', e), children: jsx("div", { className: cx(thumbBase, thumbHorizontal, isDragging &&
-                        dragAxisRef.current === 'horizontal' &&
-                        thumbDragging), style: {
+                    }, onPointerDown: e => {
+                        handleThumbPointerDown('vertical', e);
+                    }, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-v` : undefined }) })), showH && hasHOverflow && (jsx("div", { className: cx(scrollbarHorizontal, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", tabIndex: 0, "aria-controls": viewportId, "aria-orientation": "horizontal", "aria-valuenow": hScrollPercent, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-h` : undefined, onClick: e => {
+                    handleTrackClick('horizontal', e);
+                }, onKeyDown: e => {
+                    handleTrackKeyDown('horizontal', e);
+                }, children: jsx("div", { className: cx(thumbBase, thumbHorizontal, isDragging && dragAxis === 'horizontal' && thumbDragging), style: {
                         width: `${hThumbSize}px`,
                         transform: `translateX(${hThumbOffset}px)`,
-                    }, onPointerDown: e => handleThumbPointerDown('horizontal', e), onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-h` : undefined }) }))] }));
+                    }, onPointerDown: e => {
+                        handleThumbPointerDown('horizontal', e);
+                    }, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-h` : undefined }) }))] }));
 };
 ScrollArea.displayName = 'ScrollArea';
 

package/dist/esm/components/layout/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;AAWA;AAGA;;AAEA;AACA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;;AAIE;;;AAGA;;;;;;AAOF;;;;AAIE;;;AAGA;;;;;;AAOF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;AAGA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;AAME;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;;AAGA;AACA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;;AA2EU;;AAIQ;;;;;AAmBT;AAqBC;;AAIQ;;AAGR;;;;;AAkBD;AAUb;AAEA;;"}
+{"version":3,"file":"ScrollArea.js","sources":["../../../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAmCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;;;;;;AAgBA;AAGA;;;;AAIA;;AAIA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;AAGA;;;;AAIE;;;;;;;AAQF;;;AAGA;;;;AAIE;;;;;;;AAQF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;;AAIA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;;AAOE;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAUF;AACA;;;AAGA;AACA;;AAEE;;AAEF;AAEA;;;AAIA;AACE;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;;;AAGA;;;AAGA;;;;AAKF;;AAEE;;;AAEA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;AAEA;AACE;AACF;AACA;AACA;;AAEA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;AAGF;;;;;;AAgFU;AACF;AAEE;;;;AAYC;AAEC;AACF;AAwBA;AACF;AAEE;;;;AAYC;AAEC;;AAUd;AAEA;;"}

package/dist/esm/components/layout/SplitPane/SplitPane.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { cx } from '../../../utils/cx.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
 import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { dividerSizeVar, dividerRecipe, containerRecipe } from './SplitPane.css.js';
 
 // ---------------------------------------------------------------------------
@@ -201,24 +202,20 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
     // Which sizes array to use
     const isControlled = controlledSizes !== undefined;
     const sizes = isControlled ? controlledSizes : internalSizes;
-    // Stable reference to panelConfigs for use in effects/callbacks
+    // Stable reference to panelConfigs for use in effects/callbacks. The
+    // serialized key is the deliberate deep-equality dependency, so panelConfigs
+    // itself is intentionally absent from the array.
     const panelConfigsKey = JSON.stringify(panelConfigs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const stablePanelConfigs = useMemo(() => panelConfigs, [panelConfigsKey]);
-    // Keep a ref so the ResizeObserver callback always reads latest values
-    const latestRef = useRef({
+    // Keep a ref so the ResizeObserver callback always reads latest values.
+    const latestRef = useLatest({
         panelCount,
         dividerSize,
         direction,
         isControlled,
         panelConfigs: stablePanelConfigs,
     });
-    latestRef.current = {
-        panelCount,
-        dividerSize,
-        direction,
-        isControlled,
-        panelConfigs: stablePanelConfigs,
-    };
     // -----------------------------------------------------------------------
     // Initial size calculation + ResizeObserver
     // -----------------------------------------------------------------------
@@ -246,7 +243,8 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
                 return reconcileSizesToAvailableSpace(computeInitialSizes(count, cfgs, availableSpace), cfgs, availableSpace, collapsed);
             });
         }
-    }, []);
+        // latestRef is a stable useLatest ref; listed to satisfy the rule.
+    }, [latestRef]);
     const getAvailableSpace = useCallback(() => {
         const container = containerRef.current;
         if (!container || panelCount < 2)
@@ -393,7 +391,7 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
     const handlePointerUp = useCallback((_dividerIndex, e) => {
         e.target.releasePointerCapture(e.pointerId);
         setDraggingIndex(null);
-        if (isControlled && controlledSizes) {
+        if (isControlled) {
             onResizeEnd?.(controlledSizes);
         }
         else {
@@ -533,12 +531,27 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
         if (i < panelCount - 1) {
             const leftSize = sizes[i] ?? 0;
             const leftCfg = panelConfigs[i];
-            elements.push(jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(leftSize), "aria-valuemin": leftCfg?.minSize ?? 0, "aria-valuemax": leftCfg?.maxSize ?? undefined, "aria-label": "Panel divider", "data-testid": testId ? `${testId}-divider-${i}` : undefined, className: dividerRecipe({
+            elements.push(
+            // Focusable window-splitter: a separator with aria-valuenow that the
+            // user can move with the keyboard is an interactive separator per the
+            // WAI-ARIA window splitter pattern, which jsx-a11y does not model.
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            jsx("div", { role: "separator", 
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(leftSize), "aria-valuemin": leftCfg?.minSize ?? 0, "aria-valuemax": leftCfg?.maxSize ?? undefined, "aria-label": "Panel divider", "data-testid": testId ? `${testId}-divider-${i}` : undefined, className: dividerRecipe({
                     direction,
                     isDragging: draggingIndex === i || undefined,
                 }), style: assignInlineVars({
                     [dividerSizeVar]: `${dividerSize}px`,
-                }), onPointerDown: e => handlePointerDown(i, e), onPointerMove: e => handlePointerMove(i, e), onPointerUp: e => handlePointerUp(i, e), onKeyDown: e => handleKeyDown(i, e) }, `divider-${i}`));
+                }), onPointerDown: e => {
+                    handlePointerDown(i, e);
+                }, onPointerMove: e => {
+                    handlePointerMove(i, e);
+                }, onPointerUp: e => {
+                    handlePointerUp(i, e);
+                }, onKeyDown: e => {
+                    handleKeyDown(i, e);
+                } }, `divider-${i}`));
         }
     });
     return (jsx("div", { ref: setContainerRef, className: cx(containerRecipe({ direction }), className), "data-testid": testId, style: style, ...htmlProps, children: elements }));

package/dist/esm/components/layout/SplitPane/SplitPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;AAKA;;;;;;;AAQE;AACD;;;;;;AAMC;;;;;AAOF;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAIJ;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AACF;;;;;;;AAOC;AAED;;;;;;;;AAYI;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;AAQC;AACE;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACJ;;AAEL;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;AAeM;AACD;AAEC;;;AASV;AAEA;AAWF;AAEA;;"}
+{"version":3,"file":"SplitPane.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAuBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;;;;AAQA;;;;;;;AAQE;AACD;;;;AAMD;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAGJ;AAEA;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AACF;;;;;;;AAOC;AAED;;;;;;;;AAYI;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;;AASG;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACL;;AAEJ;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;;;;;;;;AAoBM;AACD;AAEC;AACD;AAEC;AACF;AAEE;AACF;AAEE;AACF;AAEE;AACF;;AAIR;AAEA;AAWF;AAEA;;"}

package/dist/esm/components/layout/SplitPane/SplitPanePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPanePanel.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPanePanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;AAaG;;AASD;AAYF;AAEA;;"}
+{"version":3,"file":"SplitPanePanel.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPanePanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAUA;;;;;;;;;;;;;AAaG;;AASD;AAYF;AAEA;;"}

package/dist/esm/components/layout/Stack/Stack.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../../../utils/cx.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { gapVar, stackRecipe } from './Stack.css.js';
 
 /** Base spacing unit in px */

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js

@@ -28,6 +28,10 @@ import '../../primitives/TextArea/TextArea.js';
 import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
 import '../../primitives/VisuallyHidden/VisuallyHidden.js';
 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 { cx } from '../../../utils/cx.js';
 import { breadcrumbEllipsisButtonStyle, breadcrumbEllipsisTextStyle, breadcrumbEllipsisStyle } from './Breadcrumbs.css.js';
 

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbEllipsis.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}
+{"version":3,"file":"BreadcrumbEllipsis.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js

@@ -28,6 +28,10 @@ import '../../primitives/TextArea/TextArea.js';
 import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
 import '../../primitives/VisuallyHidden/VisuallyHidden.js';
 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 { cx } from '../../../utils/cx.js';
 import { breadcrumbIconStyle, breadcrumbLabelStyle, breadcrumbContentRecipe, breadcrumbItemStyle } from './Breadcrumbs.css.js';
 
@@ -55,7 +59,7 @@ function getTruncatedLabel(children, maxLength) {
  * <BreadcrumbItem isCurrent>Button</BreadcrumbItem>
  * ```
  */
-const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = false, icon, maxLength, children, className, style, testId, ref, ...rest }) => {
+const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = false, icon, maxLength, endContent, children, className, style, testId, ref, ...rest }) => {
     const { label, fullLabel } = getTruncatedLabel(children, maxLength);
     const isInteractive = (href !== undefined || onClick !== undefined) && !isCurrent;
     const state = isCurrent ? 'current' : isInteractive ? 'link' : 'disabled';
@@ -82,7 +86,7 @@ const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = fa
     else {
         inner = (jsx("span", { className: breadcrumbContentRecipe({ state }), children: content }));
     }
-    return (jsx("li", { ref: ref, className: cx(breadcrumbItemStyle, className), style: style, "data-testid": testId, ...rest, children: fullLabel ? (jsx(Tooltip, { title: fullLabel, delay: 300, children: inner })) : (inner) }));
+    return (jsxs("li", { ref: ref, className: cx(breadcrumbItemStyle, className), style: style, "data-testid": testId, ...rest, children: [fullLabel ? (jsx(Tooltip, { title: fullLabel, delay: 300, children: inner })) : (inner), endContent] }));
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAcH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAsBJ;AAGF;;"}
+{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAeH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAuBJ;AAGF;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbSeparator.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbSeparator.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;AAOG;;AAED;AAEI;AAYF;AAGJ;;"}
+{"version":3,"file":"BreadcrumbSeparator.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbSeparator.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUA;;;;;;;AAOG;;AAED;AAEI;AAYF;AAGJ;;"}

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

@@ -32,6 +32,7 @@ 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';
@@ -90,8 +91,8 @@ import '../../Icons/PinIcon.js';
 import { cx } from '../../../utils/cx.js';
 import { BreadcrumbEllipsis } from './BreadcrumbEllipsis.js';
 import { BreadcrumbItem } from './BreadcrumbItem.js';
-import { BreadcrumbSeparator } from './BreadcrumbSeparator.js';
 import { breadcrumbsListRecipe, breadcrumbsRootRecipe } from './Breadcrumbs.css.js';
+import { BreadcrumbSeparator } from './BreadcrumbSeparator.js';
 
 function isComponentElement(child, component) {
     return React.isValidElement(child) && child.type === component;
@@ -154,7 +155,11 @@ const Breadcrumbs = /*#__PURE__*/ React.memo(({ separator = jsx(ArrowRightIcon,
             .join(' / ');
         const collapsedTrail = [
             ...visibleBefore,
-            jsx(BreadcrumbEllipsis, { onClick: expandable ? () => setExpanded(true) : undefined, tooltip: collapsedLabels || undefined }, "breadcrumb-ellipsis"),
+            jsx(BreadcrumbEllipsis, { onClick: expandable
+                    ? () => {
+                        setExpanded(true);
+                    }
+                    : undefined, tooltip: collapsedLabels || undefined }, "breadcrumb-ellipsis"),
             ...visibleAfter,
         ];
         return withSeparators(collapsedTrail, separator);

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;;AAMA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;AACA;;;;;AAWA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}

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

@@ -1,46 +1,52 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
-import { CheckIcon } from '../../Icons/CheckIcon.js';
-import { CircleIcon } from '../../Icons/CircleIcon.js';
-import { Text } from '../../primitives/Text/Text.js';
+import React from 'react';
+import { menuContentStyle } from '../Menu/Menu.css.js';
+import { MenuGapContext, DEFAULT_MENU_GAP } from '../Menu/MenuGapContext.js';
 import { cx } from '../../../utils/cx.js';
-import { Menu } from '../Menu/Menu.js';
-import { useMenu, createItemClickHandler } from '../Menu/useMenu.js';
-import { renderItemWithSubmenu } from '../Menu/Menu.helpers.js';
-import { separatorStyle, menuContentStyle } from '../Menu/Menu.css.js';
-import { useContextMenuTarget } from './useContextMenuTarget.js';
 
-function ContextMenu({ config, selectedItems = {}, onChange, children, payload, checkboxIcon = jsx(CheckIcon, { size: "sm" }), radioIcon = jsx(CircleIcon, { size: "sm" }), disabled = false, className, style, testId, ref, ...rest }) {
-    const { handleItemClick, isItemSelected, toggleSubmenu } = useMenu(selectedItems, onChange);
-    const { context, onContextMenuCapture } = useContextMenuTarget(payload);
-    const resolvedConfig = useMemo(() => {
-        return typeof config === 'function' ? config(context) : config;
-    }, [config, context]);
-    const menuItems = useMemo(() => {
-        return resolvedConfig.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 < resolvedConfig.groups.length - 1 &&
-                resolvedConfig.groups.length > 1;
-            return (jsxs(React.Fragment, { children: [jsxs(ContextMenu$1.Group, { children: [group.label && (jsx(ContextMenu$1.GroupLabel, { children: jsx(Text, { variant: "caption", color: "muted", weight: "semibold", children: group.label }) })), group.itemSelectionType === 'radio' ? (jsx(ContextMenu$1.RadioGroup, { value: selectedItems[group.id]?.[0] ?? '', children: items })) : (items)] }), showSeparator && (jsx(ContextMenu$1.Separator, { className: separatorStyle }))] }, group.id));
-        });
-    }, [
-        resolvedConfig,
-        isItemSelected,
-        handleItemClick,
-        toggleSubmenu,
-        checkboxIcon,
-        radioIcon,
-        selectedItems,
-        onChange,
-    ]);
-    return (jsxs(ContextMenu$1.Root, { disabled: disabled, children: [jsx(ContextMenu$1.Trigger, { onContextMenuCapture: onContextMenuCapture, style: { display: 'contents' }, children: children }), jsx(ContextMenu$1.Portal, { children: jsx(ContextMenu$1.Positioner, { children: jsx(ContextMenu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), style: style, "data-testid": testId, ...rest, children: menuItems }) }) })] }));
-}
+/**
+ * Right-click context menu, built on `@base-ui/react` ContextMenu primitives.
+ *
+ * Compose the trigger area and content as children. Reuse the shared `Menu.*`
+ * primitives for items, or pass a fully custom panel into
+ * `ContextMenu.Content`. Define separate menus per area by giving each area its
+ * own `ContextMenu`.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenu.Trigger>
+ *     <div className="viewport">Right-click me</div>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <Menu.Item icon={<CutIcon />} shortcut="⌘X">Cut</Menu.Item>
+ *     <Menu.Item icon={<CopyIcon />} shortcut="⌘C">Copy</Menu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu>
+ * ```
+ */
+const ContextMenuRoot = ({ children, open, defaultOpen, onOpenChange, 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(ContextMenu$1.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, disabled: disabled, actionsRef: actionsRef, children: children }) }));
+};
+ContextMenuRoot.displayName = 'ContextMenu';
+const ContextMenuTrigger = ({ children, render, className, style, testId, ref, ...rest }) => (jsx(ContextMenu$1.Trigger, { ref: ref, render: render, className: className, 
+    // With `render`, the user's element is the trigger, so no wrapper is
+    // needed; otherwise wrap so the trigger is transparent to layout.
+    style: render ? style : { display: 'contents', ...style }, "data-testid": testId, ...rest, children: render ? undefined : children }));
+ContextMenuTrigger.displayName = 'ContextMenu.Trigger';
+const ContextMenuContent = ({ children, className, testId, ref, ...rest }) => (jsx(ContextMenu$1.Portal, { children: jsx(ContextMenu$1.Positioner, { children: jsx(ContextMenu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: children }) }) }));
+ContextMenuContent.displayName = 'ContextMenu.Content';
+/**
+ * Compound ContextMenu API. Items reuse the shared `Menu.*` primitives.
+ */
+const ContextMenu = /*#__PURE__*/ Object.assign(ContextMenuRoot, {
+    Trigger: ContextMenuTrigger,
+    Content: ContextMenuContent,
+});
 
 export { ContextMenu };
 //# sourceMappingURL=ContextMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../../../../src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AAeM;AAeJ;;AAMA;AACE;AACF;AAEA;;;AAGM;AACA;;AAkBF;;AAIE;;AA2BJ;AACF;;;;;;;;;AASC;AAED;AAuBF;;"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../../../../src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH;;;AAeE;AAaF;AACA;AAEA;;;AAeI;AAOJ;AAEA;AAoBA;AAEA;;AAEG;AACI;AACL;AACA;AACD;;"}

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

@@ -1,16 +1,13 @@
-import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-DD0c5D10.css';
+import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-B5iVe5S2.css';
 
-var checkboxItemStyle = 'Menu_interactiveItemBase__1pkkb711';
-var chevronIconStyle = 'Menu_chevronIconStyle__1pkkb717';
-var iconContainerStyle = 'Menu_iconContainerStyle__1pkkb714';
-var iconHiddenStyle = 'Menu_iconHiddenStyle__1pkkb716';
-var iconVisibleStyle = 'Menu_iconVisibleStyle__1pkkb715';
+var groupLabelStyle = 'Menu_groupLabelStyle__1pkkb716';
+var itemEndSlotStyle = 'Menu_itemEndSlotStyle__1pkkb714';
+var itemLabelStyle = 'Menu_itemLabelStyle__1pkkb713';
+var itemStartSlotStyle = 'Menu_itemStartSlotStyle__1pkkb712';
 var menuContentStyle = 'Menu_menuContentStyle__1pkkb710';
-var menuItemContentStyle = 'Menu_menuItemContentStyle__1pkkb713';
-var menuItemDisabledStyle = 'Menu_menuItemDisabledStyle__1pkkb712';
-var menuItemStyle = 'Menu_interactiveItemBase__1pkkb711';
-var radioItemStyle = 'Menu_interactiveItemBase__1pkkb711';
-var separatorStyle = 'Menu_separatorStyle__1pkkb718';
+var menuItemStyle = 'Menu_menuItemStyle__1pkkb711';
+var separatorStyle = 'Menu_separatorStyle__1pkkb717';
+var shortcutStyle = 'Menu_shortcutStyle__1pkkb715';
 
-export { checkboxItemStyle, chevronIconStyle, iconContainerStyle, iconHiddenStyle, iconVisibleStyle, menuContentStyle, menuItemContentStyle, menuItemDisabledStyle, menuItemStyle, radioItemStyle, separatorStyle };
+export { groupLabelStyle, itemEndSlotStyle, itemLabelStyle, itemStartSlotStyle, menuContentStyle, menuItemStyle, separatorStyle, shortcutStyle };
 //# sourceMappingURL=Menu.css.js.map

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

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