@ceebee/ui 1.9.0 → 1.10.0

package/THIRD_PARTY_NOTICES.md

@@ -1,6 +1,7 @@
 # Third-party notices
 
-`@ceebee/ui` includes software from these MIT-licensed projects:
+`@ceebee/ui` includes software from the projects below. Most are MIT-licensed; the one Apache-2.0
+dependency names its licence in its own section.
 
 ## Ant Design
 
@@ -34,3 +35,20 @@ Copyright © 2018-present iamkun
 
 Date and time components use `dayjs` 1.11.18 as their date engine. It is licensed under the MIT
 License.
+
+## @dnd-kit
+
+Copyright © 2021, Claudéric Demers
+
+`Board` in `@ceebee/ui/client` uses `@dnd-kit/core` 6.3.1, `@dnd-kit/sortable` 10.0.0 and
+`@dnd-kit/utilities` 3.2.2 as its drag-and-drop runtime. They are licensed under the MIT License.
+
+## Lightweight Charts™
+
+Copyright © 2023 TradingView, Inc.
+
+`ProgressCurve` in `@ceebee/ui/client` draws its canvas with `lightweight-charts` 5.2.1, a
+dependency loaded on demand. It is licensed under the **Apache License, Version 2.0**; a copy is in
+the package at `node_modules/lightweight-charts/LICENSE`, and the attribution is retained here
+rather than painted into a consumer's chart, where the library's `attributionLogo` option is turned
+off.

package/dist/client.d.ts

@@ -493,6 +493,336 @@ declare const Board: typeof BoardRoot & {
     Skeleton: typeof BoardSkeleton;
 };
 
+/**
+ * What a dated series means, with no chart and no DOM in sight.
+ *
+ * Kept pure for the usual reason and one extra: these charts are drawn on a **canvas**, so nothing
+ * about them is inspectable from the outside. These functions are the only testable description of
+ * what the picture claims, and they are also what feeds the text alternative a screen reader reads
+ * and what a forced-colors viewer gets instead of the bitmap.
+ */
+/** One reading: a day, and a value on that day. */
+interface SeriesPoint {
+    /** `YYYY-MM-DD`. A calendar day, not an instant. */
+    day: string;
+    value: number;
+}
+/**
+ * `YYYY-MM-DD`, or null when it is not a day at all.
+ *
+ * The pattern is not the check: `2026-02-30` matches it and is not a day. The round-trip through `Date`
+ * settles that — but **an impossible month makes an Invalid Date, and `toISOString()` throws on one**
+ * rather than returning anything falsy. So the time value is tested before it is formatted; otherwise
+ * `2026-13-01` takes the whole chart down instead of being ignored.
+ */
+declare function asDay(value: string): string | null;
+/**
+ * The points as the chart substrate demands them: ascending, and one per day.
+ *
+ * This is not tidying. The library **throws** on a repeated or out-of-order time rather than ignoring
+ * it, so a source that reports the same day twice — a correction, two crews reporting the same site —
+ * would take the whole screen down. The later value wins, because a correction is the point of sending
+ * the day again.
+ */
+declare function seriesPoints(points: readonly SeriesPoint[]): SeriesPoint[];
+/** The value a series holds on a day: its last reading at or before it, or null before it starts. */
+declare function valueOn(points: readonly SeriesPoint[], day: string): number | null;
+/**
+ * Every day any series reports, with each series' value on it — the accessible rendering, not a caption.
+ *
+ * A canvas has no DOM, so this is the *only* thing a screen reader can be given, and it is what a
+ * forced-colors viewer sees in place of the bitmap. It is therefore the same data, not a summary. A
+ * value is carried forward from the last reading: a day nobody reported is not a day of nothing, and
+ * showing it as zero would say the measure collapsed.
+ */
+declare function alignRows(series: readonly {
+    key: string;
+    points: readonly SeriesPoint[];
+}[]): {
+    day: string;
+    values: Record<string, number | null>;
+}[];
+/** The span the axis has to cover, or null when there is nothing to draw. */
+declare function seriesSpan(series: readonly {
+    points: readonly SeriesPoint[];
+}[]): {
+    from: string;
+    to: string;
+} | null;
+/**
+ * The reported day closest to a given one, or null when nothing was reported.
+ *
+ * A marker attaches to a data point — the substrate has no vertical line of its own — so anything a
+ * chart wants to mark has to land on a day some series actually reports.
+ */
+declare function nearestDay(days: readonly string[], day: string): string | null;
+/** One decimal, because a figure read to four is false precision on a number somebody estimated. */
+declare function round1(value: number): number;
+
+/** The colours a canvas is drawn in, resolved from Tokens rather than written down. */
+interface ChartPalette {
+    text: string;
+    muted: string;
+    grid: string;
+    background: string;
+    font: string;
+    /** One entry per series, in the order the series were given. */
+    series: string[];
+    /** Where a baseline series sits above its base, and below it. */
+    above: string;
+    below: string;
+}
+/** How thick, and solid or dashed. A plan reads as a reference; delivery reads as the fact. */
+type SeriesEmphasis = 'reference' | 'primary';
+interface SeriesSpec {
+    /** Stable key, used in the accessible table and to look a value up. */
+    key: string;
+    /** What a reader calls it. */
+    label: string;
+    points: SeriesPoint[];
+    emphasis?: SeriesEmphasis;
+    /** The Token this series takes its colour from, e.g. `--cb-tone-brand`. */
+    colorToken: string;
+}
+/**
+ * A fixed vertical range, when autoscale would lie.
+ *
+ * A percentage chart pins 0–100: autoscale stretches a job at 30% to the full height of the plot,
+ * which reads as *nearly there* — the opposite of the truth. A money chart normally does not pin,
+ * because there is no natural ceiling.
+ */
+interface ValueRange {
+    min: number;
+    max: number;
+}
+/**
+ * A baseline: the value the series is read against, coloured differently above and below.
+ *
+ * Zero on a cash projection is the obvious one — the day the balance crosses it is the whole point of
+ * the chart — and a minimum buffer is the useful one, because a business that must keep 50 juta on hand
+ * is in trouble well before it reaches zero.
+ */
+interface Baseline {
+    value: number;
+    label?: string;
+}
+interface TimeSeriesChartProps {
+    /** Accessible name. It is the chart's title as a screen reader announces it. */
+    label: string;
+    series: SeriesSpec[];
+    /** Turns a value into the text on the price scale and in the table. */
+    format: (value: number) => string;
+    range?: ValueRange;
+    /** Draws one series against a base value, shaded above and below. Only the first series is drawn. */
+    baseline?: Baseline;
+    /** A day to mark, and what to call it. The mark lands on the nearest day any series reports. */
+    mark?: {
+        day: string;
+        label: string;
+    };
+    height?: number;
+    emptyLabel?: string;
+    tableLabel?: string;
+    dayLabel?: string;
+    loading?: boolean;
+    className?: string;
+}
+interface TimeSeriesChartSkeletonProps {
+    height?: number;
+    label?: string;
+    className?: string;
+}
+
+/**
+ * A dated chart: any number of series over calendar days, or one series read against a baseline.
+ *
+ * It is drawn on a canvas, and that has one consequence which shapes this whole file: **the picture is
+ * not in the DOM.** A screen reader finds nothing, a forced-colors viewer gets a bitmap the system
+ * cannot recolour, and no test can look at it. So the table below the plot is not a caption or a
+ * fallback — it is the chart's other rendering, always present, built from the same numbers, and it is
+ * what a forced-colors viewer sees *instead of* the canvas.
+ *
+ * This is the primitive the library's dated Compositions are built from. It carries no domain meaning:
+ * it does not know what a plan is or what money is, only how to draw dated values honestly and how to
+ * say the same thing in words.
+ */
+declare function TimeSeriesChart({ label, series, format, range, baseline, mark, height, emptyLabel, tableLabel, dayLabel, loading, className, }: TimeSeriesChartProps): react.JSX.Element;
+
+/** Holds the chart's geometry while the readings load, so the page does not jump when they land. */
+declare function TimeSeriesChartSkeleton({ height, label, className, }: TimeSeriesChartSkeletonProps): react.JSX.Element;
+
+interface BalanceCurveProps {
+    /** Accessible name. It is the chart's title as a screen reader announces it. */
+    label: string;
+    /** The running balance, by day. One point per day the balance is known for. */
+    balances: SeriesPoint[];
+    /**
+     * How a value is written. The library holds no currency: a product passes its own formatter, so the
+     * same chart serves rupiah, a percentage of a budget, or litres of diesel.
+     */
+    format: (value: number) => string;
+    /**
+     * The line the balance is read against, and what to call it. Defaults to zero.
+     *
+     * Not always zero, and that is the point: a business that must keep a minimum on hand is in trouble
+     * well before it reaches nothing.
+     */
+    threshold?: {
+        value: number;
+        label?: string;
+    };
+    height?: number;
+    seriesLabel?: string;
+    emptyLabel?: string;
+    tableLabel?: string;
+    /** How the reading is worded. Each takes the formatted figures the component computed. */
+    belowLabel?: (from: string, lowest: string, days: number) => string;
+    clearLabel?: (lowest: string) => string;
+    loading?: boolean;
+    className?: string;
+}
+interface BalanceCurveSkeletonProps {
+    height?: number;
+    label?: string;
+    className?: string;
+}
+
+/** Holds the chart's geometry while the balances load, so the page does not jump when they land. */
+declare function BalanceCurveSkeleton({ height, label, className, }: BalanceCurveSkeletonProps): react.JSX.Element;
+
+/**
+ * A running balance over days, read against a line: a cash projection, a budget remaining, a tank.
+ *
+ * The substrate draws this as a **baseline** series rather than a line, which is not decoration: it
+ * shades above and below the threshold in the semantic colours, so the stretch that is in trouble is
+ * coloured by its own values instead of by a tag somebody has to read. Seven red tags in a row say
+ * nothing about how far down the dip goes; a shaded area says it at a glance.
+ *
+ * The sentence above the plot is the other half. A chart shows the shape; the sentence gives the two
+ * figures a decision needs — the day it goes under and the lowest it gets — so nobody has to read a
+ * position off an axis to act on it.
+ */
+declare function BalanceCurveRoot({ label, balances, format, threshold, height, seriesLabel, emptyLabel, tableLabel, belowLabel, clearLabel, loading, className, }: BalanceCurveProps): react.JSX.Element;
+/** The Composition and its Skeleton, so a loading page keeps the chart's geometry. */
+declare const BalanceCurve: typeof BalanceCurveRoot & {
+    Skeleton: typeof BalanceCurveSkeleton;
+};
+
+/**
+ * What a running balance says about itself.
+ *
+ * A balance chart exists to answer two questions a list of days cannot: **when does this dip below the
+ * line, and how far down does it go.** Both are computed here rather than left to the reader, because
+ * the reader's alternative is scanning thirty rows — which is exactly the thing the chart replaces.
+ */
+
+interface BalanceReading {
+    /** The lowest balance over the window, and the day it happens. Null when there is nothing to read. */
+    lowest: number | null;
+    lowestDay: string | null;
+    /** The first day the balance is below the threshold, or null when it never is. */
+    firstBelowDay: string | null;
+    /** How many days sit below the threshold. Zero is the answer somebody is hoping for. */
+    daysBelow: number;
+    /** The balance on the last day of the window. */
+    closing: number | null;
+}
+/**
+ * The reading, against a threshold.
+ *
+ * The threshold is not always zero, and that is the point of it being a parameter: a business that must
+ * keep fifty million on hand is in trouble well before it reaches nothing, and a chart drawn against
+ * zero would tell it everything is fine right up to the day it is not.
+ *
+ * "Below" is strict. A balance sitting exactly on the threshold has met it, and reporting that as a
+ * breach would cry wolf on the one day the business did precisely what it planned to.
+ */
+declare function balanceReading(points: readonly SeriesPoint[], threshold: number): BalanceReading;
+
+/** One reading: a day, and the share of the work complete by then. */
+interface CurvePoint {
+    /** `YYYY-MM-DD`. A calendar day, not an instant — progress is reported for a day's work. */
+    day: string;
+    /** 0–100. */
+    percent: number;
+}
+interface CurveReading {
+    plannedPercent: number | null;
+    actualPercent: number | null;
+    /** Actual minus planned, in points. Negative is behind. Null when either side is unknown. */
+    gap: number | null;
+}
+/** The library's generic point shape, from this Block's `percent`-named one. */
+declare function toPoints(points: readonly CurvePoint[]): SeriesPoint[];
+/**
+ * The reading on a given day: what was planned, what was reached, and the gap.
+ *
+ * Both sides carry the last report forward — a day nobody reported is not a day of no progress, and
+ * drawing it as zero would say the work went backwards. A plan states its shape at the points it
+ * states them, so it is read the same way.
+ */
+declare function readingOn(planned: readonly CurvePoint[], actual: readonly CurvePoint[], day: string): CurveReading;
+/** Every day either series reports, with both values and the gap — what a screen reader is given. */
+declare function curveRows(planned: readonly CurvePoint[], actual: readonly CurvePoint[]): {
+    day: string;
+    plannedPercent: number | null;
+    actualPercent: number | null;
+    gap: number | null;
+}[];
+
+interface ProgressCurveProps {
+    /** What the plan said would be complete, by day. */
+    planned: CurvePoint[];
+    /** What was actually reported complete, by day. */
+    actual: CurvePoint[];
+    /** Accessible name. It is the chart's title as a screen reader announces it, so name the job. */
+    label: string;
+    /**
+     * `YYYY-MM-DD`. The day the reading above the plot is taken on — both series carry their last value
+     * at or before it forward. Without it the reading is taken on the last day anything was reported.
+     *
+     * It is deliberately not drawn on the plot: a mark attaches to a data point, and today is usually not
+     * one. What is marked is the last report (see `lastReportLabel`).
+     */
+    today?: string;
+    height?: number;
+    plannedLabel?: string;
+    actualLabel?: string;
+    /** Text on the mark sitting at the last reported day. */
+    lastReportLabel?: string;
+    /** Shown in place of the chart when neither series has a single usable day. */
+    emptyLabel?: string;
+    /** The table a screen reader reads, and what a forced-colors viewer sees instead of the canvas. */
+    tableLabel?: string;
+    aheadLabel?: string;
+    behindLabel?: string;
+    onTrackLabel?: string;
+    loading?: boolean;
+    className?: string;
+}
+interface ProgressCurveSkeletonProps {
+    height?: number;
+    label?: string;
+    className?: string;
+}
+
+/** Holds the chart's geometry while the readings load, so the page does not jump when they land. */
+declare function ProgressCurveSkeleton({ height, label, className, }: ProgressCurveSkeletonProps): react.JSX.Element;
+
+/**
+ * An S-curve: what the plan said would be done by each day, against what was.
+ *
+ * The canvas, the Token reading, the forced-colors path and the accessible table all belong to
+ * `TimeSeriesChart`. What is here is the part that is about *progress*: a scale pinned to 0–100%,
+ * because autoscale stretches a job at 30% to the full height of the plot and reads as "nearly
+ * there"; and the reading in words above it, which is the one number somebody opened this to find.
+ */
+declare function ProgressCurveRoot({ planned, actual, label, today, height, plannedLabel, actualLabel, lastReportLabel, emptyLabel, tableLabel, aheadLabel, behindLabel, onTrackLabel, loading, className, }: ProgressCurveProps): react.JSX.Element;
+/** The Composition and its Skeleton, so a loading page keeps the chart's geometry. */
+declare const ProgressCurve: typeof ProgressCurveRoot & {
+    Skeleton: typeof ProgressCurveSkeleton;
+};
+
 interface DiagramSkeletonProps {
     label?: string;
 }
@@ -583,4 +913,4 @@ declare const DiagramEditor: typeof DiagramEditorRoot & {
     Skeleton: typeof DiagramSkeleton;
 };
 
-export { Board, type BoardCard, type BoardColumn, type BoardLabels, type BoardMove, type BoardMoveResult, type BoardPosition, type BoardProps, type BoardShape, type BoardSkeletonProps, type CeebeeAntStyleCache, CeebeeAntStyleProvider, type CeebeeAntStyleProviderProps, Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, Diagram, type DiagramEdge, DiagramEditor, type DiagramEditorProps, type DiagramNode, type DiagramPosition, type DiagramProps, type DiagramRemoval, type DiagramRenameTarget, type DiagramShape, type DiagramSkeletonProps, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, Modal, type ModalProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ThemeProviderProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { BalanceCurve, type BalanceCurveProps, BalanceCurveSkeleton, type BalanceCurveSkeletonProps, type BalanceReading, type Baseline, Board, type BoardCard, type BoardColumn, type BoardLabels, type BoardMove, type BoardMoveResult, type BoardPosition, type BoardProps, type BoardShape, type BoardSkeletonProps, type CeebeeAntStyleCache, CeebeeAntStyleProvider, type CeebeeAntStyleProviderProps, type ChartPalette, Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, type CurvePoint, type CurveReading, DEFAULT_LABELS, Diagram, type DiagramEdge, DiagramEditor, type DiagramEditorProps, type DiagramNode, type DiagramPosition, type DiagramProps, type DiagramRemoval, type DiagramRenameTarget, type DiagramShape, type DiagramSkeletonProps, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, Modal, type ModalProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, ProgressCurve, type ProgressCurveProps, ProgressCurveSkeleton, type ProgressCurveSkeletonProps, type RankedCommand, Reveal, type RevealProps, type SeriesEmphasis, type SeriesPoint, type SeriesSpec, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ThemeProviderProps, TimeSeriesChart, type TimeSeriesChartProps, TimeSeriesChartSkeleton, type TimeSeriesChartSkeletonProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, type ValueRange, alignRows, asDay, balanceReading, createCeebeeAntStyleCache, curveRows, extractCeebeeAntStyles, filterCommands, groupCommands, nearestDay, rankCommand, readingOn, round1, seriesPoints, seriesSpan, toPoints, useLabels, useMotionSettings, useTheme, useToast, valueOn };

package/dist/client.js

@@ -122,6 +122,66 @@ function ModalRoot({
 }
 var Modal = Object.assign(ModalRoot, Modal$1);
 
+// src/lib/css-probe.ts
+function createCssProbe(root) {
+  const probe = document.createElement("span");
+  probe.style.position = "fixed";
+  probe.style.pointerEvents = "none";
+  probe.style.visibility = "hidden";
+  root.append(probe);
+  return {
+    color: (name) => resolveCssColor(probe, name),
+    length: (name) => resolveCssLength(probe, name),
+    done: () => probe.remove()
+  };
+}
+function resolveCssLength(probe, name) {
+  probe.style.width = `var(${name})`;
+  const value = Number.parseFloat(getComputedStyle(probe).width);
+  probe.style.removeProperty("width");
+  return Number.isFinite(value) ? value : void 0;
+}
+function resolveCssColor(probe, name) {
+  probe.style.color = `var(${name})`;
+  const value = getComputedStyle(probe).color;
+  probe.style.removeProperty("color");
+  if (!value) return void 0;
+  if (value.startsWith("var(")) return void 0;
+  if (/^(?:#|rgb|hsl|hsv)/i.test(value)) return value;
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) return void 0;
+  context.clearRect(0, 0, 1, 1);
+  context.fillStyle = value;
+  context.fillRect(0, 0, 1, 1);
+  const [red = 0, green = 0, blue = 0, alpha = 255] = context.getImageData(0, 0, 1, 1).data;
+  return `rgba(${red}, ${green}, ${blue}, ${alpha / 255})`;
+}
+var SKIN_LINK_ID = "cb-skin";
+function watchTokens(onChange) {
+  const rootObserver = new MutationObserver(onChange);
+  rootObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+  const headObserver = new MutationObserver((records) => {
+    const skinChanged = records.some((record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof HTMLElement && node.id === SKIN_LINK_ID));
+    if (skinChanged) onChange();
+  });
+  headObserver.observe(document.head, { childList: true });
+  const onSkinLoad = (event) => {
+    if (event.target instanceof HTMLElement && event.target.id === SKIN_LINK_ID) onChange();
+  };
+  document.addEventListener("load", onSkinLoad, true);
+  const dark = window.matchMedia("(prefers-color-scheme: dark)");
+  dark.addEventListener("change", onChange);
+  return () => {
+    rootObserver.disconnect();
+    headObserver.disconnect();
+    document.removeEventListener("load", onSkinLoad, true);
+    dark.removeEventListener("change", onChange);
+  };
+}
+
 // src/theme/ant-theme-seeds.generated.ts
 var generatedCeebeeAntSeeds = {
   "ceebee": {
@@ -792,7 +852,6 @@ var THEME_MODE_COOKIE = "cb-theme-mode";
 function serializeThemeModeCookie(mode) {
   return `${THEME_MODE_COOKIE}=${mode}; Path=/; Max-Age=31536000; SameSite=Lax`;
 }
-var SKIN_LINK_ID = "cb-skin";
 function ThemeBridge({
   children,
   mode,
@@ -806,27 +865,12 @@ function ThemeBridge({
   }, []);
   useEffect(() => {
     refresh();
-    const rootObserver = new MutationObserver(refresh);
-    rootObserver.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"]
-    });
-    const headObserver = new MutationObserver((records) => {
-      const skinChanged = records.some((record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof HTMLElement && node.id === SKIN_LINK_ID));
-      if (skinChanged) refresh();
-    });
-    headObserver.observe(document.head, { childList: true });
-    const onSkinLoad = (event) => {
-      if (event.target instanceof HTMLElement && event.target.id === SKIN_LINK_ID) refresh();
-    };
-    document.addEventListener("load", onSkinLoad, true);
+    const stopWatchingTokens = watchTokens(refresh);
     const coarsePointer = window.matchMedia("(pointer: coarse)");
     const onPointerChange = () => refresh();
     coarsePointer.addEventListener("change", onPointerChange);
     return () => {
-      rootObserver.disconnect();
-      headObserver.disconnect();
-      document.removeEventListener("load", onSkinLoad, true);
+      stopWatchingTokens();
       coarsePointer.removeEventListener("change", onPointerChange);
     };
   }, [refresh]);
@@ -853,13 +897,9 @@ function mergeComponents(base, override) {
   return merged;
 }
 function readCeebeeThemeToken(root) {
-  const probe = document.createElement("span");
-  probe.style.position = "fixed";
-  probe.style.pointerEvents = "none";
-  probe.style.visibility = "hidden";
-  root.append(probe);
-  const color = (name) => resolveCssColor(probe, name);
-  const length = (name) => resolveCssLength(probe, name);
+  const probe = createCssProbe(root);
+  const color = (name) => probe.color(name);
+  const length = (name) => probe.length(name);
   const tokens = {
     colorPrimary: color("--cb-tone-brand"),
     colorInfo: color("--cb-tone-info"),
@@ -919,7 +959,7 @@ function readCeebeeThemeToken(root) {
       dotActiveBorderColor: trackBg
     };
   }
-  probe.remove();
+  probe.done();
   return {
     token: Object.fromEntries(
       Object.entries(tokens).filter(([, value]) => value !== void 0)
@@ -927,30 +967,6 @@ function readCeebeeThemeToken(root) {
     components
   };
 }
-function resolveCssLength(probe, name) {
-  probe.style.width = `var(${name})`;
-  const value = Number.parseFloat(getComputedStyle(probe).width);
-  probe.style.removeProperty("width");
-  return Number.isFinite(value) ? value : void 0;
-}
-function resolveCssColor(probe, name) {
-  probe.style.color = `var(${name})`;
-  const value = getComputedStyle(probe).color;
-  probe.style.removeProperty("color");
-  if (!value) return void 0;
-  if (value.startsWith("var(")) return void 0;
-  if (/^(?:#|rgb|hsl|hsv)/i.test(value)) return value;
-  const canvas = document.createElement("canvas");
-  canvas.width = 1;
-  canvas.height = 1;
-  const context = canvas.getContext("2d", { willReadFrequently: true });
-  if (!context) return void 0;
-  context.clearRect(0, 0, 1, 1);
-  context.fillStyle = value;
-  context.fillRect(0, 0, 1, 1);
-  const [red = 0, green = 0, blue = 0, alpha = 255] = context.getImageData(0, 0, 1, 1).data;
-  return `rgba(${red}, ${green}, ${blue}, ${alpha / 255})`;
-}
 function CeebeeAntStyleProvider({ cache, children }) {
   return /* @__PURE__ */ jsx(StyleProvider, { cache, children });
 }
@@ -2035,6 +2051,455 @@ function useNarrow(query) {
   return narrow;
 }
 var Board = Object.assign(BoardRoot, { Skeleton: BoardSkeleton });
+
+// src/data/time-series/time-series.chart.ts
+async function mountTimeSeries(host, shape, palette) {
+  const { BaselineSeries, ColorType, LineSeries, LineStyle, createChart, createSeriesMarkers } = await import('lightweight-charts');
+  const chart = createChart(host, {
+    autoSize: true,
+    /* A dashboard chart is read, not traded. Panning and zooming would let somebody scroll the data
+       off the screen and leave them looking at a fragment with no way back, so the whole span is
+       fitted and the viewport is fixed. */
+    handleScroll: false,
+    handleScale: false
+  });
+  const scale = shape.range ? () => ({ priceRange: { minValue: shape.range?.min ?? 0, maxValue: shape.range?.max ?? 0 } }) : void 0;
+  const common = { priceLineVisible: false, lastValueVisible: false, autoscaleInfoProvider: scale };
+  const drawn = shape.baseline ? [
+    chart.addSeries(BaselineSeries, {
+      ...common,
+      baseValue: { type: "price", price: shape.baseline.value },
+      lineWidth: 2
+    })
+  ] : shape.series.map(
+    (series) => chart.addSeries(LineSeries, {
+      ...common,
+      lineWidth: series.emphasis === "reference" ? 2 : 3,
+      lineStyle: series.emphasis === "reference" ? LineStyle.Dashed : LineStyle.Solid
+    })
+  );
+  const markedSeries = drawn.at(-1);
+  const markers = markedSeries ? createSeriesMarkers(markedSeries, []) : null;
+  let current = palette;
+  const apply = (next) => {
+    current = next;
+    chart.applyOptions({
+      layout: {
+        background: { type: ColorType.Solid, color: next.background },
+        textColor: next.text,
+        fontFamily: next.font,
+        /* Apache-2.0 asks that the NOTICE travel with the distribution, not that a logo be painted
+           into a consumer's dashboard. The attribution lives in THIRD_PARTY_NOTICES.md. */
+        attributionLogo: false
+      },
+      grid: { vertLines: { color: next.grid }, horzLines: { color: next.grid } },
+      rightPriceScale: { borderColor: next.grid, scaleMargins: { top: 0.1, bottom: 0.08 } },
+      timeScale: { borderColor: next.grid, fixLeftEdge: true, fixRightEdge: true },
+      crosshair: { vertLine: { color: next.muted }, horzLine: { color: next.muted } },
+      localization: { priceFormatter: shape.format }
+    });
+    drawn.forEach((series, index) => {
+      if (shape.baseline) {
+        series.applyOptions({
+          topLineColor: next.above,
+          topFillColor1: next.above,
+          topFillColor2: next.background,
+          bottomLineColor: next.below,
+          bottomFillColor1: next.background,
+          bottomFillColor2: next.below,
+          crosshairMarkerBorderColor: next.background
+        });
+        return;
+      }
+      series.applyOptions({
+        color: next.series[index] ?? next.text,
+        crosshairMarkerBorderColor: next.background
+      });
+    });
+  };
+  apply(palette);
+  return {
+    setData(series) {
+      drawn.forEach((drawnSeries, index) => {
+        const points = series[index]?.points ?? [];
+        drawnSeries.setData(points.map((point) => ({ time: point.day, value: point.value })));
+      });
+      chart.timeScale().fitContent();
+    },
+    mark(day, text) {
+      markers?.setMarkers(day === null ? [] : [{
+        time: day,
+        position: "belowBar",
+        shape: "arrowUp",
+        color: current.series[current.series.length - 1] ?? current.text,
+        text
+      }]);
+    },
+    applyPalette: apply,
+    destroy() {
+      chart.remove();
+    }
+  };
+}
+
+// src/data/time-series/time-series.math.ts
+function asDay(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
+  const at = (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).getTime();
+  if (Number.isNaN(at)) return null;
+  return new Date(at).toISOString().startsWith(value) ? value : null;
+}
+function seriesPoints(points) {
+  const byDay = /* @__PURE__ */ new Map();
+  for (const point of points) {
+    if (asDay(point.day) === null) continue;
+    byDay.set(point.day, point.value);
+  }
+  return [...byDay].map(([day, value]) => ({ day, value })).sort((a, b) => a.day.localeCompare(b.day));
+}
+function valueOn(points, day) {
+  const reached = seriesPoints(points).filter((point) => point.day <= day);
+  const last = reached[reached.length - 1];
+  return last ? last.value : null;
+}
+function alignRows(series) {
+  const days = [...new Set(series.flatMap((one) => seriesPoints(one.points).map((point) => point.day)))].sort();
+  return days.map((day) => {
+    const values = {};
+    for (const one of series) values[one.key] = valueOn(one.points, day);
+    return { day, values };
+  });
+}
+function seriesSpan(series) {
+  const days = series.flatMap((one) => seriesPoints(one.points).map((point) => point.day)).sort();
+  const from = days[0];
+  const to = days[days.length - 1];
+  return from && to ? { from, to } : null;
+}
+function nearestDay(days, day) {
+  const known = days.filter((candidate) => asDay(candidate) !== null);
+  if (known.length === 0 || asDay(day) === null) return null;
+  const distance2 = (candidate) => Math.abs((/* @__PURE__ */ new Date(`${candidate}T00:00:00Z`)).getTime() - (/* @__PURE__ */ new Date(`${day}T00:00:00Z`)).getTime());
+  return known.reduce((closest, candidate) => distance2(candidate) < distance2(closest) ? candidate : closest);
+}
+function round1(value) {
+  return Math.round(value * 10) / 10;
+}
+function TimeSeriesChartSkeleton({
+  height = 260,
+  label = "Loading chart",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("cb-chart", "cb-chart--skeleton", className), role: "status", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("span", { className: "cb-chart__skeleton-head", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "cb-chart__skeleton-plot", style: { height }, "aria-hidden": "true" })
+  ] });
+}
+function TimeSeriesChart({
+  label,
+  series,
+  format,
+  range,
+  baseline,
+  mark,
+  height = 260,
+  emptyLabel = "Nothing has been reported yet.",
+  tableLabel = "Readings by day",
+  dayLabel = "Day",
+  loading = false,
+  className
+}) {
+  const host = useRef(null);
+  const [forcedColors, setForcedColors] = useState(false);
+  const cleaned = useMemo(
+    () => series.map((one) => ({ ...one, points: seriesPoints(one.points) })),
+    [series]
+  );
+  const rows = useMemo(() => alignRows(cleaned), [cleaned]);
+  const empty = rows.length === 0;
+  const markDay = useMemo(
+    () => mark ? nearestDay(rows.map((row) => row.day), mark.day) : null,
+    [rows, mark]
+  );
+  useEffect(() => {
+    const query = window.matchMedia("(forced-colors: active)");
+    const read = () => setForcedColors(query.matches);
+    read();
+    query.addEventListener("change", read);
+    return () => query.removeEventListener("change", read);
+  }, []);
+  const tokens = useMemo(() => cleaned.map((one) => one.colorToken), [cleaned]);
+  useEffect(() => {
+    const element = host.current;
+    if (!element || empty || forcedColors || loading) return;
+    let chart = null;
+    let cancelled = false;
+    let palette = readPalette(element, tokens);
+    if (!palette) return;
+    void mountTimeSeries(element, { series: cleaned, format, range, baseline }, palette).then((mounted) => {
+      if (cancelled) {
+        mounted.destroy();
+        return;
+      }
+      chart = mounted;
+      const current = readPalette(element, tokens) ?? palette;
+      if (current) mounted.applyPalette(current);
+      mounted.setData(cleaned);
+      mounted.mark(markDay, mark?.label ?? "");
+    });
+    const stopWatchingTokens = watchTokens(() => {
+      const next = readPalette(element, tokens);
+      if (!next) return;
+      palette = next;
+      chart?.applyPalette(next);
+    });
+    return () => {
+      cancelled = true;
+      stopWatchingTokens();
+      chart?.destroy();
+      chart = null;
+    };
+  }, [cleaned, tokens, format, range, baseline, markDay, mark, empty, forcedColors, loading]);
+  if (loading) return /* @__PURE__ */ jsx(TimeSeriesChartSkeleton, { height, className });
+  return /* @__PURE__ */ jsxs("div", { className: cn("cb-chart", className), "data-forced-colors": forcedColors || void 0, children: [
+    empty ? /* @__PURE__ */ jsx("p", { className: "cb-chart__empty", style: { minHeight: height }, children: emptyLabel }) : null,
+    empty || forcedColors ? null : /* @__PURE__ */ jsx("div", { ref: host, className: "cb-chart__canvas", style: { height }, role: "img", "aria-label": label }),
+    empty ? null : /* @__PURE__ */ jsx("div", { className: "cb-chart__rows", children: /* @__PURE__ */ jsxs("table", { className: "cb-chart__table", children: [
+      /* @__PURE__ */ jsx("caption", { children: tableLabel }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", children: dayLabel }),
+        cleaned.map((one) => /* @__PURE__ */ jsx("th", { scope: "col", children: one.label }, one.key))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { "data-marked": row.day === markDay || void 0, children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: row.day }),
+        cleaned.map((one) => {
+          const value = row.values[one.key];
+          return /* @__PURE__ */ jsx("td", { children: value === null || value === void 0 ? "\u2014" : format(value) }, one.key);
+        })
+      ] }, row.day)) })
+    ] }) })
+  ] });
+}
+function readPalette(host, seriesTokens) {
+  const probe = createCssProbe(host);
+  const text = probe.color("--cb-fg-muted");
+  const muted = probe.color("--cb-fg-subtle");
+  const grid = probe.color("--cb-border");
+  const background = probe.color("--cb-surface");
+  const above = probe.color("--cb-tone-success");
+  const below = probe.color("--cb-tone-danger");
+  const seriesColors = seriesTokens.map((token) => probe.color(token));
+  probe.done();
+  const font = getComputedStyle(host).fontFamily;
+  if (!text || !muted || !grid || !background || !above || !below || !font) return null;
+  if (seriesColors.some((colour) => colour === void 0)) return null;
+  return {
+    text,
+    muted,
+    grid,
+    background,
+    font,
+    above,
+    below,
+    series: seriesColors.filter((colour) => colour !== void 0)
+  };
+}
+
+// src/data/balance-curve/balance-curve.math.ts
+function balanceReading(points, threshold) {
+  const ordered = seriesPoints(points);
+  if (ordered.length === 0) {
+    return { lowest: null, lowestDay: null, firstBelowDay: null, daysBelow: 0, closing: null };
+  }
+  let lowestPoint = ordered[0];
+  for (const point of ordered) {
+    if (lowestPoint === void 0 || point.value < lowestPoint.value) lowestPoint = point;
+  }
+  const below = ordered.filter((point) => point.value < threshold);
+  return {
+    lowest: lowestPoint?.value ?? null,
+    lowestDay: lowestPoint?.day ?? null,
+    firstBelowDay: below[0]?.day ?? null,
+    daysBelow: below.length,
+    closing: ordered.at(-1)?.value ?? null
+  };
+}
+function BalanceCurveSkeleton({
+  height = 260,
+  label = "Loading balance",
+  className
+}) {
+  return /* @__PURE__ */ jsx(TimeSeriesChartSkeleton, { height, label, className });
+}
+function BalanceCurveRoot({
+  label,
+  balances,
+  format,
+  threshold = { value: 0 },
+  height = 260,
+  seriesLabel = "Balance",
+  emptyLabel = "Nothing to project yet.",
+  tableLabel = "Balance by day",
+  belowLabel = (from, lowest, days) => `Below the line from ${from} \u2014 lowest ${lowest}, ${days} day(s) under.`,
+  clearLabel = (lowest) => `Stays above the line. Lowest point ${lowest}.`,
+  loading = false,
+  className
+}) {
+  const points = useMemo(() => seriesPoints(balances), [balances]);
+  const reading = useMemo(() => balanceReading(points, threshold.value), [points, threshold.value]);
+  const series = useMemo(
+    () => [{ key: "balance", label: seriesLabel, points, emphasis: "primary", colorToken: "--cb-tone-brand" }],
+    [points, seriesLabel]
+  );
+  if (loading) return /* @__PURE__ */ jsx(BalanceCurveSkeleton, { height, className });
+  const breached = reading.firstBelowDay !== null;
+  return /* @__PURE__ */ jsxs("figure", { className: cn("cb-balance-curve", className), children: [
+    /* @__PURE__ */ jsxs("figcaption", { className: "cb-balance-curve__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "cb-balance-curve__label", children: label }),
+      threshold.label ? /* @__PURE__ */ jsx("span", { className: "cb-balance-curve__threshold", children: threshold.label }) : null
+    ] }),
+    reading.lowest === null ? null : /* @__PURE__ */ jsx("p", { className: "cb-balance-curve__reading", "data-state": breached ? "below" : "clear", children: breached && reading.firstBelowDay ? belowLabel(reading.firstBelowDay, format(reading.lowest), reading.daysBelow) : clearLabel(format(reading.lowest)) }),
+    /* @__PURE__ */ jsx(
+      TimeSeriesChart,
+      {
+        label,
+        series,
+        format,
+        baseline: threshold,
+        mark: reading.lowestDay ? { day: reading.lowestDay, label: format(reading.lowest ?? 0) } : void 0,
+        height,
+        emptyLabel,
+        tableLabel
+      }
+    )
+  ] });
+}
+var BalanceCurve = Object.assign(BalanceCurveRoot, { Skeleton: BalanceCurveSkeleton });
+
+// src/data/progress-curve/progress-curve.math.ts
+function toPoints(points) {
+  return seriesPoints(points.map((point) => ({ day: point.day, value: point.percent })));
+}
+function readingOn(planned, actual, day) {
+  const plannedPercent = valueOn(toPoints(planned), day);
+  const actualPercent = valueOn(toPoints(actual), day);
+  return {
+    plannedPercent,
+    actualPercent,
+    gap: plannedPercent === null || actualPercent === null ? null : round1(actualPercent - plannedPercent)
+  };
+}
+function curveRows(planned, actual) {
+  return alignRows([
+    { key: "planned", points: toPoints(planned) },
+    { key: "actual", points: toPoints(actual) }
+  ]).map((row) => {
+    const plannedPercent = row.values.planned ?? null;
+    const actualPercent = row.values.actual ?? null;
+    return {
+      day: row.day,
+      plannedPercent,
+      actualPercent,
+      gap: plannedPercent === null || actualPercent === null ? null : round1(actualPercent - plannedPercent)
+    };
+  });
+}
+function ProgressCurveSkeleton({
+  height = 260,
+  label = "Loading progress",
+  className
+}) {
+  return /* @__PURE__ */ jsx(TimeSeriesChartSkeleton, { height, label, className });
+}
+function ProgressCurveRoot({
+  planned,
+  actual,
+  label,
+  today,
+  height = 260,
+  plannedLabel = "Planned",
+  actualLabel = "Actual",
+  lastReportLabel = "Last report",
+  emptyLabel = "Nothing has been reported yet.",
+  tableLabel = "Progress by day",
+  aheadLabel = "ahead of plan",
+  behindLabel = "behind plan",
+  onTrackLabel = "on plan",
+  loading = false,
+  className
+}) {
+  const rows = useMemo(() => curveRows(planned, actual), [planned, actual]);
+  const actualPoints = useMemo(() => toPoints(actual), [actual]);
+  const lastReport = actualPoints.at(-1)?.day ?? null;
+  const latest = useMemo(() => {
+    if (!today) return rows[rows.length - 1];
+    const day = asDay(today);
+    return day === null ? rows[rows.length - 1] : { day, ...readingOn(planned, actual, day) };
+  }, [today, rows, planned, actual]);
+  const series = useMemo(
+    () => [
+      { key: "planned", label: plannedLabel, points: toPoints(planned), emphasis: "reference", colorToken: "--cb-fg-subtle" },
+      { key: "actual", label: actualLabel, points: toPoints(actual), emphasis: "primary", colorToken: "--cb-tone-brand" }
+    ],
+    [planned, actual, plannedLabel, actualLabel]
+  );
+  if (loading) return /* @__PURE__ */ jsx(ProgressCurveSkeleton, { height, className });
+  return /* @__PURE__ */ jsxs("figure", { className: cn("cb-progress-curve", className), children: [
+    /* @__PURE__ */ jsxs("figcaption", { className: "cb-progress-curve__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "cb-progress-curve__label", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "cb-chart-legend", children: series.map((one) => /* @__PURE__ */ jsx("span", { className: "cb-chart-legend__key", "data-emphasis": one.emphasis, "data-series": one.key, children: one.label }, one.key)) })
+    ] }),
+    latest ? /* @__PURE__ */ jsxs("p", { className: "cb-progress-curve__reading", "data-state": stateOf(latest.gap), children: [
+      /* @__PURE__ */ jsx("strong", { children: percent(latest.actualPercent) }),
+      " ",
+      actualLabel.toLowerCase(),
+      " \xB7 ",
+      percent(latest.plannedPercent),
+      " ",
+      plannedLabel.toLowerCase(),
+      latest.gap === null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        " \u2014 ",
+        Math.abs(latest.gap),
+        " ",
+        gapWord(latest.gap, { aheadLabel, behindLabel, onTrackLabel })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "cb-progress-curve__on-day", children: [
+        " (",
+        latest.day,
+        ")"
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      TimeSeriesChart,
+      {
+        label,
+        series,
+        format: percentOf,
+        range: { min: 0, max: 100 },
+        mark: lastReport ? { day: lastReport, label: lastReportLabel } : void 0,
+        height,
+        emptyLabel,
+        tableLabel
+      }
+    )
+  ] });
+}
+var ProgressCurve = Object.assign(ProgressCurveRoot, { Skeleton: ProgressCurveSkeleton });
+var percentOf = (value) => `${Math.round(value)}%`;
+function percent(value) {
+  return value === null ? "\u2014" : `${round1(value)}%`;
+}
+function stateOf(gap) {
+  if (gap === null) return "unknown";
+  if (gap < 0) return "behind";
+  if (gap > 0) return "ahead";
+  return "on-plan";
+}
+function gapWord(gap, words) {
+  if (gap < 0) return words.behindLabel;
+  if (gap > 0) return words.aheadLabel;
+  return words.onTrackLabel;
+}
 function DiagramNodeView({ data, selected }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2342,4 +2807,4 @@ function DiagramEditorRoot(props) {
 }
 var DiagramEditor = Object.assign(DiagramEditorRoot, { Skeleton: DiagramSkeleton });
 
-export { Board, CeebeeAntStyleProvider, Checklist, CommandPalette, DEFAULT_LABELS, Diagram, DiagramEditor, LabelsProvider, Modal, MotionProvider, PanZoomCanvas, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { BalanceCurve, BalanceCurveSkeleton, Board, CeebeeAntStyleProvider, Checklist, CommandPalette, DEFAULT_LABELS, Diagram, DiagramEditor, LabelsProvider, Modal, MotionProvider, PanZoomCanvas, ProgressCurve, ProgressCurveSkeleton, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, TimeSeriesChart, TimeSeriesChartSkeleton, ToastProvider, TopBar, alignRows, asDay, balanceReading, createCeebeeAntStyleCache, curveRows, extractCeebeeAntStyles, filterCommands, groupCommands, nearestDay, rankCommand, readingOn, round1, seriesPoints, seriesSpan, toPoints, useLabels, useMotionSettings, useTheme, useToast, valueOn };

package/dist/styles.css

@@ -930,6 +930,21 @@ svg.react-flow__connectionline {
 .cb-container--lg { max-width: 76rem; }
 .cb-container--full { max-width: none; }
 
+/* Text for a screen reader and no one else. It is in the layout file rather than beside any one
+   component because more than one already asked for it: `cb-visually-hidden` was being written in
+   markup with no rule behind it, so the text it hides was simply visible. */
+.cb-visually-hidden:not(:focus):not(:active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* foundation/page-container/page-container.css */
 .cb-page-container { display: flex; flex-direction: column; gap: var(--cb-space-4); padding-block: var(--cb-space-5); color: var(--cb-fg); font-family: var(--cb-font-sans); }
 .cb-page-container__breadcrumb { color: var(--cb-fg-muted); font-size: var(--cb-text-sm); }
@@ -1360,6 +1375,50 @@ svg.react-flow__connectionline {
   line-height: var(--cb-leading-normal);
 }
 
+/* data/balance-curve/balance-curve.css */
+.cb-balance-curve {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  margin: 0;
+  font-family: var(--cb-font-sans);
+  color: var(--cb-fg);
+}
+
+.cb-balance-curve__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--cb-space-2);
+}
+
+.cb-balance-curve__label {
+  font-size: var(--cb-text-md);
+  font-weight: 600;
+}
+
+.cb-balance-curve__threshold {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+.cb-balance-curve__reading {
+  margin: 0;
+  font-size: var(--cb-text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--cb-fg-muted);
+}
+
+/* The one place a balance chart spends colour weight: the sentence that says it goes under. The plot
+   already carries the same meaning in its shading, so this is reinforcement, not the only signal. */
+.cb-balance-curve__reading[data-state="below"] {
+  color: var(--cb-tone-danger);
+  font-weight: 600;
+}
+
+.cb-balance-curve__reading[data-state="clear"] { color: var(--cb-tone-success); }
+
 /* data/board/board.css */
 /* Board — columns of cards a person moves by pointer or by keyboard.
    Every value is a Token. The drag lift, the gap animation and the drop marker all have a
@@ -2141,6 +2200,50 @@ svg.react-flow__connectionline {
   .cb-pan-zoom-canvas__toolbar { border-color: CanvasText; }
 }
 
+/* data/progress-curve/progress-curve.css */
+.cb-progress-curve {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  margin: 0;
+  font-family: var(--cb-font-sans);
+  color: var(--cb-fg);
+}
+
+.cb-progress-curve__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--cb-space-2);
+}
+
+.cb-progress-curve__label {
+  font-size: var(--cb-text-md);
+  font-weight: 600;
+}
+
+/* The legend marks take the colour of the series they name — the same Tokens the canvas is drawn from,
+   so the two renderings cannot drift apart. */
+.cb-progress-curve .cb-chart-legend__key[data-series="planned"] { color: var(--cb-fg-subtle); }
+.cb-progress-curve .cb-chart-legend__key[data-series="actual"] { color: var(--cb-tone-brand); }
+
+.cb-progress-curve__reading {
+  margin: 0;
+  font-size: var(--cb-text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--cb-fg-muted);
+}
+
+.cb-progress-curve__reading strong {
+  font-size: var(--cb-text-xl);
+  color: var(--cb-fg);
+}
+
+.cb-progress-curve__reading[data-state="behind"] { color: var(--cb-tone-danger); }
+.cb-progress-curve__reading[data-state="ahead"] { color: var(--cb-tone-success); }
+.cb-progress-curve__on-day { color: var(--cb-fg-subtle); }
+
 /* data/sticker-group/sticker-group.css */
 .cb-sticker-group {
   display: flex;
@@ -2230,6 +2333,138 @@ svg.react-flow__connectionline {
   }
 }
 
+/* data/time-series/time-series.css */
+.cb-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  font-family: var(--cb-font-sans);
+  color: var(--cb-fg);
+}
+
+.cb-chart__canvas {
+  inline-size: 100%;
+  border-radius: var(--cb-radius-md);
+  overflow: hidden;
+}
+
+.cb-chart__empty {
+  display: grid;
+  place-items: center;
+  margin: 0;
+  padding: var(--cb-space-4);
+  border: var(--cb-border-width) dashed var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  color: var(--cb-fg-muted);
+  font-size: var(--cb-text-sm);
+}
+
+/* The chart's other rendering. Hidden from sight, never from the accessibility tree: a canvas gives a
+   screen reader nothing at all, so this table is the chart as far as one is concerned.
+
+   The geometry is on the wrapper rather than on the table, because a table cannot be shrunk: it
+   refuses to go under its content's width and height whatever is asked of it, so these rules on the
+   table itself left an invisible box the size of the data lying across the plot. */
+.cb-chart__rows {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Forced colors: the canvas is replaced by the table rather than sitting there as a bitmap the system
+   cannot recolour. The component stops rendering the canvas at all in this mode, so this rule only has
+   to bring the table back into view. */
+@media (forced-colors: active) {
+  .cb-chart__rows {
+    position: static;
+    inline-size: 100%;
+    block-size: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+
+  .cb-chart__table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: var(--cb-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .cb-chart__table caption {
+    text-align: start;
+    padding-block-end: var(--cb-space-1);
+  }
+
+  .cb-chart__table th,
+  .cb-chart__table td {
+    border: var(--cb-border-width) solid;
+    padding: var(--cb-space-1) var(--cb-space-2);
+    text-align: end;
+  }
+
+  .cb-chart__table th[scope="row"],
+  .cb-chart__table th[scope="col"]:first-child {
+    text-align: start;
+  }
+
+  .cb-chart__table tr[data-marked] { font-weight: 700; }
+}
+
+.cb-chart--skeleton { gap: var(--cb-space-2); }
+
+.cb-chart__skeleton-head,
+.cb-chart__skeleton-plot {
+  display: block;
+  background: var(--cb-bg-subtle);
+  border-radius: var(--cb-radius-sm);
+}
+
+.cb-chart__skeleton-head {
+  block-size: var(--cb-text-md);
+  inline-size: calc(var(--cb-space-8) * 3);
+}
+
+.cb-chart__skeleton-plot { border-radius: var(--cb-radius-md); }
+
+/* A legend mark carries the same treatment as the line it names: a reference is thin and dashed, the
+   primary series solid and thick. Colour is never the only difference — dash versus solid survives a
+   monochrome print and every kind of colour blindness. */
+.cb-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cb-space-3);
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+.cb-chart-legend__key {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cb-space-1);
+}
+
+.cb-chart-legend__key::before {
+  content: '';
+  inline-size: var(--cb-space-4);
+  block-size: 0;
+  border-block-start-width: var(--cb-border-width);
+  border-block-start-style: solid;
+  border-color: currentColor;
+}
+
+.cb-chart-legend__key[data-emphasis="reference"]::before { border-block-start-style: dashed; }
+.cb-chart-legend__key[data-emphasis="primary"]::before {
+  border-block-start-width: calc(var(--cb-border-width) * 2);
+}
+
 /* nav/nav.css */
 .cb-menu-positioner {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {
@@ -60,7 +60,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@xyflow/react": "12.11.6",
     "antd": "6.6.1",
-    "dayjs": "1.11.18"
+    "dayjs": "1.11.18",
+    "lightweight-charts": "5.2.1"
   },
   "scripts": {
     "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",