gloomberb 0.18.3 → 0.18.4

package/src/components/ui/country-flag-art.tsx

@@ -142,6 +142,38 @@ const HK_PETALS = Array.from({ length: 5 }, (_, index) => (
 
 const MY_STRIPES = [1, 3, 5].map((index) => `M0,${(index * FLAG_HEIGHT) / 7}h${FLAG_WIDTH}v${FLAG_HEIGHT / 7}h-${FLAG_WIDTH}z`).join("");
 
+/** A serrated white hoist of `teeth` points, from `base` to `tip` across, as Bahrain's. */
+function serration(teeth: number, base: number, tip: number): string {
+  const step = FLAG_HEIGHT / teeth;
+  return `M0,0H${base}${Array.from({ length: teeth }, (_, index) => `L${tip},${(index * step + step / 2).toFixed(2)}L${base},${((index + 1) * step).toFixed(2)}`).join("")}H0Z`;
+}
+
+/** Quarters of a field, top left, top right, bottom left, bottom right. */
+function Quarters({ fills }: { fills: readonly [string, string, string, string] }) {
+  const w = FLAG_WIDTH / 2;
+  const h = FLAG_HEIGHT / 2;
+  return (
+    <>
+      {fills.map((fill, index) => (
+        <rect key={index} x={(index % 2) * w} y={Math.floor(index / 2) * h} width={w + 0.02} height={h + 0.02} fill={fill} />
+      ))}
+    </>
+  );
+}
+
+const GR_STRIPES = [1, 3, 5, 7].map((index) => `M0,${(index * FLAG_HEIGHT) / 9}h${FLAG_WIDTH}v${FLAG_HEIGHT / 9}h-${FLAG_WIDTH}z`).join("");
+const VE_STARS = Array.from({ length: 8 }, (_, index) => {
+  const angle = Math.PI * (0.18 + (index * 0.64) / 7);
+  return star(15 - 5.2 * Math.cos(angle), 12.4 - 5.2 * Math.sin(angle), 0.9);
+}).join("");
+const HN_STARS = [[15, 10], [10.6, 8.2], [10.6, 11.8], [19.4, 8.2], [19.4, 11.8]].map(([cx, cy]) => star(cx!, cy!, 1.25)).join("");
+/** Morocco's seal: a pentagram drawn as five interlaced lines, one point up. */
+const MA_PENTAGRAM = `M${[0, 2, 4, 1, 3].map((index) => {
+  const angle = (Math.PI * 2 * index) / 5 - Math.PI / 2;
+  return `${(15 + 4.4 * Math.cos(angle)).toFixed(2)},${(10.3 + 4.4 * Math.sin(angle)).toFixed(2)}`;
+}).join("L")}Z`;
+const UZ_STARS = [[9.6, 1.6], [11.6, 1.6], [13.6, 1.6], [11.6, 3.4], [13.6, 3.4], [13.6, 5.2]].map(([cx, cy]) => star(cx!, cy!, 0.62)).join("");
+
 /**
  * Hand-drawn at the size they are shown, the way a table shows them: a little
  * simpler than the real thing (7 stripes, a ring of dots) so each stays
@@ -446,4 +478,152 @@ export const FLAG_ART: Record<string, ReactNode> = {
       <path d={sunRays(15, 10, 2.6, 3.9, 16)} stroke="#f6b40e" strokeWidth=".7" />
     </>
   ),
+
+  // The euro area's members, for the calendars and boards that name them.
+  DE: <Bands colors={[BLACK, "#dd0000", "#ffce00"]} />,
+  FR: <Bands colors={["#002395", WHITE, "#ed2939"]} vertical />,
+  IT: <Bands colors={["#009246", WHITE, "#ce2b37"]} vertical />,
+  ES: <Bands colors={["#aa151b", "#f1bf00", "#aa151b"]} weights={[1, 2, 1]} />,
+  NL: <Bands colors={["#ae1c28", WHITE, "#21468b"]} />,
+  BE: <Bands colors={[BLACK, "#fdda24", "#ef3340"]} vertical />,
+  AT: <Bands colors={["#c8102e", WHITE, "#c8102e"]} />,
+  IE: <Bands colors={["#169b62", WHITE, "#ff883e"]} vertical />,
+  PT: (
+    <>
+      <Bands colors={["#006600", "#ff0000"]} weights={[2, 3]} vertical />
+      <circle cx="12" cy="10" r="3.6" fill="none" stroke={GOLD} strokeWidth="1.3" />
+      <path d="M10.6,8.2h2.8v2.6c0,1-.6,1.6-1.4,1.9c-.8-.3-1.4-.9-1.4-1.9z" fill={WHITE} stroke="#ff0000" strokeWidth=".5" />
+    </>
+  ),
+  FI: (
+    <>
+      <Field fill={WHITE} />
+      <NordicCross x={8.4} thickness={5} fill="#002f6c" />
+    </>
+  ),
+  GR: (
+    <>
+      <Field fill={WHITE} />
+      <path d={GR_STRIPES} fill="#0d5eaf" />
+      <rect width="11.1" height="11.1" fill="#0d5eaf" />
+      <path d="M4.44,0h2.22v11.1h-2.22zM0,4.44h11.1v2.22h-11.1z" fill={WHITE} />
+    </>
+  ),
+  LU: <Bands colors={["#ed2939", WHITE, "#00a1de"]} />,
+  EE: <Bands colors={["#0072ce", BLACK, WHITE]} />,
+  LV: <Bands colors={["#9e3039", WHITE, "#9e3039"]} weights={[2, 1, 2]} />,
+  LT: <Bands colors={["#fdb913", "#006a44", "#c1272d"]} />,
+
+  // The rest of Europe that boards and calendars show.
+  IS: (
+    <>
+      <Field fill="#02529c" />
+      <NordicCross x={8} thickness={4.6} fill={WHITE} />
+      <NordicCross x={9.1} thickness={2.4} fill="#dc1e35" />
+    </>
+  ),
+  BG: <Bands colors={[WHITE, "#00966e", "#d62612"]} />,
+  RU: <Bands colors={[WHITE, "#0039a6", "#d52b1e"]} />,
+
+  // Sovereign credit, oil and crop producers.
+  BH: (
+    <>
+      <Field fill="#ce1126" />
+      <path d={serration(5, 7.5, 11)} fill={WHITE} />
+    </>
+  ),
+  KW: (
+    <>
+      <Bands colors={["#007a3d", WHITE, "#ce1126"]} />
+      <path d="M0,0L7.5,6.67V13.33L0,20Z" fill={BLACK} />
+    </>
+  ),
+  IR: (
+    <>
+      <Bands colors={["#239f40", WHITE, "#da0000"]} />
+      <path d="M15,7.9V12.1M13.3,8.4C12.4,9.6 12.6,11.3 14,12M16.7,8.4C17.6,9.6 17.4,11.3 16,12" fill="none" stroke="#da0000" strokeWidth=".7" />
+    </>
+  ),
+  IQ: (
+    <>
+      <Bands colors={["#ce1126", WHITE, BLACK]} />
+      <path d="M11.2,8.6v2.6h1.8M14.1,8.6v2.6M15.6,11.2h1.4v-2.6M18.4,8.6v2.6" fill="none" stroke="#007a3d" strokeWidth=".75" />
+    </>
+  ),
+  CI: <Bands colors={["#f77f00", WHITE, "#009e60"]} vertical />,
+  DO: (
+    <>
+      <Quarters fills={["#002d62", "#ce1126", "#ce1126", "#002d62"]} />
+      <path d="M15,0V20M0,10H30" stroke={WHITE} strokeWidth="3.6" />
+    </>
+  ),
+  PA: (
+    <>
+      <Quarters fills={[WHITE, "#da121a", "#072357", WHITE]} />
+      <path d={star(7.5, 5, 2.3)} fill="#072357" />
+      <path d={star(22.5, 15, 2.3)} fill="#da121a" />
+    </>
+  ),
+  VE: (
+    <>
+      <Bands colors={["#ffcc00", "#00247d", "#cf142b"]} />
+      <path d={VE_STARS} fill={WHITE} />
+    </>
+  ),
+  BO: <Bands colors={["#d52b1e", "#f9e300", "#007934"]} />,
+  PY: (
+    <>
+      <Bands colors={["#d52b1e", WHITE, "#0038a8"]} />
+      <circle cx="15" cy="10" r="2.3" fill={WHITE} stroke="#0038a8" strokeWidth=".6" />
+      <path d={star(15, 10, 1.2)} fill="#f6b40e" />
+    </>
+  ),
+  HN: (
+    <>
+      <Bands colors={["#0073cf", WHITE, "#0073cf"]} />
+      <path d={HN_STARS} fill="#0073cf" />
+    </>
+  ),
+  BJ: (
+    <>
+      <Bands colors={["#fcd116", "#e8112d"]} />
+      <rect width="12" height={FLAG_HEIGHT} fill="#008751" />
+    </>
+  ),
+  ET: (
+    <>
+      <Bands colors={["#078930", "#fcdd09", "#da121a"]} />
+      <circle cx="15" cy="10" r="4.6" fill="#0f47af" />
+      <path d={star(15, 10, 3.4, 5, 1.3)} fill="none" stroke="#fcdd09" strokeWidth=".7" />
+    </>
+  ),
+  UG: (
+    <>
+      <Bands colors={[BLACK, "#fcdc04", "#d90000", BLACK, "#fcdc04", "#d90000"]} />
+      <circle cx="15" cy="10" r="3.8" fill={WHITE} />
+      <path d="M14.2,8.2c.9-.8 2.1-.4 2.2.7l-.6.6v2.8h-.8v-2.4c-.6.1-1.2-.2-1.4-.7z" fill={BLACK} />
+    </>
+  ),
+  UZ: (
+    <>
+      <Bands colors={["#0099b5", "#ce1126", WHITE, "#ce1126", "#1eb53a"]} weights={[6.4, 0.4, 6.4, 0.4, 6.4]} />
+      <Crescent cx={5} cy={3.3} r={2.3} bite={2} shift={0.9} fill={WHITE} back="#0099b5" />
+      <path d={UZ_STARS} fill={WHITE} />
+    </>
+  ),
+  TN: (
+    <>
+      <Field fill="#e70013" />
+      <circle cx="15" cy="10" r="5" fill={WHITE} />
+      <Crescent cx={14.4} cy={10} r={3.75} bite={3} shift={0.95} fill="#e70013" back={WHITE} />
+      <path d={star(16, 10, 1.9, 5, undefined, 90)} fill="#e70013" />
+    </>
+  ),
+  MA: (
+    <>
+      <Field fill="#c1272d" />
+      <path d={MA_PENTAGRAM} fill="none" stroke="#006233" strokeWidth=".75" strokeLinejoin="round" />
+    </>
+  ),
+  CR: <Bands colors={["#002b7f", WHITE, "#ce1126", WHITE, "#002b7f"]} weights={[1, 1, 2, 1, 1]} />,
 };

package/src/components/ui/country-flag.tsx

@@ -1,20 +1,38 @@
+import { createElement, type CSSProperties } from "react";
 import { useUiCapabilities } from "../../ui";
+import type { DataTableCell } from "./data-table";
 import { FLAG_ART, FLAG_HEIGHT, FLAG_WIDTH } from "./country-flag-art";
 
 export interface CountryFlagProps {
   /** ISO 3166 region, or `EU` for the euro area. Anything not drawn renders nothing. */
-  region: string;
+  region: string | null | undefined;
+  /**
+   * Keep the flag's room, blank, for a region with no art: a column of
+   * countries keeps its text in line whether or not each row has a flag.
+   */
+  reserve?: boolean;
 }
 
+const FLAG_STYLE = {
+  display: "block",
+  flex: "none",
+  width: "calc(var(--cell-w, 8px) * 2.25)",
+  height: "calc(var(--cell-w, 8px) * 1.5)",
+} as const;
+
 /**
  * A small flag, 2.25 grid cells wide, for the desktop and the web. Decoration
  * only: it is hidden from assistive technology, so the label beside it stays
  * the name. The terminal draws nothing.
  */
-export function CountryFlag({ region }: CountryFlagProps) {
+export function CountryFlag({ region, reserve = false }: CountryFlagProps) {
   const desktop = useUiCapabilities().nativePaneChrome === true;
-  const art = FLAG_ART[region];
-  if (!desktop || !art) return null;
+  return desktop ? flagArt(region, reserve, FLAG_STYLE) : null;
+}
+
+function flagArt(region: string | null | undefined, reserve: boolean, style: CSSProperties) {
+  const art = region ? FLAG_ART[region] : undefined;
+  if (!art) return reserve ? <svg aria-hidden="true" focusable="false" data-gloom-role="country-flag-room" style={style} /> : null;
   return (
     <svg
       viewBox={`0 0 ${FLAG_WIDTH} ${FLAG_HEIGHT}`}
@@ -22,14 +40,7 @@ export function CountryFlag({ region }: CountryFlagProps) {
       focusable="false"
       data-gloom-role="country-flag"
       data-region={region}
-      style={{
-        display: "block",
-        flex: "none",
-        width: "calc(var(--cell-w, 8px) * 2.25)",
-        height: "calc(var(--cell-w, 8px) * 1.5)",
-        borderRadius: 2,
-        overflow: "hidden",
-      }}
+      style={{ ...style, borderRadius: 2, overflow: "hidden" }}
     >
       {art}
       <rect
@@ -39,3 +50,98 @@ export function CountryFlag({ region }: CountryFlagProps) {
     </svg>
   );
 }
+
+/** A table cell's flag sits this far from its text; a flag before any other label keeps the same gap. */
+const LEAD_STYLE = { ...FLAG_STYLE, marginRight: "var(--gloom-space-xs)" } as const;
+
+/**
+ * The flag of the country `value` names, before a label outside a table: a
+ * field's value, a bar's label, a heading. It keeps the gap a table cell's
+ * flag has. `reserve` keeps the room, blank, for a value with no flag, so a
+ * list's labels stay in line. The terminal draws nothing.
+ */
+export function CountryFlagLead({ value, reserve = false }: { value: string | null | undefined; reserve?: boolean }) {
+  const desktop = useUiCapabilities().nativePaneChrome === true;
+  return desktop ? flagArt(flagRegion(value), reserve, LEAD_STYLE) : null;
+}
+
+/**
+ * The cells a flag and the gap after it take at the start of a table cell. A
+ * column sized for its text widens by this on the desktop, where the flag is
+ * drawn, so the text keeps its room.
+ */
+export const COUNTRY_FLAG_CELLS = 3;
+
+/** A column of countries, widened on the desktop by the flag that leads each. */
+export function withFlagRoom<C extends { width: number }>(column: C, desktop: boolean): C {
+  return desktop ? { ...column, width: column.width + COUNTRY_FLAG_CELLS } : column;
+}
+
+/** The euro area, as sources write it. */
+const EURO_AREA = new Set(["EU", "EA", "EMU", "EZ", "EUR", "EUROZONE", "EURO AREA", "EURO ZONE", "EUROPEAN UNION"]);
+
+/**
+ * What sources call a country when it is not its English name: alpha-3
+ * codes, short and old names. Only regions with a flag are listed.
+ */
+const REGION_ALIASES: Readonly<Record<string, string>> = {
+  UK: "GB", GBR: "GB", "GREAT BRITAIN": "GB", BRITAIN: "GB", ENGLAND: "GB",
+  USA: "US", "U.S.": "US", "UNITED STATES OF AMERICA": "US",
+  JPN: "JP", CHE: "CH", CAN: "CA", AUS: "AU", NZL: "NZ", SWE: "SE", NOR: "NO", DNK: "DK", HKG: "HK", SGP: "SG",
+  CHN: "CN", "MAINLAND CHINA": "CN", "CHINA (MAINLAND)": "CN", "PEOPLE'S REPUBLIC OF CHINA": "CN",
+  KOR: "KR", KOREA: "KR", "REPUBLIC OF KOREA": "KR", "KOREA, SOUTH": "KR", "KOREA, REPUBLIC OF": "KR",
+  TWN: "TW", "TAIWAN, CHINA": "TW", IND: "IN", IDN: "ID", MYS: "MY", PHL: "PH", THA: "TH", VNM: "VN", "VIET NAM": "VN", PAK: "PK",
+  POL: "PL", CZE: "CZ", "CZECH REPUBLIC": "CZ", HUN: "HU", ROU: "RO", UKR: "UA", TUR: "TR", TURKEY: "TR", "TÜRKIYE": "TR", TURKIYE: "TR",
+  KAZ: "KZ", ISR: "IL", SAU: "SA", ARE: "AE", UAE: "AE", QAT: "QA", EGY: "EG", ZAF: "ZA", NGA: "NG", KEN: "KE",
+  MEX: "MX", BRA: "BR", COL: "CO", CHL: "CL", PER: "PE", ARG: "AR",
+  DEU: "DE", FRA: "FR", ITA: "IT", ESP: "ES", NLD: "NL", HOLLAND: "NL", "THE NETHERLANDS": "NL", BEL: "BE", AUT: "AT", IRL: "IE",
+  PRT: "PT", FIN: "FI", GRC: "GR", LUX: "LU", ISL: "IS", EST: "EE", LVA: "LV", LTU: "LT", BGR: "BG",
+  RUS: "RU", "RUSSIAN FEDERATION": "RU", BHR: "BH", CIV: "CI", "IVORY COAST": "CI", "COTE D'IVOIRE": "CI", "CÔTE D'IVOIRE": "CI",
+  "HONG KONG": "HK", "HONG KONG SAR": "HK", DOM: "DO", PAN: "PA", KWT: "KW", IRN: "IR", IRAN: "IR", "IRAN, ISLAMIC REPUBLIC OF": "IR", IRQ: "IQ", VEN: "VE", VENEZUELA: "VE",
+  BEN: "BJ", BOL: "BO", BOLIVIA: "BO", ETH: "ET", HND: "HN", PRY: "PY", UGA: "UG", UZB: "UZ",
+  TUN: "TN", MAR: "MA", CRI: "CR",
+};
+
+let regionCodes: Map<string, string> | null = null;
+
+/** English names of every region with a flag, from the runtime's region names. */
+function namedRegions(): Map<string, string> {
+  if (regionCodes) return regionCodes;
+  regionCodes = new Map();
+  try {
+    const names = new Intl.DisplayNames(["en"], { type: "region", fallback: "none" });
+    for (const code of Object.keys(FLAG_ART)) {
+      const name = names.of(code);
+      if (name) regionCodes.set(name.toUpperCase().replaceAll("’", "'"), code);
+    }
+  } catch {
+    // Intentional ignore: without region names, codes and the aliases above still resolve.
+  }
+  return regionCodes;
+}
+
+/**
+ * The region whose flag stands for `value`, as a pane shows it: an ISO 3166
+ * alpha-2 or alpha-3 code (`GB`, `GBR`, `UK`), the euro area (`EU`, `EA`,
+ * "Euro area"), or the country's English name ("United Kingdom", "Korea").
+ * Null for anything with no flag: a region, a city, several countries.
+ */
+export function flagRegion(value: string | null | undefined): string | null {
+  const key = value?.trim().toUpperCase();
+  if (!key) return null;
+  if (EURO_AREA.has(key)) return "EU";
+  const code = REGION_ALIASES[key] ?? (/^[A-Z]{2}$/.test(key) ? key : namedRegions().get(key.replaceAll("’", "'")) ?? null);
+  return code && FLAG_ART[code] ? code : null;
+}
+
+/**
+ * A table cell led by the flag of the country `value` names, through the
+ * cell's `leading`, on the desktop and the web. The terminal's cell comes
+ * back as it was, so its output does not change. A value with no flag keeps
+ * the flag's room, blank, so a column's text stays in line; widen the column
+ * by `COUNTRY_FLAG_CELLS` on the desktop.
+ */
+export function withCountryFlag(cell: DataTableCell, value: string | null | undefined, desktop: boolean): DataTableCell {
+  if (!desktop) return cell;
+  return { ...cell, leading: createElement(CountryFlag, { region: flagRegion(value), reserve: true }) };
+}

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

@@ -5,6 +5,7 @@ import { useThemeColors } from "../../../../theme/theme-context";
 import { usePaneInstance } from "../../../../state/app/context";
 import { useViewport } from "../../../../react/input";
 import { measurePerf } from "../../../../utils/perf-marks";
+import { displayWidth } from "../../../../utils/format";
 import { useDoubleClickActivation } from "../../../use-double-click-activation";
 import { useScrollBoxScrollActivity } from "../../../table-view-shared";
 import { EmptyState } from "../../status";
@@ -31,6 +32,7 @@ import {
   cutColumnText,
   resolveDataTableColumnClips,
   resolveDataTableVisibleWindow,
+  resolveMoreColumnsHint,
   reuseDataTableColumnClips,
   type DataTableColumnClip,
 } from "./model";
@@ -378,6 +380,27 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     () => tableColumnStarts(displayColumns, columnGap),
     [columnGap, displayColumns],
   );
+  // Columns out of view past the right edge: the header row ends in "more →" there, a press on it scrolls to
+  // them, and the rows leave its cells blank, so a narrow pane says it has more than it shows. The header's
+  // scroll box is as wide as the body's viewport (measuredViewportWidth), so the header row has a blank cell
+  // past it, over the body's vertical scrollbar; the hint is laid over the row, not inside the scroll box,
+  // and takes that cell first.
+  const besideHeader = Math.max(0, Math.min(1, (scrollRef.current?.width ?? 0) - measuredViewportWidth));
+  const moreColumns = horizontalScrollbarVisible ? resolveMoreColumnsHint({
+    columns: displayColumns.map((column) => ({
+      width: column.width,
+      align: column.align,
+      label: sortColumnId === column.id ? `${column.label}${column.label ? " " : ""}▲` : column.label,
+    })),
+    columnGap,
+    columnStarts,
+    frozenFirstColumn: freezeFirstColumn,
+    besideHeader,
+    horizontalPadding,
+    scrollLeft,
+    viewportWidth: measuredViewportWidth,
+  }) : null;
+  const moreColumnsReserve = moreColumns?.reserve ?? 0;
   // 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);
@@ -387,12 +410,13 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
       columnStarts,
       frozenFirstColumn: freezeFirstColumn,
       horizontalPadding,
+      rightReserve: moreColumnsReserve,
       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],
+    [columnGap, columnStarts, displayColumns, freezeFirstColumn, horizontalPadding, measuredViewportWidth, moreColumnsReserve, scrollLeft, showHorizontalScrollbar],
   );
   const reportVisibleRange = useVisibleRangeEmitter({
     itemCount: items.length,
@@ -454,6 +478,17 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     scrollRef: headerScrollRef,
     onHorizontalScroll: syncBodyScroll,
   });
+  // "more →" steps right as Shift+Right does: half the viewport.
+  const scrollToMoreColumns = useCallback(() => {
+    const body = scrollRef.current;
+    const viewportWidth = body?.viewport?.width ?? 0;
+    if (!body || viewportWidth <= 0) return;
+    const maxLeft = Math.max(0, (body.scrollWidth ?? 0) - viewportWidth);
+    body.scrollLeft = Math.min(maxLeft, (body.scrollLeft ?? 0) + Math.max(1, Math.floor(viewportWidth / 2)));
+    syncHeaderScroll();
+    setScrollLeft(body.scrollLeft ?? 0);
+    nativeRenderer.requestRender();
+  }, [nativeRenderer, scrollRef, syncHeaderScroll]);
   const handleBodySizeChange = useCallback(() => {
     measureContentWidth();
     setScrollVersion((current) => current + 1);
@@ -616,7 +651,9 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
             const hasNextLabel = columnIndex < displayColumns.length - 1
               && tableColumnLeadGap(displayColumns, columnIndex + 1, columnGap) === 0;
             const label = column.label + indicator;
-            const labelText = " ".repeat(inset) + (clip
+            // A figure the right edge cuts is blank in every row (cutColumnText), so its label is too.
+            const figuresCut = clip !== null && column.align === "right" && clip.inset + clip.width < column.width;
+            const labelText = figuresCut ? " ".repeat(inset + Math.max(0, clip.width)) : " ".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)
@@ -650,6 +687,28 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
           })}
         </Box>
       </ScrollBox>
+      {moreColumns ? (
+        <Box
+          position="absolute"
+          top={0}
+          left={moreColumns.left}
+          width={displayWidth(moreColumns.text)}
+          height={1}
+          zIndex={2}
+          backgroundColor={colors.panel}
+          hoverBackgroundColor={hoverBg(colors)}
+          cursor="pointer"
+          onMouseDown={(event: any) => {
+            event.preventDefault?.();
+            event.stopPropagation?.();
+            focusPane();
+            onTableMouseDown?.(event);
+            scrollToMoreColumns();
+          }}
+        >
+          <Text fg={colors.textDim}>{moreColumns.text}</Text>
+        </Box>
+      ) : null}
 
       <ScrollBox
         id={bodyScrollId}

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

@@ -1,4 +1,5 @@
 import { displayWidth } from "../../../../utils/format";
+import { tableColumnLeadGap } from "../../table-layout";
 
 /**
  * Where the viewport cuts a column: `inset` cells hidden on its left (past the
@@ -61,10 +62,113 @@ export function reuseDataTableColumnClips(
   return previous.length === next.length && next.every((clip, index) => sameClip(clip, previous[index] ?? null)) ? previous : next;
 }
 
+/**
+ * What a table's header says at its right edge while columns are out of view
+ * past it, longest first: the longest that fits beside the last column shown
+ * whole is drawn. With that column against the edge, the arrow takes the
+ * blank its label ends in. The hint never hides a column: with no blank to
+ * take, the horizontal scrollbar is the only sign.
+ */
+const MORE_COLUMNS_LABELS = ["more →", "more", "→"] as const;
+
+export interface MoreColumnsHint {
+  /** The cells the hint draws: its label, after a blank unless it takes the last column's own. */
+  text: string;
+  /** Where `text` starts, from the viewport's left edge. */
+  left: number;
+  /** Cells at the body's right edge the rows leave blank under the hint (`resolveDataTableColumnClips`). */
+  reserve: number;
+}
+
+interface HintColumn {
+  width: number;
+  align?: string;
+  /** The header label as drawn, with its sort mark. */
+  label: string;
+}
+
+/**
+ * Whether a column is out of view past the body's right edge at this scroll.
+ * A column the edge cuts counts when it shows nothing to read: figures cut on
+ * the right are blank (`cutColumnText`), and text shows less than its label.
+ * Text cut after its label ends in an ellipsis instead.
+ */
+function hasColumnsPastRightEdge(columns: readonly HintColumn[], starts: readonly number[], right: number): boolean {
+  return columns.some((column, index) => {
+    const start = starts[index] ?? 0;
+    if (start + column.width <= right) return false;
+    const shown = right - start;
+    return shown <= 0 || (column.align ?? "left") !== "left" || shown < displayWidth(column.label);
+  });
+}
+
+/**
+ * The "more →" hint at the header's right edge while columns are out of view
+ * past it, or null. The header's scroll box is as wide as the viewport, and
+ * `besideHeader` blank cells follow it on the header row (the cell over the
+ * body's vertical scrollbar); the hint, laid over the row, can reach them.
+ * The hint sits after a blank: a gap, cells past the last column shown whole,
+ * or that column's own trailing blank (a label shorter than its column keeps
+ * one, `fitTableHeaderText`), and only cut columns give it room. Never in a
+ * viewport too narrow to show a column beside it, or before it is measured.
+ */
+export function resolveMoreColumnsHint({
+  columns,
+  columnGap,
+  columnStarts,
+  besideHeader = 0,
+  frozenFirstColumn = false,
+  horizontalPadding,
+  scrollLeft,
+  viewportWidth,
+}: {
+  columns: readonly HintColumn[];
+  columnGap: number;
+  /** Where each column's content starts, from the first column (tableColumnStarts). */
+  columnStarts: readonly number[];
+  /** Blank cells right of the header's scroll box on the header row. */
+  besideHeader?: number;
+  frozenFirstColumn?: boolean;
+  horizontalPadding: number;
+  scrollLeft: number;
+  viewportWidth: number;
+}): MoreColumnsHint | null {
+  const longest = displayWidth(MORE_COLUMNS_LABELS[0]) + 1;
+  if (columns.length === 0 || viewportWidth < longest * 2) return null;
+  const right = scrollLeft + viewportWidth;
+  const starts = columns.map((_, index) => horizontalPadding + (columnStarts[index] ?? 0));
+  if (!hasColumnsPastRightEdge(columns, starts, right)) return null;
+  // The last column drawn whole (a frozen first column rides along with the scroll), and whether its label
+  // ends in a blank of its own.
+  let lastEnd = scrollLeft;
+  let lastPadded = false;
+  columns.forEach((column, index) => {
+    const start = (starts[index] ?? 0) + (frozenFirstColumn && index === 0 ? scrollLeft : 0);
+    const end = start + column.width;
+    if (end > right || end <= lastEnd) return;
+    lastEnd = end;
+    const next = columns[index + 1];
+    lastPadded = !!next && tableColumnLeadGap(columns, index + 1, columnGap) === 0 && displayWidth(column.label) < column.width;
+  });
+  const headerRight = right + Math.max(0, besideHeader);
+  const place = (label: string) => {
+    const labelStart = headerRight - displayWidth(label);
+    // The rows stop where the blank before the label starts, unless that blank is the last column's own.
+    const rowsEnd = labelStart === lastEnd && lastPadded ? lastEnd : labelStart - 1;
+    return { text: ` ${label}`, left: labelStart - 1 - scrollLeft, reserve: Math.max(0, right - rowsEnd), fits: rowsEnd >= lastEnd };
+  };
+  const fitted = MORE_COLUMNS_LABELS.map(place).find((candidate) => candidate.fits);
+  if (fitted) return { text: fitted.text, left: fitted.left, reserve: fitted.reserve };
+  // The last column ends at the header's edge: the arrow takes its label's trailing blank, the rows keep it.
+  if (lastPadded && headerRight === lastEnd) return { text: MORE_COLUMNS_LABELS[2], left: lastEnd - 1 - scrollLeft, reserve: 0 };
+  return null;
+}
+
 /**
  * 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
+ * left. `rightReserve` cells at the right edge show no column (under the
+ * "more →" hint, `resolveMoreColumnsHint`). Null for the whole table when every column is whole or nothing is
  * measured yet.
  */
 export function resolveDataTableColumnClips({
@@ -72,6 +176,7 @@ export function resolveDataTableColumnClips({
   columnStarts,
   frozenFirstColumn,
   horizontalPadding,
+  rightReserve = 0,
   scrollLeft,
   viewportWidth,
   widths,
@@ -81,13 +186,15 @@ export function resolveDataTableColumnClips({
   columnStarts: readonly number[];
   frozenFirstColumn: boolean;
   horizontalPadding: number;
+  /** Cells at the viewport's right edge that show no column. */
+  rightReserve?: 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 right = scrollLeft + viewportWidth - Math.max(0, rightReserve);
   const left = frozenFirstColumn ? scrollLeft + horizontalPadding + (widths[0] ?? 0) + columnGap : scrollLeft;
   let cut = false;
   const clips = widths.map((width, index): DataTableColumnClip | null => {

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

@@ -178,7 +178,7 @@ export interface DataTableProps<
    */
   exportCsv?: () => string;
   /**
-   * A rendered-view report (`gloomberb fn`) reads every row, not only those
+   * A rendered-view report (`gloom fn`) reads every row, not only those
    * the viewport shows. For a bounded table a reader needs whole, such as an
    * option chain's strike window; leave it off for long or paged lists.
    */

package/src/components/ui/display.tsx

@@ -5,6 +5,7 @@ import { blendForContrast, higherContrast } from "../../theme/color-utils";
 import { useThemeColors } from "../../theme/theme-context";
 import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { truncateToDisplayWidth } from "../../utils/format";
+import { CountryFlagLead } from "./country-flag";
 import { usePaneLinkMenuEntry } from "./external-link";
 import { titleCase } from "./header-case";
 import { statToneColor, type StatTone } from "./stat-grid";
@@ -69,6 +70,8 @@ export interface KeyValueRowProps {
    * `PaneLinkMenu` the pane menu lists it as `link.label`, so the keyboard reaches what a click opens.
    */
   link?: { label: string; onOpen: () => void };
+  /** The country the value names (a code or a name): the desktop and the web lead the value with its flag. */
+  country?: string | null;
 }
 
 /**
@@ -120,7 +123,7 @@ export function KeyValueRow(props: KeyValueRowProps) {
  * width in characters, the value and detail taking the rest of the row and
  * clipped in CSS where they run out of it.
  */
-function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, align = "left", link }: KeyValueRowProps) {
+function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, align = "left", link, country }: KeyValueRowProps) {
   const colors = useThemeColors();
   usePaneLinkMenuEntry(link ? `key-value:${label}:${value}` : null, link?.label ?? "", () => link?.onOpen());
   const target = link ? {
@@ -136,6 +139,7 @@ function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidt
     <Box width={width === undefined ? undefined : "100%"} flexDirection="row" overflow="hidden" data-gloom-ui="key-value-row" {...target}>
       {/* At least the label width, in characters; a longer label keeps every character and moves its value along. */}
       <Text fg={colors.textDim} style={{ ...NATIVE_CLIP_STYLE, flex: "0 0 auto", minWidth: `${labelChars}ch`, paddingRight: "1ch", boxSizing: "border-box" }}>{t(label)}</Text>
+      {country ? <CountryFlagLead value={country} /> : null}
       <Text
         fg={color ?? statToneColor(tone, colors) ?? colors.text}
         attributes={emphasis ? TextAttributes.BOLD : undefined}

package/src/components/ui/index.ts

@@ -36,8 +36,10 @@ export { FieldGrid, GridFieldView, fieldGridColumns, fieldGridRows } from "./fie
 export type { FieldGridProps, GridField } from "./field-grid";
 export { StatGrid, statGridColumns, statGridRows } from "./stat-grid";
 export { ColumnGrid, ColumnGridPair } from "./column-grid";
-export type { ColumnGridCell, ColumnGridColumn, ColumnGridPairProps, ColumnGridProps } from "./column-grid";
+export type { ColumnGridCell, ColumnGridColumn, ColumnGridLink, ColumnGridPairProps, ColumnGridProps } from "./column-grid";
 export type { StatGridProps, StatItem } from "./stat-grid";
+export { COUNTRY_FLAG_CELLS, CountryFlag, CountryFlagLead, withCountryFlag, withFlagRoom } from "./country-flag";
+export type { CountryFlagProps } from "./country-flag";
 export { RatioBar } from "./ratio-bar";
 export type { RatioBarProps } from "./ratio-bar";
 export { RangeTrack } from "./range-track";