gloomberb 0.10.0 → 0.10.2

package/src/components/pane-template-wizard.tsx

@@ -6,6 +6,7 @@ import type { WizardStep } from "../types/plugin";
 import { colors } from "../theme/colors";
 import { isPlainKey } from "../utils/keyboard";
 import { DialogFrame, ListView, TextField } from "./ui";
+import { t } from "../i18n";
 
 export function PaneTemplateInfoStep({
   dismiss,
@@ -24,7 +25,7 @@ export function PaneTemplateInfoStep({
       <Box flexDirection="column">
         {step.body?.map((line, index) => (
           <Box key={`${step.key}:${index}`} height={1}>
-            <Text fg={colors.textDim}>{line || " "}</Text>
+            <Text fg={colors.textDim}>{line ? t(line) : " "}</Text>
           </Box>
         ))}
       </Box>
@@ -55,14 +56,14 @@ export function PaneTemplateInputStep({
       <Box flexDirection="column">
         {step.body?.map((line, index) => (
           <Box key={`${step.key}:${index}`} height={1}>
-            <Text fg={colors.textDim}>{line || " "}</Text>
+            <Text fg={colors.textDim}>{line ? t(line) : " "}</Text>
           </Box>
         ))}
         <Box height={1} />
         <TextField
           inputRef={inputRef}
           value={value}
-          placeholder={step.placeholder || ""}
+          placeholder={step.placeholder ? t(step.placeholder) : ""}
           type={step.type === "password" ? "password" : "text"}
           focused
           onChange={setValue}
@@ -112,7 +113,7 @@ export function PaneTemplateTextareaStep({
       <Box flexDirection="column" flexGrow={1}>
         {step.body?.map((line, index) => (
           <Box key={`${step.key}:${index}`} height={1}>
-            <Text fg={colors.textDim}>{line || " "}</Text>
+            <Text fg={colors.textDim}>{line ? t(line) : " "}</Text>
           </Box>
         ))}
         <Box height={1} />
@@ -126,7 +127,7 @@ export function PaneTemplateTextareaStep({
           <Textarea
             ref={textareaRef}
             initialValue={step.defaultValue ?? ""}
-            placeholder={step.placeholder || ""}
+            placeholder={step.placeholder ? t(step.placeholder) : ""}
             focused
             textColor={colors.text}
             placeholderColor={colors.textDim}
@@ -141,13 +142,13 @@ export function PaneTemplateTextareaStep({
             backgroundColor={colors.selected}
             onMouseDown={commit}
           >
-            <Text fg={colors.selectedText}>{` Save `}</Text>
+            <Text fg={colors.selectedText}>{` ${t("Save")} `}</Text>
           </Box>
           <Box
             backgroundColor={colors.panel}
             onMouseDown={() => resolve("")}
           >
-            <Text fg={colors.text}>{` Cancel `}</Text>
+            <Text fg={colors.text}>{` ${t("Cancel")} `}</Text>
           </Box>
         </Box>
       </Box>
@@ -186,14 +187,14 @@ export function PaneTemplateSelectStep({
       <Box flexDirection="column">
         {step.body?.map((line, index) => (
           <Box key={`${step.key}:${index}`} height={1}>
-            <Text fg={colors.textDim}>{line || " "}</Text>
+            <Text fg={colors.textDim}>{line ? t(line) : " "}</Text>
           </Box>
         ))}
         <Box height={1} />
         <ListView
           items={options.map((option) => ({
             id: option.value,
-            label: option.label,
+            label: t(option.label),
           }))}
           selectedIndex={selectedIndex}
           bgColor={colors.commandBg}

package/src/components/price-performance.tsx

@@ -1,24 +1,10 @@
-import { Box, ScrollBox, Text } from "../ui";
-import { blendHex, colors, priceColor } from "../theme/colors";
+import { Box, Text } from "../ui";
+import { colors, priceColor } from "../theme/colors";
 import { displayWidth, formatPercent, padTo } from "../utils/format";
 import type { PriceReturnField } from "../market-data/performance";
 
-type MouseInteractionEvent = {
-  stopPropagation?: () => void;
-  preventDefault?: () => void;
-};
-
 const STRIP_COLUMN_GAP = 1;
 const RETURN_CELL_MIN_WIDTH = 7;
-const SYMBOL_COLUMN_MIN_WIDTH = 6;
-const SYMBOL_COLUMN_MAX_WIDTH = 12;
-
-export interface PriceReturnTableRow {
-  symbol: string;
-  color: string;
-  fields: PriceReturnField[];
-  selected: boolean;
-}
 
 function formatReturnValue(value: number | null): string {
   return value == null ? "-" : formatPercent(value);
@@ -84,100 +70,3 @@ export function PriceReturnStrip({
     </Box>
   );
 }
-
-function getFieldById(fields: readonly PriceReturnField[], id: string): PriceReturnField | null {
-  return fields.find((field) => field.id === id) ?? null;
-}
-
-function chooseComparisonFieldIds(width: number, availableIds: readonly string[]): string[] {
-  const preferred = width >= 86
-    ? ["RNG", "1M", "3M", "6M", "1Y", "3Y", "5Y"]
-    : width >= 72
-      ? ["RNG", "1M", "3M", "1Y", "3Y", "5Y"]
-      : width >= 58
-        ? ["RNG", "1M", "1Y", "3Y", "5Y"]
-        : width >= 44
-          ? ["RNG", "1M", "1Y", "5Y"]
-          : ["1Y", "5Y"];
-  const available = new Set(availableIds);
-  return preferred.filter((id) => available.has(id));
-}
-
-export function PriceReturnTable({
-  height,
-  onFocusInteraction,
-  onOpenSymbol,
-  onSelectSymbol,
-  rows,
-  width,
-}: {
-  height: number;
-  onFocusInteraction?: (event: MouseInteractionEvent | null | undefined) => void;
-  onOpenSymbol: (symbol: string) => void;
-  onSelectSymbol: (symbol: string) => void;
-  rows: PriceReturnTableRow[];
-  width: number;
-}) {
-  if (height <= 0 || rows.length === 0) return null;
-
-  const availableIds = rows[0]?.fields.map((field) => field.id) ?? [];
-  const fieldIds = chooseComparisonFieldIds(width, availableIds);
-  if (fieldIds.length === 0) return null;
-
-  const valueWidth = Math.max(
-    RETURN_CELL_MIN_WIDTH,
-    Math.floor((width - SYMBOL_COLUMN_MIN_WIDTH - fieldIds.length) / Math.max(fieldIds.length, 1)),
-  );
-  const symbolWidth = Math.min(
-    SYMBOL_COLUMN_MAX_WIDTH,
-    Math.max(SYMBOL_COLUMN_MIN_WIDTH, width - fieldIds.length * (valueWidth + 1)),
-  );
-  const fieldsById = rows[0]?.fields ?? [];
-
-  return (
-    <ScrollBox height={height} scrollY>
-      <Box flexDirection="column" width={width}>
-        <Box flexDirection="row" height={1}>
-          <Text fg={colors.textDim}>{padTo("Sym", symbolWidth)}</Text>
-          {fieldIds.map((fieldId) => {
-            const field = getFieldById(fieldsById, fieldId);
-            return (
-              <Box key={fieldId} flexDirection="row">
-                <Text fg={colors.textDim}>{" "}</Text>
-                <Text fg={colors.textDim}>{padTo(field?.label ?? fieldId, valueWidth, "right")}</Text>
-              </Box>
-            );
-          })}
-        </Box>
-
-        {rows.map((row) => (
-          <Box
-            key={row.symbol}
-            flexDirection="row"
-            height={1}
-            width={width}
-            backgroundColor={row.selected ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel}
-            onMouseOver={() => onSelectSymbol(row.symbol)}
-            onMouseDown={(event: any) => {
-              onFocusInteraction?.(event);
-              onSelectSymbol(row.symbol);
-              onOpenSymbol(row.symbol);
-            }}
-          >
-            <Text fg={row.color}>{padTo(`${row.selected ? ">" : " "} ${row.symbol}`, symbolWidth)}</Text>
-            {fieldIds.map((fieldId) => {
-              const field = getFieldById(row.fields, fieldId);
-              const value = field?.value ?? null;
-              return (
-                <Box key={fieldId} flexDirection="row">
-                  <Text fg={colors.textDim}>{" "}</Text>
-                  <Text fg={returnValueColor(value)}>{padTo(formatReturnValue(value), valueWidth, "right")}</Text>
-                </Box>
-              );
-            })}
-          </Box>
-        ))}
-      </Box>
-    </ScrollBox>
-  );
-}

package/src/components/price-sparkline/model.ts

@@ -1,5 +1,6 @@
-import { colors } from "../../theme/colors";
+import { colors, type ThemeColors } from "../../theme/colors";
 import type { PricePoint } from "../../types/financials";
+import { getPricePointTimestamp } from "../../utils/price-history";
 
 const SPARKLINE_FALLBACK_POINTS = 22;
 
@@ -29,22 +30,15 @@ function closeValue(point: PricePoint): number | null {
   return Number.isFinite(point.close) ? point.close : null;
 }
 
-function getPointTime(point: PricePoint): number {
-  const value = point.date as Date | string | number | null | undefined;
-  if (value instanceof Date) return value.getTime();
-  if (value == null) return Number.NaN;
-  return new Date(value).getTime();
-}
-
 export function resolveSparklineHistory(priceHistory: PricePoint[], period: PriceSparklinePeriod = "1M"): PricePoint[] {
-  const validHistory = priceHistory.filter((point) => Number.isFinite(getPointTime(point)));
+  const validHistory = priceHistory.filter((point) => Number.isFinite(getPricePointTimestamp(point)));
   const latest = validHistory.at(-1);
   if (!latest) return [];
 
-  const latestTime = getPointTime(latest);
+  const latestTime = getPricePointTimestamp(latest);
   if (Number.isFinite(latestTime)) {
     const cutoffTime = latestTime - PERIOD_WINDOW_DAYS[period] * 86_400_000;
-    const windowHistory = validHistory.filter((point) => getPointTime(point) >= cutoffTime);
+    const windowHistory = validHistory.filter((point) => getPricePointTimestamp(point) >= cutoffTime);
     if (windowHistory.length >= 2) return windowHistory;
   }
 
@@ -57,15 +51,19 @@ export function sparklineValues(priceHistory: PricePoint[]): number[] {
     .filter((value): value is number => value != null);
 }
 
-export function sparklineColor(values: number[], trend?: PriceSparklineTrend): string {
-  if (trend === "positive") return colors.positive;
-  if (trend === "negative") return colors.negative;
-  if (trend === "neutral") return colors.textMuted;
+export function sparklineColor(
+  values: number[],
+  trend?: PriceSparklineTrend,
+  palette: ThemeColors = colors,
+): string {
+  if (trend === "positive") return palette.positive;
+  if (trend === "negative") return palette.negative;
+  if (trend === "neutral") return palette.textMuted;
 
   const first = values[0];
   const last = values.at(-1);
-  if (first == null || last == null) return colors.textMuted;
-  return last >= first ? colors.positive : colors.negative;
+  if (first == null || last == null) return palette.textMuted;
+  return last >= first ? palette.positive : palette.negative;
 }
 
 export function buildSamples(values: number[], width: number, height: number, padding: number): SparklineSample[] {

package/src/components/price-sparkline/view.tsx

@@ -7,7 +7,6 @@ import {
   useUiCapabilities,
   useUiHost,
 } from "../../ui";
-import { colors } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import type { PricePoint } from "../../types/financials";
 import { resolveNativeBitmapSize, shouldRenderNativeBitmap } from "../chart/native/bitmap-support";
@@ -37,16 +36,18 @@ function DesktopPriceSparkline({
   width,
   height,
   color,
+  emptyColor,
 }: {
   values: number[];
   width: number;
   height: number;
   color: string;
+  emptyColor: string;
 }) {
   const svgWidth = Math.max(24, width * 8);
   const svgHeight = Math.max(18, height * 18);
   const path = svgPath(buildSamples(values, svgWidth, svgHeight, 2));
-  if (!path) return <Text fg={colors.textMuted}>{" "}</Text>;
+  if (!path) return <Text fg={emptyColor}>{" "}</Text>;
 
   return (
     <Box width={width} height={height} justifyContent="center" overflow="hidden">
@@ -149,7 +150,7 @@ export function PriceSparkline({
   height?: number;
   area?: boolean;
 }) {
-  useThemeColors();
+  const colors = useThemeColors();
   const uiHost = useUiHost();
   const sparklineHistory = useMemo(() => resolveSparklineHistory(priceHistory ?? [], period), [period, priceHistory]);
   const values = useMemo(() => sparklineValues(sparklineHistory), [sparklineHistory]);
@@ -157,9 +158,9 @@ export function PriceSparkline({
     return <Text fg={colors.textMuted}>{" "}</Text>;
   }
 
-  const color = sparklineColor(values, trend);
+  const color = sparklineColor(values, trend, colors);
   return uiHost.kind === "desktop-web"
-    ? <DesktopPriceSparkline values={values} width={width} height={height} color={color} />
+    ? <DesktopPriceSparkline values={values} width={width} height={height} color={color} emptyColor={colors.textMuted} />
     : <TerminalPriceSparkline priceHistory={sparklineHistory} values={values} width={width} height={height} color={color} area={area} />;
 }
 
@@ -172,13 +173,13 @@ export function PriceAreaSparklineBackground({
   trend?: PriceSparklineTrend;
   period?: PriceSparklinePeriod;
 }) {
-  useThemeColors();
+  const colors = useThemeColors();
   const uiHost = useUiHost();
   const sparklineHistory = useMemo(() => resolveSparklineHistory(priceHistory ?? [], period), [period, priceHistory]);
   const values = useMemo(() => sparklineValues(sparklineHistory), [sparklineHistory]);
   if (uiHost.kind !== "desktop-web" || values.length < 2) return null;
 
-  const color = sparklineColor(values, trend);
+  const color = sparklineColor(values, trend, colors);
   const baseline = 100;
   const samples = buildSamples(values, 100, baseline, 0);
   const linePath = svgPath(samples);

package/src/components/speedometer-gauge/desktop.tsx

@@ -1,6 +1,6 @@
 import { createElement, type SVGProps } from "react";
 import { Box } from "../../ui";
-import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import {
   compactSegmentLabel,
   formatGaugeValue,
@@ -54,6 +54,7 @@ export function DesktopSpeedometerGauge({
   maxWidth,
   compact,
 }: Required<SpeedometerGaugeProps>) {
+  const colors = useThemeColors();
   const gaugeWidth = Math.min(Math.max(width - 2, minWidth), maxWidth);
   const gaugeHeight = compact ? 9 : 12;
   const viewBoxHeight = compact ? DESKTOP_COMPACT_VIEWBOX_HEIGHT : DESKTOP_VIEWBOX_HEIGHT;

package/src/components/speedometer-gauge/index.tsx

@@ -1,5 +1,4 @@
 import { useUiHost } from "../../ui";
-import { useThemeColors } from "../../theme/theme-context";
 import { DesktopSpeedometerGauge } from "./desktop";
 import {
   DEFAULT_MAX_WIDTH,
@@ -25,7 +24,6 @@ export function SpeedometerGauge({
   maxWidth = DEFAULT_MAX_WIDTH,
   compact = false,
 }: SpeedometerGaugeProps) {
-  useThemeColors();
   const props = {
     value,
     valueLabel,

package/src/components/speedometer-gauge/terminal.tsx

@@ -3,7 +3,8 @@ import { Box, ChartSurface, Span, Text, TextAttributes, useNativeRenderer, useUi
 import type { NativeChartBitmap } from "../chart/native/chart-rasterizer";
 import { resolveNativeBitmapSize, shouldRenderNativeBitmap } from "../chart/native/bitmap-support";
 import { drawCircle, drawLine, parseHex } from "../chart/native/raster/primitives";
-import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
+import type { ThemeColors } from "../../theme/colors";
 import {
   compactSegmentLabel,
   formatGaugeValue,
@@ -73,7 +74,7 @@ function renderLabelRow(width: number, min: number, max: number, segments: Speed
   return cellsToChunks(cells);
 }
 
-function renderTickRow(width: number, min: number, max: number): GaugeChunk[] {
+function renderTickRow(width: number, min: number, max: number, colors: Pick<ThemeColors, "textDim">): GaugeChunk[] {
   const cells = blankGaugeLine(width);
   for (const tick of [min, min + (max - min) * 0.25, min + (max - min) * 0.5, min + (max - min) * 0.75, max]) {
     placeText(cells, formatGaugeValue(tick), normalizeValue(tick, min, max) * (width - 1), colors.textDim);
@@ -81,7 +82,14 @@ function renderTickRow(width: number, min: number, max: number): GaugeChunk[] {
   return cellsToChunks(cells);
 }
 
-function renderArcRows(value: number, min: number, max: number, width: number, segments: SpeedometerSegment[]): GaugeChunk[][] {
+function renderArcRows(
+  value: number,
+  min: number,
+  max: number,
+  width: number,
+  segments: SpeedometerSegment[],
+  colors: Pick<ThemeColors, "textDim" | "textBright">,
+): GaugeChunk[][] {
   const dialHeight = 7;
   const dial = Array.from({ length: dialHeight }, () => blankGaugeLine(width));
   const centerX = Math.floor((width - 1) / 2);
@@ -144,6 +152,7 @@ function renderGaugeBitmap(
   segments: SpeedometerSegment[],
   pixelWidth: number,
   pixelHeight: number,
+  colors: Pick<ThemeColors, "textDim" | "textBright">,
 ): NativeChartBitmap {
   const pixels = new Uint8Array(pixelWidth * pixelHeight * 4);
   const centerX = pixelWidth / 2;
@@ -193,6 +202,7 @@ export function TerminalSpeedometerGauge({
   minWidth,
   maxWidth,
 }: Required<SpeedometerGaugeProps>) {
+  const colors = useThemeColors();
   const {
     nativeCharts,
     cellWidthPx = 8,
@@ -202,8 +212,14 @@ export function TerminalSpeedometerGauge({
   const nativeRenderer = useNativeRenderer();
   const gaugeWidth = Math.max(minWidth, Math.min(maxWidth, Math.floor(width - 4)));
   const labelRow = useMemo(() => renderLabelRow(gaugeWidth, min, max, segments), [gaugeWidth, max, min, segments]);
-  const tickRow = useMemo(() => renderTickRow(gaugeWidth, min, max), [gaugeWidth, max, min]);
-  const arcRows = useMemo(() => renderArcRows(value, min, max, gaugeWidth, segments), [gaugeWidth, max, min, segments, value]);
+  const tickRow = useMemo(
+    () => renderTickRow(gaugeWidth, min, max, colors),
+    [colors.textDim, gaugeWidth, max, min],
+  );
+  const arcRows = useMemo(
+    () => renderArcRows(value, min, max, gaugeWidth, segments, colors),
+    [colors.textBright, colors.textDim, gaugeWidth, max, min, segments, value],
+  );
   const rendererCapabilities = nativeRenderer.capabilities;
   const rendererResolution = nativeRenderer.resolution;
   const rendererTerminalWidth = nativeRenderer.terminalWidth;
@@ -227,11 +243,14 @@ export function TerminalSpeedometerGauge({
       segments,
       bitmapSize.pixelWidth,
       bitmapSize.pixelHeight,
+      colors,
     );
   }, [
     arcRows.length,
     cellHeightPx,
     cellWidthPx,
+    colors.textBright,
+    colors.textDim,
     gaugeWidth,
     max,
     min,

package/src/components/ticker/badge/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Text, useTickerContextMenu, useUiCapabilities } from "../../../ui";
 import { TextAttributes } from "../../../ui";
-import { colors, priceColor } from "../../../theme/colors";
+import { blendHex, colors, priceColor } from "../../../theme/colors";
 import { getSharedRegistry } from "../../../plugins/registry";
 import type { Quote } from "../../../types/financials";
 import { getTickerBadgeText } from "./format";
@@ -16,23 +16,6 @@ export interface TickerBadgeProps {
   onOpen: (symbol: string) => void;
 }
 
-function blendHex(base: string, accent: string, ratio: number): string {
-  const parse = (hex: string) => {
-    const value = hex.replace("#", "");
-    return [
-      parseInt(value.slice(0, 2), 16),
-      parseInt(value.slice(2, 4), 16),
-      parseInt(value.slice(4, 6), 16),
-    ] as const;
-  };
-  const [br, bg, bb] = parse(base);
-  const [ar, ag, ab] = parse(accent);
-  const mix = (left: number, right: number) => Math.round(left + (right - left) * ratio)
-    .toString(16)
-    .padStart(2, "0");
-  return `#${mix(br, ar)}${mix(bg, ag)}${mix(bb, ab)}`;
-}
-
 export function TickerBadge({
   symbol,
   status,

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, ScrollBox, Text, TextAttributes, useNativeRenderer } from "../../../../ui";
-import { colors, hoverBg } from "../../../../theme/colors";
+import { hoverBg } from "../../../../theme/colors";
 import { useThemeColors } from "../../../../theme/theme-context";
 import { useAppDispatch, usePaneInstance } from "../../../../state/app/context";
 import { useViewport } from "../../../../react/input";
@@ -67,7 +67,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   scrollToIndexAlign = "nearest",
   scrollToIndexVersion = 0,
 }: DataTableProps<T, C>) {
-  useThemeColors();
+  const colors = useThemeColors();
   const dispatch = useAppDispatch();
   const paneInstanceId = usePaneInstance()?.instanceId ?? null;
   const appViewport = useViewport();
@@ -376,7 +376,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                 const rowBg = selected
                   ? colors.selected
                   : rowBackgroundColor ?? colors.bg;
-                const rowHoverBg = selected ? undefined : hoverBg();
+                const rowHoverBg = selected ? undefined : hoverBg(colors);
 
                 return (
                   <Box

package/src/components/ui/frame.tsx

@@ -1,7 +1,6 @@
 import { Box, Text, useUiHost } from "../../ui";
 import { TextAttributes } from "../../ui";
 import { type ComponentType, type ReactNode } from "react";
-import { colors } from "../../theme/colors";
 import { t } from "../../i18n";
 import { useThemeColors } from "../../theme/theme-context";
 
@@ -15,7 +14,7 @@ export interface DialogFrameProps {
 export function DialogFrame({ title: rawTitle, children, footer: rawFooter, showTitleDivider = false }: DialogFrameProps) {
   const title = t(rawTitle);
   const footer = rawFooter === undefined ? undefined : t(rawFooter);
-  useThemeColors();
+  const colors = useThemeColors();
   const HostDialogFrame = useUiHost().DialogFrame as ComponentType<DialogFrameProps> | undefined;
   if (HostDialogFrame) {
     return (

package/src/components/ui/page-stack-view.test.tsx

@@ -0,0 +1,126 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useMemo, useState } from "react";
+import { testRender } from "../../renderers/opentui/test-utils";
+import { openTuiUiHost } from "../../renderers/opentui/ui-host";
+import {
+  Box,
+  Text,
+  UiHostProvider,
+  type RendererHost,
+  type UiHost,
+} from "../../ui";
+import { PageStackView, type PageStackViewProps } from "./page-stack-view";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let setUseHost: ((useHost: boolean) => void) | undefined;
+let backCalls = 0;
+
+const rendererHost: RendererHost = {
+  requestExit() {},
+  openExternal: async () => {},
+  copyText: async () => {},
+  readText: async () => "",
+  notify() {},
+};
+
+afterEach(async () => {
+  setUseHost = undefined;
+  backCalls = 0;
+  if (!testSetup) return;
+  await act(async () => {
+    testSetup!.renderer.destroy();
+  });
+  testSetup = undefined;
+});
+
+function HostPageStackView({ detailContent }: PageStackViewProps) {
+  return (
+    <Box flexDirection="column">
+      <Text>Host page stack</Text>
+      {detailContent}
+    </Box>
+  );
+}
+
+function HostSwitchHarness() {
+  const [useHost, updateUseHost] = useState(false);
+  setUseHost = updateUseHost;
+  const ui = useMemo<UiHost>(() => ({
+    ...openTuiUiHost,
+    PageStackView: useHost ? HostPageStackView : undefined,
+  }), [useHost]);
+
+  return (
+    <UiHostProvider ui={ui} renderer={rendererHost}>
+      <PageStackView
+        focused
+        detailOpen
+        onBack={() => {}}
+        rootContent={<Text>Root content</Text>}
+        detailContent={<Text>Detail content</Text>}
+        detailTitle="Detail title"
+      />
+    </UiHostProvider>
+  );
+}
+
+function MouseBackHarness() {
+  const [detailOpen, setDetailOpen] = useState(true);
+  return (
+    <PageStackView
+      focused
+      detailOpen={detailOpen}
+      onBack={() => {
+        backCalls += 1;
+        setDetailOpen(false);
+      }}
+      rootContent={<Text>Root content</Text>}
+      detailContent={<Text>Detail content</Text>}
+      detailTitle="Detail title"
+    />
+  );
+}
+
+describe("PageStackView", () => {
+  test("can switch between the fallback and host implementations without changing hook topology", async () => {
+    testSetup = await testRender(<HostSwitchHarness />, { width: 48, height: 8 });
+    await testSetup.renderOnce();
+    expect(testSetup.captureCharFrame()).toContain("← Back Detail title");
+
+    await act(async () => {
+      setUseHost?.(true);
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+    expect(testSetup.captureCharFrame()).toContain("Host page stack");
+
+    await act(async () => {
+      setUseHost?.(false);
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+    expect(testSetup.captureCharFrame()).toContain("← Back Detail title");
+  });
+
+  test("keeps the fallback back action mouse-accessible", async () => {
+    testSetup = await testRender(<MouseBackHarness />, { width: 48, height: 8 });
+    await testSetup.renderOnce();
+    expect(testSetup.captureCharFrame()).toContain("Detail content");
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(1, 0);
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    expect(backCalls).toBe(1);
+    expect(testSetup.captureCharFrame()).toContain("Root content");
+    expect(testSetup.captureCharFrame()).not.toContain("Detail content");
+  });
+});