@cube-dev/ui-kit 0.0.0-canary-6cac05d → 0.0.0-canary-88ada42

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: '#white',\n\n    // Transition styles - offscreen mod controls slide animation\n    transform: {\n      '': 'translateX(0) translateY(0)',\n      'offscreen & side=left': 'translateX(-100%)',\n      'offscreen & side=right': 'translateX(100%)',\n      'offscreen & side=top': 'translateY(-100%)',\n      'offscreen & side=bottom': 'translateY(100%)',\n    },\n    transition: {\n      '': 'none',\n      'has-transition': 'transform $transition ease-out',\n    },\n  },\n});\n\n// Handler is positioned as sibling to panel (in Fragment), relative to Layout\nconst ResizeHandlerElement = tasty({\n  qa: 'PanelResizeHandler',\n  styles: {\n    position: 'absolute',\n\n    // Handler size\n    width: {\n      '': '100%',\n      horizontal: `${HANDLER_WIDTH}px`,\n      'disabled & horizontal': '1bw',\n    },\n    height: {\n      '': `${HANDLER_WIDTH}px`,\n      horizontal: '100%',\n      'disabled & !horizontal': '1bw',\n    },\n\n    // Position handler with direct offset (no centering needed)\n    top: {\n      '': 0,\n      'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=bottom': 'initial',\n    },\n    bottom: {\n      '': 0,\n      'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=top': 'initial',\n    },\n    left: {\n      '': 0,\n      'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=right': 'initial',\n    },\n    right: {\n      '': 0,\n      'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n      'side=left': 'initial',\n    },\n\n    // Offscreen transforms only (no centering needed with direct offset positioning)\n    transform: {\n      '': '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: '#dark-04',\n      },\n    },\n  },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n  qa: 'PanelOverlay',\n  styles: {\n    position: 'absolute',\n    inset: 0,\n    // fill: '#white.2',\n    backdropFilter: 'invert(.15)',\n    cursor: 'pointer',\n    opacity: {\n      '': 0,\n      visible: 1,\n    },\n    pointerEvents: {\n      '': 'none',\n      visible: 'auto',\n    },\n    transition: 'opacity .15s ease-out',\n  },\n});\n\ninterface ResizeHandlerProps {\n  side: Side;\n  isDisabled?: boolean;\n  mods?: Record<string, boolean>;\n  moveProps: ReturnType<typeof useMove>['moveProps'];\n  style?: Record<string, string | number | null | undefined>;\n  onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n  const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const isHorizontal = side === 'left' || side === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <ResizeHandlerElement\n      {...mergeProps(hoverProps, focusProps, moveProps, {\n        mods: {\n          hovered: localIsHovered,\n          horizontal: isHorizontal,\n          disabled: isDisabled,\n          focused: isFocusVisible,\n          side,\n          ...mods,\n        },\n        style,\n        tabIndex: isDisabled ? undefined : 0,\n        role: 'separator',\n        'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n        'aria-label': `Resize ${side} panel`,\n        onDoubleClick: isDisabled ? undefined : onDoubleClick,\n      })}\n    >\n      <div data-element=\"Track\" />\n      {!isDisabled && (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      )}\n    </ResizeHandlerElement>\n  );\n}\n\n/** Panel rendering mode */\nexport type LayoutPanelMode = 'default' | 'sticky' | 'overlay' | 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n  /** Side of the layout where panel is positioned */\n  side: Side;\n  /**\n   * Panel rendering mode:\n   * - `default`: Standard panel that pushes content aside\n   * - `sticky`: Panel floats over content without pushing it\n   * - `overlay`: Panel with dismissable backdrop overlay\n   * - `dialog`: Panel renders as a modal dialog\n   */\n  mode?: LayoutPanelMode;\n  /** Panel size (width for left/right, height for top/bottom) - controlled */\n  size?: number | string;\n  /** Default panel size for uncontrolled state */\n  defaultSize?: number | string;\n  /** Minimum panel size */\n  minSize?: number | string;\n  /** Maximum panel size */\n  maxSize?: number | string;\n  /** Enable resize functionality */\n  isResizable?: boolean;\n  /** Size change callback */\n  onSizeChange?: (size: number) => void;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Default open state */\n  defaultIsOpen?: boolean;\n  /** Open state change callback */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Enable slide transition on open/close */\n  hasTransition?: boolean;\n  /**\n   * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.\n   * Only applies to `overlay` and `dialog` modes. Default: true\n   */\n  isDismissable?: boolean;\n  /** Styles for the overlay backdrop in overlay mode */\n  overlayStyles?: Styles;\n  /**\n   * @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n   */\n  isDialog?: boolean;\n  /** Controlled dialog open state (used with mode=\"dialog\") */\n  isDialogOpen?: boolean;\n  /** Default dialog open state */\n  defaultIsDialogOpen?: boolean;\n  /** Dialog open state change callback */\n  onDialogOpenChange?: (isOpen: boolean) => void;\n  /** Props passed to Dialog component when in dialog mode */\n  dialogProps?: Omit<\n    CubeDialogContainerProps,\n    'isDismissable' | 'onDismiss' | 'isOpen'\n  >;\n  /** Padding for content areas inside the panel. Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */\n  sizeStorageKey?: string;\n  /** Styles for the panel */\n  styles?: Styles;\n  children?: ReactNode;\n}\n\nfunction LayoutPanel(\n  props: CubeLayoutPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n\n  if (!layoutActions || !layoutState || !layoutRefs) {\n    throw new Error(\n      'Layout.Panel must be used within a Layout component. ' +\n        'Ensure your panel is rendered inside a <Layout> parent.',\n    );\n  }\n\n  const {\n    side = 'left',\n    mode: modeProp,\n    size: providedSize,\n    defaultSize = 280,\n    minSize = 200,\n    maxSize,\n    isResizable = false,\n    onSizeChange,\n    isOpen: providedIsOpen,\n    defaultIsOpen = true,\n    onOpenChange,\n    hasTransition: hasTransitionProp,\n    isDismissable = true,\n    overlayStyles,\n    // Deprecated prop - use mode=\"dialog\" instead\n    isDialog = false,\n    isDialogOpen: providedIsDialogOpen,\n    defaultIsDialogOpen = false,\n    onDialogOpenChange,\n    dialogProps,\n    contentPadding,\n    sizeStorageKey,\n    children,\n    styles,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Resolve mode from prop or deprecated isDialog\n  const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n  const isDialogMode = mode === 'dialog';\n  const isOverlayMode = mode === 'overlay';\n  const isStickyMode = mode === 'sticky';\n\n  // Use prop value if provided, otherwise fall back to context value\n  const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n  const combinedRef = useCombinedRefs(ref);\n  const prevProvidedSizeRef = useRef(providedSize);\n  const isHorizontal = side === 'left' || side === 'right';\n\n  // 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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"}
+{"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: '#dark-04',\n      },\n    },\n  },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n  qa: 'PanelOverlay',\n  styles: {\n    position: 'absolute',\n    inset: 0,\n    // fill: '#white.2',\n    backdropFilter: 'invert(.15)',\n    cursor: 'pointer',\n    opacity: {\n      '': 0,\n      visible: 1,\n    },\n    pointerEvents: {\n      '': 'none',\n      visible: 'auto',\n    },\n    transition: 'opacity .15s ease-out',\n  },\n});\n\ninterface ResizeHandlerProps {\n  side: Side;\n  isDisabled?: boolean;\n  mods?: Record<string, boolean>;\n  moveProps: ReturnType<typeof useMove>['moveProps'];\n  style?: Record<string, string | number | null | undefined>;\n  onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n  const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const isHorizontal = side === 'left' || side === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <ResizeHandlerElement\n      {...mergeProps(hoverProps, focusProps, moveProps, {\n        mods: {\n          hovered: localIsHovered,\n          horizontal: isHorizontal,\n          disabled: isDisabled,\n          focused: isFocusVisible,\n          side,\n          ...mods,\n        },\n        style,\n        tabIndex: isDisabled ? undefined : 0,\n        role: 'separator',\n        'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n        'aria-label': `Resize ${side} panel`,\n        onDoubleClick: isDisabled ? undefined : onDoubleClick,\n      })}\n    >\n      <div data-element=\"Track\" />\n      {!isDisabled && (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      )}\n    </ResizeHandlerElement>\n  );\n}\n\n/** Panel rendering mode */\nexport type LayoutPanelMode = 'default' | 'sticky' | 'overlay' | 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n  /** Side of the layout where panel is positioned */\n  side: Side;\n  /**\n   * Panel rendering mode:\n   * - `default`: Standard panel that pushes content aside\n   * - `sticky`: Panel floats over content without pushing it\n   * - `overlay`: Panel with dismissable backdrop overlay\n   * - `dialog`: Panel renders as a modal dialog\n   */\n  mode?: LayoutPanelMode;\n  /** Panel size (width for left/right, height for top/bottom) - controlled */\n  size?: number | string;\n  /** Default panel size for uncontrolled state */\n  defaultSize?: number | string;\n  /** Minimum panel size */\n  minSize?: number | string;\n  /** Maximum panel size */\n  maxSize?: number | string;\n  /** Enable resize functionality */\n  isResizable?: boolean;\n  /** Size change callback */\n  onSizeChange?: (size: number) => void;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Default open state */\n  defaultIsOpen?: boolean;\n  /** Open state change callback */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Enable slide transition on open/close */\n  hasTransition?: boolean;\n  /**\n   * Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.\n   * Only applies to `overlay` and `dialog` modes. Default: true\n   */\n  isDismissable?: boolean;\n  /** Styles for the overlay backdrop in overlay mode */\n  overlayStyles?: Styles;\n  /**\n   * @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n   */\n  isDialog?: boolean;\n  /** Controlled dialog open state (used with mode=\"dialog\") */\n  isDialogOpen?: boolean;\n  /** Default dialog open state */\n  defaultIsDialogOpen?: boolean;\n  /** Dialog open state change callback */\n  onDialogOpenChange?: (isOpen: boolean) => void;\n  /** Props passed to Dialog component when in dialog mode */\n  dialogProps?: Omit<\n    CubeDialogContainerProps,\n    'isDismissable' | 'onDismiss' | 'isOpen'\n  >;\n  /** Padding for content areas inside the panel. Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** localStorage key for persisting panel size. When provided, size is stored and restored across instances. */\n  sizeStorageKey?: string;\n  /** Styles for the panel */\n  styles?: Styles;\n  children?: ReactNode;\n}\n\nfunction LayoutPanel(\n  props: CubeLayoutPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n\n  if (!layoutActions || !layoutState || !layoutRefs) {\n    throw new Error(\n      'Layout.Panel must be used within a Layout component. ' +\n        'Ensure your panel is rendered inside a <Layout> parent.',\n    );\n  }\n\n  const {\n    side = 'left',\n    mode: modeProp,\n    size: providedSize,\n    defaultSize = 280,\n    minSize = 200,\n    maxSize,\n    isResizable = false,\n    onSizeChange,\n    isOpen: providedIsOpen,\n    defaultIsOpen = true,\n    onOpenChange,\n    hasTransition: hasTransitionProp,\n    isDismissable = true,\n    overlayStyles,\n    // Deprecated prop - use mode=\"dialog\" instead\n    isDialog = false,\n    isDialogOpen: providedIsDialogOpen,\n    defaultIsDialogOpen = false,\n    onDialogOpenChange,\n    dialogProps,\n    contentPadding,\n    sizeStorageKey,\n    children,\n    styles,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Resolve mode from prop or deprecated isDialog\n  const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n  const isDialogMode = mode === 'dialog';\n  const isOverlayMode = mode === 'overlay';\n  const isStickyMode = mode === 'sticky';\n\n  // Use prop value if provided, otherwise fall back to context value\n  const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n  const combinedRef = useCombinedRefs(ref);\n  const prevProvidedSizeRef = useRef(providedSize);\n  const isHorizontal = side === 'left' || side === 'right';\n\n  // 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.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { _Item } from "../Item/Item.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/Layout/hooks/useTinyScrollbar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/components/content/Layout/hooks/useTinyScrollbar.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 //#region src/components/content/Layout/utils.ts
 /**
 * Clamps a size value within min/max constraints.

package/dist/components/content/Paragraph.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { _Text } from "./Text.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "@tenphi/tasty";

package/dist/components/content/Placeholder/Placeholder.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/PrismCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { jsx } from "react/jsx-runtime";
 import { diffLines } from "diff";

package/dist/components/content/Result/Result.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/content/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";

package/dist/components/content/Tag/Tag.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

package/dist/components/content/Tree/Tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -237,13 +237,20 @@ function TreeBase(props, ref) {
 		height: `${rowVirtualizer.getTotalSize()}px`
 	}), [rowVirtualizer.getTotalSize()]);
 	/**
-	* Track which key we last asked the virtualizer to scroll to. Both
-	* scroll effects (`focusedKey` for keyboard nav and the
-	* controlled-`selectedKeys` effect below) write to the same ref so
-	* we don't fire two `scrollToIndex` calls back-to-back when a click
-	* updates focus and selection in the same render.
+	* Each scroll effect tracks its own "last scrolled" target instead
+	* of sharing one ref. A shared ref creates a feedback loop: keyboard
+	* nav updates the focused-key ref to the new row, and any subsequent
+	* `visibleNodes` change OR `selectedKeys` array-identity change
+	* (very common — `selectedKeys={[value]}` allocates a fresh array
+	* every parent render) re-runs the selectedKeys effect, which sees
+	* the ref no longer matches `selectedKeys[0]` and yanks the viewport
+	* back to the selected row. Two refs let each effect dedupe against
+	* its own intent only; the cost is at most one duplicate
+	* `scrollToIndex` call when click updates focus and selection in the
+	* same render (idempotent — both target the same index).
 	*/
-	const lastScrolledKeyRef = useRef(null);
+	const lastFocusedScrollRef = useRef(null);
+	const lastSelectedScrollRef = useRef(null);
 	/**
 	* Keep the focused row visible during keyboard navigation.
 	*
@@ -256,11 +263,11 @@ function TreeBase(props, ref) {
 	useLayoutEffect(() => {
 		const focusedKey = state.selectionManager.focusedKey;
 		if (focusedKey == null) return;
-		if (lastScrolledKeyRef.current === focusedKey) return;
+		if (lastFocusedScrollRef.current === focusedKey) return;
 		const index = visibleNodesRef.current.findIndex((n) => n.key === focusedKey);
 		if (index < 0) return;
 		rowVirtualizer.scrollToIndex(index, { align: "auto" });
-		lastScrolledKeyRef.current = focusedKey;
+		lastFocusedScrollRef.current = focusedKey;
 	}, [state.selectionManager.focusedKey, rowVirtualizer]);
 	/**
 	* Scroll into view when controlled `selectedKeys` changes externally.
@@ -278,11 +285,11 @@ function TreeBase(props, ref) {
 		if (selectedKeys == null) return;
 		const target = selectedKeys[0];
 		if (target == null) return;
-		if (lastScrolledKeyRef.current === target) return;
+		if (lastSelectedScrollRef.current === target) return;
 		const index = visibleNodes.findIndex((n) => String(n.key) === target);
 		if (index < 0) return;
 		rowVirtualizer.scrollToIndex(index, { align: "auto" });
-		lastScrolledKeyRef.current = target;
+		lastSelectedScrollRef.current = target;
 	}, [
 		selectedKeys,
 		visibleNodes,

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","names":[],"sources":["../../../../src/components/content/Tree/Tree.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { OUTER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';\nimport { useTree } from 'react-aria';\nimport { Item, useTreeState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { SIZE_NAME_TO_KEY, SIZES } from '../../../tokens/sizes';\nimport { mergeRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { TreeElement, TreeScrollContainer } from './styled';\nimport { buildTreeIndex } from './tree-index';\nimport { TreeNode } from './TreeNode';\nimport { useCheckboxTree } from './use-checkbox-tree';\nimport { useLoadData } from './use-load-data';\n\nimport type { Key, Node, Selection } from '@react-types/shared';\nimport type {\n  CSSProperties,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport type {\n  CubeTreeNodeData,\n  CubeTreeProps,\n  TreeOnExpandInfo,\n  TreeOnSelectInfo,\n  TreeSelectionMode,\n} from './types';\n\n/**\n * Render an `<Item>` for React Stately's collection builder.\n *\n * The visible content is rendered by `TreeNode` via `nodesByKey`,\n * so `<Item>`'s body is only used by Stately for the collection\n * (`textValue` for keyboard nav, `childItems` for nested traversal).\n */\nfunction renderItem(node: CubeTreeNodeData): ReactElement {\n  const textValue =\n    typeof node.title === 'string' ? node.title : String(node.key);\n  return (\n    <Item\n      key={node.key}\n      textValue={textValue}\n      childItems={node.children as CubeTreeNodeData[] | undefined}\n    >\n      {node.title as ReactNode}\n    </Item>\n  );\n}\n\nfunction collectDisabledKeys(\n  treeData: CubeTreeNodeData[],\n  treeIsDisabled: boolean,\n): string[] {\n  const keys: string[] = [];\n  const visit = (nodes: CubeTreeNodeData[]) => {\n    for (const node of nodes) {\n      if (treeIsDisabled || node.isDisabled) keys.push(node.key);\n      if (node.children) visit(node.children);\n    }\n  };\n  visit(treeData);\n  return keys;\n}\n\n/** Expand the supplied keys with all of their ancestor keys. */\nfunction expandWithParents(\n  keys: string[] | undefined,\n  parentOf: Map<string, string | null>,\n): string[] | undefined {\n  if (!keys || keys.length === 0) return keys;\n  const set = new Set<string>(keys);\n  for (const key of keys) {\n    let parent = parentOf.get(key);\n    while (parent) {\n      set.add(parent);\n      parent = parentOf.get(parent);\n    }\n  }\n  return Array.from(set);\n}\n\n/**\n * Diff two key sets to find the single key that was added or removed.\n * Returns `null` when both sets are equal.\n */\nfunction findToggledKey(\n  previous: Set<Key>,\n  next: Set<Key>,\n): { key: Key; added: boolean } | null {\n  for (const k of next) {\n    if (!previous.has(k)) return { key: k, added: true };\n  }\n  for (const k of previous) {\n    if (!next.has(k)) return { key: k, added: false };\n  }\n  return null;\n}\n\nfunction resolveSelectionMode(\n  selectionMode: TreeSelectionMode | undefined,\n  isSelectable: boolean | undefined,\n): TreeSelectionMode {\n  if (selectionMode != null) return selectionMode;\n  if (isSelectable === false) return 'none';\n  return 'single';\n}\n\nfunction TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {\n  const {\n    treeData,\n    isCheckable = false,\n    isSelectable,\n    selectionMode: selectionModeProp,\n    size = 'medium',\n    shape = 'default',\n    containerPadding = 4,\n    isDisabled = false,\n    defaultExpandedKeys,\n    expandedKeys,\n    autoExpandParent = false,\n    defaultCheckedKeys,\n    checkedKeys,\n    defaultSelectedKeys,\n    selectedKeys,\n    height,\n    loadData,\n    onExpand,\n    onCheck,\n    onSelect,\n    itemProps,\n    rowStyles,\n    ariaLabel,\n    qa,\n    menu: treeMenu,\n    contextMenu: treeContextMenu,\n    onAction: treeOnAction,\n    menuTriggerProps,\n    menuProps,\n    ...otherProps\n  } = props;\n\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  const treeRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const treeIndex = useMemo(() => buildTreeIndex(treeData), [treeData]);\n  const nodesByKey = treeIndex.byKey;\n  const parentOf = treeIndex.parentOf;\n\n  const disabledKeys = useMemo(\n    () => collectDisabledKeys(treeData, isDisabled),\n    [treeData, isDisabled],\n  );\n\n  const selectionMode = resolveSelectionMode(selectionModeProp, isSelectable);\n\n  const effectiveExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(expandedKeys, parentOf)\n        : expandedKeys,\n    [autoExpandParent, expandedKeys, parentOf],\n  );\n\n  const effectiveDefaultExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(defaultExpandedKeys, parentOf)\n        : defaultExpandedKeys,\n    [autoExpandParent, defaultExpandedKeys, parentOf],\n  );\n\n  const checkbox = useCheckboxTree({\n    treeData,\n    index: treeIndex,\n    isCheckable,\n    defaultCheckedKeys,\n    checkedKeys,\n    onCheck,\n  });\n\n  const loadDataController = useLoadData({\n    nodesByKey,\n    loadData,\n    initialExpandedKeys: effectiveExpandedKeys ?? effectiveDefaultExpandedKeys,\n  });\n\n  /**\n   * In controlled mode, `previous` is read from `effectiveExpandedKeys`;\n   * in uncontrolled mode this ref is the only source. Initialized from\n   * the *effective* (ancestor-expanded) keys so the first toggle diffs\n   * correctly.\n   */\n  const previousExpandedRef = useRef<Set<Key>>(\n    new Set<Key>(effectiveExpandedKeys ?? effectiveDefaultExpandedKeys ?? []),\n  );\n\n  const handleExpandedChange = useEvent((nextSet: Set<Key>) => {\n    loadDataController.onExpandedChanged(nextSet);\n\n    const previous =\n      expandedKeys !== undefined\n        ? new Set<Key>(effectiveExpandedKeys ?? [])\n        : previousExpandedRef.current;\n    previousExpandedRef.current = new Set<Key>(nextSet);\n\n    if (!onExpand) return;\n\n    const toggled = findToggledKey(previous, nextSet);\n    if (!toggled) return;\n\n    const node = nodesByKey.get(String(toggled.key));\n    if (!node) return;\n\n    const info: TreeOnExpandInfo = {\n      expanded: toggled.added,\n      node,\n    };\n    onExpand(Array.from(nextSet), info);\n  });\n\n  /**\n   * Same pattern as `previousExpandedRef`: in controlled mode we read\n   * from `selectedKeys`; in uncontrolled mode this ref tracks state.\n   */\n  const previousSelectionRef = useRef<Set<Key>>(\n    new Set<Key>(selectedKeys ?? defaultSelectedKeys ?? []),\n  );\n\n  /**\n   * `useEvent` captures the closure lazily, so `state` (declared below\n   * `ariaProps` / `useTreeState`) is safely accessible at call time.\n   */\n  const handleSelectionChange = useEvent((selection: Selection) => {\n    if (!onSelect) return;\n    let arr: Key[];\n    if (selection === 'all') {\n      // `nodesByKey` contains the full tree; use the collection's visible\n      // keys so we don't leak keys under collapsed parents.\n      arr = [];\n      for (const key of state.collection.getKeys()) {\n        const node = state.collection.getItem(key);\n        if (node && node.type === 'item') arr.push(key);\n      }\n    } else {\n      arr = Array.from(selection);\n    }\n\n    const nextSet = new Set<Key>(arr);\n    const previous =\n      selectedKeys !== undefined\n        ? new Set<Key>(selectedKeys ?? [])\n        : previousSelectionRef.current;\n    previousSelectionRef.current = nextSet;\n\n    const toggled = findToggledKey(previous, nextSet);\n    if (!toggled) return;\n\n    const node = nodesByKey.get(String(toggled.key));\n    if (!node) return;\n\n    const selectedNodes = arr\n      .map((k) => nodesByKey.get(String(k)))\n      .filter((n): n is CubeTreeNodeData => !!n);\n\n    const info: TreeOnSelectInfo = {\n      selected: toggled.added,\n      node,\n      selectedNodes,\n    };\n\n    onSelect(arr, info);\n  });\n\n  const hasOnSelect = onSelect != null;\n\n  const ariaProps = useMemo(\n    () => ({\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      onSelectionChange:\n        hasOnSelect && selectionMode !== 'none'\n          ? handleSelectionChange\n          : undefined,\n      expandedKeys: effectiveExpandedKeys,\n      defaultExpandedKeys: effectiveDefaultExpandedKeys,\n      onExpandedChange: handleExpandedChange,\n      disabledKeys,\n      disabledBehavior: 'all' as const,\n      items: treeData,\n      children: renderItem as any,\n      'aria-label': ariaLabel ?? 'Tree',\n    }),\n    [\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      hasOnSelect,\n      handleSelectionChange,\n      effectiveExpandedKeys,\n      effectiveDefaultExpandedKeys,\n      handleExpandedChange,\n      disabledKeys,\n      treeData,\n      ariaLabel,\n    ],\n  );\n\n  const baseState = useTreeState<CubeTreeNodeData>(ariaProps);\n\n  // The legacy `TreeCollection` from `useTreeState` lacks `getChildren`,\n  // but `useTree` calls it for nested rows. Derive a patched state.\n  // TODO: Remove this patch when upgrading to a react-stately version\n  // that ships `getChildren` on TreeCollection natively.\n  const state = useMemo(() => {\n    const collection = baseState.collection;\n    if (typeof (collection as any).getChildren === 'function') {\n      return baseState;\n    }\n    const patched = Object.create(collection);\n    patched.getChildren = (key: Key): Iterable<Node<CubeTreeNodeData>> => {\n      const node = collection.getItem(key);\n      return node ? Array.from(node.childNodes) : [];\n    };\n    return { ...baseState, collection: patched };\n  }, [baseState]);\n\n  const { gridProps } = useTree(ariaProps, state, treeRef);\n\n  const visibleNodes: Node<CubeTreeNodeData>[] = useMemo(() => {\n    const out: Node<CubeTreeNodeData>[] = [];\n    for (const key of state.collection.getKeys()) {\n      const node = state.collection.getItem(key);\n      if (node && node.type === 'item') out.push(node);\n    }\n    return out;\n  }, [state.collection]);\n\n  const visibleNodesRef = useRef(visibleNodes);\n  visibleNodesRef.current = visibleNodes;\n\n  // ----- Virtualization -----\n  const rowVirtualizer = useVirtualizer({\n    count: visibleNodes.length,\n    getScrollElement: () => scrollRef.current,\n    getItemKey: (index: number) => {\n      const node = visibleNodesRef.current[index];\n      return node?.key ?? index;\n    },\n    estimateSize: () => SIZES[SIZE_NAME_TO_KEY[size]],\n    gap: 1,\n    overscan: 10,\n    paddingStart: containerPadding,\n    paddingEnd: containerPadding,\n  });\n\n  const treeStyle = useMemo<CSSProperties | undefined>(() => {\n    if (height == null) return undefined;\n    return { ['--tree-height' as keyof CSSProperties]: `${height}px` };\n  }, [height]);\n\n  const sizerStyle = useMemo<CSSProperties>(\n    () => ({\n      position: 'relative',\n      width: '100%',\n      height: `${rowVirtualizer.getTotalSize()}px`,\n    }),\n    [rowVirtualizer.getTotalSize()],\n  );\n\n  /**\n   * Track which key we last asked the virtualizer to scroll to. Both\n   * scroll effects (`focusedKey` for keyboard nav and the\n   * controlled-`selectedKeys` effect below) write to the same ref so\n   * we don't fire two `scrollToIndex` calls back-to-back when a click\n   * updates focus and selection in the same render.\n   */\n  const lastScrolledKeyRef = useRef<Key | null>(null);\n\n  /**\n   * Keep the focused row visible during keyboard navigation.\n   *\n   * Uses `rowVirtualizer.scrollToIndex` (instead of\n   * `querySelector + scrollIntoView`) so the scroll lands even when the\n   * target row is outside the virtualizer's currently rendered window.\n   * `align: 'auto'` only scrolls when needed, matching the prior\n   * `scrollIntoView({ block: 'nearest' })` behavior.\n   */\n  useLayoutEffect(() => {\n    const focusedKey = state.selectionManager.focusedKey;\n    if (focusedKey == null) return;\n    if (lastScrolledKeyRef.current === focusedKey) return;\n\n    const index = visibleNodesRef.current.findIndex(\n      (n) => n.key === focusedKey,\n    );\n    if (index < 0) return;\n\n    rowVirtualizer.scrollToIndex(index, { align: 'auto' });\n    lastScrolledKeyRef.current = focusedKey;\n  }, [state.selectionManager.focusedKey, rowVirtualizer]);\n\n  /**\n   * Scroll into view when controlled `selectedKeys` changes externally.\n   *\n   * Selection-manager `focusedKey` only updates on explicit user\n   * interaction (click / keyboard) — it does NOT track controlled\n   * `selectedKeys` prop changes. So when a parent updates the prop\n   * (e.g. opening a file from elsewhere), we need a separate effect\n   * to bring the row into view.\n   *\n   * Re-runs on `visibleNodes` so we retry once parents are expanded\n   * (the row is invisible to the virtualizer until then).\n   */\n  useLayoutEffect(() => {\n    if (selectedKeys == null) return;\n    const target = selectedKeys[0];\n    if (target == null) return;\n    if (lastScrolledKeyRef.current === target) return;\n\n    const index = visibleNodes.findIndex((n) => String(n.key) === target);\n    if (index < 0) return;\n\n    rowVirtualizer.scrollToIndex(index, { align: 'auto' });\n    lastScrolledKeyRef.current = target;\n  }, [selectedKeys, visibleNodes, rowVirtualizer]);\n\n  const mods = useMemo(\n    () => ({\n      'has-height': height != null,\n      shape,\n    }),\n    [height, shape],\n  );\n\n  // The forwarded ref points at the inner scroll container so\n  // consumers can drive `scrollTop` directly. `treeRef` (used by\n  // `useTree` for keyboard handling and as the role=\"treegrid\"\n  // anchor) stays internal on `TreeElement`.\n  const mergedScrollRef = useMemo(\n    () => mergeRefs(ref, scrollRef),\n    [ref, scrollRef],\n  );\n\n  return (\n    <TreeElement\n      {...gridProps}\n      ref={treeRef}\n      qa={qa ?? 'Tree'}\n      mods={mods}\n      styles={baseStyles}\n      style={treeStyle}\n    >\n      <TreeScrollContainer ref={mergedScrollRef}>\n        <div role=\"presentation\" style={sizerStyle}>\n          {rowVirtualizer.getVirtualItems().map((virtualItem) => {\n            const node = visibleNodes[virtualItem.index];\n            if (!node) return null;\n            const keyStr = String(node.key);\n            const data = nodesByKey.get(keyStr);\n            if (!data) return null;\n            return (\n              <TreeNode\n                key={node.key}\n                node={node}\n                data={data}\n                state={state}\n                isCheckable={isCheckable}\n                isExpanded={state.expandedKeys.has(node.key)}\n                isChecked={checkbox.checkedSet.has(keyStr)}\n                isIndeterminate={checkbox.halfCheckedSet.has(keyStr)}\n                isLoading={loadDataController.loadingKeys.has(keyStr)}\n                size={size}\n                itemProps={itemProps}\n                rowStyles={rowStyles}\n                virtualStyle={{\n                  position: 'absolute',\n                  top: 0,\n                  left: containerPadding,\n                  right: containerPadding,\n                  transform: `translateY(${virtualItem.start}px)`,\n                }}\n                virtualRef={rowVirtualizer.measureElement}\n                virtualIndex={virtualItem.index}\n                menu={treeMenu}\n                contextMenu={treeContextMenu}\n                menuTriggerProps={menuTriggerProps}\n                menuProps={menuProps}\n                onToggleChecked={checkbox.toggle}\n                onAction={treeOnAction}\n              />\n            );\n          })}\n        </div>\n      </TreeScrollContainer>\n    </TreeElement>\n  );\n}\n\nconst _Tree = forwardRef(TreeBase);\n_Tree.displayName = 'Tree';\n\n/**\n * Hierarchical data display with optional checkboxes, single/multi\n * selection, async lazy loading, and keyboard navigation.\n *\n * Built on `useTree` / `useTreeState` (React Aria + React Stately) and\n * styled with Tasty.\n *\n * @example\n * ```tsx\n * <Tree\n *   treeData={data}\n *   isCheckable\n *   selectionMode=\"none\"\n *   defaultExpandedKeys={['root']}\n *   onCheck={(keys) => console.log(keys)}\n * />\n * ```\n */\nexport const Tree = _Tree;\n"],"mappings":"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"}
+{"version":3,"file":"Tree.js","names":[],"sources":["../../../../src/components/content/Tree/Tree.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { OUTER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';\nimport { useTree } from 'react-aria';\nimport { Item, useTreeState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { SIZE_NAME_TO_KEY, SIZES } from '../../../tokens/sizes';\nimport { mergeRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { TreeElement, TreeScrollContainer } from './styled';\nimport { buildTreeIndex } from './tree-index';\nimport { TreeNode } from './TreeNode';\nimport { useCheckboxTree } from './use-checkbox-tree';\nimport { useLoadData } from './use-load-data';\n\nimport type { Key, Node, Selection } from '@react-types/shared';\nimport type {\n  CSSProperties,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport type {\n  CubeTreeNodeData,\n  CubeTreeProps,\n  TreeOnExpandInfo,\n  TreeOnSelectInfo,\n  TreeSelectionMode,\n} from './types';\n\n/**\n * Render an `<Item>` for React Stately's collection builder.\n *\n * The visible content is rendered by `TreeNode` via `nodesByKey`,\n * so `<Item>`'s body is only used by Stately for the collection\n * (`textValue` for keyboard nav, `childItems` for nested traversal).\n */\nfunction renderItem(node: CubeTreeNodeData): ReactElement {\n  const textValue =\n    typeof node.title === 'string' ? node.title : String(node.key);\n  return (\n    <Item\n      key={node.key}\n      textValue={textValue}\n      childItems={node.children as CubeTreeNodeData[] | undefined}\n    >\n      {node.title as ReactNode}\n    </Item>\n  );\n}\n\nfunction collectDisabledKeys(\n  treeData: CubeTreeNodeData[],\n  treeIsDisabled: boolean,\n): string[] {\n  const keys: string[] = [];\n  const visit = (nodes: CubeTreeNodeData[]) => {\n    for (const node of nodes) {\n      if (treeIsDisabled || node.isDisabled) keys.push(node.key);\n      if (node.children) visit(node.children);\n    }\n  };\n  visit(treeData);\n  return keys;\n}\n\n/** Expand the supplied keys with all of their ancestor keys. */\nfunction expandWithParents(\n  keys: string[] | undefined,\n  parentOf: Map<string, string | null>,\n): string[] | undefined {\n  if (!keys || keys.length === 0) return keys;\n  const set = new Set<string>(keys);\n  for (const key of keys) {\n    let parent = parentOf.get(key);\n    while (parent) {\n      set.add(parent);\n      parent = parentOf.get(parent);\n    }\n  }\n  return Array.from(set);\n}\n\n/**\n * Diff two key sets to find the single key that was added or removed.\n * Returns `null` when both sets are equal.\n */\nfunction findToggledKey(\n  previous: Set<Key>,\n  next: Set<Key>,\n): { key: Key; added: boolean } | null {\n  for (const k of next) {\n    if (!previous.has(k)) return { key: k, added: true };\n  }\n  for (const k of previous) {\n    if (!next.has(k)) return { key: k, added: false };\n  }\n  return null;\n}\n\nfunction resolveSelectionMode(\n  selectionMode: TreeSelectionMode | undefined,\n  isSelectable: boolean | undefined,\n): TreeSelectionMode {\n  if (selectionMode != null) return selectionMode;\n  if (isSelectable === false) return 'none';\n  return 'single';\n}\n\nfunction TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {\n  const {\n    treeData,\n    isCheckable = false,\n    isSelectable,\n    selectionMode: selectionModeProp,\n    size = 'medium',\n    shape = 'default',\n    containerPadding = 4,\n    isDisabled = false,\n    defaultExpandedKeys,\n    expandedKeys,\n    autoExpandParent = false,\n    defaultCheckedKeys,\n    checkedKeys,\n    defaultSelectedKeys,\n    selectedKeys,\n    height,\n    loadData,\n    onExpand,\n    onCheck,\n    onSelect,\n    itemProps,\n    rowStyles,\n    ariaLabel,\n    qa,\n    menu: treeMenu,\n    contextMenu: treeContextMenu,\n    onAction: treeOnAction,\n    menuTriggerProps,\n    menuProps,\n    ...otherProps\n  } = props;\n\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  const treeRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const treeIndex = useMemo(() => buildTreeIndex(treeData), [treeData]);\n  const nodesByKey = treeIndex.byKey;\n  const parentOf = treeIndex.parentOf;\n\n  const disabledKeys = useMemo(\n    () => collectDisabledKeys(treeData, isDisabled),\n    [treeData, isDisabled],\n  );\n\n  const selectionMode = resolveSelectionMode(selectionModeProp, isSelectable);\n\n  const effectiveExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(expandedKeys, parentOf)\n        : expandedKeys,\n    [autoExpandParent, expandedKeys, parentOf],\n  );\n\n  const effectiveDefaultExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(defaultExpandedKeys, parentOf)\n        : defaultExpandedKeys,\n    [autoExpandParent, defaultExpandedKeys, parentOf],\n  );\n\n  const checkbox = useCheckboxTree({\n    treeData,\n    index: treeIndex,\n    isCheckable,\n    defaultCheckedKeys,\n    checkedKeys,\n    onCheck,\n  });\n\n  const loadDataController = useLoadData({\n    nodesByKey,\n    loadData,\n    initialExpandedKeys: effectiveExpandedKeys ?? effectiveDefaultExpandedKeys,\n  });\n\n  /**\n   * In controlled mode, `previous` is read from `effectiveExpandedKeys`;\n   * in uncontrolled mode this ref is the only source. Initialized from\n   * the *effective* (ancestor-expanded) keys so the first toggle diffs\n   * correctly.\n   */\n  const previousExpandedRef = useRef<Set<Key>>(\n    new Set<Key>(effectiveExpandedKeys ?? effectiveDefaultExpandedKeys ?? []),\n  );\n\n  const handleExpandedChange = useEvent((nextSet: Set<Key>) => {\n    loadDataController.onExpandedChanged(nextSet);\n\n    const previous =\n      expandedKeys !== undefined\n        ? new Set<Key>(effectiveExpandedKeys ?? [])\n        : previousExpandedRef.current;\n    previousExpandedRef.current = new Set<Key>(nextSet);\n\n    if (!onExpand) return;\n\n    const toggled = findToggledKey(previous, nextSet);\n    if (!toggled) return;\n\n    const node = nodesByKey.get(String(toggled.key));\n    if (!node) return;\n\n    const info: TreeOnExpandInfo = {\n      expanded: toggled.added,\n      node,\n    };\n    onExpand(Array.from(nextSet), info);\n  });\n\n  /**\n   * Same pattern as `previousExpandedRef`: in controlled mode we read\n   * from `selectedKeys`; in uncontrolled mode this ref tracks state.\n   */\n  const previousSelectionRef = useRef<Set<Key>>(\n    new Set<Key>(selectedKeys ?? defaultSelectedKeys ?? []),\n  );\n\n  /**\n   * `useEvent` captures the closure lazily, so `state` (declared below\n   * `ariaProps` / `useTreeState`) is safely accessible at call time.\n   */\n  const handleSelectionChange = useEvent((selection: Selection) => {\n    if (!onSelect) return;\n    let arr: Key[];\n    if (selection === 'all') {\n      // `nodesByKey` contains the full tree; use the collection's visible\n      // keys so we don't leak keys under collapsed parents.\n      arr = [];\n      for (const key of state.collection.getKeys()) {\n        const node = state.collection.getItem(key);\n        if (node && node.type === 'item') arr.push(key);\n      }\n    } else {\n      arr = Array.from(selection);\n    }\n\n    const nextSet = new Set<Key>(arr);\n    const previous =\n      selectedKeys !== undefined\n        ? new Set<Key>(selectedKeys ?? [])\n        : previousSelectionRef.current;\n    previousSelectionRef.current = nextSet;\n\n    const toggled = findToggledKey(previous, nextSet);\n    if (!toggled) return;\n\n    const node = nodesByKey.get(String(toggled.key));\n    if (!node) return;\n\n    const selectedNodes = arr\n      .map((k) => nodesByKey.get(String(k)))\n      .filter((n): n is CubeTreeNodeData => !!n);\n\n    const info: TreeOnSelectInfo = {\n      selected: toggled.added,\n      node,\n      selectedNodes,\n    };\n\n    onSelect(arr, info);\n  });\n\n  const hasOnSelect = onSelect != null;\n\n  const ariaProps = useMemo(\n    () => ({\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      onSelectionChange:\n        hasOnSelect && selectionMode !== 'none'\n          ? handleSelectionChange\n          : undefined,\n      expandedKeys: effectiveExpandedKeys,\n      defaultExpandedKeys: effectiveDefaultExpandedKeys,\n      onExpandedChange: handleExpandedChange,\n      disabledKeys,\n      disabledBehavior: 'all' as const,\n      items: treeData,\n      children: renderItem as any,\n      'aria-label': ariaLabel ?? 'Tree',\n    }),\n    [\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      hasOnSelect,\n      handleSelectionChange,\n      effectiveExpandedKeys,\n      effectiveDefaultExpandedKeys,\n      handleExpandedChange,\n      disabledKeys,\n      treeData,\n      ariaLabel,\n    ],\n  );\n\n  const baseState = useTreeState<CubeTreeNodeData>(ariaProps);\n\n  // The legacy `TreeCollection` from `useTreeState` lacks `getChildren`,\n  // but `useTree` calls it for nested rows. Derive a patched state.\n  // TODO: Remove this patch when upgrading to a react-stately version\n  // that ships `getChildren` on TreeCollection natively.\n  const state = useMemo(() => {\n    const collection = baseState.collection;\n    if (typeof (collection as any).getChildren === 'function') {\n      return baseState;\n    }\n    const patched = Object.create(collection);\n    patched.getChildren = (key: Key): Iterable<Node<CubeTreeNodeData>> => {\n      const node = collection.getItem(key);\n      return node ? Array.from(node.childNodes) : [];\n    };\n    return { ...baseState, collection: patched };\n  }, [baseState]);\n\n  const { gridProps } = useTree(ariaProps, state, treeRef);\n\n  const visibleNodes: Node<CubeTreeNodeData>[] = useMemo(() => {\n    const out: Node<CubeTreeNodeData>[] = [];\n    for (const key of state.collection.getKeys()) {\n      const node = state.collection.getItem(key);\n      if (node && node.type === 'item') out.push(node);\n    }\n    return out;\n  }, [state.collection]);\n\n  const visibleNodesRef = useRef(visibleNodes);\n  visibleNodesRef.current = visibleNodes;\n\n  // ----- Virtualization -----\n  const rowVirtualizer = useVirtualizer({\n    count: visibleNodes.length,\n    getScrollElement: () => scrollRef.current,\n    getItemKey: (index: number) => {\n      const node = visibleNodesRef.current[index];\n      return node?.key ?? index;\n    },\n    estimateSize: () => SIZES[SIZE_NAME_TO_KEY[size]],\n    gap: 1,\n    overscan: 10,\n    paddingStart: containerPadding,\n    paddingEnd: containerPadding,\n  });\n\n  const treeStyle = useMemo<CSSProperties | undefined>(() => {\n    if (height == null) return undefined;\n    return { ['--tree-height' as keyof CSSProperties]: `${height}px` };\n  }, [height]);\n\n  const sizerStyle = useMemo<CSSProperties>(\n    () => ({\n      position: 'relative',\n      width: '100%',\n      height: `${rowVirtualizer.getTotalSize()}px`,\n    }),\n    [rowVirtualizer.getTotalSize()],\n  );\n\n  /**\n   * Each scroll effect tracks its own \"last scrolled\" target instead\n   * of sharing one ref. A shared ref creates a feedback loop: keyboard\n   * nav updates the focused-key ref to the new row, and any subsequent\n   * `visibleNodes` change OR `selectedKeys` array-identity change\n   * (very common — `selectedKeys={[value]}` allocates a fresh array\n   * every parent render) re-runs the selectedKeys effect, which sees\n   * the ref no longer matches `selectedKeys[0]` and yanks the viewport\n   * back to the selected row. Two refs let each effect dedupe against\n   * its own intent only; the cost is at most one duplicate\n   * `scrollToIndex` call when click updates focus and selection in the\n   * same render (idempotent — both target the same index).\n   */\n  const lastFocusedScrollRef = useRef<Key | null>(null);\n  const lastSelectedScrollRef = useRef<string | null>(null);\n\n  /**\n   * Keep the focused row visible during keyboard navigation.\n   *\n   * Uses `rowVirtualizer.scrollToIndex` (instead of\n   * `querySelector + scrollIntoView`) so the scroll lands even when the\n   * target row is outside the virtualizer's currently rendered window.\n   * `align: 'auto'` only scrolls when needed, matching the prior\n   * `scrollIntoView({ block: 'nearest' })` behavior.\n   */\n  useLayoutEffect(() => {\n    const focusedKey = state.selectionManager.focusedKey;\n    if (focusedKey == null) return;\n    if (lastFocusedScrollRef.current === focusedKey) return;\n\n    const index = visibleNodesRef.current.findIndex(\n      (n) => n.key === focusedKey,\n    );\n    if (index < 0) return;\n\n    rowVirtualizer.scrollToIndex(index, { align: 'auto' });\n    lastFocusedScrollRef.current = focusedKey;\n  }, [state.selectionManager.focusedKey, rowVirtualizer]);\n\n  /**\n   * Scroll into view when controlled `selectedKeys` changes externally.\n   *\n   * Selection-manager `focusedKey` only updates on explicit user\n   * interaction (click / keyboard) — it does NOT track controlled\n   * `selectedKeys` prop changes. So when a parent updates the prop\n   * (e.g. opening a file from elsewhere), we need a separate effect\n   * to bring the row into view.\n   *\n   * Re-runs on `visibleNodes` so we retry once parents are expanded\n   * (the row is invisible to the virtualizer until then).\n   */\n  useLayoutEffect(() => {\n    if (selectedKeys == null) return;\n    const target = selectedKeys[0];\n    if (target == null) return;\n    if (lastSelectedScrollRef.current === target) return;\n\n    const index = visibleNodes.findIndex((n) => String(n.key) === target);\n    if (index < 0) return;\n\n    rowVirtualizer.scrollToIndex(index, { align: 'auto' });\n    lastSelectedScrollRef.current = target;\n  }, [selectedKeys, visibleNodes, rowVirtualizer]);\n\n  const mods = useMemo(\n    () => ({\n      'has-height': height != null,\n      shape,\n    }),\n    [height, shape],\n  );\n\n  // The forwarded ref points at the inner scroll container so\n  // consumers can drive `scrollTop` directly. `treeRef` (used by\n  // `useTree` for keyboard handling and as the role=\"treegrid\"\n  // anchor) stays internal on `TreeElement`.\n  const mergedScrollRef = useMemo(\n    () => mergeRefs(ref, scrollRef),\n    [ref, scrollRef],\n  );\n\n  return (\n    <TreeElement\n      {...gridProps}\n      ref={treeRef}\n      qa={qa ?? 'Tree'}\n      mods={mods}\n      styles={baseStyles}\n      style={treeStyle}\n    >\n      <TreeScrollContainer ref={mergedScrollRef}>\n        <div role=\"presentation\" style={sizerStyle}>\n          {rowVirtualizer.getVirtualItems().map((virtualItem) => {\n            const node = visibleNodes[virtualItem.index];\n            if (!node) return null;\n            const keyStr = String(node.key);\n            const data = nodesByKey.get(keyStr);\n            if (!data) return null;\n            return (\n              <TreeNode\n                key={node.key}\n                node={node}\n                data={data}\n                state={state}\n                isCheckable={isCheckable}\n                isExpanded={state.expandedKeys.has(node.key)}\n                isChecked={checkbox.checkedSet.has(keyStr)}\n                isIndeterminate={checkbox.halfCheckedSet.has(keyStr)}\n                isLoading={loadDataController.loadingKeys.has(keyStr)}\n                size={size}\n                itemProps={itemProps}\n                rowStyles={rowStyles}\n                virtualStyle={{\n                  position: 'absolute',\n                  top: 0,\n                  left: containerPadding,\n                  right: containerPadding,\n                  transform: `translateY(${virtualItem.start}px)`,\n                }}\n                virtualRef={rowVirtualizer.measureElement}\n                virtualIndex={virtualItem.index}\n                menu={treeMenu}\n                contextMenu={treeContextMenu}\n                menuTriggerProps={menuTriggerProps}\n                menuProps={menuProps}\n                onToggleChecked={checkbox.toggle}\n                onAction={treeOnAction}\n              />\n            );\n          })}\n        </div>\n      </TreeScrollContainer>\n    </TreeElement>\n  );\n}\n\nconst _Tree = forwardRef(TreeBase);\n_Tree.displayName = 'Tree';\n\n/**\n * Hierarchical data display with optional checkboxes, single/multi\n * selection, async lazy loading, and keyboard navigation.\n *\n * Built on `useTree` / `useTreeState` (React Aria + React Stately) and\n * styled with Tasty.\n *\n * @example\n * ```tsx\n * <Tree\n *   treeData={data}\n *   isCheckable\n *   selectionMode=\"none\"\n *   defaultExpandedKeys={['root']}\n *   onCheck={(keys) => console.log(keys)}\n * />\n * ```\n */\nexport const Tree = _Tree;\n"],"mappings":"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"}

package/dist/components/content/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6cac05d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-88ada42 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";
@@ -45,9 +45,9 @@ const CheckboxElement = tasty({
 		placeItems: "center",
 		radius: ".5r",
 		fill: {
-			"": "#white",
+			"": "#surface",
 			"checked | indeterminate": "#primary",
-			"invalid & !checked": "#white",
+			"invalid & !checked": "#surface",
 			"invalid & checked": "#danger",
 			disabled: "#dark.12"
 		},