@kushagradhawan/kookie-ui 0.1.50 → 0.1.52

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

@@ -84,8 +84,16 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
             handleEl.releasePointerCapture(pointerId);
           } catch {}
           window.removeEventListener('pointermove', handleMove as any);
+          document.removeEventListener('pointermove', handleMove as any);
+          window.removeEventListener('mousemove', handleMove as any);
+          document.removeEventListener('mousemove', handleMove as any);
+          handleEl.removeEventListener('pointermove', handleMove as any);
           window.removeEventListener('pointerup', handleUp as any);
+          document.removeEventListener('pointerup', handleUp as any);
+          window.removeEventListener('mouseup', handleUp as any);
+          document.removeEventListener('mouseup', handleUp as any);
           window.removeEventListener('pointercancel', handleUp as any);
+          document.removeEventListener('pointercancel', handleUp as any);
           window.removeEventListener('keydown', handleKey as any);
           handleEl.removeEventListener('lostpointercapture', handleUp as any);
           container.removeAttribute('data-resizing');
@@ -120,8 +128,17 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           }
         };
         window.addEventListener('pointermove', handleMove as any);
+        document.addEventListener('pointermove', handleMove as any);
+        // Fallbacks for environments that don't fully support PointerEvent on window
+        window.addEventListener('mousemove', handleMove as any);
+        document.addEventListener('mousemove', handleMove as any);
+        handleEl.addEventListener('pointermove', handleMove as any);
         window.addEventListener('pointerup', handleUp as any);
+        document.addEventListener('pointerup', handleUp as any);
+        window.addEventListener('mouseup', handleUp as any);
+        document.addEventListener('mouseup', handleUp as any);
         window.addEventListener('pointercancel', handleUp as any);
+        document.addEventListener('pointercancel', handleUp as any);
         window.addEventListener('keydown', handleKey as any);
         handleEl.addEventListener('lostpointercapture', handleUp as any);
         activeCleanupRef.current = cleanup;
@@ -132,13 +149,20 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
       onKeyDown={(e) => {
         if (!containerRef.current) return;
         const container = containerRef.current;
-        const current = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);
+        const rawCurrent = getComputedStyle(container).getPropertyValue(cssVarName);
+        const parsedCurrent = Number.parseFloat(rawCurrent.trim());
+        const current = Number.isFinite(parsedCurrent) ? parsedCurrent : 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;
+          const docDir = typeof document !== 'undefined' ? document.dir : undefined;
+          const cssDir = getComputedStyle(container).direction;
+          const hasRtlAncestor = !!(container.closest && container.closest('[dir="rtl"]'));
+          const isRtl = docDir === 'rtl' || cssDir === 'rtl' || hasRtlAncestor;
+          if (e.key === 'ArrowRight')
+            delta = isRtl ? -step : step; // inline-end
+          else if (e.key === 'ArrowLeft') delta = isRtl ? step : -step; // inline-start
         } else {
           if (e.key === 'ArrowDown') delta = step;
           else if (e.key === 'ArrowUp') delta = -step;
@@ -166,7 +190,8 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
         if (delta !== 0) {
           e.preventDefault();
           onResizeStart?.(current);
-          const next = clamp(current + (edge === 'start' && orientation === 'vertical' ? -delta : delta));
+          const signedDelta = orientation === 'vertical' ? (edge === 'start' ? -delta : delta) : delta;
+          const next = clamp(current + signedDelta);
           container.style.setProperty(cssVarName, `${next}px`);
           (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));
           onResize?.(next);

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

@@ -3,7 +3,7 @@ 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 { useResponsivePresentation, useResponsiveValue } from '../shell.hooks.js';
 import { PaneResizeContext } from './shell-resize.js';
 import { InspectorHandle, PaneHandle } from './shell-handles.js';
 import { BREAKPOINTS } from '../shell.types.js';
@@ -11,9 +11,7 @@ import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation
 
 interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
   presentation?: ResponsivePresentation;
-  mode?: PaneMode;
-  defaultMode?: any;
-  onModeChange?: (mode: PaneMode) => void;
+  // legacy mode removed
   expandedSize?: number;
   minSize?: number;
   maxSize?: number;
@@ -32,16 +30,29 @@ interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
   persistence?: PaneSizePersistence;
 }
 
-type InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };
+type InspectorOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };
+type InspectorControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };
+type InspectorUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; open?: never };
+type InspectorSizeChangeMeta = { reason: 'init' | 'resize' | 'controlled' };
+type InspectorPublicProps = PaneProps &
+  (InspectorControlledProps | InspectorUncontrolledProps) & {
+    onSizeChange?: (size: number, meta: InspectorSizeChangeMeta) => void;
+    sizeUpdate?: 'throttle' | 'debounce';
+    sizeUpdateMs?: number;
+  };
 
-export const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(
+type InspectorComponent = React.ForwardRefExoticComponent<InspectorPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };
+
+export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
   (
     {
       className,
       presentation = { initial: 'overlay', lg: 'fixed' },
-      mode,
-      defaultMode = 'collapsed',
-      onModeChange,
+      // removed legacy props
+      // new API
+      defaultOpen,
+      open,
+      onOpenChange,
       expandedSize = 320,
       minSize = 200,
       maxSize = 500,
@@ -80,47 +91,104 @@ export const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(
     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;
+    // Throttled/debounced emitter for onSizeChange
+    const emitSizeChange = React.useMemo(() => {
+      const cb = (props as any).onSizeChange as undefined | ((s: number, meta: InspectorSizeChangeMeta) => void);
+      const strategy = (props as any).sizeUpdate as undefined | 'throttle' | 'debounce';
+      const ms = (props as any).sizeUpdateMs ?? 50;
+      if (!cb) return () => {};
+      if (strategy === 'debounce') {
+        let t: any = null;
+        return (s: number, meta: InspectorSizeChangeMeta) => {
+          if (t) clearTimeout(t);
+          t = setTimeout(() => {
+            cb(s, meta);
+          }, ms);
+        };
       }
-      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;
-        }
+      if (strategy === 'throttle') {
+        let last = 0;
+        return (s: number, meta: InspectorSizeChangeMeta) => {
+          const now = Date.now();
+          if (now - last >= ms) {
+            last = now;
+            cb(s, meta);
+          }
+        };
       }
-      return 'collapsed';
-    }, [defaultMode, shell.currentBreakpoint]);
+      return (s: number, meta: InspectorSizeChangeMeta) => cb(s, meta);
+    }, [(props as any).onSizeChange, (props as any).sizeUpdate, (props as any).sizeUpdateMs]);
 
-    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);
+    // Dev guards
+    const wasControlledRef = React.useRef<boolean | null>(null);
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {
+        // eslint-disable-next-line no-console
+        console.error('Shell.Inspector: Do not pass both `open` and `defaultOpen`. Choose one.');
       }
-    }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.inspectorMode, shell.setInspectorMode]);
+    }
 
+    // Warn on controlled/uncontrolled mode switch
     React.useEffect(() => {
-      if (mode !== undefined && shell.inspectorMode !== mode) {
-        shell.setInspectorMode(mode);
+      const isControlled = typeof open !== 'undefined';
+      if (wasControlledRef.current === null) {
+        wasControlledRef.current = isControlled;
+        return;
+      }
+      if (wasControlledRef.current !== isControlled) {
+        // eslint-disable-next-line no-console
+        console.warn('Shell.Inspector: Switching between controlled and uncontrolled `open` is not supported.');
+        wasControlledRef.current = isControlled;
       }
-    }, [mode, shell]);
+    }, [open]);
+
+    const responsiveNotifiedRef = React.useRef(false);
+    const didInitFromDefaultOpenRef = React.useRef(false);
+    const resolvedDefaultOpen = useResponsiveValue(defaultOpen);
+    React.useEffect(() => {
+      if (!shell.currentBreakpointReady) return;
+      if (didInitFromDefaultOpenRef.current) return;
+      if (typeof open !== 'undefined') return; // controlled ignores default
+      if (typeof defaultOpen === 'undefined') return;
+      const initialOpen = Boolean(resolvedDefaultOpen);
+      shell.setInspectorMode(initialOpen ? 'expanded' : 'collapsed');
+      if (initialOpen) onOpenChange?.(true, { reason: 'init' });
+      didInitFromDefaultOpenRef.current = true;
+    }, [shell.currentBreakpointReady, resolvedDefaultOpen, defaultOpen, open, onOpenChange]);
 
+    // Controlled responsive open
+    const resolvedOpen = useResponsiveValue(open);
     React.useEffect(() => {
-      if (mode === undefined) {
-        onModeChange?.(shell.inspectorMode);
+      if (typeof resolvedOpen === 'undefined') return;
+      const shouldExpand = Boolean(resolvedOpen);
+      if (shouldExpand && shell.inspectorMode !== 'expanded') shell.setInspectorMode('expanded');
+      if (!shouldExpand && shell.inspectorMode !== 'collapsed') shell.setInspectorMode('collapsed');
+    }, [resolvedOpen, shell.inspectorMode]);
+
+    // Removed boolean-only mount init; handled in responsive init effect above
+
+    // Removed: boolean-only controlled sync. Use responsive-resolved effect below instead.
+
+    const initNotifiedRef = React.useRef(false);
+    const lastInspectorModeRef = React.useRef<PaneMode | null>(null);
+    React.useEffect(() => {
+      // Notify init open
+      if (!initNotifiedRef.current && typeof open === 'undefined' && defaultOpen && shell.inspectorMode === 'expanded') {
+        onOpenChange?.(true, { reason: 'init' });
+        initNotifiedRef.current = true;
       }
-    }, [shell.inspectorMode, mode, onModeChange]);
+
+      // Notify toggles when uncontrolled (avoid double-notify after responsive change)
+      if (typeof open === 'undefined') {
+        if (lastInspectorModeRef.current !== null && lastInspectorModeRef.current !== shell.inspectorMode) {
+          if (!responsiveNotifiedRef.current) {
+            onOpenChange?.(shell.inspectorMode === 'expanded', { reason: 'toggle' });
+          }
+          responsiveNotifiedRef.current = false;
+        }
+        lastInspectorModeRef.current = shell.inspectorMode;
+      }
+    }, [shell.inspectorMode, open, defaultOpen, onOpenChange]);
 
     React.useEffect(() => {
       if (shell.inspectorMode === 'expanded') {
@@ -184,6 +252,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(
             onResizeStart,
             onResizeEnd: (size) => {
               onResizeEnd?.(size);
+              emitSizeChange(size, { reason: 'resize' });
               persistenceAdapter?.save?.(size);
             },
             target: 'inspector',
@@ -199,6 +268,56 @@ export const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(
         </PaneResizeContext.Provider>
       ) : null;
 
+    // Normalize CSS lengths to px
+    const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
+      if (value == null) return undefined;
+      if (typeof value === 'number' && Number.isFinite(value)) return value;
+      const str = String(value).trim();
+      if (!str) return undefined;
+      if (str.endsWith('px')) return Number.parseFloat(str);
+      if (str.endsWith('rem')) {
+        const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
+        return Number.parseFloat(str) * rem;
+      }
+      if (str.endsWith('%')) {
+        const pct = Number.parseFloat(str);
+        const base = document.documentElement.clientWidth || window.innerWidth || 0;
+        return (pct / 100) * base;
+      }
+      const n = Number.parseFloat(str);
+      return Number.isFinite(n) ? n : undefined;
+    }, []);
+
+    // Apply defaultSize on mount when uncontrolled
+    React.useEffect(() => {
+      if (!localRef.current) return;
+      if (typeof (props as any).size === 'undefined' && typeof (props as any).defaultSize !== 'undefined') {
+        const px = normalizeToPx((props as any).defaultSize);
+        if (typeof px === 'number' && Number.isFinite(px)) {
+          const minPx = typeof minSize === 'number' ? minSize : undefined;
+          const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
+          const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));
+          localRef.current.style.setProperty('--inspector-size', `${clamped}px`);
+          emitSizeChange(clamped, { reason: 'init' });
+        }
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Controlled size sync
+    React.useEffect(() => {
+      if (!localRef.current) return;
+      if (typeof (props as any).size === 'undefined') return;
+      const px = normalizeToPx((props as any).size);
+      if (typeof px === 'number' && Number.isFinite(px)) {
+        const minPx = typeof minSize === 'number' ? minSize : undefined;
+        const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
+        const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));
+        localRef.current.style.setProperty('--inspector-size', `${clamped}px`);
+        emitSizeChange(clamped, { reason: 'controlled' });
+      }
+    }, [(props as any).size, minSize, maxSize, normalizeToPx, emitSizeChange]);
+
     if (isOverlay) {
       const open = shell.inspectorMode === 'expanded';
       return (
@@ -213,15 +332,28 @@ export const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(
       );
     }
 
+    // Strip control/size props from DOM spread
+    const {
+      defaultOpen: _inspectorDefaultOpenIgnored,
+      open: _inspectorOpenIgnored,
+      onOpenChange: _inspectorOnOpenChangeIgnored,
+      size: _sz,
+      defaultSize: _dsz,
+      onSizeChange: _osc,
+      sizeUpdate: _szu,
+      sizeUpdateMs: _szums,
+      ...inspectorDomProps
+    } = props as any;
+
     return (
       <div
-        {...props}
+        {...inspectorDomProps}
         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}
+        data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}
+        data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}
         style={{
           ...style,
           ['--inspector-size' as any]: `${expandedSize}px`,