@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1,359 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
+import { INNER_STYLES, OUTER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
+import { LayoutContextReset } from "./LayoutContext.js";
+import { useTinyScrollbar } from "./hooks/useTinyScrollbar.js";
+import { clampSize } from "./utils.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFocusRing, useHover, useMove } from "react-aria";
+
+//#region src/components/content/Layout/LayoutPane.tsx
+const HANDLER_WIDTH = 9;
+const HANDLER_RESERVED = 5;
+const PaneElement = tasty({
+	as: "div",
+	qa: "LayoutPane",
+	styles: {
+		container: "pane / inline-size",
+		position: "relative",
+		display: "grid",
+		gridColumns: "1sf",
+		gridRows: "1sf",
+		placeContent: "stretch",
+		placeItems: "stretch",
+		placeSelf: "stretch",
+		flexShrink: 0,
+		flexGrow: 0,
+		width: {
+			"": "auto",
+			"edge=right": "2x $pane-size $pane-size"
+		},
+		height: {
+			"": "2x $pane-size $pane-size",
+			"edge=right": "auto"
+		},
+		boxSizing: "content-box",
+		Inner: {
+			$: ">",
+			display: "flex",
+			flow: "column",
+			padding: "($content-padding, 1x)",
+			paddingRight: {
+				"": "($content-padding, 1x)",
+				"edge=right": `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`
+			},
+			paddingBottom: {
+				"": "($content-padding, 1x)",
+				"edge=bottom": `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`
+			},
+			overflow: {
+				"": "auto",
+				"scrollbar=none": "clip"
+			},
+			placeSelf: "stretch",
+			scrollbar: {
+				"": "thin",
+				"scrollbar=tiny | scrollbar=none": "none"
+			},
+			"$layout-border-size": "0"
+		},
+		ScrollbarV: {
+			position: "absolute",
+			right: {
+				"": "1px",
+				"edge=right": `${HANDLER_RESERVED + 1}px`
+			},
+			top: "$scrollbar-v-top",
+			width: "1ow",
+			height: "$scrollbar-v-height",
+			radius: "round",
+			fill: "#dark.35",
+			opacity: {
+				"": 0,
+				"(focused | scrolling) & scrollbar=tiny": 1
+			},
+			transition: "opacity 0.15s",
+			pointerEvents: "none"
+		},
+		ScrollbarH: {
+			$: ">",
+			position: "absolute",
+			bottom: {
+				"": "1px",
+				"edge=bottom": `${HANDLER_RESERVED + 1}px`
+			},
+			left: "$scrollbar-h-left",
+			height: "1ow",
+			width: "$scrollbar-h-width",
+			radius: "round",
+			fill: "#dark.35",
+			opacity: {
+				"": 0,
+				"(focused | scrolling) & scrollbar=tiny": 1
+			},
+			transition: "opacity 0.15s",
+			pointerEvents: "none"
+		},
+		ResizeHandler: {
+			position: "absolute",
+			width: {
+				"": "100%",
+				"edge=right": `${HANDLER_WIDTH}px`
+			},
+			height: {
+				"": `${HANDLER_WIDTH}px`,
+				"edge=right": "100%"
+			},
+			right: {
+				"": "initial",
+				"edge=right": `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`
+			},
+			bottom: {
+				"": `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,
+				"edge=right": "initial"
+			},
+			top: {
+				"": "initial",
+				"edge=right": 0
+			},
+			left: {
+				"": 0,
+				"edge=right": "initial"
+			},
+			cursor: {
+				"": "row-resize",
+				"edge=right": "col-resize",
+				disabled: "not-allowed"
+			},
+			padding: 0,
+			outline: 0,
+			boxSizing: "border-box",
+			transition: "theme"
+		},
+		Drag: {
+			display: "grid",
+			gap: "2bw",
+			border: 0,
+			flow: {
+				"": "row",
+				"edge=right": "column"
+			},
+			gridColumns: {
+				"": "3px 3px 3px 3px 3px",
+				"edge=right": "auto"
+			},
+			gridRows: {
+				"": "auto",
+				"edge=right": "3px 3px 3px 3px 3px"
+			},
+			width: {
+				"": "auto",
+				"edge=right": "3px"
+			},
+			height: {
+				"": "3px",
+				"edge=right": "auto"
+			},
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			transition: "theme",
+			radius: "round",
+			outline: {
+				"": "0",
+				"focused | drag": "1bw #primary-text"
+			},
+			outlineOffset: 1
+		},
+		DragPart: {
+			radius: true,
+			fill: {
+				"": "#dark-03",
+				"handlerHovered | drag | focused": "#primary-text",
+				disabled: "#dark-04"
+			}
+		}
+	}
+});
+function PaneResizeHandler(props) {
+	const { edge, isDisabled, moveProps, onDoubleClick, onHoverChange, onFocusChange } = props;
+	const { hoverProps, isHovered } = useHover({ onHoverChange });
+	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, {
+			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", {
+			"data-element": "Drag",
+			children: [
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" })
+			]
+		})
+	});
+}
+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;
+	const combinedRef = useCombinedRefs(ref);
+	const internalInnerRef = useRef(null);
+	const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);
+	const prevProvidedSizeRef = useRef(providedSize);
+	const isHorizontal = resizeEdge === "right";
+	const [isDragging, setIsDragging] = useState(false);
+	const [isHandlerHovered, setIsHandlerHovered] = useState(false);
+	const [isHandlerFocused, setIsHandlerFocused] = useState(false);
+	const debouncedHandlerHovered = useDebouncedValue(isHandlerHovered, 150);
+	const [size, setSize] = useState(() => {
+		return clampSize(typeof providedSize === "number" ? providedSize : typeof defaultSize === "number" ? defaultSize : 200, minSize, maxSize);
+	});
+	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
+	const innerStyles = extractStyles(otherProps, INNER_STYLES);
+	const isTinyScrollbar = scrollbar === "tiny";
+	const { hoverProps, isHovered } = useHover({});
+	const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
+	const clampValue = useCallback((value) => clampSize(value, minSize, maxSize), [minSize, maxSize]);
+	const { moveProps } = useMove({
+		onMoveStart() {
+			if (!isResizable) return;
+			setIsDragging(true);
+		},
+		onMove(e) {
+			if (!isResizable) return;
+			let delta;
+			if (e.pointerType === "keyboard") {
+				const step = e.shiftKey ? 50 : 10;
+				delta = (isHorizontal ? e.deltaX : e.deltaY) * step;
+			} else delta = isHorizontal ? e.deltaX : e.deltaY;
+			setSize((currentSize) => clampValue(currentSize + delta));
+		},
+		onMoveEnd() {
+			setIsDragging(false);
+			setSize((currentSize) => {
+				const finalSize = Math.round(clampValue(currentSize));
+				onSizeChange?.(finalSize);
+				return finalSize;
+			});
+		}
+	});
+	useEffect(() => {
+		if (prevProvidedSizeRef.current !== providedSize) {
+			prevProvidedSizeRef.current = providedSize;
+			if (typeof providedSize === "number" && !isDragging) setSize(clampValue(providedSize));
+		}
+	}, [
+		providedSize,
+		isDragging,
+		clampValue
+	]);
+	const handleResetSize = useCallback(() => {
+		const clampedSize = clampValue((typeof defaultSize === "number" ? defaultSize : parseInt(defaultSize, 10)) || 200);
+		setSize(clampedSize);
+		onSizeChange?.(clampedSize);
+	}, [
+		defaultSize,
+		clampValue,
+		onSizeChange
+	]);
+	const scrollbarStyle = useMemo(() => {
+		if (!isTinyScrollbar) return {};
+		return {
+			...handleVStyle,
+			...handleHStyle
+		};
+	}, [
+		isTinyScrollbar,
+		handleVStyle,
+		handleHStyle
+	]);
+	const paneMods = useMemo(() => ({
+		scrollbar,
+		hovered: isHovered,
+		scrolling: isScrolling,
+		handlerHovered: debouncedHandlerHovered,
+		focused: isHandlerFocused,
+		disabled: !isResizable,
+		edge: resizeEdge,
+		drag: isDragging,
+		...mods
+	}), [
+		scrollbar,
+		isHovered,
+		isScrolling,
+		debouncedHandlerHovered,
+		isHandlerFocused,
+		isResizable,
+		resizeEdge,
+		isDragging,
+		mods
+	]);
+	const finalStyles = useMemo(() => {
+		return mergeStyles(styles, outerStyles, innerStyles ? { Inner: innerStyles } : null);
+	}, [
+		styles,
+		outerStyles,
+		innerStyles
+	]);
+	const paneStyle = useMemo(() => ({
+		...scrollbarStyle,
+		"--pane-size": `${size}px`,
+		"--min-size": typeof minSize === "number" ? `${minSize}px` : minSize,
+		"--max-size": typeof maxSize === "number" ? `${maxSize}px` : maxSize
+	}), [
+		scrollbarStyle,
+		size,
+		minSize,
+		maxSize
+	]);
+	return /* @__PURE__ */ jsxs(PaneElement, {
+		ref: combinedRef,
+		...filterBaseProps(otherProps, { eventProps: true }),
+		...hoverProps,
+		mods: paneMods,
+		styles: finalStyles,
+		style: paneStyle,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: combinedInnerRef,
+				"data-element": "Inner",
+				...innerProps,
+				children: /* @__PURE__ */ jsx(LayoutContextReset, { children })
+			}),
+			isTinyScrollbar && hasOverflowY && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarV" }),
+			isTinyScrollbar && hasOverflowX && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarH" }),
+			isResizable && /* @__PURE__ */ jsx(PaneResizeHandler, {
+				edge: resizeEdge,
+				isDisabled: !isResizable,
+				moveProps,
+				onDoubleClick: handleResetSize,
+				onHoverChange: setIsHandlerHovered,
+				onFocusChange: setIsHandlerFocused
+			})
+		]
+	});
+}
+const _LayoutPane = forwardRef(LayoutPane);
+_LayoutPane.displayName = "Layout.Pane";
+
+//#endregion
+export { _LayoutPane };
+//# sourceMappingURL=LayoutPane.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPane.js","names":["mergeProps"],"sources":["../../../../src/components/content/Layout/LayoutPane.tsx"],"sourcesContent":["import {\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 {\n  BaseProps,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\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: '#dark-04',\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.d.ts

@@ -0,0 +1,74 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { CubeDialogContainerProps } from "../../overlays/Dialog/DialogContainer.js";
+import { Side } from "./LayoutContext.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/content/Layout/LayoutPanel.d.ts
+/** Panel rendering mode */
+type LayoutPanelMode = 'default' | 'sticky' | 'overlay' | 'dialog';
+interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {
+  /** Side of the layout where panel is positioned */
+  side: Side;
+  /**
+   * Panel rendering mode:
+   * - `default`: Standard panel that pushes content aside
+   * - `sticky`: Panel floats over content without pushing it
+   * - `overlay`: Panel with dismissable backdrop overlay
+   * - `dialog`: Panel renders as a modal dialog
+   */
+  mode?: LayoutPanelMode;
+  /** Panel size (width for left/right, height for top/bottom) - controlled */
+  size?: number | string;
+  /** Default panel size for uncontrolled state */
+  defaultSize?: number | string;
+  /** Minimum panel size */
+  minSize?: number | string;
+  /** Maximum panel size */
+  maxSize?: number | string;
+  /** Enable resize functionality */
+  isResizable?: boolean;
+  /** Size change callback */
+  onSizeChange?: (size: number) => void;
+  /** Controlled open state */
+  isOpen?: boolean;
+  /** Default open state */
+  defaultIsOpen?: boolean;
+  /** Open state change callback */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Enable slide transition on open/close */
+  hasTransition?: boolean;
+  /**
+   * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.
+   * Only applies to `overlay` and `dialog` modes. Default: true
+   */
+  isDismissable?: boolean;
+  /** Styles for the overlay backdrop in overlay mode */
+  overlayStyles?: Styles;
+  /**
+   * @deprecated Use `mode="dialog"` instead. Switch to dialog mode (renders panel inside Dialog)
+   */
+  isDialog?: boolean;
+  /** Controlled dialog open state (used with mode="dialog") */
+  isDialogOpen?: boolean;
+  /** Default dialog open state */
+  defaultIsDialogOpen?: boolean;
+  /** Dialog open state change callback */
+  onDialogOpenChange?: (isOpen: boolean) => void;
+  /** Props passed to Dialog component when in dialog mode */
+  dialogProps?: Omit<CubeDialogContainerProps, 'isDismissable' | 'onDismiss' | 'isOpen'>;
+  /** Padding for content areas inside the panel. Default: '1x' */
+  contentPadding?: Styles['padding'];
+  /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */
+  sizeStorageKey?: string;
+  /** Styles for the panel */
+  styles?: Styles;
+  children?: ReactNode;
+}
+declare const _LayoutPanel: react.ForwardRefExoticComponent<CubeLayoutPanelProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutPanelProps, LayoutPanelMode, _LayoutPanel };
+//# sourceMappingURL=LayoutPanel.d.ts.map