gloomberb 0.17.6 → 0.18.0

package/src/portfolio/valuation-basis.ts

@@ -2,38 +2,59 @@ import type { Quote } from "../types/financials";
 import { getCompletedRegularSessionDisplay, type ActiveQuoteDisplay } from "../market-data/market/status";
 import { regularSessionValuationTime } from "../market-data/quotes/regular-session-valuation";
 import type { ReportTime } from "../utils/utc-time";
+import { futuresSettlementDisplay, type FuturesSettlement } from "./futures-positions";
 import { getPortfolioQuoteDisplay, type PortfolioPositionMetrics } from "./position-metrics";
 
 /**
  * What a portfolio's market value is priced at. `latest-print` (the default,
  * as brokers value a book) takes the last trade, pre-market and after hours
  * included. `regular-close` takes the price Last shows: the regular session's
- * close once it is over, so a value is Last times the shares.
+ * close once it is over, so a value is Last times the shares. A future has no
+ * regular close but its exchange settlement, which `quote` gives as Settle:
+ * on that basis it is valued there, dated by its session.
  */
 export type PortfolioValuationBasis = "latest-print" | "regular-close";
 
 /** The basis as reports and panes state it, after "Priced at". */
-export const VALUATION_BASIS_LABELS: Record<PortfolioValuationBasis, string> = {
+const VALUATION_BASIS_LABELS: Record<PortfolioValuationBasis, string> = {
   "latest-print": "the latest print, extended hours included",
   "regular-close": "the regular close",
 };
 
+/** The basis as a book holding futures states it: at the close, they are priced at their settlement. */
+export function valuationBasisLabel(basis: PortfolioValuationBasis, { futures = false }: { futures?: boolean } = {}): string {
+  return basis === "regular-close" && futures ? `${VALUATION_BASIS_LABELS[basis]}, futures at the settle` : VALUATION_BASIS_LABELS[basis];
+}
+
 /** Whether the regular close values this position: an option keeps its mark on either basis. */
 function valuesAtClose(metrics: Pick<PortfolioPositionMetrics, "valuesAtMark"> | null, basis: PortfolioValuationBasis): boolean {
   return basis === "regular-close" && !metrics?.valuesAtMark;
 }
 
+/** Whether a position is valued at its exchange settlement on `basis`: a future at the close. */
+export function valuesAtSettlement(metrics: Pick<PortfolioPositionMetrics, "isFuture"> | null, basis: PortfolioValuationBasis): boolean {
+  return basis === "regular-close" && !!metrics?.isFuture;
+}
+
 /**
  * The price a position is valued at on `basis`. The latest print is
  * getPortfolioQuoteDisplay's. The regular close is the completed regular
  * session's close and its move (getCompletedRegularSessionDisplay), the
  * headline Last and Chg show, and the live price while that session trades.
+ * A future at the close is its settlement and the move from the one before;
+ * without a confirmed settlement it has no price on that basis, never the
+ * Globex print in its place.
  */
 export function getPortfolioValuationDisplay(
   metrics: PortfolioPositionMetrics,
   quote: Quote | null | undefined,
   basis: PortfolioValuationBasis = "latest-print",
+  settlement?: FuturesSettlement | null,
 ): ActiveQuoteDisplay | null {
+  if (valuesAtSettlement(metrics, basis)) {
+    return settlement && (metrics.positionCount === 0 || metrics.pnlLots.some((lot) => Number.isFinite(lot.priceUnits)))
+      ? futuresSettlementDisplay(settlement) : null;
+  }
   const live = getPortfolioQuoteDisplay(metrics, quote);
   if (!live || !valuesAtClose(metrics, basis)) return live;
   return getCompletedRegularSessionDisplay(quote) ?? live;
@@ -42,13 +63,19 @@ export function getPortfolioValuationDisplay(
 /**
  * When the price a position is valued at on `basis` is from: the quote's time
  * for a print, the session's close for a regular close
- * (regularSessionValuationTime). Null without a dated quote.
+ * (regularSessionValuationTime), and a future's settlement session at the
+ * close. Null without a dated quote or settlement.
  */
 export function getPortfolioValuationTime(
   quote: Quote | null | undefined,
   basis: PortfolioValuationBasis = "latest-print",
-  metrics: Pick<PortfolioPositionMetrics, "valuesAtMark"> | null = null,
+  metrics: Pick<PortfolioPositionMetrics, "valuesAtMark" | "isFuture"> | null = null,
+  settlement?: Pick<FuturesSettlement, "date"> | null,
 ): ReportTime | null {
+  if (valuesAtSettlement(metrics, basis)) {
+    const day = settlement ? Date.parse(`${settlement.date}T00:00:00Z`) : Number.NaN;
+    return Number.isFinite(day) ? { time: day, dateOnly: true } : null;
+  }
   if (!quote) return null;
   if (valuesAtClose(metrics, basis)) return regularSessionValuationTime(quote);
   return Number.isFinite(quote.lastUpdated) && quote.lastUpdated > 0 ? { time: quote.lastUpdated, dateOnly: false } : null;

package/src/public/__snapshots__/public-api.test.ts.snap

@@ -43,6 +43,7 @@ exports[`the runtime exports of every public subpath are the reviewed ones 1`] =
     "BulletList",
     "Button",
     "ButtonActionScope",
+    "Card",
     "ChartStrip",
     "ChartTableHeader",
     "Checkbox",
@@ -63,6 +64,7 @@ exports[`the runtime exports of every public subpath are the reviewed ones 1`] =
     "EmptyState",
     "ExternalLink",
     "ExternalLinkText",
+    "FRAMED_TEXTAREA_DESKTOP_STYLE",
     "FeedDataTableStackView",
     "FieldGrid",
     "FieldLabel",
@@ -130,6 +132,7 @@ exports[`the runtime exports of every public subpath are the reviewed ones 1`] =
     "curveSlope",
     "curveStrip",
     "curveSurfaceMinRows",
+    "fieldFrameStyle",
     "fieldGridColumns",
     "fieldGridRows",
     "findMetricTreemapNeighbor",
@@ -156,6 +159,7 @@ exports[`the runtime exports of every public subpath are the reviewed ones 1`] =
     "sortStackItems",
     "spanAxisFormatter",
     "spanDigits",
+    "stackedSeries",
     "statGridColumns",
     "statGridRows",
     "staticSeries",

package/src/public/time-series.ts

@@ -53,5 +53,6 @@ export type {
 } from "../series/csv";
 export type {
   ExpressionSeriesDefinition, LoadedSeriesDefinition, SeriesDefinition, SeriesDrawStyle, SeriesFrequency,
-  SeriesAttribution, SeriesInput, SeriesLoadOutput, SeriesLoadRequest, SeriesLoadResult, SeriesPoint,
+  SeriesAttribution, SeriesInput, SeriesLine, SeriesLinesLoadResult, SeriesLoadOutput, SeriesLoadRequest, SeriesLoadResult, SeriesPlacement,
+  SeriesPoint,
 } from "../series/types";

package/src/remote/confirm-change.tsx

@@ -1,3 +1,4 @@
+import { logFailure } from "../utils/log-failure";
 import { useEffect } from "react";
 import { Box, useUiHost } from "../ui";
 import { ConfirmDialog } from "../components/ui/confirm-dialog";
@@ -80,6 +81,6 @@ export async function confirmRemoteChange(
     closeOnClickOutside: false,
     closeOnEscape: true,
     content: (context) => <RemoteChangeDialog {...context} prompt={prompt} signal={signal} />,
-  }).catch(() => false);
+  }).catch(logFailure("remote.confirm-change", "Opening remote change confirmation failed", false));
   return answer === true;
 }

package/src/remote/server.ts

@@ -49,7 +49,7 @@ export async function startRemoteControlServer(options: RemoteControlServerOptio
     await writeRemoteEndpointFiles(options.dataDir, endpoint);
   } catch (error) {
     await closeHttpServer(httpServer);
-    await removeRemoteEndpointFiles(options.dataDir, endpoint).catch(() => {});
+    await removeRemoteEndpointFiles(options.dataDir, endpoint).catch(() => { /* Intentional ignore: Remove partial endpoint files while preserving the startup error rethrown below. */ });
     throw error;
   }
 

package/src/remote/watchlist.ts

@@ -13,6 +13,8 @@ import {
   resolveCollectionTicker,
 } from "../components/command-bar/workflow/collection-ticker";
 import type { RemoteChangePrompt } from "./types";
+import { RemoteOperationError } from "./controller-utils";
+import { isProviderBusy, SEARCH_BUSY_CODE, SEARCH_BUSY_MESSAGE } from "../sources/provider-errors";
 
 /**
  * `watchlist.add` and `watchlist.remove`: one ticker on one of the person's
@@ -126,6 +128,7 @@ function listingLabel(symbol: string, exchange: string): string {
 }
 
 async function resolveListing(
+  action: WatchlistAction,
   input: WatchlistChangeInput,
   deps: SharedWorkflowDeps,
 ): Promise<ResolvedTickerSearch | null> {
@@ -147,6 +150,11 @@ async function resolveListing(
         ? `${query} matches more than one listing: ${error.listings.slice(0, 6).join(", ")}. Pass exchange to pick one.`
         : error.message);
     }
+    // Search too busy to look the listing up is no miss. A remove has nothing to do: what is not saved is on no list.
+    if (isProviderBusy(error)) {
+      if (action === "remove") return null;
+      throw new RemoteOperationError(SEARCH_BUSY_CODE, SEARCH_BUSY_MESSAGE);
+    }
     throw error;
   }
 }
@@ -168,7 +176,7 @@ export async function planWatchlistChange(
   deps: SharedWorkflowDeps,
 ): Promise<WatchlistChangePlan> {
   const watchlist = resolveWatchlistTarget(deps.getState().config, input.watchlist);
-  const resolved = await resolveListing(input, deps);
+  const resolved = await resolveListing(action, input, deps);
   let listing: ResolvedListing;
   let symbol: string;
   let exchange: string;

package/src/renderers/dom/data-table/row.tsx

@@ -159,7 +159,7 @@ export function WebDataTableHeader<C extends DataTableColumn>({
           >
             {column.headerLeading !== undefined ? <Leading>{column.headerLeading}</Leading> : null}
             <span
-              title={column.label || undefined}
+              title={column.title ?? (column.label || undefined)}
               style={{
                 ...clippedCellTextStyle(column, color, TextAttributes.BOLD),
                 width: "auto",

package/src/renderers/dom/desktop/audio-player.tsx

@@ -0,0 +1,312 @@
+/** @jsxImportSource react */
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import type { AudioPlaybackState, AudioPlayerHandle, HostAudioPlayerProps, HostQueryBarItem } from "../../../ui/host";
+import { releasePointerFocus } from "../host/focus-scope";
+import { WebIcon } from "./icons";
+import { InlineChoices } from "./query-bar";
+
+/** "4:05", or "1:02:09" past an hour. */
+function clock(seconds: number): string {
+  const total = Math.max(0, Math.floor(Number.isFinite(seconds) ? seconds : 0));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const rest = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${rest}` : `${minutes}:${rest}`;
+}
+
+/** "1×", "1.5×". */
+function rateLabel(rate: number): string {
+  return `${Number(rate.toFixed(2))}\u00d7`;
+}
+
+/** The player that is playing; starting another stops it, so two panes never talk over each other. */
+let playingNow: (() => void) | null = null;
+
+function mediaErrorMessage(audio: HTMLAudioElement): string {
+  switch (audio.error?.code) {
+    case 2: return "The recording stopped loading.";
+    case 3: return "The recording could not be decoded.";
+    case 4: return "The recording could not be opened.";
+    default: return "The recording could not be played.";
+  }
+}
+
+/**
+ * The audio player of the desktop and the web: one band in the look of the
+ * query bar (play, the time, a seek track, the speed as inline choices) over
+ * an `<audio>` element. MP3 plays in Chromium and WebKit alike, and the
+ * signed address it plays answers Range requests, so seeking is the
+ * browser's own.
+ */
+export function WebAudioPlayer({
+  src,
+  sourceKey,
+  label,
+  durationSeconds,
+  rates,
+  rate,
+  onRateChange,
+  handleRef,
+  onTimeUpdate,
+  onStateChange,
+  onError,
+}: HostAudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const [state, setState] = useState<AudioPlaybackState>("idle");
+  const [time, setTime] = useState(0);
+  const [duration, setDuration] = useState(durationSeconds ?? 0);
+  // Where the pointer holds the track, until it lets go.
+  const [scrub, setScrub] = useState<number | null>(null);
+  // Whether the listener wants it playing: an address that runs out mid-call
+  // comes back playing, and one paused stays paused.
+  const wantsPlay = useRef(false);
+  const callbacks = useRef({ onTimeUpdate, onStateChange, onError });
+  callbacks.current = { onTimeUpdate, onStateChange, onError };
+  const rateRef = useRef(rate);
+  rateRef.current = rate;
+
+  const report = useCallback((next: AudioPlaybackState) => {
+    setState(next);
+    callbacks.current.onStateChange?.(next);
+  }, []);
+
+  const play = useCallback(async () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    wantsPlay.current = true;
+    try {
+      await audio.play();
+    } catch {
+      // Refused (no source yet, or the page has not been touched): the state
+      // follows the element's own events.
+    }
+  }, []);
+  const pause = useCallback(() => {
+    wantsPlay.current = false;
+    audioRef.current?.pause();
+  }, []);
+  const seek = useCallback((seconds: number, options?: { play?: boolean }) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const limit = Number.isFinite(audio.duration) && audio.duration > 0 ? audio.duration : Number.POSITIVE_INFINITY;
+    const target = Math.max(0, Math.min(seconds, limit));
+    audio.currentTime = target;
+    setTime(target);
+    callbacks.current.onTimeUpdate?.(target);
+    if (options?.play) void play();
+  }, [play]);
+
+  useImperativeHandle(handleRef, (): AudioPlayerHandle => ({
+    play,
+    pause,
+    toggle: async () => {
+      const audio = audioRef.current;
+      if (!audio) return;
+      if (audio.paused) await play();
+      else pause();
+    },
+    seek,
+    seekBy: (delta) => seek((audioRef.current?.currentTime ?? 0) + delta),
+    currentTime: () => audioRef.current?.currentTime ?? 0,
+  }), [pause, play, seek]);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const onTime = () => {
+      setTime(audio.currentTime);
+      callbacks.current.onTimeUpdate?.(audio.currentTime);
+    };
+    const onDuration = () => {
+      if (Number.isFinite(audio.duration) && audio.duration > 0) setDuration(audio.duration);
+    };
+    const onPlay = () => {
+      if (playingNow && playingNow !== pause) playingNow();
+      playingNow = pause;
+    };
+    const onPlaying = () => report("playing");
+    const onPause = () => { if (!audio.ended) report("paused"); };
+    const onWaiting = () => report("loading");
+    const onEnded = () => {
+      wantsPlay.current = false;
+      report("ended");
+    };
+    const onFailure = () => {
+      report("error");
+      callbacks.current.onError?.(mediaErrorMessage(audio));
+    };
+    // WebKit drops the rate when a source loads.
+    const onLoaded = () => { audio.playbackRate = rateRef.current; };
+    audio.addEventListener("timeupdate", onTime);
+    audio.addEventListener("seeked", onTime);
+    audio.addEventListener("durationchange", onDuration);
+    audio.addEventListener("loadedmetadata", onDuration);
+    audio.addEventListener("loadedmetadata", onLoaded);
+    audio.addEventListener("play", onPlay);
+    audio.addEventListener("playing", onPlaying);
+    audio.addEventListener("pause", onPause);
+    audio.addEventListener("waiting", onWaiting);
+    audio.addEventListener("ended", onEnded);
+    audio.addEventListener("error", onFailure);
+    return () => {
+      if (playingNow === pause) playingNow = null;
+      audio.removeEventListener("timeupdate", onTime);
+      audio.removeEventListener("seeked", onTime);
+      audio.removeEventListener("durationchange", onDuration);
+      audio.removeEventListener("loadedmetadata", onDuration);
+      audio.removeEventListener("loadedmetadata", onLoaded);
+      audio.removeEventListener("play", onPlay);
+      audio.removeEventListener("playing", onPlaying);
+      audio.removeEventListener("pause", onPause);
+      audio.removeEventListener("waiting", onWaiting);
+      audio.removeEventListener("ended", onEnded);
+      audio.removeEventListener("error", onFailure);
+    };
+  }, [pause, report]);
+
+  // A new recording starts from the top; a new address for the same one (the
+  // signed one ran out) picks up where it was.
+  const loaded = useRef<{ src: string; key: string } | null>(null);
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio || !src) return;
+    const previous = loaded.current;
+    if (previous?.src === src && previous.key === sourceKey) return;
+    const resume = previous?.key === sourceKey ? { at: audio.currentTime, play: wantsPlay.current } : null;
+    loaded.current = { src, key: sourceKey };
+    if (!resume) {
+      wantsPlay.current = false;
+      setTime(0);
+      setDuration(durationSeconds ?? 0);
+      report("idle");
+    }
+    audio.src = src;
+    audio.load();
+    if (!resume) return;
+    // A fresh address clears the failure of the old one.
+    report(resume.play ? "loading" : "paused");
+    const restore = () => {
+      audio.currentTime = resume.at;
+      if (resume.play) void play();
+    };
+    audio.addEventListener("loadedmetadata", restore, { once: true });
+    return () => audio.removeEventListener("loadedmetadata", restore);
+  }, [durationSeconds, play, report, sourceKey, src]);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.defaultPlaybackRate = rate;
+    audio.playbackRate = rate;
+  }, [rate]);
+
+  // Leaving the call stops it. The element is read now: React has cleared the
+  // ref by the time the cleanup runs.
+  useEffect(() => {
+    const audio = audioRef.current;
+    return () => {
+      if (!audio) return;
+      audio.pause();
+      audio.removeAttribute("src");
+      audio.load();
+    };
+  }, []);
+
+  const total = duration > 0 ? duration : (durationSeconds ?? 0);
+  const shown = scrub ?? time;
+  const fraction = total > 0 ? Math.max(0, Math.min(1, shown / total)) : 0;
+
+  const secondsAt = (clientX: number): number => {
+    const box = trackRef.current?.getBoundingClientRect();
+    if (!box || box.width <= 0 || total <= 0) return 0;
+    return Math.max(0, Math.min(1, (clientX - box.left) / box.width)) * total;
+  };
+  const onTrackDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || total <= 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    setScrub(secondsAt(event.clientX));
+  };
+  const onTrackMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (scrub === null) return;
+    setScrub(secondsAt(event.clientX));
+  };
+  const onTrackUp = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (scrub === null) return;
+    event.currentTarget.releasePointerCapture?.(event.pointerId);
+    const target = secondsAt(event.clientX);
+    setScrub(null);
+    seek(target);
+  };
+
+  const playing = state === "playing" || (state === "loading" && wantsPlay.current);
+  const speed = useMemo<HostQueryBarItem>(() => ({
+    id: "speed",
+    kind: "select",
+    label: "Speed",
+    valueLabel: rateLabel(rate),
+    narrowing: false,
+    inline: true,
+    options: rates.map((option) => ({ value: String(option), label: rateLabel(option), selected: option === rate })),
+    onSelect: (value) => onRateChange(Number(value)),
+    onToggle: () => {},
+    onReset: () => {},
+  }), [onRateChange, rate, rates]);
+
+  return (
+    <div
+      className="gloom-qb gloom-player"
+      data-gloom-role="audio-player"
+      data-state={state}
+      role="group"
+      aria-label={label}
+    >
+      <div className="gloom-qb-scroll">
+        <button
+          type="button"
+          className="gloom-player-toggle"
+          aria-label={playing ? "Pause" : "Play"}
+          aria-keyshortcuts="Space"
+          title={playing ? "Pause (Space)" : "Play (Space)"}
+          onMouseDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            const audio = audioRef.current;
+            if (audio?.paused) void play();
+            else pause();
+            releasePointerFocus(event.currentTarget, event.detail);
+          }}
+        >
+          <WebIcon name={playing ? "pause" : "play"} size={11} />
+        </button>
+        <span className="gloom-player-time" data-gloom-role="audio-elapsed">{clock(shown)}</span>
+        <div
+          ref={trackRef}
+          className="gloom-player-track"
+          role="slider"
+          aria-label="Position"
+          aria-valuemin={0}
+          aria-valuemax={Math.round(total)}
+          aria-valuenow={Math.round(shown)}
+          aria-valuetext={`${clock(shown)} of ${clock(total)}`}
+          data-gloom-interactive={total > 0 ? "true" : undefined}
+          data-scrubbing={scrub !== null ? "true" : undefined}
+          onPointerDown={onTrackDown}
+          onPointerMove={onTrackMove}
+          onPointerUp={onTrackUp}
+          onPointerCancel={() => setScrub(null)}
+          onMouseDown={(event) => event.stopPropagation()}
+        >
+          <div className="gloom-player-rail">
+            <div className="gloom-player-fill" style={{ width: `${fraction * 100}%` }} />
+          </div>
+          <div className="gloom-player-thumb" style={{ left: `${fraction * 100}%` }} />
+        </div>
+        <span className="gloom-player-time" data-gloom-role="audio-total">{clock(total)}</span>
+        <InlineChoices item={speed} />
+      </div>
+      <audio ref={audioRef} preload="metadata" aria-label={label} />
+    </div>
+  );
+}

package/src/renderers/dom/desktop/control-styles.ts

@@ -1,10 +1,13 @@
 import type { ButtonProps } from "../../../components/ui/button";
 import { blendHex, colors, type ThemeColors } from "../../../theme/colors";
+import { RADIUS, controlBorderColour } from "../../../theme/ui-tokens";
 
-export const CONTROL_RADIUS = 6;
+/** Buttons, fields, selects and list cards (docs/pane-conventions.md, "Tokens"). */
+export const CONTROL_RADIUS = RADIUS.md;
 
+/** The border of a control and of a floating surface: `--gloom-control-border`. */
 export function panelBorder(palette: ThemeColors = colors): string {
-  return blendHex(palette.border, palette.borderFocused, 0.18);
+  return controlBorderColour(palette);
 }
 
 export function panelFill(palette: ThemeColors = colors): string {
@@ -19,85 +22,23 @@ export function selectedPanelFill(palette: ThemeColors = colors): string {
   return blendHex(palette.selected, palette.bg, 0.42);
 }
 
+/** A control's border: the accent while it has focus or is chosen, the control border otherwise. */
 export function controlBorderColor(focused = false, active = false, palette: ThemeColors = colors): string {
-  if (active) return palette.borderFocused;
-  if (focused) return blendHex(palette.borderFocused, palette.textBright, 0.24);
-  return panelBorder(palette);
-}
-
-function activeHalo(palette: ThemeColors): string {
-  return `0 0 0 1px ${blendHex(palette.bg, palette.borderFocused, 0.18)}`;
-}
-
-export function controlShadow(active = false, palette: ThemeColors = colors): string {
-  return active
-    ? `${activeHalo(palette)}, inset 0 1px 0 ${blendHex(palette.bg, palette.textBright, 0.06)}`
-    : `inset 0 1px 0 ${blendHex(palette.bg, palette.textBright, 0.04)}`;
-}
-
-const WHITE = "#ffffff";
-const BLACK = "#000000";
-
-function withAlpha(hex: string, alpha: number): string {
-  return `${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}`;
-}
-
-/** How far a raised button's tones move from its fill, toward white at the top and black below. */
-const SOLID_RELIEF = { light: 0.12, shade: 0.06, edge: 0.18, shadow: 0.3 };
-const SURFACE_RELIEF = { light: 0.05, shade: 0.03, edge: 0.08, shadow: 0.14 };
-
-interface ButtonRelief {
-  backgroundImage?: string;
-  boxShadow: string;
-  /** Replaces the border colour, so a solid fill runs to its edge. */
-  borderColor?: string;
-  /** What the button shows while it is held down. */
-  pressedImage?: string;
-  pressedShadow?: string;
-}
-
-/**
- * Light from above, built from the button's own fill so it reads the same on
- * any surface and in every theme: a little lighter at the top, a little darker
- * toward the bottom, a darker band on the bottom edge and a soft shadow under
- * it. Nothing draws a line along the top edge. Held down, the light flips and
- * the shadow goes, so the button sinks.
- */
-function raisedRelief(fill: string, tone: typeof SOLID_RELIEF, ring?: string): ButtonRelief {
-  const shade = blendHex(fill, BLACK, tone.shade);
-  const edge = blendHex(fill, BLACK, tone.edge);
-  const drop = `0 1px 2px ${withAlpha(blendHex(fill, BLACK, 0.75), tone.shadow)}`;
-  return {
-    backgroundImage: `linear-gradient(${blendHex(fill, WHITE, tone.light)}, ${shade} calc(100% - 1px), ${edge} calc(100% - 1px))`,
-    boxShadow: ring ? `${ring}, ${drop}` : drop,
-    pressedImage: `linear-gradient(${shade}, ${fill})`,
-    pressedShadow: ring ?? "none",
-  };
+  if (active || focused) return palette.borderFocused;
+  return controlBorderColour(palette);
 }
 
 /**
- * A button's relief. Primary, danger and a selected button are raised from
- * their fill; a secondary one gets the same light, fainter. Ghost and plain
- * buttons have no fill to light and stay flat, and so does a disabled one.
+ * The four buttons. Primary (and danger, its negative twin) is filled and
+ * bold; secondary is a 1px border; ghost (and plain) is text that takes the
+ * hover fill; a chosen (`active`) button is the selection fill. None of them
+ * casts a shadow. The icon button is `.gloom-icon-button` in styles.css.
  */
-export function buttonRelief(
-  props: Pick<ButtonProps, "variant" | "active" | "disabled">,
-  palette: ThemeColors = colors,
-): ButtonRelief {
-  if (props.variant === "plain" || props.variant === "ghost" || props.disabled) return { boxShadow: "none" };
-  const fill = buttonPalette(props, palette).bg;
-  if (props.active) return raisedRelief(fill, SOLID_RELIEF, `0 0 0 1px ${withAlpha(palette.borderFocused, 0.18)}`);
-  if (props.variant === "primary" || props.variant === "danger") {
-    return { ...raisedRelief(fill, SOLID_RELIEF), borderColor: "transparent" };
-  }
-  return raisedRelief(fill, SURFACE_RELIEF);
-}
-
 export function buttonPalette(
   props: Pick<ButtonProps, "variant" | "active" | "disabled">,
   palette: ThemeColors = colors,
 ) {
-  if (props.variant === "plain") {
+  if (props.variant === "plain" || props.variant === "ghost") {
     return {
       fg: props.disabled ? palette.textMuted : props.active ? palette.textBright : palette.textDim,
       bg: "transparent",
@@ -107,8 +48,8 @@ export function buttonPalette(
   if (props.disabled) {
     return {
       fg: palette.textMuted,
-      bg: subtlePanelFill(palette),
-      border: panelBorder(palette),
+      bg: "transparent",
+      border: controlBorderColour(palette),
     };
   }
   if (props.active) {
@@ -132,18 +73,12 @@ export function buttonPalette(
         bg: palette.negative,
         border: palette.negative,
       };
-    case "ghost":
-      return {
-        fg: palette.textDim,
-        bg: "transparent",
-        border: panelBorder(palette),
-      };
     case "secondary":
     default:
       return {
         fg: palette.text,
-        bg: panelFill(palette),
-        border: panelBorder(palette),
+        bg: "transparent",
+        border: controlBorderColour(palette),
       };
   }
 }