@stacksjs/stx 0.2.95 → 0.2.96

package/dist/component-renderer.js

@@ -1,2 +1,660 @@
-// @bun
-import{ms as a,ns as b}from"./chunk-1xz0w746.js";import"./chunk-m8448qby.js";import"./chunk-kx6eb6ma.js";import"./chunk-g1vt329s.js";import"./chunk-7074g241.js";import"./chunk-9cf97f9p.js";import"./chunk-6djzdes9.js";import"./chunk-v7f8jj15.js";import"./chunk-keawsbpn.js";import"./chunk-8b3z0zd5.js";import"./chunk-hbgxbgam.js";import"./chunk-ejh8fyak.js";import"./chunk-krqn0ddk.js";import"./chunk-y1k17c8b.js";import"./chunk-2j21d3ka.js";import"./chunk-frg705zq.js";import"./chunk-hjm2xab3.js";import"./chunk-07y6m5xx.js";import"./chunk-wazkqv7n.js";import"./chunk-x05nxhyv.js";import"./chunk-31dr4bys.js";import"./chunk-mgj88zeq.js";import"./chunk-m167kjhv.js";import"./chunk-3a4qsygv.js";import"./chunk-dqn9gyhb.js";import"./chunk-988dw6q3.js";import"./chunk-8qc1bsym.js";import"./chunk-xyg1r5w0.js";import"./chunk-7gd339hd.js";import"./chunk-4deg33rw.js";import"./chunk-pa9zb7ty.js";import"./chunk-a2g2qb2y.js";import"./chunk-h5jxydqq.js";import"./chunk-nhv099jv.js";import"./chunk-shv88d2d.js";import"./chunk-0dx4q6yq.js";import"./chunk-ek2w6zvy.js";import"./chunk-9wmq2272.js";import"./chunk-7dkz6z2s.js";import"./chunk-9ecv8aqj.js";import"./chunk-bdk6g1vj.js";import"./chunk-xqq1vxb6.js";import"./chunk-amaa1bev.js";import"./chunk-r5m9xtm7.js";import"./chunk-bs3gmfxz.js";import"./chunk-1zgsgk4b.js";import"./chunk-2jxbwnkz.js";import"./chunk-zen6ax1y.js";import"./chunk-yb1t2h8h.js";import"./chunk-fjk3x41y.js";import"./chunk-5shey2e4.js";import"./chunk-27zsyhrd.js";import"./chunk-7ed3tean.js";import"./chunk-8vtm0m84.js";import"./chunk-tzwtg722.js";import"./chunk-ah88wzbg.js";import"./chunk-v8j49spx.js";import"./chunk-tg2f1mzq.js";import"./chunk-n9dhs1dw.js";import"./chunk-rwrv9wbf.js";import"./chunk-wg9k6h8w.js";import"./chunk-9jtj77jx.js";import"./chunk-qygvvygy.js";import"./chunk-gz5fmp3q.js";import"./chunk-vjbefncc.js";import"./chunk-8xj7c3mf.js";import"./chunk-qvrbjpdc.js";import"./chunk-w3b6m427.js";import"./chunk-rz2ec6g7.js";import"./chunk-35faj94w.js";import"./chunk-djddhmcc.js";import"./chunk-knm8a8yx.js";import"./chunk-xv34zbp4.js";export{a as processESImports,b as processComponents};
+import { registry } from "./component-registry.js";
+import { registerBuiltins } from "./builtins/index.js";
+import { decodeStxProp, findComponentTags, parseMultilineAttributes, pascalToKebab, restoreStashedScripts, stashScriptElements } from "./component-processing.js";
+import { renderComponentWithSlot, userComponentFileExists } from "./utils.js";
+import { createSafeFunction, isExpressionSafe, safeEvaluateObject } from "./safe-evaluator.js";
+import fs from "node:fs";
+import path from "node:path";
+let builtinsRegistered = !1;
+const htmlTags = new Set([
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "svg",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polygon",
+  "polyline",
+  "ellipse",
+  "text",
+  "tspan",
+  "textPath",
+  "g",
+  "defs",
+  "use",
+  "symbol",
+  "image",
+  "clipPath",
+  "mask",
+  "pattern",
+  "marker",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "filter",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDropShadow",
+  "feFlood",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "feSpecularLighting",
+  "feTile",
+  "feTurbulence",
+  "foreignObject",
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "set",
+  "mpath",
+  "desc",
+  "metadata",
+  "switch",
+  "view"
+]);
+function parseComponentProps(rawProps, context, options) {
+  const resolved = {
+    static: {},
+    serverDynamic: {},
+    clientReactive: {},
+    events: {}
+  }, ALPINE_PASSTHROUGH = new Set([
+    "x-cloak",
+    "x-show",
+    "x-if",
+    "x-for",
+    "x-data",
+    "x-init",
+    "x-transition",
+    "x-ref",
+    "x-effect",
+    "x-model",
+    "x-text",
+    "x-html",
+    "x-class",
+    "x-style",
+    "x-on",
+    "x-bind"
+  ]), kebabToCamel = (key) => {
+    if (!key.includes("-") || key.startsWith("@") || key.startsWith(":") || key.startsWith("x-") || key.startsWith("__"))
+      return key;
+    return key.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+  };
+  for (const [rawAttrName, attrValue] of Object.entries(rawProps)) {
+    const attrName = rawAttrName.startsWith("x-") && !ALPINE_PASSTHROUGH.has(rawAttrName) && !rawAttrName.startsWith("x-bind:") && !rawAttrName.startsWith("x-on:") ? `:${rawAttrName.slice(2)}` : rawAttrName;
+    if (attrName.startsWith("@")) {
+      resolved.events[attrName] = attrValue;
+      continue;
+    }
+    if (attrName.startsWith("__stx_")) {
+      const propName = kebabToCamel(attrName.slice(6));
+      resolved.serverDynamic[propName] = decodeStxProp(attrValue, options);
+      continue;
+    }
+    if (attrName.startsWith(":")) {
+      const propName = kebabToCamel(attrName.slice(1)), expression = attrValue === "true" ? propName : attrValue;
+      try {
+        if (!isExpressionSafe(expression)) {
+          if (options.debug)
+            console.error(`Unsafe expression in :${propName} binding: ${expression}`);
+          resolved.clientReactive[propName] = expression;
+          continue;
+        }
+        const contextKeys = Object.keys(context), evaluated = createSafeFunction(expression, contextKeys)(...Object.values(context));
+        if (evaluated === void 0) {
+          const exprVars = expression.match(/\b[a-zA-Z_$][a-zA-Z0-9_$]*\b/g) || [], jsKeywords = new Set(["true", "false", "null", "undefined", "typeof", "instanceof", "in", "of", "new", "this", "return", "void", "delete", "throw", "if", "else"]);
+          if (exprVars.some((v) => !jsKeywords.has(v) && !contextKeys.includes(v))) {
+            resolved.clientReactive[propName] = expression;
+            continue;
+          }
+        }
+        resolved.serverDynamic[propName] = evaluated;
+      } catch {
+        resolved.clientReactive[propName] = expression;
+      }
+      continue;
+    }
+    if (typeof attrValue === "string" && attrValue.includes("{{") && attrValue.includes("}}")) {
+      const singleExprMatch = attrValue.match(/^\{\{\s*([\s\S]+?)\s*\}\}$/);
+      if (singleExprMatch)
+        try {
+          const expression = singleExprMatch[1];
+          if (isExpressionSafe(expression)) {
+            const evaluated = createSafeFunction(expression, Object.keys(context))(...Object.values(context));
+            resolved.static[attrName] = evaluated != null ? String(evaluated) : "";
+          } else {
+            if (options.debug)
+              console.error(`Unsafe expression in ${attrName}: ${expression}`);
+            resolved.static[attrName] = attrValue;
+          }
+        } catch (error) {
+          if (options.debug)
+            console.error(`Error evaluating expression for ${attrName}:`, error);
+          resolved.static[attrName] = attrValue;
+        }
+      else {
+        let result = attrValue;
+        const exprPattern = /\{\{\s*([\s\S]+?)\s*\}\}/g;
+        let match;
+        while ((match = exprPattern.exec(attrValue)) !== null)
+          try {
+            const expression = match[1];
+            if (!isExpressionSafe(expression)) {
+              if (options.debug)
+                console.error(`Unsafe expression in ${attrName}: ${expression}`);
+              continue;
+            }
+            const evaluated = createSafeFunction(expression, Object.keys(context))(...Object.values(context));
+            result = result.replace(match[0], String(evaluated ?? ""));
+          } catch (error) {
+            if (options.debug)
+              console.error(`Error evaluating expression in ${attrName}:`, error);
+          }
+        resolved.static[attrName] = result;
+      }
+      continue;
+    }
+    resolved.static[attrName] = attrValue;
+  }
+  return resolved;
+}
+function parseAllAttributes(attributesStr) {
+  const props = {};
+  let pos = 0;
+  const len = attributesStr.length;
+  while (pos < len) {
+    while (pos < len && /\s/.test(attributesStr[pos]))
+      pos++;
+    if (pos >= len)
+      break;
+    let name = "";
+    while (pos < len && !/[\s=]/.test(attributesStr[pos])) {
+      name += attributesStr[pos];
+      pos++;
+    }
+    if (!name)
+      break;
+    while (pos < len && /\s/.test(attributesStr[pos]))
+      pos++;
+    if (pos < len && attributesStr[pos] === "=") {
+      pos++;
+      while (pos < len && /\s/.test(attributesStr[pos]))
+        pos++;
+      let value = "";
+      if (pos < len && (attributesStr[pos] === '"' || attributesStr[pos] === "'")) {
+        const quote = attributesStr[pos];
+        pos++;
+        while (pos < len) {
+          const char = attributesStr[pos];
+          if (char === "\\" && pos + 1 < len) {
+            pos++;
+            value += attributesStr[pos];
+            pos++;
+            continue;
+          }
+          if (char === quote) {
+            pos++;
+            break;
+          }
+          value += char;
+          pos++;
+        }
+      } else
+        while (pos < len && !/\s/.test(attributesStr[pos])) {
+          value += attributesStr[pos];
+          pos++;
+        }
+      props[name] = value;
+    } else
+      props[name] = "true";
+  }
+  return props;
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function findUnresolvedBuiltinTags(template) {
+  const unresolved = new Set, tagRegex = /<([A-Z][A-Za-z0-9]*|stx-[a-z0-9-]+)\b[^>]*>/g;
+  let match;
+  while ((match = tagRegex.exec(template)) !== null) {
+    const name = match[1];
+    if (registry.isBuiltin(name))
+      unresolved.add(name);
+  }
+  return [...unresolved].sort();
+}
+const pkgStxIndexCache = new Map;
+function buildStxIndex(pkgDir) {
+  const cached = pkgStxIndexCache.get(pkgDir);
+  if (cached)
+    return cached;
+  const index = new Map, roots = [path.join(pkgDir, "src"), path.join(pkgDir, "dist"), pkgDir];
+  function walk(dir, depth) {
+    if (depth > 6)
+      return;
+    let entries;
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: !0 });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name === "node_modules" || entry.name.startsWith("."))
+          continue;
+        walk(full, depth + 1);
+      } else if (entry.isFile() && entry.name.endsWith(".stx")) {
+        const base = entry.name.slice(0, -4);
+        if (!index.has(base))
+          index.set(base, full);
+        const lower = base.toLowerCase();
+        if (!index.has(lower))
+          index.set(lower, full);
+        const kebab = base.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        if (!index.has(kebab))
+          index.set(kebab, full);
+      }
+    }
+  }
+  for (const root of roots) {
+    walk(root, 0);
+    if (index.size > 0)
+      break;
+  }
+  pkgStxIndexCache.set(pkgDir, index);
+  return index;
+}
+function resolvePackageDir(spec, fromDir) {
+  if (spec.startsWith(".") || spec.startsWith("/"))
+    return null;
+  let dir = fromDir;
+  while (!0) {
+    const candidate = path.join(dir, "node_modules", spec);
+    try {
+      if (fs.statSync(candidate).isDirectory())
+        return candidate;
+    } catch {}
+    const parent = path.dirname(dir);
+    if (parent === dir)
+      return null;
+    dir = parent;
+  }
+}
+export async function processESImports(template, context, filePath, options, dependencies) {
+  if (!template.includes("import"))
+    return template;
+  if (!context.__importedComponents)
+    context.__importedComponents = new Map;
+  const registered = context.__importedComponents, fromDir = path.dirname(filePath);
+  let output = template;
+  const scriptRe = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+  output = output.replace(scriptRe, (full, attrs, body) => {
+    const importRe = /import\s+(?:(\{[^}]*\})|([A-Za-z_$][\w$]*))\s+from\s+['"]([^'"]+)['"]\s*;?\s*\n?/g;
+    let newBody = body, m;
+    const removals = [];
+    while ((m = importRe.exec(body)) !== null) {
+      const [matchStr, namedBlock, defaultName, spec] = m;
+      let pkgDir = null, singleFile = null;
+      if (spec.startsWith(".") || spec.startsWith("/")) {
+        const abs = path.resolve(fromDir, spec);
+        if (abs.endsWith(".stx"))
+          singleFile = abs;
+        else {
+          const withExt = `${abs}.stx`;
+          try {
+            if (fs.statSync(withExt).isFile())
+              singleFile = withExt;
+          } catch {
+            try {
+              if (fs.statSync(abs).isDirectory())
+                pkgDir = abs;
+            } catch {}
+          }
+        }
+      } else
+        pkgDir = resolvePackageDir(spec, fromDir);
+      if (!pkgDir && !singleFile)
+        continue;
+      let consumedAny = !1;
+      const register = (name, file) => {
+        registered.set(name, file);
+        registered.set(name.toLowerCase(), file);
+        const kebab = name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        registered.set(kebab, file);
+        dependencies.add(file);
+      };
+      if (defaultName && singleFile) {
+        register(defaultName, singleFile);
+        consumedAny = !0;
+      } else if (namedBlock) {
+        const names = namedBlock.slice(1, -1).split(",").map((n) => n.trim()).filter(Boolean).map((n) => {
+          const asMatch = n.match(/^([A-Za-z_$][\w$]*)\s+as\s+([A-Za-z_$][\w$]*)$/);
+          if (asMatch)
+            return { source: asMatch[1], local: asMatch[2] };
+          return { source: n, local: n };
+        }), index = pkgDir ? buildStxIndex(pkgDir) : null;
+        for (const { source, local } of names) {
+          let file = null;
+          if (singleFile)
+            file = singleFile;
+          else if (index)
+            file = index.get(source) ?? index.get(source.toLowerCase()) ?? index.get(source.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()) ?? null;
+          if (file) {
+            register(local, file);
+            consumedAny = !0;
+          }
+        }
+      }
+      if (consumedAny)
+        removals.push({ start: m.index, end: m.index + matchStr.length });
+    }
+    if (removals.length === 0)
+      return full;
+    for (let i = removals.length - 1;i >= 0; i--)
+      newBody = newBody.slice(0, removals[i].start) + newBody.slice(removals[i].end);
+    return `<script${attrs}>${newBody}</script>`;
+  });
+  return output;
+}
+async function processImports(template, context, filePath, options, dependencies) {
+  let output = template;
+  if (!context.__importedComponents)
+    context.__importedComponents = new Map;
+  const importedComponents = context.__importedComponents, importRegex = /@import\s*\(\s*([^)]+)\s*\)/g;
+  let match;
+  while ((match = importRegex.exec(output)) !== null) {
+    const [fullMatch, pathsString] = match, paths = pathsString.split(",").map((p) => p.trim().replace(/^['"]|['"]$/g, "")).filter((p) => p.length > 0);
+    for (const componentPath of paths) {
+      const segments = componentPath.split("/"), baseName = segments[segments.length - 1].replace(/\.stx$/, ""), componentName = baseName.includes("-") ? baseName.split("-").map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("") : baseName.charAt(0).toUpperCase() + baseName.slice(1);
+      let resolvedPath = null;
+      const possiblePaths = [
+        path.resolve(path.dirname(filePath), `${componentPath}.stx`),
+        path.resolve(path.dirname(filePath), componentPath),
+        path.resolve(options.componentsDir || "components", `${componentPath}.stx`),
+        path.resolve(options.componentsDir || "components", componentPath),
+        componentPath.endsWith(".stx") ? componentPath : `${componentPath}.stx`
+      ];
+      for (const tryPath of possiblePaths)
+        try {
+          if (await Bun.file(tryPath).exists()) {
+            resolvedPath = tryPath;
+            break;
+          }
+        } catch {}
+      if (resolvedPath) {
+        importedComponents.set(componentName, resolvedPath);
+        importedComponents.set(baseName, resolvedPath);
+        importedComponents.set(baseName.toLowerCase(), resolvedPath);
+        const kebabCase = componentName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        importedComponents.set(kebabCase, resolvedPath);
+        dependencies.add(resolvedPath);
+        if (options.debug)
+          console.log(`Imported component: ${componentName} -> ${resolvedPath}`);
+      } else if (options.debug)
+        console.warn(`Could not resolve imported component: ${componentPath}`);
+    }
+    output = output.replace(fullMatch, "");
+    importRegex.lastIndex = 0;
+  }
+  return output;
+}
+async function processComponentDirectives(template, context, filePath, options, dependencies) {
+  let output = template;
+  const componentsDir = options.componentsDir || "components";
+  if (!context.__processedComponents)
+    context.__processedComponents = new Set;
+  const processedComponents = context.__processedComponents, componentPat = /@component\s*\(/g;
+  let match;
+  while ((match = componentPat.exec(output)) !== null) {
+    const cStart = match.index, openP = cStart + match[0].length - 1;
+    let d = 1, p = openP + 1;
+    while (p < output.length && d > 0) {
+      if (output[p] === "(")
+        d++;
+      else if (output[p] === ")") {
+        d--;
+        if (d === 0)
+          break;
+      }
+      p++;
+    }
+    if (d !== 0)
+      break;
+    const innerArgs = output.substring(openP + 1, p), directiveEnd = p + 1, pathMatch = innerArgs.match(/^\s*['"]([^'"]+)['"]/);
+    if (!pathMatch) {
+      componentPat.lastIndex = 0;
+      continue;
+    }
+    const componentPath = pathMatch[1];
+    let propsString;
+    const afterPath = innerArgs.slice(pathMatch[0].length), propsMatch = afterPath.match(/^\s*,\s*/);
+    if (propsMatch)
+      propsString = afterPath.slice(propsMatch[0].length).trim();
+    let props = {};
+    if (propsString)
+      try {
+        props = safeEvaluateObject(propsString, context);
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : String(error);
+        output = output.replace(output.substring(cStart, directiveEnd), `[Error parsing component props: ${msg}]`);
+        continue;
+      }
+    let slotContent = "", fullMatchEnd = directiveEnd;
+    const endComponentMatch = output.substring(directiveEnd).match(/^([\s\S]*?)@endcomponent/);
+    if (endComponentMatch) {
+      slotContent = endComponentMatch[1].trim();
+      fullMatchEnd = directiveEnd + endComponentMatch[0].length;
+    }
+    const processedContent = await renderComponentWithSlot(componentPath, props, slotContent, componentsDir, context, filePath, options, processedComponents, dependencies);
+    output = output.substring(0, cStart) + processedContent + output.substring(fullMatchEnd);
+    componentPat.lastIndex = 0;
+  }
+  return output;
+}
+async function processCustomElementTags(template, context, filePath, options, dependencies) {
+  if (!template)
+    return template;
+  let output = template;
+  const componentsDir = options.componentsDir || "components";
+  if (!context.__processedComponents)
+    context.__processedComponents = new Set;
+  const processedComponents = context.__processedComponents, stashed = stashScriptElements(output);
+  output = stashed.output;
+  output = await processTagsWithParser(output, /[a-z][a-z0-9]*-[a-z0-9-]*/, !1);
+  output = await processTagsWithParser(output, /[A-Z][a-zA-Z0-9]*/, !0);
+  output = await processTagsWithParser(output, /[a-z][a-z0-9]*/, !1, htmlTags);
+  output = restoreStashedScripts(output, stashed.scripts);
+  return output;
+  async function processTagsWithParser(html, tagPattern, isPascalCase, skipTags) {
+    if (!html)
+      return html;
+    let result = html;
+    const tags = findComponentTags(result, tagPattern, skipTags);
+    for (let i = tags.length - 1;i >= 0; i--) {
+      const tag = tags[i], componentPath = isPascalCase ? pascalToKebab(tag.tagName) : tag.tagName, rawProps = parseAllAttributes(tag.attributes), resolvedProps = parseComponentProps(rawProps, context, options), builtinDef = registry.getBuiltin(tag.tagName), overriddenByUser = builtinDef ? await userComponentFileExists(componentPath, componentsDir, context, filePath, options) : !1;
+      if (builtinDef && !overriddenByUser) {
+        const renderCtx = {
+          context,
+          filePath,
+          options,
+          dependencies
+        };
+        let rendered = builtinDef.render(resolvedProps, tag.content, renderCtx);
+        if (Object.keys(resolvedProps.clientReactive).length > 0)
+          rendered = emitClientReactiveAttrs(rendered, resolvedProps.clientReactive);
+        if (Object.keys(resolvedProps.events).length > 0) {
+          const eventAttrs = Object.entries(resolvedProps.events).map(([event, handler]) => `${event}="${escapeAttribute(handler)}"`).join(" ");
+          rendered = rendered.replace(/^(\s*<[a-zA-Z][a-zA-Z0-9-]*)/, `$1 ${eventAttrs}`);
+        }
+        result = result.substring(0, tag.startIndex) + rendered + result.substring(tag.endIndex);
+        continue;
+      }
+      const mergedProps = {};
+      for (const [key, value] of Object.entries(resolvedProps.static))
+        mergedProps[key] = value;
+      for (const [key, value] of Object.entries(resolvedProps.serverDynamic))
+        mergedProps[key] = value;
+      let finalContent = await renderComponentWithSlot(componentPath, mergedProps, tag.content, componentsDir, context, filePath, options, processedComponents, dependencies);
+      if (Object.keys(resolvedProps.clientReactive).length > 0)
+        finalContent = emitClientReactiveAttrs(finalContent, resolvedProps.clientReactive);
+      if (Object.keys(resolvedProps.events).length > 0) {
+        const firstTagMatch = finalContent.match(/^(\s*<)([a-zA-Z][a-zA-Z0-9-]*)(\s|>|\/)/s);
+        if (firstTagMatch) {
+          const eventAttrs = Object.entries(resolvedProps.events).map(([event, handler]) => `${event}="${escapeAttribute(handler)}"`).join(" "), insertPos = firstTagMatch[1].length + firstTagMatch[2].length;
+          finalContent = finalContent.substring(0, insertPos) + " " + eventAttrs + finalContent.substring(insertPos);
+        }
+      }
+      result = result.substring(0, tag.startIndex) + finalContent + result.substring(tag.endIndex);
+    }
+    return result;
+  }
+}
+function emitClientReactiveAttrs(html, clientReactive) {
+  const firstTagMatch = html.match(/^(\s*<)([a-zA-Z][a-zA-Z0-9-]*)(\s|>|\/)/s);
+  if (!firstTagMatch)
+    return html;
+  const reactiveAttrs = Object.entries(clientReactive).map(([key, expr]) => `:${key}="${expr.replace(/"/g, "&quot;")}"`).join(" "), insertPos = firstTagMatch[1].length + firstTagMatch[2].length;
+  return html.substring(0, insertPos) + " " + reactiveAttrs + html.substring(insertPos);
+}
+export async function processComponents(template, context, filePath, options, dependencies) {
+  if (!builtinsRegistered) {
+    registerBuiltins();
+    builtinsRegistered = !0;
+  }
+  let output = await processESImports(template, context, filePath, options, dependencies);
+  output = await processImports(output, context, filePath, options, dependencies);
+  output = await processComponentDirectives(output, context, filePath, options, dependencies);
+  for (let pass = 0;pass < 3; pass++) {
+    const before = output;
+    output = await processCustomElementTags(output, context, filePath, options, dependencies);
+    if (output === before)
+      break;
+  }
+  if (options.debug) {
+    const unresolved = findUnresolvedBuiltinTags(output);
+    if (unresolved.length > 0)
+      console.warn(`[stx] ${filePath}: unresolved component tag(s) after render passes: ${unresolved.join(", ")}. Check nested component output for malformed root tags or recursive component markup.`);
+  }
+  return output;
+}