import { a as VibeConfig, c as VibePreset, R as ResolvedVibe, b as VibeOverrides } from './vibe-CGvyIQyM.cjs'; export { F as FillStyle, V as VibeAnimate, d as VibeTexture } from './vibe-CGvyIQyM.cjs'; import { b as Brand, g as BrandVibeOverrides, c as BrandConfig, R as ResolvedBrand, M as Margin, o as Point, a as BoundingBox, P as PlotArea, m as FlowNodeShape, l as FlowNode, F as FlowDirection, k as FlowEdge, L as LayoutOptions, E as EdgeRouting, h as ChartDatum, D as DataTableModel, q as Series, A as AxisFormat, r as SeriesPoint, B as BaseChartProps, n as MultiSeriesDatum, i as ColorScaleName } from './colorScales-C5Fpx4jE.cjs'; export { d as BrandLogo, e as BrandLogoPosition, f as BrandMode, C as COLOR_SCALE_NAMES, j as DivergingScaleName, p as ResolvedBrandLogo, S as SequentialScaleName, T as ThemedBrand, s as colorRamp, t as divergingColor, u as interpolateRamp, v as isThemedBrand, w as ordinalColor, x as sequentialColor, y as vibeColorScale } from './colorScales-C5Fpx4jE.cjs'; import { CSSProperties, MouseEvent, PointerEvent, ReactNode, Ref, ReactElement } from 'react'; export { M as MarkKind, a as MarkMeta } from './interaction-C9KDmZ7k.cjs'; import { Options, Drawable } from 'roughjs/bin/core'; export { Options as RoughOptions } from 'roughjs/bin/core'; import * as react_jsx_runtime from 'react/jsx-runtime'; import { ScaleBand, ScaleLinear, ScalePoint, ScalePower, ScaleLogarithmic, ScaleTime } from 'd3-scale'; import { RoughGenerator } from 'roughjs/bin/generator'; /** * Shared by every Rough.js primitive. A local `vibe` overrides the surrounding * `VibeProvider`; everything else is plain SVG passthrough. */ interface RoughPrimitiveProps { /** Local vibe override. Falls back to the nearest `VibeProvider` context. */ vibe?: VibeConfig; /** Per-instance seed override, handy for de-duplicating identical shapes. */ seed?: number; className?: string; style?: CSSProperties; /** Forwarded to the rendered element so primitives stay composable/clickable. */ onClick?: (event: MouseEvent) => void; /** * Inert `data-*` attributes (e.g. from `markAttrs`) spread onto the rendered * element. Lets the interactivity layer address marks without changing behavior. */ dataAttrs?: Record; onPointerEnter?: (event: PointerEvent) => void; onPointerMove?: (event: PointerEvent) => void; onPointerLeave?: (event: PointerEvent) => void; onPointerDown?: (event: PointerEvent) => void; onPointerUp?: (event: PointerEvent) => void; children?: ReactNode; } interface RoughPathProps extends RoughPrimitiveProps { /** SVG path `d` string, typically produced by the D3 calculation layer. */ d: string; /** Explicit overrides that win over the resolved vibe for this shape only. */ stroke?: string; fill?: string | null; } interface RoughLineProps extends RoughPrimitiveProps { x1: number; y1: number; x2: number; y2: number; stroke?: string; } interface RoughRectangleProps extends RoughPrimitiveProps { x: number; y: number; width: number; height: number; stroke?: string; fill?: string | null; } interface RoughCircleProps extends RoughPrimitiveProps { cx: number; cy: number; /** Diameter, matching Rough.js' `circle(x, y, diameter)` signature. */ diameter: number; stroke?: string; fill?: string | null; } interface RoughTextProps extends RoughPrimitiveProps { x: number; y: number; children: string; /** Maps to SVG `text-anchor`. */ anchor?: 'start' | 'middle' | 'end'; /** Maps to SVG `dominant-baseline`. */ baseline?: 'auto' | 'middle' | 'hanging'; /** Rotation in degrees about (x, y). */ rotate?: number; /** Overrides the vibe stroke as the text fill color. */ fill?: string; /** * Force a page-colour halo behind the glyphs (a soft knockout, not a box) so * the label stays legible over a fill even when the vibe has no background. */ haloColor?: string; /** * Paint a solid background-coloured rect behind the whole label (a hard * knockout box, not the gappy per-glyph halo) so a line crossing the label — * sequence lifelines, ER/arch edges — gets a clean continuous break. `true` * uses the resolved vibe background (falling back to white); a string forces * that colour. */ knockout?: boolean | string; /** When set, wrap the text to this pixel width across multiple lines. */ maxWidth?: number; } /** * Fully-resolved aesthetics. These are the single source of truth for what each * semantic preset "feels" like; `resolveVibe` layers user overrides on top. */ declare const VIBE_PRESETS: Record; declare const DEFAULT_VIBE: VibePreset; /** * Collapse any `VibeConfig` (a bare preset name, or a preset + overrides, or * just overrides) into a fully-resolved vibe. This is the single boundary * between the loose user-facing config and the strict internal shape. * * `brandOverrides` (colour/font knobs derived from a `Brand`) layer between the * preset defaults and the caller's explicit overrides, giving the precedence: * preset → brand → explicit vibe overrides. A brand thus recolours any vibe * while an explicit per-call override still wins. */ declare function resolveVibe(config?: VibeConfig, brandOverrides?: Partial): ResolvedVibe; /** * Translate a resolved vibe into the exact options object Rough.js consumes. * Keeping this isolated means the rendering layer never reasons about presets. */ declare function vibeToRoughOptions(vibe: ResolvedVibe, seedOverride?: number): Options; interface VibeProviderProps { vibe?: VibeConfig; /** * Colour/font knobs from a `Brand`, layered under the explicit `vibe` so * descendant primitives inherit branded stroke/fill/font. See `resolveVibe`. */ brandOverrides?: Partial; children: ReactNode; } /** * Makes a resolved vibe available to every descendant primitive. Charts wrap * their subtree in this so individual ``s don't each take a vibe. */ declare function VibeProvider({ vibe, brandOverrides, children }: VibeProviderProps): react_jsx_runtime.JSX.Element; /** Read the ambient resolved vibe. Used internally by every primitive. */ declare function useVibeContext(): ResolvedVibe; /** * Resolve the effective vibe for a primitive: a local `vibe` prop wins over the * surrounding context, and an explicit `seed` overrides whatever it resolves to. */ declare function useResolvedVibe(localVibe?: VibeConfig, seed?: number): ResolvedVibe; /** * Translate a brand's identity fields into the vibe knobs they map to. Only * fields the brand actually set appear, so they never clobber a preset value. */ declare function brandVibeOverrides(brand: Brand): BrandVibeOverrides; /** * Collapse a `BrandConfig` into the pieces the renderer consumes: the * categorical palette, an optional resolved logo, and the vibe overrides the * brand contributes. The single boundary between loose brand config and the * strict internal shape — mirrors `resolveVibe`. */ declare function resolveBrand(brand?: BrandConfig, /** Forces a side of a `ThemedBrand`. Defaults to `'light'` (SSR-safe). */ scheme?: 'light' | 'dark'): ResolvedBrand; interface BrandProviderProps { brand?: BrandConfig; children: ReactNode; } /** * Makes a resolved brand (palette + logo) available to descendants. `` * wraps its subtree in this so custom compositions can read the brand without * threading it manually. Mirrors `VibeProvider`. Themed brands follow the OS * colour scheme via `useResolvedBrand`. */ declare function BrandProvider({ brand, children }: BrandProviderProps): react_jsx_runtime.JSX.Element; /** Read the ambient resolved brand. */ declare function useBrand(): ResolvedBrand; /** * Subscribes to the OS colour-scheme preference. SSR-safe: returns * `defaultScheme` (default `'light'`) until a browser is available, then * resolves to the live `prefers-color-scheme` value. */ declare function useColorScheme(defaultScheme?: 'light' | 'dark'): 'light' | 'dark'; /** * Resolve a brand, honouring a `ThemedBrand`'s `mode`: * `'auto'` (default) — follows `useColorScheme()` * `'light'` / `'dark'` — pinned * * For plain `Brand`s this is just `resolveBrand(brand)`. Charts that want * to follow the OS theme should swap `resolveBrand(brand)` for this hook. */ declare function useResolvedBrand(brand?: BrandConfig): ResolvedBrand; declare const DEFAULT_MARGIN: Margin; declare function resolveMargin(margin?: Partial): Margin; /** Inner drawing area once margins are removed from the outer surface. */ declare function getPlotArea(width: number, height: number, margin?: Partial): PlotArea; /** Axis-aligned bounding box for a set of points. */ declare function boundsOf(points: Point[]): BoundingBox; /** * Thin wrappers over d3-scale. Pure math: given a domain and a pixel range they * return functions mapping data -> coordinates. No DOM, no rendering. */ declare function linearScale(domain: [number, number], range: [number, number]): ScaleLinear; declare function bandScale(domain: string[], range: [number, number], padding?: number): ScaleBand; declare function pointScale(domain: string[], range: [number, number], padding?: number): ScalePoint; /** Square-root scale — the correct mapping for bubble *radii* (area ∝ value). */ declare function sqrtScale(domain: [number, number], range: [number, number]): ScalePower; /** Convenience: nice min/max for a numeric series, with optional zero baseline. */ declare function extentOf(values: number[], includeZero?: boolean): [number, number]; type CurveName = 'linear' | 'basis' | 'catmullRom' | 'monotoneX'; /** * Build an SVG path `d` string for a poly-line through points. This string is * what gets handed to `` — D3 computes geometry, never draws it. */ declare function linePath(points: Point[], curve?: CurveName): string; /** SVG path for a filled area between `points` and a baseline `y0`. */ declare function areaPath(points: Point[], y0: number, curve?: CurveName): string; type LinkOrientation = 'vertical' | 'horizontal'; /** * The point on the border of a centred box where the ray from its centre toward * `toward` exits. Used to stop connector lines at a node's edge instead of * running into its centre. */ declare function boxEdgePoint(center: Point, width: number, height: number, toward: Point): Point; /** SVG path for a smooth cubic link between two points (flowchart edges). */ declare function linkPath(from: Point, to: Point, orientation?: LinkOrientation): string; /** * Vertices of an elbow (orthogonal) connector: it leaves `from` along the flow * axis, jogs across at the midpoint, then arrives at `to` along the flow axis. * The final segment is axis-aligned, so an arrowhead reads as a clean right * angle into the target. */ declare function orthogonalPoints(from: Point, to: Point, orientation?: LinkOrientation): Point[]; /** SVG path for an elbow (orthogonal) connector between two points. */ declare function orthogonalPath(from: Point, to: Point, orientation?: LinkOrientation): string; /** SVG path for a diamond centered at (cx, cy) — flowchart decision nodes. */ declare function diamondPath(cx: number, cy: number, width: number, height: number): string; /** SVG path for an ellipse centered at (cx, cy) — flowchart terminal nodes. */ declare function ellipsePath(cx: number, cy: number, rx: number, ry: number): string; type ConnectorRouting = 'straight' | 'curved' | 'orthogonal'; /** Geometry for an arrow connecting two points: shaft `d`, head tails, label spot. */ interface Connector { /** SVG path `d` for the shaft. */ d: string; /** Tail the end head (at `to`) points away from: `arrowHeadPath(endHeadTail, to)`. */ endHeadTail: Point; /** Tail the start head (at `from`) points away from: `arrowHeadPath(startHeadTail, from)`. */ startHeadTail: Point; /** Where a midpoint label sits. */ labelAt: Point; } /** * Build the geometry for an arrow connecting `from` to `to`. The shaft is a * straight line, a smooth `linkPath` cubic, or an `orthogonalPath` elbow. * Orientation defaults to the dominant axis (ties -> horizontal). DOM-free. */ declare function connectorPath(from: Point, to: Point, opts?: { routing?: ConnectorRouting; orientation?: LinkOrientation; }): Connector; /** * Arrowhead at `to`, pointing along the `from -> to` direction. By default an * open two-stroke head (`left -> tip -> right`); when `filled` is true the path * is closed into a solid triangle. */ declare function arrowHeadPath(from: Point, to: Point, size?: number, filled?: boolean): string; interface LaidOutNode { id: string; label: string; x: number; y: number; width: number; height: number; shape: FlowNodeShape; data: FlowNode; } interface LaidOutEdge { from: string; to: string; label?: string; sx: number; sy: number; tx: number; ty: number; /** * Explicit waypoints for the connector, source boundary → target boundary * (e.g. obstacle-routed architecture edges or straight mind-map spokes). When * present the renderer draws this polyline instead of deriving a curve/elbow. */ points?: Point[]; } interface FlowLayout { nodes: LaidOutNode[]; edges: LaidOutEdge[]; } declare const DEFAULT_NODE_W = 120; declare const DEFAULT_NODE_H = 48; declare function isHorizontal(direction: FlowDirection): boolean; /** * Offset an edge's endpoints from node centers to the node boundaries facing * the flow direction, so links start/end at an edge rather than the middle. * Shared by the tree and DAG layout engines. */ declare function connectEdge(s: LaidOutNode, t: LaidOutNode, direction: FlowDirection): { sx: number; sy: number; tx: number; ty: number; }; /** * Lay out a parent/child node list into a tidy tree using d3-hierarchy, in any * of the four cardinal directions. Returns absolute pixel coordinates and edge * endpoints — pure math, ready for the rendering layer to draw. */ declare function layoutTree(nodes: FlowNode[], size: [number, number], explicitEdges?: FlowEdge[], direction?: FlowDirection): FlowLayout; /** * Longest-path layer assignment via bounded relaxation: every node sits one * layer below its deepest parent; roots stay at 0. The iteration cap guarantees * termination even with cycles. Shared by the DAG layout and the Sankey chart. */ declare function assignLayers(nodeIds: string[], links: { from: string; to: string; }[]): Map; /** * Lay out a general directed graph using a layered (Sugiyama-style) approach: * longest-path layering, a median heuristic to reduce edge crossings, then even * spacing within each layer. Handles merges (multiple parents), multiple roots * and cycles (degenerate, but won't loop). Pure math — pixel coordinates ready * for the renderer, mirroring `layoutTree`'s output shape. */ declare function layoutDag(nodes: FlowNode[], size: [number, number], edges: FlowEdge[], direction?: FlowDirection): FlowLayout; /** * Lay out a flowchart, automatically choosing the engine: the tidy d3 tree * layout for single-root trees, the layered DAG layout for everything else * (merges, multiple roots, cycles). Keeps the common tree case unchanged while * supporting arbitrary directed graphs. */ declare function layoutFlow(nodes: FlowNode[], size: [number, number], edges?: FlowEdge[], direction?: FlowDirection, engine?: 'auto' | 'tree' | 'dag'): FlowLayout; type DiagramOrientation = 'vertical' | 'horizontal'; /** A labelled container bounding a set of member nodes. */ interface LaidGroup { id: string; label?: string; x: number; y: number; width: number; height: number; /** * Where to draw the label, when the layout wants it somewhere other than the * default top-left-on-the-border spot — e.g. swimlane titles sat in a gutter * clear of the connector flow. `labelAnchor` is the text anchor at that point. */ labelPoint?: Point; labelAnchor?: 'start' | 'middle'; } interface DiagramScene extends FlowLayout { orientation: DiagramOrientation; groups?: LaidGroup[]; } /** Position a node/edge set within `size`. Bound to its options by a factory. */ type LayoutEngine = (nodes: FlowNode[], edges: FlowEdge[] | undefined, size: [number, number]) => DiagramScene; /** The flowchart layout (tidy tree or layered DAG) as a `LayoutEngine`. */ declare function flowLayout(direction?: FlowDirection, options?: LayoutOptions): LayoutEngine; /** * Bounding boxes for node groups, keyed off each node's `group` field. Used by * diagram types that draw subgraph/lane containers (e.g. architecture diagrams). */ declare function computeGroups(nodes: LaidOutNode[], padding?: number): LaidGroup[]; /** * Radial tree layout for mind-maps: the root sits at the plot centre and each * generation fans out onto a concentric ring, leaves spread evenly by angle. * Edges are straight centre-to-centre spokes (the renderer draws nodes on top, * so the overlap is hidden). Pure geometry, returned as a `DiagramScene`. */ declare function radialLayout(): LayoutEngine; /** An axis-aligned rectangle (top-left origin) the router must steer around. */ interface Obstacle { x: number; y: number; width: number; height: number; } /** Midpoint of the box side facing `toward` — a connector's port on that box. */ declare function boxPort(box: Obstacle, toward: Point): Point; interface RouteOptions { /** Clearance kept between a connector and every obstacle. */ padding?: number; /** Extra cost per 90° turn, biasing the route toward few straight runs. */ turnPenalty?: number; } /** * Hand-rolled orthogonal connector router. Rather than a uniform pixel grid it * builds a sparse lattice from the "interesting" coordinates — every obstacle's * padded edges plus the two endpoints — so ports always land on the graph and * every lattice segment is axis-aligned. A* then searches that lattice with a * per-turn penalty, yielding clean L/Z routes that keep `padding` clearance * from other boxes. Pure geometry; returns the simplified polyline from `from` * to `to` (or a direct elbow when the lattice is fully blocked). */ declare function routeOrthogonal(from: Point, to: Point, obstacles: Obstacle[], opts?: RouteOptions): Point[]; /** Drop collinear interior points so the polyline is just its corners. */ declare function simplify(points: Point[]): Point[]; /** * Architecture / network layout: position components into per-`group` bands so * the zone containers tile cleanly, then route every connector orthogonally * around the other boxes (hand-rolled A* router). Ports sit on the box side * facing the peer, and connectors leave and arrive square-on via perpendicular * stubs. */ declare function architectureLayout(direction?: FlowDirection, options?: LayoutOptions): LayoutEngine; /** * Sequence-diagram layout. Actors become evenly spaced columns with a header * box and a lifeline running down the plot; messages are ordered top-to-bottom * as horizontal arrows between lifelines (self-messages loop back). Pure * geometry — pixel coordinates ready for the renderer. */ interface SequenceActorInput { id: string; label?: string; } type SequenceMessageKind = 'sync' | 'async' | 'reply'; interface SequenceMessageInput { from: string; to: string; label?: string; /** `reply` renders dashed; `sync`/`async` solid. Defaults to `sync`. */ kind?: SequenceMessageKind; } interface LaidActor { id: string; label: string; x: number; boxX: number; boxY: number; boxWidth: number; boxHeight: number; lifelineTop: number; lifelineBottom: number; } interface LaidMessage { from: string; to: string; label?: string; x1: number; x2: number; y: number; dashed: boolean; self: boolean; } interface SequenceLayout { actors: LaidActor[]; messages: LaidMessage[]; } interface SequenceOptions { actorHeight?: number; topPadding?: number; } declare const SELF_LOOP_WIDTH = 44; declare function computeSequence(actors: SequenceActorInput[], messages: SequenceMessageInput[], size: [number, number], opts?: SequenceOptions): SequenceLayout; /** * Entity-relationship layout. Each entity is a titled box with a row per field; * boxes are positioned by the flow engine (treating relationships as edges) and * connectors route orthogonally around the other boxes, with cardinality labels * pinned near each endpoint. Pure geometry, ready for the renderer. */ type ERKey = 'PK' | 'FK'; interface ERField { name: string; type?: string; key?: ERKey; } interface EREntityInput { id: string; label?: string; fields?: ERField[]; } interface ERRelationshipInput { from: string; to: string; label?: string; fromCardinality?: string; toCardinality?: string; } interface ERFieldRow { text: string; key?: ERKey; /** Centre y of the row, relative to the entity box top. */ y: number; } interface LaidEntity { id: string; label: string; x: number; y: number; width: number; height: number; headerHeight: number; rows: ERFieldRow[]; } interface LaidRelationship { from: string; to: string; label?: string; points: Point[]; fromCardinality?: string; toCardinality?: string; fromLabelAt: Point; toLabelAt: Point; } interface ERLayout { entities: LaidEntity[]; relationships: LaidRelationship[]; } interface EROptions { direction?: FlowDirection; } declare function computeER(entities: EREntityInput[], relationships: ERRelationshipInput[], size: [number, number], opts?: EROptions): ERLayout; /** * Timeline layout. Events are placed in order along a central axis (horizontal * or vertical) at even intervals, with their label blocks alternating to either * side of the axis so they don't collide. Pure geometry for the renderer. */ interface TimelineEventInput { label: string; date?: string; detail?: string; } type TimelineOrientation = 'horizontal' | 'vertical'; interface LaidTimelineEvent { label: string; date?: string; detail?: string; marker: Point; /** Anchor point for the label block. */ label_at: Point; /** Text anchor for the label block. */ anchor: 'start' | 'middle' | 'end'; /** Which side of the axis the label sits on: +1 or -1. */ side: 1 | -1; } interface TimelineLayout { orientation: TimelineOrientation; axis: { x1: number; y1: number; x2: number; y2: number; }; events: LaidTimelineEvent[]; } interface TimelineOptions { orientation?: TimelineOrientation; } declare function computeTimeline(events: TimelineEventInput[], size: [number, number], opts?: TimelineOptions): TimelineLayout; /** * A high-level, serializable description of a diagram. One discriminated union * over every diagram type the library renders; `renderDiagram` dispatches each * `kind` to its component and `parseMermaid` produces these from text. Keeping * the spec here (pure, DOM-free) lets both the parser and the renderer share it. */ type DiagramKind = 'flowchart' | 'sequence' | 'mindmap' | 'arch' | 'er' | 'timeline' | 'org'; interface FlowchartSpec { kind: 'flowchart'; nodes: FlowNode[]; edges?: FlowEdge[]; direction?: FlowDirection; routing?: EdgeRouting; } interface SequenceSpec { kind: 'sequence'; actors: SequenceActorInput[]; messages: SequenceMessageInput[]; } interface MindMapSpec { kind: 'mindmap'; nodes: FlowNode[]; edges?: FlowEdge[]; } interface ArchSpec { kind: 'arch'; nodes: FlowNode[]; edges?: FlowEdge[]; direction?: FlowDirection; } interface ERSpec { kind: 'er'; entities: EREntityInput[]; relationships?: ERRelationshipInput[]; direction?: FlowDirection; } interface TimelineSpec { kind: 'timeline'; events: TimelineEventInput[]; orientation?: TimelineOrientation; } interface OrgSpec { kind: 'org'; nodes: FlowNode[]; edges?: FlowEdge[]; direction?: FlowDirection; } type DiagramSpec = FlowchartSpec | SequenceSpec | MindMapSpec | ArchSpec | ERSpec | TimelineSpec | OrgSpec; /** * A dependency-light, hand-rolled parser for a **subset** of Mermaid, producing * a {@link DiagramSpec}. Supported: `flowchart`/`graph` (nodes, shapes, edges, * labels, direction), `sequenceDiagram` (participants + messages), and * `mindmap` (indentation-nested nodes). Anything else — including recognised but * unhandled constructs (notes, loops, erDiagram, …) — raises a * {@link MermaidParseError} rather than silently dropping content. */ declare class MermaidParseError extends Error { constructor(message: string); } declare function parseMermaid(source: string): DiagramSpec; /** * Weighted flow-diagram layout. Reuses the longest-path layering from the DAG * engine (`assignLayers`), sizes nodes by throughput, and stacks proportional * link ribbons on each node edge. Pure geometry — pixel coordinates + ribbon * path strings, ready for the renderer. */ interface SankeyNodeInput { id: string; label?: string; color?: string; } interface SankeyLinkInput { source: string; target: string; value: number; } type SankeyOrientation = 'LR' | 'TB'; interface SankeyLaidNode { id: string; label?: string; color?: string; x: number; y: number; width: number; height: number; value: number; } interface SankeyLaidLink { source: string; target: string; value: number; width: number; path: string; color?: string; } interface SankeyLayout { nodes: SankeyLaidNode[]; links: SankeyLaidLink[]; } interface SankeyOptions { direction?: SankeyOrientation; nodeWidth?: number; nodePadding?: number; } declare function computeSankey(nodes: SankeyNodeInput[], links: SankeyLinkInput[], size: [number, number], opts?: SankeyOptions): SankeyLayout; /** * Treemap layout via d3-hierarchy (already a dependency). Pure: takes a flat * parent-linked list, returns leaf rectangles. The renderer tiles them with * ``. */ interface TreemapDatum { id: string; parent?: string; value?: number; label?: string; color?: string; } type TreemapTile = 'squarify' | 'binary' | 'slice' | 'dice'; interface TreemapLeaf { id: string; label?: string; color?: string; groupId: string; x0: number; y0: number; x1: number; y1: number; value: number; depth: number; datum: TreemapDatum; } interface TreemapOptions { padding?: number; tile?: TreemapTile; } declare function computeTreemap(data: TreemapDatum[], size: [number, number], opts?: TreemapOptions): TreemapLeaf[]; /** * Polar coordinate helpers for radial charts (radar, gauge, future arc work). * Pure trigonometry — no DOM. */ /** Cartesian point at `radius` and `angleRad` from center `(cx, cy)`. */ declare function polarToCartesian(cx: number, cy: number, radius: number, angleRad: number): Point; /** Angle (radians) of axis `index` of `count`, starting at the top, clockwise. */ declare function axisAngle(index: number, count: number): number; /** Closed SVG path through a ring of points (e.g. a radar polygon or grid ring). */ declare function polygonPath(points: Point[]): string; /** * Closed regular n-gon centered at `(cx, cy)`. The first vertex sits at the top * (12 o'clock) when `rotationRad` is 0; `rotationRad` rotates clockwise from there. */ declare function regularPolygonPath(cx: number, cy: number, r: number, sides: number, rotationRad?: number): string; /** * Closed `points`-pointed star, alternating between `outerR` and `innerR`. The * first (outer) vertex sits at the top when `rotationRad` is 0; clockwise from there. */ declare function starPath(cx: number, cy: number, outerR: number, innerR: number, points: number, rotationRad?: number): string; /** * Open arc stroke from `startRad` to `endRad` (0 = east). Always drawn in the * increasing-angle (clockwise on screen) direction, so wrapped/unordered angles * (e.g. 350°→10°) still produce the intended short arc. No fill — unclosed. */ declare function arcStrokePath(cx: number, cy: number, r: number, startRad: number, endRad: number): string; /** * Closed pie wedge from `startRad` to `endRad`, drawn clockwise (robust to * wrapped angles). When `innerR` is set, draws an annular wedge (ring segment) * instead of a slice meeting at the center. */ declare function wedgePath(cx: number, cy: number, r: number, startRad: number, endRad: number, innerR?: number): string; type AnyScale = ScaleLinear | ScaleBand | ScalePoint; interface Tick { value: string | number; /** Pixel position along the scale's range. */ offset: number; } /** * Produce tick positions for any supported scale. Pure and DOM-free: callers * render the result with `` / ``. * * Band scales center their tick on the band; point scales fall out of the same * branch because their `bandwidth()` is 0. */ declare function ticksForScale(scale: AnyScale, count?: number): Tick[]; interface PieSlice { /** SVG path `d` for the slice, ready to hand to ``. */ path: string; /** Label anchor point, in the same local coords as `path`. */ centroid: [number, number]; startAngle: number; endAngle: number; datum: ChartDatum; index: number; } /** * Turn category values into pie/donut slice geometry using d3-shape. Pure and * DOM-free; coordinates are centered on (0, 0), so the renderer translates to * the chart center. `innerRadius > 0` yields a donut. */ declare function computePie(data: ChartDatum[], outerRadius: number, innerRadius?: number, padAngle?: number): PieSlice[]; /** * Default categorical palette for charts that need many distinct colors * (pie slices, multi-series). Vibe-independent on purpose — the vibe controls * texture/roughness, the palette controls hue. */ declare const DEFAULT_PALETTE: string[]; declare function colorAt(index: number, palette?: string[]): string; /** Estimate the rendered size of a single line of text. */ declare function measureText(text: string, fontSize: number, fontFamily: string): { width: number; height: number; }; /** Greedy word-wrap to a pixel width; hard-breaks any single word that overflows. */ declare function wrapText(text: string, maxWidth: number, fontSize: number, fontFamily: string): string[]; /** * Grow a base margin so the widest label fits on the left (y-axis tick labels) * and a line of text fits along the bottom (x-axis tick labels). Pure helper for * charts that want their margins to adapt to their data. */ declare function autoMargin(labels: string[], fontSize: number, fontFamily: string, base: Margin, pad?: number): Margin; /** * Build screen-reader data-table models from chart inputs. Pure data shaping — * keeps the accessibility fallback in lockstep with what each chart draws. */ declare function datumTable(data: ChartDatum[], caption?: string): DataTableModel; declare function seriesTable(series: Series[], caption?: string): DataTableModel; /** * Data profiling for the `visualize` pipeline. Pure and DOM-free: inspect an * array of records and report each field's type/cardinality plus the dataset's * overall shape, so the recommendation engine can reason over structure rather * than raw values. */ type FieldType = 'quantitative' | 'categorical' | 'temporal' | 'identifier'; type DataShape = 'single-series' | 'multi-series' | 'hierarchy' | 'graph' | 'matrix' | 'flat-records'; interface FieldProfile { name: string; type: FieldType; cardinality: number; min?: number; max?: number; example: unknown; } interface DataProfile { rowCount: number; fields: FieldProfile[]; shape: DataShape; } declare function profileData(data: Record[]): DataProfile; /** * Heuristic chart recommendation. Given a data profile (and an optional intent) * it returns ranked chart choices with a field→role encoding and a * human-readable rationale. Pure and deterministic — the rationale makes every * choice explainable. */ type Intent = 'trend' | 'compare' | 'composition' | 'distribution' | 'correlation' | 'flow' | 'hierarchy'; type ChartType = 'bar' | 'line' | 'area' | 'scatter' | 'pie' | 'heatmap' | 'sankey' | 'treemap' | 'radar'; interface ChartRecommendation { chartType: ChartType; encoding: Record; confidence: number; rationale: string; } declare function recommendChart(profile: DataProfile, intent?: Intent): ChartRecommendation[]; /** * Compile a (data, recommendation) pair into concrete props for the matching * chart component — including reshaping raw records into the component's data * structure. Pure: no rendering, just data shaping. */ type ComponentName = 'BarChart' | 'LineChart' | 'AreaChart' | 'ScatterPlot' | 'PieChart' | 'HeatmapChart' | 'SankeyChart' | 'TreemapChart' | 'RadarChart'; interface CompiledChart { component: ComponentName; props: Record; } type Row$2 = Record; declare function compileChart(data: Row$2[], rec: ChartRecommendation): CompiledChart; /** * Heuristic, deterministic natural-language → chart hints. Pure and DOM-free: * given an English query and a data profile it extracts the intent, an optional * chart-type override, field-role assignments, and a vibe — never picks a chart * itself, only nudges the recommender (see `planChart`). Never throws. */ interface ChartHints { intent?: Intent; chartType?: ChartType; /** Encoding patch in a neutral role vocabulary: x, y, series, source, target. */ roles?: Record; vibe?: VibeConfig; /** Extra props implied by the query, e.g. `innerRadius` for "donut". */ props?: Record; /** Non-stopword words the parser couldn't map — surfaced for explainability. */ unresolved: string[]; confidence: number; } declare function parseChartQuery(query: string, profile: DataProfile): ChartHints; type Row$1 = Record; /** * The shared orchestrator behind the natural-language front door. Profiles the * data, parses the query into hints, lets the existing recommender pick a chart * (nudged by the parsed intent), applies any explicit chart-type/role/vibe * overrides, and compiles concrete props. Pure and DOM-free; the parser only * nudges the recommender so the two can never disagree. */ interface ChartPlan { hints: ChartHints; recommendation: ChartRecommendation; alternatives: ChartRecommendation[]; compiled: CompiledChart; } declare function planChart(data: Row$1[], opts?: { query?: string; intent?: Intent; }): ChartPlan; /** * Deterministic paper-grain speckle. Pure and DOM-free: given a surface size and * a seed it returns faint specks the renderer paints behind the data so matte * vibes read as textured paper rather than a flat fill. Seeded so output stays * byte-stable across renders/SSR (and golden snapshots). */ interface Speck { cx: number; cy: number; r: number; opacity: number; } /** Speckle intensity tier. `medium` is the original (and default) look. */ type SpeckleTier = 'subtle' | 'medium'; declare function paperSpeckles(width: number, height: number, seed: number, tier?: SpeckleTier): Speck[]; /** * Map a vibe `texture` value to the speckle tier to render, or `null` when no * texture should be painted (`'none'` or unset). Keeps the texture vocabulary in * one place so the renderer doesn't hard-code the mapping. */ declare function speckleTierFor(texture: string | undefined): SpeckleTier | null; /** Whether a `#rrggbb` colour is dark, so specks can be tinted for contrast. */ declare function isDarkColor(hex: string | undefined): boolean; /** * Chart critique: flag common dataviz mistakes in a compiled chart so an agent * can refine it. Each rule fires on a concrete, testable condition and carries a * human-readable message plus an optional `fix` patch describing the change. * Pure: it inspects the compiled props + data profile, never renders. */ interface Critique { severity: 'info' | 'warn'; /** Stable rule id, for dedup / filtering in a refine loop. */ rule: string; message: string; /** A concrete, machine-readable patch an agent can apply, where applicable. */ fix?: Record; } interface CritiqueOptions { /** Plot width (px) used for label-collision detection. */ width?: number; } declare function critiqueChart(compiled: CompiledChart, profile: DataProfile, opts?: CritiqueOptions): Critique[]; /** * Declarative, DOM-free data shaping run *before* a chart encodes its rows. * Each transform is a small pure function; `applyTransforms` folds a pipeline * left-to-right. This lets an agent say "top 10 by revenue, descending" instead * of wrangling the data itself. No dependencies beyond the math here. */ type Row = Record; type Comparator = '==' | '!=' | '>' | '>=' | '<' | '<=' | 'in'; type Transform = { op: 'sort'; by: string; dir?: 'asc' | 'desc'; } | { op: 'filter'; field: string; cmp: Comparator; value: unknown; } | { op: 'topN'; by: string; n: number; rest?: 'drop' | 'group-other'; labelField?: string; otherLabel?: string; } | { op: 'aggregate'; groupBy: string[]; field: string; reducer: Reducer; as?: string; } | { op: 'bin'; field: string; bins: number; as?: string; countAs?: string; } | { op: 'rolling'; field: string; window: number; reducer: 'mean' | 'sum'; as?: string; } | { op: 'pivot'; index: string; column: string; value: string; }; type Reducer = 'sum' | 'mean' | 'count' | 'min' | 'max' | 'median'; /** Fold a transform pipeline over rows, left to right. Pure; never mutates input. */ declare function applyTransforms(rows: Row[], pipeline: Transform[]): Row[]; /** Log scale (d3) for positive quantitative axes. */ declare function logScale(domain: [number, number], range: [number, number]): ScaleLogarithmic; /** Time scale (d3) over epoch-millisecond domains. */ declare function timeScale(domain: [number, number], range: [number, number]): ScaleTime; /** * Tiny, dependency-free value formatters for axis ticks and labels. Covers the * common cases an agent reaches for — fixed decimals, thousands grouping, SI * suffixes, currency, percent, and a strftime subset — without pulling in * d3-format / d3-time-format. */ /** * Format a value with an optional d3-ish number/date `spec` and a `unit` suffix. * A spec containing `%` *with a letter* (e.g. `%b %Y`) is treated as a date * pattern; a bare `%` (e.g. `.0%`) is the percent number type. */ declare function formatValue(value: string | number, spec?: string, unit?: string): string; /** * Resolve an `AxisFormat.domain` against a chart's values. Returns the default * extent when no override is given, so callers stay default-preserving. */ declare function resolveDomain(values: number[], fallback: [number, number], axis?: AxisFormat): [number, number]; /** A tick formatter for an axis, or `undefined` to keep the chart default. */ declare function tickFormatter(axis?: AxisFormat): ((v: string | number) => string) | undefined; /** * Annotation + emphasis types, kept in the (DOM-free) core so both the renderer * (`components/Annotations.tsx`) and the emphasis resolver can share them. */ type Annotation = { kind: 'x-line' | 'y-line'; value: number; label?: string; color?: string; } | { kind: 'x-band' | 'y-band'; from: number; to: number; label?: string; color?: string; } | { kind: 'point-callout'; x: number; y: number; text: string; dx?: number; dy?: number; color?: string; } | { kind: 'circle'; x: number; y: number; r: number; label?: string; color?: string; } | { kind: 'segment'; x1: number; y1: number; x2: number; y2: number; label?: string; color?: string; }; /** * Higher-level, data-relative emphasis an agent can ask for. Resolved against * the chart's series into concrete annotations (+ per-series highlight state) by * `resolveEmphasis`. */ type EmphasisSpec = { kind: 'trend'; series?: string; method?: 'linear' | 'mean'; color?: string; } | { kind: 'auto-callout'; pick: 'max' | 'min' | 'first' | 'last' | 'peak'; series?: string; template?: string; color?: string; } | { kind: 'highlight-series'; id: string; mode?: 'emphasize' | 'mute-others'; }; /** Least-squares fit of `y = slope·x + intercept` over a point set. */ declare function linearRegression(points: SeriesPoint[]): { slope: number; intercept: number; }; /** The point a `pick` strategy selects (by y for max/min/peak, by order otherwise). */ declare function pickPoint(points: SeriesPoint[], pick: 'max' | 'min' | 'first' | 'last' | 'peak'): SeriesPoint | undefined; interface ResolvedEmphasis { /** Concrete overlay annotations (trend segments, auto-callouts). */ annotations: Annotation[]; /** Series ids to render faded (highlight-series with mode `mute-others`). */ muted: Set; /** Series ids to emphasize. */ emphasized: Set; } /** * Turn data-relative `EmphasisSpec`s into drawable annotations plus per-series * highlight state. Pure; degrades to no-ops when a target series is missing. */ declare function resolveEmphasis(series: Series[], specs: EmphasisSpec[]): ResolvedEmphasis; /** * The foundational primitive. Takes an SVG path `d` string (typically produced * by the D3 calculation layer) and renders it as a hand-drawn sketch using the * resolved vibe. Every higher-level shape and chart is built on top of this. * * D3 decides *where* the path goes; the vibe decides *how* it looks. */ declare function RoughPath({ d, vibe, seed, stroke, fill, className, style, onClick, dataAttrs, onPointerEnter, onPointerMove, onPointerLeave, onPointerDown, onPointerUp, children, }: RoughPathProps): react_jsx_runtime.JSX.Element; /** A sketchy straight line between two D3-computed coordinates. */ declare function RoughLine({ x1, y1, x2, y2, vibe, seed, stroke, className, style, onClick, dataAttrs, onPointerEnter, onPointerMove, onPointerLeave, onPointerDown, onPointerUp, }: RoughLineProps): react_jsx_runtime.JSX.Element; /** A sketchy rectangle — the workhorse for bars and flowchart nodes. */ declare function RoughRectangle({ x, y, width, height, vibe, seed, stroke, fill, className, style, onClick, dataAttrs, onPointerEnter, onPointerMove, onPointerLeave, onPointerDown, onPointerUp, children, }: RoughRectangleProps): react_jsx_runtime.JSX.Element; /** A sketchy circle — scatter points, pie wedges' guides, flowchart terminals. */ declare function RoughCircle({ cx, cy, diameter, vibe, seed, stroke, fill, className, style, onClick, dataAttrs, onPointerEnter, onPointerMove, onPointerLeave, onPointerDown, onPointerUp, children, }: RoughCircleProps): react_jsx_runtime.JSX.Element; /** * Vibe-aware text. The glyphs themselves aren't sketched — the vibe only swaps * the font family/size and supplies the fill color, so axis ticks, labels, * legends, and flowchart nodes all read consistently. */ declare function RoughText({ x, y, children, anchor, baseline, rotate, vibe, seed, fill, haloColor, knockout, maxWidth, className, style, onClick, dataAttrs, onPointerEnter, onPointerMove, onPointerLeave, onPointerDown, onPointerUp, }: RoughTextProps): react_jsx_runtime.JSX.Element; declare function getRoughGenerator(): RoughGenerator; /** Whether a path is the sketch outline or part of the fill/hatching. */ type RoughPathKind = 'stroke' | 'fill'; /** Flat description of one `` element to render for a sketchy drawable. */ interface RoughPathInfo { d: string; stroke: string; strokeWidth: number; fill: string; /** `stroke` = the sketch outline; `fill` = solid fill or hachure lines. */ kind: RoughPathKind; } /** * Turn a Rough.js `Drawable` into plain `` descriptors. Rough.js emits * separate ops for the outline, the solid fill, and the hatching sketch — we * render each as its own path so React owns the DOM, not Rough.js. * * `toPaths` emits exactly one path per op-set, in order, so the returned paths * line up 1:1 with `drawable.sets`: a `path` set is the outline; `fillPath` and * `fillSketch` are the fill. We surface that as `kind` so callers can clip the * fill to the shape and animate only the outline. */ declare function drawableToPaths(drawable: Drawable): RoughPathInfo[]; /** * Browser-side export helpers: serialize a live `` to a string, rasterize * it to a PNG blob, trigger a download, or copy it to the clipboard. * * No font embedding: the browser is already painting the chart, so any font * the consumer has loaded via CSS will be present. For standalone SVGs that * must render with no font installed, use `goldenchart/server`'s * `renderToSVGString` instead — that path embeds `@font-face` rules. */ type ExportFormat = 'svg' | 'png'; interface ToPngOptions { /** Pixel-density multiplier for the rasterised image. Default 2. */ scale?: number; /** Override the output width (px). Defaults to the SVG's viewport width. */ width?: number; /** Override the output height (px). Defaults to the SVG's viewport height. */ height?: number; /** Solid background colour painted under the SVG. Default: transparent. */ background?: string; } interface DownloadOptions extends ToPngOptions { /** File name *without* extension; the format's extension is appended. */ filename: string; format: ExportFormat; } /** Returns the SVG string for a live `` element (no font embedding). */ declare function toSvgString(svg: SVGSVGElement): string; /** Default size for a rasterised SVG; honours `width`/`height` attrs or viewBox. */ declare function svgPixelSize(svg: SVGSVGElement): { width: number; height: number; }; /** File extension for an export format (no leading dot). */ declare function extensionFor(format: ExportFormat): string; /** MIME type for an export format. */ declare function mimeFor(format: ExportFormat): string; /** Rasterises an SVG to a PNG blob via an off-DOM ``. */ declare function toPng(svg: SVGSVGElement, opts?: ToPngOptions): Promise; /** Triggers a browser download of the chart in the chosen format. */ declare function downloadChart(svg: SVGSVGElement, opts: DownloadOptions): Promise; /** Best-effort: writes the chart to the clipboard. Requires HTTPS + user gesture. */ declare function copyToClipboard(svg: SVGSVGElement, format?: ExportFormat): Promise; /** Convenience: find the `` inside a chart container (e.g. a ref's `current`). */ declare function chartSvgFrom(container: Element | null): SVGSVGElement | null; interface SurfaceProps { width: number; height: number; vibe?: VibeConfig; /** Brand identity (palette/colours/font/logo) layered on top of the vibe. */ brand?: BrandConfig; title?: string; /** Longer accessible description, rendered as ``. */ description?: string; /** Explicit aria-label; falls back to `title`. */ ariaLabel?: string; /** Visually-hidden data table mirroring the chart, for screen readers. */ dataTable?: DataTableModel; /** Tailwind classes for the outer container element. */ className?: string; /** Tailwind classes applied to the inner ``. */ svgClassName?: string; style?: CSSProperties; children?: ReactNode; /** * Render only the `` (no Tailwind wrapper `
`) with an explicit * `xmlns`, producing a standalone, serializable SVG. Used by the headless * `renderToSVGString` path and the MCP server. */ bare?: boolean; /** Attach a ref to the inner `` — handy for client-side export. */ svgRef?: Ref; } /** * The container every chart renders into: a Tailwind-styled wrapper around a * single ``, with a `VibeProvider` so descendant primitives inherit the * aesthetic. Owns accessibility (role/title/desc/aria-label, optional data * table) and the optional draw-on reveal animation. */ declare function Surface({ width, height, vibe, brand, title, description, ariaLabel, dataTable, className, svgClassName, style, children, bare, svgRef, }: SurfaceProps): react_jsx_runtime.JSX.Element; interface ResponsiveSize { width: number; height: number; } interface ResponsiveContainerProps { /** Render-prop receiving the measured size in pixels. */ children: (size: ResponsiveSize) => ReactNode; /** Width-to-height ratio used to derive `height` from observed width. Default 16/9. */ aspectRatio?: number; /** Lower bound on the emitted width. */ minWidth?: number; /** Lower bound on the emitted height. */ minHeight?: number; /** Upper bound on the emitted height. */ maxHeight?: number; /** Resize debounce in ms. Default 80. */ debounceMs?: number; /** * Initial size used during SSR / before the first measurement. When omitted, * the container renders nothing until it has measured its parent — which is * the safe default but means a one-frame layout shift in the browser. */ defaultSize?: ResponsiveSize; className?: string; style?: CSSProperties; } /** * Width-driven render-prop wrapper. Measures its own `
` with * `ResizeObserver` and hands `{ width, height }` to its child render fn so * GoldenChart components — which require explicit pixel dimensions — fill the * available width. * * SSR-safe: when no `defaultSize` is provided the container renders nothing * until the first measurement. Pass `defaultSize` to render markup during SSR * (it will be replaced by the measured size on hydration). */ declare function ResponsiveContainer({ children, aspectRatio, minWidth, minHeight, maxHeight, debounceMs, defaultSize, className, style, }: ResponsiveContainerProps): react_jsx_runtime.JSX.Element; interface AnnotationsProps { annotations: Annotation[]; plot: PlotArea; /** Linear data→pixel scale for the x axis (omitted for band-x charts). */ xScale?: (value: number) => number; yScale?: (value: number) => number; } /** * Overlay annotations on a cartesian chart: reference lines/bands, callouts, and * circled points. Renders only the annotations whose required scale is present, * so it degrades gracefully on band-axis charts. */ declare function Annotations({ annotations, plot, xScale, yScale }: AnnotationsProps): react_jsx_runtime.JSX.Element; type BarMode = 'single' | 'grouped' | 'stacked'; interface BarChartProps extends BaseChartProps { data: ChartDatum[] | MultiSeriesDatum[]; /** `single` (default), `grouped` (side-by-side) or `stacked` multi-series. */ mode?: BarMode; /** Series keys for multi-series modes; defaults to the union of value keys. */ seriesKeys?: string[]; showAxes?: boolean; showGrid?: boolean; showLegend?: boolean; annotations?: Annotation[]; /** Value-axis scale/format overrides; category axis takes `xAxis` for labels. */ xAxis?: AxisFormat; yAxis?: AxisFormat; } /** * The reference chart for the calc/render split: d3-scale computes bar geometry, * `` draws each bar. Supports single, grouped and stacked * multi-series modes. */ declare function BarChart({ data: rawData, width, height, margin, vibe, brand, title, description, ariaLabel, dataTable, className, style, bare, mode, seriesKeys, showAxes, showGrid, showLegend, annotations, xAxis, yAxis, transitions, }: BarChartProps): react_jsx_runtime.JSX.Element; interface LineChartProps extends BaseChartProps { series: Series[]; curve?: CurveName; showPoints?: boolean; showAxes?: boolean; showGrid?: boolean; /** Show a legend below the plot for multi-series data. Defaults to on. */ showLegend?: boolean; annotations?: Annotation[]; /** Data-relative emphasis: trend lines, auto-callouts, series highlighting. */ emphasis?: EmphasisSpec[]; xAxis?: AxisFormat; yAxis?: AxisFormat; } /** Multi-series line chart: d3-shape builds each path, `` sketches it. */ declare function LineChart({ series: rawSeries, width, height, margin, vibe, brand, title, description, ariaLabel, dataTable, className, style, bare, curve, showPoints, showAxes, showGrid, showLegend, annotations, emphasis, xAxis, yAxis, transitions, }: LineChartProps): react_jsx_runtime.JSX.Element; interface AreaChartProps extends BaseChartProps { series: Series[]; curve?: CurveName; /** Data-space y-value the area fills down to. */ baseline?: number; showLine?: boolean; /** Stack series on top of each other (assumes points are index-aligned). */ stacked?: boolean; showAxes?: boolean; showGrid?: boolean; /** Show a legend below the plot for multi-series data. Defaults to on. */ showLegend?: boolean; annotations?: Annotation[]; xAxis?: AxisFormat; yAxis?: AxisFormat; } /** * Filled area chart — the strongest showcase for Rough.js hachure/zigzag fills. * d3-shape's `area` builds the fill path; the vibe's `fillStyle` textures it. */ declare function AreaChart({ series: rawSeries, width, height, margin, vibe, brand, title, description, ariaLabel, dataTable, className, style, bare, curve, baseline, showLine, stacked, showAxes, showGrid, showLegend, annotations, xAxis, yAxis, transitions, }: AreaChartProps): react_jsx_runtime.JSX.Element; interface ScatterDatum { x: number; y: number; /** Optional data-space magnitude driving the bubble radius. */ r?: number; color?: string; label?: string; } interface ScatterPlotProps extends BaseChartProps { data: ScatterDatum[]; /** Marker radius (px) used when a datum has no `r`. */ radius?: number; /** Max bubble radius (px) when data carries `r`. */ maxRadius?: number; showAxes?: boolean; showGrid?: boolean; annotations?: Annotation[]; /** Data-relative emphasis: a regression/mean trend line, auto-callouts. */ emphasis?: EmphasisSpec[]; xAxis?: AxisFormat; yAxis?: AxisFormat; } /** Scatter / bubble chart: each datum maps to a sketchy ``. */ declare function ScatterPlot({ data, width, height, margin, vibe, brand, title, className, style, bare, description, ariaLabel, dataTable, radius, maxRadius, showAxes, showGrid, annotations, emphasis, xAxis, yAxis, }: ScatterPlotProps): react_jsx_runtime.JSX.Element; interface PieChartProps extends BaseChartProps { data: ChartDatum[]; /** 0 = pie, > 0 = donut (px). */ innerRadius?: number; padAngle?: number; showLabels?: boolean; } /** * Pie / donut chart. d3-shape's `arc`+`pie` emit each slice's path string at the * origin; we translate to the plot center and let `` sketch them. */ declare function PieChart({ data: rawData, width, height, margin, vibe, brand, title, description, ariaLabel, dataTable, className, style, bare, innerRadius, padAngle, showLabels, transitions, }: PieChartProps): react_jsx_runtime.JSX.Element; interface FlowchartProps extends BaseChartProps { nodes: FlowNode[]; edges?: FlowEdge[]; direction?: FlowDirection; showArrowheads?: boolean; /** Edge connector style. `curved` (default) or `orthogonal` elbow links. */ routing?: EdgeRouting; /** Layout knobs; `engine` forces tree vs DAG. */ layoutOptions?: LayoutOptions; } /** * Flowchart with automatic layout: a tidy d3-hierarchy tree for single-root * trees, a layered DAG layout for merges/multiple-roots/cycles (in any of four * directions). A thin wrapper over `` with the flow layout engine. */ declare function Flowchart({ nodes, edges, direction, showArrowheads, routing, layoutOptions, ...rest }: FlowchartProps): react_jsx_runtime.JSX.Element; interface DiagramProps extends BaseChartProps { nodes: FlowNode[]; edges?: FlowEdge[]; /** Layout engine that positions the scene (flow/tree/DAG, sequence, …). */ layout: LayoutEngine; routing?: EdgeRouting; showArrowheads?: boolean; } /** * The generic diagram renderer: a `LayoutEngine` positions nodes/edges/groups, * then this draws group containers, edges (curved or orthogonal, with optional * arrowheads + labels) and per-shape nodes. Flowchart and the other diagram * types are thin wrappers that pick a layout engine. */ declare function Diagram({ nodes, edges, layout, width, height, margin, vibe, brand, title, description, ariaLabel, className, style, bare, routing, showArrowheads, }: DiagramProps): react_jsx_runtime.JSX.Element; interface MindMapProps extends BaseChartProps { nodes: FlowNode[]; edges?: FlowEdge[]; } /** * Mind-map: a radial tree fanning out from a central root. A thin wrapper over * `` with the radial layout engine, straight spokes and no arrowheads. */ declare function MindMap({ nodes, edges, ...rest }: MindMapProps): react_jsx_runtime.JSX.Element; interface OrgChartProps extends BaseChartProps { nodes: FlowNode[]; edges?: FlowEdge[]; direction?: FlowDirection; } /** * Organisation chart: a tidy hierarchy of rectangular boxes joined by plain * elbow connectors (no arrowheads). A thin wrapper over `` with the * flow layout engine, forcing rectangular nodes regardless of any shape hint. */ declare function OrgChart({ nodes, edges, direction, ...rest }: OrgChartProps): react_jsx_runtime.JSX.Element; interface ArchitectureDiagramProps extends BaseChartProps { nodes: FlowNode[]; edges?: FlowEdge[]; direction?: FlowDirection; showArrowheads?: boolean; /** Density/spacing/lane-gutter knobs for the swimlane layout. */ layoutOptions?: LayoutOptions; } /** * Architecture / network diagram: components (optionally grouped into zone * containers via each node's `group`) joined by connectors that route * orthogonally around the other boxes. A thin wrapper over `` with the * architecture layout engine, which supplies the routed edge waypoints. */ declare function ArchitectureDiagram({ nodes, edges, direction, showArrowheads, layoutOptions, ...rest }: ArchitectureDiagramProps): react_jsx_runtime.JSX.Element; interface SequenceDiagramProps extends BaseChartProps { actors: SequenceActorInput[]; messages: SequenceMessageInput[]; actorHeight?: number; } /** * Sequence / interaction diagram: actors across the top, lifelines running * down, and messages as ordered horizontal arrows between them (reply messages * dashed, self-messages looping back). `computeSequence` does the geometry; the * sketch primitives draw it. */ declare function SequenceDiagram({ actors, messages, width, height, margin, vibe, brand, title, description, ariaLabel, className, style, bare, actorHeight, }: SequenceDiagramProps): react_jsx_runtime.JSX.Element; interface ERDiagramProps extends BaseChartProps { entities: EREntityInput[]; relationships?: ERRelationshipInput[]; direction?: FlowDirection; } /** * Entity-relationship diagram: titled entity boxes with field rows, joined by * orthogonally routed connectors carrying cardinality markers. `computeER` does * the geometry; the sketch primitives draw it. */ declare function ERDiagram({ entities, relationships, width, height, margin, vibe, brand, title, description, ariaLabel, className, style, bare, direction, }: ERDiagramProps): react_jsx_runtime.JSX.Element; interface TimelineProps extends BaseChartProps { events: TimelineEventInput[]; orientation?: TimelineOrientation; } /** * Timeline: ordered events along a central axis, their label blocks alternating * to either side so they don't collide. `computeTimeline` does the geometry; a * marker, a connector stub and the date/title/detail text draw each event. */ declare function Timeline({ events, width, height, margin, vibe, brand, title, description, ariaLabel, className, style, bare, orientation, }: TimelineProps): react_jsx_runtime.JSX.Element; type DiagramRenderOptions = Omit; /** * Dispatch a {@link DiagramSpec} to its component. The single entry point behind * the `render_diagram` tool and the Mermaid bridge: `width`/`height`/`vibe` (and * any other base prop) come from `opts`. Mirrors `visualize` for charts. */ declare function renderDiagram(spec: DiagramSpec, opts: DiagramRenderOptions): ReactElement; interface SankeyChartProps extends BaseChartProps { nodes: SankeyNodeInput[]; links: SankeyLinkInput[]; direction?: SankeyOrientation; nodeWidth?: number; nodePadding?: number; showValues?: boolean; } /** * Weighted flow diagram. `computeSankey` (built on the DAG layering) sizes nodes * by throughput and ribbons by value; `` draws nodes and * `` draws each translucent ribbon. */ declare function SankeyChart({ nodes, links, width, height, margin, vibe, brand, title, description, ariaLabel, className, style, bare, direction, nodeWidth, nodePadding, showValues, }: SankeyChartProps): react_jsx_runtime.JSX.Element; interface TreemapChartProps extends BaseChartProps { data: TreemapDatum[]; padding?: number; tile?: TreemapTile; showLabels?: boolean; } /** * Space-filling nested rectangles sized by value. `computeTreemap` (d3-hierarchy) * does the math; one `` per leaf, colored by its top-level group. */ declare function TreemapChart({ data, width, height, margin, vibe, brand, title, description, ariaLabel, className, style, bare, padding, tile, showLabels, }: TreemapChartProps): react_jsx_runtime.JSX.Element; interface HeatmapDatum { x: string | number; y: string | number; value: number; } interface HeatmapChartProps extends BaseChartProps { data: HeatmapDatum[]; xLabels?: (string | number)[]; yLabels?: (string | number)[]; colorScale?: ColorScaleName | ((value: number) => string); showValues?: boolean; showAxes?: boolean; } /** * Grid of cells colored by value on a sequential color scale. Band scales place * the cells; `` draws each one. */ declare function HeatmapChart({ data, width, height, margin, vibe, brand, title, description, ariaLabel, className, style, bare, xLabels, yLabels, colorScale, showValues, showAxes, }: HeatmapChartProps): react_jsx_runtime.JSX.Element; interface RadarSeries { id: string; values: number[]; color?: string; } interface RadarChartProps extends BaseChartProps { axes: string[]; series: RadarSeries[]; maxValue?: number; levels?: number; showDots?: boolean; showLabels?: boolean; /** Show a legend below the chart for multiple series. Defaults to on. */ showLegend?: boolean; } /** * Polar multi-axis (spider) chart. `core/polar.ts` maps each value to a point on * its axis; a closed `` draws each series over faint grid rings. */ declare function RadarChart({ axes, series, width, height, margin, vibe, brand, title, description, ariaLabel, className, style, bare, maxValue, levels, showDots, showLabels, showLegend, }: RadarChartProps): react_jsx_runtime.JSX.Element; type AxisOrientation = 'top' | 'right' | 'bottom' | 'left'; interface AxisProps { scale: AnyScale; orientation: AxisOrientation; plot: PlotArea; ticks?: number; tickFormat?: (value: string | number) => string; /** Length of each tick mark in px. */ tickSize?: number; } /** * A vibe-aware axis. Works in absolute surface coordinates, so charts can place * it without a transform as long as their scales are ranged in those same * coordinates. Tick positions come from the DOM-free `ticksForScale` helper. */ declare function Axis({ scale, orientation, plot, ticks, tickFormat, tickSize }: AxisProps): react_jsx_runtime.JSX.Element; interface GridProps { plot: PlotArea; xScale?: AnyScale; yScale?: AnyScale; ticks?: number; } /** * Faint gridlines aligned to axis ticks. Derives a calmer vibe from context so * the grid never competes with the data — same preset, a touch less roughness, * and a faint hairline whose colour follows the background (a dark line on light * vibes, a light line on dark vibes) so it never blows out on dark themes. */ declare function Grid({ plot, xScale, yScale, ticks }: GridProps): react_jsx_runtime.JSX.Element; /** * Legend layout. Pure and DOM-free: flow a set of swatch+label items into one or * more centred horizontal rows that fit within `availableWidth`, wrapping as * needed. Charts use the returned `height` to reserve a band below the plot and * render each placed item at its `x,y`. Keeping this separate from the renderer * makes the (fiddly) wrapping/centering logic testable on its own. */ interface LegendItem { label: string; color: string; } interface LegendProps { items: LegendItem[]; /** Top-left of the legend block. */ x: number; y: number; /** Width to centre/wrap the items within (typically the plot width). */ width: number; } /** * Vibe-aware legend: swatch + label per item, flowed into centred rows that wrap * within `width`. Lay it out below the plot (the chart reserves the band) so it * never overlaps the data. Geometry comes from the pure `layoutLegend`. */ declare function Legend({ items, x, y, width }: LegendProps): react_jsx_runtime.JSX.Element; interface VisualizeOptions extends Omit { /** Steer the recommendation (trend/compare/composition/…). */ intent?: Intent; /** Plain-English query — picks the chart, field roles, and vibe. Explicit props still win. */ query?: string; } /** * The one-call entry point: profile the data, recommend a chart (optionally * steered by a plain-English `query`), compile it to props, and return the * rendered element. `width`/`height` (and any other chart prop) come from `opts` * and win over both the auto-derived and query-derived props. */ declare function visualize(data: Record[], opts: VisualizeOptions): ReactElement; interface AutoChartProps extends BaseChartProps { data: Record[]; intent?: Intent; /** Plain-English query — picks the chart, field roles, and vibe. */ query?: string; } /** Component form of {@link visualize}. */ declare function AutoChart({ data, intent, query, ...rest }: AutoChartProps): ReactElement; /** * Icon stroke paths and fixed tone colors for `Badge`. Pure data, no React. * * Icon authoring contract (per spec): * - viewBox 16x16 * - stroke-only (no `Z`, no fills) * - single open sub-path preferred; if a glyph genuinely needs two strokes, * the entry may be `string[]` and the component renders each as its own * Rough path. */ declare const BADGE_TONES: readonly ["neutral", "info", "success", "warn", "danger"]; type BadgeTone = (typeof BADGE_TONES)[number]; declare const BADGE_ICONS: readonly ["star", "fork", "issue", "tag", "commit", "license", "lang", "check"]; type BadgeIcon = (typeof BADGE_ICONS)[number]; declare const isBadgeTone: (x: unknown) => x is BadgeTone; declare const isBadgeIcon: (x: unknown) => x is BadgeIcon; interface BadgeProps { label: string; value: string; /** Default `'neutral'`. */ tone?: BadgeTone; icon?: BadgeIcon; vibe?: VibeConfig; brand?: BrandConfig; seed?: number; className?: string; } declare function Badge({ label, value, tone, icon, vibe, brand, seed, className, }: BadgeProps): react_jsx_runtime.JSX.Element; type CrosswalkComponent = ComponentName | 'ChoroplethMap'; type CrosswalkResult = { component: CrosswalkComponent; props: Record; } | { unsupported: { type: string; reason: string; }; }; interface FusionInput { type?: string; dataSource?: any; } declare function fusionToGoldenChart(input: FusionInput): CrosswalkResult; export { type Annotation, Annotations, type AnnotationsProps, type AnyScale, type ArchSpec, ArchitectureDiagram, type ArchitectureDiagramProps, AreaChart, type AreaChartProps, AutoChart, type AutoChartProps, Axis, AxisFormat, type AxisOrientation, type AxisProps, BADGE_ICONS, BADGE_TONES, Badge, type BadgeIcon, type BadgeProps, type BadgeTone, BarChart, type BarChartProps, type BarMode, BaseChartProps, BoundingBox, Brand, BrandConfig, BrandProvider, type BrandProviderProps, BrandVibeOverrides, ChartDatum, type ChartHints, type ChartPlan, type ChartRecommendation, type ChartType, ColorScaleName, type Comparator, type CompiledChart, type ComponentName, type Connector, type ConnectorRouting, type Critique, type CritiqueOptions, type CrosswalkComponent, type CrosswalkResult, type CurveName, DEFAULT_MARGIN, DEFAULT_NODE_H, DEFAULT_NODE_W, DEFAULT_PALETTE, DEFAULT_VIBE, type DataProfile, type DataShape, DataTableModel, Diagram, type DiagramKind, type DiagramOrientation, type DiagramProps, type DiagramRenderOptions, type DiagramScene, type DiagramSpec, type DownloadOptions, ERDiagram, type ERDiagramProps, type EREntityInput, type ERField, type ERFieldRow, type ERKey, type ERLayout, type EROptions, type ERRelationshipInput, type ERSpec, EdgeRouting, type EmphasisSpec, type ExportFormat, type FieldProfile, type FieldType, FlowDirection, FlowEdge, type FlowLayout, FlowNode, FlowNodeShape, Flowchart, type FlowchartProps, type FlowchartSpec, Grid, type GridProps, HeatmapChart, type HeatmapChartProps, type HeatmapDatum, type Intent, type LaidActor, type LaidEntity, type LaidGroup, type LaidMessage, type LaidOutEdge, type LaidOutNode, type LaidRelationship, type LaidTimelineEvent, type LayoutEngine, LayoutOptions, Legend, type LegendItem, type LegendProps, LineChart, type LineChartProps, type LinkOrientation, Margin, MermaidParseError, MindMap, type MindMapProps, type MindMapSpec, MultiSeriesDatum, type Obstacle, OrgChart, type OrgChartProps, type OrgSpec, PieChart, type PieChartProps, type PieSlice, PlotArea, Point, RadarChart, type RadarChartProps, type RadarSeries, type Reducer, ResolvedBrand, type ResolvedEmphasis, ResolvedVibe, ResponsiveContainer, type ResponsiveContainerProps, type ResponsiveSize, RoughCircle, type RoughCircleProps, RoughLine, type RoughLineProps, RoughPath, type RoughPathInfo, type RoughPathProps, type RoughPrimitiveProps, RoughRectangle, type RoughRectangleProps, RoughText, type RoughTextProps, type RouteOptions, type Row, SELF_LOOP_WIDTH, SankeyChart, type SankeyChartProps, type SankeyLaidLink, type SankeyLaidNode, type SankeyLayout, type SankeyLinkInput, type SankeyNodeInput, type SankeyOptions, type SankeyOrientation, type ScatterDatum, ScatterPlot, type ScatterPlotProps, type SequenceActorInput, SequenceDiagram, type SequenceDiagramProps, type SequenceLayout, type SequenceMessageInput, type SequenceMessageKind, type SequenceOptions, type SequenceSpec, Series, SeriesPoint, type Speck, type SpeckleTier, Surface, type SurfaceProps, type Tick, Timeline, type TimelineEventInput, type TimelineLayout, type TimelineOptions, type TimelineOrientation, type TimelineProps, type TimelineSpec, type ToPngOptions, type Transform, TreemapChart, type TreemapChartProps, type TreemapDatum, type TreemapLeaf, type TreemapOptions, type TreemapTile, VIBE_PRESETS, VibeConfig, VibeOverrides, VibePreset, VibeProvider, type VibeProviderProps, type VisualizeOptions, applyTransforms, arcStrokePath, architectureLayout, areaPath, arrowHeadPath, assignLayers, autoMargin, axisAngle, bandScale, boundsOf, boxEdgePoint, boxPort, brandVibeOverrides, chartSvgFrom, colorAt, compileChart, computeER, computeGroups, computePie, computeSankey, computeSequence, computeTimeline, computeTreemap, connectEdge, connectorPath, copyToClipboard, critiqueChart, datumTable, diamondPath, downloadChart, drawableToPaths, ellipsePath, extensionFor, extentOf, flowLayout, formatValue, fusionToGoldenChart, getPlotArea, getRoughGenerator, isBadgeIcon, isBadgeTone, isDarkColor, isHorizontal, layoutDag, layoutFlow, layoutTree, linePath, linearRegression, linearScale, linkPath, logScale, measureText, mimeFor, orthogonalPath, orthogonalPoints, paperSpeckles, parseChartQuery, parseMermaid, pickPoint, planChart, pointScale, polarToCartesian, polygonPath, profileData, radialLayout, recommendChart, regularPolygonPath, renderDiagram, resolveBrand, resolveDomain, resolveEmphasis, resolveMargin, resolveVibe, routeOrthogonal, seriesTable, simplify, speckleTierFor, sqrtScale, starPath, svgPixelSize, tickFormatter, ticksForScale, timeScale, toPng, toSvgString, useBrand, useColorScheme, useResolvedBrand, useResolvedVibe, useVibeContext, vibeToRoughOptions, visualize, wedgePath, wrapText };