npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-05c61de → 0.0.0-canary-5b75dce - Mend

@cube-dev/ui-kit 0.0.0-canary-05c61de → 0.0.0-canary-5b75dce

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (603) hide show

package/dist/components/content/Layout/LayoutPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutPanel.js","names":["getFocusableTreeWalker","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","mergeStyles","Styles","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","RefCallback","useCallback","useEffect","useEffectEvent","useLayoutEffect","useMemo","useRef","useState","useFocusRing","useHover","useMove","createPortal","useDebouncedValue","useI18n","mergeProps","useCombinedRefs","useLocalStorage","focusProgrammatically","extractStyles","DisplayTransition","Dialog","CubeDialogContainerProps","DialogContainer","LayoutContextReset","LayoutPanelContext","Side","useLayoutActionsContext","useLayoutRefsContext","useLayoutStateContext","LayoutPanelTransition","clampSize","getOppositeSide","resolveCssSize","HANDLER_WIDTH","HANDLER_OFFSET","RESIZABLE_INSET_OFFSET","PanelElement","as","qa","styles","container","position","display","flow","overflow","boxSizing","top","right","bottom","left","width","height","border","fill","isolation","transform","transition","ResizeHandlerElement","horizontal","cursor","disabled","touchAction","padding","outline","Track","inset","outlineOffset","Drag","gap","gridColumns","gridRows","DragPart","radius","OverlayBackdrop","backdropFilter","opacity","visible","pointerEvents","ResizeHandlerProps","side","isDisabled","mods","Record","moveProps","ReturnType","style","onDoubleClick","ResizeHandler","props","$","_c","t","label","t0","Symbol","for","hoverProps","isHovered","focusProps","isFocusVisible","isHorizontal","localIsHovered","T0","t1","hovered","focused","tabIndex","undefined","role","t2","t3","t4","LayoutPanelMode","CubeLayoutPanelProps","mode","size","defaultSize","minSize","maxSize","isResizable","onSizeChange","isOpen","defaultIsOpen","onOpenChange","hasTransition","isDismissable","overlayStyles","isDialog","isDialogOpen","defaultIsDialogOpen","onDialogOpenChange","dialogProps","Omit","dialogStyles","contentPadding","sizeStorageKey","children","matchesContainerSize","HTMLElement","dimension","offsetWidth","offsetHeight","LayoutPanel","ref","HTMLDivElement","layoutActions","layoutState","layoutRefs","Error","modeProp","providedSize","providedIsOpen","hasTransitionProp","providedIsDialogOpen","otherProps","isDialogMode","isOverlayMode","isStickyMode","combinedRef","prevProvidedSizeRef","containerWidth","containerHeight","minContentSize","containerDimension","oppositeSide","oppositePanelSize","panelSizes","ownInsetOffset","naturalMax","Math","max","Infinity","internalIsOpen","setInternalIsOpen","isTransitionActive","isPanelContainerReady","visualState","setVisualState","isShown","isPanelShown","internalIsDialogOpen","setInternalIsDialogOpen","dialogOpen","storedSize","setStoredSize","isDragging","setIsDragging","setSize","initialSize","extractedStyles","finalStyles","resolvedMax","trim","endsWith","effectiveMax","values","push","Number","isFinite","length","min","clampValue","value","setContextDragging","setDragging","onMoveStart","onMove","e","delta","pointerType","step","shiftKey","rawDelta","deltaX","deltaY","direction","currentSize","onMoveEnd","finalSize","round","current","panelContainerRef","parentElement","applyInlineBounds","prev","clamped","frame","requestAnimationFrame","cancelAnimationFrame","effectivePanelSize","effectiveInsetSize","registerPanel","unregisterPanel","updatePanelSize","isReady","lastSizeRef","closeRequestedRef","handleOpenChange","newIsOpen","queueMicrotask","handleDismiss","registerOverlayPanel","unregister","openerRef","Element","panelNodeRef","mountFocusRef","recordOpener","active","ownerDocument","activeElement","contains","moveFocusIn","panel","opener","lastReturnedFocus","target","tabbable","nextNode","preventScroll","returnFocus","isConnected","body","handleDialogOpenChange","panelContextValue","dialogPanelContextValue","panelMods","drag","maxSizeCss","parts","join","panelStyle","panelRefCallback","node","transitionRef","handleResetSize","resetSize","parseInt","clampedSize","renderPanelContent","offscreen","showOverlay","eventProps","portalContainer","isExiting","OpenerProbe","focusRef","document","_LayoutPanel","displayName"],"sources":["../../../../src/components/content/Layout/LayoutPanel.tsx"],"sourcesContent":["import { getFocusableTreeWalker } from '@react-aria/focus';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n mergeStyles,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n RefCallback,\n useCallback,\n useEffect,\n useEffectEvent,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport {\n mergeProps,\n useCombinedRefs,\n useLocalStorage,\n} from '../../../utils/react';\nimport { focusProgrammatically } from '../../../utils/react/programmaticFocus';\nimport { extractStyles } from '../../../utils/styles';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Dialog } from '../../overlays/Dialog';\nimport {\n CubeDialogContainerProps,\n DialogContainer,\n} from '../../overlays/Dialog/DialogContainer';\n\nimport {\n LayoutContextReset,\n LayoutPanelContext,\n Side,\n useLayoutActionsContext,\n useLayoutRefsContext,\n useLayoutStateContext,\n} from './LayoutContext';\nimport { LayoutPanelTransition } from './LayoutPanelTransition';\nimport { clampSize, getOppositeSide, resolveCssSize } from './utils';\n\n// Resize handler dimensions\nconst HANDLER_WIDTH = 9;\n// How far from panel edge to position handler's inner edge (centers the 3px track on the edge)\nconst HANDLER_OFFSET = 4;\n// Extra inset added for resizable panels (to accommodate handler grab area)\nconst RESIZABLE_INSET_OFFSET = 2;\n\nconst PanelElement = tasty({\n as: 'div',\n qa: 'LayoutPanel',\n styles: {\n container: 'panel / inline-size',\n position: 'absolute',\n display: 'flex',\n flow: 'column',\n overflow: 'hidden',\n boxSizing: 'border-box',\n\n '$content-padding': '1x',\n // Auto-border size for sub-components (panels are always vertical)\n '$layout-border-size': '1bw',\n\n // Position based on side prop\n top: {\n '': 0,\n 'side=bottom': 'initial',\n },\n right: {\n '': 0,\n 'side=left': 'initial',\n },\n bottom: {\n '': 0,\n 'side=top': 'initial',\n },\n left: {\n '': 0,\n 'side=right': 'initial',\n },\n\n // Size handling with CSS-level min/max clamping\n width: {\n '': '$min-size $panel-size $max-size',\n 'side=top \| side=bottom': '100%',\n },\n height: {\n '': '100%',\n 'side=top \| side=bottom': '$min-size $panel-size $max-size',\n },\n\n // Visual styling\n border: {\n '': false,\n 'side=left': 'right',\n 'side=right': 'left',\n 'side=top': 'bottom',\n 'side=bottom': 'top',\n },\n fill: '#surface',\n // The stacking context the transform used to create: z-indexed content\n // stays inside the panel, below its resize handle and an overlay backdrop.\n isolation: 'isolate',\n\n // Transition styles - offscreen mod controls slide animation.\n // `none` at rest, not a zero translate: any transform makes the panel the\n // containing block of its fixed descendants (drag previews, popups), which\n // then position against the panel and are clipped by its overflow. `none`\n // still animates to and from the offscreen translate.\n transform: {\n '': 'none',\n 'offscreen & side=left': 'translateX(-100%)',\n 'offscreen & side=right': 'translateX(100%)',\n 'offscreen & side=top': 'translateY(-100%)',\n 'offscreen & side=bottom': 'translateY(100%)',\n },\n transition: {\n '': 'none',\n 'has-transition': 'transform $transition ease-out',\n },\n },\n});\n\n// Handler is positioned as sibling to panel (in Fragment), relative to Layout\nconst ResizeHandlerElement = tasty({\n qa: 'PanelResizeHandler',\n styles: {\n position: 'absolute',\n\n // Handler size\n width: {\n '': '100%',\n horizontal: `${HANDLER_WIDTH}px`,\n 'disabled & horizontal': '1bw',\n },\n height: {\n '': `${HANDLER_WIDTH}px`,\n horizontal: '100%',\n 'disabled & !horizontal': '1bw',\n },\n\n // Position handler with direct offset (no centering needed)\n top: {\n '': 0,\n 'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=bottom': 'initial',\n },\n bottom: {\n '': 0,\n 'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=top': 'initial',\n },\n left: {\n '': 0,\n 'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=right': 'initial',\n },\n right: {\n '': 0,\n 'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=left': 'initial',\n },\n\n // Offscreen transforms only (no centering needed with direct offset positioning)\n transform: {\n '': 'translateX(0)',\n 'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=bottom': `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n },\n\n cursor: {\n '': 'row-resize',\n horizontal: 'col-resize',\n disabled: 'not-allowed',\n },\n touchAction: {\n '': 'none',\n disabled: 'auto',\n },\n padding: 0,\n outline: 0,\n boxSizing: 'border-box',\n\n // Transition must match panel for synchronized animation\n transition: {\n '': 'theme',\n 'has-transition': 'transform $transition ease-out, theme',\n },\n\n Track: {\n width: {\n '': 'initial',\n horizontal: '3px',\n 'disabled & horizontal': '1px',\n },\n height: {\n '': '3px',\n horizontal: 'initial',\n 'disabled & !horizontal': '1px',\n },\n position: 'absolute',\n inset: {\n '': '3px 0',\n horizontal: '0 3px',\n disabled: '0 0',\n },\n fill: {\n '': '#border',\n '(hovered \| drag \| focused) & !disabled': '#purple-03',\n },\n border: 0,\n transition: 'theme',\n outline: {\n '': '1bw #primary-text.0',\n 'drag \| focused': '1bw #primary-text',\n },\n outlineOffset: 1,\n },\n\n Drag: {\n display: 'grid',\n gap: '2bw',\n border: 0,\n flow: {\n '': 'row',\n horizontal: 'column',\n },\n gridColumns: {\n '': '3px 3px 3px 3px 3px',\n horizontal: 'auto',\n },\n gridRows: {\n '': 'auto',\n horizontal: '3px 3px 3px 3px 3px',\n },\n width: {\n '': 'auto',\n horizontal: '1px',\n },\n height: {\n '': '1px',\n horizontal: 'auto',\n },\n inset: {\n '': '4px 50% auto auto',\n horizontal: '50% 4px auto auto',\n },\n transform: {\n '': 'translate(-50%, 0)',\n horizontal: 'translate(0, -50%)',\n },\n position: 'absolute',\n transition: 'theme',\n },\n\n DragPart: {\n radius: true,\n fill: {\n '': '#dark-03',\n 'hovered \| drag \| focused': '#primary-text',\n disabled: '#disabled-surface-text',\n },\n },\n },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n qa: 'PanelOverlay',\n styles: {\n position: 'absolute',\n inset: 0,\n // fill: '#white.2',\n backdropFilter: 'invert(.15)',\n cursor: 'pointer',\n opacity: {\n '': 0,\n visible: 1,\n },\n pointerEvents: {\n '': 'none',\n visible: 'auto',\n },\n transition: 'opacity .15s ease-out',\n },\n});\n\ninterface ResizeHandlerProps {\n side: Side;\n isDisabled?: boolean;\n mods?: Record<string, boolean>;\n moveProps: ReturnType<typeof useMove>['moveProps'];\n style?: Record<string, string \| number \| null \| undefined>;\n onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n const { t } = useI18n();\n // One key per side: a translated sentence can't take the side as a word.\n const label = {\n left: t('layout.resizeLeftPanel', 'Resize left panel'),\n top: t('layout.resizeTopPanel', 'Resize top panel'),\n right: t('layout.resizeRightPanel', 'Resize right panel'),\n bottom: t('layout.resizeBottomPanel', 'Resize bottom panel'),\n }[side];\n const { hoverProps, isHovered } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const isHorizontal = side === 'left' \|\| side === 'right';\n const localIsHovered = useDebouncedValue(isHovered, 150);\n\n return (\n <ResizeHandlerElement\n {...mergeProps(hoverProps, focusProps, moveProps, {\n mods: {\n hovered: localIsHovered,\n horizontal: isHorizontal,\n disabled: isDisabled,\n focused: isFocusVisible,\n side,\n ...mods,\n },\n style,\n tabIndex: isDisabled ? undefined : 0,\n role: 'separator',\n 'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n 'aria-label': label,\n onDoubleClick: isDisabled ? undefined : onDoubleClick,\n })}\n >\n <div data-element=\"Track\" />\n {!isDisabled && (\n <div data-element=\"Drag\">\n <div data-element=\"DragPart\" />\n <div data-element=\"DragPart\" />\n <div data-element=\"DragPart\" />\n <div data-element=\"DragPart\" />\n <div data-element=\"DragPart\" />\n </div>\n )}\n </ResizeHandlerElement>\n );\n}\n\n/** Panel rendering mode /\nexport type LayoutPanelMode = 'default' \| 'sticky' \| 'overlay' \| 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n /* Side of the layout where panel is positioned /\n side: Side;\n /\n Panel rendering mode:\n * - `default`: Standard panel that pushes content aside\n * - `sticky`: Panel floats over content without pushing it\n * - `overlay`: Panel with dismissable backdrop overlay; focus moves into it\n * when it opens and back to the opener when it closes\n * - `dialog`: Panel renders as a modal dialog\n /\n mode?: LayoutPanelMode;\n /* Panel size (width for left/right, height for top/bottom) - controlled /\n size?: number \| string;\n /* Default panel size for uncontrolled state /\n defaultSize?: number \| string;\n /* Minimum panel size /\n minSize?: number \| string;\n /* Maximum panel size /\n maxSize?: number \| string;\n /* Enable resize functionality /\n isResizable?: boolean;\n /* Size change callback /\n onSizeChange?: (size: number) => void;\n /* Controlled open state /\n isOpen?: boolean;\n /* Default open state /\n defaultIsOpen?: boolean;\n /* Open state change callback /\n onOpenChange?: (isOpen: boolean) => void;\n /* Enable slide transition on open/close /\n hasTransition?: boolean;\n /\n Whether the panel can be dismissed by clicking the overlay (overlay mode), pressing Escape,\n * or, in overlay mode, moving focus into the main content.\n * Only applies to `overlay` and `dialog` modes. Default: true\n /\n isDismissable?: boolean;\n /* Styles for the overlay backdrop in overlay mode /\n overlayStyles?: Styles;\n /\n @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n /\n isDialog?: boolean;\n /* Controlled dialog open state (used with mode=\"dialog\") /\n isDialogOpen?: boolean;\n /* Default dialog open state /\n defaultIsDialogOpen?: boolean;\n /* Dialog open state change callback /\n onDialogOpenChange?: (isOpen: boolean) => void;\n /* Props passed to DialogContainer when in dialog mode /\n dialogProps?: Omit<\n CubeDialogContainerProps,\n 'isDismissable' \| 'onDismiss' \| 'isOpen'\n >;\n /* Styles for the Dialog root in dialog mode, separate from inline panel styles. /\n dialogStyles?: Styles;\n /* Padding for content areas inside the panel. Default: '1x' /\n contentPadding?: Styles['padding'];\n /* localStorage key for persisting panel size. When provided, size is stored and restored across instances. /\n sizeStorageKey?: string;\n /* Styles for the panel /\n styles?: Styles;\n children?: ReactNode;\n}\n\nfunction matchesContainerSize(\n container: HTMLElement \| null \| undefined,\n isHorizontal: boolean,\n dimension: number,\n) {\n return (\n (isHorizontal ? container?.offsetWidth : container?.offsetHeight) ===\n dimension\n );\n}\n\nfunction LayoutPanel(\n props: CubeLayoutPanelProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const layoutActions = useLayoutActionsContext();\n const layoutState = useLayoutStateContext();\n const layoutRefs = useLayoutRefsContext();\n\n if (!layoutActions \|\| !layoutState \|\| !layoutRefs) {\n throw new Error(\n 'Layout.Panel must be used within a Layout component. ' +\n 'Ensure your panel is rendered inside a <Layout> parent.',\n );\n }\n\n const {\n side = 'left',\n mode: modeProp,\n size: providedSize,\n defaultSize = 280,\n minSize = 200,\n maxSize,\n isResizable = false,\n onSizeChange,\n isOpen: providedIsOpen,\n defaultIsOpen = true,\n onOpenChange,\n hasTransition: hasTransitionProp,\n isDismissable = true,\n overlayStyles,\n // Deprecated prop - use mode=\"dialog\" instead\n isDialog = false,\n isDialogOpen: providedIsDialogOpen,\n defaultIsDialogOpen = false,\n onDialogOpenChange,\n dialogProps,\n dialogStyles,\n contentPadding,\n sizeStorageKey,\n children,\n styles,\n mods,\n ...otherProps\n } = props;\n\n // Resolve mode from prop or deprecated isDialog\n const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n const isDialogMode = mode === 'dialog';\n const isOverlayMode = mode === 'overlay';\n const isStickyMode = mode === 'sticky';\n\n // Use prop value if provided, otherwise fall back to context value\n const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n const combinedRef = useCombinedRefs(ref);\n const prevProvidedSizeRef = useRef(providedSize);\n const isHorizontal = side === 'left' \|\| side === 'right';\n\n // Natural boundary computation\n const { containerWidth, containerHeight } = layoutState;\n const { minContentSize } = layoutActions;\n const containerDimension = isHorizontal ? containerWidth : containerHeight;\n const oppositeSide = getOppositeSide(side);\n const oppositePanelSize = layoutState.panelSizes[oppositeSide];\n const ownInsetOffset = isResizable ? RESIZABLE_INSET_OFFSET : 0;\n const naturalMax = useMemo(\n () =>\n !isDialogMode && containerDimension > 0\n ? Math.max(\n 0,\n containerDimension -\n oppositePanelSize -\n minContentSize -\n ownInsetOffset,\n )\n : Infinity,\n [\n isDialogMode,\n containerDimension,\n oppositePanelSize,\n minContentSize,\n ownInsetOffset,\n ],\n );\n\n // Panel open state\n const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n const isOpen = providedIsOpen ?? internalIsOpen;\n const isTransitionActive =\n hasTransition && !isDialogMode && layoutRefs.isPanelContainerReady;\n const [visualState, setVisualState] = useState({\n isShown: isOpen,\n isTransitionActive,\n });\n\n // A newly mounted DisplayTransition starts at the requested visibility.\n if (visualState.isTransitionActive !== isTransitionActive) {\n setVisualState({ isShown: isOpen, isTransitionActive });\n }\n const isPanelShown = isTransitionActive ? visualState.isShown : isOpen;\n\n // Dialog open state\n const [internalIsDialogOpen, setInternalIsDialogOpen] =\n useState(defaultIsDialogOpen);\n const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;\n\n // Persistent size storage\n const [storedSize, setStoredSize] = useLocalStorage<number \| null>(\n sizeStorageKey ?? null,\n null,\n );\n\n // Resize state\n const [isDragging, setIsDragging] = useState(false);\n const [size, setSize] = useState<number>(() => {\n const initialSize =\n typeof providedSize === 'number'\n ? providedSize\n : storedSize != null\n ? storedSize\n : typeof defaultSize === 'number'\n ? defaultSize\n : 280;\n\n return clampSize(initialSize, minSize, maxSize);\n });\n\n const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n\n // Merge styles with contentPadding support\n const finalStyles = useMemo(\n () =>\n mergeStyles(\n styles,\n contentPadding != null ? { '$content-padding': contentPadding } : null,\n extractedStyles,\n ),\n [extractedStyles, contentPadding, styles],\n );\n\n // Resolve user's maxSize to pixels for JS-level clamping.\n // Percentage bounds belong to the inline host, not the dialog's host.\n const resolvedMax = useMemo(() => {\n if (typeof maxSize === 'number') return maxSize;\n if (\n typeof maxSize === 'string' &&\n containerDimension > 0 &&\n (!isDialogMode \|\| !maxSize.trim().endsWith('%'))\n ) {\n return resolveCssSize(maxSize, containerDimension);\n }\n return undefined;\n }, [maxSize, containerDimension, isDialogMode]);\n\n // Effective max combines user's maxSize with natural boundary\n const effectiveMax = useMemo(() => {\n const values: number[] = [];\n if (resolvedMax != null) values.push(resolvedMax);\n if (Number.isFinite(naturalMax)) values.push(naturalMax);\n return values.length > 0 ? Math.min(...values) : undefined;\n }, [resolvedMax, naturalMax]);\n\n // Clamp size to min/max constraints (including natural boundaries)\n const clampValue = useCallback(\n (value: number) => clampSize(value, minSize, undefined, effectiveMax),\n [minSize, effectiveMax],\n );\n\n const setContextDragging = layoutActions.setDragging;\n\n const { moveProps } = useMove({\n onMoveStart() {\n if (!isResizable \|\| isDialogMode) return;\n setIsDragging(true);\n setContextDragging(true);\n },\n onMove(e) {\n if (!isResizable \|\| isDialogMode) return;\n\n let delta: number;\n\n if (e.pointerType === 'keyboard') {\n // Keyboard resize: 10px per step, 50px with Shift\n const step = e.shiftKey ? 50 : 10;\n // For keyboard, deltaX/deltaY are direction indicators (-1, 0, 1)\n const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n const direction = side === 'right' \|\| side === 'bottom' ? -1 : 1;\n delta = rawDelta step * direction;\n } else {\n // Pointer resize: use exact delta values\n delta = isHorizontal\n ? e.deltaX * (side === 'right' ? -1 : 1)\n : e.deltaY * (side === 'bottom' ? -1 : 1);\n }\n\n setSize((currentSize) => clampValue(currentSize + delta));\n },\n onMoveEnd() {\n setIsDragging(false);\n setContextDragging(false);\n if (isDialogMode && !isDragging) return;\n // Round to integer on release and notify parent\n setSize((currentSize) => {\n const finalSize = Math.round(clampValue(currentSize));\n // Call onSizeChange synchronously to ensure parent state is updated\n onSizeChange?.(finalSize);\n // Persist to localStorage if key is provided\n setStoredSize(finalSize);\n return finalSize;\n });\n },\n });\n\n // Sync provided size with internal state (only when providedSize actually changes)\n // This prevents resetting size when only isDragging changes (which would cause a flash)\n useEffect(() => {\n if (prevProvidedSizeRef.current !== providedSize) {\n if (\n !isDialogMode &&\n !matchesContainerSize(\n layoutRefs.panelContainerRef.current?.parentElement,\n isHorizontal,\n containerDimension,\n )\n ) {\n return;\n }\n\n prevProvidedSizeRef.current = providedSize;\n if (typeof providedSize === 'number' && !isDragging) {\n setSize(clampValue(providedSize));\n }\n }\n }, [\n providedSize,\n isDragging,\n clampValue,\n isDialogMode,\n isHorizontal,\n containerDimension,\n layoutRefs.panelContainerRef,\n ]);\n\n // Dialogs retain inline size; only inline panels follow the host's bounds.\n const applyInlineBounds = useEffectEvent(() => {\n if (\n !matchesContainerSize(\n layoutRefs.panelContainerRef.current?.parentElement,\n isHorizontal,\n containerDimension,\n )\n ) {\n return;\n }\n\n setSize((prev) => {\n const clamped = clampValue(prev);\n\n if (clamped !== prev) {\n onSizeChange?.(Math.round(clamped));\n setStoredSize(Math.round(clamped));\n }\n\n return clamped;\n });\n });\n\n useEffect(() => {\n if (!isDialogMode && !isDragging && containerDimension > 0) {\n // In an iframe ResizeObserver can precede responsive mode delivery.\n // Let that mode settle before shrinking and persisting the inline size.\n const frame = requestAnimationFrame(() => applyInlineBounds());\n return () => cancelAnimationFrame(frame);\n }\n }, [\n isDialogMode,\n isDragging,\n clampValue,\n containerDimension,\n isHorizontal,\n layoutRefs.panelContainerRef,\n ]);\n\n // Register panel with layout context\n // Include handler outside portion (minus border overlap) for proper content inset\n // In sticky, overlay, and dialog modes, panel doesn't push content, so size is 0\n // NOTE: We intentionally use `size` (not `clampValue(size)`) here to avoid a feedback\n // loop. `clampValue` depends on the opposite panel's context size, so clamping here\n // would create a period-2 oscillation through shared context. CSS --max-size handles\n // visual clamping immediately; the auto-shrink effect converges `size` state.\n const effectivePanelSize = isPanelShown && mode === 'default' ? size : 0;\n const effectiveInsetSize = Math.round(\n effectivePanelSize +\n (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0),\n );\n\n const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;\n const { isReady } = layoutState;\n\n // Track the last reported size to prevent unnecessary updates\n const lastSizeRef = useRef<number>(effectiveInsetSize);\n\n // Register on mount, unregister on unmount\n // Using useLayoutEffect ensures registration happens before browser paint\n useLayoutEffect(() => {\n registerPanel(side, lastSizeRef.current);\n\n return () => {\n unregisterPanel(side);\n };\n }, [side, registerPanel, unregisterPanel]);\n\n // Update size when it changes (after initial mount)\n // Using useLayoutEffect ensures size updates happen before browser paint\n useLayoutEffect(() => {\n if (lastSizeRef.current !== effectiveInsetSize) {\n lastSizeRef.current = effectiveInsetSize;\n updatePanelSize(side, effectiveInsetSize);\n }\n }, [side, effectiveInsetSize, updatePanelSize]);\n\n // One close per task: a consumer that moves focus into the main content in\n // `onOpenChange(false)` would otherwise dismiss the still-registered panel\n // a second time.\n const closeRequestedRef = useRef(false);\n\n const handleOpenChange = useCallback(\n (newIsOpen: boolean) => {\n if (!newIsOpen) {\n if (closeRequestedRef.current) return;\n\n closeRequestedRef.current = true;\n queueMicrotask(() => {\n closeRequestedRef.current = false;\n });\n }\n\n setInternalIsOpen(newIsOpen);\n onOpenChange?.(newIsOpen);\n },\n [onOpenChange],\n );\n\n // Dismiss handler for overlay mode (click on overlay)\n const handleDismiss = useCallback(() => {\n if (isDismissable) {\n handleOpenChange(false);\n }\n }, [isDismissable, handleOpenChange]);\n\n // Register overlay panel with Layout context for coordinated dismissal\n const { registerOverlayPanel } = layoutActions;\n\n useEffect(() => {\n // Only register if in overlay mode, open, and dismissable\n if (isOverlayMode && isOpen && isDismissable) {\n const unregister = registerOverlayPanel(() => handleOpenChange(false));\n return unregister;\n }\n }, [\n isOverlayMode,\n isOpen,\n isDismissable,\n registerOverlayPanel,\n handleOpenChange,\n ]);\n\n // Overlay focus: move into the panel on open, back to the opener on close.\n // Declared after the registration effect on purpose: its cleanup then runs\n // after the panel unregisters, so a restore into the main content dismisses\n // nothing.\n const openerRef = useRef<Element \| null>(null);\n const panelNodeRef = useRef<HTMLDivElement \| null>(null);\n // Focus as the panel's contents mount, before a native `autoFocus` inside\n // them moves it (see OpenerProbe).\n const mountFocusRef = useRef<Element \| null>(null);\n\n // A panel open on the Layout's first render leaves page focus alone.\n const recordOpener = useEffectEvent(() => {\n const active =\n mountFocusRef.current ??\n panelNodeRef.current?.ownerDocument.activeElement ??\n null;\n\n mountFocusRef.current = null;\n\n openerRef.current =\n isOverlayMode && isReady && !panelNodeRef.current?.contains(active)\n ? active\n : null;\n });\n\n const moveFocusIn = useEffectEvent(() => {\n const panel = panelNodeRef.current;\n const opener = openerRef.current;\n\n const active = panel?.ownerDocument.activeElement;\n\n // Focus already moved elsewhere as the panel opened, such as to a field\n // with `autoFocus` inside it: leave it there. Focus another overlay panel just\n // returned, as it closed in the same commit, does not count.\n if (\n !panel \|\|\n !opener \|\|\n (active !== opener && active !== lastReturnedFocus)\n ) {\n return;\n }\n\n const target =\n getFocusableTreeWalker(panel, { tabbable: true }).nextNode() ??\n getFocusableTreeWalker(panel).nextNode();\n\n // The panel enters translated offscreen, so focus must not scroll.\n focusProgrammatically(target as HTMLElement \| null, {\n preventScroll: true,\n });\n });\n\n // Return focus only if it is still in the panel or was lost with it; focus\n // the user or the consumer moved elsewhere stays there.\n const returnFocus = useEffectEvent(() => {\n const opener = openerRef.current;\n const panel = panelNodeRef.current;\n\n openerRef.current = null;\n\n if (\n !isOverlayMode \|\|\n !(opener instanceof HTMLElement) \|\|\n !opener.isConnected \|\|\n opener === opener.ownerDocument.body\n ) {\n return;\n }\n\n const active = opener.ownerDocument.activeElement;\n\n if (\n active != null &&\n active !== opener.ownerDocument.body &&\n !panel?.contains(active)\n ) {\n return;\n }\n\n focusProgrammatically(opener, { preventScroll: true });\n lastReturnedFocus = opener;\n queueMicrotask(() => {\n lastReturnedFocus = null;\n });\n });\n\n useLayoutEffect(() => {\n if (isOpen) recordOpener();\n }, [isOpen]);\n\n // Passive, so a menu item that refocuses itself while closing its menu has\n // done so before focus moves in.\n useEffect(() => {\n if (!isOpen) return;\n\n moveFocusIn();\n\n return () => returnFocus();\n }, [isOpen]);\n\n const handleDialogOpenChange = useCallback(\n (newIsOpen: boolean) => {\n setInternalIsDialogOpen(newIsOpen);\n onDialogOpenChange?.(newIsOpen);\n },\n [onDialogOpenChange],\n );\n\n // Panel context value for child components (like LayoutPanelHeader)\n const panelContextValue = useMemo(\n () => ({\n onOpenChange: handleOpenChange,\n isOpen,\n }),\n [handleOpenChange, isOpen],\n );\n\n // Dialog mode context value - uses dialog state instead of panel state\n const dialogPanelContextValue = useMemo(\n () => ({\n onOpenChange: handleDialogOpenChange,\n isOpen: dialogOpen,\n }),\n [handleDialogOpenChange, dialogOpen],\n );\n\n const panelMods = useMemo(\n () => ({\n side,\n drag: isDragging,\n horizontal: isHorizontal,\n // Only enable transition after layout is ready to prevent initial animation\n 'has-transition': hasTransition && isReady,\n ...mods,\n }),\n [side, isDragging, isHorizontal, hasTransition, isReady, mods],\n );\n\n // Build --max-size CSS variable combining user maxSize and natural boundary\n const maxSizeCss = useMemo(() => {\n const parts: string[] = [];\n\n if (maxSize != null) {\n parts.push(typeof maxSize === 'number' ? `${maxSize}px` : maxSize);\n }\n\n if (containerDimension > 0 && Number.isFinite(naturalMax)) {\n parts.push(`${naturalMax}px`);\n }\n\n if (parts.length === 0) return undefined;\n return parts.length === 1 ? parts[0] : `min(${parts.join(', ')})`;\n }, [maxSize, naturalMax, containerDimension]);\n\n const panelStyle = useMemo(\n () => ({\n '--panel-size': `${size}px`,\n '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n '--max-size': maxSizeCss,\n }),\n [size, minSize, maxSizeCss],\n );\n\n // Combine refs for panel element\n const panelRefCallback = useCallback(\n (node: HTMLDivElement \| null, transitionRef?: RefCallback<HTMLElement>) => {\n // Update the combined ref\n (combinedRef as { current: HTMLDivElement \| null }).current = node;\n // Call transition ref if provided\n transitionRef?.(node);\n },\n [combinedRef],\n );\n\n // Reset to default size on double-click\n const handleResetSize = useCallback(() => {\n const resetSize =\n typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n const clampedSize = clampValue(resetSize \|\| 280);\n setSize(clampedSize);\n onSizeChange?.(clampedSize);\n setStoredSize(clampedSize);\n }, [defaultSize, clampValue, onSizeChange, setStoredSize]);\n\n const renderPanelContent = (\n offscreen = false,\n transitionRef?: RefCallback<HTMLElement>,\n ) => {\n const showOverlay = isOverlayMode && !offscreen;\n\n return (\n <>\n {isOverlayMode && <OpenerProbe focusRef={mountFocusRef} />}\n {/* Overlay backdrop for overlay mode */}\n {isOverlayMode && (\n <OverlayBackdrop\n mods={{ visible: showOverlay }}\n styles={overlayStyles}\n aria-hidden=\"true\"\n onClick={handleDismiss}\n />\n )}\n <PanelElement\n ref={(node: HTMLDivElement \| null) => {\n // Kept after detach: StrictMode detaches refs before it replays\n // the effects that still need the panel.\n if (node) panelNodeRef.current = node;\n panelRefCallback(node, transitionRef);\n }}\n {...filterBaseProps(otherProps, { eventProps: true })}\n mods={{ ...panelMods, offscreen }}\n styles={finalStyles}\n style={panelStyle}\n data-side={side}\n >\n <LayoutPanelContext.Provider value={panelContextValue}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </LayoutPanelContext.Provider>\n </PanelElement>\n {isResizable && (\n <ResizeHandler\n side={side}\n isDisabled={!isResizable}\n mods={{\n drag: isDragging,\n offscreen,\n 'has-transition': hasTransition && isReady,\n }}\n moveProps={moveProps}\n style={panelStyle}\n onDoubleClick={handleResetSize}\n />\n )}\n </>\n );\n };\n\n // Dialog mode - uses its own portal via DialogContainer\n if (isDialogMode) {\n return (\n <DialogContainer\n isOpen={dialogOpen}\n isDismissable={isDismissable}\n onDismiss={() => handleDialogOpenChange(false)}\n {...dialogProps}\n >\n <Dialog isDismissable={false} styles={dialogStyles}>\n <LayoutPanelContext.Provider value={dialogPanelContextValue}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </LayoutPanelContext.Provider>\n </Dialog>\n </DialogContainer>\n );\n }\n\n // Wait for portal container to be ready before rendering\n if (!layoutRefs.isPanelContainerReady) {\n return null;\n }\n\n const portalContainer = layoutRefs.panelContainerRef.current!;\n\n // Panel with transition - portal to panel container\n if (hasTransition) {\n return createPortal(\n <DisplayTransition\n isShown={isOpen}\n animateOnMount={false}\n onToggle={(isShown) => setVisualState({ isShown, isTransitionActive })}\n >\n {({ isShown, isExiting, ref: transitionRef }) => (\n <LayoutPanelTransition isShown={isShown} isExiting={isExiting}>\n {renderPanelContent(!isShown, transitionRef)}\n </LayoutPanelTransition>\n )}\n </DisplayTransition>,\n portalContainer,\n );\n }\n\n // Simple panel (no transition) - portal to panel container\n if (!isOpen) return null;\n\n return createPortal(renderPanelContent(false), portalContainer);\n}\n\n// Focus another overlay panel returned in the current task.\nlet lastReturnedFocus: Element \| null = null;\n\n// Rendered before the panel's contents, so its layout effect reads focus\n// before React applies a native `autoFocus` inside them.\nfunction OpenerProbe({ focusRef }: { focusRef: { current: Element \| null } }) {\n useLayoutEffect(() => {\n focusRef.current = document.activeElement;\n }, [focusRef]);\n\n return null;\n}\n\nconst _LayoutPanel = forwardRef(LayoutPanel);\n\n_LayoutPanel.displayName = 'Layout.Panel';\n\nexport { _LayoutPanel as LayoutPanel };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAM6C,gBAAgB;AAEtB,MAAMC,iBAAiB;AAEvB,MAAMC,yBAAyB;AAE/B,MAAMC,eAAezC,MAAM;CACzB0C,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,WAAW;EACXC,UAAU;EACVC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,WAAW;EAEX,oBAAoB;EAEpB,uBAAuB;EAGvBC,KAAK;GACH,IAAI;GACJ,eAAe;GAChB;EACDC,OAAO;GACL,IAAI;GACJ,aAAa;GACd;EACDC,QAAQ;GACN,IAAI;GACJ,YAAY;GACb;EACDC,MAAM;GACJ,IAAI;GACJ,cAAc;GACf;EAGDC,OAAO;GACL,IAAI;GACJ,0BAA0B;GAC3B;EACDC,QAAQ;GACN,IAAI;GACJ,0BAA0B;GAC3B;EAGDC,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,cAAc;GACd,YAAY;GACZ,eAAe;GAChB;EACDC,MAAM;EAGNC,WAAW;EAOXC,WAAW;GACT,IAAI;GACJ,yBAAyB;GACzB,0BAA0B;GAC1B,wBAAwB;GACxB,2BAA2B;GAC5B;EACDC,YAAY;GACV,IAAI;GACJ,kBAAkB;GACpB;EACF;CACD,CAAC;AAGF,MAAMC,uBAAuB9D,MAAM;CACjC2C,IAAI;CACJC,QAAQ;EACNE,UAAU;EAGVS,OAAO;GACL,IAAI;GACJQ,YAAY,GAAGzB,cAAa;GAC5B,yBAAyB;GAC1B;EACDkB,QAAQ;GACN,IAAI,GAAGlB,cAAa;GACpByB,YAAY;GACZ,0BAA0B;GAC3B;EAGDZ,KAAK;GACH,IAAI;GACJ,YAAY,sBAAsBZ,eAAc;GAChD,eAAe;GAChB;EACDc,QAAQ;GACN,IAAI;GACJ,eAAe,sBAAsBd,eAAc;GACnD,YAAY;GACb;EACDe,MAAM;GACJ,IAAI;GACJ,aAAa,sBAAsBf,eAAc;GACjD,cAAc;GACf;EACDa,OAAO;GACL,IAAI;GACJ,cAAc,sBAAsBb,eAAc;GAClD,aAAa;GACd;EAGDqB,WAAW;GACT,IAAI;GACJ,yBAAyB,sCAAsCtB,gBAAgBC,eAAc;GAC7F,0BAA0B,iCAAiCD,gBAAgBC,eAAc;GACzF,wBAAwB,sCAAsCD,gBAAgBC,eAAc;GAC5F,2BAA2B,iCAAiCD,gBAAgBC,eAAc;GAC3F;EAEDyB,QAAQ;GACN,IAAI;GACJD,YAAY;GACZE,UAAU;GACX;EACDC,aAAa;GACX,IAAI;GACJD,UAAU;GACX;EACDE,SAAS;EACTC,SAAS;EACTlB,WAAW;EAGXW,YAAY;GACV,IAAI;GACJ,kBAAkB;GACnB;EAEDQ,OAAO;GACLd,OAAO;IACL,IAAI;IACJQ,YAAY;IACZ,yBAAyB;IAC1B;GACDP,QAAQ;IACN,IAAI;IACJO,YAAY;IACZ,0BAA0B;IAC3B;GACDjB,UAAU;GACVwB,OAAO;IACL,IAAI;IACJP,YAAY;IACZE,UAAU;IACX;GACDP,MAAM;IACJ,IAAI;IACJ,0CAA0C;IAC3C;GACDD,QAAQ;GACRI,YAAY;GACZO,SAAS;IACP,IAAI;IACJ,kBAAkB;IACnB;GACDG,eAAe;GAChB;EAEDC,MAAM;GACJzB,SAAS;GACT0B,KAAK;GACLhB,QAAQ;GACRT,MAAM;IACJ,IAAI;IACJe,YAAY;IACb;GACDW,aAAa;IACX,IAAI;IACJX,YAAY;IACb;GACDY,UAAU;IACR,IAAI;IACJZ,YAAY;IACb;GACDR,OAAO;IACL,IAAI;IACJQ,YAAY;IACb;GACDP,QAAQ;IACN,IAAI;IACJO,YAAY;IACb;GACDO,OAAO;IACL,IAAI;IACJP,YAAY;IACb;GACDH,WAAW;IACT,IAAI;IACJG,YAAY;IACb;GACDjB,UAAU;GACVe,YAAY;GACb;EAEDe,UAAU;GACRC,QAAQ;GACRnB,MAAM;IACJ,IAAI;IACJ,4BAA4B;IAC5BO,UAAU;IACZ;GACF;EACF;CACD,CAAC;AAGF,MAAMa,kBAAkB9E,MAAM;CAC5B2C,IAAI;CACJC,QAAQ;EACNE,UAAU;EACVwB,OAAO;EAEPS,gBAAgB;EAChBf,QAAQ;EACRgB,SAAS;GACP,IAAI;GACJC,SAAS;GACV;EACDC,eAAe;GACb,IAAI;GACJD,SAAS;GACV;EACDpB,YAAY;EACd;CACD,CAAC;AAWF,SAAA+B,cAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACE,MAAA,EAAAX,MAAAC,YAAAC,MAAAE,WAAAE,OAAAC,kBAAoEE;CACpE,MAAA,EAAAG,MAAc9E,SAAS;CAEvB,MAAA+E,QAAc;EAAA3C,MACN0C,EAAE,0BAA0B,oBAAoB;EAAA7C,KACjD6C,EAAE,yBAAyB,mBAAmB;EAAA5C,OAC5C4C,EAAE,2BAA2B,qBAAqB;EAAA3C,QACjD2C,EAAE,4BAA4B,sBAAqB;EAC5D,CAACZ;CAAM,IAAAc;AAAA,KAAAJ,EAAA,OAAAK,OAAAC,IAAA,4BAAA,EAAA;AACmCF,OAAA,EAAE;AAAAJ,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAA7C,MAAA,EAAAO,YAAAC,cAAkCxF,SAASoF,GAAG;CAC9C,MAAA,EAAAK,YAAAC,mBAAuC3F,cAAc;CACrD,MAAA4F,eAAqBrB,SAAS,UAAUA,SAAS;CACjD,MAAAsB,iBAAuBzF,kBAAkBqF,WAAW,IAAI;CAGrD,MAAAK,KAAA7C;CACK,MAAA8C,KAAAzF,aAAWkF,YAAYE,YAAYf,WAAW;EAAAF,MAC1C;GAAAuB,SACKH;GAAc3C,YACX0C;GAAYxC,UACdoB;GAAUyB,SACXN;GAAcpB;GAAA,GAEpBE;GACJ;EAAAI;EAAAqB,UAES1B,aAAA2B,SAAA;EAA0BC,MAC9B;EAAW,oBACGR,eAAA,aAAA;EAAwC,cAC9CR;EAAKN,eACJN,aAAA2B,SAAArB;EAChB,CAAC;CAAA,IAAAuB;AAAA,KAAApB,EAAA,OAAAK,OAAAC,IAAA,4BAAA,EAAA;AAEFc,OAAA,oBAAA,SAAkB,gBAAA,UAAU;AAAApB,IAAA,KAAAoB;OAAAA,MAAApB,EAAA;CAAA,IAAAqB;AAAA,KAAArB,EAAA,OAAAT,YAAA;AAC3B8B,OAAA,CAAC9B,cACA,qBAAA;GAAkB,gBAAA;;IAChB,oBAAA,SAAkB,gBAAA,aAClB;wBAAA,SAAkB,gBAAA,aAClB;wBAAA,SAAkB,gBAAA,aAClB;wBAAA,SAAkB,gBAAA,aAClB;wBAAA,SAAkB,gBAAA,aACpB;;IACD;AAAAS,IAAA,KAAAT;AAAAS,IAAA,KAAAqB;OAAAA,MAAArB,EAAA;CAAA,IAAAsB;AAAA,KAAAtB,EAAA,OAAAa,MAAAb,EAAA,OAAAc,MAAAd,EAAA,OAAAqB,IAAA;AA3BHC,OAAA,qBAAC;GAAoB,GACfR;cAiBJM,IACCC;IASoB;AAAArB,IAAA,KAAAa;AAAAb,IAAA,KAAAc;AAAAd,IAAA,KAAAqB;AAAArB,IAAA,KAAAsB;OAAAA,MAAAtB,EAAA;AAAA,QA5BvBsB;;AAqGJ,SAAS0B,qBACPjG,WACA4D,cACAuC,WACA;AACA,SACGvC,eAAe5D,WAAWoG,cAAcpG,WAAWqG,kBACpDF;;AAIJ,SAASG,YACPtD,OACAuD,KACA;CACA,MAAME,gBAAgBvH,yBAAyB;CAC/C,MAAMwH,cAActH,uBAAuB;CAC3C,MAAMuH,aAAaxH,sBAAsB;AAEzC,KAAI,CAACsH,iBAAiB,CAACC,eAAe,CAACC,WACrC,OAAM,IAAIC,MACR,+GAED;CAGH,MAAM,EACJrE,OAAO,QACPmC,MAAMmC,UACNlC,MAAMmC,cACNlC,cAAc,KACdC,UAAU,KACVC,SACAC,cAAc,OACdC,cACAC,QAAQ8B,gBACR7B,gBAAgB,MAChBC,cACAC,eAAe4B,mBACf3B,gBAAgB,MAChBC,eAEAC,WAAW,OACXC,cAAcyB,sBACdxB,sBAAsB,OACtBC,oBACAC,aACAE,cACAC,gBACAC,gBACAC,UACAjG,QACA0C,MACA,GAAGyE,eACDlE;CAGJ,MAAM0B,OAAwBmC,aAAatB,WAAW,WAAW;CACjE,MAAM4B,eAAezC,SAAS;CAC9B,MAAM0C,gBAAgB1C,SAAS;CAI/B,MAAMU,gBAAgB4B,qBAAqBP,cAAcrB;CAEzD,MAAMkC,cAAc/I,gBAAgBgI,IAAI;CACxC,MAAMgB,sBAAsBzJ,OAAOgJ,aAAa;CAChD,MAAMlD,eAAerB,SAAS,UAAUA,SAAS;CAGjD,MAAM,EAAEiF,gBAAgBC,oBAAoBf;CAC5C,MAAM,EAAEgB,mBAAmBjB;CAC3B,MAAMkB,qBAAqB/D,eAAe4D,iBAAiBC;CAC3D,MAAMG,eAAerI,gBAAgBgD,KAAK;CAC1C,MAAMsF,oBAAoBnB,YAAYoB,WAAWF;CACjD,MAAMG,iBAAiBhD,cAAcpF,yBAAyB;CAC9D,MAAMqI,aAAanK,cAEf,CAACsJ,gBAAgBQ,qBAAqB,IAClCM,KAAKC,IACH,GACAP,qBACEE,oBACAH,iBACAK,eACH,GACDI,UACN;EACEhB;EACAQ;EACAE;EACAH;EACAK;EAEJ,CAAC;CAGD,MAAM,CAACK,gBAAgBC,qBAAqBtK,SAASmH,cAAc;CACnE,MAAMD,SAAS8B,kBAAkBqB;CACjC,MAAME,qBACJlD,iBAAiB,CAAC+B,gBAAgBR,WAAW4B;CAC/C,MAAM,CAACC,aAAaC,kBAAkB1K,SAAS;EAC7C2K,SAASzD;EACTqD;EACD,CAAC;AAGF,KAAIE,YAAYF,uBAAuBA,mBACrCG,gBAAe;EAAEC,SAASzD;EAAQqD;EAAoB,CAAC;CAEzD,MAAMK,eAAeL,qBAAqBE,YAAYE,UAAUzD;CAGhE,MAAM,CAAC2D,sBAAsBC,2BAC3B9K,SAAS0H,oBAAoB;CAC/B,MAAMqD,aAAa7B,wBAAwB2B;CAG3C,MAAM,CAACG,YAAYC,iBAAiBxK,gBAClCuH,kBAAkB,MAClB,KACD;CAGD,MAAM,CAACkD,YAAYC,iBAAiBnL,SAAS,MAAM;CACnD,MAAM,CAAC4G,MAAMwE,WAAWpL,eAAuB;AAU7C,SAAOuB,UARL,OAAOwH,iBAAiB,WACpBA,eACAiC,cAAc,OACZA,aACA,OAAOnE,gBAAgB,WACrBA,cACA,KAEoBC,SAASC,QAAQ;GAC/C;CAEF,MAAMuE,kBAAkB3K,cAAcwI,YAAYpK,iBAAiB;CAGnE,MAAMwM,cAAczL,cAEhBZ,YACE8C,QACA+F,kBAAkB,OAAO,EAAE,oBAAoBA,gBAAgB,GAAG,MAClEuD,gBACD,EACH;EAACA;EAAiBvD;EAAgB/F;EACpC,CAAC;CAID,MAAMwJ,cAAc1L,cAAc;AAChC,MAAI,OAAOiH,YAAY,SAAU,QAAOA;AACxC,MACE,OAAOA,YAAY,YACnB6C,qBAAqB,MACpB,CAACR,gBAAgB,CAACrC,QAAQ0E,MAAM,CAACC,SAAS,IAAI,EAE/C,QAAOjK,eAAesF,SAAS6C,mBAAmB;IAGnD;EAAC7C;EAAS6C;EAAoBR;EAAa,CAAC;CAG/C,MAAMuC,eAAe7L,cAAc;EACjC,MAAM8L,SAAmB,EAAE;AAC3B,MAAIJ,eAAe,KAAMI,QAAOC,KAAKL,YAAY;AACjD,MAAIM,OAAOC,SAAS9B,WAAW,CAAE2B,QAAOC,KAAK5B,WAAW;AACxD,SAAO2B,OAAOI,SAAS,IAAI9B,KAAK+B,IAAI,GAAGL,OAAO,GAAGxF;IAChD,CAACoF,aAAavB,WAAW,CAAC;CAG7B,MAAMiC,aAAaxM,aAChByM,UAAkB5K,UAAU4K,OAAOrF,SAASV,QAAWuF,aAAa,EACrE,CAAC7E,SAAS6E,aACZ,CAAC;CAED,MAAMS,qBAAqB1D,cAAc2D;CAEzC,MAAM,EAAEzH,cAAczE,QAAQ;EAC5BmM,cAAc;AACZ,OAAI,CAACtF,eAAeoC,aAAc;AAClC+B,iBAAc,KAAK;AACnBiB,sBAAmB,KAAK;;EAE1BG,OAAOC,GAAG;AACR,OAAI,CAACxF,eAAeoC,aAAc;GAElC,IAAIqD;AAEJ,OAAID,EAAEE,gBAAgB,YAAY;IAEhC,MAAMC,OAAOH,EAAEI,WAAW,KAAK;IAE/B,MAAMC,WAAWhH,eAAe2G,EAAEM,SAASN,EAAEO;IAC7C,MAAMC,YAAYxI,SAAS,WAAWA,SAAS,WAAW,KAAK;AAC/DiI,YAAQI,WAAWF,OAAOK;SAG1BP,SAAQ5G,eACJ2G,EAAEM,UAAUtI,SAAS,UAAU,KAAK,KACpCgI,EAAEO,UAAUvI,SAAS,WAAW,KAAK;AAG3C4G,YAAS6B,gBAAgBf,WAAWe,cAAcR,MAAM,CAAC;;EAE3DS,YAAY;AACV/B,iBAAc,MAAM;AACpBiB,sBAAmB,MAAM;AACzB,OAAIhD,gBAAgB,CAAC8B,WAAY;AAEjCE,YAAS6B,kBAAgB;IACvB,MAAME,YAAYjD,KAAKkD,MAAMlB,WAAWe,cAAY,CAAC;AAErDhG,mBAAekG,UAAU;AAEzBlC,kBAAckC,UAAU;AACxB,WAAOA;KACP;;EAEL,CAAC;AAIFxN,iBAAgB;AACd,MAAI6J,oBAAoB6D,YAAYtE,cAAc;AAChD,OACE,CAACK,gBACD,CAAClB,qBACCU,WAAW0E,kBAAkBD,SAASE,eACtC1H,cACA+D,mBACD,CAED;AAGFJ,uBAAoB6D,UAAUtE;AAC9B,OAAI,OAAOA,iBAAiB,YAAY,CAACmC,WACvCE,SAAQc,WAAWnD,aAAa,CAAC;;IAGpC;EACDA;EACAmC;EACAgB;EACA9C;EACAvD;EACA+D;EACAhB,WAAW0E;EACZ,CAAC;CAGF,MAAME,oBAAoB5N,qBAAqB;AAC7C,MACE,CAACsI,qBACCU,WAAW0E,kBAAkBD,SAASE,eACtC1H,cACA+D,mBACD,CAED;AAGFwB,WAASqC,SAAS;GAChB,MAAMC,UAAUxB,WAAWuB,KAAK;AAEhC,OAAIC,YAAYD,MAAM;AACpBxG,mBAAeiD,KAAKkD,MAAMM,QAAQ,CAAC;AACnCzC,kBAAcf,KAAKkD,MAAMM,QAAQ,CAAC;;AAGpC,UAAOA;IACP;GACF;AAEF/N,iBAAgB;AACd,MAAI,CAACyJ,gBAAgB,CAAC8B,cAActB,qBAAqB,GAAG;GAG1D,MAAM+D,QAAQC,4BAA4BJ,mBAAmB,CAAC;AAC9D,gBAAaK,qBAAqBF,MAAM;;IAEzC;EACDvE;EACA8B;EACAgB;EACAtC;EACA/D;EACA+C,WAAW0E;EACZ,CAAC;CASF,MAAMQ,qBAAqBlD,gBAAgBjE,SAAS,YAAYC,OAAO;CACvE,MAAMmH,qBAAqB7D,KAAKkD,MAC9BU,sBACG9G,eAAe8G,qBAAqB,IAAIlM,yBAAyB,GACrE;CAED,MAAM,EAAEoM,eAAeC,iBAAiBC,oBAAoBxF;CAC5D,MAAM,EAAEyF,YAAYxF;CAGpB,MAAMyF,cAAcrO,OAAegO,mBAAmB;AAItDlO,uBAAsB;AACpBmO,gBAAcxJ,MAAM4J,YAAYf,QAAQ;AAExC,eAAa;AACXY,mBAAgBzJ,KAAK;;IAEtB;EAACA;EAAMwJ;EAAeC;EAAgB,CAAC;AAI1CpO,uBAAsB;AACpB,MAAIuO,YAAYf,YAAYU,oBAAoB;AAC9CK,eAAYf,UAAUU;AACtBG,mBAAgB1J,MAAMuJ,mBAAmB;;IAE1C;EAACvJ;EAAMuJ;EAAoBG;EAAgB,CAAC;CAK/C,MAAMG,oBAAoBtO,OAAO,MAAM;CAEvC,MAAMuO,mBAAmB5O,aACtB6O,cAAuB;AACtB,MAAI,CAACA,WAAW;AACd,OAAIF,kBAAkBhB,QAAS;AAE/BgB,qBAAkBhB,UAAU;AAC5BmB,wBAAqB;AACnBH,sBAAkBhB,UAAU;KAC5B;;AAGJ/C,oBAAkBiE,UAAU;AAC5BnH,iBAAemH,UAAU;IAE3B,CAACnH,aACH,CAAC;CAGD,MAAMqH,gBAAgB/O,kBAAkB;AACtC,MAAI4H,cACFgH,kBAAiB,MAAM;IAExB,CAAChH,eAAegH,iBAAiB,CAAC;CAGrC,MAAM,EAAEI,yBAAyBhG;AAEjC/I,iBAAgB;AAEd,MAAI0J,iBAAiBnC,UAAUI,cAE7B,QADmBoH,2BAA2BJ,iBAAiB,MAAM,CAAC;IAGvE;EACDjF;EACAnC;EACAI;EACAoH;EACAJ;EACD,CAAC;CAMF,MAAMM,YAAY7O,OAAuB,KAAK;CAC9C,MAAM+O,eAAe/O,OAA8B,KAAK;CAGxD,MAAMgP,gBAAgBhP,OAAuB,KAAK;CAGlD,MAAMiP,eAAepP,qBAAqB;EACxC,MAAMqP,SACJF,cAAc1B,WACdyB,aAAazB,SAAS6B,cAAcC,iBACpC;AAEFJ,gBAAc1B,UAAU;AAExBuB,YAAUvB,UACRhE,iBAAiB8E,WAAW,CAACW,aAAazB,SAAS+B,SAASH,OAAO,GAC/DA,SACA;GACN;CAEF,MAAMI,cAAczP,qBAAqB;EACvC,MAAM0P,QAAQR,aAAazB;EAC3B,MAAMkC,SAASX,UAAUvB;EAEzB,MAAM4B,WAASK,OAAOJ,cAAcC;AAKpC,MACE,CAACG,SACD,CAACC,UACAN,aAAWM,UAAUN,aAAWO,kBAEjC;AAQF9O,wBAJE7B,uBAAuByQ,OAAO,EAAEI,UAAU,MAAM,CAAC,CAACC,UAAU,IAC5D9Q,uBAAuByQ,MAAM,CAACK,UAAU,EAGU,EAClDC,eAAe,MAChB,CAAC;GACF;CAIF,MAAMC,cAAcjQ,qBAAqB;EACvC,MAAM2P,WAASX,UAAUvB;EACzB,MAAMiC,UAAQR,aAAazB;AAE3BuB,YAAUvB,UAAU;AAEpB,MACE,CAAChE,iBACD,EAAEkG,oBAAkBpH,gBACpB,CAACoH,SAAOO,eACRP,aAAWA,SAAOL,cAAca,KAEhC;EAGF,MAAMd,WAASM,SAAOL,cAAcC;AAEpC,MACEF,YAAU,QACVA,aAAWM,SAAOL,cAAca,QAChC,CAACT,SAAOF,SAASH,SAAO,CAExB;AAGFvO,wBAAsB6O,UAAQ,EAAEK,eAAe,MAAM,CAAC;AACtDJ,sBAAoBD;AACpBf,uBAAqB;AACnBgB,uBAAoB;IACpB;GACF;AAEF3P,uBAAsB;AACpB,MAAIqH,OAAQ8H,eAAc;IACzB,CAAC9H,OAAO,CAAC;AAIZvH,iBAAgB;AACd,MAAI,CAACuH,OAAQ;AAEbmI,eAAa;AAEb,eAAaQ,aAAa;IACzB,CAAC3I,OAAO,CAAC;CAEZ,MAAM8I,yBAAyBtQ,aAC5B6O,gBAAuB;AACtBzD,0BAAwByD,YAAU;AAClC5G,uBAAqB4G,YAAU;IAEjC,CAAC5G,mBACH,CAAC;CAGD,MAAMsI,oBAAoBnQ,eACjB;EACLsH,cAAckH;EACdpH;EACD,GACD,CAACoH,kBAAkBpH,OACrB,CAAC;CAGD,MAAMgJ,0BAA0BpQ,eACvB;EACLsH,cAAc4I;EACd9I,QAAQ6D;EACT,GACD,CAACiF,wBAAwBjF,WAC3B,CAAC;CAED,MAAMoF,YAAYrQ,eACT;EACL0E;EACA4L,MAAMlF;EACN/H,YAAY0C;EAEZ,kBAAkBwB,iBAAiB8G;EACnC,GAAGzJ;EACJ,GACD;EAACF;EAAM0G;EAAYrF;EAAcwB;EAAe8G;EAASzJ;EAC3D,CAAC;CAGD,MAAM2L,aAAavQ,cAAc;EAC/B,MAAMwQ,QAAkB,EAAE;AAE1B,MAAIvJ,WAAW,KACbuJ,OAAMzE,KAAK,OAAO9E,YAAY,WAAW,GAAGA,QAAO,MAAOA,QAAQ;AAGpE,MAAI6C,qBAAqB,KAAKkC,OAAOC,SAAS9B,WAAW,CACvDqG,OAAMzE,KAAK,GAAG5B,WAAU,IAAK;AAG/B,MAAIqG,MAAMtE,WAAW,EAAG,QAAO5F;AAC/B,SAAOkK,MAAMtE,WAAW,IAAIsE,MAAM,KAAK,OAAOA,MAAMC,KAAK,KAAK,CAAA;IAC7D;EAACxJ;EAASkD;EAAYL;EAAmB,CAAC;CAE7C,MAAM4G,aAAa1Q,eACV;EACL,gBAAgB,GAAG8G,KAAI;EACvB,cAAc,OAAOE,YAAY,WAAW,GAAGA,QAAO,MAAOA;EAC7D,cAAcuJ;EACf,GACD;EAACzJ;EAAME;EAASuJ;EAClB,CAAC;CAGD,MAAMI,mBAAmB/Q,aACtBgR,MAA6BC,kBAA6C;AAEzE,EAACpH,YAAmD8D,UAAUqD;AAE9DC,kBAAgBD,KAAK;IAEvB,CAACnH,YACH,CAAC;CAGD,MAAMqH,kBAAkBlR,kBAAkB;EAGxC,MAAMqR,cAAc7E,YADlB,OAAOrF,gBAAgB,WAAWA,cAAciK,SAASjK,aAAa,GAAG,KAC/B,IAAI;AAChDuE,UAAQ2F,YAAY;AACpB9J,iBAAe8J,YAAY;AAC3B9F,gBAAc8F,YAAY;IACzB;EAAClK;EAAaqF;EAAYjF;EAAcgE;EAAc,CAAC;CAE1D,MAAM+F,sBACJC,YAAY,OACZN,oBACG;AAGH,SACE;GACGtH,iBAAiB,oBAAC,eAAY,UAAU0F,gBAAiB;GAEzD1F,iBACC,oBAAC;IACC,MAAM,EAAEhF,SARIgF,iBAAiB,CAAC4H,WAQA;IAC9B,QAAQ1J;IACR,eAAY;IACZ,SAASkH;KAEZ;GACD,oBAAC;IACC,MAAMiC,WAAgC;AAGpC,SAAIA,OAAM5B,cAAazB,UAAUqD;AACjCD,sBAAiBC,QAAMC,gBAAc;;IAEvC,GAAI1R,gBAAgBkK,YAAY,EAAEgI,YAAY,MAAM,CAAC;IACrD,MAAM;KAAE,GAAGhB;KAAWc;KAAW;IACjC,QAAQ1F;IACR,OAAOiF;IACP,aAAWhM;cAEX,oBAAC,mBAAmB;KAAS,OAAOyL;eAClC,oBAAC,sBAAoBhI,WAA6B;MACvB;KACjB;GACbjB,eACC,oBAAC;IACOxC;IACN,YAAY,CAACwC;IACb,MAAM;KACJoJ,MAAMlF;KACN+F;KACA,kBAAkB5J,iBAAiB8G;KACpC;IACUvJ;IACX,OAAO4L;IACP,eAAeI;KAElB;MACA;;AAKP,KAAIxH,aACF,QACE,oBAAC;EACC,QAAQ2B;EACOzD;EACf,iBAAiB0I,uBAAuB,MAAM;EAC9C,GAAIpI;YAEJ,oBAAC;GAAO,eAAe;GAAO,QAAQE;aACpC,oBAAC,mBAAmB;IAAS,OAAOoI;cAClC,oBAAC,sBAAoBjI,WAA6B;KACvB;IACvB;GACQ;AAKtB,KAAI,CAACW,WAAW4B,sBACd,QAAO;CAGT,MAAM4G,kBAAkBxI,WAAW0E,kBAAkBD;AAGrD,KAAIhG,cACF,QAAOjH,aACL,oBAAC;EACC,SAAS8G;EACT,gBAAgB;EAChB,WAAWyD,YAAYD,eAAe;GAAEC;GAASJ;GAAoB,CAAC;aAEpE,EAAEI,SAAAA,WAAS0G,WAAW7I,KAAKmI,sBAC3B,oBAAC;GAAsB,SAAShG;GAAoB0G;aACjDL,mBAAmB,CAACrG,WAASgG,gBAAc;IAE/C;GACiB,EACpBS,gBACD;AAIH,KAAI,CAAClK,OAAQ,QAAO;AAEpB,QAAO9G,aAAa4Q,mBAAmB,MAAM,EAAEI,gBAAgB;;AAIjE,IAAI5B,oBAAoC;AAIxC,SAAA8B,YAAAhM,IAAA;CAAA,MAAAJ,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAoM,aAAAjM;CAAuD,IAAAU;CAAA,IAAAM;AAAA,KAAApB,EAAA,OAAAqM,UAAA;AAC1DvL,aAAA;AACduL,YAAQlE,UAAWmE,SAAQrC;;AAC1B7I,OAAA,CAACiL,SAAS;AAAArM,IAAA,KAAAqM;AAAArM,IAAA,KAAAc;AAAAd,IAAA,KAAAoB;QAAA;AAAAN,OAAAd,EAAA;AAAAoB,OAAApB,EAAA;;AAFbrF,iBAAgBmG,IAEbM,GAAW;AAAA,QAEP;;AAGT,MAAMmL,eAAenS,WAAWiJ,YAAY;AAE5CkJ,aAAaC,cAAc"}
1	+ {"version":3,"file":"LayoutPanel.js","names":["getFocusableTreeWalker","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","mergeStyles","Styles","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","RefCallback","useCallback","useEffect","useEffectEvent","useLayoutEffect","useMemo","useRef","useState","useFocusRing","useHover","useMove","createPortal","useDebouncedValue","useI18n","mergeProps","useCombinedRefs","useLocalStorage","focusProgrammatically","extractStyles","DisplayTransition","Dialog","CubeDialogContainerProps","DialogContainer","LayoutContextReset","LayoutPanelContext","Side","useLayoutActionsContext","useLayoutRefsContext","useLayoutStateContext","LayoutPanelTransition","clampSize","getOppositeSide","resolveCssSize","HANDLER_WIDTH","HANDLER_OFFSET","RESIZABLE_INSET_OFFSET","PanelElement","as","qa","styles","container","position","display","hide","hidden","flow","overflow","boxSizing","top","right","bottom","left","width","height","border","fill","isolation","transform","transition","ResizeHandlerElement","horizontal","cursor","disabled","touchAction","padding","outline","Track","inset","outlineOffset","Drag","gap","gridColumns","gridRows","DragPart","radius","OverlayBackdrop","backdropFilter","opacity","visible","pointerEvents","ResizeHandlerProps","side","isDisabled","mods","Record","moveProps","ReturnType","style","onDoubleClick","ResizeHandler","props","$","_c","t","label","t0","Symbol","for","hoverProps","isHovered","focusProps","isFocusVisible","isHorizontal","localIsHovered","T0","t1","hovered","focused","tabIndex","undefined","role","t2","t3","t4","LayoutPanelMode","CubeLayoutPanelProps","mode","size","defaultSize","minSize","maxSize","isResizable","onSizeChange","isOpen","defaultIsOpen","onOpenChange","hasTransition","hideOnClose","isDismissable","overlayStyles","isDialog","isDialogOpen","defaultIsDialogOpen","onDialogOpenChange","dialogProps","Omit","dialogStyles","contentPadding","sizeStorageKey","children","matchesContainerSize","HTMLElement","dimension","offsetWidth","offsetHeight","LayoutPanel","ref","HTMLDivElement","layoutActions","layoutState","layoutRefs","Error","modeProp","providedSize","providedIsOpen","hasTransitionProp","providedIsDialogOpen","otherProps","isDialogMode","isOverlayMode","isStickyMode","combinedRef","prevProvidedSizeRef","containerWidth","containerHeight","minContentSize","containerDimension","oppositeSide","oppositePanelSize","panelSizes","ownInsetOffset","naturalMax","Math","max","Infinity","internalIsOpen","setInternalIsOpen","isTransitionActive","isPanelContainerReady","visualState","setVisualState","isShown","isPanelShown","internalIsDialogOpen","setInternalIsDialogOpen","dialogOpen","storedSize","setStoredSize","isDragging","setIsDragging","setSize","initialSize","extractedStyles","finalStyles","resolvedMax","trim","endsWith","effectiveMax","values","push","Number","isFinite","length","min","clampValue","value","setContextDragging","setDragging","onMoveStart","onMove","e","delta","pointerType","step","shiftKey","rawDelta","deltaX","deltaY","direction","currentSize","onMoveEnd","finalSize","round","current","panelContainerRef","parentElement","applyInlineBounds","prev","clamped","frame","requestAnimationFrame","cancelAnimationFrame","effectivePanelSize","effectiveInsetSize","registerPanel","unregisterPanel","updatePanelSize","isReady","lastSizeRef","closeRequestedRef","handleOpenChange","newIsOpen","queueMicrotask","handleDismiss","registerOverlayPanel","unregister","openerRef","Element","panelNodeRef","mountFocusRef","recordOpener","active","ownerDocument","activeElement","contains","moveFocusIn","panel","opener","lastReturnedFocus","target","tabbable","nextNode","preventScroll","returnFocus","isConnected","body","handleDialogOpenChange","panelContextValue","dialogPanelContextValue","panelMods","drag","maxSizeCss","parts","join","panelStyle","panelRefCallback","node","transitionRef","handleResetSize","resetSize","parseInt","clampedSize","renderPanelContent","offscreen","isHidden","showOverlay","eventProps","portalContainer","phase","isExiting","OpenerProbe","focusRef","document","_LayoutPanel","displayName"],"sources":["../../../../src/components/content/Layout/LayoutPanel.tsx"],"sourcesContent":["import { getFocusableTreeWalker } from '@react-aria/focus';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n mergeStyles,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n RefCallback,\n useCallback,\n useEffect,\n useEffectEvent,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport {\n mergeProps,\n useCombinedRefs,\n useLocalStorage,\n} from '../../../utils/react';\nimport { focusProgrammatically } from '../../../utils/react/programmaticFocus';\nimport { extractStyles } from '../../../utils/styles';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Dialog } from '../../overlays/Dialog';\nimport {\n CubeDialogContainerProps,\n DialogContainer,\n} from '../../overlays/Dialog/DialogContainer';\n\nimport {\n LayoutContextReset,\n LayoutPanelContext,\n Side,\n useLayoutActionsContext,\n useLayoutRefsContext,\n useLayoutStateContext,\n} from './LayoutContext';\nimport { LayoutPanelTransition } from './LayoutPanelTransition';\nimport { clampSize, getOppositeSide, resolveCssSize } from './utils';\n\n// Resize handler dimensions\nconst HANDLER_WIDTH = 9;\n// How far from panel edge to position handler's inner edge (centers the 3px track on the edge)\nconst HANDLER_OFFSET = 4;\n// Extra inset added for resizable panels (to accommodate handler grab area)\nconst RESIZABLE_INSET_OFFSET = 2;\n\nconst PanelElement = tasty({\n as: 'div',\n qa: 'LayoutPanel',\n styles: {\n container: 'panel / inline-size',\n position: 'absolute',\n display: 'flex',\n // A closed `hideOnClose` panel keeps its content mounted out of the layout.\n hide: {\n '': false,\n hidden: true,\n },\n flow: 'column',\n overflow: 'hidden',\n boxSizing: 'border-box',\n\n '$content-padding': '1x',\n // Auto-border size for sub-components (panels are always vertical)\n '$layout-border-size': '1bw',\n\n // Position based on side prop\n top: {\n '': 0,\n 'side=bottom': 'initial',\n },\n right: {\n '': 0,\n 'side=left': 'initial',\n },\n bottom: {\n '': 0,\n 'side=top': 'initial',\n },\n left: {\n '': 0,\n 'side=right': 'initial',\n },\n\n // Size handling with CSS-level min/max clamping\n width: {\n '': '$min-size $panel-size $max-size',\n 'side=top \| side=bottom': '100%',\n },\n height: {\n '': '100%',\n 'side=top \| side=bottom': '$min-size $panel-size $max-size',\n },\n\n // Visual styling\n border: {\n '': false,\n 'side=left': 'right',\n 'side=right': 'left',\n 'side=top': 'bottom',\n 'side=bottom': 'top',\n },\n fill: '#surface',\n // The stacking context the transform used to create: z-indexed content\n // stays inside the panel, below its resize handle and an overlay backdrop.\n isolation: 'isolate',\n\n // Transition styles - offscreen mod controls slide animation.\n // `none` at rest, not a zero translate: any transform makes the panel the\n // containing block of its fixed descendants (drag previews, popups), which\n // then position against the panel and are clipped by its overflow. `none`\n // still animates to and from the offscreen translate.\n transform: {\n '': 'none',\n 'offscreen & side=left': 'translateX(-100%)',\n 'offscreen & side=right': 'translateX(100%)',\n 'offscreen & side=top': 'translateY(-100%)',\n 'offscreen & side=bottom': 'translateY(100%)',\n },\n transition: {\n '': 'none',\n 'has-transition': 'transform $transition ease-out',\n },\n },\n});\n\n// Handler is positioned as sibling to panel (in Fragment), relative to Layout\nconst ResizeHandlerElement = tasty({\n qa: 'PanelResizeHandler',\n styles: {\n position: 'absolute',\n\n // Handler size\n width: {\n '': '100%',\n horizontal: `${HANDLER_WIDTH}px`,\n 'disabled & horizontal': '1bw',\n },\n height: {\n '': `${HANDLER_WIDTH}px`,\n horizontal: '100%',\n 'disabled & !horizontal': '1bw',\n },\n\n // Position handler with direct offset (no centering needed)\n top: {\n '': 0,\n 'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=bottom': 'initial',\n },\n bottom: {\n '': 0,\n 'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=top': 'initial',\n },\n left: {\n '': 0,\n 'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=right': 'initial',\n },\n right: {\n '': 0,\n 'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=left': 'initial',\n },\n\n // Offscreen transforms only (no centering needed with direct offset positioning)\n transform: {\n '': 'translateX(0)',\n 'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=bottom': `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n },\n\n cursor: {\n '': 'row-resize',\n horizontal: 'col-resize',\n disabled: 'not-allowed',\n },\n touchAction: {\n '': 'none',\n disabled: 'auto',\n },\n padding: 0,\n outline: 0,\n boxSizing: 'border-box',\n\n // Transition must match panel for synchronized animation\n transition: {\n '': 'theme',\n 'has-transition': 'transform $transition ease-out, theme',\n },\n\n Track: {\n width: {\n '': 'initial',\n horizontal: '3px',\n 'disabled & horizontal': '1px',\n },\n height: {\n '': '3px',\n horizontal: 'initial',\n 'disabled & !horizontal': '1px',\n },\n position: 'absolute',\n inset: {\n '': '3px 0',\n horizontal: '0 3px',\n disabled: '0 0',\n },\n fill: {\n '': '#border',\n '(hovered \| drag \| focused) & !disabled': '#purple-03',\n },\n border: 0,\n transition: 'theme',\n outline: {\n '': '1bw #primary-text.0',\n 'drag \| focused': '1bw #primary-text',\n },\n outlineOffset: 1,\n },\n\n Drag: {\n display: 'grid',\n gap: '2bw',\n border: 0,\n flow: {\n '': 'row',\n horizontal: 'column',\n },\n gridColumns: {\n '': '3px 3px 3px 3px 3px',\n horizontal: 'auto',\n },\n gridRows: {\n '': 'auto',\n horizontal: '3px 3px 3px 3px 3px',\n },\n width: {\n '': 'auto',\n horizontal: '1px',\n },\n height: {\n '': '1px',\n horizontal: 'auto',\n },\n inset: {\n '': '4px 50% auto auto',\n horizontal: '50% 4px auto auto',\n },\n transform: {\n '': 'translate(-50%, 0)',\n horizontal: 'translate(0, -50%)',\n },\n position: 'absolute',\n transition: 'theme',\n },\n\n DragPart: {\n radius: true,\n fill: {\n '': '#dark-03',\n 'hovered \| drag \| focused': '#primary-text',\n disabled: '#disabled-surface-text',\n },\n },\n },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n qa: 'PanelOverlay',\n styles: {\n position: 'absolute',\n inset: 0,\n // fill: '#white.2',\n backdropFilter: 'invert(.15)',\n cursor: 'pointer',\n opacity: {\n '': 0,\n visible: 1,\n },\n pointerEvents: {\n '': 'none',\n visible: 'auto',\n },\n transition: 'opacity .15s ease-out',\n },\n});\n\ninterface ResizeHandlerProps {\n side: Side;\n isDisabled?: boolean;\n mods?: Record<string, boolean>;\n moveProps: ReturnType<typeof useMove>['moveProps'];\n style?: Record<string, string \| number \| null \| undefined>;\n onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n const { t } = useI18n();\n // One key per side: a translated sentence can't take the side as a word.\n const label = {\n left: t('layout.resizeLeftPanel', 'Resize left panel'),\n top: t('layout.resizeTopPanel', 'Resize top panel'),\n right: t('layout.resizeRightPanel', 'Resize right panel'),\n bottom: t('layout.resizeBottomPanel', 'Resize bottom panel'),\n }[side];\n const { hoverProps, isHovered } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const isHorizontal = side === 'left' \|\| side === 'right';\n const localIsHovered = useDebouncedValue(isHovered, 150);\n\n return (\n <ResizeHandlerElement\n {...mergeProps(hoverProps, focusProps, moveProps, {\n mods: {\n hovered: localIsHovered,\n horizontal: isHorizontal,\n disabled: isDisabled,\n focused: isFocusVisible,\n side,\n ...mods,\n },\n style,\n tabIndex: isDisabled ? undefined : 0,\n role: 'separator',\n 'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n 'aria-label': label,\n onDoubleClick: isDisabled ? undefined : onDoubleClick,\n })}\n >\n <div data-element=\"Track\" />\n {!isDisabled && (\n <div data-element=\"Drag\">\n <div data-element=\"DragPart\" />\n <div data-element=\"DragPart\" />\n <div data-element=\"DragPart\" />\n <div data-element=\"DragPart\" />\n <div data-element=\"DragPart\" />\n </div>\n )}\n </ResizeHandlerElement>\n );\n}\n\n/** Panel rendering mode /\nexport type LayoutPanelMode = 'default' \| 'sticky' \| 'overlay' \| 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n /* Side of the layout where panel is positioned /\n side: Side;\n /\n Panel rendering mode:\n * - `default`: Standard panel that pushes content aside\n * - `sticky`: Panel floats over content without pushing it\n * - `overlay`: Panel with dismissable backdrop overlay; focus moves into it\n * when it opens and back to the opener when it closes\n * - `dialog`: Panel renders as a modal dialog\n /\n mode?: LayoutPanelMode;\n /* Panel size (width for left/right, height for top/bottom) - controlled /\n size?: number \| string;\n /* Default panel size for uncontrolled state /\n defaultSize?: number \| string;\n /* Minimum panel size /\n minSize?: number \| string;\n /* Maximum panel size /\n maxSize?: number \| string;\n /* Enable resize functionality /\n isResizable?: boolean;\n /* Size change callback /\n onSizeChange?: (size: number) => void;\n /* Controlled open state /\n isOpen?: boolean;\n /* Default open state /\n defaultIsOpen?: boolean;\n /* Open state change callback /\n onOpenChange?: (isOpen: boolean) => void;\n /* Enable slide transition on open/close /\n hasTransition?: boolean;\n /\n Hide the closed panel instead of unmounting its content, so the content\n * keeps its state (an unsent draft, scroll position, a request in flight)\n * until the panel reopens. A hidden panel takes no space and no focus.\n * The content mounts once, even while the panel starts closed, so mount\n * effects and a native `autoFocus` do not run again on reopen. Content that\n * mounts while closed is hidden: `autoFocus` does nothing and measurements\n * read zero until the panel opens. Not used in dialog mode.\n * Default: false\n /\n hideOnClose?: boolean;\n /\n Whether the panel can be dismissed by clicking the overlay (overlay mode), pressing Escape,\n * or, in overlay mode, moving focus into the main content.\n * Only applies to `overlay` and `dialog` modes. Default: true\n /\n isDismissable?: boolean;\n /* Styles for the overlay backdrop in overlay mode /\n overlayStyles?: Styles;\n /\n @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n /\n isDialog?: boolean;\n /* Controlled dialog open state (used with mode=\"dialog\") /\n isDialogOpen?: boolean;\n /* Default dialog open state /\n defaultIsDialogOpen?: boolean;\n /* Dialog open state change callback /\n onDialogOpenChange?: (isOpen: boolean) => void;\n /* Props passed to DialogContainer when in dialog mode /\n dialogProps?: Omit<\n CubeDialogContainerProps,\n 'isDismissable' \| 'onDismiss' \| 'isOpen'\n >;\n /* Styles for the Dialog root in dialog mode, separate from inline panel styles. /\n dialogStyles?: Styles;\n /* Padding for content areas inside the panel. Default: '1x' /\n contentPadding?: Styles['padding'];\n /* localStorage key for persisting panel size. When provided, size is stored and restored across instances. /\n sizeStorageKey?: string;\n /* Styles for the panel /\n styles?: Styles;\n children?: ReactNode;\n}\n\nfunction matchesContainerSize(\n container: HTMLElement \| null \| undefined,\n isHorizontal: boolean,\n dimension: number,\n) {\n return (\n (isHorizontal ? container?.offsetWidth : container?.offsetHeight) ===\n dimension\n );\n}\n\nfunction LayoutPanel(\n props: CubeLayoutPanelProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const layoutActions = useLayoutActionsContext();\n const layoutState = useLayoutStateContext();\n const layoutRefs = useLayoutRefsContext();\n\n if (!layoutActions \|\| !layoutState \|\| !layoutRefs) {\n throw new Error(\n 'Layout.Panel must be used within a Layout component. ' +\n 'Ensure your panel is rendered inside a <Layout> parent.',\n );\n }\n\n const {\n side = 'left',\n mode: modeProp,\n size: providedSize,\n defaultSize = 280,\n minSize = 200,\n maxSize,\n isResizable = false,\n onSizeChange,\n isOpen: providedIsOpen,\n defaultIsOpen = true,\n onOpenChange,\n hasTransition: hasTransitionProp,\n hideOnClose = false,\n isDismissable = true,\n overlayStyles,\n // Deprecated prop - use mode=\"dialog\" instead\n isDialog = false,\n isDialogOpen: providedIsDialogOpen,\n defaultIsDialogOpen = false,\n onDialogOpenChange,\n dialogProps,\n dialogStyles,\n contentPadding,\n sizeStorageKey,\n children,\n styles,\n mods,\n ...otherProps\n } = props;\n\n // Resolve mode from prop or deprecated isDialog\n const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n const isDialogMode = mode === 'dialog';\n const isOverlayMode = mode === 'overlay';\n const isStickyMode = mode === 'sticky';\n\n // Use prop value if provided, otherwise fall back to context value\n const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n const combinedRef = useCombinedRefs(ref);\n const prevProvidedSizeRef = useRef(providedSize);\n const isHorizontal = side === 'left' \|\| side === 'right';\n\n // Natural boundary computation\n const { containerWidth, containerHeight } = layoutState;\n const { minContentSize } = layoutActions;\n const containerDimension = isHorizontal ? containerWidth : containerHeight;\n const oppositeSide = getOppositeSide(side);\n const oppositePanelSize = layoutState.panelSizes[oppositeSide];\n const ownInsetOffset = isResizable ? RESIZABLE_INSET_OFFSET : 0;\n const naturalMax = useMemo(\n () =>\n !isDialogMode && containerDimension > 0\n ? Math.max(\n 0,\n containerDimension -\n oppositePanelSize -\n minContentSize -\n ownInsetOffset,\n )\n : Infinity,\n [\n isDialogMode,\n containerDimension,\n oppositePanelSize,\n minContentSize,\n ownInsetOffset,\n ],\n );\n\n // Panel open state\n const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n const isOpen = providedIsOpen ?? internalIsOpen;\n const isTransitionActive =\n hasTransition && !isDialogMode && layoutRefs.isPanelContainerReady;\n const [visualState, setVisualState] = useState({\n isShown: isOpen,\n isTransitionActive,\n });\n\n // A newly mounted DisplayTransition starts at the requested visibility.\n if (visualState.isTransitionActive !== isTransitionActive) {\n setVisualState({ isShown: isOpen, isTransitionActive });\n }\n const isPanelShown = isTransitionActive ? visualState.isShown : isOpen;\n\n // Dialog open state\n const [internalIsDialogOpen, setInternalIsDialogOpen] =\n useState(defaultIsDialogOpen);\n const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;\n\n // Persistent size storage\n const [storedSize, setStoredSize] = useLocalStorage<number \| null>(\n sizeStorageKey ?? null,\n null,\n );\n\n // Resize state\n const [isDragging, setIsDragging] = useState(false);\n const [size, setSize] = useState<number>(() => {\n const initialSize =\n typeof providedSize === 'number'\n ? providedSize\n : storedSize != null\n ? storedSize\n : typeof defaultSize === 'number'\n ? defaultSize\n : 280;\n\n return clampSize(initialSize, minSize, maxSize);\n });\n\n const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n\n // Merge styles with contentPadding support\n const finalStyles = useMemo(\n () =>\n mergeStyles(\n styles,\n contentPadding != null ? { '$content-padding': contentPadding } : null,\n extractedStyles,\n ),\n [extractedStyles, contentPadding, styles],\n );\n\n // Resolve user's maxSize to pixels for JS-level clamping.\n // Percentage bounds belong to the inline host, not the dialog's host.\n const resolvedMax = useMemo(() => {\n if (typeof maxSize === 'number') return maxSize;\n if (\n typeof maxSize === 'string' &&\n containerDimension > 0 &&\n (!isDialogMode \|\| !maxSize.trim().endsWith('%'))\n ) {\n return resolveCssSize(maxSize, containerDimension);\n }\n return undefined;\n }, [maxSize, containerDimension, isDialogMode]);\n\n // Effective max combines user's maxSize with natural boundary\n const effectiveMax = useMemo(() => {\n const values: number[] = [];\n if (resolvedMax != null) values.push(resolvedMax);\n if (Number.isFinite(naturalMax)) values.push(naturalMax);\n return values.length > 0 ? Math.min(...values) : undefined;\n }, [resolvedMax, naturalMax]);\n\n // Clamp size to min/max constraints (including natural boundaries)\n const clampValue = useCallback(\n (value: number) => clampSize(value, minSize, undefined, effectiveMax),\n [minSize, effectiveMax],\n );\n\n const setContextDragging = layoutActions.setDragging;\n\n const { moveProps } = useMove({\n onMoveStart() {\n if (!isResizable \|\| isDialogMode) return;\n setIsDragging(true);\n setContextDragging(true);\n },\n onMove(e) {\n if (!isResizable \|\| isDialogMode) return;\n\n let delta: number;\n\n if (e.pointerType === 'keyboard') {\n // Keyboard resize: 10px per step, 50px with Shift\n const step = e.shiftKey ? 50 : 10;\n // For keyboard, deltaX/deltaY are direction indicators (-1, 0, 1)\n const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n const direction = side === 'right' \|\| side === 'bottom' ? -1 : 1;\n delta = rawDelta step * direction;\n } else {\n // Pointer resize: use exact delta values\n delta = isHorizontal\n ? e.deltaX * (side === 'right' ? -1 : 1)\n : e.deltaY * (side === 'bottom' ? -1 : 1);\n }\n\n setSize((currentSize) => clampValue(currentSize + delta));\n },\n onMoveEnd() {\n setIsDragging(false);\n setContextDragging(false);\n if (isDialogMode && !isDragging) return;\n // Round to integer on release and notify parent\n setSize((currentSize) => {\n const finalSize = Math.round(clampValue(currentSize));\n // Call onSizeChange synchronously to ensure parent state is updated\n onSizeChange?.(finalSize);\n // Persist to localStorage if key is provided\n setStoredSize(finalSize);\n return finalSize;\n });\n },\n });\n\n // Sync provided size with internal state (only when providedSize actually changes)\n // This prevents resetting size when only isDragging changes (which would cause a flash)\n useEffect(() => {\n if (prevProvidedSizeRef.current !== providedSize) {\n if (\n !isDialogMode &&\n !matchesContainerSize(\n layoutRefs.panelContainerRef.current?.parentElement,\n isHorizontal,\n containerDimension,\n )\n ) {\n return;\n }\n\n prevProvidedSizeRef.current = providedSize;\n if (typeof providedSize === 'number' && !isDragging) {\n setSize(clampValue(providedSize));\n }\n }\n }, [\n providedSize,\n isDragging,\n clampValue,\n isDialogMode,\n isHorizontal,\n containerDimension,\n layoutRefs.panelContainerRef,\n ]);\n\n // Dialogs retain inline size; only inline panels follow the host's bounds.\n const applyInlineBounds = useEffectEvent(() => {\n if (\n !matchesContainerSize(\n layoutRefs.panelContainerRef.current?.parentElement,\n isHorizontal,\n containerDimension,\n )\n ) {\n return;\n }\n\n setSize((prev) => {\n const clamped = clampValue(prev);\n\n if (clamped !== prev) {\n onSizeChange?.(Math.round(clamped));\n setStoredSize(Math.round(clamped));\n }\n\n return clamped;\n });\n });\n\n useEffect(() => {\n if (!isDialogMode && !isDragging && containerDimension > 0) {\n // In an iframe ResizeObserver can precede responsive mode delivery.\n // Let that mode settle before shrinking and persisting the inline size.\n const frame = requestAnimationFrame(() => applyInlineBounds());\n return () => cancelAnimationFrame(frame);\n }\n }, [\n isDialogMode,\n isDragging,\n clampValue,\n containerDimension,\n isHorizontal,\n layoutRefs.panelContainerRef,\n ]);\n\n // Register panel with layout context\n // Include handler outside portion (minus border overlap) for proper content inset\n // In sticky, overlay, and dialog modes, panel doesn't push content, so size is 0\n // NOTE: We intentionally use `size` (not `clampValue(size)`) here to avoid a feedback\n // loop. `clampValue` depends on the opposite panel's context size, so clamping here\n // would create a period-2 oscillation through shared context. CSS --max-size handles\n // visual clamping immediately; the auto-shrink effect converges `size` state.\n const effectivePanelSize = isPanelShown && mode === 'default' ? size : 0;\n const effectiveInsetSize = Math.round(\n effectivePanelSize +\n (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0),\n );\n\n const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;\n const { isReady } = layoutState;\n\n // Track the last reported size to prevent unnecessary updates\n const lastSizeRef = useRef<number>(effectiveInsetSize);\n\n // Register on mount, unregister on unmount\n // Using useLayoutEffect ensures registration happens before browser paint\n useLayoutEffect(() => {\n registerPanel(side, lastSizeRef.current);\n\n return () => {\n unregisterPanel(side);\n };\n }, [side, registerPanel, unregisterPanel]);\n\n // Update size when it changes (after initial mount)\n // Using useLayoutEffect ensures size updates happen before browser paint\n useLayoutEffect(() => {\n if (lastSizeRef.current !== effectiveInsetSize) {\n lastSizeRef.current = effectiveInsetSize;\n updatePanelSize(side, effectiveInsetSize);\n }\n }, [side, effectiveInsetSize, updatePanelSize]);\n\n // One close per task: a consumer that moves focus into the main content in\n // `onOpenChange(false)` would otherwise dismiss the still-registered panel\n // a second time.\n const closeRequestedRef = useRef(false);\n\n const handleOpenChange = useCallback(\n (newIsOpen: boolean) => {\n if (!newIsOpen) {\n if (closeRequestedRef.current) return;\n\n closeRequestedRef.current = true;\n queueMicrotask(() => {\n closeRequestedRef.current = false;\n });\n }\n\n setInternalIsOpen(newIsOpen);\n onOpenChange?.(newIsOpen);\n },\n [onOpenChange],\n );\n\n // Dismiss handler for overlay mode (click on overlay)\n const handleDismiss = useCallback(() => {\n if (isDismissable) {\n handleOpenChange(false);\n }\n }, [isDismissable, handleOpenChange]);\n\n // Register overlay panel with Layout context for coordinated dismissal\n const { registerOverlayPanel } = layoutActions;\n\n useEffect(() => {\n // Only register if in overlay mode, open, and dismissable\n if (isOverlayMode && isOpen && isDismissable) {\n const unregister = registerOverlayPanel(() => handleOpenChange(false));\n return unregister;\n }\n }, [\n isOverlayMode,\n isOpen,\n isDismissable,\n registerOverlayPanel,\n handleOpenChange,\n ]);\n\n // Overlay focus: move into the panel on open, back to the opener on close.\n // Declared after the registration effect on purpose: its cleanup then runs\n // after the panel unregisters, so a restore into the main content dismisses\n // nothing.\n const openerRef = useRef<Element \| null>(null);\n const panelNodeRef = useRef<HTMLDivElement \| null>(null);\n // Focus as the panel shows (its contents may mount now), before a native\n // `autoFocus` inside them moves it (see OpenerProbe).\n const mountFocusRef = useRef<Element \| null>(null);\n\n // A panel open on the Layout's first render leaves page focus alone.\n const recordOpener = useEffectEvent(() => {\n const active =\n mountFocusRef.current ??\n panelNodeRef.current?.ownerDocument.activeElement ??\n null;\n\n mountFocusRef.current = null;\n\n openerRef.current =\n isOverlayMode && isReady && !panelNodeRef.current?.contains(active)\n ? active\n : null;\n });\n\n const moveFocusIn = useEffectEvent(() => {\n const panel = panelNodeRef.current;\n const opener = openerRef.current;\n\n const active = panel?.ownerDocument.activeElement;\n\n // Focus already moved elsewhere as the panel opened, such as to a field\n // with `autoFocus` inside it: leave it there. Focus another overlay panel just\n // returned, as it closed in the same commit, does not count.\n if (\n !panel \|\|\n !opener \|\|\n (active !== opener && active !== lastReturnedFocus)\n ) {\n return;\n }\n\n const target =\n getFocusableTreeWalker(panel, { tabbable: true }).nextNode() ??\n getFocusableTreeWalker(panel).nextNode();\n\n // The panel enters translated offscreen, so focus must not scroll.\n focusProgrammatically(target as HTMLElement \| null, {\n preventScroll: true,\n });\n });\n\n // Return focus only if it is still in the panel or was lost with it; focus\n // the user or the consumer moved elsewhere stays there.\n const returnFocus = useEffectEvent(() => {\n const opener = openerRef.current;\n const panel = panelNodeRef.current;\n\n openerRef.current = null;\n\n if (\n !isOverlayMode \|\|\n !(opener instanceof HTMLElement) \|\|\n !opener.isConnected \|\|\n opener === opener.ownerDocument.body\n ) {\n return;\n }\n\n const active = opener.ownerDocument.activeElement;\n\n if (\n active != null &&\n active !== opener.ownerDocument.body &&\n !panel?.contains(active)\n ) {\n return;\n }\n\n focusProgrammatically(opener, { preventScroll: true });\n lastReturnedFocus = opener;\n queueMicrotask(() => {\n lastReturnedFocus = null;\n });\n });\n\n useLayoutEffect(() => {\n if (isOpen) recordOpener();\n }, [isOpen]);\n\n // Passive, so a menu item that refocuses itself while closing its menu has\n // done so before focus moves in.\n useEffect(() => {\n if (!isOpen) return;\n\n moveFocusIn();\n\n return () => returnFocus();\n }, [isOpen]);\n\n const handleDialogOpenChange = useCallback(\n (newIsOpen: boolean) => {\n setInternalIsDialogOpen(newIsOpen);\n onDialogOpenChange?.(newIsOpen);\n },\n [onDialogOpenChange],\n );\n\n // Panel context value for child components (like LayoutPanelHeader)\n const panelContextValue = useMemo(\n () => ({\n onOpenChange: handleOpenChange,\n isOpen,\n }),\n [handleOpenChange, isOpen],\n );\n\n // Dialog mode context value - uses dialog state instead of panel state\n const dialogPanelContextValue = useMemo(\n () => ({\n onOpenChange: handleDialogOpenChange,\n isOpen: dialogOpen,\n }),\n [handleDialogOpenChange, dialogOpen],\n );\n\n const panelMods = useMemo(\n () => ({\n side,\n drag: isDragging,\n horizontal: isHorizontal,\n // Only enable transition after layout is ready to prevent initial animation\n 'has-transition': hasTransition && isReady,\n ...mods,\n }),\n [side, isDragging, isHorizontal, hasTransition, isReady, mods],\n );\n\n // Build --max-size CSS variable combining user maxSize and natural boundary\n const maxSizeCss = useMemo(() => {\n const parts: string[] = [];\n\n if (maxSize != null) {\n parts.push(typeof maxSize === 'number' ? `${maxSize}px` : maxSize);\n }\n\n if (containerDimension > 0 && Number.isFinite(naturalMax)) {\n parts.push(`${naturalMax}px`);\n }\n\n if (parts.length === 0) return undefined;\n return parts.length === 1 ? parts[0] : `min(${parts.join(', ')})`;\n }, [maxSize, naturalMax, containerDimension]);\n\n const panelStyle = useMemo(\n () => ({\n '--panel-size': `${size}px`,\n '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n '--max-size': maxSizeCss,\n }),\n [size, minSize, maxSizeCss],\n );\n\n // Combine refs for panel element\n const panelRefCallback = useCallback(\n (node: HTMLDivElement \| null, transitionRef?: RefCallback<HTMLElement>) => {\n // Update the combined ref\n (combinedRef as { current: HTMLDivElement \| null }).current = node;\n // Call transition ref if provided\n transitionRef?.(node);\n },\n [combinedRef],\n );\n\n // Reset to default size on double-click\n const handleResetSize = useCallback(() => {\n const resetSize =\n typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n const clampedSize = clampValue(resetSize \|\| 280);\n setSize(clampedSize);\n onSizeChange?.(clampedSize);\n setStoredSize(clampedSize);\n }, [defaultSize, clampValue, onSizeChange, setStoredSize]);\n\n // `isHidden` keeps the element tree of an open panel, so content never remounts.\n // Without a transition, a rendered closed panel is a hidden one.\n const renderPanelContent = (\n offscreen = false,\n transitionRef?: RefCallback<HTMLElement>,\n isHidden = !isOpen,\n ) => {\n const showOverlay = isOverlayMode && !offscreen;\n\n return (\n <>\n {/* Mounted only while shown, so an open from hidden reads live focus. /}\n {isOverlayMode && !isHidden && <OpenerProbe focusRef={mountFocusRef} />}\n {/ Overlay backdrop for overlay mode */}\n {isOverlayMode && !isHidden && (\n <OverlayBackdrop\n mods={{ visible: showOverlay }}\n styles={overlayStyles}\n aria-hidden=\"true\"\n onClick={handleDismiss}\n />\n )}\n <PanelElement\n ref={(node: HTMLDivElement \| null) => {\n // Kept after detach: StrictMode detaches refs before it replays\n // the effects that still need the panel.\n if (node) panelNodeRef.current = node;\n panelRefCallback(node, transitionRef);\n }}\n {...filterBaseProps(otherProps, { eventProps: true })}\n mods={{ ...panelMods, offscreen, hidden: isHidden }}\n styles={finalStyles}\n style={panelStyle}\n data-side={side}\n >\n <LayoutPanelContext.Provider value={panelContextValue}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </LayoutPanelContext.Provider>\n </PanelElement>\n {isResizable && !isHidden && (\n <ResizeHandler\n side={side}\n isDisabled={!isResizable}\n mods={{\n drag: isDragging,\n offscreen,\n 'has-transition': hasTransition && isReady,\n }}\n moveProps={moveProps}\n style={panelStyle}\n onDoubleClick={handleResetSize}\n />\n )}\n </>\n );\n };\n\n // Dialog mode - uses its own portal via DialogContainer\n if (isDialogMode) {\n return (\n <DialogContainer\n isOpen={dialogOpen}\n isDismissable={isDismissable}\n onDismiss={() => handleDialogOpenChange(false)}\n {...dialogProps}\n >\n <Dialog isDismissable={false} styles={dialogStyles}>\n <LayoutPanelContext.Provider value={dialogPanelContextValue}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </LayoutPanelContext.Provider>\n </Dialog>\n </DialogContainer>\n );\n }\n\n // Wait for portal container to be ready before rendering\n if (!layoutRefs.isPanelContainerReady) {\n return null;\n }\n\n const portalContainer = layoutRefs.panelContainerRef.current!;\n\n // Panel with transition - portal to panel container\n if (hasTransition) {\n return createPortal(\n <DisplayTransition\n isShown={isOpen}\n animateOnMount={false}\n exposeUnmounted={hideOnClose}\n onToggle={(isShown) => setVisualState({ isShown, isTransitionActive })}\n >\n {({ phase, isShown, isExiting, ref: transitionRef }) => {\n const isHidden = phase === 'unmounted';\n\n return (\n <LayoutPanelTransition\n isShown={isShown}\n isExiting={isExiting}\n isHidden={isHidden}\n >\n {renderPanelContent(!isShown, transitionRef, isHidden)}\n </LayoutPanelTransition>\n );\n }}\n </DisplayTransition>,\n portalContainer,\n );\n }\n\n // Simple panel (no transition) - portal to panel container\n if (!isOpen && !hideOnClose) return null;\n\n return createPortal(renderPanelContent(false), portalContainer);\n}\n\n// Focus another overlay panel returned in the current task.\nlet lastReturnedFocus: Element \| null = null;\n\n// Rendered before the panel's contents, so its layout effect reads focus\n// before React applies a native `autoFocus` inside them.\nfunction OpenerProbe({ focusRef }: { focusRef: { current: Element \| null } }) {\n useLayoutEffect(() => {\n focusRef.current = document.activeElement;\n }, [focusRef]);\n\n return null;\n}\n\nconst _LayoutPanel = forwardRef(LayoutPanel);\n\n_LayoutPanel.displayName = 'Layout.Panel';\n\nexport { _LayoutPanel as LayoutPanel };\n"],"mappings":"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"}

package/dist/components/content/Layout/LayoutPanelHeader.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/content/Layout/LayoutPanelTransition.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { LayoutPanelTransitionContext, useLayoutRefsContext } from "./LayoutContext.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useLayoutEffect, useState } from "react";
@@ -7,48 +7,52 @@ import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/components/content/Layout/LayoutPanelTransition.tsx
 /** Receives live visibility from DisplayTransition, even with preserved children. */
 function LayoutPanelTransition(t0) {
-	const $ = c(20);
-	const { isShown, isExiting, children } = t0;
+	const $ = c(21);
+	const { isShown, isExiting, isHidden: t1, children } = t0;
+	const isHidden = t1 === void 0 ? false : t1;
 	const registerPanelTransition = useContext(LayoutPanelTransitionContext)?.registerPanelTransition;
 	const panelContainerRef = useLayoutRefsContext()?.panelContainerRef;
-	const t1 = !isShown || isExiting;
-	let t2;
-	if ($[0] !== isExiting || $[1] !== isShown || $[2] !== t1) {
-		t2 = {
+	const t2 = !isHidden && (!isShown || isExiting);
+	let t3;
+	if ($[0] !== isExiting || $[1] !== isHidden || $[2] !== isShown || $[3] !== t2) {
+		t3 = {
 			isShown,
 			isExiting,
-			isClipping: t1
+			isHidden,
+			isClipping: t2
 		};
 		$[0] = isExiting;
-		$[1] = isShown;
-		$[2] = t1;
+		$[1] = isHidden;
+		$[2] = isShown;
 		$[3] = t2;
-	} else t2 = $[3];
-	const [state, setState] = useState(t2);
-	if (state.isShown !== isShown || state.isExiting !== isExiting) setState({
+		$[4] = t3;
+	} else t3 = $[4];
+	const [state, setState] = useState(t3);
+	if (state.isShown !== isShown || state.isExiting !== isExiting || state.isHidden !== isHidden) setState({
 		isShown,
 		isExiting,
-		isClipping: true
+		isHidden,
+		isClipping: !isHidden
 	});
-	let t3;
 	let t4;
-	if ($[4] !== registerPanelTransition || $[5] !== state.isClipping) {
-		t3 = () => {
+	let t5;
+	if ($[5] !== registerPanelTransition || $[6] !== state.isClipping) {
+		t4 = () => {
 			if (state.isClipping) return registerPanelTransition?.();
 		};
-		t4 = [state.isClipping, registerPanelTransition];
-		$[4] = registerPanelTransition;
-		$[5] = state.isClipping;
-		$[6] = t3;
+		t5 = [state.isClipping, registerPanelTransition];
+		$[5] = registerPanelTransition;
+		$[6] = state.isClipping;
 		$[7] = t4;
+		$[8] = t5;
 	} else {
-		t3 = $[6];
 		t4 = $[7];
+		t5 = $[8];
 	}
-	useLayoutEffect(t3, t4);
-	let t5;
-	if ($[8] !== isExiting || $[9] !== isShown || $[10] !== panelContainerRef?.current?.children || $[11] !== state.isClipping) {
-		t5 = () => {
+	useLayoutEffect(t4, t5);
+	let t6;
+	if ($[9] !== isExiting || $[10] !== isShown || $[11] !== panelContainerRef?.current?.children || $[12] !== state.isClipping) {
+		t6 = () => {
 			if (!isShown || isExiting || !state.isClipping) return;
 			let cancelled = false;
 			let frame;
@@ -69,34 +73,34 @@ function LayoutPanelTransition(t0) {
 				cancelAnimationFrame(frame);
 			};
 		};
-		$[8] = isExiting;
-		$[9] = isShown;
-		$[10] = panelContainerRef?.current?.children;
-		$[11] = state.isClipping;
-		$[12] = t5;
-	} else t5 = $[12];
-	let t6;
-	if ($[13] !== isExiting || $[14] !== isShown || $[15] !== panelContainerRef || $[16] !== state.isClipping) {
-		t6 = [
+		$[9] = isExiting;
+		$[10] = isShown;
+		$[11] = panelContainerRef?.current?.children;
+		$[12] = state.isClipping;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== isExiting || $[15] !== isShown || $[16] !== panelContainerRef || $[17] !== state.isClipping) {
+		t7 = [
 			isShown,
 			isExiting,
 			state.isClipping,
 			panelContainerRef
 		];
-		$[13] = isExiting;
-		$[14] = isShown;
-		$[15] = panelContainerRef;
-		$[16] = state.isClipping;
-		$[17] = t6;
-	} else t6 = $[17];
-	useLayoutEffect(t5, t6);
-	let t7;
-	if ($[18] !== children) {
-		t7 = /* @__PURE__ */ jsx(Fragment$1, { children });
-		$[18] = children;
-		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[14] = isExiting;
+		$[15] = isShown;
+		$[16] = panelContainerRef;
+		$[17] = state.isClipping;
+		$[18] = t7;
+	} else t7 = $[18];
+	useLayoutEffect(t6, t7);
+	let t8;
+	if ($[19] !== children) {
+		t8 = /* @__PURE__ */ jsx(Fragment$1, { children });
+		$[19] = children;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 function _temp4(animation_0) {
 	return animation_0.finished;

package/dist/components/content/Layout/LayoutPanelTransition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutPanelTransition.js","names":["ReactNode","useContext","useLayoutEffect","useState","LayoutPanelTransitionContext","useLayoutRefsContext","LayoutPanelTransition","t0","$","_c","isShown","isExiting","children","registerPanelTransition","panelContainerRef","t1","t2","isClipping","state","setState","t3","t4","t5","current","cancelled","frame","settle","animations","Array","from","flatMap","_temp","filter","_temp2","length","_temp3","Promise","allSettled","map","_temp4","then","requestAnimationFrame","cancelAnimationFrame","t6","t7","animation_0","animation","finished","CSSTransition","transitionProperty","playState","element","getAnimations"],"sources":["../../../../src/components/content/Layout/LayoutPanelTransition.tsx"],"sourcesContent":["import { ReactNode, useContext, useLayoutEffect, useState } from 'react';\n\nimport {\n LayoutPanelTransitionContext,\n useLayoutRefsContext,\n} from './LayoutContext';\n\n/** Receives live visibility from DisplayTransition, even with preserved children. */\nexport function LayoutPanelTransition({\n isShown,\n isExiting,\n children,\n}: {\n isShown: boolean;\n isExiting: boolean;\n children: ReactNode;\n}) {\n const registerPanelTransition = useContext(\n LayoutPanelTransitionContext,\n )?.registerPanelTransition;\n const panelContainerRef = useLayoutRefsContext()?.panelContainerRef;\n const [state, setState] = useState({\n isShown,\n isExiting,\n isClipping: !isShown \|\| isExiting,\n });\n\n // Contain the first offscreen frame, including exit preparation and reversal.\n if (state.isShown !== isShown \|\| state.isExiting !== isExiting) {\n setState({ isShown, isExiting, isClipping: ~~true~~ });\n }\n\n useLayoutEffect(() => {\n if (state.isClipping) return registerPanelTransition?.();\n }, [state.isClipping, registerPanelTransition]);\n\n useLayoutEffect(() => {\n if (!isShown \|\| isExiting \|\| !state.isClipping) return;\n\n let cancelled = false;\n let frame: number;\n const settle = () => {\n if (cancelled) return;\n\n // The Layout shares one clip, so wait for every direct panel and handle slide.\n // Descendant animations must not hold clipping.\n const animations = Array.from(panelContainerRef?.current?.children ?? [])\n .flatMap((element) => element.getAnimations?.() ?? [])\n .filter(\n (animation) =>\n animation instanceof CSSTransition &&\n animation.transitionProperty === 'transform' &&\n animation.playState !== 'finished' &&\n animation.playState !== 'idle',\n );\n\n if (!animations.length) {\n setState((current) => ({ ...current, isClipping: false }));\n return;\n }\n\n // Cancellation can replace a transition. Inspect the next frame before releasing.\n Promise.allSettled(\n animations.map((animation) => animation.finished),\n ).then(() => {\n if (!cancelled) frame = requestAnimationFrame(settle);\n });\n };\n\n frame = requestAnimationFrame(settle);\n return () => {\n cancelled = true;\n cancelAnimationFrame(frame);\n };\n }, [isShown, isExiting, state.isClipping, panelContainerRef]);\n\n return <>{children}</>;\n}\n"],"mappings":";;;;;;;;AAQA,SAAOM,sBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAA+B,MAAA,EAAAC,SAAAC,WAAAC,~~aAAAL~~;~~CASpC~~,~~MAAAM~~,~~0BAAgCZ~~,WAC9BG,6BACwB,~~EAAAS~~;CAC1B,MAAAC,~~oBAA0BT~~,sBAAyC,~~EAAAS~~;~~CAIrD~~,MAAAC,KAAA,~~CAACL~~,WAADC;~~CAAqB~~,~~IAAAK~~;AAAA,~~KAAAR~~,EAAA,OAAAG,aAAAH,EAAA,OAAAE,WAAAF,EAAA,~~OAAAO~~,IAAA;~~AAHAC~~,OAAA;~~GAAAN~~;GAAAC;~~GAAAM~~,~~YAGrBF~~;GACb;~~AAAAP~~,IAAA,KAAAG;AAAAH,IAAA,KAAAE;AAAAF,IAAA,~~KAAAO~~;~~AAAAP~~,IAAA,~~KAAAQ~~;OAAAA,~~MAAAR~~,EAAA;~~CAJD~~,MAAA,~~CAAAU~~,OAAAC,~~YAA0BhB~~,~~SAASa~~,~~GAIjC~~;AAGF,~~KAAIE~~,~~MAAKR~~,YAAaA,~~WAAWQ~~,~~MAAKP~~,cAAeA,~~UACnDQ~~,UAAS;~~EAAAT~~;EAAAC;~~EAAAM~~,~~YAAkC~~;~~EAAM~~,CAAC;~~CACnD~~,~~IAAAG~~;CAAA,IAAAC;AAAA,~~KAAAb~~,EAAA,~~OAAAK~~,~~2BAAAL~~,EAAA,~~OAAAU~~,MAAAD,YAAA;AAEeG,aAAA;AACd,OAAIF,MAAKD,WAAW,QAASJ,2BAA2B;;AACvDQ,OAAA,CAACH,MAAKD,YAAaJ,wBAAwB;~~AAAAL~~,IAAA,~~KAAAK~~;~~AAAAL~~,IAAA,~~KAAAU~~,MAAAD;~~AAAAT~~,IAAA,~~KAAAY~~;~~AAAAZ~~,IAAA,~~KAAAa~~;QAAA;AAAAD,~~OAAAZ~~,EAAA;~~AAAAa~~,~~OAAAb~~,EAAA;;AAF9CN,~~iBAAgBkB~~,IAEbC,GAA4C;CAAA,IAAAC;AAAA,~~KAAAd~~,EAAA,OAAAG,aAAAH,EAAA,~~OAAAE~~,WAAAF,EAAA,~~QAAAM~~,mBAAAS,~~SAAAX~~,~~YAAAJ~~,EAAA,~~QAAAU~~,MAAAD,YAAA;AAE/BK,aAAA;AACd,OAAI,~~CAACZ~~,WAADC,aAAA,~~CAA0BO~~,MAAKD,WAAW;GAE9C,IAAAO,YAAgB;GACZC,IAAAA;GACJ,MAAAC,eAAe;AACb,QAAIF,UAAS;IAIb,MAAAG,aAAmBC,MAAKC,KAAMf,mBAAiBS,~~SAAmBX~~,YAApC,EAA0C,CAAC,~~CAAAkB~~,QAC9DC,MAA6C,CAAAC,OAEpDC,OAKD;AAEH,QAAI,CAACN,WAAUO,QAAO;AACpBf,cAASgB,OAAiD;AAAA;;AAK5DC,YAAOC,WACLV,WAAUW,IAAKC,OACjB,CAAC,CAAAC,WAAM;AACL,SAAI,CAAChB,UAAWC,SAAQgB,sBAAsBf,OAAO;MACrD;;AAGJD,WAAQgB,sBAAsBf,OAAO;AAAhC,gBACE;AACLF,gBAAYA;AACZkB,yBAAqBjB,MAAM;;;~~AAE9BjB~~,IAAA,KAAAG;AAAAH,IAAA,~~KAAAE~~;AAAAF,IAAA,~~MAAAM~~,mBAAAS,~~SAAAX~~;~~AAAAJ~~,IAAA,~~MAAAU~~,MAAAD;~~AAAAT~~,IAAA,~~MAAAc~~;OAAAA,~~MAAAd~~,EAAA;CAAA,~~IAAAmC~~;AAAA,~~KAAAnC~~,EAAA,QAAAG,aAAAH,EAAA,QAAAE,WAAAF,EAAA,~~QAAAM~~,~~qBAAAN~~,EAAA,~~QAAAU~~,MAAAD,YAAA;AAAE0B,OAAA;~~GAACjC~~;GAASC;~~GAAWO~~,MAAKD;GAAaH;GAAkB;~~AAAAN~~,IAAA,MAAAG;AAAAH,IAAA,MAAAE;AAAAF,IAAA,~~MAAAM~~;~~AAAAN~~,IAAA,~~MAAAU~~,MAAAD;~~AAAAT~~,IAAA,~~MAAAmC~~;OAAAA,~~MAAAnC~~,EAAA;AAtC5DN,~~iBAAgBoB~~,IAsCbqB,GAA0D;CAAA,IAAAC;AAAA,~~KAAApC~~,EAAA,~~QAAAI~~,UAAA;~~AAEtDgC~~,OAAA,~~kCAAGhC~~,WAAY;~~AAAAJ~~,IAAA,~~MAAAI~~;~~AAAAJ~~,IAAA,~~MAAAoC~~;OAAAA,~~MAAApC~~,EAAA;AAAA,~~QAAfoC~~;;~~AApEF~~,SAAAL,OAAAM,aAAA;AAAA,~~QAuD~~+BC,YAASC;;~~AAvDxC~~,SAAAZ,OAAAZ,SAAA;AAAA,~~QAiDwB~~;EAAA,GAAKA;EAAON,YAAc;EAAO;;~~AAjDzD~~,SAAAgB,OAAAa,WAAA;AAAA,~~QA0CKA~~,qBAAqBE,iBACrBF,UAASG,uBAAwB,eACjCH,UAASI,cAAe,cACxBJ,UAASI,cAAe;;~~AA7C7B~~,SAAAnB,MAAAoB,SAAA;AAAA,~~QAuCuBA~~,QAAOC,iBAAwB,IAA/B,EAA+B"}
1	+ {"version":3,"file":"LayoutPanelTransition.js","names":["ReactNode","useContext","useLayoutEffect","useState","LayoutPanelTransitionContext","useLayoutRefsContext","LayoutPanelTransition","t0","$","_c","isShown","isExiting","isHidden","t1","children","undefined","registerPanelTransition","panelContainerRef","t2","t3","isClipping","state","setState","t4","t5","t6","current","cancelled","frame","settle","animations","Array","from","flatMap","_temp","filter","_temp2","length","_temp3","Promise","allSettled","map","_temp4","then","requestAnimationFrame","cancelAnimationFrame","t7","t8","animation_0","animation","finished","CSSTransition","transitionProperty","playState","element","getAnimations"],"sources":["../../../../src/components/content/Layout/LayoutPanelTransition.tsx"],"sourcesContent":["import { ReactNode, useContext, useLayoutEffect, useState } from 'react';\n\nimport {\n LayoutPanelTransitionContext,\n useLayoutRefsContext,\n} from './LayoutContext';\n\n/** Receives live visibility from DisplayTransition, even with preserved children. /\nexport function LayoutPanelTransition({\n isShown,\n isExiting,\n isHidden = false,\n children,\n}: {\n isShown: boolean;\n isExiting: boolean;\n /* A closed `hideOnClose` panel: at rest, so it holds no clip. */\n isHidden?: boolean;\n children: ReactNode;\n}) {\n const registerPanelTransition = useContext(\n LayoutPanelTransitionContext,\n )?.registerPanelTransition;\n const panelContainerRef = useLayoutRefsContext()?.panelContainerRef;\n const [state, setState] = useState({\n isShown,\n isExiting,\n isHidden,\n isClipping: !isHidden && (!isShown \|\| isExiting),\n });\n\n // Contain the first offscreen frame, including exit preparation and reversal.\n if (\n state.isShown !== isShown \|\|\n state.isExiting !== isExiting \|\|\n state.isHidden !== isHidden\n ) {\n setState({ isShown, isExiting, isHidden, isClipping: !isHidden });\n }\n\n useLayoutEffect(() => {\n if (state.isClipping) return registerPanelTransition?.();\n }, [state.isClipping, registerPanelTransition]);\n\n useLayoutEffect(() => {\n if (!isShown \|\| isExiting \|\| !state.isClipping) return;\n\n let cancelled = false;\n let frame: number;\n const settle = () => {\n if (cancelled) return;\n\n // The Layout shares one clip, so wait for every direct panel and handle slide.\n // Descendant animations must not hold clipping.\n const animations = Array.from(panelContainerRef?.current?.children ?? [])\n .flatMap((element) => element.getAnimations?.() ?? [])\n .filter(\n (animation) =>\n animation instanceof CSSTransition &&\n animation.transitionProperty === 'transform' &&\n animation.playState !== 'finished' &&\n animation.playState !== 'idle',\n );\n\n if (!animations.length) {\n setState((current) => ({ ...current, isClipping: false }));\n return;\n }\n\n // Cancellation can replace a transition. Inspect the next frame before releasing.\n Promise.allSettled(\n animations.map((animation) => animation.finished),\n ).then(() => {\n if (!cancelled) frame = requestAnimationFrame(settle);\n });\n };\n\n frame = requestAnimationFrame(settle);\n return () => {\n cancelled = true;\n cancelAnimationFrame(frame);\n };\n }, [isShown, isExiting, state.isClipping, panelContainerRef]);\n\n return <>{children}</>;\n}\n"],"mappings":"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"}

package/dist/components/content/Layout/LayoutToolbar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/hooks/useTinyScrollbar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/components/content/Layout/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";

package/dist/components/content/Layout/utils.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 //#region src/components/content/Layout/utils.ts
 /**
 * Clamps a size value within min/max constraints.

package/dist/components/content/Paragraph.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { _Text } from "./Text.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/Placeholder/Placeholder.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/PrismCode/PrismCode.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";

package/dist/components/content/Result/Result.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/content/Skeleton/Skeleton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";

package/dist/components/content/Tag/Tag.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-05c61de | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b75dce | Cube Dev Team */
 import { mergeStyleLayers } from "../../../utils/styles.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { _Item } from "../Item/Item.js";