gloomberb 0.17.0 → 0.17.2

package/src/cli/pane-functions/report-notices.ts

@@ -26,6 +26,21 @@ export function renderedReportNotices(semanticUi: readonly RemoteUiNodeSnapshot[
   return { notices, facts };
 }
 
+/**
+ * Why a rendered pane cannot give the report it was asked for, from the
+ * `report-failure` node it publishes: `{ message, details? }`. OMON opened on
+ * an expiry the chain does not list says so in its body; the report fails with
+ * the error the plain command (`options --expiration`) prints, instead of
+ * reading that body back as a view. Null when the pane publishes none.
+ */
+export function renderedReportFailure(semanticUi: readonly RemoteUiNodeSnapshot[]): { message: string; details?: string } | null {
+  const metadata = semanticUi.find((node) => node.role === "report-failure")?.metadata;
+  const message = typeof metadata?.message === "string" ? metadata.message.trim() : "";
+  if (!message) return null;
+  const details = typeof metadata?.details === "string" && metadata.details.trim() ? metadata.details.trim() : undefined;
+  return details ? { message, details } : { message };
+}
+
 const FRESHNESS_STATUSES: readonly HeadlessFreshnessStatus[] = ["live", "delayed", "stale", "not-a-feed"];
 
 /** The `sources` a pane publishes: each a name and a time. */

package/src/cli/symbol-args.ts

@@ -13,6 +13,25 @@ export function symbolInputKey(symbol: string): string {
   return symbol.trim().replace(/^\$/, "").toUpperCase();
 }
 
+/**
+ * How a command's symbol list spots one security typed twice: `symbolInputKey`,
+ * with a share class written with a dot or a dash as one (BRK.B and BRK-B).
+ */
+function securityInputKey(symbol: string): string {
+  return symbolInputKey(symbol).replace(/-/g, ".");
+}
+
+/** The securities of a symbol list, each once, in the first spelling typed: `AAPL aapl BRK.B BRK-B` is AAPL and BRK.B. */
+export function uniqueSecuritySymbols(symbols: readonly string[]): string[] {
+  const seen = new Set<string>();
+  return symbols.filter((symbol) => {
+    const key = securityInputKey(symbol);
+    if (!key || seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
 /** The symbols without repeats, first spelling kept, and how many repeats were dropped. */
 export function uniqueSymbols(symbols: readonly string[]): { symbols: string[]; repeated: number } {
   const seen = new Set<string>();

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

@@ -13,6 +13,7 @@ import {
 } from "../../../ui";
 import { displayWidth, truncateTextSegments, truncateToDisplayWidth } from "../../../utils/format";
 import { Spinner } from "../../ui";
+import { ClippedText } from "../../ui/display";
 import { useCommandBarPalette } from "../panel/palette";
 import { getRowPresentation } from "../view-model";
 import {
@@ -306,7 +307,7 @@ export const CommandBarListBody = memo(function CommandBarListBody({
         if (row.kind === "message") {
           return (
             <Box key={row.id} height={1} paddingLeft={labelEdgePadding} paddingRight={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}>
-              <Text fg={palette.text}>{truncateToDisplayWidth(t(row.label), labelEdgeWidth)}</Text>
+              <ClippedText fg={palette.text} text={t(row.label)} width={labelEdgeWidth} />
             </Box>
           );
         }

package/src/components/command-bar/workflow/builtin.ts

@@ -5,8 +5,8 @@ import {
 } from "../../../plugins/builtin/portfolio-list/command-bar";
 import type { CommandBarFieldOption, CommandBarWorkflowField, CommandBarWorkflowRoute } from "./types";
 import { buildCommandBarWorkflowRoute } from "./route-builder";
-import { teamPrefix } from "../../../plugins/builtin/cloud/team/model";
-import { teamStore } from "../../../plugins/builtin/cloud/team/store";
+import { teamPrefix } from "../../../team/model";
+import { teamStore } from "../../../team/store";
 
 /**
  * Where a new collection lives: me, or one of my teams. Only asked when there

package/src/components/command-bar/workflow/collection-actions.ts

@@ -1,7 +1,7 @@
 import type { Dispatch } from "react";
 import { apiClient } from "../../../api-client";
 import { t } from "../../../i18n";
-import { teamCollectionLocalId } from "../../../plugins/builtin/cloud/team/collections";
+import { teamCollectionLocalId } from "../../../team/collections";
 import type { DataProvider } from "../../../types/data-provider";
 import type { AppTickerRepositoryPort } from "../../../core/app-service-ports";
 import type { PluginRegistry } from "../../../plugins/registry";

package/src/components/feedback-dialog.tsx

@@ -19,7 +19,7 @@ import {
 } from "../feedback/types";
 import { t, tf } from "../i18n";
 import { useAppLanguage } from "../i18n/react";
-import { requestAuthDialog } from "../plugins/builtin/cloud/auth-dialog";
+import { requestAuthDialog } from "../account/auth-dialog";
 import { getSharedRegistry } from "../plugins/registry";
 import { useViewport } from "../react/input";
 import { useAppStateRef } from "../state/app/context";

package/src/components/index.ts

@@ -125,7 +125,7 @@ export { MarkdownText } from "./markdown-text";
 // this file is the public `gloomberb/components` surface: a kit component
 // reaches plugins only once it is added here.
 export {
-  ActionRow, Badge, BulletList, Button, ButtonActionScope, Checkbox, ChoiceDialog, ConfirmDialog, confirmDialog, DataTable,
+  ActionRow, Badge, BulletList, Button, ButtonActionScope, Checkbox, ChoiceDialog, ColumnGrid, ColumnGridPair, ConfirmDialog, confirmDialog, DataTable,
   DetailScrollBody, DialogFrame, DisclosureMarker, Divider, EmptyState, ExternalLink, ExternalLinkText, FieldGrid, FieldLabel,
   fieldGridColumns, fieldGridRows, FigureList, getMessageComposerBlockHeight, GridFieldView, Icon, ICON_GLYPHS,
   IconButton, InlineQuickAddRow, KeyValueRow, ListView, loadingText, Menu, MenuPopover,
@@ -136,7 +136,8 @@ export {
   useFieldRing, usePaneLinkMenuEntry, useQueryBarSearch,
 } from "./ui";
 export type {
-  ActionRowProps, BadgeProps, BulletListProps, ButtonProps, ButtonVariant, CheckboxProps, ChoiceDialogChoice, ConfirmDialogOptions,
+  ActionRowProps, BadgeProps, BulletListProps, ButtonProps, ButtonVariant, CheckboxProps, ChoiceDialogChoice, ColumnGridCell,
+  ColumnGridColumn, ColumnGridPairProps, ColumnGridProps, ConfirmDialogOptions,
   DataTableCell, DataTableColumn, DataTableProps, DataTableVisibleRange, DetailScrollBodyProps, DialogFrameProps,
   DisclosureMarkerProps, DividerProps, EmptyStateProps, FieldGridProps, FieldLabelProps, FieldRing, FieldRingOptions,
   FigureListItem, FigureListProps, GridField,

package/src/components/layout/header.tsx

@@ -28,14 +28,29 @@ import { useAppDispatch, useAppSelector } from "../../state/app/context";
 import { useViewport } from "../../react/input";
 import { canRetryUpdate } from "../../app/global-shortcuts";
 import { t, tf } from "../../i18n";
-import { truncateToDisplayWidth } from "../../utils/format";
+import { displayWidth, truncateToDisplayWidth } from "../../utils/format";
+import { ClippedText } from "../ui/display";
 import { resolveMarketSummaryFit, useMarketSummary } from "./market-summary";
 import { resolveHeaderPromptGeometry } from "./shell/chrome";
 import { useWindowFullscreen } from "./window-fullscreen";
 import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
-import { Button } from "../ui/button";
+import { Button, terminalButtonColumns } from "../ui/button";
 
 const UPDATE_NOTICE_DURATION_MS = 5_000;
+/**
+ * The failed-update message is cut to the room it has, but not below this many
+ * columns ("Update fa..."): narrower says nothing, so the banner is left out.
+ * The retry hint gives way before the message goes under it.
+ */
+const UPDATE_ERROR_MIN_COLUMNS = 12;
+/** Kept clear after the failed-update banner, so its last character never touches the Help pill. */
+const UPDATE_ERROR_GAP_COLUMNS = 1;
+/** Left padding of the update status's slot, in cells; the desktop's title-bar layout also pads its right. */
+const UPDATE_SLOT_PADDING_COLUMNS = 2;
+/** The Help pill's own props, shared by its button and the width the update status leaves it. */
+const helpButtonProps = () => ({ label: "Open Help", displayLabel: t("Help"), shortcut: "?", compact: true });
+/** The terminal pads the pill's right edge by a cell; the desktop pads it in px. */
+const TERMINAL_HELP_PADDING_COLUMNS = 1;
 
 type HeaderActionEvent = {
   key?: string;
@@ -157,11 +172,17 @@ function HeaderPromptInput({
         placeholderColor={subtleColor}
         cursorColor={colors.textBright}
       />
-      {ghostSuffix && (
+      {ghostSuffix && (nativePaneChrome ? (
+        // The desktop sets the suggestion right after the typed text, one
+        // character per `ch` of the field's font, and cuts it where the field ends.
+        <Box position="absolute" top={0} height={1} flexDirection="row" style={{ left: `${displayWidth(query)}ch`, right: 0 }}>
+          <ClippedText fg={subtleColor} text={ghostSuffix} width={0} />
+        </Box>
+      ) : (
         <Box position="absolute" top={0} left={ghostLeft} width={Math.max(0, width - ghostLeft)} height={1}>
           <Text fg={subtleColor}>{truncateToDisplayWidth(ghostSuffix, Math.max(0, width - ghostLeft))}</Text>
         </Box>
-      )}
+      ))}
     </Box>
   );
 }
@@ -244,8 +265,14 @@ function HeaderCommandPrompt({
   );
 }
 
-function UpdateStatus({ onRestart }: { onRestart?: () => void }) {
+/**
+ * What the header says about an update. In the terminal it is cut to `columns`,
+ * the room its slot is guaranteed (the desktop clips it in CSS where the slot
+ * ends), so it never runs into the Help pill or the market cluster beside it.
+ */
+function UpdateStatus({ columns, onRestart }: { columns: number; onRestart?: () => void }) {
   const colors = useThemeColors();
+  const { nativePaneChrome = false } = useUiCapabilities();
   const dispatch = useAppDispatch();
   const updateAvailable = useAppSelector((state) => state.updateAvailable);
   const updateProgress = useAppSelector((state) => state.updateProgress);
@@ -301,11 +328,20 @@ function UpdateStatus({ onRestart }: { onRestart?: () => void }) {
       return <Text fg={colors.headerText}>{t(updateProgress.message ?? "Update ready, restart to apply")}</Text>;
     }
     if (updateProgress.phase === "error") {
+      // One line: an error that carries a stack or a command's output must not grow the header.
+      const message = tf("Update failed: {error}", { error: (updateProgress.error ?? "Unknown error").replace(/\s+/g, " ").trim() });
       const retry = updateKey && canRetryUpdate({ updateAvailable, updateProgress, updateCheckInProgress });
+      const hint = retry ? `  ${updateKey} ${t("retry")}` : "";
+      const hintColumns = displayWidth(hint);
+      // The message goes first, and keeps its room before the hint takes any.
+      const room = columns - UPDATE_ERROR_GAP_COLUMNS;
+      const showHint = hintColumns > 0 && (nativePaneChrome || room - hintColumns >= UPDATE_ERROR_MIN_COLUMNS);
+      const messageColumns = room - (showHint ? hintColumns : 0);
+      if (!nativePaneChrome && messageColumns < UPDATE_ERROR_MIN_COLUMNS) return null;
       return (
-        <Box flexDirection="row">
-          <Text fg={colors.headerText}>{tf("Update failed: {error}", { error: updateProgress.error ?? "Unknown error" })}</Text>
-          {retry ? <Text fg={blendHex(colors.headerText, colors.header, 0.62)}>{`  ${updateKey} ${t("retry")}`}</Text> : null}
+        <Box flexDirection="row" overflow="hidden" paddingRight={UPDATE_ERROR_GAP_COLUMNS}>
+          <ClippedText fg={colors.headerText} text={message} width={messageColumns} />
+          {showHint ? <Text fg={blendHex(colors.headerText, colors.header, 0.62)}>{hint}</Text> : null}
         </Box>
       );
     }
@@ -404,11 +440,11 @@ function HeaderHelpButton({ nativePaneChrome, onPress }: { nativePaneChrome: boo
   return (
     <Box
       flexShrink={0}
-      paddingRight={nativePaneChrome ? undefined : 1}
+      paddingRight={nativePaneChrome ? undefined : TERMINAL_HELP_PADDING_COLUMNS}
       data-gloom-role="header-help-action"
       style={nativePaneChrome ? { marginRight: 8 } : undefined}
     >
-      <Button compact label="Open Help" displayLabel={t("Help")} shortcut="?" onPress={onPress} stopPropagation />
+      <Button {...helpButtonProps()} onPress={onPress} stopPropagation />
     </Box>
   );
 }
@@ -437,6 +473,14 @@ export function Header({
     windowFullscreen,
   });
   const shortcutLabel = useCommandBarShortcut();
+  // The terminal lays the header out by cell counts, so it works out what is left
+  // for the update status once the Help pill and the slot's padding are paid for.
+  const updateStatusColumns = Math.max(
+    0,
+    prompt.updateColumns
+      - (onOpenHelp ? terminalButtonColumns(helpButtonProps()) + TERMINAL_HELP_PADDING_COLUMNS : 0)
+      - UPDATE_SLOT_PADDING_COLUMNS * (titleBarOverlay ? 2 : 1),
+  );
   // Desktop has its own window chrome to sit on; the terminal has none, so the
   // bar itself wears the prompt's fill and reads as a single strip.
   const headerBg = nativePaneChrome ? colors.header : headerSurface(colors);
@@ -483,8 +527,8 @@ export function Header({
       >
         <Box width={prompt.left} />
         {commandPrompt}
-        <Box flexGrow={1} paddingLeft={2} paddingRight={2} minWidth={0}>
-          <UpdateStatus onRestart={onRestartForUpdate} />
+        <Box flexGrow={1} paddingLeft={UPDATE_SLOT_PADDING_COLUMNS} paddingRight={UPDATE_SLOT_PADDING_COLUMNS} minWidth={0}>
+          <UpdateStatus columns={updateStatusColumns} onRestart={onRestartForUpdate} />
         </Box>
         {onOpenHelp ? <HeaderHelpButton nativePaneChrome onPress={onOpenHelp} /> : null}
         {marketSummary}
@@ -505,8 +549,8 @@ export function Header({
     >
       <Box width={prompt.left} />
       {commandPrompt}
-      <Box flexGrow={1} minWidth={0} paddingLeft={2}>
-        <UpdateStatus onRestart={onRestartForUpdate} />
+      <Box flexGrow={1} minWidth={0} paddingLeft={UPDATE_SLOT_PADDING_COLUMNS}>
+        <UpdateStatus columns={updateStatusColumns} onRestart={onRestartForUpdate} />
       </Box>
       {onOpenHelp ? <HeaderHelpButton nativePaneChrome={nativePaneChrome} onPress={onOpenHelp} /> : null}
       {marketSummary}

package/src/components/layout/shell/chrome.ts

@@ -73,6 +73,12 @@ export interface HeaderPromptGeometry {
   width: number;
   /** Columns held at the header's right edge for the market cluster. */
   marketColumns: number;
+  /**
+   * Columns between the prompt and the market cluster: the update status, its
+   * padding and the Help pill share them. Never negative, so a window too narrow
+   * for the header reads as no room rather than a negative width.
+   */
+  updateColumns: number;
 }
 
 /**
@@ -95,14 +101,14 @@ export function resolveHeaderPromptGeometry(options: {
     ? getTitlebarLeadingInset({ platform, windowFullscreen })
     : 0;
   const left = leadingInset + 1;
-  const updateColumns = headerPromptUpdateColumns(termWidth);
-  const marketColumns = headerMarketColumns(termWidth, left, updateColumns);
+  const updateReserve = headerPromptUpdateColumns(termWidth);
+  const marketColumns = headerMarketColumns(termWidth, left, updateReserve);
   const width = Math.max(
     HEADER_PROMPT_MIN_WIDTH,
     Math.min(
       resolveCommandSurfaceWidth({ nativePaneChrome, termWidth }),
-      termWidth - left - updateColumns - marketColumns,
+      termWidth - left - updateReserve - marketColumns,
     ),
   );
-  return { left, width, marketColumns };
+  return { left, width, marketColumns, updateColumns: Math.max(0, termWidth - left - width - marketColumns) };
 }

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

@@ -61,7 +61,7 @@ import {
   useShellVisibleLayout,
 } from "./layout-state";
 import { restoreShellHiddenPanes } from "./visible-layout";
-import { AuthDialogHost } from "../../../plugins/builtin/cloud/auth-dialog";
+import { AuthDialogHost } from "../../../account/auth-dialog";
 import { DeviceSignInDialogHost } from "../../../account/device-signin-dialog";
 import { McpConnectDialogHost } from "../../../plugins/builtin/cloud/mcp-connect/dialog";
 import { BrokerSignInDialogHost } from "../../../brokers/signed-in/sign-in-dialog";

package/src/components/layout/status-bar-groups.ts

@@ -1,6 +1,6 @@
 import type { TeamSummary } from "../../api-client";
 import type { SavedLayout } from "../../types/config";
-import type { TeamStoreSnapshot } from "../../plugins/builtin/cloud/team/store";
+import type { TeamStoreSnapshot } from "../../team/store";
 
 export type TabGroupId = "personal" | `team:${string}`;
 

package/src/components/layout/status-bar.tsx

@@ -43,8 +43,8 @@ import { confirmDialog } from "../ui/confirm-dialog";
 import { Tabs } from "../ui/tabs";
 import { useTransientLayout } from "./transient-layout";
 import { linkedLayoutMarker, linkedLayoutStatus, linkedLayoutUpdates } from "../../layout-marketplace/linked";
-import { teamAccentHex } from "../../plugins/builtin/cloud/team/model";
-import { teamStore } from "../../plugins/builtin/cloud/team/store";
+import { teamAccentHex } from "../../team/model";
+import { teamStore } from "../../team/store";
 import { buildStatusBarTabGroups, groupIdFromMarkerValue, groupMarkerValue } from "./status-bar-groups";
 import { requestFeedbackDialog } from "../feedback-dialog";
 import { openFormModal } from "../form-modal";

package/src/components/markdown-text.tsx

@@ -17,6 +17,8 @@ export interface MarkdownTextProps {
   lineWidth?: number;
   /** Desktop and web: the space a blank line leaves between paragraphs, in CSS units; one line when unset. */
   paragraphGap?: string;
+  /** Desktop and web: the size, weight and space of a heading line, such as a reader's section heading; the text's own when unset. */
+  headingStyle?: Readonly<Record<string, string | number>>;
   catalog?: Record<string, InlineTickerCatalogEntry>;
   textColor?: string;
   openTicker?: (symbol: string) => void;
@@ -86,9 +88,11 @@ function parseInlineMarkdown(text: string, links = false): StyledSegment[] {
   return segments;
 }
 
+const HEADING_RE = /^(#{1,3})\s+(.+)$/;
+
 function parseLine(line: string, links: boolean): ParsedLine {
   // Headings
-  const headingMatch = line.match(/^(#{1,3})\s+(.+)$/);
+  const headingMatch = line.match(HEADING_RE);
   if (headingMatch) {
     return {
       heading: true,
@@ -595,6 +599,7 @@ export function MarkdownText({
   openTicker = () => {},
   onOpenLink,
   paragraphGap,
+  headingStyle,
 }: MarkdownTextProps) {
   const { nativePaneChrome } = useUiCapabilities();
   const links = onOpenLink !== undefined;
@@ -620,12 +625,15 @@ export function MarkdownText({
         }
         const line = block.text;
         if (line.trim() === "") {
+          // Under a heading set in its own style, the heading's margin is the space: it sits with what it names.
+          const previous = blocks[index - 1];
+          if (nativePaneChrome && headingStyle && previous?.kind === "line" && HEADING_RE.test(previous.text)) return null;
           return nativePaneChrome && paragraphGap
             ? <Box key={index} flexShrink={0} style={{ height: paragraphGap }} />
             : <Text key={index}>{" "}</Text>;
         }
         const parsed = parseLine(line, links);
-        return (
+        const markdownLine = (
           <MarkdownLine
             key={index}
             parsed={parsed}
@@ -638,6 +646,10 @@ export function MarkdownText({
             onOpenLink={onOpenLink}
           />
         );
+        // A line's height comes from --cell-h, in em of its own size.
+        return nativePaneChrome && headingStyle && parsed.heading
+          ? <Box key={index} flexDirection="column" width="100%" style={{ ...headingStyle, "--cell-h": `${headingStyle.lineHeight ?? 1.35}em` }}>{markdownLine}</Box>
+          : markdownLine;
       })}
     </Box>
   );

package/src/components/reader/article-reader.tsx

@@ -375,7 +375,7 @@ function ArticleReaderView({
         <ReaderText text={lead} geometry={geometry} color={colors.textBright} variant="lead" />
       ) : null}
       {!raw && facts.length > 0 ? (
-        <Box flexDirection="column" style={desktop ? { margin: "0.3em 0 1.3em" } : undefined}>
+        <Box flexDirection="column" style={desktop ? { margin: "0.3em 0 1em" } : undefined}>
           <ReaderText text={readerLabel("Key facts")} geometry={geometry} color={colors.textDim} variant="label" />
           {facts.map((fact, index) => (
             <ReaderText key={index} text={fact} geometry={geometry} color={colors.text} variant="fact" segments={figureSegments(fact)} figureColor={colors.textBright} />

package/src/components/reader/detail-reader.tsx

@@ -9,7 +9,7 @@ import { DetailScrollBody } from "../ui/detail-scroll-body";
 import { KeyValueRow } from "../ui/display";
 import { ExternalLink, usePaneLinkMenuEntry } from "../ui/external-link";
 import { parseArticle } from "./article-text";
-import { DESKTOP_LINE_HEIGHT, READER_APP_FONT, READER_COLUMN_FONT, ReaderBlock, ReaderText, type ReaderGeometry } from "./reader-text";
+import { DESKTOP_LINE_HEIGHT, READER_APP_FONT, READER_COLUMN_FONT, READER_HEADING_STYLE, ReaderBlock, ReaderText, type ReaderGeometry } from "./reader-text";
 
 export interface DetailFact {
   label: string;
@@ -50,14 +50,17 @@ const URL_LINE = /^https?:\/\/\S+$/;
 
 const COLUMN_STYLE = { fontSize: READER_COLUMN_FONT, lineHeight: DESKTOP_LINE_HEIGHT } as const;
 const META_STYLE = { marginBottom: "0.8em" } as const;
-/** Its columns come from styles.css: one pair to a row, or two in a wide reader. */
+/**
+ * At the app's own size, as metadata is in every reader. Its columns come from
+ * styles.css: one pair to a row, or two in a wide reader.
+ */
 const FACTS_STYLE = {
   display: "grid",
-  columnGap: "1.6em",
-  rowGap: "0.2em",
-  fontSize: "0.8em",
+  columnGap: "2em",
+  rowGap: "0.3em",
+  fontSize: READER_APP_FONT,
   lineHeight: 1.5,
-  marginBottom: "1.4em",
+  marginBottom: "1.6em",
 } as const;
 const FACT_TEXT_STYLE = { display: "block", lineHeight: "inherit", minWidth: 0 } as const;
 /** Markdown lines take the reader's line height (the host sets Text line height from --cell-h). */
@@ -118,7 +121,7 @@ function NativeDetail({ meta, facts, body, bodyFormat, note }: DetailContentProp
         ) : null}
         {bodyFormat === "markdown" && body ? (
           <Box flexDirection="column" width="100%" style={MARKDOWN_STYLE}>
-            <MarkdownText text={body} paragraphGap={PARAGRAPH_GAP} />
+            <MarkdownText text={body} paragraphGap={PARAGRAPH_GAP} headingStyle={READER_HEADING_STYLE} />
           </Box>
         ) : blocks.map((block, index) => (
           <Box key={index} flexDirection="column">

package/src/components/reader/reader-text.tsx

@@ -12,18 +12,32 @@ import type { ArticleBlock } from "./article-text";
  * detail reader of list panes.
  */
 
-/** Line height of reading text on the desktop, against its own size. */
-export const DESKTOP_LINE_HEIGHT = 1.65;
-
 /**
- * The reading size on the desktop against the app's own (12px by default):
- * 17.4px, or 16.2px in a column under 480px, where a phone sets its body. A
- * container query in styles.css picks it from the column's own width, so a
- * resize changes it with the layout and nothing counts cells.
+ * The reader's type scale on the desktop and the web, one for every reader
+ * (the article reader, the detail reader, the markdown and docs headings in
+ * them). Reading text sits a step above the app's own size (12px by default)
+ * and every other level is a modest step from it, so the page reads as part
+ * of the app and the levels differ by weight and space as much as by size:
+ *
+ * | Level | Wide | Column under 480px |
+ * |---|---|---|
+ * | Metadata, facts, tables, coverage | 12px, dimmer | 12px |
+ * | Body | 14px, line height 1.6 | 13.2px |
+ * | Lead | 15px | 14.1px |
+ * | Section heading | 16px bold | 15.2px |
+ * | Title | 20px bold | 18.9px |
+ *
+ * The body size comes from `--reader-em`, which a container query in
+ * styles.css lowers in a narrow column, so a resize changes it with the
+ * layout and nothing counts cells. The levels above it are in em of it.
  */
-export const READER_COLUMN_FONT = "calc(var(--reader-em, 1.45) * 1em)";
-/** Back to the app's own size inside a reading column: chips, controls, tables. */
-export const READER_APP_FONT = "calc(1em / var(--reader-em, 1.45))";
+export const READER_COLUMN_FONT = "calc(var(--reader-em, 1.1667) * 1em)";
+/** Back to the app's own size inside a reading column: metadata, chips, controls, tables. */
+export const READER_APP_FONT = "calc(1em / var(--reader-em, 1.1667))";
+/** Line height of reading text on the desktop, against its own size. */
+export const DESKTOP_LINE_HEIGHT = 1.6;
+/** A section heading in reading text: a step above the body, set apart by weight and the space above it. */
+export const READER_HEADING_STYLE = { fontSize: "1.15em", fontWeight: 700, lineHeight: 1.35, margin: "0.9em 0 0.4em" } as const;
 
 export type Segment = { text: string; marked?: boolean; figure?: boolean };
 
@@ -58,14 +72,15 @@ function hasHeaderRow(rows: readonly string[][]): boolean {
 export type TextVariant = "headline" | "meta" | "lead" | "body" | "heading" | "label" | "fact" | "item";
 
 const DESKTOP_VARIANT_STYLE: Record<TextVariant, Record<string, string | number>> = {
-  headline: { fontSize: "1.45em", lineHeight: 1.22, letterSpacing: "-0.01em" },
-  meta: { fontSize: "0.78em", lineHeight: 1.5 },
-  lead: { fontSize: "1.1em", lineHeight: 1.55, marginBottom: "1.1em" },
+  headline: { fontSize: "1.43em", lineHeight: 1.25 },
+  meta: { fontSize: READER_APP_FONT, lineHeight: 1.5 },
+  lead: { fontSize: "1.07em", lineHeight: 1.55, marginBottom: "1em" },
   body: { lineHeight: DESKTOP_LINE_HEIGHT, marginBottom: "0.9em" },
-  heading: { fontSize: "1.08em", lineHeight: 1.35, margin: "0.6em 0 0.35em" },
-  label: { fontSize: "0.8em", lineHeight: 1.6, marginBottom: "0.3em" },
-  fact: { fontSize: "0.95em", lineHeight: 1.55, marginBottom: "0.35em" },
-  item: { lineHeight: 1.6, marginBottom: "0.3em" },
+  heading: READER_HEADING_STYLE,
+  // Names what follows (key facts, coverage) as a section heading does, without the air above a section.
+  label: { ...READER_HEADING_STYLE, margin: "0 0 0.4em" },
+  fact: { fontSize: "0.93em", lineHeight: 1.55, marginBottom: "0.35em" },
+  item: { lineHeight: DESKTOP_LINE_HEIGHT, marginBottom: "0.3em" },
 };
 
 function styled(segments: readonly Segment[], color: string, markColor: string, figureColor: string | undefined, attributes: number): StyledText {