gloomberb 0.5.0 → 0.6.0

package/src/components/layout/pane-sizing.ts

@@ -1,6 +1,15 @@
-const RESERVED_PANE_CHROME_ROWS = 2;
 
-export function getPaneBodyHeight(height: number): number {
-  // Reserve the header row plus the bottom border/resize row.
-  return Math.max(1, height - RESERVED_PANE_CHROME_ROWS);
+const PANE_HEADER_ROWS = 1;
+const PANE_FOOTER_ROWS = 1;
+
+export function shouldReservePaneFooter(nativePaneChrome: boolean | undefined, showFooter: boolean): boolean {
+  return !nativePaneChrome || showFooter;
+}
+
+export function getPaneBodyHeight(height: number, reserveFooter = true): number {
+  return Math.max(1, height - PANE_HEADER_ROWS - (reserveFooter ? PANE_FOOTER_ROWS : 0));
+}
+
+export function getPaneBodyWidth(width: number): number {
+  return Math.max(1, width);
 }

package/src/components/layout/pane-title.ts

@@ -0,0 +1,35 @@
+import { resolveCollectionForPane, resolveTickerForPane, type AppState } from "../../state/app-context";
+import type { PaneInstanceConfig } from "../../types/config";
+import type { PaneDef } from "../../types/plugin";
+
+export function getPaneDisplayTitle(
+  state: Pick<AppState, "config" | "paneState">,
+  instance: PaneInstanceConfig,
+  paneDef: PaneDef,
+): string {
+  if (instance.paneId === "chat") {
+    return instance.title ?? "#everyone";
+  }
+
+  if (instance.paneId === "ticker-detail") {
+    const ticker = resolveTickerForPane(state as AppState, instance.instanceId);
+    if (ticker) return ticker;
+    const collectionId = resolveCollectionForPane(state as AppState, instance.instanceId);
+    return state.config.portfolios.find((portfolio) => portfolio.id === collectionId)?.name
+      ?? state.config.watchlists.find((watchlist) => watchlist.id === collectionId)?.name
+      ?? instance.title
+      ?? paneDef.name;
+  }
+
+  if (instance.title) return instance.title;
+
+  if (instance.paneId === "portfolio-list") {
+    const collectionId = resolveCollectionForPane(state as AppState, instance.instanceId);
+    return state.config.portfolios.find((portfolio) => portfolio.id === collectionId)?.name
+      ?? state.config.watchlists.find((watchlist) => watchlist.id === collectionId)?.name
+      ?? paneDef.name;
+  }
+
+  const ticker = resolveTickerForPane(state as AppState, instance.instanceId);
+  return ticker ? `${paneDef.name}: ${ticker}` : paneDef.name;
+}

package/src/components/layout/pane.tsx

@@ -1,9 +1,12 @@
+import { Box, useUiCapabilities } from "../../ui";
 import type { ReactNode } from "react";
-import { paneBg } from "../../theme/colors";
+import { colors, paneBg } from "../../theme/colors";
 import { PaneHeader } from "./pane-header";
-import { getPaneBodyHeight } from "./pane-sizing";
+import { hasPaneFooterContent, PaneFooterBar, type CombinedPaneFooter } from "./pane-footer";
+import { getPaneBodyHeight, shouldReservePaneFooter } from "./pane-sizing";
 
 interface PaneWrapperProps {
+  paneId?: string;
   title?: string;
   focused: boolean;
   width?: number;
@@ -12,10 +15,17 @@ interface PaneWrapperProps {
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
   onMouseMove?: (event: any) => void;
+  onHeaderMouseDown?: (event: any) => void;
+  onHeaderMouseDrag?: (event: any) => void;
+  onHeaderMouseDragEnd?: (event: any) => void;
+  onHeaderContextMenu?: (event: any) => void;
+  onActionMouseDown?: (event: any) => void;
+  footer?: CombinedPaneFooter | null;
   children: ReactNode;
 }
 
 export function PaneWrapper({
+  paneId,
   title,
   focused,
   width = 0,
@@ -24,30 +34,68 @@ export function PaneWrapper({
   showActions = false,
   onMouseDown,
   onMouseMove,
+  onHeaderMouseDown,
+  onHeaderMouseDrag,
+  onHeaderMouseDragEnd,
+  onHeaderContextMenu,
+  onActionMouseDown,
+  footer,
   children,
 }: PaneWrapperProps) {
+  const { nativePaneChrome } = useUiCapabilities();
   const bg = paneBg(focused);
+  const showFooter = hasPaneFooterContent(footer);
+  const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
   const bodyHeight = typeof height === "number"
-    ? title ? getPaneBodyHeight(height) : height
+    ? title ? getPaneBodyHeight(height, reserveFooter) : height
     : undefined;
 
   return (
-    <box
+    <Box
       flexDirection="column"
       width={width}
       height={height}
       flexGrow={flexGrow}
       backgroundColor={bg}
       overflow="hidden"
+      {...(nativePaneChrome ? {
+        "data-gloom-role": "pane-window",
+        "data-gloom-pane-id": paneId,
+        "data-floating": "false",
+        "data-focused": focused ? "true" : "false",
+        style: { "--pane-border-color": focused ? colors.borderFocused : colors.border },
+      } : {})}
       onMouseDown={onMouseDown}
       onMouseMove={onMouseMove}
     >
       {title && (
-        <PaneHeader title={title} width={width} focused={focused} showActions={showActions} />
+        <PaneHeader
+          title={title}
+          width={width}
+          focused={focused}
+          showActions={showActions}
+          onHeaderMouseDown={onHeaderMouseDown}
+          onHeaderMouseDrag={onHeaderMouseDrag}
+          onHeaderMouseDragEnd={onHeaderMouseDragEnd}
+          onHeaderContextMenu={onHeaderContextMenu}
+          onActionMouseDown={onActionMouseDown}
+        />
       )}
-      <box height={bodyHeight} flexGrow={bodyHeight == null ? 1 : 0} overflow="hidden">
+      <Box
+        height={bodyHeight}
+        flexGrow={bodyHeight == null ? 1 : 0}
+        flexBasis={bodyHeight == null ? 0 : undefined}
+        overflow="hidden"
+      >
         {children}
-      </box>
-    </box>
+      </Box>
+      {title && reserveFooter && (
+        <PaneFooterBar
+          footer={footer}
+          focused={focused}
+          width={typeof width === "number" ? width : undefined}
+        />
+      )}
+    </Box>
   );
 }

package/src/components/layout/shell.test.tsx

@@ -1,21 +1,32 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { TextAttributes } from "@opentui/core";
-import { testRender } from "@opentui/react/test-utils";
+import { testRender } from "../../renderers/opentui/test-utils";
 import { DialogProvider } from "@opentui-ui/dialog/react";
 import type { ReactNode } from "react";
-import { act, useReducer } from "react";
+import { act, createElement, useReducer } from "react";
 import { AppContext, appReducer, createInitialState } from "../../state/app-context";
 import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../market-data/coordinator";
-import { setSharedDataProviderForTests } from "../../plugins/registry";
+import { setSharedMarketDataForTests } from "../../plugins/registry";
 import { cloneLayout, createDefaultConfig } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
 import { setSharedRegistryForTests } from "../../plugins/registry";
 import { portfolioListPlugin } from "../../plugins/builtin/portfolio-list";
+import { PluginRenderProvider } from "../../plugins/plugin-runtime";
+import { createTestPluginRuntime } from "../../test-support/plugin-runtime";
 import type { PaneProps } from "../../types/plugin";
 import { StockChart } from "../chart/stock-chart";
 import { StatusBar } from "./status-bar";
 import { Header } from "./header";
-import { buildNativeWindowState, finalizePaneDragRelease, resolveNativeDockDividers, Shell } from "./shell";
+import {
+  buildNativeWindowState,
+  constrainFloatingRectToBounds,
+  finalizePaneDragRelease,
+  resolvePaneManagementShortcut,
+  resolveAppHeaderHeightCells,
+  resolveNativeDockDividers,
+  resolvePaneDragFloatingRect,
+  Shell,
+} from "./shell";
 import type { DataProvider } from "../../types/data-provider";
 import type { PricePoint, Quote, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
@@ -30,11 +41,12 @@ afterEach(() => {
   }
   harnessState = null;
   setSharedMarketDataCoordinator(null);
-  setSharedDataProviderForTests(undefined);
+  setSharedMarketDataForTests(undefined);
   setSharedRegistryForTests(undefined);
 });
 
 function createShellPluginRegistry(options?: {
+  portfolioListComponent?: (props: PaneProps) => ReactNode;
   tickerDetailComponent?: (props: PaneProps) => ReactNode;
 }): PluginRegistry {
   return {
@@ -42,7 +54,7 @@ function createShellPluginRegistry(options?: {
       ["portfolio-list", {
         id: "portfolio-list",
         name: "Portfolio List",
-        component: () => <text>Portfolio Body</text>,
+        component: options?.portfolioListComponent ?? (() => <text>Portfolio Body</text>),
         defaultPosition: "left",
       }],
       ["ticker-detail", {
@@ -62,7 +74,7 @@ function createShellPluginRegistry(options?: {
     getPluginPaneTemplateIds: () => [],
     hasPaneSettings: (paneId: string) => paneId === "portfolio-list:main",
     openPaneSettingsFn: () => {},
-    openCommandBarFn: () => {},
+    openCommandBar: () => {},
     updateLayoutFn: () => {},
     hideWidget: () => {},
   } as unknown as PluginRegistry;
@@ -71,8 +83,26 @@ function createShellPluginRegistry(options?: {
 function createBrokerPortfolioRegistry(): PluginRegistry {
   const pane = portfolioListPlugin.panes?.[0];
   if (!pane) throw new Error("missing portfolio pane");
-  return {
-    panes: new Map([["portfolio-list", pane]]),
+
+  let registry: PluginRegistry;
+  const runtime = createTestPluginRuntime({
+    pinTicker: (symbol, options) => registry.pinTicker(symbol, options),
+    navigateTicker: (symbol) => registry.navigateTicker(symbol),
+    selectTicker: (symbol, paneId) => registry.selectTicker(symbol, paneId),
+    switchTab: (tabId, paneId) => registry.switchTab(tabId, paneId),
+    switchPanel: (panel) => registry.switchPanel(panel),
+  });
+  const wrappedPane = {
+    ...pane,
+    component: (props: PaneProps) => (
+      <PluginRenderProvider pluginId={portfolioListPlugin.id} runtime={runtime}>
+        {createElement(pane.component as any, props)}
+      </PluginRenderProvider>
+    ),
+  };
+
+  registry = {
+    panes: new Map([["portfolio-list", wrappedPane]]),
     paneTemplates: new Map(),
     commands: new Map(),
     tickerActions: new Map(),
@@ -82,16 +112,19 @@ function createBrokerPortfolioRegistry(): PluginRegistry {
     getPluginPaneTemplateIds: () => [],
     hasPaneSettings: () => true,
     openPaneSettingsFn: () => {},
-    openCommandBarFn: () => {},
+    openCommandBar: () => {},
     updateLayoutFn: () => {},
     hideWidget: () => {},
     focusPaneFn: () => {},
-    pinTickerFn: () => {},
+    pinTicker: () => {},
+    navigateTicker: () => {},
     showPaneFn: () => {},
     getLayoutFn: () => ({ dockRoot: null, instances: [], floating: [] }),
     getTermSizeFn: () => ({ width: 120, height: 40 }),
     Slot: () => null,
   } as unknown as PluginRegistry;
+
+  return registry;
 }
 
 function makeQuote(overrides: Partial<Quote> = {}): Quote {
@@ -393,6 +426,11 @@ describe("Header", () => {
 });
 
 describe("Shell", () => {
+  test("uses the desktop titlebar overlay height for shell chrome math", () => {
+    expect(resolveAppHeaderHeightCells({ titleBarOverlay: true, cellHeightPx: 18 })).toBe(28 / 18);
+    expect(resolveAppHeaderHeightCells({ titleBarOverlay: false, cellHeightPx: 18 })).toBe(1);
+  });
+
   test("uses the live floating preview rect for native occluders", () => {
     const state = buildNativeWindowState(
       ["portfolio-list:main"],
@@ -424,6 +462,26 @@ describe("Shell", () => {
     ]);
   });
 
+  test("offsets native occluders by the actual app header height", () => {
+    const state = buildNativeWindowState(
+      [],
+      [
+        {
+          paneId: "ticker-detail:main",
+          rect: { x: 8, y: 2, width: 36, height: 12 },
+          zIndex: 75,
+        },
+      ],
+      null,
+      { open: false, width: 120, contentHeight: 40 },
+      [],
+      [],
+      28 / 18,
+    );
+
+    expect(state.occluders[0]?.rect.y).toBeCloseTo(2 + (28 / 18));
+  });
+
   test("ignores docked drag previews when building native occluders", () => {
     const state = buildNativeWindowState(
       ["portfolio-list:main"],
@@ -563,12 +621,105 @@ describe("Shell", () => {
     );
 
     await testSetup.renderOnce();
+    const actionCol = testSetup.captureCharFrame().split("\n")[0]?.indexOf("...");
+    expect(actionCol).toBeGreaterThanOrEqual(0);
+    await act(async () => {
+      await testSetup!.mockMouse.click(actionCol! + 1, 1);
+    });
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Settings");
+    expect(frame).toContain("Ctrl+,");
+    expect(frame).not.toContain("CmdOrCtrl");
+  });
+
+  test("shows a Pop Out action in the pane menu when a desktop bridge is available", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+      detached: [],
+    };
+    const nextConfig = {
+      ...config,
+      layout: cloneLayout(singlePaneLayout),
+      layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+    };
+    const state = createInitialState(nextConfig);
+    const pluginRegistry = createShellPluginRegistry();
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell
+            pluginRegistry={pluginRegistry}
+            desktopWindowBridge={{
+              kind: "main",
+              popOutPane: async () => {},
+              subscribeState: () => () => {},
+              subscribeDockPreview: () => () => {},
+            }}
+          />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    const floatingActionCol = testSetup.captureCharFrame().split("\n")[0]?.indexOf("...");
+    expect(floatingActionCol).toBeGreaterThanOrEqual(0);
+    await act(async () => {
+      await testSetup!.mockMouse.click(floatingActionCol! + 1, 1);
+    });
+    await testSetup.renderOnce();
+
+    expect(testSetup.captureCharFrame()).toContain("Pop Out");
+  });
+
+  test("shows the pane menu above a high z-index floating pane", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
+    if (!detailPane) throw new Error("missing default detail pane");
+
+    const floatingOnlyLayout = {
+      dockRoot: null,
+      instances: [{ ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 0, y: 0, width: 40, height: 8, zIndex: 195 }],
+    };
+    const nextConfig = {
+      ...config,
+      layout: cloneLayout(floatingOnlyLayout),
+      layouts: [{ name: "Default", layout: cloneLayout(floatingOnlyLayout) }],
+    };
+    const state = {
+      ...createInitialState(nextConfig),
+      focusedPaneId: "ticker-detail:main",
+    };
+    const pluginRegistry = createShellPluginRegistry();
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell pluginRegistry={pluginRegistry} />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    const highZActionCol = testSetup.captureCharFrame().split("\n")[0]?.indexOf("...");
+    expect(highZActionCol).toBeGreaterThanOrEqual(0);
     await act(async () => {
-      await testSetup!.mockMouse.click(37, 1);
+      await testSetup!.mockMouse.click(highZActionCol! + 1, 1);
     });
     await testSetup.renderOnce();
 
-    expect(testSetup.captureCharFrame()).toContain("Settings");
+    expect(testSetup.captureCharFrame()).toContain("Dock Pane");
   });
 
   test("applies a chart resolution chip on the first click even when the chart pane is unfocused", async () => {
@@ -599,7 +750,7 @@ describe("Shell", () => {
     };
 
     const provider = createChartShellDataProvider({ [symbol]: history });
-    setSharedDataProviderForTests(provider);
+    setSharedMarketDataForTests(provider);
     setSharedMarketDataCoordinator(new MarketDataCoordinator(provider));
 
     const pluginRegistry = createShellPluginRegistry({
@@ -638,7 +789,11 @@ describe("Shell", () => {
       spanColumn += span.width;
     }
     expect(resolutionCol).toBeGreaterThanOrEqual(0);
-    expect(testSetup.captureCharFrame()).toContain("AAPL - AUTO");
+    const initialBoldResolutionText = resolutionSpansBefore
+      .filter((span) => (span.attributes & TextAttributes.BOLD) !== 0)
+      .map((span) => span.text)
+      .join("");
+    expect(initialBoldResolutionText).toContain("AUTO");
 
     await act(async () => {
       await testSetup!.mockMouse.click(resolutionCol, resolutionRow);
@@ -651,9 +806,11 @@ describe("Shell", () => {
       harnessState?.config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main")?.settings?.chartResolution,
     ).toBe("1wk");
     const resolutionSpans = testSetup.captureSpans().lines[resolutionRow]?.spans ?? [];
-    expect(
-      resolutionSpans.some((span) => span.text === targetResolution && (span.attributes & TextAttributes.BOLD) !== 0),
-    ).toBe(true);
+    const boldResolutionText = resolutionSpans
+      .filter((span) => (span.attributes & TextAttributes.BOLD) !== 0)
+      .map((span) => span.text)
+      .join("");
+    expect(boldResolutionText).toContain(targetResolution);
   });
 
   test("keeps the cash drawer and gridlock tip on distinct click rows in the full app layout", async () => {
@@ -723,6 +880,20 @@ describe("Shell", () => {
     }));
   });
 
+  test("resolves pane management shortcuts", () => {
+    const base = { ctrl: false, meta: true, super: true, shift: true, alt: false };
+    expect(resolvePaneManagementShortcut({ ...base, name: ",", key: ",", shift: false })).toBe("settings");
+    expect(resolvePaneManagementShortcut({ ...base, name: "w", key: "w", ctrl: true, meta: false, super: false, shift: false })).toBe("close");
+    expect(resolvePaneManagementShortcut({ ...base, name: "D", key: "D" })).toBe("toggle-floating");
+    expect(resolvePaneManagementShortcut({ ...base, name: "o", key: "o" })).toBe("pop-out");
+    expect(resolvePaneManagementShortcut({ ...base, name: "c", key: "c" })).toBe("copy-screenshot");
+    expect(resolvePaneManagementShortcut({ ...base, name: "l", key: "l" })).toBe("layout-actions");
+    expect(resolvePaneManagementShortcut({ ...base, name: "g", key: "g" })).toBe("gridlock-all");
+    expect(resolvePaneManagementShortcut({ ...base, name: "n", key: "n" })).toBeNull();
+    expect(resolvePaneManagementShortcut({ ...base, name: "d", key: "d", alt: true })).toBeNull();
+    expect(resolvePaneManagementShortcut({ ...base, name: "d", key: "d", meta: false, super: false })).toBeNull();
+  });
+
   test("closes the focused docked pane with Ctrl+W", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-test");
     const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
@@ -808,6 +979,47 @@ describe("Shell", () => {
     expect(updateLayout?.layout.dockRoot).toEqual({ kind: "pane", instanceId: "portfolio-list:main" });
   });
 
+  test("closes the focused floating pane with Cmd+W", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
+    if (!mainPane || !detailPane) throw new Error("missing default panes");
+
+    const mixedLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8 }],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(mixedLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(mixedLayout) }],
+      }),
+      focusedPaneId: "ticker-detail:main",
+    };
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell pluginRegistry={createShellPluginRegistry()} />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 12 },
+    );
+
+    await testSetup.renderOnce();
+    await act(async () => {
+      testSetup!.mockInput.pressKey("w", { meta: true });
+      await testSetup!.renderOnce();
+    });
+
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(updateLayout?.layout.instances.map((instance: { instanceId: string }) => instance.instanceId)).toEqual(["portfolio-list:main"]);
+    expect(updateLayout?.layout.floating).toEqual([]);
+  });
+
   test("keeps a floating pane at the preview rect after a free drag release", () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-drag-test");
     const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
@@ -835,6 +1047,91 @@ describe("Shell", () => {
     }));
   });
 
+  test("derives a floating pane drag release rect from the release pointer", () => {
+    const rect = resolvePaneDragFloatingRect(
+      {
+        mode: "floating",
+        startX: 7,
+        startY: 3,
+        origRect: { x: 4, y: 2, width: 30, height: 8 },
+      },
+      { x: 4, y: 2, width: 30, height: 8 },
+      18,
+      6,
+      80,
+      24,
+    );
+
+    expect(rect).toEqual({
+      x: 15,
+      y: 5,
+      width: 30,
+      height: 8,
+    });
+  });
+
+  test("keeps a floating pane drag inside fractional desktop bounds", () => {
+    const rect = resolvePaneDragFloatingRect(
+      {
+        mode: "floating",
+        startX: 38,
+        startY: 9,
+        origRect: { x: 30, y: 7, width: 24, height: 8 },
+      },
+      { x: 30, y: 7, width: 24, height: 8 },
+      90,
+      40,
+      52.5,
+      18.5,
+    );
+
+    expect(rect).toEqual({
+      x: 28.5,
+      y: 10.5,
+      width: 24,
+      height: 8,
+    });
+  });
+
+  test("fits oversized floating panes into the current canvas", () => {
+    const rect = constrainFloatingRectToBounds(
+      { x: 80, y: 30, width: 100, height: 40, zIndex: 75 },
+      50.5,
+      12.5,
+    );
+
+    expect(rect).toEqual({
+      x: 0,
+      y: 0,
+      width: 50.5,
+      height: 12.5,
+      zIndex: 75,
+    });
+  });
+
+  test("keeps the pointer anchored when releasing a docked pane drag without an intermediate preview", () => {
+    const rect = resolvePaneDragFloatingRect(
+      {
+        mode: "docked",
+        startX: 22,
+        startY: 4,
+        origRect: { x: 10, y: 2, width: 40, height: 12 },
+      },
+      { x: 8, y: 1, width: 32, height: 10 },
+      30,
+      8,
+      80,
+      24,
+    );
+
+    expect(rect).toEqual({
+      x: 18,
+      y: 6,
+      width: 32,
+      height: 10,
+    });
+  });
+
   test("keeps the last floating pane body row visible above the border", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-footer-test");
     const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
@@ -877,6 +1174,12 @@ describe("Shell", () => {
       await testSetup!.renderOnce();
     });
 
-    expect(testSetup.captureCharFrame()).toContain("Footer Probe");
+    const frame = testSetup.captureCharFrame();
+    const lines = frame.split("\n");
+
+    expect(frame).toContain("Footer Probe");
+    expect(lines[8]).toContain("Footer Probe");
+    expect(lines[9]).not.toContain("Footer Probe");
+    expect(lines[9]).toContain("└───────────────────────────");
   });
 });