@kushagradhawan/kookie-ui 0.1.70 → 0.1.72

package/src/components/shell.tsx

@@ -29,13 +29,14 @@ import * as React from 'react';
 import classNames from 'classnames';
 import * as Sheet from './sheet.js';
 import { VisuallyHidden } from './visually-hidden.js';
-import { useResponsivePresentation, useResponsiveValue } from './shell.hooks.js';
+import { useResponsivePresentation, useResponsiveInitialState } from './shell.hooks.js';
 import { PaneResizeContext } from './_internal/shell-resize.js';
 import { PaneHandle, PanelHandle } from './_internal/shell-handles.js';
+import { omitPaneProps, extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './_internal/shell-prop-helpers.js';
 import { Sidebar } from './_internal/shell-sidebar.js';
 import { Bottom } from './_internal/shell-bottom.js';
 import { Inspector } from './_internal/shell-inspector.js';
-import type { PresentationValue, ResponsivePresentation, PaneMode, SidebarMode, PaneSizePersistence, Breakpoint, PaneTarget, Responsive } from './shell.types.js';
+import type { PresentationValue, ResponsivePresentation, PaneMode, SidebarMode, PaneSizePersistence, Breakpoint, PaneTarget, Responsive, PaneBaseProps } from './shell.types.js';
 import { _BREAKPOINTS } from './shell.types.js';
 import {
   ShellProvider,
@@ -135,6 +136,26 @@ type PaneAction =
   | { type: 'EXPAND_PANE'; target: PaneTarget }
   | { type: 'COLLAPSE_PANE'; target: PaneTarget };
 
+const SHELL_SLOT = Symbol('rtShellSlot');
+
+function assignShellSlot<T extends React.ComponentType<any>>(component: T, slot: string): T {
+  (component as any)[SHELL_SLOT] = slot;
+  return component;
+}
+
+function isShellComponent(element: React.ReactElement, component: any): boolean {
+  if (!React.isValidElement(element)) return false;
+  const type: any = element.type;
+  if (type === component) return true;
+  const targetSlot = (component as any)?.[SHELL_SLOT];
+  return Boolean(type?.[SHELL_SLOT] && targetSlot && type[SHELL_SLOT] === targetSlot);
+}
+
+// Tag imported slot components so isType remains stable after minification
+assignShellSlot(Sidebar as any, 'Shell.Sidebar');
+assignShellSlot(Inspector as any, 'Shell.Inspector');
+assignShellSlot(Bottom as any, 'Shell.Bottom');
+
 function paneReducer(state: PaneState, action: PaneAction): PaneState {
   switch (action.type) {
     case 'SET_LEFT_MODE': {
@@ -239,13 +260,17 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   const initialChildren = React.Children.toArray(children) as React.ReactElement[];
   const hasPanelDefaultOpen = initialChildren.some((el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Panel' && Boolean((el as any).props?.defaultOpen));
   const hasRailDefaultOpen = initialChildren.some((el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Rail' && Boolean((el as any).props?.defaultOpen));
+  const hasInspectorDefaultOpen = initialChildren.some((el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Inspector' && Boolean((el as any).props?.defaultOpen));
+  const hasInspectorOpenControlled = initialChildren.some(
+    (el) => React.isValidElement(el) && (el as any).type?.displayName === 'Shell.Inspector' && typeof (el as any).props?.open !== 'undefined' && Boolean((el as any).props?.open),
+  );
 
   // Pane state management via reducer
   const [paneState, dispatchPane] = React.useReducer(paneReducer, {
     leftMode: hasPanelDefaultOpen || hasRailDefaultOpen ? 'expanded' : 'collapsed',
     panelMode: hasPanelDefaultOpen ? 'expanded' : 'collapsed',
     sidebarMode: 'expanded',
-    inspectorMode: 'collapsed',
+    inspectorMode: hasInspectorDefaultOpen || hasInspectorOpenControlled ? 'expanded' : 'collapsed',
     bottomMode: 'collapsed',
   });
   const setLeftMode = React.useCallback((mode: PaneMode) => dispatchPane({ type: 'SET_LEFT_MODE', mode }), []);
@@ -425,17 +450,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}>
@@ -496,7 +525,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
       </ShellProvider>
     </div>
   );
-});
+}) as PanelComponent;
 Root.displayName = 'Shell.Root';
 
 // Header
@@ -518,26 +547,7 @@ const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(({ className, hei
 Header.displayName = 'Shell.Header';
 
 // Pane Props Interface (shared by Panel, Sidebar, Inspector, Bottom)
-interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
-  presentation?: ResponsivePresentation;
-  expandedSize?: number;
-  minSize?: number;
-  maxSize?: number;
-  resizable?: boolean;
-  collapsible?: boolean;
-  onExpand?: () => void;
-  onCollapse?: () => void;
-  onResize?: (size: number) => void;
-  /** Optional custom content inside the resizer handle (kept unstyled). */
-  resizer?: React.ReactNode;
-  onResizeStart?: (size: number) => void;
-  onResizeEnd?: (size: number) => void;
-  snapPoints?: number[];
-  snapTolerance?: number;
-  collapseThreshold?: number;
-  paneId?: string;
-  persistence?: PaneSizePersistence;
-}
+type PaneProps = PaneBaseProps;
 
 // Left container (auto-created for Rail+Panel)
 interface LeftProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -549,6 +559,9 @@ interface LeftProps extends React.ComponentPropsWithoutRef<'div'> {
   collapsible?: boolean;
   onExpand?: () => void;
   onCollapse?: () => void;
+  mode?: never;
+  defaultMode?: never;
+  onModeChange?: never;
 }
 
 // Rail (special case)
@@ -566,166 +579,120 @@ type RailProps = React.ComponentPropsWithoutRef<'div'> & {
 } & (RailControlledProps | RailUncontrolledProps);
 
 // Left container - behaves like Inspector but contains Rail+Panel
-const Left = React.forwardRef<HTMLDivElement, LeftProps>(
-  ({ className, presentation = { initial: 'fixed', sm: 'fixed' }, collapsible: _collapsible = true, onExpand, onCollapse, children, style, ...props }, ref) => {
-    const shell = useShell();
-    const resolvedPresentation = useResponsivePresentation(presentation);
-    const isOverlay = resolvedPresentation === 'overlay';
-    const isStacked = resolvedPresentation === 'stacked';
-    const localRef = React.useRef<HTMLDivElement | null>(null);
-    // Publish resolved presentation so Root can gate peeking in overlay
-    React.useEffect(() => {
-      (shell as any).onLeftPres?.(resolvedPresentation);
-    }, [shell, resolvedPresentation]);
-    const setRef = React.useCallback(
-      (node: HTMLDivElement | null) => {
-        localRef.current = node;
-        if (typeof ref === 'function') ref(node);
-        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
-      },
-      [ref],
-    );
-
-    // Register with shell
-    React.useEffect(() => {
-      shell.setHasLeft(true);
-      return () => shell.setHasLeft(false);
-    }, [shell]);
+const LEFT_DOM_OMIT_PROPS = ['open', 'defaultOpen', 'onOpenChange', 'mode', 'defaultMode', 'onModeChange'] as const;
+
+const Left = React.forwardRef<HTMLDivElement, LeftProps>((initialProps, ref) => {
+  const { className, presentation = { initial: 'fixed', sm: 'fixed' }, collapsible: _collapsible = true, onExpand, onCollapse, children, style, ...restProps } = initialProps;
+  const propsOpen = restProps.open;
+  const propsDefaultOpen = restProps.defaultOpen;
+  const propsOnOpenChange = restProps.onOpenChange;
+  const domProps = omitPaneProps(restProps, LEFT_DOM_OMIT_PROPS);
+  const shell = useShell();
+  const resolvedPresentation = useResponsivePresentation(presentation);
+  const isOverlay = resolvedPresentation === 'overlay';
+  const isStacked = resolvedPresentation === 'stacked';
+  const localRef = React.useRef<HTMLDivElement | null>(null);
+  // Publish resolved presentation so Root can gate peeking in overlay
+  React.useEffect(() => {
+    (shell as any).onLeftPres?.(resolvedPresentation);
+  }, [shell, resolvedPresentation]);
+  const setRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      localRef.current = node;
+      if (typeof ref === 'function') ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    },
+    [ref],
+  );
 
-    const _lastBpRef = React.useRef<Breakpoint | null>(null);
-    const lastLeftModeRef = React.useRef<PaneMode | null>(null);
-    const initNotifiedRef = React.useRef(false);
-    const resolvedDefaultOpen = useResponsiveValue((props as any).defaultOpen as any);
+  // Register with shell
+  React.useEffect(() => {
+    shell.setHasLeft(true);
+    return () => shell.setHasLeft(false);
+  }, [shell]);
+
+  const lastLeftModeRef = React.useRef<PaneMode | null>(null);
+  const initNotifiedRef = React.useRef(false);
+  const normalizedLeftControlled = React.useMemo(() => {
+    if (typeof propsOpen === 'undefined') return undefined;
+    return propsOpen ? 'expanded' : 'collapsed';
+  }, [propsOpen]);
+  const normalizedLeftDefault = React.useMemo(() => mapResponsiveBooleanToPaneMode(propsDefaultOpen), [propsDefaultOpen]);
+  useResponsiveInitialState<PaneMode>({
+    controlledValue: normalizedLeftControlled,
+    defaultValue: normalizedLeftDefault,
+    currentValue: shell.leftMode,
+    setValue: shell.setLeftMode,
+    breakpointReady: shell.currentBreakpointReady,
+    onInit: (initial) => propsOnOpenChange?.(initial === 'expanded', { reason: 'init' }),
+  });
 
-    // Initialize from responsive defaultOpen once when uncontrolled and breakpoint ready
-    const didInitFromDefaultOpenRef = React.useRef(false);
-    const propsOpen = (props as any).open;
-    const propsDefaultOpen = (props as any).defaultOpen;
-    React.useEffect(() => {
-      if (didInitFromDefaultOpenRef.current) return;
-      if (!shell.currentBreakpointReady) return;
-      if (typeof propsOpen !== 'undefined') return; // controlled
-      if (typeof propsDefaultOpen === 'undefined') return;
-      didInitFromDefaultOpenRef.current = true;
-      const initial = Boolean(resolvedDefaultOpen);
-      shell.setLeftMode(initial ? 'expanded' : 'collapsed');
-      (props as any).onOpenChange?.(initial, { reason: 'init' });
-    }, [shell, propsOpen, propsDefaultOpen, resolvedDefaultOpen, props]);
-    React.useEffect(() => {
-      // Controlled Left via Rail.open
-      if (typeof propsOpen !== 'undefined') {
-        const shouldOpen = Boolean(propsOpen);
-        shell.setLeftMode(shouldOpen ? 'expanded' : 'collapsed');
-        return;
-      }
-      // defaultOpen is applied in Rail; Left no longer follows responsive defaults
-    }, [shell, propsOpen]);
+  // Emit mode changes (uncontrolled toggles + init)
+  React.useEffect(() => {
+    if (typeof propsOpen !== 'undefined') return; // controlled, notifications only via parent changes
+    if (lastLeftModeRef.current !== null && lastLeftModeRef.current !== shell.leftMode) {
+      propsOnOpenChange?.(shell.leftMode === 'expanded', { reason: 'toggle' });
+    }
+    lastLeftModeRef.current = shell.leftMode;
+  }, [shell, propsOnOpenChange, propsOpen]);
 
-    // Sync controlled mode
-    // removed mode sync
+  // Emit expand/collapse events
+  React.useEffect(() => {
+    if (shell.leftMode === 'expanded') {
+      onExpand?.();
+    } else {
+      onCollapse?.();
+    }
+  }, [shell.leftMode, onExpand, onCollapse]);
 
-    // Emit mode changes (uncontrolled toggles + init)
-    React.useEffect(() => {
-      if (typeof (props as any).open !== 'undefined') return; // controlled, notifications only via parent changes
-      if (!initNotifiedRef.current && Boolean(resolvedDefaultOpen) && shell.leftMode === 'expanded') {
-        (props as any).onOpenChange?.(true, { reason: 'init' });
-        initNotifiedRef.current = true;
-      }
-      if (lastLeftModeRef.current !== null && lastLeftModeRef.current !== shell.leftMode) {
-        (props as any).onOpenChange?.(shell.leftMode === 'expanded', { reason: 'toggle' });
-      }
-      lastLeftModeRef.current = shell.leftMode;
-    }, [shell, resolvedDefaultOpen, props]);
+  const _isExpanded = shell.leftMode === 'expanded';
 
-    // Emit expand/collapse events
-    React.useEffect(() => {
-      if (shell.leftMode === 'expanded') {
-        onExpand?.();
-      } else {
-        onCollapse?.();
-      }
-    }, [shell.leftMode, onExpand, onCollapse]);
-
-    const _isExpanded = shell.leftMode === 'expanded';
-
-    // Left is not resizable; width derives from Rail/Panel.
-
-    if (isOverlay) {
-      const open = shell.leftMode === 'expanded';
-      // Compute overlay width from child Rail/Panel expanded sizes
-      const childArray = React.Children.toArray(children) as React.ReactElement[];
-      const isType = (el: React.ReactElement, comp: any) => React.isValidElement(el) && el.type === comp;
-      const railEl = childArray.find((el) => isType(el, Rail));
-      const panelEl = childArray.find((el) => isType(el, Panel));
-      const railSize = typeof (railEl as any)?.props?.expandedSize === 'number' ? (railEl as any).props.expandedSize : 64;
-      const panelSize = typeof (panelEl as any)?.props?.expandedSize === 'number' ? (panelEl as any).props.expandedSize : 288;
-      const hasRail = Boolean(railEl);
-      const hasPanel = Boolean(panelEl);
-      const overlayPx = (hasRail ? railSize : 0) + (shell.panelMode === 'expanded' && hasPanel ? panelSize : 0);
-      return (
-        <Sheet.Root open={open} onOpenChange={(o) => shell.setLeftMode(o ? 'expanded' : 'collapsed')}>
-          <Sheet.Content
-            side="start"
-            style={{ padding: 0 }}
-            width={{
-              initial: `${overlayPx}px`,
-            }}
-          >
-            <VisuallyHidden>
-              <Sheet.Title>Navigation</Sheet.Title>
-            </VisuallyHidden>
-            <div className="rt-ShellLeft">{children}</div>
-          </Sheet.Content>
-        </Sheet.Root>
-      );
-    }
+  // Left is not resizable; width derives from Rail/Panel.
 
-    if (isStacked) {
-      const open = shell.leftMode === 'expanded';
-      // Compute floating width from child Rail/Panel expanded sizes (like overlay)
-      const childArray = React.Children.toArray(children) as React.ReactElement[];
-      const isType = (el: React.ReactElement, comp: any) => React.isValidElement(el) && el.type === comp;
-      const railEl = childArray.find((el) => isType(el, Rail));
-      const panelEl = childArray.find((el) => isType(el, Panel));
-      const _railSize = typeof (railEl as any)?.props?.expandedSize === 'number' ? (railEl as any).props.expandedSize : 64;
-      const _panelSize = typeof (panelEl as any)?.props?.expandedSize === 'number' ? (panelEl as any).props.expandedSize : 288;
-      const _hasRail = Boolean(railEl);
-      const _hasPanel = Boolean(panelEl);
-      const _includePanel = _hasPanel && (shell.panelMode === 'expanded' || shell.peekTarget === 'panel');
-
-      // Strip control props from DOM spread
-      const { open: _openIgnored, defaultOpen: _defaultOpenIgnored, onOpenChange: _onOpenChangeIgnored, ...stackDomProps } = props as any;
-
-      return (
-        <div
-          {...stackDomProps}
-          ref={setRef}
-          className={classNames('rt-ShellLeft', className)}
-          data-mode={shell.leftMode}
-          data-peek={shell.peekTarget === 'left' || shell.peekTarget === 'rail' || shell.peekTarget === 'panel' || undefined}
-          data-presentation={resolvedPresentation}
-          style={{
-            ...style,
+  if (isOverlay) {
+    const open = shell.leftMode === 'expanded';
+    // Compute overlay width from child Rail/Panel expanded sizes
+    const childArray = React.Children.toArray(children) as React.ReactElement[];
+    const isType = (el: React.ReactElement, comp: any) => React.isValidElement(el) && el.type === comp;
+    const railEl = childArray.find((el) => isType(el, Rail));
+    const panelEl = childArray.find((el) => isType(el, Panel));
+    const railSize = typeof (railEl as any)?.props?.expandedSize === 'number' ? (railEl as any).props.expandedSize : 64;
+    const panelSize = typeof (panelEl as any)?.props?.expandedSize === 'number' ? (panelEl as any).props.expandedSize : 288;
+    const hasRail = Boolean(railEl);
+    const hasPanel = Boolean(panelEl);
+    const overlayPx = (hasRail ? railSize : 0) + (shell.panelMode === 'expanded' && hasPanel ? panelSize : 0);
+    return (
+      <Sheet.Root open={open} onOpenChange={(o) => shell.setLeftMode(o ? 'expanded' : 'collapsed')}>
+        <Sheet.Content
+          side="start"
+          style={{ padding: 0 }}
+          width={{
+            initial: `${overlayPx}px`,
           }}
-          data-open={open || undefined}
         >
-          {children}
-        </div>
-      );
-    }
+          <VisuallyHidden>
+            <Sheet.Title>Navigation</Sheet.Title>
+          </VisuallyHidden>
+          <div className="rt-ShellLeft">{children}</div>
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
 
-    // Strip control/legacy props from DOM spread
-    const {
-      open: _openIgnored,
-      defaultOpen: _defaultOpenIgnored,
-      onOpenChange: _onOpenChangeIgnored,
-      // legacy
-      mode: _legacyModeIgnored,
-      defaultMode: _legacyDefaultModeIgnored,
-      onModeChange: _legacyOnModeChangeIgnored,
-      ...domProps
-    } = props as any;
+  if (isStacked) {
+    const open = shell.leftMode === 'expanded';
+    // Compute floating width from child Rail/Panel expanded sizes (like overlay)
+    const childArray = React.Children.toArray(children) as React.ReactElement[];
+    const isType = (el: React.ReactElement, comp: any) => React.isValidElement(el) && el.type === comp;
+    const railEl = childArray.find((el) => isType(el, Rail));
+    const panelEl = childArray.find((el) => isType(el, Panel));
+    const _railSize = typeof (railEl as any)?.props?.expandedSize === 'number' ? (railEl as any).props.expandedSize : 64;
+    const _panelSize = typeof (panelEl as any)?.props?.expandedSize === 'number' ? (panelEl as any).props.expandedSize : 288;
+    const _hasRail = Boolean(railEl);
+    const _hasPanel = Boolean(panelEl);
+    const _includePanel = _hasPanel && (shell.panelMode === 'expanded' || shell.peekTarget === 'panel');
 
+    // Strip control props from DOM spread
     return (
       <div
         {...domProps}
@@ -737,28 +704,48 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
         style={{
           ...style,
         }}
+        data-open={open || undefined}
       >
         {children}
       </div>
     );
-  },
-);
+  }
+
+  // Strip control/legacy props from DOM spread
+  return (
+    <div
+      {...domProps}
+      ref={setRef}
+      className={classNames('rt-ShellLeft', className)}
+      data-mode={shell.leftMode}
+      data-peek={shell.peekTarget === 'left' || shell.peekTarget === 'rail' || shell.peekTarget === 'panel' || undefined}
+      data-presentation={resolvedPresentation}
+      style={{
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+});
 Left.displayName = 'Shell.Left';
+assignShellSlot(Left as any, 'Shell.Left');
 
-const Rail = React.forwardRef<HTMLDivElement, RailProps>(({ className, presentation, expandedSize = 64, collapsible, onExpand, onCollapse, children, style, ...props }, ref) => {
+const Rail = React.forwardRef<HTMLDivElement, RailProps>((initialProps, ref) => {
+  const { className, presentation, expandedSize = 64, collapsible, onExpand, onCollapse, children, style, open, defaultOpen, onOpenChange, ...domProps } = initialProps;
   const shell = useShell();
 
   // Dev guards
   const wasControlledRef = React.useRef<boolean | null>(null);
   if (process.env.NODE_ENV !== 'production') {
-    if (typeof props.open !== 'undefined' && typeof props.defaultOpen !== 'undefined') {
+    if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {
       console.error('Shell.Rail: Do not pass both `open` and `defaultOpen`. Choose one.');
     }
   }
 
   // Warn on controlled/uncontrolled mode switch
   React.useEffect(() => {
-    const isControlled = typeof props.open !== 'undefined';
+    const isControlled = typeof open !== 'undefined';
     if (wasControlledRef.current === null) {
       wasControlledRef.current = isControlled;
       return;
@@ -767,7 +754,7 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>(({ className, presentat
       console.warn('Shell.Rail: Switching between controlled and uncontrolled `open` is not supported.');
       wasControlledRef.current = isControlled;
     }
-  }, [props.open]);
+  }, [open]);
 
   // Register expanded size with Left container
   React.useEffect(() => {
@@ -777,8 +764,6 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>(({ className, presentat
   const isExpanded = shell.leftMode === 'expanded';
 
   // Strip unknown open/defaultOpen props from DOM by not spreading them
-  const { defaultOpen: _defaultOpenIgnored, open: _openIgnored, onOpenChange: _onOpenChangeIgnored, ...domProps } = props as any;
-
   return (
     <div
       {...domProps}
@@ -798,6 +783,7 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>(({ className, presentat
   );
 });
 Rail.displayName = 'Shell.Rail';
+assignShellSlot(Rail as any, 'Shell.Rail');
 
 // Panel
 type HandleComponent = React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>>;
@@ -836,9 +822,23 @@ type _InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.Ref
 
 type _BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
 
-const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
-  (
-    {
+const PANEL_DOM_PROP_KEYS = [
+  'className',
+  'children',
+  'defaultOpen',
+  'open',
+  'onOpenChange',
+  'size',
+  'defaultSize',
+  'onSizeChange',
+  'sizeUpdate',
+  'sizeUpdateMs',
+  'style',
+] as const satisfies readonly (keyof PanelPublicProps)[];
+
+const Panel = assignShellSlot(
+  React.forwardRef<HTMLDivElement, PanelPublicProps>((initialProps, ref) => {
+    const {
       className,
       defaultOpen,
       open,
@@ -865,10 +865,8 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
       onSizeChange,
       sizeUpdate,
       sizeUpdateMs = 50,
-      ...props
-    },
-    ref,
-  ) => {
+    } = initialProps;
+    const panelDomProps = extractPaneDomProps(initialProps, PANEL_DOM_PROP_KEYS);
     // Throttled/debounced emitter for onSizeChange
     const emitSizeChange = React.useMemo(() => {
       if (!onSizeChange) return () => {};
@@ -1141,16 +1139,6 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
         </PaneResizeContext.Provider>
       ) : null;
 
-    // Strip control props from DOM spread
-    const {
-      defaultOpen: _panelDefaultOpenIgnored,
-      open: _panelOpenIgnored,
-      onOpenChange: _panelOnOpenChangeIgnored,
-      size: _panelSizeIgnored,
-      defaultSize: _panelDefaultSizeIgnored,
-      ...panelDomProps
-    } = props as any;
-
     return (
       <div
         {...panelDomProps}
@@ -1170,7 +1158,8 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
         {handleEl}
       </div>
     );
-  },
+  }),
+  'Shell.Panel',
 ) as PanelComponent;
 Panel.displayName = 'Shell.Panel';
 Panel.Handle = PanelHandle;
@@ -1182,6 +1171,7 @@ interface ShellContentProps extends React.ComponentPropsWithoutRef<'main'> {}
 
 const Content = React.forwardRef<HTMLElement, ShellContentProps>(({ className, ...props }, ref) => <main {...props} ref={ref} className={classNames('rt-ShellContent', className)} />);
 Content.displayName = 'Shell.Content';
+assignShellSlot(Content as any, 'Shell.Content');
 
 // Inspector moved to ./_internal/shell-inspector
 

package/src/components/shell.types.ts

@@ -1,3 +1,5 @@
+import type * as React from 'react';
+
 export type PresentationValue = 'fixed' | 'overlay' | 'stacked';
 
 export type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;
@@ -16,6 +18,27 @@ export type PaneSizePersistence = {
   save?: (size: number) => void | Promise<void>;
 };
 
+export interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {
+  presentation?: ResponsivePresentation;
+  expandedSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  height?: string | number;
+  resizable?: boolean;
+  collapsible?: boolean;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  onResize?: (size: number) => void;
+  resizer?: React.ReactNode;
+  onResizeStart?: (size: number) => void;
+  onResizeEnd?: (size: number) => void;
+  snapPoints?: number[];
+  snapTolerance?: number;
+  collapseThreshold?: number;
+  paneId?: string;
+  persistence?: PaneSizePersistence;
+}
+
 export const _BREAKPOINTS = {
   xs: '(min-width: 520px)',
   sm: '(min-width: 768px)',