gloomberb 0.18.1 → 0.18.2

package/src/components/ui/fields.tsx

@@ -1,10 +1,12 @@
 import { Box, Input, Span, Text, TextAttributes, useUiCapabilities, useUiHost } from "../../ui";
-import { useEffect, useRef, useState, type ComponentType, type RefObject } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, type ComponentType, type RefObject } from "react";
 import { type InputRenderable } from "../../ui";
 import { useThemeColors } from "../../theme/theme-context";
 import { useRemoteUiNode } from "../../remote/semantic-tree";
 import { remoteStringValue } from "../../remote/semantic-helpers";
 import { truncateWithEllipsis } from "../../utils/text-wrap";
+import { Button } from "./button";
+import { stepNumber } from "./number-step";
 
 export interface FieldLabelProps {
   label: string;
@@ -35,6 +37,8 @@ export function FieldLabel({ label, active = false, width, maxWidth }: FieldLabe
 
 export interface TextFieldProps {
   label?: string;
+  /** Accessible name when the visible label is rendered separately. */
+  accessibleLabel?: string;
   /**
    * The form's current field, in a form that walks its fields with the
    * keyboard. The terminal marks its label with "> " and indents the other
@@ -51,6 +55,7 @@ export interface TextFieldProps {
   /** The most characters it takes; typing and pasting stop there. */
   maxLength?: number;
   focused?: boolean;
+  disabled?: boolean;
   width?: number;
   inputRef?: RefObject<InputRenderable | null>;
   onChange?: (value: string) => void;
@@ -60,7 +65,8 @@ export interface TextFieldProps {
   type?: "text" | "password" | "date" | "email";
   /** DOM autofill hint, e.g. "email" or "current-password"; terminal hosts ignore it. */
   autoComplete?: string;
-  variant?: "default" | "plain";
+  /** Well is a quiet filled field with an underline only while focused. */
+  variant?: "default" | "plain" | "well";
   /**
    * `comfortable` is the form-page size on the DOM renderer: a taller field
    * with a tight label gap, for dialogs a user fills in rather than dense pane
@@ -117,7 +123,7 @@ function InlineTextField({ label = "", labelWidth = 0, active, width, hint, onMo
     <Box flexDirection="column" width={width}>
       <Box height={1} flexDirection="row" alignItems="center" gap={1} onMouseDown={onMouseDown}>
         <FieldLabel label={label} active={active} width={labelWidth} />
-        <TextFieldControl {...props} width={inputWidth} onMouseDown={onMouseDown} />
+        <TextFieldControl {...props} accessibleLabel={props.accessibleLabel ?? label} width={inputWidth} onMouseDown={onMouseDown} />
       </Box>
       {hint ? (
         <Box paddingLeft={labelWidth + 1}>
@@ -130,11 +136,13 @@ function InlineTextField({ label = "", labelWidth = 0, active, width, hint, onMo
 
 function TextFieldControl({
   label,
+  accessibleLabel,
   active,
   value,
   placeholder,
   maxLength,
   focused,
+  disabled = false,
   width,
   inputRef,
   onChange,
@@ -152,20 +160,20 @@ function TextFieldControl({
   onKeyDown,
 }: TextFieldProps) {
   const colors = useThemeColors();
-  backgroundColor ??= colors.bg;
+  backgroundColor ??= variant === "well" ? colors.panel : colors.bg;
   textColor ??= colors.text;
   placeholderColor ??= colors.textDim;
   useRemoteUiNode({
     role: "text-field",
-    label: label ?? placeholder,
+    label: accessibleLabel ?? label ?? placeholder,
     actions: {
       setValue: (input) => {
         const nextValue = remoteStringValue(input);
-        onChange?.(nextValue);
+        if (!disabled) onChange?.(nextValue);
       },
       submit: (input) => {
         const nextValue = remoteStringValue(input, value ?? "");
-        onSubmit?.(nextValue);
+        if (!disabled) onSubmit?.(nextValue);
       },
       blur: () => onBlur?.(value ?? ""),
     },
@@ -176,10 +184,12 @@ function TextFieldControl({
     return (
       <HostTextField
         label={label}
+        accessibleLabel={accessibleLabel}
         value={value}
         placeholder={placeholder}
         maxLength={maxLength}
-        focused={focused}
+        focused={focused && !disabled}
+        disabled={disabled}
         width={width}
         inputRef={inputRef}
         onChange={onChange}
@@ -233,6 +243,7 @@ function TextFieldControl({
         </Box>
       )}
       <Box height={1} onMouseDown={() => {
+        if (disabled) return;
         onMouseDown?.();
         resolvedInputRef.current?.focus?.();
       }}>
@@ -243,16 +254,20 @@ function TextFieldControl({
           selectable={!isPassword}
           placeholder={isPassword ? "" : placeholder}
           {...(maxLength === undefined ? {} : { maxLength })}
-          focused={focused}
+          focused={focused && !disabled}
           textColor={isPassword ? backgroundColor : textColor}
           placeholderColor={placeholderColor}
           backgroundColor={backgroundColor}
           selectionBg={isPassword ? backgroundColor : undefined}
           selectionFg={isPassword ? backgroundColor : undefined}
           showCursor={!isPassword}
-          onKeyDown={onKeyDown}
+          onKeyDown={(event: Parameters<NonNullable<TextFieldProps["onKeyDown"]>>[0]) => {
+            if (disabled) { event.preventDefault(); event.stopPropagation(); return; }
+            onKeyDown?.(event);
+          }}
           onCursorChange={() => syncCursorOffset()}
           onInput={(nextValue: string) => {
+            if (disabled) return;
             currentValueRef.current = nextValue;
             syncCursorOffset(nextValue);
             onChange?.(nextValue);
@@ -262,12 +277,12 @@ function TextFieldControl({
             // the form has since cleared and swapped out still blurs when the
             // next one takes focus, and passing its old text on would put it
             // back into the cleared draft.
-            if (nextValue === currentValueRef.current) return;
+            if (disabled || nextValue === currentValueRef.current) return;
             currentValueRef.current = nextValue;
             syncCursorOffset(nextValue);
             onChange?.(nextValue);
           }}
-          onSubmit={() => onSubmit?.(currentValueRef.current)}
+          onSubmit={() => { if (!disabled) onSubmit?.(currentValueRef.current); }}
           onBlur={() => onBlur?.(currentValueRef.current)}
         />
         {isPassword && (
@@ -321,6 +336,10 @@ function sanitizeNumberInput(value: string, allowDecimal: boolean, allowNegative
 export interface NumberFieldProps extends Omit<TextFieldProps, "onChange" | "onSubmit" | "onBlur"> {
   allowDecimal?: boolean;
   allowNegative?: boolean;
+  /** Opt-in shared minus/plus, pointer wheel and Up/Down stepping. Not an exchange tick unless the caller supplies one. */
+  step?: number;
+  min?: number;
+  max?: number;
   onChange?: (value: string) => void;
   onSubmit?: (value: string) => void;
   onBlur?: (value: string) => void;
@@ -332,14 +351,75 @@ export function NumberField({
   onChange,
   onSubmit,
   onBlur,
+  step,
+  min,
+  max,
   ...props
 }: NumberFieldProps) {
-  return (
-    <TextField
-      {...props}
-      onChange={(nextValue) => onChange?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
-      onSubmit={(nextValue) => onSubmit?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
-      onBlur={(nextValue) => onBlur?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
-    />
-  );
+  const colors = useThemeColors();
+  const native = useUiCapabilities().nativePaneChrome;
+  const well = props.variant === "well";
+  const valueRef = useRef(props.value ?? "");
+  valueRef.current = props.value ?? "";
+  const localInput = useRef<InputRenderable | null>(null);
+  const inputRef = props.inputRef ?? localInput;
+  const stepping = step !== undefined;
+  const pendingCursor = useRef<number | undefined>(undefined);
+  useLayoutEffect(() => {
+    const cursor = pendingCursor.current, input = inputRef.current;
+    if (cursor === undefined || !input) return;
+    pendingCursor.current = undefined;
+    const offset = Math.min(cursor, (props.value ?? "").length);
+    if (input.setCursorOffset) input.setCursorOffset(offset);
+    else input.cursorOffset = offset;
+  }, [props.value, inputRef]);
+  const change = (value: string) => {
+    if (props.disabled) return;
+    valueRef.current = value;
+    onChange?.(value);
+  };
+  const next = (direction: 1 | -1) => step === undefined ? undefined : stepNumber(valueRef.current, direction, step, min ?? (allowNegative ? undefined : 0), max);
+  const advance = (direction: 1 | -1) => {
+    if (props.disabled) return;
+    const value = next(direction);
+    if (value === undefined) return;
+    // Restore after the controlled value commits, not before the DOM input updates.
+    pendingCursor.current = inputRef.current?.cursorOffset;
+    change(value);
+  };
+  const field = <TextField
+    {...props}
+    variant={stepping && well ? "plain" : props.variant}
+    backgroundColor={well ? colors.panel : props.backgroundColor}
+    label={stepping ? undefined : props.label}
+    accessibleLabel={props.accessibleLabel ?? props.label}
+    inputRef={inputRef}
+    width={stepping && props.width !== undefined ? Math.max(6, props.width - 8) : props.width}
+    onChange={(value) => change(sanitizeNumberInput(value, allowDecimal, allowNegative))}
+    onSubmit={(value) => { if (!props.disabled) onSubmit?.(sanitizeNumberInput(value, allowDecimal, allowNegative)); }}
+    onBlur={(value) => { if (!props.disabled) onBlur?.(sanitizeNumberInput(value, allowDecimal, allowNegative)); }}
+    onKeyDown={(event) => {
+      if (stepping && (event.name === "up" || event.name === "down")) {
+        event.preventDefault(); event.stopPropagation(); advance(event.name === "up" ? 1 : -1); return;
+      }
+      props.onKeyDown?.(event);
+    }}
+  />;
+  if (!stepping) return field;
+  const name = props.accessibleLabel ?? props.label ?? "value";
+  return <Box flexDirection="column" width={props.width}>
+    {props.label ? <FieldLabel label={props.label} active={props.active} /> : null}
+    <Box flexDirection="row" alignItems="center" gap={1} backgroundColor={well ? colors.panel : undefined}
+      // An outline says the well takes typing even before it has focus.
+      style={native && well ? { borderRadius: "var(--gloom-radius-sm)", paddingLeft: 6, boxShadow: props.focused ? `inset 0 0 0 1px ${colors.borderFocused}, inset 0 -2px ${colors.borderFocused}` : `inset 0 0 0 1px ${colors.border}` } : undefined}
+      onMouseScroll={(event: { scroll?: { direction?: string }; preventDefault(): void; stopPropagation(): void }) => {
+      if (props.disabled || !["up", "down"].includes(event.scroll?.direction ?? "")) return;
+      event.preventDefault(); event.stopPropagation();
+      advance(event.scroll?.direction === "up" ? 1 : -1);
+    }}>
+      {field}
+      <Button label={`Decrease ${name}`} displayLabel="-" variant={well ? "plain" : undefined} width={3} compact disabled={props.disabled || next(-1) === undefined} onPress={() => { inputRef.current?.focus?.(); advance(-1); }} />
+      <Button label={`Increase ${name}`} displayLabel="+" variant={well ? "plain" : undefined} width={3} compact disabled={props.disabled || next(1) === undefined} onPress={() => { inputRef.current?.focus?.(); advance(1); }} />
+    </Box>
+  </Box>;
 }

package/src/components/ui/icon.tsx

@@ -36,7 +36,9 @@ export type IconName =
   | "ask"
   | "bot"
   | "team"
-  | "pro";
+  | "pro"
+  | "clock"
+  | "edit";
 
 /** Terminal glyph for each icon; the desktop host draws SVG. */
 export const ICON_GLYPHS: Record<IconName, string> = {
@@ -79,6 +81,9 @@ export const ICON_GLYPHS: Record<IconName, string> = {
   bot: "⍠",
   team: "◉",
   pro: "◊",
+  // Time, for data that arrives late (a delayed quote).
+  clock: "◷",
+  edit: "✎",
 };
 
 export interface IconProps {

package/src/components/ui/list-row-lines.tsx

@@ -0,0 +1,87 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Box, Text, TextAttributes } from "../../ui";
+import { useThemeColors } from "../../theme/theme-context";
+
+/**
+ * Each line's height, in its own type: room for the font's ascent and descent,
+ * so a line's letters sit inside its box in every engine, without relying on
+ * `text-box` trimming (WebKit before 18.2 ignores it). Half of the space
+ * above and below the letters also separates the name from the line under it.
+ */
+const LINE_HEIGHT = 1.2;
+
+/** Room above and below a line for accents and descenders that reach past it. */
+const INK_ROOM = "0.3em";
+
+/**
+ * The line clips for the ellipsis, and WebKit clips both ways whatever the
+ * other axis says, so the clip box reaches past the line by padding, and an
+ * equal negative margin keeps the line where it was.
+ */
+const LINE_STYLE = {
+  display: "block",
+  minWidth: 0,
+  maxWidth: "100%",
+  lineHeight: LINE_HEIGHT,
+  overflow: "hidden",
+  paddingBlock: INK_ROOM,
+  marginBlock: `calc(-1 * ${INK_ROOM})`,
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+} as CSSProperties;
+
+/**
+ * The art beside the two lines (a `LogoMark` of size `lead`) is a square
+ * exactly as tall as the two lines, in their type, so the name and the line
+ * under it always sit within its height, the block centred on it.
+ */
+const LEADING_STYLE: CSSProperties = {
+  flexShrink: 0,
+  fontSize: "var(--gloom-type-ui)",
+  width: `${2 * LINE_HEIGHT}em`,
+  height: `${2 * LINE_HEIGHT}em`,
+};
+
+export interface ListRowLinesProps {
+  label: string;
+  /** The muted line under the label, such as how a broker connects. */
+  description?: string;
+  /** Art before the lines, such as a broker's logo. Decoration: hidden from assistive technology. */
+  leading?: ReactNode;
+  /** The label's colour; the theme's text colour by default. */
+  labelColor?: string;
+  /** The label in bold, as a selected row's. */
+  labelBold?: boolean;
+}
+
+/**
+ * A desktop and web list row's name with one muted line under it, and its
+ * logo before them, the block centred in the row. Every two-line row with
+ * art uses it (`ListView`'s `rowDescriptions`, the first-run guide's list),
+ * so the lines sit on the logo the same way everywhere.
+ */
+export function ListRowLines({ label, description, leading, labelColor, labelBold = false }: ListRowLinesProps) {
+  const colors = useThemeColors();
+  return (
+    <Box
+      flexDirection="row"
+      alignItems="center"
+      minWidth={0}
+      flexShrink={1}
+      data-gloom-role="list-row-lines"
+      style={{ gap: "var(--gloom-space-sm)", fontSize: "var(--gloom-type-ui)" }}
+    >
+      {leading !== undefined && (
+        <Box aria-hidden="true" data-gloom-role="list-row-leading" style={LEADING_STYLE}>
+          {leading}
+        </Box>
+      )}
+      <Box flexDirection="column" minWidth={0} flexShrink={1}>
+        <Text fg={labelColor ?? colors.text} attributes={labelBold ? TextAttributes.BOLD : 0} style={LINE_STYLE}>
+          {label}
+        </Text>
+        {description ? <Text fg={colors.textMuted} style={LINE_STYLE}>{description}</Text> : null}
+      </Box>
+    </Box>
+  );
+}

package/src/components/ui/list-view.tsx

@@ -22,6 +22,12 @@ export interface ListViewItem {
   disabled?: boolean;
   /** Tints the label, e.g. a status in its tone; the words carry the meaning. */
   color?: string;
+  /**
+   * Artwork before the label on the desktop and the web, such as a broker's
+   * logo (`LogoMark`). It is decoration: the terminal does not draw it, and
+   * automation and screen readers read only `label`.
+   */
+  leading?: ReactNode;
 }
 
 export interface ListRowState {
@@ -39,6 +45,12 @@ export interface ListViewProps {
   renderRow?: (item: ListViewItem, state: ListRowState, index: number) => ReactNode;
   getRowBackgroundColor?: (item: ListViewItem, state: ListRowState, index: number) => string | undefined;
   showSelectedDescription?: boolean;
+  /**
+   * Desktop and web: every row sets its `description` on a second line under
+   * its label, and is two rows tall unless `rowHeight` says otherwise. The
+   * terminal keeps one line per row, with `detail` at its end.
+   */
+  rowDescriptions?: boolean;
   emptyMessage?: string;
   bgColor?: string;
   selectedBgColor?: string;
@@ -173,6 +185,7 @@ export function ListView({
   renderRow,
   getRowBackgroundColor,
   showSelectedDescription = false,
+  rowDescriptions,
   emptyMessage = "Nothing to show.",
   bgColor,
   selectedBgColor,
@@ -243,6 +256,7 @@ export function ListView({
         renderRow={renderRow}
         getRowBackgroundColor={getRowBackgroundColor}
         showSelectedDescription={showSelectedDescription}
+        rowDescriptions={rowDescriptions}
         emptyMessage={emptyMessage}
         bgColor={bgColor}
         selectedBgColor={selectedBgColor}

package/src/components/ui/logo-mark.tsx

@@ -0,0 +1,64 @@
+import type { CSSProperties } from "react";
+import { Box, ImageSurface, Text, TextAttributes, useUiCapabilities } from "../../ui";
+import { useThemeColors } from "../../theme/theme-context";
+
+/**
+ * `row`: beside a label in one row (a table cell's `leading`, a list row).
+ * `lead`: the art of a two-line list row; it fills the square `ListRowLines`
+ * sizes to the two lines beside it.
+ */
+type LogoMarkSize = "row" | "lead";
+
+const TILE: Record<LogoMarkSize, { side: string; radius: string; type: string }> = {
+  // A pixel above and below in its row, as a chip.
+  row: { side: "calc(var(--cell-h) - 2px)", radius: "var(--gloom-radius-sm)", type: "var(--gloom-type-caption)" },
+  lead: { side: "100%", radius: "var(--gloom-radius-md)", type: "var(--gloom-type-ui)" },
+};
+
+// Sized by its capital and baseline, so flex centring puts the letter in the
+// middle of the tile whatever the font's ascent and descent (as chrome text).
+const LETTER_STYLE: Record<LogoMarkSize, CSSProperties> = {
+  row: { fontSize: TILE.row.type, lineHeight: 1, textBox: "trim-both cap alphabetic" } as CSSProperties,
+  lead: { fontSize: TILE.lead.type, lineHeight: 1, textBox: "trim-both cap alphabetic" } as CSSProperties,
+};
+
+export interface LogoMarkProps {
+  /** The logo, an image URL; without one, or when it fails to load, the tile shows `name`'s initial. */
+  src?: string | null;
+  /** What the logo stands for, such as a broker. Only its initial is drawn; the label beside it names it. */
+  name: string;
+  size?: LogoMarkSize;
+}
+
+function initialOf(name: string): string {
+  const letter = [...name.trim()].find((character) => /[\p{L}\p{N}]/u.test(character));
+  return letter ? letter.toLocaleUpperCase() : "?";
+}
+
+/**
+ * A logo in a square tile, for lists of brokers and the accounts they hold, on
+ * the desktop and the web. Decoration: hidden from assistive technology, so
+ * the label beside it stays the name. The terminal draws nothing.
+ */
+export function LogoMark({ src, name, size = "row" }: LogoMarkProps) {
+  const desktop = useUiCapabilities().nativePaneChrome === true;
+  const colors = useThemeColors();
+  if (!desktop) return null;
+  const tile = TILE[size];
+  return (
+    <ImageSurface
+      src={src ?? undefined}
+      alt=""
+      objectFit="cover"
+      aria-hidden="true"
+      data-gloom-role="logo-mark"
+      style={{ width: tile.side, height: tile.side, flexShrink: 0, borderRadius: tile.radius }}
+    >
+      <Box width="100%" height="100%" alignItems="center" justifyContent="center" backgroundColor={colors.border}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD} style={LETTER_STYLE[size]}>
+          {initialOf(name)}
+        </Text>
+      </Box>
+    </ImageSurface>
+  );
+}

package/src/components/ui/number-step.ts

@@ -0,0 +1,54 @@
+/** Decimal stepping on a zero-based increment grid, without binary rounding drift. */
+function decimal(value: string | number): { units: bigint; places: number } | undefined {
+  const text = String(value).trim();
+  const match = /^([+-]?)(\d*)(?:\.(\d*))?(?:e([+-]?\d+))?$/i.exec(text);
+  if (!match || !`${match[2]}${match[3] ?? ""}` || !Number.isFinite(Number(text))) return;
+  const exponent = Number(match[4] ?? 0);
+  const places = (match[3]?.length ?? 0) - exponent;
+  if (Math.abs(places) > 18 || text.length > 100) return;
+  const units = BigInt(`${match[1] === "-" ? "-" : ""}${match[2] || "0"}${match[3] ?? ""}`);
+  return places < 0 ? { units: units * 10n ** BigInt(-places), places: 0 } : { units, places };
+}
+function floorDivide(a: bigint, b: bigint): bigint { return a / b - (a < 0n && a % b !== 0n ? 1n : 0n); }
+function ceilDivide(a: bigint, b: bigint): bigint { return -floorDivide(-a, b); }
+function format(units: bigint, places: number): string {
+  const digits = (units < 0n ? -units : units).toString().padStart(places + 1, "0");
+  const text = places ? `${digits.slice(0, -places)}.${digits.slice(-places)}`.replace(/\.?0+$/, "") : digits;
+  return `${units < 0n ? "-" : ""}${text}`;
+}
+export function stepNumber(value: string, direction: 1 | -1, step: number, min?: number, max?: number): string | undefined {
+  const current = decimal(value === "" ? 0 : value), increment = decimal(step);
+  const lower = min === undefined ? undefined : decimal(min), upper = max === undefined ? undefined : decimal(max);
+  if (!current || !increment || increment.units <= 0n || min !== undefined && !lower || max !== undefined && !upper) return;
+  const places = Math.max(current.places, increment.places, lower?.places ?? 0, upper?.places ?? 0);
+  const scaled = (n: { units: bigint; places: number }) => n.units * 10n ** BigInt(places - n.places);
+  const at = scaled(current), by = scaled(increment);
+  let ticks = direction > 0 ? floorDivide(at, by) + 1n : ceilDivide(at, by) - 1n;
+  const low = lower && ceilDivide(scaled(lower), by), high = upper && floorDivide(scaled(upper), by);
+  if (low !== undefined && high !== undefined && low > high) return;
+  if (low !== undefined && ticks < low) ticks = low;
+  if (high !== undefined && ticks > high) ticks = high;
+  const next = ticks * by;
+  // A bound must not make a plus go down or a minus go up, except an empty field.
+  if (value !== "" && (direction > 0 ? next <= at : next >= at)) return;
+  const text = format(next, places), roundTrip = decimal(Number(text));
+  if (!roundTrip || roundTrip.places > places || scaled(roundTrip) !== next) return;
+  return text;
+}
+
+/** Smallest whole-number multiple, for brokers combining a step with whole quantities. */
+export function wholeNumberStep(step: number): number | undefined {
+  const value = decimal(step);
+  if (!value || value.units <= 0n) return;
+  let a = value.units, b = 10n ** BigInt(value.places);
+  while (b) { const remainder = a % b; a = b; b = remainder; }
+  const result = Number(value.units / a);
+  return Number.isSafeInteger(result) ? result : undefined;
+}
+
+export function matchesNumberStep(value: number, step: number): boolean {
+  const n = decimal(value), s = decimal(step);
+  if (!n || !s || s.units <= 0n) return false;
+  const places = Math.max(n.places, s.places);
+  return n.units * 10n ** BigInt(places - n.places) % (s.units * 10n ** BigInt(places - s.places)) === 0n;
+}

package/src/components/ui/select-button.tsx

@@ -48,9 +48,10 @@ export interface SelectButtonProps<T extends string = string> {
    * `inline`: the label and the value in a row, in a toolbar. `field`: a
    * bordered field. `form`: a field in a form of text fields; on the desktop
    * and the web its label sits above it, bold, as a TextField's does; the
-   * terminal draws it inline.
+   * terminal draws it inline. `well`: a field without its border, on a
+   * recessed fill, for a dense panel such as the order ticket.
    */
-  variant?: "inline" | "field" | "form";
+  variant?: "inline" | "field" | "form" | "well";
   width?: number;
   onFocus?: () => void;
   /**
@@ -189,8 +190,8 @@ export function SelectButton<T extends string = string>({
   }
 
   // The terminal draws a form select as it draws an inline one.
-  if (variant === "field") {
-    return <Button label={showLabel ? `${label}: ${current?.short ?? current?.label ?? ""}` : current?.short ?? current?.label ?? label} width={width} active={emphasized} disabled={disabled} onPress={openDialog} stopPropagation />;
+  if (variant === "field" || variant === "well") {
+    return <Button label={showLabel ? `${label}: ${current?.short ?? current?.label ?? ""}` : current?.short ?? current?.label ?? label} width={width} variant={variant === "well" ? "quiet" : undefined} active={emphasized} disabled={disabled} onPress={openDialog} stopPropagation />;
   }
 
   return (

package/src/components/ui/select-field.tsx

@@ -22,10 +22,10 @@ export interface SelectFieldProps {
   width?: number | string;
   height?: number;
   /**
-   * `field` is the form control used in dialogs. `inline` drops the box so a
-   * dense row reads as text; both open the same Menu.
+   * `field` is the framed form control used in dialogs. `well` uses a quiet
+   * filled surface; `inline` reads as text. All open the same Menu.
    */
-  variant?: "field" | "inline";
+  variant?: "field" | "inline" | "well";
   includeUnsetOption?: boolean;
   /**
    * Return focus to the trigger when the menu closes (inside a dialog). A list

package/src/components/ui/status.tsx

@@ -5,6 +5,7 @@ import { Box, Text, useUiCapabilities } from "../../ui";
 import { formatRelativeAge } from "../../utils/datetime-format";
 import { Spinner } from "./loading";
 import { ButtonActionScope } from "./action-scope";
+import { blendForContrast, higherContrast } from "../../theme/color-utils";
 import { Button } from "./button";
 
 /**
@@ -233,14 +234,27 @@ function EmptyStateBody({ title, message, hint, actions, retry, status = "empty"
 export interface NoticeProps {
   children: ReactNode;
   tone?: "muted" | "positive" | "warning" | "negative";
+  variant?: "inline" | "callout";
 }
 
 /** Inline feedback leaves existing content visible, including stale data after a refresh failure. */
-export function Notice({ children, tone = "warning" }: NoticeProps) {
+export function Notice({ children, tone = "warning", variant = "inline" }: NoticeProps) {
   const colors = useThemeColors();
+  const native = useUiCapabilities().nativePaneChrome;
+  const color = tone === "muted" ? colors.textDim : colors[tone];
+  const status = tone === "negative" ? "error" : "notice";
+  // Inline feedback keeps its original single-text shape: a flex row here collapses inside content-sized parents.
+  if (variant !== "callout") {
+    return (
+      <Box data-gloom-status={status} data-gloom-ui="notice">
+        <Text fg={color} wrapText>{children}</Text>
+      </Box>
+    );
+  }
+  const foreground = blendForContrast(color, colors.panel, higherContrast("#000000", "#ffffff", colors.panel), 4.5);
   return (
-    <Box data-gloom-status={tone === "negative" ? "error" : "notice"} data-gloom-ui="notice">
-      <Text fg={tone === "muted" ? colors.textDim : colors[tone]} wrapText>{children}</Text>
+    <Box flexDirection="row" gap={1} paddingX={1} paddingY={native ? 0.35 : 0} backgroundColor={colors.panel} border={["left"]} borderColor={color} data-gloom-status={status} data-gloom-ui="notice" role={native ? tone === "negative" ? "alert" : "status" : undefined} aria-atomic={native ? true : undefined}>
+      <Text fg={foreground}>!</Text><Box flexGrow={1} minWidth={0}><Text fg={foreground} wrapText>{children}</Text></Box>
     </Box>
   );
 }

package/src/components/ui/tabs.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { usePaneMenuItems, usePaneTabStripKeys } from "../layout/pane/footer/registration";
 import type { ContextMenuItem } from "../../types/context-menu";
 import { useShortcut } from "../../react/input";
@@ -22,6 +22,14 @@ type TabPointerEvent = {
 interface TabItem {
   label: string;
   value: string;
+  /**
+   * Artwork before the label on the desktop and the web, such as the logo of
+   * the broker a portfolio's account is at (`LogoMark`). It is decoration: the
+   * terminal does not draw it, and automation and screen readers read only
+   * `label`. Keep the same element between renders (useMemo): a title-bar
+   * strip redraws when it changes.
+   */
+  leading?: ReactNode;
   disabled?: boolean;
   /** Text color while inactive; used for group markers such as a team accent. */
   fg?: string;