@cube-dev/ui-kit 0.181.0 → 0.183.0

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutPanel.js","names":["mergeProps"],"sources":["../../../../src/components/content/Layout/LayoutPanel.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport {\n  mergeProps,\n  useCombinedRefs,\n  useLocalStorage,\n} from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Dialog } from '../../overlays/Dialog';\nimport {\n  CubeDialogContainerProps,\n  DialogContainer,\n} from '../../overlays/Dialog/DialogContainer';\n\nimport {\n  LayoutContextReset,\n  LayoutPanelContext,\n  Side,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\nimport { clampSize, getOppositeSide, resolveCssSize } from './utils';\n\n// Resize handler dimensions\nconst HANDLER_WIDTH = 9;\n// How far from panel edge to position handler's inner edge (centers the 3px track on the edge)\nconst HANDLER_OFFSET = 4;\n// Extra inset added for resizable panels (to accommodate handler grab area)\nconst RESIZABLE_INSET_OFFSET = 2;\n\nconst PanelElement = tasty({\n  as: 'div',\n  qa: 'LayoutPanel',\n  styles: {\n    container: 'panel / inline-size',\n    position: 'absolute',\n    display: 'flex',\n    flow: 'column',\n    overflow: 'hidden',\n    boxSizing: 'border-box',\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (panels are always vertical)\n    '$layout-border-size': '1bw',\n\n    // Position based on side prop\n    top: {\n      '': 0,\n      'side=bottom': 'initial',\n    },\n    right: {\n      '': 0,\n      'side=left': 'initial',\n    },\n    bottom: {\n      '': 0,\n      'side=top': 'initial',\n    },\n    left: {\n      '': 0,\n      'side=right': 'initial',\n    },\n\n    // Size handling with CSS-level min/max clamping\n    width: {\n      '': '$min-size $panel-size $max-size',\n      'side=top | side=bottom': '100%',\n    },\n    height: {\n      '': '100%',\n      'side=top | side=bottom': '$min-size $panel-size $max-size',\n    },\n\n    // Visual styling\n    border: {\n      '': false,\n      'side=left': 'right',\n      'side=right': 'left',\n      'side=top': 'bottom',\n      'side=bottom': 'top',\n    },\n    fill: '#surface',\n\n    // Transition styles - offscreen mod controls slide animation\n    transform: {\n      '': 'translateX(0) translateY(0)',\n      'offscreen & side=left': 'translateX(-100%)',\n      'offscreen & side=right': 'translateX(100%)',\n      'offscreen & side=top': 'translateY(-100%)',\n      'offscreen & side=bottom': 'translateY(100%)',\n    },\n    transition: {\n      '': 'none',\n      'has-transition': 'transform $transition ease-out',\n    },\n  },\n});\n\n// Handler is positioned as sibling to panel (in Fragment), relative to Layout\nconst ResizeHandlerElement = tasty({\n  qa: 'PanelResizeHandler',\n  styles: {\n    position: 'absolute',\n\n    // Handler size\n    width: {\n      '': '100%',\n      horizontal: `${HANDLER_WIDTH}px`,\n      'disabled & horizontal': '1bw',\n    },\n    height: {\n      '': `${HANDLER_WIDTH}px`,\n      horizontal: '100%',\n      'disabled & !horizontal': '1bw',\n    },\n\n    // Position handler with direct offset (no centering needed)\n    top: {\n      '': 0,\n      'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=bottom': 'initial',\n    },\n    bottom: {\n      '': 0,\n      'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=top': 'initial',\n    },\n    left: {\n      '': 0,\n      'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=right': 'initial',\n    },\n    right: {\n      '': 0,\n      'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=left': 'initial',\n    },\n\n    // Offscreen transforms only (no centering needed with direct offset positioning)\n    transform: {\n      '': 'translateX(0)',\n      'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=bottom': `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n    },\n\n    cursor: {\n      '': 'row-resize',\n      horizontal: 'col-resize',\n      disabled: 'not-allowed',\n    },\n    touchAction: {\n      '': 'none',\n      disabled: 'auto',\n    },\n    padding: 0,\n    outline: 0,\n    boxSizing: 'border-box',\n\n    // Transition must match panel for synchronized animation\n    transition: {\n      '': 'theme',\n      'has-transition': 'transform $transition ease-out, theme',\n    },\n\n    Track: {\n      width: {\n        '': 'initial',\n        horizontal: '3px',\n        'disabled & horizontal': '1px',\n      },\n      height: {\n        '': '3px',\n        horizontal: 'initial',\n        'disabled & !horizontal': '1px',\n      },\n      position: 'absolute',\n      inset: {\n        '': '3px 0',\n        horizontal: '0 3px',\n        disabled: '0 0',\n      },\n      fill: {\n        '': '#border',\n        '(hovered | drag | focused) & !disabled': '#purple-03',\n      },\n      border: 0,\n      transition: 'theme',\n      outline: {\n        '': '1bw #primary-text.0',\n        'drag | focused': '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      border: 0,\n      flow: {\n        '': 'row',\n        horizontal: 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        horizontal: 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        horizontal: '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '1px',\n      },\n      height: {\n        '': '1px',\n        horizontal: 'auto',\n      },\n      inset: {\n        '': '4px 50% auto auto',\n        horizontal: '50% 4px auto auto',\n      },\n      transform: {\n        '': 'translate(-50%, 0)',\n        horizontal: 'translate(0, -50%)',\n      },\n      position: 'absolute',\n      transition: 'theme',\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'hovered | drag | focused': '#primary-text',\n        disabled: '#disabled-surface-text',\n      },\n    },\n  },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n  qa: 'PanelOverlay',\n  styles: {\n    position: 'absolute',\n    inset: 0,\n    // fill: '#white.2',\n    backdropFilter: 'invert(.15)',\n    cursor: 'pointer',\n    opacity: {\n      '': 0,\n      visible: 1,\n    },\n    pointerEvents: {\n      '': 'none',\n      visible: 'auto',\n    },\n    transition: 'opacity .15s ease-out',\n  },\n});\n\ninterface ResizeHandlerProps {\n  side: Side;\n  isDisabled?: boolean;\n  mods?: Record<string, boolean>;\n  moveProps: ReturnType<typeof useMove>['moveProps'];\n  style?: Record<string, string | number | null | undefined>;\n  onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n  const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const isHorizontal = side === 'left' || side === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <ResizeHandlerElement\n      {...mergeProps(hoverProps, focusProps, moveProps, {\n        mods: {\n          hovered: localIsHovered,\n          horizontal: isHorizontal,\n          disabled: isDisabled,\n          focused: isFocusVisible,\n          side,\n          ...mods,\n        },\n        style,\n        tabIndex: isDisabled ? undefined : 0,\n        role: 'separator',\n        'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n        'aria-label': `Resize ${side} panel`,\n        onDoubleClick: isDisabled ? undefined : onDoubleClick,\n      })}\n    >\n      <div data-element=\"Track\" />\n      {!isDisabled && (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      )}\n    </ResizeHandlerElement>\n  );\n}\n\n/** Panel rendering mode */\nexport type LayoutPanelMode = 'default' | 'sticky' | 'overlay' | 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n  /** Side of the layout where panel is positioned */\n  side: Side;\n  /**\n   * Panel rendering mode:\n   * - `default`: Standard panel that pushes content aside\n   * - `sticky`: Panel floats over content without pushing it\n   * - `overlay`: Panel with dismissable backdrop overlay\n   * - `dialog`: Panel renders as a modal dialog\n   */\n  mode?: LayoutPanelMode;\n  /** Panel size (width for left/right, height for top/bottom) - controlled */\n  size?: number | string;\n  /** Default panel size for uncontrolled state */\n  defaultSize?: number | string;\n  /** Minimum panel size */\n  minSize?: number | string;\n  /** Maximum panel size */\n  maxSize?: number | string;\n  /** Enable resize functionality */\n  isResizable?: boolean;\n  /** Size change callback */\n  onSizeChange?: (size: number) => void;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Default open state */\n  defaultIsOpen?: boolean;\n  /** Open state change callback */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Enable slide transition on open/close */\n  hasTransition?: boolean;\n  /**\n   * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.\n   * Only applies to `overlay` and `dialog` modes. Default: true\n   */\n  isDismissable?: boolean;\n  /** Styles for the overlay backdrop in overlay mode */\n  overlayStyles?: Styles;\n  /**\n   * @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n   */\n  isDialog?: boolean;\n  /** Controlled dialog open state (used with mode=\"dialog\") */\n  isDialogOpen?: boolean;\n  /** Default dialog open state */\n  defaultIsDialogOpen?: boolean;\n  /** Dialog open state change callback */\n  onDialogOpenChange?: (isOpen: boolean) => void;\n  /** Props passed to Dialog component when in dialog mode */\n  dialogProps?: Omit<\n    CubeDialogContainerProps,\n    'isDismissable' | 'onDismiss' | 'isOpen'\n  >;\n  /** Padding for content areas inside the panel. Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */\n  sizeStorageKey?: string;\n  /** Styles for the panel */\n  styles?: Styles;\n  children?: ReactNode;\n}\n\nfunction LayoutPanel(\n  props: CubeLayoutPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n\n  if (!layoutActions || !layoutState || !layoutRefs) {\n    throw new Error(\n      'Layout.Panel must be used within a Layout component. ' +\n        'Ensure your panel is rendered inside a <Layout> parent.',\n    );\n  }\n\n  const {\n    side = 'left',\n    mode: modeProp,\n    size: providedSize,\n    defaultSize = 280,\n    minSize = 200,\n    maxSize,\n    isResizable = false,\n    onSizeChange,\n    isOpen: providedIsOpen,\n    defaultIsOpen = true,\n    onOpenChange,\n    hasTransition: hasTransitionProp,\n    isDismissable = true,\n    overlayStyles,\n    // Deprecated prop - use mode=\"dialog\" instead\n    isDialog = false,\n    isDialogOpen: providedIsDialogOpen,\n    defaultIsDialogOpen = false,\n    onDialogOpenChange,\n    dialogProps,\n    contentPadding,\n    sizeStorageKey,\n    children,\n    styles,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Resolve mode from prop or deprecated isDialog\n  const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n  const isDialogMode = mode === 'dialog';\n  const isOverlayMode = mode === 'overlay';\n  const isStickyMode = mode === 'sticky';\n\n  // Use prop value if provided, otherwise fall back to context value\n  const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n  const combinedRef = useCombinedRefs(ref);\n  const prevProvidedSizeRef = useRef(providedSize);\n  const isHorizontal = side === 'left' || side === 'right';\n\n  // Natural boundary computation\n  const { containerWidth, containerHeight } = layoutState;\n  const { minContentSize } = layoutActions;\n  const containerDimension = isHorizontal ? containerWidth : containerHeight;\n  const oppositeSide = getOppositeSide(side);\n  const oppositePanelSize = layoutState.panelSizes[oppositeSide];\n  const ownInsetOffset = isResizable ? RESIZABLE_INSET_OFFSET : 0;\n  const naturalMax = useMemo(\n    () =>\n      containerDimension > 0\n        ? Math.max(\n            0,\n            containerDimension -\n              oppositePanelSize -\n              minContentSize -\n              ownInsetOffset,\n          )\n        : Infinity,\n    [containerDimension, oppositePanelSize, minContentSize, ownInsetOffset],\n  );\n\n  // Panel open state\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n  const isOpen = providedIsOpen ?? internalIsOpen;\n\n  // Dialog open state\n  const [internalIsDialogOpen, setInternalIsDialogOpen] =\n    useState(defaultIsDialogOpen);\n  const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;\n\n  // Persistent size storage\n  const [storedSize, setStoredSize] = useLocalStorage<number | null>(\n    sizeStorageKey ?? null,\n    null,\n  );\n\n  // Resize state\n  const [isDragging, setIsDragging] = useState(false);\n  const [size, setSize] = useState<number>(() => {\n    const initialSize =\n      typeof providedSize === 'number'\n        ? providedSize\n        : storedSize != null\n          ? storedSize\n          : typeof defaultSize === 'number'\n            ? defaultSize\n            : 280;\n\n    return clampSize(initialSize, minSize, maxSize);\n  });\n\n  const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Merge styles with contentPadding support\n  const finalStyles = useMemo(\n    () =>\n      mergeStyles(\n        styles,\n        contentPadding != null ? { '$content-padding': contentPadding } : null,\n        extractedStyles,\n      ),\n    [extractedStyles, contentPadding, styles],\n  );\n\n  // Resolve user's maxSize to pixels for JS-level clamping.\n  // String values (e.g. \"50%\") can only be resolved once we know the container size.\n  const resolvedMax = useMemo(() => {\n    if (typeof maxSize === 'number') return maxSize;\n    if (typeof maxSize === 'string' && containerDimension > 0) {\n      return resolveCssSize(maxSize, containerDimension);\n    }\n    return undefined;\n  }, [maxSize, containerDimension]);\n\n  // Effective max combines user's maxSize with natural boundary\n  const effectiveMax = useMemo(() => {\n    const values: number[] = [];\n    if (resolvedMax != null) values.push(resolvedMax);\n    if (Number.isFinite(naturalMax)) values.push(naturalMax);\n    return values.length > 0 ? Math.min(...values) : undefined;\n  }, [resolvedMax, naturalMax]);\n\n  // Clamp size to min/max constraints (including natural boundaries)\n  const clampValue = useCallback(\n    (value: number) => clampSize(value, minSize, undefined, effectiveMax),\n    [minSize, effectiveMax],\n  );\n\n  const setContextDragging = layoutActions.setDragging;\n\n  const { moveProps } = useMove({\n    onMoveStart() {\n      if (!isResizable) return;\n      setIsDragging(true);\n      setContextDragging(true);\n    },\n    onMove(e) {\n      if (!isResizable) return;\n\n      let delta: number;\n\n      if (e.pointerType === 'keyboard') {\n        // Keyboard resize: 10px per step, 50px with Shift\n        const step = e.shiftKey ? 50 : 10;\n        // For keyboard, deltaX/deltaY are direction indicators (-1, 0, 1)\n        const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n        const direction = side === 'right' || side === 'bottom' ? -1 : 1;\n        delta = rawDelta * step * direction;\n      } else {\n        // Pointer resize: use exact delta values\n        delta = isHorizontal\n          ? e.deltaX * (side === 'right' ? -1 : 1)\n          : e.deltaY * (side === 'bottom' ? -1 : 1);\n      }\n\n      setSize((currentSize) => clampValue(currentSize + delta));\n    },\n    onMoveEnd() {\n      setIsDragging(false);\n      setContextDragging(false);\n      // Round to integer on release and notify parent\n      setSize((currentSize) => {\n        const finalSize = Math.round(clampValue(currentSize));\n        // Call onSizeChange synchronously to ensure parent state is updated\n        onSizeChange?.(finalSize);\n        // Persist to localStorage if key is provided\n        setStoredSize(finalSize);\n        return finalSize;\n      });\n    },\n  });\n\n  // Sync provided size with internal state (only when providedSize actually changes)\n  // This prevents resetting size when only isDragging changes (which would cause a flash)\n  useEffect(() => {\n    if (prevProvidedSizeRef.current !== providedSize) {\n      prevProvidedSizeRef.current = providedSize;\n      if (typeof providedSize === 'number' && !isDragging) {\n        setSize(clampValue(providedSize));\n      }\n    }\n  }, [providedSize, isDragging, clampValue]);\n\n  // Auto-shrink: re-clamp when container resizes or opposite panel changes\n  useEffect(() => {\n    if (!isDragging && containerDimension > 0) {\n      setSize((prev) => {\n        const clamped = clampValue(prev);\n\n        if (clamped !== prev) {\n          onSizeChange?.(Math.round(clamped));\n          setStoredSize(Math.round(clamped));\n        }\n\n        return clamped;\n      });\n    }\n  }, [isDragging, clampValue, containerDimension]);\n\n  // Register panel with layout context\n  // Include handler outside portion (minus border overlap) for proper content inset\n  // In sticky, overlay, and dialog modes, panel doesn't push content, so size is 0\n  // NOTE: We intentionally use `size` (not `clampValue(size)`) here to avoid a feedback\n  // loop. `clampValue` depends on the opposite panel's context size, so clamping here\n  // would create a period-2 oscillation through shared context. CSS --max-size handles\n  // visual clamping immediately; the auto-shrink effect converges `size` state.\n  const effectivePanelSize = isOpen && mode === 'default' ? size : 0;\n  const effectiveInsetSize = Math.round(\n    effectivePanelSize +\n      (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0),\n  );\n\n  const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;\n  const { isReady } = layoutState;\n\n  // Track the last reported size to prevent unnecessary updates\n  const lastSizeRef = useRef<number>(effectiveInsetSize);\n\n  // Register on mount, unregister on unmount\n  // Using useLayoutEffect ensures registration happens before browser paint\n  useLayoutEffect(() => {\n    registerPanel(side, lastSizeRef.current);\n\n    return () => {\n      unregisterPanel(side);\n    };\n  }, [side, registerPanel, unregisterPanel]);\n\n  // Update size when it changes (after initial mount)\n  // Using useLayoutEffect ensures size updates happen before browser paint\n  useLayoutEffect(() => {\n    if (lastSizeRef.current !== effectiveInsetSize) {\n      lastSizeRef.current = effectiveInsetSize;\n      updatePanelSize(side, effectiveInsetSize);\n    }\n  }, [side, effectiveInsetSize, updatePanelSize]);\n\n  const handleOpenChange = useCallback(\n    (newIsOpen: boolean) => {\n      setInternalIsOpen(newIsOpen);\n      onOpenChange?.(newIsOpen);\n    },\n    [onOpenChange],\n  );\n\n  // Dismiss handler for overlay mode (click on overlay)\n  const handleDismiss = useCallback(() => {\n    if (isDismissable) {\n      handleOpenChange(false);\n    }\n  }, [isDismissable, handleOpenChange]);\n\n  // Register overlay panel with Layout context for coordinated dismissal\n  const { registerOverlayPanel } = layoutActions;\n\n  useEffect(() => {\n    // Only register if in overlay mode, open, and dismissable\n    if (isOverlayMode && isOpen && isDismissable) {\n      const unregister = registerOverlayPanel(() => handleOpenChange(false));\n      return unregister;\n    }\n  }, [\n    isOverlayMode,\n    isOpen,\n    isDismissable,\n    registerOverlayPanel,\n    handleOpenChange,\n  ]);\n\n  const handleDialogOpenChange = useCallback(\n    (newIsOpen: boolean) => {\n      setInternalIsDialogOpen(newIsOpen);\n      onDialogOpenChange?.(newIsOpen);\n    },\n    [onDialogOpenChange],\n  );\n\n  // Panel context value for child components (like LayoutPanelHeader)\n  const panelContextValue = useMemo(\n    () => ({\n      onOpenChange: handleOpenChange,\n      isOpen,\n    }),\n    [handleOpenChange, isOpen],\n  );\n\n  // Dialog mode context value - uses dialog state instead of panel state\n  const dialogPanelContextValue = useMemo(\n    () => ({\n      onOpenChange: handleDialogOpenChange,\n      isOpen: dialogOpen,\n    }),\n    [handleDialogOpenChange, dialogOpen],\n  );\n\n  const panelMods = useMemo(\n    () => ({\n      side,\n      drag: isDragging,\n      horizontal: isHorizontal,\n      // Only enable transition after layout is ready to prevent initial animation\n      'has-transition': hasTransition && isReady,\n      ...mods,\n    }),\n    [side, isDragging, isHorizontal, hasTransition, isReady, mods],\n  );\n\n  // Build --max-size CSS variable combining user maxSize and natural boundary\n  const maxSizeCss = useMemo(() => {\n    const parts: string[] = [];\n\n    if (maxSize != null) {\n      parts.push(typeof maxSize === 'number' ? `${maxSize}px` : maxSize);\n    }\n\n    if (containerDimension > 0 && Number.isFinite(naturalMax)) {\n      parts.push(`${naturalMax}px`);\n    }\n\n    if (parts.length === 0) return undefined;\n    return parts.length === 1 ? parts[0] : `min(${parts.join(', ')})`;\n  }, [maxSize, naturalMax, containerDimension]);\n\n  const panelStyle = useMemo(\n    () => ({\n      '--panel-size': `${size}px`,\n      '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n      '--max-size': maxSizeCss,\n    }),\n    [size, minSize, maxSizeCss],\n  );\n\n  // Combine refs for panel element\n  const panelRefCallback = useCallback(\n    (node: HTMLDivElement | null, transitionRef?: RefCallback<HTMLElement>) => {\n      // Update the combined ref\n      (combinedRef as { current: HTMLDivElement | null }).current = node;\n      // Call transition ref if provided\n      transitionRef?.(node);\n    },\n    [combinedRef],\n  );\n\n  // Reset to default size on double-click\n  const handleResetSize = useCallback(() => {\n    const resetSize =\n      typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n    const clampedSize = clampValue(resetSize || 280);\n    setSize(clampedSize);\n    onSizeChange?.(clampedSize);\n    setStoredSize(clampedSize);\n  }, [defaultSize, clampValue, onSizeChange, setStoredSize]);\n\n  const renderPanelContent = (\n    offscreen = false,\n    transitionRef?: RefCallback<HTMLElement>,\n  ) => {\n    const showOverlay = isOverlayMode && !offscreen;\n\n    return (\n      <>\n        {/* Overlay backdrop for overlay mode */}\n        {isOverlayMode && (\n          <OverlayBackdrop\n            mods={{ visible: showOverlay }}\n            styles={overlayStyles}\n            aria-hidden=\"true\"\n            onClick={handleDismiss}\n          />\n        )}\n        <PanelElement\n          ref={(node: HTMLDivElement | null) =>\n            panelRefCallback(node, transitionRef)\n          }\n          {...filterBaseProps(otherProps, { eventProps: true })}\n          mods={{ ...panelMods, offscreen }}\n          styles={finalStyles}\n          style={panelStyle}\n          data-side={side}\n        >\n          <LayoutPanelContext.Provider value={panelContextValue}>\n            <LayoutContextReset>{children}</LayoutContextReset>\n          </LayoutPanelContext.Provider>\n        </PanelElement>\n        {isResizable && (\n          <ResizeHandler\n            side={side}\n            isDisabled={!isResizable}\n            mods={{\n              drag: isDragging,\n              offscreen,\n              'has-transition': hasTransition && isReady,\n            }}\n            moveProps={moveProps}\n            style={panelStyle}\n            onDoubleClick={handleResetSize}\n          />\n        )}\n      </>\n    );\n  };\n\n  // Dialog mode - uses its own portal via DialogContainer\n  if (isDialogMode) {\n    return (\n      <DialogContainer\n        isOpen={dialogOpen}\n        isDismissable={isDismissable}\n        onDismiss={() => handleDialogOpenChange(false)}\n        {...dialogProps}\n      >\n        <Dialog isDismissable={false}>\n          <LayoutPanelContext.Provider value={dialogPanelContextValue}>\n            <LayoutContextReset>{children}</LayoutContextReset>\n          </LayoutPanelContext.Provider>\n        </Dialog>\n      </DialogContainer>\n    );\n  }\n\n  // Wait for portal container to be ready before rendering\n  if (!layoutRefs.isPanelContainerReady) {\n    return null;\n  }\n\n  const portalContainer = layoutRefs.panelContainerRef.current!;\n\n  // Panel with transition - portal to panel container\n  if (hasTransition) {\n    return createPortal(\n      <DisplayTransition isShown={isOpen} animateOnMount={false}>\n        {({ isShown, ref: transitionRef }) =>\n          renderPanelContent(!isShown, transitionRef)\n        }\n      </DisplayTransition>,\n      portalContainer,\n    );\n  }\n\n  // Simple panel (no transition) - portal to panel container\n  if (!isOpen) return null;\n\n  return createPortal(renderPanelContent(false), portalContainer);\n}\n\nconst _LayoutPanel = forwardRef(LayoutPanel);\n\n_LayoutPanel.displayName = 'Layout.Panel';\n\nexport { _LayoutPanel as LayoutPanel };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkDA,MAAM,gBAAgB;AAEtB,MAAM,iBAAiB;AAEvB,MAAM,yBAAyB;AAE/B,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,UAAU;EACV,SAAS;EACT,MAAM;EACN,UAAU;EACV,WAAW;EAEX,oBAAoB;EAEpB,uBAAuB;EAGvB,KAAK;GACH,IAAI;GACJ,eAAe;GAChB;EACD,OAAO;GACL,IAAI;GACJ,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,YAAY;GACb;EACD,MAAM;GACJ,IAAI;GACJ,cAAc;GACf;EAGD,OAAO;GACL,IAAI;GACJ,0BAA0B;GAC3B;EACD,QAAQ;GACN,IAAI;GACJ,0BAA0B;GAC3B;EAGD,QAAQ;GACN,IAAI;GACJ,aAAa;GACb,cAAc;GACd,YAAY;GACZ,eAAe;GAChB;EACD,MAAM;EAGN,WAAW;GACT,IAAI;GACJ,yBAAyB;GACzB,0BAA0B;GAC1B,wBAAwB;GACxB,2BAA2B;GAC5B;EACD,YAAY;GACV,IAAI;GACJ,kBAAkB;GACnB;EACF;CACF,CAAC;AAGF,MAAM,uBAAuB,MAAM;CACjC,IAAI;CACJ,QAAQ;EACN,UAAU;EAGV,OAAO;GACL,IAAI;GACJ,YAAY,GAAG,cAAc;GAC7B,yBAAyB;GAC1B;EACD,QAAQ;GACN,IAAI,GAAG,cAAc;GACrB,YAAY;GACZ,0BAA0B;GAC3B;EAGD,KAAK;GACH,IAAI;GACJ,YAAY,sBAAsB,eAAe;GACjD,eAAe;GAChB;EACD,QAAQ;GACN,IAAI;GACJ,eAAe,sBAAsB,eAAe;GACpD,YAAY;GACb;EACD,MAAM;GACJ,IAAI;GACJ,aAAa,sBAAsB,eAAe;GAClD,cAAc;GACf;EACD,OAAO;GACL,IAAI;GACJ,cAAc,sBAAsB,eAAe;GACnD,aAAa;GACd;EAGD,WAAW;GACT,IAAI;GACJ,yBAAyB,sCAAsC,gBAAgB,eAAe;GAC9F,0BAA0B,iCAAiC,gBAAgB,eAAe;GAC1F,wBAAwB,sCAAsC,gBAAgB,eAAe;GAC7F,2BAA2B,iCAAiC,gBAAgB,eAAe;GAC5F;EAED,QAAQ;GACN,IAAI;GACJ,YAAY;GACZ,UAAU;GACX;EACD,aAAa;GACX,IAAI;GACJ,UAAU;GACX;EACD,SAAS;EACT,SAAS;EACT,WAAW;EAGX,YAAY;GACV,IAAI;GACJ,kBAAkB;GACnB;EAED,OAAO;GACL,OAAO;IACL,IAAI;IACJ,YAAY;IACZ,yBAAyB;IAC1B;GACD,QAAQ;IACN,IAAI;IACJ,YAAY;IACZ,0BAA0B;IAC3B;GACD,UAAU;GACV,OAAO;IACL,IAAI;IACJ,YAAY;IACZ,UAAU;IACX;GACD,MAAM;IACJ,IAAI;IACJ,0CAA0C;IAC3C;GACD,QAAQ;GACR,YAAY;GACZ,SAAS;IACP,IAAI;IACJ,kBAAkB;IACnB;GACD,eAAe;GAChB;EAED,MAAM;GACJ,SAAS;GACT,KAAK;GACL,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,YAAY;IACb;GACD,aAAa;IACX,IAAI;IACJ,YAAY;IACb;GACD,UAAU;IACR,IAAI;IACJ,YAAY;IACb;GACD,OAAO;IACL,IAAI;IACJ,YAAY;IACb;GACD,QAAQ;IACN,IAAI;IACJ,YAAY;IACb;GACD,OAAO;IACL,IAAI;IACJ,YAAY;IACb;GACD,WAAW;IACT,IAAI;IACJ,YAAY;IACb;GACD,UAAU;GACV,YAAY;GACb;EAED,UAAU;GACR,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,4BAA4B;IAC5B,UAAU;IACX;GACF;EACF;CACF,CAAC;AAGF,MAAM,kBAAkB,MAAM;CAC5B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,OAAO;EAEP,gBAAgB;EAChB,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,eAAe;GACb,IAAI;GACJ,SAAS;GACV;EACD,YAAY;EACb;CACF,CAAC;AAWF,SAAS,cAAc,OAA2B;CAChD,MAAM,EAAE,MAAM,YAAY,MAAM,WAAW,OAAO,kBAAkB;CACpE,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAC9C,MAAM,EAAE,YAAY,mBAAmB,cAAc;CACrD,MAAM,eAAe,SAAS,UAAU,SAAS;AAGjD,QACE,qBAAC;EACC,GAAIA,aAAW,YAAY,YAAY,WAAW;GAChD,MAAM;IACJ,SANe,kBAAkB,WAAW,IAAI;IAOhD,YAAY;IACZ,UAAU;IACV,SAAS;IACT;IACA,GAAG;IACJ;GACD;GACA,UAAU,aAAa,SAAY;GACnC,MAAM;GACN,oBAAoB,eAAe,aAAa;GAChD,cAAc,UAAU,KAAK;GAC7B,eAAe,aAAa,SAAY;GACzC,CAAC;aAEF,oBAAC,SAAI,gBAAa,UAAU,EAC3B,CAAC,cACA,qBAAC;GAAI,gBAAa;;IAChB,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;;IAC3B;GAEa;;AAqE3B,SAAS,YACP,OACA,KACA;CACA,MAAM,gBAAgB,yBAAyB;CAC/C,MAAM,cAAc,uBAAuB;CAC3C,MAAM,aAAa,sBAAsB;AAEzC,KAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,WACrC,OAAM,IAAI,MACR,+GAED;CAGH,MAAM,EACJ,OAAO,QACP,MAAM,UACN,MAAM,cACN,cAAc,KACd,UAAU,KACV,SACA,cAAc,OACd,cACA,QAAQ,gBACR,gBAAgB,MAChB,cACA,eAAe,mBACf,gBAAgB,MAChB,eAEA,WAAW,OACX,cAAc,sBACd,sBAAsB,OACtB,oBACA,aACA,gBACA,gBACA,UACA,QACA,MACA,GAAG,eACD;CAGJ,MAAM,OAAwB,aAAa,WAAW,WAAW;CACjE,MAAM,eAAe,SAAS;CAC9B,MAAM,gBAAgB,SAAS;CAI/B,MAAM,gBAAgB,qBAAqB,cAAc;CAEzD,MAAM,cAAc,gBAAgB,IAAI;CACxC,MAAM,sBAAsB,OAAO,aAAa;CAChD,MAAM,eAAe,SAAS,UAAU,SAAS;CAGjD,MAAM,EAAE,gBAAgB,oBAAoB;CAC5C,MAAM,EAAE,mBAAmB;CAC3B,MAAM,qBAAqB,eAAe,iBAAiB;CAC3D,MAAM,eAAe,gBAAgB,KAAK;CAC1C,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,iBAAiB,cAAc,yBAAyB;CAC9D,MAAM,aAAa,cAEf,qBAAqB,IACjB,KAAK,IACH,GACA,qBACE,oBACA,iBACA,eACH,GACD,UACN;EAAC;EAAoB;EAAmB;EAAgB;EAAe,CACxE;CAGD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,cAAc;CACnE,MAAM,SAAS,kBAAkB;CAGjC,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,oBAAoB;CAC/B,MAAM,aAAa,wBAAwB;CAG3C,MAAM,CAAC,YAAY,iBAAiB,gBAClC,kBAAkB,MAClB,KACD;CAGD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,MAAM,WAAW,eAAuB;AAU7C,SAAO,UARL,OAAO,iBAAiB,WACpB,eACA,cAAc,OACZ,aACA,OAAO,gBAAgB,WACrB,cACA,KAEoB,SAAS,QAAQ;GAC/C;CAEF,MAAM,kBAAkB,cAAc,YAAY,iBAAiB;CAGnE,MAAM,cAAc,cAEhB,YACE,QACA,kBAAkB,OAAO,EAAE,oBAAoB,gBAAgB,GAAG,MAClE,gBACD,EACH;EAAC;EAAiB;EAAgB;EAAO,CAC1C;CAID,MAAM,cAAc,cAAc;AAChC,MAAI,OAAO,YAAY,SAAU,QAAO;AACxC,MAAI,OAAO,YAAY,YAAY,qBAAqB,EACtD,QAAO,eAAe,SAAS,mBAAmB;IAGnD,CAAC,SAAS,mBAAmB,CAAC;CAGjC,MAAM,eAAe,cAAc;EACjC,MAAM,SAAmB,EAAE;AAC3B,MAAI,eAAe,KAAM,QAAO,KAAK,YAAY;AACjD,MAAI,OAAO,SAAS,WAAW,CAAE,QAAO,KAAK,WAAW;AACxD,SAAO,OAAO,SAAS,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG;IAChD,CAAC,aAAa,WAAW,CAAC;CAG7B,MAAM,aAAa,aAChB,UAAkB,UAAU,OAAO,SAAS,QAAW,aAAa,EACrE,CAAC,SAAS,aAAa,CACxB;CAED,MAAM,qBAAqB,cAAc;CAEzC,MAAM,EAAE,cAAc,QAAQ;EAC5B,cAAc;AACZ,OAAI,CAAC,YAAa;AAClB,iBAAc,KAAK;AACnB,sBAAmB,KAAK;;EAE1B,OAAO,GAAG;AACR,OAAI,CAAC,YAAa;GAElB,IAAI;AAEJ,OAAI,EAAE,gBAAgB,YAAY;IAEhC,MAAM,OAAO,EAAE,WAAW,KAAK;IAE/B,MAAM,WAAW,eAAe,EAAE,SAAS,EAAE;IAC7C,MAAM,YAAY,SAAS,WAAW,SAAS,WAAW,KAAK;AAC/D,YAAQ,WAAW,OAAO;SAG1B,SAAQ,eACJ,EAAE,UAAU,SAAS,UAAU,KAAK,KACpC,EAAE,UAAU,SAAS,WAAW,KAAK;AAG3C,YAAS,gBAAgB,WAAW,cAAc,MAAM,CAAC;;EAE3D,YAAY;AACV,iBAAc,MAAM;AACpB,sBAAmB,MAAM;AAEzB,YAAS,gBAAgB;IACvB,MAAM,YAAY,KAAK,MAAM,WAAW,YAAY,CAAC;AAErD,mBAAe,UAAU;AAEzB,kBAAc,UAAU;AACxB,WAAO;KACP;;EAEL,CAAC;AAIF,iBAAgB;AACd,MAAI,oBAAoB,YAAY,cAAc;AAChD,uBAAoB,UAAU;AAC9B,OAAI,OAAO,iBAAiB,YAAY,CAAC,WACvC,SAAQ,WAAW,aAAa,CAAC;;IAGpC;EAAC;EAAc;EAAY;EAAW,CAAC;AAG1C,iBAAgB;AACd,MAAI,CAAC,cAAc,qBAAqB,EACtC,UAAS,SAAS;GAChB,MAAM,UAAU,WAAW,KAAK;AAEhC,OAAI,YAAY,MAAM;AACpB,mBAAe,KAAK,MAAM,QAAQ,CAAC;AACnC,kBAAc,KAAK,MAAM,QAAQ,CAAC;;AAGpC,UAAO;IACP;IAEH;EAAC;EAAY;EAAY;EAAmB,CAAC;CAShD,MAAM,qBAAqB,UAAU,SAAS,YAAY,OAAO;CACjE,MAAM,qBAAqB,KAAK,MAC9B,sBACG,eAAe,qBAAqB,IAAI,yBAAyB,GACrE;CAED,MAAM,EAAE,eAAe,iBAAiB,oBAAoB;CAC5D,MAAM,EAAE,YAAY;CAGpB,MAAM,cAAc,OAAe,mBAAmB;AAItD,uBAAsB;AACpB,gBAAc,MAAM,YAAY,QAAQ;AAExC,eAAa;AACX,mBAAgB,KAAK;;IAEtB;EAAC;EAAM;EAAe;EAAgB,CAAC;AAI1C,uBAAsB;AACpB,MAAI,YAAY,YAAY,oBAAoB;AAC9C,eAAY,UAAU;AACtB,mBAAgB,MAAM,mBAAmB;;IAE1C;EAAC;EAAM;EAAoB;EAAgB,CAAC;CAE/C,MAAM,mBAAmB,aACtB,cAAuB;AACtB,oBAAkB,UAAU;AAC5B,iBAAe,UAAU;IAE3B,CAAC,aAAa,CACf;CAGD,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,cACF,kBAAiB,MAAM;IAExB,CAAC,eAAe,iBAAiB,CAAC;CAGrC,MAAM,EAAE,yBAAyB;AAEjC,iBAAgB;AAEd,MAAI,iBAAiB,UAAU,cAE7B,QADmB,2BAA2B,iBAAiB,MAAM,CAAC;IAGvE;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,yBAAyB,aAC5B,cAAuB;AACtB,0BAAwB,UAAU;AAClC,uBAAqB,UAAU;IAEjC,CAAC,mBAAmB,CACrB;CAGD,MAAM,oBAAoB,eACjB;EACL,cAAc;EACd;EACD,GACD,CAAC,kBAAkB,OAAO,CAC3B;CAGD,MAAM,0BAA0B,eACvB;EACL,cAAc;EACd,QAAQ;EACT,GACD,CAAC,wBAAwB,WAAW,CACrC;CAED,MAAM,YAAY,eACT;EACL;EACA,MAAM;EACN,YAAY;EAEZ,kBAAkB,iBAAiB;EACnC,GAAG;EACJ,GACD;EAAC;EAAM;EAAY;EAAc;EAAe;EAAS;EAAK,CAC/D;CAGD,MAAM,aAAa,cAAc;EAC/B,MAAM,QAAkB,EAAE;AAE1B,MAAI,WAAW,KACb,OAAM,KAAK,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM,QAAQ;AAGpE,MAAI,qBAAqB,KAAK,OAAO,SAAS,WAAW,CACvD,OAAM,KAAK,GAAG,WAAW,IAAI;AAG/B,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SAAO,MAAM,WAAW,IAAI,MAAM,KAAK,OAAO,MAAM,KAAK,KAAK,CAAC;IAC9D;EAAC;EAAS;EAAY;EAAmB,CAAC;CAE7C,MAAM,aAAa,eACV;EACL,gBAAgB,GAAG,KAAK;EACxB,cAAc,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;EAC7D,cAAc;EACf,GACD;EAAC;EAAM;EAAS;EAAW,CAC5B;CAGD,MAAM,mBAAmB,aACtB,MAA6B,kBAA6C;AAEzE,EAAC,YAAmD,UAAU;AAE9D,kBAAgB,KAAK;IAEvB,CAAC,YAAY,CACd;CAGD,MAAM,kBAAkB,kBAAkB;EAGxC,MAAM,cAAc,YADlB,OAAO,gBAAgB,WAAW,cAAc,SAAS,aAAa,GAAG,KAC/B,IAAI;AAChD,UAAQ,YAAY;AACpB,iBAAe,YAAY;AAC3B,gBAAc,YAAY;IACzB;EAAC;EAAa;EAAY;EAAc;EAAc,CAAC;CAE1D,MAAM,sBACJ,YAAY,OACZ,kBACG;AAGH,SACE;GAEG,iBACC,oBAAC;IACC,MAAM,EAAE,SAPI,iBAAiB,CAAC,WAOA;IAC9B,QAAQ;IACR,eAAY;IACZ,SAAS;KACT;GAEJ,oBAAC;IACC,MAAM,SACJ,iBAAiB,MAAM,cAAc;IAEvC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;IACrD,MAAM;KAAE,GAAG;KAAW;KAAW;IACjC,QAAQ;IACR,OAAO;IACP,aAAW;cAEX,oBAAC,mBAAmB;KAAS,OAAO;eAClC,oBAAC,sBAAoB,WAA8B;MACvB;KACjB;GACd,eACC,oBAAC;IACO;IACN,YAAY,CAAC;IACb,MAAM;KACJ,MAAM;KACN;KACA,kBAAkB,iBAAiB;KACpC;IACU;IACX,OAAO;IACP,eAAe;KACf;MAEH;;AAKP,KAAI,aACF,QACE,oBAAC;EACC,QAAQ;EACO;EACf,iBAAiB,uBAAuB,MAAM;EAC9C,GAAI;YAEJ,oBAAC;GAAO,eAAe;aACrB,oBAAC,mBAAmB;IAAS,OAAO;cAClC,oBAAC,sBAAoB,WAA8B;KACvB;IACvB;GACO;AAKtB,KAAI,CAAC,WAAW,sBACd,QAAO;CAGT,MAAM,kBAAkB,WAAW,kBAAkB;AAGrD,KAAI,cACF,QAAO,aACL,oBAAC;EAAkB,SAAS;EAAQ,gBAAgB;aAChD,EAAE,SAAS,KAAK,oBAChB,mBAAmB,CAAC,SAAS,cAAc;GAE3B,EACpB,gBACD;AAIH,KAAI,CAAC,OAAQ,QAAO;AAEpB,QAAO,aAAa,mBAAmB,MAAM,EAAE,gBAAgB;;AAGjE,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}
+{"version":3,"file":"LayoutPanel.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","mergeStyles","Styles","tasty","ForwardedRef","forwardRef","HTMLAttributes","ReactNode","RefCallback","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","useFocusRing","useHover","useMove","createPortal","useDebouncedValue","mergeProps","useCombinedRefs","useLocalStorage","extractStyles","DisplayTransition","Dialog","CubeDialogContainerProps","DialogContainer","LayoutContextReset","LayoutPanelContext","Side","useLayoutActionsContext","useLayoutRefsContext","useLayoutStateContext","clampSize","getOppositeSide","resolveCssSize","HANDLER_WIDTH","HANDLER_OFFSET","RESIZABLE_INSET_OFFSET","PanelElement","as","qa","styles","container","position","display","flow","overflow","boxSizing","top","right","bottom","left","width","height","border","fill","transform","transition","ResizeHandlerElement","horizontal","cursor","disabled","touchAction","padding","outline","Track","inset","outlineOffset","Drag","gap","gridColumns","gridRows","DragPart","radius","OverlayBackdrop","backdropFilter","opacity","visible","pointerEvents","ResizeHandlerProps","side","isDisabled","mods","Record","moveProps","ReturnType","style","onDoubleClick","ResizeHandler","props","$","_c","t0","Symbol","for","hoverProps","isHovered","focusProps","isFocusVisible","isHorizontal","localIsHovered","t1","hovered","focused","tabIndex","undefined","role","t2","t3","t4","LayoutPanelMode","CubeLayoutPanelProps","mode","size","defaultSize","minSize","maxSize","isResizable","onSizeChange","isOpen","defaultIsOpen","onOpenChange","hasTransition","isDismissable","overlayStyles","isDialog","isDialogOpen","defaultIsDialogOpen","onDialogOpenChange","dialogProps","Omit","contentPadding","sizeStorageKey","children","LayoutPanel","ref","HTMLDivElement","layoutActions","layoutState","layoutRefs","Error","modeProp","providedSize","providedIsOpen","hasTransitionProp","providedIsDialogOpen","otherProps","isDialogMode","isOverlayMode","isStickyMode","combinedRef","prevProvidedSizeRef","containerWidth","containerHeight","minContentSize","containerDimension","oppositeSide","oppositePanelSize","panelSizes","ownInsetOffset","naturalMax","Math","max","Infinity","internalIsOpen","setInternalIsOpen","internalIsDialogOpen","setInternalIsDialogOpen","dialogOpen","storedSize","setStoredSize","isDragging","setIsDragging","setSize","initialSize","extractedStyles","finalStyles","resolvedMax","effectiveMax","values","push","Number","isFinite","length","min","clampValue","value","setContextDragging","setDragging","onMoveStart","onMove","e","delta","pointerType","step","shiftKey","rawDelta","deltaX","deltaY","direction","currentSize","onMoveEnd","finalSize","round","current","prev","clamped","effectivePanelSize","effectiveInsetSize","registerPanel","unregisterPanel","updatePanelSize","isReady","lastSizeRef","handleOpenChange","newIsOpen","handleDismiss","registerOverlayPanel","unregister","handleDialogOpenChange","panelContextValue","dialogPanelContextValue","panelMods","drag","maxSizeCss","parts","join","panelStyle","panelRefCallback","node","transitionRef","HTMLElement","handleResetSize","resetSize","parseInt","clampedSize","renderPanelContent","offscreen","showOverlay","eventProps","isPanelContainerReady","portalContainer","panelContainerRef","isShown","_LayoutPanel","displayName"],"sources":["../../../../src/components/content/Layout/LayoutPanel.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport {\n  mergeProps,\n  useCombinedRefs,\n  useLocalStorage,\n} from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Dialog } from '../../overlays/Dialog';\nimport {\n  CubeDialogContainerProps,\n  DialogContainer,\n} from '../../overlays/Dialog/DialogContainer';\n\nimport {\n  LayoutContextReset,\n  LayoutPanelContext,\n  Side,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\nimport { clampSize, getOppositeSide, resolveCssSize } from './utils';\n\n// Resize handler dimensions\nconst HANDLER_WIDTH = 9;\n// How far from panel edge to position handler's inner edge (centers the 3px track on the edge)\nconst HANDLER_OFFSET = 4;\n// Extra inset added for resizable panels (to accommodate handler grab area)\nconst RESIZABLE_INSET_OFFSET = 2;\n\nconst PanelElement = tasty({\n  as: 'div',\n  qa: 'LayoutPanel',\n  styles: {\n    container: 'panel / inline-size',\n    position: 'absolute',\n    display: 'flex',\n    flow: 'column',\n    overflow: 'hidden',\n    boxSizing: 'border-box',\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (panels are always vertical)\n    '$layout-border-size': '1bw',\n\n    // Position based on side prop\n    top: {\n      '': 0,\n      'side=bottom': 'initial',\n    },\n    right: {\n      '': 0,\n      'side=left': 'initial',\n    },\n    bottom: {\n      '': 0,\n      'side=top': 'initial',\n    },\n    left: {\n      '': 0,\n      'side=right': 'initial',\n    },\n\n    // Size handling with CSS-level min/max clamping\n    width: {\n      '': '$min-size $panel-size $max-size',\n      'side=top | side=bottom': '100%',\n    },\n    height: {\n      '': '100%',\n      'side=top | side=bottom': '$min-size $panel-size $max-size',\n    },\n\n    // Visual styling\n    border: {\n      '': false,\n      'side=left': 'right',\n      'side=right': 'left',\n      'side=top': 'bottom',\n      'side=bottom': 'top',\n    },\n    fill: '#surface',\n\n    // Transition styles - offscreen mod controls slide animation\n    transform: {\n      '': 'translateX(0) translateY(0)',\n      'offscreen & side=left': 'translateX(-100%)',\n      'offscreen & side=right': 'translateX(100%)',\n      'offscreen & side=top': 'translateY(-100%)',\n      'offscreen & side=bottom': 'translateY(100%)',\n    },\n    transition: {\n      '': 'none',\n      'has-transition': 'transform $transition ease-out',\n    },\n  },\n});\n\n// Handler is positioned as sibling to panel (in Fragment), relative to Layout\nconst ResizeHandlerElement = tasty({\n  qa: 'PanelResizeHandler',\n  styles: {\n    position: 'absolute',\n\n    // Handler size\n    width: {\n      '': '100%',\n      horizontal: `${HANDLER_WIDTH}px`,\n      'disabled & horizontal': '1bw',\n    },\n    height: {\n      '': `${HANDLER_WIDTH}px`,\n      horizontal: '100%',\n      'disabled & !horizontal': '1bw',\n    },\n\n    // Position handler with direct offset (no centering needed)\n    top: {\n      '': 0,\n      'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=bottom': 'initial',\n    },\n    bottom: {\n      '': 0,\n      'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=top': 'initial',\n    },\n    left: {\n      '': 0,\n      'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=right': 'initial',\n    },\n    right: {\n      '': 0,\n      'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=left': 'initial',\n    },\n\n    // Offscreen transforms only (no centering needed with direct offset positioning)\n    transform: {\n      '': 'translateX(0)',\n      'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n      'offscreen & side=bottom': `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n    },\n\n    cursor: {\n      '': 'row-resize',\n      horizontal: 'col-resize',\n      disabled: 'not-allowed',\n    },\n    touchAction: {\n      '': 'none',\n      disabled: 'auto',\n    },\n    padding: 0,\n    outline: 0,\n    boxSizing: 'border-box',\n\n    // Transition must match panel for synchronized animation\n    transition: {\n      '': 'theme',\n      'has-transition': 'transform $transition ease-out, theme',\n    },\n\n    Track: {\n      width: {\n        '': 'initial',\n        horizontal: '3px',\n        'disabled & horizontal': '1px',\n      },\n      height: {\n        '': '3px',\n        horizontal: 'initial',\n        'disabled & !horizontal': '1px',\n      },\n      position: 'absolute',\n      inset: {\n        '': '3px 0',\n        horizontal: '0 3px',\n        disabled: '0 0',\n      },\n      fill: {\n        '': '#border',\n        '(hovered | drag | focused) & !disabled': '#purple-03',\n      },\n      border: 0,\n      transition: 'theme',\n      outline: {\n        '': '1bw #primary-text.0',\n        'drag | focused': '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      border: 0,\n      flow: {\n        '': 'row',\n        horizontal: 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        horizontal: 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        horizontal: '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '1px',\n      },\n      height: {\n        '': '1px',\n        horizontal: 'auto',\n      },\n      inset: {\n        '': '4px 50% auto auto',\n        horizontal: '50% 4px auto auto',\n      },\n      transform: {\n        '': 'translate(-50%, 0)',\n        horizontal: 'translate(0, -50%)',\n      },\n      position: 'absolute',\n      transition: 'theme',\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'hovered | drag | focused': '#primary-text',\n        disabled: '#disabled-surface-text',\n      },\n    },\n  },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n  qa: 'PanelOverlay',\n  styles: {\n    position: 'absolute',\n    inset: 0,\n    // fill: '#white.2',\n    backdropFilter: 'invert(.15)',\n    cursor: 'pointer',\n    opacity: {\n      '': 0,\n      visible: 1,\n    },\n    pointerEvents: {\n      '': 'none',\n      visible: 'auto',\n    },\n    transition: 'opacity .15s ease-out',\n  },\n});\n\ninterface ResizeHandlerProps {\n  side: Side;\n  isDisabled?: boolean;\n  mods?: Record<string, boolean>;\n  moveProps: ReturnType<typeof useMove>['moveProps'];\n  style?: Record<string, string | number | null | undefined>;\n  onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n  const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const isHorizontal = side === 'left' || side === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <ResizeHandlerElement\n      {...mergeProps(hoverProps, focusProps, moveProps, {\n        mods: {\n          hovered: localIsHovered,\n          horizontal: isHorizontal,\n          disabled: isDisabled,\n          focused: isFocusVisible,\n          side,\n          ...mods,\n        },\n        style,\n        tabIndex: isDisabled ? undefined : 0,\n        role: 'separator',\n        'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n        'aria-label': `Resize ${side} panel`,\n        onDoubleClick: isDisabled ? undefined : onDoubleClick,\n      })}\n    >\n      <div data-element=\"Track\" />\n      {!isDisabled && (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      )}\n    </ResizeHandlerElement>\n  );\n}\n\n/** Panel rendering mode */\nexport type LayoutPanelMode = 'default' | 'sticky' | 'overlay' | 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n  /** Side of the layout where panel is positioned */\n  side: Side;\n  /**\n   * Panel rendering mode:\n   * - `default`: Standard panel that pushes content aside\n   * - `sticky`: Panel floats over content without pushing it\n   * - `overlay`: Panel with dismissable backdrop overlay\n   * - `dialog`: Panel renders as a modal dialog\n   */\n  mode?: LayoutPanelMode;\n  /** Panel size (width for left/right, height for top/bottom) - controlled */\n  size?: number | string;\n  /** Default panel size for uncontrolled state */\n  defaultSize?: number | string;\n  /** Minimum panel size */\n  minSize?: number | string;\n  /** Maximum panel size */\n  maxSize?: number | string;\n  /** Enable resize functionality */\n  isResizable?: boolean;\n  /** Size change callback */\n  onSizeChange?: (size: number) => void;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Default open state */\n  defaultIsOpen?: boolean;\n  /** Open state change callback */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Enable slide transition on open/close */\n  hasTransition?: boolean;\n  /**\n   * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.\n   * Only applies to `overlay` and `dialog` modes. Default: true\n   */\n  isDismissable?: boolean;\n  /** Styles for the overlay backdrop in overlay mode */\n  overlayStyles?: Styles;\n  /**\n   * @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n   */\n  isDialog?: boolean;\n  /** Controlled dialog open state (used with mode=\"dialog\") */\n  isDialogOpen?: boolean;\n  /** Default dialog open state */\n  defaultIsDialogOpen?: boolean;\n  /** Dialog open state change callback */\n  onDialogOpenChange?: (isOpen: boolean) => void;\n  /** Props passed to Dialog component when in dialog mode */\n  dialogProps?: Omit<\n    CubeDialogContainerProps,\n    'isDismissable' | 'onDismiss' | 'isOpen'\n  >;\n  /** Padding for content areas inside the panel. Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */\n  sizeStorageKey?: string;\n  /** Styles for the panel */\n  styles?: Styles;\n  children?: ReactNode;\n}\n\nfunction LayoutPanel(\n  props: CubeLayoutPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n\n  if (!layoutActions || !layoutState || !layoutRefs) {\n    throw new Error(\n      'Layout.Panel must be used within a Layout component. ' +\n        'Ensure your panel is rendered inside a <Layout> parent.',\n    );\n  }\n\n  const {\n    side = 'left',\n    mode: modeProp,\n    size: providedSize,\n    defaultSize = 280,\n    minSize = 200,\n    maxSize,\n    isResizable = false,\n    onSizeChange,\n    isOpen: providedIsOpen,\n    defaultIsOpen = true,\n    onOpenChange,\n    hasTransition: hasTransitionProp,\n    isDismissable = true,\n    overlayStyles,\n    // Deprecated prop - use mode=\"dialog\" instead\n    isDialog = false,\n    isDialogOpen: providedIsDialogOpen,\n    defaultIsDialogOpen = false,\n    onDialogOpenChange,\n    dialogProps,\n    contentPadding,\n    sizeStorageKey,\n    children,\n    styles,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Resolve mode from prop or deprecated isDialog\n  const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n  const isDialogMode = mode === 'dialog';\n  const isOverlayMode = mode === 'overlay';\n  const isStickyMode = mode === 'sticky';\n\n  // Use prop value if provided, otherwise fall back to context value\n  const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n  const combinedRef = useCombinedRefs(ref);\n  const prevProvidedSizeRef = useRef(providedSize);\n  const isHorizontal = side === 'left' || side === 'right';\n\n  // Natural boundary computation\n  const { containerWidth, containerHeight } = layoutState;\n  const { minContentSize } = layoutActions;\n  const containerDimension = isHorizontal ? containerWidth : containerHeight;\n  const oppositeSide = getOppositeSide(side);\n  const oppositePanelSize = layoutState.panelSizes[oppositeSide];\n  const ownInsetOffset = isResizable ? RESIZABLE_INSET_OFFSET : 0;\n  const naturalMax = useMemo(\n    () =>\n      containerDimension > 0\n        ? Math.max(\n            0,\n            containerDimension -\n              oppositePanelSize -\n              minContentSize -\n              ownInsetOffset,\n          )\n        : Infinity,\n    [containerDimension, oppositePanelSize, minContentSize, ownInsetOffset],\n  );\n\n  // Panel open state\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n  const isOpen = providedIsOpen ?? internalIsOpen;\n\n  // Dialog open state\n  const [internalIsDialogOpen, setInternalIsDialogOpen] =\n    useState(defaultIsDialogOpen);\n  const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;\n\n  // Persistent size storage\n  const [storedSize, setStoredSize] = useLocalStorage<number | null>(\n    sizeStorageKey ?? null,\n    null,\n  );\n\n  // Resize state\n  const [isDragging, setIsDragging] = useState(false);\n  const [size, setSize] = useState<number>(() => {\n    const initialSize =\n      typeof providedSize === 'number'\n        ? providedSize\n        : storedSize != null\n          ? storedSize\n          : typeof defaultSize === 'number'\n            ? defaultSize\n            : 280;\n\n    return clampSize(initialSize, minSize, maxSize);\n  });\n\n  const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Merge styles with contentPadding support\n  const finalStyles = useMemo(\n    () =>\n      mergeStyles(\n        styles,\n        contentPadding != null ? { '$content-padding': contentPadding } : null,\n        extractedStyles,\n      ),\n    [extractedStyles, contentPadding, styles],\n  );\n\n  // Resolve user's maxSize to pixels for JS-level clamping.\n  // String values (e.g. \"50%\") can only be resolved once we know the container size.\n  const resolvedMax = useMemo(() => {\n    if (typeof maxSize === 'number') return maxSize;\n    if (typeof maxSize === 'string' && containerDimension > 0) {\n      return resolveCssSize(maxSize, containerDimension);\n    }\n    return undefined;\n  }, [maxSize, containerDimension]);\n\n  // Effective max combines user's maxSize with natural boundary\n  const effectiveMax = useMemo(() => {\n    const values: number[] = [];\n    if (resolvedMax != null) values.push(resolvedMax);\n    if (Number.isFinite(naturalMax)) values.push(naturalMax);\n    return values.length > 0 ? Math.min(...values) : undefined;\n  }, [resolvedMax, naturalMax]);\n\n  // Clamp size to min/max constraints (including natural boundaries)\n  const clampValue = useCallback(\n    (value: number) => clampSize(value, minSize, undefined, effectiveMax),\n    [minSize, effectiveMax],\n  );\n\n  const setContextDragging = layoutActions.setDragging;\n\n  const { moveProps } = useMove({\n    onMoveStart() {\n      if (!isResizable) return;\n      setIsDragging(true);\n      setContextDragging(true);\n    },\n    onMove(e) {\n      if (!isResizable) return;\n\n      let delta: number;\n\n      if (e.pointerType === 'keyboard') {\n        // Keyboard resize: 10px per step, 50px with Shift\n        const step = e.shiftKey ? 50 : 10;\n        // For keyboard, deltaX/deltaY are direction indicators (-1, 0, 1)\n        const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n        const direction = side === 'right' || side === 'bottom' ? -1 : 1;\n        delta = rawDelta * step * direction;\n      } else {\n        // Pointer resize: use exact delta values\n        delta = isHorizontal\n          ? e.deltaX * (side === 'right' ? -1 : 1)\n          : e.deltaY * (side === 'bottom' ? -1 : 1);\n      }\n\n      setSize((currentSize) => clampValue(currentSize + delta));\n    },\n    onMoveEnd() {\n      setIsDragging(false);\n      setContextDragging(false);\n      // Round to integer on release and notify parent\n      setSize((currentSize) => {\n        const finalSize = Math.round(clampValue(currentSize));\n        // Call onSizeChange synchronously to ensure parent state is updated\n        onSizeChange?.(finalSize);\n        // Persist to localStorage if key is provided\n        setStoredSize(finalSize);\n        return finalSize;\n      });\n    },\n  });\n\n  // Sync provided size with internal state (only when providedSize actually changes)\n  // This prevents resetting size when only isDragging changes (which would cause a flash)\n  useEffect(() => {\n    if (prevProvidedSizeRef.current !== providedSize) {\n      prevProvidedSizeRef.current = providedSize;\n      if (typeof providedSize === 'number' && !isDragging) {\n        setSize(clampValue(providedSize));\n      }\n    }\n  }, [providedSize, isDragging, clampValue]);\n\n  // Auto-shrink: re-clamp when container resizes or opposite panel changes\n  useEffect(() => {\n    if (!isDragging && containerDimension > 0) {\n      setSize((prev) => {\n        const clamped = clampValue(prev);\n\n        if (clamped !== prev) {\n          onSizeChange?.(Math.round(clamped));\n          setStoredSize(Math.round(clamped));\n        }\n\n        return clamped;\n      });\n    }\n  }, [isDragging, clampValue, containerDimension]);\n\n  // Register panel with layout context\n  // Include handler outside portion (minus border overlap) for proper content inset\n  // In sticky, overlay, and dialog modes, panel doesn't push content, so size is 0\n  // NOTE: We intentionally use `size` (not `clampValue(size)`) here to avoid a feedback\n  // loop. `clampValue` depends on the opposite panel's context size, so clamping here\n  // would create a period-2 oscillation through shared context. CSS --max-size handles\n  // visual clamping immediately; the auto-shrink effect converges `size` state.\n  const effectivePanelSize = isOpen && mode === 'default' ? size : 0;\n  const effectiveInsetSize = Math.round(\n    effectivePanelSize +\n      (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0),\n  );\n\n  const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;\n  const { isReady } = layoutState;\n\n  // Track the last reported size to prevent unnecessary updates\n  const lastSizeRef = useRef<number>(effectiveInsetSize);\n\n  // Register on mount, unregister on unmount\n  // Using useLayoutEffect ensures registration happens before browser paint\n  useLayoutEffect(() => {\n    registerPanel(side, lastSizeRef.current);\n\n    return () => {\n      unregisterPanel(side);\n    };\n  }, [side, registerPanel, unregisterPanel]);\n\n  // Update size when it changes (after initial mount)\n  // Using useLayoutEffect ensures size updates happen before browser paint\n  useLayoutEffect(() => {\n    if (lastSizeRef.current !== effectiveInsetSize) {\n      lastSizeRef.current = effectiveInsetSize;\n      updatePanelSize(side, effectiveInsetSize);\n    }\n  }, [side, effectiveInsetSize, updatePanelSize]);\n\n  const handleOpenChange = useCallback(\n    (newIsOpen: boolean) => {\n      setInternalIsOpen(newIsOpen);\n      onOpenChange?.(newIsOpen);\n    },\n    [onOpenChange],\n  );\n\n  // Dismiss handler for overlay mode (click on overlay)\n  const handleDismiss = useCallback(() => {\n    if (isDismissable) {\n      handleOpenChange(false);\n    }\n  }, [isDismissable, handleOpenChange]);\n\n  // Register overlay panel with Layout context for coordinated dismissal\n  const { registerOverlayPanel } = layoutActions;\n\n  useEffect(() => {\n    // Only register if in overlay mode, open, and dismissable\n    if (isOverlayMode && isOpen && isDismissable) {\n      const unregister = registerOverlayPanel(() => handleOpenChange(false));\n      return unregister;\n    }\n  }, [\n    isOverlayMode,\n    isOpen,\n    isDismissable,\n    registerOverlayPanel,\n    handleOpenChange,\n  ]);\n\n  const handleDialogOpenChange = useCallback(\n    (newIsOpen: boolean) => {\n      setInternalIsDialogOpen(newIsOpen);\n      onDialogOpenChange?.(newIsOpen);\n    },\n    [onDialogOpenChange],\n  );\n\n  // Panel context value for child components (like LayoutPanelHeader)\n  const panelContextValue = useMemo(\n    () => ({\n      onOpenChange: handleOpenChange,\n      isOpen,\n    }),\n    [handleOpenChange, isOpen],\n  );\n\n  // Dialog mode context value - uses dialog state instead of panel state\n  const dialogPanelContextValue = useMemo(\n    () => ({\n      onOpenChange: handleDialogOpenChange,\n      isOpen: dialogOpen,\n    }),\n    [handleDialogOpenChange, dialogOpen],\n  );\n\n  const panelMods = useMemo(\n    () => ({\n      side,\n      drag: isDragging,\n      horizontal: isHorizontal,\n      // Only enable transition after layout is ready to prevent initial animation\n      'has-transition': hasTransition && isReady,\n      ...mods,\n    }),\n    [side, isDragging, isHorizontal, hasTransition, isReady, mods],\n  );\n\n  // Build --max-size CSS variable combining user maxSize and natural boundary\n  const maxSizeCss = useMemo(() => {\n    const parts: string[] = [];\n\n    if (maxSize != null) {\n      parts.push(typeof maxSize === 'number' ? `${maxSize}px` : maxSize);\n    }\n\n    if (containerDimension > 0 && Number.isFinite(naturalMax)) {\n      parts.push(`${naturalMax}px`);\n    }\n\n    if (parts.length === 0) return undefined;\n    return parts.length === 1 ? parts[0] : `min(${parts.join(', ')})`;\n  }, [maxSize, naturalMax, containerDimension]);\n\n  const panelStyle = useMemo(\n    () => ({\n      '--panel-size': `${size}px`,\n      '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n      '--max-size': maxSizeCss,\n    }),\n    [size, minSize, maxSizeCss],\n  );\n\n  // Combine refs for panel element\n  const panelRefCallback = useCallback(\n    (node: HTMLDivElement | null, transitionRef?: RefCallback<HTMLElement>) => {\n      // Update the combined ref\n      (combinedRef as { current: HTMLDivElement | null }).current = node;\n      // Call transition ref if provided\n      transitionRef?.(node);\n    },\n    [combinedRef],\n  );\n\n  // Reset to default size on double-click\n  const handleResetSize = useCallback(() => {\n    const resetSize =\n      typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n    const clampedSize = clampValue(resetSize || 280);\n    setSize(clampedSize);\n    onSizeChange?.(clampedSize);\n    setStoredSize(clampedSize);\n  }, [defaultSize, clampValue, onSizeChange, setStoredSize]);\n\n  const renderPanelContent = (\n    offscreen = false,\n    transitionRef?: RefCallback<HTMLElement>,\n  ) => {\n    const showOverlay = isOverlayMode && !offscreen;\n\n    return (\n      <>\n        {/* Overlay backdrop for overlay mode */}\n        {isOverlayMode && (\n          <OverlayBackdrop\n            mods={{ visible: showOverlay }}\n            styles={overlayStyles}\n            aria-hidden=\"true\"\n            onClick={handleDismiss}\n          />\n        )}\n        <PanelElement\n          ref={(node: HTMLDivElement | null) =>\n            panelRefCallback(node, transitionRef)\n          }\n          {...filterBaseProps(otherProps, { eventProps: true })}\n          mods={{ ...panelMods, offscreen }}\n          styles={finalStyles}\n          style={panelStyle}\n          data-side={side}\n        >\n          <LayoutPanelContext.Provider value={panelContextValue}>\n            <LayoutContextReset>{children}</LayoutContextReset>\n          </LayoutPanelContext.Provider>\n        </PanelElement>\n        {isResizable && (\n          <ResizeHandler\n            side={side}\n            isDisabled={!isResizable}\n            mods={{\n              drag: isDragging,\n              offscreen,\n              'has-transition': hasTransition && isReady,\n            }}\n            moveProps={moveProps}\n            style={panelStyle}\n            onDoubleClick={handleResetSize}\n          />\n        )}\n      </>\n    );\n  };\n\n  // Dialog mode - uses its own portal via DialogContainer\n  if (isDialogMode) {\n    return (\n      <DialogContainer\n        isOpen={dialogOpen}\n        isDismissable={isDismissable}\n        onDismiss={() => handleDialogOpenChange(false)}\n        {...dialogProps}\n      >\n        <Dialog isDismissable={false}>\n          <LayoutPanelContext.Provider value={dialogPanelContextValue}>\n            <LayoutContextReset>{children}</LayoutContextReset>\n          </LayoutPanelContext.Provider>\n        </Dialog>\n      </DialogContainer>\n    );\n  }\n\n  // Wait for portal container to be ready before rendering\n  if (!layoutRefs.isPanelContainerReady) {\n    return null;\n  }\n\n  const portalContainer = layoutRefs.panelContainerRef.current!;\n\n  // Panel with transition - portal to panel container\n  if (hasTransition) {\n    return createPortal(\n      <DisplayTransition isShown={isOpen} animateOnMount={false}>\n        {({ isShown, ref: transitionRef }) =>\n          renderPanelContent(!isShown, transitionRef)\n        }\n      </DisplayTransition>,\n      portalContainer,\n    );\n  }\n\n  // Simple panel (no transition) - portal to panel container\n  if (!isOpen) return null;\n\n  return createPortal(renderPanelContent(false), portalContainer);\n}\n\nconst _LayoutPanel = forwardRef(LayoutPanel);\n\n_LayoutPanel.displayName = 'Layout.Panel';\n\nexport { _LayoutPanel as LayoutPanel };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { _Item } from "../Item/Item.js";
@@ -6,8 +6,9 @@ import { useI18n } from "../../../i18n/useI18n.js";
 import { useDialogContext } from "../../overlays/Dialog/context.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { useLayoutPanelContext } from "./LayoutContext.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
-import { forwardRef, useCallback } from "react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/content/Layout/LayoutPanelHeader.tsx
@@ -22,34 +23,95 @@ const PanelHeaderElement = tasty(_Item, {
 	}
 });
 function LayoutPanelHeader(props, ref) {
+	const $ = c(24);
 	const { t } = useI18n();
-	const { title, level = 3, isClosable, onClose, actions, children, ...otherProps } = props;
-	const styles = extractStyles(otherProps, CONTAINER_STYLES);
+	let actions;
+	let children;
+	let isClosable;
+	let level;
+	let onClose;
+	let otherProps;
+	let t0;
+	let title;
+	if ($[0] !== props) {
+		const { title: t1, level: t2, isClosable: t3, onClose: t4, actions: t5, children: t6, ...t7 } = props;
+		title = t1;
+		isClosable = t3;
+		onClose = t4;
+		actions = t5;
+		children = t6;
+		otherProps = t7;
+		level = t2 === void 0 ? 3 : t2;
+		t0 = extractStyles(otherProps, CONTAINER_STYLES);
+		$[0] = props;
+		$[1] = actions;
+		$[2] = children;
+		$[3] = isClosable;
+		$[4] = level;
+		$[5] = onClose;
+		$[6] = otherProps;
+		$[7] = t0;
+		$[8] = title;
+	} else {
+		actions = $[1];
+		children = $[2];
+		isClosable = $[3];
+		level = $[4];
+		onClose = $[5];
+		otherProps = $[6];
+		t0 = $[7];
+		title = $[8];
+	}
+	const styles = t0;
 	const dialogContext = useDialogContext();
 	const panelContext = useLayoutPanelContext();
-	const handleClose = useCallback(() => {
-		onClose?.();
-		panelContext?.onOpenChange(false);
-		dialogContext?.onClose?.();
-	}, [
-		onClose,
-		panelContext,
-		dialogContext
-	]);
-	const closeAction = isClosable ? /* @__PURE__ */ jsx(ItemAction, {
-		icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-		"aria-label": t("layout.closePanel", "Close panel"),
-		onPress: handleClose
-	}) : null;
-	return /* @__PURE__ */ jsx(PanelHeaderElement, {
-		ref,
-		level,
-		size: "large",
-		actions: actions ?? closeAction,
-		styles,
-		...otherProps,
-		children: title ?? children
-	});
+	let t1;
+	if ($[9] !== dialogContext || $[10] !== onClose || $[11] !== panelContext) {
+		t1 = () => {
+			onClose?.();
+			panelContext?.onOpenChange(false);
+			dialogContext?.onClose?.();
+		};
+		$[9] = dialogContext;
+		$[10] = onClose;
+		$[11] = panelContext;
+		$[12] = t1;
+	} else t1 = $[12];
+	const handleClose = t1;
+	let t2;
+	if ($[13] !== handleClose || $[14] !== isClosable || $[15] !== t) {
+		t2 = isClosable ? /* @__PURE__ */ jsx(ItemAction, {
+			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+			"aria-label": t("layout.closePanel", "Close panel"),
+			onPress: handleClose
+		}) : null;
+		$[13] = handleClose;
+		$[14] = isClosable;
+		$[15] = t;
+		$[16] = t2;
+	} else t2 = $[16];
+	const finalActions = actions ?? t2;
+	const t3 = title ?? children;
+	let t4;
+	if ($[17] !== finalActions || $[18] !== level || $[19] !== otherProps || $[20] !== ref || $[21] !== styles || $[22] !== t3) {
+		t4 = /* @__PURE__ */ jsx(PanelHeaderElement, {
+			ref,
+			level,
+			size: "large",
+			actions: finalActions,
+			styles,
+			...otherProps,
+			children: t3
+		});
+		$[17] = finalActions;
+		$[18] = level;
+		$[19] = otherProps;
+		$[20] = ref;
+		$[21] = styles;
+		$[22] = t3;
+		$[23] = t4;
+	} else t4 = $[23];
+	return t4;
 }
 const _LayoutPanelHeader = forwardRef(LayoutPanelHeader);
 _LayoutPanelHeader.displayName = "Layout.PanelHeader";

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutPanelHeader.js","names":["Item"],"sources":["../../../../src/components/content/Layout/LayoutPanelHeader.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { useDialogContext } from '../../overlays/Dialog/context';\nimport { CubeItemProps, Item } from '../Item/Item';\n\nimport { useLayoutPanelContext } from './LayoutContext';\n\nconst PanelHeaderElement = tasty(Item, {\n  qa: 'PanelHeader',\n  shape: 'sharp',\n  type: 'header',\n  styles: {\n    border: 'bottom',\n    boxSizing: 'content-box',\n\n    '$inline-padding': '($content-padding, 1x)',\n  },\n});\n\nexport interface CubeLayoutPanelHeaderProps\n  extends Omit<BaseProps, 'theme'>,\n    ContainerStyleProps,\n    CubeItemProps {\n  /** Panel title */\n  title?: ReactNode;\n  /** Title heading level (affects semantics, not visual) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Show close button */\n  isClosable?: boolean;\n  /** Close button click handler */\n  onClose?: () => void;\n}\n\nfunction LayoutPanelHeader(\n  props: CubeLayoutPanelHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  const {\n    title,\n    level = 3,\n    isClosable,\n    onClose,\n    actions,\n    children,\n    ...otherProps\n  } = props;\n\n  // Extract container styles\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Access dialog context if in dialog mode\n  const dialogContext = useDialogContext();\n  // Access panel context to update panel open state\n  const panelContext = useLayoutPanelContext();\n\n  // Close handler that works for both panel and dialog modes\n  const handleClose = useCallback(() => {\n    // Call user-provided onClose callback\n    onClose?.();\n    // Update panel's internal open state\n    panelContext?.onOpenChange(false);\n    // If in dialog mode, also close the dialog\n    dialogContext?.onClose?.();\n  }, [onClose, panelContext, dialogContext]);\n\n  const closeAction = isClosable ? (\n    <ItemAction\n      icon={<CloseIcon />}\n      aria-label={t('layout.closePanel', 'Close panel')}\n      onPress={handleClose}\n    />\n  ) : null;\n\n  const finalActions = actions ?? closeAction;\n\n  return (\n    <PanelHeaderElement\n      ref={ref}\n      level={level}\n      size=\"large\"\n      actions={finalActions}\n      styles={styles}\n      {...otherProps}\n    >\n      {title ?? children}\n    </PanelHeaderElement>\n  );\n}\n\nconst _LayoutPanelHeader = forwardRef(LayoutPanelHeader);\n\n_LayoutPanelHeader.displayName = 'Layout.PanelHeader';\n\nexport { _LayoutPanelHeader as LayoutPanelHeader };\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,qBAAqB,MAAMA,OAAM;CACrC,IAAI;CACJ,OAAO;CACP,MAAM;CACN,QAAQ;EACN,QAAQ;EACR,WAAW;EAEX,mBAAmB;EACpB;CACF,CAAC;AAgBF,SAAS,kBACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,EACJ,OACA,QAAQ,GACR,YACA,SACA,SACA,UACA,GAAG,eACD;CAGJ,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAG1D,MAAM,gBAAgB,kBAAkB;CAExC,MAAM,eAAe,uBAAuB;CAG5C,MAAM,cAAc,kBAAkB;AAEpC,aAAW;AAEX,gBAAc,aAAa,MAAM;AAEjC,iBAAe,WAAW;IACzB;EAAC;EAAS;EAAc;EAAc,CAAC;CAE1C,MAAM,cAAc,aAClB,oBAAC;EACC,MAAM,oBAAC,cAAY;EACnB,cAAY,EAAE,qBAAqB,cAAc;EACjD,SAAS;GACT,GACA;AAIJ,QACE,oBAAC;EACM;EACE;EACP,MAAK;EACL,SAPiB,WAAW;EAQpB;EACR,GAAI;YAEH,SAAS;GACS;;AAIzB,MAAM,qBAAqB,WAAW,kBAAkB;AAExD,mBAAmB,cAAc"}
+{"version":3,"file":"LayoutPanelHeader.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","tasty","ForwardedRef","forwardRef","ReactNode","useCallback","useI18n","CloseIcon","extractStyles","ItemAction","useDialogContext","CubeItemProps","Item","useLayoutPanelContext","PanelHeaderElement","qa","shape","type","styles","border","boxSizing","CubeLayoutPanelHeaderProps","Omit","title","level","isClosable","onClose","LayoutPanelHeader","props","ref","$","_c","t","actions","children","otherProps","t0","t1","t2","t3","t4","t5","t6","t7","undefined","dialogContext","panelContext","onOpenChange","handleClose","closeAction","finalActions","_LayoutPanelHeader","displayName"],"sources":["../../../../src/components/content/Layout/LayoutPanelHeader.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { useDialogContext } from '../../overlays/Dialog/context';\nimport { CubeItemProps, Item } from '../Item/Item';\n\nimport { useLayoutPanelContext } from './LayoutContext';\n\nconst PanelHeaderElement = tasty(Item, {\n  qa: 'PanelHeader',\n  shape: 'sharp',\n  type: 'header',\n  styles: {\n    border: 'bottom',\n    boxSizing: 'content-box',\n\n    '$inline-padding': '($content-padding, 1x)',\n  },\n});\n\nexport interface CubeLayoutPanelHeaderProps\n  extends Omit<BaseProps, 'theme'>,\n    ContainerStyleProps,\n    CubeItemProps {\n  /** Panel title */\n  title?: ReactNode;\n  /** Title heading level (affects semantics, not visual) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Show close button */\n  isClosable?: boolean;\n  /** Close button click handler */\n  onClose?: () => void;\n}\n\nfunction LayoutPanelHeader(\n  props: CubeLayoutPanelHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  const {\n    title,\n    level = 3,\n    isClosable,\n    onClose,\n    actions,\n    children,\n    ...otherProps\n  } = props;\n\n  // Extract container styles\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Access dialog context if in dialog mode\n  const dialogContext = useDialogContext();\n  // Access panel context to update panel open state\n  const panelContext = useLayoutPanelContext();\n\n  // Close handler that works for both panel and dialog modes\n  const handleClose = useCallback(() => {\n    // Call user-provided onClose callback\n    onClose?.();\n    // Update panel's internal open state\n    panelContext?.onOpenChange(false);\n    // If in dialog mode, also close the dialog\n    dialogContext?.onClose?.();\n  }, [onClose, panelContext, dialogContext]);\n\n  const closeAction = isClosable ? (\n    <ItemAction\n      icon={<CloseIcon />}\n      aria-label={t('layout.closePanel', 'Close panel')}\n      onPress={handleClose}\n    />\n  ) : null;\n\n  const finalActions = actions ?? closeAction;\n\n  return (\n    <PanelHeaderElement\n      ref={ref}\n      level={level}\n      size=\"large\"\n      actions={finalActions}\n      styles={styles}\n      {...otherProps}\n    >\n      {title ?? children}\n    </PanelHeaderElement>\n  );\n}\n\nconst _LayoutPanelHeader = forwardRef(LayoutPanelHeader);\n\n_LayoutPanelHeader.displayName = 'Layout.PanelHeader';\n\nexport { _LayoutPanelHeader as LayoutPanelHeader };\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAMgB,qBAAqBb,MAAMW,OAAM;CACrCG,IAAI;CACJC,OAAO;CACPC,MAAM;CACNC,QAAQ;EACNC,QAAQ;EACRC,WAAW;EAEX,mBAAmB;EACrB;CACD,CAAC;AAgBF,SAAAO,kBAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAIE,MAAA,EAAAC,MAAc1B,SAAS;CAAC,IAAA2B;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAD;CAAA,IAAAE;CAAA,IAAAS;CAAA,IAAAC;CAAA,IAAAb;AAAA,KAAAO,EAAA,OAAAF,OAAA;EAExB,MAAA,EAAAL,OAAAc,IAAAb,OAAAc,IAAAb,YAAAc,IAAAb,SAAAc,IAAAP,SAAAQ,IAAAP,UAAAQ,IAAA,GAAAC,OAQIf;AARJL,UAAAc;AAAAZ,eAAAc;AAAAb,YAAAc;AAAAP,YAAAQ;AAAAP,aAAAQ;AAAAP,eAAAQ;AAEEnB,UAAAc,OAAAM,SAAA,IAAAN;AASaF,OAAA5B,cAAc2B,YAAYpC,iBAAiB;AAAA+B,IAAA,KAAAF;AAAAE,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAL;AAAAK,IAAA,KAAAN;AAAAM,IAAA,KAAAJ;AAAAI,IAAA,KAAAK;AAAAL,IAAA,KAAAM;AAAAN,IAAA,KAAAP;QAAA;AAAAU,YAAAH,EAAA;AAAAI,aAAAJ,EAAA;AAAAL,eAAAK,EAAA;AAAAN,UAAAM,EAAA;AAAAJ,YAAAI,EAAA;AAAAK,eAAAL,EAAA;AAAAM,OAAAN,EAAA;AAAAP,UAAAO,EAAA;;CAA1D,MAAAZ,SAAekB;CAGf,MAAAS,gBAAsBnC,kBAAkB;CAExC,MAAAoC,eAAqBjC,uBAAuB;CAAC,IAAAwB;AAAA,KAAAP,EAAA,OAAAe,iBAAAf,EAAA,QAAAJ,WAAAI,EAAA,QAAAgB,cAAA;AAGbT,aAAA;AAE9BX,cAAW;AAEXoB,iBAAYC,aAAe,MAAM;AAEjCF,kBAAanB,WAAa;;AAC3BI,IAAA,KAAAe;AAAAf,IAAA,MAAAJ;AAAAI,IAAA,MAAAgB;AAAAhB,IAAA,MAAAO;OAAAA,MAAAP,EAAA;CAPD,MAAAkB,cAAoBX;CAOuB,IAAAC;AAAA,KAAAR,EAAA,QAAAkB,eAAAlB,EAAA,QAAAL,cAAAK,EAAA,QAAAE,GAAA;AAEvBM,OAAAb,aAClB,oBAAC;GACO,MAAA,oBAAC,cAAW;GACN,cAAAO,EAAE,qBAAqB,cAAa;GACvCgB,SAAAA;IAEL,GANY;AAMZlB,IAAA,MAAAkB;AAAAlB,IAAA,MAAAL;AAAAK,IAAA,MAAAE;AAAAF,IAAA,MAAAQ;OAAAA,MAAAR,EAAA;CAER,MAAAoB,eAAqBjB,WARDK;CAmBf,MAAAC,KAAAhB,SAAAW;CAAiB,IAAAM;AAAA,KAAAV,EAAA,QAAAoB,gBAAApB,EAAA,QAAAN,SAAAM,EAAA,QAAAK,cAAAL,EAAA,QAAAD,OAAAC,EAAA,QAAAZ,UAAAY,EAAA,QAAAS,IAAA;AARpBC,OAAA,oBAAC;GACMX;GACEL;GACF,MAAA;GACI0B,SAAAA;GACDhC;GAAM,GACViB;aAEHI;IACkB;AAAAT,IAAA,MAAAoB;AAAApB,IAAA,MAAAN;AAAAM,IAAA,MAAAK;AAAAL,IAAA,MAAAD;AAAAC,IAAA,MAAAZ;AAAAY,IAAA,MAAAS;AAAAT,IAAA,MAAAU;OAAAA,MAAAV,EAAA;AAAA,QATrBU;;AAaJ,MAAMW,qBAAqBhD,WAAWwB,kBAAkB;AAExDwB,mBAAmBC,cAAc"}

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -24,13 +25,37 @@ const ToolbarElement = tasty(_LayoutContent, {
 	}
 });
 function LayoutToolbar(props, ref) {
-	const { children, scrollbar = "tiny", ...otherProps } = props;
-	return /* @__PURE__ */ jsx(ToolbarElement, {
-		...otherProps,
-		ref,
-		scrollbar,
-		children
-	});
+	const $ = c(9);
+	let children;
+	let otherProps;
+	let t0;
+	if ($[0] !== props) {
+		({children, scrollbar: t0, ...otherProps} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = otherProps;
+		$[3] = t0;
+	} else {
+		children = $[1];
+		otherProps = $[2];
+		t0 = $[3];
+	}
+	const scrollbar = t0 === void 0 ? "tiny" : t0;
+	let t1;
+	if ($[4] !== children || $[5] !== otherProps || $[6] !== ref || $[7] !== scrollbar) {
+		t1 = /* @__PURE__ */ jsx(ToolbarElement, {
+			...otherProps,
+			ref,
+			scrollbar,
+			children
+		});
+		$[4] = children;
+		$[5] = otherProps;
+		$[6] = ref;
+		$[7] = scrollbar;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
 }
 const _LayoutToolbar = forwardRef(LayoutToolbar);
 _LayoutToolbar.displayName = "Layout.Toolbar";

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutToolbar.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutToolbar.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst ToolbarElement = tasty(LayoutContent, {\n  qa: 'Toolbar',\n  role: 'toolbar',\n  styles: {\n    container: 'none',\n    height: 'min 5x',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'flex',\n      flow: 'row nowrap',\n      placeContent: 'center space-between',\n      placeItems: 'center stretch',\n      gap: '1x',\n      padding: '0 ($content-padding, 1x)',\n    },\n  },\n});\n\nexport interface CubeLayoutToolbarProps extends CubeLayoutContentProps {}\n\nfunction LayoutToolbar(\n  props: CubeLayoutToolbarProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <ToolbarElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </ToolbarElement>\n  );\n}\n\nconst _LayoutToolbar = forwardRef(LayoutToolbar);\n\n_LayoutToolbar.displayName = 'Layout.Toolbar';\n\nexport { _LayoutToolbar as LayoutToolbar };\n"],"mappings":";;;;;;;AAKA,MAAM,iBAAiB,MAAMA,gBAAe;CAC1C,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,WAAW;EACX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,SAAS;GACT,MAAM;GACN,cAAc;GACd,YAAY;GACZ,KAAK;GACL,SAAS;GACV;EACF;CACF,CAAC;AAIF,SAAS,cACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,YAAY,QAAQ,GAAG,eAAe;AAExD,QACE,oBAAC;EAAe,GAAI;EAAiB;EAAgB;EAClD;GACc;;AAIrB,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}
+{"version":3,"file":"LayoutToolbar.js","names":["tasty","ForwardedRef","forwardRef","CubeLayoutContentProps","LayoutContent","ToolbarElement","qa","role","styles","container","height","flexShrink","flexGrow","Inner","display","flow","placeContent","placeItems","gap","padding","CubeLayoutToolbarProps","LayoutToolbar","props","ref","$","_c","children","otherProps","t0","scrollbar","undefined","t1","_LayoutToolbar","displayName"],"sources":["../../../../src/components/content/Layout/LayoutToolbar.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst ToolbarElement = tasty(LayoutContent, {\n  qa: 'Toolbar',\n  role: 'toolbar',\n  styles: {\n    container: 'none',\n    height: 'min 5x',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'flex',\n      flow: 'row nowrap',\n      placeContent: 'center space-between',\n      placeItems: 'center stretch',\n      gap: '1x',\n      padding: '0 ($content-padding, 1x)',\n    },\n  },\n});\n\nexport interface CubeLayoutToolbarProps extends CubeLayoutContentProps {}\n\nfunction LayoutToolbar(\n  props: CubeLayoutToolbarProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <ToolbarElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </ToolbarElement>\n  );\n}\n\nconst _LayoutToolbar = forwardRef(LayoutToolbar);\n\n_LayoutToolbar.displayName = 'Layout.Toolbar';\n\nexport { _LayoutToolbar as LayoutToolbar };\n"],"mappings":";;;;;;;;AAKA,MAAMK,iBAAiBL,MAAMI,gBAAe;CAC1CE,IAAI;CACJC,MAAM;CACNC,QAAQ;EACNC,WAAW;EACXC,QAAQ;EACRC,YAAY;EACZC,UAAU;EAEVC,OAAO;GACLC,SAAS;GACTC,MAAM;GACNC,cAAc;GACdC,YAAY;GACZC,KAAK;GACLC,SAAS;GACX;EACF;CACD,CAAC;AAIF,SAAAE,cAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAJ,EAAA,OAAAF,OAAA;AAIE,GAAA,CAAAI,UAAAG,WAAAD,OAAAD,cAAwDL;AAAME,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAI;QAAA;AAAAF,aAAAF,EAAA;AAAAG,eAAAH,EAAA;AAAAI,OAAAJ,EAAA;;CAA5C,MAAAK,YAAAD,OAAAE,SAAA,SAAAF;CAAkB,IAAAG;AAAA,KAAAP,EAAA,OAAAE,YAAAF,EAAA,OAAAG,cAAAH,EAAA,OAAAD,OAAAC,EAAA,OAAAK,WAAA;AAGlCE,OAAA,oBAAC;GAAc,GAAKJ;GAAiBJ;GAAgBM;GAClDH;IACc;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAD;AAAAC,IAAA,KAAAK;AAAAL,IAAA,KAAAO;OAAAA,MAAAP,EAAA;AAAA,QAFjBO;;AAMJ,MAAMC,iBAAiB9B,WAAWmB,cAAc;AAEhDW,eAAeC,cAAc"}