@vertz/ui 0.2.23 → 0.2.25

package/dist/shared/{chunk-016m1fq0.js → chunk-2krx4aqe.js}

@@ -1,23 +1,23 @@
 import {
-  __classList,
   __on,
   beginDeferringMounts,
   discardDeferredMounts,
   flushDeferredMounts
-} from "./chunk-2kyhn86t.js";
+} from "./chunk-svvqjmyy.js";
 import {
   __append,
+  __classList,
   __element,
   __enterChildren,
   __exitChildren,
   __staticText
-} from "./chunk-13tvh4wq.js";
+} from "./chunk-djvarb8r.js";
 import {
   RouterContext
-} from "./chunk-f4d5nphq.js";
+} from "./chunk-7nr2ebrf.js";
 import {
   isBrowser
-} from "./chunk-da2w7j7w.js";
+} from "./chunk-xs5s8gqe.js";
 import {
   _tryOnCleanup,
   createContext,
@@ -32,7 +32,65 @@ import {
   startHydration,
   untrack,
   useContext
-} from "./chunk-656n0x6y.js";
+} from "./chunk-ppr06jgn.js";
+
+// src/component/error-boundary-context.ts
+var handlerStack = [];
+function pushErrorHandler(handler) {
+  handlerStack.push(handler);
+}
+function popErrorHandler() {
+  handlerStack.pop();
+}
+function getCurrentErrorHandler() {
+  if (handlerStack.length === 0) {
+    return;
+  }
+  return handlerStack[handlerStack.length - 1];
+}
+
+// src/component/error-boundary.ts
+function toError(value) {
+  if (value instanceof Error) {
+    return value;
+  }
+  return new Error(String(value));
+}
+function ErrorBoundary(props) {
+  function handleAsyncError(error, placeholder) {
+    const fallbackNode = props.fallback(error, retry);
+    function retry() {
+      try {
+        const retryResult = props.children();
+        if (fallbackNode.parentNode) {
+          fallbackNode.parentNode.replaceChild(retryResult, fallbackNode);
+        }
+      } catch (_retryThrown) {}
+    }
+    if (placeholder.parentNode) {
+      placeholder.parentNode.replaceChild(fallbackNode, placeholder);
+    }
+  }
+  try {
+    pushErrorHandler(handleAsyncError);
+    const result = props.children();
+    popErrorHandler();
+    return result;
+  } catch (thrown) {
+    let retry = function() {
+      try {
+        const retryResult = props.children();
+        if (fallbackNode.parentNode) {
+          fallbackNode.parentNode.replaceChild(retryResult, fallbackNode);
+        }
+      } catch (_retryThrown) {}
+    };
+    popErrorHandler();
+    const error = toError(thrown);
+    const fallbackNode = props.fallback(error, retry);
+    return fallbackNode;
+  }
+}
 
 // src/router/link.ts
 var DANGEROUS_SCHEMES = ["javascript:", "data:", "vbscript:"];
@@ -256,12 +314,13 @@ function Outlet() {
 }
 
 // src/router/router-view.ts
-function RouterView({ router, fallback }) {
+function RouterView({ router, fallback, errorFallback }) {
   const container = __element("div");
   let isFirstHydrationRender = getIsHydrating();
   let renderGen = 0;
   let pageCleanups = [];
   let prevLevels = [];
+  let prevParamsKey;
   __enterChildren(container);
   const dispose = domEffect(() => {
     const match = router.current.value;
@@ -274,17 +333,23 @@ function RouterView({ router, fallback }) {
         if (prevLevels[divergeAt].route !== newMatched[divergeAt].route)
           break;
       }
-      if (prevLevels.length > 0 && divergeAt === prevLevels.length && divergeAt === newMatched.length) {
+      const currentParamsKey = match ? JSON.stringify(match.params) : undefined;
+      const chainIdentical = prevLevels.length > 0 && divergeAt === prevLevels.length && divergeAt === newMatched.length;
+      if (chainIdentical && prevParamsKey === currentParamsKey) {
         return;
       }
+      if (chainIdentical) {
+        divergeAt = 0;
+      }
       if (divergeAt > 0 && newMatched.length > 0) {
         const newLevels = buildLevels(newMatched);
-        const newChildFactory = buildInsideOutFactory(newMatched, newLevels, divergeAt, router);
+        const newChildFactory = buildInsideOutFactory(newMatched, newLevels, divergeAt, router, errorFallback);
         const parentLevel = prevLevels[divergeAt - 1];
         if (parentLevel.childSignal) {
           parentLevel.childSignal.value = newChildFactory;
         }
         prevLevels = [...prevLevels.slice(0, divergeAt), ...newLevels.slice(divergeAt)];
+        prevParamsKey = currentParamsKey;
         return;
       }
       runCleanups(pageCleanups);
@@ -299,6 +364,7 @@ function RouterView({ router, fallback }) {
         pageCleanups = pushScope();
         if (!match) {
           prevLevels = [];
+          prevParamsKey = undefined;
           if (fallback) {
             container.appendChild(fallback());
           }
@@ -306,7 +372,8 @@ function RouterView({ router, fallback }) {
           return;
         }
         const levels = buildLevels(newMatched);
-        const rootFactory = buildInsideOutFactory(newMatched, levels, 0, router);
+        const rootFactory = buildInsideOutFactory(newMatched, levels, 0, router, errorFallback);
+        const lazyFallback = match ? match.route.errorComponent ?? errorFallback : undefined;
         let asyncRoute = false;
         RouterContext.Provider(router, () => {
           const result = rootFactory();
@@ -352,11 +419,35 @@ function RouterView({ router, fallback }) {
                     container.appendChild(node);
                   });
                 }
+              } catch (thrown) {
+                if (lazyFallback) {
+                  const error = thrown instanceof Error ? thrown : new Error(String(thrown));
+                  while (container.firstChild) {
+                    container.removeChild(container.firstChild);
+                  }
+                  const fallbackNode = lazyFallback({
+                    error,
+                    retry: () => {
+                      try {
+                        const retryNode = mod.default();
+                        if (fallbackNode.parentNode) {
+                          fallbackNode.parentNode.replaceChild(retryNode, fallbackNode);
+                        }
+                      } catch {}
+                    }
+                  });
+                  container.appendChild(fallbackNode);
+                } else {
+                  throw thrown;
+                }
               } finally {
                 popScope();
               }
             });
           } else {
+            if (gen !== renderGen) {
+              return;
+            }
             __append(container, result);
             if (getIsHydrating() && !container.contains(result)) {
               while (container.firstChild) {
@@ -366,7 +457,10 @@ function RouterView({ router, fallback }) {
             }
           }
         });
-        prevLevels = levels;
+        if (gen === renderGen) {
+          prevLevels = levels;
+          prevParamsKey = currentParamsKey;
+        }
         if (!asyncRoute) {
           popScope();
         }
@@ -387,7 +481,7 @@ function buildLevels(matched) {
     route: m.route
   }));
 }
-function buildInsideOutFactory(matched, levels, startAt, router) {
+function buildInsideOutFactory(matched, levels, startAt, router, errorFallback) {
   const ssrCtx = getSSRContext();
   const wrapForSSR = (route, routeIndex) => {
     if (!ssrCtx)
@@ -415,12 +509,22 @@ function buildInsideOutFactory(matched, levels, startAt, router) {
       return result;
     };
   };
-  let factory = wrapForSSR(matched[matched.length - 1].route, matched.length - 1);
+  const resolveFallback = (route) => route.errorComponent ?? errorFallback;
+  const maybeWrapInBoundary = (componentFn, fb) => {
+    if (!fb)
+      return componentFn;
+    return () => ErrorBoundary({
+      children: componentFn,
+      fallback: (error, retry) => fb({ error, retry })
+    });
+  };
+  const leafRoute = matched[matched.length - 1].route;
+  let factory = maybeWrapInBoundary(wrapForSSR(leafRoute, matched.length - 1), resolveFallback(leafRoute));
   for (let i = matched.length - 2;i >= startAt; i--) {
     const level = levels[i];
     const childFactory = factory;
     level.childSignal.value = childFactory;
-    const parentComponent = wrapForSSR(level.route, i);
+    const parentComponent = maybeWrapInBoundary(wrapForSSR(level.route, i), resolveFallback(level.route));
     const cs = level.childSignal;
     factory = () => {
       let result;
@@ -451,4 +555,4 @@ function useSearchParams(searchSignal) {
   return searchSignal.value;
 }
 
-export { createLink, Link, OutletContext, Outlet, RouterView, parseSearchParams, useSearchParams };
+export { getCurrentErrorHandler, ErrorBoundary, createLink, Link, OutletContext, Outlet, RouterView, parseSearchParams, useSearchParams };

package/dist/shared/{chunk-f4d5nphq.js → chunk-7nr2ebrf.js}

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

package/dist/shared/{chunk-4gmtsf6v.js → chunk-bk7mmn92.js}

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

package/dist/shared/chunk-djvarb8r.js

@@ -0,0 +1,333 @@
+import {
+  SVG_NS,
+  isSVGTag,
+  normalizeSVGAttr,
+  styleObjectToString
+} from "./chunk-h1fsr8kv.js";
+import {
+  claimComment,
+  claimElement,
+  claimText,
+  deferredDomEffect,
+  domEffect,
+  enterChildren,
+  exitChildren,
+  getIsHydrating,
+  getSSRContext,
+  pauseHydration,
+  popScope,
+  pushScope,
+  resumeHydration,
+  runCleanups
+} from "./chunk-ppr06jgn.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;
+}
+
+// src/dom/element.ts
+var MAX_THUNK_DEPTH = 100;
+function __text(fn) {
+  if (getIsHydrating()) {
+    const claimed = claimText();
+    if (claimed) {
+      const node2 = claimed;
+      node2.dispose = deferredDomEffect(() => {
+        node2.data = fn();
+      });
+      return node2;
+    }
+  }
+  const node = getAdapter().createTextNode("");
+  node.dispose = domEffect(() => {
+    node.data = fn();
+  });
+  return node;
+}
+function resolveAndInsertAfter(anchor, value, managed, depth = 0) {
+  if (depth >= MAX_THUNK_DEPTH) {
+    throw new Error("resolveAndInsertAfter: max recursion depth exceeded — possible circular thunk");
+  }
+  if (value == null || typeof value === "boolean")
+    return;
+  if (typeof value === "function") {
+    resolveAndInsertAfter(anchor, value(), managed, depth + 1);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      resolveAndInsertAfter(anchor, item, managed, depth);
+    }
+    return;
+  }
+  const node = isRenderNode(value) ? value : getAdapter().createTextNode(typeof value === "string" ? value : String(value));
+  if (node.nodeType === 11) {
+    const children = Array.from(node.childNodes);
+    for (const child of children) {
+      const insertAfter2 = managed.length > 0 ? managed[managed.length - 1] : anchor;
+      insertAfter2.parentNode.insertBefore(child, insertAfter2.nextSibling);
+      managed.push(child);
+    }
+    return;
+  }
+  const insertAfter = managed.length > 0 ? managed[managed.length - 1] : anchor;
+  insertAfter.parentNode.insertBefore(node, insertAfter.nextSibling);
+  managed.push(node);
+}
+function childEffect(anchor, fn, managed, childCleanups) {
+  return domEffect(() => {
+    runCleanups(childCleanups.value);
+    const scope = pushScope();
+    const value = fn();
+    popScope();
+    childCleanups.value = scope;
+    if (managed.length === 1 && isRenderNode(value) && managed[0] === value) {
+      return;
+    }
+    if (managed.length === 1 && managed[0].nodeType === 3 && !isRenderNode(value) && value != null && typeof value !== "boolean" && typeof value !== "function") {
+      const text = typeof value === "string" ? value : String(value);
+      managed[0].data = text;
+      return;
+    }
+    for (const node of managed) {
+      node.parentNode?.removeChild(node);
+    }
+    managed.length = 0;
+    resolveAndInsertAfter(anchor, value, managed);
+  });
+}
+function __child(fn) {
+  if (getIsHydrating()) {
+    const claimed = claimComment();
+    if (claimed) {
+      const anchor2 = claimed;
+      const managed2 = [];
+      const childCleanups2 = { value: [] };
+      let sibling = anchor2.nextSibling;
+      while (sibling) {
+        if (sibling.nodeType === 8 && sibling.data.trim() === "child") {
+          break;
+        }
+        const next = sibling.nextSibling;
+        sibling.parentNode?.removeChild(sibling);
+        sibling = next;
+      }
+      pauseHydration();
+      try {
+        const dispose2 = childEffect(anchor2, ((originalFn) => () => {
+          const needsPause = getIsHydrating();
+          if (needsPause)
+            pauseHydration();
+          try {
+            return originalFn();
+          } finally {
+            if (needsPause)
+              resumeHydration();
+          }
+        })(fn), managed2, childCleanups2);
+        const result2 = Object.assign(anchor2, {
+          dispose: () => {
+            runCleanups(childCleanups2.value);
+            dispose2();
+          }
+        });
+        return result2;
+      } finally {
+        resumeHydration();
+      }
+    }
+  }
+  const anchor = getAdapter().createComment("child");
+  const fragment = getAdapter().createDocumentFragment();
+  fragment.appendChild(anchor);
+  const managed = [];
+  const childCleanups = { value: [] };
+  const dispose = childEffect(anchor, fn, managed, childCleanups);
+  const result = Object.assign(fragment, {
+    dispose: () => {
+      runCleanups(childCleanups.value);
+      dispose();
+    }
+  });
+  return result;
+}
+function resolveAndInsert(parent, value, depth = 0) {
+  if (depth >= MAX_THUNK_DEPTH) {
+    throw new Error("__insert: max recursion depth exceeded — possible circular thunk");
+  }
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  if (typeof value === "function") {
+    resolveAndInsert(parent, value(), depth + 1);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      resolveAndInsert(parent, item, depth);
+    }
+    return;
+  }
+  insertLeaf(parent, value);
+}
+function insertLeaf(parent, value) {
+  if (getIsHydrating()) {
+    if (isRenderNode(value)) {
+      return;
+    }
+    claimText();
+    return;
+  }
+  if (isRenderNode(value)) {
+    parent.appendChild(value);
+    return;
+  }
+  const text = typeof value === "string" ? value : String(value);
+  parent.appendChild(getAdapter().createTextNode(text));
+}
+function __insert(parent, value) {
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  resolveAndInsert(parent, value);
+}
+function __element(tag, props) {
+  if (getIsHydrating()) {
+    const claimed = claimElement(tag);
+    if (claimed) {
+      if (props && typeof process !== "undefined" && true) {
+        for (const [key, value] of Object.entries(props)) {
+          if (key === "role" || key.startsWith("aria-")) {
+            const actual = claimed.getAttribute(key);
+            if (actual !== value) {
+              console.warn(`[hydrate] ARIA mismatch on <${tag}>: ${key}="${actual}" (expected "${value}")`);
+            }
+          }
+        }
+      }
+      return claimed;
+    }
+  }
+  const adapter = getAdapter();
+  const svg = isSVGTag(tag);
+  const el = svg ? adapter.createElementNS(SVG_NS, tag) : adapter.createElement(tag);
+  if (props) {
+    for (const [key, value] of Object.entries(props)) {
+      const attrName = svg ? normalizeSVGAttr(key) : key;
+      el.setAttribute(attrName, value);
+    }
+  }
+  return el;
+}
+function __append(parent, child) {
+  if (getIsHydrating())
+    return;
+  parent.appendChild(child);
+}
+function __staticText(text) {
+  if (getIsHydrating()) {
+    const claimed = claimText();
+    if (claimed)
+      return claimed;
+  }
+  return getAdapter().createTextNode(text);
+}
+function __enterChildren(el) {
+  if (getIsHydrating()) {
+    enterChildren(el);
+  }
+}
+function __exitChildren() {
+  if (getIsHydrating()) {
+    exitChildren();
+  }
+}
+
+// src/dom/attributes.ts
+function __attr(el, name, fn) {
+  return deferredDomEffect(() => {
+    const value = fn();
+    if (value == null || value === false) {
+      el.removeAttribute(name);
+    } else if (value === true) {
+      el.setAttribute(name, "");
+    } else if (name === "style" && typeof value === "object") {
+      el.setAttribute(name, styleObjectToString(value));
+    } else {
+      el.setAttribute(name, value);
+    }
+  });
+}
+function __prop(el, name, fn) {
+  return deferredDomEffect(() => {
+    const value = fn();
+    if (value == null) {
+      Reflect.set(el, name, typeof Reflect.get(el, name) === "boolean" ? false : "");
+    } else {
+      Reflect.set(el, name, value);
+    }
+    if (name === "selected") {
+      if (value) {
+        el.setAttribute(name, "");
+      } else {
+        el.removeAttribute(name);
+      }
+    }
+  });
+}
+function __show(el, fn) {
+  const originalDisplay = el.style.display;
+  return deferredDomEffect(() => {
+    el.style.display = fn() ? originalDisplay : "none";
+  });
+}
+function __classList(el, classMap) {
+  const disposers = [];
+  for (const [className, fn] of Object.entries(classMap)) {
+    disposers.push(deferredDomEffect(() => {
+      if (fn()) {
+        el.classList.add(className);
+      } else {
+        el.classList.remove(className);
+      }
+    }));
+  }
+  return () => {
+    for (const dispose of disposers) {
+      dispose();
+    }
+  };
+}
+
+export { createDOMAdapter, RENDER_NODE_BRAND, isRenderNode, getAdapter, setAdapter, __text, __child, __insert, __element, __append, __staticText, __enterChildren, __exitChildren, __attr, __prop, __show, __classList };

package/dist/shared/{chunk-jtma4sh4.js → chunk-e09mdqcx.js}

@@ -7,11 +7,11 @@ import {
 } from "./chunk-jrtrk5z4.js";
 import {
   isBrowser
-} from "./chunk-da2w7j7w.js";
+} from "./chunk-xs5s8gqe.js";
 import {
   getSSRContext,
   signal
-} from "./chunk-656n0x6y.js";
+} from "./chunk-ppr06jgn.js";
 
 // src/router/view-transitions.ts
 var transitionGen = 0;

package/dist/shared/{chunk-4xkw6h1s.js → chunk-h1fsr8kv.js}

@@ -1,3 +1,69 @@
+// src/dom/svg-tags.ts
+var SVG_TAGS = new Set([
+  "svg",
+  "path",
+  "circle",
+  "ellipse",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "g",
+  "defs",
+  "symbol",
+  "use",
+  "text",
+  "tspan",
+  "image",
+  "foreignObject",
+  "filter",
+  "feGaussianBlur",
+  "feOffset",
+  "feColorMatrix",
+  "feBlend",
+  "feMerge",
+  "feMergeNode",
+  "feComposite",
+  "feFlood",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "pattern",
+  "clipPath",
+  "mask",
+  "animate",
+  "animateTransform",
+  "set",
+  "marker",
+  "desc"
+]);
+var SVG_NS = "http://www.w3.org/2000/svg";
+function isSVGTag(tag) {
+  return SVG_TAGS.has(tag);
+}
+var SVG_ATTR_MAP = {
+  strokeWidth: "stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeOpacity: "stroke-opacity",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  clipRule: "clip-rule",
+  clipPath: "clip-path",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  floodColor: "flood-color",
+  floodOpacity: "flood-opacity",
+  colorInterpolation: "color-interpolation",
+  colorInterpolationFilters: "color-interpolation-filters",
+  viewBox: "viewBox"
+};
+function normalizeSVGAttr(attr) {
+  return SVG_ATTR_MAP[attr] ?? attr;
+}
+
 // src/dom/style.ts
 function camelToKebab(prop) {
   const third = prop[2];
@@ -70,4 +136,4 @@ function styleObjectToString(style) {
   return parts.join("; ");
 }
 
-export { styleObjectToString };
+export { SVG_NS, isSVGTag, normalizeSVGAttr, styleObjectToString };