@tenphi/tasty 0.0.0-snapshot.c8bdaeb → 0.0.0-snapshot.c8c7b2a

package/dist/utils/typography.d.ts

@@ -1,7 +1,34 @@
-import { Styles } from "../styles/types.js";
-import { TypographyPreset } from "../tokens/typography.js";
+import { ConfigTokens } from "../styles/types.js";
 
 //#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.
  *
@@ -16,21 +43,16 @@ import { TypographyPreset } from "../tokens/typography.js";
  * - `${name}-font-family` (if defined)
  * - `${name}-font-style` (if defined)
  *
- * @param presets - Typography presets object (defaults to TYPOGRAPHY_PRESETS)
- * @returns Styles object with $ prefixed keys
- *
- * @example
- * // Using default presets
- * const tokens = generateTypographyTokens();
- * // tokens['$h1-font-size'] === '36px'
+ * @param presets - Typography presets object
+ * @returns ConfigTokens object with $ prefixed keys
  *
  * @example
- * // Using custom presets
  * const customTokens = generateTypographyTokens({
- *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' }
+ *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },
+ *   body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },
  * });
  */
-declare function generateTypographyTokens(presets?: Record<string, TypographyPreset>): Styles;
+declare function generateTypographyTokens(presets: Record<string, TypographyPreset>): ConfigTokens;
 //#endregion
-export { generateTypographyTokens };
+export { TypographyPreset, TypographyTokenValue, generateTypographyTokens };
 //# sourceMappingURL=typography.d.ts.map

package/dist/utils/typography.js

@@ -1,6 +1,11 @@
-import { TYPOGRAPHY_PRESETS } from "../tokens/typography.js";
-
 //#region src/utils/typography.ts
+const RESERVED_PRESET_NAMES = new Set([
+	"strong",
+	"bold",
+	"italic",
+	"icon",
+	"tight"
+]);
 /**
 * Generate typography tokens with $ prefix for CSS custom properties.
 *
@@ -15,31 +20,24 @@ import { TYPOGRAPHY_PRESETS } from "../tokens/typography.js";
 * - `${name}-font-family` (if defined)
 * - `${name}-font-style` (if defined)
 *
-* @param presets - Typography presets object (defaults to TYPOGRAPHY_PRESETS)
-* @returns Styles object with $ prefixed keys
-*
-* @example
-* // Using default presets
-* const tokens = generateTypographyTokens();
-* // tokens['$h1-font-size'] === '36px'
+* @param presets - Typography presets object
+* @returns ConfigTokens object with $ prefixed keys
 *
 * @example
-* // Using custom presets
 * const customTokens = generateTypographyTokens({
-*   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' }
+*   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },
+*   body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },
 * });
 */
-function generateTypographyTokens(presets = TYPOGRAPHY_PRESETS) {
+function generateTypographyTokens(presets) {
 	const tokens = {};
 	for (const [name, preset] of Object.entries(presets)) {
+		if (RESERVED_PRESET_NAMES.has(name)) throw new Error(`Invalid typography preset name "${name}". This name is reserved as a preset modifier.`);
 		tokens[`$${name}-font-size`] = preset.fontSize;
 		tokens[`$${name}-line-height`] = preset.lineHeight;
-		tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? "0";
+		tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? "normal";
 		tokens[`$${name}-font-weight`] = preset.fontWeight;
-		if (preset.boldFontWeight !== void 0) {
-			const boldKey = name === "c1" ? `$${name}-font-bold-weight` : `$${name}-bold-font-weight`;
-			tokens[boldKey] = preset.boldFontWeight;
-		}
+		if (preset.boldFontWeight !== void 0) tokens[`$${name}-bold-font-weight`] = preset.boldFontWeight;
 		if (preset.iconSize !== void 0) tokens[`$${name}-icon-size`] = preset.iconSize;
 		if (preset.textTransform !== void 0) tokens[`$${name}-text-transform`] = preset.textTransform;
 		if (preset.fontFamily !== void 0) tokens[`$${name}-font-family`] = preset.fontFamily;
@@ -47,7 +45,7 @@ function generateTypographyTokens(presets = TYPOGRAPHY_PRESETS) {
 	}
 	return tokens;
 }
-
 //#endregion
 export { generateTypographyTokens };
+
 //# sourceMappingURL=typography.js.map

package/dist/utils/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","names":[],"sources":["../../src/utils/typography.ts"],"sourcesContent":["import type { TypographyPreset } from '../tokens/typography';\nimport { TYPOGRAPHY_PRESETS } from '../tokens/typography';\n\nimport type { Styles } from '../styles/types';\n\n// Re-export types for convenience\nexport type { TypographyPreset };\n\n/**\n * Generate typography tokens with $ prefix for CSS custom properties.\n *\n * Each preset generates the following CSS custom properties:\n * - `${name}-font-size`\n * - `${name}-line-height`\n * - `${name}-letter-spacing`\n * - `${name}-font-weight`\n * - `${name}-bold-font-weight` (if defined)\n * - `${name}-icon-size` (if defined)\n * - `${name}-text-transform` (if defined)\n * - `${name}-font-family` (if defined)\n * - `${name}-font-style` (if defined)\n *\n * @param presets - Typography presets object (defaults to TYPOGRAPHY_PRESETS)\n * @returns Styles object with $ prefixed keys\n *\n * @example\n * // Using default presets\n * const tokens = generateTypographyTokens();\n * // tokens['$h1-font-size'] === '36px'\n *\n * @example\n * // Using custom presets\n * const customTokens = generateTypographyTokens({\n *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' }\n * });\n */\nexport function generateTypographyTokens(\n  presets: Record<string, TypographyPreset> = TYPOGRAPHY_PRESETS,\n): Styles {\n  const tokens: Record<string, string | number> = {};\n\n  for (const [name, preset] of Object.entries(presets)) {\n    tokens[`$${name}-font-size`] = preset.fontSize;\n    tokens[`$${name}-line-height`] = preset.lineHeight;\n    tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? '0';\n    tokens[`$${name}-font-weight`] = preset.fontWeight;\n\n    if (preset.boldFontWeight !== undefined) {\n      // Handle different property naming for c1 (uses font-bold-weight instead of bold-font-weight)\n      const boldKey =\n        name === 'c1'\n          ? `$${name}-font-bold-weight`\n          : `$${name}-bold-font-weight`;\n      tokens[boldKey] = preset.boldFontWeight;\n    }\n\n    if (preset.iconSize !== undefined) {\n      tokens[`$${name}-icon-size`] = preset.iconSize;\n    }\n\n    if (preset.textTransform !== undefined) {\n      tokens[`$${name}-text-transform`] = preset.textTransform;\n    }\n\n    if (preset.fontFamily !== undefined) {\n      tokens[`$${name}-font-family`] = preset.fontFamily;\n    }\n\n    if (preset.fontStyle !== undefined) {\n      tokens[`$${name}-font-style`] = preset.fontStyle;\n    }\n  }\n\n  return tokens as Styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,yBACd,UAA4C,oBACpC;CACR,MAAM,SAA0C,EAAE;AAElD,MAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,QAAQ,EAAE;AACpD,SAAO,IAAI,KAAK,eAAe,OAAO;AACtC,SAAO,IAAI,KAAK,iBAAiB,OAAO;AACxC,SAAO,IAAI,KAAK,oBAAoB,OAAO,iBAAiB;AAC5D,SAAO,IAAI,KAAK,iBAAiB,OAAO;AAExC,MAAI,OAAO,mBAAmB,QAAW;GAEvC,MAAM,UACJ,SAAS,OACL,IAAI,KAAK,qBACT,IAAI,KAAK;AACf,UAAO,WAAW,OAAO;;AAG3B,MAAI,OAAO,aAAa,OACtB,QAAO,IAAI,KAAK,eAAe,OAAO;AAGxC,MAAI,OAAO,kBAAkB,OAC3B,QAAO,IAAI,KAAK,oBAAoB,OAAO;AAG7C,MAAI,OAAO,eAAe,OACxB,QAAO,IAAI,KAAK,iBAAiB,OAAO;AAG1C,MAAI,OAAO,cAAc,OACvB,QAAO,IAAI,KAAK,gBAAgB,OAAO;;AAI3C,QAAO"}
+{"version":3,"file":"typography.js","names":[],"sources":["../../src/utils/typography.ts"],"sourcesContent":["import type { ConfigTokens } from '../styles/types';\n\nconst RESERVED_PRESET_NAMES = new Set([\n  'strong',\n  'bold',\n  'italic',\n  'icon',\n  'tight',\n]);\n\n/**\n * A typography token value: plain value or a state map for responsive/theme-aware presets.\n *\n * @example\n * // Plain value\n * fontWeight: '400'\n * // State map\n * fontWeight: { '': '400', '@dark': '300' }\n */\nexport type TypographyTokenValue =\n  | string\n  | number\n  | Record<string, string | number | undefined | null | '@inherit'>;\n\n/**\n * Typography preset configuration.\n * Each preset defines font properties that get expanded into CSS custom properties.\n * All fields accept plain values or state maps for responsive/theme-aware tokens.\n *\n * Use with `generateTypographyTokens()` to create typography tokens for your design system.\n */\nexport interface TypographyPreset {\n  fontSize: TypographyTokenValue;\n  lineHeight: TypographyTokenValue;\n  letterSpacing?: TypographyTokenValue;\n  fontWeight: TypographyTokenValue;\n  boldFontWeight?: TypographyTokenValue;\n  iconSize?: TypographyTokenValue;\n  textTransform?: TypographyTokenValue;\n  fontFamily?: TypographyTokenValue;\n  fontStyle?: TypographyTokenValue;\n}\n\n/**\n * Generate typography tokens with $ prefix for CSS custom properties.\n *\n * Each preset generates the following CSS custom properties:\n * - `${name}-font-size`\n * - `${name}-line-height`\n * - `${name}-letter-spacing`\n * - `${name}-font-weight`\n * - `${name}-bold-font-weight` (if defined)\n * - `${name}-icon-size` (if defined)\n * - `${name}-text-transform` (if defined)\n * - `${name}-font-family` (if defined)\n * - `${name}-font-style` (if defined)\n *\n * @param presets - Typography presets object\n * @returns ConfigTokens object with $ prefixed keys\n *\n * @example\n * const customTokens = generateTypographyTokens({\n *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },\n *   body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },\n * });\n */\nexport function generateTypographyTokens(\n  presets: Record<string, TypographyPreset>,\n): ConfigTokens {\n  const tokens: ConfigTokens = {} as ConfigTokens;\n\n  for (const [name, preset] of Object.entries(presets)) {\n    if (RESERVED_PRESET_NAMES.has(name)) {\n      throw new Error(\n        `Invalid typography preset name \"${name}\". This name is reserved as a preset modifier.`,\n      );\n    }\n\n    tokens[`$${name}-font-size`] = preset.fontSize;\n    tokens[`$${name}-line-height`] = preset.lineHeight;\n    tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? 'normal';\n    tokens[`$${name}-font-weight`] = preset.fontWeight;\n\n    if (preset.boldFontWeight !== undefined) {\n      tokens[`$${name}-bold-font-weight`] = preset.boldFontWeight;\n    }\n\n    if (preset.iconSize !== undefined) {\n      tokens[`$${name}-icon-size`] = preset.iconSize;\n    }\n\n    if (preset.textTransform !== undefined) {\n      tokens[`$${name}-text-transform`] = preset.textTransform;\n    }\n\n    if (preset.fontFamily !== undefined) {\n      tokens[`$${name}-font-family`] = preset.fontFamily;\n    }\n\n    if (preset.fontStyle !== undefined) {\n      tokens[`$${name}-font-style`] = preset.fontStyle;\n    }\n  }\n\n  return tokens;\n}\n"],"mappings":";AAEA,MAAM,wBAAwB,IAAI,IAAI;CACpC;CACA;CACA;CACA;CACA;CACD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AA0DF,SAAgB,yBACd,SACc;CACd,MAAM,SAAuB,EAAE;AAE/B,MAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,QAAQ,EAAE;AACpD,MAAI,sBAAsB,IAAI,KAAK,CACjC,OAAM,IAAI,MACR,mCAAmC,KAAK,gDACzC;AAGH,SAAO,IAAI,KAAK,eAAe,OAAO;AACtC,SAAO,IAAI,KAAK,iBAAiB,OAAO;AACxC,SAAO,IAAI,KAAK,oBAAoB,OAAO,iBAAiB;AAC5D,SAAO,IAAI,KAAK,iBAAiB,OAAO;AAExC,MAAI,OAAO,mBAAmB,KAAA,EAC5B,QAAO,IAAI,KAAK,sBAAsB,OAAO;AAG/C,MAAI,OAAO,aAAa,KAAA,EACtB,QAAO,IAAI,KAAK,eAAe,OAAO;AAGxC,MAAI,OAAO,kBAAkB,KAAA,EAC3B,QAAO,IAAI,KAAK,oBAAoB,OAAO;AAG7C,MAAI,OAAO,eAAe,KAAA,EACxB,QAAO,IAAI,KAAK,iBAAiB,OAAO;AAG1C,MAAI,OAAO,cAAc,KAAA,EACvB,QAAO,IAAI,KAAK,gBAAgB,OAAO;;AAI3C,QAAO"}

package/dist/utils/warnings.js

@@ -10,7 +10,7 @@ function deprecationWarning(condition, { property, name, betterAlternative, reas
 	if (reason) warn(`Reason: ${typeof reason === "function" ? reason() : reason}`);
 	console.groupEnd();
 }
-
 //#endregion
 export { deprecationWarning, warn };
+
 //# sourceMappingURL=warnings.js.map

package/dist/zero/babel.d.ts

@@ -1,108 +1,81 @@
-import { KeyframesSteps } from "../injector/types.js";
-import { StyleDetails, UnitHandler } from "../parser/types.js";
-import { StyleHandlerDefinition } from "../utils/styles.js";
-import { RecipeStyles } from "../styles/types.js";
-import { TastyPlugin } from "../plugins/types.js";
-import * as _babel_core0 from "@babel/core";
+import { TastyConfig } from "../config.js";
+import * as _$_babel_core0 from "@babel/core";
 import { PluginPass } from "@babel/core";
 
 //#region src/zero/babel.d.ts
 /**
  * Build-time configuration for zero-runtime mode.
- * Subset of TastyConfig that applies at build time.
+ * Subset of TastyConfig excluding runtime-only DOM options
+ * (`nonce`, `maxRulesPerSheet`, `forceTextInjection`, `gc`)
+ * and overriding `devMode` default to `false`.
  */
-interface TastyZeroConfig {
-  /**
-   * Global predefined states for advanced state mapping.
-   * Example: { '@mobile': '@media(w < 768px)', '@dark': '@root(theme=dark)' }
-   */
-  states?: Record<string, string>;
+type TastyZeroConfig = Omit<TastyConfig, 'nonce' | 'maxRulesPerSheet' | 'forceTextInjection' | 'gc' | 'devMode'> & {
   /**
    * Enable development mode features: source comments in generated CSS.
-   * Default: false
+   * @default false
    */
   devMode?: boolean;
+};
+interface TastyZeroBabelOptions {
+  /** Output path for generated CSS (default: 'tasty.css') */
+  output?: string;
   /**
-   * Parser LRU cache size (default: 1000).
-   * Larger values improve performance for builds 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(' ') }
+   * Tasty configuration for build-time processing.
+   * Can be a static object or a factory function that returns fresh config.
+   * A factory is called on each plugin invocation, enabling hot reload
+   * of config values that depend on external files (e.g. theme tokens).
    */
-  funcs?: Record<string, (groups: StyleDetails[]) => string>;
+  config?: TastyZeroConfig | (() => TastyZeroConfig);
   /**
-   * Plugins that extend tasty with custom functions, units, states, handlers, or tokens.
-   * Plugins are processed in order, with later plugins overriding earlier ones.
-   * @example
-   * ```ts
-   * import { okhslPlugin } from '@tenphi/tasty';
+   * Absolute path to a TypeScript/JavaScript module that default-exports
+   * a `TastyZeroConfig` object. The module is loaded via jiti on each
+   * plugin invocation, enabling hot reload when the file changes.
    *
-   * // babel.config.js
-   * module.exports = {
-   *   plugins: [
-   *     ['@tenphi/tasty/babel-plugin', {
-   *       config: { plugins: [okhslPlugin()] }
-   *     }]
-   *   ]
-   * };
-   * ```
-   */
-  plugins?: TastyPlugin[];
-  /**
-   * Global keyframes definitions for static extraction.
-   * Keys are animation names, values are keyframes step definitions.
-   * @example { fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } } }
+   * This option is JSON-serializable and is the primary way Turbopack
+   * passes config to the Babel plugin (since Turbopack loader options
+   * must be plain primitives/objects/arrays).
+   *
+   * When both `config` and `configFile` are set, `config` takes precedence.
+   *
+   * @example '/absolute/path/to/tasty-zero.config.ts'
    */
-  keyframes?: Record<string, KeyframesSteps>;
+  configFile?: string;
   /**
-   * Custom style handlers that transform style properties into CSS declarations.
-   * Handlers replace built-in handlers for the same style name.
-   * @example
-   * ```ts
-   * handlers: {
-   *   fill: ({ fill }) => fill ? { 'background-color': fill } : undefined,
-   *   elevation: ({ elevation }) => ({
-   *     'box-shadow': `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`,
-   *   }),
-   * }
-   * ```
+   * Absolute file paths whose content affects the generated CSS.
+   * When any of these files change, babel-loader invalidates its cache
+   * and re-runs the plugin with fresh config values.
+   *
+   * Typically includes theme files that define Glaze palettes or token values.
+   * Paths must be absolute (resolved by the Next.js wrapper).
    */
-  handlers?: Record<string, StyleHandlerDefinition>;
+  configDeps?: string[];
   /**
-   * Predefined tokens that are replaced during style parsing.
-   * Use `$name` for custom properties and `#name` for color tokens.
-   * @example { $spacing: '2x', '#accent': '#purple' }
+   * Automatically replace `@tenphi/tasty/static` imports with an import
+   * of the generated CSS file. This eliminates the need for users to
+   * manually import the CSS in their app entry point.
+   *
+   * @default true
    */
-  tokens?: Record<`$${string}` | `#${string}`, string | number>;
+  injectImport?: 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).
-   * @example
-   * ```ts
-   * recipes: {
-   *   card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
-   *   elevated: { shadow: '2x 2x 4x #shadow' },
-   * }
-   * ```
+   * Output mode for extracted CSS.
+   *
+   * - `'file'` (default): CSS is written to a single output file and
+   *   the `@tenphi/tasty/static` import is rewritten to import that file.
+   * - `'inject'`: CSS is embedded inline in the JS output and injected
+   *   at runtime via a tiny injector from `@tenphi/tasty/static/inject`.
+   *   No CSS file is written. Each `tastyStatic` call becomes
+   *   self-contained. Best for reusable components and extensions.
+   *
+   * When `mode` is `'inject'`, `output` and `injectImport` are ignored.
+   *
+   * @default 'file'
    */
-  recipes?: Record<string, RecipeStyles>;
-}
-interface TastyZeroBabelOptions {
-  /** Output path for generated CSS (default: 'tasty.css') */
-  output?: string;
-  /** Tasty configuration for build-time processing */
-  config?: TastyZeroConfig;
+  mode?: 'file' | 'inject';
 }
-declare const _default: (api: object, options: TastyZeroBabelOptions | null | undefined, dirname: string) => _babel_core0.PluginObj<PluginPass>;
+/** Clear the shared CSSWriter cache. Exposed for testing. */
+declare function clearWriterCache(): void;
+declare const _default: (api: object, options: TastyZeroBabelOptions | null | undefined, dirname: string) => _$_babel_core0.PluginObj<PluginPass>;
 //#endregion
-export { TastyZeroBabelOptions, TastyZeroConfig, _default as default };
+export { TastyZeroBabelOptions, TastyZeroConfig, clearWriterCache, _default as default };
 //# sourceMappingURL=babel.d.ts.map