@cube-dev/ui-kit 0.199.1 → 0.199.2

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";
@@ -135,20 +135,15 @@ function LayoutInner(props) {
 		});
 		return () => cancelAnimationFrame(frameId_0);
 	}, [isAutoHeight, hasBox]);
-	const transitionStyle = { ...useMemo(() => {
-		const baseStyle = {
-			"--inset-top": `${panelSizes.top}px`,
-			"--inset-right": `${panelSizes.right}px`,
-			"--inset-bottom": `${panelSizes.bottom}px`,
-			"--inset-left": `${panelSizes.left}px`
-		};
-		if (style) return {
-			...baseStyle,
-			...style
-		};
-		return baseStyle;
-	}, [panelSizes, style]) };
+	const insetTokens = useMemo(() => ({
+		"$inset-top": `${panelSizes.top}px`,
+		"$inset-right": `${panelSizes.right}px`,
+		"$inset-bottom": `${panelSizes.bottom}px`,
+		"$inset-left": `${panelSizes.left}px`
+	}), [panelSizes]);
+	let transitionStyle = style;
 	if (isClippingPanels) {
+		transitionStyle = { ...style };
 		delete transitionStyle.overflowX;
 		delete transitionStyle.overflowY;
 		delete transitionStyle.overflowInline;
@@ -198,6 +193,7 @@ function LayoutInner(props) {
 		...filterBaseProps(otherProps, { eventProps: true }),
 		mods,
 		styles: finalStyles,
+		tokens: insetTokens,
 		style: transitionStyle,
 		onKeyDown: hasOverlayPanels ? handleKeyDown : void 0,
 		children: [

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","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","hasBox","containerWidth","containerHeight","isHeightCheckedRef","isCollapseCheckedRef","element","isShown","insetStyle","baseStyle","transitionStyle","overflowX","overflowY","overflowInline","overflowBlock","overflowClipMargin","mods","dragging","setRefs","showDevWarning","handleInnerFocus","e","inner","currentTarget","contains","target","Node","relatedTarget","handleKeyDown","key","stopPropagation","isDefaultPrevented","preventDefault","eventProps","undefined","setPanelContainer","HTMLElement","checkVisibility","Layout","_c","isInRegion","isInLayout","t0","t1","t2","t3","_Layout","displayName","_c"],"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\n    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  // A Layout under a `display: none` ancestor, such as a closed `hideOnClose`\n  // panel, has no height to judge yet. Each check waits until the Layout is\n  // shown, then runs once. Gaining a box re-runs a pending check, so one first\n  // shown at 0×0 is never judged.\n  const hasBox =\n    (layoutState?.containerWidth ?? 0) > 0 ||\n    (layoutState?.containerHeight ?? 0) > 0;\n  const isHeightCheckedRef = useRef(false);\n  const isCollapseCheckedRef = useRef(false);\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    const element = localRef.current;\n\n    if (!isReady || !element || isHeightCheckedRef.current) return;\n    if (!isShown(element)) return;\n\n    isHeightCheckedRef.current = true;\n\n    if (element.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady, hasBox]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (!isAutoHeight || isCollapseCheckedRef.current) return;\n\n    // Use requestAnimationFrame to check after styles have been applied\n    const frameId = requestAnimationFrame(() => {\n      const element = localRef.current;\n\n      if (!element || !isShown(element)) return;\n\n      isCollapseCheckedRef.current = true;\n\n      if (element.offsetHeight === 0) {\n        setIsCollapsed(true);\n      }\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [isAutoHeight, hasBox]);\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  // An Escape a control inside already handled is its own: a code editor\n  // closing its autocomplete prevents the default and lets the key bubble.\n  // Either way it stops here, so an enclosing dialog doesn't close on it.\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (!hasOverlayPanels || e.key !== 'Escape') return;\n\n      e.stopPropagation();\n\n      if (e.isDefaultPrevented()) return;\n\n      e.preventDefault();\n      dismissOverlayPanels?.();\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 collapsed accordion and a container\n          mid-animation both 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// False under a `display: none` ancestor. jsdom has no `checkVisibility`, so\n// there every Layout counts as shown.\nfunction isShown(element: HTMLElement) {\n  return element.checkVisibility?.() ?? true;\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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"}
+{"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","hasBox","containerWidth","containerHeight","isHeightCheckedRef","isCollapseCheckedRef","element","isShown","insetTokens","transitionStyle","overflowX","overflowY","overflowInline","overflowBlock","overflowClipMargin","mods","dragging","setRefs","showDevWarning","handleInnerFocus","e","inner","currentTarget","contains","target","Node","relatedTarget","handleKeyDown","key","stopPropagation","isDefaultPrevented","preventDefault","eventProps","undefined","setPanelContainer","HTMLElement","checkVisibility","Layout","_c","isInRegion","isInLayout","t0","t1","t2","t3","_Layout","displayName","_c"],"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\n    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  // A Layout under a `display: none` ancestor, such as a closed `hideOnClose`\n  // panel, has no height to judge yet. Each check waits until the Layout is\n  // shown, then runs once. Gaining a box re-runs a pending check, so one first\n  // shown at 0×0 is never judged.\n  const hasBox =\n    (layoutState?.containerWidth ?? 0) > 0 ||\n    (layoutState?.containerHeight ?? 0) > 0;\n  const isHeightCheckedRef = useRef(false);\n  const isCollapseCheckedRef = useRef(false);\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    const element = localRef.current;\n\n    if (!isReady || !element || isHeightCheckedRef.current) return;\n    if (!isShown(element)) return;\n\n    isHeightCheckedRef.current = true;\n\n    if (element.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady, hasBox]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (!isAutoHeight || isCollapseCheckedRef.current) return;\n\n    // Use requestAnimationFrame to check after styles have been applied\n    const frameId = requestAnimationFrame(() => {\n      const element = localRef.current;\n\n      if (!element || !isShown(element)) return;\n\n      isCollapseCheckedRef.current = true;\n\n      if (element.offsetHeight === 0) {\n        setIsCollapsed(true);\n      }\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [isAutoHeight, hasBox]);\n\n  const insetTokens = useMemo(\n    () => ({\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    [panelSizes],\n  );\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  let transitionStyle: CSSProperties | undefined = style;\n  if (isClippingPanels) {\n    transitionStyle = { ...style };\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  // An Escape a control inside already handled is its own: a code editor\n  // closing its autocomplete prevents the default and lets the key bubble.\n  // Either way it stops here, so an enclosing dialog doesn't close on it.\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (!hasOverlayPanels || e.key !== 'Escape') return;\n\n      e.stopPropagation();\n\n      if (e.isDefaultPrevented()) return;\n\n      e.preventDefault();\n      dismissOverlayPanels?.();\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      tokens={insetTokens}\n      // oxlint-disable-next-line react/forbid-component-props -- forwards the consumer's public `style`; while clipping, the overflow shorthand must also beat its inline longhands\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 collapsed accordion and a container\n          mid-animation both 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// False under a `display: none` ancestor. jsdom has no `checkVisibility`, so\n// there every Layout counts as shown.\nfunction isShown(element: HTMLElement) {\n  return element.checkVisibility?.() ?? true;\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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { LayoutContent as _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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { LayoutContainer as _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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | 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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";
@@ -60,7 +60,7 @@ const ContentElement = tasty({
 				"": 0,
 				"(focused | scrolling) & scrollbar=tiny": 1
 			},
-			transition: "opacity 0.15s",
+			transition: "opacity $scrollbar-transition",
 			pointerEvents: "none"
 		},
 		ScrollbarH: {
@@ -76,7 +76,7 @@ const ContentElement = tasty({
 				"": 0,
 				"(focused | scrolling) & scrollbar=tiny": 1
 			},
-			transition: "opacity 0.15s",
+			transition: "opacity $scrollbar-transition",
 			pointerEvents: "none"
 		}
 	}
@@ -97,19 +97,19 @@ function LayoutContent(props, ref) {
 		$[0] = t1;
 	} else t1 = $[0];
 	const { hoverProps, isHovered } = useHover(t1);
-	const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
+	const { handleVTokens, handleHTokens, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
 	let t2;
-	if ($[1] !== handleHStyle || $[2] !== handleVStyle || $[3] !== isTinyScrollbar) {
+	if ($[1] !== handleHTokens || $[2] !== handleVTokens || $[3] !== isTinyScrollbar) {
 		t2 = isTinyScrollbar ? {
-			...handleVStyle,
-			...handleHStyle
-		} : {};
-		$[1] = handleHStyle;
-		$[2] = handleVStyle;
+			...handleVTokens,
+			...handleHTokens
+		} : void 0;
+		$[1] = handleHTokens;
+		$[2] = handleVTokens;
 		$[3] = isTinyScrollbar;
 		$[4] = t2;
 	} else t2 = $[4];
-	const scrollbarStyle = t2;
+	const scrollbarTokens = t2;
 	let t3;
 	if ($[5] !== externalMods || $[6] !== isHovered || $[7] !== isScrolling || $[8] !== scrollbar) {
 		t3 = {
@@ -162,14 +162,14 @@ function LayoutContent(props, ref) {
 		$[21] = t8;
 	} else t8 = $[21];
 	let t9;
-	if ($[22] !== T0 || $[23] !== combinedRef || $[24] !== finalStyles || $[25] !== hoverProps || $[26] !== mods || $[27] !== scrollbarStyle || $[28] !== t4 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8) {
+	if ($[22] !== T0 || $[23] !== combinedRef || $[24] !== finalStyles || $[25] !== hoverProps || $[26] !== mods || $[27] !== scrollbarTokens || $[28] !== t4 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8) {
 		t9 = /* @__PURE__ */ jsxs(T0, {
 			ref: combinedRef,
 			...t4,
 			...hoverProps,
 			mods,
 			styles: finalStyles,
-			style: scrollbarStyle,
+			tokens: scrollbarTokens,
 			children: [
 				t6,
 				t7,
@@ -181,7 +181,7 @@ function LayoutContent(props, ref) {
 		$[24] = finalStyles;
 		$[25] = hoverProps;
 		$[26] = mods;
-		$[27] = scrollbarStyle;
+		$[27] = scrollbarTokens;
 		$[28] = t4;
 		$[29] = t6;
 		$[30] = t7;

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutContent.js","names":["BaseProps","ContainerStyleProps","filterBaseProps","INNER_STYLES","mergeStyles","Mods","OUTER_STYLES","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useRef","useHover","useCombinedRefs","extractStyles","useTinyScrollbar","LayoutContextReset","ContentElement","as","qa","styles","container","position","display","gridColumns","gridRows","placeContent","placeItems","placeSelf","flexGrow","flexShrink","height","overflow","boxSizing","border","Inner","$","flow","padding","scrollbar","ScrollbarV","right","top","width","radius","fill","opacity","transition","pointerEvents","ScrollbarH","bottom","left","ScrollbarType","CubeLayoutContentProps","children","mods","innerRef","HTMLDivElement","innerProps","LayoutContent","props","ref","_c","t0","externalMods","innerRefProp","otherProps","undefined","outerStyles","innerStyles","internalInnerRef","combinedInnerRef","combinedRef","isTinyScrollbar","t1","Symbol","for","hoverProps","isHovered","handleVStyle","handleHStyle","hasOverflowY","hasOverflowX","isScrolling","t2","scrollbarStyle","t3","hovered","scrolling","finalStyles","T0","t4","eventProps","t5","t6","t7","t8","t9","_LayoutContent","displayName","_c"],"sources":["../../../../src/components/content/Layout/LayoutContent.tsx"],"sourcesContent":["import {\n  BaseProps,\n  ContainerStyleProps,\n  filterBaseProps,\n  INNER_STYLES,\n  mergeStyles,\n  Mods,\n  OUTER_STYLES,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useRef,\n} from 'react';\nimport { useHover } from 'react-aria';\n\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContentElement = tasty({\n  as: 'div',\n  qa: 'LayoutContent',\n  styles: {\n    container: 'content / inline-size',\n    position: 'relative',\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    placeSelf: 'stretch',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'min 0',\n    overflow: 'hidden',\n    boxSizing: 'content-box',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      display: 'flex',\n      flow: 'column',\n      padding: '($content-padding, 1x)',\n      overflow: {\n        '': 'auto',\n        'scrollbar=none': 'clip',\n      },\n      placeSelf: 'stretch',\n      scrollbar: {\n        '': 'auto',\n        'scrollbar=thin': 'thin',\n        'scrollbar=tiny | scrollbar=none': 'none',\n      },\n\n      '$layout-border-size': '0',\n    },\n\n    // Custom scrollbar handles (when scrollbar=\"tiny\")\n    ScrollbarV: {\n      $: '>',\n      position: 'absolute',\n      right: '1px',\n      top: '$scrollbar-v-top',\n      width: '1ow',\n      height: '$scrollbar-v-height',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n\n    ScrollbarH: {\n      $: '>',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';\n\nexport interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {\n  /** Scrollbar style: 'default' | 'thin' | 'tiny' | 'none' */\n  scrollbar?: ScrollbarType;\n  children?: ReactNode;\n  /** Additional modifiers to apply */\n  mods?: Mods;\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\nfunction LayoutContent(\n  props: CubeLayoutContentProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    scrollbar = 'thin',\n    styles,\n    mods: externalMods,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n  const internalInnerRef = useRef<HTMLDivElement>(null);\n  const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n  const combinedRef = useCombinedRefs(ref);\n  const isTinyScrollbar = scrollbar === 'tiny';\n  const { hoverProps, isHovered } = useHover({});\n\n  const {\n    handleVStyle,\n    handleHStyle,\n    hasOverflowY,\n    hasOverflowX,\n    isScrolling,\n  } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);\n\n  const scrollbarStyle = isTinyScrollbar\n    ? { ...handleVStyle, ...handleHStyle }\n    : {};\n\n  const mods = {\n    ...externalMods,\n    scrollbar,\n    hovered: isHovered,\n    scrolling: isScrolling,\n  };\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  const finalStyles = mergeStyles(\n    styles,\n    outerStyles,\n    innerStyles ? { Inner: innerStyles } : null,\n  );\n\n  return (\n    <ContentElement\n      ref={combinedRef}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      {...hoverProps}\n      mods={mods}\n      styles={finalStyles}\n      style={scrollbarStyle}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n      {isTinyScrollbar && hasOverflowY && <div data-element=\"ScrollbarV\" />}\n      {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n    </ContentElement>\n  );\n}\n\nconst _LayoutContent = forwardRef(LayoutContent);\n\n_LayoutContent.displayName = 'Layout.Content';\n\nexport { _LayoutContent as LayoutContent };\n"],"mappings":"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"}
+{"version":3,"file":"LayoutContent.js","names":["BaseProps","ContainerStyleProps","filterBaseProps","INNER_STYLES","mergeStyles","Mods","OUTER_STYLES","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useRef","useHover","useCombinedRefs","extractStyles","useTinyScrollbar","LayoutContextReset","ContentElement","as","qa","styles","container","position","display","gridColumns","gridRows","placeContent","placeItems","placeSelf","flexGrow","flexShrink","height","overflow","boxSizing","border","Inner","$","flow","padding","scrollbar","ScrollbarV","right","top","width","radius","fill","opacity","transition","pointerEvents","ScrollbarH","bottom","left","ScrollbarType","CubeLayoutContentProps","children","mods","innerRef","HTMLDivElement","innerProps","LayoutContent","props","ref","_c","t0","externalMods","innerRefProp","otherProps","undefined","outerStyles","innerStyles","internalInnerRef","combinedInnerRef","combinedRef","isTinyScrollbar","t1","Symbol","for","hoverProps","isHovered","handleVTokens","handleHTokens","hasOverflowY","hasOverflowX","isScrolling","t2","scrollbarTokens","t3","hovered","scrolling","finalStyles","T0","t4","eventProps","t5","t6","t7","t8","t9","_LayoutContent","displayName","_c"],"sources":["../../../../src/components/content/Layout/LayoutContent.tsx"],"sourcesContent":["import {\n  BaseProps,\n  ContainerStyleProps,\n  filterBaseProps,\n  INNER_STYLES,\n  mergeStyles,\n  Mods,\n  OUTER_STYLES,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useRef,\n} from 'react';\nimport { useHover } from 'react-aria';\n\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContentElement = tasty({\n  as: 'div',\n  qa: 'LayoutContent',\n  styles: {\n    container: 'content / inline-size',\n    position: 'relative',\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    placeSelf: 'stretch',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'min 0',\n    overflow: 'hidden',\n    boxSizing: 'content-box',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      display: 'flex',\n      flow: 'column',\n      padding: '($content-padding, 1x)',\n      overflow: {\n        '': 'auto',\n        'scrollbar=none': 'clip',\n      },\n      placeSelf: 'stretch',\n      scrollbar: {\n        '': 'auto',\n        'scrollbar=thin': 'thin',\n        'scrollbar=tiny | scrollbar=none': 'none',\n      },\n\n      '$layout-border-size': '0',\n    },\n\n    // Custom scrollbar handles (when scrollbar=\"tiny\")\n    ScrollbarV: {\n      $: '>',\n      position: 'absolute',\n      right: '1px',\n      top: '$scrollbar-v-top',\n      width: '1ow',\n      height: '$scrollbar-v-height',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity $scrollbar-transition',\n      pointerEvents: 'none',\n    },\n\n    ScrollbarH: {\n      $: '>',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity $scrollbar-transition',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';\n\nexport interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {\n  /** Scrollbar style: 'default' | 'thin' | 'tiny' | 'none' */\n  scrollbar?: ScrollbarType;\n  children?: ReactNode;\n  /** Additional modifiers to apply */\n  mods?: Mods;\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\nfunction LayoutContent(\n  props: CubeLayoutContentProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    scrollbar = 'thin',\n    styles,\n    mods: externalMods,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n  const internalInnerRef = useRef<HTMLDivElement>(null);\n  const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n  const combinedRef = useCombinedRefs(ref);\n  const isTinyScrollbar = scrollbar === 'tiny';\n  const { hoverProps, isHovered } = useHover({});\n\n  const {\n    handleVTokens,\n    handleHTokens,\n    hasOverflowY,\n    hasOverflowX,\n    isScrolling,\n  } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);\n\n  const scrollbarTokens = isTinyScrollbar\n    ? { ...handleVTokens, ...handleHTokens }\n    : undefined;\n\n  const mods = {\n    ...externalMods,\n    scrollbar,\n    hovered: isHovered,\n    scrolling: isScrolling,\n  };\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  const finalStyles = mergeStyles(\n    styles,\n    outerStyles,\n    innerStyles ? { Inner: innerStyles } : null,\n  );\n\n  return (\n    <ContentElement\n      ref={combinedRef}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      {...hoverProps}\n      mods={mods}\n      styles={finalStyles}\n      tokens={scrollbarTokens}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n      {isTinyScrollbar && hasOverflowY && <div data-element=\"ScrollbarV\" />}\n      {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n    </ContentElement>\n  );\n}\n\nconst _LayoutContent = forwardRef(LayoutContent);\n\n_LayoutContent.displayName = 'Layout.Content';\n\nexport { _LayoutContent as LayoutContent };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { LayoutNestedContext } from "./LayoutContext.js";
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { LayoutContent as _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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | 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.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | 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";
@@ -128,7 +128,7 @@ const PaneElement = tasty({
 				"": 0,
 				"(focused | scrolling) & scrollbar=tiny": 1
 			},
-			transition: "opacity 0.15s",
+			transition: "opacity $scrollbar-transition",
 			pointerEvents: "none"
 		},
 		ScrollbarH: {
@@ -147,7 +147,7 @@ const PaneElement = tasty({
 				"": 0,
 				"(focused | scrolling) & scrollbar=tiny": 1
 			},
-			transition: "opacity 0.15s",
+			transition: "opacity $scrollbar-transition",
 			pointerEvents: "none"
 		},
 		ResizeHandler: {
@@ -345,7 +345,7 @@ function LayoutPane(props, ref) {
 		$[5] = t5;
 	} else t5 = $[5];
 	const { hoverProps, isHovered } = useHover(t5);
-	const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
+	const { handleVTokens, handleHTokens, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
 	let t6;
 	if ($[6] !== maxSize || $[7] !== minSize) {
 		t6 = (value) => clampSize(value, minSize, maxSize);
@@ -547,17 +547,17 @@ function LayoutPane(props, ref) {
 	} else t15 = $[42];
 	const handleResetSize = t15;
 	let t16;
-	if ($[43] !== handleHStyle || $[44] !== handleVStyle || $[45] !== isTinyScrollbar) {
+	if ($[43] !== handleHTokens || $[44] !== handleVTokens || $[45] !== isTinyScrollbar) {
 		t16 = isTinyScrollbar ? {
-			...handleVStyle,
-			...handleHStyle
-		} : {};
-		$[43] = handleHStyle;
-		$[44] = handleVStyle;
+			...handleVTokens,
+			...handleHTokens
+		} : void 0;
+		$[43] = handleHTokens;
+		$[44] = handleVTokens;
 		$[45] = isTinyScrollbar;
 		$[46] = t16;
 	} else t16 = $[46];
-	const scrollbarStyle = t16;
+	const scrollbarTokens = t16;
 	const t17 = !isResizable;
 	let t18;
 	if ($[47] !== debouncedHandlerHovered || $[48] !== isDragging || $[49] !== isHandlerFocused || $[50] !== isHovered || $[51] !== isScrolling || $[52] !== mods || $[53] !== resizeEdge || $[54] !== scrollbar || $[55] !== t17) {
@@ -588,18 +588,18 @@ function LayoutPane(props, ref) {
 	const t19 = `${size}px`;
 	const t20 = minSize == null ? "initial" : typeof minSize === "number" ? `${minSize}px` : minSize;
 	let t21;
-	if ($[57] !== scrollbarStyle || $[58] !== t19 || $[59] !== t20) {
+	if ($[57] !== scrollbarTokens || $[58] !== t19 || $[59] !== t20) {
 		t21 = {
-			...scrollbarStyle,
-			"--pane-size": t19,
-			"--pane-min-size": t20
+			...scrollbarTokens,
+			"$pane-size": t19,
+			"$pane-min-size": t20
 		};
-		$[57] = scrollbarStyle;
+		$[57] = scrollbarTokens;
 		$[58] = t19;
 		$[59] = t20;
 		$[60] = t21;
 	} else t21 = $[60];
-	const paneStyle = t21;
+	const paneTokens = t21;
 	const T0 = PaneElement;
 	const t22 = filterBaseProps(otherProps, { eventProps: true });
 	let t23;
@@ -654,14 +654,14 @@ function LayoutPane(props, ref) {
 		$[79] = t27;
 	} else t27 = $[79];
 	let t28;
-	if ($[80] !== T0 || $[81] !== combinedRef || $[82] !== finalStyles || $[83] !== hoverProps || $[84] !== paneMods || $[85] !== paneStyle || $[86] !== t22 || $[87] !== t24 || $[88] !== t25 || $[89] !== t26 || $[90] !== t27) {
+	if ($[80] !== T0 || $[81] !== combinedRef || $[82] !== finalStyles || $[83] !== hoverProps || $[84] !== paneMods || $[85] !== paneTokens || $[86] !== t22 || $[87] !== t24 || $[88] !== t25 || $[89] !== t26 || $[90] !== t27) {
 		t28 = /* @__PURE__ */ jsxs(T0, {
 			ref: combinedRef,
 			...t22,
 			...hoverProps,
 			mods: paneMods,
 			styles: finalStyles,
-			style: paneStyle,
+			tokens: paneTokens,
 			children: [
 				t24,
 				t25,
@@ -674,7 +674,7 @@ function LayoutPane(props, ref) {
 		$[82] = finalStyles;
 		$[83] = hoverProps;
 		$[84] = paneMods;
-		$[85] = paneStyle;
+		$[85] = paneTokens;
 		$[86] = t22;
 		$[87] = t24;
 		$[88] = t25;