@solidjs/web 2.0.0-beta.3 → 2.0.0-beta.30

package/dist/dev.js

@@ -1,39 +1,80 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
-import { createMemo } from '@solidjs/signals';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, createOwner, createSignal, onSettled, $DEVCOMP, enableHydration, enforceLoadingBoundary, flush, getOwner, createEffect } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    defaultValue: 2,
+    checked: 1,
+    defaultChecked: 2
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1,
+    defaultSelected: 2
+  },
+  TEXTAREA: {
+    value: 1,
+    defaultValue: 2
+  },
+  VIDEO: {
+    muted: 1,
+    defaultMuted: 2
+  },
+  AUDIO: {
+    muted: 1,
+    defaultMuted: 2
+  }
+};
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
+const $$SLOT = /*#__PURE__*/Symbol("slot");
+const $$HOST = /*#__PURE__*/Symbol("host");
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
-const SVGNamespace = {
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
+const Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
-const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
-"webview",
-"isindex", "listing", "multicol", "nextid", "noindex", "search"]);
+const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
+const DOMElements = /*#__PURE__*/new Set(/*#__PURE__*/"a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bdi,bdo,bgsound,big,blink,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,content,data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,image,img,input,ins,isindex,kbd,keygen,label,legend,li,link,listing,main,map,mark,marquee,math,menu,menuitem,meta,meter,multicol,nav,nextid,nobr,noembed,noframes,noindex,noscript,object,ol,optgroup,option,output,p,param,picture,plaintext,portal,pre,progress,q,rb,rp,rt,rtc,ruby,s,samp,script,search,section,select,shadow,slot,small,source,spacer,span,strike,strong,style,sub,summary,sup,svg,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr,webview,xmp".split(","));
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
-  transparent: true
-});
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
-  transparent: true
-}) : createMemo$1(() => fn());
+const transparentOptions = {
+  transparent: true,
+  sync: true
+};
+const syncOptions = {
+  sync: true
+};
+const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
+  sync: true,
+  ...options,
+  transparent: !options.scope
+} : transparentOptions);
+const memo = fn => createMemo(() => fn(), syncOptions);
 
-function reconcileArrays(parentNode, a, b) {
+function reconcileArrays(parentNode, a, b, marker) {
   let bLength = b.length,
     aEnd = a.length,
     bEnd = bLength,
     aStart = 0,
     bStart = 0,
-    after = a[aEnd - 1].nextSibling,
-    map = null;
+    tail = a[aEnd - 1],
+    tailTag = tail[$$SLOT],
+    after = tail.parentNode === parentNode && (!tailTag || tailTag === marker) ? tail.nextSibling : marker || null,
+    map = null,
+    anchor,
+    anchorTag;
   while (aStart < aEnd || bStart < bEnd) {
     if (a[aStart] === b[bStart]) {
       aStart++;
@@ -45,18 +86,43 @@ function reconcileArrays(parentNode, a, b) {
       bEnd--;
     }
     if (aEnd === aStart) {
-      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
-      while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
+      let node;
+      if (bEnd < bLength) {
+        if (bStart) {
+          const prev = b[bStart - 1];
+          const prevTag = prev[$$SLOT];
+          node = prev.parentNode === parentNode && (!prevTag || prevTag === marker) ? prev.nextSibling : after;
+        } else node = b[bEnd - bStart];
+      } else node = after;
+      while (bStart < bEnd) {
+        const n = b[bStart++];
+        parentNode.insertBefore(n, node);
+        if (marker) n[$$SLOT] = marker;
+      }
     } else if (bEnd === bStart) {
       while (aStart < aEnd) {
-        if (!map || !map.has(a[aStart])) a[aStart].remove();
-        aStart++;
+        const n = a[aStart++];
+        if (!map || !map.has(n)) {
+          const tag = n[$$SLOT];
+          if (n.parentNode === parentNode && (!tag || tag === marker)) n.remove();
+        }
+      }
+    } else if ((anchor = a[aStart]) === b[bEnd - 1] && b[bStart] === a[aEnd - 1] && anchor.parentNode === parentNode && (!(anchorTag = anchor[$$SLOT]) || anchorTag === marker)) {
+      if (marker) {
+        do {
+          const n = a[--aEnd];
+          parentNode.insertBefore(n, anchor);
+          n[$$SLOT] = marker;
+          bStart++;
+          if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+        } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
+      } else {
+        do {
+          parentNode.insertBefore(a[--aEnd], anchor);
+          bStart++;
+          if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+        } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
       }
-    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const node = a[--aEnd].nextSibling;
-      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
-      parentNode.insertBefore(b[--bEnd], node);
-      a[aEnd] = b[bEnd];
     } else {
       if (!map) {
         map = new Map();
@@ -74,80 +140,277 @@ function reconcileArrays(parentNode, a, b) {
             sequence++;
           }
           if (sequence > index - bStart) {
-            const node = a[aStart];
-            while (bStart < index) parentNode.insertBefore(b[bStart++], node);
-          } else parentNode.replaceChild(b[bStart++], a[aStart++]);
+            const head = a[aStart];
+            const headTag = head[$$SLOT];
+            const node = head.parentNode === parentNode && (!headTag || headTag === marker) ? head : after;
+            while (bStart < index) {
+              const n = b[bStart++];
+              parentNode.insertBefore(n, node);
+              if (marker) n[$$SLOT] = marker;
+            }
+          } else {
+            const oldNode = a[aStart++];
+            const newNode = b[bStart++];
+            const oldTag = oldNode[$$SLOT];
+            if (oldNode.parentNode === parentNode && (!oldTag || oldTag === marker)) {
+              parentNode.replaceChild(newNode, oldNode);
+            } else {
+              parentNode.insertBefore(newNode, after);
+            }
+            if (marker) newNode[$$SLOT] = marker;
+          }
         } else aStart++;
-      } else a[aStart++].remove();
+      } else {
+        const n = a[aStart++];
+        const nTag = n[$$SLOT];
+        if (n.parentNode === parentNode && (!nTag || nTag === marker)) n.remove();
+      }
     }
   }
 }
 
-const $$EVENTS = "_$DX_DELEGATE";
+const HEAD_ELIGIBLE_TAGS = new Set(["title", "meta", "link", "style", "script", "base"]);
+const HEAD_ATTR_NAME = /^[a-zA-Z_][a-zA-Z0-9_:.-]*$/;
+const RESOURCE_LINK_RELS = new Set(["preload", "modulepreload", "prefetch", "preconnect", "dns-prefetch", "icon", "stylesheet"]);
+const RESOURCE_QUALIFIERS = ["as", "crossorigin", "type", "media", "imagesrcset", "imagesizes"];
+function evalHeadValue(v) {
+  return typeof v === "function" ? v() : v;
+}
+function evalHeadProps(props, presets) {
+  const out = {};
+  for (const name in props) out[name] = presets && name in presets ? presets[name] : evalHeadValue(props[name]);
+  return out;
+}
+function classifyHeadTag(desc) {
+  const tag = desc.tag;
+  if (tag === "link") {
+    const rel = evalHeadValue(desc.props && desc.props.rel);
+    return {
+      resource: RESOURCE_LINK_RELS.has(rel),
+      rel
+    };
+  }
+  if (tag === "style") return {
+    resource: !!(desc.props && "href" in desc.props)
+  };
+  if (tag === "script") return {
+    resource: !!(desc.props && "src" in desc.props)
+  };
+  return {
+    resource: false
+  };
+}
+function resourceIdentity(tag, props) {
+  let id = "res:" + tag + ":" + (props.rel || "") + ":" + (props.href || props.src || "");
+  for (let i = 0; i < RESOURCE_QUALIFIERS.length; i++) {
+    const q = RESOURCE_QUALIFIERS[i];
+    if (props[q] != null) id += ":" + q + "=" + props[q];
+  }
+  return id;
+}
+function replaceableIdentity(tag, props, key, unique) {
+  if (tag === "title") return "title";
+  if (tag === "base") return "base";
+  if (tag === "meta" && props.charset != null) return "charset";
+  if (key != null) return tag + ":key:" + key;
+  if (tag === "meta") {
+    if (props.name != null) return "meta:name:" + props.name;
+    if (props.property != null) return "meta:property:" + props.property;
+    if (props["http-equiv"] != null) return "meta:http-equiv:" + props["http-equiv"];
+    return unique;
+  }
+  if (tag === "link") return "link:" + (props.rel || "") + ":" + (props.href || "");
+  return unique;
+}
+function resolveHead(groups) {
+  const winners = new Map();
+  const sorted = groups.slice().sort((a, b) => a.seq - b.seq);
+  for (let i = 0; i < sorted.length; i++) {
+    const group = sorted[i];
+    const byIdentity = new Map();
+    for (let j = 0; j < group.tags.length; j++) {
+      const t = group.tags[j];
+      let list = byIdentity.get(t.identity);
+      if (!list) byIdentity.set(t.identity, list = []);
+      list.push(t);
+    }
+    for (const [identity, tags] of byIdentity) {
+      if (identity === "title") {
+        if (tags.length > 1) console.warn("Multiple <title> tags in one head group; the last one wins.");
+        winners.set(identity, {
+          seq: group.seq,
+          tags: [tags[tags.length - 1]]
+        });
+      } else {
+        winners.set(identity, {
+          seq: group.seq,
+          tags
+        });
+      }
+    }
+  }
+  return winners;
+}
+
+const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
+const INNER_OWNED = {};
+const delegatedEvents = new Set();
+const delegatedContainers = new Map();
 function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
   let disposer;
-  createRoot(dispose => {
-    disposer = dispose;
-    element === document ? flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
-  }, {
-    id: options.renderId
-  });
+  registerDelegatedRoot(element);
+  try {
+    createRoot(dispose => {
+      disposer = dispose;
+      if (element === document) {
+        const tree = code();
+        effect(() => flatten(tree), () => {});
+      } else {
+        const tree = code();
+        insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
+      }
+    }, {
+      id: options.renderId
+    });
+  } catch (err) {
+    if (disposer) disposer();
+    unregisterDelegatedRoot(element);
+    throw err;
+  }
   return () => {
     disposer();
+    unregisterDelegatedRoot(element);
     element.textContent = "";
   };
 }
-function template(html, isImportNode, isSVG, isMathML) {
+function create(html, bypassGuard, flag) {
+  if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
+  const t = document.createElement("template");
+  t.innerHTML = html;
+  return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
+}
+function template(html, flag) {
   let node;
-  const create = bypassGuard => {
-    if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
-    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
-    t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
-  };
-  const fn = isImportNode ? bypassGuard => untrack(() => document.importNode(node || (node = create(bypassGuard)), true)) : bypassGuard => (node || (node = create(bypassGuard))).cloneNode(true);
-  fn._html = html;
+  const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
+  fn._html = flag === 2 ? html.replace(/^<[^>]+>/, "") : html;
   return fn;
 }
-function delegateEvents(eventNames, document = window.document) {
-  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
+function delegateEvents(eventNames) {
   for (let i = 0, l = eventNames.length; i < l; i++) {
     const name = eventNames[i];
-    if (!e.has(name)) {
-      e.add(name);
-      document.addEventListener(name, eventHandler);
+    if (!delegatedEvents.has(name)) {
+      delegatedEvents.add(name);
+      delegatedContainers.forEach((state, container) => attachDelegatedEvent(name, container, state));
     }
   }
 }
-function clearDelegatedEvents(document = window.document) {
-  if (document[$$EVENTS]) {
-    for (let name of document[$$EVENTS].keys()) document.removeEventListener(name, eventHandler);
-    delete document[$$EVENTS];
+function registerDelegatedRoot(root) {
+  const state = registerDelegatedContainer(root, root);
+  if (state) state.roots = (state.roots || 0) + 1;
+}
+function unregisterDelegatedRoot(root) {
+  const state = delegatedContainers.get(root);
+  if (state) state.roots > 1 ? state.roots-- : delete state.roots;
+  unregisterDelegatedContainer(root, root);
+}
+function registerDelegatedContainer(container, owner = container) {
+  if (!container || !owner) return;
+  let state = delegatedContainers.get(container);
+  if (!state) delegatedContainers.set(container, state = {
+    owners: new Map(),
+    handlers: new Map()
+  });
+  state.owners.set(owner, (state.owners.get(owner) || 0) + 1);
+  delegatedEvents.forEach(name => attachDelegatedEvent(name, container, state));
+  return state;
+}
+function unregisterDelegatedContainer(container, owner = container) {
+  const state = delegatedContainers.get(container);
+  if (!state) return;
+  const count = state.owners.get(owner);
+  if (count > 1) state.owners.set(owner, count - 1);else state.owners.delete(owner);
+  if (state.owners.size) return;
+  state.handlers.forEach((handler, name) => container.removeEventListener(name, handler));
+  delegatedContainers.delete(container);
+}
+function attachDelegatedEvent(name, container, state) {
+  if (state.handlers.has(name)) return;
+  const handler = e => eventHandler(e, container, state);
+  state.handlers.set(name, handler);
+  container.addEventListener(name, handler);
+}
+function getDelegatedRoot(node) {
+  while (node) {
+    if (delegatedContainers.get(node)?.roots) return node;
+    node = node._$host || node.parentNode || node.host;
+  }
+}
+function findOwner(target, state) {
+  let node = target;
+  let distance = 0;
+  while (node) {
+    if (state.owners.has(node)) return {
+      owner: node,
+      distance
+    };
+    distance++;
+    node = node._$host || node.parentNode || node.host;
   }
 }
 function setProperty(node, name, value) {
   if (isHydrating(node)) return;
   node[name] = value;
 }
+let claimHandlers = null;
+const CLAIM_SEAM = Symbol.for("dom-expressions.element-claims");
+function registerElementClaim(handler) {
+  (claimHandlers || (claimHandlers = globalThis[CLAIM_SEAM] = [])).push(handler);
+  return () => {
+    const index = claimHandlers.indexOf(handler);
+    index > -1 && claimHandlers.splice(index, 1);
+  };
+}
+const CLAIMED_ELEMENTS = "a[href], form[action]";
+function claimElementTree(root) {
+  const handlers = globalThis[CLAIM_SEAM];
+  if (handlers === undefined || handlers.length === 0) return root;
+  const isElement = root.nodeType === 1;
+  if (!isElement && root.nodeType !== 11) return root;
+  if (isElement && root.matches(CLAIMED_ELEMENTS)) {
+    for (let i = 0; i < handlers.length; i++) handlers[i](root);
+  }
+  const found = root.querySelectorAll(CLAIMED_ELEMENTS);
+  for (let i = 0; i < found.length; i++) {
+    for (let j = 0; j < handlers.length; j++) handlers[j](found[i]);
+  }
+  return root;
+}
+function claimElement(node) {
+  if (claimHandlers !== null) {
+    for (let i = 0; i < claimHandlers.length; i++) claimHandlers[i](node);
+  }
+  return node;
+}
 function setAttribute(node, name, value) {
   if (isHydrating(node)) return;
   if (value == null || value === false) node.removeAttribute(name);else node.setAttribute(name, value === true ? "" : value);
+  if (claimHandlers !== null && (name === "href" || name === "action")) claimElement(node);
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name.indexOf(":") > -1 ? name.split(":").pop() : name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
-function className(node, value, isSVG, prev) {
+function className(node, value, prev) {
   if (isHydrating(node)) return;
   if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
   if (typeof value === "string") {
-    value !== prev && (isSVG ? node.setAttribute("class", value) : node.className = value);
+    value !== prev && node.setAttribute("class", value);
     return;
   }
   if (typeof prev === "string") {
@@ -161,16 +424,16 @@ function className(node, value, isSVG, prev) {
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
 }
-function addEventListener(node, name, handler, delegate) {
+function addEvent(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
       node[`$$${name}`] = handler[0];
@@ -183,33 +446,48 @@ function addEventListener(node, name, handler, delegate) {
 }
 function style(node, value, prev) {
   if (!value) {
-    if (prev) setAttribute(node, "style");
+    if (prev || node._$styles) {
+      setAttribute(node, "style");
+      node._$styles = undefined;
+    }
     return;
   }
   const nodeStyle = node.style;
-  if (typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
-  prev || (prev = {});
-  value || (value = {});
+  if (typeof value === "string") {
+    node._$styles = undefined;
+    return nodeStyle.cssText = value;
+  }
+  if (typeof prev === "string") {
+    nodeStyle.cssText = "";
+    prev = undefined;
+  }
+  let applied = node._$styles;
+  if (!applied) {
+    applied = node._$styles = prev ? {
+      ...prev
+    } : {};
+  }
   let v, s;
+  for (s in applied) {
+    if (value[s] == null) {
+      nodeStyle.removeProperty(s);
+      delete applied[s];
+    }
+  }
   for (s in value) {
     v = value[s];
-    if (v !== prev[s]) nodeStyle.setProperty(s, v);
-    delete prev[s];
+    if (v != null && v !== applied[s]) {
+      nodeStyle.setProperty(s, v);
+      applied[s] = v;
+    }
   }
-  for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
 function setStyleProperty(node, name, value) {
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
 }
-function spread(node, props = {}, isSVG, skipChildren) {
+function spread(node, props = {}, skipChildren) {
   const prevProps = {};
-  if (!skipChildren) {
-    effect(() => normalize(props.children, prevProps.children), value => {
-      insertExpression(node, value, prevProps.children);
-      prevProps.children = value;
-    });
-  }
+  if (!skipChildren) insert(node, () => props.children);
   effect(() => {
     const r = props.ref;
     (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
@@ -221,7 +499,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
       newProps[prop] = props[prop];
     }
     return newProps;
-  }, props => assign(node, props, isSVG, true, prevProps, true));
+  }, props => assign(node, props, true, prevProps, true));
   return prevProps;
 }
 function dynamicProperty(props, key) {
@@ -241,49 +519,474 @@ function ref(fn, element) {
   const resolved = untrack(fn);
   runWithOwner(null, () => applyRef(resolved, element));
 }
-function insert(parent, accessor, marker, initial) {
-  const multi = marker !== undefined;
-  if (multi && !initial) initial = [];
-  if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
-    if (Array.isArray(initial)) {
-      let j = 0;
-      for (let i = 0; i < initial.length; i++) {
-        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+function scope(fn) {
+  fn.$s = true;
+  return fn;
+}
+const SCOPE_OPTIONS = {
+  scope: true
+};
+let hydrationRt = null;
+function installHydrationRuntime() {
+  hydrationRt = {
+    claimInitial(parent, multi, initial) {
+      if (isHydrating(parent)) {
+        if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+        if (Array.isArray(initial)) stripTextSeparators(initial);
       }
-      initial.length = j;
+      return initial;
+    },
+    reclaimRegion(current, parent, marker) {
+      if (!sharedConfig.hydrating || !current || !parent.isConnected) return current;
+      const first = Array.isArray(current) ? current[0] : current;
+      if (!first || !first.nodeType || first.isConnected) return current;
+      let nodes;
+      if (marker) {
+        nodes = [];
+        let node = marker.previousSibling,
+          depth = 0;
+        while (node) {
+          if (node.nodeType === 8) {
+            const v = node.nodeValue;
+            if (v === "/") depth++;else if (v === "$") {
+              if (depth === 0) break;
+              depth--;
+            }
+          }
+          nodes.unshift(node);
+          node = node.previousSibling;
+        }
+      } else nodes = [...parent.childNodes];
+      return stripTextSeparators(nodes);
+    },
+    dedupEvent(e) {
+      return !!(sharedConfig.registry && sharedConfig.events && sharedConfig.events.find(([el, ev]) => ev === e));
     }
+  };
+}
+function stripTextSeparators(nodes) {
+  let j = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i],
+      t = node.nodeType;
+    if (t === 8) {
+      const v = node.nodeValue;
+      if (v === "!$") {
+        node.remove();
+        continue;
+      }
+      if (v.startsWith("pl-")) continue;
+    } else if (t === 1 && node.localName === "template" && node.id.startsWith("pl-")) continue;
+    nodes[j++] = node;
   }
+  nodes.length = j;
+  return nodes;
+}
+function insert(parent, accessor, marker, initial, options) {
+  const multi = marker !== undefined;
+  const host = options && options.host;
+  if (multi && !initial) initial = [];
+  if (hydrationRt !== null) initial = hydrationRt.claimInitial(parent, multi, initial);
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
-    if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    if (typeof accessor !== "function") {
+      insertExpression(parent, accessor, initial, marker);
+      host && tagHost(accessor, host);
+      return;
+    }
   }
-  accessor = memo(accessor, true);
-  if (multi && initial.length === 0 && !isHydrating(parent)) {
+  if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
     parent.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  let current = initial;
+  effect(prev => {
+    if (hydrationRt !== null) current = hydrationRt.reclaimRegion(current, parent, marker);
+    const value = normalize(accessor(), current, multi, true);
+    if (typeof value !== "function") return value;
+    effect(() => (hydrationRt !== null && (current = hydrationRt.reclaimRegion(current, parent, marker)), normalize(value, current, multi)), inner => {
+      insertExpression(parent, inner, current, marker);
+      current = inner;
+      host && tagHost(current, host);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
+    return INNER_OWNED;
+  }, value => {
+    if (value === INNER_OWNED) return;
+    insertExpression(parent, value, current, marker);
+    current = value;
+    host && tagHost(current, host);
+  },
+  accessor.$s ? options ? {
+    ...options,
+    scope: true
+  } : SCOPE_OPTIONS : options);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
+  const nodeName = node.nodeName;
   props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName);
     }
   }
   for (const prop in props) {
     if (prop === "children") {
-      if (!skipChildren) insertExpression(node, props.children);
+      if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
+      continue;
+    }
+    prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
+  }
+}
+const ASSET_REMOVAL_GRACE = 100;
+const assetRegistry = new Map();
+function assetEntryKey(descriptor) {
+  if (descriptor.policy === "exclusive") return "x|" + descriptor.key;
+  return descriptor.type === "inline-style" ? "i|" + descriptor.id : descriptor.type + "|" + descriptor.href;
+}
+function findAssetElement(selector, attr, value) {
+  const nodes = document.querySelectorAll(selector);
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].getAttribute(attr) === value) return nodes[i];
+  }
+  return null;
+}
+function mountAssetElement(descriptor) {
+  let el;
+  if (descriptor.type === "inline-style") {
+    el = findAssetElement("style[data-asset]", "data-asset", descriptor.id);
+    if (!el) {
+      el = document.createElement("style");
+      el.setAttribute("data-asset", descriptor.id);
+      el.textContent = descriptor.content || "";
+    }
+  } else {
+    const rel = descriptor.type === "module" ? "modulepreload" : "stylesheet";
+    el = findAssetElement(`link[rel="${rel}"]`, "href", descriptor.href);
+    if (!el) {
+      el = document.createElement("link");
+      el.rel = rel;
+      el.href = descriptor.href;
+    }
+  }
+  if (descriptor.attrs) {
+    for (const name in descriptor.attrs) el.setAttribute(name, descriptor.attrs[name]);
+  }
+  if (!el.isConnected) document.head.appendChild(el);
+  return el;
+}
+function acquireAsset(descriptor) {
+  const key = assetEntryKey(descriptor);
+  let entry = assetRegistry.get(key);
+  if (descriptor.policy === "exclusive") {
+    if (!entry) {
+      entry = {
+        original: descriptor.get(),
+        set: descriptor.set,
+        writers: []
+      };
+      assetRegistry.set(key, entry);
+    }
+    const writer = {
+      value: descriptor.value
+    };
+    entry.writers.push(writer);
+    entry.set(writer.value);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      const index = entry.writers.indexOf(writer);
+      const wasTop = index === entry.writers.length - 1;
+      entry.writers.splice(index, 1);
+      if (!wasTop) return;
+      if (entry.writers.length) {
+        entry.set(entry.writers[entry.writers.length - 1].value);
+      } else {
+        entry.set(entry.original);
+        assetRegistry.delete(key);
+      }
+    };
+  }
+  if (!entry) {
+    entry = {
+      count: 0,
+      element: null,
+      timer: null
+    };
+    assetRegistry.set(key, entry);
+  }
+  if (entry.timer) {
+    clearTimeout(entry.timer);
+    entry.timer = null;
+  }
+  entry.count++;
+  if (!entry.element || !entry.element.isConnected) entry.element = mountAssetElement(descriptor);
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--entry.count > 0) return;
+    entry.timer = setTimeout(() => {
+      assetRegistry.delete(key);
+      entry.element && entry.element.remove();
+    }, ASSET_REMOVAL_GRACE);
+  };
+}
+let headRegistrations = null;
+let headSeq = 0;
+let headUid = 0;
+let headOwned = null;
+let headApplied = null;
+let headFallbackTitle = null;
+let headScheduled = false;
+const headMountedResources = new Set();
+function initHeadRegistry() {
+  if (headRegistrations) return;
+  headRegistrations = [];
+  headOwned = new Map();
+  headApplied = new Map();
+  const t = document.querySelector("title");
+  headFallbackTitle = t && !t.hasAttribute("data-dh") ? t.textContent : null;
+  if (globalThis._$HY) globalThis._$HY.h = applyServerHeadOps;
+}
+function applyServerHeadOps(ops) {
+  for (let i = 0; i < ops.length; i++) {
+    const op = ops[i];
+    const identity = op[0] === "t" ? "title" : op[1];
+    if (headOwned.has(identity)) continue;
+    if (op[0] === "t") setHeadTitle(op[1]);else if (op[0] === "r") {
+      const els = headMarkedElements(identity);
+      for (let j = 0; j < els.length; j++) els[j].remove();
+    } else {
+      const el = document.createElement(op[2]);
+      for (const name in op[3]) el.setAttribute(name, op[3][name]);
+      if (op[4] != null) el.textContent = op[4];
+      el.setAttribute("data-dh", identity);
+      document.head.appendChild(el);
+    }
+  }
+}
+function headMarkedElements(identity) {
+  const nodes = document.head.querySelectorAll("[data-dh]");
+  const out = [];
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].getAttribute("data-dh") === identity) out.push(nodes[i]);
+  }
+  return out;
+}
+function setHeadTitle(text) {
+  let el = document.querySelector("title");
+  if (!el) {
+    el = document.createElement("title");
+    document.head.appendChild(el);
+  }
+  el.textContent = text;
+  el.setAttribute("data-dh", "title");
+  return el;
+}
+function scheduleHeadApply() {
+  if (headScheduled) return;
+  headScheduled = true;
+  queueMicrotask(flushHeadRegistry);
+}
+function flushHeadRegistry() {
+  if (sharedConfig.hydrating) {
+    setTimeout(flushHeadRegistry, 0);
+    return;
+  }
+  headScheduled = false;
+  const winners = resolveHead(headRegistrations);
+  for (const [identity, els] of headOwned) {
+    if (winners.has(identity)) continue;
+    headOwned.delete(identity);
+    headApplied.delete(identity);
+    if (identity === "title") {
+      if (headFallbackTitle != null) setHeadTitle(headFallbackTitle).removeAttribute("data-dh");
+    } else {
+      for (let i = 0; i < els.length; i++) els[i].remove();
+    }
+  }
+  for (const [identity, winner] of winners) {
+    let sig = "";
+    for (let i = 0; i < winner.tags.length; i++) sig += winner.tags[i].tag + JSON.stringify(winner.tags[i].props) + "|";
+    if (headApplied.get(identity) === sig) continue;
+    headApplied.set(identity, sig);
+    if (identity === "base" || identity === "charset") {
+      console.warn(`useHead: <${winner.tags[0].tag}> (${identity}) is shell-only and ignored on the client`);
+      continue;
+    }
+    if (identity === "title") {
+      const children = winner.tags[0].props.children;
+      setHeadTitle(children == null ? "" : String(children));
+      headOwned.set(identity, []);
+      continue;
+    }
+    const existing = headMarkedElements(identity);
+    const els = [];
+    for (let i = 0; i < winner.tags.length; i++) {
+      els.push(renderHeadElement(winner.tags[i], identity, existing));
+    }
+    for (let i = 0; i < existing.length; i++) {
+      if (els.indexOf(existing[i]) === -1) existing[i].remove();
+    }
+    headOwned.set(identity, els);
+  }
+}
+function renderHeadElement(t, identity, existing) {
+  for (let i = 0; i < existing.length; i++) {
+    if (headElementMatches(existing[i], t)) return existing.splice(i, 1)[0];
+  }
+  const el = document.createElement(t.tag);
+  for (const name in t.props) {
+    if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
+    if (!HEAD_ATTR_NAME.test(name)) {
+      console.warn(`useHead: ignoring invalid attribute name "${name}"`);
       continue;
     }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+    const v = t.props[name];
+    if (v == null || v === false) continue;
+    el.setAttribute(name, v === true ? "" : String(v));
   }
+  if (t.props.children != null) el.textContent = String(t.props.children);
+  el.setAttribute("data-dh", identity);
+  document.head.appendChild(el);
+  return el;
+}
+function headElementMatches(el, t) {
+  if (el.tagName.toLowerCase() !== t.tag) return false;
+  for (const name in t.props) {
+    if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
+    if (!HEAD_ATTR_NAME.test(name)) continue;
+    const v = t.props[name];
+    if (v == null || v === false) {
+      if (el.hasAttribute(name)) return false;
+    } else if (el.getAttribute(name) !== (v === true ? "" : String(v))) return false;
+  }
+  const children = t.props.children;
+  return (children == null ? "" : String(children)) === el.textContent;
+}
+function acquireHeadResource(tag, props) {
+  if (tag === "link" && (props.rel === "stylesheet" || props.rel === "modulepreload")) {
+    const descriptor = {
+      type: props.rel === "stylesheet" ? "style" : "module",
+      href: props.href
+    };
+    let attrs = null;
+    for (const name in props) {
+      if (name === "rel" || name === "href") continue;
+      if (!HEAD_ATTR_NAME.test(name)) continue;
+      const v = props[name];
+      if (v == null || v === false) continue;
+      (attrs || (attrs = {}))[name] = v === true ? "" : String(v);
+    }
+    if (attrs) descriptor.attrs = attrs;
+    return acquireAsset(descriptor);
+  }
+  const identity = resourceIdentity(tag, props);
+  if (headMountedResources.has(identity)) return noopFn;
+  headMountedResources.add(identity);
+  const url = props.href || props.src;
+  let el = null;
+  if (url != null) {
+    if (tag === "link") el = findAssetElement(`link[rel="${props.rel}"]`, "href", url);else if (tag === "script") el = findAssetElement("script[src]", "src", url);else el = findAssetElement("style[href]", "href", url);
+  }
+  if (!el) {
+    el = document.createElement(tag);
+    for (const name in props) {
+      if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
+      if (!HEAD_ATTR_NAME.test(name)) continue;
+      const v = props[name];
+      if (v == null || v === false) continue;
+      el.setAttribute(name, v === true ? "" : String(v));
+    }
+    if (props.children != null) el.textContent = String(props.children);
+    document.head.appendChild(el);
+  }
+  return noopFn;
+}
+function noopFn() {}
+function useHead(tags) {
+  const list = Array.isArray(tags) ? tags : [tags];
+  initHeadRegistry();
+  const reg = {
+    seq: -1,
+    tags: null
+  };
+  const uid = ++headUid;
+  effect(() => {
+    const replaceable = [];
+    const resources = [];
+    for (let i = 0; i < list.length; i++) {
+      const desc = list[i];
+      if (!desc || !HEAD_ELIGIBLE_TAGS.has(desc.tag)) {
+        console.warn(`useHead: ignoring non-head tag`, desc);
+        continue;
+      }
+      const cls = classifyHeadTag(desc);
+      const props = evalHeadProps(desc.props || {}, cls.rel !== undefined ? {
+        rel: cls.rel
+      } : undefined);
+      if (cls.resource) {
+        resources.push({
+          tag: desc.tag,
+          props
+        });
+      } else {
+        const key = evalHeadValue(desc.key);
+        replaceable.push({
+          tag: desc.tag,
+          props,
+          identity: replaceableIdentity(desc.tag, props, key, "u:c" + uid + ":" + i)
+        });
+      }
+    }
+    return {
+      replaceable,
+      resources
+    };
+  }, evaluated => {
+    const releases = [];
+    for (let i = 0; i < evaluated.resources.length; i++) {
+      releases.push(acquireHeadResource(evaluated.resources[i].tag, evaluated.resources[i].props));
+    }
+    reg.tags = evaluated.replaceable;
+    if (reg.seq < 0) reg.seq = ++headSeq;
+    if (headRegistrations.indexOf(reg) === -1) headRegistrations.push(reg);
+    scheduleHeadApply();
+    return () => {
+      const idx = headRegistrations.indexOf(reg);
+      if (idx > -1) headRegistrations.splice(idx, 1);
+      for (let i = 0; i < releases.length; i++) releases[i]();
+      scheduleHeadApply();
+    };
+  });
+}
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const key in mapping) {
+    if (hy.modules[key]) continue;
+    const entryUrl = mapping[key];
+    if (!hy.loading[key]) {
+      hy.loading[key] = import(entryUrl).then(mod => {
+        hy.modules[key] = mod;
+      }, err => {
+        delete hy.loading[key];
+        throw err;
+      });
+    }
+    pending.push(hy.loading[key]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
 }
 function hydrate$1(code, element, options = {}) {
+  installHydrationRuntime();
   if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
@@ -293,6 +996,7 @@ function hydrate$1(code, element, options = {}) {
   sharedConfig.load = id => globalThis._$HY.r[id];
   sharedConfig.has = id => id in globalThis._$HY.r;
   sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.loadModuleAssets = loadModuleAssets;
   sharedConfig.cleanupFragment = id => {
     const tpl = document.getElementById("pl-" + id);
     if (tpl) {
@@ -310,15 +1014,45 @@ function hydrate$1(code, element, options = {}) {
     }
   };
   sharedConfig.registry = new Map();
+  if (!sharedConfig.boundaryScopes) sharedConfig.boundaryScopes = new Map();
+  sharedConfig.captureBoundaryScope = id => {
+    if (sharedConfig.registry) sharedConfig.boundaryScopes.set(id, {
+      registry: sharedConfig.registry,
+      gather: sharedConfig.gather
+    });
+  };
   sharedConfig.hydrating = true;
   {
     sharedConfig.verifyHydration = () => {
       if (sharedConfig.registry && sharedConfig.registry.size) {
-        const orphaned = [...sharedConfig.registry.values()];
+        const orphaned = [...sharedConfig.registry.values()].filter(node => node.isConnected);
+        sharedConfig.registry.clear();
+        if (!orphaned.length) return;
         console.warn(`Hydration completed with ${orphaned.length} unclaimed server-rendered node(s):\n` + orphaned.map(node => `  ${node.outerHTML.slice(0, 100)}`).join("\n"));
       }
     };
   }
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...element.childNodes], options);
+        } finally {
+          sharedConfig.hydrating = false;
+        }
+      }, err => {
+        console.error("Hydration module preload failed, falling back to client render:", err);
+        sharedConfig.hydrating = false;
+        sharedConfig.registry = undefined;
+        disposer = render$1(code, element, [...element.childNodes], options);
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
     return render$1(code, element, [...element.childNodes], options);
@@ -380,20 +1114,21 @@ function getFirstChild(node, expectedTag) {
 function getNextSibling(node, expectedTag) {
   const sibling = node.nextSibling;
   if (isHydrating() && expectedTag && sibling?.localName !== expectedTag) {
-    const parent = node.parentElement;
+    const parent = node.parentNode;
     const isMissing = !sibling || sibling.nodeType !== 1;
     console.warn("Hydration structure mismatch: expected <" + expectedTag + "> after", node, "in", parent, "\n  " + describeSiblings(parent, sibling, expectedTag, isMissing));
   }
   return sibling;
 }
 function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
+  if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
   const children = [];
   let child = parent.firstChild;
   while (child) {
     if (child.nodeType === 1) children.push(child);
     child = child.nextSibling;
   }
-  const pTag = parent.localName;
+  const pTag = parent.localName || "#fragment";
   if (isMissing) {
     const tags = children.map(c => `<${c.localName}>`).join("");
     return `<${pTag}>${tags}<${expectedTag} \u2190 missing></${pTag}>`;
@@ -425,7 +1160,32 @@ function runHydrationEvents() {
         const [el, e] = events[0];
         if (!completed.has(el)) return;
         events.shift();
-        eventHandler(e);
+        let matchContainer, matchState, matchDistance, matches;
+        for (const [container, state] of delegatedContainers) {
+          if (!state.handlers.has(e.type)) continue;
+          const entry = findOwner(e.target, state);
+          if (!entry) continue;
+          if (matchContainer) {
+            if (!matches) matches = [{
+              container: matchContainer,
+              state: matchState,
+              distance: matchDistance
+            }];
+            matches.push({
+              container,
+              state,
+              distance: entry.distance
+            });
+          } else {
+            matchContainer = container;
+            matchState = state;
+            matchDistance = entry.distance;
+          }
+        }
+        if (matches) {
+          matches.sort((a, b) => a.distance - b.distance);
+          for (let i = 0; i < matches.length; i++) eventHandler(e, matches[i].container, matches[i].state);
+        } else if (matchContainer) eventHandler(e, matchContainer, matchState);
       }
       if (sharedConfig.done) {
         sharedConfig.events = _$HY.events = null;
@@ -436,16 +1196,31 @@ function runHydrationEvents() {
   }
 }
 function isHydrating(node) {
-  return sharedConfig.hydrating && (!node || node.isConnected);
-}
-function toggleClassKey(node, key, value) {
-  const classNames = key.trim().split(/\s+/);
-  for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
+  if (!sharedConfig.hydrating) return false;
+  if (!node || node.isConnected) return true;
+  const roots = sharedConfig.claimRoots;
+  if (roots) {
+    for (let i = 0; i < roots.length; i++) {
+      if (roots[i].contains(node)) return true;
+    }
+  }
+  return false;
 }
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
     flattenClassList(classList, result);
+    classList = result;
+  }
+  if (classList && typeof classList === "object") {
+    const result = {},
+      keys = Object.keys(classList);
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const key = keys[i];
+      if (!classList[key]) continue;
+      const classNames = key.trim().split(/\s+/);
+      for (let j = 0, nameLen = classNames.length; j < nameLen; j++) classNames[j] && (result[classNames[j]] = true);
+    }
     return result;
   }
   return classList;
@@ -456,18 +1231,16 @@ function flattenClassList(list, result) {
     if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
   }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let forceProp;
+function assignProp(node, prop, value, prev, skipRef, nodeName) {
   if (prop === "style") return style(node, value, prev), value;
-  if (prop === "class") return className(node, value, isSVG, prev), value;
-  if (value === prev) return prev;
+  if (prop === "class") return className(node, value, prev), value;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
-  } else if (prop.slice(0, 3) === "on:") {
-    const e = prop.slice(3);
-    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
-    value && node.addEventListener(e, value, typeof value !== "function" && value);
-  } else if (prop.slice(0, 2) === "on") {
+    return value;
+  }
+  const hasNamespace = prop.indexOf(":") > -1;
+  if (!hasNamespace && prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
@@ -475,26 +1248,34 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       node.removeEventListener(name, h);
     }
     if (delegate || value) {
-      addEventListener(node, name, value, delegate);
+      addEvent(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
-    if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
+  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
+    if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
+    if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else if ((prop === "value" || prop === "defaultValue") && (nodeName === "INPUT" || nodeName === "TEXTAREA"))
+      node[prop] = value ?? "";else node[prop] = value;
   } else {
-    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    const ns = hasNamespace && Namespaces[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
   }
   return value;
 }
-function eventHandler(e) {
-  if (sharedConfig.registry && sharedConfig.events) {
-    if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
+function eventHandler(e, container, state) {
+  if (hydrationRt !== null && hydrationRt.dedupEvent(e)) return;
+  const prev = e[$$EVENT_OWNER];
+  let resumeNode;
+  if (prev) {
+    if (prev === true || prev === container || !container.contains(prev)) return;
+    resumeNode = prev;
   }
-  let node = e.target;
+  const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
+  if (state && !owner) return;
+  e[$$EVENT_OWNER] = owner || true;
+  let node = resumeNode || e.target;
   const key = `$$${e.type}`;
   const oriTarget = e.target;
-  const oriCurrentTarget = e.currentTarget;
+  const boundary = owner || container || e.currentTarget;
   const retarget = value => Object.defineProperty(e, "target", {
     configurable: true,
     value
@@ -510,35 +1291,43 @@ function eventHandler(e) {
     return true;
   };
   const walkUpTree = () => {
-    while (handleNode() && (node = node._$host || node.parentNode || node.host));
+    while (handleNode()) {
+      if (node === boundary || node.parentNode === boundary) break;
+      node = node._$host || node.parentNode || node.host;
+    }
   };
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node || document;
+      return node || boundary || document;
     }
   });
-  if (e.composedPath) {
+  if (resumeNode) {
+    if (resumeNode === e.target) node = resumeNode._$host || resumeNode.parentNode || resumeNode.host;
+    if (node && node !== boundary) walkUpTree();
+  } else if (e.composedPath) {
     const path = e.composedPath();
-    retarget(path[0]);
-    for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
-      if (!handleNode()) break;
-      if (node._$host) {
-        node = node._$host;
-        walkUpTree();
-        break;
-      }
-      if (node.parentNode === oriCurrentTarget) {
-        break;
+    if (path.length) {
+      retarget(path[0]);
+      for (let i = 0; i < path.length; i++) {
+        node = path[i];
+        if (!handleNode()) break;
+        if (node._$host) {
+          node = node._$host;
+          walkUpTree();
+          break;
+        }
+        if (node === boundary || node.parentNode === boundary) {
+          break;
+        }
       }
-    }
+    } else walkUpTree();
   }
   else walkUpTree();
   retarget(oriTarget);
 }
 function insertExpression(parent, value, current, marker) {
-  if (isHydrating(parent)) return;
+  if (hydrationRt !== null && isHydrating(parent)) return;
   if (value === current) return;
   const t = typeof value,
     multi = marker !== undefined;
@@ -546,15 +1335,25 @@ function insertExpression(parent, value, current, marker) {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
       parent.firstChild.data = value;
-    } else parent.textContent = value;
+    } else {
+      if (ownsAllChildren(parent, current)) parent.textContent = value;else {
+        removeOwnedChildren(parent, current);
+        parent.insertBefore(document.createTextNode(value), parent.firstChild);
+      }
+    }
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
+    } else if (current && current.nodeType) {
+      current.parentNode === parent ? parent.replaceChild(value, current) : parent.appendChild(value);
+    } else if (current && parent.firstChild) {
+      parent.replaceChild(value, parent.firstChild);
+    } else {
       parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    }
+    if (marker) value[$$SLOT] = marker;
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -562,9 +1361,9 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(parent, current, value, marker);
     } else {
-      current && cleanChildren(parent);
+      current && cleanChildren(parent, current);
       appendNodes(parent, value);
     }
   } else console.warn(`Unrecognized value. Skipped inserting`, value);
@@ -586,21 +1385,64 @@ function normalize(value, current, multi, doNotUnwrap) {
   }
   return value;
 }
+function tagHost(value, host) {
+  if (Array.isArray(value)) {
+    for (let i = 0, len = value.length; i < len; i++) tagHost(value[i], host);
+  } else if (value && value.nodeType && value[$$HOST] !== host) {
+    value[$$HOST] = host;
+    Object.defineProperty(value, "_$host", {
+      get: host,
+      configurable: true
+    });
+  }
+}
 function appendNodes(parent, array, marker = null) {
-  for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
+  for (let i = 0, len = array.length; i < len; i++) {
+    const n = array[i];
+    parent.insertBefore(n, marker);
+    if (marker) n[$$SLOT] = marker;
+  }
+}
+function ownsAllChildren(parent, current) {
+  if (current == null) return true;
+  if (Array.isArray(current)) {
+    return current.length ? parent.firstChild === current[0] && parent.lastChild === current[current.length - 1] : parent.firstChild === null;
+  }
+  if (current === "") return parent.firstChild === null;
+  if (current.nodeType) return parent.firstChild === current && parent.lastChild === current;
+  const first = parent.firstChild;
+  return first !== null && first.nodeType === 3 && parent.lastChild === first;
+}
+function removeOwnedChildren(parent, current) {
+  if (Array.isArray(current)) {
+    for (let i = 0; i < current.length; i++) {
+      const el = current[i];
+      if (el.parentNode === parent) el.remove();
+    }
+  } else if (current.nodeType) {
+    if (current.parentNode === parent) current.remove();
+  } else {
+    const first = parent.firstChild;
+    if (first && first.nodeType === 3) first.remove();
+  }
 }
 function cleanChildren(parent, current, marker, replacement) {
-  if (marker === undefined) return parent.textContent = "";
+  if (marker === undefined) {
+    if (ownsAllChildren(parent, current)) return parent.textContent = "";
+    return removeOwnedChildren(parent, current);
+  }
   if (current.length) {
     let inserted = false;
     for (let i = current.length - 1; i >= 0; i--) {
       const el = current[i];
       if (replacement !== el) {
-        const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        const tag = el[$$SLOT];
+        const owns = el.parentNode === parent && (!tag || tag === marker);
+        if (replacement && !inserted && !i) owns ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else if (owns) el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
+  if (replacement && marker) replacement[$$SLOT] = marker;
 }
 function gatherHydratable(element, root) {
   const templates = element.querySelectorAll(`*[_hk]`);
@@ -638,82 +1480,216 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
-function render(...args) {
-  enforceLoadingBoundary(true);
-  const result = render$1(...args);
-  enforceLoadingBoundary(false);
-  return result;
+const ENVELOPE = Symbol.for("solid.ResponseEnvelope");
+class ResponseEnvelope {
+  constructor(response, value) {
+    this.response = response;
+    this.value = value;
+  }
+}
+ResponseEnvelope.prototype[ENVELOPE] = true;
+function isResponseEnvelope(value) {
+  return !!(value && typeof value === "object" && value[ENVELOPE]);
+}
+const HREF = Symbol.for("solid.Href");
+function isHref(value) {
+  return !!(value && (typeof value === "object" || typeof value === "function") && value[HREF]);
+}
+const REVALIDATE_HEADER = "X-Revalidate";
+function initWithRevalidate(init) {
+  const {
+    revalidate,
+    ...responseInit
+  } = init;
+  const headers = new Headers(responseInit.headers);
+  revalidate !== undefined && headers.set(REVALIDATE_HEADER, revalidate.toString());
+  return {
+    responseInit,
+    headers
+  };
 }
+function redirect(url, init = 302) {
+  if (typeof url !== "string" && !isHref(url)) {
+    throw new TypeError("redirect() expects a string URL or an Href-branded value (Symbol.for('solid.Href')).");
+  }
+  const {
+    responseInit,
+    headers
+  } = initWithRevalidate(typeof init === "number" ? {
+    status: init
+  } : init);
+  if (responseInit.status === undefined) {
+    responseInit.status = 302;
+  }
+  headers.set("Location", String(url));
+  return new Response(null, {
+    ...responseInit,
+    headers
+  });
+}
+function reload(init = {}) {
+  const {
+    responseInit,
+    headers
+  } = initWithRevalidate(init);
+  return new Response(null, {
+    ...responseInit,
+    headers
+  });
+}
+function respond(value, init = {}) {
+  const {
+    responseInit,
+    headers
+  } = initWithRevalidate(init);
+  headers.set("Content-Type", "application/json");
+  return new ResponseEnvelope(new Response(JSON.stringify(value), {
+    ...responseInit,
+    headers
+  }), value);
+}
+
+const mergeProps = merge;
 const isServer = false;
 const isDev = true;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
-    is
-  });
+function render(code, element, init, options = {}) {
+  enforceLoadingBoundary(true);
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
+        schedule: true
+      }
+    });
+    flush();
+    return dispose;
+  } finally {
+    enforceLoadingBoundary(false);
+  }
 }
 const hydrate = (...args) => {
   enableHydration();
   return hydrate$1(...args);
 };
 function Portal(props) {
+  return runWithOwner(createOwner(), () => portalImpl(props));
+}
+function portalImpl(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker);
-  let content = createMemo$1(() => [startMarker, props.children]);
-  createRenderEffect(() => [mount(), content()], ([m, c]) => {
+    mount = () => props.mount || document.body,
+    content = createMemo(() => [startMarker, props.children], {
+      ssrSource: "client"
+    });
+  createRenderEffect(
+  () => [mount(), content(), getOwner()], ([, c, owner]) => {
+    const m = untrack(mount);
     m.appendChild(endMarker);
-    insert(m, c, endMarker);
+    const dispose = runWithOwner(owner, () => createRoot(d => {
+      insert(m, c, endMarker, undefined, {
+        host: () => treeMarker.parentNode
+      });
+      return d;
+    }));
     return () => {
+      dispose();
       let c = startMarker;
-      while (c && c !== endMarker) {
+      while (c) {
         const n = c.nextSibling;
         m.removeChild(c);
+        if (c === endMarker) break;
         c = n;
       }
     };
+  },
+  {
+    schedule: true,
+    ssrSource: "client"
+  });
+  createEffect(mount, () => {
+    const m = untrack(mount);
+    const ownerRoot = getDelegatedRoot(treeMarker);
+    if (!ownerRoot || ownerRoot.contains(m)) return;
+    registerDelegatedContainer(m, ownerRoot);
+    return () => unregisterDelegatedContainer(m, ownerRoot);
+  }, {
+    ssrSource: "client"
+  });
+  if (sharedConfig.hydrating) return createMemo(() => treeMarker, {
+    ssrSource: "client"
   });
   return treeMarker;
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
+const COMPONENT_HANDOFF = Symbol.for("dom-expressions.component-handoff");
+function resolveHandoff(next, prev) {
+  const handoff = typeof next === "function" && next !== null && next[COMPONENT_HANDOFF];
+  return handoff && handoff.take(prev) ? prev : next;
+}
+function dynamic(source) {
+  let latest = 0;
+  const cached = createMemo(prev => {
+    const next = source();
+    if (!next || typeof next.then !== "function") return resolveHandoff(next, prev);
+    const token = ++latest;
+    return {
+      then: (onFulfilled, onRejected) => next.then(resolved => onFulfilled(token === latest ? resolveHandoff(resolved, prev) : resolved), onRejected)
+    };
+  }, {
+    lazy: true
+  });
+  return props => {
+    return createMemo(() => {
+      const component = cached();
+      switch (typeof component) {
+        case "function":
+          Object.assign(component, {
+            [$DEVCOMP]: true
           });
-          target[prop](...args);
-        };
+          return untrack(() => component(props));
+        case "string":
+          const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
+          spread(el, props);
+          return el;
       }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
+    });
+  };
 }
-function createDynamic(component, props) {
-  const cached = createMemo$1(component);
-  return createMemo$1(() => {
-    const component = cached();
-    switch (typeof component) {
-      case "function":
-        Object.assign(component, {
-          [$DEVCOMP]: true
-        });
-        return untrack(() => component(props));
-      case "string":
-        const isSvg = SVGElements.has(component);
-        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
-        spread(el, props, isSvg);
-        return el;
-    }
+function Dynamic(props) {
+  const Comp = dynamic(() => props.component);
+  return createComponent(Comp, omit(props, "component"));
+}
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
+    is
   });
 }
-function Dynamic(props) {
-  const others = omit(props, "component");
-  return createDynamic(() => props.component, others);
+function loadClientOnly(fn, setComp) {
+  fn().then(m => setComp(() => m.default));
+}
+function clientOnly(fn, options = {},
+_moduleUrl) {
+  const [comp, setComp] = createSignal();
+  let started = !options.lazy;
+  started && loadClientOnly(fn, setComp);
+  return props => {
+    let Comp;
+    let m;
+    const rest = omit(props, "fallback");
+    if (!started) {
+      started = true;
+      loadClientOnly(fn, setComp);
+    }
+    if ((Comp = untrack(comp)) && !sharedConfig.hydrating) return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.hydrating);
+    const gate = createMemo(() => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback)));
+    onSettled(() => {
+      setMounted(true);
+    });
+    return gate;
+  };
 }
+function httpStatus(_code, _text) {}
+function httpHeader(_name, _value, _options) {}
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, voidFn as HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clientOnly, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isServer, memo, mergeProps, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, respond, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets, useHead };