@cube-dev/ui-kit 0.114.0 → 0.115.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","names":[],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  extractStyles,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { isDevEnv } from '../../../tasty/utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Alert } from '../Alert';\n\nimport {\n  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n\n  // Extract outer wrapper styles and inner content styles\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n  // Calculate if the layout flow is vertical (for auto-border feature)\n  // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'\n  const isVertical = useMemo(() => {\n    const flowFromProp = innerStyles?.flow;\n    const flowFromStyles = (styles?.Inner as Record<string, unknown>)?.flow;\n    const flowValue = flowFromProp ?? flowFromStyles;\n\n    return typeof flowValue !== 'string' || !flowValue.startsWith('row');\n  }, [innerStyles?.flow, styles?.Inner]);\n\n  // Merge styles using the same pattern as LayoutPane\n  const finalStyles = useMemo(() => {\n    // Handle grid mode and grid properties\n    const gridStyles: Styles = {};\n\n    if (isGrid) {\n      gridStyles.display = 'grid';\n    }\n\n    if (columns) {\n      gridStyles.gridColumns = columns;\n    }\n\n    if (rows) {\n      gridStyles.gridRows = rows;\n    }\n\n    if (template) {\n      gridStyles.gridTemplate = template;\n    }\n\n    return mergeStyles(\n      outerStyles,\n      contentPadding != null ? { '$content-padding': contentPadding } : null,\n      styles,\n      { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner as Styles) },\n    );\n  }, [\n    outerStyles,\n    innerStyles,\n    contentPadding,\n    styles,\n    isGrid,\n    columns,\n    rows,\n    template,\n  ]);\n\n  // Calculate inset values from panel sizes\n  const panelSizes = layoutState?.panelSizes ?? {\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  };\n\n  const isDragging = layoutState?.isDragging ?? false;\n  const isReady = layoutState?.isReady ?? true;\n  const markReady = layoutActions?.markReady;\n  const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;\n  const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;\n\n  // Mark layout as ready after first paint\n  // Using useEffect + requestAnimationFrame ensures:\n  // 1. Panels register in useLayoutEffect → correct insets before first paint\n  // 2. First paint with not-ready=true (transition disabled)\n  // 3. After paint completes → enables transitions for subsequent changes\n  useEffect(() => {\n    const frameId = requestAnimationFrame(() => {\n      markReady?.();\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [markReady]);\n\n  // Auto-height detection: if layout collapses to 0 height after initialization,\n  // automatically set height to 100% to prevent invisible layout\n  useEffect(() => {\n    if (isReady && localRef.current && localRef.current.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (isAutoHeight && localRef.current) {\n      // Use requestAnimationFrame to check after styles have been applied\n      const frameId = requestAnimationFrame(() => {\n        if (localRef.current && localRef.current.offsetHeight === 0) {\n          setIsCollapsed(true);\n        }\n      });\n\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [isAutoHeight]);\n\n  const insetStyle = useMemo(() => {\n    const baseStyle: Record<string, string> = {\n      '--inset-top': `${panelSizes.top}px`,\n      '--inset-right': `${panelSizes.right}px`,\n      '--inset-bottom': `${panelSizes.bottom}px`,\n      '--inset-left': `${panelSizes.left}px`,\n    };\n\n    if (style) {\n      return { ...baseStyle, ...style } as CSSProperties;\n    }\n\n    return baseStyle as CSSProperties;\n  }, [panelSizes, style]);\n\n  const mods = useMemo(\n    () => ({\n      dragging: isDragging,\n      'not-ready': !isReady,\n      'has-transition': hasTransition,\n      'auto-height': isAutoHeight && !isCollapsed,\n      collapsed: isCollapsed,\n      vertical: isVertical,\n      'do-not-overflow': doNotOverflow,\n    }),\n    [\n      isDragging,\n      isReady,\n      hasTransition,\n      isAutoHeight,\n      isCollapsed,\n      isVertical,\n      doNotOverflow,\n    ],\n  );\n\n  // Combine local ref with forwarded ref\n  const setRefs = (element: HTMLDivElement | null) => {\n    localRef.current = element;\n\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(element);\n    } else if (forwardedRef) {\n      forwardedRef.current = element;\n    }\n  };\n\n  // Show dev warning when collapsed and in dev mode (or forced for stories)\n  const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());\n\n  // Handle focus entering the Inner element - dismiss overlay panels\n  const handleInnerFocus = useCallback(\n    (e: FocusEvent<HTMLDivElement>) => {\n      // Only dismiss if there are overlay panels\n      if (!hasOverlayPanels) return;\n\n      // Check if focus is coming from outside the Inner element\n      const inner = e.currentTarget;\n      const relatedTarget = e.relatedTarget as Node | null;\n\n      // If relatedTarget is null or not inside the Inner element,\n      // focus is entering from outside - dismiss overlay panels\n      if (!relatedTarget || !inner.contains(relatedTarget)) {\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  // Handle Escape key anywhere in the Layout - dismiss overlay panels\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (hasOverlayPanels && e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  return (\n    <LayoutElement\n      ref={setRefs}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      mods={mods}\n      styles={finalStyles}\n      style={insetStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {showDevWarning ? (\n        <Alert theme=\"danger\">\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : (\n        <>\n          {/* All children go inside the Inner element - panels will portal themselves out */}\n          <div\n            ref={combinedInnerRef}\n            data-element=\"Inner\"\n            onFocus={handleInnerFocus}\n            {...innerProps}\n          >\n            {children}\n          </div>\n          {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n          <div\n            ref={layoutRefs?.setPanelContainer}\n            data-element=\"PanelContainer\"\n          />\n        </>\n      )}\n    </LayoutElement>\n  );\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition } = props;\n\n  return (\n    <LayoutProvider hasTransition={hasTransition}>\n      <LayoutInner {...props} forwardedRef={ref} />\n    </LayoutProvider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1,31 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _LayoutContent } from "./LayoutContent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutBlock.tsx
+const BlockElement = tasty(_LayoutContent, {
+	qa: "LayoutBlock",
+	styles: {
+		container: "none",
+		flexShrink: 0,
+		flexGrow: 0,
+		Inner: { display: "block" }
+	}
+});
+function LayoutBlock(props, ref) {
+	const { children, scrollbar = "tiny", ...otherProps } = props;
+	return /* @__PURE__ */ jsx(BlockElement, {
+		...otherProps,
+		ref,
+		scrollbar,
+		children
+	});
+}
+const _LayoutBlock = forwardRef(LayoutBlock);
+_LayoutBlock.displayName = "Layout.Block";
+
+//#endregion
+export { _LayoutBlock };
+//# sourceMappingURL=LayoutBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutBlock.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutBlock.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport { tasty } from '../../../tasty';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst BlockElement = tasty(LayoutContent, {\n  qa: 'LayoutBlock',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'block',\n    },\n  },\n});\n\nexport interface CubeLayoutBlockProps extends CubeLayoutContentProps {}\n\nfunction LayoutBlock(\n  props: CubeLayoutBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <BlockElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </BlockElement>\n  );\n}\n\nconst _LayoutBlock = forwardRef(LayoutBlock);\n\n_LayoutBlock.displayName = 'Layout.Block';\n\nexport { _LayoutBlock as LayoutBlock };\n"],"mappings":";;;;;;;AAMA,MAAM,eAAe,MAAMA,gBAAe;CACxC,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO,EACL,SAAS,SACV;EACF;CACF,CAAC;AAIF,SAAS,YACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,YAAY,QAAQ,GAAG,eAAe;AAExD,QACE,oBAAC;EAAa,GAAI;EAAiB;EAAgB;EAChD;GACY;;AAInB,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

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

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

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

@@ -0,0 +1,33 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _LayoutContainer } from "./LayoutContainer.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutCenter.tsx
+const CenterElement = tasty(_LayoutContainer, {
+	qa: "LayoutCenter",
+	styles: {
+		placeItems: "stretch",
+		placeContent: "stretch",
+		Inner: {
+			textAlign: "center",
+			placeItems: "center",
+			placeContent: "center"
+		}
+	}
+});
+function LayoutCenter(props, ref) {
+	const { children, ...otherProps } = props;
+	return /* @__PURE__ */ jsx(CenterElement, {
+		...otherProps,
+		ref,
+		children
+	});
+}
+const _LayoutCenter = forwardRef(LayoutCenter);
+_LayoutCenter.displayName = "Layout.Center";
+
+//#endregion
+export { _LayoutCenter };
+//# sourceMappingURL=LayoutCenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCenter.js","names":["LayoutContainer"],"sources":["../../../../src/components/content/Layout/LayoutCenter.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport { tasty } from '../../../tasty';\n\nimport { CubeLayoutContainerProps, LayoutContainer } from './LayoutContainer';\n\nconst CenterElement = tasty(LayoutContainer, {\n  qa: 'LayoutCenter',\n  styles: {\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n\n    Inner: {\n      textAlign: 'center',\n      placeItems: 'center',\n      placeContent: 'center',\n    },\n  },\n});\n\nexport interface CubeLayoutCenterProps extends CubeLayoutContainerProps {}\n\nfunction LayoutCenter(\n  props: CubeLayoutCenterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, ...otherProps } = props;\n\n  return (\n    <CenterElement {...otherProps} ref={ref}>\n      {children}\n    </CenterElement>\n  );\n}\n\nconst _LayoutCenter = forwardRef(LayoutCenter);\n\n_LayoutCenter.displayName = 'Layout.Center';\n\nexport { _LayoutCenter as LayoutCenter };\n"],"mappings":";;;;;;;AAMA,MAAM,gBAAgB,MAAMA,kBAAiB;CAC3C,IAAI;CACJ,QAAQ;EACN,YAAY;EACZ,cAAc;EAEd,OAAO;GACL,WAAW;GACX,YAAY;GACZ,cAAc;GACf;EACF;CACF,CAAC;AAIF,SAAS,aACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,GAAG,eAAe;AAEpC,QACE,oBAAC;EAAc,GAAI;EAAiB;EACjC;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

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

@@ -0,0 +1,23 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import * as react from "react";
+import { ForwardedRef, HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/content/Layout/LayoutContainer.d.ts
+interface CubeLayoutContainerProps extends BaseProps, ContainerStyleProps {
+  children?: ReactNode;
+  /** Custom styles for container and inner elements */
+  styles?: Styles;
+  /** Custom styles for the inner element */
+  innerStyles?: Styles;
+  /** Ref for the inner content element */
+  innerRef?: ForwardedRef<HTMLDivElement>;
+  /** Props to spread on the Inner sub-element */
+  innerProps?: HTMLAttributes<HTMLDivElement>;
+}
+declare const _LayoutContainer: react.ForwardRefExoticComponent<CubeLayoutContainerProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutContainerProps, _LayoutContainer };
+//# sourceMappingURL=LayoutContainer.d.ts.map

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

@@ -0,0 +1,72 @@
+/** @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 { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { LayoutContextReset } from "./LayoutContext.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutContainer.tsx
+const ContainerElement = tasty({
+	as: "div",
+	qa: "LayoutContainer",
+	styles: {
+		display: "flex",
+		flow: "column",
+		flexGrow: 1,
+		flexShrink: 1,
+		placeItems: "center start",
+		placeContent: "stretch",
+		overflow: "auto",
+		scrollbar: "thin",
+		padding: "$content-padding",
+		placeSelf: "stretch",
+		border: {
+			"": 0,
+			"!:last-child": "($layout-border-size, 1bw) solid #border bottom"
+		},
+		Inner: {
+			$: ">",
+			placeSelf: "center",
+			display: "flex",
+			flow: "column",
+			boxSizing: "border-box",
+			width: "40x 100% 120x",
+			flexGrow: 1,
+			"$layout-border-size": "0"
+		}
+	}
+});
+function LayoutContainer(props, ref) {
+	const { children, styles, innerStyles: innerStylesProp, innerRef: innerRefProp, innerProps, ...otherProps } = props;
+	const innerStyles = extractStyles(otherProps, CONTAINER_STYLES, innerStylesProp);
+	const hasInnerStyles = Object.keys(innerStyles).length > 0;
+	const finalStyles = useMemo(() => {
+		return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);
+	}, [
+		styles,
+		hasInnerStyles,
+		innerStyles
+	]);
+	const combinedInnerRef = useCombinedRefs(innerRefProp);
+	return /* @__PURE__ */ jsx(ContainerElement, {
+		ref,
+		...filterBaseProps(otherProps, { eventProps: true }),
+		styles: finalStyles,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: combinedInnerRef,
+			"data-element": "Inner",
+			...innerProps,
+			children: /* @__PURE__ */ jsx(LayoutContextReset, { children })
+		})
+	});
+}
+const _LayoutContainer = forwardRef(LayoutContainer);
+_LayoutContainer.displayName = "Layout.Container";
+
+//#endregion
+export { _LayoutContainer };
+//# sourceMappingURL=LayoutContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutContainer.js","names":[],"sources":["../../../../src/components/content/Layout/LayoutContainer.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useMemo,\n} from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { useCombinedRefs } from '../../../utils/react';\n\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContainerElement = tasty({\n  as: 'div',\n  qa: 'LayoutContainer',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    placeItems: 'center start',\n    placeContent: 'stretch',\n    overflow: 'auto',\n    scrollbar: 'thin',\n    padding: '$content-padding',\n    placeSelf: 'stretch',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      placeSelf: 'center',\n      display: 'flex',\n      flow: 'column',\n      boxSizing: 'border-box',\n      width: '40x 100% 120x',\n      flexGrow: 1,\n\n      '$layout-border-size': '0',\n    },\n  },\n});\n\nexport interface CubeLayoutContainerProps\n  extends BaseProps,\n    ContainerStyleProps {\n  children?: ReactNode;\n  /** Custom styles for container and inner elements */\n  styles?: Styles;\n  /** Custom styles for the inner element */\n  innerStyles?: Styles;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction LayoutContainer(\n  props: CubeLayoutContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    styles,\n    innerStyles: innerStylesProp,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const innerStyles = extractStyles(\n    otherProps,\n    CONTAINER_STYLES,\n    innerStylesProp,\n  );\n\n  const hasInnerStyles = Object.keys(innerStyles).length > 0;\n\n  const finalStyles = useMemo(() => {\n    return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);\n  }, [styles, hasInnerStyles, innerStyles]);\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n\n  return (\n    <ContainerElement\n      ref={ref}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      styles={finalStyles}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n    </ContainerElement>\n  );\n}\n\nconst _LayoutContainer = forwardRef(LayoutContainer);\n\n_LayoutContainer.displayName = 'Layout.Container';\n\nexport { _LayoutContainer as LayoutContainer };\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,mBAAmB,MAAM;CAC7B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,cAAc;EACd,UAAU;EACV,WAAW;EACX,SAAS;EACT,WAAW;EACX,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAED,OAAO;GACL,GAAG;GACH,WAAW;GACX,SAAS;GACT,MAAM;GACN,WAAW;GACX,OAAO;GACP,UAAU;GAEV,uBAAuB;GACxB;EACF;CACF,CAAC;AAgBF,SAAS,gBACP,OACA,KACA;CACA,MAAM,EACJ,UACA,QACA,aAAa,iBACb,UAAU,cACV,YACA,GAAG,eACD;CACJ,MAAM,cAAc,cAClB,YACA,kBACA,gBACD;CAED,MAAM,iBAAiB,OAAO,KAAK,YAAY,CAAC,SAAS;CAEzD,MAAM,cAAc,cAAc;AAChC,SAAO,YAAY,QAAQ,iBAAiB,EAAE,OAAO,aAAa,GAAG,KAAK;IACzE;EAAC;EAAQ;EAAgB;EAAY,CAAC;CAEzC,MAAM,mBAAmB,gBAAgB,aAAa;AAEtD,QACE,oBAAC;EACM;EACL,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EACrD,QAAQ;YAER,oBAAC;GAAI,KAAK;GAAkB,gBAAa;GAAQ,GAAI;aACnD,oBAAC,sBAAoB,WAA8B;IAC/C;GACW;;AAIvB,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,iBAAiB,cAAc"}

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

@@ -0,0 +1,23 @@
+
+import { BaseProps, ContainerStyleProps, Mods } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import * as react from "react";
+import { ForwardedRef, HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/content/Layout/LayoutContent.d.ts
+type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';
+interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {
+  /** Scrollbar style: 'default' | 'thin' | 'tiny' | 'none' */
+  scrollbar?: ScrollbarType;
+  children?: ReactNode;
+  /** Additional modifiers to apply */
+  mods?: Mods;
+  /** Ref for the inner content element */
+  innerRef?: ForwardedRef<HTMLDivElement>;
+  /** Props to spread on the Inner sub-element */
+  innerProps?: HTMLAttributes<HTMLDivElement>;
+}
+declare const _LayoutContent: react.ForwardRefExoticComponent<CubeLayoutContentProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutContentProps, ScrollbarType, _LayoutContent };
+//# sourceMappingURL=LayoutContent.d.ts.map

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

@@ -0,0 +1,149 @@
+/** @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 { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { LayoutContextReset } from "./LayoutContext.js";
+import { useTinyScrollbar } from "./hooks/useTinyScrollbar.js";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useHover } from "react-aria";
+
+//#region src/components/content/Layout/LayoutContent.tsx
+const ContentElement = tasty({
+	as: "div",
+	qa: "LayoutContent",
+	styles: {
+		container: "content / inline-size",
+		position: "relative",
+		display: "grid",
+		gridColumns: "1sf",
+		gridRows: "1sf",
+		placeContent: "stretch",
+		placeItems: "stretch",
+		placeSelf: "stretch",
+		flexGrow: 1,
+		flexShrink: 1,
+		height: "min 0",
+		overflow: "hidden",
+		boxSizing: "content-box",
+		border: {
+			"": 0,
+			"!:last-child": "($layout-border-size, 1bw) solid #border bottom"
+		},
+		Inner: {
+			$: ">",
+			display: "flex",
+			flow: "column",
+			padding: "($content-padding, 1x)",
+			overflow: {
+				"": "auto",
+				"scrollbar=none": "clip"
+			},
+			placeSelf: "stretch",
+			scrollbar: {
+				"": "thin",
+				"scrollbar=tiny | scrollbar=none": "none"
+			},
+			"$layout-border-size": "0"
+		},
+		ScrollbarV: {
+			$: ">",
+			position: "absolute",
+			right: "1px",
+			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",
+			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"
+		}
+	}
+});
+function LayoutContent(props, ref) {
+	const { children, scrollbar = "thin", styles, mods: externalMods, innerRef: innerRefProp, innerProps, ...otherProps } = props;
+	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
+	const innerStyles = extractStyles(otherProps, INNER_STYLES);
+	const internalInnerRef = useRef(null);
+	const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);
+	const combinedRef = useCombinedRefs(ref);
+	const isTinyScrollbar = scrollbar === "tiny";
+	const { hoverProps, isHovered } = useHover({});
+	const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
+	const scrollbarStyle = useMemo(() => {
+		if (!isTinyScrollbar) return {};
+		return {
+			...handleVStyle,
+			...handleHStyle
+		};
+	}, [
+		isTinyScrollbar,
+		handleVStyle,
+		handleHStyle
+	]);
+	const mods = useMemo(() => ({
+		...externalMods,
+		scrollbar,
+		hovered: isHovered,
+		scrolling: isScrolling
+	}), [
+		externalMods,
+		scrollbar,
+		isHovered,
+		isScrolling
+	]);
+	const finalStyles = useMemo(() => {
+		return mergeStyles(styles, outerStyles, innerStyles ? { Inner: innerStyles } : null);
+	}, [
+		styles,
+		outerStyles,
+		innerStyles
+	]);
+	return /* @__PURE__ */ jsxs(ContentElement, {
+		ref: combinedRef,
+		...filterBaseProps(otherProps, { eventProps: true }),
+		...hoverProps,
+		mods,
+		styles: finalStyles,
+		style: scrollbarStyle,
+		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" })
+		]
+	});
+}
+const _LayoutContent = forwardRef(LayoutContent);
+_LayoutContent.displayName = "Layout.Content";
+
+//#endregion
+export { _LayoutContent };
+//# sourceMappingURL=LayoutContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutContent.js","names":[],"sources":["../../../../src/components/content/Layout/LayoutContent.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useHover } from 'react-aria';\n\nimport {\n  BaseProps,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  INNER_STYLES,\n  mergeStyles,\n  Mods,\n  OUTER_STYLES,\n  tasty,\n} from '../../../tasty';\nimport { useCombinedRefs } from '../../../utils/react';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContentElement = tasty({\n  as: 'div',\n  qa: 'LayoutContent',\n  styles: {\n    container: 'content / inline-size',\n    position: 'relative',\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n    placeSelf: 'stretch',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'min 0',\n    overflow: 'hidden',\n    boxSizing: 'content-box',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      display: 'flex',\n      flow: 'column',\n      padding: '($content-padding, 1x)',\n      overflow: {\n        '': 'auto',\n        'scrollbar=none': 'clip',\n      },\n      placeSelf: 'stretch',\n      scrollbar: {\n        '': 'thin',\n        'scrollbar=tiny | scrollbar=none': 'none',\n      },\n\n      '$layout-border-size': '0',\n    },\n\n    // Custom scrollbar handles (when scrollbar=\"tiny\")\n    ScrollbarV: {\n      $: '>',\n      position: 'absolute',\n      right: '1px',\n      top: '$scrollbar-v-top',\n      width: '1ow',\n      height: '$scrollbar-v-height',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n\n    ScrollbarH: {\n      $: '>',\n      position: 'absolute',\n      bottom: '1px',\n      left: '$scrollbar-h-left',\n      height: '1ow',\n      width: '$scrollbar-h-width',\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        '(focused | scrolling) & scrollbar=tiny': 1,\n      },\n      transition: 'opacity 0.15s',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';\n\nexport interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {\n  /** Scrollbar style: 'default' | 'thin' | 'tiny' | 'none' */\n  scrollbar?: ScrollbarType;\n  children?: ReactNode;\n  /** Additional modifiers to apply */\n  mods?: Mods;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction LayoutContent(\n  props: CubeLayoutContentProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    scrollbar = 'thin',\n    styles,\n    mods: externalMods,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n  const internalInnerRef = useRef<HTMLDivElement>(null);\n  const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n  const combinedRef = useCombinedRefs(ref);\n  const isTinyScrollbar = scrollbar === 'tiny';\n  const { hoverProps, isHovered } = useHover({});\n\n  const {\n    handleVStyle,\n    handleHStyle,\n    hasOverflowY,\n    hasOverflowX,\n    isScrolling,\n  } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);\n\n  const scrollbarStyle = useMemo(() => {\n    if (!isTinyScrollbar) return {};\n\n    return {\n      ...handleVStyle,\n      ...handleHStyle,\n    };\n  }, [isTinyScrollbar, handleVStyle, handleHStyle]);\n\n  const mods = useMemo(\n    () => ({\n      ...externalMods,\n      scrollbar,\n      hovered: isHovered,\n      scrolling: isScrolling,\n    }),\n    [externalMods, scrollbar, isHovered, isScrolling],\n  );\n\n  // Merge styles: outer styles to root, inner styles to Inner element\n  const finalStyles = useMemo(() => {\n    return mergeStyles(\n      styles,\n      outerStyles,\n      innerStyles ? { Inner: innerStyles } : null,\n    );\n  }, [styles, outerStyles, innerStyles]);\n\n  return (\n    <ContentElement\n      ref={combinedRef}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      {...hoverProps}\n      mods={mods}\n      styles={finalStyles}\n      style={scrollbarStyle}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n      {isTinyScrollbar && hasOverflowY && <div data-element=\"ScrollbarV\" />}\n      {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n    </ContentElement>\n  );\n}\n\nconst _LayoutContent = forwardRef(LayoutContent);\n\n_LayoutContent.displayName = 'Layout.Content';\n\nexport { _LayoutContent as LayoutContent };\n"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,UAAU;EACV,SAAS;EACT,aAAa;EACb,UAAU;EACV,cAAc;EACd,YAAY;EACZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,WAAW;EACX,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAED,OAAO;GACL,GAAG;GACH,SAAS;GACT,MAAM;GACN,SAAS;GACT,UAAU;IACR,IAAI;IACJ,kBAAkB;IACnB;GACD,WAAW;GACX,WAAW;IACT,IAAI;IACJ,mCAAmC;IACpC;GAED,uBAAuB;GACxB;EAGD,YAAY;GACV,GAAG;GACH,UAAU;GACV,OAAO;GACP,KAAK;GACL,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,SAAS;IACP,IAAI;IACJ,0CAA0C;IAC3C;GACD,YAAY;GACZ,eAAe;GAChB;EAED,YAAY;GACV,GAAG;GACH,UAAU;GACV,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;IACP,IAAI;IACJ,0CAA0C;IAC3C;GACD,YAAY;GACZ,eAAe;GAChB;EACF;CACF,CAAC;AAgBF,SAAS,cACP,OACA,KACA;CACA,MAAM,EACJ,UACA,YAAY,QACZ,QACA,MAAM,cACN,UAAU,cACV,YACA,GAAG,eACD;CACJ,MAAM,cAAc,cAAc,YAAY,aAAa;CAC3D,MAAM,cAAc,cAAc,YAAY,aAAa;CAC3D,MAAM,mBAAmB,OAAuB,KAAK;CACrD,MAAM,mBAAmB,gBAAgB,cAAc,iBAAiB;CACxE,MAAM,cAAc,gBAAgB,IAAI;CACxC,MAAM,kBAAkB,cAAc;CACtC,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAE9C,MAAM,EACJ,cACA,cACA,cACA,cACA,gBACE,iBAAiB,kBAAkB,gBAAgB;CAEvD,MAAM,iBAAiB,cAAc;AACnC,MAAI,CAAC,gBAAiB,QAAO,EAAE;AAE/B,SAAO;GACL,GAAG;GACH,GAAG;GACJ;IACA;EAAC;EAAiB;EAAc;EAAa,CAAC;CAEjD,MAAM,OAAO,eACJ;EACL,GAAG;EACH;EACA,SAAS;EACT,WAAW;EACZ,GACD;EAAC;EAAc;EAAW;EAAW;EAAY,CAClD;CAGD,MAAM,cAAc,cAAc;AAChC,SAAO,YACL,QACA,aACA,cAAc,EAAE,OAAO,aAAa,GAAG,KACxC;IACA;EAAC;EAAQ;EAAa;EAAY,CAAC;AAEtC,QACE,qBAAC;EACC,KAAK;EACL,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EACrD,GAAI;EACE;EACN,QAAQ;EACR,OAAO;;GAEP,oBAAC;IAAI,KAAK;IAAkB,gBAAa;IAAQ,GAAI;cACnD,oBAAC,sBAAoB,WAA8B;KAC/C;GACL,mBAAmB,gBAAgB,oBAAC,SAAI,gBAAa,eAAe;GACpE,mBAAmB,gBAAgB,oBAAC,SAAI,gBAAa,eAAe;;GACtD;;AAIrB,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}

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

@@ -0,0 +1,9 @@
+
+import { MutableRefObject, ReactNode } from "react";
+import "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutContext.d.ts
+type Side = 'left' | 'top' | 'right' | 'bottom';
+//#endregion
+export { Side };
+//# sourceMappingURL=LayoutContext.d.ts.map

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

@@ -0,0 +1,134 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutContext.tsx
+const LayoutRefsContext = createContext(null);
+function useLayoutRefsContext() {
+	return useContext(LayoutRefsContext);
+}
+const LayoutActionsContext = createContext(null);
+const LayoutStateContext = createContext(null);
+function useLayoutActionsContext() {
+	return useContext(LayoutActionsContext);
+}
+function useLayoutStateContext() {
+	return useContext(LayoutStateContext);
+}
+function LayoutProvider({ children, hasTransition = false }) {
+	const registeredPanels = useRef(/* @__PURE__ */ new Set());
+	const overlayPanelCallbacks = useRef(/* @__PURE__ */ new Set());
+	const panelContainerRef = useRef(null);
+	const [isPanelContainerReady, setIsPanelContainerReady] = useState(false);
+	const setPanelContainer = useEvent((element) => {
+		panelContainerRef.current = element;
+		setIsPanelContainerReady(element !== null);
+	});
+	const [panelSizes, setPanelSizes] = useState({
+		left: 0,
+		top: 0,
+		right: 0,
+		bottom: 0
+	});
+	const [isDragging, setIsDragging] = useState(false);
+	const [isReady, setIsReady] = useState(false);
+	const [hasOverlayPanels, setHasOverlayPanels] = useState(false);
+	const updatePanelSize = useEvent((side, size) => {
+		setPanelSizes((prev) => {
+			if (prev[side] === size) return prev;
+			return {
+				...prev,
+				[side]: size
+			};
+		});
+	});
+	const registerPanel = useEvent((side, size) => {
+		if (registeredPanels.current.has(side)) throw new Error(`Layout: Only one panel per side is allowed. A panel is already registered on the "${side}" side.`);
+		const conflictingSides = side === "left" || side === "right" ? ["top", "bottom"] : ["left", "right"];
+		for (const conflictSide of conflictingSides) if (registeredPanels.current.has(conflictSide)) throw new Error(`Layout: Panels from different axes cannot be combined. Cannot register "${side}" panel when "${conflictSide}" panel exists. Use either horizontal (left/right) or vertical (top/bottom) panels.`);
+		registeredPanels.current.add(side);
+		updatePanelSize(side, size);
+	});
+	const unregisterPanel = useEvent((side) => {
+		registeredPanels.current.delete(side);
+		updatePanelSize(side, 0);
+	});
+	const setDragging = useEvent((dragging) => {
+		setIsDragging(dragging);
+	});
+	const markReady = useEvent(() => {
+		setIsReady(true);
+	});
+	const registerOverlayPanel = useEvent((dismiss) => {
+		overlayPanelCallbacks.current.add(dismiss);
+		setHasOverlayPanels(true);
+		return () => {
+			overlayPanelCallbacks.current.delete(dismiss);
+			setHasOverlayPanels(overlayPanelCallbacks.current.size > 0);
+		};
+	});
+	const dismissOverlayPanels = useEvent(() => {
+		overlayPanelCallbacks.current.forEach((dismiss) => dismiss());
+	});
+	const actionsValue = useMemo(() => ({
+		registerPanel,
+		unregisterPanel,
+		updatePanelSize,
+		setDragging,
+		markReady,
+		hasTransition,
+		registerOverlayPanel,
+		dismissOverlayPanels
+	}), [hasTransition]);
+	const stateValue = useMemo(() => ({
+		panelSizes,
+		isDragging,
+		isReady,
+		hasOverlayPanels
+	}), [
+		panelSizes,
+		isDragging,
+		isReady,
+		hasOverlayPanels
+	]);
+	const refsValue = useMemo(() => ({
+		panelContainerRef,
+		isPanelContainerReady,
+		setPanelContainer
+	}), [isPanelContainerReady]);
+	return /* @__PURE__ */ jsx(LayoutRefsContext.Provider, {
+		value: refsValue,
+		children: /* @__PURE__ */ jsx(LayoutActionsContext.Provider, {
+			value: actionsValue,
+			children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+				value: stateValue,
+				children
+			})
+		})
+	});
+}
+/**
+* Provider that resets the layout context for sub-components.
+* Used to prevent panels in nested Layouts from affecting parent layouts.
+*/
+function LayoutContextReset({ children }) {
+	return /* @__PURE__ */ jsx(LayoutRefsContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsx(LayoutActionsContext.Provider, {
+			value: null,
+			children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+				value: null,
+				children
+			})
+		})
+	});
+}
+const LayoutPanelContext = createContext(null);
+function useLayoutPanelContext() {
+	return useContext(LayoutPanelContext);
+}
+
+//#endregion
+export { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutProvider, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext };
+//# sourceMappingURL=LayoutContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutContext.js","names":[],"sources":["../../../../src/components/content/Layout/LayoutContext.tsx"],"sourcesContent":["import {\n  createContext,\n  MutableRefObject,\n  ReactNode,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nexport type Side = 'left' | 'top' | 'right' | 'bottom';\n\n/**\n * Refs context - stable refs that don't change and don't trigger re-renders.\n * Provides portal container ref for panels to render into.\n */\nexport interface LayoutRefsContextValue {\n  /** Container element ref for panels to portal into */\n  panelContainerRef: MutableRefObject<HTMLDivElement | null>;\n  /** Whether the panel container is mounted and ready for portals */\n  isPanelContainerReady: boolean;\n  /** Callback ref to set on the panel container element */\n  setPanelContainer: (element: HTMLDivElement | null) => void;\n}\n\nexport const LayoutRefsContext = createContext<LayoutRefsContextValue | null>(\n  null,\n);\n\nexport function useLayoutRefsContext(): LayoutRefsContextValue | null {\n  return useContext(LayoutRefsContext);\n}\n\n/** Callback to dismiss an overlay panel */\nexport type OverlayDismissCallback = () => void;\n\n/**\n * Actions context - stable functions and configuration that don't change.\n * Separating these from state prevents unnecessary re-renders when only state changes.\n */\nexport interface LayoutActionsContextValue {\n  /** Register a panel on a specific side with initial size */\n  registerPanel: (side: Side, size: number) => void;\n  /** Unregister a panel from a specific side */\n  unregisterPanel: (side: Side) => void;\n  /** Update the size of a registered panel */\n  updatePanelSize: (side: Side, size: number) => void;\n  /** Set global dragging state (when any panel is being resized) */\n  setDragging: (isDragging: boolean) => void;\n  /** Mark the layout as ready (after initial mount) */\n  markReady: () => void;\n  /** Register an overlay panel's dismiss callback. Returns unregister function. */\n  registerOverlayPanel: (dismiss: OverlayDismissCallback) => () => void;\n  /** Dismiss all overlay panels */\n  dismissOverlayPanels: () => void;\n  /** Whether transitions are enabled for panels (stable config value) */\n  hasTransition: boolean;\n}\n\n/** State context - reactive state that triggers re-renders */\nexport interface LayoutStateContextValue {\n  panelSizes: Record<Side, number>;\n  isDragging: boolean;\n  isReady: boolean;\n  hasOverlayPanels: boolean;\n}\n\nexport const LayoutActionsContext =\n  createContext<LayoutActionsContextValue | null>(null);\nexport const LayoutStateContext = createContext<LayoutStateContextValue | null>(\n  null,\n);\n\nexport function useLayoutActionsContext(): LayoutActionsContextValue | null {\n  return useContext(LayoutActionsContext);\n}\n\nexport function useLayoutStateContext(): LayoutStateContextValue | null {\n  return useContext(LayoutStateContext);\n}\n\n/** Combined layout context value for convenience */\nexport interface LayoutContextValue\n  extends LayoutActionsContextValue,\n    LayoutStateContextValue,\n    LayoutRefsContextValue {}\n\n/**\n * Combined hook that returns all layout context values.\n * Convenience wrapper around the individual context hooks.\n * Returns null if used outside of a Layout component.\n */\nexport function useLayoutContext(): LayoutContextValue | null {\n  const actions = useLayoutActionsContext();\n  const state = useLayoutStateContext();\n  const refs = useLayoutRefsContext();\n\n  if (!actions || !state || !refs) {\n    return null;\n  }\n\n  return { ...actions, ...state, ...refs };\n}\n\nexport interface LayoutProviderProps {\n  children: ReactNode;\n  /** Whether transitions are enabled for panels */\n  hasTransition?: boolean;\n}\n\nexport function LayoutProvider({\n  children,\n  hasTransition = false,\n}: LayoutProviderProps) {\n  const registeredPanels = useRef<Set<Side>>(new Set());\n  const overlayPanelCallbacks = useRef<Set<OverlayDismissCallback>>(new Set());\n  const panelContainerRef = useRef<HTMLDivElement | null>(null);\n  const [isPanelContainerReady, setIsPanelContainerReady] = useState(false);\n\n  // Callback ref for panel container - triggers re-render when container mounts\n  const setPanelContainer = useEvent((element: HTMLDivElement | null) => {\n    panelContainerRef.current = element;\n    setIsPanelContainerReady(element !== null);\n  });\n\n  const [panelSizes, setPanelSizes] = useState<Record<Side, number>>({\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  });\n  const [isDragging, setIsDragging] = useState(false);\n  const [isReady, setIsReady] = useState(false);\n  const [hasOverlayPanels, setHasOverlayPanels] = useState(false);\n\n  const updatePanelSize = useEvent((side: Side, size: number) => {\n    setPanelSizes((prev) => {\n      if (prev[side] === size) return prev;\n      return { ...prev, [side]: size };\n    });\n  });\n\n  const registerPanel = useEvent((side: Side, size: number) => {\n    if (registeredPanels.current.has(side)) {\n      throw new Error(\n        `Layout: Only one panel per side is allowed. ` +\n          `A panel is already registered on the \"${side}\" side.`,\n      );\n    }\n\n    // Check for axis conflict\n    const isHorizontal = side === 'left' || side === 'right';\n    const conflictingSides: Side[] = isHorizontal\n      ? ['top', 'bottom']\n      : ['left', 'right'];\n\n    for (const conflictSide of conflictingSides) {\n      if (registeredPanels.current.has(conflictSide)) {\n        throw new Error(\n          `Layout: Panels from different axes cannot be combined. ` +\n            `Cannot register \"${side}\" panel when \"${conflictSide}\" panel exists. ` +\n            `Use either horizontal (left/right) or vertical (top/bottom) panels.`,\n        );\n      }\n    }\n\n    registeredPanels.current.add(side);\n    updatePanelSize(side, size);\n  });\n\n  const unregisterPanel = useEvent((side: Side) => {\n    registeredPanels.current.delete(side);\n    updatePanelSize(side, 0);\n  });\n\n  const setDragging = useEvent((dragging: boolean) => {\n    setIsDragging(dragging);\n  });\n\n  const markReady = useEvent(() => {\n    setIsReady(true);\n  });\n\n  const registerOverlayPanel = useEvent((dismiss: OverlayDismissCallback) => {\n    overlayPanelCallbacks.current.add(dismiss);\n    setHasOverlayPanels(true);\n\n    // Return unregister function\n    return () => {\n      overlayPanelCallbacks.current.delete(dismiss);\n      setHasOverlayPanels(overlayPanelCallbacks.current.size > 0);\n    };\n  });\n\n  const dismissOverlayPanels = useEvent(() => {\n    overlayPanelCallbacks.current.forEach((dismiss) => dismiss());\n  });\n\n  // Actions context - stable because all callbacks use useEvent\n  const actionsValue = useMemo(\n    () => ({\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      hasTransition,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    }),\n    // Only hasTransition can change - all other values are stable useEvent callbacks\n    [hasTransition],\n  );\n\n  // State context - changes when state updates\n  const stateValue = useMemo(\n    () => ({\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n    }),\n    [panelSizes, isDragging, isReady, hasOverlayPanels],\n  );\n\n  // Refs context - includes container ready state\n  const refsValue = useMemo(\n    () => ({\n      panelContainerRef,\n      isPanelContainerReady,\n      setPanelContainer,\n    }),\n    [isPanelContainerReady],\n  );\n\n  return (\n    <LayoutRefsContext.Provider value={refsValue}>\n      <LayoutActionsContext.Provider value={actionsValue}>\n        <LayoutStateContext.Provider value={stateValue}>\n          {children}\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n/**\n * Provider that resets the layout context for sub-components.\n * Used to prevent panels in nested Layouts from affecting parent layouts.\n */\nexport function LayoutContextReset({ children }: { children: ReactNode }) {\n  return (\n    <LayoutRefsContext.Provider value={null}>\n      <LayoutActionsContext.Provider value={null}>\n        <LayoutStateContext.Provider value={null}>\n          {children}\n        </LayoutStateContext.Provider>\n      </LayoutActionsContext.Provider>\n    </LayoutRefsContext.Provider>\n  );\n}\n\n// Panel context - provides panel-level callbacks to child components\nexport interface LayoutPanelContextValue {\n  /** Callback to change the panel's open state */\n  onOpenChange: (isOpen: boolean) => void;\n  /** Current open state of the panel */\n  isOpen: boolean;\n}\n\nexport const LayoutPanelContext = createContext<LayoutPanelContextValue | null>(\n  null,\n);\n\nexport function useLayoutPanelContext(): LayoutPanelContextValue | null {\n  return useContext(LayoutPanelContext);\n}\n"],"mappings":"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"}

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

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