@cube-dev/ui-kit 0.195.0 → 0.197.0

package/dist/components/content/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","names":["useResizeObserver","BaseProps","BlockStyleProps","ColorStyleProps","filterBaseProps","FlowStyleProps","INNER_STYLES","mergeStyles","OUTER_STYLES","OuterStyleProps","Styles","tasty","CSSProperties","FocusEvent","ForwardedRef","forwardRef","HTMLAttributes","KeyboardEvent","ReactNode","useCallback","useContext","useEffect","useMemo","useRef","useState","isDevEnv","useCombinedRefs","extractStyles","Alert","LayoutPanelTransitionContext","LayoutProvider","useLayoutActionsContext","useLayoutRefsContext","useLayoutStateContext","LayoutElement","as","qa","styles","position","display","overflow","flexGrow","placeSelf","height","collapsed","vertical","Inner","$","container","inset","flow","placeContent","placeItems","transition","DEV_WARNING_STYLES","zIndex","CubeLayoutProps","isGrid","columns","rows","template","contentPadding","hasTransition","minContentSize","children","innerRef","HTMLDivElement","innerProps","_forceShowDevWarning","doNotOverflow","LayoutInner","props","forwardedRef","layoutActions","layoutState","layoutRefs","localRef","isAutoHeight","setIsAutoHeight","isCollapsed","setIsCollapsed","style","innerRefProp","otherProps","combinedInnerRef","updateContainerSize","ref","box","onResize","current","offsetWidth","offsetHeight","outerStyles","innerStyles","isVertical","flowFromProp","flowFromStyles","Record","flowValue","startsWith","finalStyles","gridStyles","gridColumns","gridRows","gridTemplate","panelSizes","left","top","right","bottom","isDragging","isReady","markReady","dismissOverlayPanels","hasOverlayPanels","isClippingPanels","frameId","requestAnimationFrame","cancelAnimationFrame","insetStyle","baseStyle","transitionStyle","overflowX","overflowY","overflowInline","overflowBlock","overflowClipMargin","mods","dragging","setRefs","element","showDevWarning","handleInnerFocus","e","inner","currentTarget","relatedTarget","Node","contains","handleKeyDown","key","preventDefault","stopPropagation","eventProps","undefined","setPanelContainer","Layout","_c","t0","t1","_Layout","displayName"],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Alert } from '../Alert';\n\nimport {\n  LayoutPanelTransitionContext,\n  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\n// The collapse warning sits on top of `Inner` rather than in place of it.\n// `Inner` is absolutely positioned, so an in-flow sibling would paint beneath\n// it; match its box and take the layer above.\nconst DEV_WARNING_STYLES: Styles = {\n  position: 'absolute',\n  inset: '0',\n  zIndex: 1,\n  overflow: 'auto',\n};\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    minContentSize,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n  const updateContainerSize = layoutActions?.updateContainerSize;\n\n  useResizeObserver({\n    ref: localRef,\n    box: 'border-box',\n    onResize: useCallback(() => {\n      if (localRef.current) {\n        updateContainerSize?.(\n          localRef.current.offsetWidth,\n          localRef.current.offsetHeight,\n        );\n      }\n    }, [updateContainerSize]),\n  });\n\n  // Extract outer wrapper styles and inner content styles\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n  // Calculate if the layout flow is vertical (for auto-border feature)\n  // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'\n  const isVertical = useMemo(() => {\n    const flowFromProp = innerStyles?.flow;\n    const flowFromStyles = (styles?.Inner as Record<string, unknown>)?.flow;\n    const flowValue = flowFromProp ?? flowFromStyles;\n\n    return typeof flowValue !== 'string' || !flowValue.startsWith('row');\n  }, [innerStyles?.flow, styles?.Inner]);\n\n  // Merge styles using the same pattern as LayoutPane\n  const finalStyles = useMemo(() => {\n    // Handle grid mode and grid properties\n    const gridStyles: Styles = {};\n\n    if (isGrid) {\n      gridStyles.display = 'grid';\n    }\n\n    if (columns) {\n      gridStyles.gridColumns = columns;\n    }\n\n    if (rows) {\n      gridStyles.gridRows = rows;\n    }\n\n    if (template) {\n      gridStyles.gridTemplate = template;\n    }\n\n    return mergeStyles(\n      outerStyles,\n      contentPadding != null ? { '$content-padding': contentPadding } : null,\n      styles,\n      { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner as Styles) },\n    );\n  }, [\n    outerStyles,\n    innerStyles,\n    contentPadding,\n    styles,\n    isGrid,\n    columns,\n    rows,\n    template,\n  ]);\n\n  // Calculate inset values from panel sizes\n  const panelSizes = layoutState?.panelSizes ?? {\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  };\n\n  const isDragging = layoutState?.isDragging ?? false;\n  const isReady = layoutState?.isReady ?? true;\n  const markReady = layoutActions?.markReady;\n  const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;\n  const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;\n  const isClippingPanels =\n    useContext(LayoutPanelTransitionContext)?.isClippingPanels ?? false;\n\n  // Mark layout as ready after first paint\n  // Using useEffect + requestAnimationFrame ensures:\n  // 1. Panels register in useLayoutEffect → correct insets before first paint\n  // 2. First paint with not-ready=true (transition disabled)\n  // 3. After paint completes → enables transitions for subsequent changes\n  useEffect(() => {\n    const frameId = requestAnimationFrame(() => {\n      markReady?.();\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [markReady]);\n\n  // Auto-height detection: if layout collapses to 0 height after initialization,\n  // automatically set height to 100% to prevent invisible layout\n  useEffect(() => {\n    if (isReady && localRef.current && localRef.current.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (isAutoHeight && localRef.current) {\n      // Use requestAnimationFrame to check after styles have been applied\n      const frameId = requestAnimationFrame(() => {\n        if (localRef.current && localRef.current.offsetHeight === 0) {\n          setIsCollapsed(true);\n        }\n      });\n\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [isAutoHeight]);\n\n  const insetStyle = useMemo(() => {\n    const baseStyle: Record<string, string> = {\n      '--inset-top': `${panelSizes.top}px`,\n      '--inset-right': `${panelSizes.right}px`,\n      '--inset-bottom': `${panelSizes.bottom}px`,\n      '--inset-left': `${panelSizes.left}px`,\n    };\n\n    if (style) {\n      return { ...baseStyle, ...style } as CSSProperties;\n    }\n\n    return baseStyle as CSSProperties;\n  }, [panelSizes, style]);\n\n  // Remove consumer longhands while clipping so they cannot override the shorthand.\n  // Restoring the original style object also restores the latest consumer values.\n  const transitionStyle = { ...insetStyle };\n  if (isClippingPanels) {\n    delete transitionStyle.overflowX;\n    delete transitionStyle.overflowY;\n    delete transitionStyle.overflowInline;\n    delete transitionStyle.overflowBlock;\n    transitionStyle.overflow = 'clip';\n    transitionStyle.overflowClipMargin = '0px';\n  }\n\n  const mods = useMemo(\n    () => ({\n      dragging: isDragging,\n      'not-ready': !isReady,\n      'has-transition': hasTransition,\n      'auto-height': isAutoHeight && !isCollapsed,\n      collapsed: isCollapsed,\n      vertical: isVertical,\n      'do-not-overflow': doNotOverflow,\n    }),\n    [\n      isDragging,\n      isReady,\n      hasTransition,\n      isAutoHeight,\n      isCollapsed,\n      isVertical,\n      doNotOverflow,\n    ],\n  );\n\n  // Combine local ref with forwarded ref\n  const setRefs = (element: HTMLDivElement | null) => {\n    localRef.current = element;\n\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(element);\n    } else if (forwardedRef) {\n      forwardedRef.current = element;\n    }\n  };\n\n  // Show dev warning when collapsed and in dev mode (or forced for stories)\n  const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());\n\n  // Handle focus entering the Inner element - dismiss overlay panels\n  const handleInnerFocus = useCallback(\n    (e: FocusEvent<HTMLDivElement>) => {\n      // Only dismiss if there are overlay panels\n      if (!hasOverlayPanels) return;\n\n      // Check if focus is coming from outside the Inner element\n      const inner = e.currentTarget;\n      const relatedTarget = e.relatedTarget as Node | null;\n\n      // If relatedTarget is null or not inside the Inner element,\n      // focus is entering from outside - dismiss overlay panels\n      if (!relatedTarget || !inner.contains(relatedTarget)) {\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  // Handle Escape key anywhere in the Layout - dismiss overlay panels\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (hasOverlayPanels && e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  return (\n    <LayoutElement\n      ref={setRefs}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      mods={mods}\n      styles={finalStyles}\n      style={transitionStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {/* All children go inside the Inner element - panels will portal themselves out */}\n      <div\n        ref={combinedInnerRef}\n        data-element=\"Inner\"\n        onFocus={handleInnerFocus}\n        {...innerProps}\n      >\n        {children}\n      </div>\n      {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n      <div ref={layoutRefs?.setPanelContainer} data-element=\"PanelContainer\" />\n      {/* Overlaid, never substituted for `children`. A zero-height measurement is\n          not proof of a mistake - a hidden tab, a collapsed accordion and a\n          container mid-animation all measure zero - so unmounting the subtree\n          would turn a wrong guess into an outage, and remounting it on the way\n          back would drop whatever state it held. */}\n      {showDevWarning ? (\n        <Alert theme=\"danger\" styles={DEV_WARNING_STYLES}>\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : null}\n    </LayoutElement>\n  );\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition, minContentSize } = props;\n\n  return (\n    <LayoutProvider\n      hasTransition={hasTransition}\n      minContentSize={minContentSize}\n    >\n      <LayoutInner {...props} forwardedRef={ref} />\n    </LayoutProvider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":"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"}
+{"version":3,"file":"Layout.js","names":["useResizeObserver","BaseProps","BlockStyleProps","ColorStyleProps","filterBaseProps","FlowStyleProps","INNER_STYLES","mergeStyles","OUTER_STYLES","OuterStyleProps","Styles","tasty","CSSProperties","FocusEvent","ForwardedRef","forwardRef","HTMLAttributes","KeyboardEvent","ReactNode","useCallback","useContext","useEffect","useMemo","useRef","useState","isDevEnv","useCombinedRefs","extractStyles","Alert","LayoutNestedContext","LayoutPanelTransitionContext","LayoutProvider","useLayoutActionsContext","useLayoutRefsContext","useLayoutStateContext","LayoutElement","as","qa","styles","position","display","overflow","flexGrow","placeSelf","height","collapsed","vertical","Inner","$","container","inset","flow","placeContent","placeItems","transition","DEV_WARNING_STYLES","zIndex","CubeLayoutProps","isGrid","columns","rows","template","contentPadding","hasTransition","minContentSize","children","innerRef","HTMLDivElement","innerProps","_forceShowDevWarning","doNotOverflow","LayoutInner","props","forwardedRef","layoutActions","layoutState","layoutRefs","localRef","isAutoHeight","setIsAutoHeight","isCollapsed","setIsCollapsed","style","innerRefProp","otherProps","combinedInnerRef","updateContainerSize","ref","box","onResize","current","offsetWidth","offsetHeight","outerStyles","innerStyles","isVertical","flowFromProp","flowFromStyles","Record","flowValue","startsWith","finalStyles","gridStyles","gridColumns","gridRows","gridTemplate","panelSizes","left","top","right","bottom","isDragging","isReady","markReady","dismissOverlayPanels","hasOverlayPanels","isClippingPanels","frameId","requestAnimationFrame","cancelAnimationFrame","insetStyle","baseStyle","transitionStyle","overflowX","overflowY","overflowInline","overflowBlock","overflowClipMargin","mods","dragging","setRefs","element","showDevWarning","handleInnerFocus","e","inner","currentTarget","contains","target","Node","relatedTarget","handleKeyDown","key","preventDefault","stopPropagation","eventProps","undefined","setPanelContainer","Layout","_c","isInRegion","isInLayout","t0","t1","t2","t3","_Layout","displayName"],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Alert } from '../Alert';\n\nimport {\n  LayoutNestedContext,\n  LayoutPanelTransitionContext,\n  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\n// The collapse warning sits on top of `Inner` rather than in place of it.\n// `Inner` is absolutely positioned, so an in-flow sibling would paint beneath\n// it; match its box and take the layer above.\nconst DEV_WARNING_STYLES: Styles = {\n  position: 'absolute',\n  inset: '0',\n  zIndex: 1,\n  overflow: 'auto',\n};\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    minContentSize,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n  const updateContainerSize = layoutActions?.updateContainerSize;\n\n  useResizeObserver({\n    ref: localRef,\n    box: 'border-box',\n    onResize: useCallback(() => {\n      if (localRef.current) {\n        updateContainerSize?.(\n          localRef.current.offsetWidth,\n          localRef.current.offsetHeight,\n        );\n      }\n    }, [updateContainerSize]),\n  });\n\n  // Extract outer wrapper styles and inner content styles\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n  // Calculate if the layout flow is vertical (for auto-border feature)\n  // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'\n  const isVertical = useMemo(() => {\n    const flowFromProp = innerStyles?.flow;\n    const flowFromStyles = (styles?.Inner as Record<string, unknown>)?.flow;\n    const flowValue = flowFromProp ?? flowFromStyles;\n\n    return typeof flowValue !== 'string' || !flowValue.startsWith('row');\n  }, [innerStyles?.flow, styles?.Inner]);\n\n  // Merge styles using the same pattern as LayoutPane\n  const finalStyles = useMemo(() => {\n    // Handle grid mode and grid properties\n    const gridStyles: Styles = {};\n\n    if (isGrid) {\n      gridStyles.display = 'grid';\n    }\n\n    if (columns) {\n      gridStyles.gridColumns = columns;\n    }\n\n    if (rows) {\n      gridStyles.gridRows = rows;\n    }\n\n    if (template) {\n      gridStyles.gridTemplate = template;\n    }\n\n    return mergeStyles(\n      outerStyles,\n      contentPadding != null ? { '$content-padding': contentPadding } : null,\n      styles,\n      { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner as Styles) },\n    );\n  }, [\n    outerStyles,\n    innerStyles,\n    contentPadding,\n    styles,\n    isGrid,\n    columns,\n    rows,\n    template,\n  ]);\n\n  // Calculate inset values from panel sizes\n  const panelSizes = layoutState?.panelSizes ?? {\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  };\n\n  const isDragging = layoutState?.isDragging ?? false;\n  const isReady = layoutState?.isReady ?? true;\n  const markReady = layoutActions?.markReady;\n  const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;\n  const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;\n  const isClippingPanels =\n    useContext(LayoutPanelTransitionContext)?.isClippingPanels ?? false;\n\n  // Mark layout as ready after first paint\n  // Using useEffect + requestAnimationFrame ensures:\n  // 1. Panels register in useLayoutEffect → correct insets before first paint\n  // 2. First paint with not-ready=true (transition disabled)\n  // 3. After paint completes → enables transitions for subsequent changes\n  useEffect(() => {\n    const frameId = requestAnimationFrame(() => {\n      markReady?.();\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [markReady]);\n\n  // Auto-height detection: if layout collapses to 0 height after initialization,\n  // automatically set height to 100% to prevent invisible layout\n  useEffect(() => {\n    if (isReady && localRef.current && localRef.current.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (isAutoHeight && localRef.current) {\n      // Use requestAnimationFrame to check after styles have been applied\n      const frameId = requestAnimationFrame(() => {\n        if (localRef.current && localRef.current.offsetHeight === 0) {\n          setIsCollapsed(true);\n        }\n      });\n\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [isAutoHeight]);\n\n  const insetStyle = useMemo(() => {\n    const baseStyle: Record<string, string> = {\n      '--inset-top': `${panelSizes.top}px`,\n      '--inset-right': `${panelSizes.right}px`,\n      '--inset-bottom': `${panelSizes.bottom}px`,\n      '--inset-left': `${panelSizes.left}px`,\n    };\n\n    if (style) {\n      return { ...baseStyle, ...style } as CSSProperties;\n    }\n\n    return baseStyle as CSSProperties;\n  }, [panelSizes, style]);\n\n  // Remove consumer longhands while clipping so they cannot override the shorthand.\n  // Restoring the original style object also restores the latest consumer values.\n  const transitionStyle = { ...insetStyle };\n  if (isClippingPanels) {\n    delete transitionStyle.overflowX;\n    delete transitionStyle.overflowY;\n    delete transitionStyle.overflowInline;\n    delete transitionStyle.overflowBlock;\n    transitionStyle.overflow = 'clip';\n    transitionStyle.overflowClipMargin = '0px';\n  }\n\n  const mods = useMemo(\n    () => ({\n      dragging: isDragging,\n      'not-ready': !isReady,\n      'has-transition': hasTransition,\n      'auto-height': isAutoHeight && !isCollapsed,\n      collapsed: isCollapsed,\n      vertical: isVertical,\n      'do-not-overflow': doNotOverflow,\n    }),\n    [\n      isDragging,\n      isReady,\n      hasTransition,\n      isAutoHeight,\n      isCollapsed,\n      isVertical,\n      doNotOverflow,\n    ],\n  );\n\n  // Combine local ref with forwarded ref\n  const setRefs = (element: HTMLDivElement | null) => {\n    localRef.current = element;\n\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(element);\n    } else if (forwardedRef) {\n      forwardedRef.current = element;\n    }\n  };\n\n  // Show dev warning when collapsed and in dev mode (or forced for stories)\n  const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());\n\n  // Handle focus entering the Inner element - dismiss overlay panels\n  const handleInnerFocus = useCallback(\n    (e: FocusEvent<HTMLDivElement>) => {\n      // Only dismiss if there are overlay panels\n      if (!hasOverlayPanels) return;\n\n      const inner = e.currentTarget;\n\n      // Panels portal out of Inner but stay its React children, so focus inside\n      // a panel (or a popover opened from it) bubbles here too. Only focus that\n      // lands in Inner's own DOM, the main content, can dismiss.\n      if (!inner.contains(e.target as Node)) return;\n\n      // Check if focus is coming from outside the Inner element\n      const relatedTarget = e.relatedTarget as Node | null;\n\n      // If relatedTarget is null or not inside the Inner element,\n      // focus is entering from outside - dismiss overlay panels\n      if (!relatedTarget || !inner.contains(relatedTarget)) {\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  // Handle Escape key anywhere in the Layout - dismiss overlay panels\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (hasOverlayPanels && e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  return (\n    <LayoutElement\n      ref={setRefs}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      mods={mods}\n      styles={finalStyles}\n      style={transitionStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {/* All children go inside the Inner element - panels will portal themselves out */}\n      <div\n        ref={combinedInnerRef}\n        data-element=\"Inner\"\n        onFocus={handleInnerFocus}\n        {...innerProps}\n      >\n        {children}\n      </div>\n      {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n      <div ref={layoutRefs?.setPanelContainer} data-element=\"PanelContainer\" />\n      {/* Overlaid, never substituted for `children`. A zero-height measurement is\n          not proof of a mistake - a hidden tab, a collapsed accordion and a\n          container mid-animation all measure zero - so unmounting the subtree\n          would turn a wrong guess into an outage, and remounting it on the way\n          back would drop whatever state it held. */}\n      {showDevWarning ? (\n        <Alert theme=\"danger\" styles={DEV_WARNING_STYLES}>\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : null}\n    </LayoutElement>\n  );\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition, minContentSize } = props;\n  // Nested inside one of another Layout's regions, or placed straight inside\n  // another Layout: either way its footer is not the page's.\n  const isInRegion = useContext(LayoutNestedContext);\n  const isInLayout = useLayoutStateContext() != null;\n\n  return (\n    <LayoutNestedContext.Provider value={isInRegion || isInLayout}>\n      <LayoutProvider\n        hasTransition={hasTransition}\n        minContentSize={minContentSize}\n      >\n        <LayoutInner {...props} forwardedRef={ref} />\n      </LayoutProvider>\n    </LayoutNestedContext.Provider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":"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"}

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { _LayoutContainer } from "./LayoutContainer.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";
@@ -267,8 +267,10 @@ function LayoutProvider(t0) {
 	return t24;
 }
 /**
-* Provider that resets the layout context for sub-components.
-* Used to prevent panels in nested Layouts from affecting parent layouts.
+* Private: `true` inside a Layout region (Content, Pane, Panel and the other
+* parts that reset the context) and inside a Layout that is itself nested, so
+* a footer rendered there is not page-level. Not reset by `LayoutContextReset`,
+* and not part of the public Layout context API.
 */
 function _temp3(count_0) {
 	return count_0 - 1;
@@ -279,20 +281,28 @@ function _temp2(count) {
 function _temp(dismiss_0) {
 	return dismiss_0();
 }
+const LayoutNestedContext = createContext(false);
+/**
+* Provider that resets the layout context for sub-components.
+* Used to prevent panels in nested Layouts from affecting parent layouts.
+*/
 function LayoutContextReset(t0) {
 	const $ = c(2);
 	const { children } = t0;
 	let t1;
 	if ($[0] !== children) {
-		t1 = /* @__PURE__ */ jsx(LayoutRefsContext.Provider, {
-			value: null,
-			children: /* @__PURE__ */ jsx(LayoutActionsContext.Provider, {
+		t1 = /* @__PURE__ */ jsx(LayoutNestedContext.Provider, {
+			value: true,
+			children: /* @__PURE__ */ jsx(LayoutRefsContext.Provider, {
 				value: null,
-				children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+				children: /* @__PURE__ */ jsx(LayoutActionsContext.Provider, {
 					value: null,
-					children: /* @__PURE__ */ jsx(LayoutPanelTransitionContext.Provider, {
+					children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
 						value: null,
-						children
+						children: /* @__PURE__ */ jsx(LayoutPanelTransitionContext.Provider, {
+							value: null,
+							children
+						})
 					})
 				})
 			})
@@ -308,5 +318,5 @@ function useLayoutPanelContext() {
 }
 
 //#endregion
-export { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutPanelTransitionContext, LayoutProvider, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext };
+export { LayoutActionsContext, LayoutContextReset, LayoutNestedContext, LayoutPanelContext, LayoutPanelTransitionContext, LayoutProvider, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext };
 //# sourceMappingURL=LayoutContext.js.map

package/dist/components/content/Layout/LayoutContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutContext.js","names":["createContext","MutableRefObject","ReactNode","useCallback","useContext","useMemo","useRef","useState","useEvent","Side","LayoutRefsContextValue","panelContainerRef","HTMLDivElement","isPanelContainerReady","setPanelContainer","element","LayoutRefsContext","useLayoutRefsContext","OverlayDismissCallback","LayoutActionsContextValue","registerPanel","side","size","unregisterPanel","updatePanelSize","setDragging","isDragging","markReady","updateContainerSize","width","height","registerOverlayPanel","dismiss","dismissOverlayPanels","hasTransition","minContentSize","LayoutStateContextValue","panelSizes","Record","isReady","hasOverlayPanels","containerWidth","containerHeight","LayoutActionsContext","LayoutStateContext","LayoutPanelTransitionContext","isClippingPanels","registerPanelTransition","useLayoutActionsContext","useLayoutStateContext","LayoutContextValue","useLayoutContext","$","_c","actions","state","refs","t0","LayoutProviderProps","children","LayoutProvider","t1","t2","undefined","t3","Symbol","for","Set","registeredPanels","t4","overlayPanelCallbacks","setIsPanelContainerReady","t5","current","t6","left","top","right","bottom","setPanelSizes","setIsDragging","setIsReady","setHasOverlayPanels","panelTransitionCount","setPanelTransitionCount","setContainerWidth","setContainerHeight","t7","prev","t8","side_0","size_0","has","Error","isHorizontal","conflictingSides","conflictSide","add","t9","side_1","delete","t10","dragging","t11","t12","t13","forEach","_temp","t14","_temp2","_temp3","t15","prev_0","prev_1","t16","actionsValue","t17","stateValue","t18","refsValue","t19","t20","t21","t22","t23","t24","count_0","count","dismiss_0","LayoutContextReset","LayoutPanelContextValue","onOpenChange","isOpen","LayoutPanelContext","useLayoutPanelContext"],"sources":["../../../../src/components/content/Layout/LayoutContext.tsx"],"sourcesContent":["import {\n  createContext,\n  MutableRefObject,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nexport type Side = 'left' | 'top' | 'right' | 'bottom';\n\n/**\n * Refs context - stable refs that don't change and don't trigger re-renders.\n * Provides portal container ref for panels to render into.\n */\nexport interface LayoutRefsContextValue {\n  /** Container element ref for panels to portal into */\n  panelContainerRef: MutableRefObject<HTMLDivElement | null>;\n  /** Whether the panel container is mounted and ready for portals */\n  isPanelContainerReady: boolean;\n  /** Callback ref to set on the panel container element */\n  setPanelContainer: (element: HTMLDivElement | null) => void;\n}\n\nexport const LayoutRefsContext = createContext<LayoutRefsContextValue | null>(\n  null,\n);\n\nexport function useLayoutRefsContext(): LayoutRefsContextValue | null {\n  return useContext(LayoutRefsContext);\n}\n\n/** Callback to dismiss an overlay panel */\nexport type OverlayDismissCallback = () => void;\n\n/**\n * Actions context - stable functions and configuration that don't change.\n * Separating these from state prevents unnecessary re-renders when only state changes.\n */\nexport interface LayoutActionsContextValue {\n  /** Register a panel on a specific side with initial size */\n  registerPanel: (side: Side, size: number) => void;\n  /** Unregister a panel from a specific side */\n  unregisterPanel: (side: Side) => void;\n  /** Update the size of a registered panel */\n  updatePanelSize: (side: Side, size: number) => void;\n  /** Set global dragging state (when any panel is being resized) */\n  setDragging: (isDragging: boolean) => void;\n  /** Mark the layout as ready (after initial mount) */\n  markReady: () => void;\n  /** Update the container dimensions (called from ResizeObserver) */\n  updateContainerSize: (width: number, height: number) => void;\n  /** Register an overlay panel's dismiss callback. Returns unregister function. */\n  registerOverlayPanel: (dismiss: OverlayDismissCallback) => () => void;\n  /** Dismiss all overlay panels */\n  dismissOverlayPanels: () => void;\n  /** Whether transitions are enabled for panels (stable config value) */\n  hasTransition: boolean;\n  /** Minimum size reserved for the content area between panels */\n  minContentSize: number;\n}\n\n/** State context - reactive state that triggers re-renders */\nexport interface LayoutStateContextValue {\n  panelSizes: Record<Side, number>;\n  isDragging: boolean;\n  isReady: boolean;\n  hasOverlayPanels: boolean;\n  containerWidth: number;\n  containerHeight: number;\n}\n\nexport const LayoutActionsContext =\n  createContext<LayoutActionsContextValue | null>(null);\nexport const LayoutStateContext = createContext<LayoutStateContextValue | null>(\n  null,\n);\n\n/** Private transition coordination; not part of the public Layout context API. */\nexport const LayoutPanelTransitionContext = createContext<{\n  isClippingPanels: boolean;\n  registerPanelTransition: () => () => void;\n} | null>(null);\n\nexport function useLayoutActionsContext(): LayoutActionsContextValue | null {\n  return useContext(LayoutActionsContext);\n}\n\nexport function useLayoutStateContext(): LayoutStateContextValue | null {\n  return useContext(LayoutStateContext);\n}\n\n/** Combined layout context value for convenience */\nexport interface LayoutContextValue\n  extends LayoutActionsContextValue,\n    LayoutStateContextValue,\n    LayoutRefsContextValue {}\n\n/**\n * Combined hook that returns all layout context values.\n * Convenience wrapper around the individual context hooks.\n * Returns null if used outside of a Layout component.\n */\nexport function useLayoutContext(): LayoutContextValue | null {\n  const actions = useLayoutActionsContext();\n  const state = useLayoutStateContext();\n  const refs = useLayoutRefsContext();\n\n  if (!actions || !state || !refs) {\n    return null;\n  }\n\n  return { ...actions, ...state, ...refs };\n}\n\nexport interface LayoutProviderProps {\n  children: ReactNode;\n  /** Whether transitions are enabled for panels */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n}\n\nexport function LayoutProvider({\n  children,\n  hasTransition = false,\n  minContentSize = 320,\n}: LayoutProviderProps) {\n  const registeredPanels = useRef<Set<Side>>(new Set());\n  const overlayPanelCallbacks = useRef<Set<OverlayDismissCallback>>(new Set());\n  const panelContainerRef = useRef<HTMLDivElement | null>(null);\n  const [isPanelContainerReady, setIsPanelContainerReady] = useState(false);\n\n  // Callback ref for panel container - triggers re-render when container mounts\n  const setPanelContainer = useEvent((element: HTMLDivElement | null) => {\n    panelContainerRef.current = element;\n    setIsPanelContainerReady(element !== null);\n  });\n\n  const [panelSizes, setPanelSizes] = useState<Record<Side, number>>({\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  });\n  const [isDragging, setIsDragging] = useState(false);\n  const [isReady, setIsReady] = useState(false);\n  const [hasOverlayPanels, setHasOverlayPanels] = useState(false);\n  const [panelTransitionCount, setPanelTransitionCount] = useState(0);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const [containerHeight, setContainerHeight] = useState(0);\n\n  const updatePanelSize = useEvent((side: Side, size: number) => {\n    setPanelSizes((prev) => {\n      if (prev[side] === size) return prev;\n      return { ...prev, [side]: size };\n    });\n  });\n\n  const registerPanel = useEvent((side: Side, size: number) => {\n    if (registeredPanels.current.has(side)) {\n      throw new Error(\n        `Layout: Only one panel per side is allowed. ` +\n          `A panel is already registered on the \"${side}\" side.`,\n      );\n    }\n\n    // Check for axis conflict\n    const isHorizontal = side === 'left' || side === 'right';\n    const conflictingSides: Side[] = isHorizontal\n      ? ['top', 'bottom']\n      : ['left', 'right'];\n\n    for (const conflictSide of conflictingSides) {\n      if (registeredPanels.current.has(conflictSide)) {\n        throw new Error(\n          `Layout: Panels from different axes cannot be combined. ` +\n            `Cannot register \"${side}\" panel when \"${conflictSide}\" panel exists. ` +\n            `Use either horizontal (left/right) or vertical (top/bottom) panels.`,\n        );\n      }\n    }\n\n    registeredPanels.current.add(side);\n    updatePanelSize(side, size);\n  });\n\n  const unregisterPanel = useEvent((side: Side) => {\n    registeredPanels.current.delete(side);\n    updatePanelSize(side, 0);\n  });\n\n  const setDragging = useEvent((dragging: boolean) => {\n    setIsDragging(dragging);\n  });\n\n  const markReady = useEvent(() => {\n    setIsReady(true);\n  });\n\n  const registerOverlayPanel = useEvent((dismiss: OverlayDismissCallback) => {\n    overlayPanelCallbacks.current.add(dismiss);\n    setHasOverlayPanels(true);\n\n    // Return unregister function\n    return () => {\n      overlayPanelCallbacks.current.delete(dismiss);\n      setHasOverlayPanels(overlayPanelCallbacks.current.size > 0);\n    };\n  });\n\n  const dismissOverlayPanels = useEvent(() => {\n    overlayPanelCallbacks.current.forEach((dismiss) => dismiss());\n  });\n\n  const registerPanelTransition = useCallback(() => {\n    setPanelTransitionCount((count) => count + 1);\n    return () => setPanelTransitionCount((count) => count - 1);\n  }, [setPanelTransitionCount]);\n\n  const updateContainerSize = useEvent((width: number, height: number) => {\n    setContainerWidth((prev) => (prev === width ? prev : width));\n    setContainerHeight((prev) => (prev === height ? prev : height));\n  });\n\n  // Actions context - stable because all callbacks use useEvent\n  const actionsValue = useMemo(\n    () => ({\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    }),\n    // Only hasTransition and minContentSize can change - the callbacks are\n    // stable useEvent ones, listed so React Compiler can preserve the memo.\n    [\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    ],\n  );\n\n  // State context - changes when state updates\n  const stateValue = useMemo(\n    () => ({\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    }),\n    [\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    ],\n  );\n\n  // Refs context - includes container ready state\n  const refsValue = useMemo(\n    () => ({\n      panelContainerRef,\n      isPanelContainerReady,\n      setPanelContainer,\n    }),\n    [isPanelContainerReady, setPanelContainer],\n  );\n\n  return (\n    <LayoutRefsContext.Provider value={refsValue}>\n      <LayoutActionsContext.Provider value={actionsValue}>\n        <LayoutStateContext.Provider value={stateValue}>\n          <LayoutPanelTransitionContext.Provider\n            value={{\n              isClippingPanels: panelTransitionCount > 0,\n              registerPanelTransition,\n            }}\n          >\n            {children}\n          </LayoutPanelTransitionContext.Provider>\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n/**\n * Provider that resets the layout context for sub-components.\n * Used to prevent panels in nested Layouts from affecting parent layouts.\n */\nexport function LayoutContextReset({ children }: { children: ReactNode }) {\n  return (\n    <LayoutRefsContext.Provider value={null}>\n      <LayoutActionsContext.Provider value={null}>\n        <LayoutStateContext.Provider value={null}>\n          <LayoutPanelTransitionContext.Provider value={null}>\n            {children}\n          </LayoutPanelTransitionContext.Provider>\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n// Panel context - provides panel-level callbacks to child components\nexport interface LayoutPanelContextValue {\n  /** Callback to change the panel's open state */\n  onOpenChange: (isOpen: boolean) => void;\n  /** Current open state of the panel */\n  isOpen: boolean;\n}\n\nexport const LayoutPanelContext = createContext<LayoutPanelContextValue | null>(\n  null,\n);\n\nexport function useLayoutPanelContext(): LayoutPanelContextValue | null {\n  return useContext(LayoutPanelContext);\n}\n"],"mappings":"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"}
+{"version":3,"file":"LayoutContext.js","names":["createContext","MutableRefObject","ReactNode","useCallback","useContext","useMemo","useRef","useState","useEvent","Side","LayoutRefsContextValue","panelContainerRef","HTMLDivElement","isPanelContainerReady","setPanelContainer","element","LayoutRefsContext","useLayoutRefsContext","OverlayDismissCallback","LayoutActionsContextValue","registerPanel","side","size","unregisterPanel","updatePanelSize","setDragging","isDragging","markReady","updateContainerSize","width","height","registerOverlayPanel","dismiss","dismissOverlayPanels","hasTransition","minContentSize","LayoutStateContextValue","panelSizes","Record","isReady","hasOverlayPanels","containerWidth","containerHeight","LayoutActionsContext","LayoutStateContext","LayoutPanelTransitionContext","isClippingPanels","registerPanelTransition","useLayoutActionsContext","useLayoutStateContext","LayoutContextValue","useLayoutContext","$","_c","actions","state","refs","t0","LayoutProviderProps","children","LayoutProvider","t1","t2","undefined","t3","Symbol","for","Set","registeredPanels","t4","overlayPanelCallbacks","setIsPanelContainerReady","t5","current","t6","left","top","right","bottom","setPanelSizes","setIsDragging","setIsReady","setHasOverlayPanels","panelTransitionCount","setPanelTransitionCount","setContainerWidth","setContainerHeight","t7","prev","t8","side_0","size_0","has","Error","isHorizontal","conflictingSides","conflictSide","add","t9","side_1","delete","t10","dragging","t11","t12","t13","forEach","_temp","t14","_temp2","_temp3","t15","prev_0","prev_1","t16","actionsValue","t17","stateValue","t18","refsValue","t19","t20","t21","t22","t23","t24","count_0","count","dismiss_0","LayoutNestedContext","LayoutContextReset","LayoutPanelContextValue","onOpenChange","isOpen","LayoutPanelContext","useLayoutPanelContext"],"sources":["../../../../src/components/content/Layout/LayoutContext.tsx"],"sourcesContent":["import {\n  createContext,\n  MutableRefObject,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nexport type Side = 'left' | 'top' | 'right' | 'bottom';\n\n/**\n * Refs context - stable refs that don't change and don't trigger re-renders.\n * Provides portal container ref for panels to render into.\n */\nexport interface LayoutRefsContextValue {\n  /** Container element ref for panels to portal into */\n  panelContainerRef: MutableRefObject<HTMLDivElement | null>;\n  /** Whether the panel container is mounted and ready for portals */\n  isPanelContainerReady: boolean;\n  /** Callback ref to set on the panel container element */\n  setPanelContainer: (element: HTMLDivElement | null) => void;\n}\n\nexport const LayoutRefsContext = createContext<LayoutRefsContextValue | null>(\n  null,\n);\n\nexport function useLayoutRefsContext(): LayoutRefsContextValue | null {\n  return useContext(LayoutRefsContext);\n}\n\n/** Callback to dismiss an overlay panel */\nexport type OverlayDismissCallback = () => void;\n\n/**\n * Actions context - stable functions and configuration that don't change.\n * Separating these from state prevents unnecessary re-renders when only state changes.\n */\nexport interface LayoutActionsContextValue {\n  /** Register a panel on a specific side with initial size */\n  registerPanel: (side: Side, size: number) => void;\n  /** Unregister a panel from a specific side */\n  unregisterPanel: (side: Side) => void;\n  /** Update the size of a registered panel */\n  updatePanelSize: (side: Side, size: number) => void;\n  /** Set global dragging state (when any panel is being resized) */\n  setDragging: (isDragging: boolean) => void;\n  /** Mark the layout as ready (after initial mount) */\n  markReady: () => void;\n  /** Update the container dimensions (called from ResizeObserver) */\n  updateContainerSize: (width: number, height: number) => void;\n  /** Register an overlay panel's dismiss callback. Returns unregister function. */\n  registerOverlayPanel: (dismiss: OverlayDismissCallback) => () => void;\n  /** Dismiss all overlay panels */\n  dismissOverlayPanels: () => void;\n  /** Whether transitions are enabled for panels (stable config value) */\n  hasTransition: boolean;\n  /** Minimum size reserved for the content area between panels */\n  minContentSize: number;\n}\n\n/** State context - reactive state that triggers re-renders */\nexport interface LayoutStateContextValue {\n  panelSizes: Record<Side, number>;\n  isDragging: boolean;\n  isReady: boolean;\n  hasOverlayPanels: boolean;\n  containerWidth: number;\n  containerHeight: number;\n}\n\nexport const LayoutActionsContext =\n  createContext<LayoutActionsContextValue | null>(null);\nexport const LayoutStateContext = createContext<LayoutStateContextValue | null>(\n  null,\n);\n\n/** Private transition coordination; not part of the public Layout context API. */\nexport const LayoutPanelTransitionContext = createContext<{\n  isClippingPanels: boolean;\n  registerPanelTransition: () => () => void;\n} | null>(null);\n\nexport function useLayoutActionsContext(): LayoutActionsContextValue | null {\n  return useContext(LayoutActionsContext);\n}\n\nexport function useLayoutStateContext(): LayoutStateContextValue | null {\n  return useContext(LayoutStateContext);\n}\n\n/** Combined layout context value for convenience */\nexport interface LayoutContextValue\n  extends LayoutActionsContextValue,\n    LayoutStateContextValue,\n    LayoutRefsContextValue {}\n\n/**\n * Combined hook that returns all layout context values.\n * Convenience wrapper around the individual context hooks.\n * Returns null if used outside of a Layout component.\n */\nexport function useLayoutContext(): LayoutContextValue | null {\n  const actions = useLayoutActionsContext();\n  const state = useLayoutStateContext();\n  const refs = useLayoutRefsContext();\n\n  if (!actions || !state || !refs) {\n    return null;\n  }\n\n  return { ...actions, ...state, ...refs };\n}\n\nexport interface LayoutProviderProps {\n  children: ReactNode;\n  /** Whether transitions are enabled for panels */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n}\n\nexport function LayoutProvider({\n  children,\n  hasTransition = false,\n  minContentSize = 320,\n}: LayoutProviderProps) {\n  const registeredPanels = useRef<Set<Side>>(new Set());\n  const overlayPanelCallbacks = useRef<Set<OverlayDismissCallback>>(new Set());\n  const panelContainerRef = useRef<HTMLDivElement | null>(null);\n  const [isPanelContainerReady, setIsPanelContainerReady] = useState(false);\n\n  // Callback ref for panel container - triggers re-render when container mounts\n  const setPanelContainer = useEvent((element: HTMLDivElement | null) => {\n    panelContainerRef.current = element;\n    setIsPanelContainerReady(element !== null);\n  });\n\n  const [panelSizes, setPanelSizes] = useState<Record<Side, number>>({\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  });\n  const [isDragging, setIsDragging] = useState(false);\n  const [isReady, setIsReady] = useState(false);\n  const [hasOverlayPanels, setHasOverlayPanels] = useState(false);\n  const [panelTransitionCount, setPanelTransitionCount] = useState(0);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const [containerHeight, setContainerHeight] = useState(0);\n\n  const updatePanelSize = useEvent((side: Side, size: number) => {\n    setPanelSizes((prev) => {\n      if (prev[side] === size) return prev;\n      return { ...prev, [side]: size };\n    });\n  });\n\n  const registerPanel = useEvent((side: Side, size: number) => {\n    if (registeredPanels.current.has(side)) {\n      throw new Error(\n        `Layout: Only one panel per side is allowed. ` +\n          `A panel is already registered on the \"${side}\" side.`,\n      );\n    }\n\n    // Check for axis conflict\n    const isHorizontal = side === 'left' || side === 'right';\n    const conflictingSides: Side[] = isHorizontal\n      ? ['top', 'bottom']\n      : ['left', 'right'];\n\n    for (const conflictSide of conflictingSides) {\n      if (registeredPanels.current.has(conflictSide)) {\n        throw new Error(\n          `Layout: Panels from different axes cannot be combined. ` +\n            `Cannot register \"${side}\" panel when \"${conflictSide}\" panel exists. ` +\n            `Use either horizontal (left/right) or vertical (top/bottom) panels.`,\n        );\n      }\n    }\n\n    registeredPanels.current.add(side);\n    updatePanelSize(side, size);\n  });\n\n  const unregisterPanel = useEvent((side: Side) => {\n    registeredPanels.current.delete(side);\n    updatePanelSize(side, 0);\n  });\n\n  const setDragging = useEvent((dragging: boolean) => {\n    setIsDragging(dragging);\n  });\n\n  const markReady = useEvent(() => {\n    setIsReady(true);\n  });\n\n  const registerOverlayPanel = useEvent((dismiss: OverlayDismissCallback) => {\n    overlayPanelCallbacks.current.add(dismiss);\n    setHasOverlayPanels(true);\n\n    // Return unregister function\n    return () => {\n      overlayPanelCallbacks.current.delete(dismiss);\n      setHasOverlayPanels(overlayPanelCallbacks.current.size > 0);\n    };\n  });\n\n  const dismissOverlayPanels = useEvent(() => {\n    overlayPanelCallbacks.current.forEach((dismiss) => dismiss());\n  });\n\n  const registerPanelTransition = useCallback(() => {\n    setPanelTransitionCount((count) => count + 1);\n    return () => setPanelTransitionCount((count) => count - 1);\n  }, [setPanelTransitionCount]);\n\n  const updateContainerSize = useEvent((width: number, height: number) => {\n    setContainerWidth((prev) => (prev === width ? prev : width));\n    setContainerHeight((prev) => (prev === height ? prev : height));\n  });\n\n  // Actions context - stable because all callbacks use useEvent\n  const actionsValue = useMemo(\n    () => ({\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    }),\n    // Only hasTransition and minContentSize can change - the callbacks are\n    // stable useEvent ones, listed so React Compiler can preserve the memo.\n    [\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    ],\n  );\n\n  // State context - changes when state updates\n  const stateValue = useMemo(\n    () => ({\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    }),\n    [\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    ],\n  );\n\n  // Refs context - includes container ready state\n  const refsValue = useMemo(\n    () => ({\n      panelContainerRef,\n      isPanelContainerReady,\n      setPanelContainer,\n    }),\n    [isPanelContainerReady, setPanelContainer],\n  );\n\n  return (\n    <LayoutRefsContext.Provider value={refsValue}>\n      <LayoutActionsContext.Provider value={actionsValue}>\n        <LayoutStateContext.Provider value={stateValue}>\n          <LayoutPanelTransitionContext.Provider\n            value={{\n              isClippingPanels: panelTransitionCount > 0,\n              registerPanelTransition,\n            }}\n          >\n            {children}\n          </LayoutPanelTransitionContext.Provider>\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n/**\n * Private: `true` inside a Layout region (Content, Pane, Panel and the other\n * parts that reset the context) and inside a Layout that is itself nested, so\n * a footer rendered there is not page-level. Not reset by `LayoutContextReset`,\n * and not part of the public Layout context API.\n */\nexport const LayoutNestedContext = createContext(false);\n\n/**\n * Provider that resets the layout context for sub-components.\n * Used to prevent panels in nested Layouts from affecting parent layouts.\n */\nexport function LayoutContextReset({ children }: { children: ReactNode }) {\n  return (\n    <LayoutNestedContext.Provider value>\n      <LayoutRefsContext.Provider value={null}>\n        <LayoutActionsContext.Provider value={null}>\n          <LayoutStateContext.Provider value={null}>\n            <LayoutPanelTransitionContext.Provider value={null}>\n              {children}\n            </LayoutPanelTransitionContext.Provider>\n          </LayoutStateContext.Provider>\n        </LayoutActionsContext.Provider>\n      </LayoutRefsContext.Provider>\n    </LayoutNestedContext.Provider>\n  );\n}\n\n// Panel context - provides panel-level callbacks to child components\nexport interface LayoutPanelContextValue {\n  /** Callback to change the panel's open state */\n  onOpenChange: (isOpen: boolean) => void;\n  /** Current open state of the panel */\n  isOpen: boolean;\n}\n\nexport const LayoutPanelContext = createContext<LayoutPanelContextValue | null>(\n  null,\n);\n\nexport function useLayoutPanelContext(): LayoutPanelContextValue | null {\n  return useContext(LayoutPanelContext);\n}\n"],"mappings":"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"}

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

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

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

@@ -1,15 +1,15 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+import { LayoutNestedContext } from "./LayoutContext.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
-import { forwardRef } from "react";
+import { forwardRef, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/content/Layout/LayoutFooter.tsx
 const FooterElement = tasty(_LayoutContent, {
 	as: "footer",
 	qa: "LayoutFooter",
-	role: "contentinfo",
 	styles: {
 		container: "none",
 		height: "min 5x",
@@ -33,7 +33,7 @@ const FooterElement = tasty(_LayoutContent, {
 	}
 });
 function LayoutFooter(props, ref) {
-	const $ = c(15);
+	const $ = c(16);
 	let children;
 	let invertOrder;
 	let mods;
@@ -66,9 +66,11 @@ function LayoutFooter(props, ref) {
 		$[8] = t1;
 	} else t1 = $[8];
 	const finalMods = t1;
-	let t2;
-	if ($[9] !== children || $[10] !== finalMods || $[11] !== otherProps || $[12] !== ref || $[13] !== scrollbar) {
-		t2 = /* @__PURE__ */ jsx(FooterElement, {
+	const t2 = useContext(LayoutNestedContext) ? "none" : "contentinfo";
+	let t3;
+	if ($[9] !== children || $[10] !== finalMods || $[11] !== otherProps || $[12] !== ref || $[13] !== scrollbar || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(FooterElement, {
+			role: t2,
 			...otherProps,
 			ref,
 			mods: finalMods,
@@ -81,8 +83,9 @@ function LayoutFooter(props, ref) {
 		$[12] = ref;
 		$[13] = scrollbar;
 		$[14] = t2;
-	} else t2 = $[14];
-	return t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 }
 const _LayoutFooter = forwardRef(LayoutFooter);
 _LayoutFooter.displayName = "Layout.Footer";

package/dist/components/content/Layout/LayoutFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutFooter.js","names":["tasty","ForwardedRef","forwardRef","CubeLayoutContentProps","LayoutContent","FooterElement","as","qa","role","styles","container","height","flexShrink","flexGrow","whiteSpace","border","Inner","display","flow","inverted","placeContent","placeItems","gap","CubeLayoutFooterProps","invertOrder","LayoutFooter","props","ref","$","_c","children","mods","otherProps","t0","scrollbar","undefined","t1","finalMods","t2","_LayoutFooter","displayName"],"sources":["../../../../src/components/content/Layout/LayoutFooter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst FooterElement = tasty(LayoutContent, {\n  as: 'footer',\n  qa: 'LayoutFooter',\n  role: 'contentinfo',\n  styles: {\n    container: 'none',\n    // Footer inherits auto-border from LayoutContent\n    // (no border when last-child, which is typical for footers)\n    height: 'min 5x',\n    flexShrink: 0,\n    flexGrow: 0,\n    whiteSpace: 'nowrap',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      display: 'flex',\n      flow: {\n        '': 'row nowrap',\n        inverted: 'row-reverse nowrap',\n      },\n      placeContent: 'center space-between',\n      placeItems: 'center stretch',\n      gap: '1x',\n    },\n  },\n});\n\nexport interface CubeLayoutFooterProps extends CubeLayoutContentProps {\n  /** Inverts the order of children (primary action on right) */\n  invertOrder?: boolean;\n}\n\nfunction LayoutFooter(\n  props: CubeLayoutFooterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    invertOrder,\n    scrollbar = 'tiny',\n    mods,\n    ...otherProps\n  } = props;\n\n  const finalMods = {\n    inverted: invertOrder,\n    ...mods,\n  };\n\n  return (\n    <FooterElement\n      {...otherProps}\n      ref={ref}\n      mods={finalMods}\n      scrollbar={scrollbar}\n    >\n      {children}\n    </FooterElement>\n  );\n}\n\nconst _LayoutFooter = forwardRef(LayoutFooter);\n\n_LayoutFooter.displayName = 'Layout.Footer';\n\nexport { _LayoutFooter as LayoutFooter };\n"],"mappings":";;;;;;;;AAKA,MAAMK,gBAAgBL,MAAMI,gBAAe;CACzCE,IAAI;CACJC,IAAI;CACJC,MAAM;CACNC,QAAQ;EACNC,WAAW;EAGXC,QAAQ;EACRC,YAAY;EACZC,UAAU;EACVC,YAAY;EACZC,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAEDC,OAAO;GACLC,SAAS;GACTC,MAAM;IACJ,IAAI;IACJC,UAAU;IACX;GACDC,cAAc;GACdC,YAAY;GACZC,KAAK;GACP;EACF;CACD,CAAC;AAOF,SAAAG,aAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAO;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAL,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAI,UAAAN,aAAAU,WAAAD,IAAAF,SAAAC,cAMIN;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAJ;AAAAI,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;QAAA;AAAAH,aAAAF,EAAA;AAAAJ,gBAAAI,EAAA;AAAAG,SAAAH,EAAA;AAAAI,eAAAJ,EAAA;AAAAK,OAAAL,EAAA;;CAHR,MAAAM,YAAAD,OAAAE,SAAA,SAAAF;CAAkB,IAAAG;AAAA,KAAAR,EAAA,OAAAJ,eAAAI,EAAA,OAAAG,MAAA;AAKFK,OAAA;GAAAjB,UACNK;GAAW,GAClBO;GACJ;AAAAH,IAAA,KAAAJ;AAAAI,IAAA,KAAAG;AAAAH,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAHD,MAAAS,YAAkBD;CAGhB,IAAAE;AAAA,KAAAV,EAAA,OAAAE,YAAAF,EAAA,QAAAS,aAAAT,EAAA,QAAAI,cAAAJ,EAAA,QAAAD,OAAAC,EAAA,QAAAM,WAAA;AAGAI,OAAA,oBAAC;GAAa,GACRN;GACCL;GACCU,MAAAA;GACKH;GAEVJ;IACa;AAAAF,IAAA,KAAAE;AAAAF,IAAA,MAAAS;AAAAT,IAAA,MAAAI;AAAAJ,IAAA,MAAAD;AAAAC,IAAA,MAAAM;AAAAN,IAAA,MAAAU;OAAAA,MAAAV,EAAA;AAAA,QAPhBU;;AAWJ,MAAMC,gBAAgBrC,WAAWuB,aAAa;AAE9Cc,cAAcC,cAAc"}
+{"version":3,"file":"LayoutFooter.js","names":["tasty","ForwardedRef","forwardRef","useContext","CubeLayoutContentProps","LayoutContent","LayoutNestedContext","FooterElement","as","qa","styles","container","height","flexShrink","flexGrow","whiteSpace","border","Inner","display","flow","inverted","placeContent","placeItems","gap","CubeLayoutFooterProps","invertOrder","LayoutFooter","props","ref","$","_c","children","mods","otherProps","t0","scrollbar","undefined","t1","finalMods","isNested","t2","t3","_LayoutFooter","displayName"],"sources":["../../../../src/components/content/Layout/LayoutFooter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useContext } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\nimport { LayoutNestedContext } from './LayoutContext';\n\nconst FooterElement = tasty(LayoutContent, {\n  as: 'footer',\n  qa: 'LayoutFooter',\n  styles: {\n    container: 'none',\n    // Footer inherits auto-border from LayoutContent\n    // (no border when last-child, which is typical for footers)\n    height: 'min 5x',\n    flexShrink: 0,\n    flexGrow: 0,\n    whiteSpace: 'nowrap',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      display: 'flex',\n      flow: {\n        '': 'row nowrap',\n        inverted: 'row-reverse nowrap',\n      },\n      placeContent: 'center space-between',\n      placeItems: 'center stretch',\n      gap: '1x',\n    },\n  },\n});\n\nexport interface CubeLayoutFooterProps extends CubeLayoutContentProps {\n  /** Inverts the order of children (primary action on right) */\n  invertOrder?: boolean;\n}\n\nfunction LayoutFooter(\n  props: CubeLayoutFooterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    invertOrder,\n    scrollbar = 'tiny',\n    mods,\n    ...otherProps\n  } = props;\n\n  const finalMods = {\n    inverted: invertOrder,\n    ...mods,\n  };\n\n  // `contentinfo` is a page-level landmark: only the footer of a top-level\n  // Layout gets it. Inside a panel or a nested Layout, `none` also cancels the\n  // implicit `contentinfo` of the `<footer>` element. An explicit `role` wins.\n  const isNested = useContext(LayoutNestedContext);\n\n  return (\n    <FooterElement\n      role={isNested ? 'none' : 'contentinfo'}\n      {...otherProps}\n      ref={ref}\n      mods={finalMods}\n      scrollbar={scrollbar}\n    >\n      {children}\n    </FooterElement>\n  );\n}\n\nconst _LayoutFooter = forwardRef(LayoutFooter);\n\n_LayoutFooter.displayName = 'Layout.Footer';\n\nexport { _LayoutFooter as LayoutFooter };\n"],"mappings":";;;;;;;;;AAMA,MAAMO,gBAAgBP,MAAMK,gBAAe;CACzCG,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,WAAW;EAGXC,QAAQ;EACRC,YAAY;EACZC,UAAU;EACVC,YAAY;EACZC,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAEDC,OAAO;GACLC,SAAS;GACTC,MAAM;IACJ,IAAI;IACJC,UAAU;IACX;GACDC,cAAc;GACdC,YAAY;GACZC,KAAK;GACP;EACF;CACD,CAAC;AAOF,SAAAG,aAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAO;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAL,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAI,UAAAN,aAAAU,WAAAD,IAAAF,SAAAC,cAMIN;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAJ;AAAAI,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;QAAA;AAAAH,aAAAF,EAAA;AAAAJ,gBAAAI,EAAA;AAAAG,SAAAH,EAAA;AAAAI,eAAAJ,EAAA;AAAAK,OAAAL,EAAA;;CAHR,MAAAM,YAAAD,OAAAE,SAAA,SAAAF;CAAkB,IAAAG;AAAA,KAAAR,EAAA,OAAAJ,eAAAI,EAAA,OAAAG,MAAA;AAKFK,OAAA;GAAAjB,UACNK;GAAW,GAClBO;GACJ;AAAAH,IAAA,KAAAJ;AAAAI,IAAA,KAAAG;AAAAH,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAHD,MAAAS,YAAkBD;CAYR,MAAAG,KAJOrC,WAAWG,oBAAoB,GAItC,SAAA;CAAiC,IAAAmC;AAAA,KAAAZ,EAAA,OAAAE,YAAAF,EAAA,QAAAS,aAAAT,EAAA,QAAAI,cAAAJ,EAAA,QAAAD,OAAAC,EAAA,QAAAM,aAAAN,EAAA,QAAAW,IAAA;AADzCC,OAAA,oBAAC;GACO,MAAAD;GAAiC,GACnCP;GACCL;GACCU,MAAAA;GACKH;GAEVJ;IACa;AAAAF,IAAA,KAAAE;AAAAF,IAAA,MAAAS;AAAAT,IAAA,MAAAI;AAAAJ,IAAA,MAAAD;AAAAC,IAAA,MAAAM;AAAAN,IAAA,MAAAW;AAAAX,IAAA,MAAAY;OAAAA,MAAAZ,EAAA;AAAA,QARhBY;;AAYJ,MAAMC,gBAAgBxC,WAAWwB,aAAa;AAE9CgB,cAAcC,cAAc"}

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/Button/Button.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/content/Layout/LayoutPanel.d.ts

@@ -15,7 +15,8 @@ interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
    * Panel rendering mode:
    * - `default`: Standard panel that pushes content aside
    * - `sticky`: Panel floats over content without pushing it
-   * - `overlay`: Panel with dismissable backdrop overlay
+   * - `overlay`: Panel with dismissable backdrop overlay; focus moves into it
+   *   when it opens and back to the opener when it closes
    * - `dialog`: Panel renders as a modal dialog
    */
   mode?: LayoutPanelMode;
@@ -40,7 +41,8 @@ interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
   /** Enable slide transition on open/close */
   hasTransition?: boolean;
   /**
-   * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.
+   * Whether the panel can be dismissed by clicking the overlay (overlay mode), pressing Escape,
+   * or, in overlay mode, moving focus into the main content.
    * Only applies to `overlay` and `dialog` modes. Default: true
    */
   isDismissable?: boolean;
@@ -56,8 +58,10 @@ interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
   defaultIsDialogOpen?: boolean;
   /** Dialog open state change callback */
   onDialogOpenChange?: (isOpen: boolean) => void;
-  /** Props passed to Dialog component when in dialog mode */
+  /** Props passed to DialogContainer when in dialog mode */
   dialogProps?: Omit<CubeDialogContainerProps, 'isDismissable' | 'onDismiss' | 'isOpen'>;
+  /** Styles for the Dialog root in dialog mode, separate from inline panel styles. */
+  dialogStyles?: Styles;
   /** Padding for content areas inside the panel. Default: '1x' */
   contentPadding?: Styles['padding'];
   /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */

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

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useLocalStorage } from "../../../utils/react/useLocalStorage.js";
 import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
+import { focusProgrammatically } from "../../../utils/react/programmaticFocus.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DialogContainer } from "../../overlays/Dialog/DialogContainer.js";
@@ -17,6 +18,7 @@ import { forwardRef, useCallback, useEffect, useEffectEvent, useLayoutEffect, us
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { useFocusRing, useHover, useMove } from "react-aria";
+import { getFocusableTreeWalker } from "@react-aria/focus";
 
 //#region src/components/content/Layout/LayoutPanel.tsx
 const HANDLER_WIDTH = 9;
@@ -306,7 +308,7 @@ function LayoutPanel(props, ref) {
 	const layoutState = useLayoutStateContext();
 	const layoutRefs = useLayoutRefsContext();
 	if (!layoutActions || !layoutState || !layoutRefs) throw new Error("Layout.Panel must be used within a Layout component. Ensure your panel is rendered inside a <Layout> parent.");
-	const { side = "left", mode: modeProp, size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition: hasTransitionProp, isDismissable = true, overlayStyles, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, contentPadding, sizeStorageKey, children, styles, mods, ...otherProps } = props;
+	const { side = "left", mode: modeProp, size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition: hasTransitionProp, isDismissable = true, overlayStyles, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, dialogStyles, contentPadding, sizeStorageKey, children, styles, mods, ...otherProps } = props;
 	const mode = modeProp ?? (isDialog ? "dialog" : "default");
 	const isDialogMode = mode === "dialog";
 	const isOverlayMode = mode === "overlay";
@@ -461,7 +463,15 @@ function LayoutPanel(props, ref) {
 		effectiveInsetSize,
 		updatePanelSize
 	]);
+	const closeRequestedRef = useRef(false);
 	const handleOpenChange = useCallback((newIsOpen) => {
+		if (!newIsOpen) {
+			if (closeRequestedRef.current) return;
+			closeRequestedRef.current = true;
+			queueMicrotask(() => {
+				closeRequestedRef.current = false;
+			});
+		}
 		setInternalIsOpen(newIsOpen);
 		onOpenChange?.(newIsOpen);
 	}, [onOpenChange]);
@@ -478,6 +488,42 @@ function LayoutPanel(props, ref) {
 		registerOverlayPanel,
 		handleOpenChange
 	]);
+	const openerRef = useRef(null);
+	const panelNodeRef = useRef(null);
+	const mountFocusRef = useRef(null);
+	const recordOpener = useEffectEvent(() => {
+		const active = mountFocusRef.current ?? panelNodeRef.current?.ownerDocument.activeElement ?? null;
+		mountFocusRef.current = null;
+		openerRef.current = isOverlayMode && isReady && !panelNodeRef.current?.contains(active) ? active : null;
+	});
+	const moveFocusIn = useEffectEvent(() => {
+		const panel = panelNodeRef.current;
+		const opener = openerRef.current;
+		const active_0 = panel?.ownerDocument.activeElement;
+		if (!panel || !opener || active_0 !== opener && active_0 !== lastReturnedFocus) return;
+		focusProgrammatically(getFocusableTreeWalker(panel, { tabbable: true }).nextNode() ?? getFocusableTreeWalker(panel).nextNode(), { preventScroll: true });
+	});
+	const returnFocus = useEffectEvent(() => {
+		const opener_0 = openerRef.current;
+		const panel_0 = panelNodeRef.current;
+		openerRef.current = null;
+		if (!isOverlayMode || !(opener_0 instanceof HTMLElement) || !opener_0.isConnected || opener_0 === opener_0.ownerDocument.body) return;
+		const active_1 = opener_0.ownerDocument.activeElement;
+		if (active_1 != null && active_1 !== opener_0.ownerDocument.body && !panel_0?.contains(active_1)) return;
+		focusProgrammatically(opener_0, { preventScroll: true });
+		lastReturnedFocus = opener_0;
+		queueMicrotask(() => {
+			lastReturnedFocus = null;
+		});
+	});
+	useLayoutEffect(() => {
+		if (isOpen) recordOpener();
+	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		moveFocusIn();
+		return () => returnFocus();
+	}, [isOpen]);
 	const handleDialogOpenChange = useCallback((newIsOpen_0) => {
 		setInternalIsDialogOpen(newIsOpen_0);
 		onDialogOpenChange?.(newIsOpen_0);
@@ -541,6 +587,7 @@ function LayoutPanel(props, ref) {
 	]);
 	const renderPanelContent = (offscreen = false, transitionRef_0) => {
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			isOverlayMode && /* @__PURE__ */ jsx(OpenerProbe, { focusRef: mountFocusRef }),
 			isOverlayMode && /* @__PURE__ */ jsx(OverlayBackdrop, {
 				mods: { visible: isOverlayMode && !offscreen },
 				styles: overlayStyles,
@@ -548,7 +595,10 @@ function LayoutPanel(props, ref) {
 				onClick: handleDismiss
 			}),
 			/* @__PURE__ */ jsx(PanelElement, {
-				ref: (node_0) => panelRefCallback(node_0, transitionRef_0),
+				ref: (node_0) => {
+					if (node_0) panelNodeRef.current = node_0;
+					panelRefCallback(node_0, transitionRef_0);
+				},
 				...filterBaseProps(otherProps, { eventProps: true }),
 				mods: {
 					...panelMods,
@@ -583,6 +633,7 @@ function LayoutPanel(props, ref) {
 		...dialogProps,
 		children: /* @__PURE__ */ jsx(Dialog, {
 			isDismissable: false,
+			styles: dialogStyles,
 			children: /* @__PURE__ */ jsx(LayoutPanelContext.Provider, {
 				value: dialogPanelContextValue,
 				children: /* @__PURE__ */ jsx(LayoutContextReset, { children })
@@ -607,6 +658,27 @@ function LayoutPanel(props, ref) {
 	if (!isOpen) return null;
 	return createPortal(renderPanelContent(false), portalContainer);
 }
+let lastReturnedFocus = null;
+function OpenerProbe(t0) {
+	const $ = c(3);
+	const { focusRef } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== focusRef) {
+		t1 = () => {
+			focusRef.current = document.activeElement;
+		};
+		t2 = [focusRef];
+		$[0] = focusRef;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useLayoutEffect(t1, t2);
+	return null;
+}
 const _LayoutPanel = forwardRef(LayoutPanel);
 _LayoutPanel.displayName = "Layout.Panel";