@tenphi/tasty 0.0.0-snapshot.bbd10c7 → 0.0.0-snapshot.bbfcd75

package/dist/index-D9N9GV24.d.ts

@@ -0,0 +1,1947 @@
+import { Ft as CSSProperties$1, M as StyleResult, Mt as StyleDetails, X as Styles, Z as StylesInterface, _ as KeyframesSteps, a as FontFaceInput, ct as ResolvedStyleValue, d as InjectOptions, f as InjectResult, ft as StyleHandlerResult, g as KeyframesResult, gt as StyleValueStateMap, ht as StyleValue, i as FontFaceDescriptors, l as GCOptions, lt as StyleHandler, mt as StylePropValue, n as CounterStyleDescriptors, o as FunctionDefinition, rt as CSSMap, st as RawStyleHandler, t as CacheMetrics, u as GlobalInjectResult, w as StyleInjectorConfig, y as PropertyOptions } from "./types-jKZNpias.js";
+import { m as TastyPluginFactory, x as StyleInjector } from "./config-DWL1ZYue.js";
+import { t as ServerStyleCollector } from "./collector-hl5KNH7k.js";
+import { AllHTMLAttributes, CSSProperties, ComponentType, ElementType, ForwardRefExoticComponent, JSX, PropsWithoutRef, ReactNode, RefAttributes } from "react";
+
+//#region src/utils/name-prefix.d.ts
+/**
+ * Name prefix utilities for generated identifiers.
+ *
+ * Tasty generates three kinds of identifiers from content hashes:
+ * - class names (used in DOM `class` attribute)
+ * - keyframe names (used in CSS `animation`)
+ * - counter-style names (used in CSS `list-style-type`)
+ *
+ * All three derive from a single configurable prefix so that an app
+ * can namespace every identifier under one string. Discriminator letters
+ * (`k`, `c`) keep the three kinds visually distinct in devtools — they
+ * are not required for correctness (CSS keeps these in separate
+ * namespaces), only for readability.
+ *
+ * The runtime / SSR / RSC paths must agree on the prefix; otherwise the
+ * client-side hash for a given style will not match the server-rendered
+ * class and hydration breaks. The zero-runtime build path uses a
+ * different default (`'ts'`) so its classes can't collide with runtime
+ * (`'t'`) classes when both are loaded on the same page.
+ */
+/** Default prefix used by the runtime / SSR / RSC paths. */
+declare const DEFAULT_NAME_PREFIX = "t";
+/** Default prefix used by the zero-runtime (`tastyStatic`) build path. */
+declare const DEFAULT_ZERO_NAME_PREFIX = "ts";
+//#endregion
+//#region src/styles/list.d.ts
+declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition"];
+declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "blockMargin", "inlineMargin", "inset", "blockInset", "inlineInset", "position", "scrollMargin", "blockScrollMargin", "inlineScrollMargin", "scrollPadding", "blockScrollPadding", "inlineScrollPadding"];
+declare const BLOCK_INNER_STYLES: readonly ["padding", "blockPadding", "inlinePadding", "overflow", "scrollbar", "textAlign"];
+declare const BLOCK_OUTER_STYLES: readonly ["border", "blockBorder", "inlineBorder", "radius", "shadow", "outline"];
+declare const BLOCK_STYLES: readonly ["padding", "blockPadding", "inlinePadding", "overflow", "scrollbar", "textAlign", "border", "blockBorder", "inlineBorder", "radius", "shadow", "outline"];
+declare const COLOR_STYLES: readonly ["color", "fill", "fade", "image"];
+declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
+declare const DIMENSION_STYLES: readonly ["width", "height", "blockSize", "inlineSize", "flexBasis", "flexGrow", "flexShrink", "flex"];
+declare const FLOW_STYLES: readonly ["flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "width", "height", "blockSize", "inlineSize", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "blockMargin", "inlineMargin", "inset", "blockInset", "inlineInset", "position", "scrollMargin", "blockScrollMargin", "inlineScrollMargin", "scrollPadding", "blockScrollPadding", "inlineScrollPadding", "padding", "blockPadding", "inlinePadding", "overflow", "scrollbar", "textAlign", "border", "blockBorder", "inlineBorder", "radius", "shadow", "outline", "flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "blockMargin", "inlineMargin", "inset", "blockInset", "inlineInset", "position", "scrollMargin", "blockScrollMargin", "inlineScrollMargin", "scrollPadding", "blockScrollPadding", "inlineScrollPadding", "width", "height", "blockSize", "inlineSize", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "blockBorder", "inlineBorder", "radius", "shadow", "outline"];
+declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "padding", "blockPadding", "inlinePadding", "overflow", "scrollbar", "textAlign", "flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+//#endregion
+//#region src/types.d.ts
+/**
+ * Extensible interface for theme names.
+ * Augment this interface to register project-specific theme names for autocomplete.
+ *
+ * @example
+ * ```typescript
+ * declare module '@tenphi/tasty' {
+ *   interface TastyThemeNames {
+ *     danger: true;
+ *     success: true;
+ *   }
+ * }
+ * ```
+ */
+interface TastyThemeNames {}
+type ThemeNameKey = Extract<keyof TastyThemeNames, string>;
+type ThemeName = [ThemeNameKey] extends [never] ? string : ThemeNameKey;
+/**
+ * Extensible interface for custom props added via `configure({ propHandlers })`.
+ * Augment it to type those props on every tasty component.
+ *
+ * @example
+ * ```typescript
+ * declare module '@tenphi/tasty' {
+ *   interface TastyCustomProps {
+ *     glaze: 'soft' | 'strong' | { tone: string; intensity?: number };
+ *   }
+ * }
+ * ```
+ */
+interface TastyCustomProps {}
+/**
+ * Extensible interface for style names promoted via
+ * `configure({ baseStyleProps })`. Set each name to `true`; the prop is then typed
+ * exactly like the style it names.
+ *
+ * @example
+ * ```typescript
+ * declare module '@tenphi/tasty' {
+ *   interface TastyBaseStylePropNames {
+ *     radius: true;
+ *     shadow: true;
+ *   }
+ * }
+ * ```
+ */
+interface TastyBaseStylePropNames {}
+/**
+ * Props contributed by `configure({ baseStyleProps })`, each typed like the style
+ * it names. Intersecting with `keyof StylesInterface` makes a name that isn't a
+ * real style inert rather than `never`-typed.
+ */
+type ExtraBaseStyleProps = { [key in keyof TastyBaseStylePropNames & keyof StylesInterface]?: StylePropValue<StylesInterface[key]> };
+/** Allowed mod value types */
+type ModValue = boolean | string | number | undefined | null;
+/**
+ * Type for element modifiers (mods prop).
+ * Can be used as a generic to define known modifiers with autocomplete:
+ * @example
+ * type ButtonMods = Mods<{
+ *   loading?: boolean;
+ *   selected?: boolean;
+ * }>;
+ */
+type Mods<T extends Record<string, ModValue> = Record<string, ModValue>> = T & Record<string, ModValue>;
+/**
+ * Token value: string or number (processed), boolean for special handling, undefined/null (skipped).
+ * For color tokens (#name), boolean `true` is converted to `transparent`.
+ * For non-color tokens ($name), boolean `true` results in an empty string value.
+ * Boolean `false` results in no CSS output (token is skipped).
+ */
+type TokenValue = string | number | boolean | undefined | null;
+/**
+ * Tokens definition for inline CSS custom properties.
+ * - `$name` keys become `--name` CSS properties
+ * - `#name` keys become `--name-color` CSS properties
+ */
+type Tokens = Record<`$${string}` | `#${string}`, TokenValue>;
+type Caps = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+interface BasePropsWithoutChildren<K extends TagName = TagName> extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
+  /** The HTML tag or React component to render as */
+  as?: K | ComponentType<any>;
+  /** QA ID for e2e testing. An alias for `data-qa` attribute. */
+  qa?: string;
+  /** QA value for e2e testing. An alias for `data-qaval` attribute. */
+  qaVal?: string | number;
+  /** Inner element name */
+  element?: `${Caps}${string}`;
+  /** The style map */
+  styles?: Styles;
+  /** The list of element modifiers **/
+  mods?: Mods;
+  /** Whether the element is hidden (`hidden` attribute is set) */
+  isHidden?: boolean;
+  /** Whether the element is disabled (`disabled` attribute is set) */
+  isDisabled?: boolean;
+  /** Whether the element is checked (`checked` attribute is set) */
+  isChecked?: boolean;
+  /** The CSS style map */
+  style?: CSSProperties$1 | (CSSProperties$1 & Record<string, string | number | null | undefined>);
+  /** User-defined theme for the element. Mapped to `data-theme` attribute. Augment `TastyThemeNames` to register project-specific themes for autocomplete. */
+  theme?: ThemeName | (string & {});
+  /** CSS custom property tokens rendered as inline styles */
+  tokens?: Tokens;
+}
+interface BaseProps<K extends TagName = TagName> extends BasePropsWithoutChildren<K>, Pick<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'children'> {}
+interface AllBaseProps<K extends TagName = TagName> extends BaseProps<K>, Omit<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'style' | 'disabled' | 'hidden' | 'css' | 'content' | 'translate' | 'as' | 'form' | 'bgcolor' | 'background' | 'align' | 'border' | 'color' | 'height' | 'size' | 'width' | 'prefix'> {}
+type BaseStyleProps = Pick<Styles, (typeof BASE_STYLES)[number]>;
+type PositionStyleProps = Pick<Styles, (typeof POSITION_STYLES)[number]>;
+type BlockStyleProps = Pick<Styles, (typeof BLOCK_STYLES)[number]>;
+type BlockInnerStyleProps = Pick<Styles, (typeof BLOCK_INNER_STYLES)[number]>;
+type BlockOuterStyleProps = Pick<Styles, (typeof BLOCK_OUTER_STYLES)[number]>;
+type ColorStyleProps = Pick<Styles, (typeof COLOR_STYLES)[number]>;
+type TextStyleProps = Pick<Styles, (typeof TEXT_STYLES)[number]>;
+type DimensionStyleProps = Pick<Styles, (typeof DIMENSION_STYLES)[number]>;
+type FlowStyleProps = Pick<Styles, (typeof FLOW_STYLES)[number]>;
+type ContainerStyleProps = Pick<Styles, (typeof CONTAINER_STYLES)[number]>;
+type OuterStyleProps = Pick<Styles, (typeof OUTER_STYLES)[number]>;
+type InnerStyleProps = Pick<Styles, (typeof INNER_STYLES)[number]>;
+interface ShortGridStyles {
+  template?: Styles['gridTemplate'];
+  columns?: Styles['gridColumns'];
+  rows?: Styles['gridRows'];
+  areas?: Styles['gridAreas'];
+}
+type TagName = keyof HTMLElementTagNameMap;
+/**
+ * Configuration type for tasty.config.ts files.
+ * Used by the Tasty VSCode extension for validation and autocomplete.
+ *
+ * @example
+ * ```typescript
+ * import type { TastyExtensionConfig } from '@tenphi/tasty';
+ *
+ * const config: TastyExtensionConfig = {
+ *   tokens: ['#primary', '#danger', '$spacing'],
+ *   units: ['x', 'r', 'bw'],
+ *   states: ['@mobile', '@tablet', '@dark'],
+ *   presets: ['h1', 'h2', 't1', 't2'],
+ * };
+ *
+ * export default config;
+ * ```
+ */
+interface TastyExtensionConfig {
+  /**
+   * Extend another config file. Path is relative to this config file.
+   * The extended config is merged first, then this config's values are added.
+   * @example '../tasty.config.ts'
+   */
+  extends?: string;
+  /**
+   * Valid token names for validation and autocomplete.
+   * Use # prefix for colors, $ prefix for custom properties.
+   * Set to `false` to disable token validation (overrides parent).
+   * @example ['#primary', '#danger', '$spacing', '$gap']
+   */
+  tokens?: false | string[];
+  /**
+   * Valid custom unit names.
+   * Set to `false` to disable unit validation (overrides parent).
+   * @example ['x', 'r', 'bw', 'cols']
+   */
+  units?: false | string[];
+  /**
+   * Valid custom function names.
+   * Set to `false` to disable function validation (overrides parent).
+   * @example ['clamp', 'double']
+   */
+  functions?: false | string[];
+  /**
+   * State alias names for autocomplete.
+   * Must start with @ prefix.
+   * @example ['@mobile', '@tablet', '@dark']
+   */
+  states?: string[];
+  /**
+   * Valid preset names for the `preset` style property.
+   * Tasty has no built-in presets - they are project-specific.
+   * @example ['h1', 'h2', 'h3', 't1', 't2', 't3', 'tag']
+   */
+  presets?: string[];
+  /**
+   * Custom style property names added via configure({ handlers }).
+   * Suppresses "unknown property" warnings for these names.
+   * @example ['myGradient', 'customLayout', 'brandBorder']
+   */
+  styles?: string[];
+  /**
+   * Descriptions for presets, shown on hover in the extension.
+   * Maps preset names to human-readable descriptions.
+   * @example { h1: 'Heading 1 (36px/44px, semibold)', t1: 'Text large (18px/24px)' }
+   */
+  presetDescriptions?: Record<string, string>;
+  /**
+   * Descriptions for state aliases, shown on hover in the extension.
+   * Maps state names to human-readable descriptions.
+   * @example { '@mobile': 'Mobile viewport (width < 768px)' }
+   */
+  stateDescriptions?: Record<string, string>;
+}
+//#endregion
+//#region src/tasty.d.ts
+type StyleList = readonly (keyof { [key in keyof StylesInterface]: StylesInterface[key] })[];
+/** Type descriptor for a single mod prop: a JS constructor or an enum array. */
+type ModPropDef = BooleanConstructor | StringConstructor | NumberConstructor | readonly string[];
+/** Array form: list of mod key names (types default to ModValue). */
+type ModPropsList = readonly string[];
+/** Object form: map of mod key names to type descriptors. */
+type ModPropsMap = Readonly<Record<string, ModPropDef>>;
+/** Either array or object form accepted by `modProps` option. */
+type ModPropsInput = ModPropsList | ModPropsMap;
+/** Resolve a single ModPropDef to its TypeScript type. */
+type ResolveModPropDef<T> = T extends BooleanConstructor ? boolean : T extends StringConstructor ? string : T extends NumberConstructor ? number : T extends readonly (infer U)[] ? U : ModValue;
+/** Resolve an entire `modProps` definition to the component prop types it adds. */
+type ResolveModProps<M extends ModPropsInput> = M extends readonly (infer K)[] ? Partial<Record<K & string, ModValue>> : M extends Record<string, ModPropDef> ? { [key in keyof M & string]?: ResolveModPropDef<M[key]> } : {};
+/** A token key with `$` or `#` prefix. */
+type TokenPropKey = `$${string}` | `#${string}`;
+/** Array form: list of prop names. Names ending in `Color` map to `#` color tokens. */
+type TokenPropsList = readonly string[];
+/** Object form: prop name -> token key with explicit `$`/`#` prefix. */
+type TokenPropsMap = Readonly<Record<string, TokenPropKey>>;
+/** Either array or object form accepted by `tokenProps` option. */
+type TokenPropsInput = TokenPropsList | TokenPropsMap;
+/** Resolve a `tokenProps` definition to the component prop types it adds. */
+type ResolveTokenProps<TP extends TokenPropsInput> = TP extends readonly (infer K)[] ? Partial<Record<K & string, TokenValue>> : TP extends Record<string, TokenPropKey> ? Partial<Record<keyof TP & string, TokenValue>> : {};
+type AnyProps = Record<string, any>;
+type PropsWithStyles = {
+  styles?: Styles;
+} & Omit<Record<string, any>, 'styles'>;
+type VariantMap = Record<string, Styles>;
+interface WithVariant<V extends VariantMap> {
+  variant?: keyof V;
+}
+/**
+ * Definition for a sub-element. Can be either:
+ * - A tag name string (e.g., 'div', 'span')
+ * - An object with configuration options
+ */
+type SubElementDefinition<Tag extends keyof JSX.IntrinsicElements = 'div'> = Tag | {
+  as?: Tag;
+  qa?: string;
+  qaVal?: string | number;
+};
+/**
+ * Map of sub-element definitions.
+ * Keys become the sub-component names (e.g., { Icon: 'span' } -> Component.Icon)
+ */
+type ElementsDefinition = Record<string, SubElementDefinition<keyof JSX.IntrinsicElements>>;
+/**
+ * Resolves the tag from a SubElementDefinition
+ */
+type ResolveElementTag<T extends SubElementDefinition<any>> = T extends string ? T : T extends {
+  as?: infer Tag;
+} ? Tag extends keyof JSX.IntrinsicElements ? Tag : 'div' : 'div';
+/**
+ * Props for sub-element components.
+ * Combines HTML attributes with tasty-specific props (qa, qaVal, mods, tokens, isDisabled, etc.)
+ */
+type SubElementProps<Tag extends keyof JSX.IntrinsicElements = 'div'> = Omit<JSX.IntrinsicElements[Tag], 'ref' | 'color' | 'content' | 'translate'> & {
+  qa?: string;
+  qaVal?: string | number;
+  mods?: Mods;
+  tokens?: Tokens;
+  isDisabled?: boolean;
+  isHidden?: boolean;
+  isChecked?: boolean;
+};
+/**
+ * Generates the sub-element component types from an ElementsDefinition
+ */
+type SubElementComponents<E extends ElementsDefinition> = { [K in keyof E]: ForwardRefExoticComponent<PropsWithoutRef<SubElementProps<ResolveElementTag<E[K]>>> & RefAttributes<ResolveElementTag<E[K]> extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[ResolveElementTag<E[K]>] : Element$1>> };
+/**
+ * Base type containing common properties shared between TastyProps and TastyElementOptions.
+ * Separated to avoid code duplication while allowing different type constraints.
+ */
+type TastyBaseProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = {
+  /** Default styles of the element. */styles?: Styles; /** The list of styles that can be provided by props */
+  styleProps?: K; /** Modifier keys exposed as top-level component props (array or typed object form). */
+  modProps?: M; /** Token keys exposed as top-level component props (array or typed object form). */
+  tokenProps?: TP;
+  element?: BaseProps['element'];
+  variants?: V; /** Default tokens for inline CSS custom properties */
+  tokens?: Tokens; /** Sub-element definitions for compound components */
+  elements?: E;
+} & Pick<BaseProps, 'qa' | 'qaVal'> & WithVariant<V>;
+type TastyProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, DefaultProps = AnyProps, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & {
+  /** The tag name of the element or a React component. */as?: string | ComponentType<any>;
+} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'modProps' | 'tokenProps' | 'tokens'>>;
+/**
+ * Resolves the props of a polymorphic `as` value (intrinsic tag or component).
+ * - For intrinsic tags (`'div'`, `'button'`, ...): returns `JSX.IntrinsicElements[Tag]`.
+ * - For React component types: returns the component's own props.
+ * - Falls back to an empty record for anything else.
+ */
+type ResolveAsProps<AsType extends ElementType> = AsType extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[AsType] : AsType extends ComponentType<infer P> ? P : Record<string, never>;
+/**
+ * TastyElementOptions is used for the element-creation overload of tasty().
+ * It includes an `AsType` generic that allows TypeScript to infer the correct
+ * element type from the `as` prop — both for intrinsic tags and for React
+ * components (so the wrapped component's prop API is preserved).
+ *
+ * Note: Uses a separate index signature with `unknown` instead of an `any`
+ * record to ensure strict type checking for styles.
+ */
+type TastyElementOptions<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, AsType extends ElementType = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & {
+  /** The tag name of the element or a React component. */as?: AsType;
+} & Record<string, unknown>;
+type AllBasePropsWithMods<K extends StyleList, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = AllBaseProps & { [key in K[number]]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]> } & BaseStyleProps & ExtraBaseStyleProps & Partial<TastyCustomProps> & ResolveModProps<M> & ResolveTokenProps<TP>;
+/**
+ * Keys from BasePropsWithoutChildren that should be omitted from HTML attributes.
+ * This excludes event handlers so they can be properly typed from JSX.IntrinsicElements.
+ */
+type TastySpecificKeys = 'as' | 'qa' | 'qaVal' | 'element' | 'styles' | 'mods' | 'isHidden' | 'isDisabled' | 'isChecked' | 'style' | 'theme' | 'tokens' | 'ref' | 'color';
+/** Extract prop key names from a ModPropsInput (array elements or object keys). */
+type ModPropsKeys<M extends ModPropsInput> = M extends readonly (infer K)[] ? K & string : keyof M & string;
+/** Extract prop key names from a TokenPropsInput (array elements or object keys). */
+type TokenPropsKeys<TP extends TokenPropsInput> = TP extends readonly (infer K)[] ? K & string : keyof TP & string;
+/**
+ * Props type for tasty elements that combines:
+ * - AllBasePropsWithMods for style props with strict tokens type
+ * - HTML attributes for flexibility (properly typed based on `as`)
+ * - Variant support
+ *
+ * AllBasePropsWithMods carries generic AllHTMLAttributes which can conflict
+ * with element-specific types (e.g. `src` is `string` in AllHTMLAttributes but
+ * `string | Blob` in ImgHTMLAttributes, or the custom props on a third-party
+ * component like Next.js `Link`). To avoid intersection-narrowing, we Omit
+ * element-specific keys from AllBasePropsWithMods (keeping TastySpecificKeys,
+ * style props, mod props, and token props) and let the resolved `as` props
+ * supply the authoritative attribute types. The `AllHTMLAttributes<HTMLElement>`
+ * baseline is preserved so generic HTML attributes still work even when `as`
+ * is a component type with a narrower prop API.
+ */
+type TastyElementProps<K extends StyleList, V extends VariantMap, AsType extends ElementType = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = Omit<AllBasePropsWithMods<K, M, TP>, Exclude<keyof ResolveAsProps<AsType>, TastySpecificKeys | keyof TastyCustomProps | keyof ExtraBaseStyleProps | K[number] | ModPropsKeys<M> | TokenPropsKeys<TP>>> & WithVariant<V> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof ResolveAsProps<AsType>> & ResolveAsProps<AsType>, TastySpecificKeys | keyof TastyCustomProps | keyof ExtraBaseStyleProps | K[number] | ModPropsKeys<M> | TokenPropsKeys<TP>>;
+type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps extends Partial<Props>> = keyof DefaultProps extends never ? Props : { [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key] } & { [key in keyof Omit<Props, keyof DefaultProps>]: Props[key] };
+/**
+ * The component type returned by the `tasty(options)` element-factory overload.
+ *
+ * It's a regular React forward-ref component whose props are typed from the
+ * factory-time `as` value. Polymorphism is at factory time: each call to
+ * `tasty({ as: X })` produces a component whose prop API includes `X`'s own
+ * props (so `tasty({ as: NextLink })` exposes `href`, `replace`, `prefetch`,
+ * etc.) alongside the Tasty-specific props (`mods`, `tokens`, `styleProps`,
+ * `modProps`, `tokenProps`).
+ *
+ * Note: a render-time `<X as={SomeComponent} />` does not re-infer props from
+ * `SomeComponent`; create another `tasty({ as: SomeComponent })` for that.
+ */
+type TastyPolymorphicComponent<DefaultAs extends ElementType, K extends StyleList, V extends VariantMap, M extends ModPropsInput, TP extends TokenPropsInput> = ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, DefaultAs, M, TP>> & RefAttributes<unknown>>;
+declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, AsType extends ElementType = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]>(options: TastyElementOptions<K, V, E, AsType, M, TP>, secondArg?: never): TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElementComponents<E>;
+declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>, K extends StyleList = readonly never[], V extends VariantMap = VariantMap, E extends ElementsDefinition = Record<string, never>, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]>(Component: ComponentType<Props>, options?: TastyProps<K, V, E, Props, M, TP>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
+declare const Element$1: TastyPolymorphicComponent<"div", StyleList, VariantMap, readonly never[], readonly never[]> & SubElementComponents<Record<string, never>>;
+//#endregion
+//#region src/hooks/useStyles.d.ts
+interface UseStylesResult {
+  /**
+   * Generated className(s) to apply to the element.
+   * Can be empty string if no styles are provided.
+   * With chunking enabled, may contain multiple space-separated class names.
+   */
+  className: string;
+}
+/**
+ * Hook to generate CSS classes from Tasty styles.
+ * Thin wrapper around `computeStyles()` that adds React context-based
+ * SSR collector discovery for backward compatibility with TastyRegistry.
+ *
+ * For hook-free usage (e.g. in server components), use `computeStyles()` directly.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { className } = useStyles({
+ *     padding: '2x',
+ *     fill: '#purple',
+ *     radius: '1r',
+ *   });
+ *
+ *   return <div className={className}>Styled content</div>;
+ * }
+ * ```
+ */
+declare function useStyles(styles: Styles | undefined, options?: {
+  root?: Document | ShadowRoot;
+}): UseStylesResult;
+//#endregion
+//#region src/hooks/useGlobalStyles.d.ts
+interface UseGlobalStylesOptions {
+  /**
+   * Stable identifier for update tracking (client-only). When provided,
+   * changing the styles will dispose the previous injection and inject the
+   * new one. Without an id, the selector is used as the slot key.
+   * In RSC mode, renders are single-pass so update tracking does not apply.
+   */
+  id?: string;
+  /** Shadow root or document to inject into (client only). */
+  root?: Document | ShadowRoot;
+}
+/**
+ * Inject global styles for a given selector.
+ * Useful for styling elements by selector without generating classNames.
+ *
+ * SSR-aware: when a ServerStyleCollector is available, CSS is collected
+ * during the render phase instead of being injected into the DOM.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * Injected styles are permanent — they are not cleaned up on component unmount.
+ * Use the `id` option for update tracking when styles change over the
+ * component lifecycle.
+ *
+ * Update tracking is per-slot and per-root: a slot (`id`, or the selector when
+ * no `id` is given) holds exactly one injection per `root`. Changing the styles
+ * replaces it; rendering styles that produce no CSS clears it.
+ *
+ * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
+ * @param styles - Tasty styles object
+ * @param options - Optional settings including `id` for update tracking
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   useGlobalStyles('.card', {
+ *     padding: '2x',
+ *     radius: '1r',
+ *     fill: '#white',
+ *   });
+ *
+ *   return <div className="card">Content</div>;
+ * }
+ * ```
+ */
+declare function useGlobalStyles(selector: string, styles?: Styles, options?: UseGlobalStylesOptions): void;
+//#endregion
+//#region src/hooks/useRawCSS.d.ts
+interface UseRawCSSOptions {
+  /**
+   * Shadow root or document to inject into. Update tracking is per-root: the
+   * same id in two roots holds a separate injection in each.
+   */
+  root?: Document | ShadowRoot;
+  /**
+   * Stable identifier for update tracking (client-only). When provided,
+   * changing the CSS content will dispose the previous injection and inject
+   * the new one. Without an id, deduplication is purely content-based (same
+   * CSS is injected only once). In RSC mode, renders are single-pass so
+   * update tracking does not apply.
+   */
+  id?: string;
+}
+declare function useRawCSS(css: string, options?: UseRawCSSOptions): void;
+declare function useRawCSS(factory: () => string, deps: readonly unknown[], options?: UseRawCSSOptions): void;
+//#endregion
+//#region src/hooks/useKeyframes.d.ts
+interface UseKeyframesOptions {
+  name?: string;
+  root?: Document | ShadowRoot;
+}
+/**
+ * Inject CSS @keyframes and return the generated animation name.
+ * Deduplicates by content — identical steps always return the same name.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * Passing `name` claims a slot owned by that one call site (like `useRawCSS`'s
+ * `id`): when its steps change, the previous injection is disposed and the name
+ * is reused, so the rules don't accumulate. Anonymous keyframes are permanent
+ * and shared by content.
+ *
+ * @example Basic usage - steps object is the dependency
+ * ```tsx
+ * function MyComponent() {
+ *   const bounce = useKeyframes({
+ *     '0%': { transform: 'scale(1)' },
+ *     '50%': { transform: 'scale(1.1)' },
+ *     '100%': { transform: 'scale(1)' },
+ *   });
+ *
+ *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;
+ * }
+ * ```
+ *
+ * @example With custom name
+ * ```tsx
+ * function MyComponent() {
+ *   const fadeIn = useKeyframes(
+ *     { from: { opacity: 0 }, to: { opacity: 1 } },
+ *     { name: 'fadeIn' }
+ *   );
+ *
+ *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;
+ * }
+ * ```
+ *
+ * @example Factory function with dependencies
+ * ```tsx
+ * function MyComponent({ scale }: { scale: number }) {
+ *   const pulse = useKeyframes(
+ *     () => ({
+ *       '0%': { transform: 'scale(1)' },
+ *       '100%': { transform: `scale(${scale})` },
+ *     }),
+ *     [scale]
+ *   );
+ *
+ *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;
+ * }
+ * ```
+ */
+declare function useKeyframes(steps: KeyframesSteps, options?: UseKeyframesOptions): string;
+declare function useKeyframes(factory: () => KeyframesSteps, deps: readonly unknown[], options?: UseKeyframesOptions): string;
+//#endregion
+//#region src/hooks/useProperty.d.ts
+/**
+ * Options for {@link useProperty}. Extends the shared {@link PropertyOptions}
+ * (which is `PropertyDefinition` plus an optional injection `root`).
+ */
+type UsePropertyOptions = PropertyOptions;
+/**
+ * Register a CSS @property custom property.
+ * This enables advanced features like animating custom properties.
+ *
+ * Note: @property rules are global and persistent once defined.
+ * The function ensures the property is only registered once per root.
+ *
+ * Accepts tasty token syntax for the property name:
+ * - `$name` → defines `--name`
+ * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
+ * - `--name` → defines `--name` (legacy format)
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * @param name - The property token ($name, #name) or CSS property name (--name)
+ * @param options - Property configuration
+ *
+ * @example Basic property with token syntax
+ * ```tsx
+ * function Spinner() {
+ *   useProperty('$rotation', {
+ *     syntax: '<angle>',
+ *     inherits: false,
+ *     initialValue: '0deg',
+ *   });
+ *
+ *   return <div className="spinner" />;
+ * }
+ * ```
+ *
+ * @example Color property with token syntax (auto-sets syntax)
+ * ```tsx
+ * function MyComponent() {
+ *   useProperty('#theme', {
+ *     initialValue: 'red', // syntax: '<color>' is auto-set
+ *   });
+ *
+ *   // Now --theme-color can be animated with CSS transitions
+ *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
+ * }
+ * ```
+ *
+ * @example Legacy format (still supported)
+ * ```tsx
+ * function ResizableBox() {
+ *   useProperty('--box-size', {
+ *     syntax: '<length>',
+ *     initialValue: '100px',
+ *   });
+ *
+ *   return <div style={{ width: 'var(--box-size)' }} />;
+ * }
+ * ```
+ */
+declare function useProperty(name: string, options?: UsePropertyOptions): void;
+//#endregion
+//#region src/hooks/useFontFace.d.ts
+interface UseFontFaceOptions {
+  root?: Document | ShadowRoot;
+}
+/**
+ * Inject CSS @font-face rules.
+ * Permanent — no cleanup on unmount. Deduplicates by content hash.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * @param family - The font-family name
+ * @param input - Single descriptor object or array of descriptors (for multiple weights/styles)
+ * @param options - Optional settings (e.g. Shadow DOM root)
+ *
+ * @example Single weight
+ * ```tsx
+ * function App() {
+ *   useFontFace('Brand Sans', {
+ *     src: 'url("/fonts/brand-sans.woff2") format("woff2")',
+ *     fontWeight: '400 700',
+ *     fontDisplay: 'swap',
+ *   });
+ *
+ *   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+ * }
+ * ```
+ *
+ * @example Multiple weights
+ * ```tsx
+ * function App() {
+ *   useFontFace('Brand Sans', [
+ *     { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
+ *     { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
+ *   ]);
+ *
+ *   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+ * }
+ * ```
+ */
+declare function useFontFace(family: string, input: FontFaceInput, options?: UseFontFaceOptions): void;
+//#endregion
+//#region src/hooks/useCounterStyle.d.ts
+interface UseCounterStyleOptions {
+  name?: string;
+  root?: Document | ShadowRoot;
+}
+/**
+ * Inject a CSS @counter-style rule and return the generated name.
+ * Permanent — no cleanup on unmount. Deduplicates by name.
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function EmojiList() {
+ *   const styleName = useCounterStyle({
+ *     system: 'cyclic',
+ *     symbols: '"👍"',
+ *     suffix: '" "',
+ *   }, { name: 'thumbs' });
+ *
+ *   return (
+ *     <ol style={{ listStyleType: styleName }}>
+ *       <li>First</li>
+ *       <li>Second</li>
+ *     </ol>
+ *   );
+ * }
+ * ```
+ *
+ */
+declare function useCounterStyle(descriptors: CounterStyleDescriptors, options?: UseCounterStyleOptions): string;
+//#endregion
+//#region src/hooks/useFunction.d.ts
+interface UseFunctionOptions {
+  /** Shadow root or document to inject into. */
+  root?: Document | ShadowRoot;
+}
+/**
+ * Register a CSS @function (custom function).
+ *
+ * @function rules are global and persistent once defined. The hook ensures the
+ * function is only registered once per root (deduplicated by function name).
+ *
+ * Accepts tasty token syntax for the function name:
+ * - `$$name` → defines `--name` (matches the call site `$$name(...)`)
+ * - `$name` / `--name` → also accepted
+ *
+ * Works in all environments: client, SSR with collector, and React Server Components.
+ *
+ * @param name - The function name token (`$$name`, `$name`, or `--name`)
+ * @param definition - Function definition (args, returns, result, local vars)
+ *
+ * Call the function through the Tasty DSL, not a raw `style` prop: an inline
+ * `style` value reaches the browser unparsed, so the `$$name(...)` sugar is never
+ * expanded and `polyfills.functions` cannot rewrite it either.
+ *
+ * @example
+ * ```tsx
+ * const Box = tasty({ styles: { marginTop: '$$negative(10px)' } });
+ *
+ * function Layout() {
+ *   useFunction('$$negative', { args: ['$value'], result: '(-1 * $value)' });
+ *   return <Box />;
+ * }
+ * ```
+ */
+declare function useFunction(name: string, definition: FunctionDefinition, options?: UseFunctionOptions): void;
+//#endregion
+//#region src/batch-provider.d.ts
+interface TastyBatchProviderProps {
+  children?: ReactNode;
+}
+/**
+ * Opens a *batch window* for the commit it renders in, so `batchInjection`
+ * can defer stylesheet writes without ever letting a layout effect measure an
+ * unstyled element.
+ *
+ * Every `insertRule()` on a live sheet invalidates style for that sheet's
+ * scope. When components inject during React's render phase while others read
+ * layout in the same pass, the two interleave and the browser recalculates
+ * style between every injection. Batching collapses that into one invalidation
+ * per flush — but only if the flush happens before anything can measure.
+ *
+ * ```
+ * provider renders          -> window OPEN
+ *   children render         -> injections queued
+ * provider insertionEffect  -> FLUSH, window CLOSED
+ * layout effects run        -> rules are in the sheet
+ * ```
+ *
+ * `useInsertionEffect` runs in React's mutation phase, after every render in
+ * the commit and before any `useLayoutEffect` — which is exactly why React
+ * added it for CSS-in-JS libraries. Effects fire child-first, so this
+ * provider's runs after every descendant's and still before all layout
+ * effects.
+ *
+ * A commit that does not re-render this provider gets no window, and those
+ * injections are written synchronously instead. That is the point: turning
+ * `batchInjection: true` on can only ever make injection cheaper, never make a
+ * measurement wrong. It also means batching applies to commits this provider
+ * takes part in, so mount it as high in the tree as you can.
+ *
+ * Requires `configure({ batchInjection: true })`; without it this component
+ * only renders its children. `batchInjection: 'always'` does not need the
+ * provider at all — see that option's docs for the trade-off it accepts.
+ *
+ * @example
+ * ```tsx
+ * configure({ batchInjection: true });
+ *
+ * createRoot(el).render(
+ *   <TastyBatchProvider>
+ *     <App />
+ *   </TastyBatchProvider>,
+ * );
+ * ```
+ */
+declare function TastyBatchProvider({
+  children
+}: TastyBatchProviderProps): ReactNode;
+//#endregion
+//#region src/utils/get-display-name.d.ts
+declare function getDisplayName<T>(Component: ElementType<T>, fallbackName?: string): string;
+//#endregion
+//#region src/index.d.ts
+declare module './utils/css-types' {
+  interface CSSProperties extends CSSProperties {}
+}
+//#endregion
+//#region src/plugins/okhsl-plugin.d.ts
+/**
+ * The okhsl function handler for tasty parser.
+ * Receives parsed style groups and returns an RGB color string.
+ */
+declare const okhslFunction: (groups: StyleDetails[]) => string;
+/**
+ * OKHSL Plugin for Tasty.
+ *
+ * Adds support for the `okhsl()` color function in tasty styles.
+ *
+ * @example
+ * ```ts
+ * import { configure } from '@tenphi/tasty';
+ * import { okhslPlugin } from '@tenphi/tasty';
+ *
+ * configure({
+ *   plugins: [okhslPlugin()],
+ * });
+ *
+ * // Now you can use okhsl in styles:
+ * const Box = tasty({
+ *   styles: {
+ *     fill: 'okhsl(240 50% 50%)',
+ *   },
+ * });
+ * ```
+ */
+declare const okhslPlugin: TastyPluginFactory;
+//#endregion
+//#region src/plugins/okhst-plugin.d.ts
+/**
+ * The okhst function handler for tasty parser.
+ * Receives parsed style groups and returns an RGB color string.
+ */
+declare const okhstFunction: (groups: StyleDetails[]) => string;
+/**
+ * OKHST Plugin for Tasty.
+ *
+ * Adds support for the `okhst()` color function in tasty styles.
+ *
+ * @example
+ * ```ts
+ * import { configure } from '@tenphi/tasty';
+ * import { okhstPlugin } from '@tenphi/tasty';
+ *
+ * configure({
+ *   plugins: [okhstPlugin()],
+ * });
+ *
+ * // Now you can use okhst in styles:
+ * const Box = tasty({
+ *   styles: {
+ *     fill: 'okhst(240 50% 50%)',
+ *   },
+ * });
+ * ```
+ */
+declare const okhstPlugin: TastyPluginFactory;
+//#endregion
+//#region src/plugins/color-func.d.ts
+/**
+ * Creates a color function handler for the tasty parser.
+ *
+ * A color function is a custom `functions` entry that converts its arguments
+ * to an `rgb(...)` string (an already-supported color), so it needs no special
+ * core integration — registering it as a parse function is enough.
+ *
+ * @param name The name of the color function (e.g., 'okhsl', 'okhst')
+ * @param convert Converts the parsed first three channel values (after angle/
+ *   percent normalization) to sRGB `[r, g, b]` in the 0-1 range
+ * @param label Optional diagnostic label shown in dev warnings when the wrong
+ *   number of arguments is supplied (e.g., 'H S L'). Has no effect on parsing
+ *   or output.
+ */
+declare function createColorFunc(name: string, convert: (h: number, c2: number, c3: number) => [number, number, number], label?: string): (groups: StyleDetails[]) => string;
+//#endregion
+//#region src/utils/function-color.d.ts
+/**
+ * Resolve a `name(...)` value produced by a registered custom parse function
+ * into its concrete color output.
+ *
+ * A color function is just a `functions` entry whose output is an already
+ * supported color (`rgb`, `hsl`, `#…`, `oklch`, …). This helper delegates the
+ * value to the global parser (which already runs the registered parse function)
+ * and returns the result only when it looks like a color. Returns `null` when
+ * `str` is not a registered custom function or its output is not a color.
+ *
+ * This is the generic replacement for the previously hardcoded okhsl/okhst
+ * conversion branches scattered across `strToRgb`, `resolveToRgbaValues`, and
+ * the `#token.alpha` injection path.
+ */
+declare function resolveFunctionColor(str: string): string | null;
+//#endregion
+//#region src/chunks/style-chunk-map.d.ts
+/**
+ * Chunk names, the built-in chunk style lists, and the style→chunk lookup.
+ *
+ * This module only imports data-only style-name lists. It exists separately
+ * from `definitions.ts` for two reasons:
+ *
+ * 1. The style handler registry (`styles/predefined.ts`) needs to assign chunk
+ *    membership for custom handlers. Reaching for `definitions.ts` would create an
+ *    import cycle (`definitions` -> `pipeline` -> `styles` -> `predefined`).
+ * 2. `STYLE_TO_CHUNK` is populated as a side effect of module load, so it must be
+ *    populated by the module that *owns* it. Otherwise an importer that only pulls
+ *    in this module would see an empty map and misclassify every style as `misc`.
+ *
+ * `definitions.ts` re-exports everything here, so existing import paths and the
+ * public API surface are unchanged.
+ */
+declare const CHUNK_NAMES: {
+  /** Special chunk for styles that cannot be split */readonly COMBINED: "combined";
+  readonly SUBCOMPONENTS: "subcomponents";
+  readonly APPEARANCE: "appearance";
+  readonly FONT: "font";
+  readonly DIMENSION: "dimension";
+  readonly DISPLAY: "display";
+  readonly LAYOUT: "layout";
+  readonly POSITION: "position";
+  readonly MISC: "misc";
+};
+type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];
+/**
+ * Appearance chunk - visual styling with independent handlers
+ *
+ * @public
+ */
+declare const APPEARANCE_CHUNK_STYLES: readonly ["fill", "color", "opacity", "border", "blockBorder", "inlineBorder", "radius", "outline", "outlineOffset", "shadow", "fade"];
+/**
+ * Font chunk - typography styles
+ *
+ * Handler dependencies (all styles in each handler MUST stay in this chunk):
+ * ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,
+ *    fontWeight, fontStyle, font
+ */
+/** @public */
+declare const FONT_CHUNK_STYLES: readonly ["preset", "font", "fontWeight", "fontStyle", "fontSize", "lineHeight", "letterSpacing", "textTransform", "fontFamily", "textAlign", "textDecoration", "wordBreak", "wordWrap", "boldFontWeight"];
+/**
+ * Dimension chunk - sizing and spacing
+ *
+ * Handler dependencies (all styles in each handler MUST stay in this chunk):
+ * ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left
+ * ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left
+ * ⚠️ widthStyle: width, minWidth, maxWidth
+ * ⚠️ heightStyle: height, minHeight, maxHeight
+ * ⚠️ blockSizeStyle: blockSize, minBlockSize, maxBlockSize
+ * ⚠️ inlineSizeStyle: inlineSize, minInlineSize, maxInlineSize
+ */
+/** @public */
+declare const DIMENSION_CHUNK_STYLES: readonly ["padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "blockPadding", "inlinePadding", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "blockMargin", "inlineMargin", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "blockSize", "minBlockSize", "maxBlockSize", "inlineSize", "minInlineSize", "maxInlineSize", "flexBasis", "flexGrow", "flexShrink", "flex"];
+/**
+ * Display chunk - display mode, layout flow, text overflow, and scrollbar
+ *
+ * Handler dependencies (all styles in each handler MUST stay in this chunk):
+ * ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace
+ * ⚠️ flowStyle: display, flow
+ * ⚠️ gapStyle: display, flow, gap
+ * ⚠️ scrollbarStyle: scrollbar, overflow
+ */
+/** @public */
+declare const DISPLAY_CHUNK_STYLES: readonly ["display", "hide", "textOverflow", "overflow", "whiteSpace", "flow", "gap", "scrollbar"];
+/**
+ * Layout chunk - flex/grid alignment and grid templates
+ *
+ * Note: flow and gap are in DISPLAY chunk due to handler dependencies
+ * (flowStyle and gapStyle both require 'display' prop).
+ */
+/** @public */
+declare const LAYOUT_CHUNK_STYLES: readonly ["placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "place", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas", "gridAutoFlow", "gridAutoColumns", "gridAutoRows"];
+/**
+ * Position chunk - element positioning
+ *
+ * Handler dependencies (all styles in each handler MUST stay in this chunk):
+ * ⚠️ insetStyle: inset, top, right, bottom, left
+ */
+/** @public */
+declare const POSITION_CHUNK_STYLES: readonly ["position", "inset", "blockInset", "inlineInset", "top", "right", "bottom", "left", "blockScrollMargin", "inlineScrollMargin", "blockScrollPadding", "inlineScrollPadding", "zIndex", "gridArea", "gridColumn", "gridRow", "order", "placeSelf", "alignSelf", "justifySelf", "transform", "transition", "animation"];
+/**
+ * Map for O(1) style-to-chunk lookup. Seeded with the built-in lists above and
+ * extended by {@link assignStyleChunk} when a custom handler declares style names
+ * the built-in lists don't know.
+ */
+declare const STYLE_TO_CHUNK: Map<string, ChunkName>;
+//#endregion
+//#region src/chunks/definitions.d.ts
+interface ChunkInfo {
+  /** Name of the chunk */
+  name: ChunkName | string;
+  /** Style keys belonging to this chunk */
+  styleKeys: string[];
+}
+/**
+ * Categorize style keys into chunks.
+ *
+ * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless
+ * of the order of keys in the input styles object.
+ *
+ * @param styles - The styles object to categorize
+ * @returns Map of chunk name to array of style keys in that chunk (in priority order)
+ */
+declare function categorizeStyleKeys(styles: Record<string, unknown>): Map<string, string[]>;
+//#endregion
+//#region src/styles/border.d.ts
+/**
+ * Border style handler with multi-group support.
+ *
+ * Single group (backward compatible):
+ * - `border="1bw solid #red"` - all sides
+ * - `border="1bw solid #red top left"` - only top and left
+ *
+ * Multi-group (new):
+ * - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
+ * - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
+ *
+ * Later groups override earlier groups for conflicting directions.
+ */
+declare function borderStyle({
+  border
+}: {
+  border?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace borderStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/blockSize.d.ts
+declare function blockSizeStyle({
+  blockSize,
+  minBlockSize,
+  maxBlockSize
+}: {
+  blockSize?: string | number | boolean;
+  minBlockSize?: string | number | boolean;
+  maxBlockSize?: string | number | boolean;
+}): Record<string, string | string[]> | null;
+declare namespace blockSizeStyle {
+  var __lookupStyles: ("blockSize" | "maxBlockSize" | "minBlockSize")[];
+}
+//#endregion
+//#region src/styles/color.d.ts
+declare function colorStyle({
+  color
+}: {
+  color?: string | boolean;
+}): Record<string, string> | null;
+declare namespace colorStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/display.d.ts
+interface DisplayStyleProps {
+  display?: string;
+  hide?: boolean;
+  textOverflow?: string | boolean;
+  overflow?: string;
+  whiteSpace?: string;
+}
+/**
+ * Handles display, hide, textOverflow, overflow, and whiteSpace styles.
+ *
+ * Priority:
+ * 1. `hide` takes precedence (display: none)
+ * 2. Multi-line `textOverflow` forces display: -webkit-box
+ * 3. Single-line `textOverflow` defaults white-space to nowrap
+ * 4. Explicit `whiteSpace` overrides the default from `textOverflow`
+ */
+declare function displayStyle({
+  display,
+  hide,
+  textOverflow,
+  overflow,
+  whiteSpace
+}: DisplayStyleProps): Record<string, string | number> | null;
+declare namespace displayStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/fade.d.ts
+declare function fadeStyle({
+  fade
+}: {
+  fade?: string;
+}): {
+  mask: string;
+  'mask-composite': string;
+} | null;
+declare namespace fadeStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/fill.d.ts
+declare function fillStyle({
+  fill,
+  backgroundColor,
+  image,
+  backgroundImage,
+  backgroundPosition,
+  backgroundSize,
+  backgroundRepeat,
+  backgroundAttachment,
+  backgroundOrigin,
+  backgroundClip,
+  background
+}: {
+  fill?: string;
+  backgroundColor?: string;
+  image?: string;
+  backgroundImage?: string;
+  backgroundPosition?: string;
+  backgroundSize?: string;
+  backgroundRepeat?: string;
+  backgroundAttachment?: string;
+  backgroundOrigin?: string;
+  backgroundClip?: string;
+  background?: string;
+}): Record<string, string> | null;
+declare namespace fillStyle {
+  var __lookupStyles: string[];
+}
+declare function svgFillStyle({
+  svgFill
+}: {
+  svgFill?: string;
+}): {
+  fill: string;
+} | null;
+declare namespace svgFillStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/flow.d.ts
+declare function flowStyle({
+  display,
+  flow
+}: {
+  display?: string;
+  flow?: string;
+}): {
+  [x: string]: string;
+} | null;
+declare namespace flowStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/gap.d.ts
+declare function gapStyle({
+  display,
+  flow,
+  gap
+}: {
+  display?: string;
+  flow?: string;
+  gap?: string | number | boolean;
+}): {
+  gap: string;
+  $?: undefined;
+} | ({
+  'margin-right': string;
+  'margin-bottom': string;
+  $?: undefined;
+} | {
+  $: string;
+  'margin-right': string;
+  'margin-bottom': string;
+})[] | {
+  [x: string]: string;
+  $: string;
+  gap?: undefined;
+} | null;
+declare namespace gapStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/height.d.ts
+interface HeightStyleProps {
+  height?: string | number | boolean;
+  minHeight?: string | number | boolean;
+  maxHeight?: string | number | boolean;
+}
+declare function heightStyle({
+  height,
+  minHeight,
+  maxHeight
+}: HeightStyleProps): Record<string, string | string[]> | null;
+declare namespace heightStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/inset.d.ts
+declare function insetStyle({
+  inset,
+  top,
+  right,
+  bottom,
+  left
+}: {
+  inset?: string | number | boolean;
+  top?: string | number | boolean;
+  right?: string | number | boolean;
+  bottom?: string | number | boolean;
+  left?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace insetStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/inlineSize.d.ts
+declare function inlineSizeStyle({
+  inlineSize,
+  minInlineSize,
+  maxInlineSize
+}: {
+  inlineSize?: string | number | boolean;
+  minInlineSize?: string | number | boolean;
+  maxInlineSize?: string | number | boolean;
+}): Record<string, string | string[]> | null;
+declare namespace inlineSizeStyle {
+  var __lookupStyles: ("inlineSize" | "maxInlineSize" | "minInlineSize")[];
+}
+//#endregion
+//#region src/styles/margin.d.ts
+declare function marginStyle({
+  margin,
+  marginTop,
+  marginRight,
+  marginBottom,
+  marginLeft
+}: {
+  margin?: string | number | boolean;
+  marginTop?: string | number | boolean;
+  marginRight?: string | number | boolean;
+  marginBottom?: string | number | boolean;
+  marginLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace marginStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/outline.d.ts
+interface OutlineStyleProps {
+  outline?: string | boolean | number;
+  outlineOffset?: string | number;
+}
+/**
+ * Generates CSS for outline property with optional offset.
+ *
+ * Syntax:
+ * - `outline="2px solid #red"` - outline only
+ * - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
+ * - `outline="2px / 4px"` - width with offset (simpler form)
+ * - `outline={true}` - default 1ow solid outline
+ * - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
+ *
+ * Priority: slash syntax in outline takes precedence over outlineOffset prop
+ *
+ * @return CSS properties for outline and optionally outline-offset
+ */
+declare function outlineStyle({
+  outline,
+  outlineOffset
+}: OutlineStyleProps): Record<string, string> | null;
+declare namespace outlineStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/padding.d.ts
+declare function paddingStyle({
+  padding,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft
+}: {
+  padding?: string | number | boolean;
+  paddingTop?: string | number | boolean;
+  paddingRight?: string | number | boolean;
+  paddingBottom?: string | number | boolean;
+  paddingLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace paddingStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/placement.d.ts
+interface PlacementStyleProps {
+  place?: string | boolean;
+  placeItems?: string | boolean;
+  placeContent?: string | boolean;
+  align?: string | boolean;
+  justify?: string | boolean;
+  alignItems?: string | boolean;
+  alignContent?: string | boolean;
+  justifyItems?: string | boolean;
+  justifyContent?: string | boolean;
+}
+/**
+ * Unified placement handler replacing align, justify, and place.
+ *
+ * Priority (later overrides earlier):
+ * 1. place (lowest) — sets all 4 longhands
+ * 2. placeItems, placeContent, align, justify (medium) — each sets 2 longhands
+ * 3. alignItems, alignContent, justifyItems, justifyContent (highest) — each sets 1 longhand
+ */
+declare function placementStyle({
+  place,
+  placeItems,
+  placeContent,
+  align,
+  justify,
+  alignItems,
+  alignContent,
+  justifyItems,
+  justifyContent
+}: PlacementStyleProps): Record<string, string> | null;
+declare namespace placementStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/preset.d.ts
+interface PresetStyleProps {
+  preset?: string | boolean;
+  fontSize?: string | number;
+  lineHeight?: string | number;
+  textTransform?: string;
+  letterSpacing?: string | number;
+  fontWeight?: string | number;
+  fontStyle?: string | boolean;
+  fontFamily?: string;
+  /** Alias for fontFamily with special handling for 'monospace' and boolean */
+  font?: string | boolean;
+}
+/**
+ * Handles typography preset and individual font properties.
+ *
+ * Preset syntax uses `/` to separate the name from one or more
+ * space-separated modifiers:
+ * - `preset="h1"` — name only
+ * - `preset="h2 / strong"` — name + modifier
+ * - `preset="h2 / strong italic"` — name + multiple modifiers
+ * - `preset="bold"` — modifier-only shorthand (name defaults to `inherit`)
+ * - `preset="bold italic"` — modifier-only shorthand with multiple modifiers
+ *
+ * When `preset` is defined, it sets up CSS custom properties for typography.
+ * Individual font props can be used with or without `preset`:
+ * - With `preset`: overrides the preset value for that property
+ * - Without `preset`: outputs the CSS directly
+ *
+ * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.
+ * fontWeight accepts numbers directly (e.g., 400, 700).
+ *
+ * font vs fontFamily:
+ * - `font` is the recommended prop with special handling (monospace, boolean, fallback)
+ * - `fontFamily` is a direct value without special handling
+ */
+declare function presetStyle({
+  preset,
+  fontSize,
+  lineHeight,
+  textTransform,
+  letterSpacing,
+  fontWeight,
+  fontStyle,
+  fontFamily,
+  font
+}: PresetStyleProps): CSSMap | null;
+declare namespace presetStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/radius.d.ts
+declare function radiusStyle({
+  radius
+}: {
+  radius?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace radiusStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/scrollMargin.d.ts
+declare function scrollMarginStyle({
+  scrollMargin,
+  scrollMarginTop,
+  scrollMarginRight,
+  scrollMarginBottom,
+  scrollMarginLeft
+}: {
+  scrollMargin?: string | number | boolean;
+  scrollMarginTop?: string | number | boolean;
+  scrollMarginRight?: string | number | boolean;
+  scrollMarginBottom?: string | number | boolean;
+  scrollMarginLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace scrollMarginStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/scrollPadding.d.ts
+declare function scrollPaddingStyle({
+  scrollPadding,
+  scrollPaddingTop,
+  scrollPaddingRight,
+  scrollPaddingBottom,
+  scrollPaddingLeft
+}: {
+  scrollPadding?: string | number | boolean;
+  scrollPaddingTop?: string | number | boolean;
+  scrollPaddingRight?: string | number | boolean;
+  scrollPaddingBottom?: string | number | boolean;
+  scrollPaddingLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace scrollPaddingStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/scrollbar.d.ts
+interface ScrollbarStyleProps {
+  scrollbar?: string | boolean;
+  overflow?: string;
+}
+/**
+ * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,
+ * and `scrollbar-gutter`.
+ *
+ * Width values: `thin` (default), `auto`, `none`
+ * Modifiers: `stable`, `both-edges`, `always`
+ *
+ * Note: `auto` is classified as a VALUE_KEYWORD by the parser, so it lands
+ * in `values` rather than `mods`. Both locations are checked for robustness.
+ */
+declare function scrollbarStyle({
+  scrollbar,
+  overflow
+}: ScrollbarStyleProps): Record<string, string> | null;
+declare namespace scrollbarStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/shadow.d.ts
+declare function shadowStyle({
+  shadow
+}: {
+  shadow?: string | boolean;
+}): {
+  'box-shadow': string;
+} | null;
+declare namespace shadowStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/transition.d.ts
+declare function transitionStyle({
+  transition
+}: {
+  transition?: string;
+}): {
+  transition: string;
+} | null;
+declare namespace transitionStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/width.d.ts
+interface WidthStyleProps {
+  width?: string | number | boolean;
+  minWidth?: string | number | boolean;
+  maxWidth?: string | number | boolean;
+}
+declare function widthStyle({
+  width,
+  minWidth,
+  maxWidth
+}: WidthStyleProps): Record<string, string | string[]> | null;
+declare namespace widthStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+//#region src/styles/predefined.d.ts
+/**
+ * Exported object containing wrapped predefined style handlers.
+ * Users can import and call these to extend or delegate to built-in behavior.
+ *
+ * Internal handlers use *Style suffix for searchability.
+ * External API uses short names for convenience.
+ *
+ * @example
+ * ```ts
+ * import { styleHandlers, configure } from '@tenphi/tasty';
+ *
+ * configure({
+ *   handlers: {
+ *     fill: ({ fill }) => {
+ *       if (fill?.startsWith('gradient:')) {
+ *         return { background: fill.slice(9) };
+ *       }
+ *       return styleHandlers.fill({ fill });
+ *     },
+ *   },
+ * });
+ * ```
+ */
+declare const styleHandlers: {
+  readonly margin: typeof marginStyle;
+  readonly outline: typeof outlineStyle;
+  readonly padding: typeof paddingStyle;
+  readonly placement: typeof placementStyle;
+  readonly preset: typeof presetStyle;
+  readonly radius: typeof radiusStyle;
+  readonly scrollMargin: typeof scrollMarginStyle;
+  readonly scrollPadding: typeof scrollPaddingStyle;
+  readonly scrollbar: typeof scrollbarStyle;
+  readonly shadow: typeof shadowStyle;
+  readonly transition: typeof transitionStyle;
+  readonly width: typeof widthStyle;
+  readonly blockBorder: StyleHandler<Partial<Record<"blockBorder", string | number | boolean | undefined>>>;
+  readonly inlineBorder: StyleHandler<Partial<Record<"inlineBorder", string | number | boolean | undefined>>>;
+  readonly blockScrollPadding: StyleHandler<Partial<Record<"blockScrollPadding", string | number | boolean | undefined>>>;
+  readonly inlineScrollPadding: StyleHandler<Partial<Record<"inlineScrollPadding", string | number | boolean | undefined>>>;
+  readonly blockScrollMargin: StyleHandler<Partial<Record<"blockScrollMargin", string | number | boolean | undefined>>>;
+  readonly inlineScrollMargin: StyleHandler<Partial<Record<"inlineScrollMargin", string | number | boolean | undefined>>>;
+  readonly blockInset: StyleHandler<Partial<Record<"blockInset", string | number | boolean | undefined>>>;
+  readonly inlineInset: StyleHandler<Partial<Record<"inlineInset", string | number | boolean | undefined>>>;
+  readonly blockMargin: StyleHandler<Partial<Record<"blockMargin", string | number | boolean | undefined>>>;
+  readonly inlineMargin: StyleHandler<Partial<Record<"inlineMargin", string | number | boolean | undefined>>>;
+  readonly blockPadding: StyleHandler<Partial<Record<"blockPadding", string | number | boolean | undefined>>>;
+  readonly inlinePadding: StyleHandler<Partial<Record<"inlinePadding", string | number | boolean | undefined>>>;
+  readonly blockSize: typeof blockSizeStyle;
+  readonly border: typeof borderStyle;
+  readonly color: typeof colorStyle;
+  readonly display: typeof displayStyle;
+  readonly fade: typeof fadeStyle;
+  readonly fill: typeof fillStyle;
+  readonly svgFill: typeof svgFillStyle;
+  readonly flow: typeof flowStyle;
+  readonly gap: typeof gapStyle;
+  readonly height: typeof heightStyle;
+  readonly inset: typeof insetStyle;
+  readonly inlineSize: typeof inlineSizeStyle;
+};
+//#endregion
+//#region src/styles/define-handler.d.ts
+/**
+ * Declare a multi-dependency style handler with its dependency names inferred
+ * into the handler's parameter type.
+ *
+ * Without it, the multi-dependency tuple form needs a hand-written parameter
+ * annotation that can silently drift from the dependency list:
+ *
+ * ```ts
+ * // Annotation and dependency list are maintained separately.
+ * handlers: {
+ *   spacing: [['gap', 'padding'], ({ gap, padding }: { gap?: string; padding?: string }) => …],
+ * }
+ *
+ * // Both come from the same array; a typo in the destructure is a type error.
+ * handlers: {
+ *   spacing: defineHandler(['gap', 'padding'], ({ gap, padding }) => …),
+ * }
+ * ```
+ *
+ * Values arrive **state-resolved but unparsed** — the raw authored DSL string
+ * (`'2x'`, `'#purple.5'`), so call `parseStyle()` / `parseColor()` as needed. The
+ * result is a kebab-case CSS declaration map (or an array of them); the reserved
+ * `$` key applies the declarations to a nested selector.
+ *
+ * All names must belong to the same chunk. Names the built-in chunk lists don't
+ * know are pulled into their handler's chunk automatically at registration.
+ */
+declare function defineHandler<const TDeps extends readonly string[]>(deps: TDeps, handler: (props: Partial<Record<TDeps[number], ResolvedStyleValue>>) => StyleHandlerResult): [readonly string[], RawStyleHandler];
+//#endregion
+//#region src/compute-styles.d.ts
+interface ComputeStylesResult {
+  className: string;
+  /** CSS text to emit as an inline <style> tag (RSC mode only). */
+  css?: string;
+}
+interface ComputeStylesOptions {
+  ssrCollector?: ServerStyleCollector | null;
+  /** Target root for style injection (client only). Defaults to `document`. */
+  root?: Document | ShadowRoot;
+  /**
+   * Set when `styles` outlives this call and will be passed in again — a
+   * `tasty()` factory's own styles object rather than a per-render merge.
+   * It lets chunk cache keys be memoized on the object, which is worth the
+   * bookkeeping only when there is a next render to spend it on.
+   */
+  stableStyles?: boolean;
+}
+/**
+ * Synchronous, hook-free style computation.
+ *
+ * Resolves recipes, categorizes style keys into chunks, renders CSS rules,
+ * allocates class names, and injects / collects / returns the CSS.
+ *
+ * Three code paths:
+ * 1. SSR collector — discovered via ALS or passed explicitly; CSS collected
+ * 2. RSC inline — no collector and no `document`; CSS returned as `result.css`
+ *    for the caller to emit as an inline `<style>` tag
+ * 3. Client inject — CSS injected synchronously into the DOM (idempotent)
+ *
+ * @param styles - Tasty styles object (or undefined for no styles)
+ * @param options - Optional SSR collector override
+ */
+declare function computeStyles(styles: Styles | undefined, options?: ComputeStylesOptions): ComputeStylesResult;
+//#endregion
+//#region src/injector/chunk-sheet-registry.d.ts
+/**
+ * Global registry mapping CSS content hashes to shared constructable
+ * CSSStyleSheet objects with reference counting.
+ *
+ * Multiple shadow roots adopting the same chunk share a single underlying
+ * stylesheet object — parse once, adopt everywhere.
+ */
+declare class ChunkSheetRegistry {
+  private sheets;
+  private sheetToHash;
+  /**
+   * Get or create a CSSStyleSheet for the given CSS text.
+   * Increments refCount. Uses content hash as the dedup key.
+   */
+  acquire(cssText: string): CSSStyleSheet;
+  /**
+   * Decrement refCount for a sheet. When refCount reaches 0,
+   * the sheet is removed from the registry.
+   */
+  release(sheet: CSSStyleSheet): void;
+  /**
+   * Bulk acquire — returns an array of CSSStyleSheet in the same order.
+   */
+  acquireAll(cssTexts: string[]): CSSStyleSheet[];
+  /**
+   * Bulk release — decrements refCount for each sheet.
+   */
+  releaseAll(sheets: CSSStyleSheet[]): void;
+  /** Number of unique sheets currently held. */
+  get size(): number;
+}
+/** Module-level singleton shared across the entire application. */
+declare const chunkSheetRegistry: ChunkSheetRegistry;
+//#endregion
+//#region src/injector/index.d.ts
+/**
+ * Inject styles and return className with dispose function
+ */
+declare function inject(rules: StyleResult[], options?: InjectOptions): InjectResult;
+/**
+ * Inject global rules that should not reserve tasty class names
+ */
+declare function injectGlobal(rules: StyleResult[], options?: {
+  root?: Document | ShadowRoot;
+}): GlobalInjectResult;
+/**
+ * Inject raw CSS text directly without parsing
+ * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
+ * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
+ *
+ * @example
+ * ```tsx
+ * // Inject raw CSS
+ * const { dispose } = injectRawCSS(`
+ *   body { margin: 0; padding: 0; }
+ *   .my-class { color: red; }
+ * `);
+ *
+ * // Later, remove the injected CSS
+ * dispose();
+ * ```
+ */
+declare function injectRawCSS(css: string, options?: {
+  root?: Document | ShadowRoot;
+}): {
+  dispose: () => void;
+};
+/**
+ * Get raw CSS text for SSR
+ */
+declare function getRawCSSText(options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Inject keyframes and return object with toString() and dispose()
+ */
+declare function keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
+  root?: Document | ShadowRoot;
+  name?: string;
+}): KeyframesResult;
+/**
+ * Define a CSS @property custom property.
+ * This enables advanced features like animating custom properties.
+ *
+ * Note: @property rules are global and persistent once defined.
+ * Re-registering the same property name is a no-op.
+ *
+ * @param name - The custom property name (must start with --)
+ * @param options - Property configuration
+ *
+ * @example
+ * ```ts
+ * // Define a color property that can be animated
+ * property('--my-color', {
+ *   syntax: '<color>',
+ *   initialValue: 'red',
+ * });
+ *
+ * // Define an angle property
+ * property('--rotation', {
+ *   syntax: '<angle>',
+ *   inherits: false,
+ *   initialValue: '0deg',
+ * });
+ * ```
+ */
+declare function property(name: string, options?: PropertyOptions): void;
+/**
+ * Check if a CSS @property has already been defined
+ *
+ * @param name - The custom property name to check
+ * @param options - Options including root
+ */
+declare function isPropertyDefined(name: string, options?: {
+  root?: Document | ShadowRoot;
+}): boolean;
+/**
+ * Inject a CSS @font-face rule.
+ *
+ * Permanent and global — no dispose or ref-counting.
+ * Deduplicates by content hash (family + descriptors).
+ */
+declare function fontFace(family: string, descriptors: FontFaceDescriptors, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Inject a CSS @counter-style rule.
+ *
+ * Permanent and global — no dispose or ref-counting. Deduplicates by name and
+ * overrides an existing rule by default. Pass `weak: true` for global
+ * `configure()` definitions, which never clobber an existing rule.
+ */
+declare function counterStyle(name: string, descriptors: CounterStyleDescriptors, options?: {
+  root?: Document | ShadowRoot;
+  weak?: boolean;
+}): void;
+/**
+ * Inject a CSS @function rule (custom function).
+ *
+ * Permanent and global — no dispose or ref-counting. Deduplicates by function
+ * name and overrides an existing rule by default. Pass `weak: true` for global
+ * `configure()` definitions, which never clobber an existing rule.
+ *
+ * @param name - The function name (`$$name`, `$name`, or `--name`)
+ * @param definition - Function definition (args, returns, result, local vars)
+ *
+ * @example
+ * ```ts
+ * func('$$negative', { args: ['$value'], result: '(-1 * $value)' });
+ * ```
+ */
+declare function func(name: string, definition: FunctionDefinition, options?: {
+  root?: Document | ShadowRoot;
+  weak?: boolean;
+}): void;
+/**
+ * Get CSS text from all sheets (for SSR)
+ */
+declare function getCSSText(options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Collect only CSS used by a rendered subtree (like jest-styled-components).
+ * Pass the container returned by render(...).
+ */
+declare function getCSSTextForNode(node: ParentNode | Element | DocumentFragment, options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Take a reference on local `@keyframes` under the deterministic names the
+ * caller resolved, and report which entry holds each. Pair with
+ * `ownKeyframes()` once the rules exist to inspect.
+ */
+declare function holdKeyframes(steps: Record<string, KeyframesSteps>, names: Map<string, string>, options?: {
+  root?: Document | ShadowRoot;
+}): Map<string, string>;
+/**
+ * Record that a class animates these keyframes, so the reference is released
+ * when the last such class is collected.
+ */
+declare function ownKeyframes(key: string, className: string, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Remove every injected rule that is neither in the DOM nor held by an
+ * outstanding `inject()` handle. Equivalent to `gc({ force: true })`.
+ */
+declare function cleanup(root?: Document | ShadowRoot): void;
+/**
+ * Count a render, so that a collection pass is scheduled every
+ * `gc.touchInterval` of them. Used internally by computeStyles and tasty().
+ *
+ * @deprecated The class name is ignored — collection asks the DOM what is
+ * rendered rather than recording usage per class. The argument is kept so
+ * existing calls still compile.
+ */
+declare function touch(className: string, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Synchronous garbage collection of unused styles — those no element carries
+ * and no `inject()` handle references. Evicts the oldest ones once they exceed
+ * capacity. With `{ force: true }`, removes all of them regardless of capacity.
+ *
+ * @returns Number of styles evicted.
+ */
+declare function gc(options?: GCOptions): number;
+/**
+ * Get the global injector instance for debugging
+ */
+declare const injector: {
+  readonly instance: StyleInjector;
+};
+/**
+ * Destroy all resources and clean up
+ */
+declare function destroy(root?: Document | ShadowRoot): void;
+/**
+ * Create a new isolated injector instance
+ */
+declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
+//#endregion
+//#region src/utils/filter-base-props.d.ts
+interface PropsFilterOptions {
+  labelable?: boolean;
+  propNames?: Set<string>;
+  eventProps?: boolean;
+}
+/**
+ * Filters out all props that aren't valid DOM props or defined via override prop obj.
+ * @param props - The component props to be filtered.
+ * @param opts - Props to override.
+ */
+declare function filterBaseProps<T extends object>(props: T, opts?: PropsFilterOptions): Partial<T>;
+//#endregion
+//#region src/utils/colors.d.ts
+declare function color$1(name: string, opacity?: number): string;
+//#endregion
+//#region src/utils/mod-attrs.d.ts
+declare function modAttrs(map: AllBaseProps['mods']): Record<string, string> | null;
+//#endregion
+//#region src/utils/resolve-recipes.d.ts
+/** Resolve recipe references against the globally configured recipe map. */
+declare function resolveRecipes(styles: Styles): Styles;
+//#endregion
+//#region src/utils/process-tokens.d.ts
+/**
+ * Process tokens object into inline style properties.
+ * - `$name` -> `--name` with the parsed value
+ * - `#name` -> `--name-color` with the parsed value
+ *
+ * @param tokens - The tokens object to process
+ * @returns CSSProperties object or undefined if no tokens to process
+ */
+declare function processTokens(tokens: Tokens | undefined): CSSProperties$1 | undefined;
+//#endregion
+//#region src/debug.d.ts
+declare global {
+  interface Window {
+    tastyDebug?: typeof tastyDebug;
+  }
+}
+type CSSTarget = 'all' | 'global' | 'active' | 'unused' | 'page' | string | string[] | Element;
+interface DebugOptions {
+  root?: Document | ShadowRoot;
+  /** Suppress console logging and return data only (default: false) */
+  raw?: boolean;
+}
+interface CSSOptions extends DebugOptions {
+  prettify?: boolean;
+  /** Read from stored source CSS (dev-mode only) instead of live CSSOM */
+  source?: boolean;
+}
+interface DebugChunkInfo {
+  className: string;
+  chunkName: string | null;
+}
+interface InspectResult {
+  element?: Element | null;
+  classes: string[];
+  chunks: DebugChunkInfo[];
+  css: string;
+  size: number;
+  rules: number;
+}
+interface CacheStatus {
+  classes: {
+    active: string[];
+    unused: string[];
+    all: string[];
+  };
+  metrics: CacheMetrics | null;
+}
+interface ChunkBreakdown {
+  byChunk: Record<string, {
+    classes: string[];
+    cssSize: number;
+    ruleCount: number;
+  }>;
+  totalChunkTypes: number;
+  totalClasses: number;
+}
+interface Summary {
+  activeClasses: string[];
+  /** Classes `gc({ force: true })` would delete right now. */
+  unusedClasses: string[];
+  /**
+   * Held but in neither list: nothing renders them, yet collection will not
+   * take them — inside the grace window, or pinned by an `inject()` handle.
+   */
+  hotClasses: string[];
+  totalStyledClasses: string[];
+  activeCSSSize: number;
+  unusedCSSSize: number;
+  globalCSSSize: number;
+  rawCSSSize: number;
+  keyframesCSSSize: number;
+  propertyCSSSize: number;
+  totalCSSSize: number;
+  activeRuleCount: number;
+  unusedRuleCount: number;
+  globalRuleCount: number;
+  rawRuleCount: number;
+  keyframesRuleCount: number;
+  propertyRuleCount: number;
+  totalRuleCount: number;
+  metrics: CacheMetrics | null;
+  definedProperties: string[];
+  definedKeyframes: {
+    name: string;
+    refCount: number;
+  }[];
+  chunkBreakdown: ChunkBreakdown;
+}
+declare const tastyDebug: {
+  css(target: CSSTarget, opts?: CSSOptions): string;
+  inspect(target: string | Element, opts?: DebugOptions): InspectResult;
+  summary(opts?: DebugOptions): Summary;
+  chunks(opts?: DebugOptions): ChunkBreakdown;
+  cache(opts?: DebugOptions): CacheStatus;
+  cleanup(opts?: {
+    root?: Document | ShadowRoot;
+  }): void;
+  help(): void;
+  install(): void;
+};
+//#endregion
+export { createColorFunc as $, OuterStyleProps as $t, keyframes as A, TastyElementOptions as At, styleHandlers as B, BasePropsWithoutChildren as Bt, getRawCSSText as C, DEFAULT_ZERO_NAME_PREFIX as Cn, ResolveAsProps as Ct, injectRawCSS as D, SubElementDefinition as Dt, injectGlobal as E, ResolveTokenProps as Et, chunkSheetRegistry as F, VariantMap as Ft, ChunkName as G, ColorStyleProps as Gt, categorizeStyleKeys as H, BlockInnerStyleProps as Ht, ComputeStylesOptions as I, WithVariant as It, FONT_CHUNK_STYLES as J, ExtraBaseStyleProps as Jt, DIMENSION_CHUNK_STYLES as K, ContainerStyleProps as Kt, ComputeStylesResult as L, tasty as Lt, property as M, TastyPolymorphicComponent as Mt, touch as N, TastyProps as Nt, injector as O, SubElementProps as Ot, ChunkSheetRegistry as P, TokenPropsInput as Pt, resolveFunctionColor as Q, Mods as Qt, computeStyles as R, AllBaseProps as Rt, getCSSTextForNode as S, DEFAULT_NAME_PREFIX as Sn, ModPropsInput as St, inject as T, ResolveModProps as Tt, APPEARANCE_CHUNK_STYLES as U, BlockOuterStyleProps as Ut, ChunkInfo as V, BaseStyleProps as Vt, CHUNK_NAMES as W, BlockStyleProps as Wt, POSITION_CHUNK_STYLES as X, InnerStyleProps as Xt, LAYOUT_CHUNK_STYLES as Y, FlowStyleProps as Yt, STYLE_TO_CHUNK as Z, ModValue as Zt, destroy as _, FLOW_STYLES as _n, useStyles as _t, DebugOptions as a, TastyExtensionConfig as an, TastyBatchProvider as at, gc as b, POSITION_STYLES as bn, ElementsDefinition as bt, tastyDebug as c, TokenValue as cn, useFunction as ct, modAttrs as d, BLOCK_INNER_STYLES as dn, UsePropertyOptions as dt, PositionStyleProps as en, okhstFunction as et, color$1 as f, BLOCK_OUTER_STYLES as fn, useProperty as ft, createInjector as g, DIMENSION_STYLES as gn, UseStylesResult as gt, counterStyle as h, CONTAINER_STYLES as hn, useGlobalStyles as ht, DebugChunkInfo as i, TastyCustomProps as in, getDisplayName as it, ownKeyframes as j, TastyElementProps as jt, isPropertyDefined as k, TastyComponentPropsWithDefaults as kt, processTokens as l, Tokens as ln, useCounterStyle as lt, cleanup as m, COLOR_STYLES as mn, useRawCSS as mt, CacheStatus as n, TagName as nn, okhslFunction as nt, InspectResult as o, TastyThemeNames as on, TastyBatchProviderProps as ot, filterBaseProps as p, BLOCK_STYLES as pn, useKeyframes as pt, DISPLAY_CHUNK_STYLES as q, DimensionStyleProps as qt, ChunkBreakdown as r, TastyBaseStylePropNames as rn, okhslPlugin as rt, Summary as s, TextStyleProps as sn, UseFunctionOptions as st, CSSOptions as t, ShortGridStyles as tn, okhstPlugin as tt, resolveRecipes as u, BASE_STYLES as un, useFontFace as ut, fontFace as v, INNER_STYLES as vn, AllBasePropsWithMods as vt, holdKeyframes as w, ResolveModPropDef as wt, getCSSText as x, TEXT_STYLES as xn, ModPropDef as xt, func as y, OUTER_STYLES as yn, Element$1 as yt, defineHandler as z, BaseProps as zt };
+//# sourceMappingURL=index-D9N9GV24.d.ts.map