@djangocfg/ui-core 2.1.309 → 2.1.310

package/README.md

@@ -87,7 +87,7 @@ import { Button, Dialog, Table } from '@djangocfg/ui-core';
 </SidePanel>
 ```
 
-**`Drawer`** — modal vaul panel sliding from any edge (`top` / `right` / `bottom` / `left`). Sizes: `sm` `md` `lg` `xl` `full`, default `md`; or pass an explicit `width` / `height`.
+**`Drawer`** — modal vaul panel sliding from any edge (`top` / `right` / `bottom` / `left`). Sizes: `sm` `md` `lg` `xl` `full`, default `md`; or pass an explicit `width` / `height`. Pass `resizable` to drag the inner edge — auto-disabled on mobile (< 768px) unless `resizableOnDesktopOnly={false}`. Tune with `minSize` / `maxSize` (px) and observe via `onResizeChange`. Pass `persistKey` to save the resized size in `localStorage` and restore it on next open. The store is exported as `useDrawerSizeStore` (with `clearSize` / `clearAll`).
 
 ```tsx
 <Drawer direction="right">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.309",
+  "version": "2.1.310",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -91,7 +91,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.309",
+    "@djangocfg/i18n": "^2.1.310",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -160,9 +160,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.309",
+    "@djangocfg/i18n": "^2.1.310",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.309",
+    "@djangocfg/typescript-config": "^2.1.310",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/index.ts

@@ -41,7 +41,7 @@ export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, Dialog
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay } from './overlay/alert-dialog';
 export { Popover, PopoverContent, PopoverTrigger, PopoverAnchor, PopoverArrow } from './overlay/popover';
 export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetPortal, SheetOverlay } from './overlay/sheet';
-export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerPortal, DrawerOverlay } from './overlay/drawer';
+export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerPortal, DrawerOverlay, useDrawerSizeStore } from './overlay/drawer';
 export { ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, ResponsiveSheetDescription, ResponsiveSheetFooter } from './overlay/responsive-sheet';
 export { SidePanel, SidePanelContent, SidePanelHeader, SidePanelTitle, SidePanelDescription, SidePanelBody, SidePanelFooter, SidePanelClose } from './overlay/side-panel';
 export type { SidePanelProps, SidePanelContentProps, SidePanelCloseProps } from './overlay/side-panel';

package/src/components/overlay/drawer/drawer.story.tsx

@@ -238,6 +238,82 @@ export const CustomWidth = () => (
   </Drawer>
 );
 
+export const Resizable = () => {
+  const [size, setSize] = React.useState<number | null>(null);
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">
+        Drag the inner edge to resize. Disabled on mobile (&lt; 768px) by
+        default — pass <code>resizableOnDesktopOnly={'{false}'}</code> to allow
+        on touch.
+      </p>
+      <Drawer direction="right">
+        <DrawerTrigger asChild>
+          <Button variant="outline">Open resizable drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent
+          direction="right"
+          size="md"
+          resizable
+          minSize={320}
+          maxSize={900}
+          onResizeChange={setSize}
+        >
+          <DrawerHeader>
+            <DrawerTitle>Resizable</DrawerTitle>
+            <DrawerDescription>
+              Current width: {size != null ? `${Math.round(size)}px` : 'preset (480px)'}
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 text-sm">Drag the left edge to resize.</div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+};
+
+export const ResizablePersisted = () => (
+  <div className="space-y-3">
+    <p className="text-sm text-muted-foreground">
+      Same as <code>Resizable</code>, but the size is persisted in
+      <code> localStorage</code> under <code>persistKey="story-demo"</code> —
+      reload the page and reopen, the last width is restored.
+    </p>
+    <Drawer direction="right">
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open persisted drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent
+        direction="right"
+        size="md"
+        resizable
+        persistKey="story-demo"
+        minSize={320}
+        maxSize={900}
+      >
+        <DrawerHeader>
+          <DrawerTitle>Resizable + persisted</DrawerTitle>
+          <DrawerDescription>
+            Width survives reloads. Open DevTools → Application → Local Storage
+            and look for <code>djangocfg.ui.drawer-sizes</code>.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4 text-sm">Drag the left edge to resize.</div>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="outline">Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  </div>
+);
+
 export const NarrowViewport = () => (
   <div className="space-y-3">
     <p className="text-sm text-muted-foreground">

package/src/components/overlay/drawer/index.tsx

@@ -4,6 +4,8 @@ import * as React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
 import { cn } from '../../../lib/utils';
+import { useIsMobile } from '../../../hooks/media/useMobile';
+import { useDrawerSizeStore } from './store';
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -56,6 +58,26 @@ const verticalSizePresets: Record<DrawerSize, string> = {
   full: '100vh',
 };
 
+// Numeric fallbacks used as initial size when resize starts and the
+// user has not provided an explicit width/height. We can't read the
+// CSS `min(100vw, …px)` value reliably before the first paint, so we
+// take the px portion as a baseline.
+const horizontalSizePx: Record<DrawerSize, number> = {
+  sm: 360,
+  md: 480,
+  lg: 640,
+  xl: 800,
+  full: 1200,
+};
+
+const verticalSizePx: Record<DrawerSize, number> = {
+  sm: 240,
+  md: 360,
+  lg: 480,
+  xl: 640,
+  full: 900,
+};
+
 // Anchor + border + radius only — no width/height bake-in. Length is
 // applied via inline `style` from props so vaul's first
 // `getBoundingClientRect()` measurement matches the final layout
@@ -73,6 +95,18 @@ const toCssLength = (value: string | number | undefined): string | undefined =>
   return typeof value === 'number' ? `${value}px` : value;
 };
 
+const parseInitialPx = (value: string | number | undefined, fallback: number): number => {
+  if (typeof value === 'number') return value;
+  if (typeof value === 'string') {
+    const match = value.match(/(-?\d+(?:\.\d+)?)/);
+    if (match) return Number(match[1]);
+  }
+  return fallback;
+};
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
 export interface DrawerContentProps
   extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> {
   direction?: 'bottom' | 'right' | 'left' | 'top';
@@ -82,21 +116,138 @@ export interface DrawerContentProps
   width?: string | number;
   /** CSS length for height — applies to top/bottom drawers. Overrides `size`. */
   height?: string | number;
+  /** Allow user to resize the drawer by dragging its inner edge. */
+  resizable?: boolean;
+  /** Disable resize on mobile viewports (< 768px). Default `true`. */
+  resizableOnDesktopOnly?: boolean;
+  /** Min size in px when `resizable`. Width for horizontal, height for vertical. */
+  minSize?: number;
+  /** Max size in px when `resizable`. Width for horizontal, height for vertical. */
+  maxSize?: number;
+  /** Called with the new size in px on every resize step. */
+  onResizeChange?: (size: number) => void;
+  /**
+   * Persist resized size in localStorage under this key. Without it,
+   * resize is session-only. Width and height are stored separately,
+   * so the same key can be reused across directions.
+   */
+  persistKey?: string;
 }
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   DrawerContentProps
->(({ className, children, direction = 'bottom', size = 'md', width, height, style, ...props }, ref) => {
+>(({
+  className,
+  children,
+  direction = 'bottom',
+  size = 'md',
+  width,
+  height,
+  style,
+  resizable = false,
+  resizableOnDesktopOnly = true,
+  minSize,
+  maxSize,
+  onResizeChange,
+  persistKey,
+  ...props
+}, ref) => {
   const isVertical = direction === 'bottom' || direction === 'top';
+  const isMobile = useIsMobile();
+  const resizeEnabled = resizable && (!resizableOnDesktopOnly || !isMobile);
+
+  const defaultMin = isVertical ? 200 : 280;
+  const defaultMax = isVertical ? 800 : 960;
+  const minPx = minSize ?? defaultMin;
+  const maxPx = maxSize ?? defaultMax;
+
+  const initialPx = isVertical
+    ? parseInitialPx(height, verticalSizePx[size])
+    : parseInitialPx(width, horizontalSizePx[size]);
+
+  const [resizedPx, setResizedPx] = React.useState<number | null>(null);
+  const axis: 'width' | 'height' = isVertical ? 'height' : 'width';
+
+  // Hydrate persist store on mount (skipHydration in middleware) and
+  // pull stored size for this key+axis. Clamp to current min/max so a
+  // value persisted under looser bounds doesn't escape.
+  React.useEffect(() => {
+    if (!resizeEnabled || !persistKey) return;
+    let cancelled = false;
+    const applyStored = () => {
+      if (cancelled) return;
+      const stored = useDrawerSizeStore.getState().getSize(persistKey, axis);
+      if (stored != null) {
+        setResizedPx(clamp(stored, minPx, maxPx));
+      }
+    };
+    Promise.resolve(useDrawerSizeStore.persist.rehydrate()).then(applyStored);
+    return () => {
+      cancelled = true;
+    };
+  }, [resizeEnabled, persistKey, axis, minPx, maxPx]);
+
+  // Reset resized state if direction or enabled flag flips, so we don't
+  // carry a horizontal width into a vertical drawer.
+  React.useEffect(() => {
+    setResizedPx(null);
+  }, [direction, resizeEnabled]);
+
+  const dragStateRef = React.useRef<{
+    startCoord: number;
+    startSize: number;
+  } | null>(null);
+
+  const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!resizeEnabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    dragStateRef.current = {
+      startCoord: isVertical ? e.clientY : e.clientX,
+      startSize: resizedPx ?? initialPx,
+    };
+  }, [resizeEnabled, isVertical, resizedPx, initialPx]);
+
+  const handlePointerMove = React.useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    const drag = dragStateRef.current;
+    if (!drag) return;
+    e.preventDefault();
+    const current = isVertical ? e.clientY : e.clientX;
+    const delta = current - drag.startCoord;
+    // Direction sign: handle is on the side facing into the viewport, so
+    // dragging away from the anchor grows the drawer.
+    const sign =
+      direction === 'right' || direction === 'bottom' ? -1 : 1;
+    const next = clamp(drag.startSize + sign * delta, minPx, maxPx);
+    setResizedPx(next);
+    onResizeChange?.(next);
+  }, [direction, isVertical, minPx, maxPx, onResizeChange]);
+
+  const handlePointerUp = React.useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragStateRef.current) return;
+    (e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
+    dragStateRef.current = null;
+    if (persistKey && resizedPx != null) {
+      useDrawerSizeStore.getState().setSize(persistKey, axis, resizedPx);
+    }
+  }, [persistKey, axis, resizedPx]);
 
   const resolvedWidth = !isVertical
-    ? (toCssLength(width) ?? horizontalSizePresets[size])
+    ? (resizedPx != null ? `${resizedPx}px` : (toCssLength(width) ?? horizontalSizePresets[size]))
     : undefined;
   const resolvedHeight = isVertical
-    ? (toCssLength(height) ?? verticalSizePresets[size])
+    ? (resizedPx != null ? `${resizedPx}px` : (toCssLength(height) ?? verticalSizePresets[size]))
     : undefined;
 
+  const handlePosition: Record<typeof direction, string> = {
+    right: 'left-0 top-0 h-full w-1.5 -translate-x-1/2 cursor-ew-resize',
+    left: 'right-0 top-0 h-full w-1.5 translate-x-1/2 cursor-ew-resize',
+    bottom: 'top-0 left-0 w-full h-1.5 -translate-y-1/2 cursor-ns-resize',
+    top: 'bottom-0 left-0 w-full h-1.5 translate-y-1/2 cursor-ns-resize',
+  };
+
   return (
     <DrawerPortal>
       <DrawerOverlay />
@@ -108,13 +259,29 @@ const DrawerContent = React.forwardRef<
           className
         )}
         style={{
-          transition: 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)',
+          transition: dragStateRef.current
+            ? 'none'
+            : 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)',
           ...(resolvedWidth ? { width: resolvedWidth } : {}),
           ...(resolvedHeight ? { height: resolvedHeight } : {}),
           ...style,
         }}
         {...props}
       >
+        {resizeEnabled && (
+          <div
+            role="separator"
+            aria-orientation={isVertical ? 'horizontal' : 'vertical'}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerCancel={handlePointerUp}
+            className={cn(
+              "absolute z-10 select-none touch-none bg-transparent hover:bg-border/60 transition-colors",
+              handlePosition[direction]
+            )}
+          />
+        )}
         {isVertical && <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />}
         {children}
       </DrawerPrimitive.Content>
@@ -184,3 +351,5 @@ export {
   DrawerTitle,
   DrawerDescription,
 }
+
+export { useDrawerSizeStore } from './store';

package/src/components/overlay/drawer/store.ts

@@ -0,0 +1,64 @@
+'use client';
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+/**
+ * Persisted drawer sizes keyed by `persistKey`.
+ *
+ * Stores width (left/right drawers) and height (top/bottom drawers)
+ * separately under the same key, so a single key can drive both axes
+ * if the drawer is reused with different directions.
+ */
+interface DrawerSizeEntry {
+  width?: number;
+  height?: number;
+}
+
+interface DrawerSizeStore {
+  sizes: Record<string, DrawerSizeEntry>;
+  setSize: (key: string, axis: 'width' | 'height', size: number) => void;
+  getSize: (key: string, axis: 'width' | 'height') => number | undefined;
+  clearSize: (key: string) => void;
+  clearAll: () => void;
+}
+
+const noopStorage = {
+  getItem: () => null,
+  setItem: () => undefined,
+  removeItem: () => undefined,
+};
+
+export const useDrawerSizeStore = create<DrawerSizeStore>()(
+  persist(
+    (set, get) => ({
+      sizes: {},
+      setSize: (key, axis, size) => {
+        set((state) => ({
+          sizes: {
+            ...state.sizes,
+            [key]: { ...state.sizes[key], [axis]: size },
+          },
+        }));
+      },
+      getSize: (key, axis) => get().sizes[key]?.[axis],
+      clearSize: (key) => {
+        set((state) => {
+          const { [key]: _removed, ...rest } = state.sizes;
+          return { sizes: rest };
+        });
+      },
+      clearAll: () => set({ sizes: {} }),
+    }),
+    {
+      name: 'djangocfg.ui.drawer-sizes',
+      version: 1,
+      storage: createJSONStorage(() =>
+        typeof window !== 'undefined' ? window.localStorage : noopStorage,
+      ),
+      // Skip auto-hydrate so SSR markup doesn't differ from first client paint.
+      // Components hydrate explicitly on mount via `useEffect`.
+      skipHydration: true,
+    },
+  ),
+);