@manta-eu/react 0.7.0 → 0.8.1

package/src/components/chart/ForecastEventCard.tsx

@@ -0,0 +1,163 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { ArrowUpRight } from "lucide-react";
+import type { FocusEvent, KeyboardEvent, ReactNode } from "react";
+import type { ForecastEvent } from "./forecast";
+import { PopoverArrow, PopoverContent } from "#components/popover/index";
+import { cn } from "#style";
+
+const eventLabels: Record<ForecastEvent["status"], string> = {
+  applied: "Applied",
+  waiting: "Waiting for your approval",
+};
+
+export function eventLabel(event: ForecastEvent): string {
+  return event.label ?? eventLabels[event.status];
+}
+
+type ForecastEventDotProps = {
+  event: ForecastEvent;
+  color: string;
+  cx?: number;
+  cy?: number;
+  active: boolean;
+  cardId: string;
+  onSelect?: (event: ForecastEvent) => void;
+  onShow: (cx: number, cy: number) => void;
+  onLeave: () => void;
+  onBlur: (next: EventTarget | null) => void;
+};
+
+/** A dot on a metric's line. With `onSelect` it acts on click or Enter; otherwise an `href` makes it a plain link. */
+export function ForecastEventDot(props: ForecastEventDotProps) {
+  const { event, color, cx, cy, active, cardId, onSelect, onShow, onLeave, onBlur } = props;
+  if (cx === undefined || cy === undefined) {
+    return null;
+  }
+  const label = `${eventLabel(event)}: ${event.title}`;
+  const waiting = event.status === "waiting";
+  const circles = (
+    <>
+      <circle cx={cx} cy={cy} r={14} fill="transparent" />
+      <circle
+        cx={cx}
+        cy={cy}
+        r={10}
+        fill={color}
+        className={cn(
+          "opacity-0 transition-opacity group-hover/event:opacity-20 group-focus-visible/event:opacity-35",
+          active && "opacity-20",
+        )}
+      />
+      <circle
+        cx={cx}
+        cy={cy}
+        r={active ? 6.5 : 5}
+        fill={waiting ? "var(--color-card)" : color}
+        stroke={waiting ? color : "var(--color-card)"}
+        strokeWidth={2}
+      />
+    </>
+  );
+  const shared = {
+    "aria-label": label,
+    "aria-describedby": active ? cardId : undefined,
+    className: "group/event cursor-pointer outline-none",
+    onMouseEnter: () => onShow(cx, cy),
+    onMouseLeave: onLeave,
+    onFocus: () => onShow(cx, cy),
+    onBlur: (focusEvent: FocusEvent) => onBlur(focusEvent.relatedTarget),
+  };
+
+  if (onSelect === undefined && isPresent(event.href)) {
+    return (
+      <a href={event.href} {...shared}>
+        {circles}
+      </a>
+    );
+  }
+
+  if (onSelect === undefined) {
+    return (
+      <g role="img" tabIndex={0} {...shared} className="group/event outline-none">
+        {circles}
+      </g>
+    );
+  }
+
+  function handleKeyDown(keyEvent: KeyboardEvent<SVGGElement>) {
+    if (keyEvent.key === "Enter" || keyEvent.key === " ") {
+      keyEvent.preventDefault();
+      onSelect?.(event);
+    }
+  }
+
+  return (
+    <g role="button" tabIndex={0} {...shared} onClick={() => onSelect(event)} onKeyDown={handleKeyDown}>
+      {circles}
+    </g>
+  );
+}
+
+type ForecastEventCardProps = {
+  event: ForecastEvent;
+  id: string;
+  onSelect?: (event: ForecastEvent) => void;
+  onEnter: () => void;
+  onLeave: () => void;
+  onBlur: (next: EventTarget | null) => void;
+};
+
+/** The dark card over a dot: its label, title, value and, with an `href`, an "Open plan" link. */
+export function ForecastEventCard(props: ForecastEventCardProps) {
+  const { event, id, onSelect, onEnter, onLeave, onBlur } = props;
+  const link: ReactNode = isPresent(event.href) ? (
+    <a
+      href={event.href}
+      onClick={(clickEvent) => {
+        if (onSelect) {
+          clickEvent.preventDefault();
+          onSelect(event);
+        }
+      }}
+      className="mt-1 inline-flex items-center gap-1 self-start typography-small underline underline-offset-2"
+    >
+      {event.linkLabel ?? "Open plan"}
+      <ArrowUpRight className="size-3.5" aria-hidden="true" />
+    </a>
+  ) : null;
+  return (
+    <PopoverContent
+      id={id}
+      role={isPresent(event.href) ? undefined : "tooltip"}
+      side="top"
+      sideOffset={12}
+      collisionPadding={8}
+      onOpenAutoFocus={(focusEvent) => focusEvent.preventDefault()}
+      onCloseAutoFocus={(focusEvent) => focusEvent.preventDefault()}
+      className={cn(
+        "flex w-max min-w-50 max-w-65 flex-col gap-1 rounded-md-v4 border-0 px-3.5 pt-2.5 pb-3",
+        "bg-inverse text-inverse-foreground shadow-xl ring-1 ring-inverse-foreground/10",
+        !isPresent(event.href) && "pointer-events-none",
+      )}
+      onMouseEnter={onEnter}
+      onMouseLeave={onLeave}
+      onBlur={(focusEvent) => onBlur(focusEvent.relatedTarget)}
+    >
+      <span className="typography-tiny opacity-70">{eventLabel(event)}</span>
+      <strong className="typography-body-medium">{event.title}</strong>
+      {isPresent(event.value) ? (
+        <span
+          className="typography-small-semibold tabular-nums"
+          style={{ color: "color-mix(in srgb, var(--color-accent-foreground) 55%, var(--color-inverse-foreground))" }}
+        >
+          {event.value}
+          {isPresent(event.valueNote) ? (
+            <small className="ml-1 typography-tiny opacity-70">{event.valueNote}</small>
+          ) : null}
+        </span>
+      ) : null}
+      {link}
+      <PopoverArrow className="fill-inverse" width={12} height={6} />
+    </PopoverContent>
+  );
+}

package/src/components/chart/ForecastHoverCard.tsx

@@ -0,0 +1,73 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { plansAt, projectedKey, signedChange, type ForecastPlanShare } from "./forecast";
+import { cn } from "#style";
+
+export type ForecastHoverMetric = { key: string; label: string; withoutKey?: string; lowerIsBetter: boolean };
+
+type ForecastHoverCardProps = {
+  metric: ForecastHoverMetric | undefined;
+  formatDetail: (value: number) => string;
+  changeLabel: string;
+  projectedLabel: string;
+  planShares: readonly ForecastPlanShare[];
+  active?: boolean;
+  label?: string | number;
+  payload?: { payload?: Record<string, unknown> }[];
+};
+
+/** The card for the line under the pointer: its figure and, when projected, the gap and the plans behind it. */
+export function ForecastHoverCard(props: ForecastHoverCardProps) {
+  const { metric, formatDetail, changeLabel, projectedLabel, planShares, active, label, payload } = props;
+  const row = payload?.[0]?.payload;
+  const value = metric === undefined ? undefined : row?.[metric.key];
+  if (active !== true || row === undefined || metric === undefined || typeof value !== "number") {
+    return null;
+  }
+  const projected = row[projectedKey] === true;
+  const without = isPresent(metric.withoutKey) ? row[metric.withoutKey] : undefined;
+  const x = row.x;
+  function helps(change: number) {
+    return metric?.lowerIsBetter === true ? change <= 0 : change >= 0;
+  }
+  const plans =
+    projected && (typeof x === "string" || typeof x === "number") ? plansAt(planShares, x, metric.key).slice(0, 2) : [];
+  return (
+    <div className="min-w-50 max-w-75 rounded-md-v4 border border-default-border bg-card px-3 py-2.5 text-default-foreground shadow-xl">
+      <p className="mb-1.5 typography-tiny text-muted-foreground">
+        {label}
+        {projected ? ` · ${projectedLabel}` : ""}
+      </p>
+      <p className="flex items-baseline justify-between gap-4 typography-small text-muted-foreground">
+        <span>{metric.label}</span>
+        <strong className="typography-body-semibold tabular-nums text-default-foreground">{formatDetail(value)}</strong>
+      </p>
+      {projected && typeof without === "number" ? (
+        <p
+          className={cn(
+            "typography-small-medium tabular-nums",
+            helps(value - without) ? "text-accent-foreground" : "text-muted-foreground",
+          )}
+        >
+          {signedChange(value, without, formatDetail)} {changeLabel}
+        </p>
+      ) : null}
+      {isPresent(plans) ? (
+        <div className="mt-2 grid gap-0.5 border-t border-default-border pt-2">
+          {plans.map((plan) => (
+            <p key={plan.label} className="flex items-baseline justify-between gap-3 typography-tiny">
+              <span className="min-w-0">{plan.label}</span>
+              <strong
+                className={cn(
+                  "flex-none typography-tiny-semibold tabular-nums",
+                  helps(plan.value) ? "text-accent-foreground" : "text-muted-foreground",
+                )}
+              >
+                {signedChange(plan.value, 0, formatDetail)}
+              </strong>
+            </p>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/chart/ForecastLegend.tsx

@@ -0,0 +1,97 @@
+import { cn } from "#style";
+
+export type ForecastLegendItem = {
+  label: string;
+  color: string;
+  kind: "line" | "dotted-line" | "thin-line" | "fill" | "faint-fill";
+};
+
+type LegendSource = {
+  metrics: { label: string; color: string }[];
+  withoutLabels: string[];
+  /** The metrics with a `withoutPlans` line and the color their gain is shaded in. */
+  gains: { metric: string; color: string }[];
+  gainLabel: string;
+  betweenLabels: string[];
+  firstColor: string;
+  withoutColor: string;
+  hasProjection: boolean;
+  legendLabels?: { historic?: string; projected?: string };
+};
+
+/** Two metrics are named per line; a single metric is split into its historic and projected parts instead. */
+export function forecastLegendItems(source: LegendSource): ForecastLegendItem[] {
+  const {
+    metrics,
+    withoutLabels,
+    gains,
+    gainLabel,
+    betweenLabels,
+    firstColor,
+    withoutColor,
+    hasProjection,
+    legendLabels,
+  } = source;
+  const withoutItems = [...new Set(withoutLabels)].map(
+    (label): ForecastLegendItem => ({ label, color: withoutColor, kind: "thin-line" }),
+  );
+  const oneGainColor = new Set(gains.map((gain) => gain.color)).size === 1;
+  const gainItems = (oneGainColor ? gains.slice(0, 1) : gains).map(
+    (gain): ForecastLegendItem => ({
+      label: oneGainColor ? gainLabel : `${gainLabel} · ${gain.metric}`,
+      color: gain.color,
+      kind: "fill",
+    }),
+  );
+  const betweenItems = betweenLabels.map(
+    (label): ForecastLegendItem => ({ label, color: firstColor, kind: "faint-fill" }),
+  );
+  if (metrics.length > 1) {
+    return [
+      ...metrics.map((metric): ForecastLegendItem => ({ label: metric.label, color: metric.color, kind: "line" })),
+      ...betweenItems,
+      ...gainItems,
+      ...withoutItems,
+    ];
+  }
+  return [
+    { label: legendLabels?.historic ?? "Historic results", color: firstColor, kind: "line" },
+    ...(hasProjection
+      ? [{ label: legendLabels?.projected ?? "Projected results", color: firstColor, kind: "dotted-line" as const }]
+      : []),
+    ...withoutItems,
+    ...gainItems,
+    ...betweenItems,
+  ];
+}
+
+export function ForecastLegend(props: { items: ForecastLegendItem[] }) {
+  const { items } = props;
+  return (
+    <ul className="m-0 mb-3 flex list-none flex-wrap gap-x-6 gap-y-2 p-0 typography-small text-muted-foreground">
+      {items.map((item) => (
+        <li key={item.label} className="inline-flex items-center gap-2">
+          {item.kind === "fill" || item.kind === "faint-fill" ? (
+            <span
+              className="h-2.5 w-4 rounded-xs-v4"
+              style={{
+                background: `color-mix(in srgb, ${item.color} ${item.kind === "fill" ? 42 : 10}%, transparent)`,
+              }}
+            />
+          ) : (
+            <span
+              className={cn(
+                "w-5 rounded-sm",
+                item.kind === "line" && "border-t-[2.5px]",
+                item.kind === "dotted-line" && "border-t-[3px] border-dotted",
+                item.kind === "thin-line" && "border-t-2",
+              )}
+              style={{ borderColor: item.color }}
+            />
+          )}
+          {item.label}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/chart/forecast-model.ts

@@ -0,0 +1,130 @@
+import { isPresent } from "@manta-eu/lib/present";
+import type { ChartConfig } from "./chart";
+import { chartColorAt } from "./chart-colors";
+import { forecastDomain, partKey, splitAtToday, type ForecastPart, type ForecastRange } from "./forecast";
+import type { ForecastHoverMetric } from "./ForecastHoverCard";
+import { forecastLegendItems } from "./ForecastLegend";
+
+export type ForecastMetric = {
+  key: string;
+  label: string;
+  color?: string;
+  /** For costs: a drop with the plans shows as a gain in the hover card. */
+  lowerIsBetter?: boolean;
+  /** The same metric if the plans are not approved; the gap between the two is shaded as what the plans add. */
+  withoutPlans?: { key: string; label: string };
+};
+
+export type ForecastBetween = { from: string; to: string; label: string };
+
+export const forecastParts = ["past", "ahead"] as const;
+export const withoutColor = "color-mix(in srgb, var(--color-muted-foreground) 82%, var(--color-card))";
+const metricColors = [
+  "var(--color-accent-foreground)",
+  "color-mix(in srgb, var(--color-accent-foreground) 45%, var(--color-muted-foreground))",
+];
+
+export function metricColor(metric: ForecastMetric, index: number): string {
+  return metric.color ?? metricColors[index] ?? chartColorAt(index);
+}
+
+export function gainName(index: number): string {
+  return `gain-${index}`;
+}
+
+export function betweenName(index: number): string {
+  return `between-${index}`;
+}
+
+type ModelInput = {
+  data: Record<string, unknown>[];
+  today?: string | number;
+  metrics: ForecastMetric[];
+  between: ForecastBetween[];
+  goal?: { value: number };
+  gainLabel: string;
+  legendLabels?: { historic?: string; projected?: string };
+};
+
+/** Everything the chart draws, derived once from its props: split rows, axis, fades, legend and hover metrics. */
+export function buildForecastModel(input: ModelInput) {
+  const { data, today, metrics, between, goal, gainLabel, legendLabels } = input;
+  const overlay = metrics.length > 1;
+  const todayIndex = today === undefined ? -1 : data.findIndex((row) => row.x === today);
+  const withPlans = metrics.flatMap((metric, index) =>
+    isPresent(metric.withoutPlans) ? [{ metric, index, without: metric.withoutPlans }] : [],
+  );
+  const ranges: Record<string, ForecastRange> = {
+    ...Object.fromEntries(
+      withPlans.map((entry) => [gainName(entry.index), { from: entry.without.key, to: entry.metric.key }]),
+    ),
+    ...Object.fromEntries(between.map((range, index) => [betweenName(index), range])),
+  };
+  const lineKeys = [...metrics.map((metric) => metric.key), ...withPlans.map((entry) => entry.without.key)];
+  const emptyKeys = lineKeys.filter((key) => !data.some((row) => typeof row[key] === "number"));
+  const rows = splitAtToday(data, todayIndex, lineKeys, ranges);
+  const values = data.flatMap((row) => lineKeys.map((key) => row[key])).filter((value) => typeof value === "number");
+  const { domain, ticks } = forecastDomain(isPresent(goal) ? [...values, goal.value] : values);
+
+  function meanOf(key: string) {
+    const numbers = data.map((row) => row[key]).filter((value) => typeof value === "number");
+    return numbers.reduce((sum, value) => sum + value, 0) / Math.max(numbers.length, 1);
+  }
+  const lowestIndex = metrics.reduce(
+    (lowest, metric, index) => (meanOf(metric.key) < meanOf(metrics[lowest]?.key ?? "") ? index : lowest),
+    0,
+  );
+  const lowestMetric = metrics[lowestIndex];
+  const onlyWithout = withPlans[0]?.without;
+  function drawsIn(key: string, part: ForecastPart) {
+    return rows.filter((row) => typeof row[partKey(key, part)] === "number").length > 1;
+  }
+  const fadeKeys = forecastParts.flatMap((part) => {
+    const key = overlay
+      ? lowestMetric?.key
+      : onlyWithout && drawsIn(onlyWithout.key, part)
+        ? onlyWithout.key
+        : metrics[0]?.key;
+    return key === undefined ? [] : [{ part, key }];
+  });
+  const firstColor = metrics[0] ? metricColor(metrics[0], 0) : withoutColor;
+
+  return {
+    emptyKeys,
+    todayMissing: today !== undefined && todayIndex < 0 && isPresent(data),
+    overlay,
+    todayIndex,
+    withPlans,
+    rows,
+    domain,
+    ticks,
+    fadeKeys,
+    fadeColor: overlay && lowestMetric ? metricColor(lowestMetric, lowestIndex) : withoutColor,
+    firstColor,
+    config: Object.fromEntries(
+      [...metrics, ...withPlans.map((entry) => entry.without)].map((line) => [line.key, { label: line.label }]),
+    ) satisfies ChartConfig,
+    hoverMetrics: metrics.map(
+      (metric): ForecastHoverMetric => ({
+        key: metric.key,
+        label: metric.label,
+        lowerIsBetter: metric.lowerIsBetter === true,
+        ...(isPresent(metric.withoutPlans) ? { withoutKey: metric.withoutPlans.key } : {}),
+      }),
+    ),
+    legendItems: forecastLegendItems({
+      metrics: metrics.map((metric, index) => ({ label: metric.label, color: metricColor(metric, index) })),
+      withoutLabels: withPlans.map((entry) => entry.without.label),
+      gains: withPlans.map((entry) => ({
+        metric: entry.metric.label,
+        color: metricColor(entry.metric, entry.index),
+      })),
+      gainLabel,
+      betweenLabels: between.map((range) => range.label),
+      firstColor,
+      withoutColor,
+      hasProjection: todayIndex >= 0,
+      ...(legendLabels ? { legendLabels } : {}),
+    }),
+  };
+}

package/src/components/chart/forecast.ts

@@ -0,0 +1,144 @@
+import { isPresent } from "@manta-eu/lib/present";
+
+export type ForecastPart = "past" | "ahead";
+
+export type ForecastRange = { from: string; to: string };
+
+export function partKey(key: string, part: ForecastPart): string {
+  return `${key}~${part}`;
+}
+
+export function rangeKey(name: string, part: ForecastPart): string {
+  return `${name}~range~${part}`;
+}
+
+export const projectedKey = "~projected";
+
+function rangeOf(row: Record<string, unknown>, range: ForecastRange): [number, number] | null {
+  const from = row[range.from];
+  const to = row[range.to];
+  return typeof from === "number" && typeof to === "number" ? [Math.min(from, to), Math.max(from, to)] : null;
+}
+
+/** Splits each line and range at Today: the past part runs up to and including Today, the part ahead starts there. */
+export function splitAtToday(
+  rows: readonly Record<string, unknown>[],
+  todayIndex: number,
+  lineKeys: readonly string[],
+  ranges: Readonly<Record<string, ForecastRange>>,
+): Record<string, unknown>[] {
+  return rows.map((row, index) => {
+    const inPast = todayIndex < 0 || index <= todayIndex;
+    const ahead = todayIndex >= 0 && index >= todayIndex;
+    const split: Record<string, unknown> = { ...row, [projectedKey]: todayIndex >= 0 && index > todayIndex };
+    lineKeys.forEach((key) => {
+      split[partKey(key, "past")] = inPast ? (row[key] ?? null) : null;
+      split[partKey(key, "ahead")] = ahead ? (row[key] ?? null) : null;
+    });
+    Object.entries(ranges).forEach(([name, range]) => {
+      const value = rangeOf(row, range);
+      split[rangeKey(name, "past")] = inPast ? value : null;
+      split[rangeKey(name, "ahead")] = ahead ? value : null;
+    });
+    return split;
+  });
+}
+
+function niceStep(rough: number): number {
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const step = [1, 2, 2.5, 5, 10].find((multiple) => multiple * magnitude >= rough) ?? 10;
+  return step * magnitude;
+}
+
+/** A y range that hugs the values with a little air and round ticks, never dipping below zero for positive data. */
+export function forecastDomain(values: number[], tickCount = 5): { domain: [number, number]; ticks: number[] } {
+  if (!isPresent(values)) {
+    return { domain: [0, 1], ticks: [0, 1] };
+  }
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const spread = max - min || Math.abs(max) || 1;
+  const step = niceStep((spread * 1.2) / (tickCount - 1));
+  const low = Math.floor((min - spread * 0.1) / step) * step;
+  const high = Math.ceil((max + spread * 0.1) / step) * step;
+  const domainLow = min >= 0 ? Math.max(0, low) : low;
+  const ticks = Array.from({ length: Math.round((high - domainLow) / step) + 1 }, (_, index) =>
+    Number((domainLow + index * step).toFixed(10)),
+  );
+  return { domain: [domainLow, high], ticks };
+}
+
+const compact = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+
+export function formatCompact(value: number): string {
+  return compact.format(value);
+}
+
+const whole = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+
+export function formatWhole(value: number): string {
+  return whole.format(value);
+}
+
+/** "+$2,664 with the plans": the signed gap between a metric and its line without plans. */
+export function signedChange(value: number, without: number, format: (value: number) => string): string {
+  const change = value - without;
+  return `${change < 0 ? "-" : "+"}${format(Math.abs(change))}`;
+}
+
+/** The margin and x-axis height the chart passes to recharts; the plot geometry below is derived from them. */
+export const forecastMargin = { top: 24, right: 12, left: 8, bottom: 0 };
+export const forecastXAxisHeight = 30;
+
+/** Where the plot area sits inside a chart of this height, so a pointer's y maps back to a value. */
+export function plotGeometry(chartHeight: number): { top: number; height: number } {
+  return {
+    top: forecastMargin.top,
+    height: chartHeight - forecastMargin.top - forecastMargin.bottom - forecastXAxisHeight,
+  };
+}
+
+/** The value at a pointer's height in the plot, with `domain[0]` at its bottom and `domain[1]` at its top. */
+export function valueAtY(y: number, plotTop: number, plotHeight: number, domain: [number, number]): number {
+  return domain[1] - ((y - plotTop) / plotHeight) * (domain[1] - domain[0]);
+}
+
+/** The metric whose line passes closest to a value at one point: the hover card follows that line. */
+export function nearestMetric(
+  row: Record<string, unknown>,
+  keys: readonly string[],
+  value: number,
+): string | undefined {
+  const distances = keys.flatMap((key) => {
+    const metricValue = row[key];
+    return typeof metricValue === "number" ? [{ key, distance: Math.abs(metricValue - value) }] : [];
+  });
+  return distances.reduce<{ key: string; distance: number } | undefined>(
+    (nearest, candidate) => (nearest === undefined || candidate.distance < nearest.distance ? candidate : nearest),
+    undefined,
+  )?.key;
+}
+
+/** An action already applied (a filled dot) or a plan waiting for approval (a hollow dot), on a metric's line. */
+export type ForecastEvent = {
+  x: string | number;
+  metric: string;
+  status: "applied" | "waiting";
+  title: string;
+  /** The small line above the title; defaults to "Applied" or "Waiting for your approval". */
+  label?: string;
+  value?: string;
+  valueNote?: string;
+  /** Rendered as a plain link in the card (and on the dot when the chart has no `onEventSelect`). */
+  href?: string;
+  linkLabel?: string;
+};
+
+export type ForecastPointPlan = { label: string; value: number };
+
+/** The plans behind one metric's projected value at one point, as the chart's data carries them. */
+export type ForecastPlanShare = { x: string | number; metric: string; plans: ForecastPointPlan[] };
+
+export function plansAt(shares: readonly ForecastPlanShare[], x: string | number, metric: string): ForecastPointPlan[] {
+  return shares.find((share) => share.x === x && share.metric === metric)?.plans ?? [];
+}

package/src/components/chart/index.tsx

@@ -19,6 +19,9 @@ export { ChartFrame, type ChartFrameProps } from "./ChartFrame";
 export { AreaChart, type AreaChartProps } from "./AreaChart";
 export { BarChart, type BarChartProps } from "./BarChart";
 export { ComposedChart, type ComposedChartProps } from "./ComposedChart";
+export { ForecastChart, type ForecastChartProps } from "./ForecastChart";
+export type { ForecastBetween, ForecastMetric } from "./forecast-model";
+export type { ForecastEvent, ForecastPlanShare, ForecastPointPlan } from "./forecast";
 export { LineChart, type LineChartProps } from "./LineChart";
 export { PieChart, type PieChartProps } from "./PieChart";
 export { RadarChart, type RadarChartProps } from "./RadarChart";

package/src/components/input/input-field.tsx

@@ -170,7 +170,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputArgs>(function Inpu
       inputRef.current.value = next;
       setInternalCount(next.length);
       onChange?.({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);
-      // eslint-disable-next-line no-useless-catch
+      // oxlint-disable-next-line no-useless-catch
     } catch (error) {
       throw error;
     } finally {

package/src/components/input/textarea.tsx

@@ -178,7 +178,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaArgs>(func
       textareaRef.current.value = next;
       setInternalCount(next.length);
       onChange?.({ target: textareaRef.current } as ChangeEvent<HTMLTextAreaElement>);
-      // eslint-disable-next-line no-useless-catch
+      // oxlint-disable-next-line no-useless-catch
     } catch (error) {
       throw error;
     } finally {

package/src/components/popover/index.tsx

@@ -8,6 +8,7 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverClose = PopoverPrimitive.Close;
+const PopoverArrow = PopoverPrimitive.Arrow;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -81,4 +82,4 @@ const PopoverItem = React.forwardRef<HTMLButtonElement, PopoverItemProps>((props
 });
 PopoverItem.displayName = "PopoverItem";
 
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverItem, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverItem, PopoverTrigger };

package/src/components/table/index.tsx

@@ -120,7 +120,6 @@ export enum SortingHandlerPlacement {
 }
 
 declare module "@tanstack/react-table" {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData, TValue> {
     /**
      * Placement of the sorting handler relative to the cell header

package/src/globals.css

@@ -381,6 +381,8 @@
   --color-rank-3: #ffe4d6;
 
   --color-default-foreground: var(--color-neutral-900);
+  --color-inverse: var(--color-neutral-900);
+  --color-inverse-foreground: #ffffff;
   --color-body-foreground: rgba(23, 23, 23, 0.85);
   --color-muted-foreground: var(--color-neutral-500);
   --color-disabled-foreground: var(--color-neutral-400);