@cube-dev/ui-kit 0.0.0-canary-dccaee2 → 0.0.0-canary-daeed47

package/es/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * 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.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * 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.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * 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.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * 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.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * 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.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * 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.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * Released under the MIT license.
  */
 
@@ -15,6 +15,7 @@ import { LayoutFlex } from './LayoutFlex';
 import { LayoutFooter } from './LayoutFooter';
 import { LayoutGrid } from './LayoutGrid';
 import { LayoutHeader } from './LayoutHeader';
+import { LayoutPane } from './LayoutPane';
 import { LayoutPanel } from './LayoutPanel';
 import { LayoutPanelHeader } from './LayoutPanelHeader';
 import { LayoutToolbar } from './LayoutToolbar';
@@ -28,7 +29,7 @@ const GridLayoutElement = tasty(Layout, {
 });
 function GridLayoutBase(props, ref) {
     const { columns, rows, template, ...otherProps } = props;
-    return (_jsx(GridLayoutElement, { ref: ref, isGrid: true, columns: columns, rows: rows, template: template, ...otherProps }));
+    return (_jsx(GridLayoutElement, { ref: ref, isGrid: true, gridColumns: columns, gridRows: rows, gridTemplate: template, ...otherProps }));
 }
 const _GridLayout = forwardRef(GridLayoutBase);
 _GridLayout.displayName = 'GridLayout';
@@ -40,6 +41,7 @@ const GridLayout = Object.assign(_GridLayout, {
     Block: LayoutBlock,
     Flex: LayoutFlex,
     Grid: LayoutGrid,
+    Pane: LayoutPane,
     Panel: LayoutPanel,
     PanelHeader: LayoutPanelHeader,
 });

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

@@ -1,21 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Children, forwardRef, isValidElement, useEffect, useMemo, useRef, useState, } from 'react';
-import { BLOCK_STYLES, COLOR_STYLES, extractStyles, filterBaseProps, FLOW_STYLES, OUTER_STYLES, tasty, } from '../../../tasty';
+import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { isDevEnv } from '../../../tasty/utils/isDevEnv';
 import { Alert } from '../Alert';
 import { LayoutProvider, useLayoutContext } from './LayoutContext';
-const INNER_STYLE_KEYS = [
-    ...BLOCK_STYLES,
-    ...COLOR_STYLES,
-    ...FLOW_STYLES,
-];
 const LayoutElement = tasty({
     as: 'div',
     qa: 'Layout',
@@ -74,30 +69,36 @@ function LayoutInner(props) {
         });
         return { panels: panelElements, content: contentElements };
     }, [children]);
-    // Extract inner content styles using extractStyles
-    const contentStyles = extractStyles(otherProps, INNER_STYLE_KEYS);
-    // Extract outer wrapper styles
-    const wrapperStyles = extractStyles(otherProps, OUTER_STYLES);
-    // Handle grid mode
-    if (isGrid) {
-        contentStyles.display = 'grid';
-    }
-    if (columns) {
-        contentStyles.gridColumns = columns;
-    }
-    if (rows) {
-        contentStyles.gridRows = rows;
-    }
-    if (template) {
-        contentStyles.gridTemplate = template;
-    }
-    // Merge styles
-    const finalStyles = {
-        ...wrapperStyles,
-        ...(contentPadding != null && { '$content-padding': contentPadding }),
-        ...styles,
-        Inner: { ...contentStyles, ...styles?.Inner },
-    };
+    // Extract outer wrapper styles and inner content styles
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES);
+    const innerStyles = extractStyles(otherProps, INNER_STYLES);
+    // Merge styles using the same pattern as LayoutPane
+    const finalStyles = useMemo(() => {
+        // Handle grid mode and grid properties
+        const gridStyles = {};
+        if (isGrid) {
+            gridStyles.display = 'grid';
+        }
+        if (columns) {
+            gridStyles.gridColumns = columns;
+        }
+        if (rows) {
+            gridStyles.gridRows = rows;
+        }
+        if (template) {
+            gridStyles.gridTemplate = template;
+        }
+        return mergeStyles(outerStyles, contentPadding != null ? { '$content-padding': contentPadding } : null, styles, { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner) });
+    }, [
+        outerStyles,
+        innerStyles,
+        contentPadding,
+        styles,
+        isGrid,
+        columns,
+        rows,
+        template,
+    ]);
     // Calculate inset values from panel sizes
     const panelSizes = layoutContext?.panelSizes ?? {
         left: 0,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * 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.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * Released under the MIT license.
  */
 
@@ -28,6 +28,7 @@ const ContentElement = tasty({
         overflow: 'hidden',
         boxSizing: 'content-box',
         Inner: {
+            $: '>',
             display: 'flex',
             flow: 'column',
             padding: '($content-padding, 1x)',

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * Released under the MIT license.
  */
 
@@ -16,6 +16,8 @@ const FlexElement = tasty(LayoutContent, {
         flexGrow: 0,
         Inner: {
             display: 'flex',
+            flow: 'row',
+            padding: 0,
         },
     },
 });

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * Released under the MIT license.
  */
 
@@ -16,6 +16,8 @@ const GridElement = tasty(LayoutContent, {
         flexGrow: 0,
         Inner: {
             display: 'grid',
+            flow: 'row',
+            padding: 0,
         },
     },
 });

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

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

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

@@ -0,0 +1,347 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useFocusRing, useHover, useMove } from 'react-aria';
+import { useDebouncedValue } from '../../../_internal/hooks';
+import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { mergeProps, useCombinedRefs } from '../../../utils/react';
+import { useTinyScrollbar } from './hooks/useTinyScrollbar';
+import { LayoutContextReset } from './LayoutContext';
+// Handler dimensions
+const HANDLER_WIDTH = 9; // Interactive area
+const HANDLER_RESERVED = 5; // Space reserved in Inner padding
+/**
+ * Clamps a size value within min/max constraints.
+ */
+function clampPaneSize(value, minSize, maxSize) {
+    let result = value;
+    if (typeof maxSize === 'number') {
+        result = Math.min(maxSize, result);
+    }
+    if (typeof minSize === 'number') {
+        result = Math.max(minSize, result);
+    }
+    return Math.max(result, 0);
+}
+const PaneElement = tasty({
+    as: 'div',
+    qa: 'LayoutPane',
+    styles: {
+        position: 'relative',
+        display: 'grid',
+        gridColumns: '1sf',
+        gridRows: '1sf',
+        placeContent: 'stretch',
+        placeItems: 'stretch',
+        placeSelf: 'stretch',
+        flexShrink: 0,
+        flexGrow: 0,
+        // Size is set via CSS custom property for performance during drag
+        width: {
+            '': 'auto',
+            'edge=right': '2x $pane-size $pane-size',
+        },
+        height: {
+            '': '2x $pane-size $pane-size',
+            'edge=right': 'auto',
+        },
+        boxSizing: 'content-box',
+        Inner: {
+            $: '>',
+            display: 'flex',
+            flow: 'column',
+            padding: '($content-padding, 1x)',
+            // Reserve space for handler on resize edge
+            paddingRight: {
+                '': '($content-padding, 1x)',
+                'edge=right': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,
+            },
+            paddingBottom: {
+                '': '($content-padding, 1x)',
+                'edge=bottom': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,
+            },
+            overflow: {
+                '': 'auto',
+                'scrollbar=none': 'clip',
+            },
+            placeSelf: 'stretch',
+            scrollbar: {
+                '': 'thin',
+                'scrollbar=tiny | scrollbar=none': 'none',
+            },
+        },
+        // Custom scrollbar handles (when scrollbar="tiny")
+        ScrollbarV: {
+            position: 'absolute',
+            right: {
+                '': '1px',
+                'edge=right': `${HANDLER_RESERVED + 1}px`,
+            },
+            top: '$scrollbar-v-top',
+            width: '1ow',
+            height: '$scrollbar-v-height',
+            radius: 'round',
+            fill: '#dark.35',
+            opacity: {
+                '': 0,
+                '(hovered | focused) & scrollbar=tiny': 1,
+            },
+            transition: 'opacity 0.15s',
+            pointerEvents: 'none',
+        },
+        ScrollbarH: {
+            position: 'absolute',
+            bottom: {
+                '': '1px',
+                'edge=bottom': `${HANDLER_RESERVED + 1}px`,
+            },
+            left: '$scrollbar-h-left',
+            height: '1ow',
+            width: '$scrollbar-h-width',
+            radius: 'round',
+            fill: '#dark.35',
+            opacity: {
+                '': 0,
+                '(hovered | focused) & scrollbar=tiny': 1,
+            },
+            transition: 'opacity 0.15s',
+            pointerEvents: 'none',
+        },
+        // Compact resize handler - only drag dots
+        ResizeHandler: {
+            position: 'absolute',
+            zIndex: 1,
+            // Size: 9px interactive area
+            width: {
+                '': '100%',
+                'edge=right': `${HANDLER_WIDTH}px`,
+            },
+            height: {
+                '': `${HANDLER_WIDTH}px`,
+                'edge=right': '100%',
+            },
+            // Position at edge, centered on the reserved space boundary
+            right: {
+                '': 'initial',
+                'edge=right': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,
+            },
+            bottom: {
+                '': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,
+                'edge=right': 'initial',
+            },
+            top: {
+                '': 'initial',
+                'edge=right': 0,
+            },
+            left: {
+                '': 0,
+                'edge=right': 'initial',
+            },
+            cursor: {
+                '': 'row-resize',
+                'edge=right': 'col-resize',
+                disabled: 'not-allowed',
+            },
+            padding: 0,
+            outline: 0,
+            boxSizing: 'border-box',
+            transition: 'theme',
+        },
+        Drag: {
+            display: 'grid',
+            gap: '2bw',
+            border: 0,
+            flow: {
+                '': 'row',
+                'edge=right': 'column',
+            },
+            gridColumns: {
+                '': '3px 3px 3px 3px 3px',
+                'edge=right': 'auto',
+            },
+            gridRows: {
+                '': 'auto',
+                'edge=right': '3px 3px 3px 3px 3px',
+            },
+            width: {
+                '': 'auto',
+                'edge=right': '3px',
+            },
+            height: {
+                '': '3px',
+                'edge=right': 'auto',
+            },
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            transition: 'theme',
+            radius: 'round',
+            outline: {
+                '': '0',
+                'focused | drag': '1bw #purple-text',
+            },
+            outlineOffset: 1,
+        },
+        DragPart: {
+            radius: true,
+            fill: {
+                '': '#dark-03',
+                'handlerHovered | drag | focused': '#purple-text',
+                disabled: '#dark-04',
+            },
+        },
+    },
+});
+function PaneResizeHandler(props) {
+    const { edge, isDisabled, moveProps, onDoubleClick, onHoverChange, onFocusChange, } = props;
+    const { hoverProps, isHovered } = useHover({
+        onHoverChange,
+    });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const isHorizontal = edge === 'right';
+    // Notify parent of focus changes
+    useEffect(() => {
+        onFocusChange?.(isFocusVisible);
+    }, [isFocusVisible, onFocusChange]);
+    return (_jsx("div", { "data-element": "ResizeHandler", ...mergeProps(hoverProps, focusProps, isDisabled ? {} : moveProps, {
+            tabIndex: isDisabled ? undefined : 0,
+            role: 'separator',
+            'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',
+            'aria-label': `Resize pane ${edge}`,
+            onDoubleClick: isDisabled ? undefined : onDoubleClick,
+        }), children: !isDisabled && (_jsxs("div", { "data-element": "Drag", children: [_jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" })] })) }));
+}
+function LayoutPane(props, ref) {
+    const { resizeEdge = 'right', isResizable = false, size: providedSize, defaultSize = 200, minSize, maxSize, onSizeChange, scrollbar = 'thin', styles, mods, children, ...otherProps } = props;
+    const combinedRef = useCombinedRefs(ref);
+    const innerRef = useRef(null);
+    const prevProvidedSizeRef = useRef(providedSize);
+    const isHorizontal = resizeEdge === 'right';
+    // Resize state
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHandlerHovered, setIsHandlerHovered] = useState(false);
+    const [isHandlerFocused, setIsHandlerFocused] = useState(false);
+    const debouncedHandlerHovered = useDebouncedValue(isHandlerHovered, 150);
+    const [size, setSize] = useState(() => {
+        const initialSize = typeof providedSize === 'number'
+            ? providedSize
+            : typeof defaultSize === 'number'
+                ? defaultSize
+                : 200;
+        return clampPaneSize(initialSize, minSize, maxSize);
+    });
+    // Memoize style extraction to avoid creating new objects on every render
+    // Note: extractStyles mutates otherProps, so we need to be careful
+    const { outerStyles, innerStyles } = useMemo(() => {
+        const outer = extractStyles(otherProps, OUTER_STYLES);
+        const inner = extractStyles(otherProps, INNER_STYLES);
+        return { outerStyles: outer, innerStyles: inner };
+    }, [styles]); // Only recalculate when styles prop changes
+    const isTinyScrollbar = scrollbar === 'tiny';
+    const { hoverProps, isHovered } = useHover({});
+    const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX } = useTinyScrollbar(innerRef, isTinyScrollbar);
+    // Clamp size to min/max constraints
+    const clampSize = useCallback((value) => clampPaneSize(value, minSize, maxSize), [minSize, maxSize]);
+    const { moveProps } = useMove({
+        onMoveStart() {
+            if (!isResizable)
+                return;
+            setIsDragging(true);
+        },
+        onMove(e) {
+            if (!isResizable)
+                return;
+            let delta;
+            if (e.pointerType === 'keyboard') {
+                // Keyboard resize: 10px per step, 50px with Shift
+                const step = e.shiftKey ? 50 : 10;
+                const rawDelta = isHorizontal ? e.deltaX : e.deltaY;
+                delta = rawDelta * step;
+            }
+            else {
+                // Pointer resize: use exact delta values
+                delta = isHorizontal ? e.deltaX : e.deltaY;
+            }
+            setSize((currentSize) => clampSize(currentSize + delta));
+        },
+        onMoveEnd() {
+            setIsDragging(false);
+            // Round to integer on release and notify parent
+            setSize((currentSize) => {
+                const finalSize = Math.round(clampSize(currentSize));
+                onSizeChange?.(finalSize);
+                return finalSize;
+            });
+        },
+    });
+    // Sync provided size with internal state (only when providedSize actually changes)
+    // This prevents resetting size when only isDragging changes (which would cause a flash)
+    useEffect(() => {
+        if (prevProvidedSizeRef.current !== providedSize) {
+            prevProvidedSizeRef.current = providedSize;
+            if (typeof providedSize === 'number' && !isDragging) {
+                setSize(clampSize(providedSize));
+            }
+        }
+    }, [providedSize, isDragging, clampSize]);
+    // Reset to default size on double-click
+    const handleResetSize = useCallback(() => {
+        const resetSize = typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);
+        const clampedSize = clampSize(resetSize || 200);
+        setSize(clampedSize);
+        onSizeChange?.(clampedSize);
+    }, [defaultSize, clampSize, onSizeChange]);
+    const scrollbarStyle = useMemo(() => {
+        if (!isTinyScrollbar)
+            return {};
+        return {
+            ...handleVStyle,
+            ...handleHStyle,
+        };
+    }, [isTinyScrollbar, handleVStyle, handleHStyle]);
+    const paneMods = useMemo(() => ({
+        scrollbar,
+        hovered: isHovered,
+        handlerHovered: debouncedHandlerHovered,
+        focused: isHandlerFocused,
+        disabled: !isResizable,
+        edge: resizeEdge,
+        drag: isDragging,
+        ...mods,
+    }), [
+        scrollbar,
+        isHovered,
+        debouncedHandlerHovered,
+        isHandlerFocused,
+        isResizable,
+        resizeEdge,
+        isDragging,
+        mods,
+    ]);
+    // Merge styles: outer styles to root, inner styles to Inner element
+    // Size is NOT included here - it's set via CSS custom property in paneStyle for performance
+    const finalStyles = useMemo(() => {
+        return mergeStyles(styles, outerStyles, innerStyles ? { Inner: innerStyles } : null);
+    }, [styles, outerStyles, innerStyles]);
+    // Size is set via CSS custom property for performance during drag
+    // This avoids expensive style recalculation on every mouse move
+    const paneStyle = useMemo(() => ({
+        ...scrollbarStyle,
+        '--pane-size': `${size}px`,
+        '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,
+        '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,
+    }), [scrollbarStyle, size, minSize, maxSize]);
+    return (_jsxs(PaneElement, { ref: combinedRef, ...filterBaseProps(otherProps, { eventProps: true }), ...hoverProps, mods: paneMods, styles: finalStyles, style: paneStyle, children: [_jsx("div", { ref: innerRef, "data-element": "Inner", children: _jsx(LayoutContextReset, { children: children }) }), isTinyScrollbar && hasOverflowY && _jsx("div", { "data-element": "ScrollbarV" }), isTinyScrollbar && hasOverflowX && _jsx("div", { "data-element": "ScrollbarH" }), isResizable && (_jsx(PaneResizeHandler, { edge: resizeEdge, isDisabled: !isResizable, moveProps: moveProps, onDoubleClick: handleResetSize, onHoverChange: setIsHandlerHovered, onFocusChange: setIsHandlerFocused }))] }));
+}
+const _LayoutPane = forwardRef(LayoutPane);
+_LayoutPane.displayName = 'Layout.Pane';
+export { _LayoutPane as LayoutPane };
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-dccaee2
+ * @cube-dev/ui-kit v0.0.0-canary-daeed47
  * Released under the MIT license.
  */
 
@@ -255,6 +255,7 @@ function LayoutPanel(props, ref) {
     }
     const { side = 'left', size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition = false, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, children, styles, mods, ...otherProps } = props;
     const combinedRef = useCombinedRefs(ref);
+    const prevProvidedSizeRef = useRef(providedSize);
     const isHorizontal = side === 'left' || side === 'right';
     // Panel open state
     const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
@@ -315,10 +316,14 @@ function LayoutPanel(props, ref) {
             });
         },
     });
-    // Sync provided size with internal state (only when not dragging)
+    // Sync provided size with internal state (only when providedSize actually changes)
+    // This prevents resetting size when only isDragging changes (which would cause a flash)
     useEffect(() => {
-        if (typeof providedSize === 'number' && !isDragging) {
-            setSize(clampSize(providedSize));
+        if (prevProvidedSizeRef.current !== providedSize) {
+            prevProvidedSizeRef.current = providedSize;
+            if (typeof providedSize === 'number' && !isDragging) {
+                setSize(clampSize(providedSize));
+            }
         }
     }, [providedSize, isDragging, clampSize]);
     // Register panel with layout context

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

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