@refraction-ui/react 0.12.3 → 0.14.0

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

@@ -0,0 +1,107 @@
+/** Visual mastery state of a node in the knowledge graph. */
+type GraphNodeState = 'mastered' | 'in-progress' | 'not-started' | 'highlight';
+/** A concept node in the knowledge / dependency graph. */
+interface GraphNode {
+    /** Unique identifier. */
+    id: string;
+    /** X position in the graph canvas (pixels). */
+    x: number;
+    /** Y position in the graph canvas (pixels). */
+    y: number;
+    /** Human-readable label shown in the node chip. */
+    label: string;
+    /** Visual mastery state. Defaults to `'not-started'`. */
+    state?: GraphNodeState;
+}
+/** A directed edge connecting two nodes. */
+interface GraphEdge {
+    /** Unique identifier. */
+    id: string;
+    /** ID of the source node. */
+    source: string;
+    /** ID of the target node. */
+    target: string;
+}
+/** Axis-aligned bounding box of a set of nodes. */
+interface GraphBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+}
+/** Per-state counts returned by {@link summarizeStates}. */
+type GraphStateSummary = Record<GraphNodeState, number>;
+interface GraphViewAPI {
+    /** ARIA/role attributes to spread on the graph container. */
+    ariaProps: {
+        role: string;
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build framework-agnostic container props for a GraphView.
+ *
+ * The graph is a read-only knowledge / dependency visualisation. It uses
+ * `role="group"` (not `role="img"`) so that interactive node chips inside it
+ * remain in the accessibility tree and keyboard reachable.
+ */
+declare function createGraphView(): GraphViewAPI;
+/**
+ * Look up a node by id. Returns `undefined` when not found.
+ */
+declare function nodeById(nodes: GraphNode[], id: string): GraphNode | undefined;
+/**
+ * Build an SVG cubic-bezier path `d` string between two node positions.
+ *
+ * The control points bend the curve vertically so edges arc gracefully between
+ * horizontally or vertically offset nodes. Works for any pair of positions.
+ */
+declare function graphEdgePath(source: GraphNode, target: GraphNode): string;
+/**
+ * Compute the axis-aligned bounding box of a set of nodes.
+ *
+ * Returns zero-area bounds centred at the origin when the array is empty.
+ */
+declare function graphBounds(nodes: GraphNode[]): GraphBounds;
+/**
+ * Count nodes per mastery state.
+ *
+ * Nodes without an explicit `state` are counted as `'not-started'`.
+ */
+declare function summarizeStates(nodes: GraphNode[]): GraphStateSummary;
+
+/** Outer wrapper for the graph canvas area. */
+declare const graphViewVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Node chip: a positioned, clickable concept node colored by mastery state.
+ *
+ * `state` variant drives the visual treatment:
+ * - mastered      → filled primary (bg-primary / text-primary-foreground)
+ * - in-progress   → accent ring (ring-2 ring-ring bg-accent text-accent-foreground)
+ * - not-started   → muted (bg-muted text-muted-foreground)
+ * - highlight     → border-primary accent outline (border-primary bg-background text-foreground)
+ */
+declare const graphNodeVariants: (props?: ({
+    state?: "mastered" | "in-progress" | "not-started" | "highlight" | undefined;
+    interactive?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Label text rendered inside each node chip (already embedded in the chip). */
+declare const graphNodeLabelClass = "pointer-events-none whitespace-nowrap";
+/** SVG edge line/path classes. */
+declare const graphEdgeClass = "fill-none stroke-border stroke-[1.5] opacity-60";
+/** Legend chip: a small colored indicator + label for a single mastery state. */
+declare const graphLegendChipVariants: (props?: ({
+    state?: "mastered" | "in-progress" | "not-started" | "highlight" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type GraphBounds, type GraphEdge, type GraphNode, type GraphNodeState, type GraphStateSummary, type GraphViewAPI, createGraphView, graphBounds, graphEdgeClass, graphEdgePath, graphLegendChipVariants, graphNodeLabelClass, graphNodeVariants, graphViewVariants, nodeById, summarizeStates };

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

@@ -0,0 +1,74 @@
+/** Transform state for an infinite canvas viewport. */
+type CanvasTransform = {
+    zoom: number;
+    x: number;
+    y: number;
+};
+/** Axis-aligned bounding box of canvas content. */
+interface Bounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/**
+ * Clamp a zoom level to [min, max].
+ *
+ * Defaults match common design-tool conventions: 25 % (0.25) to 400 % (4).
+ */
+declare function clampZoom(zoom: number, min?: number, max?: number): number;
+/**
+ * Compute the transform that centers `bounds` inside a viewport of size
+ * `viewportW × viewportH` with optional uniform `padding` (default 32 px).
+ *
+ * Returns a `CanvasTransform` clamped to [0.25, 4].
+ */
+declare function fitTransform(bounds: Bounds, viewportW: number, viewportH: number, padding?: number): CanvasTransform;
+/**
+ * Convert a `CanvasTransform` to a CSS `transform` string suitable for the
+ * content layer (`transformOrigin: '0 0'`).
+ */
+declare function transformToCss(t: CanvasTransform): string;
+interface CreateInfiniteCanvasOptions {
+    zoom?: number;
+}
+interface InfiniteCanvasAPI {
+    /** ARIA attributes to spread on the viewport element. */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string | number | boolean>;
+}
+/**
+ * Build the framework-agnostic props for an infinite canvas viewport.
+ *
+ * Returns `role="group"` plus data attributes; adapters spread these onto
+ * their container element.
+ */
+declare function createInfiniteCanvas(options?: CreateInfiniteCanvasOptions): InfiniteCanvasAPI;
+
+/**
+ * The outer viewport container. `overflow-hidden` clips panned content;
+ * `relative` anchors the absolute controls overlay.
+ *
+ * The `grid` variant adds a subtle dot-grid background rendered with a radial
+ * gradient using the `--border` semantic token so it respects the active theme.
+ */
+declare const infiniteCanvasVariants: (props?: ({
+    grid?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * The transformed content layer that wraps children.
+ * `transform-gpu` promotes the layer for smooth panning/zooming.
+ * `origin-top-left` matches `transformOrigin: '0 0'` in the React adapter.
+ */
+declare const canvasContentClass = "absolute inset-0 origin-top-left will-change-transform";
+/** Zoom-controls cluster — pinned to the bottom-right of the viewport. */
+declare const canvasControlsClass = "absolute bottom-4 right-4 z-10 flex items-center gap-1";
+/** Individual zoom button (+ / − / fit). */
+declare const canvasZoomButtonVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type Bounds, type CanvasTransform, type CreateInfiniteCanvasOptions, type InfiniteCanvasAPI, canvasContentClass, canvasControlsClass, canvasZoomButtonVariants, clampZoom, createInfiniteCanvas, fitTransform, infiniteCanvasVariants, transformToCss };

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

@@ -1,6 +1,8 @@
 import { AccessibilityProps } from '../shared/index.cjs';
 
 type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+/** High-level validation affordance for an input. */
+type InputValidationState = 'valid' | 'invalid';
 interface InputProps {
     type?: InputType;
     disabled?: boolean;
@@ -8,6 +10,14 @@ interface InputProps {
     required?: boolean;
     placeholder?: string;
     'aria-invalid'?: boolean;
+    /**
+     * Validation affordance. The core derives `aria-invalid` from this:
+     * - `'valid'` → `aria-invalid={false}`
+     * - `'invalid'` → `aria-invalid={true}`
+     *
+     * An explicit `aria-invalid` prop always takes precedence.
+     */
+    validationState?: InputValidationState;
 }
 interface InputAPI {
     /** ARIA attributes to spread on the element */
@@ -18,6 +28,13 @@ interface InputAPI {
     /** Data attributes for CSS styling hooks */
     dataAttributes: Record<string, string>;
 }
+/**
+ * Resolve the effective `aria-invalid` value from an explicit `aria-invalid`
+ * prop and a high-level `validationState`. The explicit prop always wins;
+ * otherwise `validationState` maps `'invalid' → true`, `'valid' → false`, and
+ * an absent state leaves `aria-invalid` undefined (legacy behavior).
+ */
+declare function resolveAriaInvalid(ariaInvalid: boolean | undefined, validationState: InputValidationState | undefined): boolean | undefined;
 declare function createInput(props?: InputProps): InputAPI;
 declare function getInputAriaProps(state: {
     disabled?: boolean;
@@ -31,8 +48,9 @@ declare function getInputAriaProps(state: {
 
 declare const inputVariants: (props?: ({
     size?: "sm" | "default" | "lg" | undefined;
+    validationState?: "valid" | "invalid" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
 
-export { type InputAPI, type InputProps, type InputType, createInput, getInputAriaProps, inputVariants };
+export { type InputAPI, type InputProps, type InputType, type InputValidationState, createInput, getInputAriaProps, inputVariants, resolveAriaInvalid };

package/dist/internal/input/index.d.ts

@@ -1,6 +1,8 @@
 import { AccessibilityProps } from '../shared/index.js';
 
 type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+/** High-level validation affordance for an input. */
+type InputValidationState = 'valid' | 'invalid';
 interface InputProps {
     type?: InputType;
     disabled?: boolean;
@@ -8,6 +10,14 @@ interface InputProps {
     required?: boolean;
     placeholder?: string;
     'aria-invalid'?: boolean;
+    /**
+     * Validation affordance. The core derives `aria-invalid` from this:
+     * - `'valid'` → `aria-invalid={false}`
+     * - `'invalid'` → `aria-invalid={true}`
+     *
+     * An explicit `aria-invalid` prop always takes precedence.
+     */
+    validationState?: InputValidationState;
 }
 interface InputAPI {
     /** ARIA attributes to spread on the element */
@@ -18,6 +28,13 @@ interface InputAPI {
     /** Data attributes for CSS styling hooks */
     dataAttributes: Record<string, string>;
 }
+/**
+ * Resolve the effective `aria-invalid` value from an explicit `aria-invalid`
+ * prop and a high-level `validationState`. The explicit prop always wins;
+ * otherwise `validationState` maps `'invalid' → true`, `'valid' → false`, and
+ * an absent state leaves `aria-invalid` undefined (legacy behavior).
+ */
+declare function resolveAriaInvalid(ariaInvalid: boolean | undefined, validationState: InputValidationState | undefined): boolean | undefined;
 declare function createInput(props?: InputProps): InputAPI;
 declare function getInputAriaProps(state: {
     disabled?: boolean;
@@ -31,8 +48,9 @@ declare function getInputAriaProps(state: {
 
 declare const inputVariants: (props?: ({
     size?: "sm" | "default" | "lg" | undefined;
+    validationState?: "valid" | "invalid" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
 
-export { type InputAPI, type InputProps, type InputType, createInput, getInputAriaProps, inputVariants };
+export { type InputAPI, type InputProps, type InputType, type InputValidationState, createInput, getInputAriaProps, inputVariants, resolveAriaInvalid };

package/dist/internal/live-captions/index.d.ts

@@ -0,0 +1,59 @@
+/** A single caption cue — may be interim (non-final) while speech is in flight. */
+interface CaptionCue {
+    /** Unique identifier for this cue. */
+    id: string;
+    /** Speaker name, shown as a prefix when present. */
+    speaker?: string;
+    /** The caption text. */
+    text: string;
+    /** Whether this cue is finalised (true) or still being transcribed (false/absent). */
+    final?: boolean;
+}
+/**
+ * Return the last `maxLines` cues to display in the caption overlay.
+ * Preserves ordering (oldest first within the slice) so the overlay reads top-to-bottom.
+ */
+declare function visibleCues(cues: CaptionCue[], maxLines?: number): CaptionCue[];
+/**
+ * Format a single cue for display.
+ * When `speaker` is present the result is `'Maya: the bottleneck is review capacity'`.
+ * Without a speaker it is just the text.
+ */
+declare function formatCue(cue: CaptionCue): string;
+interface LiveCaptionsAPI {
+    /** ARIA attributes to spread on the caption container element. */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic accessibility props for a live-caption overlay.
+ *
+ * Returns `role="log"` with `aria-live="polite"` and `aria-atomic=false` so
+ * screen readers announce individual cues as they arrive without re-reading the
+ * whole log. Adapters spread these onto the container element.
+ */
+declare function createLiveCaptions(): LiveCaptionsAPI;
+
+/**
+ * Caption overlay container — an absolute-friendly, translucent dark surface
+ * centred over its positioned ancestor (e.g. a video element).
+ */
+declare const liveCaptionsVariants: (props?: ({
+    position?: "static" | "absolute" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * A single cue line inside the overlay.
+ * Non-final (interim) cues get a dimmed italic treatment to signal they may change.
+ */
+declare const liveCaptionsCueVariants: (props?: ({
+    interim?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Speaker-name prefix — rendered slightly muted to distinguish it from the speech text. */
+declare const liveCaptionsSpeakerClass = "font-medium text-muted-foreground";
+
+export { type CaptionCue, type LiveCaptionsAPI, createLiveCaptions, formatCue, liveCaptionsCueVariants, liveCaptionsSpeakerClass, liveCaptionsVariants, visibleCues };

package/dist/internal/live-cursors/index.d.ts

@@ -0,0 +1,65 @@
+/** Data for a single collaborator cursor. */
+type CursorData = {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    color?: string;
+};
+/**
+ * A fixed palette of 8 hex colors for distinguishing collaborator cursors.
+ * Each color is vivid enough to be visible against both light and dark surfaces.
+ */
+declare const CURSOR_COLORS: string[];
+/**
+ * Assign a stable color to a cursor.
+ *
+ * When `index` is supplied the color is simply `CURSOR_COLORS[index % length]`
+ * (deterministic for ordered participant lists). Otherwise a lightweight
+ * djb2-style hash of the `id` string is used so the same id always maps to the
+ * same color across renders without using Math.random or Date.now.
+ */
+declare function assignCursorColor(id: string, index?: number): string;
+interface LiveCursorsAPI {
+    /** ARIA attributes to spread on the overlay container. */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic props for the live-cursors overlay.
+ *
+ * Cursors are purely decorative real-time presence indicators — aria-hidden
+ * true keeps them out of the accessibility tree. The group role is present for
+ * semantic correctness should a developer choose to un-hide it.
+ */
+declare function createLiveCursors(): LiveCursorsAPI;
+
+/**
+ * Full-bleed overlay that contains all cursor elements.
+ * `pointer-events-none` and `overflow-hidden` ensure cursors are decorative
+ * and don't interfere with the underlying canvas interactions.
+ */
+declare const liveCursorsVariants: (props?: ({
+    hidden?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Wrapper for a single cursor (SVG + label). Absolutely positioned via inline
+ * `left`/`top` style; the transition provides smooth movement when coordinates
+ * update.
+ */
+declare const cursorWrapperClass = "absolute flex flex-col items-start transition-[left,top] duration-100 ease-linear";
+/**
+ * The SVG cursor arrow container. Fill is applied via inline style (per
+ * collaborator color) so no utility class is needed here.
+ */
+declare const cursorArrowClass = "h-5 w-5 drop-shadow-sm";
+/**
+ * Name-label chip that appears below the cursor arrow. Background is applied
+ * via inline style (per collaborator color); text is always white for contrast.
+ */
+declare const cursorLabelClass = "mt-0.5 ml-2 rounded px-1.5 py-0.5 text-xs font-medium text-white shadow-sm whitespace-nowrap";
+
+export { CURSOR_COLORS, type CursorData, type LiveCursorsAPI, assignCursorColor, createLiveCursors, cursorArrowClass, cursorLabelClass, cursorWrapperClass, liveCursorsVariants };

package/dist/internal/live-transcript/index.d.ts

@@ -0,0 +1,73 @@
+/** A single transcript entry from one speaker at a point in time. */
+interface TranscriptEntry {
+    /** Unique identifier for this entry. */
+    id: string;
+    /** Display name of the speaker. */
+    speaker: string;
+    /** The spoken text. */
+    text: string;
+    /** Optional formatted timestamp string (e.g. "0:42"). */
+    timestamp?: string;
+    /** Optional CSS color for the speaker's name (e.g. "#3b82f6"). */
+    speakerColor?: string;
+}
+/** A merged block of consecutive entries from the same speaker. */
+interface TranscriptBlock {
+    /** Speaker display name. */
+    speaker: string;
+    /** Timestamp of the first entry in the run (if present). */
+    timestamp?: string;
+    /** Optional CSS color for the speaker name. */
+    speakerColor?: string;
+    /** All text segments from the consecutive run, in order. */
+    texts: string[];
+}
+/**
+ * Merge consecutive `TranscriptEntry` items from the same speaker into
+ * `TranscriptBlock` objects. A new block is started whenever the speaker
+ * changes; the block uses the timestamp of the *first* entry in that run.
+ */
+declare function groupConsecutiveBySpeaker(entries: TranscriptEntry[]): TranscriptBlock[];
+interface LiveTranscriptAPI {
+    /**
+     * ARIA attributes to spread on the scroll container.
+     * Typed as a plain record so frameworks can spread without fighting their
+     * aria-* type narrowing.
+     */
+    ariaProps: Record<string, string | number | boolean>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic container props for a live transcript panel.
+ *
+ * Returns `role="log"` and `aria-live="polite"` so screen readers announce
+ * new transcript entries without interrupting the user.
+ */
+declare function createLiveTranscript(): LiveTranscriptAPI;
+
+/**
+ * Scroll container that wraps all speaker blocks.
+ * The `compact` variant tightens the gap between blocks.
+ */
+declare const liveTranscriptVariants: (props?: ({
+    compact?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** A single grouped speaker block (header + text lines). */
+declare const transcriptBlockVariants: (props?: ({
+    compact?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** The row containing the speaker name and optional timestamp. */
+declare const transcriptSpeakerRowClass = "flex items-baseline gap-2";
+/** Speaker name badge / label. */
+declare const transcriptSpeakerNameClass = "text-sm font-semibold text-foreground leading-snug";
+/** Timestamp displayed beside the speaker name. */
+declare const transcriptTimestampClass = "text-xs text-muted-foreground tabular-nums";
+/** A single line of transcript text. */
+declare const transcriptTextLineClass = "text-sm text-foreground/80 leading-relaxed";
+
+export { type LiveTranscriptAPI, type TranscriptBlock, type TranscriptEntry, createLiveTranscript, groupConsecutiveBySpeaker, liveTranscriptVariants, transcriptBlockVariants, transcriptSpeakerNameClass, transcriptSpeakerRowClass, transcriptTextLineClass, transcriptTimestampClass };

package/dist/internal/mini-map/index.d.ts

@@ -0,0 +1,81 @@
+/** A rectangle in 2-D space. */
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** A single item to be represented as a dot on the minimap. */
+interface MiniMapItem {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+interface MiniMapAPI {
+    /** ARIA attributes to spread on the minimap container element. */
+    ariaProps: {
+        role: 'img';
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Compute the bounding box that encloses all items (using their x/y + optional
+ * width/height). Returns a zero-size rect at the origin when `items` is empty.
+ */
+declare function contentBounds(items: MiniMapItem[]): Rect;
+/**
+ * Compute the uniform scale factor that fits `contentRect` into the minimap
+ * box (after subtracting `padding` on each side). Returns 1 when the content
+ * has zero area (nothing to scale).
+ */
+declare function miniScale(contentRect: Rect, miniW: number, miniH: number, padding?: number): number;
+/**
+ * Map a world-space point `{ x, y }` to minimap pixel coordinates.
+ *
+ * @param point       World coordinate
+ * @param contentRect Bounding box of all content (from `contentBounds`)
+ * @param scale       Scale factor (from `miniScale`)
+ * @param padding     Padding inset in px (must match the value passed to `miniScale`)
+ */
+declare function worldToMini(point: {
+    x: number;
+    y: number;
+}, contentRect: Rect, scale: number, padding?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Compute the position and size of the viewport indicator rectangle in
+ * minimap coordinates, ready to be applied as CSS `left/top/width/height`.
+ */
+declare function viewportRectInMini(viewport: Rect, contentRect: Rect, scale: number, padding?: number): Rect;
+/**
+ * Build the framework-agnostic ARIA props for the minimap container.
+ *
+ * Every adapter spreads `ariaProps` onto its outermost element; `dataAttributes`
+ * are available for CSS hooks.
+ */
+declare function createMiniMap(): MiniMapAPI;
+
+/**
+ * The outer minimap box: small, rounded, bordered, card background.
+ * The `interactive` variant switches to grab cursor for clickable minimaps.
+ */
+declare const miniMapVariants: (props?: ({
+    interactive?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** A single node dot in the minimap (represents one `MiniMapItem`). */
+declare const miniMapDotClass = "absolute rounded-sm bg-muted";
+/**
+ * The draggable viewport indicator rectangle.
+ * Uses a semi-transparent primary fill with a primary ring/border.
+ */
+declare const miniMapViewportClass = "absolute rounded-sm border border-primary ring-1 ring-primary bg-primary/10";
+
+export { type MiniMapAPI, type MiniMapItem, type Rect, contentBounds, createMiniMap, miniMapDotClass, miniMapVariants, miniMapViewportClass, miniScale, viewportRectInMini, worldToMini };

package/dist/internal/pre-call-lobby/index.d.ts

@@ -0,0 +1,97 @@
+/** A single selectable media device (camera, microphone, or speaker). */
+interface MediaDeviceOption {
+    id: string;
+    label: string;
+}
+/** The kind of media device. */
+type DeviceKind = 'camera' | 'microphone' | 'speaker';
+interface PreCallLobbyProps {
+    /** Whether the camera is currently enabled. */
+    cameraOn: boolean;
+    /** Whether the microphone is currently enabled. */
+    micOn: boolean;
+}
+interface PreCallLobbyAPI {
+    /** ARIA attributes to spread on the group element. */
+    ariaProps: {
+        role: 'group';
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: {
+        'data-camera': string;
+        'data-mic': string;
+    };
+}
+/**
+ * Build the framework-agnostic group props for a pre-call lobby / device-check panel.
+ *
+ * Returns `role="group"` plus data attributes reflecting camera and mic state.
+ * Adapters spread these onto their container and render the device pickers,
+ * preview, and join button themselves.
+ */
+declare function createPreCallLobby(props: PreCallLobbyProps): PreCallLobbyAPI;
+/**
+ * Convert a microphone level (0..1) to a count of lit bars.
+ *
+ * Pure function — no side effects, no JSX. Adapters use this to render
+ * the mic level meter by iterating `0..barCount` and lighting bars up to
+ * the returned value.
+ *
+ * @param level    Current mic level in the range [0, 1].
+ * @param barCount Total number of bars in the meter.
+ * @returns        Number of bars that should appear "lit" (0..barCount).
+ */
+declare function micLevelToBars(level: number, barCount: number): number;
+
+/**
+ * Outer lobby card — a centered panel that holds all preflight controls.
+ */
+declare const preCallLobbyVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Camera preview area. The `camera` variant switches between the live preview
+ * slot and an avatar / placeholder shown when the camera is off.
+ */
+declare const preCallCameraVariants: (props?: ({
+    camera?: "on" | "off" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Placeholder shown inside the camera area when the camera is off. */
+declare const preCallCameraPlaceholderClass: string;
+/** Row that holds the label and the <select> for a device picker. */
+declare const preCallDeviceRowClass = "flex flex-col gap-1";
+/** Label text above a device picker. */
+declare const preCallDeviceLabelClass = "text-xs font-medium text-muted-foreground";
+/** The <select> element used for device selection. */
+declare const preCallDeviceSelectClass: string;
+/**
+ * Mic level meter container. Renders a row of bars.
+ */
+declare const preCallMicMeterClass = "flex items-end gap-0.5 h-5";
+/**
+ * An individual bar in the mic level meter.
+ * The `lit` variant distinguishes active (lit) from inactive bars.
+ */
+declare const preCallMicBarVariants: (props?: ({
+    lit?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Row holding the camera-toggle and mic-toggle buttons. */
+declare const preCallControlsRowClass = "flex items-center gap-3";
+/**
+ * Toggle button for camera or microphone.
+ * The `active` variant styles the enabled vs disabled states.
+ */
+declare const preCallToggleVariants: (props?: ({
+    active?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Primary "Join" button. */
+declare const preCallJoinButtonClass: string;
+
+export { type DeviceKind, type MediaDeviceOption, type PreCallLobbyAPI, type PreCallLobbyProps, createPreCallLobby, micLevelToBars, preCallCameraPlaceholderClass, preCallCameraVariants, preCallControlsRowClass, preCallDeviceLabelClass, preCallDeviceRowClass, preCallDeviceSelectClass, preCallJoinButtonClass, preCallLobbyVariants, preCallMicBarVariants, preCallMicMeterClass, preCallToggleVariants };