export declare function cssVarCamelCase(str: string): string;
/**
 * Shared "theme globals" contract — the serialized, runtime-readable form of the editor's
 * global theme settings (the left "Styles" panel): global variables + design tokens
 * (colors, typography, breakpoints, keyframes, color schemes).
 *
 * This is packed into `IkasStorefrontConfig.themeGlobals` and read by the
 * `@ikas/bp-storefront` runtime API (getThemeSetting / getThemeColors / ...). The same
 * payload is produced for SSR, client hydration, and the editor canvas via
 * {@link serializeThemeGlobals}, and returned by the CLI/MCP `list-theme-globals` reader.
 */
/** Global-variable value kinds, mirrored from the editor sidebar `GlobalVariableType`. */
export type GlobalVariableType = "TEXT" | "RICH_TEXT" | "IMAGE" | "COLOR" | "NUMBER" | "BOOLEAN" | "BORDER" | "SHADOW";
/** A theme "global variable" (Theme Settings panel). `name` is the stable runtime key. */
export type ThemeSetting = {
    /** Stable runtime key — the variable's `variableName` (e.g. `_6Q0KV7VGGM`). */
    name: string;
    /** Human-facing label. */
    displayName: string;
    type: GlobalVariableType;
    /**
     * Concrete value, discriminated by `type`:
     * - TEXT/RICH_TEXT → string · NUMBER → number · BOOLEAN → boolean · COLOR → hex string.
     * - IMAGE → an IkasImage REFERENCE, e.g. `{ id: "theme-images/<uuid>" }`. It has NO
     *   `.url` field — resolve to a URL with `getDefaultSrc(value)` / `getSrc(value, size)`
     *   from `@ikas/bp-storefront`, never read `value.url`.
     * - BORDER/SHADOW → object, or `null` when unset.
     */
    value: any;
};
/** A single-value design token (color). `cssVar` resolves the live, scheme-aware value. */
export type DesignToken = {
    id: string;
    name: string;
    /** Resolved base/default value (e.g. a hex string), or null when unset. */
    resolved: string | null;
    /** CSS custom-property reference, e.g. `var(--primaryColor)`. */
    cssVar: string;
};
/** A typography token (text style). Apply `className` to an element to use it. */
export type TypographyToken = {
    id: string;
    name: string;
    /** Resolved CSS values keyed by camelCased CSS property (e.g. `fontSize`, `fontWeight`). */
    resolved: Record<string, string>;
    /** Class selector the editor emits for this text style, e.g. `_<id>`. */
    className: string;
    /** True when this is the theme's default/global text style (the editor's "Make Default Style"). */
    isDefault: boolean;
};
export type BreakpointToken = {
    id: string;
    name: string;
    width: number;
};
/** A resolved CSS style entry, e.g. { property: "animation-duration", value: "1.4s" }. */
export type StyleEntry = {
    property: string;
    value: string;
};
export type KeyframeToken = {
    id: string;
    name: string;
    type: string;
    /** CSS reference — the animation name / class the editor emits, e.g. `_<id>`. */
    ref: string;
    /**
     * Keyframe-level animation "settings" (the editor's Settings popover). These are CSS
     * animation/transition properties and DIFFER BY TYPE: a `keyframe` carries
     * animation-duration/-iteration-count/-play-state/-delay/-timing-function/-direction/
     * -fill-mode/-timeline/-range + transform-origin; a `transition` carries `transition`.
     * Both may carry backface-visibility. Empty when none are set.
     */
    settings?: StyleEntry[];
    /** Animation points; each point may carry its own resolved styles. */
    points?: {
        point: string;
        styles?: StyleEntry[];
    }[];
};
/**
 * A color SLOT — one entry of the top-level `getThemeColorSchemes().schemes` list. It is a
 * label only (`id` + display `name`); the actual colors for the slot live in each palette's
 * `colorsByScheme[id]`.
 */
export type ColorSchemeSlot = {
    id: string;
    name: string;
};
/**
 * A color palette (one entry of `getThemeColorSchemes().values`). Its colors live in
 * `colorsByScheme` — the top-level `schemes` list holds only slot id→name labels.
 */
export type ColorSchemeToken = {
    id: string;
    name: string;
    isDefault: boolean;
    /** Class selector to activate this scheme value, e.g. `_<id>`. */
    className: string;
    /**
     * This palette's colors, keyed by color-SLOT id (the ids in
     * `getThemeColorSchemes().schemes`). THIS — not the top-level `schemes` array — is
     * the source of truth for swatch colors; iterate it to render a palette. Prefer
     * `cssVar` for live, in-editor reactivity; `resolved` is a render-time snapshot.
     */
    colorsByScheme: Record<string, {
        resolved: string | null;
        cssVar: string;
    }>;
};
export type ThemeGlobals = {
    settings: Record<string, ThemeSetting>;
    colors: DesignToken[];
    typography: TypographyToken[];
    breakpoints: BreakpointToken[];
    keyframes: KeyframeToken[];
    colorSchemes: {
        schemes: ColorSchemeSlot[];
        values: ColorSchemeToken[];
    };
};
/**
 * Stamps a theme-token type as its RUNTIME view (what the `@ikas/bp-storefront` getters return).
 * `name` is authoring-only: it is non-unique (two design assets can ship the same one) and
 * non-stable (renaming must not break references), so matching a token by name is unsafe.
 * Identify one by its STABLE `id` instead — color → `cssVar` (`var(--<id>)`), typography &
 * keyframe → `className` / `ref` (`_<id>`), color-scheme slot → a `colorsByScheme` key. Need a
 * human-readable label? Read `list_theme_globals` (MCP/CLI) or the editor's Styles panel.
 *
 * `name` is REMOVED outright rather than re-added as a documented `@deprecated never`: that was
 * tried first and only yields a soft strikethrough, so `getThemeTypography().find(t => t.name ===
 * "…")` still compiled and agents wrote it anyway. A hard `Omit` makes it a compile error, and
 * `ikas-component build` runs `tsc --noEmit` and exits non-zero on it — so such a component cannot
 * be built or shipped at all.
 *
 * The full {@link ThemeGlobals} (with real names) is still what the config holds and what the
 * CLI/MCP `list-theme-globals` AUTHORING read returns — that is how an agent resolves "the token
 * named X" to its id. `name` is hidden only at these runtime getter return types.
 */
type RuntimeView<T> = Omit<T, "name">;
export type RuntimeDesignToken = RuntimeView<DesignToken>;
export type RuntimeTypographyToken = RuntimeView<TypographyToken>;
export type RuntimeBreakpointToken = RuntimeView<BreakpointToken>;
export type RuntimeKeyframeToken = RuntimeView<KeyframeToken>;
export type RuntimeColorSchemeToken = RuntimeView<ColorSchemeToken>;
export type RuntimeColorSchemeSlot = RuntimeView<ColorSchemeSlot>;
/**
 * Runtime view of {@link ThemeGlobals.colorSchemes} (returned by `getThemeColorSchemes`). The
 * slot list carries only `{ id }`: slot display LABELS (the slot `name`) are authoring-only —
 * read them via the CLI/MCP `list-theme-globals` or the editor, not at runtime. Render a palette
 * by iterating each value's `colorsByScheme`, keyed by slot id.
 */
export type RuntimeThemeColorSchemes = {
    schemes: RuntimeColorSchemeSlot[];
    values: RuntimeColorSchemeToken[];
};
export declare const EMPTY_THEME_GLOBALS: ThemeGlobals;
type StyleValueLike = {
    value?: any;
    patternValueId?: string;
    keyframeValueId?: string;
    colorSchemeId?: string;
};
type StyleConditionLike = {
    value?: StyleValueLike;
};
type ElementStyleLike = {
    property: string;
    value?: StyleValueLike | StyleConditionLike[];
};
type PatternValueLike = {
    id: string;
    name?: string;
    style?: ElementStyleLike;
};
type PatternElementLike = {
    id: string;
    name?: string;
    styles?: ElementStyleLike[];
    isDefault?: boolean;
};
type ColorSchemeLike = {
    id: string;
    name?: string;
};
type ColorSchemeValueColorLike = {
    colorSchemeId: string;
    style?: StyleValueLike;
};
type ColorSchemeValueLike = {
    id: string;
    name?: string;
    isDefault?: boolean;
    /** Set when this scheme belongs to an installed design asset; groups the default fallback. */
    designAssetId?: string;
    colors?: ColorSchemeValueColorLike[];
};
type BreakpointLike = {
    id: string;
    name?: string;
    width?: number;
};
type KeyframePointLike = {
    point: string;
    styles?: ElementStyleLike[];
};
type KeyframeLike = {
    id: string;
    name?: string;
    type?: string;
    styles?: ElementStyleLike[];
    points?: KeyframePointLike[];
};
type VariableLike = {
    id?: string;
    variableName?: string;
    displayName?: string;
    variableType?: string;
    defaultValue?: any;
    isGlobal?: boolean;
};
export type SerializableProject = {
    globalsBlueprint?: {
        module?: {
            variables?: VariableLike[];
        };
    };
    theme?: {
        breakpoints?: BreakpointLike[];
        keyframes?: KeyframeLike[];
        pattern?: {
            values?: PatternValueLike[];
            elements?: PatternElementLike[];
            colorSchemes?: ColorSchemeLike[];
            colorSchemeValues?: ColorSchemeValueLike[];
        };
    };
};
export declare const cssVarRef: (id: string, fallback?: string) => string;
export declare const rawClassRef: (id: string) => string;
/**
 * CSS function-style token a code component writes to reference a theme breakpoint's width.
 * Breakpoints can't ship as `var(--…)` because the CSS spec forbids `var()` in a media-query
 * condition — and a `var()` there fails SILENTLY (it parses as valid-looking CSS but the whole
 * query is dropped). So a code component writes a deliberately non-standard `bp(<breakpointId>)`
 * token inside its OWN `min-width` / `max-width` condition; it resolves to a concrete `<width>px`
 * at render time against the LIVE theme (see {@link resolveBreakpointMediaTokens}). The author
 * picks the direction, so there is no implicit boundary magic:
 *   `@media (max-width: bp(_mob))` -> `@media (max-width: 767px)`
 *   `@media (min-width: bp(_mob))` -> `@media (min-width: 767px)`
 * id-based, never a human name (the id is stable across renames). The id comes from
 * `list-theme-globals` / `getThemeBreakpoints()`.
 */
export declare const breakpointCssToken: (id: string) => string;
/**
 * Coerce a theme's breakpoint list into the `{ id, width }` shape {@link resolveBreakpointMediaTokens}
 * needs, defaulting a missing/non-numeric width to 0. Shared by both render sites so the coercion
 * rule lives in one place; the editor passes `breakpoints.map(b => b.toJSON())` (Yjs → plain) first.
 */
export declare const toResolverBreakpoints: (breakpoints: {
    id: string;
    width?: number | string;
}[]) => {
    id: string;
    width: number;
}[];
/**
 * Replace breakpoint width tokens (`bp(<id>)`) in a CSS string with the breakpoint's concrete
 * `<width>px`, using the given theme breakpoints. Pure text substitution — the single place
 * breakpoint resolution lives, called at every render-time CC-CSS composition site
 * (code-generator, editor canvas). Unknown ids are left untouched (the partner dependency
 * collector ships referenced breakpoints into the target theme, so a real token always resolves).
 * The `bp(<id>)` literal carries its own `)` boundary, so one id is never matched inside another.
 *
 * A `calc()` containing a bp token (e.g. the documented exclusive boundary
 * `calc(bp(<id>) + 1px)`, but any pure px arithmetic: `calc(bp(a) * 2 + 10px)`,
 * `calc(bp(a) - bp(b))`, `-webkit-calc(...)`, …) is folded to a single computed `<width>px`
 * literal, never emitted as `calc()`: csso — the code-generator's minifier for inline/base
 * page styles — silently drops a media block whose condition contains `calc()`, and older
 * browsers (e.g. Safari < 16.4) don't evaluate `calc()` in media conditions either.
 *
 * Folding limits (an out-of-limit calc degrades to plain token substitution, keeping its
 * `calc()` form — which csso will still drop from a media condition): bodies longer than
 * CALC_SCAN_LIMIT chars; an uppercase `CALC(` keyword (the scan is lowercase, matching every
 * compiled-CSS emitter); `calc(` inside a string/comment can confuse the plain-text scan.
 */
export declare function resolveBreakpointMediaTokens(css: string, breakpoints: {
    id: string;
    width: number;
}[]): string;
/**
 * True for system/reserved global variables (e.g. `__breakpointsVar__`) — internal
 * constructs that live in `module.variables` but are NOT user-facing theme settings.
 * Single source of truth for the `__name__` reserved-id convention; consumers (theme
 * serialization here, partner publish dependency collection) share it so a new
 * synthetic var is excluded everywhere at once.
 */
export declare const isReservedVariableId: (id?: string | null) => boolean;
/**
 * Build the {@link ThemeGlobals} payload from a project's theme. Pure and dependency-free
 * (works on plain JSON), so the same function serves SSR (`IProject`) and the editor canvas
 * (`YjsProject.toJSON()`).
 */
export declare function serializeThemeGlobals(project?: SerializableProject | null): ThemeGlobals;
export {};