Resizable

1"use client";2​3import * as React from "react";4import { DotsSixVerticalIcon } from "@phosphor-icons/react/ssr";5​6import { cn } from "@/lib/utils";7​8// Panels with a draggable edge between them (extrapolated from the Inkbox console, Figma 427:2715: the 1px rules9// between its rails and the inbox list). The handle is the console's 1px lilac rule with a wide invisible grip; with10// `withHandle` it carries a 12 by 20 white tab with 4px corners, the field edge and a grip glyph. Drag it, or focus it11// and use the arrow keys (Home and End go to the limits). Sizes are percentages of the group; dragging follows the12// pointer directly, with no animation.13​14type Direction = "horizontal" | "vertical";15type PanelInfo = { id: string; defaultSize?: number; minSize: number; maxSize: number; order: number };16type GroupContext = {17  direction: Direction;18  sizes: Record<string, number>;19  register: (info: PanelInfo) => () => void;20  resize: (handleEl: HTMLElement, delta: number) => void;21  set: (handleEl: HTMLElement, to: "min" | "max") => void;22  limits: (handleEl: HTMLElement) => { before?: string; value: number; min: number; max: number };23};24​25const ResizableContext = React.createContext<GroupContext | null>(null);26const useGroup = () => {27  const ctx = React.useContext(ResizableContext);28  if (!ctx) throw new Error("Resizable parts must be used within a <ResizablePanelGroup />");29  return ctx;30};31​32function ResizablePanelGroup({ direction = "horizontal", className, onLayout, children, ...props }: Omit<React.ComponentProps<"div">, "dir"> & { direction?: Direction; onLayout?: (sizes: number[]) => void }) {33  const [panels, setPanels] = React.useState<PanelInfo[]>([]);34  const [sizes, setSizes] = React.useState<Record<string, number>>({});35  const group = React.useRef<HTMLDivElement>(null);36  const counter = React.useRef(0);37​38  const register = React.useCallback((info: PanelInfo) => {39    setPanels((p) => [...p.filter((x) => x.id !== info.id), { ...info, order: counter.current++ }]);40    return () => setPanels((p) => p.filter((x) => x.id !== info.id));41  }, []);42​43  // Panels without a default size share what the others leave.44  React.useEffect(() => {45    setSizes((current) => {46      const ids = panels.map((p) => p.id);47      if (ids.every((id) => id in current) && Object.keys(current).length === ids.length) return current;48      const fixed = panels.filter((p) => p.defaultSize !== undefined).reduce((s, p) => s + (p.defaultSize ?? 0), 0);49      const free = panels.filter((p) => p.defaultSize === undefined).length;50      return Object.fromEntries(panels.map((p) => [p.id, p.defaultSize ?? Math.max(0, (100 - fixed) / Math.max(1, free))]));51    });52  }, [panels]);53​54  const ordered = React.useCallback(() => {55    const els = Array.from(group.current?.querySelectorAll<HTMLElement>(":scope > [data-slot=resizable-panel]") ?? []);56    return els.map((el) => el.dataset.panelId!);57  }, []);58​59  const neighbors = React.useCallback((handleEl: HTMLElement) => {60    let prev = handleEl.previousElementSibling as HTMLElement | null;61    while (prev && prev.dataset.slot !== "resizable-panel") prev = prev.previousElementSibling as HTMLElement | null;62    let next = handleEl.nextElementSibling as HTMLElement | null;63    while (next && next.dataset.slot !== "resizable-panel") next = next.nextElementSibling as HTMLElement | null;64    return [prev?.dataset.panelId, next?.dataset.panelId] as const;65  }, []);66​67  const info = (id?: string) => panels.find((p) => p.id === id);68​69  const apply = React.useCallback((a: string, b: string, nextA: number) => {70    setSizes((s) => {71      const pa = panels.find((p) => p.id === a);72      const pb = panels.find((p) => p.id === b);73      if (!pa || !pb) return s;74      const total = s[a] + s[b];75      const lo = Math.max(pa.minSize, total - pb.maxSize);76      const hi = Math.min(pa.maxSize, total - pb.minSize);77      const clamped = Math.min(hi, Math.max(lo, nextA));78      if (clamped === s[a]) return s;79      const out = { ...s, [a]: clamped, [b]: total - clamped };80      onLayout?.(ordered().map((id) => out[id]));81      return out;82    });83  }, [onLayout, ordered, panels]);84​85  const resize = React.useCallback((handleEl: HTMLElement, delta: number) => {86    const [a, b] = neighbors(handleEl);87    if (a && b) apply(a, b, (sizes[a] ?? 0) + delta);88  }, [apply, neighbors, sizes]);89​90  const set = React.useCallback((handleEl: HTMLElement, to: "min" | "max") => {91    const [a, b] = neighbors(handleEl);92    if (a && b) apply(a, b, to === "min" ? 0 : 100);93  }, [apply, neighbors]);94​95  const limits = (handleEl: HTMLElement) => {96    const [a] = neighbors(handleEl);97    const p = info(a);98    return { before: a, value: a ? Math.round(sizes[a] ?? 0) : 0, min: p?.minSize ?? 0, max: p?.maxSize ?? 100 };99  };100​101  return (102    <ResizableContext.Provider value={{ direction, sizes, register, resize, set, limits }}>103      <div104        ref={group}105        data-slot="resizable-panel-group"106        data-panel-group-direction={direction}107        className={cn("flex h-full w-full", direction === "vertical" && "flex-col", className)}108        {...props}109      >110        {children}111      </div>112    </ResizableContext.Provider>113  );114}115​116function ResizablePanel({ defaultSize, minSize = 0, maxSize = 100, className, style, id: idProp, ...props }: React.ComponentProps<"div"> & { defaultSize?: number; minSize?: number; maxSize?: number }) {117  const { register, sizes } = useGroup();118  const auto = React.useId();119  const id = idProp ?? auto;120  React.useLayoutEffect(() => register({ id, defaultSize, minSize, maxSize, order: 0 }), [register, id, defaultSize, minSize, maxSize]);121  const size = sizes[id] ?? defaultSize;122  return (123    <div124      data-slot="resizable-panel"125      data-panel-id={id}126      data-panel-size={size === undefined ? undefined : Math.round(size)}127      className={cn("min-h-0 min-w-0 overflow-hidden", className)}128      style={{ flexGrow: size ?? 1, flexShrink: 1, flexBasis: 0, ...style }}129      {...props}130    />131  );132}133​134function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<"div"> & { withHandle?: boolean }) {135  const { direction, resize, set, limits } = useGroup();136  const ref = React.useRef<HTMLDivElement>(null);137  const drag = React.useRef<{ start: number; size: number; pointer: number } | null>(null);138  const [, force] = React.useReducer((n: number) => n + 1, 0);139  const vertical = direction === "vertical";140  React.useEffect(() => force(), []);141  const lim = ref.current ? limits(ref.current) : { value: 0, min: 0, max: 100 };142​143  return (144    <div145      ref={ref}146      role="separator"147      tabIndex={0}148      aria-orientation={vertical ? "horizontal" : "vertical"}149      aria-valuenow={lim.value}150      aria-valuemin={lim.min}151      aria-valuemax={lim.max}152      aria-label="Resize"153      data-slot="resizable-handle"154      data-panel-group-direction={direction}155      className={cn(156        "relative flex shrink-0 touch-none items-center justify-center bg-line-subtle outline-none select-none after:absolute focus-visible:bg-line-brand focus-visible:outline-none data-[dragging]:bg-line-brand",157        vertical ? "h-px w-full cursor-row-resize after:inset-x-0 after:-inset-y-1.5" : "w-px cursor-col-resize after:inset-y-0 after:-inset-x-1.5",158        className,159      )}160      onPointerDown={(e) => {161        if (drag.current || e.button !== 0) return;162        const group = ref.current?.parentElement;163        if (!group) return;164        e.currentTarget.setPointerCapture(e.pointerId);165        e.currentTarget.dataset.dragging = "";166        drag.current = { start: vertical ? e.clientY : e.clientX, size: vertical ? group.clientHeight : group.clientWidth, pointer: e.pointerId };167      }}168      onPointerMove={(e) => {169        const d = drag.current;170        if (!d || e.pointerId !== d.pointer || !ref.current) return;171        const pos = vertical ? e.clientY : e.clientX;172        const delta = ((pos - d.start) / d.size) * 100;173        if (Math.abs(delta) < 0.1) return;174        resize(ref.current, delta);175        d.start = pos;176      }}177      onPointerUp={(e) => {178        drag.current = null;179        delete e.currentTarget.dataset.dragging;180      }}181      onPointerCancel={(e) => {182        drag.current = null;183        delete e.currentTarget.dataset.dragging;184      }}185      onKeyDown={(e) => {186        if (!ref.current) return;187        const step = e.shiftKey ? 10 : 2;188        const back = vertical ? "ArrowUp" : "ArrowLeft";189        const forward = vertical ? "ArrowDown" : "ArrowRight";190        if (e.key === back || e.key === forward) {191          e.preventDefault();192          resize(ref.current, e.key === back ? -step : step);193        } else if (e.key === "Home" || e.key === "End") {194          e.preventDefault();195          set(ref.current, e.key === "Home" ? "min" : "max");196        }197      }}198      {...props}199    >200      {withHandle && (201        <div className={cn("z-10 flex items-center justify-center rounded-xs border border-line-field bg-surface text-icon-secondary", vertical ? "h-3 w-5" : "h-5 w-3")}>202          <DotsSixVerticalIcon weight="bold" className={cn("size-3", vertical && "rotate-90")} />203        </div>204      )}205    </div>206  );207}208​209export { ResizableHandle, ResizablePanel, ResizablePanelGroup };