@vertz/ui 0.2.10 → 0.2.12

package/dist/css/public.js

@@ -6,10 +6,10 @@ import {
   globalCss,
   s,
   variants
-} from "../shared/chunk-qacth5ah.js";
-import"../shared/chunk-ryb49346.js";
+} from "../shared/chunk-kg898f92.js";
+import"../shared/chunk-662f9zrb.js";
 import"../shared/chunk-g4rch80a.js";
-import"../shared/chunk-hrd0mft1.js";
+import"../shared/chunk-2rs8a26p.js";
 import"../shared/chunk-prj7nm08.js";
 export {
   variants,

package/dist/form/public.js

@@ -3,8 +3,8 @@ import {
   form,
   formDataToObject,
   validate
-} from "../shared/chunk-q6cpe5k7.js";
-import"../shared/chunk-hrd0mft1.js";
+} from "../shared/chunk-55tgkc7s.js";
+import"../shared/chunk-2rs8a26p.js";
 export {
   validate,
   formDataToObject,

package/dist/index.d.ts

@@ -148,6 +148,20 @@ declare function ErrorBoundary(props: ErrorBoundaryProps): Node;
 * ```
 */
 declare function onMount2(callback: () => (() => void) | void): void;
+interface ListTransitionProps<T> {
+	each: T[];
+	keyFn: (item: T, index: number) => string | number;
+	children: (item: T) => HTMLElement | SVGElement;
+}
+/**
+* ListTransition component for animated list item enter/exit.
+* New items get `data-presence="enter"`, removed items get `data-presence="exit"`
+* with DOM removal deferred until CSS animation completes.
+*
+* Props are accessed as getters (not destructured) so the compiler-generated
+* reactive getters are tracked by the underlying domEffect.
+*/
+declare function ListTransition<T>(props: ListTransitionProps<T>): Node;
 interface PresenceProps {
 	when: boolean;
 	children: () => HTMLElement;
@@ -735,7 +749,7 @@ interface MountHandle {
 * @param options - Mount options (theme, styles, onMount, etc.)
 * @returns MountHandle with unmount function and root element
 */
-declare function mount<AppFn extends () => Element>(app: AppFn, selector: string | HTMLElement, options?: MountOptions): MountHandle;
+declare function mount<AppFn extends () => Element | DocumentFragment>(app: AppFn, selector: string | HTMLElement, options?: MountOptions): MountHandle;
 import { QueryDescriptor as QueryDescriptor2 } from "@vertz/fetch";
 import { isQueryDescriptor } from "@vertz/fetch";
 /**
@@ -1174,8 +1188,9 @@ declare class DisposalScopeError extends Error {
 declare function batch(fn: () => void): void;
 /**
 * Create a reactive signal with an initial value.
+* Optional key is used by HMR to match signals by name across re-mounts.
 */
-declare function signal<T>(initial: T): Signal<T>;
+declare function signal<T>(initial: T, key?: string): Signal<T>;
 /**
 * Create a computed (derived) reactive value.
 * The function is lazily evaluated and cached.
@@ -1284,4 +1299,4 @@ declare class EntityStore {
 * ```
 */
 declare function createTestStore(data: Record<string, Record<string, unknown>>): EntityStore;
-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 };
+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, ListTransitionProps, ListTransition, 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-n91rwj2r.js";
+} from "./shared/chunk-bjcpcq5j.js";
 import {
   Outlet,
   OutletContext,
@@ -31,11 +31,11 @@ import {
   useParams,
   useRouter,
   useSearchParams
-} from "./shared/chunk-0xcmwgdb.js";
-import"./shared/chunk-v3yyf79g.js";
+} from "./shared/chunk-18jzqefd.js";
+import"./shared/chunk-wn4gv1qd.js";
 import {
   createRouter
-} from "./shared/chunk-ka5ked7n.js";
+} from "./shared/chunk-g1gf16fz.js";
 import {
   defineRoutes
 } from "./shared/chunk-9e92w0wt.js";
@@ -44,11 +44,11 @@ import {
   form,
   formDataToObject,
   validate
-} from "./shared/chunk-q6cpe5k7.js";
+} from "./shared/chunk-55tgkc7s.js";
 import {
   query,
   queryMatch
-} from "./shared/chunk-hh0dhmb4.js";
+} from "./shared/chunk-9k2z3jfx.js";
 import"./shared/chunk-jrtrk5z4.js";
 import {
   ThemeProvider,
@@ -63,7 +63,7 @@ import {
   resolveChildren,
   s,
   variants
-} from "./shared/chunk-qacth5ah.js";
+} from "./shared/chunk-kg898f92.js";
 import {
   __append,
   __element,
@@ -72,7 +72,7 @@ import {
   __staticText,
   endHydration,
   startHydration
-} from "./shared/chunk-ryb49346.js";
+} from "./shared/chunk-662f9zrb.js";
 import {
   RENDER_NODE_BRAND,
   createDOMAdapter,
@@ -95,7 +95,7 @@ import {
   signal,
   untrack,
   useContext
-} from "./shared/chunk-hrd0mft1.js";
+} from "./shared/chunk-2rs8a26p.js";
 import"./shared/chunk-prj7nm08.js";
 // src/component/error-boundary-context.ts
 var handlerStack = [];
@@ -174,6 +174,179 @@ function onMount(callback) {
     }
   }
 }
+// src/dom/list-transition.ts
+function createItemProxy(itemSignal) {
+  if (typeof itemSignal.peek() !== "object" || itemSignal.peek() == null) {
+    return itemSignal.peek();
+  }
+  return new Proxy({}, {
+    get(_target, prop, receiver) {
+      const current = itemSignal.value;
+      if (current == null)
+        return;
+      const value = Reflect.get(current, prop, receiver);
+      if (typeof value === "function") {
+        return value.bind(current);
+      }
+      return value;
+    },
+    has(_target, prop) {
+      const current = itemSignal.value;
+      if (current == null)
+        return false;
+      return Reflect.has(current, prop);
+    },
+    ownKeys() {
+      const current = itemSignal.value;
+      if (current == null)
+        return [];
+      return Reflect.ownKeys(current);
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      const current = itemSignal.value;
+      if (current == null)
+        return;
+      return Reflect.getOwnPropertyDescriptor(current, prop);
+    }
+  });
+}
+function listTransition(startMarker, endMarker, items, keyFn, renderFn) {
+  const getItems = typeof items === "function" ? items : () => items.value;
+  const nodeMap = new Map;
+  const scopeMap = new Map;
+  const itemSignalMap = new Map;
+  const exitingNodes = new Set;
+  const exitingKeyMap = new Map;
+  const keyGeneration = new Map;
+  let isFirstRun = true;
+  const outerScope = pushScope();
+  try {
+    domEffect(() => {
+      const newItems = getItems() ?? [];
+      const newKeySet = new Set(newItems.map((item, i) => keyFn(item, i)));
+      if (isFirstRun) {
+        isFirstRun = false;
+        for (const [i, item] of newItems.entries()) {
+          const key = keyFn(item, i);
+          const itemSig = signal(item);
+          const proxy = createItemProxy(itemSig);
+          const scope = pushScope();
+          const node = renderFn(proxy);
+          popScope();
+          nodeMap.set(key, node);
+          scopeMap.set(key, scope);
+          itemSignalMap.set(key, itemSig);
+          endMarker.parentNode?.insertBefore(node, endMarker);
+        }
+        return;
+      }
+      for (const [key, node] of nodeMap) {
+        if (!newKeySet.has(key)) {
+          const scope = scopeMap.get(key);
+          if (scope) {
+            runCleanups(scope);
+            scopeMap.delete(key);
+          }
+          nodeMap.delete(key);
+          itemSignalMap.delete(key);
+          const gen = (keyGeneration.get(key) ?? 0) + 1;
+          keyGeneration.set(key, gen);
+          exitingNodes.add(node);
+          exitingKeyMap.set(key, node);
+          node.setAttribute("data-presence", "exit");
+          onAnimationsComplete(node, () => {
+            if (keyGeneration.get(key) === gen) {
+              node.parentNode?.removeChild(node);
+              exitingNodes.delete(node);
+              exitingKeyMap.delete(key);
+            }
+          });
+        }
+      }
+      const desiredNodes = [];
+      const enterNodes = [];
+      for (const [i, item] of newItems.entries()) {
+        const key = keyFn(item, i);
+        let node = nodeMap.get(key);
+        if (!node) {
+          const oldExiting = exitingKeyMap.get(key);
+          if (oldExiting) {
+            oldExiting.parentNode?.removeChild(oldExiting);
+            exitingNodes.delete(oldExiting);
+            exitingKeyMap.delete(key);
+          }
+          const gen = (keyGeneration.get(key) ?? 0) + 1;
+          keyGeneration.set(key, gen);
+          const itemSig = signal(item);
+          const proxy = createItemProxy(itemSig);
+          const scope = pushScope();
+          node = renderFn(proxy);
+          popScope();
+          nodeMap.set(key, node);
+          scopeMap.set(key, scope);
+          itemSignalMap.set(key, itemSig);
+          node.setAttribute("data-presence", "enter");
+          enterNodes.push({ node, key });
+        } else {
+          const itemSig = itemSignalMap.get(key);
+          if (itemSig) {
+            itemSig.value = item;
+          }
+        }
+        desiredNodes.push(node);
+      }
+      const parent = startMarker.parentNode;
+      if (parent) {
+        let cursor = startMarker.nextSibling;
+        for (const desired of desiredNodes) {
+          while (cursor && cursor !== endMarker && exitingNodes.has(cursor)) {
+            cursor = cursor.nextSibling;
+          }
+          if (cursor === desired) {
+            cursor = cursor.nextSibling;
+          } else {
+            parent.insertBefore(desired, cursor);
+          }
+        }
+      }
+      for (const { node: enterNode, key } of enterNodes) {
+        onAnimationsComplete(enterNode, () => {
+          if (nodeMap.get(key) === enterNode) {
+            enterNode.removeAttribute("data-presence");
+          }
+        });
+      }
+    });
+  } finally {
+    popScope();
+  }
+  const dispose = () => {
+    for (const scope of scopeMap.values()) {
+      runCleanups(scope);
+    }
+    scopeMap.clear();
+    for (const node of exitingNodes) {
+      node.parentNode?.removeChild(node);
+    }
+    exitingNodes.clear();
+    exitingKeyMap.clear();
+    runCleanups(outerScope);
+  };
+  _tryOnCleanup(dispose);
+  return dispose;
+}
+
+// src/component/list-transition.ts
+function ListTransition(props) {
+  const startMarker = document.createComment("lt-start");
+  const endMarker = document.createComment("lt-end");
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(startMarker);
+  fragment.appendChild(endMarker);
+  const dispose = listTransition(startMarker, endMarker, () => props.each, props.keyFn, props.children);
+  _tryOnCleanup(dispose);
+  return Object.assign(fragment, { dispose });
+}
 // src/component/presence.ts
 function Presence(props) {
   const anchor = document.createComment("presence");
@@ -293,7 +466,7 @@ function Suspense(props) {
   }
 }
 // src/dialog/dialog-stack.ts
-var DialogStackContext = createContext();
+var DialogStackContext = createContext(undefined, "@vertz/ui::DialogStackContext");
 function useDialogStack() {
   const stack = useContext(DialogStackContext);
   if (!stack) {
@@ -432,6 +605,11 @@ function createDialogStack(container) {
   }
 }
 // src/mount.ts
+var MOUNTED_KEY = Symbol.for("vertz:mounted-roots");
+var _global = globalThis;
+if (!_global[MOUNTED_KEY])
+  _global[MOUNTED_KEY] = new WeakMap;
+var mountedRoots = _global[MOUNTED_KEY];
 function mount(app, selector, options) {
   if (typeof selector !== "string" && !(selector instanceof HTMLElement)) {
     throw new Error(`mount(): selector must be a string or HTMLElement, got ${typeof selector}`);
@@ -440,6 +618,9 @@ function mount(app, selector, options) {
   if (!root) {
     throw new Error(`mount(): root element "${selector}" not found`);
   }
+  const existingHandle = mountedRoots.get(root);
+  if (existingHandle)
+    return existingHandle;
   if (options?.theme) {
     const { css: css2 } = compileTheme(options.theme);
     injectCSS(css2);
@@ -457,13 +638,16 @@ function mount(app, selector, options) {
       endHydration();
       popScope();
       options?.onMount?.(root);
-      return {
+      const handle2 = {
         unmount: () => {
+          mountedRoots.delete(root);
           runCleanups(scope2);
           root.textContent = "";
         },
         root
       };
+      mountedRoots.set(root, handle2);
+      return handle2;
     } catch (e) {
       endHydration();
       popScope();
@@ -479,13 +663,16 @@ function mount(app, selector, options) {
   root.appendChild(appElement);
   popScope();
   options?.onMount?.(root);
-  return {
+  const handle = {
     unmount: () => {
+      mountedRoots.delete(root);
       runCleanups(scope);
       root.textContent = "";
     },
     root
   };
+  mountedRoots.set(root, handle);
+  return handle;
 }
 // src/store/merge.ts
 function shallowMerge(existing, incoming) {
@@ -773,6 +960,7 @@ export {
   Presence,
   OutletContext,
   Outlet,
+  ListTransition,
   ErrorBoundary,
   EntityStore,
   DisposalScopeError,

package/dist/internals.d.ts

@@ -195,7 +195,7 @@ declare function setAdapter(adapter: RenderAdapter | null): void;
 * If no animations are running, calls back immediately.
 * Respects prefers-reduced-motion by skipping the wait.
 */
-declare function onAnimationsComplete(el: HTMLElement, callback: () => void): void;
+declare function onAnimationsComplete(el: Element, callback: () => void): void;
 /**
 * Create a reactive attribute binding.
 * When the value returned by `fn` changes, the attribute is updated.
@@ -340,6 +340,11 @@ declare function clearChildren(container: Node): void;
 * Efficiently updates a container's children when the items signal changes.
 * Reuses existing DOM nodes based on key identity — no virtual DOM.
 *
+* Each item is wrapped in a reactive proxy backed by a signal. When the item
+* at an existing key changes (e.g., after refetch), the signal updates and
+* any reactive bindings inside the node (domEffect, __child) re-run
+* automatically — without re-creating the DOM node.
+*
 * Compiler output target for .map() / for-each expressions in JSX.
 *
 * @param container - The parent DOM element

package/dist/internals.js

@@ -2,13 +2,13 @@ import {
   deserializeProps,
   onAnimationsComplete,
   resolveComponent
-} from "./shared/chunk-n91rwj2r.js";
+} from "./shared/chunk-bjcpcq5j.js";
 import {
   __attr,
   __classList,
   __on,
   __show
-} from "./shared/chunk-v3yyf79g.js";
+} from "./shared/chunk-wn4gv1qd.js";
 import {
   executeLoaders,
   matchPath,
@@ -17,7 +17,7 @@ import {
 import {
   MemoryCache,
   deriveKey
-} from "./shared/chunk-hh0dhmb4.js";
+} from "./shared/chunk-9k2z3jfx.js";
 import"./shared/chunk-jrtrk5z4.js";
 import {
   ALIGNMENT_MAP,
@@ -38,7 +38,7 @@ import {
   SIZE_KEYWORDS,
   SPACING_SCALE,
   compileTheme
-} from "./shared/chunk-qacth5ah.js";
+} from "./shared/chunk-kg898f92.js";
 import {
   __append,
   __child,
@@ -51,7 +51,7 @@ import {
   claimComment,
   claimText,
   getIsHydrating
-} from "./shared/chunk-ryb49346.js";
+} from "./shared/chunk-662f9zrb.js";
 import {
   RENDER_NODE_BRAND,
   createDOMAdapter,
@@ -69,11 +69,27 @@ import {
   pushScope,
   runCleanups,
   setContextScope,
+  signal,
   startSignalCollection,
   stopSignalCollection
-} from "./shared/chunk-hrd0mft1.js";
+} from "./shared/chunk-2rs8a26p.js";
 import"./shared/chunk-prj7nm08.js";
 // src/dom/conditional.ts
+function normalizeNode(branchResult) {
+  if (branchResult == null || typeof branchResult === "boolean") {
+    return getAdapter().createComment("empty");
+  }
+  if (isRenderNode(branchResult)) {
+    if (branchResult.nodeType === 11) {
+      const wrap = getAdapter().createElement("span");
+      wrap.style.display = "contents";
+      wrap.appendChild(branchResult);
+      return wrap;
+    }
+    return branchResult;
+  }
+  return getAdapter().createTextNode(String(branchResult));
+}
 function __conditional(condFn, trueFn, falseFn) {
   if (getIsHydrating()) {
     return hydrateConditional(condFn, trueFn, falseFn);
@@ -109,14 +125,7 @@ function hydrateConditional(condFn, trueFn, falseFn) {
     const branchResult = show ? trueFn() : falseFn();
     popScope();
     branchCleanups = scope;
-    let newNode;
-    if (branchResult == null || typeof branchResult === "boolean") {
-      newNode = getAdapter().createComment("empty");
-    } else if (isRenderNode(branchResult)) {
-      newNode = branchResult;
-    } else {
-      newNode = getAdapter().createTextNode(String(branchResult));
-    }
+    const newNode = normalizeNode(branchResult);
     if (currentNode?.parentNode) {
       currentNode.parentNode.replaceChild(newNode, currentNode);
     } else if (anchor.parentNode) {
@@ -147,14 +156,7 @@ function csrConditional(condFn, trueFn, falseFn) {
     const branchResult = show ? trueFn() : falseFn();
     popScope();
     branchCleanups = scope;
-    let newNode;
-    if (branchResult == null || typeof branchResult === "boolean") {
-      newNode = getAdapter().createComment("empty");
-    } else if (isRenderNode(branchResult)) {
-      newNode = branchResult;
-    } else {
-      newNode = getAdapter().createTextNode(String(branchResult));
-    }
+    const newNode = normalizeNode(branchResult);
     if (currentNode?.parentNode) {
       currentNode.parentNode.replaceChild(newNode, currentNode);
     } else if (anchor.parentNode) {
@@ -189,10 +191,46 @@ function clearChildren(container) {
   }
 }
 // src/dom/list.ts
+function createItemProxy(itemSignal) {
+  if (typeof itemSignal.peek() !== "object" || itemSignal.peek() == null) {
+    return itemSignal.peek();
+  }
+  return new Proxy({}, {
+    get(_target, prop, receiver) {
+      const current = itemSignal.value;
+      if (current == null)
+        return;
+      const value = Reflect.get(current, prop, receiver);
+      if (typeof value === "function") {
+        return value.bind(current);
+      }
+      return value;
+    },
+    has(_target, prop) {
+      const current = itemSignal.value;
+      if (current == null)
+        return false;
+      return Reflect.has(current, prop);
+    },
+    ownKeys() {
+      const current = itemSignal.value;
+      if (current == null)
+        return [];
+      return Reflect.ownKeys(current);
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      const current = itemSignal.value;
+      if (current == null)
+        return;
+      return Reflect.getOwnPropertyDescriptor(current, prop);
+    }
+  });
+}
 function __list(container, items, keyFn, renderFn) {
   const getItems = typeof items === "function" ? items : () => items.value;
   const nodeMap = new Map;
   const scopeMap = new Map;
+  const itemSignalMap = new Map;
   const isHydrationRun = getIsHydrating();
   const outerScope = pushScope();
   let isFirstRun = true;
@@ -202,11 +240,14 @@ function __list(container, items, keyFn, renderFn) {
       isFirstRun = false;
       for (const [i, item] of newItems.entries()) {
         const key = keyFn(item, i);
+        const itemSig = signal(item);
+        const proxy = createItemProxy(itemSig);
         const scope = pushScope();
-        const node = renderFn(item);
+        const node = renderFn(proxy);
         popScope();
         nodeMap.set(key, node);
         scopeMap.set(key, scope);
+        itemSignalMap.set(key, itemSig);
       }
       return;
     }
@@ -221,6 +262,7 @@ function __list(container, items, keyFn, renderFn) {
         }
         node.parentNode?.removeChild(node);
         nodeMap.delete(key);
+        itemSignalMap.delete(key);
       }
     }
     const desiredNodes = [];
@@ -228,11 +270,19 @@ function __list(container, items, keyFn, renderFn) {
       const key = keyFn(item, i);
       let node = nodeMap.get(key);
       if (!node) {
+        const itemSig = signal(item);
+        const proxy = createItemProxy(itemSig);
         const scope = pushScope();
-        node = renderFn(item);
+        node = renderFn(proxy);
         popScope();
         nodeMap.set(key, node);
         scopeMap.set(key, scope);
+        itemSignalMap.set(key, itemSig);
+      } else {
+        const itemSig = itemSignalMap.get(key);
+        if (itemSig) {
+          itemSig.value = item;
+        }
       }
       desiredNodes.push(node);
     }

package/dist/jsx-runtime/index.d.ts

@@ -3,7 +3,7 @@
 * to understand intrinsic element types and component types.
 */
 declare namespace JSX {
-	type Element = HTMLElement | SVGElement;
+	type Element = HTMLElement | SVGElement | DocumentFragment;
 	type JSXComponent = (props: Record<string, unknown>) => Element;
 	interface HTMLAttributes {
 		[key: string]: unknown;

package/dist/query/public.js

@@ -1,10 +1,10 @@
 import {
   query,
   queryMatch
-} from "../shared/chunk-hh0dhmb4.js";
+} from "../shared/chunk-9k2z3jfx.js";
 import"../shared/chunk-jrtrk5z4.js";
 import"../shared/chunk-g4rch80a.js";
-import"../shared/chunk-hrd0mft1.js";
+import"../shared/chunk-2rs8a26p.js";
 
 // src/query/public.ts
 import { isQueryDescriptor } from "@vertz/fetch";

package/dist/router/public.js

@@ -8,18 +8,18 @@ import {
   useParams,
   useRouter,
   useSearchParams
-} from "../shared/chunk-0xcmwgdb.js";
-import"../shared/chunk-v3yyf79g.js";
+} from "../shared/chunk-18jzqefd.js";
+import"../shared/chunk-wn4gv1qd.js";
 import {
   createRouter
-} from "../shared/chunk-ka5ked7n.js";
+} from "../shared/chunk-g1gf16fz.js";
 import {
   defineRoutes
 } from "../shared/chunk-9e92w0wt.js";
 import"../shared/chunk-jrtrk5z4.js";
-import"../shared/chunk-ryb49346.js";
+import"../shared/chunk-662f9zrb.js";
 import"../shared/chunk-g4rch80a.js";
-import"../shared/chunk-hrd0mft1.js";
+import"../shared/chunk-2rs8a26p.js";
 import"../shared/chunk-prj7nm08.js";
 export {
   useSearchParams,

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

@@ -1,7 +1,7 @@
 import {
   __classList,
   __on
-} from "./chunk-v3yyf79g.js";
+} from "./chunk-wn4gv1qd.js";
 import {
   __append,
   __element,
@@ -9,7 +9,7 @@ import {
   __exitChildren,
   __staticText,
   getIsHydrating
-} from "./chunk-ryb49346.js";
+} from "./chunk-662f9zrb.js";
 import {
   _tryOnCleanup,
   createContext,
@@ -20,7 +20,7 @@ import {
   signal,
   untrack,
   useContext
-} from "./chunk-hrd0mft1.js";
+} from "./chunk-2rs8a26p.js";
 
 // src/router/link.ts
 var DANGEROUS_SCHEMES = ["javascript:", "data:", "vbscript:"];
@@ -90,7 +90,7 @@ function createLink(currentPath, navigate, factoryOptions) {
 }
 
 // src/router/router-context.ts
-var RouterContext = createContext();
+var RouterContext = createContext(undefined, "@vertz/ui::RouterContext");
 function useRouter() {
   const router = useContext(RouterContext);
   if (!router) {
@@ -107,7 +107,7 @@ function useParams() {
 }
 
 // src/router/outlet.ts
-var OutletContext = createContext();
+var OutletContext = createContext(undefined, "@vertz/ui::OutletContext");
 function Outlet() {
   const ctx = useContext(OutletContext);
   if (!ctx) {

package/dist/shared/{chunk-hrd0mft1.js → chunk-2rs8a26p.js}

@@ -220,7 +220,11 @@ function isSSR() {
   const check = typeof globalThis !== "undefined" && globalThis.__VERTZ_IS_SSR__;
   return typeof check === "function" ? check() : false;
 }
-var signalCollectorStack = [];
+var COLLECTOR_KEY = Symbol.for("vertz:signal-collector-stack");
+var _global = globalThis;
+if (!_global[COLLECTOR_KEY])
+  _global[COLLECTOR_KEY] = [];
+var signalCollectorStack = _global[COLLECTOR_KEY];
 function startSignalCollection() {
   signalCollectorStack.push([]);
 }
@@ -232,8 +236,10 @@ var nextId = 0;
 class SignalImpl {
   _value;
   _subscribers = new Set;
-  constructor(initial) {
+  _hmrKey;
+  constructor(initial, key) {
     this._value = initial;
+    this._hmrKey = key;
   }
   get value() {
     const sub = getSubscriber();
@@ -267,8 +273,8 @@ class SignalImpl {
     });
   }
 }
-function signal(initial) {
-  const s = new SignalImpl(initial);
+function signal(initial, key) {
+  const s = new SignalImpl(initial, key);
   const collector = signalCollectorStack[signalCollectorStack.length - 1];
   if (collector) {
     collector.push(s);

package/dist/shared/{chunk-q6cpe5k7.js → chunk-55tgkc7s.js}

@@ -1,7 +1,7 @@
 import {
   computed,
   signal
-} from "./chunk-hrd0mft1.js";
+} from "./chunk-2rs8a26p.js";
 
 // src/form/field-state.ts
 function createFieldState(_name, initialValue) {

package/dist/shared/{chunk-ryb49346.js → chunk-662f9zrb.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-g4rch80a.js";
 import {
   domEffect
-} from "./chunk-hrd0mft1.js";
+} from "./chunk-2rs8a26p.js";
 import {
   SVG_NS,
   isSVGTag,

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

@@ -16,7 +16,7 @@ import {
   setReadValueCallback,
   signal,
   untrack
-} from "./chunk-hrd0mft1.js";
+} from "./chunk-2rs8a26p.js";
 
 // src/query/cache.ts
 class MemoryCache {
@@ -459,7 +459,7 @@ function queryMatch(queryResult, handlers) {
     } else {
       branch = "data";
     }
-    if (branch === currentBranch && branch !== "data") {
+    if (branch === currentBranch) {
       return;
     }
     runCleanups(branchCleanups);

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

@@ -1,6 +1,6 @@
 import {
   injectCSS
-} from "./chunk-qacth5ah.js";
+} from "./chunk-kg898f92.js";
 
 // src/dom/animation.ts
 function onAnimationsComplete(el, callback) {
@@ -8,7 +8,9 @@ function onAnimationsComplete(el, callback) {
     callback();
     return;
   }
-  el.offsetHeight;
+  if ("offsetHeight" in el) {
+    el.offsetHeight;
+  }
   if (typeof el.getAnimations === "function") {
     const animations = el.getAnimations();
     if (animations.length > 0) {

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

@@ -7,7 +7,7 @@ import {
 } from "./chunk-jrtrk5z4.js";
 import {
   signal
-} from "./chunk-hrd0mft1.js";
+} from "./chunk-2rs8a26p.js";
 
 // src/router/navigate.ts
 var DEFAULT_NAV_THRESHOLD_MS = 500;

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

@@ -3,7 +3,7 @@ import {
   __element,
   __enterChildren,
   __exitChildren
-} from "./chunk-ryb49346.js";
+} from "./chunk-662f9zrb.js";
 
 // src/component/children.ts
 var MAX_RESOLVE_DEPTH = 100;

package/dist/shared/{chunk-v3yyf79g.js → chunk-wn4gv1qd.js}

@@ -1,6 +1,6 @@
 import {
   domEffect
-} from "./chunk-hrd0mft1.js";
+} from "./chunk-2rs8a26p.js";
 
 // src/dom/attributes.ts
 function __attr(el, name, fn) {

package/dist/test/index.js

@@ -1,11 +1,11 @@
 import {
   createRouter
-} from "../shared/chunk-ka5ked7n.js";
+} from "../shared/chunk-g1gf16fz.js";
 import {
   defineRoutes
 } from "../shared/chunk-9e92w0wt.js";
 import"../shared/chunk-jrtrk5z4.js";
-import"../shared/chunk-hrd0mft1.js";
+import"../shared/chunk-2rs8a26p.js";
 
 // src/test/interactions.ts
 async function click(el) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "type": "module",
   "license": "MIT",
   "description": "Vertz UI framework — signals, components, JSX runtime",
@@ -63,11 +63,11 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vertz/fetch": "^0.2.1"
+    "@vertz/fetch": "^0.2.11"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.7.0",
-    "@vertz/schema": "^0.2.4",
+    "@vertz/schema": "^0.2.11",
     "bunup": "^0.16.31",
     "happy-dom": "^20.7.0",
     "typescript": "^5.7.0"