@cube-dev/ui-kit 0.114.0 → 0.115.0

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

@@ -0,0 +1,484 @@
+/** @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 { CONTAINER_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 { useLocalStorage } from "../../../utils/react/useLocalStorage.js";
+import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
+import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
+import { DialogContainer } from "../../overlays/Dialog/DialogContainer.js";
+import { Dialog } from "../../overlays/Dialog/Dialog.js";
+import { LayoutContextReset, LayoutPanelContext, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
+import { clampSize } from "./utils.js";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useFocusRing, useHover, useMove } from "react-aria";
+import { createPortal } from "react-dom";
+
+//#region src/components/content/Layout/LayoutPanel.tsx
+const HANDLER_WIDTH = 9;
+const HANDLER_OFFSET = 4;
+const RESIZABLE_INSET_OFFSET = 2;
+const PanelElement = tasty({
+	as: "div",
+	qa: "LayoutPanel",
+	styles: {
+		container: "panel / inline-size",
+		position: "absolute",
+		display: "flex",
+		flow: "column",
+		overflow: "hidden",
+		boxSizing: "border-box",
+		"$content-padding": "1x",
+		"$layout-border-size": "1bw",
+		top: {
+			"": 0,
+			"side=bottom": "initial"
+		},
+		right: {
+			"": 0,
+			"side=left": "initial"
+		},
+		bottom: {
+			"": 0,
+			"side=top": "initial"
+		},
+		left: {
+			"": 0,
+			"side=right": "initial"
+		},
+		width: {
+			"": "$panel-size",
+			"side=top | side=bottom": "100%"
+		},
+		height: {
+			"": "100%",
+			"side=top | side=bottom": "$panel-size"
+		},
+		border: {
+			"side=left": "right",
+			"side=right": "left",
+			"side=top": "bottom",
+			"side=bottom": "top"
+		},
+		fill: "#white",
+		transform: {
+			"": "translateX(0) translateY(0)",
+			"offscreen & side=left": "translateX(-100%)",
+			"offscreen & side=right": "translateX(100%)",
+			"offscreen & side=top": "translateY(-100%)",
+			"offscreen & side=bottom": "translateY(100%)"
+		},
+		transition: {
+			"": "none",
+			"has-transition": "transform $transition ease-out"
+		}
+	}
+});
+const ResizeHandlerElement = tasty({
+	qa: "PanelResizeHandler",
+	styles: {
+		position: "absolute",
+		width: {
+			"": "100%",
+			horizontal: `${HANDLER_WIDTH}px`,
+			"disabled & horizontal": "1bw"
+		},
+		height: {
+			"": `${HANDLER_WIDTH}px`,
+			horizontal: "100%",
+			"disabled & !horizontal": "1bw"
+		},
+		top: {
+			"": 0,
+			"side=top": `calc($panel-size - ${HANDLER_OFFSET}px)`,
+			"side=bottom": "initial"
+		},
+		bottom: {
+			"": 0,
+			"side=bottom": `calc($panel-size - ${HANDLER_OFFSET}px)`,
+			"side=top": "initial"
+		},
+		left: {
+			"": 0,
+			"side=left": `calc($panel-size - ${HANDLER_OFFSET}px)`,
+			"side=right": "initial"
+		},
+		right: {
+			"": 0,
+			"side=right": `calc($panel-size - ${HANDLER_OFFSET}px)`,
+			"side=left": "initial"
+		},
+		transform: {
+			"offscreen & side=left": `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,
+			"offscreen & side=right": `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,
+			"offscreen & side=top": `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,
+			"offscreen & side=bottom": `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`
+		},
+		cursor: {
+			"": "row-resize",
+			horizontal: "col-resize",
+			disabled: "not-allowed"
+		},
+		padding: 0,
+		outline: 0,
+		boxSizing: "border-box",
+		transition: {
+			"": "theme",
+			"has-transition": "transform $transition ease-out, theme"
+		},
+		Track: {
+			width: {
+				"": "initial",
+				horizontal: "3px",
+				"disabled & horizontal": "1px"
+			},
+			height: {
+				"": "3px",
+				horizontal: "initial",
+				"disabled & !horizontal": "1px"
+			},
+			position: "absolute",
+			inset: {
+				"": "3px 0",
+				horizontal: "0 3px",
+				disabled: "0 0"
+			},
+			fill: {
+				"": "#border",
+				"(hovered | drag | focused) & !disabled": "#purple-03"
+			},
+			border: 0,
+			transition: "theme",
+			outline: {
+				"": "1bw #primary-text.0",
+				"drag | focused": "1bw #primary-text"
+			},
+			outlineOffset: 1
+		},
+		Drag: {
+			display: "grid",
+			gap: "2bw",
+			border: 0,
+			flow: {
+				"": "row",
+				horizontal: "column"
+			},
+			gridColumns: {
+				"": "3px 3px 3px 3px 3px",
+				horizontal: "auto"
+			},
+			gridRows: {
+				"": "auto",
+				horizontal: "3px 3px 3px 3px 3px"
+			},
+			width: {
+				"": "auto",
+				horizontal: "1px"
+			},
+			height: {
+				"": "1px",
+				horizontal: "auto"
+			},
+			inset: {
+				"": "4px 50% auto auto",
+				horizontal: "50% 4px auto auto"
+			},
+			transform: {
+				"": "translate(-50%, 0)",
+				horizontal: "translate(0, -50%)"
+			},
+			position: "absolute",
+			transition: "theme"
+		},
+		DragPart: {
+			radius: true,
+			fill: {
+				"": "#dark-03",
+				"hovered | drag | focused": "#primary-text",
+				disabled: "#dark-04"
+			}
+		}
+	}
+});
+const OverlayBackdrop = tasty({
+	qa: "PanelOverlay",
+	styles: {
+		position: "absolute",
+		inset: 0,
+		backdropFilter: "invert(.15)",
+		cursor: "pointer",
+		opacity: {
+			"": 0,
+			visible: 1
+		},
+		pointerEvents: {
+			"": "none",
+			visible: "auto"
+		},
+		transition: "opacity .15s ease-out"
+	}
+});
+function ResizeHandler(props) {
+	const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;
+	const { hoverProps, isHovered } = useHover({});
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const isHorizontal = side === "left" || side === "right";
+	return /* @__PURE__ */ jsxs(ResizeHandlerElement, {
+		...mergeProps$1(hoverProps, focusProps, moveProps, {
+			mods: {
+				hovered: useDebouncedValue(isHovered, 150),
+				horizontal: isHorizontal,
+				disabled: isDisabled,
+				focused: isFocusVisible,
+				side,
+				...mods
+			},
+			style,
+			tabIndex: isDisabled ? void 0 : 0,
+			role: "separator",
+			"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", {
+			"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 LayoutPanel(props, ref) {
+	const layoutActions = useLayoutActionsContext();
+	const layoutState = useLayoutStateContext();
+	const layoutRefs = useLayoutRefsContext();
+	if (!layoutActions || !layoutState || !layoutRefs) throw new Error("Layout.Panel must be used within a Layout component. Ensure your panel is rendered inside a <Layout> parent.");
+	const { side = "left", mode: modeProp, size: providedSize, defaultSize = 280, minSize = 200, maxSize, isResizable = false, onSizeChange, isOpen: providedIsOpen, defaultIsOpen = true, onOpenChange, hasTransition: hasTransitionProp, isDismissable = true, overlayStyles, isDialog = false, isDialogOpen: providedIsDialogOpen, defaultIsDialogOpen = false, onDialogOpenChange, dialogProps, contentPadding, sizeStorageKey, children, styles, mods, ...otherProps } = props;
+	const mode = modeProp ?? (isDialog ? "dialog" : "default");
+	const isDialogMode = mode === "dialog";
+	const isOverlayMode = mode === "overlay";
+	const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;
+	const combinedRef = useCombinedRefs(ref);
+	const prevProvidedSizeRef = useRef(providedSize);
+	const isHorizontal = side === "left" || side === "right";
+	const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
+	const isOpen = providedIsOpen ?? internalIsOpen;
+	const [internalIsDialogOpen, setInternalIsDialogOpen] = useState(defaultIsDialogOpen);
+	const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;
+	const [storedSize, setStoredSize] = useLocalStorage(sizeStorageKey ?? null, null);
+	const [isDragging, setIsDragging] = useState(false);
+	const [size, setSize] = useState(() => {
+		return clampSize(typeof providedSize === "number" ? providedSize : storedSize != null ? storedSize : typeof defaultSize === "number" ? defaultSize : 280, minSize, maxSize);
+	});
+	const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);
+	const finalStyles = useMemo(() => mergeStyles(styles, contentPadding != null ? { "$content-padding": contentPadding } : null, extractedStyles), [
+		extractedStyles,
+		contentPadding,
+		styles
+	]);
+	const clampValue = useCallback((value) => clampSize(value, minSize, maxSize), [minSize, maxSize]);
+	const setContextDragging = layoutActions.setDragging;
+	const { moveProps } = useMove({
+		onMoveStart() {
+			if (!isResizable) return;
+			setIsDragging(true);
+			setContextDragging(true);
+		},
+		onMove(e) {
+			if (!isResizable) return;
+			let delta;
+			if (e.pointerType === "keyboard") {
+				const step = e.shiftKey ? 50 : 10;
+				const rawDelta = isHorizontal ? e.deltaX : e.deltaY;
+				const direction = side === "right" || side === "bottom" ? -1 : 1;
+				delta = rawDelta * step * direction;
+			} else delta = isHorizontal ? e.deltaX * (side === "right" ? -1 : 1) : e.deltaY * (side === "bottom" ? -1 : 1);
+			setSize((currentSize) => clampValue(currentSize + delta));
+		},
+		onMoveEnd() {
+			setIsDragging(false);
+			setContextDragging(false);
+			setSize((currentSize) => {
+				const finalSize = Math.round(clampValue(currentSize));
+				onSizeChange?.(finalSize);
+				setStoredSize(finalSize);
+				return finalSize;
+			});
+		}
+	});
+	useEffect(() => {
+		if (prevProvidedSizeRef.current !== providedSize) {
+			prevProvidedSizeRef.current = providedSize;
+			if (typeof providedSize === "number" && !isDragging) setSize(clampValue(providedSize));
+		}
+	}, [
+		providedSize,
+		isDragging,
+		clampValue
+	]);
+	const effectivePanelSize = isOpen && mode === "default" ? size : 0;
+	const effectiveInsetSize = Math.round(effectivePanelSize + (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0));
+	const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;
+	const { isReady } = layoutState;
+	const lastSizeRef = useRef(effectiveInsetSize);
+	useLayoutEffect(() => {
+		registerPanel(side, lastSizeRef.current);
+		return () => {
+			unregisterPanel(side);
+		};
+	}, [
+		side,
+		registerPanel,
+		unregisterPanel
+	]);
+	useLayoutEffect(() => {
+		if (lastSizeRef.current !== effectiveInsetSize) {
+			lastSizeRef.current = effectiveInsetSize;
+			updatePanelSize(side, effectiveInsetSize);
+		}
+	}, [
+		side,
+		effectiveInsetSize,
+		updatePanelSize
+	]);
+	const handleOpenChange = useCallback((newIsOpen) => {
+		setInternalIsOpen(newIsOpen);
+		onOpenChange?.(newIsOpen);
+	}, [onOpenChange]);
+	const handleDismiss = useCallback(() => {
+		if (isDismissable) handleOpenChange(false);
+	}, [isDismissable, handleOpenChange]);
+	const { registerOverlayPanel } = layoutActions;
+	useEffect(() => {
+		if (isOverlayMode && isOpen && isDismissable) return registerOverlayPanel(() => handleOpenChange(false));
+	}, [
+		isOverlayMode,
+		isOpen,
+		isDismissable,
+		registerOverlayPanel,
+		handleOpenChange
+	]);
+	const handleDialogOpenChange = useCallback((newIsOpen) => {
+		setInternalIsDialogOpen(newIsOpen);
+		onDialogOpenChange?.(newIsOpen);
+	}, [onDialogOpenChange]);
+	const panelContextValue = useMemo(() => ({
+		onOpenChange: handleOpenChange,
+		isOpen
+	}), [handleOpenChange, isOpen]);
+	const dialogPanelContextValue = useMemo(() => ({
+		onOpenChange: handleDialogOpenChange,
+		isOpen: dialogOpen
+	}), [handleDialogOpenChange, dialogOpen]);
+	const panelMods = useMemo(() => ({
+		side,
+		drag: isDragging,
+		horizontal: isHorizontal,
+		"has-transition": hasTransition && isReady,
+		...mods
+	}), [
+		side,
+		isDragging,
+		isHorizontal,
+		hasTransition,
+		isReady,
+		mods
+	]);
+	const panelStyle = useMemo(() => ({
+		"--panel-size": `${size}px`,
+		"--min-size": typeof minSize === "number" ? `${minSize}px` : minSize,
+		"--max-size": maxSize != null ? typeof maxSize === "number" ? `${maxSize}px` : maxSize : void 0
+	}), [
+		size,
+		minSize,
+		maxSize
+	]);
+	const panelRefCallback = useCallback((node, transitionRef) => {
+		combinedRef.current = node;
+		transitionRef?.(node);
+	}, [combinedRef]);
+	const handleResetSize = useCallback(() => {
+		const clampedSize = clampValue((typeof defaultSize === "number" ? defaultSize : parseInt(defaultSize, 10)) || 280);
+		setSize(clampedSize);
+		onSizeChange?.(clampedSize);
+		setStoredSize(clampedSize);
+	}, [
+		defaultSize,
+		clampValue,
+		onSizeChange,
+		setStoredSize
+	]);
+	const renderPanelContent = (offscreen = false, transitionRef) => {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			isOverlayMode && /* @__PURE__ */ jsx(OverlayBackdrop, {
+				mods: { visible: isOverlayMode && !offscreen },
+				styles: overlayStyles,
+				"aria-hidden": "true",
+				onClick: handleDismiss
+			}),
+			/* @__PURE__ */ jsx(PanelElement, {
+				ref: (node) => panelRefCallback(node, transitionRef),
+				...filterBaseProps(otherProps, { eventProps: true }),
+				mods: {
+					...panelMods,
+					offscreen
+				},
+				styles: finalStyles,
+				style: panelStyle,
+				"data-side": side,
+				children: /* @__PURE__ */ jsx(LayoutPanelContext.Provider, {
+					value: panelContextValue,
+					children: /* @__PURE__ */ jsx(LayoutContextReset, { children })
+				})
+			}),
+			isResizable && /* @__PURE__ */ jsx(ResizeHandler, {
+				side,
+				isDisabled: !isResizable,
+				mods: {
+					drag: isDragging,
+					offscreen,
+					"has-transition": hasTransition && isReady
+				},
+				moveProps,
+				style: panelStyle,
+				onDoubleClick: handleResetSize
+			})
+		] });
+	};
+	if (isDialogMode) return /* @__PURE__ */ jsx(DialogContainer, {
+		isOpen: dialogOpen,
+		isDismissable,
+		onDismiss: () => handleDialogOpenChange(false),
+		...dialogProps,
+		children: /* @__PURE__ */ jsx(Dialog, {
+			isDismissable: false,
+			children: /* @__PURE__ */ jsx(LayoutPanelContext.Provider, {
+				value: dialogPanelContextValue,
+				children: /* @__PURE__ */ jsx(LayoutContextReset, { children })
+			})
+		})
+	});
+	if (!layoutRefs.isPanelContainerReady) return null;
+	const portalContainer = layoutRefs.panelContainerRef.current;
+	if (hasTransition) return createPortal(/* @__PURE__ */ jsx(DisplayTransition, {
+		isShown: isOpen,
+		animateOnMount: false,
+		children: ({ isShown, ref: transitionRef }) => renderPanelContent(!isShown, transitionRef)
+	}), portalContainer);
+	if (!isOpen) return null;
+	return createPortal(renderPanelContent(false), portalContainer);
+}
+const _LayoutPanel = forwardRef(LayoutPanel);
+_LayoutPanel.displayName = "Layout.Panel";
+
+//#endregion
+export { _LayoutPanel };
+//# sourceMappingURL=LayoutPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPanel.js","names":["mergeProps"],"sources":["../../../../src/components/content/Layout/LayoutPanel.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport {\n  mergeProps,\n  useCombinedRefs,\n  useLocalStorage,\n} from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Dialog } from '../../overlays/Dialog';\nimport {\n  CubeDialogContainerProps,\n  DialogContainer,\n} from '../../overlays/Dialog/DialogContainer';\n\nimport {\n  LayoutContextReset,\n  LayoutPanelContext,\n  Side,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\nimport { clampSize } from './utils';\n\n// Resize handler dimensions\nconst HANDLER_WIDTH = 9;\n// How far from panel edge to position handler's inner edge (centers the 3px track on the edge)\nconst HANDLER_OFFSET = 4;\n// Extra inset added for resizable panels (to accommodate handler grab area)\nconst RESIZABLE_INSET_OFFSET = 2;\n\nconst PanelElement = tasty({\n  as: 'div',\n  qa: 'LayoutPanel',\n  styles: {\n    container: 'panel / inline-size',\n    position: 'absolute',\n    display: 'flex',\n    flow: 'column',\n    overflow: 'hidden',\n    boxSizing: 'border-box',\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (panels are always vertical)\n    '$layout-border-size': '1bw',\n\n    // Position based on side prop\n    top: {\n      '': 0,\n      'side=bottom': 'initial',\n    },\n    right: {\n      '': 0,\n      'side=left': 'initial',\n    },\n    bottom: {\n      '': 0,\n      'side=top': 'initial',\n    },\n    left: {\n      '': 0,\n      'side=right': 'initial',\n    },\n\n    // Size handling\n    width: {\n      '': '$panel-size',\n      'side=top | side=bottom': '100%',\n    },\n    height: {\n      '': '100%',\n      'side=top | side=bottom': '$panel-size',\n    },\n\n    // Visual styling\n    border: {\n      'side=left': 'right',\n      'side=right': 'left',\n      'side=top': 'bottom',\n      'side=bottom': 'top',\n    },\n    fill: '#white',\n\n    // Transition styles - offscreen mod controls slide animation\n    transform: {\n      '': 'translateX(0) translateY(0)',\n      'offscreen & side=left': 'translateX(-100%)',\n      'offscreen & side=right': 'translateX(100%)',\n      'offscreen & side=top': 'translateY(-100%)',\n      'offscreen & side=bottom': 'translateY(100%)',\n    },\n    transition: {\n      '': 'none',\n      'has-transition': 'transform $transition ease-out',\n    },\n  },\n});\n\n// Handler is positioned as sibling to panel (in Fragment), relative to Layout\nconst ResizeHandlerElement = tasty({\n  qa: 'PanelResizeHandler',\n  styles: {\n    position: 'absolute',\n\n    // Handler size\n    width: {\n      '': '100%',\n      horizontal: `${HANDLER_WIDTH}px`,\n      'disabled & horizontal': '1bw',\n    },\n    height: {\n      '': `${HANDLER_WIDTH}px`,\n      horizontal: '100%',\n      'disabled & !horizontal': '1bw',\n    },\n\n    // Position handler with direct offset (no centering needed)\n    top: {\n      '': 0,\n      'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=bottom': 'initial',\n    },\n    bottom: {\n      '': 0,\n      'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=top': 'initial',\n    },\n    left: {\n      '': 0,\n      'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=right': 'initial',\n    },\n    right: {\n      '': 0,\n      'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=left': 'initial',\n    },\n\n    // Offscreen transforms only (no centering needed with direct offset positioning)\n    transform: {\n      'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=bottom': `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n    },\n\n    cursor: {\n      '': 'row-resize',\n      horizontal: 'col-resize',\n      disabled: 'not-allowed',\n    },\n    padding: 0,\n    outline: 0,\n    boxSizing: 'border-box',\n\n    // Transition must match panel for synchronized animation\n    transition: {\n      '': 'theme',\n      'has-transition': 'transform $transition ease-out, theme',\n    },\n\n    Track: {\n      width: {\n        '': 'initial',\n        horizontal: '3px',\n        'disabled & horizontal': '1px',\n      },\n      height: {\n        '': '3px',\n        horizontal: 'initial',\n        'disabled & !horizontal': '1px',\n      },\n      position: 'absolute',\n      inset: {\n        '': '3px 0',\n        horizontal: '0 3px',\n        disabled: '0 0',\n      },\n      fill: {\n        '': '#border',\n        '(hovered | drag | focused) & !disabled': '#purple-03',\n      },\n      border: 0,\n      transition: 'theme',\n      outline: {\n        '': '1bw #primary-text.0',\n        'drag | focused': '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      border: 0,\n      flow: {\n        '': 'row',\n        horizontal: 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        horizontal: 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        horizontal: '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '1px',\n      },\n      height: {\n        '': '1px',\n        horizontal: 'auto',\n      },\n      inset: {\n        '': '4px 50% auto auto',\n        horizontal: '50% 4px auto auto',\n      },\n      transform: {\n        '': 'translate(-50%, 0)',\n        horizontal: 'translate(0, -50%)',\n      },\n      position: 'absolute',\n      transition: 'theme',\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'hovered | drag | focused': '#primary-text',\n        disabled: '#dark-04',\n      },\n    },\n  },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n  qa: 'PanelOverlay',\n  styles: {\n    position: 'absolute',\n    inset: 0,\n    // fill: '#white.2',\n    backdropFilter: 'invert(.15)',\n    cursor: 'pointer',\n    opacity: {\n      '': 0,\n      visible: 1,\n    },\n    pointerEvents: {\n      '': 'none',\n      visible: 'auto',\n    },\n    transition: 'opacity .15s ease-out',\n  },\n});\n\ninterface ResizeHandlerProps {\n  side: Side;\n  isDisabled?: boolean;\n  mods?: Record<string, boolean>;\n  moveProps: ReturnType<typeof useMove>['moveProps'];\n  style?: Record<string, string | number | null | undefined>;\n  onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n  const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const isHorizontal = side === 'left' || side === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <ResizeHandlerElement\n      {...mergeProps(hoverProps, focusProps, moveProps, {\n        mods: {\n          hovered: localIsHovered,\n          horizontal: isHorizontal,\n          disabled: isDisabled,\n          focused: isFocusVisible,\n          side,\n          ...mods,\n        },\n        style,\n        tabIndex: isDisabled ? undefined : 0,\n        role: 'separator',\n        'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n        'aria-label': `Resize ${side} panel`,\n        onDoubleClick: isDisabled ? undefined : onDoubleClick,\n      })}\n    >\n      <div data-element=\"Track\" />\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    </ResizeHandlerElement>\n  );\n}\n\n/** Panel rendering mode */\nexport type LayoutPanelMode = 'default' | 'sticky' | 'overlay' | 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n  /** Side of the layout where panel is positioned */\n  side: Side;\n  /**\n   * Panel rendering mode:\n   * - `default`: Standard panel that pushes content aside\n   * - `sticky`: Panel floats over content without pushing it\n   * - `overlay`: Panel with dismissable backdrop overlay\n   * - `dialog`: Panel renders as a modal dialog\n   */\n  mode?: LayoutPanelMode;\n  /** Panel size (width for left/right, height for top/bottom) - controlled */\n  size?: number | string;\n  /** Default panel size for uncontrolled state */\n  defaultSize?: number | string;\n  /** Minimum panel size */\n  minSize?: number | string;\n  /** Maximum panel size */\n  maxSize?: number | string;\n  /** Enable resize functionality */\n  isResizable?: boolean;\n  /** Size change callback */\n  onSizeChange?: (size: number) => void;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Default open state */\n  defaultIsOpen?: boolean;\n  /** Open state change callback */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Enable slide transition on open/close */\n  hasTransition?: boolean;\n  /**\n   * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.\n   * Only applies to `overlay` and `dialog` modes. Default: true\n   */\n  isDismissable?: boolean;\n  /** Styles for the overlay backdrop in overlay mode */\n  overlayStyles?: Styles;\n  /**\n   * @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n   */\n  isDialog?: boolean;\n  /** Controlled dialog open state (used with mode=\"dialog\") */\n  isDialogOpen?: boolean;\n  /** Default dialog open state */\n  defaultIsDialogOpen?: boolean;\n  /** Dialog open state change callback */\n  onDialogOpenChange?: (isOpen: boolean) => void;\n  /** Props passed to Dialog component when in dialog mode */\n  dialogProps?: Omit<\n    CubeDialogContainerProps,\n    'isDismissable' | 'onDismiss' | 'isOpen'\n  >;\n  /** Padding for content areas inside the panel. Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */\n  sizeStorageKey?: string;\n  /** Styles for the panel */\n  styles?: Styles;\n  children?: ReactNode;\n}\n\nfunction LayoutPanel(\n  props: CubeLayoutPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n\n  if (!layoutActions || !layoutState || !layoutRefs) {\n    throw new Error(\n      'Layout.Panel must be used within a Layout component. ' +\n        'Ensure your panel is rendered inside a <Layout> parent.',\n    );\n  }\n\n  const {\n    side = 'left',\n    mode: modeProp,\n    size: providedSize,\n    defaultSize = 280,\n    minSize = 200,\n    maxSize,\n    isResizable = false,\n    onSizeChange,\n    isOpen: providedIsOpen,\n    defaultIsOpen = true,\n    onOpenChange,\n    hasTransition: hasTransitionProp,\n    isDismissable = true,\n    overlayStyles,\n    // Deprecated prop - use mode=\"dialog\" instead\n    isDialog = false,\n    isDialogOpen: providedIsDialogOpen,\n    defaultIsDialogOpen = false,\n    onDialogOpenChange,\n    dialogProps,\n    contentPadding,\n    sizeStorageKey,\n    children,\n    styles,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Resolve mode from prop or deprecated isDialog\n  const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n  const isDialogMode = mode === 'dialog';\n  const isOverlayMode = mode === 'overlay';\n  const isStickyMode = mode === 'sticky';\n\n  // Use prop value if provided, otherwise fall back to context value\n  const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n  const combinedRef = useCombinedRefs(ref);\n  const prevProvidedSizeRef = useRef(providedSize);\n  const isHorizontal = side === 'left' || side === 'right';\n\n  // Panel open state\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n  const isOpen = providedIsOpen ?? internalIsOpen;\n\n  // Dialog open state\n  const [internalIsDialogOpen, setInternalIsDialogOpen] =\n    useState(defaultIsDialogOpen);\n  const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;\n\n  // Persistent size storage\n  const [storedSize, setStoredSize] = useLocalStorage<number | null>(\n    sizeStorageKey ?? null,\n    null,\n  );\n\n  // Resize state\n  const [isDragging, setIsDragging] = useState(false);\n  const [size, setSize] = useState<number>(() => {\n    const initialSize =\n      typeof providedSize === 'number'\n        ? providedSize\n        : storedSize != null\n          ? storedSize\n          : typeof defaultSize === 'number'\n            ? defaultSize\n            : 280;\n\n    return clampSize(initialSize, minSize, maxSize);\n  });\n\n  const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Merge styles with contentPadding support\n  const finalStyles = useMemo(\n    () =>\n      mergeStyles(\n        styles,\n        contentPadding != null ? { '$content-padding': contentPadding } : null,\n        extractedStyles,\n      ),\n    [extractedStyles, contentPadding, styles],\n  );\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 setContextDragging = layoutActions.setDragging;\n\n  const { moveProps } = useMove({\n    onMoveStart() {\n      if (!isResizable) return;\n      setIsDragging(true);\n      setContextDragging(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        // For keyboard, deltaX/deltaY are direction indicators (-1, 0, 1)\n        const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n        const direction = side === 'right' || side === 'bottom' ? -1 : 1;\n        delta = rawDelta * step * direction;\n      } else {\n        // Pointer resize: use exact delta values\n        delta = isHorizontal\n          ? e.deltaX * (side === 'right' ? -1 : 1)\n          : e.deltaY * (side === 'bottom' ? -1 : 1);\n      }\n\n      setSize((currentSize) => clampValue(currentSize + delta));\n    },\n    onMoveEnd() {\n      setIsDragging(false);\n      setContextDragging(false);\n      // Round to integer on release and notify parent\n      setSize((currentSize) => {\n        const finalSize = Math.round(clampValue(currentSize));\n        // Call onSizeChange synchronously to ensure parent state is updated\n        onSizeChange?.(finalSize);\n        // Persist to localStorage if key is provided\n        setStoredSize(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  // Register panel with layout context\n  // Include handler outside portion (minus border overlap) for proper content inset\n  // In sticky, overlay, and dialog modes, panel doesn't push content, so size is 0\n  const effectivePanelSize = isOpen && mode === 'default' ? size : 0;\n  const effectiveInsetSize = Math.round(\n    effectivePanelSize +\n      (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0),\n  );\n\n  const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;\n  const { isReady } = layoutState;\n\n  // Track the last reported size to prevent unnecessary updates\n  const lastSizeRef = useRef<number>(effectiveInsetSize);\n\n  // Register on mount, unregister on unmount\n  // Using useLayoutEffect ensures registration happens before browser paint\n  useLayoutEffect(() => {\n    registerPanel(side, lastSizeRef.current);\n\n    return () => {\n      unregisterPanel(side);\n    };\n  }, [side, registerPanel, unregisterPanel]);\n\n  // Update size when it changes (after initial mount)\n  // Using useLayoutEffect ensures size updates happen before browser paint\n  useLayoutEffect(() => {\n    if (lastSizeRef.current !== effectiveInsetSize) {\n      lastSizeRef.current = effectiveInsetSize;\n      updatePanelSize(side, effectiveInsetSize);\n    }\n  }, [side, effectiveInsetSize, updatePanelSize]);\n\n  const handleOpenChange = useCallback(\n    (newIsOpen: boolean) => {\n      setInternalIsOpen(newIsOpen);\n      onOpenChange?.(newIsOpen);\n    },\n    [onOpenChange],\n  );\n\n  // Dismiss handler for overlay mode (click on overlay)\n  const handleDismiss = useCallback(() => {\n    if (isDismissable) {\n      handleOpenChange(false);\n    }\n  }, [isDismissable, handleOpenChange]);\n\n  // Register overlay panel with Layout context for coordinated dismissal\n  const { registerOverlayPanel } = layoutActions;\n\n  useEffect(() => {\n    // Only register if in overlay mode, open, and dismissable\n    if (isOverlayMode && isOpen && isDismissable) {\n      const unregister = registerOverlayPanel(() => handleOpenChange(false));\n      return unregister;\n    }\n  }, [\n    isOverlayMode,\n    isOpen,\n    isDismissable,\n    registerOverlayPanel,\n    handleOpenChange,\n  ]);\n\n  const handleDialogOpenChange = useCallback(\n    (newIsOpen: boolean) => {\n      setInternalIsDialogOpen(newIsOpen);\n      onDialogOpenChange?.(newIsOpen);\n    },\n    [onDialogOpenChange],\n  );\n\n  // Panel context value for child components (like LayoutPanelHeader)\n  const panelContextValue = useMemo(\n    () => ({\n      onOpenChange: handleOpenChange,\n      isOpen,\n    }),\n    [handleOpenChange, isOpen],\n  );\n\n  // Dialog mode context value - uses dialog state instead of panel state\n  const dialogPanelContextValue = useMemo(\n    () => ({\n      onOpenChange: handleDialogOpenChange,\n      isOpen: dialogOpen,\n    }),\n    [handleDialogOpenChange, dialogOpen],\n  );\n\n  const panelMods = useMemo(\n    () => ({\n      side,\n      drag: isDragging,\n      horizontal: isHorizontal,\n      // Only enable transition after layout is ready to prevent initial animation\n      'has-transition': hasTransition && isReady,\n      ...mods,\n    }),\n    [side, isDragging, isHorizontal, hasTransition, isReady, mods],\n  );\n\n  const panelStyle = useMemo(\n    () => ({\n      '--panel-size': `${size}px`,\n      '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n      '--max-size':\n        maxSize != null\n          ? typeof maxSize === 'number'\n            ? `${maxSize}px`\n            : maxSize\n          : undefined,\n    }),\n    [size, minSize, maxSize],\n  );\n\n  // Combine refs for panel element\n  const panelRefCallback = useCallback(\n    (node: HTMLDivElement | null, transitionRef?: RefCallback<HTMLElement>) => {\n      // Update the combined ref\n      (combinedRef as { current: HTMLDivElement | null }).current = node;\n      // Call transition ref if provided\n      transitionRef?.(node);\n    },\n    [combinedRef],\n  );\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 || 280);\n    setSize(clampedSize);\n    onSizeChange?.(clampedSize);\n    setStoredSize(clampedSize);\n  }, [defaultSize, clampValue, onSizeChange, setStoredSize]);\n\n  const renderPanelContent = (\n    offscreen = false,\n    transitionRef?: RefCallback<HTMLElement>,\n  ) => {\n    const showOverlay = isOverlayMode && !offscreen;\n\n    return (\n      <>\n        {/* Overlay backdrop for overlay mode */}\n        {isOverlayMode && (\n          <OverlayBackdrop\n            mods={{ visible: showOverlay }}\n            styles={overlayStyles}\n            aria-hidden=\"true\"\n            onClick={handleDismiss}\n          />\n        )}\n        <PanelElement\n          ref={(node: HTMLDivElement | null) =>\n            panelRefCallback(node, transitionRef)\n          }\n          {...filterBaseProps(otherProps, { eventProps: true })}\n          mods={{ ...panelMods, offscreen }}\n          styles={finalStyles}\n          style={panelStyle}\n          data-side={side}\n        >\n          <LayoutPanelContext.Provider value={panelContextValue}>\n            <LayoutContextReset>{children}</LayoutContextReset>\n          </LayoutPanelContext.Provider>\n        </PanelElement>\n        {isResizable && (\n          <ResizeHandler\n            side={side}\n            isDisabled={!isResizable}\n            mods={{\n              drag: isDragging,\n              offscreen,\n              'has-transition': hasTransition && isReady,\n            }}\n            moveProps={moveProps}\n            style={panelStyle}\n            onDoubleClick={handleResetSize}\n          />\n        )}\n      </>\n    );\n  };\n\n  // Dialog mode - uses its own portal via DialogContainer\n  if (isDialogMode) {\n    return (\n      <DialogContainer\n        isOpen={dialogOpen}\n        isDismissable={isDismissable}\n        onDismiss={() => handleDialogOpenChange(false)}\n        {...dialogProps}\n      >\n        <Dialog isDismissable={false}>\n          <LayoutPanelContext.Provider value={dialogPanelContextValue}>\n            <LayoutContextReset>{children}</LayoutContextReset>\n          </LayoutPanelContext.Provider>\n        </Dialog>\n      </DialogContainer>\n    );\n  }\n\n  // Wait for portal container to be ready before rendering\n  if (!layoutRefs.isPanelContainerReady) {\n    return null;\n  }\n\n  const portalContainer = layoutRefs.panelContainerRef.current!;\n\n  // Panel with transition - portal to panel container\n  if (hasTransition) {\n    return createPortal(\n      <DisplayTransition isShown={isOpen} animateOnMount={false}>\n        {({ isShown, ref: transitionRef }) =>\n          renderPanelContent(!isShown, transitionRef)\n        }\n      </DisplayTransition>,\n      portalContainer,\n    );\n  }\n\n  // Simple panel (no transition) - portal to panel container\n  if (!isOpen) return null;\n\n  return createPortal(renderPanelContent(false), portalContainer);\n}\n\nconst _LayoutPanel = forwardRef(LayoutPanel);\n\n_LayoutPanel.displayName = 'Layout.Panel';\n\nexport { _LayoutPanel as LayoutPanel };\n"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { CubeItemProps } from "../Item/Item.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/content/Layout/LayoutPanelHeader.d.ts
+interface CubeLayoutPanelHeaderProps extends Omit<BaseProps, 'theme'>, ContainerStyleProps, CubeItemProps {
+  /** Panel title */
+  title?: ReactNode;
+  /** Title heading level (affects semantics, not visual) */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Show close button */
+  isClosable?: boolean;
+  /** Close button click handler */
+  onClose?: () => void;
+}
+declare const _LayoutPanelHeader: react.ForwardRefExoticComponent<CubeLayoutPanelHeaderProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutPanelHeaderProps, _LayoutPanelHeader };
+//# sourceMappingURL=LayoutPanelHeader.d.ts.map

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

@@ -0,0 +1,57 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
+import { _Item } from "../Item/Item.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { useDialogContext } from "../../overlays/Dialog/context.js";
+import { useLayoutPanelContext } from "./LayoutContext.js";
+import { forwardRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutPanelHeader.tsx
+const PanelHeaderElement = tasty(_Item, {
+	qa: "PanelHeader",
+	shape: "sharp",
+	type: "header",
+	styles: {
+		border: "bottom",
+		boxSizing: "content-box",
+		"$inline-padding": "($content-padding, 1x)"
+	}
+});
+function LayoutPanelHeader(props, ref) {
+	const { title, level = 3, isClosable, onClose, actions, children, ...otherProps } = props;
+	const styles = extractStyles(otherProps, CONTAINER_STYLES);
+	const dialogContext = useDialogContext();
+	const panelContext = useLayoutPanelContext();
+	const handleClose = useCallback(() => {
+		onClose?.();
+		panelContext?.onOpenChange(false);
+		dialogContext?.onClose?.();
+	}, [
+		onClose,
+		panelContext,
+		dialogContext
+	]);
+	return /* @__PURE__ */ jsx(PanelHeaderElement, {
+		ref,
+		level,
+		size: "large",
+		actions: actions ?? (isClosable ? /* @__PURE__ */ jsx(ItemAction, {
+			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+			"aria-label": "Close panel",
+			onPress: handleClose
+		}) : null),
+		styles,
+		...otherProps,
+		children: title ?? children
+	});
+}
+const _LayoutPanelHeader = forwardRef(LayoutPanelHeader);
+_LayoutPanelHeader.displayName = "Layout.PanelHeader";
+
+//#endregion
+export { _LayoutPanelHeader };
+//# sourceMappingURL=LayoutPanelHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPanelHeader.js","names":["Item"],"sources":["../../../../src/components/content/Layout/LayoutPanelHeader.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react';\n\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  tasty,\n} from '../../../tasty';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { useDialogContext } from '../../overlays/Dialog/context';\nimport { CubeItemProps, Item } from '../Item/Item';\n\nimport { useLayoutPanelContext } from './LayoutContext';\n\nconst PanelHeaderElement = tasty(Item, {\n  qa: 'PanelHeader',\n  shape: 'sharp',\n  type: 'header',\n  styles: {\n    border: 'bottom',\n    boxSizing: 'content-box',\n\n    '$inline-padding': '($content-padding, 1x)',\n  },\n});\n\nexport interface CubeLayoutPanelHeaderProps\n  extends Omit<BaseProps, 'theme'>,\n    ContainerStyleProps,\n    CubeItemProps {\n  /** Panel title */\n  title?: ReactNode;\n  /** Title heading level (affects semantics, not visual) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Show close button */\n  isClosable?: boolean;\n  /** Close button click handler */\n  onClose?: () => void;\n}\n\nfunction LayoutPanelHeader(\n  props: CubeLayoutPanelHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    title,\n    level = 3,\n    isClosable,\n    onClose,\n    actions,\n    children,\n    ...otherProps\n  } = props;\n\n  // Extract container styles\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Access dialog context if in dialog mode\n  const dialogContext = useDialogContext();\n  // Access panel context to update panel open state\n  const panelContext = useLayoutPanelContext();\n\n  // Close handler that works for both panel and dialog modes\n  const handleClose = useCallback(() => {\n    // Call user-provided onClose callback\n    onClose?.();\n    // Update panel's internal open state\n    panelContext?.onOpenChange(false);\n    // If in dialog mode, also close the dialog\n    dialogContext?.onClose?.();\n  }, [onClose, panelContext, dialogContext]);\n\n  const closeAction = isClosable ? (\n    <ItemAction\n      icon={<CloseIcon />}\n      aria-label=\"Close panel\"\n      onPress={handleClose}\n    />\n  ) : null;\n\n  const finalActions = actions ?? closeAction;\n\n  return (\n    <PanelHeaderElement\n      ref={ref}\n      level={level}\n      size=\"large\"\n      actions={finalActions}\n      styles={styles}\n      {...otherProps}\n    >\n      {title ?? children}\n    </PanelHeaderElement>\n  );\n}\n\nconst _LayoutPanelHeader = forwardRef(LayoutPanelHeader);\n\n_LayoutPanelHeader.displayName = 'Layout.PanelHeader';\n\nexport { _LayoutPanelHeader as LayoutPanelHeader };\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,qBAAqB,MAAMA,OAAM;CACrC,IAAI;CACJ,OAAO;CACP,MAAM;CACN,QAAQ;EACN,QAAQ;EACR,WAAW;EAEX,mBAAmB;EACpB;CACF,CAAC;AAgBF,SAAS,kBACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,YACA,SACA,SACA,UACA,GAAG,eACD;CAGJ,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAG1D,MAAM,gBAAgB,kBAAkB;CAExC,MAAM,eAAe,uBAAuB;CAG5C,MAAM,cAAc,kBAAkB;AAEpC,aAAW;AAEX,gBAAc,aAAa,MAAM;AAEjC,iBAAe,WAAW;IACzB;EAAC;EAAS;EAAc;EAAc,CAAC;AAY1C,QACE,oBAAC;EACM;EACE;EACP,MAAK;EACL,SAPiB,YARD,aAClB,oBAAC;GACC,MAAM,oBAAC,cAAY;GACnB,cAAW;GACX,SAAS;IACT,GACA;EAUQ;EACR,GAAI;YAEH,SAAS;GACS;;AAIzB,MAAM,qBAAqB,WAAW,kBAAkB;AAExD,mBAAmB,cAAc"}

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

@@ -0,0 +1,10 @@
+
+import { CubeLayoutContentProps } from "./LayoutContent.js";
+import * as react from "react";
+
+//#region src/components/content/Layout/LayoutToolbar.d.ts
+interface CubeLayoutToolbarProps extends CubeLayoutContentProps {}
+declare const _LayoutToolbar: react.ForwardRefExoticComponent<CubeLayoutToolbarProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutToolbarProps, _LayoutToolbar };
+//# sourceMappingURL=LayoutToolbar.d.ts.map