@vertz/ui 0.2.36 → 0.2.37

package/dist/shared/{chunk-7dngshyk.js → chunk-4eatzp0p.js}

@@ -86,6 +86,13 @@ class MemoryCache {
     this._refs.set(key, count);
     this._orphans.delete(key);
   }
+  findByPrefix(prefix) {
+    for (const [k, v] of this._store) {
+      if (k.startsWith(prefix))
+        return { key: k, value: v };
+    }
+    return;
+  }
   release(key) {
     const current = this._refs.get(key);
     if (current === undefined)
@@ -1028,6 +1035,7 @@ function query(source, options = {}) {
   if (!isSSR() && initialData === undefined) {
     let hydrationKey;
     const hasSSRData = !!globalThis.__VERTZ_SSR_DATA__;
+    let initDescriptorKey;
     if (customKey) {
       hydrationKey = customKey;
     } else if (hasSSRData) {
@@ -1035,6 +1043,7 @@ function query(source, options = {}) {
         const raw = callThunkWithCapture();
         if (raw !== null) {
           if (isQueryDescriptor(raw)) {
+            initDescriptorKey = raw._key;
             if (raw._entity && !entityMeta) {
               entityMeta = raw._entity;
             }
@@ -1066,6 +1075,25 @@ function query(source, options = {}) {
           loading.value = false;
           ssrHydrated = true;
         }
+      } else {
+        const cached = cache.get(hydrationKey);
+        if (cached !== undefined) {
+          retainKey(hydrationKey);
+          normalizeToEntityStore(cached);
+          rawData.value = cached;
+          loading.value = false;
+          ssrHydrated = true;
+        } else if (initDescriptorKey && "findByPrefix" in cache) {
+          const mc = cache;
+          const found = mc.findByPrefix(initDescriptorKey + "&") ?? mc.findByPrefix(initDescriptorKey + ":");
+          if (found) {
+            retainKey(found.key);
+            normalizeToEntityStore(found.value);
+            rawData.value = found.value;
+            loading.value = false;
+            ssrHydrated = true;
+          }
+        }
       }
     }
     if (!ssrHydrated && ssrHydrationCleanup !== null && isNavPrefetchActive()) {
@@ -1229,6 +1257,20 @@ function query(source, options = {}) {
           isFirst = false;
           return;
         }
+        if (descriptorKey && "findByPrefix" in cache) {
+          const mc = cache;
+          const found = untrack(() => mc.findByPrefix(descriptorKey + "&") ?? mc.findByPrefix(descriptorKey + ":"));
+          if (found) {
+            retainKey(found.key);
+            untrack(() => {
+              normalizeToEntityStore(found.value);
+              rawData.value = found.value;
+              loading.value = false;
+            });
+            isFirst = false;
+            return;
+          }
+        }
       }
       isFirst = false;
       return;

package/dist/shared/{chunk-pkhyqntn.js → chunk-9ybtmy8t.js}

@@ -9,6 +9,7 @@ import {
   isBrowser
 } from "./chunk-sjypbv24.js";
 import {
+  batch,
   getSSRContext,
   signal
 } from "./chunk-1yd6jfw5.js";
@@ -466,25 +467,29 @@ function createRouter(routes, initialUrlOrOptions, maybeOptions) {
     const abort = new AbortController;
     currentAbort = abort;
     const match = preMatch !== undefined ? preMatch : matchRoute(routes, url2);
+    if (match) {
+      visitedUrls.add(normalizeUrl(url2));
+    }
     if (transitionConfig) {
       await withViewTransition(() => {
-        current.value = match;
+        batch(() => {
+          searchParams.value = match?.search ?? {};
+          current.value = match;
+        });
       }, transitionConfig);
     } else {
-      current.value = match;
+      batch(() => {
+        searchParams.value = match?.search ?? {};
+        current.value = match;
+      });
     }
     if (match) {
-      visitedUrls.add(normalizeUrl(url2));
-      searchParams.value = match.search;
       if (!skipLoaders) {
         await runLoaders(match, gen, abort.signal);
       }
-    } else {
-      searchParams.value = {};
-      if (gen === navigationGen) {
-        loaderData.value = [];
-        loaderError.value = null;
-      }
+    } else if (gen === navigationGen) {
+      loaderData.value = [];
+      loaderError.value = null;
     }
   }
   async function navigate(input) {

package/dist/shared/{chunk-zkh9sysw.js → chunk-g60cswzm.js}

@@ -680,12 +680,15 @@ var vertzSheets = new Set;
 function injectCSS(cssText) {
   if (!cssText)
     return;
-  const isSSR = getSSRContext() !== undefined;
+  const ssrCtx = getSSRContext();
+  const isSSR = ssrCtx !== undefined;
   if (!isSSR && injectedCSS.has(cssText))
     return;
   injectedCSS.add(cssText);
-  if (isSSR)
+  if (isSSR) {
+    ssrCtx.cssTracker?.add(cssText);
     return;
+  }
   if (typeof document === "undefined")
     return;
   if (typeof CSSStyleSheet !== "undefined" && document.adoptedStyleSheets !== undefined) {
@@ -1135,56 +1138,52 @@ function variants(config) {
   const { base, variants: variantDefs, defaultVariants, compoundVariants } = config;
   const filePath = deriveConfigKey(config);
   const baseResult = css({ base }, filePath);
-  const variantResults = {};
+  const variantCache = new Map;
+  const variantStyles = {};
   for (const [variantName, options] of Object.entries(variantDefs)) {
-    variantResults[variantName] = {};
+    variantStyles[variantName] = {};
     for (const [optionName, styles] of Object.entries(options)) {
       if (styles.length > 0) {
-        const blockName = `${variantName}_${optionName}`;
-        const result = css({ [blockName]: styles }, filePath);
-        const className = result[blockName];
-        if (className) {
-          variantResults[variantName][optionName] = {
-            className,
-            css: result.css
-          };
-        }
+        variantStyles[variantName][optionName] = styles;
       }
     }
   }
-  const compoundResults = [];
-  if (compoundVariants) {
-    for (let i = 0;i < compoundVariants.length; i++) {
-      const compound = compoundVariants[i];
-      if (!compound)
-        continue;
-      const { styles, ...conditions } = compound;
-      if (styles.length > 0) {
-        const blockName = `compound_${i}`;
-        const result = css({ [blockName]: styles }, filePath);
-        const className = result[blockName];
-        if (className) {
-          compoundResults.push({
-            conditions,
-            className,
-            css: result.css
-          });
-        }
-      }
+  const compoundCache = new Map;
+  function ensureVariantOption(variantName, optionName) {
+    const cacheKey = `${variantName}::${optionName}`;
+    const cached = variantCache.get(cacheKey);
+    if (cached)
+      return cached.className;
+    const styles = variantStyles[variantName]?.[optionName];
+    if (!styles)
+      return;
+    const blockName = cacheKey;
+    const result = css({ [blockName]: styles }, filePath);
+    const className = result[blockName];
+    if (className) {
+      variantCache.set(cacheKey, { className, css: result.css });
+      return className;
     }
+    return;
   }
-  const allCss = [];
-  if (baseResult.css)
-    allCss.push(baseResult.css);
-  for (const options of Object.values(variantResults)) {
-    for (const result of Object.values(options)) {
-      if (result.css)
-        allCss.push(result.css);
+  function ensureCompoundVariant(index, compound, resolved) {
+    const { styles, ...conditions } = compound;
+    const matches = Object.entries(conditions).every(([key, value]) => resolved[key] === String(value));
+    if (!matches)
+      return;
+    const cached = compoundCache.get(index);
+    if (cached)
+      return cached.className;
+    if (styles.length === 0)
+      return;
+    const blockName = `compound_${index}`;
+    const result = css({ [blockName]: styles }, filePath);
+    const className = result[blockName];
+    if (className) {
+      compoundCache.set(index, { className, css: result.css });
+      return className;
     }
-  }
-  for (const result of compoundResults) {
-    if (result.css)
-      allCss.push(result.css);
+    return;
   }
   const fn = (props) => {
     const classNames = [];
@@ -1208,26 +1207,43 @@ function variants(config) {
       }
     }
     for (const [variantName, optionName] of Object.entries(resolved)) {
-      const variantGroup = variantResults[variantName];
-      if (variantGroup) {
-        const result = variantGroup[optionName];
-        if (result) {
-          classNames.push(result.className);
-        }
+      const className = ensureVariantOption(variantName, optionName);
+      if (className) {
+        classNames.push(className);
       }
     }
-    for (const compound of compoundResults) {
-      const matches = Object.entries(compound.conditions).every(([key, value]) => {
-        return resolved[key] === String(value);
-      });
-      if (matches) {
-        classNames.push(compound.className);
+    if (compoundVariants) {
+      for (let i = 0;i < compoundVariants.length; i++) {
+        const compound = compoundVariants[i];
+        if (!compound)
+          continue;
+        const className = ensureCompoundVariant(i, compound, resolved);
+        if (className) {
+          classNames.push(className);
+        }
       }
     }
     return classNames.join(" ");
   };
-  fn.css = allCss.join(`
+  Object.defineProperty(fn, "css", {
+    get() {
+      const parts = [];
+      if (baseResult.css)
+        parts.push(baseResult.css);
+      for (const entry of variantCache.values()) {
+        if (entry.css)
+          parts.push(entry.css);
+      }
+      for (const entry of compoundCache.values()) {
+        if (entry.css)
+          parts.push(entry.css);
+      }
+      return parts.join(`
 `);
+    },
+    enumerable: false,
+    configurable: false
+  });
   return fn;
 }
 

package/dist/shared/{chunk-xyg724n1.js → chunk-rxx916ae.js}

@@ -1,6 +1,6 @@
 import {
   injectCSS
-} from "./chunk-zkh9sysw.js";
+} from "./chunk-g60cswzm.js";
 import {
   createContext
 } from "./chunk-1yd6jfw5.js";

package/dist/src/css/public.d.ts

@@ -287,12 +287,16 @@ interface VariantsConfig<V extends VariantDefinitions> {
 /** The function returned by variants(). Takes optional variant props and returns a className string. */
 interface VariantFunction<V extends VariantDefinitions> {
 	(props?: VariantProps<V>): string;
-	/** The extracted CSS for all variant combinations. */
+	/** @internal The extracted CSS for variant combinations compiled so far. */
 	css: string;
 }
 /**
 * Create a typed variant function from a config object.
 *
+* Variant option CSS is compiled lazily on first use — only the base styles
+* are compiled eagerly. This ensures unused variant options never produce CSS,
+* reducing SSR response size for pages that use a subset of available variants.
+*
 * @param config - Variant configuration (base, variants, defaultVariants, compoundVariants).
 * @returns A function that accepts variant props and returns a className string.
 */

package/dist/src/css/public.js

@@ -8,7 +8,7 @@ import {
   globalCss,
   s,
   variants
-} from "../../shared/chunk-zkh9sysw.js";
+} from "../../shared/chunk-g60cswzm.js";
 import"../../shared/chunk-dh32wkrv.js";
 import"../../shared/chunk-h1fsr8kv.js";
 import"../../shared/chunk-1yd6jfw5.js";

package/dist/src/index.d.ts

@@ -632,12 +632,16 @@ interface VariantsConfig<V extends VariantDefinitions> {
 /** The function returned by variants(). Takes optional variant props and returns a className string. */
 interface VariantFunction<V extends VariantDefinitions> {
 	(props?: VariantProps<V>): string;
-	/** The extracted CSS for all variant combinations. */
+	/** @internal The extracted CSS for variant combinations compiled so far. */
 	css: string;
 }
 /**
 * Create a typed variant function from a config object.
 *
+* Variant option CSS is compiled lazily on first use — only the base styles
+* are compiled eagerly. This ensures unused variant options never produce CSS,
+* reducing SSR response size for pages that use a subset of available variants.
+*
 * @param config - Variant configuration (base, variants, defaultVariants, compoundVariants).
 * @returns A function that accepts variant props and returns a className string.
 */

package/dist/src/index.js

@@ -25,7 +25,7 @@ import {
   slideOutToTop,
   zoomIn,
   zoomOut
-} from "../shared/chunk-xyg724n1.js";
+} from "../shared/chunk-rxx916ae.js";
 import {
   ErrorBoundary,
   Link,
@@ -45,7 +45,7 @@ import {
 } from "../shared/chunk-mntc8w0g.js";
 import {
   createRouter
-} from "../shared/chunk-pkhyqntn.js";
+} from "../shared/chunk-9ybtmy8t.js";
 import {
   defineRoutes
 } from "../shared/chunk-ah86rm07.js";
@@ -66,7 +66,7 @@ import {
   query,
   registerRelationSchema,
   resetRelationSchemas_TEST_ONLY
-} from "../shared/chunk-7dngshyk.js";
+} from "../shared/chunk-4eatzp0p.js";
 import"../shared/chunk-jrtrk5z4.js";
 import {
   ThemeProvider,
@@ -83,7 +83,7 @@ import {
   resolveChildren,
   s,
   variants
-} from "../shared/chunk-zkh9sysw.js";
+} from "../shared/chunk-g60cswzm.js";
 import {
   RENDER_NODE_BRAND,
   __append,

package/dist/src/internals.d.ts

@@ -609,6 +609,11 @@ declare class MemoryCache<T = unknown> implements CacheStore<T> {
 	clear(): void;
 	/** Mark a cache key as actively used by a query instance. */
 	retain(key: string): void;
+	/** Find the first entry whose key starts with `prefix`. */
+	findByPrefix(prefix: string): {
+		key: string;
+		value: T;
+	} | undefined;
 	/** Release a cache key when a query instance disposes or changes key. */
 	release(key: string): void;
 }
@@ -1134,6 +1139,13 @@ interface SSRRenderContext {
 	ssrRedirect?: {
 		to: string;
 	};
+	/**
+	* Per-request CSS tracker for render-scoped collection.
+	* Populated by injectCSS() during SSR render. collectCSS() reads
+	* from this Set instead of the global injectedCSS to ensure each
+	* response only includes CSS for components actually rendered.
+	*/
+	cssTracker?: Set<string>;
 }
 /** Auth state injected into SSRRenderContext by the server. */
 type SSRAuth = ({

package/dist/src/internals.js

@@ -3,7 +3,7 @@ import {
   deserializeProps,
   onAnimationsComplete,
   resolveComponent
-} from "../shared/chunk-xyg724n1.js";
+} from "../shared/chunk-rxx916ae.js";
 import {
   __discardMountFrame,
   __flushMountFrame,
@@ -20,7 +20,7 @@ import {
   MemoryCache,
   QueryEnvelopeStore,
   deriveKey
-} from "../shared/chunk-7dngshyk.js";
+} from "../shared/chunk-4eatzp0p.js";
 import"../shared/chunk-jrtrk5z4.js";
 import {
   ALIGNMENT_MAP,
@@ -41,7 +41,7 @@ import {
   SIZE_KEYWORDS,
   SPACING_SCALE,
   compileTheme
-} from "../shared/chunk-zkh9sysw.js";
+} from "../shared/chunk-g60cswzm.js";
 import {
   RENDER_NODE_BRAND,
   __append,

package/dist/src/query/public.js

@@ -1,6 +1,6 @@
 import {
   query
-} from "../../shared/chunk-7dngshyk.js";
+} from "../../shared/chunk-4eatzp0p.js";
 import"../../shared/chunk-jrtrk5z4.js";
 import"../../shared/chunk-pv0apt9z.js";
 import"../../shared/chunk-sjypbv24.js";

package/dist/src/router/public.js

@@ -10,7 +10,7 @@ import {
 import"../../shared/chunk-mntc8w0g.js";
 import {
   createRouter
-} from "../../shared/chunk-pkhyqntn.js";
+} from "../../shared/chunk-9ybtmy8t.js";
 import {
   defineRoutes
 } from "../../shared/chunk-ah86rm07.js";

package/dist/src/test/index.js

@@ -1,6 +1,6 @@
 import {
   createRouter
-} from "../../shared/chunk-pkhyqntn.js";
+} from "../../shared/chunk-9ybtmy8t.js";
 import {
   defineRoutes
 } from "../../shared/chunk-ah86rm07.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "description": "Vertz UI framework — signals, components, JSX runtime",
   "license": "MIT",
   "repository": {