@moderneinc/react-charts 1.5.2-next.f2fa0c → 1.5.2-next.f8b5a8

package/dist/components/campaign-timeline/campaign-timeline.component.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { CampaignTimelineProps } from './campaign-timeline.types';
+export declare const CampaignTimeline: FunctionComponent<CampaignTimelineProps>;

package/dist/components/campaign-timeline/campaign-timeline.constants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared between the hook that MEASURES and the components that RENDER -
+ * duplicating any of these lets collision detection drift from the painted text.
+ */
+/** Used where the parent reports no width (SSR, jsdom, collapsed container). */
+export declare const FALLBACK_WIDTH = 900;
+/** Spacing so the plot and the grip's rounded end don't sit flush to the edge. */
+export declare const RIGHT_INSET = 10;
+export declare const TICK_SPACING = 90;
+/** How close, in pixels, the playhead must be to an event to snap to it. */
+export declare const SNAP_RADIUS = 8;
+export declare const TICK_FONT_SIZE = 10.5;
+export declare const MIN_LABEL_GAP = 12;

package/dist/components/campaign-timeline/campaign-timeline.types.d.ts

@@ -0,0 +1,156 @@
+/**
+ * Three bands on one shared x-axis - burn-down, axis, row-packed events -
+ * scrubbed by a single playhead. Event names are the caller's vocabulary.
+ */
+/** A discrete run/action on the event track. */
+export type CampaignEvent = {
+    /** Stable identity, used for packing, selection, and React keys. */
+    id: string;
+    /** Caller-supplied display name. Arbitrary - drives the flag's label. */
+    name: string;
+    /** Start of the event (ms since epoch). Positions the flag's pole. */
+    start: number;
+    /**
+     * NOTE: never drawn. Flags anchor at `start` and are sized to their label;
+     * `end` only widens the domain, adds a snap target, and marks "still
+     * running" when absent. `null` is accepted so JSON passes through unstripped.
+     */
+    end?: number | null;
+    /**
+     * Contrast-corrected against the surface, so one palette works in both
+     * themes. Burn-down series colors are not - they carry no text.
+     */
+    color?: string;
+    /** Passed straight through to `onEventClick`. The component never reads it. */
+    meta?: Record<string, unknown>;
+};
+/** One stacked band beneath the burn-down line. */
+export type BurndownSeries = {
+    /** Key into each point's `values` map. */
+    key: string;
+    /** Human-readable name for this band. The component never reads it - it is
+     * kept alongside the data so callers building their own legend don't need a
+     * parallel key-to-label map. */
+    label: string;
+    /** Fill color for this band. Drawn as a low-opacity area. */
+    color: string;
+};
+/**
+ * A sampled check point: per-series counts still in flight. The burn-down line
+ * is the SUM of these, so bands always cap exactly at the line.
+ */
+export type BurndownPoint = {
+    timestamp: number;
+    values: Record<string, number>;
+};
+export type BurndownConfig = {
+    /** The fixed population the campaign started with - the dashed ceiling. */
+    total: number;
+    /** Stacked bottom-up in array order. */
+    series: BurndownSeries[];
+    /**
+     * Sorted defensively. The line steps rather than interpolating: a gap
+     * between samples means "no data", not "a smooth decline".
+     */
+    points: BurndownPoint[];
+};
+/** Emitted when the playhead moves. */
+export type PlayheadChangeReason = 'drag' | 'keyboard' | 'click';
+/** Resolved palette handed to every band, so all three draw from one source. */
+export type CampaignTimelineColors = {
+    surface: string;
+    /**
+     * WARNING: the MUI palette value, not the painted `surface`. Overriding
+     * `--rc-campaign-surface` to another lightness invalidates contrast math.
+     */
+    surfaceValue: string;
+    isDark: boolean;
+    track: string;
+    border: string;
+    grid: string;
+    muted: string;
+    text: string;
+    accent: string;
+    accentContrast: string;
+};
+/** A tick position plus whether it earned a label. */
+export type PlacedTick = {
+    timestamp: number;
+    x: number;
+    label: string;
+    /**
+     * False on edge overflow, collision, or repetition; the tick still renders as
+     * a minor mark. Axis and gridlines both read this so they cannot disagree.
+     */
+    showLabel: boolean;
+};
+export type CampaignTimelineProps = {
+    /** Events to lay out on the packed track. Order is irrelevant. */
+    events: CampaignEvent[];
+    /** Burn-down series and check points. */
+    burndown: BurndownConfig;
+    /** Controlled playhead position (ms since epoch). */
+    time?: number;
+    /** Initial playhead position when uncontrolled. Defaults to the domain end. */
+    defaultTime?: number;
+    /** Called as the playhead moves. */
+    onTimeChange?: (time: number, reason: PlayheadChangeReason) => void;
+    /**
+     * Snap the playhead to nearby event starts/ends on click and drag.
+     * Arrow-key stepping always moves event-to-event regardless of this flag.
+     * @default true
+     */
+    snapToEvents?: boolean;
+    /**
+     * How far data is known - typically the last status refresh. The line stops
+     * here and the rest is hatched: unrefreshed, not empty. Defaults to no hatch.
+     */
+    now?: number;
+    /**
+     * Extends the x-domain to at least this time, so the chart can show
+     * wall-clock time past the last refresh. Never shrinks the domain: a value
+     * earlier than the last data point has no effect.
+     */
+    horizonEnd?: number;
+    /** Ids of events drawn in the selected state. */
+    selectedEventIds?: string[];
+    /** Called when an event flag is clicked. */
+    onEventClick?: (event: CampaignEvent) => void;
+    /** Called when an event flag is hovered (null on leave). */
+    onEventHover?: (event: CampaignEvent | null) => void;
+    /**
+     * Width in pixels. Omit to fill the parent element and track it on resize.
+     * Falls back to 900 where the parent reports no width (SSR, jsdom, or a
+     * collapsed container).
+     */
+    width?: number;
+    /** Height of the burn-down band. @default 132 */
+    burndownHeight?: number;
+    /** Height of the shared axis strip. @default 26 */
+    axisHeight?: number;
+    /** Height of each packed event row. @default 26 */
+    laneHeight?: number;
+    /**
+     * Formats axis tick labels. The default picks ONE resolution for the whole
+     * axis from the tick spacing d3 chose: day-and-coarser renders "Aug 4",
+     * anything finer adds a time.
+     */
+    formatDate?: (timestamp: number) => string;
+    /** Formats the playhead grip label. */
+    formatPlayheadLabel?: (timestamp: number) => string;
+    /** Formats the `total` and `remaining` annotations. */
+    formatValue?: (value: number) => string;
+    /** Label beside the dashed total line. @default 'total' */
+    totalLabel?: string;
+    /** Label on the callout tracking the line's end. @default 'in flight' */
+    remainingLabel?: string;
+    /** Suffix on flags whose event has no end. @default 'running' */
+    runningLabel?: string;
+    /** Text shown inside the hatched region. Hidden when the region is too
+     * narrow to hold it. */
+    hatchLabel?: string;
+    /** Fallback flag color. Defaults to the theme's primary color. */
+    defaultEventColor?: string;
+    /** Accessible name for the playhead slider. @default 'Timeline position' */
+    playheadAriaLabel?: string;
+};

package/dist/components/campaign-timeline/components/axis-band.component.d.ts

@@ -0,0 +1,11 @@
+import { CampaignTimelineColors, PlacedTick } from '../campaign-timeline.types';
+type AxisBandProps = {
+    ticks: PlacedTick[];
+    plotWidth: number;
+    height: number;
+    colors: CampaignTimelineColors;
+    fontFamily: string;
+};
+/** Memoized: ticks are stable while the playhead moves. */
+export declare const AxisBand: import('react').MemoExoticComponent<({ ticks, plotWidth, height, colors, fontFamily }: AxisBandProps) => import("react").JSX.Element>;
+export {};

package/dist/components/campaign-timeline/components/burndown-band.component.d.ts

@@ -0,0 +1,18 @@
+import { BurndownPoint, BurndownSeries, CampaignTimelineColors } from '../campaign-timeline.types';
+type BurndownBandProps = {
+    points: BurndownPoint[];
+    series: BurndownSeries[];
+    total: number;
+    height: number;
+    plotWidth: number;
+    scaleX: (timestamp: number) => number;
+    /** Data is only known up to here; the line stops rather than guessing. */
+    now: number;
+    colors: CampaignTimelineColors;
+    formatValue: (value: number) => string;
+    totalLabel: string;
+    remainingLabel: string;
+    fontFamily: string;
+};
+export declare const BurndownBand: import('react').MemoExoticComponent<({ points, series, total, height, plotWidth, scaleX, now, colors, formatValue, totalLabel, remainingLabel, fontFamily }: BurndownBandProps) => import("react").JSX.Element>;
+export {};

package/dist/components/campaign-timeline/components/event-lane-band.component.d.ts

@@ -0,0 +1,16 @@
+import { CampaignEvent, CampaignTimelineColors } from '../campaign-timeline.types';
+import { FlagLayout } from '../utils/layout-event-flags';
+type EventLaneBandProps = {
+    flags: FlagLayout[];
+    rowCount: number;
+    laneHeight: number;
+    plotWidth: number;
+    defaultColor: string;
+    selectedIds: Set<string>;
+    colors: CampaignTimelineColors;
+    fontFamily: string;
+    onEventClick?: (event: CampaignEvent) => void;
+    onEventHover?: (event: CampaignEvent | null) => void;
+};
+export declare const EventLaneBand: import('react').MemoExoticComponent<({ flags, rowCount, laneHeight, plotWidth, defaultColor, selectedIds, colors, fontFamily, onEventClick, onEventHover }: EventLaneBandProps) => import("react").JSX.Element>;
+export {};

package/dist/components/campaign-timeline/components/playhead.component.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+type PlayheadProps = {
+    x: number;
+    totalHeight: number;
+    /** Vertical center of the axis strip, where the grip sits. */
+    gripCenterY: number;
+    label: string;
+    color: string;
+    contrastColor: string;
+    fontFamily: string;
+    plotWidth: number;
+};
+export declare const Playhead: FunctionComponent<PlayheadProps>;
+export {};

package/dist/components/campaign-timeline/hooks/use-campaign-timeline.hook.d.ts

@@ -0,0 +1,30 @@
+import { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from 'react';
+import { BurndownConfig, CampaignEvent, PlacedTick, PlayheadChangeReason } from '../campaign-timeline.types';
+type UseCampaignTimelineProps = {
+    events: CampaignEvent[];
+    burndown: BurndownConfig;
+    time?: number;
+    defaultTime?: number;
+    onTimeChange?: (time: number, reason: PlayheadChangeReason) => void;
+    snapToEvents: boolean;
+    now?: number;
+    horizonEnd?: number;
+    width?: number;
+    fontFamily: string;
+    formatDate?: (timestamp: number) => string;
+};
+export declare const useCampaignTimeline: ({ events, burndown, time, defaultTime, onTimeChange, snapToEvents, now, horizonEnd, width: widthProp, fontFamily, formatDate }: UseCampaignTimelineProps) => {
+    containerRef: import('react').RefObject<HTMLDivElement>;
+    width: number;
+    plotWidth: number;
+    domain: [number, number];
+    placedTicks: PlacedTick[];
+    scaleX: (timestamp: number) => number;
+    currentTime: number;
+    isScrubbing: boolean;
+    handlePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    handlePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    handlePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    handleKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;
+};
+export {};

package/dist/components/campaign-timeline/utils/burndown-paths.d.ts

@@ -0,0 +1,29 @@
+import { BurndownPoint, BurndownSeries } from '../campaign-timeline.types';
+type Scale = (value: number) => number;
+/** Sum of every series at a point - the count still in flight. */
+export declare const sumSeries: (point: BurndownPoint, series: BurndownSeries[]) => number;
+export declare const remainingByPoint: (points: BurndownPoint[], series: BurndownSeries[]) => number[];
+/**
+ * Points at or before `now`, ascending, with anything non-finite dropped.
+ *
+ * WARNING: filtering has to happen HERE rather than only in
+ * `buildBurndownGeometry`, because the caller derives the y-domain from these
+ * points - a single NaN value would make `scaleLinear` return NaN for every
+ * input and blank the entire band.
+ */
+export declare const knownPoints: (points: BurndownPoint[], now: number, series: BurndownSeries[]) => BurndownPoint[];
+type BurndownBandPath = {
+    key: string;
+    color: string;
+    d: string;
+};
+type BurndownGeometry = {
+    linePath: string;
+    bands: BurndownBandPath[];
+};
+/**
+ * Bands come from the stack; the line is those values re-summed. They coincide
+ * only because the default stack offset puts the top of the stack at the sum.
+ */
+export declare const buildBurndownGeometry: (points: BurndownPoint[], series: BurndownSeries[], xScale: Scale, yScale: Scale) => BurndownGeometry;
+export {};

package/dist/components/campaign-timeline/utils/layout-event-flags.d.ts

@@ -0,0 +1,43 @@
+import { CampaignEvent } from '../campaign-timeline.types';
+export declare const POLE_WIDTH = 2.5;
+export declare const BANNER_HEIGHT = 20;
+export declare const FLAG_FONT_SIZE = 11;
+export declare const FLAG_FONT_WEIGHT = 600;
+export type FlagLayout = {
+    event: CampaignEvent;
+    /** Pixel x of the event's start - where the pole sits. */
+    poleX: number;
+    width: number;
+    row: number;
+    label: string;
+    /** True when the label was moved left of the pole to stay on canvas. */
+    labelOutside: boolean;
+    labelX: number;
+    /** Chip behind an outside label. Zero width when the label is inline. */
+    chipX: number;
+    chipWidth: number;
+    /** The flag's full rendered extent - its packing footprint. */
+    x0: number;
+    x1: number;
+};
+type LayoutEventFlagsOptions = {
+    events: CampaignEvent[];
+    xScale: (timestamp: number) => number;
+    plotWidth: number;
+    fontFamily: string;
+    runningLabel: string;
+    gap?: number;
+};
+/** An event with no end is still running - it has no known conclusion. */
+export declare const isRunning: (event: CampaignEvent) => boolean;
+/**
+ * A flag whose label was pushed outside contributes that label to its
+ * footprint, or a neighbour would pack into space the label already occupies.
+ */
+export declare const layoutEventFlags: ({ events, xScale, plotWidth, fontFamily, runningLabel, gap }: LayoutEventFlagsOptions) => {
+    flags: FlagLayout[];
+    rowCount: number;
+};
+/** Rectangle whose left edge tapers to a point, so the eye lands on the start. */
+export declare const buildFlagBannerPath: (x: number, y: number, width: number, height: number) => string;
+export {};

package/dist/components/campaign-timeline/utils/measure-text.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Text measurement for row packing: flags are packed by rendered extent, so the
+ * packer needs label widths before anything reaches the DOM.
+ */
+/**
+ * Falls back to a character-count estimate where canvas metrics are
+ * unavailable (SSR, jsdom without `canvas`), so flags still measure differently.
+ */
+export declare const measureText: (text: string, fontSize: number, fontFamily: string, fontWeight?: number | string) => number;

package/dist/components/campaign-timeline/utils/pack-event-rows.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Greedy first-fit row packing, in PIXEL space rather than time space: two
+ * events minutes apart can still have labels that overlap on screen.
+ */
+/** A flag's horizontal footprint, in pixels. */
+type PackableItem = {
+    /** Its pole, or its label chip when the label was pushed outside. */
+    x0: number;
+    x1: number;
+};
+type PackedRows = {
+    /** Row index per input position, 0 = topmost. */
+    rows: number[];
+    rowCount: number;
+};
+/**
+ * Rows come back indexed by input POSITION, not keyed by event id, so duplicate
+ * ids in caller data cannot collapse two flags onto one row.
+ */
+export declare const packEventRows: (items: PackableItem[], gap?: number) => PackedRows;
+export {};

package/dist/components/morph-chart/hooks/use-morph-chart.hook.d.ts

@@ -1,3 +1,4 @@
+import { PaletteMode } from '@mui/material/styles';
 import { RefObject } from 'react';
 import { HoveredData, MorphChartCategory, MorphChartDataPoint, MorphMode } from '../morph-chart.types';
 type UseMorphChartProps = {
@@ -5,6 +6,7 @@ type UseMorphChartProps = {
     data: MorphChartDataPoint[];
     categories: MorphChartCategory[];
     mode: 'parliament' | 'stacked-area';
+    paletteMode?: PaletteMode;
     width: number;
     height: number;
     margin: {
@@ -58,7 +60,7 @@ type UseMorphChartProps = {
         y: number;
     } | null) => void;
 };
-export declare const useMorphChart: ({ containerRef, data, categories, mode, width, height, margin, timeRange, showGrid, showAxes, axisLabelColor, axisLabelSize, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, minAllowedTime: minAllowedTimeConstraint, maxAllowedTime: maxAllowedTimeConstraint, showScaleIndicator, reposPerSeat, timelineEvents, showTimeline, timelineHeight, timelineOffset, brushColor, showCrosshair, onCrosshairMove }: UseMorphChartProps) => {
+export declare const useMorphChart: ({ containerRef, data, categories, mode, paletteMode, width, height, margin, timeRange, showGrid, showAxes, axisLabelColor, axisLabelSize, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, minAllowedTime: minAllowedTimeConstraint, maxAllowedTime: maxAllowedTimeConstraint, showScaleIndicator, reposPerSeat, timelineEvents, showTimeline, timelineHeight, timelineOffset, brushColor, showCrosshair, onCrosshairMove }: UseMorphChartProps) => {
     isMorphing: boolean;
     currentMode: MorphMode;
     hoveredCategory: string | null;

package/dist/components/morph-chart/morph-chart.types.d.ts

@@ -1,3 +1,4 @@
+import { PaletteMode } from '@mui/material/styles';
 import { D3StackedAreaCategory } from '../d3-stacked-area-chart/d3-stacked-area-chart.types';
 export type MorphMode = 'area' | 'parliament' | 'morphing';
 export type MorphChartDataPoint = {
@@ -25,6 +26,8 @@ export type MorphChartProps = {
     categories: MorphChartCategory[];
     /** Current visualization mode */
     mode: 'parliament' | 'stacked-area';
+    /** Light/dark palette mode, affects seat border styling */
+    paletteMode?: PaletteMode;
     /** Morph progress: 0 = fully area, 1 = fully parliament */
     morphProgress?: number;
     /** Chart dimensions */

package/dist/components/morph-chart/utils/parliament-renderer.d.ts

@@ -1,3 +1,4 @@
+import { PaletteMode } from '@mui/material/styles';
 import { Selection } from 'd3-selection';
 import { MorphChartCategory, ParliamentLayout } from '../morph-chart.types';
 /**
@@ -11,6 +12,7 @@ interface ParliamentRenderOptions {
     addClasses?: boolean;
     instanceId?: string;
     parliamentRadius?: number;
+    paletteMode?: PaletteMode;
 }
 /**
  * Render parliament seats into an SVG container

package/dist/components/parliament-chart/hooks/use-parliament-chart.hook.d.ts

@@ -1,3 +1,4 @@
+import { PaletteMode } from '@mui/material/styles';
 import { RefObject } from 'react';
 import { ChartConfig, HoveredData, ProcessedDataItem } from '../parliament-chart.types';
 import { ArcSweepDirection } from '../utils/parliament-animation';
@@ -13,6 +14,7 @@ type UseParliamentChartProps = {
     setActivePartyName: (name: string | null) => void;
     chartConfig: ChartConfig;
     seatSize: number;
+    paletteMode: PaletteMode;
     shouldAnimate?: boolean;
     animationDirection?: ArcSweepDirection;
     onAnimationComplete?: () => void;
@@ -22,5 +24,5 @@ type UseParliamentChartProps = {
  * Generates SVG visualization with seat circles and handles hover states
  * for displaying repository statistics.
  */
-export declare const useParliamentChart: ({ containerRef, processedData, totalRepositories, arcAngle, useEnhanced, maxSeats, setHoveredData, activePartyName, setActivePartyName, chartConfig, seatSize, shouldAnimate, animationDirection, onAnimationComplete }: UseParliamentChartProps) => void;
+export declare const useParliamentChart: ({ containerRef, processedData, totalRepositories, arcAngle, useEnhanced, maxSeats, setHoveredData, activePartyName, setActivePartyName, chartConfig, seatSize, paletteMode, shouldAnimate, animationDirection, onAnimationComplete }: UseParliamentChartProps) => void;
 export {};

package/dist/components/parliament-chart/parliament-chart.constants.d.ts

@@ -1,3 +1,4 @@
+import { PaletteMode } from '@mui/material/styles';
 export declare const DEFAULT_CHART_CONFIG: {
     readonly arcAngle: 180;
     readonly maxSeats: 200;
@@ -37,14 +38,22 @@ export declare const MODERNE_VULNERABILITY_COLORS: {
     DATA_MISSING: string;
 };
 /**
- * Resolve a seat's fill + border from its category color.
- * - Hollow categories (No LST) → faint ghost fill + dashed ghost border.
- * - Known palette colors → the prototype's mapped border shade.
- * - Anything else (e.g. `url(#pattern)`) → same-color border (legacy).
+ * Resolve a seat's fill + border from its category color and label.
+ * Light mode: every category, including No LST, gets the classic two-tone
+ * dot (fill + darker border). Dark mode: regular categories get a border
+ * matching their fill (no visible ring); No LST gets a faint ghost fill and
+ * a dashed ghost border instead.
+ *
+ * `label` identifies No LST by name rather than by color — consumers theme
+ * No LST's color per palette mode, so it won't reliably match
+ * `HOLLOW_CATEGORY_COLORS` by hex.
  *
  * Pass `radius` to also get the proportional `strokeWidth` / `dashArray`.
  */
-export declare function resolveSeatStyle(color: string, radius?: number): {
+export declare function resolveSeatStyle(color: string, radius?: number, options?: {
+    paletteMode?: PaletteMode;
+    label?: string;
+}): {
     fill: string;
     stroke: string;
     dashed: boolean;