@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

package/src/client/components/layout/desktop-layout/resizer/index.tsx

@@ -0,0 +1,312 @@
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'preact/compat';
+import { useRef as useRefBase } from 'preact/hooks';
+import type { ComponentChildren, RefObject } from 'preact';
+import type { CSSProperties } from 'preact';
+import { clamp, toPx } from '@/client/components/layout/desktop-layout/resizer/utils';
+import { useSeparatorDrag } from '@/client/components/layout/desktop-layout/resizer/separator-drag';
+
+/**
+ * Hand-rolled resizable panel group (the Preact-native replacement for
+ * react-resizable-panels in this app's two horizontal layouts).
+ *
+ * Model: every Panel is a flex child sized by `flex: 0 1 auto` plus a px
+ * width/height held in state; exactly one panel per group is the FILLER
+ * (`filler` prop) and takes `flex: 1 1 0`, absorbing the remaining space. A
+ * Separator drag transfers pixels between the two panels adjacent to it,
+ * clamped by both neighbors' min/max constraints, and commits once per drag
+ * through `onLayoutChanged(_, { isUserInteraction: true })`.
+ *
+ * Sizes are pixels here. A caller that stores a width as a share of the group's
+ * area (see `panel-widths.ts`) resolves it to px before passing it in — the
+ * resizer has no percentage path and should not grow one.
+ *
+ * The filler's `minSize` is a real CSS floor, which is what makes a shrinking
+ * window push the resizable panels toward their own floors instead of
+ * collapsing the filler to nothing (a zero flex basis absorbs no negative free
+ * space). Once every panel sits at its floor the row is narrower than its
+ * container and the surplus is clipped — the layout has no panel to give up.
+ *
+ * The imperative API mirrors what this app used from the old library:
+ * `panelRef.resize(px)`, `panelRef.getSize() -> { inPixels }`, and the
+ * group's `setLayout` as a batch px resize.
+ */
+
+export type GroupOrientation = 'horizontal' | 'vertical';
+
+export interface LayoutMeta {
+  isUserInteraction: boolean;
+}
+
+export interface PanelImperativeHandle {
+  /** Set this panel's size in pixels (clamped to its min/max). */
+  resize: (px: number) => void;
+  /** Current rendered size in pixels, or null while unmounted. */
+  getSize: () => { inPixels: number } | null;
+}
+
+export type LayoutChangedHandler = (layout: Record<string, number>, meta: LayoutMeta) => void;
+
+export interface PanelState {
+  id: string;
+  isFiller: boolean;
+  minSize: number;
+  maxSize: number;
+  /** Push a new px size into the owning Panel's state (declarative render). */
+  setSize: (px: number) => void;
+  /** Latest committed px size; null for the filler. */
+  getSize: () => number | null;
+}
+
+interface GroupContextValue {
+  orientation: GroupOrientation;
+  panels: { current: Map<string, PanelState> };
+  /** Latest group-level layout callback, kept fresh for drag commits. */
+  onLayoutChanged: { current: LayoutChangedHandler | null };
+}
+
+const GroupContext = createContext<GroupContextValue | null>(null);
+
+export function Group(props: {
+  orientation: GroupOrientation;
+  id?: string;
+  /** The group's own element, for measuring the area its panels share. */
+  groupRef?: RefObject<HTMLDivElement>;
+  onLayoutChanged?: LayoutChangedHandler;
+  className?: string;
+  children: ComponentChildren;
+}) {
+  const { orientation, id, groupRef, onLayoutChanged, className, children } = props;
+  const panelsRef = useRefBase<Map<string, PanelState>>(new Map());
+  // Latest callback without re-subscribing anything: separators and the
+  // imperative handle read it through a ref.
+  const changedRef = useRefBase<LayoutChangedHandler | null>(onLayoutChanged ?? null);
+  changedRef.current = onLayoutChanged ?? null;
+
+  const ctx = useMemo<GroupContextValue>(
+    () => ({ orientation, panels: panelsRef, onLayoutChanged: changedRef }),
+    [orientation],
+  );
+
+  return (
+    <GroupContext.Provider value={ctx}>
+      <div
+        ref={groupRef}
+        data-panel-group=""
+        data-panel-group-id={id}
+        className={className}
+        style={{ display: 'flex', flex: '1 1 0%', flexDirection: orientation === 'horizontal' ? 'row' : 'column', minWidth: 0, minHeight: 0 } as CSSProperties}
+      >
+        {children}
+      </div>
+    </GroupContext.Provider>
+  );
+}
+
+export function Panel(props: {
+  id: string;
+  panelRef?: RefObject<PanelImperativeHandle | null>;
+  /** Initial size in px; ignored for the filler panel. */
+  defaultSize?: number | string;
+  minSize?: number | string;
+  maxSize?: number | string;
+  /**
+   * Render at zero width without unmounting. The panel keeps its size state, so
+   * reopening restores the remembered width and the width transition animates
+   * the movement instead of the content popping in.
+   */
+  collapsed?: boolean;
+  /** This panel absorbs the remaining space instead of holding its own px. */
+  filler?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children: ComponentChildren;
+}) {
+  const { id, panelRef, defaultSize, minSize = 0, maxSize, collapsed = false, filler = false, className, style, children } = props;
+  const group = useContext(GroupContext);
+  if (!group) {
+    throw new Error(`<Panel id="${id}"> must be rendered inside a <Group>`);
+  }
+  const { orientation, panels } = group;
+
+  const minPx = toPx(minSize, 0);
+  const maxPx = maxSize != null ? toPx(maxSize, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER;
+  const elementRef = useRef<HTMLDivElement | null>(null);
+  const [sizePx, setSizePx] = useState<number | null>(() =>
+    filler ? null : clamp(toPx(defaultSize, minPx), minPx, maxPx),
+  );
+  const sizePxRef = useRef(sizePx);
+
+  /**
+   * The ONE way a size is applied: the ref and the state move together.
+   *
+   * A separator drag commits in the same tick it lands its final size —
+   * `useSeparatorDrag`'s `onUp` calls `apply()` and then reads every panel's
+   * `getSize()` to build the layout it reports. Writing only the state leaves the
+   * ref holding the size from the LAST render, so the commit persisted the width
+   * the panel had BEFORE the drag (measured: a sidebar dragged 351 → 446 posted
+   * `omp_sidebar_width: 351`), and the drag looked like it never saved.
+   */
+  const applySize = (px: number) => {
+    sizePxRef.current = px;
+    setSizePx(px);
+  };
+
+  // Register with the group so separators and the imperative handle can find
+  // this panel. Runs once per mount.
+  useEffect(() => {
+    const state: PanelState = {
+      id,
+      isFiller: filler,
+      minSize: minPx,
+      maxSize: maxPx,
+      setSize: applySize,
+      getSize: () => sizePxRef.current,
+    };
+    panels.current.set(id, state);
+    return () => {
+      panels.current.delete(id);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  // Constraints can change between renders (e.g. the right panel's min per
+  // view); refresh the registry entry every render.
+  useEffect(() => {
+    const state = panels.current.get(id);
+    if (state) {
+      state.minSize = minPx;
+      state.maxSize = maxPx;
+    }
+  });
+
+  // Adopt a changed `defaultSize`. This is what restores a panel after its
+  // owner swaps it — a right-panel view switch, an editor source↔diff switch —
+  // and after a resize recomputes it, without an imperative push from the
+  // owner. A drag does not fight it: the owner only produces a new
+  // `defaultSize` once the drag commits, and that value is the size the drag
+  // already applied.
+  const lastDefaultPxRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (filler || defaultSize == null) return;
+    const nextPx = toPx(defaultSize, minPx);
+    if (lastDefaultPxRef.current === nextPx) return;
+    lastDefaultPxRef.current = nextPx;
+    applySize(clamp(nextPx, minPx, maxPx));
+  }, [defaultSize, filler, minPx, maxPx]);
+
+  useEffect(() => {
+    if (!panelRef) return;
+    panelRef.current = {
+      resize: (px) => {
+        applySize(clamp(px, minPx, maxPx));
+      },
+      getSize: () => {
+        const px = sizePxRef.current;
+        return px != null ? { inPixels: px } : null;
+      },
+    };
+    return () => {
+      panelRef.current = null;
+    };
+  }, [panelRef, minPx, maxPx]);
+
+  const baseStyle: CSSProperties = filler
+    ? {
+        flex: '1 1 0%',
+        // The filler keeps its floor on the group's axis (and none across it,
+        // where it is sized by the container): see the group model note above.
+        minWidth: orientation === 'horizontal' ? minPx : 0,
+        minHeight: orientation === 'horizontal' ? 0 : minPx,
+        overflow: 'hidden',
+        position: 'relative',
+      }
+    : {
+        flex: '0 1 auto',
+        width: orientation === 'horizontal' ? (collapsed ? 0 : sizePx ?? undefined) : undefined,
+        height: orientation === 'horizontal' ? undefined : collapsed ? 0 : sizePx ?? undefined,
+        minWidth: orientation === 'horizontal' ? (collapsed ? 0 : minPx) : undefined,
+        minHeight: orientation === 'horizontal' ? undefined : collapsed ? 0 : minPx,
+        maxWidth: maxSize != null ? maxPx : undefined,
+        // A drag re-applies the real width at most every RESIZE_FOLLOW_INTERVAL_MS
+        // (see useSeparatorDrag), and this transition is what makes those steps
+        // read as one movement. It also carries a panel to its remembered width
+        // on a view switch, and to zero on collapse, instead of snapping.
+        transition: `${orientation === 'horizontal' ? 'width' : 'height'} 200ms cubic-bezier(0.22, 1, 0.36, 1)`,
+        overflow: 'hidden',
+        position: 'relative',
+      };
+
+  return (
+    <div
+      ref={elementRef}
+      data-panel=""
+      data-panel-id={id}
+      data-panel-collapsed={collapsed ? '' : undefined}
+      className={className}
+      style={{ ...baseStyle, ...style }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The drag handle between two panels. Dragging transfers pixels from the
+ * previous sibling panel to the next sibling panel, clamped by both sides,
+ * and commits one `onLayoutChanged(_, { isUserInteraction: true })` per drag.
+ *
+ * While a drag is active, a fixed overlay blocks pointer capture — most
+ * importantly the browser panel's iframe, which would otherwise swallow
+ * pointermove events mid-drag.
+ */
+export function Separator(props: { className?: string; style?: CSSProperties; children?: ComponentChildren }) {
+  const { className, style, children } = props;
+  const group = useContext(GroupContext);
+  const hostRef = useRef<HTMLDivElement | null>(null);
+
+  if (!group) {
+    throw new Error('<Separator> must be rendered inside a <Group>');
+  }
+  const { orientation, panels, onLayoutChanged } = group;
+  const { dragging, guidePx, onPointerDown } = useSeparatorDrag(hostRef, orientation, panels, onLayoutChanged);
+
+  return (
+    <div
+      ref={hostRef}
+      data-separator=""
+      role="separator"
+      aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
+      className={className}
+      style={style}
+      onPointerDown={onPointerDown}
+      onDragStart={(e: DragEvent) => e.preventDefault()}
+    >
+      {children}
+      {dragging && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 9999,
+            cursor: orientation === 'horizontal' ? 'col-resize' : 'row-resize',
+          } as CSSProperties}
+        />
+      )}
+      {guidePx !== null && (
+        <div
+          aria-hidden="true"
+          style={{
+            position: 'fixed',
+            ...(orientation === 'horizontal'
+              ? { left: `${guidePx}px`, top: 0, bottom: 0, width: '1px' }
+              : { top: `${guidePx}px`, left: 0, right: 0, height: '1px' }),
+            zIndex: 9998,
+            pointerEvents: 'none',
+            background: 'var(--theme-ink)',
+            opacity: 0.35,
+          } as CSSProperties}
+        />
+      )}
+    </div>
+  );
+}

package/src/client/components/layout/desktop-layout/resizer/panel.test.ts

@@ -0,0 +1,145 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * A separator drag must persist the width it actually landed.
+ *
+ * `useSeparatorDrag`'s `onUp` lands the final size and then builds the layout it
+ * reports from every panel's `getSize()` — in the SAME tick, with no render in
+ * between. A `getSize` that reads a value only a render writes therefore reports
+ * the size the panel had BEFORE the drag, and the commit persists the wrong
+ * width: measured in the browser, a sidebar dragged 351 → 446 posted
+ * `omp_sidebar_width: 351`, so the drag looked like it never saved.
+ *
+ * Driven through real pointer events on the separator, because that IS the path
+ * under test — the imperative `resize()` is not what a drag calls.
+ *
+ * Rendered with `h()` (no JSX) against happy-dom.
+ */
+
+import { afterAll, afterEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { Group, Panel, Separator, type LayoutChangedHandler } from '@/client/components/layout/desktop-layout/resizer';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+let container: HTMLElement;
+/** Every layout the group committed, in order. */
+let layouts: Array<Record<string, number>> = [];
+
+function Probe() {
+  return h(Group, {
+    orientation: 'horizontal',
+    onLayoutChanged: ((layout) => layouts.push(layout)) as LayoutChangedHandler,
+    children: [
+      h(Panel, { id: 'probe', defaultSize: 300, minSize: 100, maxSize: 600, children: h('div', null, 'panel') }),
+      h(Separator, {}),
+      // The filler is the panel a drag transfers into, so it needs a measured
+      // width of its own — happy-dom lays nothing out, and a 0-width filler clamps
+      // every delta to zero in `transfer`.
+      h(Panel, { id: 'filler', filler: true, children: h('div', null, 'fill') }),
+    ],
+  });
+}
+
+/**
+ * happy-dom lays nothing out, so `getBoundingClientRect` answers zeros. The drag
+ * measures its neighbours with it, so each panel's rect is derived from the
+ * width `Panel` actually rendered — which is also what makes the assertion
+ * meaningful: the reported layout must agree with the DOM. The filler has no
+ * inline width (flexbox sizes it), so it is given the rest of a 900px group.
+ */
+function stubLayout(): void {
+  for (const el of container.querySelectorAll<HTMLElement>('[data-panel-id]')) {
+    el.getBoundingClientRect = () => {
+      const own = Number.parseFloat(el.style.width || '0') || 0;
+      const width = el.getAttribute('data-panel-id') === 'filler' ? 900 - widthOf('probe') : own;
+      return { width, height: 0, top: 0, left: 0, right: width, bottom: 0, x: 0, y: 0, toJSON: () => ({}) } as DOMRect;
+    };
+  }
+}
+
+function widthOf(id: string): number {
+  const el = container.querySelector<HTMLElement>(`[data-panel-id="${id}"]`);
+  return el ? Number.parseFloat(el.style.width || '0') || 0 : 0;
+}
+
+/** Dispatch a pointer event with the fields the drag reads. */
+function pointer(type: string, clientX: number): void {
+  const event = new Event(type, { bubbles: true }) as Event & { clientX: number; button: number };
+  event.clientX = clientX;
+  event.button = 0;
+  const target = type === 'pointerdown' ? container.querySelector('[data-separator]') : window;
+  target?.dispatchEvent(event);
+}
+
+async function dragBy(delta: number): Promise<void> {
+  await act(async () => {
+    pointer('pointerdown', 300);
+  });
+  await act(async () => {
+    pointer('pointermove', 300 + delta);
+  });
+  await act(async () => {
+    pointer('pointerup', 300 + delta);
+  });
+}
+
+afterAll(() => {
+  restoreDomGlobals();
+});
+
+afterEach(() => {
+  if (container) {
+    render(null, container);
+    container.remove();
+  }
+  layouts = [];
+});
+
+async function mount() {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(Probe, {}), container);
+  });
+  stubLayout();
+}
+
+describe('separator drag commit', () => {
+  test('the reported layout is the width the panel rendered, not the pre-drag one', async () => {
+    await mount();
+    expect(widthOf('probe')).toBe(300);
+
+    await dragBy(146);
+
+    expect(widthOf('probe')).toBe(446);
+    const committed = layouts.at(-1);
+    // The regression: a `getSize` reading a render-written ref answered 300 here
+    // while the DOM already showed 446, and that 300 is what got persisted.
+    expect(committed?.probe).toBe(446);
+    expect(committed?.probe).toBe(widthOf('probe'));
+  });
+
+  test('a shrinking drag reports the shrunken width', async () => {
+    await mount();
+    await dragBy(-120);
+
+    expect(widthOf('probe')).toBe(180);
+    expect(layouts.at(-1)?.probe).toBe(180);
+  });
+
+  test('the drag still clamps at the panel constraints', async () => {
+    await mount();
+    await dragBy(2000);
+    expect(layouts.at(-1)?.probe).toBe(600);
+
+    await dragBy(-2000);
+    expect(layouts.at(-1)?.probe).toBe(100);
+    expect(widthOf('probe')).toBe(100);
+  });
+});

package/src/client/components/layout/desktop-layout/resizer/separator-drag.ts

@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { RefObject } from 'preact';
+import type { TargetedPointerEvent } from 'preact';
+import { clamp, transfer } from '@/client/components/layout/desktop-layout/resizer/utils';
+import { RESIZE_FOLLOW_INTERVAL_MS } from '@/shared/lib/workspace/panel-widths';
+import type { GroupOrientation, LayoutChangedHandler, PanelState } from '@/client/components/layout/desktop-layout/resizer';
+
+export interface SeparatorDrag {
+  /** A drag is in flight; the caller renders the pointer-capture blocker. */
+  dragging: boolean;
+  /** Pointer position of the guide line, or null when not dragging. */
+  guidePx: number | null;
+  onPointerDown: (event: TargetedPointerEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * The deferred drag behind a separator.
+ *
+ * A ghost guide line follows the pointer, and the real width is re-applied at
+ * most every `RESIZE_FOLLOW_INTERVAL_MS`. Applying it on every pointermove
+ * re-renders both panels per frame and reflows whatever they contain — an xterm
+ * buffer, a CodeMirror document, a browser iframe — for a width the user is
+ * still choosing. The panel's own width transition smooths the steps that land.
+ *
+ * Kept out of `index.tsx` so the components stay inside the repo's file-size
+ * ceiling.
+ */
+export function useSeparatorDrag(
+  hostRef: RefObject<HTMLDivElement | null>,
+  orientation: GroupOrientation,
+  panels: { current: Map<string, PanelState> },
+  onLayoutChanged: { current: LayoutChangedHandler | null },
+): SeparatorDrag {
+  const [dragging, setDragging] = useState(false);
+  // State, not a ref: the guide line has to move with the pointer even though
+  // the panels deliberately do not.
+  const [guidePx, setGuidePx] = useState<number | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  // A drag owns two window listeners; if the separator unmounts mid-drag (a
+  // layout switch) nothing else would ever remove them.
+  useEffect(() => () => cleanupRef.current?.(), []);
+
+  const onPointerDown = (e: TargetedPointerEvent<HTMLDivElement>) => {
+    const host = hostRef.current;
+    if (!host || e.button !== 0) return;
+    // Walk past separators and collapsed panels to the real neighbours. A
+    // collapsed panel keeps its DOM node (so its state survives and the width
+    // transition has something to animate), but it is zero-width and its own
+    // floor still reads as 320 in the registry — pairing a drag against it
+    // would clamp every delta to zero and kill the separator.
+    const neighbour = (start: Element | null, step: 'previous' | 'next') => {
+      let node = start;
+      while (node) {
+        if (node.hasAttribute('data-separator') || node.hasAttribute('data-panel-collapsed')) {
+          node = step === 'previous' ? node.previousElementSibling : node.nextElementSibling;
+          continue;
+        }
+        return node instanceof HTMLElement && node.hasAttribute('data-panel') ? node : null;
+      }
+      return null;
+    };
+
+    const previous = neighbour(host.previousElementSibling, 'previous');
+    const next = neighbour(host.nextElementSibling, 'next');
+    const a = previous ? panels.current.get(previous.getAttribute('data-panel-id') ?? '') : undefined;
+    const b = next ? panels.current.get(next.getAttribute('data-panel-id') ?? '') : undefined;
+    if (!a || !b || !previous || !next) return;
+
+    e.preventDefault();
+    setDragging(true);
+
+    const horizontal = orientation === 'horizontal';
+    const startPos = horizontal ? e.clientX : e.clientY;
+    const measure = (el: HTMLElement) =>
+      horizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+    // Measure, never ask the panel: a window narrow enough for flexbox to
+    // shrink a panel below its specified width would otherwise start the drag
+    // from a size the panel does not have on screen.
+    const aStart = measure(previous);
+    const bStart = measure(next);
+
+    // The size the throttle last committed, kept apart from the guide line so
+    // every step that lands is a legal clamped size.
+    let pending: { a: number; b: number } | null = null;
+    let followTimer: ReturnType<typeof setTimeout> | undefined;
+
+    const apply = (sizes: { a: number; b: number }) => {
+      a.setSize(sizes.a);
+      if (!b.isFiller) b.setSize(sizes.b);
+    };
+
+    const onMove = (ev: PointerEvent) => {
+      const pos = horizontal ? ev.clientX : ev.clientY;
+      const delta = transfer(
+        { size: aStart, min: a.minSize, max: a.maxSize },
+        { size: bStart, min: b.minSize, max: b.maxSize },
+        pos - startPos,
+      );
+      pending = {
+        a: clamp(aStart + delta, a.minSize, a.maxSize),
+        b: clamp(bStart - delta, b.minSize, b.maxSize),
+      };
+      setGuidePx(pos);
+      if (followTimer === undefined) {
+        followTimer = setTimeout(() => {
+          followTimer = undefined;
+          if (pending) apply(pending);
+        }, RESIZE_FOLLOW_INTERVAL_MS);
+      }
+    };
+
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      clearTimeout(followTimer);
+      cleanupRef.current = null;
+      setDragging(false);
+      setGuidePx(null);
+      // Land the exact final size once, so the release position is the one the
+      // guide line showed rather than the last throttled step.
+      if (pending) apply(pending);
+
+      const layout: Record<string, number> = {};
+      for (const [pid, state] of panels.current) {
+        const px = state.getSize();
+        if (px != null) layout[pid] = px;
+      }
+      onLayoutChanged.current?.(layout, { isUserInteraction: true });
+    };
+
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+    cleanupRef.current = onUp;
+  };
+
+  return { dragging, guidePx, onPointerDown };
+}

package/src/client/components/layout/desktop-layout/resizer/utils.test.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { transfer } from '@/client/components/layout/desktop-layout/resizer/utils';
+
+describe('transfer', () => {
+  test('growing the leading panel stops at its own ceiling', () => {
+    expect(transfer({ size: 600, min: 300, max: 1200 }, { size: 1200, min: 320, max: 1200 }, 900)).toBe(600);
+  });
+
+  test('growing the leading panel stops at the trailing floor', () => {
+    expect(transfer({ size: 600, min: 300, max: 1200 }, { size: 268, min: 200, max: 1200 }, 900)).toBe(68);
+  });
+
+  test('shrinking the leading panel stops at its own floor', () => {
+    expect(transfer({ size: 420, min: 420, max: Number.MAX_SAFE_INTEGER }, { size: 300, min: 300, max: 1200 }, -500)).toBe(0);
+  });
+
+  test('a trailing panel parked on its floor still lets the leading one shrink', () => {
+    // The editor sat at its 300px floor, which used to clamp every negative
+    // delta to 0: the separator went dead and the layout could not be dragged
+    // back out of that state.
+    expect(transfer({ size: 1520, min: 420, max: Number.MAX_SAFE_INTEGER }, { size: 300, min: 300, max: 1200 }, -1600)).toBe(-900);
+  });
+
+  test('a delta inside both panels has room passes through', () => {
+    expect(transfer({ size: 600, min: 300, max: 1200 }, { size: 640, min: 320, max: 1200 }, -100)).toBe(-100);
+  });
+});

package/src/client/components/layout/desktop-layout/resizer/utils.ts

@@ -0,0 +1,34 @@
+/**
+ * Pure geometry for the resizable panel group: the clamping, the px parsing
+ * and the pixel transfer between a dragged pair. Kept out of `index.tsx` so
+ * the components stay inside the repo's file-size ceiling.
+ */
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function toPx(value: number | string | undefined, fallback: number): number {
+  if (typeof value === 'number') return value;
+  if (typeof value === 'string') return parseFloat(value) || fallback;
+  return fallback;
+}
+
+/**
+ * Pixels transferred between the dragged pair. Positive delta moves the
+ * separator right/down: A grows, B shrinks. The applied delta is clamped so
+ * neither panel crosses its own min/max.
+ *
+ * A shrinking is bounded by A's floor and B's *ceiling* — B is the panel that
+ * grows on that side. Bounding it by B's floor instead is what made a
+ * separator dead as soon as its neighbour sat at its minimum.
+ */
+export function transfer(
+  a: { size: number; min: number; max: number },
+  b: { size: number; min: number; max: number },
+  delta: number,
+): number {
+  const lower = Math.max(a.min - a.size, b.size - b.max);
+  const upper = Math.min(a.max - a.size, b.size - b.min);
+  return clamp(delta, lower, upper);
+}