import * as _gradeui_contracts from '@gradeui/contracts';
import { ComponentContract } from '@gradeui/contracts';
import { z } from 'zod';
import * as React from 'react';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import * as class_variance_authority_types from 'class-variance-authority/types';
import { VariantProps } from 'class-variance-authority';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import { DayPicker, DayButton, DateRange } from 'react-day-picker';
import { UseEmblaCarouselType } from 'embla-carousel-react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import * as LabelPrimitive from '@radix-ui/react-label';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import { Language } from 'prism-react-renderer';
import { D as DEMO_SPEED_PRESETS, a as DemoSpeed, b as DemoTrigger } from './types-DUwnWaxR.js';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import * as ProgressPrimitive from '@radix-ui/react-progress';
import { Combobox as Combobox$1 } from '@base-ui/react';
import { SortingState, OnChangeFn, VisibilityState } from '@tanstack/react-table';
import * as ResizablePrimitive from 'react-resizable-panels';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import * as SelectPrimitive from '@radix-ui/react-select';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import * as SliderPrimitive from '@radix-ui/react-slider';
import { UniqueIdentifier } from '@dnd-kit/core';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import * as recharts_types_util_payload_getUniqPayload from 'recharts/types/util/payload/getUniqPayload';
import * as recharts_types_component_Tooltip from 'recharts/types/component/Tooltip';
import * as recharts_types_util_types from 'recharts/types/util/types';
import * as recharts_types_component_DefaultTooltipContent from 'recharts/types/component/DefaultTooltipContent';
import * as RechartsPrimitive from 'recharts';
import * as TogglePrimitive from '@radix-ui/react-toggle';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { M as MapProps, a as MapHandle, b as MapMarkerProps } from './types-B45Uirkp.js';
export { C as Coords, c as MapAppearance, d as MapError, e as MapErrorCode } from './types-B45Uirkp.js';
import * as THREE from 'three';
import { ClassValue } from 'clsx';

/**
 * Component contract registry — auto-managed by
 * scripts/generate-contracts.mjs. Hand-authored contracts (MediaSurface,
 * etc.) are also wired in here; the generator preserves them on each
 * run.
 */

declare const COMPONENT_CONTRACTS: Readonly<Record<string, ComponentContract>>;
declare function getComponentContract(componentName: string | null | undefined): ComponentContract | null;
declare function listContractedComponents(): string[];

declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
    hint: {
        schema: z.ZodOptional<z.ZodEnum<["album", "tv-show", "movie", "game", "book", "portrait", "landscape", "poster", "product", "food", "video", "audio", "embed", "3d", "generic"]>>;
        design: "knob";
        group: string;
        control: "glyph-picker";
        label: string;
        description: string;
        default: string;
        examples: string[];
    };
    aspect: {
        schema: z.ZodOptional<z.ZodEnum<["video", "square", "portrait", "wide", "auto"]>>;
        design: "knob";
        control: "toggle-group";
        label: string;
        description: string;
    };
    radius: {
        schema: z.ZodOptional<z.ZodEnum<["none", "sm", "md", "lg", "xl"]>>;
        design: "knob";
        control: "toggle-group";
        label: string;
        default: string;
        description: string;
    };
    border: {
        schema: z.ZodOptional<z.ZodBoolean>;
        design: "knob";
        label: string;
        default: boolean;
    };
    loading: {
        schema: z.ZodOptional<z.ZodBoolean>;
        design: "knob";
        label: string;
        default: boolean;
        description: string;
    };
    emptyState: {
        schema: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"auto">, z.ZodLiteral<"icon">, z.ZodLiteral<"none">]>>;
        design: "knob";
        control: "select";
        label: string;
        default: string;
        description: string;
    };
    alt: {
        schema: z.ZodOptional<z.ZodString>;
        design: "content";
        group: string;
        control: "text";
        label: string;
        description: string;
        examples: string[];
    };
    src: {
        schema: z.ZodOptional<z.ZodString>;
        design: "content";
        group: string;
        control: "url";
        label: string;
        description: string;
    };
    instanceId: {
        schema: z.ZodOptional<z.ZodString>;
        design: "content";
        group: string;
        control: "text";
        label: string;
        description: string;
    };
    source: {
        schema: z.ZodOptional<z.ZodUnion<[z.ZodObject<{
            kind: z.ZodLiteral<"album">;
            artist: z.ZodString;
            title: z.ZodString;
            year: z.ZodOptional<z.ZodNumber>;
            description: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            title: string;
            kind: "album";
            artist: string;
            description?: string | undefined;
            year?: number | undefined;
        }, {
            title: string;
            kind: "album";
            artist: string;
            description?: string | undefined;
            year?: number | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"tv-show">;
            title: z.ZodString;
            year: z.ZodOptional<z.ZodNumber>;
            description: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            title: string;
            kind: "tv-show";
            description?: string | undefined;
            year?: number | undefined;
        }, {
            title: string;
            kind: "tv-show";
            description?: string | undefined;
            year?: number | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"movie">;
            title: z.ZodString;
            year: z.ZodOptional<z.ZodNumber>;
            description: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            title: string;
            kind: "movie";
            description?: string | undefined;
            year?: number | undefined;
        }, {
            title: string;
            kind: "movie";
            description?: string | undefined;
            year?: number | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"game">;
            title: z.ZodString;
            description: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            title: string;
            kind: "game";
            description?: string | undefined;
        }, {
            title: string;
            kind: "game";
            description?: string | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"book">;
            title: z.ZodOptional<z.ZodString>;
            author: z.ZodOptional<z.ZodString>;
            isbn: z.ZodOptional<z.ZodString>;
            description: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            kind: "book";
            title?: string | undefined;
            description?: string | undefined;
            author?: string | undefined;
            isbn?: string | undefined;
        }, {
            kind: "book";
            title?: string | undefined;
            description?: string | undefined;
            author?: string | undefined;
            isbn?: string | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"poster">;
            title: z.ZodString;
            year: z.ZodOptional<z.ZodNumber>;
            description: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            title: string;
            kind: "poster";
            description?: string | undefined;
            year?: number | undefined;
        }, {
            title: string;
            kind: "poster";
            description?: string | undefined;
            year?: number | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"portrait">;
            name: z.ZodOptional<z.ZodString>;
            role: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            kind: "portrait";
            name?: string | undefined;
            role?: string | undefined;
        }, {
            kind: "portrait";
            name?: string | undefined;
            role?: string | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"landscape">;
            location: z.ZodOptional<z.ZodString>;
            mood: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            kind: "landscape";
            location?: string | undefined;
            mood?: string | undefined;
        }, {
            kind: "landscape";
            location?: string | undefined;
            mood?: string | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"product">;
            name: z.ZodOptional<z.ZodString>;
            brand: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            kind: "product";
            name?: string | undefined;
            brand?: string | undefined;
        }, {
            kind: "product";
            name?: string | undefined;
            brand?: string | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"food">;
            dish: z.ZodOptional<z.ZodString>;
            cuisine: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            kind: "food";
            dish?: string | undefined;
            cuisine?: string | undefined;
        }, {
            kind: "food";
            dish?: string | undefined;
            cuisine?: string | undefined;
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"generic">;
            prompt: z.ZodString;
        }, "strip", z.ZodTypeAny, {
            prompt: string;
            kind: "generic";
        }, {
            prompt: string;
            kind: "generic";
        }>, z.ZodUnion<[z.ZodObject<{
            kind: z.ZodLiteral<"video">;
        }, "strip", z.ZodTypeAny, {
            kind: "video";
        }, {
            kind: "video";
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"audio">;
        }, "strip", z.ZodTypeAny, {
            kind: "audio";
        }, {
            kind: "audio";
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"embed">;
        }, "strip", z.ZodTypeAny, {
            kind: "embed";
        }, {
            kind: "embed";
        }>, z.ZodObject<{
            kind: z.ZodLiteral<"3d">;
        }, "strip", z.ZodTypeAny, {
            kind: "3d";
        }, {
            kind: "3d";
        }>]>]>>;
        design: "structured";
        label: string;
        description: string;
        perKindFields: {
            album: {
                artist: string;
                title: string;
                year: string;
            };
            poster: {
                title: string;
                year: string;
            };
            portrait: {
                name: string;
                role: string;
            };
            landscape: {
                location: string;
                mood: string;
            };
            product: {
                name: string;
                brand: string;
            };
            food: {
                dish: string;
                cuisine: string;
            };
            generic: {
                prompt: string;
            };
            video: {};
            audio: {};
            embed: {};
            "3d": {};
        };
    };
    className: {
        schema: z.ZodOptional<z.ZodString>;
        design: "plumbing";
    };
    style: {
        schema: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
        design: "plumbing";
    };
    children: {
        schema: z.ZodOptional<z.ZodUnknown>;
        design: "plumbing";
        description: string;
    };
    overlay: {
        schema: z.ZodOptional<z.ZodUnknown>;
        design: "plumbing";
        description: string;
    };
    glyph: {
        schema: z.ZodOptional<z.ZodUnknown>;
        design: "plumbing";
        description: string;
    };
    fallback: {
        schema: z.ZodOptional<z.ZodUnknown>;
        design: "plumbing";
        description: string;
    };
    onVisibilityChange: {
        schema: z.ZodOptional<z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodUnknown>>;
        design: "event";
        description: string;
    };
}>;

declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

/**
 * Callout — inline, ambient, non-blocking status/feedback surface.
 *
 * Renamed from `Alert` (May 2026). The old name collided with
 * Apple HIG `Alert` (a modal) and with `role="alert"` ARIA semantics,
 * both of which imply interruptive/assertive behaviour the component
 * does not have. "Callout" is honest about what it is: an inline
 * attention-grabber that sits in the layout flow. The `Alert` name is
 * deliberately left vacant in the barrel so a future genuinely-
 * interruptive primitive can claim it without further renames — until
 * then, reach for `<Dialog>` for modal alerts.
 *
 * Variants intentionally preserved as-is in this pass (`default |
 * destructive | success | warning | info`) — splitting `variant` onto
 * orthogonal `intent × emphasis` axes is a planned follow-up across
 * the whole library, not a one-component change. The `highlight`
 * variant (yellow) was dropped in this rename: in practice it
 * overlapped `warning` (amber) and added one more variant without a
 * unique semantic. Consumers needing "notable but not alarming" use
 * `variant="warning"` or `variant="info"` depending on temperature.
 */
declare const calloutVariants: (props?: ({
    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const Callout: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
declare const CalloutTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
declare const CalloutDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

/**
 * AppShell — top-level page scaffold for an app-like or marketing layout.
 *
 * Provides five slots arranged via CSS-grid template areas:
 *
 *   ┌─────────── Header (full bleed) ───────────┐
 *   │ Nav │   Aside   │      Main               │
 *   └─────────── Footer (full bleed) ───────────┘
 *
 * Header and Footer always span the full width and sit at the very top /
 * very bottom of the shell — useful for marketing pages, brand bars, site
 * chrome. `nav` chooses how the body row is split:
 *
 * - `none`        — Main only (a marketing page or a single-column app)
 * - `top`         — Main below an in-app top-nav row (TopMenu)
 * - `side`        — Nav rail + Main (classic app layout)
 * - `three-pane`  — Nav rail + fixed Aside + flex Main (Slack/Mail/Notion
 *                   shape; aside width via --gds-app-shell-aside, default 320px)
 *
 * Each slot is assigned a fixed `grid-area` (header/nav/aside/main/footer),
 * so the **JSX child order doesn't matter** — drop slots in any order and
 * the grid sorts them.
 *
 * It is deliberately *just* structure: no collapse state, no context, no
 * runtime JS. Nav content is whatever the caller drops in — a Sidebar, a
 * TopMenu, a hand-rolled `<nav>`. For drag-to-resize columns inside the
 * body, compose this with `Resizable` instead of using a static grid.
 *
 * Variants:
 * - `nav`       — "none" | "top" | "side" | "three-pane"
 * - `maxWidth`  — Main slot only: "full" | "container" caps reading width
 *                 for marketing-style content.
 * - `sticky`    — Nav slot, Header slot. Pin to the viewport on scroll.
 */
declare const shellVariants: (props?: ({
    nav?: "none" | "top" | "side" | "three-pane" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const headerVariants$1: (props?: ({
    sticky?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const navVariants: (props?: ({
    placement?: "none" | "top" | "side" | null | undefined;
    sticky?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const asideVariants: (props?: ({
    sticky?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const mainVariants: (props?: ({
    maxWidth?: "full" | "container" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const footerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
interface AppShellProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof shellVariants> {
    /** Render as the single child element via Radix Slot — lets you stamp the
     *  shell layout onto an existing root tag without an extra wrapper. */
    asChild?: boolean;
}
declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof headerVariants$1> {
    asChild?: boolean;
}
declare const AppShellHeader: React.ForwardRefExoticComponent<AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
interface AppShellNavProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof navVariants> {
    asChild?: boolean;
}
declare const AppShellNav: React.ForwardRefExoticComponent<AppShellNavProps & React.RefAttributes<HTMLElement>>;
interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof asideVariants> {
    asChild?: boolean;
}
declare const AppShellAside: React.ForwardRefExoticComponent<AppShellAsideProps & React.RefAttributes<HTMLElement>>;
interface AppShellMainProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof mainVariants> {
    asChild?: boolean;
}
declare const AppShellMain: React.ForwardRefExoticComponent<AppShellMainProps & React.RefAttributes<HTMLElement>>;
interface AppShellFooterProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof footerVariants> {
    asChild?: boolean;
}
declare const AppShellFooter: React.ForwardRefExoticComponent<AppShellFooterProps & React.RefAttributes<HTMLElement>>;

/**
 * Avatar — circular user/entity glyph. Wraps Radix's avatar primitive
 * with two ergonomic additions over the base shadcn shape:
 *
 *   size — t-shirt scale (xs / sm / md / lg / xl) so consumers pick a
 *          token instead of writing `h-7 w-7` every time. Defaults
 *          to md (40px) to preserve previous behaviour.
 *
 *   tone — on AvatarFallback only. Picks a tinted bg/text colour
 *          pair (violet / amber / emerald / sky / rose / plum / lime /
 *          primary / muted). Default `muted` matches the previous
 *          `bg-muted` behaviour. Reach for explicit tones when each
 *          author needs a stable colour mapping (chat avatars, comment
 *          threads, member lists).
 *
 * AvatarFallback type scales with the avatar's size (9px at 2xs up to
 * 30px at xl; md keeps the 16px base) via a size context, so initials
 * hold a ~0.4 ratio in every circle instead of inheriting 16px.
 *
 * Both additions are backwards compatible — code that passed className
 * directly still works and overrides the variant defaults.
 */
declare const avatarSizes: (props?: ({
    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarSizes> {
}
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
declare const avatarFallbackTones: (props?: ({
    tone?: "muted" | "primary" | "violet" | "amber" | "emerald" | "sky" | "rose" | "plum" | "lime" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type AvatarTone = NonNullable<VariantProps<typeof avatarFallbackTones>["tone"]>;
interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, VariantProps<typeof avatarFallbackTones> {
}
declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;

declare const badgeVariants: (props?: ({
    variant?: "default" | "secondary" | "destructive" | "outline" | "highlight" | "success" | "warning" | "info" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
    rounded?: "default" | "full" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
}
declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React.JSX.Element;

/**
 * Surface — what a container is *made of*.
 *
 * Shared across every component that surfaces content (Card, Dialog,
 * Sheet, Popover, DropdownMenu, HoverCard, SectionBlock). Picking the
 * material is a first-class prop axis on each of those components,
 * orthogonal to elevation (how high) and aura (what it radiates) — see
 * gradeui/PRESENCE.md for the three-axis model.
 *
 * Putting this on the prop API instead of leaving it as a className
 * escape-hatch buys three things:
 *
 *   1. Studio's inspector surfaces a `surface` knob on every container
 *      so users can flip the material without touching code.
 *   2. The model has a first-class vocabulary to pick from — without
 *      this it reaches for `bg-card/40 backdrop-blur-md` Tailwind soup
 *      and loses the edge highlight + theme-aware blur tuning.
 *   3. Themes can retune `--surface-blur-*` / `--surface-alpha-*`
 *      centrally and every container moves with them.
 *
 * The CSS classes referenced here live in packages/ui/styles/globals.css
 * (and the apps/docs mirror) under the SURFACE CLASSES section.
 */
type Surface = "solid" | "translucent" | "glass" | "glass-strong" | "frosted";

/**
 * Banner — full-width horizontal strip surfacing system-level state or
 * announcements that should stay visible until acknowledged.
 *
 * The shape is the difference from Callout:
 *
 *   Callout = inline boxed message in the layout flow (rounded box,
 *             body-paragraph width, lives inside a Card/Section).
 *   Banner  = full-bleed horizontal strip across a page / panel /
 *             AppShellHeader top. Single-line by default.
 *
 * Use cases that should be Banner, not Callout, not Dialog:
 *   - "You're previewing this from main — switch to your branch"
 *   - "We're investigating an incident affecting search"
 *   - "Send your design to Figma — get the Grade plugin"
 *   - "New: scaffold-playground tab"
 *
 * Three Presence axes apply: variant (intent colour), surface
 * (material), shadow utilities for elevation. The default is
 * `variant="default" surface="solid"`, which yields a calm announcement
 * strip in the active theme. Status variants pick up the soft / deep
 * token pairs (`--info-soft` + `--info-deep`, etc.), same pattern as
 * Callout.
 *
 * AUTHORING ORIGIN: this primitive was extracted out of
 * `apps/docs/components/studio/figma-intro-banner.tsx` after the user
 * flagged that ad-hoc banner as invisible — it was reaching for
 * `--gds-primary` / `--gds-border` / `--gds-foreground` tokens that
 * don't exist (our tokens are unprefixed). The inline-style fallbacks
 * kicked in and the chrome washed out completely. Banner exists so the
 * "I need a one-line announcement strip" need lands in a primitive that
 * cannot get the token names wrong.
 */
declare const bannerVariants: (props?: ({
    variant?: "default" | "destructive" | "success" | "warning" | "info" | "announcement" | null | undefined;
    align?: "center" | "between" | "start" | null | undefined;
    sticky?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof bannerVariants> {
    /**
     * Material the banner is *made of*. Defaults to `solid` (the
     * variant's tinted bg). `glass` is useful when the banner sits over
     * a hero image / generative backdrop and the imagery underneath
     * should remain visible.
     */
    surface?: Surface;
    /**
     * Show a close button at the trailing end. The button calls
     * `onDismiss` if provided; otherwise the consumer controls
     * visibility via standard React state on the parent.
     */
    dismissible?: boolean;
    /**
     * Callback when the user clicks the trailing close button. Required
     * when `dismissible` is set if you want the banner to actually
     * disappear (the primitive itself stays controlled).
     */
    onDismiss?: () => void;
    /**
     * Leading slot — typically a single Lucide icon. The status icon
     * is NOT inferred from variant; pass the one that fits your message.
     */
    icon?: React.ReactNode;
    /**
     * Optional trailing action — usually a Button or anchor. Sits to the
     * left of the dismiss button.
     */
    action?: React.ReactNode;
}
declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Button — primary action primitive.
 *
 * Sizes (t-shirt scale) align EXACTLY to Tabs / ToggleGroup outer
 * heights so a button placed next to a tab strip lines up without
 * any per-call className overrides:
 *
 *   2xs: h-5 (20px)  — densest tool-panel size; matches Figma Button size=2xs
 *   xs:  h-6 (24px)  — tool-panel density; matches Figma Button size=xs
 *   sm:  h-7 (28px)  — matches `<TabsList size="sm">` height
 *   md:  h-8 (32px)  — matches `<TabsList size="md">` height (default)
 *   lg:  h-10 (40px) — matches `<TabsList size="lg">` height
 *
 * `default` is preserved as an alias for `md` so existing call sites
 * keep working through the rename.
 *
 * `iconOnly` squares the button at WHATEVER `size` it has (2xs=20, sm=28,
 * md=32, lg=40) by dropping horizontal padding and matching width to
 * height. It's a boolean modifier on top of the height ramp — there is no
 * separate icon size value — and the icon you pass as the child is centered.
 *
 * Type and icon sizes also follow the Tabs scale (text-xs + size-3.5
 * at sm/md, text-sm + size-4 at lg) so the visual rhythm reads
 * consistent across primitives.
 */
declare const buttonVariants: (props?: ({
    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "raised" | null | undefined;
    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | null | undefined;
    iconOnly?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
    asChild?: boolean;
    /** Presence TRAIT: tactile elevation (bevel + drop + hover glow +
     *  pressed sink) layered onto WHATEVER variant the button wears —
     *  a raised primary, raised outline, etc. Glow tone reads
     *  --btn-glow → --accent-glow → --selected-glow; override
     *  per-button via style={{ "--btn-glow": "var(--warning)" }}.
     *  variant="raised" remains the neutral-key alias (trait +
     *  secondary surface). */
    raised?: boolean;
}
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

/**
 * Section + Container — the page scaffold (STUDIO-SECTIONS.md).
 *
 * A page is an ordered stack of Sections. `Section` is the FULL-WIDTH band: it
 * owns a colour `scope` (subtheme) + vertical `pad` rhythm, and nothing else —
 * it never constrains width. `Container` is the measure: a centred max-width +
 * gutters you drop INSIDE a section to contain content; omit it for a full-bleed
 * band. The content is FREE; Section never bakes a title/CTA (that's
 * `SectionBlock`'s opinionated job). The known composable parts (Eyebrow /
 * Title / Subtitle / Description / Actions / Media) give the common shape
 * design intent without constraining it.
 */
type SectionScope$1 = "default" | "inverse" | "brand" | "accent" | "muted" | "card";
type ContainerMaxW = "sm" | "md" | "lg" | "xl" | "prose" | "full";
declare const bandVariants: (props?: ({
    pad?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bandVariants> {
    /** Colour subtheme — applies the `scope-*` class (STUDIO-COLOR.md). Unset =
     *  the page surface (transparent). */
    scope?: SectionScope$1;
    /** Visual band background — image / video / gradient / shader (e.g.
     *  `<BackgroundFill>`). Renders BEHIND the content; Section owns the
     *  relative + overflow-hidden + z-layering. Works with `scope`, which
     *  re-tones the content tokens so text stays legible over the media. */
    background?: React.ReactNode;
    /** Semantic element. */
    as?: "section" | "header" | "footer" | "div";
}
declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
declare const containerVariants$1: (props?: ({
    maxW?: "sm" | "md" | "lg" | "xl" | "full" | "prose" | null | undefined;
    grid?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants$1> {
    as?: "div" | "section";
}
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
declare const SectionEyebrow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
declare const SectionTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
declare const SectionSubtitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
declare const SectionDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
declare const SectionActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/** SectionMedia — a SLOT. Holds any media: a single image (MediaSurface),
 *  a Carousel, a VideoPlayer, an embed, or a whole app UI. The section
 *  doesn't care what's inside; the media frames itself. */
declare const SectionMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

/** Named colour SCOPES (STUDIO-COLOR.md). A `scope` makes the section a local
 *  colour mode — like light/dark, but scoped to this element and focused on
 *  surfaces. It applies the matching `scope-*` class, which re-points the
 *  surface tokens (--background / --card / --muted / --foreground / --border)
 *  at the named pair, so every descendant re-tones while still using the
 *  ordinary tokens. `inverse` is the dark-band / light-text marketing scope. */
declare const SECTION_SCOPES: readonly ["default", "inverse", "brand", "accent", "muted", "card"];
type SectionScope = (typeof SECTION_SCOPES)[number];
declare const sectionBlockVariants: (props?: ({
    padding?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
    background?: "muted" | "primary" | "gradient" | "card" | "transparent" | "scoped" | null | undefined;
    fullBleed?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const containerVariants: (props?: ({
    container?: "default" | "full" | "wide" | "narrow" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const headerVariants: (props?: ({
    alignment?: "center" | "right" | "left" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const titleVariants: (props?: ({
    titleSize?: "sm" | "md" | "lg" | "xl" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
interface CTAConfig {
    text: string;
    variant?: ButtonVariant;
    href?: string;
    onClick?: () => void;
}
interface SectionBlockProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionBlockVariants>, VariantProps<typeof containerVariants>, VariantProps<typeof headerVariants>, VariantProps<typeof titleVariants> {
    /**
     * What the section surface is *made of*. Orthogonal to `background`
     * (which picks the tonal direction): `surface` picks the material
     * applied on top.
     *
     * - `solid` (default): the `background` tint is opaque.
     * - `translucent`: ~82% opacity, no blur — picks up the page underneath.
     * - `glass`: ~58% opacity + 14px blur + edge highlight. Sections that
     *   sit over a hero image / generative backdrop and need to read as
     *   floating chrome.
     * - `glass-strong`: 42% + 24px blur — for full-page-overlay sections.
     *
     * When `surface !== "solid"`, the `background` Tailwind classes still
     * apply but get overlaid with the glass class so the alpha shows
     * through the tint.
     */
    surface?: Surface;
    /** Make the section a named colour scope (a local surface mode): applies the
     *  `scope-*` class so the whole subtree re-tones. Overrides `background`. */
    scope?: SectionScope;
    title?: string;
    subtitle?: string;
    cta1?: string | CTAConfig;
    cta2?: string | CTAConfig;
    backgroundImage?: string;
    children?: React.ReactNode;
    as?: "section" | "div" | "article";
}
declare const SectionBlock: React.ForwardRefExoticComponent<SectionBlockProps & React.RefAttributes<HTMLElement>>;

declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
}): React.JSX.Element;
declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;

/**
 * Carousel — token-driven slideshow primitive built on embla-carousel.
 *
 * Compound API:
 *
 *   <Carousel autoplay loop>
 *     <Carousel.Slide>{...}</Carousel.Slide>
 *     <Carousel.Slide duration={15000}>{...}</Carousel.Slide>
 *     <Carousel.VideoSlide src="…" poster="…" alt="…" />
 *
 *     <Carousel.Arrows />
 *     <Carousel.Dots />
 *   </Carousel>
 *
 * Design-system contract:
 *   - All visual dimensions are CSS variables (`--gds-carousel-*`) so the
 *     control surface, dot size, gap, arrow look etc. are themable per
 *     consumer without prop drilling. Defaults live in `styles/globals.css`.
 *   - Root stamps `data-gds-part="carousel"` so Studio's selection agent
 *     can target the whole carousel as one unit, with sub-parts on
 *     `Carousel.Slide` (`carousel-slide`), `Carousel.Dots` (`carousel-dots`),
 *     `Carousel.Arrows` (`carousel-arrows`).
 *   - Autoplay is hand-rolled (no `embla-carousel-autoplay` plugin) so per-
 *     slide duration overrides and "advance when the video ends" behaviour
 *     fall out cleanly. The plugin's fixed `delay` would have made both of
 *     those fight the library.
 *
 * Video slide behaviour (the one the user asked for):
 *   - Poster image is rendered until the slide becomes active.
 *   - On activation the <video> autoplays muted + loop (= browser-friendly)
 *     with no controls — chosen default.
 *   - When the loop is short (`<video loop>` re-fires onEnded continuously
 *     in some browsers but never in others), we ALSO use the same per-slide
 *     `duration` mechanism as still slides: if the slide author passes
 *     `duration={15000}` we advance after 15s regardless of the video
 *     length. Without a duration the slide stays put until the carousel
 *     stops being autoplayed — that matches "play this video forever
 *     while it's on screen".
 *
 * Library: embla-carousel-react. Headless, ~6kb gzip, no opinionated CSS.
 */

type EmblaApi = NonNullable<UseEmblaCarouselType[1]>;
interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Loop back to slide 0 after the last one. Default true. */
    loop?: boolean;
    /** Slide alignment within the viewport when not all slides are full-width.
     *  `"start"` (default) lines slides up to the left edge; `"center"` is the
     *  classic "current slide centered, peek of neighbours" treatment. */
    align?: "start" | "center" | "end";
    /** How many slides to show at once. Default `1` (full-bleed slides).
     *  For responsive multi-slide layouts (e.g. 1 mobile / 3 desktop) leave
     *  this and use the `--gds-carousel-slide-basis` CSS var on `Slide`
     *  instead — it accepts media-query-driven values. */
    slidesPerView?: number;
    /** Autoplay config. Pass `true` for defaults (5s delay, pause on hover,
     *  pause when offscreen). Pass an object to override; pass `false` /
     *  omit to disable. */
    autoplay?: boolean | AutoplayConfig;
    /** Drag-to-swipe. Default `true`. Disable when the carousel is being
     *  driven entirely by Dots/Arrows and drag would conflict with chrome
     *  inside the slides. */
    draggable?: boolean;
    /** Fired whenever the active slide changes — programmatic, autoplay,
     *  or user swipe. The value is the zero-based slide index. */
    onSlideChange?: (index: number) => void;
}
interface AutoplayConfig {
    /** Default delay per slide in ms. Overridden by `<Carousel.Slide duration>`
     *  on a per-slide basis. Default 5000. */
    delay?: number;
    /** Pause the autoplay while the pointer is over the carousel. Default true. */
    pauseOnHover?: boolean;
    /** Pause when the carousel scrolls out of the viewport — saves work and
     *  matches the MediaSurface "play when visible" convention. Default true. */
    pauseWhenOffscreen?: boolean;
}
interface CarouselRootComponent extends React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>> {
    Slide: typeof CarouselSlide;
    VideoSlide: typeof CarouselVideoSlide;
    Dots: typeof CarouselDots;
    Arrows: typeof CarouselArrows;
    Prev: typeof CarouselPrev;
    Next: typeof CarouselNext;
}
interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Per-slide autoplay duration in ms. Overrides the carousel's default
     *  delay for this slide only. e.g. `duration={15000}` keeps a hero
     *  still on screen for 15s while the rest cycle at 5s. */
    duration?: number;
}
declare const CarouselSlide: React.ForwardRefExoticComponent<CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
interface CarouselVideoSlideProps extends Omit<CarouselSlideProps, "children"> {
    src: string;
    /** Poster shown until the slide becomes active. Reuses the
     *  `--gds-media-placeholder-bg/-fg` tokens as a fallback. */
    poster?: string;
    alt?: string;
    /** Override default behaviour and show native controls. Default false —
     *  the chosen default ("muted autoplay + loop, no controls"). */
    controls?: boolean;
    /** Override the default loop behaviour. Default true (the chosen
     *  default). When `false` and no `duration` is set, the carousel
     *  advances when the video ends. */
    loop?: boolean;
    /** Object-fit for the video. Default `"cover"`. */
    fit?: "cover" | "contain";
}
declare const CarouselVideoSlide: React.ForwardRefExoticComponent<CarouselVideoSlideProps & React.RefAttributes<HTMLDivElement>>;
interface CarouselDotsProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Position the dots relative to the viewport. Default `"below"` puts
     *  them in flow underneath; `"overlay"` floats them at the bottom of
     *  the carousel area on top of the slides. */
    position?: "below" | "overlay";
    /** Custom render function for one dot. Receives `{ index, active, onClick }`
     *  and should return a button — for when the default rounded-pill look
     *  doesn't fit (e.g. thumbnail strips, numeric pagination). */
    renderDot?: (state: {
        index: number;
        active: boolean;
        onClick: () => void;
    }) => React.ReactNode;
}
declare const CarouselDots: React.ForwardRefExoticComponent<CarouselDotsProps & React.RefAttributes<HTMLDivElement>>;
interface CarouselArrowsProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Position relative to the viewport. `"overlay"` (default) floats the
     *  arrows over the slides; `"outside"` places them in flow alongside
     *  the carousel (useful when the viewport is full-bleed). */
    position?: "overlay" | "outside";
}
declare const CarouselArrows: React.ForwardRefExoticComponent<CarouselArrowsProps & React.RefAttributes<HTMLDivElement>>;
interface CarouselNavButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
}
declare const CarouselPrev: React.ForwardRefExoticComponent<CarouselNavButtonProps & React.RefAttributes<HTMLButtonElement>>;
declare const CarouselNext: React.ForwardRefExoticComponent<CarouselNavButtonProps & React.RefAttributes<HTMLButtonElement>>;
declare const Carousel: CarouselRootComponent;

declare function useCarouselApi(): EmblaApi | undefined;

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The whole card is the click target — a wallet tile, a project row,
     * anything that opens something. Adds the pointer, a hover/focus
     * treatment, and keyboard focusability, and makes any trailing
     * `Button` inside show its hover state at the same time, so the card
     * and its chevron read as ONE affordance rather than two.
     *
     * On dark surfaces a drop shadow barely registers, so the hover
     * treatment leads with a surface lift (one ramp step) plus a brighter
     * border, and carries the shadow as a secondary cue. See the
     * `.gds-card[data-interactive]` rules in styles/globals.css.
     *
     * Put the click handler on the card. The trailing chevron should then
     * be a `Button asChild` wrapping a span — visually identical, but not
     * a nested interactive control inside a clickable region.
     */
    interactive?: boolean;
    /**
     * What the card surface is *made of*. Composes with `shadow-elevation-*`
     * (depth) and `gds-aura-*` (state signal) — see PRESENCE.md.
     *
     * - `solid` (default): opaque `bg-card`.
     * - `translucent`: ~82% opacity, no blur. Menu sheets, popovers.
     * - `glass`: ~58% opacity + 14px blur + edge highlight. Floating panels.
     * - `glass-strong`: ~42% opacity + 24px blur. Full-page overlays.
     *
     * When `surface` is set to anything other than `solid`, the base
     * `bg-card` is dropped so the glass alpha can pass through.
     */
    surface?: Surface;
}
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;

declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React.JSX.Element;
declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
    variant?: "legend" | "label";
}): React.JSX.Element;
declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
declare const fieldVariants: (props?: ({
    orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface FieldProps extends React.ComponentProps<"div">, VariantProps<typeof fieldVariants> {
    /** @deprecated use `orientation`. Maps option/setting → horizontal. */
    layout?: "option" | "setting";
}
declare function Field({ className, orientation, layout, children, ...props }: FieldProps): React.JSX.Element;
/**
 * Field.Trailing — Grade extension (not in shadcn): a slot pinned to the end
 * of the row for a Badge / price / kbd hint.
 */
declare function FieldTrailing({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
declare function FieldLabel({ className, htmlFor, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
declare function FieldDescription({ className, id, ...props }: React.ComponentProps<"p">): React.JSX.Element;
declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
    errors?: Array<{
        message?: string;
    } | undefined>;
}): React.JSX.Element | null;
declare const FieldRoot: typeof Field & {
    Label: typeof FieldLabel;
    Title: typeof FieldTitle;
    Description: typeof FieldDescription;
    Content: typeof FieldContent;
    Trailing: typeof FieldTrailing;
    Group: typeof FieldGroup;
    Set: typeof FieldSet;
    Legend: typeof FieldLegend;
    Separator: typeof FieldSeparator;
    Error: typeof FieldError;
};

/**
 * PropertyList — the read-only "one record, stacked" display primitive.
 *
 * A property list is a table row transposed: where a Table runs the schema
 * horizontally (columns) across many records, a PropertyList takes ONE
 * record and stacks its fields vertically as label / value pairs. Reach for
 * it for detail panels, inspectors, "about this item" cards, order summaries
 * — anywhere you're showing the properties of a single thing.
 *
 *   <PropertyList>
 *     <PropertyList.Row label="Status" icon={<Activity />}>
 *       <Badge variant="warning-soft">Low</Badge>
 *     </PropertyList.Row>
 *     <PropertyList.Row label="Owner">
 *       <Avatar className="h-5 w-5"><AvatarFallback>EO</AvatarFallback></Avatar>
 *     </PropertyList.Row>
 *   </PropertyList>
 *
 * The value side is deliberately polymorphic — it's a slot (`children`, or
 * the `value` prop), not a string. A row can hold plain text, a date, a
 * single Badge, a tag group, an avatar stack, a link, anything. That's the
 * whole point: the same value renderers that fill a Table cell drop straight
 * into a PropertyList row, so the two surfaces never drift.
 *
 * Semantics: renders a real `<dl>` with `<dt>` / `<dd>` pairs (each pair
 * wrapped in a `<div>`, which the HTML spec allows), so it's announced as a
 * description list by assistive tech for free.
 *
 * Layout + density are token-driven (`--gds-property-list-*`) so a narrow
 * inspector and a wide settings page can retune the label column and rhythm
 * without prop-drilling. `layout="stack"` drops the label above the value
 * for tight columns.
 *
 * This is a DISPLAY primitive. For an editable field (label + control), use
 * `Field`; a detail panel that flips between read and edit typically swaps a
 * PropertyList for a stack of Fields.
 */
type PropertyListLayout = "row" | "stack";
type PropertyListDensity = "compact" | "default" | "relaxed";
type PropertyListAlign = "start" | "center";
interface PropertyListProps extends React.HTMLAttributes<HTMLDListElement> {
    /** `row` (default): label column beside value. `stack`: label above value (narrow panels). */
    layout?: PropertyListLayout;
    /** Row rhythm. `compact` for dense inspectors, `relaxed` for airy settings pages. */
    density?: PropertyListDensity;
    /** Default vertical alignment of label vs value. `center` for single-line values, `start` when values wrap (tag groups, multi-line). */
    align?: PropertyListAlign;
    /** Hairline rule between rows. */
    divider?: boolean;
    /** Override the label column width (any CSS length). Sets `--gds-property-list-label-width` for all rows. */
    labelWidth?: string;
}
interface PropertyListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
    /** The property name (the `<dt>`). */
    label: React.ReactNode;
    /** Optional leading glyph, rendered muted at `--gds-property-list-icon-size`. */
    icon?: React.ReactNode;
    /** The value. Provide via `value` or as `children` — accepts any node (text, Badge, tag group, Avatar stack, link…). */
    value?: React.ReactNode;
    /** Per-row override of the list's vertical alignment. */
    align?: PropertyListAlign;
    children?: React.ReactNode;
}
declare const PropertyListRow: React.ForwardRefExoticComponent<PropertyListRowProps & React.RefAttributes<HTMLDivElement>>;
declare const PropertyList: React.ForwardRefExoticComponent<PropertyListProps & React.RefAttributes<HTMLDListElement>> & {
    Row: React.ForwardRefExoticComponent<PropertyListRowProps & React.RefAttributes<HTMLDivElement>>;
};

/**
 * Selection cards — RadioCard / CheckboxCard / SwitchCard.
 *
 * The whole card IS the control. RadioCard renders as a
 * `RadioGroupPrimitive.Item`, CheckboxCard as a `CheckboxPrimitive.Root`,
 * SwitchCard as a `SwitchPrimitives.Root` — so focus, hover, and the
 * checked state all live on the parent surface, and the entire card is the
 * hit target. The small glyph (dot / check / switch) is just a visual
 * indicator; it differs by type on purpose, because that's how someone
 * reads single-select vs multi-select vs toggle at a glance.
 *
 * All three share ONE surface (`.gds-selection-card`) so they look identical
 * sitting together. Every visual is token-driven (`--gds-selection-card-*`
 * with semantic fallbacks), so a project can re-skin the cards through the
 * per-project override layer without forking the component.
 *
 *   <RadioGroup defaultValue="standard" className="grid gap-3">
 *     <RadioCard value="standard" label="Standard" description="4–10 business days" />
 *     <RadioCard value="fast"     label="Fast"     description="2–5 business days" />
 *     <RadioCard value="next-day" label="Next day" description="1 business day" />
 *   </RadioGroup>
 *
 * IMPORTANT — interactive content. Because the card is itself a control
 * (a `role=radio`/`checkbox`/`switch` button), you must NOT nest other
 * interactive elements (Slider, Input, Button, links) inside it. Put only
 * static content here (text, images, badges). If a card needs its own
 * controls, use a plain `Card` containing a `Field` row + the control as
 * siblings instead.
 */
type IndicatorPosition = "leading" | "trailing";
interface SelectionCardOwnProps {
    /** Title line. Omit and pass `children` for fully custom content. */
    label?: React.ReactNode;
    /** Secondary line under the label. */
    description?: React.ReactNode;
    /** Optional slot rendered between the content and the indicator
     *  (a Badge, price, kbd hint, …). */
    aside?: React.ReactNode;
    /** Hide the dot/check/switch glyph — selection is then conveyed purely by
     *  the card's selected border + background. Semantics stay intact. */
    hideIndicator?: boolean;
    /** Which side the indicator sits on. Default `trailing`. */
    indicatorPosition?: IndicatorPosition;
}
interface RadioCardProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "children">, SelectionCardOwnProps {
    children?: React.ReactNode;
}
declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLButtonElement>>;
interface CheckboxCardProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "children">, SelectionCardOwnProps {
    children?: React.ReactNode;
}
declare const CheckboxCard: React.ForwardRefExoticComponent<CheckboxCardProps & React.RefAttributes<HTMLButtonElement>>;
interface SwitchCardProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, "children">, SelectionCardOwnProps {
    children?: React.ReactNode;
}
declare const SwitchCard: React.ForwardRefExoticComponent<SwitchCardProps & React.RefAttributes<HTMLButtonElement>>;

/**
 * Code — syntax-highlighted code surface with diff, line-emphasis, and
 * reveal animation modes. Designed for marketing heroes ("diff hero"),
 * docs blocks, and changelog entries.
 *
 * Engine choice: prism-react-renderer. Sync, ~6kb, render-prop API hands
 * us `tokens` as data. Already in use in Studio's CodeView so the repo
 * has one highlighter, not two. Async highlighters (shiki) would either
 * flash unstyled on hydration or balloon the marketing bundle once you
 * include enough langs to matter. See gradeui/STUDIO.md for the Studio
 * variant.
 *
 * Theme is CSS-variable driven (`--gds-code-*`), so token palette
 * inverts with the theme without us re-rendering a different prism
 * theme. The prism `theme` prop just hands each token type a
 * `color: var(--gds-code-<thing>)` so the cascade does the work.
 *
 * Animation strategy: motion (already a dep). `reveal="lines"` staggers
 * each line in; `typewriter` reveals tokens one-at-a-time per line;
 * `diff` plays the removed → added swap. The `trigger` prop selects
 * what kicks it off — `inView` is the common case for scroll-driven
 * marketing surfaces; `mount` fires immediately; `manual` reads `play`.
 */
type CodeLanguage = Language;
type CodeReveal = "none" | "lines" | "typewriter" | "diff";
type CodeTrigger = "mount" | "inView" | "manual";
type CodeSpeed = "slow" | "normal" | "fast";
type CodeSize = "xs" | "sm" | "md";
/**
 * Step shape for scripted terminal / CLI sessions. Lives on `<Code>`
 * itself rather than a sibling `CodeSequence` so the theme bridge,
 * prompt prop, cursor, surface tokens, and prism highlighter aren't
 * duplicated. When `steps` is provided, it overrides `source` + `reveal`
 * and runs the machine below internally.
 *
 *   - `type`   — types text into the buffer as if a user were typing
 *   - `output` — appends text instantly as command output (no prompt,
 *                no per-char delay, often muted in render)
 *   - `wait`   — pauses for `ms` milliseconds before the next step
 *   - `clear`  — wipes the buffer (terminal `clear`)
 */
type CodeStep = {
    type: "type";
    text: string;
    speed?: CodeSpeed;
} | {
    type: "output";
    text: string;
} | {
    type: "wait";
    ms: number;
} | {
    type: "clear";
};
interface CodeDiff {
    /** 1-indexed line numbers marked as added (green bg + `+` gutter). */
    added?: number[];
    /** 1-indexed line numbers marked as removed (red bg + `-` gutter). */
    removed?: number[];
}
interface CodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
    /**
     * Source code to render. Optional when `steps` is provided — the
     * scripted machine builds its own buffer and ignores `source`. When
     * neither `source` nor `steps` is set, the block renders empty.
     */
    source?: string;
    /** Prism language id — `tsx` handles JSX too. Defaults to `tsx`. */
    language?: CodeLanguage;
    /**
     * 1-indexed lines (or `[start, end]` ranges) to emphasise with the
     * highlight background. Composes with `diff` — diff colours win.
     */
    highlight?: number | number[] | Array<number | [number, number]>;
    /** Diff mode — paints +added / -removed lines and renders a gutter. */
    diff?: CodeDiff;
    /** Reveal animation. Defaults to `none`. */
    reveal?: CodeReveal;
    /** What triggers the reveal. Defaults to `mount`. */
    trigger?: CodeTrigger;
    /** For `trigger="manual"` — set true to play. */
    play?: boolean;
    /**
     * Animation feel — slow / normal (default) / fast. Maps onto sensible
     * stagger + pre-reveal delay values so authors don't have to think.
     * Explicit `stagger` / `delay` override the preset if provided.
     */
    speed?: CodeSpeed;
    /** Delay before the reveal starts (ms). Overrides the `speed` preset. */
    delay?: number;
    /**
     * Per-line stagger for `lines`/`diff`, per-token for `typewriter`
     * (ms). Overrides the `speed` preset.
     */
    stagger?: number;
    /** Show 1-indexed line numbers in a gutter. */
    showLineNumbers?: boolean;
    /** Optional filename / label in the chrome header. */
    filename?: string;
    /** Wrap long lines instead of horizontal scroll. */
    wrap?: boolean;
    /** Hide the surrounding chrome (border, header, padding). */
    bare?: boolean;
    /**
     * String prepended to every line. Use for terminal emulation
     * (`prompt="$ "` for bash, `prompt="> "` for PowerShell, `prompt=">>> "`
     * for Python REPL). Prompt characters render in muted token colour,
     * don't pick up the typewriter stagger (they're chrome, not content),
     * and are aria-hidden so screen readers don't read them.
     */
    prompt?: string;
    /**
     * Show a blinking cursor at the tail of the reveal — implies the
     * "typing" gesture in marketing demos and terminal sessions.
     * Defaults to `true` when `reveal="typewriter"`, `false` otherwise.
     * Pass explicit `true` to keep the cursor up after a `lines` reveal
     * completes, or `false` to hide it on a typewriter run.
     */
    cursor?: boolean;
    /**
     * Scripted terminal session. When provided, takes precedence over
     * `source` + `reveal` — the component runs the step machine,
     * progressively appending characters per step. Pairs naturally with
     * `language="bash"` + `prompt="$ "` + `cursor` (all default-on).
     *
     * Output lines are rendered without a prompt prefix and at a muted
     * token colour so they read as command output rather than input.
     * Use `wait` between commands to let the user catch up.
     *
     * Example:
     *   <Code language="bash" prompt="$ " steps={[
     *     { type: "type", text: "pnpm add @gradeui/ui" },
     *     { type: "wait", ms: 500 },
     *     { type: "output", text: "added 47 packages in 2.3s" },
     *     { type: "type", text: "pnpm gradeui init" },
     *   ]} />
     */
    steps?: CodeStep[];
    /**
     * When `steps` is set: loops the sequence forever after completion
     * (with a 2s pause + clear between cycles). For "always-on" hero
     * demos that need to keep playing.
     */
    loop?: boolean;
    /**
     * Container sizing — `auto` (default) grows with the rendered lines.
     * A number is treated as pixels (`300` → `300px`); a string is passed
     * through as CSS (`"20rem"`, `"50vh"`, `"calc(100vh - 4rem)"`).
     *
     * Overflowing content scrolls. Pair with `wrap` to break long lines
     * instead of horizontal scroll.
     */
    /**
     * Type-scale preset. `xs` (12px) for dense changelog cards and inline
     * code in tables; `sm` (14px, default) for marketing heroes and most
     * docs blocks; `md` (16px) for "this is the focal point" displays
     * like AI-output demos and large screen-capture replacements.
     *
     * Composes with `maxLines` correctly because the container height
     * uses `1lh` which inherits whatever line-height the size class
     * produces — switching size resizes the container automatically.
     */
    size?: CodeSize;
    height?: number | string | "auto";
    /**
     * Cap the visible line count — the container is fixed at exactly
     * `maxLines * 1lh` and additional lines scroll. Use for terminal
     * windows ("show me the last 8 lines"), code-tour cards, and
     * marketing surfaces that need a stable vertical rhythm regardless
     * of how much content is in the snippet.
     *
     * Wins over `height` when both are set.
     */
    maxLines?: number;
}
declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Message — the canonical "avatar + author + timestamp + body" row.
 *
 * THE primitive for any chat message, comment, post-reply, activity-log
 * entry, or notification row that follows the people-and-text shape.
 * Surfaced after three scaffolds (chat, comments, hero preview) all
 * re-rolled the same flex layout inline — that was the signal.
 *
 * Slot-based composition for the avatar so consumers pass whatever
 * Avatar variant fits their surface (sized, toned, image, fallback).
 * Message doesn't pick an Avatar shape for you — it just hosts.
 *
 *   <Message
 *     author="alice"
 *     timestamp="11:24"
 *     avatar={
 *       <Avatar size="sm">
 *         <AvatarFallback tone="violet">A</AvatarFallback>
 *       </Avatar>
 *     }
 *   >
 *     Post copy is in the doc.
 *   </Message>
 *
 * For "your messages right-aligned" chat surfaces (iMessage / WhatsApp
 * / your own DM threads), pass `align="end"` and the row + content
 * mirror.
 *
 * Anti-patterns to avoid (caught from real scaffold use):
 *
 *   - Don't roll a custom "AuthorDot" inline — Avatar with
 *     <AvatarFallback tone="..."> covers the colored-initials case
 *     cleanly and stays themable.
 *   - Don't use Message for non-people activity (system events,
 *     log lines). Reach for Callout or a plain Row.
 */
interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
    /** Display name of the message author. */
    author: string;
    /**
     * Timestamp string ("11:24", "2 hours ago") OR any node for custom
     * formatting (tooltip-wrapped time, link to permalink, etc).
     */
    timestamp?: React.ReactNode;
    /**
     * Avatar slot. Pass any `<Avatar>` composition. When omitted, the
     * row renders without an avatar column — handy for grouped messages
     * from the same author where only the first row shows the avatar.
     */
    avatar?: React.ReactNode;
    /**
     * Small chip(s) next to the author name. Use for "OP", "Bot",
     * "Admin", or any role/state badge that belongs in the header
     * rhythm rather than the body.
     */
    badge?: React.ReactNode;
    /**
     * Editing state — renders an "(edited)" hint next to the timestamp.
     * Pass a string to customise the label (e.g. "(edited 2 minutes ago)").
     */
    edited?: boolean | string;
    /**
     * Pinned state — renders a small pin glyph at the top of the row.
     * Surfaces "this is a sticky / pinned message" in Slack-style feeds.
     */
    pinned?: boolean;
    /**
     * End-of-header slot. Common use: a hover-revealed Row of small
     * icon buttons (reply / react / pin / more). Pushed to the right
     * with `ml-auto`.
     */
    actions?: React.ReactNode;
    /**
     * Reactions slot — renders below the body. Typically a Row of
     * reaction chips (emoji + count). Hidden when no node is passed.
     */
    reactions?: React.ReactNode;
    /**
     * Thread / reply count — renders a "N replies" link affordance
     * below the body. Click handler is the consumer's responsibility.
     * Wire `onThreadClick` if you want the built-in button to fire.
     */
    threadCount?: number;
    /** Fires when the built-in "N replies" affordance is clicked. */
    onThreadClick?: () => void;
    /**
     * Visual alignment. `start` (default) puts the avatar on the left
     * — the standard chat / comment shape. `end` mirrors the row so the
     * avatar sits on the right and the content right-aligns — use for
     * "your messages" in DM threads.
     */
    align?: "start" | "end";
    /**
     * Row rhythm. `default` is the canonical chat / channel-feed shape.
     * `compact` tightens text sizes + gaps for dense side-panel use
     * (Studio comments tab, activity feeds, notification rows where many
     * rows stack vertically and the surface is narrow). Avatar size is
     * still consumer-controlled — pair `density="compact"` with
     * `Avatar size="xs"` for the tightest rhythm.
     */
    density?: "default" | "compact";
    /**
     * Body content (the message text). Accepts any node so consumers
     * can embed rich content — Markdown-rendered prose, images,
     * embedded cards, etc. Plain text is the common case.
     */
    children: React.ReactNode;
}
declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Cancellable sleep + type helpers for scripted demos.
 *
 * The runner threads an `AbortSignal` through every step so a `stop()`
 * call (or an unmount) can short-circuit long waits and typing loops
 * cleanly. Consumers write `await sleep(ms, signal)` inside their
 * interpret callback and the cancellation is automatic.
 *
 * Note: this throws DOMException("Aborted", "AbortError") on cancel.
 * The runner's outer try/catch swallows that specific error and exits;
 * any other rejection bubbles up so authoring bugs aren't silenced.
 */
/**
 * Promisified setTimeout that resolves after `ms` milliseconds, or
 * rejects with an AbortError if the signal fires first. Resolves
 * immediately if `ms <= 0`.
 */
declare function sleep(ms: number, signal?: AbortSignal): Promise<void>;
/**
 * Type `text` one character at a time, calling `onTick(partial)` for
 * each prefix. Stagger between ticks defaults to 22ms (the `normal`
 * speed preset's `tokenStagger`).
 *
 * `onTick` receives the cumulative typed text (not the new char), so
 * consumers can do `setBuffer(prefix + partial)` without tracking state
 * themselves. The final call fires with the complete text — there's no
 * separate "done" callback.
 */
declare function typeText(text: string, onTick: (partial: string) => void, stagger?: number, signal?: AbortSignal): Promise<void>;

/**
 * useScriptedDemo — the shared step-machine hook behind every
 * scripted-demo surface in gradeui (`<Code>`, `<Composer>`,
 * `<DemoStage>`, anything else that wants the same play / stop / speed
 * semantics).
 *
 * Generic over the Step type. Each consumer defines its own verbs
 * (Code has `output`, Composer has `mention`, DemoStage has `reveal`)
 * and passes an `interpret(step, ctx)` callback that executes one
 * step. The hook owns: sequencing, cancellation, trigger detection
 * (mount / inView / manual), loop, pre-delay, completion signal, and
 * the imperative play() / stop() API.
 *
 * Reduced motion: this hook is the declarative-motion layer's accessibility
 * boundary. When the OS reports `prefers-reduced-motion: reduce` OR the
 * global `data-motion="off"` toggle is set (both via `useReducedMotion`),
 * the runner settles on the FINAL frame instead of animating — zeroed
 * timings run every step instantly and the sequence never loops, so the
 * end state shows and holds. That keeps lib/demo honouring the same motion
 * control as ThreeScene and the CSS reset; without it, a screen built with
 * <Code> would keep typing under reduced motion and would not be accessible.
 *
 * Authoring guide for `interpret`:
 *   - `await sleep(ms, ctx.signal)` for any pause so stop() can short
 *     a long wait cleanly.
 *   - `await typeText(text, onTick, stagger, ctx.signal)` for typing
 *     loops, again so stop() interrupts mid-character. A non-positive
 *     stagger (what the reduced-motion preset supplies) emits the whole
 *     string in one tick, so the final state shows with no animation.
 *   - Read `ctx.speed` to grab the resolved DEMO_SPEED_PRESETS entry
 *     when a step doesn't pin its own cadence.
 *   - Throw nothing on cancel — the helpers do it for you. Anything
 *     else thrown is treated as a real bug and bubbles to the console.
 */
interface ScriptedDemoContext {
    /** Resolved speed preset for the current run. Zeroed under reduced motion. */
    speed: (typeof DEMO_SPEED_PRESETS)[DemoSpeed];
    /** AbortSignal that fires on stop() / unmount / steps change. */
    signal: AbortSignal;
    /** Live cancellation check for code paths that can't take a signal. */
    cancelled: () => boolean;
    /** True when the run is in reduced-motion mode (settling, not animating).
     *  Most interpreters don't need this — zeroed timings handle it — but a
     *  step that does something non-timing-based (confetti, sound) can skip it. */
    reduced: boolean;
}
interface UseScriptedDemoOptions<TStep> {
    /** The steps to run. Undefined or empty means "no script". */
    steps?: TStep[];
    /**
     * Per-step interpreter. Receives one step + a context with timing
     * helpers, runs whatever the step means, and returns when done.
     * Synchronous or async — the runner awaits either.
     */
    interpret: (step: TStep, ctx: ScriptedDemoContext) => Promise<void> | void;
    /** Animation feel. Defaults to `normal`. */
    speed?: DemoSpeed;
    /** What kicks the script off. Defaults to `mount`. */
    trigger?: DemoTrigger;
    /** For `trigger="manual"` — flip true to play. */
    play?: boolean;
    /** Loop the sequence forever after completion. Pause length controlled by `loopDelay`. */
    loop?: boolean;
    /** Cap the number of loop cycles, then settle and stop. A demo is a movie —
     *  it shouldn't spin forever. Default Infinity. Grid/embed surfaces set a
     *  small number so the loop ends instead of running unattended. */
    maxLoops?: number;
    /**
     * Milliseconds to pause between loop cycles. Only applies when
     * `loop` is true. Defaults to 2000. Marketing surfaces that want
     * the demo to breathe between repeats bump this to 4000-6000; tight
     * inline demos drop it to 800.
     */
    loopDelay?: number;
    /** Container ref for inView detection. Required when `trigger="inView"`. */
    containerRef?: React.RefObject<HTMLElement | null>;
    /**
     * Fires when one loop iteration completes (or the whole run, when
     * `loop` is false). Consumers can use this to reset their buffer or
     * fire a parent callback.
     */
    onComplete?: () => void;
    /**
     * Fires before each loop iteration starts (after the 2s pause).
     * Use to reset per-iteration state in the consumer.
     */
    onLoopReset?: () => void;
}
interface ScriptedDemoState {
    /** True while the runner is actively walking steps. */
    isPlaying: boolean;
    /** True after the last step has run (and stays true until reset). */
    isComplete: boolean;
    /** 0-indexed pointer to the currently executing step, or -1 idle. */
    currentIndex: number;
    /** Imperative trigger. Mostly for `trigger="manual"` ref handles. */
    play: () => void;
    /** Cancel the in-flight script. Idempotent. */
    stop: () => void;
    /**
     * One-shot replay. Cancels any in-flight run, then re-plays from
     * step 0. Pass a delay in ms to schedule the replay (useful for
     * "play, finish, breathe, play once more" cadences without the
     * commitment of `loop`).
     */
    restart: (delayMs?: number) => void;
}
declare function useScriptedDemo<TStep>(opts: UseScriptedDemoOptions<TStep>): ScriptedDemoState;

/**
 * BlinkingCursor — the shared caret used by every scripted-demo
 * surface in gradeui. Styled via CSS variables so each host (Code's
 * terminal, Composer's inline caret, future surfaces) can tweak
 * dimensions and colour without forking the component.
 *
 * Tokens read from the cascade:
 *   --gds-demo-cursor-color   defaults to currentColor
 *   --gds-demo-cursor-width   defaults to 0.55ch (a hair narrower than
 *                             a monospace char so it reads as a caret
 *                             rather than a block)
 *   --gds-demo-cursor-height  defaults to 1.1em
 *
 * The animation lives in `styles/globals.css` as `.gds-demo-cursor`
 * (alongside the other demo primitives). Keeping it in CSS rather
 * than motion / framer keeps the cursor available in environments
 * that disable JS animation but still render the page.
 */
interface BlinkingCursorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
    /**
     * Visual variant. `inline` (default) is for caret-in-text demos
     * (Code, Composer). `block` is for terminal-style square cursors
     * that fill a character cell.
     */
    variant?: "inline" | "block";
}
declare const BlinkingCursor: React.ForwardRefExoticComponent<BlinkingCursorProps & React.RefAttributes<HTMLSpanElement>>;

/**
 * DemoStage + Reveal — staged appearance for whole-interface demos.
 *
 * Drop `<Reveal id="hero">…</Reveal>` around any subtree that should
 * appear on cue. Wrap a region in `<DemoStage steps={…}>` and the
 * script drives which targets become visible, in what order, with
 * what cadence. Same speed / trigger / loop / play semantics as
 * `<Code>` and `<Composer>`.
 *
 * Why a context-based pattern instead of one-component-per-region:
 *   - Authoring stays declarative — the script reads as a storyboard,
 *     not as a stack of imperative ref calls.
 *   - Reveals can live deep in a subtree without prop-drilling.
 *   - The same `<Reveal>` works whether or not a parent stage exists
 *     (it just renders visible if there's no context, so the same
 *     markup ships to production without the demo wrapper).
 *
 * Reduced motion: if the user has `prefers-reduced-motion`, every
 * Reveal renders immediately at its destination state — the stage's
 * script still walks, but the visual transitions are no-ops.
 */
type RevealStep = {
    type: "reveal";
    target: string;
} | {
    type: "reveal-all";
} | {
    type: "hide";
    target: string;
} | {
    type: "wait";
    ms: number;
} | {
    type: "reset";
};
type RevealAnimation = "fade" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "scale" | "none";
interface DemoStageProps {
    /** Steps that drive which Reveals are visible at what time. */
    steps?: RevealStep[];
    /** Speed preset. Same vocabulary as Code / Composer. */
    speed?: DemoSpeed;
    /** When the stage starts running. Defaults to `mount`. */
    trigger?: DemoTrigger;
    /** For trigger="manual" — flip true to play. */
    play?: boolean;
    /** Loop the script forever. */
    loop?: boolean;
    /** Default enter animation for child Reveals that don't override. */
    defaultAnimation?: RevealAnimation;
    /**
     * Render content visible by default (every target shown) when the
     * stage has no steps. Useful for sharing the same JSX between live
     * production use and demo playback.
     */
    visibleWhenIdle?: boolean;
    className?: string;
    children: React.ReactNode;
}
declare function DemoStage({ steps, speed, trigger, play, loop, defaultAnimation, visibleWhenIdle, className, children, }: DemoStageProps): React.JSX.Element;
interface RevealProps {
    /** Stage target id. The matching `{ type: "reveal", target: id }` step shows this. */
    id: string;
    /** Enter animation. Falls back to the parent stage's `defaultAnimation`. */
    animation?: RevealAnimation;
    /** Override transition duration (ms). Defaults to the stage speed's fadeMs. */
    durationMs?: number;
    /**
     * When true and there's no parent DemoStage, render hidden anyway.
     * Default false — naked usage renders visible so production markup
     * matches demo markup.
     */
    hideOutsideStage?: boolean;
    /**
     * Fires when this Reveal transitions from hidden to visible. Use to
     * kick off a nested scripted demo (Composer.restart(), Code.play(),
     * etc) at the moment the user actually sees the surface. Without
     * this hook, nested demos with `trigger="mount"` would run while
     * still hidden and the user would miss the animation entirely.
     */
    onReveal?: () => void;
    /**
     * Fires when this Reveal transitions from visible to hidden (e.g.
     * because the stage script ran a `hide` step or looped via `reset`).
     * Use to pause/reset nested state.
     */
    onHide?: () => void;
    className?: string;
    children: React.ReactNode;
}
declare function Reveal({ id, animation, durationMs, hideOutsideStage, onReveal, onHide, className, children, }: RevealProps): React.JSX.Element;

/**
 * DatePicker + DateRangePicker
 *
 * Sealed complex components built on top of the Popover + Button + Calendar
 * primitives. Consumers get a single import with a `value` / `onChange`
 * contract — no need to know about Popover, DayPicker, or date-fns.
 *
 * The primitives remain exported from the barrel so anyone who needs a
 * different trigger, different positioning, or a custom layout can still
 * compose their own — see `apps/docs/app/components/date-picker/page.tsx`
 * for the hand-assembled recipe.
 *
 * API:
 *   <DatePicker value={date} onChange={setDate} />
 *   <DatePicker value={date} onChange={setDate} format="PP" placeholder="..." />
 *   <DateRangePicker value={range} onChange={setRange} numberOfMonths={2} />
 *
 * The `value` / `onChange` shape matches react-day-picker's `selected` /
 * `onSelect` internally — we just rename them so consumers speak form.
 */

type PopoverAlign = "start" | "center" | "end";
type PopoverSide = "top" | "right" | "bottom" | "left";
interface DatePickerBaseProps {
    /** Placeholder text shown when no date is selected. */
    placeholder?: string;
    /** Disable the trigger. */
    disabled?: boolean;
    /** Classes on the outer trigger button. */
    className?: string;
    /** Classes forwarded to PopoverContent. */
    contentClassName?: string;
    /** Forwarded to PopoverContent — which edge to align to. Defaults to "start". */
    align?: PopoverAlign;
    /** Forwarded to PopoverContent — which side of the trigger to render on. */
    side?: PopoverSide;
    /**
     * date-fns format string for the trigger label. Defaults to "PPP"
     * (e.g. "April 19th, 2026"). Pass "PP" for shorter "Apr 19, 2026".
     */
    format?: string;
    /** Forwarded to the underlying `react-day-picker` Calendar. */
    captionLayout?: React.ComponentProps<typeof Calendar>["captionLayout"];
    /** Icon shown in the trigger. Defaults to lucide's CalendarIcon. */
    icon?: React.ReactNode;
    /** Accessible label for screen readers when no date is selected. */
    "aria-label"?: string;
}
interface DatePickerProps extends DatePickerBaseProps {
    /** The selected date, or undefined when empty. */
    value?: Date;
    /** Called when the user selects or clears the date. */
    onChange?: (date: Date | undefined) => void;
}
interface DateRangePickerProps extends DatePickerBaseProps {
    /** The selected range, or undefined when empty. */
    value?: DateRange;
    /** Called when the user selects or clears the range. */
    onChange?: (range: DateRange | undefined) => void;
    /** Number of months to show side-by-side. Defaults to 2. */
    numberOfMonths?: number;
}
declare function DatePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, "aria-label": ariaLabel, }: DatePickerProps): React.JSX.Element;
declare function DateRangePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, numberOfMonths, "aria-label": ariaLabel, }: DateRangePickerProps): React.JSX.Element;

declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
    /**
     * What the dialog surface is *made of*. Composes with the overlay
     * scrim — see PRESENCE.md and dialog.md for scenarios.
     *
     * - `solid` (default): opaque `bg-background`.
     * - `translucent`: ~82% opacity, no blur — "presence without drama".
     * - `glass`: 58% opacity + 14px blur + edge highlight. The page
     *   underneath shows through softly.
     * - `glass-strong`: 42% opacity + 24px blur. For dialogs that should
     *   feel like an overlay rather than a panel.
     */
    surface?: Surface;
    /**
     * How the panel is shaped on small screens.
     *
     * - `sheet` (default): a full-screen sheet below `sm`, its padding
     *   clearing the device safe areas, content scrolling. The right
     *   shape for forms and flows — there is more to do than read.
     * - `center`: the centred card at every width. Use for short
     *   confirmations and for anything the user cannot dismiss (a
     *   full-screen non-dismissable sheet is a trap on a phone).
     *
     * From `sm` up the two are identical.
     */
    layout?: "sheet" | "center";
    /** Render the built-in close button. Set false when the dialog owns
     *  its own dismissal (or deliberately has none). */
    showClose?: boolean;
    /** Draw the hairline outline around the panel. Default true, which is
     *  the long-standing look. Set false on dark, high-contrast surfaces
     *  where the shadow and the panel's own background already separate it
     *  from the page and the outline reads as an artefact. */
    bordered?: boolean;
}
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
declare const DialogHeader: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
};
declare const DialogFooter: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
};
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Menu density. Set `size` on `<DropdownMenuContent>` (or
 * `<DropdownMenuSubContent>`) and every item inside — Item, Checkbox,
 * Radio, SubTrigger, Label — picks up matching padding / text-size via
 * context (which flows through the Radix portal). Mirrors Select so a
 * compact trigger can have an equally compact menu. `xs` is the
 * tool-panel density (the Studio inspector).
 */
type DropdownMenuSize = "default" | "sm" | "xs";
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    inset?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
interface DropdownMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
    /** What the submenu surface is *made of*. See dropdown-menu.md. */
    surface?: Surface;
    /** Menu density — cascades to items via context. */
    size?: DropdownMenuSize;
}
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
    /**
     * What the menu surface is *made of*. `solid` (default) is `bg-popover`.
     * `translucent` matches Apple HIG / iOS menu sheets. `glass` for menus
     * floating over rich canvases. See dropdown-menu.md.
     */
    surface?: Surface;
    /** Menu density — cascades to items via context. */
    size?: DropdownMenuSize;
}
declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    inset?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    inset?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuShortcut: {
    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
    displayName: string;
};

/**
 * Input variants — `size` lets dense surfaces (the Studio inspector,
 * settings sheets) reach for a compact `sm` input without hand-rolling
 * className overrides. Default keeps the existing h-9 padding /
 * text-base-md:text-sm so this is a no-op for every existing call
 * site.
 *
 * `pl-3 pr-3` is preserved verbatim from the original so the search-
 * input pattern (leading icon overrides `pl-*`) still wins via
 * twMerge. See packages/ui/components/ui/input.tsx for the full
 * rationale.
 */
declare const inputVariants: (props?: ({
    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
    variant?: "default" | "ghost" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
type InputVariant = NonNullable<VariantProps<typeof inputVariants>["variant"]>;
type InputProps = Omit<React.ComponentProps<"input">, "size"> & {
    size?: InputSize;
    variant?: InputVariant;
    /** Adornment rendered inside the field on the leading edge — an icon,
     *  a unit, a prefix. Non-interactive by default (clicks pass through
     *  to focus the input); pass an element with its own pointer-events
     *  if you need it clickable. */
    startSlot?: React.ReactNode;
    /** Adornment rendered inside the field on the trailing edge — a unit
     *  ("px"), a clear button, a stepper. Same pointer rules as
     *  `startSlot`. */
    endSlot?: React.ReactNode;
    /**
     * Add the show/hide eye toggle to a `type="password"` field.
     *
     * Lives here rather than as a separate PasswordInput, or as an eye
     * button hand-composed at each call site, because every password field
     * in every product wants the same affordance and the same a11y
     * labelling. One prop means a form gets it by typing one word.
     *
     * Ignored unless `type="password"`: on any other type there is nothing
     * to reveal, and silently swapping a field's type would be worse than
     * doing nothing. Revealing swaps the rendered type to "text", which is
     * what every browser password manager expects.
     *
     * Composes with `endSlot`: the consumer's adornment renders first and
     * the toggle sits outermost, so a field can carry both a unit and a
     * reveal without the two fighting for the same corner.
     */
    revealable?: boolean;
};
declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

/**
 * Textarea variants — `size` mirrors Input so the whole form-control
 * family scales together. Default keeps the existing min-h-[80px] /
 * px-3 / text-sm; `sm` and `xs` are for dense tool panels.
 */
declare const textareaVariants: (props?: ({
    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["size"]>;
type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
    size?: TextareaSize;
};
declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

/**
 * InputGroup — 1:1 port of shadcn's Input Group family (same data-slots,
 * classes, and alignment variants) so a Figma frame named with these slots
 * maps straight onto the code.
 *
 *   <InputGroup>
 *     <InputGroupAddon><SearchIcon /></InputGroupAddon>
 *     <InputGroupInput placeholder="Search…" />
 *     <InputGroupAddon align="inline-end">
 *       <InputGroupButton>Go</InputGroupButton>
 *     </InputGroupAddon>
 *   </InputGroup>
 *
 * Addon alignment: inline-start / inline-end (sit beside the control) and
 * block-start / block-end (stack above/below — for textareas + toolbars).
 *
 * InputGroupButton is adapted to Grade's Button API (variant `ghost` by
 * default; height/padding driven by the group's own size classes).
 */
/** The group's height scale, mirroring Input's own sizes. The size is
 *  shared with the control inside (see InputGroupInput), so
 *  `<InputGroup size="lg">` is all a call site needs. */
type InputGroupSize = "lg" | "default" | "sm";
declare function InputGroup({ className, size, ...props }: React.ComponentProps<"div"> & {
    size?: InputGroupSize;
}): React.JSX.Element;
declare const inputGroupAddonVariants: (props?: ({
    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
declare const inputGroupButtonVariants: (props?: ({
    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
declare function InputGroupInput({ className, size, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<typeof Textarea>): React.JSX.Element;

declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
    /**
     * What the popover surface is *made of*. Defaults to `solid`
     * (`bg-popover`). `translucent` is the Apple HIG menu-sheet feel.
     * `glass` for floating panels over rich canvases.
     */
    surface?: Surface;
}
declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;

/**
 * The fill colour of the bar.
 *
 * `primary` is the default and the long-standing look. `accent` is the
 * quieter option (Ali, 11 Aug 2026: a full-width wizard progress bar in
 * primary "is too strong"): a bar that spans the whole header is a large
 * area of colour, and at that size the action colour stops reading as
 * progress and starts competing with the actual actions on the page.
 * `muted` is for a bar that is pure information, a quota meter or a
 * storage gauge, where any brand colour would over-signal.
 *
 * A PROP, not a className override on the indicator. The indicator is an
 * inner element, so tinting it from outside means reaching through the
 * component with a child selector, which breaks the moment the internals
 * change and has to be repeated at every call site.
 */
declare const TONE_FILL: {
    readonly primary: "bg-primary";
    readonly accent: "bg-accent";
    readonly muted: "bg-muted-foreground";
};
type ProgressTone = keyof typeof TONE_FILL;
interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
    tone?: ProgressTone;
}
declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

/**
 * MultiSelect — multi-pick combobox.
 *
 * Composes Popover + Command (cmdk) + Badge + Checkbox into the
 * pattern popularised by sersavan/shadcn-multi-select-component:
 *
 *   - Trigger: a button that shows the currently-selected items as
 *     removable Badges. Past `maxCount` selected items it collapses
 *     into a "+N more" badge so the trigger doesn't grow forever.
 *   - Open: a Popover containing a searchable Command list. Each
 *     row is a checkable item; a leading icon is optional per
 *     option.
 *   - Footer actions: Select all · Clear · Close.
 *
 * Controlled and uncontrolled both supported (value / defaultValue
 * mirroring Radix conventions). Selection is `string[]` — the
 * caller pulls the matching option objects from their own `options`
 * array when needed.
 *
 * Data-driven via `options` rather than compound children. Multi-
 * select lists are typically dozens of items long; declaring each
 * one in JSX is noisy and the per-item icon prop doesn't have a
 * natural children-API equivalent. A compound API (`MultiSelect.Item`)
 * could land later for the few cases that need fully custom rendering.
 *
 * Theming: visual surfaces (popover bg, badge fill, focus rings)
 * inherit from the theme tokens the underlying Popover / Badge /
 * Checkbox already read from. No new `--gds-multi-select-*` vars
 * needed yet; if/when callers want to retune density (e.g. a
 * compact variant), add them then.
 */

interface MultiSelectOption {
    /** Value stored in selection. Must be unique. */
    value: string;
    /** Display label for the dropdown row and selected badge. */
    label: string;
    /** Optional lucide-style icon component (or any React component
     *  accepting a className). Rendered both in the dropdown row and
     *  on the badge. */
    icon?: React.ComponentType<{
        className?: string;
    }>;
    /** Disables the row in the dropdown — selection is locked in
     *  whichever state it's currently in. */
    disabled?: boolean;
}
interface MultiSelectProps {
    /** The full pool of selectable items. */
    options: MultiSelectOption[];
    /** Controlled value. When provided, `onValueChange` MUST be wired
     *  or the component becomes a read-only display of `value`. */
    value?: string[];
    /** Uncontrolled initial value. Ignored if `value` is provided. */
    defaultValue?: string[];
    /** Fired whenever the selection changes. The full next selection
     *  is passed — caller doesn't need to reconcile add/remove. */
    onValueChange?: (next: string[]) => void;
    /** Placeholder text on the trigger when nothing is selected. */
    placeholder?: string;
    /** Search-input placeholder. Default "Search…". */
    searchPlaceholder?: string;
    /** Message rendered when search returns no rows. */
    emptyMessage?: string;
    /** Max badges to show on the trigger before collapsing to
     *  `+N more`. Default 3. Pass `Infinity` to never collapse. */
    maxCount?: number;
    /** Hide the Search input. Useful for short option lists. */
    searchable?: boolean;
    /** Hide the per-badge × button. Selected items can still be
     *  toggled off through the dropdown. */
    badgeDismissible?: boolean;
    /** Disable the whole control. */
    disabled?: boolean;
    /** Drives Popover's `modal` prop — when true, clicks outside the
     *  dropdown don't dismiss it until an explicit close. Default false. */
    modalPopover?: boolean;
    /** Extra classes on the trigger. */
    className?: string;
    /** Forwarded to the trigger button for tests / Studio selection. */
    id?: string;
    "aria-label"?: string;
}
declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;

/**
 * Combobox — 1:1 port of shadcn's (radix-namespace) Combobox, built on the
 * Base UI Combobox primitive (@base-ui/react). Compositional, not data-driven:
 * you render <ComboboxItem> children inside <ComboboxList>.
 *
 * Single select (default) shows the value in the input; pass `multiple` to the
 * root for chips. For a single chip that opens the popover (the Studio
 * token-field pattern), keep it single-select and render your own chip in an
 * <InputGroupAddon> — the built-in <ComboboxChips> is multiple-only.
 *
 *   <Combobox items={frameworks}>
 *     <ComboboxInput placeholder="Framework…" />
 *     <ComboboxContent>
 *       <ComboboxList>
 *         {(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
 *       </ComboboxList>
 *       <ComboboxEmpty>No results.</ComboboxEmpty>
 *     </ComboboxContent>
 *   </Combobox>
 */
declare const Combobox: typeof Combobox$1.Root;
declare function ComboboxValue({ ...props }: Combobox$1.Value.Props): React.JSX.Element;
declare function ComboboxTrigger({ className, children, ...props }: Combobox$1.Trigger.Props): React.JSX.Element;
declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: Combobox$1.Input.Props & {
    showTrigger?: boolean;
    showClear?: boolean;
}): React.JSX.Element;
declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: Combobox$1.Popup.Props & Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
declare function ComboboxList({ className, ...props }: Combobox$1.List.Props): React.JSX.Element;
declare function ComboboxItem({ className, children, ...props }: Combobox$1.Item.Props): React.JSX.Element;
declare function ComboboxGroup({ className, ...props }: Combobox$1.Group.Props): React.JSX.Element;
declare function ComboboxLabel({ className, ...props }: Combobox$1.GroupLabel.Props): React.JSX.Element;
declare function ComboboxCollection({ ...props }: Combobox$1.Collection.Props): React.JSX.Element;
declare function ComboboxEmpty({ className, ...props }: Combobox$1.Empty.Props): React.JSX.Element;
declare function ComboboxSeparator({ className, ...props }: Combobox$1.Separator.Props): React.JSX.Element;
declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof Combobox$1.Chips> & Combobox$1.Chips.Props): React.JSX.Element;
declare function ComboboxChip({ className, children, showRemove, ...props }: Combobox$1.Chip.Props & {
    showRemove?: boolean;
}): React.JSX.Element;
declare function ComboboxChipsInput({ className, ...props }: Combobox$1.Input.Props): React.JSX.Element;
declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;

/**
 * DataView — one dataset, drawn as a table, a list of cards, or a grid.
 *
 * Wraps TanStack Table so a page stops re-typing the same boilerplate
 * (sortable-header buttons, flexRender plumbing, selection wiring, the
 * view switch). You hand it `data` + a `columns` schema; it owns sorting,
 * column visibility, selection, and view switching.
 *
 *   <DataView data={rows} columns={cols} defaultView="table" />
 *
 * Schema-driven cells: each column declares a `type` (badge / tags /
 * number / currency / percent / date / boolean / url / text) and DataView
 * renders it. `cell` overrides per column for anything bespoke (avatars,
 * relations). `role: "title"` marks the primary field for card / grid.
 *
 * The view toggle can live ANYWHERE. `useDataView()` holds the state
 * (view / activeId / sorting / columnVisibility) so a `<DataViewToggle>`
 * or `<DataViewColumns>` placed in a page header drives a `<DataView>`
 * lower down. Or pass `toolbar` to let DataView render them inline.
 *
 * Single-view is first-class: pass `views={["table"]}` (or just
 * `defaultView` with no toolbar) and it's only ever a table / only cards /
 * only a grid, no switch.
 *
 * Table extras: mark a column `pinned="left"` for a fixed column (sticky,
 * give it a `width` so multi-pin offsets line up) and `stickyHeader` to
 * freeze the header row on scroll.
 *
 * Tunable via `--gds-data-view-*` (card / grid min column width, gap).
 */

type DataViewMode = "table" | "cards" | "grid";
type DataViewCellType = "text" | "badge" | "tags" | "number" | "currency" | "percent" | "date" | "boolean" | "url";
interface DataViewBadgeOption {
    value: string;
    label?: string;
    variant?: BadgeProps["variant"];
}
interface DataViewColumn<T = any> {
    /** Accessor key into the row + the column id. */
    key: string;
    /** Header content. */
    header: React.ReactNode;
    /** Built-in renderer to use for the value. Ignored when `cell` is set. */
    type?: DataViewCellType;
    /** For `type="badge"`: per-value label + colour. */
    options?: DataViewBadgeOption[];
    /** Render the cell yourself (avatars, relations, anything bespoke). */
    cell?: (row: T) => React.ReactNode;
    /** Hint for card / grid composition. `title` is the primary field. */
    role?: "title" | "meta";
    /** Allow click-to-sort on this column. */
    sortable?: boolean;
    /** Pin the column to the left (a fixed column). Give it `width` so
     *  multi-pin offsets line up. */
    pinned?: "left";
    /** Fixed width in px (used for pinned offsets + min sizing). */
    width?: number;
    /** Right-align the cell (numbers / currency). */
    align?: "start" | "end";
    /** Whether the user can hide it from the Columns menu. Default true. */
    hideable?: boolean;
    /** Start hidden. */
    defaultHidden?: boolean;
}
interface UseDataViewOptions {
    defaultView?: DataViewMode;
    views?: DataViewMode[];
    defaultActiveId?: string | null;
    defaultSorting?: SortingState;
    defaultColumnVisibility?: VisibilityState;
}
interface DataViewState {
    view: DataViewMode;
    setView: (v: DataViewMode) => void;
    views: DataViewMode[];
    activeId: string | null;
    setActiveId: (id: string | null) => void;
    sorting: SortingState;
    setSorting: OnChangeFn<SortingState>;
    columnVisibility: VisibilityState;
    setColumnVisibility: OnChangeFn<VisibilityState>;
}
declare function useDataView(options?: UseDataViewOptions): DataViewState;
interface DataViewToggleProps {
    value: DataViewMode;
    onChange: (v: DataViewMode) => void;
    views?: DataViewMode[];
    className?: string;
}
declare function DataViewToggle({ value, onChange, views, className, }: DataViewToggleProps): React.JSX.Element | null;
interface DataViewColumnsProps {
    columns: DataViewColumn[];
    visibility: VisibilityState;
    onVisibilityChange: (next: VisibilityState) => void;
    label?: string;
    className?: string;
}
declare function DataViewColumns({ columns, visibility, onVisibilityChange, label, className, }: DataViewColumnsProps): React.JSX.Element;
interface DataViewProps<T = any> {
    data: T[];
    columns: DataViewColumn<T>[];
    getRowId?: (row: T, index: number) => string;
    view?: DataViewMode;
    defaultView?: DataViewMode;
    onViewChange?: (v: DataViewMode) => void;
    views?: DataViewMode[];
    activeId?: string | null;
    defaultActiveId?: string | null;
    onActiveChange?: (id: string | null) => void;
    sorting?: SortingState;
    defaultSorting?: SortingState;
    onSortingChange?: OnChangeFn<SortingState>;
    columnVisibility?: VisibilityState;
    defaultColumnVisibility?: VisibilityState;
    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
    /** Freeze the header row on vertical scroll. */
    /**
     * Rows per page. Unset means no pagination: every row renders and the
     * page scrolls, which is right for a short list.
     *
     * WHY IT EXISTS (Ali, 12 Aug): a long table under stickyHeader was
     * capped at 28rem and scrolled INSIDE itself, which reads as a cropped
     * box rather than a table. Paginating is the honest fix for a history
     * that grows: the page stays one height, and the header cap is dropped
     * while paginating because a bounded page has nothing to scroll.
     */
    pageSize?: number;
    stickyHeader?: boolean;
    /** Render a built-in toolbar (columns menu + view toggle) above the view. */
    toolbar?: boolean;
    /** Override card / grid tile rendering. */
    renderCard?: (row: T, ctx: {
        active: boolean;
    }) => React.ReactNode;
    emptyMessage?: React.ReactNode;
    className?: string;
}
declare function DataView<T extends Record<string, any>>(props: DataViewProps<T>): React.JSX.Element;
declare namespace DataView {
    var displayName: string;
    var Toggle: typeof DataViewToggle;
    var Columns: typeof DataViewColumns;
}

declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

/**
 * Resizable — drag-to-adjust panel groups.
 *
 * Thin wrapper over `react-resizable-panels` so consumers can compose
 * persistently-sized splits (e.g. nav + main, list + detail, three-pane
 * with adjustable middle column) without owning the layout primitives.
 *
 * Use this when you want USER-adjustable column widths. For static layouts
 * with a fixed-width middle column, prefer `<AppShell nav="three-pane">`
 * — that's a plain CSS grid with no JS.
 *
 * Layout-shape parity:
 *   - `direction="horizontal"` → ResizableHandle is vertical (the divider
 *     between two columns)
 *   - `direction="vertical"`   → ResizableHandle is horizontal (the divider
 *     between two rows)
 *
 * Persisting layout: pass `id` to ResizablePanelGroup and `id` to each
 * ResizablePanel; react-resizable-panels writes layout to localStorage
 * under that id so the user's preferred sizes survive reloads.
 *
 * Example:
 *
 *   <ResizablePanelGroup direction="horizontal" id="inbox-shell">
 *     <ResizablePanel defaultSize={20} minSize={15} id="nav">
 *       <Sidebar />
 *     </ResizablePanel>
 *     <ResizableHandle withHandle />
 *     <ResizablePanel defaultSize={30} minSize={20} id="list">
 *       <ThreadList />
 *     </ResizablePanel>
 *     <ResizableHandle />
 *     <ResizablePanel defaultSize={50} id="detail">
 *       <ThreadDetail />
 *     </ResizablePanel>
 *   </ResizablePanelGroup>
 */
declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React.JSX.Element;
declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadElement | HTMLElement | HTMLLinkElement | HTMLDivElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
    className?: string | undefined;
    collapsedSize?: number | undefined;
    collapsible?: boolean | undefined;
    defaultSize?: number | undefined;
    id?: string | undefined;
    maxSize?: number | undefined;
    minSize?: number | undefined;
    onCollapse?: ResizablePrimitive.PanelOnCollapse | undefined;
    onExpand?: ResizablePrimitive.PanelOnExpand | undefined;
    onResize?: ResizablePrimitive.PanelOnResize | undefined;
    order?: number | undefined;
    style?: object | undefined;
    tagName?: keyof HTMLElementTagNameMap | undefined;
} & {
    children?: React.ReactNode;
} & React.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
    /** When true, render a visible grip handle in the middle of the divider
     *  for affordance. Without this, the handle is just a 1px hit area —
     *  fine for power-user tools, harder to discover for everyone else. */
    withHandle?: boolean;
}) => React.JSX.Element;

/**
 * Row — horizontal layout primitive.
 *
 * The partner to Stack. Use for button groups, inline form layouts,
 * split hero/logo rows, anything on one line. The default `align="center"`
 * matches what most real rows want — vertically-centred icon-plus-text,
 * centred button groups. `justify` covers the main-axis distribution
 * explicitly so the agent doesn't reach for `ml-auto` to push things
 * apart.
 *
 * Distinct from a two-pane Split: Row is for evenly flowing children
 * with a shared gap; Split enforces an explicit pane ratio (1/3 + 2/3
 * etc.) and is a separate primitive.
 */
declare const rowVariants: (props?: ({
    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
    wrap?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface RowProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowVariants> {
    /** When true, render as the single child element via Radix Slot — lets
     *  you stamp Row's layout classes onto an existing semantic tag without
     *  nesting an extra `<div>`. */
    asChild?: boolean;
}
declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Grid — 2D layout primitive. The partner to Stack and Row.
 *
 * Stack handles vertical, Row handles horizontal, Grid handles the
 * responsive 2D case — most commonly a set of equal-width tiles (stat
 * cards, feature cards, pricing columns) that needs to collapse
 * gracefully on narrow viewports. Without this primitive, every
 * vibe-coded dashboard reinvents `grid grid-cols-1 md:grid-cols-2
 * lg:grid-cols-4` and the settings panel has nothing to mutate.
 *
 * `cols` names the DESIRED desktop column count. Each value is a
 * baked-in responsive ladder that matches the standard pattern for that
 * count (1→2→N for small counts, 2→3→N for denser grids) so the model
 * just writes `<Grid cols="4">` and gets the same behaviour it would
 * hand-roll. If you need bespoke breakpoints, override via `className`.
 *
 * Sharing the `gap` / `align` scale with Stack and Row is deliberate:
 * when the Studio panel offers a "switch layout type" control between
 * Stack / Row / Grid, those props transfer cleanly — only `cols`
 * (Grid-only) and `justify` / `wrap` (Row-only) are lost.
 */
declare const gridVariants: (props?: ({
    cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | null | undefined;
    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
    align?: "center" | "start" | "end" | "stretch" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
    /** When true, render as the single child element via Radix Slot — lets
     *  you stamp Grid's layout classes onto an existing semantic tag
     *  without nesting an extra `<div>`. */
    asChild?: boolean;
}
declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Flex — the unopinionated flexbox primitive.
 *
 * The CSS-aligned partner to Stack / Row / Grid. Where Stack and Row bake in
 * a direction and a sensible gap/align default, Flex exposes the raw CSS
 * knobs and ships with CSS's own defaults — direction=row, gap=none,
 * justify=start, align=stretch, wrap=nowrap. Nothing is opinionated; you pay
 * for exactly the props you set.
 *
 * Use Flex when:
 *   - You need `direction="col-reverse"` or `"row-reverse"` — Stack and Row
 *     can't express either without falling back to className.
 *   - You want CSS defaults (stretch alignment, no baked-in gap) rather than
 *     Row's "items-center gap-md" starting point.
 *   - You're reaching for `className="flex …"` and want the settings-panel
 *     editability you lose when hand-rolling utility classes.
 *
 * Otherwise prefer Stack (vertical) / Row (horizontal) / Grid (2D) —
 * they're easier to read at a glance and have defaults tuned for the 95%
 * case. Flex is the escape hatch, not the default.
 */
declare const flexVariants: (props?: ({
    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface FlexProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
    /** When true, render as the single child element via Radix Slot — lets
     *  you stamp Flex's layout classes onto an existing semantic tag without
     *  nesting an extra `<div>`. */
    asChild?: boolean;
}
declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;

declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

declare const Select: React.FC<SelectPrimitive.SelectProps>;
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
/**
 * Menu density. Set `size` on `<SelectContent>` and every `<SelectItem>`
 * inside it picks up matching padding / text-size / check-indicator
 * sizing via context — so a compact trigger (`size="xs"`) can have an
 * equally compact dropdown without per-item overrides. React context
 * flows through the Radix portal (it follows the React tree, not the
 * DOM), so items styled this way work even though the menu is portaled.
 */
type SelectMenuSize = "default" | "sm" | "xs" | "2xs";
/**
 * Select trigger variants — `size` lets dense surfaces (the
 * Studio inspector, settings sheets) reach for a compact `sm`
 * trigger without hand-rolling className overrides. Default keeps
 * the existing h-10 / px-3 / text-sm so this is a no-op for every
 * existing call site.
 */
declare const selectTriggerVariants: (props?: ({
    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type SelectTriggerSize = NonNullable<VariantProps<typeof selectTriggerVariants>["size"]>;
declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
    size?: SelectTriggerSize;
    /** Adornment rendered inside the trigger on the leading edge — a
     *  property glyph, a unit. Mirrors Input's startSlot. Grouped with
     *  the value in a div (NOT a bare span: the trigger's
     *  `[&>span]:line-clamp-1` would stack a span's children
     *  vertically). */
    startSlot?: React.ReactNode;
    /** Hide the dropdown chevron — Figma-style token fields keep the
     *  right edge for their own affordances (detach/attach). */
    chevron?: boolean;
} & React.RefAttributes<HTMLButtonElement>>;
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    size?: SelectMenuSize;
    /** Portal target. Defaults to document.body; pass a themed wrapper to
     *  keep the menu inside a scoped theme (e.g. the Studio preview, where
     *  the theme is applied to a div, not :root). */
    container?: HTMLElement | null;
} & React.RefAttributes<HTMLDivElement>>;
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
    /** Optional right-aligned secondary text (e.g. a token's resolved
     *  value). Rendered in the menu row only — NOT inside ItemText, so
     *  it never mirrors into the trigger via SelectValue. */
    hint?: React.ReactNode;
} & React.RefAttributes<HTMLDivElement>>;
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

/**
 * Swatch — a single colour chip.
 *
 * THE primitive for showing a colour: brand-pop strips, palette pickers,
 * theme previews, token galleries, "pick an accent" rows. A swatch reads a
 * value from one of two places, in priority order:
 *
 *   - `color`  — any raw CSS colour (`#1f6feb`, `oklch(...)`, `rgb(...)`,
 *                even `var(--whatever)`). Use for one-off / external colours.
 *   - `token`  — a Grade colour token NAME (no `--` and no `oklch()` wrap),
 *                resolved to `oklch(var(--<token>))`. This is the design-system
 *                path: `token="brand-3"`, `token="primary"`, `token="chart-2"`.
 *                Because it points at the live CSS variable, the swatch
 *                re-voices automatically when the theme changes.
 *
 * A transparency checkerboard sits behind the fill (shared with the rest of
 * the system via `--gds-media-checker-*`), so semi-transparent values read
 * honestly instead of compositing against an opaque tile.
 *
 * Pass `onSelect` to make it pickable — it renders a real <button> with
 * `aria-pressed`, a focus ring, and a hover lift. `selected` draws the
 * shared selection ring (`--selected`). Pass `label` to caption it (the
 * caption also becomes the accessible name / tooltip).
 *
 * Sizing is the t-shirt scale (2xs → xl, 16px → 56px); reach for `size` over `h-*`/`w-*`
 * utilities so the scale stays on tokens. Shape is square / rounded (rides
 * `--radius`) / circle.
 */
declare const swatchVariants: (props?: ({
    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
    shape?: "rounded" | "square" | "circle" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type SwatchSize = NonNullable<VariantProps<typeof swatchVariants>["size"]>;
type SwatchShape = NonNullable<VariantProps<typeof swatchVariants>["shape"]>;
interface SwatchProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof swatchVariants> {
    /** Any raw CSS colour. Takes precedence over `token`. */
    color?: string;
    /** A Grade colour token name (no `--`), resolved as `oklch(var(--<token>))`. */
    token?: string;
    /** Fill kind. Defaults to "solid", or is inferred from `image` / `gradient`
     *  when omitted. Drives what the chip renders in place. */
    type?: "solid" | "gradient" | "image";
    /** CSS gradient for `type="gradient"` — e.g. `"linear-gradient(135deg,#6366f1,#ec4899)"`. */
    gradient?: string;
    /** Image URL for `type="image"` — rendered cover-fit behind the chip. */
    image?: string;
    /** Optional caption rendered beneath the chip; also the accessible name. */
    label?: React.ReactNode;
    /** Draws the shared selection ring (`--selected`). */
    selected?: boolean;
    /** Makes the swatch a pickable <button> and fires on activation. */
    onSelect?: () => void;
    /** Makes the swatch an editable colour well: hosts a native
     *  `<input type="color">` (the OS picker) behind the chip and fires with
     *  the new `#rrggbb`. The presentation stays the DS chip; the interaction
     *  stays native. Takes precedence over `onSelect`. */
    onColorChange?: (value: string) => void;
}
declare const Swatch: React.ForwardRefExoticComponent<SwatchProps & React.RefAttributes<HTMLElement>>;
interface SwatchGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    /** `row` spaces them out; `stack` overlaps into a coin-stack. Default row. */
    layout?: "row" | "stack";
    /** Cascades to every child Swatch. */
    size?: SwatchSize;
    /** Cascades to every child Swatch. */
    shape?: SwatchShape;
    /** Spacing between chips in `row` layout. Default sm. */
    gap?: "xs" | "sm" | "md" | "lg";
}
declare const SwatchGroup: React.ForwardRefExoticComponent<SwatchGroupProps & React.RefAttributes<HTMLDivElement>>;

declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const sheetVariants: (props?: ({
    side?: "bottom" | "top" | "right" | "left" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
    /** Extra classes for the backdrop overlay. e.g. `bg-transparent`
     *  keeps click-outside-to-close while removing the dimming — useful
     *  when the whole point is watching the page behind the sheet
     *  change (the embed theme playground). */
    overlayClassName?: string;
    /** Extra classes for the built-in close button — reposition it or
     *  restyle it as a full icon button (the default is a bare X at
     *  right-4 top-4 with an opacity hover). */
    closeClassName?: string;
    /**
     * What the sheet panel is *made of*. `solid` is the default opaque
     * `bg-background`. `glass` lets the page show through with a 14px
     * blur — the canonical "inspector panel" feel. Composes with the
     * overlay scrim. See sheet.md for scenarios.
     */
    surface?: Surface;
}
declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
declare const SheetHeader: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
};
declare const SheetFooter: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
};
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;

/**
 * `size` controls the visual weight. `default` is the standard control;
 * `sm` is the dense, subtle track for tool panels / inspectors (thin
 * muted track, small thumb) so a panel of sliders reads quietly.
 */
type SliderSize = "default" | "sm";
declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
    size?: SliderSize;
} & React.RefAttributes<HTMLSpanElement>>;

/**
 * Sortable — compound drag-to-reorder primitive built on dnd-kit.
 *
 * The orchestrator (`<Sortable>`) owns the DndContext + SortableContext;
 * items (`<Sortable.Item>`) attach the `useSortable` hook + transform
 * styles to whatever you put inside them. An optional `<Sortable.Handle>`
 * scopes the drag activation to a specific child element (drag-by-grip
 * instead of drag-by-whole-row).
 *
 * Design choices that may surprise you:
 *
 *   - Layout primitives (Stack, Row, Grid) stay PURE — they don't grow
 *     a `sortable` prop. The reorder behaviour lives on its own
 *     primitive that composes with any layout:
 *     `<Sortable><Stack>...</Stack></Sortable>` works.
 *     `<Sortable strategy="grid"><Grid cols={3}>...</Grid></Sortable>`
 *     too. This matches the dnd-kit / framer Reorder pattern and
 *     keeps each component's contract tight.
 *
 *   - `values` is the source of truth, not the children. The model is
 *     `state -> children`, so reorder fires `onReorder(newValues)` and
 *     the consumer updates state; React re-renders children in the
 *     new order. Trying to read children's keys + mutate them is
 *     fighting React's data-flow.
 *
 *   - Item identity is `value`, NOT `key`. Items must have a unique
 *     `value` prop that matches one entry in `values`. We deliberately
 *     don't auto-derive from `key` because React lifts keys out of
 *     children before we can read them, AND because the value carries
 *     more semantic weight than a render-time key.
 *
 *   - Cross-container drag (the "drag from To Do to Done" kanban case)
 *     is NOT covered by v1. That needs one DndContext above multiple
 *     SortableContexts — planned as `<Sortable.Group>` follow-up. For
 *     now, each `<Sortable>` is its own world. Single-list reorder,
 *     single-grid reorder, single-horizontal-row reorder all work.
 *
 *   - Theming: no new tokens. dnd-kit handles the transform CSS;
 *     visual treatment (drop shadow on the active item, slight
 *     scale, etc.) is applied via opt-in className on the item.
 */

type SortableStrategy = "vertical" | "horizontal" | "grid";
interface SortableGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Disable drag for every container inside the Group. */
    disabled?: boolean;
}
declare const SortableGroup: React.ForwardRefExoticComponent<SortableGroupProps & React.RefAttributes<HTMLDivElement>>;
interface SortableProps<T extends UniqueIdentifier = UniqueIdentifier> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "id"> {
    /** Ordered list of unique ids — strings or numbers. Source of truth
     *  for the order; reorder fires `onReorder(newValues)` and the
     *  consumer updates their state. */
    values: T[];
    /** Fired with the full new order after a drag-end that changed it.
     *  Drags that snap back (drop on origin) DON'T fire — only real
     *  reorders. */
    onReorder?: (next: T[]) => void;
    /** Layout direction the sort strategy assumes.
     *    `vertical` (default) — stacked column of items, drag up/down.
     *    `horizontal`         — row of items, drag left/right.
     *    `grid`               — 2D wrap, drag in any direction.
     *  Match this to the layout your items render in. */
    strategy?: SortableStrategy;
    /** Disable drag on every item without rebuilding the tree. */
    disabled?: boolean;
    /** Stable container id — required when this Sortable is nested
     *  inside a `Sortable.Group` for cross-container drag (the Group
     *  routes drag-end events by container id). Optional for standalone
     *  Sortable; auto-generated via React.useId when omitted. */
    id?: string;
}
interface SortableRootComponent extends React.ForwardRefExoticComponent<SortableProps & React.RefAttributes<HTMLDivElement>> {
    Item: typeof SortableItem;
    Handle: typeof SortableHandle;
    Group: typeof SortableGroup;
}
interface SortableItemProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Must match one of the parent `<Sortable values>` entries.
     *  Identity, not React key. */
    value: UniqueIdentifier;
    /** Render the item as its child element via Radix Slot — useful when
     *  the wrapping div would mess with your layout (e.g. inside Table
     *  rows). */
    asChild?: boolean;
    /** Disable drag for THIS item without disabling the whole Sortable. */
    disabled?: boolean;
}
declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;
interface SortableHandleProps extends React.HTMLAttributes<HTMLElement> {
    /** Render as the child element via Slot — typical pattern is
     *  `<Sortable.Handle asChild><Button variant="ghost" iconOnly>…</Button></Sortable.Handle>`. */
    asChild?: boolean;
}
declare const SortableHandle: React.ForwardRefExoticComponent<SortableHandleProps & React.RefAttributes<HTMLElement>>;
declare const Sortable: SortableRootComponent;

/**
 * Stack — vertical layout primitive.
 *
 * Reach for this as the default top-level wrapper inside the Studio main
 * slot when composing multiple regions (hero + content + footer). The
 * point is to stop the agent from freestyling `flex flex-col gap-6`
 * inline on every generation — a named layout component with a bounded
 * gap scale gives the Studio settings panel something to mutate, and
 * keeps vertical rhythm consistent across designs.
 *
 * Cross-axis default is `stretch` so Sections/Cards fill the container
 * width, which is what 95% of callers want. Override with `align="center"`
 * for a centred narrow column (auth cards, marketing copy).
 */
declare const stackVariants: (props?: ({
    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
    align?: "center" | "start" | "end" | "stretch" | null | undefined;
    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface StackProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
    /** When true, render as the single child element via Radix Slot — lets
     *  you stamp Stack's layout classes onto an existing semantic tag
     *  (`<section>`, `<main>`, `<nav>`) without nesting an extra `<div>`. */
    asChild?: boolean;
}
declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Switch — shadcn (radix) styling (shadow-xs, ring-[3px] focus, dark
 * track + thumb variants) over Grade's size scale.
 *
 * Grade trait kept on purpose: four sizes (the upstream shadcn switch
 * ships only `sm`/`default`). Track + thumb scale together via the
 * shared control-size scale; dimensions stay on Tailwind's spacing
 * scale (no arbitrary values). With `border-2`, thumb travel =
 * trackWidth − thumbWidth − 2×border, which lands on a clean
 * `translate-x-*` step at each size. `xs`/`2xs` are the dense
 * tool-panel sizes (the Studio inspector).
 */
declare const switchTrackVariants: (props?: ({
    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type SwitchSize = NonNullable<VariantProps<typeof switchTrackVariants>["size"]>;
declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
    size?: SwitchSize;
} & React.RefAttributes<HTMLButtonElement>>;

declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;

interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> {
    /** Default separator node for every <BreadcrumbSeparator/> inside this
     *  tree. Pass a string ("/", "›", "•"), a lucide icon (<Slash />,
     *  <ChevronRight />), or any ReactNode. Default: <ChevronRight />.
     *  Per-instance `<BreadcrumbSeparator>children</BreadcrumbSeparator>`
     *  still overrides. */
    separator?: React.ReactNode;
}
declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
interface BreadcrumbLinkProps extends React.HTMLAttributes<HTMLElement> {
    /** Anchor href. When set, renders an <a>; otherwise renders a <button>. */
    href?: string;
    /** Use a <span> instead of <a>/<button> — useful when wrapping in a
     *  framework-specific Link component yourself. */
    asChild?: boolean;
}
declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLElement>>;
declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
declare const BreadcrumbSeparator: {
    ({ children, className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
    displayName: string;
};
declare const BreadcrumbEllipsis: {
    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
    displayName: string;
};
/** One row inside a BreadcrumbMenuTrigger's popover. The dropdown
 *  renders the label as the main text and (optionally) a small
 *  muted summary line below. `active` is the visual cue for "this
 *  is the current trail node" so users can tell which entry maps
 *  to their current path. `hasChildren` adds a `›` so the user
 *  knows this entry has its own sub-menu when they pick it. */
interface BreadcrumbMenuItem {
    id: string;
    label: string;
    summary?: string;
    active?: boolean;
    hasChildren?: boolean;
}
interface BreadcrumbMenuTriggerProps {
    /** The label that appears in the breadcrumb itself (e.g. "Stack",
     *  "AppShellMain"). Distinct from the items: this is the segment
     *  the user is hovering, not its children. */
    label: string;
    /** Items to render in the popover when the segment is opened.
     *  Typically the children of the node this segment represents. */
    items: BreadcrumbMenuItem[];
    /** Called with the picked item's id when the user makes a
     *  selection. The popover auto-closes on select. */
    onSelect: (id: string) => void;
    /** Optional click handler for the segment label itself (not the
     *  dropdown). Useful when the host wants clicking the label to
     *  also select that node directly. When omitted, the label is
     *  purely a popover trigger. */
    onSelectLabel?: () => void;
    /** When true, mark the trigger as the current trail position.
     *  Visually heavier (matches BreadcrumbPage's weight) and the
     *  chevron rotates down to signal "you are here." */
    current?: boolean;
    className?: string;
}
/**
 * Segment that opens a popover of children/peers. Composes inside
 * a `<BreadcrumbItem>` exactly where you'd otherwise put a
 * `<BreadcrumbLink>` — same density, same focus ring.
 *
 *   <BreadcrumbItem>
 *     <BreadcrumbMenuTrigger
 *       label="Stack"
 *       items={children}
 *       onSelect={selectById}
 *     />
 *   </BreadcrumbItem>
 */
declare const BreadcrumbMenuTrigger: React.ForwardRefExoticComponent<BreadcrumbMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;

declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
declare const tabsListVariants: (props?: ({
    variant?: "pill" | "underlined" | null | undefined;
    size?: "sm" | "md" | "lg" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const tabsTriggerVariants: (props?: ({
    variant?: "pill" | "underlined" | null | undefined;
    size?: "sm" | "md" | "lg" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
}
declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, VariantProps<typeof tabsTriggerVariants> {
    /**
     * Tooltip text shown on hover / focus. Designed for icon-only
     * triggers: pass `<TabsTrigger value="preview" tooltip="Preview">`
     * with an icon child, and the component handles the rest. If
     * `aria-label` is not set explicitly, the tooltip string is also
     * applied as `aria-label` so screen readers can name the choice.
     *
     * Requires a `<TooltipProvider>` somewhere above the tabs. The
     * design system's root layout mounts one app-wide.
     */
    tooltip?: React.ReactNode;
}
declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

declare const THEMES: {
    readonly light: "";
    readonly dark: ".dark";
};
type ChartConfig = {
    [k in string]: {
        label?: React.ReactNode;
        icon?: React.ComponentType;
    } & ({
        color?: string;
        theme?: never;
    } | {
        color?: never;
        theme: Record<keyof typeof THEMES, string>;
    });
};
declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
    config: ChartConfig;
    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const ChartStyle: ({ id, config }: {
    id: string;
    config: ChartConfig;
}) => React.JSX.Element | null;
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> & {
    accessibilityLayer?: boolean;
    active?: boolean | undefined;
    includeHidden?: boolean | undefined;
    allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
    animationDuration?: recharts_types_util_types.AnimationDuration;
    animationEasing?: recharts_types_util_types.AnimationTiming;
    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
    coordinate?: Partial<recharts_types_util_types.Coordinate>;
    cursor?: boolean | React.ReactElement | React.SVGProps<SVGElement>;
    filterNull?: boolean;
    defaultIndex?: number;
    isAnimationActive?: boolean;
    offset?: number;
    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>> | undefined;
    position?: Partial<recharts_types_util_types.Coordinate>;
    reverseDirection?: recharts_types_util_types.AllowInDimension;
    shared?: boolean;
    trigger?: "hover" | "click";
    useTranslate3d?: boolean;
    viewBox?: recharts_types_util_types.CartesianViewBox;
    wrapperStyle?: React.CSSProperties;
} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
    hideLabel?: boolean;
    hideIndicator?: boolean;
    indicator?: "line" | "dot" | "dashed";
    nameKey?: string;
    labelKey?: string;
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const ChartLegend: typeof RechartsPrimitive.Legend;
declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "verticalAlign" | "payload"> & {
    hideIcon?: boolean;
    nameKey?: string;
}, "ref"> & React.RefAttributes<HTMLDivElement>>;

declare const toggleVariants: (props?: ({
    variant?: "default" | "outline" | "segmented" | null | undefined;
    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
    variant?: "default" | "outline" | "segmented" | null | undefined;
    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;

declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
    variant?: "default" | "outline" | "segmented" | null | undefined;
    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
    variant?: "default" | "outline" | "segmented" | null | undefined;
    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
    tooltip?: React.ReactNode;
    tooltipSide?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
    tooltipDelay?: number;
} & React.RefAttributes<HTMLButtonElement>>;

/**
 * Toolbar — slot-based chrome bar for the leading/center/trailing
 * pattern Apple HIG describes as a "Toolbar."
 *
 *   ┌─────────────────────────────────────────────────┐
 *   │  [leading]          [center]         [trailing] │
 *   └─────────────────────────────────────────────────┘
 *
 * The three-region top nav is everywhere — Reddit, Twitter, GitHub,
 * Linear's top bar, every desktop app's window chrome — and most
 * scaffolds end up rebuilding it from raw `<Row justify="between">`
 * with a manual flex-1 on the center. This primitive collapses that
 * into:
 *
 *   <Toolbar leading={<Logo/>} center={<Search/>} trailing={<Avatar/>} />
 *
 * The grid template is `auto 1fr auto`, so the center slot absorbs
 * available width and stays visually centered relative to the bar
 * (not relative to the gap between leading and trailing). If any
 * slot is omitted, the grid column collapses cleanly.
 *
 * Accessibility — role="toolbar" by default, with aria-label expected
 * via props. WAI-ARIA toolbar pattern: children should be keyboard-
 * navigable via arrow keys if they're a tight set of related actions.
 * For an app chrome bar (logo + nav + actions) the standard tab
 * sequence is usually fine and a single aria-label is enough; for an
 * editor-style toolbar (B / I / S / link), pair with a roving
 * tabindex implementation. (Roving tabindex is out of scope for v1 —
 * if you need it, compose with @radix-ui/react-toolbar's primitives
 * inside the slots.)
 *
 * Anatomy:
 *   Toolbar         — <div role="toolbar"> by default; sets the grid
 *   Toolbar.Slot    — exported for symmetry but rarely needed; the
 *                     leading/center/trailing props are the canonical
 *                     API
 *
 * Variants:
 *   position   — "top" | "bottom" | "inline"   (border placement)
 *   variant    — "default" | "subtle" | "transparent"
 *   size       — "sm" | "md" | "lg"            (height + padding)
 *   sticky     — boolean                       (sticky to top/bottom)
 *
 * Used for: app window chrome (AppShellHeader), section toolbars
 * inside a card or panel, action bars at the bottom of a list,
 * persistent footer toolbars on mobile-style layouts.
 */
declare const toolbarVariants: (props?: ({
    position?: "bottom" | "top" | "inline" | null | undefined;
    variant?: "default" | "transparent" | "subtle" | null | undefined;
    size?: "sm" | "md" | "lg" | null | undefined;
    sticky?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
interface ToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toolbarVariants> {
    /** Left-aligned content. Usually a logo + primary nav links. */
    leading?: React.ReactNode;
    /** Center-aligned content. Usually a search input, a page title,
     *  or a segmented control. The center column stretches via `1fr`
     *  so it stays visually centered relative to the bar. */
    center?: React.ReactNode;
    /** Right-aligned content. Usually action icons + user avatar. */
    trailing?: React.ReactNode;
    /** When using `children` directly (advanced custom layout), the
     *  slot props are ignored. Most callers should prefer the slot
     *  props — they give the canonical grid layout for free. */
    children?: React.ReactNode;
    /** Required by WAI-ARIA toolbar pattern. Falls back to "Toolbar". */
    "aria-label"?: string;
}
declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ToolbarSlot — escape-hatch piece for the rare case a consumer
 * wants to compose a custom inner layout with children but still
 * get the slot styling. Use the slot props on Toolbar where you can.
 */
interface ToolbarSlotProps extends React.HTMLAttributes<HTMLDivElement> {
    align?: "leading" | "center" | "trailing";
}
declare const ToolbarSlot: React.ForwardRefExoticComponent<ToolbarSlotProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Sidebar — compound layout primitive for vertical app navigation.
 *
 * Renamed from `SideMenu` (May 2026) and rebuilt around a compound API
 * so consumers can slot custom content into the header/content/footer
 * regions instead of being forced through a data-driven `sections=[...]`
 * prop. Replaces the previous single-component shape entirely.
 *
 * Why compound: sidebars vary wildly across products — Notion-style
 * workspace switcher up top, search input below, scrollable nav in the
 * middle, user profile + settings link at the bottom. The old data-
 * driven SideMenu could express the section list cleanly but anything
 * non-list-shaped (search inputs, drag handles, command-K trigger
 * pills, custom brand blocks) had to fight the API. Compound trades
 * "two lines of JSX" for "any shape the consumer wants."
 *
 * Compound shape:
 *
 *   <Sidebar>
 *     <SidebarHeader>            // brand / logo / org switcher
 *     <SidebarContent>           // scrollable body
 *       <SidebarSection title="Workspace">
 *         <SidebarItem href="/" icon={<Home />}>Dashboard</SidebarItem>
 *         <SidebarItem href="/inbox" icon={<Inbox />} badge={3}>Inbox</SidebarItem>
 *       </SidebarSection>
 *     </SidebarContent>
 *     <SidebarFooter>            // user / settings / pinned chrome
 *   </Sidebar>
 *
 * For routing integration, `<SidebarItem href>` renders an `<a>` by
 * default. Drop `asChild` to wrap any link component (Next/Link, React
 * Router Link, Remix Link, etc.) — Radix Slot stamps the item's classes
 * onto whatever you pass:
 *
 *   <SidebarItem asChild icon={<Home />}>
 *     <Link href="/">Dashboard</Link>
 *   </SidebarItem>
 *
 * Theming: visual surfaces (bg, border, text colour) come from semantic
 * theme tokens, not hard-coded greys. Sizing knobs (collapsed width,
 * expanded width, item padding) live as `--gds-sidebar-*` CSS variables
 * so the consumer can retune without prop drilling.
 *
 * Composition: Sidebar slots inside `<AppShellNav placement="side">`
 * exactly the way SideMenu did; AppShell is the page-level chrome,
 * Sidebar is the navigation content for that chrome.
 */

interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
    /** Controlled collapsed state. When set, `onCollapsedChange` MUST be
     *  wired or the toggle button becomes a no-op. */
    collapsed?: boolean;
    /** Uncontrolled initial collapsed state. Ignored if `collapsed` is set. */
    defaultCollapsed?: boolean;
    /** Fired when the toggle button flips collapsed state. */
    onCollapsedChange?: (next: boolean) => void;
    /** Show / hide the affordance for the user to collapse. Defaults true. */
    collapsible?: boolean;
    /**
     * Visual treatment.
     *
     * - `"rail"` (default) — the classic nav rail: sits flush against an
     *   adjacent surface with only a right-side border, fixed width via
     *   `--gds-sidebar-width`. Designed to slot into `<AppShellNav placement="side">`.
     * - `"panel"` — a floating card-style sidebar: full border, rounded
     *   corners, width inherited from the parent (typically a flex/grid
     *   track). Use when the sidebar is one of several adjacent panes
     *   in a body row, like Studio's `Projects | Canvas | Settings`.
     *
     * The variant affects ONLY the outer chrome — header/content/footer/
     * section/item internals are identical so the same compound markup
     * works in both treatments.
     */
    variant?: "rail" | "panel";
    /**
     * Draw the sidebar's OUTER edge: the right-hand rule in `"rail"`, the
     * full outline in `"panel"`. Default true, which is the long-standing
     * look. Set false where the rail's own `bg-card` already separates it
     * from the content beside it and the rule reads as an artefact, which
     * is typical on dark, high-contrast themes.
     *
     * This controls the outer edge ONLY. The rules under `SidebarHeader`
     * and above `SidebarFooter` are internal structure and stay put; they
     * are not part of this switch.
     */
    bordered?: boolean;
}
interface SidebarRootComponent extends React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>> {
    Header: typeof SidebarHeader;
    Content: typeof SidebarContent;
    Footer: typeof SidebarFooter;
    Section: typeof SidebarSection;
    Item: typeof SidebarItem;
    TreeItem: typeof SidebarTreeItem;
}
declare const Sidebar: SidebarRootComponent;
interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
}
declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
interface SidebarContentProps extends React.HTMLAttributes<HTMLElement> {
}
declare const SidebarContent: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLElement>>;
interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
}
declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
interface SidebarSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
    /** Group label shown above the items. Hidden when sidebar is collapsed
     *  (children render flat under the icon strip). */
    title?: React.ReactNode;
    /** Optional icon next to the title. */
    icon?: React.ReactNode;
    /** Action(s) rendered on the right edge of the section header — the
     *  canonical "+ add to this group" or "..." menu slot. Common in Notion
     *  (+ next to Pages), Linear (+ next to Favorites), Slack (+ next to
     *  Channels). Rendered as a sibling of the chevron when `collapsible`,
     *  otherwise pinned to the right edge of the static header.
     *  Pointer events on the trailing content are isolated from the
     *  collapse toggle, so a Button inside `trailing` won't also flip the
     *  expanded state. */
    trailing?: React.ReactNode;
    /** Allow the section to toggle open/closed via clicking the title.
     *  Default true when `title` is set; ignored otherwise (no header to click). */
    collapsible?: boolean;
    /** Initial open state for collapsible sections. Default true. */
    defaultExpanded?: boolean;
    /** Title casing. The component should not silently dictate case
     *  (Ali, 2026-06-11) — but the HISTORIC defaults differ per variant
     *  and existing surfaces depend on them, so when unset, legacy
     *  behaviour is preserved exactly: static headers render UPPERCASE
     *  (the Notion/Linear treatment), collapsible headers render the
     *  authored case (a long-standing `normal-case` override). Set
     *  explicitly to get the same treatment from both variants:
     *  `"uppercase"` for the shouty group label, `"none"` for
     *  sentence-case headers like a "Recents" list. */
    titleTransform?: "uppercase" | "none";
}
declare const SidebarSection: React.ForwardRefExoticComponent<SidebarSectionProps & React.RefAttributes<HTMLDivElement>>;
interface SidebarItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "title"> {
    /** Leading icon. Sized to fit both expanded + collapsed states. */
    icon?: React.ReactNode;
    /** Trailing badge — count, status label. Hidden when collapsed. */
    badge?: React.ReactNode;
    /** Marks the current page / route. Drives the highlighted style + sets
     *  `aria-current="page"`. */
    active?: boolean;
    /** Render the item as a button rather than a link. Use when the row
     *  triggers an action (open dialog, log out) rather than navigation. */
    asButton?: boolean;
    /** Wrap a custom link component (Next/Link, etc.) via Radix Slot
     *  rather than rendering a plain <a>. Mutually exclusive with `asButton`. */
    asChild?: boolean;
    /** Disabled state — visual greying + pointer-events-none. */
    disabled?: boolean;
    /** Visible label. Use `children` so the JSX reads naturally — the
     *  prop name is `children` not `label`. */
    children?: React.ReactNode;
    /** Tooltip override shown when sidebar is collapsed. Defaults to the
     *  item's text content (children, when it's a string). */
    collapsedLabel?: React.ReactNode;
    /**
     * Row size.
     *
     * - `"md"` (default) — `text-sm font-medium`, the standard nav row.
     * - `"sm"` — `text-xs`, lighter weight + tighter padding. Use for
     *   visually-subordinate rows (nested screens under a parent
     *   project, sub-pages under a section, etc.) so the hierarchy is
     *   legible without manual className overrides. Active state still
     *   wins on color + weight so the current row pops at either size.
     */
    size?: "sm" | "md";
    /**
     * Secondary line shown beneath the label — typically metadata like
     * "Edited 2m ago", "12 items", or a brief description. Layout
     * adapts: the row becomes label + description stacked vertically,
     * with the icon vertically centered against the stack and the
     * badge anchored to the trailing edge as usual. Hidden when the
     * sidebar is collapsed (only the icon + tooltip remain).
     */
    description?: React.ReactNode;
}
declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLAnchorElement>>;
interface SidebarTreeItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "title"> {
    /** Row label. Required — without it the row has nothing to show. */
    label: React.ReactNode;
    /** Leading icon (folder, file, custom emoji). Shown to the right
     *  of the chevron column. */
    icon?: React.ReactNode;
    /** Trailing badge — count, status. Hidden when sidebar is collapsed. */
    badge?: React.ReactNode;
    /** Marks the branch as the current route. Adds aria-current="page"
     *  on the row. */
    active?: boolean;
    /** Initial expanded state. Defaults `true` so the user can see what's
     *  inside without having to click. */
    defaultExpanded?: boolean;
    /** Controlled expanded state — wire `onExpandedChange` to manage from
     *  outside (useful when you want to persist tree state). */
    expanded?: boolean;
    onExpandedChange?: (next: boolean) => void;
    /** Disabled state. */
    disabled?: boolean;
    /** Nested children — SidebarItem or more SidebarTreeItem. */
    children?: React.ReactNode;
    /**
     * Secondary line shown beneath the label — same shape as
     * SidebarItem's `description`. Useful when a branch needs more
     * than just a name (last-edited timestamp, item count, owner).
     * Layout adapts to stack label + description; chevron and icon
     * stay vertically centered against the stack.
     */
    description?: React.ReactNode;
    /**
     * Right-edge action slot — settings cog, more-actions overflow,
     * "+ add child" affordance. Rendered as a sibling of the branch
     * button (not nested inside it, so `<button>` children inside
     * trailing remain valid HTML). Vertically centered against the
     * branch row, isolated from the expand/collapse click so a tap
     * on a trailing button doesn't toggle the tree.
     *
     * The wrapper container also exposes a `group/row` named-group
     * class so consumer-provided trailing can opt into hover-only
     * visibility via Tailwind's `group-hover/row:` variant
     * (`hidden group-hover/row:flex`) without writing custom CSS.
     * Hovering nested children rows does NOT trigger the group hover
     * — the named group is scoped to the branch row alone.
     */
    trailing?: React.ReactNode;
}
declare const SidebarTreeItem: React.ForwardRefExoticComponent<SidebarTreeItemProps & React.RefAttributes<HTMLButtonElement>>;

declare const Map: React.ForwardRefExoticComponent<MapProps & React.RefAttributes<MapHandle>>;

declare const MapMarker: React.NamedExoticComponent<MapMarkerProps>;

/**
 * lib/motion — the global motion control for gradeui.
 *
 * One choke point for "should this animate?". Every animated component
 * (ThreeScene, RivePlayer, VideoPlayer, aura surfaces) asks
 * `useReducedMotion()`, so flipping motion off in one place stills them all.
 *
 * Two independent inputs, ORed together (reduce-only by design — the toggle
 * can ADD restriction but never override a user's OS preference to force
 * motion ON):
 *
 *   1. the OS `prefers-reduced-motion: reduce` media query, and
 *   2. a `data-motion="off"` attribute on the document root (`<html>`),
 *      the manual toggle.
 *
 * The attribute is the same mechanism the renderer's `data-fidelity` flag
 * uses: stamp it on `<html>` and CSS + components react. Inside Studio's
 * Fast Frame / embed / share iframes it is driven over postMessage
 * (`grade:set-motion`), so the toggle reaches into the sandbox where the
 * ThreeScene surfaces actually run. A matching `[data-motion="off"]` CSS
 * reset in `styles/globals.css` covers pure-CSS animation/transition.
 *
 * Sibling to lib/demo (the scripted-reveal spine).
 */
/** The attribute stamped on `<html>` to force motion off. */
declare const MOTION_ATTR = "data-motion";
/**
 * Returns `true` when motion should be suppressed — either the OS reports
 * `prefers-reduced-motion: reduce`, or the global `data-motion="off"` toggle
 * is set on `<html>`. Stays live: re-reads on media-query change and on the
 * attribute mutating.
 *
 * SSR-safe — defaults to `false` (motion allowed) on the server and
 * rehydrates in an effect, so it never causes a hydration mismatch.
 */
declare function useReducedMotion(): boolean;
/**
 * @deprecated Prefer {@link useReducedMotion}. Kept for back-compat with the
 * components that import it from `media-surface`; it now also folds in the
 * global `data-motion="off"` toggle, not just the OS query.
 */
declare const usePrefersReducedMotion: typeof useReducedMotion;
/**
 * Returns `true` when the page is actually being watched — the tab is visible
 * AND (for a top-level document) the window is focused. Inside an iframe the
 * focus check is skipped, because an iframe rarely "has focus" even when its
 * tab is frontmost; it falls back to visibility, which correctly tracks the
 * top tab. Use it to PAUSE autoplay loops when nobody's looking: a movie stops
 * when you tab away.
 *
 * SSR-safe — defaults to `true` and rehydrates in an effect.
 *
 * Scope, deliberately: this knows about tab visibility + window focus, NOT
 * whether the element is scrolled into view (pair it with an
 * IntersectionObserver — e.g. motion's `useInView` — for that), and NOT
 * whether a cross-document iframe has scrolled off its PARENT's viewport. An
 * iframe can't see the parent's scroll; the parent must observe the host and
 * pause it. See the grid poster/promote policy in STUDIO-CAPTURE.md.
 */
declare function usePageActive(): boolean;
/**
 * Imperatively set the global motion toggle on `<html>`.
 *
 *   setMotion(false) → stamps `data-motion="off"` (animation suppressed)
 *   setMotion(true)  → removes the attribute (default: respect the OS only)
 *
 * Reduce-only: turning motion "on" never forces animation for a viewer whose
 * OS asks for reduced motion — `useReducedMotion()` still honours the query.
 * No-op on the server.
 */
declare function setMotion(enabled: boolean): void;

/**
 * MediaSurface — the shared shell used by VideoPlayer, RivePlayer, ThreeScene
 * AND the canonical "media slot" primitive for still images, posters, album
 * art, etc.
 *
 * Handles the surface area that's identical across all media types:
 *   - aspect ratio / radius / border (driven by CSS variables for theming)
 *   - loading skeleton
 *   - intersection-observer (for pause-when-offscreen)
 *   - reduced-motion query
 *   - **empty-state placeholder** with format-suggesting glyph + alt caption
 *
 * Design-system note: all visual dimensions are backed by CSS vars so
 * consumers can retheme via `--gds-media-radius`, `--gds-media-border`,
 * `--gds-media-placeholder-bg`, `--gds-media-placeholder-fg`. The
 * placeholder pair drives the empty-state treatment — it's the canonical
 * "image not yet loaded" surface across Grade until the image-generation
 * pipeline replaces empty slots with real pictures. Custom placeholder UI
 * elsewhere in the product should consume the same vars so we stay
 * visually coherent.
 * (These will rename to `--gds-*` when the broader codebase rename lands.)
 *
 * The placeholder uses a **size-tiered** rendering: sub-64px slots show
 * initials only (avatar-density), 64-160px show the format glyph alone,
 * and >160px add the alt text as a small caption beneath the glyph. The
 * tier is measured via ResizeObserver — we deliberately don't lean on CSS
 * container queries here so the component works in projects whose Tailwind
 * config doesn't have the container-queries plugin installed.
 *
 * **Do NOT wrap <Avatar> inside <MediaSurface>** to get a 2-letter initials
 * fallback. That pattern conflates two primitives — Avatar is for people
 * only (circular, social context); MediaSurface is for everything else
 * (square album art, wide landscapes, portrait posters). Set `alt` + `hint`
 * on MediaSurface directly and you get the same initials affordance with
 * the right semantics.
 */

type MediaAspect = "video" | "standard" | "square" | "portrait" | "wide" | "auto";
type MediaRadius = "none" | "sm" | "md" | "lg" | "xl";
/**
 * What kind of media is this slot intended for? Drives three things:
 *   1. The glyph rendered in the empty-state placeholder.
 *   2. The default `aspect` when the caller hasn't pinned one.
 *   3. The future generation pipeline's provider routing (album →
 *      MusicBrainz cover-art, poster → TMDB, generic → Gemini, etc.).
 *
 * Kept as a small finite union so the Settings panel can render it as a
 * glyph-led toggle picker rather than a free-text input. Adding a hint
 * here means adding a glyph in `HINT_GLYPH` and a default aspect in
 * `HINT_DEFAULT_ASPECT` below — both maps are checked exhaustively.
 */
type MediaHint = "album" | "tv-show" | "movie" | "game" | "book" | "portrait" | "landscape" | "poster" | "product" | "food" | "video" | "audio" | "embed" | "3d" | "generic";
/**
 * Structured metadata the future generation pipeline reads to look up real
 * imagery for this slot. The component itself never renders from `source` —
 * it's purely declarative until the generator walks the JSX and patches in
 * `src` values. Discriminated by `kind` so we can route per-provider:
 *
 *   album    → MusicBrainz Cover Art Archive (free, no auth)
 *   tv-show  → TMDb (free with key)
 *   movie    → TMDb (free with key)
 *   game     → IGDB (free, Twitch OAuth)
 *   book     → OpenLibrary (free, no auth)
 *   poster   → Picsum (or wired generator)
 *   portrait → Picsum (until prompt-aware generator lands)
 *   landscape→ Picsum (until prompt-aware generator lands)
 *   product  → Picsum (until prompt-aware generator lands)
 *   food     → Picsum (until prompt-aware generator lands)
 *   generic  → Picsum
 *   video/audio/embed/3d → no auto-gen; user provides
 *
 * Every variant optionally carries a `description` string — populated
 * by Studio from the surface's `alt` prop via the Generate Image
 * action. Prompt-aware providers use it as the user-intent prompt;
 * lookup providers (MusicBrainz, TMDb, …) ignore unknown fields.
 */
type MediaSource = {
    kind: "album";
    artist: string;
    title: string;
    year?: number;
    description?: string;
} | {
    kind: "tv-show";
    title: string;
    year?: number;
    description?: string;
} | {
    kind: "movie";
    title: string;
    year?: number;
    description?: string;
} | {
    kind: "game";
    title: string;
    description?: string;
} | {
    kind: "book";
    title?: string;
    author?: string;
    isbn?: string;
    description?: string;
} | {
    kind: "portrait";
    name?: string;
    role?: string;
    description?: string;
} | {
    kind: "landscape";
    location?: string;
    mood?: string;
    description?: string;
} | {
    kind: "poster";
    title: string;
    year?: number;
    description?: string;
} | {
    kind: "product";
    name?: string;
    brand?: string;
    description?: string;
} | {
    kind: "food";
    dish?: string;
    cuisine?: string;
    description?: string;
} | {
    kind: "video";
} | {
    kind: "audio";
} | {
    kind: "embed";
} | {
    kind: "3d";
} | {
    kind: "generic";
    prompt: string;
    description?: string;
};
/**
 * Subscribe to the runtime URL map exposed by Studio (and any other host
 * that wants to wire the same protocol). The map lives on `window.__gradeMediaUrls`
 * — a `Record<sourceKey, url>` — and emits `grade:media-urls-updated`
 * whenever it changes. Components reading the map re-render on the event.
 *
 * Headless / server-rendered consumers get an empty map; the resolution
 * only kicks in client-side.
 *
 * The map is intentionally **decoupled** from React context so consuming
 * apps don't have to thread a provider through their tree — MediaSurface
 * can be dropped anywhere in any layout and the URL map "just works"
 * once the host writes to the global. Studio's iframe agent writes to
 * the global in response to the "Fill images" flow; other integrations
 * (e.g. an MCP server, a CLI codemod) can use the same protocol.
 */
type MediaUrlMap = Record<string, string>;
/**
 * Per-instance prop overrides, keyed by the same `sourceKey` as the
 * URL map. Each entry is a partial MediaSurface props bag — only the
 * keys the user has customised for THIS specific slot. The studio
 * settings panel writes overrides via the `grade:component-action`
 * event with kind `"set-media-override"`; this component reads
 * `overrides[myKey]` at render and merges on top of its JSX props
 * so an edit on Discovery doesn't ripple to every other album in the
 * same `.map()`. See `useResolvedOverride` below.
 */
type MediaOverrideMap = Record<string, Partial<{
    hint: MediaHint;
    aspect: MediaAspect;
    radius: MediaRadius;
    border: boolean;
    loading: boolean;
    alt: string;
    src: string;
    emptyState: "auto" | "icon" | "none";
}>>;
declare global {
    interface Window {
        __gradeMediaUrls?: MediaUrlMap;
        __gradeMediaOverrides?: MediaOverrideMap;
        /** Source-keys with a Fill request currently in flight. Stamped by
         *  the sandbox agent on `grade:set-media-pending`; drives the
         *  placeholder's Presence shimmer (gds-aura-shimmer) so slots read
         *  as "being generated" rather than inert while the resolver works. */
        __gradeMediaPending?: Record<string, true>;
    }
}
interface MediaSurfaceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
    aspect?: MediaAspect;
    radius?: MediaRadius;
    border?: boolean;
    loading?: boolean;
    /** Callback fires when the surface enters / leaves the viewport. */
    onVisibilityChange?: (visible: boolean) => void;
    /** Fallback shown before `onReady` is signalled by the child. */
    fallback?: React.ReactNode;
    /**
     * Controls the empty-state placeholder shown when no `src`, `children`,
     * and no `loading` state are provided. Default `"auto"` renders the
     * size-tiered placeholder (initials / glyph / glyph + caption depending
     * on the slot's rendered width — see `tierFromWidth`). Use `"none"` for
     * a truly empty surface (e.g. a custom decorative overlay that needs
     * the surface clean), or pass a node to fully override.
     *
     * Legacy `"icon"` is kept as an alias for `"auto"` so the previous API
     * doesn't break.
     */
    emptyState?: "auto" | "icon" | "none" | React.ReactNode;
    /**
     * What kind of media is intended for this slot — drives the placeholder
     * glyph, the default `aspect` when unset, and the future generator's
     * provider routing. See `MediaHint`. Defaults to `"generic"` (image icon).
     */
    hint?: MediaHint;
    /**
     * Descriptive label for the slot. Used three ways:
     *   1. The `alt` attribute on the rendered `<img>` when `src` is set.
     *   2. The caption shown beneath the glyph in the large placeholder tier.
     *   3. The source string for derived 2-letter initials in the small tier.
     * Strongly recommended — without it the placeholder is anonymous and the
     * eventual image has no a11y label.
     */
    alt?: string;
    /**
     * Structured metadata for the generation pipeline. Opaque to MediaSurface
     * itself (it just stamps `data-media-source-kind` on the root for
     * inspector visibility); read by the generator AST walker to look up real
     * imagery from the right provider. See `MediaSource`.
     */
    source?: MediaSource;
    /**
     * When set, MediaSurface renders an `<img>` filling the slot via
     * object-cover. The wrapper keeps its aspect / radius / border chrome.
     * Convenience prop so callers don't have to write the `<img>` themselves;
     * also the target the future generator patches into when filling slots.
     */
    src?: string;
    /**
     * Override the hint-derived glyph for one-off cases. Most consumers
     * should pick a `hint` and let the map decide; this is the escape
     * hatch for special slots that don't fit the canonical set.
     */
    glyph?: React.ReactNode;
    /**
     * Stable identifier for this specific MediaSurface instance, stamped
     * on the root as `data-gds-instance-id`. When the JSX renders a list
     * of MediaSurfaces from a data array (`.map(a => <MediaSurface
     * instanceId={a.id} ... />)`), this is how Studio's selection agent
     * tells THIS card apart from its siblings — every other prop is
     * either shared via the template (hint, aspect) or content that
     * happens to differ but isn't guaranteed unique.
     *
     * Combined with the data-array-mutator path, this is what makes
     * "click Discovery, change its alt text, only Discovery's alt
     * changes" actually work — the panel finds the data entry whose
     * `id` matches `instanceId` and patches just that entry.
     *
     * No-op if omitted (standalone MediaSurfaces don't need it).
     */
    instanceId?: string;
    /**
     * Content layered ON TOP of the media (or placeholder) — play buttons,
     * hover gradients, corner badges, watch-progress bars. Renders in its
     * own absolutely-positioned layer at the highest z-index. Importantly,
     * an overlay does NOT suppress the empty-state placeholder: a play
     * button hovering over an unfilled album slot is still meaningfully
     * unfilled, and we want the placeholder to read through it. Use
     * `children` for content that REPLACES the media (custom canvas/video);
     * use `overlay` for content that DECORATES it.
     */
    overlay?: React.ReactNode;
    children?: React.ReactNode;
}
declare const MediaSurface: React.ForwardRefExoticComponent<MediaSurfaceProps & React.RefAttributes<HTMLDivElement>>;
/** Shared prop interface extended by each media primitive. */
interface BaseMediaProps {
    /** src for the media — url or path. */
    src?: string;
    /** Show native-ish play/pause/scrubber controls. Default: `true` for video, `false` for Rive/three. */
    controls?: boolean;
    /** Autoplay when mounted (respects reduced-motion). */
    autoPlay?: boolean;
    /** Loop on end. */
    loop?: boolean;
    /** Pause rendering / playback when offscreen. Default `true` (big perf win for WebGL). */
    pauseOffscreen?: boolean;
    /** Aspect ratio of the surface. */
    aspect?: MediaAspect;
    /** Corner radius. */
    radius?: MediaRadius;
    /** Draw a subtle border around the surface. */
    border?: boolean;
    /** Poster / fallback image while loading. */
    poster?: string;
    /** Accessible label — used as `aria-label` on the surface. */
    label?: string;
    className?: string;
    style?: React.CSSProperties;
}

/**
 * VideoPlayer — native HTML5 video wrapped in a MediaSurface.
 *
 * Modes:
 *   controls={true}  (default) — shows native video controls
 *   controls={false}           — bare viewer: hides chrome, muted autoplay/loop
 */

interface VideoPlayerProps extends BaseMediaProps {
    /** Mute audio. Required `true` if `autoPlay` (browser restriction). */
    muted?: boolean;
    /** Playback rate. Defaults to 1. */
    playbackRate?: number;
    /** Object-fit. Defaults to "cover" — matches typical hero/background use. */
    objectFit?: "cover" | "contain" | "fill";
}
declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<HTMLVideoElement>>;

/**
 * RivePlayer — Rive runtime wrapped in a MediaSurface.
 *
 * The @rive-app/react-canvas dep is marked `optional` in package.json — this
 * component lazy-imports it so consumers who don't use Rive don't fail at
 * install time and don't pay the bundle cost unless they render one.
 *
 * Modes:
 *   controls={true}             — shows a small play/pause overlay
 *   controls={false} (default)  — bare viewer: zero chrome
 */

interface RivePlayerProps extends BaseMediaProps {
    /** State machine to run. */
    stateMachines?: string | string[];
    /** Artboard name — omit to use the default. */
    artboard?: string;
    /** Object-fit equivalent — how the art sits inside the surface. */
    fit?: "contain" | "cover" | "fill" | "fitWidth" | "fitHeight" | "none";
    /** Inputs to pass to the state machine. */
    stateMachineInputs?: Record<string, number | boolean | string>;
}
declare const RivePlayer: React.ForwardRefExoticComponent<RivePlayerProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Logo — a brand mark with lockup, background-mode, and monochrome
 * variations, fed bespoke artwork per slot.
 *
 * A brand rarely has one logo: there's a square mark for tight spaces, a
 * horizontal lockup for headers, and single-colour versions for busy or
 * inverted backgrounds. This component holds that set and renders the right
 * one for the context, so a sidenav, toolbar, and footer can all reach for
 * `<Logo>` and ask for the lockup/mode they need.
 *
 * Artwork is yours: each slot is any React node — an inline `<svg>`, an
 * `<img>`, or a component. Supply only what you have; the component falls
 * back across appearances and lockups so a partial set still renders
 * something. Monochrome artwork should paint with `currentColor` so it
 * inherits the surrounding text colour.
 *
 * Selection is explicit, not theme-coupled: set `mode="dark"` when the logo
 * sits on a dark surface. (Wrap it in your own theme hook if you want it
 * automatic.)
 */
type LogoLockup = "square" | "horizontal" | "icon";
type LogoMode = "light" | "dark";
type LogoSize = "sm" | "md" | "lg" | "xl";
/** Artwork for one lockup. `light`/`dark` are the full-colour versions for a
 *  light or dark background; `mono` is a single-colour treatment that
 *  inherits `currentColor` and works on any background. */
interface LogoVariant {
    light?: React.ReactNode;
    dark?: React.ReactNode;
    mono?: React.ReactNode;
}
/** The brand artwork set, keyed by lockup then appearance. */
interface LogoSources {
    square?: LogoVariant;
    horizontal?: LogoVariant;
    icon?: LogoVariant;
}
interface LogoProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
    /** The brand artwork. Supply only the slots you have. Optional — with
     *  no artwork at all the neutral placeholder renders, which keeps
     *  layout intact (and keeps a model-emitted bare `<Logo />` from
     *  crashing a Studio preview). */
    sources?: LogoSources;
    /** Which lockup to show. Falls back to another lockup if this one is
     *  empty. Default `"horizontal"`. */
    lockup?: LogoLockup;
    /** The background the logo sits on — selects the light/dark artwork.
     *  Explicit (not theme-coupled). Default `"light"`. */
    mode?: LogoMode;
    /** Render the monochrome artwork instead of full colour. Mono inherits
     *  `currentColor`, so set the text colour on a parent. Default `false`. */
    mono?: boolean;
    /** Height of the logo — a t-shirt token or a raw pixel number. Width is
     *  intrinsic (square/icon are 1:1, horizontal keeps its ratio).
     *  Default `"md"`. */
    size?: LogoSize | number;
    /** Accessible name (e.g. the brand name) → `aria-label` + `role="img"`.
     *  Omit and set `decorative` when something nearby already names it. */
    label?: string;
    /** Mark the logo decorative (`aria-hidden`, no role). Use when the brand
     *  name is already in the DOM beside it. */
    decorative?: boolean;
    /** Optional link target — renders the logo as an `<a>` (logo-links-home). */
    href?: string;
}
declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLElement>>;

type GradeLoaderSize = "sm" | "md" | "lg" | "xl";
interface GradeLoaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
    /** Mark size — token or exact pixels. Default `"md"` (24px). */
    size?: GradeLoaderSize | number;
    /** Accessible status text (and the optional visible caption).
     *  Default "Loading…"; pass "" to silence. */
    label?: string;
    /** Show the label visually under the mark (it's always announced). */
    showLabel?: boolean;
}
declare const GradeLoader: React.ForwardRefExoticComponent<GradeLoaderProps & React.RefAttributes<HTMLDivElement>>;

/**
 * ScreenAnimator — wrap any content in a directed camera.
 *
 * Give it a list of `shots` (a zoom + focal point + dwell) and it tours them:
 * flies in from offscreen, eases between shots, settles back to the start,
 * exits, and loops, with a focus spotlight, a synthetic cursor, captions, and
 * a play/pause/restart transport. The content stays live and interactive
 * underneath; the camera just directs the eye. It works around ANY children,
 * a dashboard, an app shell, a single card.
 *
 * It's the reusable form of the camera in the embed (`useCameraTimeline` /
 * `ZoomPan`) and the `camera-tour` scaffold — see STUDIO-DIRECTOR.md. Honours
 * reduced motion (settles on the starter frame, no movement).
 */
interface ScreenAnimatorShot {
    /** Magnification (1 = fit). >1 pushes in. */
    zoom?: number;
    /** Focal point as fractions of the content (0..1). Defaults to centre. */
    cx?: number;
    cy?: number;
    /** Milliseconds to dwell on this shot. */
    hold?: number;
    /** Milliseconds to glide INTO this shot from the previous one. */
    trans?: number;
    /** Caption shown while on this shot. */
    label?: string;
}
interface ScreenAnimatorProps {
    /** The shot list. Omit (or one shot) for a static framed view. */
    shots?: ScreenAnimatorShot[];
    /** Start playing on mount. Default true. */
    autoplay?: boolean;
    /** Loop the tour (fly in → shots → back to start → exit → repeat). Default true. */
    loop?: boolean;
    /** Cap the number of loop cycles, then settle and stop — a demo is a movie,
     *  it shouldn't spin forever. Default Infinity (loops while watched). Set a
     *  small number for grid/embed contexts so it ends. */
    maxLoops?: number;
    /** Show the play / pause / restart transport. Default true. */
    controls?: boolean;
    /** Controlled pause override — a sequencer (e.g. `<Motion>`) holds the
     *  transport. Leave undefined for self-managed playback. */
    paused?: boolean;
    /** Fires once when the tour runs to its end and stops (loop cap reached,
     *  or `loop=false`). The hook a sequencer advances on. */
    onEnded?: () => void;
    /** Dim the edges when pushed in (focus vignette). Default false — opt in. */
    spotlight?: boolean;
    /** Render the synthetic cursor pulse on detail shots. Default true. */
    cursor?: boolean;
    /** Fly in from offscreen on start (and exit on loop). Default true. */
    enter?: boolean;
    /** Where the caption sits over the frame. Default "bottom". */
    captionPosition?: "top" | "bottom";
    /** Background of the stage the content sits on while it's small (fly in/out).
     *  A CSS background string. Default a dark cinematic stage. */
    stage?: string;
    /** A live backdrop rendered BEHIND the content, filling the stage — an
     *  image, a gradient, or a `<ThreeScene>` shader. Shows around the screen
     *  while it's small (fly in/out) and behind any padding. */
    backdrop?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    children: React.ReactNode;
}
declare function ScreenAnimator({ shots, autoplay, loop, maxLoops, controls, paused, onEnded, spotlight, cursor, enter, captionPosition, stage, backdrop, className, style, children, }: ScreenAnimatorProps): React.JSX.Element;

/**
 * Motion — a directed sequence of scenes on one persistent stage.
 *
 * The grammar of a modern product demo: text → demo → video → text, any
 * order, any mix. A `<Motion>` owns the stage (one continuous backdrop) and
 * plays its `<MotionScene>`s in order. A scene is a *stage moment* holding
 * arbitrary content:
 *
 *   - `<MotionScreen>` — a framed screen with its OWN camera (`shots`,
 *     ScreenAnimator applied per-screen). Several can share a scene
 *     (mobile + desktop side by side).
 *   - `<MotionText>` — templated text animations (Motion Templates:
 *     title / lower-third / section-break).
 *   - anything else — a <video>, an image, plain JSX. Untimed content
 *     rides the scene's `durationMs`.
 *
 * THE COMPLETION CONTRACT: a scene advances when all its *timed* children
 * have finished (a camera tour ending, a text template completing), or
 * after `durationMs` when nothing in it keeps time. Timed children register
 * with the scene; static content doesn't. New content types plug in by
 * registering — nothing else changes.
 *
 * Two views of the same children: `view="play"` (the film) and
 * `view="strip"` (the arrangement — scenes left-to-right as labelled
 * cards, the Studio edit view). Under `prefers-reduced-motion` the play
 * view falls back to the strip: see everything, move nothing.
 *
 * See STUDIO-DIRECTOR.md ("Grade Motion") for the design doc.
 */
interface MotionSceneRegistration {
    /** Signal this timed child has finished its run. Idempotent. */
    done: () => void;
    /** Unregister (unmount) without deadlocking the scene. */
    cancel: () => void;
}
interface SceneCtxValue {
    mode: "play" | "strip";
    active: boolean;
    paused: boolean;
    /** Register as a timed child. Call in a mount effect; cancel on cleanup. */
    register: () => MotionSceneRegistration;
}
/** Read the enclosing scene (or a permissive standalone default). */
declare function useMotionScene(): SceneCtxValue;
interface MotionScreenProps {
    /** Frame preset. Desktop is a 16:10 browser-ish frame; mobile a tall
     *  device frame. Default "desktop". */
    device?: "desktop" | "mobile";
    /** Camera shots for THIS screen (ScreenAnimator, per-screen). Omit for
     *  fly-in + a single dwell. */
    shots?: ScreenAnimatorShot[];
    /** Virtual CSS width the content is laid out at before scaling into the
     *  frame. Defaults: desktop 1100, mobile 390. */
    virtualWidth?: number;
    /** Dim edges when the camera pushes in. Default false. */
    spotlight?: boolean;
    /** Synthetic cursor on detail shots. Default true. */
    cursor?: boolean;
    /** Fly the CONTENT in from offscreen when the scene starts. Default
     *  FALSE for framed screens — the full-screen fly-in choreography
     *  reads badly inside a small clipped frame (content sliding around
     *  in a box). Scene `transition` and frame `animate` are the
     *  entrances here; opt back in for full-bleed hero screens. */
    enter?: boolean;
    /** Animate the FRAME in place within the scene — independent of (and
     *  composable with) the camera inside it. "rise" / "tilt-settle" are
     *  entrances; "float" / "drift" are ambient loops. Default "none".
     *  Pair with enter={false} when using an entrance here. */
    animate?: MotionScreenAnimate;
    /** Provenance — the Studio screen this was copied from. Ignored at
     *  render; read by tooling (the dock, future live-reference scenes). */
    screenId?: string;
    className?: string;
    style?: React.CSSProperties;
    children: React.ReactNode;
}
declare function MotionScreen({ device, shots, virtualWidth, spotlight, cursor, enter, animate, screenId: _screenId, className, style, children, }: MotionScreenProps): React.JSX.Element;
type MotionTextTemplate = "title" | "lower-third" | "section-break" | "broadcast" | "ticker" | "stat" | "quote";
interface MotionTextProps {
    /** Which Motion Template. Default "title". */
    template?: MotionTextTemplate;
    heading: string;
    /** Supporting line (title / lower-third). */
    text?: string;
    /** Override the template's run length (ms). */
    durationMs?: number;
    /** Text colour against the stage. Default "light" (for the dark stage). */
    tone?: "light" | "dark";
    /**
     * Lift the type off a busy or low-contrast backdrop (pale shader washes,
     * photos, video). `"shadow"` adds a soft contrast shadow to the glyphs;
     * `"scrim"` additionally drops a quiet radial darkening behind the text
     * block. Default "none" — flat fills don't need it.
     */
    lift?: "none" | "shadow" | "scrim";
    className?: string;
    style?: React.CSSProperties;
}
declare function MotionText({ template, heading, text, durationMs, tone, lift, className, style, }: MotionTextProps): React.JSX.Element;
type MotionOverlayZone = "top-left" | "top" | "top-right" | "center" | "bottom-left" | "bottom" | "bottom-right" | "lower-third";
interface MotionOverlayProps {
    /** Anchor zone. Default "top-right" (the classic network-bug corner). */
    zone?: MotionOverlayZone;
    /** Visible from this scene index (inclusive). Default 0 — overlays are
     *  a second TIMELINE: always-on is just the full-range case. */
    fromScene?: number;
    /** Visible through this scene index (inclusive). Default: the end. */
    toScene?: number;
    /** Re-enable pointer events for interactive overlays. Default false. */
    interactive?: boolean;
    className?: string;
    style?: React.CSSProperties;
    children: React.ReactNode;
}
declare function MotionOverlay({ zone, fromScene: _fromScene, toScene: _toScene, interactive, className, style, children, }: MotionOverlayProps): React.JSX.Element;
/** How a scene ARRIVES on the stage. Entrance-only by design — the
 *  outgoing scene cuts; the incoming one performs. (True cross-fades
 *  need both scenes mounted; that rides the seekable-clock work.) */
type MotionSceneTransition = "fade" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | "pop" | "zoom" | "wipe-circle" | "none";
/** In-place frame animation for MotionScreen — the screen performs
 *  WITHIN the scene (independent of the camera inside it, composable
 *  with it). "rise" and "tilt-settle" are entrances; "float" and
 *  "drift" are ambient loops. */
type MotionScreenAnimate = "rise" | "float" | "tilt-settle" | "drift" | "none";
interface MotionSceneProps {
    /** Shown in the strip view + read by the timeline dock. */
    label?: string;
    /** Minimum runtime (ms); the whole clock when nothing inside keeps
     *  time. Default 4000 for untimed scenes. */
    durationMs?: number;
    /** Scene background painted over the shared stage for this moment only
     *  (a CSS background — the white title card, a brand fill). */
    fill?: string;
    /** How the scene arrives: fade · slide-up/down/left/right · pop ·
     *  zoom · wipe-circle (a mask wipe) · none. Default "fade". The
     *  OUTGOING scene stays visible underneath for the transition window,
     *  so slides/wipes reveal it rather than the stage. */
    transition?: MotionSceneTransition;
    /** Transition timing override (ms). Defaults per transition — see
     *  SCENE_TRANSITION_DEFAULT_MS. */
    transitionMs?: number;
    className?: string;
    style?: React.CSSProperties;
    children: React.ReactNode;
}
/**
 * One stage moment in a `<Motion>`. Holds arbitrary content; advances by
 * the completion contract (see the file header). Renders standalone too
 * (active, looping nothing) so a scene can be previewed in isolation —
 * each scene is independently editable.
 */
declare function MotionScene(props: MotionSceneProps): React.JSX.Element;
interface MotionProps {
    /** "play" runs the film; "strip" lays the scenes out left-to-right as
     *  labelled cards (the arrangement / edit view). Default "play". */
    view?: "play" | "strip";
    /** Fixed artboard aspect for the film, letterboxed into the container —
     *  "16/9" (landscape demo), "9/16" (TikTok / Reels / Shorts), "1/1".
     *  Default "auto": the stage fills the container responsively. Strip
     *  cards adopt the same ratio. */
    aspect?: "auto" | "16/9" | "9/16" | "1/1" | (string & {});
    /** The persistent stage behind every scene (CSS background). */
    stage?: string;
    /** A live layer behind all scenes (image, gradient, <ThreeScene>). */
    backdrop?: React.ReactNode;
    /** Start playing on mount. Default true. */
    autoplay?: boolean;
    /** Return to scene 1 and keep going at the end. Default false — a
     *  motion is a movie; it ends. */
    loop?: boolean;
    /** Show the transport (play/pause, restart, scene dots). Default true. */
    controls?: boolean;
    className?: string;
    style?: React.CSSProperties;
    children: React.ReactNode;
}
declare function Motion({ view, aspect, stage, backdrop, autoplay, loop, controls, className, style, children, }: MotionProps): React.JSX.Element;

/**
 * Control schema — the canonical, UI-agnostic descriptor for a shader's
 * (or effect layer's) tweakable parameters. Shared by base demos AND the
 * universal post stack, so a single `<ShaderControls schema={...} />`
 * renders any of them.
 *
 * Ported from the three-lab experiments (the proven shape) and extended
 * with two controls from the Paper reference — `segmented` and
 * `colorList` (Paper's colorCount) — plus an optional palette-slot
 * binding on `color` (the "Line colour → accent" affordance).
 *
 * Kept free of three.js / React imports so post-stack.ts and any other
 * renderer can depend on it without a circular import.
 */
/** Global palette slots a colour control can bind to. */
type PaletteSlot = "primary" | "secondary" | "accent" | "background";
type NumberControl = {
    type: "slider";
    key: string;
    label: string;
    min: number;
    max: number;
    step: number;
    default: number;
    /** Display unit appended in the readout (e.g. "px", "°", "%"). */
    unit?: string;
    /** Readout normalisation. "percent" shows the value as 0–100% of its
     *  [min,max] range (the slider still drives the real value) — for the
     *  abstract 0.3753-style knobs where a percentage reads far clearer.
     *  Omit for the raw number. A panel-level `format` setting can opt every
     *  eligible slider into percent without per-control flags. */
    display?: "percent";
};
type ColorControl = {
    type: "color";
    key: string;
    label: string;
    default: string;
    /** When set, the control FOLLOWS this palette slot (re-tints with the
     *  theme, shows a "→ accent" affordance) until the user overrides it. */
    slot?: PaletteSlot;
};
/** A variable-length list of colours — Paper's colorCount + swatches. */
type ColorListControl = {
    type: "colorList";
    key: string;
    label: string;
    default: string[];
    /** Min / max swatches the user can add. */
    min?: number;
    max?: number;
};
type ToggleControl = {
    type: "toggle";
    key: string;
    label: string;
    default: boolean;
};
type SelectControl = {
    type: "select";
    key: string;
    label: string;
    options: ReadonlyArray<{
        value: string;
        label: string;
    }>;
    default: string;
};
/** Same data as a select, rendered as a segmented toggle (≤4 options). */
type SegmentedControl = {
    type: "segmented";
    key: string;
    label: string;
    options: ReadonlyArray<{
        value: string;
        label: string;
    }>;
    default: string;
};
type DividerControl = {
    type: "divider";
    key: string;
    /** Optional section heading above the divider line. */
    label?: string;
};
type ControlSpec = NumberControl | ColorControl | ColorListControl | ToggleControl | SelectControl | SegmentedControl | DividerControl;
/** A flat bag of current values, keyed by ControlSpec.key. */
type DemoState = Record<string, number | string | boolean | string[]>;

/**
 * Shared types for the three.js layer of the design system.
 *
 * Presets are structured data so the same registry can drive both the
 * runtime `<ThreeScene preset="..." />` and the `<ShaderPresetPicker />`
 * preview gallery without duplicating shaders.
 */

/** Minimal context passed to a scene factory. */
interface SceneContext {
    renderer: THREE.WebGLRenderer;
    width: number;
    height: number;
    /** Palette to drive the scene — all presets map their colors onto these slots. */
    palette: Palette;
}
/** The four palette slots every preset opts into. */
interface Palette {
    primary: string;
    secondary: string;
    accent: string;
    background: string;
}
/** A scene factory returns everything needed to run and tear down a scene. */
interface SceneHandle {
    scene: THREE.Scene;
    camera: THREE.Camera;
    /** Called every frame with elapsed seconds + delta seconds. */
    update?: (elapsed: number, delta: number) => void;
    /** Called on container resize. */
    resize?: (width: number, height: number) => void;
    /** Called when palette changes at runtime. */
    setPalette?: (palette: Palette) => void;
    /** Called when contract-driven params change at runtime (no remount).
     *  Values are pre-resolved by the host: colours as THREE-parseable
     *  strings (rgb()/hex), colour lists as string[], numbers/bools/selects
     *  as their raw DemoState values. Keyed by ControlSpec.key. */
    setParams?: (params: Record<string, number | string | boolean | string[]>) => void;
    /** Release GPU + CPU resources. */
    dispose?: () => void;
}
type SceneFactory = (ctx: SceneContext) => SceneHandle;
/** Declarative description of a post-FX stack. Specific pass types are strings
 *  so consumers can author presets without importing postprocessing types. */
interface PostPreset {
    id: string;
    label: string;
    /** Per-pass options keyed by effect name (bloom, noise, scanlines, vignette, chromatic, glitch). */
    effects: {
        bloom?: {
            intensity?: number;
            luminanceThreshold?: number;
            radius?: number;
        };
        noise?: {
            intensity?: number;
        };
        scanlines?: {
            density?: number;
            opacity?: number;
        };
        vignette?: {
            darkness?: number;
            offset?: number;
        };
        chromatic?: {
            offset?: number;
        };
        glitch?: {
            chromatic?: boolean;
            strength?: [number, number];
        };
    };
}

/** A shader preset is the data needed to instantiate one of the canned scenes. */
interface ShaderPreset {
    id: string;
    /** Short human label for picker cards. */
    label: string;
    /** One-line description an LLM can use to pick this preset. */
    description: string;
    /** Semantic tags — consumer filters ("space", "retro", "abstract") and LLM hints. */
    tags: string[];
    /** Name of the scene factory in the scene registry. */
    scene: string;
    /** Default post-FX preset id for this preset. */
    defaultPostPreset?: string;
    /** Optional palette overrides — otherwise uses the theme palette. */
    defaultPalette?: Partial<Palette>;
    /** Static poster image path for non-hover previews. Served from /public. */
    poster?: string;
    /** Tweakable controls for this base shader (drives the controls panel
     *  + maps to uniforms). Effect layers (grain etc.) carry their own
     *  controls separately via EffectLayerSpec. */
    controls?: ControlSpec[];
}

/**
 * Custom fragment shader scene — runs a user-supplied GLSL fragment shader
 * on a fullscreen quad with a standardised uniform set.
 *
 * This is the "write me a shader from a prompt" surface. Instead of asking
 * an LLM to author a full three.js SceneFactory (imports, geometry, etc.),
 * it only has to write `void main()` against a known uniform contract.
 *
 * The uniforms ARE the design contract — mirror the same palette slots
 * that presets use, so custom shaders pick up theming for free.
 */

/**
 * Auto-injected prelude — defines every uniform and varying the user's
 * fragment can reference. Users should NOT redeclare these. Their shader
 * source is appended verbatim to this header.
 *
 * Kept as glsl100 (varying / gl_FragColor) since that's the syntax
 * dominant in LLM training data; three.js auto-upgrades it for WebGL2.
 */
declare const FRAGMENT_HEADER = "\n  precision highp float;\n  varying vec2 vUv;\n  uniform float uTime;\n  uniform vec2  uResolution;\n  uniform vec2  uMouse;\n  uniform vec3  uPrimary;\n  uniform vec3  uSecondary;\n  uniform vec3  uAccent;\n  uniform vec3  uBackground;\n";
/**
 * Thrown when the user's fragment shader fails to compile. Carries both the
 * GL info log and the original source so callers can surface it or fall back.
 */
declare class ShaderCompileError extends Error {
    readonly log: string;
    readonly source: string;
    constructor(log: string, source: string);
}
/**
 * Build a SceneFactory from a user-supplied fragment shader body.
 *
 * Throws `ShaderCompileError` synchronously (from the SceneContext call) if
 * the GLSL doesn't compile. ThreeScene catches this and falls back to
 * `preset="space"` so the UI stays populated.
 */
declare function buildFragmentShaderScene(userFragment: string, 
/** Optional param contract — each non-divider control becomes a uniform
 *  the shader can read (see paramUniformName) and `setParams` can drive
 *  live without a remount. */
controls?: readonly ControlSpec[]): SceneFactory;

/**
 * ThreeScene — the WebGL media primitive.
 *
 * Supports two modes:
 *   1. Preset mode:  <ThreeScene preset="space" postPreset="vhs" />
 *   2. Custom mode:  <ThreeScene createScene={({ renderer, width, height, palette }) => ({ scene, camera, update, dispose })} />
 *
 * Post-FX composer is always applied; use postPreset="none" for a clean render.
 *
 * Zero-chrome viewer mode: the default. Pass `controls` to show a minimal
 * play/pause overlay. Scene pauses when offscreen (pauseOffscreen default `true`).
 */

/**
 * Tone — pin the shader's canvas independently of the page theme.
 *
 * `"auto"` (default) follows `--background`, so a shader on a page
 * re-tints with light/dark mode. But a film frame or a hero with white
 * type wants a STABLE ground: in light mode `--background` is near-white
 * and every wash goes pastel under it. `tone="dark"` / `tone="light"`
 * pins just the background uniform (brand pops still flow through), and
 * an explicit `palette.background` always wins over both.
 */
type SceneTone = "auto" | "dark" | "light";
interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster">, Omit<React.HTMLAttributes<HTMLDivElement>, keyof BaseMediaProps> {
    /** Preset id from the shader preset registry. */
    preset?: string;
    /**
     * User-authored GLSL fragment shader body. Runs on a fullscreen quad with
     * a standardised uniform contract (uTime, uResolution, uMouse, uPrimary,
     * uSecondary, uAccent, uBackground + varying vUv). Header is auto-injected
     * — DO NOT redeclare the uniforms. Write `void main()` only.
     *
     * Precedence: `createScene` > `fragmentShader` > `preset`. On compile
     * failure the component falls back to `preset="space"` and fires
     * `onShaderError`.
     */
    fragmentShader?: string;
    /** Called when a supplied `fragmentShader` fails to compile. */
    onShaderError?: (error: ShaderCompileError) => void;
    /** Post-FX preset. Either a registry id (`"vhs"`) OR a full `PostPreset`
     *  object — pass an object (e.g. from `postStateToPreset`) to drive the
     *  stack live from a controls panel; changes are applied via the
     *  composer's `setPreset` WITHOUT remounting WebGL. Defaults to the
     *  base preset's `defaultPostPreset` or "vhs". */
    postPreset?: string | PostPreset;
    /** Palette overrides. Unset slots fall back to `DEFAULT_PALETTE`. */
    palette?: Partial<Palette>;
    /** Pin the canvas tone regardless of page theme (see `SceneTone`).
     *  An explicit `palette.background` wins over this. */
    tone?: SceneTone;
    /**
     * Custom scene factory. Takes precedence over `preset` and `fragmentShader`.
     * Use for bespoke three.js scenes that don't fit a preset or fullscreen quad.
     */
    createScene?: SceneFactory;
    /** Static poster to show while the GL context warms up. */
    poster?: string;
    /** Pixel-ratio cap. Defaults to `Math.min(window.devicePixelRatio, 2)`. */
    maxDpr?: number;
    /**
     * Controlled play/pause. When provided, pauses/resumes the render loop
     * WITHOUT remounting the WebGL context (unlike `autoPlay`, which only
     * sets the initial state and remounts on change). Use for "animate on
     * hover" thumbnails. Reduced-motion still forces paused.
     */
    play?: boolean;
    /**
     * Release the WebGL context entirely while the scene is scrolled out of
     * view (and rebuild it when it returns), instead of merely pausing the
     * render loop. A live `WebGLRenderer` holds a real GL context for its
     * whole lifetime, and browsers cap simultaneous contexts (~16 Chrome,
     * ~8 Safari) — so a gallery of many `ThreeScene`s blows the budget and
     * the browser silently evicts the OLDEST (those cards go blank with a
     * "Context Lost" log). Galleries / thumbnail grids should set this so
     * only the on-screen scenes hold a context; a global budget (below) caps
     * the live total. Default `false` — single hero shaders keep their context.
     */
    releaseOffscreen?: boolean;
}
declare const ThreeScene: React.ForwardRefExoticComponent<ThreeSceneProps & React.RefAttributes<HTMLDivElement>>;

/**
 * ShaderControls — renders a `ControlSpec[]` schema into a DS-native control
 * panel. The single renderer behind every shader's params, the universal
 * post stack, and any effect layer (they all describe themselves as
 * ControlSpec[]).
 *
 * DS-consistent by construction: it composes the design-system primitives at
 * tool-panel density (Label size="xs", Slider size="sm", Input size="2xs"
 * variant="ghost", ToggleGroup size="sm", Select size="xs", Switch) — no
 * bespoke markup, so it reads identically to the Studio inspector and the
 * homepage tweaker.
 *
 * `labelPosition` switches between the dense inline layout (label left,
 * control + value right) and label-above (label + value on top, control
 * below). Controlled: parent owns `DemoState`, gets `onChange(key, value)`.
 */

type ControlLabelPosition = "inline" | "above";
interface ShaderControlsProps {
    controls: readonly ControlSpec[];
    state: DemoState;
    onChange: (key: string, value: number | string | boolean | string[]) => void;
    disabled?: boolean;
    /** Label placement: dense inline (default) or stacked above the control. */
    labelPosition?: ControlLabelPosition;
    /** Number-readout format. "percent" normalises every eligible slider (no
     *  unit, fractional step, non-negative range) to 0–100%, killing the
     *  abstract 0.3753 readouts. A control's own `display: "percent"` always
     *  wins. Default "raw". */
    format?: "raw" | "percent";
    className?: string;
}
declare function ShaderControls({ controls, state, onChange, disabled, labelPosition, format, className, }: ShaderControlsProps): React.JSX.Element;

/**
 * BackgroundFill — a frame's background *paint*, as a layer.
 *
 * This is the render boundary for the "fill" model: a generative
 * background (shader), an image, a video, a gradient, a repeating
 * texture, or a solid token is NEVER a free-standing selectable node.
 * It is a paint that belongs to a frame, exactly like a fill in Figma /
 * Paper. The frame is the thing you select; this layer is plumbing.
 *
 * Drop it as the FIRST child of a `relative` frame. It paints an
 * `absolute inset-0`, `z-0`, `pointer-events-none` layer behind the
 * frame's content — so siblings that carry `relative z-10` (or any
 * positioned/z-indexed content) sit on top automatically. It is marked
 * `data-gds-part="frame-fill"` + `aria-hidden` so Studio treats it as
 * chrome (not separately selectable) and a11y trees skip it.
 *
 * The `type` switch picks what gets painted:
 *   none     → renders nothing
 *   solid    → a theme token (or any CSS colour)
 *   gradient → a linear-gradient from from/via/to stops
 *   image    → an <img> (object-fit) or a tiled background (repeat)
 *   video    → a muted, looping, autoplaying <video>
 *   shader   → a <ThreeScene> generative shader (preset or GLSL)
 *
 * Common controls — `opacity` and `blendMode` — apply to every type,
 * mirroring the inspector's Blending section.
 */

type BackgroundFillType = "none" | "solid" | "gradient" | "image" | "video" | "shader";
type BackgroundFillFit = "cover" | "contain" | "fill" | "none";
interface BackgroundFillProps {
    /** Which paint to render. */
    type: BackgroundFillType;
    /** Token name (`primary`, `card`, …) or any CSS colour. */
    color?: string;
    /** Gradient stops — token names or CSS colours. `shape: "radial"`
     *  swaps the linear paint for a radial wash (the classic "soft glow
     *  behind the hero"); `at` positions its centre, `size` fixes the
     *  ellipse (e.g. "45rem 50rem" — defaults to farthest-corner).
     *  `angle` is linear-only; `at`/`size` are radial-only. */
    gradient?: {
        from?: string;
        via?: string;
        to?: string;
        angle?: number;
        shape?: "linear" | "radial";
        at?: string;
        size?: string;
    };
    /** Image or video URL. */
    src?: string;
    /** object-fit for image / video. Default `cover`. */
    fit?: BackgroundFillFit;
    /** CSS object-position / background-position. Default `center`. */
    position?: string;
    /** Tile the image (uses background-image + repeat instead of <img>). */
    repeat?: boolean;
    /** Tile size when `repeat` (CSS background-size, e.g. "120px"). */
    tileSize?: string;
    /** Shader preset id (see ThreeScene). */
    preset?: string;
    /** Custom GLSL fragment shader (takes precedence over preset). */
    fragmentShader?: string;
    /** Palette overrides for the shader. */
    palette?: Partial<Palette>;
    /** Pin the shader's canvas tone — "dark" | "light" | "auto" (default).
     *  Film frames and heroes with fixed-colour type should pin their tone
     *  rather than inherit the page's light/dark mode (in light mode the
     *  theme background washes every shader pastel). See ThreeScene. */
    tone?: SceneTone;
    /** Post-FX preset id or live PostPreset object. */
    postPreset?: string | PostPreset;
    /** Layer opacity (0–1). */
    opacity?: number;
    /** CSS mix-blend-mode against the frame behind it. */
    blendMode?: React.CSSProperties["mixBlendMode"];
    /** Corner radius — match the frame's so the paint clips cleanly. */
    radius?: MediaRadius;
    className?: string;
    style?: React.CSSProperties;
}
declare const BackgroundFill: React.ForwardRefExoticComponent<BackgroundFillProps & React.RefAttributes<HTMLDivElement>>;

/**
 * FillPicker — Grade's paint picker, modelled on Figma's fill popover.
 *
 * A type-icon row across the top (solid · gradient · image · pattern ·
 * video · shader) switches the panel below to that paint's controls,
 * with a global opacity at the foot. It emits a `FillValue` that maps
 * 1:1 onto `<BackgroundFill>` props, so the inspector's Fill section and
 * any frame background share one control + one data shape.
 *
 * Grade is token-led, so the SOLID tab leads with theme-token swatches
 * (the "Libraries" half of Figma's picker) rather than a freeform HSV
 * square. A custom-colour square is a deliberate later pass.
 */

/** A paint value — the serialisable shape both the picker and
 *  `<BackgroundFill>` speak. */
interface FillValue {
    type: BackgroundFillType;
    color?: string;
    gradient?: {
        from?: string;
        via?: string;
        to?: string;
        angle?: number;
    };
    src?: string;
    fit?: BackgroundFillFit;
    repeat?: boolean;
    tileSize?: string;
    preset?: string;
    palette?: Partial<Palette>;
    postPreset?: string | PostPreset;
    opacity?: number;
}
/** Theme tokens offered as solid / gradient swatches. */
declare const FILL_TOKENS: readonly ["primary", "accent", "secondary", "muted", "card", "background", "destructive", "transparent"];
interface FillPickerProps {
    value: FillValue;
    onChange: (value: FillValue) => void;
    className?: string;
}
declare function FillPicker({ value, onChange, className }: FillPickerProps): React.JSX.Element;
declare namespace FillPicker {
    var displayName: string;
}
interface FillSectionProps {
    /** The ordered list of fills (top-most last, Figma-style — but the list
     *  renders in array order; the consumer owns z-ordering semantics). */
    value: FillValue[];
    /** Fired with the next list on any add / edit / remove / reorder. */
    onChange: (value: FillValue[]) => void;
    /** Section heading. Default "Fills". */
    title?: string;
    className?: string;
}
declare function FillSection({ value, onChange, title, className, }: FillSectionProps): React.JSX.Element;
declare namespace FillSection {
    var displayName: string;
}

/**
 * ColorPicker — a token-led, grouped, searchable colour picker. The
 * single-select sibling of FillPicker's solid tab: where FillPicker is the
 * full Figma paint popover (solid / gradient / image / …), ColorPicker is
 * the focused "pick one colour token" control.
 *
 * Two exports:
 *   - <ColorPickerPanel> — the popover BODY (header + search + grouped
 *     list). Reusable: the inspector's colour fields host it inside their
 *     own TokenField-chrome popover so every colour control shares ONE
 *     panel. Matches the Figma "Color Picker" frame: a "Color" title with
 *     a ghost close button, a search input, then DropdownMenuItem-style
 *     rows (Swatch + token name + check) grouped by family.
 *   - <ColorPicker> — panel + a self-contained trigger (swatch + name or,
 *     with `triggerVariant="inline"`, just the swatch).
 *
 * Grade is token-led, so the value is a token NAME ("action/primary"), the
 * literal "transparent", or null. The Swatch resolves the live CSS variable,
 * so every chip re-voices when the theme changes.
 */

/** A named family of colour tokens, rendered as one group in the list. */
interface ColorTokenGroup {
    /** Group heading (e.g. "action"). */
    group: string;
    /** Token NAMES in this group (e.g. "action/primary"). */
    tokens: string[];
}
/** Default token groups — the Grade semantic colour families. */
declare const DEFAULT_COLOR_TOKEN_GROUPS: ColorTokenGroup[];
/** The literal value for "no fill". */
declare const TRANSPARENT = "transparent";
type ColorPickerTriggerVariant = "default" | "inline";
interface ColorPickerProps {
    /** A Grade colour token NAME ("action/primary"), the literal "transparent",
     *  or null when nothing is picked. */
    value?: string | null;
    /** Fired with the next value (token name, "transparent", or null). */
    onValueChange?: (value: string | null) => void;
    /** Token families offered in the list. Defaults to the Grade semantic set. */
    tokens?: ColorTokenGroup[];
    /** Show the search input. Default true. */
    searchable?: boolean;
    /** `default` (form-control surface, swatch + name) or `inline` (just a
     *  clickable swatch — the inspector / fill-row affordance). */
    triggerVariant?: ColorPickerTriggerVariant;
    /** Trigger text when nothing is selected. */
    placeholder?: string;
    /** Search-input placeholder. */
    searchPlaceholder?: string;
    /** Message rendered when search returns no rows. */
    emptyMessage?: string;
    /** Include a "Transparent" option at the top. Default true. */
    allowTransparent?: boolean;
    /** Popover header title. Default "Color"; pass null to drop the header. */
    title?: string | null;
    /** PopoverContent alignment. Default "start". */
    align?: "start" | "center" | "end";
    /** Lock the control to a display of its current value. */
    disabled?: boolean;
    /** Extra classes on the trigger. */
    className?: string;
    /** Forwarded to the trigger for tests / Studio selection. */
    id?: string;
    "aria-label"?: string;
}
declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLButtonElement>>;

/**
 * GradientEditor — edit a multi-stop CSS gradient with token-led stops.
 *
 * A type Select (Linear / Radial / Angular) with reverse + rotate actions, a
 * live full-width preview bar (a <Swatch type="gradient">), then a "Stops"
 * list: each stop is a position %, a colour (token via <ColorPicker>, or a
 * raw colour), an opacity %, and a remove button. An add button in the Stops
 * header appends a stop.
 *
 * The CSS gradient string is computed from type + angle + stops; token stops
 * resolve to `oklch(var(--<token>))` so the preview re-voices with the theme.
 * It emits the structured `GradientValue` (NOT a string) so the value stays
 * editable and serialisable — the caller renders the string via
 * `gradientToCss(value)` (exported alongside).
 */

type GradientType = "linear" | "radial" | "angular";
/** A single colour stop. `token` wins over `color`; `opacity` is 0–1. */
interface GradientStop {
    /** Stable key for list rendering / edits. */
    id: string;
    /** Position along the gradient, 0–100 (%). */
    position: number;
    /** A Grade colour token NAME ("action/primary"). Takes precedence. */
    token?: string;
    /** A raw CSS colour, used when no `token`. */
    color?: string;
    /** Stop opacity, 0–1. */
    opacity: number;
}
interface GradientValue {
    type: GradientType;
    /** Angle in degrees for linear / angular gradients. */
    angle?: number;
    stops: GradientStop[];
}
/** Compute the CSS gradient string from a structured value. */
declare function gradientToCss(value: GradientValue): string;
interface GradientEditorProps {
    value: GradientValue;
    onChange: (value: GradientValue) => void;
    className?: string;
}
declare const GradientEditor: React.ForwardRefExoticComponent<GradientEditorProps & React.RefAttributes<HTMLDivElement>>;

/**
 * ShaderPresetPreview — a thumbnail-sized preview of a shader preset.
 *
 * Default behaviour: static poster until hovered, then kick in a live
 * `<ThreeScene>` render. Keeps gallery pages cheap (ten live shaders on
 * one page eats FPS fast, Safari caps WebGL contexts ~8).
 *
 * Props:
 *   live: "never"  → always show poster, no canvas
 *   live: "hover"  → (default) canvas spins up on hover, tears down on leave
 *   live: "always" → canvas always rendering
 */

interface ShaderPresetPreviewProps {
    preset: string;
    live?: "never" | "hover" | "always";
    postPreset?: string;
    palette?: Partial<Palette>;
    className?: string;
    aspect?: "video" | "standard" | "square" | "portrait" | "wide";
    radius?: "none" | "sm" | "md" | "lg" | "xl";
    /** Text label shown on the card. Defaults to preset label. */
    label?: string;
    /** Hide the label strip. */
    hideLabel?: boolean;
    onClick?: () => void;
}
declare const ShaderPresetPreview: React.ForwardRefExoticComponent<ShaderPresetPreviewProps & React.RefAttributes<HTMLDivElement>>;

/**
 * ShaderPresetPicker — runtime preset gallery + selection.
 *
 * A grid of `<ShaderPresetPreview>` cards. Click to select. Used for
 * things like "pick a vibe for your course background".
 *
 * For a browsing-only catalogue with no selection, just lay out
 * `<ShaderPresetPreview>` directly.
 *
 * TODO(phase 2): static catalogue page for the docs site mirroring this.
 */

interface ShaderPresetPickerProps {
    /** Currently selected preset id (controlled). */
    value?: string;
    /** Called when the user clicks a preset. */
    onChange?: (presetId: string) => void;
    /** Filter by tag — e.g. only show `"space"` or `"retro"` presets. */
    filterTags?: string[];
    /** Live-render mode for thumbnails. Default "hover". */
    live?: "never" | "hover" | "always";
    /** Shared post-FX preset applied to all thumbnails. Default: each preset's own. */
    postPreset?: string;
    /** Shared palette for all thumbnails. */
    palette?: Partial<Palette>;
    /** Columns at md+ breakpoint. Default 3. */
    columns?: 2 | 3 | 4;
    className?: string;
}
declare function ShaderPresetPicker({ value, onChange, filterTags, live, postPreset, palette, columns, className, }: ShaderPresetPickerProps): React.JSX.Element;

/**
 * Shader preset registry — maps semantic preset ids to scene factories
 * plus metadata for the picker UI.
 *
 * Adding a new preset:
 *   1. Write a SceneFactory in `./scenes/<name>.ts`
 *   2. Register it in `sceneRegistry` below
 *   3. Add a `ShaderPreset` entry in `shaderPresets`
 *
 * Both `<ThreeScene preset="space" />` and `<ShaderPresetPicker />` read
 * from this registry so they stay in lockstep.
 */

declare const sceneRegistry: Record<string, SceneFactory>;
declare const shaderPresets: ShaderPreset[];
declare const shaderPresetById: Record<string, ShaderPreset>;

/**
 * Post-FX preset registry.
 *
 * Each preset is a tunable description of the post-FX stack. Lives as data
 * so the same registry drives `<ThreeScene postPreset="vhs" />` and the
 * preset picker's preview thumbnails.
 */

declare const postPresets: Record<string, PostPreset>;
type PostPresetId = keyof typeof postPresets;
declare const defaultPostPreset: PostPresetId;

declare function cn(...inputs: ClassValue[]): string;

interface LenisProviderProps {
    children: React.ReactNode;
}
declare function LenisProvider({ children }: LenisProviderProps): React.JSX.Element;

/**
 * OKLCH ramp generation.
 *
 * OKLCH (Oklab in cylindrical coords) is a perceptually uniform color space —
 * the same `L` value looks equally light across all hues, which HSL does not
 * give you. That makes it ideal for generating color ramps programmatically:
 * pin the L curve, vary the hue, and every ramp looks like a sibling.
 *
 * We output space-separated `"L C H"` triplets (not `oklch(L C H)` strings),
 * because the CSS variables are consumed via Tailwind as
 *   `oklch(var(--primary) / <alpha-value>)`
 * which needs the bare components inside the function call to get the
 * `/alpha` shortcut (`bg-primary/50`) working.
 */
/** One of four brightness modes the theme system supports. */
type ModeName = "superLight" | "light" | "dark" | "superDark";
/** A bare OKLCH triplet — "L C H" space-separated. Consumed inside oklch(). */
type OKLCHTriplet = string;
/** A full 11-stop color ramp, Tailwind-style. */
interface Ramp {
    50: OKLCHTriplet;
    100: OKLCHTriplet;
    200: OKLCHTriplet;
    300: OKLCHTriplet;
    400: OKLCHTriplet;
    500: OKLCHTriplet;
    600: OKLCHTriplet;
    700: OKLCHTriplet;
    800: OKLCHTriplet;
    900: OKLCHTriplet;
    950: OKLCHTriplet;
}
type RampKey = keyof Ramp;

/**
 * The CSS font-family string for each available font. Keys match the CSS
 * variables set by app/layout.tsx's font loaders. Adding a new font means
 * loading it in the root layout AND registering it here.
 *
 * Geist is the recommended default sans (replaces Satoshi). Jetbrains Mono
 * is the default mono. Serif and alternative options round out the list for
 * the theme builder's font picker — expected to grow as we allow dynamic
 * Google Font loading later.
 */
declare const FONTS: {
    readonly geist: "var(--font-geist), system-ui, sans-serif";
    readonly inter: "var(--font-inter), system-ui, sans-serif";
    readonly manrope: "var(--font-manrope), system-ui, sans-serif";
    readonly figtree: "var(--font-figtree), system-ui, sans-serif";
    readonly dmSans: "var(--font-dm-sans), system-ui, sans-serif";
    readonly lexend: "var(--font-lexend), system-ui, sans-serif";
    readonly outfit: "var(--font-outfit), system-ui, sans-serif";
    readonly plusJakarta: "var(--font-plus-jakarta), system-ui, sans-serif";
    readonly spaceGrotesk: "var(--font-space-grotesk), system-ui, sans-serif";
    readonly poppins: "var(--font-poppins), system-ui, sans-serif";
    readonly fraunces: "var(--font-fraunces), Georgia, serif";
    readonly instrumentSerif: "var(--font-instrument-serif), Georgia, serif";
    readonly sourceSerif: "var(--font-source-serif), Georgia, serif";
    readonly jetbrainsMono: "var(--font-jetbrains-mono), ui-monospace, monospace";
    readonly geistMono: "var(--font-geist-mono), ui-monospace, monospace";
    readonly ibmPlexMono: "var(--font-ibm-plex-mono), ui-monospace, monospace";
    readonly system: "system-ui, -apple-system, sans-serif";
    readonly serif: "Georgia, 'Times New Roman', serif";
    readonly mono: "ui-monospace, Menlo, monospace";
};
type FontKey = keyof typeof FONTS;
/** One uploaded font face a theme carries. Stored on
 *  `ThemeInput.typography.customFonts` and emitted as an @font-face rule
 *  by `fontFaceCSS` (apply.ts) wherever the theme is applied. */
interface CustomFontFace {
    /** CSS font-family name, e.g. "Pebble Sans". Doubles as the display
     *  label and as the reference target for `custom:<family>` selections. */
    family: string;
    /** Permanent public URL for the font file (user-assets bucket). Must be
     *  publicly resolvable so cross-origin embeds can load it. */
    url: string;
    /** @font-face `format()` hint. Derived from the file extension. */
    format?: "woff2" | "woff" | "truetype" | "opentype";
    /** font-weight descriptor: "400", "700", or a variable range "100 900". */
    weight?: string;
    /** font-stretch descriptor range, e.g. "75% 125%" for a wdth axis.
     *  Defaults to a generous "50% 200%" (browsers clamp to the font's
     *  real range) so width-variable fonts respond to font-stretch. */
    stretch?: string;
    style?: "normal" | "italic";
    /** Drives the generic fallback stack appended after the family. */
    category?: "sans" | "serif" | "mono";
    /** Provenance: the `assets` row this face came from (optional — a theme
     *  must stay renderable even if the library row is gone). */
    assetId?: string;
}
/** What `typography.display/body/mono` accept: a registry key, or a
 *  reference to an entry in `typography.customFonts` ("custom:<family>"). */
type FontSelection = FontKey | `custom:${string}`;
/** Type scale preset — controls how generous the size ladder is. */
type TypeScalePreset = "compact" | "default" | "spacious";
/** Modular (musical-interval) scale ids — mirror GDS_MODULAR_SCALES in
 *  @gradeui/core. Selecting one generates the type ladder middle-out from
 *  the body size (Utopia model): up by the ratio, down by the reciprocal,
 *  floored. */
type ModularScaleId = "minor-second" | "major-second" | "minor-third" | "major-third" | "perfect-fourth" | "augmented-fourth" | "perfect-fifth" | "golden-ratio";
/** What `typography.scale` accepts: a legacy flat preset or a modular ratio. */
type TypeScale = TypeScalePreset | ModularScaleId;
/** Density preset — controls spacing tightness. */
type SpacingDensity = "tight" | "default" | "roomy";
/** Radius preset — controls how rounded corners are across the system. */
type RadiusStyle = "sharp" | "subtle" | "soft" | "round" | "pill";
/** Shadow intensity preset. */
type ShadowIntensity = "none" | "subtle" | "default" | "dramatic";
/**
 * Chroma intensity — applied globally on top of per-ramp chroma multipliers.
 * "muted" dials all ramps down (pastel / editorial feel).
 * "vibrant" pushes them past the defaults (popping / marketing feel).
 */
type ColorIntensity = "muted" | "default" | "vibrant";
/** Button rendering shape (orthogonal to radius). */
type ButtonShape = "default" | "pill" | "square";
/** Input rendering style. */
type InputStyle = "outlined" | "filled" | "underline";
/** Card rendering style. */
type CardStyle = "flat" | "outlined" | "elevated" | "glass";
/**
 * The user-facing theme definition. This is what gets saved to
 * localStorage, exported as JSON, and shared via URL. The generator
 * consumes this and produces a full GeneratedTheme.
 */
/** One semantic token's mapping: a step on one of the three theme ramps,
 *  or an explicit OKLCH triplet for values outside them (pure white or
 *  black surfaces). Structurally identical to the generator's internal
 *  TokenRef, exported here so the Styles panel token editor and the
 *  ThemeInput contract share one shape. */
type ThemeTokenRef = {
    source: "neutral" | "primary" | "accent";
    step: RampKey;
} | {
    source: "pure";
    value: OKLCHTriplet;
};
/** The remappable semantic tokens, in display order. Matches the
 *  generator's per-mode TokenMap key for key. */
declare const SEMANTIC_TOKEN_KEYS: readonly ["background", "foreground", "card", "cardForeground", "popover", "popoverForeground", "primary", "primaryForeground", "secondary", "secondaryForeground", "muted", "mutedForeground", "superMutedForeground", "accent", "accentForeground", "border", "input", "ring"];
type SemanticTokenKey = (typeof SEMANTIC_TOKEN_KEYS)[number];
/** Per-token remap set for one mode. Absent keys keep the mode map's
 *  tuned default. */
type ThemeTokenOverrides = Partial<Record<SemanticTokenKey, ThemeTokenRef>>;
interface ThemeInput {
    /** Stable id. For user themes: "user:<uuid>"; for built-ins: short slug. */
    id: string;
    /** Display name. */
    name: string;
    /** Optional one-line description for the switcher. */
    description?: string;
    /** Optional tagline (category tag). */
    tagline?: string;
    /** The three hues that drive the entire color system. */
    hues: {
        /** 0–360. The gray ramp's tint. Low chroma, subtle. */
        neutral: number;
        /** 0–360. The brand primary. */
        primary: number;
        /** 0–360. The secondary brand accent. Often primary ± 30–180°. */
        accent: number;
    };
    /**
     * Optional chroma overrides. Defaults tuned to produce pleasant ramps:
     * neutrals get a subtle tint (0.1× peak), primary/accent get full chroma.
     * Raise above 1.0 for vibrant; lower for muted.
     */
    chroma?: {
        neutral?: number;
        primary?: number;
        accent?: number;
    };
    /** If true, the neutral ramp is pure gray regardless of neutral hue. */
    neutralPureGray?: boolean;
    /**
     * Token mapping seam (8 Aug 2026): remap any semantic token to a ramp
     * step, or a pure OKLCH value, PER MODE (light and dark tune
     * independently, exactly like the built-in maps). Merged over the
     * mode's map by the generator, so an absent entry keeps the tuned
     * default. This is the contract the Styles panel's token editor
     * writes; ramp-shaped refs keep themes portable and regenerate
     * cleanly when hues change.
     */
    tokenOverrides?: Partial<Record<ModeName, ThemeTokenOverrides>>;
    /**
     * Focus ring colour. By default the ring (`--ring`) rides the PRIMARY
     * ramp at a mode-tuned step (500 light / 400 dark / 300 superDark).
     * `source` re-points it at another ramp; `hue` (0–360) gives the ring
     * its own dedicated ramp at primary chroma — for brands whose focus
     * colour is deliberately independent of primary/accent (e.g. a blue
     * a11y ring on a warm-toned brand). `hue` wins over `source` when both
     * are set. The mode-tuned step is preserved either way, so contrast
     * behaviour per mode doesn't change. Deterministic + portable like
     * every other ThemeInput field.
     */
    ring?: {
        source?: "primary" | "accent" | "neutral";
        hue?: number;
    };
    /**
     * Global chroma intensity. Multiplies every ramp's chroma — a quick way to
     * flip the whole theme between muted / default / vibrant without touching
     * the per-ramp chroma values.
     */
    intensity?: ColorIntensity;
    typography: {
        display: FontSelection;
        body: FontSelection;
        mono: FontSelection;
        scale: TypeScale;
        /** Override heading weight. Defaults to 600 for sans, 500 for serif. */
        headingWeight?: number;
        /** Override body weight. Defaults to 400. */
        bodyWeight?: number;
        /** Letter-spacing applied to headings. Default "-0.01em". */
        headingTracking?: string;
        /** CSS font-stretch for body text (spans, paragraphs, component
         *  text — it inherits everywhere). Meaningful for fonts with a
         *  wdth axis, e.g. "90%" = TT Commons' Compact cut. Default
         *  "normal". Fonts without the axis ignore it. */
        bodyStretch?: string;
        /** CSS font-stretch for display/heading text. Defaults to
         *  bodyStretch so one knob re-cuts the whole theme. */
        displayStretch?: string;
        /** Uploaded faces this theme carries. A `custom:<family>` selection
         *  above must have a matching entry here; unreferenced entries are
         *  harmless (kept so switching back is instant). */
        customFonts?: CustomFontFace[];
    };
    spacing: {
        density: SpacingDensity;
    };
    radius: {
        style: RadiusStyle;
    };
    effects?: {
        shadows?: ShadowIntensity;
        /** 0 = instant, 1 = default, 2 = luxurious. */
        motionIntensity?: number;
        borderWidth?: string;
    };
    components?: {
        buttonShape?: ButtonShape;
        inputStyle?: InputStyle;
        cardStyle?: CardStyle;
    };
}
/**
 * Per-mode semantic token mapping. Each token holds a bare OKLCH triplet
 * (not an `oklch(…)` string) — the consumer wraps it with oklch(var(--x) /
 * <alpha-value>) via Tailwind config.
 */
interface GeneratedColorsMode {
    background: OKLCHTriplet;
    foreground: OKLCHTriplet;
    card: OKLCHTriplet;
    cardForeground: OKLCHTriplet;
    popover: OKLCHTriplet;
    popoverForeground: OKLCHTriplet;
    primary: OKLCHTriplet;
    primaryForeground: OKLCHTriplet;
    secondary: OKLCHTriplet;
    secondaryForeground: OKLCHTriplet;
    muted: OKLCHTriplet;
    mutedForeground: OKLCHTriplet;
    /** Quietest text tier: timestamps, ghost hints, fine print. */
    superMutedForeground: OKLCHTriplet;
    accent: OKLCHTriplet;
    accentForeground: OKLCHTriplet;
    destructive: OKLCHTriplet;
    destructiveForeground: OKLCHTriplet;
    border: OKLCHTriplet;
    input: OKLCHTriplet;
    ring: OKLCHTriplet;
    success: OKLCHTriplet;
    warning: OKLCHTriplet;
    info: OKLCHTriplet;
    highlight: OKLCHTriplet;
    destructiveSoft: OKLCHTriplet;
    destructiveDeep: OKLCHTriplet;
    successSoft: OKLCHTriplet;
    successDeep: OKLCHTriplet;
    warningSoft: OKLCHTriplet;
    warningDeep: OKLCHTriplet;
    infoSoft: OKLCHTriplet;
    infoDeep: OKLCHTriplet;
    highlightSoft: OKLCHTriplet;
    highlightDeep: OKLCHTriplet;
}
/** Concrete resolved CSS values for the typography dimension. */
interface GeneratedTypography {
    fontSans: string;
    fontMono: string;
    fontDisplay: string;
    /** Custom @font-face sources carried through from the input. Whoever
     *  applies the theme (apply.ts, Fast Frame, Sandpack, embed) is
     *  responsible for injecting these — the font-family vars above already
     *  reference the family names. Absent/empty for registry-only themes. */
    fontFaces?: CustomFontFace[];
    headingWeight: number;
    bodyWeight: number;
    headingTracking: string;
    /** Resolved CSS font-stretch values ("normal" when unset). */
    bodyStretch: string;
    displayStretch: string;
    /** Explicit font-size for each step in the scale. */
    scale: {
        display: string;
        h1: string;
        h2: string;
        h3: string;
        h4: string;
        h5: string;
        h6: string;
        body: string;
        bodySm: string;
    };
    /**
     * The full named Tailwind ladder (2xs…7xl), present ONLY when
     * `typography.scale` is a modular ratio id (THEME-MIGRATION.md B2).
     * Emitted as `--text-<name>` / `--text-<name>--line-height` so every
     * text-* utility re-pitches when the ratio changes. Presets leave this
     * undefined — the static ladder in the stylesheet stays untouched.
     */
    namedScale?: Record<string, {
        size: string;
        lineHeight: string;
    }>;
}
/** Concrete resolved CSS values for radius. */
interface GeneratedRadius {
    base: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    "2xl": string;
    full: string;
}
/** Concrete resolved spacing values. */
interface GeneratedSpacing {
    baseUnit: string;
    densityFactor: number;
    /**
     * The Tailwind v4 `--spacing` base unit (e.g. "0.2125rem" for tight,
     * "0.25rem" for default, "0.3rem" for roomy). Every spacing utility is
     * calc(var(--spacing) * N), so this single variable re-scales padding,
     * gaps, margins and sizes across every generated screen — retroactively
     * (THEME-MIGRATION.md B1).
     */
    unit: string;
}
/** Concrete resolved effects values. */
interface GeneratedEffects {
    shadows: {
        sm: string;
        md: string;
        lg: string;
        xl: string;
        "2xl": string;
        inner: string;
    };
    motion: {
        fast: string;
        base: string;
        slow: string;
        slower: string;
    };
    borderWidth: string;
}
/**
 * A 5-stop categorical chart palette derived from the theme hues. Each
 * entry is an OKLCH triplet. Written to --chart-1 through --chart-5 at
 * :root — chart components (recharts) read them via var(--chart-N).
 */
interface ChartPalette {
    1: OKLCHTriplet;
    2: OKLCHTriplet;
    3: OKLCHTriplet;
    4: OKLCHTriplet;
    5: OKLCHTriplet;
}
/**
 * The full output of the generator. This is what gets applied to :root by
 * the provider, written to CSS vars, and used for rendering previews.
 *
 * The original ThemeInput is preserved on `input` so the theme can be
 * round-tripped back into the builder UI for editing.
 */
interface GeneratedTheme {
    id: string;
    name: string;
    description?: string;
    tagline?: string;
    /** The original input, preserved for round-trip editing. */
    input: ThemeInput;
    /** The three base ramps. Same content regardless of which mode is active. */
    ramps: {
        neutral: Ramp;
        primary: Ramp;
        accent: Ramp;
    };
    /**
     * Role ramp families (THEME-MIGRATION.md B4) — every status alias is a
     * whole ramp because status displays many ways (soft 100 bg, solid 600
     * fill, 800 text). Seeded from the fixed status hues; emitted as
     * `--gds-<role>-<step>` triplets alongside primary/accent/neutral
     * (which reuse `ramps`). Optional so partially-constructed themes stay
     * valid; generator output always includes it.
     */
    roleRamps?: {
        success: Ramp;
        warning: Ramp;
        info: Ramp;
        highlight: Ramp;
        destructive: Ramp;
        /**
         * Expressive accent ramps — default = the primary hue rotated +60°·k in
         * OKLCH (k = 1..5). Optional so partially-constructed themes stay valid;
         * generator output always includes them. Emitted as `--gds-accent{1..5}-<step>`.
         */
        accent1?: Ramp;
        accent2?: Ramp;
        accent3?: Ramp;
        accent4?: Ramp;
        accent5?: Ramp;
    };
    /** Semantic tokens for all four modes. */
    colors: Record<ModeName, GeneratedColorsMode>;
    /** 5-stop palette for chart series. */
    chart: ChartPalette;
    typography: GeneratedTypography;
    radius: GeneratedRadius;
    spacing: GeneratedSpacing;
    effects: GeneratedEffects;
    components: NonNullable<ThemeInput["components"]>;
}

/**
 * Theme generator — the one true source for producing themes.
 *
 * Takes a compact ThemeInput (hues + a handful of presets) and returns a
 * fully resolved GeneratedTheme with three OKLCH color ramps, semantic
 * tokens for all four brightness modes, and concrete values for typography,
 * radius, spacing, and effects.
 *
 * Every theme in the system — built-in or user-built — flows through here.
 * Built-ins are just curated ThemeInputs; user themes live in localStorage
 * as ThemeInputs and get re-generated on load.
 */

/**
 * Turn a compact ThemeInput into a fully resolved GeneratedTheme.
 * Pure function — safe to run on the client, server, or at build time.
 */
declare function generateTheme(input: ThemeInput): GeneratedTheme;

/**
 * Produce every CSS custom property a given GeneratedTheme + mode implies,
 * as a flat { key: value } map. Useful for the provider (applies to :root)
 * and the builder preview pane (applies to a scoped wrapper).
 */
declare function themeToCSSVars(theme: GeneratedTheme, mode: ModeName): Record<string, string>;
/**
 * Apply a theme to the document root. Writes every CSS variable produced by
 * themeToCSSVars and sets a set of data attributes that component-shape
 * CSS rules key off of.
 *
 * Safe to call repeatedly — each call fully resets the vars the theme
 * controls. Vars the theme doesn't touch (e.g. --gds-green-500 in
 * globals.css) are left alone.
 */
declare function applyThemeToRoot(theme: GeneratedTheme, mode: ModeName): void;

/**
 * Built-in ThemeInputs. Every theme — built-in or user-built — is a
 * ThemeInput. Built-ins are just curated ones we ship as starting points.
 *
 * "Calm" is the canonical Grade DS look: warm neutrals, terracotta primary,
 * serif display + body, roomier spacing, rounded corners, pill buttons,
 * subtle shadows. "Energy" is a bolder alternate — teal primary, Geist
 * sans, tighter feel.
 *
 * To add a new built-in: define a ThemeInput here, import it in index.ts,
 * and add it to the registry.
 */
/**
 * Calm — the canonical Grade DS theme.
 *
 * Warm neutral tint (~40° amber), terracotta primary (~20°), amber accent.
 * Serif display and body (Fraunces with its full variable weight range),
 * roomier spacing, rounder corners, pill buttons, outlined cards, subtle
 * shadows, slower motion.
 */
declare const calmInput: ThemeInput;
/**
 * Energy — bolder alternate theme.
 *
 * Teal primary + indigo accent (complementary-cool pairing). Neutral gets
 * a whisper of chroma (0.08× default curve) so grays read cool against
 * both brand colors rather than clinical. Modern sans (Geist) with
 * tighter spacing and standard corners.
 */
declare const energyInput: ThemeInput;
declare const BUILT_IN_INPUTS: ThemeInput[];

/**
 * Theme system public API.
 *
 * Every theme — built-in or user-built — is a ThemeInput that flows
 * through generateTheme() to produce a GeneratedTheme. The provider
 * consumes GeneratedThemes and writes them to :root via applyThemeToRoot.
 *
 * Built-in themes are defined in inputs.ts and generated on module load.
 * User themes are persisted as ThemeInputs in localStorage (phase 4) and
 * generated on demand.
 */

/**
 * Generated built-in themes, keyed by id. These are pure — generated once
 * at module load and shared across the app. Adding a new built-in means
 * updating inputs.ts; this map follows automatically.
 */
declare const builtInThemes: Record<string, GeneratedTheme>;
declare const defaultThemeId: string;
/**
 * Look up a theme by id — built-in or user-built. User themes are read
 * from localStorage lazily (only called from client code).
 *
 * Returns undefined if no theme matches.
 */
declare function getTheme(id: string): GeneratedTheme | undefined;
/** Enumerate every theme — built-in first, then user themes. */
declare function listThemes(): GeneratedTheme[];
/** Return every user-saved theme (generated from the stored inputs). */
declare function listUserThemes(): GeneratedTheme[];
/** Load a single user theme's input by id, if present. */
declare function loadUserThemeInput(id: string): ThemeInput | undefined;
/** Save (create or replace) a user theme. */
declare function saveUserTheme(input: ThemeInput): GeneratedTheme;
/** Remove a user theme. Built-in ids are ignored. */
declare function deleteUserTheme(id: string): void;
/** Duplicate an existing theme (built-in or user) as a new user theme. */
declare function duplicateTheme(sourceId: string, newId: string, newName: string): ThemeInput | undefined;

declare const ALL_MODES: ModeName[];
/**
 * Inline script body (no React, no imports) that runs in <head> before
 * hydration. Applies the `.dark` class and `data-mode` attribute so the
 * initial paint matches the stored mode / system preference — prevents
 * the classic dark-mode FOUC.
 *
 * NOTE: this string is embedded directly into the <head> via
 * dangerouslySetInnerHTML. Keep it self-contained and dependency-free.
 */
declare const GRADE_PRE_HYDRATION_SCRIPT = "\n(function() {\n  try {\n    var mode = localStorage.getItem('grade-mode');\n    var valid = ['superLight','light','dark','superDark'];\n    if (!mode || valid.indexOf(mode) === -1) {\n      mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    if (mode === 'dark' || mode === 'superDark') {\n      document.documentElement.classList.add('dark');\n    }\n    document.documentElement.setAttribute('data-mode', mode);\n    var themeId = localStorage.getItem('grade-theme');\n    if (themeId) document.documentElement.setAttribute('data-grade-theme', themeId);\n  } catch(e) {}\n})();\n";
type GradeThemeContextValue = {
    /** The currently active theme object. */
    theme: GeneratedTheme;
    /** The active theme's id. */
    themeId: string;
    /** Active brightness mode. */
    mode: ModeName;
    /** True if the active mode is dark or super-dark. Convenience for
     *  components that only care about a binary light/dark split. */
    isDark: boolean;
    /** Switch active theme by id (built-in or user). Persists. */
    setThemeId: (id: string) => void;
    /** Switch active brightness mode. Persists. */
    setMode: (mode: ModeName) => void;
    /** Every theme visible in the switcher (built-ins + user themes). */
    themes: GeneratedTheme[];
    /** Save (create/replace) a user theme and switch to it. */
    saveAndActivate: (input: ThemeInput) => void;
    /** Delete a user theme (built-ins are no-ops). Falls back to default if active. */
    deleteTheme: (id: string) => void;
    /** Refresh the themes list (call after external user-theme mutations). */
    refresh: () => void;
};
interface GradeThemeProviderProps {
    children: React.ReactNode;
    defaultTheme?: string;
    defaultMode?: ModeName;
}
declare function GradeThemeProvider({ children, defaultTheme, defaultMode, }: GradeThemeProviderProps): React.JSX.Element;
/** Read the active theme + mode. Must be used inside <GradeThemeProvider>. */
declare function useGradeTheme(): GradeThemeContextValue;
/** Safe variant — returns null outside a provider instead of throwing. */
declare function useMaybeGradeTheme(): GradeThemeContextValue | null;

/**
 * Theme switcher — iterates every registered theme (built-in + user) and
 * lets you pick one. User themes get a delete button on hover.
 *
 * Renders nothing when no <GradeThemeProvider> is mounted, so it's safe to
 * drop into any layout.
 */
declare function GradeThemeSwitcher({ className }: {
    className?: string;
}): React.JSX.Element | null;

/**
 * 4-way mode switcher. Segmented control: super-light / light / dark / super-dark.
 *
 * Renders nothing without a GradeThemeProvider. Default layout is a compact
 * 4-icon row suitable for a header; the `variant="labeled"` form adds
 * text labels for settings pages.
 */
interface GradeModeSwitcherProps {
    className?: string;
    variant?: "icons" | "labeled";
}
declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProps): React.JSX.Element | null;

/**
 * Binary light/dark toggle — flips between `light` and `dark` modes.
 * For the full 4-way picker (including super-light / super-dark), use
 * <GradeModeSwitcher /> instead.
 */
declare function ThemeToggle(): React.JSX.Element;

export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, TRANSPARENT as COLOR_PICKER_TRANSPARENT, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, ColorPicker, type ColorPickerProps, type ColorTokenGroup, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Container, type ContainerMaxW, type ContainerProps, DEFAULT_COLOR_TOKEN_GROUPS, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DemoSpeed, DemoStage, type DemoStageProps, DemoTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FILL_TOKENS, FRAGMENT_HEADER, FieldRoot as Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldProps, FieldSeparator, FieldSet, FieldTitle, FieldTrailing, FillPicker, type FillPickerProps, FillSection, type FillSectionProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, GradientEditor, type GradientEditorProps, type GradientStop, type GradientType, type GradientValue, Grid, type GridProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Section, SectionActions, SectionBlock, type SectionBlockProps, SectionDescription, SectionEyebrow, SectionMedia, type SectionProps, type SectionScope$1 as SectionScope, SectionSubtitle, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants$1 as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, containerVariants$1 as containerVariants, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gradientToCss, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, bandVariants as sectionBandVariants, sectionBlockVariants, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useComboboxAnchor, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };