@jay-framework/jay-stack-cli 0.12.0 → 0.14.0

package/dist/index.js

@@ -7,10 +7,8 @@ import path from "path";
 import fs, { promises } from "fs";
 import YAML from "yaml";
 import { getLogger, createDevLogger, setDevLogger } from "@jay-framework/logger";
-import { parse } from "node-html-parser";
-import { createRequire } from "module";
-import { parseJayFile, JAY_IMPORT_RESOLVER, generateElementDefinitionFile, parseContract, ContractTagType, generateElementFile } from "@jay-framework/compiler-jay-html";
-import { JAY_CONTRACT_EXTENSION, JAY_EXTENSION, JayAtomicType, JayEnumType, loadPluginManifest, RuntimeMode, GenerateTarget } from "@jay-framework/compiler-shared";
+import { parseJayFile, JAY_IMPORT_RESOLVER, generateElementDefinitionFile, ContractTagType, parseContract, generateElementFile } from "@jay-framework/compiler-jay-html";
+import { JAY_CONTRACT_EXTENSION, JAY_EXTENSION, resolvePluginManifest, LOCAL_PLUGIN_PATH, JayAtomicType, JayEnumType, loadPluginManifest, RuntimeMode, GenerateTarget } from "@jay-framework/compiler-shared";
 import { listContracts, materializeContracts } from "@jay-framework/stack-server-runtime";
 import { listContracts as listContracts2, materializeContracts as materializeContracts2 } from "@jay-framework/stack-server-runtime";
 import { Command } from "commander";
@@ -88,9 +86,1470 @@ function updateConfig(updates) {
     getLogger().warn(`Failed to update .jay config file: ${error}`);
   }
 }
+function rgbToHex(color, opacity) {
+  const r = Math.round(color.r * 255);
+  const g = Math.round(color.g * 255);
+  const b = Math.round(color.b * 255);
+  if (opacity !== void 0 && opacity < 1) {
+    const alphaHex = Math.round(opacity * 255).toString(16).padStart(2, "0");
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}${alphaHex}`;
+  } else {
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+  }
+}
+function getPositionType(node) {
+  if (node.layoutPositioning === "ABSOLUTE") {
+    return "absolute";
+  }
+  if (node.parentOverflowDirection && node.parentOverflowDirection !== "NONE") {
+    if (node.parentNumberOfFixedChildren && node.parentChildIndex !== void 0) {
+      if (node.parentChildIndex >= 0 && node.parentChildIndex < node.parentNumberOfFixedChildren) {
+        return "sticky";
+      }
+    }
+  }
+  if (node.scrollBehavior === "FIXED" && node.parentLayoutMode === "NONE") {
+    return "fixed";
+  }
+  if (node.parentType === "SECTION") {
+    return "absolute";
+  }
+  if (node.parentLayoutMode === "NONE") {
+    return "absolute";
+  }
+  if (node.parentLayoutMode && (node.parentLayoutMode === "HORIZONTAL" || node.parentLayoutMode === "VERTICAL")) {
+    return "relative";
+  }
+  return "static";
+}
+function getPositionStyle(node) {
+  if (node.type === "COMPONENT") {
+    return "";
+  }
+  const positionType = getPositionType(node);
+  if (positionType === "static") {
+    return "";
+  }
+  if (positionType === "absolute" || positionType === "fixed") {
+    const top = node.y !== void 0 ? node.y : 0;
+    const left = node.x !== void 0 ? node.x : 0;
+    return `position: ${positionType};top: ${top}px;left: ${left}px;`;
+  }
+  if (positionType === "sticky") {
+    return `position: ${positionType};top: 0;z-index: 10;`;
+  }
+  return `position: ${positionType};`;
+}
+function getAutoLayoutChildSizeStyles(node) {
+  if (!node.parentLayoutMode || node.parentLayoutMode === "NONE") {
+    const width2 = node.width !== void 0 ? node.width : 0;
+    const height2 = node.height !== void 0 ? node.height : 0;
+    return `width: ${width2}px;height: ${height2}px;`;
+  }
+  let styles = "";
+  if (!node.layoutGrow && !node.layoutAlign) {
+    const width2 = node.width !== void 0 ? node.width : 0;
+    const height2 = node.height !== void 0 ? node.height : 0;
+    return `width: ${width2}px;height: ${height2}px;`;
+  }
+  const isHorizontalLayout = node.parentLayoutMode === "HORIZONTAL";
+  const width = node.width !== void 0 ? node.width : 0;
+  const height = node.height !== void 0 ? node.height : 0;
+  if (node.layoutSizingHorizontal) {
+    switch (node.layoutSizingHorizontal) {
+      case "FIXED":
+        styles += `width: ${width}px;`;
+        break;
+      case "HUG":
+        styles += "width: fit-content;";
+        break;
+      case "FILL":
+        if (node.type === "TEXT") {
+          styles += "width: auto;";
+        } else if (isHorizontalLayout) {
+          styles += "flex-grow: 1;";
+        } else {
+          styles += "width: 100%;";
+        }
+        break;
+    }
+  } else {
+    if (isHorizontalLayout && node.layoutGrow && node.layoutGrow > 0) {
+      styles += `flex-grow: ${node.layoutGrow};width: 0;`;
+    } else if (!isHorizontalLayout && node.layoutAlign === "STRETCH") {
+      styles += "width: 100%;";
+    } else {
+      styles += `width: ${width}px;`;
+    }
+  }
+  if (node.layoutSizingVertical) {
+    switch (node.layoutSizingVertical) {
+      case "FIXED":
+        styles += `height: ${height}px;`;
+        break;
+      case "HUG":
+        styles += "height: fit-content;";
+        break;
+      case "FILL":
+        if (!isHorizontalLayout) {
+          styles += "flex-grow: 1;";
+        } else {
+          styles += "height: 100%;";
+        }
+        break;
+    }
+  } else {
+    if (!isHorizontalLayout && node.layoutGrow && node.layoutGrow > 0) {
+      styles += `flex-grow: ${node.layoutGrow};height: 0;`;
+    } else if (isHorizontalLayout && node.layoutAlign === "STRETCH") {
+      styles += "height: 100%;";
+    } else {
+      styles += `height: ${height}px;`;
+    }
+  }
+  if (node.layoutAlign) {
+    switch (node.layoutAlign) {
+      case "MIN":
+        styles += "align-self: flex-start;";
+        break;
+      case "CENTER":
+        styles += "align-self: center;";
+        break;
+      case "MAX":
+        styles += "align-self: flex-end;";
+        break;
+      case "STRETCH":
+        styles += "align-self: stretch;";
+        break;
+    }
+  }
+  return styles;
+}
+function getNodeSizeStyles(node) {
+  if (node.parentType === "SECTION") {
+    const height = node.height !== void 0 ? node.height : 0;
+    return `width: 100%;height: ${height}px;`;
+  }
+  return getAutoLayoutChildSizeStyles(node);
+}
+function getCommonStyles(node) {
+  let styles = "";
+  const transformStyles = [];
+  if (node.opacity !== void 0 && node.opacity < 1) {
+    styles += `opacity: ${node.opacity};`;
+  }
+  if (node.rotation !== void 0 && node.rotation !== 0) {
+    transformStyles.push(`rotate(${node.rotation}deg)`);
+  }
+  if (node.effects && Array.isArray(node.effects) && node.effects.length > 0) {
+    const visibleEffects = node.effects.filter((e) => e.visible !== false).reverse();
+    const filterFunctions = [];
+    const boxShadows = [];
+    for (const effect of visibleEffects) {
+      switch (effect.type) {
+        case "DROP_SHADOW":
+        case "INNER_SHADOW": {
+          if (effect.color && effect.offset && effect.radius !== void 0) {
+            const { offset, radius, color, spread } = effect;
+            const shadowColor = `rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${color.a ?? 1})`;
+            const inset = effect.type === "INNER_SHADOW" ? "inset " : "";
+            boxShadows.push(
+              `${inset}${offset.x}px ${offset.y}px ${radius}px ${spread ?? 0}px ${shadowColor}`
+            );
+          }
+          break;
+        }
+        case "LAYER_BLUR":
+          if (effect.radius !== void 0) {
+            filterFunctions.push(`blur(${effect.radius}px)`);
+          }
+          break;
+        case "BACKGROUND_BLUR":
+          if (effect.radius !== void 0) {
+            styles += `backdrop-filter: blur(${effect.radius}px);`;
+            styles += `-webkit-backdrop-filter: blur(${effect.radius}px);`;
+          }
+          break;
+      }
+    }
+    if (boxShadows.length > 0) {
+      styles += `box-shadow: ${boxShadows.join(", ")};`;
+    }
+    if (filterFunctions.length > 0) {
+      styles += `filter: ${filterFunctions.join(" ")};`;
+    }
+  }
+  if (transformStyles.length > 0) {
+    styles += `transform: ${transformStyles.join(" ")};`;
+    const width = node.width !== void 0 ? node.width : 0;
+    const height = node.height !== void 0 ? node.height : 0;
+    styles += `transform-origin: ${width / 2}px ${height / 2}px;`;
+  }
+  return styles;
+}
+function getBorderRadius(node) {
+  if (typeof node.cornerRadius === "number") {
+    return `border-radius: ${node.cornerRadius}px;`;
+  } else if (node.cornerRadius === "MIXED" && node.topLeftRadius !== void 0) {
+    return `border-radius: ${node.topLeftRadius}px ${node.topRightRadius}px ${node.bottomRightRadius}px ${node.bottomLeftRadius}px;`;
+  }
+  return "border-radius: 0px;";
+}
+function getAutoLayoutStyles(node) {
+  if (node.layoutMode === "NONE" || !node.layoutMode) {
+    return "";
+  }
+  let flexStyles = "display: flex;";
+  if (node.layoutMode === "HORIZONTAL") {
+    flexStyles += "flex-direction: row;";
+  } else if (node.layoutMode === "VERTICAL") {
+    flexStyles += "flex-direction: column;";
+  }
+  if (node.primaryAxisAlignItems) {
+    switch (node.primaryAxisAlignItems) {
+      case "MIN":
+        flexStyles += "justify-content: flex-start;";
+        break;
+      case "CENTER":
+        flexStyles += "justify-content: center;";
+        break;
+      case "MAX":
+        flexStyles += "justify-content: flex-end;";
+        break;
+      case "SPACE_BETWEEN":
+        flexStyles += "justify-content: space-between;";
+        break;
+    }
+  }
+  if (node.counterAxisAlignItems) {
+    switch (node.counterAxisAlignItems) {
+      case "MIN":
+        flexStyles += "align-items: flex-start;";
+        break;
+      case "CENTER":
+        flexStyles += "align-items: center;";
+        break;
+      case "MAX":
+        flexStyles += "align-items: flex-end;";
+        break;
+    }
+  }
+  if (typeof node.itemSpacing === "number") {
+    flexStyles += `gap: ${node.itemSpacing}px;`;
+  }
+  if (typeof node.paddingLeft === "number")
+    flexStyles += `padding-left: ${node.paddingLeft}px;`;
+  if (typeof node.paddingRight === "number")
+    flexStyles += `padding-right: ${node.paddingRight}px;`;
+  if (typeof node.paddingTop === "number")
+    flexStyles += `padding-top: ${node.paddingTop}px;`;
+  if (typeof node.paddingBottom === "number")
+    flexStyles += `padding-bottom: ${node.paddingBottom}px;`;
+  return flexStyles;
+}
+function getOverflowStyles(node) {
+  let overflowStyles = "";
+  const shouldClip = node.clipsContent;
+  const overflowDirection = node.overflowDirection || "NONE";
+  switch (overflowDirection) {
+    case "HORIZONTAL":
+      overflowStyles += shouldClip ? "overflow-x: auto; overflow-y: hidden;" : "overflow-x: auto; overflow-y: visible;";
+      break;
+    case "VERTICAL":
+      overflowStyles += shouldClip ? "overflow-x: hidden; overflow-y: auto;" : "overflow-x: visible; overflow-y: auto;";
+      break;
+    case "BOTH":
+      overflowStyles += "overflow: auto;";
+      break;
+    case "NONE":
+    default:
+      overflowStyles += shouldClip ? "overflow: hidden;" : "overflow: visible;";
+      break;
+  }
+  if (overflowDirection !== "NONE") {
+    overflowStyles += "scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.3) transparent;";
+  }
+  return overflowStyles;
+}
+function getBackgroundFillsStyle(node) {
+  if (!node.fills || !Array.isArray(node.fills) || node.fills.length === 0) {
+    return "background: transparent;";
+  }
+  const backgrounds = [];
+  const backgroundSizes = [];
+  const backgroundPositions = [];
+  const backgroundRepeats = [];
+  for (const fill of [...node.fills].reverse()) {
+    if (fill.visible === false)
+      continue;
+    if (fill.type === "SOLID" && fill.color) {
+      const { r, g, b } = fill.color;
+      const opacity = fill.opacity !== void 0 ? fill.opacity : 1;
+      backgrounds.push(
+        `linear-gradient(rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${opacity}), rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${opacity}))`
+      );
+      backgroundSizes.push("100% 100%");
+      backgroundPositions.push("center");
+      backgroundRepeats.push("no-repeat");
+    } else if (fill.type === "IMAGE") {
+      console.warn("Image fills are not yet supported in vendor conversion");
+    }
+  }
+  if (backgrounds.length === 0) {
+    return "background: transparent;";
+  }
+  let style = `background-image: ${backgrounds.join(", ")};`;
+  style += `background-size: ${backgroundSizes.join(", ")};`;
+  style += `background-position: ${backgroundPositions.join(", ")};`;
+  style += `background-repeat: ${backgroundRepeats.join(", ")};`;
+  return style;
+}
+function getStrokeStyles(node) {
+  if (!node.strokes || node.strokes.length === 0) {
+    return "";
+  }
+  const visibleStrokes = node.strokes.filter((s) => s.visible !== false);
+  if (visibleStrokes.length === 0) {
+    return "";
+  }
+  const stroke = visibleStrokes[0];
+  let cssProps = [];
+  if (stroke.type === "SOLID" && stroke.color) {
+    const r = Math.round(stroke.color.r * 255);
+    const g = Math.round(stroke.color.g * 255);
+    const b = Math.round(stroke.color.b * 255);
+    const a = stroke.opacity !== void 0 ? stroke.opacity : 1;
+    if (a < 1) {
+      cssProps.push(`border-color: rgba(${r}, ${g}, ${b}, ${a.toFixed(2)});`);
+    } else {
+      cssProps.push(`border-color: rgb(${r}, ${g}, ${b});`);
+    }
+  } else {
+    return "";
+  }
+  const top = typeof node.strokeTopWeight === "number" ? node.strokeTopWeight : typeof node.strokeWeight === "number" ? node.strokeWeight : 0;
+  const right = typeof node.strokeRightWeight === "number" ? node.strokeRightWeight : typeof node.strokeWeight === "number" ? node.strokeWeight : 0;
+  const bottom = typeof node.strokeBottomWeight === "number" ? node.strokeBottomWeight : typeof node.strokeWeight === "number" ? node.strokeWeight : 0;
+  const left = typeof node.strokeLeftWeight === "number" ? node.strokeLeftWeight : typeof node.strokeWeight === "number" ? node.strokeWeight : 0;
+  if (top !== 0 || right !== 0 || bottom !== 0 || left !== 0) {
+    if (top === right && right === bottom && bottom === left) {
+      cssProps.push(`border-width: ${top}px;`);
+    } else {
+      cssProps.push(`border-width: ${top}px ${right}px ${bottom}px ${left}px;`);
+    }
+    if (node.dashPattern && node.dashPattern.length > 0) {
+      cssProps.push("border-style: dashed;");
+    } else {
+      cssProps.push("border-style: solid;");
+    }
+  }
+  return cssProps.join(" ");
+}
+function getFrameSizeStyles(node) {
+  const isTopLevel = node.parentType === "SECTION";
+  if (isTopLevel) {
+    const height2 = node.height !== void 0 ? node.height : 0;
+    return `width: 100%;height: ${height2}px;`;
+  }
+  if (node.layoutMode === "NONE" || !node.layoutMode) {
+    const width2 = node.width !== void 0 ? node.width : 0;
+    const height2 = node.height !== void 0 ? node.height : 0;
+    return `width: ${width2}px;height: ${height2}px;`;
+  }
+  let sizeStyles = "";
+  const width = node.width !== void 0 ? node.width : 0;
+  const height = node.height !== void 0 ? node.height : 0;
+  if (node.layoutSizingHorizontal) {
+    switch (node.layoutSizingHorizontal) {
+      case "FIXED":
+        sizeStyles += `width: ${width}px;`;
+        break;
+      case "HUG":
+        sizeStyles += "width: fit-content;";
+        break;
+      case "FILL":
+        sizeStyles += "width: 100%;";
+        break;
+    }
+  } else {
+    sizeStyles += `width: ${width}px;`;
+  }
+  if (node.layoutSizingVertical) {
+    switch (node.layoutSizingVertical) {
+      case "FIXED":
+        sizeStyles += `height: ${height}px;`;
+        break;
+      case "HUG":
+        sizeStyles += "height: fit-content;";
+        break;
+      case "FILL":
+        sizeStyles += "height: 100%;";
+        break;
+    }
+  } else {
+    sizeStyles += `height: ${height}px;`;
+  }
+  if (node.layoutWrap === "WRAP") {
+    sizeStyles += `max-width: ${width}px;`;
+  }
+  return sizeStyles;
+}
+function escapeHtmlContent(text) {
+  const map = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  return text.replace(/[&<>"']/g, (char) => map[char]);
+}
+function convertTextNodeToHtml(node, indent, dynamicContent, refAttr, attributesHtml) {
+  const {
+    name,
+    id,
+    characters,
+    fontName,
+    fontSize,
+    fontWeight,
+    fills,
+    textAlignHorizontal,
+    textAlignVertical,
+    letterSpacing,
+    lineHeight,
+    textDecoration,
+    textCase,
+    textTruncation,
+    maxLines,
+    maxWidth,
+    textAutoResize,
+    hasMissingFont,
+    hyperlinks
+  } = node;
+  if (hasMissingFont || !characters) {
+    if (hasMissingFont) {
+      return `${indent}<!-- Text node "${name}" has missing fonts -->
+`;
+    }
+    return "";
+  }
+  let fontFamilyStyle = "font-family: sans-serif;";
+  if (fontName && typeof fontName === "object" && fontName.family) {
+    fontFamilyStyle = `font-family: '${fontName.family}', sans-serif;`;
+  }
+  const fontSizeValue = typeof fontSize === "number" ? fontSize : 16;
+  const fontSizeStyle = `font-size: ${fontSizeValue}px;`;
+  const fontWeightValue = typeof fontWeight === "number" ? fontWeight : 400;
+  const fontWeightStyle = `font-weight: ${fontWeightValue};`;
+  let textColor = "#000000";
+  if (fills && Array.isArray(fills) && fills.length > 0 && fills[0].type === "SOLID" && fills[0].color) {
+    textColor = rgbToHex(fills[0].color);
+  }
+  const colorStyle = `color: ${textColor};`;
+  const textAlign = textAlignHorizontal ? textAlignHorizontal.toLowerCase() : "left";
+  const textAlignStyle = `text-align: ${textAlign};`;
+  let verticalAlignWrapperStyle = "";
+  if (textAlignVertical) {
+    verticalAlignWrapperStyle = "display: flex; flex-direction: column;";
+    switch (textAlignVertical) {
+      case "TOP":
+        verticalAlignWrapperStyle += "justify-content: flex-start;";
+        break;
+      case "CENTER":
+        verticalAlignWrapperStyle += "justify-content: center;";
+        break;
+      case "BOTTOM":
+        verticalAlignWrapperStyle += "justify-content: flex-end;";
+        break;
+    }
+  }
+  let letterSpacingStyle = "";
+  if (letterSpacing && letterSpacing.value !== 0) {
+    const unit = letterSpacing.unit === "PIXELS" ? "px" : "%";
+    letterSpacingStyle = `letter-spacing: ${letterSpacing.value}${unit};`;
+  }
+  let lineHeightStyle = "";
+  if (lineHeight) {
+    if (lineHeight.unit === "AUTO") {
+      lineHeightStyle = "line-height: normal;";
+    } else {
+      const unit = lineHeight.unit === "PIXELS" ? "px" : "%";
+      lineHeightStyle = `line-height: ${lineHeight.value}${unit};`;
+    }
+  }
+  let textDecorationStyle = "";
+  if (textDecoration === "UNDERLINE") {
+    textDecorationStyle = "text-decoration: underline;";
+  } else if (textDecoration === "STRIKETHROUGH") {
+    textDecorationStyle = "text-decoration: line-through;";
+  }
+  let textTransformStyle = "";
+  if (textCase && textCase !== "ORIGINAL") {
+    switch (textCase) {
+      case "UPPER":
+        textTransformStyle = "text-transform: uppercase;";
+        break;
+      case "LOWER":
+        textTransformStyle = "text-transform: lowercase;";
+        break;
+      case "TITLE":
+        textTransformStyle = "text-transform: capitalize;";
+        break;
+    }
+  }
+  let truncationStyle = "";
+  if (textTruncation === "ENDING") {
+    if (maxLines && maxLines > 1) {
+      truncationStyle = `display: -webkit-box; -webkit-line-clamp: ${maxLines}; -webkit-box-orient: vertical; overflow: hidden;`;
+    } else {
+      truncationStyle = "white-space: nowrap; overflow: hidden; text-overflow: ellipsis;";
+    }
+  }
+  if (maxWidth && maxWidth > 0) {
+    truncationStyle += `max-width: ${maxWidth}px;`;
+  }
+  const positionStyle = getPositionStyle(node);
+  let sizeStyles = getNodeSizeStyles(node);
+  const commonStyles = getCommonStyles(node);
+  if (textAutoResize === "HEIGHT") {
+    sizeStyles = sizeStyles.replace(/height: [^;]+;/, "height: auto;");
+  }
+  const textStyles = `${fontFamilyStyle}${fontSizeStyle}${fontWeightStyle}${colorStyle}${textAlignStyle}${letterSpacingStyle}${lineHeightStyle}${textDecorationStyle}${textTransformStyle}${truncationStyle}`;
+  let htmlContent = "";
+  if (dynamicContent) {
+    htmlContent = dynamicContent;
+  } else if (hyperlinks && hyperlinks.length > 0) {
+    let lastEnd = 0;
+    for (const link of hyperlinks) {
+      if (link.start > lastEnd) {
+        const beforeText = characters.substring(lastEnd, link.start);
+        htmlContent += escapeHtmlContent(beforeText).replace(/\n/g, "<br>");
+      }
+      const linkText = characters.substring(link.start, link.end + 1);
+      htmlContent += `<a href="${escapeHtmlContent(link.url)}" style="color: inherit;">${escapeHtmlContent(linkText).replace(/\n/g, "<br>")}</a>`;
+      lastEnd = link.end + 1;
+    }
+    if (lastEnd < characters.length) {
+      const afterText = characters.substring(lastEnd);
+      htmlContent += escapeHtmlContent(afterText).replace(/\n/g, "<br>");
+    }
+  } else {
+    htmlContent = escapeHtmlContent(characters).replace(/\n/g, "<br>");
+  }
+  const childIndent = indent + "  ";
+  const innerIndent = indent + "    ";
+  const styleAttr = `${positionStyle}${sizeStyles}${commonStyles}${textStyles}`;
+  const refString = refAttr || "";
+  const attrsString = attributesHtml || "";
+  if (verticalAlignWrapperStyle) {
+    return `${indent}<div data-figma-id="${id}"${refString}${attrsString} style="${styleAttr}${verticalAlignWrapperStyle}">
+${childIndent}<div style="${textStyles}">
+${innerIndent}${htmlContent}
+${childIndent}</div>
+${indent}</div>
+`;
+  } else {
+    return `${indent}<div data-figma-id="${id}"${refString}${attrsString} style="${styleAttr}">${htmlContent}</div>
+`;
+  }
+}
+function convertImageNodeToHtml(node, indent, srcBinding, altBinding, refAttr, staticImageUrl) {
+  const { name, id } = node;
+  const positionStyle = getPositionStyle(node);
+  const commonStyles = getCommonStyles(node);
+  const borderRadius = getBorderRadius(node);
+  const sizeStyles = getNodeSizeStyles(node);
+  const styles = `${positionStyle}${sizeStyles}${borderRadius}${commonStyles}`.trim();
+  let src = "";
+  if (srcBinding) {
+    src = srcBinding;
+  } else if (staticImageUrl) {
+    src = staticImageUrl;
+  } else {
+    src = "/placeholder-image.png";
+    console.warn(`Image node "${name}" (${id}) has no src binding or static image`);
+  }
+  const alt = altBinding || name;
+  const refAttribute = refAttr || "";
+  const styleAttribute = styles ? ` style="${styles}"` : "";
+  const dataAttribute = ` data-figma-id="${id}"`;
+  return `${indent}<img${dataAttribute}${refAttribute} src="${src}" alt="${alt}"${styleAttribute} />
+`;
+}
+function extractStaticImageUrl(node) {
+  if (!node.fills || !Array.isArray(node.fills)) {
+    return void 0;
+  }
+  for (const fill of node.fills) {
+    if (fill.visible !== false && fill.type === "IMAGE") {
+      if (fill.imageUrl) {
+        return fill.imageUrl;
+      }
+      if (fill.imageHash) {
+        console.warn(
+          `Image fill with hash "${fill.imageHash}" found on node "${node.name}" (${node.id}) but no imageUrl in serialized data. Update plugin serialization to export and save images.`
+        );
+      }
+      return void 0;
+    }
+  }
+  return void 0;
+}
+function convertRectangleToHtml(node, indent) {
+  const { id } = node;
+  const positionStyle = getPositionStyle(node);
+  const sizeStyles = getNodeSizeStyles(node);
+  const commonStyles = getCommonStyles(node);
+  const backgroundStyle = getBackgroundFillsStyle(node);
+  const borderRadius = getBorderRadius(node);
+  const strokeStyles = getStrokeStyles(node);
+  const allStyles = `${positionStyle}${sizeStyles}${backgroundStyle}${strokeStyles}${borderRadius}${commonStyles}box-sizing: border-box;`;
+  return `${indent}<div data-figma-id="${id}" style="${allStyles}"></div>
+`;
+}
+function convertEllipseToHtml(node, indent) {
+  const { id } = node;
+  const positionStyle = getPositionStyle(node);
+  const sizeStyles = getNodeSizeStyles(node);
+  const commonStyles = getCommonStyles(node);
+  const backgroundStyle = getBackgroundFillsStyle(node);
+  const strokeStyles = getStrokeStyles(node);
+  const borderRadius = "border-radius: 50%;";
+  const allStyles = `${positionStyle}${sizeStyles}${backgroundStyle}${strokeStyles}${borderRadius}${commonStyles}box-sizing: border-box;`;
+  return `${indent}<div data-figma-id="${id}" style="${allStyles}"></div>
+`;
+}
+function convertVectorToHtml(node, indent) {
+  const { id, name, svgContent, svgExportFailed, width, height } = node;
+  const positionStyle = getPositionStyle(node);
+  const sizeStyles = getNodeSizeStyles(node);
+  const commonStyles = getCommonStyles(node);
+  let finalSvgContent;
+  if (svgExportFailed || !svgContent) {
+    finalSvgContent = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg"><rect width="${width}" height="${height}" fill="none" stroke="#ccc" stroke-width="1" stroke-dasharray="5,5"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="10" fill="#999">Vector: ${name}</text></svg>`;
+  } else {
+    finalSvgContent = svgContent;
+  }
+  const allStyles = `${positionStyle}${sizeStyles}${commonStyles}box-sizing: border-box;`;
+  const childIndent = indent + "  ";
+  return `${indent}<div data-figma-id="${id}" data-figma-type="vector" style="${allStyles}">
+${childIndent}${finalSvgContent}
+${indent}</div>
+`;
+}
+function getComponentVariantValues(node, propertyBindings) {
+  const values = /* @__PURE__ */ new Map();
+  const filterPseudoVariants = (variantValues) => {
+    return variantValues.filter((value) => !value.includes(":"));
+  };
+  if (node.componentPropertyDefinitions) {
+    for (const binding of propertyBindings) {
+      const propDef = node.componentPropertyDefinitions[binding.property];
+      if (propDef && propDef.type === "VARIANT" && propDef.variantOptions) {
+        const filtered = filterPseudoVariants(propDef.variantOptions);
+        if (filtered.length > 0) {
+          values.set(binding.property, filtered);
+        }
+      }
+    }
+  }
+  if (values.size === 0 && node.variants && node.variants.length > 0) {
+    const propertyValuesMap = /* @__PURE__ */ new Map();
+    for (const variant of node.variants) {
+      if (variant.variantProperties) {
+        for (const binding of propertyBindings) {
+          const propValue = variant.variantProperties[binding.property];
+          if (propValue && !propValue.includes(":")) {
+            if (!propertyValuesMap.has(binding.property)) {
+              propertyValuesMap.set(binding.property, /* @__PURE__ */ new Set());
+            }
+            propertyValuesMap.get(binding.property).add(propValue);
+          }
+        }
+      }
+    }
+    for (const [prop, valueSet] of propertyValuesMap) {
+      if (valueSet.size > 0) {
+        values.set(prop, Array.from(valueSet));
+      }
+    }
+  }
+  return values;
+}
+function isBooleanVariant(values, contractTag) {
+  if (contractTag.dataType !== "boolean") {
+    return false;
+  }
+  if (values.length !== 2) {
+    return false;
+  }
+  const sortedValues = [...values].sort();
+  return sortedValues[0] === "false" && sortedValues[1] === "true";
+}
+function generatePermutations(propertyValues, bindings) {
+  const properties = Array.from(propertyValues.entries());
+  if (properties.length === 0) {
+    return [];
+  }
+  const permutations = [];
+  function generate(index, current) {
+    if (index === properties.length) {
+      permutations.push([...current]);
+      return;
+    }
+    const [propName, propValues] = properties[index];
+    const binding = bindings.find((b) => b.property === propName);
+    if (!binding)
+      return;
+    const isBoolean = isBooleanVariant(propValues, binding.contractTag);
+    for (const value of propValues) {
+      current.push({ property: propName, tagPath: binding.tagPath, value, isBoolean });
+      generate(index + 1, current);
+      current.pop();
+    }
+  }
+  generate(0, []);
+  return permutations;
+}
+function findComponentVariant(node, permutation) {
+  if (!node.variants || node.variants.length === 0) {
+    throw new Error(
+      `Node "${node.name}" has no variants array - cannot find variant component`
+    );
+  }
+  const targetProps = /* @__PURE__ */ new Map();
+  for (const { property, value } of permutation) {
+    targetProps.set(property, value);
+  }
+  const matchingVariant = node.variants.find((variant) => {
+    if (!variant.variantProperties) {
+      return false;
+    }
+    for (const [prop, value] of targetProps) {
+      if (variant.variantProperties[prop] !== value) {
+        return false;
+      }
+    }
+    for (const [prop, value] of Object.entries(variant.variantProperties)) {
+      if (targetProps.has(prop) && targetProps.get(prop) !== value) {
+        return false;
+      }
+    }
+    return true;
+  });
+  if (!matchingVariant) {
+    console.log(
+      `No matching variant found for "${node.name}" with properties:`,
+      Object.fromEntries(targetProps),
+      "\nAvailable variants:",
+      node.variants.map((v) => v.variantProperties),
+      "\nUsing first variant as fallback"
+    );
+    return node.variants[0] || node;
+  }
+  return matchingVariant;
+}
+function buildVariantCondition(permutation) {
+  const conditions = permutation.map(({ tagPath, value, isBoolean }) => {
+    if (isBoolean) {
+      if (value === "true") {
+        return tagPath;
+      } else {
+        return `!${tagPath}`;
+      }
+    } else {
+      return `${tagPath} == ${value}`;
+    }
+  });
+  return conditions.join(" && ");
+}
+function convertVariantNode(node, analysis, context, convertNodeToJayHtml2) {
+  const indent = "  ".repeat(context.indentLevel);
+  const innerIndent = "  ".repeat(context.indentLevel + 1);
+  const propertyValues = getComponentVariantValues(node, analysis.propertyBindings);
+  const permutations = generatePermutations(propertyValues, analysis.propertyBindings);
+  if (permutations.length === 0) {
+    throw new Error(
+      `No permutations generated for variant node "${node.name}" - check property definitions`
+    );
+  }
+  let variantHtml = "";
+  for (const permutation of permutations) {
+    const conditions = buildVariantCondition(permutation);
+    const variantNode = findComponentVariant(node, permutation);
+    variantHtml += `${innerIndent}<div if="${conditions}">
+`;
+    const variantContext = {
+      ...context,
+      indentLevel: context.indentLevel + 2
+      // +2 because we're inside wrapper and if div
+    };
+    if (variantNode.children && variantNode.children.length > 0) {
+      for (const child of variantNode.children) {
+        variantHtml += convertNodeToJayHtml2(child, variantContext);
+      }
+    }
+    variantHtml += `${innerIndent}</div>
+`;
+  }
+  const positionStyle = getPositionStyle(node);
+  const frameSizeStyles = getFrameSizeStyles(node);
+  const backgroundStyle = getBackgroundFillsStyle(node);
+  const borderRadius = getBorderRadius(node);
+  const strokeStyles = getStrokeStyles(node);
+  const flexStyles = getAutoLayoutStyles(node);
+  const overflowStyles = getOverflowStyles(node);
+  const commonStyles = getCommonStyles(node);
+  const wrapperStyleAttr = `${positionStyle}${frameSizeStyles}${backgroundStyle}${strokeStyles}${borderRadius}${overflowStyles}${commonStyles}${flexStyles}box-sizing: border-box;`;
+  let refAttr = "";
+  if (analysis.refPath) {
+    refAttr = ` ref="${analysis.refPath}"`;
+  } else if (analysis.dualPath) {
+    refAttr = ` ref="${analysis.dualPath}"`;
+  } else if (analysis.interactiveVariantPath) {
+    refAttr = ` ref="${analysis.interactiveVariantPath}"`;
+  }
+  return `${indent}<div id="${node.id}" data-figma-id="${node.id}" data-figma-type="variant-container"${refAttr} style="${wrapperStyleAttr}">
+` + variantHtml + `${indent}</div>
+`;
+}
+function convertRepeaterNode(node, analysis, context, convertNodeToJayHtml2) {
+  const { repeaterPath, trackByKey } = analysis;
+  const indent = "  ".repeat(context.indentLevel);
+  const innerIndent = "  ".repeat(context.indentLevel + 1);
+  if (node.type !== "FRAME") {
+    throw new Error(`Repeater node "${node.name}" must be a FRAME (got: ${node.type})`);
+  }
+  if (!node.layoutMode || node.layoutMode === "NONE") {
+    throw new Error(
+      `Repeater node "${node.name}" must have auto-layout (HORIZONTAL or VERTICAL)`
+    );
+  }
+  const positionStyle = getPositionStyle(node);
+  const frameSizeStyles = getFrameSizeStyles(node);
+  const backgroundStyle = getBackgroundFillsStyle(node);
+  const borderRadius = getBorderRadius(node);
+  const strokeStyles = getStrokeStyles(node);
+  const flexStyles = getAutoLayoutStyles(node);
+  const overflowStyles = getOverflowStyles(node);
+  const commonStyles = getCommonStyles(node);
+  const outerStyleAttr = `${positionStyle}${frameSizeStyles}${backgroundStyle}${strokeStyles}${borderRadius}${overflowStyles}${commonStyles}${flexStyles}box-sizing: border-box;`;
+  let innerDivSizeStyles = "";
+  if (node.layoutWrap === "WRAP") {
+    innerDivSizeStyles = "width: fit-content; height: fit-content;";
+  } else if (node.layoutMode === "HORIZONTAL") {
+    innerDivSizeStyles = "height: 100%;";
+  } else if (node.layoutMode === "VERTICAL") {
+    innerDivSizeStyles = "width: 100%;";
+  }
+  let html = `${indent}<div id="${node.id}" data-figma-id="${node.id}" data-figma-type="frame-repeater" style="${outerStyleAttr}">
+`;
+  html += `${innerIndent}<div style="position: relative; ${innerDivSizeStyles}" forEach="${repeaterPath}" trackBy="${trackByKey}">
+`;
+  const newContext = {
+    ...context,
+    repeaterPathStack: [...context.repeaterPathStack, repeaterPath.split(".")],
+    indentLevel: context.indentLevel + 2
+    // +2 because we're inside both divs
+  };
+  if (node.children && node.children.length > 0) {
+    html += convertNodeToJayHtml2(node.children[0], newContext);
+  } else {
+    throw new Error(
+      `Repeater node "${node.name}" has no children - repeater template is required`
+    );
+  }
+  html += `${innerIndent}</div>
+`;
+  html += `${indent}</div>
+`;
+  return html;
+}
+function convertGroupNode(node, analysis, context, convertNodeToJayHtml2) {
+  const indent = "  ".repeat(context.indentLevel);
+  const positionStyle = getPositionStyle(node);
+  const sizeStyles = getNodeSizeStyles(node);
+  const commonStyles = getCommonStyles(node);
+  const styleAttr = `${positionStyle}${sizeStyles}${commonStyles}box-sizing: border-box;`;
+  let refAttr = "";
+  if (analysis.refPath) {
+    refAttr = ` ref="${analysis.refPath}"`;
+  } else if (analysis.dualPath) {
+    refAttr = ` ref="${analysis.dualPath}"`;
+  }
+  let htmlAttrs = `id="${node.id}" data-figma-id="${node.id}" data-figma-type="group"${refAttr} style="${styleAttr}"`;
+  for (const [attr, tagPath] of analysis.attributes) {
+    htmlAttrs += ` ${attr}="{${tagPath}}"`;
+  }
+  let html = `${indent}<div ${htmlAttrs}>
+`;
+  const childContext = {
+    ...context,
+    indentLevel: context.indentLevel + 1
+  };
+  if (node.children && node.children.length > 0) {
+    for (const child of node.children) {
+      html += convertNodeToJayHtml2(child, childContext);
+    }
+  }
+  html += `${indent}</div>
+`;
+  return html;
+}
+function findContractTag(tags, tagPath) {
+  if (tagPath.length === 0) {
+    return void 0;
+  }
+  const tag = tags.find((t) => t.tag === tagPath[0]);
+  if (!tag) {
+    return void 0;
+  }
+  if (tagPath.length === 1) {
+    return tag;
+  }
+  if (!tag.tags || tag.tags.length === 0) {
+    return void 0;
+  }
+  return findContractTag(tag.tags, tagPath.slice(1));
+}
+function findPlugin(plugins, pluginName) {
+  return plugins.find((p) => p.name === pluginName);
+}
+function findPluginContract(plugin, componentName) {
+  const contract = plugin.contracts.find((c) => c.name === componentName);
+  return contract ? { tags: contract.tags } : void 0;
+}
+function findPageContract(projectPage) {
+  return projectPage.contract ? { tags: projectPage.contract.tags } : void 0;
+}
+function isDataTag(contractTag) {
+  if (Array.isArray(contractTag.type)) {
+    return contractTag.type.includes("data");
+  }
+  return contractTag.type === "data";
+}
+function isInteractiveTag(contractTag) {
+  if (Array.isArray(contractTag.type)) {
+    return contractTag.type.includes("interactive");
+  }
+  return contractTag.type === "interactive";
+}
+function isDualTag(contractTag) {
+  if (Array.isArray(contractTag.type)) {
+    return contractTag.type.includes("data") && contractTag.type.includes("interactive");
+  }
+  return false;
+}
+function isRepeaterTag(contractTag) {
+  return contractTag.type === "subContract" && contractTag.repeated === true;
+}
+function applyRepeaterContext(path2, repeaterStack) {
+  for (const repeaterPath of repeaterStack) {
+    const prefix = repeaterPath.join(".") + ".";
+    if (path2.startsWith(prefix)) {
+      path2 = path2.substring(prefix.length);
+    }
+  }
+  return path2;
+}
+function resolveBinding(binding, context) {
+  let contract;
+  let key;
+  let tagPathWithoutKey;
+  if (binding.pageContractPath.pluginName && binding.pageContractPath.componentName) {
+    const plugin = findPlugin(context.plugins, binding.pageContractPath.pluginName);
+    if (!plugin) {
+      throw new Error(`Plugin not found: ${binding.pageContractPath.pluginName}`);
+    }
+    contract = findPluginContract(plugin, binding.pageContractPath.componentName);
+    if (!contract) {
+      throw new Error(
+        `Contract not found in plugin ${binding.pageContractPath.pluginName}: ${binding.pageContractPath.componentName}`
+      );
+    }
+    const usedComponent = context.projectPage.usedComponents?.find(
+      (c) => c.componentName === binding.pageContractPath.componentName
+    );
+    if (!usedComponent) {
+      throw new Error(
+        `Used component not found in page: ${binding.pageContractPath.componentName}`
+      );
+    }
+    key = usedComponent.key;
+    tagPathWithoutKey = binding.tagPath.slice(1);
+  } else {
+    contract = findPageContract(context.projectPage);
+    if (!contract) {
+      throw new Error(`Page contract not found for page ${context.projectPage.url}`);
+    }
+    tagPathWithoutKey = binding.tagPath;
+  }
+  const contractTag = findContractTag(contract.tags, tagPathWithoutKey);
+  if (!contractTag) {
+    throw new Error(`Contract tag not found: ${tagPathWithoutKey.join(".")} in contract`);
+  }
+  let fullPath;
+  if (key) {
+    fullPath = [key, ...tagPathWithoutKey].join(".");
+  } else {
+    fullPath = binding.tagPath.join(".");
+  }
+  fullPath = applyRepeaterContext(fullPath, context.repeaterPathStack);
+  return { fullPath, contractTag };
+}
+function getBindingsData(node) {
+  const bindingsDataRaw = node.pluginData?.["jay-layer-bindings"];
+  if (bindingsDataRaw) {
+    try {
+      return JSON.parse(bindingsDataRaw);
+    } catch (error) {
+      console.warn(`Failed to parse bindings data for node ${node.name}:`, error);
+      return [];
+    }
+  }
+  return [];
+}
+function analyzeBindings(bindings, context) {
+  const analysis = {
+    type: "none",
+    attributes: /* @__PURE__ */ new Map(),
+    propertyBindings: [],
+    isRepeater: false
+  };
+  if (bindings.length === 0) {
+    return analysis;
+  }
+  const resolved = bindings.map((b) => ({
+    binding: b,
+    ...resolveBinding(b, context)
+  })).filter((r) => r.fullPath && r.contractTag);
+  if (resolved.length === 0) {
+    return analysis;
+  }
+  const repeaterBinding = resolved.find((r) => isRepeaterTag(r.contractTag));
+  if (repeaterBinding) {
+    analysis.type = "repeater";
+    analysis.isRepeater = true;
+    analysis.repeaterPath = repeaterBinding.fullPath;
+    analysis.repeaterTag = repeaterBinding.contractTag;
+    analysis.trackByKey = repeaterBinding.contractTag.trackBy || "id";
+    return analysis;
+  }
+  const propertyBindings = resolved.filter((r) => r.binding.property);
+  if (propertyBindings.length > 0) {
+    if (propertyBindings.length !== resolved.length) {
+      throw new Error(`Node has mixed property and non-property bindings - this is invalid`);
+    }
+    analysis.type = "property-variant";
+    analysis.propertyBindings = propertyBindings.map((r) => ({
+      property: r.binding.property,
+      tagPath: r.fullPath,
+      contractTag: r.contractTag
+    }));
+    for (const r of propertyBindings) {
+      if (isInteractiveTag(r.contractTag)) {
+        analysis.interactiveVariantPath = r.fullPath;
+        break;
+      }
+    }
+    return analysis;
+  }
+  const attributeBindings = resolved.filter((r) => r.binding.attribute);
+  if (attributeBindings.length > 0) {
+    analysis.type = "attribute";
+    for (const r of attributeBindings) {
+      analysis.attributes.set(r.binding.attribute, r.fullPath);
+    }
+  }
+  const contentBindings = resolved.filter((r) => !r.binding.attribute && !r.binding.property);
+  if (contentBindings.length > 0) {
+    const binding = contentBindings[0];
+    if (isDualTag(binding.contractTag)) {
+      analysis.type = "dual";
+      analysis.dualPath = binding.fullPath;
+    } else if (isInteractiveTag(binding.contractTag)) {
+      analysis.type = "interactive";
+      analysis.refPath = binding.fullPath;
+    } else if (isDataTag(binding.contractTag)) {
+      if (analysis.type === "attribute") {
+        analysis.dynamicContentPath = binding.fullPath;
+        analysis.dynamicContentTag = binding.contractTag;
+      } else {
+        analysis.type = "dynamic-content";
+        analysis.dynamicContentPath = binding.fullPath;
+        analysis.dynamicContentTag = binding.contractTag;
+      }
+    }
+  }
+  return analysis;
+}
+function validateBindings(analysis, node) {
+  if (analysis.type === "property-variant" && analysis.attributes.size > 0) {
+    throw new Error(
+      `Node "${node.name}" has both property and attribute bindings - this is invalid`
+    );
+  }
+  if (analysis.type === "interactive" && analysis.attributes.size > 0) {
+    throw new Error(
+      `Node "${node.name}" has interactive binding with attributes - this is invalid`
+    );
+  }
+}
+function convertRegularNode(node, analysis, context) {
+  const indent = "  ".repeat(context.indentLevel);
+  const { type, children, pluginData } = node;
+  const semanticHtml = pluginData?.["semanticHtml"];
+  if (type === "TEXT") {
+    const dynamicContent = analysis.dynamicContentPath ? `{${analysis.dynamicContentPath}}` : "";
+    const refAttr = analysis.refPath ? ` ref="${analysis.refPath}"` : "";
+    const dualContent = analysis.dualPath ? `{${analysis.dualPath}}` : "";
+    const dualRef = analysis.dualPath ? ` ref="${analysis.dualPath}"` : "";
+    let attributesHtml = "";
+    for (const [attr, tagPath] of analysis.attributes) {
+      attributesHtml += ` ${attr}="{${tagPath}}"`;
+    }
+    return convertTextNodeToHtml(
+      node,
+      indent,
+      dynamicContent || dualContent,
+      refAttr || dualRef,
+      attributesHtml
+    );
+  }
+  if (semanticHtml === "img") {
+    let srcBinding;
+    let altBinding;
+    for (const [attr, tagPath] of analysis.attributes) {
+      if (attr === "src") {
+        srcBinding = `{${tagPath}}`;
+      } else if (attr === "alt") {
+        altBinding = `{${tagPath}}`;
+      }
+    }
+    let staticImageUrl;
+    if (!srcBinding) {
+      staticImageUrl = extractStaticImageUrl(node);
+    }
+    const refAttr = analysis.refPath ? ` ref="${analysis.refPath}"` : analysis.dualPath ? ` ref="${analysis.dualPath}"` : "";
+    return convertImageNodeToHtml(
+      node,
+      indent,
+      srcBinding,
+      altBinding,
+      refAttr,
+      staticImageUrl
+    );
+  }
+  const positionStyle = getPositionStyle(node);
+  const sizeStyles = getNodeSizeStyles(node);
+  const commonStyles = getCommonStyles(node);
+  let styleAttr = "";
+  if (type === "FRAME") {
+    const backgroundStyle = getBackgroundFillsStyle(node);
+    const borderRadius = getBorderRadius(node);
+    const strokeStyles = getStrokeStyles(node);
+    const flexStyles = getAutoLayoutStyles(node);
+    const overflowStyles = getOverflowStyles(node);
+    const frameSizeStyles = getFrameSizeStyles(node);
+    styleAttr = `${positionStyle}${frameSizeStyles}${backgroundStyle}${strokeStyles}${borderRadius}${overflowStyles}${commonStyles}${flexStyles}box-sizing: border-box;`;
+  } else {
+    styleAttr = `${positionStyle}${sizeStyles}${commonStyles}`;
+  }
+  const tag = semanticHtml || "div";
+  let htmlAttrs = `data-figma-id="${node.id}" data-figma-type="${type.toLowerCase()}" style="${styleAttr}"`;
+  if (analysis.refPath) {
+    htmlAttrs += ` ref="${analysis.refPath}"`;
+  } else if (analysis.dualPath) {
+    htmlAttrs += ` ref="${analysis.dualPath}"`;
+  }
+  for (const [attr, tagPath] of analysis.attributes) {
+    htmlAttrs += ` ${attr}="{${tagPath}}"`;
+  }
+  if (type === "RECTANGLE") {
+    return convertRectangleToHtml(node, indent);
+  } else if (type === "ELLIPSE") {
+    return convertEllipseToHtml(node, indent);
+  } else if (type === "GROUP") {
+    return convertGroupNode(node, analysis, context, convertNodeToJayHtml);
+  } else if (type === "VECTOR" || type === "STAR" || type === "POLYGON" || type === "LINE" || type === "BOOLEAN_OPERATION") {
+    return convertVectorToHtml(node, indent);
+  } else if (children && children.length > 0) {
+    let html = `${indent}<${tag} ${htmlAttrs}>
+`;
+    html += `${indent}  <!-- ${node.name} -->
+`;
+    const childContext = {
+      ...context,
+      indentLevel: context.indentLevel + 1
+    };
+    for (const child of children) {
+      html += convertNodeToJayHtml(child, childContext);
+    }
+    html += `${indent}</${tag}>
+`;
+    return html;
+  } else {
+    return `${indent}<!-- ${node.name} (${type}) -->
+`;
+  }
+}
+function convertNodeToJayHtml(node, context) {
+  const { name, type, children, pluginData } = node;
+  const isJPage = pluginData?.["jpage"] === "true";
+  const urlRoute = pluginData?.["urlRoute"];
+  if (type === "TEXT" && node.fontName) {
+    if (typeof node.fontName === "object" && node.fontName.family) {
+      context.fontFamilies.add(node.fontName.family);
+    }
+  }
+  const indent = "  ".repeat(context.indentLevel);
+  if (type === "SECTION" && isJPage) {
+    let html = `${indent}<section data-figma-id="${node.id}" data-page-url="${urlRoute || ""}">
+`;
+    html += `${indent}  <!-- Jay Page: ${name} -->
+`;
+    if (children && children.length > 0) {
+      const childContext = {
+        ...context,
+        indentLevel: context.indentLevel + 1
+      };
+      for (const child of children) {
+        html += convertNodeToJayHtml(child, childContext);
+      }
+    }
+    html += `${indent}</section>
+`;
+    return html;
+  }
+  const bindings = getBindingsData(node);
+  const analysis = analyzeBindings(bindings, context);
+  validateBindings(analysis, node);
+  if (analysis.isRepeater) {
+    return convertRepeaterNode(node, analysis, context, convertNodeToJayHtml);
+  }
+  if (analysis.type === "property-variant") {
+    return convertVariantNode(node, analysis, context, convertNodeToJayHtml);
+  }
+  return convertRegularNode(node, analysis, context);
+}
+function findContentFrame(section) {
+  if (!section.children || section.children.length === 0) {
+    return {
+      frame: null,
+      error: `Jay Page section "${section.name}" has no children`
+    };
+  }
+  const frameNodes = section.children.filter((child) => child.type === "FRAME");
+  if (frameNodes.length === 0) {
+    return {
+      frame: null,
+      error: `Jay Page section "${section.name}" has no FrameNode children. Found: ${section.children.map((c) => c.type).join(", ")}`
+    };
+  }
+  if (frameNodes.length > 1) {
+    return {
+      frame: frameNodes[0],
+      warning: `Jay Page section "${section.name}" has ${frameNodes.length} FrameNodes, using the first one`
+    };
+  }
+  return { frame: frameNodes[0] };
+}
+const figmaVendor = {
+  vendorId: "figma",
+  async convertToBodyHtml(vendorDoc, pageUrl, projectPage, plugins) {
+    console.log(`🎨 Converting Figma document for page: ${pageUrl}`);
+    console.log(`   Document type: ${vendorDoc.type}, name: ${vendorDoc.name}`);
+    const isJPage = vendorDoc.pluginData?.["jpage"] === "true";
+    if (!isJPage) {
+      throw new Error(
+        `Document "${vendorDoc.name}" is not marked as a Jay Page (missing jpage='true' in pluginData)`
+      );
+    }
+    const { frame, error, warning } = findContentFrame(vendorDoc);
+    if (error) {
+      throw new Error(`Cannot convert to Jay HTML: ${error}`);
+    }
+    if (warning) {
+      console.warn(`⚠️  ${warning}`);
+    }
+    if (!frame) {
+      throw new Error(`Cannot convert to Jay HTML: No content frame found`);
+    }
+    console.log(`   Converting content frame: ${frame.name} (${frame.type})`);
+    const fontFamilies = /* @__PURE__ */ new Set();
+    const context = {
+      repeaterPathStack: [],
+      indentLevel: 1,
+      // Start at 1 for body content
+      fontFamilies,
+      projectPage,
+      plugins
+    };
+    const bodyHtml = convertNodeToJayHtml(frame, context);
+    if (fontFamilies.size > 0) {
+      console.log(
+        `   Found ${fontFamilies.size} font families: ${Array.from(fontFamilies).join(", ")}`
+      );
+    }
+    return {
+      bodyHtml,
+      fontFamilies,
+      // No contract data for now - Figma vendor doesn't generate contracts yet
+      contractData: void 0
+    };
+  }
+};
+const vendorRegistry = /* @__PURE__ */ new Map([
+  [figmaVendor.vendorId, figmaVendor]
+  // Add more vendors here as they are contributed
+]);
+function getVendor(vendorId) {
+  return vendorRegistry.get(vendorId);
+}
+function hasVendor(vendorId) {
+  return vendorRegistry.has(vendorId);
+}
+function getRegisteredVendors() {
+  return Array.from(vendorRegistry.keys());
+}
+function escapeHtml(text) {
+  if (!text)
+    return "";
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function generateGoogleFontsLinks(fontFamilies) {
+  if (fontFamilies.size === 0) {
+    return "";
+  }
+  const families = Array.from(fontFamilies);
+  const googleFontsUrl = `https://fonts.googleapis.com/css2?${families.map((family) => {
+    const encodedFamily = encodeURIComponent(family).replace(/%20/g, "+");
+    return `family=${encodedFamily}:wght@100;200;300;400;500;600;700;800;900`;
+  }).join("&")}&display=swap`;
+  return `  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="${googleFontsUrl}" rel="stylesheet">`;
+}
+function generateHeadlessComponentScripts(components) {
+  if (components.length === 0) {
+    return "";
+  }
+  const scriptTags = components.map(
+    (comp) => `  <script
+    type="application/jay-headless"
+    plugin="${comp.plugin}"
+    contract="${comp.contract}"
+    key="${comp.key}"
+  ><\/script>`
+  );
+  return "\n" + scriptTags.join("\n");
+}
+function generateJayDataScript(contractData) {
+  if (contractData) {
+    return `  <script type="application/jay-data">
+    data:
+${contractData.tagsYaml}
+  <\/script>`;
+  }
+  return `  <script type="application/jay-data">
+    data:
+  <\/script>`;
+}
+function buildJayHtml(options) {
+  const {
+    bodyHtml,
+    fontFamilies,
+    contractData,
+    headlessComponents = [],
+    title = "Page"
+  } = options;
+  const fontLinks = generateGoogleFontsLinks(fontFamilies);
+  const headlessScripts = generateHeadlessComponentScripts(headlessComponents);
+  const jayDataScript = generateJayDataScript(contractData);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+${fontLinks}${headlessScripts}
+${jayDataScript}
+  <title>${escapeHtml(title)}</title>
+  <style>
+    /* Basic reset */
+    body { margin: 0; font-family: sans-serif; }
+    a { color: inherit; text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    div { box-sizing: border-box; }
+    
+    /* Scrollbar styling for Webkit browsers */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.5);
+    }
+    
+    /* Smooth scrolling */
+    * {
+      scroll-behavior: smooth;
+    }
+  </style>
+</head>
+<body>
+${bodyHtml}
+</body>
+</html>`;
+}
+async function buildJayHtmlFromVendorResult(conversionResult, pageDirectory, pageTitle) {
+  const pageConfigPath = path.join(pageDirectory, "page.conf.yaml");
+  const headlessComponents = [];
+  if (fs.existsSync(pageConfigPath)) {
+    try {
+      const configContent = await fs.promises.readFile(pageConfigPath, "utf-8");
+      const pageConfig = YAML.parse(configContent);
+      if (pageConfig.used_components && Array.isArray(pageConfig.used_components)) {
+        for (const comp of pageConfig.used_components) {
+          if (comp.plugin && comp.contract && comp.key) {
+            headlessComponents.push({
+              plugin: comp.plugin,
+              contract: comp.contract,
+              key: comp.key
+            });
+          }
+        }
+      }
+    } catch (configError) {
+      console.warn(`Failed to read page config ${pageConfigPath}:`, configError);
+    }
+  }
+  const title = pageTitle || path.basename(pageDirectory);
+  return buildJayHtml({
+    bodyHtml: conversionResult.bodyHtml,
+    fontFamilies: conversionResult.fontFamilies,
+    contractData: conversionResult.contractData,
+    headlessComponents,
+    title
+  });
+}
 const PAGE_FILENAME = `page${JAY_EXTENSION}`;
 const PAGE_CONTRACT_FILENAME = `page${JAY_CONTRACT_EXTENSION}`;
 const PAGE_CONFIG_FILENAME = "page.conf.yaml";
+function pageUrlToDirectoryPath(pageUrl, pagesBasePath) {
+  const routePath = pageUrl === "/" ? "" : pageUrl;
+  const fsPath = routePath.replace(/:([^/]+)/g, "[$1]");
+  return path.join(pagesBasePath, fsPath);
+}
 function jayTypeToString(jayType) {
   if (!jayType)
     return void 0;
@@ -103,31 +1562,30 @@ function jayTypeToString(jayType) {
   }
 }
 function convertContractTagToProtocol(tag) {
-  const protocolTag = {
+  const typeArray = Array.isArray(tag.type) ? tag.type : [tag.type];
+  const typeStrings = typeArray.map((t) => ContractTagType[t]);
+  return {
     tag: tag.tag,
-    type: tag.type.length === 1 ? ContractTagType[tag.type[0]] : tag.type.map((t) => ContractTagType[t])
+    type: typeStrings.length === 1 ? typeStrings[0] : typeStrings,
+    dataType: tag.dataType ? jayTypeToString(tag.dataType) : void 0,
+    elementType: tag.elementType ? tag.elementType.join(" | ") : void 0,
+    required: tag.required,
+    repeated: tag.repeated,
+    trackBy: tag.trackBy,
+    async: tag.async,
+    phase: tag.phase,
+    link: tag.link,
+    tags: tag.tags ? tag.tags.map(convertContractTagToProtocol) : void 0
+  };
+}
+function convertContractToProtocol(contract) {
+  return {
+    name: contract.name,
+    tags: contract.tags.map(convertContractTagToProtocol)
   };
-  if (tag.dataType) {
-    protocolTag.dataType = jayTypeToString(tag.dataType);
-  }
-  if (tag.elementType) {
-    protocolTag.elementType = tag.elementType.join(" | ");
-  }
-  if (tag.required !== void 0) {
-    protocolTag.required = tag.required;
-  }
-  if (tag.repeated !== void 0) {
-    protocolTag.repeated = tag.repeated;
-  }
-  if (tag.link) {
-    protocolTag.link = tag.link;
-  }
-  if (tag.tags) {
-    protocolTag.tags = tag.tags.map(convertContractTagToProtocol);
-  }
-  return protocolTag;
 }
-function isPageDirectory(entries) {
+async function isPageDirectory(dirPath) {
+  const entries = await fs.promises.readdir(dirPath, { withFileTypes: true });
   const hasPageHtml = entries.some((e) => e.name === PAGE_FILENAME);
   const hasPageContract = entries.some((e) => e.name === PAGE_CONTRACT_FILENAME);
   const hasPageConfig = entries.some((e) => e.name === PAGE_CONFIG_FILENAME);
@@ -137,8 +1595,7 @@ function isPageDirectory(entries) {
 async function scanPageDirectories(pagesBasePath, onPageFound) {
   async function scanDirectory(dirPath, urlPath = "") {
     try {
-      const entries = await fs.promises.readdir(dirPath, { withFileTypes: true });
-      const { isPage, hasPageHtml, hasPageContract, hasPageConfig } = isPageDirectory(entries);
+      const { isPage, hasPageHtml, hasPageContract, hasPageConfig } = await isPageDirectory(dirPath);
       if (isPage) {
         const pageUrl = urlPath || "/";
         const pageName = dirPath === pagesBasePath ? "Home" : path.basename(dirPath);
@@ -151,6 +1608,7 @@ async function scanPageDirectories(pagesBasePath, onPageFound) {
           hasPageConfig
         });
       }
+      const entries = await fs.promises.readdir(dirPath, { withFileTypes: true });
       for (const entry of entries) {
         const fullPath = path.join(dirPath, entry.name);
         if (entry.isDirectory()) {
@@ -161,244 +1619,124 @@ async function scanPageDirectories(pagesBasePath, onPageFound) {
         }
       }
     } catch (error) {
-      getLogger().warn(`Failed to scan directory ${dirPath}: ${error}`);
+      getLogger().warn(`Failed to scan directory ${dirPath}:`, error);
     }
   }
   await scanDirectory(pagesBasePath);
 }
-async function parseContractFile(contractFilePath) {
-  try {
-    const contractYaml = await fs.promises.readFile(contractFilePath, "utf-8");
-    const parsedContract = parseContract(contractYaml, contractFilePath);
-    if (parsedContract.validations.length > 0) {
-      getLogger().warn(
-        `Contract validation errors in ${contractFilePath}: ${parsedContract.validations.join(", ")}`
-      );
-    }
-    if (parsedContract.val) {
-      const resolvedTags = await resolveLinkedTags(
-        parsedContract.val.tags,
-        path.dirname(contractFilePath)
-      );
-      return {
-        name: parsedContract.val.name,
-        tags: resolvedTags
-      };
-    }
-  } catch (error) {
-    getLogger().warn(`Failed to parse contract file ${contractFilePath}: ${error}`);
-  }
-  return null;
-}
-async function resolveLinkedTags(tags, baseDir) {
+function expandContractTags(tags, baseDir) {
   const resolvedTags = [];
   for (const tag of tags) {
     if (tag.link) {
       try {
-        const linkedPath = path.resolve(baseDir, tag.link);
-        const linkedContract = await parseContractFile(linkedPath);
-        if (linkedContract) {
+        const linkWithExtension = tag.link.endsWith(JAY_CONTRACT_EXTENSION) ? tag.link : tag.link + JAY_CONTRACT_EXTENSION;
+        const linkedPath = JAY_IMPORT_RESOLVER.resolveLink(baseDir, linkWithExtension);
+        const loadResult = JAY_IMPORT_RESOLVER.loadContract(linkedPath);
+        if (loadResult.val) {
+          const expandedSubTags = expandContractTags(
+            loadResult.val.tags,
+            path.dirname(linkedPath)
+          );
           const resolvedTag = {
             tag: tag.tag,
-            type: tag.type.length === 1 ? ContractTagType[tag.type[0]] : tag.type.map((t) => ContractTagType[t]),
-            tags: linkedContract.tags
-            // Use tags from linked contract
+            type: tag.type,
+            // Keep the original enum type
+            tags: expandedSubTags,
+            required: tag.required,
+            repeated: tag.repeated,
+            trackBy: tag.trackBy,
+            async: tag.async,
+            phase: tag.phase,
+            link: tag.link
           };
-          if (tag.required !== void 0) {
-            resolvedTag.required = tag.required;
-          }
-          if (tag.repeated !== void 0) {
-            resolvedTag.repeated = tag.repeated;
-          }
           resolvedTags.push(resolvedTag);
         } else {
           getLogger().warn(`Failed to load linked contract: ${tag.link} from ${baseDir}`);
-          resolvedTags.push(convertContractTagToProtocol(tag));
+          resolvedTags.push(tag);
         }
       } catch (error) {
-        getLogger().warn(`Error resolving linked contract ${tag.link}: ${error}`);
-        resolvedTags.push(convertContractTagToProtocol(tag));
+        getLogger().warn(`Error resolving linked contract ${tag.link}:`, error);
+        resolvedTags.push(tag);
       }
     } else if (tag.tags) {
-      const resolvedSubTags = await resolveLinkedTags(tag.tags, baseDir);
-      const protocolTag = convertContractTagToProtocol(tag);
-      protocolTag.tags = resolvedSubTags;
-      resolvedTags.push(protocolTag);
+      const resolvedSubTags = expandContractTags(tag.tags, baseDir);
+      const resolvedTag = {
+        ...tag,
+        tags: resolvedSubTags
+      };
+      resolvedTags.push(resolvedTag);
     } else {
-      resolvedTags.push(convertContractTagToProtocol(tag));
+      resolvedTags.push(tag);
     }
   }
   return resolvedTags;
-}
-function resolveAppContractPath(appModule, contractFileName, projectRootPath) {
-  try {
-    const require2 = createRequire(path.join(projectRootPath, "package.json"));
-    const modulePath = `${appModule}/${contractFileName}`;
-    const resolvedPath = require2.resolve(modulePath);
-    return resolvedPath;
-  } catch (error) {
-    getLogger().warn(
-      `Failed to resolve contract: ${appModule}/${contractFileName} - ${error instanceof Error ? error.message : error}`
-    );
-    return null;
-  }
-}
-async function scanInstalledAppContracts(configBasePath, projectRootPath) {
-  const installedAppContracts = {};
-  const installedAppsPath = path.join(configBasePath, "installedApps");
-  try {
-    if (!fs.existsSync(installedAppsPath)) {
-      return installedAppContracts;
-    }
-    const appDirs = await fs.promises.readdir(installedAppsPath, { withFileTypes: true });
-    for (const appDir of appDirs) {
-      if (appDir.isDirectory()) {
-        const appConfigPath = path.join(installedAppsPath, appDir.name, "app.conf.yaml");
-        try {
-          if (fs.existsSync(appConfigPath)) {
-            const configContent = await fs.promises.readFile(appConfigPath, "utf-8");
-            const appConfig = YAML.parse(configContent);
-            const appName = appConfig.name || appDir.name;
-            const appModule = appConfig.module || appDir.name;
-            const appContracts = {
-              appName,
-              module: appModule,
-              pages: [],
-              components: []
-            };
-            if (appConfig.pages && Array.isArray(appConfig.pages)) {
-              for (const page of appConfig.pages) {
-                if (page.headless_components && Array.isArray(page.headless_components)) {
-                  for (const component of page.headless_components) {
-                    if (component.contract) {
-                      const contractPath = resolveAppContractPath(
-                        appModule,
-                        component.contract,
-                        projectRootPath
-                      );
-                      if (contractPath) {
-                        const contractSchema = await parseContractFile(contractPath);
-                        if (contractSchema) {
-                          appContracts.pages.push({
-                            pageName: page.name,
-                            contractSchema
-                          });
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-            if (appConfig.components && Array.isArray(appConfig.components)) {
-              for (const component of appConfig.components) {
-                if (component.headless_components && Array.isArray(component.headless_components)) {
-                  for (const headlessComp of component.headless_components) {
-                    if (headlessComp.contract) {
-                      const contractPath = resolveAppContractPath(
-                        appModule,
-                        headlessComp.contract,
-                        projectRootPath
-                      );
-                      if (contractPath) {
-                        const contractSchema = await parseContractFile(contractPath);
-                        if (contractSchema) {
-                          appContracts.components.push({
-                            componentName: component.name,
-                            contractSchema
-                          });
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-            installedAppContracts[appName] = appContracts;
-          }
-        } catch (error) {
-          getLogger().warn(`Failed to parse app config ${appConfigPath}: ${error}`);
-        }
-      }
-    }
-  } catch (error) {
-    getLogger().warn(`Failed to scan installed apps directory ${installedAppsPath}: ${error}`);
-  }
-  return installedAppContracts;
-}
-function extractHeadlessComponents(jayHtmlContent, installedApps, installedAppContracts) {
-  const root = parse(jayHtmlContent);
-  const headlessScripts = root.querySelectorAll('script[type="application/jay-headless"]');
-  const resolvedComponents = [];
-  for (const script of headlessScripts) {
-    const src = script.getAttribute("src") || "";
-    const name = script.getAttribute("name") || "";
-    const key = script.getAttribute("key") || "";
-    let resolved = false;
-    for (const app of installedApps) {
-      if (app.module !== src && app.name !== src) {
-        continue;
-      }
-      for (const appPage of app.pages) {
-        for (const headlessComp of appPage.headless_components) {
-          if (headlessComp.name === name && headlessComp.key === key) {
-            const appContracts = installedAppContracts[app.name];
-            if (appContracts) {
-              const matchingPageContract = appContracts.pages.find(
-                (pc) => pc.pageName === appPage.name
-              );
-              if (matchingPageContract) {
-                resolvedComponents.push({
-                  appName: app.name,
-                  componentName: appPage.name,
-                  key
-                });
-                resolved = true;
-                break;
-              }
-            }
-          }
-        }
-        if (resolved)
-          break;
-      }
-      if (resolved)
-        break;
-      for (const appComponent of app.components) {
-        for (const headlessComp of appComponent.headless_components) {
-          if (headlessComp.name === name && headlessComp.key === key) {
-            const appContracts = installedAppContracts[app.name];
-            if (appContracts) {
-              const matchingComponentContract = appContracts.components.find(
-                (cc) => cc.componentName === appComponent.name
-              );
-              if (matchingComponentContract) {
-                resolvedComponents.push({
-                  appName: app.name,
-                  componentName: appComponent.name,
-                  key
-                });
-                resolved = true;
-                break;
-              }
-            }
-          }
-        }
-        if (resolved)
-          break;
-      }
-      if (resolved)
-        break;
+}
+function loadAndExpandContract(contractFilePath) {
+  try {
+    const loadResult = JAY_IMPORT_RESOLVER.loadContract(contractFilePath);
+    if (loadResult.validations.length > 0) {
+      getLogger().warn(
+        `Contract validation errors in ${contractFilePath}:`,
+        loadResult.validations
+      );
     }
-    if (!resolved) {
-      resolvedComponents.push({
-        appName: src,
-        componentName: name,
-        key
+    if (loadResult.val) {
+      const resolvedTags = expandContractTags(
+        loadResult.val.tags,
+        path.dirname(contractFilePath)
+      );
+      return convertContractToProtocol({
+        name: loadResult.val.name,
+        tags: resolvedTags
       });
     }
+  } catch (error) {
+    getLogger().warn(`Failed to parse contract file ${contractFilePath}:`, error);
+  }
+  return null;
+}
+async function extractHeadlessComponentsFromJayHtml(jayHtmlContent, pageFilePath, projectRootPath) {
+  try {
+    const parsedJayHtml = await parseJayFile(
+      jayHtmlContent,
+      path.basename(pageFilePath),
+      path.dirname(pageFilePath),
+      { relativePath: "" },
+      // We don't need TypeScript config for headless extraction
+      JAY_IMPORT_RESOLVER,
+      projectRootPath
+    );
+    if (parsedJayHtml.validations.length > 0) {
+      getLogger().warn(
+        `Jay-HTML parsing warnings for ${pageFilePath}:`,
+        parsedJayHtml.validations
+      );
+    }
+    if (!parsedJayHtml.val) {
+      getLogger().warn(`Failed to parse jay-html file: ${pageFilePath}`);
+      return [];
+    }
+    const resolvedComponents = [];
+    for (const headlessImport of parsedJayHtml.val.headlessImports) {
+      if (headlessImport.codeLink) {
+        let pluginName = headlessImport.codeLink.module;
+        const nodeModulesMatch = pluginName.match(/node_modules\/([^/]+)/);
+        if (nodeModulesMatch) {
+          pluginName = nodeModulesMatch[1];
+        }
+        const componentName = headlessImport.contract?.name || "unknown";
+        resolvedComponents.push({
+          appName: pluginName,
+          componentName,
+          key: headlessImport.key
+        });
+      }
+    }
+    return resolvedComponents;
+  } catch (error) {
+    getLogger().warn(`Failed to parse jay-html content for ${pageFilePath}:`, error);
+    return [];
   }
-  return resolvedComponents;
 }
 async function scanProjectComponents(componentsBasePath) {
   const components = [];
@@ -421,43 +1759,10 @@ async function scanProjectComponents(componentsBasePath) {
       }
     }
   } catch (error) {
-    getLogger().warn(`Failed to scan components directory ${componentsBasePath}: ${error}`);
+    getLogger().warn(`Failed to scan components directory ${componentsBasePath}:`, error);
   }
   return components;
 }
-async function scanInstalledApps(configBasePath) {
-  const installedApps = [];
-  const installedAppsPath = path.join(configBasePath, "installedApps");
-  try {
-    if (!fs.existsSync(installedAppsPath)) {
-      return installedApps;
-    }
-    const appDirs = await fs.promises.readdir(installedAppsPath, { withFileTypes: true });
-    for (const appDir of appDirs) {
-      if (appDir.isDirectory()) {
-        const appConfigPath = path.join(installedAppsPath, appDir.name, "app.conf.yaml");
-        try {
-          if (fs.existsSync(appConfigPath)) {
-            const configContent = await fs.promises.readFile(appConfigPath, "utf-8");
-            const appConfig = YAML.parse(configContent);
-            installedApps.push({
-              name: appConfig.name || appDir.name,
-              module: appConfig.module || appDir.name,
-              pages: appConfig.pages || [],
-              components: appConfig.components || [],
-              config_map: appConfig.config_map || []
-            });
-          }
-        } catch (error) {
-          getLogger().warn(`Failed to parse app config ${appConfigPath}: ${error}`);
-        }
-      }
-    }
-  } catch (error) {
-    getLogger().warn(`Failed to scan installed apps directory ${installedAppsPath}: ${error}`);
-  }
-  return installedApps;
-}
 async function getProjectName(configBasePath) {
   const projectConfigPath = path.join(configBasePath, "project.conf.yaml");
   try {
@@ -467,266 +1772,256 @@ async function getProjectName(configBasePath) {
       return projectConfig.name || "Unnamed Project";
     }
   } catch (error) {
-    getLogger().warn(`Failed to read project config ${projectConfigPath}: ${error}`);
+    getLogger().warn(`Failed to read project config ${projectConfigPath}:`, error);
   }
   return "Unnamed Project";
 }
-async function scanPlugins(projectRootPath) {
+async function scanLocalPluginNames(projectRoot) {
   const plugins = [];
-  const localPluginsPath = path.join(projectRootPath, "src/plugins");
-  if (fs.existsSync(localPluginsPath)) {
-    try {
-      const pluginDirs = await fs.promises.readdir(localPluginsPath, { withFileTypes: true });
-      for (const dir of pluginDirs) {
-        if (!dir.isDirectory())
-          continue;
-        const pluginPath = path.join(localPluginsPath, dir.name);
-        const pluginYamlPath = path.join(pluginPath, "plugin.yaml");
+  const localPluginsDir = path.join(projectRoot, LOCAL_PLUGIN_PATH);
+  if (!fs.existsSync(localPluginsDir)) {
+    return plugins;
+  }
+  try {
+    const entries = await fs.promises.readdir(localPluginsDir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        const pluginDir = path.join(localPluginsDir, entry.name);
+        const pluginYamlPath = path.join(pluginDir, "plugin.yaml");
         if (fs.existsSync(pluginYamlPath)) {
-          try {
-            const yamlContent = await fs.promises.readFile(pluginYamlPath, "utf-8");
-            const manifest = YAML.parse(yamlContent);
-            plugins.push({
-              manifest,
-              location: {
-                type: "local",
-                path: pluginPath
-              }
-            });
-          } catch (error) {
-            getLogger().warn(`Failed to parse plugin.yaml for ${dir.name}: ${error}`);
-          }
+          plugins.push(entry.name);
         }
       }
-    } catch (error) {
-      getLogger().warn(
-        `Failed to scan local plugins directory ${localPluginsPath}: ${error}`
-      );
     }
+  } catch (error) {
+    getLogger().warn(`Failed to scan local plugins directory ${localPluginsDir}:`, error);
   }
-  const nodeModulesPath = path.join(projectRootPath, "node_modules");
-  if (fs.existsSync(nodeModulesPath)) {
-    try {
-      const topLevelDirs = await fs.promises.readdir(nodeModulesPath, {
-        withFileTypes: true
-      });
-      for (const entry of topLevelDirs) {
-        if (!entry.isDirectory())
-          continue;
-        const packageDirs = [];
-        if (entry.name.startsWith("@")) {
-          const scopePath = path.join(nodeModulesPath, entry.name);
-          const scopedPackages = await fs.promises.readdir(scopePath, {
-            withFileTypes: true
-          });
-          for (const scopedPkg of scopedPackages) {
-            if (scopedPkg.isDirectory()) {
-              packageDirs.push(path.join(scopePath, scopedPkg.name));
-            }
-          }
-        } else {
-          packageDirs.push(path.join(nodeModulesPath, entry.name));
-        }
-        for (const pkgPath of packageDirs) {
-          const pluginYamlPath = path.join(pkgPath, "plugin.yaml");
-          if (fs.existsSync(pluginYamlPath)) {
-            try {
-              const yamlContent = await fs.promises.readFile(pluginYamlPath, "utf-8");
-              const manifest = YAML.parse(yamlContent);
-              const packageJsonPath = path.join(pkgPath, "package.json");
-              let moduleName = manifest.module;
-              if (fs.existsSync(packageJsonPath)) {
-                const packageJson = JSON.parse(
-                  await fs.promises.readFile(packageJsonPath, "utf-8")
-                );
-                moduleName = packageJson.name;
-              }
-              plugins.push({
-                manifest: {
-                  ...manifest,
-                  module: moduleName
-                },
-                location: {
-                  type: "npm",
-                  module: moduleName || manifest.name
-                }
-              });
-            } catch (error) {
-              getLogger().warn(
-                `Failed to parse plugin.yaml for package ${pkgPath}: ${error}`
-              );
-            }
+  return plugins;
+}
+async function findPluginNamesFromPackageJson(projectRootPath) {
+  const pluginNames = [];
+  try {
+    const packageJsonPath = path.join(projectRootPath, "package.json");
+    if (!fs.existsSync(packageJsonPath)) {
+      getLogger().warn("package.json not found");
+      return pluginNames;
+    }
+    const packageJsonContent = await fs.promises.readFile(packageJsonPath, "utf-8");
+    const packageJson = JSON.parse(packageJsonContent);
+    const workspaceDependencies = /* @__PURE__ */ new Set();
+    const regularDependencies = /* @__PURE__ */ new Set();
+    for (const [depName, version] of Object.entries({
+      ...packageJson.dependencies
+    })) {
+      if (typeof version === "string" && version.startsWith("workspace:")) {
+        workspaceDependencies.add(depName);
+      } else {
+        regularDependencies.add(depName);
+      }
+    }
+    const nodeModulesPath = path.join(projectRootPath, "node_modules");
+    for (const depName of regularDependencies) {
+      if (await checkPackageForPlugin(nodeModulesPath, depName)) {
+        pluginNames.push(depName);
+      }
+    }
+    if (workspaceDependencies.size > 0) {
+      const workspaceNodeModules = await findWorkspaceNodeModulesPath(
+        projectRootPath,
+        Array.from(workspaceDependencies)
+      );
+      if (workspaceNodeModules) {
+        for (const depName of workspaceDependencies) {
+          if (await checkPackageForPlugin(workspaceNodeModules, depName)) {
+            pluginNames.push(depName);
           }
         }
       }
-    } catch (error) {
-      getLogger().warn(`Failed to scan node_modules for plugins: ${error}`);
     }
+  } catch (error) {
+    getLogger().error("Error finding plugins from package.json:", error);
   }
-  return plugins;
+  return pluginNames;
 }
-async function scanProjectInfo(pagesBasePath, componentsBasePath, configBasePath, projectRootPath) {
-  const [projectName, components, installedApps, plugins] = await Promise.all([
-    getProjectName(configBasePath),
-    scanProjectComponents(componentsBasePath),
-    scanInstalledApps(configBasePath),
-    scanPlugins(projectRootPath)
-  ]);
-  const installedAppContracts = await scanInstalledAppContracts(configBasePath, projectRootPath);
-  const pages = [];
-  await scanPageDirectories(pagesBasePath, async (context) => {
-    const { dirPath, pageUrl, pageName, hasPageHtml, hasPageContract, hasPageConfig } = context;
-    const pageFilePath = path.join(dirPath, PAGE_FILENAME);
-    const pageConfigPath = path.join(dirPath, PAGE_CONFIG_FILENAME);
-    const contractPath = path.join(dirPath, PAGE_CONTRACT_FILENAME);
-    let usedComponents = [];
-    let contractSchema;
-    if (hasPageContract) {
-      try {
-        const parsedContract = await parseContractFile(contractPath);
-        if (parsedContract) {
-          contractSchema = parsedContract;
+async function checkPackageForPlugin(nodeModulesDir, packageName) {
+  try {
+    const packageDir = path.join(nodeModulesDir, packageName);
+    const pluginYamlPath = path.join(packageDir, "plugin.yaml");
+    return fs.existsSync(pluginYamlPath);
+  } catch (error) {
+    return false;
+  }
+}
+async function findWorkspaceNodeModulesPath(startPath, workspaceDeps) {
+  let currentPath = startPath;
+  while (currentPath !== path.dirname(currentPath)) {
+    const nodeModulesPath = path.join(currentPath, "node_modules");
+    if (fs.existsSync(nodeModulesPath)) {
+      for (const depName of workspaceDeps) {
+        const depPath = path.join(nodeModulesPath, depName);
+        if (fs.existsSync(depPath)) {
+          return nodeModulesPath;
         }
-      } catch (error) {
-        getLogger().warn(`Failed to parse contract file ${contractPath}: ${error}`);
       }
     }
-    if (hasPageHtml) {
-      try {
-        const jayHtmlContent = await fs.promises.readFile(pageFilePath, "utf-8");
-        usedComponents = extractHeadlessComponents(
-          jayHtmlContent,
-          installedApps,
-          installedAppContracts
+    currentPath = path.dirname(currentPath);
+  }
+  return null;
+}
+async function scanPlugins(projectRootPath) {
+  const plugins = [];
+  try {
+    const [localPluginNames, dependencyPluginNames] = await Promise.all([
+      scanLocalPluginNames(projectRootPath),
+      findPluginNamesFromPackageJson(projectRootPath)
+    ]);
+    const allPluginNames = [.../* @__PURE__ */ new Set([...localPluginNames, ...dependencyPluginNames])];
+    getLogger().info(`Found ${allPluginNames.length} plugins: ${allPluginNames.join(", ")}`);
+    for (const pluginName of allPluginNames) {
+      const manifest = resolvePluginManifest(projectRootPath, pluginName);
+      if (manifest.validations.length > 0) {
+        getLogger().warn(
+          `Failed to resolve plugin manifest for ${pluginName}:`,
+          manifest.validations
         );
-      } catch (error) {
-        getLogger().warn(`Failed to read page file ${pageFilePath}: ${error}`);
+        continue;
       }
-    } else if (hasPageConfig) {
-      try {
-        const configContent = await fs.promises.readFile(pageConfigPath, "utf-8");
-        const pageConfig = YAML.parse(configContent);
-        if (pageConfig.used_components && Array.isArray(pageConfig.used_components)) {
-          for (const comp of pageConfig.used_components) {
-            const key = comp.key || "";
-            let src = "";
-            let name = "";
-            if (comp.plugin && comp.contract) {
-              const plugin = plugins.find((p) => p.manifest.name === comp.plugin);
-              if (plugin && plugin.manifest.contracts) {
-                const contract = plugin.manifest.contracts.find(
-                  (c) => c.name === comp.contract
-                );
-                if (contract) {
-                  usedComponents.push({
-                    appName: comp.plugin,
-                    componentName: comp.contract,
-                    key
-                  });
-                  continue;
-                }
-              }
-              usedComponents.push({
-                appName: comp.plugin,
-                componentName: comp.contract,
-                key
-              });
-              continue;
-            }
-            src = comp.src || "";
-            name = comp.name || "";
-            let resolved = false;
-            for (const app of installedApps) {
-              if (app.module !== src && app.name !== src) {
+      if (!manifest.val) {
+        getLogger().warn(
+          `Failed to resolve plugin manifest for ${pluginName}:`,
+          manifest.validations
+        );
+        continue;
+      }
+      const contracts = manifest.val.contracts;
+      plugins.push({
+        name: pluginName,
+        contracts: contracts.map((contract) => {
+          const resolveResult = JAY_IMPORT_RESOLVER.resolvePluginComponent(
+            pluginName,
+            contract.name,
+            projectRootPath
+          );
+          if (resolveResult.validations.length > 0) {
+            getLogger().warn(
+              `Failed to resolve plugin component for ${pluginName}:${contract.name}:`,
+              resolveResult.validations
+            );
+            return null;
+          }
+          if (!resolveResult.val) {
+            getLogger().warn(
+              `Failed to resolve plugin component for ${pluginName}:${contract.name}:`,
+              resolveResult.validations
+            );
+            return null;
+          }
+          const expandedContract = loadAndExpandContract(resolveResult.val.contractPath);
+          if (!expandedContract) {
+            return null;
+          }
+          return expandedContract;
+        })
+      });
+    }
+  } catch (error) {
+    getLogger().error("Error scanning plugins:", error);
+  }
+  return plugins;
+}
+async function loadProjectPage(pageContext, plugins) {
+  const { dirPath, pageUrl, pageName, hasPageHtml, hasPageContract, hasPageConfig } = pageContext;
+  const pageFilePath = path.join(dirPath, PAGE_FILENAME);
+  const pageConfigPath = path.join(dirPath, PAGE_CONFIG_FILENAME);
+  const contractPath = path.join(dirPath, PAGE_CONTRACT_FILENAME);
+  const projectRootPath = process.cwd();
+  let usedComponents = [];
+  let contract;
+  if (hasPageContract) {
+    const parsedContract = loadAndExpandContract(contractPath);
+    if (parsedContract) {
+      contract = parsedContract;
+    }
+  }
+  if (hasPageHtml) {
+    try {
+      const jayHtmlContent = await fs.promises.readFile(pageFilePath, "utf-8");
+      usedComponents = await extractHeadlessComponentsFromJayHtml(
+        jayHtmlContent,
+        pageFilePath,
+        projectRootPath
+      );
+    } catch (error) {
+      getLogger().warn(`Failed to read page file ${pageFilePath}:`, error);
+    }
+  } else if (hasPageConfig) {
+    try {
+      const configContent = await fs.promises.readFile(pageConfigPath, "utf-8");
+      const pageConfig = YAML.parse(configContent);
+      if (pageConfig.used_components && Array.isArray(pageConfig.used_components)) {
+        for (const comp of pageConfig.used_components) {
+          const key = comp.key || "";
+          if (comp.plugin && comp.contract) {
+            const plugin = plugins.find((p) => p.name === comp.plugin);
+            if (plugin && plugin.contracts) {
+              const contract2 = plugin.contracts.find((c) => c.name === comp.contract);
+              if (contract2) {
+                usedComponents.push({
+                  appName: comp.plugin,
+                  componentName: comp.contract,
+                  key
+                });
                 continue;
               }
-              for (const appPage of app.pages) {
-                for (const headlessComp of appPage.headless_components) {
-                  if (headlessComp.name === name && headlessComp.key === key) {
-                    const appContracts = installedAppContracts[app.name];
-                    if (appContracts) {
-                      const matchingPageContract = appContracts.pages.find(
-                        (pc) => pc.pageName === appPage.name
-                      );
-                      if (matchingPageContract) {
-                        usedComponents.push({
-                          appName: app.name,
-                          componentName: appPage.name,
-                          key
-                        });
-                        resolved = true;
-                        break;
-                      }
-                    }
-                  }
-                }
-                if (resolved)
-                  break;
-              }
-              if (resolved)
-                break;
-              for (const appComponent of app.components) {
-                for (const headlessComp of appComponent.headless_components) {
-                  if (headlessComp.name === name && headlessComp.key === key) {
-                    const appContracts = installedAppContracts[app.name];
-                    if (appContracts) {
-                      const matchingComponentContract = appContracts.components.find(
-                        (cc) => cc.componentName === appComponent.name
-                      );
-                      if (matchingComponentContract) {
-                        usedComponents.push({
-                          appName: app.name,
-                          componentName: appComponent.name,
-                          key
-                        });
-                        resolved = true;
-                        break;
-                      }
-                    }
-                  }
-                }
-                if (resolved)
-                  break;
-              }
-              if (resolved)
-                break;
-            }
-            if (!resolved) {
-              usedComponents.push({
-                appName: src,
-                componentName: name,
-                key
-              });
             }
+            usedComponents.push({
+              appName: comp.plugin,
+              componentName: comp.contract,
+              key
+            });
+          } else {
+            getLogger().warn(
+              `Invalid component definition in ${pageConfigPath}: Only plugin/contract syntax is supported for headless components. Found:`,
+              comp
+            );
           }
         }
-      } catch (error) {
-        getLogger().warn(`Failed to parse page config ${pageConfigPath}: ${error}`);
       }
+    } catch (error) {
+      getLogger().warn(`Failed to parse page config ${pageConfigPath}:`, error);
     }
-    pages.push({
-      name: pageName,
-      url: pageUrl,
-      filePath: pageFilePath,
-      contractSchema,
-      usedComponents
-    });
+  }
+  return {
+    name: pageName,
+    url: pageUrl,
+    filePath: pageFilePath,
+    contract,
+    usedComponents
+  };
+}
+async function scanProjectInfo(pagesBasePath, componentsBasePath, configBasePath, projectRootPath) {
+  const [projectName, components, plugins] = await Promise.all([
+    getProjectName(configBasePath),
+    scanProjectComponents(componentsBasePath),
+    scanPlugins(projectRootPath)
+  ]);
+  const pages = [];
+  await scanPageDirectories(pagesBasePath, async (context) => {
+    const page = await loadProjectPage(context, plugins);
+    pages.push(page);
   });
   return {
     name: projectName,
     localPath: projectRootPath,
     pages,
     components,
-    installedApps,
-    installedAppContracts,
     plugins
   };
 }
 async function handlePagePublish(resolvedConfig, page) {
   try {
     const pagesBasePath = path.resolve(resolvedConfig.devServer.pagesBase);
-    const routePath = page.route === "/" ? "" : page.route;
-    const dirname = path.join(pagesBasePath, routePath);
+    const dirname = pageUrlToDirectoryPath(page.route, pagesBasePath);
     const fullPath = path.join(dirname, PAGE_FILENAME);
     await fs.promises.mkdir(dirname, { recursive: true });
     await fs.promises.writeFile(fullPath, page.jayHtml, "utf-8");
@@ -752,7 +2047,7 @@ async function handlePagePublish(resolvedConfig, page) {
       createdJayHtml
     ];
   } catch (error) {
-    getLogger().error(`Failed to publish page ${page.route}: ${error}`);
+    getLogger().error(`Failed to publish page ${page.route}:`, error);
     return [
       {
         success: false,
@@ -790,7 +2085,7 @@ async function handleComponentPublish(resolvedConfig, component) {
       createdJayHtml
     ];
   } catch (error) {
-    getLogger().error(`Failed to publish component ${component.name}: ${error}`);
+    getLogger().error(`Failed to publish component ${component.name}:`, error);
     return [
       {
         success: false,
@@ -800,6 +2095,22 @@ async function handleComponentPublish(resolvedConfig, component) {
     ];
   }
 }
+async function loadPageContracts(dirPath, pageUrl, projectRootPath) {
+  const { hasPageHtml, hasPageContract, hasPageConfig } = await isPageDirectory(dirPath);
+  const plugins = await scanPlugins(projectRootPath);
+  const pageInfo = await loadProjectPage(
+    {
+      dirPath,
+      pageUrl,
+      pageName: path.basename(dirPath),
+      hasPageHtml,
+      hasPageContract,
+      hasPageConfig
+    },
+    plugins
+  );
+  return { projectPage: pageInfo, plugins };
+}
 function createEditorHandlers(config, tsConfigPath, projectRoot) {
   const onPublish = async (params) => {
     const status = [];
@@ -834,7 +2145,7 @@ function createEditorHandlers(config, tsConfigPath, projectRoot) {
       );
       const definitionFile = generateElementDefinitionFile(parsedJayHtml);
       if (definitionFile.validations.length > 0)
-        getLogger().warn(
+        getLogger().info(
           `failed to generate .d.ts for ${fullPath} with validation errors: ${definitionFile.validations.join("\n")}`
         );
       else
@@ -860,7 +2171,7 @@ function createEditorHandlers(config, tsConfigPath, projectRoot) {
         imageUrl: `/images/${filename}`
       };
     } catch (error) {
-      getLogger().error(`Failed to save image: ${error}`);
+      getLogger().error("Failed to save image:", error);
       return {
         type: "saveImage",
         success: false,
@@ -884,7 +2195,7 @@ function createEditorHandlers(config, tsConfigPath, projectRoot) {
         imageUrl: exists ? `/images/${filename}` : void 0
       };
     } catch (error) {
-      getLogger().error(`Failed to check image: ${error}`);
+      getLogger().error("Failed to check image:", error);
       return {
         type: "hasImage",
         success: false,
@@ -898,25 +2209,23 @@ function createEditorHandlers(config, tsConfigPath, projectRoot) {
       const pagesBasePath = path.resolve(config.devServer.pagesBase);
       const componentsBasePath = path.resolve(config.devServer.componentsBase);
       const configBasePath = path.resolve(config.devServer.configBase);
-      const projectRootPath = process.cwd();
       const info = await scanProjectInfo(
         pagesBasePath,
         componentsBasePath,
         configBasePath,
-        projectRootPath
+        projectRoot
       );
       getLogger().info(`📋 Retrieved project info: ${info.name}`);
       getLogger().info(`   Pages: ${info.pages.length}`);
       getLogger().info(`   Components: ${info.components.length}`);
-      getLogger().info(`   Installed Apps: ${info.installedApps.length}`);
-      getLogger().info(`   App Contracts: ${Object.keys(info.installedAppContracts).length}`);
+      getLogger().info(`   plugins: ${info.plugins.length}`);
       return {
         type: "getProjectInfo",
         success: true,
         info
       };
     } catch (error) {
-      getLogger().error(`Failed to get project info: ${error}`);
+      getLogger().error("Failed to get project info:", error);
       return {
         type: "getProjectInfo",
         success: false,
@@ -926,18 +2235,118 @@ function createEditorHandlers(config, tsConfigPath, projectRoot) {
           localPath: process.cwd(),
           pages: [],
           components: [],
-          installedApps: [],
-          installedAppContracts: {},
           plugins: []
         }
       };
     }
   };
+  const onExport = async (params) => {
+    try {
+      const pagesBasePath = path.resolve(config.devServer.pagesBase);
+      const { vendorId, pageUrl, vendorDoc } = params;
+      const dirname = pageUrlToDirectoryPath(pageUrl, pagesBasePath);
+      const vendorFilename = `page.${vendorId}.json`;
+      const vendorFilePath = path.join(dirname, vendorFilename);
+      await fs.promises.mkdir(dirname, { recursive: true });
+      await fs.promises.writeFile(
+        vendorFilePath,
+        JSON.stringify(vendorDoc, null, 2),
+        "utf-8"
+      );
+      getLogger().info(`📦 Exported ${vendorId} document to: ${vendorFilePath}`);
+      if (hasVendor(vendorId)) {
+        getLogger().info(`🔄 Converting ${vendorId} document to Jay HTML...`);
+        const vendor = getVendor(vendorId);
+        try {
+          const { projectPage, plugins } = await loadPageContracts(
+            dirname,
+            pageUrl,
+            projectRoot
+          );
+          const conversionResult = await vendor.convertToBodyHtml(
+            vendorDoc,
+            pageUrl,
+            projectPage,
+            plugins
+          );
+          const fullJayHtml = await buildJayHtmlFromVendorResult(
+            conversionResult,
+            dirname,
+            path.basename(dirname)
+          );
+          const jayHtmlPath = path.join(dirname, "page.jay-html");
+          await fs.promises.writeFile(jayHtmlPath, fullJayHtml, "utf-8");
+          getLogger().info(`✅ Successfully converted to Jay HTML: ${jayHtmlPath}`);
+          return {
+            type: "export",
+            success: true,
+            vendorSourcePath: vendorFilePath,
+            jayHtmlPath
+          };
+        } catch (conversionError) {
+          getLogger().error(`❌ Vendor conversion threw an error:`, conversionError);
+          return {
+            type: "export",
+            success: false,
+            vendorSourcePath: vendorFilePath,
+            error: conversionError instanceof Error ? conversionError.message : "Unknown conversion error"
+          };
+        }
+      } else {
+        getLogger().info(`ℹ️  No vendor found for '${vendorId}'. Skipping conversion.`);
+      }
+      return {
+        type: "export",
+        success: true,
+        vendorSourcePath: vendorFilePath
+      };
+    } catch (error) {
+      getLogger().error("Failed to export vendor document:", error);
+      return {
+        type: "export",
+        success: false,
+        error: error instanceof Error ? error.message : "Unknown error"
+      };
+    }
+  };
+  const onImport = async (params) => {
+    try {
+      const pagesBasePath = path.resolve(config.devServer.pagesBase);
+      const { vendorId, pageUrl } = params;
+      const dirname = pageUrlToDirectoryPath(pageUrl, pagesBasePath);
+      const vendorFilename = `page.${vendorId}.json`;
+      const vendorFilePath = path.join(dirname, vendorFilename);
+      if (!fs.existsSync(vendorFilePath)) {
+        return {
+          type: "import",
+          success: false,
+          error: `No ${vendorId} document found at ${pageUrl}. File not found: ${vendorFilePath}`
+        };
+      }
+      const fileContent = await fs.promises.readFile(vendorFilePath, "utf-8");
+      const vendorDoc = JSON.parse(fileContent);
+      getLogger().info(`📥 Imported ${vendorId} document from: ${vendorFilePath}`);
+      return {
+        type: "import",
+        success: true,
+        vendorDoc
+      };
+    } catch (error) {
+      getLogger().error("Failed to import vendor document:", error);
+      return {
+        type: "import",
+        success: false,
+        error: error instanceof Error ? error.message : "Unknown error"
+      };
+    }
+  };
   return {
     onPublish,
     onSaveImage,
     onHasImage,
-    onGetProjectInfo
+    onGetProjectInfo,
+    onExport,
+    onImport
   };
 }
 async function generatePageDefinitionFiles(routes, tsConfigPath, projectRoot) {
@@ -993,7 +2402,7 @@ async function startDevServer(options = {}) {
   const resolvedConfig = getConfigWithDefaults(config);
   const jayOptions = {
     tsConfigFilePath: "./tsconfig.json",
-    outputDir: "build/jay-runtime"
+    outputDir: "build"
   };
   const app = express();
   const devServerPort = await getPort({ port: resolvedConfig.devServer.portRange });
@@ -1011,6 +2420,12 @@ async function startDevServer(options = {}) {
     }
   });
   const { port: editorPort, editorId } = await editorServer.start();
+  const registeredVendors = getRegisteredVendors();
+  if (registeredVendors.length > 0) {
+    log.info(
+      `📦 Registered ${registeredVendors.length} vendor(s): ${registeredVendors.join(", ")}`
+    );
+  }
   const handlers = createEditorHandlers(
     resolvedConfig,
     jayOptions.tsConfigFilePath,
@@ -1020,11 +2435,12 @@ async function startDevServer(options = {}) {
   editorServer.onSaveImage(handlers.onSaveImage);
   editorServer.onHasImage(handlers.onHasImage);
   editorServer.onGetProjectInfo(handlers.onGetProjectInfo);
+  editorServer.onExport(handlers.onExport);
+  editorServer.onImport(handlers.onImport);
   const { server, viteServer, routes } = await mkDevServer({
     pagesRootFolder: path.resolve(resolvedConfig.devServer.pagesBase),
     projectRootFolder: process.cwd(),
     publicBaseUrlPath: "/",
-    dontCacheSlowly: false,
     jayRollupConfig: jayOptions,
     logLevel: options.logLevel
   });
@@ -1517,13 +2933,206 @@ async function findJayFiles(dir) {
 async function findContractFiles(dir) {
   return await glob(`${dir}/**/*${JAY_CONTRACT_EXTENSION}`);
 }
+function flattenContractTags(tags, prefix) {
+  const result = [];
+  for (const tag of tags) {
+    const tagPath = prefix ? `${prefix}.${tag.tag}` : tag.tag;
+    result.push({ path: tagPath, required: tag.required === true });
+    if (tag.tags) {
+      result.push(...flattenContractTags(tag.tags, tagPath));
+    }
+  }
+  return result;
+}
+function extractExpressions(text) {
+  const results = [];
+  const regex = /\{([^}]+)\}/g;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    results.push(match[1].trim());
+  }
+  return results;
+}
+function extractTagPath(expr) {
+  let cleaned = expr.replace(/^!/, "").trim();
+  cleaned = cleaned.split(/\s*[!=]==?\s*/)[0].trim();
+  if (cleaned === "." || cleaned === "")
+    return null;
+  if (/^[a-zA-Z_$][a-zA-Z0-9_$]*(\.[a-zA-Z_$][a-zA-Z0-9_$]*)*$/.test(cleaned)) {
+    return cleaned;
+  }
+  return null;
+}
+const SKIP_ATTRS = /* @__PURE__ */ new Set([
+  "forEach",
+  "if",
+  "ref",
+  "trackBy",
+  "slowForEach",
+  "jayIndex",
+  "jayTrackBy",
+  "when-resolved",
+  "when-loading",
+  "when-rejected",
+  "accessor"
+]);
+function collectUsedTags(jayHtml) {
+  const imports = jayHtml.headlessImports;
+  const usedTags = /* @__PURE__ */ new Map();
+  const keyMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < imports.length; i++) {
+    if (imports[i].contract) {
+      usedTags.set(i, /* @__PURE__ */ new Set());
+      if (imports[i].key) {
+        keyMap.set(imports[i].key, i);
+      }
+    }
+  }
+  function markUsed(importIndex, tagPath) {
+    usedTags.get(importIndex)?.add(tagPath);
+  }
+  function resolvePath(path2, scopes) {
+    const dot = path2.indexOf(".");
+    if (dot !== -1) {
+      const key = path2.substring(0, dot);
+      const idx = keyMap.get(key);
+      if (idx !== void 0) {
+        markUsed(idx, path2.substring(dot + 1));
+        return;
+      }
+    }
+    if (scopes.length > 0) {
+      const scope = scopes[scopes.length - 1];
+      const full = scope.prefix ? `${scope.prefix}.${path2}` : path2;
+      markUsed(scope.importIndex, full);
+    }
+  }
+  function walkElement(element, scopes) {
+    const tagName = element.rawTagName?.toLowerCase();
+    let childScopes = scopes;
+    if (tagName?.startsWith("jay:")) {
+      const contractName = tagName.substring(4);
+      const idx = imports.findIndex(
+        (imp) => imp.contractName === contractName && imp.contract
+      );
+      if (idx !== -1) {
+        childScopes = [...scopes, { importIndex: idx, prefix: "" }];
+      }
+    }
+    const forEachVal = element.getAttribute?.("forEach");
+    if (forEachVal) {
+      const fePath = extractTagPath(forEachVal);
+      if (fePath) {
+        resolvePath(fePath, childScopes);
+        const dot = fePath.indexOf(".");
+        if (dot !== -1) {
+          const key = fePath.substring(0, dot);
+          const idx = keyMap.get(key);
+          if (idx !== void 0) {
+            childScopes = [
+              ...childScopes,
+              { importIndex: idx, prefix: fePath.substring(dot + 1) }
+            ];
+          }
+        } else if (childScopes.length > 0) {
+          const scope = childScopes[childScopes.length - 1];
+          const newPrefix = scope.prefix ? `${scope.prefix}.${fePath}` : fePath;
+          childScopes = [
+            ...childScopes,
+            { importIndex: scope.importIndex, prefix: newPrefix }
+          ];
+        }
+      }
+    }
+    if (tagName === "with-data") {
+      const accessor = element.getAttribute?.("accessor");
+      if (accessor && accessor !== "." && childScopes.length > 0) {
+        resolvePath(accessor, childScopes);
+        const scope = childScopes[childScopes.length - 1];
+        const newPrefix = scope.prefix ? `${scope.prefix}.${accessor}` : accessor;
+        childScopes = [
+          ...childScopes,
+          { importIndex: scope.importIndex, prefix: newPrefix }
+        ];
+      }
+    }
+    const ifVal = element.getAttribute?.("if");
+    if (ifVal) {
+      const ifPath = extractTagPath(ifVal);
+      if (ifPath)
+        resolvePath(ifPath, scopes);
+    }
+    const refVal = element.getAttribute?.("ref");
+    if (refVal) {
+      resolvePath(refVal, scopes);
+    }
+    const attrs = element.attributes ?? {};
+    for (const [name, value] of Object.entries(attrs)) {
+      if (SKIP_ATTRS.has(name))
+        continue;
+      for (const expr of extractExpressions(value)) {
+        const p = extractTagPath(expr);
+        if (p)
+          resolvePath(p, scopes);
+      }
+    }
+    for (const child of element.childNodes ?? []) {
+      if (child.nodeType === 3) {
+        const text = child.rawText ?? child.text ?? "";
+        for (const expr of extractExpressions(text)) {
+          const p = extractTagPath(expr);
+          if (p)
+            resolvePath(p, childScopes);
+        }
+      } else if (child.nodeType === 1) {
+        walkElement(child, childScopes);
+      }
+    }
+  }
+  walkElement(jayHtml.body, []);
+  return usedTags;
+}
+function analyzeTagCoverage(jayHtml, file) {
+  const imports = jayHtml.headlessImports;
+  const withContracts = imports.filter((imp) => imp.contract);
+  if (withContracts.length === 0)
+    return null;
+  const usedTagsMap = collectUsedTags(jayHtml);
+  const contracts = [];
+  for (let i = 0; i < imports.length; i++) {
+    const imp = imports[i];
+    if (!imp.contract)
+      continue;
+    const allTags = flattenContractTags(imp.contract.tags);
+    const usedSet = usedTagsMap.get(i) ?? /* @__PURE__ */ new Set();
+    const expanded = new Set(usedSet);
+    for (const usedPath of usedSet) {
+      const segments = usedPath.split(".");
+      for (let j = 1; j < segments.length; j++) {
+        expanded.add(segments.slice(0, j).join("."));
+      }
+    }
+    const unused = allTags.filter((t) => !expanded.has(t.path));
+    const requiredUnused = unused.filter((t) => t.required);
+    contracts.push({
+      key: imp.key,
+      contractName: imp.contractName,
+      totalTags: allTags.length,
+      usedTags: allTags.length - unused.length,
+      unusedTags: unused.map((t) => t.path),
+      requiredUnusedTags: requiredUnused.map((t) => t.path)
+    });
+  }
+  return { file, contracts };
+}
 async function validateJayFiles(options = {}) {
   const config = loadConfig();
   const resolvedConfig = getConfigWithDefaults(config);
-  const projectRoot = process.cwd();
+  const projectRoot = options.projectRoot ?? process.cwd();
   const scanDir = options.path ? path.resolve(options.path) : path.resolve(resolvedConfig.devServer.pagesBase);
   const errors = [];
   const warnings = [];
+  const coverage = [];
   const jayHtmlFiles = await findJayFiles(scanDir);
   const contractFiles = await findContractFiles(scanDir);
   if (options.verbose) {
@@ -1589,6 +3198,10 @@ async function validateJayFiles(options = {}) {
         }
         continue;
       }
+      const fileCoverage = analyzeTagCoverage(parsedFile.val, relativePath);
+      if (fileCoverage) {
+        coverage.push(fileCoverage);
+      }
       const generatedFile = generateElementFile(
         parsedFile.val,
         RuntimeMode.MainTrusted,
@@ -1624,7 +3237,8 @@ async function validateJayFiles(options = {}) {
     jayHtmlFilesScanned: jayHtmlFiles.length,
     contractFilesScanned: contractFiles.length,
     errors,
-    warnings
+    warnings,
+    coverage
   };
 }
 function printJayValidationResult(result, options) {
@@ -1653,6 +3267,29 @@ function printJayValidationResult(result, options) {
       chalk.red(`${result.errors.length} error(s) found, ${validFiles} file(s) valid.`)
     );
   }
+  if (result.coverage.length > 0) {
+    logger.important("");
+    logger.important("Tag Coverage:");
+    for (const fileCov of result.coverage) {
+      logger.important(`  ${fileCov.file}`);
+      for (const contract of fileCov.contracts) {
+        const label = contract.key ? `${contract.key} (${contract.contractName})` : contract.contractName;
+        logger.important(
+          `    ${label}: ${contract.usedTags}/${contract.totalTags} tags used`
+        );
+        if (contract.unusedTags.length > 0) {
+          logger.important(chalk.gray(`      Unused: ${contract.unusedTags.join(", ")}`));
+        }
+        if (contract.requiredUnusedTags.length > 0) {
+          logger.important(
+            chalk.yellow(
+              `      ⚠ Required unused: ${contract.requiredUnusedTags.join(", ")}`
+            )
+          );
+        }
+      }
+    }
+  }
 }
 async function initializeServicesForCli(projectRoot, viteServer) {
   const path2 = await import("node:path");
@@ -1664,6 +3301,7 @@ async function initializeServicesForCli(projectRoot, viteServer) {
     sortPluginsByDependencies,
     executePluginServerInits
   } = await import("@jay-framework/stack-server-runtime");
+  let initErrors = /* @__PURE__ */ new Map();
   try {
     const discoveredPlugins = await discoverPluginsWithInit({
       projectRoot,
@@ -1671,7 +3309,7 @@ async function initializeServicesForCli(projectRoot, viteServer) {
     });
     const pluginsWithInit = sortPluginsByDependencies(discoveredPlugins);
     try {
-      await executePluginServerInits(pluginsWithInit, viteServer, false);
+      initErrors = await executePluginServerInits(pluginsWithInit, viteServer, false);
     } catch (error) {
       getLogger().warn(chalk.yellow(`⚠️  Plugin initialization skipped: ${error.message}`));
     }
@@ -1691,7 +3329,7 @@ async function initializeServicesForCli(projectRoot, viteServer) {
     getLogger().warn(chalk.yellow(`⚠️  Service initialization failed: ${error.message}`));
     getLogger().warn(chalk.gray("   Static contracts will still be listed."));
   }
-  return getServiceRegistry();
+  return { services: getServiceRegistry(), initErrors };
 }
 async function runAction(actionRef, options, projectRoot, initializeServices) {
   let viteServer;
@@ -1859,9 +3497,7 @@ async function runSetup(pluginFilter, options, projectRoot, initializeServices)
     if (pluginsWithSetup.length === 0) {
       if (pluginFilter) {
         logger.important(
-          chalk.yellow(
-            `⚠️  Plugin "${pluginFilter}" not found or has no setup handler.`
-          )
+          chalk.yellow(`⚠️  Plugin "${pluginFilter}" not found or has no setup handler.`)
         );
       } else {
         logger.important(chalk.gray("No plugins with setup handlers found."));
@@ -1873,13 +3509,10 @@ async function runSetup(pluginFilter, options, projectRoot, initializeServices)
         `Found ${pluginsWithSetup.length} plugin(s) with setup: ${pluginsWithSetup.map((p) => p.name).join(", ")}`
       );
     }
-    let initError;
-    try {
-      await initializeServices(projectRoot, viteServer);
-    } catch (error) {
-      initError = error;
-      if (options.verbose) {
-        logger.info(chalk.yellow(`⚠️  Service init error: ${error.message}`));
+    const { initErrors } = await initializeServices(projectRoot, viteServer);
+    if (initErrors.size > 0 && options.verbose) {
+      for (const [name, err] of initErrors) {
+        logger.info(chalk.yellow(`⚠️  ${name} init error: ${err.message}`));
       }
     }
     let configured = 0;
@@ -1895,7 +3528,7 @@ async function runSetup(pluginFilter, options, projectRoot, initializeServices)
           projectRoot,
           configDir,
           force: options.force ?? false,
-          initError,
+          initError: initErrors.get(plugin.name),
           viteServer,
           verbose: options.verbose
         });
@@ -1916,7 +3549,9 @@ async function runSetup(pluginFilter, options, projectRoot, initializeServices)
             needsConfig++;
             if (result.configCreated?.length) {
               for (const cfg of result.configCreated) {
-                logger.important(chalk.yellow(`   ⚠️  Config template created: ${cfg}`));
+                logger.important(
+                  chalk.yellow(`   ⚠️  Config template created: ${cfg}`)
+                );
               }
             }
             if (result.message) {
@@ -1931,9 +3566,7 @@ async function runSetup(pluginFilter, options, projectRoot, initializeServices)
             break;
           case "error":
             errors++;
-            logger.important(
-              chalk.red(`   ❌ ${result.message || "Setup failed"}`)
-            );
+            logger.important(chalk.red(`   ❌ ${result.message || "Setup failed"}`));
             break;
         }
       } catch (error) {
@@ -2038,9 +3671,7 @@ async function ensureAgentKitDocs(projectRoot, force) {
   try {
     files = (await fs2.readdir(templateDir)).filter((f) => f.endsWith(".md"));
   } catch {
-    getLogger().warn(
-      chalk.yellow("   Agent-kit template folder not found: " + templateDir)
-    );
+    getLogger().warn(chalk.yellow("   Agent-kit template folder not found: " + templateDir));
     return;
   }
   for (const filename of files) {
@@ -2056,7 +3687,7 @@ async function ensureAgentKitDocs(projectRoot, force) {
     getLogger().info(chalk.gray(`   Created agent-kit/${filename}`));
   }
 }
-async function generatePluginReferences(projectRoot, options) {
+async function generatePluginReferences(projectRoot, options, initErrors, viteServer) {
   const { discoverPluginsWithReferences, executePluginReferences } = await import("@jay-framework/stack-server-runtime");
   const plugins = await discoverPluginsWithReferences({
     projectRoot,
@@ -2069,10 +3700,20 @@ async function generatePluginReferences(projectRoot, options) {
   logger.important("");
   logger.important(chalk.bold("📚 Generating plugin references..."));
   for (const plugin of plugins) {
+    const pluginInitError = initErrors.get(plugin.name);
+    if (pluginInitError) {
+      logger.warn(
+        chalk.yellow(
+          `   ⚠️  ${plugin.name}: references skipped — init failed: ${pluginInitError.message}`
+        )
+      );
+      continue;
+    }
     try {
       const result = await executePluginReferences(plugin, {
         projectRoot,
         force: options.force ?? false,
+        viteServer,
         verbose: options.verbose
       });
       if (result.referencesCreated.length > 0) {
@@ -2091,10 +3732,11 @@ async function generatePluginReferences(projectRoot, options) {
     }
   }
 }
-async function runMaterialize(projectRoot, options, defaultOutputRelative) {
+async function runMaterialize(projectRoot, options, defaultOutputRelative, keepViteAlive = false) {
   const path2 = await import("node:path");
   const outputDir = options.output ?? path2.join(projectRoot, defaultOutputRelative);
   let viteServer;
+  let initErrors = /* @__PURE__ */ new Map();
   try {
     if (options.list) {
       const index = await listContracts({
@@ -2107,13 +3749,17 @@ async function runMaterialize(projectRoot, options, defaultOutputRelative) {
       } else {
         printContractList(index);
       }
-      return;
+      return { initErrors };
     }
     if (options.verbose) {
       getLogger().info("Starting Vite for TypeScript support...");
     }
     viteServer = await createViteForCli({ projectRoot });
-    const services = await initializeServicesForCli(projectRoot, viteServer);
+    const { services, initErrors: errors } = await initializeServicesForCli(
+      projectRoot,
+      viteServer
+    );
+    initErrors = errors;
     const result = await materializeContracts(
       {
         projectRoot,
@@ -2127,16 +3773,19 @@ async function runMaterialize(projectRoot, options, defaultOutputRelative) {
       services
     );
     if (options.yaml) {
-      getLogger().important(YAML.stringify(result.index));
+      getLogger().important(YAML.stringify(result.pluginsIndex));
     } else {
-      getLogger().important(
-        chalk.green(`
-✅ Materialized ${result.index.contracts.length} contracts`)
+      const totalContracts = result.pluginsIndex.plugins.reduce(
+        (sum, p) => sum + p.contracts.length,
+        0
       );
+      getLogger().important(chalk.green(`
+✅ Materialized ${totalContracts} contracts`));
       getLogger().important(`   Static: ${result.staticCount}`);
       getLogger().important(`   Dynamic: ${result.dynamicCount}`);
       getLogger().important(`   Output: ${result.outputDir}`);
     }
+    return { initErrors, viteServer: keepViteAlive ? viteServer : void 0 };
   } catch (error) {
     getLogger().error(chalk.red("❌ Failed to materialize contracts:") + " " + error.message);
     if (options.verbose) {
@@ -2144,10 +3793,11 @@ async function runMaterialize(projectRoot, options, defaultOutputRelative) {
     }
     process.exit(1);
   } finally {
-    if (viteServer) {
+    if (viteServer && !keepViteAlive) {
       await viteServer.close();
     }
   }
+  return { initErrors };
 }
 program.command("setup [plugin]").description(
   "Run plugin setup: create config templates, validate credentials, generate reference data"
@@ -2158,11 +3808,23 @@ program.command("agent-kit").description(
   "Prepare the agent kit: materialize contracts, generate references, and write docs to agent-kit/"
 ).option("-o, --output <dir>", "Output directory (default: agent-kit/materialized-contracts)").option("--yaml", "Output contract index as YAML to stdout").option("--list", "List contracts without writing files").option("--plugin <name>", "Filter to specific plugin").option("--dynamic-only", "Only process dynamic contracts").option("--force", "Force re-materialization").option("--no-references", "Skip reference data generation").option("-v, --verbose", "Show detailed output").action(async (options) => {
   const projectRoot = process.cwd();
-  await runMaterialize(projectRoot, options, "agent-kit/materialized-contracts");
-  if (!options.list) {
-    await ensureAgentKitDocs(projectRoot, options.force);
-    if (options.references !== false) {
-      await generatePluginReferences(projectRoot, options);
+  const { initErrors, viteServer } = await runMaterialize(
+    projectRoot,
+    options,
+    "agent-kit/materialized-contracts",
+    /* keepViteAlive */
+    true
+  );
+  try {
+    if (!options.list) {
+      await ensureAgentKitDocs(projectRoot, options.force);
+      if (options.references !== false) {
+        await generatePluginReferences(projectRoot, options, initErrors, viteServer);
+      }
+    }
+  } finally {
+    if (viteServer) {
+      await viteServer.close();
     }
   }
 });
@@ -2230,27 +3892,24 @@ function printValidationResult(result, verbose) {
 function printContractList(index) {
   const logger = getLogger();
   logger.important("\nAvailable Contracts:\n");
-  const byPlugin = /* @__PURE__ */ new Map();
-  for (const contract of index.contracts) {
-    const existing = byPlugin.get(contract.plugin) || [];
-    existing.push(contract);
-    byPlugin.set(contract.plugin, existing);
-  }
-  for (const [plugin, contracts] of byPlugin) {
-    logger.important(chalk.bold(`📦 ${plugin}`));
-    for (const contract of contracts) {
+  for (const plugin of index.plugins) {
+    logger.important(chalk.bold(`📦 ${plugin.name}`));
+    for (const contract of plugin.contracts) {
       const typeIcon = contract.type === "static" ? "📄" : "⚡";
       logger.important(`   ${typeIcon} ${contract.name}`);
     }
     logger.important("");
   }
-  if (index.contracts.length === 0) {
+  if (index.plugins.length === 0) {
     logger.important(chalk.gray("No contracts found."));
   }
 }
 export {
   createEditorHandlers,
   getConfigWithDefaults,
+  getRegisteredVendors,
+  getVendor,
+  hasVendor,
   listContracts2 as listContracts,
   loadConfig,
   materializeContracts2 as materializeContracts,