@womp/kookie-ui 0.24.0 → 0.25.1

package/src/components/_internal/dropdown-menu-drill-down.tsx

@@ -20,7 +20,6 @@ type SubmenuBehavior = (typeof submenuBehaviors)[number];
  * never land on a hidden item.
  */
 
-type AnimationDirection = 'forward' | 'backward' | null;
 type Modality = 'keyboard' | 'pointer';
 
 interface StackEntry {
@@ -38,11 +37,10 @@ type LastChange =
 
 interface DrillDownState {
   stack: StackEntry[];
-  direction: AnimationDirection;
   lastChange: LastChange | null;
 }
 
-const INITIAL_STATE: DrillDownState = { stack: [], direction: null, lastChange: null };
+const INITIAL_STATE: DrillDownState = { stack: [], lastChange: null };
 
 const PANEL_ITEM_SELECTOR = '[role^="menuitem"]:not([data-disabled])';
 const BACK_ITEM_CLASS = 'kui-DropdownMenuDrillDownBackItem';
@@ -55,6 +53,12 @@ class DrillDownStore {
   private state = INITIAL_STATE;
   private listeners = new Set<() => void>();
   private modality: Modality = 'keyboard';
+  /**
+   * Controlled submenus. A request to open or close one of them goes to its
+   * `onOpenChange` instead of the stack; its `open` prop then moves the stack.
+   */
+  private controllers = new Map<string, (open: boolean) => void>();
+  private pendingModality = new Map<string, Modality | null>();
   /** The drill-down root element, set by the provider */
   rootElement: HTMLElement | null = null;
 
@@ -87,6 +91,26 @@ class DrillDownStore {
 
   isOpen = (id: string) => this.state.stack.some((entry) => entry.id === id);
 
+  setController = (id: string, onOpenChange: ((open: boolean) => void) | null) => {
+    if (onOpenChange) this.controllers.set(id, onOpenChange);
+    else this.controllers.delete(id);
+  };
+
+  /** The modality of the last open or close request for a controlled submenu. */
+  takePendingModality = (id: string) => {
+    const modality = this.pendingModality.get(id) ?? null;
+    this.pendingModality.delete(id);
+    return modality;
+  };
+
+  private request(id: string, open: boolean, modality: Modality | null) {
+    const controller = this.controllers.get(id);
+    if (!controller) return false;
+    this.pendingModality.set(id, modality);
+    controller(open);
+    return true;
+  }
+
   private getScrollContainer() {
     const root = this.rootElement;
     if (!root) return null;
@@ -108,6 +132,14 @@ class DrillDownStore {
    * (`null`) unless focus was lost.
    */
   push = (id: string, modality: Modality | null = this.modality) => {
+    const { stack } = this.state;
+    if (stack.some((entry) => entry.id === id)) return;
+    if (this.request(id, true, modality)) return;
+    this.open(id, modality);
+  };
+
+  /** Puts a submenu on the stack, bypassing its controller. */
+  open = (id: string, modality: Modality | null = null) => {
     const { stack } = this.state;
     if (stack.some((entry) => entry.id === id)) return;
     const trigger = this.getTrigger(id);
@@ -115,7 +147,6 @@ class DrillDownStore {
     const scrollTop = this.getScrollContainer()?.scrollTop ?? 0;
     this.setState({
       stack: [...stack, { id, name, scrollTop }],
-      direction: 'forward',
       lastChange: { type: 'push', id, modality },
     });
   };
@@ -124,28 +155,30 @@ class DrillDownStore {
     const { stack } = this.state;
     const top = stack[stack.length - 1];
     if (!top) return;
+    if (this.request(top.id, false, modality)) return;
     this.setState({
       stack: stack.slice(0, -1),
-      direction: 'backward',
       lastChange: { type: 'pop', id: top.id, modality, scrollTop: top.scrollTop },
     });
   };
 
-  /** Closes a submenu and everything opened from it, without moving focus to its trigger. */
-  close = (id: string) => {
+  /**
+   * Closes a submenu and everything opened from it, bypassing its controller.
+   * Focus moves to its trigger only for a keyboard close.
+   */
+  close = (id: string, modality: Modality | null = null) => {
     const { stack } = this.state;
     const index = stack.findIndex((entry) => entry.id === id);
     if (index === -1) return;
     this.setState({
       stack: stack.slice(0, index),
-      direction: 'backward',
-      lastChange: { type: 'pop', id, modality: null, scrollTop: stack[index].scrollTop },
+      lastChange: { type: 'pop', id, modality, scrollTop: stack[index].scrollTop },
     });
   };
 
   reset = () => {
-    if (this.state.stack.length === 0 && this.state.direction === null) return;
-    this.setState({ stack: [], direction: null, lastChange: { type: 'reset' } });
+    if (this.state.stack.length === 0) return;
+    this.setState({ stack: [], lastChange: { type: 'reset' } });
   };
 
   /**
@@ -212,9 +245,7 @@ function useCreateDrillDownStore() {
 }
 
 const selectDepth = (state: DrillDownState) => state.stack.length;
-const selectDirection = (state: DrillDownState) => state.direction;
 const getServerDepth = () => 0;
-const getServerDirection = (): AnimationDirection => null;
 
 interface DrillDownRootProps {
   store: DrillDownStore;
@@ -236,11 +267,6 @@ function DrillDownRoot({ store, behavior, open, children }: DrillDownRootProps)
     () => selectDepth(store.getState()),
     getServerDepth,
   );
-  const direction = React.useSyncExternalStore(
-    store.subscribe,
-    () => selectDirection(store.getState()),
-    getServerDirection,
-  );
   const isRoot = !isDrillDown || depth === 0;
 
   // Cascade mode has no stack. A reset while switching modes keeps the next
@@ -275,7 +301,6 @@ function DrillDownRoot({ store, behavior, open, children }: DrillDownRootProps)
         className="kui-DropdownMenuDrillDownRoot"
         data-submenu-behavior={behavior}
         data-drill-down-active={isRoot ? undefined : true}
-        data-animation-direction={isDrillDown ? (direction ?? undefined) : undefined}
         onKeyDownCapture={isDrillDown ? handleKeyDownCapture : undefined}
         onPointerDownCapture={isDrillDown ? handlePointerDownCapture : undefined}
       >
@@ -306,11 +331,6 @@ function useStackEntry(store: DrillDownStore | null, id: string): StackEntry | u
   return React.useSyncExternalStore(store?.subscribe ?? noopSubscribe, getSnapshot, getUndefined);
 }
 
-function useDrillDownDirection(store: DrillDownStore | null): AnimationDirection {
-  const getSnapshot = React.useCallback(() => store?.getState().direction ?? null, [store]);
-  return React.useSyncExternalStore(store?.subscribe ?? noopSubscribe, getSnapshot, getServerDirection);
-}
-
 const noopSubscribe = () => () => {};
 const getClosed = (): PanelPosition => 'closed';
 const getUndefined = () => undefined;
@@ -338,10 +358,9 @@ export {
   SubContext,
   useCreateDrillDownStore,
   useDrillDownStore,
-  useDrillDownDirection,
   usePanelPosition,
   useStackEntry,
   useSubContext,
 };
 
-export type { SubmenuBehavior, DrillDownStore, PanelPosition, SubContextValue, AnimationDirection };
+export type { SubmenuBehavior, DrillDownStore, PanelPosition, SubContextValue };

package/src/components/_internal/menu-context.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useLayoutEffect } from 'radix-ui/internal';
 
 import { useResolvedResponsiveValue } from './base-menu.utils.js';
 
@@ -27,6 +28,9 @@ interface MenuContextValue {
 
 const MenuContext = React.createContext<MenuContextValue>({ isInsideMenu: false });
 
+/** The register function of the menu Group a Label sits in (see useMenuGroupLabelId). */
+const MenuGroupLabelContext = React.createContext<((id: string | null) => void) | null>(null);
+
 interface MenuProviderProps {
   children: React.ReactNode;
   /** Menu size passed from parent (DropdownMenu.Content, ContextMenu.Content, etc.) */
@@ -55,7 +59,12 @@ export function MenuProvider({ children, size }: MenuProviderProps) {
     () => ({ isInsideMenu: true, size: resolvedSize, itemHeight }),
     [resolvedSize, itemHeight],
   );
-  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;
+  // A submenu is its own surface, so its labels never name a group of the parent menu.
+  return (
+    <MenuContext.Provider value={value}>
+      <MenuGroupLabelContext.Provider value={null}>{children}</MenuGroupLabelContext.Provider>
+    </MenuContext.Provider>
+  );
 }
 
 export function useMenuContext() {
@@ -72,3 +81,29 @@ export const MenuCloseProvider = MenuCloseContext.Provider;
 export function useMenuClose() {
   return React.useContext(MenuCloseContext);
 }
+
+/**
+ * Names a menu group by its label, the way v2's MenuGroup does. A Group holds the id of
+ * the Label inside it and points aria-labelledby at it, so a screen reader announces the
+ * section name when focus enters the group.
+ */
+export const MenuGroupLabelProvider = MenuGroupLabelContext.Provider;
+
+/** For a Group: the id its aria-labelledby points to, and the setter a nested Label calls. */
+export function useMenuGroupLabelledBy(ariaLabelledBy: string | undefined) {
+  const [labelId, setLabelId] = React.useState<string | null>(null);
+  return [ariaLabelledBy ?? labelId ?? undefined, setLabelId] as const;
+}
+
+/** For a Label: its id, registered with the Group it sits in while the label is rendered. */
+export function useMenuGroupLabelId(idProp: string | undefined, rendered = true) {
+  const register = React.useContext(MenuGroupLabelContext);
+  const generatedId = React.useId();
+  const id = idProp ?? generatedId;
+  useLayoutEffect(() => {
+    if (!register || !rendered) return;
+    register(id);
+    return () => register(null);
+  }, [register, id, rendered]);
+  return register ? id : idProp;
+}

package/src/components/_internal/pane-chrome.tsx

@@ -153,9 +153,11 @@ interface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {
 /**
  * The one region of a pane that scrolls; it takes the room the header and footer leave.
  * In `Shell.Content` it is the page's scroller, and a `Shell.PaneHeader float` beside it pins
- * the page's toolbar over it. It is not a landmark: for navigation, pass `role="navigation"` and an `aria-label`.
+ * the page's toolbar over it. The ref, events and ARIA props land on the element that scrolls;
+ * `className`, `style` and `dir` apply to the content inside it. In a Rail, Panel or Sidebar the pane is
+ * already a navigation landmark, so it needs no role of its own.
  */
-const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, children, fade = false, ...props }, forwardedRef) => {
+const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, style, dir, children, fade = false, ...props }, forwardedRef) => {
   const chrome = useChromeClasses();
   // A Sidebar.Root inside the content still gets a menu.
   const contentPane = React.useContext(ShellContentContext);
@@ -163,16 +165,16 @@ const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, child
   const inContent = contentPane && visual === null;
   if (inContent) {
     return (
-      <ScrollArea type="hover" fade={fade} className="kui-ShellScroll">
-        <div {...props} ref={forwardedRef} className={classNames('kui-ShellScrollContent', className)}>
+      <ScrollArea {...props} ref={forwardedRef} type="hover" fade={fade} className="kui-ShellScroll">
+        <div style={style} dir={dir} className={classNames('kui-ShellScrollContent', className)}>
           {children}
         </div>
       </ScrollArea>
     );
   }
   return (
-    <ScrollArea type="hover" fade={fade} className="kui-ShellScroll">
-      <div {...props} ref={forwardedRef} className={classNames('kui-BaseMenuContent', 'kui-SidebarContent', ...chrome, className)}>
+    <ScrollArea {...props} ref={forwardedRef} type="hover" fade={fade} className="kui-ShellScroll">
+      <div style={style} dir={dir} className={classNames('kui-BaseMenuContent', 'kui-SidebarContent', ...chrome, className)}>
         {/* A header's band does not reach a Toolbar in the scrolling list. */}
         <PaneBandSizeContext.Provider value={null}>
           <div className="kui-BaseMenuViewport">{children}</div>

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

@@ -153,3 +153,5 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
 
 Bottom.displayName = 'Shell.Bottom';
 Bottom.Handle = BottomHandle;
+
+export type { BottomPublicProps };

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useLayoutEffect } from 'radix-ui/internal';
 import classNames from 'classnames';
 import { usePaneResize } from './shell-resize.js';
 
@@ -91,7 +92,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
   };
 
   // The announced value is seeded from the real size once the pane has a box.
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     handleRef.current?.setAttribute('aria-valuenow', String(Math.round(readSize())));
   }, [readSize]);
 
@@ -293,6 +294,14 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
         props.onKeyDown?.(e);
         const container = containerRef.current;
         if (!container || e.defaultPrevented) return;
+        // Enter collapses and restores the pane, as a double-click does (WAI-ARIA window splitter).
+        if (e.key === 'Enter') {
+          if (collapsible && requestToggle) {
+            e.preventDefault();
+            requestToggle();
+          }
+          return;
+        }
         const current = readSize();
         // The keys reach as far as a drag does: the frame caps both.
         const cap = ceiling();

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

@@ -6,7 +6,7 @@ import { useComposedRefs } from 'radix-ui/internal';
 import { PaneResizeContext } from './shell-resize.js';
 import { InspectorHandle, PaneHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
-import { splitHandles, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
+import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
 import { useInsetRegistration, warnOnce } from './shell-store.js';
 import { detailRest, endAnchoredGrowth, toPaneValue, withoutRemovedPaneProps } from './shell-rest.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
@@ -129,9 +129,11 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
   const { handles, content } = splitHandles(children, InspectorHandle);
   const handle = resizable && pane.shown !== false && !pane.overlaying ? <PaneResizeContext.Provider value={resize}>{handles.length > 0 ? handles : <PaneHandle />}</PaneResizeContext.Provider> : null;
 
+  const initialSize = useInitialPaneSize(size, defaultSize, minSize, maxSize);
   return (
     <div
       {...withoutRemovedPaneProps(domProps)}
+      role={domProps.role ?? 'complementary'}
       id={pane.id}
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellInspector', className)}
@@ -142,6 +144,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
         {
           ...style,
           '--inspector-expanded-size': `${expandedSize}px`,
+          ...(initialSize ? { '--inspector-size': initialSize } : {}),
           '--inspector-min-size': `${minSize}px`,
           '--inspector-max-size': `${maxSize}px`,
         } as CSSPropertiesWithVars
@@ -155,3 +158,5 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
 
 Inspector.displayName = 'Shell.Inspector';
 Inspector.Handle = InspectorHandle;
+
+export type { InspectorPublicProps };

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

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useLayoutEffect } from 'radix-ui/internal';
 import { readBreakpoint, useBreakpoint } from '../../hooks/use-breakpoint.js';
 import type { Breakpoint, PaneName, PresentationValue } from '../shell.types.js';
 import {
@@ -121,7 +122,7 @@ export function usePane(options: UsePaneOptions) {
   // when a fact it carries changes.
   const defaultValue = options.defaultValue;
   const latest = React.useRef({ state, value, autoTable, defaultValue, controlled, onChange: options.onChange, toggleNext: options.toggleNext });
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     latest.current = { state, value, autoTable, defaultValue, controlled, onChange: options.onChange, toggleNext: options.toggleNext };
   });
 
@@ -170,7 +171,7 @@ export function usePane(options: UsePaneOptions) {
 
   // Registration. A layout effect so a Trigger's aria attributes and the
   // Root's containment are right before the browser paints.
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const entry: PaneEntry = {
       name,
       id,
@@ -197,7 +198,7 @@ export function usePane(options: UsePaneOptions) {
   // whether it is shown: a user's toggle, or a controlled prop. Never on
   // mount, and never because the window crossed a breakpoint.
   const callbacks = React.useRef({ onExpand: options.onExpand, onCollapse: options.onCollapse });
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     callbacks.current = { onExpand: options.onExpand, onCollapse: options.onCollapse };
   });
   const previous = React.useRef({ state, shown });
@@ -211,7 +212,7 @@ export function usePane(options: UsePaneOptions) {
   }, [state, shown]);
 
   // Development guards. Once per mount, not once per render.
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (process.env.NODE_ENV === 'production') return;
     if (options.controlled !== undefined && options.defaultValue !== undefined) {
       console.error(`Shell.${label}: Do not pass both \`${propNames.controlled}\` and \`${propNames.default}\`. Choose one.`);

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

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useLayoutEffect } from 'radix-ui/internal';
 import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 import type { PaneName, PaneSizePersistence } from '../shell.types.js';
 import type { PaneResizeContextValue } from './shell-resize.js';
@@ -49,6 +50,19 @@ export type ResizableOptions = {
  */
 const clampTo = (value: number, min: number | undefined, max: number | undefined) => Math.max(min ?? value, Math.min(max ?? value, value));
 
+/**
+ * The pane's starting size for the first render, so the server HTML already has it and the first
+ * paint is right. Only a number can be known before the pane exists (a percentage needs the
+ * Shell's width); the effects below still own the size after mount.
+ */
+export function useInitialPaneSize(size: number | string | undefined, defaultSize: number | string | undefined, minSize: number, maxSize: number) {
+  const [initial] = React.useState(() => {
+    const value = size ?? defaultSize;
+    return typeof value === 'number' && Number.isFinite(value) ? `${clampTo(value, minSize, maxSize)}px` : undefined;
+  });
+  return initial;
+}
+
 /** Everything a resizable pane shares: size props, persistence, and the handle's context. */
 export function useResizablePane(options: ResizableOptions): PaneResizeContextValue {
   const { name, elementRef, cssVarName, orientation, minSize, maxSize, resizable, size, defaultSize, paneId, persistence } = options;
@@ -57,7 +71,7 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
   // consumer passes an inline function. A controlled `size` is reported again
   // only when the size, the minimum or the maximum changes.
   const latest = React.useRef(options);
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     latest.current = options;
   });
 
@@ -110,12 +124,12 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
 
   // expandedSize: the size until something else sets one. Declared first, so
   // the effects below win on mount.
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!ownedRef.current) writeSize(options.expandedSize, false);
   }, [options.expandedSize, writeSize]);
 
   // defaultSize: applied once, on mount.
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (size !== undefined || defaultSize === undefined) return;
     const px = toPx(defaultSize);
     if (typeof px !== 'number' || !Number.isFinite(px)) return;
@@ -131,7 +145,7 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
   // an app's frame-sized limits (a maximum taken from the window) would
   // otherwise squeeze the drawer and report the squeezed size back. The size
   // is applied again when the pane returns to the frame.
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (size === undefined || latest.current.overlayingNow()) return;
     const px = toPx(size);
     if (typeof px !== 'number' || !Number.isFinite(px)) return;
@@ -140,9 +154,17 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
     emitSizeChange(clamped, { reason: 'controlled' });
   }, [size, minSize, maxSize, options.overlaying, toPx, writeSize, emitSizeChange]);
 
-  // A persistence adapter from `paneId` when none is given.
+  // A persistence adapter from `paneId` when none is given. A given one is read through
+  // `latest`, so an inline object (the documented shape) does not reload the size every render.
+  const hasPersistence = persistence !== undefined;
   const adapter = React.useMemo<PaneSizePersistence | undefined>(() => {
-    if (!paneId || persistence) return persistence;
+    if (hasPersistence) {
+      return {
+        load: () => latest.current.persistence?.load?.(),
+        save: (value: number) => latest.current.persistence?.save?.(value),
+      };
+    }
+    if (!paneId) return undefined;
     const key = `kookie-ui:shell:${name}:${paneId}`;
     return {
       load: () => {
@@ -164,12 +186,12 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
         }
       },
     };
-  }, [name, paneId, persistence]);
+  }, [name, paneId, hasPersistence]);
 
   // Persisted size, loaded in a layout effect and clamped, so a reload does
   // not paint the default and then jump. Only where the pane is in the frame:
   // an overlay keeps its designed size.
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!resizable || !adapter?.load || latest.current.overlayingNow()) return undefined;
     let mounted = true;
     const apply = (value: number | undefined) => {

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

@@ -6,7 +6,7 @@ import { useComposedRefs } from 'radix-ui/internal';
 import { PaneResizeContext } from './shell-resize.js';
 import { PaneHandle, SidebarHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
-import { splitHandles, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
+import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
 import { useInsetRegistration, warnOnce, type PaneValue } from './shell-store.js';
 import { navigationRest, startAnchoredGrowth, withoutRemovedPaneProps } from './shell-rest.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
@@ -148,9 +148,11 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
   // A peek previews the width the next toggle opens to.
   const peekWidth = pane.peeking ? `var(--sidebar-size, ${expandedSize}px)` : undefined;
 
+  const initialSize = useInitialPaneSize(size, defaultSize, minSize, maxSize);
   return (
     <div
       {...withoutRemovedPaneProps(domProps)}
+      role={domProps.role ?? 'navigation'}
       id={pane.id}
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellSidebar', className)}
@@ -161,6 +163,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
         {
           ...style,
           '--sidebar-expanded-size': `${expandedSize}px`,
+          ...(initialSize ? { '--sidebar-size': initialSize } : {}),
           '--sidebar-min-size': `${minSize}px`,
           '--sidebar-max-size': `${maxSize}px`,
           ...(peekWidth ? { '--peek-sidebar-width': peekWidth } : {}),
@@ -177,3 +180,5 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
 
 Sidebar.displayName = 'Shell.Sidebar';
 Sidebar.Handle = SidebarHandle;
+
+export type { SidebarPublicProps };

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

@@ -19,6 +19,7 @@
  *   construction.
  */
 import * as React from 'react';
+import { useLayoutEffect } from 'radix-ui/internal';
 import { SHELL_BREAKPOINTS } from '../shell.types.js';
 import type { Breakpoint, PaneName, PresentationValue } from '../shell.types.js';
 
@@ -184,7 +185,7 @@ export function useInsetRegistration(id: InsetPaneId, inset: boolean | undefined
   const ctx = React.useContext(ShellInsetContext);
   if (!ctx) throw new Error('Shell panes must be used within <Shell.Root>');
   const { registerInset, unregisterInset } = ctx;
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!inset) return;
     registerInset(id);
     return () => unregisterInset(id);