@twentyfirstmedia/ui-core 0.6.0 → 0.8.0

package/src/components/types.ts

@@ -2833,3 +2833,605 @@ export interface QrCodeProps extends BaseProps {
   /** Accessible name (default "QR code"). */
   label?: string;
 }
+
+/* ── Life: wellbeing, health, goals, AI insights, consent ── */
+export interface Habit {
+  id: string;
+  label: string;
+  icon?: IconName;
+  tint?: Tint;
+  /** One entry per day, oldest first, today last: true done, false missed, null no data. */
+  days: (boolean | null)[];
+  /** Days in a row (shown as "12-day streak"). */
+  streak?: number;
+  /** A short target, e.g. "8 glasses" or "3× a week". */
+  goal?: string;
+}
+export interface HabitTrackerProps extends BaseProps {
+  habits: Habit[];
+  /** Labels of the day columns, oldest first (default: weekday initials ending today). */
+  dayLabels?: string[];
+  /** Today's box of a habit was toggled. */
+  onToggle?: (id: string, done: boolean) => void;
+  /** Accessible name of the list (default "Habits"). */
+  label?: string;
+}
+export type MoodLevel = 1 | 2 | 3 | 4 | 5;
+export interface MoodPickerProps extends BaseProps {
+  value?: MoodLevel | null;
+  defaultValue?: MoodLevel | null;
+  onChange?: (mood: MoodLevel) => void;
+  /** The question (default "How are you feeling?"). */
+  label?: ReactNode;
+  /** Words for the five levels, lowest first (default Awful, Low, Okay, Good, Great). */
+  levels?: [string, string, string, string, string];
+  /** Only the faces; the words stay as accessible names. */
+  compact?: boolean;
+}
+export interface VitalTileProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  label: string;
+  value: number;
+  unit?: string;
+  icon?: IconName;
+  /** The healthy range [low, high]; the tile says whether the value is below, in or above it. */
+  normal?: [number, number];
+  /** The whole scale of the band [min, max] (default: the normal range with room on both sides). */
+  scale?: [number, number];
+  /** Recent values, oldest first, drawn as a sparkline. */
+  trend?: number[];
+  /** Under the value: when it was measured, the source … */
+  caption?: ReactNode;
+  /** Digits after the decimal point (default 0). */
+  digits?: number;
+}
+export interface ActivityRing {
+  label: string;
+  value: number;
+  goal: number;
+  unit?: string;
+  tint?: Tint;
+}
+export interface ActivityRingsProps extends BaseProps {
+  /** Outer ring first. */
+  rings: ActivityRing[];
+  /** Diameter of the rings (default 132). */
+  size?: number;
+  /** Hide the legend beside the rings. */
+  legend?: boolean;
+  /** Accessible name (default "Activity"). */
+  label?: string;
+}
+export type SleepStage = "awake" | "rem" | "light" | "deep";
+export interface SleepSegment {
+  stage: SleepStage;
+  start: Date | string | number;
+  end: Date | string | number;
+}
+export interface SleepChartProps extends BaseProps {
+  /** The night in order, from falling asleep to getting up. */
+  segments: SleepSegment[];
+  /** Accessible name (default "Sleep stages"). */
+  label?: string;
+  /** Hide the totals per stage under the chart. */
+  summary?: boolean;
+}
+export interface MedicationItem {
+  id: string;
+  name: string;
+  dose?: string;
+  /** When, as shown ("08:00", "With breakfast"). */
+  time: string;
+  /** Set by the app, which knows the clock: default "taken" when `taken`, else "due". */
+  status?: "taken" | "due" | "missed" | "upcoming";
+  taken?: boolean;
+  note?: string;
+  icon?: IconName;
+}
+export interface MedicationListProps extends BaseProps {
+  items: MedicationItem[];
+  /** "Mark as taken" was pressed. */
+  onTake?: (id: string) => void;
+  /** Accessible name (default "Medication"). */
+  label?: string;
+}
+export interface JournalEntryProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  date: Date | string | number;
+  title?: string;
+  mood?: MoodLevel;
+  tags?: string[];
+  children?: ReactNode;
+  /** Buttons at the end (edit, share …). */
+  actions?: ReactNode;
+}
+export interface GoalCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  title: string;
+  value: number;
+  target: number;
+  /** How to show value and target (default number). */
+  format?: "number" | "money" | "percent";
+  /** Unit after numbers ("km", "books"). */
+  unit?: string;
+  currency?: string;
+  due?: Date | string | number;
+  icon?: IconName;
+  tint?: Tint;
+  milestones?: { label: string; done?: boolean }[];
+  /** A note under the progress ("€250 a month keeps you on track"). */
+  note?: ReactNode;
+}
+export interface InsightCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  title: string;
+  children?: ReactNode;
+  icon?: IconName;
+  tone?: "info" | "success" | "warning" | "highlight";
+  /** Above the title: area and time ("Money · 2 h ago"). */
+  meta?: ReactNode;
+  /** Where the insight comes from, as chips (like chat sources). */
+  sources?: Source[];
+  /** Why the assistant shows it; folded away behind "Why am I seeing this?". */
+  why?: ReactNode;
+  onAccept?: () => void;
+  acceptLabel?: string;
+  onSnooze?: () => void;
+  onDismiss?: () => void;
+}
+export interface ConsentScope {
+  id: string;
+  label: string;
+  description?: string;
+  granted: boolean;
+  /** Needed for the connection to work at all: shown, not switchable. */
+  required?: boolean;
+  /** What the permission allows: reading, acting (sending, booking, switching) or moving money. */
+  level?: "read" | "act" | "money";
+  /** The assistant asks you before it uses this permission. */
+  asksFirst?: boolean;
+}
+export interface ConsentConnector {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** A logo instead of the icon. */
+  logo?: ReactNode;
+  /** What the assistant uses it for. */
+  purpose?: ReactNode;
+  scopes: ConsentScope[];
+  lastUsed?: Date | string | number;
+}
+export interface ConsentListProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  connectors: ConsentConnector[];
+  onScopeChange?: (connectorId: string, scopeId: string, granted: boolean) => void;
+  onRevoke?: (connectorId: string) => void;
+  /** Accessible name (default "Data access"). */
+  label?: string;
+}
+
+/* ── Life: money, insurance, deadlines, documents ── */
+export interface BudgetCategory {
+  id: string;
+  label: string;
+  icon?: IconName;
+  tint?: Tint;
+  spent: number;
+  limit: number;
+}
+export interface BudgetListProps extends BaseProps {
+  categories: BudgetCategory[];
+  currency?: string;
+  /** A category was picked (to show its transactions). */
+  onSelect?: (id: string) => void;
+  /** Accessible name (default "Budgets"). */
+  label?: string;
+}
+export interface Subscription {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** A logo instead of the icon. */
+  logo?: ReactNode;
+  amount: number;
+  period: "week" | "month" | "year";
+  /** Next charge. */
+  next?: Date | string | number;
+  status?: "active" | "trial" | "cancelled";
+  category?: string;
+}
+export interface SubscriptionListProps extends BaseProps {
+  items: Subscription[];
+  currency?: string;
+  /** "Manage" on a subscription (cancel, change plan …). */
+  onManage?: (id: string) => void;
+  /** Hide the monthly and yearly totals. */
+  totals?: boolean;
+  /** Accessible name (default "Subscriptions"). */
+  label?: string;
+}
+export interface NetWorthCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  assets: { label: string; value: number; icon?: IconName }[];
+  liabilities?: { label: string; value: number; icon?: IconName }[];
+  /** Net worth over time, oldest first. */
+  history?: number[];
+  /** Change over `changeLabel` (e.g. +1,240 "since October"). */
+  change?: number;
+  changeLabel?: string;
+  currency?: string;
+  title?: string;
+}
+export interface DeadlineItem {
+  id: string;
+  title: string;
+  /** What kind: "Contract", "ID card", "Tax" … */
+  kind?: string;
+  icon?: IconName;
+  date: Date | string | number;
+  amount?: number;
+  done?: boolean;
+  note?: string;
+}
+export interface DeadlineListProps extends BaseProps {
+  items: DeadlineItem[];
+  /** The day to count from (default: now). Set it for server rendering and stable output. */
+  today?: Date | string | number;
+  /** Days ahead that count as soon (default 14). */
+  soon?: number;
+  currency?: string;
+  onDone?: (id: string) => void;
+  /** Accessible name (default "Deadlines"). */
+  label?: string;
+}
+export interface PolicyCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  /** The kind of insurance: "Household contents", "Liability" … */
+  type: string;
+  insurer: string;
+  icon?: IconName;
+  tint?: Tint;
+  policyNumber?: string;
+  /** Show only the last four characters of the policy number. */
+  maskNumber?: boolean;
+  /** Sum insured: a number (money) or text ("unlimited"). */
+  coverage?: number | ReactNode;
+  premium?: { amount: number; period: "month" | "quarter" | "year" };
+  deductible?: number;
+  renews?: Date | string | number;
+  status?: "active" | "pending" | "expiring" | "lapsed";
+  currency?: string;
+  /** Buttons at the foot (documents, report a claim …). */
+  actions?: ReactNode;
+}
+export interface CoverageRow {
+  id: string;
+  risk: string;
+  status: "covered" | "partial" | "none";
+  note?: ReactNode;
+  /** Which policy covers it. */
+  policy?: string;
+}
+export interface CoverageMatrixProps extends BaseProps {
+  rows: CoverageRow[];
+  /** Accessible name and caption (default "Coverage"). */
+  label?: string;
+}
+export interface ClaimStep {
+  label: string;
+  date?: Date | string | number;
+  state: "done" | "current" | "todo" | "failed";
+  note?: ReactNode;
+}
+export interface ClaimTimelineProps extends BaseProps {
+  title: string;
+  /** Reference and insurer under the title. */
+  meta?: ReactNode;
+  amount?: number;
+  currency?: string;
+  steps: ClaimStep[];
+}
+export interface LifeDocument {
+  id: string;
+  title: string;
+  category?: string;
+  icon?: IconName;
+  holder?: string;
+  expires?: Date | string | number;
+  /** "PDF · 240 KB" */
+  meta?: string;
+}
+export interface DocumentListProps extends BaseProps {
+  documents: LifeDocument[];
+  /** The day to count expiry from (default: now). */
+  today?: Date | string | number;
+  /** Days ahead that count as expiring soon (default 60). */
+  soon?: number;
+  onOpen?: (id: string) => void;
+  /** Accessible name (default "Documents"). */
+  label?: string;
+}
+
+/* ── Connectors: services an assistant reads from and acts in ── */
+/** The state of a connected service. */
+export type ServiceState = "connected" | "syncing" | "error" | "paused" | "off";
+export interface ServiceMarkProps extends BaseProps {
+  /** The service's name: the accessible name, and the monogram when there is no icon or logo. */
+  name: string;
+  /** A brand logo (`brandGmail` …) or a line icon. */
+  icon?: IconName;
+  /** Your own logo (an `<img>` or `<svg>`) instead of the icon. */
+  logo?: ReactNode;
+  /** Letters for the monogram (default: the initials of `name`). */
+  monogram?: string;
+  /** 24, 36 (default) or 48 px. */
+  size?: "sm" | "md" | "lg";
+  tint?: Tint | "plain";
+  /** A dot in the corner with the state in words for screen readers. */
+  status?: ServiceState;
+  /** Hidden from screen readers when the name is written next to it. */
+  decorative?: boolean;
+}
+export interface Connector {
+  id: string;
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+  /** Letters shown when there is neither icon nor logo (default: the initials of `name`). */
+  monogram?: string;
+  tint?: Tint | "plain";
+  /** The group it is listed under ("Health & fitness", "Money" …). */
+  category: string;
+  description?: ReactNode;
+  /** `available` (default), `connected`, `error` (needs a reconnect) or `soon`. */
+  state?: "available" | "connected" | "error" | "soon";
+  /** A hint under the description: "Needs the iPhone app", "Import an export file". */
+  note?: ReactNode;
+  /** The connected account ("mara@gmail.com"). */
+  account?: string;
+}
+export interface ConnectorGalleryProps extends BaseProps {
+  connectors: Connector[];
+  /** Order of the groups; categories not listed follow in the order they appear. */
+  categories?: string[];
+  onConnect?: (id: string) => void;
+  /** Opens a connected (or failing) connector. */
+  onOpen?: (id: string) => void;
+  /** A search field and category chips above the grid (default true). */
+  filters?: boolean;
+  /** Accessible name (default "Connectors"). */
+  label?: string;
+}
+export interface SyncStatusProps extends BaseProps {
+  state: "synced" | "syncing" | "error" | "paused" | "never";
+  /** The last successful sync. */
+  last?: Date | string | number;
+  /** The next planned sync. */
+  next?: Date | string | number;
+  /** "Now" for the relative times; pass it so server and client render the same. */
+  now?: Date | string | number;
+  /** What the last sync brought: `{ label: "emails", value: 1204 }`. */
+  counts?: { label: string; value: number }[];
+  /** Why the sync failed. */
+  error?: ReactNode;
+  onSync?: () => void;
+  /** One line: state and time only. */
+  compact?: boolean;
+}
+export interface AgentAction {
+  id: string;
+  /** The service the action used. */
+  service?: { name: string; icon?: IconName; logo?: ReactNode };
+  /** Which agent did it ("Assistant", "Money agent"). */
+  agent?: string;
+  /** What happened, in a sentence: "Moved the dentist to Friday, 10:00". */
+  text: ReactNode;
+  at: Date | string | number;
+  /** `read` (looked something up), `act` (changed something) or `money`. */
+  kind?: "read" | "act" | "money";
+  /** `done` (default), `waiting` for your approval, `declined`, `undone` or `failed`. */
+  state?: "done" | "waiting" | "declined" | "undone" | "failed";
+  detail?: ReactNode;
+}
+export interface AgentActivityProps extends BaseProps {
+  items: AgentAction[];
+  /** "Now" for the day headings; pass it so server and client render the same. */
+  now?: Date | string | number;
+  /** Offers "Undo" on finished actions that changed something. */
+  onUndo?: (id: string) => void;
+  /** Opens an action that waits for your approval. */
+  onReview?: (id: string) => void;
+  /** Accessible name (default "Agent activity"). */
+  label?: string;
+}
+export interface ConnectionItem {
+  id: string;
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+  monogram?: string;
+  tint?: Tint | "plain";
+  /** The connected account ("mara@gmail.com", "Giro ••• 4410"). */
+  account?: ReactNode;
+  state: ServiceState;
+  /** How fresh the data is, shown as a compact `SyncStatus`. */
+  sync?: { state: SyncStatusProps["state"]; last?: Date | string | number };
+}
+export interface ConnectionListProps extends BaseProps {
+  items: ConnectionItem[];
+  /** "Now" for the relative times; pass it so server and client render the same. */
+  now?: Date | string | number;
+  onManage?: (id: string) => void;
+  /** Shown instead of "Manage" on connections in the `error` state. */
+  onReconnect?: (id: string) => void;
+  /** Accessible name (default "Connections"). */
+  label?: string;
+}
+
+/* ── Connected data: home, car, media, workouts, calls, bookings, golf, investments ── */
+/** The service a value comes from, shown as a small mark. */
+export interface ServiceRef {
+  name: string;
+  icon?: IconName;
+  logo?: ReactNode;
+}
+export interface DeviceTileProps extends BaseProps {
+  name: string;
+  room?: string;
+  icon?: IconName;
+  /** The kind sets the default icon and which controls appear. */
+  kind?: "switch" | "light" | "thermostat" | "vacuum" | "purifier" | "camera" | "lock" | "sensor";
+  /** On or off; with `onToggle` a switch. */
+  on?: boolean;
+  onToggle?: (on: boolean) => void;
+  /** The main reading: "21.5 °C", "Cleaning", "AQI 12". */
+  value?: ReactNode;
+  /** A line under the value: "Heating to 22 °C", "Kitchen · 18 m² left". */
+  status?: ReactNode;
+  /** Thermostat target in °C; with `onTarget` a − / + stepper (steps of `step`, default 0.5). */
+  target?: number;
+  onTarget?: (value: number) => void;
+  step?: number;
+  /** Battery in percent (vacuums, sensors, locks). */
+  battery?: number;
+  /** Quick actions: "Start", "Dock", "Boost". */
+  actions?: { label: string; icon?: IconName; onClick?: () => void }[];
+  /** The device does not answer. */
+  offline?: boolean;
+  service?: ServiceRef;
+}
+export interface VehicleCardProps extends BaseProps {
+  name: string;
+  model?: string;
+  /** Battery (or tank) in percent. */
+  battery: number;
+  /** Range in km. */
+  range?: number;
+  /** The charge limit in percent, marked on the bar. */
+  limit?: number;
+  charging?: "charging" | "complete" | "plugged" | "unplugged";
+  /** Charging power in kW while charging. */
+  power?: number;
+  /** When charging reaches the limit. */
+  until?: Date | string | number;
+  locked?: boolean;
+  /** Inside temperature in °C. */
+  inside?: number;
+  climateOn?: boolean;
+  location?: ReactNode;
+  onLock?: (locked: boolean) => void;
+  onClimate?: (on: boolean) => void;
+  service?: ServiceRef;
+}
+export interface NowPlayingProps extends BaseProps {
+  title: string;
+  artist?: string;
+  album?: string;
+  /** Cover art: an `<img>`. */
+  art?: ReactNode;
+  /** Position and length in seconds. */
+  position?: number;
+  duration?: number;
+  playing?: boolean;
+  /** Where it plays: "Living room speaker". */
+  device?: string;
+  onPlayPause?: () => void;
+  onNext?: () => void;
+  onPrevious?: () => void;
+  service?: ServiceRef;
+}
+export interface WorkoutCardProps extends BaseProps {
+  /** "Run", "Ride", "Strength", "Golf" … */
+  type: string;
+  icon?: IconName;
+  date: Date | string | number;
+  /** Minutes. */
+  duration: number;
+  /** Kilometres. */
+  distance?: number;
+  calories?: number;
+  /** Average heart rate in bpm. */
+  heartRate?: number;
+  /** Minutes in heart-rate zones 1–5. */
+  zones?: number[];
+  service?: ServiceRef;
+}
+export interface CallItem {
+  id: string;
+  name: string;
+  number?: string;
+  direction: "incoming" | "outgoing" | "missed";
+  at: Date | string | number;
+  /** Seconds. */
+  duration?: number;
+  /** What the call was about (an assistant's summary). */
+  summary?: ReactNode;
+}
+export interface CallLogProps extends BaseProps {
+  calls: CallItem[];
+  /** "Now" for the day headings. */
+  now?: Date | string | number;
+  onCall?: (id: string) => void;
+  onOpen?: (id: string) => void;
+  /** Accessible name (default "Calls"). */
+  label?: string;
+}
+export interface ReservationCardProps extends BaseProps {
+  kind: "stay" | "flight" | "train" | "ride" | "order" | "event";
+  title: string;
+  /** "Hotel Atlantic · 2 nights", "LH 2024 · Seat 14A". */
+  subtitle?: ReactNode;
+  start: Date | string | number;
+  end?: Date | string | number;
+  /** Where: an address, airport codes, a restaurant. */
+  place?: ReactNode;
+  /** Booking or order number. */
+  code?: string;
+  status?: "confirmed" | "pending" | "cancelled" | "delayed" | "onTheWay" | "delivered";
+  /** Extra words for the status: "+25 min", "Arrives 19:40". */
+  statusText?: string;
+  service?: ServiceRef;
+  actions?: ReactNode;
+}
+export interface GolfHole {
+  par: number;
+  strokes?: number;
+  putts?: number;
+}
+export interface ScorecardProps extends BaseProps {
+  course: string;
+  date?: Date | string | number;
+  /** 9 or 18 holes. */
+  holes: GolfHole[];
+  /** Tee and course rating: "Yellow · CR 71.2 / SR 128". */
+  tee?: string;
+  service?: ServiceRef;
+}
+export interface Holding {
+  id: string;
+  name: string;
+  /** Ticker or ISIN. */
+  symbol?: string;
+  value: number;
+  /** Change in percent over `period`. */
+  change?: number;
+  /** Share of the portfolio in percent. */
+  weight?: number;
+}
+export interface HoldingsListProps extends BaseProps {
+  holdings: Holding[];
+  currency?: string;
+  /** The period of `change` ("today", "1 year"). */
+  period?: string;
+  onSelect?: (id: string) => void;
+  /** Accessible name (default "Holdings"). */
+  label?: string;
+}

package/src/context.ts

@@ -4,7 +4,14 @@
  * provider so a component that only needs its strings or formatters does not pull in theming.
  */
 import { createContext, useContext } from "react";
-import { LOCALE, formatDate, formatMoney, formatNumber, formatPercent } from "./format.js";
+import {
+  LOCALE,
+  formatDate,
+  formatMoney,
+  formatNumber,
+  formatPercent,
+  formatRelative,
+} from "./format.js";
 import {
   DEFAULT_STRINGS,
   SHARED_STRINGS,
@@ -87,6 +94,7 @@ export interface Formatters {
   formatMoney: (v: number, currency?: string | null, o?: Intl.NumberFormatOptions) => string;
   formatPercent: (v: number, o?: Intl.NumberFormatOptions) => string;
   formatDate: (input: Date | string | number, o?: Intl.DateTimeFormatOptions) => string;
+  formatRelative: (input: Date | string | number, now?: Date | string | number) => string;
 }
 
 const formatters = new Map<string, Formatters>();
@@ -100,6 +108,7 @@ export function formattersFor(locale: string): Formatters {
       formatMoney: (v, currency, o) => formatMoney(v, currency, o, locale),
       formatPercent: (v, o) => formatPercent(v, o, locale),
       formatDate: (input, o) => formatDate(input, o, locale),
+      formatRelative: (input, now) => formatRelative(input, now, locale),
     };
     formatters.set(locale, f);
   }

package/src/format.ts

@@ -56,6 +56,39 @@ export function formatDate(
   }
 }
 
+/**
+ * A moment relative to now, in words: "5 minutes ago", "in 2 hours", "yesterday". Picks the
+ * largest unit that fits; pass `now` so server and client render the same text.
+ */
+export function formatRelative(
+  input: Date | string | number,
+  now: Date | string | number = Date.now(),
+  locale?: string,
+): string {
+  const t = (input instanceof Date ? input : new Date(input)).getTime();
+  const n = (now instanceof Date ? now : new Date(now)).getTime();
+  const sec = Math.round((t - n) / 1000);
+  const abs = Math.abs(sec);
+  const steps: [Intl.RelativeTimeFormatUnit, number][] = [
+    ["second", 1],
+    ["minute", 60],
+    ["hour", 3600],
+    ["day", 86400],
+    ["week", 604800],
+    ["month", 2629800],
+    ["year", 31557600],
+  ];
+  let unit: Intl.RelativeTimeFormatUnit = "second";
+  let size = 1;
+  for (const [u, s] of steps) if (abs >= s) [unit, size] = [u, s];
+  try {
+    const rtf = new Intl.RelativeTimeFormat(locale || LOCALE, { numeric: "auto" });
+    return abs < 45 ? rtf.format(0, "second") : rtf.format(Math.round(sec / size), unit);
+  } catch {
+    return new Date(t).toLocaleString();
+  }
+}
+
 /** The group and decimal separators of a locale: `en-US` → `{ group: ",", decimal: "." }`. */
 export function numberSeparators(locale?: string): { group: string; decimal: string } {
   let group = ",",