@solidjs/web 2.0.0-beta.22 → 2.0.0-beta.23

package/frames/dist/client.js

@@ -0,0 +1,1430 @@
+import { getOwner, onCleanup, runWithOwner, sharedConfig, createOwner } from 'solid-js';
+import { fromCrossJSON, Feature } from 'seroval';
+import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
+
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+const COMMENT_NODE = 8;
+const CLAIM_SEAM = Symbol.for("dom-expressions.element-claims");
+const CLAIMED_ELEMENTS = "a[href], form[action]";
+function claimHandlers() {
+  const handlers = globalThis[CLAIM_SEAM];
+  return handlers !== undefined && handlers.length !== 0 ? handlers : undefined;
+}
+function claimNode(handlers, el) {
+  for (let i = 0; i < handlers.length; i++) handlers[i](el);
+}
+const claimedAttr = name => name === "href" || name === "action";
+function claimTree(handlers, root) {
+  const isElement = root.nodeType === ELEMENT_NODE;
+  if (!isElement && root.nodeType !== 11 ) return;
+  if (isElement && root.matches(CLAIMED_ELEMENTS)) claimNode(handlers, root);
+  const found = root.querySelectorAll(CLAIMED_ELEMENTS);
+  for (let i = 0; i < found.length; i++) claimNode(handlers, found[i]);
+}
+const placeholderId = name => `pl-${name}`;
+const SLOT_START = /^slot:(.+):start$/;
+const SLOT_END = /^slot:(.+):end$/;
+const slotEnd = id => `slot:${id}:end`;
+function chunkToRecords(chunk) {
+  switch (chunk.type) {
+    case "start":
+    case "data":
+      return {};
+    case "html":
+      return {
+        "": {
+          kind: "html",
+          value: chunk.html
+        }
+      };
+    case "fragment":
+      return {
+        [`seg:${chunk.key}`]: {
+          kind: "html",
+          value: chunk.html
+        }
+      };
+    case "reveal":
+      {
+        const records = {};
+        const gate = chunk.fallback ? "fallback" : "reveal";
+        for (const key of chunk.keys) records[`seg:${key}:${gate}`] = true;
+        return records;
+      }
+    case "assets":
+      return {
+        [`seg:${chunk.key}:assets`]: chunk
+      };
+    case "slot":
+      return {
+        [`slot:${chunk.key}`]: {
+          kind: "slot",
+          args: chunk.args
+        }
+      };
+    case "template":
+      return {
+        [`tpl:${chunk.key}`]: {
+          kind: "template",
+          html: chunk.html,
+          fields: chunk.fields
+        }
+      };
+    case "block":
+      return {
+        [`seg:${chunk.key}`]: {
+          kind: "block",
+          template: `tpl:${chunk.template}`,
+          values: chunk.values
+        }
+      };
+    case "complete":
+      return {
+        ":complete": true
+      };
+    case "error":
+      return chunk.key ? {
+        [`seg:${chunk.key}:error`]: chunk.error
+      } : {
+        ":error": chunk.error
+      };
+    default:
+      return {};
+  }
+}
+function createFrameHost(options = {}) {
+  const frames = new Map();
+  const pending = new Map();
+  const deliver = (frame, chunk) => {
+    if (chunk.type === "data") {
+      options.applyData && options.applyData(chunk);
+      return;
+    }
+    frame.apply({
+      version: chunk.version,
+      r: chunkToRecords(chunk)
+    });
+  };
+  return {
+    register(id, frame) {
+      let set = frames.get(id);
+      if (!set) frames.set(id, set = new Set());
+      const sibling = set.size ? set.values().next().value : undefined;
+      set.add(frame);
+      if (sibling) {
+        if (sibling.version !== undefined) {
+          frame.apply({
+            version: sibling.version,
+            r: sibling.store
+          });
+        }
+        return;
+      }
+      const buffered = pending.get(id);
+      if (buffered) {
+        pending.delete(id);
+        for (const chunk of buffered) deliver(frame, chunk);
+      }
+    },
+    unregister(id, frame) {
+      const set = frames.get(id);
+      if (set && frame) set.delete(frame);
+      if (!set || !frame || !set.size) {
+        frames.delete(id);
+        pending.delete(id);
+      }
+    },
+    apply(chunk) {
+      if (chunk.type === "data") {
+        options.applyData && options.applyData(chunk);
+        return;
+      }
+      const set = frames.get(chunk.id);
+      if (set && set.size) {
+        for (const frame of set) deliver(frame, chunk);
+        return;
+      }
+      const buffered = pending.get(chunk.id) ?? [];
+      const maxVersion = buffered.reduce((m, c) => Math.max(m, c.version), chunk.version);
+      if (chunk.version < maxVersion) return;
+      const kept = buffered.filter(c => c.version >= chunk.version);
+      kept.push(chunk);
+      pending.set(chunk.id, kept);
+    },
+    get(id) {
+      const set = frames.get(id);
+      return set && set.values().next().value;
+    },
+    serialize(value) {
+      if (!options.serialize) throw new Error("host has no serializer");
+      return options.serialize(value);
+    },
+    resolve(ref, frameId) {
+      return options.resolve ? options.resolve(ref, frameId) : undefined;
+    }
+  };
+}
+const FRAME_APPLIED_EVENT = "frame:applied";
+class FrameImpl {
+  #element;
+  #start;
+  #end;
+  #options;
+  #version;
+  #store = Object.create(null);
+  #appliedRootValue;
+  #hasContent = false;
+  #revealed = new Set();
+  #fallbackShown = new Set();
+  #slots;
+  #mountedSlots = new Set();
+  #slotCleanups = new Map();
+  #slotArgs = new Map();
+  #slotRegions = new Map();
+  #slotResolvedRefs = new Map();
+  #slotNodes = new Map();
+  #processedAssets = new Set();
+  #disposed = false;
+  #styleFlush = () => {
+    if (!this.#disposed) this.#flush();
+  };
+  #claimTree = (node, direct) => {
+    const handlers = claimHandlers();
+    if (!handlers) return;
+    const run = () => direct ? claimNode(handlers, node) : claimTree(handlers, node);
+    const scope = this.#options.ownerScope;
+    scope ? scope(run) : run();
+  };
+  constructor(element, start, end, options = {}) {
+    this.#element = element;
+    this.#start = start;
+    this.#end = end;
+    this.#options = options;
+    this.#slots = options.slots;
+    if (options.adopt) {
+      this.#hasContent = true;
+      this.#claimContent();
+    }
+    if (options.host && options.id !== undefined) {
+      options.host.register(options.id, this);
+    }
+    if (options.adopt) this.#syncSlots();
+  }
+  #parent() {
+    return this.#element ?? this.#start.parentNode;
+  }
+  #applied(version, reason) {
+    this.#options.onApply?.({
+      version,
+      reason
+    });
+    const parent = this.#parent();
+    const Ev = parent && (parent.ownerDocument || parent).defaultView?.CustomEvent;
+    if (Ev) {
+      parent.dispatchEvent(new Ev(FRAME_APPLIED_EVENT, {
+        bubbles: true,
+        detail: {
+          id: this.#options.id,
+          version,
+          reason
+        }
+      }));
+    }
+  }
+  #firstContent() {
+    return this.#start ? this.#start.nextSibling : this.#parent().firstChild;
+  }
+  get version() {
+    return this.#version;
+  }
+  get store() {
+    return this.#store;
+  }
+  isRevealed(segment) {
+    return this.#revealed.has(segment);
+  }
+  get error() {
+    return this.#store[":error"];
+  }
+  apply(write) {
+    if (this.#disposed) return;
+    const v = write.version;
+    if (this.#version === undefined) {
+      this.#version = v;
+    } else if (v < this.#version) {
+      return;
+    } else if (v > this.#version) {
+      this.#version = v;
+      this.#revealed.clear();
+      this.#fallbackShown.clear();
+      for (const key of Object.keys(this.#store)) {
+        if (key.startsWith("seg:") || key.startsWith("tpl:") || key === ":error") {
+          delete this.#store[key];
+        }
+      }
+    }
+    for (const key of Object.keys(write.r)) {
+      const incoming = write.r[key];
+      if (incoming && incoming.kind === "slot" && key.charCodeAt(0) === 115  && key.startsWith("slot:")) {
+        const existing = this.#store[key];
+        if (existing && existing.kind === "slot" && argsEquivalent(existing.args, incoming.args)) {
+          continue;
+        }
+      }
+      this.#store[key] = incoming;
+    }
+    this.#flush();
+  }
+  #flush() {
+    if (this.#disposed) return;
+    const version = this.#version;
+    const root = this.#store[""];
+    if (root && root.kind === "html" && root.value !== this.#appliedRootValue) {
+      const reason = this.#hasContent ? "morph" : "materialize";
+      this.#applyRoot(root.value);
+      this.#appliedRootValue = root.value;
+      this.#applied(version, reason);
+    }
+    let progressed = true;
+    while (progressed) {
+      progressed = false;
+      for (const key of Object.keys(this.#store)) {
+        const name = segmentName(key);
+        if (name === null || this.#revealed.has(name)) continue;
+        if (this.#segmentReady(name)) {
+          this.#revealSegment(name);
+          this.#applied(version, "reveal");
+          progressed = true;
+        }
+      }
+      for (const key of Object.keys(this.#store)) {
+        const m = /^seg:([^:]+):fallback$/.exec(key);
+        if (!m) continue;
+        const name = m[1];
+        if (this.#revealed.has(name) || this.#fallbackShown.has(name)) continue;
+        if (this.#showFallback(name)) {
+          this.#fallbackShown.add(name);
+          this.#applied(version, "reveal");
+          progressed = true;
+        }
+      }
+    }
+    for (const key of Object.keys(this.#store)) {
+      if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
+      this.#processedAssets.add(key);
+      const record = this.#store[key];
+      if (record && record.modules) {
+        for (const href of record.modules) ensureModulePreload(href);
+      }
+    }
+    this.#syncSlots();
+  }
+  #resolveSlot(prop) {
+    return this.#slots?.[prop] ?? this.#options.resolveSlot?.(prop);
+  }
+  #resolveSlotRecord(occurrence) {
+    const record = this.#store[`slot:${occurrence}`];
+    if (record !== undefined) return record;
+    return this.#options.resolveSlotRecord?.(occurrence);
+  }
+  #syncSlots() {
+    if (!this.#slots && !this.#options.resolveSlot) return;
+    const found = new Map();
+    this.#collectSlots(found);
+    for (const [occurrence, start] of found) {
+      const callback = this.#resolveSlot(propOf(occurrence));
+      if (!callback) continue;
+      const record = this.#resolveSlotRecord(occurrence);
+      const prev = this.#slotNodes.get(occurrence);
+      const prevFirst = Array.isArray(prev) ? prev[0] : prev;
+      const zombie = this.#mountedSlots.has(occurrence) && prevFirst && !prevFirst.parentNode;
+      if (zombie) {
+        this.#mountedSlots.delete(occurrence);
+        this.#runSlotCleanups(occurrence);
+      }
+      if (!this.#mountedSlots.has(occurrence)) {
+        const nodes = this.#invokeSlot(occurrence, callback, record, start);
+        if (nodes) this.#replaceRange(occurrence, start, nodes);
+        this.#slotNodes.set(occurrence, nodes);
+        this.#mountedSlots.add(occurrence);
+        if (!record) this.#discoverRegions(occurrence, start);
+        this.#bindRegions(occurrence);
+      } else if (record !== this.#slotArgs.get(occurrence)) {
+        if (this.#refArgsUnchanged(occurrence, record)) {
+          this.#slotArgs.set(occurrence, record);
+          continue;
+        }
+        const nodes = this.#invokeSlot(occurrence, callback, record, start);
+        if (nodes) this.#replaceRange(occurrence, start, nodes);
+        this.#slotNodes.set(occurrence, nodes);
+        this.#bindRegions(occurrence);
+      }
+    }
+    for (const occurrence of [...this.#mountedSlots]) {
+      if (!found.has(occurrence)) this.#unmountSlot(occurrence);
+    }
+  }
+  #invokeSlot(occurrence, callback, record, start) {
+    const cleanups = this.#slotCleanups.get(occurrence) ?? [];
+    const ctx = {
+      frame: this.#options.claimScope ?? this.#options.id,
+      key: occurrence,
+      onCleanup: fn => cleanups.push(fn),
+      existing: start ? rangeInterior(start, slotEnd(occurrence)) : []
+    };
+    const props = record && record.kind === "slot" ? this.#resolveArgs(occurrence, record.args) : {};
+    const content = callback(props, ctx);
+    this.#slotArgs.set(occurrence, record);
+    if (cleanups.length) this.#slotCleanups.set(occurrence, cleanups);
+    if (content == null) return null;
+    return Array.isArray(content) ? content : [content];
+  }
+  #replaceRange(key, start, nodes) {
+    const end = slotEnd(key);
+    const parent = start.parentNode;
+    let n = start.nextSibling;
+    while (n && !(n.nodeType === COMMENT_NODE && n.data === end)) {
+      const next = n.nextSibling;
+      parent.removeChild(n);
+      n = next;
+    }
+    for (const node of nodes) parent.insertBefore(node, n);
+  }
+  #unmountSlot(key) {
+    this.#mountedSlots.delete(key);
+    this.#slotNodes.delete(key);
+    this.#slotArgs.delete(key);
+    this.#slotResolvedRefs.delete(key);
+    delete this.#store[`slot:${key}`];
+    this.#runSlotCleanups(key);
+    const regions = this.#slotRegions.get(key);
+    if (regions) {
+      for (const {
+        frame
+      } of regions.values()) frame?.dispose();
+      this.#slotRegions.delete(key);
+    }
+    this.#slotArgs.delete(key);
+  }
+  #runSlotCleanups(key) {
+    const cleanups = this.#slotCleanups.get(key);
+    if (!cleanups) return;
+    this.#slotCleanups.delete(key);
+    for (const fn of cleanups) fn();
+  }
+  #resolveArgs(slotKey, args) {
+    const host = this.#options.host;
+    let regions = this.#slotRegions.get(slotKey);
+    if (!regions) {
+      regions = new Map();
+      this.#slotRegions.set(slotKey, regions);
+    }
+    const props = {};
+    for (const key of Object.keys(args)) {
+      const value = args[key];
+      if (isDataRef(value)) {
+        const resolved = host ? host.resolve(value, this.#options.id) : undefined;
+        let cache = this.#slotResolvedRefs.get(slotKey);
+        if (!cache) this.#slotResolvedRefs.set(slotKey, cache = {});
+        cache[key] = resolved;
+        props[key] = resolved;
+      } else if (isFrameRef(value)) {
+        const fragment = document.createDocumentFragment();
+        let entry = regions.get(value.$frame);
+        if (!entry) {
+          const start = document.createComment(`frame:${value.$frame}:start`);
+          const end = document.createComment(`frame:${value.$frame}:end`);
+          entry = {
+            childId: value.$frame,
+            start,
+            end,
+            frame: undefined
+          };
+          regions.set(value.$frame, entry);
+          fragment.append(start, end);
+        } else {
+          let n = entry.start;
+          while (n) {
+            const next = n.nextSibling;
+            fragment.append(n);
+            if (n === entry.end) break;
+            n = next;
+          }
+        }
+        props[key] = fragment;
+      } else {
+        props[key] = value;
+      }
+    }
+    return props;
+  }
+  #discoverRegions(slotKey, start) {
+    if (!start) return;
+    let regions = this.#slotRegions.get(slotKey);
+    if (!regions) {
+      regions = new Map();
+      this.#slotRegions.set(slotKey, regions);
+    }
+    const doc = start.ownerDocument;
+    const endData = slotEnd(slotKey);
+    const comments = [];
+    let n = start.nextSibling;
+    while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
+      if (n.nodeType === COMMENT_NODE) comments.push(n);else if (n.nodeType === 1) {
+        const walker = doc.createTreeWalker(n, 128 );
+        let c;
+        while (c = walker.nextNode()) comments.push(c);
+      }
+      n = n.nextSibling;
+    }
+    let depth = 0;
+    let openId = null;
+    let openStart = null;
+    for (const c of comments) {
+      const data = c.data;
+      if (!data.startsWith("frame:")) continue;
+      if (data.endsWith(":start")) {
+        const childId = data.slice(6, -6);
+        if (!childId) continue;
+        if (depth === 0) {
+          openId = childId;
+          openStart = c;
+        }
+        depth++;
+      } else if (data.endsWith(":end")) {
+        const childId = data.slice(6, -4);
+        if (!childId) continue;
+        if (depth > 0) {
+          depth--;
+          if (depth === 0 && childId === openId && !regions.has(openId)) {
+            regions.set(openId, {
+              childId: openId,
+              start: openStart,
+              end: c,
+              frame: undefined,
+              adopt: true
+            });
+          }
+        }
+      }
+    }
+  }
+  #refArgsUnchanged(occurrence, record) {
+    const old = this.#slotArgs.get(occurrence);
+    if (!old || old.kind !== "slot" || !record || record.kind !== "slot") return false;
+    const a = old.args || {};
+    const b = record.args || {};
+    const ka = Object.keys(a);
+    if (ka.length !== Object.keys(b).length) return false;
+    const cache = this.#slotResolvedRefs.get(occurrence);
+    for (const key of ka) {
+      const va = a[key];
+      const vb = b[key];
+      if (va === vb) continue;
+      if (!va || !vb || typeof va !== "object" || typeof vb !== "object") return false;
+      if (typeof va.$frame === "string" && va.$frame === vb.$frame) continue;
+      if (typeof va.$ref === "string" && typeof vb.$ref === "string" && cache && key in cache) {
+        const host = this.#options.host;
+        const next = host ? host.resolve(vb, this.#options.id) : undefined;
+        try {
+          if (JSON.stringify(next) === JSON.stringify(cache[key])) continue;
+        } catch (e) {
+          return false;
+        }
+      }
+      return false;
+    }
+    return true;
+  }
+  #bindRegions(slotKey) {
+    const regions = this.#slotRegions.get(slotKey);
+    if (!regions) return;
+    for (const entry of regions.values()) {
+      if (!entry.frame && entry.start.parentNode) {
+        entry.frame = new FrameImpl(null, entry.start, entry.end, {
+          id: entry.childId,
+          host: this.#options.host,
+          adopt: entry.adopt,
+          claimScope: this.#options.claimScope ?? this.#options.id,
+          ownerScope: this.#options.ownerScope,
+          resolveSlot: prop => this.#resolveSlot(prop),
+          resolveSlotRecord: occurrence => this.#resolveSlotRecord(occurrence)
+        });
+      }
+    }
+  }
+  #collectSlots(found) {
+    let n = this.#firstContent();
+    const end = this.#end;
+    while (n && n !== end) {
+      const id = slotStartId(n);
+      if (id !== null) {
+        if (!found.has(id)) found.set(id, n);
+        n = afterRange(n, id);
+        continue;
+      }
+      const regionId = frameRegionStartId(n);
+      if (regionId !== null) {
+        n = afterFrameRegion(n, regionId);
+        continue;
+      }
+      if (n.nodeType === ELEMENT_NODE) collectSlots(n, found);
+      n = n.nextSibling;
+    }
+  }
+  #findPlaceholder(name) {
+    const id = placeholderId(name);
+    let n = this.#firstContent();
+    const end = this.#end;
+    while (n && n !== end) {
+      if (isPlaceholderStart(n, id)) return n;
+      if (n.nodeType === ELEMENT_NODE) {
+        const found = findPlaceholder(n, id);
+        if (found) return found;
+      }
+      n = n.nextSibling;
+    }
+    return null;
+  }
+  dispose() {
+    if (this.#disposed) return;
+    this.#disposed = true;
+    for (const key of [...this.#slotCleanups.keys()]) this.#runSlotCleanups(key);
+    for (const regions of this.#slotRegions.values()) {
+      for (const {
+        frame
+      } of regions.values()) frame?.dispose();
+    }
+    this.#slotRegions.clear();
+    this.#mountedSlots.clear();
+    const {
+      host,
+      id
+    } = this.#options;
+    if (host && id !== undefined) host.unregister(id, this);
+  }
+  #applyRoot(html) {
+    const fragment = parseFragment(html);
+    const parent = this.#parent();
+    if (!this.#hasContent) {
+      this.#clearContent();
+      this.#claimTree(fragment);
+      parent.insertBefore(fragment, this.#end);
+      this.#hasContent = true;
+    } else {
+      const claim = claimHandlers() ? this.#claimTree : null;
+      reconcileChildren(parent, fragment, this.#start, this.#end, claim);
+    }
+  }
+  #clearContent() {
+    const parent = this.#parent();
+    let n = this.#firstContent();
+    while (n && n !== this.#end) {
+      const next = n.nextSibling;
+      parent.removeChild(n);
+      n = next;
+    }
+  }
+  #claimContent() {
+    if (!claimHandlers()) return;
+    let n = this.#firstContent();
+    while (n && n !== this.#end) {
+      this.#claimTree(n);
+      n = n.nextSibling;
+    }
+  }
+  #segmentReady(name) {
+    const content = this.#store[`seg:${name}`];
+    if (!content) return false;
+    if (content.kind === "block") {
+      const template = this.#store[content.template];
+      if (!template || template.kind !== "template") return false;
+    } else if (content.kind !== "html") {
+      return false;
+    }
+    if (!this.#store[`seg:${name}:reveal`]) return false;
+    const assets = this.#store[`seg:${name}:assets`];
+    if (assets && assets.styles) {
+      let ready = true;
+      for (const href of assets.styles) {
+        if (!ensureStylesheet(href, this.#styleFlush)) ready = false;
+      }
+      if (!ready) return false;
+    }
+    if (!this.#findPlaceholder(name)) return false;
+    return true;
+  }
+  #revealSegment(name) {
+    const tpl = this.#findPlaceholder(name);
+    if (!tpl) return;
+    const assets = this.#store[`seg:${name}:assets`];
+    if (assets && assets.inlineStyles) applyInlineStyles(assets.inlineStyles);
+    const content = this.#store[`seg:${name}`];
+    const closing = rangeClose(tpl, placeholderId(name));
+    const parent = tpl.parentNode;
+    let n = tpl.nextSibling;
+    while (n && n !== closing) {
+      const next = n.nextSibling;
+      parent.removeChild(n);
+      n = next;
+    }
+    const materialized = this.#materialize(content);
+    this.#claimTree(materialized);
+    parent.insertBefore(materialized, closing);
+    tpl.remove();
+    closing && closing.remove();
+    this.#revealed.add(name);
+  }
+  #showFallback(name) {
+    const tpl = this.#findPlaceholder(name);
+    if (!tpl) return false;
+    const closing = rangeClose(tpl, placeholderId(name));
+    if (!closing) return false;
+    const fallback = tpl.content.cloneNode(true);
+    this.#claimTree(fallback);
+    closing.parentNode.insertBefore(fallback, closing);
+    return true;
+  }
+  #materialize(record) {
+    if (record.kind === "html") return parseFragment(record.value);
+    if (record.kind === "block") {
+      const template = this.#store[record.template];
+      if (!template || template.kind !== "template") return parseFragment("");
+      return materializeBlock(template, record.values);
+    }
+    return parseFragment("");
+  }
+}
+function materializeBlock(template, values) {
+  const fragment = parseFragment(template.html);
+  for (let i = 0; i < template.fields.length; i++) {
+    const marker = `field:${template.fields[i]}`;
+    const value = values[i] == null ? "" : String(values[i]);
+    let hole = findComment(fragment, marker);
+    while (hole) {
+      hole.replaceWith(document.createTextNode(value));
+      hole = findComment(fragment, marker);
+    }
+  }
+  return fragment;
+}
+function createFrame(boundary, options) {
+  return new FrameImpl(boundary, null, null, options);
+}
+function adoptFrameRange(start, end, options) {
+  return new FrameImpl(null, start, end, {
+    ...options,
+    adopt: true
+  });
+}
+const FRAME = Symbol.for("dom-expressions.frame");
+function createFrameInsertable(options) {
+  let frame = null;
+  let start = null;
+  let end = null;
+  return {
+    get frame() {
+      return frame;
+    },
+    dispose() {
+      if (!frame) return;
+      frame.dispose();
+      frame = null;
+      const parent = start.parentNode;
+      if (!parent) return;
+      let n = start;
+      while (n) {
+        const next = n.nextSibling;
+        parent.removeChild(n);
+        if (n === end) break;
+        n = next;
+      }
+    },
+    [FRAME](parent, marker) {
+      if (frame) return;
+      start = document.createComment("frame:start");
+      end = document.createComment("frame:end");
+      parent.insertBefore(start, marker);
+      parent.insertBefore(end, marker);
+      frame = new FrameImpl(null, start, end, options);
+    }
+  };
+}
+function segmentName(key) {
+  const m = /^seg:([^:]+)$/.exec(key);
+  return m ? m[1] : null;
+}
+function propOf(occurrence) {
+  const hash = occurrence.indexOf("#");
+  return hash === -1 ? occurrence : occurrence.slice(0, hash);
+}
+function isDataRef(value) {
+  return typeof value === "object" && value !== null && typeof value.$ref === "string";
+}
+function isFrameRef(value) {
+  return typeof value === "object" && value !== null && typeof value.$frame === "string";
+}
+function parseFragment(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  return template.content;
+}
+function findHeadElement(selector, attr, value) {
+  const nodes = document.head.querySelectorAll(selector);
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].getAttribute(attr) === value) return nodes[i];
+  }
+  return null;
+}
+function ensureStylesheet(href, onSettle) {
+  let link = findHeadElement('link[rel="stylesheet"]', "href", href);
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    const waiters = new Set();
+    link._$frWaiters = waiters;
+    const settle = () => {
+      link._$frWaiters = null;
+      for (const fn of waiters) fn();
+    };
+    link.addEventListener("load", settle);
+    link.addEventListener("error", settle);
+    document.head.appendChild(link);
+  }
+  const waiters = link._$frWaiters;
+  if (waiters == null) return true;
+  waiters.add(onSettle);
+  return false;
+}
+function ensureModulePreload(href) {
+  if (findHeadElement('link[rel="modulepreload"]', "href", href)) return;
+  const link = document.createElement("link");
+  link.rel = "modulepreload";
+  link.href = href;
+  document.head.appendChild(link);
+}
+function applyInlineStyles(inlineStyles) {
+  for (const entry of inlineStyles) {
+    if (findHeadElement("style[data-asset]", "data-asset", entry.id)) continue;
+    const el = document.createElement("style");
+    el.setAttribute("data-asset", entry.id);
+    if (entry.attrs) {
+      for (const name in entry.attrs) el.setAttribute(name, entry.attrs[name]);
+    }
+    el.textContent = entry.content || "";
+    document.head.appendChild(el);
+  }
+}
+function isPlaceholderStart(node, id) {
+  return node.nodeType === ELEMENT_NODE && node.tagName === "TEMPLATE" && node.getAttribute("id") === id;
+}
+function rangeClose(start, id) {
+  let n = start.nextSibling;
+  while (n) {
+    if (n.nodeType === COMMENT_NODE && n.data === id) return n;
+    n = n.nextSibling;
+  }
+  return null;
+}
+function findPlaceholder(root, id) {
+  let n = root.firstChild;
+  while (n) {
+    if (isPlaceholderStart(n, id)) return n;
+    if (n.nodeType === ELEMENT_NODE) {
+      const found = findPlaceholder(n, id);
+      if (found) return found;
+    }
+    n = n.nextSibling;
+  }
+  return null;
+}
+function collectSlots(root, out) {
+  let n = root.firstChild;
+  while (n) {
+    const id = slotStartId(n);
+    if (id !== null) {
+      if (!out.has(id)) out.set(id, n);
+      n = afterRange(n, id);
+      continue;
+    }
+    const regionId = frameRegionStartId(n);
+    if (regionId !== null) {
+      n = afterFrameRegion(n, regionId);
+      continue;
+    }
+    if (n.nodeType === ELEMENT_NODE) collectSlots(n, out);
+    n = n.nextSibling;
+  }
+}
+const FRAME_REGION_START = /^frame:(.+):start$/;
+function frameRegionStartId(node) {
+  if (node.nodeType !== COMMENT_NODE) return null;
+  const m = FRAME_REGION_START.exec(node.data);
+  return m ? m[1] : null;
+}
+function afterFrameRegion(start, id) {
+  const end = `frame:${id}:end`;
+  let n = start.nextSibling;
+  while (n) {
+    if (n.nodeType === COMMENT_NODE && n.data === end) return n.nextSibling;
+    n = n.nextSibling;
+  }
+  return null;
+}
+function argsEquivalent(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  for (const key of ka) {
+    const va = a[key];
+    const vb = b[key];
+    if (va === vb) continue;
+    if (va && vb && typeof va === "object" && typeof vb === "object" && typeof va.$frame === "string" && va.$frame === vb.$frame) {
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+function rangeInterior(start, endData) {
+  const nodes = [];
+  let n = start.nextSibling;
+  while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
+    nodes.push(n);
+    n = n.nextSibling;
+  }
+  return nodes;
+}
+function findComment(root, data) {
+  const children = root.childNodes;
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i];
+    if (node.nodeType === COMMENT_NODE && node.data === data) return node;
+    if (node.nodeType === ELEMENT_NODE) {
+      const found = findComment(node, data);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function slotStartId(node) {
+  if (node.nodeType !== COMMENT_NODE) return null;
+  const m = SLOT_START.exec(node.data);
+  return m ? m[1] : null;
+}
+function isSlotMarker(node) {
+  if (node.nodeType !== COMMENT_NODE) return false;
+  const data = node.data;
+  return SLOT_START.test(data) || SLOT_END.test(data);
+}
+function compatible(a, b) {
+  if (a.nodeType !== b.nodeType) return false;
+  if (a.nodeType === ELEMENT_NODE) return a.nodeName === b.nodeName;
+  return a.nodeType === TEXT_NODE || a.nodeType === COMMENT_NODE;
+}
+function morphAttributes(oldEl, newEl, claim) {
+  let reclaim = false;
+  let changed = false;
+  const oldAttrs = oldEl.attributes;
+  for (let i = oldAttrs.length - 1; i >= 0; i--) {
+    const name = oldAttrs[i].name;
+    if (!newEl.hasAttribute(name)) {
+      oldEl.removeAttribute(name);
+      changed = true;
+      reclaim ||= claimedAttr(name);
+    }
+  }
+  const newAttrs = newEl.attributes;
+  for (let i = 0; i < newAttrs.length; i++) {
+    const attr = newAttrs[i];
+    if (oldEl.getAttribute(attr.name) !== attr.value) {
+      oldEl.setAttribute(attr.name, attr.value);
+      changed = true;
+      reclaim ||= claimedAttr(attr.name);
+    }
+  }
+  if (claim && (reclaim || changed && oldEl.matches(CLAIMED_ELEMENTS))) claim(oldEl, true);
+}
+function morphNode(oldNode, newNode, claim) {
+  if (oldNode.nodeType === ELEMENT_NODE) {
+    morphAttributes(oldNode, newNode, claim);
+    reconcileChildren(oldNode, newNode, null, null, claim);
+  } else if (oldNode.data !== newNode.data) {
+    oldNode.data = newNode.data;
+  }
+}
+function afterRange(start, id) {
+  const end = slotEnd(id);
+  let n = start.nextSibling;
+  while (n) {
+    if (n.nodeType === COMMENT_NODE && n.data === end) return n.nextSibling;
+    n = n.nextSibling;
+  }
+  return null;
+}
+function skipRange(start, id) {
+  return afterRange(start, id);
+}
+function findRangeStart(from, id, bound) {
+  const target = `slot:${id}:start`;
+  let n = from;
+  while (n && n !== bound) {
+    if (n.nodeType === COMMENT_NODE && n.data === target) return n;
+    n = n.nextSibling;
+  }
+  return null;
+}
+function moveRangeBefore(parent, start, id, ref) {
+  const end = slotEnd(id);
+  let n = start;
+  while (n) {
+    const next = n.nextSibling;
+    const isEnd = n.nodeType === COMMENT_NODE && n.data === end;
+    parent.insertBefore(n, ref);
+    if (isEnd) break;
+    n = next;
+  }
+}
+function adoptRange(parent, start, id, ref, claim) {
+  const end = slotEnd(id);
+  let n = start;
+  let after = null;
+  while (n) {
+    const next = n.nextSibling;
+    const isEnd = n.nodeType === COMMENT_NODE && n.data === end;
+    parent.insertBefore(n, ref);
+    if (claim) claim(n);
+    if (isEnd) {
+      after = next;
+      break;
+    }
+    n = next;
+  }
+  return after;
+}
+function reconcileChildren(parent, source, boundStart = null, boundEnd = null, claim = null) {
+  let oldChild = boundStart ? boundStart.nextSibling : parent.firstChild;
+  let newChild = source.firstChild;
+  while (newChild) {
+    const nextNew = newChild.nextSibling;
+    const pid = slotStartId(newChild);
+    const old = oldChild === boundEnd ? null : oldChild;
+    if (pid !== null) {
+      if (old && slotStartId(old) === pid) {
+        oldChild = afterRange(old, pid);
+        newChild = skipRange(newChild, pid);
+      } else {
+        const existing = findRangeStart(old, pid, boundEnd);
+        if (existing) {
+          moveRangeBefore(parent, existing, pid, old ?? boundEnd);
+          newChild = skipRange(newChild, pid);
+        } else {
+          newChild = adoptRange(parent, newChild, pid, old ?? boundEnd, claim);
+        }
+      }
+      continue;
+    }
+    if (!old) {
+      parent.insertBefore(newChild, boundEnd);
+      if (claim) claim(newChild);
+      newChild = nextNew;
+      continue;
+    }
+    if (isSlotMarker(old)) {
+      parent.insertBefore(newChild, old);
+      if (claim) claim(newChild);
+      newChild = nextNew;
+      continue;
+    }
+    if (compatible(old, newChild)) {
+      morphNode(old, newChild, claim);
+      oldChild = old.nextSibling;
+      newChild = nextNew;
+      continue;
+    }
+    if (newChild.nodeType === 1) {
+      let ahead = old.nextSibling;
+      while (ahead && ahead !== boundEnd && !compatible(ahead, newChild)) {
+        const aheadPid = slotStartId(ahead);
+        ahead = aheadPid !== null ? afterRange(ahead, aheadPid) : ahead.nextSibling;
+      }
+      if (ahead && ahead !== boundEnd) {
+        parent.insertBefore(ahead, old);
+        morphNode(ahead, newChild, claim);
+        newChild = nextNew;
+        continue;
+      }
+    }
+    parent.insertBefore(newChild, old);
+    if (claim) claim(newChild);
+    newChild = nextNew;
+  }
+  while (oldChild && oldChild !== boundEnd) {
+    const next = oldChild.nextSibling;
+    parent.removeChild(oldChild);
+    oldChild = next;
+  }
+}
+
+Feature.AggregateError | Feature.BigIntTypedArray;
+const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
+CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
+FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin]);
+function resolveSerializerPlugins(customPlugins) {
+  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
+}
+const JSON_CODEC_DISABLED_FEATURES = Feature.RegExp;
+const JSON_CODEC_DEPTH_LIMIT = 64;
+function resolveCodecOptions({
+  plugins,
+  disabledFeatures,
+  depthLimit
+} = {}) {
+  return {
+    plugins: resolveSerializerPlugins(plugins),
+    disabledFeatures: disabledFeatures === undefined ? JSON_CODEC_DISABLED_FEATURES : disabledFeatures,
+    depthLimit: depthLimit === undefined ? JSON_CODEC_DEPTH_LIMIT : depthLimit
+  };
+}
+function createJSONDeserializer(options) {
+  const refs = new Map();
+  const resolved = resolveCodecOptions(options);
+  return function deserializeJSONChunk(node) {
+    return fromCrossJSON(node, {
+      refs,
+      ...resolved
+    });
+  };
+}
+function createJSONDataTable(options) {
+  const deserialize = createJSONDeserializer(options);
+  const table = new Map();
+  return {
+    apply(record) {
+      const value = deserialize(record.node);
+      if (record.initial) table.set(record.key, value);
+    },
+    get(key) {
+      return table.get(key);
+    },
+    resolve(ref) {
+      return table.get(ref.$ref);
+    }
+  };
+}
+
+class ChunkReader {
+  constructor(stream) {
+    this.reader = stream.getReader();
+    this.buffer = new Uint8Array(0);
+    this.done = false;
+  }
+  async readChunk() {
+    const chunk = await this.reader.read();
+    if (!chunk.done) {
+      const newBuffer = new Uint8Array(this.buffer.length + chunk.value.length);
+      newBuffer.set(this.buffer);
+      newBuffer.set(chunk.value, this.buffer.length);
+      this.buffer = newBuffer;
+    } else {
+      this.done = true;
+    }
+  }
+  async next() {
+    if (this.buffer.length === 0) {
+      if (this.done) {
+        return {
+          done: true,
+          value: undefined
+        };
+      }
+      await this.readChunk();
+      return await this.next();
+    }
+    const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
+    const bytes = Number.parseInt(head, 16);
+    if (Number.isNaN(bytes)) {
+      throw new Error("Malformed server function stream.");
+    }
+    while (bytes > this.buffer.length - 12) {
+      if (this.done) {
+        throw new Error("Malformed server function stream.");
+      }
+      await this.readChunk();
+    }
+    const partial = new TextDecoder().decode(this.buffer.subarray(12, 12 + bytes));
+    this.buffer = this.buffer.subarray(12 + bytes);
+    return {
+      done: false,
+      value: partial
+    };
+  }
+  async drain(interpret) {
+    while (true) {
+      const result = await this.next();
+      if (result.done) {
+        break;
+      }
+      interpret(result.value);
+    }
+  }
+}
+
+const FRAME_STREAM_HEADER = "X-Frame-Stream";
+function isFrameStreamResponse(response) {
+  return response.headers.has(FRAME_STREAM_HEADER);
+}
+async function applyFrameResponse(response, host, options = {}) {
+  const rootId = response.headers.get(FRAME_STREAM_HEADER) ?? "";
+  const as = options.as;
+  const version = options.version;
+  const reader = new ChunkReader(response.body);
+  let result = await reader.next();
+  while (!result.done) {
+    const chunk = JSON.parse(result.value);
+    if (as !== undefined && chunk.id === rootId) chunk.id = as;
+    if (version !== undefined) chunk.version = version;
+    host.apply(chunk);
+    result = await reader.next();
+  }
+  return as !== undefined ? as : rootId;
+}
+function createServerComponentHandler({
+  host,
+  component,
+  capture,
+  onStream,
+  documentComponent,
+  intercept
+}) {
+  const byContext = new WeakMap();
+  const byFunction = new Map();
+  let boundary = 0;
+  return {
+    capture,
+    intercept,
+    handle(response, ctx) {
+      if (!isFrameStreamResponse(response)) return undefined;
+      const key = ctx.context;
+      const keyed = key !== null && typeof key === "object";
+      let entry = keyed ? byContext.get(key) : byFunction.get(ctx.id);
+      if (!entry) {
+        const adopted = documentComponent && documentComponent(ctx.id);
+        if (adopted) {
+          entry = {
+            frameId: ctx.id,
+            version: 0,
+            component: adopted
+          };
+        } else {
+          const frameId = `sc:${boundary++}`;
+          entry = {
+            frameId,
+            version: 0,
+            component: component(frameId)
+          };
+        }
+        keyed ? byContext.set(key, entry) : byFunction.set(ctx.id, entry);
+      }
+      const version = ++entry.version;
+      if (onStream) onStream(entry.frameId, version, response);
+      applyFrameResponse(response, host, {
+        as: entry.frameId,
+        version
+      }).catch(err => host.apply({
+        type: "error",
+        id: entry.frameId,
+        version,
+        error: {
+          message: String(err && err.message)
+        }
+      }));
+      return entry.component;
+    }
+  };
+}
+
+let sharedHost;
+const tables = new Map();
+function tableFor(id) {
+  const table = tables.get(id);
+  if (table) return table;
+  for (const [root, t] of tables) if (id.startsWith(root + ".")) return t;
+  return undefined;
+}
+function getFrameHost() {
+  if (!sharedHost) {
+    sharedHost = createFrameHost({
+      applyData: c => tableFor(c.id)?.apply(c),
+      resolve: (ref, id) => tableFor(id)?.resolve(ref)
+    });
+  }
+  return sharedHost;
+}
+function normalizeSlotContent(value) {
+  while (typeof value === "function") value = value();
+  if (Array.isArray(value)) {
+    const out = [];
+    for (const v of value) {
+      const n = normalizeSlotContent(v);
+      Array.isArray(n) ? out.push(...n) : out.push(n);
+    }
+    return out;
+  }
+  if (value == null || typeof value === "boolean") return document.createTextNode("");
+  return value instanceof Node ? value : document.createTextNode(String(value));
+}
+function claimRender(prefix, existing, render) {
+  const sc = sharedConfig;
+  if (!sc.getNextContextId) return render();
+  const registry = new Map();
+  for (const n of existing) {
+    const el = n;
+    if (el.nodeType !== 1) continue;
+    if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
+    el.querySelectorAll("*[_hk]").forEach(child => registry.set(child.getAttribute("_hk"), child));
+  }
+  if (!registry.size) return render();
+  const prevRegistry = sc.registry;
+  const prevHydrating = sc.hydrating;
+  sc.registry = registry;
+  sc.hydrating = true;
+  try {
+    return runWithOwner(createOwner({
+      id: prefix
+    }), render);
+  } finally {
+    sc.registry = prevRegistry;
+    sc.hydrating = prevHydrating;
+  }
+}
+function slotsFor(props) {
+  return new Proxy({}, {
+    get(_, prop) {
+      if (typeof prop !== "string" || !(prop in props)) return undefined;
+      return (slotProps, ctx) => {
+        const settle = out => {
+          const existing = ctx && ctx.existing || [];
+          if (existing.length) {
+            const list = Array.isArray(out) ? out : [out];
+            const inPlace = list.every(n => existing.some(e => e === n || e.nodeType === 1 && e.contains(n)));
+            if (inPlace) return undefined;
+          }
+          return out;
+        };
+        const render = () => {
+          const v = props[prop];
+          return settle(normalizeSlotContent(typeof v === "function" ? v(slotProps) : v));
+        };
+        if (ctx && ctx.frame && ctx.existing && ctx.existing.length) {
+          return claimRender(`sc-${ctx.frame}-${ctx.key}-`, ctx.existing, render);
+        }
+        return render();
+      };
+    }
+  });
+}
+function boundaryComponent(host, id) {
+  return props => {
+    const owner = getOwner();
+    const insertable = createFrameInsertable({
+      host,
+      id,
+      slots: slotsFor(props),
+      ownerScope: fn => runWithOwner(owner, fn)
+    });
+    onCleanup(() => insertable.dispose());
+    return insertable;
+  };
+}
+const claimedBoundaries = new Set();
+let boundaryIndex = null;
+function findBoundaryRange(id) {
+  if (!boundaryIndex) {
+    boundaryIndex = new Map();
+    if (typeof document !== "undefined" && document.body) {
+      const walker = document.createTreeWalker(document.body, 128 );
+      const opens = {};
+      let c;
+      while (c = walker.nextNode()) {
+        const d = c.data;
+        if (!d.startsWith("frame:")) continue;
+        if (d.endsWith(":start")) {
+          const key = d.slice(6, -6);
+          if (key && !(key in opens)) opens[key] = c;
+        } else if (d.endsWith(":end")) {
+          const key = d.slice(6, -4);
+          if (key && opens[key] && !boundaryIndex.has(key)) {
+            boundaryIndex.set(key, [opens[key], c]);
+          }
+        }
+      }
+    }
+  }
+  return boundaryIndex.get(id);
+}
+function documentBoundary(host, id, props) {
+  const range = !claimedBoundaries.has(id) && findBoundaryRange(id);
+  if (!range) return boundaryComponent(host, id)(props);
+  claimedBoundaries.add(id);
+  const [start, end] = range;
+  const hy = globalThis._$HY;
+  if (hy && hy.r) {
+    const slotPrefix = `sc:slot:${id}:`;
+    for (const key of Object.keys(hy.r)) {
+      if (key.startsWith(slotPrefix)) {
+        host.apply({
+          type: "slot",
+          id,
+          version: 0,
+          key: key.slice(slotPrefix.length),
+          args: hy.r[key]
+        });
+      } else if (key.startsWith("sc:region:")) {
+        const childId = key.slice("sc:region:".length);
+        if (childId.startsWith(id + ".")) {
+          const val = hy.r[key];
+          const apply = html => host.apply({
+            type: "html",
+            id: childId,
+            version: 0,
+            html
+          });
+          val && typeof val.then === "function" ? val.then(apply) : apply(val);
+        }
+      }
+    }
+  }
+  const owner = getOwner();
+  const frame = adoptFrameRange(start, end, {
+    host,
+    id,
+    slots: slotsFor(props),
+    ownerScope: fn => runWithOwner(owner, fn)
+  });
+  onCleanup(() => frame.dispose());
+  const nodes = [];
+  for (let n = start; n; n = n.nextSibling) {
+    nodes.push(n);
+    if (n === end) break;
+  }
+  return nodes;
+}
+function installServerComponents(host = getFrameHost()) {
+  const g = globalThis;
+  if (!g._$SC) {
+    g._$SC = {
+      c: {},
+      r(i) {
+        return g._$SC.c[i] || (g._$SC.c[i] = p => g._$SC.impl(i, p));
+      }
+    };
+  }
+  g._$SC.impl = (id, props) => documentBoundary(host, id, props);
+}
+
+export { FRAME_APPLIED_EVENT, FRAME_STREAM_HEADER, applyFrameResponse, createFrame, createFrameHost, createFrameInsertable, createJSONDataTable, createServerComponentHandler, getFrameHost, installServerComponents, isFrameStreamResponse };