gloomberb 0.16.0 → 0.16.2

package/src/plugins/builtin/ticker-detail/overview-tab.tsx

@@ -8,7 +8,13 @@ import { PriceReturnStrip } from "../../../components/price-performance";
 import { t } from "../../../i18n";
 import { useFxRatesMap } from "../../../market-data/hooks";
 import { formatMarketPriceWithCurrency, formatSignedMarketPrice, liveQuoteFormatOptions } from "../../../market-data/market/format";
-import { exchangeShortName, marketStateColor, marketStateLabel } from "../../../market-data/market/status";
+import {
+  exchangeShortName,
+  getExtendedSessionDisplay,
+  getRegularSessionDisplay,
+  marketStateColor,
+  marketStateLabel,
+} from "../../../market-data/market/status";
 import { appendQuoteToPriceReturnHistory, buildPriceReturnFields } from "../../../market-data/performance";
 import { useViewport } from "../../../react/input";
 import { useAppSelector } from "../../../state/app/context";
@@ -20,6 +26,7 @@ import { Box, ScrollBox, Text, useUiCapabilities } from "../../../ui";
 import { publicTickerKey, resolveExchangeTimeZone } from "../../../utils/exchanges";
 import { convertCurrency, displayWidth, formatPercentRaw, truncateToDisplayWidth } from "../../../utils/format";
 import { zonedDateKey } from "../../../utils/zoned-date-time";
+import { isDepositaryReceipt } from "../../../utils/depositary-receipt";
 import {
   CompactRangeBar,
   FundamentalsGrid,
@@ -131,9 +138,12 @@ function ResolvedOverviewTab({ width, focused = false, ticker, financials, onOpe
   const quoteSummaryWidth = quoteBookInline ? Math.max(20, contentWidth - quoteBookWidth - 2) : contentWidth;
   // Price, change and ranges keep the instrument's decimals on every streamed tick.
   const moneyOptions = liveQuoteFormatOptions(quote, quote?.currency, ticker.metadata.assetCategory, financials?.quoteMetadata?.instrumentType);
-  const quotePriceText = quote ? formatMarketPriceWithCurrency(quote.price, quote.currency, moneyOptions) : "";
-  const quoteChangeText = quote ? formatSignedMarketPrice(quote.change, moneyOptions) : "";
-  const quotePercentText = quote ? `(${formatPercentRaw(quote.changePercent)})` : "";
+  // The headline is the regular session, which stops at the close; extended trading is the line below it.
+  const sessionQuote = getRegularSessionDisplay(quote);
+  const extendedQuote = getExtendedSessionDisplay(quote);
+  const quotePriceText = sessionQuote ? formatMarketPriceWithCurrency(sessionQuote.price, quote?.currency, moneyOptions) : "";
+  const quoteChangeText = sessionQuote ? formatSignedMarketPrice(sessionQuote.change, moneyOptions) : "";
+  const quotePercentText = sessionQuote ? `(${formatPercentRaw(sessionQuote.changePercent)})` : "";
   // The pane title already names the ticker, so the line leads with the company and drops a name that only repeats it.
   const companyName = [ticker.metadata.name, quote?.name].find((name) => name && name !== ticker.metadata.ticker) ?? "";
   const venueText = listingVenue ? (companyName ? ` (${listingVenue})` : listingVenue) : "";
@@ -184,6 +194,7 @@ function ResolvedOverviewTab({ width, focused = false, ticker, financials, onOpe
     toBase,
     marketCapExchangeRates: exchangeRates,
     nextEarnings: financials?.nextEarnings,
+    depositaryReceipt: isDepositaryReceipt({ ...quote, description }),
     // Report and ex-dividend dates are the listing's calendar days.
     today: zonedDateKey(Date.now(), chartTimeZone ?? "America/New_York"),
   });
@@ -241,7 +252,7 @@ function ResolvedOverviewTab({ width, focused = false, ticker, financials, onOpe
               </Box>
             )}
 
-            {quote && (
+            {sessionQuote && (
               <Box
                 flexDirection={stackQuoteSummary ? "column" : "row"}
                 gap={stackQuoteSummary ? 0 : 2}
@@ -249,30 +260,19 @@ function ResolvedOverviewTab({ width, focused = false, ticker, financials, onOpe
               >
                 <FigureText>{quotePriceText}</FigureText>
                 <Box flexDirection={stackQuoteChange ? "column" : "row"} gap={stackQuoteChange ? 0 : 1}>
-                  <FigureText part="sub" change={quote.change}>{quoteChangeText}</FigureText>
-                  <FigureText part="sub" change={quote.change}>{quotePercentText}</FigureText>
+                  <FigureText part="sub" change={sessionQuote.change}>{quoteChangeText}</FigureText>
+                  <FigureText part="sub" change={sessionQuote.change}>{quotePercentText}</FigureText>
                 </Box>
               </Box>
             )}
-            {quote && (quote.marketState === "PRE" || quote.marketState === "PREPRE") && quote.preMarketPrice != null && (
-              <Box flexDirection="row" gap={2}>
-                <Text fg={colors.textDim}>{t("Pre-Market")}:</Text>
-                <Text fg={priceColor(quote.preMarketChange ?? 0)}>
-                  {formatMarketPriceWithCurrency(quote.preMarketPrice, quote.currency, moneyOptions)}
-                </Text>
-                <Text fg={priceColor(quote.preMarketChange ?? 0)}>
-                  {formatSignedMarketPrice(quote.preMarketChange, moneyOptions)} ({formatPercentRaw(quote.preMarketChangePercent)})
-                </Text>
-              </Box>
-            )}
-            {quote && (quote.marketState === "POST" || quote.marketState === "POSTPOST") && quote.postMarketPrice != null && (
+            {extendedQuote && (
               <Box flexDirection="row" gap={2}>
-                <Text fg={colors.textDim}>{t("After-Hours")}:</Text>
-                <Text fg={priceColor(quote.postMarketChange ?? 0)}>
-                  {formatMarketPriceWithCurrency(quote.postMarketPrice, quote.currency, moneyOptions)}
+                <Text fg={colors.textDim}>{extendedQuote.session === "PRE" ? t("Pre-Market") : t("After-Hours")}:</Text>
+                <Text fg={priceColor(extendedQuote.change ?? 0)}>
+                  {formatMarketPriceWithCurrency(extendedQuote.price, quote?.currency, moneyOptions)}
                 </Text>
-                <Text fg={priceColor(quote.postMarketChange ?? 0)}>
-                  {formatSignedMarketPrice(quote.postMarketChange, moneyOptions)} ({formatPercentRaw(quote.postMarketChangePercent)})
+                <Text fg={priceColor(extendedQuote.change ?? 0)}>
+                  {formatSignedMarketPrice(extendedQuote.change, moneyOptions)} ({formatPercentRaw(extendedQuote.changePercent)})
                 </Text>
               </Box>
             )}
@@ -293,7 +293,7 @@ function ResolvedOverviewTab({ width, focused = false, ticker, financials, onOpe
           <Box flexDirection={rangeInline ? "row" : "column"} gap={rangeInline ? RANGE_PAIR_GAP : 0} width={contentWidth}>
             {hasDayRange && (
               <CompactRangeBar
-                current={quote.price}
+                current={sessionQuote?.price ?? quote.price}
                 low={quote.low!}
                 high={quote.high!}
                 label={dayRangeLabel}
@@ -307,7 +307,7 @@ function ResolvedOverviewTab({ width, focused = false, ticker, financials, onOpe
             )}
             {yearRange && (
               <CompactRangeBar
-                current={quote.price}
+                current={sessionQuote?.price ?? quote.price}
                 low={yearRange.low}
                 high={yearRange.high}
                 label={yearRangeLabel}

package/src/plugins/builtin/ticker-detail/pane.tsx

@@ -207,7 +207,7 @@ export function TickerResearchPane({ focused, width, height }: PaneProps) {
   const quoteFooterActive = resolvedTabId === "overview" || resolvedTabId === "chart";
   const cloudAccess = useCloudAccessFooter({
     delayLabel: tf("{count}m", { count: CLOUD_QUOTE_DELAY_MINUTES }),
-    degraded: financials?.quote?.dataSource !== "live",
+    degraded: financials?.quote?.priceObservation !== "nav" && financials?.quote?.dataSource !== "live",
     focused: focused && quoteFooterActive,
     segmentId: "ticker-research-access",
     shortcutScope: "ticker-research:upgrade",

package/src/plugins/builtin/ticker-detail/quote-footer.ts

@@ -1,6 +1,7 @@
 import type { PaneFooterSegment } from "../../../components/layout/pane/footer";
 import { t } from "../../../i18n";
 import { isQuoteStaleForCurrentSession } from "../../../market-data/quotes/freshness";
+import { formatQuoteNavAsOf } from "../../../market-data/quotes/time";
 import type { Quote } from "../../../types/financials";
 import { displayWidth } from "../../../utils/format";
 
@@ -10,10 +11,13 @@ export function tickerQuoteFooterInfo(
   width?: number,
 ): PaneFooterSegment[] {
   const info: PaneFooterSegment[] = [];
+  const navAsOf = formatQuoteNavAsOf(quote);
   if (isQuoteStaleForCurrentSession(quote)) {
     const status: PaneFooterSegment = { id: "ticker-research-stale", parts: [{ text: t("Stale quote"), tone: "warning" }] };
     const timestamp = new Date(quote!.lastUpdated);
-    if (width != null && quote!.lastUpdated > 0 && Number.isFinite(timestamp.getTime())) {
+    if (navAsOf) {
+      status.parts.push({ text: navAsOf, tone: "muted" });
+    } else if (width != null && quote!.lastUpdated > 0 && Number.isFinite(timestamp.getTime())) {
       const sourceTime = `${timestamp.toISOString().slice(0, 16).replace("T", " ")}Z`;
       const accessWidth = access ? displayWidth(access.parts.map((part) => part.text).join(" ")) + 1 : 0;
       // Keep the warning and the existing entitlement action intact in narrow panes.
@@ -22,6 +26,8 @@ export function tickerQuoteFooterInfo(
       }
     }
     info.push(status);
+  } else if (navAsOf) {
+    info.push({ id: "ticker-research-nav", parts: [{ text: navAsOf, tone: "muted" }] });
   }
   if (access) info.push(access);
   return info;

package/src/plugins/builtin/ticker-detail/quote-monitor/card.tsx

@@ -12,6 +12,7 @@ import { formatPercentRaw } from "../../../../utils/format";
 import { formatMarketPriceWithCurrency, formatSignedMarketPrice, liveQuoteFormatOptions } from "../../../../market-data/market/format";
 import { getActiveQuoteDisplay } from "../../../../market-data/market/status";
 import { isQuoteStaleForCurrentSession } from "../../../../market-data/quotes/freshness";
+import { formatQuoteNavAsOf } from "../../../../market-data/quotes/time";
 import { useQuoteFlashDirection } from "../../../../components/quote-flash";
 import { appendLiveQuotePoint } from "../../../../time-series/chart-data";
 import {
@@ -100,11 +101,13 @@ export function QuoteMonitorCard({
   const display = getActiveQuoteDisplay(quote);
   const quoteStatus = resolveQuoteStatus(quoteEntry, symbol, quote);
   const quoteFailed = quoteStatus.failed && !!display;
+  const navAsOf = formatQuoteNavAsOf(quote);
   const changeColor = quoteFailed ? colors.textDim : priceColor(display?.change ?? 0);
   const flashing = !!flashDirection;
   const currency = quote?.currency || ticker?.metadata.currency || "USD";
   const stacked = width < 31;
   const compactQuoteFailure = quoteFailed && stacked && height <= 3;
+  const compactNavAsOf = navAsOf && stacked && height <= 3;
   // One decimal count per instrument, so streamed ticks never narrow or widen the price column.
   const priceOptions = liveQuoteFormatOptions(quote, currency, assetCategory, cachedFinancials?.quoteMetadata?.instrumentType);
   const priceText = display ? formatMarketPriceWithCurrency(display.price, currency, priceOptions) : "";
@@ -121,7 +124,9 @@ export function QuoteMonitorCard({
   const sparklineWidth = Math.max(8, width - (nativePaneChrome ? rangeLabel.length + 5 : 2));
   const trend = quoteTrend(display?.change);
   const terminalSparklineHeight = !nativePaneChrome && !stacked && height >= 4 ? 2 : 1;
-  const showTerminalSparkline = !quoteFailed || height >= (stacked ? 3 : 2) + 1 + terminalSparklineHeight;
+  const statusRows = (quoteFailed && !compactQuoteFailure ? 1 : 0) + (navAsOf && !compactNavAsOf ? 1 : 0);
+  const showTerminalSparkline = (!quoteFailed && !navAsOf)
+    || height >= (stacked ? 3 : 2) + statusRows + terminalSparklineHeight;
   // Figures sit over the sparkline, so the desktop rings them in the card colour.
   const figureHalo = { textShadow: `0 1px 2px ${colors.bg}` };
   const desktopSymbolStyle = nativePaneChrome
@@ -226,6 +231,11 @@ export function QuoteMonitorCard({
                 {ticker.metadata.name}
               </Text>
             )}
+            {navAsOf && (
+              <Text fg={colors.textDim} style={{ fontSize: "12px", lineHeight: "14px" }}>
+                {navAsOf}
+              </Text>
+            )}
           </Box>
 
           <Box
@@ -274,9 +284,12 @@ export function QuoteMonitorCard({
         <Box flexDirection="column" flexGrow={1} justifyContent="flex-start">
           {stacked ? (
             <Box flexDirection="column">
-              <Text attributes={TextAttributes.BOLD} fg={symbolFg} bg={symbolBg} style={desktopSymbolStyle}>
-                {symbol}
-              </Text>
+              <Box flexDirection="row" gap={1} height={1} overflow="hidden">
+                <Text attributes={TextAttributes.BOLD} fg={symbolFg} bg={symbolBg} style={desktopSymbolStyle}>
+                  {symbol}
+                </Text>
+                {compactNavAsOf && <Text fg={colors.textDim}>{navAsOf}</Text>}
+              </Box>
               <Box flexDirection="column">
                 <FigureText fg={changeColor} dim={flashing} style={figureHalo}>
                   {compactQuoteFailure ? `${priceText} · ${quoteStatus.stale ? "STALE" : "ERROR"}` : priceText}
@@ -327,6 +340,9 @@ export function QuoteMonitorCard({
           {quoteFailed && !compactQuoteFailure && (
             <Box height={1} overflow="hidden"><Text fg={colors.negative}>{quoteStatus.text}</Text></Box>
           )}
+          {navAsOf && !compactNavAsOf && (
+            <Box height={1} overflow="hidden"><Text fg={colors.textDim}>{navAsOf}</Text></Box>
+          )}
           {perpetuals}
           {showTerminalSparkline && <Box height={terminalSparklineHeight} flexDirection="row" alignItems="center" gap={1}>
             <PriceSparkline

package/src/plugins/builtin/ticker-detail/quote-monitor/index.tsx

@@ -264,7 +264,7 @@ export function QuoteMonitorPane({ paneId, focused, width, height }: PaneProps)
             selected={showCursor && index === cursorIndex}
             onSelect={setCursorSymbol}
             onOpen={openTicker}
-            perpetuals={cardHeight >= 8 ? <PerpEquityRow maxRows={1} symbol={entry.symbol} instrumentType={entry.ticker?.metadata.assetCategory} /> : undefined}
+            perpetuals={cardHeight >= 8 ? <PerpEquityRow maxRows={1} symbol={entry.symbol} exchange={entry.ticker?.metadata.exchange} instrumentType={entry.ticker?.metadata.assetCategory} /> : undefined}
           />
         ))}
       </Box>
@@ -299,7 +299,7 @@ export function QuoteMonitorPane({ paneId, focused, width, height }: PaneProps)
               selected={showCursor && rowIndex * columns + columnIndex === cursorIndex}
               onSelect={setCursorSymbol}
               onOpen={openTicker}
-              perpetuals={cardHeight >= 8 ? <PerpEquityRow maxRows={1} symbol={entry.symbol} instrumentType={entry.ticker?.metadata.assetCategory} /> : undefined}
+              perpetuals={cardHeight >= 8 ? <PerpEquityRow maxRows={1} symbol={entry.symbol} exchange={entry.ticker?.metadata.exchange} instrumentType={entry.ticker?.metadata.assetCategory} /> : undefined}
             />
           ))}
         </Box>

package/src/plugins/builtin/time-sales/headless.ts

@@ -29,7 +29,11 @@ export const timeSalesHeadless: HeadlessPaneDefinition<"bundle"> = {
     // One decimal count per column, as the pane shows it, so sub-penny prints align.
     const price = fixedPrice(tapePriceDigits(data.trades.map((row) => row.price)));
     const trades = newestFirst(data.trades).slice(0, Number(args.options.limit ?? 100)).map((row) => ({ ...row, conditions: row.conditions.join(" ") }));
-    return { sections: [
+    // SIP prints, real-time or fifteen minutes delayed by entitlement, dated by the newest print.
+    const freshness = data.feed === "sip"
+      ? { status: "live" as const, cadence: "daily" as const }
+      : { status: "delayed" as const, delayMinutes: Math.round(data.delaySeconds / 60), cadence: "daily" as const };
+    return { freshness, sections: [
       { title: "Observed window", columns: formattedColumns(window, { vwap: price, low: price, high: price }), rows: window },
       { title: "Regular session", columns: formattedColumns([data.session], { high: price, low: price }), rows: [data.session] },
       { title: "Trades", columns: formattedColumns(trades, { price }), rows: trades },

package/src/plugins/builtin/treasury-auctions/headless.ts

@@ -40,6 +40,7 @@ function createTreasuryAuctionsHeadless(
 ): HeadlessPaneDefinition<"rows"> {
   return {
     shape: "rows",
+    freshness: { source: "US Treasury", status: "not-a-feed", basis: "auction results", observedKey: "auctionDate", oldest: null },
     argument: {
       kind: "free-text",
       placeholder: "search",

package/src/plugins/builtin/vol-surface/index.tsx

@@ -6,7 +6,7 @@ import { volSurfaceHeadless } from "./headless";
 export const volSurfaceModule: PluginModule = {
   panes: [{
     id: "vol-surface", name: "Volatility Surface", icon: "V", component: VolSurfacePane,
-    defaultPosition: "right", defaultMode: "floating", defaultFloatingSize: { width: 126, height: 36 },
+    defaultPosition: "right", tickerFollower: true, defaultMode: "floating", defaultFloatingSize: { width: 126, height: 36 },
     tableExport: true, headless: volSurfaceHeadless,
     settings: {
       title: "Volatility Surface Settings",

package/src/plugins/builtin/volatility/headless.ts

@@ -1,6 +1,7 @@
 import type { HeadlessBundleResult, HeadlessPaneContext, HeadlessPaneDefinition, HeadlessPaneLoadArgs } from "../../../types/plugin";
 import { createVolatilityDependencies, loadVolatilityData, type VolatilityLoadResult } from "./client";
 import type { VolatilityData } from "./model";
+import { newestReportTime, oldestReportTime } from "../../../utils/utc-time";
 
 function formattedValue(value: unknown): string { return typeof value === "number" && Number.isFinite(value) ? value.toFixed(2) : "--"; }
 function formattedPercentile(value: unknown): string { return typeof value === "number" && Number.isFinite(value) ? value.toFixed(0) : "--"; }
@@ -53,7 +54,11 @@ export function createVolatilityHeadless(dependencies: VolatilityHeadlessDepende
     async load(args, context) {
       const result = await dependencies.load(args, context);
       context.signal.throwIfAborted();
-      return { ...projectVolatilityHeadless(result.data), errors: result.errors,
+      // Daily index closes, dated by the newest index on the board; a sparse index shows as the oldest.
+      const boardDates = result.data.board.filter((row) => row.value != null).map((row) => row.date);
+      const freshness = { source: "Cboe and FRED", status: "not-a-feed" as const, basis: "daily index closes", cadence: "daily" as const,
+        asOf: newestReportTime([...boardDates, result.data.curve.date]), oldest: oldestReportTime(boardDates) };
+      return { ...projectVolatilityHeadless(result.data), freshness, errors: result.errors,
         complete: result.phase === "ready" && !result.stale && result.data.warnings.length === 0,
         unavailableSymbols: result.data.board.filter((row) => row.value == null).map((row) => row.symbol),
         metadata: { stale: result.stale, phase: result.phase, loaded: result.loaded, total: result.total,

package/src/plugins/builtin/world-indices/headless.ts

@@ -15,6 +15,7 @@ import {
   WORLD_INDICES,
   type IndexEntry,
 } from "./indices";
+import { quoteFreshnessFields } from "../shared/report-freshness";
 
 const COLUMNS = [
   { key: "shortName", header: "Index" },
@@ -69,6 +70,7 @@ function projectWorldIndicesHeadless(
         rows: regionEntries.map((entry) => {
           const quote = loaded.quotes.get(entry.symbol);
           return {
+            ...quoteFreshnessFields(quote),
             ...entry,
             price: quote?.price ?? null,
             unit: "index points",

package/src/plugins/builtin/world-venue-map/basemap-layer.tsx

@@ -0,0 +1,157 @@
+/**
+ * The land under the desktop and web map: a quiet fill, 1 px coastlines and
+ * fainter borders, at 1:50m for the world and 1:10m for the tiles in view once
+ * zoomed in. Until a level arrives the level below stands in for it: the
+ * terminal's outline before the 1:50m chunk, 1:50m over tiles still loading.
+ */
+import { memo, useEffect, useId, useMemo, useState } from "react";
+import {
+  basemapLevel,
+  GRATICULE_MAX_PX_PER_DEGREE,
+  loadDetailIndex,
+  loadDetailTile,
+  loadWorldBasemap,
+  TILE_CACHE_SIZE,
+  tilesInView,
+  type BasemapPaths,
+  type DetailTile,
+  type GeoBox,
+} from "./basemap";
+import { matrixTransform, type MapMatrix } from "./geo-svg";
+import { WORLD_OUTLINES } from "./world-outlines";
+
+export interface BasemapPalette {
+  land: string;
+  coast: string;
+  border: string;
+}
+
+interface BasemapLayerProps {
+  matrix: MapMatrix;
+  view: GeoBox;
+  pxPerDegree: number;
+  palette: BasemapPalette;
+}
+
+let outlinePath: BasemapPaths | null = null;
+
+/** The terminal's 1:110m outlines in degrees, shown for the moment before 1:50m arrives. */
+function fallbackPaths(): BasemapPaths {
+  if (outlinePath) return outlinePath;
+  let land = "";
+  for (const outline of WORLD_OUTLINES) {
+    let previous: number | null = null;
+    for (const [longitude, latitude] of outline) {
+      const lat = Math.max(-60, latitude);
+      land += `${previous === null || Math.abs(longitude - previous) > 180 ? "M" : "L"}${longitude} ${-lat}`;
+      previous = longitude;
+    }
+  }
+  outlinePath = { land: "", coast: land, borders: "" };
+  return outlinePath;
+}
+
+const GRATICULE = (() => {
+  let path = "";
+  for (let longitude = -180; longitude <= 180; longitude += 30) path += `M${longitude} 60L${longitude} -85`;
+  for (let latitude = -30; latitude <= 60; latitude += 30) path += `M-180 ${-latitude}L180 ${-latitude}`;
+  return path;
+})();
+
+function useWorldPaths(): BasemapPaths | null {
+  const [paths, setPaths] = useState<BasemapPaths | null>(null);
+  useEffect(() => {
+    let current = true;
+    loadWorldBasemap().then((loaded) => {
+      if (current) setPaths(loaded);
+    }, () => {});
+    return () => {
+      current = false;
+    };
+  }, []);
+  return paths;
+}
+
+function useDetailTiles(active: boolean, view: GeoBox): { tiles: DetailTile[]; loaded: ReadonlyMap<string, BasemapPaths> } {
+  const [index, setIndex] = useState<readonly DetailTile[] | null>(null);
+  const [loaded, setLoaded] = useState<ReadonlyMap<string, BasemapPaths>>(() => new Map());
+  useEffect(() => {
+    if (!active || index) return;
+    let current = true;
+    loadDetailIndex().then((tiles) => {
+      if (current) setIndex(tiles);
+    }, () => {});
+    return () => {
+      current = false;
+    };
+  }, [active, index]);
+  const tiles = active && index ? tilesInView(index, view) : [];
+  const key = tiles.map((tile) => tile.id).join(",");
+  useEffect(() => {
+    if (!key || !index) return;
+    let current = true;
+    for (const tile of index.filter((entry) => key.split(",").includes(entry.id))) {
+      loadDetailTile(tile).then((paths) => {
+        if (!current) return;
+        setLoaded((previous) => {
+          if (previous.get(tile.id) === paths) return previous;
+          // Newest last; the map keeps no more decoded tiles than the cache does.
+          const next = new Map(previous);
+          next.delete(tile.id);
+          next.set(tile.id, paths);
+          while (next.size > TILE_CACHE_SIZE) next.delete(next.keys().next().value!);
+          return next;
+        });
+      }, () => {});
+    }
+    return () => {
+      current = false;
+    };
+  }, [index, key]);
+  return useMemo(() => ({ tiles, loaded }), [key, loaded]);
+}
+
+const BasemapPathsView = memo(function BasemapPathsView({ paths, palette, clipPath }: { paths: BasemapPaths; palette: BasemapPalette; clipPath?: string }) {
+  return (
+    <g clipPath={clipPath}>
+      {paths.land ? <path d={paths.land} fill={palette.land} fillRule="evenodd" stroke="none" /> : null}
+      {paths.borders ? (
+        <path d={paths.borders} fill="none" stroke={palette.border} strokeWidth={0.7} strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
+      ) : null}
+      {paths.coast ? <path d={paths.coast} fill="none" stroke={palette.coast} strokeWidth={1} strokeLinejoin="round" vectorEffect="non-scaling-stroke" /> : null}
+    </g>
+  );
+});
+
+export function BasemapLayer({ matrix, view, pxPerDegree, palette }: BasemapLayerProps) {
+  const clipId = `gloom-basemap-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const world = useWorldPaths();
+  const level = basemapLevel(pxPerDegree);
+  const { tiles, loaded } = useDetailTiles(level === "detail", view);
+  const ready = tiles.filter((tile) => loaded.has(tile.id));
+  const missing = tiles.filter((tile) => !loaded.has(tile.id));
+  // While tiles load, 1:50m fills in only where they are missing.
+  const partial = level === "detail" && missing.length > 0 && ready.length > 0;
+  const showWorld = level === "world" || !tiles.length || missing.length > 0;
+  return (
+    <g
+      transform={matrixTransform(matrix)}
+      data-gloom-role="basemap"
+      data-basemap-level={level === "detail" && tiles.length && !missing.length ? "detail" : world ? "world" : "outline"}
+    >
+      {pxPerDegree <= GRATICULE_MAX_PX_PER_DEGREE ? (
+        <path d={GRATICULE} fill="none" stroke={palette.border} strokeOpacity={0.45} strokeWidth={0.5} vectorEffect="non-scaling-stroke" />
+      ) : null}
+      {partial ? (
+        <defs>
+          <clipPath id={clipId}>
+            {missing.map((tile) => <rect key={tile.id} x={tile.box[0]} y={-tile.box[3]} width={tile.box[2] - tile.box[0]} height={tile.box[3] - tile.box[1]} />)}
+          </clipPath>
+        </defs>
+      ) : null}
+      {showWorld ? <BasemapPathsView paths={world ?? fallbackPaths()} palette={palette} clipPath={partial ? `url(#${clipId})` : undefined} /> : null}
+      {/* One path per tile: a tile that comes into view adds its own paths and leaves the others alone. */}
+      {level === "detail" ? ready.map((tile) => <BasemapPathsView key={tile.id} paths={loaded.get(tile.id)!} palette={palette} />) : null}
+    </g>
+  );
+}