sid-ui 0.0.0-stage → 0.1.1

package/src/components/Tree.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+
+import { Glyph } from "./Glyph";
+import { useControllable } from "./hooks";
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  description?: string;
+  /** Trailing content — a count, a badge, a status. */
+  meta?: ReactNode;
+  /** Icon or avatar before the label. Explorer shows folder and file icons when this is empty. */
+  leading?: ReactNode;
+  disabled?: boolean;
+  children?: TreeNode[];
+}
+
+/**
+ * guides    — indent lines connect every level.
+ * explorer  — folders and files; guides appear on hover.
+ * cards     — each top-level branch on its own surface.
+ * selection — one chosen row with an accent bar.
+ * checkbox  — tri-state checks that roll up to parents.
+ */
+export type TreeVariant = "guides" | "explorer" | "cards" | "selection" | "checkbox";
+export type TreeCheckState = "checked" | "unchecked" | "mixed";
+
+export interface TreeProps {
+  nodes: TreeNode[];
+  variant?: TreeVariant;
+  density?: "compact" | "regular" | "spacious";
+  /** Open branch ids. Pass `expanded` to control it, or `defaultExpanded` to seed it. */
+  expanded?: string[];
+  defaultExpanded?: string[];
+  onExpandedChange?: (ids: string[]) => void;
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+  /** Checked leaf ids for `variant="checkbox"`. Parents derive their state. */
+  checked?: string[];
+  defaultChecked?: string[];
+  onCheckedChange?: (ids: string[]) => void;
+  /** Marks this text inside labels — pair it with a filter. */
+  highlight?: string;
+  label?: string;
+}
+
+interface Flat {
+  node: TreeNode;
+  depth: number;
+  parent: string | null;
+}
+
+function leavesOf(node: TreeNode): string[] {
+  if (!node.children?.length) return node.disabled ? [] : [node.id];
+  return node.children.flatMap(leavesOf);
+}
+
+function Highlight({ text, query }: { text: string; query?: string }) {
+  const q = query?.trim();
+  const at = q ? text.toLowerCase().indexOf(q.toLowerCase()) : -1;
+  if (!q || at < 0) return <>{text}</>;
+  return (
+    <>
+      {text.slice(0, at)}
+      <mark className="os-tree-mark">{text.slice(at, at + q.length)}</mark>
+      {text.slice(at + q.length)}
+    </>
+  );
+}
+
+/** A nested hierarchy. Arrow keys move, Right/Left open and close, Space checks or selects. */
+export function Tree({
+  nodes,
+  variant = "guides",
+  density = "regular",
+  expanded: expandedProp,
+  defaultExpanded = [],
+  onExpandedChange,
+  selectedId,
+  onSelect,
+  checked: checkedProp,
+  defaultChecked = [],
+  onCheckedChange,
+  highlight,
+  label = "Tree",
+}: TreeProps) {
+  const [expandedList, setExpandedList] = useControllable(
+    expandedProp,
+    defaultExpanded,
+    onExpandedChange,
+  );
+  const [checkedList, setCheckedList] = useControllable(
+    checkedProp,
+    defaultChecked,
+    onCheckedChange,
+  );
+  const expanded = useMemo(() => new Set(expandedList), [expandedList]);
+  const checked = useMemo(() => new Set(checkedList), [checkedList]);
+  const [focusedId, setFocusedId] = useState<string | null>(null);
+  const rows = useRef(new Map<string, HTMLLIElement>());
+
+  const visible = useMemo(() => {
+    const out: Flat[] = [];
+    const walk = (list: TreeNode[], depth: number, parent: string | null) => {
+      for (const node of list) {
+        out.push({ node, depth, parent });
+        if (node.children?.length && expanded.has(node.id)) walk(node.children, depth + 1, node.id);
+      }
+    };
+    walk(nodes, 0, null);
+    return out;
+  }, [nodes, expanded]);
+
+  const tabStop = visible.some((row) => row.node.id === focusedId)
+    ? focusedId
+    : visible[0]?.node.id;
+
+  function focus(id: string | undefined) {
+    if (!id) return;
+    setFocusedId(id);
+    rows.current.get(id)?.focus();
+  }
+
+  function toggleOpen(id: string, open?: boolean) {
+    const willOpen = open ?? !expanded.has(id);
+    setExpandedList(willOpen ? [...expandedList, id] : expandedList.filter((x) => x !== id));
+  }
+
+  function checkState(node: TreeNode): TreeCheckState {
+    const leaves = leavesOf(node);
+    const on = leaves.filter((id) => checked.has(id)).length;
+    return on === 0 ? "unchecked" : on === leaves.length ? "checked" : "mixed";
+  }
+
+  function toggleCheck(node: TreeNode) {
+    const leaves = leavesOf(node);
+    const next = new Set(checked);
+    if (checkState(node) === "checked") leaves.forEach((id) => next.delete(id));
+    else leaves.forEach((id) => next.add(id));
+    setCheckedList([...next]);
+  }
+
+  function activate(node: TreeNode) {
+    if (node.disabled) return;
+    setFocusedId(node.id);
+    if (variant === "checkbox") toggleCheck(node);
+    else {
+      onSelect?.(node.id);
+      if (node.children?.length && variant !== "selection") toggleOpen(node.id);
+    }
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLLIElement>, row: Flat, index: number) {
+    if (event.target !== event.currentTarget) return;
+    const { node } = row;
+    const hasChildren = Boolean(node.children?.length);
+    const open = expanded.has(node.id);
+    const moves: Record<string, () => void> = {
+      ArrowDown: () => focus(visible[index + 1]?.node.id),
+      ArrowUp: () => focus(visible[index - 1]?.node.id),
+      Home: () => focus(visible[0]?.node.id),
+      End: () => focus(visible[visible.length - 1]?.node.id),
+      ArrowRight: () =>
+        hasChildren && !open
+          ? toggleOpen(node.id, true)
+          : hasChildren && focus(node.children![0].id),
+      ArrowLeft: () =>
+        hasChildren && open ? toggleOpen(node.id, false) : focus(row.parent ?? undefined),
+      Enter: () => activate(node),
+      " ": () => (variant === "checkbox" ? !node.disabled && toggleCheck(node) : activate(node)),
+    };
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    move();
+  }
+
+  function renderBranch(list: TreeNode[], depth: number): ReactNode {
+    return list.map((node) => {
+      const index = visible.findIndex((row) => row.node.id === node.id);
+      const row = visible[index];
+      const hasChildren = Boolean(node.children?.length);
+      const open = hasChildren && expanded.has(node.id);
+      const selected = selectedId === node.id;
+      const state = variant === "checkbox" ? checkState(node) : null;
+      const icon =
+        node.leading ??
+        (variant === "explorer" ? (
+          <Glyph name={hasChildren ? (open ? "folderOpen" : "folder") : "file"} />
+        ) : null);
+
+      return (
+        <li
+          key={node.id}
+          ref={(el) => {
+            if (el) rows.current.set(node.id, el);
+            else rows.current.delete(node.id);
+          }}
+          role="treeitem"
+          className={["os-tree-item", depth === 0 && "os-tree-root"].filter(Boolean).join(" ")}
+          aria-level={depth + 1}
+          aria-expanded={hasChildren ? open : undefined}
+          aria-selected={variant === "selection" ? selected : undefined}
+          aria-checked={state ? (state === "mixed" ? "mixed" : state === "checked") : undefined}
+          aria-disabled={node.disabled || undefined}
+          tabIndex={tabStop === node.id ? 0 : -1}
+          onFocus={(event) => event.target === event.currentTarget && setFocusedId(node.id)}
+          onKeyDown={(event) => onKeyDown(event, row, index)}
+        >
+          <div
+            className={[
+              "os-tree-row",
+              selected && "os-tree-row-selected",
+              node.disabled && "os-tree-row-disabled",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            style={{ ["--os-tree-depth" as string]: depth }}
+            onClick={() => activate(node)}
+          >
+            {Array.from({ length: depth }, (_, i) => (
+              <span key={i} className="os-tree-indent" aria-hidden />
+            ))}
+            <span
+              className={hasChildren ? "os-tree-chevron" : "os-tree-chevron os-tree-chevron-empty"}
+              aria-hidden
+              onClick={(event) => {
+                if (!hasChildren || node.disabled) return;
+                event.stopPropagation();
+                setFocusedId(node.id);
+                toggleOpen(node.id);
+              }}
+            >
+              {hasChildren && <Glyph name="chevronRight" />}
+            </span>
+            {state && (
+              <span className="os-tree-check" data-state={state} aria-hidden>
+                {state === "checked" && <Glyph name="check" />}
+                {state === "mixed" && <Glyph name="minus" />}
+              </span>
+            )}
+            {icon && (
+              <span
+                className={
+                  variant === "explorer" && !node.leading
+                    ? "os-tree-lead os-tree-icon"
+                    : "os-tree-lead"
+                }
+              >
+                {icon}
+              </span>
+            )}
+            <span className="os-tree-text">
+              <span className="os-tree-label">
+                <Highlight text={node.label} query={highlight} />
+              </span>
+              {node.description && <span className="os-tree-desc">{node.description}</span>}
+            </span>
+            {node.meta != null && <span className="os-tree-meta">{node.meta}</span>}
+          </div>
+          {open && (
+            <ul role="group" className="os-tree-group">
+              {renderBranch(node.children!, depth + 1)}
+            </ul>
+          )}
+        </li>
+      );
+    });
+  }
+
+  return (
+    <ul
+      role="tree"
+      aria-label={label}
+      aria-multiselectable={variant === "checkbox" || undefined}
+      className={`os-tree os-tree-${variant} os-tree-${density}`}
+    >
+      {renderBranch(nodes, 0)}
+    </ul>
+  );
+}

package/src/components/TrendChart.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useRef, useState, type KeyboardEvent, type PointerEvent } from "react";
+
+import { areaPath, linePath, linearScale, nearestIndex, niceTicks } from "./chartMath";
+import {
+  ChartLegend,
+  ChartTable,
+  ChartTip,
+  defaultFormat,
+  toneAt,
+  type ChartTone,
+} from "./chartParts";
+import { useElementWidth } from "./Responsive";
+
+export type TrendSeries = {
+  label: string;
+  values: number[];
+  tone?: ChartTone;
+};
+
+const MARGIN = { top: 12, right: 12, bottom: 28, left: 36 };
+const DEFAULT_HEIGHT = 240;
+const Y_TICKS = 4;
+/** Room each x label needs before labels start skipping. */
+const X_LABEL_ROOM = 64;
+const TIP_GAP = 12;
+
+/**
+ * Change over time for up to four series on one axis. Lines are 2px with a 10% wash in
+ * `area`; a crosshair snaps to the nearest point and reads out every series at once.
+ * Arrow keys move the readout for keyboard users; a hidden table carries every value.
+ */
+export function TrendChart({
+  labels,
+  series,
+  label,
+  variant = "area",
+  height = DEFAULT_HEIGHT,
+  formatValue = defaultFormat,
+  hasLegend,
+}: {
+  /** One per point, e.g. week starts. */
+  labels: string[];
+  series: TrendSeries[];
+  /** Accessible name for the chart. */
+  label: string;
+  variant?: "area" | "line";
+  height?: number;
+  formatValue?: (value: number) => string;
+  /** Defaults to on for two or more series; one series is named by its card title. */
+  hasLegend?: boolean;
+}) {
+  const frame = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(frame);
+  const [active, setActive] = useState<number | null>(null);
+
+  const plotW = Math.max(0, width - MARGIN.left - MARGIN.right);
+  const plotH = Math.max(0, height - MARGIN.top - MARGIN.bottom);
+  const max = Math.max(0, ...series.flatMap((item) => item.values));
+  const ticks = niceTicks(max, Y_TICKS);
+  const top = ticks[ticks.length - 1];
+  const count = labels.length;
+  const x = linearScale([0, Math.max(1, count - 1)], [MARGIN.left, MARGIN.left + plotW]);
+  const y = linearScale([0, top], [MARGIN.top + plotH, MARGIN.top]);
+  const xs = labels.map((_, index) => x(index));
+  const every = Math.max(1, Math.ceil(count / Math.max(1, Math.floor(plotW / X_LABEL_ROOM))));
+  const toned = series.map((item, index) => ({ ...item, tone: toneAt(index, item.tone) }));
+  const showLegend = hasLegend ?? series.length > 1;
+
+  const onMove = (event: PointerEvent<SVGRectElement>) => {
+    const box = event.currentTarget.ownerSVGElement?.getBoundingClientRect();
+    if (!box || count === 0) return;
+    setActive(nearestIndex(xs, event.clientX - box.left));
+  };
+
+  const onKey = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (count === 0) return;
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      const step = event.key === "ArrowRight" ? 1 : -1;
+      setActive((current) => Math.min(count - 1, Math.max(0, (current ?? count - 1) + step)));
+    } else if (event.key === "Escape") {
+      setActive(null);
+    }
+  };
+
+  const activeX = active === null ? 0 : xs[active];
+  const tipAlign = activeX < width / 3 ? "start" : activeX > (width * 2) / 3 ? "end" : "center";
+
+  return (
+    <div className="os-chart">
+      {showLegend ? (
+        <ChartLegend
+          mark="line"
+          items={toned.map((item) => ({ label: item.label, tone: item.tone }))}
+        />
+      ) : null}
+      <div
+        ref={frame}
+        className="os-chart-frame"
+        style={{ height }}
+        tabIndex={0}
+        role="group"
+        aria-label={`${label}. Use the arrow keys to read each point.`}
+        onKeyDown={onKey}
+        onBlur={() => setActive(null)}
+      >
+        {width > 0 ? (
+          <svg width={width} height={height} className="os-chart-svg" aria-hidden>
+            {ticks.map((tick) => (
+              <g key={tick}>
+                <line
+                  className="os-chart-grid"
+                  x1={MARGIN.left}
+                  x2={MARGIN.left + plotW}
+                  y1={y(tick)}
+                  y2={y(tick)}
+                />
+                <text
+                  className="os-chart-axis"
+                  x={MARGIN.left - 8}
+                  y={y(tick)}
+                  dy="0.32em"
+                  textAnchor="end"
+                >
+                  {formatValue(tick)}
+                </text>
+              </g>
+            ))}
+            {labels.map((text, index) =>
+              index % every === 0 || index === count - 1 ? (
+                <text
+                  key={`${text}-${index}`}
+                  className="os-chart-axis"
+                  x={xs[index]}
+                  y={height - 8}
+                  textAnchor={index === 0 ? "start" : index === count - 1 ? "end" : "middle"}
+                >
+                  {index === count - 1 || count - 1 - index >= every ? text : ""}
+                </text>
+              ) : null,
+            )}
+            {toned.map((item) => {
+              const points = item.values.map((value, index) => ({ x: xs[index], y: y(value) }));
+              return (
+                <g key={item.label} data-tone={item.tone}>
+                  {variant === "area" ? (
+                    <path className="os-chart-area" d={areaPath(points, y(0))} />
+                  ) : null}
+                  <path className="os-chart-line" d={linePath(points)} />
+                </g>
+              );
+            })}
+            {active !== null ? (
+              <g>
+                <line
+                  className="os-chart-crosshair"
+                  x1={activeX}
+                  x2={activeX}
+                  y1={MARGIN.top}
+                  y2={MARGIN.top + plotH}
+                />
+                {toned.map((item) => (
+                  <circle
+                    key={item.label}
+                    className="os-chart-dot"
+                    data-tone={item.tone}
+                    cx={activeX}
+                    cy={y(item.values[active] ?? 0)}
+                    r={4}
+                  />
+                ))}
+              </g>
+            ) : null}
+            <rect
+              className="os-chart-hit"
+              x={MARGIN.left}
+              y={MARGIN.top}
+              width={plotW}
+              height={plotH}
+              onPointerMove={onMove}
+              onPointerLeave={() => setActive(null)}
+            />
+          </svg>
+        ) : null}
+        {active !== null ? (
+          <ChartTip
+            title={labels[active]}
+            left={activeX + (tipAlign === "start" ? TIP_GAP : tipAlign === "end" ? -TIP_GAP : 0)}
+            top={MARGIN.top}
+            align={tipAlign}
+            rows={toned.map((item) => ({
+              label: item.label,
+              value: formatValue(item.values[active] ?? 0),
+              tone: item.tone,
+            }))}
+          />
+        ) : null}
+      </div>
+      <ChartTable
+        caption={label}
+        headers={["", ...series.map((item) => item.label)]}
+        rows={labels.map((text, index) => [
+          text,
+          ...series.map((item) => formatValue(item.values[index] ?? 0)),
+        ])}
+      />
+    </div>
+  );
+}

package/src/components/breakpoints.ts

@@ -0,0 +1,42 @@
+import { DEFAULT_WIDTH_BREAKPOINTS } from "@astryxdesign/core/theme";
+
+/** Responsive tiers, smallest first. `base` is everything below `sm`. */
+export const TIERS = ["sm", "md", "lg", "xl"] as const;
+export type Tier = (typeof TIERS)[number];
+export type TierOrBase = "base" | Tier;
+
+/** How a responsive component measures width. */
+export type ResponsiveTo = "container" | "viewport";
+
+/** Viewport tiers are Astryx's own width breakpoints. */
+export const VIEWPORT_TIERS: Record<Tier, number> = {
+  sm: DEFAULT_WIDTH_BREAKPOINTS.sm,
+  md: DEFAULT_WIDTH_BREAKPOINTS.md,
+  lg: DEFAULT_WIDTH_BREAKPOINTS.lg,
+  xl: DEFAULT_WIDTH_BREAKPOINTS.xl,
+};
+
+/**
+ * Container tiers are smaller: a card or a sidebar never gets as wide as a
+ * screen. Keep in sync with the @container rules in styles/components/responsive.css.
+ */
+export const CONTAINER_TIERS: Record<Tier, number> = {
+  sm: 480,
+  md: 640,
+  lg: 800,
+  xl: 1024,
+};
+
+export function tierFor(width: number, to: ResponsiveTo = "container"): TierOrBase {
+  const table = to === "container" ? CONTAINER_TIERS : VIEWPORT_TIERS;
+  let current: TierOrBase = "base";
+  for (const tier of TIERS) if (width >= table[tier]) current = tier;
+  return current;
+}
+
+/** Astryx spacing steps map to `--spacing-*` tokens; 1.5 becomes `--spacing-1-5`. */
+export type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+
+export function spacing(step: SpacingStep) {
+  return `var(--spacing-${String(step).replace(".", "-")})`;
+}

package/src/components/calendarTypes.ts

@@ -0,0 +1,26 @@
+export type CalendarView = "month" | "week" | "day" | "agenda";
+export type CalendarTone = "accent" | "success" | "warning" | "danger" | "neutral";
+
+export interface CalendarEvent {
+  id: string;
+  date: Date;
+  title: string;
+  /** "HH:mm". Events without a start are all-day. */
+  start?: string;
+  end?: string;
+  tone?: CalendarTone;
+  location?: string;
+}
+
+export interface DateRange {
+  start: Date;
+  /** null while the second date is still being picked. */
+  end: Date | null;
+}
+
+export const VIEW_LABELS: Record<CalendarView, string> = {
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  agenda: "Agenda",
+};

package/src/components/chartMath.ts

@@ -0,0 +1,125 @@
+/** Pure maths for the charts, kept apart from React so it is unit-testable. */
+
+/** Each value's share of the total, in percent. All-zero input yields all zeros, never NaN. */
+export function segmentShares(values: number[]): number[] {
+  const total = values.reduce((sum, value) => sum + Math.max(0, value), 0);
+  if (total === 0) return values.map(() => 0);
+  return values.map((value) => (Math.max(0, value) / total) * 100);
+}
+
+const NICE_STEPS = [1, 2, 2.5, 5, 10];
+
+/**
+ * Clean axis ticks from zero up to at least `max`: 0, 5, 10, 15 — never 0, 3.7, 7.4.
+ * Returns `[0, 1]` when there is nothing to plot so an empty chart still has a frame.
+ */
+export function niceTicks(max: number, count = 4): number[] {
+  if (!(max > 0) || count < 1) return [0, 1];
+  const raw = max / count;
+  const magnitude = 10 ** Math.floor(Math.log10(raw));
+  const step = (NICE_STEPS.find((nice) => nice * magnitude >= raw) ?? 10) * magnitude;
+  const top = Math.ceil(max / step) * step;
+  const ticks: number[] = [];
+  for (let tick = 0; tick <= top + step / 2; tick += step) ticks.push(round(tick));
+  return ticks;
+}
+
+function round(value: number) {
+  return Math.round(value * 1e6) / 1e6;
+}
+
+/** Maps a domain onto a pixel range. A flat domain maps everything to the range start. */
+export function linearScale(domain: [number, number], range: [number, number]) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const span = d1 - d0;
+  return (value: number) => (span === 0 ? r0 : r0 + ((value - d0) / span) * (r1 - r0));
+}
+
+export type Point = { x: number; y: number };
+
+/** An SVG path through the points with straight segments. */
+export function linePath(points: Point[]): string {
+  return points
+    .map((point, index) => `${index === 0 ? "M" : "L"}${fmt(point.x)},${fmt(point.y)}`)
+    .join("");
+}
+
+/** The line closed down to a baseline, for the area wash under it. */
+export function areaPath(points: Point[], baseline: number): string {
+  if (points.length === 0) return "";
+  const first = points[0];
+  const last = points[points.length - 1];
+  return `${linePath(points)}L${fmt(last.x)},${fmt(baseline)}L${fmt(first.x)},${fmt(baseline)}Z`;
+}
+
+/**
+ * One ring segment from `start` to `end` (fractions of a turn, 0 at twelve o'clock),
+ * between `inner` and `outer` radii around (cx, cy).
+ */
+export function arcPath(
+  cx: number,
+  cy: number,
+  inner: number,
+  outer: number,
+  start: number,
+  end: number,
+): string {
+  const sweep = Math.min(end - start, 0.9999);
+  if (sweep <= 0) return "";
+  const a0 = start * 2 * Math.PI - Math.PI / 2;
+  const a1 = (start + sweep) * 2 * Math.PI - Math.PI / 2;
+  const large = sweep > 0.5 ? 1 : 0;
+  const p = (radius: number, angle: number) =>
+    `${fmt(cx + radius * Math.cos(angle))},${fmt(cy + radius * Math.sin(angle))}`;
+  return [
+    `M${p(outer, a0)}`,
+    `A${fmt(outer)},${fmt(outer)} 0 ${large} 1 ${p(outer, a1)}`,
+    `L${p(inner, a1)}`,
+    `A${fmt(inner)},${fmt(inner)} 0 ${large} 0 ${p(inner, a0)}`,
+    "Z",
+  ].join("");
+}
+
+function fmt(value: number) {
+  return String(Math.round(value * 100) / 100);
+}
+
+/**
+ * Buckets a value into one of `steps` intensity levels for a heatmap: 0 means none,
+ * 1…steps scale with the value against `max`. Any positive value is at least level 1.
+ */
+export function heatLevel(value: number, max: number, steps = 4): number {
+  if (!(value > 0) || !(max > 0)) return 0;
+  return Math.min(steps, Math.max(1, Math.ceil((value / max) * steps)));
+}
+
+/** Index of the item whose x is nearest to `x` — the crosshair's snap. */
+export function nearestIndex(xs: number[], x: number): number {
+  let best = 0;
+  let distance = Infinity;
+  xs.forEach((value, index) => {
+    const next = Math.abs(value - x);
+    if (next < distance) {
+      distance = next;
+      best = index;
+    }
+  });
+  return best;
+}
+
+/** Step-to-step conversion in percent; the first step is always 100. */
+export function conversionRates(values: number[]): number[] {
+  return values.map((value, index) => {
+    if (index === 0) return 100;
+    const previous = values[index - 1];
+    return previous > 0 ? Math.round((value / previous) * 100) : 0;
+  });
+}
+
+/** Compact figures for axes and tiles: 950, 1.2K, 12K, 3.4M. */
+export function compactNumber(value: number): string {
+  return new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(
+    value,
+  );
+}