@asymmetric-effort/specifyjs 0.2.98 → 0.2.100

package/dist/specifyjs-components.d.ts

@@ -1,3334 +1 @@
-import * as specifyjs_shared_types from 'specifyjs/shared/types';
-
-interface AnalogClockProps {
-    /** Display format: '12h' or '24h' — in 24h, show 0-23 hour numbers */
-    format?: '12h' | '24h';
-    /** Clock face size in pixels */
-    size?: number;
-    /** Show date below the clock */
-    showDate?: boolean;
-    /** Date format: 'short' (MM/DD/YYYY), 'long' (Month DD, YYYY), 'iso' (YYYY-MM-DD) */
-    dateFormat?: 'short' | 'long' | 'iso';
-    /** Show second hand */
-    showSeconds?: boolean;
-    /** Custom timezone */
-    timezone?: string;
-    /** CSS className */
-    className?: string;
-}
-declare function AnalogClock(props: AnalogClockProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface AvatarProps {
-    /** Image source URL */
-    src?: string;
-    /** Alt text for image */
-    alt?: string;
-    /** User's name (used to generate initials fallback) */
-    name?: string;
-    /** Size preset or pixel number */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
-    /** Shape of the avatar */
-    shape?: 'circle' | 'square';
-    /** Background color for initials/fallback */
-    fallbackColor?: string;
-    /** Online status indicator */
-    status?: 'online' | 'offline' | 'busy' | 'away';
-    /** Position of the status dot */
-    statusPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-}
-declare function Avatar(props: AvatarProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface BadgeProps {
-    /** Numeric count to display */
-    count?: number;
-    /** Maximum count before showing "N+" */
-    max?: number;
-    /** Show a dot instead of a count */
-    dot?: boolean;
-    /** Badge color */
-    color?: string;
-    /** Size preset */
-    size?: 'sm' | 'md' | 'lg';
-    /** Visual variant */
-    variant?: 'solid' | 'outline';
-    /** Child element to overlay the badge on */
-    children?: unknown;
-}
-declare function Badge(props: BadgeProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface DataGridColumn {
-    /** Property key in the row data */
-    key: string;
-    /** Display header text */
-    header: string;
-    /** Column width (CSS value) */
-    width?: string;
-    /** Whether this column is sortable */
-    sortable?: boolean;
-    /** Whether this column shows a filter input */
-    filterable?: boolean;
-    /** Custom cell renderer */
-    render?: (value: unknown, row: Record<string, unknown>) => unknown;
-}
-interface DataGridProps {
-    /** Column definitions */
-    columns: DataGridColumn[];
-    /** Row data */
-    data: Record<string, unknown>[];
-    /** Rows per page (enables pagination when set) */
-    pageSize?: number;
-    /** Current page index (0-based) */
-    currentPage?: number;
-    /** Page change handler */
-    onPageChange?: (page: number) => void;
-    /** Current sort column key */
-    sortBy?: string;
-    /** Sort direction */
-    sortDir?: 'asc' | 'desc';
-    /** Sort change handler */
-    onSort?: (columnKey: string, direction: 'asc' | 'desc') => void;
-    /** Enable row selection checkboxes */
-    selectable?: boolean;
-    /** Currently selected row indices */
-    selectedRows?: number[];
-    /** Selection change handler */
-    onSelectionChange?: (selectedIndices: number[]) => void;
-    /** Alternate row background colors */
-    striped?: boolean;
-    /** Show cell borders */
-    bordered?: boolean;
-    /** Compact row height */
-    compact?: boolean;
-    /** Sticky header on scroll */
-    stickyHeader?: boolean;
-}
-declare function DataGrid(props: DataGridProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface DigitalClockProps {
-    /** Display format: '12h' for AM/PM or '24h' for 24-hour */
-    format?: '12h' | '24h';
-    /** Show date display */
-    showDate?: boolean;
-    /** Date format: 'short' (MM/DD/YYYY), 'long' (Month DD, YYYY), 'iso' (YYYY-MM-DD) */
-    dateFormat?: 'short' | 'long' | 'iso';
-    /** Show seconds */
-    showSeconds?: boolean;
-    /** Custom timezone (e.g., 'America/New_York') */
-    timezone?: string;
-    /** CSS className */
-    className?: string;
-}
-declare function DigitalClock(props: DigitalClockProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ListViewProps {
-    /** Array of items to render */
-    items: unknown[];
-    /** Render function for each item */
-    renderItem: (item: unknown, index: number) => unknown;
-    /** Unique key extractor per item */
-    keyExtractor: (item: unknown, index: number) => string;
-    /** Show divider between items */
-    divider?: boolean;
-    /** Highlight items on hover */
-    hoverable?: boolean;
-    /** Currently selected item index */
-    selectedIndex?: number;
-    /** Selection handler */
-    onSelect?: (index: number) => void;
-    /** Message shown when items is empty */
-    emptyMessage?: string;
-    /** Optional header element */
-    header?: unknown;
-    /** Optional footer element */
-    footer?: unknown;
-}
-declare function ListView(props: ListViewProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface TagProps {
-    /** Tag label text */
-    label: string;
-    /** Color theme (CSS color or named color) */
-    color?: string;
-    /** Visual variant */
-    variant?: 'solid' | 'outline' | 'subtle';
-    /** Size preset */
-    size?: 'sm' | 'md' | 'lg';
-    /** Show remove/close button */
-    removable?: boolean;
-    /** Remove button handler */
-    onRemove?: () => void;
-    /** Leading icon element */
-    icon?: unknown;
-    /** Click handler (makes tag interactive) */
-    onClick?: () => void;
-    /** Disabled state */
-    disabled?: boolean;
-}
-declare function Tag(props: TagProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface VirtualScrollProps {
-    /** Full array of items */
-    items: unknown[];
-    /** Render function for a single item */
-    renderItem: (item: unknown, index: number) => unknown;
-    /** Fixed height of each item in pixels */
-    itemHeight: number;
-    /** Extra items rendered above/below the viewport */
-    overscan?: number;
-    /** Container height (CSS value, e.g. '400px' or '100%') */
-    height: string;
-}
-declare function VirtualScroll(props: VirtualScrollProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface AlertAction {
-    label: string;
-    onClick: () => void;
-}
-interface AlertProps {
-    /** Alert severity type */
-    type?: 'info' | 'success' | 'warning' | 'error';
-    /** Alert title */
-    title?: string;
-    /** Alert message (children) */
-    message?: unknown;
-    /** Children alias for message */
-    children?: unknown;
-    /** Show close button */
-    closable?: boolean;
-    /** Close callback */
-    onClose?: () => void;
-    /** Custom icon text/emoji; auto-selected by type if omitted */
-    icon?: string;
-    /** Style variant */
-    variant?: 'filled' | 'outline' | 'subtle';
-    /** Optional action button */
-    action?: AlertAction;
-}
-declare function Alert(props: AlertProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props> | null;
-
-interface EmptyStateAction {
-    label: string;
-    onClick: () => void;
-}
-interface EmptyStateProps {
-    /** Large icon or emoji displayed at the top */
-    icon?: string;
-    /** Title text */
-    title?: string;
-    /** Description text */
-    description?: string;
-    /** Call-to-action button */
-    action?: EmptyStateAction;
-    /** Image URL displayed instead of / above the icon */
-    image?: string;
-}
-declare function EmptyState(props: EmptyStateProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ProgressBarProps {
-    /** Current progress value (0-100) */
-    value?: number;
-    /** Maximum value (default: 100) */
-    max?: number;
-    /** Fill color */
-    color?: string;
-    /** Track background color */
-    backgroundColor?: string;
-    /** Bar height (CSS value) */
-    height?: string;
-    /** Show percentage label */
-    showLabel?: boolean;
-    /** Enable shimmer animation on the filled portion */
-    animated?: boolean;
-    /** Display variant */
-    variant?: 'bar' | 'circular';
-    /** Size for circular variant or bar height shorthand */
-    size?: number | string;
-    /** Indeterminate mode -- animated without a specific value */
-    indeterminate?: boolean;
-}
-declare function ProgressBar(props: ProgressBarProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface SkeletonProps {
-    /** Shape variant */
-    variant?: 'text' | 'circular' | 'rectangular';
-    /** Width (CSS value) */
-    width?: string | number;
-    /** Height (CSS value) */
-    height?: string | number;
-    /** Number of text lines to render (text variant only) */
-    lines?: number;
-    /** Enable shimmer animation (default: true) */
-    animated?: boolean;
-    /** Border radius (CSS value) */
-    borderRadius?: string;
-}
-declare function Skeleton(props: SkeletonProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface SpinnerProps {
-    /** Spinner size: preset name or pixel number */
-    size?: 'sm' | 'md' | 'lg' | number;
-    /** Spinner color */
-    color?: string;
-    /** Stroke thickness in pixels */
-    thickness?: number;
-    /** Animation speed */
-    speed?: 'slow' | 'normal' | 'fast';
-    /** Accessible label for screen readers */
-    label?: string;
-}
-declare function Spinner(props: SpinnerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface CheckboxProps {
-    /** Whether checkbox is checked */
-    checked: boolean;
-    /** Change handler */
-    onChange: (checked: boolean) => void;
-    /** Label text */
-    label?: string;
-    /** Indeterminate state (overrides checkmark display) */
-    indeterminate?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Error message */
-    error?: string;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function Checkbox(props: CheckboxProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ColorPickerProps {
-    /** Current color value as hex string (e.g. '#ff0000') */
-    value: string;
-    /** Change handler, receives hex string */
-    onChange: (value: string) => void;
-    /** Preset color swatches */
-    presets?: string[];
-    /** Show hex text input */
-    showInput?: boolean;
-    /** Show alpha/opacity slider (future: reserved) */
-    showAlpha?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Label text */
-    label?: string;
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function ColorPicker(props: ColorPickerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ColorWheelProps {
-    /** Current color value (hex string) */
-    value?: string;
-    /** Called when color changes */
-    onChange?: (color: string) => void;
-    /** Swatch size in pixels (default: 32) */
-    size?: number;
-    /** Whether to show hex label below swatch (default: true) */
-    showLabel?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Label text */
-    label?: string;
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function ColorWheel(props: ColorWheelProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface DatePickerProps {
-    /** Current value (Date object or 'YYYY-MM-DD' string) */
-    value: Date | string | null;
-    /** Change handler, receives ISO date string */
-    onChange: (value: string) => void;
-    /** Display format (default 'YYYY-MM-DD') */
-    format?: string;
-    /** Earliest selectable date */
-    minDate?: Date | string;
-    /** Latest selectable date */
-    maxDate?: Date | string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Label text */
-    label?: string;
-    /** Error message */
-    error?: string;
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function DatePicker(props: DatePickerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface FileUploadProps {
-    /** Change handler, receives array of selected files */
-    onChange: (files: File[]) => void;
-    /** Accepted file types (e.g. 'image/*,.pdf') */
-    accept?: string;
-    /** Allow multiple file selection */
-    multiple?: boolean;
-    /** Maximum file size in bytes */
-    maxSize?: number;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Label text */
-    label?: string;
-    /** Help text */
-    helpText?: string;
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function FileUpload(props: FileUploadProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface FormFieldWrapperStyle {
-    /** Container font family */
-    fontFamily?: string;
-    /** Container font size (default: '14px') */
-    fontSize?: string;
-    /** Label color (default: '#374151') */
-    labelColor?: string;
-    /** Label font weight (default: '500') */
-    labelFontWeight?: string;
-    /** Label font size (default: '14px') */
-    labelFontSize?: string;
-    /** Help text color (default: '#6b7280') */
-    helpColor?: string;
-    /** Error text color (default: '#ef4444') */
-    errorColor?: string;
-    /** Error border color applied to child (default: '#ef4444') */
-    errorBorderColor?: string;
-    /** Focus border color hint (default: '#3b82f6') */
-    focusBorderColor?: string;
-    /** Gap between label/field/help (default: '4px') */
-    gap?: string;
-    /** Width (default: '100%') */
-    width?: string | number;
-    /** Custom overrides */
-    custom?: Record<string, string>;
-}
-interface FormFieldWrapperProps {
-    /** Label text */
-    label?: string;
-    /** HTML id to link label to input via htmlFor */
-    htmlFor?: string;
-    /** Help / description text shown below the field */
-    helpText?: string;
-    /** Error message — when set, field enters error state */
-    error?: string;
-    /** Show required asterisk (default: false) */
-    required?: boolean;
-    /** Disabled state (default: false) */
-    disabled?: boolean;
-    /** Styling */
-    styling?: FormFieldWrapperStyle;
-    /** Extra class */
-    className?: string;
-    /** The form control (children) */
-    children?: unknown;
-}
-declare function FormFieldWrapper(props: FormFieldWrapperProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-/**
- * Shared input styling builder used by textfield, multiline, texteditor.
- */
-interface InputBaseStyle {
-    padding?: string;
-    border?: string;
-    borderRadius?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    backgroundColor?: string;
-    color?: string;
-    focusBorderColor?: string;
-    errorBorderColor?: string;
-    transition?: string;
-    custom?: Record<string, string>;
-}
-declare function buildInputStyle(s: InputBaseStyle, state: {
-    focused: boolean;
-    error: boolean;
-}): Record<string, string>;
-
-interface MultilineFieldProps {
-    /** Current value (controlled) */
-    value?: string;
-    /** Default value (uncontrolled) */
-    defaultValue?: string;
-    /** Change handler */
-    onChange?: (value: string) => void;
-    /** Blur handler */
-    onBlur?: (value: string) => void;
-    /** Placeholder */
-    placeholder?: string;
-    /** HTML name */
-    name?: string;
-    /** HTML id */
-    id?: string;
-    /** Number of visible rows (default: 4) */
-    rows?: number;
-    /** Max length */
-    maxLength?: number;
-    /** Auto-resize to fit content (default: false) */
-    autoResize?: boolean;
-    /** Min height when auto-resizing */
-    minHeight?: string;
-    /** Max height when auto-resizing */
-    maxHeight?: string;
-    /** Read-only */
-    readOnly?: boolean;
-    /** Disabled */
-    disabled?: boolean;
-    /** Show character count (default: false) */
-    showCount?: boolean;
-    label?: string;
-    helpText?: string;
-    error?: string;
-    required?: boolean;
-    wrapperStyle?: FormFieldWrapperStyle;
-    inputStyle?: InputBaseStyle;
-    className?: string;
-}
-declare function MultilineField(props: MultilineFieldProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface NumberSpinnerProps {
-    /** Current numeric value */
-    value: number;
-    /** Change handler */
-    onChange: (value: number) => void;
-    /** Minimum allowed value */
-    min?: number;
-    /** Maximum allowed value */
-    max?: number;
-    /** Step increment */
-    step?: number;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Prefix text (e.g. '$') */
-    prefix?: string;
-    /** Suffix text (e.g. 'kg') */
-    suffix?: string;
-    /** Label text */
-    label?: string;
-    /** Error message */
-    error?: string;
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function NumberSpinner(props: NumberSpinnerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface RadioOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-interface RadioGroupProps {
-    /** Available options */
-    options: RadioOption[];
-    /** Currently selected value */
-    value: string;
-    /** Change handler */
-    onChange: (value: string) => void;
-    /** Name attribute for the radio group */
-    name: string;
-    /** Layout direction */
-    direction?: 'horizontal' | 'vertical';
-    /** Disabled state for entire group */
-    disabled?: boolean;
-    /** Error message */
-    error?: string;
-    /** Label for the group */
-    label?: string;
-    /** HTML id for the radio group */
-    id?: string;
-}
-declare function RadioGroup(props: RadioGroupProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface SelectOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    group?: string;
-}
-interface SelectProps {
-    /** Available options */
-    options: SelectOption[];
-    /** Current selected value (string for single, string[] for multiple) */
-    value: string | string[];
-    /** Change handler */
-    onChange: (value: string | string[]) => void;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Enable search/filter by typing */
-    searchable?: boolean;
-    /** Allow multiple selection */
-    multiple?: boolean;
-    /** Show clear button */
-    clearable?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Error message */
-    error?: string;
-    /** Label text */
-    label?: string;
-    /** Help text */
-    helpText?: string;
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function Select(props: SelectProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface SliderMark {
-    value: number;
-    label: string;
-}
-interface SliderProps {
-    /** Current value (number for single, [number, number] for range) */
-    value: number | [number, number];
-    /** Change handler */
-    onChange: (value: number | [number, number]) => void;
-    /** Minimum value */
-    min?: number;
-    /** Maximum value */
-    max?: number;
-    /** Step increment */
-    step?: number;
-    /** Show current value label above thumb */
-    showValue?: boolean;
-    /** Show tick marks at each step */
-    showTicks?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Named marks along the track */
-    marks?: SliderMark[];
-    /** Enable range mode (dual handles) */
-    range?: boolean;
-    /** Label text */
-    label?: string;
-    /** Error message */
-    error?: string;
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function Slider(props: SliderProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface TextEditorProps {
-    /** Initial HTML content */
-    value?: string;
-    /** Change handler — receives HTML string */
-    onChange?: (html: string) => void;
-    /** Blur handler */
-    onBlur?: (html: string) => void;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Minimum height of editing area (default: '200px') */
-    minHeight?: string;
-    /** Maximum height (default: none — grows to fit) */
-    maxHeight?: string;
-    /** Read-only */
-    readOnly?: boolean;
-    /** Disabled */
-    disabled?: boolean;
-    /** Which toolbar buttons to show (default: all) */
-    toolbar?: ToolbarButton[];
-    /** HTML id */
-    id?: string;
-    toolbarStyle?: {
-        backgroundColor?: string;
-        borderBottom?: string;
-        buttonColor?: string;
-        buttonHoverBackground?: string;
-        buttonActiveBackground?: string;
-        buttonSize?: string;
-    };
-    editorStyle?: {
-        padding?: string;
-        backgroundColor?: string;
-        color?: string;
-        fontFamily?: string;
-        fontSize?: string;
-        lineHeight?: string;
-    };
-    label?: string;
-    helpText?: string;
-    error?: string;
-    required?: boolean;
-    wrapperStyle?: FormFieldWrapperStyle;
-}
-type ToolbarButton = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'heading1' | 'heading2' | 'heading3' | 'bulletList' | 'orderedList' | 'blockquote' | 'link' | 'unlink' | 'insertHR' | 'removeFormat' | 'undo' | 'redo';
-declare function TextEditor(props: TextEditorProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface TextFieldProps {
-    /** Current value (controlled) */
-    value?: string;
-    /** Default value (uncontrolled) */
-    defaultValue?: string;
-    /** Change handler */
-    onChange?: (value: string) => void;
-    /** Input event handler (fires on every keystroke) */
-    onInput?: (value: string) => void;
-    /** Blur handler */
-    onBlur?: (value: string) => void;
-    /** Enter key handler */
-    onEnter?: (value: string) => void;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Input type (default: 'text') */
-    type?: 'text' | 'password' | 'email' | 'url' | 'tel' | 'search' | 'number';
-    /** HTML name attribute */
-    name?: string;
-    /** HTML id */
-    id?: string;
-    /** Max length */
-    maxLength?: number;
-    /** Pattern for validation */
-    pattern?: string;
-    /** Auto-complete hint */
-    autoComplete?: string;
-    /** Autofocus on mount */
-    autoFocus?: boolean;
-    /** Read-only */
-    readOnly?: boolean;
-    /** Disabled */
-    disabled?: boolean;
-    /** Prefix element (icon, text) */
-    prefix?: unknown;
-    /** Suffix element (icon, button) */
-    suffix?: unknown;
-    label?: string;
-    helpText?: string;
-    error?: string;
-    required?: boolean;
-    wrapperStyle?: FormFieldWrapperStyle;
-    inputStyle?: InputBaseStyle;
-    /** Extra class on the input */
-    className?: string;
-}
-declare function TextField(props: TextFieldProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface TimePickerProps {
-    /** Current value in 'HH:MM' or 'HH:MM:SS' format (24h) */
-    value: string;
-    /** Change handler, receives 'HH:MM' or 'HH:MM:SS' string in 24h format */
-    onChange: (value: string) => void;
-    /** Display format */
-    format?: '12h' | '24h';
-    /** Minute increment step */
-    minuteStep?: number;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Label text */
-    label?: string;
-    /** Error message */
-    error?: string;
-    /** When true, show a seconds spinner (default false) */
-    showSeconds?: boolean;
-    /** If provided, display a timezone label next to the time */
-    timezone?: string;
-    /** When true, show a timezone dropdown selector (default false) */
-    showTimezone?: boolean;
-    /** List of timezone strings for the dropdown */
-    timezones?: string[];
-    /** Callback when timezone changes */
-    onTimezoneChange?: (tz: string) => void;
-    /** HTML id for the input element */
-    id?: string;
-}
-declare function TimePicker(props: TimePickerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ToggleProps {
-    /** Whether toggle is on */
-    checked: boolean;
-    /** Change handler */
-    onChange: (checked: boolean) => void;
-    /** Label text */
-    label?: string;
-    /** Label position relative to toggle */
-    labelPosition?: 'left' | 'right';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Track color when on */
-    onColor?: string;
-    /** Track color when off */
-    offColor?: string;
-}
-declare function Toggle(props: ToggleProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface CardProps {
-    /** Card title displayed in the header */
-    title?: string;
-    /** Subtitle shown below the title */
-    subtitle?: string;
-    /** Slot rendered at the trailing edge of the header (e.g. action button) */
-    headerAction?: unknown;
-    /** Slot rendered as the card footer */
-    footer?: unknown;
-    /** URL for a top image */
-    image?: string;
-    /** Alt text for the top image */
-    imageAlt?: string;
-    /** Enable hover elevation effect (default: false) */
-    hoverable?: boolean;
-    /** Show border (default: true) */
-    bordered?: boolean;
-    /** Shadow level: 'none' | 'sm' | 'md' | 'lg' (default: 'sm') */
-    shadow?: 'none' | 'sm' | 'md' | 'lg';
-    /** Inner padding (CSS value, default: '16px') */
-    padding?: string;
-    /** Border radius (CSS value, default: '8px') */
-    borderRadius?: string;
-    /** Extra inline styles */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-    /** Body content */
-    children?: unknown;
-}
-declare function Card(props: CardProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface FlexContainerProps {
-    /** flex-direction (default: 'row') */
-    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
-    /** flex-wrap (default: 'nowrap') */
-    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
-    /** Gap between items (CSS value) */
-    gap?: string;
-    /** CSS align-items */
-    alignItems?: string;
-    /** CSS justify-content */
-    justifyContent?: string;
-    /** Use inline-flex instead of flex */
-    inline?: boolean;
-    /** Extra inline styles */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-    /** Children */
-    children?: unknown;
-}
-interface FlexItemProps {
-    /** Shorthand flex property (e.g. '1 1 auto') */
-    flex?: string;
-    /** flex-grow */
-    grow?: number;
-    /** flex-shrink */
-    shrink?: number;
-    /** flex-basis */
-    basis?: string;
-    /** align-self override */
-    alignSelf?: string;
-    /** order */
-    order?: number;
-    /** Extra inline styles */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-    /** Children */
-    children?: unknown;
-}
-declare function FlexContainer(props: FlexContainerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-declare function FlexItem(props: FlexItemProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface GridBreakpoint {
-    /** Min-width media query value (e.g. '768px') */
-    minWidth: string;
-    /** Column template override at this breakpoint */
-    columns?: number | string;
-    /** Row template override */
-    rows?: string;
-    /** Gap override */
-    gap?: string;
-}
-interface GridProps {
-    /** Number of equal columns or a CSS grid-template-columns string */
-    columns?: number | string;
-    /** CSS grid-template-rows value */
-    rows?: string;
-    /** Gap between grid cells (CSS value, e.g. '16px' or '1rem 2rem') */
-    gap?: string;
-    /** CSS align-items for the grid container */
-    alignItems?: string;
-    /** CSS justify-items for the grid container */
-    justifyItems?: string;
-    /** When set, uses auto-fit with minmax(minColWidth, 1fr) */
-    minColWidth?: string;
-    /** Named grid areas (grid-template-areas lines) */
-    areas?: string[];
-    /** Responsive breakpoints — rendered as inline style overrides via CSS custom properties */
-    responsive?: GridBreakpoint[];
-    /** Extra inline styles */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-    /** Children */
-    children?: unknown;
-}
-interface GridItemProps {
-    /** grid-column value (e.g. 'span 2', '1 / 3') */
-    gridColumn?: string;
-    /** grid-row value */
-    gridRow?: string;
-    /** grid-area name */
-    gridArea?: string;
-    /** CSS align-self */
-    alignSelf?: string;
-    /** CSS justify-self */
-    justifySelf?: string;
-    /** Extra inline styles */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-    /** Children */
-    children?: unknown;
-}
-declare function Grid(props: GridProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-declare function GridItem(props: GridItemProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface PanelProps {
-    /** Panel title */
-    title?: string;
-    /** Whether the panel can be collapsed (default: false) */
-    collapsible?: boolean;
-    /** Initial collapsed state when collapsible (default: false) */
-    defaultCollapsed?: boolean;
-    /** Icon element rendered before the title */
-    icon?: unknown;
-    /** Slot rendered at the trailing edge of the header */
-    headerRight?: unknown;
-    /** Show border (default: true) */
-    bordered?: boolean;
-    /** Shadow: 'none' | 'sm' | 'md' (default: 'none') */
-    shadow?: 'none' | 'sm' | 'md';
-    /** Extra inline styles */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-    /** Body content */
-    children?: unknown;
-}
-declare function Panel(props: PanelProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ScrollContainerProps {
-    /** Maximum height (CSS value) */
-    maxHeight?: string;
-    /** Maximum width (CSS value) */
-    maxWidth?: string;
-    /** Scroll direction (default: 'vertical') */
-    direction?: 'vertical' | 'horizontal' | 'both';
-    /** Scrollbar visibility (default: 'auto') */
-    showScrollbar?: 'auto' | 'always' | 'hover' | 'never';
-    /** Inner padding (CSS value) */
-    padding?: string;
-    /** Show inset shadow at scroll edges to hint overflow (default: false) */
-    shadow?: boolean;
-    /** Extra inline styles */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-    /** Children */
-    children?: unknown;
-}
-declare function ScrollContainer(props: ScrollContainerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface SplitterProps {
-    /** Split direction (default: 'horizontal' — left|right panes) */
-    direction?: 'horizontal' | 'vertical';
-    /** Initial split percentage for the first pane (default: 50) */
-    initialSplit?: number;
-    /** Minimum size of either pane in px (default: 50) */
-    minSize?: number;
-    /** Maximum size of the first pane in px */
-    maxSize?: number;
-    /** Divider bar width/height in px (default: 6) */
-    dividerSize?: number;
-    /** Extra inline styles for the container */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-    /** Exactly two children */
-    children?: unknown[];
-}
-declare function Splitter(props: SplitterProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface TabDefinition {
-    /** Unique tab identifier */
-    id: string;
-    /** Display label */
-    label: string;
-    /** Optional icon element */
-    icon?: unknown;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Tab panel content */
-    content: unknown;
-}
-interface TabsProps {
-    /** Tab definitions */
-    tabs: TabDefinition[];
-    /** Controlled active tab id */
-    activeTab?: string;
-    /** Change handler (receives tab id) */
-    onChange?: (tabId: string) => void;
-    /** Tab list position (default: 'top') */
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    /** Visual variant (default: 'line') */
-    variant?: 'line' | 'card' | 'pill';
-    /** Extra inline styles */
-    style?: Record<string, string>;
-    /** Extra class name */
-    className?: string;
-}
-declare function Tabs(props: TabsProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface CarouselItem {
-    content: unknown;
-    caption?: string;
-}
-interface CarouselProps {
-    /** Carousel items */
-    items: CarouselItem[];
-    /** Enable auto-advance */
-    autoPlay?: boolean;
-    /** Auto-advance interval in ms (default: 5000) */
-    interval?: number;
-    /** Show dot indicators (default: true) */
-    showDots?: boolean;
-    /** Show prev/next arrows (default: true) */
-    showArrows?: boolean;
-    /** Loop from last to first (default: true) */
-    loop?: boolean;
-    /** Transition animation type */
-    animation?: 'slide' | 'fade';
-    /** Called when the active index changes */
-    onChange?: (index: number) => void;
-}
-declare function Carousel(props: CarouselProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ImageProps {
-    /** Image source URL */
-    src: string;
-    /** Alt text */
-    alt?: string;
-    /** Width (CSS value or number) */
-    width?: string | number;
-    /** Height (CSS value or number) */
-    height?: string | number;
-    /** Fallback URL or element shown on error */
-    fallback?: string | unknown;
-    /** Placeholder shown while loading: 'blur', 'skeleton', or element */
-    placeholder?: 'blur' | 'skeleton' | unknown;
-    /** Enable lazy loading (default: true) */
-    lazy?: boolean;
-    /** CSS object-fit value */
-    objectFit?: string;
-    /** CSS border-radius value */
-    borderRadius?: string;
-    /** Caption text rendered below the image */
-    caption?: string;
-}
-declare function Image(props: ImageProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface VideoPlayerProps {
-    /** Video source URL */
-    src: string;
-    /** Poster image URL */
-    poster?: string;
-    /** Width (CSS value or number) */
-    width?: string | number;
-    /** Height (CSS value or number) */
-    height?: string | number;
-    /** Auto-play video */
-    autoPlay?: boolean;
-    /** Loop playback */
-    loop?: boolean;
-    /** Muted */
-    muted?: boolean;
-    /** Show custom controls (default: true) */
-    controls?: boolean;
-    /** Play callback */
-    onPlay?: () => void;
-    /** Pause callback */
-    onPause?: () => void;
-    /** Ended callback */
-    onEnded?: () => void;
-    /** Time update callback */
-    onTimeUpdate?: (currentTime: number, duration: number) => void;
-}
-declare function VideoPlayer(props: VideoPlayerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-type NavOrientation = 'horizontal' | 'vertical';
-interface NavWrapperStyle {
-    /** Background color (default: '#ffffff') */
-    backgroundColor?: string;
-    /** Text color (default: '#1f2937') */
-    color?: string;
-    /** Font family (default: inherit) */
-    fontFamily?: string;
-    /** Font size (default: '14px') */
-    fontSize?: string;
-    /** Border (default: '1px solid #e5e7eb') */
-    border?: string;
-    /** Border radius (default: '8px') */
-    borderRadius?: string;
-    /** Padding (default: '0') */
-    padding?: string;
-    /** Box shadow (default: none) */
-    boxShadow?: string;
-    /** Width (default: 'auto') */
-    width?: string | number;
-    /** Max height for scrollable content (default: none) */
-    maxHeight?: string | number;
-    /** Custom inline styles merged last */
-    custom?: Record<string, string>;
-}
-interface NavWrapperProps {
-    /** Orientation of child items (default: 'vertical') */
-    orientation?: NavOrientation;
-    /** ARIA role (default: 'navigation') */
-    role?: string;
-    /** ARIA label */
-    ariaLabel?: string;
-    /** Styling configuration */
-    styling?: NavWrapperStyle;
-    /** Extra CSS class name */
-    className?: string;
-    /** Enable keyboard navigation with arrow keys (default: true) */
-    keyboardNav?: boolean;
-    /** Children */
-    children?: unknown;
-}
-declare function NavWrapper(props: NavWrapperProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-interface NavItemStyle {
-    /** Padding (default: '10px 16px') */
-    padding?: string;
-    /** Hover background (default: '#f3f4f6') */
-    hoverBackground?: string;
-    /** Active/selected background (default: '#eff6ff') */
-    activeBackground?: string;
-    /** Active text color (default: '#2563eb') */
-    activeColor?: string;
-    /** Border bottom between items (default: none) */
-    separator?: string;
-    /** Cursor (default: 'pointer') */
-    cursor?: string;
-    /** Transition (default: 'background-color 0.15s') */
-    transition?: string;
-}
-/**
- * Build common inline styles for a navigation item.
- */
-declare function buildNavItemStyle(s: NavItemStyle, state: {
-    hover: boolean;
-    active: boolean;
-}): Record<string, string>;
-/**
- * useHover — simple hover state hook for nav items.
- */
-declare function useHover(): {
-    hover: boolean;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-};
-
-interface AccordionSection {
-    /** Unique identifier for the section */
-    id: string;
-    /** Text displayed in the section header */
-    header: string;
-    /** Content rendered when the section is expanded */
-    content: unknown;
-    /** Optional icon displayed in the header */
-    icon?: string;
-    /** When true, section cannot be toggled */
-    disabled?: boolean;
-}
-interface AccordionHeaderStyle {
-    padding?: string;
-    backgroundColor?: string;
-    hoverBackground?: string;
-    color?: string;
-    fontWeight?: string;
-    fontSize?: string;
-    borderBottom?: string;
-}
-interface AccordionContentStyle {
-    padding?: string;
-    backgroundColor?: string;
-    borderBottom?: string;
-}
-interface AccordionProps {
-    /** Array of sections to render */
-    sections: AccordionSection[];
-    /** IDs of sections that should be expanded on initial render */
-    defaultExpanded?: string[];
-    /** Allow multiple sections to be open at the same time (default: false) */
-    allowMultiple?: boolean;
-    /** Styling for section headers */
-    headerStyle?: AccordionHeaderStyle;
-    /** Styling for section content panels */
-    contentStyle?: AccordionContentStyle;
-    /** Styling passed through to the NavWrapper container */
-    wrapperStyle?: NavWrapperStyle;
-    /** Icon shown on collapsed sections (default: '+') */
-    expandIcon?: string;
-    /** Icon shown on expanded sections (default: '\u2212') */
-    collapseIcon?: string;
-    /** Position of the expand/collapse icon (default: 'right') */
-    iconPosition?: 'left' | 'right';
-    /** Enable smooth open/close animation via max-height transition (default: true) */
-    animated?: boolean;
-    /** Callback fired with the array of currently expanded section IDs */
-    onChange?: (expandedIds: string[]) => void;
-}
-declare function Accordion(props: AccordionProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface BreadcrumbItem {
-    /** Display label */
-    label: string;
-    /** Optional link href — if omitted, rendered as plain text */
-    href?: string;
-    /** Optional click handler */
-    onClick?: () => void;
-}
-type BreadcrumbSize = 'sm' | 'md' | 'lg';
-interface BreadcrumbProps {
-    /** Ordered list of breadcrumb items (first = root, last = current page) */
-    items: BreadcrumbItem[];
-    /** Separator between items (default: '/') */
-    separator?: string | unknown;
-    /** When set, collapses middle items to '...' if items exceed this count */
-    maxItems?: number;
-    /** Size variant (default: 'md') */
-    size?: BreadcrumbSize;
-}
-declare function Breadcrumb(props: BreadcrumbProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface DropdownItem {
-    /** Unique identifier for the item */
-    id: string;
-    /** Display label */
-    label: string;
-    /** Optional icon rendered as a text span before the label (emoji or text) */
-    icon?: string;
-    /** Whether the item is disabled (grayed out, non-interactive) */
-    disabled?: boolean;
-    /** Render as a thin horizontal divider instead of a menu item */
-    divider?: boolean;
-    /** Click handler */
-    onClick?: () => void;
-    /** Nested submenu items — shows a right chevron and expands on hover */
-    children?: DropdownItem[];
-}
-interface DropdownProps {
-    /** Trigger button text */
-    label: string;
-    /** Menu items */
-    items: DropdownItem[];
-    /** Custom styles for the trigger button */
-    triggerStyle?: Record<string, string>;
-    /** Styling passed to NavWrapper for the dropdown panel */
-    menuStyle?: NavWrapperStyle;
-    /** Styling for menu items */
-    itemStyle?: NavItemStyle;
-    /** Placement of the dropdown relative to the trigger (default: 'bottom-start') */
-    placement?: 'bottom-start' | 'bottom-end';
-    /** Close the dropdown when an item is selected (default: true) */
-    closeOnSelect?: boolean;
-    /** Width of the dropdown panel (default: '220px') */
-    width?: string | number;
-}
-declare function Dropdown(props: DropdownProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface MenuItem {
-    /** Display label */
-    label: string;
-    /** Click handler */
-    onClick?: () => void;
-    /** Keyboard shortcut hint (e.g. 'Ctrl+S') */
-    shortcut?: string;
-    /** Icon text (emoji or character) */
-    icon?: string;
-    /** Render as a divider line */
-    divider?: boolean;
-    /** Whether the item is disabled */
-    disabled?: boolean;
-    /** Nested submenu items */
-    children?: MenuItem[];
-}
-interface MenuDefinition {
-    /** Top-level menu label */
-    label: string;
-    /** Items in this menu */
-    items: MenuItem[];
-}
-interface MenubarProps {
-    /** Array of top-level menu definitions */
-    menus: MenuDefinition[];
-}
-declare function Menubar(props: MenubarProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface PaginationProps {
-    /** Total number of items */
-    total: number;
-    /** Items per page */
-    pageSize: number;
-    /** Current active page (1-based) */
-    currentPage: number;
-    /** Called when page changes */
-    onChange: (page: number) => void;
-    /** Number of sibling pages shown around the current page (default: 1) */
-    siblingCount?: number;
-    /** Show First/Last buttons (default: true) */
-    showFirstLast?: boolean;
-    /** Show Prev/Next buttons (default: true) */
-    showPrevNext?: boolean;
-    /** Disable all controls */
-    disabled?: boolean;
-}
-declare function Pagination(props: PaginationProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface SidebarItem {
-    /** Unique identifier */
-    id: string;
-    /** Display label */
-    label: string;
-    /** Optional icon (emoji or text character) */
-    icon?: string;
-    /** Nested child items */
-    children?: SidebarItem[];
-    /** Optional badge text (e.g. count) */
-    badge?: string;
-}
-interface SidebarProps {
-    /** Navigation items */
-    items: SidebarItem[];
-    /** Whether the sidebar is collapsed to icon-only mode */
-    collapsed?: boolean;
-    /** Called to toggle collapse state */
-    onToggleCollapse?: () => void;
-    /** Currently selected item id */
-    selectedId?: string;
-    /** Called when an item is selected */
-    onSelect?: (id: string) => void;
-    /** Expanded width (default: '240px') */
-    width?: string | number;
-    /** Collapsed width (default: '56px') */
-    collapsedWidth?: string | number;
-}
-declare function Sidebar(props: SidebarProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface StepItem {
-    /** Step label */
-    label: string;
-    /** Optional description shown below the label */
-    description?: string;
-    /** Optional icon text (emoji or character) shown inside the circle */
-    icon?: string;
-}
-type StepperOrientation = 'horizontal' | 'vertical';
-type StepperVariant = 'circle' | 'dot';
-interface StepperProps {
-    /** Array of step definitions */
-    steps: StepItem[];
-    /** Current active step (0-based index) */
-    currentStep: number;
-    /** Orientation (default: 'horizontal') */
-    orientation?: StepperOrientation;
-    /** Called when a step is clicked — receives the step index */
-    onChange?: (step: number) => void;
-    /** Whether steps are clickable (default: false) */
-    clickable?: boolean;
-    /** Visual variant (default: 'circle') */
-    variant?: StepperVariant;
-}
-declare function Stepper(props: StepperProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ToolbarItem {
-    /** Unique identifier */
-    id: string;
-    /** Display label (optional if icon provided) */
-    label?: string;
-    /** Icon text (emoji or character) */
-    icon?: string;
-    /** Item type — 'button' has momentary press, 'toggle' stays pressed until clicked again */
-    type: 'button' | 'toggle' | 'separator' | 'dropdown' | 'spacer';
-    /** Click handler */
-    onClick?: () => void;
-    /** Whether the item is disabled */
-    disabled?: boolean;
-    /** Whether the item is in an active/pressed state (used by toggle) */
-    active?: boolean;
-}
-type ToolbarSize = 'sm' | 'md' | 'lg';
-type ToolbarVariant = 'flat' | 'raised';
-interface ToolbarProps {
-    /** Toolbar items */
-    items: ToolbarItem[];
-    /** Size (default: 'md') */
-    size?: ToolbarSize;
-    /** Visual variant (default: 'flat') */
-    variant?: ToolbarVariant;
-}
-declare function Toolbar(props: ToolbarProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-/**
- * TreeNode — Extensible data model for tree navigation nodes.
- *
- * Represents a single node in a hierarchical tree structure. Supports
- * arbitrary metadata for extensibility, parent/child traversal, and
- * expand/collapse state management. Developers can subclass TreeNode or
- * attach custom data via the `metadata` field.
- */
-interface TreeNodeData {
-    /** Unique identifier for the node */
-    id: string;
-    /** Display label */
-    label: string;
-    /** Nested child nodes */
-    children?: TreeNodeData[];
-    /** Whether the node starts expanded (default: false) */
-    expanded?: boolean;
-    /** Text or emoji icon displayed alongside the label */
-    icon?: string;
-    /** Extensible payload — attach arbitrary data here */
-    metadata?: Record<string, unknown>;
-}
-declare class TreeNode {
-    id: string;
-    label: string;
-    children: TreeNode[];
-    expanded: boolean;
-    icon: string | null;
-    metadata: Record<string, unknown>;
-    parent: TreeNode | null;
-    depth: number;
-    constructor(data: TreeNodeData, parent?: TreeNode);
-    /**
-     * Build a full TreeNode tree from nested data.
-     */
-    static fromData(data: TreeNodeData): TreeNode;
-    /**
-     * Returns true if the node has no children.
-     */
-    isLeaf(): boolean;
-    /**
-     * Returns true if the node has no parent (root of the tree).
-     */
-    isRoot(): boolean;
-    /**
-     * Depth-first walk of this node and all descendants.
-     * The callback receives each node and its depth.
-     */
-    walk(fn: (node: TreeNode, depth: number) => void): void;
-    /**
-     * Find a descendant (or self) by id. Returns null if not found.
-     */
-    find(id: string): TreeNode | null;
-    /**
-     * Toggle the expanded/collapsed state.
-     */
-    toggle(): void;
-    /**
-     * Expand this node (show children).
-     */
-    expand(): void;
-    /**
-     * Collapse this node (hide children).
-     */
-    collapse(): void;
-    /**
-     * Add a child node from data. Returns the newly created TreeNode.
-     */
-    addChild(data: TreeNodeData): TreeNode;
-    /**
-     * Remove a direct child by id. Returns true if a child was removed.
-     */
-    removeChild(id: string): boolean;
-}
-
-interface TreeNavProps {
-    /** Tree data structure */
-    root: TreeNodeData;
-    /** Fired when a node label is clicked */
-    onNodeClick?: (node: TreeNode) => void;
-    /** Fired when a node is expanded */
-    onNodeExpand?: (node: TreeNode) => void;
-    /** Fired when a node is collapsed */
-    onNodeCollapse?: (node: TreeNode) => void;
-    /** Id of the currently selected node */
-    selectedId?: string;
-    /** Start with all nodes expanded (default: false) */
-    expandAll?: boolean;
-    /** Color of connector lines (default: '#000') */
-    lineColor?: string;
-    /** Width of connector lines in px (default: 1) */
-    lineWidth?: number;
-    /** Pixels of indentation per depth level (default: 20) */
-    indentPx?: number;
-    /** Icon shown for expanded non-leaf nodes (default: '\u2212') */
-    iconExpanded?: string;
-    /** Icon shown for collapsed non-leaf nodes (default: '+') */
-    iconCollapsed?: string;
-    /** Styling for individual node items */
-    nodeStyle?: NavItemStyle;
-    /** Styling for the outer NavWrapper */
-    wrapperStyle?: NavWrapperStyle;
-    /** Custom node renderer for full control over node appearance */
-    renderNode?: (node: TreeNode, isSelected: boolean) => unknown;
-}
-declare function TreeNav(props: TreeNavProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ContextMenuItem {
-    /** Display label */
-    label?: string;
-    /** Click handler */
-    onClick?: () => void;
-    /** Optional icon (rendered as text/emoji) */
-    icon?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Render as a divider instead of a menu item */
-    divider?: boolean;
-    /** Nested submenu items */
-    children?: ContextMenuItem[];
-}
-interface ContextMenuProps {
-    /** Menu item definitions */
-    items: ContextMenuItem[];
-    /** Trigger area children */
-    children?: unknown;
-}
-declare function ContextMenu(props: ContextMenuProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
-interface DrawerProps {
-    /** Whether the drawer is open */
-    open: boolean;
-    /** Called when the drawer requests to close */
-    onClose: () => void;
-    /** Edge the drawer slides in from */
-    position?: DrawerPosition;
-    /** Width (left/right) or height (top/bottom) in px or % */
-    size?: string;
-    /** Drawer title */
-    title?: string;
-    /** Show overlay backdrop behind the drawer */
-    overlay?: boolean;
-    /** Close when clicking the overlay */
-    closeOnOverlay?: boolean;
-    /** Close on Escape key */
-    closeOnEscape?: boolean;
-    /** Drawer body children */
-    children?: unknown;
-}
-declare function Drawer(props: DrawerProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props> | null;
-
-type ModalSize = 'sm' | 'md' | 'lg' | 'full';
-interface ModalProps {
-    /** Whether the modal is open */
-    open: boolean;
-    /** Called when the modal requests to close */
-    onClose: () => void;
-    /** Modal title rendered in the header */
-    title?: string;
-    /** Modal width preset */
-    size?: ModalSize;
-    /** Close when clicking the overlay backdrop (default true) */
-    closeOnOverlay?: boolean;
-    /** Close when pressing Escape (default true) */
-    closeOnEscape?: boolean;
-    /** Footer slot content */
-    footer?: unknown;
-    /** Show the X close button in the header (default true) */
-    showCloseButton?: boolean;
-    /** Modal body children */
-    children?: unknown;
-}
-declare function Modal(props: ModalProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props> | null;
-
-type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
-interface PopoverProps {
-    /** Trigger element slot */
-    trigger: unknown;
-    /** Popover content slot */
-    content: unknown;
-    /** Controlled open state (if provided, disables auto-toggle) */
-    open?: boolean;
-    /** Placement relative to trigger */
-    placement?: PopoverPlacement;
-    /** Offset from trigger in px */
-    offset?: number;
-    /** Show an arrow pointing to the trigger */
-    arrow?: boolean;
-    /** Close when clicking outside the popover */
-    closeOnClickOutside?: boolean;
-    /** Callback when open state changes (for controlled mode) */
-    onOpenChange?: (open: boolean) => void;
-}
-declare function Popover(props: PopoverProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
-type ToastType = 'info' | 'success' | 'warning' | 'error';
-interface ToastAction {
-    label: string;
-    onClick: () => void;
-}
-interface ToastOptions {
-    /** Toast type for styling */
-    type?: ToastType;
-    /** Duration in ms before auto-dismiss (0 = persistent) */
-    duration?: number;
-    /** Optional action button */
-    action?: ToastAction;
-}
-interface ToasterConfig {
-    /** Position of the toast stack */
-    position?: ToastPosition;
-    /** Maximum visible toasts */
-    maxToasts?: number;
-    /** Default auto-dismiss duration in ms */
-    defaultDuration?: number;
-}
-interface ToastItem {
-    id: string;
-    message: string;
-    type: ToastType;
-    duration: number;
-    action?: ToastAction;
-    createdAt: number;
-}
-interface Toaster {
-    toast: (message: string, opts?: ToastOptions) => string;
-    dismiss: (id: string) => void;
-    dismissAll: () => void;
-    subscribe: (listener: () => void) => () => void;
-    getToasts: () => ToastItem[];
-    config: Required<ToasterConfig>;
-}
-/**
- * Creates a toaster instance that manages toast state externally.
- */
-declare function createToaster(config?: ToasterConfig): Toaster;
-/**
- * ToastContainer — Renders all toasts from a given toaster.
- */
-declare function ToastContainer(props: {
-    toaster: Toaster;
-}): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props> | null;
-/**
- * useToast — Hook that creates a toaster and returns toast() + ToastContainer.
- */
-declare function useToast(config?: ToasterConfig): {
-    toast: (message: string, opts?: ToastOptions) => string;
-    dismiss: (id: string) => void;
-    dismissAll: () => void;
-    ToastContainer: () => specifyjs_shared_types.SpecElement<{
-        toaster: Toaster;
-    }>;
-};
-
-type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
-interface TooltipProps {
-    /** Tooltip text content */
-    text: string;
-    /** Placement relative to the trigger */
-    placement?: TooltipPlacement;
-    /** Delay in ms before showing (default 200) */
-    delay?: number;
-    /** Max width of the tooltip */
-    maxWidth?: string;
-    /** Trigger element(s) */
-    children?: unknown;
-}
-declare function Tooltip(props: TooltipProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface BarDatum {
-    label: string;
-    value: number;
-    color?: string;
-}
-interface StackedBarDatum {
-    label: string;
-    values: {
-        category: string;
-        value: number;
-        color?: string;
-    }[];
-}
-interface BarGraphProps {
-    /** Simple bar data */
-    data: BarDatum[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Bar orientation (default: 'vertical') */
-    orientation?: 'vertical' | 'horizontal';
-    /** Default bar fill color (default: '#3b82f6') */
-    barColor?: string;
-    /** Gap between bars in px (default: 8) */
-    barGap?: number;
-    /** Border radius on bar tops (default: 4) */
-    barRadius?: number;
-    /** Show value labels on bars (default: true) */
-    showValues?: boolean;
-    /** Show grid lines perpendicular to bars (default: true) */
-    showGrid?: boolean;
-    /** Grid line color (default: '#e5e7eb') */
-    gridColor?: string;
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 50) */
-    padding?: number;
-    /** Enable animation (default: false) */
-    animate?: boolean;
-    /** Stacked bar data — overrides `data` when provided */
-    stacked?: StackedBarDatum[];
-    /** Grouped mode — side-by-side bars when using stacked data (default: false) */
-    grouped?: boolean;
-}
-interface BarGraphScales {
-    /** Maps a value to a pixel length along the value axis */
-    valueScale: (v: number) => number;
-    /** Maps a category index to a pixel position along the category axis */
-    categoryScale: (i: number) => number;
-    /** Width/thickness of a single bar in px */
-    barThickness: number;
-    /** Maximum data value (used for scale domain) */
-    maxValue: number;
-    /** Length of the value axis in px */
-    valueAxisLength: number;
-    /** Length of the category axis in px */
-    categoryAxisLength: number;
-}
-declare function useBarGraphScales(count: number, maxValue: number, axisLength: number, categoryAxisLength: number, barGap: number): BarGraphScales;
-declare function BarGraph(props: BarGraphProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface PointEvent {
-    x: number;
-    y: number;
-    index: number;
-    event: Event;
-}
-interface CartesianGraph2DProps {
-    width?: number;
-    height?: number;
-    points?: {
-        x: number;
-        y: number;
-    }[];
-    /** Function to plot: f(x) → y */
-    plotFunction?: (x: number) => number;
-    /** Number of samples across the x range (default: 200). Ignored if xStep is set. */
-    plotResolution?: number;
-    /** Explicit step increment for function evaluation (e.g., 0.1).
-     *  When set, overrides plotResolution and computes f(x) at
-     *  x = xRange[0], xRange[0]+step, xRange[0]+2*step, ..., xRange[1]. */
-    xStep?: number;
-    /** If true, compute plotFunction synchronously (blocks render).
-     *  Default: false — computes asynchronously via requestIdleCallback,
-     *  rendering progressively as results arrive. */
-    sync?: boolean;
-    xRange?: [number, number];
-    yRange?: [number, number];
-    showGrid?: boolean;
-    showAxes?: boolean;
-    pointRadius?: number;
-    pointColor?: string;
-    curveColor?: string;
-    gridColor?: string;
-    axisColor?: string;
-    onPointClick?: (info: PointEvent) => void;
-    onPointDoubleClick?: (info: PointEvent) => void;
-    onPointContextMenu?: (info: PointEvent) => void;
-    onPointHover?: (info: PointEvent) => void;
-}
-declare function CartesianGraph2D(props: CartesianGraph2DProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ComplexPointInfo {
-    re: number;
-    im: number;
-    iterations: number;
-    event: Event;
-}
-interface ComplexGraph2DProps {
-    width?: number;
-    height?: number;
-    realRange?: [number, number];
-    imagRange?: [number, number];
-    maxIterations?: number;
-    colorScheme?: "classic" | "fire" | "ocean";
-    computeFunction?: (re: number, im: number, maxIter: number) => number;
-    /** Precomputed iteration grid (rows x cols). When provided, renders as SVG
-     *  instead of canvas. Each value is the iteration count at that pixel. */
-    data?: number[][];
-    /** Pixel resolution for precomputed SVG rendering (default: 2) */
-    resolution?: number;
-    /** If true, compute values synchronously (blocks render).
-     *  Default: false — uses canvas useEffect for runtime computation. */
-    sync?: boolean;
-    onPointClick?: (info: ComplexPointInfo) => void;
-    onPointHover?: (info: ComplexPointInfo) => void;
-    onPointDoubleClick?: (info: ComplexPointInfo) => void;
-    onPointContextMenu?: (info: ComplexPointInfo) => void;
-}
-/**
- * Precompute a Mandelbrot iteration grid at a given resolution.
- * Returns a 2D array of iteration counts (rows x cols).
- */
-declare function computeMandelbrotGrid(cols: number, rows: number, realRange?: [number, number], imagRange?: [number, number], maxIter?: number, computeFn?: (re: number, im: number, maxIter: number) => number): number[][];
-declare function ComplexGraph2D(props: ComplexGraph2DProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-/** Supported point marker shapes */
-type PointShape = 'circle' | 'square' | 'diamond' | 'triangle' | 'triangle-down' | 'cross' | 'plus';
-interface Point {
-    x: number;
-    y: number;
-    /** Per-point shape override */
-    shape?: PointShape;
-    /** Per-point radius override */
-    radius?: number;
-}
-interface LineSeries {
-    data: Point[];
-    color: string;
-    label?: string;
-    /** Point shape for this series */
-    pointShape?: PointShape;
-    /** Point radius for this series */
-    pointRadius?: number;
-}
-interface LineGraphProps {
-    data: Point[];
-    width?: number;
-    height?: number;
-    lineColor?: string;
-    lineWidth?: number;
-    pointRadius?: number;
-    pointColor?: string;
-    /** Default point marker shape (default: 'circle') */
-    pointShape?: PointShape;
-    showPoints?: boolean;
-    showGrid?: boolean;
-    showArea?: boolean;
-    areaColor?: string;
-    xLabel?: string;
-    yLabel?: string;
-    title?: string;
-    padding?: number;
-    animate?: boolean;
-    multiLine?: LineSeries[];
-}
-interface ScaleResult {
-    xScale: (v: number) => number;
-    yScale: (v: number) => number;
-    xTicks: number[];
-    yTicks: number[];
-    xMin: number;
-    xMax: number;
-    yMin: number;
-    yMax: number;
-}
-declare function useLineGraphScales(data: Point[], width: number, height: number, padding: number): ScaleResult;
-declare function LineGraph(props: LineGraphProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-/** Unique symbol to identify SpecifyJS elements */
-declare const SPEC_ELEMENT_TYPE: unique symbol;
-/** A key used for reconciliation */
-type Key = string | number | null;
-/** A ref can be a callback, an object, or null */
-type Ref<T = unknown> = RefCallback<T> | RefObject<T> | null;
-type RefCallback<T> = (instance: T | null) => void;
-interface RefObject<T> {
-    current: T | null;
-}
-/** Props are an arbitrary key-value map */
-type Props = Record<string, unknown> & {
-    children?: SpecNode;
-    key?: Key;
-    ref?: Ref;
-};
-/** Valid child types in a SpecifyJS tree */
-type SpecChild = SpecElement | string | number | boolean | null | undefined;
-type SpecNode = SpecChild | SpecNode[];
-/** A functional component */
-type FunctionComponent<P extends Props = Props> = (props: P) => SpecNode;
-/** A class component constructor */
-interface ClassComponentConstructor<P extends Props = Props, S = unknown> {
-    new (props: P): ClassComponentInstance<P, S>;
-    getDerivedStateFromProps?(props: P, state: S): Partial<S> | null;
-    getDerivedStateFromError?(error: unknown): Partial<S> | null;
-}
-/** Instance of a class component */
-interface ClassComponentInstance<P extends Props = Props, S = unknown> {
-    props: P;
-    state: S;
-    setState(updater: Partial<S> | ((prevState: S, props: P) => Partial<S> | null)): void;
-    forceUpdate(callback?: () => void): void;
-    render(): SpecNode;
-    componentDidMount?(): void;
-    componentDidUpdate?(prevProps: P, prevState: S, snapshot?: unknown): void;
-    componentWillUnmount?(): void;
-    shouldComponentUpdate?(nextProps: P, nextState: S): boolean;
-    getSnapshotBeforeUpdate?(prevProps: P, prevState: S): unknown;
-    componentDidCatch?(error: unknown, info: ErrorInfo): void;
-    _fiber: unknown;
-    _pendingState: Array<Partial<S> | ((prevState: S, props: P) => Partial<S> | null)>;
-    _forceUpdate: boolean;
-    _enqueueUpdate(callback?: () => void): void;
-}
-interface ErrorInfo {
-    componentStack: string;
-}
-/** A component type can be a function, a class, or a special symbol type */
-type ComponentType<P extends Props = Props> = FunctionComponent<P> | ClassComponentConstructor<P> | string | symbol;
-/** The core element structure — equivalent to React.Element */
-interface SpecElement<P extends Props = Props> {
-    $$typeof: typeof SPEC_ELEMENT_TYPE;
-    type: ComponentType<P>;
-    props: P;
-    key: Key;
-    ref: Ref;
-}
-
-interface PieSliceDatum {
-    label: string;
-    value: number;
-    color?: string;
-}
-interface ComputedSlice {
-    label: string;
-    value: number;
-    startAngle: number;
-    endAngle: number;
-    percentage: number;
-    color: string;
-}
-interface PieGraphProps {
-    data: PieSliceDatum[];
-    width?: number;
-    height?: number;
-    innerRadius?: number;
-    outerRadius?: number;
-    padAngle?: number;
-    showLabels?: boolean;
-    showValues?: boolean;
-    showLegend?: boolean;
-    legendPosition?: 'right' | 'bottom';
-    title?: string;
-    centerLabel?: string;
-    colors?: string[];
-    strokeColor?: string;
-    strokeWidth?: number;
-    textColor?: string;
-}
-/**
- * Build an SVG path `d` string for an arc (or annular sector).
- *
- * Angles are in **radians**, measured clockwise from 12-o'clock
- * (i.e. -PI/2 offset so 0 rad = top).
- *
- * Exported as a public utility so consumers can draw custom arcs.
- */
-declare function describeArc(cx: number, cy: number, innerR: number, outerR: number, startAngle: number, endAngle: number): string;
-/**
- * Given raw data, compute start/end angles, percentages, and resolved colors.
- */
-declare function computeSlices(data: PieSliceDatum[], options?: {
-    padAngle?: number;
-    colors?: string[];
-}): ComputedSlice[];
-declare function PieGraph(props: PieGraphProps): SpecElement;
-
-interface PolarPointInfo {
-    r: number;
-    theta: number;
-    index: number;
-    event: Event;
-}
-interface PolarGraph2DProps {
-    width?: number;
-    height?: number;
-    rRange?: [number, number];
-    /** Function to plot: f(theta) → r */
-    plotFunction?: (theta: number) => number;
-    /** Number of samples around the full circle (default: 360). Ignored if thetaStep is set. */
-    plotResolution?: number;
-    /** Explicit step increment in radians for function evaluation (e.g., Math.PI/180).
-     *  When set, overrides plotResolution and computes f(theta) at
-     *  theta = 0, step, 2*step, ..., 2*PI. */
-    thetaStep?: number;
-    /** If true, compute plotFunction synchronously (blocks render).
-     *  Default: false — computes asynchronously. */
-    sync?: boolean;
-    points?: {
-        r: number;
-        theta: number;
-    }[];
-    showGrid?: boolean;
-    pointRadius?: number;
-    pointColor?: string;
-    curveColor?: string;
-    onPointClick?: (info: PolarPointInfo) => void;
-    onPointDoubleClick?: (info: PolarPointInfo) => void;
-    onPointContextMenu?: (info: PolarPointInfo) => void;
-    onPointHover?: (info: PolarPointInfo) => void;
-}
-declare function PolarGraph2D(props: PolarGraph2DProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-/**
- * Hypercube math engine.
- *
- * Generates vertices and edges for an N-dimensional hypercube and projects
- * them to 2D via configurable rotation + orthographic projection.
- */
-interface Vec {
-    /** N-dimensional coordinates */
-    coords: number[];
-}
-interface Vertex {
-    id: number;
-    /** Original N-dimensional position (each coord 0 or 1) */
-    position: Vec;
-    /** Projected 2D position after rotation */
-    x: number;
-    y: number;
-    /** Projected depth for z-ordering */
-    depth: number;
-}
-interface Edge {
-    source: number;
-    target: number;
-}
-interface HypercubeData {
-    vertices: Vertex[];
-    edges: Edge[];
-    dimension: number;
-}
-/**
- * Generate all 2^n vertices of an n-dimensional hypercube.
- * Each vertex is a binary vector of length n, centered at the origin
- * (coords mapped from {0,1} to {-1,+1}).
- */
-declare function generateVertices(dimension: number): Vec[];
-/**
- * Generate edges connecting vertices that differ in exactly one coordinate
- * (Hamming distance 1).
- */
-declare function generateEdges(dimension: number): Edge[];
-/**
- * Build an N×N rotation matrix that applies rotations in each pair of
- * coordinate planes. `angles` is an array of rotation angles (radians),
- * one per plane pair: (0,1), (0,2), (1,2), (0,3), (1,3), (2,3), ...
- */
-declare function buildRotationMatrix(dimension: number, angles: number[]): number[][];
-/**
- * Apply an N×N matrix to an N-dimensional vector.
- */
-declare function transformVec(matrix: number[][], v: Vec): number[];
-/**
- * Project an N-dimensional point to 2D using orthographic projection
- * (just take the first two coordinates) with optional perspective scaling
- * based on depth (average of remaining coordinates).
- */
-declare function projectTo2D(transformed: number[], perspective?: number): {
-    x: number;
-    y: number;
-    depth: number;
-};
-/**
- * Generate a complete projected hypercube.
- *
- * @param dimension   Number of dimensions (2 = square, 3 = cube, 4 = tesseract, ...)
- * @param angles      Rotation angles for each plane pair
- * @param perspective Perspective strength (0 = orthographic)
- * @param scale       Scaling factor for output coordinates
- */
-declare function generateHypercube(dimension: number, angles?: number[], perspective?: number, scale?: number): HypercubeData;
-/**
- * Number of rotation plane-pairs for a given dimension.
- * This is C(n,2) = n*(n-1)/2.
- */
-declare function numRotationAngles(dimension: number): number;
-/**
- * Generate a palette of distinct colors for vertices.
- */
-declare function generatePalette(count: number, saturation?: number, lightness?: number): string[];
-
-interface HypercubeGraphProps {
-    /** Number of dimensions (default: 4) */
-    dimension?: number;
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 600) */
-    height?: number;
-    /** Vertex radius in pixels (default: 10) */
-    vertexRadius?: number;
-    /** Edge stroke width (default: 3) */
-    edgeWidth?: number;
-    /** Edge color (default: '#111') */
-    edgeColor?: string;
-    /** Array of vertex colors, or 'auto' for generated palette (default: 'auto') */
-    vertexColors?: string[] | 'auto';
-    /** Perspective strength, 0 = orthographic (default: 0.25) */
-    perspective?: number;
-    /** Auto-rotation speed (radians/frame). 0 = no rotation (default: 0.008) */
-    rotationSpeed?: number;
-    /** Whether to show vertex labels (default: false) */
-    showLabels?: boolean;
-    /** Background color (default: 'transparent') */
-    backgroundColor?: string;
-    /** Scale factor (default: auto-fit) */
-    scale?: number;
-}
-declare function HypercubeGraph(props: HypercubeGraphProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-interface UseHypercubeOptions {
-    dimension?: number;
-    rotationSpeed?: number;
-    perspective?: number;
-    scale?: number;
-}
-/**
- * Hook that provides hypercube data with auto-animated rotation angles.
- * Useful for headless rendering or custom SVG layouts.
- */
-declare function useHypercube(opts?: UseHypercubeOptions): {
-    data: HypercubeData;
-    angles: number[];
-    setAngles: (action: number[] | ((prev: number[]) => number[])) => void;
-};
-
-type Position = 'top' | 'bottom' | 'left' | 'right';
-interface LegendItem {
-    label: string;
-    color: string;
-    /** Optional dash pattern for line charts (e.g. '5,3') */
-    dash?: string;
-    /** Shape: circle, square, line (default: circle) */
-    shape?: 'circle' | 'square' | 'line';
-}
-interface VizWrapperProps {
-    /** Title text */
-    title?: string;
-    /** Position of the title relative to content (default: 'top') */
-    titlePosition?: Position;
-    /** Title alignment: 'start' | 'center' | 'end' (default: 'center') */
-    titleAlign?: 'start' | 'center' | 'end';
-    /** Title font size (default: '16px') */
-    titleFontSize?: string;
-    /** Title font weight (default: '600') */
-    titleFontWeight?: string;
-    /** Title color (default: '#1f2937') */
-    titleColor?: string;
-    /** Legend items */
-    legend?: LegendItem[];
-    /** Position of the legend relative to content (default: 'bottom') */
-    legendPosition?: Position;
-    /** Legend alignment: 'start' | 'center' | 'end' (default: 'center') */
-    legendAlign?: 'start' | 'center' | 'end';
-    /** Legend font size (default: '12px') */
-    legendFontSize?: string;
-    /** Legend item spacing in px (default: 16) */
-    legendGap?: number;
-    /** Container width (default: 'auto') */
-    width?: string | number;
-    /** Container height (default: 'auto') */
-    height?: string | number;
-    /** Background color (default: '#ffffff') */
-    backgroundColor?: string;
-    /** Border (default: '1px solid #e5e7eb') */
-    border?: string;
-    /** Border radius (default: '8px') */
-    borderRadius?: string;
-    /** Padding around the entire wrapper (default: '16px') */
-    padding?: string;
-    /** Gap between title/legend/content (default: '12px') */
-    gap?: string;
-    /** Box shadow (default: none) */
-    boxShadow?: string;
-    /** Font family (default: inherit) */
-    fontFamily?: string;
-    /** CSS contain value for isolation (default: 'layout style paint') */
-    contain?: string;
-    /** Extra className on the outer container */
-    className?: string;
-    /** Extra inline style on the outer container */
-    style?: Record<string, string>;
-    /** The visualization content (children) */
-    children?: unknown;
-}
-declare function VizWrapper(props: VizWrapperProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface GoogleAnalyticsProps {
-    /** Google Analytics measurement ID (e.g., 'G-XXXXXXXXXX') */
-    measurementId: string;
-    /** Disable tracking (useful for development/testing) */
-    disabled?: boolean;
-    /** Enable debug mode (logs events to console) */
-    debug?: boolean;
-    /** Anonymize IP addresses */
-    anonymizeIp?: boolean;
-    /** Custom config parameters passed to gtag('config', ...) */
-    config?: Record<string, unknown>;
-}
-declare function GoogleAnalytics(props: GoogleAnalyticsProps): null;
-
-interface FooterProps {
-    /** Content for the left section */
-    left?: unknown;
-    /** Content for the center section */
-    center?: unknown;
-    /** Content for the right section */
-    right?: unknown;
-    /** Border top style */
-    borderTop?: string;
-    /** Background color */
-    background?: string;
-    /** Text color */
-    color?: string;
-    /** Font size */
-    fontSize?: string;
-    /** Padding */
-    padding?: string;
-    /** Max width for inner container */
-    maxWidth?: string;
-    /** CSS className */
-    className?: string;
-    /** ARIA label for the footer landmark */
-    ariaLabel?: string;
-}
-declare function Footer(props: FooterProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface UnityDesktopApp {
-    id: string;
-    icon: string;
-    label: string;
-}
-interface UnityDesktopUser {
-    name: string;
-    avatar?: string;
-}
-interface UnityDesktopProps {
-    /** Application definitions for the dock launcher */
-    apps: UnityDesktopApp[];
-    /** User info for the system tray */
-    user?: UnityDesktopUser;
-    /** Called when an app icon is clicked in the dock */
-    onAppOpen?: (appId: string) => void;
-    /** Called when the user selects logout from the user menu */
-    onLogout?: () => void;
-    /** Color theme */
-    theme?: 'dark' | 'light';
-    /** UnityApp windows render here */
-    children?: unknown;
-}
-interface ToastNotification {
-    id: number;
-    message: string;
-    severity: 'info' | 'warning' | 'error';
-    timestamp: number;
-}
-declare function UnityDesktop(props: UnityDesktopProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface UnityAppProps {
-    /** Unique identifier for this app window */
-    id: string;
-    /** Window title */
-    title: string;
-    /** Optional icon (URL or emoji) */
-    icon?: string;
-    /** Default position when first opened */
-    defaultPosition?: {
-        x: number;
-        y: number;
-    };
-    /** Default size when first opened */
-    defaultSize?: {
-        width: number;
-        height: number;
-    };
-    /** Minimum size constraints */
-    minSize?: {
-        width: number;
-        height: number;
-    };
-    /** Whether the window can be resized. Default: true */
-    resizable?: boolean;
-    /** Called when the window is closed */
-    onClose?: () => void;
-    /** Application content */
-    children?: unknown;
-}
-declare function UnityApp(props: UnityAppProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props> | null;
-
-interface WordProcessorProps {
-    /** Document content rendered in the page area */
-    content?: string;
-    /** Extra class name */
-    className?: string;
-}
-declare function WordProcessor(props: WordProcessorProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface IDEProps {
-    /** Extra class name */
-    className?: string;
-}
-declare function IDE(props: IDEProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface TradingDashboardProps {
-    /** Extra class name */
-    className?: string;
-}
-declare function TradingDashboard(props: TradingDashboardProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ButtonProps {
-    /** Button label / children */
-    children?: unknown;
-    /** Click handler */
-    onClick?: (e: Event) => void;
-    /** Visual variant */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-    /** Size */
-    size?: 'sm' | 'md' | 'lg';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Full width */
-    fullWidth?: boolean;
-    /** HTML type attribute */
-    type?: 'button' | 'submit' | 'reset';
-    /** Custom className */
-    className?: string;
-    /** Custom inline style overrides */
-    style?: Record<string, string>;
-    /** Accessible label (when children is an icon) */
-    ariaLabel?: string;
-    /** Whether button is in active/toggled state */
-    active?: boolean;
-}
-declare function Button(props: ButtonProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface Layer3D {
-    label: string;
-    data: number[][];
-    color?: string;
-    opacity?: number;
-}
-interface ThreeDLayersProps {
-    /** Array of layers, each containing a 2D grid of height values */
-    layers: Layer3D[];
-    /** SVG width in pixels (default: 700) */
-    width?: number;
-    /** SVG height in pixels (default: 500) */
-    height?: number;
-    /** Perspective strength (default: 0.5) — 0 = flat, 1 = strong perspective */
-    perspective?: number;
-    /** X-axis rotation in degrees (default: 35) */
-    rotateX?: number;
-    /** Y-axis rotation in degrees (default: 45) */
-    rotateY?: number;
-    /** Z-axis rotation in degrees (default: 0) */
-    rotateZ?: number;
-    /** Show layer labels (default: true) */
-    showLabels?: boolean;
-    /** Show 3D axes (default: true) */
-    showAxes?: boolean;
-    /** Vertical spacing between layers in data units (default: 2) */
-    layerSpacing?: number;
-    /** Color palette for layers (default: built-in palette) */
-    colorScale?: string[];
-    /** Grid wireframe color (default: '#94a3b8') */
-    gridColor?: string;
-    /** Chart title */
-    title?: string;
-}
-declare function ThreeDLayers(props: ThreeDLayersProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface BigNumberProps {
-    /** The main value to display */
-    value: number | string;
-    /** Descriptive label beneath the value */
-    label?: string;
-    /** Prefix before the value (e.g. '$') */
-    prefix?: string;
-    /** Suffix after the value (e.g. '%') */
-    suffix?: string;
-    /** Trend value — positive = up, negative = down */
-    trend?: number;
-    /** Trend context label (e.g. 'vs last week') */
-    trendLabel?: string;
-    /** Small line chart data points */
-    sparkline?: number[];
-    /** SVG width in pixels (default: 280) */
-    width?: number;
-    /** SVG height in pixels (default: 160) */
-    height?: number;
-    /** Main value text color (default: 'currentColor') */
-    valueColor?: string;
-    /** Trend arrow color when positive (default: '#22c55e') */
-    trendUpColor?: string;
-    /** Trend arrow color when negative (default: '#ef4444') */
-    trendDownColor?: string;
-    /** Card background color (default: '#ffffff') */
-    backgroundColor?: string;
-}
-declare function BigNumber(props: BigNumberProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-/** Qubit state in Bloch sphere coordinates */
-interface BlochState {
-    /** Polar angle from |0⟩ (north pole) in radians [0, π] */
-    theta: number;
-    /** Azimuthal angle in the XY plane in radians [0, 2π) */
-    phi: number;
-}
-/** A point on the sphere trail */
-interface TrailPoint {
-    x: number;
-    y: number;
-    z: number;
-}
-/** Standard quantum gate names */
-type GateName = 'X' | 'Y' | 'Z' | 'H' | 'S' | 'T' | 'Rx' | 'Ry' | 'Rz';
-/** Gate to apply with optional rotation angle */
-interface GateOp {
-    gate: GateName;
-    /** Rotation angle in radians (for Rx, Ry, Rz gates) */
-    angle?: number;
-}
-interface BlochSphereProps {
-    /** Current qubit state (default: |0⟩ = {theta: 0, phi: 0}) */
-    state?: BlochState;
-    /** Sequence of gates to animate (applied one per frame) */
-    gates?: GateOp[];
-    /** SVG viewBox width (default: 400) */
-    width?: number;
-    /** SVG viewBox height (default: 400) */
-    height?: number;
-    /** Initial rotation around Y axis in degrees (default: -25) */
-    rotateY?: number;
-    /** Initial rotation around X axis in degrees (default: 15) */
-    rotateX?: number;
-    /** Zoom level (default: 1.0, range 0.5–3.0) */
-    zoom?: number;
-    /** Allow interactive rotation via drag (default: true) */
-    interactive?: boolean;
-    /** Allow zoom via scroll (default: true) */
-    zoomable?: boolean;
-    /** Show state vector arrow (default: true) */
-    showVector?: boolean;
-    /** Show axis labels (default: true) */
-    showLabels?: boolean;
-    /** Show wireframe circles (default: true) */
-    showWireframe?: boolean;
-    /** Show trajectory trail (default: true) */
-    showTrail?: boolean;
-    /** Max trail points (default: 200) */
-    trailMaxPoints?: number;
-    /** Trail color (default: '#ef4444') */
-    trailColor?: string;
-    /** Sphere wireframe color (default: '#cbd5e1') */
-    wireframeColor?: string;
-    /** State vector color (default: '#3b82f6') */
-    vectorColor?: string;
-    /** Background color (default: transparent) */
-    backgroundColor?: string;
-    /** Sphere radius in viewBox units (default: 130) */
-    sphereRadius?: number;
-    /** Title text */
-    title?: string;
-    /** Called when state changes (from gates or interaction) */
-    onStateChange?: (state: BlochState) => void;
-}
-declare function blochToCartesian(state: BlochState): {
-    x: number;
-    y: number;
-    z: number;
-};
-declare function cartesianToBloch(x: number, y: number, z: number): BlochState;
-declare function applyGate(state: BlochState, op: GateOp): BlochState;
-declare function BlochSphere(props: BlochSphereProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface BoxPlotDatum {
-    /** Category label */
-    label: string;
-    /** Raw numeric values to compute statistics from */
-    values: number[];
-    /** Optional box fill color */
-    color?: string;
-}
-interface BoxPlotProps {
-    /** Array of box plot data */
-    data: BoxPlotDatum[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Plot orientation (default: 'vertical') */
-    orientation?: 'horizontal' | 'vertical';
-    /** Show outlier circles (default: true) */
-    showOutliers?: boolean;
-    /** Show mean marker (default: false) */
-    showMean?: boolean;
-    /** Whisker line color (default: '#374151') */
-    whiskerColor?: string;
-    /** Box width as fraction of available space (default: 0.6) */
-    boxWidth?: number;
-    /** Show grid lines (default: true) */
-    showGrid?: boolean;
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 60) */
-    padding?: number;
-}
-interface BoxStats {
-    q1: number;
-    median: number;
-    q3: number;
-    iqr: number;
-    whiskerLow: number;
-    whiskerHigh: number;
-    mean: number;
-    outliers: number[];
-    min: number;
-    max: number;
-}
-/** Compute box-plot statistics from raw values. */
-declare function computeBoxStats(values: number[]): BoxStats | null;
-declare function BoxPlot(props: BoxPlotProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface BubbleDatum {
-    x: number;
-    y: number;
-    r: number;
-    label?: string;
-    color?: string;
-}
-interface BubbleChartProps {
-    /** Array of bubble data points */
-    data: BubbleDatum[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** X-axis label */
-    xLabel?: string;
-    /** Y-axis label */
-    yLabel?: string;
-    /** Show grid lines (default: true) */
-    showGrid?: boolean;
-    /** Show axes (default: true) */
-    showAxes?: boolean;
-    /** Show datum labels (default: false) */
-    showLabels?: boolean;
-    /** Maximum rendered bubble radius in px (default: 40) */
-    maxBubbleRadius?: number;
-    /** Minimum rendered bubble radius in px (default: 4) */
-    minBubbleRadius?: number;
-    /** Default bubble fill color (default: '#3b82f6') */
-    defaultColor?: string;
-    /** Bubble fill opacity (default: 0.7) */
-    opacity?: number;
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 60) */
-    padding?: number;
-}
-declare function BubbleChart(props: BubbleChartProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface CalendarDatum {
-    /** Date string in 'YYYY-MM-DD' format */
-    date: string;
-    /** Numeric value for this date */
-    value: number;
-}
-interface CalendarHeatMapProps {
-    /** Array of date/value pairs */
-    data: CalendarDatum[];
-    /** SVG width in pixels (default: 800) */
-    width?: number;
-    /** SVG height in pixels (default: 160) */
-    height?: number;
-    /** Color gradient from low to high */
-    colorScale?: string[];
-    /** Size of each day cell in px (default: 12) */
-    cellSize?: number;
-    /** Gap between cells in px (default: 2) */
-    cellGap?: number;
-    /** Show month labels above the calendar (default: true) */
-    showMonthLabels?: boolean;
-    /** Show day-of-week labels on the left (default: true) */
-    showDayLabels?: boolean;
-    /** Color for days with no data (default: '#ebedf0') */
-    emptyColor?: string;
-    /** Chart title */
-    title?: string;
-}
-declare function CalendarHeatMap(props: CalendarHeatMapProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ChordDiagramProps {
-    /** Square matrix where matrix[i][j] = flow from group i to group j */
-    matrix: number[][];
-    /** Labels for each group (must match matrix dimensions) */
-    labels: string[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 600) */
-    height?: number;
-    /** Color palette for groups */
-    colors?: string[];
-    /** Angular padding between arcs in radians (default: 0.05) */
-    padAngle?: number;
-    /** Show group labels (default: true) */
-    showLabels?: boolean;
-    /** Show flow values on hover/annotation (default: false) */
-    showValues?: boolean;
-    /** Ribbon fill opacity 0..1 (default: 0.5) */
-    ribbonOpacity?: number;
-    /** Inner radius as ratio of outer radius (default: 0.9) */
-    innerRadiusRatio?: number;
-    /** Chart title */
-    title?: string;
-}
-declare function ChordDiagram(props: ChordDiagramProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface DecompNode {
-    label: string;
-    value?: number | string;
-    color?: string;
-    children?: DecompNode[];
-}
-interface DecompositionTreeProps {
-    /** Root node of the tree */
-    data: DecompNode;
-    /** SVG width in pixels (default: 800) */
-    width?: number;
-    /** SVG height in pixels (default: 500) */
-    height?: number;
-    /** Layout orientation (default: 'horizontal') */
-    orientation?: 'horizontal' | 'vertical';
-    /** Width of each node rectangle (default: 120) */
-    nodeWidth?: number;
-    /** Height of each node rectangle (default: 40) */
-    nodeHeight?: number;
-    /** Show value inside nodes (default: true) */
-    showValues?: boolean;
-    /** Show connector lines between nodes (default: true) */
-    showConnectors?: boolean;
-    /** Connector line color (default: '#94a3b8') */
-    connectorColor?: string;
-    /** Color palette for nodes by depth */
-    colors?: string[];
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 40) */
-    padding?: number;
-}
-declare function DecompositionTree(props: DecompositionTreeProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface ForceNode {
-    id: string;
-    label?: string;
-    color?: string;
-    x?: number;
-    y?: number;
-    fixed?: boolean;
-    /** If true (default), this node cannot overlap other solid nodes.
-     *  Collisions produce elastic bounce consistent with Newtonian physics.
-     *  Set to false to allow nodes to pass through each other. */
-    solid?: boolean;
-}
-interface ForceEdge {
-    source: string;
-    target: string;
-    weight?: number;
-    color?: string;
-}
-/** Simulation node state — exported so custom force functions can use it */
-interface ForceSimNode {
-    id: string;
-    label: string;
-    color: string;
-    x: number;
-    y: number;
-    vx: number;
-    vy: number;
-    fixed: boolean;
-    /** Whether this node collides with other solid nodes (default: true) */
-    solid: boolean;
-}
-/** Mouse position in viewBox coordinates (null if mouse is outside the SVG) */
-interface MousePosition {
-    x: number;
-    y: number;
-}
-/**
- * Custom force function signature.
- * Receives current node states, edges, viewport dimensions, and mouse position.
- * Must return the updated node states (new positions/velocities).
- * Called once per animation frame.
- */
-type CustomForceFunction = (nodes: ForceSimNode[], edges: ForceEdge[], width: number, height: number, mouse: MousePosition | null) => ForceSimNode[];
-/** Trail configuration for a specific node */
-interface TrailConfig {
-    /** Node ID to trail */
-    nodeId: string;
-    /** Trail color */
-    color?: string;
-    /** Max number of trail points (default: 200) */
-    maxPoints?: number;
-    /** Trail line width (default: 1) */
-    width?: number;
-    /** Trail opacity (default: 0.5) */
-    opacity?: number;
-}
-interface ForceGraphProps {
-    /** Array of nodes to render */
-    nodes: ForceNode[];
-    /** Array of edges connecting nodes */
-    edges: ForceEdge[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Node circle radius in pixels (default: 12) */
-    nodeRadius?: number;
-    /** Node border stroke width in pixels (default: 2, set to 0 for no border) */
-    nodeStrokeWidth?: number;
-    /** Show node labels (default: true) */
-    showLabels?: boolean;
-    /** Show arrowheads on edges (default: false) */
-    showArrows?: boolean;
-    /** Repulsion force between nodes (default: 300) */
-    repulsionForce?: number;
-    /** Attraction force along edges (default: 0.01) */
-    attractionForce?: number;
-    /** Velocity damping factor 0..1 (default: 0.9) */
-    damping?: number;
-    /** Ideal edge length in pixels (default: 100) */
-    edgeLength?: number;
-    /** Default edge stroke color (default: '#94a3b8') */
-    edgeColor?: string;
-    /** Default edge stroke width (default: 1.5) */
-    edgeWidth?: number;
-    /** Chart title */
-    title?: string;
-    /** Whether nodes are solid by default — solid nodes cannot overlap and
-     *  bounce off each other via elastic collision. Per-node `solid` prop
-     *  overrides this. (default: true) */
-    solidNodes?: boolean;
-    /** Custom force function — replaces the default spring/repulsion physics.
-     *  When provided, repulsionForce/attractionForce/damping/edgeLength are ignored.
-     *  The function is called once per animation frame and must return updated nodes. */
-    customForce?: CustomForceFunction;
-    /** Trail configurations — render fading path trails for specific nodes */
-    trails?: TrailConfig[];
-}
-declare function ForceGraph(props: ForceGraphProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface FunnelDatum {
-    label: string;
-    value: number;
-    color?: string;
-}
-interface FunnelChartProps {
-    /** Data sections to render (in funnel order, largest first typically) */
-    data: FunnelDatum[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Funnel orientation (default: 'vertical') */
-    orientation?: 'vertical' | 'horizontal';
-    /** Show labels on sections (default: true) */
-    showLabels?: boolean;
-    /** Show values on sections (default: true) */
-    showValues?: boolean;
-    /** Show percentage of first item (default: true) */
-    showPercentage?: boolean;
-    /** Gap between sections in px (default: 2) */
-    gapSize?: number;
-    /** Color palette (cycles through when per-datum color is absent) */
-    colors?: string[];
-    /** Chart title */
-    title?: string;
-}
-declare function FunnelChart(props: FunnelChartProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface GanttTask {
-    id: string;
-    label: string;
-    start: number;
-    duration: number;
-    color?: string;
-    group?: string;
-}
-interface GanttChartProps {
-    /** Array of tasks to render */
-    tasks: GanttTask[];
-    /** SVG width in pixels (default: 800) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Height of each task bar in px (default: 24) */
-    barHeight?: number;
-    /** Vertical gap between task bars in px (default: 8) */
-    barGap?: number;
-    /** Show vertical grid lines (default: true) */
-    showGrid?: boolean;
-    /** Show task labels on the left (default: true) */
-    showLabels?: boolean;
-    /** Show progress text on bars (default: false) */
-    showProgress?: boolean;
-    /** Label for the time unit displayed on axis (default: 'days') */
-    timeUnit?: string;
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 50) */
-    padding?: number;
-}
-declare function GanttChart(props: GanttChartProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface GaugeProps {
-    /** Current gauge value */
-    value: number;
-    /** Minimum value (default: 0) */
-    min?: number;
-    /** Maximum value (default: 100) */
-    max?: number;
-    /** SVG width in pixels (default: 300) */
-    width?: number;
-    /** SVG height in pixels (default: 200) */
-    height?: number;
-    /** Arc start angle in degrees (default: -135) */
-    startAngle?: number;
-    /** Arc end angle in degrees (default: 135) */
-    endAngle?: number;
-    /** Arc stroke width (default: 20) */
-    arcWidth?: number;
-    /** Show the numeric value (default: true) */
-    showValue?: boolean;
-    /** Show min/max labels (default: true) */
-    showMinMax?: boolean;
-    /** Show tick marks (default: true) */
-    showTicks?: boolean;
-    /** Number of tick divisions (default: 10) */
-    tickCount?: number;
-    /** Label text below the value */
-    label?: string;
-    /** Unit text after the value (e.g. 'rpm', '%') */
-    unit?: string;
-    /** Colors for arc segments — evenly distributed (default: ['#22c55e', '#f59e0b', '#ef4444']) */
-    colors?: string[];
-    /** Needle color (default: '#374151') */
-    needleColor?: string;
-    /** Background arc color (default: '#e5e7eb') */
-    backgroundColor?: string;
-}
-declare function Gauge(props: GaugeProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface USStateMapProps {
-    /** SVG width in pixels (default: 959) */
-    width?: number;
-    /** SVG height in pixels (default: 593) */
-    height?: number;
-    /** Map of state abbreviation to fill color */
-    stateColors?: Record<string, string>;
-    /** Default fill color for states not in stateColors (default: '#D0D0D0') */
-    defaultColor?: string;
-    /** Border color between states (default: '#FFFFFF') */
-    strokeColor?: string;
-    /** Border width between states (default: 1) */
-    strokeWidth?: number;
-    /** Click handler — receives the state abbreviation */
-    onStateClick?: (stateId: string) => void;
-    /** Hover handler — receives the state abbreviation or null on mouse leave */
-    onStateHover?: (stateId: string | null) => void;
-    /** Highlight color on hover (default: '#FFD700') */
-    hoverColor?: string;
-    /** Accessible title for the SVG (default: 'Map of the United States') */
-    title?: string;
-}
-declare function USStateMap(props: USStateMapProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-/**
- * US state SVG path data extracted from a public domain (CC0) blank US map.
- * Each entry maps a two-letter state abbreviation to its name and SVG path.
- * The paths are designed for a viewBox of "0 0 959 593".
- */
-interface StatePathData {
-    name: string;
-    path: string;
-}
-declare const US_STATE_PATHS: Record<string, StatePathData>;
-
-interface HeatMapProps {
-    /** 2D grid of values — data[row][col] */
-    data: number[][];
-    /** Labels for rows (Y axis) */
-    rowLabels?: string[];
-    /** Labels for columns (X axis) */
-    columnLabels?: string[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Color gradient from low to high (default: blue to red) */
-    colorScale?: string[];
-    /** Minimum value for color mapping (auto-detected if omitted) */
-    minValue?: number;
-    /** Maximum value for color mapping (auto-detected if omitted) */
-    maxValue?: number;
-    /** Show numeric value in each cell (default: false) */
-    showValues?: boolean;
-    /** Cell border color (default: '#fff') */
-    cellBorderColor?: string;
-    /** Cell border width (default: 1) */
-    cellBorderWidth?: number;
-    /** Chart title */
-    title?: string;
-    /** Padding around the chart in px (default: 60) */
-    padding?: number;
-}
-declare function HeatMap(props: HeatMapProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface HistogramProps {
-    /** Raw data values to bin */
-    data: number[];
-    /** Number of bins (default: 10) */
-    bins?: number;
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Bar fill color (default: '#3b82f6') */
-    barColor?: string;
-    /** Gap between bars in px (default: 2) */
-    barGap?: number;
-    /** Show grid lines (default: true) */
-    showGrid?: boolean;
-    /** Show count values above bars (default: true) */
-    showValues?: boolean;
-    /** Chart title */
-    title?: string;
-    /** X-axis label */
-    xLabel?: string;
-    /** Y-axis label */
-    yLabel?: string;
-    /** Padding around chart area in px (default: 60) */
-    padding?: number;
-}
-declare function Histogram(props: HistogramProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface LollipopDatum {
-    label: string;
-    value: number;
-    color?: string;
-}
-interface LollipopChartProps {
-    /** Data points to render */
-    data: LollipopDatum[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Chart orientation (default: 'vertical') */
-    orientation?: "horizontal" | "vertical";
-    /** Stem line color (default: '#94a3b8') */
-    stemColor?: string;
-    /** Stem line width in px (default: 2) */
-    stemWidth?: number;
-    /** Dot radius in px (default: 6) */
-    dotRadius?: number;
-    /** Dot fill color (default: '#3b82f6') */
-    dotColor?: string;
-    /** Show grid lines (default: true) */
-    showGrid?: boolean;
-    /** Show value labels (default: true) */
-    showValues?: boolean;
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 60) */
-    padding?: number;
-}
-declare function LollipopChart(props: LollipopChartProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface MatrixProps {
-    /** 2D grid of values — data[row][col] */
-    data: number[][];
-    /** Shared row/column labels for square matrices */
-    labels?: string[];
-    /** Explicit row labels (overrides `labels`) */
-    rowLabels?: string[];
-    /** Explicit column labels (overrides `labels`) */
-    columnLabels?: string[];
-    /** SVG width in pixels (default: 500) */
-    width?: number;
-    /** SVG height in pixels (default: 500) */
-    height?: number;
-    /** Color gradient from low to high (default: white to blue) */
-    colorScale?: string[];
-    /** Show numeric value in each cell (default: true) */
-    showValues?: boolean;
-    /** Highlight diagonal cells (default: true) */
-    showDiagonal?: boolean;
-    /** Cell border color (default: '#e5e7eb') */
-    cellBorderColor?: string;
-    /** Chart title */
-    title?: string;
-    /** Padding around the chart in px (default: 70) */
-    padding?: number;
-    /** If true, mirror values across diagonal for correlation matrices (default: false) */
-    symmetric?: boolean;
-}
-declare function Matrix(props: MatrixProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface PartitionNode {
-    label: string;
-    value?: number;
-    color?: string;
-    children?: PartitionNode[];
-}
-interface PartitionProps {
-    /** Root node of the partition data */
-    data: PartitionNode;
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Layout orientation (default: 'horizontal') */
-    orientation?: 'horizontal' | 'vertical';
-    /** Show labels inside cells (default: true) */
-    showLabels?: boolean;
-    /** Show values inside cells (default: true) */
-    showValues?: boolean;
-    /** Color palette for cells without explicit color */
-    colors?: string[];
-    /** Border color around cells (default: '#ffffff') */
-    borderColor?: string;
-    /** Border width in px (default: 1) */
-    borderWidth?: number;
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 10) */
-    padding?: number;
-}
-declare function Partition(props: PartitionProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface PivotTableProps {
-    /** Array of data records */
-    data: Record<string, unknown>[];
-    /** Row dimension field names */
-    rows: string[];
-    /** Column dimension field names */
-    columns: string[];
-    /** Value field names to aggregate */
-    values: string[];
-    /** Aggregation function (default: 'sum') */
-    aggregation?: 'sum' | 'count' | 'avg' | 'min' | 'max';
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Show totals row and column (default: true) */
-    showTotals?: boolean;
-    /** Chart title */
-    title?: string;
-    /** Header background color (default: '#3b82f6') */
-    headerColor?: string;
-    /** Cell padding in px (default: 8) */
-    cellPadding?: number;
-}
-declare function PivotTable(props: PivotTableProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface RadarAxis {
-    label: string;
-    max?: number;
-}
-interface RadarSeries {
-    label: string;
-    values: number[];
-    color: string;
-    fillOpacity?: number;
-}
-interface RadarChartProps {
-    /** Axes definition — one per spoke of the radar */
-    axes: RadarAxis[];
-    /** Data series to overlay on the chart */
-    series: RadarSeries[];
-    /** SVG width in pixels (default: 500) */
-    width?: number;
-    /** SVG height in pixels (default: 500) */
-    height?: number;
-    /** Number of concentric grid rings (default: 5) */
-    levels?: number;
-    /** Show axis labels around the perimeter (default: true) */
-    showLabels?: boolean;
-    /** Show value annotations at data points (default: false) */
-    showValues?: boolean;
-    /** Show legend (default: true) */
-    showLegend?: boolean;
-    /** Show dots at data points (default: true) */
-    showDots?: boolean;
-    /** Grid line color (default: '#d1d5db') */
-    gridColor?: string;
-    /** Chart title */
-    title?: string;
-}
-declare function RadarChart(props: RadarChartProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface SankeyNode {
-    id: string;
-    label: string;
-    color?: string;
-}
-interface SankeyLink {
-    source: string;
-    target: string;
-    value: number;
-    color?: string;
-}
-interface SankeyDiagramProps {
-    /** Array of nodes */
-    nodes: SankeyNode[];
-    /** Array of links (flows) between nodes */
-    links: SankeyLink[];
-    /** SVG width in pixels (default: 800) */
-    width?: number;
-    /** SVG height in pixels (default: 500) */
-    height?: number;
-    /** Width of each node rectangle in pixels (default: 20) */
-    nodeWidth?: number;
-    /** Vertical padding between nodes in pixels (default: 10) */
-    nodePadding?: number;
-    /** Show node labels (default: true) */
-    showLabels?: boolean;
-    /** Show flow values on links (default: false) */
-    showValues?: boolean;
-    /** Link fill opacity 0..1 (default: 0.4) */
-    linkOpacity?: number;
-    /** Color palette for auto-coloring nodes */
-    colors?: string[];
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 40) */
-    padding?: number;
-}
-declare function SankeyDiagram(props: SankeyDiagramProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface SunburstNode {
-    label: string;
-    value?: number;
-    color?: string;
-    children?: SunburstNode[];
-}
-interface SunburstProps {
-    /** Root node of the sunburst data */
-    data: SunburstNode;
-    /** SVG width in pixels (default: 500) */
-    width?: number;
-    /** SVG height in pixels (default: 500) */
-    height?: number;
-    /** Inner radius of the first ring (default: 40) */
-    innerRadius?: number;
-    /** Show labels on segments (default: true) */
-    showLabels?: boolean;
-    /** Color palette for segments without explicit color */
-    colors?: string[];
-    /** Stroke color between segments (default: '#ffffff') */
-    strokeColor?: string;
-    /** Stroke width between segments (default: 1) */
-    strokeWidth?: number;
-    /** Chart title */
-    title?: string;
-}
-declare function Sunburst(props: SunburstProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface TreeMapNode {
-    label: string;
-    value: number;
-    color?: string;
-    children?: TreeMapNode[];
-}
-interface TreeMapProps {
-    /** Root node of the treemap data */
-    data: TreeMapNode;
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Show labels inside cells (default: true) */
-    showLabels?: boolean;
-    /** Show values inside cells (default: true) */
-    showValues?: boolean;
-    /** Color palette for cells without explicit color */
-    colors?: string[];
-    /** Border color around cells (default: '#ffffff') */
-    borderColor?: string;
-    /** Border width in px (default: 2) */
-    borderWidth?: number;
-    /** Inner padding for nested cells in px (default: 2) */
-    padding?: number;
-    /** Chart title */
-    title?: string;
-}
-declare function TreeMap(props: TreeMapProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface VectorDatum {
-    x: number;
-    y: number;
-    dx: number;
-    dy: number;
-    magnitude?: number;
-}
-/** Function signature for a custom compute worker */
-type ComputeWorkerFn = (gridPoints: {
-    x: number;
-    y: number;
-}[], uniforms: Record<string, number>) => {
-    dx: number;
-    dy: number;
-}[];
-interface VectorFieldProps {
-    /** Pre-computed vector data */
-    data?: VectorDatum[];
-    /** Function that computes vector at each grid point */
-    vectorFunction?: (x: number, y: number) => {
-        dx: number;
-        dy: number;
-    };
-    /** Width in pixels (default: 600) */
-    width?: number;
-    /** Height in pixels (default: 600) */
-    height?: number;
-    /** Number of arrows per axis when using vectorFunction (default: 15, max: 50) */
-    gridSize?: number;
-    /** X-axis domain (default: [-5, 5]) */
-    xRange?: [number, number];
-    /** Y-axis domain (default: [-5, 5]) */
-    yRange?: [number, number];
-    /** Scale factor for arrow length (default: 1) */
-    arrowScale?: number;
-    /** Default arrow color (default: '#3b82f6') */
-    arrowColor?: string;
-    /** Show background grid (default: true) */
-    showGrid?: boolean;
-    /** Show axes through origin (default: true) */
-    showAxes?: boolean;
-    /** Color arrows by magnitude (default: false) */
-    colorByMagnitude?: boolean;
-    /** Color scale for magnitude coloring (default: blue-red) */
-    colorScale?: string[];
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 50) */
-    padding?: number;
-    /** Font size for axis tick labels in px (default: 10) */
-    tickFontSize?: number;
-    /** Arrow stroke width (default: 1.5) */
-    arrowWidth?: number;
-    /** Rendering mode: 'svg' for DOM-based, 'canvas' for Canvas 2D (default: 'svg') */
-    renderer?: 'svg' | 'canvas';
-    /** Enable GPU-accelerated compute via a custom worker function (default: false) */
-    useGPU?: boolean;
-    /** Custom compute function for vector field calculation (e.g. for radio propagation) */
-    computeWorker?: ComputeWorkerFn;
-}
-declare function VectorField(props: VectorFieldProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface WaterfallDatum {
-    label: string;
-    value: number;
-    type?: 'increase' | 'decrease' | 'total';
-}
-interface WaterfallChartProps {
-    /** Data points to render */
-    data: WaterfallDatum[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Color for increase bars (default: '#10b981') */
-    increaseColor?: string;
-    /** Color for decrease bars (default: '#ef4444') */
-    decreaseColor?: string;
-    /** Color for total bars (default: '#3b82f6') */
-    totalColor?: string;
-    /** Color for connector lines (default: '#94a3b8') */
-    connectorColor?: string;
-    /** Show value labels on bars (default: true) */
-    showValues?: boolean;
-    /** Show grid lines (default: true) */
-    showGrid?: boolean;
-    /** Show connector lines between bars (default: true) */
-    showConnectors?: boolean;
-    /** Chart title */
-    title?: string;
-    /** Padding around chart area in px (default: 60) */
-    padding?: number;
-}
-declare function WaterfallChart(props: WaterfallChartProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface WordDatum {
-    text: string;
-    weight: number;
-    color?: string;
-}
-interface WordCloudProps {
-    /** Array of words with weights */
-    words: WordDatum[];
-    /** SVG width in pixels (default: 600) */
-    width?: number;
-    /** SVG height in pixels (default: 400) */
-    height?: number;
-    /** Minimum font size in px (default: 10) */
-    minFontSize?: number;
-    /** Maximum font size in px (default: 64) */
-    maxFontSize?: number;
-    /** Font family (default: 'sans-serif') */
-    fontFamily?: string;
-    /** Color palette for words without explicit color */
-    colors?: string[];
-    /** Allowed rotation angles in degrees (default: [0, -45, 45, 90]) */
-    rotations?: number[];
-    /** Padding between words in px (default: 4) */
-    padding?: number;
-    /** Spiral type for placement (default: 'archimedean') */
-    spiral?: 'archimedean' | 'rectangular';
-    /** Chart title */
-    title?: string;
-}
-declare function WordCloud(props: WordCloudProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-interface DiscreteCartesian2DProps {
-    /** Grid data: rows x cols. Each value maps to a color via colorMap. */
-    data: number[][];
-    /** Map cell values to colors (e.g., {0: '#1e293b', 1: '#3b82f6'}) */
-    colorMap?: Record<number, string>;
-    /** SVG viewBox width (default: 600) */
-    width?: number;
-    /** SVG viewBox height (default: 600) */
-    height?: number;
-    /** Gap between cells in pixels (default: 1) */
-    cellGap?: number;
-    /** Cell border radius (default: 0) */
-    cellRadius?: number;
-    /** Show grid lines (default: false) */
-    showGrid?: boolean;
-    /** Grid line color (default: '#334155') */
-    gridColor?: string;
-    /** Show row/column indices (default: false) */
-    showIndices?: boolean;
-    /** Background color (default: '#0f172a') */
-    backgroundColor?: string;
-    /** Padding around grid (default: 10) */
-    padding?: number;
-    /** Called when a cell is clicked: (row, col, value) */
-    onCellClick?: (row: number, col: number, value: number) => void;
-    /** Called when mouse enters a cell */
-    onCellHover?: (row: number, col: number, value: number) => void;
-    /** Title */
-    title?: string;
-}
-declare function DiscreteCartesian2D(props: DiscreteCartesian2DProps): specifyjs_shared_types.SpecElement<specifyjs_shared_types.Props>;
-
-export { Accordion, Alert, AnalogClock, Avatar, Badge, BarGraph, BigNumber, BlochSphere, BoxPlot, Breadcrumb, BubbleChart, Button, CalendarHeatMap, Card, Carousel, CartesianGraph2D, Checkbox, ChordDiagram, ColorPicker, ColorWheel, ComplexGraph2D, ContextMenu, DataGrid, DatePicker, DecompositionTree, DigitalClock, DiscreteCartesian2D, Drawer, Dropdown, EmptyState, FileUpload, FlexContainer, FlexItem, Footer, ForceGraph, FormFieldWrapper, FunnelChart, GanttChart, Gauge, GoogleAnalytics, Grid, GridItem, HeatMap, Histogram, HypercubeGraph, IDE, Image, LineGraph, ListView, LollipopChart, Matrix, Menubar, Modal, MultilineField, NavWrapper, NumberSpinner, Pagination, Panel, Partition, PieGraph, PivotTable, PolarGraph2D, Popover, ProgressBar, RadarChart, RadioGroup, SankeyDiagram, ScrollContainer, Select, Sidebar, Skeleton, Slider, Spinner, Splitter, Stepper, Sunburst, Tabs, Tag, TextEditor, TextField, ThreeDLayers, TimePicker, ToastContainer, Toggle, Toolbar, Tooltip, TradingDashboard, TreeMap, TreeNav, TreeNode, USStateMap, US_STATE_PATHS, UnityApp, UnityDesktop, VectorField, VideoPlayer, VirtualScroll, VizWrapper, WaterfallChart, WordCloud, WordProcessor, applyGate, blochToCartesian, buildInputStyle, buildNavItemStyle, buildRotationMatrix, cartesianToBloch, computeBoxStats, computeMandelbrotGrid, computeSlices, createToaster, describeArc, generateEdges, generateHypercube, generatePalette, generateVertices, numRotationAngles, projectTo2D, transformVec, useBarGraphScales, useHover, useHypercube, useLineGraphScales, useToast };
-export type { AccordionContentStyle, AccordionHeaderStyle, AccordionProps, AccordionSection, AlertProps, AnalogClockProps, AvatarProps, BadgeProps, BarDatum, BarGraphProps, BarGraphScales, BigNumberProps, BlochSphereProps, BlochState, BoxPlotDatum, BoxPlotProps, BoxStats, BreadcrumbItem, BreadcrumbProps, BreadcrumbSize, BubbleChartProps, BubbleDatum, ButtonProps, CalendarDatum, CalendarHeatMapProps, CardProps, CarouselProps, CartesianGraph2DProps, CheckboxProps, ChordDiagramProps, ColorPickerProps, ColorWheelProps, ComplexGraph2DProps, ComplexPointInfo, ComputeWorkerFn, ComputedSlice, ContextMenuItem, ContextMenuProps, CustomForceFunction, DataGridColumn, DataGridProps, DatePickerProps, DecompNode, DecompositionTreeProps, DigitalClockProps, DiscreteCartesian2DProps, DrawerPosition, DrawerProps, DropdownItem, DropdownProps, Edge, EmptyStateProps, FileUploadProps, FlexContainerProps, FlexItemProps, FooterProps, ForceEdge, ForceGraphProps, ForceNode, ForceSimNode, FormFieldWrapperProps, FormFieldWrapperStyle, FunnelChartProps, FunnelDatum, GanttChartProps, GanttTask, GateName, GateOp, GaugeProps, GoogleAnalyticsProps, GridBreakpoint, GridItemProps, GridProps, HeatMapProps, HistogramProps, HypercubeData, HypercubeGraphProps, IDEProps, ImageProps, InputBaseStyle, Layer3D, LegendItem, LineGraphProps, LineSeries, ListViewProps, LollipopChartProps, LollipopDatum, MatrixProps, MenuDefinition, MenuItem, MenubarProps, ModalProps, ModalSize, MousePosition, MultilineFieldProps, NavItemStyle, NavOrientation, NavWrapperProps, NavWrapperStyle, NumberSpinnerProps, PaginationProps, PanelProps, PartitionNode, PartitionProps, PieGraphProps, PieSliceDatum, PivotTableProps, Point, PointEvent, PointShape, PolarGraph2DProps, PolarPointInfo, PopoverPlacement, PopoverProps, Position, ProgressBarProps, RadarAxis, RadarChartProps, RadarSeries, RadioGroupProps, RadioOption, SankeyDiagramProps, SankeyLink, SankeyNode, ScrollContainerProps, SelectOption, SelectProps, SidebarItem, SidebarProps, SkeletonProps, SliderMark, SliderProps, SpinnerProps, SplitterProps, StackedBarDatum, StatePathData, StepItem, StepperOrientation, StepperProps, StepperVariant, SunburstNode, SunburstProps, TabDefinition, TabsProps, TagProps, TextEditorProps, TextFieldProps, ThreeDLayersProps, TimePickerProps, ToastAction, ToastItem, ToastNotification, ToastOptions, ToastPosition, ToastType, Toaster, ToasterConfig, ToggleProps, ToolbarButton, ToolbarItem, ToolbarProps, ToolbarSize, ToolbarVariant, TooltipPlacement, TooltipProps, TradingDashboardProps, TrailConfig, TrailPoint, TreeMapNode, TreeMapProps, TreeNavProps, TreeNodeData, USStateMapProps, UnityAppProps, UnityDesktopApp, UnityDesktopProps, UnityDesktopUser, UseHypercubeOptions, Vec, VectorDatum, VectorFieldProps, Vertex, VideoPlayerProps, VirtualScrollProps, VizWrapperProps, WaterfallChartProps, WaterfallDatum, WordCloudProps, WordDatum, WordProcessorProps };
+export * from "./types/core/src/components-barrel";