@principal-ai/subsystems-react 0.56.1 → 0.56.3

package/src/subsystem/FileDrawer.test.tsx

@@ -0,0 +1,233 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import type { ComponentProps } from 'react';
+import { Window } from 'happy-dom';
+import { cleanup, fireEvent, render } from '@testing-library/react/pure';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { FileDrawer } from './FileDrawer';
+
+const dom = new Window();
+const globals = globalThis as unknown as Record<string, unknown>;
+globals.window = dom;
+globals.document = dom.document;
+globals.navigator = dom.navigator;
+globals.HTMLElement = dom.HTMLElement;
+globals.Node = dom.Node;
+globals.Element = dom.Element;
+globals.Event = dom.Event;
+globals.MouseEvent = dom.MouseEvent;
+globals.KeyboardEvent = dom.KeyboardEvent;
+globals.localStorage = dom.localStorage;
+globals.sessionStorage = dom.sessionStorage;
+globals.matchMedia = dom.matchMedia.bind(dom);
+globals.requestAnimationFrame = dom.requestAnimationFrame.bind(dom);
+globals.cancelAnimationFrame = dom.cancelAnimationFrame.bind(dom);
+
+afterEach(cleanup);
+
+function drawer(props: Partial<ComponentProps<typeof FileDrawer>> = {}) {
+  return (
+    <ThemeProvider theme={defaultEditorTheme}>
+      <FileDrawer title="Trail code" onClose={() => {}} {...props}>
+        <input aria-label="Code state" defaultValue="selected step" />
+      </FileDrawer>
+    </ThemeProvider>
+  );
+}
+
+function parts(container: HTMLElement) {
+  return {
+    spacer: container.children[0] as HTMLElement,
+    panel: container.children[1] as HTMLElement,
+  };
+}
+
+function setDrawerGeometry(container: HTMLElement, width = 450, containerWidth = 1000) {
+  parts(container).panel.getBoundingClientRect = () => ({ width } as DOMRect);
+  container.getBoundingClientRect = () => ({ width: containerWidth } as DOMRect);
+}
+
+describe('FileDrawer docking', () => {
+  test('keeps the default bottom drawer and reserves height', () => {
+    const { container } = render(drawer());
+    const { spacer, panel } = parts(container);
+    expect(spacer.style.height).toBe('45%');
+    expect(spacer.style.width).toBe('');
+    expect(panel.style.height).toBe('45%');
+    expect(panel.style.left).toBe('0px');
+    expect(panel.style.right).toBe('0px');
+    expect(panel.style.top).toBe('');
+    expect(panel.style.borderTopStyle).toBe('solid');
+  });
+
+  test('docks on the left and reserves width before the canvas', () => {
+    const { container } = render(drawer({ placement: 'left' }));
+    const { spacer, panel } = parts(container);
+    expect(spacer.style.width).toBe('45%');
+    expect(spacer.style.height).toBe('');
+    expect(spacer.style.order).toBe('-1');
+    expect(panel.style.width).toBe('45%');
+    expect(panel.style.height).toBe('100%');
+    expect(panel.style.left).toBe('0px');
+    expect(panel.style.right).toBe('');
+    expect(panel.style.top).toBe('0px');
+    expect(panel.style.borderRightStyle).toBe('solid');
+    expect(panel.style.borderTopStyle).toBe('none');
+  });
+
+  test('preserves mounted content when switching dock axes', () => {
+    const { container, getByLabelText, rerender } = render(drawer());
+    const input = getByLabelText('Code state') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'step 3' } });
+    rerender(drawer({ placement: 'left' }));
+    expect(getByLabelText('Code state')).toBe(input);
+    expect(input.value).toBe('step 3');
+    expect(parts(container).spacer.style.height).toBe('');
+    rerender(drawer());
+    expect(getByLabelText('Code state')).toBe(input);
+    expect(parts(container).spacer.style.width).toBe('');
+    expect(parts(container).panel.style.width).toBe('');
+  });
+
+  test('maximizes and restores along the left dock axis', () => {
+    const { container, getByLabelText } = render(drawer({ placement: 'left' }));
+    fireEvent.click(getByLabelText('Maximize code view'));
+    expect(parts(container).panel.style.width).toBe('100%');
+    expect(parts(container).spacer.style.width).toBe('0px');
+    fireEvent.click(getByLabelText('Minimize code view'));
+    expect(parts(container).panel.style.width).toBe('45%');
+    expect(parts(container).spacer.style.width).toBe('45%');
+  });
+
+  test('fills the graph area for full-file reading', () => {
+    const { container } = render(drawer({ placement: 'left', fillHeight: true }));
+    expect(parts(container).panel.style.width).toBe('100%');
+    expect(parts(container).spacer.style.width).toBe('0px');
+  });
+
+  test('closed and hidden left drawers reserve no width', () => {
+    const { container, rerender } = render(drawer({ placement: 'left', title: null }));
+    expect(parts(container).panel.style.width).toBe('0px');
+    expect(parts(container).spacer.style.width).toBe('0px');
+    rerender(drawer({ placement: 'left', hidden: true }));
+    expect(parts(container).panel.style.width).toBe('0px');
+    expect(parts(container).spacer.style.width).toBe('0px');
+  });
+
+  test('closing resets maximize state before reopening', () => {
+    const { container, getByLabelText, rerender } = render(drawer({ placement: 'left' }));
+    fireEvent.click(getByLabelText('Maximize code view'));
+    rerender(drawer({ placement: 'left', title: null }));
+    rerender(drawer({ placement: 'left' }));
+    expect(parts(container).panel.style.width).toBe('45%');
+    expect(getByLabelText('Maximize code view')).not.toBeNull();
+  });
+
+  test('Escape closes a left drawer unless a full-file overlay handles it', () => {
+    let closes = 0;
+    const onClose = () => { closes++; };
+    const { rerender } = render(drawer({ placement: 'left', onClose }));
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closes).toBe(1);
+    rerender(drawer({ placement: 'left', onClose, suppressEscape: true }));
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closes).toBe(1);
+  });
+
+  test('width dragging tracks the initial width and resizes the canvas spacer together', () => {
+    let ended = 0;
+    const { container, getByLabelText } = render(drawer({
+      placement: 'left',
+      onResizeEnd: () => { ended++; },
+    }));
+    setDrawerGeometry(container);
+    const input = getByLabelText('Code state');
+    fireEvent.mouseDown(getByLabelText('Resize code view'), { clientX: 450 });
+    expect(document.body.style.userSelect).toBe('none');
+    expect(parts(container).panel.style.transition).toBe('none');
+    fireEvent.mouseMove(document, { clientX: 500 });
+    expect(parts(container).panel.style.width).toBe('50%');
+    expect(parts(container).spacer.style.width).toBe('50%');
+    fireEvent.mouseMove(document, { clientX: 520 });
+    expect(parts(container).panel.style.width).toBe('52%');
+    fireEvent.mouseMove(document, { clientX: 460 });
+    expect(parts(container).panel.style.width).toBe('46%');
+    expect(getByLabelText('Code state')).toBe(input);
+    fireEvent.mouseUp(document);
+    expect(ended).toBe(1);
+    expect(document.body.style.userSelect).toBe('');
+    expect(document.body.style.cursor).toBe('');
+    fireEvent.mouseMove(document, { clientX: 600 });
+    expect(parts(container).panel.style.width).toBe('46%');
+  });
+
+  test('width dragging keeps space for both code and graph at either limit', () => {
+    const { container, getByLabelText } = render(drawer({ placement: 'left' }));
+    setDrawerGeometry(container);
+    fireEvent.mouseDown(getByLabelText('Resize code view'), { clientX: 450 });
+    fireEvent.mouseMove(document, { clientX: 1000 });
+    expect(parts(container).panel.style.width).toBe('76%');
+    fireEvent.mouseMove(document, { clientX: 0 });
+    expect(parts(container).panel.style.width).toBe('24%');
+    fireEvent.mouseMove(document, { clientX: 500 });
+    expect(parts(container).panel.style.width).toBe('50%');
+    fireEvent.mouseUp(document);
+  });
+
+  test('narrow containers do not produce inverted width limits', () => {
+    const { container, getByLabelText } = render(drawer({ placement: 'left' }));
+    setDrawerGeometry(container, 180, 400);
+    fireEvent.mouseDown(getByLabelText('Resize code view'), { clientX: 180 });
+    fireEvent.mouseMove(document, { clientX: 350 });
+    expect(parts(container).panel.style.width).toBe('50%');
+    fireEvent.mouseUp(document);
+  });
+
+  test('remembers dragged width across maximize, closing, and layout changes', () => {
+    const { container, getByLabelText, queryByLabelText, rerender } = render(drawer({ placement: 'left' }));
+    setDrawerGeometry(container);
+    fireEvent.mouseDown(getByLabelText('Resize code view'), { clientX: 450 });
+    fireEvent.mouseMove(document, { clientX: 500 });
+    fireEvent.mouseUp(document);
+    fireEvent.click(getByLabelText('Maximize code view'));
+    expect(parts(container).panel.style.width).toBe('100%');
+    expect(queryByLabelText('Resize code view')).toBeNull();
+    fireEvent.click(getByLabelText('Minimize code view'));
+    expect(parts(container).panel.style.width).toBe('50%');
+    rerender(drawer({ placement: 'left', title: null }));
+    rerender(drawer({ placement: 'left' }));
+    expect(parts(container).panel.style.width).toBe('50%');
+    rerender(drawer());
+    expect(parts(container).panel.style.height).toBe('45%');
+    expect(queryByLabelText('Resize code view')).toBeNull();
+    rerender(drawer({ placement: 'left' }));
+    expect(parts(container).panel.style.width).toBe('50%');
+  });
+
+  test('closing mid-drag removes listeners and restores document styles', () => {
+    const { container, getByLabelText, rerender } = render(drawer({ placement: 'left' }));
+    setDrawerGeometry(container);
+    fireEvent.mouseDown(getByLabelText('Resize code view'), { clientX: 450 });
+    rerender(drawer({ placement: 'left', title: null }));
+    expect(document.body.style.userSelect).toBe('');
+    fireEvent.mouseMove(document, { clientX: 700 });
+    rerender(drawer({ placement: 'left' }));
+    expect(parts(container).panel.style.width).toBe('45%');
+  });
+
+  test('losing window focus finishes the drag and restores existing styles', () => {
+    document.body.style.userSelect = 'text';
+    document.body.style.cursor = 'crosshair';
+    const { container, getByLabelText, unmount } = render(drawer({ placement: 'left' }));
+    setDrawerGeometry(container);
+    fireEvent.mouseDown(getByLabelText('Resize code view'), { clientX: 450 });
+    fireEvent(window, new dom.Event('blur') as unknown as Event);
+    expect(document.body.style.userSelect).toBe('text');
+    expect(document.body.style.cursor).toBe('crosshair');
+    fireEvent.mouseDown(getByLabelText('Resize code view'), { clientX: 450 });
+    unmount();
+    expect(document.body.style.userSelect).toBe('text');
+    expect(document.body.style.cursor).toBe('crosshair');
+    document.body.style.userSelect = '';
+    document.body.style.cursor = '';
+  });
+});

package/src/subsystem/FileDrawer.tsx

@@ -1,27 +1,25 @@
 /**
- * FileDrawer — bottom panel that slides up from the bottom of the graph area
- * to show file / trail code. Opened by sidebar file-tree clicks,
+ * FileDrawer — bottom or left panel in the graph area
+ * showing file / trail code. Opened by sidebar file-tree clicks,
  * declaration links, and trail step focus; content is injected as
  * children by the graph component.
  */
 
-import { useEffect, useState } from "react";
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
 import { useTheme } from "@principal-ade/industry-theme";
 import { Minimize2, Maximize2, X } from "lucide-react";
 
-/** Matches `transition: height …` below — callers that fitView after open
- *  should wait at least this long so the canvas has its reduced height. */
+/** Matches the drawer's size transition; wait this long before fitting the canvas. */
 export const FILE_DRAWER_HEIGHT_MS = 200;
 
-/** Bottom panel that slides up from the bottom of the graph area.
- *  Bottom-anchored with an animated height; an in-flow spacer reserves its
- *  footprint so the canvas shrinks while open (nothing covered). Stays mounted
- *  so open/close/maximize animate. The header's maximize button (or a
- *  double-click) grows it over the whole graph column for whole-file reading. */
+/** An in-flow spacer reserves the panel's footprint so it never covers the
+ *  canvas. Stays mounted across open/close, maximize, and docking changes. */
 export function FileDrawer({
   title,
   onClose,
+  placement = "bottom",
+  onResizeEnd,
   fillHeight = false,
   suppressEscape = false,
   hidden = false,
@@ -32,7 +30,11 @@ export function FileDrawer({
   /** Drawer chrome title; `null` closes the drawer. */
   title: string | null;
   onClose: () => void;
-  /** When true and open, fill the graph column instead of ~45% height. */
+  /** Left docking requires a row container; bottom docking requires a column. */
+  placement?: "bottom" | "left";
+  /** Fired when the user finishes dragging the side-docked code view's width. */
+  onResizeEnd?: () => void;
+  /** When true and open, fill the graph area instead of ~45% of its dock axis. */
   fillHeight?: boolean;
   /** Skip Escape handling (e.g. while a full-file overlay is on top). */
   suppressEscape?: boolean;
@@ -54,18 +56,72 @@ export function FileDrawer({
   const showProgress = progress != null && progress.total > 1;
   const [closeHover, setCloseHover] = useState(false);
   const [maxHover, setMaxHover] = useState(false);
-  // Full-height mode: the maximize button or double-clicking the header.
-  // The panel is always bottom-anchored with an animated height, and a spacer
-  // in normal flow reserves its footprint, so maximizing grows it upward over
-  // the still-mounted graph instead of snapping to full.
+  // Maximize grows over the still-mounted graph along the current dock axis.
   const [maximized, setMaximized] = useState(false);
-  // A closed drawer reopens at the default height, not maximized.
+  // A closed drawer reopens at the default size, not maximized.
   useEffect(() => {
     if (!open) setMaximized(false);
   }, [open]);
-  const fullHeight = open && (maximized || fillHeight);
+  const fullSize = open && (maximized || fillHeight);
+  const sideDocked = placement === "left";
+  const sizeAxis = sideDocked ? "width" : "height";
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [widthPercent, setWidthPercent] = useState(45);
+  const [resizing, setResizing] = useState(false);
+  const dragStart = useRef({ x: 0, width: 0, containerWidth: 0 });
+  const canResize = open && sideDocked && !fullSize;
+  const dockSize = sideDocked ? `${widthPercent}%` : "45%";
   // Space the panel takes out of the canvas's flow (0 when it overlays fully).
-  const reservedHeight = fullHeight ? 0 : open ? "45%" : 0;
+  const reservedSize = fullSize ? 0 : open ? dockSize : 0;
+  const sizeTransition = resizing ? "none" : `${sizeAxis} ${FILE_DRAWER_HEIGHT_MS}ms ease`;
+
+  const onResizeStart = (event: ReactMouseEvent) => {
+    if (!canResize || event.button !== 0) return;
+    const panel = panelRef.current;
+    const containerWidth = panel?.parentElement?.getBoundingClientRect().width ?? 0;
+    if (panel == null || containerWidth <= 0) return;
+    event.preventDefault();
+    dragStart.current = {
+      x: event.clientX,
+      width: panel.getBoundingClientRect().width,
+      containerWidth,
+    };
+    setResizing(true);
+  };
+
+  useEffect(() => {
+    if (!canResize) setResizing(false);
+  }, [canResize]);
+
+  useEffect(() => {
+    if (!resizing || !canResize) return;
+    const { x, width, containerWidth } = dragStart.current;
+    // Keep 240px for both code and graph when space permits; split narrow
+    // containers evenly rather than giving either pane a negative width.
+    const minWidth = Math.min(240, containerWidth / 2);
+    const maxWidth = containerWidth - minWidth;
+    const onMove = (event: MouseEvent) => {
+      const next = Math.min(Math.max(width + event.clientX - x, minWidth), maxWidth);
+      setWidthPercent(next / containerWidth * 100);
+    };
+    const onUp = () => {
+      setResizing(false);
+      onResizeEnd?.();
+    };
+    const { userSelect, cursor } = document.body.style;
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    window.addEventListener("blur", onUp);
+    return () => {
+      document.body.style.userSelect = userSelect;
+      document.body.style.cursor = cursor;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      window.removeEventListener("blur", onUp);
+    };
+  }, [resizing, canResize, onResizeEnd]);
 
   useEffect(() => {
     if (!open || suppressEscape) return;
@@ -78,36 +134,39 @@ export function FileDrawer({
 
   return (
     <>
-      {/* Reserves the drawer's footprint in the column so the canvas shrinks
-          while the drawer is open. Animates with the panel, so the boundary
-          between graph and code slides smoothly. */}
+      {/* Reserve the same size along the parent's matching flex axis. */}
       <div
         aria-hidden="true"
         style={{
           flexShrink: 0,
-          height: reservedHeight,
-          transition: `height ${FILE_DRAWER_HEIGHT_MS}ms ease`,
+          order: sideDocked ? -1 : undefined,
+          [sizeAxis]: reservedSize,
+          transition: sizeTransition,
         }}
       />
-      {/* The panel — bottom-anchored and grown via `height`, so maximize/fill
-          reads as dragging up over the diagram. */}
       <div
+        ref={panelRef}
         style={{
           position: "absolute",
           left: 0,
-          right: 0,
+          top: sideDocked ? 0 : undefined,
+          right: sideDocked ? undefined : 0,
           bottom: 0,
           // Above the edge-label overlay (zIndex 5), React Flow, and overlays
           // (zIndex 6–8); 30 lifts it over the whole graph area when maximized.
           zIndex: maximized ? 30 : 6,
-          height: open ? (fullHeight ? "100%" : "45%") : 0,
+          width: sideDocked ? (open ? (fullSize ? "100%" : dockSize) : 0) : undefined,
+          height: sideDocked ? "100%" : open ? (fullSize ? "100%" : "45%") : 0,
+          minWidth: 0,
           minHeight: 0,
+          boxSizing: "border-box",
           overflow: "hidden",
           display: "flex",
           flexDirection: "column",
           background: theme.colors.background,
-          borderTop: open ? `1px solid ${theme.colors.border}` : "none",
-          transition: `height ${FILE_DRAWER_HEIGHT_MS}ms ease`,
+          borderTop: open && !sideDocked ? `1px solid ${theme.colors.border}` : "none",
+          borderRight: open && sideDocked ? `1px solid ${theme.colors.border}` : "none",
+          transition: sizeTransition,
         }}
       >
         <div
@@ -232,6 +291,25 @@ export function FileDrawer({
         <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
           {children}
         </div>
+        {canResize && (
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize code view"
+            title="Drag to resize code view"
+            onMouseDown={onResizeStart}
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              width: 5,
+              cursor: "col-resize",
+              background: theme.colors.border,
+              zIndex: 2,
+            }}
+          />
+        )}
       </div>
     </>
   );

package/src/subsystem/GraphSidebar.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, test } from 'bun:test';
-import { createElement } from 'react';
+import { createElement, useState } from 'react';
 import { Window } from 'happy-dom';
 import { cleanup, fireEvent, render } from '@testing-library/react/pure';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
@@ -125,6 +125,59 @@ describe('GraphSidebar chrome', () => {
     expect(sidebarColumn(container).style.width).toBe('400px');
   });
 
+  test('multiple moves track displacement from drag start without accumulating', () => {
+    const { container, getByLabelText } = renderSidebar({});
+    const handle = getByLabelText('Resize sidebar');
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 120 });
+    expect(sidebarColumn(container).style.width).toBe('340px');
+    fireEvent.mouseMove(document, { clientX: 140 });
+    expect(sidebarColumn(container).style.width).toBe('360px');
+    fireEvent.mouseMove(document, { clientX: 110 });
+    expect(sidebarColumn(container).style.width).toBe('330px');
+    fireEvent.mouseUp(document);
+
+    // Each new gesture starts from the width the previous gesture left.
+    fireEvent.mouseDown(handle, { clientX: 110 });
+    fireEvent.mouseMove(document, { clientX: 130 });
+    fireEvent.mouseUp(document);
+    expect(sidebarColumn(container).style.width).toBe('350px');
+  });
+
+  test('clamps at both limits and follows the pointer back from them', () => {
+    const { container, getByLabelText } = renderSidebar({});
+    fireEvent.mouseDown(getByLabelText('Resize sidebar'), { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 500 });
+    expect(sidebarColumn(container).style.width).toBe('600px');
+    fireEvent.mouseMove(document, { clientX: 150 });
+    expect(sidebarColumn(container).style.width).toBe('370px');
+    fireEvent.mouseMove(document, { clientX: -100 });
+    expect(sidebarColumn(container).style.width).toBe('240px');
+    fireEvent.mouseMove(document, { clientX: 100 });
+    expect(sidebarColumn(container).style.width).toBe('320px');
+    fireEvent.mouseUp(document);
+  });
+
+  test('controlled host updates do not change the drag baseline', () => {
+    function ControlledSidebar() {
+      const [width, setWidth] = useState(400);
+      return createElement(
+        ThemeProvider,
+        { theme: defaultEditorTheme },
+        createElement(GraphSidebar, { width, onWidthChange: setWidth }),
+      );
+    }
+    const { container, getByLabelText } = render(createElement(ControlledSidebar));
+    fireEvent.mouseDown(getByLabelText('Resize sidebar'), { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 140 });
+    expect(sidebarColumn(container).style.width).toBe('440px');
+    fireEvent.mouseMove(document, { clientX: 160 });
+    expect(sidebarColumn(container).style.width).toBe('460px');
+    fireEvent.mouseMove(document, { clientX: 100 });
+    expect(sidebarColumn(container).style.width).toBe('400px');
+    fireEvent.mouseUp(document);
+  });
+
   test('a drag ends by persisting the width under persistKey', () => {
     const { getByLabelText } = renderSidebar({
       persistKey: 'gs-test',
@@ -132,6 +185,8 @@ describe('GraphSidebar chrome', () => {
     });
     const handle = getByLabelText('Resize sidebar');
     fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 140 });
+    fireEvent.mouseMove(document, { clientX: 180 });
     fireEvent.mouseMove(document, { clientX: 200 });
     fireEvent.mouseUp(document);
     expect(window.localStorage.getItem('principal.subsystems.sidebarWidth.gs-test')).toBe('420');

package/src/subsystem/GraphSidebar.tsx

@@ -130,6 +130,7 @@ export function GraphSidebar({
   // persisting only then — not on every mousemove.
   const [dragging, setDragging] = useState(false);
   const dragStartX = useRef(0);
+  const dragStartWidth = useRef(0);
   // Mirror of the current width for the mouseup handler (a closure over the
   // drag-start render would persist the stale start width).
   const currentWidthRef = useRef(effectiveWidth);
@@ -139,6 +140,7 @@ export function GraphSidebar({
     (e: ReactMouseEvent) => {
       e.preventDefault();
       dragStartX.current = e.clientX;
+      dragStartWidth.current = effectiveWidth;
       currentWidthRef.current = effectiveWidth;
       setDragging(true);
       onDraggingChange?.(true);
@@ -150,7 +152,7 @@ export function GraphSidebar({
     if (!dragging) return;
     const onMove = (e: MouseEvent) => {
       const next = Math.min(
-        Math.max(currentWidthRef.current + (e.clientX - dragStartX.current), minWidth),
+        Math.max(dragStartWidth.current + (e.clientX - dragStartX.current), minWidth),
         maxWidth,
       );
       if (controlled) {