/** A stylesheet's class names as the model reads them. */
export interface CssVocabulary {
    /** Families of classes, the most used first: `{ name: 'btn', classes: ['btn', 'btn-{primary,secondary}'] }`. */
    groups: {
        name: string;
        classes: string[];
    }[];
    /** How many distinct class names the stylesheet defines. */
    total: number;
    /** How many of them `groups` lists (the rest were over the cap). */
    listed: number;
    /** Custom properties declared on its root (`:root`, `html`, `[data-theme]`, `.dark`…). */
    vars: string[];
}
export interface CssVocabularyOptions {
    /** Most class names listed. Default: all of them (they are written as patterns). */
    maxClasses?: number;
    /** Most class names listed per family (`btn`, `col`…). Default: all of them. */
    maxPerFamily?: number;
    /**
     * Most characters the families' patterns take, so the prompt stays small whatever the stylesheet;
     * the rarest families go first. Default 12000.
     */
    maxChars?: number;
    /** Most custom properties listed. Default 80. */
    maxVars?: number;
}
/** Whether a class name is a generated (CSS-modules) one — nobody can write it by hand. */
export declare function isGeneratedClassName(name: string): boolean;
/**
 * What a stylesheet gives the model to write with: its class names, grouped into families
 * (`btn`, `card`, `form`…) and compressed (`btn-{primary,secondary,danger}`), the most used first —
 * a class counts once per selector it appears in, and twice more where it stands alone (`.btn {`,
 * a component's root) — plus the custom properties on its root. Generated CSS-modules names are
 * left out (nobody can write them).
 */
export declare function extractCssVocabulary(css: string, options?: CssVocabularyOptions): CssVocabulary;
/**
 * Class names written as patterns, every name covered exactly once and nothing else: names with the
 * same number of `-segments` that differ in one segment merge into one pattern (`btn-primary`,
 * `btn-secondary` → `btn-{primary,secondary}`), again and again, segment by segment from the last —
 * so a utility family becomes one line (`{m,p}{,t,b,s,e,x,y}-{0..5,auto}`,
 * `{m,p}{,t,b,s,e,x,y}-{sm,md,lg,xl,xxl}-{0..5,auto}`). A run of three or more integers is a range
 * (`{0..5}`); short words sharing their tails share them (`{m,p}{,t,b}`). Order kept (the first
 * member's place).
 */
export declare function compressClassNames(names: readonly string[]): string[];
/** The vocabulary as the model reads it (inside the sandbox description). */
export declare function vocabularyToModelText(vocabulary: CssVocabulary, options?: {
    jsx?: boolean;
}): string;
/** Whether a stylesheet's source uses Tailwind, and which major version it reads as. */
export declare function tailwindVersionOf(source: string): 3 | 4 | null;
/**
 * The Tailwind directives of an app stylesheet the frame's Tailwind runtime gets too: its
 * `@custom-variant`s, `@utility`s, `@variant`s and `@theme` blocks (`@keyframes` inside them
 * included) — not its `@import`s, `@source`s, `@plugin`s or base styles (those reach the frame
 * compiled).
 */
export declare function tailwindDirectivesFromCss(css: string): string;
/** What the app's Tailwind setup gives the model: theme names, its own utilities and variants. */
export interface TailwindTokens {
    /** `bg-<name>`, `text-<name>`… (`--color-<name>`). */
    colors: string[];
    /** `rounded-<name>` (`--radius-<name>`). */
    radius: string[];
    /** `font-<name>` (`--font-<name>`). */
    fonts: string[];
    /** `shadow-<name>`. */
    shadows: string[];
    /** `text-<name>` sizes (`--text-<name>`). */
    text: string[];
    /** `animate-<name>`. */
    animations: string[];
    /** `@utility` names (`figure`, `tab-*`). */
    utilities: string[];
    /** `@custom-variant` names (`dark`, `data-open`). */
    variants: string[];
}
/** The tokens a Tailwind stylesheet's directives declare (see {@link tailwindDirectivesFromCss}). */
export declare function tailwindTokensFromCss(css: string): TailwindTokens;
/** What the model is told about Tailwind in the frame. `colors` may add the host theme's names. */
export declare function tailwindToModelText(tokens: TailwindTokens, options?: {
    version?: 3 | 4;
    colors?: readonly string[];
}): string;
/**
 * A Tailwind v3 config's theme as the v4 directives the frame's runtime reads: colors →
 * `--color-*` (nested shades flattened, `DEFAULT` dropped, `<alpha-value>` → 1), `borderRadius` →
 * `--radius-*`, `fontFamily` → `--font-*`, `fontSize` → `--text-*`, `boxShadow` → `--shadow-*`,
 * `screens` → `--breakpoint-*`, `keyframes`/`animation` → `@keyframes` + `--animate-*` — the
 * `theme` and its `extend` together, function values skipped. `darkMode: 'class'` / `'selector'` /
 * `['class', '<selector>']` becomes a `dark` variant.
 */
export declare function tailwindV3ConfigToCss(config: unknown): string;
/** Where in a stylesheet {@link purgeCss} may drop rules. */
export type PurgeScope = 'utilities' | 'all';
export interface PurgeCssOptions {
    /** Whether a class name (unescaped: `hover:bg-primary/90`) is kept. */
    keep(className: string): boolean;
    /**
     * `'utilities'`: only style rules inside `@layer utilities` (Tailwind v4's compiled output — the
     * frame's runtime generates whatever utility the model writes, so only those the kit itself uses
     * must ship); `'all'`: every style rule.
     */
    scope: PurgeScope;
}
/**
 * A compiled stylesheet with the style rules nobody can use taken out: a rule (or one selector of
 * its list) goes when a class it requires is not kept (`options.keep`). Rules without classes (the
 * base: elements, `:root`, `*`), `@font-face`, `@keyframes`, `@property` and every other at-rule
 * stay; grouping at-rules (`@media`, `@supports`, `@layer`…) left empty go too.
 */
export declare function purgeCss(css: string, options: PurgeCssOptions): string;
/**
 * The class-like tokens of a source text (a kit bundle): every run of characters between quotes,
 * backticks, whitespace and template braces — a superset of the class names it can put on an
 * element (`"inline-flex hover:bg-primary/90"` → `inline-flex`, `hover:bg-primary/90`).
 */
export declare function classTokensOf(source: string): Set<string>;
/** What a `url()` resolves to: its bytes (base64) and type — or why it cannot be inlined. */
export type CssUrlResolution = {
    data: string;
    mime: string;
    bytes: number;
} | {
    dropped: string;
} | null;
export interface InlineCssUrlsOptions {
    /** The bytes behind a url that is not already `data:` (`null`: unknown, dropped). */
    resolve(url: string): CssUrlResolution;
    /** Largest file inlined, in bytes. Default 128 KB. */
    limit?: number;
    /** Most bytes inlined in all, `data:` URIs already in the CSS included. Default 1 MB. */
    budget?: number;
    /** Told about every url dropped, and why. */
    warn?(message: string): void;
}
export declare const INLINE_ASSET_DEFAULTS: {
    readonly limit: number;
    readonly budget: number;
};
/**
 * Every `url()` of a stylesheet made network-less: `data:` URIs kept (within the budget), files
 * inlined as `data:` URIs when `resolve` finds them and they fit `limit` and `budget`, everything
 * else — remote urls, files too big, files not found — replaced by an empty `data:,` (the browser
 * falls back: the next font in the stack, no background image), each with a warning.
 */
export declare function inlineCssUrls(css: string, options: InlineCssUrlsOptions): string;
//# sourceMappingURL=sandbox-styles.d.ts.map