@kushagradhawan/kookie-ui 0.1.71 → 0.1.73

package/src/components/_internal/base-button.tsx

@@ -83,9 +83,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
   // This helps developers migrate to the new material prop
   React.useEffect(() => {
     if (props.panelBackground !== undefined) {
-      console.warn(
-        'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-      );
+      console.warn('Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.');
     }
   }, [props.panelBackground]);
 
@@ -96,6 +94,10 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
   // This prevents layout thrashing when using translucent materials
   const buttonRef = React.useRef<HTMLElement>(null);
 
+  // Use a ref to track current material value to avoid stale closures in setTimeout
+  const materialRef = React.useRef(effectiveMaterial);
+  materialRef.current = effectiveMaterial;
+
   React.useEffect(() => {
     const button = buttonRef.current;
     if (!button) return;
@@ -106,14 +108,17 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       // Add will-change when material is translucent to optimize rendering
       button.style.setProperty('will-change', 'backdrop-filter');
 
+      // Track timeout for cleanup
+      let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
       // Clean up will-change after transition completes to prevent memory leaks
       const cleanup = () => {
-        const transitionDuration =
-          getComputedStyle(button).getPropertyValue('--duration-2') || '75ms';
+        const transitionDuration = getComputedStyle(button).getPropertyValue('--duration-2') || '75ms';
         const duration = parseInt(transitionDuration) || 75;
 
-        setTimeout(() => {
-          if (button && effectiveMaterial !== 'translucent') {
+        timeoutId = setTimeout(() => {
+          // Use ref to get current value, not stale closure value
+          if (button && materialRef.current !== 'translucent') {
             button.style.setProperty('will-change', 'auto');
           }
         }, duration);
@@ -124,6 +129,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       observer.observe(button, { attributes: true, attributeFilter: ['data-material'] });
 
       return () => {
+        if (timeoutId) clearTimeout(timeoutId);
         observer.disconnect();
         button.style.setProperty('will-change', 'auto');
       };
@@ -138,8 +144,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
 
   // Only pass disabled for elements that support it
   // This prevents invalid HTML attributes on unsupported elements
-  const shouldPassDisabled =
-    asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);
+  const shouldPassDisabled = asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);
 
   // Determine if we are rendering a real <button> element so we can set a safe
   // default type. Native <button> defaults to type="submit" which can cause
@@ -221,10 +226,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
           {/* Centered spinner overlay during loading state */}
           <Flex asChild align="center" justify="center" position="absolute" inset="0">
             <span>
-              <Spinner
-                size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)}
-                aria-hidden="true"
-              />
+              <Spinner size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)} aria-hidden="true" />
             </span>
           </Flex>
         </>

package/src/components/_internal/shell-bottom.tsx

@@ -172,13 +172,39 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
     }
   }, [shell.bottomMode, open, defaultOpen, onOpenChange]);
 
+  // Track previous mode to only fire callbacks on actual user-initiated state transitions.
+  // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
+  // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  const prevBottomModeRef = React.useRef<PaneMode | null>(null);
+  const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
-    if (shell.bottomMode === 'expanded') {
-      onExpand?.();
-    } else {
-      onCollapse?.();
+    const currentMode = shell.bottomMode;
+
+    // Wait for breakpoint to be ready before enabling callbacks
+    if (!shell.currentBreakpointReady) {
+      prevBottomModeRef.current = currentMode;
+      return;
+    }
+
+    // Skip the first run after breakpoint is ready - this captures the post-sync state
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      prevBottomModeRef.current = currentMode;
+      return;
+    }
+
+    const prevMode = prevBottomModeRef.current;
+
+    // Only fire on actual state transitions
+    if (prevMode !== null && prevMode !== currentMode) {
+      if (currentMode === 'expanded') {
+        onExpand?.();
+      } else if (currentMode === 'collapsed') {
+        onCollapse?.();
+      }
+      prevBottomModeRef.current = currentMode;
     }
-  }, [shell.bottomMode, onExpand, onCollapse]);
+  }, [shell.bottomMode, shell.currentBreakpointReady, onExpand, onCollapse]);
 
   const isExpanded = shell.bottomMode === 'expanded';
 

package/src/components/_internal/shell-inspector.tsx

@@ -173,13 +173,39 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     }
   }, [shell.inspectorMode, open, defaultOpen, onOpenChange]);
 
+  // Track previous mode to only fire callbacks on actual user-initiated state transitions.
+  // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
+  // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  const prevInspectorModeRef = React.useRef<PaneMode | null>(null);
+  const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
-    if (shell.inspectorMode === 'expanded') {
-      onExpand?.();
-    } else {
-      onCollapse?.();
+    const currentMode = shell.inspectorMode;
+
+    // Wait for breakpoint to be ready before enabling callbacks
+    if (!shell.currentBreakpointReady) {
+      prevInspectorModeRef.current = currentMode;
+      return;
+    }
+
+    // Skip the first run after breakpoint is ready - this captures the post-sync state
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      prevInspectorModeRef.current = currentMode;
+      return;
+    }
+
+    const prevMode = prevInspectorModeRef.current;
+
+    // Only fire on actual state transitions
+    if (prevMode !== null && prevMode !== currentMode) {
+      if (currentMode === 'expanded') {
+        onExpand?.();
+      } else if (currentMode === 'collapsed') {
+        onCollapse?.();
+      }
+      prevInspectorModeRef.current = currentMode;
     }
-  }, [shell.inspectorMode, onExpand, onCollapse]);
+  }, [shell.inspectorMode, shell.currentBreakpointReady, onExpand, onCollapse]);
 
   const isExpanded = shell.inspectorMode === 'expanded';
 

package/src/components/_internal/shell-sidebar.tsx

@@ -188,14 +188,42 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
     }
   }, [shell.sidebarMode, state, onStateChange]);
 
-  // Emit expand/collapse events
+  // Track previous mode to only fire callbacks on actual user-initiated state transitions.
+  // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
+  // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  const prevSidebarModeRef = React.useRef<SidebarMode | null>(null);
+  const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
-    if (shell.sidebarMode === 'expanded') {
-      onExpand?.();
-    } else {
-      onCollapse?.();
+    const currentMode = shell.sidebarMode as SidebarMode;
+
+    // Wait for breakpoint to be ready before enabling callbacks
+    if (!shell.currentBreakpointReady) {
+      prevSidebarModeRef.current = currentMode;
+      return;
+    }
+
+    // Skip the first run after breakpoint is ready - this captures the post-sync state
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      prevSidebarModeRef.current = currentMode;
+      return;
+    }
+
+    const prevMode = prevSidebarModeRef.current;
+
+    // Only fire on actual state transitions
+    if (prevMode !== null && prevMode !== currentMode) {
+      // onExpand: when becoming visible (collapsed → thin/expanded)
+      if (prevMode === 'collapsed' && currentMode !== 'collapsed') {
+        onExpand?.();
+      }
+      // onCollapse: when becoming hidden (any → collapsed)
+      else if (currentMode === 'collapsed') {
+        onCollapse?.();
+      }
+      prevSidebarModeRef.current = currentMode;
     }
-  }, [shell.sidebarMode, onExpand, onCollapse]);
+  }, [shell.sidebarMode, shell.currentBreakpointReady, onExpand, onCollapse]);
 
   // Option A: thin is width-only; content remains visible whenever not collapsed
   const isContentVisible = shell.sidebarMode !== 'collapsed';

package/src/components/button.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { BaseButton } from './_internal/base-button.js';
 import { Tooltip } from './tooltip.js';
+import { useTooltipWrapper } from '../hooks/use-tooltip-wrapper.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
 /**
@@ -84,9 +85,7 @@ type ButtonProps<C extends React.ElementType = 'button'> = ButtonOwnProps & {
  * Button component type that supports polymorphic rendering
  * @template C - The element type to render as
  */
-type ButtonComponent = <C extends React.ElementType = 'button'>(
-  props: ButtonProps<C> & { ref?: React.ForwardedRef<ButtonElement> },
-) => React.ReactElement | null;
+type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C> & { ref?: React.ForwardedRef<ButtonElement> }) => React.ReactElement | null;
 
 /**
  * Button component for triggering actions throughout your interface
@@ -113,27 +112,11 @@ type ButtonComponent = <C extends React.ElementType = 'button'>(
  */
 const Button = React.forwardRef(
   (
-    {
-      className,
-      tooltip,
-      tooltipSide = 'top',
-      tooltipAlign = 'center',
-      tooltipDelayDuration,
-      tooltipDisableHoverableContent,
-      overrideStyles,
-      ...props
-    }: ButtonProps,
+    { className, style, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, overrideStyles, ...props }: ButtonProps,
     forwardedRef: React.ForwardedRef<ButtonElement>,
   ) => {
-    // Generate unique ID for tooltip accessibility
-    const tooltipId = React.useId();
-    const hasTooltip = Boolean(tooltip);
-
-    // Prepare accessibility props for tooltip integration
-    const tooltipAccessibilityProps = React.useMemo(
-      () => (hasTooltip ? { 'aria-describedby': tooltipId } : {}),
-      [hasTooltip, tooltipId],
-    );
+    // Use shared tooltip wrapper hook for accessibility props
+    const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
 
     // Create the base button element with tooltip accessibility props
     // Map overrideStyles to CSS variables consumed by the override variant rules
@@ -152,7 +135,7 @@ const Button = React.forwardRef(
         setVar(`--button-override-${prefix}filter`, s.filter);
         setVar(`--button-override-${prefix}outline`, s.outline);
         setVar(`--button-override-${prefix}outline-offset`, s.outlineOffset);
-        setVar(`--button-override-${prefix}opacity`, s.opacity as any);
+        setVar(`--button-override-${prefix}opacity`, s.opacity);
       };
 
       apply('', overrideStyles.normal);
@@ -167,35 +150,23 @@ const Button = React.forwardRef(
         setVar('--button-override-focus-outline-offset', overrideStyles.focus.outlineOffset);
       }
 
-      return vars as unknown as React.CSSProperties;
+      return vars as React.CSSProperties;
     }, [overrideStyles]);
 
-    const button = (
-      <BaseButton
-        {...props}
-        {...tooltipAccessibilityProps}
-        ref={forwardedRef}
-        className={classNames('rt-Button', className)}
-        style={overrideVars ? { ...overrideVars, ...(props as any).style } : (props as any).style}
-      />
-    );
+    // Combine override styles with user-provided styles
+    const combinedStyle = React.useMemo(() => (overrideVars ? { ...overrideVars, ...style } : style), [overrideVars, style]);
+
+    const button = <BaseButton {...props} {...tooltipAccessibilityProps} ref={forwardedRef} className={classNames('rt-Button', className)} style={combinedStyle} />;
 
     // If no tooltip is provided, return the button as-is for better performance
-    if (!tooltip) {
+    if (!hasTooltip) {
       return button;
     }
 
     // Wrap with Tooltip when tooltip content is provided
     // This creates a compound component that handles both button and tooltip functionality
     return (
-      <Tooltip
-        content={tooltip}
-        side={tooltipSide}
-        align={tooltipAlign}
-        delayDuration={tooltipDelayDuration}
-        disableHoverableContent={tooltipDisableHoverableContent}
-        id={tooltipId}
-      >
+      <Tooltip content={tooltip} side={tooltipSide} align={tooltipAlign} delayDuration={tooltipDelayDuration} disableHoverableContent={tooltipDisableHoverableContent} id={tooltipId}>
         {button}
       </Tooltip>
     );

package/src/components/chatbar.tsx

@@ -1130,19 +1130,7 @@ type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> & {
 };
 
 const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef) => {
-  const {
-    asChild,
-    clearOnSend = true,
-    disabled,
-    children,
-    className,
-    style,
-    size: sizeProp,
-    variant: variantProp,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    ...buttonProps
-  } = props;
+  const { asChild, clearOnSend = true, disabled, children, className, style, size: sizeProp, variant: variantProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...buttonProps } = props;
   const ctx = useChatbarContext();
 
   const trimmed = ctx.value.trim();

package/src/components/icon-button.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { BaseButton } from './_internal/base-button.js';
 import { Tooltip } from './tooltip.js';
+import { useTooltipWrapper } from '../hooks/use-tooltip-wrapper.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
 type IconButtonElement = React.ElementRef<typeof BaseButton>;
@@ -57,9 +58,7 @@ type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProp
  * IconButton component type that supports polymorphic rendering
  * @template C - The element type to render as
  */
-type IconButtonComponent = <C extends React.ElementType = 'button'>(
-  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },
-) => React.ReactElement | null;
+type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> }) => React.ReactElement | null;
 
 /**
  * IconButton component for compact, accessible icon-only interactions
@@ -103,68 +102,45 @@ type IconButtonComponent = <C extends React.ElementType = 'button'>(
  */
 const IconButton = React.forwardRef(
   (
-    {
-      className,
-      tooltip,
-      tooltipSide = 'top',
-      tooltipAlign = 'center',
-      tooltipDelayDuration,
-      tooltipDisableHoverableContent,
-      ...props
-    }: IconButtonProps,
+    { className, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, ...props }: IconButtonProps,
     forwardedRef: React.ForwardedRef<IconButtonElement>,
   ) => {
-    // Generate unique ID for tooltip accessibility
-    const tooltipId = React.useId();
+    // Use shared tooltip wrapper hook for accessibility props
+    const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
+
     // Runtime accessibility validation to ensure WCAG compliance
     // This helps catch accessibility issues during development
     const hasAriaLabel = 'aria-label' in props && props['aria-label'];
     const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];
     const hasChildren = 'children' in props && props.children;
 
-    // Throw descriptive error if no accessible name is provided
+    // Validate accessible name - throw in development, log error in production
     if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {
-      throw new Error(
+      const errorMessage =
         'IconButton: Icon buttons must have an accessible name. Please provide either:' +
-          '\n- aria-label prop with descriptive text' +
-          '\n- aria-labelledby prop referencing a label element' +
-          '\n- or visible text children',
-      );
-    }
+        '\n- aria-label prop with descriptive text' +
+        '\n- aria-labelledby prop referencing a label element' +
+        '\n- or visible text children';
 
-    // Prepare accessibility props for tooltip integration
-    const hasTooltip = Boolean(tooltip);
-    const tooltipAccessibilityProps = React.useMemo(
-      () => (hasTooltip ? { 'aria-describedby': tooltipId } : {}),
-      [hasTooltip, tooltipId],
-    );
+      if (process.env.NODE_ENV === 'development') {
+        throw new Error(errorMessage);
+      } else {
+        console.error(errorMessage);
+      }
+    }
 
     // Create the base icon button element with accessibility props
-    const iconButton = (
-      <BaseButton
-        {...props}
-        {...tooltipAccessibilityProps}
-        ref={forwardedRef}
-        className={classNames('rt-IconButton', className)}
-      />
-    );
+    const iconButton = <BaseButton {...props} {...tooltipAccessibilityProps} ref={forwardedRef} className={classNames('rt-IconButton', className)} />;
 
     // If no tooltip is provided, return the icon button as-is for better performance
-    if (!tooltip) {
+    if (!hasTooltip) {
       return iconButton;
     }
 
     // Wrap with Tooltip when tooltip content is provided
     // This creates a compound component that handles both button and tooltip functionality
     return (
-      <Tooltip
-        content={tooltip}
-        side={tooltipSide}
-        align={tooltipAlign}
-        delayDuration={tooltipDelayDuration}
-        disableHoverableContent={tooltipDisableHoverableContent}
-        id={tooltipId}
-      >
+      <Tooltip content={tooltip} side={tooltipSide} align={tooltipAlign} delayDuration={tooltipDelayDuration} disableHoverableContent={tooltipDisableHoverableContent} id={tooltipId}>
         {iconButton}
       </Tooltip>
     );

package/src/components/image.css

@@ -63,7 +63,7 @@
   .rt-Image {
     border: 1px solid CanvasText;
   }
-  
+
   /* Enhanced focus visibility in forced colors mode */
   .rt-Image:where(:focus-visible) {
     outline: 2px solid Highlight;
@@ -78,7 +78,9 @@
  */
 .rt-Image:where(:any-link, button, label) {
   cursor: pointer;
-  transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
+  transition:
+    var(--transition-card),
+    filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
 
   /* 
    * Hover effects with progressive enhancement
@@ -87,7 +89,7 @@
   @media (hover: hover) {
     &:where(:hover) {
       box-shadow: var(--shadow-3); /* Subtle elevation on hover */
-      filter: brightness(1.05) contrast(1.02); /* Slight brightness/contrast boost */
+      filter: brightness(1.08) contrast(1.02); /* Slight brightness/contrast boost */
     }
   }
 
@@ -116,13 +118,15 @@
  */
 :where(:any-link, button, label) {
   cursor: pointer;
-  transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
+  transition:
+    var(--transition-card),
+    filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
 
   /* Hover effects for wrapper elements */
   @media (hover: hover) {
     &:where(:hover) {
       /* box-shadow: var(--shadow-3); */
-      filter: brightness(1.05) contrast(1.02);
+      filter: brightness(1.08) contrast(1.02);
     }
   }
 
@@ -141,8 +145,6 @@
   outline-offset: -2px;
 }
 
-
-
 /* 
  * Object-fit variants for responsive image scaling
  * These classes control how images are resized to fit their containers
@@ -217,7 +219,7 @@
   color: var(--gray-11); /* Subtle but readable color */
   margin-top: var(--space-2); /* Consistent spacing from image */
   text-align: center; /* Centered alignment for visual balance */
-  
+
   /* 
    * Text wrapping and hyphenation for better layout
    * Prevents caption text from breaking the layout

package/src/components/shell.css

@@ -189,17 +189,16 @@
   width: var(--sidebar-thin-size, 64px);
 }
 
-.rt-ShellSidebar[data-mode='collapsed'] {
-  width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
-}
-
 /* Keep collapsed sidebar out of flow to avoid layout blips when exiting peek */
 .rt-ShellSidebar[data-mode='collapsed'] {
+  width: 0px;
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
+  flex-shrink: 0;
+  flex-basis: 0;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 .rt-ShellSidebarContent {
@@ -293,16 +292,16 @@
   width: var(--inspector-size, 320px);
 }
 
+/* Keep collapsed inspector out of flow to avoid layout issues */
 .rt-ShellInspector[data-mode='collapsed'] {
   width: 0px;
-  /* Delay container collapse until content fade completes */
-  transition-delay: var(--motion-duration-small);
-}
-
-.rt-ShellInspector[data-mode='collapsed'] {
   position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
+  flex-shrink: 0;
+  flex-basis: 0;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 .rt-ShellInspectorContent {

package/src/components/shell.tsx

@@ -265,13 +265,57 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
     (el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Inspector' && typeof (el as any).props?.open !== 'undefined' && Boolean((el as any).props?.open),
   );
 
+  // Detect Sidebar initial state from props
+  const getSidebarInitialState = (): SidebarMode => {
+    const sidebarEl = initialChildren.find((el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Sidebar');
+    if (!sidebarEl) return 'expanded';
+    const props = (sidebarEl as any).props;
+    // Check controlled state first
+    if (typeof props?.state !== 'undefined') {
+      if (typeof props.state === 'string') return props.state as SidebarMode;
+      // Responsive object - use 'initial' breakpoint or first defined value
+      if (typeof props.state === 'object') {
+        return (props.state.initial ?? Object.values(props.state)[0] ?? 'expanded') as SidebarMode;
+      }
+    }
+    // Check defaultState
+    if (typeof props?.defaultState !== 'undefined') {
+      if (typeof props.defaultState === 'string') return props.defaultState as SidebarMode;
+      if (typeof props.defaultState === 'object') {
+        return (props.defaultState.initial ?? Object.values(props.defaultState)[0] ?? 'expanded') as SidebarMode;
+      }
+    }
+    return 'expanded';
+  };
+
+  // Detect Bottom initial state from props
+  const getBottomInitialState = (): PaneMode => {
+    const bottomEl = initialChildren.find((el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Bottom');
+    if (!bottomEl) return 'collapsed';
+    const props = (bottomEl as any).props;
+    // Check controlled open first
+    if (typeof props?.open !== 'undefined') {
+      if (typeof props.open === 'boolean') return props.open ? 'expanded' : 'collapsed';
+      // Responsive object - use 'initial' breakpoint or first defined value
+      if (typeof props.open === 'object') {
+        const val = props.open.initial ?? Object.values(props.open)[0];
+        return val ? 'expanded' : 'collapsed';
+      }
+    }
+    // Check defaultOpen
+    if (typeof props?.defaultOpen !== 'undefined') {
+      return props.defaultOpen ? 'expanded' : 'collapsed';
+    }
+    return 'collapsed';
+  };
+
   // Pane state management via reducer
   const [paneState, dispatchPane] = React.useReducer(paneReducer, {
     leftMode: hasPanelDefaultOpen || hasRailDefaultOpen ? 'expanded' : 'collapsed',
     panelMode: hasPanelDefaultOpen ? 'expanded' : 'collapsed',
-    sidebarMode: 'expanded',
+    sidebarMode: getSidebarInitialState(),
     inspectorMode: hasInspectorDefaultOpen || hasInspectorOpenControlled ? 'expanded' : 'collapsed',
-    bottomMode: 'collapsed',
+    bottomMode: getBottomInitialState(),
   });
   const setLeftMode = React.useCallback((mode: PaneMode) => dispatchPane({ type: 'SET_LEFT_MODE', mode }), []);
   const setPanelMode = React.useCallback((mode: PaneMode) => dispatchPane({ type: 'SET_PANEL_MODE', mode }), []);
@@ -450,17 +494,21 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   const peekCtxValue = React.useMemo(() => ({ peekTarget, setPeekTarget, peekPane, clearPeek }), [peekTarget, setPeekTarget, peekPane, clearPeek]);
   const actionsCtxValue = React.useMemo(() => ({ togglePane, expandPane, collapsePane, setSidebarToggleComputer }), [togglePane, expandPane, collapsePane, setSidebarToggleComputer]);
 
+  // Memoized full context value for ShellProvider to prevent unnecessary effect re-runs
+  const shellContextValue = React.useMemo(
+    () => ({
+      ...baseContextValue,
+      peekTarget,
+      setPeekTarget,
+      peekPane,
+      clearPeek,
+    }),
+    [baseContextValue, peekTarget, setPeekTarget, peekPane, clearPeek],
+  );
+
   return (
     <div {...props} ref={ref} className={classNames('rt-ShellRoot', className)} style={{ ...heightStyle, ...props.style }}>
-      <ShellProvider
-        value={{
-          ...baseContextValue,
-          peekTarget,
-          setPeekTarget,
-          peekPane,
-          clearPeek,
-        }}
-      >
+      <ShellProvider value={shellContextValue}>
         <PresentationContext.Provider value={presentationCtxValue}>
           <LeftModeContext.Provider value={leftModeCtxValue}>
             <PanelModeContext.Provider value={panelModeCtxValue}>