@csszyx/runtime 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -1,68 +1,8 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  DEFAULT_RUNTIME_CONFIG: () => DEFAULT_RUNTIME_CONFIG,
-  VERSION: () => VERSION,
-  __szColorVar: () => import_color_var.__szColorVar,
-  _sz: () => _sz,
-  _sz2: () => _sz2,
-  _sz3: () => _sz3,
-  _szIf: () => _szIf,
-  _szMerge: () => _szMerge,
-  _szSwitch: () => _szSwitch,
-  abortHydration: () => abortHydration,
-  attemptCSRRecovery: () => attemptCSRRecovery,
-  clearHydrationErrors: () => clearHydrationErrors,
-  disableCSRRecovery: () => disableCSRRecovery,
-  enableCSRRecovery: () => enableCSRRecovery,
-  endHydration: () => endHydration,
-  getAbortedSubtreeCount: () => getAbortedSubtreeCount,
-  getHydrationErrors: () => getHydrationErrors,
-  getRecoveryMode: () => getRecoveryMode,
-  getRuntimeConfig: () => getRuntimeConfig,
-  getSSRContext: () => getSSRContext,
-  guardHydration: () => guardHydration,
-  hasRecoveryToken: () => hasRecoveryToken,
-  initRuntime: () => initRuntime,
-  isCSRRecoveryAllowed: () => isCSRRecoveryAllowed,
-  isHydrating: () => isHydrating,
-  isHydrationAborted: () => isHydrationAborted,
-  isRuntimeInitialized: () => isRuntimeInitialized,
-  isSSREnvironment: () => isSSREnvironment,
-  isValidManifest: () => isValidManifest,
-  loadMangleMapFromDOM: () => loadMangleMapFromDOM,
-  loadManifestFromDOM: () => loadManifestFromDOM,
-  resetRuntime: () => resetRuntime,
-  startHydration: () => startHydration,
-  szv: () => szv,
-  validateHydrationClass: () => validateHydrationClass,
-  verifyAllTokens: () => verifyAllTokens,
-  verifyMangleChecksum: () => verifyMangleChecksum,
-  verifyMangleMapIntegrity: () => verifyMangleMapIntegrity,
-  verifyRecoveryToken: () => verifyRecoveryToken
-});
-module.exports = __toCommonJS(src_exports);
+const browser = require('@csszyx/compiler/browser');
+const colorVar = require('@csszyx/compiler/color-var');
 
-// src/verify.ts
 function verifyRecoveryToken(element, manifest) {
   const token = element.getAttribute("data-sz-recovery-token");
   if (!token) {
@@ -134,8 +74,7 @@ function getRecoveryMode(element) {
   return null;
 }
 
-// src/hydration.ts
-var state = {
+const state = {
   errors: [],
   abortedSubtrees: /* @__PURE__ */ new Set(),
   recoveryAllowed: false
@@ -209,10 +148,7 @@ function verifyMangleMapIntegrity() {
 }
 function abortHydration(element, error) {
   state.abortedSubtrees.add(element);
-  console.error(
-    `[csszyx] Hydration aborted at ${element.tagName}:`,
-    error.message
-  );
+  console.error(`[csszyx] Hydration aborted at ${element.tagName}:`, error.message);
   element.setAttribute("data-sz-hydration-aborted", error.timestamp.toString());
   element.setAttribute("data-sz-abort-reason", error.type);
   element.setAttribute("data-sz-interactive", "false");
@@ -321,8 +257,6 @@ function endHydration() {
   }
 }
 
-// src/concatenate.ts
-var import_browser = require("@csszyx/compiler/browser");
 function _sz(...classes) {
   if (classes.length === 1) {
     const cls = classes[0];
@@ -332,7 +266,7 @@ function _sz(...classes) {
     if (!cls) {
       return "";
     }
-    const res = (0, import_browser.transform)(cls);
+    const res = browser.transform(cls);
     return typeof res === "string" ? res : res.className;
   }
   let result = "";
@@ -342,7 +276,7 @@ function _sz(...classes) {
     if (!cls) {
       continue;
     }
-    const res = typeof cls === "string" ? cls : (0, import_browser.transform)(cls);
+    const res = typeof cls === "string" ? cls : browser.transform(cls);
     const str = typeof res === "string" ? res : res.className;
     if (!str) {
       continue;
@@ -363,7 +297,7 @@ function _szIf(condition, truthyValue, falsyValue) {
   if (typeof value === "string") {
     return value;
   }
-  const res = (0, import_browser.transform)(value);
+  const res = browser.transform(value);
   return typeof res === "string" ? res : res.className;
 }
 function _szSwitch(conditions, defaultValue = "") {
@@ -376,7 +310,7 @@ function _szSwitch(conditions, defaultValue = "") {
       if (typeof value === "string") {
         return value;
       }
-      const res2 = (0, import_browser.transform)(value);
+      const res2 = browser.transform(value);
       return typeof res2 === "string" ? res2 : res2.className;
     }
   }
@@ -386,7 +320,7 @@ function _szSwitch(conditions, defaultValue = "") {
   if (typeof defaultValue === "string") {
     return defaultValue;
   }
-  const res = (0, import_browser.transform)(defaultValue);
+  const res = browser.transform(defaultValue);
   return typeof res === "string" ? res : res.className;
 }
 function _szMerge(...classes) {
@@ -397,7 +331,7 @@ function _szMerge(...classes) {
     if (!cls) {
       continue;
     }
-    const res = typeof cls === "string" ? cls : (0, import_browser.transform)(cls);
+    const res = typeof cls === "string" ? cls : browser.transform(cls);
     const str = typeof res === "string" ? res : res.className;
     if (!str) {
       continue;
@@ -420,7 +354,7 @@ function _sz2(a, b) {
   if (!b) {
     return a;
   }
-  return a + " " + b;
+  return `${a} ${b}`;
 }
 function _sz3(a, b, c) {
   let result = "";
@@ -445,7 +379,6 @@ function _sz3(a, b, c) {
   return result;
 }
 
-// src/variants.ts
 function deepMerge(target, source) {
   const result = { ...target };
   for (const key of Object.keys(source)) {
@@ -485,18 +418,14 @@ function szv(config) {
   };
 }
 
-// src/lite.ts
-var import_color_var = require("@csszyx/compiler/color-var");
-
-// src/index.ts
-var VERSION = "0.0.0";
-var DEFAULT_RUNTIME_CONFIG = {
+const VERSION = "0.0.0";
+const DEFAULT_RUNTIME_CONFIG = {
   development: false,
   allowCSRRecovery: false,
   strictHydration: true,
   debug: false
 };
-var runtimeState = {
+const runtimeState = {
   config: { ...DEFAULT_RUNTIME_CONFIG },
   initialized: false
 };
@@ -529,45 +458,43 @@ function resetRuntime() {
   runtimeState.config = { ...DEFAULT_RUNTIME_CONFIG };
   runtimeState.initialized = false;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DEFAULT_RUNTIME_CONFIG,
-  VERSION,
-  __szColorVar,
-  _sz,
-  _sz2,
-  _sz3,
-  _szIf,
-  _szMerge,
-  _szSwitch,
-  abortHydration,
-  attemptCSRRecovery,
-  clearHydrationErrors,
-  disableCSRRecovery,
-  enableCSRRecovery,
-  endHydration,
-  getAbortedSubtreeCount,
-  getHydrationErrors,
-  getRecoveryMode,
-  getRuntimeConfig,
-  getSSRContext,
-  guardHydration,
-  hasRecoveryToken,
-  initRuntime,
-  isCSRRecoveryAllowed,
-  isHydrating,
-  isHydrationAborted,
-  isRuntimeInitialized,
-  isSSREnvironment,
-  isValidManifest,
-  loadMangleMapFromDOM,
-  loadManifestFromDOM,
-  resetRuntime,
-  startHydration,
-  szv,
-  validateHydrationClass,
-  verifyAllTokens,
-  verifyMangleChecksum,
-  verifyMangleMapIntegrity,
-  verifyRecoveryToken
-});
+
+exports.__szColorVar = colorVar.__szColorVar;
+exports.DEFAULT_RUNTIME_CONFIG = DEFAULT_RUNTIME_CONFIG;
+exports.VERSION = VERSION;
+exports._sz = _sz;
+exports._sz2 = _sz2;
+exports._sz3 = _sz3;
+exports._szIf = _szIf;
+exports._szMerge = _szMerge;
+exports._szSwitch = _szSwitch;
+exports.abortHydration = abortHydration;
+exports.attemptCSRRecovery = attemptCSRRecovery;
+exports.clearHydrationErrors = clearHydrationErrors;
+exports.disableCSRRecovery = disableCSRRecovery;
+exports.enableCSRRecovery = enableCSRRecovery;
+exports.endHydration = endHydration;
+exports.getAbortedSubtreeCount = getAbortedSubtreeCount;
+exports.getHydrationErrors = getHydrationErrors;
+exports.getRecoveryMode = getRecoveryMode;
+exports.getRuntimeConfig = getRuntimeConfig;
+exports.getSSRContext = getSSRContext;
+exports.guardHydration = guardHydration;
+exports.hasRecoveryToken = hasRecoveryToken;
+exports.initRuntime = initRuntime;
+exports.isCSRRecoveryAllowed = isCSRRecoveryAllowed;
+exports.isHydrating = isHydrating;
+exports.isHydrationAborted = isHydrationAborted;
+exports.isRuntimeInitialized = isRuntimeInitialized;
+exports.isSSREnvironment = isSSREnvironment;
+exports.isValidManifest = isValidManifest;
+exports.loadMangleMapFromDOM = loadMangleMapFromDOM;
+exports.loadManifestFromDOM = loadManifestFromDOM;
+exports.resetRuntime = resetRuntime;
+exports.startHydration = startHydration;
+exports.szv = szv;
+exports.validateHydrationClass = validateHydrationClass;
+exports.verifyAllTokens = verifyAllTokens;
+exports.verifyMangleChecksum = verifyMangleChecksum;
+exports.verifyMangleMapIntegrity = verifyMangleMapIntegrity;
+exports.verifyRecoveryToken = verifyRecoveryToken;

package/dist/index.d.cts

@@ -135,81 +135,6 @@ declare function _sz2(a: string, b: string): string;
  */
 declare function _sz3(a: string, b: string, c: string): string;
 
-/**
- * szv() — variant-based sz object factory.
- *
- * CVA-equivalent but returns sz objects instead of className strings,
- * keeping DX consistent with the sz prop throughout. Use with the sz prop
- * (build-time transform) or with sz() from @csszyx/dynamic (runtime injection).
- *
- * @module @csszyx/runtime/variants
- */
-
-/**
- *
- */
-type VariantSchema = Record<string, Record<string, SzObject>>;
-/**
- *
- */
-type VariantSelection<V extends VariantSchema> = {
-    [K in keyof V]?: keyof V[K] | null | undefined;
-};
-/**
- *
- */
-interface SzvConfig<V extends VariantSchema> {
-    base?: SzObject;
-    variants: V;
-    defaultVariants?: Partial<VariantSelection<V>>;
-}
-/**
- * Creates a variant-based sz object factory with strong TypeScript inference.
- *
- * TypeScript catches invalid variant values at compile time — no runtime
- * surprises. All variant objects are plain sz objects, fully compatible
- * with the sz prop and @csszyx/dynamic's sz() function.
- *
- * @param {SzvConfig<V>} config - Variant configuration with base, variants, and defaultVariants
- * @returns {Function} A factory function that accepts a variant selection and returns an SzObject
- *
- * @example
- * ```tsx
- * import { szv } from 'csszyx';
- *
- * const buttonSz = szv({
- *   base: { inlineFlex: true, items: 'center', rounded: 'md', fontWeight: 'medium' },
- *   variants: {
- *     variant: {
- *       default: { bg: 'primary', text: 'primary-foreground' },
- *       outline: { border: true, borderColor: 'blue-500', bg: 'transparent' },
- *       ghost:   { hover: { bg: 'accent' } },
- *     },
- *     size: {
- *       sm: { h: 9,  px: 3, text: 'sm' },
- *       md: { h: 10, px: 4 },
- *       lg: { h: 11, px: 8 },
- *     },
- *   },
- *   defaultVariants: { variant: 'default', size: 'md' },
- * });
- *
- * // Usage — consistent with sz prop, TypeScript catches invalid values
- * <button sz={buttonSz({ variant: 'outline', size: 'sm' })} />
- *
- * // Compose with sz array syntax
- * <button sz={[
- *   buttonSz({ variant: props.variant, size: props.size }),
- *   isLoading && { opacity: 50, cursor: 'wait' },
- * ]} />
- *
- * // With @csszyx/dynamic for fully runtime-resolved styling
- * const { sz } = useSz();
- * <button className={sz(buttonSz({ variant: props.variant }))} />
- * ```
- */
-declare function szv<V extends VariantSchema>(config: SzvConfig<V>): (selection?: VariantSelection<V>) => SzObject;
-
 /**
  * Recovery Token Verification - Runtime validation of recovery tokens.
  *
@@ -687,6 +612,81 @@ declare function startHydration(): void;
  */
 declare function endHydration(): void;
 
+/**
+ * szv() — variant-based sz object factory.
+ *
+ * CVA-equivalent but returns sz objects instead of className strings,
+ * keeping DX consistent with the sz prop throughout. Use with the sz prop
+ * (build-time transform) or with sz() from @csszyx/dynamic (runtime injection).
+ *
+ * @module @csszyx/runtime/variants
+ */
+
+/**
+ *
+ */
+type VariantSchema = Record<string, Record<string, SzObject>>;
+/**
+ *
+ */
+type VariantSelection<V extends VariantSchema> = {
+    [K in keyof V]?: keyof V[K] | null | undefined;
+};
+/**
+ *
+ */
+interface SzvConfig<V extends VariantSchema> {
+    base?: SzObject;
+    variants: V;
+    defaultVariants?: Partial<VariantSelection<V>>;
+}
+/**
+ * Creates a variant-based sz object factory with strong TypeScript inference.
+ *
+ * TypeScript catches invalid variant values at compile time — no runtime
+ * surprises. All variant objects are plain sz objects, fully compatible
+ * with the sz prop and @csszyx/dynamic's sz() function.
+ *
+ * @param {SzvConfig<V>} config - Variant configuration with base, variants, and defaultVariants
+ * @returns {Function} A factory function that accepts a variant selection and returns an SzObject
+ *
+ * @example
+ * ```tsx
+ * import { szv } from 'csszyx';
+ *
+ * const buttonSz = szv({
+ *   base: { inlineFlex: true, items: 'center', rounded: 'md', fontWeight: 'medium' },
+ *   variants: {
+ *     variant: {
+ *       default: { bg: 'primary', text: 'primary-foreground' },
+ *       outline: { border: true, borderColor: 'blue-500', bg: 'transparent' },
+ *       ghost:   { hover: { bg: 'accent' } },
+ *     },
+ *     size: {
+ *       sm: { h: 9,  px: 3, text: 'sm' },
+ *       md: { h: 10, px: 4 },
+ *       lg: { h: 11, px: 8 },
+ *     },
+ *   },
+ *   defaultVariants: { variant: 'default', size: 'md' },
+ * });
+ *
+ * // Usage — consistent with sz prop, TypeScript catches invalid values
+ * <button sz={buttonSz({ variant: 'outline', size: 'sm' })} />
+ *
+ * // Compose with sz array syntax
+ * <button sz={[
+ *   buttonSz({ variant: props.variant, size: props.size }),
+ *   isLoading && { opacity: 50, cursor: 'wait' },
+ * ]} />
+ *
+ * // With @csszyx/dynamic for fully runtime-resolved styling
+ * const { sz } = useSz();
+ * <button className={sz(buttonSz({ variant: props.variant }))} />
+ * ```
+ */
+declare function szv<V extends VariantSchema>(config: SzvConfig<V>): (selection?: VariantSelection<V>) => SzObject;
+
 /**
  * @csszyx/runtime - Runtime package for csszyx.
  *
@@ -769,4 +769,5 @@ declare function isRuntimeInitialized(): boolean;
  */
 declare function resetRuntime(): void;
 
-export { DEFAULT_RUNTIME_CONFIG, type HydrationError, type HydrationErrorType, type MangleMap, type RecoveryManifest, type RecoveryMode, type RuntimeConfig, type SSRContext, type SzInput, type TokenData, VERSION, type VerificationResult, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };
+export { DEFAULT_RUNTIME_CONFIG, VERSION, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };
+export type { HydrationError, HydrationErrorType, MangleMap, RecoveryManifest, RecoveryMode, RuntimeConfig, SSRContext, SzInput, TokenData, VerificationResult };

package/dist/{index.d.ts → index.d.mts}

@@ -135,81 +135,6 @@ declare function _sz2(a: string, b: string): string;
  */
 declare function _sz3(a: string, b: string, c: string): string;
 
-/**
- * szv() — variant-based sz object factory.
- *
- * CVA-equivalent but returns sz objects instead of className strings,
- * keeping DX consistent with the sz prop throughout. Use with the sz prop
- * (build-time transform) or with sz() from @csszyx/dynamic (runtime injection).
- *
- * @module @csszyx/runtime/variants
- */
-
-/**
- *
- */
-type VariantSchema = Record<string, Record<string, SzObject>>;
-/**
- *
- */
-type VariantSelection<V extends VariantSchema> = {
-    [K in keyof V]?: keyof V[K] | null | undefined;
-};
-/**
- *
- */
-interface SzvConfig<V extends VariantSchema> {
-    base?: SzObject;
-    variants: V;
-    defaultVariants?: Partial<VariantSelection<V>>;
-}
-/**
- * Creates a variant-based sz object factory with strong TypeScript inference.
- *
- * TypeScript catches invalid variant values at compile time — no runtime
- * surprises. All variant objects are plain sz objects, fully compatible
- * with the sz prop and @csszyx/dynamic's sz() function.
- *
- * @param {SzvConfig<V>} config - Variant configuration with base, variants, and defaultVariants
- * @returns {Function} A factory function that accepts a variant selection and returns an SzObject
- *
- * @example
- * ```tsx
- * import { szv } from 'csszyx';
- *
- * const buttonSz = szv({
- *   base: { inlineFlex: true, items: 'center', rounded: 'md', fontWeight: 'medium' },
- *   variants: {
- *     variant: {
- *       default: { bg: 'primary', text: 'primary-foreground' },
- *       outline: { border: true, borderColor: 'blue-500', bg: 'transparent' },
- *       ghost:   { hover: { bg: 'accent' } },
- *     },
- *     size: {
- *       sm: { h: 9,  px: 3, text: 'sm' },
- *       md: { h: 10, px: 4 },
- *       lg: { h: 11, px: 8 },
- *     },
- *   },
- *   defaultVariants: { variant: 'default', size: 'md' },
- * });
- *
- * // Usage — consistent with sz prop, TypeScript catches invalid values
- * <button sz={buttonSz({ variant: 'outline', size: 'sm' })} />
- *
- * // Compose with sz array syntax
- * <button sz={[
- *   buttonSz({ variant: props.variant, size: props.size }),
- *   isLoading && { opacity: 50, cursor: 'wait' },
- * ]} />
- *
- * // With @csszyx/dynamic for fully runtime-resolved styling
- * const { sz } = useSz();
- * <button className={sz(buttonSz({ variant: props.variant }))} />
- * ```
- */
-declare function szv<V extends VariantSchema>(config: SzvConfig<V>): (selection?: VariantSelection<V>) => SzObject;
-
 /**
  * Recovery Token Verification - Runtime validation of recovery tokens.
  *
@@ -687,6 +612,81 @@ declare function startHydration(): void;
  */
 declare function endHydration(): void;
 
+/**
+ * szv() — variant-based sz object factory.
+ *
+ * CVA-equivalent but returns sz objects instead of className strings,
+ * keeping DX consistent with the sz prop throughout. Use with the sz prop
+ * (build-time transform) or with sz() from @csszyx/dynamic (runtime injection).
+ *
+ * @module @csszyx/runtime/variants
+ */
+
+/**
+ *
+ */
+type VariantSchema = Record<string, Record<string, SzObject>>;
+/**
+ *
+ */
+type VariantSelection<V extends VariantSchema> = {
+    [K in keyof V]?: keyof V[K] | null | undefined;
+};
+/**
+ *
+ */
+interface SzvConfig<V extends VariantSchema> {
+    base?: SzObject;
+    variants: V;
+    defaultVariants?: Partial<VariantSelection<V>>;
+}
+/**
+ * Creates a variant-based sz object factory with strong TypeScript inference.
+ *
+ * TypeScript catches invalid variant values at compile time — no runtime
+ * surprises. All variant objects are plain sz objects, fully compatible
+ * with the sz prop and @csszyx/dynamic's sz() function.
+ *
+ * @param {SzvConfig<V>} config - Variant configuration with base, variants, and defaultVariants
+ * @returns {Function} A factory function that accepts a variant selection and returns an SzObject
+ *
+ * @example
+ * ```tsx
+ * import { szv } from 'csszyx';
+ *
+ * const buttonSz = szv({
+ *   base: { inlineFlex: true, items: 'center', rounded: 'md', fontWeight: 'medium' },
+ *   variants: {
+ *     variant: {
+ *       default: { bg: 'primary', text: 'primary-foreground' },
+ *       outline: { border: true, borderColor: 'blue-500', bg: 'transparent' },
+ *       ghost:   { hover: { bg: 'accent' } },
+ *     },
+ *     size: {
+ *       sm: { h: 9,  px: 3, text: 'sm' },
+ *       md: { h: 10, px: 4 },
+ *       lg: { h: 11, px: 8 },
+ *     },
+ *   },
+ *   defaultVariants: { variant: 'default', size: 'md' },
+ * });
+ *
+ * // Usage — consistent with sz prop, TypeScript catches invalid values
+ * <button sz={buttonSz({ variant: 'outline', size: 'sm' })} />
+ *
+ * // Compose with sz array syntax
+ * <button sz={[
+ *   buttonSz({ variant: props.variant, size: props.size }),
+ *   isLoading && { opacity: 50, cursor: 'wait' },
+ * ]} />
+ *
+ * // With @csszyx/dynamic for fully runtime-resolved styling
+ * const { sz } = useSz();
+ * <button className={sz(buttonSz({ variant: props.variant }))} />
+ * ```
+ */
+declare function szv<V extends VariantSchema>(config: SzvConfig<V>): (selection?: VariantSelection<V>) => SzObject;
+
 /**
  * @csszyx/runtime - Runtime package for csszyx.
  *
@@ -769,4 +769,5 @@ declare function isRuntimeInitialized(): boolean;
  */
 declare function resetRuntime(): void;
 
-export { DEFAULT_RUNTIME_CONFIG, type HydrationError, type HydrationErrorType, type MangleMap, type RecoveryManifest, type RecoveryMode, type RuntimeConfig, type SSRContext, type SzInput, type TokenData, VERSION, type VerificationResult, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };
+export { DEFAULT_RUNTIME_CONFIG, VERSION, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };
+export type { HydrationError, HydrationErrorType, MangleMap, RecoveryManifest, RecoveryMode, RuntimeConfig, SSRContext, SzInput, TokenData, VerificationResult };

package/dist/{index.js → index.mjs}

@@ -1,4 +1,6 @@
-// src/verify.ts
+import { transform } from '@csszyx/compiler/browser';
+export { __szColorVar } from '@csszyx/compiler/color-var';
+
 function verifyRecoveryToken(element, manifest) {
   const token = element.getAttribute("data-sz-recovery-token");
   if (!token) {
@@ -70,8 +72,7 @@ function getRecoveryMode(element) {
   return null;
 }
 
-// src/hydration.ts
-var state = {
+const state = {
   errors: [],
   abortedSubtrees: /* @__PURE__ */ new Set(),
   recoveryAllowed: false
@@ -145,10 +146,7 @@ function verifyMangleMapIntegrity() {
 }
 function abortHydration(element, error) {
   state.abortedSubtrees.add(element);
-  console.error(
-    `[csszyx] Hydration aborted at ${element.tagName}:`,
-    error.message
-  );
+  console.error(`[csszyx] Hydration aborted at ${element.tagName}:`, error.message);
   element.setAttribute("data-sz-hydration-aborted", error.timestamp.toString());
   element.setAttribute("data-sz-abort-reason", error.type);
   element.setAttribute("data-sz-interactive", "false");
@@ -257,8 +255,6 @@ function endHydration() {
   }
 }
 
-// src/concatenate.ts
-import { transform } from "@csszyx/compiler/browser";
 function _sz(...classes) {
   if (classes.length === 1) {
     const cls = classes[0];
@@ -356,7 +352,7 @@ function _sz2(a, b) {
   if (!b) {
     return a;
   }
-  return a + " " + b;
+  return `${a} ${b}`;
 }
 function _sz3(a, b, c) {
   let result = "";
@@ -381,7 +377,6 @@ function _sz3(a, b, c) {
   return result;
 }
 
-// src/variants.ts
 function deepMerge(target, source) {
   const result = { ...target };
   for (const key of Object.keys(source)) {
@@ -421,18 +416,14 @@ function szv(config) {
   };
 }
 
-// src/lite.ts
-import { __szColorVar } from "@csszyx/compiler/color-var";
-
-// src/index.ts
-var VERSION = "0.0.0";
-var DEFAULT_RUNTIME_CONFIG = {
+const VERSION = "0.0.0";
+const DEFAULT_RUNTIME_CONFIG = {
   development: false,
   allowCSRRecovery: false,
   strictHydration: true,
   debug: false
 };
-var runtimeState = {
+const runtimeState = {
   config: { ...DEFAULT_RUNTIME_CONFIG },
   initialized: false
 };
@@ -465,44 +456,5 @@ function resetRuntime() {
   runtimeState.config = { ...DEFAULT_RUNTIME_CONFIG };
   runtimeState.initialized = false;
 }
-export {
-  DEFAULT_RUNTIME_CONFIG,
-  VERSION,
-  __szColorVar,
-  _sz,
-  _sz2,
-  _sz3,
-  _szIf,
-  _szMerge,
-  _szSwitch,
-  abortHydration,
-  attemptCSRRecovery,
-  clearHydrationErrors,
-  disableCSRRecovery,
-  enableCSRRecovery,
-  endHydration,
-  getAbortedSubtreeCount,
-  getHydrationErrors,
-  getRecoveryMode,
-  getRuntimeConfig,
-  getSSRContext,
-  guardHydration,
-  hasRecoveryToken,
-  initRuntime,
-  isCSRRecoveryAllowed,
-  isHydrating,
-  isHydrationAborted,
-  isRuntimeInitialized,
-  isSSREnvironment,
-  isValidManifest,
-  loadMangleMapFromDOM,
-  loadManifestFromDOM,
-  resetRuntime,
-  startHydration,
-  szv,
-  validateHydrationClass,
-  verifyAllTokens,
-  verifyMangleChecksum,
-  verifyMangleMapIntegrity,
-  verifyRecoveryToken
-};
+
+export { DEFAULT_RUNTIME_CONFIG, VERSION, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };

package/dist/lite.cjs

@@ -1,17 +1,7 @@
 'use strict';
 
-// ../compiler/dist/color-var.js
-function __szColorVar(v) {
-  if (v.startsWith("#") || v.startsWith("rgb") || v.startsWith("hsl") || v.startsWith("oklch")) {
-    return v;
-  }
-  if (v.startsWith("--")) {
-    return `var(${v})`;
-  }
-  return `var(--color-${v})`;
-}
+const colorVar = require('@csszyx/compiler/color-var');
 
-// src/lite.ts
 function assertNotObject(cls, fnName) {
   if (cls !== null && cls !== void 0 && cls !== false && typeof cls !== "string") {
     throw new Error(
@@ -79,10 +69,10 @@ function _sz2(a, b) {
   if (!b) {
     return a;
   }
-  return a + " " + b;
+  return `${a} ${b}`;
 }
 
-exports.__szColorVar = __szColorVar;
+exports.__szColorVar = colorVar.__szColorVar;
 exports._sz = _sz;
 exports._sz2 = _sz2;
 exports._szIf = _szIf;

package/dist/lite.d.cts

@@ -65,4 +65,5 @@ declare function _szMerge(...classes: SzInput[]): string;
  */
 declare function _sz2(a: string, b: string): string;
 
-export { type SzInput, _sz, _sz2, _szIf, _szMerge };
+export { _sz, _sz2, _szIf, _szMerge };
+export type { SzInput };

package/dist/{lite.d.ts → lite.d.mts}

@@ -65,4 +65,5 @@ declare function _szMerge(...classes: SzInput[]): string;
  */
 declare function _sz2(a: string, b: string): string;
 
-export { type SzInput, _sz, _sz2, _szIf, _szMerge };
+export { _sz, _sz2, _szIf, _szMerge };
+export type { SzInput };

package/dist/{lite.js → lite.mjs}

@@ -1,15 +1,5 @@
-// ../compiler/dist/color-var.js
-function __szColorVar(v) {
-  if (v.startsWith("#") || v.startsWith("rgb") || v.startsWith("hsl") || v.startsWith("oklch")) {
-    return v;
-  }
-  if (v.startsWith("--")) {
-    return `var(${v})`;
-  }
-  return `var(--color-${v})`;
-}
+export { __szColorVar } from '@csszyx/compiler/color-var';
 
-// src/lite.ts
 function assertNotObject(cls, fnName) {
   if (cls !== null && cls !== void 0 && cls !== false && typeof cls !== "string") {
     throw new Error(
@@ -77,7 +67,7 @@ function _sz2(a, b) {
   if (!b) {
     return a;
   }
-  return a + " " + b;
+  return `${a} ${b}`;
 }
 
-export { __szColorVar, _sz, _sz2, _szIf, _szMerge };
+export { _sz, _sz2, _szIf, _szMerge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/runtime",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Runtime helpers and hydration guards for csszyx",
   "keywords": [
     "csszyx",
@@ -20,43 +20,56 @@
     "url": "https://github.com/nguyennhutien/csszyx/issues"
   },
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./lite": {
-      "types": "./dist/lite.d.ts",
-      "import": "./dist/lite.js",
-      "require": "./dist/lite.cjs"
+      "import": {
+        "types": "./dist/lite.d.mts",
+        "default": "./dist/lite.mjs"
+      },
+      "require": {
+        "types": "./dist/lite.d.cts",
+        "default": "./dist/lite.cjs"
+      }
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@csszyx/compiler": "0.7.0",
-    "@csszyx/core": "0.7.0"
+    "@csszyx/core": "0.8.0",
+    "@csszyx/compiler": "0.8.0"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
     "jsdom": "^23.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.3.3",
+    "typescript": "^6.0.3",
     "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^1.2.0"
+    "vitest": "^4.1.6",
+    "unbuild": "^3.6.1"
   },
   "optionalDependencies": {
     "@esbuild/linux-arm64": "^0.19.0"
   },
   "sideEffects": false,
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "unbuild",
+    "dev": "unbuild --stub",
     "test": "vitest run",
     "test:watch": "vitest",
     "type-check": "tsc --noEmit"