@vertz/ui 0.2.24 → 0.2.26

package/dist/src/internals.js

@@ -1,14 +1,15 @@
 import {
+  ListAnimationContext,
   deserializeProps,
   onAnimationsComplete,
   resolveComponent
-} from "../shared/chunk-18frwfc4.js";
+} from "../shared/chunk-ymc3wwam.js";
 import {
   __discardMountFrame,
   __flushMountFrame,
   __on,
   __pushMountFrame
-} from "../shared/chunk-ge2e6y2s.js";
+} from "../shared/chunk-svvqjmyy.js";
 import {
   executeLoaders,
   matchPath,
@@ -19,7 +20,7 @@ import {
   MemoryCache,
   QueryEnvelopeStore,
   deriveKey
-} from "../shared/chunk-4gen306a.js";
+} from "../shared/chunk-1jgws7rs.js";
 import"../shared/chunk-jrtrk5z4.js";
 import {
   ALIGNMENT_MAP,
@@ -40,8 +41,9 @@ import {
   SIZE_KEYWORDS,
   SPACING_SCALE,
   compileTheme
-} from "../shared/chunk-t3rnfxc0.js";
+} from "../shared/chunk-j1a7t906.js";
 import {
+  RENDER_NODE_BRAND,
   __append,
   __attr,
   __child,
@@ -53,24 +55,21 @@ import {
   __prop,
   __show,
   __staticText,
-  __text
-} from "../shared/chunk-mbnda3pv.js";
+  __text,
+  createDOMAdapter,
+  getAdapter,
+  isRenderNode,
+  setAdapter
+} from "../shared/chunk-djvarb8r.js";
 import {
   SVG_NS,
   normalizeSVGAttr,
   styleObjectToString
 } from "../shared/chunk-h1fsr8kv.js";
-import {
-  RENDER_NODE_BRAND,
-  createDOMAdapter,
-  getAdapter,
-  isRenderNode,
-  setAdapter
-} from "../shared/chunk-2y9f9j62.js";
-import"../shared/chunk-2eh4p2n7.js";
+import"../shared/chunk-09ntccdx.js";
 import {
   isBrowser
-} from "../shared/chunk-da2w7j7w.js";
+} from "../shared/chunk-xs5s8gqe.js";
 import {
   _tryOnCleanup,
   claimComment,
@@ -89,23 +88,39 @@ import {
   setContextScope,
   signal,
   startSignalCollection,
-  stopSignalCollection
-} from "../shared/chunk-656n0x6y.js";
+  stopSignalCollection,
+  useContext
+} from "../shared/chunk-ppr06jgn.js";
 // src/dom/conditional.ts
-function normalizeNode(branchResult) {
-  if (branchResult == null || typeof branchResult === "boolean") {
-    return getAdapter().createComment("empty");
+function clearBetween(start, end) {
+  let current = start.nextSibling;
+  while (current && current !== end) {
+    const next = current.nextSibling;
+    current.parentNode?.removeChild(current);
+    current = next;
   }
+}
+function insertContentBefore(endMarker, branchResult) {
+  if (branchResult == null || typeof branchResult === "boolean")
+    return;
+  const parent = endMarker.parentNode;
+  if (!parent)
+    return;
   if (isRenderNode(branchResult)) {
-    if (branchResult.nodeType === 11) {
-      const wrap = getAdapter().createElement("span");
-      wrap.style.display = "contents";
-      wrap.appendChild(branchResult);
-      return wrap;
-    }
-    return branchResult;
+    parent.insertBefore(branchResult, endMarker);
+    return;
+  }
+  const text = getAdapter().createTextNode(String(branchResult));
+  parent.insertBefore(text, endMarker);
+}
+function appendBranchContent(fragment, branchResult) {
+  if (branchResult == null || typeof branchResult === "boolean")
+    return;
+  if (isRenderNode(branchResult)) {
+    fragment.appendChild(branchResult);
+    return;
   }
-  return getAdapter().createTextNode(String(branchResult));
+  fragment.appendChild(getAdapter().createTextNode(String(branchResult)));
 }
 function __conditional(condFn, trueFn, falseFn) {
   if (getIsHydrating()) {
@@ -119,11 +134,11 @@ function hydrateConditional(condFn, trueFn, falseFn) {
     return csrConditional(condFn, trueFn, falseFn);
   }
   const anchor = claimed;
-  let currentNode = null;
   let branchCleanups = [];
-  let resultNode = anchor;
-  const outerScope = pushScope();
+  let endMarker = null;
   let isFirstRun = true;
+  let needsCsrFallback = false;
+  const outerScope = pushScope();
   domEffect(() => {
     const show = condFn();
     if (isFirstRun) {
@@ -132,60 +147,47 @@ function hydrateConditional(condFn, trueFn, falseFn) {
       const branchResult2 = show ? trueFn() : falseFn();
       popScope();
       branchCleanups = scope2;
-      let contentNode = null;
-      if (branchResult2 == null || typeof branchResult2 === "boolean") {
-        contentNode = null;
-      } else if (isRenderNode(branchResult2)) {
-        contentNode = branchResult2;
-      } else {
-        const claimed2 = claimText();
-        contentNode = claimed2 ?? getAdapter().createTextNode(String(branchResult2));
+      if (branchResult2 != null && !isRenderNode(branchResult2) && typeof branchResult2 !== "boolean") {
+        claimText();
       }
-      const anchorParent = anchor.parentNode;
-      if (anchorParent) {
-        const wrap = getAdapter().createElement("span");
-        wrap.style.display = "contents";
-        anchorParent.insertBefore(wrap, anchor);
-        wrap.appendChild(anchor);
-        if (contentNode?.parentNode && contentNode.parentNode !== wrap) {
-          wrap.appendChild(contentNode);
-        }
-        currentNode = wrap;
-        resultNode = wrap;
-      } else {
-        currentNode = contentNode ?? getAdapter().createComment("empty");
-        resultNode = currentNode;
+      const claimedEnd = claimComment();
+      if (!claimedEnd) {
+        needsCsrFallback = true;
+        return;
       }
+      endMarker = claimedEnd;
       return;
     }
     runCleanups(branchCleanups);
+    clearBetween(anchor, endMarker);
     const scope = pushScope();
     const branchResult = show ? trueFn() : falseFn();
     popScope();
     branchCleanups = scope;
-    const newNode = normalizeNode(branchResult);
-    if (currentNode?.parentNode) {
-      currentNode.parentNode.replaceChild(newNode, currentNode);
-    } else if (anchor.parentNode) {
-      anchor.parentNode.insertBefore(newNode, anchor.nextSibling);
-    }
-    currentNode = newNode;
+    insertContentBefore(endMarker, branchResult);
   });
   popScope();
+  if (needsCsrFallback) {
+    runCleanups(branchCleanups);
+    runCleanups(outerScope);
+    return csrConditional(condFn, trueFn, falseFn);
+  }
   const disposeFn = () => {
     runCleanups(branchCleanups);
     runCleanups(outerScope);
   };
   _tryOnCleanup(disposeFn);
-  const result = Object.assign(resultNode, {
+  const result = Object.assign(anchor, {
     dispose: disposeFn
   });
   return result;
 }
 function csrConditional(condFn, trueFn, falseFn) {
   const anchor = getAdapter().createComment("conditional");
-  let currentNode = null;
+  const endMarker = getAdapter().createComment("/conditional");
   let branchCleanups = [];
+  let isFirstRun = true;
+  let firstRunResult;
   const outerScope = pushScope();
   domEffect(() => {
     const show = condFn();
@@ -194,26 +196,26 @@ function csrConditional(condFn, trueFn, falseFn) {
     const branchResult = show ? trueFn() : falseFn();
     popScope();
     branchCleanups = scope;
-    const newNode = normalizeNode(branchResult);
-    if (currentNode?.parentNode) {
-      currentNode.parentNode.replaceChild(newNode, currentNode);
-    } else if (anchor.parentNode) {
-      anchor.parentNode.insertBefore(newNode, anchor.nextSibling);
+    if (isFirstRun) {
+      isFirstRun = false;
+      firstRunResult = branchResult;
+      return;
     }
-    currentNode = newNode;
+    clearBetween(anchor, endMarker);
+    insertContentBefore(endMarker, branchResult);
   });
   popScope();
-  const wrapper = () => {
+  const disposeFn = () => {
     runCleanups(branchCleanups);
     runCleanups(outerScope);
   };
-  _tryOnCleanup(wrapper);
+  _tryOnCleanup(disposeFn);
   const fragment = getAdapter().createDocumentFragment();
   fragment.appendChild(anchor);
-  if (currentNode) {
-    fragment.appendChild(currentNode);
-  }
-  const result = Object.assign(fragment, { dispose: wrapper });
+  appendBranchContent(fragment, firstRunResult);
+  firstRunResult = undefined;
+  fragment.appendChild(endMarker);
+  const result = Object.assign(fragment, { dispose: disposeFn });
   return result;
 }
 // src/dom/insert.ts
@@ -395,6 +397,212 @@ function fixUpSelectValue(container) {
     }
   }
 }
+// src/dom/list-value.ts
+var unkeyedListValueWarned = false;
+function createItemProxy2(itemSignal) {
+  const initial = itemSignal.peek();
+  if (typeof initial !== "object" || initial == null) {
+    return initial;
+  }
+  return new Proxy(initial, {
+    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;
+    },
+    set() {
+      return false;
+    },
+    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);
+    },
+    getPrototypeOf() {
+      const current = itemSignal.value;
+      if (current == null)
+        return null;
+      return Object.getPrototypeOf(current);
+    }
+  });
+}
+function __listValue(items, keyFn, renderFn) {
+  const getItems = typeof items === "function" ? items : () => items.value;
+  const startMarker = document.createComment("lv-s");
+  const endMarker = document.createComment("lv-e");
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(startMarker);
+  fragment.appendChild(endMarker);
+  const nodeMap = new Map;
+  const scopeMap = new Map;
+  const itemSignalMap = new Map;
+  const exitingNodes = new Set;
+  const exitingKeyMap = new Map;
+  const keyGeneration = new Map;
+  const animHooks = useContext(ListAnimationContext);
+  let isFirstRun = true;
+  if (!keyFn && !unkeyedListValueWarned) {
+    unkeyedListValueWarned = true;
+    console.warn("[vertz] .map() without a key prop uses full-replacement mode (slower). " + "Add a key prop to list items for efficient updates: " + "{items.map(item => <Item key={item.id} />)}");
+  }
+  const outerScope = pushScope();
+  try {
+    domEffect(() => {
+      const newItems = getItems() ?? [];
+      if (!keyFn) {
+        for (const scope of scopeMap.values()) {
+          runCleanups(scope);
+        }
+        scopeMap.clear();
+        for (const node of nodeMap.values()) {
+          node.parentNode?.removeChild(node);
+        }
+        nodeMap.clear();
+        itemSignalMap.clear();
+        for (const [i, item] of newItems.entries()) {
+          const scope = pushScope();
+          const node = renderFn(item);
+          popScope();
+          endMarker.parentNode?.insertBefore(node, endMarker);
+          nodeMap.set(i, node);
+          scopeMap.set(i, scope);
+        }
+        return;
+      }
+      if (isFirstRun) {
+        isFirstRun = false;
+        for (const [i, item] of newItems.entries()) {
+          const key = keyFn(item, i);
+          const itemSig = signal(item);
+          const proxy = createItemProxy2(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;
+      }
+      animHooks?.onBeforeReconcile();
+      const newKeySet = new Set(newItems.map((item, i) => keyFn(item, i)));
+      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);
+          if (animHooks) {
+            const gen = (keyGeneration.get(key) ?? 0) + 1;
+            keyGeneration.set(key, gen);
+            exitingNodes.add(node);
+            exitingKeyMap.set(key, node);
+            animHooks.onItemExit(node, key, () => {
+              if (keyGeneration.get(key) === gen) {
+                node.parentNode?.removeChild(node);
+                exitingNodes.delete(node);
+                exitingKeyMap.delete(key);
+              }
+            });
+          } else {
+            node.parentNode?.removeChild(node);
+          }
+        }
+      }
+      const desiredNodes = [];
+      const enterEntries = [];
+      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 = createItemProxy2(itemSig);
+          const scope = pushScope();
+          node = renderFn(proxy);
+          popScope();
+          nodeMap.set(key, node);
+          scopeMap.set(key, scope);
+          itemSignalMap.set(key, itemSig);
+          enterEntries.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 === endMarker) {
+            parent.insertBefore(desired, endMarker);
+          } else if (cursor === desired) {
+            cursor = cursor.nextSibling;
+          } else {
+            parent.insertBefore(desired, cursor);
+          }
+        }
+      }
+      if (animHooks) {
+        for (const { node, key } of enterEntries) {
+          animHooks.onItemEnter(node, key);
+        }
+      }
+      animHooks?.onAfterReconcile();
+    });
+  } 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 Object.assign(fragment, { dispose });
+}
 // src/dom/spread.ts
 var SKIP_KEYS = new Set(["children", "key"]);
 var PROP_ALIASES = {
@@ -476,6 +684,7 @@ export {
   __pushMountFrame,
   __prop,
   __on,
+  __listValue,
   __list,
   __insert,
   __flushMountFrame,
@@ -498,6 +707,7 @@ export {
   PSEUDO_MAP,
   PROPERTY_MAP,
   MemoryCache,
+  ListAnimationContext,
   LINE_HEIGHT_SCALE,
   KEYWORD_MAP,
   HEIGHT_AXIS_PROPERTIES,

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

@@ -29,8 +29,6 @@ interface ReadonlySignal<T> {
 * type UnwrappedData = Unwrapped<ReadonlySignal<Task | undefined>>; // → Task | undefined
 */
 type Unwrapped<T> = T extends ReadonlySignal<infer U> ? U : T;
-/** Dispose function returned by effect(). */
-type DisposeFn = () => void;
 /** Options for query(). */
 interface QueryOptions<T> {
 	/** Pre-populated data — skips the initial fetch when provided. */
@@ -98,33 +96,4 @@ declare function query<
 	E
 >(thunk: () => QueryDescriptor<T, E> | null, options?: Omit<QueryOptions<T>, "key">): QueryResult<T, E>;
 declare function query<T>(thunk: () => Promise<T> | null, options?: QueryOptions<T>): QueryResult<T>;
-interface QueryMatchHandlers<
-	T,
-	E
-> {
-	loading: () => Node | null;
-	error: (error: E) => Node | null;
-	data: (data: T) => Node | null;
-}
-/**
-* Pattern-match on a QueryResult's exclusive state.
-*
-* Returns a stable `<span style="display:contents">` wrapper that internally
-* manages branch switching (loading/error/data) via a reactive effect.
-* The same wrapper is returned for repeated calls with the same queryResult
-* (cached via WeakMap), enabling __child's stable-node optimization.
-*
-* Priority: loading → error → data.
-*
-* `loading` only fires on the initial load (no data yet).
-* When revalidating with existing data, the `data` handler receives the
-* current data. Access `query.revalidating` from the component scope for
-* revalidation state.
-*/
-declare function queryMatch<
-	T,
-	E
->(queryResult: QueryResult<T, E>, handlers: QueryMatchHandlers<T, E>): HTMLElement & {
-	dispose: DisposeFn;
-};
-export { queryMatch, query, isQueryDescriptor, QueryResult, QueryOptions, QueryMatchHandlers, QueryDescriptor2 as QueryDescriptor, CacheStore };
+export { query, isQueryDescriptor, QueryResult, QueryOptions, QueryDescriptor2 as QueryDescriptor, CacheStore };

package/dist/src/query/public.js

@@ -1,17 +1,14 @@
 import {
-  query,
-  queryMatch
-} from "../../shared/chunk-4gen306a.js";
+  query
+} from "../../shared/chunk-1jgws7rs.js";
 import"../../shared/chunk-jrtrk5z4.js";
-import"../../shared/chunk-2y9f9j62.js";
-import"../../shared/chunk-2eh4p2n7.js";
-import"../../shared/chunk-da2w7j7w.js";
-import"../../shared/chunk-656n0x6y.js";
+import"../../shared/chunk-09ntccdx.js";
+import"../../shared/chunk-xs5s8gqe.js";
+import"../../shared/chunk-ppr06jgn.js";
 
 // src/query/public.ts
 import { isQueryDescriptor } from "@vertz/fetch";
 export {
-  queryMatch,
   query,
   isQueryDescriptor
 };

package/dist/src/router/public.js

@@ -6,25 +6,24 @@ import {
   createLink,
   parseSearchParams,
   useSearchParams
-} from "../../shared/chunk-2wag9c7v.js";
-import"../../shared/chunk-ge2e6y2s.js";
+} from "../../shared/chunk-2krx4aqe.js";
+import"../../shared/chunk-svvqjmyy.js";
 import {
   createRouter
-} from "../../shared/chunk-jtma4sh4.js";
+} from "../../shared/chunk-e09mdqcx.js";
 import {
   defineRoutes
 } from "../../shared/chunk-am9zaw4h.js";
 import"../../shared/chunk-jrtrk5z4.js";
-import"../../shared/chunk-mbnda3pv.js";
+import"../../shared/chunk-djvarb8r.js";
 import"../../shared/chunk-h1fsr8kv.js";
-import"../../shared/chunk-2y9f9j62.js";
 import {
   RouterContext,
   useParams,
   useRouter
-} from "../../shared/chunk-f4d5nphq.js";
-import"../../shared/chunk-da2w7j7w.js";
-import"../../shared/chunk-656n0x6y.js";
+} from "../../shared/chunk-7nr2ebrf.js";
+import"../../shared/chunk-xs5s8gqe.js";
+import"../../shared/chunk-ppr06jgn.js";
 export {
   useSearchParams,
   useRouter,

package/dist/src/test/index.js

@@ -1,12 +1,12 @@
 import {
   createRouter
-} from "../../shared/chunk-jtma4sh4.js";
+} from "../../shared/chunk-e09mdqcx.js";
 import {
   defineRoutes
 } from "../../shared/chunk-am9zaw4h.js";
 import"../../shared/chunk-jrtrk5z4.js";
-import"../../shared/chunk-da2w7j7w.js";
-import"../../shared/chunk-656n0x6y.js";
+import"../../shared/chunk-xs5s8gqe.js";
+import"../../shared/chunk-ppr06jgn.js";
 
 // src/test/interactions.ts
 async function click(el) {

package/package.json

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

package/dist/shared/chunk-2y9f9j62.js

@@ -1,40 +0,0 @@
-import {
-  getSSRContext
-} from "./chunk-656n0x6y.js";
-
-// src/dom/dom-adapter.ts
-function createDOMAdapter() {
-  return {
-    createElement: (tag) => document.createElement(tag),
-    createElementNS: (ns, tag) => document.createElementNS(ns, tag),
-    createTextNode: (text) => document.createTextNode(text),
-    createComment: (text) => document.createComment(text),
-    createDocumentFragment: () => document.createDocumentFragment(),
-    isNode: (value) => typeof Node !== "undefined" && value instanceof Node
-  };
-}
-
-// src/dom/adapter.ts
-var RENDER_NODE_BRAND = Symbol.for("vertz:render-node");
-function isRenderNode(value) {
-  if (value == null || typeof value !== "object")
-    return false;
-  if (RENDER_NODE_BRAND in value)
-    return true;
-  return typeof Node !== "undefined" && value instanceof Node;
-}
-var currentAdapter = null;
-function getAdapter() {
-  const ctx = getSSRContext();
-  if (ctx)
-    return ctx.adapter;
-  if (!currentAdapter) {
-    currentAdapter = createDOMAdapter();
-  }
-  return currentAdapter;
-}
-function setAdapter(adapter) {
-  currentAdapter = adapter;
-}
-
-export { createDOMAdapter, RENDER_NODE_BRAND, isRenderNode, getAdapter, setAdapter };