gloomberb 0.7.5 → 0.8.1

package/src/components/layout/pane/keyboard-scroll.test.tsx

@@ -0,0 +1,146 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useReducer, type ReactNode } from "react";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import { AppContext, appReducer, createInitialState } from "../../../state/app/context";
+import { Box, ScrollBox, Text, type ScrollBoxRenderable } from "../../../ui";
+import { createDefaultConfig } from "../../../types/config";
+import type { PaneProps } from "../../../types/plugin";
+import { PaneContent } from "./content";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let scrollRef: ScrollBoxRenderable | null = null;
+let hiddenScrollRef: ScrollBoxRenderable | null = null;
+
+afterEach(() => {
+  if (testSetup) {
+    act(() => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  scrollRef = null;
+  hiddenScrollRef = null;
+});
+
+function emitDownArrow() {
+  return act(async () => {
+    testSetup!.mockInput.pressArrow("down");
+    await testSetup!.renderOnce();
+  });
+}
+
+async function renderHarness(component: ReactNode) {
+  await act(async () => {
+    testSetup = await testRender(component, { width: 30, height: 5 });
+  });
+  await act(async () => {
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+  });
+}
+
+function LongScrollPane({ width, height }: PaneProps) {
+  return (
+    <Box width={width} height={height}>
+      <ScrollBox
+        ref={(node) => {
+          scrollRef = node;
+        }}
+        height={height}
+        scrollY
+        focusable={false}
+      >
+        <Box flexDirection="column">
+          {Array.from({ length: 20 }, (_, index) => (
+            <Box key={index} height={1}>
+              <Text>{`Row ${index}`}</Text>
+            </Box>
+          ))}
+        </Box>
+      </ScrollBox>
+    </Box>
+  );
+}
+
+function HiddenMountedTabPane({ width, height }: PaneProps) {
+  const renderRows = () => Array.from({ length: 20 }, (_, index) => (
+    <Box key={index} height={1}>
+      <Text>{`Tab row ${index}`}</Text>
+    </Box>
+  ));
+
+  return (
+    <Box width={width} height={height}>
+      <ScrollBox
+        ref={(node) => {
+          scrollRef = node;
+        }}
+        height={height}
+        scrollY
+        focusable={false}
+      >
+        <Box flexDirection="column">{renderRows()}</Box>
+      </ScrollBox>
+      <Box visible={false} height={height}>
+        <ScrollBox
+          ref={(node) => {
+            hiddenScrollRef = node;
+          }}
+          height={height}
+          scrollY
+          focusable={false}
+        >
+          <Box flexDirection="column">{renderRows()}</Box>
+        </ScrollBox>
+      </Box>
+    </Box>
+  );
+}
+
+function Harness({
+  component = LongScrollPane,
+  focused = true,
+}: {
+  component?: (props: PaneProps) => ReactNode;
+  focused?: boolean;
+}) {
+  const initialState = createInitialState(createDefaultConfig("/tmp/gloomberb-pane-keyboard-scroll-test"));
+  const [state, dispatch] = useReducer(appReducer, initialState);
+
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <PaneContent
+        component={component}
+        paneId="test-pane:main"
+        paneType="test-pane"
+        focused={focused}
+        width={30}
+        height={5}
+      />
+    </AppContext>
+  );
+}
+
+describe("pane keyboard scrolling", () => {
+  test("scrolls the focused pane's vertical scrollbox with arrow keys", async () => {
+    await renderHarness(<Harness />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(3);
+  });
+
+  test("ignores mounted scrollboxes inside hidden tabs", async () => {
+    await renderHarness(<Harness component={HiddenMountedTabPane} />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    expect(hiddenScrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(3);
+    expect(hiddenScrollRef?.scrollTop).toBe(0);
+  });
+
+});

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

@@ -0,0 +1,66 @@
+
+const PANE_HEADER_ROWS = 1;
+const PANE_FOOTER_ROWS = 1;
+
+const NATIVE_PANE_BODY_LAYOUT_PROPS = {
+  flexGrow: 1,
+  flexBasis: 0,
+  minHeight: 0,
+} as const;
+
+export function shouldReservePaneFooter(nativePaneChrome: boolean | undefined, showFooter: boolean): boolean {
+  return !nativePaneChrome || showFooter;
+}
+
+function resolvePaneBodyHeight({
+  height,
+  nativePaneChrome,
+  reserveFooter = true,
+  headerRows = PANE_HEADER_ROWS,
+}: {
+  height: number;
+  nativePaneChrome?: boolean;
+  reserveFooter?: boolean;
+  headerRows?: number;
+}): number {
+  const finiteHeight = Number.isFinite(height) ? height : 1;
+  const normalizedHeight = nativePaneChrome ? finiteHeight : Math.max(1, Math.floor(finiteHeight));
+  return Math.max(1, normalizedHeight - headerRows - (reserveFooter ? PANE_FOOTER_ROWS : 0));
+}
+
+function getPaneBodyLayoutProps(nativePaneChrome: boolean | undefined, bodyHeight: number | undefined) {
+  if (nativePaneChrome) return NATIVE_PANE_BODY_LAYOUT_PROPS;
+  return {
+    height: bodyHeight,
+    flexGrow: bodyHeight == null ? 1 : 0,
+    flexBasis: bodyHeight == null ? 0 : undefined,
+  };
+}
+
+export function resolvePaneBodyFrame({
+  width,
+  height,
+  nativePaneChrome,
+  reserveFooter = true,
+  headerRows = PANE_HEADER_ROWS,
+}: {
+  width?: number;
+  height?: number;
+  nativePaneChrome?: boolean;
+  reserveFooter?: boolean;
+  headerRows?: number;
+}) {
+  const bodyHeight = typeof height === "number"
+    ? resolvePaneBodyHeight({ height, nativePaneChrome, reserveFooter, headerRows })
+    : undefined;
+  return {
+    width: typeof width === "number" ? resolvePaneBodyWidth(width, nativePaneChrome) : undefined,
+    height: bodyHeight,
+    layoutProps: getPaneBodyLayoutProps(nativePaneChrome, bodyHeight),
+  };
+}
+
+function resolvePaneBodyWidth(width: number, nativePaneChrome: boolean | undefined): number {
+  const finiteWidth = Number.isFinite(width) ? width : 1;
+  return nativePaneChrome ? Math.max(1, finiteWidth) : Math.max(1, Math.floor(finiteWidth));
+}

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

@@ -0,0 +1,38 @@
+import { resolveCollectionForPane, resolveTickerForPane, type AppState } from "../../../state/app/context";
+import { TICKER_RESEARCH_PANE_ID, 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") {
+    const channelId = typeof instance.settings?.channelId === "string" && instance.settings.channelId.trim()
+      ? instance.settings.channelId.trim()
+      : "everyone";
+    return instance.title ?? `#${channelId}`;
+  }
+
+  if (instance.paneId === TICKER_RESEARCH_PANE_ID) {
+    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/shell/action-menu-overlay.tsx

@@ -0,0 +1,72 @@
+import { Box, Text } from "../../../ui";
+import { colors } from "../../../theme/colors";
+import { MENU_Z_INDEX, truncateMenuText } from "./menu";
+
+export interface ActionMenuState {
+  paneId: string;
+  x: number;
+  y: number;
+  width: number;
+  items: Array<{ id: string; label: string; accelerator?: string; action: () => void }>;
+}
+
+export function ShellActionMenuOverlay({
+  menuState,
+  hoveredMenuItemId,
+  onClose,
+  onHoverItem,
+}: {
+  menuState: ActionMenuState | null;
+  hoveredMenuItemId: string | null;
+  onClose: () => void;
+  onHoverItem: (itemId: string) => void;
+}) {
+  if (!menuState) return null;
+
+  return (
+    <Box
+      position="absolute"
+      left={menuState.x}
+      top={menuState.y}
+      width={menuState.width}
+      height={menuState.items.length + 2}
+      backgroundColor={colors.panel}
+      border
+      borderStyle="single"
+      borderColor={colors.borderFocused}
+      zIndex={MENU_Z_INDEX}
+      flexDirection="column"
+    >
+      {menuState.items.map((item) => {
+        const hovered = hoveredMenuItemId === item.id;
+        const innerWidth = Math.max(1, menuState.width - 2);
+        const accelerator = item.accelerator ?? "";
+        const acceleratorWidth = accelerator.length;
+        const labelWidth = accelerator ? Math.max(1, innerWidth - acceleratorWidth - 1) : innerWidth;
+        const label = truncateMenuText(item.label, labelWidth);
+        const spacer = accelerator ? " ".repeat(Math.max(1, innerWidth - label.length - acceleratorWidth)) : "";
+        const line = truncateMenuText(`${label}${spacer}${accelerator}`, innerWidth).padEnd(innerWidth, " ");
+        return (
+          <Box
+            key={item.id}
+            height={1}
+            width={innerWidth}
+            backgroundColor={hovered ? colors.selected : colors.panel}
+            onMouseMove={() => onHoverItem(item.id)}
+            onMouseDown={(mouseEvent: any) => {
+              mouseEvent.stopPropagation();
+              mouseEvent.preventDefault();
+              onClose();
+              item.action();
+            }}
+            data-gloom-interactive="true"
+          >
+            <Text fg={hovered ? colors.selectedText : colors.text}>
+              {line}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/components/layout/shell/active-drag.ts

@@ -0,0 +1,221 @@
+import { useCallback, type Dispatch } from "react";
+import {
+  floatAtRect,
+  getRememberedFloatingRect,
+  resizeSplitAtPath,
+  simulateDrop,
+  type DockLeafLayout,
+  type DropTarget,
+  type LayoutBounds,
+  type ResolvedPane,
+} from "../../../plugins/pane-manager";
+import type { AppAction } from "../../../state/app/context";
+import type { LayoutConfig } from "../../../types/config";
+import {
+  finalizePaneDragRelease,
+  isMeaningfulPaneDrag,
+  makeSnapGuides,
+  PANE_DRAG_THRESHOLD,
+  pointInRect,
+  PRECISE_PANE_DRAG_THRESHOLD,
+  resolveDividerPreviewRect,
+  resolveFloatResizeRect,
+  resolveHoverOverlay,
+  resolvePaneDragFloatingRect,
+  resolveSnapGuide,
+} from "./drag";
+import type { ShellDragRuntimeState, ShellMouseEvent } from "./drag/runtime";
+import type { WindowEditState } from "../window-edit/mode";
+
+interface UseShellActiveDragOptions {
+  appHeaderHeight: number;
+  bounds: LayoutBounds;
+  contentHeight: number;
+  dispatch: Dispatch<AppAction>;
+  dockLeafLayouts: DockLeafLayout[];
+  dragRuntime: ShellDragRuntimeState;
+  focusPane: (paneId: string) => void;
+  nativePaneChrome: boolean;
+  paneMap: Map<string, ResolvedPane>;
+  persistLayout: (nextLayout: LayoutConfig, options?: { pushHistory?: boolean }) => void;
+  precisePointer: boolean | undefined;
+  snapGuides: ReturnType<typeof makeSnapGuides>;
+  updateWindowModePreviewLayout: (nextLayout: LayoutConfig, paneId?: string) => void;
+  visibleLayout: LayoutConfig;
+  width: number;
+  windowMode: WindowEditState | null;
+}
+
+export function useShellActiveDrag({
+  appHeaderHeight,
+  bounds,
+  contentHeight,
+  dispatch,
+  dockLeafLayouts,
+  dragRuntime,
+  focusPane,
+  nativePaneChrome,
+  paneMap,
+  persistLayout,
+  precisePointer,
+  snapGuides,
+  updateWindowModePreviewLayout,
+  visibleLayout,
+  width,
+  windowMode,
+}: UseShellActiveDragOptions) {
+  const {
+    dividerPreviewRef,
+    dockPreviewRef,
+    dragRef,
+    setDragCursor,
+    updateDividerPreview,
+    updateDockPreview,
+    updateDragFloatingRect,
+  } = dragRuntime;
+
+  return useCallback((event: ShellMouseEvent) => {
+    const shellY = event.y - appHeaderHeight;
+    const preciseX = event.preciseX ?? event.x;
+    const preciseShellY = (event.preciseY ?? event.y) - appHeaderHeight;
+    const hitX = precisePointer ? preciseX : event.x;
+    const hitShellY = precisePointer ? preciseShellY : shellY;
+    const dragThreshold = precisePointer ? PRECISE_PANE_DRAG_THRESHOLD : PANE_DRAG_THRESHOLD;
+    const drag = dragRef.current;
+    if (!drag) return;
+    const baseLayout = windowMode?.previewLayout ?? visibleLayout;
+
+    if (event.type === "drag") {
+      if (drag.type === "divider") {
+        const total = drag.axis === "horizontal" ? drag.bounds.width : drag.bounds.height;
+        const delta = drag.axis === "horizontal" ? preciseX - drag.startX : preciseShellY - drag.startY;
+        const nextRatio = Math.max(0.1, Math.min(0.9, drag.startRatio + (delta / Math.max(1, total))));
+        const nextRect = resolveDividerPreviewRect(drag.axis, drag.bounds, nextRatio, nativePaneChrome === true);
+        updateDividerPreview({ pathKey: drag.path.join("."), rect: nextRect, ratio: nextRatio });
+      } else if (drag.type === "pane-drag") {
+        if (!isMeaningfulPaneDrag(drag.startX, drag.startY, preciseX, preciseShellY, dragThreshold)) {
+          updateDockPreview(null);
+          setDragCursor(null);
+          if (drag.mode === "floating") {
+            updateDragFloatingRect({ paneId: drag.paneId, rect: drag.origRect });
+          }
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
+
+        const pane = paneMap.get(drag.paneId);
+        const baseRect = drag.mode === "docked"
+          ? getRememberedFloatingRect(baseLayout, drag.paneId, width, contentHeight, pane?.def)
+          : drag.origRect;
+        const nextRect = resolvePaneDragFloatingRect(drag, baseRect, preciseX, preciseShellY, width, contentHeight);
+        updateDragFloatingRect({ paneId: drag.paneId, rect: nextRect });
+        setDragCursor({ x: hitX, y: hitShellY });
+
+        const hoveredOverlay = resolveHoverOverlay(hitX, hitShellY, dockLeafLayouts, drag.paneId);
+        if (hoveredOverlay) {
+          const hoveredCell = hoveredOverlay.cells.find((cell) => pointInRect(cell.rect, hitX, hitShellY));
+          if (hoveredCell) {
+            const target: DropTarget = { kind: "leaf", targetId: hoveredOverlay.targetId, position: hoveredCell.position };
+            const simulation = simulateDrop(baseLayout, drag.paneId, target, bounds);
+            if (simulation.previewRect) {
+              updateDockPreview({ kind: "dock", target, rect: simulation.previewRect });
+            } else {
+              updateDockPreview(null);
+            }
+          } else {
+            updateDockPreview(null);
+          }
+        } else {
+          const snapGuide = resolveSnapGuide(hitX, hitShellY, snapGuides);
+          updateDockPreview(snapGuide ? { kind: "snap", position: snapGuide.position, rect: snapGuide.previewRect } : null);
+        }
+      } else if (drag.type === "float-resize") {
+        updateDragFloatingRect({
+          paneId: drag.paneId,
+          rect: resolveFloatResizeRect(drag, preciseX, preciseShellY, width, contentHeight),
+        });
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (event.type === "up" || event.type === "drag-end") {
+      if (drag.type === "divider") {
+        const preview = dividerPreviewRef.current;
+        if (preview) {
+          const nextLayout = resizeSplitAtPath(baseLayout, drag.path, preview.ratio);
+          if (windowMode) {
+            updateWindowModePreviewLayout(nextLayout);
+          } else {
+            persistLayout(nextLayout);
+          }
+        }
+        updateDividerPreview(null);
+      } else if (drag.type === "pane-drag") {
+        const movedEnough = isMeaningfulPaneDrag(drag.startX, drag.startY, preciseX, preciseShellY, dragThreshold);
+        if (!movedEnough) {
+          updateDockPreview(null);
+          setDragCursor(null);
+          updateDragFloatingRect(null);
+        } else {
+          const pane = paneMap.get(drag.paneId);
+          const baseRect = drag.mode === "docked"
+            ? getRememberedFloatingRect(baseLayout, drag.paneId, width, contentHeight, pane?.def)
+            : drag.origRect;
+          const releaseRect = resolvePaneDragFloatingRect(drag, baseRect, preciseX, preciseShellY, width, contentHeight);
+          const releaseResult = finalizePaneDragRelease(baseLayout, drag.paneId, releaseRect, dockPreviewRef.current);
+          if (windowMode) {
+            updateWindowModePreviewLayout(releaseResult.nextLayout, drag.paneId);
+          } else {
+            persistLayout(releaseResult.nextLayout);
+          }
+          focusPane(drag.paneId);
+          if (!windowMode && releaseResult.shouldShowGridlockTip) {
+            dispatch({ type: "SHOW_GRIDLOCK_TIP" });
+          }
+          updateDockPreview(null);
+          setDragCursor(null);
+          updateDragFloatingRect(null);
+        }
+      } else if (drag.type === "float-resize") {
+        const releaseRect = resolveFloatResizeRect(drag, preciseX, preciseShellY, width, contentHeight);
+        const nextLayout = floatAtRect(baseLayout, drag.paneId, releaseRect);
+        if (windowMode) {
+          updateWindowModePreviewLayout(nextLayout, drag.paneId);
+        } else {
+          persistLayout(nextLayout);
+        }
+        updateDragFloatingRect(null);
+        setDragCursor(null);
+      }
+      dragRef.current = null;
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [
+    appHeaderHeight,
+    bounds,
+    contentHeight,
+    dispatch,
+    dividerPreviewRef,
+    dockLeafLayouts,
+    dockPreviewRef,
+    dragRef,
+    focusPane,
+    nativePaneChrome,
+    paneMap,
+    persistLayout,
+    precisePointer,
+    setDragCursor,
+    snapGuides,
+    updateDividerPreview,
+    updateDockPreview,
+    updateDragFloatingRect,
+    updateWindowModePreviewLayout,
+    visibleLayout,
+    windowMode,
+    width,
+  ]);
+}

package/src/components/layout/shell/chrome.ts

@@ -0,0 +1,8 @@
+import { TITLEBAR_OVERLAY_HEIGHT_PX } from "../titlebar-overlay";
+
+export const DEFAULT_HEADER_HEIGHT = 1;
+
+export function resolveAppHeaderHeightCells(options: { titleBarOverlay?: boolean; cellHeightPx?: number }): number {
+  if (!options.titleBarOverlay || !options.cellHeightPx || options.cellHeightPx <= 0) return DEFAULT_HEADER_HEIGHT;
+  return TITLEBAR_OVERLAY_HEIGHT_PX / options.cellHeightPx;
+}