@cube-dev/ui-kit 0.182.0 → 0.183.0

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

@@ -1 +1 @@
-{"version":3,"file":"ItemCard.js","names":["Item"],"sources":["../../../../src/components/content/ItemCard/ItemCard.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactNode } from 'react';\n\nimport { ItemAction } from '../../actions/ItemAction';\nimport { CubeItemProps, Item } from '../Item/Item';\n\nexport interface CubeItemCardProps\n  extends Omit<CubeItemProps, 'type' | 'children' | 'description'> {\n  /** Card heading, mapped to Item's `children`. */\n  title?: ReactNode;\n  /** Card body content, mapped to Item's `description`. */\n  children?: ReactNode;\n}\n\nconst _ItemCard = forwardRef(function ItemCard(\n  { title, children, ...props }: CubeItemCardProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Item ref={ref} {...props} type=\"card\" description={children}>\n      {title}\n    </Item>\n  );\n});\n\nconst ItemCard = Object.assign(_ItemCard, {\n  Action: ItemAction,\n});\n\nexport { ItemCard };\n"],"mappings":";;;;;;;AAaA,MAAM,YAAY,WAAW,SAAS,SACpC,EAAE,OAAO,UAAU,GAAG,SACtB,KACA;AACA,QACE,oBAACA;EAAU;EAAK,GAAI;EAAO,MAAK;EAAO,aAAa;YACjD;GACI;EAET;AAEF,MAAM,WAAW,OAAO,OAAO,WAAW,EACxC,QAAQ,YACT,CAAC"}
+{"version":3,"file":"ItemCard.js","names":["ForwardedRef","forwardRef","ReactNode","ItemAction","CubeItemProps","Item","CubeItemCardProps","Omit","title","children","_ItemCard","ItemCard","t0","ref","$","_c","props","t1","Object","assign","Action"],"sources":["../../../../src/components/content/ItemCard/ItemCard.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactNode } from 'react';\n\nimport { ItemAction } from '../../actions/ItemAction';\nimport { CubeItemProps, Item } from '../Item/Item';\n\nexport interface CubeItemCardProps\n  extends Omit<CubeItemProps, 'type' | 'children' | 'description'> {\n  /** Card heading, mapped to Item's `children`. */\n  title?: ReactNode;\n  /** Card body content, mapped to Item's `description`. */\n  children?: ReactNode;\n}\n\nconst _ItemCard = forwardRef(function ItemCard(\n  { title, children, ...props }: CubeItemCardProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <Item ref={ref} {...props} type=\"card\" description={children}>\n      {title}\n    </Item>\n  );\n});\n\nconst ItemCard = Object.assign(_ItemCard, {\n  Action: ItemAction,\n});\n\nexport { ItemCard };\n"],"mappings":";;;;;;;;AAaA,MAAMU,YAAYT,WAAW,SAAAU,SAAAC,IAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAN;CAAA,IAAAO;CAAA,IAAAR;AAAA,KAAAM,EAAA,OAAAF,IAAA;AAC3B,GAAA,CAAAJ,OAAAC,aAAAO,SAAAJ;AAAgDE,IAAA,KAAAF;AAAAE,IAAA,KAAAL;AAAAK,IAAA,KAAAE;AAAAF,IAAA,KAAAN;QAAA;AAAAC,aAAAK,EAAA;AAAAE,UAAAF,EAAA;AAAAN,UAAAM,EAAA;;CAAA,IAAAG;AAAA,KAAAH,EAAA,OAAAL,YAAAK,EAAA,OAAAE,SAAAF,EAAA,OAAAD,OAAAC,EAAA,OAAAN,OAAA;AAI9CS,OAAA,oBAAC;GAAUJ;GAAG,GAAMG;GAAY,MAAA;GAAoBP,aAAAA;aACjDD;IACI;AAAAM,IAAA,KAAAL;AAAAK,IAAA,KAAAE;AAAAF,IAAA,KAAAD;AAAAC,IAAA,KAAAN;AAAAM,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAFPG;EAIF;AAEF,MAAMN,WAAWO,OAAOC,OAAOT,WAAW,EACxCU,QAAQjB,YACT,CAAC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { _LayoutBlock } from "./LayoutBlock.js";
@@ -10,6 +10,7 @@ import { _LayoutPane } from "./LayoutPane.js";
 import { _LayoutPanel } from "./LayoutPanel.js";
 import { _LayoutPanelHeader } from "./LayoutPanelHeader.js";
 import { _LayoutToolbar } from "./LayoutToolbar.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -20,15 +21,42 @@ const GridLayoutElement = tasty(_Layout, {
 	styles: { Inner: { display: "grid" } }
 });
 function GridLayoutBase(props, ref) {
-	const { columns, rows, template, ...otherProps } = props;
-	return /* @__PURE__ */ jsx(GridLayoutElement, {
-		ref,
-		isGrid: true,
-		gridColumns: columns,
-		gridRows: rows,
-		gridTemplate: template,
-		...otherProps
-	});
+	const $ = c(11);
+	let columns;
+	let otherProps;
+	let rows;
+	let template;
+	if ($[0] !== props) {
+		({columns, rows, template, ...otherProps} = props);
+		$[0] = props;
+		$[1] = columns;
+		$[2] = otherProps;
+		$[3] = rows;
+		$[4] = template;
+	} else {
+		columns = $[1];
+		otherProps = $[2];
+		rows = $[3];
+		template = $[4];
+	}
+	let t0;
+	if ($[5] !== columns || $[6] !== otherProps || $[7] !== ref || $[8] !== rows || $[9] !== template) {
+		t0 = /* @__PURE__ */ jsx(GridLayoutElement, {
+			ref,
+			isGrid: true,
+			gridColumns: columns,
+			gridRows: rows,
+			gridTemplate: template,
+			...otherProps
+		});
+		$[5] = columns;
+		$[6] = otherProps;
+		$[7] = ref;
+		$[8] = rows;
+		$[9] = template;
+		$[10] = t0;
+	} else t0 = $[10];
+	return t0;
 }
 const _GridLayout = forwardRef(GridLayoutBase);
 _GridLayout.displayName = "GridLayout";

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","names":["Layout","LayoutToolbar","LayoutHeader","LayoutFooter","LayoutContent","LayoutBlock","LayoutFlex","LayoutGrid","LayoutPane","LayoutPanel","LayoutPanelHeader"],"sources":["../../../../src/components/content/Layout/GridLayout.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ForwardRefExoticComponent,\n  ReactNode,\n  RefAttributes,\n} from 'react';\n\nimport { CubeLayoutProps, Layout } from './Layout';\nimport { LayoutBlock } from './LayoutBlock';\nimport { LayoutContent } from './LayoutContent';\nimport { LayoutFlex } from './LayoutFlex';\nimport { LayoutFooter } from './LayoutFooter';\nimport { LayoutGrid } from './LayoutGrid';\nimport { LayoutHeader } from './LayoutHeader';\nimport { LayoutPane } from './LayoutPane';\nimport { LayoutPanel } from './LayoutPanel';\nimport { LayoutPanelHeader } from './LayoutPanelHeader';\nimport { LayoutToolbar } from './LayoutToolbar';\n\nconst GridLayoutElement = tasty(Layout, {\n  qa: 'GridLayout',\n  styles: {\n    Inner: {\n      display: 'grid',\n    },\n  },\n});\n\nexport interface CubeGridLayoutProps extends CubeLayoutProps {\n  /** Grid template columns */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  children?: ReactNode;\n}\n\nfunction GridLayoutBase(\n  props: CubeGridLayoutProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { columns, rows, template, ...otherProps } = props;\n\n  return (\n    <GridLayoutElement\n      ref={ref}\n      isGrid\n      gridColumns={columns}\n      gridRows={rows}\n      gridTemplate={template}\n      {...otherProps}\n    />\n  );\n}\n\nconst _GridLayout = forwardRef(GridLayoutBase);\n\n_GridLayout.displayName = 'GridLayout';\n\n// Create the GridLayout with all sub-components aliased\ninterface GridLayoutComponent\n  extends ForwardRefExoticComponent<\n    CubeGridLayoutProps & RefAttributes<HTMLDivElement>\n  > {\n  Toolbar: typeof LayoutToolbar;\n  Header: typeof LayoutHeader;\n  Footer: typeof LayoutFooter;\n  Content: typeof LayoutContent;\n  Block: typeof LayoutBlock;\n  Flex: typeof LayoutFlex;\n  Grid: typeof LayoutGrid;\n  Pane: typeof LayoutPane;\n  Panel: typeof LayoutPanel;\n  PanelHeader: typeof LayoutPanelHeader;\n}\n\nconst GridLayout = Object.assign(_GridLayout, {\n  Toolbar: LayoutToolbar,\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Block: LayoutBlock,\n  Flex: LayoutFlex,\n  Grid: LayoutGrid,\n  Pane: LayoutPane,\n  Panel: LayoutPanel,\n  PanelHeader: LayoutPanelHeader,\n}) as GridLayoutComponent;\n\nexport { GridLayout };\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,oBAAoB,MAAMA,SAAQ;CACtC,IAAI;CACJ,QAAQ,EACN,OAAO,EACL,SAAS,QACV,EACF;CACF,CAAC;AAYF,SAAS,eACP,OACA,KACA;CACA,MAAM,EAAE,SAAS,MAAM,UAAU,GAAG,eAAe;AAEnD,QACE,oBAAC;EACM;EACL;EACA,aAAa;EACb,UAAU;EACV,cAAc;EACd,GAAI;GACJ;;AAIN,MAAM,cAAc,WAAW,eAAe;AAE9C,YAAY,cAAc;AAmB1B,MAAM,aAAa,OAAO,OAAO,aAAa;CAC5C,SAASC;CACT,QAAQC;CACR,QAAQC;CACR,SAASC;CACT,OAAOC;CACP,MAAMC;CACN,MAAMC;CACN,MAAMC;CACN,OAAOC;CACP,aAAaC;CACd,CAAC"}
+{"version":3,"file":"GridLayout.js","names":["Styles","tasty","ForwardedRef","forwardRef","ForwardRefExoticComponent","ReactNode","RefAttributes","CubeLayoutProps","Layout","LayoutBlock","LayoutContent","LayoutFlex","LayoutFooter","LayoutGrid","LayoutHeader","LayoutPane","LayoutPanel","LayoutPanelHeader","LayoutToolbar","GridLayoutElement","qa","styles","Inner","display","CubeGridLayoutProps","columns","rows","template","children","GridLayoutBase","props","ref","$","_c","otherProps","t0","_GridLayout","displayName","GridLayoutComponent","HTMLDivElement","Toolbar","Header","Footer","Content","Block","Flex","Grid","Pane","Panel","PanelHeader","GridLayout","Object","assign"],"sources":["../../../../src/components/content/Layout/GridLayout.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ForwardRefExoticComponent,\n  ReactNode,\n  RefAttributes,\n} from 'react';\n\nimport { CubeLayoutProps, Layout } from './Layout';\nimport { LayoutBlock } from './LayoutBlock';\nimport { LayoutContent } from './LayoutContent';\nimport { LayoutFlex } from './LayoutFlex';\nimport { LayoutFooter } from './LayoutFooter';\nimport { LayoutGrid } from './LayoutGrid';\nimport { LayoutHeader } from './LayoutHeader';\nimport { LayoutPane } from './LayoutPane';\nimport { LayoutPanel } from './LayoutPanel';\nimport { LayoutPanelHeader } from './LayoutPanelHeader';\nimport { LayoutToolbar } from './LayoutToolbar';\n\nconst GridLayoutElement = tasty(Layout, {\n  qa: 'GridLayout',\n  styles: {\n    Inner: {\n      display: 'grid',\n    },\n  },\n});\n\nexport interface CubeGridLayoutProps extends CubeLayoutProps {\n  /** Grid template columns */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  children?: ReactNode;\n}\n\nfunction GridLayoutBase(\n  props: CubeGridLayoutProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { columns, rows, template, ...otherProps } = props;\n\n  return (\n    <GridLayoutElement\n      ref={ref}\n      isGrid\n      gridColumns={columns}\n      gridRows={rows}\n      gridTemplate={template}\n      {...otherProps}\n    />\n  );\n}\n\nconst _GridLayout = forwardRef(GridLayoutBase);\n\n_GridLayout.displayName = 'GridLayout';\n\n// Create the GridLayout with all sub-components aliased\ninterface GridLayoutComponent\n  extends ForwardRefExoticComponent<\n    CubeGridLayoutProps & RefAttributes<HTMLDivElement>\n  > {\n  Toolbar: typeof LayoutToolbar;\n  Header: typeof LayoutHeader;\n  Footer: typeof LayoutFooter;\n  Content: typeof LayoutContent;\n  Block: typeof LayoutBlock;\n  Flex: typeof LayoutFlex;\n  Grid: typeof LayoutGrid;\n  Pane: typeof LayoutPane;\n  Panel: typeof LayoutPanel;\n  PanelHeader: typeof LayoutPanelHeader;\n}\n\nconst GridLayout = Object.assign(_GridLayout, {\n  Toolbar: LayoutToolbar,\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Block: LayoutBlock,\n  Flex: LayoutFlex,\n  Grid: LayoutGrid,\n  Pane: LayoutPane,\n  Panel: LayoutPanel,\n  PanelHeader: LayoutPanelHeader,\n}) as GridLayoutComponent;\n\nexport { GridLayout };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAMmB,oBAAoBlB,MAAMO,SAAQ;CACtCY,IAAI;CACJC,QAAQ,EACNC,OAAO,EACLC,SAAS,QACX,EACF;CACD,CAAC;AAYF,SAAAM,eAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAR;CAAA,IAAAS;CAAA,IAAAR;CAAA,IAAAC;AAAA,KAAAK,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAL,SAAAC,MAAAC,aAAAO,cAAmDJ;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAP;AAAAO,IAAA,KAAAE;AAAAF,IAAA,KAAAN;AAAAM,IAAA,KAAAL;QAAA;AAAAF,YAAAO,EAAA;AAAAE,eAAAF,EAAA;AAAAN,SAAAM,EAAA;AAAAL,aAAAK,EAAA;;CAAA,IAAAG;AAAA,KAAAH,EAAA,OAAAP,WAAAO,EAAA,OAAAE,cAAAF,EAAA,OAAAD,OAAAC,EAAA,OAAAN,QAAAM,EAAA,OAAAL,UAAA;AAGvDQ,OAAA,oBAAC;GACMJ;GACL,QAAA;GACaN,aAAAA;GACHC,UAAAA;GACIC,cAAAA;GAAQ,GAClBO;IACJ;AAAAF,IAAA,KAAAP;AAAAO,IAAA,KAAAE;AAAAF,IAAA,KAAAD;AAAAC,IAAA,KAAAN;AAAAM,IAAA,KAAAL;AAAAK,IAAA,MAAAG;OAAAA,MAAAH,EAAA;AAAA,QAPFG;;AAWJ,MAAMC,cAAcjC,WAAW0B,eAAe;AAE9CO,YAAYC,cAAc;AAmB1B,MAAMa,aAAaC,OAAOC,OAAOhB,aAAa;CAC5CI,SAAStB;CACTuB,QAAQ3B;CACR4B,QAAQ9B;CACR+B,SAASjC;CACTkC,OAAOnC;CACPoC,MAAMlC;CACNmC,MAAMjC;CACNkC,MAAMhC;CACNiC,OAAOhC;CACPiC,aAAahC;CACd,CAAC"}

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

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";
 import { Alert } from "../Alert/Alert.js";
 import { LayoutProvider, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
+import { c } from "react-compiler-runtime";
 import { INNER_STYLES, OUTER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -118,10 +119,10 @@ function LayoutInner(props) {
 	}, [isReady]);
 	useEffect(() => {
 		if (isAutoHeight && localRef.current) {
-			const frameId = requestAnimationFrame(() => {
+			const frameId_0 = requestAnimationFrame(() => {
 				if (localRef.current && localRef.current.offsetHeight === 0) setIsCollapsed(true);
 			});
-			return () => cancelAnimationFrame(frameId);
+			return () => cancelAnimationFrame(frameId_0);
 		}
 	}, [isAutoHeight]);
 	const insetStyle = useMemo(() => {
@@ -166,10 +167,10 @@ function LayoutInner(props) {
 		const relatedTarget = e.relatedTarget;
 		if (!relatedTarget || !inner.contains(relatedTarget)) dismissOverlayPanels?.();
 	}, [hasOverlayPanels, dismissOverlayPanels]);
-	const handleKeyDown = useCallback((e) => {
-		if (hasOverlayPanels && e.key === "Escape") {
-			e.preventDefault();
-			e.stopPropagation();
+	const handleKeyDown = useCallback((e_0) => {
+		if (hasOverlayPanels && e_0.key === "Escape") {
+			e_0.preventDefault();
+			e_0.stopPropagation();
 			dismissOverlayPanels?.();
 		}
 	}, [hasOverlayPanels, dismissOverlayPanels]);
@@ -217,15 +218,31 @@ function LayoutInner(props) {
 * Uses a two-element architecture (wrapper + content) to ensure content never overflows.
 */
 function Layout(props, ref) {
+	const $ = c(7);
 	const { hasTransition, minContentSize } = props;
-	return /* @__PURE__ */ jsx(LayoutProvider, {
-		hasTransition,
-		minContentSize,
-		children: /* @__PURE__ */ jsx(LayoutInner, {
+	let t0;
+	if ($[0] !== props || $[1] !== ref) {
+		t0 = /* @__PURE__ */ jsx(LayoutInner, {
 			...props,
 			forwardedRef: ref
-		})
-	});
+		});
+		$[0] = props;
+		$[1] = ref;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== hasTransition || $[4] !== minContentSize || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(LayoutProvider, {
+			hasTransition,
+			minContentSize,
+			children: t0
+		});
+		$[3] = hasTransition;
+		$[4] = minContentSize;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
 }
 const _Layout = forwardRef(Layout);
 _Layout.displayName = "Layout";

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 { 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  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  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\n// The collapse warning sits on top of `Inner` rather than in place of it.\n// `Inner` is absolutely positioned, so an in-flow sibling would paint beneath\n// it; match its box and take the layer above.\nconst DEV_WARNING_STYLES: Styles = {\n  position: 'absolute',\n  inset: '0',\n  zIndex: 1,\n  overflow: 'auto',\n};\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    minContentSize,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n  const updateContainerSize = layoutActions?.updateContainerSize;\n\n  useResizeObserver({\n    ref: localRef,\n    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      {/* All children go inside the Inner element - panels will portal themselves out */}\n      <div\n        ref={combinedInnerRef}\n        data-element=\"Inner\"\n        onFocus={handleInnerFocus}\n        {...innerProps}\n      >\n        {children}\n      </div>\n      {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n      <div ref={layoutRefs?.setPanelContainer} data-element=\"PanelContainer\" />\n      {/* Overlaid, never substituted for `children`. A zero-height measurement is\n          not proof of a mistake - a hidden tab, a collapsed accordion and a\n          container mid-animation all measure zero - so unmounting the subtree\n          would turn a wrong guess into an outage, and remounting it on the way\n          back would drop whatever state it held. */}\n      {showDevWarning ? (\n        <Alert theme=\"danger\" styles={DEV_WARNING_STYLES}>\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : null}\n    </LayoutElement>\n  );\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition, minContentSize } = props;\n\n  return (\n    <LayoutProvider\n      hasTransition={hasTransition}\n      minContentSize={minContentSize}\n    >\n      <LayoutInner {...props} forwardedRef={ref} />\n    </LayoutProvider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":"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"}
+{"version":3,"file":"Layout.js","names":["useResizeObserver","BaseProps","BlockStyleProps","ColorStyleProps","filterBaseProps","FlowStyleProps","INNER_STYLES","mergeStyles","OUTER_STYLES","OuterStyleProps","Styles","tasty","CSSProperties","FocusEvent","ForwardedRef","forwardRef","HTMLAttributes","KeyboardEvent","ReactNode","useCallback","useEffect","useMemo","useRef","useState","isDevEnv","useCombinedRefs","extractStyles","Alert","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","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","frameId","requestAnimationFrame","cancelAnimationFrame","insetStyle","baseStyle","mods","dragging","setRefs","element","showDevWarning","handleInnerFocus","e","inner","currentTarget","relatedTarget","Node","contains","handleKeyDown","key","preventDefault","stopPropagation","eventProps","undefined","setPanelContainer","Layout","_c","t0","t1","_Layout","displayName"],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  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  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\n// The collapse warning sits on top of `Inner` rather than in place of it.\n// `Inner` is absolutely positioned, so an in-flow sibling would paint beneath\n// it; match its box and take the layer above.\nconst DEV_WARNING_STYLES: Styles = {\n  position: 'absolute',\n  inset: '0',\n  zIndex: 1,\n  overflow: 'auto',\n};\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    minContentSize,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n  const updateContainerSize = layoutActions?.updateContainerSize;\n\n  useResizeObserver({\n    ref: localRef,\n    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      {/* All children go inside the Inner element - panels will portal themselves out */}\n      <div\n        ref={combinedInnerRef}\n        data-element=\"Inner\"\n        onFocus={handleInnerFocus}\n        {...innerProps}\n      >\n        {children}\n      </div>\n      {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n      <div ref={layoutRefs?.setPanelContainer} data-element=\"PanelContainer\" />\n      {/* Overlaid, never substituted for `children`. A zero-height measurement is\n          not proof of a mistake - a hidden tab, a collapsed accordion and a\n          container mid-animation all measure zero - so unmounting the subtree\n          would turn a wrong guess into an outage, and remounting it on the way\n          back would drop whatever state it held. */}\n      {showDevWarning ? (\n        <Alert theme=\"danger\" styles={DEV_WARNING_STYLES}>\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : null}\n    </LayoutElement>\n  );\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition, minContentSize } = props;\n\n  return (\n    <LayoutProvider\n      hasTransition={hasTransition}\n      minContentSize={minContentSize}\n    >\n      <LayoutInner {...props} forwardedRef={ref} />\n    </LayoutProvider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAMgC,gBAAgBrB,MAAM;CAC1BsB,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,UAAU;EACVC,SAAS;EACTC,UAAU;GACR,IAAI;GACJ,mBAAmB;GACpB;EACDC,UAAU;EACVC,WAAW;EACXC,QAAQ;GACN,IAAI;GACJ,eAAe;GACfC,WAAW;GACZ;EAED,oBAAoB;EAEpB,uBAAuB;GACrB,IAAI;GACJC,UAAU;GACX;EAEDC,OAAO;GAGLC,GAAG;GACHC,WAAW;GACXV,UAAU;GACVW,OAAO;GACPV,SAAS;GACTW,MAAM;GACNC,cAAc;GACdC,YAAY;GAIZC,YAAY;IACV,IAAI;IACJ,kBAAkB;IAClB,wBAAwB;IAC1B;GACF;EACF;CACD,CAAC;AAKF,MAAMC,qBAA6B;CACjChB,UAAU;CACVW,OAAO;CACPM,QAAQ;CACRf,UAAU;CACX;AAwCD,SAAS8B,YACPC,OACA;CACA,MAAME,gBAAgB1C,yBAAyB;CAC/C,MAAM2C,cAAczC,uBAAuB;CAC3C,MAAM0C,aAAa3C,sBAAsB;CACzC,MAAM4C,WAAWpD,OAAuB,KAAK;CAC7C,MAAM,CAACqD,cAAcC,mBAAmBrD,SAAS,MAAM;CACvD,MAAM,CAACsD,aAAaC,kBAAkBvD,SAAS,MAAM;CAErD,MAAM,EACJgC,QACAC,SACAC,MACAC,UACAC,gBACAC,gBAAgB,OAChBC,gBACA1B,QACA2B,UACAiB,OACAT,cACAP,UAAUiB,cACVf,YACAC,sBACAC,eACA,GAAGc,eACDZ;CAEJ,MAAMa,mBAAmBzD,gBAAgBuD,aAAa;CACtD,MAAMG,sBAAsBZ,eAAeY;AAE3CnF,mBAAkB;EAChBoF,KAAKV;EACLW,UAAUlE,kBAAkB;AAC1B,OAAIuD,SAASY,QACXH,uBACET,SAASY,QAAQC,aACjBb,SAASY,QAAQE,aAClB;KAEF,CAACL,oBAAoB,CAAA;EACzB,CAAC;CAGF,MAAMM,cAAc/D,cAAcuD,YAAYzE,aAAa;CAC3D,MAAMkF,cAAchE,cAAcuD,YAAY3E,aAAa;CAI3D,MAAMqF,aAAatE,cAAc;EAC/B,MAAMuE,eAAeF,aAAa1C;EAClC,MAAM6C,kBAAkB1D,QAAQS,QAAmCI;EACnE,MAAM+C,YAAYH,gBAAgBC;AAElC,SAAO,OAAOE,cAAc,YAAY,CAACA,UAAUC,WAAW,MAAM;IACnE,CAACN,aAAa1C,MAAMb,QAAQS,MAAM,CAAC;CAGtC,MAAMqD,cAAc5E,cAAc;EAEhC,MAAM6E,aAAqB,EAAE;AAE7B,MAAI3C,OACF2C,YAAW7D,UAAU;AAGvB,MAAImB,QACF0C,YAAWC,cAAc3C;AAG3B,MAAIC,KACFyC,YAAWE,WAAW3C;AAGxB,MAAIC,SACFwC,YAAWG,eAAe3C;AAG5B,SAAOnD,YACLkF,aACA9B,kBAAkB,OAAO,EAAE,oBAAoBA,gBAAgB,GAAG,MAClExB,QACA,EAAES,OAAOrC,YAAYmF,aAAaQ,YAAY/D,QAAQS,MAAe,EACvE,CAAC;IACA;EACD6C;EACAC;EACA/B;EACAxB;EACAoB;EACAC;EACAC;EACAC;EACD,CAAC;CAGF,MAAM4C,aAAa9B,aAAa8B,cAAc;EAC5CC,MAAM;EACNC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACT;CAED,MAAMC,aAAanC,aAAamC,cAAc;CAC9C,MAAMC,UAAUpC,aAAaoC,WAAW;CACxC,MAAMC,YAAYtC,eAAesC;CACjC,MAAMC,uBAAuBvC,eAAeuC;CAC5C,MAAMC,mBAAmBvC,aAAauC,oBAAoB;AAO1D3F,iBAAgB;EACd,MAAM4F,UAAUC,4BAA4B;AAC1CJ,gBAAa;IACb;AAEF,eAAaK,qBAAqBF,QAAQ;IACzC,CAACH,UAAU,CAAC;AAIfzF,iBAAgB;AACd,MAAIwF,WAAWlC,SAASY,WAAWZ,SAASY,QAAQE,iBAAiB,EACnEZ,iBAAgB,KAAK;IAEtB,CAACgC,QAAQ,CAAC;AAIbxF,iBAAgB;AACd,MAAIuD,gBAAgBD,SAASY,SAAS;GAEpC,MAAM0B,YAAUC,4BAA4B;AAC1C,QAAIvC,SAASY,WAAWZ,SAASY,QAAQE,iBAAiB,EACxDV,gBAAe,KAAK;KAEtB;AAEF,gBAAaoC,qBAAqBF,UAAQ;;IAE3C,CAACrC,aAAa,CAAC;CAElB,MAAMwC,aAAa9F,cAAc;EAC/B,MAAM+F,YAAoC;GACxC,eAAe,GAAGd,WAAWE,IAAG;GAChC,iBAAiB,GAAGF,WAAWG,MAAK;GACpC,kBAAkB,GAAGH,WAAWI,OAAM;GACtC,gBAAgB,GAAGJ,WAAWC,KAAI;GACnC;AAED,MAAIxB,MACF,QAAO;GAAE,GAAGqC;GAAW,GAAGrC;GAAO;AAGnC,SAAOqC;IACN,CAACd,YAAYvB,MAAM,CAAC;CAEvB,MAAMsC,OAAOhG,eACJ;EACLiG,UAAUX;EACV,aAAa,CAACC;EACd,kBAAkBhD;EAClB,eAAee,gBAAgB,CAACE;EAChCnC,WAAWmC;EACXlC,UAAUgD;EACV,mBAAmBxB;EACpB,GACD;EACEwC;EACAC;EACAhD;EACAe;EACAE;EACAc;EACAxB;EAEJ,CAAC;CAGD,MAAMoD,WAAWC,YAAmC;AAClD9C,WAASY,UAAUkC;AAEnB,MAAI,OAAOlD,iBAAiB,WAC1BA,cAAakD,QAAQ;WACZlD,aACTA,cAAagB,UAAUkC;;CAK3B,MAAMC,iBAAiB5C,gBAAgBX,wBAAwB1C,UAAU;CAGzE,MAAMkG,mBAAmBvG,aACtBwG,MAAkC;AAEjC,MAAI,CAACZ,iBAAkB;EAGvB,MAAMa,QAAQD,EAAEE;EAChB,MAAMC,gBAAgBH,EAAEG;AAIxB,MAAI,CAACA,iBAAiB,CAACF,MAAMI,SAASF,cAAc,CAClDhB,yBAAwB;IAG5B,CAACC,kBAAkBD,qBACrB,CAAC;CAGD,MAAMmB,gBAAgB9G,aACnBwG,QAAqB;AACpB,MAAIZ,oBAAoBY,IAAEO,QAAQ,UAAU;AAC1CP,OAAEQ,gBAAgB;AAClBR,OAAES,iBAAiB;AACnBtB,2BAAwB;;IAG5B,CAACC,kBAAkBD,qBACrB,CAAC;AAED,QACE,qBAAC;EACC,KAAKS;EACL,GAAInH,gBAAgB6E,YAAY,EAAEoD,YAAY,MAAM,CAAC;EAC/ChB;EACN,QAAQpB;EACR,OAAOkB;EACP,WAAWJ,mBAAmBkB,gBAAgBK;;GAG9C,oBAAC;IACC,KAAKpD;IACL,gBAAa;IACb,SAASwC;IACT,GAAIzD;IAEHH;KACE;GAEL,oBAAC;IAAI,KAAKW,YAAY8D;IAAmB,gBAAa;KAAgB;GAMrEd,iBACC,qBAAC;IAAM,OAAM;IAAS,QAAQrE;;KAC5B,oBAAC,iBAAE,WAAU;;KAAC,oBAAC,iBAAE,cAAmB;;KAAkB,oBAAC,iBAAE,MAAK;;KACF;KAC5D,oBAAC,iBAAE,WAAU;;KAAS,oBAAC,iBAAE,cAAmB;;;KACtC,GACN;;GACU;;;;;;AAQpB,SAAAoF,OAAAnE,OAAAe,KAAA;CAAA,MAAAvC,IAAA4F,EAAA,EAAA;CACE,MAAA,EAAA7E,eAAAC,mBAA0CQ;CAAM,IAAAqE;AAAA,KAAA7F,EAAA,OAAAwB,SAAAxB,EAAA,OAAAuC,KAAA;AAO5CsD,OAAA,oBAAC;GAAW,GAAKrE;GAAqBe,cAAAA;IAAO;AAAAvC,IAAA,KAAAwB;AAAAxB,IAAA,KAAAuC;AAAAvC,IAAA,KAAA6F;OAAAA,MAAA7F,EAAA;CAAA,IAAA8F;AAAA,KAAA9F,EAAA,OAAAe,iBAAAf,EAAA,OAAAgB,kBAAAhB,EAAA,OAAA6F,IAAA;AAJ/CC,OAAA,oBAAC;GACgB/E;GACCC;aAEhB6E;IACe;AAAA7F,IAAA,KAAAe;AAAAf,IAAA,KAAAgB;AAAAhB,IAAA,KAAA6F;AAAA7F,IAAA,KAAA8F;OAAAA,MAAA9F,EAAA;AAAA,QALjB8F;;AASJ,MAAMC,UAAU7H,WAAWyH,OAAO;AAElCI,QAAQC,cAAc"}

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -15,13 +16,37 @@ const BlockElement = tasty(_LayoutContent, {
 	}
 });
 function LayoutBlock(props, ref) {
-	const { children, scrollbar = "tiny", ...otherProps } = props;
-	return /* @__PURE__ */ jsx(BlockElement, {
-		...otherProps,
-		ref,
-		scrollbar,
-		children
-	});
+	const $ = c(9);
+	let children;
+	let otherProps;
+	let t0;
+	if ($[0] !== props) {
+		({children, scrollbar: t0, ...otherProps} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = otherProps;
+		$[3] = t0;
+	} else {
+		children = $[1];
+		otherProps = $[2];
+		t0 = $[3];
+	}
+	const scrollbar = t0 === void 0 ? "tiny" : t0;
+	let t1;
+	if ($[4] !== children || $[5] !== otherProps || $[6] !== ref || $[7] !== scrollbar) {
+		t1 = /* @__PURE__ */ jsx(BlockElement, {
+			...otherProps,
+			ref,
+			scrollbar,
+			children
+		});
+		$[4] = children;
+		$[5] = otherProps;
+		$[6] = ref;
+		$[7] = scrollbar;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
 }
 const _LayoutBlock = forwardRef(LayoutBlock);
 _LayoutBlock.displayName = "Layout.Block";

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutBlock.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutBlock.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst BlockElement = tasty(LayoutContent, {\n  qa: 'LayoutBlock',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'block',\n    },\n  },\n});\n\nexport interface CubeLayoutBlockProps extends CubeLayoutContentProps {}\n\nfunction LayoutBlock(\n  props: CubeLayoutBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <BlockElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </BlockElement>\n  );\n}\n\nconst _LayoutBlock = forwardRef(LayoutBlock);\n\n_LayoutBlock.displayName = 'Layout.Block';\n\nexport { _LayoutBlock as LayoutBlock };\n"],"mappings":";;;;;;;AAKA,MAAM,eAAe,MAAMA,gBAAe;CACxC,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO,EACL,SAAS,SACV;EACF;CACF,CAAC;AAIF,SAAS,YACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,YAAY,QAAQ,GAAG,eAAe;AAExD,QACE,oBAAC;EAAa,GAAI;EAAiB;EAAgB;EAChD;GACY;;AAInB,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}
+{"version":3,"file":"LayoutBlock.js","names":["tasty","ForwardedRef","forwardRef","CubeLayoutContentProps","LayoutContent","BlockElement","qa","styles","container","flexShrink","flexGrow","Inner","display","CubeLayoutBlockProps","LayoutBlock","props","ref","$","_c","children","otherProps","t0","scrollbar","undefined","t1","_LayoutBlock","displayName"],"sources":["../../../../src/components/content/Layout/LayoutBlock.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst BlockElement = tasty(LayoutContent, {\n  qa: 'LayoutBlock',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'block',\n    },\n  },\n});\n\nexport interface CubeLayoutBlockProps extends CubeLayoutContentProps {}\n\nfunction LayoutBlock(\n  props: CubeLayoutBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <BlockElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </BlockElement>\n  );\n}\n\nconst _LayoutBlock = forwardRef(LayoutBlock);\n\n_LayoutBlock.displayName = 'Layout.Block';\n\nexport { _LayoutBlock as LayoutBlock };\n"],"mappings":";;;;;;;;AAKA,MAAMK,eAAeL,MAAMI,gBAAe;CACxCE,IAAI;CACJC,QAAQ;EACNC,WAAW;EACXC,YAAY;EACZC,UAAU;EAEVC,OAAO,EACLC,SAAS,SACX;EACF;CACD,CAAC;AAIF,SAAAE,YAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAJ,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAI,UAAAG,WAAAD,OAAAD,cAAwDL;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAI;QAAA;AAAAF,aAAAF,EAAA;AAAAG,eAAAH,EAAA;AAAAI,OAAAJ,EAAA;;CAA5C,MAAAK,YAAAD,OAAAE,SAAA,SAAAF;CAAkB,IAAAG;AAAA,KAAAP,EAAA,OAAAE,YAAAF,EAAA,OAAAG,cAAAH,EAAA,OAAAD,OAAAC,EAAA,OAAAK,WAAA;AAGlCE,OAAA,oBAAC;GAAY,GAAKJ;GAAiBJ;GAAgBM;GAChDH;IACY;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAD;AAAAC,IAAA,KAAAK;AAAAL,IAAA,KAAAO;OAAAA,MAAAP,EAAA;AAAA,QAFfO;;AAMJ,MAAMC,eAAevB,WAAWY,YAAY;AAE5CW,aAAaC,cAAc"}

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { _LayoutContainer } from "./LayoutContainer.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -32,16 +33,52 @@ const GoldenRatioSpacerElement = tasty({
 	}
 });
 function LayoutCenter(props, ref) {
-	const { children, isGoldenRatio, ...otherProps } = props;
-	return /* @__PURE__ */ jsxs(CenterElement, {
-		...otherProps,
-		ref,
-		children: [
-			isGoldenRatio && /* @__PURE__ */ jsx(GoldenRatioSpacerElement, { mods: { position: "top" } }),
-			children,
-			isGoldenRatio && /* @__PURE__ */ jsx(GoldenRatioSpacerElement, { mods: { position: "bottom" } })
-		]
-	});
+	const $ = c(14);
+	let children;
+	let isGoldenRatio;
+	let otherProps;
+	if ($[0] !== props) {
+		({children, isGoldenRatio, ...otherProps} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = isGoldenRatio;
+		$[3] = otherProps;
+	} else {
+		children = $[1];
+		isGoldenRatio = $[2];
+		otherProps = $[3];
+	}
+	let t0;
+	if ($[4] !== isGoldenRatio) {
+		t0 = isGoldenRatio && /* @__PURE__ */ jsx(GoldenRatioSpacerElement, { mods: { position: "top" } });
+		$[4] = isGoldenRatio;
+		$[5] = t0;
+	} else t0 = $[5];
+	let t1;
+	if ($[6] !== isGoldenRatio) {
+		t1 = isGoldenRatio && /* @__PURE__ */ jsx(GoldenRatioSpacerElement, { mods: { position: "bottom" } });
+		$[6] = isGoldenRatio;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== children || $[9] !== otherProps || $[10] !== ref || $[11] !== t0 || $[12] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(CenterElement, {
+			...otherProps,
+			ref,
+			children: [
+				t0,
+				children,
+				t1
+			]
+		});
+		$[8] = children;
+		$[9] = otherProps;
+		$[10] = ref;
+		$[11] = t0;
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
 }
 const _LayoutCenter = forwardRef(LayoutCenter);
 _LayoutCenter.displayName = "Layout.Center";

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutCenter.js","names":["LayoutContainer"],"sources":["../../../../src/components/content/Layout/LayoutCenter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContainerProps, LayoutContainer } from './LayoutContainer';\n\nconst CenterElement = tasty(LayoutContainer, {\n  qa: 'LayoutCenter',\n  styles: {\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n\n    Inner: {\n      textAlign: 'center',\n      placeItems: 'center',\n      placeContent: 'center',\n    },\n  },\n});\n\nconst GoldenRatioSpacerElement = tasty({\n  'aria-hidden': 'true',\n  qa: 'LayoutCenterGoldenRatioSpacer',\n  styles: {\n    flexGrow: {\n      '': 0.382,\n      'position=bottom': 0.618,\n    },\n    flexShrink: 1,\n    flexBasis: 0,\n    height: 'min 0',\n    pointerEvents: 'none',\n  },\n});\n\nexport interface CubeLayoutCenterProps extends CubeLayoutContainerProps {\n  /**\n   * Position content slightly above the visual center using the golden ratio\n   * (~38.2% empty space above, ~61.8% below) for a more aesthetically pleasing\n   * placement. Only takes effect while the content is smaller than the\n   * container; once the content overflows, layout falls back to the default\n   * centered behavior.\n   * @default false\n   */\n  isGoldenRatio?: boolean;\n}\n\nfunction LayoutCenter(\n  props: CubeLayoutCenterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, isGoldenRatio, ...otherProps } = props;\n\n  return (\n    <CenterElement {...otherProps} ref={ref}>\n      {isGoldenRatio && <GoldenRatioSpacerElement mods={{ position: 'top' }} />}\n      {children}\n      {isGoldenRatio && (\n        <GoldenRatioSpacerElement mods={{ position: 'bottom' }} />\n      )}\n    </CenterElement>\n  );\n}\n\nconst _LayoutCenter = forwardRef(LayoutCenter);\n\n_LayoutCenter.displayName = 'Layout.Center';\n\nexport { _LayoutCenter as LayoutCenter };\n"],"mappings":";;;;;;;AAKA,MAAM,gBAAgB,MAAMA,kBAAiB;CAC3C,IAAI;CACJ,QAAQ;EACN,YAAY;EACZ,cAAc;EAEd,OAAO;GACL,WAAW;GACX,YAAY;GACZ,cAAc;GACf;EACF;CACF,CAAC;AAEF,MAAM,2BAA2B,MAAM;CACrC,eAAe;CACf,IAAI;CACJ,QAAQ;EACN,UAAU;GACR,IAAI;GACJ,mBAAmB;GACpB;EACD,YAAY;EACZ,WAAW;EACX,QAAQ;EACR,eAAe;EAChB;CACF,CAAC;AAcF,SAAS,aACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,eAAe,GAAG,eAAe;AAEnD,QACE,qBAAC;EAAc,GAAI;EAAiB;;GACjC,iBAAiB,oBAAC,4BAAyB,MAAM,EAAE,UAAU,OAAO,GAAI;GACxE;GACA,iBACC,oBAAC,4BAAyB,MAAM,EAAE,UAAU,UAAU,GAAI;;GAE9C;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
+{"version":3,"file":"LayoutCenter.js","names":["tasty","ForwardedRef","forwardRef","CubeLayoutContainerProps","LayoutContainer","CenterElement","qa","styles","placeItems","placeContent","Inner","textAlign","GoldenRatioSpacerElement","flexGrow","flexShrink","flexBasis","height","pointerEvents","CubeLayoutCenterProps","isGoldenRatio","LayoutCenter","props","ref","$","_c","children","otherProps","t0","position","t1","t2","_LayoutCenter","displayName"],"sources":["../../../../src/components/content/Layout/LayoutCenter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContainerProps, LayoutContainer } from './LayoutContainer';\n\nconst CenterElement = tasty(LayoutContainer, {\n  qa: 'LayoutCenter',\n  styles: {\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n\n    Inner: {\n      textAlign: 'center',\n      placeItems: 'center',\n      placeContent: 'center',\n    },\n  },\n});\n\nconst GoldenRatioSpacerElement = tasty({\n  'aria-hidden': 'true',\n  qa: 'LayoutCenterGoldenRatioSpacer',\n  styles: {\n    flexGrow: {\n      '': 0.382,\n      'position=bottom': 0.618,\n    },\n    flexShrink: 1,\n    flexBasis: 0,\n    height: 'min 0',\n    pointerEvents: 'none',\n  },\n});\n\nexport interface CubeLayoutCenterProps extends CubeLayoutContainerProps {\n  /**\n   * Position content slightly above the visual center using the golden ratio\n   * (~38.2% empty space above, ~61.8% below) for a more aesthetically pleasing\n   * placement. Only takes effect while the content is smaller than the\n   * container; once the content overflows, layout falls back to the default\n   * centered behavior.\n   * @default false\n   */\n  isGoldenRatio?: boolean;\n}\n\nfunction LayoutCenter(\n  props: CubeLayoutCenterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, isGoldenRatio, ...otherProps } = props;\n\n  return (\n    <CenterElement {...otherProps} ref={ref}>\n      {isGoldenRatio && <GoldenRatioSpacerElement mods={{ position: 'top' }} />}\n      {children}\n      {isGoldenRatio && (\n        <GoldenRatioSpacerElement mods={{ position: 'bottom' }} />\n      )}\n    </CenterElement>\n  );\n}\n\nconst _LayoutCenter = forwardRef(LayoutCenter);\n\n_LayoutCenter.displayName = 'Layout.Center';\n\nexport { _LayoutCenter as LayoutCenter };\n"],"mappings":";;;;;;;;AAKA,MAAMK,gBAAgBL,MAAMI,kBAAiB;CAC3CE,IAAI;CACJC,QAAQ;EACNC,YAAY;EACZC,cAAc;EAEdC,OAAO;GACLC,WAAW;GACXH,YAAY;GACZC,cAAc;GAChB;EACF;CACD,CAAC;AAEF,MAAMG,2BAA2BZ,MAAM;CACrC,eAAe;CACfM,IAAI;CACJC,QAAQ;EACNM,UAAU;GACR,IAAI;GACJ,mBAAmB;GACpB;EACDC,YAAY;EACZC,WAAW;EACXC,QAAQ;EACRC,eAAe;EACjB;CACD,CAAC;AAcF,SAAAG,aAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAO;AAAA,KAAAH,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAI,UAAAN,kBAAAO,cAAmDL;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAJ;AAAAI,IAAA,KAAAG;QAAA;AAAAD,aAAAF,EAAA;AAAAJ,kBAAAI,EAAA;AAAAG,eAAAH,EAAA;;CAAA,IAAAI;AAAA,KAAAJ,EAAA,OAAAJ,eAAA;AAIpDQ,OAAAR,iBAAiB,oBAAC,4BAA+B,MAAA,EAAAS,UAAY,OAAM,GAAK;AAAAL,IAAA,KAAAJ;AAAAI,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAAA,IAAAM;AAAA,KAAAN,EAAA,OAAAJ,eAAA;AAExEU,OAAAV,iBACC,oBAAC,4BAA+B,MAAA,EAAAS,UAAY,UAAS,GACtD;AAAAL,IAAA,KAAAJ;AAAAI,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAAA,IAAAO;AAAA,KAAAP,EAAA,OAAAE,YAAAF,EAAA,OAAAG,cAAAH,EAAA,QAAAD,OAAAC,EAAA,QAAAI,MAAAJ,EAAA,QAAAM,IAAA;AALHC,OAAA,qBAAC;GAAa,GAAKJ;GAAiBJ;;IACjCK;IACAF;IACAI;;IAGa;AAAAN,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,MAAAD;AAAAC,IAAA,MAAAI;AAAAJ,IAAA,MAAAM;AAAAN,IAAA,MAAAO;OAAAA,MAAAP,EAAA;AAAA,QANhBO;;AAUJ,MAAMC,gBAAgB7B,WAAWkB,aAAa;AAE9CW,cAAcC,cAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutContainer.js","names":[],"sources":["../../../../src/components/content/Layout/LayoutContainer.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useMemo,\n} from 'react';\n\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContainerElement = tasty({\n  as: 'div',\n  qa: 'LayoutContainer',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    placeItems: 'center start',\n    placeContent: 'stretch',\n    overflow: 'auto',\n    scrollbar: 'thin',\n    padding: '$content-padding',\n    placeSelf: 'stretch',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      placeSelf: 'center',\n      display: 'flex',\n      flow: 'column',\n      boxSizing: 'border-box',\n      width: '40x 100% 120x',\n      flexGrow: 1,\n\n      '$layout-border-size': '0',\n    },\n  },\n});\n\nexport interface CubeLayoutContainerProps\n  extends BaseProps,\n    ContainerStyleProps {\n  children?: ReactNode;\n  /** Custom styles for container and inner elements */\n  styles?: Styles;\n  /** Custom styles for the inner element */\n  innerStyles?: Styles;\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 LayoutContainer(\n  props: CubeLayoutContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    styles,\n    innerStyles: innerStylesProp,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const innerStyles = extractStyles(\n    otherProps,\n    CONTAINER_STYLES,\n    innerStylesProp,\n  );\n\n  const hasInnerStyles = Object.keys(innerStyles).length > 0;\n\n  const finalStyles = useMemo(() => {\n    return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);\n  }, [styles, hasInnerStyles, innerStyles]);\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n\n  return (\n    <ContainerElement\n      ref={ref}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      styles={finalStyles}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n    </ContainerElement>\n  );\n}\n\nconst _LayoutContainer = forwardRef(LayoutContainer);\n\n_LayoutContainer.displayName = 'Layout.Container';\n\nexport { _LayoutContainer as LayoutContainer };\n"],"mappings":";;;;;;;;;AAsBA,MAAM,mBAAmB,MAAM;CAC7B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,cAAc;EACd,UAAU;EACV,WAAW;EACX,SAAS;EACT,WAAW;EACX,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAED,OAAO;GACL,GAAG;GACH,WAAW;GACX,SAAS;GACT,MAAM;GACN,WAAW;GACX,OAAO;GACP,UAAU;GAEV,uBAAuB;GACxB;EACF;CACF,CAAC;AAgBF,SAAS,gBACP,OACA,KACA;CACA,MAAM,EACJ,UACA,QACA,aAAa,iBACb,UAAU,cACV,YACA,GAAG,eACD;CACJ,MAAM,cAAc,cAClB,YACA,kBACA,gBACD;CAED,MAAM,iBAAiB,OAAO,KAAK,YAAY,CAAC,SAAS;CAEzD,MAAM,cAAc,cAAc;AAChC,SAAO,YAAY,QAAQ,iBAAiB,EAAE,OAAO,aAAa,GAAG,KAAK;IACzE;EAAC;EAAQ;EAAgB;EAAY,CAAC;CAEzC,MAAM,mBAAmB,gBAAgB,aAAa;AAEtD,QACE,oBAAC;EACM;EACL,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EACrD,QAAQ;YAER,oBAAC;GAAI,KAAK;GAAkB,gBAAa;GAAQ,GAAI;aACnD,oBAAC,sBAAoB,WAA8B;IAC/C;GACW;;AAIvB,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,iBAAiB,cAAc"}
+{"version":3,"file":"LayoutContainer.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","mergeStyles","Styles","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useMemo","useCombinedRefs","extractStyles","LayoutContextReset","ContainerElement","as","qa","styles","display","flow","flexGrow","flexShrink","placeItems","placeContent","overflow","scrollbar","padding","placeSelf","border","Inner","$","boxSizing","width","CubeLayoutContainerProps","children","innerStyles","innerRef","HTMLDivElement","innerProps","LayoutContainer","props","ref","innerStylesProp","innerRefProp","otherProps","hasInnerStyles","Object","keys","length","finalStyles","combinedInnerRef","eventProps","_LayoutContainer","displayName"],"sources":["../../../../src/components/content/Layout/LayoutContainer.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useMemo,\n} from 'react';\n\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContainerElement = tasty({\n  as: 'div',\n  qa: 'LayoutContainer',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    placeItems: 'center start',\n    placeContent: 'stretch',\n    overflow: 'auto',\n    scrollbar: 'thin',\n    padding: '$content-padding',\n    placeSelf: 'stretch',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      placeSelf: 'center',\n      display: 'flex',\n      flow: 'column',\n      boxSizing: 'border-box',\n      width: '40x 100% 120x',\n      flexGrow: 1,\n\n      '$layout-border-size': '0',\n    },\n  },\n});\n\nexport interface CubeLayoutContainerProps\n  extends BaseProps,\n    ContainerStyleProps {\n  children?: ReactNode;\n  /** Custom styles for container and inner elements */\n  styles?: Styles;\n  /** Custom styles for the inner element */\n  innerStyles?: Styles;\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 LayoutContainer(\n  props: CubeLayoutContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    styles,\n    innerStyles: innerStylesProp,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const innerStyles = extractStyles(\n    otherProps,\n    CONTAINER_STYLES,\n    innerStylesProp,\n  );\n\n  const hasInnerStyles = Object.keys(innerStyles).length > 0;\n\n  const finalStyles = useMemo(() => {\n    return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);\n  }, [styles, hasInnerStyles, innerStyles]);\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n\n  return (\n    <ContainerElement\n      ref={ref}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      styles={finalStyles}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n    </ContainerElement>\n  );\n}\n\nconst _LayoutContainer = forwardRef(LayoutContainer);\n\n_LayoutContainer.displayName = 'Layout.Container';\n\nexport { _LayoutContainer as LayoutContainer };\n"],"mappings":";;;;;;;;;AAsBA,MAAMe,mBAAmBT,MAAM;CAC7BU,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,YAAY;EACZC,YAAY;EACZC,cAAc;EACdC,UAAU;EACVC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAEDC,OAAO;GACLC,GAAG;GACHH,WAAW;GACXT,SAAS;GACTC,MAAM;GACNY,WAAW;GACXC,OAAO;GACPZ,UAAU;GAEV,uBAAuB;GACzB;EACF;CACD,CAAC;AAgBF,SAASmB,gBACPC,OACAC,KACA;CACA,MAAM,EACJP,UACAjB,QACAkB,aAAaO,iBACbN,UAAUO,cACVL,YACA,GAAGM,eACDJ;CACJ,MAAML,cAAcvB,cAClBgC,YACA5C,kBACA0C,gBACD;CAED,MAAMG,iBAAiBC,OAAOC,KAAKZ,YAAY,CAACa,SAAS;CAEzD,MAAMC,cAAcvC,cAAc;AAChC,SAAOP,YAAYc,QAAQ4B,iBAAiB,EAAEhB,OAAOM,aAAa,GAAG,KAAK;IACzE;EAAClB;EAAQ4B;EAAgBV;EAAY,CAAC;CAEzC,MAAMe,mBAAmBvC,gBAAgBgC,aAAa;AAEtD,QACE,oBAAC;EACMF;EACL,GAAIvC,gBAAgB0C,YAAY,EAAEO,YAAY,MAAM,CAAC;EACrD,QAAQF;YAER,oBAAC;GAAI,KAAKC;GAAkB,gBAAa;GAAQ,GAAIZ;aACnD,oBAAC,sBAAoBJ,WAA6B;IAC/C;GACY;;AAIvB,MAAMkB,mBAAmB7C,WAAWgC,gBAAgB;AAEpDa,iBAAiBC,cAAc"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutContent.js","names":[],"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  useMemo,\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 = useMemo(() => {\n    if (!isTinyScrollbar) return {};\n\n    return {\n      ...handleVStyle,\n      ...handleHStyle,\n    };\n  }, [isTinyScrollbar, handleVStyle, handleHStyle]);\n\n  const mods = useMemo(\n    () => ({\n      ...externalMods,\n      scrollbar,\n      hovered: isHovered,\n      scrolling: isScrolling,\n    }),\n    [externalMods, scrollbar, isHovered, isScrolling],\n  );\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  const finalStyles = useMemo(() => {\n    return mergeStyles(\n      styles,\n      outerStyles,\n      innerStyles ? { Inner: innerStyles } : null,\n    );\n  }, [styles, outerStyles, innerStyles]);\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":";;;;;;;;;;;AA0BA,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,UAAU;EACV,SAAS;EACT,aAAa;EACb,UAAU;EACV,cAAc;EACd,YAAY;EACZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,WAAW;EACX,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAED,OAAO;GACL,GAAG;GACH,SAAS;GACT,MAAM;GACN,SAAS;GACT,UAAU;IACR,IAAI;IACJ,kBAAkB;IACnB;GACD,WAAW;GACX,WAAW;IACT,IAAI;IACJ,kBAAkB;IAClB,mCAAmC;IACpC;GAED,uBAAuB;GACxB;EAGD,YAAY;GACV,GAAG;GACH,UAAU;GACV,OAAO;GACP,KAAK;GACL,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,SAAS;IACP,IAAI;IACJ,0CAA0C;IAC3C;GACD,YAAY;GACZ,eAAe;GAChB;EAED,YAAY;GACV,GAAG;GACH,UAAU;GACV,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;IACP,IAAI;IACJ,0CAA0C;IAC3C;GACD,YAAY;GACZ,eAAe;GAChB;EACF;CACF,CAAC;AAgBF,SAAS,cACP,OACA,KACA;CACA,MAAM,EACJ,UACA,YAAY,QACZ,QACA,MAAM,cACN,UAAU,cACV,YACA,GAAG,eACD;CACJ,MAAM,cAAc,cAAc,YAAY,aAAa;CAC3D,MAAM,cAAc,cAAc,YAAY,aAAa;CAC3D,MAAM,mBAAmB,OAAuB,KAAK;CACrD,MAAM,mBAAmB,gBAAgB,cAAc,iBAAiB;CACxE,MAAM,cAAc,gBAAgB,IAAI;CACxC,MAAM,kBAAkB,cAAc;CACtC,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAE9C,MAAM,EACJ,cACA,cACA,cACA,cACA,gBACE,iBAAiB,kBAAkB,gBAAgB;CAEvD,MAAM,iBAAiB,cAAc;AACnC,MAAI,CAAC,gBAAiB,QAAO,EAAE;AAE/B,SAAO;GACL,GAAG;GACH,GAAG;GACJ;IACA;EAAC;EAAiB;EAAc;EAAa,CAAC;CAEjD,MAAM,OAAO,eACJ;EACL,GAAG;EACH;EACA,SAAS;EACT,WAAW;EACZ,GACD;EAAC;EAAc;EAAW;EAAW;EAAY,CAClD;CAGD,MAAM,cAAc,cAAc;AAChC,SAAO,YACL,QACA,aACA,cAAc,EAAE,OAAO,aAAa,GAAG,KACxC;IACA;EAAC;EAAQ;EAAa;EAAY,CAAC;AAEtC,QACE,qBAAC;EACC,KAAK;EACL,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EACrD,GAAI;EACE;EACN,QAAQ;EACR,OAAO;;GAEP,oBAAC;IAAI,KAAK;IAAkB,gBAAa;IAAQ,GAAI;cACnD,oBAAC,sBAAoB,WAA8B;KAC/C;GACL,mBAAmB,gBAAgB,oBAAC,SAAI,gBAAa,eAAe;GACpE,mBAAmB,gBAAgB,oBAAC,SAAI,gBAAa,eAAe;;GACtD;;AAIrB,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}
+{"version":3,"file":"LayoutContent.js","names":["BaseProps","ContainerStyleProps","filterBaseProps","INNER_STYLES","mergeStyles","Mods","OUTER_STYLES","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useMemo","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","externalMods","innerRefProp","otherProps","outerStyles","innerStyles","internalInnerRef","combinedInnerRef","combinedRef","isTinyScrollbar","hoverProps","isHovered","handleVStyle","handleHStyle","hasOverflowY","hasOverflowX","isScrolling","scrollbarStyle","hovered","scrolling","finalStyles","eventProps","_LayoutContent","displayName"],"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  useMemo,\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 = useMemo(() => {\n    if (!isTinyScrollbar) return {};\n\n    return {\n      ...handleVStyle,\n      ...handleHStyle,\n    };\n  }, [isTinyScrollbar, handleVStyle, handleHStyle]);\n\n  const mods = useMemo(\n    () => ({\n      ...externalMods,\n      scrollbar,\n      hovered: isHovered,\n      scrolling: isScrolling,\n    }),\n    [externalMods, scrollbar, isHovered, isScrolling],\n  );\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  const finalStyles = useMemo(() => {\n    return mergeStyles(\n      styles,\n      outerStyles,\n      innerStyles ? { Inner: innerStyles } : null,\n    );\n  }, [styles, outerStyles, innerStyles]);\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":";;;;;;;;;;;AA0BA,MAAMmB,iBAAiBZ,MAAM;CAC3Ba,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,WAAW;EACXC,UAAU;EACVC,SAAS;EACTC,aAAa;EACbC,UAAU;EACVC,cAAc;EACdC,YAAY;EACZC,WAAW;EACXC,UAAU;EACVC,YAAY;EACZC,QAAQ;EACRC,UAAU;EACVC,WAAW;EACXC,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAEDC,OAAO;GACLC,GAAG;GACHb,SAAS;GACTc,MAAM;GACNC,SAAS;GACTN,UAAU;IACR,IAAI;IACJ,kBAAkB;IACnB;GACDJ,WAAW;GACXW,WAAW;IACT,IAAI;IACJ,kBAAkB;IAClB,mCAAmC;IACpC;GAED,uBAAuB;GACxB;EAGDC,YAAY;GACVJ,GAAG;GACHd,UAAU;GACVmB,OAAO;GACPC,KAAK;GACLC,OAAO;GACPZ,QAAQ;GACRa,QAAQ;GACRC,MAAM;GACNC,SAAS;IACP,IAAI;IACJ,0CAA0C;IAC3C;GACDC,YAAY;GACZC,eAAe;GAChB;EAEDC,YAAY;GACVb,GAAG;GACHd,UAAU;GACV4B,QAAQ;GACRC,MAAM;GACNpB,QAAQ;GACRY,OAAO;GACPC,QAAQ;GACRC,MAAM;GACNC,SAAS;IACP,IAAI;IACJ,0CAA0C;IAC3C;GACDC,YAAY;GACZC,eAAe;GACjB;EACF;CACD,CAAC;AAgBF,SAASW,cACPC,OACAC,KACA;CACA,MAAM,EACJP,UACAf,YAAY,QACZnB,QACAmC,MAAMO,cACNN,UAAUO,cACVL,YACA,GAAGM,eACDJ;CACJ,MAAMK,cAAcnD,cAAckD,YAAY5D,aAAa;CAC3D,MAAM8D,cAAcpD,cAAckD,YAAY/D,aAAa;CAC3D,MAAMkE,mBAAmBxD,OAAuB,KAAK;CACrD,MAAMyD,mBAAmBvD,gBAAgBkD,cAAcI,iBAAiB;CACxE,MAAME,cAAcxD,gBAAgBgD,IAAI;CACxC,MAAMS,kBAAkB/B,cAAc;CACtC,MAAM,EAAEgC,YAAYC,cAAc5D,SAAS,EAAE,CAAC;CAE9C,MAAM,EACJ6D,cACAC,cACAC,cACAC,cACAC,gBACE9D,iBAAiBoD,kBAAkBG,gBAAgB;CAEvD,MAAMQ,iBAAiBpE,cAAc;AACnC,MAAI,CAAC4D,gBAAiB,QAAO,EAAE;AAE/B,SAAO;GACL,GAAGG;GACH,GAAGC;GACJ;IACA;EAACJ;EAAiBG;EAAcC;EAAa,CAAC;CAEjD,MAAMnB,OAAO7C,eACJ;EACL,GAAGoD;EACHvB;EACAwC,SAASP;EACTQ,WAAWH;EACZ,GACD;EAACf;EAAcvB;EAAWiC;EAAWK;EACvC,CAAC;CAGD,MAAMI,cAAcvE,cAAc;AAChC,SAAOR,YACLkB,QACA6C,aACAC,cAAc,EAAE/B,OAAO+B,aAAa,GAAG,KACxC;IACA;EAAC9C;EAAQ6C;EAAaC;EAAY,CAAC;AAEtC,QACE,qBAAC;EACC,KAAKG;EACL,GAAIrE,gBAAgBgE,YAAY,EAAEkB,YAAY,MAAM,CAAC;EACrD,GAAIX;EACEhB;EACN,QAAQ0B;EACR,OAAOH;;GAEP,oBAAC;IAAI,KAAKV;IAAkB,gBAAa;IAAQ,GAAIV;cACnD,oBAAC,sBAAoBJ,WAA6B;KAC/C;GACJgB,mBAAmBK,gBAAgB,oBAAC,SAAI,gBAAa,eAAe;GACpEL,mBAAmBM,gBAAgB,oBAAC,SAAI,gBAAa,eAAe;;GACtD;;AAIrB,MAAMO,iBAAiB5E,WAAWoD,cAAc;AAEhDwB,eAAeC,cAAc"}

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { c } from "react-compiler-runtime";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -45,16 +46,16 @@ function LayoutProvider({ children, hasTransition = false, minContentSize = 320
 			};
 		});
 	});
-	const registerPanel = useEvent((side, size) => {
-		if (registeredPanels.current.has(side)) throw new Error(`Layout: Only one panel per side is allowed. A panel is already registered on the "${side}" side.`);
-		const conflictingSides = side === "left" || side === "right" ? ["top", "bottom"] : ["left", "right"];
-		for (const conflictSide of conflictingSides) if (registeredPanels.current.has(conflictSide)) throw new Error(`Layout: Panels from different axes cannot be combined. Cannot register "${side}" panel when "${conflictSide}" panel exists. Use either horizontal (left/right) or vertical (top/bottom) panels.`);
-		registeredPanels.current.add(side);
-		updatePanelSize(side, size);
+	const registerPanel = useEvent((side_0, size_0) => {
+		if (registeredPanels.current.has(side_0)) throw new Error(`Layout: Only one panel per side is allowed. A panel is already registered on the "${side_0}" side.`);
+		const conflictingSides = side_0 === "left" || side_0 === "right" ? ["top", "bottom"] : ["left", "right"];
+		for (const conflictSide of conflictingSides) if (registeredPanels.current.has(conflictSide)) throw new Error(`Layout: Panels from different axes cannot be combined. Cannot register "${side_0}" panel when "${conflictSide}" panel exists. Use either horizontal (left/right) or vertical (top/bottom) panels.`);
+		registeredPanels.current.add(side_0);
+		updatePanelSize(side_0, size_0);
 	});
-	const unregisterPanel = useEvent((side) => {
-		registeredPanels.current.delete(side);
-		updatePanelSize(side, 0);
+	const unregisterPanel = useEvent((side_1) => {
+		registeredPanels.current.delete(side_1);
+		updatePanelSize(side_1, 0);
 	});
 	const setDragging = useEvent((dragging) => {
 		setIsDragging(dragging);
@@ -71,11 +72,11 @@ function LayoutProvider({ children, hasTransition = false, minContentSize = 320
 		};
 	});
 	const dismissOverlayPanels = useEvent(() => {
-		overlayPanelCallbacks.current.forEach((dismiss) => dismiss());
+		overlayPanelCallbacks.current.forEach((dismiss_0) => dismiss_0());
 	});
 	const updateContainerSize = useEvent((width, height) => {
-		setContainerWidth((prev) => prev === width ? prev : width);
-		setContainerHeight((prev) => prev === height ? prev : height);
+		setContainerWidth((prev_0) => prev_0 === width ? prev_0 : width);
+		setContainerHeight((prev_1) => prev_1 === height ? prev_1 : height);
 	});
 	const actionsValue = useMemo(() => ({
 		registerPanel,
@@ -124,17 +125,25 @@ function LayoutProvider({ children, hasTransition = false, minContentSize = 320
 * Provider that resets the layout context for sub-components.
 * Used to prevent panels in nested Layouts from affecting parent layouts.
 */
-function LayoutContextReset({ children }) {
-	return /* @__PURE__ */ jsx(LayoutRefsContext.Provider, {
-		value: null,
-		children: /* @__PURE__ */ jsx(LayoutActionsContext.Provider, {
+function LayoutContextReset(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(LayoutRefsContext.Provider, {
 			value: null,
-			children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+			children: /* @__PURE__ */ jsx(LayoutActionsContext.Provider, {
 				value: null,
-				children
+				children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+					value: null,
+					children
+				})
 			})
-		})
-	});
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
 }
 const LayoutPanelContext = createContext(null);
 function useLayoutPanelContext() {