gloomberb 0.17.5 → 0.18.0

package/src/components/ui/card.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import { useThemeColors } from "../../theme/theme-context";
+import { Box, useUiCapabilities } from "../../ui";
+
+export interface CardProps {
+  children?: ReactNode;
+  /**
+   * A colour the card belongs to (a relationship's role, a series): a 2px
+   * rule down its left edge and the raised fill tinted toward it.
+   */
+  accent?: string;
+  /** Width in cells (terminal) or any Box width. */
+  width?: number | `${number}%`;
+  /** The card is the chosen one: an accent border. */
+  selected?: boolean;
+  /** Makes the whole card a control: it takes the hover fill and the pointer. */
+  onPress?: () => void;
+}
+
+/**
+ * The card's look on the desktop and the web, for a card that has to be its
+ * own positioned box (a node in a diagram): the same surface Card draws.
+ */
+export function cardSurfaceStyle({ selected = false, accent, padding = "var(--gloom-space-sm)" }: {
+  selected?: boolean;
+  accent?: string;
+  /** A card laid out in rows of its own (a diagram node) keeps them: "0 var(--gloom-space-sm)". */
+  padding?: string;
+} = {}) {
+  return {
+    background: accent ? `color-mix(in srgb, var(--gloom-surface-raised) 88%, ${accent})` : "var(--gloom-surface-raised)",
+    // The frame is drawn inside the box, so a card keeps the size it was given.
+    boxShadow: `inset 0 0 0 1px ${selected ? "var(--gloom-accent)" : "var(--gloom-hairline)"}`,
+    ...(accent ? { borderLeft: `${CARD_ACCENT_RULE} solid ${accent}` } : {}),
+    borderRadius: "var(--gloom-radius-md)",
+    padding,
+    boxSizing: "border-box",
+  } as const;
+}
+
+/** The accent rule of a card or a quote: one width for every rule that says what a block belongs to. */
+export const CARD_ACCENT_RULE = "2px";
+
+/**
+ * A raised box of related content (a quote tile, a flow step). On the desktop
+ * and the web: the raised surface, a 1px hairline, the control radius and the
+ * pane's 8px inside; chosen, an accent border. The terminal draws a single
+ * line frame. Use it for content that is a unit of its own; rows, tables and
+ * key-value rows never need one.
+ */
+export function Card({ children, width, selected = false, accent, onPress }: CardProps) {
+  const colors = useThemeColors();
+  const { nativePaneChrome } = useUiCapabilities();
+  if (!nativePaneChrome) {
+    return (
+      <Box flexDirection="column" width={width} border borderStyle="single" borderColor={selected ? colors.borderFocused : colors.border} onMouseDown={onPress}>
+        {children}
+      </Box>
+    );
+  }
+  return (
+    <Box
+      flexDirection="column"
+      width={width}
+      onMouseDown={onPress}
+      data-gloom-ui="card"
+      data-gloom-interactive={onPress ? "true" : undefined}
+      hoverBackgroundColor={onPress ? "color-mix(in srgb, var(--gloom-surface-raised) 92%, var(--gloom-text-bright))" : undefined}
+      data-selected={selected ? "true" : undefined}
+      style={cardSurfaceStyle({ selected, accent })}
+    >
+      {children}
+    </Box>
+  );
+}

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

@@ -34,7 +34,7 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>(
     if (!paneId || !renderer.saveTextFile) return;
     return registerPaneTableExporter(paneId, (filename) => renderer.saveTextFile!({
       name: filename,
-      text: createDataTableCsv(propsRef.current),
+      text: propsRef.current.exportCsv?.() ?? createDataTableCsv(propsRef.current),
       mimeType: "text/csv;charset=utf-8",
     }));
   }, [paneId, renderer]);
@@ -151,7 +151,9 @@ function reportedRows<T, C extends DataTableColumn>(props: DataTableProps<T, C>)
           ...(typeof cell.value === "number" && Number.isFinite(cell.value) ? { value: cell.value } : {}),
         };
       });
-    return { key: props.getItemKey(item, index), selected, cells: cells.filter((cell) => cell.text.length > 0) };
+    // A section header (FUT's sector) is marked, so a count of the table's rows can leave it out.
+    return { key: props.getItemKey(item, index), selected, ...(section ? { section: true } : {}),
+      cells: cells.filter((cell) => cell.text.length > 0) };
   });
 }
 

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

@@ -27,7 +27,13 @@ import type {
 import { resolveDataTableScrollTop } from "../visible-range";
 import { useFocusOwningPane, useVisibleRangeEmitter } from "../hooks";
 import { useStableColumns } from "../stable-columns";
-import { resolveDataTableVisibleWindow } from "./model";
+import {
+  cutColumnText,
+  resolveDataTableColumnClips,
+  resolveDataTableVisibleWindow,
+  reuseDataTableColumnClips,
+  type DataTableColumnClip,
+} from "./model";
 
 interface DataTableRowPointerTarget<T> {
   item: T;
@@ -75,6 +81,7 @@ function OpenTuiDataTableRowInner<
   sectionWidth,
   selected,
   selectedTextOverridesCellColor,
+  columnClips,
 }: {
   /** Only compared by the row memo; see `getRowVersion`. */
   rowVersion?: unknown;
@@ -105,6 +112,8 @@ function OpenTuiDataTableRowInner<
   rowContextMenuSurface: boolean;
   selected: boolean;
   selectedTextOverridesCellColor: boolean;
+  /** How the viewport cuts each column, null when every column shows whole (resolveDataTableColumnClips). */
+  columnClips: readonly (DataTableColumnClip | null)[] | null;
 }) {
   const sectionHeader = renderSectionHeader?.(item, index) ?? null;
 
@@ -191,12 +200,20 @@ function OpenTuiDataTableRowInner<
       }}
     >
       {displayColumns.map((column, columnIndex) => {
-        const cell = renderCell(item, column, index, rowState);
         const frozen = columnIndex === 0 && frozenColumnOffset !== undefined;
+        const clip = columnClips?.[columnIndex] ?? null;
+        const cell = renderCell(item, column, index, rowState);
         const columnStart = columnStarts[columnIndex] ?? 0;
         const leadGap = tableColumnLeadGap(displayColumns, columnIndex, columnGap);
-        const inset = !frozen && frozenColumnOffset !== undefined
+        const inset = clip ? clip.inset : !frozen && frozenColumnOffset !== undefined
           ? Math.min(column.width, Math.max(0, frozenColumnOffset + (displayColumns[0]?.width ?? 0) + columnGap - columnStart)) : 0;
+        const shownWidth = clip ? clip.width : column.width - inset;
+        // Cut text is fitted to what shows; a number the edge cuts stays blank in its own place,
+        // and its cell keeps its background and its press.
+        const shownText = clip
+          ? cutColumnText(cell.text, column.align, column.width, clip, (text, width) => fitTableCellText(text, width, column.align))
+          : shownWidth > 0 ? fitTableCellText(cell.text, shownWidth, column.align) : "";
+        const contentCut = clip !== null && column.align === "right" && shownText.trim() === "";
         return (
           <Box
             key={column.id}
@@ -222,10 +239,10 @@ function OpenTuiDataTableRowInner<
               handleRowMouseDown(itemKey, { item, index }, event);
             }}
           >
-            {cell.content !== undefined ? (frozenColumnOffset === undefined ? cell.content : (
+            {cell.content !== undefined && !contentCut ? (frozenColumnOffset === undefined && !clip ? cell.content : (
               <>
                 {frozen && <Text position="absolute" left={0} top={0}>{" ".repeat(column.width + columnGap + horizontalPadding)}</Text>}
-                <Box marginLeft={frozen ? horizontalPadding : inset} width={Math.max(0, column.width - inset)} overflow="hidden">
+                <Box marginLeft={frozen ? horizontalPadding : inset} width={Math.max(0, shownWidth)} overflow="hidden">
                   {cell.content}
                 </Box>
               </>
@@ -236,7 +253,7 @@ function OpenTuiDataTableRowInner<
                   ? colors.selectedText
                   : cell.color ?? colors.text}
               >
-                {`${frozen ? " ".repeat(horizontalPadding) : ""}${" ".repeat(inset)}${inset < column.width ? fitTableCellText(cell.text, column.width - inset, column.align) : ""}${frozen ? " ".repeat(columnGap) : ""}`}
+                {`${frozen ? " ".repeat(horizontalPadding) : ""}${" ".repeat(inset)}${shownText}${frozen ? " ".repeat(columnGap) : ""}`}
               </Text>
             )}
           </Box>
@@ -298,10 +315,13 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   const appViewport = useViewport();
   const nativeRenderer = useNativeRenderer();
   const [scrollVersion, setScrollVersion] = useState(0);
-  const [frozenColumnOffset, setFrozenColumnOffset] = useState(0);
+  // How far the columns are scrolled sideways: a frozen first column moves with
+  // it, and a column the viewport cuts is drawn to what shows (resolveDataTableColumnClips).
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const frozenColumnOffset = scrollLeft;
   useEffect(() => {
-    if (freezeFirstColumn) setFrozenColumnOffset(scrollRef.current?.scrollLeft ?? 0);
-  }, [freezeFirstColumn, scrollRef]);
+    setScrollLeft(scrollRef.current?.scrollLeft ?? 0);
+  }, [scrollRef]);
   const lastAppliedScrollRequestRef = useRef<string | null>(null);
   const controlledScrollTopRef = useRef<number | null>(null);
   const scrollTop = virtualize ? (scrollRef.current?.scrollTop ?? 0) : 0;
@@ -358,6 +378,22 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     () => tableColumnStarts(displayColumns, columnGap),
     [columnGap, displayColumns],
   );
+  // A scroll step that cuts the columns as the last one did keeps the same
+  // array, so the memoized rows skip the render.
+  const columnClipsRef = useRef<readonly (DataTableColumnClip | null)[] | null>(null);
+  const columnClips = useMemo(
+    () => columnClipsRef.current = reuseDataTableColumnClips(columnClipsRef.current, resolveDataTableColumnClips({
+      columnGap,
+      columnStarts,
+      frozenFirstColumn: freezeFirstColumn,
+      horizontalPadding,
+      scrollLeft,
+      // A table that cannot scroll sideways fits its own columns; one it cut could never be scrolled to.
+      viewportWidth: showHorizontalScrollbar ? measuredViewportWidth : 0,
+      widths: displayColumns.map((column) => column.width),
+    })),
+    [columnGap, columnStarts, displayColumns, freezeFirstColumn, horizontalPadding, measuredViewportWidth, scrollLeft, showHorizontalScrollbar],
+  );
   const reportVisibleRange = useVisibleRangeEmitter({
     itemCount: items.length,
     visibleRangeKey,
@@ -399,8 +435,8 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   }, [emitVisibleRange, nativeRenderer, onBodyScrollActivity, scrollRef, virtualize]);
   const syncHorizontalScroll = useCallback(() => {
     syncHeaderScroll();
-    if (freezeFirstColumn) setFrozenColumnOffset(scrollRef.current?.scrollLeft ?? 0);
-  }, [freezeFirstColumn, scrollRef, syncHeaderScroll]);
+    setScrollLeft(scrollRef.current?.scrollLeft ?? 0);
+  }, [scrollRef, syncHeaderScroll]);
   useScrollBoxScrollActivity({
     scrollRef,
     onVerticalScroll: handleBodyScrollActivity,
@@ -411,9 +447,9 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     const body = scrollRef.current;
     if (!header || !body || body.scrollLeft === header.scrollLeft) return;
     body.scrollLeft = header.scrollLeft;
-    if (freezeFirstColumn) setFrozenColumnOffset(body.scrollLeft ?? 0);
+    setScrollLeft(body.scrollLeft ?? 0);
     nativeRenderer.requestRender();
-  }, [freezeFirstColumn, headerScrollRef, nativeRenderer, scrollRef]);
+  }, [headerScrollRef, nativeRenderer, scrollRef]);
   useScrollBoxScrollActivity({
     scrollRef: headerScrollRef,
     onHorizontalScroll: syncBodyScroll,
@@ -490,6 +526,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
       }
       if (!horizontalScrollbarVisible) {
         body.scrollLeft = 0;
+        setScrollLeft(0);
       }
     }
   }, [columns.length, headerScrollRef, horizontalScrollbarVisible, items.length, measuredViewportHeight, scrollRef]);
@@ -565,8 +602,10 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
           {displayColumns.map((column, columnIndex) => {
             const frozen = freezeFirstColumn && columnIndex === 0;
             const columnStart = columnStarts[columnIndex] ?? 0;
-            const inset = freezeFirstColumn && !frozen
+            const clip = columnClips?.[columnIndex] ?? null;
+            const inset = clip ? clip.inset : freezeFirstColumn && !frozen
               ? Math.min(column.width, Math.max(0, frozenColumnOffset + (displayColumns[0]?.width ?? 0) + columnGap - columnStart)) : 0;
+            const shownWidth = clip ? clip.width : column.width - inset;
             const isSorted = sortColumnId === column.id;
             const marker = sortDirection === "asc" ? "▲" : "▼";
             // An unlabeled column shows the bare marker, not a stray space before it.
@@ -576,12 +615,13 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
             // over its numbers.
             const hasNextLabel = columnIndex < displayColumns.length - 1
               && tableColumnLeadGap(displayColumns, columnIndex + 1, columnGap) === 0;
-            const labelText = " ".repeat(inset) + (inset < column.width ? fitTableHeaderText(
-              column.label + indicator,
-              column.width - inset,
-              column.align,
-              hasNextLabel,
-            ) : "");
+            const label = column.label + indicator;
+            const labelText = " ".repeat(inset) + (clip
+              // Cut on the right, the label's last cell is the edge.
+              ? cutColumnText(label, column.align, column.width, clip, (text, width, cutRight) => (
+                fitTableHeaderText(text, width, column.align, hasNextLabel && !cutRight)
+              ))
+              : shownWidth > 0 ? fitTableHeaderText(label, shownWidth, column.align, hasNextLabel) : "");
             return (
               <Box
                 key={column.id}
@@ -667,6 +707,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                     sectionWidth={sectionWidth}
                     selected={isSelected(item, index)}
                     selectedTextOverridesCellColor={selectedTextOverridesCellColor}
+                    columnClips={columnClips}
                   />
                 );
               }),

package/src/components/ui/data-table/opentui/model.ts

@@ -1,3 +1,107 @@
+import { displayWidth } from "../../../../utils/format";
+
+/**
+ * Where the viewport cuts a column: `inset` cells hidden on its left (past the
+ * scroll, or under a frozen first column), then `width` cells that show (0
+ * when none do). A column whose shown cells stop short of its width is cut on
+ * the right as well. `cutColumnText` says what such a column draws.
+ */
+export interface DataTableColumnClip {
+  inset: number;
+  width: number;
+}
+
+/** Whether the viewport's edge falls inside the column, not after it. */
+function clipCutsRight(clip: DataTableColumnClip, columnWidth: number): boolean {
+  return clip.inset + clip.width < columnWidth;
+}
+
+/**
+ * What a cut column draws in the cells that show. Text is fitted to them from
+ * the visible edge, with an ellipsis when it is longer, so a name reads
+ * "Definitive agr\u2026", never a hard stop. A number, right-aligned or
+ * centred, keeps its place in the column and shows when those cells hold all
+ * of it; otherwise they stay blank, because part of one reads as another
+ * number (LAST 98.53 as "98", a header as "LA"). Scrolling brings it whole.
+ *
+ * `fit` places the text in a width (fitTableCellText or fitTableHeaderText);
+ * `cutRight` tells it the width ends at the viewport's edge.
+ */
+export function cutColumnText(
+  text: string,
+  align: string | undefined,
+  columnWidth: number,
+  clip: DataTableColumnClip,
+  fit: (text: string, width: number, cutRight: boolean) => string,
+): string {
+  if (clip.width <= 0) return "";
+  if (align !== "right" && align !== "center") return fit(text, clip.width, clipCutsRight(clip, columnWidth));
+  const placed = fit(text, columnWidth, false);
+  const body = placed.trim();
+  const start = placed.length - placed.trimStart().length;
+  const end = start + displayWidth(body);
+  const shownEnd = clip.inset + clip.width;
+  if (!body || start < clip.inset || end > shownEnd) return " ".repeat(clip.width);
+  return `${" ".repeat(start - clip.inset)}${body}${" ".repeat(shownEnd - end)}`;
+}
+
+function sameClip(a: DataTableColumnClip | null, b: DataTableColumnClip | null): boolean {
+  return a === b || (a !== null && b !== null && a.inset === b.inset && a.width === b.width);
+}
+
+/**
+ * The previous clips when the new ones say the same, so the memoized rows a
+ * horizontal scroll did not change keep their props and skip the render.
+ */
+export function reuseDataTableColumnClips(
+  previous: readonly (DataTableColumnClip | null)[] | null,
+  next: (DataTableColumnClip | null)[] | null,
+): readonly (DataTableColumnClip | null)[] | null {
+  if (previous === next || !previous || !next) return next;
+  return previous.length === next.length && next.every((clip, index) => sameClip(clip, previous[index] ?? null)) ? previous : next;
+}
+
+/**
+ * Each column's clip at the current scroll, null for a column shown whole.
+ * A frozen first column stays, and what slides under it counts as cut on the
+ * left. Null for the whole table when every column is whole or nothing is
+ * measured yet.
+ */
+export function resolveDataTableColumnClips({
+  columnGap,
+  columnStarts,
+  frozenFirstColumn,
+  horizontalPadding,
+  scrollLeft,
+  viewportWidth,
+  widths,
+}: {
+  columnGap: number;
+  /** Where each column's content starts, from the first column (tableColumnStarts). */
+  columnStarts: readonly number[];
+  frozenFirstColumn: boolean;
+  horizontalPadding: number;
+  scrollLeft: number;
+  viewportWidth: number;
+  /** Each column's drawn width. */
+  widths: readonly number[];
+}): (DataTableColumnClip | null)[] | null {
+  if (viewportWidth <= 0 || widths.length === 0) return null;
+  const right = scrollLeft + viewportWidth;
+  const left = frozenFirstColumn ? scrollLeft + horizontalPadding + (widths[0] ?? 0) + columnGap : scrollLeft;
+  let cut = false;
+  const clips = widths.map((width, index): DataTableColumnClip | null => {
+    if (frozenFirstColumn && index === 0) return null;
+    const start = horizontalPadding + (columnStarts[index] ?? 0);
+    const end = start + width;
+    if (start >= left && end <= right) return null;
+    cut = true;
+    const inset = Math.min(width, Math.max(0, left - start));
+    return { inset, width: Math.max(0, Math.min(end, right) - start - inset) };
+  });
+  return cut ? clips : null;
+}
+
 interface DataTableVisibleWindowOptions<T> {
   appViewportHeight: number;
   items: T[];

package/src/components/ui/data-table/types.ts

@@ -14,6 +14,11 @@ export type DataTableColumn = Pick<
    * automation and screen readers read only `label`.
    */
   headerLeading?: ReactNode;
+  /**
+   * The plain words behind a short label ("Impact" for IMP), shown on hover on
+   * the desktop and the web. The terminal has no hover and shows `label` only.
+   */
+  title?: string;
   flexGrow?: number;
 };
 
@@ -166,6 +171,12 @@ export interface DataTableProps<
   freezeFirstColumn?: boolean;
   /** Append export-only source records after the displayed table. */
   getExportMetadata?: () => readonly (readonly unknown[])[];
+  /**
+   * What Export CSV writes in place of the rows drawn, for a pane whose
+   * export is the data behind its view rather than one table: the backtest
+   * writes its daily curve, as `fn BT --csv --equity` prints it.
+   */
+  exportCsv?: () => string;
   /**
    * A rendered-view report (`gloomberb fn`) reads every row, not only those
    * the viewport shows. For a bounded table a reader needs whole, such as an

package/src/components/ui/detail-scroll-body.tsx

@@ -13,7 +13,7 @@ export interface DetailScrollBodyProps {
  * to the pane footer, and its inset is padding inside what scrolls: text goes
  * under the footer edge rather than stopping a blank band above it.
  */
-const NATIVE_DETAIL_INSET = { padding: "12px 8px 16px" } as const;
+const NATIVE_DETAIL_INSET = { padding: "var(--gloom-space-md) var(--gloom-inset) var(--gloom-space-lg)" } as const;
 
 /**
  * The scrolling body of a stack detail, filling the space under the stack

package/src/components/ui/dialog-actions.tsx

@@ -1,7 +1,5 @@
 import { type ComponentType, type ReactNode } from "react";
-import { Box, Text, useUiHost } from "../../ui";
-import { t } from "../../i18n";
-import { useThemeColors } from "../../theme/theme-context";
+import { Box, useUiHost } from "../../ui";
 import type { DialogDesktopFooter, DialogKeyHint } from "./frame";
 
 export interface DialogActionsProps {
@@ -44,21 +42,3 @@ export interface DialogHintsProps {
   keys?: DialogKeyHint[];
   note?: string;
 }
-
-/**
- * Keys and a note for a dialog that has no button to put them on, such as a
- * sign-in code waiting for a phone: keycaps on the desktop and the web, one
- * muted line in the terminal.
- */
-export function DialogHints({ keys = [], note }: DialogHintsProps) {
-  const colors = useThemeColors();
-  const HostDialogHints = useUiHost().DialogHints as ComponentType<DialogHintsProps> | undefined;
-  if (HostDialogHints) return <HostDialogHints keys={keys} note={note} />;
-  const parts = [...keys.map((hint) => `${hint.key} ${t(hint.label)}`), ...(note ? [t(note)] : [])];
-  if (parts.length === 0) return null;
-  return (
-    <Box height={1}>
-      <Text fg={colors.textMuted}>{parts.join(" · ")}</Text>
-    </Box>
-  );
-}

package/src/components/ui/display.tsx

@@ -191,8 +191,15 @@ export interface BadgeProps {
   variant?: "subtle" | "solid";
 }
 
-/** A chip as tall as its row runs into the one below in a column of chips; the desktop leaves a hairline above and below, as ticker chips do. */
-const NATIVE_BADGE_STYLE = { height: "calc(100% - 4px)", borderRadius: 3 };
+/**
+ * The one chip on the desktop: 16px in its 18px row (a chip as tall as its
+ * row runs into the one below in a column of chips), the small-mark radius,
+ * regular weight. Ticker chips keep bold (ticker/badge).
+ */
+export const NATIVE_BADGE_STYLE = { height: "calc(100% - 2px)", borderRadius: "var(--gloom-radius-sm)" };
+/** How far a subtle chip's fill is tinted toward its tone. */
+export const BADGE_TINT = 0.28;
+const NATIVE_BADGE_TEXT_STYLE = { fontWeight: "var(--gloom-weight-regular)" };
 
 export function Badge({ label, tone = "neutral", color, variant = "subtle" }: BadgeProps) {
   const colors = useThemeColors();
@@ -201,9 +208,9 @@ export function Badge({ label, tone = "neutral", color, variant = "subtle" }: Ba
   const solid = variant === "solid";
   const neutral = solid && tone === "neutral" && !color;
   const chip = (
-    <Box height={nativePaneChrome ? undefined : 1} paddingX={1} backgroundColor={neutral ? colors.selected : solid ? accent : blendHex(colors.bg, accent, 0.28)}
+    <Box height={nativePaneChrome ? undefined : 1} paddingX={1} backgroundColor={neutral ? colors.selected : solid ? accent : blendHex(colors.bg, accent, BADGE_TINT)}
       data-gloom-ui="badge" justifyContent={nativePaneChrome ? "center" : undefined} style={nativePaneChrome ? NATIVE_BADGE_STYLE : undefined}>
-      <Text fg={neutral ? colors.selectedText : solid ? colors.bg : accent} attributes={TextAttributes.BOLD}>{t(label)}</Text>
+      <Text fg={neutral ? colors.selectedText : solid ? colors.bg : accent} attributes={TextAttributes.BOLD} style={nativePaneChrome ? NATIVE_BADGE_TEXT_STYLE : undefined}>{t(label)}</Text>
     </Box>
   );
   return nativePaneChrome ? <Box height={1} flexShrink={0} justifyContent="center">{chip}</Box> : chip;
@@ -228,7 +235,8 @@ export function Divider({ width, height, orientation = "horizontal" }: DividerPr
       borderColor={colors.border}
       style={{
         border: 0,
-        [vertical ? "borderLeft" : "borderTop"]: `1px solid ${colors.border}`,
+        // The one hairline on the desktop; the terminal draws borderColor.
+        [vertical ? "borderLeft" : "borderTop"]: "1px solid var(--gloom-hairline)",
         // A vertical rule given no height runs the height of the row it stands in.
         ...(vertical && height === undefined ? { height: "auto", alignSelf: "stretch" } : {}),
       }}

package/src/components/ui/external-link.tsx

@@ -116,7 +116,7 @@ export function ExternalLinkText(
   const colors = useThemeColors();
   const rendererHost = useRendererHost();
   const { showContextMenu } = useContextMenu();
-  const { nativeContextMenu } = useUiCapabilities();
+  const { nativeContextMenu, nativePaneChrome } = useUiCapabilities();
   const resolvedOpen = onOpen === openUrl
     ? (nextUrl: string) => {
       void rendererHost.openExternal(nextUrl);
@@ -134,11 +134,13 @@ export function ExternalLinkText(
   usePaneLinkMenuEntry(`link:${url}`, tf("Open {label}", { label: menuLinkLabel(url, label) }), () => resolvedOpen(url));
   return (
     <Text
-      fg={color ?? colors.textBright}
+      // Desktop: a link is the text around it, underlined; the pointer brightens it (styles.css).
+      fg={color ?? (nativePaneChrome ? "inherit" : colors.textBright)}
       attributes={TextAttributes.UNDERLINE | attributes}
       cursor="pointer"
       style={inline ? INLINE_LINK_STYLE : undefined}
       role="link"
+      data-gloom-link="true"
       tabIndex={0}
       wrapText
       onKeyDown={(event: any) => {

package/src/components/ui/fields.tsx

@@ -88,6 +88,18 @@ export interface TextFieldProps {
  */
 export const FRAMED_TEXTAREA_DESKTOP_STYLE = { padding: "6px var(--cell-w)", lineHeight: "var(--cell-h)" } as const;
 
+/**
+ * The field look on the desktop and the web (docs/pane-conventions.md, "Design
+ * system"): a sunken fill inside the control border, the accent while focused.
+ */
+export function fieldFrameStyle(focused: boolean) {
+  return {
+    border: `1px solid ${focused ? "var(--gloom-accent)" : "var(--gloom-control-border)"}`,
+    borderRadius: "var(--gloom-radius-md)",
+    backgroundColor: "var(--gloom-surface-sunken)",
+  } as const;
+}
+
 const PASSWORD_MASK_CHAR = "*";
 
 function maskPassword(value: string): string {

package/src/components/ui/figure.tsx

@@ -1,19 +1,21 @@
 import { useCallback, type ReactNode } from "react";
 import { priceColor } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
+import { TYPE, WEIGHT } from "../../theme/ui-tokens";
 import { Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { displayWidth } from "../../utils/format";
 
 /** `value` is a pane's lead figure (a last price); `sub` is the change or detail that rides with it. */
 export type FigurePart = "value" | "sub";
 
-const FIGURE_FONT_PX: Record<FigurePart, number> = { value: 22, sub: 13 };
+/** On the type scale (src/theme/ui-tokens.ts): the title size for the lead figure, the app's for what rides with it. */
+const FIGURE_FONT_PX: Record<FigurePart, number> = { value: TYPE.title, sub: TYPE.ui };
 const FIGURE_LINE_HEIGHT: Record<FigurePart, number> = { value: 1.05, sub: 1.1 };
 
 // The desktop sets figures larger and heavier than body text; the terminal has one size, so the value is bold.
 const DESKTOP_FIGURE_STYLE: Record<FigurePart, { fontSize: string; lineHeight: number; fontWeight: number }> = {
-  value: { fontSize: `${FIGURE_FONT_PX.value}px`, lineHeight: FIGURE_LINE_HEIGHT.value, fontWeight: 700 },
-  sub: { fontSize: `${FIGURE_FONT_PX.sub}px`, lineHeight: FIGURE_LINE_HEIGHT.sub, fontWeight: 500 },
+  value: { fontSize: `${FIGURE_FONT_PX.value}px`, lineHeight: FIGURE_LINE_HEIGHT.value, fontWeight: WEIGHT.bold },
+  sub: { fontSize: `${FIGURE_FONT_PX.sub}px`, lineHeight: FIGURE_LINE_HEIGHT.sub, fontWeight: WEIGHT.regular },
 };
 
 function figureLinePx(part: FigurePart): number {

package/src/components/ui/frame.tsx

@@ -2,7 +2,8 @@ import { Box, Text, useUiHost } from "../../ui";
 import { TextAttributes } from "../../ui";
 import { type ComponentType, type ReactNode } from "react";
 import { t } from "../../i18n";
-import { blendHex, type ThemeColors } from "../../theme/colors";
+import type { ThemeColors } from "../../theme/colors";
+import { RADIUS, SPACE, controlBorderColour, surfaceRaisedColour } from "../../theme/ui-tokens";
 import { useThemeColors } from "../../theme/theme-context";
 
 export interface ModalSurfaceOptions {
@@ -22,16 +23,42 @@ export function modalSurfaceStyle(colors: ThemeColors, options: ModalSurfaceOpti
     width: options.width ?? "min(540px, 100%)",
     height: "auto",
     maxHeight: options.maxHeight ?? "calc(100vh - 88px)",
-    padding: options.padding ?? 14,
-    backgroundColor: blendHex(colors.panel, colors.bg, 0.12),
-    border: `1px solid ${blendHex(colors.border, colors.borderFocused, 0.18)}`,
-    borderRadius: 6,
-    boxShadow: `0 18px 48px color-mix(in srgb, ${colors.bg} 46%, transparent), inset 0 1px 0 color-mix(in srgb, ${colors.textBright} 5%, transparent)`,
+    padding: options.padding ?? SPACE.lg,
+    // The floating surface (docs/pane-conventions.md, "Dialogs, menus and surfaces").
+    backgroundColor: surfaceRaisedColour(colors),
+    border: `1px solid ${controlBorderColour(colors)}`,
+    borderRadius: RADIUS.lg,
+    boxShadow: "var(--gloom-elevation)",
     boxSizing: "border-box" as const,
     overflowY: "auto" as const,
   };
 }
 
+/**
+ * Desktop and web: a small panel that sits on a chart rather than over it (a
+ * legend's key): the raised fill, the control border, the surface radius, the
+ * app's type, 4px by 8px inside, and no elevation.
+ */
+export const FLAT_SURFACE_STYLE = {
+  background: "var(--gloom-surface-raised)",
+  border: "1px solid var(--gloom-control-border)",
+  borderRadius: "var(--gloom-radius-lg)",
+  padding: "var(--gloom-space-xs) var(--gloom-space-sm)",
+  fontSize: "var(--gloom-type-ui)",
+  boxSizing: "border-box",
+} as const;
+
+/**
+ * Desktop and web: what the pointer is over, explained (a heat map tile, a
+ * map feature, a flow's relationship): the flat surface lifted by the one
+ * elevation, as everything floating is. A tooltip never takes the pointer.
+ */
+export const TOOLTIP_SURFACE_STYLE = {
+  ...FLAT_SURFACE_STYLE,
+  boxShadow: "var(--gloom-elevation)",
+  pointerEvents: "none",
+} as const;
+
 /** A key and what it does, drawn on the desktop and the web as a keycap and a word. */
 export interface DialogKeyHint {
   /** As the terminal names it: "Enter", "Esc", "Shift+Enter", "Tab", "↑↓", "y". */
@@ -51,6 +78,13 @@ export interface DialogDesktopFooter {
   note?: string;
 }
 
+/**
+ * A form dialog's width, in cells: pane settings and New Portfolio, whose
+ * broker connect step fits in it (its QR code, the link, the note wrapped),
+ * and the browser sign-in dialogs, which match that step.
+ */
+export const FORM_DIALOG_WIDTH = 68;
+
 /**
  * Desktop and web: the width of a dialog body laid out `columns` cells wide,
  * narrowed to fit a phone, where the fixed width would run past the edge.

package/src/components/ui/icon.tsx

@@ -24,6 +24,8 @@ export type IconName =
   | "cloud"
   | "sound-on"
   | "sound-off"
+  | "play"
+  | "pause"
   | "user"
   | "sort-up"
   | "sort-down"
@@ -57,6 +59,8 @@ export const ICON_GLYPHS: Record<IconName, string> = {
   cloud: "☁",
   "sound-on": "◖)",
   "sound-off": "◖·",
+  play: "▸",
+  pause: "‖",
   user: "@",
   "sort-up": "▲",
   "sort-down": "▼",