import * as React from 'react';
import { FC, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
import { P as TimbalRuntimeProviderProps, y as ThreadProps, C as ChartArtifact } from './chat-rMlckAQG.cjs';
export { g as ChartSeriesConfig, E as ThreadVariant, M as TimbalChat, N as TimbalChatProps } from './chat-rMlckAQG.cjs';
import * as react_jsx_runtime from 'react/jsx-runtime';
export { B as Button, a as ButtonColor } from './button-C9cq2nm3.cjs';
export { a as Avatar, b as AvatarFallback, c as AvatarImage, d as AvatarVariant, B as Banner, e as BannerProps, K as Kanban, i as KanbanCardData, j as KanbanCardVariant, k as KanbanColumnData, l as KanbanDensity, m as KanbanDragHandleProps, n as KanbanLocation, o as KanbanMoveEvent, p as KanbanProps, q as KanbanRenderCardContext, r as KanbanTone, T as Timeline, s as TimelineItem, t as TimelineProps, U as UntitledButton, v as UntitledButtonColor, w as UntitledButtonProps, x as UntitledButtonSize } from './kanban-BdbkopVJ.cjs';
import '@assistant-ui/react';
import 'class-variance-authority/types';
import 'class-variance-authority';
import 'radix-ui';
import '@dnd-kit/core';

/**
 * Copy-paste into a workforce agent system prompt (or codegen tool context) so the
 * model knows which app-kit components exist and how to compose them — without
 * copying a single reference layout.
 *
 * @example
 * ```ts
 * import { APP_KIT_AGENT_INSTRUCTIONS } from "@timbal-ai/timbal-react/app";
 *
 * const systemPrompt = `${basePrompt}\n\n${APP_KIT_AGENT_INSTRUCTIONS}`;
 * ```
 */
declare const APP_KIT_AGENT_INSTRUCTIONS: string;

type CatalogKind = "primitive" | "block";
type CatalogImportPath = "@timbal-ai/timbal-react/app" | "@timbal-ai/timbal-react/ui" | "@timbal-ai/timbal-react/studio";
interface CatalogEntry {
    /** Stable id (kebab-case). */
    id: string;
    /** Display name (usually the primary export). */
    name: string;
    kind: CatalogKind;
    /** Group label for docs/gallery. */
    category: string;
    description: string;
    /** When an agent or author should reach for this. */
    whenToUse: string;
    importFrom: CatalogImportPath;
    /** Exported symbols (root names) — verified against the barrel by a test. */
    exports: string[];
    /** Blocks only: the primitives/surfaces this composes. */
    composedOf?: string[];
    /** Blocks only: repo-relative source path to read/fork. */
    source?: string;
}
/** The full catalog — blocks first, then primitives/surfaces. */
declare const APP_KIT_CATALOG: CatalogEntry[];
/** Look up a catalog entry by id. */
declare function getCatalogEntry(id: string): CatalogEntry | undefined;

/**
 * The single source of truth for what generated Timbal UIs are *allowed* to
 * look like — the anti-slop constraint, encoded as data.
 *
 * Both the deterministic linter (`ui-lint.ts`) and the agent prompt
 * (`APP_KIT_AGENT_INSTRUCTIONS`) read from this module, so the rules a model is
 * told and the rules it is checked against can never drift apart.
 *
 * "Slop" = the generic AI-dashboard look: a decorative icon on every tile,
 * loud green/red trend pills, arbitrary palette colors, gratuitous dividers,
 * card-in-card nesting, bold giant numbers. Taste lives here, not in prose.
 *
 * This is a **public, documented** API (exported from the package root and
 * `/app`), in the same tier as the theme generator — not an internal class
 * composite.
 */
/**
 * Semantic color token roots the design system defines (see `styles.css`).
 * Generated code may only reach for colors through these — `bg-background`,
 * `text-muted-foreground`, `border-border`, `text-primary`, `bg-destructive`,
 * the timbal chrome extensions, etc. Anything else is slop.
 */
declare const SEMANTIC_COLOR_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring", "elevated-from", "elevated-to", "modal-from", "modal-to", "playground-from", "playground-via", "playground-to", "composer-bg", "composer-border", "composer-border-focus", "bubble-user", "bubble-user-foreground", "code-block-bg", "code-header-bg"];
type SemanticColorToken = (typeof SEMANTIC_COLOR_TOKENS)[number];
/**
 * Gradient / fill tokens reserved for **chrome only** (buttons, the elevated
 * surface, the modal shell, the playground backdrop). They must never decorate
 * a data card, a stat tile, or a list — that is the canonical "slop gradient".
 */
declare const RESERVED_GRADIENT_TOKENS: readonly ["primary-fill-from", "primary-fill-to", "primary-fill-hover-from", "primary-fill-hover-to", "primary-fill-active-from", "primary-fill-active-to", "secondary-fill-hover-from", "secondary-fill-hover-to", "secondary-fill-active-from", "secondary-fill-active-to", "destructive-fill-hover-from", "destructive-fill-hover-to", "destructive-fill-active-from", "destructive-fill-active-to", "ghost-fill-hover", "ghost-fill-active", "elevated-from", "elevated-to", "modal-from", "modal-to", "playground-from", "playground-via", "playground-to"];
/**
 * The Tailwind named palette. Any of these followed by a numeric shade
 * (`-50`..`-950`) in a color utility is a hardcoded color — not a token —
 * and is rejected by the linter.
 */
declare const TAILWIND_PALETTE_COLORS: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
/** Tailwind color-bearing utility prefixes the linter inspects. */
declare const COLOR_UTILITY_PREFIXES: readonly ["bg", "text", "border", "ring", "from", "via", "to", "fill", "stroke", "decoration", "outline", "shadow", "divide", "accent", "caret"];
/**
 * Numeric budgets the linter enforces. Tuned for "tasteful dashboard", not
 * "icon confetti". A view that needs more icons than this is almost always
 * decorating instead of communicating.
 */
declare const SLOP_BUDGETS: {
    /** Max decorative/standalone icons rendered in a single generated file. */
    readonly maxIconsPerView: 6;
    /** Max consecutive list rows separated by an explicit border/divider before
     *  it reads as a "ruled table" — prefer spacing or zebra instead. */
    readonly maxRowDividers: 2;
};
/**
 * House-style rules in plain language. The prompt renders these verbatim and
 * the linter maps each `id` to a check, so the model is told and tested on the
 * exact same list.
 *
 * ## Severity policy (keep new rules honest)
 *
 * - **Correctness + theming integrity ⇒ lint `error`.** Silent runtime breaks
 *   (invalid CSS, black charts, broken chat layout) and anything that punches
 *   through the theme system (raw palette colors, hand-authored tokens).
 * - **Taste ⇒ `enforcement: "prompt-only"` (v2).** Style opinions (icons,
 *   bold metrics, glow, uppercase, card nesting, hand-rolled controls) are no
 *   longer linted at all — they moved to the screenshot critique rubric in
 *   the `timbal-ui` skill, judged on rendered output where taste is actually
 *   visible. On fork-first projects the component source is project-owned,
 *   so control/chrome checks would flag the design system itself. The rules
 *   stay in this list because legacy prompts still render them.
 * - **Prefer blocklists over allowlists.** "Don't do X" scales with better
 *   models; "must use component Y" caps every generated app at that
 *   component's quality. When a kit component keeps losing to hand-rolled
 *   output, fix the component rather than tightening the rule.
 */
interface HouseRule {
    id: string;
    /** One-line imperative the agent reads. */
    rule: string;
    /** Why it matters (kept short — models follow rules with rationale better). */
    why: string;
    /** A wrong example (kept to a fragment). */
    slop?: string;
    /** The tasteful equivalent. */
    good?: string;
    /**
     * How the rule is enforced. `"lint"` (the default) means `ui-lint.ts` has a
     * deterministic check for it; `"prompt-only"` means the pattern can't be
     * detected with high enough precision to gate on, so it's taught in the
     * prompt but deliberately not linted (a low-precision check would false-flag
     * legitimate UIs under the strict gate). Keeping this explicit lets a test
     * assert every rule made a coverage decision — see `ui-lint.test.ts`.
     */
    enforcement?: "lint" | "prompt-only";
}
declare const HOUSE_RULES: readonly HouseRule[];

/**
 * Deterministic correctness linter for generated Timbal UI code (v2).
 *
 * Runs a dependency-free line scan over a `.tsx` string and flags patterns
 * that **silently break at runtime or punch through the theme system**:
 * hardcoded colors, `hsl(var(--token))` wrapping (invalid CSS → blank
 * charts), unsafe chart dataKeys, inline style colors, hand-authored theme
 * tokens / `forcedTheme`, and chat surfaces wrapped in bordered containers.
 *
 * ## v2 severity policy — correctness only
 *
 * Every check in this file is an **`error`**: it blocks regardless of model
 * tier because the output is objectively broken (invalid CSS, dead dark
 * mode, un-rebrandable app), not merely ugly.
 *
 * **Taste rules are no longer linted.** Icon budgets, bold metrics, glow,
 * uppercase headings, card nesting, hand-rolled rails and controls moved to
 * the screenshot critique rubric (the `timbal-ui` skill's `critique.md`) —
 * judged on rendered output, where taste is actually visible. On fork-first
 * projects the component source is project-owned, so "hand-rolled control"
 * checks would flag the design system itself. The corresponding
 * `HOUSE_RULES` entries are annotated `enforcement: "prompt-only"`.
 *
 * The linter intentionally avoids an AST dependency — the checks are
 * line/regex heuristics tuned for high precision. Feed
 * `formatLintReport(findings)` back to the generating agent (see
 * `reviewGeneratedUi`) so it can self-correct.
 *
 * Public, documented API — exported from the package root and `/app`.
 */
type LintSeverity = "error" | "warn";
interface LintFinding {
    /** Stable rule id (maps to a HouseRule where applicable). */
    rule: string;
    severity: LintSeverity;
    /** 1-based line number in the supplied source. */
    line: number;
    /** Human-readable explanation + fix. */
    message: string;
    /** The offending source fragment (trimmed). */
    snippet: string;
}
interface LintResult {
    findings: LintFinding[];
    errorCount: number;
    warnCount: number;
    /** True when there are no `error`-severity findings. */
    ok: boolean;
}
interface LintOptions {
    /**
     * Legacy knob (pre-4.0): treated warnings as errors. v2 emits no
     * warn-tier findings, so this flag has no effect — accepted so existing
     * callers and the `--strict` CLI flag keep working.
     */
    strict?: boolean;
}
/**
 * Lint a single generated `.tsx` (or fragment) string for correctness.
 *
 * @example
 * ```ts
 * const { ok, findings } = lintGeneratedUi(generatedTsx);
 * if (!ok) sendBackToAgent(formatLintReport(findings));
 * ```
 */
declare function lintGeneratedUi(source: string, options?: LintOptions): LintResult;
/**
 * Render lint findings as a compact, agent- and human-readable report.
 * Empty string when there are no findings.
 */
declare function formatLintReport(findings: LintFinding[]): string;

/**
 * Layer 4 of the anti-slop system: the critique loop.
 *
 * `reviewGeneratedUi` runs the deterministic linter (Layer 2) and packages the
 * result into something a generating agent can act on in one round-trip — a
 * pass/fail verdict plus a ready-to-send revision prompt that names the exact
 * lines and fixes. The system prompt string (`UI_REVIEW_AGENT_INSTRUCTIONS`)
 * teaches the model to self-review *before* it returns code, so the loop is
 * usually closed without a second model call.
 *
 * Public, documented API — exported from the package root and `/app`.
 */

interface ReviewResult {
    /** Raw linter output. */
    lint: LintResult;
    /** True when no blocking (error-severity, or any warning in strict mode) findings remain. */
    passed: boolean;
    /** Compact human/agent-readable report ("" when clean). */
    report: string;
    /**
     * A ready-to-send follow-up prompt instructing the agent to fix the findings,
     * or `null` when the UI passed. Send this back to the model and re-run
     * `reviewGeneratedUi` on its next output until `passed` is true.
     */
    revisionPrompt: string | null;
}
/**
 * Review a generated `.tsx` string for slop and produce an actionable verdict.
 *
 * @example
 * ```ts
 * let code = await generate(userPrompt);
 * for (let i = 0; i < 2; i++) {
 *   const review = reviewGeneratedUi(code, { strict: true });
 *   if (review.passed) break;
 *   code = await generate(review.revisionPrompt!); // agent fixes named issues
 * }
 * ```
 */
declare function reviewGeneratedUi(source: string, options?: LintOptions): ReviewResult;
/**
 * Append to a UI-generation agent's system prompt so it self-reviews before
 * returning code. Pairs with `APP_KIT_AGENT_INSTRUCTIONS` and
 * `THEME_AGENT_INSTRUCTIONS`.
 */
declare const UI_REVIEW_AGENT_INSTRUCTIONS: string;

/**
 * Design DNA — the per-project design specification.
 *
 * A `dna.json` file is the single durable artifact that records every visual
 * decision for a generated app: brand color, neutral temperature, surface
 * strategy, type system, shape, elevation, density, motion, and layout intent.
 * It is authored once (by an agent or a human), versioned with the project,
 * and compiled deterministically to `tokens.css` by `compileDna`.
 *
 * Design goals of the schema:
 *
 * - **Bounded freedom.** Every field is either an enum, a number in a
 *   validated range, or a color that the compiler re-derives into a coherent
 *   system. There is no way to express "hot pink text on lime" — bad raw
 *   material can't enter.
 * - **Curated registries.** Typography comes from a curated pairing registry
 *   (or explicit stacks), statuses and chart palettes from named recipes —
 *   see `registries.ts`.
 * - **Durable consistency.** Because every later edit reads the same file,
 *   page 12 looks like page 1, and a re-theme is a one-field diff.
 *
 * Validation is hand-rolled (no runtime deps — this ships inside a
 * self-contained CLI) and collects *all* problems before throwing, so an
 * agent can fix a bad file in one pass.
 */
type DnaSurfaceStrategy = "flat" | "panel" | "console";
type DnaMode = "light" | "dark";
type DnaStatusSetId = "signal" | "muted" | "vivid";
type DnaChartRecipeId = "categorical" | "brand" | "monochrome";
type DnaControlShape = "rounded" | "sharp" | "pill";
type DnaElevationLevel = "none" | "hairline" | "soft" | "medium" | "strong";
type DnaElevationStrategy = "border" | "shadow" | "both";
type DnaDensity = "compact" | "comfortable" | "spacious";
type DnaMotionPreset = "instant" | "snappy" | "smooth" | "expressive";
/**
 * Surface finish — the house rendering style for controls and canvases.
 * - `timbal` (default) — the signature Timbal chrome: soft canvas gradient
 *   behind content, gradient-filled primary controls with an inset top
 *   highlight, gently graded elevated/modal surfaces. All stops are derived
 *   from the brand + neutrals, so it survives any rebrand.
 * - `flat` — degenerate stops (from == to, hairline control shadows): the
 *   same component source renders plain flat shadcn-style surfaces. Use for
 *   reference-matching flat designs.
 */
type DnaFinish = "timbal" | "flat";
/**
 * Personality axes, each 0–1. They bias derivation defaults when the
 * corresponding explicit field is omitted, and they are read by review
 * tooling as the project's intent record. 0.5 is always neutral.
 */
interface DnaPersonality {
    /** 0 = stripped/minimal, 1 = expressive/decorated. */
    minimal_expressive?: number;
    /** 0 = flat (borders separate), 1 = dimensional (shadows separate). */
    flat_dimensional?: number;
    /** 0 = cool neutrals, 1 = warm neutrals. */
    cool_warm?: number;
    /** 0 = dense/data-first, 1 = airy/marketing. */
    dense_airy?: number;
    /** 0 = sober/enterprise, 1 = playful/consumer. */
    serious_playful?: number;
}
interface DnaReference {
    /** Where the reference came from. */
    source: "mobbin" | "user" | "url" | "other";
    /** Screen id, file path, or URL. */
    ref: string;
    /** What was borrowed — e.g. "layout: split list+detail; warm canvas". */
    borrowed?: string;
}
interface DnaMeta {
    /** Product/app name the DNA was authored for. */
    name?: string;
    /** One-sentence design intent, e.g. "calm, data-dense logistics console". */
    summary?: string;
    /** Provenance: which references informed this DNA and what was taken. */
    references?: DnaReference[];
}
interface DnaColor {
    /** Primary brand color — hex / rgb() / oklch(). The only required color. */
    brand: string;
    /**
     * Optional secondary accent color. NOTE: this never tints functional
     * surfaces — dropdown/menu hovers, selected rows, canvases, and sheets
     * (`--accent`, `--playground-*`, `--sidebar-accent`) are always neutral
     * gray. Reserved for decorative use.
     */
    accent?: string;
    /**
     * Neutral temperature. Defaults to PURE NEUTRAL (`chroma: 0`): white/gray/
     * dark surfaces with gray hovers, regardless of how chromatic the brand
     * is — brand-washed canvases and tinted dropdown hovers are a named
     * mistake. Set `chroma` (0–0.03) explicitly to opt in to tinted neutrals;
     * `hue` defaults to the brand hue and only matters when chroma > 0.
     */
    neutrals?: {
        hue?: number;
        chroma?: number;
    };
    /**
     * Surface strategy:
     * - `flat`    — canvas and cards share a background; borders separate.
     * - `panel`   — gray canvas, lighter elevated cards (classic SaaS).
     * - `console` — dark-first, dense, near-black canvas with flat cards.
     */
    surfaces?: DnaSurfaceStrategy;
    /** Which mode the app should boot into. Both are always compiled. */
    defaultMode?: DnaMode;
    /** Status color set (success / warning / info / destructive). */
    status?: DnaStatusSetId;
    /**
     * Selection-control accent — the checked/active fill for checkboxes,
     * radios, and similar binary controls (`--selection` /
     * `--selection-foreground`). Defaults to the status set's info blue.
     * Foreground is gated at 3:1 (graphical-object threshold) so vivid
     * accents survive verbatim.
     */
    selection?: string;
    /**
     * Chart palette: a named recipe (`categorical` | `brand` | `monochrome`)
     * or an explicit array of 3–8 colors.
     */
    charts?: DnaChartRecipeId | string[];
}
interface DnaTypography {
    /** Curated pairing id from the font registry (see `registries.ts`). */
    pairing?: string;
    /** Explicit stacks — override the pairing (or stand alone). */
    sans?: string;
    display?: string;
    mono?: string;
    /** Stylesheet URL that loads the fonts (Google Fonts css2 etc.). */
    importUrl?: string;
    /** Modular type-scale ratio, 1.1–1.4. Default 1.2. */
    scale?: number;
    /** Body size in px, 13–17. Default 15. */
    baseSize?: number;
    /** Heading weight. Default derives from personality (500/600). */
    headingWeight?: 400 | 500 | 600 | 700;
    /** Heading letter-spacing personality. Default "normal". */
    tracking?: "tight" | "normal";
}
interface DnaShape {
    /** Base corner radius in rem, 0–1.5. Default 0.625. */
    radius?: number;
    /** Control corner language: rounded (default) / sharp / pill. */
    controls?: DnaControlShape;
    /** Border width in px for separating borders. Default 1. */
    borderWidth?: 1 | 2;
}
interface DnaElevation {
    /** Shadow weight for cards/overlays. Default derives from personality. */
    level?: DnaElevationLevel;
    /** What carries separation: borders, shadows, or both. Default "both". */
    strategy?: DnaElevationStrategy;
}
interface DnaSpacing {
    /** Global density. Scales the Tailwind spacing unit + control heights. */
    density?: DnaDensity;
}
interface DnaMotion {
    /** Motion personality: durations + easing set. Default "snappy". */
    preset?: DnaMotionPreset;
}
/**
 * Layout intent — NOT compiled to tokens. This is the durable record of
 * structural decisions that every later edit must respect: the shell
 * archetype, nav model, page width. Review tooling reads it; the compiler
 * carries it through untouched.
 */
interface DnaLayout {
    /** Shell archetype, e.g. "sidebar", "topbar", "sidebar+topbar", "minimal", "split". */
    shell?: string;
    /** Page content width, e.g. "boxed" | "full" | "narrow". */
    pageWidth?: string;
    /** Free-form structural notes ("nav groups: Ops, Billing; detail = drawer"). */
    notes?: string;
}
interface DnaVoice {
    /** Casing rule for headings/labels. Timbal house style is "sentence". */
    case?: "sentence";
    /** Copy tone notes, e.g. "direct, no exclamation marks". */
    tone?: string;
}
/**
 * Escape hatch for one-off token tweaks. Values must be token-referential —
 * `var(...)`, `color-mix(...)`, `calc(...)`, `transparent`, or a plain
 * dimension. Raw color literals (`#hex`, `oklch(...)`, `rgb(...)`) are
 * rejected: the compiled system stays the single color source.
 *
 * Either a flat map (applies to both modes) or `{ light, dark }`.
 */
type DnaOverrides = Record<string, string> | {
    light?: Record<string, string>;
    dark?: Record<string, string>;
};
interface DesignDna {
    version: 1;
    meta?: DnaMeta;
    personality?: DnaPersonality;
    /**
     * House finish for controls + canvases. Defaults to `"timbal"` — new
     * projects ship the classic Timbal look unless the DNA opts out.
     */
    finish?: DnaFinish;
    color: DnaColor;
    typography?: DnaTypography;
    shape?: DnaShape;
    elevation?: DnaElevation;
    spacing?: DnaSpacing;
    motion?: DnaMotion;
    layout?: DnaLayout;
    voice?: DnaVoice;
    overrides?: DnaOverrides;
}
declare class DnaValidationError extends Error {
    readonly problems: string[];
    constructor(problems: string[]);
}
/**
 * Validate a parsed JSON value as a `DesignDna`. Collects every problem and
 * throws a single `DnaValidationError`, so one fix pass suffices.
 */
declare function parseDna(input: unknown): DesignDna;

/**
 * Design DNA compiler — `dna.json` → `tokens.css`.
 *
 * Deterministic: the same DNA + compiler version always emits byte-identical
 * CSS, so drift (hand-edited tokens) is detectable by recompiling and
 * comparing (`timbal-dna check`). The compiler:
 *
 *   1. Resolves defaults (personality axes bias omitted fields).
 *   2. Derives complete paired light + dark neutral ladders from the surface
 *      strategy + neutral temperature.
 *   3. Derives primary / accent / ring / sidebar / status / chart colors.
 *   4. **Contrast-fixes every foreground/background pair** (WCAG), recording
 *      each adjustment in the report — unreadable text cannot be compiled.
 *   5. Emits `:root` / `.dark` custom properties plus Tailwind v4 `@theme`
 *      blocks (colors, radius ladder, fonts, type scale, spacing/density,
 *      shadows, easings) so utilities like `bg-card`, `rounded-control`,
 *      `h-control`, `shadow-md`, `ease-standard` all carry the DNA.
 *
 * The emitted vocabulary is a superset of the shadcn/ui token contract, so
 * battle-tested shadcn-shaped components restyle without touching their
 * internals.
 */

declare const DNA_COMPILER_VERSION = "1.3.0";
interface DnaCompileReport {
    /** Contrast fixes the compiler applied (informational). */
    adjustments: string[];
    /** Non-blocking concerns worth a look (e.g. chart series similarity). */
    warnings: string[];
}
interface DnaCompileResult {
    /** The complete tokens.css contents. */
    css: string;
    report: DnaCompileReport;
    /** Content fingerprint embedded in the header (FNV-1a over DNA + version). */
    fingerprint: string;
    /** The mode the app should boot into (`dna.color.defaultMode`, default light). */
    defaultMode: DnaMode;
}
declare function compileDna(dna: DesignDna): DnaCompileResult;

/**
 * Curated registries the DNA compiler draws from.
 *
 * This is where taste is encoded as *data*: every font pairing, status set,
 * motion preset, and elevation ladder here has been chosen to read as a
 * designed product. The DNA schema lets a generator pick from these menus
 * (or supply explicit values within validated ranges) — it cannot invent
 * raw material below this quality floor.
 *
 * All Google Fonts URLs use the css2 API with explicit weight ranges so the
 * loaded payload stays small.
 */

interface FontPairing {
    id: string;
    label: string;
    /** Personality tags for agent selection ("what vibe does this carry?"). */
    vibe: string[];
    /** Body / UI stack. */
    sans: string;
    /** Display/heading stack. Omitted = headings use `sans`. */
    display?: string;
    /** Monospace stack. */
    mono: string;
    /** Google Fonts css2 stylesheet loading every family above. */
    importUrl: string;
}
declare const FONT_PAIRINGS: readonly FontPairing[];
declare function getFontPairing(id: string): FontPairing | undefined;
/**
 * Solid status colors per mode, in OKLCH channel form. The compiler derives
 * foregrounds, subtle backgrounds, and subtle foregrounds from these anchors
 * and then contrast-fixes every pair.
 */
interface StatusAnchor {
    l: number;
    c: number;
    h: number;
}
interface StatusSet {
    id: DnaStatusSetId;
    label: string;
    light: {
        success: StatusAnchor;
        warning: StatusAnchor;
        destructive: StatusAnchor;
        info: StatusAnchor;
    };
    dark: {
        success: StatusAnchor;
        warning: StatusAnchor;
        destructive: StatusAnchor;
        info: StatusAnchor;
    };
}
declare const STATUS_SETS: readonly StatusSet[];
declare function getStatusSet(id: DnaStatusSetId): StatusSet;
interface MotionSpec {
    id: DnaMotionPreset;
    label: string;
    /** Micro-interactions: hover tints, toggles. */
    fast: string;
    /** Standard transitions: menus, popovers, accordions. */
    base: string;
    /** Large surfaces: dialogs, drawers, page-level. */
    slow: string;
    /** Default easing. */
    ease: string;
    /** Entrance/emphasis easing. */
    easeEmphasized: string;
}
declare const MOTION_PRESETS: readonly MotionSpec[];
declare function getMotionPreset(id: DnaMotionPreset): MotionSpec;
interface ElevationLadder {
    id: DnaElevationLevel;
    /** Tailwind shadow scale, ascending. Paired light/dark values. */
    light: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    dark: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
}
declare const ELEVATION_LADDERS: readonly ElevationLadder[];
declare function getElevationLadder(id: DnaElevationLevel): ElevationLadder;
interface DensitySpec {
    /** Tailwind v4 base spacing unit (all padding/gap utilities scale from this). */
    spacingUnit: string;
    /** Control heights (md / sm / lg) in rem. */
    control: string;
    controlSm: string;
    controlLg: string;
}
declare const DENSITY_SPECS: Record<"compact" | "comfortable" | "spacious", DensitySpec>;

/**
 * Theme generator — turn brand *intent* into a complete, paired light + dark
 * token set, so agents and apps never hand-author `oklch(...)` or risk a
 * light-only override (the failure mode `theme-sanity.ts` warns about).
 *
 * The package owns the OKLCH math for every Timbal extension token (button
 * gradients, playground tint, ring, elevated surfaces) because deriving them
 * correctly requires knowing the full token contract in `styles.css`. Callers
 * only supply a brand color (and optional accent / radius / neutral tint).
 *
 *   const theme = createTimbalTheme({ brand: "#4f46e5" });
 *   document head ← themeToCss(theme)              // build-time / SSR
 *   applyTimbalTheme(theme)                          // runtime, swappable
 *
 * Tokens are returned as `{ light, dark }` maps of CSS variable name → value.
 * Only the keys that change from the package defaults are included — overrides
 * cascade over `styles.css`, so unset tokens keep their shipped values.
 */
/** CSS variable name → value. */
type ThemeTokenMap = Record<string, string>;
interface TimbalThemeTokens {
    /** Variables applied in `:root` (light mode). */
    light: ThemeTokenMap;
    /** Variables applied in `.dark`. */
    dark: ThemeTokenMap;
    /** Mode-independent variables (e.g. `--radius`, `--font-sans`) applied once in `:root`. */
    root?: ThemeTokenMap;
    /**
     * Font stack applied as `font-family` on the theme scope (and `body`), so
     * every component re-skins. Set independently of the `--font-*` vars so the
     * serializer can emit the actual `font-family` declaration.
     */
    fontFamily?: string;
    /**
     * Optional stylesheet URL (e.g. a Google Fonts link) that loads the font in
     * `fontFamily`. Injected as a `<link>` by `applyTimbalTheme` / `TimbalThemeStyle`;
     * for build-time `themeToCss` the host should add the link itself.
     */
    fontImportUrl?: string;
}
/** Drop-shadow weight for cards / elevated surfaces. */
type ThemeShadow = "none" | "hairline" | "soft" | "medium" | "strong";
interface TimbalThemeTypography {
    /** Body / UI font stack. Applied as `font-family` and `--font-sans`. */
    sans: string;
    /** Optional heading/display stack (`--font-display`; falls back to sans). */
    display?: string;
    /** Optional monospace stack (`--font-mono`). */
    mono?: string;
    /** Optional stylesheet URL that loads the fonts (Google Fonts CSS, etc.). */
    importUrl?: string;
}
interface TimbalThemeIntent {
    /** Primary brand color — any CSS color: `#4f46e5`, `rgb(...)`, `oklch(...)`. */
    brand: string;
    /** Optional secondary accent. Defaults to a desaturated brand. */
    accent?: string;
    /** Corner radius in rem (maps to `--radius` + `--radius-2xl`). Default 0.75. */
    radius?: number;
    /**
     * Tint neutral surfaces (background / muted / border) toward the brand hue
     * with very low chroma, for a more cohesive branded feel. Default `false`
     * keeps the shipped neutral grays.
     */
    tintNeutrals?: boolean;
    /**
     * Full typography personality (font stacks + optional web-font URL). When
     * set, the generated theme re-skins every component's font.
     */
    typography?: TimbalThemeTypography;
    /** Shadow weight for cards / elevated surfaces. Default keeps the shipped `medium`. */
    shadow?: ThemeShadow;
}
/**
 * Derive a complete paired token set from brand intent. Pure — safe in SSR,
 * tests, and build scripts.
 */
declare function createTimbalTheme(intent: TimbalThemeIntent): TimbalThemeTokens;
interface ThemeToCssOptions {
    /**
     * Scope the theme to elements matching `[data-timbal-theme="<scope>"]`
     * instead of `:root`. Useful for previewing several themes on one page
     * without touching the live document.
     */
    scope?: string;
    /** Indentation for emitted declarations. Default two spaces. */
    indent?: string;
    /**
     * Prepend an `@import url("…")` for the theme's `fontImportUrl`. Off by
     * default — `@import` must precede all other rules, so this is only safe when
     * the returned CSS is the entire stylesheet. Prefer loading the font with a
     * `<link>` (which `applyTimbalTheme` / `TimbalThemeStyle` do automatically).
     */
    includeFontImport?: boolean;
}
/**
 * Serialize a theme to a CSS string with paired `:root` (light) and `.dark`
 * blocks — the exact shape apps would otherwise hand-author. Writing this in a
 * single block guarantees light + dark stay in sync. When the theme carries a
 * `fontFamily`, a matching `font-family` rule is emitted so every component
 * re-skins (scoped to the subtree for previews, or `:root` + `body` globally).
 */
declare function themeToCss(theme: TimbalThemeTokens, options?: ThemeToCssOptions): string;
/**
 * Ensure a stylesheet `<link>` for a web-font URL exists in `<head>`. Idempotent
 * per URL; replaces any previously injected theme font link. No-op in SSR.
 */
declare function ensureThemeFontLink(url: string | undefined): void;
/**
 * Apply a theme at runtime by injecting (or replacing) a single managed
 * `<style>` element in `<head>` (and a font `<link>` when the theme carries
 * one). Works with the `.dark` class toggle used by `next-themes` / `ModeToggle`
 * — both light and dark blocks are written, so switching mode never desyncs.
 * No-op in SSR / non-DOM contexts.
 *
 * Returns a disposer that removes the injected style + font link.
 */
declare function applyTimbalTheme(theme: TimbalThemeTokens): () => void;
/** Remove a runtime theme injected by {@link applyTimbalTheme}. */
declare function clearTimbalTheme(): void;

/**
 * Curated brand presets — a small, closed catalog so agents (and pickers) can
 * *list* and *apply* styles by stable ID instead of inventing colors. Each
 * preset is generated through `createTimbalTheme`, so light/dark stay paired
 * and contrast-correct by construction.
 *
 * Keep this list short and well-tested. A handful of strong presets beats an
 * infinite palette for both humans and models.
 */

type TimbalThemePresetId = "platform" | "indigo" | "violet" | "forest" | "warm" | "slate" | "folio" | "carbon";
interface TimbalThemePreset {
    id: TimbalThemePresetId;
    /** Short human label for pickers. */
    label: string;
    /** One-line "use when" guidance — surfaced to agents in prompts. */
    description: string;
    /** Representative swatch color (CSS) for chips / previews. */
    swatch: string;
    /** Human-readable font name (for picker chips). `null` = system default. */
    font: string | null;
    /**
     * Full personality token set — color + radius + shadow + typography.
     * `platform` is the shipped neutral palette and has empty maps (no overrides;
     * `styles.css` defaults apply).
     */
    tokens: TimbalThemeTokens;
}
declare const TIMBAL_THEME_PRESETS: readonly TimbalThemePreset[];
/** Look up a preset by id. */
declare function getThemePreset(id: TimbalThemePresetId): TimbalThemePreset | undefined;
/**
 * Apply a preset at runtime via {@link applyTimbalTheme} and persist the
 * choice to `localStorage` so it can be restored on reload. Returns a disposer.
 * No-op for unknown ids or in SSR.
 */
declare function applyThemePreset(id: TimbalThemePresetId): () => void;
/** Read the persisted preset id (or null). */
declare function getStoredThemePreset(): TimbalThemePresetId | null;

/**
 * Copy-paste into a UI-generation agent's system prompt (the leviosa
 * `timbal-ui` skill, codegen tool context, etc.) so the model offers and
 * applies themes through the package API — never by hand-authoring OKLCH.
 *
 * @example
 * ```ts
 * import { THEME_AGENT_INSTRUCTIONS } from "@timbal-ai/timbal-react";
 * const systemPrompt = `${basePrompt}\n\n${THEME_AGENT_INSTRUCTIONS}`;
 * ```
 */
declare const THEME_AGENT_INSTRUCTIONS: string;

interface TimbalThemeStyleProps {
    /** Generated token set (from `createTimbalTheme`). Takes precedence over `preset`. */
    theme?: TimbalThemeTokens;
    /** Apply a catalog preset by id instead of a custom theme. */
    preset?: TimbalThemePresetId;
    /**
     * Scope the theme to `[data-timbal-theme="<scope>"]` subtrees instead of the
     * whole document — used by `ThemePresetGallery` to preview without changing
     * the live app.
     */
    scope?: string;
    /** Optional `nonce` for strict CSP environments. */
    nonce?: string;
}
/**
 * Inject a generated theme as a `<style>` tag. Render once near the app root
 * (or per-scope for previews). Emits paired light + dark blocks so the `.dark`
 * toggle never desyncs. Pure render — SSR-safe.
 */
declare const TimbalThemeStyle: FC<TimbalThemeStyleProps>;

interface AppShellProps {
    /** Primary navigation (e.g. StudioSidebar or custom rail). */
    sidebar?: ReactNode;
    /**
     * Global top bar (login, theme, account) — spans the full shell width (not
     * the page `max-w-6xl` column).
     */
    topbar?: ReactNode;
    /** @deprecated Use `topbar`. */
    header?: ReactNode;
    /** Main routed content. */
    children: ReactNode;
    /** Controlled mobile-nav drawer open state. */
    navOpen?: boolean;
    /** Uncontrolled initial mobile-nav open state. Default: `false`. */
    defaultNavOpen?: boolean;
    onNavOpenChange?: (open: boolean) => void;
    /**
     * How the mobile hamburger that opens the `sidebar` drawer is provided.
     * - `"auto"` (default): the shell renders a floating hamburger (top-left,
     *   `md:hidden`) whenever there's a `sidebar` but no `topbar` — so a sidebar
     *   dashboard works on mobile with **no topbar and no wiring**.
     * - `"topbar"`: you place `<AppShellSidebarTrigger />` in the `topbar`
     *   yourself; the shell renders no floating hamburger.
     * - `"none"`: the shell renders no hamburger (you provide your own via
     *   `useAppShellNav()`).
     *
     * When a `topbar` is present, `"auto"` behaves like `"topbar"` (the topbar is
     * assumed to host the trigger) to avoid a duplicate control.
     */
    mobileSidebarTrigger?: "auto" | "topbar" | "none";
    className?: string;
    mainClassName?: string;
    /**
     * Make the content region a bounded, non-scrolling flex column instead of the
     * default padded scroll area. Use for full-bleed pages that own their own
     * scroll — a full-page chat (`TimbalChat` / `Thread`), a canvas, a map, an
     * editor — so a `h-full` / `flex-1 min-h-0` child fills exactly and a pinned
     * footer (e.g. the chat composer) stays put instead of riding down on scroll.
     * Do **not** combine with `h-[calc(100dvh-…)]` guesses on the child.
     */
    contentFill?: boolean;
}
/**
 * App-first layout: sidebar + topbar + main. Layout-only — the floating
 * assistant is a self-contained `<AppCopilot>` you drop anywhere (it portals
 * its own overlay), not a prop on the shell.
 */
declare const AppShell: FC<AppShellProps>;

interface AppShellChatTriggerProps {
    className?: string;
    label?: string;
    /**
     * `floating` — primary pill fixed bottom-right (matches shell default).
     * `inline` — for topbar/actions rows; text only, no icons.
     */
    placement?: "floating" | "inline";
}
/**
 * Text-only custom trigger that opens the copilot. Requires an app-level
 * `<CopilotProvider>` ancestor so it shares state with `<AppCopilot>`.
 * `AppCopilot` ships its own SiriWave trigger, so this is only for bespoke
 * triggers (e.g. in a topbar).
 */
declare const AppShellChatTrigger: FC<AppShellChatTriggerProps>;

/** Mobile-nav drawer controls owned by an enclosing shell (e.g. `AppShell`). */
interface ShellNavControls {
    /** Mobile nav drawer open state. */
    open: boolean;
    setOpen: (open: boolean) => void;
    toggle: () => void;
}

/** Mobile-nav drawer controls exposed by `AppShell`. */
type AppShellNavControls = ShellNavControls;
/**
 * Read the `AppShell`-owned mobile nav controls — only to wire a **custom**
 * hamburger/trigger that is itself rendered **inside** `AppShell`.
 *
 * Most apps never need this: inside `AppShell`, `StudioSidebar` already syncs to
 * these controls automatically (no `mobileOpen` wiring), and `AppShell` renders
 * the mobile hamburger itself when there's no topbar.
 *
 * ⚠️ **Footgun:** this reads React context, so when called **outside** an
 * `AppShell` it returns a silent no-op (`open` permanently `false`). Calling it
 * in the component that *renders* `<AppShell>` and then passing
 * `mobileOpen={nav.open}` / `onMobileOpenChange={nav.setOpen}` into
 * `StudioSidebar` forces the drawer into controlled mode pinned shut — the
 * backdrop toggles but the drawer never slides in. Don't wire the sidebar's
 * `mobileOpen` from here; let `StudioSidebar` (as `AppShell`'s `sidebar`)
 * auto-sync instead.
 *
 * @example
 * ```tsx
 * // A custom trigger, rendered INSIDE AppShell (e.g. in a topbar slot):
 * function MenuButton() {
 *   const nav = useAppShellNav();
 *   return <button onClick={nav.toggle}>Menu</button>;
 * }
 * ```
 */
declare function useAppShellNav(): AppShellNavControls;

interface AppShellSidebarTriggerProps {
    /** Accessible label. Default: "Open navigation". */
    label?: string;
    className?: string;
}
/**
 * Hamburger that opens the `AppShell` mobile nav drawer. Hidden on `md+`
 * (the sidebar is persistent there). Drop it in the `AppShell` topbar
 * slot — it reads the shell nav controls, so no wiring is needed.
 */
declare const AppShellSidebarTrigger: FC<AppShellSidebarTriggerProps>;

/**
 * App kit layout density — shared spacing scale for dashboards.
 * Default matches timbal-platform list pages; compact tightens rhythm for data-heavy views.
 */
type AppDensity = "default" | "compact";
/** Default chart plot height per density (overridable via component `height` prop). */
declare const APP_DENSITY_CHART_HEIGHT: Record<AppDensity, number>;
/** Layout class maps keyed by density — consumed via `useAppDensityClass` in app components. */
declare const APP_DENSITY_CLASSES: {
    readonly pageColumn: {
        readonly default: "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
        readonly compact: "mx-auto w-full max-w-none px-3 md:px-4";
    };
    readonly pageHeader: {
        readonly default: string;
        readonly compact: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between pb-2 pt-1";
    };
    /**
     * Vertical rhythm between a `Page`'s direct content blocks. Page-level gap so
     * stacked blocks (FilterBar + DataTable, MetricRow + ChartPanel, bare cards)
     * never render flush — the #1 source of gap-less generated layouts.
     */
    readonly pageStack: {
        readonly default: "flex flex-col gap-6";
        readonly compact: "flex flex-col gap-4";
    };
    readonly section: {
        readonly default: "flex flex-col gap-4 py-4";
        readonly compact: "flex flex-col gap-2 py-2";
    };
    readonly surfaceCard: {
        readonly default: string;
        readonly compact: string;
    };
    readonly statTile: {
        readonly default: string;
        readonly compact: string;
    };
    readonly emptyState: {
        readonly default: string;
        readonly compact: string;
    };
    readonly metricCardHeader: {
        readonly default: "flex items-start justify-between gap-3 px-4 pb-1 pt-3";
        readonly compact: "flex items-start justify-between gap-2 px-3 pb-0.5 pt-2";
    };
    readonly metricTile: {
        readonly default: "relative flex min-w-0 flex-1 flex-col gap-1 px-4 py-3 text-left font-normal";
        readonly compact: "relative flex min-w-0 flex-1 flex-col gap-1 px-3 py-2 text-left font-normal";
    };
    readonly metricChartRegion: {
        readonly default: "relative min-h-0 w-full overflow-x-hidden pt-2";
        readonly compact: "relative min-h-0 w-full overflow-x-hidden pt-1";
    };
    readonly metricChartPlotRegion: {
        readonly default: "relative min-h-0 w-full overflow-x-hidden px-0 pt-5 pb-3";
        readonly compact: "relative min-h-0 w-full overflow-x-hidden px-0 pt-3 pb-2";
    };
    readonly chartPanelBody: {
        readonly default: "pt-2 pb-3";
        readonly compact: "pt-1 pb-2";
    };
};
type AppDensityClassKey = keyof typeof APP_DENSITY_CLASSES;
declare function appDensityClass(key: AppDensityClassKey, density?: AppDensity): string;

/**
 * Class composites for the `app` kit (dashboards, settings, data views).
 * Colours via semantic tokens in styles.css — no hardcoded palette literals.
 */
/**
 * App page column — centered within the shell content area (right of the
 * sidebar inset). Wide cap so dashboards use the available width instead of
 * leaving large side gutters; the cap only kicks in on ultra-wide displays.
 */
declare const appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
/**
 * Page content width ladder. Every option is a centered column with lateral
 * padding — pick a narrower cap for focused / reading pages instead of always
 * running full-bleed.
 */
type AppPageWidth = "full" | "wide" | "default" | "centered" | "narrow" | "prose";
/**
 * Topbar horizontal inset — aligned with the page column's max-width and
 * lateral padding so controls line up perfectly with the page content.
 */
declare const appShellTopbarInsetClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
/** Top breathing room for `AppShell` — matches timbal-platform list pages (`pt-4 md:pt-6`). */
declare const appShellInsetTopClass = "pt-4 md:pt-6";
/** Card surface — same elevated integration look as in-thread artifacts. */
declare const appSurfaceCardClass: string;
/** Metric / stat tile. */
declare const appStatTileClass: string;
/**
 * Filter bar chrome — horizontal controls row.
 * Bottom-aligns children so an unlabeled `SearchInput` lines up with the
 * control in a labeled `Field` + `Select` (labels extend upward).
 */
declare const appFilterBarClass = "flex flex-wrap items-end gap-2";
/** Search inputs in filter bars — shared control skin (field shape), so a
 *  search field and a dropdown placed side by side match exactly. */
declare const appSearchInputClass: string;

interface PageHeaderProps {
    /** Page title. Omit for a headerless page (no `<h1>` rendered). */
    title?: ReactNode;
    description?: ReactNode;
    actions?: ReactNode;
    className?: string;
}
declare const PageHeader: FC<PageHeaderProps>;

interface PageProps extends PageHeaderProps {
    children: ReactNode;
    /** Slot above the title (breadcrumbs). */
    breadcrumbs?: ReactNode;
    /**
     * Layout rhythm for this page and descendant app-kit blocks.
     * `compact` tightens page insets, section gaps, and card padding.
     */
    density?: AppDensity;
    /**
     * Content width cap. Defaults to the density default (wide cap on `default`,
     * full-bleed on `compact`). Use a narrower value (`default`, `narrow`,
     * `prose`, `centered`) for focused or reading pages instead of always
     * stretching full width. Ignored when `fill` is set unless `fillPadded`.
     */
    width?: AppPageWidth;
    /**
     * Make the page a bounded, full-height flex column instead of a centered,
     * content-sized column. Pair with `AppShell contentFill` for full-bleed pages
     * (a full-page chat, a canvas, an editor) whose body should fill the viewport
     * and own its own scroll. Give the fill child `min-h-0 flex-1`.
     */
    fill?: boolean;
    /**
     * Keep the centered column (lateral padding + `width` cap) while still
     * filling the viewport height. Use for full-height pages that should not run
     * edge-to-edge (a centered editor, a focused detail view).
     */
    fillPadded?: boolean;
    className?: string;
}
declare const Page: FC<PageProps>;

interface SectionProps {
    title?: ReactNode;
    description?: ReactNode;
    /**
     * Right-aligned controls for this section's header (e.g. a "Refresh" button
     * or a filter toggle). Rendered on the same row as `title` / `description`.
     * Mirrors `Page` `actions`.
     */
    actions?: ReactNode;
    children: ReactNode;
    /** Override inherited page density for this section only. */
    density?: AppDensity;
    className?: string;
}
declare const Section: FC<SectionProps>;

type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
type StackAlign = "start" | "center" | "end" | "stretch";
type StackJustify = "start" | "center" | "end" | "between";
interface StackProps {
    children: ReactNode;
    /** Flex direction. Default `"vertical"`. */
    direction?: "vertical" | "horizontal";
    /** Spacing between children. Default `"md"`. */
    gap?: StackGap;
    /** Cross-axis alignment. */
    align?: StackAlign;
    /** Main-axis distribution. */
    justify?: StackJustify;
    /** Allow children to wrap (horizontal rows). Default `false`. */
    wrap?: boolean;
    className?: string;
}
/**
 * Minimal flex stack with an explicit gap scale — the lightweight option for
 * spacing a small cluster of elements where a full `Section` (title, padding)
 * is too heavy. Prevents flush, gap-less groups inside cards and rows.
 */
declare const Stack: FC<StackProps>;

interface AppDensityProviderProps {
    density?: AppDensity;
    children: ReactNode;
}
/** Sets layout density for descendant app-kit blocks (`Page`, `Section`, cards, metrics). */
declare const AppDensityProvider: FC<AppDensityProviderProps>;
/** Active layout density — `"default"` outside a provider. */
declare function useAppDensity(): AppDensity;
/** Resolved layout class for the active density (or an explicit override). */
declare function useAppDensityClass(key: AppDensityClassKey, override?: AppDensity): string;

interface CopilotPanelProps extends Omit<TimbalRuntimeProviderProps, "children">, Omit<ThreadProps, "variant" | "maxWidth"> {
    className?: string;
}
/**
 * Floating copilot body — `TimbalRuntimeProvider` + compact `Thread`.
 * Rendered inside `AppCopilot`'s glass panel; reads open/expand from `useCopilot`.
 */
declare const CopilotPanel: FC<CopilotPanelProps>;

/**
 * Where the floating trigger pill sits — its center, as fractions (0–1) of the
 * viewport width/height so the position survives window resizes. `null` means
 * the default bottom-right corner.
 */
interface CopilotTriggerPosition {
    x: number;
    y: number;
}
/** Open / expand controls for the floating copilot. */
interface CopilotControls {
    /** Whether the floating panel is open. */
    open: boolean;
    setOpen: (open: boolean) => void;
    toggle: () => void;
    /** Whether the open/close affordances are shown. */
    collapsible: boolean;
    /** Whether the panel is in its full-bleed expanded layout. */
    expanded: boolean;
    setExpanded: (expanded: boolean) => void;
    /**
     * User-dragged trigger pill position, or `null` for the default corner.
     * Persisted to `localStorage` so it survives reloads. Optional so custom
     * `CopilotControls` implementations predating drag support keep compiling —
     * the built-in trigger simply isn't draggable without it.
     */
    triggerPosition?: CopilotTriggerPosition | null;
    setTriggerPosition?: (position: CopilotTriggerPosition | null) => void;
    /** Move the trigger pill back to its default corner and clear persistence. */
    resetTriggerPosition?: () => void;
}
/** Read the copilot controls, or `null` when no copilot is mounted/provided. */
declare function useCopilot(): CopilotControls | null;
type AppCopilotContextValue = Record<string, unknown>;
interface AppCopilotProviderProps {
    value: AppCopilotContextValue;
    children: ReactNode;
}
/** Supplies page/dashboard context for `AppCopilot` and agent tools. */
declare const AppCopilotProvider: FC<AppCopilotProviderProps>;
declare function useAppCopilotContext(): AppCopilotContextValue;
/** @deprecated Renamed to {@link CopilotControls}. */
type AppShellChatControls = CopilotControls;
/** @deprecated Use {@link useCopilot}. */
declare const useAppShellChat: typeof useCopilot;

interface AppCopilotProps extends CopilotPanelProps {
    /** Controlled open state. */
    open?: boolean;
    /** Uncontrolled initial open state. Default: `false`. */
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    /** Controlled expanded state. */
    expanded?: boolean;
    /** Uncontrolled initial expanded state. Defaults to expanded on small screens. */
    defaultExpanded?: boolean;
    onExpandedChange?: (expanded: boolean) => void;
    /** Show the built-in open/close affordances. Default: `true`. */
    collapsible?: boolean;
    /** Label on the floating open trigger + panel `aria-label`. Default: `Assistant`. */
    triggerLabel?: string;
    /** Hide the built-in floating trigger (drive open state via props or `useCopilot`). */
    hideTrigger?: boolean;
    /**
     * Let users drag the floating trigger pill out of the way of underlying UI.
     * The position persists across reloads; dropping the pill near its home
     * corner (or calling `useCopilot()?.resetTriggerPosition()`) resets it.
     * Default: `true`.
     */
    triggerDraggable?: boolean;
    /** Page context for agent tooling — read by descendants via `useAppCopilotContext`. */
    context?: AppCopilotContextValue;
}
/**
 * Self-contained floating copilot. Drop it anywhere — it portals a fixed glass
 * panel + SiriWave trigger to `document.body`, owns its own open/expand state,
 * and mounts the conversation runtime. No `AppShell` wiring required.
 *
 * ```tsx
 * <AppCopilot workforceId="ops" />
 * ```
 *
 * Custom trigger via controlled state:
 * ```tsx
 * const [open, setOpen] = useState(false);
 * <button onClick={() => setOpen(true)}>Ask</button>
 * <AppCopilot workforceId="ops" open={open} onOpenChange={setOpen} hideTrigger />
 * ```
 *
 * Shared state across many triggers: wrap the app in `<CopilotProvider>` and
 * read `useCopilot()` from any trigger.
 */
declare const AppCopilot: FC<AppCopilotProps>;
interface CopilotProviderProps {
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    expanded?: boolean;
    defaultExpanded?: boolean;
    onExpandedChange?: (expanded: boolean) => void;
    collapsible?: boolean;
    children: ReactNode;
}
/**
 * App-level copilot state. Wrap your app with this when you want **custom
 * triggers anywhere** in the tree to open the same `<AppCopilot>` via
 * `useCopilot()`. Most apps don't need it — `<AppCopilot>` owns its own state.
 *
 * ```tsx
 * <CopilotProvider>
 *   <Topbar /> // a button that calls useCopilot()?.setOpen(true)
 *   <AppCopilot workforceId="ops" hideTrigger />
 * </CopilotProvider>
 * ```
 */
declare const CopilotProvider: FC<CopilotProviderProps>;

interface CopilotOverlayProps {
    /** Open/expand controls — pass from `AppCopilot` so the portaled subtree never misses context. */
    controls?: CopilotControls | null;
    /** Label on the floating open trigger + the panel's `aria-label`. */
    triggerLabel?: string;
    /** Hide the built-in floating trigger (drive open state yourself). */
    hideTrigger?: boolean;
    /**
     * Let users drag the trigger pill away from UI it covers. Dropping it near
     * its home corner snaps it back (reset). Default: `true`.
     */
    triggerDraggable?: boolean;
    /** Panel body — the `CopilotPanel`. */
    children: ReactNode;
}
/**
 * The fixed, viewport-anchored copilot chrome: a glass panel (open) and a
 * SiriWave pill trigger (closed). Reads open/expand from {@link useCopilot} so
 * it works whether `AppCopilot` owns the state or an app-level `CopilotProvider`
 * does. Rendered through a portal by `AppCopilot`, so it floats over any layout.
 */
declare const CopilotOverlay: FC<CopilotOverlayProps>;

/**
 * Siri-style GLSL shaders rendered on a raw WebGL canvas.
 *
 * - `"wave"`        — the iOS voice waveform (chromatic, frequency-reactive).
 * - `"fluid-dots"`  — six metaball dots that merge, scatter and gather.
 *
 * Self-contained: a single fullscreen triangle drives a fragment shader, no
 * external WebGL library. The shaders are ported verbatim from the original
 * `siriWaveCore` / `siriFluidDotsCore` sources.
 */
type SiriWaveVariant = "wave" | "fluid-dots";
interface SiriWaveProps extends Omit<React.HTMLAttributes<HTMLCanvasElement>, "children"> {
    /** Which shader to render. */
    variant?: SiriWaveVariant;
    /** CSS display size of the square canvas, in px. */
    size?: number;
    /** Internal render resolution multiplier (lower = cheaper/blurrier). */
    renderScale?: number;
}
declare function SiriWave({ variant, size, renderScale, className, style, ...props }: SiriWaveProps): react_jsx_runtime.JSX.Element;

type DataTableSortDirection = "asc" | "desc";
interface DataTableSort {
    columnId: string;
    direction: DataTableSortDirection;
}
interface DataTableColumn<T> {
    id: string;
    header: ReactNode;
    cell: (row: T) => ReactNode;
    className?: string;
    headerClassName?: string;
    align?: "left" | "center" | "right";
    sortable?: boolean;
    /** Value used when sorting; defaults to stringifying `cell(row)`. */
    sortValue?: (row: T) => string | number | boolean | Date | null | undefined;
    /** Ellipsis-overflow long cell content inside the column. */
    truncate?: boolean;
}
interface DataTableProps<T> {
    /** Column definitions. Each has an `id`, a `header`, and a `cell(row)` renderer. */
    columns: DataTableColumn<T>[];
    /** The data array. Note: the prop is `rows` (not `data`). */
    rows: T[];
    /** Stable key per row (required) — e.g. `(row) => row.id`. Drives selection + React keys. */
    getRowKey: (row: T) => string;
    emptyTitle?: ReactNode;
    emptyDescription?: ReactNode;
    /** When `inline`, keeps the table chrome and shows an in-body empty message. */
    emptyMode?: "replace" | "inline";
    className?: string;
    sort?: DataTableSort | null;
    defaultSort?: DataTableSort | null;
    onSortChange?: (sort: DataTableSort | null) => void;
    showRowCount?: boolean;
    rowCountLabel?: (count: number) => ReactNode;
    footer?: ReactNode;
    onRowClick?: (row: T) => void;
    stickyHeader?: boolean;
    dense?: boolean;
    caption?: string;
    /**
     * Render shaped skeleton rows instead of data — for async loads. Keeps the
     * header and chrome so the table doesn't jump when data arrives.
     */
    loading?: boolean;
    /** Skeleton row count while `loading`. Default: `pageSize ?? 5`. */
    loadingRows?: number;
    /**
     * Enable a leading checkbox column for multi-row selection (bulk actions).
     * Controlled via `selectedKeys` + `onSelectionChange`, or uncontrolled with
     * `defaultSelectedKeys`. Keys are produced by `getRowKey`.
     */
    selectable?: boolean;
    selectedKeys?: string[];
    defaultSelectedKeys?: string[];
    onSelectionChange?: (keys: string[]) => void;
    /** Accessible label for the select-all checkbox. Default: "Select all rows". */
    selectAllAriaLabel?: string;
    /**
     * Rows per page. When set, the table paginates client-side and renders a
     * pager in the footer. Omit for a single, unpaginated list.
     */
    pageSize?: number;
    /** Controlled current page (0-based). */
    pageIndex?: number;
    defaultPageIndex?: number;
    onPageChange?: (pageIndex: number) => void;
}
/**
 * Sortable, optionally selectable + paginated data table. Place it **directly**
 * on a `Page` / `Section` — never inside a `Card` (it owns its own chrome).
 *
 * The data prop is `rows` (not `data`), and `getRowKey` is required.
 *
 * @example
 * ```tsx
 * type Order = { id: string; customer: string; status: string };
 * const columns: DataTableColumn<Order>[] = [
 *   { id: "customer", header: "Customer", cell: (r) => r.customer, sortable: true, sortValue: (r) => r.customer },
 *   { id: "status", header: "Status", cell: (r) => <StatusBadge tone={r.status === "Paid" ? "success" : "warn"}>{r.status}</StatusBadge> },
 * ];
 * <DataTable columns={columns} rows={orders} getRowKey={(r) => r.id} defaultSort={{ columnId: "customer", direction: "asc" }} />
 * ```
 */
declare function DataTable<T>({ columns, rows, getRowKey, emptyTitle, emptyDescription, emptyMode, className, sort: sortProp, defaultSort, onSortChange, showRowCount, rowCountLabel, footer, onRowClick, stickyHeader, dense, caption, loading, loadingRows, selectable, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, selectAllAriaLabel, pageSize, pageIndex: pageIndexProp, defaultPageIndex, onPageChange, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;

type FilterFieldType = "multiselect" | "text" | "daterange" | "numeric";
type NumericOperator = "gt" | "lt" | "eq";
interface FilterSelectOption {
    /** Stable value stored in the filter state. */
    value: string;
    /** Visible label. */
    label: string;
    /** Optional leading node (avatar, swatch, status dot). */
    icon?: ReactNode;
    /** Optional secondary text (e.g. an email under a name). */
    hint?: string;
}
interface FilterDatePreset {
    id: string;
    label: string;
    /** Optional right-aligned hint (e.g. a resolved date range). */
    hint?: string;
}
interface FilterNumericOperatorOption {
    id: NumericOperator;
    label: string;
}
/** One filterable facet — describe your table's columns with these. */
interface FilterFieldDef {
    /** Stable key; the field's value is stored under this id in `FilterValues`. */
    id: string;
    /** Menu label (use the column's name). */
    label: string;
    type: FilterFieldType;
    /** Leading icon in the menu row. */
    icon?: ReactNode;
    /** `multiselect` options. */
    options?: FilterSelectOption[];
    /** `multiselect` search box — defaults on when there are more than 8 options. */
    searchable?: boolean;
    /** Placeholder for the `multiselect` search box. */
    searchPlaceholder?: string;
    /** Placeholder for `text` / `numeric` inputs. */
    placeholder?: string;
    /** `daterange` presets — defaults to a sensible relative set. */
    presets?: FilterDatePreset[];
    /** `numeric` operators — defaults to greater/less/equals. */
    operators?: FilterNumericOperatorOption[];
}
interface FilterDateRangeValue {
    preset: string | null;
    from?: string;
    to?: string;
}
interface FilterNumericValue {
    operator: NumericOperator;
    value: string;
}
/** A single field's value — shape depends on the field `type`. */
type FilterValue = string[] | string | FilterDateRangeValue | FilterNumericValue | null | undefined;
/** All active filters, keyed by field id. */
type FilterValues = Record<string, FilterValue>;
interface FilterDropdownProps {
    /** The filterable facets — one per column you want to filter on. */
    fields: FilterFieldDef[];
    /** Controlled value. */
    value?: FilterValues;
    /** Uncontrolled initial value. */
    defaultValue?: FilterValues;
    /** Fires with the full updated `FilterValues` whenever a facet changes. */
    onChange?: (values: FilterValues) => void;
    /** Trigger button text. Default `"Filter"`. */
    label?: string;
    /** Popover alignment. Default `"start"`. */
    align?: "start" | "center" | "end";
    /**
     * Render removable pills for the active filters next to the trigger (with a
     * "Clear all"). Default `true`. Set `false` if you render your own chips.
     */
    showActiveChips?: boolean;
    className?: string;
}
declare function FilterDropdown({ fields, value, defaultValue, onChange, label, align, showActiveChips, className, }: FilterDropdownProps): react_jsx_runtime.JSX.Element;

/** Comparable a row can yield for a filter field (multiselect may yield many). */
type FilterCompareValue = string | number | boolean | Date | null | undefined | string[];
interface FilteredDataTableProps<T> extends Omit<DataTableProps<T>, "rows"> {
    /** Full, unfiltered dataset. The block filters, then hands the result to `DataTable`. */
    rows: T[];
    /** Provide a predicate to render the search box. */
    searchPredicate?: (row: T, query: string) => boolean;
    searchPlaceholder?: string;
    filterFields?: FilterFieldDef[];
    defaultFilters?: FilterValues;
    filters?: FilterValues;
    onFiltersChange?: (values: FilterValues) => void;
    /** Map a row → comparable value for a filter field id (by `field.type`). */
    getFilterValue?: (row: T, fieldId: string) => FilterCompareValue;
    /** Reference "now" for relative date presets (tests/determinism). Default: `new Date()`. */
    filterReferenceDate?: Date;
    /** Extra controls appended to the filter toolbar (e.g. a "New" button). */
    toolbarEnd?: ReactNode;
    /** Class for the wrapping `<div>` (the table keeps its own `className`). */
    containerClassName?: string;
}
/**
 * Searchable, filterable, sortable table. Drop it on a `Page`/`Section`.
 *
 * ```tsx
 * <FilteredDataTable
 *   rows={accounts}
 *   getRowKey={(r) => r.id}
 *   columns={columns}
 *   searchPlaceholder="Search customers…"
 *   searchPredicate={(r, q) => r.name.toLowerCase().includes(q.toLowerCase())}
 *   filterFields={[{ id: "plan", label: "Plan", type: "multiselect", options }]}
 *   getFilterValue={(r, id) => (id === "plan" ? r.plan : undefined)}
 *   pageSize={10}
 * />
 * ```
 */
declare function FilteredDataTable<T>({ rows, searchPredicate, searchPlaceholder, filterFields, defaultFilters, filters, onFiltersChange, getFilterValue, filterReferenceDate, toolbarEnd, containerClassName, ...dataTableProps }: FilteredDataTableProps<T>): react_jsx_runtime.JSX.Element;

type StatTileTone = "default" | "primary" | "success" | "warn" | "danger";
interface StatTileProps {
    label: ReactNode;
    value: ReactNode;
    hint?: ReactNode;
    /** Tints the value to convey status. Default `"default"` (foreground). */
    tone?: StatTileTone;
    className?: string;
}
declare const StatTile: FC<StatTileProps>;

interface StatGridItem extends StatTileProps {
    /** Stable key. */
    id: string;
}
interface StatGridProps {
    stats: StatGridItem[];
    /** Max columns at large widths. Always single-column on phones. Default `4`. */
    columns?: 2 | 3 | 4;
    className?: string;
}
declare const StatGrid: FC<StatGridProps>;

type IntegrationCardStatus = "available" | "connected" | "disabled" | "locked";
/** Catalog grid height — matches timbal-platform `INTEGRATION_CATALOG_CARD_HEIGHT_CLASS`. */
declare const INTEGRATION_CATALOG_CARD_HEIGHT_CLASS = "h-[12.25rem] min-h-[12.25rem] max-h-[12.25rem]";
interface IntegrationCardProps {
    name: ReactNode;
    description?: ReactNode;
    /** Logo node — an <img>, icon, or lettermark. Rendered in a rounded tile. */
    logo?: ReactNode;
    /** Trailing header slot (e.g. a `PlanBadge`). */
    badge?: ReactNode;
    status?: IntegrationCardStatus;
    /** Footer action — use `<Button variant="secondary" size="sm">` for platform parity. */
    action?: ReactNode;
    /** Whole-card click — makes the card a button (omit when using `action`). */
    onClick?: () => void;
    /** Accessible name when `name` is not plain text, or for whole-card buttons. */
    ariaLabel?: string;
    className?: string;
}
/**
 * Catalog card for an integration / connector — elevated secondary chrome (same
 * surface as bordered buttons), logo tile, and optional footer CTA.
 */
declare const IntegrationCard: FC<IntegrationCardProps>;

interface IntegrationsGridItem extends IntegrationCardProps {
    /** Stable key. */
    id: string;
}
interface IntegrationsGridProps {
    integrations: IntegrationsGridItem[];
    /** Max columns at large widths. Default `3`. */
    columns?: 2 | 3 | 4;
    /** `ConnectionRow` children rendered in a list below the catalog. */
    connections?: ReactNode;
    connectionsLabel?: string;
    /** Shown when `integrations` is empty (e.g. an `EmptyState`). */
    emptyState?: ReactNode;
    className?: string;
}
declare const IntegrationsGrid: FC<IntegrationsGridProps>;

interface ResourceCardProps {
    title: ReactNode;
    subtitle?: ReactNode;
    /** Logo / icon node, rendered in a rounded tile. */
    media?: ReactNode;
    /** Status pill or badge (top-right). */
    badge?: ReactNode;
    /** Footer metadata (e.g. last updated, owner). */
    footer?: ReactNode;
    /** Trailing action in the footer (e.g. sparkline, menu). */
    action?: ReactNode;
    /** Whole-card click — makes the card a button. */
    onClick?: () => void;
    /** Accessible name when `title` is not plain text. */
    ariaLabel?: string;
    className?: string;
    /** Visual variant of the card. Default `"default"` (elevated gradient). */
    variant?: "default" | "flat" | "outline";
    /** Shape of the media container. Default `"circle"`. */
    avatarShape?: "circle" | "rounded";
}
/**
 * Project / agent / dataset card — same elevated surface as integration catalog tiles.
 */
declare const ResourceCard: FC<ResourceCardProps>;

interface ResourceGalleryItem extends ResourceCardProps {
    /** Stable key. */
    id: string;
}
interface ResourceGalleryProps {
    resources: ResourceGalleryItem[];
    /** Max columns at large widths. Default `3`. */
    columns?: 2 | 3 | 4;
    /** Shown when `resources` is empty (e.g. an `EmptyState`). */
    emptyState?: ReactNode;
    className?: string;
}
declare const ResourceGallery: FC<ResourceGalleryProps>;

interface SettingsLayoutSection {
    /** Stable key. */
    id: string;
    title: ReactNode;
    description?: ReactNode;
    /** Node under the description in the left rail (e.g. a CTA). */
    descriptionFooter?: ReactNode;
    children: ReactNode;
}
interface SettingsLayoutProps {
    sections: SettingsLayoutSection[];
    /** Rendered after the sections, in its own bordered band (e.g. a `<DangerZone>`). */
    dangerZone?: ReactNode;
    /** Show the floating discard/save bar (raise on first edit). */
    dirty?: boolean;
    isSaving?: boolean;
    onSave?: () => void;
    onDiscard?: () => void;
    saveLabel?: ReactNode;
    discardLabel?: ReactNode;
    unsavedMessage?: ReactNode;
    className?: string;
}
declare const SettingsLayout: FC<SettingsLayoutProps>;

type SurfaceCardVariant = "default" | "muted" | "outline" | "elevated" | "flat" | "hierarchical";
type SurfaceCardTone = "default" | "primary" | "success" | "warn" | "danger";
interface SurfaceCardProps {
    children: ReactNode;
    /** Surface chrome. Default `"default"` (elevated gradient). */
    variant?: SurfaceCardVariant;
    /** Accent ring tint. Default `"default"` (none). */
    tone?: SurfaceCardTone;
    /** Makes the card interactive with hover/active transitions. Defaults to true if onClick is provided. */
    hoverable?: boolean;
    /** Callback for when the card is clicked. Renders as a button when provided. */
    onClick?: () => void;
    /** Accessible name for the interactive button. */
    ariaLabel?: string;
    className?: string;
}
declare const SurfaceCard: FC<SurfaceCardProps>;

interface EmptyStateProps {
    title: ReactNode;
    description?: ReactNode;
    action?: ReactNode;
    className?: string;
    /** Visual variant of the empty state. Default `"default"`. */
    variant?: "default" | "layered" | "compact";
}
declare const EmptyState: FC<EmptyStateProps>;

/**
 * Tone skin — a soft tint, a matching foreground, and an inset hairline ring so
 * the pill reads as a deliberate object rather than faint colored text. The dot
 * (when enabled) uses an opaque version of the same hue.
 */
declare const statusBadgeToneClass: {
    readonly default: "bg-muted text-foreground ring-border";
    readonly primary: "bg-primary/10 text-primary ring-primary/20";
    readonly success: "bg-emerald-500/10 text-emerald-700 ring-emerald-500/20 dark:text-emerald-400";
    readonly warn: "bg-amber-500/10 text-amber-700 ring-amber-500/25 dark:text-amber-400";
    readonly danger: "bg-destructive/10 text-destructive ring-destructive/20";
    readonly muted: "bg-muted/70 text-muted-foreground ring-border/60";
};
type StatusBadgeTone = keyof typeof statusBadgeToneClass;
interface StatusBadgeProps {
    children: ReactNode;
    /**
     * Tone tint. One of `default | primary | success | warn | danger | muted`.
     * (Different vocabulary from `StatusDot`, which uses `online | busy | …`.)
     */
    tone?: StatusBadgeTone;
    /** Render a small leading status dot in the tone color. */
    dot?: boolean;
    className?: string;
}
/**
 * A labeled status **pill** (soft tint + ring) for a record's state — order
 * status, plan tier, health. For a tiny presence/liveness indicator (online /
 * busy / offline) use `StatusDot` instead.
 *
 * @example
 * ```tsx
 * <StatusBadge tone="success">Paid</StatusBadge>
 * <StatusBadge tone="warn" dot>Pending</StatusBadge>
 * ```
 */
declare const StatusBadge: FC<StatusBadgeProps>;

interface AppConfirmDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: ReactNode;
    description?: ReactNode;
    confirmLabel?: string;
    cancelLabel?: string;
    onConfirm: () => void;
    destructive?: boolean;
    className?: string;
}
/**
 * Confirm/cancel dialog for app flows (delete row, discard changes, etc.).
 */
declare const AppConfirmDialog: FC<AppConfirmDialogProps>;

type InfoCardTone = "neutral" | "info" | "success" | "warn" | "danger";
interface InfoCardProps {
    title?: ReactNode;
    children?: ReactNode;
    /** Leading icon node. */
    icon?: ReactNode;
    /** Trailing CTA / action. */
    action?: ReactNode;
    tone?: InfoCardTone;
    layout?: "horizontal" | "vertical";
    onClick?: () => void;
    ariaLabel?: string;
    className?: string;
}
/**
 * Soft info / callout panel with optional icon, title, body and CTA. For tips,
 * empty hints, upsell nudges, and read-only notices. Supports horizontal and vertical layouts.
 */
declare const InfoCard: FC<InfoCardProps>;

type StatusDotTone = "online" | "busy" | "offline" | "error" | "neutral";
interface StatusDotProps {
    /**
     * Presence/liveness tone. One of `online | busy | offline | error | neutral`.
     * (Different vocabulary from `StatusBadge`, which uses `success | warn | …`.)
     */
    tone?: StatusDotTone;
    /** Optional label rendered to the right of the dot. */
    label?: ReactNode;
    /** Soft pulse halo for live/online states. */
    pulse?: boolean;
    className?: string;
}
/**
 * Tiny presence/liveness indicator dot, optionally labeled and pulsing — agent
 * online, service up/down. For a labeled state pill (Paid / Pending / Failed)
 * use `StatusBadge` instead.
 *
 * @example
 * ```tsx
 * <StatusDot tone="online" label="Online" pulse />
 * <StatusDot tone="offline" label="Offline" />
 * ```
 */
declare const StatusDot: FC<StatusDotProps>;

interface DescriptionItem {
    label: ReactNode;
    value: ReactNode;
    className?: string;
    labelClassName?: string;
    valueClassName?: string;
}
interface DescriptionListProps {
    items: DescriptionItem[];
    /** Stack label above value instead of two columns. */
    stacked?: boolean;
    className?: string;
}
/** Read-only key/value metadata list (resource details, settings summaries). */
declare const DescriptionList: FC<DescriptionListProps>;

interface ExpandableSectionProps {
    title: ReactNode;
    /** Leading icon node. */
    icon?: ReactNode;
    /** Small count / badge after the title. */
    count?: ReactNode;
    children: ReactNode;
    /** Controlled open state. */
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    className?: string;
}
/** Collapsible section with an animated body. Controlled or uncontrolled. */
declare const ExpandableSection: FC<ExpandableSectionProps>;

interface AlertCardProps {
    /** The primary title/heading of the alert. */
    title: ReactNode;
    /** Detailed description or content of the alert. */
    description?: ReactNode;
    /** Optional category badge/tag label. */
    category?: ReactNode;
    /** Tone for the category badge. Default `"default"`. */
    categoryTone?: StatusBadgeTone;
    /** Optional status badge/tag label. */
    status?: ReactNode;
    /** Tone for the status badge. Default `"default"`. */
    statusTone?: StatusBadgeTone;
    /** Optional guided action description. If provided, renders with a bold "Action:" prefix at the bottom. */
    action?: ReactNode;
    /** Custom trailing element on the right. If omitted and `onClick` is provided, a chevron-right is rendered. */
    trailing?: ReactNode;
    /** Whole-card click handler. When provided, the card is rendered as an interactive button. */
    onClick?: () => void;
    /** Accessible name for the card button when interactive. */
    ariaLabel?: string;
    className?: string;
}
/**
 * Standardized Alert / Action card component.
 *
 * Admits category and status tags, clear titles, descriptive bodies, and automated action
 * footers, keeping generated UIs beautiful and highly guided.
 * Fully interactive with safe, neutral-colored hover transitions.
 */
declare const AlertCard: FC<AlertCardProps>;

interface CatalogCardProps {
    /** The primary title of the catalog item. */
    title: ReactNode;
    /** Sub-title, author, or publisher (e.g., "google"). */
    subtitle?: ReactNode;
    /** Logo or icon node, rendered in the top-left next to the title. */
    logo?: ReactNode;
    /** External URL for the title link. If provided, renders an external link icon next to the title. */
    href?: string;
    /** Header category tag or status badge (e.g., `<StatusBadge>Text Generation</StatusBadge>`). */
    badge?: ReactNode;
    /** Main description or body content. */
    description?: ReactNode;
    /** Horizontal list of metadata tags, badges, or text strings right above the footer. */
    tags?: ReactNode[];
    /** Optional custom links rendered on the bottom-left of the footer. */
    footerLinks?: Array<{
        label: ReactNode;
        href: string;
    }>;
    /** Value to copy when clicking the copy button in the bottom-right footer. */
    copyValue?: string;
    /** Label for the copy button. Default `"Copy ID"`. */
    copyLabel?: ReactNode;
    /** Custom footer actions, rendered at the bottom-right of the footer (replaces copy button if provided). */
    actions?: ReactNode;
    /** Whole-card click handler. When provided, the card renders as a focusable button with neutral hover highlight. */
    onClick?: () => void;
    /** Accessible name for the card button. */
    ariaLabel?: string;
    className?: string;
}
/**
 * Standardized high-fidelity Catalog / Model Card component.
 *
 * Designed to represent sophisticated marketplace and routing catalog cards (models, datasets, tools).
 * Features structured headers with logos, links, sub-headers, multiline descriptions, metadata row,
 * and a separated footer with link lists and automatic copy actions.
 * Interactive cards have safe, neutral-colored hover animations.
 */
declare const CatalogCard: FC<CatalogCardProps>;

interface SettingsSectionHeaderProps {
    title: ReactNode;
    description?: ReactNode;
    className?: string;
}
/** Title + description block shared across settings pages. */
declare const SettingsSectionHeader: FC<SettingsSectionHeaderProps>;
interface SettingsSectionProps {
    title: ReactNode;
    description?: ReactNode;
    /** Rendered under the description in the left rail (e.g. a primary CTA). */
    descriptionFooter?: ReactNode;
    children: ReactNode;
    /** Drop the top divider (first section in a stack). */
    noBorderTop?: boolean;
    className?: string;
}
/**
 * Two-column settings block: a compact title/description rail on the left and
 * the controls on the right. Stacks on small screens. The canonical settings
 * page grammar from the platform — purely presentational.
 */
declare const SettingsSection: FC<SettingsSectionProps>;

interface FieldRowProps {
    label: ReactNode;
    /** The control(s) — input, switch, select, button, etc. */
    children: ReactNode;
    description?: ReactNode;
    /** Place the control inline to the right of the label (good for switches). */
    inline?: boolean;
    htmlFor?: string;
    className?: string;
}
/**
 * Labeled settings row: label + optional description on one side, control(s)
 * on the other. `inline` puts the control to the right (toggles); stacked
 * otherwise (inputs/textareas).
 */
declare const FieldRow: FC<FieldRowProps>;

interface FloatingUnsavedChangesBarProps {
    visible: boolean;
    /** Message on the left (e.g. "Unsaved changes"). */
    message?: ReactNode;
    discardLabel?: ReactNode;
    saveLabel?: ReactNode;
    isSaving?: boolean;
    saveDisabled?: boolean;
    onDiscard?: () => void;
    onSave?: () => void;
    ariaLabel?: string;
    className?: string;
}
/**
 * Viewport-fixed discard/save pill, portaled to `document.body` so parent
 * transforms and overflow scrollers never clip it. Springs in from the bottom.
 */
declare const FloatingUnsavedChangesBar: FC<FloatingUnsavedChangesBarProps>;

interface DangerZoneActionProps {
    title: ReactNode;
    description?: ReactNode;
    /** The destructive control (e.g. a delete Button). */
    action: ReactNode;
    className?: string;
}
/** A single destructive row inside `DangerZone`. */
declare const DangerZoneAction: FC<DangerZoneActionProps>;
interface DangerZoneProps {
    title?: ReactNode;
    description?: ReactNode;
    children: ReactNode;
    className?: string;
}
/**
 * Destructive-actions container with a destructive-tinted border. Wrap one or
 * more `DangerZoneAction` rows (delete project, transfer ownership, etc.).
 */
declare const DangerZone: FC<DangerZoneProps>;

interface IntegrationsEmptyStateProps {
    title?: ReactNode;
    description?: ReactNode;
    /** Decorative icon / illustration node. */
    icon?: ReactNode;
    /** Primary CTA (e.g. a "Browse catalog" button). */
    action?: ReactNode;
    className?: string;
}
/** Centered empty hero — same elevated chrome as catalog cards. */
declare const IntegrationsEmptyState: FC<IntegrationsEmptyStateProps>;

type PlanBadgeTone = "free" | "pro" | "enterprise" | "beta" | "soon";
interface PlanBadgeProps {
    /** Kept for API compatibility; styling is neutral for all tiers. */
    tone?: PlanBadgeTone;
    children: ReactNode;
    className?: string;
}
/** Small plan / tier chip on integration catalog cards. */
declare const PlanBadge: FC<PlanBadgeProps>;

interface ConnectionRowProps {
    name: ReactNode;
    /** Logo / icon node, rendered in a small rounded tile. */
    logo?: ReactNode;
    /** Secondary line under the name (account, scope, last sync…). */
    meta?: ReactNode;
    /** Status / type pill on the right (e.g. a `StatusBadge` or `PlanBadge`). */
    badge?: ReactNode;
    /** Trailing action(s) — manage, disconnect, overflow menu. */
    action?: ReactNode;
    onClick?: () => void;
    /** Accessible name when `name` is not plain text. */
    ariaLabel?: string;
    className?: string;
}
/**
 * One connected provider as a horizontal row. Wrap rows in a container with
 * `TIMBAL_V2_SECONDARY_CHROME` + `divide-y divide-border` for a single elevated panel.
 */
declare const ConnectionRow: FC<ConnectionRowProps>;
/** List shell for stacked `ConnectionRow`s — one elevated secondary surface. */
declare const connectionRowListClass: string;

interface ConnectionRowListProps {
    children: ReactNode;
    /** Accessible name for the list region. */
    "aria-label"?: string;
    className?: string;
}
/**
 * Elevated panel for stacked `ConnectionRow`s — prefer this over hand-rolling
 * `connectionRowListClass` + dividers.
 */
declare const ConnectionRowList: FC<ConnectionRowListProps>;

interface SubNavItem {
    id: string;
    label: ReactNode;
}
interface SubNavProps {
    items: SubNavItem[];
    activeId: string;
    onChange: (id: string) => void;
    className?: string;
    "aria-label"?: string;
    /** Passed to the underlying pill control for shared-layout animation. */
    layoutId?: string;
}
/**
 * Section tabs using the same pill segmented control as timbal-platform
 * (Build/Manage, dashboard section bars).
 */
declare const SubNav: FC<SubNavProps>;

interface BreadcrumbEntry {
    label: ReactNode;
    href?: string;
    onClick?: () => void;
}
/** @deprecated Use `BreadcrumbEntry` — avoids clashing with the UI `BreadcrumbItem` primitive. */
type BreadcrumbItem = BreadcrumbEntry;
interface BreadcrumbsProps {
    items: BreadcrumbEntry[];
    className?: string;
}
declare const Breadcrumbs: FC<BreadcrumbsProps>;

interface FieldProps {
    label: ReactNode;
    hint?: ReactNode;
    error?: ReactNode;
    children?: ReactNode;
    className?: string;
    htmlFor?: string;
}
declare const Field: FC<FieldProps>;
interface FieldInputProps extends InputHTMLAttributes<HTMLInputElement> {
    label: ReactNode;
    hint?: ReactNode;
    error?: ReactNode;
    fieldClassName?: string;
}
declare const FieldInput: FC<FieldInputProps>;

interface FieldTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
    label: FieldProps["label"];
    hint?: FieldProps["hint"];
    error?: FieldProps["error"];
    fieldClassName?: string;
}
declare const FieldTextarea: FC<FieldTextareaProps>;

interface FieldSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
    label: FieldProps["label"];
    hint?: FieldProps["hint"];
    error?: FieldProps["error"];
    fieldClassName?: string;
    children: ReactNode;
}
/**
 * A labeled form select — a native `<select>` wrapped in a `Field` (label,
 * hint, error), styled to match the kit's inputs. Children are plain `<option>`
 * elements. Use this in forms.
 *
 * For a rich, searchable/custom-rendered dropdown (Radix), compose `Select` +
 * `SelectTrigger` / `SelectContent` / `SelectItem` from `@timbal-ai/timbal-react/ui`
 * instead.
 *
 * @example
 * ```tsx
 * <FieldSelect label="Environment" defaultValue="prod">
 *   <option value="prod">Production</option>
 *   <option value="staging">Staging</option>
 * </FieldSelect>
 * ```
 */
declare const FieldSelect: FC<FieldSelectProps>;

interface FieldSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
    label: ReactNode;
    description?: ReactNode;
    className?: string;
}
declare const FieldSwitch: FC<FieldSwitchProps>;

interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
    className?: string;
}
declare const SearchInput: FC<SearchInputProps>;

interface FormSectionProps {
    title?: ReactNode;
    children: ReactNode;
    className?: string;
}
declare const FormSection: FC<FormSectionProps>;

interface FilterBarProps {
    children: ReactNode;
    className?: string;
}
declare const FilterBar: FC<FilterBarProps>;

interface FilterFieldProps {
    /** Visible label above the control. Omit for unlabeled fields (e.g. search). */
    label?: ReactNode;
    children: ReactNode;
    className?: string;
}
/** Single filter control with an optional label — use inside `FilterBar`. */
declare const FilterField: FC<FilterFieldProps>;

interface ChartPanelProps {
    title?: ReactNode;
    description?: ReactNode;
    /** Built-in SVG chart — alternative to custom `children`. */
    artifact?: ChartArtifact;
    children?: ReactNode;
    actions?: ReactNode;
    /** Plot height in px. Defaults to the active page density (300 default, 220 compact). */
    height?: number;
    /** Render a skeleton at the plot height while data loads. */
    loading?: boolean;
    className?: string;
}
/**
 * A titled card wrapping a single chart — pass a built-in `artifact` or your
 * own chart as `children`. Use this when you just need "a chart in a card."
 *
 * Choosing between the two chart cards:
 * - `ChartPanel` — one chart in a titled shell. The simple, common case.
 * - `MetricChartCard` — a selectable KPI row **above** a chart, where clicking a
 *   metric swaps the series. Use only when you need that interaction.
 *
 * @example
 * ```tsx
 * <ChartPanel title="Revenue" description="Last 6 months">
 *   <LineAreaChart data={rows} xKey="month" series={["revenue"]} />
 * </ChartPanel>
 * ```
 */
declare const ChartPanel: FC<ChartPanelProps>;

interface SparklineProps {
    /** Numeric values, or objects from which `dataKey` is read. */
    data: Array<number | Record<string, unknown>>;
    dataKey?: string;
    color?: string;
    /** Show a soft gradient fill under the line. Default true. */
    area?: boolean;
    width?: number;
    height?: number;
    strokeWidth?: number;
    className?: string;
    ariaLabel?: string;
    /** Enable hover crosshair + value tooltip. Default false. */
    interactive?: boolean;
    /** Per-point category labels (aligned to `data`) shown in the tooltip. */
    labels?: ReactNode[];
    /** Format the value shown in the tooltip. Defaults to a compact number. */
    formatValue?: (value: number, index: number) => ReactNode;
}
/** Tiny inline trend line — no axes, no chrome. For table cells and stat tiles. */
declare const Sparkline: FC<SparklineProps>;

interface MetricTileProps {
    label: ReactNode;
    value: ReactNode;
    /** Small unit suffix next to the value (e.g. "ms", "%"). */
    unit?: ReactNode;
    /** Optional trend pill or text (e.g. "+8%", "↗ 45100.00%"). */
    trend?: ReactNode;
    trendTone?: "up" | "down" | "neutral";
    /** Trend presentation variant. Default `"pill"`. */
    trendVariant?: "pill" | "inline";
    /** Selected state — draws the bottom accent bar (for selectable rows). */
    active?: boolean;
    /** Bottom accent bar color variant. Default `"default"`. */
    activeTone?: "default" | "primary" | "success" | "warn" | "danger" | "neutral";
    /** Right divider between cells in a metrics row. */
    showDivider?: boolean;
    /** Makes the tile a button. Omit for a static tile. */
    onSelect?: () => void;
    /** Sparkline chart data values to render inside the cell. */
    sparklineData?: Array<number | Record<string, unknown>>;
    /** Optional config options for the nested `<Sparkline />` component. */
    sparklineConfig?: Omit<SparklineProps, "data">;
    /** Custom sparkline component to render (overrides sparklineData). */
    sparkline?: ReactNode;
    /** Override the default accessible name (use when `label` is not plain text). */
    ariaLabel?: string;
    className?: string;
}
/**
 * Single KPI cell — matches timbal-platform `MetricsRowCard` / `MetricCell`.
 * Use inside `MetricRow` or `MetricChartCard`, or standalone.
 * Supports inline trend tags and gorgeous background sparklines matching the premium look.
 */
declare const MetricTile: FC<MetricTileProps>;

interface MetricCardHeaderProps {
    title?: ReactNode;
    /** Tag or label next to the title (e.g. "Last 24 hours"). */
    titleTag?: ReactNode;
    /** Hook for `aria-labelledby` on the parent card `<section>`. */
    titleId?: string;
    description?: ReactNode;
    actions?: ReactNode;
}

interface MetricRowItem {
    id: string;
    label: MetricTileProps["label"];
    value: MetricTileProps["value"];
    unit?: MetricTileProps["unit"];
    trend?: MetricTileProps["trend"];
    trendTone?: MetricTileProps["trendTone"];
    trendVariant?: MetricTileProps["trendVariant"];
    activeTone?: MetricTileProps["activeTone"];
    sparklineData?: MetricTileProps["sparklineData"];
    sparklineConfig?: MetricTileProps["sparklineConfig"];
    sparkline?: MetricTileProps["sparkline"];
}
interface MetricRowProps extends MetricCardHeaderProps {
    metrics: MetricRowItem[];
    /** When set, tiles are selectable and call `onMetricChange`. */
    activeMetricId?: string;
    defaultActiveMetricId?: string;
    onMetricChange?: (id: string) => void;
    /** Accessible name for the KPI tile group (when tiles are selectable). */
    metricsAriaLabel?: string;
    /** Render skeleton tiles while metrics load. Falls back to `metrics.length || 4`. */
    loading?: boolean;
    className?: string;
}
/**
 * Platform-style KPI strip in one elevated card — no chart.
 * Use for overview rows; pair with `MetricChartCard` when you need the plot below.
 * Fully supports background sparklines and rich inline trend metadata.
 *
 * Each metric needs a stable `id`, a `label`, and a `value`. Add `onMetricChange`
 * (or `activeMetricId`) to make the tiles selectable.
 *
 * @example
 * ```tsx
 * <MetricRow
 *   metrics={[
 *     { id: "mrr", label: "MRR", value: "$48.2k", trend: "+12%" },
 *     { id: "active", label: "Active users", value: "1,204" },
 *     { id: "churn", label: "Churn", value: "1.8%" },
 *   ]}
 * />
 * ```
 */
declare const MetricRow: FC<MetricRowProps>;

/** Curve interpolation styles, mirroring recharts/shadcn `type`. */
type CurveType = "monotone" | "linear" | "step";

interface ChartMargin {
    top: number;
    right: number;
    bottom: number;
    left: number;
}
/** Recharts `margin` for flush vs default layouts. */
declare function resolveChartMargin(options: {
    flush: boolean;
    showXAxis: boolean;
    showYAxis: boolean;
}): ChartMargin;
/**
 * Bar category gap for flush layouts. Flush bars still need breathing room so
 * they read as distinct columns inset from the card edges (rather than one
 * glued-together block running wall to wall) — especially once category labels
 * are shown beneath them.
 */
declare function flushBarCategoryGap(flush: boolean, showCategoryAxis: boolean): string | undefined;
/** Whether flush line/area should use point scale + no-gap (edge-to-edge stroke, labeled x-axis). */
declare function flushLineAreaEdgeToEdge(flush: boolean, variant: "area" | "line" | "bar", showXAxis: boolean, showYAxis: boolean): boolean;
type TooltipRow = {
    payload?: Record<string, unknown>;
};
/** Category label for cartesian tooltips (xKey / horizontal-bar category). */
declare function resolveTooltipCategory(label: unknown, payload: TooltipRow[] | undefined, xKey: string, data: Array<Record<string, unknown>>, formatX: (raw: unknown, index: number) => string): string;

/**
 * Theme-aware default series palette. Each entry reads a `--chart-N` token
 * (defined in `styles.css`, overridable per host app) with a literal fallback,
 * so charts rebrand automatically when the theme changes.
 */
declare const CHART_PALETTE: readonly ["var(--chart-1, #4f46e5)", "var(--chart-2, #3b82f6)", "var(--chart-3, #0ea5e9)", "var(--chart-4, #6366f1)", "var(--chart-5, #60a5fa)", "var(--chart-6, #2563eb)"];
interface ChartSeries {
    /** Key in each data row holding this series' numeric value. */
    dataKey: string;
    /** Legend / tooltip label. Defaults to `dataKey`. */
    label?: string;
    /**
     * CSS color for the series. Defaults to the `--chart-N` palette by index, so
     * you usually omit it. If you set it, pass a token **directly** —
     * `"var(--chart-3)"` or `"var(--destructive)"` — never `"hsl(var(--chart-3))"`:
     * the tokens are already OKLCH colors, so wrapping them in `hsl()/rgb()` is
     * invalid CSS and renders an empty chart.
     */
    color?: string;
}
type ChartVariant = "area" | "line" | "bar";
/** `flush` — plot edge-to-edge (no side/bottom inset); axes/legend off by default. */
type ChartLayout = "default" | "flush";
/** Tooltip series marker, mirroring shadcn's `ChartTooltipContent` indicators. */
type ChartTooltipIndicator = "dot" | "line" | "dashed";
interface LineAreaChartProps {
    data: Array<Record<string, unknown>>;
    /** Category / x-axis key. Inferred from the first non-numeric field if omitted. */
    xKey?: string;
    /** Series to plot. Strings are shorthand for `{ dataKey }`. Inferred if omitted. */
    series?: Array<ChartSeries | string>;
    variant?: ChartVariant;
    /** Plot height in px (width is responsive). Default 240. */
    height?: number;
    /** Appended to axis ticks and tooltip values (e.g. "ms", "%"). */
    unit?: string;
    /** Fix the y-domain max (e.g. 100 for percentages). */
    yMax?: number;
    /** Line / area interpolation. Default `monotone`. */
    curve?: CurveType;
    /** Stack series on top of each other (area + bar). Default false. */
    stacked?: boolean;
    /** Draw point markers on line/area series. */
    dots?: boolean | "active";
    /** Bar orientation. `horizontal` swaps category to the y-axis. Default `vertical`. */
    orientation?: "vertical" | "horizontal";
    /** Corner radius for bars. Default 4. */
    barRadius?: number;
    /** Grid line direction. Default `horizontal`. */
    gridLines?: "horizontal" | "vertical" | "both" | "none";
    /** `flush` fills the container width/height and hides axes/legend by default. */
    layout?: ChartLayout;
    showGrid?: boolean;
    showXAxis?: boolean;
    showYAxis?: boolean;
    /** Series legend below the plot. Default: on when `layout` is `default` and multiple series. */
    showLegend?: boolean;
    showTooltip?: boolean;
    /** Tooltip series marker style. Default `dot`. */
    tooltipIndicator?: ChartTooltipIndicator;
    formatValue?: (value: number) => string;
    formatX?: (raw: unknown, index: number) => string;
    /** Truncate long category axis labels (full text in native tooltip). Default true. */
    clipTicks?: boolean;
    className?: string;
    /** Accessible label for the chart image. */
    ariaLabel?: string;
}
/**
 * shadcn-style chart built on recharts. A single component renders line, area,
 * and bar charts (vertical or horizontal), with stacking, curve interpolation,
 * dots, grid control, and the shared `ChartTooltipContent` / `ChartLegendContent`
 * chrome. Series colors flow from the theme `--chart-N` tokens via `ChartConfig`.
 *
 * Pass `data` as an array of rows and (optionally) `series` to pick which keys
 * to plot — both `xKey` and `series` are inferred from the data when omitted.
 * Colors come from the `--chart-N` tokens automatically; don't hand-author them.
 *
 * @example
 * ```tsx
 * // Stacked area, colors inferred from the theme:
 * <LineAreaChart
 *   data={[
 *     { month: "Jan", desktop: 186, mobile: 80 },
 *     { month: "Feb", desktop: 305, mobile: 200 },
 *   ]}
 *   xKey="month"
 *   series={["desktop", "mobile"]}
 *   variant="area"
 *   stacked
 * />
 * ```
 * @example
 * ```tsx
 * // Horizontal bar with a custom token color on one series:
 * <LineAreaChart
 *   data={rows}
 *   xKey="team"
 *   series={[{ dataKey: "wins", color: "var(--chart-2)" }]}
 *   variant="bar"
 *   orientation="horizontal"
 * />
 * ```
 */
declare const LineAreaChart: FC<LineAreaChartProps>;

interface MetricChartMetric {
    id: string;
    label: ReactNode;
    value: ReactNode;
    unit?: ReactNode;
    trend?: ReactNode;
    trendTone?: MetricTileProps["trendTone"];
    trendVariant?: MetricTileProps["trendVariant"];
    activeTone?: MetricTileProps["activeTone"];
    sparklineData?: MetricTileProps["sparklineData"];
    sparklineConfig?: MetricTileProps["sparklineConfig"];
    sparkline?: MetricTileProps["sparkline"];
    /** Time-series for this metric, shown in the chart when selected. */
    data?: Array<Record<string, unknown>>;
    /** Value field within `data`. Default "value". */
    dataKey?: string;
    /** Line/area color for this metric. Defaults to the chart palette. */
    color?: string;
}
interface MetricChartCardProps {
    title?: ReactNode;
    titleTag?: ReactNode;
    description?: ReactNode;
    /** Trailing header control (e.g. a "See detail" link/button). */
    actions?: ReactNode;
    metrics: MetricChartMetric[];
    /** Controlled selected metric id. */
    activeMetricId?: string;
    defaultActiveMetricId?: string;
    onMetricChange?: (id: string) => void;
    /** x-axis key shared across metric series. Default "date". */
    xKey?: string;
    variant?: ChartVariant;
    /** Chart plot height in px. Default 300 (platform overview). */
    height?: number;
    formatX?: (raw: unknown, index: number) => string;
    formatValue?: (value: number) => string;
    /** Shown when the active metric has no data. */
    emptyLabel?: ReactNode;
    /** Accessible name for the selectable KPI tile group. */
    metricsAriaLabel?: string;
    /** Render skeleton tiles + chart while data loads. */
    loading?: boolean;
    className?: string;
}
/**
 * Analytics card: a selectable KPI row over a flush area chart — clicking a
 * metric tile swaps the plotted series (the timbal-platform `MetricsRowCard` /
 * Studio analytics pattern). Supports background sparklines and rich inline
 * trend metadata.
 *
 * If you only need a single chart in a titled card (no selectable KPI row), use
 * `ChartPanel` instead.
 */
declare const MetricChartCard: FC<MetricChartCardProps>;

/**
 * Run `callback` every `delayMs`. Pass `null` to pause (the timer is torn down
 * and restarted when the delay changes). The latest `callback` is always used,
 * so you can pass an inline function without resetting the interval.
 */
declare function useInterval(callback: () => void, delayMs: number | null): void;
interface UseLiveQueryOptions {
    /** Poll interval in ms. Omit / `null` for a one-shot fetch (no polling). */
    intervalMs?: number | null;
    /** Pause fetching + polling entirely. Default: `true`. */
    enabled?: boolean;
    /** Fetch immediately on mount (vs. waiting one interval). Default: `true`. */
    immediate?: boolean;
    /**
     * Pause polling while the tab is hidden and refetch on focus — avoids
     * burning requests on a backgrounded dashboard. Default: `true`.
     */
    refetchOnFocus?: boolean;
}
interface UseLiveQueryResult<T> {
    data: T | undefined;
    error: unknown;
    /** True until the first response settles. */
    loading: boolean;
    /** True during background refreshes (data already present). */
    refreshing: boolean;
    /** Timestamp (ms) of the last successful fetch, or null. */
    lastUpdated: number | null;
    /** Manually trigger a refetch (e.g. a "Refresh" button). */
    refetch: () => void;
    /**
     * Alias for `refetch`, matching the `refresh` naming used by the other data
     * hooks (`useWorkforces`, `useConversations`, `useConversation`).
     */
    refresh: () => void;
}
/**
 * Poll an async source on an interval for live dashboards (alerts, metrics,
 * logs). Handles loading/refreshing/error state, ignores out-of-order and
 * post-unmount responses, pauses while the tab is hidden, and exposes a manual
 * `refetch`. Pair with `authFetch` for `/api/*` calls.
 *
 * ```ts
 * const { data, loading, refetch } = useLiveQuery(
 *   () => authFetch("/api/alerts").then((r) => r.json()),
 *   { intervalMs: 15_000 },
 * );
 * ```
 *
 * `fetcher` is read through a ref, so an inline arrow doesn't reset polling;
 * change `intervalMs` / `enabled` to control the cadence.
 */
declare function useLiveQuery<T>(fetcher: () => Promise<T>, options?: UseLiveQueryOptions): UseLiveQueryResult<T>;

interface PieChartProps {
    /** One row per slice. */
    data: Array<Record<string, unknown>>;
    /** Category / label key. Inferred from the first non-numeric field if omitted. */
    nameKey?: string;
    /** Value key. Default "value". */
    dataKey?: string;
    /** Donut hole radius as a fraction of the outer radius (0 = full pie). Default 0. */
    innerRadius?: number;
    /**
     * Per-slice colors. Defaults to the theme `--chart-N` palette (recommended).
     * If you override, pass tokens directly (`["var(--chart-1)", "var(--chart-2)"]`)
     * — never `"hsl(var(--chart-1))"` (the tokens are already OKLCH).
     */
    colors?: string[];
    /** Plot height in px. Default 260. */
    height?: number;
    /** Show the slice legend below the chart. Default true. */
    showLegend?: boolean;
    /** Show value labels on each slice. Default false. */
    showLabels?: boolean;
    showTooltip?: boolean;
    tooltipIndicator?: ChartTooltipIndicator;
    /** Big number drawn in the donut hole (e.g. the total). Requires `innerRadius > 0`. */
    centerValue?: ReactNode;
    /** Caption under `centerValue`. */
    centerLabel?: ReactNode;
    unit?: string;
    formatValue?: (value: number) => string;
    className?: string;
    ariaLabel?: string;
}
/**
 * Pie / donut chart on recharts. Pass `innerRadius` (0–1 fraction) for a donut
 * and `centerValue` / `centerLabel` to fill the hole with a KPI. Slice colors
 * come from the theme `--chart-N` palette (or `colors`).
 *
 * @example
 * ```tsx
 * // Donut with a total in the hole:
 * <PieChart
 *   data={[
 *     { browser: "Chrome", visitors: 275 },
 *     { browser: "Safari", visitors: 200 },
 *     { browser: "Firefox", visitors: 187 },
 *   ]}
 *   nameKey="browser"
 *   dataKey="visitors"
 *   innerRadius={0.6}
 *   centerValue="662"
 *   centerLabel="Visitors"
 * />
 * ```
 */
declare const PieChart: FC<PieChartProps>;

interface RadialChartProps {
    data: Array<Record<string, unknown>>;
    /** Category / label key. Inferred from the first non-numeric field if omitted. */
    nameKey?: string;
    /** Value key. Default "value". */
    dataKey?: string;
    /** Value that maps to a full ring. Default: the data max (so the largest fills). */
    maxValue?: number;
    /**
     * Per-arc colors. Defaults to the theme `--chart-N` palette (recommended).
     * Override with tokens directly (`["var(--chart-1)"]`) — never `"hsl(var(--chart-1))"`.
     */
    colors?: string[];
    height?: number;
    /** Thickness of each ring in px. Default 16. */
    ringWidth?: number;
    /** Gap between rings in px. Default 4. */
    ringGap?: number;
    showLegend?: boolean;
    /** Big number drawn in the center (e.g. a total or the single value). */
    centerValue?: ReactNode;
    centerLabel?: ReactNode;
    className?: string;
    ariaLabel?: string;
}
/**
 * Radial (progress ring) chart on recharts — one concentric ring per data
 * point, each filled proportional to its value against `maxValue`. Pass
 * `centerValue` / `centerLabel` to fill the middle. Theme-driven colors.
 *
 * @example
 * ```tsx
 * // Single progress ring (e.g. a gauge) — colors from the theme:
 * <RadialChart
 *   data={[{ label: "Uptime", value: 92 }]}
 *   nameKey="label"
 *   dataKey="value"
 *   maxValue={100}
 *   centerValue="92%"
 *   centerLabel="Uptime"
 * />
 * ```
 */
declare const RadialChart: FC<RadialChartProps>;

interface RadarChartProps {
    data: Array<Record<string, unknown>>;
    /** Axis (category) key. Inferred from the first non-numeric field if omitted. */
    nameKey?: string;
    /** Series to plot. Strings are shorthand for `{ dataKey }`. Inferred if omitted. */
    series?: Array<ChartSeries | string>;
    /** Value at the outer edge. Default: the data max. */
    maxValue?: number;
    /** Number of concentric grid rings. Default 4. */
    rings?: number;
    height?: number;
    showLegend?: boolean;
    /** Fill the series polygons with a soft tint. Default true. */
    fill?: boolean;
    className?: string;
    ariaLabel?: string;
}
/**
 * Radar (spider) chart on recharts — one axis per data point, one polygon per
 * series. Theme-driven colors. Good for comparing a handful of metrics across
 * two or three entities. Needs at least 3 data rows (axes).
 *
 * @example
 * ```tsx
 * <RadarChart
 *   data={[
 *     { metric: "Speed", a: 120, b: 90 },
 *     { metric: "Power", a: 98, b: 130 },
 *     { metric: "Range", a: 86, b: 70 },
 *   ]}
 *   nameKey="metric"
 *   series={["a", "b"]}
 * />
 * ```
 */
declare const RadarChart: FC<RadarChartProps>;

interface ChartArtifactViewProps {
    artifact: ChartArtifact;
    /**
     * Skip `ArtifactCard` chrome — used by `ChartPanel` which supplies the
     * analytics-style shell (title row + flush plot).
     */
    embedded?: boolean;
    /** Plot height when `embedded`. Default 300 (matches `MetricChartCard`). */
    height?: number;
}
/**
 * Renders a `chart` artifact. Cartesian kinds (bar / horizontalBar / line /
 * area, including stacked) go through the shared `LineAreaChart` engine; pie,
 * donut, radial, and radar use their dedicated recharts components. All
 * inherit the theme `--chart-N` palette.
 */
declare const ChartArtifactView: FC<ChartArtifactViewProps>;

export { APP_DENSITY_CHART_HEIGHT, APP_DENSITY_CLASSES, APP_KIT_AGENT_INSTRUCTIONS, APP_KIT_CATALOG, AlertCard, type AlertCardProps, AppCopilot as AppChatPanel, type AppCopilotProps as AppChatPanelProps, AppConfirmDialog, type AppConfirmDialogProps, AppCopilot, type AppCopilotContextValue, type AppCopilotProps, AppCopilotProvider, type AppCopilotProviderProps, type AppDensity, type AppDensityClassKey, AppDensityProvider, type AppDensityProviderProps, type AppPageWidth, AppShell, type AppShellChatControls, AppShellChatTrigger, type AppShellChatTriggerProps, type AppShellNavControls, type AppShellProps, AppShellSidebarTrigger, type AppShellSidebarTriggerProps, type BreadcrumbEntry, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, CHART_PALETTE, COLOR_UTILITY_PREFIXES, CatalogCard, type CatalogCardProps, type CatalogEntry, type CatalogImportPath, type CatalogKind, ChartArtifact, ChartArtifactView, type ChartLayout, type ChartMargin, ChartPanel, type ChartPanelProps, type ChartSeries, type ChartTooltipIndicator, type ChartVariant, ConnectionRow, ConnectionRowList, type ConnectionRowListProps, type ConnectionRowProps, type CopilotControls, CopilotOverlay, type CopilotOverlayProps, CopilotPanel, type CopilotPanelProps, CopilotProvider, type CopilotProviderProps, type CopilotTriggerPosition, DENSITY_SPECS, DNA_COMPILER_VERSION, DangerZone, DangerZoneAction, type DangerZoneActionProps, type DangerZoneProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, type DataTableSortDirection, type DensitySpec, type DescriptionItem, DescriptionList, type DescriptionListProps, type DesignDna, type DnaChartRecipeId, type DnaColor, type DnaCompileReport, type DnaCompileResult, type DnaControlShape, type DnaDensity, type DnaElevation, type DnaElevationLevel, type DnaElevationStrategy, type DnaFinish, type DnaLayout, type DnaMeta, type DnaMode, type DnaMotion, type DnaMotionPreset, type DnaOverrides, type DnaPersonality, type DnaReference, type DnaShape, type DnaSpacing, type DnaStatusSetId, type DnaSurfaceStrategy, type DnaTypography, DnaValidationError, type DnaVoice, ELEVATION_LADDERS, type ElevationLadder, EmptyState, type EmptyStateProps, ExpandableSection, type ExpandableSectionProps, FONT_PAIRINGS, Field, FieldInput, type FieldInputProps, type FieldProps, FieldRow, type FieldRowProps, FieldSelect, type FieldSelectProps, FieldSwitch, type FieldSwitchProps, FieldTextarea, type FieldTextareaProps, FilterBar, type FilterBarProps, type FilterCompareValue, type FilterDatePreset, type FilterDateRangeValue, FilterDropdown, type FilterDropdownProps, FilterField, type FilterFieldDef, type FilterFieldProps, type FilterFieldType, type FilterNumericOperatorOption, type FilterNumericValue, type FilterSelectOption, type FilterValue, type FilterValues, FilteredDataTable, type FilteredDataTableProps, FloatingUnsavedChangesBar, type FloatingUnsavedChangesBarProps, type FontPairing, FormSection, type FormSectionProps, HOUSE_RULES, type HouseRule, INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, InfoCard, type InfoCardProps, type InfoCardTone, IntegrationCard, type IntegrationCardProps, type IntegrationCardStatus, IntegrationsEmptyState, type IntegrationsEmptyStateProps, IntegrationsGrid, type IntegrationsGridItem, type IntegrationsGridProps, LineAreaChart, type LineAreaChartProps, type LintFinding, type LintOptions, type LintResult, type LintSeverity, MOTION_PRESETS, MetricChartCard, type MetricChartCardProps, type MetricChartMetric, MetricRow, type MetricRowItem, type MetricRowProps, MetricTile, type MetricTileProps, type MotionSpec, type NumericOperator, Page, PageHeader, type PageHeaderProps, type PageProps, PieChart, type PieChartProps, PlanBadge, type PlanBadgeProps, type PlanBadgeTone, RESERVED_GRADIENT_TOKENS, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, ResourceCard, type ResourceCardProps, ResourceGallery, type ResourceGalleryItem, type ResourceGalleryProps, type ReviewResult, SEMANTIC_COLOR_TOKENS, SLOP_BUDGETS, STATUS_SETS, SearchInput, type SearchInputProps, Section, type SectionProps, type SemanticColorToken, SettingsLayout, type SettingsLayoutProps, type SettingsLayoutSection, SettingsSection, SettingsSectionHeader, type SettingsSectionHeaderProps, type SettingsSectionProps, SiriWave, type SiriWaveProps, type SiriWaveVariant, Sparkline, type SparklineProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, StatGrid, type StatGridItem, type StatGridProps, StatTile, type StatTileProps, type StatTileTone, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, StatusDot, type StatusDotProps, type StatusDotTone, type StatusSet, SubNav, type SubNavItem, type SubNavProps, SurfaceCard, type SurfaceCardProps, type SurfaceCardTone, type SurfaceCardVariant, TAILWIND_PALETTE_COLORS, THEME_AGENT_INSTRUCTIONS, TIMBAL_THEME_PRESETS, type ThemeShadow, type ThemeToCssOptions, type ThemeTokenMap, type TimbalThemeIntent, type TimbalThemePreset, type TimbalThemePresetId, TimbalThemeStyle, type TimbalThemeStyleProps, type TimbalThemeTokens, type TimbalThemeTypography, UI_REVIEW_AGENT_INSTRUCTIONS, type UseLiveQueryOptions, type UseLiveQueryResult, appDensityClass, appFilterBarClass, appPageColumnClass, appSearchInputClass, appShellInsetTopClass, appShellTopbarInsetClass, appStatTileClass, appSurfaceCardClass, applyThemePreset, applyTimbalTheme, clearTimbalTheme, compileDna, connectionRowListClass, createTimbalTheme, ensureThemeFontLink, flushBarCategoryGap, flushLineAreaEdgeToEdge, formatLintReport, getCatalogEntry, getElevationLadder, getFontPairing, getMotionPreset, getStatusSet, getStoredThemePreset, getThemePreset, lintGeneratedUi, parseDna, resolveChartMargin, resolveTooltipCategory, reviewGeneratedUi, themeToCss, useAppCopilotContext, useAppDensity, useAppDensityClass, useAppShellChat, useAppShellNav, useCopilot, useInterval, useLiveQuery };