@stacksjs/stx 0.1.15 → 0.2.0

package/dist/src/index.js

@@ -1,3155 +0,0 @@
-// @bun
-import {
-  DEFAULT_TRANSITION_OPTIONS,
-  ErrorLogger,
-  StxError,
-  StxFileError,
-  StxRuntimeError,
-  StxSecurityError,
-  StxSyntaxError,
-  TransitionDirection,
-  TransitionEase,
-  TransitionType,
-  a11yDirective,
-  animationGroupDirective,
-  applyFilters,
-  buildWebComponents,
-  checkA11y,
-  clearOnceStore,
-  componentDirective,
-  config,
-  createDetailedErrorMessage,
-  createEnhancedError,
-  createTranslateFilter,
-  defaultConfig,
-  defaultFilters,
-  defaultI18nConfig,
-  defineStxConfig,
-  devHelpers,
-  errorLogger,
-  errorRecovery,
-  escapeHtml,
-  evaluateAuthExpression,
-  evaluateExpression,
-  extractVariables,
-  fileExists,
-  getScreenReaderOnlyStyle,
-  getSourceLineInfo,
-  getTranslation,
-  injectSeoTags,
-  loadTranslation,
-  markdownCache,
-  markdownDirectiveHandler,
-  metaDirective,
-  motionDirective,
-  onceStore,
-  partialsCache,
-  performanceMonitor,
-  processA11yDirectives,
-  processAnimationDirectives,
-  processBasicFormDirectives,
-  processCustomDirectives,
-  processDirectives,
-  processErrorDirective,
-  processExpressions,
-  processFormDirectives,
-  processFormInputDirectives,
-  processForms,
-  processIncludes,
-  processJsonDirective,
-  processLoops,
-  processMarkdownDirectives,
-  processMarkdownFileDirectives,
-  processMetaDirectives,
-  processMiddleware,
-  processOnceDirective,
-  processSeoDirective,
-  processStackPushDirectives,
-  processStackReplacements,
-  processStructuredData,
-  processTranslateDirective,
-  readMarkdownFile,
-  registerA11yDirectives,
-  registerAnimationDirectives,
-  registerComponentDirectives,
-  registerSeoDirectives,
-  renderComponent,
-  resolveTemplatePath,
-  runPostProcessingMiddleware,
-  runPreProcessingMiddleware,
-  safeExecute,
-  safeExecuteAsync,
-  scanA11yIssues,
-  screenReaderDirective,
-  scrollAnimateDirective,
-  setGlobalContext,
-  structuredDataDirective,
-  transitionDirective,
-  unescapeHtml,
-  validators,
-  webComponentDirectiveHandler
-} from "../chunk-sjb2sfg6.js";
-import"../chunk-e11q5a3p.js";
-// src/analyzer.ts
-import process from "process";
-async function analyzeTemplate(filePath) {
-  try {
-    const content = await Bun.file(filePath).text();
-    const metrics = calculateMetrics(content);
-    const issues = findIssues(content, filePath);
-    const suggestions = generateSuggestions(content, metrics);
-    const performance = analyzePerformance(content, metrics);
-    return {
-      file: filePath,
-      metrics,
-      issues,
-      suggestions,
-      performance
-    };
-  } catch (error) {
-    throw new Error(`Failed to analyze template ${filePath}: ${error instanceof Error ? error.message : String(error)}`);
-  }
-}
-function calculateMetrics(content) {
-  const lines = content.split(`
-`);
-  const scriptMatch = content.match(/<script\b[^>]*>([\s\S]*?)<\/script>/i);
-  const scriptContent = scriptMatch ? scriptMatch[1] : "";
-  const scriptLines = scriptContent.split(`
-`).length;
-  const directives = {
-    conditionals: (content.match(/@(if|unless|elseif|else|endif|endunless)\b/g) || []).length,
-    loops: (content.match(/@(foreach|for|endforeach|endfor|while|endwhile)\b/g) || []).length,
-    includes: (content.match(/@(include|component|extends|section|yield)\b/g) || []).length,
-    custom: 0,
-    total: 0
-  };
-  directives.total = directives.conditionals + directives.loops + directives.includes + directives.custom;
-  const regularExpressions = (content.match(/\{\{[\s\S]*?\}\}/g) || []).length;
-  const rawExpressions = (content.match(/\{!![\s\S]*?!!\}/g) || []).length;
-  const directiveExpressions = (content.match(/@(?:if|unless|elseif|foreach|for|while)\s*\([^)]+\)/g) || []).length;
-  const expressions = regularExpressions + rawExpressions + directiveExpressions;
-  const components = (content.match(/<[A-Z][^>]*>/g) || []).length;
-  const layouts = (content.match(/@extends\(/g) || []).length;
-  let maxNestingDepth = 0;
-  let currentDepth = 0;
-  for (const line of lines) {
-    if (/@(?:if|unless|foreach|for|while|section)\b/.test(line) && !/@end/.test(line) && !/@else/.test(line)) {
-      currentDepth++;
-      maxNestingDepth = Math.max(maxNestingDepth, currentDepth);
-    } else if (/@end(?:if|unless|foreach|for|while|section)\b/.test(line)) {
-      currentDepth--;
-    }
-  }
-  const nestingBonus = maxNestingDepth >= 4 ? 3 : 0;
-  const complexity = Math.min(10, Math.ceil(directives.total * 0.5 + expressions * 0.1 + components * 0.3 + (scriptLines > 10 ? scriptLines * 0.05 : 0) + nestingBonus));
-  return {
-    lines: lines.length,
-    characters: content.length,
-    directives,
-    expressions,
-    components,
-    layouts,
-    scriptLines,
-    complexity
-  };
-}
-function findIssues(content, _filePath) {
-  const issues = [];
-  const unmatchedIfs = findUnmatchedDirectives(content, "if", "endif");
-  if (unmatchedIfs > 0) {
-    issues.push({
-      type: "error",
-      category: "syntax",
-      message: `Found ${unmatchedIfs} unmatched @if directive(s)`,
-      suggestion: "Ensure every @if has a corresponding @endif"
-    });
-  }
-  const unmatchedForeachs = findUnmatchedDirectives(content, "foreach", "endforeach");
-  if (unmatchedForeachs > 0) {
-    issues.push({
-      type: "error",
-      category: "syntax",
-      message: `Found ${unmatchedForeachs} unmatched @foreach directive(s)`,
-      suggestion: "Ensure every @foreach has a corresponding @endforeach"
-    });
-  }
-  const nestedLoops = content.match(/@foreach[\s\S]*?@foreach[\s\S]*?@endforeach[\s\S]*?@endforeach/g);
-  if (nestedLoops && nestedLoops.length > 0) {
-    issues.push({
-      type: "warning",
-      category: "performance",
-      message: "Nested loops detected which may impact performance",
-      suggestion: "Consider preprocessing data or using more efficient data structures"
-    });
-  }
-  const rawOutputs = (content.match(/\{!![\s\S]*?!!\}/g) || []).length;
-  if (rawOutputs > 0) {
-    issues.push({
-      type: "warning",
-      category: "security",
-      message: `Found ${rawOutputs} raw output expression(s) {!! !!}`,
-      suggestion: "Ensure raw outputs are properly sanitized to prevent XSS"
-    });
-  }
-  const images = content.match(/<img[^>]*>/g);
-  if (images) {
-    const imagesWithoutAlt = images.filter((img) => !img.includes("alt="));
-    if (imagesWithoutAlt.length > 0) {
-      issues.push({
-        type: "warning",
-        category: "accessibility",
-        message: `Found ${imagesWithoutAlt.length} image(s) without alt attributes`,
-        suggestion: "Add alt attributes to all images for screen reader accessibility"
-      });
-    }
-  }
-  const longLines = content.split(`
-`).filter((line) => line.length > 120);
-  if (longLines.length > 0) {
-    issues.push({
-      type: "info",
-      category: "maintainability",
-      message: `Found ${longLines.length} line(s) longer than 120 characters`,
-      suggestion: "Consider breaking long lines for better readability"
-    });
-  }
-  const inlineStyles = (content.match(/style\s*=\s*["'][^"']*["']/g) || []).length;
-  if (inlineStyles > 3) {
-    issues.push({
-      type: "info",
-      category: "maintainability",
-      message: `Found ${inlineStyles} inline style attributes`,
-      suggestion: "Consider moving styles to CSS classes for better maintainability"
-    });
-  }
-  return issues;
-}
-function generateSuggestions(content, metrics) {
-  const suggestions = [];
-  if (metrics.complexity > 7) {
-    suggestions.push({
-      type: "refactor",
-      message: "Template complexity is high. Consider breaking into smaller components.",
-      impact: "high",
-      effort: "medium"
-    });
-  } else if (metrics.complexity > 5 && metrics.directives.total > 8) {
-    suggestions.push({
-      type: "optimization",
-      message: "Template has moderate complexity. Consider component extraction for reusability.",
-      impact: "medium",
-      effort: "low"
-    });
-  }
-  if (metrics.lines > 100 && metrics.components === 0) {
-    suggestions.push({
-      type: "refactor",
-      message: "Large template with no components. Consider extracting reusable parts into components.",
-      impact: "medium",
-      effort: "medium"
-    });
-  }
-  if (metrics.expressions > 20) {
-    suggestions.push({
-      type: "optimization",
-      message: "Many template expressions detected. Consider preprocessing some data in the script section.",
-      impact: "medium",
-      effort: "low"
-    });
-  }
-  const nestedLoops = content.match(/@foreach[\s\S]*?@foreach[\s\S]*?@endforeach[\s\S]*?@endforeach/g);
-  if (nestedLoops && nestedLoops.length > 0) {
-    suggestions.push({
-      type: "optimization",
-      message: "Nested loops detected. Consider preprocessing data or optimizing data structures.",
-      impact: "high",
-      effort: "medium"
-    });
-  }
-  if (metrics.directives.total === 0 && metrics.expressions < 5) {
-    suggestions.push({
-      type: "optimization",
-      message: "Template appears static. Consider enabling aggressive caching.",
-      impact: "high",
-      effort: "low"
-    });
-  }
-  if (metrics.scriptLines > 50) {
-    suggestions.push({
-      type: "refactor",
-      message: "Large script section. Consider moving complex logic to external modules.",
-      impact: "medium",
-      effort: "medium"
-    });
-  }
-  return suggestions;
-}
-function analyzePerformance(content, metrics) {
-  let estimatedRenderTime = 1;
-  estimatedRenderTime += metrics.directives.conditionals * 0.1;
-  estimatedRenderTime += metrics.directives.loops * 0.5;
-  estimatedRenderTime += metrics.directives.includes * 2;
-  estimatedRenderTime += metrics.expressions * 0.05;
-  estimatedRenderTime += metrics.components * 1;
-  if (metrics.scriptLines > 10) {
-    estimatedRenderTime += metrics.scriptLines * 0.1;
-  }
-  let cacheability;
-  if (metrics.expressions === 0 && metrics.directives.total === 0) {
-    cacheability = "high";
-  } else if (metrics.expressions < 5 && metrics.directives.total < 3) {
-    cacheability = "medium";
-  } else {
-    cacheability = "low";
-  }
-  const recommendations = [];
-  if (estimatedRenderTime > 10) {
-    recommendations.push("Consider optimizing template complexity");
-  }
-  if (cacheability === "low" && metrics.directives.total > 5) {
-    recommendations.push("Reduce dynamic content for better caching");
-  }
-  if (metrics.components === 0 && metrics.lines > 40) {
-    recommendations.push("Extract components to improve reusability and performance");
-  }
-  return {
-    estimatedRenderTime: Math.round(estimatedRenderTime * 100) / 100,
-    complexityScore: metrics.complexity,
-    cacheability,
-    recommendations
-  };
-}
-function findUnmatchedDirectives(content, startDirective, endDirective) {
-  const contentWithoutComments = content.replace(/<!--[\s\S]*?-->/g, "");
-  const starts = (contentWithoutComments.match(new RegExp(`@${startDirective}\\b`, "g")) || []).length;
-  const ends = (contentWithoutComments.match(new RegExp(`@${endDirective}\\b`, "g")) || []).length;
-  return Math.abs(starts - ends);
-}
-async function analyzeProject(patterns = ["**/*.stx"], cwd) {
-  const results = [];
-  const allFiles = [];
-  for (const pattern of patterns) {
-    const files = await Array.fromAsync(new Bun.Glob(pattern).scan({
-      cwd: cwd || process.cwd(),
-      onlyFiles: true,
-      absolute: true
-    }));
-    allFiles.push(...files.filter((f) => f.endsWith(".stx")));
-  }
-  for (const file of allFiles) {
-    try {
-      const result = await analyzeTemplate(file);
-      results.push(result);
-    } catch (error) {
-      console.warn(`Failed to analyze ${file}:`, error);
-    }
-  }
-  const summary = generateProjectSummary(results);
-  return { results, summary };
-}
-function generateProjectSummary(results) {
-  const totalFiles = results.length;
-  const totalLines = results.reduce((sum, r) => sum + r.metrics.lines, 0);
-  const avgComplexity = totalFiles > 0 ? results.reduce((sum, r) => sum + r.metrics.complexity, 0) / totalFiles : 0;
-  const totalIssues = results.reduce((sum, r) => sum + r.issues.length, 0);
-  const issuesByCategory = {};
-  results.forEach((r) => {
-    r.issues.forEach((issue) => {
-      issuesByCategory[issue.category] = (issuesByCategory[issue.category] || 0) + 1;
-    });
-  });
-  const avgRenderTime = totalFiles > 0 ? results.reduce((sum, r) => sum + r.performance.estimatedRenderTime, 0) / totalFiles : 0;
-  const performanceScore = Math.max(1, Math.min(10, Math.round(10 - avgRenderTime / 2 - avgComplexity / 2)));
-  const recommendations = [];
-  if (avgComplexity > 6) {
-    recommendations.push("Project has high average complexity. Consider refactoring complex templates.");
-  }
-  if (totalIssues > totalFiles * 2) {
-    recommendations.push("High number of issues detected. Run detailed analysis on individual files.");
-  }
-  if (issuesByCategory.security > 0) {
-    recommendations.push("Security issues found. Review raw output usage and input sanitization.");
-  }
-  return {
-    totalFiles,
-    totalLines,
-    avgComplexity: Math.round(avgComplexity * 100) / 100,
-    totalIssues,
-    issuesByCategory,
-    performanceScore,
-    recommendations
-  };
-}
-// src/caching.ts
-import fs from "fs";
-import path from "path";
-var templateCache = new Map;
-async function checkCache(filePath, options) {
-  try {
-    const cachePath = path.resolve(options.cachePath);
-    const cacheFile = path.join(cachePath, `${hashFilePath(filePath)}.html`);
-    const metaFile = path.join(cachePath, `${hashFilePath(filePath)}.meta.json`);
-    if (!await fileExists(cacheFile) || !await fileExists(metaFile))
-      return null;
-    const metaContent = await Bun.file(metaFile).text();
-    const meta = JSON.parse(metaContent);
-    if (meta.cacheVersion !== options.cacheVersion)
-      return null;
-    const stats = await fs.promises.stat(filePath);
-    if (stats.mtime.getTime() > meta.mtime)
-      return null;
-    for (const dep of meta.dependencies) {
-      if (await fileExists(dep)) {
-        const depStats = await fs.promises.stat(dep);
-        if (depStats.mtime.getTime() > meta.mtime)
-          return null;
-      } else {
-        return null;
-      }
-    }
-    return await Bun.file(cacheFile).text();
-  } catch (err) {
-    console.warn(`Cache error for ${filePath}:`, err);
-    return null;
-  }
-}
-async function cacheTemplate(filePath, output, dependencies, options) {
-  try {
-    const cachePath = path.resolve(options.cachePath);
-    await fs.promises.mkdir(cachePath, { recursive: true });
-    const cacheFile = path.join(cachePath, `${hashFilePath(filePath)}.html`);
-    const metaFile = path.join(cachePath, `${hashFilePath(filePath)}.meta.json`);
-    const stats = await fs.promises.stat(filePath);
-    await Bun.write(cacheFile, output);
-    const meta = {
-      sourcePath: filePath,
-      mtime: stats.mtime.getTime(),
-      dependencies: Array.from(dependencies),
-      cacheVersion: options.cacheVersion,
-      generatedAt: Date.now()
-    };
-    await Bun.write(metaFile, JSON.stringify(meta, null, 2));
-    templateCache.set(filePath, {
-      output,
-      mtime: stats.mtime.getTime(),
-      dependencies
-    });
-  } catch (err) {
-    console.warn(`Failed to cache template ${filePath}:`, err);
-  }
-}
-function hashFilePath(filePath) {
-  const hash = new Bun.CryptoHasher("sha1").update(filePath).digest("hex");
-  return hash.substring(0, 16);
-}
-// src/dev-server.ts
-var {serve } = globalThis.Bun;
-import fs2 from "fs";
-import path3 from "path";
-import process2 from "process";
-
-// src/plugin.ts
-import path2 from "path";
-var plugin = {
-  name: "bun-plugin-stx",
-  async setup(build) {
-    const options = {
-      ...config,
-      ...build.config?.stx
-    };
-    const allDependencies = new Set;
-    const webComponentsPath = options.webComponents?.enabled ? `./${path2.relative(path2.dirname(build.config?.outdir || "dist"), options.webComponents.outputDir || "dist/web-components")}` : "/web-components";
-    const builtComponents = [];
-    if (options.webComponents?.enabled) {
-      try {
-        const components = await buildWebComponents(options, allDependencies);
-        builtComponents.push(...components);
-        if (options.debug && components.length > 0) {
-          console.log(`Successfully built ${components.length} web components`);
-        }
-      } catch (error) {
-        console.error("Failed to build web components:", error);
-      }
-    }
-    build.onLoad({ filter: /\.stx$/ }, async ({ path: filePath }) => {
-      try {
-        const dependencies = new Set;
-        if (options.cache && options.cachePath) {
-          const cachedOutput = await checkCache(filePath, options);
-          if (cachedOutput) {
-            if (options.debug) {
-              console.log(`Using cached version of ${filePath}`);
-            }
-            return {
-              contents: cachedOutput,
-              loader: "html"
-            };
-          }
-        }
-        const content = await safeExecuteAsync(() => Bun.file(filePath).text(), "", (error) => {
-          throw new StxFileError(`Failed to read stx file: ${filePath}`, filePath, undefined, undefined, `File read error: ${error.message}`);
-        });
-        if (!content) {
-          throw new StxFileError(`stx file is empty: ${filePath}`, filePath);
-        }
-        const { scriptContent, templateContent } = performanceMonitor.time("script-extraction", () => {
-          const scriptMatch = content.match(/<script\b[^>]*>([\s\S]*?)<\/script>/i);
-          const scriptContent2 = scriptMatch ? scriptMatch[1] : "";
-          const templateContent2 = content.replace(/<script\b[^>]*>[\s\S]*?<\/script>/i, "");
-          return { scriptContent: scriptContent2, templateContent: templateContent2 };
-        });
-        const context = {
-          __filename: filePath,
-          __dirname: path2.dirname(filePath),
-          __stx: {
-            webComponentsPath,
-            builtComponents
-          }
-        };
-        await safeExecuteAsync(() => extractVariables(scriptContent, context, filePath), undefined, (error) => {
-          const scriptError = new StxRuntimeError(`Script execution failed in ${filePath}: ${error.message}`, filePath, undefined, undefined, scriptContent.substring(0, 100));
-          errorLogger.log(scriptError, { filePath, scriptContent });
-          if (options.debug) {
-            throw scriptError;
-          }
-        });
-        const output = await performanceMonitor.timeAsync("directive-processing", async () => {
-          return await processDirectives(templateContent, context, filePath, options, dependencies);
-        });
-        dependencies.forEach((dep) => allDependencies.add(dep));
-        if (options.cache && options.cachePath) {
-          await cacheTemplate(filePath, output, dependencies, options);
-          if (options.debug) {
-            console.log(`Cached template ${filePath} with ${dependencies.size} dependencies`);
-          }
-        }
-        return {
-          contents: output,
-          loader: "html"
-        };
-      } catch (error) {
-        const enhancedError = error instanceof Error ? error : new StxRuntimeError(`Plugin processing failed: ${String(error)}`, filePath);
-        errorLogger.log(enhancedError, { filePath, buildConfig: build.config });
-        devHelpers.logDetailedError(enhancedError, { filePath, plugin: "bun-plugin-stx" });
-        if (options.debug) {
-          console.error("stx Plugin Error:", enhancedError);
-        }
-        const stxError = enhancedError;
-        const errorLine = stxError.line || null;
-        const errorContext = stxError.context || null;
-        const errorHtml = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>stx Rendering Error</title>
-  <style>
-    body { font-family: system-ui, -apple-system, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; line-height: 1.6; }
-    .error-header { color: #dc3545; border-left: 4px solid #dc3545; padding-left: 16px; margin-bottom: 24px; }
-    .error-details { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px; margin: 16px 0; }
-    .error-code { background: #2d3748; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow-x: auto; font-family: 'Monaco', 'Menlo', monospace; font-size: 14px; }
-    .help-section { background: #e3f2fd; border-left: 4px solid #2196f3; padding: 16px; margin-top: 24px; }
-    .file-path { font-family: monospace; background: #f1f3f4; padding: 2px 6px; border-radius: 4px; }
-  </style>
-</head>
-<body>
-  <div class="error-header">
-    <h1>stx Template Error</h1>
-    <p>An error occurred while processing your stx template.</p>
-  </div>
-
-  <div class="error-details">
-    <h3>Error Details</h3>
-    <p><strong>File:</strong> <span class="file-path">${filePath}</span></p>
-    <p><strong>Error:</strong> ${enhancedError.message}</p>
-    ${errorLine ? `<p><strong>Line:</strong> ${errorLine}</p>` : ""}
-    ${errorContext ? `<p><strong>Context:</strong> ${errorContext}</p>` : ""}
-  </div>
-
-  ${enhancedError.stack ? `
-  <div class="error-details">
-    <h3>Stack Trace</h3>
-    <pre class="error-code">${enhancedError.stack}</pre>
-  </div>` : ""}
-
-  <div class="help-section">
-    <h3>\uD83D\uDCA1 Troubleshooting Tips</h3>
-    <ul>
-      <li>Check the syntax of your stx directives (e.g., @if, @foreach)</li>
-      <li>Verify that all variables used in the template are properly defined</li>
-      <li>Ensure script tags have valid JavaScript/TypeScript syntax</li>
-      <li>Run <code>stx debug ${path2.basename(filePath)}</code> for detailed analysis</li>
-      <li>Enable debug mode in your stx config for more detailed error messages</li>
-    </ul>
-  </div>
-</body>
-</html>`;
-        return {
-          contents: errorHtml,
-          loader: "html"
-        };
-      }
-    });
-  }
-};
-
-// src/dev-server.ts
-async function findAvailablePort(startPort, maxAttempts = 10) {
-  for (let i = 0;i < maxAttempts; i++) {
-    const port = startPort + i;
-    try {
-      const testServer = serve({
-        port,
-        fetch: () => new Response("test")
-      });
-      testServer.stop();
-      return port;
-    } catch (error) {
-      if (error.code === "EADDRINUSE") {
-        continue;
-      }
-      throw error;
-    }
-  }
-  throw new Error(`Could not find an available port between ${startPort} and ${startPort + maxAttempts - 1}`);
-}
-var colors = {
-  reset: "\x1B[0m",
-  bright: "\x1B[1m",
-  dim: "\x1B[2m",
-  underscore: "\x1B[4m",
-  blink: "\x1B[5m",
-  reverse: "\x1B[7m",
-  hidden: "\x1B[8m",
-  black: "\x1B[30m",
-  red: "\x1B[31m",
-  green: "\x1B[32m",
-  yellow: "\x1B[33m",
-  blue: "\x1B[34m",
-  magenta: "\x1B[35m",
-  cyan: "\x1B[36m",
-  white: "\x1B[37m",
-  gray: "\x1B[90m",
-  bgBlack: "\x1B[40m",
-  bgRed: "\x1B[41m",
-  bgGreen: "\x1B[42m",
-  bgYellow: "\x1B[43m",
-  bgBlue: "\x1B[44m",
-  bgMagenta: "\x1B[45m",
-  bgCyan: "\x1B[46m",
-  bgWhite: "\x1B[47m",
-  bgGray: "\x1B[100m"
-};
-function setupKeyboardShortcuts(serverUrl, stopServer) {
-  if (process2.stdin.isTTY) {
-    process2.stdin.setRawMode(true);
-    process2.stdin.setEncoding("utf8");
-    process2.stdin.resume();
-    console.log(`
-Keyboard shortcuts:`);
-    console.log(`  ${colors.cyan}o${colors.reset} + Enter - Open in browser`);
-    console.log(`  ${colors.cyan}c${colors.reset} + Enter - Clear console`);
-    console.log(`  ${colors.cyan}q${colors.reset} + Enter (or ${colors.cyan}Ctrl+C${colors.reset}) - Quit server`);
-    let buffer = "";
-    process2.stdin.on("data", (key) => {
-      if (key === "\x03") {
-        stopServer();
-        process2.exit(0);
-      }
-      buffer += key;
-      if (buffer.endsWith("\r") || buffer.endsWith(`
-`)) {
-        const cmd = buffer.trim().toLowerCase();
-        buffer = "";
-        if (cmd === "o") {
-          console.log(`${colors.dim}Opening ${colors.cyan}${serverUrl}${colors.dim} in your browser...${colors.reset}`);
-          Bun.spawn(["open", serverUrl], { stderr: "inherit" });
-        } else if (cmd === "c") {
-          console.clear();
-          console.log(`${colors.green}Server running at ${colors.cyan}${serverUrl}${colors.reset}`);
-          console.log(`Press ${colors.cyan}Ctrl+C${colors.reset} to stop the server`);
-          console.log(`
-Keyboard shortcuts:`);
-          console.log(`  ${colors.cyan}o${colors.reset} + Enter - Open in browser`);
-          console.log(`  ${colors.cyan}c${colors.reset} + Enter - Clear console`);
-          console.log(`  ${colors.cyan}q${colors.reset} + Enter (or ${colors.cyan}Ctrl+C${colors.reset}) - Quit server`);
-        } else if (cmd === "q") {
-          console.log(`${colors.yellow}Stopping server...${colors.reset}`);
-          stopServer();
-          process2.exit(0);
-        } else if (cmd === "h") {
-          console.log(`
-Keyboard Shortcuts:`);
-          console.log(`  ${colors.cyan}o${colors.reset} + Enter - Open in browser`);
-          console.log(`  ${colors.cyan}c${colors.reset} + Enter - Clear console`);
-          console.log(`  ${colors.cyan}q${colors.reset} + Enter (or ${colors.cyan}Ctrl+C${colors.reset}) - Quit server`);
-          console.log(`  ${colors.cyan}h${colors.reset} + Enter - Show this help`);
-        }
-      }
-    });
-  }
-}
-async function serveMarkdownFile(filePath, options = {}) {
-  const port = options.port || 3000;
-  const watch = options.watch !== false;
-  const absolutePath = path3.resolve(filePath);
-  if (!fs2.existsSync(absolutePath)) {
-    console.error(`${colors.red}Error: File not found: ${colors.bright}${absolutePath}${colors.reset}`);
-    return false;
-  }
-  if (!absolutePath.endsWith(".md")) {
-    console.error(`${colors.red}Error: File must have .md extension: ${colors.bright}${absolutePath}${colors.reset}`);
-    return false;
-  }
-  console.log(`${colors.blue}Processing${colors.reset} ${colors.bright}${filePath}${colors.reset}...`);
-  let htmlContent = null;
-  const processFile = async () => {
-    try {
-      const { content, data } = await readMarkdownFile(absolutePath, {
-        markdown: {
-          syntaxHighlighting: {
-            serverSide: true,
-            enabled: true,
-            defaultTheme: config.markdown?.syntaxHighlighting?.defaultTheme || "github-dark",
-            highlightUnknownLanguages: true
-          }
-        }
-      });
-      const markdownConfig = options.markdown?.syntaxHighlighting || config.markdown?.syntaxHighlighting;
-      const defaultTheme = markdownConfig?.defaultTheme || "github-dark";
-      const baseThemes = ["github-dark"];
-      const configThemes = markdownConfig?.additionalThemes || [];
-      const availableThemes = [...new Set([...baseThemes, ...configThemes])];
-      const themeOptions = availableThemes.map((theme) => `<option value="${theme}"${theme === defaultTheme ? " selected" : ""}>${theme}</option>`).join(`
-      `);
-      htmlContent = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${data.title || path3.basename(absolutePath)}</title>
-  <!-- Syntax highlighting styles -->
-  <style id="syntax-theme">
-    :root {
-      --shiki-color-text: #24292e;
-      --shiki-color-background: #ffffff;
-      --shiki-token-constant: #005cc5;
-      --shiki-token-string: #032f62;
-      --shiki-token-comment: #6a737d;
-      --shiki-token-keyword: #d73a49;
-      --shiki-token-parameter: #24292e;
-      --shiki-token-function: #6f42c1;
-      --shiki-token-string-expression: #032f62;
-      --shiki-token-punctuation: #24292e;
-      --shiki-token-link: #032f62;
-    }
-    pre {
-      background-color: var(--shiki-color-background);
-      padding: 1rem;
-      border-radius: 4px;
-    }
-    code {
-      color: var(--shiki-color-text);
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    }
-    .dark-mode {
-      --shiki-color-text: #e1e4e8;
-      --shiki-color-background: #24292e;
-      --shiki-token-constant: #79b8ff;
-      --shiki-token-string: #9ecbff;
-      --shiki-token-comment: #6a737d;
-      --shiki-token-keyword: #f97583;
-      --shiki-token-parameter: #e1e4e8;
-      --shiki-token-function: #b392f0;
-      --shiki-token-string-expression: #9ecbff;
-      --shiki-token-punctuation: #e1e4e8;
-      --shiki-token-link: #9ecbff;
-    }
-  </style>
-  <style>
-    body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-      line-height: 1.6;
-      color: #333;
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-    pre, code {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    }
-    pre {
-      border-radius: 4px;
-      padding: 0;
-      margin: 1.5rem 0;
-      overflow-x: auto;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    }
-    pre code {
-      display: block;
-      padding: 1rem;
-      overflow-x: auto;
-    }
-    /* Apply background color to code blocks based on theme */
-    pre.syntax-highlighter {
-      background-color: var(--shiki-color-background) !important;
-    }
-    .dark-mode pre.syntax-highlighter {
-      background-color: var(--shiki-color-background) !important;
-    }
-    code {
-      padding: 0.2rem 0.4rem;
-      border-radius: 3px;
-    }
-    h1, h2, h3, h4 {
-      margin-top: 2rem;
-      margin-bottom: 1rem;
-    }
-    h1 { color: #111; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
-    h2 { color: #333; border-bottom: 1px solid #f0f0f0; padding-bottom: 0.3rem; }
-    h3 { color: #444; }
-    img {
-      max-width: 100%;
-      border-radius: 4px;
-      margin: 1rem 0;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-    blockquote {
-      border-left: 4px solid #ddd;
-      padding-left: 1rem;
-      margin-left: 0;
-      color: #555;
-      background: #f9f9f9;
-      padding: 0.5rem 1rem;
-      margin: 1.5rem 0;
-    }
-    table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 1.5rem 0;
-    }
-    th, td {
-      border: 1px solid #ddd;
-      padding: 0.5rem;
-    }
-    th {
-      background: #f0f0f0;
-      text-align: left;
-    }
-    tr:nth-child(even) {
-      background-color: #f8f8f8;
-    }
-    a {
-      color: #0066cc;
-      text-decoration: none;
-    }
-    a:hover {
-      text-decoration: underline;
-    }
-    hr {
-      border: 0;
-      border-top: 1px solid #eee;
-      margin: 2rem 0;
-    }
-    .frontmatter {
-      background: #f8f8f8;
-      border-radius: 4px;
-      padding: 1.5rem;
-      margin-bottom: 2rem;
-      font-size: 0.9rem;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      border-left: 4px solid #ddd;
-    }
-    .frontmatter-item {
-      margin-bottom: 0.5rem;
-      display: flex;
-    }
-    .frontmatter-label {
-      font-weight: bold;
-      min-width: 100px;
-      color: #555;
-    }
-    /* Theme selector for code blocks */
-    .theme-selector {
-      margin: 1rem 0;
-      padding: 0.5rem;
-      background: #f8f8f8;
-      border-radius: 4px;
-      text-align: right;
-    }
-    select {
-      padding: 0.25rem 0.5rem;
-      border-radius: 3px;
-      border: 1px solid #ddd;
-    }
-
-    /* Dark mode body styles */
-    body.dark-mode {
-      background-color: #121212;
-      color: #e1e4e8;
-    }
-
-    body.dark-mode h1,
-    body.dark-mode h2,
-    body.dark-mode h3 {
-      color: #e1e4e8;
-      border-color: #2f363d;
-    }
-
-    body.dark-mode .theme-selector {
-      background: #2f363d;
-      color: #e1e4e8;
-    }
-
-    body.dark-mode select {
-      background: #24292e;
-      color: #e1e4e8;
-      border-color: #444;
-    }
-
-    body.dark-mode blockquote {
-      background: #24292e;
-      color: #e1e4e8;
-    }
-
-    body.dark-mode .frontmatter {
-      background: #24292e;
-    }
-
-    body.dark-mode a {
-      color: #58a6ff;
-    }
-  </style>
-</head>
-<body>
-  ${Object.keys(data).length > 0 ? `
-  <div class="frontmatter">
-    <h3>Frontmatter</h3>
-    ${Object.entries(data).map(([key, value]) => `
-    <div class="frontmatter-item">
-      <span class="frontmatter-label">${key}:</span>
-      <span>${Array.isArray(value) ? value.join(", ") : value}</span>
-    </div>`).join("")}
-  </div>
-  ` : ""}
-
-  <div class="theme-selector">
-    Theme:
-    <select id="themeSelector" onchange="changeTheme()">
-      ${themeOptions}
-    </select>
-  </div>
-
-  ${content}
-
-  <script>
-    function changeTheme() {
-      const theme = document.getElementById('themeSelector').value;
-
-      // Toggle dark mode class based on theme
-      if (theme.includes('dark') || theme.includes('night') || theme.includes('monokai') ||
-          theme.includes('dracula') || theme.includes('nord') || theme.includes('material')) {
-        document.body.classList.add('dark-mode');
-      } else {
-        document.body.classList.remove('dark-mode');
-      }
-    }
-
-    // Initialize theme on page load
-    document.addEventListener('DOMContentLoaded', function() {
-      changeTheme();
-    });
-  </script>
-</body>
-</html>
-      `;
-      return true;
-    } catch (error) {
-      console.error(`${colors.red}Error processing Markdown file:${colors.reset}`, error);
-      return false;
-    }
-  };
-  const processSuccess = await processFile();
-  if (!processSuccess) {
-    return false;
-  }
-  let actualPort = port;
-  try {
-    actualPort = await findAvailablePort(port);
-    if (actualPort !== port) {
-      console.log(`${colors.yellow}Port ${port} is busy, using port ${actualPort} instead${colors.reset}`);
-    }
-  } catch {
-    console.error(`${colors.red}Could not find an available port${colors.reset}`);
-    return false;
-  }
-  console.log(`${colors.blue}Starting server on ${colors.cyan}http://localhost:${actualPort}/${colors.reset}...`);
-  const server = serve({
-    port: actualPort,
-    fetch(request) {
-      const url = new URL(request.url);
-      if (url.pathname === "/") {
-        return new Response(htmlContent, {
-          headers: {
-            "Content-Type": "text/html"
-          }
-        });
-      }
-      return new Response("Not Found", { status: 404 });
-    },
-    error(error) {
-      return new Response(`<pre>${error}
-${error.stack}</pre>`, {
-        headers: {
-          "Content-Type": "text/html"
-        }
-      });
-    }
-  });
-  console.clear();
-  console.log(`
-${colors.blue}stx${colors.reset}  ${colors.green}${process2.env.stx_VERSION || "v0.0.10"}${colors.reset}  ${colors.dim}ready in  ${Math.random() * 10 + 5 | 0}.${Math.random() * 90 + 10 | 0}  ms${colors.reset}`);
-  console.log(`
-${colors.bright}\u2192  ${colors.cyan}http://localhost:${port}/${colors.reset}`);
-  console.log(`
-${colors.yellow}Routes:${colors.reset}`);
-  const relativeFilePath = path3.relative(process2.cwd(), absolutePath);
-  console.log(`  ${colors.green}\u2514\u2500 /${colors.reset} \u2192 ${colors.bright}${relativeFilePath}${colors.reset}`);
-  console.log(`
-Press ${colors.cyan}h${colors.reset} + ${colors.cyan}Enter${colors.reset} to show shortcuts`);
-  setupKeyboardShortcuts(server.url.toString(), () => {
-    if (watch) {
-      const watcher = fs2.watch(path3.dirname(absolutePath), { recursive: true });
-      watcher.close();
-    }
-    server.stop();
-  });
-  if (watch) {
-    const dirToWatch = path3.dirname(absolutePath);
-    console.log(`${colors.blue}Watching ${colors.bright}${dirToWatch}${colors.reset} for changes...`);
-    const watcher = fs2.watch(dirToWatch, { recursive: true }, async (eventType, filename) => {
-      if (filename && filename.endsWith(".md")) {
-        console.log(`${colors.yellow}File ${colors.bright}${filename}${colors.yellow} changed, reprocessing...${colors.reset}`);
-        await processFile();
-      }
-    });
-    process2.on("SIGINT", () => {
-      watcher.close();
-      server.stop();
-      process2.exit(0);
-    });
-  }
-  return true;
-}
-async function serveStxFile(filePath, options = {}) {
-  const port = options.port || 3000;
-  const watch = options.watch !== false;
-  const absolutePath = path3.resolve(filePath);
-  if (!fs2.existsSync(absolutePath)) {
-    console.error(`${colors.red}Error: File not found: ${colors.bright}${absolutePath}${colors.reset}`);
-    return false;
-  }
-  if (absolutePath.endsWith(".md")) {
-    return serveMarkdownFile(absolutePath, options);
-  } else if (!absolutePath.endsWith(".stx")) {
-    console.error(`${colors.red}Error: Unsupported file type: ${colors.bright}${absolutePath}${colors.reset}. Only .stx and .md files are supported.`);
-    return false;
-  }
-  const outputDir = path3.join(process2.cwd(), ".stx-output");
-  fs2.mkdirSync(outputDir, { recursive: true });
-  console.log(`${colors.blue}Building ${colors.bright}${filePath}${colors.reset}...`);
-  let htmlContent = null;
-  const buildFile = async () => {
-    try {
-      const result = await Bun.build({
-        entrypoints: [absolutePath],
-        outdir: outputDir,
-        plugins: [plugin],
-        define: {
-          "process.env.NODE_ENV": '"development"'
-        },
-        ...options.stxOptions
-      });
-      if (!result.success) {
-        console.error(`${colors.red}Build failed:${colors.reset}`, result.logs);
-        return false;
-      }
-      const htmlOutput = result.outputs.find((o) => o.path.endsWith(".html"));
-      if (!htmlOutput) {
-        console.error(`${colors.red}No HTML output found${colors.reset}`);
-        return false;
-      }
-      const html = await Bun.file(htmlOutput.path).text();
-      htmlContent = html;
-      return true;
-    } catch (error) {
-      console.error(`${colors.red}Error building stx file:${colors.reset}`, error);
-      return false;
-    }
-  };
-  const buildSuccess = await buildFile();
-  if (!buildSuccess) {
-    return false;
-  }
-  let actualPort = port;
-  try {
-    actualPort = await findAvailablePort(port);
-    if (actualPort !== port) {
-      console.log(`${colors.yellow}Port ${port} is busy, using port ${actualPort} instead${colors.reset}`);
-    }
-  } catch {
-    console.error(`${colors.red}Could not find an available port${colors.reset}`);
-    return false;
-  }
-  console.log(`${colors.blue}Starting server on ${colors.cyan}http://localhost:${actualPort}/${colors.reset}...`);
-  const server = serve({
-    port: actualPort,
-    fetch(request) {
-      const url = new URL(request.url);
-      if (url.pathname === "/") {
-        return new Response(htmlContent, {
-          headers: {
-            "Content-Type": "text/html"
-          }
-        });
-      }
-      const requestedPath = path3.join(outputDir, url.pathname);
-      if (fs2.existsSync(requestedPath) && fs2.statSync(requestedPath).isFile()) {
-        const file = Bun.file(requestedPath);
-        const ext = path3.extname(requestedPath).toLowerCase();
-        let contentType = "text/plain";
-        switch (ext) {
-          case ".html":
-            contentType = "text/html";
-            break;
-          case ".css":
-            contentType = "text/css";
-            break;
-          case ".js":
-            contentType = "text/javascript";
-            break;
-          case ".json":
-            contentType = "application/json";
-            break;
-          case ".png":
-            contentType = "image/png";
-            break;
-          case ".jpg":
-          case ".jpeg":
-            contentType = "image/jpeg";
-            break;
-          case ".gif":
-            contentType = "image/gif";
-            break;
-        }
-        return new Response(file, {
-          headers: { "Content-Type": contentType }
-        });
-      }
-      return new Response("Not Found", { status: 404 });
-    },
-    error(error) {
-      return new Response(`<pre>${error}
-${error.stack}</pre>`, {
-        headers: {
-          "Content-Type": "text/html"
-        }
-      });
-    }
-  });
-  console.clear();
-  console.log(`
-${colors.blue}stx${colors.reset}  ${colors.green}${process2.env.stx_VERSION || "v0.0.10"}${colors.reset}  ${colors.dim}ready in  ${Math.random() * 10 + 5 | 0}.${Math.random() * 90 + 10 | 0}  ms${colors.reset}`);
-  console.log(`
-${colors.bright}\u2192  ${colors.cyan}http://localhost:${port}/${colors.reset}`);
-  console.log(`
-${colors.yellow}Routes:${colors.reset}`);
-  const relativeFilePath = path3.relative(process2.cwd(), absolutePath);
-  console.log(`  ${colors.green}\u2514\u2500 /${colors.reset} \u2192 ${colors.bright}${relativeFilePath}${colors.reset}`);
-  console.log(`
-Press ${colors.cyan}h${colors.reset} + ${colors.cyan}Enter${colors.reset} to show shortcuts`);
-  setupKeyboardShortcuts(server.url.toString(), () => {
-    if (watch) {
-      const watcher = fs2.watch(path3.dirname(absolutePath), { recursive: true });
-      watcher.close();
-    }
-    server.stop();
-  });
-  if (watch) {
-    const dirToWatch = path3.dirname(absolutePath);
-    console.log(`${colors.blue}Watching ${colors.bright}${dirToWatch}${colors.reset} for changes...`);
-    const watcher = fs2.watch(dirToWatch, { recursive: true }, async (eventType, filename) => {
-      if (filename && (filename.endsWith(".stx") || filename.endsWith(".js") || filename.endsWith(".ts"))) {
-        console.log(`${colors.yellow}File ${colors.bright}${filename}${colors.yellow} changed, rebuilding...${colors.reset}`);
-        await buildFile();
-      }
-    });
-    process2.on("SIGINT", () => {
-      watcher.close();
-      server.stop();
-      process2.exit(0);
-    });
-  }
-  return true;
-}
-async function serveMultipleStxFiles(filePaths, options = {}) {
-  const port = options.port || 3000;
-  const watch = options.watch !== false;
-  for (const filePath of filePaths) {
-    const absolutePath = path3.resolve(filePath);
-    if (!fs2.existsSync(absolutePath)) {
-      console.error(`${colors.red}Error: File not found: ${colors.bright}${absolutePath}${colors.reset}`);
-      return false;
-    }
-    if (!absolutePath.endsWith(".stx") && !absolutePath.endsWith(".md")) {
-      console.error(`${colors.red}Error: Unsupported file type: ${colors.bright}${absolutePath}${colors.reset}. Only .stx and .md files are supported.`);
-      return false;
-    }
-  }
-  const outputDir = path3.join(process2.cwd(), ".stx-output");
-  fs2.mkdirSync(outputDir, { recursive: true });
-  const commonDir = findCommonDir(filePaths.map((f) => path3.dirname(path3.resolve(f))));
-  console.log(`${colors.blue}Processing ${colors.bright}${filePaths.length}${colors.reset} files...`);
-  const routes = {};
-  const buildFiles = async () => {
-    try {
-      for (const filePath of filePaths) {
-        const absolutePath = path3.resolve(filePath);
-        const isMarkdown = absolutePath.endsWith(".md");
-        if (isMarkdown) {
-          try {
-            const { content, data } = await readMarkdownFile(absolutePath, {
-              markdown: {
-                syntaxHighlighting: {
-                  serverSide: true,
-                  enabled: true,
-                  defaultTheme: config.markdown?.syntaxHighlighting?.defaultTheme || "github-dark",
-                  highlightUnknownLanguages: true
-                }
-              }
-            });
-            const markdownConfig = options.markdown?.syntaxHighlighting || config.markdown?.syntaxHighlighting;
-            const defaultTheme = markdownConfig?.defaultTheme || "github-dark";
-            const baseThemes = ["github-dark"];
-            const configThemes = markdownConfig?.additionalThemes || [];
-            const availableThemes = [...new Set([...baseThemes, ...configThemes])];
-            const themeOptions = availableThemes.map((theme) => `<option value="${theme}"${theme === defaultTheme ? " selected" : ""}>${theme}</option>`).join(`
-      `);
-            const htmlContent = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${data.title || path3.basename(absolutePath)}</title>
-  <!-- Syntax highlighting styles -->
-  <style id="syntax-theme">
-    :root {
-      --shiki-color-text: #24292e;
-      --shiki-color-background: #ffffff;
-      --shiki-token-constant: #005cc5;
-      --shiki-token-string: #032f62;
-      --shiki-token-comment: #6a737d;
-      --shiki-token-keyword: #d73a49;
-      --shiki-token-parameter: #24292e;
-      --shiki-token-function: #6f42c1;
-      --shiki-token-string-expression: #032f62;
-      --shiki-token-punctuation: #24292e;
-      --shiki-token-link: #032f62;
-    }
-    pre {
-      background-color: var(--shiki-color-background);
-      padding: 1rem;
-      border-radius: 4px;
-    }
-    code {
-      color: var(--shiki-color-text);
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    }
-    .dark-mode {
-      --shiki-color-text: #e1e4e8;
-      --shiki-color-background: #24292e;
-      --shiki-token-constant: #79b8ff;
-      --shiki-token-string: #9ecbff;
-      --shiki-token-comment: #6a737d;
-      --shiki-token-keyword: #f97583;
-      --shiki-token-parameter: #e1e4e8;
-      --shiki-token-function: #b392f0;
-      --shiki-token-string-expression: #9ecbff;
-      --shiki-token-punctuation: #e1e4e8;
-      --shiki-token-link: #9ecbff;
-    }
-  </style>
-  <style>
-    body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-      line-height: 1.6;
-      color: #333;
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-    pre, code {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    }
-    pre {
-      border-radius: 4px;
-      padding: 0;
-      margin: 1.5rem 0;
-      overflow-x: auto;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    }
-    pre code {
-      display: block;
-      padding: 1rem;
-      overflow-x: auto;
-    }
-    /* Apply background color to code blocks based on theme */
-    pre.syntax-highlighter {
-      background-color: var(--shiki-color-background) !important;
-    }
-    .dark-mode pre.syntax-highlighter {
-      background-color: var(--shiki-color-background) !important;
-    }
-    code {
-      padding: 0.2rem 0.4rem;
-      border-radius: 3px;
-    }
-    h1, h2, h3, h4 {
-      margin-top: 2rem;
-      margin-bottom: 1rem;
-    }
-    h1 { color: #111; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
-    h2 { color: #333; border-bottom: 1px solid #f0f0f0; padding-bottom: 0.3rem; }
-    h3 { color: #444; }
-    img {
-      max-width: 100%;
-      border-radius: 4px;
-      margin: 1rem 0;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-    blockquote {
-      border-left: 4px solid #ddd;
-      padding-left: 1rem;
-      margin-left: 0;
-      color: #555;
-      background: #f9f9f9;
-      padding: 0.5rem 1rem;
-      margin: 1.5rem 0;
-    }
-    table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 1.5rem 0;
-    }
-    th, td {
-      border: 1px solid #ddd;
-      padding: 0.5rem;
-    }
-    th {
-      background: #f0f0f0;
-      text-align: left;
-    }
-    tr:nth-child(even) {
-      background-color: #f8f8f8;
-    }
-    a {
-      color: #0066cc;
-      text-decoration: none;
-    }
-    a:hover {
-      text-decoration: underline;
-    }
-    hr {
-      border: 0;
-      border-top: 1px solid #eee;
-      margin: 2rem 0;
-    }
-    .frontmatter {
-      background: #f8f8f8;
-      border-radius: 4px;
-      padding: 1.5rem;
-      margin-bottom: 2rem;
-      font-size: 0.9rem;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      border-left: 4px solid #ddd;
-    }
-    .frontmatter-item {
-      margin-bottom: 0.5rem;
-      display: flex;
-    }
-    .frontmatter-label {
-      font-weight: bold;
-      min-width: 100px;
-      color: #555;
-    }
-    /* Theme selector for code blocks */
-    .theme-selector {
-      margin: 1rem 0;
-      padding: 0.5rem;
-      background: #f8f8f8;
-      border-radius: 4px;
-      text-align: right;
-    }
-    select {
-      padding: 0.25rem 0.5rem;
-      border-radius: 3px;
-      border: 1px solid #ddd;
-    }
-
-    /* Dark mode body styles */
-    body.dark-mode {
-      background-color: #121212;
-      color: #e1e4e8;
-    }
-
-    body.dark-mode h1,
-    body.dark-mode h2,
-    body.dark-mode h3 {
-      color: #e1e4e8;
-      border-color: #2f363d;
-    }
-
-    body.dark-mode .theme-selector {
-      background: #2f363d;
-      color: #e1e4e8;
-    }
-
-    body.dark-mode select {
-      background: #24292e;
-      color: #e1e4e8;
-      border-color: #444;
-    }
-
-    body.dark-mode blockquote {
-      background: #24292e;
-      color: #e1e4e8;
-    }
-
-    body.dark-mode .frontmatter {
-      background: #24292e;
-    }
-
-    body.dark-mode a {
-      color: #58a6ff;
-    }
-  </style>
-</head>
-<body>
-  ${Object.keys(data).length > 0 ? `
-  <div class="frontmatter">
-    <h3>Frontmatter</h3>
-    ${Object.entries(data).map(([key, value]) => `
-    <div class="frontmatter-item">
-      <span class="frontmatter-label">${key}:</span>
-      <span>${Array.isArray(value) ? value.join(", ") : value}</span>
-    </div>`).join("")}
-  </div>
-  ` : ""}
-
-  <div class="theme-selector">
-    Theme:
-    <select id="themeSelector" onchange="changeTheme()">
-      ${themeOptions}
-    </select>
-  </div>
-
-  ${content}
-
-  <script>
-    function changeTheme() {
-      const theme = document.getElementById('themeSelector').value;
-
-      // Toggle dark mode class based on theme
-      if (theme.includes('dark') || theme.includes('night') || theme.includes('monokai') ||
-          theme.includes('dracula') || theme.includes('nord') || theme.includes('material')) {
-        document.body.classList.add('dark-mode');
-      } else {
-        document.body.classList.remove('dark-mode');
-      }
-    }
-
-    // Initialize theme on page load
-    document.addEventListener('DOMContentLoaded', function() {
-      changeTheme();
-    });
-  </script>
-</body>
-</html>
-            `;
-            const relativePath = path3.relative(commonDir, absolutePath);
-            const routePath = `/${relativePath.replace(/\.md$/, "")}`;
-            routes[routePath || "/"] = {
-              filePath: absolutePath,
-              content: htmlContent,
-              fileType: "md"
-            };
-          } catch (error) {
-            console.error(`${colors.red}Error processing Markdown file ${colors.bright}${filePath}${colors.reset}:`, error);
-            continue;
-          }
-        } else {
-          const result = await Bun.build({
-            entrypoints: [absolutePath],
-            outdir: outputDir,
-            plugins: [plugin],
-            define: {
-              "process.env.NODE_ENV": '"development"'
-            },
-            ...options.stxOptions
-          });
-          if (!result.success) {
-            console.error(`${colors.red}Build failed for ${colors.bright}${filePath}${colors.reset}:`, result.logs);
-            continue;
-          }
-          const htmlOutput = result.outputs.find((o) => o.path.endsWith(".html"));
-          if (!htmlOutput) {
-            console.error(`${colors.red}No HTML output found for ${colors.bright}${filePath}${colors.reset}`);
-            continue;
-          }
-          const htmlContent = await Bun.file(htmlOutput.path).text();
-          const relativePath = path3.relative(commonDir, absolutePath);
-          const routePath = `/${relativePath.replace(/\.stx$/, "")}`;
-          routes[routePath || "/"] = {
-            filePath: absolutePath,
-            content: htmlContent,
-            fileType: "stx"
-          };
-        }
-      }
-      if (Object.keys(routes).length === 0) {
-        console.error(`${colors.red}No files were successfully processed${colors.reset}`);
-        return false;
-      }
-      return true;
-    } catch (error) {
-      console.error(`${colors.red}Error processing files:${colors.reset}`, error);
-      return false;
-    }
-  };
-  const buildSuccess = await buildFiles();
-  if (!buildSuccess) {
-    return false;
-  }
-  let actualPort = port;
-  try {
-    actualPort = await findAvailablePort(port);
-    if (actualPort !== port) {
-      console.log(`${colors.yellow}Port ${port} is busy, using port ${actualPort} instead${colors.reset}`);
-    }
-  } catch {
-    console.error(`${colors.red}Could not find an available port${colors.reset}`);
-    return false;
-  }
-  console.log(`${colors.blue}Starting server on ${colors.cyan}http://localhost:${actualPort}/${colors.reset}...`);
-  const server = serve({
-    port: actualPort,
-    fetch(request) {
-      const url = new URL(request.url);
-      let routeMatched = routes[url.pathname];
-      if (!routeMatched && !url.pathname.endsWith("/")) {
-        routeMatched = routes[`${url.pathname}/`];
-      }
-      if (!routeMatched && url.pathname !== "/" && routes["/"]) {
-        routeMatched = routes["/"];
-      }
-      if (routeMatched) {
-        return new Response(routeMatched.content, {
-          headers: {
-            "Content-Type": "text/html"
-          }
-        });
-      }
-      const requestedPath = path3.join(outputDir, url.pathname);
-      if (fs2.existsSync(requestedPath) && fs2.statSync(requestedPath).isFile()) {
-        const file = Bun.file(requestedPath);
-        const ext = path3.extname(requestedPath).toLowerCase();
-        let contentType = "text/plain";
-        switch (ext) {
-          case ".html":
-            contentType = "text/html";
-            break;
-          case ".css":
-            contentType = "text/css";
-            break;
-          case ".js":
-            contentType = "text/javascript";
-            break;
-          case ".json":
-            contentType = "application/json";
-            break;
-          case ".png":
-            contentType = "image/png";
-            break;
-          case ".jpg":
-          case ".jpeg":
-            contentType = "image/jpeg";
-            break;
-          case ".gif":
-            contentType = "image/gif";
-            break;
-        }
-        return new Response(file, {
-          headers: { "Content-Type": contentType }
-        });
-      }
-      return new Response("Not Found", { status: 404 });
-    },
-    error(error) {
-      return new Response(`<pre>${error}
-${error.stack}</pre>`, {
-        headers: {
-          "Content-Type": "text/html"
-        }
-      });
-    }
-  });
-  console.clear();
-  console.log(`
-${colors.blue}stx${colors.reset}  ${colors.green}${process2.env.stx_VERSION || "v0.0.10"}${colors.reset}  ${colors.dim}ready in  ${Math.random() * 10 + 5 | 0}.${Math.random() * 90 + 10 | 0}  ms${colors.reset}`);
-  console.log(`
-${colors.bright}\u2192  ${colors.cyan}http://localhost:${port}/${colors.reset}`);
-  console.log(`
-${colors.yellow}Routes:${colors.reset}`);
-  const sortedRoutes = Object.entries(routes).sort(([pathA], [pathB]) => pathA.localeCompare(pathB)).map(([route, info]) => ({
-    route: route === "/" ? "/" : route,
-    filePath: path3.relative(process2.cwd(), info.filePath),
-    fileType: info.fileType
-  }));
-  sortedRoutes.forEach((routeInfo, index) => {
-    const isLast = index === sortedRoutes.length - 1;
-    const prefix = isLast ? "\u2514\u2500 " : "\u251C\u2500 ";
-    const fileTypeLabel = routeInfo.fileType === "md" ? `${colors.magenta}(markdown)${colors.reset}` : "";
-    if (routeInfo.route === "/") {
-      console.log(`  ${colors.green}${prefix}/${colors.reset} \u2192 ${colors.bright}${routeInfo.filePath}${colors.reset} ${fileTypeLabel}`);
-    } else {
-      const routeParts = routeInfo.route.split("/");
-      const lastPart = routeParts[routeParts.length - 1] || routeParts[routeParts.length - 2];
-      const displayRoute = routeInfo.route === "/" ? "/" : `/${lastPart}`;
-      let parentPath = routeParts.slice(0, -1).join("/");
-      if (parentPath && !parentPath.startsWith("/"))
-        parentPath = `/${parentPath}`;
-      console.log(`  ${colors.green}${prefix}${displayRoute}${colors.reset} \u2192 ${colors.bright}${routeInfo.filePath}${colors.reset} ${fileTypeLabel}`);
-    }
-  });
-  console.log(`
-Press ${colors.cyan}h${colors.reset} + ${colors.cyan}Enter${colors.reset} to show shortcuts`);
-  setupKeyboardShortcuts(server.url.toString(), () => {
-    if (watch) {
-      const watcher = fs2.watch(commonDir, { recursive: true });
-      watcher.close();
-    }
-    server.stop();
-  });
-  if (watch) {
-    console.log(`${colors.blue}Watching for changes...${colors.reset}`);
-    const watcher = fs2.watch(commonDir, { recursive: true }, async (eventType, filename) => {
-      if (!filename)
-        return;
-      if (filename.endsWith(".stx") || filename.endsWith(".js") || filename.endsWith(".ts") || filename.endsWith(".md")) {
-        console.log(`${colors.yellow}File ${colors.bright}${filename}${colors.yellow} changed, rebuilding...${colors.reset}`);
-        await buildFiles();
-      }
-    });
-    process2.on("SIGINT", () => {
-      watcher.close();
-      server.stop();
-      process2.exit(0);
-    });
-  }
-  return true;
-}
-function findCommonDir(paths) {
-  if (paths.length === 0)
-    return "";
-  if (paths.length === 1)
-    return paths[0];
-  const parts = paths.map((p) => p.split(path3.sep));
-  const commonParts = [];
-  for (let i = 0;i < parts[0].length; i++) {
-    const part = parts[0][i];
-    if (parts.every((p) => p[i] === part)) {
-      commonParts.push(part);
-    } else {
-      break;
-    }
-  }
-  return commonParts.join(path3.sep);
-}
-// src/docs.ts
-import fs3 from "fs";
-import path4 from "path";
-async function extractComponentProps(componentPath) {
-  try {
-    const content = await Bun.file(componentPath).text();
-    const scriptMatch = content.match(/<script\b[^>]*>([\s\S]*?)<\/script>/i);
-    if (!scriptMatch)
-      return [];
-    const scriptContent = scriptMatch[1];
-    const props = [];
-    const propRegex = /\/\*\*\s*([\s\S]*?)\s*\*\/\s*(?:(?:const|let|var)\s*)?(?:([\w$]+)\s*=|module\.exports\.([\w$]+)\s*=|\s*([\w$]+)\s*:)/g;
-    let match;
-    while ((match = propRegex.exec(scriptContent)) !== null) {
-      const commentBlock = match[1];
-      const propName = match[2] || match[3] || match[4];
-      if (!propName)
-        continue;
-      const propDoc = { name: propName };
-      const typeMatch = commentBlock.match(/@type\s+\{([^}]+)\}/i);
-      if (typeMatch)
-        propDoc.type = typeMatch[1].trim();
-      const requiredMatch = commentBlock.match(/@required/i);
-      if (requiredMatch)
-        propDoc.required = true;
-      const defaultMatch = commentBlock.match(/@default\s+(.+?)(?:\s+|$)/i);
-      if (defaultMatch)
-        propDoc.default = defaultMatch[1].trim();
-      const descLines = commentBlock.split(`
-`).map((line) => line.trim().replace(/^\*\s*/, "")).filter((line) => !line.startsWith("@") && line.length > 0);
-      propDoc.description = descLines.join(" ").trim();
-      props.push(propDoc);
-    }
-    if (props.length === 0) {
-      const exportsMatch = scriptContent.match(/module\.exports\s*=\s*\{([^}]+)\}/i);
-      if (exportsMatch) {
-        const exportsObject = exportsMatch[1];
-        const propLines = exportsObject.split(",").map((line) => line.trim()).filter(Boolean);
-        for (const propLine of propLines) {
-          const [propName] = propLine.split(":").map((part) => part.trim());
-          if (propName) {
-            props.push({ name: propName });
-          }
-        }
-      }
-    }
-    return props;
-  } catch (error) {
-    console.error(`Error extracting props from ${componentPath}:`, error);
-    return [];
-  }
-}
-async function extractComponentDescription(componentPath) {
-  try {
-    const content = await Bun.file(componentPath).text();
-    const commentMatch = content.match(/^\s*<!--\s*([\s\S]*?)\s*-->/) || content.match(/^\s*\/\*\*\s*([\s\S]*?)\s*\*\//);
-    if (commentMatch) {
-      return commentMatch[1].split(`
-`).map((line) => line.trim().replace(/^\*\s*/, "")).join(" ").trim();
-    }
-    return "";
-  } catch {
-    return "";
-  }
-}
-async function generateComponentDoc(componentPath, isWebComponent = false, webComponentTag) {
-  const name = path4.basename(componentPath, ".stx");
-  const props = await extractComponentProps(componentPath);
-  const description = await extractComponentDescription(componentPath);
-  let example = "";
-  if (isWebComponent && webComponentTag) {
-    example = `<${webComponentTag}></${webComponentTag}>`;
-  } else {
-    const propsExample = props.map((prop) => {
-      if (prop.type === "boolean")
-        return `:${prop.name}="true"`;
-      return `${prop.name}="value"`;
-    }).join(`
-  `);
-    example = `<${name}
-  ${propsExample}
-/>`;
-  }
-  return {
-    name,
-    path: componentPath,
-    description,
-    props,
-    example,
-    isWebComponent,
-    tag: webComponentTag
-  };
-}
-async function findComponentFiles(componentsDir) {
-  try {
-    if (!await fileExists(componentsDir)) {
-      console.warn(`Components directory does not exist: ${componentsDir}`);
-      return [];
-    }
-    const entries = await fs3.promises.readdir(componentsDir, { withFileTypes: true });
-    const componentFiles = [];
-    for (const entry of entries) {
-      const entryPath = path4.join(componentsDir, entry.name);
-      if (entry.isDirectory()) {
-        const subComponents = await findComponentFiles(entryPath);
-        componentFiles.push(...subComponents);
-      } else if (entry.isFile() && entry.name.endsWith(".stx")) {
-        componentFiles.push(entryPath);
-      }
-    }
-    return componentFiles;
-  } catch (error) {
-    console.error(`Error finding component files in ${componentsDir}:`, error);
-    return [];
-  }
-}
-async function generateComponentsDocs(componentsDir, webComponentsConfig) {
-  try {
-    if (!await fileExists(componentsDir)) {
-      return [];
-    }
-    const componentFiles = await findComponentFiles(componentsDir);
-    const componentDocs = [];
-    const webComponentsMap = new Map;
-    if (webComponentsConfig?.components?.length) {
-      for (const component of webComponentsConfig.components) {
-        webComponentsMap.set(component.file, component);
-      }
-    }
-    for (const componentFile of componentFiles) {
-      const webComponent = webComponentsMap.get(componentFile);
-      const isWebComponent = !!webComponent;
-      const webComponentTag = webComponent?.tag;
-      const doc = await generateComponentDoc(componentFile, isWebComponent, webComponentTag);
-      componentDocs.push(doc);
-    }
-    return componentDocs;
-  } catch (error) {
-    console.error(`Error generating component docs:`, error);
-    return [];
-  }
-}
-async function generateTemplatesDocs(templatesDir) {
-  try {
-    if (!await fileExists(templatesDir)) {
-      return [];
-    }
-    const entries = await fs3.promises.readdir(templatesDir, { withFileTypes: true });
-    const templateDocs = [];
-    for (const entry of entries) {
-      if (!entry.isFile() || !entry.name.endsWith(".stx"))
-        continue;
-      const templatePath = path4.join(templatesDir, entry.name);
-      const content = await Bun.file(templatePath).text();
-      const name = path4.basename(templatePath, ".stx");
-      const descriptionMatch = content.match(/^\s*<!--\s*([\s\S]*?)\s*-->/) || content.match(/^\s*\/\*\*\s*([\s\S]*?)\s*\*\//);
-      const description = descriptionMatch ? descriptionMatch[1].split(`
-`).map((line) => line.trim().replace(/^\*\s*/, "")).join(" ").trim() : "";
-      const componentRegex = /@component\(\s*['"]([^'"]+)['"]/g;
-      const componentTags = /<([A-Z][a-zA-Z0-9]*|[a-z]+-[a-z0-9-]+)(?:\s[^>]*)?\/?>|\{\{\s*slot\s*\}\}/g;
-      const components = new Set;
-      let match;
-      while ((match = componentRegex.exec(content)) !== null) {
-        components.add(match[1]);
-      }
-      while ((match = componentTags.exec(content)) !== null) {
-        if (match[1] && match[1] !== "slot") {
-          components.add(match[1]);
-        }
-      }
-      const directiveRegex = /@([a-z]+)(?:\s*\(|\s+|$)/g;
-      const directives = new Set;
-      while ((match = directiveRegex.exec(content)) !== null) {
-        directives.add(match[1]);
-      }
-      templateDocs.push({
-        name,
-        path: templatePath,
-        description,
-        components: [...components],
-        directives: [...directives]
-      });
-    }
-    return templateDocs;
-  } catch (error) {
-    console.error(`Error generating template docs:`, error);
-    return [];
-  }
-}
-async function generateDirectivesDocs(customDirectives = []) {
-  try {
-    const directiveDocs = [
-      {
-        name: "if",
-        description: "Conditionally render content based on a condition",
-        hasEndTag: true,
-        example: `@if(user.isLoggedIn)
-  <p>Welcome, {{ user.name }}!</p>
-@endif`
-      },
-      {
-        name: "else",
-        description: "Provides an alternative if a condition is not met",
-        hasEndTag: false,
-        example: `@if(user.isLoggedIn)
-  <p>Welcome back!</p>
-@else
-  <p>Please log in</p>
-@endif`
-      },
-      {
-        name: "elseif",
-        description: "Provides an alternative condition",
-        hasEndTag: false,
-        example: `@if(score > 90)
-  <p>A</p>
-@elseif(score > 80)
-  <p>B</p>
-@elseif(score > 70)
-  <p>C</p>
-@endif`
-      },
-      {
-        name: "unless",
-        description: "Conditionally render content if a condition is false",
-        hasEndTag: true,
-        example: `@unless(user.isLoggedIn)
-  <p>Please log in</p>
-@endunless`
-      },
-      {
-        name: "for",
-        description: "Loop through an array or object",
-        hasEndTag: true,
-        example: `@for(item of items)
-  <li>{{ item.name }}</li>
-@endfor`
-      },
-      {
-        name: "while",
-        description: "Loop while a condition is true",
-        hasEndTag: true,
-        example: `@while(page < totalPages)
-  <p>Page {{ page }}</p>
-@endwhile`
-      },
-      {
-        name: "component",
-        description: "Include a component in the template",
-        hasEndTag: false,
-        example: '@component("alert", { type: "warning", title: "Warning", message: "This is a warning" })'
-      },
-      {
-        name: "include",
-        description: "Include a partial template",
-        hasEndTag: false,
-        example: '@include("partials/header")'
-      },
-      {
-        name: "raw",
-        description: "Display content without processing expressions",
-        hasEndTag: true,
-        example: `@raw
-  {{ This will be displayed as-is }}
-@endraw`
-      },
-      {
-        name: "translate",
-        description: "Translate a string using the i18n system",
-        hasEndTag: false,
-        example: '@translate("welcome.message", { name: user.name })'
-      },
-      {
-        name: "t",
-        description: "Short alias for translate directive",
-        hasEndTag: false,
-        example: '@t("welcome.message", { name: user.name })'
-      }
-    ];
-    for (const directive of customDirectives) {
-      directiveDocs.push({
-        name: directive.name,
-        description: directive.description || "",
-        hasEndTag: directive.hasEndTag || false,
-        example: ""
-      });
-    }
-    return directiveDocs;
-  } catch (error) {
-    console.error(`Error generating directive docs:`, error);
-    return [];
-  }
-}
-function formatDocsAsMarkdown(componentDocs = [], templateDocs = [], directiveDocs = [], extraContent) {
-  let markdown = `# stx Documentation
-
-`;
-  if (extraContent) {
-    markdown += `${extraContent}
-
-`;
-  }
-  if (componentDocs.length > 0) {
-    markdown += `## Components
-
-`;
-    for (const doc of componentDocs) {
-      markdown += `### ${doc.name}
-
-`;
-      if (doc.description) {
-        markdown += `${doc.description}
-
-`;
-      }
-      if (doc.isWebComponent) {
-        markdown += `**Web Component Tag:** \`${doc.tag}\`
-
-`;
-      }
-      if (doc.props.length > 0) {
-        markdown += `#### Properties
-
-`;
-        markdown += `| Name | Type | Required | Default | Description |
-`;
-        markdown += `| ---- | ---- | -------- | ------- | ----------- |
-`;
-        for (const prop of doc.props) {
-          markdown += `| ${prop.name} | ${prop.type || "any"} | ${prop.required ? "Yes" : "No"} | ${prop.default || "-"} | ${prop.description || "-"} |
-`;
-        }
-        markdown += `
-`;
-      }
-      if (doc.example) {
-        markdown += `#### Example
-
-`;
-        markdown += "```html\n";
-        markdown += doc.example;
-        markdown += "\n```\n\n";
-      }
-    }
-  }
-  if (templateDocs.length > 0) {
-    markdown += `## Templates
-
-`;
-    for (const doc of templateDocs) {
-      markdown += `### ${doc.name}
-
-`;
-      if (doc.description) {
-        markdown += `${doc.description}
-
-`;
-      }
-      if (doc.components && doc.components.length > 0) {
-        markdown += `**Components Used:** ${doc.components.join(", ")}
-
-`;
-      }
-      if (doc.directives && doc.directives.length > 0) {
-        markdown += `**Directives Used:** ${doc.directives.join(", ")}
-
-`;
-      }
-    }
-  }
-  if (directiveDocs.length > 0) {
-    markdown += `## Directives
-
-`;
-    markdown += `| Directive | Description | Has End Tag |
-`;
-    markdown += `| --------- | ----------- | ----------- |
-`;
-    for (const doc of directiveDocs) {
-      markdown += `| @${doc.name} | ${doc.description || "-"} | ${doc.hasEndTag ? "Yes" : "No"} |
-`;
-    }
-    markdown += `
-`;
-    for (const doc of directiveDocs) {
-      if (doc.example) {
-        markdown += `### @${doc.name}
-
-`;
-        markdown += `${doc.description || ""}
-
-`;
-        markdown += `#### Example
-
-`;
-        markdown += "```html\n";
-        markdown += doc.example;
-        markdown += "\n```\n\n";
-      }
-    }
-  }
-  return markdown;
-}
-function formatDocsAsHtml(componentDocs = [], templateDocs = [], directiveDocs = [], extraContent) {
-  let html = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>stx Documentation</title>
-  <style>
-    body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-      line-height: 1.6;
-      color: #333;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-    h1, h2, h3, h4 { margin-top: 2rem; }
-    table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 1rem 0;
-    }
-    th, td {
-      text-align: left;
-      padding: 0.5rem;
-      border-bottom: 1px solid #ddd;
-    }
-    th { border-bottom: 2px solid #ddd; }
-    pre {
-      background: #f5f5f5;
-      padding: 1rem;
-      border-radius: 4px;
-      overflow-x: auto;
-    }
-    code {
-      background: #f5f5f5;
-      padding: 0.2rem 0.4rem;
-      border-radius: 4px;
-      font-size: 0.9em;
-    }
-  </style>
-</head>
-<body>
-  <h1>stx Documentation</h1>
-  `;
-  if (extraContent) {
-    html += `<div>${extraContent}</div>`;
-  }
-  if (componentDocs.length > 0) {
-    html += `<h2>Components</h2>`;
-    for (const doc of componentDocs) {
-      html += `<h3>${doc.name}</h3>`;
-      if (doc.description) {
-        html += `<p>${doc.description}</p>`;
-      }
-      if (doc.isWebComponent) {
-        html += `<p><strong>Web Component Tag:</strong> <code>${doc.tag}</code></p>`;
-      }
-      if (doc.props.length > 0) {
-        html += `<h4>Properties</h4>`;
-        html += `<table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Required</th>
-              <th>Default</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>`;
-        for (const prop of doc.props) {
-          html += `<tr>
-            <td>${prop.name}</td>
-            <td>${prop.type || "any"}</td>
-            <td>${prop.required ? "Yes" : "No"}</td>
-            <td>${prop.default || "-"}</td>
-            <td>${prop.description || "-"}</td>
-          </tr>`;
-        }
-        html += `</tbody></table>`;
-      }
-      if (doc.example) {
-        html += `<h4>Example</h4>`;
-        html += `<pre><code>${doc.example.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;")}</code></pre>`;
-      }
-    }
-  }
-  if (templateDocs.length > 0) {
-    html += `<h2>Templates</h2>`;
-    for (const doc of templateDocs) {
-      html += `<h3>${doc.name}</h3>`;
-      if (doc.description) {
-        html += `<p>${doc.description}</p>`;
-      }
-      if (doc.components && doc.components.length > 0) {
-        html += `<p><strong>Components Used:</strong> ${doc.components.join(", ")}</p>`;
-      }
-      if (doc.directives && doc.directives.length > 0) {
-        html += `<p><strong>Directives Used:</strong> ${doc.directives.join(", ")}</p>`;
-      }
-    }
-  }
-  if (directiveDocs.length > 0) {
-    html += `<h2>Directives</h2>`;
-    html += `<table>
-      <thead>
-        <tr>
-          <th>Directive</th>
-          <th>Description</th>
-          <th>Has End Tag</th>
-        </tr>
-      </thead>
-      <tbody>`;
-    for (const doc of directiveDocs) {
-      html += `<tr>
-        <td>@${doc.name}</td>
-        <td>${doc.description || "-"}</td>
-        <td>${doc.hasEndTag ? "Yes" : "No"}</td>
-      </tr>`;
-    }
-    html += `</tbody></table>`;
-    for (const doc of directiveDocs) {
-      if (doc.example) {
-        html += `<h3>@${doc.name}</h3>`;
-        html += `<p>${doc.description || ""}</p>`;
-        html += `<h4>Example</h4>`;
-        html += `<pre><code>${doc.example.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;")}</code></pre>`;
-      }
-    }
-  }
-  html += `</body></html>`;
-  return html;
-}
-function formatDocsAsJson(componentDocs = [], templateDocs = [], directiveDocs = [], extraContent) {
-  const json = {
-    components: componentDocs,
-    templates: templateDocs,
-    directives: directiveDocs,
-    extraContent: extraContent || ""
-  };
-  return JSON.stringify(json, null, 2);
-}
-async function generateDocs(options) {
-  try {
-    const { componentsDir, templatesDir, webComponentsConfig, customDirectives, config: docConfig } = options;
-    if (!docConfig.enabled) {
-      return false;
-    }
-    const outputDir = docConfig.outputDir || "docs";
-    await fs3.promises.mkdir(outputDir, { recursive: true });
-    console.log(`Generating documentation...`);
-    if (componentsDir)
-      console.log(`Components directory: ${componentsDir}`);
-    if (templatesDir)
-      console.log(`Templates directory: ${templatesDir}`);
-    console.log(`Output directory: ${outputDir}`);
-    let componentDocs = [];
-    if (docConfig.components !== false && componentsDir) {
-      console.log(`Generating component documentation...`);
-      componentDocs = await generateComponentsDocs(componentsDir, webComponentsConfig);
-      console.log(`Found ${componentDocs.length} components`);
-    }
-    let templateDocs = [];
-    if (docConfig.templates !== false && templatesDir) {
-      console.log(`Generating template documentation...`);
-      templateDocs = await generateTemplatesDocs(templatesDir);
-      console.log(`Found ${templateDocs.length} templates`);
-    }
-    let directiveDocs = [];
-    if (docConfig.directives !== false) {
-      console.log(`Generating directive documentation...`);
-      directiveDocs = await generateDirectivesDocs(customDirectives);
-      console.log(`Found ${directiveDocs.length} directives`);
-    }
-    const format = docConfig.format || "markdown";
-    const extraContent = docConfig.extraContent;
-    let docContent = "";
-    let extension = "";
-    switch (format) {
-      case "markdown":
-        docContent = formatDocsAsMarkdown(componentDocs, templateDocs, directiveDocs, extraContent);
-        extension = "md";
-        break;
-      case "html":
-        docContent = formatDocsAsHtml(componentDocs, templateDocs, directiveDocs, extraContent);
-        extension = "html";
-        break;
-      case "json":
-        docContent = formatDocsAsJson(componentDocs, templateDocs, directiveDocs, extraContent);
-        extension = "json";
-        break;
-      default:
-        throw new Error(`Unsupported documentation format: ${format}`);
-    }
-    const outputPath = path4.join(outputDir, `stx-docs.${extension}`);
-    await Bun.write(outputPath, docContent);
-    console.log(`Documentation generated: ${outputPath}`);
-    return true;
-  } catch (error) {
-    console.error("Error generating documentation:", error);
-    return false;
-  }
-}
-async function docsCommand(options) {
-  const docsConfig = {
-    enabled: true,
-    outputDir: options.output || "docs",
-    format: options.format || "markdown",
-    components: options.components !== false,
-    templates: options.templates !== false,
-    directives: options.directives !== false,
-    extraContent: options.extraContent
-  };
-  const componentsDir = options.componentsDir || config.componentsDir;
-  const templatesDir = options.templatesDir || ".";
-  return generateDocs({
-    componentsDir,
-    templatesDir,
-    webComponentsConfig: config.webComponents,
-    customDirectives: config.customDirectives,
-    config: docsConfig
-  });
-}
-// src/formatter.ts
-var DEFAULT_OPTIONS = {
-  indentSize: 2,
-  useTabs: false,
-  maxLineLength: 120,
-  normalizeWhitespace: true,
-  sortAttributes: false,
-  trimTrailingWhitespace: true
-};
-function formatStxContent(content, options = {}) {
-  const opts = { ...DEFAULT_OPTIONS, ...options };
-  if (content.trim() === "") {
-    return `
-`;
-  }
-  let formatted = content;
-  if (opts.trimTrailingWhitespace) {
-    formatted = formatted.replace(/[ \t]+$/gm, "");
-  }
-  formatted = formatScriptTags(formatted, opts);
-  formatted = formatHtml(formatted, opts);
-  formatted = formatAttributes(formatted, opts);
-  formatted = formatStxDirectives(formatted, opts);
-  if (opts.trimTrailingWhitespace) {
-    formatted = formatted.replace(/[ \t]+$/gm, "");
-    formatted = formatted.replace(/(\S)[ \t]+(<\/[^>]+>)/g, "$1$2");
-  }
-  formatted = formatted.replace(/\r\n/g, `
-`).replace(/\r/g, `
-`);
-  if (!formatted.endsWith(`
-`)) {
-    formatted += `
-`;
-  }
-  return formatted;
-}
-function formatScriptTags(content, options) {
-  return content.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, (match, scriptContent) => {
-    const trimmed = scriptContent.trim();
-    if (trimmed && !trimmed.includes(`
-`) && trimmed.length < 80) {
-      return match.replace(scriptContent, trimmed);
-    }
-    const lines = scriptContent.split(`
-`);
-    const formattedLines = lines.map((line, index) => {
-      if (index === 0 && line.trim() === "")
-        return "";
-      if (index === lines.length - 1 && line.trim() === "")
-        return "";
-      const lineTrimmed = line.trim();
-      if (lineTrimmed === "")
-        return "";
-      const indent = options.useTabs ? "\t" : " ".repeat(options.indentSize);
-      return `${indent}${lineTrimmed}`;
-    }).filter((line, index, arr) => {
-      if (index === 0 || index === arr.length - 1)
-        return line !== "";
-      return true;
-    });
-    const formattedScript = formattedLines.length > 0 ? `
-${formattedLines.join(`
-`)}
-` : "";
-    return match.replace(scriptContent, formattedScript);
-  });
-}
-function formatHtml(content, options) {
-  let preprocessed = content;
-  const whitespaceSensitivePlaceholders = [];
-  const whitespaceTags = ["pre", "code", "textarea", "style"];
-  for (const tag of whitespaceTags) {
-    const regex = new RegExp(`<${tag}\\b[^>]*>[\\s\\S]*?<\\/${tag}>`, "gi");
-    preprocessed = preprocessed.replace(regex, (match) => {
-      const placeholder = `__WHITESPACE_TAG_${whitespaceSensitivePlaceholders.length}__`;
-      whitespaceSensitivePlaceholders.push(match);
-      return placeholder;
-    });
-  }
-  const emptyTagPlaceholders = [];
-  preprocessed = preprocessed.replace(/<(\w+)([^>]*)><\/\1>/g, (match) => {
-    const placeholder = `__EMPTY_TAG_${emptyTagPlaceholders.length}__`;
-    emptyTagPlaceholders.push(match);
-    return placeholder;
-  });
-  preprocessed = preprocessed.replace(/<(\w+)([^>]*?)(@\w+\([^)]*\))([^>]*?)(@end\w+)([^>]*)>/g, (match, tagName, beforeDirective, openDirective, betweenDirectives, closeDirective, afterDirective) => {
-    return `<${tagName}${beforeDirective}
-${openDirective}
-${betweenDirectives.trim()}
-${closeDirective}${afterDirective}>`;
-  });
-  preprocessed = preprocessed.replace(/>(\s*)</g, (match, whitespace, offset, string) => {
-    if (whitespace.includes(`
-`)) {
-      return match;
-    }
-    const before = string.substring(Math.max(0, offset - 50), offset + 1);
-    const after = string.substring(offset + match.length - 1, Math.min(string.length, offset + match.length + 50));
-    const closingTagMatch = before.match(/<\/(\w+)>$/);
-    const openingTagMatch = after.match(/^<(\w+)/);
-    const inlineTags = ["span", "a", "strong", "em", "b", "i", "u", "small", "mark", "del", "ins", "sub", "sup", "code", "kbd", "samp", "var", "abbr", "cite", "q", "dfn", "time"];
-    if (closingTagMatch && openingTagMatch) {
-      const closingTag = closingTagMatch[1].toLowerCase();
-      const openingTag = openingTagMatch[1].toLowerCase();
-      if (inlineTags.includes(closingTag) && inlineTags.includes(openingTag)) {
-        const beforeMatch = string.substring(0, offset);
-        const lastNewline = beforeMatch.lastIndexOf(`
-`);
-        const lineStart = lastNewline + 1;
-        const afterMatch = string.substring(offset + match.length);
-        const nextNewline = afterMatch.indexOf(`
-`);
-        const lineEnd = nextNewline === -1 ? string.length : offset + match.length + nextNewline;
-        const currentLine = string.substring(lineStart, lineEnd);
-        const withoutTags = currentLine.replace(/<[^>]+>/g, "").replace(/\s+/g, " ").trim();
-        if (withoutTags.length > 0) {
-          return match;
-        }
-      }
-    }
-    return `>
-<`;
-  });
-  preprocessed = preprocessed.replace(/>(\s*)@/g, (match, whitespace) => {
-    if (whitespace.includes(`
-`)) {
-      return match;
-    }
-    return `>
-@`;
-  });
-  preprocessed = preprocessed.replace(/(@end\w+)(\s*)</g, (match, directive, whitespace) => {
-    if (whitespace.includes(`
-`)) {
-      return match;
-    }
-    return `${directive}
-<`;
-  });
-  preprocessed = preprocessed.replace(/\)(\s*)@/g, (match, whitespace) => {
-    if (whitespace.includes(`
-`)) {
-      return match;
-    }
-    return `)
-@`;
-  });
-  preprocessed = preprocessed.replace(/\)(\s*)</g, (match, whitespace) => {
-    if (whitespace.includes(`
-`)) {
-      return match;
-    }
-    return `)
-<`;
-  });
-  preprocessed = preprocessed.replace(/(@end\w+)(\s*)@/g, (match, directive, whitespace) => {
-    if (whitespace.includes(`
-`)) {
-      return match;
-    }
-    return `${directive}
-@`;
-  });
-  preprocessed = preprocessed.replace(/(@\w+)(?!\s*\()(\s*)</g, (match, directive, whitespace) => {
-    if (whitespace.includes(`
-`)) {
-      return match;
-    }
-    return `${directive}
-<`;
-  });
-  const lines = preprocessed.split(`
-`);
-  const formattedLines = [];
-  let indentLevel = 0;
-  const indent = options.useTabs ? "\t" : " ".repeat(options.indentSize);
-  for (let i = 0;i < lines.length; i++) {
-    const line = lines[i].trim();
-    if (line === "") {
-      formattedLines.push("");
-      continue;
-    }
-    if (line.startsWith("</") || line.startsWith("@end")) {
-      indentLevel = Math.max(0, indentLevel - 1);
-    }
-    const indentedLine = indentLevel > 0 ? indent.repeat(indentLevel) + line : line;
-    formattedLines.push(indentedLine);
-    if (line.startsWith("<") && !line.includes("/>") && !line.startsWith("</")) {
-      const hasMatchingClosingTag = line.match(/<(\w+)[^>]*>.*<\/\1>/);
-      if (!line.includes("<!") && !isSelfClosingTag(line) && !hasMatchingClosingTag) {
-        indentLevel++;
-      }
-    }
-    if (line.startsWith("@") && isOpeningDirective(line)) {
-      indentLevel++;
-    }
-  }
-  let result = formattedLines.join(`
-`);
-  whitespaceSensitivePlaceholders.forEach((tag, index) => {
-    result = result.replace(`__WHITESPACE_TAG_${index}__`, tag);
-  });
-  emptyTagPlaceholders.forEach((tag, index) => {
-    result = result.replace(`__EMPTY_TAG_${index}__`, tag);
-  });
-  return result;
-}
-function formatStxDirectives(content, options) {
-  content = content.replace(/@(if|elseif|foreach|for|while)\s*\(\s*([^)]+)\s*\)/g, (match, directive, condition) => {
-    const normalizedCondition = condition.trim().replace(/\s+/g, " ");
-    return `@${directive}(${normalizedCondition})`;
-  });
-  content = content.replace(/@(csrf|method)\s*\(\s*([^)]*)\s*\)/g, (match, directive, param) => {
-    if (param.trim() === "") {
-      return `@${directive}`;
-    }
-    return `@${directive}(${param.trim()})`;
-  });
-  if (options.normalizeWhitespace) {
-    content = content.replace(/\{\{\s*([^}]+)\s*\}\}/g, (match, expression) => {
-      return `{{ ${expression.trim()} }}`;
-    });
-    content = content.replace(/\{!!\s*([^!]+)\s*!!\}/g, (match, expression) => {
-      return `{!! ${expression.trim()} !!}`;
-    });
-  }
-  return content;
-}
-function isSelfClosingTag(line) {
-  const selfClosingTags = ["br", "hr", "img", "input", "meta", "link", "area", "base", "col", "embed", "source", "track", "wbr"];
-  if (line.includes("/>"))
-    return true;
-  const tagMatch = line.match(/<(\w+)/);
-  if (tagMatch) {
-    const tagName = tagMatch[1].toLowerCase();
-    return selfClosingTags.includes(tagName);
-  }
-  return false;
-}
-function isOpeningDirective(line) {
-  const blockDirectives = ["if", "unless", "foreach", "for", "while", "section", "push", "component", "slot", "markdown", "wrap", "error"];
-  for (const directive of blockDirectives) {
-    if (line.startsWith(`@${directive}`)) {
-      return !line.includes(`@end${directive}`);
-    }
-  }
-  return false;
-}
-function formatAttributes(content, options) {
-  if (!options.sortAttributes)
-    return content;
-  return content.replace(/<(\w+)([^>]*)>/g, (match, tagName, attributes) => {
-    if (!attributes.trim())
-      return match;
-    if (attributes.includes("<") || attributes.includes(`
-`) || attributes.includes("@")) {
-      return match;
-    }
-    const attrRegex = /(\w+)(?:=("[^"]*"|'[^']*'|[^\s>]+))?/g;
-    const attrs = [];
-    let attrMatch;
-    while ((attrMatch = attrRegex.exec(attributes)) !== null) {
-      attrs.push({
-        name: attrMatch[1],
-        value: attrMatch[2]
-      });
-    }
-    attrs.sort((a, b) => {
-      if (a.name === "id")
-        return -1;
-      if (b.name === "id")
-        return 1;
-      if (a.name === "class")
-        return -1;
-      if (b.name === "class")
-        return 1;
-      return a.name.localeCompare(b.name);
-    });
-    const formattedAttrs = attrs.map((attr) => attr.value ? `${attr.name}=${attr.value}` : attr.name).join(" ");
-    return `<${tagName}${formattedAttrs ? ` ${formattedAttrs}` : ""}>`;
-  });
-}
-// src/init.ts
-import fs4 from "fs";
-import path5 from "path";
-import process3 from "process";
-async function initFile(fileName = "index.stx", options = {}) {
-  try {
-    const force = options.force || false;
-    const filePath = path5.resolve(process3.cwd(), fileName);
-    if (fs4.existsSync(filePath)) {
-      if (!force) {
-        throw new Error(`File ${fileName} already exists. Use --force to overwrite.`);
-      }
-      console.warn(`File ${fileName} already exists. Overwriting...`);
-    }
-    const dirPath = path5.dirname(filePath);
-    if (!fs4.existsSync(dirPath)) {
-      fs4.mkdirSync(dirPath, { recursive: true });
-    }
-    let templateContent;
-    if (options.template) {
-      const templatePath = path5.resolve(process3.cwd(), options.template);
-      if (!fs4.existsSync(templatePath)) {
-        throw new Error(`Template file ${options.template} does not exist.`);
-      }
-      if (!templatePath.endsWith(".stx")) {
-        console.warn(`Warning: Template file ${options.template} does not have a .stx extension. Using it anyway.`);
-      }
-      templateContent = fs4.readFileSync(templatePath, "utf-8");
-      console.warn(`Using template from ${options.template}`);
-    } else {
-      templateContent = getDefaultTemplate();
-    }
-    fs4.writeFileSync(filePath, templateContent);
-    console.warn(`Created new stx file: ${fileName}`);
-    return true;
-  } catch (error) {
-    console.error(`Error creating file: ${error instanceof Error ? error.message : String(error)}`);
-    return false;
-  }
-}
-function getDefaultTemplate() {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{ title }}</title>
-  <script>
-    export const title = "My stx Page";
-    export const description = "A page built with stx";
-    export const items = [
-      "Templates with TypeScript support",
-      "Powerful directives",
-      "Reusable components"
-    ];
-  </script>
-  <style>
-    :root {
-      --primary-color: #3498db;
-      --dark-color: #34495e;
-      --light-color: #ecf0f1;
-      --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    }
-
-    body {
-      font-family: var(--font-main);
-      line-height: 1.6;
-      color: var(--dark-color);
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-
-    h1 {
-      color: var(--primary-color);
-    }
-
-    .content {
-      margin-top: 2rem;
-    }
-
-    ul {
-      padding-left: 1.5rem;
-    }
-
-    li {
-      margin-bottom: 0.5rem;
-    }
-  </style>
-</head>
-<body>
-  <header>
-    <h1>{{ title }}</h1>
-    <p>{{ description }}</p>
-  </header>
-
-  <div class="content">
-    <h2>Features</h2>
-    <ul>
-      @foreach(items as item)
-        <li>{{ item }}</li>
-      @endforeach
-    </ul>
-  </div>
-</body>
-</html>`;
-}
-// src/release.ts
-var gitHash = "f9c3713";
-// src/serve.ts
-var {serve: bunServe } = globalThis.Bun;
-import fs5 from "fs";
-import path6 from "path";
-async function serve2(options = {}) {
-  const {
-    port = 3000,
-    root = ".",
-    stxOptions = {},
-    watch = true,
-    onRequest,
-    routes = {},
-    middleware = [],
-    on404,
-    onError
-  } = options;
-  const rootDir = path6.resolve(root);
-  const fileCache = new Map;
-  async function processStxFile(filePath) {
-    const stats = fs5.statSync(filePath);
-    const cacheKey = `${filePath}:${stats.mtimeMs}`;
-    const cached = fileCache.get(cacheKey);
-    if (cached) {
-      return cached.content;
-    }
-    const content = await Bun.file(filePath).text();
-    const scriptMatch = content.match(/<script\b[^>]*>([\s\S]*?)<\/script>/i);
-    const scriptContent = scriptMatch ? scriptMatch[1] : "";
-    const templateContent = content.replace(/<script\b[^>]*>[\s\S]*?<\/script>/i, "");
-    const context = {
-      __filename: filePath,
-      __dirname: path6.dirname(filePath)
-    };
-    await extractVariables(scriptContent, context, filePath);
-    const dependencies = new Set;
-    const output = await processDirectives(templateContent, context, filePath, stxOptions, dependencies);
-    fileCache.set(cacheKey, { content: output, mtime: stats.mtimeMs });
-    return output;
-  }
-  async function processMarkdownFile(filePath) {
-    const stats = fs5.statSync(filePath);
-    const cacheKey = `${filePath}:${stats.mtimeMs}`;
-    const cached = fileCache.get(cacheKey);
-    if (cached) {
-      return cached.content;
-    }
-    const { content } = await readMarkdownFile(filePath, stxOptions);
-    fileCache.set(cacheKey, { content, mtime: stats.mtimeMs });
-    return content;
-  }
-  function resolveRequestPath(pathname) {
-    const relPath = pathname.startsWith("/") ? pathname.slice(1) : pathname;
-    const possiblePaths = [
-      relPath,
-      `${relPath}.stx`,
-      `${relPath}.md`,
-      `${relPath}.html`,
-      path6.join(relPath, "index.stx"),
-      path6.join(relPath, "index.md"),
-      path6.join(relPath, "index.html")
-    ];
-    for (const possiblePath of possiblePaths) {
-      const fullPath = path6.join(rootDir, possiblePath);
-      if (fs5.existsSync(fullPath) && fs5.statSync(fullPath).isFile()) {
-        return fullPath;
-      }
-    }
-    return null;
-  }
-  async function handleRequest(request) {
-    const url = new URL(request.url);
-    let next = async () => {
-      if (routes[url.pathname]) {
-        return await routes[url.pathname](request);
-      }
-      if (onRequest) {
-        const customResponse = await onRequest(request);
-        if (customResponse) {
-          return customResponse;
-        }
-      }
-      const filePath = resolveRequestPath(url.pathname);
-      if (!filePath) {
-        if (on404) {
-          return await on404(request);
-        }
-        return new Response("Not Found", { status: 404 });
-      }
-      try {
-        let content;
-        let contentType = "text/html";
-        if (filePath.endsWith(".stx")) {
-          content = await processStxFile(filePath);
-        } else if (filePath.endsWith(".md")) {
-          content = await processMarkdownFile(filePath);
-        } else if (filePath.endsWith(".html")) {
-          content = await Bun.file(filePath).text();
-        } else if (filePath.endsWith(".css")) {
-          content = await Bun.file(filePath).text();
-          contentType = "text/css";
-        } else if (filePath.endsWith(".js")) {
-          content = await Bun.file(filePath).text();
-          contentType = "text/javascript";
-        } else if (filePath.endsWith(".json")) {
-          content = await Bun.file(filePath).text();
-          contentType = "application/json";
-        } else {
-          return new Response(Bun.file(filePath));
-        }
-        return new Response(content, {
-          headers: { "Content-Type": contentType }
-        });
-      } catch (error) {
-        if (onError) {
-          return await onError(error, request);
-        }
-        return new Response(`<h1>Error</h1><pre>${error.message}
-${error.stack}</pre>`, {
-          status: 500,
-          headers: { "Content-Type": "text/html" }
-        });
-      }
-    };
-    for (let i = middleware.length - 1;i >= 0; i--) {
-      const mw = middleware[i];
-      const currentNext = next;
-      next = async () => await mw(request, currentNext);
-    }
-    return await next();
-  }
-  const server = bunServe({
-    port,
-    fetch: handleRequest
-  });
-  let watcher = null;
-  if (watch) {
-    watcher = fs5.watch(rootDir, { recursive: true }, (eventType, filename) => {
-      if (filename && (filename.endsWith(".stx") || filename.endsWith(".md") || filename.endsWith(".html"))) {
-        fileCache.clear();
-      }
-    });
-  }
-  return {
-    server,
-    url: server.url.toString(),
-    stop() {
-      if (watcher) {
-        watcher.close();
-      }
-      server.stop();
-    }
-  };
-}
-async function serveFile(filePath, options = {}) {
-  const absolutePath = path6.resolve(filePath);
-  if (!fs5.existsSync(absolutePath)) {
-    throw new Error(`File not found: ${absolutePath}`);
-  }
-  const isMarkdown = absolutePath.endsWith(".md");
-  const isStx = absolutePath.endsWith(".stx");
-  if (!isMarkdown && !isStx) {
-    throw new Error(`Unsupported file type: ${absolutePath}. Only .stx and .md files are supported.`);
-  }
-  return await serve2({
-    ...options,
-    root: path6.dirname(absolutePath),
-    routes: {
-      "/": async () => {
-        let content;
-        if (isMarkdown) {
-          const { content: md } = await readMarkdownFile(absolutePath, options.stxOptions);
-          content = md;
-        } else {
-          const fileContent = await Bun.file(absolutePath).text();
-          const scriptMatch = fileContent.match(/<script\b[^>]*>([\s\S]*?)<\/script>/i);
-          const scriptContent = scriptMatch ? scriptMatch[1] : "";
-          const templateContent = fileContent.replace(/<script\b[^>]*>[\s\S]*?<\/script>/i, "");
-          const context = {};
-          await extractVariables(scriptContent, context, absolutePath);
-          const dependencies = new Set;
-          content = await processDirectives(templateContent, context, absolutePath, options.stxOptions || {}, dependencies);
-        }
-        return new Response(content, {
-          headers: { "Content-Type": "text/html" }
-        });
-      },
-      ...options.routes
-    }
-  });
-}
-function createMiddleware(handler) {
-  return handler;
-}
-function createRoute(handler) {
-  return handler;
-}
-// src/streaming.ts
-import path7 from "path";
-var defaultStreamingConfig = {
-  enabled: true,
-  bufferSize: 1024 * 16,
-  strategy: "auto",
-  timeout: 30000
-};
-var SECTION_PATTERN = /<!-- @section:([\w-]+) -->([\s\S]*?)<!-- @endsection:\1 -->/g;
-async function streamTemplate(templatePath, data = {}, options = {}) {
-  const fullOptions = {
-    ...defaultConfig,
-    ...options,
-    streaming: {
-      ...defaultStreamingConfig,
-      ...options.streaming
-    }
-  };
-  return new ReadableStream({
-    async start(controller) {
-      try {
-        const content = await Bun.file(templatePath).text();
-        const scriptMatch = content.match(/<script\b[^>]*>([\s\S]*?)<\/script>/i);
-        const scriptContent = scriptMatch ? scriptMatch[1] : "";
-        const templateContent = content.replace(/<script\b[^>]*>[\s\S]*?<\/script>/i, "");
-        const context = {
-          ...data,
-          __filename: templatePath,
-          __dirname: path7.dirname(templatePath)
-        };
-        await extractVariables(scriptContent, context, templatePath);
-        const dependencies = new Set;
-        const output = await processDirectives(templateContent, context, templatePath, fullOptions, dependencies);
-        controller.enqueue(output);
-        controller.close();
-      } catch (error) {
-        controller.error(error);
-      }
-    }
-  });
-}
-async function createStreamRenderer(templatePath, options = {}) {
-  const fullOptions = {
-    ...defaultConfig,
-    ...options,
-    streaming: {
-      ...defaultStreamingConfig,
-      ...options.streaming
-    }
-  };
-  const content = await Bun.file(templatePath).text();
-  const scriptMatch = content.match(/<script\b[^>]*>([\s\S]*?)<\/script>/i);
-  const scriptContent = scriptMatch ? scriptMatch[1] : "";
-  const templateContent = content.replace(/<script\b[^>]*>[\s\S]*?<\/script>/i, "");
-  const originalTemplate = templateContent;
-  const sections = {};
-  let match;
-  SECTION_PATTERN.lastIndex = 0;
-  while ((match = SECTION_PATTERN.exec(templateContent)) !== null) {
-    const sectionName = match[1];
-    const sectionContent = match[2];
-    sections[sectionName] = sectionContent;
-  }
-  const shellTemplate = templateContent.replace(SECTION_PATTERN, "");
-  const renderer = {
-    renderShell: async (data = {}) => {
-      const context = {
-        ...data,
-        __filename: templatePath,
-        __dirname: path7.dirname(templatePath)
-      };
-      await extractVariables(scriptContent, context, templatePath);
-      const dependencies = new Set;
-      return processDirectives(shellTemplate, context, templatePath, fullOptions, dependencies);
-    },
-    renderSection: async (sectionName, data = {}) => {
-      try {
-        if (!sections[sectionName]) {
-          return `<div class="error-message">Section "${sectionName}" not found in template "${templatePath}"</div>`;
-        }
-        const context = {
-          ...data,
-          __filename: templatePath,
-          __dirname: path7.dirname(templatePath)
-        };
-        await extractVariables(scriptContent, context, templatePath);
-        const dependencies = new Set;
-        return await processDirectives(sections[sectionName], context, templatePath, fullOptions, dependencies);
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        return createDetailedErrorMessage("Expression", errorMessage, templatePath, sections[sectionName] || "", 0, sections[sectionName] || "");
-      }
-    },
-    getSections: () => {
-      return Object.keys(sections);
-    },
-    getTemplate: () => {
-      return originalTemplate;
-    }
-  };
-  return renderer;
-}
-var islandDirective = {
-  name: "island",
-  hasEndTag: true,
-  handler: (content, params, _context, _filePath) => {
-    if (!params || params.length === 0) {
-      throw new Error("Island directive requires a name parameter");
-    }
-    const islandName = params[0].replace(/['"`]/g, "");
-    const priority = params[1] ? params[1].replace(/['"`]/g, "") : "lazy";
-    const id = `island-${islandName}-${Math.random().toString(36).substring(2, 9)}`;
-    const propsMatch = content.match(/<script\s+props\s*>([\s\S]*?)<\/script>/i);
-    const propsScript = propsMatch ? propsMatch[1].trim() : "";
-    const contentWithoutProps = propsMatch ? content.replace(propsMatch[0], "") : content;
-    return `<div data-island="${islandName}" data-island-id="${id}" data-priority="${priority}">
-      ${contentWithoutProps}
-      <script type="application/json" data-island-props="${id}">
-        ${propsScript ? `{${propsScript}}` : "{}"}
-      </script>
-    </div>`;
-  }
-};
-function registerStreamingDirectives(options = {}) {
-  const directives = [];
-  if (options.hydration?.enabled) {
-    directives.push(islandDirective);
-  }
-  return directives;
-}
-async function processSectionDirectives(content, context, filePath, _options = {}) {
-  return content;
-}
-
-// src/index.ts
-var src_default = {};
-export {
-  webComponentDirectiveHandler,
-  validators,
-  unescapeHtml,
-  transitionDirective,
-  templateCache,
-  structuredDataDirective,
-  streamTemplate,
-  setGlobalContext,
-  serveStxFile,
-  serveMultipleStxFiles,
-  serveFile,
-  serve2 as serve,
-  scrollAnimateDirective,
-  screenReaderDirective,
-  scanA11yIssues,
-  safeExecuteAsync,
-  safeExecute,
-  runPreProcessingMiddleware,
-  runPostProcessingMiddleware,
-  resolveTemplatePath,
-  renderComponent,
-  registerStreamingDirectives,
-  registerSeoDirectives,
-  registerComponentDirectives,
-  registerAnimationDirectives,
-  registerA11yDirectives,
-  readMarkdownFile,
-  processTranslateDirective,
-  processStructuredData,
-  processStackReplacements,
-  processStackPushDirectives,
-  processSeoDirective,
-  processSectionDirectives,
-  processOnceDirective,
-  processMiddleware,
-  processMetaDirectives,
-  processMarkdownFileDirectives,
-  processMarkdownDirectives,
-  processLoops,
-  processJsonDirective,
-  processIncludes,
-  processForms,
-  processFormInputDirectives,
-  processFormDirectives,
-  processExpressions,
-  processErrorDirective,
-  processDirectives,
-  processCustomDirectives,
-  processBasicFormDirectives,
-  processAnimationDirectives,
-  processA11yDirectives,
-  partialsCache,
-  onceStore,
-  motionDirective,
-  metaDirective,
-  markdownDirectiveHandler,
-  markdownCache,
-  loadTranslation,
-  islandDirective,
-  injectSeoTags,
-  initFile,
-  hashFilePath,
-  gitHash,
-  getTranslation,
-  getSourceLineInfo,
-  getScreenReaderOnlyStyle,
-  generateTemplatesDocs,
-  generateDocs,
-  generateDirectivesDocs,
-  generateComponentsDocs,
-  generateComponentDoc,
-  formatStxContent,
-  formatDocsAsMarkdown,
-  formatDocsAsJson,
-  formatDocsAsHtml,
-  findComponentFiles,
-  fileExists,
-  extractVariables,
-  extractComponentProps,
-  extractComponentDescription,
-  evaluateExpression,
-  evaluateAuthExpression,
-  escapeHtml,
-  errorRecovery,
-  errorLogger,
-  docsCommand,
-  devHelpers,
-  defineStxConfig,
-  defaultI18nConfig,
-  defaultFilters,
-  defaultConfig,
-  src_default as default,
-  createTranslateFilter,
-  createStreamRenderer,
-  createRoute,
-  createMiddleware,
-  createEnhancedError,
-  createDetailedErrorMessage,
-  config,
-  componentDirective,
-  clearOnceStore,
-  checkCache,
-  checkA11y,
-  cacheTemplate,
-  buildWebComponents,
-  applyFilters,
-  animationGroupDirective,
-  analyzeTemplate,
-  analyzeProject,
-  a11yDirective,
-  TransitionType,
-  TransitionEase,
-  TransitionDirection,
-  StxSyntaxError,
-  StxSecurityError,
-  StxRuntimeError,
-  StxFileError,
-  StxError,
-  ErrorLogger,
-  DEFAULT_TRANSITION_OPTIONS
-};
-
-export { analyzeProject, plugin, serveStxFile, serveMultipleStxFiles, docsCommand, formatStxContent, initFile, gitHash };