gloomberb 0.5.1 → 0.6.1

package/src/plugins/ibkr/trading-pane.tsx

@@ -1,17 +1,24 @@
-import { TextAttributes } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
-import { useDialog } from "@opentui-ui/dialog/react";
-import { useCallback, useEffect } from "react";
+import { Box, ScrollBox, Text } from "../../ui";
+import { TextAttributes } from "../../ui";
+import { usePaneFooter } from "../../components";
+import { useShortcut } from "../../react/input";
+import { useDialog } from "../../ui/dialog";
+import { useCallback, useEffect, useRef } from "react";
 import { resolveTickerFinancialsForInstrument } from "../../market-data/coordinator";
 import { instrumentFromTicker } from "../../market-data/request-types";
-import { useAppState, usePaneCollection, usePaneInstanceId } from "../../state/app-context";
+import {
+  useAppDispatch,
+  useAppSelector,
+  usePaneCollection,
+  usePaneInstanceId,
+} from "../../state/app-context";
 import { colors, priceColor } from "../../theme/colors";
 import type { PaneProps } from "../../types/plugin";
 import type { Quote } from "../../types/financials";
 import { formatCurrency, padTo } from "../../utils/format";
 import { formatMarketPrice, formatMarketQuantity } from "../../utils/market-format";
 import { getBrokerInstance } from "../../utils/broker-instances";
-import { getSharedRegistry } from "../registry";
+import { usePluginPaneActions } from "../plugin-runtime";
 import { isGatewayConfigured } from "./config";
 import { ChoiceDialog } from "./dialogs";
 import { useIbkrGatewaySelection } from "./gateway-selection";
@@ -32,9 +39,13 @@ import {
 } from "./trade-utils";
 
 export function TradingPane({ focused, width, height }: PaneProps) {
-  const { state, dispatch } = useAppState();
+  const dispatch = useAppDispatch();
+  const config = useAppSelector((state) => state.config);
+  const brokerAccounts = useAppSelector((state) => state.brokerAccounts);
+  const tickers = useAppSelector((state) => state.tickers);
   const paneId = usePaneInstanceId();
   const { collectionId } = usePaneCollection(paneId);
+  const { selectTicker, switchTab, switchPanel } = usePluginPaneActions();
   const dialog = useDialog();
   const tradeState = useTradingPaneState();
   const {
@@ -49,8 +60,8 @@ export function TradingPane({ focused, width, height }: PaneProps) {
     availableAccounts,
     gatewayRequiredMessage,
   } = useIbkrGatewaySelection(
-    state.config,
-    state.brokerAccounts,
+    config,
+    brokerAccounts,
     collectionId,
     tradeState.brokerInstanceId,
   );
@@ -96,7 +107,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
   useEffect(() => {
     if (!isGatewayMode || availableAccounts.length === 0 || tradeState.accountId || !selectedInstance) return;
     const inferred = inferDraftAccountId(
-      state.config,
+      config,
       collectionId,
       availableAccounts,
       selectedInstance.id,
@@ -105,7 +116,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
     if (inferred) {
       updateTradingPaneState({ accountId: inferred });
     }
-  }, [isGatewayMode, availableAccounts, tradeState.accountId, state.config, collectionId, selectedInstance]);
+  }, [isGatewayMode, availableAccounts, tradeState.accountId, config, collectionId, selectedInstance]);
 
   const refresh = useCallback(async () => {
     if (!selectedInstance || !normalizedConfig || !isGatewayMode || !isGatewayConfigured(selectedInstance.config)) {
@@ -117,7 +128,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
       setTradingBusy(true);
       await refreshGatewayData(selectedInstance);
       const inferred = inferDraftAccountId(
-        state.config,
+        config,
         collectionId,
         availableAccounts,
         selectedInstance.id,
@@ -136,7 +147,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
     selectedInstance,
     normalizedConfig,
     isGatewayMode,
-    state.config,
+    config,
     collectionId,
     availableAccounts,
     tradeState.accountId,
@@ -165,13 +176,13 @@ export function TradingPane({ focused, width, height }: PaneProps) {
           choices={gatewayInstances.map((instance) => ({
             id: instance.id,
             label: instance.label,
-            desc: "Gateway / TWS",
+            description: "Gateway / TWS",
           }))}
         />
       ),
     });
     if (!selected) return;
-    const instance = getBrokerInstance(state.config.brokerInstances, selected);
+    const instance = getBrokerInstance(config.brokerInstances, selected);
     if (!instance) return;
     updateTradingPaneState({
       brokerInstanceId: instance.id,
@@ -181,7 +192,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
       lastError: undefined,
       lastInfo: undefined,
     });
-  }, [dialog, gatewayInstances, lockedBrokerInstanceId, state.config.brokerInstances]);
+  }, [dialog, gatewayInstances, lockedBrokerInstanceId, config.brokerInstances]);
 
   const chooseAccount = useCallback(async () => {
     if (!selectedInstance || !normalizedConfig || !gatewayService || !isGatewayMode) return;
@@ -190,7 +201,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
     }
 
     const nextAccounts = getKnownIbkrAccounts(
-      state.brokerAccounts,
+      brokerAccounts,
       selectedInstance.id,
       gatewayService.getSnapshot().accounts,
     );
@@ -207,14 +218,14 @@ export function TradingPane({ focused, width, height }: PaneProps) {
           choices={nextAccounts.map((account) => ({
             id: account.accountId,
             label: `${selectedInstance.label} → ${account.accountId}`,
-            desc: `${formatCurrency(account.netLiquidation || 0, account.currency || "USD")} net liq`,
+            description: `${formatCurrency(account.netLiquidation || 0, account.currency || "USD")} net liq`,
           }))}
         />
       ),
     });
     if (!selected) return;
     updateTradingPaneState({ accountId: selected });
-  }, [dialog, selectedInstance, normalizedConfig, gatewayService, isGatewayMode, availableAccounts, refresh]);
+  }, [availableAccounts, brokerAccounts, dialog, gatewayService, isGatewayMode, normalizedConfig, refresh, selectedInstance]);
 
   const cancelSelectedOrder = useCallback(async () => {
     if (!selectedOrder || !selectedInstance || !normalizedConfig || !gatewayService || !isGatewayMode) return;
@@ -232,8 +243,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
 
   const openSelectedOrder = useCallback(() => {
     if (!selectedOrder) return;
-    const registry = getSharedRegistry();
-    const ticker = findTickerForOrder(selectedOrder, state.tickers);
+    const ticker = findTickerForOrder(selectedOrder, tickers);
     if (!ticker) {
       setTradingMessage(undefined, `No local ticker exists for ${selectedOrder.contract.localSymbol || selectedOrder.contract.symbol}.`);
       return;
@@ -245,12 +255,43 @@ export function TradingPane({ focused, width, height }: PaneProps) {
       lastInfo: `Loaded order ${selectedOrder.orderId} into ${ticker.metadata.ticker}.`,
       lastError: undefined,
     });
-    registry?.selectTickerFn(ticker.metadata.ticker, paneId);
-    registry?.switchTabFn("ibkr-trade", paneId);
-    registry?.switchPanelFn("right");
-  }, [selectedOrder, state.tickers, paneId]);
+    selectTicker(ticker.metadata.ticker, paneId);
+    switchTab("ibkr-trade", paneId);
+    switchPanel("right");
+  }, [selectedOrder, tickers, paneId, selectTicker, switchTab, switchPanel]);
+
+  const footerActionsRef = useRef<{
+    chooseBrokerInstance: () => Promise<void>;
+    chooseAccount: () => Promise<void>;
+    openSelectedOrder: () => void;
+    cancelSelectedOrder: () => Promise<void>;
+    refresh: () => Promise<void>;
+  }>({
+    chooseBrokerInstance: async () => {},
+    chooseAccount: async () => {},
+    openSelectedOrder: () => {},
+    cancelSelectedOrder: async () => {},
+    refresh: async () => {},
+  });
+  footerActionsRef.current = {
+    chooseBrokerInstance,
+    chooseAccount,
+    openSelectedOrder,
+    cancelSelectedOrder,
+    refresh,
+  };
+
+  usePaneFooter("ibkr-trading-pane", () => ({
+    hints: [
+      { id: "profile", key: "i", label: "profile", onPress: () => footerActionsRef.current.chooseBrokerInstance().catch(() => {}) },
+      { id: "account", key: "a", label: "ccount", onPress: () => footerActionsRef.current.chooseAccount().catch(() => {}) },
+      { id: "open", key: "m", label: "open", onPress: () => footerActionsRef.current.openSelectedOrder() },
+      { id: "cancel", key: "c", label: "ancel", onPress: () => footerActionsRef.current.cancelSelectedOrder().catch(() => {}) },
+      { id: "refresh", key: "r", label: "efresh", onPress: () => footerActionsRef.current.refresh().catch(() => {}) },
+    ],
+  }), []);
 
-  useKeyboard((event) => {
+  useShortcut((event) => {
     if (!focused) return;
     event.stopPropagation?.();
 
@@ -290,18 +331,18 @@ export function TradingPane({ focused, width, height }: PaneProps) {
   const activeAccount = availableAccounts.find((account) => account.accountId === (tradeState.accountId || ""));
   const orderPanelWidth = Math.max(36, Math.floor(width * 0.6));
   const listPanelWidth = Math.max(24, width - orderPanelWidth - 1);
-  const listHeight = Math.max(4, height - 6);
+  const listHeight = Math.max(4, height - 4);
   const getOrderQuote = useCallback((symbol: string): Quote | null => {
-    const ticker = state.tickers.get(symbol) ?? null;
+    const ticker = tickers.get(symbol) ?? null;
     const instrument = instrumentFromTicker(ticker, symbol);
     return instrument ? resolveTickerFinancialsForInstrument(instrument)?.quote ?? null : null;
-  }, [state.tickers]);
+  }, [tickers]);
 
   return (
-    <box flexDirection="column" flexGrow={1} paddingX={1}>
-      <box flexDirection="row" height={1}>
-        <box flexGrow={1}>
-          <text fg={
+    <Box flexDirection="column" flexGrow={1} paddingX={1}>
+      <Box flexDirection="row" height={1}>
+        <Box flexGrow={1}>
+          <Text fg={
             displayStatusState === "connected"
               ? colors.positive
               : displayStatusState === "error"
@@ -311,13 +352,13 @@ export function TradingPane({ focused, width, height }: PaneProps) {
             {selectedInstance
               ? `${selectedInstance.label} · ${isGatewayMode ? "Gateway" : "Flex"} · ${displayStatusState}`
               : "IBKR · no profile selected"}
-          </text>
-        </box>
-        {tradeState.busy && <text fg={colors.textDim}>Working…</text>}
-      </box>
+          </Text>
+        </Box>
+        {tradeState.busy && <Text fg={colors.textDim}>Working…</Text>}
+      </Box>
 
-      <box height={1}>
-        <text fg={colors.textDim}>
+      <Box height={1}>
+        <Text fg={colors.textDim}>
           {activeAccount
             ? `${selectedInstance?.label || "IBKR"} → ${activeAccount.accountId} · ${formatCurrency(activeAccount.netLiquidation || 0, activeAccount.currency || "USD")} net liq`
             : isGatewayMode
@@ -327,29 +368,29 @@ export function TradingPane({ focused, width, height }: PaneProps) {
               : gatewayInstances.length > 0
                 ? "Choose a Gateway / TWS profile"
                 : "Connect an IBKR profile"}
-        </text>
-      </box>
+        </Text>
+      </Box>
 
-      <box height={1}>
-        <text fg={tradeState.lastError ? colors.negative : colors.textDim}>
+      <Box height={1}>
+        <Text fg={tradeState.lastError ? colors.negative : colors.textDim}>
           {tradeState.lastError
             || gatewaySnapshot.status.message
             || gatewaySnapshot.lastError
             || tradeState.lastInfo
             || "Use this console for profile status, accounts, open orders, and executions."}
-        </text>
-      </box>
+        </Text>
+      </Box>
 
-      <box height={1}>
-        <text fg={colors.border}>{"─".repeat(Math.max(1, width - 2))}</text>
-      </box>
+      <Box height={1}>
+        <Text fg={colors.border}>{"─".repeat(Math.max(1, width - 2))}</Text>
+      </Box>
 
-      <box flexDirection="row" height={listHeight}>
-        <box width={orderPanelWidth} flexDirection="column">
-          <text attributes={TextAttributes.BOLD} fg={colors.textBright}>Open Orders</text>
-          <scrollbox flexGrow={1} scrollY>
+      <Box flexDirection="row" height={listHeight}>
+        <Box width={orderPanelWidth} flexDirection="column">
+          <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>Open Orders</Text>
+          <ScrollBox flexGrow={1} scrollY>
             {gatewaySnapshot.openOrders.length === 0 ? (
-              <text fg={colors.textDim}>No open IBKR orders.</text>
+              <Text fg={colors.textDim}>No open IBKR orders.</Text>
             ) : (
               gatewaySnapshot.openOrders.map((order, index) => {
                 const selected = index === tradeState.selectedOpenOrderIndex;
@@ -363,7 +404,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
                     ? formatMarketPrice(order.stopPrice, { contractSecType: order.contract.secType, maxWidth: 9 })
                     : "MKT";
                 return (
-                  <box
+                  <Box
                     key={order.orderId}
                     backgroundColor={selected ? colors.selected : colors.bg}
                     onMouseDown={() => {
@@ -374,7 +415,7 @@ export function TradingPane({ focused, width, height }: PaneProps) {
                       }
                     }}
                   >
-                    <text fg={selected ? colors.text : colors.textDim}>
+                    <Text fg={selected ? colors.text : colors.textDim}>
                       {selected ? "▸ " : "  "}
                       {padTo(String(order.orderId), 6)}
                       {padTo(order.action, 5)}
@@ -385,55 +426,48 @@ export function TradingPane({ focused, width, height }: PaneProps) {
                       {padTo(orderPrice, 9)}
                       {padTo(`B:${bidStr}`, 10)}
                       {`A:${askStr}`}
-                    </text>
-                  </box>
+                    </Text>
+                  </Box>
                 );
               })
             )}
-          </scrollbox>
-        </box>
+          </ScrollBox>
+        </Box>
 
-        <box width={1}>
-          <text fg={colors.border}>│</text>
-        </box>
+        <Box width={1}>
+          <Text fg={colors.border}>│</Text>
+        </Box>
 
-        <box width={listPanelWidth} flexDirection="column">
-          <text attributes={TextAttributes.BOLD} fg={colors.textBright}>Executions</text>
-          <scrollbox flexGrow={1} scrollY>
+        <Box width={listPanelWidth} flexDirection="column">
+          <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>Executions</Text>
+          <ScrollBox flexGrow={1} scrollY>
             {gatewaySnapshot.executions.length === 0 ? (
-              <text fg={colors.textDim}>No recent executions.</text>
+              <Text fg={colors.textDim}>No recent executions.</Text>
             ) : (
               gatewaySnapshot.executions.slice(0, 20).map((execution) => (
-                <box
+                <Box
                   key={execution.execId}
                   onMouseDown={() => {
                     const symbol = execution.contract.symbol;
-                    if (symbol && state.tickers.has(symbol)) {
-                      getSharedRegistry()?.selectTickerFn(symbol, paneId);
+                    if (symbol && tickers.has(symbol)) {
+                      selectTicker(symbol, paneId);
                     }
                   }}
                 >
-                  <text fg={priceColor(execution.side.toUpperCase() === "BOT" ? 1 : -1)}>
+                  <Text fg={priceColor(execution.side.toUpperCase() === "BOT" ? 1 : -1)}>
                     {padTo(execution.side, 5)}
                     {padTo(execution.contract.localSymbol || execution.contract.symbol, 18)}
                     {padTo(formatMarketQuantity(execution.shares, { contractSecType: execution.contract.secType, maxWidth: 6 }), 6, "right")}
                     {" "}
                     {formatMarketPrice(execution.price, { contractSecType: execution.contract.secType })}
-                  </text>
-                </box>
+                  </Text>
+                </Box>
               ))
             )}
-          </scrollbox>
-        </box>
-      </box>
+          </ScrollBox>
+        </Box>
+      </Box>
 
-      <box flexDirection="row" height={1}>
-        <text fg={colors.textMuted} onMouseDown={() => chooseBrokerInstance().catch(() => {})}>{" [i] Profile "}</text>
-        <text fg={colors.textMuted} onMouseDown={() => chooseAccount().catch(() => {})}>{" [a] Account "}</text>
-        <text fg={colors.textMuted} onMouseDown={() => openSelectedOrder()}>{" [Enter] Open "}</text>
-        <text fg={colors.textMuted} onMouseDown={() => cancelSelectedOrder().catch(() => {})}>{" [c] Cancel "}</text>
-        <text fg={colors.textMuted} onMouseDown={() => refresh().catch(() => {})}>{" [r] Refresh "}</text>
-      </box>
-    </box>
+    </Box>
   );
 }

package/src/plugins/pane-manager.test.ts

@@ -19,6 +19,7 @@ describe("pane-manager split-tree drops", () => {
       ...cloneLayout(config.layout),
       dockRoot: null,
       floating: [],
+      detached: [],
       instances: [],
     };
     const floatingOnly = addPaneFloating(layout, createPaneInstance("chat"), 120, 30);
@@ -71,7 +72,7 @@ describe("pane-manager split-tree drops", () => {
     const next = gridlockAllPanes(layout);
 
     expect(next.floating).toHaveLength(0);
-    expect(getDockedPaneIds(next)).toHaveLength(5);
+    expect(getDockedPaneIds(next)).toHaveLength(layout.instances.length);
   });
 
   test("gridlock infers a matching tiled layout from arranged windows", () => {
@@ -80,6 +81,7 @@ describe("pane-manager split-tree drops", () => {
       ...cloneLayout(config.layout),
       dockRoot: null,
       floating: [],
+      detached: [],
       instances: [],
     };
     const leftPane = createPaneInstance("chat");

package/src/plugins/pane-manager.ts

@@ -81,6 +81,11 @@ export interface DockDividerLayout {
   ratio: number;
 }
 
+export interface DockGeometryOptions {
+  precise?: boolean;
+  dividerSize?: number;
+}
+
 export interface LayoutSimulation {
   layout: LayoutConfig;
   previewRect: LayoutBounds | null;
@@ -202,9 +207,24 @@ function removeNodeAtPath(node: DockLayoutNode | null, path: Array<0 | 1>): Dock
 
 function normalizeFloatingEntries(layout: LayoutConfig): FloatingPaneEntry[] {
   const dockedIds = new Set(getDockedInstanceIds(layout.dockRoot));
+  const detachedIds = new Set((layout.detached ?? []).map((entry) => entry.instanceId));
   const seen = new Set<string>();
   return layout.floating
-    .filter((entry) => !dockedIds.has(entry.instanceId))
+    .filter((entry) => !dockedIds.has(entry.instanceId) && !detachedIds.has(entry.instanceId))
+    .filter((entry) => {
+      if (seen.has(entry.instanceId)) return false;
+      seen.add(entry.instanceId);
+      return true;
+    })
+    .map((entry) => ({ ...entry }));
+}
+
+function normalizeDetachedEntries(layout: LayoutConfig) {
+  const dockedIds = new Set(getDockedInstanceIds(layout.dockRoot));
+  const floatingIds = new Set(layout.floating.map((entry) => entry.instanceId));
+  const seen = new Set<string>();
+  return (layout.detached ?? [])
+    .filter((entry) => !dockedIds.has(entry.instanceId) && !floatingIds.has(entry.instanceId))
     .filter((entry) => {
       if (seen.has(entry.instanceId)) return false;
       seen.add(entry.instanceId);
@@ -249,6 +269,7 @@ function captureDockedMemory(layout: LayoutConfig, dockRoot: DockLayoutNode | nu
 function capturePlacementMemory(layout: LayoutConfig): LayoutConfig {
   const dockedMemory = captureDockedMemory(layout, layout.dockRoot);
   const floatingById = new Map(layout.floating.map((entry) => [entry.instanceId, entry] as const));
+  const detachedById = new Map((layout.detached ?? []).map((entry) => [entry.instanceId, entry] as const));
 
   return {
     ...layout,
@@ -262,12 +283,20 @@ function capturePlacementMemory(layout: LayoutConfig): LayoutConfig {
         width: floating.width,
         height: floating.height,
       } : previous.floating;
+      const detached = detachedById.get(instance.instanceId);
+      const nextDetached = detached ? {
+        x: detached.x,
+        y: detached.y,
+        width: detached.width,
+        height: detached.height,
+      } : previous.detached;
 
       return {
         ...instance,
-        placementMemory: nextDocked || nextFloating ? {
+        placementMemory: nextDocked || nextFloating || nextDetached ? {
           docked: nextDocked,
           floating: nextFloating,
+          detached: nextDetached,
         } : undefined,
       };
     }),
@@ -278,6 +307,7 @@ function finalizeLayout(layout: LayoutConfig): LayoutConfig {
   const normalized = normalizePaneLayout({
     ...layout,
     floating: normalizeFloatingEntries(layout),
+    detached: normalizeDetachedEntries(layout),
   });
   return capturePlacementMemory(normalized);
 }
@@ -313,6 +343,7 @@ function detachPane(layout: LayoutConfig, instanceId: string): LayoutConfig {
   return {
     ...removeDockedLeaf(layout, instanceId),
     floating: layout.floating.filter((entry) => entry.instanceId !== instanceId),
+    detached: (layout.detached ?? []).filter((entry) => entry.instanceId !== instanceId),
   };
 }
 
@@ -373,7 +404,19 @@ function scoreDirectionalCandidate(
   return primaryDelta * 1000 + secondaryDelta;
 }
 
-function resolveSplitSizes(total: number, ratio: number, minSize: number): [number, number] {
+function resolveSplitSizes(total: number, ratio: number, minSize: number, precise = false): [number, number] {
+  if (precise) {
+    if (total <= 0) return [0, 0];
+    if (total <= 1) return [total, 0];
+    if (total < minSize * 2) {
+      const first = total / 2;
+      return [first, total - first];
+    }
+    const preferred = total * clampRatio(ratio);
+    const first = Math.max(minSize, Math.min(total - minSize, preferred));
+    return [first, total - first];
+  }
+
   if (total <= 1) return [1, 0];
   if (total < minSize * 2) {
     const first = Math.max(1, Math.floor(total / 2));
@@ -390,6 +433,7 @@ function collectDockGeometry(
   path: Array<0 | 1> = [],
   leaves: DockLeafLayout[] = [],
   dividers: DockDividerLayout[] = [],
+  options: DockGeometryOptions = {},
 ): { leaves: DockLeafLayout[]; dividers: DockDividerLayout[] } {
   if (!node) return { leaves, dividers };
   if (node.kind === "pane") {
@@ -397,8 +441,11 @@ function collectDockGeometry(
     return { leaves, dividers };
   }
 
+  const precise = options.precise === true;
+  const dividerSize = options.dividerSize ?? 1;
+
   if (node.axis === "horizontal") {
-    const [firstWidth, secondWidth] = resolveSplitSizes(bounds.width, node.ratio, MIN_PANE_WIDTH);
+    const [firstWidth, secondWidth] = resolveSplitSizes(bounds.width, node.ratio, MIN_PANE_WIDTH, precise);
     const firstBounds = { x: bounds.x, y: bounds.y, width: firstWidth, height: bounds.height };
     const secondBounds = { x: bounds.x + firstWidth, y: bounds.y, width: secondWidth, height: bounds.height };
     dividers.push({
@@ -407,18 +454,18 @@ function collectDockGeometry(
       bounds: { ...bounds },
       ratio: node.ratio,
       rect: {
-        x: bounds.x + firstWidth - 1,
+        x: precise ? bounds.x + firstWidth - (dividerSize / 2) : bounds.x + firstWidth - 1,
         y: bounds.y,
-        width: 1,
+        width: dividerSize,
         height: bounds.height,
       },
     });
-    collectDockGeometry(node.first, firstBounds, [...path, 0], leaves, dividers);
-    collectDockGeometry(node.second, secondBounds, [...path, 1], leaves, dividers);
+    collectDockGeometry(node.first, firstBounds, [...path, 0], leaves, dividers, options);
+    collectDockGeometry(node.second, secondBounds, [...path, 1], leaves, dividers, options);
     return { leaves, dividers };
   }
 
-  const [firstHeight, secondHeight] = resolveSplitSizes(bounds.height, node.ratio, MIN_DOCKED_HEIGHT);
+  const [firstHeight, secondHeight] = resolveSplitSizes(bounds.height, node.ratio, MIN_DOCKED_HEIGHT, precise);
   const firstBounds = { x: bounds.x, y: bounds.y, width: bounds.width, height: firstHeight };
   const secondBounds = { x: bounds.x, y: bounds.y + firstHeight, width: bounds.width, height: secondHeight };
   dividers.push({
@@ -428,13 +475,13 @@ function collectDockGeometry(
     ratio: node.ratio,
     rect: {
       x: bounds.x,
-      y: bounds.y + firstHeight - 1,
+      y: precise ? bounds.y + firstHeight - (dividerSize / 2) : bounds.y + firstHeight - 1,
       width: bounds.width,
-      height: 1,
+      height: dividerSize,
     },
   });
-  collectDockGeometry(node.first, firstBounds, [...path, 0], leaves, dividers);
-  collectDockGeometry(node.second, secondBounds, [...path, 1], leaves, dividers);
+  collectDockGeometry(node.first, firstBounds, [...path, 0], leaves, dividers, options);
+  collectDockGeometry(node.second, secondBounds, [...path, 1], leaves, dividers, options);
   return { leaves, dividers };
 }
 
@@ -593,12 +640,12 @@ export function findDockLeaf(layout: LayoutConfig, instanceId: string): DockLeaf
   return traverseDockLeaves(layout).find((entry) => entry.instanceId === instanceId) ?? null;
 }
 
-export function getDockLeafLayouts(layout: LayoutConfig, bounds: LayoutBounds): DockLeafLayout[] {
-  return collectDockGeometry(layout.dockRoot, bounds).leaves;
+export function getDockLeafLayouts(layout: LayoutConfig, bounds: LayoutBounds, options?: DockGeometryOptions): DockLeafLayout[] {
+  return collectDockGeometry(layout.dockRoot, bounds, [], [], [], options).leaves;
 }
 
-export function getDockDividerLayouts(layout: LayoutConfig, bounds: LayoutBounds): DockDividerLayout[] {
-  return collectDockGeometry(layout.dockRoot, bounds).dividers;
+export function getDockDividerLayouts(layout: LayoutConfig, bounds: LayoutBounds, options?: DockGeometryOptions): DockDividerLayout[] {
+  return collectDockGeometry(layout.dockRoot, bounds, [], [], [], options).dividers;
 }
 
 export function getLeafRect(layout: LayoutConfig, instanceId: string, bounds: LayoutBounds): LayoutBounds | null {
@@ -636,6 +683,27 @@ export function resolveFloating(
   return result;
 }
 
+export function detachPaneToFrame(
+  layout: LayoutConfig,
+  instanceId: string,
+  rect: Pick<LayoutConfig["detached"][number], "x" | "y" | "width" | "height">,
+): LayoutConfig {
+  const base = detachPane(layout, instanceId);
+  return finalizeLayout({
+    ...base,
+    detached: [
+      ...base.detached.filter((entry) => entry.instanceId !== instanceId),
+      {
+        instanceId,
+        x: Math.max(0, Math.round(rect.x)),
+        y: Math.max(0, Math.round(rect.y)),
+        width: Math.max(1, Math.round(rect.width)),
+        height: Math.max(1, Math.round(rect.height)),
+      },
+    ],
+  });
+}
+
 export function floatAtRect(layout: LayoutConfig, instanceId: string, rect: FloatingRect): LayoutConfig {
   const base = detachPane(layout, instanceId);
   return finalizeLayout({
@@ -900,6 +968,7 @@ export function removePane(layout: LayoutConfig, instanceId: string): LayoutConf
       ...layout,
       dockRoot: removeDockedLeaf(layout, instanceId).dockRoot,
       floating: layout.floating.filter((entry) => entry.instanceId !== instanceId),
+      detached: (layout.detached ?? []).filter((entry) => entry.instanceId !== instanceId),
     },
     [instanceId],
   ));
@@ -907,7 +976,12 @@ export function removePane(layout: LayoutConfig, instanceId: string): LayoutConf
 
 export function isPaneInLayout(layout: LayoutConfig, instanceId: string): boolean {
   return !!findDockLeaf(layout, instanceId)
-    || layout.floating.some((entry) => entry.instanceId === instanceId);
+    || layout.floating.some((entry) => entry.instanceId === instanceId)
+    || (layout.detached ?? []).some((entry) => entry.instanceId === instanceId);
+}
+
+export function isPaneDetached(layout: LayoutConfig, instanceId: string): boolean {
+  return (layout.detached ?? []).some((entry) => entry.instanceId === instanceId);
 }
 
 export function isPaneDocked(layout: LayoutConfig, instanceId: string): boolean {
@@ -933,7 +1007,7 @@ export function bringToFront(layout: LayoutConfig, instanceId: string): LayoutCo
 
 export function getLayoutPreview(layout: LayoutConfig): string {
   const geometry = getDockLeafLayouts(layout, { x: 0, y: 0, width: 120, height: 40 });
-  return `${countColumnsFromGeometry(geometry)}c / ${geometry.length}d / ${layout.floating.length}f`;
+  return `${countColumnsFromGeometry(geometry)}c / ${geometry.length}d / ${layout.floating.length}f / ${(layout.detached ?? []).length}x`;
 }
 
 export function gridlockAllPanes(