gloomberb 0.3.7 → 0.4.1

package/src/components/onboarding/onboarding-wizard.test.tsx

@@ -65,6 +65,20 @@ async function emitKeypress(
   });
 }
 
+async function waitForFrameToContain(text: string, attempts = 8): Promise<string> {
+  for (let index = 0; index < attempts; index += 1) {
+    const frame = testSetup!.captureCharFrame();
+    if (frame.includes(text)) {
+      return frame;
+    }
+    await act(async () => {
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+  }
+  throw new Error(`Timed out waiting for "${text}".`);
+}
+
 afterEach(async () => {
   if (testSetup) {
     await act(async () => {
@@ -79,6 +93,57 @@ afterEach(async () => {
 });
 
 describe("OnboardingWizard", () => {
+  test("uses backspace to go back when not editing and keeps backspace for text deletion while editing", async () => {
+    const pluginRegistry = {
+      allPlugins: new Map(),
+      brokers: new Map(),
+      paneTemplates: new Map(),
+      getPaneTemplatePluginId: () => undefined,
+      tickerRepository: createTickerRepository(),
+      persistence: { resources: undefined },
+    } as unknown as PluginRegistry;
+
+    testSetup = await testRender(
+      <OnboardingWizard
+        config={createDefaultConfig("/tmp/gloomberb-onboarding-backspace")}
+        pluginRegistry={pluginRegistry}
+        onComplete={() => {}}
+      />,
+      { width: 90, height: 28 },
+    );
+    await testSetup.renderOnce();
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    let frame = await waitForFrameToContain("Theme");
+    expect(frame).toContain("Theme");
+
+    await act(async () => {
+      testSetup!.mockInput.pressBackspace();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    frame = await waitForFrameToContain("Let's set things up (~30s).");
+    expect(frame).toContain("Let's set things up (~30s).");
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    frame = await waitForFrameToContain("Theme");
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    frame = await waitForFrameToContain("Create Manual Portfolio");
+    expect(frame).toContain("Create Manual Portfolio");
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    frame = await waitForFrameToContain("Main Portfolio");
+    expect(frame).toContain("Main Portfolio");
+
+    await act(async () => {
+      testSetup!.mockInput.pressBackspace();
+      await testSetup!.renderOnce();
+    });
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfoli");
+    expect(frame).not.toContain("Create Manual Portfolio");
+  });
+
   test("waits for broker positions to import before completing onboarding", async () => {
     tempDataDir = await mkdtemp(join(tmpdir(), "gloomberb-onboarding-"));
     const importDeferred = createDeferred<any[]>();

package/src/components/onboarding/onboarding-wizard.tsx

@@ -10,6 +10,7 @@ import type { PluginRegistry } from "../../plugins/registry";
 import { resolveBrokerConfigFields, type BrokerAdapter, type BrokerConfigField } from "../../types/broker";
 import { buildIbkrConfigFromValues } from "../../plugins/ibkr/config";
 import { createBrokerInstanceId } from "../../utils/broker-instances";
+import { isBackNavigationKey, isPlainEscape } from "../../utils/back-navigation";
 import { syncBrokerInstance } from "../../brokers/sync-broker-instance";
 import { debugLog } from "../../utils/debug-log";
 import { ToggleList, type ToggleListItem } from "../toggle-list";
@@ -415,7 +416,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
             }
           }
         }
-      } else if (event.name === "escape") {
+      } else if (isPlainEscape(event)) {
         setEditingField(false);
         if (portfolioSub === "broker-fields") {
           setPortfolioSub("broker-setup");
@@ -506,7 +507,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
         }
       }
       nextStep();
-    } else if (event.name === "escape") {
+    } else if (isBackNavigationKey(event)) {
       if (step === "portfolio" && portfolioSub === "broker-sync") {
         resetBrokerSync();
         setPortfolioSub("broker-fields");
@@ -693,9 +694,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
           </box>
         </box>
         <box height={1} flexDirection="row" width={contentWidth}>
-          <box flexGrow={1}>
-            {stepIdx > 0 && <text fg={colors.textMuted}>{"<- back"}</text>}
-          </box>
+          <box flexGrow={1} />
           <box>
             <text fg={colors.textMuted}>{hintText}</text>
           </box>
@@ -1024,7 +1023,7 @@ function PortfolioStep({
           <text fg={colors.textDim}>
             {brokerSyncing
               ? "This happens now so your portfolio is ready before onboarding finishes."
-              : "Press Enter to retry, or Esc to edit the broker settings."}
+              : "Press Enter to retry, or Backspace to edit the broker settings."}
           </text>
         </box>
       </box>

package/src/components/ticker-list-table.test.tsx

@@ -0,0 +1,83 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useState } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { ColumnConfig } from "../types/config";
+import type { TickerFinancials } from "../types/financials";
+import type { TickerRecord } from "../types/ticker";
+import { TickerListTable, type TickerTableCell } from "./ticker-list-table";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let setHarnessCursorSymbol: ((symbol: string) => void) | null = null;
+let resolveCellCallCount = 0;
+
+const columns: ColumnConfig[] = [
+  { id: "ticker", label: "Ticker", width: 6, align: "left" },
+];
+const financialsMap = new Map<string, TickerFinancials>();
+const tickers: TickerRecord[] = [
+  { metadata: { ticker: "AAPL", exchange: "NASDAQ", currency: "USD", name: "Apple", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
+  { metadata: { ticker: "MSFT", exchange: "NASDAQ", currency: "USD", name: "Microsoft", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
+  { metadata: { ticker: "NVDA", exchange: "NASDAQ", currency: "USD", name: "NVIDIA", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
+];
+
+function noop(_index: number | null): void {}
+
+function resolveCell(_column: ColumnConfig, ticker: TickerRecord, _financials: TickerFinancials | undefined): TickerTableCell {
+  resolveCellCallCount += 1;
+  return { text: ticker.metadata.ticker };
+}
+
+function TickerListTableHarness() {
+  const [cursorSymbol, setCursorSymbol] = useState("AAPL");
+  setHarnessCursorSymbol = (symbol: string) => setCursorSymbol(symbol);
+
+  return (
+    <TickerListTable
+      columns={columns}
+      tickers={tickers}
+      cursorSymbol={cursorSymbol}
+      hoveredIdx={null}
+      setHoveredIdx={noop}
+      setCursorSymbol={setCursorSymbol}
+      resolveCell={resolveCell}
+      financialsMap={financialsMap}
+    />
+  );
+}
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  resolveCellCallCount = 0;
+  setHarnessCursorSymbol = null;
+});
+
+describe("TickerListTable", () => {
+  test("recomputes cells only for rows whose selection state changed", async () => {
+    testSetup = await testRender(
+      <TickerListTableHarness />,
+      { width: 20, height: 6 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    const initialCallCount = resolveCellCallCount;
+
+    await act(async () => {
+      setHarnessCursorSymbol?.("MSFT");
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    expect(initialCallCount).toBeGreaterThan(0);
+    expect(resolveCellCallCount - initialCallCount).toBe(2);
+  });
+});

package/src/components/ticker-list-table.tsx

@@ -1,4 +1,4 @@
-import { useRef, type RefObject } from "react";
+import { memo, useRef, type RefObject } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
 import { EmptyState } from "./ui";
 import { colors, hoverBg } from "../theme/colors";
@@ -13,6 +13,11 @@ export interface TickerTableCell {
 }
 
 export type QuoteFlashDirection = "up" | "down" | "flat";
+type ResolveTickerTableCell = (
+  column: ColumnConfig,
+  ticker: TickerRecord,
+  financials: TickerFinancials | undefined,
+) => TickerTableCell;
 
 const FLASHABLE_QUOTE_COLUMN_IDS = new Set([
   "price",
@@ -39,6 +44,160 @@ function resolveQuoteFlashColor(direction: QuoteFlashDirection, fallbackColor: s
   }
 }
 
+interface TickerListTableProps {
+  columns: ColumnConfig[];
+  tickers: TickerRecord[];
+  cursorSymbol: string | null;
+  hoveredIdx: number | null;
+  setHoveredIdx: (index: number | null) => void;
+  setCursorSymbol: (symbol: string) => void;
+  resolveCell: ResolveTickerTableCell;
+  financialsMap: Map<string, TickerFinancials>;
+  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
+  scrollRef?: RefObject<ScrollBoxRenderable | null>;
+  syncHeaderScroll?: () => void;
+  onBodyScrollActivity?: () => void;
+  flashSymbols?: Map<string, QuoteFlashDirection>;
+  sortColumnId?: string | null;
+  sortDirection?: "asc" | "desc";
+  onHeaderClick?: (columnId: string) => void;
+  onRowActivate?: (ticker: TickerRecord) => void;
+  emptyTitle?: string;
+  emptyHint?: string;
+}
+
+const TickerListHeader = memo(function TickerListHeader({
+  columns,
+  headerScrollRef,
+  sortColumnId,
+  sortDirection,
+  onHeaderClick,
+}: {
+  columns: ColumnConfig[];
+  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
+  sortColumnId?: string | null;
+  sortDirection?: "asc" | "desc";
+  onHeaderClick?: (columnId: string) => void;
+}) {
+  return (
+    <scrollbox
+      ref={headerScrollRef}
+      height={1}
+      scrollX
+      focusable={false}
+    >
+      <box
+        flexDirection="row"
+        height={1}
+        width="100%"
+        paddingX={1}
+        backgroundColor={colors.panel}
+      >
+        {columns.map((column) => {
+          const isSorted = sortColumnId === column.id;
+          const indicator = isSorted ? (sortDirection === "asc" ? " \u25B2" : " \u25BC") : "";
+          const labelText = column.label + indicator;
+          return (
+            <box
+              key={column.id}
+              width={column.width + 1}
+              backgroundColor={colors.panel}
+              onMouseDown={onHeaderClick ? (event) => {
+                event.preventDefault();
+                onHeaderClick(column.id);
+              } : undefined}
+            >
+              <text attributes={TextAttributes.BOLD} fg={isSorted ? colors.text : colors.textDim}>
+                {padTo(labelText, column.width, column.align)}
+              </text>
+            </box>
+          );
+        })}
+      </box>
+    </scrollbox>
+  );
+});
+
+const TickerListRow = memo(function TickerListRow({
+  columns,
+  ticker,
+  index,
+  isSelected,
+  isHovered,
+  financials,
+  flashDirection,
+  setHoveredIdx,
+  setCursorSymbol,
+  resolveCell,
+  onRowActivate,
+}: {
+  columns: ColumnConfig[];
+  ticker: TickerRecord;
+  index: number;
+  isSelected: boolean;
+  isHovered: boolean;
+  financials: TickerFinancials | undefined;
+  flashDirection: QuoteFlashDirection | undefined;
+  setHoveredIdx: (index: number | null) => void;
+  setCursorSymbol: (symbol: string) => void;
+  resolveCell: ResolveTickerTableCell;
+  onRowActivate?: (ticker: TickerRecord) => void;
+}) {
+  const lastActivatedAtRef = useRef<number | null>(null);
+  const rowBg = isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg;
+
+  return (
+    <box
+      flexDirection="row"
+      height={1}
+      paddingX={1}
+      backgroundColor={rowBg}
+      onMouseMove={() => setHoveredIdx(index)}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        setCursorSymbol(ticker.metadata.ticker);
+        if (!onRowActivate) return;
+        const now = Date.now();
+        if (lastActivatedAtRef.current != null && now - lastActivatedAtRef.current <= 350) {
+          lastActivatedAtRef.current = null;
+          onRowActivate(ticker);
+          return;
+        }
+        lastActivatedAtRef.current = now;
+      }}
+    >
+      {columns.map((column) => {
+        const { text, color } = resolveCell(column, ticker, financials);
+        const baseFg = color || (isSelected ? colors.selectedText : colors.text);
+        const shouldFlash = flashDirection != null && FLASHABLE_QUOTE_COLUMN_IDS.has(column.id);
+        const cellFg = shouldFlash
+          ? resolveQuoteFlashColor(flashDirection, baseFg)
+          : baseFg;
+
+        return (
+          <box key={column.id} width={column.width + 1}>
+            <text fg={cellFg}>
+              {padTo(text, column.width, column.align)}
+            </text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}, (previous, next) => (
+  previous.columns === next.columns
+  && previous.ticker === next.ticker
+  && previous.index === next.index
+  && previous.isSelected === next.isSelected
+  && previous.isHovered === next.isHovered
+  && previous.financials === next.financials
+  && previous.flashDirection === next.flashDirection
+  && previous.setHoveredIdx === next.setHoveredIdx
+  && previous.setCursorSymbol === next.setCursorSymbol
+  && previous.resolveCell === next.resolveCell
+  && previous.onRowActivate === next.onRowActivate
+));
+
 export function TickerListTable({
   columns,
   tickers,
@@ -59,60 +218,18 @@ export function TickerListTable({
   onRowActivate,
   emptyTitle = "No tickers.",
   emptyHint = "Press Ctrl+P to add one.",
-}: {
-  columns: ColumnConfig[];
-  tickers: TickerRecord[];
-  cursorSymbol: string | null;
-  hoveredIdx: number | null;
-  setHoveredIdx: (index: number | null) => void;
-  setCursorSymbol: (symbol: string) => void;
-  resolveCell: (column: ColumnConfig, ticker: TickerRecord, financials: TickerFinancials | undefined) => TickerTableCell;
-  financialsMap: Map<string, TickerFinancials>;
-  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
-  scrollRef?: RefObject<ScrollBoxRenderable | null>;
-  syncHeaderScroll?: () => void;
-  onBodyScrollActivity?: () => void;
-  flashSymbols?: Map<string, QuoteFlashDirection>;
-  sortColumnId?: string | null;
-  sortDirection?: "asc" | "desc";
-  onHeaderClick?: (columnId: string) => void;
-  onRowActivate?: (ticker: TickerRecord) => void;
-  emptyTitle?: string;
-  emptyHint?: string;
-}) {
+}: TickerListTableProps) {
   const safeFlashSymbols = flashSymbols ?? new Map<string, QuoteFlashDirection>();
-  const lastActivatedRef = useRef<{ symbol: string; at: number } | null>(null);
 
   return (
     <>
-      <scrollbox
-        ref={headerScrollRef}
-        height={1}
-        scrollX
-        focusable={false}
-      >
-        <box flexDirection="row" height={1} paddingX={1}>
-          {columns.map((column) => {
-            const isSorted = sortColumnId === column.id;
-            const indicator = isSorted ? (sortDirection === "asc" ? " \u25B2" : " \u25BC") : "";
-            const labelText = column.label + indicator;
-            return (
-              <box
-                key={column.id}
-                width={column.width + 1}
-                onMouseDown={onHeaderClick ? (event) => {
-                  event.preventDefault();
-                  onHeaderClick(column.id);
-                } : undefined}
-              >
-                <text attributes={TextAttributes.BOLD} fg={isSorted ? colors.text : colors.textDim}>
-                  {padTo(labelText, column.width, column.align)}
-                </text>
-              </box>
-            );
-          })}
-        </box>
-      </scrollbox>
+      <TickerListHeader
+        columns={columns}
+        headerScrollRef={headerScrollRef}
+        sortColumnId={sortColumnId}
+        sortDirection={sortDirection}
+        onHeaderClick={onHeaderClick}
+      />
 
       <scrollbox
         ref={scrollRef}
@@ -131,54 +248,21 @@ export function TickerListTable({
           </box>
         ) : (
           tickers.map((ticker, index) => {
-            const isSelected = ticker.metadata.ticker === cursorSymbol;
-            const isHovered = index === hoveredIdx && !isSelected;
-            const financials = financialsMap.get(ticker.metadata.ticker);
-            const rowBg = isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg;
-            const flashDirection = safeFlashSymbols.get(ticker.metadata.ticker);
-
             return (
-              <box
+              <TickerListRow
                 key={ticker.metadata.ticker}
-                flexDirection="row"
-                height={1}
-                paddingX={1}
-                backgroundColor={rowBg}
-                onMouseMove={() => setHoveredIdx(index)}
-                onMouseDown={(event) => {
-                  event.preventDefault();
-                  setCursorSymbol(ticker.metadata.ticker);
-                  if (!onRowActivate) return;
-                  const now = Date.now();
-                  const last = lastActivatedRef.current;
-                  if (last?.symbol === ticker.metadata.ticker && now - last.at <= 350) {
-                    lastActivatedRef.current = null;
-                    onRowActivate(ticker);
-                    return;
-                  }
-                  lastActivatedRef.current = {
-                    symbol: ticker.metadata.ticker,
-                    at: now,
-                  };
-                }}
-              >
-                {columns.map((column) => {
-                  const { text, color } = resolveCell(column, ticker, financials);
-                  const baseFg = color || (isSelected ? colors.selectedText : colors.text);
-                  const shouldFlash = flashDirection != null && FLASHABLE_QUOTE_COLUMN_IDS.has(column.id);
-                  const cellFg = shouldFlash
-                    ? resolveQuoteFlashColor(flashDirection, baseFg)
-                    : baseFg;
-
-                  return (
-                    <box key={column.id} width={column.width + 1}>
-                      <text fg={cellFg}>
-                        {padTo(text, column.width, column.align)}
-                      </text>
-                    </box>
-                  );
-                })}
-              </box>
+                columns={columns}
+                ticker={ticker}
+                index={index}
+                isSelected={ticker.metadata.ticker === cursorSymbol}
+                isHovered={index === hoveredIdx && ticker.metadata.ticker !== cursorSymbol}
+                financials={financialsMap.get(ticker.metadata.ticker)}
+                flashDirection={safeFlashSymbols.get(ticker.metadata.ticker)}
+                setHoveredIdx={setHoveredIdx}
+                setCursorSymbol={setCursorSymbol}
+                resolveCell={resolveCell}
+                onRowActivate={onRowActivate}
+              />
             );
           })
         )}

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

@@ -1,8 +1,10 @@
-import { useMemo, useState, type RefObject } from "react";
+import { useCallback, useMemo, useState, type RefObject } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
 import { colors, hoverBg } from "../../theme/colors";
 import type { ColumnConfig } from "../../types/config";
+import { useAppDispatch, usePaneInstance } from "../../state/app-context";
 import { padTo } from "../../utils/format";
+import { useDoubleClickActivation } from "../use-double-click-activation";
 import { EmptyState } from "./status";
 
 export type DataTableColumn = Pick<
@@ -34,6 +36,7 @@ export interface DataTableProps<
   getItemKey: (item: T, index: number) => string;
   isSelected: (item: T, index: number) => boolean;
   onSelect: (item: T, index: number) => void;
+  onActivate?: (item: T, index: number) => void;
   renderCell: (
     item: T,
     column: C,
@@ -46,6 +49,11 @@ export interface DataTableProps<
   overscan?: number;
 }
 
+interface DataTableRowPointerTarget<T> {
+  item: T;
+  index: number;
+}
+
 export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
   columns,
   items,
@@ -61,12 +69,15 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
   getItemKey,
   isSelected,
   onSelect,
+  onActivate,
   renderCell,
   emptyStateTitle,
   emptyStateHint,
   virtualize = false,
   overscan = 3,
 }: DataTableProps<T, C>) {
+  const dispatch = useAppDispatch();
+  const paneInstanceId = usePaneInstance()?.instanceId ?? null;
   const [scrollVersion, setScrollVersion] = useState(0);
   const scrollTop = virtualize ? (scrollRef.current?.scrollTop ?? 0) : 0;
   const viewportHeight = virtualize
@@ -80,6 +91,17 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
     () => items.slice(startIndex, endIndex),
     [endIndex, items, scrollVersion, startIndex],
   );
+  const handleRowMouseDown =
+    useDoubleClickActivation<DataTableRowPointerTarget<T>>({
+      onSelect: ({ item, index }) => {
+        onSelect(item, index);
+      },
+      onActivate: onActivate
+        ? ({ item, index }) => {
+            onActivate(item, index);
+          }
+        : undefined,
+    });
 
   const handleBodyScrollActivity = () => {
     if (virtualize) {
@@ -87,11 +109,21 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
     }
     onBodyScrollActivity();
   };
+  const focusPane = useCallback(() => {
+    if (!paneInstanceId) return;
+    dispatch({ type: "FOCUS_PANE", paneId: paneInstanceId });
+  }, [dispatch, paneInstanceId]);
 
   return (
     <>
       <scrollbox ref={headerScrollRef} height={1} scrollX focusable={false}>
-        <box flexDirection="row" height={1} paddingX={1}>
+        <box
+          flexDirection="row"
+          height={1}
+          width="100%"
+          paddingX={1}
+          backgroundColor={colors.panel}
+        >
           {columns.map((column) => {
             const isSorted = sortColumnId === column.id;
             const indicator = isSorted
@@ -108,7 +140,9 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
               <box
                 key={column.id}
                 width={column.width + 1}
+                backgroundColor={colors.panel}
                 onMouseDown={(event) => {
+                  focusPane();
                   event.preventDefault();
                   onHeaderClick(column.id);
                 }}
@@ -131,7 +165,10 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
         scrollX
         scrollY
         focusable={false}
-        onMouseDown={() => queueMicrotask(syncHeaderScroll)}
+        onMouseDown={() => {
+          focusPane();
+          queueMicrotask(syncHeaderScroll);
+        }}
         onMouseUp={() => queueMicrotask(handleBodyScrollActivity)}
         onMouseDrag={() => queueMicrotask(handleBodyScrollActivity)}
         onMouseScroll={() => queueMicrotask(handleBodyScrollActivity)}
@@ -162,8 +199,12 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
                   backgroundColor={rowBg}
                   onMouseMove={() => setHoveredIdx(index)}
                   onMouseDown={(event) => {
+                    focusPane();
                     event.preventDefault();
-                    onSelect(item, index);
+                    handleRowMouseDown(getItemKey(item, index), {
+                      item,
+                      index,
+                    });
                   }}
                 >
                   {columns.map((column) => {
@@ -176,13 +217,17 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
                         key={column.id}
                         width={column.width + 1}
                         onMouseDown={(event) => {
+                          focusPane();
                           if (cell.onMouseDown) {
                             cell.onMouseDown(event);
                             return;
                           }
                           event.preventDefault();
                           event.stopPropagation?.();
-                          onSelect(item, index);
+                          handleRowMouseDown(getItemKey(item, index), {
+                            item,
+                            index,
+                          });
                         }}
                       >
                         <text

package/src/components/ui/index.ts

@@ -43,6 +43,7 @@ export { Section, FieldRow, DialogFrame } from "./frame";
 export type { SectionProps, FieldRowProps, DialogFrameProps } from "./frame";
 
 export { ExternalLink, openUrl } from "./external-link";
+export { PageStackView } from "./page-stack-view";
 
 export { Spinner, ProgressBar, SkeletonRow, LoadingBlock } from "./loading";
 export type {