@vertz/ui 0.2.20 → 0.2.22

package/dist/shared/{chunk-4fwcwxn6.js → chunk-2qe6aqhb.js}

@@ -285,6 +285,223 @@ function batch(fn) {
   }
 }
 
+// src/hydrate/hydration-context.ts
+var isHydrating = false;
+var currentNode = null;
+var cursorStack = [];
+var deferredEffects = null;
+function queueDeferredEffect(run) {
+  if (!isHydrating || deferredEffects === null)
+    return false;
+  deferredEffects.push(run);
+  return true;
+}
+var hydrationRoot = null;
+var claimedNodes = null;
+function isDebug() {
+  if (typeof process !== "undefined" && true) {
+    return true;
+  }
+  return typeof globalThis !== "undefined" && globalThis.__VERTZ_HYDRATION_DEBUG__ === true;
+}
+function startHydration(root) {
+  if (isHydrating) {
+    throw new Error("[hydrate] startHydration() called while hydration is already active. " + "Concurrent hydration is not supported.");
+  }
+  isHydrating = true;
+  currentNode = root.firstChild;
+  cursorStack.length = 0;
+  deferredEffects = [];
+  if (isDebug()) {
+    hydrationRoot = root;
+    claimedNodes = new WeakSet;
+  }
+}
+function endHydration() {
+  if (isDebug()) {
+    if (currentNode) {
+      console.debug("[hydrate] Hydration ended with unclaimed nodes remaining. " + "This may indicate SSR/client tree mismatch or browser extension nodes.");
+    }
+    if (cursorStack.length > 0) {
+      console.debug(`[hydrate] Hydration ended with unbalanced cursor stack (depth: ${cursorStack.length}). ` + "Check that __enterChildren/__exitChildren calls are paired.");
+    }
+  }
+  if (hydrationRoot && claimedNodes) {
+    const unclaimed = findUnclaimedNodes(hydrationRoot, claimedNodes);
+    if (unclaimed.length > 0) {
+      console.warn(`[hydrate] ${unclaimed.length} SSR node(s) not claimed during hydration:
+` + unclaimed.map((n) => `  - ${describeNode(n)}`).join(`
+`));
+    }
+  }
+  hydrationRoot = null;
+  claimedNodes = null;
+  isHydrating = false;
+  currentNode = null;
+  cursorStack.length = 0;
+  flushDeferredEffects();
+}
+function discardDeferredEffects() {
+  deferredEffects = null;
+}
+function flushDeferredEffects() {
+  const effects = deferredEffects;
+  deferredEffects = null;
+  if (effects) {
+    for (const run of effects) {
+      try {
+        run();
+      } catch (e) {
+        if (typeof process !== "undefined" && true) {
+          console.error("[hydrate] Deferred effect threw during flush:", e);
+        }
+      }
+    }
+  }
+}
+function getIsHydrating() {
+  return isHydrating;
+}
+function pauseHydration() {
+  isHydrating = false;
+}
+function resumeHydration() {
+  isHydrating = true;
+}
+function claimElement(tag) {
+  const upperTag = tag.toUpperCase();
+  const savedNode = currentNode;
+  while (currentNode) {
+    if (currentNode.nodeType === Node.ELEMENT_NODE) {
+      const el = currentNode;
+      if (el.tagName === upperTag) {
+        if (isDebug()) {
+          const id = el.id ? `#${el.id}` : "";
+          const cls = el.className ? `.${el.className.split(" ")[0]}` : "";
+          console.debug(`[hydrate] claimElement(<${tag}${id}${cls}>) ✓ depth=${cursorStack.length}`);
+        }
+        if (claimedNodes)
+          claimedNodes.add(el);
+        currentNode = el.nextSibling;
+        return el;
+      }
+      if (isDebug()) {
+        console.debug(`[hydrate] Skipping non-matching node: <${el.tagName.toLowerCase()}> (expected <${tag}>)`);
+      }
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  currentNode = savedNode;
+  if (isDebug()) {
+    console.warn(`[hydrate] Expected <${tag}> but no matching SSR node found. Creating new element.`);
+  }
+  return null;
+}
+function claimText() {
+  const savedNode = currentNode;
+  while (currentNode) {
+    if (currentNode.nodeType === Node.TEXT_NODE) {
+      const text = currentNode;
+      if (isDebug()) {
+        const preview = text.data.length > 30 ? text.data.slice(0, 30) + "..." : text.data;
+        console.debug(`[hydrate] claimText("${preview}") ✓ depth=${cursorStack.length}`);
+      }
+      if (claimedNodes)
+        claimedNodes.add(text);
+      currentNode = text.nextSibling;
+      return text;
+    }
+    if (currentNode.nodeType === Node.ELEMENT_NODE) {
+      break;
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  currentNode = savedNode;
+  if (isDebug()) {
+    console.warn("[hydrate] Expected text node but no matching SSR node found.");
+  }
+  return null;
+}
+function claimComment() {
+  const savedNode = currentNode;
+  while (currentNode) {
+    if (currentNode.nodeType === Node.COMMENT_NODE) {
+      const comment = currentNode;
+      if (claimedNodes)
+        claimedNodes.add(comment);
+      currentNode = comment.nextSibling;
+      return comment;
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  currentNode = savedNode;
+  if (isDebug()) {
+    console.warn("[hydrate] Expected comment node but no matching SSR node found.");
+  }
+  return null;
+}
+function enterChildren(el) {
+  cursorStack.push(currentNode);
+  currentNode = el.firstChild;
+}
+function exitChildren() {
+  if (cursorStack.length === 0) {
+    if (isDebug()) {
+      console.warn("[hydrate] exitChildren() called with empty stack. " + "This likely means __exitChildren was called without a matching __enterChildren.");
+    }
+    currentNode = null;
+    return;
+  }
+  currentNode = cursorStack.pop() ?? null;
+}
+function findUnclaimedNodes(root, claimed) {
+  const unclaimed = [];
+  function walk(node) {
+    let child = node.firstChild;
+    while (child) {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        const el = child;
+        if (el.tagName.includes("-")) {
+          child = child.nextSibling;
+          continue;
+        }
+      }
+      if (child.nodeType === Node.ELEMENT_NODE && claimed.has(child) && child.tagName === "SPAN" && child.style.display === "contents") {
+        child = child.nextSibling;
+        continue;
+      }
+      if (!claimed.has(child)) {
+        if (child.nodeType === Node.ELEMENT_NODE || child.nodeType === Node.TEXT_NODE || child.nodeType === Node.COMMENT_NODE) {
+          unclaimed.push(child);
+        }
+      }
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        walk(child);
+      }
+      child = child.nextSibling;
+    }
+  }
+  walk(root);
+  return unclaimed;
+}
+function describeNode(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node;
+    const id = el.id ? `#${el.id}` : "";
+    const cls = el.className ? `.${String(el.className).split(" ")[0]}` : "";
+    return `<${el.tagName.toLowerCase()}${id}${cls}>`;
+  }
+  if (node.nodeType === Node.TEXT_NODE) {
+    const data = node.data;
+    const preview = data.length > 20 ? data.slice(0, 20) + "..." : data;
+    return `text("${preview}")`;
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    return `<!-- ${node.data} -->`;
+  }
+  return `[node type=${node.nodeType}]`;
+}
+
 // src/runtime/signal.ts
 function isSSR() {
   return getSSRContext() !== undefined;
@@ -471,6 +688,23 @@ function domEffect(fn) {
   _tryOnCleanup(dispose);
   return dispose;
 }
+function deferredDomEffect(fn) {
+  if (isSSR()) {
+    fn();
+    return () => {};
+  }
+  const eff = new EffectImpl(fn);
+  const deferred = queueDeferredEffect(() => {
+    if (!eff._disposed)
+      eff._run();
+  });
+  if (!deferred) {
+    eff._run();
+  }
+  const dispose = () => eff._dispose();
+  _tryOnCleanup(dispose);
+  return dispose;
+}
 function lifecycleEffect(fn) {
   if (isSSR()) {
     return () => {};
@@ -482,4 +716,4 @@ function lifecycleEffect(fn) {
   return dispose;
 }
 
-export { registerSSRResolver, getSSRContext, hasSSRResolver, createContext, useContext, getContextScope, setContextScope, DisposalScopeError, onCleanup, _tryOnCleanup, pushScope, popScope, runCleanups, setReadValueCallback, untrack, batch, startSignalCollection, stopSignalCollection, signal, computed, domEffect, lifecycleEffect };
+export { registerSSRResolver, getSSRContext, hasSSRResolver, createContext, useContext, getContextScope, setContextScope, DisposalScopeError, onCleanup, _tryOnCleanup, pushScope, popScope, runCleanups, setReadValueCallback, untrack, startHydration, endHydration, discardDeferredEffects, getIsHydrating, pauseHydration, resumeHydration, claimElement, claimText, claimComment, enterChildren, exitChildren, batch, startSignalCollection, stopSignalCollection, signal, computed, domEffect, deferredDomEffect, lifecycleEffect };

package/dist/shared/{chunk-mtsvrj9e.js → chunk-4cmt1ve8.js}

@@ -1,7 +1,7 @@
 import {
   createContext,
   useContext
-} from "./chunk-4fwcwxn6.js";
+} from "./chunk-2qe6aqhb.js";
 
 // src/router/router-context.ts
 var RouterContext = createContext(undefined, "@vertz/ui::RouterContext");

package/dist/shared/chunk-4xkw6h1s.js

@@ -0,0 +1,73 @@
+// src/dom/style.ts
+function camelToKebab(prop) {
+  const third = prop[2];
+  if (prop.startsWith("ms") && third !== undefined && third >= "A" && third <= "Z") {
+    prop = `Ms${prop.slice(2)}`;
+  }
+  return prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+var UNITLESS = new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexPositive",
+  "flexShrink",
+  "flexNegative",
+  "flexOrder",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "fontWeight",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth",
+  "scale"
+]);
+function formatValue(key, value) {
+  if (typeof value !== "number" || value === 0 || key.startsWith("--") || UNITLESS.has(key)) {
+    return String(value);
+  }
+  return `${value}px`;
+}
+function styleObjectToString(style) {
+  const parts = [];
+  for (const key of Object.keys(style)) {
+    const value = style[key];
+    if (value == null)
+      continue;
+    const cssKey = key.startsWith("--") ? key : camelToKebab(key);
+    parts.push(`${cssKey}: ${formatValue(key, value)}`);
+  }
+  return parts.join("; ");
+}
+
+export { styleObjectToString };

package/dist/shared/{chunk-j5qtsm0b.js → chunk-67z8b0q8.js}

@@ -1,33 +1,35 @@
 import {
   __classList,
   __on
-} from "./chunk-07bh4m1e.js";
+} from "./chunk-kjwp5q5s.js";
 import {
   __append,
   __element,
   __enterChildren,
   __exitChildren,
-  __staticText,
-  getIsHydrating
-} from "./chunk-mgfrrrjq.js";
+  __staticText
+} from "./chunk-vwz86vg9.js";
 import {
   RouterContext
-} from "./chunk-mtsvrj9e.js";
+} from "./chunk-4cmt1ve8.js";
 import {
   isBrowser
-} from "./chunk-14eqne2a.js";
+} from "./chunk-bybgyjye.js";
 import {
   _tryOnCleanup,
   createContext,
   domEffect,
+  endHydration,
+  getIsHydrating,
   getSSRContext,
   popScope,
   pushScope,
   runCleanups,
   signal,
+  startHydration,
   untrack,
   useContext
-} from "./chunk-4fwcwxn6.js";
+} from "./chunk-2qe6aqhb.js";
 
 // src/router/link.ts
 var DANGEROUS_SCHEMES = ["javascript:", "data:", "vbscript:"];
@@ -46,6 +48,7 @@ function createLink(currentPath, navigate, factoryOptions) {
     href,
     children,
     activeClass,
+    class: classProp,
     className,
     prefetch
   }) {
@@ -58,9 +61,10 @@ function createLink(currentPath, navigate, factoryOptions) {
       mouseEvent.preventDefault();
       navigate(safeHref);
     };
+    const effectiveClass = className ?? classProp;
     const props = { href: safeHref };
-    if (className) {
-      props.class = className;
+    if (effectiveClass) {
+      props.class = effectiveClass;
     }
     const el = __element("a", props);
     __on(el, "click", handleClick);
@@ -97,7 +101,13 @@ function createLink(currentPath, navigate, factoryOptions) {
     return el;
   };
 }
-function Link({ href, children, activeClass, className }) {
+function Link({
+  href,
+  children,
+  activeClass,
+  class: classProp,
+  className
+}) {
   const router = useContext(RouterContext);
   if (!router) {
     throw new Error("Link must be used within a RouterContext.Provider (via createRouter)");
@@ -111,9 +121,10 @@ function Link({ href, children, activeClass, className }) {
     mouseEvent.preventDefault();
     router.navigate({ to: safeHref });
   };
+  const effectiveClass = className ?? classProp;
   const props = { href: safeHref };
-  if (className) {
-    props.class = className;
+  if (effectiveClass) {
+    props.class = effectiveClass;
   }
   const el = __element("a", props);
   __on(el, "click", handleClick);
@@ -160,6 +171,7 @@ function Outlet() {
     const factory = ctx.childComponent;
     untrack(() => {
       runCleanups(childCleanups);
+      const wasHydrating = isFirstHydrationRender;
       if (isFirstHydrationRender) {
         isFirstHydrationRender = false;
       } else {
@@ -177,15 +189,43 @@ function Outlet() {
           result.then((mod) => {
             if (gen !== renderGen)
               return;
+            let node;
             childCleanups = pushScope();
-            RouterContext.Provider(router, () => {
-              const node = mod.default();
-              __append(container, node);
-            });
+            if (wasHydrating) {
+              startHydration(container);
+              try {
+                RouterContext.Provider(router, () => {
+                  node = mod.default();
+                  __append(container, node);
+                });
+              } finally {
+                endHydration();
+              }
+              if (!container.contains(node)) {
+                while (container.firstChild) {
+                  container.removeChild(container.firstChild);
+                }
+                container.appendChild(node);
+              }
+            } else {
+              while (container.firstChild) {
+                container.removeChild(container.firstChild);
+              }
+              RouterContext.Provider(router, () => {
+                node = mod.default();
+                __append(container, node);
+              });
+            }
             popScope();
           });
         } else {
           __append(container, result);
+          if (getIsHydrating() && !container.contains(result)) {
+            while (container.firstChild) {
+              container.removeChild(container.firstChild);
+            }
+            container.appendChild(result);
+          }
           popScope();
         }
       } else {
@@ -235,6 +275,7 @@ function RouterView({ router, fallback }) {
       }
       runCleanups(pageCleanups);
       const doRender = () => {
+        const wasHydrating = isFirstHydrationRender;
         if (!isFirstHydrationRender) {
           while (container.firstChild) {
             container.removeChild(container.firstChild);
@@ -252,23 +293,58 @@ function RouterView({ router, fallback }) {
         }
         const levels = buildLevels(newMatched);
         const rootFactory = buildInsideOutFactory(newMatched, levels, 0, router);
+        let asyncRoute = false;
         RouterContext.Provider(router, () => {
           const result = rootFactory();
           if (result instanceof Promise) {
+            asyncRoute = true;
+            popScope();
             result.then((mod) => {
               if (gen !== renderGen)
                 return;
-              RouterContext.Provider(router, () => {
-                const node = mod.default();
-                container.appendChild(node);
-              });
+              let node;
+              pageCleanups = pushScope();
+              if (wasHydrating) {
+                startHydration(container);
+                try {
+                  RouterContext.Provider(router, () => {
+                    node = mod.default();
+                    __append(container, node);
+                  });
+                } finally {
+                  endHydration();
+                }
+                if (!container.contains(node)) {
+                  while (container.firstChild) {
+                    container.removeChild(container.firstChild);
+                  }
+                  container.appendChild(node);
+                }
+              } else {
+                while (container.firstChild) {
+                  container.removeChild(container.firstChild);
+                }
+                RouterContext.Provider(router, () => {
+                  node = mod.default();
+                  container.appendChild(node);
+                });
+              }
+              popScope();
             });
           } else {
             __append(container, result);
+            if (getIsHydrating() && !container.contains(result)) {
+              while (container.firstChild) {
+                container.removeChild(container.firstChild);
+              }
+              container.appendChild(result);
+            }
           }
         });
         prevLevels = levels;
-        popScope();
+        if (!asyncRoute) {
+          popScope();
+        }
       };
       doRender();
     });

package/dist/shared/{chunk-fkbgbf3n.js → chunk-7g722pdh.js}

@@ -1,17 +1,54 @@
 import {
   executeLoaders,
   matchRoute
-} from "./chunk-6wd36w21.js";
+} from "./chunk-am9zaw4h.js";
 import {
   prefetchNavData
 } from "./chunk-jrtrk5z4.js";
 import {
   isBrowser
-} from "./chunk-14eqne2a.js";
+} from "./chunk-bybgyjye.js";
 import {
   getSSRContext,
   signal
-} from "./chunk-4fwcwxn6.js";
+} from "./chunk-2qe6aqhb.js";
+
+// src/router/view-transitions.ts
+var transitionGen = 0;
+async function withViewTransition(update, config) {
+  if (config === undefined || config === false) {
+    await update();
+    return;
+  }
+  if (typeof document === "undefined" || !("startViewTransition" in document)) {
+    await update();
+    return;
+  }
+  if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    await update();
+    return;
+  }
+  const className = typeof config === "object" && config.className ? config.className : undefined;
+  const gen = ++transitionGen;
+  if (className) {
+    document.documentElement.classList.add(className);
+  }
+  const transition = document.startViewTransition.call(document, async () => {
+    await update();
+  });
+  try {
+    await transition.finished;
+  } catch (err) {
+    if (err instanceof DOMException && err.name === "AbortError") {
+      return;
+    }
+    throw err;
+  } finally {
+    if (className && gen === transitionGen) {
+      document.documentElement.classList.remove(className);
+    }
+  }
+}
 
 // src/router/navigate.ts
 var DEFAULT_NAV_THRESHOLD_MS = 500;
@@ -71,6 +108,19 @@ function createRouter(routes, initialUrlOrOptions, maybeOptions) {
       if (!ctx.discoveredRoutes) {
         ctx.discoveredRoutes = collectRoutePatterns(routes);
       }
+    }, matchForSSR = function(ctx) {
+      registerRoutesForDiscovery(ctx);
+      const m = matchRoute(routes, ctx.url);
+      if (m && !ctx.matchedRoutePatterns) {
+        const fullPaths = [];
+        let prefix = "";
+        for (const entry of m.matched) {
+          prefix = joinPatterns(prefix, entry.route.pattern);
+          fullPaths.push(prefix);
+        }
+        ctx.matchedRoutePatterns = fullPaths;
+      }
+      return m;
     };
     const ssrUrl = initialUrl ?? ssrCtx?.url ?? "/";
     const fallbackMatch = matchRoute(routes, ssrUrl);
@@ -79,16 +129,14 @@ function createRouter(routes, initialUrlOrOptions, maybeOptions) {
         get value() {
           const ctx = getSSRContext();
           if (ctx) {
-            registerRoutesForDiscovery(ctx);
-            return matchRoute(routes, ctx.url);
+            return matchForSSR(ctx);
           }
           return fallbackMatch;
         },
         peek() {
           const ctx = getSSRContext();
           if (ctx) {
-            registerRoutesForDiscovery(ctx);
-            return matchRoute(routes, ctx.url);
+            return matchForSSR(ctx);
           }
           return fallbackMatch;
         },
@@ -242,15 +290,21 @@ function createRouter(routes, initialUrlOrOptions, maybeOptions) {
       }
     }
   }
-  async function applyNavigation(url2) {
+  async function applyNavigation(url2, preMatch, transitionConfig) {
     if (currentAbort) {
       currentAbort.abort();
     }
     const gen = ++navigationGen;
     const abort = new AbortController;
     currentAbort = abort;
-    const match = matchRoute(routes, url2);
-    current.value = match;
+    const match = preMatch !== undefined ? preMatch : matchRoute(routes, url2);
+    if (transitionConfig) {
+      await withViewTransition(() => {
+        current.value = match;
+      }, transitionConfig);
+    } else {
+      current.value = match;
+    }
     if (match) {
       visitedUrls.add(normalizeUrl(url2));
       searchParams.value = match.search;
@@ -278,7 +332,9 @@ function createRouter(routes, initialUrlOrOptions, maybeOptions) {
     }
     if (gen !== navigateGen)
       return;
-    await applyNavigation(navUrl);
+    const match = matchRoute(routes, navUrl);
+    const transitionConfig = input.viewTransition ?? match?.route.viewTransition ?? options?.viewTransition;
+    await applyNavigation(navUrl, match, transitionConfig);
   }
   async function revalidate() {
     const match = current.value;
@@ -295,7 +351,9 @@ function createRouter(routes, initialUrlOrOptions, maybeOptions) {
   const onPopState = () => {
     const popUrl = window.location.pathname + window.location.search;
     startPrefetch(popUrl);
-    applyNavigation(popUrl).catch(() => {});
+    const match = matchRoute(routes, popUrl);
+    const transitionConfig = match?.route.viewTransition ?? options?.viewTransition;
+    applyNavigation(popUrl, match, transitionConfig).catch(() => {});
   };
   window.addEventListener("popstate", onPopState);
   function dispose() {