gloomberb 0.16.4 → 0.16.6

package/src/components/layout/shell/pane/layers.tsx

@@ -8,9 +8,11 @@ import type {
   LayoutBounds,
   ResolvedPane,
 } from "../../../../layout/pane-manager";
-import { colors } from "../../../../theme/colors";
-import { constrainFloatingRectToBounds, sameRect } from "../drag";
-import { useLiveBoxFrame, useLiveDrag, useLiveResizeRect, type LiveDragGeometry, type LiveDragStore } from "../drag/live";
+import { useThemeColors } from "../../../../theme/theme-context";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../../../theme/font-scale";
+import { LivePaneFrameContext, type CellSize, type LivePaneFrame } from "../../../../ui/live-stretch";
+import { constrainFloatingRectToBounds, sameRect, type ResizeEdges } from "../drag";
+import { useLiveBoxFrame, useLiveCatchUp, useLiveDrag, type LiveDragGeometry, type LiveDragStore } from "../drag/live";
 import { pathKey } from "../../window-edit/mode";
 import { FloatingPaneWrapper } from "../../floating-pane";
 import { PaneContent } from "../../pane/content";
@@ -18,6 +20,7 @@ import { PaneWrapper } from "../../pane";
 import type { PaneHeaderQuickSetting } from "../../pane/header";
 import { hasPaneFooterContent, PaneFooterKeys, PaneFooterProvider } from "../../pane/footer";
 import { resolvePaneBodyFrame, shouldReservePaneFooter } from "../../pane/sizing";
+import { captureStampFooter, usePaneCaptureStamp } from "../../pane/capture-stamp";
 
 type ShellMouseHandler = (event: any) => void;
 
@@ -40,6 +43,9 @@ interface ShellPaneLayersProps {
   handleNativePaneContextMenu: (paneId: string, rect: LayoutBounds, event: any) => void;
   handleNativePaneMouseDown: (paneId: string, event: any) => void;
   handlePaneAction: (paneId: string, rect: LayoutBounds, event: any) => void;
+  handlePaneHelp: (paneId: string) => void;
+  /** Ask Gloom about the pane; null while nothing takes the question (its plugin is off). */
+  handlePaneAsk: ((paneId: string) => void) | null;
   hoveredPaneId: string | null;
   live: LiveDragStore;
   menuPaneId: string | null;
@@ -51,7 +57,7 @@ interface ShellPaneLayersProps {
   startNativeDividerDrag: (divider: DockDividerLayout, event: any) => void;
   startNativeDockedDrag: (paneId: string, rect: LayoutBounds, event: any) => void;
   startNativeFloatingDrag: (paneId: string, rect: FloatingRect, event: any) => void;
-  startNativeFloatResize: (paneId: string, rect: FloatingRect, event: any) => void;
+  startNativeFloatResize: (paneId: string, rect: FloatingRect, event: any, edges?: ResizeEdges) => void;
   transientFocusActive: boolean;
   transientFocusPaneId: string | null;
   visibleFloatingPanes: VisibleFloatingPane[];
@@ -70,10 +76,14 @@ interface PaneLayerActions {
   hover: (paneId: string) => void;
   dockedDragStart: (paneId: string, rect: LayoutBounds, event: any) => void;
   floatingDragStart: (paneId: string, rect: FloatingRect, event: any) => void;
-  floatResizeStart: (paneId: string, rect: FloatingRect, event: any) => void;
+  floatResizeStart: (paneId: string, rect: FloatingRect, event: any, edges?: ResizeEdges) => void;
   drag: ShellMouseHandler;
   contextMenu: (paneId: string, rect: LayoutBounds, event: any) => void;
   menu: (paneId: string, rect: LayoutBounds, event: any) => void;
+  /** The `?`: the pane's entry in DOCS. */
+  help: (paneId: string) => void;
+  /** The button beside the `?`: Ask Gloom about the pane. */
+  ask: (paneId: string) => void;
   closeMouseDown: (paneId: string, event: any) => void;
   /** Also the failure card's Close: keep it stable, the pane body is memoized on it. */
   close: (paneId: string) => void;
@@ -96,6 +106,8 @@ interface PaneLayerProps {
   movable: boolean;
   nativePaneChrome: boolean;
   nativeContextMenu: boolean;
+  /** Ask Gloom takes questions about panes, so the header offers it. */
+  canAsk: boolean;
   getPaneQuickSettings: (paneId: string) => PaneHeaderQuickSetting[];
   actions: PaneLayerActions;
 }
@@ -109,9 +121,35 @@ function usePaneQuickSettings(getPaneQuickSettings: PaneLayerProps["getPaneQuick
   return useMemo(() => getPaneQuickSettings(paneId), [getPaneQuickSettings, paneId]);
 }
 
+/**
+ * Desktop: what a pane's content reads to follow a resize between catch-ups
+ * (`useLiveStretch`): the frame's size as the content rendered, and where the
+ * drag has it on each move. `sizeOf` must be stable while its inputs are.
+ */
+function useLivePaneFrame(
+  live: LiveDragStore,
+  rendered: LayoutBounds,
+  sizeOf: ((geometry: LiveDragGeometry) => CellSize | null) | null,
+): LivePaneFrame | null {
+  const { width, height } = rendered;
+  return useMemo(() => (sizeOf ? {
+    rendered: { width, height },
+    live: () => sizeOf(live.get()),
+    subscribe: live.subscribeMotion,
+  } : null), [height, live, sizeOf, width]);
+}
+
+/**
+ * A docked pane at its layout rect. On the desktop a divider drag moves and
+ * sizes it by restyling its box on every move (`useLiveBoxFrame`), so its
+ * header, body and footer stretch with the split and nothing renders; its
+ * content renders at the new size a few times a second (`useLiveCatchUp`),
+ * charts and heat maps follow the frame in between (`useLiveStretch`), and
+ * the release lays the split out once.
+ */
 const DockedPaneLayer = memo(function DockedPaneLayer({
   pane,
-  rect,
+  rect: layoutRect,
   title,
   focused,
   windowModeSelected,
@@ -122,14 +160,33 @@ const DockedPaneLayer = memo(function DockedPaneLayer({
   movable,
   nativePaneChrome,
   nativeContextMenu,
+  canAsk,
   getPaneQuickSettings,
   actions,
-}: PaneLayerProps) {
+  live,
+}: PaneLayerProps & { live: LiveDragStore }) {
   const paneId = pane.instance.instanceId;
   const quickSettings = usePaneQuickSettings(getPaneQuickSettings, paneId);
   const nativeMove = nativePaneChrome && movable;
+  const boxRef = useRef<BoxRenderable | null>(null);
+  const frameOf = useMemo(() => (nativePaneChrome ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
+    const at = geometry.dock?.leaves.get(paneId);
+    return at ? { x: at.x, y: at.y, width: at.width, height: at.height } : null;
+  } : null), [nativePaneChrome, paneId]);
+  useLiveBoxFrame(live, boxRef, frameOf);
+  const selectCatchUp = useMemo(() => (nativePaneChrome ? (geometry: LiveDragGeometry) => {
+    const at = geometry.dock?.leaves.get(paneId);
+    return at && !sameRect(at, layoutRect) ? at : null;
+  } : null), [layoutRect, nativePaneChrome, paneId]);
+  const rect = useLiveCatchUp(live, selectCatchUp) ?? layoutRect;
+  const sizeOf = useMemo(() => (nativePaneChrome
+    ? (geometry: LiveDragGeometry): CellSize | null => geometry.dock?.leaves.get(paneId) ?? null
+    : null), [nativePaneChrome, paneId]);
+  const liveFrame = useLivePaneFrame(live, rect, sizeOf);
+  const captureStamp = usePaneCaptureStamp(paneId);
   return (
     <Box
+      ref={boxRef}
       position="absolute"
       left={rect.x}
       top={rect.y}
@@ -138,7 +195,8 @@ const DockedPaneLayer = memo(function DockedPaneLayer({
       visible={!hidden}
     >
       <PaneFooterProvider>
-        {(footer) => {
+        {(registeredFooter) => {
+          const footer = captureStampFooter(registeredFooter, captureStamp);
           const showFooter = hasPaneFooterContent(footer);
           const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
           const bodyFrame = resolvePaneBodyFrame({
@@ -155,6 +213,7 @@ const DockedPaneLayer = memo(function DockedPaneLayer({
               focused={focused}
               width={rect.width}
               height={rect.height}
+              stretch={nativePaneChrome}
               locked={pane.instance.locked === true}
               showActions={showActions}
               quickSettings={quickSettings}
@@ -168,21 +227,25 @@ const DockedPaneLayer = memo(function DockedPaneLayer({
               onHeaderMouseDragEnd={nativeMove ? actions.drag : undefined}
               onHeaderContextMenu={nativePaneChrome && nativeContextMenu ? (event) => actions.contextMenu(paneId, rect, event) : undefined}
               onActionMouseDown={(event) => actions.menu(paneId, rect, event)}
+              onHelpMouseDown={() => actions.help(paneId)}
+              onAskMouseDown={canAsk ? () => actions.ask(paneId) : undefined}
               fullscreen={fullscreen}
               onRestoreMouseDown={fullscreen ? actions.restoreFullscreen : undefined}
             >
-              <PaneFooterKeys paneId={paneId} footer={footer} focused={focused} />
-              <PaneContent
-                component={pane.def.component}
-                paneId={paneId}
-                paneType={pane.instance.paneId}
-                title={title}
-                focused={focused}
-                width={bodyFrame.width ?? 1}
-                height={bodyFrame.height ?? 1}
-                inView={inView}
-                closePane={actions.close}
-              />
+              <PaneFooterKeys paneId={paneId} footer={registeredFooter} focused={focused} />
+              <LivePaneFrameContext.Provider value={liveFrame}>
+                <PaneContent
+                  component={pane.def.component}
+                  paneId={paneId}
+                  paneType={pane.instance.paneId}
+                  title={title}
+                  focused={focused}
+                  width={bodyFrame.width ?? 1}
+                  height={bodyFrame.height ?? 1}
+                  inView={inView}
+                  closePane={actions.close}
+                />
+              </LivePaneFrameContext.Provider>
             </PaneWrapper>
           );
         }}
@@ -204,25 +267,25 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
   movable,
   nativePaneChrome,
   nativeContextMenu,
+  canAsk,
   getPaneQuickSettings,
   actions,
   zIndex,
   frameRef,
-  contentPinned = false,
 }: PaneLayerProps & {
   rect: FloatingRect;
   zIndex: number;
   /** Desktop: the frame a resize sizes outside React. */
   frameRef?: RefObject<BoxRenderable | null>;
-  /** Desktop: a resize is under way, so the content keeps the size it last rendered at. */
-  contentPinned?: boolean;
 }) {
   const paneId = pane.instance.instanceId;
   const quickSettings = usePaneQuickSettings(getPaneQuickSettings, paneId);
   const nativeMove = nativePaneChrome && movable;
+  const captureStamp = usePaneCaptureStamp(paneId);
   return (
     <PaneFooterProvider>
-      {(footer) => {
+      {(registeredFooter) => {
+        const footer = captureStampFooter(registeredFooter, captureStamp);
         const showFooter = hasPaneFooterContent(footer);
         const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
         const bodyFrame = resolvePaneBodyFrame({
@@ -255,6 +318,8 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
             onHeaderMouseDragEnd={nativeMove ? actions.drag : undefined}
             onHeaderContextMenu={nativePaneChrome && nativeContextMenu ? (event) => actions.contextMenu(paneId, rect, event) : undefined}
             onActionMouseDown={(event) => actions.menu(paneId, rect, event)}
+            onHelpMouseDown={() => actions.help(paneId)}
+            onAskMouseDown={canAsk ? () => actions.ask(paneId) : undefined}
             onCloseMouseDown={fullscreen ? undefined : (event) => actions.closeMouseDown(paneId, event)}
             onRestoreMouseDown={fullscreen ? actions.restoreFullscreen : undefined}
             fullscreen={fullscreen}
@@ -263,7 +328,7 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
             onResizeMouseDragEnd={nativeMove ? actions.drag : undefined}
             frameRef={frameRef}
           >
-            <PaneFooterKeys paneId={paneId} footer={footer} focused={focused} />
+            <PaneFooterKeys paneId={paneId} footer={registeredFooter} focused={focused} />
             <PaneContent
               component={pane.def.component}
               paneId={paneId}
@@ -275,7 +340,6 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
               inView={inView}
               onClose={actions.close}
               closePane={actions.close}
-              pinned={contentPinned}
             />
           </FloatingPaneWrapper>
         );
@@ -284,16 +348,95 @@ const FloatingPaneFrame = memo(function FloatingPaneFrame({
   );
 });
 
+/**
+ * Px a desktop resize edge reaches out past a floating pane's border, and in
+ * over it: a few px either way, so it takes neither a press meant for what
+ * sits next to the pane nor much of the pane's own scrollbar.
+ */
+const RESIZE_EDGE_OUTSIDE_PX = 3;
+const RESIZE_EDGE_INSIDE_PX = 3;
+/** A corner's grab square runs this far along both edges, in px, short of the header's buttons. */
+const RESIZE_CORNER_PX = 10;
+
+const RESIZE_EDGES: Array<{ id: string; edges: ResizeEdges }> = [
+  { id: "left", edges: { x: -1, y: 0 } },
+  { id: "right", edges: { x: 1, y: 0 } },
+  { id: "top", edges: { x: 0, y: -1 } },
+  { id: "bottom", edges: { x: 0, y: 1 } },
+  { id: "top-left", edges: { x: -1, y: -1 } },
+  { id: "top-right", edges: { x: 1, y: -1 } },
+  { id: "bottom-left", edges: { x: -1, y: 1 } },
+  { id: "bottom-right", edges: { x: 1, y: 1 } },
+];
+
+/** Where an edge's grab strip sits, in px from the layer's corner (the shell's), around a pane at `rect`. */
+function resizeEdgeStyle(rect: FloatingRect, edges: ResizeEdges) {
+  const left = rect.x * WEB_CELL_WIDTH;
+  const top = rect.y * WEB_CELL_HEIGHT;
+  const width = rect.width * WEB_CELL_WIDTH;
+  const height = rect.height * WEB_CELL_HEIGHT;
+  const thick = RESIZE_EDGE_OUTSIDE_PX + RESIZE_EDGE_INSIDE_PX;
+  const span = (start: number, length: number, edge: -1 | 0 | 1): [number, number] => {
+    if (edge === -1) return [start - RESIZE_EDGE_OUTSIDE_PX, edges.x !== 0 && edges.y !== 0 ? RESIZE_CORNER_PX : thick];
+    if (edge === 1) {
+      const size = edges.x !== 0 && edges.y !== 0 ? RESIZE_CORNER_PX : thick;
+      return [start + length + RESIZE_EDGE_OUTSIDE_PX - size, size];
+    }
+    // Along the edge, short of the corners.
+    return [start + RESIZE_CORNER_PX - RESIZE_EDGE_OUTSIDE_PX, Math.max(0, length - 2 * (RESIZE_CORNER_PX - RESIZE_EDGE_OUTSIDE_PX))];
+  };
+  const [x, w] = span(left, width, edges.x);
+  const [y, h] = span(top, height, edges.y);
+  return { left: x, top: y, width: w, height: h };
+}
+
+/**
+ * Desktop: the invisible strips along a floating pane's edges and corners
+ * that resize it, as a window's do. They straddle the border, short of the
+ * header's buttons.
+ */
+const FloatingResizeEdges = memo(function FloatingResizeEdges({
+  paneId,
+  rect,
+  zIndex,
+  actions,
+}: {
+  paneId: string;
+  rect: FloatingRect;
+  zIndex: number;
+  actions: PaneLayerActions;
+}) {
+  return (
+    <>
+      {RESIZE_EDGES.map(({ id, edges }) => (
+        <Box
+          key={id}
+          position="absolute"
+          zIndex={zIndex + 1}
+          data-gloom-role="resize-edge"
+          data-edge={id}
+          style={resizeEdgeStyle(rect, edges)}
+          onMouseDown={(event: any) => actions.floatResizeStart(paneId, rect, event, edges)}
+          onMouseDrag={actions.drag}
+          onMouseDragEnd={actions.drag}
+        />
+      ))}
+    </>
+  );
+});
+
 /**
  * A floating pane, drawn at its layout rect or where a drag has it right now.
  * On the desktop a move never renders: the pane's layer is promoted at the
  * press and each frame of the move only writes its transform (see
  * `useLiveBoxFrame`), so nothing inside it re-renders, lays out or repaints
  * until the release commits the new position. A resize writes the frame's
- * size the same way, on the same layer, and the header, body and footer
- * stretch with it; the content keeps its size and renders at the new one a
- * few times a second (`useLiveResizeRect`). Every terminal frame redraws it
- * at the drag's rect.
+ * size the same way, on the same layer (moved too when a left or top edge
+ * leads), and the header, body, footer and content stretch with it; what the
+ * content lays out on the cell grid renders at the new size a few times a
+ * second (`useLiveCatchUp`), and charts and heat maps follow the frame in
+ * between (`useLiveStretch`). Every terminal frame redraws it at the drag's
+ * rect.
  */
 const FloatingPaneLayer = memo(function FloatingPaneLayer({
   live,
@@ -312,15 +455,14 @@ const FloatingPaneLayer = memo(function FloatingPaneLayer({
     return geometry.floating.rect;
   }, [paneId, slide]);
   const dragRect = useLiveDrag(live, selectRedraw);
-  const selectResizing = useCallback((geometry: LiveDragGeometry) => (
-    slide && geometry.paneResize?.paneId === paneId
-  ), [paneId, slide]);
-  const resizing = useLiveDrag(live, selectResizing);
   const layerRef = useRef<BoxRenderable | null>(null);
   const frameOf = useMemo(() => (slide ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
     // A resize keeps the pane on its own layer too: the panes it uncovers or
-    // covers never repaint, only the pane does.
-    if (geometry.paneResize?.paneId === paneId) return { dx: 0, dy: 0 };
+    // covers never repaint, only the pane does. A left or top edge moves it.
+    if (geometry.paneResize?.paneId === paneId) {
+      const resized = geometry.floating?.paneId === paneId ? constrainFloatingRectToBounds(geometry.floating.rect, width, contentHeight) : null;
+      return resized ? { dx: resized.x - rect.x, dy: resized.y - rect.y } : { dx: 0, dy: 0 };
+    }
     if (geometry.paneDrag?.paneId !== paneId) return null;
     const moving = geometry.floating?.paneId === paneId ? geometry.floating.rect : null;
     // Promoted from the press, so the first move already only slides it.
@@ -330,26 +472,35 @@ const FloatingPaneLayer = memo(function FloatingPaneLayer({
   } : null), [contentHeight, paneId, rect.x, rect.y, slide, width]);
   useLiveBoxFrame(live, layerRef, frameOf);
   const frameRef = useRef<BoxRenderable | null>(null);
-  const sizeOf = useMemo(() => (slide ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
+  const sizeOf = useMemo(() => (slide ? (geometry: LiveDragGeometry): CellSize | null => {
     if (geometry.paneResize?.paneId !== paneId || geometry.floating?.paneId !== paneId) return null;
     const at = constrainFloatingRectToBounds(geometry.floating.rect, width, contentHeight);
     return { width: at.width, height: at.height };
   } : null), [contentHeight, paneId, slide, width]);
   useLiveBoxFrame(live, frameRef, sizeOf);
-  const resizeRect = useLiveResizeRect(live, paneId, slide);
+  const selectCatchUp = useMemo(() => (slide ? (geometry: LiveDragGeometry) => {
+    if (geometry.paneResize?.paneId !== paneId || geometry.floating?.paneId !== paneId) return null;
+    const resized = constrainFloatingRectToBounds(geometry.floating.rect, width, contentHeight);
+    return sameRect(resized, rect) ? null : resized;
+  } : null), [contentHeight, paneId, rect, slide, width]);
+  const resizeRect = useLiveCatchUp(live, selectCatchUp);
   const preview = dragRect
     ? constrainFloatingRectToBounds(dragRect, width, contentHeight)
-    : resizeRect && !sameRect(resizeRect, rect)
-      ? constrainFloatingRectToBounds(resizeRect, width, contentHeight)
+    // The content catches up with the size; a left or top edge's move stays
+    // on the layer's offset until the release lays it out.
+    : resizeRect
+      ? { ...rect, width: resizeRect.width, height: resizeRect.height }
       : rect;
+  const liveFrame = useLivePaneFrame(live, preview, sizeOf);
   const content = (
-    <FloatingPaneFrame
-      {...frame}
-      rect={preview}
-      zIndex={zIndex}
-      frameRef={slide ? frameRef : undefined}
-      contentPinned={resizing}
-    />
+    <LivePaneFrameContext.Provider value={liveFrame}>
+      <FloatingPaneFrame
+        {...frame}
+        rect={preview}
+        zIndex={zIndex}
+        frameRef={slide ? frameRef : undefined}
+      />
+    </LivePaneFrameContext.Provider>
   );
   if (!slide) return content;
   return (
@@ -363,13 +514,17 @@ const FloatingPaneLayer = memo(function FloatingPaneLayer({
       zIndex={zIndex}
     >
       {content}
+      {frame.movable && !frame.hidden && (
+        <FloatingResizeEdges paneId={paneId} rect={rect} zIndex={zIndex} actions={frame.actions} />
+      )}
     </Box>
   );
 });
 
 /**
  * A tiled split's divider, which follows the pointer while it is dragged: on
- * the desktop by restyling itself each move, in the terminal by redrawing.
+ * the desktop by restyling itself each move, with the dividers inside the
+ * split it resizes, in the terminal by redrawing.
  */
 const DockDividerLayer = memo(function DockDividerLayer({
   divider,
@@ -385,6 +540,7 @@ const DockDividerLayer = memo(function DockDividerLayer({
   nativePaneChrome: boolean;
   actions: PaneLayerActions;
 }) {
+  const colors = useThemeColors();
   const dividerPathKey = pathKey(divider.path);
   const selectDragged = useCallback((geometry: LiveDragGeometry) => (
     geometry.divider?.pathKey === dividerPathKey
@@ -396,8 +552,10 @@ const DockDividerLayer = memo(function DockDividerLayer({
   const previewRect = useLiveDrag(live, nativePaneChrome ? selectNothing : selectRect);
   const boxRef = useRef<BoxRenderable | null>(null);
   const frameOf = useMemo(() => (nativePaneChrome ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
+    const placed = geometry.dock?.dividers.get(dividerPathKey);
+    if (placed) return { x: placed.x, y: placed.y, width: placed.width, height: placed.height };
     const at = geometry.divider?.pathKey === dividerPathKey ? geometry.divider.rect : null;
-    return at ? { dx: at.x - divider.rect.x, dy: at.y - divider.rect.y } : null;
+    return at && (at.x !== divider.rect.x || at.y !== divider.rect.y) ? { dx: at.x - divider.rect.x, dy: at.y - divider.rect.y } : null;
   } : null), [divider.rect.x, divider.rect.y, dividerPathKey, nativePaneChrome]);
   useLiveBoxFrame(live, boxRef, frameOf);
   const active = dragged || resizing;
@@ -439,6 +597,8 @@ export function ShellPaneLayers({
   handleNativePaneContextMenu,
   handleNativePaneMouseDown,
   handlePaneAction,
+  handlePaneHelp,
+  handlePaneAsk,
   hoveredPaneId,
   live,
   menuPaneId,
@@ -489,6 +649,8 @@ export function ShellPaneLayers({
     handleNativePaneContextMenu,
     handleNativePaneMouseDown,
     handlePaneAction,
+    handlePaneHelp,
+    handlePaneAsk,
     setHoveredPaneIfChanged,
     startNativeDividerDrag,
     startNativeDockedDrag,
@@ -503,6 +665,8 @@ export function ShellPaneLayers({
     handleNativePaneContextMenu,
     handleNativePaneMouseDown,
     handlePaneAction,
+    handlePaneHelp,
+    handlePaneAsk,
     setHoveredPaneIfChanged,
     startNativeDividerDrag,
     startNativeDockedDrag,
@@ -515,10 +679,12 @@ export function ShellPaneLayers({
     hover: (paneId) => handlersRef.current.setHoveredPaneIfChanged(paneId),
     dockedDragStart: (paneId, rect, event) => handlersRef.current.startNativeDockedDrag(paneId, rect, event),
     floatingDragStart: (paneId, rect, event) => handlersRef.current.startNativeFloatingDrag(paneId, rect, event),
-    floatResizeStart: (paneId, rect, event) => handlersRef.current.startNativeFloatResize(paneId, rect, event),
+    floatResizeStart: (paneId, rect, event, edges) => handlersRef.current.startNativeFloatResize(paneId, rect, event, edges),
     drag: (event) => handlersRef.current.handleNativeDrag(event),
     contextMenu: (paneId, rect, event) => handlersRef.current.handleNativePaneContextMenu(paneId, rect, event),
     menu: (paneId, rect, event) => handlersRef.current.handlePaneAction(paneId, rect, event),
+    help: (paneId) => handlersRef.current.handlePaneHelp(paneId),
+    ask: (paneId) => handlersRef.current.handlePaneAsk?.(paneId),
     closeMouseDown: (paneId, event) => handlersRef.current.handleFloatingCloseMouseDown(paneId, event),
     close: (paneId) => handlersRef.current.handleFloatingClose(paneId),
     restoreFullscreen: (event) => handlersRef.current.handleRestoreFullscreen(event),
@@ -542,6 +708,7 @@ export function ShellPaneLayers({
       movable: !transientFocusActive,
       nativePaneChrome,
       nativeContextMenu,
+      canAsk: handlePaneAsk !== null,
       getPaneQuickSettings,
       actions,
     };
@@ -557,6 +724,7 @@ export function ShellPaneLayers({
           <DockedPaneLayer
             key={`dock:${leaf.instanceId}`}
             {...layerProps(pane, transientFocusActive ? fullscreenRect : leaf.rect)}
+            live={live}
           />
         );
       })}

package/src/components/layout/shell/pane/management-shortcuts.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useShortcut } from "../../../../react/input";
 import { useKeybindings } from "../../../../app/keybindings";
 import type { WindowEditMode } from "../../../../plugins/registry";
@@ -9,12 +9,14 @@ import {
   resetDoubleEscapeClose,
   takeDoubleEscapeClose,
 } from "../../../../utils/double-escape-close";
+import { createOneShots } from "../../../../utils/one-shot";
 import {
   inputCaptureAllowsPaneManagementShortcut,
   resolvePaneManagementShortcut,
 } from "../shortcuts";
 
 interface ShellPaneManagementShortcutOptions {
+  askAboutFocusedPane(): boolean;
   cancelActiveDrag(): void;
   closeAllFloatingPanes(): boolean;
   closeFocusedPane(): boolean;
@@ -37,6 +39,7 @@ interface ShellPaneManagementShortcutOptions {
 }
 
 export function useShellPaneManagementShortcuts({
+  askAboutFocusedPane,
   cancelActiveDrag,
   closeAllFloatingPanes,
   closeFocusedPane,
@@ -58,6 +61,8 @@ export function useShellPaneManagementShortcuts({
   toggleFocusedPaneNewLayout,
 }: ShellPaneManagementShortcutOptions): void {
   const doubleEscapeCloseRef = useRef(createDoubleEscapeCloseState());
+  // A key held down, or a trigger with no repeat flag, runs each action once.
+  const [shots] = useState(createOneShots);
   const keybindings = useKeybindings();
 
   useEffect(() => {
@@ -70,10 +75,37 @@ export function useShellPaneManagementShortcuts({
     const shortcut = resolvePaneManagementShortcut(event, keybindings);
     if (shortcut === "toggle-fullscreen" && !overlayOpen) {
       if (!inputCaptured || inputCaptureAllowsPaneManagementShortcut(shortcut, event)) {
+        if (shots.get(shortcut).refuses(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
         if (hasActiveDrag()) {
           cancelActiveDrag();
         }
         if (toggleFocusedPaneFullscreen()) {
+          shots.get(shortcut).end();
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+    }
+
+    // Ask Gloom is a modifier chord no pane binds, so it goes ahead of the
+    // panes, whichever mounted last: one that read a plain `a` without
+    // checking modifiers would otherwise take Alt+A.
+    if (shortcut === "ask" && !overlayOpen && !hasActiveDrag()) {
+      if (!inputCaptured || inputCaptureAllowsPaneManagementShortcut(shortcut, event)) {
+        // A held Alt+A hands the pane over once: its repeats reach this handler as plain presses.
+        if (shots.get(shortcut).refuses(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        if (askAboutFocusedPane()) {
+          shots.get(shortcut).end();
+          resetDoubleEscapeClose(doubleEscapeCloseRef.current);
           event.preventDefault();
           event.stopPropagation();
           return;
@@ -127,7 +159,13 @@ export function useShellPaneManagementShortcuts({
   useShortcut((event) => {
     if (resolvePaneManagementShortcut(event, keybindings) !== "menu") return;
     if (hasActiveDrag() || overlayOpen || inputCaptured) return;
+    if (shots.get("menu").refuses(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     if (!openFocusedPaneMenu()) return;
+    shots.get("menu").end();
     event.preventDefault();
     event.stopPropagation();
   }, { phase: "idle" });
@@ -137,6 +175,12 @@ export function useShellPaneManagementShortcuts({
     if (!shortcut || hasActiveDrag() || overlayOpen) return;
     if (inputCaptured && !inputCaptureAllowsPaneManagementShortcut(shortcut, event)) return;
     if (shortcut === "menu") return;
+    const shot = shots.get(shortcut);
+    if (shot.refuses(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
 
     let handled = false;
     switch (shortcut) {
@@ -188,6 +232,7 @@ export function useShellPaneManagementShortcuts({
     }
 
     if (!handled) return;
+    shot.end();
     event.preventDefault();
     event.stopPropagation();
   });