50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T19b6,"use client"; import { useId, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from "react"; export interface SplitterProps { /** First pane (left or top). */ start: ReactNode; /** Second pane (right or bottom). */ end: ReactNode; /** "horizontal" puts panes side by side, "vertical" stacks them. */ direction?: "horizontal" | "vertical"; /** Initial size of the first pane, in % of the container. */ defaultSize?: number; /** Smallest size of the first pane, in %. */ minSize?: number; /** Largest size of the first pane, in %. */ maxSize?: number; /** % moved per arrow key press (Shift moves 4x). */ step?: number; /** Accessible name for the handle. */ label?: string; onResize?: (size: number) => void; className?: string; } const round = (v: number) => Math.round(v * 10) / 10; export function Splitter({ start, end, direction = "horizontal", defaultSize = 28, minSize = 15, maxSize = 85, step = 5, label = "Resize panels", onResize, className, }: SplitterProps) { const lo = Math.min(minSize, maxSize); const hi = Math.max(minSize, maxSize); const clamp = (v: number) => Math.min(hi, Math.max(lo, v)); const horizontal = direction === "horizontal"; const [size, setSize] = useState(() => clamp(defaultSize)); // Playground/prop changes reset the split (render-time sync, no effect needed). const [prev, setPrev] = useState({ defaultSize, lo, hi }); if (prev.defaultSize !== defaultSize || prev.lo !== lo || prev.hi !== hi) { setPrev({ defaultSize, lo, hi }); setSize(clamp(defaultSize)); } const root = useRef(null); const handle = useRef(null); const live = useRef(size); const dragging = useRef(false); const id = useId(); // During a drag we write straight to the DOM; React only hears about the final size. const paint = (v: number) => { live.current = v; root.current?.style.setProperty("--split", `${v}%`); handle.current?.setAttribute("aria-valuenow", String(Math.round(v))); }; const commit = (v: number) => { const next = round(clamp(v)); paint(next); setSize(next); onResize?.(next); }; const fromPointer = (e: PointerEvent) => { const r = root.current!.getBoundingClientRect(); const p = horizontal ? (e.clientX - r.left) / r.width : (e.clientY - r.top) / r.height; return clamp(p * 100); }; const onDown = (e: PointerEvent) => { if (e.button !== 0) return; e.preventDefault(); e.currentTarget.setPointerCapture(e.pointerId); e.currentTarget.focus({ preventScroll: true }); dragging.current = true; root.current!.dataset.dragging = ""; }; const onMove = (e: PointerEvent) => { if (dragging.current) paint(fromPointer(e)); }; const onUp = () => { if (!dragging.current) return; dragging.current = false; delete root.current!.dataset.dragging; commit(live.current); }; const onKey = (e: KeyboardEvent) => { const s = e.shiftKey ? step * 4 : step; const back = horizontal ? "ArrowLeft" : "ArrowUp"; const fwd = horizontal ? "ArrowRight" : "ArrowDown"; let next: number | null = null; if (e.key === back) next = size - s; else if (e.key === fwd) next = size + s; else if (e.key === "Home") next = lo; else if (e.key === "End") next = hi; // Enter toggles between collapsed-to-min and the default split. else if (e.key === "Enter") next = size > lo ? lo : defaultSize; if (next === null) return; e.preventDefault(); commit(next); }; return (

{start}

commit(defaultSize)} className={`group/handle relative z-10 flex shrink-0 touch-none items-center justify-center outline-none ${ horizontal ? "-mx-1.5 w-3 cursor-col-resize flex-col" : "-my-1.5 h-3 cursor-row-resize flex-row" }`} style={{ ["--splitter-cursor" as string]: horizontal ? "col-resize" : "row-resize" }} > {/* Hairline that brightens on hover/drag/focus. */} {/* Grip pill. */} {[0, 1, 2].map((i) => ( ))}

{end}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/ui/splitter.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]