@cube-dev/ui-kit 0.181.0 → 0.183.0

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -6,6 +6,7 @@ import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.
 import { LayoutContextReset } from "./LayoutContext.js";
 import { useTinyScrollbar } from "./hooks/useTinyScrollbar.js";
 import { clampSize } from "./utils.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";
@@ -181,23 +182,54 @@ const PaneElement = tasty({
 	}
 });
 function PaneResizeHandler(props) {
+	const $ = c(19);
 	const { edge, isDisabled, moveProps, onDoubleClick, onHoverChange, onFocusChange } = props;
-	const { hoverProps, isHovered } = useHover({ onHoverChange });
+	let t0;
+	if ($[0] !== onHoverChange) {
+		t0 = { onHoverChange };
+		$[0] = onHoverChange;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { hoverProps } = useHover(t0);
 	const { focusProps, isFocusVisible } = useFocusRing();
 	const isHorizontal = edge === "right";
-	useEffect(() => {
-		onFocusChange?.(isFocusVisible);
-	}, [isFocusVisible, onFocusChange]);
-	return /* @__PURE__ */ jsx("div", {
-		"data-element": "ResizeHandler",
-		...mergeProps$1(hoverProps, focusProps, isDisabled ? {} : moveProps, {
+	let t1;
+	let t2;
+	if ($[2] !== isFocusVisible || $[3] !== onFocusChange) {
+		t1 = () => {
+			onFocusChange?.(isFocusVisible);
+		};
+		t2 = [isFocusVisible, onFocusChange];
+		$[2] = isFocusVisible;
+		$[3] = onFocusChange;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[6] !== edge || $[7] !== focusProps || $[8] !== hoverProps || $[9] !== isDisabled || $[10] !== isHorizontal || $[11] !== moveProps || $[12] !== onDoubleClick) {
+		t3 = mergeProps$1(hoverProps, focusProps, isDisabled ? {} : moveProps, {
 			tabIndex: isDisabled ? void 0 : 0,
 			role: "separator",
 			"aria-orientation": isHorizontal ? "vertical" : "horizontal",
 			"aria-label": `Resize pane ${edge}`,
 			onDoubleClick: isDisabled ? void 0 : onDoubleClick
-		}),
-		children: !isDisabled && /* @__PURE__ */ jsxs("div", {
+		});
+		$[6] = edge;
+		$[7] = focusProps;
+		$[8] = hoverProps;
+		$[9] = isDisabled;
+		$[10] = isHorizontal;
+		$[11] = moveProps;
+		$[12] = onDoubleClick;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== isDisabled) {
+		t4 = !isDisabled && /* @__PURE__ */ jsxs("div", {
 			"data-element": "Drag",
 			children: [
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
@@ -206,8 +238,22 @@ function PaneResizeHandler(props) {
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" })
 			]
-		})
-	});
+		});
+		$[14] = isDisabled;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== t3 || $[17] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			"data-element": "ResizeHandler",
+			...t3,
+			children: t4
+		});
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
 }
 function LayoutPane(props, ref) {
 	const { resizeEdge = "right", isResizable = false, size: providedSize, defaultSize = 200, minSize, maxSize, onSizeChange, scrollbar = "thin", styles, mods, children, innerRef: innerRefProp, innerProps, ...otherProps } = props;
@@ -245,8 +291,8 @@ function LayoutPane(props, ref) {
 		},
 		onMoveEnd() {
 			setIsDragging(false);
-			setSize((currentSize) => {
-				const finalSize = Math.round(clampValue(currentSize));
+			setSize((currentSize_0) => {
+				const finalSize = Math.round(clampValue(currentSize_0));
 				onSizeChange?.(finalSize);
 				return finalSize;
 			});

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutPane.js","names":["mergeProps"],"sources":["../../../../src/components/content/Layout/LayoutPane.tsx"],"sourcesContent":["import {\n  BaseProps,\n  ContainerStyleProps,\n  filterBaseProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { ScrollbarType } from './LayoutContent';\nimport { LayoutContextReset } from './LayoutContext';\nimport { clampSize } from './utils';\n\n// Handler dimensions\nconst HANDLER_WIDTH = 9; // Interactive area\nconst HANDLER_RESERVED = 5; // Space reserved in Inner padding\n\nconst PaneElement = tasty({\n  as: 'div',\n  qa: 'LayoutPane',\n  styles: {\n    container: 'pane / inline-size',\n    position: 'relative',\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    placeSelf: 'stretch',\n    flexShrink: 0,\n    flexGrow: 0,\n    // Size is set via CSS custom property for performance during drag\n    width: {\n      '': 'auto',\n      'edge=right': '2x $pane-size $pane-size',\n    },\n    height: {\n      '': '2x $pane-size $pane-size',\n      'edge=right': 'auto',\n    },\n    boxSizing: 'content-box',\n\n    Inner: {\n      $: '>',\n      display: 'flex',\n      flow: 'column',\n      padding: '($content-padding, 1x)',\n      // Reserve space for handler on resize edge\n      paddingRight: {\n        '': '($content-padding, 1x)',\n        'edge=right': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,\n      },\n      paddingBottom: {\n        '': '($content-padding, 1x)',\n        'edge=bottom': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,\n      },\n      overflow: {\n        '': 'auto',\n        'scrollbar=none': 'clip',\n      },\n      placeSelf: 'stretch',\n      scrollbar: {\n        '': '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      position: 'absolute',\n      right: {\n        '': '1px',\n        'edge=right': `${HANDLER_RESERVED + 1}px`,\n      },\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: {\n        '': '1px',\n        'edge=bottom': `${HANDLER_RESERVED + 1}px`,\n      },\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    // Compact resize handler - only drag dots\n    ResizeHandler: {\n      position: 'absolute',\n      // Size: 9px interactive area\n      width: {\n        '': '100%',\n        'edge=right': `${HANDLER_WIDTH}px`,\n      },\n      height: {\n        '': `${HANDLER_WIDTH}px`,\n        'edge=right': '100%',\n      },\n      // Position at edge, centered on the reserved space boundary\n      right: {\n        '': 'initial',\n        'edge=right': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,\n      },\n      bottom: {\n        '': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,\n        'edge=right': 'initial',\n      },\n      top: {\n        '': 'initial',\n        'edge=right': 0,\n      },\n      left: {\n        '': 0,\n        'edge=right': 'initial',\n      },\n      cursor: {\n        '': 'row-resize',\n        'edge=right': 'col-resize',\n        disabled: 'not-allowed',\n      },\n      padding: 0,\n      outline: 0,\n      boxSizing: 'border-box',\n      transition: 'theme',\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      border: 0,\n      flow: {\n        '': 'row',\n        'edge=right': 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        'edge=right': 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        'edge=right': '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        'edge=right': '3px',\n      },\n      height: {\n        '': '3px',\n        'edge=right': 'auto',\n      },\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      transition: 'theme',\n      radius: 'round',\n      outline: {\n        '': '0',\n        'focused | drag': '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'handlerHovered | drag | focused': '#primary-text',\n        disabled: '#disabled-surface-text',\n      },\n    },\n  },\n});\n\nexport type ResizeEdge = 'right' | 'bottom';\n\nexport interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {\n  /** Edge where resize handler appears */\n  resizeEdge?: ResizeEdge;\n  /** Enable resize functionality */\n  isResizable?: boolean;\n  /** Controlled size (width for right edge, height for bottom edge) */\n  size?: number | string;\n  /** Default size for uncontrolled state */\n  defaultSize?: number | string;\n  /** Minimum size constraint */\n  minSize?: number | string;\n  /** Maximum size constraint */\n  maxSize?: number | string;\n  /** Size change callback */\n  onSizeChange?: (size: number) => void;\n  /** Scrollbar style */\n  scrollbar?: ScrollbarType;\n  /** Custom styles */\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\ninterface PaneResizeHandlerProps {\n  edge: ResizeEdge;\n  isDisabled?: boolean;\n  moveProps: ReturnType<typeof useMove>['moveProps'];\n  onDoubleClick?: () => void;\n  onHoverChange?: (isHovered: boolean) => void;\n  onFocusChange?: (isFocused: boolean) => void;\n}\n\nfunction PaneResizeHandler(props: PaneResizeHandlerProps) {\n  const {\n    edge,\n    isDisabled,\n    moveProps,\n    onDoubleClick,\n    onHoverChange,\n    onFocusChange,\n  } = props;\n  const { hoverProps, isHovered } = useHover({\n    onHoverChange,\n  });\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const isHorizontal = edge === 'right';\n\n  // Notify parent of focus changes\n  useEffect(() => {\n    onFocusChange?.(isFocusVisible);\n  }, [isFocusVisible, onFocusChange]);\n\n  return (\n    <div\n      data-element=\"ResizeHandler\"\n      {...mergeProps(hoverProps, focusProps, isDisabled ? {} : moveProps, {\n        tabIndex: isDisabled ? undefined : 0,\n        role: 'separator',\n        'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n        'aria-label': `Resize pane ${edge}`,\n        onDoubleClick: isDisabled ? undefined : onDoubleClick,\n      })}\n    >\n      {!isDisabled && (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction LayoutPane(\n  props: CubeLayoutPaneProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    resizeEdge = 'right',\n    isResizable = false,\n    size: providedSize,\n    defaultSize = 200,\n    minSize,\n    maxSize,\n    onSizeChange,\n    scrollbar = 'thin',\n    styles,\n    mods,\n    children,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n\n  const combinedRef = useCombinedRefs(ref);\n  const internalInnerRef = useRef<HTMLDivElement>(null);\n  const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n  const prevProvidedSizeRef = useRef(providedSize);\n  const isHorizontal = resizeEdge === 'right';\n\n  // Resize state\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHandlerHovered, setIsHandlerHovered] = useState(false);\n  const [isHandlerFocused, setIsHandlerFocused] = useState(false);\n  const debouncedHandlerHovered = useDebouncedValue(isHandlerHovered, 150);\n  const [size, setSize] = useState<number>(() => {\n    const initialSize =\n      typeof providedSize === 'number'\n        ? providedSize\n        : typeof defaultSize === 'number'\n          ? defaultSize\n          : 200;\n\n    return clampSize(initialSize, minSize, maxSize);\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  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  // Clamp size to min/max constraints\n  const clampValue = useCallback(\n    (value: number) => clampSize(value, minSize, maxSize),\n    [minSize, maxSize],\n  );\n\n  const { moveProps } = useMove({\n    onMoveStart() {\n      if (!isResizable) return;\n      setIsDragging(true);\n    },\n    onMove(e) {\n      if (!isResizable) return;\n\n      let delta: number;\n\n      if (e.pointerType === 'keyboard') {\n        // Keyboard resize: 10px per step, 50px with Shift\n        const step = e.shiftKey ? 50 : 10;\n        const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n        delta = rawDelta * step;\n      } else {\n        // Pointer resize: use exact delta values\n        delta = isHorizontal ? e.deltaX : e.deltaY;\n      }\n\n      setSize((currentSize) => clampValue(currentSize + delta));\n    },\n    onMoveEnd() {\n      setIsDragging(false);\n      // Round to integer on release and notify parent\n      setSize((currentSize) => {\n        const finalSize = Math.round(clampValue(currentSize));\n        onSizeChange?.(finalSize);\n        return finalSize;\n      });\n    },\n  });\n\n  // Sync provided size with internal state (only when providedSize actually changes)\n  // This prevents resetting size when only isDragging changes (which would cause a flash)\n  useEffect(() => {\n    if (prevProvidedSizeRef.current !== providedSize) {\n      prevProvidedSizeRef.current = providedSize;\n      if (typeof providedSize === 'number' && !isDragging) {\n        setSize(clampValue(providedSize));\n      }\n    }\n  }, [providedSize, isDragging, clampValue]);\n\n  // Reset to default size on double-click\n  const handleResetSize = useCallback(() => {\n    const resetSize =\n      typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n    const clampedSize = clampValue(resetSize || 200);\n    setSize(clampedSize);\n    onSizeChange?.(clampedSize);\n  }, [defaultSize, clampValue, onSizeChange]);\n\n  const scrollbarStyle = useMemo(() => {\n    if (!isTinyScrollbar) return {};\n\n    return {\n      ...handleVStyle,\n      ...handleHStyle,\n    };\n  }, [isTinyScrollbar, handleVStyle, handleHStyle]);\n\n  const paneMods = useMemo(\n    () => ({\n      scrollbar,\n      hovered: isHovered,\n      scrolling: isScrolling,\n      handlerHovered: debouncedHandlerHovered,\n      focused: isHandlerFocused,\n      disabled: !isResizable,\n      edge: resizeEdge,\n      drag: isDragging,\n      ...mods,\n    }),\n    [\n      scrollbar,\n      isHovered,\n      isScrolling,\n      debouncedHandlerHovered,\n      isHandlerFocused,\n      isResizable,\n      resizeEdge,\n      isDragging,\n      mods,\n    ],\n  );\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  // Size is NOT included here - it's set via CSS custom property in paneStyle for performance\n  const finalStyles = useMemo(() => {\n    return mergeStyles(\n      styles,\n      outerStyles,\n      innerStyles ? { Inner: innerStyles } : null,\n    );\n  }, [styles, outerStyles, innerStyles]);\n\n  // Size is set via CSS custom property for performance during drag\n  // This avoids expensive style recalculation on every mouse move\n  const paneStyle = useMemo(\n    () => ({\n      ...scrollbarStyle,\n      '--pane-size': `${size}px`,\n      '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n      '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,\n    }),\n    [scrollbarStyle, size, minSize, maxSize],\n  );\n\n  return (\n    <PaneElement\n      ref={combinedRef}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      {...hoverProps}\n      mods={paneMods}\n      styles={finalStyles}\n      style={paneStyle}\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      {isResizable && (\n        <PaneResizeHandler\n          edge={resizeEdge}\n          isDisabled={!isResizable}\n          moveProps={moveProps}\n          onDoubleClick={handleResetSize}\n          onHoverChange={setIsHandlerHovered}\n          onFocusChange={setIsHandlerFocused}\n        />\n      )}\n    </PaneElement>\n  );\n}\n\nconst _LayoutPane = forwardRef(LayoutPane);\n\n_LayoutPane.displayName = 'Layout.Pane';\n\nexport { _LayoutPane as LayoutPane };\n"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAM,gBAAgB;AACtB,MAAM,mBAAmB;AAEzB,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,UAAU;EACV,SAAS;EACT,aAAa;EACb,UAAU;EACV,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,IAAI;GACJ,cAAc;GACf;EACD,QAAQ;GACN,IAAI;GACJ,cAAc;GACf;EACD,WAAW;EAEX,OAAO;GACL,GAAG;GACH,SAAS;GACT,MAAM;GACN,SAAS;GAET,cAAc;IACZ,IAAI;IACJ,cAAc,iCAAiC,iBAAiB;IACjE;GACD,eAAe;IACb,IAAI;IACJ,eAAe,iCAAiC,iBAAiB;IAClE;GACD,UAAU;IACR,IAAI;IACJ,kBAAkB;IACnB;GACD,WAAW;GACX,WAAW;IACT,IAAI;IACJ,mCAAmC;IACpC;GAED,uBAAuB;GACxB;EAGD,YAAY;GACV,UAAU;GACV,OAAO;IACL,IAAI;IACJ,cAAc,GAAG,mBAAmB,EAAE;IACvC;GACD,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;IACN,IAAI;IACJ,eAAe,GAAG,mBAAmB,EAAE;IACxC;GACD,MAAM;GACN,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;IACP,IAAI;IACJ,0CAA0C;IAC3C;GACD,YAAY;GACZ,eAAe;GAChB;EAGD,eAAe;GACb,UAAU;GAEV,OAAO;IACL,IAAI;IACJ,cAAc,GAAG,cAAc;IAChC;GACD,QAAQ;IACN,IAAI,GAAG,cAAc;IACrB,cAAc;IACf;GAED,OAAO;IACL,IAAI;IACJ,cAAc,IAAI,mBAAmB,iBAAiB,EAAE;IACzD;GACD,QAAQ;IACN,IAAI,IAAI,mBAAmB,iBAAiB,EAAE;IAC9C,cAAc;IACf;GACD,KAAK;IACH,IAAI;IACJ,cAAc;IACf;GACD,MAAM;IACJ,IAAI;IACJ,cAAc;IACf;GACD,QAAQ;IACN,IAAI;IACJ,cAAc;IACd,UAAU;IACX;GACD,SAAS;GACT,SAAS;GACT,WAAW;GACX,YAAY;GACb;EAED,MAAM;GACJ,SAAS;GACT,KAAK;GACL,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,cAAc;IACf;GACD,aAAa;IACX,IAAI;IACJ,cAAc;IACf;GACD,UAAU;IACR,IAAI;IACJ,cAAc;IACf;GACD,OAAO;IACL,IAAI;IACJ,cAAc;IACf;GACD,QAAQ;IACN,IAAI;IACJ,cAAc;IACf;GACD,UAAU;GACV,KAAK;GACL,MAAM;GACN,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,SAAS;IACP,IAAI;IACJ,kBAAkB;IACnB;GACD,eAAe;GAChB;EAED,UAAU;GACR,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,mCAAmC;IACnC,UAAU;IACX;GACF;EACF;CACF,CAAC;AAuCF,SAAS,kBAAkB,OAA+B;CACxD,MAAM,EACJ,MACA,YACA,WACA,eACA,eACA,kBACE;CACJ,MAAM,EAAE,YAAY,cAAc,SAAS,EACzC,eACD,CAAC;CACF,MAAM,EAAE,YAAY,mBAAmB,cAAc;CACrD,MAAM,eAAe,SAAS;AAG9B,iBAAgB;AACd,kBAAgB,eAAe;IAC9B,CAAC,gBAAgB,cAAc,CAAC;AAEnC,QACE,oBAAC;EACC,gBAAa;EACb,GAAIA,aAAW,YAAY,YAAY,aAAa,EAAE,GAAG,WAAW;GAClE,UAAU,aAAa,SAAY;GACnC,MAAM;GACN,oBAAoB,eAAe,aAAa;GAChD,cAAc,eAAe;GAC7B,eAAe,aAAa,SAAY;GACzC,CAAC;YAED,CAAC,cACA,qBAAC;GAAI,gBAAa;;IAChB,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;;IAC3B;GAEJ;;AAIV,SAAS,WACP,OACA,KACA;CACA,MAAM,EACJ,aAAa,SACb,cAAc,OACd,MAAM,cACN,cAAc,KACd,SACA,SACA,cACA,YAAY,QACZ,QACA,MACA,UACA,UAAU,cACV,YACA,GAAG,eACD;CAEJ,MAAM,cAAc,gBAAgB,IAAI;CACxC,MAAM,mBAAmB,OAAuB,KAAK;CACrD,MAAM,mBAAmB,gBAAgB,cAAc,iBAAiB;CACxE,MAAM,sBAAsB,OAAO,aAAa;CAChD,MAAM,eAAe,eAAe;CAGpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAC/D,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAC/D,MAAM,0BAA0B,kBAAkB,kBAAkB,IAAI;CACxE,MAAM,CAAC,MAAM,WAAW,eAAuB;AAQ7C,SAAO,UANL,OAAO,iBAAiB,WACpB,eACA,OAAO,gBAAgB,WACrB,cACA,KAEsB,SAAS,QAAQ;GAC/C;CAGF,MAAM,cAAc,cAAc,YAAY,aAAa;CAC3D,MAAM,cAAc,cAAc,YAAY,aAAa;CAE3D,MAAM,kBAAkB,cAAc;CACtC,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAE9C,MAAM,EACJ,cACA,cACA,cACA,cACA,gBACE,iBAAiB,kBAAkB,gBAAgB;CAGvD,MAAM,aAAa,aAChB,UAAkB,UAAU,OAAO,SAAS,QAAQ,EACrD,CAAC,SAAS,QAAQ,CACnB;CAED,MAAM,EAAE,cAAc,QAAQ;EAC5B,cAAc;AACZ,OAAI,CAAC,YAAa;AAClB,iBAAc,KAAK;;EAErB,OAAO,GAAG;AACR,OAAI,CAAC,YAAa;GAElB,IAAI;AAEJ,OAAI,EAAE,gBAAgB,YAAY;IAEhC,MAAM,OAAO,EAAE,WAAW,KAAK;AAE/B,aADiB,eAAe,EAAE,SAAS,EAAE,UAC1B;SAGnB,SAAQ,eAAe,EAAE,SAAS,EAAE;AAGtC,YAAS,gBAAgB,WAAW,cAAc,MAAM,CAAC;;EAE3D,YAAY;AACV,iBAAc,MAAM;AAEpB,YAAS,gBAAgB;IACvB,MAAM,YAAY,KAAK,MAAM,WAAW,YAAY,CAAC;AACrD,mBAAe,UAAU;AACzB,WAAO;KACP;;EAEL,CAAC;AAIF,iBAAgB;AACd,MAAI,oBAAoB,YAAY,cAAc;AAChD,uBAAoB,UAAU;AAC9B,OAAI,OAAO,iBAAiB,YAAY,CAAC,WACvC,SAAQ,WAAW,aAAa,CAAC;;IAGpC;EAAC;EAAc;EAAY;EAAW,CAAC;CAG1C,MAAM,kBAAkB,kBAAkB;EAGxC,MAAM,cAAc,YADlB,OAAO,gBAAgB,WAAW,cAAc,SAAS,aAAa,GAAG,KAC/B,IAAI;AAChD,UAAQ,YAAY;AACpB,iBAAe,YAAY;IAC1B;EAAC;EAAa;EAAY;EAAa,CAAC;CAE3C,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,WAAW,eACR;EACL;EACA,SAAS;EACT,WAAW;EACX,gBAAgB;EAChB,SAAS;EACT,UAAU,CAAC;EACX,MAAM;EACN,MAAM;EACN,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAID,MAAM,cAAc,cAAc;AAChC,SAAO,YACL,QACA,aACA,cAAc,EAAE,OAAO,aAAa,GAAG,KACxC;IACA;EAAC;EAAQ;EAAa;EAAY,CAAC;CAItC,MAAM,YAAY,eACT;EACL,GAAG;EACH,eAAe,GAAG,KAAK;EACvB,cAAc,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;EAC7D,cAAc,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;EAC9D,GACD;EAAC;EAAgB;EAAM;EAAS;EAAQ,CACzC;AAED,QACE,qBAAC;EACC,KAAK;EACL,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EACrD,GAAI;EACJ,MAAM;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;GACpE,eACC,oBAAC;IACC,MAAM;IACN,YAAY,CAAC;IACF;IACX,eAAe;IACf,eAAe;IACf,eAAe;KACf;;GAEQ;;AAIlB,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}
+{"version":3,"file":"LayoutPane.js","names":["BaseProps","ContainerStyleProps","filterBaseProps","INNER_STYLES","mergeStyles","OUTER_STYLES","Styles","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","useCallback","useEffect","useMemo","useRef","useState","useFocusRing","useHover","useMove","useDebouncedValue","mergeProps","useCombinedRefs","extractStyles","useTinyScrollbar","ScrollbarType","LayoutContextReset","clampSize","HANDLER_WIDTH","HANDLER_RESERVED","PaneElement","as","qa","styles","container","position","display","gridColumns","gridRows","placeContent","placeItems","placeSelf","flexShrink","flexGrow","width","height","boxSizing","Inner","$","flow","padding","paddingRight","paddingBottom","overflow","scrollbar","ScrollbarV","right","top","radius","fill","opacity","transition","pointerEvents","ScrollbarH","bottom","left","ResizeHandler","cursor","disabled","outline","Drag","gap","border","transform","outlineOffset","DragPart","ResizeEdge","CubeLayoutPaneProps","resizeEdge","isResizable","size","defaultSize","minSize","maxSize","onSizeChange","children","innerRef","HTMLDivElement","innerProps","PaneResizeHandlerProps","edge","isDisabled","moveProps","ReturnType","onDoubleClick","onHoverChange","isHovered","onFocusChange","isFocused","PaneResizeHandler","props","_c","t0","hoverProps","focusProps","isFocusVisible","isHorizontal","t1","t2","t3","tabIndex","undefined","role","t4","t5","LayoutPane","ref","providedSize","mods","innerRefProp","otherProps","combinedRef","internalInnerRef","combinedInnerRef","prevProvidedSizeRef","isDragging","setIsDragging","isHandlerHovered","setIsHandlerHovered","isHandlerFocused","setIsHandlerFocused","debouncedHandlerHovered","setSize","initialSize","outerStyles","innerStyles","isTinyScrollbar","handleVStyle","handleHStyle","hasOverflowY","hasOverflowX","isScrolling","clampValue","value","onMoveStart","onMove","e","delta","pointerType","step","shiftKey","rawDelta","deltaX","deltaY","currentSize","onMoveEnd","finalSize","Math","round","current","handleResetSize","resetSize","parseInt","clampedSize","scrollbarStyle","paneMods","hovered","scrolling","handlerHovered","focused","drag","finalStyles","paneStyle","eventProps","_LayoutPane","displayName"],"sources":["../../../../src/components/content/Layout/LayoutPane.tsx"],"sourcesContent":["import {\n  BaseProps,\n  ContainerStyleProps,\n  filterBaseProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { ScrollbarType } from './LayoutContent';\nimport { LayoutContextReset } from './LayoutContext';\nimport { clampSize } from './utils';\n\n// Handler dimensions\nconst HANDLER_WIDTH = 9; // Interactive area\nconst HANDLER_RESERVED = 5; // Space reserved in Inner padding\n\nconst PaneElement = tasty({\n  as: 'div',\n  qa: 'LayoutPane',\n  styles: {\n    container: 'pane / inline-size',\n    position: 'relative',\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    placeSelf: 'stretch',\n    flexShrink: 0,\n    flexGrow: 0,\n    // Size is set via CSS custom property for performance during drag\n    width: {\n      '': 'auto',\n      'edge=right': '2x $pane-size $pane-size',\n    },\n    height: {\n      '': '2x $pane-size $pane-size',\n      'edge=right': 'auto',\n    },\n    boxSizing: 'content-box',\n\n    Inner: {\n      $: '>',\n      display: 'flex',\n      flow: 'column',\n      padding: '($content-padding, 1x)',\n      // Reserve space for handler on resize edge\n      paddingRight: {\n        '': '($content-padding, 1x)',\n        'edge=right': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,\n      },\n      paddingBottom: {\n        '': '($content-padding, 1x)',\n        'edge=bottom': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,\n      },\n      overflow: {\n        '': 'auto',\n        'scrollbar=none': 'clip',\n      },\n      placeSelf: 'stretch',\n      scrollbar: {\n        '': '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      position: 'absolute',\n      right: {\n        '': '1px',\n        'edge=right': `${HANDLER_RESERVED + 1}px`,\n      },\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: {\n        '': '1px',\n        'edge=bottom': `${HANDLER_RESERVED + 1}px`,\n      },\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    // Compact resize handler - only drag dots\n    ResizeHandler: {\n      position: 'absolute',\n      // Size: 9px interactive area\n      width: {\n        '': '100%',\n        'edge=right': `${HANDLER_WIDTH}px`,\n      },\n      height: {\n        '': `${HANDLER_WIDTH}px`,\n        'edge=right': '100%',\n      },\n      // Position at edge, centered on the reserved space boundary\n      right: {\n        '': 'initial',\n        'edge=right': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,\n      },\n      bottom: {\n        '': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,\n        'edge=right': 'initial',\n      },\n      top: {\n        '': 'initial',\n        'edge=right': 0,\n      },\n      left: {\n        '': 0,\n        'edge=right': 'initial',\n      },\n      cursor: {\n        '': 'row-resize',\n        'edge=right': 'col-resize',\n        disabled: 'not-allowed',\n      },\n      padding: 0,\n      outline: 0,\n      boxSizing: 'border-box',\n      transition: 'theme',\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      border: 0,\n      flow: {\n        '': 'row',\n        'edge=right': 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        'edge=right': 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        'edge=right': '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        'edge=right': '3px',\n      },\n      height: {\n        '': '3px',\n        'edge=right': 'auto',\n      },\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      transition: 'theme',\n      radius: 'round',\n      outline: {\n        '': '0',\n        'focused | drag': '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'handlerHovered | drag | focused': '#primary-text',\n        disabled: '#disabled-surface-text',\n      },\n    },\n  },\n});\n\nexport type ResizeEdge = 'right' | 'bottom';\n\nexport interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {\n  /** Edge where resize handler appears */\n  resizeEdge?: ResizeEdge;\n  /** Enable resize functionality */\n  isResizable?: boolean;\n  /** Controlled size (width for right edge, height for bottom edge) */\n  size?: number | string;\n  /** Default size for uncontrolled state */\n  defaultSize?: number | string;\n  /** Minimum size constraint */\n  minSize?: number | string;\n  /** Maximum size constraint */\n  maxSize?: number | string;\n  /** Size change callback */\n  onSizeChange?: (size: number) => void;\n  /** Scrollbar style */\n  scrollbar?: ScrollbarType;\n  /** Custom styles */\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\ninterface PaneResizeHandlerProps {\n  edge: ResizeEdge;\n  isDisabled?: boolean;\n  moveProps: ReturnType<typeof useMove>['moveProps'];\n  onDoubleClick?: () => void;\n  onHoverChange?: (isHovered: boolean) => void;\n  onFocusChange?: (isFocused: boolean) => void;\n}\n\nfunction PaneResizeHandler(props: PaneResizeHandlerProps) {\n  const {\n    edge,\n    isDisabled,\n    moveProps,\n    onDoubleClick,\n    onHoverChange,\n    onFocusChange,\n  } = props;\n  const { hoverProps, isHovered } = useHover({\n    onHoverChange,\n  });\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const isHorizontal = edge === 'right';\n\n  // Notify parent of focus changes\n  useEffect(() => {\n    onFocusChange?.(isFocusVisible);\n  }, [isFocusVisible, onFocusChange]);\n\n  return (\n    <div\n      data-element=\"ResizeHandler\"\n      {...mergeProps(hoverProps, focusProps, isDisabled ? {} : moveProps, {\n        tabIndex: isDisabled ? undefined : 0,\n        role: 'separator',\n        'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n        'aria-label': `Resize pane ${edge}`,\n        onDoubleClick: isDisabled ? undefined : onDoubleClick,\n      })}\n    >\n      {!isDisabled && (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction LayoutPane(\n  props: CubeLayoutPaneProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    resizeEdge = 'right',\n    isResizable = false,\n    size: providedSize,\n    defaultSize = 200,\n    minSize,\n    maxSize,\n    onSizeChange,\n    scrollbar = 'thin',\n    styles,\n    mods,\n    children,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n\n  const combinedRef = useCombinedRefs(ref);\n  const internalInnerRef = useRef<HTMLDivElement>(null);\n  const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n  const prevProvidedSizeRef = useRef(providedSize);\n  const isHorizontal = resizeEdge === 'right';\n\n  // Resize state\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHandlerHovered, setIsHandlerHovered] = useState(false);\n  const [isHandlerFocused, setIsHandlerFocused] = useState(false);\n  const debouncedHandlerHovered = useDebouncedValue(isHandlerHovered, 150);\n  const [size, setSize] = useState<number>(() => {\n    const initialSize =\n      typeof providedSize === 'number'\n        ? providedSize\n        : typeof defaultSize === 'number'\n          ? defaultSize\n          : 200;\n\n    return clampSize(initialSize, minSize, maxSize);\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  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  // Clamp size to min/max constraints\n  const clampValue = useCallback(\n    (value: number) => clampSize(value, minSize, maxSize),\n    [minSize, maxSize],\n  );\n\n  const { moveProps } = useMove({\n    onMoveStart() {\n      if (!isResizable) return;\n      setIsDragging(true);\n    },\n    onMove(e) {\n      if (!isResizable) return;\n\n      let delta: number;\n\n      if (e.pointerType === 'keyboard') {\n        // Keyboard resize: 10px per step, 50px with Shift\n        const step = e.shiftKey ? 50 : 10;\n        const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n        delta = rawDelta * step;\n      } else {\n        // Pointer resize: use exact delta values\n        delta = isHorizontal ? e.deltaX : e.deltaY;\n      }\n\n      setSize((currentSize) => clampValue(currentSize + delta));\n    },\n    onMoveEnd() {\n      setIsDragging(false);\n      // Round to integer on release and notify parent\n      setSize((currentSize) => {\n        const finalSize = Math.round(clampValue(currentSize));\n        onSizeChange?.(finalSize);\n        return finalSize;\n      });\n    },\n  });\n\n  // Sync provided size with internal state (only when providedSize actually changes)\n  // This prevents resetting size when only isDragging changes (which would cause a flash)\n  useEffect(() => {\n    if (prevProvidedSizeRef.current !== providedSize) {\n      prevProvidedSizeRef.current = providedSize;\n      if (typeof providedSize === 'number' && !isDragging) {\n        setSize(clampValue(providedSize));\n      }\n    }\n  }, [providedSize, isDragging, clampValue]);\n\n  // Reset to default size on double-click\n  const handleResetSize = useCallback(() => {\n    const resetSize =\n      typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n    const clampedSize = clampValue(resetSize || 200);\n    setSize(clampedSize);\n    onSizeChange?.(clampedSize);\n  }, [defaultSize, clampValue, onSizeChange]);\n\n  const scrollbarStyle = useMemo(() => {\n    if (!isTinyScrollbar) return {};\n\n    return {\n      ...handleVStyle,\n      ...handleHStyle,\n    };\n  }, [isTinyScrollbar, handleVStyle, handleHStyle]);\n\n  const paneMods = useMemo(\n    () => ({\n      scrollbar,\n      hovered: isHovered,\n      scrolling: isScrolling,\n      handlerHovered: debouncedHandlerHovered,\n      focused: isHandlerFocused,\n      disabled: !isResizable,\n      edge: resizeEdge,\n      drag: isDragging,\n      ...mods,\n    }),\n    [\n      scrollbar,\n      isHovered,\n      isScrolling,\n      debouncedHandlerHovered,\n      isHandlerFocused,\n      isResizable,\n      resizeEdge,\n      isDragging,\n      mods,\n    ],\n  );\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  // Size is NOT included here - it's set via CSS custom property in paneStyle for performance\n  const finalStyles = useMemo(() => {\n    return mergeStyles(\n      styles,\n      outerStyles,\n      innerStyles ? { Inner: innerStyles } : null,\n    );\n  }, [styles, outerStyles, innerStyles]);\n\n  // Size is set via CSS custom property for performance during drag\n  // This avoids expensive style recalculation on every mouse move\n  const paneStyle = useMemo(\n    () => ({\n      ...scrollbarStyle,\n      '--pane-size': `${size}px`,\n      '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n      '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,\n    }),\n    [scrollbarStyle, size, minSize, maxSize],\n  );\n\n  return (\n    <PaneElement\n      ref={combinedRef}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      {...hoverProps}\n      mods={paneMods}\n      styles={finalStyles}\n      style={paneStyle}\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      {isResizable && (\n        <PaneResizeHandler\n          edge={resizeEdge}\n          isDisabled={!isResizable}\n          moveProps={moveProps}\n          onDoubleClick={handleResetSize}\n          onHoverChange={setIsHandlerHovered}\n          onFocusChange={setIsHandlerFocused}\n        />\n      )}\n    </PaneElement>\n  );\n}\n\nconst _LayoutPane = forwardRef(LayoutPane);\n\n_LayoutPane.displayName = 'Layout.Pane';\n\nexport { _LayoutPane as LayoutPane };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -9,6 +9,7 @@ import { DialogContainer } from "../../overlays/Dialog/DialogContainer.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { LayoutContextReset, LayoutPanelContext, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { clampSize, getOppositeSide, resolveCssSize } from "./utils.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -226,14 +227,22 @@ const OverlayBackdrop = tasty({
 	}
 });
 function ResizeHandler(props) {
+	const $ = c(19);
 	const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;
-	const { hoverProps, isHovered } = useHover({});
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {};
+		$[0] = t0;
+	} else t0 = $[0];
+	const { hoverProps, isHovered } = useHover(t0);
 	const { focusProps, isFocusVisible } = useFocusRing();
 	const isHorizontal = side === "left" || side === "right";
-	return /* @__PURE__ */ jsxs(ResizeHandlerElement, {
-		...mergeProps$1(hoverProps, focusProps, moveProps, {
+	const localIsHovered = useDebouncedValue(isHovered, 150);
+	let t1;
+	if ($[1] !== focusProps || $[2] !== hoverProps || $[3] !== isDisabled || $[4] !== isFocusVisible || $[5] !== isHorizontal || $[6] !== localIsHovered || $[7] !== mods || $[8] !== moveProps || $[9] !== onDoubleClick || $[10] !== side || $[11] !== style) {
+		t1 = mergeProps$1(hoverProps, focusProps, moveProps, {
 			mods: {
-				hovered: useDebouncedValue(isHovered, 150),
+				hovered: localIsHovered,
 				horizontal: isHorizontal,
 				disabled: isDisabled,
 				focused: isFocusVisible,
@@ -246,8 +255,28 @@ function ResizeHandler(props) {
 			"aria-orientation": isHorizontal ? "vertical" : "horizontal",
 			"aria-label": `Resize ${side} panel`,
 			onDoubleClick: isDisabled ? void 0 : onDoubleClick
-		}),
-		children: [/* @__PURE__ */ jsx("div", { "data-element": "Track" }), !isDisabled && /* @__PURE__ */ jsxs("div", {
+		});
+		$[1] = focusProps;
+		$[2] = hoverProps;
+		$[3] = isDisabled;
+		$[4] = isFocusVisible;
+		$[5] = isHorizontal;
+		$[6] = localIsHovered;
+		$[7] = mods;
+		$[8] = moveProps;
+		$[9] = onDoubleClick;
+		$[10] = side;
+		$[11] = style;
+		$[12] = t1;
+	} else t1 = $[12];
+	let t2;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("div", { "data-element": "Track" });
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== isDisabled) {
+		t3 = !isDisabled && /* @__PURE__ */ jsxs("div", {
 			"data-element": "Drag",
 			children: [
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
@@ -256,8 +285,21 @@ function ResizeHandler(props) {
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" })
 			]
-		})]
-	});
+		});
+		$[14] = isDisabled;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== t1 || $[17] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(ResizeHandlerElement, {
+			...t1,
+			children: [t2, t3]
+		});
+		$[16] = t1;
+		$[17] = t3;
+		$[18] = t4;
+	} else t4 = $[18];
+	return t4;
 }
 function LayoutPanel(props, ref) {
 	const layoutActions = useLayoutActionsContext();
@@ -331,8 +373,8 @@ function LayoutPanel(props, ref) {
 		onMoveEnd() {
 			setIsDragging(false);
 			setContextDragging(false);
-			setSize((currentSize) => {
-				const finalSize = Math.round(clampValue(currentSize));
+			setSize((currentSize_0) => {
+				const finalSize = Math.round(clampValue(currentSize_0));
 				onSizeChange?.(finalSize);
 				setStoredSize(finalSize);
 				return finalSize;
@@ -405,9 +447,9 @@ function LayoutPanel(props, ref) {
 		registerOverlayPanel,
 		handleOpenChange
 	]);
-	const handleDialogOpenChange = useCallback((newIsOpen) => {
-		setInternalIsDialogOpen(newIsOpen);
-		onDialogOpenChange?.(newIsOpen);
+	const handleDialogOpenChange = useCallback((newIsOpen_0) => {
+		setInternalIsDialogOpen(newIsOpen_0);
+		onDialogOpenChange?.(newIsOpen_0);
 	}, [onDialogOpenChange]);
 	const panelContextValue = useMemo(() => ({
 		onOpenChange: handleOpenChange,
@@ -466,7 +508,7 @@ function LayoutPanel(props, ref) {
 		onSizeChange,
 		setStoredSize
 	]);
-	const renderPanelContent = (offscreen = false, transitionRef) => {
+	const renderPanelContent = (offscreen = false, transitionRef_0) => {
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			isOverlayMode && /* @__PURE__ */ jsx(OverlayBackdrop, {
 				mods: { visible: isOverlayMode && !offscreen },
@@ -475,7 +517,7 @@ function LayoutPanel(props, ref) {
 				onClick: handleDismiss
 			}),
 			/* @__PURE__ */ jsx(PanelElement, {
-				ref: (node) => panelRefCallback(node, transitionRef),
+				ref: (node_0) => panelRefCallback(node_0, transitionRef_0),
 				...filterBaseProps(otherProps, { eventProps: true }),
 				mods: {
 					...panelMods,
@@ -521,7 +563,7 @@ function LayoutPanel(props, ref) {
 	if (hasTransition) return createPortal(/* @__PURE__ */ jsx(DisplayTransition, {
 		isShown: isOpen,
 		animateOnMount: false,
-		children: ({ isShown, ref: transitionRef }) => renderPanelContent(!isShown, transitionRef)
+		children: ({ isShown, ref: transitionRef_1 }) => renderPanelContent(!isShown, transitionRef_1)
 	}), portalContainer);
 	if (!isOpen) return null;
 	return createPortal(renderPanelContent(false), portalContainer);