@jay-framework/compiler-jay-html 0.7.0 → 0.9.0

package/dist/index.js

@@ -4,6 +4,389 @@ 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)
+  };
+}
+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(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 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) {
+  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) && tag.tags) {
+      const result = extractPropertyPathsAndArrays(
+        tag.tags,
+        targetPhase,
+        currentPath,
+        effectivePhase
+      );
+      if (result.paths.length > 0) {
+        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 {
+      if (shouldIncludeInPhase(effectivePhase, targetPhase)) {
+        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 = []) {
+  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) && tag.tags) {
+      for (const childTag of tag.tags) {
+        if (childTag.type.includes(ContractTagType.interactive) && !childTag.dataType) {
+          continue;
+        }
+        count++;
+      }
+      return count;
+    }
+    if (tag.type.includes(ContractTagType.subContract) && tag.tags) {
+      const result = countTotalProperties(tag.tags, targetPath, newPath);
+      if (result > 0) {
+        return result;
+      }
+    }
+  }
+  return count;
+}
+function buildPickExpression(baseTypeName, pathGroups, arrays, asyncProps, contractTags, currentPath = []) {
+  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 = currentPath.length > 0 ? `${baseTypeName}${currentPath.map((p) => `['${p}']`).join("")}` : baseTypeName;
+    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 childProperties = pathGroups.get(childPathKey) || [];
+    const totalProperties = countTotalProperties(contractTags, childPath);
+    const isPickingAllProperties = totalProperties > 0 && childProperties.length === totalProperties;
+    const childExpression = buildPickExpression(
+      baseTypeName,
+      pathGroups,
+      arrays,
+      asyncProps,
+      contractTags,
+      childPath
+    );
+    if (childExpression) {
+      let fullExpression;
+      const originalPathAccess = `${baseTypeName}${childPath.map((p) => `['${p}']`).join("")}`;
+      if (isPickingAllProperties && childExpression === `Pick<${originalPathAccess}, ${childProperties.map((p) => `'${p}'`).join(" | ")}>`) {
+        const directTypeRef = originalPathAccess;
+        if (isAsync) {
+          if (isArray) {
+            fullExpression = `Promise<Array<${directTypeRef}[number]>>`;
+          } else {
+            fullExpression = `Promise<${directTypeRef}>`;
+          }
+        } else if (isArray) {
+          fullExpression = `Array<${directTypeRef}[number]>`;
+        } else {
+          fullExpression = directTypeRef;
+        }
+      } else {
+        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) {
+          const arrayElementAccess = `${originalPathAccess}[number]`;
+          fullExpression = `Array<${childExpression.replace(originalPathAccess, arrayElementAccess)}>`;
+        } 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) {
+  const phaseName = phase === "fast+interactive" ? "Interactive" : pascalCase(phase);
+  const typeName = `${pascalCase(contract.name)}${phaseName}ViewState`;
+  const { paths, arrays, asyncProps } = extractPropertyPathsAndArrays(contract.tags, phase);
+  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
+  );
+  return `export type ${typeName} = ${pickExpression};`;
+}
+function generateAllPhaseViewStateTypes(contract, baseTypeName) {
+  const slowType = generatePhaseViewStateType(contract, "slow", baseTypeName);
+  const fastType = generatePhaseViewStateType(contract, "fast", baseTypeName);
+  const interactiveType = generatePhaseViewStateType(contract, "fast+interactive", baseTypeName);
+  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;
@@ -460,8 +843,8 @@ var __extends$2 = commonjsGlobal && commonjsGlobal.__extends || function() {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-var __assign$3 = commonjsGlobal && commonjsGlobal.__assign || function() {
-  __assign$3 = 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)
@@ -470,7 +853,7 @@ var __assign$3 = commonjsGlobal && commonjsGlobal.__assign || function() {
     }
     return t;
   };
-  return __assign$3.apply(this, arguments);
+  return __assign$2.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;
@@ -809,7 +1192,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$3({}, node2.attribs), children);
+    var clone_1 = new Element(node2.name, __assign$2({}, node2.attribs), children);
     children.forEach(function(child) {
       return child.parent = clone_1;
     });
@@ -817,10 +1200,10 @@ function cloneNode(node2, recursive) {
       clone_1.namespace = node2.namespace;
     }
     if (node2["x-attribsNamespace"]) {
-      clone_1["x-attribsNamespace"] = __assign$3({}, node2["x-attribsNamespace"]);
+      clone_1["x-attribsNamespace"] = __assign$2({}, node2["x-attribsNamespace"]);
     }
     if (node2["x-attribsPrefix"]) {
-      clone_1["x-attribsPrefix"] = __assign$3({}, node2["x-attribsPrefix"]);
+      clone_1["x-attribsPrefix"] = __assign$2({}, node2["x-attribsPrefix"]);
     }
     result = clone_1;
   } else if (isCDATA(node2)) {
@@ -1823,8 +2206,8 @@ foreignNames.attributeNames = new Map([
 ].map(function(val) {
   return [val.toLowerCase(), val];
 }));
-var __assign$2 = commonjsGlobal && commonjsGlobal.__assign || function() {
-  __assign$2 = 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)
@@ -1833,7 +2216,7 @@ var __assign$2 = commonjsGlobal && commonjsGlobal.__assign || function() {
     }
     return t;
   };
-  return __assign$2.apply(this, arguments);
+  return __assign$1.apply(this, arguments);
 };
 var __createBinding$1 = commonjsGlobal && commonjsGlobal.__createBinding || (Object.create ? function(o, m, k, k2) {
   if (k2 === void 0)
@@ -1972,11 +2355,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$2(__assign$2({}, opts), { xmlMode: false });
+      opts = __assign$1(__assign$1({}, opts), { xmlMode: false });
     }
   }
   if (!opts.xmlMode && foreignElements.has(elem.name)) {
-    opts = __assign$2(__assign$2({}, opts), { xmlMode: "foreign" });
+    opts = __assign$1(__assign$1({}, opts), { xmlMode: "foreign" });
   }
   var tag = "<".concat(elem.name);
   var attribs = formatAttributes(elem.attribs, opts);
@@ -4709,8 +5092,8 @@ var __extends = commonjsGlobal && commonjsGlobal.__extends || function() {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-var __assign$1 = commonjsGlobal && commonjsGlobal.__assign || function() {
-  __assign$1 = Object.assign || function(t) {
+var __assign = commonjsGlobal && commonjsGlobal.__assign || function() {
+  __assign = Object.assign || function(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -4719,7 +5102,7 @@ var __assign$1 = commonjsGlobal && commonjsGlobal.__assign || function() {
     }
     return t;
   };
-  return __assign$1.apply(this, arguments);
+  return __assign.apply(this, arguments);
 };
 var __spreadArray = commonjsGlobal && commonjsGlobal.__spreadArray || function(to, from, pack) {
   if (pack || arguments.length === 2)
@@ -5048,7 +5431,7 @@ var HTMLElement = (
       if (content instanceof node_1$1.default) {
         content = [content];
       } else if (typeof content == "string") {
-        options = __assign$1(__assign$1({}, this._parseOptions), options);
+        options = __assign(__assign({}, this._parseOptions), options);
         var r = parse$3(content, options);
         content = r.childNodes.length ? r.childNodes : [new text_1$1.default(r.innerHTML, this)];
       }
@@ -5247,7 +5630,7 @@ var HTMLElement = (
       while (el) {
         var e2 = (0, css_select_1.selectOne)(selector, el, {
           xmlMode: true,
-          adapter: __assign$1(__assign$1({}, matcher_1.default), { getChildren: function(node2) {
+          adapter: __assign(__assign({}, matcher_1.default), { getChildren: function(node2) {
             var child = mapChild.get(node2);
             return child && [child];
           }, getSiblings: function(node2) {
@@ -10167,6 +10550,23 @@ class Variables {
       return variables;
     }
   }
+  childVariableForWithData(accessor) {
+    const path2 = accessor.terms.join(".");
+    if (this.children[path2])
+      return this.children[path2];
+    else {
+      let depth = 1;
+      let parent = this;
+      const maxDepth = 100;
+      while (parent && parent.parent && depth < maxDepth) {
+        depth++;
+        parent = parent.parent;
+      }
+      const variables = new Variables(accessor.resolvedType, this, depth);
+      this.children[path2] = variables;
+      return variables;
+    }
+  }
 }
 function doParse(expression, startRule, vars) {
   try {
@@ -10255,73 +10655,6 @@ function parseIsEnum(expression) {
 function parseEnumValues(expression) {
   return doParse(expression, "enum");
 }
-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(input, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return pascalCase(input, __assign({ transform: camelCaseTransform }, options));
-}
 function isConditional(node2) {
   return node2.nodeType !== NodeType.TEXT_NODE && node2.hasAttribute("if");
 }
@@ -10394,7 +10727,8 @@ function renderInterface(aType) {
       genInterface += Object.keys(aType.props).map((prop) => {
         let childType = aType.props[prop];
         if (childType instanceof JayImportedType) {
-          return `  ${prop}: ${childType.name}`;
+          const optional = childType.isOptional ? "?" : "";
+          return `  ${prop}${optional}: ${childType.name}`;
         } else if (isObjectType$1(childType)) {
           childInterfaces.push(renderInterface(childType));
           return `  ${prop}: ${childType.name}`;
@@ -10441,7 +10775,8 @@ ${childType.values.map((_) => "  " + _).join(",\n")}
               `Recursive type not resolved: ${childType.referencePath}`
             );
           }
-          return `  ${prop}: ${childType.resolvedType.name} | null`;
+          const nullSuffix = isArrayType$1(childType.resolvedType) ? "" : " | null";
+          return `  ${prop}: ${childType.resolvedType.name}${nullSuffix}`;
         } else
           throw new Error(`unknown type ${childType.name}, ${childType.kind}`);
       }).join(",\n");
@@ -10827,6 +11162,22 @@ const REFERENCE_MANAGER_TYPES = {
 function renderReferenceManager(refs, target) {
   const { referenceManagerInit, imports } = REFERENCE_MANAGER_TYPES[target];
   const options = target === 0 ? "options, " : "";
+  const usedRefManagerNames = /* @__PURE__ */ new Set();
+  const getUniqueRefManagerName = (baseName) => {
+    const baseCamelCase = camelCase(`${baseName}RefManager`);
+    if (!usedRefManagerNames.has(baseCamelCase)) {
+      usedRefManagerNames.add(baseCamelCase);
+      return baseCamelCase;
+    }
+    let suffix = 2;
+    let uniqueName = `${baseCamelCase}${suffix}`;
+    while (usedRefManagerNames.has(uniqueName)) {
+      suffix++;
+      uniqueName = `${baseCamelCase}${suffix}`;
+    }
+    usedRefManagerNames.add(uniqueName);
+    return uniqueName;
+  };
   const renderRefManagerNode = (name, refsTree) => {
     const elemRefs = refsTree.refs.filter((_) => !isComponentRef(_) && !isCollectionRef(_));
     const elemCollectionRefs = refsTree.refs.filter(
@@ -10849,7 +11200,7 @@ function renderReferenceManager(refs, target) {
     const childRenderedRefManagers = [];
     const childRefManagerMembers = [];
     Object.entries(refsTree.children).forEach(([childName, childRefNode]) => {
-      const name2 = camelCase(`${childName}RefManager`);
+      const name2 = getUniqueRefManagerName(childName);
       const rendered = renderRefManagerNode(name2, childRefNode);
       childRefManagerMembers.push(`    ${childName}: ${name2}`);
       childRenderedRefManagers.push(rendered);
@@ -11281,7 +11632,8 @@ ${indent.curr}return ${childElement.rendered}}, '${trackBy}')`,
       `${indent.firstLine}${asyncType.name}${resolvedGenericTypes}(${getPromiseFragment.rendered}, () => ${childElement.rendered.trim()})`,
       childElement.imports.plus(asyncType.import),
       [...getPromiseFragment.validations, ...childElement.validations],
-      childElement.refs
+      childElement.refs,
+      [...getPromiseFragment.recursiveRegions, ...childElement.recursiveRegions]
     );
   }
   function renderNestedComponent(htmlElement, newContext) {
@@ -11319,14 +11671,7 @@ ${indent.curr}return ${childElement.rendered}}, '${trackBy}')`,
           ]);
         }
         const accessorExpr = parseAccessor(accessor, variables);
-        let depth = 1;
-        let parent = variables;
-        const maxDepth = 100;
-        while (parent && parent.parent && depth < maxDepth) {
-          depth++;
-          parent = parent.parent;
-        }
-        const newVariables = new Variables(accessorExpr.resolvedType, variables, depth);
+        const newVariables = variables.childVariableForWithData(accessorExpr);
         const childNodes = htmlElement.childNodes.filter(
           (child) => child.nodeType !== NodeType.TEXT_NODE || child.innerText.trim() !== ""
         );
@@ -11341,12 +11686,13 @@ ${indent.curr}return ${childElement.rendered}}, '${trackBy}')`,
           indent
         });
         const accessorFunction = `(${variables.currentVar}: ${variables.currentType.name}) => ${accessorExpr.render().rendered}`;
+        const nestedChildElement = nestRefs(accessorExpr.terms, childElement);
         return new RenderFragment(
-          `${indent.firstLine}withData(${accessorFunction}, () => ${childElement.rendered})`,
-          childElement.imports.plus(Import.withData).plus(accessorExpr.render().imports),
-          [...accessorExpr.validations, ...childElement.validations],
-          childElement.refs,
-          childElement.recursiveRegions
+          `${indent.firstLine}withData(${accessorFunction}, () => ${nestedChildElement.rendered})`,
+          nestedChildElement.imports.plus(Import.withData).plus(accessorExpr.render().imports),
+          [...accessorExpr.validations, ...nestedChildElement.validations],
+          nestedChildElement.refs,
+          nestedChildElement.recursiveRegions
         );
       } else if (isRecurse(htmlElement)) {
         const refAttr = htmlElement.getAttribute("ref");
@@ -11778,8 +12124,68 @@ ${renderedRefsManager}
     renderedBridge.refs
   );
 }
+function generatePhaseSpecificTypes(jayFile) {
+  const baseName = jayFile.baseElementName;
+  const actualViewStateTypeName = jayFile.types.name;
+  if (jayFile.contract) {
+    return generateAllPhaseViewStateTypes(jayFile.contract, actualViewStateTypeName);
+  }
+  if (jayFile.hasInlineData) {
+    return [
+      `export type ${baseName}SlowViewState = {};`,
+      `export type ${baseName}FastViewState = {};`,
+      `export type ${baseName}InteractiveViewState = ${actualViewStateTypeName};`
+    ].join("\n");
+  }
+  return "";
+}
 function generateElementDefinitionFile(parsedFile) {
   return parsedFile.map((jayFile) => {
+    const baseName = jayFile.baseElementName;
+    if (jayFile.contract && jayFile.contractRef) {
+      const contractFileName = path.basename(jayFile.contractRef, ".jay-contract");
+      const contractImport = `import {
+    ${baseName}ViewState,
+    ${baseName}Refs as ${baseName}ElementRefs,
+    ${baseName}SlowViewState,
+    ${baseName}FastViewState,
+    ${baseName}InteractiveViewState,
+    ${baseName}Contract
+} from './${contractFileName}.jay-contract';`;
+      const { renderedElement: renderedElement2, preRenderType: preRenderType2, renderedImplementation: renderedImplementation2 } = renderFunctionImplementation$1(
+        jayFile.types,
+        jayFile.body,
+        jayFile.imports,
+        jayFile.baseElementName,
+        jayFile.namespaces,
+        jayFile.headlessImports,
+        RuntimeMode.WorkerTrusted,
+        jayFile.headLinks
+      );
+      const cssImport2 = generateCssImport(jayFile);
+      const runtimeImports = renderImports$1(
+        renderedImplementation2.imports.plus(Import.jayElement).minus(Import.jayContract).minus(Import.HTMLElementProxy).minus(Import.HTMLElementCollectionProxy),
+        ImportsFor.definition,
+        jayFile.imports,
+        RuntimeMode.MainTrusted
+      );
+      const reExports = `
+// Re-export contract types for convenience
+export { ${baseName}ViewState, ${baseName}ElementRefs, ${baseName}SlowViewState, ${baseName}FastViewState, ${baseName}InteractiveViewState, ${baseName}Contract };
+`;
+      let htmlOnlyTypes = renderedElement2.replace(new RegExp(`export interface ${baseName}ViewState[\\s\\S]*?\\n}`, "g"), "").replace(
+        new RegExp(`export interface ${baseName}ElementRefs[\\s\\S]*?\\n}`, "g"),
+        ""
+      ).replace(new RegExp(`export type ${baseName}Contract = [\\s\\S]*?;`, "g"), "");
+      return [
+        contractImport,
+        runtimeImports,
+        cssImport2,
+        reExports,
+        htmlOnlyTypes,
+        renderFunctionDeclaration(preRenderType2)
+      ].filter((_) => _ !== null && _ !== "").join("\n\n");
+    }
     let types2 = generateTypes(jayFile.types);
     let { renderedRefs, renderedElement, preRenderType, renderedImplementation } = renderFunctionImplementation$1(
       jayFile.types,
@@ -11792,6 +12198,18 @@ function generateElementDefinitionFile(parsedFile) {
       jayFile.headLinks
     );
     const cssImport = generateCssImport(jayFile);
+    const phaseTypes = generatePhaseSpecificTypes(jayFile);
+    if (jayFile.contract || jayFile.hasInlineData) {
+      const old2ParamContract = `export type ${baseName}Contract = JayContract<${baseName}ViewState, ${baseName}ElementRefs>;`;
+      const new5ParamContract = `export type ${baseName}Contract = JayContract<
+    ${baseName}ViewState,
+    ${baseName}ElementRefs,
+    ${baseName}SlowViewState,
+    ${baseName}FastViewState,
+    ${baseName}InteractiveViewState
+>;`;
+      renderedElement = renderedElement.replace(old2ParamContract, new5ParamContract);
+    }
     return [
       renderImports$1(
         renderedImplementation.imports.plus(Import.jayElement),
@@ -11802,6 +12220,7 @@ function generateElementDefinitionFile(parsedFile) {
       cssImport,
       types2,
       renderedRefs,
+      phaseTypes,
       renderedElement,
       renderFunctionDeclaration(preRenderType)
     ].filter((_) => _ !== null && _ !== "").join("\n\n");
@@ -11809,7 +12228,7 @@ function generateElementDefinitionFile(parsedFile) {
 }
 function generateElementFile(jayFile, importerMode) {
   const types2 = generateTypes(jayFile.types);
-  const { renderedRefs, renderedElement, renderedImplementation } = renderFunctionImplementation$1(
+  let { renderedRefs, renderedElement, renderedImplementation } = renderFunctionImplementation$1(
     jayFile.types,
     jayFile.body,
     jayFile.imports,
@@ -11820,6 +12239,23 @@ function generateElementFile(jayFile, importerMode) {
     jayFile.headLinks
   );
   const cssImport = generateCssImport(jayFile);
+  const phaseTypes = generatePhaseSpecificTypes(jayFile);
+  if (jayFile.contract || jayFile.hasInlineData) {
+    const baseName = jayFile.baseElementName;
+    const contractPattern = new RegExp(
+      `export type ${baseName}Contract = JayContract<([^,]+), ${baseName}ElementRefs>;`,
+      "g"
+    );
+    renderedElement = renderedElement.replace(contractPattern, (match, viewStateType) => {
+      return `export type ${baseName}Contract = JayContract<
+    ${viewStateType},
+    ${baseName}ElementRefs,
+    ${baseName}SlowViewState,
+    ${baseName}FastViewState,
+    ${baseName}InteractiveViewState
+>;`;
+    });
+  }
   const renderedFile = [
     renderImports$1(
       renderedImplementation.imports.plus(Import.element).plus(Import.jayElement),
@@ -11830,6 +12266,7 @@ function generateElementFile(jayFile, importerMode) {
     cssImport,
     types2,
     renderedRefs,
+    phaseTypes,
     renderedElement,
     renderedImplementation.rendered
   ].filter((_) => _ !== null && _ !== "").join("\n\n");
@@ -11863,6 +12300,23 @@ function generateElementBridgeFile(jayFile) {
     refsType,
     jayFile.headlessImports
   );
+  const phaseTypes = generatePhaseSpecificTypes(jayFile);
+  if (jayFile.contract || jayFile.hasInlineData) {
+    const baseName = jayFile.baseElementName;
+    const contractPattern = new RegExp(
+      `export type ${baseName}Contract = JayContract<([^,]+), ${baseName}ElementRefs>;`,
+      "g"
+    );
+    renderedElement = renderedElement.replace(contractPattern, (match, viewStateType) => {
+      return `export type ${baseName}Contract = JayContract<
+    ${viewStateType},
+    ${baseName}ElementRefs,
+    ${baseName}SlowViewState,
+    ${baseName}FastViewState,
+    ${baseName}InteractiveViewState
+>;`;
+    });
+  }
   return [
     renderImports$1(
       renderedImplementation.imports.plus(Import.element).plus(Import.jayElement).plus(renderedBridge.imports),
@@ -11872,6 +12326,7 @@ function generateElementBridgeFile(jayFile) {
     ),
     types2,
     renderedRefs,
+    phaseTypes,
     renderedElement,
     renderedBridge.rendered
   ].filter((_) => _ !== null && _ !== "").join("\n\n");
@@ -15109,18 +15564,6 @@ var jsYaml = {
   safeLoadAll,
   safeDump
 };
-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 commonjsRequire(path2) {
   throw new Error('Could not dynamically require "' + path2 + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
@@ -15476,13 +15919,6 @@ var pluralize$1 = { exports: {} };
 })(pluralize$1);
 var pluralizeExports = pluralize$1.exports;
 const pluralize = /* @__PURE__ */ getDefaultExportFromCjs(pluralizeExports);
-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 || {});
 async function traverseTags(tags, typeName, context) {
   const { isRepeated, isAsync } = context;
   const objectTypeMembers = {};
@@ -15497,7 +15933,8 @@ async function traverseTags(tags, typeName, context) {
       const subContractTypes = await traverseSubContractTag(subTag, {
         ...context,
         viewStateType: objectType,
-        isRepeated: isRepeated || subTag.repeated,
+        // For ViewState: only use the tag's own repeated flag (don't inherit from parent)
+        isRepeated: subTag.repeated || false,
         isAsync: subTag.async
       });
       if (subContractTypes.val) {
@@ -15512,6 +15949,7 @@ async function traverseTags(tags, typeName, context) {
       const result = await traverseTag(subTag, {
         ...context,
         viewStateType: objectType,
+        // For Refs: inherit repeated from parent (child refs in repeated parent should be collections)
         isRepeated: isRepeated || subTag.repeated
       });
       if (result.type && isEnumType(result.type))
@@ -15643,7 +16081,9 @@ function resolveRecursiveReferences$1(type2, rootType) {
     if (type2.referencePath === "$/") {
       type2.resolvedType = rootType;
     } else if (type2.referencePath.startsWith("$/")) {
-      const path2 = type2.referencePath.substring(2);
+      const hasArrayUnwrap = type2.referencePath.endsWith("[]");
+      const pathToResolve = hasArrayUnwrap ? type2.referencePath.substring(0, type2.referencePath.length - 2) : type2.referencePath;
+      const path2 = pathToResolve.substring(2);
       const pathParts = path2.split("/");
       let currentType = rootType;
       for (const part of pathParts) {
@@ -15657,6 +16097,9 @@ function resolveRecursiveReferences$1(type2, rootType) {
           break;
         }
       }
+      if (hasArrayUnwrap && isArrayType$1(currentType)) {
+        currentType = currentType.itemType;
+      }
       type2.resolvedType = currentType || rootType;
     }
   } else if (isArrayType$1(type2)) {
@@ -15698,6 +16141,50 @@ async function contractToImportsViewStateAndRefs(contract, contractFilePath, jay
     return r;
   });
 }
+async function contractToPhaseViewState(contract, contractFilePath, jayImportResolver, phase, isRepeated = false, isAsync = false) {
+  const phaseContract = createPhaseContract(contract, phase);
+  const phaseName = phase === "fast+interactive" ? "Interactive" : pascalCase(phase);
+  const viewStateName = pascalCase(`${contract.name} ${phaseName} ViewState`);
+  const result = await traverseTags(phaseContract.tags, viewStateName, {
+    viewStateType: void 0,
+    isRepeated,
+    contractFilePath,
+    importResolver: jayImportResolver,
+    isAsync
+  });
+  return result.map((r) => {
+    if (r.type) {
+      const rootType = getRootObjectType(r.type);
+      if (rootType) {
+        resolveRecursiveReferences$1(r.type, rootType);
+      }
+    }
+    return r;
+  });
+}
+async function contractToAllPhaseViewStates(contract, contractFilePath, jayImportResolver) {
+  const [slowResult, fastResult, interactiveResult] = await Promise.all([
+    contractToPhaseViewState(contract, contractFilePath, jayImportResolver, "slow"),
+    contractToPhaseViewState(contract, contractFilePath, jayImportResolver, "fast"),
+    contractToPhaseViewState(contract, contractFilePath, jayImportResolver, "fast+interactive")
+  ]);
+  const validations = [
+    ...slowResult.validations,
+    ...fastResult.validations,
+    ...interactiveResult.validations
+  ];
+  if (validations.length > 0 || !slowResult.val || !fastResult.val || !interactiveResult.val) {
+    return new WithValidations(void 0, validations);
+  }
+  return new WithValidations(
+    {
+      slow: slowResult.val,
+      fast: fastResult.val,
+      interactive: interactiveResult.val
+    },
+    validations
+  );
+}
 function refsToRepeated(refsTreeNode) {
   const { refs, children, imported } = refsTreeNode;
   return mkRefsTree(
@@ -15738,23 +16225,30 @@ function renderImports(imports, importedLinks) {
 }
 async function compileContract(contractWithValidations, contractFilePath, jayImportResolver) {
   return contractWithValidations.flatMapAsync(async (contract) => {
-    const contractTypes = await contractToImportsViewStateAndRefs(
+    const fullViewStateResult = await contractToImportsViewStateAndRefs(
       contract,
       contractFilePath,
       jayImportResolver
     );
-    return contractTypes.map((contractTypesResult) => {
-      const { type: type2, refs, importLinks } = contractTypesResult;
-      const types2 = generateTypes(type2);
+    return fullViewStateResult.map((fullResult) => {
+      const { type: type2, refs, importLinks } = fullResult;
+      const fullViewStateTypes = generateTypes(type2);
+      const contractName = pascalCase(contract.name);
+      const viewStateTypeName = `${contractName}ViewState`;
+      const phaseViewStateTypes = generateAllPhaseViewStateTypes(contract, viewStateTypeName);
       let { imports, renderedRefs } = generateRefsInterface(contract, refs);
       imports = imports.plus(Import.jayContract);
       const renderedImports = renderImports(imports, importLinks);
-      const viewStateTypeName = `${pascalCase(contract.name)}ViewState`;
-      const refsTypeName = `${pascalCase(contract.name)}Refs`;
-      const contractType = `export type ${pascalCase(contract.name)}Contract = JayContract<${viewStateTypeName}, ${refsTypeName}>`;
+      const refsTypeName = `${contractName}Refs`;
+      const slowViewStateTypeName = `${contractName}SlowViewState`;
+      const fastViewStateTypeName = `${contractName}FastViewState`;
+      const interactiveViewStateTypeName = `${contractName}InteractiveViewState`;
+      const contractType = `export type ${contractName}Contract = JayContract<${viewStateTypeName}, ${refsTypeName}, ${slowViewStateTypeName}, ${fastViewStateTypeName}, ${interactiveViewStateTypeName}>`;
       return `${renderedImports}
 
-${types2}
+${fullViewStateTypes}
+
+${phaseViewStateTypes}
 
 ${renderedRefs}
 
@@ -15797,6 +16291,26 @@ function parseType(type2, tagName) {
   else
     return new WithValidations([], [`Tag [${tagName}] has an unknown tag type [${type2}]`]);
 }
+function parsePhase(phase, tagName, tagTypes) {
+  const validations = [];
+  if (!phase) {
+    return new WithValidations(void 0, validations);
+  }
+  const validPhases = ["slow", "fast", "fast+interactive"];
+  if (!validPhases.includes(phase)) {
+    validations.push(
+      `Tag [${tagName}] has invalid phase [${phase}]. Valid phases are: ${validPhases.join(", ")}`
+    );
+    return new WithValidations(void 0, validations);
+  }
+  if (tagTypes.includes(ContractTagType.interactive)) {
+    validations.push(
+      `Tag [${tagName}] of type [interactive] cannot have an explicit phase attribute (implicitly fast+interactive)`
+    );
+    return new WithValidations(void 0, validations);
+  }
+  return new WithValidations(phase, validations);
+}
 function parseTag(tag) {
   const types2 = parseType(tag.type || (tag.tags ? "sub-contract" : "data"), tag.tag);
   const typesAsString = types2.val.map((_) => ContractTagType[_]).join(", ");
@@ -15835,6 +16349,9 @@ function parseTag(tag) {
   const description = parseDescription(tag.description);
   const elementType = parseElementType(tag.elementType);
   const required = tag.required;
+  const phaseResult = parsePhase(tag.phase, tag.tag, types2.val);
+  validations.push(...phaseResult.validations);
+  const phase = phaseResult.val;
   if (validations.length > 0)
     return new WithValidations(void 0, validations);
   if (types2.val.includes(ContractTagType.subContract)) {
@@ -15846,6 +16363,7 @@ function parseTag(tag) {
           ...required && { required },
           ...description && { description },
           ...tag.repeated && { repeated: tag.repeated },
+          ...phase && { phase },
           link: tag.link
         },
         validations
@@ -15872,7 +16390,8 @@ function parseTag(tag) {
         ...description && { description },
         tags: parsedSubTags,
         ...tag.repeated && { repeated: tag.repeated },
-        ...tag.async && { async: tag.async }
+        ...tag.async && { async: tag.async },
+        ...phase && { phase }
       },
       [...validations, ...subTagValidations, ...duplicateTagValidations]
     );
@@ -15885,7 +16404,8 @@ function parseTag(tag) {
       ...parsedDataType && { dataType: parsedDataType },
       ...description && { description },
       ...elementType && { elementType },
-      ...tag.async && { async: tag.async }
+      ...tag.async && { async: tag.async },
+      ...phase && { phase }
     };
     return new WithValidations(contractTag, validations);
   }
@@ -15893,29 +16413,35 @@ function parseTag(tag) {
 function parseContract(contractYaml, fileName) {
   try {
     const parsedYaml = jsYaml.load(contractYaml);
+    const validations = [];
+    if (!parsedYaml.name) {
+      validations.push("Contract must have a name");
+    }
+    if (!parsedYaml.tags && !Array.isArray(parsedYaml.tags)) {
+      validations.push("Contract must have tags as an array of the contract tags");
+    }
+    if (validations.length > 0) {
+      return new WithValidations(void 0, validations);
+    }
     const tagResults = parsedYaml.tags.map((tag) => parseTag(tag));
     const tagValidations = tagResults.flatMap((tr) => tr.validations);
     const parsedTags = tagResults.map((tr) => tr.val).filter((tag) => !!tag);
     const tagNames = /* @__PURE__ */ new Set();
-    const duplicateTagValidations = [];
     parsedTags.forEach((tag) => {
       if (tagNames.has(tag.tag)) {
-        duplicateTagValidations.push(`Duplicate tag name [${tag.tag}]`);
+        validations.push(`Duplicate tag name [${tag.tag}]`);
       }
       tagNames.add(tag.tag);
     });
-    const nameValidations = [];
-    if (!parsedYaml.name) {
-      nameValidations.push("Contract must have a name");
-    }
     const contract = {
       name: parsedYaml.name,
       tags: parsedTags
     };
+    const phaseValidations = validateContractPhases(contract);
     return new WithValidations(contract, [
       ...tagValidations,
-      ...duplicateTagValidations,
-      ...nameValidations
+      ...validations,
+      ...phaseValidations
     ]);
   } catch (e2) {
     throw new Error(`failed to parse contract YAML for ${fileName}, ${e2.message}.`);
@@ -15950,7 +16476,9 @@ function parseArrayRecursiveReference(typeString) {
   return null;
 }
 function validateRecursivePath(referencePath, rootData, currentPath) {
-  const parts = referencePath.split("/").filter((p) => p);
+  const hasArrayUnwrap = referencePath.endsWith("[]");
+  const pathToValidate = hasArrayUnwrap ? referencePath.substring(0, referencePath.length - 2) : referencePath;
+  const parts = pathToValidate.split("/").filter((p) => p);
   if (parts.length === 0 || parts[0] !== "$") {
     return `Recursive reference must start with "$/" (got: ${referencePath}). Use "$/data" or "$/data/path" format.`;
   }
@@ -15968,6 +16496,12 @@ function validateRecursivePath(referencePath, rootData, currentPath) {
   const traversedPath = ["data"];
   for (let i = 1; i < pathParts.length; i++) {
     const part = pathParts[i];
+    if (Array.isArray(currentData)) {
+      if (currentData.length === 0) {
+        return `Cannot navigate through empty array at path "$/` + traversedPath.join("/") + `"`;
+      }
+      currentData = currentData[0];
+    }
     if (!currentData || typeof currentData !== "object" || !(part in currentData)) {
       const availableKeys = currentData && typeof currentData === "object" ? Object.keys(currentData) : [];
       return `Property "${part}" not found at path "$/` + traversedPath.join("/") + `"` + (availableKeys.length > 0 ? `. Available properties: ${availableKeys.join(", ")}` : "");
@@ -15975,6 +16509,9 @@ function validateRecursivePath(referencePath, rootData, currentPath) {
     currentData = currentData[part];
     traversedPath.push(part);
   }
+  if (hasArrayUnwrap && !Array.isArray(currentData)) {
+    return `Recursive reference with [] unwrap syntax must point to an array type, but "$/` + traversedPath.join("/") + `" is not an array.`;
+  }
   return void 0;
 }
 function resolveType(data, validations, path2, imports, rootData) {
@@ -16035,7 +16572,9 @@ function resolveType(data, validations, path2, imports, rootData) {
 }
 function resolveRecursiveReferences(type2, rootType, validations) {
   if (type2 instanceof JayRecursiveType) {
-    const parts = type2.referencePath.split("/").filter((p) => p);
+    const hasArrayUnwrap = type2.referencePath.endsWith("[]");
+    const pathToResolve = hasArrayUnwrap ? type2.referencePath.substring(0, type2.referencePath.length - 2) : type2.referencePath;
+    const parts = pathToResolve.split("/").filter((p) => p);
     if (parts.length >= 2 && parts[0] === "$" && parts[1] === "data") {
       let resolvedType = rootType;
       const traversedPath = ["$", "data"];
@@ -16063,6 +16602,9 @@ function resolveRecursiveReferences(type2, rootType, validations) {
           return;
         }
       }
+      if (hasArrayUnwrap && resolvedType instanceof JayArrayType) {
+        resolvedType = resolvedType.itemType;
+      }
       type2.resolvedType = resolvedType;
     } else if (parts.length < 2 || parts[0] !== "$" || parts[1] !== "data") {
       validations.push(
@@ -16079,7 +16621,43 @@ function resolveRecursiveReferences(type2, rootType, validations) {
     resolveRecursiveReferences(type2.itemType, rootType, validations);
   }
 }
-function parseTypes(jayYaml, validations, baseElementName, imports, headlessImports) {
+async function parseTypes(jayYaml, validations, baseElementName, imports, headlessImports, filePath, importResolver) {
+  if (jayYaml.contractRef) {
+    const contractPath = path.resolve(filePath, jayYaml.contractRef);
+    try {
+      const contractResult = importResolver.loadContract(contractPath);
+      validations.push(...contractResult.validations);
+      if (contractResult.val) {
+        jayYaml.parsedContract = contractResult.val;
+        const viewStateResult = await contractToImportsViewStateAndRefs(
+          contractResult.val,
+          contractPath,
+          importResolver
+        );
+        validations.push(...viewStateResult.validations);
+        if (viewStateResult.val && viewStateResult.val.type) {
+          const contractType = viewStateResult.val.type;
+          if (contractType instanceof JayObjectType) {
+            return new JayObjectType(baseElementName + "ViewState", contractType.props);
+          }
+          return contractType;
+        } else {
+          validations.push(
+            `Failed to extract ViewState from contract ${jayYaml.contractRef}`
+          );
+          return new JayObjectType(baseElementName + "ViewState", {});
+        }
+      } else {
+        validations.push(`Failed to load contract from ${jayYaml.contractRef}`);
+        return new JayObjectType(baseElementName + "ViewState", {});
+      }
+    } catch (error) {
+      validations.push(
+        `Referenced contract file not found: ${jayYaml.contractRef} - ${error.message}`
+      );
+      return new JayObjectType(baseElementName + "ViewState", {});
+    }
+  }
   if (typeof jayYaml.data === "object") {
     const resolvedType = resolveType(
       jayYaml.data,
@@ -16090,7 +16668,10 @@ function parseTypes(jayYaml, validations, baseElementName, imports, headlessImpo
       // Pass root data for recursive reference validation
     );
     const headlessImportedTypes = Object.fromEntries(
-      headlessImports.map((_) => [_.key, new JayImportedType(_.rootType.name, _.rootType)])
+      headlessImports.map((_) => [
+        _.key,
+        new JayImportedType(_.rootType.name, _.rootType, true)
+      ])
     );
     const finalType = new JayObjectType(resolvedType.name, {
       ...headlessImportedTypes,
@@ -16117,8 +16698,27 @@ function parseYaml(root) {
     );
     return new WithValidations(void 0, validations);
   }
-  let jayYaml = jayYamlElements[0].text;
-  let jayYamlParsed = jsYaml.load(jayYaml);
+  const jayYamlElement = jayYamlElements[0];
+  const contractAttr = jayYamlElement.getAttribute("contract");
+  const jayYamlText = jayYamlElement.text.trim();
+  if (contractAttr) {
+    if (jayYamlText && jayYamlText.length > 0) {
+      validations.push(
+        `Cannot have both 'contract' attribute and inline data structure. Either reference a contract file or define data inline, not both.`
+      );
+      return new WithValidations(void 0, validations);
+    }
+    return new WithValidations(
+      {
+        contractRef: contractAttr,
+        imports: {},
+        examples: void 0
+      },
+      validations
+    );
+  }
+  let jayYamlParsed = jsYaml.load(jayYamlText);
+  jayYamlParsed.hasInlineData = true;
   return new WithValidations(jayYamlParsed, validations);
 }
 function parseHeadfullImports(elements, validations, filePath, options, importResolver) {
@@ -16341,7 +16941,15 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
     linkedContractResolver
   );
   const importNames = headfullImports.flatMap((_) => _.names);
-  const types2 = parseTypes(jayYaml, validations, baseElementName, importNames, headlessImports);
+  const types2 = await parseTypes(
+    jayYaml,
+    validations,
+    baseElementName,
+    importNames,
+    headlessImports,
+    filePath,
+    linkedContractResolver
+  );
   const imports = [
     ...headfullImports,
     ...headlessImports.flatMap((_) => _.contractLinks)
@@ -16368,7 +16976,10 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
       headlessImports,
       headLinks,
       css: cssResult.val,
-      filename: normalizedFileName
+      filename: normalizedFileName,
+      contract: jayYaml.parsedContract,
+      contractRef: jayYaml.contractRef,
+      hasInlineData: jayYaml.hasInlineData
     },
     validations
   );
@@ -16399,7 +17010,9 @@ export {
   ContractTagType,
   JAY_IMPORT_RESOLVER,
   compileContract,
+  contractToAllPhaseViewStates,
   contractToImportsViewStateAndRefs,
+  contractToPhaseViewState,
   generateElementBridgeFile,
   generateElementDefinitionFile,
   generateElementFile,