@refraction-ui/react 0.12.3 → 0.14.0

package/dist/internal/radial-gauge/index.d.ts

@@ -0,0 +1,120 @@
+/** The visual size of the gauge. */
+type GaugeSize = 'sm' | 'md' | 'lg';
+/** Tone mapped to a zone range. */
+type GaugeTone = 'default' | 'success' | 'warning' | 'danger';
+/**
+ * A threshold zone that applies a semantic tone when the gauge value falls
+ * at or below `upTo`. Zones should be listed in ascending `upTo` order; the
+ * first zone whose `upTo >= value` wins.
+ */
+interface GaugeZone {
+    /** Value up to (and including) which this zone applies. */
+    upTo: number;
+    /** Semantic tone for the arc while the value is in this zone. */
+    tone: GaugeTone;
+}
+interface RadialGaugeProps {
+    /** Current gauge value. */
+    value: number;
+    /** Minimum possible value. */
+    min?: number;
+    /** Maximum possible value. */
+    max?: number;
+    /** Visual size. */
+    size?: GaugeSize;
+}
+interface RadialGaugeAPI {
+    /** ARIA attributes to spread on the SVG element (`role="meter"`). */
+    ariaProps: Record<string, string | number>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+declare const GAUGE_SIZE_PX: Record<GaugeSize, number>;
+/**
+ * Clamp `value` to the inclusive range `[min, max]`.
+ */
+declare function clampValue(value: number, min: number, max: number): number;
+/**
+ * Map a `value` within `[min, max]` to a fraction in `[0, 1]`.
+ * Returns 0 when `min === max` to avoid division by zero.
+ */
+declare function valueToFraction(value: number, min: number, max: number): number;
+/**
+ * Convert polar coordinates to Cartesian.
+ * `angleDeg` is measured clockwise from the positive x-axis (SVG convention).
+ */
+declare function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Build an SVG arc path `d` string from `startAngleDeg` to `endAngleDeg`
+ * (both measured clockwise from the top / 12-o'clock position).
+ *
+ * Returns an empty string when the arc span is zero.
+ */
+declare function describeArc(cx: number, cy: number, r: number, startAngleDeg: number, endAngleDeg: number): string;
+/**
+ * Compute the `stroke-dashoffset` for a full-circle ring gauge.
+ *
+ * With `stroke-dasharray="circumference circumference"` and this offset, the
+ * visible portion of the stroke equals `fraction × circumference`.
+ */
+declare function gaugeStrokeDashoffset(fraction: number, circumference: number): number;
+/**
+ * Find the active zone tone for the current `value`.
+ * Zones are tested in ascending `upTo` order; the first zone whose
+ * `upTo >= value` wins. Falls back to `'default'` when no zone matches.
+ */
+declare function resolveZoneTone(value: number, zones: GaugeZone[], _max: number): GaugeTone;
+/**
+ * Build the framework-agnostic props for a radial gauge element.
+ *
+ * Returns `role="meter"` plus ARIA value attributes and data attributes;
+ * adapters spread these onto their `<svg>` element.
+ */
+declare function createRadialGauge(props: RadialGaugeProps): RadialGaugeAPI;
+
+/**
+ * Root SVG element variants — controls the rendered size via an inline
+ * width/height (adapters use GAUGE_SIZE_PX) and sets up the color context.
+ */
+declare const radialGaugeRootVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Track (background) circle stroke class.
+ * Uses a muted foreground so it sits behind the value arc without competing.
+ */
+declare const gaugeTrackClass = "fill-none stroke-muted-foreground/20";
+/**
+ * Value arc stroke class — resolved per tone via {@link gaugeArcToneVariants}.
+ * `currentColor` stroke picks up the Tailwind text-* class applied by the
+ * tone variant so we only need one class-generating helper.
+ */
+declare const gaugeArcClass = "fill-none stroke-current transition-[stroke-dashoffset] duration-300 ease-out";
+/**
+ * Tone variants for the value arc.  Adapters combine this with `gaugeArcClass`.
+ */
+declare const gaugeArcToneVariants: (props?: ({
+    tone?: "default" | "success" | "warning" | "danger" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Center label (primary text) classes. */
+declare const gaugeLabelClass = "fill-foreground text-center font-semibold";
+/** Center sub-label (secondary text) classes. */
+declare const gaugeSublabelClass = "fill-muted-foreground";
+/**
+ * Font size for the primary label by size variant.
+ * Expressed as SVG `font-size` values (px) for use in the `<text>` element.
+ */
+declare const GAUGE_LABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number>;
+/**
+ * Font size for the sub-label by size variant.
+ */
+declare const GAUGE_SUBLABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number>;
+
+export { GAUGE_LABEL_FONT_SIZE, GAUGE_SIZE_PX, GAUGE_SUBLABEL_FONT_SIZE, type GaugeSize, type GaugeTone, type GaugeZone, type RadialGaugeAPI, type RadialGaugeProps, clampValue, createRadialGauge, describeArc, gaugeArcClass, gaugeArcToneVariants, gaugeLabelClass, gaugeStrokeDashoffset, gaugeSublabelClass, gaugeTrackClass, polarToCartesian, radialGaugeRootVariants, resolveZoneTone, valueToFraction };

package/dist/internal/rating-scale/index.d.ts

@@ -0,0 +1,76 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+/** Visual size of a rating scale. */
+type RatingScaleSize = 'sm' | 'md';
+/** A single selectable point on the scale (1-indexed value + accessible label). */
+interface RatingScalePoint {
+    /** The value this point represents. */
+    value: number;
+    /** Accessible label for the point (falls back to the value). */
+    label?: string;
+}
+interface RatingScaleProps {
+    /** Currently selected value (controlled). */
+    value?: number;
+    /** Number of points on the scale. Ignored when {@link points} is given. */
+    count?: number;
+    /** Visual size. */
+    size?: RatingScaleSize;
+}
+interface RatingScaleAPI {
+    /** ARIA attributes to spread on the group element (`role="radiogroup"`). */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic group props for a rating / Likert scale.
+ *
+ * Returns `role="radiogroup"` plus data attributes; adapters spread these onto
+ * their container and render the points themselves. A rating scale is a
+ * single-select control with radio semantics, like a segmented control, but
+ * tuned for ordinal self-rating (e.g. a 1–5 Likert prompt with end labels).
+ */
+declare function createRatingScale(props?: RatingScaleProps): RatingScaleAPI;
+/**
+ * Resolve the list of points for a scale from either an explicit list or a
+ * `count` (producing `1..count`). The single source of truth shared by every
+ * adapter so a `count={5}` scale renders identical points everywhere.
+ */
+declare function resolveRatingPoints(points: RatingScalePoint[] | undefined, count?: number): RatingScalePoint[];
+/**
+ * Pure keyboard-navigation rule shared by every adapter.
+ *
+ * Unlike a wrapping segmented control, an ordinal rating scale **clamps** at
+ * the ends (you can't wrap from "5 — strongly agree" back to "1"). Home/End
+ * jump to the extremes; unhandled keys return `current` unchanged.
+ *
+ * - ArrowRight / ArrowUp   → next (clamped to last)
+ * - ArrowLeft  / ArrowDown → previous (clamped to first)
+ * - Home                   → first
+ * - End                    → last
+ */
+declare function getNextRatingIndex(current: number, key: string, count: number): number;
+
+/** Container row that holds the points plus optional end labels. */
+declare const ratingScaleVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Row of point buttons (the scale itself, between the end labels). */
+declare const ratingScaleTrackClass = "inline-flex items-center gap-1.5";
+/**
+ * A single point button. The `state` variant carries the selected vs unselected
+ * treatment so adapters never inline these classes.
+ */
+declare const ratingScaleItemVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+    state?: "checked" | "unchecked" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** End-label text flanking the scale (e.g. "Never seen this" / "Could write it"). */
+declare const ratingScaleLabelClass = "text-xs text-muted-foreground";
+
+export { type RatingScaleAPI, type RatingScalePoint, type RatingScaleProps, type RatingScaleSize, createRatingScale, getNextRatingIndex, ratingScaleItemVariants, ratingScaleLabelClass, ratingScaleTrackClass, ratingScaleVariants, resolveRatingPoints };

package/dist/internal/react-audio-room/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { AudioParticipant } from '../audio-room/index.js';
+export { AudioParticipant } from '../audio-room/index.js';
+
+interface SpeakingOrbProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Participant display name; used for initials and aria-label. */
+    name: string;
+    /** Optional avatar image URL. Falls back to initials when absent. */
+    avatarUrl?: string;
+    /** Whether this participant is actively speaking. */
+    speaking?: boolean;
+    /** Whether this participant is muted. */
+    muted?: boolean;
+    /** Whether this participant has raised their hand. */
+    handRaised?: boolean;
+}
+/**
+ * SpeakingOrb — a circular avatar for one audio-room participant.
+ *
+ * Renders an avatar image (or initials fallback), an animated speaking ring
+ * when `speaking` is true, a mic-muted badge when `muted` is true, and an
+ * optional raised-hand badge. Fully accessible with `role="img"` and an
+ * `aria-label` set to the participant's name.
+ */
+declare const SpeakingOrb: React.ForwardRefExoticComponent<SpeakingOrbProps & React.RefAttributes<HTMLDivElement>>;
+interface AudioRoomProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** List of participants to render as speaking orbs. */
+    participants: AudioParticipant[];
+}
+/**
+ * AudioRoom — a responsive grid of SpeakingOrbs for an audio-only meeting.
+ *
+ * Column count is derived from `orbColumns(n)` so the layout adapts
+ * automatically as participants join or leave. The grid uses inline
+ * `gridTemplateColumns` because the column count is dynamic.
+ */
+declare const AudioRoom: React.ForwardRefExoticComponent<AudioRoomProps & React.RefAttributes<HTMLDivElement>>;
+
+export { AudioRoom, type AudioRoomProps, SpeakingOrb, type SpeakingOrbProps };

package/dist/internal/react-call-controls/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { CallControlTone } from '../call-controls/index.js';
+export { CallControlItem, CallControlTone } from '../call-controls/index.js';
+
+interface CallControlButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'content'> {
+    /** Accessible label (used as aria-label and visible to screen readers). */
+    label: string;
+    /** Optional icon node rendered inside the button. */
+    icon?: React.ReactNode;
+    /** Visual/semantic tone of the button. */
+    tone?: CallControlTone;
+    /**
+     * Whether this control is currently in a "pressed" / toggled-on state.
+     * When provided, the button gains `aria-pressed`.
+     */
+    pressed?: boolean;
+    /** Visual size of the button. */
+    size?: 'sm' | 'md';
+}
+/**
+ * A single round meeting-control button with icon, accessible label,
+ * tone variants (default / active / destructive), and optional aria-pressed
+ * for toggleable controls (mic, camera, screen-share).
+ */
+declare const CallControlButton: React.ForwardRefExoticComponent<CallControlButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface CallControlsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Visual size passed down to child buttons when using the composable API. */
+    size?: 'sm' | 'md';
+}
+/**
+ * Toolbar wrapper for a set of meeting-control buttons.
+ *
+ * Composable: render `<CallControlButton>` children directly.
+ *
+ * ```tsx
+ * <CallControls>
+ *   <CallControlButton label="Mute" icon={<MicIcon />} tone="active" pressed={true} />
+ *   <CallControlButton label="Leave" tone="destructive" />
+ * </CallControls>
+ * ```
+ */
+declare const CallControls: React.ForwardRefExoticComponent<CallControlsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CallControlButton, type CallControlButtonProps, CallControls, type CallControlsProps };

package/dist/internal/react-checklist/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ChecklistItemData } from '../checklist/index.js';
+export { ChecklistItemData } from '../checklist/index.js';
+
+interface ChecklistProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled list of items. */
+    items?: ChecklistItemData[];
+    /** Initial items for uncontrolled usage. */
+    defaultItems?: ChecklistItemData[];
+    /** Called when an item is toggled, with the updated items array. */
+    onChange?: (items: ChecklistItemData[]) => void;
+    /** Called with the id of the item that was toggled. */
+    onItemToggle?: (id: string) => void;
+    /** Show a "{completed}/{total}" progress summary below the list. */
+    showProgress?: boolean;
+}
+/**
+ * Checklist — an interactive task list with optional progress summary.
+ *
+ * Supports controlled (`items`) and uncontrolled (`defaultItems`) usage.
+ * Each item renders as a `role="checkbox"` button; clicking toggles its
+ * checked state. Completed items receive muted + strikethrough styling.
+ * Logic and styles come from the headless `@refraction-ui/checklist` core.
+ */
+declare const Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Checklist, type ChecklistProps };

package/dist/internal/react-editor-status-bar/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { StatusSegment } from '../editor-status-bar/index.js';
+export { StatusSegment, StatusSegmentTone } from '../editor-status-bar/index.js';
+
+/** Convenience props that map to common IDE status-bar segments. */
+interface EditorStatusBarConvenienceProps {
+    /** Current line number (1-indexed). */
+    line?: number;
+    /** Current column number (1-indexed). */
+    col?: number;
+    /** Indentation descriptor, e.g. `'Spaces: 4'` or `'Tab Size: 2'`. */
+    indentation?: string;
+    /** Language / runtime label, e.g. `'Python 3.11.4'`. */
+    language?: string;
+    /** File encoding, e.g. `'UTF-8'`. */
+    encoding?: string;
+    /** End-of-line sequence, e.g. `'LF'` or `'CRLF'`. */
+    eol?: string;
+    /** Persistence status label, e.g. `'Auto-saved'` or `'Unsaved changes'`. */
+    status?: string;
+}
+interface EditorStatusBarProps extends React.HTMLAttributes<HTMLDivElement>, EditorStatusBarConvenienceProps {
+    /**
+     * Explicit list of segments. When provided, the convenience props (`line`,
+     * `col`, `language`, etc.) are ignored and you have full control over which
+     * segments appear and where.
+     */
+    segments?: StatusSegment[];
+}
+/**
+ * EditorStatusBar — an IDE-style bottom bar.
+ *
+ * Accepts either an explicit `segments` array for full control, or the
+ * convenience props (`line`, `col`, `language`, `encoding`, `indentation`,
+ * `eol`, `status`) which are assembled into a standard left/right layout
+ * automatically.
+ *
+ * Uses `role="status"` with `aria-live="polite"` so cursor-position updates
+ * are announced to screen readers without interrupting flow.
+ */
+declare const EditorStatusBar: React.ForwardRefExoticComponent<EditorStatusBarProps & React.RefAttributes<HTMLDivElement>>;
+
+export { EditorStatusBar, type EditorStatusBarConvenienceProps, type EditorStatusBarProps };

package/dist/internal/react-editor-tabs/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { EditorTabData } from '../editor-tabs/index.js';
+export { EditorTabData } from '../editor-tabs/index.js';
+
+interface EditorTabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** The list of tab entries to render. */
+    tabs: EditorTabData[];
+    /** The id of the currently active tab (controlled). */
+    activeId: string;
+    /** Called when the user clicks or navigates to a tab. */
+    onSelect: (id: string) => void;
+    /** Called when the user clicks the close button on a tab. */
+    onClose?: (id: string) => void;
+}
+/**
+ * EditorTabs — an IDE-style open-file tab bar.
+ *
+ * Renders `role="tablist"`; each tab is `role="tab"` with `aria-selected`.
+ * Supports optional icons, dirty-state dots, and close buttons. Keyboard
+ * navigation uses wrapping roving tabindex (ArrowLeft/Right, Home/End) via the
+ * headless `@refraction-ui/editor-tabs` core helper.
+ */
+declare const EditorTabs: React.ForwardRefExoticComponent<EditorTabsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { EditorTabs, type EditorTabsProps };

package/dist/internal/react-empty-state/index.d.cts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { EmptyStateTone } from '../empty-state/index.cjs';
+export { EmptyStateTone } from '../empty-state/index.cjs';
+
+interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional icon rendered inside a tone-tinted rounded chip. */
+    icon?: React.ReactNode;
+    /** Tone that tints the icon chip. Defaults to `neutral`. */
+    tone?: EmptyStateTone;
+    /** Primary heading. */
+    title: React.ReactNode;
+    /** Optional supporting copy (supports rich children). */
+    description?: React.ReactNode;
+    /** Optional action row (e.g. buttons), centered under the description. */
+    actions?: React.ReactNode;
+    /** Wrap the content in a bordered card surface. */
+    bordered?: boolean;
+}
+/**
+ * EmptyState — a centered column for empty/zero/result states and inline
+ * confirmations. The icon chip is tinted via `tone`; pass `bordered` to render
+ * it on a card surface.
+ *
+ * Styling and tone resolution come from the headless @refraction-ui/empty-state
+ * core (no inline class literals here).
+ */
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+interface ConfirmationCardProps extends EmptyStateProps {
+}
+/**
+ * ConfirmationCard — a thin preset of {@link EmptyState} with `bordered`
+ * defaulting to `true`, for inline confirmation states (e.g. "Check your email").
+ */
+declare const ConfirmationCard: React.ForwardRefExoticComponent<ConfirmationCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ConfirmationCard, type ConfirmationCardProps, EmptyState, type EmptyStateProps };

package/dist/internal/react-empty-state/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { EmptyStateTone } from '../empty-state/index.js';
+export { EmptyStateTone } from '../empty-state/index.js';
+
+interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional icon rendered inside a tone-tinted rounded chip. */
+    icon?: React.ReactNode;
+    /** Tone that tints the icon chip. Defaults to `neutral`. */
+    tone?: EmptyStateTone;
+    /** Primary heading. */
+    title: React.ReactNode;
+    /** Optional supporting copy (supports rich children). */
+    description?: React.ReactNode;
+    /** Optional action row (e.g. buttons), centered under the description. */
+    actions?: React.ReactNode;
+    /** Wrap the content in a bordered card surface. */
+    bordered?: boolean;
+}
+/**
+ * EmptyState — a centered column for empty/zero/result states and inline
+ * confirmations. The icon chip is tinted via `tone`; pass `bordered` to render
+ * it on a card surface.
+ *
+ * Styling and tone resolution come from the headless @refraction-ui/empty-state
+ * core (no inline class literals here).
+ */
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+interface ConfirmationCardProps extends EmptyStateProps {
+}
+/**
+ * ConfirmationCard — a thin preset of {@link EmptyState} with `bordered`
+ * defaulting to `true`, for inline confirmation states (e.g. "Check your email").
+ */
+declare const ConfirmationCard: React.ForwardRefExoticComponent<ConfirmationCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ConfirmationCard, type ConfirmationCardProps, EmptyState, type EmptyStateProps };

package/dist/internal/react-floating-reactions/index.d.ts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { FloatingReaction } from '../floating-reactions/index.js';
+export { FloatingReaction } from '../floating-reactions/index.js';
+
+interface FloatingReactionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /**
+     * Controlled list of reactions currently visible in the overlay. The parent
+     * is responsible for adding items and removing them after REACTION_LIFETIME_MS
+     * (or use the useFloatingReactions hook which handles this automatically).
+     */
+    reactions: FloatingReaction[];
+    /**
+     * Total number of horizontal lane buckets used to spread reactions.
+     * @default 5
+     */
+    lanes?: number;
+}
+/**
+ * FloatingReactions — a controlled overlay that renders transient emoji
+ * reactions floating upward. Intended to be positioned absolutely over a
+ * meeting/video surface.
+ *
+ * - Reactions animate upward and fade via `animate-[float-up_3s_ease-out_forwards]`.
+ *   Consumers must supply the `@keyframes float-up` rule (see
+ *   `floatingReactionItemClass` in the core styles for the recommended keyframe).
+ * - The overlay is `pointer-events-none` so it never blocks interaction.
+ * - role="status" aria-live="polite" announces new reactions to screen readers.
+ */
+declare const FloatingReactions: React.ForwardRefExoticComponent<FloatingReactionsProps & React.RefAttributes<HTMLDivElement>>;
+interface ReactionBurstProps {
+    emoji: string;
+    lane?: number;
+    lanes?: number;
+}
+/**
+ * ReactionBurst renders a single emoji at the specified lane offset — useful
+ * for static demos or Storybook stories showing a specific burst position.
+ */
+declare function ReactionBurst({ emoji, lane, lanes }: ReactionBurstProps): react_jsx_runtime.JSX.Element;
+interface UseFloatingReactionsResult {
+    reactions: FloatingReaction[];
+    /**
+     * Add an emoji reaction. An auto-incrementing id (not Math.random) is
+     * generated internally unless you pass one explicitly.
+     */
+    emit: (emoji: string, options?: {
+        id?: string;
+        lane?: number;
+    }) => void;
+    /** Remove all current reactions immediately. */
+    clear: () => void;
+}
+/**
+ * Manages a list of FloatingReaction items with automatic expiry after
+ * REACTION_LIFETIME_MS. IDs use an incrementing ref counter — no Math.random.
+ *
+ * @example
+ * const { reactions, emit } = useFloatingReactions()
+ * // <FloatingReactions reactions={reactions} />
+ * // <button onClick={() => emit('👋')}>Wave</button>
+ */
+declare function useFloatingReactions(): UseFloatingReactionsResult;
+
+export { FloatingReactions, type FloatingReactionsProps, ReactionBurst, type ReactionBurstProps, type UseFloatingReactionsResult, useFloatingReactions };

package/dist/internal/react-flow-editor/index.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { FlowNode, FlowEdge } from '../flow-editor/index.js';
+export { FlowEdge, FlowNode } from '../flow-editor/index.js';
+
+interface FlowEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'results' | 'color' | 'content'> {
+    /** The nodes to render on the canvas. */
+    nodes: FlowNode[];
+    /** The directed edges connecting nodes. */
+    edges: FlowEdge[];
+    /** Called when a node is clicked; receives the node's id. */
+    onNodeClick?: (id: string) => void;
+    /**
+     * Called when a node has been dragged to a new position.
+     * Receives the node id and the new (x, y) canvas coordinates.
+     */
+    onNodeMove?: (id: string, x: number, y: number) => void;
+    /** Override the rendering of individual node boxes. */
+    renderNode?: (node: FlowNode) => React.ReactNode;
+    /** Id of the currently selected node (controlled). */
+    selectedId?: string;
+    /** Whether to show the pan/zoom grid. */
+    showGrid?: boolean;
+    /** Whether to show zoom/pan controls. */
+    showControls?: boolean;
+}
+/**
+ * FlowEditor — a node-and-edge diagram editor.
+ *
+ * Renders inside `<InfiniteCanvas>` so the whole graph is pan/zoomable.
+ * Edges are drawn as SVG cubic bezier paths behind the node boxes.
+ * Node drag is kept deliberately simple (pointer events, no external dep).
+ */
+declare const FlowEditor: React.ForwardRefExoticComponent<FlowEditorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { FlowEditor, type FlowEditorProps };

package/dist/internal/react-graph-view/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { GraphNode, GraphEdge } from '../graph-view/index.js';
+export { GraphEdge, GraphNode, GraphNodeState } from '../graph-view/index.js';
+
+interface GraphViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'color' | 'content' | 'results'> {
+    /** Nodes to render. */
+    nodes: GraphNode[];
+    /** Directed edges connecting nodes. */
+    edges: GraphEdge[];
+    /** Called when a node chip is clicked (read-only — no selection state). */
+    onNodeClick?: (node: GraphNode) => void;
+    /** Show a legend summarising mastery-state counts. */
+    showLegend?: boolean;
+}
+/**
+ * GraphView — a read-only knowledge / dependency graph rendered inside an
+ * InfiniteCanvas (pan + zoom). Concept nodes are coloured by mastery state;
+ * edges are SVG curves. An optional legend shows per-state node counts.
+ *
+ * The component is intentionally read-only: clicking a node fires `onNodeClick`
+ * but never mutates the `nodes` array — the caller owns the data.
+ */
+declare const GraphView: React.ForwardRefExoticComponent<GraphViewProps & React.RefAttributes<HTMLDivElement>>;
+
+export { GraphView, type GraphViewProps };

package/dist/internal/react-infinite-canvas/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { CanvasTransform, Bounds } from '../infinite-canvas/index.js';
+export { Bounds, CanvasTransform } from '../infinite-canvas/index.js';
+
+interface InfiniteCanvasProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Controlled zoom level. */
+    zoom?: number;
+    /** Controlled pan offset (x). */
+    x?: number;
+    /** Controlled pan offset (y). */
+    y?: number;
+    /** Whether pointer-drag-to-pan is enabled (uncontrolled mode). */
+    pan?: boolean;
+    /** Minimum zoom level (default 0.25). */
+    minZoom?: number;
+    /** Maximum zoom level (default 4). */
+    maxZoom?: number;
+    /** Show a dot-grid background. */
+    showGrid?: boolean;
+    /** Show the zoom-controls overlay (+, −, fit). */
+    showControls?: boolean;
+    /** Called when the transform changes (wheel or drag in uncontrolled mode). */
+    onTransformChange?: (transform: CanvasTransform) => void;
+    /** Content bounds used by the fit/reset control. */
+    contentBounds?: Bounds;
+}
+/**
+ * InfiniteCanvas — a pan/zoom viewport foundation.
+ *
+ * Renders a `role="group"` container that clips children and applies a CSS
+ * transform to a content layer, enabling infinite-canvas interactions
+ * (whiteboard, system-design diagram, goal-graph).
+ *
+ * Supports controlled (`zoom`/`x`/`y`) and uncontrolled usage. Wheel-to-zoom
+ * and pointer-drag-to-pan are enabled by default in uncontrolled mode. All
+ * pointer handlers are registered after mount so they are SSR-safe.
+ */
+declare const InfiniteCanvas: React.ForwardRefExoticComponent<InfiniteCanvasProps & React.RefAttributes<HTMLDivElement>>;
+
+export { InfiniteCanvas, type InfiniteCanvasProps };

package/dist/internal/react-input/index.d.cts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { InputValidationState } from '../input/index.cjs';
 export { InputType, inputVariants } from '../input/index.cjs';
 
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -19,6 +20,21 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
      * See the package README's "Sizing" section for more.
      */
     size?: 'sm' | 'default' | 'lg';
+    /**
+     * Validation affordance. Tints the border and wires `aria-invalid`:
+     * - `'valid'` → green border, trailing check icon, `aria-invalid={false}`
+     * - `'invalid'` → destructive border, `aria-invalid={true}`
+     *
+     * When omitted the input is rendered without a wrapper (identical to the
+     * legacy bare `<input>` markup), unless `leadingIcon` is set.
+     */
+    validationState?: InputValidationState;
+    /**
+     * Optional icon rendered inside the input's left padding. When provided
+     * (or when `validationState` is set) the input is wrapped in a relative
+     * `<div>` and gains left padding to make room for the icon.
+     */
+    leadingIcon?: React.ReactNode;
 }
 /**
  * Input component — renders a styled input with size support.