@vertz/ui 0.2.1 → 0.2.2

package/dist/css/public.js

@@ -6,7 +6,7 @@ import {
   globalCss,
   s,
   variants
-} from "../shared/chunk-0p5f7gmg.js";
+} from "../shared/chunk-qacth5ah.js";
 import"../shared/chunk-ryb49346.js";
 import"../shared/chunk-g4rch80a.js";
 import"../shared/chunk-hrd0mft1.js";

package/dist/index.d.ts

@@ -72,6 +72,12 @@ interface Computed<T> extends ReadonlySignal<T> {
 /** Dispose function returned by effect(). */
 type DisposeFn = () => void;
 /**
+* A snapshot of context values at a point in time.
+* Each Provider creates a new scope that inherits from the parent.
+* Effects capture this scope so that useContext works in async callbacks.
+*/
+type ContextScope = Map<Context<unknown>, unknown>;
+/**
 * Props for the JSX pattern of Context.Provider.
 *
 * `children` accepts both raw values (what TypeScript sees in JSX) and
@@ -414,6 +420,34 @@ interface VariantFunction<V extends VariantDefinitions> {
 * @returns A function that accepts variant props and returns a className string.
 */
 declare function variants<V extends VariantDefinitions>(config: VariantsConfig<V>): VariantFunction<V>;
+declare const DialogStackContext: Context<DialogStack>;
+declare function useDialogStack(): DialogStack;
+interface DialogHandle<TResult> {
+	close(...args: void extends TResult ? [] : [result: TResult]): void;
+}
+type DialogComponent<
+	TResult,
+	TProps = Record<string, never>
+> = (props: TProps & {
+	dialog: DialogHandle<TResult>;
+}) => Node;
+declare class DialogDismissedError extends Error {
+	constructor();
+}
+interface DialogStack {
+	open<
+		TResult,
+		TProps
+	>(component: DialogComponent<TResult, TProps>, props: TProps): Promise<TResult>;
+	/** @internal — used by useDialogStack() to pass captured context scope */
+	openWithScope<
+		TResult,
+		TProps
+	>(component: DialogComponent<TResult, TProps>, props: TProps, scope: ContextScope | null): Promise<TResult>;
+	readonly size: number;
+	closeAll(): void;
+}
+declare function createDialogStack(container: HTMLElement): DialogStack;
 /**
 * Brand symbol for render nodes.
 * SSR nodes add this to their prototype for fast identification.
@@ -729,6 +763,17 @@ interface QueryOptions<T> {
 	cache?: CacheStore<T>;
 	/** Timeout in ms for SSR data loading. Default: 300. Set to 0 to disable. */
 	ssrTimeout?: number;
+	/**
+	* Polling interval in ms, or a function for dynamic intervals.
+	*
+	* - `number` — fixed interval in ms
+	* - `false` or `0` — disabled
+	* - `(data, iteration) => number | false` — called after each fetch to
+	*   determine the next interval. Return `false` to stop polling.
+	*   `iteration` counts polls since the last start/restart (resets to 0
+	*   when the function returns `false`).
+	*/
+	refetchInterval?: number | false | ((data: T | undefined, iteration: number) => number | false);
 }
 /** The reactive object returned by query(). */
 interface QueryResult<
@@ -1004,6 +1049,8 @@ interface PrefetchHandle {
 	abort: () => void;
 	/** Resolves when SSE stream completes (data or done event). */
 	done?: Promise<void>;
+	/** Resolves when the first SSE event of any type arrives. */
+	firstEvent?: Promise<void>;
 }
 /** Options for createRouter(). */
 interface RouterOptions {
@@ -1084,6 +1131,17 @@ interface RouterViewProps {
 	router: Router;
 	fallback?: () => Node;
 }
+/**
+* Renders the matched route's component inside a container div.
+*
+* Handles sync and async (lazy-loaded) components, stale resolution guards,
+* page cleanup on navigation, and RouterContext propagation.
+*
+* Uses __element() so the container is claimed from SSR during hydration.
+* On the first hydration render, children are already in the DOM — the
+* domEffect runs the component factory (to attach reactivity/event handlers)
+* but skips clearing the container.
+*/
 declare function RouterView({ router, fallback }: RouterViewProps): HTMLElement;
 /**
 * Parse URLSearchParams into a typed object, optionally through a schema.
@@ -1149,7 +1207,7 @@ interface EntityStoreOptions {
 }
 /**
 * EntityStore - Normalized, signal-backed entity cache for @vertz/ui.
-* 
+*
 * Stores entities by type and ID, with signal-per-entity reactivity.
 * Supports field-level merge, SSR hydration, and query result indices.
 */
@@ -1209,10 +1267,10 @@ declare class EntityStore {
 }
 /**
 * Create a pre-populated EntityStore for testing.
-* 
+*
 * @param data - Entity data keyed by type → id → entity
 * @returns A new EntityStore with the data already merged
-* 
+*
 * @example
 * ```ts
 * const store = createTestStore({
@@ -1221,9 +1279,9 @@ declare class EntityStore {
 *     '2': { id: '2', name: 'Bob' }
 *   }
 * });
-* 
+*
 * expect(store.get('User', '1').value).toEqual({ id: '1', name: 'Alice' });
 * ```
 */
 declare function createTestStore(data: Record<string, Record<string, unknown>>): EntityStore;
-export { zoomOut, zoomIn, variants, validate, useSearchParams, useRouter, useParams, useContext, untrack, slideOutToTop, slideOutToRight, slideOutToLeft, slideOutToBottom, slideInFromTop, slideInFromRight, slideInFromLeft, slideInFromBottom, signal, setAdapter, s, resolveChildren, resetInjectedStyles, ref, queryMatch, query, parseSearchParams, palettes, onMount2 as onMount, mount, keyframes, isRenderNode, isQueryDescriptor, injectCSS, hydrate, globalCss, getInjectedCSS, getAdapter, formDataToObject, form, fadeOut, fadeIn, defineTheme, defineRoutes, css, createTestStore, createRouter, createLink, createFieldState, createDOMAdapter, createContext, computed, compileTheme, children, batch, accordionUp, accordionDown, __staticText, __exitChildren, __enterChildren, __element, __append, VariantsConfig, VariantProps, VariantFunction, ValidationResult, UnwrapSignals, TypedRoutes, TypedRouter, ThemeProviderProps, ThemeProvider, ThemeInput, Theme, SuspenseProps, Suspense, StyleValue, StyleEntry, Signal, SerializedStore, SearchParamSchema, SdkMethodWithMeta, SdkMethod, RouterViewProps, RouterView, RouterOptions, RouterContext, Router, RoutePaths, RouteMatch, RouteDefinitionMap, RouteConfig, RenderText, RenderNode, RenderElement, RenderAdapter, Ref, ReadonlySignal, RawDeclaration, RENDER_NODE_BRAND, QueryResult, QueryOptions, QueryMatchHandlers, QueryDescriptor2 as QueryDescriptor, PresenceProps, Presence, PathWithParams, OutletContextValue, OutletContext, Outlet, NavigateOptions, MountOptions, MountHandle, MatchedRoute, LoaderData, LinkProps, LinkFactoryOptions, InferRouteMap, GlobalCSSOutput, GlobalCSSInput, FormSchema, FormOptions, FormInstance, FormDataOptions, FieldState, ExtractParams, ErrorBoundaryProps, ErrorBoundary, EntityStoreOptions, EntityStore, DisposeFn, DisposalScopeError, Context, Computed, ComponentRegistry, ComponentLoader, ComponentFunction, CompiledTheme, CompiledRoute, ColorPalette, ChildrenAccessor, ChildValue, CacheStore, CSSOutput, CSSInput, ANIMATION_EASING, ANIMATION_DURATION };
+export { zoomOut, zoomIn, variants, validate, useSearchParams, useRouter, useParams, useDialogStack, useContext, untrack, slideOutToTop, slideOutToRight, slideOutToLeft, slideOutToBottom, slideInFromTop, slideInFromRight, slideInFromLeft, slideInFromBottom, signal, setAdapter, s, resolveChildren, resetInjectedStyles, ref, queryMatch, query, parseSearchParams, palettes, onMount2 as onMount, mount, keyframes, isRenderNode, isQueryDescriptor, injectCSS, hydrate, globalCss, getInjectedCSS, getAdapter, formDataToObject, form, fadeOut, fadeIn, defineTheme, defineRoutes, css, createTestStore, createRouter, createLink, createFieldState, createDialogStack, createDOMAdapter, createContext, computed, compileTheme, children, batch, accordionUp, accordionDown, __staticText, __exitChildren, __enterChildren, __element, __append, VariantsConfig, VariantProps, VariantFunction, ValidationResult, UnwrapSignals, TypedRoutes, TypedRouter, ThemeProviderProps, ThemeProvider, ThemeInput, Theme, SuspenseProps, Suspense, StyleValue, StyleEntry, Signal, SerializedStore, SearchParamSchema, SdkMethodWithMeta, SdkMethod, RouterViewProps, RouterView, RouterOptions, RouterContext, Router, RoutePaths, RouteMatch, RouteDefinitionMap, RouteConfig, RenderText, RenderNode, RenderElement, RenderAdapter, Ref, ReadonlySignal, RawDeclaration, RENDER_NODE_BRAND, QueryResult, QueryOptions, QueryMatchHandlers, QueryDescriptor2 as QueryDescriptor, PresenceProps, Presence, PathWithParams, OutletContextValue, OutletContext, Outlet, NavigateOptions, MountOptions, MountHandle, MatchedRoute, LoaderData, LinkProps, LinkFactoryOptions, InferRouteMap, GlobalCSSOutput, GlobalCSSInput, FormSchema, FormOptions, FormInstance, FormDataOptions, FieldState, ExtractParams, ErrorBoundaryProps, ErrorBoundary, EntityStoreOptions, EntityStore, DisposeFn, DisposalScopeError, DialogStackContext, DialogStack, DialogHandle, DialogDismissedError, DialogComponent, Context, Computed, ComponentRegistry, ComponentLoader, ComponentFunction, CompiledTheme, CompiledRoute, ColorPalette, ChildrenAccessor, ChildValue, CacheStore, CSSOutput, CSSInput, ANIMATION_EASING, ANIMATION_DURATION };

package/dist/index.js

@@ -20,7 +20,7 @@ import {
   slideOutToTop,
   zoomIn,
   zoomOut
-} from "./shared/chunk-pp3a6xbn.js";
+} from "./shared/chunk-n91rwj2r.js";
 import {
   Outlet,
   OutletContext,
@@ -31,11 +31,11 @@ import {
   useParams,
   useRouter,
   useSearchParams
-} from "./shared/chunk-nmjyj8p9.js";
+} from "./shared/chunk-0xcmwgdb.js";
 import"./shared/chunk-v3yyf79g.js";
 import {
   createRouter
-} from "./shared/chunk-cq7xg4xe.js";
+} from "./shared/chunk-ka5ked7n.js";
 import {
   defineRoutes
 } from "./shared/chunk-9e92w0wt.js";
@@ -48,8 +48,8 @@ import {
 import {
   query,
   queryMatch
-} from "./shared/chunk-wv6kkj1w.js";
-import"./shared/chunk-vx0kzack.js";
+} from "./shared/chunk-hh0dhmb4.js";
+import"./shared/chunk-jrtrk5z4.js";
 import {
   ThemeProvider,
   children,
@@ -63,7 +63,7 @@ import {
   resolveChildren,
   s,
   variants
-} from "./shared/chunk-0p5f7gmg.js";
+} from "./shared/chunk-qacth5ah.js";
 import {
   __append,
   __element,
@@ -87,9 +87,11 @@ import {
   computed,
   createContext,
   domEffect,
+  getContextScope,
   popScope,
   pushScope,
   runCleanups,
+  setContextScope,
   signal,
   untrack,
   useContext
@@ -290,6 +292,145 @@ function Suspense(props) {
     return placeholder;
   }
 }
+// src/dialog/dialog-stack.ts
+var DialogStackContext = createContext();
+function useDialogStack() {
+  const stack = useContext(DialogStackContext);
+  if (!stack) {
+    throw new Error("useDialogStack() must be called within DialogStackProvider");
+  }
+  const capturedScope = getContextScope();
+  return {
+    open(component, props) {
+      return stack.openWithScope(component, props, capturedScope);
+    },
+    openWithScope: stack.openWithScope,
+    get size() {
+      return stack.size;
+    },
+    closeAll() {
+      stack.closeAll();
+    }
+  };
+}
+
+class DialogDismissedError extends Error {
+  constructor() {
+    super("Dialog was dismissed");
+    this.name = "DialogDismissedError";
+  }
+}
+function createDialogStack(container) {
+  const entries = [];
+  let nextId = 0;
+  function open(component, props, capturedScope) {
+    return new Promise((resolve, reject) => {
+      if (entries.length > 0) {
+        entries[entries.length - 1].wrapper.setAttribute("data-state", "background");
+      }
+      const wrapper = document.createElement("div");
+      wrapper.setAttribute("data-dialog-wrapper", "");
+      wrapper.setAttribute("data-state", "open");
+      wrapper.setAttribute("data-dialog-depth", "0");
+      const entry = {
+        id: nextId++,
+        wrapper,
+        node: null,
+        resolve,
+        reject,
+        cleanups: [],
+        dismissible: true
+      };
+      const prevScope = setContextScope(capturedScope ?? null);
+      const scope = pushScope();
+      const handle = {
+        close: (...args) => {
+          closeEntry(entry, args[0]);
+        }
+      };
+      entry.node = component({ ...props, dialog: handle });
+      entry.cleanups = [...scope];
+      popScope();
+      setContextScope(prevScope);
+      if (entry.dismissible) {
+        wrapper.addEventListener("keydown", (e) => {
+          if (e.key === "Escape" && entries[entries.length - 1] === entry) {
+            e.preventDefault();
+            e.stopPropagation();
+            dismissEntry(entry);
+          }
+        });
+      }
+      wrapper.appendChild(entry.node);
+      container.appendChild(wrapper);
+      entries.push(entry);
+      updateDepthAttributes();
+    });
+  }
+  function closeEntry(entry, result) {
+    const idx = entries.indexOf(entry);
+    if (idx === -1)
+      return;
+    entry.wrapper.setAttribute("data-state", "closed");
+    onAnimationsComplete(entry.wrapper, () => {
+      runCleanups(entry.cleanups);
+      if (entry.wrapper.parentNode === container) {
+        container.removeChild(entry.wrapper);
+      }
+      const entryIdx = entries.indexOf(entry);
+      if (entryIdx !== -1) {
+        entries.splice(entryIdx, 1);
+      }
+      if (entries.length > 0) {
+        entries[entries.length - 1].wrapper.setAttribute("data-state", "open");
+      }
+      updateDepthAttributes();
+      entry.resolve(result);
+    });
+  }
+  function updateDepthAttributes() {
+    for (let i = 0;i < entries.length; i++) {
+      entries[i].wrapper.setAttribute("data-dialog-depth", String(entries.length - 1 - i));
+    }
+  }
+  return {
+    open(component, props) {
+      return open(component, props);
+    },
+    openWithScope(component, props, scope) {
+      return open(component, props, scope);
+    },
+    get size() {
+      return entries.length;
+    },
+    closeAll() {
+      for (let i = entries.length - 1;i >= 0; i--) {
+        dismissEntry(entries[i]);
+      }
+    }
+  };
+  function dismissEntry(entry) {
+    const idx = entries.indexOf(entry);
+    if (idx === -1)
+      return;
+    entry.wrapper.setAttribute("data-state", "closed");
+    onAnimationsComplete(entry.wrapper, () => {
+      runCleanups(entry.cleanups);
+      if (entry.wrapper.parentNode === container) {
+        container.removeChild(entry.wrapper);
+      }
+      const entryIdx = entries.indexOf(entry);
+      if (entryIdx !== -1) {
+        entries.splice(entryIdx, 1);
+      }
+      if (entries.length > 0) {
+        entries[entries.length - 1].wrapper.setAttribute("data-state", "open");
+      }
+      updateDepthAttributes();
+      entry.reject(new DialogDismissedError);
+    });
+  }
+}
 // src/mount.ts
 function mount(app, selector, options) {
   if (typeof selector !== "string" && !(selector instanceof HTMLElement)) {
@@ -568,6 +709,7 @@ export {
   useSearchParams,
   useRouter,
   useParams,
+  useDialogStack,
   useContext,
   untrack,
   slideOutToTop,
@@ -609,6 +751,7 @@ export {
   createRouter,
   createLink,
   createFieldState,
+  createDialogStack,
   createDOMAdapter,
   createContext,
   computed,
@@ -633,6 +776,8 @@ export {
   ErrorBoundary,
   EntityStore,
   DisposalScopeError,
+  DialogStackContext,
+  DialogDismissedError,
   ANIMATION_EASING,
   ANIMATION_DURATION
 };

package/dist/internals.js

@@ -2,7 +2,7 @@ import {
   deserializeProps,
   onAnimationsComplete,
   resolveComponent
-} from "./shared/chunk-pp3a6xbn.js";
+} from "./shared/chunk-n91rwj2r.js";
 import {
   __attr,
   __classList,
@@ -17,8 +17,8 @@ import {
 import {
   MemoryCache,
   deriveKey
-} from "./shared/chunk-wv6kkj1w.js";
-import"./shared/chunk-vx0kzack.js";
+} from "./shared/chunk-hh0dhmb4.js";
+import"./shared/chunk-jrtrk5z4.js";
 import {
   ALIGNMENT_MAP,
   COLOR_NAMESPACES,
@@ -38,7 +38,7 @@ import {
   SIZE_KEYWORDS,
   SPACING_SCALE,
   compileTheme
-} from "./shared/chunk-0p5f7gmg.js";
+} from "./shared/chunk-qacth5ah.js";
 import {
   __append,
   __child,

package/dist/query/public.d.ts

@@ -45,6 +45,17 @@ interface QueryOptions<T> {
 	cache?: CacheStore<T>;
 	/** Timeout in ms for SSR data loading. Default: 300. Set to 0 to disable. */
 	ssrTimeout?: number;
+	/**
+	* Polling interval in ms, or a function for dynamic intervals.
+	*
+	* - `number` — fixed interval in ms
+	* - `false` or `0` — disabled
+	* - `(data, iteration) => number | false` — called after each fetch to
+	*   determine the next interval. Return `false` to stop polling.
+	*   `iteration` counts polls since the last start/restart (resets to 0
+	*   when the function returns `false`).
+	*/
+	refetchInterval?: number | false | ((data: T | undefined, iteration: number) => number | false);
 }
 /** The reactive object returned by query(). */
 interface QueryResult<

package/dist/query/public.js

@@ -1,8 +1,8 @@
 import {
   query,
   queryMatch
-} from "../shared/chunk-wv6kkj1w.js";
-import"../shared/chunk-vx0kzack.js";
+} from "../shared/chunk-hh0dhmb4.js";
+import"../shared/chunk-jrtrk5z4.js";
 import"../shared/chunk-g4rch80a.js";
 import"../shared/chunk-hrd0mft1.js";
 

package/dist/router/public.d.ts

@@ -251,6 +251,8 @@ interface PrefetchHandle {
 	abort: () => void;
 	/** Resolves when SSE stream completes (data or done event). */
 	done?: Promise<void>;
+	/** Resolves when the first SSE event of any type arrives. */
+	firstEvent?: Promise<void>;
 }
 /** Options for createRouter(). */
 interface RouterOptions {
@@ -354,6 +356,17 @@ interface RouterViewProps {
 	router: Router;
 	fallback?: () => Node;
 }
+/**
+* Renders the matched route's component inside a container div.
+*
+* Handles sync and async (lazy-loaded) components, stale resolution guards,
+* page cleanup on navigation, and RouterContext propagation.
+*
+* Uses __element() so the container is claimed from SSR during hydration.
+* On the first hydration render, children are already in the DOM — the
+* domEffect runs the component factory (to attach reactivity/event handlers)
+* but skips clearing the container.
+*/
 declare function RouterView({ router, fallback }: RouterViewProps): HTMLElement;
 /**
 * Parse URLSearchParams into a typed object, optionally through a schema.

package/dist/router/public.js

@@ -8,15 +8,15 @@ import {
   useParams,
   useRouter,
   useSearchParams
-} from "../shared/chunk-nmjyj8p9.js";
+} from "../shared/chunk-0xcmwgdb.js";
 import"../shared/chunk-v3yyf79g.js";
 import {
   createRouter
-} from "../shared/chunk-cq7xg4xe.js";
+} from "../shared/chunk-ka5ked7n.js";
 import {
   defineRoutes
 } from "../shared/chunk-9e92w0wt.js";
-import"../shared/chunk-vx0kzack.js";
+import"../shared/chunk-jrtrk5z4.js";
 import"../shared/chunk-ryb49346.js";
 import"../shared/chunk-g4rch80a.js";
 import"../shared/chunk-hrd0mft1.js";

package/dist/shared/{chunk-nmjyj8p9.js → chunk-0xcmwgdb.js}

@@ -23,6 +23,17 @@ import {
 } from "./chunk-hrd0mft1.js";
 
 // src/router/link.ts
+var DANGEROUS_SCHEMES = ["javascript:", "data:", "vbscript:"];
+function isSafeUrl(url) {
+  const normalized = url.replace(/\s/g, "").toLowerCase();
+  if (normalized.startsWith("//"))
+    return false;
+  for (const scheme of DANGEROUS_SCHEMES) {
+    if (normalized.startsWith(scheme))
+      return false;
+  }
+  return true;
+}
 function createLink(currentPath, navigate, factoryOptions) {
   return function Link({
     href,
@@ -31,15 +42,16 @@ function createLink(currentPath, navigate, factoryOptions) {
     className,
     prefetch
   }) {
+    const safeHref = isSafeUrl(href) ? href : "#";
     const handleClick = (event) => {
       const mouseEvent = event;
       if (mouseEvent.ctrlKey || mouseEvent.metaKey || mouseEvent.shiftKey || mouseEvent.altKey) {
         return;
       }
       mouseEvent.preventDefault();
-      navigate(href);
+      navigate(safeHref);
     };
-    const props = { href };
+    const props = { href: safeHref };
     if (className) {
       props.class = className;
     }
@@ -59,7 +71,7 @@ function createLink(currentPath, navigate, factoryOptions) {
     __exitChildren();
     if (activeClass) {
       __classList(el, {
-        [activeClass]: () => currentPath.value === href
+        [activeClass]: () => currentPath.value === safeHref
       });
     }
     if (prefetch === "hover" && factoryOptions?.onPrefetch) {
@@ -68,7 +80,7 @@ function createLink(currentPath, navigate, factoryOptions) {
         if (prefetched)
           return;
         prefetched = true;
-        factoryOptions.onPrefetch?.(href);
+        factoryOptions.onPrefetch?.(safeHref);
       };
       __on(el, "mouseenter", triggerPrefetch);
       __on(el, "focus", triggerPrefetch);
@@ -152,16 +164,6 @@ function Outlet() {
 }
 
 // src/router/router-view.ts
-function hasViewTransition(doc) {
-  return "startViewTransition" in doc;
-}
-function withTransition(fn) {
-  if (typeof document !== "undefined" && hasViewTransition(document)) {
-    document.startViewTransition(fn);
-  } else {
-    fn();
-  }
-}
 function RouterView({ router, fallback }) {
   const container = __element("div");
   let isFirstHydrationRender = getIsHydrating();
@@ -230,11 +232,7 @@ function RouterView({ router, fallback }) {
         prevLevels = levels;
         popScope();
       };
-      if (isFirstHydrationRender) {
-        doRender();
-      } else {
-        withTransition(doRender);
-      }
+      doRender();
     });
   });
   __exitChildren();

package/dist/shared/{chunk-wv6kkj1w.js → chunk-hh0dhmb4.js}

@@ -1,6 +1,6 @@
 import {
   isNavPrefetchActive
-} from "./chunk-vx0kzack.js";
+} from "./chunk-jrtrk5z4.js";
 import {
   getAdapter,
   isRenderNode
@@ -51,20 +51,24 @@ function hashString(str) {
 import { isQueryDescriptor } from "@vertz/fetch";
 
 // src/query/ssr-hydration.ts
-function hydrateQueryFromSSR(key, resolve) {
+function hydrateQueryFromSSR(key, resolve, options) {
   const ssrData = globalThis.__VERTZ_SSR_DATA__;
   if (!ssrData)
     return null;
+  const persistent = options?.persistent ?? false;
   const existing = ssrData.find((entry) => entry.key === key);
   if (existing) {
     resolve(existing.data);
-    return () => {};
+    if (!persistent)
+      return () => {};
   }
   const handler = (event) => {
     const detail = event.detail;
     if (detail.key === key) {
       resolve(detail.data);
-      document.removeEventListener("vertz:ssr-data", handler);
+      if (!persistent) {
+        document.removeEventListener("vertz:ssr-data", handler);
+      }
     }
   };
   document.addEventListener("vertz:ssr-data", handler);
@@ -169,12 +173,13 @@ function query(source, options = {}) {
   let navPrefetchDeferred = false;
   if (!isSSR() && enabled && initialData === undefined) {
     const hydrationKey = customKey ?? baseKey;
+    const isNavigation = isNavPrefetchActive();
     ssrHydrationCleanup = hydrateQueryFromSSR(hydrationKey, (result) => {
       data.value = result;
       loading.value = false;
       cache.set(hydrationKey, result);
       ssrHydrated = true;
-    });
+    }, { persistent: isNavigation });
     if (!ssrHydrated && ssrHydrationCleanup !== null && isNavPrefetchActive()) {
       if (customKey) {
         const cached = cache.get(customKey);
@@ -189,7 +194,7 @@ function query(source, options = {}) {
       navPrefetchDeferred = true;
       const doneHandler = () => {
         document.removeEventListener("vertz:nav-prefetch-done", doneHandler);
-        if (data.peek() === undefined) {
+        if (data.peek() === undefined && !ssrHydrated) {
           refetchTrigger.value = refetchTrigger.peek() + 1;
         }
       };
@@ -203,8 +208,45 @@ function query(source, options = {}) {
   }
   let fetchId = 0;
   let debounceTimer;
+  let intervalTimer;
+  const refetchIntervalOption = options.refetchInterval;
+  const hasInterval = typeof refetchIntervalOption === "function" || typeof refetchIntervalOption === "number" && refetchIntervalOption > 0;
+  let intervalIteration = 0;
   const inflightKeys = new Set;
   const refetchTrigger = signal(0);
+  let intervalPaused = false;
+  function scheduleInterval() {
+    if (!hasInterval || isSSR() || intervalPaused)
+      return;
+    let ms;
+    if (typeof refetchIntervalOption === "function") {
+      ms = refetchIntervalOption(data.peek(), intervalIteration);
+    } else {
+      ms = refetchIntervalOption;
+    }
+    if (ms === false || ms <= 0) {
+      intervalIteration = 0;
+      return;
+    }
+    intervalIteration++;
+    clearTimeout(intervalTimer);
+    intervalTimer = setTimeout(() => {
+      refetch();
+    }, ms);
+  }
+  let visibilityHandler;
+  if (hasInterval && enabled && !isSSR() && typeof document !== "undefined") {
+    visibilityHandler = () => {
+      if (document.visibilityState === "hidden") {
+        intervalPaused = true;
+        clearTimeout(intervalTimer);
+      } else {
+        intervalPaused = false;
+        refetch();
+      }
+    };
+    document.addEventListener("visibilitychange", visibilityHandler);
+  }
   function handleFetchPromise(promise, id, key) {
     promise.then((result) => {
       inflight.delete(key);
@@ -215,6 +257,7 @@ function query(source, options = {}) {
       data.value = result;
       loading.value = false;
       revalidating.value = false;
+      scheduleInterval();
     }, (err) => {
       inflight.delete(key);
       inflightKeys.delete(key);
@@ -223,6 +266,7 @@ function query(source, options = {}) {
       error.value = err;
       loading.value = false;
       revalidating.value = false;
+      scheduleInterval();
     });
   }
   function startFetch(fetchPromise, key) {
@@ -270,6 +314,19 @@ function query(source, options = {}) {
             isFirst = false;
             return;
           }
+        } else {
+          const trackPromise = callThunkWithCapture();
+          trackPromise.catch(() => {});
+          const derivedKey = untrack(() => getCacheKey());
+          const cached = untrack(() => cache.get(derivedKey));
+          if (cached !== undefined) {
+            untrack(() => {
+              data.value = cached;
+              loading.value = false;
+            });
+            isFirst = false;
+            return;
+          }
         }
         isFirst = false;
         return;
@@ -311,7 +368,8 @@ function query(source, options = {}) {
           return;
         }
       }
-      const shouldCheckCache = isFirst ? !!customKey : !customKey;
+      const isNavigation = ssrHydrationCleanup !== null;
+      const shouldCheckCache = isNavigation || (isFirst ? !!customKey : !customKey);
       if (shouldCheckCache) {
         const cached = untrack(() => cache.get(key));
         if (cached !== undefined) {
@@ -322,12 +380,14 @@ function query(source, options = {}) {
             error.value = undefined;
           });
           isFirst = false;
+          scheduleInterval();
           return;
         }
       }
       if (isFirst && initialData !== undefined) {
         promise.catch(() => {});
         isFirst = false;
+        scheduleInterval();
         return;
       }
       isFirst = false;
@@ -346,6 +406,10 @@ function query(source, options = {}) {
     disposeFn?.();
     ssrHydrationCleanup?.();
     clearTimeout(debounceTimer);
+    clearTimeout(intervalTimer);
+    if (visibilityHandler && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", visibilityHandler);
+    }
     fetchId++;
     for (const key of inflightKeys) {
       inflight.delete(key);

package/dist/shared/{chunk-vx0kzack.js → chunk-jrtrk5z4.js}

@@ -48,18 +48,36 @@ function dispatchPrefetchDone() {
   setNavPrefetchActive(false);
   document.dispatchEvent(new CustomEvent("vertz:nav-prefetch-done"));
 }
+var prefetchGen = 0;
 function prefetchNavData(url, options) {
   const controller = new AbortController;
   const timeout = options?.timeout ?? 5000;
+  const gen = ++prefetchGen;
   ensureSSRDataBus();
   setNavPrefetchActive(true);
   const timeoutId = setTimeout(() => controller.abort(), timeout);
+  let resolveFirstEvent = null;
+  const firstEvent = new Promise((r) => {
+    resolveFirstEvent = r;
+  });
+  function onFirstEvent() {
+    if (resolveFirstEvent) {
+      resolveFirstEvent();
+      resolveFirstEvent = null;
+    }
+  }
+  function finishIfCurrent() {
+    if (gen === prefetchGen) {
+      dispatchPrefetchDone();
+    }
+  }
   const done = fetch(url, {
     headers: { "X-Vertz-Nav": "1" },
     signal: controller.signal
   }).then(async (response) => {
     if (!response.body) {
-      dispatchPrefetchDone();
+      onFirstEvent();
+      finishIfCurrent();
       return;
     }
     const reader = response.body.getReader();
@@ -73,21 +91,24 @@ function prefetchNavData(url, options) {
       const parsed = parseSSE(buffer);
       buffer = parsed.remaining;
       for (const event of parsed.events) {
+        onFirstEvent();
         if (event.type === "data") {
           try {
             const { key, data } = JSON.parse(event.data);
             pushNavData(key, data);
           } catch {}
         } else if (event.type === "done") {
-          dispatchPrefetchDone();
+          finishIfCurrent();
           clearTimeout(timeoutId);
           return;
         }
       }
     }
-    dispatchPrefetchDone();
+    onFirstEvent();
+    finishIfCurrent();
   }).catch(() => {
-    dispatchPrefetchDone();
+    onFirstEvent();
+    finishIfCurrent();
   }).finally(() => {
     clearTimeout(timeoutId);
   });
@@ -96,7 +117,8 @@ function prefetchNavData(url, options) {
       controller.abort();
       clearTimeout(timeoutId);
     },
-    done
+    done,
+    firstEvent
   };
 }
 

package/dist/shared/{chunk-cq7xg4xe.js → chunk-ka5ked7n.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-9e92w0wt.js";
 import {
   prefetchNavData
-} from "./chunk-vx0kzack.js";
+} from "./chunk-jrtrk5z4.js";
 import {
   signal
 } from "./chunk-hrd0mft1.js";
@@ -22,19 +22,38 @@ function createRouter(routes, initialUrl, options) {
     url = window.location.pathname + window.location.search;
   }
   const initialMatch = matchRoute(routes, url);
+  function normalizeUrl(rawUrl) {
+    const qIdx = rawUrl.indexOf("?");
+    if (qIdx === -1)
+      return rawUrl;
+    const pathname = rawUrl.slice(0, qIdx);
+    const params = new URLSearchParams(rawUrl.slice(qIdx + 1));
+    params.sort();
+    const sorted = params.toString();
+    return sorted ? `${pathname}?${sorted}` : pathname;
+  }
+  const visitedUrls = new Set;
+  if (initialMatch)
+    visitedUrls.add(normalizeUrl(url));
   const current = signal(initialMatch);
   const loaderData = signal([]);
   const loaderError = signal(null);
   const searchParams = signal(initialMatch?.search ?? {});
   let navigationGen = 0;
+  let navigateGen = 0;
   let currentAbort = null;
   const serverNavEnabled = !!options?.serverNav;
   const serverNavTimeout = typeof options?.serverNav === "object" ? options.serverNav.timeout : undefined;
   const prefetchFn = options?._prefetchNavData ?? (serverNavEnabled ? prefetchNavData : null);
   let activePrefetch = null;
+  let activePrefetchUrl = null;
   function startPrefetch(navUrl) {
     if (!serverNavEnabled || !prefetchFn)
       return null;
+    const normalized = normalizeUrl(navUrl);
+    if (activePrefetch && activePrefetchUrl === normalized) {
+      return activePrefetch;
+    }
     if (activePrefetch) {
       activePrefetch.abort();
     }
@@ -43,15 +62,14 @@ function createRouter(routes, initialUrl, options) {
       prefetchOpts.timeout = serverNavTimeout;
     }
     activePrefetch = prefetchFn(navUrl, prefetchOpts);
+    activePrefetchUrl = normalized;
     return activePrefetch;
   }
   async function awaitPrefetch(handle) {
-    if (!handle?.done)
+    const target = handle?.firstEvent ?? handle?.done;
+    if (!target)
       return;
-    await Promise.race([
-      handle.done,
-      new Promise((r) => setTimeout(r, DEFAULT_NAV_THRESHOLD_MS))
-    ]);
+    await Promise.race([target, new Promise((r) => setTimeout(r, DEFAULT_NAV_THRESHOLD_MS))]);
   }
   if (isSSR) {
     const g = globalThis;
@@ -93,6 +111,7 @@ function createRouter(routes, initialUrl, options) {
     const match = matchRoute(routes, url2);
     current.value = match;
     if (match) {
+      visitedUrls.add(normalizeUrl(url2));
       searchParams.value = match.search;
       await runLoaders(match, gen, abort.signal);
     } else {
@@ -104,6 +123,7 @@ function createRouter(routes, initialUrl, options) {
     }
   }
   async function navigate(navUrl, navOptions) {
+    const gen = ++navigateGen;
     const handle = startPrefetch(navUrl);
     if (!isSSR) {
       if (navOptions?.replace) {
@@ -112,9 +132,12 @@ function createRouter(routes, initialUrl, options) {
         window.history.pushState(null, "", navUrl);
       }
     }
-    if (handle?.done) {
+    const isCachedNav = visitedUrls.has(normalizeUrl(navUrl));
+    if (!isCachedNav && (handle?.firstEvent || handle?.done)) {
       await awaitPrefetch(handle);
     }
+    if (gen !== navigateGen)
+      return;
     await applyNavigation(navUrl);
   }
   async function revalidate() {
@@ -148,6 +171,7 @@ function createRouter(routes, initialUrl, options) {
     if (activePrefetch) {
       activePrefetch.abort();
       activePrefetch = null;
+      activePrefetchUrl = null;
     }
   }
   return {

package/dist/shared/{chunk-pp3a6xbn.js → chunk-n91rwj2r.js}

@@ -1,6 +1,6 @@
 import {
   injectCSS
-} from "./chunk-0p5f7gmg.js";
+} from "./chunk-qacth5ah.js";
 
 // src/dom/animation.ts
 function onAnimationsComplete(el, callback) {

package/dist/shared/{chunk-0p5f7gmg.js → chunk-qacth5ah.js}

@@ -788,6 +788,9 @@ class InlineStyleError extends Error {
 }
 
 // src/css/theme.ts
+function sanitizeCssValue(value) {
+  return value.replace(/[;{}]/g, "").replace(/url\s*\(/gi, "").replace(/expression\s*\(/gi, "").replace(/@import/gi, "");
+}
 function defineTheme(input) {
   return {
     colors: input.colors,
@@ -817,17 +820,17 @@ function compileTheme(theme) {
     for (const [key, value] of Object.entries(values)) {
       if (key === "DEFAULT") {
         const varName = `--color-${name}`;
-        rootVars.push(`  ${varName}: ${value};`);
+        rootVars.push(`  ${varName}: ${sanitizeCssValue(value)};`);
         tokenPaths.push(name);
       } else if (key.startsWith("_")) {
         const variant = key.slice(1);
         const varName = `--color-${name}`;
         if (variant === "dark") {
-          darkVars.push(`  ${varName}: ${value};`);
+          darkVars.push(`  ${varName}: ${sanitizeCssValue(value)};`);
         }
       } else {
         const varName = `--color-${name}-${key}`;
-        rootVars.push(`  ${varName}: ${value};`);
+        rootVars.push(`  ${varName}: ${sanitizeCssValue(value)};`);
         tokenPaths.push(`${name}.${key}`);
       }
     }
@@ -835,7 +838,7 @@ function compileTheme(theme) {
   if (theme.spacing) {
     for (const [name, value] of Object.entries(theme.spacing)) {
       const varName = `--spacing-${name}`;
-      rootVars.push(`  ${varName}: ${value};`);
+      rootVars.push(`  ${varName}: ${sanitizeCssValue(value)};`);
       tokenPaths.push(`spacing.${name}`);
     }
   }

package/dist/test/index.js

@@ -1,10 +1,10 @@
 import {
   createRouter
-} from "../shared/chunk-cq7xg4xe.js";
+} from "../shared/chunk-ka5ked7n.js";
 import {
   defineRoutes
 } from "../shared/chunk-9e92w0wt.js";
-import"../shared/chunk-vx0kzack.js";
+import"../shared/chunk-jrtrk5z4.js";
 import"../shared/chunk-hrd0mft1.js";
 
 // src/test/interactions.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "license": "MIT",
   "description": "Vertz UI framework — signals, components, JSX runtime",
@@ -67,8 +67,8 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.7.0",
-    "@vertz/schema": "0.2.1",
-    "bunup": "latest",
+    "@vertz/schema": "0.2.2",
+    "bunup": "^0.16.31",
     "happy-dom": "^20.7.0",
     "typescript": "^5.7.0"
   },