@hex-core/components 1.7.0 → 1.8.1

package/dist/_tsup-dts-rollup.d.ts

@@ -20,6 +20,7 @@ import { DialogTitleProps } from '@radix-ui/react-dialog';
 import { DialogTriggerProps } from '@radix-ui/react-dialog';
 import { Drawer as Drawer_2 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Edge } from 'reactflow';
 import { FieldError } from 'react-hook-form';
 import { FieldPath } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form';
@@ -31,6 +32,10 @@ import { JSX } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { Node as Node_2 } from 'reactflow';
+import { OnConnect } from 'reactflow';
+import { OnEdgesChange } from 'reactflow';
+import { OnNodesChange } from 'reactflow';
 import { OTPInput } from 'input-otp';
 import { Panel } from 'react-resizable-panels';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -171,6 +176,72 @@ declare const alertVariants: (props?: ({
 export { alertVariants }
 export { alertVariants as alertVariants_alias_1 }
 
+declare function Arc({ nodes, edges, width, height, nodeRadius, onEdgeHover, onNodeClick, className, ...rest }: ArcProps): JSX.Element;
+export { Arc }
+export { Arc as Arc_alias_1 }
+
+declare type ArcEdge = {
+    source: string;
+    target: string;
+    value?: number;
+};
+export { ArcEdge }
+export { ArcEdge as ArcEdge_alias_1 }
+
+/**
+ * Arc diagram. Nodes lie on a horizontal baseline; relationships are
+ * drawn as semicircle arcs above the line. Pure SVG; no heavy peer
+ * dependency. Excellent for sequence-aware relational data:
+ * co-occurrence in a story, train-stop transfer connections,
+ * citation chains where node order is meaningful.
+ *
+ * Distinct from Chord: Chord wraps nodes around a ring (no inherent
+ * order); Arc keeps them on a line (order matters).
+ *
+ * @example
+ * <Arc
+ *   nodes={[
+ *     { id: "alice", label: "Alice" },
+ *     { id: "bob", label: "Bob" },
+ *     { id: "carol", label: "Carol" },
+ *   ]}
+ *   edges={[
+ *     { source: "alice", target: "bob", value: 3 },
+ *     { source: "alice", target: "carol", value: 1 },
+ *   ]}
+ * />
+ */
+declare type ArcNode = {
+    id: string;
+    label: string;
+    value?: number;
+};
+export { ArcNode }
+export { ArcNode as ArcNode_alias_1 }
+
+declare interface ArcProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Nodes in display order along the baseline. */
+    nodes: ArcNode[];
+    /** Edges between nodes. Edges whose source or target id is missing are skipped. */
+    edges: ArcEdge[];
+    /** Pixel width of the rendered SVG. Default 720. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 360. */
+    height?: number;
+    /** Pixel radius of each node circle. Default 5. */
+    nodeRadius?: number;
+    /** Fired when an edge is hovered (or hover ends, with `null`). */
+    onEdgeHover?: (edge: ArcEdge | null) => void;
+    /** Fired when a node is clicked. */
+    onNodeClick?: (node: ArcNode) => void;
+}
+export { ArcProps }
+export { ArcProps as ArcProps_alias_1 }
+
+declare const arcSchema: ComponentSchemaDefinition;
+export { arcSchema }
+export { arcSchema as arcSchema_alias_1 }
+
 /** A container that maintains a specified width-to-height ratio for its children. */
 declare const AspectRatio: ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & RefAttributes<HTMLDivElement>>;
 export { AspectRatio }
@@ -250,6 +321,86 @@ declare const attachmentVariants: (props?: ({
 export { attachmentVariants }
 export { attachmentVariants as attachmentVariants_alias_1 }
 
+/**
+ * Renders an audio player UI driven by wavesurfer.js.
+ * @param props - Audio source + playback callbacks
+ * @returns A div containing play/pause control + progress bar
+ */
+declare function AudioPlayer({ src, autoPlay, onEnded, onError, className, ...rest }: AudioPlayerProps): JSX.Element;
+export { AudioPlayer }
+export { AudioPlayer as AudioPlayer_alias_1 }
+
+/**
+ * Audio playback control backed by wavesurfer.js. Renders a play/pause
+ * button + linear progress bar + duration. Pair with `<AudioWaveform>`
+ * for the visual waveform display (separate component, same engine).
+ *
+ * Headless on data: pass `src` (URL or Blob); the engine streams + decodes.
+ *
+ * Heavy peer: requires `wavesurfer.js` (~50 KB gzip, shared with
+ * AudioWaveform). The hex-core CLI's `add` flow prompts before installing.
+ *
+ * @example
+ * <AudioPlayer src="/podcast.mp3" />
+ * <AudioPlayer src={voicemailBlob} autoPlay onEnded={markRead} />
+ */
+declare interface AudioPlayerProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
+    /** Audio source — URL string or Blob. Re-loads when changed. */
+    src: string | Blob;
+    /** Auto-play once loaded. Default false. */
+    autoPlay?: boolean;
+    /** Called when playback finishes. */
+    onEnded?: () => void;
+    /** Called on engine error (network, decode, etc.). */
+    onError?: (message: string) => void;
+}
+export { AudioPlayerProps }
+export { AudioPlayerProps as AudioPlayerProps_alias_1 }
+
+export declare const audioPlayerSchema: ComponentSchemaDefinition;
+
+/**
+ * Renders an audio waveform without playback controls.
+ * @param props - Audio source + visual options + lifecycle callbacks
+ * @returns A div containing the wavesurfer-rendered waveform
+ */
+declare function AudioWaveform({ src, height, waveColor, progressColor, onReady, onError, className, ...rest }: AudioWaveformProps): JSX.Element;
+export { AudioWaveform }
+export { AudioWaveform as AudioWaveform_alias_1 }
+
+/**
+ * Standalone audio waveform display backed by wavesurfer.js. Renders the
+ * waveform of a source (URL or Blob) without playback controls — for
+ * voice-message previews, audio thumbnails, recording indicators, anywhere
+ * the visual is the point.
+ *
+ * Heavy peer: requires `wavesurfer.js` (~50 KB gzip, shared with
+ * AudioPlayer). The hex-core CLI's `add` flow prompts before installing.
+ *
+ * For interactive playback + waveform together, use `<AudioPlayer>`.
+ *
+ * @example
+ * <AudioWaveform src="/voice-message.mp3" height={48} />
+ */
+declare interface AudioWaveformProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
+    /** Audio source — URL string or Blob. */
+    src: string | Blob;
+    /** Pixel height of the waveform. Default 48. */
+    height?: number;
+    /** Bar color for unplayed regions. CSS color string. */
+    waveColor?: string;
+    /** Bar color for played regions. Default same as `waveColor`. */
+    progressColor?: string;
+    /** Called when wavesurfer finishes decoding the source. */
+    onReady?: (durationSeconds: number) => void;
+    /** Called on engine error (network, decode). */
+    onError?: (message: string) => void;
+}
+export { AudioWaveformProps }
+export { AudioWaveformProps as AudioWaveformProps_alias_1 }
+
+export declare const audioWaveformSchema: ComponentSchemaDefinition;
+
 /** Root container for an avatar (image + fallback). */
 declare const Avatar: React_2.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React_2.RefAttributes<HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
 export { Avatar }
@@ -397,6 +548,61 @@ declare const calendarSchema: ComponentSchemaDefinition;
 export { calendarSchema }
 export { calendarSchema as calendarSchema_alias_1 }
 
+/**
+ * Renders a ReactFlow graph with sensible defaults.
+ * @param props - Controlled nodes/edges + interaction handlers
+ * @returns A div containing the ReactFlow canvas
+ */
+declare function Canvas({ nodes, edges, onNodesChange, onEdgesChange, onConnect, hideControls, hideBackground, fitView, children, className, ...rest }: CanvasProps): JSX.Element;
+export { Canvas }
+export { Canvas as Canvas_alias_1 }
+
+/**
+ * Headless node-graph canvas backed by reactflow. Renders an interactive
+ * graph of agent steps, workflow nodes, RAG document refs — anywhere your
+ * AI app needs to visualize relationships.
+ *
+ * Controlled: pass `nodes` and `edges`; receive change events. Reactflow's
+ * default Background + Controls are rendered automatically; pass `children`
+ * to add Panels, MiniMap, or custom overlays.
+ *
+ * Heavy peer: requires `reactflow` (~80 KB gzip). The hex-core CLI's `add`
+ * flow prompts before installing.
+ *
+ * @example
+ * import "reactflow/dist/style.css"; // once in your app entry
+ * <Canvas
+ *   nodes={[{ id: "1", position: { x: 0, y: 0 }, data: { label: "Agent" } }]}
+ *   edges={[]}
+ *   onNodesChange={onNodesChange}
+ *   onEdgesChange={onEdgesChange}
+ * />
+ */
+declare interface CanvasProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
+    /** Node objects passed to ReactFlow. See reactflow docs for shape. */
+    nodes: Node_2[];
+    /** Edge objects passed to ReactFlow. */
+    edges: Edge[];
+    /** Forwarded to ReactFlow.onNodesChange. */
+    onNodesChange?: OnNodesChange;
+    /** Forwarded to ReactFlow.onEdgesChange. */
+    onEdgesChange?: OnEdgesChange;
+    /** Forwarded to ReactFlow.onConnect (fires when user wires two nodes). */
+    onConnect?: OnConnect;
+    /** Hide the bottom-left zoom/pan/fit controls. Default false (visible). */
+    hideControls?: boolean;
+    /** Hide the dotted background. Default false (visible). */
+    hideBackground?: boolean;
+    /** Auto-fit the view to all nodes on first render. Default true. */
+    fitView?: boolean;
+    /** Slot for MiniMap, Panel, or custom overlays rendered inside ReactFlow. */
+    children?: React_2.ReactNode;
+}
+export { CanvasProps }
+export { CanvasProps as CanvasProps_alias_1 }
+
+export declare const canvasSchema: ComponentSchemaDefinition;
+
 /** A container card with subtle shadow and border. */
 declare const Card: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
 export { Card }
@@ -431,6 +637,25 @@ declare const CardTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttribute
 export { CardTitle }
 export { CardTitle as CardTitle_alias_1 }
 
+/**
+ * Categorical chart palette for diagram primitives that encode categorical
+ * data (sunburst, treemap, sankey, chord, funnel, pyramid, venn, matrix).
+ * Cycled by an integer key — node index, leaf index, depth-1 ancestor, etc.
+ *
+ * The values reach into `--chart-1` through `--chart-6`, the dedicated
+ * diagram-encoding tokens added in `@hex-core/tokens` 1.4. Each token has a
+ * `var(--primary)` fallback so consumers on theme presets that haven't been
+ * updated to ship `--chart-N` (or who run a custom theme without the chart
+ * family) still see a coherent monochrome rendering instead of black SVG
+ * fills.
+ *
+ * Why a chart palette and not the semantic tokens: `--primary`, `--accent`,
+ * `--secondary`, and `--muted` collapse to a single hue family in the
+ * default monochrome theme — adjacent segments of a chart end up
+ * indistinguishable. Chart tokens are tuned for perceptual differentiation.
+ */
+export declare const CHART_PALETTE: readonly ["hsl(var(--chart-1, var(--primary)))", "hsl(var(--chart-2, var(--primary)))", "hsl(var(--chart-3, var(--primary)))", "hsl(var(--chart-4, var(--primary)))", "hsl(var(--chart-5, var(--primary)))", "hsl(var(--chart-6, var(--primary)))"];
+
 declare const Checkbox: React_2.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 export { Checkbox }
 export { Checkbox as Checkbox_alias_1 }
@@ -447,6 +672,73 @@ declare const checkboxSchema: ComponentSchemaDefinition;
 export { checkboxSchema }
 export { checkboxSchema as checkboxSchema_alias_1 }
 
+declare function Chord({ nodes, matrix, size, padAngle, onChordHover, onNodeClick, className, ...rest }: ChordProps): JSX.Element;
+export { Chord }
+export { Chord as Chord_alias_1 }
+
+/**
+ * Payload fired to `onChordHover`. `sourceValue` is the i→j flow;
+ * `targetValue` is the j→i flow. They differ for asymmetric matrices and
+ * are equal for symmetric ones.
+ */
+declare type ChordHoverPayload = {
+    source: ChordNode;
+    target: ChordNode;
+    sourceValue: number;
+    targetValue: number;
+};
+export { ChordHoverPayload }
+export { ChordHoverPayload as ChordHoverPayload_alias_1 }
+
+/**
+ * Chord diagram. Nodes sit on a ring; ribbons inside the ring encode
+ * weighted bidirectional relationships between them. Common for
+ * trade flows, migration, hyperlink graphs, citation networks —
+ * anywhere "A relates to B with weight w" matters at scale.
+ *
+ * Heavy peers: requires `d3-chord` (~3 KB gzip) and `d3-shape` (~6 KB
+ * gzip, already in the artifacts/ family). The hex-core CLI's `add`
+ * flow prompts before installing.
+ *
+ * @example
+ * <Chord
+ *   nodes={["A", "B", "C", "D"].map((id) => ({ id, label: id }))}
+ *   matrix={[
+ *     [0, 5, 8, 1],
+ *     [3, 0, 2, 4],
+ *     [6, 0, 0, 7],
+ *     [2, 1, 9, 0],
+ *   ]}
+ * />
+ */
+declare type ChordNode = {
+    id: string;
+    label: string;
+};
+export { ChordNode }
+export { ChordNode as ChordNode_alias_1 }
+
+declare interface ChordProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Nodes (as ring segments). Order matches matrix rows/columns. */
+    nodes: ChordNode[];
+    /** Square N×N matrix of weights. matrix[i][j] = flow from node i to node j. */
+    matrix: number[][];
+    /** Pixel size of the rendered SVG (it's square). Default 480. */
+    size?: number;
+    /** Pixel padding between adjacent ring segments. Default 0.04 (radians, d3 convention). */
+    padAngle?: number;
+    /** Fired when a ribbon is hovered (or hover ends, with `null`). */
+    onChordHover?: (chord: ChordHoverPayload | null) => void;
+    /** Fired when a node arc is clicked. */
+    onNodeClick?: (node: ChordNode) => void;
+}
+export { ChordProps }
+export { ChordProps as ChordProps_alias_1 }
+
+declare const chordSchema: ComponentSchemaDefinition;
+export { chordSchema }
+export { chordSchema as chordSchema_alias_1 }
+
 /**
  * Renders a source citation chip. Uses an `<a>` when `url` is set so the
  * chip is keyboard-focusable + opens in a new tab; falls back to a
@@ -489,6 +781,49 @@ declare const citationSchema: ComponentSchemaDefinition;
 export { citationSchema }
 export { citationSchema as citationSchema_alias_1 }
 
+declare function Cloze({ parts, revealMode, onReveal, className, ...rest }: ClozeProps): JSX.Element;
+export { Cloze }
+export { Cloze as Cloze_alias_1 }
+
+/**
+ * Cloze deletion — text with hidden segments the learner reveals one at
+ * a time (or all at once). Each `{ hidden }` token in the `parts` array
+ * renders as a redacted span; click / Enter / Space reveals just that
+ * blank.
+ *
+ * Pure HTML; no heavy peer. Pair with Deck (artifacts/deck) to flow
+ * through a sequence of cloze cards, or with SpacedRepetition for
+ * confidence rating.
+ *
+ * @example
+ * <Cloze parts={[
+ *   "The mitochondria is the ",
+ *   { hidden: "powerhouse" },
+ *   " of the cell.",
+ * ]} />
+ */
+declare type ClozePart = string | {
+    hidden: string;
+    id?: string;
+};
+export { ClozePart }
+export { ClozePart as ClozePart_alias_1 }
+
+declare interface ClozeProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children" | "onReveal"> {
+    /** Mixed array: string fragments + { hidden } cloze tokens. */
+    parts: ClozePart[];
+    /** "click" reveals one blank at a time; "all" additionally surfaces a "Reveal all" toggle. Default "click". */
+    revealMode?: "click" | "all";
+    /** Fired with the cumulative set of revealed blank ids on every reveal change. */
+    onReveal?: (revealedIds: string[]) => void;
+}
+export { ClozeProps }
+export { ClozeProps as ClozeProps_alias_1 }
+
+declare const clozeSchema: ComponentSchemaDefinition;
+export { clozeSchema }
+export { clozeSchema as clozeSchema_alias_1 }
+
 /**
  * Horizontal flex flow with wrap. Children flow left-to-right and wrap to next line as needed.
  * @param props - Cluster props including `gap`, `align`, and `justify` variant keys.
@@ -874,6 +1209,64 @@ declare namespace CommandShortcut {
 export { CommandShortcut }
 export { CommandShortcut as CommandShortcut_alias_1 }
 
+declare type CompareAttribute = {
+    id: string;
+    label: React_2.ReactNode;
+    /** Map of subjectId → cell content. Missing keys render as "—". */
+    values: Record<string, React_2.ReactNode>;
+};
+export { CompareAttribute }
+export { CompareAttribute as CompareAttribute_alias_1 }
+
+/**
+ * Side-by-side comparison table. Subjects are columns; attributes are
+ * rows; cells render the per-subject value for that attribute. With
+ * `highlightDifferences`, cells whose value differs from the row's
+ * first non-empty cell get a subtle accent — handy for vocab pairs
+ * (term ↔ translation), feature matrices (Linux vs Mac vs Windows),
+ * before/after comparisons. Pure HTML; no heavy peer.
+ *
+ * @example
+ * <CompareTable
+ *   subjects={[
+ *     { id: "linux", label: "Linux" },
+ *     { id: "mac", label: "Mac" },
+ *     { id: "win", label: "Windows" },
+ *   ]}
+ *   attributes={[
+ *     { id: "kernel", label: "Kernel", values: { linux: "Linux", mac: "Darwin", win: "NT" } },
+ *     { id: "fs", label: "Default FS", values: { linux: "ext4", mac: "APFS", win: "NTFS" } },
+ *   ]}
+ * />
+ */
+declare type CompareSubject = {
+    id: string;
+    label: React_2.ReactNode;
+};
+export { CompareSubject }
+export { CompareSubject as CompareSubject_alias_1 }
+
+declare function CompareTable({ subjects, attributes, highlightDifferences, onCellClick, className, ...rest }: CompareTableProps): JSX.Element;
+export { CompareTable }
+export { CompareTable as CompareTable_alias_1 }
+
+declare interface CompareTableProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Columns. */
+    subjects: CompareSubject[];
+    /** Rows. */
+    attributes: CompareAttribute[];
+    /** When true, cells whose value differs from the row's first non-empty cell get a subtle accent. */
+    highlightDifferences?: boolean;
+    /** Fired when a body cell is clicked. */
+    onCellClick?: (subjectId: string, attributeId: string) => void;
+}
+export { CompareTableProps }
+export { CompareTableProps as CompareTableProps_alias_1 }
+
+declare const compareTableSchema: ComponentSchemaDefinition;
+export { compareTableSchema }
+export { compareTableSchema as compareTableSchema_alias_1 }
+
 /**
  * Renders a chat composer with a textarea + slot for action buttons.
  * @param props - controlled value/handlers + slot children
@@ -1052,7 +1445,7 @@ export { DataTable }
 export { DataTable as DataTable_alias_1 }
 
 /**
- * Generic DataTable wrapper that renders a TanStack Table model using Hex UI's
+ * Generic DataTable wrapper that renders a TanStack Table model using Hex Core's
  * Table primitives. Pass columns + data; use TanStack hooks for sorting,
  * filtering, pagination, row-selection as needed.
  * @template TData - Row data type. Cell value types are inferred per column by TanStack.
@@ -1068,7 +1461,7 @@ declare interface DataTableProps<TData> {
     /**
      * Accessible label for the table when no visible caption is shown.
      * Forwarded as `aria-label` on the underlying `<table>` element. Kebab-case
-     * to match the canonical ARIA prop convention used elsewhere in Hex UI.
+     * to match the canonical ARIA prop convention used elsewhere in Hex Core.
      */
     "aria-label"?: string;
 }
@@ -1129,6 +1522,150 @@ declare const datePickerSchema: ComponentSchemaDefinition;
 export { datePickerSchema }
 export { datePickerSchema as datePickerSchema_alias_1 }
 
+declare function Deck({ cards, shuffle, ratingSlot, onCardChange, cardWidth, cardHeight, className, ...rest }: DeckProps): JSX.Element;
+export { Deck }
+export { Deck as Deck_alias_1 }
+
+/**
+ * Deck — a paged sequence of flashcards with optional shuffle, prev/next
+ * navigation, a progress bar, and a slot for per-card SRS rating.
+ * Composes [Flashcard] internally; consumers don't render Flashcard
+ * themselves when they're inside a Deck.
+ *
+ * @example
+ * <Deck
+ *   cards={[
+ *     { id: "1", front: "Term 1", back: "Definition 1" },
+ *     { id: "2", front: "Term 2", back: "Definition 2" },
+ *   ]}
+ *   shuffle
+ *   ratingSlot={(card) => (
+ *     <SpacedRepetition cardId={card.id} onRate={(rating) => save(rating, card.id)} />
+ *   )}
+ * />
+ */
+declare type DeckCard = {
+    id: string;
+    front: React_2.ReactNode;
+    back: React_2.ReactNode;
+};
+export { DeckCard }
+export { DeckCard as DeckCard_alias_1 }
+
+declare interface DeckProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Cards in order. */
+    cards: DeckCard[];
+    /** Initial shuffle. Default false (preserves order). */
+    shuffle?: boolean;
+    /** Optional render slot below the card; passed the current card. Useful for SpacedRepetition. */
+    ratingSlot?: (card: DeckCard) => React_2.ReactNode;
+    /** Fired whenever the active card changes (after shuffle / prev / next). */
+    onCardChange?: (index: number, card: DeckCard) => void;
+    /** Pixel width of the inner Flashcard. Default 360. */
+    cardWidth?: number;
+    /** Pixel height of the inner Flashcard. Default 240. */
+    cardHeight?: number;
+}
+export { DeckProps }
+export { DeckProps as DeckProps_alias_1 }
+
+declare const deckSchema: ComponentSchemaDefinition;
+export { deckSchema }
+export { deckSchema as deckSchema_alias_1 }
+
+declare function Dendrogram({ root, orientation, linkShape, width, height, onLeafClick, className, ...rest }: DendrogramProps): JSX.Element;
+export { Dendrogram }
+export { Dendrogram as Dendrogram_alias_1 }
+
+/**
+ * Clustering tree where every leaf sits at the same depth, regardless of
+ * branch length — the visual signature of taxonomies, phylogenetic trees,
+ * and hierarchical-clustering output. Backed by d3-hierarchy's `cluster`
+ * layout (distinct from `tree`, which packs leaves variably).
+ *
+ * Heavy peer: requires `d3-hierarchy` (~3 KB gzip).
+ *
+ * @example
+ * <Dendrogram
+ *   root={{
+ *     id: "root", label: "Animals",
+ *     children: [
+ *       { id: "mammals", label: "Mammals", children: [
+ *         { id: "cat", label: "Cat" },
+ *         { id: "dog", label: "Dog" },
+ *       ]},
+ *       { id: "birds", label: "Birds", children: [{ id: "robin", label: "Robin" }] },
+ *     ],
+ *   }}
+ * />
+ */
+declare type DendrogramNode = {
+    id: string;
+    label: string;
+    children?: DendrogramNode[];
+};
+export { DendrogramNode }
+export { DendrogramNode as DendrogramNode_alias_1 }
+
+declare interface DendrogramProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Root of the hierarchy. */
+    root: DendrogramNode;
+    /** "horizontal" runs root-to-leaves left→right; "vertical" runs top→bottom. Default "horizontal". */
+    orientation?: "horizontal" | "vertical";
+    /** "step" draws right-angle elbow links (taxonomy aesthetic); "diagonal" uses smooth Bezier. Default "step". */
+    linkShape?: "step" | "diagonal";
+    /** Pixel width of the rendered SVG. Default 600. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 400. */
+    height?: number;
+    /** Fired when a leaf is clicked. */
+    onLeafClick?: (node: DendrogramNode) => void;
+}
+export { DendrogramProps }
+export { DendrogramProps as DendrogramProps_alias_1 }
+
+declare const dendrogramSchema: ComponentSchemaDefinition;
+export { dendrogramSchema }
+export { dendrogramSchema as dendrogramSchema_alias_1 }
+
+/**
+ * Renders a Mermaid diagram from source.
+ * @param props - Source string + theme + lifecycle callbacks
+ * @returns A div containing the rendered SVG
+ */
+declare function Diagram({ children: source, theme, id, onError, className, ...rest }: DiagramProps): JSX.Element;
+export { Diagram }
+export { Diagram as Diagram_alias_1 }
+
+/**
+ * Render a Mermaid diagram from a source string. Useful for AI agent
+ * outputs that emit flowcharts / sequence diagrams / class diagrams in
+ * Markdown — pipe the code-fence body straight in.
+ *
+ * Heavy peer: requires `mermaid` (~700 KB gzip). The hex-core CLI's `add`
+ * flow prompts before installing — this is the largest engine in the
+ * AI Elements set, so the consumer should opt in deliberately.
+ *
+ * @example
+ * <Diagram>{`flowchart LR\n  A --> B\n  B --> C`}</Diagram>
+ *
+ * <Diagram theme="dark" id="agent-flow">{mermaidSource}</Diagram>
+ */
+declare interface DiagramProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
+    /** Mermaid source string. */
+    children: string;
+    /** Light or dark mermaid theme. Default "default" (light). */
+    theme?: "default" | "dark" | "forest" | "neutral";
+    /** Stable ID for the rendered SVG. Required when multiple diagrams share a page; auto-generated when omitted. */
+    id?: string;
+    /** Called on parse/render failure with the engine's message. */
+    onError?: (message: string) => void;
+}
+export { DiagramProps }
+export { DiagramProps as DiagramProps_alias_1 }
+
+export declare const diagramSchema: ComponentSchemaDefinition;
+
 /** Root container controlling open state of a modal dialog. */
 declare const Dialog: React_2.FC<DialogPrimitive.DialogProps>;
 export { Dialog }
@@ -1587,6 +2124,57 @@ declare const fileTreeSchema: ComponentSchemaDefinition;
 export { fileTreeSchema }
 export { fileTreeSchema as fileTreeSchema_alias_1 }
 
+declare function Flashcard({ front, back, defaultFlipped, flipped: flippedProp, onFlipChange, width, height, flipDurationMs, className, ...rest }: FlashcardProps): JSX.Element;
+export { Flashcard }
+export { Flashcard as Flashcard_alias_1 }
+
+/**
+ * Flashcard — front/back card with a 3D flip animation. Click, Enter, or
+ * Space to flip. Pure CSS 3D transform, no animation peer required.
+ *
+ * Headless on content: pass any ReactNode for `front` and `back`. Pair
+ * with Deck (artifacts/deck) for shuffle / next / prev / progress, or
+ * with SpacedRepetition (artifacts/spaced-repetition) for confidence
+ * rating after each reveal.
+ *
+ * @example
+ * <Flashcard
+ *   front={<>What is the capital of France?</>}
+ *   back={<>Paris</>}
+ * />
+ *
+ * <Flashcard
+ *   flipped={isFlipped}
+ *   onFlipChange={setFlipped}
+ *   front={term}
+ *   back={definition}
+ * />
+ */
+declare interface FlashcardProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Content of the front face. */
+    front: React_2.ReactNode;
+    /** Content of the back face. */
+    back: React_2.ReactNode;
+    /** Uncontrolled initial flipped state. Default false. */
+    defaultFlipped?: boolean;
+    /** Controlled flipped state. */
+    flipped?: boolean;
+    /** Fired with the new flipped value when the user toggles. */
+    onFlipChange?: (flipped: boolean) => void;
+    /** Pixel width. Default 360. */
+    width?: number;
+    /** Pixel height. Default 240. */
+    height?: number;
+    /** Flip animation duration in ms. Default 500. Set to 0 to disable the animation entirely. */
+    flipDurationMs?: number;
+}
+export { FlashcardProps }
+export { FlashcardProps as FlashcardProps_alias_1 }
+
+declare const flashcardSchema: ComponentSchemaDefinition;
+export { flashcardSchema }
+export { flashcardSchema as flashcardSchema_alias_1 }
+
 /** Cross-axis `align-items` values for vertical/grid flows (column-like). */
 export declare const flexAlignVariants: {
     readonly start: "items-start";
@@ -1595,6 +2183,79 @@ export declare const flexAlignVariants: {
     readonly stretch: "items-stretch";
 };
 
+declare function Flowchart({ nodes, edges, direction, width, height, nodeWidth, nodeHeight, onNodeClick, className, ...rest }: FlowchartProps): JSX.Element;
+export { Flowchart }
+export { Flowchart as Flowchart_alias_1 }
+
+declare type FlowchartEdge = {
+    source: string;
+    target: string;
+    label?: string;
+};
+export { FlowchartEdge }
+export { FlowchartEdge as FlowchartEdge_alias_1 }
+
+/**
+ * Typed React flowchart. Pass `nodes` (with optional `shape`/`type`) and
+ * `edges`; the component runs a topological-rank auto-layout and renders
+ * top-to-bottom or left-to-right with directional arrows. Pure SVG; no
+ * heavy peer dependency, no DAG-layout library.
+ *
+ * Distinct from `<Diagram>` (Mermaid string DSL) and `<Canvas>` (free-form
+ * ReactFlow). Use Flowchart when you have STRUCTURED data and want a
+ * polished SVG without the bundle cost or DSL of those alternatives.
+ *
+ * @example
+ * <Flowchart
+ *   nodes={[
+ *     { id: "start", label: "Start", shape: "round" },
+ *     { id: "check", label: "Authorized?", shape: "diamond" },
+ *     { id: "ok", label: "Continue" },
+ *     { id: "denied", label: "Reject", shape: "round" },
+ *   ]}
+ *   edges={[
+ *     { source: "start", target: "check" },
+ *     { source: "check", target: "ok", label: "yes" },
+ *     { source: "check", target: "denied", label: "no" },
+ *   ]}
+ * />
+ */
+declare type FlowchartNode = {
+    id: string;
+    label: string;
+    /** Visual shape — "rect" (default), "round" (rounded rect, terminal markers), or "diamond" (decision). */
+    shape?: "rect" | "round" | "diamond";
+    /** Optional explicit rank/depth override; otherwise computed via topological sort. */
+    rank?: number;
+};
+export { FlowchartNode }
+export { FlowchartNode as FlowchartNode_alias_1 }
+
+declare interface FlowchartProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Node definitions. Every edge's `source`/`target` MUST match an `id` here. */
+    nodes: FlowchartNode[];
+    /** Directional edges. The graph MUST be a DAG (no cycles). */
+    edges: FlowchartEdge[];
+    /** Layout direction. Default "vertical" (top-to-bottom). */
+    direction?: "vertical" | "horizontal";
+    /** Pixel width of the rendered SVG. Default 720. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 480. */
+    height?: number;
+    /** Pixel width of each node. Default 140. */
+    nodeWidth?: number;
+    /** Pixel height of each node. Default 48. */
+    nodeHeight?: number;
+    /** Fired when a node is clicked. */
+    onNodeClick?: (node: FlowchartNode) => void;
+}
+export { FlowchartProps }
+export { FlowchartProps as FlowchartProps_alias_1 }
+
+declare const flowchartSchema: ComponentSchemaDefinition;
+export { flowchartSchema }
+export { flowchartSchema as flowchartSchema_alias_1 }
+
 /** Root form provider. Wraps react-hook-form's FormProvider. */
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React_2.JSX.Element;
 export { Form }
@@ -1648,6 +2309,112 @@ declare const formSchema: ComponentSchemaDefinition;
 export { formSchema }
 export { formSchema as formSchema_alias_1 }
 
+declare function Funnel({ stages, width, height, gap, showConversion, onStageClick, className, ...rest }: FunnelProps): JSX.Element;
+export { Funnel }
+export { Funnel as Funnel_alias_1 }
+
+declare interface FunnelProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Ordered top-to-bottom stages. Values must be non-negative. */
+    stages: FunnelStage[];
+    /** Pixel width of the rendered SVG. Default 480. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 360. */
+    height?: number;
+    /** Pixel gap between stages. Default 4. */
+    gap?: number;
+    /** Show conversion-rate annotations between stages. Default true. */
+    showConversion?: boolean;
+    /** Fired when a stage is clicked. */
+    onStageClick?: (stage: FunnelStage) => void;
+}
+export { FunnelProps }
+export { FunnelProps as FunnelProps_alias_1 }
+
+declare const funnelSchema: ComponentSchemaDefinition;
+export { funnelSchema }
+export { funnelSchema as funnelSchema_alias_1 }
+
+/**
+ * Conversion funnel — a vertical stack of trapezoidal stages whose width
+ * is proportional to each stage's value. Pure SVG; no heavy peer
+ * dependency. Pair with `<Sankey>` when stage-to-stage flow detail
+ * matters; use Funnel when the conversion drop-off itself is the
+ * message.
+ *
+ * @example
+ * <Funnel
+ *   stages={[
+ *     { id: "visit", label: "Visited", value: 10000 },
+ *     { id: "signup", label: "Signed up", value: 1200 },
+ *     { id: "active", label: "Active", value: 480 },
+ *     { id: "paid", label: "Paid", value: 95 },
+ *   ]}
+ * />
+ */
+declare type FunnelStage = {
+    id: string;
+    label: string;
+    value: number;
+};
+export { FunnelStage }
+export { FunnelStage as FunnelStage_alias_1 }
+
+declare function Gantt({ tasks, width, rowHeight, labelMargin, tickCount, onTaskClick, className, ...rest }: GanttProps): JSX.Element;
+export { Gantt }
+export { Gantt as Gantt_alias_1 }
+
+declare interface GanttProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Tasks in display order (rows top-to-bottom). */
+    tasks: GanttTask[];
+    /** Pixel width of the rendered SVG. Default 800. */
+    width?: number;
+    /** Pixel height of each task row. Default 32. */
+    rowHeight?: number;
+    /** Pixel reserved on the left for task labels. Default 140. */
+    labelMargin?: number;
+    /** Number of axis ticks to show. Default 6. */
+    tickCount?: number;
+    /** Fired when a task bar is clicked. */
+    onTaskClick?: (task: GanttTask) => void;
+}
+export { GanttProps }
+export { GanttProps as GanttProps_alias_1 }
+
+declare const ganttSchema: ComponentSchemaDefinition;
+export { ganttSchema }
+export { ganttSchema as ganttSchema_alias_1 }
+
+/**
+ * Gantt chart — tasks as horizontal bars across a time axis, with
+ * optional dependency arrows and progress fills. Pure SVG; no heavy
+ * peer dependency.
+ *
+ * Distinct from TimeAxis (point events) and Sequence (actor messages):
+ * Gantt encodes DURATION (start → end) per task and supports task-to-
+ * task dependency arrows.
+ *
+ * @example
+ * <Gantt
+ *   tasks={[
+ *     { id: "design", label: "Design", start: "2025-01-01", end: "2025-01-15", progress: 1 },
+ *     { id: "build", label: "Build", start: "2025-01-10", end: "2025-02-20", progress: 0.6, dependencies: ["design"] },
+ *     { id: "ship", label: "Ship", start: "2025-02-15", end: "2025-02-28", dependencies: ["build"] },
+ *   ]}
+ * />
+ */
+declare type GanttTask = {
+    id: string;
+    label: string;
+    start: Date | string | number;
+    end: Date | string | number;
+    /** Optional progress 0..1; renders as a filled portion of the bar. */
+    progress?: number;
+    /** Optional list of task ids this task depends on; arrow drawn from each. */
+    dependencies?: string[];
+};
+export { GanttTask }
+export { GanttTask as GanttTask_alias_1 }
+
 /** Gap scale bound to `--gap-*` tokens. Used by Stack, Cluster, Grid. */
 export declare const gapVariants: {
     readonly xs: "gap-[var(--gap-xs,0.25rem)]";
@@ -1758,7 +2525,7 @@ export { hslToRgb as hslToRgb_alias_1 }
  * `@hex-core/tokens` themes (`H S% L%`, e.g. `"240 5.9% 10%"` — no `hsl()`
  * wrapper, no commas).
  *
- * The triplet is the round-trip-safe serialization for Hex UI: tokens flow
+ * The triplet is the round-trip-safe serialization for Hex Core: tokens flow
  * triplet → CSS `hsl(var(--token))` → rendered color, and the ColorPicker
  * component edits triplets directly. Hex/RGB conversions are display
  * adapters, not the source of truth.
@@ -1781,6 +2548,27 @@ declare function hslTripletToHex(triplet: string): string;
 export { hslTripletToHex }
 export { hslTripletToHex as hslTripletToHex_alias_1 }
 
+declare function ImageOcclusion({ src, alt, regions, onRegionReveal, className, ...rest }: ImageOcclusionProps): JSX.Element;
+export { ImageOcclusion }
+export { ImageOcclusion as ImageOcclusion_alias_1 }
+
+declare interface ImageOcclusionProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Image source URL. */
+    src: string;
+    /** Alt text for the underlying image. */
+    alt: string;
+    /** Rectangular regions to hide on top of the image. */
+    regions: OcclusionRegion[];
+    /** Fired with the region id when a region is revealed (not when hidden again). */
+    onRegionReveal?: (id: string) => void;
+}
+export { ImageOcclusionProps }
+export { ImageOcclusionProps as ImageOcclusionProps_alias_1 }
+
+declare const imageOcclusionSchema: ComponentSchemaDefinition;
+export { imageOcclusionSchema }
+export { imageOcclusionSchema as imageOcclusionSchema_alias_1 }
+
 declare const Input: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<HTMLInputElement>>;
 export { Input }
 export { Input as Input_alias_1 }
@@ -1980,6 +2768,66 @@ declare const markdownSchema: ComponentSchemaDefinition;
 export { markdownSchema }
 export { markdownSchema as markdownSchema_alias_1 }
 
+declare function Matrix({ nodes, matrix, size, labelMargin, showValues, onCellHover, onCellClick, className, ...rest }: MatrixProps): JSX.Element;
+export { Matrix }
+export { Matrix as Matrix_alias_1 }
+
+/**
+ * Adjacency-matrix diagram. Square grid where cell (row i, col j)
+ * encodes the relationship from node i to node j by color intensity.
+ * Pure SVG; no heavy peer dependency. Best for dense graphs where
+ * node-link diagrams turn into "hairballs" — Matrix scales gracefully
+ * to hundreds of nodes if the SVG is sized to match.
+ *
+ * @example
+ * <Matrix
+ *   nodes={["A", "B", "C", "D"].map((id) => ({ id, label: id }))}
+ *   matrix={[
+ *     [0, 5, 8, 1],
+ *     [3, 0, 2, 4],
+ *     [6, 0, 0, 7],
+ *     [2, 1, 9, 0],
+ *   ]}
+ * />
+ */
+declare type MatrixNode = {
+    id: string;
+    label: string;
+};
+export { MatrixNode }
+export { MatrixNode as MatrixNode_alias_1 }
+
+declare interface MatrixProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Nodes — rows AND columns. Order matches `matrix` rows/columns. */
+    nodes: MatrixNode[];
+    /** Square N×N matrix of values. matrix[i][j] = relationship from node i to node j. */
+    matrix: number[][];
+    /** Pixel size of the rendered SVG (it's square). Default 480. */
+    size?: number;
+    /** Pixel reserved for row/column labels along the edges. Default 80. */
+    labelMargin?: number;
+    /** Show numeric values inside cells when the cell is large enough. Default true. */
+    showValues?: boolean;
+    /** Fired when a cell is hovered (or hover ends, with `null`). */
+    onCellHover?: (cell: {
+        row: MatrixNode;
+        col: MatrixNode;
+        value: number;
+    } | null) => void;
+    /** Fired when a cell is clicked. */
+    onCellClick?: (cell: {
+        row: MatrixNode;
+        col: MatrixNode;
+        value: number;
+    }) => void;
+}
+export { MatrixProps }
+export { MatrixProps as MatrixProps_alias_1 }
+
+declare const matrixSchema: ComponentSchemaDefinition;
+export { matrixSchema }
+export { matrixSchema as matrixSchema_alias_1 }
+
 /** Top-level menu bar (File / Edit / View style). */
 declare const Menubar: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 export { Menubar }
@@ -2157,6 +3005,60 @@ declare const messageVariants: (props?: ({
 export { messageVariants }
 export { messageVariants as messageVariants_alias_1 }
 
+declare function MindMap({ root, orientation, width, height, onNodeClick, className, ...rest }: MindMapProps): JSX.Element;
+export { MindMap }
+export { MindMap as MindMap_alias_1 }
+
+/**
+ * Typed React MindMap. Pass a hierarchical `root` node and the component lays
+ * the children out radially (or horizontally) using d3-hierarchy's tree
+ * layout. No Mermaid string parsing — the data shape IS the API, so consumers
+ * can build mind maps from typed application state instead of templating a
+ * DSL.
+ *
+ * Heavy peer: requires `d3-hierarchy` (~3 KB gzip). The hex-core CLI's `add`
+ * flow prompts before installing.
+ *
+ * @example
+ * <MindMap
+ *   root={{
+ *     id: "root",
+ *     label: "Project",
+ *     children: [
+ *       { id: "ui", label: "UI", children: [{ id: "btn", label: "Button" }] },
+ *       { id: "api", label: "API" },
+ *     ],
+ *   }}
+ * />
+ */
+declare type MindMapNode = {
+    id: string;
+    label: string;
+    children?: MindMapNode[];
+    data?: unknown;
+};
+export { MindMapNode }
+export { MindMapNode as MindMapNode_alias_1 }
+
+declare interface MindMapProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Root of the hierarchy. */
+    root: MindMapNode;
+    /** "radial" lays children around the root; "horizontal" runs left→right. Default "radial". */
+    orientation?: "radial" | "horizontal";
+    /** Pixel width of the rendered SVG. Default 600. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 400. */
+    height?: number;
+    /** Fired when a node is clicked. */
+    onNodeClick?: (node: MindMapNode) => void;
+}
+export { MindMapProps }
+export { MindMapProps as MindMapProps_alias_1 }
+
+declare const mindMapSchema: ComponentSchemaDefinition;
+export { mindMapSchema }
+export { mindMapSchema as mindMapSchema_alias_1 }
+
 /**
  * Searchable multi-select input built on Command + Popover.
  *
@@ -2266,6 +3168,96 @@ declare const NavigationMenuViewport: React_2.ForwardRefExoticComponent<Omit<Nav
 export { NavigationMenuViewport }
 export { NavigationMenuViewport as NavigationMenuViewport_alias_1 }
 
+/**
+ * Image occlusion — image with rectangular regions hidden behind opaque
+ * overlays. Click / Enter / Space on a region reveals what's underneath.
+ * Coordinates are 0–1 fractions of the rendered image so the layout
+ * stays correct at any size. Pure HTML; no heavy peer.
+ *
+ * Common for anatomy diagrams, geographic maps, code snippets — any
+ * visual where labels or sub-regions are the recall target.
+ *
+ * @example
+ * <ImageOcclusion
+ *   src="/anatomy/heart.png"
+ *   alt="Cross-section of a human heart"
+ *   regions={[
+ *     { id: "lv", x: 0.42, y: 0.55, width: 0.18, height: 0.22, label: "Left ventricle" },
+ *     { id: "ra", x: 0.58, y: 0.20, width: 0.16, height: 0.18, label: "Right atrium" },
+ *   ]}
+ * />
+ */
+declare type OcclusionRegion = {
+    id: string;
+    /** All coords are 0–1 fractions of the rendered image. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label?: string;
+};
+export { OcclusionRegion }
+export { OcclusionRegion as OcclusionRegion_alias_1 }
+
+declare function OrgChart({ root, collapsible, defaultExpandedDepth, nodeWidth, nodeHeight, width, height, onNodeClick, className, ...rest }: OrgChartProps): JSX.Element;
+export { OrgChart }
+export { OrgChart as OrgChart_alias_1 }
+
+declare interface OrgChartProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Root of the org hierarchy. */
+    root: OrgNode;
+    /** Allow nodes to be clicked to collapse their subtree. Default true. */
+    collapsible?: boolean;
+    /** All nodes deeper than this depth render collapsed by default. Default Infinity (all expanded). */
+    defaultExpandedDepth?: number;
+    /** Pixel width of each node card. Default 180. */
+    nodeWidth?: number;
+    /** Pixel height of each node card. Default 64. */
+    nodeHeight?: number;
+    /** Pixel width of the rendered SVG. Default 800. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 480. */
+    height?: number;
+    /** Fired when a node is clicked. Fires before any internal collapse toggle. */
+    onNodeClick?: (node: OrgNode) => void;
+}
+export { OrgChartProps }
+export { OrgChartProps as OrgChartProps_alias_1 }
+
+declare const orgChartSchema: ComponentSchemaDefinition;
+export { orgChartSchema }
+export { orgChartSchema as orgChartSchema_alias_1 }
+
+/**
+ * Top-down organizational chart. Pass a hierarchy of people / teams / units
+ * and the component lays them out vertically using d3-hierarchy's tree
+ * layout. Nodes can be collapsed by clicking; collapsed branches contribute
+ * a "+N" badge but no further layout.
+ *
+ * Heavy peer: requires `d3-hierarchy` (~3 KB gzip).
+ *
+ * @example
+ * <OrgChart
+ *   root={{
+ *     id: "ceo",
+ *     label: "Jane Doe",
+ *     subtitle: "CEO",
+ *     children: [
+ *       { id: "cto", label: "Bob Smith", subtitle: "CTO" },
+ *     ],
+ *   }}
+ * />
+ */
+declare type OrgNode = {
+    id: string;
+    label: string;
+    subtitle?: string;
+    avatarUrl?: string;
+    children?: OrgNode[];
+};
+export { OrgNode }
+export { OrgNode as OrgNode_alias_1 }
+
 /**
  * Root nav landmark for pagination controls.
  * @returns A centered nav element with aria-label='pagination'
@@ -2341,6 +3333,15 @@ declare function parseHslTriplet(triplet: string): HslTriplet;
 export { parseHslTriplet }
 export { parseHslTriplet as parseHslTriplet_alias_1 }
 
+/**
+ * Return the chart hue at a stable index. Cycles modulo `CHART_PALETTE.length`
+ * so the caller doesn't have to range-check.
+ *
+ * @param index - Integer key (node index, leaf index, depth-1 ancestor index, …).
+ * @returns A `hsl(var(...))` string suitable for SVG `fill` / `stroke`.
+ */
+export declare function pickChartHue(index: number): string;
+
 /** Root container for a popover. */
 declare const Popover: React_2.FC<PopoverPrimitive.PopoverProps>;
 export { Popover }
@@ -2377,6 +3378,119 @@ declare const progressSchema: ComponentSchemaDefinition;
 export { progressSchema }
 export { progressSchema as progressSchema_alias_1 }
 
+declare function Pyramid({ tiers, shape, width, height, gap, showValues, onTierClick, className, ...rest }: PyramidProps): JSX.Element;
+export { Pyramid }
+export { Pyramid as Pyramid_alias_1 }
+
+declare interface PyramidProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Ordered top-to-bottom tiers. The first entry is the apex. */
+    tiers: PyramidTier[];
+    /** Tier-width direction. "widening" grows toward the base; "narrowing" shrinks toward it. Default "widening". */
+    shape?: "widening" | "narrowing";
+    /** Pixel width of the rendered SVG. Default 480. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 360. */
+    height?: number;
+    /** Pixel gap between tiers. Default 4. */
+    gap?: number;
+    /** Show each tier's `value` next to its label when present. Default true. */
+    showValues?: boolean;
+    /** Fired when a tier is clicked. */
+    onTierClick?: (tier: PyramidTier) => void;
+}
+export { PyramidProps }
+export { PyramidProps as PyramidProps_alias_1 }
+
+declare const pyramidSchema: ComponentSchemaDefinition;
+export { pyramidSchema }
+export { pyramidSchema as pyramidSchema_alias_1 }
+
+/**
+ * Ranked-tier pyramid. Tiers stack top-to-bottom; each tier's width can
+ * either grow toward the base ("widening" — Maslow's hierarchy, fewer
+ * elites at the top) or shrink ("narrowing" — population pyramid by age).
+ * Pure SVG; no heavy peer dependency.
+ *
+ * Distinct from Funnel: Pyramid encodes RANK (each tier is a distinct
+ * categorical level), Funnel encodes FLOW (each stage is a subset of the
+ * previous, with a conversion ratio).
+ *
+ * @example
+ * <Pyramid
+ *   tiers={[
+ *     { id: "self-actualization", label: "Self-actualization" },
+ *     { id: "esteem", label: "Esteem" },
+ *     { id: "love", label: "Love & belonging" },
+ *     { id: "safety", label: "Safety" },
+ *     { id: "physiological", label: "Physiological" },
+ *   ]}
+ *   shape="widening"
+ * />
+ */
+declare type PyramidTier = {
+    id: string;
+    label: string;
+    value?: number;
+};
+export { PyramidTier }
+export { PyramidTier as PyramidTier_alias_1 }
+
+declare function Quiz({ question, options, selectionMode, submitLabel, onAnswer, className, ...rest }: QuizProps): JSX.Element;
+export { Quiz }
+export { Quiz as Quiz_alias_1 }
+
+/**
+ * Single-question multiple-choice quiz. Renders the question + options
+ * as native radio (single-select) or checkbox (multi-select) inputs;
+ * after Submit, each option flips to data-state="correct|incorrect|missed"
+ * so consumers can theme right / wrong / unselected-but-correct
+ * differently. Pure HTML; no heavy peer.
+ *
+ * Headless on grading: the schema honors what the consumer passes for
+ * `correct`. Reset between runs by clearing the `selectedIds` you
+ * forwarded as `value` (controlled) or unmounting (uncontrolled).
+ *
+ * @example
+ * <Quiz
+ *   question="Which planets are gas giants?"
+ *   selectionMode="multi"
+ *   options={[
+ *     { id: "j", label: "Jupiter", correct: true },
+ *     { id: "v", label: "Venus" },
+ *     { id: "s", label: "Saturn", correct: true, explanation: "Saturn's atmosphere is mostly hydrogen and helium." },
+ *     { id: "m", label: "Mercury" },
+ *   ]}
+ *   onAnswer={(ids, allCorrect) => track(ids, allCorrect)}
+ * />
+ */
+declare type QuizOption = {
+    id: string;
+    label: React_2.ReactNode;
+    correct?: boolean;
+    explanation?: React_2.ReactNode;
+};
+export { QuizOption }
+export { QuizOption as QuizOption_alias_1 }
+
+declare interface QuizProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Question prompt (any ReactNode — supports rich content). */
+    question: React_2.ReactNode;
+    /** Options the learner picks from. */
+    options: QuizOption[];
+    /** "single" — radio inputs (one selection). "multi" — checkboxes. Default "single". */
+    selectionMode?: "single" | "multi";
+    /** Custom Submit button label. Default "Submit". */
+    submitLabel?: string;
+    /** Fired with the selected option ids and a boolean indicating whether the entire selection matches the correct set. */
+    onAnswer?: (selectedIds: string[], allCorrect: boolean) => void;
+}
+export { QuizProps }
+export { QuizProps as QuizProps_alias_1 }
+
+declare const quizSchema: ComponentSchemaDefinition;
+export { quizSchema }
+export { quizSchema as quizSchema_alias_1 }
+
 /** Root container for a radio group. Pair with one or more RadioGroupItem. */
 declare const RadioGroup: React_2.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 export { RadioGroup }
@@ -2500,6 +3614,75 @@ export { Role }
 export { Role as Role_alias_1 }
 export { Role as Role_alias_2 }
 
+declare function Sankey({ nodes, links, width, height, nodeAlign, nodeWidth, nodePadding, onLinkHover, onNodeClick, className, ...rest }: SankeyProps): JSX.Element;
+export { Sankey }
+export { Sankey as Sankey_alias_1 }
+
+declare type SankeyLink = {
+    source: string;
+    target: string;
+    value: number;
+};
+export { SankeyLink }
+export { SankeyLink as SankeyLink_alias_1 }
+
+/**
+ * Weighted-flow diagram. Nodes are arranged in horizontal columns by
+ * topological depth; links between them are drawn as smooth curves whose
+ * thickness encodes the flow value. Common for funnels, energy/material
+ * flows, money flows, or any bipartite/multipartite "value moving from A
+ * to B" visualization.
+ *
+ * Heavy peer: requires `d3-sankey` (~6 KB gzip; pulls in a small slice of
+ * d3-shape too). The hex-core CLI's `add` flow prompts before installing.
+ *
+ * @example
+ * <Sankey
+ *   nodes={[
+ *     { id: "src-a", label: "Source A" },
+ *     { id: "src-b", label: "Source B" },
+ *     { id: "sink", label: "Sink" },
+ *   ]}
+ *   links={[
+ *     { source: "src-a", target: "sink", value: 30 },
+ *     { source: "src-b", target: "sink", value: 10 },
+ *   ]}
+ * />
+ */
+declare type SankeyNode = {
+    id: string;
+    label: string;
+};
+export { SankeyNode }
+export { SankeyNode as SankeyNode_alias_1 }
+
+declare interface SankeyProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Node definitions. Every link's `source` and `target` MUST match an `id` in this array. */
+    nodes: SankeyNode[];
+    /** Weighted links between nodes. Values must be positive. */
+    links: SankeyLink[];
+    /** Pixel width of the rendered SVG. Default 720. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 420. */
+    height?: number;
+    /** How nodes within a column are aligned. Default "justify". */
+    nodeAlign?: "left" | "right" | "center" | "justify";
+    /** Pixel width of each node rectangle. Default 12. */
+    nodeWidth?: number;
+    /** Vertical pixel gap between nodes in the same column. Default 8. */
+    nodePadding?: number;
+    /** Fired when a user hovers a link (or hover ends, with `null`). */
+    onLinkHover?: (link: SankeyLink | null) => void;
+    /** Fired when a node is clicked. */
+    onNodeClick?: (node: SankeyNode) => void;
+}
+export { SankeyProps }
+export { SankeyProps as SankeyProps_alias_1 }
+
+declare const sankeySchema: ComponentSchemaDefinition;
+export { sankeySchema }
+export { sankeySchema as sankeySchema_alias_1 }
+
 /** A scrollable area with custom-styled scrollbars. Content must be explicitly sized. */
 declare const ScrollArea: React_2.ForwardRefExoticComponent<ScrollAreaProps & React_2.RefAttributes<HTMLDivElement>>;
 export { ScrollArea }
@@ -2584,6 +3767,74 @@ declare const separatorSchema: ComponentSchemaDefinition;
 export { separatorSchema }
 export { separatorSchema as separatorSchema_alias_1 }
 
+declare function Sequence({ actors, messages, width, headerHeight, messageGap, onActorClick, onMessageClick, className, ...rest }: SequenceProps): JSX.Element;
+export { Sequence }
+export { Sequence as Sequence_alias_1 }
+
+/**
+ * UML-style sequence diagram. Actors render as columns with vertical
+ * lifelines; messages render as horizontal arrows between actors,
+ * stacked top-to-bottom in declaration order. Pure SVG; no heavy peer
+ * dependency.
+ *
+ * Distinct from Flowchart (DAG of steps) and TimeAxis (events on a
+ * time axis): Sequence encodes WHO talks to WHO and IN WHAT ORDER.
+ *
+ * @example
+ * <Sequence
+ *   actors={[
+ *     { id: "user", label: "User" },
+ *     { id: "api", label: "API" },
+ *     { id: "db", label: "DB" },
+ *   ]}
+ *   messages={[
+ *     { from: "user", to: "api", label: "POST /signup" },
+ *     { from: "api", to: "db", label: "INSERT user" },
+ *     { from: "db", to: "api", label: "ok", type: "return" },
+ *     { from: "api", to: "user", label: "201 Created", type: "return" },
+ *   ]}
+ * />
+ */
+declare type SequenceActor = {
+    id: string;
+    label: string;
+};
+export { SequenceActor }
+export { SequenceActor as SequenceActor_alias_1 }
+
+declare type SequenceMessage = {
+    from: string;
+    to: string;
+    label?: string;
+    /** "sync" (default) draws a solid arrow; "async" draws a thinner half-head; "return" is dashed. */
+    type?: "sync" | "async" | "return";
+};
+export { SequenceMessage }
+export { SequenceMessage as SequenceMessage_alias_1 }
+
+declare interface SequenceProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Actors in display order (columns left-to-right). */
+    actors: SequenceActor[];
+    /** Messages in chronological order (top-to-bottom). */
+    messages: SequenceMessage[];
+    /** Pixel width of the rendered SVG. Default 720. */
+    width?: number;
+    /** Pixel height of each actor header. Default 40. */
+    headerHeight?: number;
+    /** Pixel vertical gap between consecutive messages. Default 36. */
+    messageGap?: number;
+    /** Fired when an actor header is clicked. */
+    onActorClick?: (actor: SequenceActor) => void;
+    /** Fired when a message arrow is clicked. */
+    onMessageClick?: (message: SequenceMessage) => void;
+}
+export { SequenceProps }
+export { SequenceProps as SequenceProps_alias_1 }
+
+declare const sequenceSchema: ComponentSchemaDefinition;
+export { sequenceSchema }
+export { sequenceSchema as sequenceSchema_alias_1 }
+
 /** Root container controlling open state of a side sheet. */
 declare const Sheet: React_2.FC<DialogPrimitive.DialogProps>;
 export { Sheet }
@@ -2786,6 +4037,25 @@ declare const sonnerSchema: ComponentSchemaDefinition;
 export { sonnerSchema }
 export { sonnerSchema as sonnerSchema_alias_1 }
 
+declare function SpacedRepetition({ cardId, onRate, labels, className, ...rest }: SpacedRepetitionProps): JSX.Element;
+export { SpacedRepetition }
+export { SpacedRepetition as SpacedRepetition_alias_1 }
+
+declare interface SpacedRepetitionProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children" | "onRate"> {
+    /** Identifier of the card being rated; passed back to onRate. */
+    cardId: string;
+    /** Called with (rating, cardId) when the learner picks a button. */
+    onRate: (rating: SrsRating, cardId: string) => void;
+    /** Override the default button labels. Defaults: "Again" / "Hard" / "Good" / "Easy". */
+    labels?: Partial<Record<SrsRating, string>>;
+}
+export { SpacedRepetitionProps }
+export { SpacedRepetitionProps as SpacedRepetitionProps_alias_1 }
+
+declare const spacedRepetitionSchema: ComponentSchemaDefinition;
+export { spacedRepetitionSchema }
+export { spacedRepetitionSchema as spacedRepetitionSchema_alias_1 }
+
 /**
  * A declarative whitespace block. Use when you want to insert space between two
  * siblings without relying on margin or gap (e.g. inside a flex container that
@@ -2866,6 +4136,29 @@ export { SpeechRecognitionProps as SpeechRecognitionProps_alias_1 }
 
 export declare const speechRecognitionSchema: ComponentSchemaDefinition;
 
+/**
+ * Anki-style confidence rating row. Four buttons (Again / Hard / Good /
+ * Easy) emit a rating; the consumer applies SM-2 / FSRS / hand-rolled
+ * scheduling to decide when to surface the card again. Headless on
+ * scheduling — this primitive doesn't compute intervals, it just
+ * captures the user's signal.
+ *
+ * @example
+ * <SpacedRepetition
+ *   cardId={card.id}
+ *   onRate={(rating, id) => scheduler.update(id, rating)}
+ * />
+ *
+ * <SpacedRepetition
+ *   cardId={card.id}
+ *   onRate={onRate}
+ *   labels={{ again: "Forgot", hard: "Tough", good: "Got it", easy: "Easy" }}
+ * />
+ */
+declare type SrsRating = "again" | "hard" | "good" | "easy";
+export { SrsRating }
+export { SrsRating as SrsRating_alias_1 }
+
 /**
  * Vertical flex flow with token-bound gap. Children stack top-to-bottom.
  * @param props - Stack props including `gap`, `align`, and `justify` variant keys.
@@ -3003,6 +4296,60 @@ declare const suggestionSchema: ComponentSchemaDefinition;
 export { suggestionSchema }
 export { suggestionSchema as suggestionSchema_alias_1 }
 
+declare function Sunburst({ root, drillable, centerLabel, size, onSegmentClick, className, ...rest }: SunburstProps): JSX.Element;
+export { Sunburst }
+export { Sunburst as Sunburst_alias_1 }
+
+/**
+ * Radial hierarchy by value. Each ring out from the center is a deeper level
+ * of the tree; each segment's angular extent is proportional to its summed
+ * value. Click any segment to drill into it (the clicked segment becomes the
+ * new center); click the center to zoom back out.
+ *
+ * Heavy peers: requires `d3-hierarchy` and `d3-shape` (~3 KB + ~6 KB gzip).
+ *
+ * @example
+ * <Sunburst
+ *   root={{
+ *     id: "root", label: "Total",
+ *     children: [
+ *       { id: "a", label: "A", value: 60, children: [
+ *         { id: "a1", label: "A1", value: 40 },
+ *         { id: "a2", label: "A2", value: 20 },
+ *       ]},
+ *       { id: "b", label: "B", value: 30 },
+ *     ],
+ *   }}
+ * />
+ */
+declare type SunburstNode = {
+    id: string;
+    label: string;
+    value?: number;
+    children?: SunburstNode[];
+};
+export { SunburstNode }
+export { SunburstNode as SunburstNode_alias_1 }
+
+declare interface SunburstProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Root of the hierarchy. Leaves require a positive `value`; internal nodes are summed. */
+    root: SunburstNode;
+    /** Allow a click on a segment to zoom into it as the new center. Default true. */
+    drillable?: boolean;
+    /** Optional content rendered at the SVG center (e.g. total). */
+    centerLabel?: React_2.ReactNode;
+    /** Pixel size of the rendered SVG (it's square). Default 400. */
+    size?: number;
+    /** Fired when a segment is clicked. Fires before any internal drill. */
+    onSegmentClick?: (node: SunburstNode) => void;
+}
+export { SunburstProps }
+export { SunburstProps as SunburstProps_alias_1 }
+
+declare const sunburstSchema: ComponentSchemaDefinition;
+export { sunburstSchema }
+export { sunburstSchema as sunburstSchema_alias_1 }
+
 /**
  * Languages we surface in the prop type. Plain literal union of real
  * Shiki grammar IDs — kept literal (not `Extract<BundledLanguage, …>`)
@@ -3155,13 +4502,69 @@ declare const tagVariants: (props?: ({
 export { tagVariants }
 export { tagVariants as tagVariants_alias_1 }
 
+/**
+ * Renders an xterm.js terminal display.
+ * @param props - Terminal output + input handler + display options
+ * @returns A div containing the xterm grid
+ */
+declare function Terminal({ output, onInput, cols, rows, theme, cursorBlink, disableInput, className, ...rest }: TerminalProps): JSX.Element;
+export { Terminal }
+export { Terminal as Terminal_alias_1 }
+
+/**
+ * Headless terminal display backed by xterm.js. Renders an xterm grid
+ * inside a div the consumer styles. No PTY, no shell — the consumer
+ * owns the data-flow:
+ *
+ *   - Pass `output` (string or string[]) to write to the display. Each
+ *     change is diffed against the prior render and only the new tail
+ *     is `term.write()`-ed, so feeding a streaming buffer doesn't redraw.
+ *   - Pass `onInput` to receive bytes the user typed. Wire it to a
+ *     WebSocket / IPC / fetch stream — terminal doesn't care.
+ *
+ * Heavy peer: requires `@xterm/xterm` (~150 KB gzip). The hex-core CLI's
+ * `add` flow prompts before installing.
+ *
+ * @example
+ * <Terminal
+ *   output={["$ ls\r\n", "package.json  src/\r\n", "$ "]}
+ *   onInput={(data) => ws.send(data)}
+ *   rows={24}
+ *   cols={80}
+ * />
+ */
+declare interface TerminalProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "children" | "onInput"> {
+    /**
+     * Bytes to display. String is written verbatim; string[] is joined.
+     * On change, only the suffix beyond the prior render is emitted, so
+     * appending to a streaming buffer is O(delta).
+     */
+    output?: string | string[];
+    /** Receive bytes the user typed (incl. control sequences). */
+    onInput?: (data: string) => void;
+    /** Initial cols. xterm allows runtime resize via fit-addon (not bundled). Default 80. */
+    cols?: number;
+    /** Initial rows. Default 24. */
+    rows?: number;
+    /** Theme tokens — defaults to neutral light/dark via CSS vars. */
+    theme?: "dark" | "light";
+    /** Enable cursor blink. Default true. */
+    cursorBlink?: boolean;
+    /** Whether the user can type into the terminal. Default true. */
+    disableInput?: boolean;
+}
+export { TerminalProps }
+export { TerminalProps as TerminalProps_alias_1 }
+
+export declare const terminalSchema: ComponentSchemaDefinition;
+
 declare const Textarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea }
 export { Textarea as Textarea_alias_1 }
 
 /**
  * A styled multi-line text input with smooth focus transitions and shadow effects.
- * Extends the native HTML textarea element with Hex UI styling.
+ * Extends the native HTML textarea element with Hex Core styling.
  */
 declare type TextareaProps = React_2.TextareaHTMLAttributes<HTMLTextAreaElement>;
 export { TextareaProps }
@@ -3171,6 +4574,65 @@ declare const textareaSchema: ComponentSchemaDefinition;
 export { textareaSchema }
 export { textareaSchema as textareaSchema_alias_1 }
 
+declare function TimeAxis({ events, start, end, width, height, tickCount, onEventClick, className, ...rest }: TimeAxisProps): JSX.Element;
+export { TimeAxis }
+export { TimeAxis as TimeAxis_alias_1 }
+
+/**
+ * Events plotted along a horizontal time axis. Pure SVG; no heavy peer
+ * dependency. Distinct from the existing `<Timeline>` component in
+ * `components/timeline` — that one is an event-list with vertical
+ * status markers; this one is a CHART with a real time axis where
+ * spacing reflects elapsed time.
+ *
+ * Use TimeAxis when the *gap between events* is the message (release
+ * cadence, incident frequency, sparse-then-dense patterns). Use
+ * Timeline when the order of events is the message but the absolute
+ * dates are secondary.
+ *
+ * @example
+ * <TimeAxis
+ *   events={[
+ *     { id: "v1", label: "v1.0", date: "2025-01-15" },
+ *     { id: "v2", label: "v2.0", date: "2025-04-20" },
+ *     { id: "v3", label: "v3.0", date: "2025-09-10" },
+ *   ]}
+ * />
+ */
+declare type TimeAxisEvent = {
+    id: string;
+    label: string;
+    /** Accepts Date, ISO string, or epoch ms. */
+    date: Date | string | number;
+    /** Optional category — events with the same `category` share a row band. */
+    category?: string;
+};
+export { TimeAxisEvent }
+export { TimeAxisEvent as TimeAxisEvent_alias_1 }
+
+declare interface TimeAxisProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children" | "start" | "end"> {
+    /** Events to plot. Order doesn't matter — positions come from `date`. */
+    events: TimeAxisEvent[];
+    /** Optional explicit axis start. Auto-derived from `events` if omitted. */
+    start?: Date | string | number;
+    /** Optional explicit axis end. Auto-derived from `events` if omitted. */
+    end?: Date | string | number;
+    /** Pixel width of the rendered SVG. Default 720. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 200. */
+    height?: number;
+    /** Number of axis ticks to show. Default 6. */
+    tickCount?: number;
+    /** Fired when an event is clicked. */
+    onEventClick?: (event: TimeAxisEvent) => void;
+}
+export { TimeAxisProps }
+export { TimeAxisProps as TimeAxisProps_alias_1 }
+
+declare const timeAxisSchema: ComponentSchemaDefinition;
+export { timeAxisSchema }
+export { timeAxisSchema as timeAxisSchema_alias_1 }
+
 /**
  * Vertical chronological event feed (activity log, audit trail, release notes).
  * Pure semantic HTML — `<ol>` of `<li>`. Events expose an optional icon, a
@@ -3270,7 +4732,7 @@ export { toast as toast_alias_1 }
 
 /**
  * The global toast container. Render once in your app root.
- * Re-export of Sonner's Toaster styled to use Hex UI theme tokens.
+ * Re-export of Sonner's Toaster styled to use Hex Core theme tokens.
  * @param props - Sonner Toaster props (position, richColors, etc.)
  * @returns A styled portal container for toast notifications
  */
@@ -3512,6 +4974,62 @@ declare function Tree({ data, defaultExpanded, expanded: expandedProp, onExpande
 export { Tree }
 export { Tree as Tree_alias_1 }
 
+declare function TreeMap({ root, width, height, padding, tile, colorBy, onLeafClick, className, ...rest }: TreeMapProps): JSX.Element;
+export { TreeMap }
+export { TreeMap as TreeMap_alias_1 }
+
+/**
+ * Typed React TreeMap. Each leaf is rendered as a rectangle whose area is
+ * proportional to its `value`. Internal node values are summed automatically;
+ * d3-hierarchy's squarified treemap layout keeps rectangles close to square
+ * for legibility.
+ *
+ * Heavy peer: requires `d3-hierarchy` (~3 KB gzip).
+ *
+ * @example
+ * <TreeMap
+ *   root={{
+ *     id: "root",
+ *     label: "Files",
+ *     children: [
+ *       { id: "src", label: "src", value: 240 },
+ *       { id: "node_modules", label: "node_modules", value: 980 },
+ *     ],
+ *   }}
+ * />
+ */
+declare type TreeMapNode = {
+    id: string;
+    label: string;
+    value?: number;
+    children?: TreeMapNode[];
+};
+export { TreeMapNode }
+export { TreeMapNode as TreeMapNode_alias_1 }
+
+declare interface TreeMapProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Root of the hierarchy. Leaves require a positive `value`. */
+    root: TreeMapNode;
+    /** Pixel width of the rendered SVG. Default 600. */
+    width?: number;
+    /** Pixel height of the rendered SVG. Default 400. */
+    height?: number;
+    /** Inner padding between sibling rectangles, in pixels. Default 2. */
+    padding?: number;
+    /** Tiling algorithm. "squarify" (default) keeps rectangles close to square. */
+    tile?: "squarify" | "binary" | "slice-dice";
+    /** Choose a fill color per leaf. "depth" cycles through theme tokens; "value" interpolates by value; or pass a function. */
+    colorBy?: "depth" | "value" | ((node: TreeMapNode, depth: number) => string);
+    /** Fired when a leaf is clicked. */
+    onLeafClick?: (node: TreeMapNode) => void;
+}
+export { TreeMapProps }
+export { TreeMapProps as TreeMapProps_alias_1 }
+
+declare const treeMapSchema: ComponentSchemaDefinition;
+export { treeMapSchema }
+export { treeMapSchema as treeMapSchema_alias_1 }
+
 /**
  * One node in a Tree. Generic — the shape is content-agnostic so consumers
  * can render org charts, taxonomy pickers, navigation trees, etc.
@@ -3589,4 +5107,47 @@ declare function useSidebar(): SidebarContextValue;
 export { useSidebar }
 export { useSidebar as useSidebar_alias_1 }
 
+declare function Venn({ sets, size, onSetClick, className, ...rest }: VennProps): JSX.Element;
+export { Venn }
+export { Venn as Venn_alias_1 }
+
+declare interface VennProps extends Omit<React_2.SVGAttributes<SVGSVGElement>, "children"> {
+    /** 2 or 3 sets. More than 3 isn't visually tractable in a strict Venn. */
+    sets: VennSet[];
+    /** Pixel size of the rendered SVG (it's square). Default 360. */
+    size?: number;
+    /** Fired when a set is clicked. */
+    onSetClick?: (set: VennSet) => void;
+}
+export { VennProps }
+export { VennProps as VennProps_alias_1 }
+
+declare const vennSchema: ComponentSchemaDefinition;
+export { vennSchema }
+export { vennSchema as vennSchema_alias_1 }
+
+/**
+ * Set-overlap (Venn) diagram for 2 or 3 sets. Pure SVG; no heavy peer
+ * dependency. Set positions and radii are fixed at sensible defaults
+ * — Venn is for showing CATEGORICAL overlap (Linux ∩ Mac, paid ∩ active),
+ * not for showing the EXACT cardinality of intersections (that's
+ * Euler-diagram territory and requires a real layout solver).
+ *
+ * @example
+ * <Venn
+ *   sets={[
+ *     { id: "linux", label: "Linux" },
+ *     { id: "mac", label: "Mac" },
+ *     { id: "windows", label: "Windows" },
+ *   ]}
+ * />
+ */
+declare type VennSet = {
+    id: string;
+    label: string;
+    value?: number;
+};
+export { VennSet }
+export { VennSet as VennSet_alias_1 }
+
 export { }