@cube-dev/ui-kit 0.116.3 → 0.118.0

package/dist/components/content/Footer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/content/Header.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { extractStyles } from "../../tasty/utils/styles.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "../../tasty/styles/list.js";
 import { tasty } from "../../tasty/tasty.js";

package/dist/components/content/HotKeys/HotKeys.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";

package/dist/components/content/Item/Item.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
 import { tasty } from "../../../tasty/tasty.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";

package/dist/components/content/ItemBadge/ItemBadge.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";

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

@@ -18,6 +18,8 @@ interface CubeLayoutProps extends BaseProps, OuterStyleProps, BlockStyleProps, C
   contentPadding?: Styles['padding'];
   /** Enable transition animation for Inner content when panels open/close */
   hasTransition?: boolean;
+  /** Minimum size reserved for the content area between panels. Default: 320 */
+  minContentSize?: number;
   /** Styles for wrapper and Inner sub-element */
   styles?: Styles;
   children?: ReactNode;

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { isDevEnv } from "../../../tasty/utils/is-dev-env.js";
 import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
@@ -10,6 +10,7 @@ import { Alert } from "../Alert/Alert.js";
 import { LayoutProvider, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useResizeObserver } from "@react-aria/utils";
 
 //#region src/components/content/Layout/Layout.tsx
 const LayoutElement = tasty({
@@ -58,8 +59,15 @@ function LayoutInner(props) {
 	const localRef = useRef(null);
 	const [isAutoHeight, setIsAutoHeight] = useState(false);
 	const [isCollapsed, setIsCollapsed] = useState(false);
-	const { isGrid, columns, rows, template, contentPadding, hasTransition = false, styles, children, style, forwardedRef, innerRef: innerRefProp, innerProps, _forceShowDevWarning, doNotOverflow, ...otherProps } = props;
+	const { isGrid, columns, rows, template, contentPadding, hasTransition = false, minContentSize, styles, children, style, forwardedRef, innerRef: innerRefProp, innerProps, _forceShowDevWarning, doNotOverflow, ...otherProps } = props;
 	const combinedInnerRef = useCombinedRefs(innerRefProp);
+	const updateContainerSize = layoutActions?.updateContainerSize;
+	useResizeObserver({
+		ref: localRef,
+		onResize: useCallback(() => {
+			if (localRef.current) updateContainerSize?.(localRef.current.offsetWidth, localRef.current.offsetHeight);
+		}, [updateContainerSize])
+	});
 	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
 	const innerStyles = extractStyles(otherProps, INNER_STYLES);
 	const isVertical = useMemo(() => {
@@ -201,9 +209,10 @@ function LayoutInner(props) {
 * Uses a two-element architecture (wrapper + content) to ensure content never overflows.
 */
 function Layout(props, ref) {
-	const { hasTransition } = props;
+	const { hasTransition, minContentSize } = props;
 	return /* @__PURE__ */ jsx(LayoutProvider, {
 		hasTransition,
+		minContentSize,
 		children: /* @__PURE__ */ jsx(LayoutInner, {
 			...props,
 			forwardedRef: ref

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","names":[],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  extractStyles,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { isDevEnv } from '../../../tasty/utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Alert } from '../Alert';\n\nimport {\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\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  /** 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    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\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\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  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={insetStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {showDevWarning ? (\n        <Alert theme=\"danger\">\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      ) : (\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\n            ref={layoutRefs?.setPanelContainer}\n            data-element=\"PanelContainer\"\n          />\n        </>\n      )}\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 } = props;\n\n  return (\n    <LayoutProvider hasTransition={hasTransition}>\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":[],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  extractStyles,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { isDevEnv } from '../../../tasty/utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Alert } from '../Alert';\n\nimport {\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\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    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\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  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={insetStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {showDevWarning ? (\n        <Alert theme=\"danger\">\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      ) : (\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\n            ref={layoutRefs?.setPanelContainer}\n            data-element=\"PanelContainer\"\n          />\n        </>\n      )}\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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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { forwardRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _LayoutContainer } from "./LayoutContainer.js";
 import { forwardRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
 import { INNER_STYLES, OUTER_STYLES } from "../../../tasty/styles/list.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ function useLayoutActionsContext() {
 function useLayoutStateContext() {
 	return useContext(LayoutStateContext);
 }
-function LayoutProvider({ children, hasTransition = false }) {
+function LayoutProvider({ children, hasTransition = false, minContentSize = 320 }) {
 	const registeredPanels = useRef(/* @__PURE__ */ new Set());
 	const overlayPanelCallbacks = useRef(/* @__PURE__ */ new Set());
 	const panelContainerRef = useRef(null);
@@ -34,6 +34,8 @@ function LayoutProvider({ children, hasTransition = false }) {
 	const [isDragging, setIsDragging] = useState(false);
 	const [isReady, setIsReady] = useState(false);
 	const [hasOverlayPanels, setHasOverlayPanels] = useState(false);
+	const [containerWidth, setContainerWidth] = useState(0);
+	const [containerHeight, setContainerHeight] = useState(0);
 	const updatePanelSize = useEvent((side, size) => {
 		setPanelSizes((prev) => {
 			if (prev[side] === size) return prev;
@@ -71,26 +73,36 @@ function LayoutProvider({ children, hasTransition = false }) {
 	const dismissOverlayPanels = useEvent(() => {
 		overlayPanelCallbacks.current.forEach((dismiss) => dismiss());
 	});
+	const updateContainerSize = useEvent((width, height) => {
+		setContainerWidth((prev) => prev === width ? prev : width);
+		setContainerHeight((prev) => prev === height ? prev : height);
+	});
 	const actionsValue = useMemo(() => ({
 		registerPanel,
 		unregisterPanel,
 		updatePanelSize,
 		setDragging,
 		markReady,
+		updateContainerSize,
 		hasTransition,
+		minContentSize,
 		registerOverlayPanel,
 		dismissOverlayPanels
-	}), [hasTransition]);
+	}), [hasTransition, minContentSize]);
 	const stateValue = useMemo(() => ({
 		panelSizes,
 		isDragging,
 		isReady,
-		hasOverlayPanels
+		hasOverlayPanels,
+		containerWidth,
+		containerHeight
 	}), [
 		panelSizes,
 		isDragging,
 		isReady,
-		hasOverlayPanels
+		hasOverlayPanels,
+		containerWidth,
+		containerHeight
 	]);
 	const refsValue = useMemo(() => ({
 		panelContainerRef,

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutContext.js","names":[],"sources":["../../../../src/components/content/Layout/LayoutContext.tsx"],"sourcesContent":["import {\n  createContext,\n  MutableRefObject,\n  ReactNode,\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  /** 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}\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}\n\nexport const LayoutActionsContext =\n  createContext<LayoutActionsContextValue | null>(null);\nexport const LayoutStateContext = createContext<LayoutStateContextValue | null>(\n  null,\n);\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}\n\nexport function LayoutProvider({\n  children,\n  hasTransition = false,\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\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  // Actions context - stable because all callbacks use useEvent\n  const actionsValue = useMemo(\n    () => ({\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      hasTransition,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    }),\n    // Only hasTransition can change - all other values are stable useEvent callbacks\n    [hasTransition],\n  );\n\n  // State context - changes when state updates\n  const stateValue = useMemo(\n    () => ({\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n    }),\n    [panelSizes, isDragging, isReady, hasOverlayPanels],\n  );\n\n  // Refs context - includes container ready state\n  const refsValue = useMemo(\n    () => ({\n      panelContainerRef,\n      isPanelContainerReady,\n      setPanelContainer,\n    }),\n    [isPanelContainerReady],\n  );\n\n  return (\n    <LayoutRefsContext.Provider value={refsValue}>\n      <LayoutActionsContext.Provider value={actionsValue}>\n        <LayoutStateContext.Provider value={stateValue}>\n          {children}\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          {children}\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":[],"sources":["../../../../src/components/content/Layout/LayoutContext.tsx"],"sourcesContent":["import {\n  createContext,\n  MutableRefObject,\n  ReactNode,\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\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 [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 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 - all other values are stable useEvent callbacks\n    [hasTransition, minContentSize],\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],\n  );\n\n  return (\n    <LayoutRefsContext.Provider value={refsValue}>\n      <LayoutActionsContext.Provider value={actionsValue}>\n        <LayoutStateContext.Provider value={stateValue}>\n          {children}\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          {children}\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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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { forwardRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { forwardRef, useMemo } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { forwardRef } from "react";

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

@@ -20,6 +20,8 @@ interface CubeLayoutHeaderProps extends CubeLayoutContentProps {
    * Uses Link component which integrates with the navigation provider.
    */
   breadcrumbs?: Array<[label: string, href: string]>;
+  /** Callback for the back button. When provided, a back arrow button is rendered to the left of the title. */
+  onBack?: () => void;
 }
 declare const _LayoutHeader: react.ForwardRefExoticComponent<CubeLayoutHeaderProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion

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

@@ -1,11 +1,13 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { tasty } from "../../../tasty/tasty.js";
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { SlashIcon } from "../../../icons/SlashIcon.js";
+import { Button } from "../../actions/Button/Button.js";
 import { Link } from "../../actions/Link/Link.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { Fragment, forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowLeft } from "@tabler/icons-react";
 
 //#region src/components/content/Layout/LayoutHeader.tsx
 const HeaderElement = tasty(_LayoutContent, {
@@ -20,15 +22,22 @@ const HeaderElement = tasty(_LayoutContent, {
 			$: ">",
 			display: "grid",
 			gridTemplate: `
-        "breadcrumbs breadcrumbs breadcrumbs" auto
-        "title suffix extra" 1fr
-        "subtitle subtitle extra" auto
-        / max-content 1fr minmax(0, auto)
+        "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" auto
+        "back title suffix extra" 1fr
+        ".. subtitle subtitle extra" auto
+        / auto max-content 1fr minmax(0, auto)
       `,
 			gap: 0,
 			placeContent: "stretch",
 			placeItems: "center stretch"
 		},
+		Back: {
+			$: "> Inner >",
+			gridArea: "back",
+			display: "flex",
+			placeItems: "center",
+			margin: ".5x right"
+		},
 		Breadcrumbs: {
 			$: "> Inner >",
 			gridArea: "breadcrumbs",
@@ -81,7 +90,7 @@ const HeaderElement = tasty(_LayoutContent, {
 	}
 });
 function LayoutHeader(props, ref) {
-	const { title, level = 3, suffix, extra, subtitle, breadcrumbs, scrollbar = "tiny", children, mods, ...otherProps } = props;
+	const { title, level = 3, suffix, extra, subtitle, breadcrumbs, onBack, scrollbar = "tiny", children, mods, ...otherProps } = props;
 	const { labelRef, renderWithTooltip } = useAutoTooltip({
 		tooltip: true,
 		children: typeof title === "string" ? title : void 0
@@ -120,6 +129,15 @@ function LayoutHeader(props, ref) {
 		scrollbar,
 		children: [
 			renderBreadcrumbs(),
+			onBack && /* @__PURE__ */ jsx("div", {
+				"data-element": "Back",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "neutral",
+					icon: /* @__PURE__ */ jsx(IconArrowLeft, {}),
+					"aria-label": "Go back",
+					onPress: onBack
+				})
+			}),
 			renderWithTooltip(renderTitle, "bottom"),
 			suffix && /* @__PURE__ */ jsx("div", {
 				"data-element": "Suffix",

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutHeader.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefCallback,\n} from 'react';\n\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { tasty } from '../../../tasty';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs\" auto\n        \"title suffix extra\" 1fr\n        \"subtitle subtitle extra\" auto\n        / max-content 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'stretch',\n      placeItems: 'center stretch',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '1bw',\n      preset: 't3 strong',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'end',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: true,\n    children: typeof title === 'string' ? title : undefined,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (\n    tooltipProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: Ref<HTMLElement>,\n  ) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    return (\n      <TitleTag\n        ref={tooltipRef as Ref<HTMLHeadingElement>}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        <span ref={labelRef as RefCallback<HTMLSpanElement>}>{title}</span>\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EAEX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,GAAG;GACH,SAAS;GACT,cAAc;;;;;;GAMd,KAAK;GACL,cAAc;GACd,YAAY;GACb;EAED,aAAa;GACX,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,OAAO;GACR;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACZ;GACD,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,YAAY;GACb;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACb;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,WAAW;GACX,KAAK;GACL,OAAO;GACR;EAED,UAAU;GACR,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAoBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,QACA,OACA,UACA,aACA,YAAY,QACZ,UACA,MACA,GAAG,eACD;CAGJ,MAAM,EAAE,UAAU,sBAAsB,eAAe;EACrD,SAAS;EACT,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC/C,CAAC;CAEF,MAAM,iBAAiB,eAAe,YAAY,SAAS;CAE3D,MAAM,0BAA0B;AAC9B,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,oBAAC;GAAI,gBAAa;aACf,YAAY,KAAK,CAAC,OAAO,OAAO,UAC/B,qBAAC,uBACC,oBAAC;IAAK,IAAI;cAAO;KAAa,EAC9B,oBAAC,cAAY,KAFA,KAGJ,CACX;IACE;;CAIV,MAAM,eACJ,cACA,eACG;AACH,MAAI,CAAC,MAAO,QAAO;AAInB,SACE,oBAHe,IAAI;GAIjB,KAAK;GACL,gBAAa;GACb,cAAY;GACZ,GAAI;aAEJ,oBAAC;IAAK,KAAK;cAA2C;KAAa;IAC1D;;AAIf,QACE,qBAAC;EACC,GAAI;EACC;EACL,MAAM;GAAE,GAAG;GAAM;GAAO;EACb;;GAEV,mBAAmB;GACnB,kBAAkB,aAAa,SAAS;GACxC,UAAU,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACnD,SAAS,oBAAC;IAAI,gBAAa;cAAS;KAAY;GAChD,YAAY,oBAAC;IAAI,gBAAa;cAAY;KAAe;GACzD;;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
+{"version":3,"file":"LayoutHeader.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import { IconArrowLeft } from '@tabler/icons-react';\nimport {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefCallback,\n} from 'react';\n\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { tasty } from '../../../tasty';\nimport { Button } from '../../actions/Button/Button';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs breadcrumbs\" auto\n        \"back title suffix extra\" 1fr\n        \".. subtitle subtitle extra\" auto\n        / auto max-content 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'stretch',\n      placeItems: 'center stretch',\n    },\n\n    Back: {\n      $: '> Inner >',\n      gridArea: 'back',\n      display: 'flex',\n      placeItems: 'center',\n      margin: '.5x right',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '1bw',\n      preset: 't3 strong',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'end',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n  /** Callback for the back button. When provided, a back arrow button is rendered to the left of the title. */\n  onBack?: () => void;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    onBack,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: true,\n    children: typeof title === 'string' ? title : undefined,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (\n    tooltipProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: Ref<HTMLElement>,\n  ) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    return (\n      <TitleTag\n        ref={tooltipRef as Ref<HTMLHeadingElement>}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        <span ref={labelRef as RefCallback<HTMLSpanElement>}>{title}</span>\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {onBack && (\n        <div data-element=\"Back\">\n          <Button\n            type=\"neutral\"\n            icon={<IconArrowLeft />}\n            aria-label=\"Go back\"\n            onPress={onBack}\n          />\n        </div>\n      )}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EAEX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,GAAG;GACH,SAAS;GACT,cAAc;;;;;;GAMd,KAAK;GACL,cAAc;GACd,YAAY;GACb;EAED,MAAM;GACJ,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,QAAQ;GACT;EAED,aAAa;GACX,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,OAAO;GACR;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACZ;GACD,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,YAAY;GACb;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACb;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,WAAW;GACX,KAAK;GACL,OAAO;GACR;EAED,UAAU;GACR,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAsBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,QACA,OACA,UACA,aACA,QACA,YAAY,QACZ,UACA,MACA,GAAG,eACD;CAGJ,MAAM,EAAE,UAAU,sBAAsB,eAAe;EACrD,SAAS;EACT,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC/C,CAAC;CAEF,MAAM,iBAAiB,eAAe,YAAY,SAAS;CAE3D,MAAM,0BAA0B;AAC9B,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,oBAAC;GAAI,gBAAa;aACf,YAAY,KAAK,CAAC,OAAO,OAAO,UAC/B,qBAAC,uBACC,oBAAC;IAAK,IAAI;cAAO;KAAa,EAC9B,oBAAC,cAAY,KAFA,KAGJ,CACX;IACE;;CAIV,MAAM,eACJ,cACA,eACG;AACH,MAAI,CAAC,MAAO,QAAO;AAInB,SACE,oBAHe,IAAI;GAIjB,KAAK;GACL,gBAAa;GACb,cAAY;GACZ,GAAI;aAEJ,oBAAC;IAAK,KAAK;cAA2C;KAAa;IAC1D;;AAIf,QACE,qBAAC;EACC,GAAI;EACC;EACL,MAAM;GAAE,GAAG;GAAM;GAAO;EACb;;GAEV,mBAAmB;GACnB,UACC,oBAAC;IAAI,gBAAa;cAChB,oBAAC;KACC,MAAK;KACL,MAAM,oBAAC,kBAAgB;KACvB,cAAW;KACX,SAAS;MACT;KACE;GAEP,kBAAkB,aAAa,SAAS;GACxC,UAAU,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACnD,SAAS,oBAAC;IAAI,gBAAa;cAAS;KAAY;GAChD,YAAY,oBAAC;IAAI,gBAAa;cAAY;KAAe;GACzD;;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
 import { INNER_STYLES, OUTER_STYLES } from "../../../tasty/styles/list.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.116.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
 import { extractStyles } from "../../../tasty/utils/styles.js";
 import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
 import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
@@ -12,7 +12,7 @@ import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.
 import { DialogContainer } from "../../overlays/Dialog/DialogContainer.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { LayoutContextReset, LayoutPanelContext, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
-import { clampSize } from "./utils.js";
+import { clampSize, getOppositeSide, resolveCssSize } from "./utils.js";
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useFocusRing, useHover, useMove } from "react-aria";
@@ -51,12 +51,12 @@ const PanelElement = tasty({
 			"side=right": "initial"
 		},
 		width: {
-			"": "$panel-size",
+			"": "$min-size $panel-size $max-size",
 			"side=top | side=bottom": "100%"
 		},
 		height: {
 			"": "100%",
-			"side=top | side=bottom": "$panel-size"
+			"side=top | side=bottom": "$min-size $panel-size $max-size"
 		},
 		border: {
 			"side=left": "right",
@@ -269,6 +269,18 @@ function LayoutPanel(props, ref) {
 	const combinedRef = useCombinedRefs(ref);
 	const prevProvidedSizeRef = useRef(providedSize);
 	const isHorizontal = side === "left" || side === "right";
+	const { containerWidth, containerHeight } = layoutState;
+	const { minContentSize } = layoutActions;
+	const containerDimension = isHorizontal ? containerWidth : containerHeight;
+	const oppositeSide = getOppositeSide(side);
+	const oppositePanelSize = layoutState.panelSizes[oppositeSide];
+	const ownInsetOffset = isResizable ? RESIZABLE_INSET_OFFSET : 0;
+	const naturalMax = useMemo(() => containerDimension > 0 ? Math.max(0, containerDimension - oppositePanelSize - minContentSize - ownInsetOffset) : Infinity, [
+		containerDimension,
+		oppositePanelSize,
+		minContentSize,
+		ownInsetOffset
+	]);
 	const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
 	const isOpen = providedIsOpen ?? internalIsOpen;
 	const [internalIsDialogOpen, setInternalIsDialogOpen] = useState(defaultIsDialogOpen);
@@ -284,7 +296,17 @@ function LayoutPanel(props, ref) {
 		contentPadding,
 		styles
 	]);
-	const clampValue = useCallback((value) => clampSize(value, minSize, maxSize), [minSize, maxSize]);
+	const resolvedMax = useMemo(() => {
+		if (typeof maxSize === "number") return maxSize;
+		if (typeof maxSize === "string" && containerDimension > 0) return resolveCssSize(maxSize, containerDimension);
+	}, [maxSize, containerDimension]);
+	const effectiveMax = useMemo(() => {
+		const values = [];
+		if (resolvedMax != null) values.push(resolvedMax);
+		if (Number.isFinite(naturalMax)) values.push(naturalMax);
+		return values.length > 0 ? Math.min(...values) : void 0;
+	}, [resolvedMax, naturalMax]);
+	const clampValue = useCallback((value) => clampSize(value, minSize, void 0, effectiveMax), [minSize, effectiveMax]);
 	const setContextDragging = layoutActions.setDragging;
 	const { moveProps } = useMove({
 		onMoveStart() {
@@ -324,6 +346,20 @@ function LayoutPanel(props, ref) {
 		isDragging,
 		clampValue
 	]);
+	useEffect(() => {
+		if (!isDragging && containerDimension > 0) setSize((prev) => {
+			const clamped = clampValue(prev);
+			if (clamped !== prev) {
+				onSizeChange?.(Math.round(clamped));
+				setStoredSize(Math.round(clamped));
+			}
+			return clamped;
+		});
+	}, [
+		isDragging,
+		clampValue,
+		containerDimension
+	]);
 	const effectivePanelSize = isOpen && mode === "default" ? size : 0;
 	const effectiveInsetSize = Math.round(effectivePanelSize + (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0));
 	const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;
@@ -392,14 +428,25 @@ function LayoutPanel(props, ref) {
 		isReady,
 		mods
 	]);
+	const maxSizeCss = useMemo(() => {
+		const parts = [];
+		if (maxSize != null) parts.push(typeof maxSize === "number" ? `${maxSize}px` : maxSize);
+		if (containerDimension > 0 && Number.isFinite(naturalMax)) parts.push(`${naturalMax}px`);
+		if (parts.length === 0) return void 0;
+		return parts.length === 1 ? parts[0] : `min(${parts.join(", ")})`;
+	}, [
+		maxSize,
+		naturalMax,
+		containerDimension
+	]);
 	const panelStyle = useMemo(() => ({
 		"--panel-size": `${size}px`,
 		"--min-size": typeof minSize === "number" ? `${minSize}px` : minSize,
-		"--max-size": maxSize != null ? typeof maxSize === "number" ? `${maxSize}px` : maxSize : void 0
+		"--max-size": maxSizeCss
 	}), [
 		size,
 		minSize,
-		maxSize
+		maxSizeCss
 	]);
 	const panelRefCallback = useCallback((node, transitionRef) => {
 		combinedRef.current = node;