velo-plot 1.11.1

package/dist/core/keybindings/index.d.ts

@@ -0,0 +1,157 @@
+/**
+ * Sci Plot - Keyboard Shortcuts Module
+ *
+ * Provides customizable keyboard shortcuts for chart interactions.
+ * Supports key combinations, custom actions, and enable/disable per key.
+ *
+ * @module keybindings
+ */
+/** Available built-in actions */
+export type KeyAction = 'resetZoom' | 'autoScale' | 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight' | 'panUp' | 'panDown' | 'togglePan' | 'toggleSelect' | 'clearSelection' | 'deleteSelected' | 'selectAll' | 'copy' | 'exportImage' | 'toggleLegend' | 'toggleDebug' | 'escape' | 'undo' | 'redo' | 'custom';
+/** Key binding configuration */
+export interface KeyBinding {
+    /** The key code (e.g., 'KeyR', 'Escape', 'ArrowLeft') */
+    key: string;
+    /** Action to perform */
+    action: KeyAction;
+    /** Require Ctrl/Cmd key */
+    ctrl?: boolean;
+    /** Require Shift key */
+    shift?: boolean;
+    /** Require Alt key */
+    alt?: boolean;
+    /** Require Meta key (Cmd on Mac) */
+    meta?: boolean;
+    /** Custom handler function (required if action is 'custom') */
+    handler?: () => void;
+    /** Whether this binding is enabled (default: true) */
+    enabled?: boolean;
+    /** Description for help/UI display */
+    description?: string;
+}
+/** Callbacks for keyboard actions */
+export interface KeyBindingCallbacks {
+    onResetZoom?: () => void;
+    onAutoScale?: () => void;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    onPanLeft?: () => void;
+    onPanRight?: () => void;
+    onPanUp?: () => void;
+    onPanDown?: () => void;
+    onTogglePan?: () => void;
+    onToggleSelect?: () => void;
+    onClearSelection?: () => void;
+    onDeleteSelected?: () => void;
+    onSelectAll?: () => void;
+    onCopy?: () => void;
+    onExportImage?: () => void;
+    onToggleLegend?: () => void;
+    onToggleDebug?: () => void;
+    onEscape?: () => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+}
+export interface KeyBindingManagerOptions {
+    /** Enable keyboard shortcuts (default: true) */
+    enabled?: boolean;
+    /** Custom key bindings (merged with defaults) */
+    bindings?: KeyBinding[];
+    /** Override all default bindings (replace instead of merge) */
+    replaceDefaults?: boolean;
+    /** Callbacks for built-in actions */
+    callbacks: KeyBindingCallbacks;
+    /** Target element for keyboard events (default: document) */
+    target?: HTMLElement | Document;
+    /** Prevent default browser behavior for matched keys (default: true) */
+    preventDefault?: boolean;
+}
+export declare const DEFAULT_KEY_BINDINGS: KeyBinding[];
+export declare class KeyBindingManager {
+    private bindings;
+    private callbacks;
+    private target;
+    private enabled;
+    private preventDefault;
+    private boundHandler;
+    constructor(options: KeyBindingManagerOptions);
+    /**
+     * Attach keyboard event listeners
+     */
+    attach(): void;
+    /**
+     * Detach keyboard event listeners
+     */
+    detach(): void;
+    /**
+     * Enable/disable all keyboard shortcuts
+     */
+    setEnabled(enabled: boolean): void;
+    /**
+     * Check if keyboard shortcuts are enabled
+     */
+    isEnabled(): boolean;
+    /**
+     * Add a custom key binding
+     */
+    addBinding(binding: KeyBinding): void;
+    /**
+     * Remove a key binding by key code
+     */
+    removeBinding(key: string, modifiers?: {
+        ctrl?: boolean;
+        shift?: boolean;
+        alt?: boolean;
+    }): void;
+    /**
+     * Update an existing binding
+     */
+    updateBinding(key: string, updates: Partial<KeyBinding>): void;
+    /**
+     * Enable/disable a specific binding
+     */
+    setBindingEnabled(key: string, enabled: boolean): void;
+    /**
+     * Get all current bindings
+     */
+    getBindings(): KeyBinding[];
+    /**
+     * Get binding for a specific key
+     */
+    getBinding(key: string): KeyBinding | undefined;
+    /**
+     * Get a formatted list of all shortcuts (for help display)
+     */
+    getShortcutList(): {
+        key: string;
+        description: string;
+    }[];
+    /**
+     * Format a key binding for display
+     */
+    formatKeyBinding(binding: KeyBinding): string;
+    /**
+     * Handle keydown events
+     */
+    private handleKeyDown;
+    /**
+     * Find a binding that matches the current key event
+     */
+    private findMatchingBinding;
+    /**
+     * Execute the action for a binding
+     */
+    private executeAction;
+    /**
+     * Destroy the manager and cleanup
+     */
+    destroy(): void;
+}
+/**
+ * Create a simple key binding configuration
+ */
+export declare function createKeyBinding(key: string, action: KeyAction, options?: Partial<KeyBinding>): KeyBinding;
+/**
+ * Parse a shortcut string (e.g., "Ctrl+R") into a KeyBinding
+ */
+export declare function parseShortcut(shortcut: string, action: KeyAction): KeyBinding;

package/dist/core/layout/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Layout Module - Chart Component Positioning and Spacing
+ *
+ * Provides detailed control over:
+ * - Legend positioning and hover behavior
+ * - Crosshair/cursor value display modes
+ * - Toolbar positioning
+ * - Chart title configuration
+ * - Margins and padding
+ * - Axis layout spacing
+ */
+export * from './types';

package/dist/core/layout/types.d.ts

@@ -0,0 +1,165 @@
+/**
+ * Layout Configuration Types
+ *
+ * Provides detailed control over chart component positioning and spacing.
+ */
+/** Position presets for legend placement */
+export type LegendPositionPreset = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+export interface LegendOptions {
+    /** Show the legend (default: from theme) */
+    visible?: boolean;
+    /** Position preset or custom coordinates */
+    position?: LegendPositionPreset | {
+        x: number;
+        y: number;
+    };
+    /** Width of the legend in pixels */
+    width?: number;
+    /**
+     * Highlight series color on hover in legend (default: false)
+     * When false, series still comes to foreground but color doesn't change
+     */
+    highlightOnHover?: boolean;
+    /**
+     * Bring series to foreground (z-index) on hover in legend (default: true)
+     */
+    bringToFrontOnHover?: boolean;
+    /** Draggable legend (default: true) */
+    draggable?: boolean;
+    /** Resizable legend (default: true) */
+    resizable?: boolean;
+}
+/** Mode for displaying crosshair coordinate values */
+export type CrosshairValueMode = 'disabled' | 'corner' | 'floating';
+/** Corner positions for crosshair value display */
+export type CornerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface CrosshairOptions {
+    /** Show crosshair lines (default: true) */
+    enabled?: boolean;
+    /** Show vertical line (default: true) */
+    showVertical?: boolean;
+    /** Show horizontal line (default: true) */
+    showHorizontal?: boolean;
+    /** Line color (default: from theme) */
+    color?: string;
+    /** Line style (default: 'dashed') */
+    lineStyle?: 'solid' | 'dashed' | 'dotted';
+    /** Line width in pixels (default: 1) */
+    lineWidth?: number;
+    /** Snap to nearest data point (default: false) */
+    snapToData?: boolean;
+    /**
+     * Display mode for X,Y coordinate values (default: 'disabled')
+     * - 'disabled': Never show coordinate values
+     * - 'corner': Show values in a fixed corner position
+     * - 'floating': Show values next to the cursor
+     */
+    valueDisplayMode?: CrosshairValueMode;
+    /**
+     * Corner position when valueDisplayMode is 'corner' (default: 'top-left')
+     */
+    cornerPosition?: CornerPosition;
+    /** Value display formatting options */
+    valueFormat?: {
+        /** X value precision (default: 4) */
+        xPrecision?: number;
+        /** Y value precision (default: 4) */
+        yPrecision?: number;
+        /** Use scientific notation for large/small values */
+        scientific?: boolean;
+    };
+}
+/** Position presets for toolbar placement */
+export type ToolbarPositionPreset = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+export interface ToolbarPosition {
+    /** Horizontal position: distance from left edge in pixels or preset */
+    horizontal?: number | 'left' | 'center' | 'right';
+    /** Vertical position: distance from top edge in pixels or preset */
+    vertical?: number | 'top' | 'bottom';
+    /** Offset from calculated position */
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+}
+export interface ChartTitleOptions {
+    /** Title text */
+    text?: string;
+    /** Title visibility */
+    visible?: boolean;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font family */
+    fontFamily?: string;
+    /** Font weight */
+    fontWeight?: string | number;
+    /** Text color */
+    color?: string;
+    /** Title position */
+    position?: 'top' | 'bottom';
+    /** Alignment within position */
+    align?: 'left' | 'center' | 'right';
+    /** Padding around title */
+    padding?: number | {
+        top?: number;
+        bottom?: number;
+    };
+}
+export interface AxisLayoutOptions {
+    /** Distance between axis line and axis title in pixels */
+    titleGap?: number;
+    /** Distance between tick labels and axis line in pixels */
+    labelGap?: number;
+    /** Distance between tick marks and axis line in pixels */
+    tickGap?: number;
+    /** Padding between axis area and plot area in pixels */
+    axisPadding?: number;
+}
+export interface ChartMargins {
+    /** Top margin in pixels */
+    top?: number;
+    /** Right margin in pixels */
+    right?: number;
+    /** Bottom margin in pixels */
+    bottom?: number;
+    /** Left margin in pixels */
+    left?: number;
+}
+export interface PlotAreaPadding {
+    /** Padding inside the plot area - top */
+    top?: number;
+    /** Padding inside the plot area - right */
+    right?: number;
+    /** Padding inside the plot area - bottom */
+    bottom?: number;
+    /** Padding inside the plot area - left */
+    left?: number;
+}
+export interface LayoutOptions {
+    /** Chart title configuration */
+    title?: ChartTitleOptions;
+    /** Legend positioning and behavior */
+    legend?: LegendOptions;
+    /** Toolbar positioning */
+    toolbarPosition?: ToolbarPositionPreset | ToolbarPosition;
+    /** Crosshair/cursor configuration */
+    crosshair?: CrosshairOptions;
+    /** Chart margins (space between container and chart) */
+    margins?: ChartMargins;
+    /** Plot area padding (space inside the chart border) */
+    plotPadding?: PlotAreaPadding;
+    /** X-axis layout options */
+    xAxisLayout?: AxisLayoutOptions;
+    /** Y-axis layout options */
+    yAxisLayout?: AxisLayoutOptions;
+    /** Auto-adjust margins based on axis content (default: true) */
+    autoMargins?: boolean;
+}
+/**
+ * Default layout values
+ */
+export declare const DEFAULT_LAYOUT: Required<LayoutOptions>;
+/**
+ * Merge user layout options with defaults
+ */
+export declare function mergeLayoutOptions(userOptions?: Partial<LayoutOptions>): Required<LayoutOptions>;

package/dist/core/loading/index.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Sci Plot - Loading Indicator Module
+ *
+ * Provides visual loading/progress indicators for chart operations.
+ * Supports progress bars, spinners, and skeleton placeholders.
+ *
+ * @module loading
+ */
+export type LoadingIndicatorType = 'spinner' | 'progress' | 'skeleton' | 'pulse';
+export interface LoadingIndicatorOptions {
+    /** Indicator type (default: 'spinner') */
+    type?: LoadingIndicatorType;
+    /** Message to display (default: 'Loading...') */
+    message?: string;
+    /** Show percentage for progress type (default: true) */
+    showPercentage?: boolean;
+    /** Background overlay opacity (0-1, default: 0.7) */
+    overlayOpacity?: number;
+    /** Accent color for spinner/progress (default: '#00f2ff') */
+    accentColor?: string;
+    /** Background color (default: 'rgba(0,0,0,0.7)') */
+    backgroundColor?: string;
+    /** Text color (default: '#ffffff') */
+    textColor?: string;
+    /** Size: 'small', 'medium', 'large' (default: 'medium') */
+    size?: 'small' | 'medium' | 'large';
+    /** Custom CSS class */
+    className?: string;
+    /** Auto-hide after completion (default: true) */
+    autoHide?: boolean;
+    /** Hide delay in ms after completion (default: 300) */
+    hideDelay?: number;
+}
+export interface LoadingState {
+    /** Whether loading is in progress */
+    isLoading: boolean;
+    /** Progress value (0-100) */
+    progress: number;
+    /** Current message */
+    message: string;
+    /** Start time of loading */
+    startTime: number | null;
+    /** Estimated time remaining in ms */
+    eta: number | null;
+}
+export declare class LoadingIndicator {
+    private container;
+    private element;
+    private options;
+    private state;
+    private progressHistory;
+    constructor(container: HTMLElement, options?: LoadingIndicatorOptions);
+    /**
+     * Show the loading indicator
+     */
+    show(message?: string): void;
+    /**
+     * Hide the loading indicator
+     */
+    hide(): void;
+    /**
+     * Update progress (0-100)
+     */
+    setProgress(progress: number, message?: string): void;
+    /**
+     * Update message only
+     */
+    setMessage(message: string): void;
+    /**
+     * Check if loading is in progress
+     */
+    isLoading(): boolean;
+    /**
+     * Get current progress
+     */
+    getProgress(): number;
+    /**
+     * Get current state
+     */
+    getState(): LoadingState;
+    /**
+     * Destroy the indicator
+     */
+    destroy(): void;
+    private createElement;
+    private destroyElement;
+    private render;
+    private getInnerHtml;
+    private injectStyles;
+    private calculateEta;
+    private formatTime;
+}
+/**
+ * Create a loading indicator for a container
+ */
+export declare function createLoadingIndicator(container: HTMLElement, options?: LoadingIndicatorOptions): LoadingIndicator;
+/**
+ * Show loading with a simple spinner
+ */
+export declare function showLoading(container: HTMLElement, message?: string): LoadingIndicator;
+/**
+ * Show progress loading
+ */
+export declare function showProgress(container: HTMLElement, message?: string): LoadingIndicator;

package/dist/core/locale/index.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Sci Plot - Internationalization (i18n) Module
+ *
+ * Provides locale-aware formatting for numbers, dates, and chart UI.
+ * Supports custom format functions and predefined locales.
+ *
+ * @module locale
+ */
+export interface LocaleConfig {
+    /** Locale identifier (e.g., 'en-US', 'es-ES', 'de-DE') */
+    locale: string;
+    /** Decimal separator override (auto-detected if not specified) */
+    decimalSeparator?: string;
+    /** Thousands separator override (auto-detected if not specified) */
+    thousandsSeparator?: string;
+    /** Date format pattern (e.g., 'DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD') */
+    dateFormat?: string;
+    /** Time format pattern (e.g., 'HH:mm:ss', 'hh:mm:ss a') */
+    timeFormat?: string;
+    /** Custom number formatter */
+    numberFormatter?: (value: number, decimals?: number) => string;
+    /** Custom date formatter */
+    dateFormatter?: (date: Date) => string;
+    /** Short form labels (used in axis labels) */
+    shortLabels?: {
+        time?: string;
+        value?: string;
+        points?: string;
+    };
+    /** Full form labels (used in tooltips/panels) */
+    labels?: {
+        start?: string;
+        pause?: string;
+        reset?: string;
+        export?: string;
+        autoScale?: string;
+        pan?: string;
+        zoom?: string;
+        select?: string;
+        legend?: string;
+        fps?: string;
+        points?: string;
+        loading?: string;
+        noData?: string;
+        error?: string;
+    };
+}
+export interface LocaleFormatter {
+    /** Format a number with the locale settings */
+    formatNumber(value: number, decimals?: number): string;
+    /** Format a date with the locale settings */
+    formatDate(date: Date): string;
+    /** Format a time with the locale settings */
+    formatTime(date: Date): string;
+    /** Format a date and time with the locale settings */
+    formatDateTime(date: Date): string;
+    /** Format a number with SI prefix (k, M, G, etc.) */
+    formatWithPrefix(value: number, unit?: string): string;
+    /** Format a number in scientific notation */
+    formatScientific(value: number, decimals?: number): string;
+    /** Get a localized label */
+    getLabel(key: keyof NonNullable<LocaleConfig['labels']>): string;
+}
+export declare const LOCALE_EN_US: LocaleConfig;
+export declare const LOCALE_ES_ES: LocaleConfig;
+export declare const LOCALE_DE_DE: LocaleConfig;
+export declare const LOCALE_FR_FR: LocaleConfig;
+export declare const LOCALE_PT_BR: LocaleConfig;
+export declare const LOCALE_ZH_CN: LocaleConfig;
+export declare const LOCALE_JA_JP: LocaleConfig;
+/**
+ * Set the global locale for all charts
+ */
+export declare function setGlobalLocale(localeOrConfig: string | LocaleConfig): void;
+/**
+ * Get the current global locale
+ */
+export declare function getGlobalLocale(): LocaleConfig;
+/**
+ * Get a predefined locale by name
+ */
+export declare function getLocale(name: string): LocaleConfig | undefined;
+/**
+ * Register a custom locale
+ */
+export declare function registerLocale(name: string, config: LocaleConfig): void;
+/**
+ * Create a locale formatter from a configuration
+ */
+export declare function createLocaleFormatter(config?: LocaleConfig | string): LocaleFormatter;
+export declare const defaultFormatter: LocaleFormatter;

package/dist/core/responsive/ResponsiveManager.d.ts

@@ -0,0 +1,133 @@
+import { ChartTheme } from '../../theme';
+
+/** Breakpoint configuration */
+export interface ResponsiveBreakpoint {
+    /** Maximum width for this breakpoint (undefined = unlimited) */
+    maxWidth?: number;
+    /** Minimum width for this breakpoint (undefined = 0) */
+    minWidth?: number;
+    /** Font size multiplier (default: 1) */
+    fontScale?: number;
+    /** Number of X-axis ticks */
+    xTickCount?: number;
+    /** Number of Y-axis ticks */
+    yTickCount?: number;
+    /** Point size multiplier */
+    pointScale?: number;
+    /** Line width multiplier */
+    lineScale?: number;
+    /** Hit radius multiplier for touch targets */
+    hitRadiusScale?: number;
+    /** Whether to show legend */
+    showLegend?: boolean;
+    /** Legend position override */
+    legendPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+/** Preset breakpoints */
+export interface ResponsiveBreakpoints {
+    smallMobile?: ResponsiveBreakpoint;
+    mobile?: ResponsiveBreakpoint;
+    tablet?: ResponsiveBreakpoint;
+    desktop?: ResponsiveBreakpoint;
+}
+/** Full responsive configuration */
+export interface ResponsiveConfig {
+    /** Enable responsive behavior (default: true) */
+    enabled?: boolean;
+    /** Custom breakpoints (overrides presets) */
+    breakpoints?: ResponsiveBreakpoints;
+    /** Optimize for touch interactions (default: auto-detect) */
+    touchOptimized?: boolean | 'auto';
+    /** Respect user's reduced motion preference (default: true) */
+    reducedMotion?: boolean | 'auto';
+    /** Debounce time for resize events in ms (default: 100) */
+    resizeDebounce?: number;
+}
+/** Current responsive state */
+export interface ResponsiveState {
+    /** Current container width */
+    width: number;
+    /** Current container height */
+    height: number;
+    /** Active breakpoint name */
+    breakpoint: 'smallMobile' | 'mobile' | 'tablet' | 'desktop';
+    /** Whether touch is optimized */
+    touchOptimized: boolean;
+    /** Whether reduced motion is enabled */
+    reducedMotion: boolean;
+    /** Computed scale factors */
+    scales: {
+        font: number;
+        point: number;
+        line: number;
+        hitRadius: number;
+    };
+    /** Computed tick counts */
+    ticks: {
+        x: number;
+        y: number;
+    };
+}
+/** Context for responsive operations */
+export interface ResponsiveContext {
+    container: HTMLDivElement;
+    onStateChange: (state: ResponsiveState) => void;
+}
+export declare class ResponsiveManager {
+    private ctx;
+    private config;
+    private state;
+    private resizeObserver;
+    private debounceTimer;
+    private destroyed;
+    constructor(ctx: ResponsiveContext, config?: ResponsiveConfig);
+    private mergeConfig;
+    configure(config: Partial<ResponsiveConfig>): void;
+    getConfig(): ResponsiveConfig;
+    setEnabled(enabled: boolean): void;
+    isEnabled(): boolean;
+    getState(): ResponsiveState;
+    /**
+     * Manually trigger a state update
+     */
+    update(): void;
+    private computeState;
+    private getActiveBreakpoint;
+    private detectTouchOptimization;
+    private detectReducedMotion;
+    private hasStateChanged;
+    private setupResizeObserver;
+    private handleResize;
+    /**
+     * Apply responsive scaling to a theme
+     */
+    scaleTheme(theme: ChartTheme): ChartTheme;
+    /**
+     * Get scaled point size
+     */
+    getScaledPointSize(baseSize: number): number;
+    /**
+     * Get scaled line width
+     */
+    getScaledLineWidth(baseWidth: number): number;
+    /**
+     * Get scaled hit radius
+     */
+    getScaledHitRadius(baseRadius: number): number;
+    /**
+     * Get recommended tick counts
+     */
+    getTickCounts(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Check if legend should be shown at current breakpoint
+     */
+    shouldShowLegend(): boolean;
+    /**
+     * Get legend position for current breakpoint
+     */
+    getLegendPosition(): 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    destroy(): void;
+}

package/dist/core/responsive/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Responsive module exports
+ */
+export { ResponsiveManager, type ResponsiveBreakpoint, type ResponsiveBreakpoints, type ResponsiveConfig, type ResponsiveState, type ResponsiveContext, } from './ResponsiveManager';