@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/process.js

@@ -0,0 +1,879 @@
+import fs from "node:fs";
+import path from "node:path";
+import { injectCss } from "./dev-server/ts-css.js";
+import { findBodyOpenTag, replaceBodyOpenTag } from "./find-body-tag.js";
+import { matchHtmlComment, matchStyleElement, maskAtElementPosition, stashScriptElements } from "./html-masking.js";
+import { processA11yDirectives } from "./a11y.js";
+import { generateLifecycleRuntime } from "./composables.js";
+import { processTemplateBindings } from "./reactive-bindings.js";
+import { injectAnalytics } from "./analytics.js";
+import { injectHeatmap } from "./heatmap.js";
+import { processAnimationDirectives } from "./animation.js";
+import { generateRuntimeScript, processEventDirectives } from "./events.js";
+import { extractBridgeData, processClientScript } from "./client-script.js";
+import { extractPageMetaFromSource, pageMetaLayout } from "./page-meta.js";
+import { processStatusDirective } from "./page-response.js";
+import { processReactiveDirectives } from "./reactive.js";
+import { processMarkdownFileDirectives } from "./assets.js";
+import { processAuthDirectives, processConditionals, processEnvDirective, processIssetEmptyDirectives } from "./conditionals.js";
+import { addNonceToInlineContent, injectCspMetaTag, processCspDirectives } from "./csp.js";
+import { processCsrfDirectives } from "./csrf.js";
+import { processCustomDirectives } from "./custom-directives.js";
+import { processAppearanceBootstrapDirective } from "./appearance-bootstrap.js";
+import { devHelpers, errorLogger, errorRecovery, safeExecuteAsync, StxRuntimeError, StxValidationError } from "./error-handling.js";
+import { getHead as getHeadStatic } from "./head.js";
+import { processExpressions, usesSignalsInScript } from "./expressions.js";
+import { processBasicFormDirectives, processErrorDirective, processFormInputDirectives } from "./forms.js";
+import { processTranslateDirective } from "./i18n.js";
+import { processIncludes, processStackPushDirectives, processStackReplacements } from "./includes.js";
+import { processJsDirectives, processTsDirectives } from "./js-ts.js";
+import { processLoops } from "./loops.js";
+import { processMarkdownDirectives } from "./markdown.js";
+import { processMethodDirectives } from "./method-spoofing.js";
+import { runPostProcessingMiddleware, runPreProcessingMiddleware } from "./middleware.js";
+import { performanceMonitor } from "./performance-utils.js";
+import { processRouteDirectives } from "./routes.js";
+import { injectSeoTags, processMetaDirectives, processSeoDirective, processStructuredData } from "./seo.js";
+import { fileExists, resolveTemplatePath } from "./utils.js";
+import { runComposers } from "./view-composers.js";
+import { processServerBindings } from "./server-bindings.js";
+import { processVueTemplate } from "./vue-template.js";
+import { processDynamicComponents } from "./dynamic-components.js";
+import { dedupeScopedStyles, processScopedStyles } from "./style-scoping.js";
+import { injectColorModeBootScript, normalizeCriticalHeadOrder } from "./color-mode-boot.js";
+import { buildIdFragment } from "./build-id.js";
+import { applyHeadInjections, createHeadInjections } from "./head-injection.js";
+import { applyHtmlAttrs, cloakStyleFragment, ensureDocumentShell, hasDocumentShell, injectConfigHeadTags, mergeHtmlAttrs, metaDedupKey, startsDocument } from "./document-shell.js";
+import { hasSignalsSyntax, convertSignalDirectivesToAttributes, convertSignalLoopsToAttributes, preEvalLiteralReactiveIfs, processSignals } from "./signal-processing.js";
+import { processComponents } from "./component-renderer.js";
+import { processInlineAssets } from "./inline-assets.js";
+import { addCloakToConditionalDirectives, addCloakToUnresolvedExpressions, processJsonDirective, processMemoDirective, processOnceDirective, processRefAttributes } from "./misc-directives.js";
+import { validateClientScript } from "./script-validation.js";
+import { safeEvaluate } from "./safe-evaluator.js";
+import { isProduction, isTest } from "./env.js";
+import { warnUnbalancedTags } from "./template-tag-balance.js";
+import { deriveLayoutGroup } from "stx-router/layout-metadata";
+import { initializeComponentClientFactories, injectComponentClientFactories } from "./component-client-factories.js";
+import { importOnce } from "./lazy-module.js";
+export { injectRouterScript } from "./runtime-injection.js";
+import { injectSignalsRuntime, injectTooltipRuntime, outputNeedsSignalsRuntime, pageShipsSignalsRuntime } from "./runtime-injection.js";
+import { absolutizeTemplateImports } from "./import-rebase.js";
+export { processJsonDirective, processOnceDirective } from "./misc-directives.js";
+export { validateClientScript } from "./script-validation.js";
+const PARENT_PLACEHOLDER = "<!--PARENT_CONTENT_PLACEHOLDER-->";
+function escapeHtmlAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function findScriptBodyEnd(src, from) {
+  const len = src.length;
+  let i = from, allowRegex = !0;
+  const tmplStack = [], isCloseHere = (pos) => pos + 9 <= len && src[pos] === "<" && src[pos + 1] === "/" && (src[pos + 2] === "s" || src[pos + 2] === "S") && (src[pos + 3] === "c" || src[pos + 3] === "C") && (src[pos + 4] === "r" || src[pos + 4] === "R") && (src[pos + 5] === "i" || src[pos + 5] === "I") && (src[pos + 6] === "p" || src[pos + 6] === "P") && (src[pos + 7] === "t" || src[pos + 7] === "T") && (src[pos + 8] === ">" || /\s/.test(src[pos + 8]));
+  while (i < len) {
+    const c = src[i];
+    if (isCloseHere(i))
+      return i;
+    if (c === "/" && src[i + 1] === "/") {
+      i = src.indexOf(`
+`, i + 2);
+      if (i === -1)
+        return -1;
+      i += 1;
+      allowRegex = !0;
+      continue;
+    }
+    if (c === "/" && src[i + 1] === "*") {
+      const end = src.indexOf("*/", i + 2);
+      if (end === -1)
+        return -1;
+      i = end + 2;
+      allowRegex = !0;
+      continue;
+    }
+    if (c === "/" && allowRegex) {
+      let j = i + 1, inClass = !1;
+      while (j < len) {
+        const cc = src[j];
+        if (cc === "\\") {
+          j += 2;
+          continue;
+        }
+        if (cc === "[")
+          inClass = !0;
+        else if (cc === "]")
+          inClass = !1;
+        else if (cc === "/" && !inClass) {
+          j++;
+          break;
+        } else if (cc === `
+`) {
+          j = -1;
+          break;
+        }
+        j++;
+      }
+      if (j === -1) {
+        i++;
+        allowRegex = !1;
+        continue;
+      }
+      while (j < len && /[a-z]/.test(src[j]))
+        j++;
+      i = j;
+      allowRegex = !1;
+      continue;
+    }
+    if (c === "'" || c === '"') {
+      const quote = c;
+      i++;
+      while (i < len) {
+        if (src[i] === "\\") {
+          i += 2;
+          continue;
+        }
+        if (src[i] === quote) {
+          i++;
+          break;
+        }
+        if (src[i] === `
+`)
+          break;
+        i++;
+      }
+      allowRegex = !1;
+      continue;
+    }
+    if (c === "`") {
+      i++;
+      while (i < len) {
+        if (src[i] === "\\") {
+          i += 2;
+          continue;
+        }
+        if (src[i] === "`") {
+          i++;
+          break;
+        }
+        if (src[i] === "$" && src[i + 1] === "{") {
+          tmplStack.push(!0);
+          i += 2;
+          allowRegex = !0;
+          break;
+        }
+        i++;
+      }
+      if (tmplStack.length === 0)
+        allowRegex = !1;
+      continue;
+    }
+    if (c === "}" && tmplStack.length > 0) {
+      tmplStack.pop();
+      i++;
+      while (i < len) {
+        if (src[i] === "\\") {
+          i += 2;
+          continue;
+        }
+        if (src[i] === "`") {
+          i++;
+          allowRegex = !1;
+          break;
+        }
+        if (src[i] === "$" && src[i + 1] === "{") {
+          tmplStack.push(!0);
+          i += 2;
+          allowRegex = !0;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+    if (/\s/.test(c))
+      ;
+    else if (/[)\].\w$]/.test(c))
+      allowRegex = !1;
+    else
+      allowRegex = !0;
+    i++;
+  }
+  return -1;
+}
+function findScriptBlockByAttribute(html, attribute) {
+  const escapedAttribute = attribute.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), openingTag = new RegExp(`<script\\b(?=[^>]*\\b${escapedAttribute}(?:\\s|=|/?>))[^>]*>`, "i").exec(html);
+  if (!openingTag)
+    return null;
+  const bodyStart = openingTag.index + openingTag[0].length, closeStart = html.indexOf("</script>", bodyStart);
+  if (closeStart === -1)
+    return null;
+  const closeEnd = html.indexOf(">", closeStart);
+  if (closeEnd === -1)
+    return null;
+  return {
+    start: openingTag.index,
+    end: closeEnd + 1
+  };
+}
+const STYLE_OPEN_TAG = /<style\b[^>]*>/iy, STYLE_CLOSE_TAG = /<\/style>/gi, SCRIPT_OPEN_TAG = /<script\b[^>]*>/iy;
+function findFirstScriptTag(html) {
+  let searchFrom = 0;
+  while (searchFrom < html.length) {
+    const tagStart = html.indexOf("<", searchFrom);
+    if (tagStart === -1)
+      return -1;
+    if (html.startsWith("<!--", tagStart)) {
+      const commentEnd = html.indexOf("-->", tagStart + 4);
+      searchFrom = commentEnd === -1 ? html.length : commentEnd + 3;
+      continue;
+    }
+    STYLE_OPEN_TAG.lastIndex = tagStart;
+    const styleTag = STYLE_OPEN_TAG.exec(html);
+    if (styleTag) {
+      STYLE_CLOSE_TAG.lastIndex = tagStart + styleTag[0].length;
+      const styleEnd = STYLE_CLOSE_TAG.exec(html);
+      searchFrom = styleEnd === null ? html.length : styleEnd.index + 8;
+      continue;
+    }
+    SCRIPT_OPEN_TAG.lastIndex = tagStart;
+    if (SCRIPT_OPEN_TAG.test(html))
+      return tagStart;
+    searchFrom = tagStart + 1;
+  }
+  return -1;
+}
+function placeSignalsRuntimeBeforeScripts(html) {
+  const runtime = findScriptBlockByAttribute(html, "data-stx-runtime");
+  if (!runtime)
+    return html;
+  const firstScript = findFirstScriptTag(html);
+  if (firstScript === -1 || firstScript === runtime.start)
+    return html;
+  if (firstScript < runtime.start)
+    return html.slice(0, firstScript) + html.slice(runtime.start, runtime.end) + `
+` + html.slice(firstScript, runtime.start) + html.slice(runtime.end);
+  const runtimeTag = html.slice(runtime.start, runtime.end), withoutRuntime = html.slice(0, runtime.start) + html.slice(runtime.end), insertionPoint = findFirstScriptTag(withoutRuntime);
+  if (insertionPoint === -1)
+    return runtimeTag + `
+` + withoutRuntime;
+  return withoutRuntime.slice(0, insertionPoint) + runtimeTag + `
+` + withoutRuntime.slice(insertionPoint);
+}
+export async function processDirectives(template, context, filePath, options, dependencies) {
+  if (options.ssr === !1 && !options.autoShell && options.buildMode === "spa")
+    return template;
+  if (context.__stx_signals_gate === void 0)
+    context.__stx_signals_gate = usesSignalsInScript(template, filePath);
+  const isTopLevel = !context.__stxProcessingDepth;
+  if (isTopLevel) {
+    initializeComponentClientFactories(context);
+    context.__stx_head_injections = createHeadInjections();
+    context.__stx_seo_staged = !1;
+  }
+  if (!context.__stxProcessingDepth)
+    context.__stxProcessingDepth = 0;
+  context.__stxProcessingDepth++;
+  if (!context.__onceStore)
+    context.__onceStore = new Set;
+  if ((options.debug || !isProduction() && !isTest()) && filePath && filePath.endsWith(".stx"))
+    warnUnbalancedTags(template, filePath);
+  try {
+    return await performanceMonitor.timeAsync("template-processing", async () => {
+      let result = await processDirectivesInternal(template, context, filePath, options, dependencies);
+      if (isTopLevel)
+        result = processRefAttributes(result);
+      if (isTopLevel && options.autoShell && options.buildMode !== "compile") {
+        const baseHeadConfig = options.app?.head || {}, runtimeHead = (context.__stx_runtime_head || null) ?? getHeadStatic();
+        let pageHeadRaw = (context.__stx_head_raw || "").trim(), pageHeadTitle;
+        const rawTitleMatch = pageHeadRaw.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
+        if (rawTitleMatch) {
+          pageHeadTitle = rawTitleMatch[1].trim();
+          pageHeadRaw = pageHeadRaw.replace(rawTitleMatch[0], "").trim();
+        }
+        const sectionTitle = context.__sections?.title, pageTitle = runtimeHead.title || pageHeadTitle || sectionTitle, titleIsHtml = !runtimeHead.title && (!!pageHeadTitle || !!sectionTitle), runtimeMeta = runtimeHead.meta || [], overriddenMetaKeys = new Set(runtimeMeta.map((m) => metaDedupKey(m)).filter(Boolean)), headConfig = {
+          ...baseHeadConfig,
+          ...pageTitle && { title: pageTitle },
+          meta: [
+            ...(baseHeadConfig.meta || []).filter((m) => !overriddenMetaKeys.has(metaDedupKey(m))),
+            ...runtimeMeta
+          ],
+          link: [...baseHeadConfig.link || [], ...runtimeHead.link || []],
+          script: [...baseHeadConfig.script || [], ...runtimeHead.script || []],
+          headRaw: [baseHeadConfig.headRaw, pageHeadRaw].filter(Boolean).join(`
+`),
+          ...runtimeHead.htmlAttrs && { htmlAttrs: mergeHtmlAttrs(baseHeadConfig.htmlAttrs, runtimeHead.htmlAttrs) },
+          ...runtimeHead.bodyAttrs && { bodyAttrs: { ...baseHeadConfig.bodyAttrs || {}, ...runtimeHead.bodyAttrs } }
+        }, alreadyShelled = hasDocumentShell(result);
+        result = ensureDocumentShell(result, headConfig, {
+          ...titleIsHtml && { titleIsHtml: !0 },
+          ...options.app?.colorMode && { colorMode: options.app.colorMode }
+        }, alreadyShelled);
+        if (alreadyShelled) {
+          result = injectConfigHeadTags(result, baseHeadConfig);
+          result = applyHtmlAttrs(result, headConfig.htmlAttrs);
+        }
+        const layoutComment = result.match(/<!-- stx-layout: ([^ ]+) -->/);
+        if (layoutComment && result.includes("<head")) {
+          const layoutName = layoutComment[1], layoutGroup = deriveLayoutGroup(layoutName);
+          result = result.replace(/<head\b[^>]*>/i, (match) => `${match}
+  <meta name="stx-layout" content="${escapeHtmlAttribute(layoutName)}">
+  <meta name="stx-layout-group" content="${escapeHtmlAttribute(layoutGroup)}">`);
+        }
+        const setupMatch = result.match(/function (__stx_setup_\w+)\(/), bodyTag = setupMatch ? findBodyOpenTag(result) : null;
+        if (setupMatch && bodyTag && !/\bdata-stx=/.test(bodyTag.tag)) {
+          result = replaceBodyOpenTag(result, (_tag, attrs) => `<body${attrs} data-stx="${setupMatch[1]}">`);
+          const wrongAttrRegex = new RegExp(`(<(?!body)[a-zA-Z][^>]*) data-stx="${setupMatch[1]}"`, "i");
+          result = result.replace(wrongAttrRegex, "$1");
+        }
+      }
+      if (isTopLevel) {
+        const headInjections = context.__stx_head_injections ?? createHeadInjections(), cloak = cloakStyleFragment(result);
+        if (cloak !== null)
+          headInjections.beforeClose.push(cloak);
+        const buildId = buildIdFragment(result);
+        if (buildId !== null)
+          headInjections.afterOpen.push(buildId);
+        result = applyHeadInjections(result, headInjections);
+        const colorModeConfig = options.app?.colorMode;
+        if (colorModeConfig)
+          result = injectColorModeBootScript(result, colorModeConfig);
+        result = placeSignalsRuntimeBeforeScripts(result);
+      }
+      if (isTopLevel) {
+        const runtime = findScriptBlockByAttribute(result, "data-stx-runtime");
+        if (runtime) {
+          let storeTag = null, composableTag = null, frameworkScript = null;
+          try {
+            const { getStoreScript } = await importOnce("stx/store-loader", () => import("./store-loader.js")), resolvedStoresDir = options.storesDir, storeCode = await getStoreScript(resolvedStoresDir);
+            if (storeCode)
+              storeTag = `<script data-stx-stores>${storeCode}</script>`;
+          } catch {}
+          try {
+            const { getFrameworkComposableScript } = await importOnce("stx/framework-composables", () => import("./framework-composables.js"));
+            frameworkScript = await getFrameworkComposableScript(result);
+          } catch {}
+          try {
+            const { getComposableScript } = await importOnce("stx/composable-loader", () => import("./composable-loader.js")), resolvedComposablesDir = options.composablesDir, pending = [storeTag, frameworkScript].filter((text) => text !== null), composableCode = await getComposableScript(resolvedComposablesDir, result, pending);
+            if (composableCode)
+              composableTag = `<script data-stx-composables>${composableCode}</script>`;
+          } catch {}
+          const tags = [storeTag, composableTag, frameworkScript].filter((text) => text !== null).map((tag) => `
+${tag}`).join("");
+          if (tags)
+            result = result.slice(0, runtime.end) + tags + result.slice(runtime.end);
+        }
+      }
+      if (isTopLevel)
+        result = normalizeCriticalHeadOrder(result);
+      if (isTopLevel && context.__stx_inject_css !== !1)
+        result = await injectCss(result, void 0, options.buildMode === "serve");
+      if (isTopLevel)
+        result = dedupeScopedStyles(result);
+      result = result.replace(/\x00STX_ESCAPED_AT\x00/g, "@");
+      return result;
+    });
+  } catch (error) {
+    if (error instanceof StxValidationError)
+      throw error;
+    const msg = error instanceof Error ? error.message : String(error), enhancedError = new StxRuntimeError(`Template processing failed: ${msg}`, filePath, void 0, void 0, template.substring(0, 200) + (template.length > 200 ? "..." : ""));
+    errorLogger.log(enhancedError, { filePath, context });
+    devHelpers.logDetailedError(enhancedError, { filePath, template: template.substring(0, 500) });
+    if (options.debug)
+      throw enhancedError;
+    return errorRecovery.createFallbackContent("Template Processing", enhancedError);
+  }
+}
+async function processDirectivesInternal(template, context, filePath, options, dependencies) {
+  const projectRoot = process.cwd(), resolvedOptions = {
+    ...options,
+    partialsDir: options.partialsDir && !path.isAbsolute(options.partialsDir) ? path.resolve(projectRoot, options.partialsDir) : options.partialsDir,
+    componentsDir: options.componentsDir && !path.isAbsolute(options.componentsDir) ? path.resolve(projectRoot, options.componentsDir) : options.componentsDir,
+    layoutsDir: options.layoutsDir && !path.isAbsolute(options.layoutsDir) ? path.resolve(projectRoot, options.layoutsDir) : options.layoutsDir
+  }, opts = resolvedOptions;
+  let output = template;
+  await runViewComposersForTemplate(filePath, context);
+  prepareDirectiveContext(context, opts);
+  output = await safeExecuteAsync(() => runPreProcessingMiddleware(output, context, filePath, opts), output, (error) => {
+    errorLogger.log(error, { filePath, phase: "pre-processing-middleware" }, "warning");
+    console.warn(`[stx] pre-processing middleware failed for ${filePath}: ${error.message}`);
+  });
+  output = output.replace(/\{\{--[\s\S]*?--\}\}/g, "");
+  const masked = maskAtElementPosition(output, matchHtmlComment, (_token, index) => `\x00STX_HTML_COMMENT_${index}\x00`);
+  output = masked.output;
+  const htmlComments = masked.tokens, unmaskHtmlComments = (s) => htmlComments.length === 0 ? s : s.replace(/\x00STX_HTML_COMMENT_(\d+)\x00/g, (_, i) => htmlComments[Number(i)] ?? ""), ESCAPED_AT_PLACEHOLDER = "\x00STX_ESCAPED_AT\x00";
+  output = output.replace(/@@/g, ESCAPED_AT_PLACEHOLDER);
+  output = output.replace(/@\{\{([\s\S]*?)\}\}/g, (_, content) => {
+    return `{{ ${content} }}`;
+  });
+  output = processVueTemplate(output);
+  output = await processInlineAssets(output, filePath, dependencies);
+  const stacks = {};
+  output = processStackPushDirectives(output, stacks);
+  const sections = { ...context.__sections || {} };
+  let layoutPath = "";
+  const declaredLayout = pageMetaLayout(extractPageMetaFromSource(template)), hasNoLayout = /@nolayout\b/.test(output) || declaredLayout === !1;
+  if (/@nolayout\b/.test(output))
+    output = output.replace(/@nolayout\b\s*/g, "");
+  const layoutMatch = output.match(/@(?:layout|extends)\(\s*['"]([^'"]+)['"]\s*\)/);
+  if (layoutMatch) {
+    layoutPath = layoutMatch[1];
+    output = output.replace(/@(?:layout|extends)\(\s*['"]([^'"]+)['"]\s*\)/g, "");
+  } else if (typeof declaredLayout === "string") {
+    layoutPath = declaredLayout;
+    if (!/@section\s*\(/.test(output))
+      output = `@section('content')
+${output.trim()}
+@endsection`;
+  }
+  if (!layoutPath && !hasNoLayout && opts.defaultLayout) {
+    const isDocument = startsDocument(output), hasSections = /@section\s*\(/.test(output);
+    if (!isDocument || hasSections) {
+      let autoLayoutPath = "", searchDir = path.dirname(filePath);
+      const rootDir = opts.layoutsDir ? path.dirname(opts.layoutsDir) : process.cwd();
+      for (let i = 0;i < 20; i++) {
+        const candidate = path.join(searchDir, "_layout.stx");
+        if (await fileExists(candidate)) {
+          autoLayoutPath = candidate;
+          break;
+        }
+        const parent = path.dirname(searchDir);
+        if (parent === searchDir || parent.length < rootDir.length)
+          break;
+        searchDir = parent;
+      }
+      if (autoLayoutPath)
+        layoutPath = autoLayoutPath;
+      else if (opts.layoutsDir) {
+        const resolvedLayoutsDir = path.isAbsolute(opts.layoutsDir) ? opts.layoutsDir : path.resolve(process.cwd(), opts.layoutsDir), defaultLayoutFile = path.join(resolvedLayoutsDir, `${opts.defaultLayout}.stx`);
+        if (await fileExists(defaultLayoutFile))
+          layoutPath = defaultLayoutFile;
+      }
+      if (layoutPath && !hasSections)
+        output = `@section('content')
+${output.trim()}
+@endsection`;
+    }
+  }
+  output = output.replace(/@section\(\s*['"]([^'"]+)['"]\s*,\s*['"]([^'"]+)['"]\s*\)/g, (_, name, value) => {
+    sections[name] = value;
+    return "";
+  });
+  output = output.replace(/@section\(\s*['"]([^'"]+)['"]\s*,\s*([^)]+?)\s*\)/g, (full, name, expr) => {
+    if (/^(['"]).*\1$/.test(expr.trim()))
+      return full;
+    try {
+      const value = safeEvaluate(expr.trim(), context);
+      if (value === void 0)
+        return full;
+      sections[name] = String(value ?? "");
+      return "";
+    } catch {
+      return full;
+    }
+  });
+  output = output.replace(/@section\(\s*['"]([^'"]+)['"]\s*\)([\s\S]*?)(?:@endsection|@show)/g, (_, name, content) => {
+    if (content.includes("@parent"))
+      sections[name] = content.replace("@parent", PARENT_PLACEHOLDER);
+    else
+      sections[name] = content.trim();
+    return "";
+  });
+  context.__sections = sections;
+  output = output.replace(/@(?:yield|slot)\(\s*['"]([^'"]+)['"](?:,\s*['"]([^'"]+)['"])?\)/g, (_, name, defaultContent) => {
+    return sections[name] || defaultContent || "";
+  });
+  if (!("slot" in context) || context.slot === void 0)
+    output = output.replace(/\{\{\s*slot\s*\}\}/g, () => {
+      return sections.content || "";
+    });
+  output = processStackReplacements(output, stacks);
+  if (layoutPath) {
+    const orphans = [], scripts = stashScriptElements(output), styles = maskAtElementPosition(scripts.output, matchStyleElement, (_token, index) => `\x00STX_ORPHAN_STYLE_${index}\x00`);
+    output = styles.output.replace(/\x00STX_(SCRIPT|ORPHAN_STYLE)_(\d+)\x00/g, (_match, kind, index) => {
+      const token = kind === "SCRIPT" ? scripts.scripts[Number(index)] : styles.tokens[Number(index)];
+      if (token)
+        orphans.push(token);
+      return "";
+    });
+    if (orphans.length > 0) {
+      const joined = orphans.join(`
+`);
+      sections.content = sections.content ? `${sections.content}
+${joined}` : joined;
+      context.__sections = sections;
+    }
+  }
+  if (layoutPath)
+    try {
+      let layoutFullPath;
+      if (path.isAbsolute(layoutPath)) {
+        layoutFullPath = layoutPath;
+        dependencies.add(layoutPath);
+      } else
+        layoutFullPath = await safeExecuteAsync(() => resolveTemplatePath(layoutPath, filePath, resolvedOptions, dependencies), null, () => {
+          throw new StxRuntimeError(`Failed to resolve layout path: ${layoutPath}`, filePath, void 0, void 0, `Layout referenced from ${filePath}`);
+        });
+      if (!layoutFullPath) {
+        const layoutsIn = (dir) => {
+          if (!dir)
+            return [];
+          try {
+            const abs = path.isAbsolute(dir) ? dir : path.resolve(process.cwd(), dir);
+            return fs.readdirSync(abs).filter((f) => f.endsWith(".stx")).map((f) => f.replace(/\.stx$/, ""));
+          } catch {
+            return [];
+          }
+        }, available = [
+          ...layoutsIn(resolvedOptions.layoutsDir),
+          ...layoutsIn(resolvedOptions.fallbackLayoutsDir)
+        ].filter((name, index, all) => all.indexOf(name) === index).sort(), warning = `Layout not found: ${layoutPath} (referenced from ${filePath})` + (available.length > 0 ? `. Available layouts: ${available.join(", ")}` : resolvedOptions.layoutsDir ? `. No .stx layouts found in ${resolvedOptions.layoutsDir}` : "");
+        errorLogger.log(Error(warning), { layoutPath, filePath, available }, "error");
+        console.error(`[stx] ${warning}`);
+        if (resolvedOptions.debug)
+          throw new StxRuntimeError(warning, filePath);
+        return output;
+      }
+      let layoutContent = await safeExecuteAsync(() => Bun.file(layoutFullPath).text(), "", () => {
+        throw new StxRuntimeError(`Failed to read layout file: ${layoutFullPath}`, filePath, void 0, void 0, "Layout content could not be loaded");
+      });
+      layoutContent = absolutizeTemplateImports(layoutContent, layoutFullPath);
+      const nestedLayoutMatch = layoutContent.match(/@(?:layout|extends)\(\s*['"]([^'"]+)['"]\s*\)/);
+      if (nestedLayoutMatch) {
+        if (resolvedOptions.debug)
+          console.log(`Found nested layout: ${nestedLayoutMatch[1]} in ${layoutFullPath}`);
+        const layoutSections = {}, processedLayout = layoutContent.replace(/@section\(\s*['"]([^'"]+)['"]\s*\)([\s\S]*?)(?:@show|@endsection)/g, (_, name, content) => {
+          layoutSections[name] = content.trim();
+          return "";
+        });
+        for (const [name, content] of Object.entries(layoutSections))
+          if (sections[name] && sections[name].includes(PARENT_PLACEHOLDER)) {
+            const idx = sections[name].indexOf(PARENT_PLACEHOLDER);
+            sections[name] = sections[name].slice(0, idx) + content + sections[name].slice(idx + PARENT_PLACEHOLDER.length);
+          } else if (!sections[name])
+            sections[name] = content;
+        const nestedContext = { ...context, __sections: sections }, nestedTemplate = `@layout('${nestedLayoutMatch[1]}')${processedLayout}`;
+        return await processDirectives(nestedTemplate, nestedContext, layoutFullPath, resolvedOptions, dependencies);
+      }
+      const cleanedLayout = layoutContent.replace(/\{\{--[\s\S]*?--\}\}/g, "");
+      let processedLayout = processStackPushDirectives(cleanedLayout, stacks);
+      const layoutSections = {};
+      processedLayout = processedLayout.replace(/@section\(\s*['"]([^'"]+)['"]\s*\)([\s\S]*?)(?:@show|@endsection)/g, (_, name, content) => {
+        layoutSections[name] = content.trim();
+        return `@slot('${name}')`;
+      });
+      processedLayout = processedLayout.replace(/@(?:yield|slot)\(\s*['"]([^'"]+)['"]\s*(?:,\s*['"]([^'"]+)['"]\s*)?\)/g, (_, sectionName, defaultContent) => {
+        if (sections[sectionName]) {
+          let sectionContent = sections[sectionName];
+          if (sectionContent.includes(PARENT_PLACEHOLDER)) {
+            const parentContent = layoutSections[sectionName] || "", idx = sectionContent.indexOf(PARENT_PLACEHOLDER);
+            sectionContent = sectionContent.slice(0, idx) + parentContent + sectionContent.slice(idx + PARENT_PLACEHOLDER.length);
+          }
+          return sectionContent;
+        }
+        return defaultContent || "";
+      });
+      processedLayout = resolveNestedSlots(processedLayout, sections);
+      processedLayout = processedLayout.replace(/\{\{\s*slot\s*\}\}/g, () => {
+        return sections.content || "";
+      });
+      processedLayout = processStackReplacements(processedLayout, stacks);
+      context.__originalFilePath = filePath;
+      output = await processOtherDirectives(processedLayout, context, layoutFullPath, resolvedOptions, dependencies);
+      output = `<!-- stx-layout: ${layoutPath} -->
+${output}`;
+      return unmaskHtmlComments(output);
+    } catch (error) {
+      errorLogger.log(error instanceof Error ? error : Error(String(error)), { layoutPath, filePath }, "error");
+      return `[Error processing layout: ${error instanceof Error ? error.message : String(error)}]`;
+    }
+  return unmaskHtmlComments(await processOtherDirectives(output, context, filePath, resolvedOptions, dependencies));
+}
+function resolveNestedSlots(input, sections) {
+  return input.replace(/@(?:yield|slot)\(\s*['"]([^'"]+)['"]\s*(?:,\s*['"]([^'"]+)['"]\s*)?\)/g, (_full, name, defaultContent) => {
+    const fill = sections[name];
+    if (fill !== void 0) {
+      if (!new RegExp(`@(?:yield|slot)\\(\\s*['"]${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}['"]`).test(fill))
+        return fill;
+    }
+    return defaultContent || "";
+  });
+}
+function prepareDirectiveContext(context, opts) {
+  context.__stx_sfc_mode = !0;
+  context.__stx_options = opts;
+  if (opts.buildMode)
+    context.__stx_buildMode = opts.buildMode;
+  const envPrefix = opts.envPrefix || "STX_PUBLIC_", publicEnv = {};
+  for (const [key, value] of Object.entries(process.env))
+    if (key.startsWith(envPrefix) && value !== void 0)
+      publicEnv[key] = value;
+  context.$env = publicEnv;
+}
+async function runViewComposersForTemplate(filePath, context) {
+  await safeExecuteAsync(() => runComposers(filePath, context), void 0, (error) => {
+    errorLogger.log(error, { filePath, phase: "view-composer" }, "warning");
+    console.warn(`[stx] view composer failed for ${filePath}: ${error.message}`);
+  });
+}
+async function extractServerScriptVariables(output, context, filePath) {
+  const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+  let scriptMatch;
+  while ((scriptMatch = scriptRegex.exec(output)) !== null) {
+    const attrs = scriptMatch[1], scriptContent = scriptMatch[2];
+    if (!/\bserver\b/.test(attrs) || !scriptContent.trim())
+      continue;
+    try {
+      const { extractVariables } = await importOnce("stx/variable-extractor", () => import("./variable-extractor.js"));
+      await extractVariables(scriptContent, context, filePath, { preserveExisting: !0 });
+    } catch (e) {
+      const err = e instanceof Error ? e : Error(String(e));
+      errorLogger.log(err, { filePath, phase: "server-script-extraction" }, "warning");
+      console.warn(`[stx] server <script> extraction failed in ${filePath}: ${err.message}`);
+    }
+  }
+}
+async function interpolateClientScriptExpressions(output, context, filePath) {
+  try {
+    const { interpolateScriptsInTemplate } = await importOnce("stx/expressions", () => import("./expressions.js"));
+    return interpolateScriptsInTemplate(output, context, { skipServer: !0 });
+  } catch (e) {
+    const err = e instanceof Error ? e : Error(String(e));
+    errorLogger.log(err, { filePath, phase: "script-expression-interpolation" }, "warning");
+    console.warn(`[stx] script expression interpolation failed in ${filePath}: ${err.message}`);
+    return output;
+  }
+}
+async function processOtherDirectives(template, context, filePath, options, dependencies) {
+  let output = template;
+  const opts = options;
+  await extractServerScriptVariables(output, context, filePath);
+  output = await interpolateClientScriptExpressions(output, context, filePath);
+  output = await processJsDirectives(output, context, filePath);
+  output = await processTsDirectives(output, context, filePath);
+  output = await processCustomDirectives(output, context, filePath, opts);
+  if (usesSignalsInScript(output)) {
+    output = convertSignalDirectivesToAttributes(output, context);
+    output = convertSignalLoopsToAttributes(output, context);
+  }
+  output = preEvalLiteralReactiveIfs(output);
+  const { processStreamDirectives } = await importOnce("stx/streaming", () => import("./streaming.js"));
+  output = processStreamDirectives(output, context);
+  output = processLoops(output, context, filePath, opts);
+  output = await processDynamicComponents(output, context, filePath, opts, dependencies);
+  output = await processComponents(output, context, filePath, opts, dependencies);
+  output = processAnimationDirectives(output, context, filePath, opts);
+  const { processDeferDirectives } = await importOnce("stx/defer", () => import("./defer.js"));
+  output = processDeferDirectives(output, context, filePath);
+  const { processTeleportDirectives } = await importOnce("stx/teleport", () => import("./teleport.js"));
+  output = processTeleportDirectives(output, context, filePath);
+  const { processTransitionDirectives, processTransitionAttributes } = await importOnce("stx/transitions", () => import("./transitions.js"));
+  output = processTransitionDirectives(output, context, filePath);
+  output = processTransitionAttributes(output);
+  const { processErrorBoundaryDirectives } = await importOnce("stx/error-boundaries", () => import("./error-boundaries.js"));
+  output = processErrorBoundaryDirectives(output, context, filePath);
+  const { processSuspenseDirectives } = await importOnce("stx/suspense", () => import("./suspense.js"));
+  output = processSuspenseDirectives(output, context, filePath);
+  const { processAsyncDirectives } = await importOnce("stx/async-components", () => import("./async-components.js"));
+  output = processAsyncDirectives(output, context, filePath);
+  const { processKeepAliveDirectives } = await importOnce("stx/keep-alive", () => import("./keep-alive.js"));
+  output = processKeepAliveDirectives(output, context, filePath);
+  const { processVirtualListDirectives, processVirtualGridDirectives, processInfiniteListDirectives } = await importOnce("stx/virtual-scrolling", () => import("./virtual-scrolling.js"));
+  output = processVirtualListDirectives(output, context, filePath);
+  output = processVirtualGridDirectives(output, context, filePath);
+  output = processInfiniteListDirectives(output, context, filePath);
+  const { processPartialHydrationDirectives, processStaticDirectives } = await importOnce("stx/partial-hydration", () => import("./partial-hydration.js"));
+  output = processPartialHydrationDirectives(output, context, filePath);
+  output = processStaticDirectives(output);
+  const { processComputedDirectives, processWatchDirectives } = await importOnce("stx/computed", () => import("./computed.js"));
+  output = processComputedDirectives(output, context, filePath);
+  output = processWatchDirectives(output, context, filePath);
+  const { processFormValidationDirectives } = await importOnce("stx/forms-validation", () => import("./forms-validation.js"));
+  output = processFormValidationDirectives(output, context, filePath);
+  const { processHeadDirective, processTitleDirective, processMetaDirective, resetHead } = await importOnce("stx/head", () => import("./head.js"));
+  if (!context.__stx_head_preset && !context.__stx_runtime_head)
+    resetHead();
+  const headResult = processHeadDirective(output);
+  output = headResult.content;
+  if (headResult.headContent)
+    context.__stx_head_raw = `${context.__stx_head_raw || ""}${headResult.headContent}
+`;
+  output = processTitleDirective(output, context);
+  output = processMetaDirective(output, context);
+  output = processRouteDirectives(output);
+  output = processAuthDirectives(output, context);
+  output = processCsrfDirectives(output);
+  output = processMethodDirectives(output);
+  output = await processIncludes(output, context, filePath, opts, dependencies);
+  output = await processComponents(output, context, filePath, opts, dependencies);
+  if (context.__stxProcessingDepth === 1)
+    output = injectComponentClientFactories(output, context);
+  output = output.replace(/@push\s*\(\s*['"][^'"]+['"]\s*\)[\s\S]*?@endpush/g, "");
+  output = processRefAttributes(output);
+  output = processConditionals(output, context, filePath);
+  output = processStatusDirective(output, context, { filePath, buildMode: opts.buildMode });
+  output = processIssetEmptyDirectives(output, context);
+  output = processEnvDirective(output, context);
+  output = processBasicFormDirectives(output, context);
+  output = processFormInputDirectives(output, context);
+  output = processErrorDirective(output, context);
+  output = await processMarkdownFileDirectives(output, context, filePath, opts);
+  output = await processMarkdownDirectives(output, context, filePath);
+  output = await processTranslateDirective(output, context, filePath, opts);
+  output = processA11yDirectives(output, context, filePath, opts);
+  output = processMetaDirectives(output, context, filePath, opts);
+  output = processStructuredData(output, context, filePath);
+  output = processSeoDirective(output, context, filePath, opts);
+  output = processCspDirectives(output, context, filePath, opts);
+  output = processJsonDirective(output, context);
+  output = processOnceDirective(output);
+  output = processMemoDirective(output);
+  if (!opts.skipEventDirectives)
+    output = processEventDirectives(output, context, filePath);
+  output = processReactiveDirectives(output, context, filePath);
+  if (opts.debug) {
+    const hasXData = /\bx-data\s*=/.test(output), hasSignals = hasSignalsSyntax(template);
+    if (hasXData && hasSignals)
+      console.warn(`[stx] ${filePath}: Template mixes Alpine-style (x-data) and signals (state/derived/effect) reactivity.
+  Both work on the same page, but they manage separate scopes.
+  Prefer signals (state/derived/effect) for new components.`);
+  }
+  output = processServerBindings(output, context);
+  output = await processExpressions(output, context, filePath);
+  output = addCloakToUnresolvedExpressions(output);
+  output = addCloakToConditionalDirectives(output);
+  output = processTemplateBindings(output);
+  const { processXElementDirectives } = await importOnce("stx/x-element", () => import("./x-element.js"));
+  output = processXElementDirectives(output);
+  const pageFilePath = context.__originalFilePath || filePath, serverData = extractBridgeData(context);
+  output = await processSignals(output, opts, pageFilePath, serverData);
+  output = processAppearanceBootstrapDirective(output, context);
+  output = await runPostProcessingMiddleware(output, context, filePath, opts);
+  if (opts.media?.image?.autoSiblings) {
+    const publicDir = opts.publicDir || "public", { rewriteImagesWithSiblings } = await importOnce("stx/image-optimization/auto-sibling", () => import("./image-optimization/auto-sibling.js"));
+    output = await rewriteImagesWithSiblings(output, { publicDir });
+  }
+  if (opts.seo?.enabled)
+    output = injectSeoTags(output, context, opts);
+  const injectIntoHead = (html, snippet, replaceExistingTitle = !0) => {
+    if (!snippet)
+      return html;
+    const incomingTitle = snippet.match(/<title\b[^>]*>[\s\S]*?<\/title>/i), existingTitle = html.match(/<title\b[^>]*>[\s\S]*?<\/title>/i);
+    if (incomingTitle && existingTitle) {
+      if (replaceExistingTitle)
+        html = html.replace(existingTitle[0], incomingTitle[0]);
+      snippet = snippet.replace(incomingTitle[0], "").trim();
+      if (!snippet)
+        return html;
+    }
+    if (/<\/head>/i.test(html))
+      return html.replace(/<\/head>/i, `${snippet}
+</head>`);
+    if (/<head\b[^>]*>/i.test(html))
+      return html.replace(/(<head\b[^>]*>)/i, `$1
+${snippet}`);
+    if (/<html\b[^>]*>/i.test(html))
+      return html.replace(/(<html\b[^>]*>)/i, `$1
+<head>
+${snippet}
+</head>`);
+    return html;
+  }, { renderHead, getHead } = await importOnce("stx/head", () => import("./head.js")), headConfig = context.__stx_runtime_head ?? getHead();
+  if (headConfig.title || headConfig.meta?.length || headConfig.link?.length) {
+    const renderedHead = renderHead(headConfig);
+    if (renderedHead)
+      output = injectIntoHead(output, renderedHead);
+  }
+  if (headResult.headContent)
+    output = injectIntoHead(output, headResult.headContent, !headConfig.title);
+  if (opts.csp?.enabled && opts.csp.addMetaTag)
+    output = injectCspMetaTag(output, opts.csp, context);
+  if (opts.analytics?.enabled)
+    output = injectAnalytics(output, opts);
+  if (opts.heatmap?.enabled)
+    output = injectHeatmap(output, opts);
+  if (opts.pwa?.enabled && opts.pwa.autoInject !== !1) {
+    const { injectPwaTags } = await importOnce("stx/pwa/inject", () => import("./pwa/inject.js"));
+    output = injectPwaTags(output, opts);
+  }
+  const hasClientScripts = /<script\b(?![^>]*\bserver\b)[^>]*>[\s\S]*?<\/script>/i.test(output), hasStxUsage = /\bSTX\.\w+/.test(output), alreadyHasRuntime = /window\.STX\s*=/.test(output);
+  if (hasClientScripts && hasStxUsage && !alreadyHasRuntime) {
+    const runtimeScript = `<script data-stx-scoped data-stx-run="once">
+${generateLifecycleRuntime()}
+</script>`;
+    if (output.includes("</head>")) {
+      const headEndPos = output.indexOf("</head>"), firstScriptPos = output.slice(0, headEndPos).indexOf("<script");
+      if (firstScriptPos !== -1) {
+        const before = output.slice(0, firstScriptPos), after = output.slice(firstScriptPos);
+        output = before + runtimeScript + `
+` + after;
+      } else
+        output = output.replace("</head>", `${runtimeScript}
+</head>`);
+    } else if (output.includes("<body"))
+      output = output.replace(/<body([^>]*)>/, `<body$1>
+${runtimeScript}`);
+    else
+      output = runtimeScript + `
+` + output;
+  }
+  {
+    const { scanScriptTags } = await importOnce("stx/signal-processing", () => import("./signal-processing.js")), serverRemoveRanges = [];
+    for (const script of scanScriptTags(output)) {
+      if (!/\bserver\b/i.test(script.attrs))
+        continue;
+      const bodyStart = script.start + script.fullMatch.indexOf(">") + 1, closeStart = findScriptBodyEnd(output, bodyStart);
+      if (closeStart === -1)
+        continue;
+      let rangeEnd = closeStart + 9;
+      while (rangeEnd < output.length && /\s/.test(output[rangeEnd]))
+        rangeEnd++;
+      serverRemoveRanges.push({ start: script.start, end: rangeEnd });
+    }
+    if (serverRemoveRanges.length > 0) {
+      const kept = Array(serverRemoveRanges.length + 1);
+      let cursor = 0;
+      for (let ri = 0;ri < serverRemoveRanges.length; ri++) {
+        const { start, end } = serverRemoveRanges[ri];
+        kept[ri] = output.slice(cursor, start);
+        cursor = end;
+      }
+      kept[serverRemoveRanges.length] = output.slice(cursor);
+      output = kept.join("");
+    }
+  }
+  const scopedResult = processScopedStyles(output, filePath);
+  if (scopedResult.hasScoped)
+    output = scopedResult.html;
+  const eventBindings = context.__stx_event_bindings || [];
+  let clientScriptsTransformed = !1;
+  const clientScriptMatches = [], hasColonDirectives = /\s:[a-z][\w.-]*\s*=/.test(output), { scanScriptTags } = await importOnce("stx/signal-processing", () => import("./signal-processing.js"));
+  for (const s of scanScriptTags(output, {
+    skipAttrs: /\bserver\b|\bsrc\s*=|\bdata-stx-scoped\b|\bdata-stx-router\b|\btype\s*=\s*["'](?!(?:text\/javascript|application\/javascript|module)["'])[^"']*["']/
+  }))
+    clientScriptMatches.push({ match: s.fullMatch, attrs: s.attrs, content: s.body });
+  for (const { match, attrs, content } of clientScriptMatches) {
+    clientScriptsTransformed = !0;
+    let processedContent = content;
+    validateClientScript(content, filePath, options.strict, context.__originalFilePath);
+    const scriptResult = await processClientScript(content, { eventBindings, attrs, hasColonDirectives, templateContent: template, filePath, projectRoot: process.cwd(), production: options.buildMode === "compile", serverData });
+    output = output.replace(match, () => scriptResult);
+  }
+  if (clientScriptsTransformed)
+    context.__stx_event_bindings = [];
+  if (!clientScriptsTransformed && context.__stxProcessingDepth === 1) {
+    const orphaned = context.__stx_event_bindings || [];
+    if (orphaned.length > 0) {
+      const script = generateRuntimeScript(orphaned);
+      if (script) {
+        const bodyIdx = output.lastIndexOf("</body>");
+        output = bodyIdx === -1 ? output + script : output.slice(0, bodyIdx) + script + `
+` + output.slice(bodyIdx);
+      }
+      context.__stx_event_bindings = [];
+    }
+  }
+  if (!pageShipsSignalsRuntime(output) && outputNeedsSignalsRuntime(output))
+    output = await injectSignalsRuntime(output, opts);
+  output = injectTooltipRuntime(output);
+  if (opts.csp?.enabled && opts.csp.useNonce && typeof context.cspNonce === "string")
+    output = addNonceToInlineContent(output, context.cspNonce);
+  return output;
+}