@stacksjs/stx 0.0.9 → 0.1.6

package/dist/src/index.js

@@ -1,37 +1,52 @@
 // @bun
 import {
+  DEFAULT_TRANSITION_OPTIONS,
+  ErrorLogger,
+  StxError,
+  StxFileError,
+  StxRuntimeError,
+  StxSecurityError,
+  StxSyntaxError,
+  TransitionDirection,
+  TransitionEase,
+  TransitionType,
+  a11yDirective,
+  animationGroupDirective,
+  applyFilters,
   buildWebComponents,
+  checkA11y,
+  clearOnceStore,
+  componentDirective,
   config,
-  defaultConfig,
-  docsCommand,
-  extractComponentDescription,
-  extractComponentProps,
-  findComponentFiles,
-  formatDocsAsHtml,
-  formatDocsAsJson,
-  formatDocsAsMarkdown,
-  generateComponentDoc,
-  generateComponentsDocs,
-  generateDirectivesDocs,
-  generateDocs,
-  generateTemplatesDocs,
-  webComponentDirectiveHandler
-} from "../chunk-9ynf73q9.js";
-import {
-  applyFilters,
   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,
@@ -44,31 +59,407 @@ import {
   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,
-  unescapeHtml
-} from "../chunk-8ehp5m3y.js";
-import"../chunk-ywm063e4.js";
-
-// ../bun-plugin/src/index.ts
+  structuredDataDirective,
+  transitionDirective,
+  unescapeHtml,
+  validators,
+  webComponentDirectiveHandler
+} from "../chunk-2ndtnc0t.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 = {
-      ...defaultConfig,
+      ...config,
       ...build.config?.stx
     };
     const allDependencies = new Set;
-    const webComponentsPath = options.webComponents?.enabled ? `./${path.relative(path.dirname(build.config?.outdir || "dist"), options.webComponents.outputDir || "dist/web-components")}` : "/web-components";
+    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 {
@@ -77,132 +468,2440 @@ var plugin = {
         if (options.debug && components.length > 0) {
           console.log(`Successfully built ${components.length} web components`);
         }
-      } catch (error) {
-        console.error("Failed to build web components:", error);
+      } 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";
       }
     }
-    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"
-            };
-          }
+  }
+  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>`;
         }
-        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: path.dirname(filePath),
-          __stx: {
-            webComponentsPath,
-            builtComponents
-          }
-        };
-        await extractVariables(scriptContent, context, filePath);
-        let output = templateContent;
-        output = await processDirectives(output, 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`);
-          }
+        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 {
-          contents: output,
-          loader: "html"
-        };
-      } catch (error) {
-        console.error("STX Plugin Error:", error);
-        return {
-          contents: `<!DOCTYPE html><html><body><h1>STX Rendering Error</h1><pre>${error.message || String(error)}</pre></body></html>`,
-          loader: "html"
-        };
       }
+    }
+    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()} !!}`;
     });
   }
-};
-// src/caching.ts
-import fs from "fs";
-import path2 from "path";
-var templateCache = new Map;
-async function checkCache(filePath, options) {
+  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 cachePath = path2.resolve(options.cachePath);
-    const cacheFile = path2.join(cachePath, `${hashFilePath(filePath)}.html`);
-    const metaFile = path2.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;
+    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...`);
     }
-    return await Bun.file(cacheFile).text();
-  } catch (err) {
-    console.warn(`Cache error for ${filePath}:`, err);
-    return null;
+    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;
   }
 }
-async function cacheTemplate(filePath, output, dependencies, options) {
-  try {
-    const cachePath = path2.resolve(options.cachePath);
-    await fs.promises.mkdir(cachePath, { recursive: true });
-    const cacheFile = path2.join(cachePath, `${hashFilePath(filePath)}.html`);
-    const metaFile = path2.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()
+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 Bun.write(metaFile, JSON.stringify(meta, null, 2));
-    templateCache.set(filePath, {
-      output,
-      mtime: stats.mtime.getTime(),
-      dependencies
+    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();
+      }
     });
-  } catch (err) {
-    console.warn(`Failed to cache template ${filePath}:`, err);
   }
+  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 hashFilePath(filePath) {
-  const hash = new Bun.CryptoHasher("sha1").update(filePath).digest("hex");
-  return hash.substring(0, 16);
+function createMiddleware(handler) {
+  return handler;
+}
+function createRoute(handler) {
+  return handler;
 }
 // src/streaming.ts
-import path3 from "path";
+import path7 from "path";
 var defaultStreamingConfig = {
   enabled: true,
   bufferSize: 1024 * 16,
   strategy: "auto",
   timeout: 30000
 };
-var SECTION_PATTERN = /<!-- @section:([a-zA-Z0-9_-]+) -->([\s\S]*?)<!-- @endsection:\1 -->/g;
+var SECTION_PATTERN = /<!-- @section:([\w-]+) -->([\s\S]*?)<!-- @endsection:\1 -->/g;
 async function streamTemplate(templatePath, data = {}, options = {}) {
   const fullOptions = {
     ...defaultConfig,
@@ -222,7 +2921,7 @@ async function streamTemplate(templatePath, data = {}, options = {}) {
         const context = {
           ...data,
           __filename: templatePath,
-          __dirname: path3.dirname(templatePath)
+          __dirname: path7.dirname(templatePath)
         };
         await extractVariables(scriptContent, context, templatePath);
         const dependencies = new Set;
@@ -244,7 +2943,7 @@ async function createStreamRenderer(templatePath, options = {}) {
       ...options.streaming
     }
   };
-  let content = await Bun.file(templatePath).text();
+  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, "");
@@ -257,13 +2956,13 @@ async function createStreamRenderer(templatePath, options = {}) {
     const sectionContent = match[2];
     sections[sectionName] = sectionContent;
   }
-  let shellTemplate = templateContent.replace(SECTION_PATTERN, "");
+  const shellTemplate = templateContent.replace(SECTION_PATTERN, "");
   const renderer = {
     renderShell: async (data = {}) => {
       const context = {
         ...data,
         __filename: templatePath,
-        __dirname: path3.dirname(templatePath)
+        __dirname: path7.dirname(templatePath)
       };
       await extractVariables(scriptContent, context, templatePath);
       const dependencies = new Set;
@@ -277,7 +2976,7 @@ async function createStreamRenderer(templatePath, options = {}) {
         const context = {
           ...data,
           __filename: templatePath,
-          __dirname: path3.dirname(templatePath)
+          __dirname: path7.dirname(templatePath)
         };
         await extractVariables(scriptContent, context, templatePath);
         const dependencies = new Set;
@@ -299,7 +2998,7 @@ async function createStreamRenderer(templatePath, options = {}) {
 var islandDirective = {
   name: "island",
   hasEndTag: true,
-  handler: (content, params, context, filePath) => {
+  handler: (content, params, _context, _filePath) => {
     if (!params || params.length === 0) {
       throw new Error("Island directive requires a name parameter");
     }
@@ -324,29 +3023,50 @@ function registerStreamingDirectives(options = {}) {
   }
   return directives;
 }
-async function processSectionDirectives(content, context, filePath, options = {}) {
+async function processSectionDirectives(content, context, filePath, _options = {}) {
   return content;
 }
 
 // src/index.ts
-var src_default = plugin;
+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,
@@ -359,18 +3079,29 @@ export {
   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,
@@ -382,16 +3113,43 @@ export {
   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
+  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 };