import { AxisKey } from '@graphysdk/viz-engine';
import { Command } from '@graphysdk/viz-engine';
import { ComponentType } from 'react';
import { DispatchOptions } from '@graphysdk/viz-engine';
import { Edge } from '@graphysdk/viz-engine';
import { EdgeSizes } from '@graphysdk/viz-engine';
import { EditorPanel } from './editable/panel/editor-panel';
import { EditTarget } from '@graphysdk/viz-engine';
import { FormattedAxis } from '@graphysdk/viz-engine';
import { FormattedHeadline } from '@graphysdk/viz-engine';
import { FormattedLegend } from '@graphysdk/viz-engine';
import { GraphLayout } from '@graphysdk/viz-engine';
import { HeadlineMeasurer } from '@graphysdk/viz-engine';
import { IntroStaggerOrder } from '@graphysdk/viz-engine';
import { JSX } from 'react/jsx-runtime';
import { LegendPosition } from '@graphysdk/viz-engine';
import { LineType } from '@graphysdk/viz-engine';
import { PANEL_ROOT_ATTRIBUTE } from './editable/panel/editor-panel';
import { PanelRootProps } from './editable/panel/editor-panel';
import { PanelRootProps as PanelRootProps_2 } from '../panel/editor-panel';
import { ReactNode } from 'react';
import { Rect } from '@graphysdk/viz-engine';
import { ResolvedHeadlineSize } from '@graphysdk/viz-engine';
import { Scene } from '@graphysdk/viz-engine';
import { SourceContent } from '@graphysdk/viz-engine';
import { TextContent } from '@graphysdk/viz-engine';
import { TextMeasurer } from '@graphysdk/viz-engine';
import { TextStyle } from '@graphysdk/viz-engine';
import { TooltipContent } from '@graphysdk/viz-engine';

/**
 * How round the chart's frame is, and how it pushes back the marks a highlight leaves out. The
 * highlight row is inert until something adds a highlight.
 */
export declare const AppearanceSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/** Both axes, each switched on and off from within its own section. */
export declare const AxesPanel: ({ children, ...rootProps }: PanelProps) => JSX.Element;

/**
 * Props for the AxisLabel slot — the axis title of every axis (e.g. "Revenue"), overridable via
 * `slots.AxisLabel`. `labelRects` are SVG-local, keyed by edge. The tick band is a separate slot — see
 * `AxisTicks`.
 */
declare interface AxisLabelSlotProps {
    formattedAxes: FormattedAxis[];
    labelRects: Partial<Record<Edge, Rect>>;
}

/**
 * One axis, and the scale it carries.
 *
 * `x` and `y` stay as mapped however the chart is drawn: a flipped coord system turns a column chart
 * on its side without moving the value scale off y.
 */
export declare const AxisSection: ({ axis, title, layout, preview }: AxisSectionProps) => JSX.Element | null;

export declare interface AxisSectionProps extends OverridableSectionProps {
    /** Which axis this section edits. */
    axis: AxisKey;
}

/**
 * Props for the AxisTicks slot — the tick lines and tick labels of every axis, overridable via
 * `slots.AxisTicks`. `tickRects` are SVG-local, keyed by edge. The axis title is a separate slot — see
 * `AxisLabel`.
 */
declare interface AxisTicksSlotProps {
    formattedAxes: FormattedAxis[];
    tickRects: Partial<Record<Edge, Rect>>;
}

/**
 * A bar's own shape: how thick it is and how round its corners are.
 *
 * No gap row: painted width is `step × (1 - scalePadding) × width / seriesCount`, so band padding and
 * this fraction shrink the group the same way.
 */
export declare const BarSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * How the badge paints at the current frame size:
 * - `full` — glyph + "Made with Graphy" pill
 * - `mini` — circular glyph capsule (also the under-200 px ladder step)
 * - `hidden` — flag off, or frame below the minimum footprint
 */
declare type BrandMarkVisual = 'full' | 'mini' | 'hidden';

/**
 * A press that performs an edit rather than sets a value.
 *
 * Every press is its own undo entry, so there is no transient run to commit here — a button has no
 * gesture to hold open the way a drag or a run of keystrokes does.
 */
export declare const Button: ({ label, icon, onClick, variant, isDisabled, ariaLabel, ariaLabelledBy, id, }: ButtonControlProps) => JSX.Element;

declare interface ButtonBaseProps extends ControlBaseProps {
    onClick: () => void;
    /**
     * `default` is a row: the icon before the label, on the section's own width. `tile` stacks the
     * icon above the label in a taller cell, for a grid of add-affordances read as pictures.
     */
    variant?: 'default' | 'tile';
}

/**
 * What the button shows, as a choice rather than two independent flags.
 *
 * A button with neither a label nor an icon is invisible and unnameable, and two optional props
 * make that the default rather than an error. Splitting the cases closes it, and closes the one
 * beside it: an icon standing alone is the only thing on the button, so it carries the accessible
 * name and `ariaLabel` stops being optional.
 */
declare type ButtonContentProps = {
    label: string;
    icon?: ReactNode;
} | {
    label?: undefined;
    icon: ReactNode;
    ariaLabel: string;
};

/**
 * An action rather than a value: pressing it is the whole gesture, so there is nothing to read
 * back. Sections use it where an edit adds or removes something instead of changing a setting.
 */
export declare type ButtonControlProps = ButtonBaseProps & ButtonContentProps;

/**
 * Each tile writes a whole annotation on one press: the spec cannot hold an annotation with no
 * position, so there is no draw-it-on-the-chart gesture.
 */
export declare const CalloutsSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * Whether the chart shows its caption, and what it says.
 *
 * Hiding it leaves the text intact, so it comes back without being retyped. It is also editable in
 * place on the chart; the field here is the second way in, not the only one.
 */
export declare const CaptionSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/** Every phrase a chart can say. The editing surface adds its own — see `editable/i18n/editor-i18n`. */
declare type ChartPhrases = typeof EN_GB;

/**
 * Which arrangement a combo's halves take: bars under the line, or lines throughout. Shown only for a
 * chart that is already a combo — the type picker is what makes one.
 */
export declare const ComboSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * A control where one gesture can produce a run of changes — a drag, a burst of typing, a held
 * arrow key.
 *
 * `onChange` fires throughout the gesture and a section dispatches it transiently; `onCommit` fires
 * once the gesture ends, so a whole drag collapses into one undo entry rather
 * than one per frame. A control that only ever fires `onChange` still edits correctly; it just
 * leaves the run open for the next edit to close.
 */
export declare interface ContinuousControlProps<Value> extends ControlBaseProps {
    value: Value;
    onChange: (value: Value) => void;
    onCommit?: () => void;
}

/** Props every control shares. */
export declare interface ControlBaseProps {
    isDisabled?: boolean;
    /** Required unless the control is labelled by a section row, which passes `ariaLabelledBy` instead. */
    ariaLabel?: string;
    ariaLabelledBy?: string;
    /**
     * Put on the element a row's `<label htmlFor>` points at, so a click on the label acts on the
     * control. Only single labelable controls have somewhere to put it; a group takes `ariaLabelledBy`.
     */
    id?: string;
}

/**
 * One choice in a control that offers a fixed set of them.
 *
 * `value` is a plain string rather than a command's own union: a control is one component type,
 * which cannot be generic in what it selects. Sections map between the two.
 */
export declare interface ControlOption {
    value: string;
    label: string;
    /** Secondary line under the label, shown by controls that have room for one. */
    description?: string;
    /** Shown beside the label, or alone where the control is icon-only. */
    icon?: ReactNode;
    isDisabled?: boolean;
}

/**
 * The controls a panel is built from, each replaceable by the host.
 *
 * Sections never reach for a UI library directly — every leaf goes through here, so an app can drop
 * its own design system in without re-authoring a single section. Every member is optional, so
 * adopting the panel is not all-or-nothing and a control added later is additive rather than
 * breaking.
 */
export declare interface ControlRegistry {
    ToggleGroup?: ComponentType<ToggleGroupControlProps>;
    Switch?: ComponentType<SwitchControlProps>;
    Slider?: ComponentType<SliderControlProps>;
    RadioGrid?: ComponentType<RadioGridControlProps>;
    Button?: ComponentType<ButtonControlProps>;
    TextField?: ComponentType<TextFieldControlProps>;
    NumberField?: ComponentType<NumberFieldControlProps>;
    Select?: ComponentType<SelectControlProps>;
}

declare type DeepValue<T, Path extends string> = Path extends `${infer First}.${infer Rest}` ? First extends keyof T ? DeepValue<T[First], Rest> : never : Path extends keyof T ? T[Path] : never;

declare const dictionaries: {
    readonly 'en-GB': {
        readonly graph: {
            readonly loading: "Loading";
            readonly error: "Something went wrong";
            readonly axisLabels: {
                readonly placeholder: "Add label";
            };
            readonly defaultPropertyLabels: {
                readonly date: "Date";
                readonly year: "Year";
                readonly quarter: "Quarter";
                readonly month: "Month";
                readonly week: "Week";
                readonly series: "Series";
                readonly category: "Category";
                readonly columnNumber: ({ number }: {
                    number: number;
                }) => string;
                readonly rowNumber: ({ number }: {
                    number: number;
                }) => string;
                readonly seriesNumber: ({ number }: {
                    number: number;
                }) => string;
            };
            readonly trendComparison: {
                readonly fromPrevious: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousYear: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousMonth: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousWeek: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousDay: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousHour: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
            };
            readonly headlineMetrics: {
                readonly averageLong: ({ value }: {
                    value: string;
                }) => string;
                readonly averageShort: ({ value }: {
                    value: string;
                }) => string;
                readonly total: ({ value }: {
                    value: string;
                }) => string;
                readonly totalConversionRate: ({ value }: {
                    value: string;
                }) => string;
                readonly current: ({ value }: {
                    value: string;
                }) => string;
                readonly comparisonReference: ({ value }: {
                    value: string;
                }) => string;
            };
            readonly legend: {
                readonly hiddenItems: "Hidden legend items";
            };
        };
        readonly dir: "ltr";
    };
    readonly 'en-US': LooseShapeOf<LocaleShape>;
    readonly ar: {
        readonly graph: {
            readonly loading: "جاري التحميل";
            readonly error: "حدث خطأ ما";
            readonly axisLabels: {
                readonly placeholder: "إضافة تسمية";
            };
            readonly defaultPropertyLabels: {
                readonly date: "التاريخ";
                readonly year: "السنة";
                readonly quarter: "الربع";
                readonly month: "الشهر";
                readonly week: "الأسبوع";
                readonly series: "السلسلة";
                readonly category: "الفئة";
                readonly columnNumber: ({ number }: {
                    number: number;
                }) => string;
                readonly rowNumber: ({ number }: {
                    number: number;
                }) => string;
                readonly seriesNumber: ({ number }: {
                    number: number;
                }) => string;
            };
            readonly trendComparison: {
                readonly fromPrevious: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousYear: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousMonth: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousWeek: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousDay: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousHour: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
            };
            readonly headlineMetrics: {
                readonly averageLong: ({ value }: {
                    value: string;
                }) => string;
                readonly averageShort: ({ value }: {
                    value: string;
                }) => string;
                readonly total: ({ value }: {
                    value: string;
                }) => string;
                readonly totalConversionRate: ({ value }: {
                    value: string;
                }) => string;
                readonly current: ({ value }: {
                    value: string;
                }) => string;
                readonly comparisonReference: ({ value }: {
                    value: string;
                }) => string;
            };
            readonly legend: {
                readonly hiddenItems: "عناصر وسيلة الإيضاح المخفية";
            };
        };
        readonly dir: "rtl";
    };
    readonly 'pt-PT': {
        readonly graph: {
            readonly loading: "A carregar";
            readonly error: "Algo correu mal";
            readonly axisLabels: {
                readonly placeholder: "Adicionar etiqueta";
            };
            readonly defaultPropertyLabels: {
                readonly date: "Data";
                readonly year: "Ano";
                readonly quarter: "Trimestre";
                readonly month: "Mês";
                readonly week: "Semana";
                readonly series: "Série";
                readonly category: "Categoria";
                readonly columnNumber: ({ number }: {
                    number: number;
                }) => string;
                readonly rowNumber: ({ number }: {
                    number: number;
                }) => string;
                readonly seriesNumber: ({ number }: {
                    number: number;
                }) => string;
            };
            readonly trendComparison: {
                readonly fromPrevious: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousYear: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousMonth: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousWeek: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousDay: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
                readonly fromPreviousHour: {
                    readonly long: ({ value }: {
                        value: string;
                    }) => string;
                    readonly short: ({ value }: {
                        value: string;
                    }) => string;
                };
            };
            readonly headlineMetrics: {
                readonly averageLong: ({ value }: {
                    value: string;
                }) => string;
                readonly averageShort: ({ value }: {
                    value: string;
                }) => string;
                readonly total: ({ value }: {
                    value: string;
                }) => string;
                readonly totalConversionRate: ({ value }: {
                    value: string;
                }) => string;
                readonly current: ({ value }: {
                    value: string;
                }) => string;
                readonly comparisonReference: ({ value }: {
                    value: string;
                }) => string;
            };
            readonly legend: {
                readonly hiddenItems: "Itens de legenda ocultos";
            };
        };
        readonly dir: "ltr";
    };
};

declare type Dictionary<T> = {
    [K in keyof T]: T[K] extends object ? Dictionary<T[K]> : string;
};

/**
 * A control where one gesture can only ever produce one change, so every change is its own undo
 * entry and there is nothing left to commit — a switch flipped, an option picked from a popup.
 *
 * Being single-valued is not the test. A radio grid holds one string and is still {@link
 * ContinuousControlProps}, because holding an arrow key sweeps its selection.
 */
export declare interface DiscreteControlProps<Value> extends ControlBaseProps {
    value: Value;
    onChange: (value: Value) => void;
}

declare type DotNotation<T> = T extends object ? {
    [K in keyof T & string]: T[K] extends (...args: never[]) => unknown ? K : T[K] extends object ? `${K}.${DotNotation<T[K]>}` : K;
}[keyof T & string] : never;

/**
 * `GraphRenderer` with the editor layer wired in. A host toggles `mode` rather than swapping
 * components, so hover, animation, the scene store and the undo history survive the toggle.
 *
 * The editor store is held from here, above the renderer, because the editing surface fills a slot
 * beside the plot rather than above it: a store it hosted would be out of reach of the geoms and chrome
 * painting inside the plot `<svg>`, which have to show a target being reached for or an endpoint being
 * moved. A chart rendered without this wrapper has no editor state at all, and reads it at rest.
 *
 * @example
 * ```tsx
 * <GraphProvider spec={input} data={data}>
 *   <EditableGraphRenderer mode={isEditing ? 'editable' : 'readonly'} />
 * </GraphProvider>
 * ```
 */
export declare const EditableGraphRenderer: ({ slots, mode, ...rest }: GraphRendererProps) => JSX.Element;

export { EditorPanel }

/** Props the renderer passes to the editor layer filling the `EditorSurface` slot. */
declare interface EditorSurfaceSlotProps {
    /** The frame's content box — the element the layer measures, listens on and aligns its chrome to. */
    frameElement: HTMLElement;
    /** The panel's rect within that box, so chrome positioned from `layout` shares its origin. */
    panelRect: Rect;
    /** The axes as the chart paints them, whose ticks a stamped tick index addresses. */
    formattedAxes: readonly FormattedAxis[];
    /** Whether the chart animates between states, so what the editor draws over its geoms can follow. */
    shouldAnimateTransitions: boolean;
}

/**
 * The chart's text and its size: what the header and footer show, and how large everything is drawn.
 *
 * Section order follows the chart's own reading order: the text down the page, then its size.
 */
export declare const ElementsPanel: ({ children, ...rootProps }: PanelProps) => JSX.Element;

declare const EN_GB: {
    readonly graph: {
        readonly loading: "Loading";
        readonly error: "Something went wrong";
        readonly axisLabels: {
            readonly placeholder: "Add label";
        };
        readonly defaultPropertyLabels: {
            readonly date: "Date";
            readonly year: "Year";
            readonly quarter: "Quarter";
            readonly month: "Month";
            readonly week: "Week";
            readonly series: "Series";
            readonly category: "Category";
            readonly columnNumber: ({ number }: {
                number: number;
            }) => string;
            readonly rowNumber: ({ number }: {
                number: number;
            }) => string;
            readonly seriesNumber: ({ number }: {
                number: number;
            }) => string;
        };
        readonly trendComparison: {
            readonly fromPrevious: {
                readonly long: ({ value }: {
                    value: string;
                }) => string;
                readonly short: ({ value }: {
                    value: string;
                }) => string;
            };
            readonly fromPreviousYear: {
                readonly long: ({ value }: {
                    value: string;
                }) => string;
                readonly short: ({ value }: {
                    value: string;
                }) => string;
            };
            readonly fromPreviousMonth: {
                readonly long: ({ value }: {
                    value: string;
                }) => string;
                readonly short: ({ value }: {
                    value: string;
                }) => string;
            };
            readonly fromPreviousWeek: {
                readonly long: ({ value }: {
                    value: string;
                }) => string;
                readonly short: ({ value }: {
                    value: string;
                }) => string;
            };
            readonly fromPreviousDay: {
                readonly long: ({ value }: {
                    value: string;
                }) => string;
                readonly short: ({ value }: {
                    value: string;
                }) => string;
            };
            readonly fromPreviousHour: {
                readonly long: ({ value }: {
                    value: string;
                }) => string;
                readonly short: ({ value }: {
                    value: string;
                }) => string;
            };
        };
        readonly headlineMetrics: {
            readonly averageLong: ({ value }: {
                value: string;
            }) => string;
            readonly averageShort: ({ value }: {
                value: string;
            }) => string;
            readonly total: ({ value }: {
                value: string;
            }) => string;
            readonly totalConversionRate: ({ value }: {
                value: string;
            }) => string;
            readonly current: ({ value }: {
                value: string;
            }) => string;
            readonly comparisonReference: ({ value }: {
                value: string;
            }) => string;
        };
        readonly legend: {
            readonly hiddenItems: "Hidden legend items";
        };
    };
    readonly dir: "ltr";
};

/**
 * Props for the Footer slot, overridable via `slots.Footer` on `GraphRenderer`. Caption editing in
 * `editable` mode is internal to this default — it hands off to the editor `/editable` supplies —
 * and an override replacing the region opts out of it.
 */
declare interface FooterSlotProps {
    /** Forward this to the region's outer element — the layout measures the rendered DOM to reserve its space. */
    ref?: React.Ref<HTMLDivElement>;
    footerRect: Rect;
    mode?: GraphMode;
    caption: TextContent | null;
    isCaptionVisible: boolean;
    source: SourceContent | null;
    isSourceVisible: boolean;
    captionStyle: TextStyle;
    sourceStyle: SourceStyle;
    /**
     * Resolved badge visual for footer placement. `hidden` when the mark is off, below the min
     * footprint, or configured for header placement.
     */
    brandMark: BrandMarkVisual;
}

export declare const GoalSection: ({ title, preview }: GoalSectionProps) => JSX.Element | null;

/** No `layout`: a toggled section is always collapsible. */
declare type GoalSectionProps = Omit<OverridableSectionProps, 'layout'>;

/**
 * Chart display and interaction mode.
 * - 'readonly': Normal chart display with full interactivity but no editing (default)
 * - 'editable': Chart with inline editing capabilities for labels, titles, etc.
 * - 'point-and-edit': A press on the chart selects what it hit: an observation, its band, or the chart
 */
declare const GRAPH_MODES: {
    readonly readonly: "readonly";
    readonly editable: "editable";
    readonly pointAndEdit: "point-and-edit";
};

/**
 * Animation settings for a graph. `false` disables every animation. A viewer who prefers reduced
 * motion gets no animation whatever this asks for.
 */
declare type GraphAnimation = boolean | GraphAnimationProps;

/** Per-kind animation settings. Each kind is independent: turning one off leaves the other running. */
declare interface GraphAnimationProps {
    /**
     * Settings for the intro animation played when the chart first mounts or the chart type changes.
     * `false` disables it, an object overrides individual intro settings. Defaults on.
     */
    intro?: boolean | Partial<IntroAnimationOptions>;
    /** Whether geoms animate to their new position when the underlying data changes. Defaults on. */
    transitions?: boolean;
    /**
     * Total geom count across all layers above which the graph plays no animation, intro or
     * transitions. A line or area is one geom however many points it draws, so a dense live line
     * stays under the ceiling; turn `transitions` off for it. Defaults to 1500.
     */
    maxAnimatedGeoms?: number;
}

/** Write access to the graph's spec: applying {@link Command}s and closing the runs they form. */
declare interface GraphCommands {
    /** Applies a command to the provider's live spec. */
    dispatch: (command: Command, options?: DispatchOptions) => void;
    /**
     * Closes a run of `{ transient: true }` dispatches and fires `onSpecChange` once for it. Call it when
     * the gesture ends — pointer up, blur. Forgetting only delays the notification rather than
     * corrupting undo: the run covers one {@link EditTarget}, and the next committed dispatch, undo,
     * redo or external change closes it.
     */
    commit: () => void;
}

/**
 * Imperative handle on a graph, for an app's key handling, toolbar or menu bar mounted above the
 * tree the hooks can reach. Obtained through {@link GraphProviderProps.handleRef}.
 */
declare interface GraphHandle {
    /** Write access to the graph's spec, the same surface {@link useGraphCommands} serves inside the tree. */
    commands: GraphCommands;
    /**
     * Registers a listener fired on every change to the graph; returns the unsubscribe. With
     * {@link GraphHandle.getScene} it is what `useSyncExternalStore` needs, so a surface outside the
     * graph's tree stays in step with it. Subscribing before the graph compiles is valid.
     */
    subscribe: (onGraphChange: () => void) => () => void;
    /** The graph's scene as of now, or `null` before its first successful compile. */
    getScene: () => Scene | null;
    /**
     * Reverse the most recent command. Returns whether the chart took the step, so a caller driving
     * this from a keystroke can leave the key to the app when the chart has nothing to undo or the
     * older spec no longer compiles.
     */
    undo: () => boolean;
    /** Re-apply the most recently undone command. Returns whether the chart took the step. */
    redo: () => boolean;
    /** What the chart holds selected as of now; empty when nothing is. */
    getSelection: () => readonly EditTarget[];
    /** Replace what the chart holds selected. */
    setSelection: (next: readonly EditTarget[]) => void;
    /** Registers a listener fired on every change to the selection; returns the unsubscribe. */
    subscribeSelection: (onSelectionChange: () => void) => () => void;
}

/** The mode a chart runs in, which `GraphRenderer` takes as a prop and every row of `MODE_SURFACES` is keyed by. */
declare type GraphMode = (typeof GRAPH_MODES)[keyof typeof GRAPH_MODES];

/**
 * What a chart writes on its own marks. The grid is chrome behind them, and has its own section.
 *
 * Each row mirrors a condition in `runtime/data-labels/strategies/*.placement.ts` and
 * `Geom.dataLabelCoordTypes`, so a row is only offered where the engine will draw it.
 */
export declare const GraphOptionsSection: ({ layerId, title, layout, preview }: GraphOptionsSectionProps) => JSX.Element | null;

export declare interface GraphOptionsSectionProps extends OverridableSectionProps {
    /** Whose labels to edit. Defaults to the first layer; a combo's bars and line each carry their own. */
    layerId?: string;
}

/** Props for {@link GraphRenderer}: container sizing, interaction toggles and per-region slot overrides. */
declare interface GraphRendererProps {
    /** Controls how the graph responds to its container size. Defaults to filling the parent container. */
    sizing?: GraphSizing;
    /**
     * Callback invoked when the graph's container is resized. Fires in every sizing mode. Reports the
     * container, not the panel.
     */
    onResize?: ResizeObserverOnResize;
    /**
     * Animation settings. A boolean disables/enables animations globally, an object tunes the intro
     * and data transitions separately. A reduced-motion preference disables everything regardless,
     * and so does a chart denser than `maxAnimatedGeoms`.
     */
    animation?: GraphAnimation;
    showTooltips?: boolean;
    mode?: GraphMode;
    /** Per-region component overrides. Unspecified regions render their default. */
    slots?: GraphSlots;
}

/** Controls how the graph claims space in its container. */
declare type GraphSizing = {
    mode: 'responsive';
} | {
    mode: 'fixed';
    width: number;
    height: number;
} | {
    mode: 'keepAspectRatio';
    intrinsicWidth: number;
    intrinsicHeight: number;
} | {
    mode: 'keepAspectRatio';
    intrinsicWidth: number;
    aspectRatio: number;
} | {
    mode: 'keepAspectRatio';
    intrinsicHeight: number;
    aspectRatio: number;
};

/**
 * Region overrides for `GraphRenderer`. A slot replaces how one region paints; the viz-engine `ResolvedSpec`
 * still owns whether a region exists and what data it receives, and an override gets the same
 * render-ready props as its default.
 *
 * Layout-safe regions (`Header`, `Footer`, `Tooltip`, `Grid`, `Swatch`, `EditorSurface`) are bare
 * components — DOM-measured, reserving no edge space or painting inside a box the layout already sized.
 * Layout-coupled regions (`AxisTicks`, `AxisLabel`, `Legend`, `Headline`) are
 * {@link SlotOverride}s that also declare their reserved size via `measure`, else paint and the
 * reserved band desync. The tick and title bands are separate slots so overriding one leaves the other
 * on its default.
 */
declare interface GraphSlots {
    Header?: ComponentType<HeaderSlotProps>;
    Footer?: ComponentType<FooterSlotProps>;
    Tooltip?: ComponentType<TooltipSlotProps>;
    Grid?: ComponentType<GridSlotProps>;
    Swatch?: ComponentType<SwatchSlotProps>;
    /**
     * The chart's editor layer, mounted over the frame in `mode="editable"`. Only
     * `@graphysdk/react-renderer/editable` exports something that fills it, so a read-only embed bundles
     * no editing code.
     */
    EditorSurface?: ComponentType<EditorSurfaceSlotProps>;
    Legend?: SlotOverride<LegendSlotProps, (legend: FormattedLegend, ctx: SlotMeasureContext) => number>;
    Headline?: SlotOverride<HeadlineSlotProps, HeadlineMeasurer>;
    AxisTicks?: SlotOverride<AxisTicksSlotProps, (axis: FormattedAxis, ctx: SlotMeasureContext) => number>;
    AxisLabel?: SlotOverride<AxisLabelSlotProps, (axis: FormattedAxis, ctx: SlotMeasureContext) => number>;
}

/**
 * What the chart *is*: a column chart, a stacked bar, a donut. Pictures rather than words, since a
 * type is a shape. Read back off the spec rather than stored beside it, so a chart built by hand or
 * by an agent lights up the option that describes it.
 */
export declare const GraphTypeSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * Visibility switches per direction, since a chart often wants horizontal rules and no vertical ones.
 * Style and thickness stay shared: two directions styled apart read as two grids rather than one.
 */
export declare const GridSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * Props for the Grid slot, overridable via `slots.Grid` on `GraphRenderer`. `panelRect` is in
 * SVG-local coordinates.
 *
 * A grid filling this slot spreads `stampGridEditTarget` on the group holding each line it draws, with a
 * hit area of its own inside that group, where `useGuidesTakePress` is true; a line it hides or moves
 * takes its hit area with it, and a line it does not stamp takes no press.
 */
declare interface GridSlotProps {
    axes: FormattedAxis[];
    panelBorderSizes: EdgeSizes;
    panelFrameRect: GraphLayout['panelFrame'];
    panelRect: GraphLayout['panel'];
}

/**
 * Props for the Header slot, overridable via `slots.Header` on `GraphRenderer`. Title editing in
 * `editable` mode is internal to this default — it hands off to the editor `/editable` supplies —
 * and an override replacing the region opts out of it.
 */
declare interface HeaderSlotProps {
    /** Forward this to the region's outer element — the layout measures the rendered DOM to reserve its space. */
    ref?: React.Ref<HTMLDivElement>;
    headerRect: Rect;
    mode?: GraphMode;
    title: TextContent | null;
    isTitleVisible: boolean;
    subtitle: TextContent | null;
    isSubtitleVisible: boolean;
    headingStyle: TextStyle;
    subtitleStyle: TextStyle;
    /**
     * Resolved badge visual for header placement. `hidden` when the mark is off, below the min
     * footprint, or configured for footer placement.
     */
    brandMark: BrandMarkVisual;
}

/**
 * The aggregate a chart states above itself.
 *
 * `show: 'none'` is the off state rather than a separate flag, so the *Visible* switch writes the
 * metric.
 */
export declare const HeadlineSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/** Props for the Headline slot, overridable via `slots.Headline` on `GraphRenderer`. */
declare interface HeadlineSlotProps {
    headline: FormattedHeadline;
    rect: Rect;
    resolvedSize: ResolvedHeadlineSize;
    /** Leading strip items to paint; the rest are hidden because they would overflow the band. */
    visibleItemCount: number;
    /**
     * Whether this figure sits in the donut hole. Strip polar totals reuse the grand-total class, so
     * paint cannot infer the hole from CSS — only the placement input knows.
     */
    isInDonutHole?: boolean;
}

declare type I18nLocale = keyof typeof dictionaries;

declare type I18nRuntimeOverrides = RuntimeOverrides<ChartPhrases>;

/**
 * The translation context editor UI needs, already carrying the editing surface's wording. Mount it
 * around a panel a host places outside the chart; `EditableGraphRenderer` mounts its own.
 *
 * It owns the phrase sets, so a caller cannot name one and silently leave the editor untranslated.
 */
export declare const IntlProvider: ({ children, ...rest }: Omit<IntlProviderProps, "dictionaries">) => JSX.Element;

declare interface IntlProviderProps {
    locale?: I18nLocale;
    children: ReactNode;
    i18nOverrides?: I18nRuntimeOverrides;
    /** The phrase sets this tree translates against, most specific first. Defaults to the chart's own. */
    dictionaries?: readonly PhraseSource[];
}

declare interface IntroAnimationOptions {
    /** Whether the entrance plays at all */
    enabled: boolean;
    /** Multiplier applied to every entrance duration and stagger delay. */
    durationScale: number;
    /** Whether geoms that support staggered entrance (bars) enter staggered rather than all at once. */
    stagger: boolean;
    /** The order staggered point geoms enter in. Bars and slices always enter in visual order. */
    staggerOrder: IntroStaggerOrder;
}

/** Where the legend sits relative to the chart, and how it names its series. */
export declare const LegendSection: ({ positions, title, layout, preview }: LegendSectionProps) => JSX.Element | null;

export declare interface LegendSectionProps extends OverridableSectionProps {
    /** Overrides the positions offered, for a host that knows its own layout constraints. */
    positions?: readonly LegendPosition[];
}

/**
 * Props for the Legend slot, overridable via `slots.Legend` on `GraphRenderer`.
 *
 * A legend filling this slot spreads `stampLegendEditTarget` on every pill and direct label it paints where
 * `useGuidesTakePress` is true, and lets it take the pointer, or a press there selects the chart: the press
 * reads the legend and the item it stands for off those attributes.
 */
declare interface LegendSlotProps {
    formattedLegends: FormattedLegend[];
    rects: Partial<Record<Edge, Rect>>;
}

/**
 * How a path is drawn: its points, curve, thickness and missing values. Renders nothing unless the
 * chart holds a line or an area.
 */
export declare const LineSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

declare type LocaleShape = {
    dir?: TextDirection;
} & Dictionary<typeof EN_GB>;

declare type LooseSection<T> = {
    [K in keyof T]?: T[K] extends object ? LooseSection<T[K]> : LooseValue<T[K]>;
};

declare type LooseShapeOf<T> = {
    [K in keyof T]?: LooseSection<T[K]>;
};

declare type LooseString<T> = T extends string ? string : T;

declare type LooseValue<T> = T extends (...args: infer A) => infer R ? (...args: A) => R : LooseString<T>;

/** Which column of the data feeds each of the chart's aesthetics. */
export declare const MappingSection: ({ title, layout }: OverridableSectionProps) => JSX.Element | null;

/**
 * A number typed, scrubbed or stepped into a field.
 *
 * Base UI's `onValueCommitted` already fires on blur and at the end of a scrub or a button press,
 * which is exactly the grain `onCommit` wants — so a scrub is one undo entry, not one per pixel.
 */
export declare const NumberField: ({ value, onChange, onCommit, min, max, step, placeholder, prefix, suffix, isDisabled, hasError, ariaLabel, ariaLabelledBy, id, }: NumberFieldControlProps) => JSX.Element;

/** `null` is an empty field, which is a state of its own rather than zero. */
export declare interface NumberFieldControlProps extends ContinuousControlProps<number | null> {
    min?: number;
    max?: number;
    step?: number;
    placeholder?: string;
    /**
     * Shown inside the field, before the number: a currency or a comparison symbol, `$` or `≥`.
     * Display only, never part of the value.
     */
    prefix?: string;
    /**
     * Shown inside the field, after the number: a unit that reads as one, `px`, `%` or `°`. Display
     * only, never part of the value.
     */
    suffix?: string;
    hasError?: boolean;
}

/**
 * How every number in the chart reads: whether large values collapse to a suffix (`1.2k`, `3m`), and
 * how many decimals the rest keep.
 *
 * Both belong to the spec's config rather than to any one layer, so this is one setting the whole
 * chart shares.
 */
export declare const NumberFormatSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * What a host may override per section, spread by every section onto its `Section`, so the same
 * section can be mounted at two layouts without being forked to get them.
 */
export declare type OverridableSectionProps = Partial<Pick<SectionProps, 'title' | 'layout' | 'preview'>>;

declare type OverridePhrase<Phrases, Key extends string> = DeepValue<Phrases, Key> extends PhraseFn<infer P> ? PhraseFn<P> | string : string;

export { PANEL_ROOT_ATTRIBUTE }

declare interface PanelExpansion {
    expandSection: (title: string) => void;
    collapseAllSections: () => void;
}

declare interface PanelProps extends Omit<PanelRootProps_2, 'children'> {
    /**
     * Replaces the sections entirely. A panel is a convenience over composing them by hand, so the
     * escape hatch is the composition it saves you writing rather than a set of flags on top of it.
     */
    children?: ReactNode;
}

export { PanelRootProps }

declare type PhraseFn<P extends Record<string, unknown> = Record<string, unknown>> = (params: P) => string;

/** One surface's phrases, per locale. */
declare type PhraseSource = Partial<Record<I18nLocale, object>>;

/**
 * How large a chart's authored points are drawn. Renders nothing unless a point layer is the host's
 * own: a path's companion points are sized from the line section, under the switch that grows them.
 */
export declare const PointSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/** How big a hole a round chart has, and where its sweep begins. */
export declare const PolarSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * A grid of picture-led choices, for settings that read faster as shapes than as words — chart
 * type, text size, a row of colour chips.
 *
 * A click is a whole gesture and commits immediately. A held arrow key is not: it sweeps the
 * selection across the options, firing a change for each one it passes through, so the run is
 * committed on key up instead. Without that, crossing six options would leave six undo entries behind
 * a single press. Blur commits too, for focus leaving before the key comes up.
 *
 * Base UI reports every change with the same reason, so which gesture is under way is tracked here
 * rather than read off the event.
 */
export declare const RadioGrid: ({ options, value, onChange, onCommit, columns, itemLayout, isDisabled, ariaLabel, ariaLabelledBy, id, }: RadioGridControlProps) => JSX.Element;

/**
 * Single-select grid of icon buttons, for choices that read as pictures rather than words.
 *
 * Continuous despite holding a single string: arrow keys move the selection, so holding one sweeps
 * across the options and fires a change for each. `onCommit` lands once, on key up.
 */
export declare interface RadioGridControlProps extends ContinuousControlProps<string> {
    options: readonly ControlOption[];
    /** Items per row. Defaults to the number of options, i.e. a single row. */
    columns?: number;
    /**
     * `tile` (default) captions each icon; `swatch` drops the caption for a dense grid of pure
     * pictures — colour chips a name would only clutter — naming each through `aria-label` instead.
     */
    itemLayout?: 'tile' | 'swatch';
}

/** Fires on each deduped size change — the shape of `GraphRenderer`'s `onResize` callback. */
declare type ResizeObserverOnResize = (state: ResizeObserverState) => void;

/** The observed element's content-box size in CSS pixels, rounded to integers. */
declare interface ResizeObserverState {
    width: number;
    height: number;
    /** True until the first ResizeObserver measurement lands. */
    isDefault: boolean;
}

/** A {@link ControlRegistry} with every member filled in, as sections consume it. */
export declare type ResolvedControlRegistry = Required<ControlRegistry>;

/**
 * One labelled setting, wiring its own control: the row publishes its ids and each control takes the
 * half it can carry. The label reaches it with `htmlFor` rather than wrapping it, because a wrapping
 * `<label>` makes Base UI rename every option of a group inside it to the row's text.
 */
export declare const Row: ({ label, layout, icon, children }: SettingRowProps) => JSX.Element;

export declare type RowLayout = 'stack' | 'grid';

declare type RuntimeOverrides<Phrases> = {
    dir?: TextDirection;
} & {
    [Key in DotNotation<Phrases>]?: OverridePhrase<Phrases, Key>;
};

/**
 * One block of a panel: a heading, and the settings under it. Defaults to `fixed`, so a section that
 * forgot to declare a layout shows its controls rather than hiding them.
 *
 * Only `collapsible` is an accordion item — the other two always show their body, so an item that is
 * permanently open would carry the trigger and the panel semantics without ever using them.
 */
export declare const Section: ({ title, layout, preview, accessory, onOpenChange, children }: SectionProps) => JSX.Element;

/**
 * `fixed` always shows its body; `collapsible` toggles it and only one section is open at a time;
 * `inline` is a single row, the control sitting where a preview otherwise would.
 */
export declare type SectionLayout = 'fixed' | 'collapsible' | 'inline';

export declare interface SectionProps {
    /** Also the section's identity within the panel, so titles must be distinct. */
    title: string;
    layout?: SectionLayout;
    /** What the section says while closed — "Bottom". Not interactive; for that use `accessory`. */
    preview?: ReactNode;
    /** A live control at the header's end, whose clicks do not toggle the section. */
    accessory?: ReactNode;
    /**
     * Fired when a `collapsible` section opens or closes, so a section can couple a feature to being
     * looked at. An event rather than state to watch: an effect reading expansion would write the state
     * it reads and fire twice for one gesture.
     */
    onOpenChange?: (isOpen: boolean) => void;
    children: ReactNode;
}

/** A single-choice dropdown, for a set too long or too wordy for a segmented row. */
export declare const Select: ({ options, value, onChange, placeholder, isDisabled, hasError, ariaLabel, ariaLabelledBy, id, }: SelectControlProps) => JSX.Element;

/**
 * Single-choice dropdown, for a set too long or too wordy to sit in a segmented row.
 *
 * The value is nullable so a section can render "nothing chosen yet"; `onChange` only ever fires
 * with a real option, since clearing a required setting is not a gesture the panel offers.
 */
export declare interface SelectControlProps extends Omit<DiscreteControlProps<string | null>, 'onChange'> {
    onChange: (value: string) => void;
    options: readonly ControlOption[];
    placeholder?: string;
    hasError?: boolean;
}

declare interface SettingRowProps {
    label?: string;
    layout?: RowLayout;
    icon?: ReactNode;
    children: ReactNode;
}

/**
 * A value dragged along a track.
 *
 * The gesture streams through `onChange`, which a section dispatches transiently, and commits through
 * `onCommit` when it ends — so sliding from one end to the other is one undo entry rather than one
 * per frame.
 *
 * A held arrow key is a gesture too. Base UI commits on every keyboard change, which would turn one
 * press-and-hold into an undo entry per auto-repeat, so those commits are swallowed and the run is
 * committed on key up instead — the keyboard's equivalent of releasing the thumb. Blur commits too,
 * for focus leaving mid-hold with no key up ever arriving.
 */
export declare const Slider: ({ value, onChange, onCommit, min, max, step, suffix, formatValue, isDisabled, ariaLabel, ariaLabelledBy, }: SliderControlProps) => JSX.Element;

export declare interface SliderControlProps extends ContinuousControlProps<number> {
    min: number;
    max: number;
    step?: number;
    /**
     * Unit for the readout beside the track — `px`, `%`, `°`. Shows the value when given and hides it
     * when not, so a slider with nothing to say stays a bare track.
     */
    suffix?: string;
    /**
     * Formats the readout outright, for a value a unit cannot describe on its own — a thousands
     * separator, a ratio, a named step. Wins over {@link suffix} when both are given.
     */
    formatValue?: (value: number) => string;
}

/**
 * Passed as the second argument to a layout-coupled slot's `measure`, so it can size its band from
 * real text metrics — the same Canvas-backed measurer the built-in measurers use — rather than
 * constructing its own. A `measure` whose size is unrelated to text can ignore it.
 */
declare interface SlotMeasureContext {
    /** Measures a string at a given font; returns `{ width, height, ascent, descent }` in CSS pixels. */
    measureText: TextMeasurer['measureText'];
    /** Active text-scale multiplier; multiply an em size by this to get the pixel size to measure at. */
    textScale: number;
}

/**
 * A layout-coupled slot: the region's `render` paired with the `measure` the layout uses to reserve
 * its space. `measure` mirrors the matching `LayoutMeasurer` method, so paint and reserved space can't
 * disagree. Give it a stable reference — a `measure` whose identity changes each render takes effect on
 * the next paint but doesn't retrigger layout.
 */
declare interface SlotOverride<Props, Measure> {
    /** The component that paints the region. */
    render: ComponentType<Props>;
    /**
     * Returns the region's reserved size. Receives the region's formatted data plus a
     * {@link SlotMeasureContext} (`measureText`, `textScale`) for sizing from real text metrics.
     */
    measure: Measure;
}

/** Whether the chart shows its source. The one text part never editable in place on the chart. */
export declare const SourceSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/** The source line's type: the label and the URL. A bare source entry never paints the link. */
declare interface SourceStyle {
    label: TextStyle;
    link: TextStyle;
}

/**
 * Whether the chart shows its subtitle, and what it says.
 *
 * Hiding it leaves the text intact, so it comes back without being retyped. It is also editable in
 * place on the chart; the field here is the second way in, not the only one.
 */
export declare const SubtitleSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * The vocabulary of legend/tooltip/headline marks the {@link Swatch} can paint. A geom picks the one
 * that best evokes its on-canvas mark via `swatchShape` on its render contract (see
 * {@link GeomRenderContract}); it is a render concern, so the engine never resolves it.
 *
 * - `square` — a filled rect (bars)
 * - `line` — a horizontal stroke (lines)
 * - `area` — a filled region with a stroke accent (areas)
 * - `circle` — a filled dot (points)
 * - `slice` — a pie / donut wedge (polar bars)
 */
declare type SwatchShape = 'square' | 'line' | 'circle' | 'area' | 'slice';

/**
 * Props for the Swatch slot (`slots.Swatch` on `GraphRenderer`). An override must paint inside the
 * `width` × `height` box it receives.
 *
 * Switch on `shape`, `surface` or `label` and delegate the rest to
 * {@link DefaultSwatch}.
 */
declare interface SwatchSlotProps {
    shape: SwatchShape;
    color: string;
    surface: SwatchSurface;
    label?: string;
    lineType?: LineType;
    width?: number;
    height?: number;
    /** Line/area stroke width. Absent, {@link DefaultSwatch} draws at 2. */
    strokeWidth?: number;
    /** Owning layer `alpha`. Omit so {@link DefaultSwatch} keeps today's opacities. */
    alpha?: number;
    /** Square corner radius in px. Omit so {@link DefaultSwatch} keeps `rx={2}`. */
    cornerRadius?: number;
}

/** The UI surface a swatch is painted on. Lets a Swatch slot restyle one surface and delegate the rest. */
declare type SwatchSurface = 'legend' | 'tooltip' | 'headline' | 'callout' | 'rule-label';

/** An on/off toggle, for a setting whose whole value is whether it is on. */
export declare const Switch: ({ isChecked, onChange, isDisabled, ariaLabel, ariaLabelledBy, id }: SwitchControlProps) => JSX.Element;

/**
 * An on/off toggle.
 *
 * Named `isChecked` rather than `value`: the state is the whole value, and every flip is its own
 * undo entry, so there is no gesture left to commit.
 */
export declare interface SwitchControlProps extends ControlBaseProps {
    isChecked: boolean;
    onChange: (isChecked: boolean) => void;
}

declare type TextDirection = 'ltr' | 'rtl';

/**
 * A line of text.
 *
 * Typing fires `onChange` per keystroke and blur fires `onCommit`, so a burst of typing dispatches
 * transiently and commits into one undo entry when the field is left.
 */
export declare const TextField: ({ value, onChange, onCommit, placeholder, isDisabled, hasError, ariaLabel, ariaLabelledBy, id, }: TextFieldControlProps) => JSX.Element;

export declare interface TextFieldControlProps extends ContinuousControlProps<string> {
    placeholder?: string;
    hasError?: boolean;
}

/** How large every text element is drawn, as one multiplier over the theme's own sizes. */
export declare const TextSizeSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * Whether the chart shows its title, and what it says.
 *
 * Hiding it leaves the text intact, so it comes back without being retyped. It is also editable in
 * place on the chart; the field here is the second way in, not the only one.
 */
export declare const TitleSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/**
 * A section whose feature is switched on and off from its own header. The coupling runs both ways: on
 * opens it, off closes it, and opening it while off switches it on.
 */
export declare const ToggledSection: ({ title, isChecked, onToggle, isDisabled, preview, children }: ToggledSectionProps) => JSX.Element;

declare interface ToggledSectionProps extends Omit<SectionProps, 'layout' | 'accessory' | 'onOpenChange'> {
    isChecked: boolean;
    onToggle: (isChecked: boolean) => void;
    isDisabled?: boolean;
}

/**
 * A segmented single-choice row.
 *
 * Built on the radio primitive rather than the toggle one, which it resembles more closely by
 * name. Picking one of a fixed set is what a radio group is for, and the primitive is what makes
 * arrow keys move the selection instead of only the focus. Toggle buttons would have given the
 * behaviour of a radio group while announcing itself as something else.
 *
 * That makes this the picture grid in different clothes: same primitive, same contract, same
 * transient run committed on key up. Only the layout differs — a row of words here, a grid of pictures
 * there — which is the whole of why they are two controls.
 */
export declare const ToggleGroup: ({ options, value, onChange, onCommit, itemLayout, isDisabled, ariaLabel, ariaLabelledBy, id, }: ToggleGroupControlProps) => JSX.Element;

/**
 * Single-select segmented control.
 *
 * Continuous, on the same contract as the picture grid, so a section can swap one for the other
 * without changing how it dispatches.
 */
export declare interface ToggleGroupControlProps extends ContinuousControlProps<string> {
    options: readonly ControlOption[];
    /**
     * `inline` (default) lays each option on one line — an icon, a label, or an icon standing in for
     * the label. `stacked` sits the icon above the label in a taller cell, for a row of options read
     * as pictures with a caption.
     */
    itemLayout?: 'inline' | 'stacked';
}

/** Props for the Tooltip slot, overridable via `slots.Tooltip` on `GraphRenderer`. Positioning stays built in. */
declare interface TooltipSlotProps {
    /** Render-ready tooltip body, already formatted by the viz-engine runtime. */
    content: TooltipContent;
}

export declare const TrendsAndAveragesSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;

/** The resolved controls for the surrounding panel. */
export declare const useControls: () => ResolvedControlRegistry;

/**
 * How a section opens or closes itself.
 *
 * Write-only: which section is open is the accordion's, and reading it back would tempt a section
 * into an effect that watches the state it also writes.
 */
export declare const usePanelExpansion: () => PanelExpansion;

/**
 * The graph the surrounding panel edits. Throws outside a bound panel: a section has nothing to
 * read or write without one, so an unbound panel is a composition mistake rather than a state to
 * render around.
 */
export declare const usePanelGraph: () => GraphHandle;

export { }