@vertz/ui 0.2.9 → 0.2.11

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;
+}
+/**
+* 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;
@@ -1284,4 +1298,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

@@ -48,7 +48,7 @@ import {
 import {
   query,
   queryMatch
-} from "./shared/chunk-hh0dhmb4.js";
+} from "./shared/chunk-rjjjvmcf.js";
 import"./shared/chunk-jrtrk5z4.js";
 import {
   ThemeProvider,
@@ -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");
@@ -773,6 +946,7 @@ export {
   Presence,
   OutletContext,
   Outlet,
+  ListTransition,
   ErrorBoundary,
   EntityStore,
   DisposalScopeError,

package/dist/internals.d.ts

@@ -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

@@ -17,7 +17,7 @@ import {
 import {
   MemoryCache,
   deriveKey
-} from "./shared/chunk-hh0dhmb4.js";
+} from "./shared/chunk-rjjjvmcf.js";
 import"./shared/chunk-jrtrk5z4.js";
 import {
   ALIGNMENT_MAP,
@@ -69,6 +69,7 @@ import {
   pushScope,
   runCleanups,
   setContextScope,
+  signal,
   startSignalCollection,
   stopSignalCollection
 } from "./shared/chunk-hrd0mft1.js";
@@ -189,10 +190,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 +239,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 +261,7 @@ function __list(container, items, keyFn, renderFn) {
         }
         node.parentNode?.removeChild(node);
         nodeMap.delete(key);
+        itemSignalMap.delete(key);
       }
     }
     const desiredNodes = [];
@@ -228,11 +269,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/query/public.js

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

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

@@ -459,7 +459,7 @@ function queryMatch(queryResult, handlers) {
     } else {
       branch = "data";
     }
-    if (branch === currentBranch && branch !== "data") {
+    if (branch === currentBranch) {
       return;
     }
     runCleanups(branchCleanups);

package/package.json

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