@cube-dev/ui-kit 0.95.0 → 0.96.0

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

@@ -0,0 +1,419 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useFocusRing, useHover, useMove } from 'react-aria';
+import { useDebouncedValue } from '../../../_internal/hooks';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, mergeStyles, tasty, } from '../../../tasty';
+import { mergeProps, useCombinedRefs, useLocalStorage, } from '../../../utils/react';
+import { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';
+import { Dialog } from '../../overlays/Dialog';
+import { DialogContainer, } from '../../overlays/Dialog/DialogContainer';
+import { LayoutContextReset, LayoutPanelContext, useLayoutContext, } from './LayoutContext';
+import { clampSize } from './utils';
+// Resize handler dimensions
+const HANDLER_WIDTH = 9;
+// How far from panel edge to position handler's inner edge (centers the 3px track on the edge)
+const HANDLER_OFFSET = 4;
+// Extra inset added for resizable panels (to accommodate handler grab area)
+const RESIZABLE_INSET_OFFSET = 2;
+const PanelElement = tasty({
+    as: 'div',
+    qa: 'LayoutPanel',
+    styles: {
+        position: 'absolute',
+        zIndex: 10,
+        display: 'flex',
+        flow: 'column',
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        '$content-padding': '1x',
+        // Position based on side prop
+        top: {
+            '': 0,
+            'side=bottom': 'initial',
+        },
+        right: {
+            '': 0,
+            'side=left': 'initial',
+        },
+        bottom: {
+            '': 0,
+            'side=top': 'initial',
+        },
+        left: {
+            '': 0,
+            'side=right': 'initial',
+        },
+        // Size handling
+        width: {
+            '': '$panel-size',
+            'side=top | side=bottom': '100%',
+        },
+        height: {
+            '': '100%',
+            'side=top | side=bottom': '$panel-size',
+        },
+        // Visual styling
+        border: {
+            'side=left': 'right',
+            'side=right': 'left',
+            'side=top': 'bottom',
+            'side=bottom': 'top',
+        },
+        fill: '#white',
+        // Transition styles - offscreen mod controls slide animation
+        transform: {
+            '': 'translateX(0) translateY(0)',
+            'offscreen & side=left': 'translateX(-100%)',
+            'offscreen & side=right': 'translateX(100%)',
+            'offscreen & side=top': 'translateY(-100%)',
+            'offscreen & side=bottom': 'translateY(100%)',
+        },
+        transition: {
+            '': 'none',
+            'has-transition': 'transform $transition ease-out',
+        },
+    },
+});
+// Handler is positioned as sibling to panel (in Fragment), relative to Layout
+const ResizeHandlerElement = tasty({
+    qa: 'PanelResizeHandler',
+    styles: {
+        position: 'absolute',
+        zIndex: 11, // Above panel (zIndex: 10)
+        // Handler size
+        width: {
+            '': '100%',
+            horizontal: `${HANDLER_WIDTH}px`,
+            'disabled & horizontal': '1bw',
+        },
+        height: {
+            '': `${HANDLER_WIDTH}px`,
+            horizontal: '100%',
+            'disabled & !horizontal': '1bw',
+        },
+        // Position handler with direct offset (no centering needed)
+        top: {
+            '': 0,
+            'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,
+            'side=bottom': 'initial',
+        },
+        bottom: {
+            '': 0,
+            'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,
+            'side=top': 'initial',
+        },
+        left: {
+            '': 0,
+            'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,
+            'side=right': 'initial',
+        },
+        right: {
+            '': 0,
+            'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,
+            'side=left': 'initial',
+        },
+        // Offscreen transforms only (no centering needed with direct offset positioning)
+        transform: {
+            'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,
+            'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,
+            'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,
+            'offscreen & side=bottom': `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,
+        },
+        cursor: {
+            '': 'row-resize',
+            horizontal: 'col-resize',
+            disabled: 'not-allowed',
+        },
+        padding: 0,
+        outline: 0,
+        boxSizing: 'border-box',
+        // Transition must match panel for synchronized animation
+        transition: {
+            '': 'theme',
+            'has-transition': 'transform $transition ease-out, theme',
+        },
+        Track: {
+            width: {
+                '': 'initial',
+                horizontal: '3px',
+                'disabled & horizontal': '1px',
+            },
+            height: {
+                '': '3px',
+                horizontal: 'initial',
+                'disabled & !horizontal': '1px',
+            },
+            position: 'absolute',
+            inset: {
+                '': '3px 0',
+                horizontal: '0 3px',
+                disabled: '0 0',
+            },
+            fill: {
+                '': '#border-opaque',
+                '(hovered | drag | focused) & !disabled': '#purple-03',
+            },
+            border: 0,
+            transition: 'theme',
+            outline: {
+                '': '1bw #purple-text.0',
+                'drag | focused': '1bw #purple-text',
+            },
+            outlineOffset: 1,
+        },
+        Drag: {
+            display: 'grid',
+            gap: '2bw',
+            border: 0,
+            flow: {
+                '': 'row',
+                horizontal: 'column',
+            },
+            gridColumns: {
+                '': '3px 3px 3px 3px 3px',
+                horizontal: 'auto',
+            },
+            gridRows: {
+                '': 'auto',
+                horizontal: '3px 3px 3px 3px 3px',
+            },
+            width: {
+                '': 'auto',
+                horizontal: '1px',
+            },
+            height: {
+                '': '1px',
+                horizontal: 'auto',
+            },
+            inset: {
+                '': '4px 50% auto auto',
+                horizontal: '50% 4px auto auto',
+            },
+            transform: {
+                '': 'translate(-50%, 0)',
+                horizontal: 'translate(0, -50%)',
+            },
+            position: 'absolute',
+            transition: 'theme',
+        },
+        DragPart: {
+            radius: true,
+            fill: {
+                '': '#dark-03',
+                'hovered | drag | focused': '#purple-text',
+                disabled: '#dark-04',
+            },
+        },
+    },
+});
+function ResizeHandler(props) {
+    const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;
+    const { hoverProps, isHovered } = useHover({});
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const isHorizontal = side === 'left' || side === 'right';
+    const localIsHovered = useDebouncedValue(isHovered, 150);
+    return (_jsxs(ResizeHandlerElement, { ...mergeProps(hoverProps, focusProps, moveProps, {
+            mods: {
+                hovered: localIsHovered,
+                horizontal: isHorizontal,
+                disabled: isDisabled,
+                focused: isFocusVisible,
+                side,
+                ...mods,
+            },
+            style,
+            tabIndex: isDisabled ? undefined : 0,
+            role: 'separator',
+            'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',
+            'aria-label': `Resize ${side} panel`,
+            onDoubleClick: isDisabled ? undefined : onDoubleClick,
+        }), children: [_jsx("div", { "data-element": "Track" }), !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 LayoutPanel(props, ref) {
+    const layoutContext = useLayoutContext();
+    if (!layoutContext) {
+        throw new Error('Layout.Panel must be a direct child of Layout component.');
+    }
+    const { side = 'left', size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition: hasTransitionProp, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, contentPadding, sizeStorageKey, children, styles, mods, ...otherProps } = props;
+    // Use prop value if provided, otherwise fall back to context value
+    const hasTransition = hasTransitionProp ?? layoutContext.hasTransition;
+    const combinedRef = useCombinedRefs(ref);
+    const prevProvidedSizeRef = useRef(providedSize);
+    const isHorizontal = side === 'left' || side === 'right';
+    // Panel open state
+    const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
+    const isOpen = providedIsOpen ?? internalIsOpen;
+    // Dialog open state
+    const [internalIsDialogOpen, setInternalIsDialogOpen] = useState(defaultIsDialogOpen);
+    const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;
+    // Persistent size storage
+    const [storedSize, setStoredSize] = useLocalStorage(sizeStorageKey ?? null, null);
+    // Resize state
+    const [isDragging, setIsDragging] = useState(false);
+    const [size, setSize] = useState(() => {
+        const initialSize = typeof providedSize === 'number'
+            ? providedSize
+            : storedSize != null
+                ? storedSize
+                : typeof defaultSize === 'number'
+                    ? defaultSize
+                    : 280;
+        return clampSize(initialSize, minSize, maxSize);
+    });
+    const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);
+    // Merge styles with contentPadding support
+    const finalStyles = useMemo(() => mergeStyles(styles, contentPadding != null ? { '$content-padding': contentPadding } : null, extractedStyles), [extractedStyles, contentPadding, styles]);
+    // Clamp size to min/max constraints
+    const clampValue = useCallback((value) => clampSize(value, minSize, maxSize), [minSize, maxSize]);
+    const setContextDragging = layoutContext.setDragging;
+    const { moveProps } = useMove({
+        onMoveStart() {
+            if (!isResizable)
+                return;
+            setIsDragging(true);
+            setContextDragging(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;
+                // For keyboard, deltaX/deltaY are direction indicators (-1, 0, 1)
+                const rawDelta = isHorizontal ? e.deltaX : e.deltaY;
+                const direction = side === 'right' || side === 'bottom' ? -1 : 1;
+                delta = rawDelta * step * direction;
+            }
+            else {
+                // Pointer resize: use exact delta values
+                delta = isHorizontal
+                    ? e.deltaX * (side === 'right' ? -1 : 1)
+                    : e.deltaY * (side === 'bottom' ? -1 : 1);
+            }
+            setSize((currentSize) => clampValue(currentSize + delta));
+        },
+        onMoveEnd() {
+            setIsDragging(false);
+            setContextDragging(false);
+            // Round to integer on release and notify parent
+            setSize((currentSize) => {
+                const finalSize = Math.round(clampValue(currentSize));
+                // Call onSizeChange synchronously to ensure parent state is updated
+                onSizeChange?.(finalSize);
+                // Persist to localStorage if key is provided
+                setStoredSize(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(clampValue(providedSize));
+            }
+        }
+    }, [providedSize, isDragging, clampValue]);
+    // Register panel with layout context
+    // Include handler outside portion (minus border overlap) for proper content inset
+    const effectivePanelSize = isOpen && !isDialog ? size : 0;
+    const effectiveInsetSize = Math.round(effectivePanelSize +
+        (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0));
+    const { registerPanel, unregisterPanel, updatePanelSize, isReady } = layoutContext;
+    // Track the last reported size to prevent unnecessary updates
+    const lastSizeRef = useRef(effectiveInsetSize);
+    // Register on mount, unregister on unmount
+    // Using useLayoutEffect ensures registration happens before browser paint
+    useLayoutEffect(() => {
+        registerPanel(side, lastSizeRef.current);
+        return () => {
+            unregisterPanel(side);
+        };
+    }, [side, registerPanel, unregisterPanel]);
+    // Update size when it changes (after initial mount)
+    // Using useLayoutEffect ensures size updates happen before browser paint
+    useLayoutEffect(() => {
+        if (lastSizeRef.current !== effectiveInsetSize) {
+            lastSizeRef.current = effectiveInsetSize;
+            updatePanelSize(side, effectiveInsetSize);
+        }
+    }, [side, effectiveInsetSize, updatePanelSize]);
+    const handleOpenChange = useCallback((newIsOpen) => {
+        setInternalIsOpen(newIsOpen);
+        onOpenChange?.(newIsOpen);
+    }, [onOpenChange]);
+    const handleDialogOpenChange = useCallback((newIsOpen) => {
+        setInternalIsDialogOpen(newIsOpen);
+        onDialogOpenChange?.(newIsOpen);
+    }, [onDialogOpenChange]);
+    // Panel context value for child components (like LayoutPanelHeader)
+    const panelContextValue = useMemo(() => ({
+        onOpenChange: handleOpenChange,
+        isOpen,
+    }), [handleOpenChange, isOpen]);
+    // Dialog mode context value - uses dialog state instead of panel state
+    const dialogPanelContextValue = useMemo(() => ({
+        onOpenChange: handleDialogOpenChange,
+        isOpen: dialogOpen,
+    }), [handleDialogOpenChange, dialogOpen]);
+    const panelMods = useMemo(() => ({
+        side,
+        drag: isDragging,
+        horizontal: isHorizontal,
+        // Only enable transition after layout is ready to prevent initial animation
+        'has-transition': hasTransition && isReady,
+        ...mods,
+    }), [side, isDragging, isHorizontal, hasTransition, isReady, mods]);
+    const panelStyle = useMemo(() => ({
+        '--panel-size': `${size}px`,
+        '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,
+        '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,
+    }), [size, minSize, maxSize]);
+    // Combine refs for panel element
+    const panelRefCallback = useCallback((node, transitionRef) => {
+        // Update the combined ref
+        combinedRef.current = node;
+        // Call transition ref if provided
+        transitionRef?.(node);
+    }, [combinedRef]);
+    // Reset to default size on double-click
+    const handleResetSize = useCallback(() => {
+        const resetSize = typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);
+        const clampedSize = clampValue(resetSize || 280);
+        setSize(clampedSize);
+        onSizeChange?.(clampedSize);
+        setStoredSize(clampedSize);
+    }, [defaultSize, clampValue, onSizeChange, setStoredSize]);
+    const renderPanelContent = (offscreen = false, transitionRef) => (_jsxs(_Fragment, { children: [_jsx(PanelElement, { ref: (node) => panelRefCallback(node, transitionRef), ...filterBaseProps(otherProps, { eventProps: true }), mods: { ...panelMods, offscreen }, styles: finalStyles, style: panelStyle, "data-side": side, children: _jsx(LayoutPanelContext.Provider, { value: panelContextValue, children: _jsx(LayoutContextReset, { children: children }) }) }), isResizable && (_jsx(ResizeHandler, { side: side, isDisabled: !isResizable, mods: {
+                    drag: isDragging,
+                    offscreen,
+                    'has-transition': hasTransition && isReady,
+                }, moveProps: moveProps, style: panelStyle, onDoubleClick: handleResetSize }))] }));
+    // Dialog mode
+    if (isDialog) {
+        return (_jsx(DialogContainer, { isOpen: dialogOpen, onDismiss: () => handleDialogOpenChange(false), ...dialogProps, children: _jsx(Dialog, { isDismissable: false, children: _jsx(LayoutPanelContext.Provider, { value: dialogPanelContextValue, children: _jsx(LayoutContextReset, { children: children }) }) }) }));
+    }
+    // Panel with transition
+    if (hasTransition) {
+        return (_jsx(DisplayTransition, { isShown: isOpen, animateOnMount: false, children: ({ isShown, ref: transitionRef }) => renderPanelContent(!isShown, transitionRef) }));
+    }
+    // Simple panel (no transition)
+    if (!isOpen)
+        return null;
+    return renderPanelContent(false);
+}
+const _LayoutPanel = forwardRef(LayoutPanel);
+_LayoutPanel.displayName = 'Layout.Panel';
+export { _LayoutPanel as LayoutPanel };
+
+        

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

@@ -0,0 +1,56 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { CloseIcon } from '../../../icons/CloseIcon';
+import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
+import { ItemAction } from '../../actions/ItemAction';
+import { useDialogContext } from '../../overlays/Dialog/context';
+import { Item } from '../Item/Item';
+import { useLayoutPanelContext } from './LayoutContext';
+const PanelHeaderElement = tasty(Item, {
+    qa: 'PanelHeader',
+    shape: 'sharp',
+    styles: {
+        border: 'bottom',
+        preset: {
+            '': 't3m',
+            'size=xsmall': 't4',
+            'size=xlarge': 't2m',
+        },
+        '$inline-padding': '($content-padding, 1x)',
+    },
+});
+function LayoutPanelHeader(props, ref) {
+    const { title, level = 2, isClosable, onClose, actions, children, ...otherProps } = props;
+    // Extract container styles
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    // Access dialog context if in dialog mode
+    const dialogContext = useDialogContext();
+    // Access panel context to update panel open state
+    const panelContext = useLayoutPanelContext();
+    // Close handler that works for both panel and dialog modes
+    const handleClose = useCallback(() => {
+        // Call user-provided onClose callback
+        onClose?.();
+        // Update panel's internal open state
+        panelContext?.onOpenChange(false);
+        // If in dialog mode, also close the dialog
+        dialogContext?.onClose?.();
+    }, [onClose, panelContext, dialogContext]);
+    const closeAction = isClosable ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), "aria-label": "Close panel", onPress: handleClose })) : null;
+    const finalActions = actions ?? closeAction;
+    // Use heading tag based on level for semantics
+    const Tag = `h${level}`;
+    return (_jsx(PanelHeaderElement, { ref: ref, as: Tag, size: "large", actions: finalActions, styles: styles, ...otherProps, children: title ?? children }));
+}
+const _LayoutPanelHeader = forwardRef(LayoutPanelHeader);
+_LayoutPanelHeader.displayName = 'Layout.PanelHeader';
+export { _LayoutPanelHeader as LayoutPanelHeader };
+
+        

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

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tasty } from '../../../tasty';
+import { LayoutContent } from './LayoutContent';
+const ToolbarElement = tasty(LayoutContent, {
+    qa: 'Toolbar',
+    role: 'toolbar',
+    styles: {
+        height: 'min 5x',
+        flexShrink: 0,
+        flexGrow: 0,
+        Inner: {
+            display: 'flex',
+            flow: 'row nowrap',
+            placeContent: 'center space-between',
+            placeItems: 'center stretch',
+            gap: '1x',
+        },
+    },
+});
+function LayoutToolbar(props, ref) {
+    const { children, scrollbar = 'tiny', ...otherProps } = props;
+    return (_jsx(ToolbarElement, { ...otherProps, ref: ref, scrollbar: scrollbar, children: children }));
+}
+const _LayoutToolbar = forwardRef(LayoutToolbar);
+_LayoutToolbar.displayName = 'Layout.Toolbar';
+export { _LayoutToolbar as LayoutToolbar };
+
+        

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

@@ -0,0 +1,129 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { useCallback, useEffect, useRef, useState, } from 'react';
+const MIN_HANDLE_SIZE = 20;
+const SCROLL_VISIBILITY_DURATION = 1000;
+export function useTinyScrollbar(ref, enabled) {
+    const [scrollState, setScrollState] = useState({
+        hasOverflowY: false,
+        hasOverflowX: false,
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+        clientHeight: 0,
+        clientWidth: 0,
+    });
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimeoutRef = useRef(null);
+    const updateScrollState = useCallback(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth, } = element;
+        setScrollState({
+            hasOverflowY: scrollHeight > clientHeight,
+            hasOverflowX: scrollWidth > clientWidth,
+            scrollTop,
+            scrollLeft,
+            scrollHeight,
+            scrollWidth,
+            clientHeight,
+            clientWidth,
+        });
+    }, [ref]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const element = ref.current;
+        if (!element)
+            return;
+        // Initial update
+        updateScrollState();
+        // Listen for scroll events
+        const handleScroll = () => {
+            updateScrollState();
+            // Show scrollbar on scroll
+            setIsScrolling(true);
+            // Clear existing timeout
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
+            // Hide scrollbar after delay
+            scrollTimeoutRef.current = setTimeout(() => {
+                setIsScrolling(false);
+            }, SCROLL_VISIBILITY_DURATION);
+        };
+        element.addEventListener('scroll', handleScroll, { passive: true });
+        // ResizeObserver for content size changes
+        const resizeObserver = new ResizeObserver(() => {
+            updateScrollState();
+        });
+        resizeObserver.observe(element);
+        // Observe children for size changes
+        Array.from(element.children).forEach((child) => {
+            resizeObserver.observe(child);
+        });
+        return () => {
+            element.removeEventListener('scroll', handleScroll);
+            resizeObserver.disconnect();
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
+        };
+    }, [enabled, ref, updateScrollState]);
+    // Calculate vertical handle position and size
+    const calculateVHandle = useCallback(() => {
+        const { scrollHeight, clientHeight, scrollTop, hasOverflowY } = scrollState;
+        if (!hasOverflowY || !enabled) {
+            return { top: 0, height: 0 };
+        }
+        const trackHeight = clientHeight - 2; // 1px padding on each end
+        const ratio = clientHeight / scrollHeight;
+        let handleHeight = Math.max(MIN_HANDLE_SIZE, Math.round(trackHeight * ratio));
+        const availableTrack = trackHeight - handleHeight;
+        const scrollRatio = scrollHeight - clientHeight > 0
+            ? scrollTop / (scrollHeight - clientHeight)
+            : 0;
+        const handleTop = 1 + Math.round(availableTrack * scrollRatio);
+        return { top: handleTop, height: handleHeight };
+    }, [scrollState, enabled]);
+    // Calculate horizontal handle position and size
+    const calculateHHandle = useCallback(() => {
+        const { scrollWidth, clientWidth, scrollLeft, hasOverflowX } = scrollState;
+        if (!hasOverflowX || !enabled) {
+            return { left: 0, width: 0 };
+        }
+        const trackWidth = clientWidth - 2; // 1px padding on each end
+        const ratio = clientWidth / scrollWidth;
+        let handleWidth = Math.max(MIN_HANDLE_SIZE, Math.round(trackWidth * ratio));
+        const availableTrack = trackWidth - handleWidth;
+        const scrollRatio = scrollWidth - clientWidth > 0
+            ? scrollLeft / (scrollWidth - clientWidth)
+            : 0;
+        const handleLeft = 1 + Math.round(availableTrack * scrollRatio);
+        return { left: handleLeft, width: handleWidth };
+    }, [scrollState, enabled]);
+    const vHandle = calculateVHandle();
+    const hHandle = calculateHHandle();
+    return {
+        handleVStyle: {
+            '--scrollbar-v-top': `${vHandle.top}px`,
+            '--scrollbar-v-height': `${vHandle.height}px`,
+        },
+        handleHStyle: {
+            '--scrollbar-h-left': `${hHandle.left}px`,
+            '--scrollbar-h-width': `${hHandle.width}px`,
+        },
+        hasOverflowY: scrollState.hasOverflowY,
+        hasOverflowX: scrollState.hasOverflowX,
+        isScrolling,
+    };
+}
+
+        

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

@@ -0,0 +1,35 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { Layout as LayoutBase } from './Layout';
+import { LayoutBlock } from './LayoutBlock';
+import { LayoutContent } from './LayoutContent';
+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';
+export { GridLayout } from './GridLayout';
+export { LayoutContext, LayoutPanelContext, useLayoutContext, useLayoutPanelContext, } from './LayoutContext';
+const Layout = Object.assign(LayoutBase, {
+    Toolbar: LayoutToolbar,
+    Header: LayoutHeader,
+    Footer: LayoutFooter,
+    Content: LayoutContent,
+    Block: LayoutBlock,
+    Flex: LayoutFlex,
+    Grid: LayoutGrid,
+    Pane: LayoutPane,
+    Panel: LayoutPanel,
+    PanelHeader: LayoutPanelHeader,
+});
+export { Layout };
+
+