@moderneinc/react-charts 1.1.0 → 1.2.0-next.2f2ee2

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

@@ -0,0 +1,24 @@
+import { Selection } from 'd3-selection';
+import { MorphChartCategory } from '../morph-chart.types';
+interface AreaRenderOptions {
+    xScale: (value: Date) => number;
+    yScale: (value: number) => number;
+    addClasses?: boolean;
+    instanceId?: string;
+}
+interface StackedDataPoint {
+    data: {
+        timestamp: number;
+    };
+    0: number;
+    1: number;
+}
+/**
+ * Render stacked areas into an SVG container
+ * @param container - D3 selection of the container (typically a <g> element)
+ * @param stackedData - D3 stacked data (output of d3.stack())
+ * @param categories - Category definitions with colors and opacity
+ * @param options - Rendering options (scales, styling)
+ */
+export declare function renderStackedAreas(container: Selection<SVGGElement, unknown, null, undefined>, stackedData: StackedDataPoint[][], categories: MorphChartCategory[], options: AreaRenderOptions): void;
+export {};

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

@@ -0,0 +1,19 @@
+import { MorphChartCategory } from '../morph-chart.types';
+export type StackedBarSegment = {
+    timestamp: number;
+    category: string;
+    dataKey: string;
+    y0: number;
+    y1: number;
+    value: number;
+    color: string;
+    isSpecialCategory: boolean;
+};
+/**
+ * Generate stacked bar data from time series
+ * Converts raw data into stacked segments for bar rendering
+ */
+export declare function generateStackedBarData(data: Array<{
+    timestamp: number;
+    [key: string]: number;
+}>, categories: MorphChartCategory[]): StackedBarSegment[];

package/dist/components/morph-chart/utils/gsap-orchestrator.d.ts

@@ -0,0 +1,252 @@
+import { Selection } from 'd3-selection';
+import { MorphChartCategory } from '../morph-chart.types';
+interface AnimationDurations {
+    seatsToBar: number;
+    axesReveal: number;
+    barSlide: number;
+    barsGrow: number;
+    barsToArea: number;
+}
+interface AnimationCallbacks {
+    onStageComplete?: (stage: string) => void;
+    onProgress?: (progress: number) => void;
+    onComplete?: () => void;
+}
+interface AnimationControls {
+    play: () => void;
+    pause: () => void;
+    reverse: () => void;
+    restart: () => void;
+    seek: (progress: number) => void;
+    seekToStage: (stageName: string) => void;
+    kill: () => void;
+    getProgress: () => number;
+    getCurrentStage: () => string;
+    getTimeline: () => gsap.core.Timeline;
+}
+/**
+ * GSAP Orchestrator class that manages the entire animation sequence
+ */
+export declare class GSAPOrchestrator {
+    private timeline;
+    private currentStage;
+    private callbacks;
+    private durations;
+    constructor(durations: AnimationDurations, callbacks?: AnimationCallbacks);
+    /**
+     * Stage 1: Animate parliament seats collapsing into bar segments
+     *
+     * Transforms the circular parliament layout into a stacked vertical bar.
+     * Each seat morphs from its position in the parliament arc into a rectangular
+     * segment of a bar, maintaining visual continuity through smooth transitions.
+     *
+     * @param seats - D3 selection of parliament seat rectangles to animate
+     * @param targetPositions - Array of target positions for each seat, where each position defines the final rectangle geometry (x, y, width, height)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Parliament seats (circular arc) → Vertical bar segments (stacked rectangles)
+     * - All seats animate simultaneously (no stagger)
+     * - Uses power2.inOut easing for smooth acceleration/deceleration
+     *
+     * **Data preservation:**
+     * - Original seat positions stored in data-orig-* attributes for potential reversal
+     * - Target positions must match seat count (indexed by array position)
+     *
+     * **Timeline integration:**
+     * - Added at 'seatsToBar' label
+     * - Duration: 30% of total animation (STAGE_DURATION_RATIOS.SEATS_TO_BAR)
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const seats = svg.selectAll('.parliament-seat');
+     * const targets = calculateBarPositions(seats);
+     * orchestrator.animateSeatsToBar(seats, targets);
+     * ```
+     */
+    animateSeatsToBar(seats: Selection<SVGRectElement, unknown, null, undefined>, targetPositions: Array<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>): GSAPOrchestrator;
+    /**
+     * Stage 2a: Reveal X and Y axes to establish timeline context
+     *
+     * Fades in the chart axes (x-axis with dates, y-axis with values) to provide
+     * spatial context before the bar slides to its position. This stage establishes
+     * the timeline framework that gives meaning to the bar's position.
+     *
+     * @param xAxisGroup - D3 selection of the x-axis group element (must have opacity: 0)
+     * @param yAxisGroup - D3 selection of the y-axis group element (must have opacity: 0)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Axes fade in from opacity 0 → 1
+     * - Uses full stage duration for smooth, gradual reveal
+     * - Both axes animate simultaneously
+     * - Uses power2.inOut easing for professional motion
+     *
+     * **Data requirements:**
+     * - Axes must already exist in the DOM with opacity: 0
+     * - xAxisGroup should contain tick marks and labels for dates
+     * - yAxisGroup should contain tick marks and labels for values
+     *
+     * **Timeline integration:**
+     * - Added at 'axesReveal' label (after seats→bar transformation)
+     * - Duration: 12.5% of total animation (STAGE_DURATION_RATIOS.AXES_REVEAL)
+     * - Happens **before** bar slide to establish context first
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const xAxis = svg.select('.x-axis').style('opacity', 0);
+     * const yAxis = svg.select('.y-axis').style('opacity', 0);
+     * orchestrator.animateAxesReveal(xAxis, yAxis);
+     * ```
+     */
+    animateAxesReveal(xAxisGroup: Selection<SVGGElement, unknown, null, undefined>, yAxisGroup: Selection<SVGGElement, unknown, null, undefined>): GSAPOrchestrator;
+    /**
+     * Stage 2b: Slide the collapsed bar horizontally to its timeline position
+     *
+     * Moves the vertical bar created in Stage 1 to its correct x-position on the timeline.
+     * This stage establishes spatial context by positioning the bar relative to the time axis.
+     *
+     * @param barSegments - D3 selection of bar segment rectangles to slide
+     * @param targetX - Final x-coordinate where the bar should be positioned on the timeline
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Horizontal slide only (y-position and height remain constant)
+     * - All bar segments move together as a unified column
+     * - Uses power2.out easing for smooth deceleration (settling into place)
+     *
+     * **Timeline integration:**
+     * - Added at 'barSlide' label (after seats→bar transformation)
+     * - Duration: 25% of total animation (STAGE_DURATION_RATIOS.BAR_SLIDE)
+     * - Triggers onStageComplete callback when starting
+     *
+     * **Positioning:**
+     * - targetX typically corresponds to a specific timestamp on the x-axis
+     * - For "rightmost edge" positioning: targetX = width - margin.right
+     * - For "middle date" positioning: targetX = xScale(middleTimestamp)
+     *
+     * @example
+     * ```ts
+     * const barSegments = svg.selectAll('.bar-segment');
+     * const rightEdgeX = width - margin.right;
+     * orchestrator.animateBarSlide(barSegments, rightEdgeX);
+     * ```
+     */
+    animateBarSlide(barSegments: Selection<SVGRectElement, unknown, null, undefined>, targetX: number): GSAPOrchestrator;
+    /**
+     * Stage 3: Grow other bars with ripple effect from parliament position
+     *
+     * Animates the historical bars growing from the baseline, creating a wave-like
+     * ripple effect radiating outward from the parliament bar's position. Bars closer
+     * to the parliament position appear first, with increasing delay for distant bars.
+     *
+     * @param otherBars - D3 selection of bars at other timestamps (excluding parliament bar)
+     * @param parliamentIndex - Timeline index of the parliament bar (center of ripple)
+     * @param staggerDelay - Delay multiplier per distance unit (default: TIMING.RIPPLE_STAGGER_DELAY = 0.05)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Bars grow vertically from height=0 (baseline) to final stacked height
+     * - Ripple effect: delay = |barIndex - parliamentIndex| × staggerDelay
+     * - Bars furthest from parliament bar appear last (e.g., delay of 0.50s for 10 bars away)
+     * - Uses power2.out easing for smooth upward growth
+     *
+     * **Data requirements:**
+     * Each bar element must have these data attributes:
+     * - `data-final-y`: Target y-coordinate (top of bar)
+     * - `data-final-height`: Target height
+     * - `data-timestamp-index`: Position in timeline array
+     * - `data-baseline-y`: Y-coordinate of chart baseline (for fromTo animation)
+     *
+     * **Timeline integration:**
+     * - Added at 'barsGrow' label (after bar slide)
+     * - Duration: 25% of total animation (STAGE_DURATION_RATIOS.BARS_GROW)
+     * - Individual bars have additional stagger delays
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const otherBars = svg.selectAll('.bar:not(.parliament-bar)');
+     * const parliamentIndex = 15; // Parliament bar is at index 15
+     * orchestrator.animateBarsGrow(otherBars, parliamentIndex, 0.05);
+     * // Bars will appear with 50ms delay per timeline distance
+     * ```
+     */
+    animateBarsGrow(otherBars: Selection<SVGRectElement, unknown, null, undefined>, parliamentIndex: number, staggerDelay?: number): GSAPOrchestrator;
+    /**
+     * Stage 4: Morph bars into curved areas using path interpolation
+     *
+     * Transforms rectangular stacked bars into smooth, curved area paths. This is
+     * the final stage that creates the traditional stacked area chart appearance.
+     * Uses GSAP's path morphing to interpolate from bar rectangles to bezier curves.
+     *
+     * @param allBars - D3 selection of all bar rectangles (will be hidden during morph)
+     * @param morphPaths - D3 selection of SVG paths used for morphing (one per category)
+     * @param targetAreaPaths - Map of category IDs to target SVG path strings (curved areas)
+     * @param categories - Array of category definitions (used for grouping)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Rectangular bars (straight edges) → Curved area paths (smooth curves)
+     * - Bars fade out (opacity: 0), morphing paths fade in (opacity: 1)
+     * - GSAP interpolates path data attribute from bar shape to curve shape
+     * - Uses power2.inOut easing for smooth shape morphing
+     *
+     * **Path morphing technique:**
+     * 1. Each category has a morphPath element that starts as combined bar outline
+     * 2. morphPath's `d` attribute animates from bar path → area path
+     * 3. GSAP handles point interpolation automatically
+     * 4. Original bars hidden to avoid visual duplication
+     *
+     * **Data requirements:**
+     * - morphPaths must have `data-category` attribute matching category ID
+     * - allBars must have CSS class `category-{categoryKey}` for grouping
+     * - targetAreaPaths keys must match category IDs
+     *
+     * **Timeline integration:**
+     * - Added at 'barsToArea' label (after bars grow)
+     * - Duration: 20% of total animation (STAGE_DURATION_RATIOS.BARS_TO_AREA)
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const allBars = svg.selectAll('.stacked-bar rect');
+     * const morphPaths = svg.selectAll('.morph-path');
+     * const targetPaths = new Map([
+     *   ['java', 'M 100 300 C 150 280, 200 270, 250 260 L 250 300 Z'],
+     *   ['python', 'M 100 260 C 150 240, 200 230, 250 220 L 250 260 Z']
+     * ]);
+     * orchestrator.animateBarsToArea(allBars, morphPaths, targetPaths, categories);
+     * ```
+     */
+    animateBarsToArea(allBars: Selection<SVGRectElement, unknown, null, undefined>, morphPaths: Selection<SVGPathElement, unknown, null, undefined>, targetAreaPaths: Map<string, string>, _categories: MorphChartCategory[]): GSAPOrchestrator;
+    /**
+     * Handle timeline progress updates
+     */
+    private handleProgress;
+    /**
+     * Get animation control interface
+     */
+    getControls(): AnimationControls;
+    /**
+     * Start the animation
+     */
+    play(): void;
+    /**
+     * Clean up and destroy the timeline
+     */
+    destroy(): void;
+}
+export {};

package/dist/components/morph-chart/utils/morph-interpolator.d.ts

@@ -0,0 +1,96 @@
+import { AreaPoint, SeatPosition } from '../morph-chart.types';
+/**
+ * Interpolate between two numbers
+ */
+export declare function lerp(start: number, end: number, progress: number): number;
+/**
+ * Easing function for smooth morphing (ease-in-out cubic)
+ */
+export declare function easeInOutCubic(t: number): number;
+/**
+ * Easing function for elastic effect (optional, for more dramatic animation)
+ */
+export declare function easeOutElastic(t: number): number;
+/**
+ * Map parliament seats to their corresponding positions at the rightmost edge of the area chart
+ * Seats should map to the vertical position in the stacked area based on their category
+ *
+ * @param seats - Parliament seat positions
+ * @param areaSlice - Area chart data points at the rightmost time slice
+ * @param chartWidth - Width of the area chart
+ * @param chartHeight - Height of the area chart
+ * @param margin - Chart margins
+ */
+export declare function mapSeatsToRightEdge(seats: SeatPosition[], areaSlice: AreaPoint[], chartWidth: number, chartHeight: number): Map<SeatPosition, {
+    x: number;
+    y: number;
+}>;
+/**
+ * Calculate interpolated seat position during parliament → area morphing
+ *
+ * Phase 1 (0.0 - 0.5): Seats move from parliament positions to right edge of area chart
+ * Phase 2 (0.5 - 1.0): Seats stay at right edge while areas expand
+ *
+ * @param seat - Original parliament seat position
+ * @param targetPosition - Target position at right edge
+ * @param progress - Overall morph progress (0 = parliament, 1 = area)
+ */
+export declare function interpolateSeatToEdge(seat: SeatPosition, targetPosition: {
+    x: number;
+    y: number;
+}, progress: number): {
+    x: number;
+    y: number;
+    opacity: number;
+    radius: number;
+};
+/**
+ * Calculate interpolated area expansion during parliament → area morphing
+ *
+ * Phase 1 (0.0 - 0.5): Areas are compressed to right edge (not visible)
+ * Phase 2 (0.5 - 1.0): Areas expand leftward from right edge
+ *
+ * @param progress - Overall morph progress (0 = parliament, 1 = area)
+ * @param chartWidth - Full width of area chart
+ */
+export declare function interpolateAreaExpansion(progress: number, chartWidth: number): {
+    visibleWidth: number;
+    opacity: number;
+    clipX: number;
+};
+/**
+ * Calculate interpolated positions for area → parliament morphing (reverse)
+ *
+ * Phase 1 (0.0 - 0.5): Areas compress to right edge
+ * Phase 2 (0.5 - 1.0): Seats expand from right edge to parliament layout
+ */
+export declare function interpolateAreaToParliament(progress: number, chartWidth: number, seat: SeatPosition, edgePosition: {
+    x: number;
+    y: number;
+}): {
+    areaClipX: number;
+    areaOpacity: number;
+    seatX: number;
+    seatY: number;
+    seatOpacity: number;
+    seatRadius: number;
+};
+/**
+ * Calculate the vertical stacking position for area points
+ * Used to determine where seats should map to at the right edge
+ */
+export declare function calculateStackedPosition(value: number, previousSum: number, maxValue: number, chartHeight: number): {
+    y0: number;
+    y1: number;
+};
+/**
+ * Extract the rightmost time slice from area chart data
+ * This represents the same point-in-time as the parliament chart
+ */
+export declare function extractRightmostSlice(data: Array<{
+    timestamp: number;
+    [key: string]: number;
+}>, categories: Array<{
+    dataKey: string;
+    label: string;
+}>, chartHeight: number): AreaPoint[];

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

@@ -0,0 +1,23 @@
+import { Selection } from 'd3-selection';
+import { MorphChartCategory, ParliamentLayout } from '../morph-chart.types';
+/**
+ * Sanitize category name for use in CSS class names
+ * Replaces spaces, slashes, and other special characters with hyphens
+ */
+export declare function sanitizeCategoryForClass(category: string): string;
+interface ParliamentRenderOptions {
+    centerX: number;
+    centerY: number;
+    addClasses?: boolean;
+    instanceId?: string;
+    parliamentRadius?: number;
+}
+/**
+ * Render parliament seats into an SVG container
+ * @param container - D3 selection of the container (typically a <g> element)
+ * @param layout - Parliament layout with seat positions
+ * @param categories - Category definitions with colors
+ * @param options - Rendering options (positioning, styling)
+ */
+export declare function renderParliamentSeats(container: Selection<SVGGElement, unknown, null, undefined>, layout: ParliamentLayout, categories: MorphChartCategory[], options: ParliamentRenderOptions): void;
+export {};

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

@@ -0,0 +1,33 @@
+import { ParliamentLayout } from '../morph-chart.types';
+type Party = {
+    id: string | number;
+    name: string;
+    seats: number;
+    colour: string;
+};
+type ParliamentOptions = {
+    arcAngle: number;
+    arcAngleFlexibility?: number;
+    radius: number;
+    seatSize: number;
+    minSeatSize: number;
+    maxSeatSize: number;
+    spacing: number;
+    innerRadiusRatio: number;
+};
+/**
+ * Generate parliament layout with seat positions
+ * Based on the logic from parliament-svg-enhanced.ts but returns position data
+ * instead of SVG elements
+ */
+export declare function generateParliamentLayout(parties: Party[], options: ParliamentOptions): ParliamentLayout;
+/**
+ * Convert category data to parliament party format
+ */
+export declare function categoriesToParties(categories: Array<{
+    dataKey: string;
+    label: string;
+    color: string;
+    value: number;
+}>, totalRepositories: number, maxSeats: number): Party[];
+export {};

package/dist/components/morph-chart/utils/position-mapper.d.ts

@@ -0,0 +1,48 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { ParliamentLayout, SeatPosition } from '../morph-chart.types';
+/**
+ * Map parliament seats to their target positions at the right edge of the stacked area chart
+ * Seats can be positioned at the top (y1) or distributed vertically within their category's segment
+ *
+ * NOTE: stackData uses dataKey, but parliamentLayout.seats use category labels.
+ * We need to match by label, so stackData must contain label information.
+ *
+ * @param distributeVertically - If true, seats are spread between y0 and y1; if false, all seats at y1
+ */
+export declare function mapSeatsToStackEdge(parliamentLayout: ParliamentLayout, stackData: Array<{
+    dataKey: string;
+    label?: string;
+    y0: number;
+    y1: number;
+    timestamp?: number;
+    isSpecialCategory?: boolean;
+}>, xScale: ScaleTime<number, number>, yScale: ScaleLinear<number, number>, chartWidth: number, chartHeight: number, distributeVertically?: boolean): Map<SeatPosition, {
+    x: number;
+    y: number;
+}>;
+/**
+ * Extract the rightmost slice of stacked area data
+ * This represents the same point-in-time as the parliament chart
+ *
+ * IMPORTANT: The stack is generated using original category order.
+ * We build the slice in original order to match the stack generation.
+ */
+export declare function extractRightmostStackSlice(data: Array<{
+    timestamp: number;
+    [key: string]: number;
+}>, categories: Array<{
+    dataKey: string;
+    label: string;
+    color: string;
+    parliamentMapping?: {
+        isSpecialCategory?: boolean;
+    };
+}>, _yScale: ScaleLinear<number, number>): Array<{
+    dataKey: string;
+    label: string;
+    y0: number;
+    y1: number;
+    value: number;
+    timestamp: number;
+    isSpecialCategory?: boolean;
+}>;

package/dist/components/morph-chart/utils/segment-transformer.d.ts

@@ -0,0 +1,70 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { MorphChartCategory } from '../morph-chart.types';
+interface StackedSeriesDataPoint {
+    data: {
+        timestamp: number;
+    };
+    0: number;
+    1: number;
+}
+export type SegmentTransform = {
+    segmentId: string;
+    dataKey: string;
+    timestamp: number;
+    x: number;
+    y: number;
+    rotation: number;
+    length: number;
+};
+/**
+ * Calculate curve data for stacked area chart
+ * Generates the curved path data that segments will transform into
+ *
+ * @param stackedData - D3 stacked data
+ * @param categories - Category definitions
+ * @param xScale - X scale (time)
+ * @param yScale - Y scale (values)
+ * @returns Array of curve data for each category
+ */
+export declare function calculateStackedCurveData(stackedData: StackedSeriesDataPoint[][], categories: MorphChartCategory[], xScale: ScaleTime<number, number>, yScale: ScaleLinear<number, number>): Array<{
+    dataKey: string;
+    category: string;
+    points: Array<{
+        x: number;
+        y: number;
+        timestamp: number;
+    }>;
+    pathData: string;
+}>;
+/**
+ * Calculate transformations for horizontal bar top segments to align with curves
+ * Each segment gets position, rotation, and length data
+ *
+ * @param barSegments - Array of bar segments with their positions
+ * @param curveData - Calculated curve data for all categories
+ * @param segmentLength - Desired length of each segment
+ * @returns Array of transformation data for each segment
+ */
+export declare function calculateSegmentTransforms(barSegments: Array<{
+    dataKey: string;
+    timestamp: number;
+    x: number;
+    y: number;
+    width: number;
+}>, curveData: ReturnType<typeof calculateStackedCurveData>, segmentLength: number): SegmentTransform[];
+/**
+ * Extract bar top segment positions from rendered bars
+ * Identifies the top edge of each bar segment for transformation
+ *
+ * @param svg - SVG container with bar elements
+ * @returns Array of segment position data
+ */
+export declare function extractBarTopPositions(svg: SVGSVGElement): Array<{
+    dataKey: string;
+    timestamp: number;
+    x: number;
+    y: number;
+    width: number;
+    element: SVGElement;
+}>;
+export {};

package/dist/components/morph-chart/utils/svg-patterns.d.ts

@@ -0,0 +1,19 @@
+import { Selection } from 'd3-selection';
+/**
+ * Add all hatch pattern definitions to an SVG's <defs> element
+ * Call this once when setting up the SVG
+ * @param svg - The SVG selection to add patterns to
+ * @param instancePrefix - Unique prefix for this instance to avoid ID conflicts
+ */
+export declare function addHatchPatternDefs(svg: Selection<SVGSVGElement, unknown, null, undefined>, instancePrefix: string): void;
+/**
+ * Transform a color to use instance-specific pattern IDs
+ * Converts 'url(#patternName)' to 'url(#prefix-patternName)'
+ */
+export declare function transformColorForInstance(color: string, instancePrefix: string): string;
+/**
+ * Get the display color for a category, handling pattern URLs
+ * Returns the line color for patterns (better visibility in hover states)
+ * Works with both instance-specific and generic pattern URLs
+ */
+export declare function getDisplayColor(color: string): string;

package/dist/components/parliament-chart/hooks/{useParliamentChart.d.ts → use-parliament-chart.hook.d.ts}

@@ -1,5 +1,6 @@
 import { RefObject } from 'react';
-import { ChartConfig, HoveredData, ProcessedDataItem } from '../ParliamentChart.types';
+import { ChartConfig, HoveredData, ProcessedDataItem } from '../parliament-chart.types';
+import { ArcSweepDirection } from '../utils/parliament-animation';
 type UseParliamentChartProps = {
     containerRef: RefObject<HTMLDivElement>;
     processedData: ProcessedDataItem[];
@@ -12,11 +13,14 @@ type UseParliamentChartProps = {
     setActivePartyName: (name: string | null) => void;
     chartConfig: ChartConfig;
     seatSize: number;
+    shouldAnimate?: boolean;
+    animationDirection?: ArcSweepDirection;
+    onAnimationComplete?: () => void;
 };
 /**
  * Hook that manages parliament chart rendering and interactivity.
  * 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 }: UseParliamentChartProps) => void;
+export declare const useParliamentChart: ({ containerRef, processedData, totalRepositories, arcAngle, useEnhanced, maxSeats, setHoveredData, activePartyName, setActivePartyName, chartConfig, seatSize, shouldAnimate, animationDirection, onAnimationComplete }: UseParliamentChartProps) => void;
 export {};

package/dist/components/parliament-chart/{ParliamentChart.d.ts → parliament-chart.component.d.ts}

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { ParliamentChartProps } from './ParliamentChart.types';
+import { ParliamentChartProps } from './parliament-chart.types';
 /**
  * Renders an interactive parliament-style chart visualization for repository statistics.
  * Displays repository counts as seats in a semi-circular or arc layout, with scaling

package/dist/components/parliament-chart/{ParliamentChart.types.d.ts → parliament-chart.types.d.ts}

@@ -1,4 +1,5 @@
-import { ParliamentChartTheme } from '../../theme/defaultColors';
+import { ParliamentChartTheme } from '../../theme/default-colors';
+import { ArcSweepDirection } from './utils/parliament-animation';
 type ParliamentDataSeries = {
     value: number;
     label: string;
@@ -12,6 +13,10 @@ export type ParliamentChartProps = {
     arcAngle?: number;
     useEnhanced?: boolean;
     theme?: ParliamentChartTheme;
+    showTable?: boolean;
+    shouldAnimate?: boolean;
+    animationDirection?: ArcSweepDirection;
+    onAnimationComplete?: () => void;
 };
 export type ProcessedDataItem = {
     id: string | number;

package/dist/components/parliament-chart/utils/parliament-animation.d.ts

@@ -0,0 +1,13 @@
+export type ArcSweepDirection = 'left-to-right' | 'right-to-left';
+/**
+ * Animates the parliament chart with an arc sweep reveal effect.
+ * Creates a clipPath that progressively reveals or collapses seats.
+ *
+ * @param svgElement - The SVG element containing the parliament chart
+ * @param arcAngle - The arc angle in degrees (e.g., 200)
+ * @param radius - The radius of the parliament arc
+ * @param direction - Direction of the sweep: 'left-to-right' (expand) or 'right-to-left' (collapse)
+ * @param duration - Animation duration in milliseconds (default: 900ms)
+ * @param onComplete - Optional callback fired when animation completes
+ */
+export declare function animateArcSweep(svgElement: SVGSVGElement, arcAngle: number, radius: number, direction?: ArcSweepDirection, duration?: number, onComplete?: () => void): void;

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

@@ -0,0 +1,6 @@
+import { UseStackedAreaChartProps, UseStackedAreaChartReturn } from '../stacked-area-chart.types';
+/**
+ * Manages stacked area chart data validation, processing, and formatting.
+ * Handles category validation, timestamp ranges, and max value computation.
+ */
+export declare function useStackedAreaChart(props: UseStackedAreaChartProps): UseStackedAreaChartReturn;

package/dist/components/stacked-area-chart/stacked-area-chart.component.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { StackedAreaChartProps } from './stacked-area-chart.types';
+/**
+ * Displays time-series data as a stacked area chart with responsive sizing,
+ * customizable colors, interactive tooltips, and smooth animations.
+ *
+ * Designed for ParliamentChart transitions - data structure supports point-in-time
+ * views enabling animated morphing between visualizations.
+ */
+export declare const StackedAreaChart: FunctionComponent<StackedAreaChartProps>;