@csszyx/runtime 0.1.0

package/dist/index.js

@@ -0,0 +1,463 @@
+// src/verify.ts
+function verifyRecoveryToken(element, manifest) {
+  const token = element.getAttribute("data-sz-recovery-token");
+  if (!token) {
+    return {
+      valid: false,
+      error: "No recovery token found on element"
+    };
+  }
+  const tokenData = manifest.tokens[token];
+  if (!tokenData) {
+    return {
+      valid: false,
+      error: `Token not found in manifest: ${token}`
+    };
+  }
+  const szRecover = element.getAttribute("szRecover");
+  if (szRecover !== tokenData.mode) {
+    return {
+      valid: false,
+      error: `szRecover attribute (${szRecover}) does not match token mode (${tokenData.mode})`
+    };
+  }
+  return {
+    valid: true,
+    tokenData
+  };
+}
+function loadManifestFromDOM() {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const scriptElement = document.getElementById("__SZ_RECOVERY_MANIFEST__");
+  if (!scriptElement) {
+    return null;
+  }
+  try {
+    const content = scriptElement.textContent || "";
+    return JSON.parse(content);
+  } catch (error) {
+    console.error("Failed to parse recovery manifest:", error);
+    return null;
+  }
+}
+function isValidManifest(manifest) {
+  if (!manifest || typeof manifest !== "object") {
+    return false;
+  }
+  const m = manifest;
+  return typeof m.buildId === "string" && typeof m.checksum === "string" && typeof m.tokens === "object" && m.tokens !== null;
+}
+function verifyAllTokens(root, manifest) {
+  const elements = root.querySelectorAll("[data-sz-recovery-token]");
+  const results = [];
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    const result = verifyRecoveryToken(element, manifest);
+    results.push(result);
+  }
+  return results;
+}
+function hasRecoveryToken(element) {
+  return element.hasAttribute("data-sz-recovery-token");
+}
+function getRecoveryMode(element) {
+  const szRecover = element.getAttribute("szRecover");
+  if (szRecover === "csr" || szRecover === "dev-only") {
+    return szRecover;
+  }
+  return null;
+}
+
+// src/hydration.ts
+var state = {
+  errors: [],
+  abortedSubtrees: /* @__PURE__ */ new Set(),
+  recoveryAllowed: false
+};
+function enableCSRRecovery() {
+  state.recoveryAllowed = true;
+  if (typeof window !== "undefined") {
+    window.__SZ_ALLOW_CSR_RECOVERY__ = true;
+  }
+}
+function disableCSRRecovery() {
+  state.recoveryAllowed = false;
+  if (typeof window !== "undefined") {
+    window.__SZ_ALLOW_CSR_RECOVERY__ = false;
+  }
+}
+function isCSRRecoveryAllowed() {
+  return state.recoveryAllowed;
+}
+function loadMangleMapFromDOM() {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const scriptElement = document.getElementById("__SZ_MANGLE_MAP__");
+  if (!scriptElement) {
+    return null;
+  }
+  try {
+    const content = scriptElement.textContent || "";
+    return JSON.parse(content);
+  } catch (error) {
+    console.error("Failed to parse mangle map:", error);
+    return null;
+  }
+}
+function verifyMangleChecksum(expectedChecksum) {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const htmlElement = document.documentElement;
+  const actualChecksum = htmlElement.getAttribute("data-sz-checksum");
+  return actualChecksum === expectedChecksum;
+}
+function verifyMangleMapIntegrity() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const htmlElement = document.documentElement;
+  const checksum = htmlElement.getAttribute("data-sz-checksum");
+  if (!checksum) {
+    console.warn("[csszyx] No checksum found in HTML");
+    return false;
+  }
+  const scriptElement = document.getElementById("__CSSZYX_MANGLE_MAP__");
+  if (!scriptElement) {
+    console.warn("[csszyx] Mangle map script not found");
+    return false;
+  }
+  try {
+    const mangleMap = JSON.parse(scriptElement.textContent || "{}");
+    if (typeof window !== "undefined" && "verify_mangle_checksum" in window) {
+      const isValid = window.verify_mangle_checksum(mangleMap, checksum);
+      return isValid;
+    }
+    console.warn("[csszyx] Rust core not available, using fallback verification");
+    return true;
+  } catch (error) {
+    console.error("[csszyx] Failed to verify mangle map:", error);
+    return false;
+  }
+}
+function abortHydration(element, error) {
+  state.abortedSubtrees.add(element);
+  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");
+  state.errors.push({
+    ...error,
+    element
+  });
+}
+function isHydrationAborted(element) {
+  return state.abortedSubtrees.has(element) || element.hasAttribute("data-sz-hydration-aborted");
+}
+function guardHydration(manifest) {
+  if (typeof document === "undefined") {
+    return true;
+  }
+  if (!verifyMangleChecksum(manifest.checksum)) {
+    const error = {
+      type: "checksum_mismatch",
+      message: "Mangle map checksum mismatch detected",
+      timestamp: Date.now()
+    };
+    abortHydration(document.documentElement, error);
+    return false;
+  }
+  return true;
+}
+function attemptCSRRecovery(element) {
+  if (!state.recoveryAllowed) {
+    return false;
+  }
+  if (!hasRecoveryToken(element)) {
+    console.warn("[csszyx] CSR recovery requires explicit szRecover directive");
+    return false;
+  }
+  const mode = getRecoveryMode(element);
+  if (mode === "dev-only" && process.env.NODE_ENV === "production") {
+    console.warn('[csszyx] szRecover="dev-only" is disabled in production');
+    return false;
+  }
+  console.warn(
+    "[csszyx] Hydration mismatch recovered via CSR. Fix root cause before production."
+  );
+  element.removeAttribute("data-sz-hydration-aborted");
+  element.removeAttribute("data-sz-abort-reason");
+  element.removeAttribute("data-sz-interactive");
+  state.abortedSubtrees.delete(element);
+  return true;
+}
+function getHydrationErrors() {
+  return [...state.errors];
+}
+function clearHydrationErrors() {
+  state.errors = [];
+  state.abortedSubtrees.clear();
+}
+function getAbortedSubtreeCount() {
+  return state.abortedSubtrees.size;
+}
+function isSSREnvironment() {
+  return typeof window === "undefined";
+}
+function isHydrating() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  if (window.__SZ_HYDRATING__ !== void 0) {
+    return window.__SZ_HYDRATING__;
+  }
+  if (window.__NEXT_DATA__ || window.__REMIX_CONTEXT__) {
+    return document.documentElement.hasAttribute("data-sz-checksum");
+  }
+  return false;
+}
+function getSSRContext() {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const htmlElement = document.documentElement;
+  const checksum = htmlElement.getAttribute("data-sz-checksum");
+  const buildId = htmlElement.getAttribute("data-sz-build-id");
+  if (!checksum || !buildId) {
+    return null;
+  }
+  const timestampAttr = htmlElement.getAttribute("data-sz-timestamp");
+  const timestamp = timestampAttr ? parseInt(timestampAttr, 10) : 0;
+  const hasRecoveryTokens = document.querySelector("[data-sz-recovery-token]") !== null;
+  return {
+    buildId,
+    checksum,
+    timestamp,
+    hasRecoveryTokens
+  };
+}
+function validateHydrationClass(className, expectedClassName) {
+  const normalize = (s) => s.split(/\s+/).filter(Boolean).sort().join(" ");
+  return normalize(className) === normalize(expectedClassName);
+}
+function startHydration() {
+  if (typeof window !== "undefined") {
+    window.__SZ_HYDRATING__ = true;
+  }
+}
+function endHydration() {
+  if (typeof window !== "undefined") {
+    window.__SZ_HYDRATING__ = false;
+  }
+}
+
+// src/concatenate.ts
+import { transform } from "@csszyx/compiler";
+function _sz(...classes) {
+  if (classes.length === 1) {
+    const cls = classes[0];
+    if (typeof cls === "string") {
+      return cls;
+    }
+    if (!cls) {
+      return "";
+    }
+    const res = transform(cls);
+    return typeof res === "string" ? res : res.className;
+  }
+  let result = "";
+  let needsSpace = false;
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (!cls) {
+      continue;
+    }
+    const res = typeof cls === "string" ? cls : transform(cls);
+    const str = typeof res === "string" ? res : res.className;
+    if (!str) {
+      continue;
+    }
+    if (needsSpace) {
+      result += " ";
+    }
+    result += str;
+    needsSpace = true;
+  }
+  return result;
+}
+function _szIf(condition, truthyValue, falsyValue) {
+  const value = condition ? truthyValue : falsyValue;
+  if (!value) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  const res = transform(value);
+  return typeof res === "string" ? res : res.className;
+}
+function _szSwitch(conditions, defaultValue = "") {
+  for (let i = 0; i < conditions.length; i++) {
+    const [condition, value] = conditions[i];
+    if (condition) {
+      if (!value) {
+        return "";
+      }
+      if (typeof value === "string") {
+        return value;
+      }
+      const res2 = transform(value);
+      return typeof res2 === "string" ? res2 : res2.className;
+    }
+  }
+  if (!defaultValue) {
+    return "";
+  }
+  if (typeof defaultValue === "string") {
+    return defaultValue;
+  }
+  const res = transform(defaultValue);
+  return typeof res === "string" ? res : res.className;
+}
+function _szMerge(...classes) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (!cls) {
+      continue;
+    }
+    const res = typeof cls === "string" ? cls : transform(cls);
+    const str = typeof res === "string" ? res : res.className;
+    if (!str) {
+      continue;
+    }
+    const parts = str.split(/\s+/);
+    for (let j = 0; j < parts.length; j++) {
+      const part = parts[j];
+      if (part && !seen.has(part)) {
+        seen.add(part);
+        result.push(part);
+      }
+    }
+  }
+  return result.join(" ");
+}
+function _sz2(a, b) {
+  if (!a) {
+    return b || "";
+  }
+  if (!b) {
+    return a;
+  }
+  return a + " " + b;
+}
+function _sz3(a, b, c) {
+  let result = "";
+  let needsSpace = false;
+  if (a) {
+    result = a;
+    needsSpace = true;
+  }
+  if (b) {
+    if (needsSpace) {
+      result += " ";
+    }
+    result += b;
+    needsSpace = true;
+  }
+  if (c) {
+    if (needsSpace) {
+      result += " ";
+    }
+    result += c;
+  }
+  return result;
+}
+
+// src/index.ts
+var VERSION = "0.0.0";
+var DEFAULT_RUNTIME_CONFIG = {
+  development: false,
+  allowCSRRecovery: false,
+  strictHydration: true,
+  debug: false
+};
+var runtimeState = {
+  config: { ...DEFAULT_RUNTIME_CONFIG },
+  initialized: false
+};
+function initRuntime(config = {}) {
+  if (runtimeState.initialized) {
+    if (runtimeState.config.debug) {
+      console.warn("[csszyx] Runtime already initialized");
+    }
+    return;
+  }
+  runtimeState.config = {
+    ...DEFAULT_RUNTIME_CONFIG,
+    ...config
+  };
+  if (runtimeState.config.allowCSRRecovery) {
+    enableCSRRecovery();
+  }
+  if (runtimeState.config.debug) {
+    console.log("[csszyx] Runtime initialized", runtimeState.config);
+  }
+  runtimeState.initialized = true;
+}
+function getRuntimeConfig() {
+  return { ...runtimeState.config };
+}
+function isRuntimeInitialized() {
+  return runtimeState.initialized;
+}
+function resetRuntime() {
+  runtimeState.config = { ...DEFAULT_RUNTIME_CONFIG };
+  runtimeState.initialized = false;
+}
+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,
+  validateHydrationClass,
+  verifyAllTokens,
+  verifyMangleChecksum,
+  verifyMangleMapIntegrity,
+  verifyRecoveryToken
+};

package/dist/lite.cjs

@@ -0,0 +1,75 @@
+"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);
+
+// src/lite.ts
+var lite_exports = {};
+__export(lite_exports, {
+  __szColorVar: () => __szColorVar,
+  _sz: () => _sz,
+  _sz2: () => _sz2,
+  _szIf: () => _szIf
+});
+module.exports = __toCommonJS(lite_exports);
+function _sz(...classes) {
+  if (classes.length === 1) {
+    return classes[0] || "";
+  }
+  let result = "";
+  let needsSpace = false;
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (!cls) {
+      continue;
+    }
+    if (needsSpace) {
+      result += " ";
+    }
+    result += cls;
+    needsSpace = true;
+  }
+  return result;
+}
+function _szIf(condition, truthyValue, falsyValue) {
+  return (condition ? truthyValue : falsyValue) || "";
+}
+function _sz2(a, b) {
+  if (!a) {
+    return b || "";
+  }
+  if (!b) {
+    return a;
+  }
+  return a + " " + b;
+}
+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})`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  __szColorVar,
+  _sz,
+  _sz2,
+  _szIf
+});

package/dist/lite.d.cts

@@ -0,0 +1,64 @@
+/**
+ * @csszyx/runtime/lite - Ultra-minimal runtime helpers.
+ *
+ * This is the lightweight entry point for csszyx runtime, containing only
+ * the essential helpers needed for className composition. All sz objects
+ * are pre-compiled to strings at build time, so this module is string-only.
+ *
+ * Bundle size target: < 500 bytes (minified + gzipped)
+ *
+ * @module @csszyx/runtime/lite
+ */
+/**
+ * Type for sz input - string-only (objects are pre-compiled at build time).
+ */
+type SzInput = string | null | undefined | false;
+/**
+ * Zero-overhead className passthrough/concatenation.
+ *
+ * @param {...SzInput[]} classes - Class names to concatenate
+ * @returns {string} Combined className string
+ *
+ * @example
+ * ```typescript
+ * _sz('p-4 bg-red-500') // passthrough
+ * _sz('base', isActive && 'active') // conditional
+ * ```
+ */
+declare function _sz(...classes: SzInput[]): string;
+/**
+ * Conditional className helper.
+ *
+ * @param {boolean} condition - Condition to evaluate
+ * @param {SzInput} truthyValue - Value when true
+ * @param {SzInput} falsyValue - Value when false
+ * @returns {string} Resolved className
+ *
+ * @example
+ * ```typescript
+ * _szIf(isActive, 'bg-green-500', 'bg-gray-500')
+ * ```
+ */
+declare function _szIf(condition: boolean, truthyValue: SzInput, falsyValue?: SzInput): string;
+/**
+ * Two-argument optimized concatenation.
+ * @param a - first class string
+ * @param b - second class string
+ * @returns concatenated class string
+ */
+declare function _sz2(a: string, b: string): string;
+/**
+ * Resolves a dynamic color value to a CSS-compatible string.
+ * Maps Tailwind color names to CSS custom properties, passes through raw CSS values.
+ *
+ * @param v - Color value (Tailwind name, CSS color, or CSS variable)
+ * @returns CSS-compatible color string
+ *
+ * @example
+ * __szColorVar('blue-500')  // → 'var(--color-blue-500)'
+ * __szColorVar('#ff0')      // → '#ff0'
+ * __szColorVar('--my-var')  // → 'var(--my-var)'
+ */
+declare function __szColorVar(v: string): string;
+
+export { type SzInput, __szColorVar, _sz, _sz2, _szIf };

package/dist/lite.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @csszyx/runtime/lite - Ultra-minimal runtime helpers.
+ *
+ * This is the lightweight entry point for csszyx runtime, containing only
+ * the essential helpers needed for className composition. All sz objects
+ * are pre-compiled to strings at build time, so this module is string-only.
+ *
+ * Bundle size target: < 500 bytes (minified + gzipped)
+ *
+ * @module @csszyx/runtime/lite
+ */
+/**
+ * Type for sz input - string-only (objects are pre-compiled at build time).
+ */
+type SzInput = string | null | undefined | false;
+/**
+ * Zero-overhead className passthrough/concatenation.
+ *
+ * @param {...SzInput[]} classes - Class names to concatenate
+ * @returns {string} Combined className string
+ *
+ * @example
+ * ```typescript
+ * _sz('p-4 bg-red-500') // passthrough
+ * _sz('base', isActive && 'active') // conditional
+ * ```
+ */
+declare function _sz(...classes: SzInput[]): string;
+/**
+ * Conditional className helper.
+ *
+ * @param {boolean} condition - Condition to evaluate
+ * @param {SzInput} truthyValue - Value when true
+ * @param {SzInput} falsyValue - Value when false
+ * @returns {string} Resolved className
+ *
+ * @example
+ * ```typescript
+ * _szIf(isActive, 'bg-green-500', 'bg-gray-500')
+ * ```
+ */
+declare function _szIf(condition: boolean, truthyValue: SzInput, falsyValue?: SzInput): string;
+/**
+ * Two-argument optimized concatenation.
+ * @param a - first class string
+ * @param b - second class string
+ * @returns concatenated class string
+ */
+declare function _sz2(a: string, b: string): string;
+/**
+ * Resolves a dynamic color value to a CSS-compatible string.
+ * Maps Tailwind color names to CSS custom properties, passes through raw CSS values.
+ *
+ * @param v - Color value (Tailwind name, CSS color, or CSS variable)
+ * @returns CSS-compatible color string
+ *
+ * @example
+ * __szColorVar('blue-500')  // → 'var(--color-blue-500)'
+ * __szColorVar('#ff0')      // → '#ff0'
+ * __szColorVar('--my-var')  // → 'var(--my-var)'
+ */
+declare function __szColorVar(v: string): string;
+
+export { type SzInput, __szColorVar, _sz, _sz2, _szIf };

package/dist/lite.js

@@ -0,0 +1,47 @@
+// src/lite.ts
+function _sz(...classes) {
+  if (classes.length === 1) {
+    return classes[0] || "";
+  }
+  let result = "";
+  let needsSpace = false;
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (!cls) {
+      continue;
+    }
+    if (needsSpace) {
+      result += " ";
+    }
+    result += cls;
+    needsSpace = true;
+  }
+  return result;
+}
+function _szIf(condition, truthyValue, falsyValue) {
+  return (condition ? truthyValue : falsyValue) || "";
+}
+function _sz2(a, b) {
+  if (!a) {
+    return b || "";
+  }
+  if (!b) {
+    return a;
+  }
+  return a + " " + b;
+}
+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,
+  _sz,
+  _sz2,
+  _szIf
+};