@kushagradhawan/kookie-ui 0.1.47 → 0.1.49

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

@@ -0,0 +1,251 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Sheet from '../sheet.js';
+import { VisuallyHidden } from '../visually-hidden.js';
+import { useShell } from '../shell.context.js';
+import { useResponsivePresentation } from '../shell.hooks.js';
+import { PaneResizeContext } from './shell-resize.js';
+import { BottomHandle, PaneHandle } from './shell-handles.js';
+import { BREAKPOINTS } from '../shell.types.js';
+import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
+
+interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
+  presentation?: ResponsivePresentation;
+  mode?: PaneMode;
+  defaultMode?: any;
+  onModeChange?: (mode: PaneMode) => void;
+  expandedSize?: number;
+  minSize?: number;
+  maxSize?: 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;
+}
+
+type BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };
+
+export const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(
+  (
+    {
+      className,
+      presentation = 'fixed',
+      mode,
+      defaultMode = 'collapsed',
+      onModeChange,
+      expandedSize = 200,
+      minSize = 100,
+      maxSize = 400,
+      resizable = false,
+      collapsible = true,
+      onExpand,
+      onCollapse,
+      onResize,
+      onResizeStart,
+      onResizeEnd,
+      snapPoints,
+      snapTolerance,
+      collapseThreshold,
+      paneId,
+      persistence,
+      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);
+    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 childArray = React.Children.toArray(children) as React.ReactElement[];
+    const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === BottomHandle);
+    const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));
+
+    const resolveResponsiveMode = React.useCallback((): PaneMode => {
+      if (typeof defaultMode === 'string') return defaultMode as PaneMode;
+      const dm = defaultMode as Partial<Record<Breakpoint, PaneMode>> | undefined;
+      if (dm && dm[shell.currentBreakpoint as Breakpoint]) {
+        return dm[shell.currentBreakpoint as Breakpoint] as PaneMode;
+      }
+      const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+      const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
+      const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);
+      for (let i = startIdx + 1; i < order.length; i++) {
+        const bp = order[i];
+        if (dm && dm[bp]) {
+          return dm[bp] as PaneMode;
+        }
+      }
+      return 'collapsed';
+    }, [defaultMode, shell.currentBreakpoint]);
+
+    const didInitRef = React.useRef(false);
+    React.useEffect(() => {
+      if (didInitRef.current) return;
+      didInitRef.current = true;
+      if (mode === undefined) {
+        const initial = resolveResponsiveMode();
+        if (shell.bottomMode !== initial) shell.setBottomMode(initial);
+      }
+    }, []);
+
+    const lastBottomBpRef = React.useRef<Breakpoint | null>(null);
+    const lastResolvedBottomRef = React.useRef<PaneMode | null>(null);
+    React.useEffect(() => {
+      if (mode !== undefined) return;
+      if (!shell.currentBreakpointReady) return;
+      if (lastBottomBpRef.current === shell.currentBreakpoint) return;
+      lastBottomBpRef.current = shell.currentBreakpoint as Breakpoint;
+      const next = resolveResponsiveMode();
+      if (lastResolvedBottomRef.current === next) return;
+      lastResolvedBottomRef.current = next;
+      if (next !== shell.bottomMode) shell.setBottomMode(next);
+    }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.bottomMode, shell.setBottomMode]);
+
+    React.useEffect(() => {
+      if (mode !== undefined && shell.bottomMode !== mode) {
+        shell.setBottomMode(mode);
+      }
+    }, [mode, shell]);
+
+    React.useEffect(() => {
+      if (mode === undefined) {
+        onModeChange?.(shell.bottomMode);
+      }
+    }, [shell.bottomMode, mode, onModeChange]);
+
+    React.useEffect(() => {
+      if (shell.bottomMode === 'expanded') {
+        onExpand?.();
+      } else {
+        onCollapse?.();
+      }
+    }, [shell.bottomMode, onExpand, onCollapse]);
+
+    const isExpanded = shell.bottomMode === 'expanded';
+
+    const persistenceAdapter = React.useMemo(() => {
+      if (!paneId || persistence) return persistence;
+      const key = `kookie-ui:shell:bottom:${paneId}`;
+      const adapter: PaneSizePersistence = {
+        load: () => {
+          if (typeof window === 'undefined') return undefined;
+          const v = window.localStorage.getItem(key);
+          return v ? Number(v) : undefined;
+        },
+        save: (size: number) => {
+          if (typeof window === 'undefined') return;
+          window.localStorage.setItem(key, String(size));
+        },
+      };
+      return adapter;
+    }, [paneId, persistence]);
+
+    React.useEffect(() => {
+      let mounted = true;
+      (async () => {
+        if (!resizable || !persistenceAdapter?.load || isOverlay) return;
+        const loaded = await persistenceAdapter.load();
+        if (mounted && typeof loaded === 'number' && localRef.current) {
+          localRef.current.style.setProperty('--bottom-size', `${loaded}px`);
+          onResize?.(loaded);
+        }
+      })();
+      return () => {
+        mounted = false;
+      };
+    }, [resizable, persistenceAdapter, onResize, isOverlay]);
+
+    const handleEl =
+      resizable && !isOverlay && isExpanded ? (
+        <PaneResizeContext.Provider
+          value={{
+            containerRef: localRef,
+            cssVarName: '--bottom-size',
+            minSize,
+            maxSize,
+            defaultSize: expandedSize,
+            orientation: 'horizontal',
+            edge: 'start',
+            computeNext: (client, startClient, startSize) => {
+              const delta = client - startClient;
+              return startSize - delta;
+            },
+            onResize,
+            onResizeStart,
+            onResizeEnd: (size) => {
+              onResizeEnd?.(size);
+              persistenceAdapter?.save?.(size);
+            },
+            target: 'bottom',
+            collapsible,
+            snapPoints,
+            snapTolerance: snapTolerance ?? 8,
+            collapseThreshold,
+            requestCollapse: () => shell.setBottomMode('collapsed'),
+            requestToggle: () => shell.togglePane('bottom'),
+          }}
+        >
+          {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}
+        </PaneResizeContext.Provider>
+      ) : null;
+
+    if (isOverlay) {
+      const open = shell.bottomMode === 'expanded';
+      return (
+        <Sheet.Root open={open} onOpenChange={(o) => shell.setBottomMode(o ? 'expanded' : 'collapsed')}>
+          <Sheet.Content side="bottom" style={{ padding: 0 }} height={{ initial: `${expandedSize}px` }}>
+            <VisuallyHidden>
+              <Sheet.Title>Bottom panel</Sheet.Title>
+            </VisuallyHidden>
+            {contentChildren}
+          </Sheet.Content>
+        </Sheet.Root>
+      );
+    }
+
+    return (
+      <div
+        {...props}
+        ref={setRef}
+        className={classNames('rt-ShellBottom', className)}
+        data-mode={shell.bottomMode}
+        data-peek={shell.peekTarget === 'bottom' || undefined}
+        data-presentation={resolvedPresentation}
+        data-open={(isStacked && isExpanded) || undefined}
+        style={{
+          ...style,
+          ['--bottom-size' as any]: `${expandedSize}px`,
+          ['--bottom-min-size' as any]: `${minSize}px`,
+          ['--bottom-max-size' as any]: `${maxSize}px`,
+        }}
+      >
+        <div className="rt-ShellBottomContent" data-visible={isExpanded || undefined}>
+          {contentChildren}
+        </div>
+        {handleEl}
+      </div>
+    );
+  },
+) as BottomComponent;
+Bottom.displayName = 'Shell.Bottom';
+Bottom.Handle = BottomHandle;

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

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { usePaneResize } from './shell-resize.js';
+
+export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(({ className, children, ...props }, ref) => {
+  const {
+    containerRef,
+    cssVarName,
+    minSize,
+    maxSize,
+    defaultSize,
+    orientation,
+    edge,
+    computeNext,
+    onResize,
+    onResizeStart,
+    onResizeEnd,
+    snapPoints,
+    snapTolerance,
+    collapseThreshold,
+    collapsible,
+    target,
+    requestCollapse,
+    requestToggle,
+  } = usePaneResize();
+
+  const activeCleanupRef = React.useRef<(() => void) | null>(null);
+  React.useEffect(
+    () => () => {
+      try {
+        activeCleanupRef.current?.();
+      } catch {}
+      activeCleanupRef.current = null;
+    },
+    [],
+  );
+
+  const ariaOrientation = orientation;
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      className={classNames('rt-ShellResizer', className)}
+      data-orientation={orientation}
+      data-edge={edge}
+      role="slider"
+      aria-orientation={ariaOrientation}
+      aria-valuemin={minSize}
+      aria-valuemax={maxSize}
+      aria-valuenow={defaultSize}
+      tabIndex={0}
+      onPointerDown={(e) => {
+        if (!containerRef.current) return;
+        e.preventDefault();
+        const container = containerRef.current;
+        const handleEl = e.currentTarget as HTMLElement;
+        const pointerId = e.pointerId;
+        try {
+          activeCleanupRef.current?.();
+        } catch {}
+        container.setAttribute('data-resizing', '');
+        try {
+          handleEl.setPointerCapture(pointerId);
+        } catch {}
+        const startClient = orientation === 'vertical' ? e.clientX : e.clientY;
+        const startSize = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);
+        const clamp = (v: number) => Math.min(Math.max(v, minSize), maxSize);
+        const body = document.body;
+        const prevCursor = body.style.cursor;
+        const prevUserSelect = body.style.userSelect;
+        body.style.cursor = orientation === 'vertical' ? 'col-resize' : 'row-resize';
+        body.style.userSelect = 'none';
+        onResizeStart?.(startSize);
+        const handleMove = (ev: PointerEvent) => {
+          const client = orientation === 'vertical' ? ev.clientX : ev.clientY;
+          const next = clamp(computeNext(client, startClient, startSize));
+          container.style.setProperty(cssVarName, `${next}px`);
+          handleEl.setAttribute('aria-valuenow', String(next));
+          onResize?.(next);
+        };
+        const cleanup = () => {
+          try {
+            handleEl.releasePointerCapture(pointerId);
+          } catch {}
+          window.removeEventListener('pointermove', handleMove as any);
+          window.removeEventListener('pointerup', handleUp as any);
+          window.removeEventListener('pointercancel', handleUp as any);
+          window.removeEventListener('keydown', handleKey as any);
+          handleEl.removeEventListener('lostpointercapture', handleUp as any);
+          container.removeAttribute('data-resizing');
+          body.style.cursor = prevCursor;
+          body.style.userSelect = prevUserSelect;
+          activeCleanupRef.current = null;
+        };
+        const handleUp = () => {
+          const finalSize = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);
+          let snapped = finalSize;
+          if (snapPoints && snapPoints.length) {
+            const nearest = snapPoints.reduce((acc, p) => (Math.abs(p - finalSize) < Math.abs(acc - finalSize) ? p : acc), snapPoints[0]);
+            if (Math.abs(nearest - finalSize) <= (snapTolerance ?? 8)) {
+              snapped = nearest;
+              container.style.setProperty(cssVarName, `${snapped}px`);
+              handleEl.setAttribute('aria-valuenow', String(snapped));
+              onResize?.(snapped);
+            }
+          }
+          if (collapsible && typeof collapseThreshold === 'number' && finalSize <= collapseThreshold) {
+            requestCollapse?.();
+          }
+          onResizeEnd?.(snapped);
+          cleanup();
+        };
+        const handleKey = (kev: KeyboardEvent) => {
+          if (kev.key === 'Escape') {
+            container.style.setProperty(cssVarName, `${startSize}px`);
+            handleEl.setAttribute('aria-valuenow', String(startSize));
+            onResizeEnd?.(startSize);
+            cleanup();
+          }
+        };
+        window.addEventListener('pointermove', handleMove as any);
+        window.addEventListener('pointerup', handleUp as any);
+        window.addEventListener('pointercancel', handleUp as any);
+        window.addEventListener('keydown', handleKey as any);
+        handleEl.addEventListener('lostpointercapture', handleUp as any);
+        activeCleanupRef.current = cleanup;
+      }}
+      onDoubleClick={() => {
+        if (collapsible) requestToggle?.();
+      }}
+      onKeyDown={(e) => {
+        if (!containerRef.current) return;
+        const container = containerRef.current;
+        const current = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);
+        const clamp = (v: number) => Math.min(Math.max(v, minSize), maxSize);
+        const step = e.shiftKey ? 32 : 8;
+        let delta = 0;
+        if (orientation === 'vertical') {
+          if (e.key === 'ArrowRight') delta = step;
+          else if (e.key === 'ArrowLeft') delta = -step;
+        } else {
+          if (e.key === 'ArrowDown') delta = step;
+          else if (e.key === 'ArrowUp') delta = -step;
+        }
+        if (e.key === 'Home') {
+          e.preventDefault();
+          onResizeStart?.(current);
+          const next = clamp(minSize);
+          container.style.setProperty(cssVarName, `${next}px`);
+          (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));
+          onResize?.(next);
+          onResizeEnd?.(next);
+          return;
+        }
+        if (e.key === 'End') {
+          e.preventDefault();
+          onResizeStart?.(current);
+          const next = clamp(maxSize);
+          container.style.setProperty(cssVarName, `${next}px`);
+          (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));
+          onResize?.(next);
+          onResizeEnd?.(next);
+          return;
+        }
+        if (delta !== 0) {
+          e.preventDefault();
+          onResizeStart?.(current);
+          const next = clamp(current + (edge === 'start' && orientation === 'vertical' ? -delta : delta));
+          container.style.setProperty(cssVarName, `${next}px`);
+          (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));
+          onResize?.(next);
+          onResizeEnd?.(next);
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+});
+PaneHandle.displayName = 'Shell.Handle';
+
+export const PanelHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);
+PanelHandle.displayName = 'Shell.Panel.Handle';
+
+export const SidebarHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);
+SidebarHandle.displayName = 'Shell.Sidebar.Handle';
+
+export const InspectorHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);
+InspectorHandle.displayName = 'Shell.Inspector.Handle';
+
+export const BottomHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);
+BottomHandle.displayName = 'Shell.Bottom.Handle';

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

@@ -0,0 +1,242 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Sheet from '../sheet.js';
+import { VisuallyHidden } from '../visually-hidden.js';
+import { useShell } from '../shell.context.js';
+import { useResponsivePresentation } from '../shell.hooks.js';
+import { PaneResizeContext } from './shell-resize.js';
+import { InspectorHandle, PaneHandle } from './shell-handles.js';
+import { BREAKPOINTS } from '../shell.types.js';
+import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
+
+interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
+  presentation?: ResponsivePresentation;
+  mode?: PaneMode;
+  defaultMode?: any;
+  onModeChange?: (mode: PaneMode) => void;
+  expandedSize?: number;
+  minSize?: number;
+  maxSize?: 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;
+}
+
+type InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };
+
+export const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(
+  (
+    {
+      className,
+      presentation = { initial: 'overlay', lg: 'fixed' },
+      mode,
+      defaultMode = 'collapsed',
+      onModeChange,
+      expandedSize = 320,
+      minSize = 200,
+      maxSize = 500,
+      resizable = false,
+      collapsible = true,
+      onExpand,
+      onCollapse,
+      onResize,
+      onResizeStart,
+      onResizeEnd,
+      snapPoints,
+      snapTolerance,
+      collapseThreshold,
+      paneId,
+      persistence,
+      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);
+    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 childArray = React.Children.toArray(children) as React.ReactElement[];
+    const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === InspectorHandle);
+    const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === InspectorHandle));
+
+    const resolveResponsiveMode = React.useCallback((): PaneMode => {
+      if (typeof defaultMode === 'string') return defaultMode as PaneMode;
+      const dm = defaultMode as Partial<Record<Breakpoint, PaneMode>> | undefined;
+      if (dm && dm[shell.currentBreakpoint as Breakpoint]) {
+        return dm[shell.currentBreakpoint as Breakpoint] as PaneMode;
+      }
+      const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+      const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
+      const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);
+      for (let i = startIdx + 1; i < order.length; i++) {
+        const bp = order[i];
+        if (dm && dm[bp]) {
+          return dm[bp] as PaneMode;
+        }
+      }
+      return 'collapsed';
+    }, [defaultMode, shell.currentBreakpoint]);
+
+    const lastInspectorBpRef = React.useRef<Breakpoint | null>(null);
+    React.useEffect(() => {
+      if (mode !== undefined) return;
+      if (!shell.currentBreakpointReady) return;
+      if (lastInspectorBpRef.current === shell.currentBreakpoint) return;
+      lastInspectorBpRef.current = shell.currentBreakpoint as Breakpoint;
+      const next = resolveResponsiveMode();
+      if (next !== shell.inspectorMode) {
+        shell.setInspectorMode(next);
+      }
+    }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.inspectorMode, shell.setInspectorMode]);
+
+    React.useEffect(() => {
+      if (mode !== undefined && shell.inspectorMode !== mode) {
+        shell.setInspectorMode(mode);
+      }
+    }, [mode, shell]);
+
+    React.useEffect(() => {
+      if (mode === undefined) {
+        onModeChange?.(shell.inspectorMode);
+      }
+    }, [shell.inspectorMode, mode, onModeChange]);
+
+    React.useEffect(() => {
+      if (shell.inspectorMode === 'expanded') {
+        onExpand?.();
+      } else {
+        onCollapse?.();
+      }
+    }, [shell.inspectorMode, onExpand, onCollapse]);
+
+    const isExpanded = shell.inspectorMode === 'expanded';
+
+    const persistenceAdapter = React.useMemo(() => {
+      if (!paneId || persistence) return persistence;
+      const key = `kookie-ui:shell:inspector:${paneId}`;
+      const adapter: PaneSizePersistence = {
+        load: () => {
+          if (typeof window === 'undefined') return undefined;
+          const v = window.localStorage.getItem(key);
+          return v ? Number(v) : undefined;
+        },
+        save: (size: number) => {
+          if (typeof window === 'undefined') return;
+          window.localStorage.setItem(key, String(size));
+        },
+      };
+      return adapter;
+    }, [paneId, persistence]);
+
+    React.useEffect(() => {
+      let mounted = true;
+      (async () => {
+        if (!resizable || !persistenceAdapter?.load || isOverlay) return;
+        const loaded = await persistenceAdapter.load();
+        if (mounted && typeof loaded === 'number' && localRef.current) {
+          localRef.current.style.setProperty('--inspector-size', `${loaded}px`);
+          onResize?.(loaded);
+        }
+      })();
+      return () => {
+        mounted = false;
+      };
+    }, [resizable, persistenceAdapter, onResize, isOverlay]);
+
+    const handleEl =
+      resizable && !isOverlay && isExpanded ? (
+        <PaneResizeContext.Provider
+          value={{
+            containerRef: localRef,
+            cssVarName: '--inspector-size',
+            minSize,
+            maxSize,
+            defaultSize: expandedSize,
+            orientation: 'vertical',
+            edge: 'start',
+            computeNext: (client, startClient, startSize) => {
+              const isRtl = getComputedStyle(localRef.current!).direction === 'rtl';
+              const delta = client - startClient;
+              return startSize + (isRtl ? delta : -delta);
+            },
+            onResize,
+            onResizeStart,
+            onResizeEnd: (size) => {
+              onResizeEnd?.(size);
+              persistenceAdapter?.save?.(size);
+            },
+            target: 'inspector',
+            collapsible,
+            snapPoints,
+            snapTolerance: snapTolerance ?? 8,
+            collapseThreshold,
+            requestCollapse: () => shell.setInspectorMode('collapsed'),
+            requestToggle: () => shell.togglePane('inspector'),
+          }}
+        >
+          {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}
+        </PaneResizeContext.Provider>
+      ) : null;
+
+    if (isOverlay) {
+      const open = shell.inspectorMode === 'expanded';
+      return (
+        <Sheet.Root open={open} onOpenChange={(o) => shell.setInspectorMode(o ? 'expanded' : 'collapsed')}>
+          <Sheet.Content side="end" style={{ padding: 0 }} width={{ initial: `${expandedSize}px` }}>
+            <VisuallyHidden>
+              <Sheet.Title>Inspector</Sheet.Title>
+            </VisuallyHidden>
+            {contentChildren}
+          </Sheet.Content>
+        </Sheet.Root>
+      );
+    }
+
+    return (
+      <div
+        {...props}
+        ref={setRef}
+        className={classNames('rt-ShellInspector', className)}
+        data-mode={shell.inspectorMode}
+        data-peek={shell.peekTarget === 'inspector' || undefined}
+        data-presentation={resolvedPresentation}
+        data-open={(isStacked && isExpanded) || undefined}
+        style={{
+          ...style,
+          ['--inspector-size' as any]: `${expandedSize}px`,
+          ['--inspector-min-size' as any]: `${minSize}px`,
+          ['--inspector-max-size' as any]: `${maxSize}px`,
+        }}
+      >
+        <div className="rt-ShellInspectorContent" data-visible={isExpanded || undefined}>
+          {contentChildren}
+        </div>
+        {handleEl}
+      </div>
+    );
+  },
+) as InspectorComponent;
+
+Inspector.displayName = 'Shell.Inspector';
+Inspector.Handle = InspectorHandle;