@ceebee/ui 1.8.0 → 1.10.0

package/dist/client.js

@@ -1,6 +1,7 @@
 "use client";
 import { Modal as Modal$1, Button, theme, ConfigProvider, Progress } from 'antd';
 export * from 'antd';
+import * as React from 'react';
 import { createContext, useId, useRef, useCallback, useInsertionEffect, useLayoutEffect, useState, useEffect, useMemo, useContext, Children } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
@@ -13,6 +14,9 @@ import { X, Minus, Plus, RotateCcw, Minimize2, Maximize2, Search, Check, Chevron
 import { Toast } from '@base-ui/react/toast';
 import { Popover } from '@base-ui/react/popover';
 import { AnimatePresence, motion } from 'motion/react';
+import { useSensors, useSensor, PointerSensor, DndContext, closestCorners, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { ReactFlow, ConnectionMode, Background, Controls, applyNodeChanges, MarkerType, Handle, Position } from '@xyflow/react';
 
 // src/lib/cn.ts
@@ -118,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": {
@@ -788,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,
@@ -802,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]);
@@ -849,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"),
@@ -915,7 +959,7 @@ function readCeebeeThemeToken(root) {
       dotActiveBorderColor: trackBg
     };
   }
-  probe.remove();
+  probe.done();
   return {
     token: Object.fromEntries(
       Object.entries(tokens).filter(([, value]) => value !== void 0)
@@ -923,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 });
 }
@@ -1673,6 +1693,813 @@ function PanZoomCanvasRoot({
   ] });
 }
 var PanZoomCanvas = Object.assign(PanZoomCanvasRoot, { Skeleton: PanZoomCanvasSkeleton });
+function BoardSkeleton({ columns = 3, cards = 3, label = "Loading board" }) {
+  return /* @__PURE__ */ jsx("div", { className: "cb-board", "aria-busy": "true", "aria-label": label, children: /* @__PURE__ */ jsx("div", { className: "cb-board__surface", children: Array.from({ length: columns }, (_, column) => /* @__PURE__ */ jsxs("section", { className: "cb-board__column", children: [
+    /* @__PURE__ */ jsxs("header", { className: "cb-board__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "cb-board__ghost cb-board__ghost cb-board__ghost--name" }),
+      /* @__PURE__ */ jsx("span", { className: "cb-board__ghost cb-board__ghost cb-board__ghost--count" })
+    ] }),
+    /* @__PURE__ */ jsx("ol", { className: "cb-board__list", children: Array.from({ length: cards }, (_2, card) => /* @__PURE__ */ jsx("li", { className: "cb-board__card cb-board__ghost-card" }, card)) })
+  ] }, column)) }) });
+}
+
+// src/data/board/board.math.ts
+function locate(columns, cardId) {
+  for (const column of columns) {
+    const index = column.cards.findIndex((card) => card.id === cardId);
+    if (index !== -1) return { columnId: column.id, index };
+  }
+  return null;
+}
+var columnOf = (columns, columnId) => columns.find((c) => c.id === columnId);
+function canPickUp(columns, cardId) {
+  const at = locate(columns, cardId);
+  if (!at) return false;
+  return !columnOf(columns, at.columnId)?.cards.find((c) => c.id === cardId)?.disabled;
+}
+function refusalFor(columns, move) {
+  if (!canPickUp(columns, move.cardId)) return "this card cannot be moved";
+  const target = columnOf(columns, move.to.columnId);
+  if (!target) return "that column is not on the board";
+  if (target.accepts === false) return "that column does not take cards";
+  return null;
+}
+function isNoop(move) {
+  return move.from.columnId === move.to.columnId && move.from.index === move.to.index;
+}
+function applyMove(columns, move) {
+  const card = columnOf(columns, move.from.columnId)?.cards[move.from.index];
+  if (!card || card.id !== move.cardId) return [...columns];
+  return columns.map((column) => {
+    if (column.id === move.from.columnId && column.id === move.to.columnId) {
+      const rest = column.cards.filter((_, i) => i !== move.from.index);
+      rest.splice(clamp(move.to.index, rest.length), 0, card);
+      return { ...column, cards: rest };
+    }
+    if (column.id === move.from.columnId) {
+      return { ...column, cards: column.cards.filter((_, i) => i !== move.from.index) };
+    }
+    if (column.id === move.to.columnId) {
+      const next = [...column.cards];
+      next.splice(clamp(move.to.index, next.length), 0, card);
+      return { ...column, cards: next };
+    }
+    return column;
+  });
+}
+var clamp = (value, max) => Math.max(0, Math.min(value, max));
+function nextTarget(columns, held, direction) {
+  const at = columns.findIndex((c) => c.id === held.columnId);
+  const current = columns[at];
+  if (!current) return null;
+  if (direction === "up" || direction === "down") {
+    const size = current.cards.length;
+    const index = held.index + (direction === "down" ? 1 : -1);
+    return index < 0 || index > size - 1 ? null : { columnId: held.columnId, index };
+  }
+  const step = direction === "right" ? 1 : -1;
+  for (let i = at + step; i >= 0 && i < columns.length; i += step) {
+    const column = columns[i];
+    if (!column || column.accepts === false) continue;
+    return { columnId: column.id, index: clamp(held.index, column.cards.length) };
+  }
+  return null;
+}
+function columnLoad(column) {
+  const count = column.cards.length;
+  return { count, over: typeof column.limit === "number" && count > column.limit };
+}
+var DEFAULTS = {
+  pickUp: "Picked up. Use the arrow keys to move it, Space to drop, Escape to cancel.",
+  dropped: (card, column) => `${card} moved to ${column}.`,
+  cancelled: "Move cancelled.",
+  refused: (reason) => `Move refused: ${reason}`,
+  undo: "Undo",
+  move: (card) => `Move ${card}`,
+  undone: "Move undone.",
+  lanes: "Column",
+  over: (count, limit) => `${count} of ${limit}, over the limit`
+};
+var textOf = (node, fallback) => typeof node === "string" ? node : fallback;
+function BoardRoot({
+  columns,
+  onMove,
+  layout = "auto",
+  phoneQuery = "(max-width: 640px)",
+  labels,
+  motion: motion3 = true,
+  handle = false,
+  "aria-label": ariaLabel = "Board"
+}) {
+  const text = { ...DEFAULTS, ...labels };
+  const [optimistic, setOptimistic] = React.useState(null);
+  const [held, setHeld] = React.useState(null);
+  const [dragging, setDragging] = React.useState(null);
+  const [announcement, setAnnouncement] = React.useState("");
+  const [undoable, setUndoable] = React.useState(null);
+  const [lane, setLane] = React.useState(0);
+  const view = optimistic ?? columns;
+  React.useEffect(() => setOptimistic(null), [columns]);
+  const narrow = useNarrow(layout === "auto" ? phoneQuery : null);
+  const lanes = layout === "lanes" || layout === "auto" && narrow;
+  const nameOf = (columnId) => {
+    const column = view.find((c) => c.id === columnId);
+    return column?.label ?? textOf(column?.name, columnId);
+  };
+  const commit = React.useCallback(
+    async (move, announceAs) => {
+      if (isNoop(move)) return;
+      const refusal = refusalFor(view, move);
+      if (refusal) {
+        setAnnouncement(text.refused(refusal));
+        return;
+      }
+      const before = view;
+      setOptimistic(applyMove(view, move));
+      setAnnouncement(announceAs ?? text.dropped(titleOf(view, move.cardId), nameOf(move.to.columnId)));
+      try {
+        const result = await onMove(move);
+        if (result && "refused" in result) {
+          setOptimistic(before);
+          setAnnouncement(text.refused(result.refused));
+          return;
+        }
+        setUndoable({ cardId: move.cardId, from: move.to, to: move.from });
+      } catch (e) {
+        setOptimistic(before);
+        setAnnouncement(text.refused(e instanceof Error ? e.message : String(e)));
+      }
+    },
+    [view, onMove, text]
+  );
+  const onCardKeyDown = (event, cardId) => {
+    const DIRECTIONS = {
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      ArrowUp: "up",
+      ArrowDown: "down"
+    };
+    if (event.key === "Escape" && held) {
+      event.preventDefault();
+      setHeld(null);
+      setAnnouncement(text.cancelled);
+      return;
+    }
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      if (!held) {
+        if (!canPickUp(view, cardId)) {
+          const card = view.flatMap((c) => c.cards).find((c) => c.id === cardId);
+          setAnnouncement(text.refused(card?.disabledReason ?? "this card cannot be moved"));
+          return;
+        }
+        const at = locate(view, cardId);
+        if (at) {
+          setHeld({ cardId, at });
+          setAnnouncement(text.pickUp);
+        }
+        return;
+      }
+      const from = locate(view, held.cardId);
+      if (from) void commit({ cardId: held.cardId, from, to: held.at });
+      setHeld(null);
+      return;
+    }
+    const direction = DIRECTIONS[event.key];
+    if (!direction || !held) return;
+    event.preventDefault();
+    const target = nextTarget(view, held.at, direction);
+    if (!target) return;
+    setHeld({ ...held, at: target });
+    setAnnouncement(`${nameOf(target.columnId)}, ${target.index + 1}`);
+  };
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+  const onDragEnd = (event) => {
+    setDragging(null);
+    const cardId = String(event.active.id);
+    const over = event.over ? String(event.over.id) : null;
+    if (!over) return;
+    const from = locate(view, cardId);
+    if (!from) return;
+    const onColumn = view.find((c) => c.id === over);
+    const to = onColumn ? { columnId: onColumn.id, index: onColumn.cards.length } : locate(view, over);
+    if (to) void commit({ cardId, from, to });
+  };
+  const laneColumn = view[Math.min(lane, Math.max(view.length - 1, 0))];
+  const shown = lanes ? laneColumn ? [laneColumn] : [] : view;
+  return /* @__PURE__ */ jsxs("div", { className: "cb-board", "data-motion": motion3 ? void 0 : "off", children: [
+    lanes ? /* @__PURE__ */ jsx("div", { className: "cb-board__lanes", role: "tablist", "aria-label": text.lanes, children: view.map((column, i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": i === lane,
+        className: "cb-board__lane",
+        onClick: () => setLane(i),
+        children: [
+          column.name,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "cb-board__count", children: column.cards.length })
+        ]
+      },
+      column.id
+    )) }) : null,
+    /* @__PURE__ */ jsxs(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCorners,
+        onDragStart: (e) => setDragging(String(e.active.id)),
+        onDragCancel: () => setDragging(null),
+        onDragEnd,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "cb-board__surface", role: "group", "aria-label": ariaLabel, "data-lanes": lanes ? "" : void 0, children: shown.map((column) => /* @__PURE__ */ jsx(Column, { column, held, onCardKeyDown, labels: text, handle }, column.id)) }),
+          /* @__PURE__ */ jsx(DragOverlay, { children: dragging ? /* @__PURE__ */ jsx("div", { className: "cb-board__card cb-board__card--lift", children: cardTitle(view, dragging) }) : null })
+        ]
+      }
+    ),
+    undoable ? /* @__PURE__ */ jsx("div", { className: "cb-board__undo", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          const move = undoable;
+          setUndoable(null);
+          void commit(move, text.undone);
+        },
+        children: text.undo
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "cb-board__live", role: "status", "aria-live": "polite", children: announcement })
+  ] });
+}
+var cardTitle = (columns, cardId) => columns.flatMap((c) => c.cards).find((c) => c.id === cardId)?.title ?? null;
+var titleOf = (columns, cardId) => {
+  const card = columns.flatMap((c) => c.cards).find((c) => c.id === cardId);
+  return card?.label ?? textOf(card?.title, cardId);
+};
+function Column({
+  column,
+  held,
+  onCardKeyDown,
+  labels,
+  handle
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: column.id });
+  const load = columnLoad(column);
+  const holding = held?.at.columnId === column.id;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: setNodeRef,
+      className: "cb-board__column",
+      "data-over": isOver ? "" : void 0,
+      "data-refuses": column.accepts === false ? "" : void 0,
+      "aria-label": column.label ?? (typeof column.name === "string" ? column.name : void 0),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "cb-board__head", children: [
+          /* @__PURE__ */ jsx("span", { className: "cb-board__name", children: column.name }),
+          /* @__PURE__ */ jsx("span", { className: "cb-board__count", "data-over-limit": load.over ? "" : void 0, children: typeof column.limit === "number" ? `${load.count}/${column.limit}` : load.count })
+        ] }),
+        /* @__PURE__ */ jsx(SortableContext, { items: column.cards.map((c) => c.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxs("ol", { className: "cb-board__list", children: [
+          column.cards.map((card, index) => /* @__PURE__ */ jsx(
+            Card,
+            {
+              card,
+              held: held?.cardId === card.id,
+              marker: holding && held?.at.index === index,
+              onKeyDown: onCardKeyDown,
+              handle,
+              labels
+            },
+            card.id
+          )),
+          holding && held.at.index >= column.cards.length ? /* @__PURE__ */ jsx("li", { className: "cb-board__marker", "aria-hidden": true }) : null
+        ] }) }),
+        column.cards.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cb-board__empty", children: column.empty ?? null }) : null,
+        column.accepts === false && column.refusal ? /* @__PURE__ */ jsx("p", { className: "cb-board__refusal", children: column.refusal }) : null,
+        load.over && typeof column.limit === "number" ? /* @__PURE__ */ jsx("p", { className: "cb-board__over", children: labels.over(load.count, column.limit) }) : null
+      ]
+    }
+  );
+}
+function Card({
+  card,
+  held,
+  marker,
+  onKeyDown,
+  handle,
+  labels
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: card.id,
+    disabled: card.disabled
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    marker ? /* @__PURE__ */ jsx("li", { className: "cb-board__marker", "aria-hidden": true }) : null,
+    /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref: setNodeRef,
+        style: { transform: CSS.Transform.toString(transform), transition },
+        className: "cb-board__card",
+        "data-dragging": isDragging ? "" : void 0,
+        "data-held": held ? "" : void 0,
+        "data-disabled": card.disabled ? "" : void 0,
+        "data-handle": handle ? "" : void 0,
+        ...handle ? {} : {
+          ...attributes,
+          ...card.disabled ? {} : listeners,
+          tabIndex: 0,
+          "aria-roledescription": "draggable card",
+          "aria-disabled": card.disabled || void 0,
+          onKeyDown: (event) => onKeyDown(event, card.id)
+        },
+        children: [
+          handle ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "cb-board__handle",
+              ...attributes,
+              ...card.disabled ? {} : listeners,
+              "aria-label": labels.move(card.label ?? (typeof card.title === "string" ? card.title : card.id)),
+              "aria-roledescription": "drag handle",
+              "aria-disabled": card.disabled || void 0,
+              disabled: card.disabled,
+              onKeyDown: (event) => onKeyDown(event, card.id),
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u283F" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "cb-board__title", children: card.title }),
+          card.meta ? /* @__PURE__ */ jsx("div", { className: "cb-board__meta", children: card.meta }) : null
+        ]
+      }
+    )
+  ] });
+}
+function useNarrow(query) {
+  const [narrow, setNarrow] = React.useState(false);
+  React.useEffect(() => {
+    if (!query || typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const read = () => setNarrow(mql.matches);
+    read();
+    mql.addEventListener("change", read);
+    return () => mql.removeEventListener("change", read);
+  }, [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",
@@ -1980,4 +2807,4 @@ function DiagramEditorRoot(props) {
 }
 var DiagramEditor = Object.assign(DiagramEditorRoot, { Skeleton: DiagramSkeleton });
 
-export { 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 };