gloomberb 0.9.3 → 0.9.5

package/src/components/command-bar/layout-items/current-layout.ts

@@ -87,7 +87,11 @@ export function buildCurrentLayoutItems({
       kind: "action",
       action: () => {
         const { width, height } = pluginRegistry.getTermSizeFn();
-        persistLayoutChange(gridlockAllPanes(currentLayout, { x: 0, y: 0, width, height }));
+        persistLayoutChange(gridlockAllPanes(
+          currentLayout,
+          { x: 0, y: 0, width, height },
+          pluginRegistry.panes,
+        ));
         notifyGridlockRevert();
         closeAll({ revertThemePreview: false });
       },

package/src/components/command-bar/list/view.tsx

@@ -165,7 +165,7 @@ const CommandBarListItemRow = memo(function CommandBarListItemRow({
         : isHovered
           ? paletteHoverBg
           : (nativePaneChrome ? panelBg : paletteBg)}
-      onMouseMove={() => onHoverIndex(globalIdx)}
+      onMouseOver={() => onHoverIndex(globalIdx)}
       onMouseOut={() => onHoverIndex(null)}
       {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}
       onMouseDown={(event: any) => onRowMouseDown(event, item, globalIdx)}

package/src/components/command-bar/theme-picker.tsx

@@ -219,7 +219,7 @@ export const ThemePicker = memo(forwardRef<ThemePickerHandle, ThemePickerProps>(
               : hovered
                 ? paletteHoverBg
                 : (nativePaneChrome ? panelBg : paletteBg)}
-            onMouseMove={() => setHoveredIndex(index)}
+            onMouseOver={() => setHoveredIndex(index)}
             onMouseOut={() => setHoveredIndex(null)}
             onMouseDown={(event: any) => {
               event.stopPropagation?.();

package/src/components/data-table/view.tsx

@@ -73,8 +73,6 @@ export interface DataTableViewProps<
     | "scrollRef"
     | "syncHeaderScroll"
     | "onBodyScrollActivity"
-    | "hoveredIdx"
-    | "setHoveredIdx"
     | "isSelected"
     | "onSelect"
     | "onActivate"
@@ -97,8 +95,6 @@ export interface DataTableViewProps<
   scrollRef?: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll?: () => void;
   onBodyScrollActivity?: () => void;
-  hoveredIdx?: number | null;
-  setHoveredIdx?: (index: number | null) => void;
   keyboardNavigation?: boolean;
   onRootKeyDown?: (
     event: DataTableKeyEvent,
@@ -125,8 +121,6 @@ export function DataTableView<
   scrollRef,
   syncHeaderScroll,
   onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   keyboardNavigation = true,
   onRootKeyDown,
   resetScrollKey,
@@ -137,15 +131,11 @@ export function DataTableView<
   const {
     effectiveHeaderScrollRef,
     effectiveScrollRef,
-    effectiveHoveredIdx,
-    effectiveSetHoveredIdx,
     effectiveSyncHeaderScroll,
   } = useTableViewState({
     headerScrollRef,
     scrollRef,
     syncHeaderScroll,
-    hoveredIdx,
-    setHoveredIdx,
   });
   const [cursorIndex, setCursorIndex] = useState<number | null>(null);
   const pendingCommitRef = useRef(false);
@@ -532,8 +522,6 @@ export function DataTableView<
         scrollRef={effectiveScrollRef}
         syncHeaderScroll={effectiveSyncHeaderScroll}
         onBodyScrollActivity={handleBodyScrollActivity}
-        hoveredIdx={effectiveHoveredIdx}
-        setHoveredIdx={effectiveSetHoveredIdx}
         scrollToIndex={effectiveScrollToIndex}
         scrollToIndexVersion={scrollToIndexVersion + selectionScrollVersion}
         isSelected={isItemSelected}

package/src/components/layout/detached-pane-shell.tsx

@@ -10,7 +10,7 @@ import { useThemeColors } from "../../theme/theme-context";
 import { hasPaneFooterContent, PaneFooterBar, PaneFooterProvider } from "./pane/footer";
 import { PaneBodyFrame, getPaneWindowAttributes } from "./pane/frame";
 import { PaneContent } from "./pane/content";
-import { resolvePaneBodyFrame } from "./pane/sizing";
+import { resolvePaneBodyFrame, shouldReservePaneFooter } from "./pane/sizing";
 import { getPaneDisplayTitle } from "./pane/title";
 import { TITLEBAR_OVERLAY_HEIGHT_PX, getTitlebarLeadingInset } from "./titlebar-overlay";
 import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
@@ -130,6 +130,8 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
     <PaneFooterProvider>
       {(footer) => {
         const showFooter = hasPaneFooterContent(footer);
+        const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
+        const renderFooter = reserveFooter || showFooter;
         const headerHeightRows = titleBarOverlay ? TITLEBAR_OVERLAY_HEIGHT_PX / cellHeightPx : 1;
         const background = floatingPaneBg(focused);
         const titleBackground = floatingPaneTitleBg(focused);
@@ -137,7 +139,8 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
           width,
           height,
           nativePaneChrome,
-          reserveFooter: showFooter,
+          footerVisible: renderFooter,
+          reserveFooter,
           headerRows: headerHeightRows,
         });
         const bodyWidth = bodyFrame.width ?? 1;
@@ -208,7 +211,7 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                 height={bodyHeight}
               />
             </PaneBodyFrame>
-            {showFooter && <PaneFooterBar footer={footer} focused={focused} width={width} />}
+            {renderFooter && <PaneFooterBar footer={footer} focused={focused} width={width} />}
           </Box>
         );
       }}

package/src/components/layout/floating-pane.tsx

@@ -18,7 +18,7 @@ interface FloatingPaneWrapperProps {
   windowModeSelected?: boolean;
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
-  onMouseMove?: (event: any) => void;
+  onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
   onHeaderMouseDragEnd?: (event: any) => void;
@@ -63,7 +63,7 @@ export function FloatingPaneWrapper({
   windowModeSelected = false,
   showActions = false,
   onMouseDown,
-  onMouseMove,
+  onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
   onHeaderMouseDragEnd,
@@ -80,7 +80,8 @@ export function FloatingPaneWrapper({
   const bg = floatingPaneBg(focused);
   const showFooter = hasPaneFooterContent(footer);
   const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
-  const bodyFrame = resolvePaneBodyFrame({ height, nativePaneChrome, reserveFooter });
+  const renderFooter = reserveFooter || showFooter;
+  const bodyFrame = resolvePaneBodyFrame({ height, nativePaneChrome, footerVisible: renderFooter, reserveFooter });
 
   return (
     <Box
@@ -103,7 +104,6 @@ export function FloatingPaneWrapper({
         showBorderColor: true,
       })}
       onMouseDown={onMouseDown}
-      onMouseMove={onMouseMove}
     >
       <PaneHeader
         title={title}
@@ -112,6 +112,7 @@ export function FloatingPaneWrapper({
         windowModeSelected={windowModeSelected}
         floating
         showActions={showActions}
+        onHeaderMouseMove={onHeaderMouseMove}
         onHeaderMouseDown={onHeaderMouseDown}
         onHeaderMouseDrag={onHeaderMouseDrag}
         onHeaderMouseDragEnd={onHeaderMouseDragEnd}
@@ -124,7 +125,7 @@ export function FloatingPaneWrapper({
         {children}
       </PaneBodyFrame>
 
-      {reserveFooter && (
+      {renderFooter && (
         <PaneFooterBar
           footer={footer}
           focused={focused}

package/src/components/layout/pane/content.tsx

@@ -3,6 +3,7 @@ import { PaneInstanceProvider } from "../../../state/app/context";
 import { PaneKeyboardScrollController } from "../../../state/pane-scroll-registry";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneDef } from "../../../types/plugin";
+import { Box } from "../../../ui";
 
 interface PaneContentProps {
   component: PaneDef["component"];
@@ -31,14 +32,25 @@ export const PaneContent = memo(function PaneContent({
   return (
     <PaneInstanceProvider paneId={paneId}>
       <PaneKeyboardScrollController paneId={paneId} focused={focused} />
-      <Component
-        paneId={paneId}
-        paneType={paneType}
-        focused={focused}
-        width={width}
-        height={height}
-        close={onClose ? close : undefined}
-      />
+      <Box
+        flexDirection="column"
+        flexGrow={1}
+        flexShrink={1}
+        flexBasis={0}
+        minWidth={0}
+        minHeight={0}
+        overflow="hidden"
+        data-gloom-role="pane-content"
+      >
+        <Component
+          paneId={paneId}
+          paneType={paneType}
+          focused={focused}
+          width={width}
+          height={height}
+          close={onClose ? close : undefined}
+        />
+      </Box>
     </PaneInstanceProvider>
   );
 });

package/src/components/layout/pane/footer/registration.tsx

@@ -3,6 +3,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -17,6 +18,9 @@ import {
   type PaneHint,
 } from "./model";
 
+const usePaneFooterRegistrationEffect =
+  typeof document === "undefined" ? useEffect : useLayoutEffect;
+
 interface PaneFooterContextValue {
   register(registrationId: string, registration: PaneFooterRegistration | null): void;
   unregister(registrationId: string): void;
@@ -85,14 +89,14 @@ export function usePaneFooter(
   const context = useContext(PaneFooterContext);
   const previousRegistrationRef = useRef<PaneFooterRegistration | null>(null);
 
-  useEffect(() => {
+  usePaneFooterRegistrationEffect(() => {
     return () => {
       previousRegistrationRef.current = null;
       context?.unregister(registrationId);
     };
   }, [context, registrationId]);
 
-  useEffect(() => {
+  usePaneFooterRegistrationEffect(() => {
     if (!context) return;
     const nextRegistration = factory() ?? null;
     if (samePaneFooterRegistration(previousRegistrationRef.current, nextRegistration)) return;

package/src/components/layout/pane/frame.tsx

@@ -19,13 +19,13 @@ export function getPaneWindowAttributes({
   windowModeSelected?: boolean;
   showBorderColor?: boolean;
 }): Record<string, unknown> {
-  if (!enabled) return {};
-
   const attributes: Record<string, unknown> = {
     "data-gloom-role": role,
-    "data-focused": focused ? "true" : "false",
   };
   if (paneId) attributes["data-gloom-pane-id"] = paneId;
+  if (!enabled) return attributes;
+
+  attributes["data-focused"] = focused ? "true" : "false";
   if (floating != null) attributes["data-floating"] = floating ? "true" : "false";
   if (windowModeSelected != null) {
     attributes["data-window-mode-selected"] = windowModeSelected ? "true" : "false";
@@ -48,7 +48,7 @@ export function PaneBodyFrame({
   children: ReactNode;
 }) {
   return (
-    <Box {...layoutProps} overflow="hidden" backgroundColor={backgroundColor}>
+    <Box {...layoutProps} overflow="hidden" backgroundColor={backgroundColor} data-gloom-role="pane-body">
       {children}
     </Box>
   );

package/src/components/layout/pane/header.tsx

@@ -1,5 +1,5 @@
-import { Box, Span, Text, useUiCapabilities } from "../../../ui";
-import type { ReactNode } from "react";
+import { Box, Span, Text, useNativeRenderer, useUiCapabilities } from "../../../ui";
+import { useCallback, useRef, type ReactNode } from "react";
 import { blendHex, colors, floatingPaneTitleBg, paneTitleBg, paneTitleText } from "../../../theme/colors";
 
 const PANE_HEADER_HEIGHT = 1;
@@ -14,6 +14,7 @@ interface PaneHeaderProps {
   windowModeSelected?: boolean;
   floating?: boolean;
   showActions?: boolean;
+  onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
   onHeaderMouseDragEnd?: (event: any) => void;
@@ -29,6 +30,18 @@ function truncateTitle(title: string, maxWidth: number): string {
   return `${title.slice(0, maxWidth - 2)}..`;
 }
 
+function captureTerminalPointerDrag(renderer: unknown, renderable: unknown): void {
+  if (!renderable) return;
+  const hostCapture = (renderer as { captureMouseRenderable?: (target: unknown) => void }).captureMouseRenderable;
+  if (typeof hostCapture === "function") {
+    hostCapture.call(renderer, renderable);
+    return;
+  }
+  const capture = (renderer as { setCapturedRenderable?: (target: unknown) => void }).setCapturedRenderable;
+  if (typeof capture !== "function") return;
+  capture.call(renderer, renderable);
+}
+
 function DesktopPaneButton({
   icon,
   onMouseDown,
@@ -99,6 +112,7 @@ export function PaneHeader({
   windowModeSelected = false,
   floating = false,
   showActions = false,
+  onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
   onHeaderMouseDragEnd,
@@ -107,11 +121,17 @@ export function PaneHeader({
   onCloseMouseDown,
 }: PaneHeaderProps) {
   const { nativePaneChrome } = useUiCapabilities();
+  const nativeRenderer = useNativeRenderer();
+  const terminalHeaderRef = useRef<unknown>(null);
   const visuallyFocused = focused || windowModeSelected;
   const backgroundColor = floating ? floatingPaneTitleBg(visuallyFocused) : paneTitleBg(visuallyFocused);
   const actionText = showActions ? PANE_HEADER_ACTION : "     ";
   const closeText = floating ? PANE_HEADER_CLOSE : "";
   const textColor = paneTitleText(visuallyFocused, floating);
+  const handleTerminalHeaderMouseDown = useCallback((event: any) => {
+    captureTerminalPointerDrag(nativeRenderer, terminalHeaderRef.current);
+    onHeaderMouseDown?.(event);
+  }, [nativeRenderer, onHeaderMouseDown]);
 
   if (nativePaneChrome) {
     return (
@@ -125,6 +145,7 @@ export function PaneHeader({
         data-focused={focused ? "true" : "false"}
         data-window-mode-selected={windowModeSelected ? "true" : "false"}
         onMouseDown={onHeaderMouseDown}
+        onMouseMove={onHeaderMouseMove}
         onMouseDrag={onHeaderMouseDrag}
         onMouseDragEnd={onHeaderMouseDragEnd}
         onContextMenu={onHeaderContextMenu}
@@ -201,7 +222,17 @@ export function PaneHeader({
     const fill = "─".repeat(fillLen);
 
     return (
-      <Box height={PANE_HEADER_HEIGHT} width={width} backgroundColor={backgroundColor} flexDirection="row">
+      <Box
+        ref={terminalHeaderRef}
+        height={PANE_HEADER_HEIGHT}
+        width={width}
+        backgroundColor={backgroundColor}
+        flexDirection="row"
+        onMouseDown={handleTerminalHeaderMouseDown}
+        onMouseMove={onHeaderMouseMove}
+        onMouseDrag={onHeaderMouseDrag}
+        onMouseDragEnd={onHeaderMouseDragEnd}
+      >
         <Text fg={borderColor} selectable={false}>{"┌─"}</Text>
         <Text fg={textColor} selectable={false}>{`${PANE_HEADER_GRIP}${clippedTitle}`}</Text>
         <Text fg={borderColor} selectable={false}>{fill}</Text>
@@ -229,7 +260,17 @@ export function PaneHeader({
   const padding = " ".repeat(Math.max(0, titleWidth - clippedTitle.length));
 
   return (
-    <Box height={PANE_HEADER_HEIGHT} width={width} backgroundColor={backgroundColor} flexDirection="row">
+    <Box
+      ref={terminalHeaderRef}
+      height={PANE_HEADER_HEIGHT}
+      width={width}
+      backgroundColor={backgroundColor}
+      flexDirection="row"
+      onMouseDown={handleTerminalHeaderMouseDown}
+      onMouseMove={onHeaderMouseMove}
+      onMouseDrag={onHeaderMouseDrag}
+      onMouseDragEnd={onHeaderMouseDragEnd}
+    >
       <Text fg={textColor} selectable={false}>
         {`${PANE_HEADER_GRIP}${clippedTitle}${padding}`}
       </Text>

package/src/components/layout/pane/index.tsx

@@ -16,7 +16,7 @@ interface PaneWrapperProps {
   flexGrow?: number;
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
-  onMouseMove?: (event: any) => void;
+  onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
   onHeaderMouseDragEnd?: (event: any) => void;
@@ -36,7 +36,7 @@ export function PaneWrapper({
   flexGrow,
   showActions = false,
   onMouseDown,
-  onMouseMove,
+  onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
   onHeaderMouseDragEnd,
@@ -49,9 +49,11 @@ export function PaneWrapper({
   const bg = paneBg(focused);
   const showFooter = hasPaneFooterContent(footer);
   const reserveFooter = !!title && shouldReservePaneFooter(nativePaneChrome, showFooter);
+  const renderFooter = !!title && (reserveFooter || showFooter);
   const bodyFrame = resolvePaneBodyFrame({
     height: typeof height === "number" ? height : undefined,
     nativePaneChrome,
+    footerVisible: renderFooter,
     reserveFooter,
     headerRows: title ? 1 : 0,
   });
@@ -74,7 +76,6 @@ export function PaneWrapper({
         showBorderColor: true,
       })}
       onMouseDown={onMouseDown}
-      onMouseMove={onMouseMove}
     >
       {title && (
         <PaneHeader
@@ -83,6 +84,7 @@ export function PaneWrapper({
           focused={focused}
           windowModeSelected={windowModeSelected}
           showActions={showActions}
+          onHeaderMouseMove={onHeaderMouseMove}
           onHeaderMouseDown={onHeaderMouseDown}
           onHeaderMouseDrag={onHeaderMouseDrag}
           onHeaderMouseDragEnd={onHeaderMouseDragEnd}
@@ -93,7 +95,7 @@ export function PaneWrapper({
       <PaneBodyFrame layoutProps={bodyFrame.layoutProps} backgroundColor={bg}>
         {children}
       </PaneBodyFrame>
-      {title && reserveFooter && (
+      {renderFooter && (
         <PaneFooterBar
           footer={footer}
           focused={focused}

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

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test";
+import { resolvePaneBodyFrame, shouldReservePaneFooter } from "./sizing";
+
+describe("pane sizing", () => {
+  test("lets native pane chrome lay out footer bars in normal flex flow", () => {
+    expect(shouldReservePaneFooter(true, true)).toBe(false);
+
+    const bodyFrame = resolvePaneBodyFrame({
+      width: 80,
+      height: 30,
+      nativePaneChrome: true,
+      footerVisible: true,
+      reserveFooter: false,
+    });
+
+    expect(bodyFrame.height).toBe(28);
+    expect(bodyFrame.layoutProps).toEqual({
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: 0,
+      minHeight: 0,
+    });
+  });
+
+  test("keeps terminal pane footer rows reserved for border rendering", () => {
+    expect(shouldReservePaneFooter(false, false)).toBe(true);
+
+    const bodyFrame = resolvePaneBodyFrame({
+      width: 80,
+      height: 30,
+      nativePaneChrome: false,
+      reserveFooter: true,
+    });
+
+    expect(bodyFrame.height).toBe(28);
+    expect(bodyFrame.layoutProps).toEqual({
+      height: 28,
+      flexGrow: 0,
+      flexBasis: undefined,
+    });
+  });
+});

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

@@ -4,28 +4,35 @@ const PANE_FOOTER_ROWS = 1;
 
 const NATIVE_PANE_BODY_LAYOUT_PROPS = {
   flexGrow: 1,
+  flexShrink: 1,
   flexBasis: 0,
+  minWidth: 0,
   minHeight: 0,
 } as const;
 
-export function shouldReservePaneFooter(nativePaneChrome: boolean | undefined, showFooter: boolean): boolean {
-  return !nativePaneChrome || showFooter;
+export function shouldReservePaneFooter(nativePaneChrome: boolean | undefined, _showFooter: boolean): boolean {
+  return !nativePaneChrome;
 }
 
 function resolvePaneBodyHeight({
   height,
   nativePaneChrome,
+  footerVisible,
   reserveFooter = true,
   headerRows = PANE_HEADER_ROWS,
 }: {
   height: number;
   nativePaneChrome?: boolean;
+  footerVisible?: 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));
+  const footerRows = nativePaneChrome
+    ? footerVisible ? PANE_FOOTER_ROWS : 0
+    : reserveFooter ? PANE_FOOTER_ROWS : 0;
+  return Math.max(1, normalizedHeight - headerRows - footerRows);
 }
 
 function getPaneBodyLayoutProps(nativePaneChrome: boolean | undefined, bodyHeight: number | undefined) {
@@ -41,17 +48,19 @@ export function resolvePaneBodyFrame({
   width,
   height,
   nativePaneChrome,
+  footerVisible,
   reserveFooter = true,
   headerRows = PANE_HEADER_ROWS,
 }: {
   width?: number;
   height?: number;
   nativePaneChrome?: boolean;
+  footerVisible?: boolean;
   reserveFooter?: boolean;
   headerRows?: number;
 }) {
   const bodyHeight = typeof height === "number"
-    ? resolvePaneBodyHeight({ height, nativePaneChrome, reserveFooter, headerRows })
+    ? resolvePaneBodyHeight({ height, nativePaneChrome, footerVisible, reserveFooter, headerRows })
     : undefined;
   return {
     width: typeof width === "number" ? resolvePaneBodyWidth(width, nativePaneChrome) : undefined,

package/src/components/layout/shell/action-menu-overlay.tsx

@@ -52,7 +52,7 @@ export function ShellActionMenuOverlay({
             height={1}
             width={innerWidth}
             backgroundColor={hovered ? colors.selected : colors.panel}
-            onMouseMove={() => onHoverItem(item.id)}
+            onMouseOver={() => onHoverItem(item.id)}
             onMouseDown={(mouseEvent: any) => {
               mouseEvent.stopPropagation();
               mouseEvent.preventDefault();