@moderneinc/react-charts 1.2.0-next.c015c0 → 1.2.0-next.c03472

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 {};

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/slinky-3d-generator.d.ts

@@ -0,0 +1,35 @@
+import { Selection } from 'd3-selection';
+export interface Slinky3DConfig {
+    categories: Array<{
+        name: string;
+        color: string;
+        seatCount: number;
+    }>;
+    centerX: number;
+    centerY: number;
+    radius: number;
+    arcAngle: number;
+}
+/**
+ * Generate HTML content for 3D slinky rings
+ */
+export declare function generate3DSlinkyHTML(categories: Array<{
+    name: string;
+    color: string;
+    seatCount: number;
+}>): string;
+/**
+ * Generate CSS styles for 3D slinky effect
+ */
+export declare function generate3DSlinkyStyles(instanceId: string): string;
+/**
+ * Create 3D slinky elements in SVG using foreignObject
+ */
+export declare function create3DSlinky(container: Selection<SVGGElement, unknown, null, undefined>, config: Slinky3DConfig, instanceId: string): {
+    wrapper: Selection<SVGForeignObjectElement, unknown, null, undefined>;
+    cleanup: () => void;
+};
+/**
+ * Animate 3D slinky compression using GSAP
+ */
+export declare function animate3DSlinkyCompression(instanceId: string, timeline: gsap.core.Timeline, startTime: string, duration: number, targetX: number, targetY: number): void;

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/morph-chart/utils/svg-slinky-generator.d.ts

@@ -0,0 +1,25 @@
+import { Selection } from 'd3-selection';
+export interface SvgSlinkyConfig {
+    categories: Array<{
+        name: string;
+        color: string;
+        seatCount: number;
+    }>;
+    centerX: number;
+    centerY: number;
+    radius: number;
+    innerRadius: number;
+    arcAngle: number;
+}
+/**
+ * Create SVG slinky coils
+ */
+export declare function createSvgSlinky(container: Selection<SVGGElement, unknown, null, undefined>, config: SvgSlinkyConfig, instanceId: string): {
+    slinkyGroup: Selection<SVGGElement, unknown, null, undefined>;
+    cleanup: () => void;
+};
+/**
+ * Animate SVG slinky closing - stacks rings vertically into a bar on the right
+ * Uses staggered animation phases to create realistic slinky walking effect
+ */
+export declare function animateSvgSlinkyCompression(slinkyGroup: Selection<SVGGElement, unknown, null, undefined>, timeline: gsap.core.Timeline, startTime: string, duration: number, targetX: number, targetY: number): void;

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

@@ -1,5 +1,6 @@
 import { RefObject } from 'react';
 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 {};