@jay-framework/jay-stack-cli 0.11.0 → 0.13.0

package/dist/index.js

@@ -1,15 +1,16 @@
 #!/usr/bin/env node
 import express from "express";
-import { mkDevServer } from "@jay-framework/dev-server";
+import { mkDevServer, createViteForCli } from "@jay-framework/dev-server";
 import { createEditorServer } from "@jay-framework/editor-server";
 import getPort from "get-port";
 import path from "path";
 import fs, { promises } from "fs";
 import YAML from "yaml";
-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 { getLogger, createDevLogger, setDevLogger } from "@jay-framework/logger";
+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";
 import chalk from "chalk";
 import { glob } from "glob";
@@ -44,7 +45,7 @@ function loadConfig() {
       }
     };
   } catch (error) {
-    console.warn("Failed to parse .jay YAML config file, using defaults:", error);
+    getLogger().warn(`Failed to parse .jay YAML config file, using defaults: ${error}`);
     return DEFAULT_CONFIG;
   }
 }
@@ -82,12 +83,1473 @@ function updateConfig(updates) {
     const yamlContent = YAML.stringify(updatedConfig, { indent: 2 });
     fs.writeFileSync(configPath, yamlContent);
   } catch (error) {
-    console.warn("Failed to update .jay config file:", error);
+    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;
@@ -100,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);
@@ -134,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);
@@ -148,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()) {
@@ -158,246 +1619,124 @@ async function scanPageDirectories(pagesBasePath, onPageFound) {
         }
       }
     } catch (error) {
-      console.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) {
-      console.warn(
-        `Contract validation errors in ${contractFilePath}:`,
-        parsedContract.validations
-      );
-    }
-    if (parsedContract.val) {
-      const resolvedTags = await resolveLinkedTags(
-        parsedContract.val.tags,
-        path.dirname(contractFilePath)
-      );
-      return {
-        name: parsedContract.val.name,
-        tags: resolvedTags
-      };
-    }
-  } catch (error) {
-    console.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 {
-          console.warn(`Failed to load linked contract: ${tag.link} from ${baseDir}`);
-          resolvedTags.push(convertContractTagToProtocol(tag));
+          getLogger().warn(`Failed to load linked contract: ${tag.link} from ${baseDir}`);
+          resolvedTags.push(tag);
         }
       } catch (error) {
-        console.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) {
+function loadAndExpandContract(contractFilePath) {
   try {
-    const require2 = createRequire(path.join(projectRootPath, "package.json"));
-    const modulePath = `${appModule}/${contractFileName}`;
-    const resolvedPath = require2.resolve(modulePath);
-    return resolvedPath;
+    const loadResult = JAY_IMPORT_RESOLVER.loadContract(contractFilePath);
+    if (loadResult.validations.length > 0) {
+      getLogger().warn(
+        `Contract validation errors in ${contractFilePath}:`,
+        loadResult.validations
+      );
+    }
+    if (loadResult.val) {
+      const resolvedTags = expandContractTags(
+        loadResult.val.tags,
+        path.dirname(contractFilePath)
+      );
+      return convertContractToProtocol({
+        name: loadResult.val.name,
+        tags: resolvedTags
+      });
+    }
   } catch (error) {
-    console.warn(
-      `Failed to resolve contract: ${appModule}/${contractFileName}`,
-      error instanceof Error ? error.message : error
-    );
-    return null;
+    getLogger().warn(`Failed to parse contract file ${contractFilePath}:`, error);
   }
+  return null;
 }
-async function scanInstalledAppContracts(configBasePath, projectRootPath) {
-  const installedAppContracts = {};
-  const installedAppsPath = path.join(configBasePath, "installedApps");
+async function extractHeadlessComponentsFromJayHtml(jayHtmlContent, pageFilePath, projectRootPath) {
   try {
-    if (!fs.existsSync(installedAppsPath)) {
-      return installedAppContracts;
+    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
+      );
     }
-    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) {
-          console.warn(`Failed to parse app config ${appConfigPath}:`, error);
-        }
-      }
+    if (!parsedJayHtml.val) {
+      getLogger().warn(`Failed to parse jay-html file: ${pageFilePath}`);
+      return [];
     }
-  } catch (error) {
-    console.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;
-              }
-            }
-          }
+    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];
         }
-        if (resolved)
-          break;
+        const componentName = headlessImport.contract?.name || "unknown";
+        resolvedComponents.push({
+          appName: pluginName,
+          componentName,
+          key: headlessImport.key
+        });
       }
-      if (resolved)
-        break;
-    }
-    if (!resolved) {
-      resolvedComponents.push({
-        appName: src,
-        componentName: name,
-        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 = [];
@@ -420,43 +1759,10 @@ async function scanProjectComponents(componentsBasePath) {
       }
     }
   } catch (error) {
-    console.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) {
-          console.warn(`Failed to parse app config ${appConfigPath}:`, error);
-        }
-      }
-    }
-  } catch (error) {
-    console.warn(`Failed to scan installed apps directory ${installedAppsPath}:`, error);
-  }
-  return installedApps;
-}
 async function getProjectName(configBasePath) {
   const projectConfigPath = path.join(configBasePath, "project.conf.yaml");
   try {
@@ -466,265 +1772,256 @@ async function getProjectName(configBasePath) {
       return projectConfig.name || "Unnamed Project";
     }
   } catch (error) {
-    console.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) {
-            console.warn(`Failed to parse plugin.yaml for ${dir.name}:`, error);
-          }
+          plugins.push(entry.name);
         }
       }
-    } catch (error) {
-      console.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) {
-              console.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) {
-      console.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) {
-        console.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) {
-        console.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) {
-        console.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");
@@ -732,7 +2029,7 @@ async function handlePagePublish(resolvedConfig, page) {
     if (page.contract) {
       contractPath = path.join(dirname, `page${JAY_CONTRACT_EXTENSION}`);
       await fs.promises.writeFile(contractPath, page.contract, "utf-8");
-      console.log(`📄 Published page contract: ${contractPath}`);
+      getLogger().info(`📄 Published page contract: ${contractPath}`);
     }
     const createdJayHtml = {
       jayHtml: page.jayHtml,
@@ -740,7 +2037,7 @@ async function handlePagePublish(resolvedConfig, page) {
       dirname,
       fullPath
     };
-    console.log(`📝 Published page: ${fullPath}`);
+    getLogger().info(`📝 Published page: ${fullPath}`);
     return [
       {
         success: true,
@@ -750,7 +2047,7 @@ async function handlePagePublish(resolvedConfig, page) {
       createdJayHtml
     ];
   } catch (error) {
-    console.error(`Failed to publish page ${page.route}:`, error);
+    getLogger().error(`Failed to publish page ${page.route}:`, error);
     return [
       {
         success: false,
@@ -778,7 +2075,7 @@ async function handleComponentPublish(resolvedConfig, component) {
       dirname,
       fullPath
     };
-    console.log(`🧩 Published component: ${fullPath}`);
+    getLogger().info(`🧩 Published component: ${fullPath}`);
     return [
       {
         success: true,
@@ -788,7 +2085,7 @@ async function handleComponentPublish(resolvedConfig, component) {
       createdJayHtml
     ];
   } catch (error) {
-    console.error(`Failed to publish component ${component.name}:`, error);
+    getLogger().error(`Failed to publish component ${component.name}:`, error);
     return [
       {
         success: false,
@@ -798,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 = [];
@@ -832,7 +2145,7 @@ function createEditorHandlers(config, tsConfigPath, projectRoot) {
       );
       const definitionFile = generateElementDefinitionFile(parsedJayHtml);
       if (definitionFile.validations.length > 0)
-        console.log(
+        getLogger().info(
           `failed to generate .d.ts for ${fullPath} with validation errors: ${definitionFile.validations.join("\n")}`
         );
       else
@@ -851,14 +2164,14 @@ function createEditorHandlers(config, tsConfigPath, projectRoot) {
       const filename = `${params.imageId}.png`;
       const imagePath = path.join(imagesDir, filename);
       await fs.promises.writeFile(imagePath, Buffer.from(params.imageData, "base64"));
-      console.log(`🖼️  Saved image: ${imagePath}`);
+      getLogger().info(`🖼️  Saved image: ${imagePath}`);
       return {
         type: "saveImage",
         success: true,
         imageUrl: `/images/${filename}`
       };
     } catch (error) {
-      console.error("Failed to save image:", error);
+      getLogger().error("Failed to save image:", error);
       return {
         type: "saveImage",
         success: false,
@@ -882,7 +2195,7 @@ function createEditorHandlers(config, tsConfigPath, projectRoot) {
         imageUrl: exists ? `/images/${filename}` : void 0
       };
     } catch (error) {
-      console.error("Failed to check image:", error);
+      getLogger().error("Failed to check image:", error);
       return {
         type: "hasImage",
         success: false,
@@ -896,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
       );
-      console.log(`📋 Retrieved project info: ${info.name}`);
-      console.log(`   Pages: ${info.pages.length}`);
-      console.log(`   Components: ${info.components.length}`);
-      console.log(`   Installed Apps: ${info.installedApps.length}`);
-      console.log(`   App Contracts: ${Object.keys(info.installedAppContracts).length}`);
+      getLogger().info(`📋 Retrieved project info: ${info.name}`);
+      getLogger().info(`   Pages: ${info.pages.length}`);
+      getLogger().info(`   Components: ${info.components.length}`);
+      getLogger().info(`   plugins: ${info.plugins.length}`);
       return {
         type: "getProjectInfo",
         success: true,
         info
       };
     } catch (error) {
-      console.error("Failed to get project info:", error);
+      getLogger().error("Failed to get project info:", error);
       return {
         type: "getProjectInfo",
         success: false,
@@ -924,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) {
@@ -969,16 +2380,16 @@ async function generatePageDefinitionFiles(routes, tsConfigPath, projectRoot) {
       );
       const definitionFile = generateElementDefinitionFile(parsedJayHtml);
       if (definitionFile.validations.length > 0) {
-        console.log(
+        getLogger().warn(
           `failed to generate .d.ts for ${jayHtmlPath} with validation errors: ${definitionFile.validations.join("\n")}`
         );
       } else {
         const definitionFilePath2 = jayHtmlPath + ".d.ts";
         await fs.promises.writeFile(definitionFilePath2, definitionFile.val, "utf-8");
-        console.log(`📦 Generated definition file: ${definitionFilePath2}`);
+        getLogger().info(`📦 Generated definition file: ${definitionFilePath2}`);
       }
     } catch (error) {
-      console.error(`Failed to generate definition file for ${jayHtmlPath}:`, error);
+      getLogger().error(`Failed to generate definition file for ${jayHtmlPath}: ${error}`);
     }
   }
 }
@@ -995,11 +2406,12 @@ async function startDevServer(options = {}) {
   };
   const app = express();
   const devServerPort = await getPort({ port: resolvedConfig.devServer.portRange });
+  const log = getLogger();
   const editorServer = createEditorServer({
     portRange: resolvedConfig.editorServer.portRange,
     editorId: resolvedConfig.editorServer.editorId,
     onEditorId: (editorId2) => {
-      console.log(`Editor connected with ID: ${editorId2}`);
+      log.info(`Editor connected with ID: ${editorId2}`);
       updateConfig({
         editorServer: {
           editorId: editorId2
@@ -1008,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,
@@ -1017,40 +2435,76 @@ 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
+    jayRollupConfig: jayOptions,
+    logLevel: options.logLevel
   });
   app.use(server);
   const publicPath = path.resolve(resolvedConfig.devServer.publicFolder);
   if (fs.existsSync(publicPath)) {
     app.use(express.static(publicPath));
   } else {
-    console.log(`⚠️  Public folder not found: ${resolvedConfig.devServer.publicFolder}`);
+    log.important(`⚠️  Public folder not found: ${resolvedConfig.devServer.publicFolder}`);
   }
   routes.forEach((route) => {
     app.get(route.path, route.handler);
   });
   generatePageDefinitionFiles(routes, jayOptions.tsConfigFilePath, process.cwd());
   const expressServer = app.listen(devServerPort, () => {
-    console.log(`🚀 Jay Stack dev server started successfully!`);
-    console.log(`📱 Dev Server: http://localhost:${devServerPort}`);
-    console.log(`🎨 Editor Server: http://localhost:${editorPort} (ID: ${editorId})`);
-    console.log(`📁 Pages directory: ${resolvedConfig.devServer.pagesBase}`);
+    log.important(`🚀 Jay Stack dev server started successfully!`);
+    log.important(`📱 Dev Server: http://localhost:${devServerPort}`);
+    log.important(`🎨 Editor Server: http://localhost:${editorPort} (ID: ${editorId})`);
+    log.important(`📁 Pages directory: ${resolvedConfig.devServer.pagesBase}`);
     if (fs.existsSync(publicPath)) {
-      console.log(`📁 Public folder: ${resolvedConfig.devServer.publicFolder}`);
+      log.important(`📁 Public folder: ${resolvedConfig.devServer.publicFolder}`);
+    }
+    if (options.testMode) {
+      log.important(`🧪 Test Mode: enabled`);
+      log.important(`   Health: http://localhost:${devServerPort}/_jay/health`);
+      log.important(
+        `   Shutdown: curl -X POST http://localhost:${devServerPort}/_jay/shutdown`
+      );
+      if (options.timeout) {
+        log.important(`   Timeout: ${options.timeout}s`);
+      }
     }
   });
   const shutdown = async () => {
-    console.log("\n🛑 Shutting down servers...");
+    log.important("\n🛑 Shutting down servers...");
     await editorServer.stop();
     expressServer.closeAllConnections();
     await new Promise((resolve) => expressServer.close(resolve));
     process.exit(0);
   };
+  if (options.testMode) {
+    app.get("/_jay/health", (_req, res) => {
+      res.json({
+        status: "ready",
+        port: devServerPort,
+        editorPort,
+        uptime: process.uptime()
+      });
+    });
+    app.post("/_jay/shutdown", async (_req, res) => {
+      res.json({ status: "shutting_down" });
+      setTimeout(async () => {
+        await shutdown();
+      }, 100);
+    });
+    if (options.timeout) {
+      setTimeout(async () => {
+        log.important(`
+⏰ Timeout (${options.timeout}s) reached, shutting down...`);
+        await shutdown();
+      }, options.timeout * 1e3);
+    }
+  }
   process.on("SIGTERM", shutdown);
   process.on("SIGINT", shutdown);
 }
@@ -1208,29 +2662,33 @@ async function validateSchema(context, result) {
     }
   }
   if (manifest.dynamic_contracts) {
-    if (!manifest.dynamic_contracts.component) {
-      result.errors.push({
-        type: "schema",
-        message: 'dynamic_contracts is missing "component" field',
-        location: "plugin.yaml",
-        suggestion: "Specify path to shared component for dynamic contracts"
-      });
-    }
-    if (!manifest.dynamic_contracts.generator) {
-      result.errors.push({
-        type: "schema",
-        message: 'dynamic_contracts is missing "generator" field',
-        location: "plugin.yaml",
-        suggestion: "Specify path to generator file"
-      });
-    }
-    if (!manifest.dynamic_contracts.prefix) {
-      result.errors.push({
-        type: "schema",
-        message: 'dynamic_contracts is missing "prefix" field',
-        location: "plugin.yaml",
-        suggestion: 'Specify prefix for dynamic contract names (e.g., "cms")'
-      });
+    const dynamicConfigs = Array.isArray(manifest.dynamic_contracts) ? manifest.dynamic_contracts : [manifest.dynamic_contracts];
+    for (const config of dynamicConfigs) {
+      const prefix = config.prefix || "(unknown)";
+      if (!config.component) {
+        result.errors.push({
+          type: "schema",
+          message: `dynamic_contracts[${prefix}] is missing "component" field`,
+          location: "plugin.yaml",
+          suggestion: "Specify path to shared component for dynamic contracts"
+        });
+      }
+      if (!config.generator) {
+        result.errors.push({
+          type: "schema",
+          message: `dynamic_contracts[${prefix}] is missing "generator" field`,
+          location: "plugin.yaml",
+          suggestion: "Specify path to generator file or export name"
+        });
+      }
+      if (!config.prefix) {
+        result.errors.push({
+          type: "schema",
+          message: 'dynamic_contracts entry is missing "prefix" field',
+          location: "plugin.yaml",
+          suggestion: 'Specify prefix for dynamic contract names (e.g., "cms")'
+        });
+      }
     }
   }
   if (!manifest.contracts && !manifest.dynamic_contracts) {
@@ -1421,43 +2879,53 @@ async function validateDynamicContracts(context, result) {
   const { dynamic_contracts } = context.manifest;
   if (!dynamic_contracts)
     return;
-  if (dynamic_contracts.generator) {
-    const generatorPath = path.join(context.pluginPath, dynamic_contracts.generator);
-    const possibleExtensions = [".ts", ".js", "/index.ts", "/index.js"];
-    let found = false;
-    for (const ext of possibleExtensions) {
-      if (fs.existsSync(generatorPath + ext)) {
-        found = true;
-        break;
+  const dynamicConfigs = Array.isArray(dynamic_contracts) ? dynamic_contracts : [dynamic_contracts];
+  for (const config of dynamicConfigs) {
+    const prefix = config.prefix || "(unknown)";
+    if (config.generator) {
+      const isFilePath = config.generator.startsWith("./") || config.generator.startsWith("/") || config.generator.includes(".ts") || config.generator.includes(".js");
+      if (isFilePath) {
+        const generatorPath = path.join(context.pluginPath, config.generator);
+        const possibleExtensions = ["", ".ts", ".js", "/index.ts", "/index.js"];
+        let found = false;
+        for (const ext of possibleExtensions) {
+          if (fs.existsSync(generatorPath + ext)) {
+            found = true;
+            break;
+          }
+        }
+        if (!found && !context.isNpmPackage) {
+          result.errors.push({
+            type: "file-missing",
+            message: `Generator file not found for ${prefix}: ${config.generator}`,
+            location: "plugin.yaml dynamic_contracts",
+            suggestion: `Create generator file at ${generatorPath}.ts`
+          });
+        }
       }
     }
-    if (!found && !context.isNpmPackage) {
-      result.errors.push({
-        type: "file-missing",
-        message: `Generator file not found: ${dynamic_contracts.generator}`,
-        location: "plugin.yaml dynamic_contracts",
-        suggestion: `Create generator file at ${generatorPath}.ts`
-      });
-    }
-  }
-  if (dynamic_contracts.component) {
-    const componentPath = path.join(context.pluginPath, dynamic_contracts.component);
-    const possibleExtensions = [".ts", ".js", "/index.ts", "/index.js"];
-    let found = false;
-    for (const ext of possibleExtensions) {
-      if (fs.existsSync(componentPath + ext)) {
-        found = true;
-        break;
+    if (config.component) {
+      const isFilePath = config.component.startsWith("./") || config.component.startsWith("/") || config.component.includes(".ts") || config.component.includes(".js");
+      if (isFilePath) {
+        const componentPath = path.join(context.pluginPath, config.component);
+        const possibleExtensions = ["", ".ts", ".js", "/index.ts", "/index.js"];
+        let found = false;
+        for (const ext of possibleExtensions) {
+          if (fs.existsSync(componentPath + ext)) {
+            found = true;
+            break;
+          }
+        }
+        if (!found && !context.isNpmPackage) {
+          result.errors.push({
+            type: "file-missing",
+            message: `Dynamic contracts component not found for ${prefix}: ${config.component}`,
+            location: "plugin.yaml dynamic_contracts",
+            suggestion: `Create component file at ${componentPath}.ts`
+          });
+        }
       }
     }
-    if (!found && !context.isNpmPackage) {
-      result.errors.push({
-        type: "file-missing",
-        message: `Dynamic contracts component not found: ${dynamic_contracts.component}`,
-        location: "plugin.yaml dynamic_contracts",
-        suggestion: `Create component file at ${componentPath}.ts`
-      });
-    }
   }
 }
 async function findJayFiles(dir) {
@@ -1476,9 +2944,9 @@ async function validateJayFiles(options = {}) {
   const jayHtmlFiles = await findJayFiles(scanDir);
   const contractFiles = await findContractFiles(scanDir);
   if (options.verbose) {
-    console.log(chalk.gray(`Scanning directory: ${scanDir}`));
-    console.log(chalk.gray(`Found ${jayHtmlFiles.length} .jay-html files`));
-    console.log(chalk.gray(`Found ${contractFiles.length} .jay-contract files
+    getLogger().info(chalk.gray(`Scanning directory: ${scanDir}`));
+    getLogger().info(chalk.gray(`Found ${jayHtmlFiles.length} .jay-html files`));
+    getLogger().info(chalk.gray(`Found ${contractFiles.length} .jay-contract files
 `));
   }
   for (const contractFile of contractFiles) {
@@ -1495,10 +2963,10 @@ async function validateJayFiles(options = {}) {
           });
         }
         if (options.verbose) {
-          console.log(chalk.red(`❌ ${relativePath}`));
+          getLogger().info(chalk.red(`❌ ${relativePath}`));
         }
       } else if (options.verbose) {
-        console.log(chalk.green(`✓ ${relativePath}`));
+        getLogger().info(chalk.green(`✓ ${relativePath}`));
       }
     } catch (error) {
       errors.push({
@@ -1507,7 +2975,7 @@ async function validateJayFiles(options = {}) {
         stage: "parse"
       });
       if (options.verbose) {
-        console.log(chalk.red(`❌ ${relativePath}`));
+        getLogger().info(chalk.red(`❌ ${relativePath}`));
       }
     }
   }
@@ -1534,7 +3002,7 @@ async function validateJayFiles(options = {}) {
           });
         }
         if (options.verbose) {
-          console.log(chalk.red(`❌ ${relativePath}`));
+          getLogger().info(chalk.red(`❌ ${relativePath}`));
         }
         continue;
       }
@@ -1552,10 +3020,10 @@ async function validateJayFiles(options = {}) {
           });
         }
         if (options.verbose) {
-          console.log(chalk.red(`❌ ${relativePath}`));
+          getLogger().info(chalk.red(`❌ ${relativePath}`));
         }
       } else if (options.verbose) {
-        console.log(chalk.green(`✓ ${relativePath}`));
+        getLogger().info(chalk.green(`✓ ${relativePath}`));
       }
     } catch (error) {
       errors.push({
@@ -1564,7 +3032,7 @@ async function validateJayFiles(options = {}) {
         stage: "parse"
       });
       if (options.verbose) {
-        console.log(chalk.red(`❌ ${relativePath}`));
+        getLogger().info(chalk.red(`❌ ${relativePath}`));
       }
     }
   }
@@ -1577,40 +3045,357 @@ async function validateJayFiles(options = {}) {
   };
 }
 function printJayValidationResult(result, options) {
+  const logger = getLogger();
   if (options.json) {
-    console.log(JSON.stringify(result, null, 2));
+    logger.important(JSON.stringify(result, null, 2));
     return;
   }
-  console.log("");
+  logger.important("");
   if (result.valid) {
-    console.log(chalk.green("✅ Jay Stack validation successful!\n"));
-    console.log(
+    logger.important(chalk.green("✅ Jay Stack validation successful!\n"));
+    logger.important(
       `Scanned ${result.jayHtmlFilesScanned} .jay-html files, ${result.contractFilesScanned} .jay-contract files`
     );
-    console.log("No errors found.");
+    logger.important("No errors found.");
   } else {
-    console.log(chalk.red("❌ Jay Stack validation failed\n"));
-    console.log("Errors:");
+    logger.important(chalk.red("❌ Jay Stack validation failed\n"));
+    logger.important("Errors:");
     for (const error of result.errors) {
-      console.log(chalk.red(`  ❌ ${error.file}`));
-      console.log(chalk.gray(`     ${error.message}`));
-      console.log("");
+      logger.important(chalk.red(`  ❌ ${error.file}`));
+      logger.important(chalk.gray(`     ${error.message}`));
+      logger.important("");
     }
     const validFiles = result.jayHtmlFilesScanned + result.contractFilesScanned - result.errors.length;
-    console.log(
+    logger.important(
       chalk.red(`${result.errors.length} error(s) found, ${validFiles} file(s) valid.`)
     );
   }
 }
+async function initializeServicesForCli(projectRoot, viteServer) {
+  const path2 = await import("node:path");
+  const fs2 = await import("node:fs");
+  const {
+    runInitCallbacks,
+    getServiceRegistry,
+    discoverPluginsWithInit,
+    sortPluginsByDependencies,
+    executePluginServerInits
+  } = await import("@jay-framework/stack-server-runtime");
+  let initErrors = /* @__PURE__ */ new Map();
+  try {
+    const discoveredPlugins = await discoverPluginsWithInit({
+      projectRoot,
+      verbose: false
+    });
+    const pluginsWithInit = sortPluginsByDependencies(discoveredPlugins);
+    try {
+      initErrors = await executePluginServerInits(pluginsWithInit, viteServer, false);
+    } catch (error) {
+      getLogger().warn(chalk.yellow(`⚠️  Plugin initialization skipped: ${error.message}`));
+    }
+    const initPathTs = path2.join(projectRoot, "src", "init.ts");
+    const initPathJs = path2.join(projectRoot, "src", "init.js");
+    let initModule;
+    if (fs2.existsSync(initPathTs) && viteServer) {
+      initModule = await viteServer.ssrLoadModule(initPathTs);
+    } else if (fs2.existsSync(initPathJs)) {
+      initModule = await import(initPathJs);
+    }
+    if (initModule?.init?._serverInit) {
+      await initModule.init._serverInit();
+    }
+    await runInitCallbacks();
+  } catch (error) {
+    getLogger().warn(chalk.yellow(`⚠️  Service initialization failed: ${error.message}`));
+    getLogger().warn(chalk.gray("   Static contracts will still be listed."));
+  }
+  return { services: getServiceRegistry(), initErrors };
+}
+async function runAction(actionRef, options, projectRoot, initializeServices) {
+  let viteServer;
+  try {
+    const slashIndex = actionRef.indexOf("/");
+    if (slashIndex === -1) {
+      getLogger().error(
+        chalk.red("❌ Invalid action reference. Use format: <plugin>/<action>")
+      );
+      process.exit(1);
+    }
+    const actionExport = actionRef.substring(slashIndex + 1);
+    const input = options.input ? JSON.parse(options.input) : {};
+    if (options.verbose) {
+      getLogger().info("Starting Vite for TypeScript support...");
+    }
+    viteServer = await createViteForCli({ projectRoot });
+    await initializeServices(projectRoot, viteServer);
+    const { discoverAndRegisterActions, discoverAllPluginActions, ActionRegistry } = await import("@jay-framework/stack-server-runtime");
+    const registry = new ActionRegistry();
+    await discoverAndRegisterActions({
+      projectRoot,
+      registry,
+      verbose: options.verbose,
+      viteServer
+    });
+    await discoverAllPluginActions({
+      projectRoot,
+      registry,
+      verbose: options.verbose,
+      viteServer
+    });
+    const allNames = registry.getNames();
+    const matchedName = allNames.find((name) => name === actionExport) || allNames.find((name) => name.endsWith("." + actionExport)) || allNames.find((name) => name === actionRef);
+    if (!matchedName) {
+      getLogger().error(chalk.red(`❌ Action "${actionExport}" not found.`));
+      if (allNames.length > 0) {
+        getLogger().error(`   Available actions: ${allNames.join(", ")}`);
+      } else {
+        getLogger().error("   No actions registered. Does the plugin have actions?");
+      }
+      process.exit(1);
+    }
+    if (options.verbose) {
+      getLogger().info(`Executing action: ${matchedName}`);
+      getLogger().info(`Input: ${JSON.stringify(input)}`);
+    }
+    const result = await registry.execute(matchedName, input);
+    if (result.success) {
+      if (options.yaml) {
+        getLogger().important(YAML.stringify(result.data));
+      } else {
+        getLogger().important(JSON.stringify(result.data, null, 2));
+      }
+    } else {
+      getLogger().error(
+        chalk.red(`❌ Action failed: [${result.error.code}] ${result.error.message}`)
+      );
+      process.exit(1);
+    }
+  } catch (error) {
+    getLogger().error(chalk.red("❌ Failed to run action:") + " " + error.message);
+    if (options.verbose) {
+      getLogger().error(error.stack);
+    }
+    process.exit(1);
+  } finally {
+    if (viteServer) {
+      await viteServer.close();
+    }
+  }
+}
+async function runParams(contractRef, options, projectRoot, initializeServices) {
+  let viteServer;
+  try {
+    const slashIndex = contractRef.indexOf("/");
+    if (slashIndex === -1) {
+      getLogger().error(
+        chalk.red("❌ Invalid contract reference. Use format: <plugin>/<contract>")
+      );
+      process.exit(1);
+    }
+    const pluginName = contractRef.substring(0, slashIndex);
+    const contractName = contractRef.substring(slashIndex + 1);
+    if (options.verbose) {
+      getLogger().info("Starting Vite for TypeScript support...");
+    }
+    viteServer = await createViteForCli({ projectRoot });
+    await initializeServices(projectRoot, viteServer);
+    const { resolvePluginComponent } = await import("@jay-framework/compiler-shared");
+    const resolution = resolvePluginComponent(projectRoot, pluginName, contractName);
+    if (resolution.validations.length > 0 || !resolution.val) {
+      getLogger().error(
+        chalk.red(`❌ Could not resolve plugin "${pluginName}" contract "${contractName}"`)
+      );
+      for (const msg of resolution.validations) {
+        getLogger().error(`   ${msg}`);
+      }
+      process.exit(1);
+    }
+    const componentPath = resolution.val.componentPath;
+    const componentName = resolution.val.componentName;
+    if (options.verbose) {
+      getLogger().info(`Loading component "${componentName}" from ${componentPath}`);
+    }
+    const module = await viteServer.ssrLoadModule(componentPath);
+    const component = module[componentName];
+    if (!component || !component.loadParams) {
+      getLogger().error(
+        chalk.red(`❌ Component "${componentName}" does not have loadParams.`)
+      );
+      getLogger().error(
+        "   Only components with withLoadParams() expose discoverable URL params."
+      );
+      process.exit(1);
+    }
+    const { resolveServices } = await import("@jay-framework/stack-server-runtime");
+    const resolvedServices = resolveServices(component.services || []);
+    const allParams = [];
+    const paramsGenerator = component.loadParams(resolvedServices);
+    for await (const batch of paramsGenerator) {
+      allParams.push(...batch);
+    }
+    if (options.yaml) {
+      getLogger().important(YAML.stringify(allParams));
+    } else {
+      getLogger().important(JSON.stringify(allParams, null, 2));
+    }
+    if (!options.yaml) {
+      getLogger().important(
+        chalk.green(`
+✅ Found ${allParams.length} param combination(s)`)
+      );
+    }
+  } catch (error) {
+    getLogger().error(chalk.red("❌ Failed to discover params:") + " " + error.message);
+    if (options.verbose) {
+      getLogger().error(error.stack);
+    }
+    process.exit(1);
+  } finally {
+    if (viteServer) {
+      await viteServer.close();
+    }
+  }
+}
+async function runSetup(pluginFilter, options, projectRoot, initializeServices) {
+  let viteServer;
+  try {
+    const logger = getLogger();
+    const path2 = await import("node:path");
+    const jayConfig = loadConfig();
+    const configDir = path2.resolve(projectRoot, jayConfig.devServer?.configBase || "./config");
+    logger.important(chalk.bold("\n🔧 Setting up plugins...\n"));
+    if (options.verbose) {
+      logger.info("Starting Vite for TypeScript support...");
+    }
+    viteServer = await createViteForCli({ projectRoot });
+    const { discoverPluginsWithSetup, executePluginSetup } = await import("@jay-framework/stack-server-runtime");
+    const pluginsWithSetup = await discoverPluginsWithSetup({
+      projectRoot,
+      verbose: options.verbose,
+      pluginFilter
+    });
+    if (pluginsWithSetup.length === 0) {
+      if (pluginFilter) {
+        logger.important(
+          chalk.yellow(`⚠️  Plugin "${pluginFilter}" not found or has no setup handler.`)
+        );
+      } else {
+        logger.important(chalk.gray("No plugins with setup handlers found."));
+      }
+      return;
+    }
+    if (options.verbose) {
+      logger.info(
+        `Found ${pluginsWithSetup.length} plugin(s) with setup: ${pluginsWithSetup.map((p) => p.name).join(", ")}`
+      );
+    }
+    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;
+    let needsConfig = 0;
+    let errors = 0;
+    for (const plugin of pluginsWithSetup) {
+      logger.important(chalk.bold(`📦 ${plugin.name}`));
+      if (plugin.setupDescription && options.verbose) {
+        logger.important(chalk.gray(`   ${plugin.setupDescription}`));
+      }
+      try {
+        const result = await executePluginSetup(plugin, {
+          projectRoot,
+          configDir,
+          force: options.force ?? false,
+          initError: initErrors.get(plugin.name),
+          viteServer,
+          verbose: options.verbose
+        });
+        switch (result.status) {
+          case "configured":
+            configured++;
+            logger.important(chalk.green("   ✅ Services verified"));
+            if (result.configCreated?.length) {
+              for (const cfg of result.configCreated) {
+                logger.important(chalk.green(`   ✅ Created ${cfg}`));
+              }
+            }
+            if (result.message) {
+              logger.important(chalk.gray(`   ${result.message}`));
+            }
+            break;
+          case "needs-config":
+            needsConfig++;
+            if (result.configCreated?.length) {
+              for (const cfg of result.configCreated) {
+                logger.important(
+                  chalk.yellow(`   ⚠️  Config template created: ${cfg}`)
+                );
+              }
+            }
+            if (result.message) {
+              logger.important(chalk.yellow(`   → ${result.message}`));
+            } else {
+              logger.important(
+                chalk.yellow(
+                  `   → Fill in credentials and re-run: jay-stack setup ${plugin.name}`
+                )
+              );
+            }
+            break;
+          case "error":
+            errors++;
+            logger.important(chalk.red(`   ❌ ${result.message || "Setup failed"}`));
+            break;
+        }
+      } catch (error) {
+        errors++;
+        logger.important(chalk.red(`   ❌ Setup failed: ${error.message}`));
+        if (options.verbose) {
+          logger.error(error.stack);
+        }
+      }
+      logger.important("");
+    }
+    const parts = [];
+    if (configured > 0)
+      parts.push(`${configured} configured`);
+    if (needsConfig > 0)
+      parts.push(`${needsConfig} needs config`);
+    if (errors > 0)
+      parts.push(`${errors} error(s)`);
+    logger.important(`Setup complete: ${parts.join(", ")}`);
+    if (errors > 0) {
+      process.exit(1);
+    }
+  } catch (error) {
+    getLogger().error(chalk.red("❌ Setup failed:") + " " + error.message);
+    if (options.verbose) {
+      getLogger().error(error.stack);
+    }
+    process.exit(1);
+  } finally {
+    if (viteServer) {
+      await viteServer.close();
+    }
+  }
+}
 const program = new Command();
 program.name("jay-stack").description("Jay Stack CLI - Development server and plugin validation").version("0.9.0");
-program.command("dev [path]").description("Start the Jay Stack development server").action(async (path2, options) => {
+program.command("dev [path]").description("Start the Jay Stack development server").option("-v, --verbose", "Enable verbose logging output").option("-q, --quiet", "Suppress all non-error output").option("--test-mode", "Enable test endpoints (/_jay/health, /_jay/shutdown)").option("--timeout <seconds>", "Auto-shutdown after N seconds (implies --test-mode)", parseInt).action(async (path2, options) => {
   try {
+    const logLevel = options.quiet ? "silent" : options.verbose ? "verbose" : "info";
+    setDevLogger(createDevLogger(logLevel));
+    const testMode = options.testMode || options.timeout !== void 0;
     await startDevServer({
-      projectPath: path2 || process.cwd()
+      projectPath: path2 || process.cwd(),
+      testMode,
+      timeout: options.timeout,
+      logLevel
     });
   } catch (error) {
-    console.error(chalk.red("Error starting dev server:"), error.message);
+    getLogger().error(chalk.red("Error starting dev server:") + " " + error.message);
     process.exit(1);
   }
 });
@@ -1627,9 +3412,11 @@ program.command("validate [path]").description("Validate all .jay-html and .jay-
     }
   } catch (error) {
     if (options.json) {
-      console.log(JSON.stringify({ valid: false, error: error.message }, null, 2));
+      getLogger().important(
+        JSON.stringify({ valid: false, error: error.message }, null, 2)
+      );
     } else {
-      console.error(chalk.red("Validation error:"), error.message);
+      getLogger().error(chalk.red("Validation error:") + " " + error.message);
     }
     process.exit(1);
   }
@@ -1648,64 +3435,268 @@ program.command("validate-plugin [path]").description("Validate a Jay Stack plug
       process.exit(1);
     }
   } catch (error) {
-    console.error(chalk.red("Validation error:"), error.message);
+    getLogger().error(chalk.red("Validation error:") + " " + error.message);
+    process.exit(1);
+  }
+});
+async function ensureAgentKitDocs(projectRoot, force) {
+  const path2 = await import("node:path");
+  const fs2 = await import("node:fs/promises");
+  const { fileURLToPath } = await import("node:url");
+  const agentKitDir = path2.join(projectRoot, "agent-kit");
+  await fs2.mkdir(agentKitDir, { recursive: true });
+  const thisDir = path2.dirname(fileURLToPath(import.meta.url));
+  const templateDir = path2.resolve(thisDir, "..", "agent-kit-template");
+  let files;
+  try {
+    files = (await fs2.readdir(templateDir)).filter((f) => f.endsWith(".md"));
+  } catch {
+    getLogger().warn(chalk.yellow("   Agent-kit template folder not found: " + templateDir));
+    return;
+  }
+  for (const filename of files) {
+    const destPath = path2.join(agentKitDir, filename);
+    if (!force) {
+      try {
+        await fs2.access(destPath);
+        continue;
+      } catch {
+      }
+    }
+    await fs2.copyFile(path2.join(templateDir, filename), destPath);
+    getLogger().info(chalk.gray(`   Created agent-kit/${filename}`));
+  }
+}
+async function generatePluginReferences(projectRoot, options, initErrors, viteServer) {
+  const { discoverPluginsWithReferences, executePluginReferences } = await import("@jay-framework/stack-server-runtime");
+  const plugins = await discoverPluginsWithReferences({
+    projectRoot,
+    verbose: options.verbose,
+    pluginFilter: options.plugin
+  });
+  if (plugins.length === 0)
+    return;
+  const logger = getLogger();
+  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) {
+        logger.important(chalk.green(`   ✅ ${plugin.name}:`));
+        for (const ref of result.referencesCreated) {
+          logger.important(chalk.gray(`      ${ref}`));
+        }
+        if (result.message) {
+          logger.important(chalk.gray(`      ${result.message}`));
+        }
+      }
+    } catch (error) {
+      logger.warn(
+        chalk.yellow(`   ⚠️  ${plugin.name}: references skipped — ${error.message}`)
+      );
+    }
+  }
+}
+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({
+        projectRoot,
+        dynamicOnly: options.dynamicOnly,
+        pluginFilter: options.plugin
+      });
+      if (options.yaml) {
+        getLogger().important(YAML.stringify(index));
+      } else {
+        printContractList(index);
+      }
+      return { initErrors };
+    }
+    if (options.verbose) {
+      getLogger().info("Starting Vite for TypeScript support...");
+    }
+    viteServer = await createViteForCli({ projectRoot });
+    const { services, initErrors: errors } = await initializeServicesForCli(
+      projectRoot,
+      viteServer
+    );
+    initErrors = errors;
+    const result = await materializeContracts(
+      {
+        projectRoot,
+        outputDir,
+        force: options.force,
+        dynamicOnly: options.dynamicOnly,
+        pluginFilter: options.plugin,
+        verbose: options.verbose,
+        viteServer
+      },
+      services
+    );
+    if (options.yaml) {
+      getLogger().important(YAML.stringify(result.index));
+    } else {
+      getLogger().important(
+        chalk.green(`
+✅ Materialized ${result.index.contracts.length} 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) {
+      getLogger().error(error.stack);
+    }
     process.exit(1);
+  } finally {
+    if (viteServer && !keepViteAlive) {
+      await viteServer.close();
+    }
   }
+  return { initErrors };
+}
+program.command("setup [plugin]").description(
+  "Run plugin setup: create config templates, validate credentials, generate reference data"
+).option("--force", "Force re-run (overwrite config templates and regenerate references)").option("-v, --verbose", "Show detailed output").action(async (plugin, options) => {
+  await runSetup(plugin, options, process.cwd(), initializeServicesForCli);
+});
+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();
+  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();
+    }
+  }
+});
+program.command("action <plugin/action>").description(
+  `Run a plugin action (e.g., jay-stack action wix-stores/searchProducts --input '{"query":""}')`
+).option("--input <json>", "JSON input for the action (default: {})").option("--yaml", "Output result as YAML instead of JSON").option("-v, --verbose", "Show detailed output").action(async (actionRef, options) => {
+  await runAction(actionRef, options, process.cwd(), initializeServicesForCli);
+});
+program.command("params <plugin/contract>").description(
+  "Discover load param values for a contract (e.g., jay-stack params wix-stores/product-page)"
+).option("--yaml", "Output result as YAML instead of JSON").option("-v, --verbose", "Show detailed output").action(async (contractRef, options) => {
+  await runParams(contractRef, options, process.cwd(), initializeServicesForCli);
 });
 program.parse(process.argv);
 if (!process.argv.slice(2).length) {
   program.outputHelp();
 }
 function printValidationResult(result, verbose) {
+  const logger = getLogger();
   if (result.valid && result.warnings.length === 0) {
-    console.log(chalk.green("✅ Plugin validation successful!\n"));
+    logger.important(chalk.green("✅ Plugin validation successful!\n"));
     if (verbose) {
-      console.log("Plugin:", result.pluginName);
-      console.log("  ✅ plugin.yaml valid");
-      console.log(`  ✅ ${result.contractsChecked} contracts validated`);
+      logger.important("Plugin: " + result.pluginName);
+      logger.important("  ✅ plugin.yaml valid");
+      logger.important(`  ✅ ${result.contractsChecked} contracts validated`);
       if (result.typesGenerated) {
-        console.log(`  ✅ ${result.typesGenerated} type definitions generated`);
+        logger.important(`  ✅ ${result.typesGenerated} type definitions generated`);
       }
-      console.log(`  ✅ ${result.componentsChecked} components validated`);
+      logger.important(`  ✅ ${result.componentsChecked} components validated`);
       if (result.packageJsonChecked) {
-        console.log("  ✅ package.json valid");
+        logger.important("  ✅ package.json valid");
       }
-      console.log("\nNo errors found.");
+      logger.important("\nNo errors found.");
     }
   } else if (result.valid && result.warnings.length > 0) {
-    console.log(chalk.yellow("⚠️  Plugin validation passed with warnings\n"));
-    console.log("Warnings:");
+    logger.important(chalk.yellow("⚠️  Plugin validation passed with warnings\n"));
+    logger.important("Warnings:");
     result.warnings.forEach((warning) => {
-      console.log(chalk.yellow(`  ⚠️  ${warning.message}`));
+      logger.important(chalk.yellow(`  ⚠️  ${warning.message}`));
       if (warning.location) {
-        console.log(chalk.gray(`      Location: ${warning.location}`));
+        logger.important(chalk.gray(`      Location: ${warning.location}`));
       }
       if (warning.suggestion) {
-        console.log(chalk.gray(`      → ${warning.suggestion}`));
+        logger.important(chalk.gray(`      → ${warning.suggestion}`));
       }
-      console.log();
+      logger.important("");
     });
-    console.log(chalk.gray("Use --strict to treat warnings as errors."));
+    logger.important(chalk.gray("Use --strict to treat warnings as errors."));
   } else {
-    console.log(chalk.red("❌ Plugin validation failed\n"));
-    console.log("Errors:");
+    logger.important(chalk.red("❌ Plugin validation failed\n"));
+    logger.important("Errors:");
     result.errors.forEach((error) => {
-      console.log(chalk.red(`  ❌ ${error.message}`));
+      logger.important(chalk.red(`  ❌ ${error.message}`));
       if (error.location) {
-        console.log(chalk.gray(`      Location: ${error.location}`));
+        logger.important(chalk.gray(`      Location: ${error.location}`));
       }
       if (error.suggestion) {
-        console.log(chalk.gray(`      → ${error.suggestion}`));
+        logger.important(chalk.gray(`      → ${error.suggestion}`));
       }
-      console.log();
+      logger.important("");
     });
-    console.log(chalk.red(`${result.errors.length} errors found.`));
+    logger.important(chalk.red(`${result.errors.length} errors found.`));
+  }
+}
+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) {
+      const typeIcon = contract.type === "static" ? "📄" : "⚡";
+      logger.important(`   ${typeIcon} ${contract.name}`);
+    }
+    logger.important("");
+  }
+  if (index.contracts.length === 0) {
+    logger.important(chalk.gray("No contracts found."));
   }
 }
 export {
   createEditorHandlers,
   getConfigWithDefaults,
+  getRegisteredVendors,
+  getVendor,
+  hasVendor,
+  listContracts2 as listContracts,
   loadConfig,
+  materializeContracts2 as materializeContracts,
   startDevServer,
   updateConfig
 };