@jay-framework/compiler-jay-html 0.15.5 → 0.16.0

package/dist/index.js

@@ -1,601 +1,10 @@
-import { JayImportedType, isObjectType as isObjectType$1, isImportedType, isRecursiveType, JayUnknown, RenderFragment, Imports, Import, WithValidations, isArrayType as isArrayType$1, isAtomicType, isPromiseType, isEnumType, hasRefs, GenerateTarget, JayTypeAlias, JayUnionType, mkRefsTree, JayComponentType, JayHTMLType, mkRef, equalJayTypes, getModeFileExtension, RuntimeMode, nestRefs, mergeRefsTrees, SourceFileFormat, JayEnumType, JayObjectType, JayArrayType, JayPromiseType, resolvePrimitiveType, JayRecursiveType, JAY_CONTRACT_EXTENSION as JAY_CONTRACT_EXTENSION$1, ImportsFor, JAY_FULLSTACK_COMPONENTS, computeInstanceKey, JayErrorType, isStaticCoordinate, compileCoordinateExpr, JayOptionalType, JayRecordType, isOptionalType, isRecordType, resolvePluginComponent, resolvePluginManifest } from "@jay-framework/compiler-shared";
+import { JayImportedType, isObjectType as isObjectType$1, isImportedType, isRecursiveType, JayUnknown, RenderFragment, Imports, Import, WithValidations, isArrayType as isArrayType$1, isAtomicType, isPromiseType, isEnumType, hasRefs, GenerateTarget, JayTypeAlias, JayUnionType, mkRefsTree, JayComponentType, JayHTMLType, mkRef, equalJayTypes, getModeFileExtension, RuntimeMode, nestRefs, mergeRefsTrees, SourceFileFormat, JayEnumType, JayObjectType, JayArrayType, JayPromiseType, resolvePrimitiveType, JayRecursiveType, JAY_CONTRACT_EXTENSION as JAY_CONTRACT_EXTENSION$1, ImportsFor, JAY_FULLSTACK_COMPONENTS, JayErrorType, JayOptionalType, JayRecordType, isOptionalType, isRecordType, resolvePluginComponent, resolvePluginManifest } from "@jay-framework/compiler-shared";
 import path from "path";
 import { getLogger } from "@jay-framework/logger";
 import fs from "fs/promises";
 import { analyzeExportedTypes } from "@jay-framework/compiler-analyze-exported-types";
 import fs$1 from "fs";
 import { createRequire } from "module";
-var ContractTagType = /* @__PURE__ */ ((ContractTagType2) => {
-  ContractTagType2[ContractTagType2["data"] = 0] = "data";
-  ContractTagType2[ContractTagType2["interactive"] = 1] = "interactive";
-  ContractTagType2[ContractTagType2["variant"] = 2] = "variant";
-  ContractTagType2[ContractTagType2["subContract"] = 3] = "subContract";
-  return ContractTagType2;
-})(ContractTagType || {});
-const PHASE_ORDER = {
-  slow: 0,
-  fast: 1,
-  "fast+interactive": 2
-};
-const DEFAULT_PHASE = "slow";
-function getEffectivePhase(tag, parentPhase) {
-  if (tag.type.includes(ContractTagType.interactive)) {
-    return "fast+interactive";
-  }
-  if (tag.phase) {
-    return tag.phase;
-  }
-  if (parentPhase) {
-    return parentPhase;
-  }
-  return DEFAULT_PHASE;
-}
-function isPhaseCompatible(childPhase, parentPhase) {
-  return PHASE_ORDER[childPhase] >= PHASE_ORDER[parentPhase];
-}
-function isTagInPhase(tag, targetPhase, parentPhase) {
-  if (tag.type.includes(ContractTagType.interactive) && !tag.dataType) {
-    return false;
-  }
-  const effectivePhase = getEffectivePhase(tag, parentPhase);
-  return effectivePhase === targetPhase;
-}
-function validateTagPhases(tag, parentPhase, tagPath = "") {
-  const validations = [];
-  const currentPath = tagPath ? `${tagPath}.${tag.tag}` : tag.tag;
-  const effectivePhase = getEffectivePhase(tag, parentPhase);
-  if (parentPhase && !isPhaseCompatible(effectivePhase, parentPhase)) {
-    validations.push(
-      `Tag [${currentPath}] has phase [${effectivePhase}] which is earlier than parent phase [${parentPhase}]. Child phases must be same or later than parent (slow < fast < fast+interactive)`
-    );
-  }
-  if (tag.type.includes(ContractTagType.subContract) && tag.tags) {
-    if (tag.repeated) {
-      tag.tags.forEach((childTag) => {
-        const childValidations = validateTagPhases(childTag, effectivePhase, currentPath);
-        validations.push(...childValidations);
-      });
-    } else {
-      tag.tags.forEach((childTag) => {
-        const childValidations = validateTagPhases(childTag, void 0, currentPath);
-        validations.push(...childValidations);
-      });
-    }
-  }
-  return validations;
-}
-function validateContractPhases(contract) {
-  const validations = [];
-  contract.tags.forEach((tag) => {
-    const tagValidations = validateTagPhases(tag);
-    validations.push(...tagValidations);
-  });
-  return validations;
-}
-function filterTagsByPhase(tags, targetPhase, parentPhase) {
-  const filteredTags = [];
-  for (const tag of tags) {
-    if (!isTagInPhase(tag, targetPhase, parentPhase)) {
-      continue;
-    }
-    const effectivePhase = getEffectivePhase(tag, parentPhase);
-    if (tag.type.includes(ContractTagType.subContract) && tag.tags) {
-      const filteredNestedTags = filterTagsByPhase(tag.tags, targetPhase, effectivePhase);
-      if (filteredNestedTags.length > 0) {
-        filteredTags.push({
-          ...tag,
-          tags: filteredNestedTags
-        });
-      }
-    } else {
-      filteredTags.push(tag);
-    }
-  }
-  return filteredTags;
-}
-function createPhaseContract(contract, targetPhase) {
-  return {
-    ...contract,
-    tags: filterTagsByPhase(contract.tags, targetPhase)
-  };
-}
-const JAY_CONTRACT_EXTENSION = ".jay-contract";
-function loadLinkedContract(linkPath, baseContractDir, importResolver) {
-  const linkWithExtension = linkPath.endsWith(JAY_CONTRACT_EXTENSION) ? linkPath : linkPath + JAY_CONTRACT_EXTENSION;
-  try {
-    const absolutePath = importResolver.resolveLink(baseContractDir, linkWithExtension);
-    const contractResult = importResolver.loadContract(absolutePath);
-    return contractResult.val ?? null;
-  } catch {
-    return null;
-  }
-}
-function getLinkedContractDir(linkPath, baseContractDir, importResolver) {
-  const linkWithExtension = linkPath.endsWith(JAY_CONTRACT_EXTENSION) ? linkPath : linkPath + JAY_CONTRACT_EXTENSION;
-  try {
-    const absolutePath = importResolver.resolveLink(baseContractDir, linkWithExtension);
-    return path.dirname(absolutePath);
-  } catch {
-    return baseContractDir;
-  }
-}
-var __assign$3 = function() {
-  __assign$3 = Object.assign || function __assign2(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign$3.apply(this, arguments);
-};
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-  var e2 = new Error(message);
-  return e2.name = "SuppressedError", e2.error = error, e2.suppressed = suppressed, e2;
-};
-function lowerCase(str2) {
-  return str2.toLowerCase();
-}
-var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
-var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
-function noCase(input, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
-  var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
-  var start = 0;
-  var end = result.length;
-  while (result.charAt(start) === "\0")
-    start++;
-  while (result.charAt(end - 1) === "\0")
-    end--;
-  return result.slice(start, end).split("\0").map(transform).join(delimiter);
-}
-function replace(input, re, value) {
-  if (re instanceof RegExp)
-    return input.replace(re, value);
-  return re.reduce(function(input2, re2) {
-    return input2.replace(re2, value);
-  }, input);
-}
-function pascalCaseTransform(input, index) {
-  var firstChar = input.charAt(0);
-  var lowerChars = input.substr(1).toLowerCase();
-  if (index > 0 && firstChar >= "0" && firstChar <= "9") {
-    return "_" + firstChar + lowerChars;
-  }
-  return "" + firstChar.toUpperCase() + lowerChars;
-}
-function pascalCase(input, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return noCase(input, __assign$3({ delimiter: "", transform: pascalCaseTransform }, options));
-}
-function camelCaseTransform(input, index) {
-  if (index === 0)
-    return input.toLowerCase();
-  return pascalCaseTransform(input, index);
-}
-function camelCase$1(input, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return pascalCase(input, __assign$3({ transform: camelCaseTransform }, options));
-}
-function upperCaseFirst(input) {
-  return input.charAt(0).toUpperCase() + input.substr(1);
-}
-function capitalCaseTransform(input) {
-  return upperCaseFirst(input.toLowerCase());
-}
-function capitalCase(input, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return noCase(input, __assign$3({ delimiter: " ", transform: capitalCaseTransform }, options));
-}
-function camelCase(str2) {
-  let leadingUnderscores = 0;
-  for (const char of str2) {
-    if (char === "_") {
-      leadingUnderscores++;
-    } else {
-      break;
-    }
-  }
-  if (leadingUnderscores === 0) {
-    return camelCase$1(str2);
-  }
-  const withoutLeadingUnderscores = str2.slice(leadingUnderscores);
-  const camelCased = camelCase$1(withoutLeadingUnderscores);
-  return "_".repeat(leadingUnderscores) + camelCased;
-}
-function shouldIncludeInPhase(propertyPhase, targetPhase) {
-  if (targetPhase === "slow") {
-    return propertyPhase === "slow";
-  } else if (targetPhase === "fast") {
-    return propertyPhase === "fast" || propertyPhase === "fast+interactive";
-  } else if (targetPhase === "fast+interactive") {
-    return propertyPhase === "fast+interactive";
-  }
-  return false;
-}
-function extractPropertyPathsAndArrays(tags, targetPhase, parentPath = [], parentPhase, parentTrackBy, linkedContext) {
-  const paths = [];
-  const arrays = [];
-  const asyncProps = [];
-  for (const tag of tags) {
-    if (tag.type.includes(ContractTagType.interactive) && !tag.dataType) {
-      continue;
-    }
-    const effectivePhase = getEffectivePhase(tag, parentPhase);
-    const propertyName = camelCase(tag.tag);
-    const currentPath = [...parentPath, propertyName];
-    const isArray = tag.repeated || false;
-    const isAsync = tag.async || false;
-    if (tag.type.includes(ContractTagType.subContract)) {
-      const isRecursiveLink2 = tag.link?.startsWith("$/");
-      if (isRecursiveLink2) {
-        if (shouldIncludeInPhase(effectivePhase, targetPhase)) {
-          paths.push({
-            path: parentPath,
-            propertyName
-          });
-          if (isArray) {
-            arrays.push({ path: currentPath.join(".") });
-          }
-          if (isAsync) {
-            asyncProps.push({ path: currentPath.join(".") });
-          }
-        }
-      } else {
-        let childTags = [];
-        let childLinkedContext = linkedContext;
-        if (tag.tags) {
-          childTags = tag.tags;
-        } else if (tag.link && linkedContext) {
-          const linkedContract = loadLinkedContract(
-            tag.link,
-            linkedContext.contractDir,
-            linkedContext.importResolver
-          );
-          if (linkedContract) {
-            childTags = linkedContract.tags;
-            childLinkedContext = {
-              importResolver: linkedContext.importResolver,
-              contractDir: getLinkedContractDir(
-                tag.link,
-                linkedContext.contractDir,
-                linkedContext.importResolver
-              )
-            };
-          }
-        }
-        if (childTags.length > 0) {
-          const trackByForChildren = isArray ? tag.trackBy : void 0;
-          const result = extractPropertyPathsAndArrays(
-            childTags,
-            targetPhase,
-            currentPath,
-            effectivePhase,
-            trackByForChildren,
-            childLinkedContext
-          );
-          const hasOnlyTrackBy = isArray && trackByForChildren && result.paths.length === 1 && result.paths[0].propertyName === camelCase(trackByForChildren);
-          if (result.paths.length > 0 && !hasOnlyTrackBy) {
-            paths.push(...result.paths);
-            arrays.push(...result.arrays);
-            asyncProps.push(...result.asyncProps);
-            if (isArray) {
-              arrays.push({ path: currentPath.join(".") });
-            }
-            if (isAsync) {
-              asyncProps.push({ path: currentPath.join(".") });
-            }
-          }
-        }
-      }
-    } else {
-      const isTrackByField = parentTrackBy === tag.tag;
-      if (shouldIncludeInPhase(effectivePhase, targetPhase) || isTrackByField) {
-        paths.push({
-          path: parentPath,
-          propertyName
-        });
-      }
-    }
-  }
-  return { paths, arrays, asyncProps };
-}
-function groupPathsByParent(paths) {
-  const grouped = /* @__PURE__ */ new Map();
-  for (const { path: path2, propertyName } of paths) {
-    const parentKey = path2.join(".");
-    if (!grouped.has(parentKey)) {
-      grouped.set(parentKey, []);
-    }
-    grouped.get(parentKey).push(propertyName);
-  }
-  return grouped;
-}
-function countTotalProperties(tags, targetPath, currentPath = [], linkedContext) {
-  let count = 0;
-  for (const tag of tags) {
-    if (tag.type.includes(ContractTagType.interactive) && !tag.dataType) {
-      continue;
-    }
-    const propertyName = camelCase(tag.tag);
-    const newPath = [...currentPath, propertyName];
-    const pathKey = newPath.join(".");
-    const targetKey = targetPath.join(".");
-    if (pathKey === targetKey && tag.type.includes(ContractTagType.subContract)) {
-      let childTags = [];
-      if (tag.tags) {
-        childTags = tag.tags;
-      } else if (tag.link && linkedContext && !tag.link.startsWith("$/")) {
-        const linkedContract = loadLinkedContract(
-          tag.link,
-          linkedContext.contractDir,
-          linkedContext.importResolver
-        );
-        if (linkedContract) {
-          childTags = linkedContract.tags;
-        }
-      }
-      for (const childTag of childTags) {
-        if (childTag.type.includes(ContractTagType.interactive) && !childTag.dataType) {
-          continue;
-        }
-        count++;
-      }
-      return count;
-    }
-    if (tag.type.includes(ContractTagType.subContract)) {
-      let childTags = [];
-      let childLinkedContext = linkedContext;
-      if (tag.tags) {
-        childTags = tag.tags;
-      } else if (tag.link && linkedContext && !tag.link.startsWith("$/")) {
-        const linkedContract = loadLinkedContract(
-          tag.link,
-          linkedContext.contractDir,
-          linkedContext.importResolver
-        );
-        if (linkedContract) {
-          childTags = linkedContract.tags;
-          childLinkedContext = {
-            importResolver: linkedContext.importResolver,
-            contractDir: getLinkedContractDir(
-              tag.link,
-              linkedContext.contractDir,
-              linkedContext.importResolver
-            )
-          };
-        }
-      }
-      if (childTags.length > 0) {
-        const result = countTotalProperties(
-          childTags,
-          targetPath,
-          newPath,
-          childLinkedContext
-        );
-        if (result > 0) {
-          return result;
-        }
-      }
-    }
-  }
-  return count;
-}
-function buildPathAccess(baseTypeName, path2, arrays, asyncProps, skipFinalArrayAccess = false) {
-  if (path2.length === 0) {
-    return baseTypeName;
-  }
-  let result = baseTypeName;
-  for (let i = 0; i < path2.length; i++) {
-    const segment = path2[i];
-    result += `['${segment}']`;
-    const pathUpToHere = path2.slice(0, i + 1).join(".");
-    const isArray = arrays.has(pathUpToHere);
-    const isAsync = asyncProps?.has(pathUpToHere);
-    const isFinalSegment = i === path2.length - 1;
-    const shouldSkip = isFinalSegment && (skipFinalArrayAccess || isArray && isAsync);
-    if (isArray && !shouldSkip) {
-      result += "[number]";
-    }
-  }
-  return result;
-}
-function isFullyIncluded(pathGroups, contractTags, currentPath, linkedContext) {
-  const currentKey = currentPath.join(".");
-  const properties = pathGroups.get(currentKey) || [];
-  const totalProps = countTotalProperties(contractTags, currentPath, [], linkedContext);
-  if (totalProps === 0) {
-    return false;
-  }
-  const childPropertyNames = /* @__PURE__ */ new Set();
-  const prefix = currentKey ? currentKey + "." : "";
-  for (const key of pathGroups.keys()) {
-    if (key.startsWith(prefix) && key !== currentKey) {
-      const remainingPath = key.slice(prefix.length);
-      const firstSegment = remainingPath.split(".")[0];
-      if (firstSegment) {
-        childPropertyNames.add(firstSegment);
-      }
-    }
-  }
-  const directProps = properties.filter((p) => !childPropertyNames.has(p));
-  if (directProps.length + childPropertyNames.size !== totalProps) {
-    return false;
-  }
-  for (const childName of childPropertyNames) {
-    const childPath = [...currentPath, childName];
-    if (!isFullyIncluded(pathGroups, contractTags, childPath, linkedContext)) {
-      return false;
-    }
-  }
-  return true;
-}
-function buildPickExpression(baseTypeName, pathGroups, arrays, asyncProps, contractTags, currentPath = [], linkedContext) {
-  const currentKey = currentPath.join(".");
-  const properties = pathGroups.get(currentKey) || [];
-  const childPropertyNames = /* @__PURE__ */ new Set();
-  for (const key of pathGroups.keys()) {
-    const prefix = currentKey ? currentKey + "." : "";
-    if (key.startsWith(prefix) && key !== currentKey) {
-      const remainingPath = key.slice(prefix.length);
-      const firstSegment = remainingPath.split(".")[0];
-      if (firstSegment) {
-        childPropertyNames.add(firstSegment);
-      }
-    }
-  }
-  const pickPart = [];
-  const nestedProperties = [];
-  const directProps = properties.filter((p) => !childPropertyNames.has(p));
-  if (directProps.length > 0) {
-    const pathAccess = buildPathAccess(baseTypeName, currentPath, arrays, asyncProps);
-    pickPart.push(`Pick<${pathAccess}, ${directProps.map((p) => `'${p}'`).join(" | ")}>`);
-  }
-  for (const childName of childPropertyNames) {
-    const childPath = [...currentPath, childName];
-    const childPathKey = childPath.join(".");
-    const isArray = arrays.has(childPathKey);
-    const isAsync = asyncProps.has(childPathKey);
-    const isChildFullyIncluded = isFullyIncluded(
-      pathGroups,
-      contractTags,
-      childPath,
-      linkedContext
-    );
-    const originalPathAccess = buildPathAccess(baseTypeName, childPath, arrays, asyncProps);
-    if (isChildFullyIncluded) {
-      let fullExpression;
-      const directTypeRef = originalPathAccess;
-      if (isAsync) {
-        if (isArray) {
-          fullExpression = `Promise<Array<Awaited<${directTypeRef}>[number]>>`;
-        } else {
-          fullExpression = directTypeRef;
-        }
-      } else if (isArray) {
-        fullExpression = `Array<${directTypeRef}>`;
-      } else {
-        fullExpression = directTypeRef;
-      }
-      nestedProperties.push(`    ${childName}: ${fullExpression};`);
-    } else {
-      const childExpression = buildPickExpression(
-        baseTypeName,
-        pathGroups,
-        arrays,
-        asyncProps,
-        contractTags,
-        childPath,
-        linkedContext
-      );
-      if (childExpression) {
-        let fullExpression;
-        if (isAsync) {
-          if (isArray) {
-            const unwrappedArrayAccess = `Awaited<${originalPathAccess}>[number]`;
-            const unwrappedExpression = childExpression.replace(
-              originalPathAccess,
-              unwrappedArrayAccess
-            );
-            fullExpression = `Promise<Array<${unwrappedExpression}>>`;
-          } else {
-            const unwrappedAccess = `Awaited<${originalPathAccess}>`;
-            const unwrappedExpression = childExpression.replace(
-              originalPathAccess,
-              unwrappedAccess
-            );
-            fullExpression = `Promise<${unwrappedExpression}>`;
-          }
-        } else if (isArray) {
-          fullExpression = `Array<${childExpression}>`;
-        } else {
-          fullExpression = childExpression;
-        }
-        nestedProperties.push(`    ${childName}: ${fullExpression};`);
-      }
-    }
-  }
-  if (pickPart.length === 0 && nestedProperties.length === 0) {
-    return "{}";
-  } else if (pickPart.length === 0) {
-    return `{
-${nestedProperties.join("\n")}
-}`;
-  } else if (nestedProperties.length === 0) {
-    return pickPart[0];
-  } else {
-    return `${pickPart[0]} & {
-${nestedProperties.join("\n")}
-}`;
-  }
-}
-function generatePhaseViewStateType(contract, phase, baseTypeName, importResolver, contractPath) {
-  const phaseName = phase === "fast+interactive" ? "Interactive" : pascalCase(phase);
-  const typeName = `${pascalCase(contract.name)}${phaseName}ViewState`;
-  const linkedContext = importResolver && contractPath ? {
-    importResolver,
-    contractDir: contractPath.includes("/") ? contractPath.substring(0, contractPath.lastIndexOf("/")) : "."
-  } : void 0;
-  const { paths, arrays, asyncProps } = extractPropertyPathsAndArrays(
-    contract.tags,
-    phase,
-    [],
-    void 0,
-    void 0,
-    linkedContext
-  );
-  if (paths.length === 0) {
-    return `export type ${typeName} = {};`;
-  }
-  const pathGroups = groupPathsByParent(paths);
-  const arraySet = new Set(arrays.map((a) => a.path));
-  const asyncSet = new Set(asyncProps.map((a) => a.path));
-  const pickExpression = buildPickExpression(
-    baseTypeName,
-    pathGroups,
-    arraySet,
-    asyncSet,
-    contract.tags,
-    [],
-    linkedContext
-  );
-  return `export type ${typeName} = ${pickExpression};`;
-}
-function generateAllPhaseViewStateTypes(contract, baseTypeName, importResolver, contractPath) {
-  const slowType = generatePhaseViewStateType(
-    contract,
-    "slow",
-    baseTypeName,
-    importResolver,
-    contractPath
-  );
-  const fastType = generatePhaseViewStateType(
-    contract,
-    "fast",
-    baseTypeName,
-    importResolver,
-    contractPath
-  );
-  const interactiveType = generatePhaseViewStateType(
-    contract,
-    "fast+interactive",
-    baseTypeName,
-    importResolver,
-    contractPath
-  );
-  return [slowType, fastType, interactiveType].join("\n\n");
-}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -1052,8 +461,8 @@ var __extends$2 = commonjsGlobal && commonjsGlobal.__extends || function() {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-var __assign$2 = commonjsGlobal && commonjsGlobal.__assign || function() {
-  __assign$2 = Object.assign || function(t) {
+var __assign$3 = commonjsGlobal && commonjsGlobal.__assign || function() {
+  __assign$3 = Object.assign || function(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -1062,7 +471,7 @@ var __assign$2 = commonjsGlobal && commonjsGlobal.__assign || function() {
     }
     return t;
   };
-  return __assign$2.apply(this, arguments);
+  return __assign$3.apply(this, arguments);
 };
 Object.defineProperty(node, "__esModule", { value: true });
 node.cloneNode = node.hasChildren = node.isDocument = node.isDirective = node.isComment = node.isText = node.isCDATA = node.isTag = node.Element = node.Document = node.CDATA = node.NodeWithChildren = node.ProcessingInstruction = node.Comment = node.Text = node.DataNode = node.Node = void 0;
@@ -1401,7 +810,7 @@ function cloneNode(node2, recursive) {
     result = new Comment(node2.data);
   } else if (isTag$1(node2)) {
     var children = recursive ? cloneChildren(node2.children) : [];
-    var clone_1 = new Element(node2.name, __assign$2({}, node2.attribs), children);
+    var clone_1 = new Element(node2.name, __assign$3({}, node2.attribs), children);
     children.forEach(function(child) {
       return child.parent = clone_1;
     });
@@ -1409,10 +818,10 @@ function cloneNode(node2, recursive) {
       clone_1.namespace = node2.namespace;
     }
     if (node2["x-attribsNamespace"]) {
-      clone_1["x-attribsNamespace"] = __assign$2({}, node2["x-attribsNamespace"]);
+      clone_1["x-attribsNamespace"] = __assign$3({}, node2["x-attribsNamespace"]);
     }
     if (node2["x-attribsPrefix"]) {
-      clone_1["x-attribsPrefix"] = __assign$2({}, node2["x-attribsPrefix"]);
+      clone_1["x-attribsPrefix"] = __assign$3({}, node2["x-attribsPrefix"]);
     }
     result = clone_1;
   } else if (isCDATA(node2)) {
@@ -2415,8 +1824,8 @@ foreignNames.attributeNames = new Map([
 ].map(function(val) {
   return [val.toLowerCase(), val];
 }));
-var __assign$1 = commonjsGlobal && commonjsGlobal.__assign || function() {
-  __assign$1 = Object.assign || function(t) {
+var __assign$2 = commonjsGlobal && commonjsGlobal.__assign || function() {
+  __assign$2 = Object.assign || function(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -2425,7 +1834,7 @@ var __assign$1 = commonjsGlobal && commonjsGlobal.__assign || function() {
     }
     return t;
   };
-  return __assign$1.apply(this, arguments);
+  return __assign$2.apply(this, arguments);
 };
 var __createBinding$1 = commonjsGlobal && commonjsGlobal.__createBinding || (Object.create ? function(o, m, k, k2) {
   if (k2 === void 0)
@@ -2564,11 +1973,11 @@ function renderTag(elem, opts) {
   if (opts.xmlMode === "foreign") {
     elem.name = (_a = foreignNames_js_1.elementNames.get(elem.name)) !== null && _a !== void 0 ? _a : elem.name;
     if (elem.parent && foreignModeIntegrationPoints.has(elem.parent.name)) {
-      opts = __assign$1(__assign$1({}, opts), { xmlMode: false });
+      opts = __assign$2(__assign$2({}, opts), { xmlMode: false });
     }
   }
   if (!opts.xmlMode && foreignElements.has(elem.name)) {
-    opts = __assign$1(__assign$1({}, opts), { xmlMode: "foreign" });
+    opts = __assign$2(__assign$2({}, opts), { xmlMode: "foreign" });
   }
   var tag = "<".concat(elem.name);
   var attribs = formatAttributes(elem.attribs, opts);
@@ -5301,8 +4710,8 @@ var __extends = commonjsGlobal && commonjsGlobal.__extends || function() {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-var __assign = commonjsGlobal && commonjsGlobal.__assign || function() {
-  __assign = Object.assign || function(t) {
+var __assign$1 = commonjsGlobal && commonjsGlobal.__assign || function() {
+  __assign$1 = Object.assign || function(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -5311,7 +4720,7 @@ var __assign = commonjsGlobal && commonjsGlobal.__assign || function() {
     }
     return t;
   };
-  return __assign.apply(this, arguments);
+  return __assign$1.apply(this, arguments);
 };
 var __spreadArray = commonjsGlobal && commonjsGlobal.__spreadArray || function(to, from, pack) {
   if (pack || arguments.length === 2)
@@ -5505,909 +4914,1658 @@ var HTMLElement = (
       });
       return this;
     };
-    Object.defineProperty(HTMLElement2.prototype, "tagName", {
-      get: function() {
-        return this.rawTagName ? this.rawTagName.toUpperCase() : this.rawTagName;
-      },
-      set: function(newname) {
-        this.rawTagName = newname.toLowerCase();
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "localName", {
-      get: function() {
-        return this.rawTagName.toLowerCase();
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "isVoidElement", {
+    Object.defineProperty(HTMLElement2.prototype, "tagName", {
+      get: function() {
+        return this.rawTagName ? this.rawTagName.toUpperCase() : this.rawTagName;
+      },
+      set: function(newname) {
+        this.rawTagName = newname.toLowerCase();
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "localName", {
+      get: function() {
+        return this.rawTagName.toLowerCase();
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "isVoidElement", {
+      get: function() {
+        return this.voidTag.isVoidElement(this.localName);
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "rawText", {
+      /**
+       * Get escpaed (as-it) text value of current node and its children.
+       * @return {string} text content
+       */
+      get: function() {
+        if (/^br$/i.test(this.rawTagName)) {
+          return "\n";
+        }
+        return this.childNodes.reduce(function(pre, cur) {
+          return pre += cur.rawText;
+        }, "");
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "textContent", {
+      get: function() {
+        return decode(this.rawText);
+      },
+      set: function(val) {
+        var content = [new text_1$1.default(val, this)];
+        this.childNodes = content;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "text", {
+      /**
+       * Get unescaped text value of current node and its children.
+       * @return {string} text content
+       */
+      get: function() {
+        return decode(this.rawText);
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "structuredText", {
+      /**
+       * Get structured Text (with '\n' etc.)
+       * @return {string} structured text
+       */
+      get: function() {
+        var currentBlock = [];
+        var blocks = [currentBlock];
+        function dfs(node2) {
+          if (node2.nodeType === type_1$1.default.ELEMENT_NODE) {
+            if (kBlockElements.has(node2.rawTagName)) {
+              if (currentBlock.length > 0) {
+                blocks.push(currentBlock = []);
+              }
+              node2.childNodes.forEach(dfs);
+              if (currentBlock.length > 0) {
+                blocks.push(currentBlock = []);
+              }
+            } else {
+              node2.childNodes.forEach(dfs);
+            }
+          } else if (node2.nodeType === type_1$1.default.TEXT_NODE) {
+            if (node2.isWhitespace) {
+              currentBlock.prependWhitespace = true;
+            } else {
+              var text2 = node2.trimmedText;
+              if (currentBlock.prependWhitespace) {
+                text2 = " ".concat(text2);
+                currentBlock.prependWhitespace = false;
+              }
+              currentBlock.push(text2);
+            }
+          }
+        }
+        dfs(this);
+        return blocks.map(function(block) {
+          return block.join("").replace(/\s{2,}/g, " ");
+        }).join("\n").replace(/\s+$/, "");
+      },
+      enumerable: false,
+      configurable: true
+    });
+    HTMLElement2.prototype.toString = function() {
+      var tag = this.rawTagName;
+      if (tag) {
+        var attrs = this.rawAttrs ? " ".concat(this.rawAttrs) : "";
+        return this.voidTag.formatNode(tag, attrs, this.innerHTML);
+      }
+      return this.innerHTML;
+    };
+    Object.defineProperty(HTMLElement2.prototype, "innerHTML", {
+      get: function() {
+        return this.childNodes.map(function(child) {
+          return child.toString();
+        }).join("");
+      },
+      set: function(content) {
+        var r = parse$4(content, this._parseOptions);
+        var nodes = r.childNodes.length ? r.childNodes : [new text_1$1.default(content, this)];
+        resetParent(nodes, this);
+        resetParent(this.childNodes, null);
+        this.childNodes = nodes;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    HTMLElement2.prototype.set_content = function(content, options) {
+      if (options === void 0) {
+        options = {};
+      }
+      if (content instanceof node_1$1.default) {
+        content = [content];
+      } else if (typeof content == "string") {
+        options = __assign$1(__assign$1({}, this._parseOptions), options);
+        var r = parse$4(content, options);
+        content = r.childNodes.length ? r.childNodes : [new text_1$1.default(r.innerHTML, this)];
+      }
+      resetParent(this.childNodes, null);
+      resetParent(content, this);
+      this.childNodes = content;
+      return this;
+    };
+    HTMLElement2.prototype.replaceWith = function() {
+      var _this = this;
+      var nodes = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        nodes[_i] = arguments[_i];
+      }
+      var parent = this.parentNode;
+      var content = nodes.map(function(node2) {
+        if (node2 instanceof node_1$1.default) {
+          return [node2];
+        } else if (typeof node2 == "string") {
+          var r = parse$4(node2, _this._parseOptions);
+          return r.childNodes.length ? r.childNodes : [new text_1$1.default(node2, _this)];
+        }
+        return [];
+      }).flat();
+      var idx = parent.childNodes.findIndex(function(child) {
+        return child === _this;
+      });
+      resetParent([this], null);
+      parent.childNodes = __spreadArray(__spreadArray(__spreadArray([], parent.childNodes.slice(0, idx), true), resetParent(content, parent), true), parent.childNodes.slice(idx + 1), true);
+      return this;
+    };
+    Object.defineProperty(HTMLElement2.prototype, "outerHTML", {
       get: function() {
-        return this.voidTag.isVoidElement(this.localName);
+        return this.toString();
       },
       enumerable: false,
       configurable: true
     });
-    Object.defineProperty(HTMLElement2.prototype, "rawText", {
+    HTMLElement2.prototype.trimRight = function(pattern) {
+      for (var i = 0; i < this.childNodes.length; i++) {
+        var childNode = this.childNodes[i];
+        if (childNode.nodeType === type_1$1.default.ELEMENT_NODE) {
+          childNode.trimRight(pattern);
+        } else {
+          var index = childNode.rawText.search(pattern);
+          if (index > -1) {
+            childNode.rawText = childNode.rawText.substr(0, index);
+            this.childNodes.length = i + 1;
+          }
+        }
+      }
+      return this;
+    };
+    Object.defineProperty(HTMLElement2.prototype, "structure", {
       /**
-       * Get escpaed (as-it) text value of current node and its children.
-       * @return {string} text content
+       * Get DOM structure
+       * @return {string} structure
        */
       get: function() {
-        if (/^br$/i.test(this.rawTagName)) {
-          return "\n";
+        var res = [];
+        var indention = 0;
+        function write(str2) {
+          res.push("  ".repeat(indention) + str2);
         }
-        return this.childNodes.reduce(function(pre, cur) {
-          return pre += cur.rawText;
-        }, "");
+        function dfs(node2) {
+          var idStr = node2.id ? "#".concat(node2.id) : "";
+          var classStr = node2.classList.length ? ".".concat(node2.classList.value.join(".")) : "";
+          write("".concat(node2.rawTagName).concat(idStr).concat(classStr));
+          indention++;
+          node2.childNodes.forEach(function(childNode) {
+            if (childNode.nodeType === type_1$1.default.ELEMENT_NODE) {
+              dfs(childNode);
+            } else if (childNode.nodeType === type_1$1.default.TEXT_NODE) {
+              if (!childNode.isWhitespace) {
+                write("#text");
+              }
+            }
+          });
+          indention--;
+        }
+        dfs(this);
+        return res.join("\n");
       },
       enumerable: false,
       configurable: true
     });
-    Object.defineProperty(HTMLElement2.prototype, "textContent", {
+    HTMLElement2.prototype.removeWhitespace = function() {
+      var _this = this;
+      var o = 0;
+      this.childNodes.forEach(function(node2) {
+        if (node2.nodeType === type_1$1.default.TEXT_NODE) {
+          if (node2.isWhitespace) {
+            return;
+          }
+          node2.rawText = node2.trimmedRawText;
+        } else if (node2.nodeType === type_1$1.default.ELEMENT_NODE) {
+          node2.removeWhitespace();
+        }
+        _this.childNodes[o++] = node2;
+      });
+      this.childNodes.length = o;
+      return this;
+    };
+    HTMLElement2.prototype.querySelectorAll = function(selector) {
+      return (0, css_select_1.selectAll)(selector, this, {
+        xmlMode: true,
+        adapter: matcher_1.default
+      });
+    };
+    HTMLElement2.prototype.querySelector = function(selector) {
+      return (0, css_select_1.selectOne)(selector, this, {
+        xmlMode: true,
+        adapter: matcher_1.default
+      });
+    };
+    HTMLElement2.prototype.getElementsByTagName = function(tagName) {
+      var upperCasedTagName = tagName.toUpperCase();
+      var re = [];
+      var stack = [];
+      var currentNodeReference = this;
+      var index = 0;
+      while (index !== void 0) {
+        var child = void 0;
+        do {
+          child = currentNodeReference.childNodes[index++];
+        } while (index < currentNodeReference.childNodes.length && child === void 0);
+        if (child === void 0) {
+          currentNodeReference = currentNodeReference.parentNode;
+          index = stack.pop();
+          continue;
+        }
+        if (child.nodeType === type_1$1.default.ELEMENT_NODE) {
+          if (tagName === "*" || child.tagName === upperCasedTagName)
+            re.push(child);
+          if (child.childNodes.length > 0) {
+            stack.push(index);
+            currentNodeReference = child;
+            index = 0;
+          }
+        }
+      }
+      return re;
+    };
+    HTMLElement2.prototype.getElementById = function(id) {
+      var stack = [];
+      var currentNodeReference = this;
+      var index = 0;
+      while (index !== void 0) {
+        var child = void 0;
+        do {
+          child = currentNodeReference.childNodes[index++];
+        } while (index < currentNodeReference.childNodes.length && child === void 0);
+        if (child === void 0) {
+          currentNodeReference = currentNodeReference.parentNode;
+          index = stack.pop();
+          continue;
+        }
+        if (child.nodeType === type_1$1.default.ELEMENT_NODE) {
+          if (child.id === id) {
+            return child;
+          }
+          if (child.childNodes.length > 0) {
+            stack.push(index);
+            currentNodeReference = child;
+            index = 0;
+          }
+        }
+      }
+      return null;
+    };
+    HTMLElement2.prototype.closest = function(selector) {
+      var mapChild = /* @__PURE__ */ new Map();
+      var el = this;
+      var old = null;
+      function findOne2(test, elems) {
+        var elem = null;
+        for (var i = 0, l = elems.length; i < l && !elem; i++) {
+          var el_1 = elems[i];
+          if (test(el_1)) {
+            elem = el_1;
+          } else {
+            var child = mapChild.get(el_1);
+            if (child) {
+              elem = findOne2(test, [child]);
+            }
+          }
+        }
+        return elem;
+      }
+      while (el) {
+        mapChild.set(el, old);
+        old = el;
+        el = el.parentNode;
+      }
+      el = this;
+      while (el) {
+        var e2 = (0, css_select_1.selectOne)(selector, el, {
+          xmlMode: true,
+          adapter: __assign$1(__assign$1({}, matcher_1.default), { getChildren: function(node2) {
+            var child = mapChild.get(node2);
+            return child && [child];
+          }, getSiblings: function(node2) {
+            return [node2];
+          }, findOne: findOne2, findAll: function() {
+            return [];
+          } })
+        });
+        if (e2) {
+          return e2;
+        }
+        el = el.parentNode;
+      }
+      return null;
+    };
+    HTMLElement2.prototype.appendChild = function(node2) {
+      node2.remove();
+      this.childNodes.push(node2);
+      node2.parentNode = this;
+      return node2;
+    };
+    Object.defineProperty(HTMLElement2.prototype, "firstChild", {
+      /**
+       * Get first child node
+       * @return {Node | undefined} first child node; or undefined if none
+       */
       get: function() {
-        return decode(this.rawText);
-      },
-      set: function(val) {
-        var content = [new text_1$1.default(val, this)];
-        this.childNodes = content;
+        return this.childNodes[0];
       },
       enumerable: false,
       configurable: true
     });
-    Object.defineProperty(HTMLElement2.prototype, "text", {
+    Object.defineProperty(HTMLElement2.prototype, "lastChild", {
       /**
-       * Get unescaped text value of current node and its children.
-       * @return {string} text content
+       * Get last child node
+       * @return {Node | undefined} last child node; or undefined if none
        */
       get: function() {
-        return decode(this.rawText);
+        return (0, back_1.default)(this.childNodes);
       },
       enumerable: false,
       configurable: true
     });
-    Object.defineProperty(HTMLElement2.prototype, "structuredText", {
+    Object.defineProperty(HTMLElement2.prototype, "attrs", {
       /**
-       * Get structured Text (with '\n' etc.)
-       * @return {string} structured text
+       * Get attributes
+       * @access private
+       * @return {Object} parsed and unescaped attributes
        */
       get: function() {
-        var currentBlock = [];
-        var blocks = [currentBlock];
-        function dfs(node2) {
-          if (node2.nodeType === type_1$1.default.ELEMENT_NODE) {
-            if (kBlockElements.has(node2.rawTagName)) {
-              if (currentBlock.length > 0) {
-                blocks.push(currentBlock = []);
-              }
-              node2.childNodes.forEach(dfs);
-              if (currentBlock.length > 0) {
-                blocks.push(currentBlock = []);
-              }
-            } else {
-              node2.childNodes.forEach(dfs);
-            }
-          } else if (node2.nodeType === type_1$1.default.TEXT_NODE) {
-            if (node2.isWhitespace) {
-              currentBlock.prependWhitespace = true;
-            } else {
-              var text2 = node2.trimmedText;
-              if (currentBlock.prependWhitespace) {
-                text2 = " ".concat(text2);
-                currentBlock.prependWhitespace = false;
-              }
-              currentBlock.push(text2);
-            }
-          }
+        if (this._attrs) {
+          return this._attrs;
         }
-        dfs(this);
-        return blocks.map(function(block) {
-          return block.join("").replace(/\s{2,}/g, " ");
-        }).join("\n").replace(/\s+$/, "");
+        this._attrs = {};
+        var attrs = this.rawAttributes;
+        for (var key in attrs) {
+          var val = attrs[key] || "";
+          this._attrs[key.toLowerCase()] = decode(val);
+        }
+        return this._attrs;
       },
       enumerable: false,
       configurable: true
     });
-    HTMLElement2.prototype.toString = function() {
-      var tag = this.rawTagName;
-      if (tag) {
-        var attrs = this.rawAttrs ? " ".concat(this.rawAttrs) : "";
-        return this.voidTag.formatNode(tag, attrs, this.innerHTML);
-      }
-      return this.innerHTML;
-    };
-    Object.defineProperty(HTMLElement2.prototype, "innerHTML", {
+    Object.defineProperty(HTMLElement2.prototype, "attributes", {
       get: function() {
-        return this.childNodes.map(function(child) {
-          return child.toString();
-        }).join("");
+        var ret_attrs = {};
+        var attrs = this.rawAttributes;
+        for (var key in attrs) {
+          var val = attrs[key] || "";
+          ret_attrs[key] = decode(val);
+        }
+        return ret_attrs;
       },
-      set: function(content) {
-        var r = parse$4(content, this._parseOptions);
-        var nodes = r.childNodes.length ? r.childNodes : [new text_1$1.default(content, this)];
-        resetParent(nodes, this);
-        resetParent(this.childNodes, null);
-        this.childNodes = nodes;
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "rawAttributes", {
+      /**
+       * Get escaped (as-is) attributes
+       * @return {Object} parsed attributes
+       */
+      get: function() {
+        if (this._rawAttrs) {
+          return this._rawAttrs;
+        }
+        var attrs = {};
+        if (this.rawAttrs) {
+          var re = /([a-zA-Z()[\]#@$.?:][a-zA-Z0-9-_:()[\]#]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g;
+          var match = void 0;
+          while (match = re.exec(this.rawAttrs)) {
+            var key = match[1];
+            var val = match[2] || null;
+            if (val && (val[0] === "'" || val[0] === '"'))
+              val = val.slice(1, val.length - 1);
+            attrs[key] = attrs[key] || val;
+          }
+        }
+        this._rawAttrs = attrs;
+        return attrs;
       },
       enumerable: false,
       configurable: true
     });
-    HTMLElement2.prototype.set_content = function(content, options) {
-      if (options === void 0) {
-        options = {};
+    HTMLElement2.prototype.removeAttribute = function(key) {
+      var _this = this;
+      var attrs = this.rawAttributes;
+      delete attrs[key];
+      if (this._attrs) {
+        delete this._attrs[key];
       }
-      if (content instanceof node_1$1.default) {
-        content = [content];
-      } else if (typeof content == "string") {
-        options = __assign(__assign({}, this._parseOptions), options);
-        var r = parse$4(content, options);
-        content = r.childNodes.length ? r.childNodes : [new text_1$1.default(r.innerHTML, this)];
+      this.rawAttrs = Object.keys(attrs).map(function(name) {
+        var val = _this.quoteAttribute(attrs[name]);
+        if (val === "null" || val === '""')
+          return name;
+        return "".concat(name, "=").concat(val);
+      }).join(" ");
+      if (key === "id") {
+        this.id = "";
       }
-      resetParent(this.childNodes, null);
-      resetParent(content, this);
-      this.childNodes = content;
       return this;
     };
-    HTMLElement2.prototype.replaceWith = function() {
+    HTMLElement2.prototype.hasAttribute = function(key) {
+      return key.toLowerCase() in this.attrs;
+    };
+    HTMLElement2.prototype.getAttribute = function(key) {
+      return this.attrs[key.toLowerCase()];
+    };
+    HTMLElement2.prototype.setAttribute = function(key, value) {
       var _this = this;
-      var nodes = [];
-      for (var _i = 0; _i < arguments.length; _i++) {
-        nodes[_i] = arguments[_i];
+      if (arguments.length < 2) {
+        throw new Error("Failed to execute 'setAttribute' on 'Element'");
       }
-      var parent = this.parentNode;
-      var content = nodes.map(function(node2) {
-        if (node2 instanceof node_1$1.default) {
-          return [node2];
-        } else if (typeof node2 == "string") {
-          var r = parse$4(node2, _this._parseOptions);
-          return r.childNodes.length ? r.childNodes : [new text_1$1.default(node2, _this)];
+      var k2 = key.toLowerCase();
+      var attrs = this.rawAttributes;
+      for (var k in attrs) {
+        if (k.toLowerCase() === k2) {
+          key = k;
+          break;
         }
-        return [];
-      }).flat();
-      var idx = parent.childNodes.findIndex(function(child) {
-        return child === _this;
-      });
-      resetParent([this], null);
-      parent.childNodes = __spreadArray(__spreadArray(__spreadArray([], parent.childNodes.slice(0, idx), true), resetParent(content, parent), true), parent.childNodes.slice(idx + 1), true);
+      }
+      attrs[key] = String(value);
+      if (this._attrs) {
+        this._attrs[k2] = decode(attrs[key]);
+      }
+      this.rawAttrs = Object.keys(attrs).map(function(name) {
+        var val = _this.quoteAttribute(attrs[name]);
+        if (val === "null" || val === '""')
+          return name;
+        return "".concat(name, "=").concat(val);
+      }).join(" ");
+      if (key === "id") {
+        this.id = value;
+      }
       return this;
     };
-    Object.defineProperty(HTMLElement2.prototype, "outerHTML", {
+    HTMLElement2.prototype.setAttributes = function(attributes2) {
+      var _this = this;
+      if (this._attrs) {
+        delete this._attrs;
+      }
+      if (this._rawAttrs) {
+        delete this._rawAttrs;
+      }
+      this.rawAttrs = Object.keys(attributes2).map(function(name) {
+        var val = attributes2[name];
+        if (val === "null" || val === '""')
+          return name;
+        return "".concat(name, "=").concat(_this.quoteAttribute(String(val)));
+      }).join(" ");
+      return this;
+    };
+    HTMLElement2.prototype.insertAdjacentHTML = function(where, html2) {
+      var _a, _b, _c;
+      var _this = this;
+      if (arguments.length < 2) {
+        throw new Error("2 arguments required");
+      }
+      var p = parse$4(html2, this._parseOptions);
+      if (where === "afterend") {
+        var idx = this.parentNode.childNodes.findIndex(function(child) {
+          return child === _this;
+        });
+        resetParent(p.childNodes, this.parentNode);
+        (_a = this.parentNode.childNodes).splice.apply(_a, __spreadArray([idx + 1, 0], p.childNodes, false));
+      } else if (where === "afterbegin") {
+        resetParent(p.childNodes, this);
+        (_b = this.childNodes).unshift.apply(_b, p.childNodes);
+      } else if (where === "beforeend") {
+        p.childNodes.forEach(function(n) {
+          _this.appendChild(n);
+        });
+      } else if (where === "beforebegin") {
+        var idx = this.parentNode.childNodes.findIndex(function(child) {
+          return child === _this;
+        });
+        resetParent(p.childNodes, this.parentNode);
+        (_c = this.parentNode.childNodes).splice.apply(_c, __spreadArray([idx, 0], p.childNodes, false));
+      } else {
+        throw new Error("The value provided ('".concat(where, "') is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'"));
+      }
+      return this;
+    };
+    Object.defineProperty(HTMLElement2.prototype, "nextSibling", {
       get: function() {
-        return this.toString();
+        if (this.parentNode) {
+          var children = this.parentNode.childNodes;
+          var i = 0;
+          while (i < children.length) {
+            var child = children[i++];
+            if (this === child)
+              return children[i] || null;
+          }
+          return null;
+        }
       },
       enumerable: false,
       configurable: true
     });
-    HTMLElement2.prototype.trimRight = function(pattern) {
-      for (var i = 0; i < this.childNodes.length; i++) {
-        var childNode = this.childNodes[i];
-        if (childNode.nodeType === type_1$1.default.ELEMENT_NODE) {
-          childNode.trimRight(pattern);
-        } else {
-          var index = childNode.rawText.search(pattern);
-          if (index > -1) {
-            childNode.rawText = childNode.rawText.substr(0, index);
-            this.childNodes.length = i + 1;
-          }
-        }
-      }
-      return this;
-    };
-    Object.defineProperty(HTMLElement2.prototype, "structure", {
-      /**
-       * Get DOM structure
-       * @return {string} structure
-       */
+    Object.defineProperty(HTMLElement2.prototype, "nextElementSibling", {
       get: function() {
-        var res = [];
-        var indention = 0;
-        function write(str2) {
-          res.push("  ".repeat(indention) + str2);
-        }
-        function dfs(node2) {
-          var idStr = node2.id ? "#".concat(node2.id) : "";
-          var classStr = node2.classList.length ? ".".concat(node2.classList.value.join(".")) : "";
-          write("".concat(node2.rawTagName).concat(idStr).concat(classStr));
-          indention++;
-          node2.childNodes.forEach(function(childNode) {
-            if (childNode.nodeType === type_1$1.default.ELEMENT_NODE) {
-              dfs(childNode);
-            } else if (childNode.nodeType === type_1$1.default.TEXT_NODE) {
-              if (!childNode.isWhitespace) {
-                write("#text");
+        if (this.parentNode) {
+          var children = this.parentNode.childNodes;
+          var i = 0;
+          var find2 = false;
+          while (i < children.length) {
+            var child = children[i++];
+            if (find2) {
+              if (child instanceof HTMLElement2) {
+                return child || null;
               }
+            } else if (this === child) {
+              find2 = true;
             }
-          });
-          indention--;
+          }
+          return null;
+        }
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "previousSibling", {
+      get: function() {
+        if (this.parentNode) {
+          var children = this.parentNode.childNodes;
+          var i = children.length;
+          while (i > 0) {
+            var child = children[--i];
+            if (this === child)
+              return children[i - 1] || null;
+          }
+          return null;
         }
-        dfs(this);
-        return res.join("\n");
       },
       enumerable: false,
       configurable: true
     });
-    HTMLElement2.prototype.removeWhitespace = function() {
-      var _this = this;
-      var o = 0;
-      this.childNodes.forEach(function(node2) {
-        if (node2.nodeType === type_1$1.default.TEXT_NODE) {
-          if (node2.isWhitespace) {
-            return;
+    Object.defineProperty(HTMLElement2.prototype, "previousElementSibling", {
+      get: function() {
+        if (this.parentNode) {
+          var children = this.parentNode.childNodes;
+          var i = children.length;
+          var find2 = false;
+          while (i > 0) {
+            var child = children[--i];
+            if (find2) {
+              if (child instanceof HTMLElement2) {
+                return child || null;
+              }
+            } else if (this === child) {
+              find2 = true;
+            }
           }
-          node2.rawText = node2.trimmedRawText;
-        } else if (node2.nodeType === type_1$1.default.ELEMENT_NODE) {
-          node2.removeWhitespace();
+          return null;
         }
-        _this.childNodes[o++] = node2;
-      });
-      this.childNodes.length = o;
-      return this;
-    };
-    HTMLElement2.prototype.querySelectorAll = function(selector) {
-      return (0, css_select_1.selectAll)(selector, this, {
-        xmlMode: true,
-        adapter: matcher_1.default
-      });
-    };
-    HTMLElement2.prototype.querySelector = function(selector) {
-      return (0, css_select_1.selectOne)(selector, this, {
-        xmlMode: true,
-        adapter: matcher_1.default
-      });
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(HTMLElement2.prototype, "classNames", {
+      get: function() {
+        return this.classList.toString();
+      },
+      enumerable: false,
+      configurable: true
+    });
+    HTMLElement2.prototype.clone = function() {
+      return parse$4(this.toString(), this._parseOptions).firstChild;
     };
-    HTMLElement2.prototype.getElementsByTagName = function(tagName) {
-      var upperCasedTagName = tagName.toUpperCase();
-      var re = [];
-      var stack = [];
-      var currentNodeReference = this;
-      var index = 0;
-      while (index !== void 0) {
-        var child = void 0;
-        do {
-          child = currentNodeReference.childNodes[index++];
-        } while (index < currentNodeReference.childNodes.length && child === void 0);
-        if (child === void 0) {
-          currentNodeReference = currentNodeReference.parentNode;
-          index = stack.pop();
-          continue;
-        }
-        if (child.nodeType === type_1$1.default.ELEMENT_NODE) {
-          if (tagName === "*" || child.tagName === upperCasedTagName)
-            re.push(child);
-          if (child.childNodes.length > 0) {
-            stack.push(index);
-            currentNodeReference = child;
-            index = 0;
-          }
+    return HTMLElement2;
+  }(node_1$1.default)
+);
+html.default = HTMLElement;
+var kMarkupPattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/g;
+var kAttributePattern = /(?:^|\s)(id|class)\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+)/gi;
+var kElementsClosedByOpening = {
+  li: { li: true, LI: true },
+  LI: { li: true, LI: true },
+  p: { p: true, div: true, P: true, DIV: true },
+  P: { p: true, div: true, P: true, DIV: true },
+  b: { div: true, DIV: true },
+  B: { div: true, DIV: true },
+  td: { td: true, th: true, TD: true, TH: true },
+  TD: { td: true, th: true, TD: true, TH: true },
+  th: { td: true, th: true, TD: true, TH: true },
+  TH: { td: true, th: true, TD: true, TH: true },
+  h1: { h1: true, H1: true },
+  H1: { h1: true, H1: true },
+  h2: { h2: true, H2: true },
+  H2: { h2: true, H2: true },
+  h3: { h3: true, H3: true },
+  H3: { h3: true, H3: true },
+  h4: { h4: true, H4: true },
+  H4: { h4: true, H4: true },
+  h5: { h5: true, H5: true },
+  H5: { h5: true, H5: true },
+  h6: { h6: true, H6: true },
+  H6: { h6: true, H6: true }
+};
+var kElementsClosedByClosing = {
+  li: { ul: true, ol: true, UL: true, OL: true },
+  LI: { ul: true, ol: true, UL: true, OL: true },
+  a: { div: true, DIV: true },
+  A: { div: true, DIV: true },
+  b: { div: true, DIV: true },
+  B: { div: true, DIV: true },
+  i: { div: true, DIV: true },
+  I: { div: true, DIV: true },
+  p: { div: true, DIV: true },
+  P: { div: true, DIV: true },
+  td: { tr: true, table: true, TR: true, TABLE: true },
+  TD: { tr: true, table: true, TR: true, TABLE: true },
+  th: { tr: true, table: true, TR: true, TABLE: true },
+  TH: { tr: true, table: true, TR: true, TABLE: true }
+};
+var frameflag = "documentfragmentcontainer";
+function base_parse(data, options) {
+  var _a, _b;
+  if (options === void 0) {
+    options = {};
+  }
+  var voidTag2 = new void_tag_1.default((_a = options === null || options === void 0 ? void 0 : options.voidTag) === null || _a === void 0 ? void 0 : _a.closingSlash, (_b = options === null || options === void 0 ? void 0 : options.voidTag) === null || _b === void 0 ? void 0 : _b.tags);
+  var elements = options.blockTextElements || {
+    script: true,
+    noscript: true,
+    style: true,
+    pre: true
+  };
+  var element_names = Object.keys(elements);
+  var kBlockTextElements = element_names.map(function(it) {
+    return new RegExp("^".concat(it, "$"), "i");
+  });
+  var kIgnoreElements = element_names.filter(function(it) {
+    return Boolean(elements[it]);
+  }).map(function(it) {
+    return new RegExp("^".concat(it, "$"), "i");
+  });
+  function element_should_be_ignore(tag) {
+    return kIgnoreElements.some(function(it) {
+      return it.test(tag);
+    });
+  }
+  function is_block_text_element(tag) {
+    return kBlockTextElements.some(function(it) {
+      return it.test(tag);
+    });
+  }
+  var createRange = function(startPos, endPos) {
+    return [startPos - frameFlagOffset, endPos - frameFlagOffset];
+  };
+  var root = new HTMLElement(null, {}, "", null, [0, data.length], voidTag2, options);
+  var currentParent = root;
+  var stack = [root];
+  var lastTextPos = -1;
+  var noNestedTagIndex = void 0;
+  var match;
+  data = "<".concat(frameflag, ">").concat(data, "</").concat(frameflag, ">");
+  var lowerCaseTagName = options.lowerCaseTagName, fixNestedATags = options.fixNestedATags;
+  var dataEndPos = data.length - (frameflag.length + 2);
+  var frameFlagOffset = frameflag.length + 2;
+  while (match = kMarkupPattern.exec(data)) {
+    var matchText = match[0], leadingSlash = match[1], tagName = match[2], attributes2 = match[3], closingSlash = match[4];
+    var matchLength = matchText.length;
+    var tagStartPos = kMarkupPattern.lastIndex - matchLength;
+    var tagEndPos = kMarkupPattern.lastIndex;
+    if (lastTextPos > -1) {
+      if (lastTextPos + matchLength < tagEndPos) {
+        var text2 = data.substring(lastTextPos, tagStartPos);
+        currentParent.appendChild(new text_1$1.default(text2, currentParent, createRange(lastTextPos, tagStartPos)));
+      }
+    }
+    lastTextPos = kMarkupPattern.lastIndex;
+    if (tagName === frameflag)
+      continue;
+    if (matchText[1] === "!") {
+      if (options.comment) {
+        var text2 = data.substring(tagStartPos + 4, tagEndPos - 3);
+        currentParent.appendChild(new comment_1$1.default(text2, currentParent, createRange(tagStartPos, tagEndPos)));
+      }
+      continue;
+    }
+    if (lowerCaseTagName)
+      tagName = tagName.toLowerCase();
+    if (!leadingSlash) {
+      var attrs = {};
+      for (var attMatch = void 0; attMatch = kAttributePattern.exec(attributes2); ) {
+        var key = attMatch[1], val = attMatch[2];
+        var isQuoted = val[0] === "'" || val[0] === '"';
+        attrs[key.toLowerCase()] = isQuoted ? val.slice(1, val.length - 1) : val;
+      }
+      var parentTagName = currentParent.rawTagName;
+      if (!closingSlash && kElementsClosedByOpening[parentTagName]) {
+        if (kElementsClosedByOpening[parentTagName][tagName]) {
+          stack.pop();
+          currentParent = (0, back_1.default)(stack);
         }
       }
-      return re;
-    };
-    HTMLElement2.prototype.getElementById = function(id) {
-      var stack = [];
-      var currentNodeReference = this;
-      var index = 0;
-      while (index !== void 0) {
-        var child = void 0;
-        do {
-          child = currentNodeReference.childNodes[index++];
-        } while (index < currentNodeReference.childNodes.length && child === void 0);
-        if (child === void 0) {
-          currentNodeReference = currentNodeReference.parentNode;
-          index = stack.pop();
-          continue;
+      if (fixNestedATags && (tagName === "a" || tagName === "A")) {
+        if (noNestedTagIndex !== void 0) {
+          stack.splice(noNestedTagIndex);
+          currentParent = (0, back_1.default)(stack);
         }
-        if (child.nodeType === type_1$1.default.ELEMENT_NODE) {
-          if (child.id === id) {
-            return child;
-          }
-          if (child.childNodes.length > 0) {
-            stack.push(index);
-            currentNodeReference = child;
-            index = 0;
+        noNestedTagIndex = stack.length;
+      }
+      var tagEndPos_1 = kMarkupPattern.lastIndex;
+      var tagStartPos_1 = tagEndPos_1 - matchLength;
+      currentParent = currentParent.appendChild(
+        // Initialize range (end position updated later for closed tags)
+        new HTMLElement(tagName, attrs, attributes2.slice(1), null, createRange(tagStartPos_1, tagEndPos_1), voidTag2, options)
+      );
+      stack.push(currentParent);
+      if (is_block_text_element(tagName)) {
+        var closeMarkup = "</".concat(tagName, ">");
+        var closeIndex = lowerCaseTagName ? data.toLocaleLowerCase().indexOf(closeMarkup, kMarkupPattern.lastIndex) : data.indexOf(closeMarkup, kMarkupPattern.lastIndex);
+        var textEndPos = closeIndex === -1 ? dataEndPos : closeIndex;
+        if (element_should_be_ignore(tagName)) {
+          var text2 = data.substring(tagEndPos_1, textEndPos);
+          if (text2.length > 0 && /\S/.test(text2)) {
+            currentParent.appendChild(new text_1$1.default(text2, currentParent, createRange(tagEndPos_1, textEndPos)));
           }
         }
+        if (closeIndex === -1) {
+          lastTextPos = kMarkupPattern.lastIndex = data.length + 1;
+        } else {
+          lastTextPos = kMarkupPattern.lastIndex = closeIndex + closeMarkup.length;
+          leadingSlash = "/";
+        }
       }
-      return null;
-    };
-    HTMLElement2.prototype.closest = function(selector) {
-      var mapChild = /* @__PURE__ */ new Map();
-      var el = this;
-      var old = null;
-      function findOne2(test, elems) {
-        var elem = null;
-        for (var i = 0, l = elems.length; i < l && !elem; i++) {
-          var el_1 = elems[i];
-          if (test(el_1)) {
-            elem = el_1;
-          } else {
-            var child = mapChild.get(el_1);
-            if (child) {
-              elem = findOne2(test, [child]);
+    }
+    if (leadingSlash || closingSlash || voidTag2.isVoidElement(tagName)) {
+      while (true) {
+        if (noNestedTagIndex != null && (tagName === "a" || tagName === "A"))
+          noNestedTagIndex = void 0;
+        if (currentParent.rawTagName === tagName) {
+          currentParent.range[1] = createRange(-1, Math.max(lastTextPos, tagEndPos))[1];
+          stack.pop();
+          currentParent = (0, back_1.default)(stack);
+          break;
+        } else {
+          var parentTagName = currentParent.tagName;
+          if (kElementsClosedByClosing[parentTagName]) {
+            if (kElementsClosedByClosing[parentTagName][tagName]) {
+              stack.pop();
+              currentParent = (0, back_1.default)(stack);
+              continue;
             }
           }
+          break;
         }
-        return elem;
-      }
-      while (el) {
-        mapChild.set(el, old);
-        old = el;
-        el = el.parentNode;
-      }
-      el = this;
-      while (el) {
-        var e2 = (0, css_select_1.selectOne)(selector, el, {
-          xmlMode: true,
-          adapter: __assign(__assign({}, matcher_1.default), { getChildren: function(node2) {
-            var child = mapChild.get(node2);
-            return child && [child];
-          }, getSiblings: function(node2) {
-            return [node2];
-          }, findOne: findOne2, findAll: function() {
-            return [];
-          } })
-        });
-        if (e2) {
-          return e2;
-        }
-        el = el.parentNode;
       }
-      return null;
-    };
-    HTMLElement2.prototype.appendChild = function(node2) {
-      node2.remove();
-      this.childNodes.push(node2);
-      node2.parentNode = this;
-      return node2;
-    };
-    Object.defineProperty(HTMLElement2.prototype, "firstChild", {
-      /**
-       * Get first child node
-       * @return {Node | undefined} first child node; or undefined if none
-       */
-      get: function() {
-        return this.childNodes[0];
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "lastChild", {
-      /**
-       * Get last child node
-       * @return {Node | undefined} last child node; or undefined if none
-       */
-      get: function() {
-        return (0, back_1.default)(this.childNodes);
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "attrs", {
-      /**
-       * Get attributes
-       * @access private
-       * @return {Object} parsed and unescaped attributes
-       */
-      get: function() {
-        if (this._attrs) {
-          return this._attrs;
-        }
-        this._attrs = {};
-        var attrs = this.rawAttributes;
-        for (var key in attrs) {
-          var val = attrs[key] || "";
-          this._attrs[key.toLowerCase()] = decode(val);
-        }
-        return this._attrs;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "attributes", {
-      get: function() {
-        var ret_attrs = {};
-        var attrs = this.rawAttributes;
-        for (var key in attrs) {
-          var val = attrs[key] || "";
-          ret_attrs[key] = decode(val);
+    }
+  }
+  return stack;
+}
+html.base_parse = base_parse;
+function parse$4(data, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var stack = base_parse(data, options);
+  var root = stack[0];
+  var _loop_1 = function() {
+    var last = stack.pop();
+    var oneBefore = (0, back_1.default)(stack);
+    if (last.parentNode && last.parentNode.parentNode) {
+      if (last.parentNode === oneBefore && last.tagName === oneBefore.tagName) {
+        if (options.parseNoneClosedTags !== true) {
+          oneBefore.removeChild(last);
+          last.childNodes.forEach(function(child) {
+            oneBefore.parentNode.appendChild(child);
+          });
+          stack.pop();
         }
-        return ret_attrs;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "rawAttributes", {
-      /**
-       * Get escaped (as-is) attributes
-       * @return {Object} parsed attributes
-       */
-      get: function() {
-        if (this._rawAttrs) {
-          return this._rawAttrs;
+      } else {
+        if (options.parseNoneClosedTags !== true) {
+          oneBefore.removeChild(last);
+          last.childNodes.forEach(function(child) {
+            oneBefore.appendChild(child);
+          });
         }
-        var attrs = {};
-        if (this.rawAttrs) {
-          var re = /([a-zA-Z()[\]#@$.?:][a-zA-Z0-9-_:()[\]#]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g;
-          var match = void 0;
-          while (match = re.exec(this.rawAttrs)) {
-            var key = match[1];
-            var val = match[2] || null;
-            if (val && (val[0] === "'" || val[0] === '"'))
-              val = val.slice(1, val.length - 1);
-            attrs[key] = attrs[key] || val;
-          }
+      }
+    }
+  };
+  while (stack.length > 1) {
+    _loop_1();
+  }
+  return root;
+}
+html.parse = parse$4;
+function resetParent(nodes, parent) {
+  return nodes.map(function(node2) {
+    node2.parentNode = parent;
+    return node2;
+  });
+}
+var parse$3 = {};
+(function(exports) {
+  Object.defineProperty(exports, "__esModule", { value: true });
+  exports.default = void 0;
+  var html_12 = html;
+  Object.defineProperty(exports, "default", { enumerable: true, get: function() {
+    return html_12.parse;
+  } });
+})(parse$3);
+var valid$1 = {};
+Object.defineProperty(valid$1, "__esModule", { value: true });
+var html_1$1 = html;
+function valid(data, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var stack = (0, html_1$1.base_parse)(data, options);
+  return Boolean(stack.length === 1);
+}
+valid$1.default = valid;
+var __importDefault$1 = commonjsGlobal && commonjsGlobal.__importDefault || function(mod) {
+  return mod && mod.__esModule ? mod : { "default": mod };
+};
+Object.defineProperty(dist, "__esModule", { value: true });
+var NodeType = dist.NodeType = dist.TextNode = dist.Node = dist.valid = dist.CommentNode = dist.HTMLElement = parse_2 = dist.parse = void 0;
+var comment_1 = __importDefault$1(comment);
+dist.CommentNode = comment_1.default;
+var html_1 = __importDefault$1(html);
+dist.HTMLElement = html_1.default;
+var node_1 = __importDefault$1(node$1);
+dist.Node = node_1.default;
+var text_1 = __importDefault$1(text);
+dist.TextNode = text_1.default;
+var type_1 = __importDefault$1(type$1);
+NodeType = dist.NodeType = type_1.default;
+var parse_1 = __importDefault$1(parse$3);
+var valid_1 = __importDefault$1(valid$1);
+dist.valid = valid_1.default;
+function parse$2(data, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return (0, parse_1.default)(data, options);
+}
+dist.default = parse$2;
+var parse_2 = dist.parse = parse$2;
+parse$2.parse = parse_1.default;
+parse$2.HTMLElement = html_1.default;
+parse$2.CommentNode = comment_1.default;
+parse$2.valid = valid_1.default;
+parse$2.Node = node_1.default;
+parse$2.TextNode = text_1.default;
+parse$2.NodeType = type_1.default;
+const COORD_ATTR$1 = "jay-coordinate-base";
+const SCOPE_ATTR = "jay-scope";
+function assignCoordinatesToJayHtml(jayHtml, headlessContractNames) {
+  const root = parse_2(jayHtml, {
+    comment: true,
+    blockTextElements: { script: true, style: true }
+  });
+  const body = root.querySelector("body");
+  if (!body)
+    return jayHtml;
+  assignCoordinates(body, { headlessContractNames });
+  return root.toString();
+}
+function nextScopeId(counter) {
+  return `S${counter.next++}`;
+}
+function assignCoordinates(body, options) {
+  if (!options._refCounters)
+    options._refCounters = /* @__PURE__ */ new Map();
+  const rootChildren = body.childNodes.filter(
+    (n) => n.nodeType === NodeType.ELEMENT_NODE
+  );
+  if (rootChildren.length === 0)
+    return { debugHtml: body.toString() };
+  const counter = { next: 0 };
+  const rootScopeId = nextScopeId(counter);
+  const rootElement = rootChildren[0];
+  const rootCoord = `${rootScopeId}/0`;
+  rootElement.setAttribute(COORD_ATTR$1, rootCoord);
+  walkChildren(rootElement, rootCoord, rootScopeId, options, counter);
+  return { debugHtml: body.toString() };
+}
+function walkChildren(parent, parentCoord, scopeId, options, counter) {
+  let childCounter = 0;
+  for (const child of parent.childNodes) {
+    if (child.nodeType !== NodeType.ELEMENT_NODE)
+      continue;
+    const element = child;
+    const tagName = element.tagName?.toLowerCase();
+    if (tagName?.startsWith("jay:")) {
+      const contractName = tagName.substring(4);
+      if (options.headlessContractNames.has(contractName)) {
+        let ref = element.getAttribute("ref");
+        if (!ref) {
+          const idx = options._refCounters.get(contractName) ?? 0;
+          options._refCounters.set(contractName, idx + 1);
+          ref = `AR${idx}`;
+          element.setAttribute("ref", ref);
         }
-        this._rawAttrs = attrs;
-        return attrs;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    HTMLElement2.prototype.removeAttribute = function(key) {
-      var _this = this;
-      var attrs = this.rawAttributes;
-      delete attrs[key];
-      if (this._attrs) {
-        delete this._attrs[key];
+        assignHeadlessInstance(
+          element,
+          contractName,
+          ref,
+          parentCoord,
+          scopeId,
+          options,
+          counter
+        );
+        continue;
       }
-      this.rawAttrs = Object.keys(attrs).map(function(name) {
-        var val = _this.quoteAttribute(attrs[name]);
-        if (val === "null" || val === '""')
-          return name;
-        return "".concat(name, "=").concat(val);
-      }).join(" ");
-      if (key === "id") {
-        this.id = "";
+    }
+    const forEachAttr = element.getAttribute("forEach");
+    if (forEachAttr) {
+      const trackBy = element.getAttribute("trackBy");
+      if (trackBy) {
+        const coord2 = `${parentCoord}/${childCounter}`;
+        element.setAttribute(COORD_ATTR$1, coord2);
+        childCounter++;
+        const itemScopeId = nextScopeId(counter);
+        element.setAttribute(SCOPE_ATTR, itemScopeId);
+        walkForEachChildren(element, itemScopeId, options, counter);
+        continue;
       }
-      return this;
-    };
-    HTMLElement2.prototype.hasAttribute = function(key) {
-      return key.toLowerCase() in this.attrs;
-    };
-    HTMLElement2.prototype.getAttribute = function(key) {
-      return this.attrs[key.toLowerCase()];
-    };
-    HTMLElement2.prototype.setAttribute = function(key, value) {
-      var _this = this;
-      if (arguments.length < 2) {
-        throw new Error("Failed to execute 'setAttribute' on 'Element'");
+    }
+    const slowForEachAttr = element.getAttribute("slowForEach");
+    if (slowForEachAttr) {
+      const jayTrackBy = element.getAttribute("jayTrackBy");
+      if (jayTrackBy) {
+        const itemScopeId = nextScopeId(counter);
+        element.setAttribute(SCOPE_ATTR, itemScopeId);
+        const itemCoord = `${itemScopeId}/0`;
+        element.setAttribute(COORD_ATTR$1, itemCoord);
+        walkChildren(element, itemCoord, itemScopeId, options, counter);
+        continue;
       }
-      var k2 = key.toLowerCase();
-      var attrs = this.rawAttributes;
-      for (var k in attrs) {
-        if (k.toLowerCase() === k2) {
-          key = k;
-          break;
+    }
+    const coord = `${parentCoord}/${childCounter}`;
+    element.setAttribute(COORD_ATTR$1, coord);
+    childCounter++;
+    walkChildren(element, coord, scopeId, options, counter);
+  }
+}
+function assignHeadlessInstance(element, contractName, ref, parentCoord, parentScopeId, options, counter) {
+  const instanceCoord = `${parentCoord}/${contractName}:${ref}`;
+  element.setAttribute(COORD_ATTR$1, instanceCoord);
+  const childScopeId = nextScopeId(counter);
+  element.setAttribute(SCOPE_ATTR, childScopeId);
+  const significantChildren = element.childNodes.filter(
+    (n) => n.nodeType === NodeType.ELEMENT_NODE || n.nodeType === NodeType.TEXT_NODE && (n.innerText || "").trim() !== ""
+  );
+  if (significantChildren.length > 1) {
+    const wrapper = parse_2("<div></div>").querySelector("div");
+    const children = [...element.childNodes];
+    element.innerHTML = "";
+    children.forEach((child) => wrapper.appendChild(child));
+    element.appendChild(wrapper);
+  }
+  walkChildren(element, childScopeId, childScopeId, options, counter);
+}
+function walkForEachChildren(parent, itemScopeId, options, counter) {
+  let childCounter = 0;
+  for (const child of parent.childNodes) {
+    if (child.nodeType !== NodeType.ELEMENT_NODE)
+      continue;
+    const element = child;
+    const tagName = element.tagName?.toLowerCase();
+    if (tagName?.startsWith("jay:")) {
+      const contractName = tagName.substring(4);
+      if (options.headlessContractNames.has(contractName)) {
+        let ref = element.getAttribute("ref");
+        if (!ref) {
+          const counterKey = `forEach/${contractName}`;
+          const idx = options._refCounters.get(counterKey) ?? 0;
+          options._refCounters.set(counterKey, idx + 1);
+          ref = `AR${idx}`;
+          element.setAttribute("ref", ref);
         }
+        assignHeadlessInstance(
+          element,
+          contractName,
+          ref,
+          itemScopeId,
+          itemScopeId,
+          options,
+          counter
+        );
+        continue;
       }
-      attrs[key] = String(value);
-      if (this._attrs) {
-        this._attrs[k2] = decode(attrs[key]);
-      }
-      this.rawAttrs = Object.keys(attrs).map(function(name) {
-        var val = _this.quoteAttribute(attrs[name]);
-        if (val === "null" || val === '""')
-          return name;
-        return "".concat(name, "=").concat(val);
-      }).join(" ");
-      if (key === "id") {
-        this.id = value;
-      }
-      return this;
-    };
-    HTMLElement2.prototype.setAttributes = function(attributes2) {
-      var _this = this;
-      if (this._attrs) {
-        delete this._attrs;
-      }
-      if (this._rawAttrs) {
-        delete this._rawAttrs;
-      }
-      this.rawAttrs = Object.keys(attributes2).map(function(name) {
-        var val = attributes2[name];
-        if (val === "null" || val === '""')
-          return name;
-        return "".concat(name, "=").concat(_this.quoteAttribute(String(val)));
-      }).join(" ");
-      return this;
-    };
-    HTMLElement2.prototype.insertAdjacentHTML = function(where, html2) {
-      var _a, _b, _c;
-      var _this = this;
-      if (arguments.length < 2) {
-        throw new Error("2 arguments required");
+    }
+    const forEachAttr = element.getAttribute("forEach");
+    if (forEachAttr) {
+      const trackBy = element.getAttribute("trackBy");
+      if (trackBy) {
+        const coord2 = `${itemScopeId}/${childCounter}`;
+        element.setAttribute(COORD_ATTR$1, coord2);
+        childCounter++;
+        const nestedItemScopeId = nextScopeId(counter);
+        element.setAttribute(SCOPE_ATTR, nestedItemScopeId);
+        walkForEachChildren(element, nestedItemScopeId, options, counter);
+        continue;
       }
-      var p = parse$4(html2, this._parseOptions);
-      if (where === "afterend") {
-        var idx = this.parentNode.childNodes.findIndex(function(child) {
-          return child === _this;
-        });
-        resetParent(p.childNodes, this.parentNode);
-        (_a = this.parentNode.childNodes).splice.apply(_a, __spreadArray([idx + 1, 0], p.childNodes, false));
-      } else if (where === "afterbegin") {
-        resetParent(p.childNodes, this);
-        (_b = this.childNodes).unshift.apply(_b, p.childNodes);
-      } else if (where === "beforeend") {
-        p.childNodes.forEach(function(n) {
-          _this.appendChild(n);
-        });
-      } else if (where === "beforebegin") {
-        var idx = this.parentNode.childNodes.findIndex(function(child) {
-          return child === _this;
+    }
+    const coord = `${itemScopeId}/${childCounter}`;
+    element.setAttribute(COORD_ATTR$1, coord);
+    childCounter++;
+    walkChildren(element, coord, itemScopeId, options, counter);
+  }
+}
+var ContractTagType = /* @__PURE__ */ ((ContractTagType2) => {
+  ContractTagType2[ContractTagType2["data"] = 0] = "data";
+  ContractTagType2[ContractTagType2["interactive"] = 1] = "interactive";
+  ContractTagType2[ContractTagType2["variant"] = 2] = "variant";
+  ContractTagType2[ContractTagType2["subContract"] = 3] = "subContract";
+  return ContractTagType2;
+})(ContractTagType || {});
+const PHASE_ORDER = {
+  slow: 0,
+  fast: 1,
+  "fast+interactive": 2
+};
+const DEFAULT_PHASE = "slow";
+function getEffectivePhase(tag, parentPhase) {
+  if (tag.type.includes(ContractTagType.interactive)) {
+    return "fast+interactive";
+  }
+  if (tag.phase) {
+    return tag.phase;
+  }
+  if (parentPhase) {
+    return parentPhase;
+  }
+  return DEFAULT_PHASE;
+}
+function isPhaseCompatible(childPhase, parentPhase) {
+  return PHASE_ORDER[childPhase] >= PHASE_ORDER[parentPhase];
+}
+function isTagInPhase(tag, targetPhase, parentPhase) {
+  if (tag.type.includes(ContractTagType.interactive) && !tag.dataType) {
+    return false;
+  }
+  const effectivePhase = getEffectivePhase(tag, parentPhase);
+  return effectivePhase === targetPhase;
+}
+function validateTagPhases(tag, parentPhase, tagPath = "") {
+  const validations = [];
+  const currentPath = tagPath ? `${tagPath}.${tag.tag}` : tag.tag;
+  const effectivePhase = getEffectivePhase(tag, parentPhase);
+  if (parentPhase && !isPhaseCompatible(effectivePhase, parentPhase)) {
+    validations.push(
+      `Tag [${currentPath}] has phase [${effectivePhase}] which is earlier than parent phase [${parentPhase}]. Child phases must be same or later than parent (slow < fast < fast+interactive)`
+    );
+  }
+  if (tag.type.includes(ContractTagType.subContract) && tag.tags) {
+    if (tag.repeated) {
+      tag.tags.forEach((childTag) => {
+        const childValidations = validateTagPhases(childTag, effectivePhase, currentPath);
+        validations.push(...childValidations);
+      });
+    } else {
+      tag.tags.forEach((childTag) => {
+        const childValidations = validateTagPhases(childTag, void 0, currentPath);
+        validations.push(...childValidations);
+      });
+    }
+  }
+  return validations;
+}
+function validateContractPhases(contract) {
+  const validations = [];
+  contract.tags.forEach((tag) => {
+    const tagValidations = validateTagPhases(tag);
+    validations.push(...tagValidations);
+  });
+  return validations;
+}
+function filterTagsByPhase(tags, targetPhase, parentPhase) {
+  const filteredTags = [];
+  for (const tag of tags) {
+    if (!isTagInPhase(tag, targetPhase, parentPhase)) {
+      continue;
+    }
+    const effectivePhase = getEffectivePhase(tag, parentPhase);
+    if (tag.type.includes(ContractTagType.subContract) && tag.tags) {
+      const filteredNestedTags = filterTagsByPhase(tag.tags, targetPhase, effectivePhase);
+      if (filteredNestedTags.length > 0) {
+        filteredTags.push({
+          ...tag,
+          tags: filteredNestedTags
         });
-        resetParent(p.childNodes, this.parentNode);
-        (_c = this.parentNode.childNodes).splice.apply(_c, __spreadArray([idx, 0], p.childNodes, false));
-      } else {
-        throw new Error("The value provided ('".concat(where, "') is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'"));
       }
-      return this;
-    };
-    Object.defineProperty(HTMLElement2.prototype, "nextSibling", {
-      get: function() {
-        if (this.parentNode) {
-          var children = this.parentNode.childNodes;
-          var i = 0;
-          while (i < children.length) {
-            var child = children[i++];
-            if (this === child)
-              return children[i] || null;
+    } else {
+      filteredTags.push(tag);
+    }
+  }
+  return filteredTags;
+}
+function createPhaseContract(contract, targetPhase) {
+  return {
+    ...contract,
+    tags: filterTagsByPhase(contract.tags, targetPhase)
+  };
+}
+const JAY_CONTRACT_EXTENSION = ".jay-contract";
+function loadLinkedContract(linkPath, baseContractDir, importResolver) {
+  const linkWithExtension = linkPath.endsWith(JAY_CONTRACT_EXTENSION) ? linkPath : linkPath + JAY_CONTRACT_EXTENSION;
+  try {
+    const absolutePath = importResolver.resolveLink(baseContractDir, linkWithExtension);
+    const contractResult = importResolver.loadContract(absolutePath);
+    return contractResult.val ?? null;
+  } catch {
+    return null;
+  }
+}
+function getLinkedContractDir(linkPath, baseContractDir, importResolver) {
+  const linkWithExtension = linkPath.endsWith(JAY_CONTRACT_EXTENSION) ? linkPath : linkPath + JAY_CONTRACT_EXTENSION;
+  try {
+    const absolutePath = importResolver.resolveLink(baseContractDir, linkWithExtension);
+    return path.dirname(absolutePath);
+  } catch {
+    return baseContractDir;
+  }
+}
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+  var e2 = new Error(message);
+  return e2.name = "SuppressedError", e2.error = error, e2.suppressed = suppressed, e2;
+};
+function lowerCase(str2) {
+  return str2.toLowerCase();
+}
+var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
+function noCase(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
+  var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
+  var start = 0;
+  var end = result.length;
+  while (result.charAt(start) === "\0")
+    start++;
+  while (result.charAt(end - 1) === "\0")
+    end--;
+  return result.slice(start, end).split("\0").map(transform).join(delimiter);
+}
+function replace(input, re, value) {
+  if (re instanceof RegExp)
+    return input.replace(re, value);
+  return re.reduce(function(input2, re2) {
+    return input2.replace(re2, value);
+  }, input);
+}
+function pascalCaseTransform(input, index) {
+  var firstChar = input.charAt(0);
+  var lowerChars = input.substr(1).toLowerCase();
+  if (index > 0 && firstChar >= "0" && firstChar <= "9") {
+    return "_" + firstChar + lowerChars;
+  }
+  return "" + firstChar.toUpperCase() + lowerChars;
+}
+function pascalCase(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return noCase(input, __assign({ delimiter: "", transform: pascalCaseTransform }, options));
+}
+function camelCaseTransform(input, index) {
+  if (index === 0)
+    return input.toLowerCase();
+  return pascalCaseTransform(input, index);
+}
+function camelCase$1(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return pascalCase(input, __assign({ transform: camelCaseTransform }, options));
+}
+function upperCaseFirst(input) {
+  return input.charAt(0).toUpperCase() + input.substr(1);
+}
+function capitalCaseTransform(input) {
+  return upperCaseFirst(input.toLowerCase());
+}
+function capitalCase(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return noCase(input, __assign({ delimiter: " ", transform: capitalCaseTransform }, options));
+}
+function camelCase(str2) {
+  let leadingUnderscores = 0;
+  for (const char of str2) {
+    if (char === "_") {
+      leadingUnderscores++;
+    } else {
+      break;
+    }
+  }
+  if (leadingUnderscores === 0) {
+    return camelCase$1(str2);
+  }
+  const withoutLeadingUnderscores = str2.slice(leadingUnderscores);
+  const camelCased = camelCase$1(withoutLeadingUnderscores);
+  return "_".repeat(leadingUnderscores) + camelCased;
+}
+function shouldIncludeInPhase(propertyPhase, targetPhase) {
+  if (targetPhase === "slow") {
+    return propertyPhase === "slow";
+  } else if (targetPhase === "fast") {
+    return propertyPhase === "fast" || propertyPhase === "fast+interactive";
+  } else if (targetPhase === "fast+interactive") {
+    return propertyPhase === "fast+interactive";
+  }
+  return false;
+}
+function extractPropertyPathsAndArrays(tags, targetPhase, parentPath = [], parentPhase, parentTrackBy, linkedContext) {
+  const paths = [];
+  const arrays = [];
+  const asyncProps = [];
+  for (const tag of tags) {
+    if (tag.type.includes(ContractTagType.interactive) && !tag.dataType) {
+      continue;
+    }
+    const effectivePhase = getEffectivePhase(tag, parentPhase);
+    const propertyName = camelCase(tag.tag);
+    const currentPath = [...parentPath, propertyName];
+    const isArray = tag.repeated || false;
+    const isAsync = tag.async || false;
+    if (tag.type.includes(ContractTagType.subContract)) {
+      const isRecursiveLink2 = tag.link?.startsWith("$/");
+      if (isRecursiveLink2) {
+        if (shouldIncludeInPhase(effectivePhase, targetPhase)) {
+          paths.push({
+            path: parentPath,
+            propertyName
+          });
+          if (isArray) {
+            arrays.push({ path: currentPath.join(".") });
           }
-          return null;
-        }
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "nextElementSibling", {
-      get: function() {
-        if (this.parentNode) {
-          var children = this.parentNode.childNodes;
-          var i = 0;
-          var find2 = false;
-          while (i < children.length) {
-            var child = children[i++];
-            if (find2) {
-              if (child instanceof HTMLElement2) {
-                return child || null;
-              }
-            } else if (this === child) {
-              find2 = true;
-            }
+          if (isAsync) {
+            asyncProps.push({ path: currentPath.join(".") });
           }
-          return null;
         }
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "previousSibling", {
-      get: function() {
-        if (this.parentNode) {
-          var children = this.parentNode.childNodes;
-          var i = children.length;
-          while (i > 0) {
-            var child = children[--i];
-            if (this === child)
-              return children[i - 1] || null;
+      } else {
+        let childTags = [];
+        let childLinkedContext = linkedContext;
+        if (tag.tags) {
+          childTags = tag.tags;
+        } else if (tag.link && linkedContext) {
+          const linkedContract = loadLinkedContract(
+            tag.link,
+            linkedContext.contractDir,
+            linkedContext.importResolver
+          );
+          if (linkedContract) {
+            childTags = linkedContract.tags;
+            childLinkedContext = {
+              importResolver: linkedContext.importResolver,
+              contractDir: getLinkedContractDir(
+                tag.link,
+                linkedContext.contractDir,
+                linkedContext.importResolver
+              )
+            };
           }
-          return null;
         }
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "previousElementSibling", {
-      get: function() {
-        if (this.parentNode) {
-          var children = this.parentNode.childNodes;
-          var i = children.length;
-          var find2 = false;
-          while (i > 0) {
-            var child = children[--i];
-            if (find2) {
-              if (child instanceof HTMLElement2) {
-                return child || null;
-              }
-            } else if (this === child) {
-              find2 = true;
+        if (childTags.length > 0) {
+          const trackByForChildren = isArray ? tag.trackBy : void 0;
+          const result = extractPropertyPathsAndArrays(
+            childTags,
+            targetPhase,
+            currentPath,
+            effectivePhase,
+            trackByForChildren,
+            childLinkedContext
+          );
+          const hasOnlyTrackBy = isArray && trackByForChildren && result.paths.length === 1 && result.paths[0].propertyName === camelCase(trackByForChildren);
+          if (result.paths.length > 0 && !hasOnlyTrackBy) {
+            paths.push(...result.paths);
+            arrays.push(...result.arrays);
+            asyncProps.push(...result.asyncProps);
+            if (isArray) {
+              arrays.push({ path: currentPath.join(".") });
+            }
+            if (isAsync) {
+              asyncProps.push({ path: currentPath.join(".") });
             }
           }
-          return null;
         }
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(HTMLElement2.prototype, "classNames", {
-      get: function() {
-        return this.classList.toString();
-      },
-      enumerable: false,
-      configurable: true
-    });
-    HTMLElement2.prototype.clone = function() {
-      return parse$4(this.toString(), this._parseOptions).firstChild;
-    };
-    return HTMLElement2;
-  }(node_1$1.default)
-);
-html.default = HTMLElement;
-var kMarkupPattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/g;
-var kAttributePattern = /(?:^|\s)(id|class)\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+)/gi;
-var kElementsClosedByOpening = {
-  li: { li: true, LI: true },
-  LI: { li: true, LI: true },
-  p: { p: true, div: true, P: true, DIV: true },
-  P: { p: true, div: true, P: true, DIV: true },
-  b: { div: true, DIV: true },
-  B: { div: true, DIV: true },
-  td: { td: true, th: true, TD: true, TH: true },
-  TD: { td: true, th: true, TD: true, TH: true },
-  th: { td: true, th: true, TD: true, TH: true },
-  TH: { td: true, th: true, TD: true, TH: true },
-  h1: { h1: true, H1: true },
-  H1: { h1: true, H1: true },
-  h2: { h2: true, H2: true },
-  H2: { h2: true, H2: true },
-  h3: { h3: true, H3: true },
-  H3: { h3: true, H3: true },
-  h4: { h4: true, H4: true },
-  H4: { h4: true, H4: true },
-  h5: { h5: true, H5: true },
-  H5: { h5: true, H5: true },
-  h6: { h6: true, H6: true },
-  H6: { h6: true, H6: true }
-};
-var kElementsClosedByClosing = {
-  li: { ul: true, ol: true, UL: true, OL: true },
-  LI: { ul: true, ol: true, UL: true, OL: true },
-  a: { div: true, DIV: true },
-  A: { div: true, DIV: true },
-  b: { div: true, DIV: true },
-  B: { div: true, DIV: true },
-  i: { div: true, DIV: true },
-  I: { div: true, DIV: true },
-  p: { div: true, DIV: true },
-  P: { div: true, DIV: true },
-  td: { tr: true, table: true, TR: true, TABLE: true },
-  TD: { tr: true, table: true, TR: true, TABLE: true },
-  th: { tr: true, table: true, TR: true, TABLE: true },
-  TH: { tr: true, table: true, TR: true, TABLE: true }
-};
-var frameflag = "documentfragmentcontainer";
-function base_parse(data, options) {
-  var _a, _b;
-  if (options === void 0) {
-    options = {};
-  }
-  var voidTag2 = new void_tag_1.default((_a = options === null || options === void 0 ? void 0 : options.voidTag) === null || _a === void 0 ? void 0 : _a.closingSlash, (_b = options === null || options === void 0 ? void 0 : options.voidTag) === null || _b === void 0 ? void 0 : _b.tags);
-  var elements = options.blockTextElements || {
-    script: true,
-    noscript: true,
-    style: true,
-    pre: true
-  };
-  var element_names = Object.keys(elements);
-  var kBlockTextElements = element_names.map(function(it) {
-    return new RegExp("^".concat(it, "$"), "i");
-  });
-  var kIgnoreElements = element_names.filter(function(it) {
-    return Boolean(elements[it]);
-  }).map(function(it) {
-    return new RegExp("^".concat(it, "$"), "i");
-  });
-  function element_should_be_ignore(tag) {
-    return kIgnoreElements.some(function(it) {
-      return it.test(tag);
-    });
-  }
-  function is_block_text_element(tag) {
-    return kBlockTextElements.some(function(it) {
-      return it.test(tag);
-    });
-  }
-  var createRange = function(startPos, endPos) {
-    return [startPos - frameFlagOffset, endPos - frameFlagOffset];
-  };
-  var root = new HTMLElement(null, {}, "", null, [0, data.length], voidTag2, options);
-  var currentParent = root;
-  var stack = [root];
-  var lastTextPos = -1;
-  var noNestedTagIndex = void 0;
-  var match;
-  data = "<".concat(frameflag, ">").concat(data, "</").concat(frameflag, ">");
-  var lowerCaseTagName = options.lowerCaseTagName, fixNestedATags = options.fixNestedATags;
-  var dataEndPos = data.length - (frameflag.length + 2);
-  var frameFlagOffset = frameflag.length + 2;
-  while (match = kMarkupPattern.exec(data)) {
-    var matchText = match[0], leadingSlash = match[1], tagName = match[2], attributes2 = match[3], closingSlash = match[4];
-    var matchLength = matchText.length;
-    var tagStartPos = kMarkupPattern.lastIndex - matchLength;
-    var tagEndPos = kMarkupPattern.lastIndex;
-    if (lastTextPos > -1) {
-      if (lastTextPos + matchLength < tagEndPos) {
-        var text2 = data.substring(lastTextPos, tagStartPos);
-        currentParent.appendChild(new text_1$1.default(text2, currentParent, createRange(lastTextPos, tagStartPos)));
       }
-    }
-    lastTextPos = kMarkupPattern.lastIndex;
-    if (tagName === frameflag)
-      continue;
-    if (matchText[1] === "!") {
-      if (options.comment) {
-        var text2 = data.substring(tagStartPos + 4, tagEndPos - 3);
-        currentParent.appendChild(new comment_1$1.default(text2, currentParent, createRange(tagStartPos, tagEndPos)));
+    } else {
+      const isTrackByField = parentTrackBy === tag.tag;
+      if (shouldIncludeInPhase(effectivePhase, targetPhase) || isTrackByField) {
+        paths.push({
+          path: parentPath,
+          propertyName
+        });
       }
+    }
+  }
+  return { paths, arrays, asyncProps };
+}
+function groupPathsByParent(paths) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const { path: path2, propertyName } of paths) {
+    const parentKey = path2.join(".");
+    if (!grouped.has(parentKey)) {
+      grouped.set(parentKey, []);
+    }
+    grouped.get(parentKey).push(propertyName);
+  }
+  return grouped;
+}
+function countTotalProperties(tags, targetPath, currentPath = [], linkedContext) {
+  let count = 0;
+  for (const tag of tags) {
+    if (tag.type.includes(ContractTagType.interactive) && !tag.dataType) {
       continue;
     }
-    if (lowerCaseTagName)
-      tagName = tagName.toLowerCase();
-    if (!leadingSlash) {
-      var attrs = {};
-      for (var attMatch = void 0; attMatch = kAttributePattern.exec(attributes2); ) {
-        var key = attMatch[1], val = attMatch[2];
-        var isQuoted = val[0] === "'" || val[0] === '"';
-        attrs[key.toLowerCase()] = isQuoted ? val.slice(1, val.length - 1) : val;
-      }
-      var parentTagName = currentParent.rawTagName;
-      if (!closingSlash && kElementsClosedByOpening[parentTagName]) {
-        if (kElementsClosedByOpening[parentTagName][tagName]) {
-          stack.pop();
-          currentParent = (0, back_1.default)(stack);
+    const propertyName = camelCase(tag.tag);
+    const newPath = [...currentPath, propertyName];
+    const pathKey = newPath.join(".");
+    const targetKey = targetPath.join(".");
+    if (pathKey === targetKey && tag.type.includes(ContractTagType.subContract)) {
+      let childTags = [];
+      if (tag.tags) {
+        childTags = tag.tags;
+      } else if (tag.link && linkedContext && !tag.link.startsWith("$/")) {
+        const linkedContract = loadLinkedContract(
+          tag.link,
+          linkedContext.contractDir,
+          linkedContext.importResolver
+        );
+        if (linkedContract) {
+          childTags = linkedContract.tags;
         }
       }
-      if (fixNestedATags && (tagName === "a" || tagName === "A")) {
-        if (noNestedTagIndex !== void 0) {
-          stack.splice(noNestedTagIndex);
-          currentParent = (0, back_1.default)(stack);
+      for (const childTag of childTags) {
+        if (childTag.type.includes(ContractTagType.interactive) && !childTag.dataType) {
+          continue;
         }
-        noNestedTagIndex = stack.length;
+        count++;
       }
-      var tagEndPos_1 = kMarkupPattern.lastIndex;
-      var tagStartPos_1 = tagEndPos_1 - matchLength;
-      currentParent = currentParent.appendChild(
-        // Initialize range (end position updated later for closed tags)
-        new HTMLElement(tagName, attrs, attributes2.slice(1), null, createRange(tagStartPos_1, tagEndPos_1), voidTag2, options)
-      );
-      stack.push(currentParent);
-      if (is_block_text_element(tagName)) {
-        var closeMarkup = "</".concat(tagName, ">");
-        var closeIndex = lowerCaseTagName ? data.toLocaleLowerCase().indexOf(closeMarkup, kMarkupPattern.lastIndex) : data.indexOf(closeMarkup, kMarkupPattern.lastIndex);
-        var textEndPos = closeIndex === -1 ? dataEndPos : closeIndex;
-        if (element_should_be_ignore(tagName)) {
-          var text2 = data.substring(tagEndPos_1, textEndPos);
-          if (text2.length > 0 && /\S/.test(text2)) {
-            currentParent.appendChild(new text_1$1.default(text2, currentParent, createRange(tagEndPos_1, textEndPos)));
-          }
+      return count;
+    }
+    if (tag.type.includes(ContractTagType.subContract)) {
+      let childTags = [];
+      let childLinkedContext = linkedContext;
+      if (tag.tags) {
+        childTags = tag.tags;
+      } else if (tag.link && linkedContext && !tag.link.startsWith("$/")) {
+        const linkedContract = loadLinkedContract(
+          tag.link,
+          linkedContext.contractDir,
+          linkedContext.importResolver
+        );
+        if (linkedContract) {
+          childTags = linkedContract.tags;
+          childLinkedContext = {
+            importResolver: linkedContext.importResolver,
+            contractDir: getLinkedContractDir(
+              tag.link,
+              linkedContext.contractDir,
+              linkedContext.importResolver
+            )
+          };
         }
-        if (closeIndex === -1) {
-          lastTextPos = kMarkupPattern.lastIndex = data.length + 1;
-        } else {
-          lastTextPos = kMarkupPattern.lastIndex = closeIndex + closeMarkup.length;
-          leadingSlash = "/";
+      }
+      if (childTags.length > 0) {
+        const result = countTotalProperties(
+          childTags,
+          targetPath,
+          newPath,
+          childLinkedContext
+        );
+        if (result > 0) {
+          return result;
         }
       }
     }
-    if (leadingSlash || closingSlash || voidTag2.isVoidElement(tagName)) {
-      while (true) {
-        if (noNestedTagIndex != null && (tagName === "a" || tagName === "A"))
-          noNestedTagIndex = void 0;
-        if (currentParent.rawTagName === tagName) {
-          currentParent.range[1] = createRange(-1, Math.max(lastTextPos, tagEndPos))[1];
-          stack.pop();
-          currentParent = (0, back_1.default)(stack);
-          break;
-        } else {
-          var parentTagName = currentParent.tagName;
-          if (kElementsClosedByClosing[parentTagName]) {
-            if (kElementsClosedByClosing[parentTagName][tagName]) {
-              stack.pop();
-              currentParent = (0, back_1.default)(stack);
-              continue;
-            }
-          }
-          break;
-        }
+  }
+  return count;
+}
+function buildPathAccess(baseTypeName, path2, arrays, asyncProps, skipFinalArrayAccess = false) {
+  if (path2.length === 0) {
+    return baseTypeName;
+  }
+  let result = baseTypeName;
+  for (let i = 0; i < path2.length; i++) {
+    const segment = path2[i];
+    result += `['${segment}']`;
+    const pathUpToHere = path2.slice(0, i + 1).join(".");
+    const isArray = arrays.has(pathUpToHere);
+    const isAsync = asyncProps?.has(pathUpToHere);
+    const isFinalSegment = i === path2.length - 1;
+    const shouldSkip = isFinalSegment && (skipFinalArrayAccess || isArray && isAsync);
+    if (isArray && !shouldSkip) {
+      result += "[number]";
+    }
+  }
+  return result;
+}
+function isFullyIncluded(pathGroups, contractTags, currentPath, linkedContext) {
+  const currentKey = currentPath.join(".");
+  const properties = pathGroups.get(currentKey) || [];
+  const totalProps = countTotalProperties(contractTags, currentPath, [], linkedContext);
+  if (totalProps === 0) {
+    return false;
+  }
+  const childPropertyNames = /* @__PURE__ */ new Set();
+  const prefix = currentKey ? currentKey + "." : "";
+  for (const key of pathGroups.keys()) {
+    if (key.startsWith(prefix) && key !== currentKey) {
+      const remainingPath = key.slice(prefix.length);
+      const firstSegment = remainingPath.split(".")[0];
+      if (firstSegment) {
+        childPropertyNames.add(firstSegment);
       }
     }
   }
-  return stack;
+  const directProps = properties.filter((p) => !childPropertyNames.has(p));
+  if (directProps.length + childPropertyNames.size !== totalProps) {
+    return false;
+  }
+  for (const childName of childPropertyNames) {
+    const childPath = [...currentPath, childName];
+    if (!isFullyIncluded(pathGroups, contractTags, childPath, linkedContext)) {
+      return false;
+    }
+  }
+  return true;
 }
-html.base_parse = base_parse;
-function parse$4(data, options) {
-  if (options === void 0) {
-    options = {};
+function buildPickExpression(baseTypeName, pathGroups, arrays, asyncProps, contractTags, currentPath = [], linkedContext) {
+  const currentKey = currentPath.join(".");
+  const properties = pathGroups.get(currentKey) || [];
+  const childPropertyNames = /* @__PURE__ */ new Set();
+  for (const key of pathGroups.keys()) {
+    const prefix = currentKey ? currentKey + "." : "";
+    if (key.startsWith(prefix) && key !== currentKey) {
+      const remainingPath = key.slice(prefix.length);
+      const firstSegment = remainingPath.split(".")[0];
+      if (firstSegment) {
+        childPropertyNames.add(firstSegment);
+      }
+    }
   }
-  var stack = base_parse(data, options);
-  var root = stack[0];
-  var _loop_1 = function() {
-    var last = stack.pop();
-    var oneBefore = (0, back_1.default)(stack);
-    if (last.parentNode && last.parentNode.parentNode) {
-      if (last.parentNode === oneBefore && last.tagName === oneBefore.tagName) {
-        if (options.parseNoneClosedTags !== true) {
-          oneBefore.removeChild(last);
-          last.childNodes.forEach(function(child) {
-            oneBefore.parentNode.appendChild(child);
-          });
-          stack.pop();
+  const pickPart = [];
+  const nestedProperties = [];
+  const directProps = properties.filter((p) => !childPropertyNames.has(p));
+  if (directProps.length > 0) {
+    const pathAccess = buildPathAccess(baseTypeName, currentPath, arrays, asyncProps);
+    pickPart.push(`Pick<${pathAccess}, ${directProps.map((p) => `'${p}'`).join(" | ")}>`);
+  }
+  for (const childName of childPropertyNames) {
+    const childPath = [...currentPath, childName];
+    const childPathKey = childPath.join(".");
+    const isArray = arrays.has(childPathKey);
+    const isAsync = asyncProps.has(childPathKey);
+    const isChildFullyIncluded = isFullyIncluded(
+      pathGroups,
+      contractTags,
+      childPath,
+      linkedContext
+    );
+    const originalPathAccess = buildPathAccess(baseTypeName, childPath, arrays, asyncProps);
+    if (isChildFullyIncluded) {
+      let fullExpression;
+      const directTypeRef = originalPathAccess;
+      if (isAsync) {
+        if (isArray) {
+          fullExpression = `Promise<Array<Awaited<${directTypeRef}>[number]>>`;
+        } else {
+          fullExpression = directTypeRef;
         }
+      } else if (isArray) {
+        fullExpression = `Array<${directTypeRef}>`;
       } else {
-        if (options.parseNoneClosedTags !== true) {
-          oneBefore.removeChild(last);
-          last.childNodes.forEach(function(child) {
-            oneBefore.appendChild(child);
-          });
+        fullExpression = directTypeRef;
+      }
+      nestedProperties.push(`    ${childName}: ${fullExpression};`);
+    } else {
+      const childExpression = buildPickExpression(
+        baseTypeName,
+        pathGroups,
+        arrays,
+        asyncProps,
+        contractTags,
+        childPath,
+        linkedContext
+      );
+      if (childExpression) {
+        let fullExpression;
+        if (isAsync) {
+          if (isArray) {
+            const unwrappedArrayAccess = `Awaited<${originalPathAccess}>[number]`;
+            const unwrappedExpression = childExpression.replace(
+              originalPathAccess,
+              unwrappedArrayAccess
+            );
+            fullExpression = `Promise<Array<${unwrappedExpression}>>`;
+          } else {
+            const unwrappedAccess = `Awaited<${originalPathAccess}>`;
+            const unwrappedExpression = childExpression.replace(
+              originalPathAccess,
+              unwrappedAccess
+            );
+            fullExpression = `Promise<${unwrappedExpression}>`;
+          }
+        } else if (isArray) {
+          fullExpression = `Array<${childExpression}>`;
+        } else {
+          fullExpression = childExpression;
         }
+        nestedProperties.push(`    ${childName}: ${fullExpression};`);
       }
     }
-  };
-  while (stack.length > 1) {
-    _loop_1();
   }
-  return root;
-}
-html.parse = parse$4;
-function resetParent(nodes, parent) {
-  return nodes.map(function(node2) {
-    node2.parentNode = parent;
-    return node2;
-  });
-}
-var parse$3 = {};
-(function(exports) {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.default = void 0;
-  var html_12 = html;
-  Object.defineProperty(exports, "default", { enumerable: true, get: function() {
-    return html_12.parse;
-  } });
-})(parse$3);
-var valid$1 = {};
-Object.defineProperty(valid$1, "__esModule", { value: true });
-var html_1$1 = html;
-function valid(data, options) {
-  if (options === void 0) {
-    options = {};
+  if (pickPart.length === 0 && nestedProperties.length === 0) {
+    return "{}";
+  } else if (pickPart.length === 0) {
+    return `{
+${nestedProperties.join("\n")}
+}`;
+  } else if (nestedProperties.length === 0) {
+    return pickPart[0];
+  } else {
+    return `${pickPart[0]} & {
+${nestedProperties.join("\n")}
+}`;
   }
-  var stack = (0, html_1$1.base_parse)(data, options);
-  return Boolean(stack.length === 1);
 }
-valid$1.default = valid;
-var __importDefault$1 = commonjsGlobal && commonjsGlobal.__importDefault || function(mod) {
-  return mod && mod.__esModule ? mod : { "default": mod };
-};
-Object.defineProperty(dist, "__esModule", { value: true });
-var NodeType = dist.NodeType = dist.TextNode = dist.Node = dist.valid = dist.CommentNode = dist.HTMLElement = parse_2 = dist.parse = void 0;
-var comment_1 = __importDefault$1(comment);
-dist.CommentNode = comment_1.default;
-var html_1 = __importDefault$1(html);
-dist.HTMLElement = html_1.default;
-var node_1 = __importDefault$1(node$1);
-dist.Node = node_1.default;
-var text_1 = __importDefault$1(text);
-dist.TextNode = text_1.default;
-var type_1 = __importDefault$1(type$1);
-NodeType = dist.NodeType = type_1.default;
-var parse_1 = __importDefault$1(parse$3);
-var valid_1 = __importDefault$1(valid$1);
-dist.valid = valid_1.default;
-function parse$2(data, options) {
-  if (options === void 0) {
-    options = {};
+function generatePhaseViewStateType(contract, phase, baseTypeName, importResolver, contractPath) {
+  const phaseName = phase === "fast+interactive" ? "Interactive" : pascalCase(phase);
+  const typeName = `${pascalCase(contract.name)}${phaseName}ViewState`;
+  const linkedContext = importResolver && contractPath ? {
+    importResolver,
+    contractDir: contractPath.includes("/") ? contractPath.substring(0, contractPath.lastIndexOf("/")) : "."
+  } : void 0;
+  const { paths, arrays, asyncProps } = extractPropertyPathsAndArrays(
+    contract.tags,
+    phase,
+    [],
+    void 0,
+    void 0,
+    linkedContext
+  );
+  if (paths.length === 0) {
+    return `export type ${typeName} = {};`;
   }
-  return (0, parse_1.default)(data, options);
+  const pathGroups = groupPathsByParent(paths);
+  const arraySet = new Set(arrays.map((a) => a.path));
+  const asyncSet = new Set(asyncProps.map((a) => a.path));
+  const pickExpression = buildPickExpression(
+    baseTypeName,
+    pathGroups,
+    arraySet,
+    asyncSet,
+    contract.tags,
+    [],
+    linkedContext
+  );
+  return `export type ${typeName} = ${pickExpression};`;
+}
+function generateAllPhaseViewStateTypes(contract, baseTypeName, importResolver, contractPath) {
+  const slowType = generatePhaseViewStateType(
+    contract,
+    "slow",
+    baseTypeName,
+    importResolver,
+    contractPath
+  );
+  const fastType = generatePhaseViewStateType(
+    contract,
+    "fast",
+    baseTypeName,
+    importResolver,
+    contractPath
+  );
+  const interactiveType = generatePhaseViewStateType(
+    contract,
+    "fast+interactive",
+    baseTypeName,
+    importResolver,
+    contractPath
+  );
+  return [slowType, fastType, interactiveType].join("\n\n");
 }
-dist.default = parse$2;
-var parse_2 = dist.parse = parse$2;
-parse$2.parse = parse_1.default;
-parse$2.HTMLElement = html_1.default;
-parse$2.CommentNode = comment_1.default;
-parse$2.valid = valid_1.default;
-parse$2.Node = node_1.default;
-parse$2.TextNode = text_1.default;
-parse$2.NodeType = type_1.default;
 function peg$subclass(child, parent) {
   function ctor() {
     this.constructor = child;
@@ -13345,7 +13503,7 @@ function extractComponentName(tagName) {
 function getComponentName(tagName, importedSymbols, headlessContractNames) {
   if (hasJayPrefix(tagName)) {
     const componentName = extractComponentName(tagName);
-    if (headlessContractNames?.has(componentName)) {
+    if (headlessContractNames?.has(componentName.toLowerCase())) {
       return { name: componentName, kind: "headless-instance" };
     }
     if (importedSymbols.has(componentName)) {
@@ -14201,6 +14359,9 @@ function filterContentNodes(childNodes, onlyIfMultiple = false) {
 function textEscape$1(s) {
   return s.replace(/'/g, "\\'");
 }
+function escapeForJsString(s) {
+  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+}
 const PROPERTY = 1;
 const BOOLEAN_ATTRIBUTE = 3;
 const propertyMapping = {
@@ -14243,6 +14404,7 @@ const DIRECTIVE_ATTRIBUTES = /* @__PURE__ */ new Set([
   "jayindex",
   "jaytrackby",
   "jay-coordinate-base",
+  "jay-scope",
   AsyncDirectiveTypes.loading.directive,
   AsyncDirectiveTypes.resolved.directive,
   AsyncDirectiveTypes.rejected.directive
@@ -14296,7 +14458,8 @@ function isValidationError(result) {
   return result instanceof RenderFragment;
 }
 function resolveHeadlessImport(contractName, headlessImports) {
-  const headlessImport = headlessImports.find((h) => h.contractName === contractName);
+  const lowerName = contractName.toLowerCase();
+  const headlessImport = headlessImports.find((h) => h.contractName === lowerName);
   if (!headlessImport) {
     return new RenderFragment("", Imports.none(), [
       `No headless import found for contract "${contractName}"`
@@ -14305,15 +14468,17 @@ function resolveHeadlessImport(contractName, headlessImports) {
   return headlessImport;
 }
 function extractHeadlessCoordinate(element, contractName) {
-  const instanceCoord = element.getAttribute(COORD_ATTR$1);
+  const instanceCoord = element.getAttribute(COORD_ATTR);
   if (!instanceCoord) {
     return new RenderFragment("", Imports.none(), [
       `Headless instance <jay:${contractName}> missing jay-coordinate-base — run assignCoordinates first`
     ]);
   }
   const coordSegments = instanceCoord.split("/");
-  const coordinateSuffix = coordSegments.find((s) => s.startsWith(contractName + ":")) || `${contractName}:0`;
-  return { instanceCoord, coordSegments, coordinateSuffix };
+  const lowerName = contractName.toLowerCase();
+  const coordinateSuffix = coordSegments.find((s) => s.startsWith(lowerName + ":")) || `${lowerName}:0`;
+  const childScopeId = element.getAttribute("jay-scope") || void 0;
+  return { instanceCoord, coordSegments, coordinateSuffix, childScopeId };
 }
 function buildContractRefMap(refsTree) {
   const result = /* @__PURE__ */ new Map();
@@ -14337,7 +14502,7 @@ function buildContractRefMap(refsTree) {
   walk(refsTree);
   return result;
 }
-const COORD_ATTR$1 = "jay-coordinate-base";
+const COORD_ATTR = "jay-coordinate-base";
 function expandContractType(renderedElement, baseName) {
   const contractPattern = new RegExp(
     `export type ${baseName}Contract = JayContract<([^,]+), ${baseName}ElementRefs>;`,
@@ -14541,144 +14706,6 @@ ${renderedRefsManager}
     renderedBridge.refs
   );
 }
-const COORD_ATTR = "jay-coordinate-base";
-function assignCoordinatesToJayHtml(jayHtml, headlessContractNames) {
-  const root = parse_2(jayHtml, {
-    comment: true,
-    blockTextElements: { script: true, style: true }
-  });
-  const body = root.querySelector("body");
-  if (!body)
-    return jayHtml;
-  assignCoordinates(body, { headlessContractNames });
-  return root.toString();
-}
-function newScope() {
-  return { childCounter: 0 };
-}
-function assignCoordinates(body, options) {
-  if (!options._refCounters)
-    options._refCounters = /* @__PURE__ */ new Map();
-  const rootChildren = body.childNodes.filter(
-    (n) => n.nodeType === NodeType.ELEMENT_NODE
-  );
-  if (rootChildren.length === 0)
-    return { debugHtml: body.toString() };
-  const rootElement = rootChildren[0];
-  rootElement.setAttribute(COORD_ATTR, "0");
-  walkChildren(rootElement, "0", options, newScope());
-  return { debugHtml: body.toString() };
-}
-function walkChildren(parent, parentCoord, options, scope, slowForEachPrefix = "") {
-  for (const child of parent.childNodes) {
-    if (child.nodeType !== NodeType.ELEMENT_NODE)
-      continue;
-    const element = child;
-    const tagName = element.tagName?.toLowerCase();
-    if (tagName?.startsWith("jay:")) {
-      const contractName = tagName.substring(4);
-      if (options.headlessContractNames.has(contractName)) {
-        let ref = element.getAttribute("ref");
-        if (!ref) {
-          const idx = options._refCounters.get(contractName) ?? 0;
-          options._refCounters.set(contractName, idx + 1);
-          ref = `AR${idx}`;
-          element.setAttribute("ref", ref);
-        }
-        assignHeadlessInstance(
-          element,
-          contractName,
-          ref,
-          parentCoord,
-          options,
-          slowForEachPrefix
-        );
-        continue;
-      }
-    }
-    const forEachAttr = element.getAttribute("forEach");
-    if (forEachAttr) {
-      const trackBy = element.getAttribute("trackBy");
-      if (trackBy) {
-        const coord2 = `${parentCoord}/${scope.childCounter}`;
-        element.setAttribute(COORD_ATTR, coord2);
-        scope.childCounter++;
-        walkForEachChildren(element, `$${trackBy}`, options, slowForEachPrefix);
-        continue;
-      }
-    }
-    const slowForEachAttr = element.getAttribute("slowForEach");
-    if (slowForEachAttr) {
-      const jayTrackBy = element.getAttribute("jayTrackBy");
-      if (jayTrackBy) {
-        const coord2 = slowForEachPrefix ? `${slowForEachPrefix}/${jayTrackBy}` : jayTrackBy;
-        element.setAttribute(COORD_ATTR, coord2);
-        walkChildren(element, coord2, options, newScope(), coord2);
-        continue;
-      }
-    }
-    const coord = `${parentCoord}/${scope.childCounter}`;
-    element.setAttribute(COORD_ATTR, coord);
-    scope.childCounter++;
-    walkChildren(element, coord, options, newScope(), slowForEachPrefix);
-  }
-}
-function assignHeadlessInstance(element, contractName, ref, parentCoord, options, slowForEachPrefix = "") {
-  const instanceCoord = `${parentCoord}/${contractName}:${ref}`;
-  element.setAttribute(COORD_ATTR, instanceCoord);
-  const significantChildren = element.childNodes.filter(
-    (n) => n.nodeType === NodeType.ELEMENT_NODE || n.nodeType === NodeType.TEXT_NODE && (n.innerText || "").trim() !== ""
-  );
-  if (significantChildren.length > 1) {
-    const wrapper = parse_2("<div></div>").querySelector("div");
-    const children = [...element.childNodes];
-    element.innerHTML = "";
-    children.forEach((child) => wrapper.appendChild(child));
-    element.appendChild(wrapper);
-  }
-  walkChildren(element, instanceCoord, options, newScope(), slowForEachPrefix);
-}
-function walkForEachChildren(parent, itemPrefix, options, slowForEachPrefix = "") {
-  const scope = newScope();
-  for (const child of parent.childNodes) {
-    if (child.nodeType !== NodeType.ELEMENT_NODE)
-      continue;
-    const element = child;
-    const tagName = element.tagName?.toLowerCase();
-    if (tagName?.startsWith("jay:")) {
-      const contractName = tagName.substring(4);
-      if (options.headlessContractNames.has(contractName)) {
-        let ref = element.getAttribute("ref");
-        if (!ref) {
-          const counterKey = `forEach/${contractName}`;
-          const idx = options._refCounters.get(counterKey) ?? 0;
-          options._refCounters.set(counterKey, idx + 1);
-          ref = `AR${idx}`;
-          element.setAttribute("ref", ref);
-        }
-        const instanceCoord = itemPrefix ? `${itemPrefix}/${contractName}:${ref}` : `${contractName}:${ref}`;
-        element.setAttribute(COORD_ATTR, instanceCoord);
-        walkChildren(element, instanceCoord, options, newScope(), slowForEachPrefix);
-        continue;
-      }
-    }
-    const forEachAttr = element.getAttribute("forEach");
-    if (forEachAttr) {
-      const trackBy = element.getAttribute("trackBy");
-      if (trackBy) {
-        const coord2 = itemPrefix ? `${itemPrefix}/${scope.childCounter}` : `${scope.childCounter}`;
-        element.setAttribute(COORD_ATTR, coord2);
-        scope.childCounter++;
-        walkForEachChildren(element, null, options, slowForEachPrefix);
-        continue;
-      }
-    }
-    const coord = itemPrefix ? `${itemPrefix}/${scope.childCounter}` : `${scope.childCounter}`;
-    element.setAttribute(COORD_ATTR, coord);
-    scope.childCounter++;
-    walkChildren(element, coord, options, newScope(), slowForEachPrefix);
-  }
-}
 /*! js-yaml 4.1.0 https://github.com/nodeca/js-yaml @license MIT */
 function isNothing(subject) {
   return typeof subject === "undefined" || subject === null;
@@ -18234,6 +18261,10 @@ function injectHeadfullFSTemplates(html2, sourceDir, importResolver) {
   const body = root.querySelector("body");
   if (!body)
     return html2;
+  injectHeadfullFSTemplatesRecursive(fsElements, body, sourceDir, importResolver, /* @__PURE__ */ new Set());
+  return root.toString();
+}
+function injectHeadfullFSTemplatesRecursive(fsElements, body, sourceDir, importResolver, visited) {
   for (const element of fsElements) {
     const src = element.getAttribute("src");
     const rawNames = element.getAttribute("names");
@@ -18243,13 +18274,28 @@ function injectHeadfullFSTemplates(html2, sourceDir, importResolver) {
     if (names.length === 0)
       continue;
     const contractName = (names[0].as || names[0].name).toLowerCase();
-    const jayHtmlContent = importResolver.readJayHtml(sourceDir, src);
-    if (!jayHtmlContent)
+    const resolvedSrc = path.resolve(sourceDir, src);
+    if (visited.has(resolvedSrc))
+      continue;
+    visited.add(resolvedSrc);
+    const jayHtmlResult = importResolver.readJayHtml(sourceDir, src);
+    if (!jayHtmlResult)
       continue;
-    const jayHtmlRoot = parse_2(jayHtmlContent);
+    const jayHtmlRoot = parse_2(jayHtmlResult.content);
     const jayHtmlBody = jayHtmlRoot.querySelector("body");
     if (!jayHtmlBody)
       continue;
+    const nestedHeadfullElements = jayHtmlRoot.querySelectorAll('script[type="application/jay-headfull"]').filter((el) => el.getAttribute("contract"));
+    if (nestedHeadfullElements.length > 0) {
+      const childDir = jayHtmlResult.componentDir;
+      injectHeadfullFSTemplatesRecursive(
+        nestedHeadfullElements,
+        jayHtmlBody,
+        childDir,
+        importResolver,
+        visited
+      );
+    }
     const jayTags = body.querySelectorAll("*").filter((el) => el.tagName?.toLowerCase() === `jay:${contractName}`);
     for (const jayTag of jayTags) {
       if (!jayTag.innerHTML.trim()) {
@@ -18257,12 +18303,12 @@ function injectHeadfullFSTemplates(html2, sourceDir, importResolver) {
       }
     }
   }
-  return root.toString();
 }
-async function parseHeadfullFSImports(elements, validations, filePath, importResolver, body, projectRoot) {
+async function parseHeadfullFSImports(elements, validations, filePath, importResolver, body, projectRoot, visited = /* @__PURE__ */ new Set(), sourceDir) {
   const headlessImports = [];
   const cssParts = [];
   const linkedCssFiles = [];
+  const linkedComponentFiles = [];
   for (const element of elements) {
     const src = element.getAttribute("src");
     const contractAttr = element.getAttribute("contract");
@@ -18287,7 +18333,37 @@ async function parseHeadfullFSImports(elements, validations, filePath, importRes
     }
     const componentExportName = names[0].name;
     const contractName = (names[0].as || componentExportName).toLowerCase();
-    let contractPath = path.resolve(filePath, contractAttr);
+    const resolvedSrc = path.resolve(filePath, src);
+    if (visited.has(resolvedSrc)) {
+      validations.push(
+        `Circular headfull FS import detected: ${src} has already been processed`
+      );
+      continue;
+    }
+    visited.add(resolvedSrc);
+    const resolveDir = sourceDir || filePath;
+    let jayHtmlResult = importResolver.readJayHtml(resolveDir, src);
+    let moduleResolveDir = resolveDir;
+    if (jayHtmlResult === null && resolveDir !== filePath) {
+      jayHtmlResult = importResolver.readJayHtml(filePath, src);
+      if (jayHtmlResult !== null) {
+        moduleResolveDir = filePath;
+      }
+    }
+    if (jayHtmlResult === null && projectRoot && projectRoot !== filePath && projectRoot !== resolveDir) {
+      jayHtmlResult = importResolver.readJayHtml(projectRoot, src);
+      if (jayHtmlResult !== null) {
+        moduleResolveDir = projectRoot;
+      }
+    }
+    if (jayHtmlResult === null) {
+      validations.push(
+        `jay-html file not found for headfull FS component ${src} (expected ${src}.jay-html)`
+      );
+      continue;
+    }
+    linkedComponentFiles.push(jayHtmlResult.filePath);
+    let contractPath = path.resolve(resolveDir, contractAttr);
     let loadedContract;
     try {
       const contractResult = importResolver.loadContract(contractPath);
@@ -18297,6 +18373,7 @@ async function parseHeadfullFSImports(elements, validations, filePath, importRes
       }
       loadedContract = contractResult.val;
     } catch (e2) {
+      let resolved = false;
       if (projectRoot && projectRoot !== filePath) {
         try {
           contractPath = path.resolve(projectRoot, contractAttr);
@@ -18306,36 +18383,37 @@ async function parseHeadfullFSImports(elements, validations, filePath, importRes
             continue;
           }
           loadedContract = fallbackResult.val;
-        } catch (e22) {
+          resolved = true;
+        } catch {
+        }
+      }
+      if (!resolved) {
+        try {
+          contractPath = path.resolve(
+            jayHtmlResult.componentDir,
+            path.basename(contractAttr)
+          );
+          const fallbackResult = importResolver.loadContract(contractPath);
+          validations.push(...fallbackResult.validations);
+          if (!fallbackResult.val) {
+            continue;
+          }
+          loadedContract = fallbackResult.val;
+        } catch (e3) {
           validations.push(
-            `Failed to load contract for headfull FS component ${src}: ${e22.message}`
+            `Failed to load contract for headfull FS component ${src}: ${e3.message}`
           );
           continue;
         }
-      } else {
-        validations.push(
-          `Failed to load contract for headfull FS component ${src}: ${e2.message}`
-        );
-        continue;
       }
     }
-    let jayHtmlContent = importResolver.readJayHtml(filePath, src);
-    if (jayHtmlContent === null && projectRoot && projectRoot !== filePath) {
-      jayHtmlContent = importResolver.readJayHtml(projectRoot, src);
-    }
-    if (jayHtmlContent === null) {
-      validations.push(
-        `jay-html file not found for headfull FS component ${src} (expected ${src}.jay-html)`
-      );
-      continue;
-    }
-    const jayHtmlRoot = parse_2(jayHtmlContent);
+    const jayHtmlRoot = parse_2(jayHtmlResult.content);
     const jayHtmlBody = jayHtmlRoot.querySelector("body");
     if (!jayHtmlBody) {
       validations.push(`headfull FS component ${src} jay-html must have a body tag`);
       continue;
     }
-    const componentDir = path.dirname(path.resolve(filePath, src));
+    const componentDir = jayHtmlResult.componentDir;
     const componentCssResult = await extractCss(jayHtmlRoot, componentDir);
     validations.push(...componentCssResult.validations);
     if (componentCssResult.val?.css) {
@@ -18344,6 +18422,55 @@ async function parseHeadfullFSImports(elements, validations, filePath, importRes
     if (componentCssResult.val?.linkedCssFiles) {
       linkedCssFiles.push(...componentCssResult.val.linkedCssFiles);
     }
+    const nestedHeadlessElements = jayHtmlRoot.querySelectorAll(
+      'script[type="application/jay-headless"]'
+    );
+    if (nestedHeadlessElements.length > 0) {
+      const nestedHeadless = await parseHeadlessImports(
+        nestedHeadlessElements,
+        validations,
+        filePath,
+        importResolver,
+        projectRoot
+      );
+      headlessImports.push(...nestedHeadless);
+    }
+    const nestedHeadfullFSElements = jayHtmlRoot.querySelectorAll('script[type="application/jay-headfull"]').filter((el) => el.getAttribute("contract"));
+    if (nestedHeadfullFSElements.length > 0) {
+      for (const nestedEl of nestedHeadfullFSElements) {
+        const nestedSrc = nestedEl.getAttribute("src");
+        if (nestedSrc) {
+          const absoluteSrc = path.resolve(componentDir, nestedSrc);
+          let relativeSrc = path.relative(filePath, absoluteSrc);
+          if (!relativeSrc.startsWith("."))
+            relativeSrc = "./" + relativeSrc;
+          nestedEl.setAttribute("src", relativeSrc);
+        }
+        const nestedContract = nestedEl.getAttribute("contract");
+        if (nestedContract) {
+          const absoluteContract = path.resolve(componentDir, nestedContract);
+          let relativeContract = path.relative(filePath, absoluteContract);
+          if (!relativeContract.startsWith("."))
+            relativeContract = "./" + relativeContract;
+          nestedEl.setAttribute("contract", relativeContract);
+        }
+      }
+      const nestedResult = await parseHeadfullFSImports(
+        nestedHeadfullFSElements,
+        validations,
+        filePath,
+        importResolver,
+        jayHtmlBody,
+        projectRoot,
+        visited
+      );
+      headlessImports.push(...nestedResult.headlessImports);
+      if (nestedResult.css) {
+        cssParts.push(nestedResult.css);
+      }
+      linkedCssFiles.push(...nestedResult.linkedCssFiles);
+      linkedComponentFiles.push(...nestedResult.linkedComponentFiles);
+    }
     const jayTags = body.querySelectorAll("*").filter((el) => el.tagName?.toLowerCase() === `jay:${contractName}`);
     for (const jayTag of jayTags) {
       const existingContent = jayTag.innerHTML.trim();
@@ -18413,7 +18540,6 @@ async function parseHeadfullFSImports(elements, validations, filePath, importRes
           }))
         }));
         const contractLinks = [contractLink, ...enumImportLinks];
-        const moduleResolveDir = projectRoot && projectRoot !== filePath ? projectRoot : filePath;
         let relativeModule = path.relative(
           filePath,
           importResolver.resolveLink(moduleResolveDir, src)
@@ -18449,7 +18575,8 @@ async function parseHeadfullFSImports(elements, validations, filePath, importRes
   return {
     headlessImports,
     css: cssParts.length > 0 ? cssParts.join("\n\n") : void 0,
-    linkedCssFiles
+    linkedCssFiles,
+    linkedComponentFiles
   };
 }
 function normalizeFilename(filename) {
@@ -18541,7 +18668,7 @@ function extractTrackByMaps(pageContract, headlessImports) {
   }
   return { serverTrackByMap, clientTrackByMap };
 }
-async function parseJayFile(html2, filename, filePath, options, linkedContractResolver, projectRoot) {
+async function parseJayFile(html2, filename, filePath, options, linkedContractResolver, projectRoot, sourceDir) {
   const normalizedFileName = normalizeFilename(filename);
   const baseElementName = capitalCase(normalizedFileName, { delimiter: "" });
   const root = parse_2(html2);
@@ -18572,7 +18699,10 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
     filePath,
     linkedContractResolver,
     body,
-    projectRoot
+    projectRoot,
+    void 0,
+    // visited
+    sourceDir
   );
   const headlessImports = await parseHeadlessImports(
     root.querySelectorAll('script[type="application/jay-headless"]'),
@@ -18617,6 +18747,7 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
   if (headfullFSResult.linkedCssFiles.length > 0) {
     allLinkedCssFiles = [...allLinkedCssFiles, ...headfullFSResult.linkedCssFiles];
   }
+  const allLinkedComponentFiles = headfullFSResult.linkedComponentFiles;
   const { serverTrackByMap, clientTrackByMap } = extractTrackByMaps(
     jayYaml.parsedContract,
     allHeadlessImports
@@ -18633,6 +18764,7 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
       headLinks,
       css,
       linkedCssFiles: allLinkedCssFiles.length > 0 ? allLinkedCssFiles : void 0,
+      linkedComponentFiles: allLinkedComponentFiles.length > 0 ? allLinkedComponentFiles : void 0,
       filename: normalizedFileName,
       contract: jayYaml.parsedContract,
       contractRef: jayYaml.contractRef,
@@ -19342,6 +19474,9 @@ function parseContract(contractYaml, fileName) {
     }
     const contract = {
       name: parsedYaml.name,
+      ...typeof parsedYaml.description === "string" && {
+        description: parsedYaml.description
+      },
       tags: parsedTags,
       ...parsedProps && parsedProps.length > 0 && { props: parsedProps },
       ...parsedParams && parsedParams.length > 0 && { params: parsedParams }
@@ -19471,7 +19606,7 @@ function renderHydrateElement(element, context) {
       context.interactivePaths
     );
     const renderedCondition = parseCondition(condition, context.variables);
-    const coordinate = element.getAttribute(COORD_ATTR$1) || "0";
+    const coordinate = element.getAttribute(COORD_ATTR) || "0";
     const childContent = renderHydrateElementContent(
       element,
       context,
@@ -19501,11 +19636,13 @@ function renderHydrateElement(element, context) {
     );
     const createElementFunc = needDynamicElement ? "de" : "e";
     const createElementImport = needDynamicElement ? Import.dynamicElement : Import.element;
-    const createBody = `() => ${createElementFunc}('${element.rawTagName}', ${createAttributes.rendered}, [${createChildren.rendered}])`;
+    const createRef = renderElementRef$1(element, createRenderContext);
+    const createRefSuffix = createRef.rendered ? `, ${createRef.rendered}` : "";
+    const createBody = `() => ${createElementFunc}('${element.rawTagName}', ${createAttributes.rendered}, [${createChildren.rendered}]${createRefSuffix})`;
     return new RenderFragment(
       `${context.indent.firstLine}hydrateConditional(${renderedCondition.rendered}, ${adoptBody},
 ${context.indent.firstLine}    ${createBody})`,
-      Imports.for(Import.hydrateConditional).plus(createElementImport).plus(renderedCondition.imports).plus(childContent.imports).plus(createChildren.imports).plus(createAttributes.imports),
+      Imports.for(Import.hydrateConditional).plus(createElementImport).plus(renderedCondition.imports).plus(childContent.imports).plus(createChildren.imports).plus(createAttributes.imports).plus(createRef.imports),
       [
         ...renderedCondition.validations,
         ...childContent.validations,
@@ -19527,15 +19664,14 @@ ${context.indent.firstLine}    ${createBody})`,
     const forEachFragment = forEachAccessor.render().map((_) => `(${paramName}: ${paramType}) => ${_}`);
     const preAdoptRefNameGenerator = context.refNameGenerator.clone();
     const itemChildNodes = filterContentNodes(element.childNodes);
-    const trackByExpr = `${forEachVariables.currentVar}.${trackBy}`;
+    `${forEachVariables.currentVar}.${trackBy}`;
     const itemContext = {
       ...context,
       variables: forEachVariables,
       indent: indent.child().child(),
       dynamicRef: true,
       // Refs inside forEach are collection refs
-      insideFastForEach: true,
-      varMappings: { ...context.varMappings, [trackBy]: trackByExpr }
+      insideFastForEach: true
     };
     const itemRenderCtx = buildRenderContext(itemContext);
     const itemAttrs = renderDynamicAttributes(element, itemRenderCtx);
@@ -19594,12 +19730,13 @@ ${context.indent.firstLine}    ${createBody})`,
           }
         }
       }
+      const itemRootCoord2 = element.getAttribute(COORD_ATTR) || "";
       const refSuffix = itemRefFragment.rendered ? `, ${itemRefFragment.rendered}` : "";
       const childrenArr = childParts.length ? `[
 ${childParts.join(",\n")},
 ${indent.firstLine}        ]` : "[]";
       adoptBody = `() => [
-${indent.firstLine}        adoptDynamicElement("", ${itemAttrs.rendered}, ${childrenArr}${refSuffix}),
+${indent.firstLine}        adoptDynamicElement("${itemRootCoord2}", ${itemAttrs.rendered}, ${childrenArr}${refSuffix}),
 ${indent.firstLine}    ]`;
       itemContent = new RenderFragment(
         "",
@@ -19613,12 +19750,13 @@ ${indent.firstLine}    ]`;
         ",\n"
       );
       if (needsItemAdoption) {
+        const itemRootCoord = element.getAttribute(COORD_ATTR) || "";
         const refSuffix = itemRefFragment.rendered ? `, ${itemRefFragment.rendered}` : "";
         const childrenArr = itemContent.rendered.trim() ? `[
 ${itemContent.rendered},
 ${indent.firstLine}        ]` : "[]";
         adoptBody = `() => [
-${indent.firstLine}        adoptElement("", ${itemAttrs.rendered}, ${childrenArr}${refSuffix}),
+${indent.firstLine}        adoptElement("${itemRootCoord}", ${itemAttrs.rendered}, ${childrenArr}${refSuffix}),
 ${indent.firstLine}    ]`;
       } else {
         adoptBody = itemContent.rendered.trim() ? `() => [
@@ -19661,8 +19799,9 @@ ${indent.firstLine}    }`;
     if (needsItemAdoption && !itemHasInteractiveChildren) {
       allImports = allImports.plus(Import.adoptElement);
     }
+    const itemRootCoordForEach = element.getAttribute(COORD_ATTR) || "0";
     const hydrateForEachFragment = new RenderFragment(
-      `${indent.firstLine}hydrateForEach(${forEachFragment.rendered}, '${trackBy}',
+      `${indent.firstLine}hydrateForEach(${forEachFragment.rendered}, '${trackBy}', '${itemRootCoordForEach}',
 ${indent.firstLine}    ${adoptBody},
 ${indent.firstLine}    ${createBody},
 ${indent.firstLine})`,
@@ -19693,14 +19832,12 @@ ${indent.firstLine})`,
     const itemTypeName = slowForEachVariables.currentType.name;
     const paramName = arrayAccessor.rootVar;
     const getItemsFragment = arrayAccessor.render().map((_) => `(${paramName}: ${parentTypeName}) => ${_}`);
-    const accumulatedJayTrackBy = context.slowForEachJayTrackBy ? `${context.slowForEachJayTrackBy}/${jayTrackBy}` : jayTrackBy;
     const itemContext = {
       ...context,
       variables: slowForEachVariables,
       indent: indent.child().child(),
       dynamicRef: true,
-      insideSlowForEach: true,
-      slowForEachJayTrackBy: accumulatedJayTrackBy
+      insideSlowForEach: true
     };
     buildRenderContext(itemContext);
     const itemChildNodes = filterContentNodes(element.childNodes);
@@ -19741,13 +19878,15 @@ ${indent.firstLine})`,
           }
         }
         const childrenArr = childParts.join(",\n");
-        callbackBody = `adoptDynamicElement('', {}, [
+        const itemCoord = element.getAttribute(COORD_ATTR) || "";
+        callbackBody = `adoptDynamicElement('${itemCoord}', {}, [
 ${childrenArr},
 ${indent.firstLine}    ])`;
         callbackImports = callbackImports.plus(Import.adoptDynamicElement);
       } else {
+        const itemCoord = element.getAttribute(COORD_ATTR) || "";
         const childrenArr = nonEmptyChildren.map((f) => f.rendered).join(",\n");
-        callbackBody = `adoptElement('', {}, [
+        callbackBody = `adoptElement('${itemCoord}', {}, [
 ${childrenArr},
 ${indent.firstLine}    ])`;
         for (const f of nonEmptyChildren) {
@@ -19809,16 +19948,13 @@ function renderHydrateHeadlessInstance(element, context, renderContext, contract
   const coordResult = extractHeadlessCoordinate(element, contractName);
   if (isValidationError(coordResult))
     return coordResult;
-  const { instanceCoord, coordSegments, coordinateSuffix } = coordResult;
+  const { instanceCoord, coordSegments, coordinateSuffix, childScopeId } = coordResult;
   const isInsideForEach = context.insideFastForEach;
   let coordinateKey2;
   if (isInsideForEach) {
     coordinateKey2 = void 0;
-  } else if (context.insideSlowForEach) {
-    const prefix = coordSegments[0];
-    coordinateKey2 = computeInstanceKey(coordinateSuffix, "slowForEach", prefix);
   } else {
-    coordinateKey2 = computeInstanceKey(coordinateSuffix, "static");
+    coordinateKey2 = instanceCoord;
   }
   const componentVariables = new Variables(headlessImport.rootType);
   const childNodes = filterContentNodes(element.childNodes);
@@ -19836,10 +19972,10 @@ function renderHydrateHeadlessInstance(element, context, renderContext, contract
     importedRefNameToRef: instanceRefMap,
     dynamicRef: false,
     insideFastForEach: false,
-    headlessContractNames: /* @__PURE__ */ new Set(),
-    headlessImports: [],
-    varMappings: {},
-    instanceCoordPrefix: instanceCoord,
+    // Pass headless contract names and imports through so nested headless instances
+    // inside headfull FS component templates can be detected (DL#123)
+    headlessContractNames: context.headlessContractNames,
+    headlessImports: context.headlessImports,
     interactivePaths: buildInteractivePaths(headlessImport.contract)
   };
   const adoptRenderContext = buildRenderContext(adoptItemContext);
@@ -19854,6 +19990,7 @@ function renderHydrateHeadlessInstance(element, context, renderContext, contract
       // forceAdopt
     );
   } else {
+    const wrapperCoord = childScopeId ? `${childScopeId}/0` : "0";
     const adoptChildContext = {
       ...adoptItemContext
     };
@@ -19862,7 +19999,7 @@ function renderHydrateHeadlessInstance(element, context, renderContext, contract
       ",\n"
     );
     adoptInlineBody = new RenderFragment(
-      `${adoptChildIndent.firstLine}adoptElement("0", {}, [
+      `${adoptChildIndent.firstLine}adoptElement("${wrapperCoord}", {}, [
 ${adoptChildren.rendered}
 ${adoptChildIndent.firstLine}])`,
       adoptChildren.imports.plus(Import.adoptElement),
@@ -19923,8 +20060,10 @@ ${adoptInlineBody.rendered}
       dynamicRef: false,
       isInsideGuard: true,
       insideFastForEach: false,
-      headlessContractNames: /* @__PURE__ */ new Set(),
-      headlessImports: [],
+      // Pass headless contract names and imports through so nested headless instances
+      // inside headfull FS component templates can be detected (DL#123)
+      headlessContractNames: renderContext.headlessContractNames,
+      headlessImports: renderContext.headlessImports,
       coordinatePrefix: [],
       coordinateCounters: /* @__PURE__ */ new Map()
     };
@@ -20003,10 +20142,10 @@ const ${createComponentSymbol} = makeHeadlessInstanceComponent(
   );
   if (renderedRef.rendered !== "")
     renderedRef = renderedRef.map((_) => ", " + _);
-  const coordKeyArg = isInsideForEach || context.insideSlowForEach ? `'${coordSegments.slice(1).join("/")}'` : `'${instanceCoord}'`;
+  const scopeRootCoord = childScopeId ? `'${childScopeId}/0'` : "undefined";
   if (ifCondition) {
     const renderedCondition = parseCondition(ifCondition, context.variables);
-    const adoptCall = `() => childCompHydrate(${adoptComponentSymbol}, ${getProps}, ${coordKeyArg}${renderedRef.rendered})`;
+    const adoptCall = `() => childCompHydrate(${adoptComponentSymbol}, ${getProps}, ${scopeRootCoord}${renderedRef.rendered})`;
     const createCall = `() => childComp(${createComponentSymbol}, ${getProps}${renderedRef.rendered})`;
     const callExpr = `${context.indent.firstLine}hydrateConditional(${renderedCondition.rendered}, ${adoptCall},
 ${context.indent.firstLine}    ${createCall})`;
@@ -20022,7 +20161,7 @@ ${context.indent.firstLine}    ${createCall})`;
     );
   }
   return new RenderFragment(
-    `${context.indent.firstLine}childCompHydrate(${adoptComponentSymbol}, ${getProps}, ${coordKeyArg}${renderedRef.rendered})`,
+    `${context.indent.firstLine}childCompHydrate(${adoptComponentSymbol}, ${getProps}, ${scopeRootCoord}${renderedRef.rendered})`,
     Imports.for(Import.childCompHydrate).plus(propsGetterAndRefs.imports).plus(renderedRef.imports),
     [
       ...propsGetterAndRefs.validations,
@@ -20077,22 +20216,7 @@ function renderHydrateElementContent(element, context, renderContext, coordinate
       ",\n"
     );
   }
-  const coordTemplate = element.getAttribute(COORD_ATTR$1);
-  let coordinate = coordTemplate || coordinateOverride || "0";
-  if (context.instanceCoordPrefix && coordTemplate?.startsWith(context.instanceCoordPrefix + "/")) {
-    coordinate = coordTemplate.slice(context.instanceCoordPrefix.length + 1);
-  }
-  if (context.insideFastForEach && coordinate.startsWith("$")) {
-    const slashIndex = coordinate.indexOf("/");
-    coordinate = slashIndex >= 0 ? coordinate.slice(slashIndex + 1) : "0";
-  }
-  if (context.slowForEachJayTrackBy && coordTemplate) {
-    if (coordinate === context.slowForEachJayTrackBy) {
-      coordinate = "";
-    } else if (coordinate.startsWith(context.slowForEachJayTrackBy + "/")) {
-      coordinate = coordinate.slice(context.slowForEachJayTrackBy.length + 1);
-    }
-  }
+  const coordinate = element.getAttribute(COORD_ATTR) || coordinateOverride || "0";
   const renderedRef = renderElementRef$1(element, renderContext);
   if (hasInteractiveChildren) {
     const childParts = [];
@@ -20182,12 +20306,23 @@ function renderHydrateElementContent(element, context, renderContext, coordinate
   }
   if (textFragment && !hasDynamicAttrs) {
     const accessor = textFragment.rendered.replace(/^dt\(/, "").replace(/\)$/, "");
-    const refSuffix2 = renderedRef.rendered ? `, ${renderedRef.rendered}` : "";
+    if (refName) {
+      const refSuffix2 = renderedRef.rendered ? `, ${renderedRef.rendered}` : "";
+      return new RenderFragment(
+        `${indent.firstLine}adoptElement("${coordinate}", ${attributes2.rendered}, [adoptText("${coordinate}", ${accessor})]${refSuffix2})`,
+        Imports.for(Import.adoptElement).plus(Import.adoptText).plus(textFragment.imports.minus(Import.dynamicText)).plus(renderedRef.imports).plus(attributes2.imports),
+        [
+          ...textFragment.validations,
+          ...renderedRef.validations,
+          ...attributes2.validations
+        ],
+        renderedRef.refs
+      );
+    }
     return new RenderFragment(
-      `${indent.firstLine}adoptText("${coordinate}", ${accessor}${refSuffix2})`,
-      Imports.for(Import.adoptText).plus(textFragment.imports.minus(Import.dynamicText)).plus(renderedRef.imports),
-      [...textFragment.validations, ...renderedRef.validations],
-      renderedRef.refs
+      `${indent.firstLine}adoptText("${coordinate}", ${accessor})`,
+      Imports.for(Import.adoptText).plus(textFragment.imports.minus(Import.dynamicText)),
+      [...textFragment.validations]
     );
   }
   if (hasDynamicAttrs) {
@@ -20255,7 +20390,6 @@ function renderHydrate(types2, body, importStatements, elementType, preRenderTyp
     headlessInstanceCounter: { count: 0 },
     insideFastForEach: false,
     insideSlowForEach: false,
-    varMappings: {},
     interactivePaths: buildInteractivePaths(contract)
   };
   const rootElement = ensureSingleChildElement(body);
@@ -20468,7 +20602,7 @@ function renderChildCompProps$1(element, { variables }, contractProps) {
   Object.keys(attributes2).forEach((attrName) => {
     let attrCanonical = attrName.toLowerCase();
     let attrKey = attrName.match(attributesRequiresQuotes$1) ? `"${attrName}"` : attrName;
-    if (attrCanonical === "if" || attrCanonical === "foreach" || attrCanonical === "trackby" || attrCanonical === "jay-coordinate-base")
+    if (attrCanonical === "if" || attrCanonical === "foreach" || attrCanonical === "trackby" || attrCanonical === "jay-coordinate-base" || attrCanonical === "jay-scope")
       return;
     if (attrCanonical === "props") {
       isPropsDirectAssignment = true;
@@ -20742,8 +20876,9 @@ ${indent.curr}return ${childElement.rendered}}, '${trackBy}')`,
         recursiveRegions: [],
         isInsideGuard: false,
         insideFastForEach: false,
-        // Don't detect nested headless instances inside headless instances (for now)
-        headlessContractNames: /* @__PURE__ */ new Set()
+        // Pass headless contract names through so nested headless instances
+        // inside headfull FS component templates can be detected (DL#123)
+        headlessContractNames: newContext.headlessContractNames
       };
       const renderedChildren = childNodes.map((_) => renderNode(_, childContext)).reduce(
         (prev, current) => RenderFragment.merge(prev, current, ",\n"),
@@ -20779,7 +20914,8 @@ ${renderedChildren.rendered}
     }
     const isInsideForEach = newContext.insideFastForEach;
     const coordinateSuffix = `${contractName}:${coordinateRef}`;
-    const coordinateKey2 = isInsideForEach ? void 0 : [...newContext.coordinatePrefix, coordinateSuffix].join("/");
+    const instanceCoordBase = htmlElement.getAttribute("jay-coordinate-base");
+    const coordinateKey2 = isInsideForEach ? void 0 : instanceCoordBase || [...newContext.coordinatePrefix, coordinateSuffix].join("/");
     const renderFnCode = `
 // Inline template for headless component: ${contractName} #${idx}
 type ${elementType} = JayElement<${interactiveViewStateType}, ${refsTypeName}>;
@@ -21106,6 +21242,7 @@ function renderFunctionImplementation$1(types2, rootBodyElement, importStatement
   const { importedSymbols, importedSandboxedSymbols } = processImportedComponents(importStatements);
   const importedRefNameToRef = processImportedHeadless(headlessImports);
   const headlessContractNames = new Set(headlessImports.map((h) => h.contractName));
+  assignCoordinates(rootBodyElement, { headlessContractNames });
   const rootElement = ensureSingleChildElement(rootBodyElement);
   let renderedRoot;
   const usedComponentImports = /* @__PURE__ */ new Set();
@@ -22094,28 +22231,16 @@ ${indent.firstLine}}`,
     const arrayExpr = forEachAccessor.render().rendered;
     const itemIndent = new Indent(indent.curr + "    ");
     const trackByExpr = `${forEachVariables.currentVar}.${trackBy}`;
-    const slowPrefix = context.slowForEachCoordPrefix ? `'${context.slowForEachCoordPrefix}'` : void 0;
-    const ancestorPrefix = context.forEachAccumulatedPrefix ?? slowPrefix;
-    const currentTrackByPrefix = `escapeAttr(String(${trackByExpr}))`;
-    const accumulatedPrefix = ancestorPrefix ? `${ancestorPrefix} + '/' + ${currentTrackByPrefix}` : currentTrackByPrefix;
     const itemContext = {
       ...context,
       variables: forEachVariables,
       indent: itemIndent,
       varMappings: { ...context.varMappings, [trackBy]: trackByExpr },
-      insideForEach: true,
-      forEachAccumulatedPrefix: accumulatedPrefix,
-      forEachAncestorPrefix: ancestorPrefix,
-      slowForEachCoordPrefix: void 0
-      // consumed by ancestorPrefix computation
+      insideForEach: true
     };
     const openTag = renderServerOpenTag(element, itemContext, null);
-    const itemRootCoordExpr = accumulatedPrefix;
-    const coordinateW = w(
-      itemIndent,
-      `' jay-coordinate="' + ${itemRootCoordExpr} + '">'`,
-      Imports.for(Import.escapeAttr)
-    );
+    const itemCoord = element.getAttribute(COORD_ATTR);
+    const coordinateW = itemCoord ? w(itemIndent, `' jay-coordinate="${itemCoord}">'`) : w(itemIndent, `'>'`);
     const childNodes = filterContentNodes(element.childNodes);
     const children = mergeServerFragments(
       childNodes.map((child) => renderServerNode(child, itemContext))
@@ -22140,13 +22265,11 @@ ${indent.firstLine}}`,
       const { accessor: arrayAccessor, childVariables: slowForEachVariables } = slowValidated;
       const arrayExpr = arrayAccessor.render().rendered;
       const itemVar = slowForEachVariables.currentVar;
-      const slowCoordPrefix = context.slowForEachCoordPrefix ? `${context.slowForEachCoordPrefix}/${jayTrackBy}` : jayTrackBy;
       const itemContext = {
         ...context,
         variables: slowForEachVariables,
         indent,
-        insideSlowForEach: true,
-        slowForEachCoordPrefix: slowCoordPrefix
+        insideSlowForEach: true
       };
       const childContent = renderServerElementContent(element, itemContext, {
         isRoot: true
@@ -22158,8 +22281,7 @@ ${indent.firstLine}}`,
           ...context,
           variables: slowForEachVariables,
           indent: itemIndent,
-          insideSlowForEach: true,
-          slowForEachCoordPrefix: slowCoordPrefix
+          insideSlowForEach: true
         };
         const indentedContent = renderServerElementContent(element, indentedContext, {
           isRoot: true
@@ -22195,11 +22317,8 @@ function renderServerHeadlessInstance(element, context, contractName) {
     const trackByKeys = Object.keys(context.varMappings);
     const trackByExpr = trackByKeys.length > 0 ? context.varMappings[trackByKeys[trackByKeys.length - 1]] : "undefined";
     instanceKeyExpr = `String(${trackByExpr}) + ',${coordinateSuffix}'`;
-  } else if (context.insideSlowForEach) {
-    const prefix = coordSegments[0];
-    instanceKeyExpr = `'${computeInstanceKey(coordinateSuffix, "slowForEach", prefix)}'`;
   } else {
-    instanceKeyExpr = `'${computeInstanceKey(coordinateSuffix, "static")}'`;
+    instanceKeyExpr = `'${instanceCoord}'`;
   }
   const ifCondition = element.attributes.if;
   const componentVariables = new Variables(headlessImport.rootType, void 0, 0, varName);
@@ -22214,8 +22333,9 @@ function renderServerHeadlessInstance(element, context, contractName) {
     ...context,
     variables: componentVariables,
     indent: bodyIndent,
-    // Don't detect nested headless instances inside headless instances (for now)
-    headlessContractNames: /* @__PURE__ */ new Set(),
+    // Pass headless contract names through so nested headless instances
+    // inside headfull FS component templates can be detected (DL#123)
+    headlessContractNames: context.headlessContractNames,
     interactivePaths: buildInteractivePaths(headlessImport.contract)
   };
   const renderedChildren = mergeServerFragments(
@@ -22294,7 +22414,7 @@ function renderServerAttributes(element, context) {
           )
         );
       } else {
-        const escaped = attrValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+        const escaped = escapeForJsString(attrValue);
         parts.push(w(indent, `' ${attrCanonical}="${escaped}"'`));
       }
     } else if (attrCanonical === "class") {
@@ -22309,7 +22429,7 @@ function renderServerAttributes(element, context) {
           )
         );
       } else {
-        const escaped = attrValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+        const escaped = escapeForJsString(attrValue);
         parts.push(w(indent, `' class="${escaped}"'`));
       }
     } else if (attrCanonical === "style") {
@@ -22326,7 +22446,7 @@ function renderServerAttributes(element, context) {
           )
         );
       } else {
-        const escaped = attrValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+        const escaped = escapeForJsString(attrValue);
         parts.push(w(indent, `' style="${escaped}"'`));
       }
     } else {
@@ -22343,7 +22463,7 @@ function renderServerAttributes(element, context) {
           )
         );
       } else {
-        const escaped = attrValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+        const escaped = escapeForJsString(attrValue);
         parts.push(w(indent, `' ${attrCanonical}="${escaped}"'`));
       }
     }
@@ -22425,7 +22545,7 @@ function renderServerElementAsString(element, context, overrideCoordinate) {
     }
   }
   const needsCoordinate = overrideCoordinate !== void 0 || dynamicTextFragment !== null || refName !== null || hasDynamicAttributeBindings(element, variables) || hasInteractiveChildElements(childNodes) || hasMixedContentDynamicText(childNodes);
-  const coordTemplate = element.getAttribute(COORD_ATTR$1);
+  const coordTemplate = element.getAttribute(COORD_ATTR);
   const coordinate = coordTemplate || (needsCoordinate ? overrideCoordinate || null : null);
   const isVoid = voidElements.has(element.rawTagName.toLowerCase());
   const closeTag = isVoid ? " />" : ">";
@@ -22492,7 +22612,7 @@ function renderServerAttributesAsString(element, context) {
           )
         );
       } else {
-        const escaped = attrValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+        const escaped = escapeForJsString(attrValue);
         parts.push(new RenderFragment(`' ${attrCanonical}="${escaped}"'`));
       }
     } else if (attrCanonical === "class") {
@@ -22506,7 +22626,7 @@ function renderServerAttributesAsString(element, context) {
           )
         );
       } else {
-        const escaped = attrValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+        const escaped = escapeForJsString(attrValue);
         parts.push(new RenderFragment(`' class="${escaped}"'`));
       }
     } else if (attrCanonical === "style") {
@@ -22522,7 +22642,7 @@ function renderServerAttributesAsString(element, context) {
           )
         );
       } else {
-        const escaped = attrValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+        const escaped = escapeForJsString(attrValue);
         parts.push(new RenderFragment(`' style="${escaped}"'`));
       }
     } else {
@@ -22538,7 +22658,7 @@ function renderServerAttributesAsString(element, context) {
           )
         );
       } else {
-        const escaped = attrValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+        const escaped = escapeForJsString(attrValue);
         parts.push(new RenderFragment(`' ${attrCanonical}="${escaped}"'`));
       }
     }
@@ -22610,7 +22730,7 @@ function renderServerElementContent(element, context, options) {
   }
   const refName = element.attributes.ref ? camelCase(element.attributes.ref) : null;
   const needsCoordinate = options?.isRoot === true || isConditional(element) && conditionIsInteractive(element.getAttribute("if"), context.interactivePaths) || dynamicTextFragment !== null || refName !== null || hasDynamicAttributeBindings(element, variables) || hasInteractiveChildElements(childNodes) || hasMixedContentDynamicTextInteractive(childNodes, context.interactivePaths);
-  const coordTemplate = needsCoordinate ? element.getAttribute(COORD_ATTR$1) : null;
+  const coordTemplate = needsCoordinate ? element.getAttribute(COORD_ATTR) : null;
   const isVoid = voidElements.has(element.rawTagName.toLowerCase());
   const closeTag = isVoid ? " />" : ">";
   const parts = [];
@@ -22620,38 +22740,7 @@ function renderServerElementContent(element, context, options) {
     parts.push(attrs);
   }
   if (coordTemplate !== null) {
-    if (isStaticCoordinate(coordTemplate)) {
-      if (context.forEachAccumulatedPrefix) {
-        parts.push(
-          w(
-            indent,
-            `' jay-coordinate="' + ${context.forEachAccumulatedPrefix} + '/${coordTemplate}"${closeTag}'`,
-            Imports.for(Import.escapeAttr)
-          )
-        );
-      } else {
-        parts.push(w(indent, `' jay-coordinate="${coordTemplate}"${closeTag}'`));
-      }
-    } else {
-      const coordExpr = compileCoordinateExpr(coordTemplate, context.varMappings);
-      if (context.forEachAncestorPrefix) {
-        parts.push(
-          w(
-            indent,
-            `' jay-coordinate="' + ${context.forEachAncestorPrefix} + '/' + ${coordExpr} + '"${closeTag}'`,
-            Imports.for(Import.escapeAttr)
-          )
-        );
-      } else {
-        parts.push(
-          w(
-            indent,
-            `' jay-coordinate="' + ${coordExpr} + '"${closeTag}'`,
-            Imports.for(Import.escapeAttr)
-          )
-        );
-      }
-    }
+    parts.push(w(indent, `' jay-coordinate="${coordTemplate}"${closeTag}'`));
   } else {
     parts.push(w(indent, `'${closeTag}'`));
   }
@@ -29593,7 +29682,18 @@ const JAY_IMPORT_RESOLVER = {
     const resolvedPath = src.startsWith(".") ? path.resolve(importingModuleDir, src) : src;
     const jayHtmlPath = resolvedPath + ".jay-html";
     try {
-      return fs$1.readFileSync(jayHtmlPath, "utf-8");
+      const content = fs$1.readFileSync(jayHtmlPath, "utf-8");
+      return { content, componentDir: path.dirname(jayHtmlPath), filePath: jayHtmlPath };
+    } catch {
+    }
+    const dirJayHtmlPath = path.resolve(resolvedPath, path.basename(resolvedPath)) + ".jay-html";
+    try {
+      const content = fs$1.readFileSync(dirJayHtmlPath, "utf-8");
+      return {
+        content,
+        componentDir: path.dirname(dirJayHtmlPath),
+        filePath: dirJayHtmlPath
+      };
     } catch {
       return null;
     }
@@ -29936,16 +30036,17 @@ function discoverHeadlessInstances(preRenderedJayHtml) {
       if (!insidePreservedForEach) {
         const hasUnresolvedProps = Object.values(props).some((v) => hasBindings(v));
         if (!hasUnresolvedProps) {
-          const prefix = buildCoordinatePrefix(element);
           let ref = element.getAttribute("ref");
           if (!ref) {
+            const prefix = buildCoordinatePrefix(element);
             const counterKey = [...prefix, contractName].join("/");
             const localIndex = coordinateCounters.get(counterKey) ?? 0;
             coordinateCounters.set(counterKey, localIndex + 1);
             ref = `AR${localIndex}`;
             element.setAttribute("ref", ref);
           }
-          const coordinate = [...prefix, `${contractName}:${ref}`];
+          const coordBase = element.getAttribute("jay-coordinate-base");
+          const coordinate = coordBase ? coordBase.split("/") : [...buildCoordinatePrefix(element), `${contractName}:${ref}`];
           instances.push({
             contractName,
             props,
@@ -29971,6 +30072,11 @@ function discoverHeadlessInstances(preRenderedJayHtml) {
           });
         }
       }
+      for (const child of element.childNodes) {
+        if (child.nodeType === NodeType.ELEMENT_NODE) {
+          walk(child, insidePreservedForEach, forEachContexts);
+        }
+      }
       return;
     }
     const updatedForEachContexts = hasForEach && forEachAttr && trackByAttr ? [...forEachContexts, { forEachPath: forEachAttr, trackBy: trackByAttr }] : forEachContexts;
@@ -30044,6 +30150,11 @@ function resolveHeadlessInstances(preRenderedJayHtml, instanceData, importResolv
           }
         }
       }
+      for (const child of element.childNodes) {
+        if (child.nodeType === NodeType.ELEMENT_NODE) {
+          walkAndResolve(child, insidePreservedForEach || hasForEach);
+        }
+      }
       return;
     }
     for (const child of element.childNodes) {