@csszyx/runtime 0.10.10 → 0.10.11

package/dist/index.mjs

@@ -76,9 +76,11 @@ function getRecoveryMode(element) {
   return null;
 }
 
+const MAX_HYDRATION_ERRORS = 100;
 const state = {
   errors: [],
-  abortedSubtrees: /* @__PURE__ */ new Set(),
+  abortedSubtrees: /* @__PURE__ */ new WeakSet(),
+  abortedSubtreeCount: 0,
   recoveryAllowed: false
 };
 function enableCSRRecovery() {
@@ -204,7 +206,10 @@ function verifyMangleMapIntegrity() {
   }
 }
 function abortHydration(element, error) {
-  state.abortedSubtrees.add(element);
+  if (!state.abortedSubtrees.has(element)) {
+    state.abortedSubtrees.add(element);
+    state.abortedSubtreeCount++;
+  }
   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);
@@ -213,6 +218,9 @@ function abortHydration(element, error) {
     ...error,
     element
   });
+  if (state.errors.length > MAX_HYDRATION_ERRORS) {
+    state.errors.shift();
+  }
 }
 function isHydrationAborted(element) {
   return state.abortedSubtrees.has(element) || element.hasAttribute("data-sz-hydration-aborted");
@@ -251,7 +259,9 @@ function attemptCSRRecovery(element) {
   element.removeAttribute("data-sz-hydration-aborted");
   element.removeAttribute("data-sz-abort-reason");
   element.removeAttribute("data-sz-interactive");
-  state.abortedSubtrees.delete(element);
+  if (state.abortedSubtrees.delete(element)) {
+    state.abortedSubtreeCount--;
+  }
   return true;
 }
 function getHydrationErrors() {
@@ -259,10 +269,11 @@ function getHydrationErrors() {
 }
 function clearHydrationErrors() {
   state.errors = [];
-  state.abortedSubtrees.clear();
+  state.abortedSubtrees = /* @__PURE__ */ new WeakSet();
+  state.abortedSubtreeCount = 0;
 }
 function getAbortedSubtreeCount() {
-  return state.abortedSubtrees.size;
+  return state.abortedSubtreeCount;
 }
 function isSSREnvironment() {
   return typeof window === "undefined";
@@ -1121,6 +1132,292 @@ const BOX_ROLE_BY_KEY = /* @__PURE__ */ new Map([
   ["zoom", { role: "outer", category: "transform" }]
 ]);
 
+const PALETTE_SHADES = /* @__PURE__ */ new Set([
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950"
+]);
+const NAMED_COLORS = /* @__PURE__ */ new Set(["white", "black", "transparent", "current", "inherit"]);
+const TEXT_SIZES = /* @__PURE__ */ new Set([
+  "xs",
+  "sm",
+  "base",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl"
+]);
+const TEXT_ALIGNS = /* @__PURE__ */ new Set(["left", "center", "right", "justify", "start", "end"]);
+const TEXT_WRAPS = /* @__PURE__ */ new Set(["wrap", "nowrap", "balance", "pretty"]);
+const TEXT_OVERFLOWS = /* @__PURE__ */ new Set(["clip", "ellipsis"]);
+const FONT_FAMILIES = /* @__PURE__ */ new Set(["sans", "serif", "mono"]);
+const FONT_WEIGHTS = /* @__PURE__ */ new Set([
+  "thin",
+  "extralight",
+  "light",
+  "normal",
+  "medium",
+  "semibold",
+  "bold",
+  "extrabold",
+  "black"
+]);
+const BG_POSITIONS = /* @__PURE__ */ new Set([
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "center",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+  "left-top",
+  "left-bottom",
+  "right-top",
+  "right-bottom"
+]);
+const BG_SIZES = /* @__PURE__ */ new Set(["auto", "cover", "contain"]);
+const BG_REPEATS = /* @__PURE__ */ new Set([
+  "repeat",
+  "no-repeat",
+  "repeat-x",
+  "repeat-y",
+  "repeat-round",
+  "repeat-space"
+]);
+const BG_ATTACHMENTS = /* @__PURE__ */ new Set(["fixed", "local", "scroll"]);
+const BORDER_STYLES = /* @__PURE__ */ new Set(["solid", "dashed", "dotted", "double", "hidden", "none"]);
+const FLEX_DIRECTIONS = /* @__PURE__ */ new Set(["row", "row-reverse", "col", "col-reverse"]);
+const FLEX_WRAPS = /* @__PURE__ */ new Set(["wrap", "wrap-reverse", "nowrap"]);
+const FLEX_SHORTHANDS = /* @__PURE__ */ new Set(["auto", "initial", "none"]);
+const DIRECTIONAL_SEGMENTS = /* @__PURE__ */ new Set(["t", "r", "b", "l", "x", "y", "s", "e"]);
+const customTokens = {
+  colors: /* @__PURE__ */ new Set(),
+  textSizes: /* @__PURE__ */ new Set(),
+  fontFamilies: /* @__PURE__ */ new Set(),
+  fontWeights: /* @__PURE__ */ new Set()
+};
+const AMBIGUITY_PAIRS = {
+  colorTextSize: {
+    dropped: /* @__PURE__ */ new Set(),
+    message: (name) => `theme token "${name}" is defined as BOTH a color and a text size \u2014 szcn cannot classify \`text-${name}\` and will keep-both instead of merging.`
+  },
+  fontFamilyWeight: {
+    dropped: /* @__PURE__ */ new Set(),
+    message: (name) => `theme token "${name}" is defined as BOTH a font family and a font weight \u2014 szcn cannot classify \`font-${name}\` and will keep-both instead of merging.`
+  }
+};
+const AMBIGUITY_PAIR_BY_CATEGORY = {
+  colors: AMBIGUITY_PAIRS.colorTextSize,
+  textSizes: AMBIGUITY_PAIRS.colorTextSize,
+  fontFamilies: AMBIGUITY_PAIRS.fontFamilyWeight,
+  fontWeights: AMBIGUITY_PAIRS.fontFamilyWeight
+};
+const COLLISION_BLOCKLIST = {
+  colors: /* @__PURE__ */ new Set([
+    ...NAMED_COLORS,
+    ...TEXT_SIZES,
+    ...TEXT_ALIGNS,
+    ...TEXT_WRAPS,
+    ...TEXT_OVERFLOWS,
+    ...BG_POSITIONS,
+    ...BG_SIZES,
+    ...BG_REPEATS,
+    ...BG_ATTACHMENTS,
+    ...BORDER_STYLES
+  ]),
+  textSizes: /* @__PURE__ */ new Set([...TEXT_ALIGNS, ...TEXT_WRAPS, ...TEXT_OVERFLOWS, ...NAMED_COLORS]),
+  fontFamilies: /* @__PURE__ */ new Set([...FONT_WEIGHTS]),
+  fontWeights: /* @__PURE__ */ new Set([...FONT_FAMILIES])
+};
+function warnOnce(message) {
+  if (process.env.NODE_ENV !== "production" && !_warned.has(message)) {
+    _warned.add(message);
+    console.warn(`[csszyx] ${message}`);
+  }
+}
+const _warned = /* @__PURE__ */ new Set();
+function registerSzcnGroups(groups) {
+  let changed = false;
+  const entries = [
+    ["colors", groups.colors],
+    ["textSizes", groups.textSizes],
+    ["fontFamilies", groups.fontFamilies],
+    ["fontWeights", groups.fontWeights]
+  ];
+  for (const [category, names] of entries) {
+    for (const name of names ?? []) {
+      if (!name || typeof name !== "string") {
+        continue;
+      }
+      if (COLLISION_BLOCKLIST[category].has(name)) {
+        warnOnce(
+          `theme token "${name}" shadows a built-in ${category === "colors" ? "utility keyword" : "value"} \u2014 szcn will not group classes built from it (they keep the safe keep-both behaviour). Rename the token to enable precise merging.`
+        );
+        continue;
+      }
+      const ambiguityPair = AMBIGUITY_PAIR_BY_CATEGORY[category];
+      if (ambiguityPair.dropped.has(name)) {
+        warnOnce(ambiguityPair.message(name));
+        continue;
+      }
+      if (!customTokens[category].has(name)) {
+        customTokens[category].add(name);
+        changed = true;
+      }
+    }
+  }
+  for (const name of [...customTokens.colors]) {
+    if (customTokens.textSizes.has(name)) {
+      customTokens.colors.delete(name);
+      customTokens.textSizes.delete(name);
+      AMBIGUITY_PAIRS.colorTextSize.dropped.add(name);
+      changed = true;
+      warnOnce(AMBIGUITY_PAIRS.colorTextSize.message(name));
+    }
+  }
+  for (const name of [...customTokens.fontFamilies]) {
+    if (customTokens.fontWeights.has(name)) {
+      customTokens.fontFamilies.delete(name);
+      customTokens.fontWeights.delete(name);
+      AMBIGUITY_PAIRS.fontFamilyWeight.dropped.add(name);
+      changed = true;
+      warnOnce(AMBIGUITY_PAIRS.fontFamilyWeight.message(name));
+    }
+  }
+  if (changed) {
+    _generation++;
+  }
+}
+let _generation = 0;
+function getSzcnGroupsGeneration() {
+  return _generation;
+}
+function isColorValue(rawValue) {
+  const value = rawValue.replace(/\/[\w.[\]%]+$/, "");
+  if (NAMED_COLORS.has(value) || customTokens.colors.has(value)) {
+    return true;
+  }
+  const shadeAt = value.lastIndexOf("-");
+  if (shadeAt > 0 && PALETTE_SHADES.has(value.slice(shadeAt + 1))) {
+    return true;
+  }
+  return /^\[(?:#|rgb|hsl|oklch|oklab|lab|lch|color\()/.test(value);
+}
+function isLengthArbitrary(value) {
+  return /^\[(?:-?[\d.]|calc\(|clamp\(|min\(|max\(|length:)/.test(value);
+}
+function classifyAmbiguousValue(prefix, value) {
+  switch (prefix) {
+    case "text": {
+      const sizeValue = value.replace(/\/[\w.[\]]+$/, "");
+      if (TEXT_SIZES.has(sizeValue) || customTokens.textSizes.has(sizeValue)) {
+        return "text:size";
+      }
+      if (isLengthArbitrary(sizeValue)) {
+        return "text:size";
+      }
+      if (TEXT_ALIGNS.has(value)) {
+        return "text:align";
+      }
+      if (TEXT_WRAPS.has(value)) {
+        return "text:wrap";
+      }
+      if (TEXT_OVERFLOWS.has(value)) {
+        return "text:overflow";
+      }
+      if (isColorValue(value)) {
+        return "text:color";
+      }
+      return null;
+    }
+    case "font": {
+      if (FONT_FAMILIES.has(value) || customTokens.fontFamilies.has(value)) {
+        return "font:family";
+      }
+      if (FONT_WEIGHTS.has(value) || customTokens.fontWeights.has(value) || /^\[\d+\]$/.test(value)) {
+        return "font:weight";
+      }
+      return null;
+    }
+    case "bg": {
+      if (isColorValue(value)) {
+        return "bg:color";
+      }
+      if (BG_POSITIONS.has(value) || value.startsWith("position-")) {
+        return "bg:position";
+      }
+      if (BG_SIZES.has(value) || value.startsWith("size-")) {
+        return "bg:size";
+      }
+      if (BG_REPEATS.has(value)) {
+        return "bg:repeat";
+      }
+      if (BG_ATTACHMENTS.has(value)) {
+        return "bg:attachment";
+      }
+      if (value.startsWith("clip-")) {
+        return "bg:clip";
+      }
+      if (value.startsWith("origin-")) {
+        return "bg:origin";
+      }
+      if (value === "none" || value.startsWith("gradient-to-") || value.startsWith("linear-") || value === "radial" || value.startsWith("radial-") || value.startsWith("conic-") || value === "conic" || /^\[url\(/.test(value) || /^\[image:/.test(value)) {
+        return "bg:image";
+      }
+      return null;
+    }
+    case "border":
+    case "divide":
+    case "ring":
+    case "outline": {
+      const firstSegment = value.split("-", 1)[0] ?? "";
+      if (DIRECTIONAL_SEGMENTS.has(firstSegment)) {
+        return null;
+      }
+      if (isColorValue(value)) {
+        return `${prefix}:color`;
+      }
+      if (value === "" || /^\d+$/.test(value) || isLengthArbitrary(value)) {
+        return `${prefix}:width`;
+      }
+      if (BORDER_STYLES.has(value)) {
+        return `${prefix}:style`;
+      }
+      return null;
+    }
+    case "flex": {
+      if (FLEX_DIRECTIONS.has(value)) {
+        return "flex:direction";
+      }
+      if (FLEX_WRAPS.has(value)) {
+        return "flex:wrap";
+      }
+      if (FLEX_SHORTHANDS.has(value) || /^\d+$/.test(value) || isLengthArbitrary(value)) {
+        return "flex:shorthand";
+      }
+      return null;
+    }
+    default:
+      return null;
+  }
+}
+
 function stripVariant(token) {
   let depth = 0;
   for (let i = token.length - 1; i >= 0; i--) {
@@ -1138,12 +1435,39 @@ function normalizeBase(base) {
   if (b.startsWith("-")) b = b.slice(1);
   return b;
 }
+const BOX_ROLE_PREFIXES_BY_FIRST_SEGMENT = (() => {
+  const buckets = /* @__PURE__ */ new Map();
+  for (const [prefix, entry] of BOX_ROLE_PREFIXES) {
+    const segment = prefix.split("-", 1)[0];
+    let bucket = buckets.get(segment);
+    if (!bucket) {
+      bucket = [];
+      buckets.set(segment, bucket);
+    }
+    bucket.push([prefix, entry]);
+  }
+  return buckets;
+})();
+const INSPECT_MEMO_MAX = 4096;
+const inspectMemo = /* @__PURE__ */ new Map();
 function inspect(token) {
+  if (inspectMemo.has(token)) {
+    return inspectMemo.get(token);
+  }
+  const info = inspectUncached(token);
+  if (inspectMemo.size >= INSPECT_MEMO_MAX) {
+    inspectMemo.clear();
+  }
+  inspectMemo.set(token, info);
+  return info;
+}
+function inspectUncached(token) {
   const base = normalizeBase(stripVariant(token));
   if (!base) return void 0;
   const exact = BOX_ROLE_TOKENS.get(base);
   if (exact) return { ...exact, base, value: base };
-  for (const [prefix, entry] of BOX_ROLE_PREFIXES) {
+  const bucket = BOX_ROLE_PREFIXES_BY_FIRST_SEGMENT.get(base.split("-", 1)[0]) ?? [];
+  for (const [prefix, entry] of bucket) {
     if (base === prefix) return { ...entry, base, value: "" };
     if (base.startsWith(`${prefix}-`)) {
       return { ...entry, base, value: base.slice(prefix.length + 1) };
@@ -1329,8 +1653,10 @@ const AMBIGUOUS_PREFIXES = /* @__PURE__ */ new Set([
   // divide-x (width) vs divide-red-500 (color)
   "ring",
   // ring-2 (width) vs ring-red-500 (color)
-  "outline"
+  "outline",
   // outline-2 (width) vs outline-red-500 (color)
+  "font"
+  // font-sans (font-family) vs font-bold (font-weight)
 ]);
 function decodeToken(token) {
   const decode = globalThis.__csszyx?.decode;
@@ -1385,10 +1711,17 @@ function mergeClassify(token) {
   if (BOX_ROLE_TOKENS.has(norm)) {
     return null;
   }
-  for (const [prefix] of BOX_ROLE_PREFIXES) {
+  const bucket = BOX_ROLE_PREFIXES_BY_FIRST_SEGMENT.get(norm.split("-", 1)[0]) ?? [];
+  for (const [prefix] of bucket) {
     if (norm === prefix || norm.startsWith(`${prefix}-`)) {
       if (AMBIGUOUS_PREFIXES.has(prefix)) {
-        return null;
+        const value = norm === prefix ? "" : norm.slice(prefix.length + 1);
+        const group = classifyAmbiguousValue(prefix, value);
+        if (group === null) {
+          return null;
+        }
+        const key = `${variant} ${group}`;
+        return { key, covers: [key] };
       }
       const coveredPrefixes = SHORTHAND_COVERAGE[prefix] ?? [prefix];
       return {
@@ -1399,7 +1732,41 @@ function mergeClassify(token) {
   }
   return null;
 }
+const MEMO_MAX_ENTRIES = 500;
+const memo = /* @__PURE__ */ new Map();
+let memoGroupsGeneration = -1;
+let memoDecodeRef;
 function szcn(...inputs) {
+  let key = "";
+  for (const input of inputs) {
+    if (input && typeof input === "string") {
+      key = key === "" ? input : `${key} ${input}`;
+    }
+  }
+  const generation = getSzcnGroupsGeneration();
+  const decodeRef = globalThis.__csszyx?.decode;
+  if (generation !== memoGroupsGeneration || decodeRef !== memoDecodeRef) {
+    memo.clear();
+    memoGroupsGeneration = generation;
+    memoDecodeRef = decodeRef;
+  }
+  const cached = memo.get(key);
+  if (cached !== void 0) {
+    memo.delete(key);
+    memo.set(key, cached);
+    return cached;
+  }
+  const merged = mergeUncached(inputs);
+  memo.set(key, merged);
+  if (memo.size > MEMO_MAX_ENTRIES) {
+    const oldest = memo.keys().next().value;
+    if (oldest !== void 0) {
+      memo.delete(oldest);
+    }
+  }
+  return merged;
+}
+function mergeUncached(inputs) {
   const order = [];
   const byKey = /* @__PURE__ */ new Map();
   for (const input of inputs) {
@@ -1448,6 +1815,10 @@ function stripSzProps(props) {
   return rest;
 }
 
+function szsClass(slot) {
+  return typeof slot === "string" ? slot : void 0;
+}
+
 const warned = /* @__PURE__ */ new Set();
 function devWarn(message) {
   if (process.env.NODE_ENV === "production") {
@@ -1493,9 +1864,12 @@ function validateSzvConfig(config) {
   if (config.base !== void 0 && !isPlainObject(config.base)) {
     devWarn(`szv(config): base must be an sz object, got ${describe(config.base)}.`);
   }
+  if (config.variants === void 0) {
+    return true;
+  }
   if (!isPlainObject(config.variants)) {
     devWarn(
-      `szv(config): variants is required and must be an object, got ${describe(config.variants)}. Ignoring.`
+      `szv(config): variants must be an object when present, got ${describe(config.variants)}. Ignoring.`
     );
     return false;
   }
@@ -1552,18 +1926,20 @@ function szv(config) {
   const configValid = validateSzvConfig(config);
   return function szVariantFn(selection) {
     if (!configValid) {
-      return isPlainObject(config?.base) ? { ...config.base } : {};
+      return attachStringCoercionGuard(
+        isPlainObject(config?.base) ? { ...config.base } : {}
+      );
     }
     if (process.env.NODE_ENV !== "production" && selection) {
       for (const key of Object.keys(selection)) {
-        if (!(key in config.variants)) {
+        if (!(key in (config.variants ?? {}))) {
           devWarn(
             `szv()(selection): unknown variant "${key}" \u2014 not declared in config.variants.`
           );
           continue;
         }
         const val = selection[key];
-        if (val !== null && val !== void 0 && !(String(val) in config.variants[key])) {
+        if (val !== null && val !== void 0 && !(String(val) in (config.variants?.[key] ?? {}))) {
           devWarn(
             `szv()(selection): "${String(val)}" is not a value of variant "${key}" \u2014 it has no styles.`
           );
@@ -1588,14 +1964,30 @@ function szv(config) {
       if (selectedValue === null || selectedValue === void 0) {
         continue;
       }
-      const variantObj = config.variants[variantKey][selectedValue];
+      const variantObj = config.variants?.[variantKey]?.[selectedValue];
       if (isPlainObject(variantObj)) {
         result = deepMerge(result, variantObj);
       }
     }
-    return result;
+    return attachStringCoercionGuard(result);
   };
 }
+function attachStringCoercionGuard(result) {
+  if (process.env.NODE_ENV !== "production") {
+    Object.defineProperty(result, "toString", {
+      value: () => {
+        devWarn(
+          'szv() returned an sz OBJECT that was used as a string (e.g. className={someSzv({...})}) \u2014 this renders "[object Object]". Pass it to an sz= prop, or resolve it with szr(...) first.'
+        );
+        return "";
+      },
+      enumerable: false,
+      writable: true,
+      configurable: true
+    });
+  }
+  return result;
+}
 
 const VERSION = "0.0.0";
 const DEFAULT_RUNTIME_CONFIG = {
@@ -1638,4 +2030,4 @@ function resetRuntime() {
   runtimeState.initialized = false;
 }
 
-export { DEFAULT_RUNTIME_CONFIG, VERSION, _sz, _sz2, _sz3, _szMerge, abortHydration, attemptCSRRecovery, classify, classifySzKey, clearHydrationErrors, computeMangleChecksumAsync, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, has, hasRecoveryToken, hasSz, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidMangleMap, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, omit, omitSz, pick, pickSz, resetRuntime, splitBox, splitBoxSz, startHydration, stripSzProps, szcn, szr, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleChecksumAsync, verifyMangleMapIntegrity, verifyRecoveryToken };
+export { DEFAULT_RUNTIME_CONFIG, VERSION, _sz, _sz2, _sz3, _szMerge, abortHydration, attemptCSRRecovery, classify, classifySzKey, clearHydrationErrors, computeMangleChecksumAsync, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, has, hasRecoveryToken, hasSz, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidMangleMap, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, omit, omitSz, pick, pickSz, registerSzcnGroups, resetRuntime, splitBox, splitBoxSz, startHydration, stripSzProps, szcn, szr, szsClass, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleChecksumAsync, verifyMangleMapIntegrity, verifyRecoveryToken };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/runtime",
-  "version": "0.10.10",
+  "version": "0.10.11",
   "description": "Runtime helpers and hydration guards for csszyx",
   "keywords": [
     "csszyx",
@@ -49,8 +49,8 @@
     "dist"
   ],
   "dependencies": {
-    "@csszyx/core": "0.10.10",
-    "@csszyx/compiler": "0.10.10"
+    "@csszyx/compiler": "0.10.11",
+    "@csszyx/core": "0.10.11"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",