@womp/kookie-ui 0.23.0 → 0.25.0

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,9 +59,51 @@ 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() {
   return React.useContext(MenuContext);
 }
+
+/**
+ * Closes the whole menu from inside it. DropdownMenu.Root and ContextMenu.Root provide it,
+ * so a VirtualMenu row can close the menu on select the way a menu item does.
+ */
+const MenuCloseContext = React.createContext<(() => void) | undefined>(undefined);
+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

@@ -13,6 +13,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ScrollArea } from '../scroll-area.js';
+import { ShellStoreContext } from './shell-store.js';
 
 type PaneSize = '1' | '2' | '3';
 
@@ -33,6 +34,13 @@ function useSidebarVisual() {
 /** The Shell's index. `Shell.Root size` sets it; panes hand it to their chrome. */
 const ShellSizeContext = React.createContext<PaneSize>('2');
 
+/**
+ * True inside `Shell.Content`. `Shell.Root` sets it back to false, so a Shell nested in the
+ * content gets pane chrome in its own panes. Read by `Shell.Scroll`: in the content it holds a
+ * page, not a menu, so it takes none of the menu's padding, gap or layering.
+ */
+const ShellContentContext = React.createContext(false);
+
 /**
  * Gives a Shell pane's children the Shell's index, so Sidebar parts size themselves. In a Rail
  * the rows are `thin`: icon tiles with a small label, sub-menus as dropdowns.
@@ -60,12 +68,11 @@ type BandSize = '1' | '2' | '3' | '4';
  */
 const BAND_STEP = { '1': '2', '2': '3', '3': '4', '4': '4' } as const satisfies Record<BandSize, BandSize>;
 
-/** Set by `Shell.PaneHeader` and `Shell.PaneFooter`; read by Toolbar as its fallback size. Null elsewhere. */
-const PaneBandSizeContext = React.createContext<BandSize | null>(null);
-
-function usePaneBandSize() {
-  return React.useContext(PaneBandSizeContext);
-}
+/**
+ * Set by `Shell.PaneHeader` and `Shell.PaneFooter` to their band size, and by `Shell.Scroll` to
+ * null (a scrolling list has no band). Unset (`undefined`) everywhere else.
+ */
+const PaneBandSizeContext = React.createContext<BandSize | null | undefined>(undefined);
 
 function useBandSize(): BandSize {
   const visual = useSidebarVisual();
@@ -73,6 +80,22 @@ function useBandSize(): BandSize {
   return BAND_STEP[visual?.size ?? shellSize];
 }
 
+/**
+ * The size a Toolbar with no `size` of its own rests at, or null for none.
+ *
+ * In a pane's header or footer it is that band's size. Anywhere else inside a Shell, such as
+ * `Shell.Content` or a pane's body, it is the same step: one above the Shell's index, so a
+ * toolbar in the content area matches the ones in the pane headers beside it (v2 sizes every
+ * toolbar this way). A pane's scrolling list, and anything outside a Shell, has none.
+ */
+function usePaneBandSize(): BandSize | null {
+  const band = React.useContext(PaneBandSizeContext);
+  const inShell = React.useContext(ShellStoreContext) !== null;
+  const step = useBandSize();
+  if (band !== undefined) return band;
+  return inShell ? step : null;
+}
+
 interface PaneHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * Floats the row over the top of `Shell.Scroll`, so the list scrolls behind it. The list
@@ -129,13 +152,29 @@ interface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {
 
 /**
  * The one region of a pane that scrolls; it takes the room the header and footer leave.
- * It is not a landmark: for navigation, pass `role="navigation"` and an `aria-label`.
+ * In `Shell.Content` it is the page's scroller, and a `Shell.PaneHeader float` beside it pins
+ * 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);
+  const visual = useSidebarVisual();
+  const inContent = contentPane && visual === null;
+  if (inContent) {
+    return (
+      <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>
@@ -146,5 +185,5 @@ const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, child
 });
 Scroll.displayName = 'Shell.Scroll';
 
-export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll, BAND_STEP, usePaneBandSize };
+export { SidebarVisualContext, useSidebarVisual, ShellSizeContext, ShellContentContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll, BAND_STEP, usePaneBandSize };
 export type { SidebarVisualContextValue, PaneSize, BandSize, PaneHeaderProps, PaneFooterProps, ScrollProps };

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

@@ -132,6 +132,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
   return (
     <div
       {...withoutRemovedPaneProps(domProps)}
+      role={domProps.role ?? 'complementary'}
       id={pane.id}
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellInspector', className)}
@@ -155,3 +156,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';
@@ -57,7 +58,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 +111,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 +132,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 +141,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 +173,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

@@ -151,6 +151,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
   return (
     <div
       {...withoutRemovedPaneProps(domProps)}
+      role={domProps.role ?? 'navigation'}
       id={pane.id}
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellSidebar', className)}
@@ -177,3 +178,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);