@cube-dev/ui-kit 0.106.1 → 0.108.0

package/es/components/content/Alert/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Alert/use-alert.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Badge/Badge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Card/Card.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Content.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/CopyPasteBlock/CopyPasteBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/CopyPasteBlock/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/CopySnippet/CopySnippet.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/CopySnippet/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Disclosure/Disclosure.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Disclosure/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Footer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/HotKeys/HotKeys.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/HotKeys/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Item/Item.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 
@@ -65,6 +65,7 @@ const ACTIONS_EVENT_HANDLERS = {
 const ItemElement = tasty({
     as: 'div',
     styles: {
+        '@interacted': 'active | :hover | :focus | :focus-within | :has([data-pressed])',
         display: 'inline-grid',
         flow: 'column dense',
         gap: 0,
@@ -166,6 +167,9 @@ const ItemElement = tasty({
         '$label-padding-right': {
             '': '$inline-padding',
             'has-end-content': '0',
+            // Restore padding when actions are hidden AND no other visible end content
+            '!inside-wrapper & !has-suffix & !has-right-icon & auto-hide-actions & !preserve-actions-space & !@interacted': '$inline-padding',
+            'inside-wrapper & !has-suffix & !has-right-icon & !preserve-actions-space & !actions-shown': '$inline-padding',
         },
         '$label-padding-bottom': {
             '': '$block-padding',
@@ -203,6 +207,7 @@ const ItemElement = tasty({
             textOverflow: 'ellipsis',
             width: '0 100%',
             preset: 'inherit',
+            transition: 'padding',
             padding: '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',
         },
         Description: {
@@ -255,26 +260,26 @@ const ItemElement = tasty({
             placeSelf: 'stretch',
             padding: {
                 '': '0 $side-padding',
-                'has-actions-content & show-actions-on-hover & !preserve-actions-space & !:hover & !:focus & !:focus-within': '0',
+                'inside-wrapper & !actions-shown': 0,
             },
             boxSizing: 'border-box',
             height: 'min ($size - 2bw)',
             width: {
                 '': 'fixed ($actions-width, 0px)',
-                'has-actions-content & !show-actions-on-hover': 'max calc-size(max-content, size)',
-                'has-actions-content & show-actions-on-hover & !preserve-actions-space': 'max 0px',
-                'has-actions-content & show-actions-on-hover & !preserve-actions-space & (:hover | :focus | :focus-within)': 'max calc-size(max-content, size)',
-                'has-actions-content & show-actions-on-hover & preserve-actions-space': 'max calc-size(max-content, size)',
+                'has-actions-content & !auto-hide-actions': 'max calc-size(max-content, size)',
+                'has-actions-content & auto-hide-actions & !preserve-actions-space': 'max 0px',
+                'has-actions-content & auto-hide-actions & (!preserve-actions-space & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown)))': 'max calc-size(max-content, size)',
+                'has-actions-content & auto-hide-actions & preserve-actions-space': 'max calc-size(max-content, size)',
             },
             opacity: {
                 '': 1,
-                'show-actions-on-hover': 0,
-                'show-actions-on-hover & (active | :has([data-pressed]) | :hover | :focus | :focus-within)': 1,
+                'auto-hide-actions': 0,
+                'auto-hide-actions & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown))': 1,
             },
             transition: 'width $transition ease-out, opacity $transition ease-out, padding $transition ease-out',
             interpolateSize: 'allow-keywords',
             // Size for the action buttons
-            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (4x - 2bw))',
+            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',
             // Side padding for the button
             '$side-padding': '(($size - $action-size - 2bw) / 2)',
         },
@@ -337,7 +342,7 @@ const ItemElement = tasty({
     styleProps: CONTAINER_STYLES,
 });
 const Item = (props, ref) => {
-    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, actions, showActionsOnHover = false, preserveActionsSpace = false, disableActionsFocus = false, shape, defaultTooltipPlacement = 'top', level = 3, highlight, highlightCaseSensitive = false, highlightStyles, ...rest } = props;
+    let { children, size = 'medium', type = 'item', theme = 'default', mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip = true, isDisabled, style, loadingSlot = 'auto', isLoading = false, actions, autoHideActions = false, preserveActionsSpace = false, disableActionsFocus = false, shape, defaultTooltipPlacement = 'top', level = 3, highlight, highlightCaseSensitive = false, highlightStyles, insideWrapper = false, showActions = false, ...rest } = props;
     // Determine if Label will be rendered
     const hasLabel = !!(children || labelProps);
     // Set default descriptionPlacement based on type
@@ -501,8 +506,10 @@ const Item = (props, ref) => {
             'has-description': showDescription,
             'has-actions': !!actions,
             'has-actions-content': !!(actions && actions !== true),
-            'show-actions-on-hover': showActionsOnHover === true,
+            'auto-hide-actions': autoHideActions === true,
             'preserve-actions-space': preserveActionsSpace === true,
+            'inside-wrapper': insideWrapper,
+            'actions-shown': showActions && insideWrapper,
             checkbox: hasCheckbox,
             description: showDescription ? finalDescriptionPlacement : 'none',
         };
@@ -516,9 +523,11 @@ const Item = (props, ref) => {
         finalDescriptionPlacement,
         hasCheckbox,
         actions,
-        showActionsOnHover,
+        autoHideActions,
         preserveActionsSpace,
         hasLabel,
+        showActions,
+        insideWrapper,
     ]);
     const { labelProps: finalLabelProps, labelRef, renderWithTooltip, } = useAutoTooltip({
         tooltip,

package/es/components/content/Item/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/ItemBadge/ItemBadge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/ItemBadge/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/GridLayout.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/Layout.js

@@ -1,17 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Children, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty/index.js';
 import { isDevEnv } from '../../../tasty/utils/is-dev-env.js';
 import { useCombinedRefs } from '../../../utils/react/index.js';
 import { Alert } from '../Alert/index.js';
-import { LayoutProvider, useLayoutContext } from './LayoutContext.js';
+import { LayoutProvider, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext, } from './LayoutContext.js';
 const LayoutElement = tasty({
     as: 'div',
     qa: 'Layout',
@@ -36,6 +36,7 @@ const LayoutElement = tasty({
             // .base-class[data-hover] > [data-element="Inner"] { ...}
             // Direct child selector required for nested layouts
             $: '>',
+            zIndex: 0,
             container: 'layout / inline-size',
             position: 'absolute',
             inset: '$inset-top $inset-right $inset-bottom $inset-left',
@@ -55,33 +56,15 @@ const LayoutElement = tasty({
         },
     },
 });
-// Check if a child is a Layout.Panel
-function isPanelElement(child) {
-    return (isValidElement(child) &&
-        typeof child.type !== 'string' &&
-        child.type.displayName === 'Layout.Panel');
-}
 function LayoutInner(props) {
-    const layoutContext = useLayoutContext();
+    const layoutActions = useLayoutActionsContext();
+    const layoutState = useLayoutStateContext();
+    const layoutRefs = useLayoutRefsContext();
     const localRef = useRef(null);
     const [isAutoHeight, setIsAutoHeight] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(false);
     const { isGrid, columns, rows, template, contentPadding, hasTransition = false, styles, children, style, forwardedRef, innerRef: innerRefProp, innerProps, _forceShowDevWarning, ...otherProps } = props;
     const combinedInnerRef = useCombinedRefs(innerRefProp);
-    // Separate panels from other children
-    const { panels, content } = useMemo(() => {
-        const panelElements = [];
-        const contentElements = [];
-        Children.forEach(children, (child) => {
-            if (isPanelElement(child)) {
-                panelElements.push(child);
-            }
-            else {
-                contentElements.push(child);
-            }
-        });
-        return { panels: panelElements, content: contentElements };
-    }, [children]);
     // Extract outer wrapper styles and inner content styles
     const outerStyles = extractStyles(otherProps, OUTER_STYLES);
     const innerStyles = extractStyles(otherProps, INNER_STYLES);
@@ -121,17 +104,17 @@ function LayoutInner(props) {
         template,
     ]);
     // Calculate inset values from panel sizes
-    const panelSizes = layoutContext?.panelSizes ?? {
+    const panelSizes = layoutState?.panelSizes ?? {
         left: 0,
         top: 0,
         right: 0,
         bottom: 0,
     };
-    const isDragging = layoutContext?.isDragging ?? false;
-    const isReady = layoutContext?.isReady ?? true;
-    const markReady = layoutContext?.markReady;
-    const dismissOverlayPanels = layoutContext?.dismissOverlayPanels;
-    const hasOverlayPanels = layoutContext?.hasOverlayPanels ?? false;
+    const isDragging = layoutState?.isDragging ?? false;
+    const isReady = layoutState?.isReady ?? true;
+    const markReady = layoutActions?.markReady;
+    const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;
+    const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;
     // Mark layout as ready after first paint
     // Using useEffect + requestAnimationFrame ensures:
     // 1. Panels register in useLayoutEffect → correct insets before first paint
@@ -217,7 +200,7 @@ function LayoutInner(props) {
             dismissOverlayPanels?.();
         }
     }, [hasOverlayPanels, dismissOverlayPanels]);
-    return (_jsx(LayoutElement, { ref: setRefs, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, onKeyDown: hasOverlayPanels ? handleKeyDown : undefined, children: showDevWarning ? (_jsxs(Alert, { theme: "danger", children: [_jsx("b", { children: "UIKit:" }), " ", _jsx("b", { children: "<Layout/>" }), " has collapsed to ", _jsx("b", { children: "0" }), " height. Ensure the parent container has a defined height or use the", ' ', _jsx("b", { children: "height" }), " prop on ", _jsx("b", { children: "<Layout/>" }), "."] })) : (_jsxs(_Fragment, { children: [panels, _jsx("div", { ref: combinedInnerRef, "data-element": "Inner", onFocus: handleInnerFocus, ...innerProps, children: content })] })) }));
+    return (_jsx(LayoutElement, { ref: setRefs, ...filterBaseProps(otherProps, { eventProps: true }), mods: mods, styles: finalStyles, style: insetStyle, onKeyDown: hasOverlayPanels ? handleKeyDown : undefined, children: showDevWarning ? (_jsxs(Alert, { theme: "danger", children: [_jsx("b", { children: "UIKit:" }), " ", _jsx("b", { children: "<Layout/>" }), " has collapsed to ", _jsx("b", { children: "0" }), " height. Ensure the parent container has a defined height or use the", ' ', _jsx("b", { children: "height" }), " prop on ", _jsx("b", { children: "<Layout/>" }), "."] })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: layoutRefs?.setPanelContainer, "data-element": "PanelContainer" }), _jsx("div", { ref: combinedInnerRef, "data-element": "Inner", onFocus: handleInnerFocus, ...innerProps, children: children })] })) }));
 }
 /**
  * Layout component provides a vertical flex layout with overflow-safe content.

package/es/components/content/Layout/LayoutBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/LayoutCenter.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/LayoutContainer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 

package/es/components/content/Layout/LayoutContent.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 
@@ -51,6 +51,7 @@ const ContentElement = tasty({
         },
         // Custom scrollbar handles (when scrollbar="tiny")
         ScrollbarV: {
+            $: '>',
             position: 'absolute',
             right: '1px',
             top: '$scrollbar-v-top',
@@ -66,6 +67,7 @@ const ContentElement = tasty({
             pointerEvents: 'none',
         },
         ScrollbarH: {
+            $: '>',
             position: 'absolute',
             bottom: '1px',
             left: '$scrollbar-h-left',

package/es/components/content/Layout/LayoutContext.js

@@ -1,19 +1,49 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.106.1
+ * @cube-dev/ui-kit v0.108.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
-export const LayoutContext = createContext(null);
+import { createContext, useContext, useMemo, useRef, useState, } from 'react';
+import { useEvent } from '../../../_internal/hooks/index.js';
+export const LayoutRefsContext = createContext(null);
+export function useLayoutRefsContext() {
+    return useContext(LayoutRefsContext);
+}
+export const LayoutActionsContext = createContext(null);
+export const LayoutStateContext = createContext(null);
+export function useLayoutActionsContext() {
+    return useContext(LayoutActionsContext);
+}
+export function useLayoutStateContext() {
+    return useContext(LayoutStateContext);
+}
+/**
+ * Combined hook that returns all layout context values.
+ * Convenience wrapper around the individual context hooks.
+ * Returns null if used outside of a Layout component.
+ */
 export function useLayoutContext() {
-    return useContext(LayoutContext);
+    const actions = useLayoutActionsContext();
+    const state = useLayoutStateContext();
+    const refs = useLayoutRefsContext();
+    if (!actions || !state || !refs) {
+        return null;
+    }
+    return { ...actions, ...state, ...refs };
 }
 export function LayoutProvider({ children, hasTransition = false, }) {
     const registeredPanels = useRef(new Set());
     const overlayPanelCallbacks = useRef(new Set());
+    const panelContainerRef = useRef(null);
+    const [isPanelContainerReady, setIsPanelContainerReady] = useState(false);
+    // Callback ref for panel container - triggers re-render when container mounts
+    const setPanelContainer = useEvent((element) => {
+        panelContainerRef.current = element;
+        setIsPanelContainerReady(element !== null);
+    });
     const [panelSizes, setPanelSizes] = useState({
         left: 0,
         top: 0,
@@ -23,7 +53,14 @@ export function LayoutProvider({ children, hasTransition = false, }) {
     const [isDragging, setIsDragging] = useState(false);
     const [isReady, setIsReady] = useState(false);
     const [hasOverlayPanels, setHasOverlayPanels] = useState(false);
-    const registerPanel = useCallback((side, size) => {
+    const updatePanelSize = useEvent((side, size) => {
+        setPanelSizes((prev) => {
+            if (prev[side] === size)
+                return prev;
+            return { ...prev, [side]: size };
+        });
+    });
+    const registerPanel = useEvent((side, size) => {
         if (registeredPanels.current.has(side)) {
             throw new Error(`Layout: Only one panel per side is allowed. ` +
                 `A panel is already registered on the "${side}" side.`);
@@ -41,36 +78,19 @@ export function LayoutProvider({ children, hasTransition = false, }) {
             }
         }
         registeredPanels.current.add(side);
-        setPanelSizes((prev) => {
-            if (prev[side] === size)
-                return prev;
-            return { ...prev, [side]: size };
-        });
-    }, []);
-    const unregisterPanel = useCallback((side) => {
+        updatePanelSize(side, size);
+    });
+    const unregisterPanel = useEvent((side) => {
         registeredPanels.current.delete(side);
-        setPanelSizes((prev) => {
-            if (prev[side] === 0)
-                return prev;
-            return { ...prev, [side]: 0 };
-        });
-    }, []);
-    const updatePanelSize = useCallback((side, size) => {
-        setPanelSizes((prev) => {
-            // Only update if the size actually changed
-            if (prev[side] === size)
-                return prev;
-            return { ...prev, [side]: size };
-        });
-    }, []);
-    const setDragging = useCallback((dragging) => {
+        updatePanelSize(side, 0);
+    });
+    const setDragging = useEvent((dragging) => {
         setIsDragging(dragging);
-    }, []);
-    const markReady = useCallback(() => {
+    });
+    const markReady = useEvent(() => {
         setIsReady(true);
-    }, []);
-    // Register an overlay panel's dismiss callback
-    const registerOverlayPanel = useCallback((dismiss) => {
+    });
+    const registerOverlayPanel = useEvent((dismiss) => {
         overlayPanelCallbacks.current.add(dismiss);
         setHasOverlayPanels(true);
         // Return unregister function
@@ -78,46 +98,44 @@ export function LayoutProvider({ children, hasTransition = false, }) {
             overlayPanelCallbacks.current.delete(dismiss);
             setHasOverlayPanels(overlayPanelCallbacks.current.size > 0);
         };
-    }, []);
-    // Dismiss all overlay panels
-    const dismissOverlayPanels = useCallback(() => {
+    });
+    const dismissOverlayPanels = useEvent(() => {
         overlayPanelCallbacks.current.forEach((dismiss) => dismiss());
-    }, []);
-    const value = useMemo(() => ({
+    });
+    // Actions context - stable because all callbacks use useEvent
+    const actionsValue = useMemo(() => ({
         registerPanel,
         unregisterPanel,
         updatePanelSize,
         setDragging,
         markReady,
-        panelSizes,
-        isDragging,
-        isReady,
         hasTransition,
         registerOverlayPanel,
         dismissOverlayPanels,
-        hasOverlayPanels,
-    }), [
-        registerPanel,
-        unregisterPanel,
-        updatePanelSize,
-        setDragging,
-        markReady,
+    }), 
+    // Only hasTransition can change - all other values are stable useEvent callbacks
+    [hasTransition]);
+    // State context - changes when state updates
+    const stateValue = useMemo(() => ({
         panelSizes,
         isDragging,
         isReady,
-        hasTransition,
-        registerOverlayPanel,
-        dismissOverlayPanels,
         hasOverlayPanels,
-    ]);
-    return (_jsx(LayoutContext.Provider, { value: value, children: children }));
+    }), [panelSizes, isDragging, isReady, hasOverlayPanels]);
+    // Refs context - includes container ready state
+    const refsValue = useMemo(() => ({
+        panelContainerRef,
+        isPanelContainerReady,
+        setPanelContainer,
+    }), [isPanelContainerReady]);
+    return (_jsx(LayoutRefsContext.Provider, { value: refsValue, children: _jsx(LayoutActionsContext.Provider, { value: actionsValue, children: _jsx(LayoutStateContext.Provider, { value: stateValue, children: children }) }) }));
 }
 /**
  * Provider that resets the layout context for sub-components.
  * Used to prevent panels in nested Layouts from affecting parent layouts.
  */
 export function LayoutContextReset({ children }) {
-    return (_jsx(LayoutContext.Provider, { value: null, children: children }));
+    return (_jsx(LayoutRefsContext.Provider, { value: null, children: _jsx(LayoutActionsContext.Provider, { value: null, children: _jsx(LayoutStateContext.Provider, { value: null, children: children }) }) }));
 }
 export const LayoutPanelContext = createContext(null);
 export function useLayoutPanelContext() {