gloomberb 0.18.2 → 0.18.4

package/src/components/sign-in-code-panel.tsx

@@ -42,7 +42,14 @@ export function desktopQrModulePx(modules: number, availablePx: number, cellHeig
 }
 
 interface SignInCodePanelProps {
+  /** The page the browser button opens. */
   url: string | null;
+  /**
+   * The link shown and drawn as the QR code, when it differs from `url`: a
+   * short link that leads to the same page. Null shows neither, for a page
+   * whose own address is too long to read or scan. Defaults to `url`.
+   */
+  link?: string | null;
   /**
    * A code to show under the QR code: Gloom's own sign-in compares it with
    * the page it opens. A broker connect shows none.
@@ -62,10 +69,10 @@ interface SignInCodePanelProps {
 
 /**
  * A browser hand-off: button, QR code, an optional short code, the URL, and a
- * live status. Used to sign in to Gloom and to connect a broker. Degrades by
- * height: the QR needs its full module grid in the terminal, so short
- * terminals drop decoration first and finally fall back to the URL (and code),
- * which works over SSH too. The desktop draws the QR as an image in whole
+ * live status. Used to sign in to Gloom, to connect a broker and to finish a
+ * Pro checkout. Degrades by height: the QR needs its full module grid in the
+ * terminal, so short terminals drop decoration first and finally fall back to
+ * the URL (and code), which works over SSH too. The desktop draws the QR as an image in whole
  * pixel modules, smaller when the rows run out.
  */
 export function SignInCodePanel(props: SignInCodePanelProps) {
@@ -86,17 +93,18 @@ export function SignInCodePanel(props: SignInCodePanelProps) {
       }} />
     )
     : null;
+  const link = props.link === undefined ? url : props.link;
   return desktop
-    ? <DesktopPanel {...props} button={button} />
-    : <TerminalPanel {...props} button={button} />;
+    ? <DesktopPanel {...props} link={link} button={button} />
+    : <TerminalPanel {...props} link={link} button={button} />;
 }
 
-type PanelBodyProps = SignInCodePanelProps & { button: React.ReactNode };
+type PanelBodyProps = Omit<SignInCodePanelProps, "link"> & { link: string | null; button: React.ReactNode };
 
 /** Laid out by the browser: a QR image in whole-pixel modules, the code as a figure. */
-function DesktopPanel({ url, code, status, height, button }: PanelBodyProps) {
+function DesktopPanel({ link, code, status, height, button }: PanelBodyProps) {
   const { cellHeightPx = 18 } = useUiCapabilities();
-  const qr = useMemo(() => (url ? renderQrSvgDataUri(url) : null), [url]);
+  const qr = useMemo(() => (link ? renderQrSvgDataUri(link) : null), [link]);
   const besideQr = DESKTOP_ROWS_BESIDE_QR + (code ? DESKTOP_CODE_ROWS : 0);
   const modulePx = qr ? desktopQrModulePx(qr.modules, (height - besideQr) * cellHeightPx, cellHeightPx) : null;
   const qrPx = qr && modulePx ? modulePx * qr.modules : 0;
@@ -119,7 +127,7 @@ function DesktopPanel({ url, code, status, height, button }: PanelBodyProps) {
           }}
         />
       )}
-      {url && !qrPx && (
+      {link && !qrPx && (
         <Box marginTop={1}>
           <Text fg={colors.textDim}>{t("Not enough room to draw the QR code.")}</Text>
         </Box>
@@ -129,9 +137,9 @@ function DesktopPanel({ url, code, status, height, button }: PanelBodyProps) {
           <FigureText>{code}</FigureText>
         </Box>
       )}
-      {url && (
+      {link && (
         <Box marginTop={code ? 0 : 1} maxWidth="100%">
-          <Text fg={colors.textMuted} wrapText selectable style={{ textAlign: "center" }}>{url}</Text>
+          <Text fg={colors.textMuted} wrapText selectable style={{ textAlign: "center" }}>{link}</Text>
         </Box>
       )}
       <Box marginTop={1}>
@@ -142,16 +150,16 @@ function DesktopPanel({ url, code, status, height, button }: PanelBodyProps) {
 }
 
 /** Laid out in cells: half-block QR lines need their full grid, so short terminals drop rows first. */
-function TerminalPanel({ url, code, status, height, button }: PanelBodyProps) {
-  const qrLines = useMemo(() => (url ? renderQrLines(url) : []), [url]);
+function TerminalPanel({ link, code, status, height, button }: PanelBodyProps) {
+  const qrLines = useMemo(() => (link ? renderQrLines(link) : []), [link]);
   // Reserve the browser button before fitting the QR, code, and status.
-  const contentHeight = height - (url ? 2 : 0);
+  const contentHeight = height - (button ? 2 : 0);
   const codeRows = code ? 1 : 0;
   const showQr = qrLines.length > 0 && contentHeight >= qrLines.length + codeRows + 1;
   const qrRows = showQr ? qrLines.length : 0;
   // A blank row before the code, the link and the status when there is room.
-  const spacious = showQr && contentHeight >= qrRows + codeRows * 2 + (url ? 2 : 0) + 2;
-  const showUrl = !!url && (!showQr || spacious || contentHeight >= qrRows + codeRows + 2);
+  const spacious = showQr && contentHeight >= qrRows + codeRows * 2 + (link ? 2 : 0) + 2;
+  const showUrl = !!link && (!showQr || spacious || contentHeight >= qrRows + codeRows + 2);
 
   return (
     <Box flexDirection="column" alignItems="center">
@@ -165,7 +173,7 @@ function TerminalPanel({ url, code, status, height, button }: PanelBodyProps) {
           ))}
         </Box>
       )}
-      {!showQr && url && (
+      {!showQr && link && (
         <Box height={1}>
           <Text fg={colors.textDim}>{t("Not enough room to draw the QR code.")}</Text>
         </Box>
@@ -182,7 +190,7 @@ function TerminalPanel({ url, code, status, height, button }: PanelBodyProps) {
         <>
           {spacious && <Box height={1} />}
           <Box height={1}>
-            <Text fg={colors.textMuted}>{url}</Text>
+            <Text fg={colors.textMuted}>{link}</Text>
           </Box>
         </>
       )}

package/src/components/ui/column-grid.tsx

@@ -1,8 +1,9 @@
 import type { CSSProperties, ReactNode } from "react";
 import { Box, Text, useUiCapabilities } from "../../ui";
+import { hoverBg } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { displayWidth, padTo, truncateToDisplayWidth } from "../../utils/format";
-import { ExternalLinkText } from "./external-link";
+import { ExternalLinkText, usePaneLinkMenuEntry } from "./external-link";
 
 /** One column of a ColumnGrid. */
 export interface ColumnGridColumn {
@@ -20,9 +21,19 @@ export interface ColumnGridColumn {
   gapBefore?: number;
 }
 
+/**
+ * What a cell's text opens (a row's market, a security's DES): the text is the
+ * target, as a key-value row's value is, and inside a `PaneLinkMenu` the pane
+ * menu lists it as `label`, so the keyboard reaches what a click opens.
+ */
+export interface ColumnGridLink {
+  label: string;
+  onOpen: () => void;
+}
+
 /** Text the grid fits to its column (padded on the terminal, cut by CSS on the desktop), or content the column holds. */
 export type ColumnGridCell =
-  | { text: string; color?: string }
+  | { text: string; color?: string; link?: ColumnGridLink }
   | { content: ReactNode }
   | null;
 
@@ -76,6 +87,35 @@ function gridTemplate(columns: readonly ColumnGridColumn[]): { template: string;
   return { template: tracks.join(" "), gap: undefined, lines };
 }
 
+/** A link cell's pointer handling and its pane-menu entry; nothing for a plain cell. */
+function useLinkTarget(link: ColumnGridLink | undefined) {
+  const colors = useThemeColors();
+  usePaneLinkMenuEntry(link ? `column-grid:${link.label}` : null, link?.label ?? "", () => link?.onOpen());
+  return link ? {
+    cursor: "pointer" as const,
+    hoverBackgroundColor: hoverBg(colors),
+    onMouseDown: (event?: { button?: number }) => { if ((event?.button ?? 0) === 0) link.onOpen(); },
+    "data-gloom-interactive": "true",
+    "data-gloom-label": link.label,
+  } : {};
+}
+
+/** A text cell that opens something, in the terminal: its padded text is the target. */
+function TerminalLinkCell({ text, color, link, width, align }: { text: string; color?: string; link: ColumnGridLink; width: number; align?: "left" | "right" }) {
+  const target = useLinkTarget(link);
+  return <Box width={width} flexDirection="row" {...target}><Text fg={color}>{padTo(text, width, align)}</Text></Box>;
+}
+
+/** A text cell that opens something, on the desktop and the web. */
+function NativeLinkCell({ text, color, link, column, place }: { text: string; color?: string; link: ColumnGridLink; column: ColumnGridColumn; place: CSSProperties }) {
+  const target = useLinkTarget(link);
+  return (
+    <Text fg={color} data-gloom-ui="column-grid-text" {...clipOf(text, column)} {...target} style={{ ...place, ...TEXT_BOX, textAlign: column.align ?? "left" }}>
+      {text}
+    </Text>
+  );
+}
+
 /**
  * Columns of single-line text that line up from row to row: a table of
  * figures under its header, or label and value pairs set in columns. The terminal lays the
@@ -83,7 +123,8 @@ function gridTemplate(columns: readonly ColumnGridColumn[]): { template: string;
  * them. The desktop and the web lay out one CSS grid whose tracks are counted
  * in characters, so the columns follow a resize to the pixel, every row and
  * the header share the same tracks, and text that does not fit ends in an
- * ellipsis instead of being cut to a count of cells.
+ * ellipsis instead of being cut to a count of cells. A text cell with a `link`
+ * opens it on a click and is listed in the pane menu.
  */
 export function ColumnGrid({ columns, rows, width, role }: ColumnGridProps) {
   const { nativePaneChrome } = useUiCapabilities();
@@ -98,7 +139,9 @@ export function ColumnGrid({ columns, rows, width, role }: ColumnGridProps) {
                 <Box key={index} flexDirection="row">
                   {column.gapBefore ? <Box width={column.gapBefore} /> : null}
                   {cell && "text" in cell
-                    ? <Text fg={cell.color}>{padTo(cell.text, column.width, column.align)}</Text>
+                    ? cell.link
+                      ? <TerminalLinkCell text={cell.text} color={cell.color} link={cell.link} width={column.width} align={column.align} />
+                      : <Text fg={cell.color}>{padTo(cell.text, column.width, column.align)}</Text>
                     : <Box width={column.width} flexDirection="row">{cell?.content}</Box>}
                 </Box>
               );
@@ -126,6 +169,7 @@ export function ColumnGrid({ columns, rows, width, role }: ColumnGridProps) {
             const cell = row[index] ?? null;
             if (!cell) return null;
             const place: CSSProperties = { gridColumn: lines[index], gridRow: rowIndex + 1 };
+            if ("text" in cell && cell.link) return <NativeLinkCell key={index} text={cell.text} color={cell.color} link={cell.link} column={column} place={place} />;
             return "text" in cell
               ? (
                 <Text

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 }) };
+}