@flamingo-stack/openframe-frontend-core 0.0.702-snapshot.20261005191338 → 0.0.702

package/src/components/chat/embeddable-chat.tsx

@@ -126,13 +126,13 @@ const HISTORY_RAIL_WIDTH = 320;
 const CHAT_BLOCK_MIN_WIDTH = 400;
 const SPLIT_MIN_WIDTH = HISTORY_RAIL_WIDTH + CHAT_BLOCK_MIN_WIDTH;
 
-// Desktop drawer is this fraction of the viewport width (clamped to the
-// Drawer's own min/max) until the user resizes it. Only the size they choose is
-// stored (see DRAWER_WIDTH_KEY); the default tracks the window, so changing
-// this policy needs no new key.
+// Desktop drawer opens at this fraction of the viewport width (clamped to the
+// Drawer's own min/max). The user can still resize (persisted per DRAWER_WIDTH_KEY).
 const DRAWER_DEFAULT_WIDTH_RATIO = 0.5;
+// Bump the suffix whenever the default policy changes so previously-persisted
+// widths (e.g. the old fixed 750px / earlier 30% default) reset on next open.
 const DRAWER_WIDTH_KEY = 'mingo-chat-width-v4';
-const DRAWER_DEFAULT_WIDTH_PX = 750; // before the viewport is known (server render)
+const DRAWER_DEFAULT_WIDTH_PX = 750; // SSR fallback before the viewport is known
 /**
  * A panel that owns a dialog list opens WIDE ENOUGH TO SPLIT, so the "Current
  * Chats" rail sits beside the conversation instead of replacing it.
@@ -144,14 +144,12 @@ const DRAWER_DEFAULT_WIDTH_PX = 750; // before the viewport is known (server ren
  * viewport, so a genuinely small screen keeps the stacked view.
  */
 const SPLIT_DEFAULT_WIDTH_ALLOWANCE = 16;
-function drawerDefaultWidth(viewportWidth: number, withHistoryRail: boolean): number {
-  if (viewportWidth <= 0) return DRAWER_DEFAULT_WIDTH_PX;
-  const ratioWidth = Math.round(viewportWidth * DRAWER_DEFAULT_WIDTH_RATIO);
+function drawerDefaultWidth(withHistoryRail: boolean): number {
+  if (typeof window === 'undefined') return DRAWER_DEFAULT_WIDTH_PX;
+  const ratioWidth = Math.round(window.innerWidth * DRAWER_DEFAULT_WIDTH_RATIO);
   if (!withHistoryRail) return ratioWidth;
   return Math.max(ratioWidth, SPLIT_MIN_WIDTH + SPLIT_DEFAULT_WIDTH_ALLOWANCE);
 }
-const drawerDefaultWidthWithRail = (viewportWidth: number) => drawerDefaultWidth(viewportWidth, true);
-const drawerDefaultWidthWithoutRail = (viewportWidth: number) => drawerDefaultWidth(viewportWidth, false);
 
 // =============================================================================
 // Types
@@ -2812,7 +2810,7 @@ function EmbeddableChatInner({
           resizable
           minSize={480}
           maxSize={1600}
-          defaultSize={historyListMode ? drawerDefaultWidthWithRail : drawerDefaultWidthWithoutRail}
+          defaultSize={drawerDefaultWidth(historyListMode)}
           storageKey={DRAWER_WIDTH_KEY}
           resizeAriaLabel="Resize chat panel"
           overlayClassName="mingo-chat-overlay"

package/src/components/navigation/app-layout-drawer.tsx

@@ -6,6 +6,9 @@ import {
   type CSSProperties,
   type ComponentPropsWithoutRef,
   type ComponentRef,
+  type KeyboardEvent,
+  type PointerEvent,
+  type RefObject,
   createContext,
   forwardRef,
   useCallback,
@@ -15,8 +18,8 @@ import {
   useState,
 } from 'react';
 
-import { useResizablePanelSize } from '../../hooks/ui/use-resizable-panel-size';
 import { cn } from '../../utils/cn';
+import { clamp } from '../../utils/common';
 import {
   DrawerBody,
   DrawerDescription,
@@ -26,7 +29,6 @@ import {
   OVERLAY_BACKDROP_CLASS,
   type DrawerSide,
 } from '../ui/drawer';
-import { PanelResizeHandle } from '../ui/panel-resize-handle';
 import {
   type AppLayoutDrawerHandle,
   useAppLayoutDrawerContainer,
@@ -214,8 +216,25 @@ const HORIZONTAL_SIDES: ReadonlySet<DrawerSide> = new Set(['left', 'right']);
  */
 const PERSIST_CLOSED_HOLD = 'data-[state=closed]:fill-mode-forwards';
 
-/** Room the portal container gives the panel along its resize axis, in px. */
-function useContainerExtent(enabled: boolean, isHorizontal: boolean, container: HTMLElement | null): number {
+interface UseContainedResizableSizeArgs {
+  enabled: boolean;
+  isHorizontal: boolean;
+  minSize: number;
+  maxSize: number;
+  defaultSize: number;
+  storageKey?: string;
+  container: HTMLElement | null;
+}
+
+function useContainedResizableSize({
+  enabled,
+  isHorizontal,
+  minSize,
+  maxSize,
+  defaultSize,
+  storageKey,
+  container,
+}: UseContainedResizableSizeArgs) {
   const [available, setAvailable] = useState(0);
 
   useEffect(() => {
@@ -229,7 +248,216 @@ function useContainerExtent(enabled: boolean, isHorizontal: boolean, container:
     return () => ro.disconnect();
   }, [enabled, container, isHorizontal]);
 
-  return available;
+  const clampToContainer = useCallback(
+    (value: number) => {
+      // Reserve 40px (the `system-m` outside-edge padding from the wrapper
+      // plus a matching gap on the inside edge) so the panel sits symmetrically
+      // inside the container. This also keeps the resize grip on-screen at
+      // maximum extent.
+      const effectiveMax = available > 0 ? Math.min(maxSize, available - 40) : maxSize;
+      return clamp(value, minSize, Math.max(minSize, effectiveMax));
+    },
+    [available, minSize, maxSize],
+  );
+
+  const readInitial = useCallback(() => {
+    if (!enabled) return defaultSize;
+    if (typeof window === 'undefined') return defaultSize;
+    if (!storageKey) return defaultSize;
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      if (!raw) return defaultSize;
+      const parsed = parseFloat(raw);
+      if (!Number.isFinite(parsed)) return defaultSize;
+      return parsed;
+    } catch {
+      return defaultSize;
+    }
+  }, [enabled, storageKey, defaultSize]);
+
+  const [rawSize, setSizeRaw] = useState<number>(readInitial);
+
+  // Re-clamp the stored size whenever the container resizes so a previously
+  // saved size never overflows after the user shrinks the viewport.
+  //
+  // Clamped where it is READ rather than written back into state from an
+  // effect: `available` is already state (the ResizeObserver above owns it), so
+  // the container shrinking re-renders regardless — and deriving here means the
+  // panel is never painted overflowing its container for the frame between the
+  // resize and the corrective commit. Keeping the raw value also means widening
+  // the viewport again restores the size the user actually chose, instead of
+  // leaving it permanently trimmed to the narrowest width ever seen.
+  const size = enabled ? clampToContainer(rawSize) : rawSize;
+
+  const setSize = useCallback((next: number) => setSizeRaw(clampToContainer(next)), [clampToContainer]);
+
+  useEffect(() => {
+    if (!enabled || !storageKey || typeof window === 'undefined') return;
+    try {
+      window.localStorage.setItem(storageKey, String(Math.round(size)));
+    } catch {
+      // ignore quota / disabled-storage
+    }
+  }, [enabled, size, storageKey]);
+
+  return { size, setSize, clampSize: clampToContainer };
+}
+
+/** Ends a drawer resize drag: commits the size it reached and restores the
+ *  page's cursor and text selection. No-op when no drag is in progress. */
+function finishDrag(
+  startRef: RefObject<{ x: number; y: number; size: number } | null>,
+  dragSizeRef: RefObject<number | null>,
+  commit: (size: number) => void,
+): void {
+  if (!startRef.current) return;
+  startRef.current = null;
+  if (dragSizeRef.current !== null) commit(dragSizeRef.current);
+  dragSizeRef.current = null;
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+}
+
+interface AppLayoutDrawerResizeHandleProps {
+  side: DrawerSide;
+  size: number;
+  minSize: number;
+  maxSize: number;
+  onSize: (next: number) => void;
+  /** Clamp a candidate size to the min/max and the container. */
+  clampSize: (next: number) => number;
+  /** The panel the size applies to — written directly while dragging. */
+  panelRef: RefObject<HTMLDivElement | null>;
+  ariaLabel?: string;
+}
+
+function AppLayoutDrawerResizeHandle({
+  side,
+  size,
+  minSize,
+  maxSize,
+  onSize,
+  clampSize,
+  panelRef,
+  ariaLabel,
+}: AppLayoutDrawerResizeHandleProps) {
+  const isHorizontal = HORIZONTAL_SIDES.has(side);
+  const startRef = useRef<{ x: number; y: number; size: number } | null>(null);
+  // Size reached by the drag in progress, committed to React state on release.
+  const dragSizeRef = useRef<number | null>(null);
+  const onSizeRef = useRef(onSize);
+  useEffect(() => {
+    onSizeRef.current = onSize;
+  }, [onSize]);
+  // The handle can unmount mid-drag (a persist-mode drawer closing), and then
+  // no pointer event ends the drag: end it here, or the panel keeps a width
+  // React state never received and the page keeps the resize cursor.
+  useEffect(() => () => finishDrag(startRef, dragSizeRef, onSizeRef.current), []);
+
+  const direction = side === 'right' || side === 'bottom' ? -1 : 1;
+
+  const handlePointerDown = (e: PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0 && e.pointerType === 'mouse') return;
+    e.preventDefault();
+    startRef.current = { x: e.clientX, y: e.clientY, size };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+    document.body.style.userSelect = 'none';
+  };
+
+  // The drag writes the panel's size straight to the DOM and commits it to
+  // state once, on release. Committing every pointermove re-rendered the
+  // drawer per event — ~16% of a drag's CPU in WebKit on top of the reflow the
+  // resize itself costs. ResizeObserver consumers inside the panel still see
+  // every change. A re-render of the drawer mid-drag (e.g. a streamed chunk)
+  // does not undo the write: React diffs against its previous render, where
+  // the size is unchanged, so it leaves the style alone.
+  const handlePointerMove = (e: PointerEvent<HTMLDivElement>) => {
+    const start = startRef.current;
+    const panel = panelRef.current;
+    if (!start || !panel) return;
+    const delta = isHorizontal ? e.clientX - start.x : e.clientY - start.y;
+    const next = clampSize(start.size + delta * direction);
+    dragSizeRef.current = next;
+    panel.style[isHorizontal ? 'width' : 'height'] = `${next}px`;
+    e.currentTarget.setAttribute('aria-valuenow', String(Math.round(next)));
+  };
+
+  const endDrag = (e: PointerEvent<HTMLDivElement>) => {
+    if (!startRef.current) return;
+    finishDrag(startRef, dragSizeRef, onSize);
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+      // ignore — pointer may already be released
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const step = e.shiftKey ? 40 : 16;
+    if (isHorizontal) {
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        onSize(size + step * (side === 'right' ? 1 : -1));
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        onSize(size + step * (side === 'right' ? -1 : 1));
+      }
+    } else {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        onSize(size + step * (side === 'bottom' ? 1 : -1));
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        onSize(size + step * (side === 'bottom' ? -1 : 1));
+      }
+    }
+    if (e.key === 'Home') {
+      e.preventDefault();
+      onSize(minSize);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      onSize(maxSize);
+    }
+  };
+
+  const trackPosition =
+    side === 'right'
+      ? 'right-full top-4 bottom-4 w-6 items-center justify-end pr-1'
+      : side === 'left'
+        ? 'left-full top-4 bottom-4 w-6 items-center justify-start pl-1'
+        : side === 'bottom'
+          ? 'bottom-full left-4 right-4 h-6 justify-center items-end pb-1'
+          : 'top-full left-4 right-4 h-6 justify-center items-start pt-1';
+
+  const cursorClass = isHorizontal ? 'cursor-col-resize' : 'cursor-row-resize';
+  const gripClass = isHorizontal ? 'h-10 w-1' : 'w-10 h-1';
+
+  return (
+    <div
+      role="separator"
+      tabIndex={0}
+      aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
+      aria-valuenow={Math.round(size)}
+      aria-valuemin={minSize}
+      aria-valuemax={maxSize}
+      aria-label={ariaLabel ?? (isHorizontal ? 'Resize panel width' : 'Resize panel height')}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onLostPointerCapture={endDrag}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'group absolute z-20 flex touch-none select-none',
+        'outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',
+        trackPosition,
+        cursorClass,
+      )}
+    >
+      <div aria-hidden className={cn('rounded-full bg-ods-border', gripClass)} />
+    </div>
+  );
 }
 
 export interface AppLayoutDrawerContentProps
@@ -400,18 +628,14 @@ const AppLayoutDrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Co
     }, [mobileBreakpoint]);
 
     const panelRef = useRef<HTMLDivElement>(null);
-    // Reserve 40px (the `system-m` outside-edge padding from the wrapper plus a
-    // matching gap on the inside edge) so the panel sits symmetrically inside
-    // the container and the resize grip stays on screen at maximum extent.
-    const available = useContainerExtent(resizable, isHorizontal, portalContainer);
-    const { size, setSize, clampSize } = useResizablePanelSize({
+    const { size, setSize, clampSize } = useContainedResizableSize({
       enabled: resizable,
+      isHorizontal,
       minSize,
       maxSize,
       defaultSize: initialSize,
-      available,
-      reserve: 40,
       storageKey,
+      container: portalContainer,
     });
 
     const applyInlineSize = resizable && !isMobile;
@@ -483,8 +707,7 @@ const AppLayoutDrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Co
               at the container edge. In persist mode it's also non-interactive
               while closed, so drop it entirely until the panel reopens. */}
           {applyInlineSize && (!persist || open) ? (
-            <PanelResizeHandle
-              variant="inLayout"
+            <AppLayoutDrawerResizeHandle
               side={resolvedSide}
               size={size}
               minSize={minSize}

package/src/components/ui/drawer.tsx

@@ -8,18 +8,19 @@ import {
   type ComponentPropsWithoutRef,
   type ComponentRef,
   type HTMLAttributes,
+  type KeyboardEvent,
+  type PointerEvent,
   type ReactNode,
   forwardRef,
+  useCallback,
   useEffect,
   useRef,
   useState,
-  useSyncExternalStore,
 } from 'react';
 
 import { useHeaderHeight } from '../../hooks/ui/use-header-height';
-import { type PanelDefaultSize, useResizablePanelSize } from '../../hooks/ui/use-resizable-panel-size';
 import { cn } from '../../utils/cn';
-import { PanelResizeHandle } from './panel-resize-handle';
+import { clamp } from '../../utils/common';
 
 /** Unified overlay backdrop — dimmed, no blur. Single source of truth for
  *  every full-screen backdrop (Drawer, AppLayoutDrawer, MobileBurgerMenu,
@@ -137,21 +138,181 @@ type DrawerSide = 'right' | 'left' | 'top' | 'bottom';
 
 const HORIZONTAL_SIDES: ReadonlySet<DrawerSide> = new Set(['left', 'right']);
 
-const subscribeToResize = (onChange: () => void) => {
-  window.addEventListener('resize', onChange);
-  return () => window.removeEventListener('resize', onChange);
-};
-const subscribeToNothing = () => () => {};
-const noExtent = () => 0;
-
-/** The viewport's extent along the resize axis, in px. 0 on the server and
- *  while `enabled` is false, when nothing listens for resizes at all. A change
- *  on the other axis (a phone's URL bar collapsing) re-renders nothing. */
-function useViewportExtent(enabled: boolean, isHorizontal: boolean): number {
-  return useSyncExternalStore(
-    enabled ? subscribeToResize : subscribeToNothing,
-    enabled ? (isHorizontal ? () => window.innerWidth : () => window.innerHeight) : noExtent,
-    noExtent,
+function viewportSize(isHorizontal: boolean): number {
+  if (typeof window === 'undefined') return 0;
+  return isHorizontal ? window.innerWidth : window.innerHeight;
+}
+
+interface UseResizableSizeArgs {
+  enabled: boolean;
+  isHorizontal: boolean;
+  minSize: number;
+  maxSize: number;
+  defaultSize: number;
+  storageKey?: string;
+}
+
+function useResizableSize({ enabled, isHorizontal, minSize, maxSize, defaultSize, storageKey }: UseResizableSizeArgs) {
+  const clampToViewport = useCallback(
+    (value: number) => {
+      const vp = viewportSize(isHorizontal);
+      const effectiveMax = vp > 0 ? Math.min(maxSize, vp - 80) : maxSize;
+      return clamp(value, minSize, Math.max(minSize, effectiveMax));
+    },
+    [isHorizontal, minSize, maxSize],
+  );
+
+  const readInitial = useCallback(() => {
+    if (!enabled) return defaultSize;
+    if (typeof window === 'undefined') return defaultSize;
+    if (!storageKey) return clampToViewport(defaultSize);
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      if (!raw) return clampToViewport(defaultSize);
+      const parsed = parseFloat(raw);
+      if (!Number.isFinite(parsed)) return clampToViewport(defaultSize);
+      return clampToViewport(parsed);
+    } catch {
+      return clampToViewport(defaultSize);
+    }
+  }, [enabled, storageKey, defaultSize, clampToViewport]);
+
+  const [size, setSizeRaw] = useState<number>(readInitial);
+
+  const setSize = useCallback((next: number) => setSizeRaw(clampToViewport(next)), [clampToViewport]);
+
+  useEffect(() => {
+    if (!enabled || !storageKey || typeof window === 'undefined') return;
+    try {
+      window.localStorage.setItem(storageKey, String(Math.round(size)));
+    } catch {
+      // ignore quota / disabled-storage
+    }
+  }, [enabled, size, storageKey]);
+
+  useEffect(() => {
+    if (!enabled || typeof window === 'undefined') return undefined;
+    const onResize = () => setSizeRaw(prev => clampToViewport(prev));
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, [enabled, clampToViewport]);
+
+  return { size, setSize };
+}
+
+interface DrawerResizeHandleProps {
+  side: DrawerSide;
+  size: number;
+  minSize: number;
+  maxSize: number;
+  onSize: (next: number) => void;
+  ariaLabel?: string;
+}
+
+function DrawerResizeHandle({ side, size, minSize, maxSize, onSize, ariaLabel }: DrawerResizeHandleProps) {
+  const isHorizontal = HORIZONTAL_SIDES.has(side);
+  const startRef = useRef<{ x: number; y: number; size: number } | null>(null);
+
+  const direction = side === 'right' || side === 'bottom' ? -1 : 1;
+
+  const handlePointerDown = (e: PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0 && e.pointerType === 'mouse') return;
+    e.preventDefault();
+    startRef.current = { x: e.clientX, y: e.clientY, size };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+    document.body.style.userSelect = 'none';
+  };
+
+  const handlePointerMove = (e: PointerEvent<HTMLDivElement>) => {
+    const start = startRef.current;
+    if (!start) return;
+    const delta = isHorizontal ? e.clientX - start.x : e.clientY - start.y;
+    onSize(start.size + delta * direction);
+  };
+
+  const endDrag = (e: PointerEvent<HTMLDivElement>) => {
+    if (!startRef.current) return;
+    startRef.current = null;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+      // ignore — pointer may already be released
+    }
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const step = e.shiftKey ? 40 : 16;
+    if (isHorizontal) {
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        onSize(size + step * (side === 'right' ? 1 : -1));
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        onSize(size + step * (side === 'right' ? -1 : 1));
+      }
+    } else {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        onSize(size + step * (side === 'bottom' ? 1 : -1));
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        onSize(size + step * (side === 'bottom' ? -1 : 1));
+      }
+    }
+    if (e.key === 'Home') {
+      e.preventDefault();
+      onSize(minSize);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      onSize(maxSize);
+    }
+  };
+
+  // Handle is rendered as a SIBLING of the panel (child of DialogPrimitive.Content)
+  // so the panel can use `overflow-hidden` without clipping the handle.
+  // Wrapper has `py-4 px-4` (or `md:py-4 md:px-4` for flush on desktop)
+  // when the handle is visible — handle is desktop-only, where both flush
+  // and non-flush wrappers carry that padding — so `top-4 bottom-4` (or
+  // `left-4 right-4`) aligns the handle with the panel's bounds.
+  const trackPosition =
+    side === 'right'
+      ? 'right-full top-4 bottom-4 w-3 items-center justify-end pr-1'
+      : side === 'left'
+        ? 'left-full top-4 bottom-4 w-3 items-center justify-start pl-1'
+        : side === 'bottom'
+          ? 'bottom-full left-4 right-4 h-3 justify-center items-end pb-1'
+          : 'top-full left-4 right-4 h-3 justify-center items-start pt-1';
+
+  const cursorClass = isHorizontal ? 'cursor-col-resize' : 'cursor-row-resize';
+
+  const gripClass = isHorizontal ? 'h-10 w-1' : 'w-10 h-1';
+
+  return (
+    <div
+      role="separator"
+      tabIndex={0}
+      aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
+      aria-valuenow={Math.round(size)}
+      aria-valuemin={minSize}
+      aria-valuemax={maxSize}
+      aria-label={ariaLabel ?? (isHorizontal ? 'Resize panel width' : 'Resize panel height')}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'group absolute z-20 flex touch-none select-none',
+        'outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',
+        trackPosition,
+        cursorClass,
+      )}
+    >
+      <div aria-hidden className={cn('rounded-full bg-ods-bg-surface', gripClass)} />
+    </div>
   );
 }
 
@@ -165,12 +326,9 @@ interface DrawerContentBaseProps
   minSize?: number;
   /** Maximum allowed size (px) when resizable. Also clamped by viewport. */
   maxSize?: number;
-  /** Size (px) while the user has not resized the panel. Never stored. Pass a
-   *  function of the viewport's extent (0 on the server) for a default that
-   *  tracks the window. */
-  defaultSize?: PanelDefaultSize;
-  /** localStorage key for the size the user chose with the handle. Only that
-   *  choice is stored; see `useResizablePanelSize`. */
+  /** Initial size (px) when no localStorage entry exists. */
+  defaultSize?: number;
+  /** localStorage key for persisting the size across sessions. */
   storageKey?: string;
   /** Pixel breakpoint below which `resizable` is disabled and inline
    *  size is not applied (so consumer CSS can render full-viewport).
@@ -242,6 +400,8 @@ const DrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, D
   ) => {
     const resolvedSide: DrawerSide = side ?? 'right';
     const isHorizontal = HORIZONTAL_SIDES.has(resolvedSide);
+    const initialSize = defaultSize ?? (isHorizontal ? 560 : 480);
+
     const headerHeight = useHeaderHeight();
 
     const [isMobile, setIsMobile] = useState(false);
@@ -254,21 +414,12 @@ const DrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, D
       return () => mq.removeEventListener('change', update);
     }, [mobileBreakpoint]);
 
-    // The panel keeps 80px of the viewport free so the page behind it, and the
-    // resize handle, stay reachable.
-    const available = useViewportExtent(resizable, isHorizontal);
-    const panelRef = useRef<HTMLDivElement>(null);
-    const {
-      size: resizedSize,
-      setSize,
-      clampSize,
-    } = useResizablePanelSize({
+    const { size: resizedSize, setSize } = useResizableSize({
       enabled: resizable,
+      isHorizontal,
       minSize,
       maxSize,
-      defaultSize: defaultSize ?? (isHorizontal ? 560 : 480),
-      available,
-      reserve: 80,
+      defaultSize: initialSize,
       storageKey,
     });
 
@@ -292,20 +443,16 @@ const DrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, D
               `overflow-hidden` so the drag track stays visible while the
               panel cleanly clips children to its rounded corners. */}
           {applyInlineSize ? (
-            <PanelResizeHandle
-              variant="overlay"
+            <DrawerResizeHandle
               side={resolvedSide}
               size={resizedSize}
               minSize={minSize}
               maxSize={maxSize}
               onSize={setSize}
-              clampSize={clampSize}
-              panelRef={panelRef}
               ariaLabel={resizeAriaLabel}
             />
           ) : null}
           <div
-            ref={panelRef}
             className={cn(drawerPanelVariants({ side, flush, size }), className, panelClassName)}
             style={{ ...sizeStyle, ...panelStyle }}
           >

package/dist/components/ui/panel-resize-handle.d.ts

@@ -1,25 +0,0 @@
-import { type RefObject } from 'react';
-/**
- * The drag-to-resize handle of a side or edge panel, shared by `Drawer` and
- * `AppLayoutDrawer`. A drag writes the panel's size to the DOM and reports it
- * once, on release; arrow keys, Home and End report at once.
- */
-type PanelSide = 'right' | 'left' | 'top' | 'bottom';
-export interface PanelResizeHandleProps {
-    side: PanelSide;
-    size: number;
-    minSize: number;
-    maxSize: number;
-    onSize: (next: number) => void;
-    /** Clamp a candidate size to the min/max and the container. */
-    clampSize: (next: number) => number;
-    /** The panel the size applies to — written directly while dragging. */
-    panelRef: RefObject<HTMLDivElement | null>;
-    /** `overlay` is the body-level `Drawer`'s handle, `inLayout` the wider one of
-     *  `AppLayoutDrawer`. They differ in track width and grip colour only. */
-    variant: 'overlay' | 'inLayout';
-    ariaLabel?: string;
-}
-export declare function PanelResizeHandle({ side, size, minSize, maxSize, onSize, clampSize, panelRef, variant, ariaLabel, }: PanelResizeHandleProps): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=panel-resize-handle.d.ts.map

package/dist/components/ui/panel-resize-handle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"panel-resize-handle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/panel-resize-handle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyC,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAIjG;;;;GAIG;AAEH,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAmBrD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,+DAA+D;IAC/D,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,uEAAuE;IACvE,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C;8EAC0E;IAC1E,OAAO,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,sBAAsB,+BA8HxB"}