react-resizable-panels 0.0.1

package/dist/react-resizable-panels.module.js

@@ -0,0 +1,266 @@
+import {jsx as $hgUW1$jsx} from "react/jsx-runtime";
+import {useContext as $hgUW1$useContext, useLayoutEffect as $hgUW1$useLayoutEffect, createContext as $hgUW1$createContext, useRef as $hgUW1$useRef, useState as $hgUW1$useState, useEffect as $hgUW1$useEffect, useCallback as $hgUW1$useCallback, useMemo as $hgUW1$useMemo} from "react";
+
+
+
+
+const $3a3142702e7d9c06$export$7d8c6d083caec74a = (0, $hgUW1$createContext)(null);
+
+
+function $be6cfb11a13b6f3f$export$2e2bcd8739ae039({ children: children , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1  }) {
+    const context = (0, $hgUW1$useContext)((0, $3a3142702e7d9c06$export$7d8c6d083caec74a));
+    if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
+    const { getPanelStyle: getPanelStyle , registerPanel: registerPanel  } = context;
+    (0, $hgUW1$useLayoutEffect)(()=>{
+        const panel = {
+            defaultSize: defaultSize,
+            id: id,
+            minSize: minSize
+        };
+        registerPanel(id, panel);
+    }, [
+        defaultSize,
+        minSize,
+        registerPanel,
+        id
+    ]);
+    const style = getPanelStyle(id);
+    return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+        className: className,
+        style: style,
+        children: children
+    });
+}
+
+
+
+
+
+const $87c6267876d46c1c$var$PRECISION = 5;
+function $87c6267876d46c1c$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children , className: className = "" , direction: direction , height: height , width: width  }) {
+    const panelsRef = (0, $hgUW1$useRef)([]);
+    // 0-1 values representing the relative size of each panel.
+    const [sizes, setSizes] = (0, $hgUW1$useState)([]);
+    // Store committed values to avoid unnecessarily re-running memoization/effects functions.
+    const committedValuesRef = (0, $hgUW1$useRef)({
+        direction: direction,
+        height: height,
+        sizes: sizes,
+        width: width
+    });
+    (0, $hgUW1$useLayoutEffect)(()=>{
+        committedValuesRef.current.direction = direction;
+        committedValuesRef.current.height = height;
+        committedValuesRef.current.sizes = sizes;
+        committedValuesRef.current.width = width;
+    });
+    // Once all panels have registered themselves,
+    // Compute the initial sizes based on default weights.
+    // This assumes that panels register during initial mount (no conditional rendering)!
+    (0, $hgUW1$useLayoutEffect)(()=>{
+        const panels = panelsRef.current;
+        const sizes = committedValuesRef.current.sizes;
+        if (sizes.length === panels.length) return;
+        // If this panel has been configured to persist sizing information,
+        // default size should be restored from local storage if possible.
+        let defaultSizes = undefined;
+        if (autoSaveId) try {
+            const value = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+            if (value) defaultSizes = JSON.parse(value);
+        } catch (error) {}
+        if (sizes.length === 0 && defaultSizes != null && defaultSizes.length === panels.length) setSizes(defaultSizes);
+        else {
+            const totalWeight = panels.reduce((weight, panel)=>{
+                return weight + panel.defaultSize;
+            }, 0);
+            setSizes(panels.map((panel)=>panel.defaultSize / totalWeight));
+        }
+    }, [
+        autoSaveId
+    ]);
+    (0, $hgUW1$useEffect)(()=>{
+        if (autoSaveId && sizes.length > 0) // If this panel has been configured to persist sizing information, save sizes to local storage.
+        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(sizes));
+    }, [
+        autoSaveId,
+        sizes
+    ]);
+    const getPanelStyle = (0, $hgUW1$useCallback)((id)=>{
+        const panels = panelsRef.current;
+        const offset = $87c6267876d46c1c$var$getOffset(panels, id, direction, sizes, height, width);
+        const size = $87c6267876d46c1c$var$getSize(panels, id, direction, sizes, height, width);
+        if (direction === "horizontal") return {
+            height: "100%",
+            position: "absolute",
+            left: offset,
+            top: 0,
+            width: size
+        };
+        else return {
+            height: size,
+            position: "absolute",
+            left: 0,
+            top: offset,
+            width: "100%"
+        };
+    }, [
+        direction,
+        height,
+        sizes,
+        width
+    ]);
+    const registerPanel = (0, $hgUW1$useCallback)((id, panel)=>{
+        const panels = panelsRef.current;
+        const index = panels.findIndex((panel)=>panel.id === id);
+        if (index >= 0) panels.splice(index, 1);
+        panels.push(panel);
+    }, []);
+    const registerResizeHandle = (0, $hgUW1$useCallback)((idBefore, idAfter)=>{
+        return (event)=>{
+            event.preventDefault();
+            const panels = panelsRef.current;
+            const { direction: direction , height: height , sizes: prevSizes , width: width  } = committedValuesRef.current;
+            const isHorizontal = direction === "horizontal";
+            const movement = isHorizontal ? event.movementX : event.movementY;
+            const delta = isHorizontal ? movement / width : movement / height;
+            const nextSizes = $87c6267876d46c1c$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
+            if (prevSizes !== nextSizes) setSizes(nextSizes);
+        };
+    }, []);
+    const context = (0, $hgUW1$useMemo)(()=>({
+            direction: direction,
+            getPanelStyle: getPanelStyle,
+            registerPanel: registerPanel,
+            registerResizeHandle: registerResizeHandle
+        }), [
+        direction,
+        getPanelStyle,
+        registerPanel,
+        registerResizeHandle
+    ]);
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3a3142702e7d9c06$export$7d8c6d083caec74a).Provider, {
+        value: context,
+        children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+            className: className,
+            children: children
+        })
+    });
+}
+function $87c6267876d46c1c$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
+    if (delta === 0) return prevSizes;
+    const nextSizes = prevSizes.concat();
+    let deltaApplied = 0;
+    // A resizing panel affects the panels before or after it.
+    //
+    // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
+    // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+    //
+    // A positive delta means the panel immediately before the resizer should "expand".
+    // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
+    let pivotId = delta < 0 ? idBefore : idAfter;
+    let index = panels.findIndex((panel)=>panel.id === pivotId);
+    while(true){
+        const panel = panels[index];
+        const prevSize = prevSizes[index];
+        const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
+        if (prevSize !== nextSize) {
+            deltaApplied += prevSize - nextSize;
+            nextSizes[index] = nextSize;
+            if (deltaApplied.toPrecision($87c6267876d46c1c$var$PRECISION) >= delta.toPrecision($87c6267876d46c1c$var$PRECISION)) break;
+        }
+        if (delta < 0) {
+            if (--index < 0) break;
+        } else {
+            if (++index >= panels.length) break;
+        }
+    }
+    // If we were unable to resize any of the panels panels, return the previous state.
+    // This will essentially bailout and ignore the "mousemove" event.
+    if (deltaApplied === 0) return prevSizes;
+    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+    pivotId = delta < 0 ? idAfter : idBefore;
+    index = panels.findIndex((panel)=>panel.id === pivotId);
+    nextSizes[index] = prevSizes[index] + deltaApplied;
+    return nextSizes;
+}
+function $87c6267876d46c1c$var$getOffset(panels, id, direction, sizes, height, width) {
+    let index = panels.findIndex((panel)=>panel.id === id);
+    if (index < 0) return 0;
+    let scaledOffset = 0;
+    for(index = index - 1; index >= 0; index--){
+        const panel = panels[index];
+        scaledOffset += $87c6267876d46c1c$var$getSize(panels, panel.id, direction, sizes, height, width);
+    }
+    return Math.round(scaledOffset);
+}
+function $87c6267876d46c1c$var$getSize(panels, id, direction, sizes, height, width) {
+    const index = panels.findIndex((panel)=>panel.id === id);
+    const size = sizes[index];
+    if (size == null) return 0;
+    const totalSize = direction === "horizontal" ? width : height;
+    if (panels.length === 1) return totalSize;
+    else return Math.round(size * totalSize);
+}
+
+
+
+
+
+function $74f1c1b08e3b0df5$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , panelAfter: panelAfter , panelBefore: panelBefore  }) {
+    const context = (0, $hgUW1$useContext)((0, $3a3142702e7d9c06$export$7d8c6d083caec74a));
+    if (context === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+    const { direction: direction , registerResizeHandle: registerResizeHandle  } = context;
+    const [resizeHandler, setResizeHandler] = (0, $hgUW1$useState)(null);
+    const [isDragging, setIsDragging] = (0, $hgUW1$useState)(false);
+    (0, $hgUW1$useEffect)(()=>{
+        if (disabled) setResizeHandler(null);
+        else setResizeHandler(()=>registerResizeHandle(panelBefore, panelAfter));
+    }, [
+        disabled,
+        panelAfter,
+        panelBefore,
+        registerResizeHandle
+    ]);
+    (0, $hgUW1$useEffect)(()=>{
+        if (disabled || resizeHandler == null || !isDragging) return;
+        document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
+        const onMouseLeave = (_)=>{
+            setIsDragging(false);
+        };
+        const onMouseMove = (event)=>{
+            resizeHandler(event);
+        };
+        const onMouseUp = (_)=>{
+            setIsDragging(false);
+        };
+        document.body.addEventListener("mouseleave", onMouseLeave);
+        document.body.addEventListener("mousemove", onMouseMove);
+        document.body.addEventListener("mouseup", onMouseUp);
+        return ()=>{
+            document.body.style.cursor = "";
+            document.body.removeEventListener("mouseleave", onMouseLeave);
+            document.body.removeEventListener("mousemove", onMouseMove);
+            document.body.removeEventListener("mouseup", onMouseUp);
+        };
+    }, [
+        direction,
+        disabled,
+        isDragging,
+        resizeHandler
+    ]);
+    return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+        className: className,
+        onMouseDown: ()=>setIsDragging(true),
+        onMouseUp: ()=>setIsDragging(false),
+        style: {
+            cursor: direction === "horizontal" ? "ew-resize" : "ns-resize"
+        },
+        children: children
+    });
+}
+
+
+
+
+export {$be6cfb11a13b6f3f$export$2e2bcd8739ae039 as Panel, $87c6267876d46c1c$export$2e2bcd8739ae039 as PanelGroup, $74f1c1b08e3b0df5$export$2e2bcd8739ae039 as PanelResizeHandle};
+//# sourceMappingURL=react-resizable-panels.module.js.map

package/dist/react-resizable-panels.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["src/index.ts","src/Panel.tsx","src/PanelContexts.ts","src/PanelGroup.tsx","src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { PanelId } from \"./types\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n  children,\n  className = \"\",\n  defaultSize = 0.1,\n  id,\n  minSize = 0.1,\n}: {\n  children: ReactNode;\n  className?: string;\n  defaultSize?: number;\n  id: PanelId;\n  minSize?: number;\n}) {\n  const context = useContext(PanelGroupContext);\n  if (context === null) {\n    throw Error(`Panel components must be rendered within a PanelGroup container`);\n  }\n\n  const { getPanelStyle, registerPanel } = context;\n\n  useLayoutEffect(() => {\n    const panel = {\n      defaultSize,\n      id,\n      minSize,\n    };\n\n    registerPanel(id, panel);\n  }, [defaultSize, minSize, registerPanel, id]);\n\n  const style = getPanelStyle(id);\n\n  return (\n    <div className={className} style={style}>\n      {children}\n    </div>\n  );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { Panel, PanelId, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n  direction: \"horizontal\" | \"vertical\";\n  getPanelStyle: (id: PanelId) => CSSProperties;\n  registerResizeHandle: (idBefore: PanelId, idAfter: PanelId) => ResizeHandler;\n  registerPanel: (id: PanelId, panel: Panel) => void;\n} | null>(null);\n","import {\n  CSSProperties,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, Panel, PanelId } from \"./types\";\n\ntype Props = {\n  autoSaveId?: string;\n  children: ReactNode[];\n  className?: string;\n  direction: Direction;\n  height: number;\n  width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({ autoSaveId, children, className = \"\", direction, height, width }: Props) {\n  const panelsRef = useRef<Panel[]>([]);\n\n  // 0-1 values representing the relative size of each panel.\n  const [sizes, setSizes] = useState<number[]>([]);\n\n  // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n  const committedValuesRef = useRef<{\n    direction: Direction;\n    height: number;\n    sizes: number[];\n    width: number;\n  }>({\n    direction,\n    height,\n    sizes,\n    width,\n  });\n  useLayoutEffect(() => {\n    committedValuesRef.current.direction = direction;\n    committedValuesRef.current.height = height;\n    committedValuesRef.current.sizes = sizes;\n    committedValuesRef.current.width = width;\n  });\n\n  // Once all panels have registered themselves,\n  // Compute the initial sizes based on default weights.\n  // This assumes that panels register during initial mount (no conditional rendering)!\n  useLayoutEffect(() => {\n    const panels = panelsRef.current;\n    const sizes = committedValuesRef.current.sizes;\n    if (sizes.length === panels.length) {\n      return;\n    }\n\n    // If this panel has been configured to persist sizing information,\n    // default size should be restored from local storage if possible.\n    let defaultSizes: number[] | undefined = undefined;\n    if (autoSaveId) {\n      try {\n        const value = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);\n        if (value) {\n          defaultSizes = JSON.parse(value);\n        }\n      } catch (error) {}\n    }\n\n    if (sizes.length === 0 && defaultSizes != null && defaultSizes.length === panels.length) {\n      setSizes(defaultSizes);\n    } else {\n      const totalWeight = panels.reduce((weight, panel) => {\n        return weight + panel.defaultSize;\n      }, 0);\n\n      setSizes(panels.map(panel => panel.defaultSize / totalWeight));\n    }\n  }, [autoSaveId]);\n\n  useEffect(() => {\n    if (autoSaveId && sizes.length > 0) {\n      // If this panel has been configured to persist sizing information, save sizes to local storage.\n      localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(sizes));\n    }\n  }, [autoSaveId, sizes]);\n\n  const getPanelStyle = useCallback(\n    (id: PanelId): CSSProperties => {\n      const panels = panelsRef.current;\n\n      const offset = getOffset(panels, id, direction, sizes, height, width);\n      const size = getSize(panels, id, direction, sizes, height, width);\n\n      if (direction === \"horizontal\") {\n        return {\n          height: \"100%\",\n          position: \"absolute\",\n          left: offset,\n          top: 0,\n          width: size,\n        };\n      } else {\n        return {\n          height: size,\n          position: \"absolute\",\n          left: 0,\n          top: offset,\n          width: \"100%\",\n        };\n      }\n    },\n    [direction, height, sizes, width]\n  );\n\n  const registerPanel = useCallback((id: PanelId, panel: Panel) => {\n    const panels = panelsRef.current;\n    const index = panels.findIndex(panel => panel.id === id);\n    if (index >= 0) {\n      panels.splice(index, 1);\n    }\n    panels.push(panel);\n  }, []);\n\n  const registerResizeHandle = useCallback((idBefore: PanelId, idAfter: PanelId) => {\n    return (event: MouseEvent) => {\n      event.preventDefault();\n\n      const panels = panelsRef.current;\n      const { direction, height, sizes: prevSizes, width } = committedValuesRef.current;\n\n      const isHorizontal = direction === \"horizontal\";\n      const movement = isHorizontal ? event.movementX : event.movementY;\n      const delta = isHorizontal ? movement / width : movement / height;\n\n      const nextSizes = adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);\n      if (prevSizes !== nextSizes) {\n        setSizes(nextSizes);\n      }\n    };\n  }, []);\n\n  const context = useMemo(\n    () => ({\n      direction,\n      getPanelStyle,\n      registerPanel,\n      registerResizeHandle,\n    }),\n    [direction, getPanelStyle, registerPanel, registerResizeHandle]\n  );\n\n  return (\n    <PanelGroupContext.Provider value={context}>\n      <div className={className}>\n        {children}\n      </div>\n    </PanelGroupContext.Provider>\n  );\n}\n\nfunction adjustByDelta(\n  panels: Panel[],\n  idBefore: PanelId,\n  idAfter: PanelId,\n  delta: number,\n  prevSizes: number[]\n): number[] {\n  if (delta === 0) {\n    return prevSizes;\n  }\n\n  const nextSizes = prevSizes.concat();\n\n  let deltaApplied = 0;\n\n  // A resizing panel affects the panels before or after it.\n  //\n  // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n  // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n  //\n  // A positive delta means the panel immediately before the resizer should \"expand\".\n  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n  let pivotId = delta < 0 ? idBefore : idAfter;\n  let index = panels.findIndex(panel => panel.id === pivotId);\n  while (true) {\n    const panel = panels[index];\n    const prevSize = prevSizes[index];\n    const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n    if (prevSize !== nextSize) {\n      deltaApplied += prevSize - nextSize;\n\n      nextSizes[index] = nextSize;\n\n      if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n        break;\n      }\n    }\n\n    if (delta < 0) {\n      if (--index < 0) {\n        break;\n      }\n    } else {\n      if (++index >= panels.length) {\n        break;\n      }\n    }\n  }\n\n  // If we were unable to resize any of the panels panels, return the previous state.\n  // This will essentially bailout and ignore the \"mousemove\" event.\n  if (deltaApplied === 0) {\n    return prevSizes;\n  }\n\n  // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n  pivotId = delta < 0 ? idAfter : idBefore;\n  index = panels.findIndex(panel => panel.id === pivotId);\n  nextSizes[index] = prevSizes[index] + deltaApplied;\n\n  return nextSizes;\n}\n\nfunction getOffset(\n  panels: Panel[],\n  id: PanelId,\n  direction: Direction,\n  sizes: number[],\n  height: number,\n  width: number\n): number {\n  let index = panels.findIndex(panel => panel.id === id);\n  if (index < 0) {\n    return 0;\n  }\n\n  let scaledOffset = 0;\n\n  for (index = index - 1; index >= 0; index--) {\n    const panel = panels[index];\n    scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n  }\n\n  return Math.round(scaledOffset);\n}\n\nfunction getSize(\n  panels: Panel[],\n  id: PanelId,\n  direction: Direction,\n  sizes: number[],\n  height: number,\n  width: number\n): number {\n  const index = panels.findIndex(panel => panel.id === id);\n  const size = sizes[index];\n  if (size == null) {\n    return 0;\n  }\n\n  const totalSize = direction === \"horizontal\" ? width : height;\n\n  if (panels.length === 1) {\n    return totalSize;\n  } else {\n    return Math.round(size * totalSize);\n  }\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { PanelId, ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n  children = null,\n  className = \"\",\n  disabled = false,\n  panelAfter,\n  panelBefore,\n}: {\n  children?: ReactNode;\n  className?: string;\n  disabled?: boolean;\n  panelAfter: PanelId;\n  panelBefore: PanelId;\n}) {\n  const context = useContext(PanelGroupContext);\n  if (context === null) {\n    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);\n  }\n\n  const { direction, registerResizeHandle } = context;\n\n  const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    if (disabled) {\n      setResizeHandler(null);\n    } else {\n      setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n    }\n  }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n  useEffect(() => {\n    if (disabled || resizeHandler == null || !isDragging) {\n      return;\n    }\n\n    document.body.style.cursor = direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n    const onMouseLeave = (_: MouseEvent) => {\n      setIsDragging(false);\n    };\n\n    const onMouseMove = (event: MouseEvent) => {\n      resizeHandler(event);\n    };\n\n    const onMouseUp = (_: MouseEvent) => {\n      setIsDragging(false);\n    };\n\n    document.body.addEventListener(\"mouseleave\", onMouseLeave);\n    document.body.addEventListener(\"mousemove\", onMouseMove);\n    document.body.addEventListener(\"mouseup\", onMouseUp);\n\n    return () => {\n      document.body.style.cursor = \"\";\n\n      document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n      document.body.removeEventListener(\"mousemove\", onMouseMove);\n      document.body.removeEventListener(\"mouseup\", onMouseUp);\n    };\n  }, [direction, disabled, isDragging, resizeHandler]);\n\n  return (\n    <div\n      className={className}\n      onMouseDown={() => setIsDragging(true)}\n      onMouseUp={() => setIsDragging(false)}\n      style={{\n        cursor: direction === 'horizontal' ? 'ew-resize' : 'ns-resize'\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.module.js.map"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "react-resizable-panels",
+  "version": "0.0.1",
+  "description": "React components for resizable panel groups/layouts",
+  "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bvaughn/react-resizable-panels.git"
+  },
+  "source": "src/index.ts",
+  "main": "dist/react-resizable-panels.js",
+  "module": "dist/react-resizable-panels.module.js",
+  "types": "dist/react-resizable-panels.d.ts",
+  "scripts": {
+    "dev": "parcel 'website/index.html'",
+    "watch": "parcel watch",
+    "build": "parcel build"
+  },
+  "devDependencies": {
+    "@parcel/packager-ts": "2.8.2",
+    "@parcel/transformer-typescript-types": "2.8.2",
+    "parcel": "latest",
+    "process": "^0.11.10",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-virtualized-auto-sizer": "latest",
+    "typescript": ">=3.0.0"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+  }
+}

package/src/Panel.tsx

@@ -0,0 +1,46 @@
+import { ReactNode, useContext, useLayoutEffect } from "react";
+
+import { PanelGroupContext } from "./PanelContexts";
+import { PanelId } from "./types";
+
+// TODO [panels]
+// Support min pixel size too.
+// PanelGroup should warn if total width is less min pixel widths.
+export default function Panel({
+  children,
+  className = "",
+  defaultSize = 0.1,
+  id,
+  minSize = 0.1,
+}: {
+  children: ReactNode;
+  className?: string;
+  defaultSize?: number;
+  id: PanelId;
+  minSize?: number;
+}) {
+  const context = useContext(PanelGroupContext);
+  if (context === null) {
+    throw Error(`Panel components must be rendered within a PanelGroup container`);
+  }
+
+  const { getPanelStyle, registerPanel } = context;
+
+  useLayoutEffect(() => {
+    const panel = {
+      defaultSize,
+      id,
+      minSize,
+    };
+
+    registerPanel(id, panel);
+  }, [defaultSize, minSize, registerPanel, id]);
+
+  const style = getPanelStyle(id);
+
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  );
+}

package/src/PanelContexts.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, createContext } from "react";
+
+import { Panel, PanelId, ResizeHandler } from "./types";
+
+export const PanelGroupContext = createContext<{
+  direction: "horizontal" | "vertical";
+  getPanelStyle: (id: PanelId) => CSSProperties;
+  registerResizeHandle: (idBefore: PanelId, idAfter: PanelId) => ResizeHandler;
+  registerPanel: (id: PanelId, panel: Panel) => void;
+} | null>(null);

package/src/PanelGroup.tsx

@@ -0,0 +1,276 @@
+import {
+  CSSProperties,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { PanelGroupContext } from "./PanelContexts";
+import { Direction, Panel, PanelId } from "./types";
+
+type Props = {
+  autoSaveId?: string;
+  children: ReactNode[];
+  className?: string;
+  direction: Direction;
+  height: number;
+  width: number;
+};
+
+const PRECISION = 5;
+
+// TODO [panels]
+// Within an active drag, remember original positions to refine more easily on expand.
+// Look at what the Chrome devtools Sources does.
+
+export default function PanelGroup({ autoSaveId, children, className = "", direction, height, width }: Props) {
+  const panelsRef = useRef<Panel[]>([]);
+
+  // 0-1 values representing the relative size of each panel.
+  const [sizes, setSizes] = useState<number[]>([]);
+
+  // Store committed values to avoid unnecessarily re-running memoization/effects functions.
+  const committedValuesRef = useRef<{
+    direction: Direction;
+    height: number;
+    sizes: number[];
+    width: number;
+  }>({
+    direction,
+    height,
+    sizes,
+    width,
+  });
+  useLayoutEffect(() => {
+    committedValuesRef.current.direction = direction;
+    committedValuesRef.current.height = height;
+    committedValuesRef.current.sizes = sizes;
+    committedValuesRef.current.width = width;
+  });
+
+  // Once all panels have registered themselves,
+  // Compute the initial sizes based on default weights.
+  // This assumes that panels register during initial mount (no conditional rendering)!
+  useLayoutEffect(() => {
+    const panels = panelsRef.current;
+    const sizes = committedValuesRef.current.sizes;
+    if (sizes.length === panels.length) {
+      return;
+    }
+
+    // If this panel has been configured to persist sizing information,
+    // default size should be restored from local storage if possible.
+    let defaultSizes: number[] | undefined = undefined;
+    if (autoSaveId) {
+      try {
+        const value = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        if (value) {
+          defaultSizes = JSON.parse(value);
+        }
+      } catch (error) {}
+    }
+
+    if (sizes.length === 0 && defaultSizes != null && defaultSizes.length === panels.length) {
+      setSizes(defaultSizes);
+    } else {
+      const totalWeight = panels.reduce((weight, panel) => {
+        return weight + panel.defaultSize;
+      }, 0);
+
+      setSizes(panels.map(panel => panel.defaultSize / totalWeight));
+    }
+  }, [autoSaveId]);
+
+  useEffect(() => {
+    if (autoSaveId && sizes.length > 0) {
+      // If this panel has been configured to persist sizing information, save sizes to local storage.
+      localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(sizes));
+    }
+  }, [autoSaveId, sizes]);
+
+  const getPanelStyle = useCallback(
+    (id: PanelId): CSSProperties => {
+      const panels = panelsRef.current;
+
+      const offset = getOffset(panels, id, direction, sizes, height, width);
+      const size = getSize(panels, id, direction, sizes, height, width);
+
+      if (direction === "horizontal") {
+        return {
+          height: "100%",
+          position: "absolute",
+          left: offset,
+          top: 0,
+          width: size,
+        };
+      } else {
+        return {
+          height: size,
+          position: "absolute",
+          left: 0,
+          top: offset,
+          width: "100%",
+        };
+      }
+    },
+    [direction, height, sizes, width]
+  );
+
+  const registerPanel = useCallback((id: PanelId, panel: Panel) => {
+    const panels = panelsRef.current;
+    const index = panels.findIndex(panel => panel.id === id);
+    if (index >= 0) {
+      panels.splice(index, 1);
+    }
+    panels.push(panel);
+  }, []);
+
+  const registerResizeHandle = useCallback((idBefore: PanelId, idAfter: PanelId) => {
+    return (event: MouseEvent) => {
+      event.preventDefault();
+
+      const panels = panelsRef.current;
+      const { direction, height, sizes: prevSizes, width } = committedValuesRef.current;
+
+      const isHorizontal = direction === "horizontal";
+      const movement = isHorizontal ? event.movementX : event.movementY;
+      const delta = isHorizontal ? movement / width : movement / height;
+
+      const nextSizes = adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
+      if (prevSizes !== nextSizes) {
+        setSizes(nextSizes);
+      }
+    };
+  }, []);
+
+  const context = useMemo(
+    () => ({
+      direction,
+      getPanelStyle,
+      registerPanel,
+      registerResizeHandle,
+    }),
+    [direction, getPanelStyle, registerPanel, registerResizeHandle]
+  );
+
+  return (
+    <PanelGroupContext.Provider value={context}>
+      <div className={className}>
+        {children}
+      </div>
+    </PanelGroupContext.Provider>
+  );
+}
+
+function adjustByDelta(
+  panels: Panel[],
+  idBefore: PanelId,
+  idAfter: PanelId,
+  delta: number,
+  prevSizes: number[]
+): number[] {
+  if (delta === 0) {
+    return prevSizes;
+  }
+
+  const nextSizes = prevSizes.concat();
+
+  let deltaApplied = 0;
+
+  // A resizing panel affects the panels before or after it.
+  //
+  // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
+  // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+  //
+  // A positive delta means the panel immediately before the resizer should "expand".
+  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
+  let pivotId = delta < 0 ? idBefore : idAfter;
+  let index = panels.findIndex(panel => panel.id === pivotId);
+  while (true) {
+    const panel = panels[index];
+    const prevSize = prevSizes[index];
+    const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
+    if (prevSize !== nextSize) {
+      deltaApplied += prevSize - nextSize;
+
+      nextSizes[index] = nextSize;
+
+      if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {
+        break;
+      }
+    }
+
+    if (delta < 0) {
+      if (--index < 0) {
+        break;
+      }
+    } else {
+      if (++index >= panels.length) {
+        break;
+      }
+    }
+  }
+
+  // If we were unable to resize any of the panels panels, return the previous state.
+  // This will essentially bailout and ignore the "mousemove" event.
+  if (deltaApplied === 0) {
+    return prevSizes;
+  }
+
+  // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+  pivotId = delta < 0 ? idAfter : idBefore;
+  index = panels.findIndex(panel => panel.id === pivotId);
+  nextSizes[index] = prevSizes[index] + deltaApplied;
+
+  return nextSizes;
+}
+
+function getOffset(
+  panels: Panel[],
+  id: PanelId,
+  direction: Direction,
+  sizes: number[],
+  height: number,
+  width: number
+): number {
+  let index = panels.findIndex(panel => panel.id === id);
+  if (index < 0) {
+    return 0;
+  }
+
+  let scaledOffset = 0;
+
+  for (index = index - 1; index >= 0; index--) {
+    const panel = panels[index];
+    scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);
+  }
+
+  return Math.round(scaledOffset);
+}
+
+function getSize(
+  panels: Panel[],
+  id: PanelId,
+  direction: Direction,
+  sizes: number[],
+  height: number,
+  width: number
+): number {
+  const index = panels.findIndex(panel => panel.id === id);
+  const size = sizes[index];
+  if (size == null) {
+    return 0;
+  }
+
+  const totalSize = direction === "horizontal" ? width : height;
+
+  if (panels.length === 1) {
+    return totalSize;
+  } else {
+    return Math.round(size * totalSize);
+  }
+}