Resizable

1"use client";
2 
3import * as React from "react";
4import { GripVertical } from "lucide-react";
5import * as ResizablePrimitive from "react-resizable-panels";
6 
7import { cn } from "@/lib/utils";
8 
9type LegacyTagName = keyof HTMLElementTagNameMap;
10type PointerHitAreaMargins = {
11  coarse: number;
12  fine: number;
13};
14 
15type ResizablePanelGroupProps = Omit<ResizablePrimitive.GroupProps, "id" | "orientation"> & {
16  autoSaveId?: string | null;
17  direction?: ResizablePrimitive.Orientation;
18  id?: string | number | null;
19  keyboardResizeBy?: number | null;
20  onLayout?: ((layout: number[]) => void) | null;
21  orientation?: ResizablePrimitive.Orientation;
22  storage?: ResizablePrimitive.LayoutStorage;
23  tagName?: LegacyTagName;
24};
25 
26type ResizablePanelProps = Omit<
27  ResizablePrimitive.PanelProps,
28  "collapsedSize" | "defaultSize" | "id" | "maxSize" | "minSize" | "onResize"
29> & {
30  collapsedSize?: string | number;
31  defaultSize?: string | number;
32  id?: string | number | null;
33  maxSize?: string | number;
34  minSize?: string | number;
35  onCollapse?: () => void;
36  onExpand?: () => void;
37  onResize?: (size: number, prevSize: number | undefined) => void;
38  order?: number;
39  tagName?: LegacyTagName;
40};
41 
42type ResizableHandleProps = Omit<ResizablePrimitive.SeparatorProps, "id"> & {
43  hitAreaMargins?: PointerHitAreaMargins;
44  id?: string | number | null;
45  onDragging?: (isDragging: boolean) => void;
46  tagName?: LegacyTagName;
47  withHandle?: boolean;
48};
49 
50export type ResizablePanelHandle = {
51  collapse: () => void;
52  expand: (minSize?: number) => void;
53  getId: () => string;
54  getSize: () => number;
55  isCollapsed: () => boolean;
56  isExpanded: () => boolean;
57  resize: (size: number) => void;
58};
59 
60const LEGACY_HIT_AREA_MARGINS = { coarse: 15, fine: 5 } as const;
61const HANDLE_THICKNESS = 2;
62const LEGACY_KEYBOARD_RESIZE_BY = 10;
63 
64const defaultStorage: ResizablePrimitive.LayoutStorage = {
65  getItem(name) {
66    try {
67      return typeof window === "undefined" ? null : window.localStorage.getItem(name);
68    } catch {
69      return null;
70    }
71  },
72  setItem(name, value) {
73    try {
74      window.localStorage.setItem(name, value);
75    } catch {
76      // Match the legacy adapter's no-op behavior when storage is unavailable.
77    }
78  },
79};
80 
81function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null) {
82  if (typeof ref === "function") {
83    ref(value);
84  } else if (ref) {
85    ref.current = value;
86  }
87}
88 
89function toPercentSize(value: string | number | undefined) {
90// … truncated