@cube-dev/ui-kit 0.0.0-canary-5ad4b14 → 0.0.0-canary-e852864

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { _LayoutContainer } from "./LayoutContainer.js";
 import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";
@@ -11,6 +11,8 @@ function useLayoutRefsContext() {
 }
 const LayoutActionsContext = createContext(null);
 const LayoutStateContext = createContext(null);
+/** Private transition coordination; not part of the public Layout context API. */
+const LayoutPanelTransitionContext = createContext(null);
 function useLayoutActionsContext() {
 	return useContext(LayoutActionsContext);
 }
@@ -18,7 +20,7 @@ function useLayoutStateContext() {
 	return useContext(LayoutStateContext);
 }
 function LayoutProvider(t0) {
-	const $ = c(44);
+	const $ = c(51);
 	const { children, hasTransition: t1, minContentSize: t2 } = t0;
 	const hasTransition = t1 === void 0 ? false : t1;
 	const minContentSize = t2 === void 0 ? 320 : t2;
@@ -59,6 +61,7 @@ function LayoutProvider(t0) {
 	const [isDragging, setIsDragging] = useState(false);
 	const [isReady, setIsReady] = useState(false);
 	const [hasOverlayPanels, setHasOverlayPanels] = useState(false);
+	const [panelTransitionCount, setPanelTransitionCount] = useState(0);
 	const [containerWidth, setContainerWidth] = useState(0);
 	const [containerHeight, setContainerHeight] = useState(0);
 	let t7;
@@ -137,16 +140,25 @@ function LayoutProvider(t0) {
 	const dismissOverlayPanels = useEvent(t13);
 	let t14;
 	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = (width, height) => {
-			setContainerWidth((prev_0) => prev_0 === width ? prev_0 : width);
-			setContainerHeight((prev_1) => prev_1 === height ? prev_1 : height);
+		t14 = () => {
+			setPanelTransitionCount(_temp2);
+			return () => setPanelTransitionCount(_temp3);
 		};
 		$[13] = t14;
 	} else t14 = $[13];
-	const updateContainerSize = useEvent(t14);
+	const registerPanelTransition = useEvent(t14);
 	let t15;
-	if ($[14] !== dismissOverlayPanels || $[15] !== hasTransition || $[16] !== markReady || $[17] !== minContentSize || $[18] !== registerOverlayPanel || $[19] !== registerPanel || $[20] !== setDragging || $[21] !== unregisterPanel || $[22] !== updateContainerSize || $[23] !== updatePanelSize) {
-		t15 = {
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = (width, height) => {
+			setContainerWidth((prev_0) => prev_0 === width ? prev_0 : width);
+			setContainerHeight((prev_1) => prev_1 === height ? prev_1 : height);
+		};
+		$[14] = t15;
+	} else t15 = $[14];
+	const updateContainerSize = useEvent(t15);
+	let t16;
+	if ($[15] !== dismissOverlayPanels || $[16] !== hasTransition || $[17] !== markReady || $[18] !== minContentSize || $[19] !== registerOverlayPanel || $[20] !== registerPanel || $[21] !== setDragging || $[22] !== unregisterPanel || $[23] !== updateContainerSize || $[24] !== updatePanelSize) {
+		t16 = {
 			registerPanel,
 			unregisterPanel,
 			updatePanelSize,
@@ -158,22 +170,22 @@ function LayoutProvider(t0) {
 			registerOverlayPanel,
 			dismissOverlayPanels
 		};
-		$[14] = dismissOverlayPanels;
-		$[15] = hasTransition;
-		$[16] = markReady;
-		$[17] = minContentSize;
-		$[18] = registerOverlayPanel;
-		$[19] = registerPanel;
-		$[20] = setDragging;
-		$[21] = unregisterPanel;
-		$[22] = updateContainerSize;
-		$[23] = updatePanelSize;
-		$[24] = t15;
-	} else t15 = $[24];
-	const actionsValue = t15;
-	let t16;
-	if ($[25] !== containerHeight || $[26] !== containerWidth || $[27] !== hasOverlayPanels || $[28] !== isDragging || $[29] !== isReady || $[30] !== panelSizes) {
-		t16 = {
+		$[15] = dismissOverlayPanels;
+		$[16] = hasTransition;
+		$[17] = markReady;
+		$[18] = minContentSize;
+		$[19] = registerOverlayPanel;
+		$[20] = registerPanel;
+		$[21] = setDragging;
+		$[22] = unregisterPanel;
+		$[23] = updateContainerSize;
+		$[24] = updatePanelSize;
+		$[25] = t16;
+	} else t16 = $[25];
+	const actionsValue = t16;
+	let t17;
+	if ($[26] !== containerHeight || $[27] !== containerWidth || $[28] !== hasOverlayPanels || $[29] !== isDragging || $[30] !== isReady || $[31] !== panelSizes) {
+		t17 = {
 			panelSizes,
 			isDragging,
 			isReady,
@@ -181,63 +193,90 @@ function LayoutProvider(t0) {
 			containerWidth,
 			containerHeight
 		};
-		$[25] = containerHeight;
-		$[26] = containerWidth;
-		$[27] = hasOverlayPanels;
-		$[28] = isDragging;
-		$[29] = isReady;
-		$[30] = panelSizes;
-		$[31] = t16;
-	} else t16 = $[31];
-	const stateValue = t16;
-	let t17;
-	if ($[32] !== isPanelContainerReady || $[33] !== setPanelContainer) {
-		t17 = {
+		$[26] = containerHeight;
+		$[27] = containerWidth;
+		$[28] = hasOverlayPanels;
+		$[29] = isDragging;
+		$[30] = isReady;
+		$[31] = panelSizes;
+		$[32] = t17;
+	} else t17 = $[32];
+	const stateValue = t17;
+	let t18;
+	if ($[33] !== isPanelContainerReady || $[34] !== setPanelContainer) {
+		t18 = {
 			panelContainerRef,
 			isPanelContainerReady,
 			setPanelContainer
 		};
-		$[32] = isPanelContainerReady;
-		$[33] = setPanelContainer;
-		$[34] = t17;
-	} else t17 = $[34];
-	const refsValue = t17;
-	let t18;
-	if ($[35] !== children || $[36] !== stateValue) {
-		t18 = /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
-			value: stateValue,
+		$[33] = isPanelContainerReady;
+		$[34] = setPanelContainer;
+		$[35] = t18;
+	} else t18 = $[35];
+	const refsValue = t18;
+	const t19 = panelTransitionCount > 0;
+	let t20;
+	if ($[36] !== registerPanelTransition || $[37] !== t19) {
+		t20 = {
+			isClippingPanels: t19,
+			registerPanelTransition
+		};
+		$[36] = registerPanelTransition;
+		$[37] = t19;
+		$[38] = t20;
+	} else t20 = $[38];
+	let t21;
+	if ($[39] !== children || $[40] !== t20) {
+		t21 = /* @__PURE__ */ jsx(LayoutPanelTransitionContext.Provider, {
+			value: t20,
 			children
 		});
-		$[35] = children;
-		$[36] = stateValue;
-		$[37] = t18;
-	} else t18 = $[37];
-	let t19;
-	if ($[38] !== actionsValue || $[39] !== t18) {
-		t19 = /* @__PURE__ */ jsx(LayoutActionsContext.Provider, {
+		$[39] = children;
+		$[40] = t20;
+		$[41] = t21;
+	} else t21 = $[41];
+	let t22;
+	if ($[42] !== stateValue || $[43] !== t21) {
+		t22 = /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+			value: stateValue,
+			children: t21
+		});
+		$[42] = stateValue;
+		$[43] = t21;
+		$[44] = t22;
+	} else t22 = $[44];
+	let t23;
+	if ($[45] !== actionsValue || $[46] !== t22) {
+		t23 = /* @__PURE__ */ jsx(LayoutActionsContext.Provider, {
 			value: actionsValue,
-			children: t18
+			children: t22
 		});
-		$[38] = actionsValue;
-		$[39] = t18;
-		$[40] = t19;
-	} else t19 = $[40];
-	let t20;
-	if ($[41] !== refsValue || $[42] !== t19) {
-		t20 = /* @__PURE__ */ jsx(LayoutRefsContext.Provider, {
+		$[45] = actionsValue;
+		$[46] = t22;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== refsValue || $[49] !== t23) {
+		t24 = /* @__PURE__ */ jsx(LayoutRefsContext.Provider, {
 			value: refsValue,
-			children: t19
+			children: t23
 		});
-		$[41] = refsValue;
-		$[42] = t19;
-		$[43] = t20;
-	} else t20 = $[43];
-	return t20;
+		$[48] = refsValue;
+		$[49] = t23;
+		$[50] = t24;
+	} else t24 = $[50];
+	return t24;
 }
 /**
 * Provider that resets the layout context for sub-components.
 * Used to prevent panels in nested Layouts from affecting parent layouts.
 */
+function _temp3(count_0) {
+	return count_0 - 1;
+}
+function _temp2(count) {
+	return count + 1;
+}
 function _temp(dismiss_0) {
 	return dismiss_0();
 }
@@ -252,7 +291,10 @@ function LayoutContextReset(t0) {
 				value: null,
 				children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
 					value: null,
-					children
+					children: /* @__PURE__ */ jsx(LayoutPanelTransitionContext.Provider, {
+						value: null,
+						children
+					})
 				})
 			})
 		});
@@ -267,5 +309,5 @@ function useLayoutPanelContext() {
 }
 
 //#endregion
-export { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutProvider, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext };
+export { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutPanelTransitionContext, LayoutProvider, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext };
 //# sourceMappingURL=LayoutContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutContext.js","names":["createContext","MutableRefObject","ReactNode","useContext","useMemo","useRef","useState","useEvent","Side","LayoutRefsContextValue","panelContainerRef","HTMLDivElement","isPanelContainerReady","setPanelContainer","element","LayoutRefsContext","useLayoutRefsContext","OverlayDismissCallback","LayoutActionsContextValue","registerPanel","side","size","unregisterPanel","updatePanelSize","setDragging","isDragging","markReady","updateContainerSize","width","height","registerOverlayPanel","dismiss","dismissOverlayPanels","hasTransition","minContentSize","LayoutStateContextValue","panelSizes","Record","isReady","hasOverlayPanels","containerWidth","containerHeight","LayoutActionsContext","LayoutStateContext","useLayoutActionsContext","useLayoutStateContext","LayoutContextValue","useLayoutContext","$","_c","actions","state","refs","t0","LayoutProviderProps","children","LayoutProvider","t1","t2","undefined","t3","Symbol","for","Set","registeredPanels","t4","overlayPanelCallbacks","setIsPanelContainerReady","t5","current","t6","left","top","right","bottom","setPanelSizes","setIsDragging","setIsReady","setHasOverlayPanels","setContainerWidth","setContainerHeight","t7","prev","t8","side_0","size_0","has","Error","isHorizontal","conflictingSides","conflictSide","add","t9","side_1","delete","t10","dragging","t11","t12","t13","forEach","_temp","t14","prev_0","prev_1","t15","actionsValue","t16","stateValue","t17","refsValue","t18","t19","t20","dismiss_0","LayoutContextReset","LayoutPanelContextValue","onOpenChange","isOpen","LayoutPanelContext","useLayoutPanelContext"],"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  /** Update the container dimensions (called from ResizeObserver) */\n  updateContainerSize: (width: number, height: number) => 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  /** Minimum size reserved for the content area between panels */\n  minContentSize: number;\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  containerWidth: number;\n  containerHeight: number;\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  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n}\n\nexport function LayoutProvider({\n  children,\n  hasTransition = false,\n  minContentSize = 320,\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  const [containerWidth, setContainerWidth] = useState(0);\n  const [containerHeight, setContainerHeight] = useState(0);\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  const updateContainerSize = useEvent((width: number, height: number) => {\n    setContainerWidth((prev) => (prev === width ? prev : width));\n    setContainerHeight((prev) => (prev === height ? prev : height));\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      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    }),\n    // Only hasTransition and minContentSize can change - the callbacks are\n    // stable useEvent ones, listed so React Compiler can preserve the memo.\n    [\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    ],\n  );\n\n  // State context - changes when state updates\n  const stateValue = useMemo(\n    () => ({\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    }),\n    [\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    ],\n  );\n\n  // Refs context - includes container ready state\n  const refsValue = useMemo(\n    () => ({\n      panelContainerRef,\n      isPanelContainerReady,\n      setPanelContainer,\n    }),\n    [isPanelContainerReady, setPanelContainer],\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":";;;;;;;AA2BA,MAAae,oBAAoBf,cAC/B,KACD;AAED,SAAOgB,uBAAA;AAAA,QACEb,WAAWY,kBAAkB;;AA2CtC,MAAa2B,uBACX1C,cAAgD,KAAK;AACvD,MAAa2C,qBAAqB3C,cAChC,KACD;AAED,SAAO4C,0BAAA;AAAA,QACEzC,WAAWuC,qBAAqB;;AAGzC,SAAOG,wBAAA;AAAA,QACE1C,WAAWwC,mBAAmB;;AAkCvC,SAAOa,eAAAH,IAAA;CAAA,MAAAL,IAAAC,EAAA,GAAA;CAAwB,MAAA,EAAAM,UAAAtB,eAAAwB,IAAAvB,gBAAAwB,OAAAL;CAE7B,MAAApB,gBAAAwB,OAAAE,SAAA,QAAAF;CACA,MAAAvB,iBAAAwB,OAAAC,SAAA,MAAAD;CAAoB,IAAAE;AAAA,KAAAZ,EAAA,OAAAa,OAAAC,IAAA,4BAAA,EAAA;AAEuBF,uBAAA,IAAIG,KAAK;AAAAf,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;CAApD,MAAAgB,mBAAyB3D,OAAkBuD,GAAU;CAAC,IAAAK;AAAA,KAAAjB,EAAA,OAAAa,OAAAC,IAAA,4BAAA,EAAA;AACYG,uBAAA,IAAIF,KAAK;AAAAf,IAAA,KAAAiB;OAAAA,MAAAjB,EAAA;CAA3E,MAAAkB,wBAA8B7D,OAAoC4D,GAAU;CAC5E,MAAAvD,oBAA0BL,OAA8B,KAAK;CAC7D,MAAA,CAAAO,uBAAAuD,4BAA0D7D,SAAS,MAAM;CAAC,IAAA8D;AAAA,KAAApB,EAAA,OAAAa,OAAAC,IAAA,4BAAA,EAAA;AAGvCM,QAAAtD,YAAA;AACjCJ,qBAAiB2D,UAAWvD;AAC5BqD,4BAAyBrD,YAAY,KAAK;;AAC3CkC,IAAA,KAAAoB;OAAAA,MAAApB,EAAA;CAHD,MAAAnC,oBAA0BN,SAAS6D,GAGjC;CAAC,IAAAE;AAAA,KAAAtB,EAAA,OAAAa,OAAAC,IAAA,4BAAA,EAAA;AAEgEQ,OAAA;GAAAC,MAC3D;GAACC,KACF;GAACC,OACC;GAACC,QACA;GACT;AAAA1B,IAAA,KAAAsB;OAAAA,MAAAtB,EAAA;CALD,MAAA,CAAAZ,YAAAuC,iBAAoCrE,SAA+BgE,GAKjE;CACF,MAAA,CAAA7C,YAAAmD,iBAAoCtE,SAAS,MAAM;CACnD,MAAA,CAAAgC,SAAAuC,cAA8BvE,SAAS,MAAM;CAC7C,MAAA,CAAAiC,kBAAAuC,uBAAgDxE,SAAS,MAAM;CAC/D,MAAA,CAAAkC,gBAAAuC,qBAA4CzE,SAAS,EAAE;CACvD,MAAA,CAAAmC,iBAAAuC,sBAA8C1E,SAAS,EAAE;CAAC,IAAA2E;AAAA,KAAAjC,EAAA,OAAAa,OAAAC,IAAA,4BAAA,EAAA;AAEzBmB,QAAA7D,MAAAC,SAAA;AAC/BsD,kBAAcO,SAAA;AACZ,QAAIA,KAAK9D,UAAUC,KAAI,QAAS6D;AAAK,WAC9B;KAAA,GAAKA;MAAO9D,OAAOC;KAAM;KAChC;;AACH2B,IAAA,KAAAiC;OAAAA,MAAAjC,EAAA;CALD,MAAAzB,kBAAwBhB,SAAS0E,GAK/B;CAAC,IAAAE;AAAA,KAAAnC,EAAA,OAAAzB,iBAAA;AAE4B4D,QAAAC,QAAAC,WAAA;AAC7B,OAAIrB,iBAAgBK,QAAQiB,IAAKlE,OAAK,CACpC,OAAM,IAAImE,MACR,qFAC2CnE,OAAI,SAChD;GAKH,MAAAqE,mBADqBrE,WAAS,UAAUA,WAAS,UAChB,CAC5B,OAAO,SACS,GAFY,CAE5B,QAAQ,QAAQ;AAErB,QAAK,MAAAsE,gBAAsBD,iBACzB,KAAIzB,iBAAgBK,QAAQiB,IAAKI,aAAa,CAC5C,OAAM,IAAIH,MACR,2EACsBnE,OAAI,gBAAiBsE,aAAY,qFAExD;AAIL1B,oBAAgBK,QAAQsB,IAAKvE,OAAK;AAClCG,mBAAgBH,QAAMC,OAAK;;AAC5B2B,IAAA,KAAAzB;AAAAyB,IAAA,KAAAmC;OAAAA,MAAAnC,EAAA;CA1BD,MAAA7B,gBAAsBZ,SAAS4E,GA0B7B;CAAC,IAAAS;AAAA,KAAA5C,EAAA,OAAAzB,iBAAA;AAE8BqE,QAAAC,WAAA;AAC/B7B,oBAAgBK,QAAQyB,OAAQ1E,OAAK;AACrCG,mBAAgBH,QAAM,EAAE;;AACzB4B,IAAA,KAAAzB;AAAAyB,IAAA,KAAA4C;OAAAA,MAAA5C,EAAA;CAHD,MAAA1B,kBAAwBf,SAASqF,GAG/B;CAAC,IAAAG;AAAA,KAAA/C,EAAA,OAAAa,OAAAC,IAAA,4BAAA,EAAA;AAE0BiC,SAAAC,aAAA;AAC3BpB,iBAAcoB,SAAS;;AACxBhD,IAAA,KAAA+C;OAAAA,OAAA/C,EAAA;CAFD,MAAAxB,cAAoBjB,SAASwF,IAE3B;CAAC,IAAAE;AAAA,KAAAjD,EAAA,QAAAa,OAAAC,IAAA,4BAAA,EAAA;AAEwBmC,cAAA;AACzBpB,cAAW,KAAK;;AACjB7B,IAAA,MAAAiD;OAAAA,OAAAjD,EAAA;CAFD,MAAAtB,YAAkBnB,SAAS0F,IAEzB;CAAC,IAAAC;AAAA,KAAAlD,EAAA,QAAAa,OAAAC,IAAA,4BAAA,EAAA;AAEmCoC,SAAAnE,YAAA;AACpCmC,yBAAqBG,QAAQsB,IAAK5D,QAAQ;AAC1C+C,uBAAoB,KAAK;AAAA,gBAGlB;AACLZ,0BAAqBG,QAAQyB,OAAQ/D,QAAQ;AAC7C+C,wBAAoBZ,sBAAqBG,QAAQhD,OAAQ,EAAE;;;AAE9D2B,IAAA,MAAAkD;OAAAA,OAAAlD,EAAA;CATD,MAAAlB,uBAA6BvB,SAAS2F,IASpC;CAAC,IAAAC;AAAA,KAAAnD,EAAA,QAAAa,OAAAC,IAAA,4BAAA,EAAA;AAEmCqC,cAAA;AACpCjC,yBAAqBG,QAAQ+B,QAASC,MAAuB;;AAC9DrD,IAAA,MAAAmD;OAAAA,OAAAnD,EAAA;CAFD,MAAAhB,uBAA6BzB,SAAS4F,IAEpC;CAAC,IAAAG;AAAA,KAAAtD,EAAA,QAAAa,OAAAC,IAAA,4BAAA,EAAA;AAEkCwC,SAAA1E,OAAAC,WAAA;AACnCkD,sBAAkBwB,WAAWrB,WAAStD,QAAT2E,SAAA3E,MAA+B;AAC5DoD,uBAAmBwB,WAAWtB,WAASrD,SAAT2E,SAAA3E,OAAiC;;AAChEmB,IAAA,MAAAsD;OAAAA,OAAAtD,EAAA;CAHD,MAAArB,sBAA4BpB,SAAS+F,IAGnC;CAAC,IAAAG;AAAA,KAAAzD,EAAA,QAAAhB,wBAAAgB,EAAA,QAAAf,iBAAAe,EAAA,QAAAtB,aAAAsB,EAAA,QAAAd,kBAAAc,EAAA,QAAAlB,wBAAAkB,EAAA,QAAA7B,iBAAA6B,EAAA,QAAAxB,eAAAwB,EAAA,QAAA1B,mBAAA0B,EAAA,QAAArB,uBAAAqB,EAAA,QAAAzB,iBAAA;AAIMkF,QAAA;GAAAtF;GAAAG;GAAAC;GAAAC;GAAAE;GAAAC;GAAAM;GAAAC;GAAAJ;GAAAE;GAWN;AAAAgB,IAAA,MAAAhB;AAAAgB,IAAA,MAAAf;AAAAe,IAAA,MAAAtB;AAAAsB,IAAA,MAAAd;AAAAc,IAAA,MAAAlB;AAAAkB,IAAA,MAAA7B;AAAA6B,IAAA,MAAAxB;AAAAwB,IAAA,MAAA1B;AAAA0B,IAAA,MAAArB;AAAAqB,IAAA,MAAAzB;AAAAyB,IAAA,MAAAyD;OAAAA,OAAAzD,EAAA;CAZH,MAAA0D,eACSD;CA0BP,IAAAE;AAAA,KAAA3D,EAAA,QAAAP,mBAAAO,EAAA,QAAAR,kBAAAQ,EAAA,QAAAT,oBAAAS,EAAA,QAAAvB,cAAAuB,EAAA,QAAAV,WAAAU,EAAA,QAAAZ,YAAA;AAIOuE,QAAA;GAAAvE;GAAAX;GAAAa;GAAAC;GAAAC;GAAAC;GAON;AAAAO,IAAA,MAAAP;AAAAO,IAAA,MAAAR;AAAAQ,IAAA,MAAAT;AAAAS,IAAA,MAAAvB;AAAAuB,IAAA,MAAAV;AAAAU,IAAA,MAAAZ;AAAAY,IAAA,MAAA2D;OAAAA,OAAA3D,EAAA;CARH,MAAA4D,aACSD;CAgBP,IAAAE;AAAA,KAAA7D,EAAA,QAAApC,yBAAAoC,EAAA,QAAAnC,mBAAA;AAIOgG,QAAA;GAAAnG;GAAAE;GAAAC;GAIN;AAAAmC,IAAA,MAAApC;AAAAoC,IAAA,MAAAnC;AAAAmC,IAAA,MAAA6D;OAAAA,OAAA7D,EAAA;CALH,MAAA8D,YACSD;CAMP,IAAAE;AAAA,KAAA/D,EAAA,QAAAO,YAAAP,EAAA,QAAA4D,YAAA;AAKIG,QAAA,oBAAA,mBAAA;GAAoCH,OAAAA;GACjCrD;IAC2B;AAAAP,IAAA,MAAAO;AAAAP,IAAA,MAAA4D;AAAA5D,IAAA,MAAA+D;OAAAA,OAAA/D,EAAA;CAAA,IAAAgE;AAAA,KAAAhE,EAAA,QAAA0D,gBAAA1D,EAAA,QAAA+D,KAAA;AAHhCC,QAAA,oBAAA,qBAAA;GAAsCN,OAAAA;aACpCK;IAG8B;AAAA/D,IAAA,MAAA0D;AAAA1D,IAAA,MAAA+D;AAAA/D,IAAA,MAAAgE;OAAAA,OAAAhE,EAAA;CAAA,IAAAiE;AAAA,KAAAjE,EAAA,QAAA8D,aAAA9D,EAAA,QAAAgE,KAAA;AALlCC,QAAA,oBAAA,kBAAA;GAAmCH,OAAAA;aACjCE;IAK2B;AAAAhE,IAAA,MAAA8D;AAAA9D,IAAA,MAAAgE;AAAAhE,IAAA,MAAAiE;OAAAA,OAAAjE,EAAA;AAAA,QAN7BiE;;;;;;AA7JG,SAAAZ,MAAAa,WAAA;AAAA,QAwFgDnF,WAAS;;AAmFhE,SAAOoF,mBAAA9D,IAAA;CAAA,MAAAL,IAAAC,EAAA,EAAA;CAA4B,MAAA,EAAAM,aAAAF;CAAqC,IAAAI;AAAA,KAAAT,EAAA,OAAAO,UAAA;AAEpEE,OAAA,oBAAA,kBAAA;GAAmC,OAAA;aACjC,oBAAA,qBAAA;IAAsC,OAAA;cACpC,oBAAA,mBAAA;KAAoC,OAAA;KACjCF;MAEL;KACF;IAA6B;AAAAP,IAAA,KAAAO;AAAAP,IAAA,KAAAS;OAAAA,MAAAT,EAAA;AAAA,QAN7BS;;AAkBJ,MAAa8D,qBAAqBvH,cAChC,KACD;AAED,SAAOwH,wBAAA;AAAA,QACErH,WAAWoH,mBAAmB"}
+{"version":3,"file":"LayoutContext.js","names":["createContext","MutableRefObject","ReactNode","useContext","useMemo","useRef","useState","useEvent","Side","LayoutRefsContextValue","panelContainerRef","HTMLDivElement","isPanelContainerReady","setPanelContainer","element","LayoutRefsContext","useLayoutRefsContext","OverlayDismissCallback","LayoutActionsContextValue","registerPanel","side","size","unregisterPanel","updatePanelSize","setDragging","isDragging","markReady","updateContainerSize","width","height","registerOverlayPanel","dismiss","dismissOverlayPanels","hasTransition","minContentSize","LayoutStateContextValue","panelSizes","Record","isReady","hasOverlayPanels","containerWidth","containerHeight","LayoutActionsContext","LayoutStateContext","LayoutPanelTransitionContext","isClippingPanels","registerPanelTransition","useLayoutActionsContext","useLayoutStateContext","LayoutContextValue","useLayoutContext","$","_c","actions","state","refs","t0","LayoutProviderProps","children","LayoutProvider","t1","t2","undefined","t3","Symbol","for","Set","registeredPanels","t4","overlayPanelCallbacks","setIsPanelContainerReady","t5","current","t6","left","top","right","bottom","setPanelSizes","setIsDragging","setIsReady","setHasOverlayPanels","panelTransitionCount","setPanelTransitionCount","setContainerWidth","setContainerHeight","t7","prev","t8","side_0","size_0","has","Error","isHorizontal","conflictingSides","conflictSide","add","t9","side_1","delete","t10","dragging","t11","t12","t13","forEach","_temp","t14","_temp2","_temp3","t15","prev_0","prev_1","t16","actionsValue","t17","stateValue","t18","refsValue","t19","t20","t21","t22","t23","t24","count_0","count","dismiss_0","LayoutContextReset","LayoutPanelContextValue","onOpenChange","isOpen","LayoutPanelContext","useLayoutPanelContext"],"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  /** Update the container dimensions (called from ResizeObserver) */\n  updateContainerSize: (width: number, height: number) => 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  /** Minimum size reserved for the content area between panels */\n  minContentSize: number;\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  containerWidth: number;\n  containerHeight: number;\n}\n\nexport const LayoutActionsContext =\n  createContext<LayoutActionsContextValue | null>(null);\nexport const LayoutStateContext = createContext<LayoutStateContextValue | null>(\n  null,\n);\n\n/** Private transition coordination; not part of the public Layout context API. */\nexport const LayoutPanelTransitionContext = createContext<{\n  isClippingPanels: boolean;\n  registerPanelTransition: () => () => void;\n} | null>(null);\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  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n}\n\nexport function LayoutProvider({\n  children,\n  hasTransition = false,\n  minContentSize = 320,\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  const [panelTransitionCount, setPanelTransitionCount] = useState(0);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const [containerHeight, setContainerHeight] = useState(0);\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  const registerPanelTransition = useEvent(() => {\n    setPanelTransitionCount((count) => count + 1);\n    return () => setPanelTransitionCount((count) => count - 1);\n  });\n\n  const updateContainerSize = useEvent((width: number, height: number) => {\n    setContainerWidth((prev) => (prev === width ? prev : width));\n    setContainerHeight((prev) => (prev === height ? prev : height));\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      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    }),\n    // Only hasTransition and minContentSize can change - the callbacks are\n    // stable useEvent ones, listed so React Compiler can preserve the memo.\n    [\n      registerPanel,\n      unregisterPanel,\n      updatePanelSize,\n      setDragging,\n      markReady,\n      updateContainerSize,\n      hasTransition,\n      minContentSize,\n      registerOverlayPanel,\n      dismissOverlayPanels,\n    ],\n  );\n\n  // State context - changes when state updates\n  const stateValue = useMemo(\n    () => ({\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    }),\n    [\n      panelSizes,\n      isDragging,\n      isReady,\n      hasOverlayPanels,\n      containerWidth,\n      containerHeight,\n    ],\n  );\n\n  // Refs context - includes container ready state\n  const refsValue = useMemo(\n    () => ({\n      panelContainerRef,\n      isPanelContainerReady,\n      setPanelContainer,\n    }),\n    [isPanelContainerReady, setPanelContainer],\n  );\n\n  return (\n    <LayoutRefsContext.Provider value={refsValue}>\n      <LayoutActionsContext.Provider value={actionsValue}>\n        <LayoutStateContext.Provider value={stateValue}>\n          <LayoutPanelTransitionContext.Provider\n            value={{\n              isClippingPanels: panelTransitionCount > 0,\n              registerPanelTransition,\n            }}\n          >\n            {children}\n          </LayoutPanelTransitionContext.Provider>\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          <LayoutPanelTransitionContext.Provider value={null}>\n            {children}\n          </LayoutPanelTransitionContext.Provider>\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.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/Button/Button.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5ad4b14 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e852864 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -9,6 +9,7 @@ import { DialogContainer } from "../../overlays/Dialog/DialogContainer.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { LayoutContextReset, LayoutPanelContext, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { clampSize, getOppositeSide, resolveCssSize } from "./utils.js";
+import { LayoutPanelTransition } from "./LayoutPanelTransition.js";
 import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -563,7 +564,11 @@ function LayoutPanel(props, ref) {
 	if (hasTransition) return createPortal(/* @__PURE__ */ jsx(DisplayTransition, {
 		isShown: isOpen,
 		animateOnMount: false,
-		children: ({ isShown, ref: transitionRef_1 }) => renderPanelContent(!isShown, transitionRef_1)
+		children: ({ isShown, isExiting, ref: transitionRef_1 }) => /* @__PURE__ */ jsx(LayoutPanelTransition, {
+			isShown,
+			isExiting,
+			children: renderPanelContent(!isShown, transitionRef_1)
+		})
 	}), portalContainer);
 	if (!isOpen) return null;
 	return createPortal(renderPanelContent(false), portalContainer);