@tenphi/tasty 2.0.3 → 2.1.0

package/dist/config-vuCRkBWX.d.ts

@@ -0,0 +1,884 @@
+import { Ct as RawCSSResult, Dt as StyleInjectorConfig, Et as SheetInfo, M as StyleHandlerDefinition, Ot as StyleRule, St as PropertyDefinition, Tt as RuleInfo, b as Styles, bt as KeyframesResult, ct as CacheMetrics, dt as FontFaceDescriptors, ft as FontFaceInput, gt as InjectResult, h as ConfigTokens, ht as GlobalInjectResult, it as StyleDetails, lt as CounterStyleDescriptors, mt as GCOptions, n as StyleResult, ot as UnitHandler, pt as GCConfig, v as RecipeStyles, wt as RootRegistry, xt as KeyframesSteps, yt as KeyframesInfo } from "./index-dUtwpOux.js";
+
+//#region src/injector/sheet-manager.d.ts
+declare class SheetManager {
+  private rootRegistries;
+  /** Strong set of active roots so background GC can iterate them all */
+  private activeRoots;
+  private config;
+  /** Dedicated style elements for raw CSS per root */
+  private rawStyleElements;
+  /** Constructable sheets for raw CSS in adopted mode */
+  private rawConstructableSheets;
+  /** Tracking for raw CSS blocks per root */
+  private rawCSSBlocks;
+  /** Counter for generating unique raw CSS IDs */
+  private rawCSSCounter;
+  constructor(config: StyleInjectorConfig);
+  /**
+   * Resolve the underlying CSSStyleSheet from a SheetInfo,
+   * abstracting away adopted vs style-element modes.
+   */
+  getCSSSheet(sheetInfo: SheetInfo): CSSStyleSheet | null;
+  /**
+   * Determine the injection mode for a root.
+   * ShadowRoot uses adopted stylesheets when supported; Document uses <style> elements.
+   */
+  private detectInjectionMode;
+  /**
+   * Get or create registry for a root (Document or ShadowRoot)
+   */
+  getRegistry(root: Document | ShadowRoot): RootRegistry;
+  /** Return all roots with active registries (for background GC sweep). */
+  getActiveRoots(): Iterable<Document | ShadowRoot>;
+  /** Check whether any roots have active registries. */
+  hasActiveRoots(): boolean;
+  /** Remove registries for ShadowRoots whose host has been detached from the DOM. */
+  pruneDisconnectedRoots(): void;
+  /**
+   * Create a new stylesheet for the registry.
+   * In adopted mode (ShadowRoot), creates a constructable CSSStyleSheet and
+   * pushes it to adoptedStyleSheets. Otherwise creates a <style> element.
+   */
+  createSheet(registry: RootRegistry, root: Document | ShadowRoot): SheetInfo;
+  /**
+   * Create a style element and append to document
+   */
+  private createStyleElement;
+  /**
+   * Insert CSS rules as a single block
+   */
+  insertRule(registry: RootRegistry, flattenedRules: StyleRule[], className: string, root: Document | ShadowRoot): RuleInfo | null;
+  /**
+   * Insert global CSS rules
+   */
+  insertGlobalRule(registry: RootRegistry, flattenedRules: StyleRule[], globalKey: string, root: Document | ShadowRoot): RuleInfo | null;
+  /**
+   * Delete a global CSS rule by key
+   */
+  deleteGlobalRule(registry: RootRegistry, globalKey: string): void;
+  /**
+   * Adjust rule indices after deletion to account for shifting
+   */
+  private adjustIndicesAfterDeletion;
+  /**
+   * Delete a CSS rule from the sheet
+   */
+  deleteRule(registry: RootRegistry, ruleInfo: RuleInfo): void;
+  /**
+   * Find a sheet with available space or return null
+   */
+  private findAvailableSheet;
+  /**
+   * Find an available rule index in the sheet
+   */
+  findAvailableRuleIndex(sheet: SheetInfo): number;
+  /**
+   * Force cleanup of unused styles
+   */
+  forceCleanup(registry: RootRegistry): void;
+  /**
+   * Perform bulk cleanup of all unused styles (refCount = 0).
+   */
+  private performBulkCleanup;
+  /**
+   * Get total number of rules across all sheets
+   */
+  getTotalRuleCount(registry: RootRegistry): number;
+  /**
+   * Get CSS text from all sheets (for SSR)
+   */
+  getCssText(registry: RootRegistry): string;
+  /**
+   * Get cache performance metrics
+   */
+  getMetrics(registry: RootRegistry): CacheMetrics | null;
+  /**
+   * Reset cache performance metrics
+   */
+  resetMetrics(registry: RootRegistry): void;
+  /**
+   * Convert keyframes steps to CSS string.
+   * Public so the SSR collector can format keyframes without DOM access.
+   * Returns both the CSS text and a combined declarations string for property type scanning.
+   */
+  stepsToCSS(steps: KeyframesSteps): {
+    css: string;
+    declarations: string;
+  };
+  /**
+   * Insert keyframes rule.
+   * Returns the KeyframesInfo and the raw declarations string for property type scanning.
+   */
+  insertKeyframes(registry: RootRegistry, steps: KeyframesSteps, name: string, root: Document | ShadowRoot): {
+    info: KeyframesInfo;
+    declarations: string;
+  } | null;
+  /**
+   * Delete keyframes rule
+   */
+  deleteKeyframes(registry: RootRegistry, info: KeyframesInfo): void;
+  /**
+   * Clean up resources for a root
+   */
+  cleanup(root: Document | ShadowRoot): void;
+  /**
+   * Check if a root uses adopted injection mode.
+   */
+  private isAdoptedMode;
+  /**
+   * Get or create a constructable CSSStyleSheet for raw CSS in adopted mode.
+   * The raw sheet is prepended to adoptedStyleSheets so it precedes tasty rules.
+   */
+  private getOrCreateRawAdoptedSheet;
+  /**
+   * Get or create a dedicated style element for raw CSS
+   * Raw CSS is kept separate from tasty-managed sheets to avoid index conflicts
+   */
+  private getOrCreateRawStyleElement;
+  /**
+   * Inject raw CSS text directly without parsing
+   * Returns a dispose function to remove the injected CSS
+   */
+  injectRawCSS(css: string, root: Document | ShadowRoot): RawCSSResult;
+  /**
+   * Rebuild the raw CSS constructable sheet from all tracked blocks.
+   */
+  private rebuildRawAdoptedSheet;
+  /**
+   * Remove a raw CSS block by ID
+   */
+  private disposeRawCSS;
+  /**
+   * Get the raw CSS content
+   */
+  getRawCSSText(root: Document | ShadowRoot): string;
+}
+//#endregion
+//#region src/injector/injector.d.ts
+declare class StyleInjector {
+  private sheetManager;
+  private config;
+  private globalRuleCounter;
+  private pendingGCHandle;
+  /** @internal — exposed for debug utilities only */
+  get _sheetManager(): SheetManager;
+  constructor(config?: StyleInjectorConfig);
+  /**
+   * Check if `className` was hydrated from server-rendered styles and,
+   * if so, wire the cacheKey mapping. Returns true on hit.
+   */
+  private tryHydratedHit;
+  /**
+   * Allocate a className for a cacheKey without injecting styles yet.
+   * This allows separating className allocation (render phase) from style injection (insertion phase).
+   */
+  allocateClassName(cacheKey: string, options?: {
+    root?: Document | ShadowRoot;
+  }): {
+    className: string;
+    isNewAllocation: boolean;
+  };
+  /**
+   * Inject styles from StyleResult objects
+   */
+  inject(rules: StyleResult[], options?: {
+    root?: Document | ShadowRoot;
+    cacheKey?: string;
+  }): InjectResult;
+  /**
+   * Inject global styles (rules without a generated tasty class selector)
+   * This ensures we don't reserve a tasty class name (t{number}) for global rules,
+   * which could otherwise collide with element-level styles and break lookups.
+   */
+  injectGlobal(rules: StyleResult[], options?: {
+    root?: Document | ShadowRoot;
+  }): GlobalInjectResult;
+  /**
+   * Inject raw CSS text directly without parsing
+   * This is a low-overhead alternative to createGlobalStyle for raw CSS
+   * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking
+   */
+  injectRawCSS(css: string, options?: {
+    root?: Document | ShadowRoot;
+  }): RawCSSResult;
+  /**
+   * Get raw CSS text for SSR
+   */
+  getRawCSSText(options?: {
+    root?: Document | ShadowRoot;
+  }): string;
+  /**
+   * Increment refCount for an already-injected cacheKey and return a dispose.
+   * Used by useStyles on cache hits (hydration or runtime reuse) where
+   * the pipeline was skipped but refCount tracking is still needed.
+   * Returns null if the cacheKey is not found.
+   */
+  trackRef(cacheKey: string, options?: {
+    root?: Document | ShadowRoot;
+  }): InjectResult | null;
+  /**
+   * Dispose of a className (decrements refCount only).
+   */
+  private dispose;
+  /**
+   * Force bulk cleanup of unused styles
+   */
+  cleanup(root?: Document | ShadowRoot): void;
+  /**
+   * Get CSS text from all sheets (for SSR)
+   */
+  getCssText(options?: {
+    root?: Document | ShadowRoot;
+  }): string;
+  /**
+   * Get CSS only for the provided tasty classNames (e.g., ["t0","t3"])
+   */
+  getCssTextForClasses(classNames: Iterable<string>, options?: {
+    root?: Document | ShadowRoot;
+  }): string;
+  /**
+   * Get cache performance metrics
+   */
+  getMetrics(options?: {
+    root?: Document | ShadowRoot;
+  }): CacheMetrics | null;
+  /**
+   * Reset cache performance metrics
+   */
+  resetMetrics(options?: {
+    root?: Document | ShadowRoot;
+  }): void;
+  /**
+   * Define a CSS @property custom property.
+   *
+   * 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)
+   *
+   * Example:
+   * @property --rotation { syntax: "<angle>"; inherits: false; initial-value: 45deg; }
+   *
+   * Note: No caching or dispose — this defines a global property.
+   *
+   * If the same property is registered with different options, a warning is emitted
+   * but the original definition is preserved (CSS @property cannot be redefined).
+   */
+  property(name: string, options?: PropertyDefinition & {
+    root?: Document | ShadowRoot;
+  }): void;
+  /**
+   * Check whether a given @property name was already injected by this injector.
+   *
+   * Accepts tasty token syntax:
+   * - `$name` → checks `--name`
+   * - `#name` → checks `--name-color`
+   * - `--name` → checks `--name` (legacy format)
+   */
+  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).
+   */
+  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 (first definition wins).
+   */
+  counterStyle(name: string, descriptors: CounterStyleDescriptors, options?: {
+    root?: Document | ShadowRoot;
+  }): void;
+  /**
+   * Inject keyframes and return object with toString() and dispose()
+   *
+   * Keyframes are cached by content (steps). If the same content is injected
+   * multiple times with different provided names, the first injected name is reused.
+   *
+   * If the same name is provided with different content (collision), a unique
+   * name is generated to avoid overwriting the existing keyframes.
+   */
+  keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
+    root?: Document | ShadowRoot;
+    name?: string;
+  }): KeyframesResult;
+  /**
+   * Dispose keyframes
+   */
+  private disposeKeyframes;
+  private static readonly TASTY_CLASS_RE;
+  /**
+   * Record a render-time usage hit for one or more classNames.
+   * Handles space-separated multi-chunk classNames.
+   * When the global touch counter reaches `touchInterval`, schedules a GC
+   * via `requestIdleCallback`.
+   * No-op on the server.
+   */
+  touch(className: string, options?: {
+    root?: Document | ShadowRoot;
+  }): void;
+  /**
+   * Schedule a GC via `requestIdleCallback` (or synchronously as fallback).
+   * Runs GC on all active roots. Avoids double-scheduling via `pendingGCHandle`.
+   */
+  private scheduleGC;
+  /**
+   * Synchronous garbage collection.
+   *
+   * 1. Quick upper-bound check: skip if unused count can't exceed capacity.
+   * 2. Scans the DOM for live tasty classNames (safety guard).
+   * 3. With `force: true`: deletes all unused entries inline.
+   *    Without `force`: collects unused, sorts oldest-first, evicts over capacity.
+   *
+   * @returns Number of styles evicted.
+   */
+  gc(options?: GCOptions): number;
+  /**
+   * Destroy all resources for a root
+   */
+  destroy(root?: Document | ShadowRoot): void;
+}
+//#endregion
+//#region src/utils/color-space.d.ts
+type ColorSpace = 'rgb' | 'hsl' | 'oklch';
+//#endregion
+//#region src/utils/typography.d.ts
+/**
+ * A typography token value: plain value or a state map for responsive/theme-aware presets.
+ *
+ * @example
+ * // Plain value
+ * fontWeight: '400'
+ * // State map
+ * fontWeight: { '': '400', '@dark': '300' }
+ */
+type TypographyTokenValue = string | number | Record<string, string | number | undefined | null | '@inherit'>;
+/**
+ * Typography preset configuration.
+ * Each preset defines font properties that get expanded into CSS custom properties.
+ * All fields accept plain values or state maps for responsive/theme-aware tokens.
+ *
+ * Use with `generateTypographyTokens()` to create typography tokens for your design system.
+ */
+interface TypographyPreset {
+  fontSize: TypographyTokenValue;
+  lineHeight: TypographyTokenValue;
+  letterSpacing?: TypographyTokenValue;
+  fontWeight: TypographyTokenValue;
+  boldFontWeight?: TypographyTokenValue;
+  iconSize?: TypographyTokenValue;
+  textTransform?: TypographyTokenValue;
+  fontFamily?: TypographyTokenValue;
+  fontStyle?: TypographyTokenValue;
+}
+/**
+ * Generate typography tokens with $ prefix for CSS custom properties.
+ *
+ * Each preset generates the following CSS custom properties:
+ * - `${name}-font-size`
+ * - `${name}-line-height`
+ * - `${name}-letter-spacing`
+ * - `${name}-font-weight`
+ * - `${name}-bold-font-weight` (if defined)
+ * - `${name}-icon-size` (if defined)
+ * - `${name}-text-transform` (if defined)
+ * - `${name}-font-family` (if defined)
+ * - `${name}-font-style` (if defined)
+ *
+ * @param presets - Typography presets object
+ * @returns ConfigTokens object with $ prefixed keys
+ *
+ * @example
+ * const customTokens = generateTypographyTokens({
+ *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },
+ *   body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },
+ * });
+ */
+declare function generateTypographyTokens(presets: Record<string, TypographyPreset>): ConfigTokens;
+//#endregion
+//#region src/plugins/types.d.ts
+/**
+ * A tasty plugin that extends the style system with custom functions, units, states, or handlers.
+ */
+interface TastyPlugin {
+  /** Unique name for the plugin (used for debugging and conflict detection) */
+  name: string;
+  /** Custom functions that transform parsed style groups into CSS values */
+  funcs?: Record<string, (groups: StyleDetails[]) => string>;
+  /** Custom units that transform numeric values (e.g., `2x` → `calc(2 * var(--gap))`) */
+  units?: Record<string, string | UnitHandler>;
+  /** Custom state aliases (e.g., `'@mobile': '@media(w < 768px)'`) */
+  states?: Record<string, string>;
+  /**
+   * Custom style handlers that transform style properties into CSS declarations.
+   * Handlers replace built-in handlers for the same style name.
+   * @example
+   * ```ts
+   * handlers: {
+   *   // Simple handler - lookup style inferred from key
+   *   fill: ({ fill }) => fill ? { 'background-color': fill } : undefined,
+   *   // Multi-property handler
+   *   spacing: [['gap', 'padding'], ({ gap, padding }) => ({ ... })],
+   * }
+   * ```
+   */
+  handlers?: Record<string, StyleHandlerDefinition>;
+  /**
+   * Design tokens injected as CSS custom properties on `:root`.
+   * Values are parsed through the Tasty DSL. Supports state maps.
+   * - `$name` → `--name` CSS custom property
+   * - `#name` → `--name-color` and `--name-color-{colorSpace}`
+   */
+  tokens?: ConfigTokens;
+  /** Predefined tokens replaced during style parsing (`$name` or `#name`) */
+  replaceTokens?: Record<`$${string}` | `#${string}`, string | number>;
+  /**
+   * Predefined style recipes -- named style bundles that can be applied via `recipe` style property.
+   * Recipe values are flat tasty styles (no sub-element keys).
+   * @example
+   * ```ts
+   * recipes: {
+   *   card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
+   *   elevated: { shadow: '2x 2x 4x #shadow' },
+   * }
+   * ```
+   */
+  recipes?: Record<string, RecipeStyles>;
+  /**
+   * Typography presets — shorthand for `generateTypographyTokens()`.
+   * Generated tokens are merged under explicit `tokens` (tokens win on conflict).
+   */
+  presets?: Record<string, TypographyPreset>;
+  /**
+   * Global Tasty styles keyed by CSS selector.
+   * Supports the full Tasty style syntax.
+   */
+  globalStyles?: Record<string, Styles>;
+}
+/**
+ * A factory function that creates a TastyPlugin.
+ * Can optionally accept configuration options.
+ *
+ * @example
+ * ```ts
+ * // Plugin without options
+ * const okhslPlugin: TastyPluginFactory = () => ({
+ *   name: 'okhsl',
+ *   funcs: { okhsl: okhslFunc },
+ * });
+ *
+ * // Plugin with options
+ * const debugPlugin: TastyPluginFactory<{ verbose: boolean }> = (options) => ({
+ *   name: 'debug',
+ *   funcs: { debug: createDebugFunc(options.verbose) },
+ * });
+ * ```
+ */
+type TastyPluginFactory<TOptions = void> = TOptions extends void ? () => TastyPlugin : (options: TOptions) => TastyPlugin;
+//#endregion
+//#region src/config.d.ts
+/**
+ * Configuration options for the Tasty style system
+ */
+interface TastyConfig {
+  /** CSP nonce for style elements */
+  nonce?: string;
+  /** Maximum rules per stylesheet (default: 8192) */
+  maxRulesPerSheet?: number;
+  /** Force text injection mode, auto-detected in test environments (default: auto) */
+  forceTextInjection?: boolean;
+  /** Enable development mode features: performance metrics and debug info (default: auto) */
+  devMode?: boolean;
+  /**
+   * Global predefined states for advanced state mapping.
+   * These are state aliases that can be used in any component.
+   * Example: { '@mobile': '@media(w < 920px)', '@dark': '@root(theme=dark)' }
+   */
+  states?: Record<string, string>;
+  /**
+   * Parser LRU cache size (default: 1000).
+   * Larger values improve performance for apps with many unique style values.
+   */
+  parserCacheSize?: number;
+  /**
+   * Custom units for the style parser (merged with built-in units).
+   * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.
+   * @example { em: 'em', vw: 'vw', custom: (n) => `${n * 10}px` }
+   */
+  units?: Record<string, string | UnitHandler>;
+  /**
+   * Custom functions for the style parser (merged with existing).
+   * Functions process parsed style groups and return CSS values.
+   * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
+   */
+  funcs?: Record<string, (groups: StyleDetails[]) => string>;
+  /**
+   * Color space used for decomposed color token companion variables.
+   * Controls the CSS function and suffix for alpha composition.
+   *
+   * - `'rgb'`   — suffix `-rgb`, e.g. `rgb(var(--name-color-rgb) / .5)`
+   * - `'hsl'`   — suffix `-hsl`, e.g. `hsl(var(--name-color-hsl) / .5)`
+   * - `'oklch'` — suffix `-oklch`, e.g. `oklch(var(--name-color-oklch) / .5)`
+   *
+   * @default 'oklch'
+   */
+  colorSpace?: ColorSpace;
+  /**
+   * Automatically infer and register CSS @property declarations
+   * from custom property values found in styles, keyframes, and global config.
+   * Covers all types: \<color\>, \<number\>, \<length\>, \<angle\>, \<percentage\>, \<time\>.
+   * When false, only explicitly declared @properties are registered.
+   * @default true
+   */
+  autoPropertyTypes?: boolean;
+  /**
+   * Garbage collection configuration for unused styles.
+   * GC is triggered by touch count: every `touchInterval` touches, the
+   * oldest unused styles are evicted when their count exceeds `capacity`.
+   * @example
+   * ```ts
+   * configure({
+   *   gc: { touchInterval: 1000, capacity: 1000 },
+   * });
+   * ```
+   */
+  gc?: GCConfig;
+  /**
+   * Plugins that extend tasty with custom functions, units, or states.
+   * Plugins are processed in order, with later plugins overriding earlier ones.
+   * @example
+   * ```ts
+   * import { okhslPlugin } from '@tenphi/tasty';
+   *
+   * configure({
+   *   plugins: [okhslPlugin()],
+   * });
+   * ```
+   */
+  plugins?: TastyPlugin[];
+  /**
+   * Global keyframes definitions that can be referenced by animation names in styles.
+   * Keys are animation names, values are keyframes step definitions.
+   * Keyframes are only injected when actually used in styles.
+   * @example
+   * ```ts
+   * configure({
+   *   keyframes: {
+   *     fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } },
+   *     pulse: { '0%, 100%': { transform: 'scale(1)' }, '50%': { transform: 'scale(1.05)' } },
+   *   },
+   * });
+   * ```
+   */
+  keyframes?: Record<string, KeyframesSteps>;
+  /**
+   * Global CSS @property definitions for custom properties.
+   * Keys use tasty token syntax ($name for properties, #name for colors).
+   *
+   * Tasty ships with `DEFAULT_PROPERTIES` (e.g. `$gap`, `$radius`, `#white`,
+   * `#black`, `#clear`, `#border`, etc.) that are always included.
+   * Properties you specify here are merged on top, so you can override any
+   * default by using the same key.
+   *
+   * For color tokens (#name), `syntax: '<color>'` is auto-set and
+   * `initialValue` defaults to `'transparent'` if not specified.
+   *
+   * @example
+   * ```ts
+   * configure({
+   *   properties: {
+   *     '$rotation': { syntax: '<angle>', initialValue: '0deg' },
+   *     '$scale': { syntax: '<number>', inherits: false, initialValue: 1 },
+   *     '#accent': { initialValue: 'purple' }, // syntax: '<color>' auto-set
+   *     // Override a default property:
+   *     '$gap': { syntax: '<length>', inherits: true, initialValue: '8px' },
+   *   },
+   * });
+   *
+   * // Now use in styles - properties are registered when component renders:
+   * const Spinner = tasty({
+   *   styles: {
+   *     transform: 'rotate($rotation)',
+   *     transition: '$$rotation 0.3s', // outputs: --rotation 0.3s
+   *   },
+   * });
+   * ```
+   */
+  properties?: Record<string, PropertyDefinition>;
+  /**
+   * Global @font-face definitions.
+   * Keys are font-family names, values are descriptors or arrays of descriptors
+   * (for multiple weights/styles of the same family).
+   * Injected eagerly when styles are first generated.
+   * @example
+   * ```ts
+   * configure({
+   *   fontFace: {
+   *     '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' },
+   *     ],
+   *     Icons: { src: 'url("/fonts/icons.woff2") format("woff2")', fontDisplay: 'block' },
+   *   },
+   * });
+   * ```
+   */
+  fontFace?: Record<string, FontFaceInput>;
+  /**
+   * Global @counter-style definitions.
+   * Keys are counter-style names, values are descriptor objects.
+   * Injected eagerly when styles are first generated.
+   * @example
+   * ```ts
+   * configure({
+   *   counterStyle: {
+   *     thumbs: { system: 'cyclic', symbols: '"👍"', suffix: '" "' },
+   *   },
+   * });
+   * ```
+   */
+  counterStyle?: Record<string, CounterStyleDescriptors>;
+  /**
+   * Custom style handlers that transform style properties into CSS declarations.
+   * Handlers replace built-in handlers for the same style name.
+   * @example
+   * ```ts
+   * import { styleHandlers } from '@tenphi/tasty';
+   *
+   * configure({
+   *   handlers: {
+   *     // Override fill with custom behavior
+   *     fill: ({ fill }) => {
+   *       if (fill?.startsWith('gradient:')) {
+   *         return { background: fill.slice(9) };
+   *       }
+   *       return styleHandlers.fill({ fill });
+   *     },
+   *     // Add new custom style
+   *     elevation: ({ elevation }) => {
+   *       const level = parseInt(elevation) || 1;
+   *       return {
+   *         'box-shadow': `0 ${level * 2}px ${level * 4}px rgba(0,0,0,0.1)`,
+   *         'z-index': String(level * 100),
+   *       };
+   *     },
+   *   },
+   * });
+   * ```
+   */
+  handlers?: Record<string, StyleHandlerDefinition>;
+  /**
+   * Design tokens injected as CSS custom properties on `:root`.
+   * Values are parsed through the Tasty DSL. Supports state maps
+   * for responsive/theme-aware tokens.
+   *
+   * - `$name` keys become `--name` CSS custom properties
+   * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties
+   *
+   * Tokens are injected once when the first style is rendered.
+   *
+   * @example
+   * ```ts
+   * configure({
+   *   tokens: {
+   *     '$gap': '4px',
+   *     '#primary': {
+   *       '': '#purple',
+   *       '@dark': '#light-purple',
+   *     },
+   *   },
+   * });
+   * ```
+   */
+  tokens?: ConfigTokens;
+  /**
+   * Predefined tokens that are replaced during style parsing (parse-time substitution).
+   * Use `$name` for custom properties and `#name` for color tokens.
+   * Values are substituted inline before CSS generation, unlike `tokens` which
+   * inject CSS custom properties on `:root`.
+   *
+   * For color tokens (#name), boolean `true` is converted to `transparent`.
+   *
+   * @example
+   * ```ts
+   * configure({
+   *   replaceTokens: {
+   *     $spacing: '2x',
+   *     '#accent': '#purple',
+   *     '#overlay': true, // → transparent
+   *   },
+   * });
+   *
+   * // Now use in styles - tokens are replaced at parse time:
+   * const Card = tasty({
+   *   styles: {
+   *     padding: '$spacing',  // → calc(2 * var(--gap))
+   *     fill: '#accent',      // → var(--purple-color)
+   *   },
+   * });
+   * ```
+   */
+  replaceTokens?: Record<`$${string}`, string | number | boolean> & Record<`#${string}`, string | number | boolean>;
+  /**
+   * Predefined style recipes -- named style bundles that can be applied via `recipe` style property.
+   * Recipe values are flat tasty styles (no sub-element keys). They may contain base styles,
+   * tokens (`$name`/`#name` definitions), local states, `@keyframes`, and `@properties`.
+   *
+   * Components reference recipes via: `recipe: 'name1 name2'` in their styles.
+   * Use `/` to separate base recipes from post recipes: `recipe: 'base1 base2 / post1'`.
+   * Use `none` to skip base recipes: `recipe: 'none / post1'`.
+   * Resolution order: `base_recipes → component styles → post_recipes`.
+   *
+   * Recipes cannot reference other recipes.
+   *
+   * @example
+   * ```ts
+   * configure({
+   *   recipes: {
+   *     card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
+   *     elevated: { shadow: '2x 2x 4x #shadow' },
+   *   },
+   * });
+   *
+   * // Usage in styles:
+   * const Card = tasty({
+   *   styles: {
+   *     recipe: 'card elevated',
+   *     color: '#text', // Overrides recipe values
+   *   },
+   * });
+   * ```
+   */
+  recipes?: Record<string, RecipeStyles>;
+  /**
+   * Typography presets — shorthand for `generateTypographyTokens()`.
+   * Accepts the same input and internally generates typography tokens
+   * that are merged into `tokens`. Explicit `tokens` override preset-generated ones.
+   *
+   * @example
+   * ```ts
+   * configure({
+   *   presets: {
+   *     h1: { fontSize: '32px', lineHeight: '1.2', fontWeight: '700' },
+   *     t2: { fontSize: '16px', lineHeight: '1.5', fontWeight: '400' },
+   *   },
+   *   tokens: {
+   *     // Overrides the preset-generated $t2-font-weight
+   *     '$t2-font-weight': { '': '400', '@dark': '300' },
+   *   },
+   * });
+   * ```
+   */
+  presets?: Record<string, TypographyPreset>;
+  /**
+   * Global Tasty styles keyed by CSS selector.
+   * Each entry applies the full Tasty style syntax (style properties,
+   * tokens, state maps, selector-based sub-styling) to the given selector.
+   * Injected alongside `:root` tokens when the first style is rendered.
+   *
+   * @example
+   * ```ts
+   * configure({
+   *   globalStyles: {
+   *     body: { fill: '#surface', color: '#text', preset: 't2', margin: 0 },
+   *     html: { overflow: 'hidden' },
+   *   },
+   * });
+   * ```
+   */
+  globalStyles?: Record<string, Styles>;
+}
+declare const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
+declare global {
+  interface Window {
+    [GLOBAL_INJECTOR_KEY]?: StyleInjector;
+  }
+  var __TASTY_GLOBAL_INJECTOR__: StyleInjector | undefined;
+}
+/**
+ * Detect if we're running in a test environment
+ */
+declare function isTestEnvironment(): boolean;
+/**
+ * Check if styles have been generated (configuration is locked)
+ */
+declare function hasStylesGenerated(): boolean;
+/**
+ * Check if any global keyframes are configured.
+ * Uses a pre-computed flag to avoid Object.keys() allocation on every call.
+ */
+declare function hasGlobalKeyframes(): boolean;
+/**
+ * Get global keyframes configuration.
+ * Returns null if no keyframes configured (fast path for zero-overhead).
+ */
+declare function getGlobalKeyframes(): Record<string, KeyframesSteps> | null;
+/**
+ * Get global font-face configuration.
+ * Returns null if no font faces configured.
+ * Reads from globalThis first for cross-module SSR support.
+ */
+declare function getGlobalFontFace(): Record<string, FontFaceInput> | null;
+/**
+ * Get global counter-style configuration.
+ * Returns null if no counter styles configured.
+ * Reads from globalThis first for cross-module SSR support.
+ */
+declare function getGlobalCounterStyle(): Record<string, CounterStyleDescriptors> | null;
+/**
+ * Check if any global recipes are configured.
+ * Fast path: returns false if no recipes were ever set.
+ */
+declare function hasGlobalRecipes(): boolean;
+/**
+ * Get global recipes configuration.
+ * Returns null if no recipes configured (fast path for zero-overhead).
+ */
+declare function getGlobalRecipes(): Record<string, RecipeStyles> | null;
+/**
+ * Check if configuration is locked (styles have been generated)
+ */
+declare function isConfigLocked(): boolean;
+/**
+ * Configure the Tasty style system.
+ *
+ * Must be called BEFORE any styles are generated (before first render that uses tasty).
+ * After styles are generated, configuration is locked and calls to configure() will
+ * emit a warning and be ignored.
+ *
+ * @example
+ * ```ts
+ * import { configure } from '@tenphi/tasty';
+ *
+ * // Configure before app renders
+ * configure({
+ *   nonce: 'abc123',
+ *   states: {
+ *     '@mobile': '@media(w < 768px)',
+ *     '@dark': '@root(theme=dark)',
+ *   },
+ * });
+ * ```
+ */
+declare function configure(config?: Partial<TastyConfig>): void;
+/**
+ * Get the current configuration.
+ * If not configured, returns default configuration.
+ */
+declare function getConfig(): TastyConfig;
+/**
+ * Reset configuration (for testing only).
+ * Clears the global injector and allows reconfiguration.
+ */
+declare function resetConfig(): void;
+//#endregion
+export { TypographyTokenValue as _, getGlobalFontFace as a, StyleInjector as b, hasGlobalKeyframes as c, isConfigLocked as d, isTestEnvironment as f, TypographyPreset as g, TastyPluginFactory as h, getGlobalCounterStyle as i, hasGlobalRecipes as l, TastyPlugin as m, configure as n, getGlobalKeyframes as o, resetConfig as p, getConfig as r, getGlobalRecipes as s, TastyConfig as t, hasStylesGenerated as u, generateTypographyTokens as v, SheetManager as x, ColorSpace as y };
+//# sourceMappingURL=config-vuCRkBWX.d.ts.map