@moderneinc/react-charts 1.1.0 → 1.2.0-next.27c469

package/dist/components/morph-chart/utils/accordion-generator.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Utility functions for generating accordion-style zig-zag lines
+ * Used in the seats-to-lines animation stage
+ */
+export interface AccordionLinePoint {
+    x: number;
+    y: number;
+    category: string;
+    categoryIndex: number;
+}
+export interface AccordionLineConfig {
+    centerX: number;
+    centerY: number;
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+    amplitude: number;
+    segments: number;
+}
+/**
+ * Generate zig-zag line points for a category's accordion section
+ *
+ * @param config - Configuration for the accordion line
+ * @returns Array of points forming the zig-zag pattern
+ */
+export declare function generateAccordionLine(config: AccordionLineConfig): AccordionLinePoint[];
+/**
+ * Generate accordion lines for all categories
+ *
+ * @param categories - Array of categories with their seat counts
+ * @param parliamentCenter - Center point of the parliament
+ * @param radius - Base radius of the parliament arc
+ * @param arcAngle - Total angle of the parliament arc (in radians)
+ * @returns Map of category to accordion line points
+ */
+export declare function generateCategoryAccordionLines(categories: Array<{
+    name: string;
+    seatCount: number;
+    color: string;
+}>, parliamentCenter: {
+    x: number;
+    y: number;
+}, radius: number, arcAngle?: number): Map<string, AccordionLinePoint[]>;
+/**
+ * Generate a single continuous accordion line for all categories
+ * Creates one connected slinky that spans the entire parliament arc
+ *
+ * @param categories - Array of categories with their seat counts
+ * @param parliamentCenter - Center point of the parliament
+ * @param radius - Base radius of the parliament arc
+ * @param arcAngle - Total angle of the parliament arc (in radians)
+ * @returns Single array of accordion line points with category info
+ */
+export declare function generateContinuousAccordionLine(categories: Array<{
+    name: string;
+    seatCount: number;
+    color: string;
+}>, parliamentCenter: {
+    x: number;
+    y: number;
+}, radius: number, arcAngle?: number): AccordionLinePoint[];
+/**
+ * Create SVG path string from accordion line points
+ *
+ * @param points - Array of accordion line points
+ * @param curved - Whether to use curved lines (true) or sharp zig-zags (false)
+ * @returns SVG path string
+ */
+export declare function createAccordionPath(points: AccordionLinePoint[], curved?: boolean): string;
+/**
+ * Calculate intermediate positions for accordion collapse animation with slinky physics
+ *
+ * @param linePoints - Original accordion line points
+ * @param targetX - Target X position (vertical bar location)
+ * @param targetY - Target Y position (vertical bar location)
+ * @param progress - Animation progress (0-1)
+ * @returns Interpolated points for current progress with wave motion
+ */
+export declare function interpolateAccordionCollapse(linePoints: AccordionLinePoint[], targetX: number, targetY: number, progress: number): AccordionLinePoint[];
+/**
+ * Generate multiple depth layers for slinky 3D effect
+ *
+ * @param config - Base configuration for accordion line
+ * @param numLayers - Number of layers to create (default 3)
+ * @returns Array of accordion line configurations with depth properties
+ */
+export declare function generateLayeredAccordionLines(config: AccordionLineConfig, numLayers?: number): Array<{
+    points: AccordionLinePoint[];
+    depth: number;
+    opacity: number;
+    strokeWidth: number;
+    blur: number;
+}>;
+/**
+ * Generate a single vertical line path for collapsed state
+ *
+ * @param x - X position of the vertical line
+ * @param topY - Top Y position
+ * @param bottomY - Bottom Y position
+ * @returns SVG path string for vertical line
+ */
+export declare function createVerticalLinePath(x: number, topY: number, bottomY: number): string;

package/dist/components/morph-chart/utils/animation-constants.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Animation constants for parliament to stacked area morphing
+ * Centralized configuration for timing, easing, and stage proportions
+ */
+/**
+ * GSAP easing functions for smooth transitions
+ * Uses GSAP's power easing for professional motion
+ */
+export declare const EASING: {
+    /** Smooth acceleration and deceleration - used for transformations */
+    readonly IN_OUT: "power2.inOut";
+    /** Smooth deceleration only - used for sliding and growing */
+    readonly OUT: "power2.out";
+};
+/**
+ * Timing constants for staggered animations
+ */
+export declare const TIMING: {
+    /** No stagger - all elements animate simultaneously */
+    readonly NO_STAGGER: 0;
+    /** Ripple effect delay - each bar delayed by distance × this value (50ms per unit) */
+    readonly RIPPLE_STAGGER_DELAY: 0.05;
+};

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

@@ -0,0 +1,44 @@
+/**
+ * Utility functions for animation path manipulation
+ * Shared helpers for creating SVG paths from bar geometries
+ */
+/**
+ * Create a rectangular SVG path from bar dimensions
+ * Used as the initial state for path morphing animations
+ *
+ * @param x - Left edge x-coordinate of the rectangle
+ * @param y - Top edge y-coordinate of the rectangle
+ * @param width - Width of the rectangle
+ * @param height - Height of the rectangle
+ * @returns SVG path string representing a closed rectangle
+ *
+ * @example
+ * ```ts
+ * const path = createRectPath(100, 50, 20, 80);
+ * // Returns: "M 100 130 L 100 50 L 120 50 L 120 130 Z"
+ * ```
+ */
+export declare function createRectPath(x: number, y: number, width: number, height: number): string;
+/**
+ * Create a combined SVG path from multiple bar segments for a single category
+ * Connects all bars into a single continuous path suitable for morphing
+ *
+ * The path traces along the top edges of all bars (left to right),
+ * then closes along the bottom baseline, creating a unified shape.
+ *
+ * @param bars - Array of SVG rect elements to combine
+ * @returns SVG path string representing the combined shape
+ *
+ * @example
+ * ```ts
+ * const bars = svg.selectAll('.category-java rect').nodes();
+ * const combinedPath = createCombinedBarPath(bars);
+ * // Returns path that traces outline of all bars
+ * ```
+ *
+ * @remarks
+ * - Bars are automatically sorted by x-position (left to right)
+ * - Empty array returns empty string
+ * - Path draws: bottom-left → tops (left-to-right) → bottom-right → close
+ */
+export declare function createCombinedBarPath(bars: SVGRectElement[]): string;

package/dist/components/morph-chart/utils/arc-path-calculator.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Arc path calculator for slinky-style seat → bar animations
+ * Generates pronounced bezier arc paths for smooth cascading motion
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface ArcPathData {
+    startX: number;
+    startY: number;
+    controlX: number;
+    controlY: number;
+    endX: number;
+    endY: number;
+    distance: number;
+}
+/**
+ * Calculate the control point for a quadratic bezier curve
+ * Creates a pronounced arc by offsetting perpendicular to the direct path
+ *
+ * @param start - Starting point (seat position)
+ * @param end - Ending point (bar segment position)
+ * @param arcIntensity - How pronounced the arc should be (0-1, default 0.35 for 35% offset)
+ * @returns Control point for the bezier curve
+ */
+export declare function calculateArcControlPoint(start: Point, end: Point, arcIntensity?: number): Point;
+/**
+ * Generate complete arc path data for animating a seat to a bar position
+ *
+ * @param seatPosition - Current seat position in parliament
+ * @param barPosition - Target bar segment position
+ * @param arcIntensity - How pronounced the arc should be (default 0.35)
+ * @returns Complete path data for GSAP animation
+ */
+export declare function generateArcPath(seatPosition: Point, barPosition: Point, arcIntensity?: number): ArcPathData;
+/**
+ * Generate SVG path string for a quadratic bezier arc
+ * Useful for debugging or visual representation
+ *
+ * @param pathData - Arc path data
+ * @returns SVG path string
+ */
+export declare function generateSVGPath(pathData: ArcPathData): string;
+/**
+ * Calculate points along a quadratic bezier curve
+ * Useful for visualizing or debugging the arc path
+ *
+ * @param pathData - Arc path data
+ * @param numPoints - Number of points to generate along the curve (default 20)
+ * @returns Array of points along the curve
+ */
+export declare function getPointsAlongArc(pathData: ArcPathData, numPoints?: number): Point[];

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,291 @@
+import { Selection } from 'd3-selection';
+import { MorphChartCategory } from '../morph-chart.types';
+interface AnimationDurations {
+    seatsToRings: number;
+    ringsToBar: number;
+    axesReveal: number;
+    barSlide: number;
+    barsGrow: number;
+    barsToArea: number;
+    ringsHold?: 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 1a: Animate parliament seats transforming into slinky rings
+     *
+     * Transforms the circular parliament layout into a slinky (spring coil) formation.
+     * This creates a whimsical intermediate state between the circular parliament
+     * and the stacked bar, making the transition more visually engaging.
+     *
+     * @param seats - D3 selection of parliament seat elements to animate
+     * @param baselineY - Y-coordinate of the chart baseline (reference for positioning)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Parliament seats (circular arc) → Slinky rings (elliptical coils)
+     * - Seats morph and fade into overlapping rings
+     * - Rings positioned along the parliament arc initially
+     * - Uses perspective effects for 3D slinky appearance
+     *
+     * **Data preservation:**
+     * - Original seat positions stored in data-orig-* attributes for potential reversal
+     * - Current dimensions preserved before transformation
+     *
+     * **Timeline integration:**
+     * - Added at 'seatsToRings' label (first stage)
+     * - Duration: Set by durations.seatsToRings
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const seats = svg.selectAll('.parliament-seat');
+     * const baselineY = height - margin.bottom;
+     * orchestrator.animateSeatsToRings(seats, baselineY);
+     * ```
+     */
+    animateSeatsToRings(seats: Selection<SVGRectElement, unknown, null, undefined>, baselineY: number): GSAPOrchestrator;
+    /**
+     * Stage 1b: Animate slinky rings collapsing into stacked bar
+     *
+     * Transforms the slinky rings created in Stage 1a into a stacked
+     * vertical bar. Rings compress and stack vertically to form rectangular
+     * segments of the final bar, maintaining visual continuity.
+     *
+     * @param seats - D3 selection of ring elements (formerly seats) to animate
+     * @param targetPositions - Array of target positions for each segment, where each position defines the final rectangle geometry (x, y, width, height)
+     * @returns this - Returns the orchestrator instance for method chaining
+     *
+     * @remarks
+     * **Visual transformation:**
+     * - Slinky rings → Stacked bar segments (rectangles)
+     * - Rings compress and flatten into bar segments
+     * - Reposition to stack vertically in correct order
+     * - All segments animate simultaneously (no stagger)
+     * - Uses power2.inOut easing for smooth acceleration/deceleration
+     *
+     * **Data requirements:**
+     * - Target positions must match ring count (indexed by array position)
+     * - Each position defines final x, y, width, height for the bar segment
+     *
+     * **Timeline integration:**
+     * - Added at 'ringsToBar' label (after seatsToRings)
+     * - Duration: Set by durations.ringsToBar
+     * - Triggers onStageComplete callback when starting
+     *
+     * @example
+     * ```ts
+     * const rings = svg.selectAll('.slinky-ring');
+     * const targets = calculateBarPositions(rings);
+     * orchestrator.animateRingsToBar(rings, targets);
+     * ```
+     */
+    animateRingsToBar(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 {};