@bytefaceinc/web-lang 0.1.1

package/compiler.js

@@ -0,0 +1,4602 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * WEB compiler
+ * ------------
+ * This standalone Node.js compiler parses WEB source, builds a tiny AST plus
+ * symbol table, and emits HTML and CSS. Script mode preserves the original
+ * `layout.web` -> `index.html` + `styles.css` flow, while the exported API can
+ * compile any `.web` file.
+ *
+ * The implementation is intentionally explicit and heavily commented so the
+ * parsing and code generation steps are easy to follow.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const vm = require('vm');
+
+const DEFAULT_INPUT_FILE = 'layout.web';
+const DEFAULT_HTML_OUTPUT_FILE = 'index.html';
+const DEFAULT_CSS_OUTPUT_FILE = 'styles.css';
+const DEFAULT_DOCUMENT_TITLE = 'WEB Output';
+const JAVASCRIPT_INJECTION_TIMEOUT_MS = 1000;
+const VOID_HTML_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+
+class CompilerError extends Error {
+  constructor(message, line, column, options = {}) {
+    super(line && column ? `${message} (line ${line}, column ${column})` : message);
+    this.name = 'CompilerError';
+    this.rawMessage = message;
+    this.line = line;
+    this.column = column;
+    this.actual = options.actual || null;
+    this.rule = options.rule || null;
+    this.hint = options.hint || null;
+    this.example = options.example || null;
+    this.phase = options.phase || null;
+    this.sourceName = options.sourceName || null;
+    this.isEnhanced = false;
+  }
+}
+
+function variableDefineBlockMessage() {
+  return 'Variables must be declared inside a top-level define { ... } block before any rules. Example: define { @width = "10px"; }';
+}
+
+function typeDefineBlockMessage() {
+  return 'Type declarations must be declared inside a top-level define { ... } block before any rules. Example: define { Button heroButton; }';
+}
+
+function styleInheritanceDefineBlockMessage() {
+  return 'Style inheritance must be declared inside a top-level define { ... } block before any rules. Example: define { heroButton extends buttonFrame; }';
+}
+
+function defineBlockPlacementMessage() {
+  return 'The define { ... } block must appear once at the top of the file before any rules.';
+}
+
+function attrsBlockPlacementMessage() {
+  return '::attrs blocks must be nested directly inside an element scope. Use them inside a normal DOM block, not inside styles, pseudos, or media queries.';
+}
+
+function attrsBlockContentMessage() {
+  return '::attrs blocks only support direct HTML attribute assignments like href = "/docs";';
+}
+
+function scriptBlockPlacementMessage() {
+  return '::script blocks must be declared at the top level outside element, style, pseudo, and media scopes.';
+}
+
+function scriptBlockContentMessage() {
+  return '::script blocks only support direct attribute assignments and a single code { ... } block.';
+}
+
+function headBlockPlacementMessage() {
+  return '::head blocks must be declared at the top level outside element, style, pseudo, and media scopes.';
+}
+
+function headBlockContentMessage() {
+  return '::head blocks only support meta { ... } and link { ... } entries.';
+}
+
+function headEntryContentMessage(tagName) {
+  return `${tagName} blocks inside ::head only support direct HTML attribute assignments like name = "description";`;
+}
+
+function globalStyleScopePlacementMessage() {
+  return 'Global style blocks using "*" or "html" must be declared at the top level or inside a top-level ::media block without a parent selector.';
+}
+
+function runCompilerStage(phase, source, sourceName, work) {
+  try {
+    return work();
+  } catch (error) {
+    throw enhanceCompilerError(error, { source, sourceName, phase });
+  }
+}
+
+function enhanceCompilerError(error, options = {}) {
+  if (!(error instanceof CompilerError) || error.isEnhanced) {
+    return error;
+  }
+
+  const sourceName = options.sourceName || error.sourceName || DEFAULT_INPUT_FILE;
+  const phase = options.phase || error.phase || 'compilation';
+  const guidance = inferCompilerErrorGuidance(error, options.source);
+  const locationLabel = error.line && error.column
+    ? `${sourceName}:${error.line}:${error.column}`
+    : sourceName;
+  const foundLabel = error.actual || describeSyntaxAtLocation(options.source, error.line, error.column);
+  const frame = buildCompilerCodeFrame(options.source, error.line, error.column);
+  const messageLines = [
+    formatCompilerErrorSummary(error),
+    `Source: ${locationLabel}`,
+    `Phase: ${phase}`,
+  ];
+
+  if (guidance.rule) {
+    messageLines.push(`Violation: ${guidance.rule}`);
+  }
+
+  if (foundLabel) {
+    messageLines.push(`Found: ${foundLabel}`);
+  }
+
+  if (guidance.hint) {
+    messageLines.push(`How to fix: ${guidance.hint}`);
+  }
+
+  if (guidance.example) {
+    messageLines.push(`Example: ${guidance.example}`);
+  }
+
+  if (frame) {
+    messageLines.push('Context:');
+    messageLines.push(frame);
+  }
+
+  error.message = messageLines.join('\n');
+  error.phase = phase;
+  error.sourceName = sourceName;
+  error.isEnhanced = true;
+  return error;
+}
+
+function formatCompilerErrorSummary(error) {
+  if (error.line && error.column) {
+    return `${error.rawMessage || error.message} (line ${error.line}, column ${error.column})`;
+  }
+
+  return error.rawMessage || error.message;
+}
+
+function inferCompilerErrorGuidance(error, source) {
+  const message = error.rawMessage || error.message;
+
+  if (message.startsWith('Unexpected character')) {
+    return {
+      rule: 'Only valid WEB syntax tokens may appear here. Bare punctuation such as `#`, `?`, or stray symbols are not valid values by themselves.',
+      hint: 'Remove the unsupported character, or if you meant a literal value, wrap it in quotes or a template literal first.',
+      example: 'heroCard.backgroundColor = "#1f2a44";',
+    };
+  }
+
+  if (message.startsWith('Unexpected value token')) {
+    return {
+      rule: 'Assignment values in WEB must be a string, template literal, number, percentage, identifier, variable reference, or `js` literal.',
+      hint: 'Replace the highlighted token with a supported value form and keep the full assignment on one complete statement.',
+      example: 'heroTitle.textContent = "Hello";',
+    };
+  }
+
+  if (message.includes('Expected ";" after')) {
+    return {
+      rule: 'WEB terminates declarations, assignments, and attribute entries with a semicolon.',
+      hint: 'Add `;` at the end of the current statement before starting the next statement or closing the block.',
+      example: 'heroTitle.textContent = "Hello";',
+    };
+  }
+
+  if (message.includes('Expected "=" after')) {
+    return {
+      rule: 'WEB uses `=` between the left-hand side and the assigned value.',
+      hint: 'Insert `=` between the property, variable, or attribute name and the value.',
+      example: 'heroTitle.color = "#223344";',
+    };
+  }
+
+  if (message.includes('Expected "{" after')) {
+    return {
+      rule: 'Block headers in WEB must be followed immediately by an opening `{`.',
+      hint: 'Add `{` after the block header so the compiler knows where the block body begins.',
+      example: 'heroSection {\n  padding = "2rem";\n}',
+    };
+  }
+
+  if (message.includes('Expected "}" after') || message.startsWith('Unterminated ')) {
+    return {
+      rule: 'Every WEB block opened with `{` must be closed with a matching `}`.',
+      hint: 'Close the highlighted block and check that nested blocks are balanced in the correct order.',
+      example: 'heroSection {\n  padding = "2rem";\n}',
+    };
+  }
+
+  if (message === 'Expected an identifier after "."') {
+    return {
+      rule: 'Dot notation paths in WEB must continue with a valid identifier after each `.`.',
+      hint: 'Replace the invalid segment with a normal identifier such as `heroTitle` or remove the extra dot.',
+      example: 'pageMain.heroSection.heroTitle.textContent = "Hello";',
+    };
+  }
+
+  if (message === 'Expected a variable name after "@"') {
+    return {
+      rule: 'Variables start with `@` and then a valid identifier name.',
+      hint: 'Put a letter, `_`, or `$` immediately after `@`, then continue with letters, digits, `_`, or `$`.',
+      example: 'define {\n  @pageWidth = "960px";\n}',
+    };
+  }
+
+  if (message === 'Invalid pseudo block header' || message.includes('Expected a pseudo selector, media query, or keyframes name after "::"')) {
+    return {
+      rule: 'A `::` block must name a supported WEB construct such as `::hover`, `::before`, `::media (...)`, `::attrs`, `::script`, `::head`, or `::keyframes name`.',
+      hint: 'Rename the pseudo block to a supported form and keep any required selector or query text directly after the header.',
+      example: 'buttonPrimary {\n  ::hover {\n    transform = "translateY(-2px)";\n  }\n}',
+    };
+  }
+
+  if (message.startsWith('Expected a keyframe stage such as')) {
+    return {
+      rule: 'Keyframe stages must be `from`, `to`, or a percentage like `50%`.',
+      hint: 'Replace the highlighted token with a valid keyframe stage label before opening the stage block.',
+      example: '::keyframes fadeIn {\n  from {\n    opacity = 0;\n  }\n  to {\n    opacity = 1;\n  }\n}',
+    };
+  }
+
+  if (message === 'Unterminated string literal') {
+    return {
+      rule: 'Quoted WEB strings must end with the same quote character used to open them.',
+      hint: 'Add the missing closing quote before the statement ends.',
+      example: 'heroTitle.textContent = "Welcome";',
+    };
+  }
+
+  if (message === 'Unterminated template literal') {
+    return {
+      rule: 'Template literals in WEB must close with a backtick.',
+      hint: 'Add the closing backtick before the semicolon or block boundary.',
+      example: 'card.raw = `\n  &:hover { transform: scale(1.02); }\n`;',
+    };
+  }
+
+  if (message === 'Unterminated JavaScript inject literal') {
+    return {
+      rule: 'Compile-time JavaScript literals must close with a backtick after `js`.',
+      hint: 'Finish the `js` literal with a closing backtick and then complete the enclosing WEB statement.',
+      example: 'heroCopy.innerHTML = js`return "<strong>Hello</strong>";`;',
+    };
+  }
+
+  if (message === 'Only one top-level define { ... } block is allowed.' || message === defineBlockPlacementMessage()) {
+    return {
+      rule: 'WEB allows at most one top-level `define { ... }` block, and it must appear before normal rules.',
+      hint: 'Merge additional declarations into the existing top-level define block instead of creating another one later in the file.',
+      example: 'define {\n  @space = "1rem";\n  Button primaryButton;\n}',
+    };
+  }
+
+  if (message === variableDefineBlockMessage() || message === typeDefineBlockMessage() || message === styleInheritanceDefineBlockMessage()) {
+    return {
+      rule: 'Variables, type declarations, and style inheritance declarations are only valid inside the top-level `define { ... }` block.',
+      hint: 'Move the highlighted declaration into the single top-level define block before any element rules.',
+      example: 'define {\n  @space = "1rem";\n  Button primaryButton;\n  primaryButton extends buttonBase;\n}',
+    };
+  }
+
+  if (message.startsWith('Unknown variable')) {
+    return {
+      rule: 'Every variable reference must resolve to a declaration inside the top-level `define { ... }` block.',
+      hint: 'Declare the variable before use, or fix the variable name so it matches an existing declaration exactly.',
+      example: 'define {\n  @accent = "#94a7ca";\n}',
+    };
+  }
+
+  if (message.startsWith('Circular variable reference') || message.startsWith('Circular type inheritance') || message.startsWith('Circular style inheritance')) {
+    return {
+      rule: 'Inheritance and variable references must form an acyclic graph so the compiler can resolve them deterministically.',
+      hint: 'Break the cycle by removing or renaming one link in the chain so resolution flows in one direction.',
+    };
+  }
+
+  if (message === attrsBlockContentMessage()) {
+    return {
+      rule: 'Inside `::attrs`, only direct HTML attribute assignments are valid.',
+      hint: 'Use only `attributeName = value;` entries inside `::attrs`, and move style/content assignments back to the normal element scope.',
+      example: '::attrs {\n  href = "/docs";\n  ariaLabel = "Open docs";\n}',
+    };
+  }
+
+  if (message === headBlockContentMessage() || message === scriptBlockContentMessage()) {
+    return {
+      rule: 'This special block only supports a narrow set of child entries defined by the WEB grammar.',
+      hint: 'Use the allowed entry types for that block and move unrelated statements elsewhere.',
+    };
+  }
+
+  const sourceHint = source && error.line ? ` Review the highlighted line and make sure the current statement is complete before the next token begins.` : '';
+
+  return {
+    rule: 'The highlighted code does not match the WEB grammar or semantic rules expected at this point in compilation.',
+    hint: `Adjust the highlighted statement so it follows the WEB syntax required by the surrounding block.${sourceHint}`,
+  };
+}
+
+function describeSyntaxAtLocation(source, line, column) {
+  if (!source || !line || !column) {
+    return null;
+  }
+
+  const lines = source.split(/\r?\n/);
+  const lineText = lines[line - 1];
+
+  if (typeof lineText !== 'string') {
+    return 'end of file';
+  }
+
+  if (column - 1 >= lineText.length) {
+    return line === lines.length ? 'end of file' : 'end of line';
+  }
+
+  const slice = lineText.slice(column - 1);
+  const tokenMatch = slice.match(/^\S+/);
+
+  if (tokenMatch) {
+    return `token ${JSON.stringify(truncateDiagnosticText(tokenMatch[0], 48))}`;
+  }
+
+  return `character ${JSON.stringify(lineText[column - 1])}`;
+}
+
+function buildCompilerCodeFrame(source, line, column, contextRadius = 1) {
+  if (!source || !line || !column) {
+    return '';
+  }
+
+  const lines = source.split(/\r?\n/);
+  const targetLine = lines[line - 1];
+
+  if (typeof targetLine !== 'string') {
+    return '';
+  }
+
+  const startLine = Math.max(1, line - contextRadius);
+  const endLine = Math.min(lines.length, line + contextRadius);
+  const lineNumberWidth = String(endLine).length;
+  const frameLines = [];
+
+  for (let currentLine = startLine; currentLine <= endLine; currentLine += 1) {
+    const rawText = lines[currentLine - 1];
+    const expandedText = expandTabs(rawText);
+    const marker = currentLine === line ? '>' : ' ';
+    frameLines.push(`${marker} ${String(currentLine).padStart(lineNumberWidth)} | ${expandedText}`);
+
+    if (currentLine === line) {
+      const visualColumn = computeVisualColumn(rawText, column);
+      frameLines.push(`  ${' '.repeat(lineNumberWidth)} | ${' '.repeat(Math.max(0, visualColumn - 1))}^`);
+    }
+  }
+
+  return frameLines.join('\n');
+}
+
+function expandTabs(text, tabSize = 2) {
+  return String(text).replace(/\t/g, ' '.repeat(tabSize));
+}
+
+function computeVisualColumn(text, column, tabSize = 2) {
+  let visualColumn = 1;
+
+  for (let index = 0; index < Math.max(0, column - 1) && index < text.length; index += 1) {
+    visualColumn += text[index] === '\t' ? tabSize : 1;
+  }
+
+  return visualColumn;
+}
+
+function truncateDiagnosticText(text, maxLength = 48) {
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  return `${text.slice(0, Math.max(0, maxLength - 3))}...`;
+}
+
+function describeTokenForDiagnostic(token) {
+  if (!token || token.type === 'EOF') {
+    return 'end of file';
+  }
+
+  if (token.value === null || token.value === undefined || token.value === '') {
+    return `token ${token.type}`;
+  }
+
+  return `token ${token.type} ${JSON.stringify(truncateDiagnosticText(String(token.value)))}`;
+}
+
+function main() {
+  const workingDirectory = process.cwd();
+  const inputPath = path.join(workingDirectory, DEFAULT_INPUT_FILE);
+  const htmlPath = path.join(workingDirectory, DEFAULT_HTML_OUTPUT_FILE);
+  const cssPath = path.join(workingDirectory, DEFAULT_CSS_OUTPUT_FILE);
+
+  compileFile(inputPath, {
+    htmlPath,
+    cssPath,
+    stylesheetHref: DEFAULT_CSS_OUTPUT_FILE,
+  });
+
+  console.log(`Compiled ${DEFAULT_INPUT_FILE} -> ${DEFAULT_HTML_OUTPUT_FILE}, ${DEFAULT_CSS_OUTPUT_FILE}`);
+}
+
+function compileSource(source, options = {}) {
+  const sourceName = options.sourceName || DEFAULT_INPUT_FILE;
+  const lexer = new Lexer(source);
+  const tokens = runCompilerStage('lexing', source, sourceName, () => lexer.tokenize());
+  const parser = new Parser(tokens);
+  const ast = runCompilerStage('parsing', source, sourceName, () => parser.parseProgram());
+  const variableTable = runCompilerStage('semantic analysis', source, sourceName, () => buildVariableTable(ast));
+  const resolveContext = {
+    variableTable,
+    sourceName,
+  };
+  const symbolTable = runCompilerStage('semantic analysis', source, sourceName, () => buildSymbolTable(ast));
+  const styleInheritanceTable = runCompilerStage('semantic analysis', source, sourceName, () => buildStyleInheritanceTable(ast));
+  const headEntries = runCompilerStage('HTML preparation', source, sourceName, () => buildHeadEntries(ast, resolveContext));
+  const scriptBlocks = runCompilerStage('HTML preparation', source, sourceName, () => buildScriptBlocks(ast, resolveContext));
+  const documentModel = runCompilerStage('HTML preparation', source, sourceName, () => buildDocumentModel(ast, symbolTable, resolveContext));
+  const styleModel = runCompilerStage('CSS preparation', source, sourceName, () => buildStyleModel(ast, resolveContext, styleInheritanceTable));
+  const htmlOutput = runCompilerStage('HTML generation', source, sourceName, () => generateHtml(documentModel, symbolTable, headEntries, scriptBlocks, {
+    title: options.title || DEFAULT_DOCUMENT_TITLE,
+    stylesheetHref: options.stylesheetHref || DEFAULT_CSS_OUTPUT_FILE,
+  }));
+  const cssOutput = runCompilerStage('CSS generation', source, sourceName, () => generateCss(styleModel));
+
+  return {
+    htmlOutput,
+    cssOutput,
+    stats: collectCompileStats(tokens, ast, documentModel, styleModel, headEntries, scriptBlocks),
+  };
+}
+
+function compileFile(inputPath, options = {}) {
+  const resolvedInputPath = path.resolve(inputPath);
+
+  if (!fs.existsSync(resolvedInputPath)) {
+    throw new CompilerError(`Missing input file: ${inputPath}`);
+  }
+
+  const inputStats = fs.statSync(resolvedInputPath);
+
+  if (inputStats.isDirectory()) {
+    throw new CompilerError(`Expected a .web file but found a directory: ${inputPath}`);
+  }
+
+  if (!inputStats.isFile()) {
+    throw new CompilerError(`Unsupported input path: ${inputPath}`);
+  }
+
+  if (path.extname(resolvedInputPath).toLowerCase() !== '.web') {
+    throw new CompilerError(`Unsupported input file: ${path.basename(resolvedInputPath)}. Expected a .web file.`);
+  }
+
+  const outputPaths = resolveCompileOutputPaths(resolvedInputPath, options);
+  const source = fs.readFileSync(resolvedInputPath, 'utf8');
+  const result = compileSource(source, {
+    sourceName: options.sourceName || path.basename(resolvedInputPath),
+    title: options.title,
+    stylesheetHref: options.stylesheetHref || path.basename(outputPaths.cssPath),
+  });
+
+  if (options.write !== false) {
+    fs.writeFileSync(outputPaths.htmlPath, result.htmlOutput, 'utf8');
+    fs.writeFileSync(outputPaths.cssPath, result.cssOutput, 'utf8');
+  }
+
+  return {
+    ...result,
+    inputPath: resolvedInputPath,
+    htmlPath: outputPaths.htmlPath,
+    cssPath: outputPaths.cssPath,
+    sourceBytes: Buffer.byteLength(source),
+    htmlBytes: Buffer.byteLength(result.htmlOutput),
+    cssBytes: Buffer.byteLength(result.cssOutput),
+  };
+}
+
+function resolveCompileOutputPaths(inputPath, options = {}) {
+  const inputDirectory = path.dirname(inputPath);
+  const inputName = path.basename(inputPath, path.extname(inputPath));
+
+  return {
+    htmlPath: path.resolve(options.htmlPath || path.join(inputDirectory, `${inputName}.html`)),
+    cssPath: path.resolve(options.cssPath || path.join(inputDirectory, `${inputName}.css`)),
+  };
+}
+
+function collectCompileStats(tokens, ast, documentModel, styleModel, headEntries, scriptBlocks) {
+  return {
+    tokenCount: tokens.length,
+    statementCount: ast.body.length,
+    domNodeCount: countRenderedHtmlNodes(documentModel),
+    cssRuleCount: styleModel.entries.filter((entry) => entry.type === 'rule').length,
+    keyframesCount: styleModel.entries.filter((entry) => entry.type === 'keyframes').length,
+    headEntryCount: headEntries.length,
+    scriptBlockCount: scriptBlocks.length,
+  };
+}
+
+function countRenderedHtmlNodes(node) {
+  let total = 0;
+
+  for (const child of node.children) {
+    if (!child.renderInHtml) {
+      continue;
+    }
+
+    total += 1 + countRenderedHtmlNodes(child);
+  }
+
+  return total;
+}
+
+/**
+ * LEXER
+ * -----
+ * WEB is deliberately small, so the lexer only needs a handful of token types:
+ * identifiers, variables, literals, dots, equals, braces, and semicolons.
+ *
+ * It also strips line comments (`// comment`) so the parser only sees the
+ * meaningful syntax.
+ */
+class Lexer {
+  constructor(source) {
+    this.source = source;
+    this.index = 0;
+    this.line = 1;
+    this.column = 1;
+    this.pendingScriptBlock = false;
+    this.scriptBlockDepth = 0;
+  }
+
+  tokenize() {
+    const tokens = [];
+
+    while (!this.isAtEnd()) {
+      this.skipWhitespaceAndComments();
+
+      if (this.isAtEnd()) {
+        break;
+      }
+
+      const startLine = this.line;
+      const startColumn = this.column;
+      const char = this.peek();
+
+      if (this.scriptBlockDepth > 0 && this.startsScriptCodeBlock()) {
+        tokens.push(this.readScriptCodeBlock(startLine, startColumn));
+        continue;
+      }
+
+      if (this.startsJavaScriptLiteral()) {
+        tokens.push(this.readJavaScriptLiteral(startLine, startColumn));
+        continue;
+      }
+
+      if (char === ':' && this.peek(1) === ':') {
+        tokens.push(this.readPseudoHeader(startLine, startColumn));
+        continue;
+      }
+
+      if (char === '@') {
+        tokens.push(this.readVariableIdentifier(startLine, startColumn));
+        continue;
+      }
+
+      if (isIdentifierStart(char)) {
+        tokens.push(this.readIdentifier(startLine, startColumn));
+        continue;
+      }
+
+      if (char === '-' && isDigit(this.peek(1))) {
+        tokens.push(this.readNumber(startLine, startColumn));
+        continue;
+      }
+
+      if (isDigit(char)) {
+        tokens.push(this.readNumber(startLine, startColumn));
+        continue;
+      }
+
+      if (char === '"' || char === '\'') {
+        tokens.push(this.readString(startLine, startColumn));
+        continue;
+      }
+
+      if (char === '`') {
+        tokens.push(this.readTemplateLiteral(startLine, startColumn));
+        continue;
+      }
+
+      switch (char) {
+        case '*':
+          tokens.push(this.makeToken('STAR', '*', startLine, startColumn));
+          this.advance();
+          break;
+        case '.':
+          tokens.push(this.makeToken('DOT', '.', startLine, startColumn));
+          this.advance();
+          break;
+        case '{':
+          tokens.push(this.makeToken('LBRACE', '{', startLine, startColumn));
+          this.advance();
+          if (this.pendingScriptBlock) {
+            this.scriptBlockDepth += 1;
+            this.pendingScriptBlock = false;
+          } else if (this.scriptBlockDepth > 0) {
+            this.scriptBlockDepth += 1;
+          }
+          break;
+        case '}':
+          tokens.push(this.makeToken('RBRACE', '}', startLine, startColumn));
+          this.advance();
+          if (this.scriptBlockDepth > 0) {
+            this.scriptBlockDepth -= 1;
+          }
+          break;
+        case '=':
+          tokens.push(this.makeToken('EQUALS', '=', startLine, startColumn));
+          this.advance();
+          break;
+        case ';':
+          tokens.push(this.makeToken('SEMICOLON', ';', startLine, startColumn));
+          this.advance();
+          break;
+        default:
+          throw new CompilerError(`Unexpected character "${char}"`, startLine, startColumn, {
+            actual: `character ${JSON.stringify(char)}`,
+          });
+      }
+    }
+
+    tokens.push(this.makeToken('EOF', null, this.line, this.column));
+    return tokens;
+  }
+
+  skipWhitespaceAndComments() {
+    while (!this.isAtEnd()) {
+      const char = this.peek();
+      const next = this.peek(1);
+
+      if (char === '/' && next === '/') {
+        while (!this.isAtEnd() && this.peek() !== '\n') {
+          this.advance();
+        }
+        continue;
+      }
+
+      if (char === '/' && next === '*') {
+        this.advance();
+        this.advance();
+
+        while (!this.isAtEnd() && !(this.peek() === '*' && this.peek(1) === '/')) {
+          this.advance();
+        }
+
+        if (this.isAtEnd()) {
+          throw new CompilerError('Unterminated block comment', this.line, this.column);
+        }
+
+        this.advance();
+        this.advance();
+        continue;
+      }
+
+      if (/\s/.test(char)) {
+        this.advance();
+        continue;
+      }
+
+      break;
+    }
+  }
+
+  readIdentifier(line, column) {
+    let value = '';
+
+    while (!this.isAtEnd() && isIdentifierPart(this.peek())) {
+      value += this.advance();
+    }
+
+    return this.makeToken('IDENTIFIER', value, line, column);
+  }
+
+  readVariableIdentifier(line, column) {
+    let value = this.advance();
+
+    if (!isIdentifierStart(this.peek())) {
+      throw new CompilerError('Expected a variable name after "@"', line, column);
+    }
+
+    while (!this.isAtEnd() && isIdentifierPart(this.peek())) {
+      value += this.advance();
+    }
+
+    return this.makeToken('VARIABLE', value, line, column);
+  }
+
+  readPseudoHeader(line, column) {
+    this.advance(); // :
+    this.advance(); // :
+
+    let value = '';
+
+    while (!this.isAtEnd()) {
+      const char = this.peek();
+
+      if (char === '{') {
+        const trimmed = value.trim();
+
+        if (!trimmed) {
+          throw new CompilerError('Expected a pseudo selector, media query, or keyframes name after "::"', line, column);
+        }
+
+        const keywordMatch = trimmed.match(/^([A-Za-z][A-Za-z0-9_-]*)([\s\S]*)$/);
+
+        if (keywordMatch) {
+          const keyword = camelToKebab(keywordMatch[1]);
+          const remainder = keywordMatch[2].trim();
+
+          if (keyword === 'script' && !remainder) {
+            this.pendingScriptBlock = true;
+          }
+        }
+
+        return this.makeToken('PSEUDO', trimmed, line, column);
+      }
+
+      value += this.advance();
+    }
+
+    throw new CompilerError('Unterminated pseudo block header', line, column);
+  }
+
+  startsJavaScriptLiteral() {
+    return this.peek() === 'j' && this.peek(1) === 's' && this.peek(2) === '`';
+  }
+
+  readJavaScriptLiteral(line, column) {
+    this.advance(); // j
+    this.advance(); // s
+    this.advance(); // opening backtick
+
+    let value = '';
+
+    while (!this.isAtEnd()) {
+      const char = this.peek();
+      const next = this.peek(1);
+
+      if (char === '`') {
+        if (shouldStartNestedJavaScriptTemplate(value)) {
+          value += this.readNestedJavaScriptTemplate(line, column);
+          continue;
+        }
+
+        this.advance();
+        return this.makeToken('JAVASCRIPT', value, line, column);
+      }
+
+      if (char === '"' || char === '\'') {
+        value += this.readJavaScriptQuotedString(char, line, column);
+        continue;
+      }
+
+      if (char === '/' && next === '/') {
+        value += this.readJavaScriptLineComment();
+        continue;
+      }
+
+      if (char === '/' && next === '*') {
+        value += this.readJavaScriptBlockComment(line, column);
+        continue;
+      }
+
+      value += this.advance();
+    }
+
+    throw new CompilerError('Unterminated JavaScript inject literal', line, column);
+  }
+
+  readNumber(line, column) {
+    let value = '';
+
+    if (this.peek() === '-') {
+      value += this.advance();
+    }
+
+    while (!this.isAtEnd() && isDigit(this.peek())) {
+      value += this.advance();
+    }
+
+    if (this.peek() === '.' && isDigit(this.peek(1))) {
+      value += this.advance();
+      while (!this.isAtEnd() && isDigit(this.peek())) {
+        value += this.advance();
+      }
+    }
+
+    if (this.peek() === '%') {
+      value += this.advance();
+      return this.makeToken('PERCENTAGE', value, line, column);
+    }
+
+    return this.makeToken('NUMBER', value, line, column);
+  }
+
+  readString(line, column) {
+    const quote = this.advance();
+    let value = '';
+
+    while (!this.isAtEnd()) {
+      const char = this.advance();
+
+      if (char === quote) {
+        return this.makeToken('STRING', value, line, column);
+      }
+
+      if (char === '\\') {
+        value += this.readEscapeSequence(line, column);
+        continue;
+      }
+
+      value += char;
+    }
+
+    throw new CompilerError('Unterminated string literal', line, column);
+  }
+
+  readTemplateLiteral(line, column) {
+    this.advance(); // opening backtick
+    let value = '';
+
+    while (!this.isAtEnd()) {
+      const char = this.advance();
+
+      if (char === '`') {
+        return this.makeToken('TEMPLATE', value, line, column);
+      }
+
+      if (char === '\\') {
+        value += this.readEscapeSequence(line, column, true);
+        continue;
+      }
+
+      value += char;
+    }
+
+    throw new CompilerError('Unterminated template literal', line, column);
+  }
+
+  readNestedJavaScriptTemplate(line, column) {
+    let value = this.advance(); // opening backtick
+
+    while (!this.isAtEnd()) {
+      const char = this.peek();
+      const next = this.peek(1);
+
+      if (char === '\\') {
+        value += this.advance();
+        if (!this.isAtEnd()) {
+          value += this.advance();
+        }
+        continue;
+      }
+
+      if (char === '`') {
+        value += this.advance();
+        return value;
+      }
+
+      if (char === '$' && next === '{') {
+        value += this.advance();
+        value += this.advance();
+        value += this.readJavaScriptInterpolation(line, column);
+        continue;
+      }
+
+      value += this.advance();
+    }
+
+    throw new CompilerError('Unterminated nested JavaScript template literal', line, column);
+  }
+
+  readJavaScriptInterpolation(line, column) {
+    let value = '';
+    let depth = 1;
+
+    while (!this.isAtEnd() && depth > 0) {
+      const char = this.peek();
+      const next = this.peek(1);
+
+      if (char === '"' || char === '\'') {
+        value += this.readJavaScriptQuotedString(char, line, column);
+        continue;
+      }
+
+      if (char === '/' && next === '/') {
+        value += this.readJavaScriptLineComment();
+        continue;
+      }
+
+      if (char === '/' && next === '*') {
+        value += this.readJavaScriptBlockComment(line, column);
+        continue;
+      }
+
+      if (char === '`') {
+        value += this.readNestedJavaScriptTemplate(line, column);
+        continue;
+      }
+
+      if (char === '{') {
+        value += this.advance();
+        depth += 1;
+        continue;
+      }
+
+      if (char === '}') {
+        value += this.advance();
+        depth -= 1;
+        continue;
+      }
+
+      value += this.advance();
+    }
+
+    if (depth !== 0) {
+      throw new CompilerError('Unterminated JavaScript template interpolation', line, column);
+    }
+
+    return value;
+  }
+
+  readJavaScriptQuotedString(quote, line, column) {
+    let value = this.advance(); // opening quote
+
+    while (!this.isAtEnd()) {
+      const char = this.advance();
+      value += char;
+
+      if (char === '\\') {
+        if (!this.isAtEnd()) {
+          value += this.advance();
+        }
+        continue;
+      }
+
+      if (char === quote) {
+        return value;
+      }
+    }
+
+    throw new CompilerError('Unterminated JavaScript string literal inside js`...`', line, column);
+  }
+
+  readJavaScriptLineComment() {
+    let value = this.advance(); // /
+    value += this.advance(); // /
+
+    while (!this.isAtEnd() && this.peek() !== '\n') {
+      value += this.advance();
+    }
+
+    return value;
+  }
+
+  readJavaScriptBlockComment(line, column) {
+    let value = this.advance(); // /
+    value += this.advance(); // *
+
+    while (!this.isAtEnd()) {
+      const char = this.advance();
+      value += char;
+
+      if (char === '*' && this.peek() === '/') {
+        value += this.advance();
+        return value;
+      }
+    }
+
+    throw new CompilerError('Unterminated JavaScript block comment inside js`...`', line, column);
+  }
+
+  startsScriptCodeBlock() {
+    if (!isIdentifierStart(this.peek())) {
+      return false;
+    }
+
+    let index = this.index;
+    let value = '';
+
+    while (index < this.source.length && isIdentifierPart(this.source[index])) {
+      value += this.source[index];
+      index += 1;
+    }
+
+    if (value !== 'code') {
+      return false;
+    }
+
+    index = skipWhitespaceAndCommentsFromSource(this.source, index);
+    return this.source[index] === '{';
+  }
+
+  readScriptCodeBlock(line, column) {
+    const identifierToken = this.readIdentifier(line, column);
+
+    if (identifierToken.value !== 'code') {
+      throw new CompilerError('Expected "code" inside ::script', line, column);
+    }
+
+    this.skipWhitespaceAndComments();
+
+    if (this.peek() !== '{') {
+      throw new CompilerError('Expected "{" after code inside ::script', this.line, this.column);
+    }
+
+    this.advance();
+    const value = this.readRawScriptCodeBody(line, column);
+    return this.makeToken('SCRIPT_CODE', value, line, column);
+  }
+
+  readRawScriptCodeBody(line, column) {
+    let value = '';
+    let depth = 1;
+
+    while (!this.isAtEnd() && depth > 0) {
+      const char = this.peek();
+      const next = this.peek(1);
+
+      if (char === '"' || char === '\'') {
+        value += this.readJavaScriptQuotedString(char, line, column);
+        continue;
+      }
+
+      if (char === '/' && next === '/') {
+        value += this.readJavaScriptLineComment();
+        continue;
+      }
+
+      if (char === '/' && next === '*') {
+        value += this.readJavaScriptBlockComment(line, column);
+        continue;
+      }
+
+      if (char === '`') {
+        value += this.readNestedJavaScriptTemplate(line, column);
+        continue;
+      }
+
+      if (char === '{') {
+        value += this.advance();
+        depth += 1;
+        continue;
+      }
+
+      if (char === '}') {
+        this.advance();
+        depth -= 1;
+
+        if (depth === 0) {
+          return value;
+        }
+
+        value += '}';
+        continue;
+      }
+
+      value += this.advance();
+    }
+
+    throw new CompilerError('Unterminated code block inside ::script', line, column);
+  }
+
+  readEscapeSequence(line, column, allowBacktick = false) {
+    if (this.isAtEnd()) {
+      throw new CompilerError('Incomplete escape sequence', line, column);
+    }
+
+    const escaped = this.advance();
+    switch (escaped) {
+      case 'n':
+        return '\n';
+      case 'r':
+        return '\r';
+      case 't':
+        return '\t';
+      case '\\':
+        return '\\';
+      case '"':
+        return '"';
+      case '\'':
+        return '\'';
+      case '`':
+        if (allowBacktick) {
+          return '`';
+        }
+        return '`';
+      default:
+        return escaped;
+    }
+  }
+
+  makeToken(type, value, line, column) {
+    return { type, value, line, column };
+  }
+
+  peek(offset = 0) {
+    return this.source[this.index + offset];
+  }
+
+  advance() {
+    const char = this.source[this.index++];
+
+    if (char === '\n') {
+      this.line += 1;
+      this.column = 1;
+    } else {
+      this.column += 1;
+    }
+
+    return char;
+  }
+
+  isAtEnd() {
+    return this.index >= this.source.length;
+  }
+}
+
+/**
+ * PARSER
+ * ------
+ * The parser turns the token stream into an AST. WEB supports:
+ *
+ *   1. Top-level definitions:
+ *        define {
+ *          @space = "1rem";
+ *          Button customButton;
+ *          primaryButton extends customButton;
+ *        }
+ *   2. Direct assignments: `heroSection.customButton.padding = "1rem";`
+ *   3. Scoped blocks:
+ *        heroSection {
+ *          display = "grid";
+ *          customButton {
+ *            padding = "1rem";
+ *          }
+ *        }
+ *   4. CSS-only style scopes:
+ *        featureGrid {
+ *          styles {
+ *            featureCard {
+ *              padding = "1rem";
+ *            }
+ *          }
+ *        }
+ *   5. Pseudo / media / attrs / keyframes blocks:
+ *        featureCard {
+ *          ::hover {
+ *            background = "red";
+ *          }
+ *          ::attrs {
+ *            ariaLabel = "Open feature";
+ *          }
+ *        }
+ *
+ * Blocks are flattened into ordinary rule statements so later compiler stages
+ * can reason about HTML structure and CSS output separately.
+ */
+class Parser {
+  constructor(tokens) {
+    this.tokens = tokens;
+    this.current = 0;
+  }
+
+  parseProgram() {
+    const body = [];
+    let sawRule = false;
+    let sawDefineBlock = false;
+
+    while (!this.check('EOF')) {
+      if (!sawRule && !sawDefineBlock && this.isDefineBlockStart()) {
+        body.push(...this.parseDefineBlock());
+        sawDefineBlock = true;
+        continue;
+      }
+
+      if (this.isDefineBlockStart()) {
+        const token = this.peek();
+        const message = sawRule
+          ? defineBlockPlacementMessage()
+          : 'Only one top-level define { ... } block is allowed.';
+        throw new CompilerError(message, token.line, token.column);
+      }
+
+      if (this.isVariableDeclarationStart()) {
+        const token = this.peek();
+        throw new CompilerError(variableDefineBlockMessage(), token.line, token.column);
+      }
+
+      if (this.isDeclarationStart()) {
+        const token = this.peek();
+        throw new CompilerError(typeDefineBlockMessage(), token.line, token.column);
+      }
+
+      if (this.isStyleInheritanceDeclarationStart()) {
+        const token = this.peek();
+        throw new CompilerError(styleInheritanceDefineBlockMessage(), token.line, token.column);
+      }
+
+      const statements = this.parseStatement([], 'dom', [], []);
+      body.push(...statements);
+
+      if (statements.some((statement) => !isTopLevelDeclarationStatement(statement))) {
+        sawRule = true;
+      }
+    }
+
+    return { type: 'Program', body };
+  }
+
+  parseStatement(basePath, scopeKind = 'dom', selectorParts = [], atRules = []) {
+    if (this.isDefineBlockStart()) {
+      const token = this.peek();
+      throw new CompilerError(defineBlockPlacementMessage(), token.line, token.column);
+    }
+
+    if (this.isVariableDeclarationStart()) {
+      const token = this.peek();
+      throw new CompilerError(variableDefineBlockMessage(), token.line, token.column);
+    }
+
+    if (this.isDeclarationStart()) {
+      const token = this.peek();
+      throw new CompilerError(typeDefineBlockMessage(), token.line, token.column);
+    }
+
+    if (this.isStyleInheritanceDeclarationStart()) {
+      const token = this.peek();
+      throw new CompilerError(styleInheritanceDefineBlockMessage(), token.line, token.column);
+    }
+
+    if (this.isPseudoBlockStart()) {
+      return this.parsePseudoBlock(basePath, scopeKind, selectorParts, atRules);
+    }
+
+    if (this.isGlobalStyleScopeStart()) {
+      return this.parseGlobalStyleScope(basePath, scopeKind, selectorParts, atRules);
+    }
+
+    if (this.isStyleScopeStart()) {
+      return this.parseStyleScope(basePath, selectorParts, atRules);
+    }
+
+    return this.parseScopedEntry(basePath, scopeKind, selectorParts, atRules);
+  }
+
+  isVariableDeclarationStart() {
+    return this.check('VARIABLE') && this.checkNext('EQUALS');
+  }
+
+  isDefineBlockStart() {
+    return this.check('IDENTIFIER') && this.peek().value === 'define' && this.checkNext('LBRACE');
+  }
+
+  isDeclarationStart() {
+    return (
+      this.check('IDENTIFIER') &&
+      this.checkNext('IDENTIFIER') &&
+      this.checkAhead(2, 'SEMICOLON')
+    );
+  }
+
+  isStyleInheritanceDeclarationStart() {
+    return (
+      this.check('IDENTIFIER') &&
+      this.checkNext('IDENTIFIER') &&
+      this.peek(1).value === 'extends' &&
+      this.checkAhead(2, 'IDENTIFIER') &&
+      this.checkAhead(3, 'SEMICOLON')
+    );
+  }
+
+  isStyleScopeStart() {
+    return this.check('IDENTIFIER') && this.peek().value === 'styles' && this.checkNext('LBRACE');
+  }
+
+  isPseudoBlockStart() {
+    return this.check('PSEUDO');
+  }
+
+  isGlobalStyleScopeStart() {
+    return (
+      (this.check('STAR') || (this.check('IDENTIFIER') && this.peek().value === 'html')) &&
+      this.checkNext('LBRACE')
+    );
+  }
+
+  parseDeclaration() {
+    const baseType = this.consume('IDENTIFIER', 'Expected a base type in declaration');
+    const typeName = this.consume('IDENTIFIER', 'Expected a type name in declaration');
+    this.consume('SEMICOLON', 'Expected ";" after declaration');
+
+    return {
+      type: 'Declaration',
+      baseType: baseType.value,
+      typeName: typeName.value,
+      line: baseType.line,
+      column: baseType.column,
+    };
+  }
+
+  parseDefineBlock() {
+    this.consume('IDENTIFIER', 'Expected "define"');
+    this.consume('LBRACE', 'Expected "{" after "define"');
+    const body = [];
+
+    while (!this.check('RBRACE') && !this.check('EOF')) {
+      if (this.isVariableDeclarationStart()) {
+        body.push(this.parseVariableDeclaration());
+        continue;
+      }
+
+      if (this.isDeclarationStart()) {
+        body.push(this.parseDeclaration());
+        continue;
+      }
+
+      if (this.isStyleInheritanceDeclarationStart()) {
+        body.push(this.parseStyleInheritanceDeclaration());
+        continue;
+      }
+
+      const token = this.peek();
+      throw new CompilerError(
+        'define { ... } only supports variables, type declarations, and style inheritance. Move DOM and CSS rules below the define block.',
+        token.line,
+        token.column
+      );
+    }
+
+    if (this.check('EOF')) {
+      const token = this.previous() || this.peek();
+      throw new CompilerError('Unterminated define block', token.line, token.column);
+    }
+
+    this.consume('RBRACE', 'Expected "}" after define block');
+    return body;
+  }
+
+  parseStyleInheritanceDeclaration() {
+    const derivedName = this.consume('IDENTIFIER', 'Expected a derived style name');
+    const extendsKeyword = this.consume('IDENTIFIER', 'Expected "extends" in style inheritance declaration');
+
+    if (extendsKeyword.value !== 'extends') {
+      throw new CompilerError('Expected "extends" in style inheritance declaration', extendsKeyword.line, extendsKeyword.column);
+    }
+
+    const baseName = this.consume('IDENTIFIER', 'Expected a base style name after "extends"');
+    this.consume('SEMICOLON', 'Expected ";" after style inheritance declaration');
+
+    return {
+      type: 'StyleInheritanceDeclaration',
+      derivedName: derivedName.value,
+      baseName: baseName.value,
+      line: derivedName.line,
+      column: derivedName.column,
+    };
+  }
+
+  parseVariableDeclaration() {
+    const variableName = this.consume('VARIABLE', 'Expected a variable name');
+    this.consume('EQUALS', 'Expected "=" after variable name');
+    const value = this.parseValue();
+
+    if (value.type === 'JavaScriptLiteral') {
+      throw new CompilerError(
+        'Variables only support simple values and cannot use js`...`',
+        variableName.line,
+        variableName.column
+      );
+    }
+
+    this.consume('SEMICOLON', 'Expected ";" after variable declaration');
+
+    return {
+      type: 'VariableDeclaration',
+      name: variableName.value,
+      value,
+      line: variableName.line,
+      column: variableName.column,
+    };
+  }
+
+  parseStyleScope(basePath, selectorParts, atRules) {
+    this.consume('IDENTIFIER', 'Expected "styles"');
+    this.consume('LBRACE', 'Expected "{" after "styles"');
+    return this.parseBlock(basePath, 'style', selectorParts, atRules);
+  }
+
+  parseGlobalStyleScope(basePath, scopeKind, selectorParts, atRules) {
+    const selectorToken = this.advance();
+    const selectorName = selectorToken.value;
+
+    if (scopeKind !== 'dom' || basePath.length > 0 || selectorParts.length > 0) {
+      throw new CompilerError(globalStyleScopePlacementMessage(), selectorToken.line, selectorToken.column);
+    }
+
+    this.consume('LBRACE', `Expected "{" after "${selectorName}"`);
+
+    return this.parseBlock(
+      [selectorName],
+      'style',
+      [{ type: 'global', value: selectorName }],
+      atRules
+    );
+  }
+
+  parsePseudoBlock(basePath, scopeKind, selectorParts, atRules) {
+    const headerToken = this.consume('PSEUDO', 'Expected a pseudo block');
+    const header = parsePseudoBlockHeader(headerToken.value, headerToken.line, headerToken.column);
+    this.consume('LBRACE', 'Expected "{" after pseudo block header');
+
+    if (header.kind === 'script') {
+      if (basePath.length > 0 || selectorParts.length > 0 || atRules.length > 0 || scopeKind !== 'dom') {
+        throw new CompilerError(scriptBlockPlacementMessage(), headerToken.line, headerToken.column);
+      }
+
+      return [this.parseScriptBlock(headerToken)];
+    }
+
+    if (header.kind === 'head') {
+      if (basePath.length > 0 || selectorParts.length > 0 || atRules.length > 0 || scopeKind !== 'dom') {
+        throw new CompilerError(headBlockPlacementMessage(), headerToken.line, headerToken.column);
+      }
+
+      return [this.parseHeadBlock(headerToken)];
+    }
+
+    if (header.kind === 'attrs') {
+      return this.parseAttributeScope(basePath, scopeKind, selectorParts, atRules, headerToken);
+    }
+
+    if (header.kind === 'selector') {
+      if (selectorParts.length === 0) {
+        throw new CompilerError(
+          'Pseudo selector blocks must be nested inside an element or style scope',
+          headerToken.line,
+          headerToken.column
+        );
+      }
+
+      const nextSelectorParts = appendPseudoSelectorPart(selectorParts, header.selector, headerToken);
+      return this.parseBlock(basePath, scopeKind, nextSelectorParts, atRules);
+    }
+
+    if (header.kind === 'media') {
+      return this.parseBlock(basePath, scopeKind, selectorParts, [...atRules, `@media ${header.query}`]);
+    }
+
+    if (basePath.length > 0 || selectorParts.length > 0 || atRules.length > 0 || scopeKind !== 'dom') {
+      throw new CompilerError(
+        '::keyframes blocks must be declared at the top level outside element and style scopes',
+        headerToken.line,
+        headerToken.column
+      );
+    }
+
+    return [this.parseKeyframesRule(header.name, headerToken)];
+  }
+
+  parseScriptBlock(headerToken) {
+    const attributes = [];
+    let code = null;
+
+    while (!this.check('RBRACE') && !this.check('EOF')) {
+      if (this.match('SCRIPT_CODE')) {
+        if (code !== null) {
+          const token = this.previous();
+          throw new CompilerError('::script blocks only support one code { ... } block.', token.line, token.column);
+        }
+
+        code = this.previous().value;
+        continue;
+      }
+
+      attributes.push(this.parseScriptAttribute());
+    }
+
+    if (this.check('EOF')) {
+      const token = this.previous() || this.peek();
+      throw new CompilerError('Unterminated ::script block', token.line, token.column);
+    }
+
+    this.consume('RBRACE', 'Expected "}" after ::script block');
+
+    return {
+      type: 'ScriptBlock',
+      attributes,
+      code,
+      line: headerToken.line,
+      column: headerToken.column,
+    };
+  }
+
+  parseHeadBlock(headerToken) {
+    const entries = [];
+
+    while (!this.check('RBRACE') && !this.check('EOF')) {
+      entries.push(this.parseHeadEntry());
+    }
+
+    if (this.check('EOF')) {
+      const token = this.previous() || this.peek();
+      throw new CompilerError('Unterminated ::head block', token.line, token.column);
+    }
+
+    this.consume('RBRACE', 'Expected "}" after ::head block');
+
+    return {
+      type: 'HeadBlock',
+      entries,
+      line: headerToken.line,
+      column: headerToken.column,
+    };
+  }
+
+  parseHeadEntry() {
+    if (
+      this.isDefineBlockStart() ||
+      this.isVariableDeclarationStart() ||
+      this.isDeclarationStart() ||
+      this.isStyleInheritanceDeclarationStart() ||
+      this.isPseudoBlockStart() ||
+      this.isStyleScopeStart() ||
+      this.isGlobalStyleScopeStart() ||
+      !this.check('IDENTIFIER')
+    ) {
+      const token = this.peek();
+      throw new CompilerError(headBlockContentMessage(), token.line, token.column);
+    }
+
+    const tagToken = this.consume('IDENTIFIER', 'Expected "meta" or "link" inside ::head');
+    const normalizedTagName = camelToKebab(tagToken.value);
+
+    if (normalizedTagName !== 'meta' && normalizedTagName !== 'link') {
+      throw new CompilerError(headBlockContentMessage(), tagToken.line, tagToken.column);
+    }
+
+    this.consume('LBRACE', `Expected "{" after "${tagToken.value}" inside ::head`);
+
+    const attributes = [];
+
+    while (!this.check('RBRACE') && !this.check('EOF')) {
+      attributes.push(this.parseLooseHtmlAttributeAssignment({
+        invalidMessage: headEntryContentMessage(normalizedTagName),
+        expectedNameMessage: `Expected an HTML attribute name inside ${normalizedTagName} { ... }`,
+        equalsMessage: `Expected "=" after HTML attribute name inside ${normalizedTagName} { ... }`,
+        semicolonMessage: `Expected ";" after HTML attribute assignment inside ${normalizedTagName} { ... }`,
+      }));
+    }
+
+    if (this.check('EOF')) {
+      const token = this.previous() || this.peek();
+      throw new CompilerError(`Unterminated ${normalizedTagName} block inside ::head`, token.line, token.column);
+    }
+
+    this.consume('RBRACE', `Expected "}" after ${normalizedTagName} block inside ::head`);
+
+    return {
+      tagName: normalizedTagName,
+      attributes,
+      line: tagToken.line,
+      column: tagToken.column,
+    };
+  }
+
+  parseScriptAttribute() {
+    return this.parseLooseHtmlAttributeAssignment({
+      invalidMessage: scriptBlockContentMessage(),
+      expectedNameMessage: 'Expected an HTML attribute name inside ::script',
+      equalsMessage: 'Expected "=" after HTML attribute name inside ::script',
+      semicolonMessage: 'Expected ";" after ::script attribute assignment',
+    });
+  }
+
+  parseLooseHtmlAttributeAssignment(messages) {
+    if (
+      this.isDefineBlockStart() ||
+      this.isVariableDeclarationStart() ||
+      this.isDeclarationStart() ||
+      this.isStyleInheritanceDeclarationStart() ||
+      this.isPseudoBlockStart() ||
+      this.isStyleScopeStart() ||
+      this.isGlobalStyleScopeStart() ||
+      !this.check('IDENTIFIER')
+    ) {
+      const token = this.peek();
+      throw new CompilerError(messages.invalidMessage, token.line, token.column);
+    }
+
+    const attributeName = this.consume('IDENTIFIER', messages.expectedNameMessage);
+
+    if (this.check('DOT') || this.check('LBRACE')) {
+      const token = this.peek();
+      throw new CompilerError(messages.invalidMessage, token.line, token.column);
+    }
+
+    this.consume('EQUALS', messages.equalsMessage);
+    const value = this.parseValue();
+    this.consume('SEMICOLON', messages.semicolonMessage);
+
+    return {
+      name: attributeName.value,
+      value,
+      line: attributeName.line,
+      column: attributeName.column,
+    };
+  }
+
+  parseAttributeScope(basePath, scopeKind, selectorParts, atRules, headerToken) {
+    if (
+      scopeKind !== 'dom' ||
+      basePath.length === 0 ||
+      atRules.length > 0 ||
+      selectorParts.length === 0 ||
+      selectorParts.some((part) => part.type !== 'segment')
+    ) {
+      throw new CompilerError(attrsBlockPlacementMessage(), headerToken.line, headerToken.column);
+    }
+
+    const body = [];
+
+    while (!this.check('RBRACE') && !this.check('EOF')) {
+      body.push(this.parseAttributeAssignment(basePath));
+    }
+
+    if (this.check('EOF')) {
+      const token = this.previous() || this.peek();
+      throw new CompilerError(`Unterminated ::attrs block for "${basePath.join('.')}"`, token.line, token.column);
+    }
+
+    this.consume('RBRACE', 'Expected "}" after ::attrs block');
+    return body;
+  }
+
+  parseAttributeAssignment(basePath) {
+    if (
+      this.isDefineBlockStart() ||
+      this.isVariableDeclarationStart() ||
+      this.isDeclarationStart() ||
+      this.isStyleInheritanceDeclarationStart() ||
+      this.isPseudoBlockStart() ||
+      this.isStyleScopeStart() ||
+      !this.check('IDENTIFIER')
+    ) {
+      const token = this.peek();
+      throw new CompilerError(attrsBlockContentMessage(), token.line, token.column);
+    }
+
+    const attributeName = this.consume('IDENTIFIER', 'Expected an HTML attribute name inside ::attrs');
+
+    if (this.check('DOT') || this.check('LBRACE')) {
+      const token = this.peek();
+      throw new CompilerError(attrsBlockContentMessage(), token.line, token.column);
+    }
+
+    this.consume('EQUALS', 'Expected "=" after HTML attribute name inside ::attrs');
+    const value = this.parseValue();
+    this.consume('SEMICOLON', 'Expected ";" after HTML attribute assignment');
+
+    return [{
+      type: 'Assignment',
+      path: [...basePath, attributeName.value],
+      scopeKind: 'attr',
+      selectorParts: [],
+      atRules: [],
+      value,
+      line: attributeName.line,
+      column: attributeName.column,
+    }][0];
+  }
+
+  parseScopedEntry(basePath, scopeKind = 'dom', selectorParts = [], atRules = []) {
+    const pathResult = this.parsePath('Expected an identifier at the start of a statement');
+    const fullPath = [...basePath, ...pathResult.segments];
+    const blockSelectorParts = appendSelectorSegments(selectorParts, pathResult.segments);
+
+    if (this.match('LBRACE')) {
+      return this.parseBlock(fullPath, scopeKind, blockSelectorParts, atRules);
+    }
+
+    this.consume('EQUALS', 'Expected "=" or "{" after path');
+    const value = this.parseValue();
+    this.consume('SEMICOLON', 'Expected ";" after assignment');
+
+    return [{
+      type: 'Assignment',
+      path: fullPath,
+      scopeKind,
+      selectorParts: appendSelectorSegments(selectorParts, pathResult.segments.slice(0, -1)),
+      atRules: [...atRules],
+      value,
+      line: pathResult.first.line,
+      column: pathResult.first.column,
+    }];
+  }
+
+  parseBlock(scopePath, scopeKind = 'dom', selectorParts = [], atRules = []) {
+    const body = [];
+
+    while (!this.check('RBRACE') && !this.check('EOF')) {
+      body.push(...this.parseStatement(scopePath, scopeKind, selectorParts, atRules));
+    }
+
+    if (this.check('EOF')) {
+      const token = this.previous() || this.peek();
+      throw new CompilerError(
+        `Unterminated block for "${scopePath.join('.')}"`,
+        token.line,
+        token.column
+      );
+    }
+
+    this.consume('RBRACE', 'Expected "}" after block');
+    return body;
+  }
+
+  parseKeyframesRule(name, headerToken) {
+    const stages = [];
+
+    while (!this.check('RBRACE') && !this.check('EOF')) {
+      stages.push(this.parseKeyframesStage());
+    }
+
+    if (this.check('EOF')) {
+      const token = this.previous() || this.peek();
+      throw new CompilerError(`Unterminated ::keyframes block for "${name}"`, token.line, token.column);
+    }
+
+    this.consume('RBRACE', 'Expected "}" after ::keyframes block');
+
+    return {
+      type: 'KeyframesRule',
+      name,
+      stages,
+      line: headerToken.line,
+      column: headerToken.column,
+    };
+  }
+
+  parseKeyframesStage() {
+    const selectorToken = this.advanceKeyframeStageToken();
+    const selector = normalizeKeyframeStageSelector(selectorToken);
+    this.consume('LBRACE', 'Expected "{" after keyframe stage');
+
+    const declarations = [];
+
+    while (!this.check('RBRACE') && !this.check('EOF')) {
+      const propertyToken = this.consume('IDENTIFIER', 'Expected a CSS property inside a keyframe stage');
+      const propertyName = propertyToken.value;
+
+      if (propertyName === 'raw') {
+        throw new CompilerError(
+          'Keyframe stages only support CSS property assignments; raw is not supported here',
+          propertyToken.line,
+          propertyToken.column
+        );
+      }
+
+      if (propertyName === 'textContent' || propertyName === 'innerHTML') {
+        throw new CompilerError(
+          'Keyframe stages only support CSS property assignments',
+          propertyToken.line,
+          propertyToken.column
+        );
+      }
+
+      this.consume('EQUALS', 'Expected "=" after keyframe property name');
+      const value = this.parseValue();
+      this.consume('SEMICOLON', 'Expected ";" after keyframe declaration');
+
+      declarations.push({
+        propertyName,
+        value,
+        line: propertyToken.line,
+        column: propertyToken.column,
+      });
+    }
+
+    if (this.check('EOF')) {
+      const token = this.previous() || this.peek();
+      throw new CompilerError(`Unterminated keyframe stage "${selector}"`, token.line, token.column);
+    }
+
+    this.consume('RBRACE', 'Expected "}" after keyframe stage');
+
+    return {
+      selector,
+      declarations,
+      line: selectorToken.line,
+      column: selectorToken.column,
+    };
+  }
+
+  advanceKeyframeStageToken() {
+    if (this.check('IDENTIFIER') || this.check('PERCENTAGE')) {
+      return this.advance();
+    }
+
+    const token = this.peek();
+    throw new CompilerError(
+      'Expected a keyframe stage such as "from", "to", or "50%"',
+      token.line,
+      token.column,
+      { actual: describeTokenForDiagnostic(token) }
+    );
+  }
+
+  parsePath(message) {
+    const segments = [];
+    const first = this.consume('IDENTIFIER', message);
+    segments.push(first.value);
+
+    while (this.match('DOT')) {
+      const segment = this.consume('IDENTIFIER', 'Expected an identifier after "."');
+      segments.push(segment.value);
+    }
+
+    return { segments, first };
+  }
+
+  parseValue() {
+    if (this.match('JAVASCRIPT')) {
+      return { type: 'JavaScriptLiteral', value: this.previous().value };
+    }
+
+    if (this.match('VARIABLE')) {
+      const token = this.previous();
+      return {
+        type: 'VariableReferenceLiteral',
+        value: token.value,
+        line: token.line,
+        column: token.column,
+      };
+    }
+
+    if (this.match('STRING')) {
+      return { type: 'StringLiteral', value: this.previous().value };
+    }
+
+    if (this.match('TEMPLATE')) {
+      return { type: 'TemplateLiteral', value: this.previous().value };
+    }
+
+    if (this.match('PERCENTAGE')) {
+      return { type: 'PercentageLiteral', value: this.previous().value };
+    }
+
+    if (this.match('NUMBER')) {
+      return { type: 'NumberLiteral', value: this.previous().value };
+    }
+
+    if (this.match('IDENTIFIER')) {
+      return { type: 'IdentifierLiteral', value: this.previous().value };
+    }
+
+    const token = this.peek();
+    throw new CompilerError(`Unexpected value token "${token.type}"`, token.line, token.column, {
+      actual: describeTokenForDiagnostic(token),
+    });
+  }
+
+  match(type) {
+    if (this.check(type)) {
+      this.advance();
+      return true;
+    }
+
+    return false;
+  }
+
+  consume(type, message) {
+    if (this.check(type)) {
+      return this.advance();
+    }
+
+    const token = this.peek();
+    throw new CompilerError(message, token.line, token.column, {
+      actual: describeTokenForDiagnostic(token),
+    });
+  }
+
+  check(type) {
+    return this.peek().type === type;
+  }
+
+  checkNext(type) {
+    return this.peek(1).type === type;
+  }
+
+  checkAhead(offset, type) {
+    return this.peek(offset).type === type;
+  }
+
+  advance() {
+    if (!this.isAtEnd()) {
+      this.current += 1;
+    }
+
+    return this.previous();
+  }
+
+  isAtEnd() {
+    return this.peek().type === 'EOF';
+  }
+
+  peek(offset = 0) {
+    return this.tokens[this.current + offset];
+  }
+
+  previous() {
+    return this.tokens[this.current - 1];
+  }
+}
+
+function isTopLevelDeclarationStatement(statement) {
+  return (
+    statement.type === 'VariableDeclaration' ||
+    statement.type === 'Declaration' ||
+    statement.type === 'StyleInheritanceDeclaration'
+  );
+}
+
+const CSS_PSEUDO_ELEMENTS = new Set([
+  'after',
+  'backdrop',
+  'before',
+  'cue',
+  'cue-region',
+  'file-selector-button',
+  'first-letter',
+  'first-line',
+  'grammar-error',
+  'marker',
+  'part',
+  'placeholder',
+  'selection',
+  'slotted',
+  'spelling-error',
+  'target-text',
+]);
+
+function parsePseudoBlockHeader(value, line, column) {
+  const trimmed = value.trim();
+  const keywordMatch = trimmed.match(/^([A-Za-z][A-Za-z0-9_-]*)([\s\S]*)$/);
+
+  if (!keywordMatch) {
+    throw new CompilerError('Invalid pseudo block header', line, column);
+  }
+
+  const keyword = camelToKebab(keywordMatch[1]);
+  const remainder = keywordMatch[2].trim();
+
+  if (keyword === 'media') {
+    if (!remainder) {
+      throw new CompilerError('Expected a media query after "::media"', line, column);
+    }
+
+    return {
+      kind: 'media',
+      query: remainder,
+    };
+  }
+
+  if (keyword === 'attrs') {
+    if (remainder) {
+      throw new CompilerError('::attrs does not accept a selector, query, or name', line, column);
+    }
+
+    return {
+      kind: 'attrs',
+    };
+  }
+
+  if (keyword === 'script') {
+    if (remainder) {
+      throw new CompilerError('::script does not accept a selector, query, or name', line, column);
+    }
+
+    return {
+      kind: 'script',
+    };
+  }
+
+  if (keyword === 'head') {
+    if (remainder) {
+      throw new CompilerError('::head does not accept a selector, query, or name', line, column);
+    }
+
+    return {
+      kind: 'head',
+    };
+  }
+
+  if (keyword === 'keyframes') {
+    if (!remainder) {
+      throw new CompilerError('Expected a keyframes name after "::keyframes"', line, column);
+    }
+
+    return {
+      kind: 'keyframes',
+      name: remainder,
+    };
+  }
+
+  const parenIndex = trimmed.indexOf('(');
+  const name = parenIndex === -1 ? trimmed : trimmed.slice(0, parenIndex).trim();
+  const suffix = parenIndex === -1 ? '' : trimmed.slice(parenIndex).trim();
+  const normalizedName = camelToKebab(name);
+  const prefix = CSS_PSEUDO_ELEMENTS.has(normalizedName) ? '::' : ':';
+
+  return {
+    kind: 'selector',
+    selector: `${prefix}${normalizedName}${suffix}`,
+  };
+}
+
+function appendSelectorSegments(selectorParts, segments) {
+  const additions = segments.map((segment) => ({
+    type: 'segment',
+    value: segment,
+  }));
+
+  return [...selectorParts, ...additions];
+}
+
+function appendPseudoSelectorPart(selectorParts, selector, token) {
+  if (selectorParts.length === 0) {
+    throw new CompilerError(
+      'Pseudo selector blocks must be nested inside an element or style scope',
+      token.line,
+      token.column
+    );
+  }
+
+  return [
+    ...selectorParts,
+    {
+      type: 'pseudo',
+      value: selector,
+    },
+  ];
+}
+
+function normalizeKeyframeStageSelector(token) {
+  if (token.type === 'PERCENTAGE') {
+    return token.value;
+  }
+
+  const normalized = camelToKebab(token.value);
+
+  if (normalized === 'from' || normalized === 'to') {
+    return normalized;
+  }
+
+  throw new CompilerError(
+    'Keyframe stages must use "from", "to", or percentages like "50%"',
+    token.line,
+    token.column
+  );
+}
+
+/**
+ * SEMANTIC ANALYSIS
+ * -----------------
+ * Type declarations form a tiny symbol table so WEB types can inherit from
+ * previously declared custom types:
+ *
+ *   Button baseButton;
+ *   baseButton ctaButton;
+ *
+ * The symbol table resolves that `ctaButton` ultimately inherits from
+ * `Button`, which lets the HTML generator infer the correct `<button>` tag.
+ */
+function buildSymbolTable(ast) {
+  const declarations = new Map();
+
+  for (const statement of ast.body) {
+    if (statement.type !== 'Declaration') {
+      continue;
+    }
+
+    if (declarations.has(statement.typeName)) {
+      throw new CompilerError(
+        `Duplicate type declaration for "${statement.typeName}"`,
+        statement.line,
+        statement.column
+      );
+    }
+
+    declarations.set(statement.typeName, {
+      name: statement.typeName,
+      baseType: statement.baseType,
+      resolvedBaseType: null,
+      declaration: statement,
+    });
+  }
+
+  const resolving = new Set();
+
+  function resolveBaseType(typeName) {
+    const entry = declarations.get(typeName);
+
+    // If the type isn't declared, treat it as a built-in / external base.
+    // That keeps the compiler permissive and lets unknown names fall back to
+    // the default tag inference logic.
+    if (!entry) {
+      return typeName;
+    }
+
+    if (entry.resolvedBaseType) {
+      return entry.resolvedBaseType;
+    }
+
+    if (resolving.has(typeName)) {
+      const { line, column } = entry.declaration;
+      throw new CompilerError(`Circular type inheritance involving "${typeName}"`, line, column);
+    }
+
+    resolving.add(typeName);
+    entry.resolvedBaseType = resolveBaseType(entry.baseType);
+    resolving.delete(typeName);
+
+    return entry.resolvedBaseType;
+  }
+
+  for (const typeName of declarations.keys()) {
+    resolveBaseType(typeName);
+  }
+
+  return {
+    has(typeName) {
+      return declarations.has(typeName);
+    },
+
+    get(typeName) {
+      return declarations.get(typeName) || null;
+    },
+
+    resolveBaseType(typeName) {
+      return resolveBaseType(typeName);
+    },
+  };
+}
+
+/**
+ * STYLE INHERITANCE ANALYSIS
+ * --------------------------
+ * Style inheritance declarations are independent from semantic type
+ * declarations:
+ *
+ *   storeCard extends card;
+ *
+ * This affects CSS selector inheritance only. It does not change which HTML
+ * tag a node renders as.
+ */
+function buildStyleInheritanceTable(ast) {
+  const declarations = new Map();
+  const directDescendants = new Map();
+  let orderCounter = 0;
+
+  for (const statement of ast.body) {
+    if (statement.type !== 'StyleInheritanceDeclaration') {
+      continue;
+    }
+
+    if (declarations.has(statement.derivedName)) {
+      throw new CompilerError(
+        `Duplicate style inheritance declaration for "${statement.derivedName}"`,
+        statement.line,
+        statement.column
+      );
+    }
+
+    const entry = {
+      name: statement.derivedName,
+      baseName: statement.baseName,
+      declaration: statement,
+      order: orderCounter++,
+      resolvedBaseChain: null,
+    };
+
+    declarations.set(statement.derivedName, entry);
+
+    if (!directDescendants.has(statement.baseName)) {
+      directDescendants.set(statement.baseName, []);
+    }
+
+    directDescendants.get(statement.baseName).push(entry);
+  }
+
+  const resolving = new Set();
+
+  function resolveBaseChain(name) {
+    const entry = declarations.get(name);
+
+    if (!entry) {
+      return [];
+    }
+
+    if (entry.resolvedBaseChain) {
+      return entry.resolvedBaseChain;
+    }
+
+    if (resolving.has(name)) {
+      const { line, column } = entry.declaration;
+      throw new CompilerError(`Circular style inheritance involving "${name}"`, line, column);
+    }
+
+    resolving.add(name);
+    entry.resolvedBaseChain = [entry.baseName, ...resolveBaseChain(entry.baseName)];
+    resolving.delete(name);
+
+    return entry.resolvedBaseChain;
+  }
+
+  for (const name of declarations.keys()) {
+    resolveBaseChain(name);
+  }
+
+  const descendantsCache = new Map();
+
+  function getDescendants(name) {
+    if (descendantsCache.has(name)) {
+      return descendantsCache.get(name);
+    }
+
+    const direct = directDescendants.get(name) || [];
+    const descendants = [];
+
+    for (const entry of direct) {
+      descendants.push({
+        name: entry.name,
+        distance: 1,
+        order: entry.order,
+      });
+
+      for (const descendant of getDescendants(entry.name)) {
+        descendants.push({
+          name: descendant.name,
+          distance: descendant.distance + 1,
+          order: descendant.order,
+        });
+      }
+    }
+
+    descendantsCache.set(name, descendants);
+    return descendants;
+  }
+
+  return {
+    has(name) {
+      return declarations.has(name);
+    },
+
+    get(name) {
+      return declarations.get(name) || null;
+    },
+
+    getBaseChain(name) {
+      return resolveBaseChain(name);
+    },
+
+    getExpansionOptions(name) {
+      return [
+        {
+          name,
+          distance: 0,
+          order: -1,
+        },
+        ...getDescendants(name),
+      ];
+    },
+
+    hasDeclarations() {
+      return declarations.size > 0;
+    },
+  };
+}
+
+function buildVariableTable(ast) {
+  const declarations = new Map();
+
+  for (const statement of ast.body) {
+    if (statement.type !== 'VariableDeclaration') {
+      continue;
+    }
+
+    if (declarations.has(statement.name)) {
+      throw new CompilerError(
+        `Duplicate variable declaration for "${statement.name}"`,
+        statement.line,
+        statement.column
+      );
+    }
+
+    declarations.set(statement.name, {
+      name: statement.name,
+      value: statement.value,
+      line: statement.line,
+      column: statement.column,
+      resolvedValue: undefined,
+    });
+  }
+
+  const resolving = new Set();
+
+  function resolveVariableValue(literal) {
+    switch (literal.type) {
+      case 'StringLiteral':
+      case 'TemplateLiteral':
+      case 'IdentifierLiteral':
+      case 'PercentageLiteral':
+        return literal.value;
+      case 'NumberLiteral':
+        return String(literal.value);
+      case 'VariableReferenceLiteral':
+        return resolve(literal.value, literal.line, literal.column);
+      default:
+        throw new CompilerError(`Unsupported variable value type "${literal.type}"`);
+    }
+  }
+
+  function resolve(name, useLine, useColumn) {
+    const entry = declarations.get(name);
+
+    if (!entry) {
+      throw new CompilerError(`Unknown variable "${name}"`, useLine, useColumn);
+    }
+
+    if (entry.resolvedValue !== undefined) {
+      return entry.resolvedValue;
+    }
+
+    if (resolving.has(name)) {
+      throw new CompilerError(`Circular variable reference involving "${name}"`, entry.line, entry.column);
+    }
+
+    resolving.add(name);
+    entry.resolvedValue = resolveVariableValue(entry.value);
+    resolving.delete(name);
+
+    return entry.resolvedValue;
+  }
+
+  for (const name of declarations.keys()) {
+    resolve(name);
+  }
+
+  return {
+    has(name) {
+      return declarations.has(name);
+    },
+
+    get(name) {
+      return declarations.get(name) || null;
+    },
+
+    resolve(name, line, column) {
+      return resolve(name, line, column);
+    },
+  };
+}
+
+function assignmentAffectsHtmlStructure(statement) {
+  return (
+    statement.type === 'Assignment' &&
+    (statement.scopeKind === 'dom' || statement.scopeKind === 'attr') &&
+    !assignmentUsesCssOnlyContext(statement)
+  );
+}
+
+function assignmentUsesCssOnlyContext(statement) {
+  return statement.scopeKind === 'style' || statement.atRules.length > 0 || statementHasPseudoSelector(statement);
+}
+
+function statementHasPseudoSelector(statement) {
+  return statement.selectorParts.some((part) => part.type === 'pseudo');
+}
+
+/**
+ * DOCUMENT MODEL
+ * --------------
+ * WEB describes the DOM through flat dot-notation assignments, so this step
+ * rebuilds the nested tree structure:
+ *
+ *   heroSection.customButton.textContent = "Buy";
+ *
+ * becomes:
+ *   heroSection (root)
+ *     customButton (child of heroSection)
+ *
+ * Each unique path in the source maps to one element instance in the output DOM.
+ */
+function buildDocumentModel(ast, symbolTable, resolveContext) {
+  let orderCounter = 0;
+
+  const root = createNode('__root__', [], orderCounter++, symbolTable, true);
+
+  for (const statement of ast.body) {
+    if (statement.type !== 'Assignment' || !assignmentAffectsHtmlStructure(statement)) {
+      continue;
+    }
+
+    if (statement.path.length < 2) {
+      throw new CompilerError(
+        'Assignments must target an element path and a property',
+        statement.line,
+        statement.column
+      );
+    }
+
+    const propertyName = statement.path[statement.path.length - 1];
+    const targetPath = statement.path.slice(0, -1);
+    const node = getOrCreateNode(root, targetPath, symbolTable, () => orderCounter++, true);
+    applyAssignmentToNode(node, propertyName, statement.value, statement, symbolTable, resolveContext, statement.scopeKind);
+  }
+
+  return root;
+}
+
+function buildHeadEntries(ast, resolveContext) {
+  return ast.body.flatMap((statement) => {
+    if (statement.type !== 'HeadBlock') {
+      return [];
+    }
+
+    return statement.entries.map((entry) => ({
+      tagName: entry.tagName,
+      attributes: buildLooseHtmlAttributeMap(entry.attributes, resolveContext),
+      line: entry.line,
+      column: entry.column,
+    }));
+  });
+}
+
+function buildScriptBlocks(ast, resolveContext) {
+  return ast.body
+    .filter((statement) => statement.type === 'ScriptBlock')
+    .map((statement) => ({
+      attributes: buildLooseHtmlAttributeMap(statement.attributes, resolveContext),
+      code: statement.code || '',
+      line: statement.line,
+      column: statement.column,
+    }));
+}
+
+function buildLooseHtmlAttributeMap(attributesList, resolveContext) {
+  const attributes = new Map();
+
+  for (const attribute of attributesList) {
+    const normalizedName = normalizeLooseHtmlAttributeName(attribute.name);
+
+    if (attributes.has(normalizedName)) {
+      attributes.delete(normalizedName);
+    }
+
+    attributes.set(normalizedName, literalToLooseHtmlAttributeValue(attribute.value, resolveContext));
+  }
+
+  return attributes;
+}
+
+function createNode(name, pathSegments, order, symbolTable, renderInHtml = false) {
+  return {
+    name,
+    pathSegments,
+    order,
+    baseType: symbolTable.resolveBaseType(name),
+    renderInHtml,
+    children: [],
+    childMap: new Map(),
+    attributes: new Map(),
+    styles: new Map(),
+    rawBlocks: [],
+    content: null,
+  };
+}
+
+function getOrCreateNode(root, pathSegments, symbolTable, nextOrder, renderInHtml = false) {
+  let current = root;
+  const accumulatedPath = [];
+
+  for (const segment of pathSegments) {
+    accumulatedPath.push(segment);
+
+    if (!current.childMap.has(segment)) {
+      const child = createNode(segment, [...accumulatedPath], nextOrder(), symbolTable, renderInHtml);
+      current.childMap.set(segment, child);
+      current.children.push(child);
+    }
+
+    current = current.childMap.get(segment);
+    current.renderInHtml = current.renderInHtml || renderInHtml;
+  }
+
+  return current;
+}
+
+function applyAssignmentToNode(node, propertyName, value, statement, symbolTable, resolveContext, scopeKind = 'dom') {
+  if (scopeKind === 'attr') {
+    if (propertyName === 'textContent' || propertyName === 'innerHTML' || propertyName === 'raw') {
+      throw new CompilerError(attrsBlockContentMessage(), statement.line, statement.column);
+    }
+
+    const normalizedAttributeName = normalizeHtmlAttributeName(propertyName, statement.line, statement.column);
+
+    if (node.attributes.has(normalizedAttributeName)) {
+      node.attributes.delete(normalizedAttributeName);
+    }
+
+    node.attributes.set(normalizedAttributeName, literalToAttributeValue(value, resolveContext));
+    return;
+  }
+
+  if (scopeKind === 'style' && (propertyName === 'textContent' || propertyName === 'innerHTML')) {
+    throw new CompilerError(
+      'styles blocks only support CSS properties and raw assignments',
+      statement.line,
+      statement.column
+    );
+  }
+
+  if (propertyName === 'textContent') {
+    const content = literalToContentValue(value, 'text', symbolTable, resolveContext);
+    node.content = {
+      kind: content.kind,
+      value: content.value,
+      line: statement.line,
+      column: statement.column,
+    };
+    return;
+  }
+
+  if (propertyName === 'innerHTML') {
+    const content = literalToContentValue(value, 'html', symbolTable, resolveContext);
+    node.content = {
+      kind: content.kind,
+      value: content.value,
+      line: statement.line,
+      column: statement.column,
+    };
+    return;
+  }
+
+  if (propertyName === 'raw') {
+    node.rawBlocks.push(literalToRawCss(value, resolveContext));
+    return;
+  }
+
+  // Later assignments for the same property win, so we replace the existing
+  // Map entry to preserve the most recent source order.
+  if (node.styles.has(propertyName)) {
+    node.styles.delete(propertyName);
+  }
+
+  node.styles.set(propertyName, {
+    property: camelToKebab(propertyName),
+    value: literalToCssValue(value, resolveContext),
+  });
+}
+
+/**
+ * HTML GENERATION
+ * ---------------
+ * Nodes become nested HTML elements. The tag is inferred from the resolved
+ * base type. The compiler currently supports a broader built-in tag map for
+ * common structure, text, figure/media, form, disclosure, list, and table
+ * elements.
+ *
+ * `textContent` is escaped before insertion, while `innerHTML` is copied
+ * directly into the element body. Top-level ::head blocks populate <head>,
+ * and top-level ::script blocks are rendered near the end of <body>. Neither
+ * participates in CSS generation.
+ */
+function generateHtml(root, symbolTable, headEntries = [], scriptBlocks = [], options = {}) {
+  const documentTitle = options.title || DEFAULT_DOCUMENT_TITLE;
+  const stylesheetHref = options.stylesheetHref || DEFAULT_CSS_OUTPUT_FILE;
+  const lines = [
+    '<!DOCTYPE html>',
+    '<html lang="en">',
+    '  <head>',
+    '    <meta charset="UTF-8" />',
+    '    <meta name="viewport" content="width=device-width, initial-scale=1.0" />',
+    `    <title>${escapeHtml(documentTitle)}</title>`,
+    `    <link rel="stylesheet" href="${escapeAttribute(stylesheetHref)}" />`,
+  ];
+
+  for (const headEntry of headEntries) {
+    lines.push(renderHeadEntry(headEntry, 2));
+  }
+
+  lines.push('  </head>');
+  lines.push('  <body>');
+
+  for (const child of root.children) {
+    if (!child.renderInHtml) {
+      continue;
+    }
+
+    lines.push(renderHtmlNode(child, symbolTable, 2));
+  }
+
+  for (const scriptBlock of scriptBlocks) {
+    lines.push(renderScriptBlock(scriptBlock, 2));
+  }
+
+  lines.push('  </body>');
+  lines.push('</html>');
+
+  return `${lines.join('\n')}\n`;
+}
+
+function renderHeadEntry(entry, indentLevel) {
+  const indent = '  '.repeat(indentLevel);
+  const tagName = entry.tagName;
+  const openTag = `${indent}<${tagName}${renderAttributeEntries(entry.attributes)}>`;
+
+  if (VOID_HTML_TAGS.has(tagName)) {
+    return openTag;
+  }
+
+  return `${openTag}</${tagName}>`;
+}
+
+function renderHtmlNode(node, symbolTable, indentLevel) {
+  const indent = '  '.repeat(indentLevel);
+  const contentIndent = '  '.repeat(indentLevel + 1);
+  const tagName = inferHtmlTag(node.name, symbolTable);
+  const voidElement = VOID_HTML_TAGS.has(tagName);
+  const openTag = `${indent}<${tagName}${renderHtmlNodeAttributes(node)}>`;
+  const closeTag = `${indent}</${tagName}>`;
+
+  if (voidElement) {
+    if (node.content || node.children.length > 0) {
+      throw new CompilerError(`Void element <${tagName}> cannot contain content or children for "${node.name}"`);
+    }
+
+    return openTag;
+  }
+
+  const innerParts = [];
+
+  if (node.content) {
+    if (node.content.kind === 'text') {
+      innerParts.push(...prefixLines(escapeHtml(node.content.value), contentIndent));
+    } else {
+      innerParts.push(...prefixLines(node.content.value, contentIndent));
+    }
+  }
+
+  for (const child of node.children) {
+    if (!child.renderInHtml) {
+      continue;
+    }
+
+    innerParts.push(renderHtmlNode(child, symbolTable, indentLevel + 1));
+  }
+
+  if (innerParts.length === 0) {
+    return `${openTag}</${tagName}>`;
+  }
+
+  if (innerParts.length === 1 && !innerParts[0].includes('\n') && node.children.length === 0) {
+    return `${openTag}${innerParts[0].trimStart()}</${tagName}>`;
+  }
+
+  return [openTag, ...innerParts, closeTag].join('\n');
+}
+
+function renderScriptBlock(scriptBlock, indentLevel) {
+  const indent = '  '.repeat(indentLevel);
+  const openTag = `${indent}<script${renderAttributeEntries(scriptBlock.attributes)}>`;
+  const code = scriptBlock.code.trimEnd();
+
+  if (!code) {
+    return `${openTag}</script>`;
+  }
+
+  if (!code.includes('\n')) {
+    return `${openTag}${code}</script>`;
+  }
+
+  return `${openTag}${code}\n${indent}</script>`;
+}
+
+function inferHtmlTag(typeName, symbolTable) {
+  const resolvedBaseType = symbolTable.resolveBaseType(typeName);
+  const normalized = resolvedBaseType.toLowerCase();
+  const words = splitTypeWords(resolvedBaseType);
+  const hasWord = (word) => words.includes(word);
+  const headingLevel = inferHeadingLevel(normalized, words);
+
+  if (headingLevel) {
+    return `h${headingLevel}`;
+  }
+
+  if (normalized === 'button' || hasWord('button')) {
+    return 'button';
+  }
+
+  if (normalized === 'br' || (hasWord('line') && hasWord('break'))) {
+    return 'br';
+  }
+
+  if (normalized === 'code' || hasWord('code')) {
+    return 'code';
+  }
+
+  if (normalized === 'pre' || normalized === 'preformatted' || (hasWord('pre') || hasWord('preformatted'))) {
+    return 'pre';
+  }
+
+  if (normalized === 'strong' || hasWord('strong')) {
+    return 'strong';
+  }
+
+  if (normalized === 'em' || hasWord('emphasis') || hasWord('em')) {
+    return 'em';
+  }
+
+  if (normalized === 'textarea' || (hasWord('text') && hasWord('area'))) {
+    return 'textarea';
+  }
+
+  if (normalized === 'thead' || (hasWord('table') && hasWord('head'))) {
+    return 'thead';
+  }
+
+  if (normalized === 'tbody' || (hasWord('table') && hasWord('body'))) {
+    return 'tbody';
+  }
+
+  if (normalized === 'tfoot' || (hasWord('table') && (hasWord('foot') || hasWord('footer')))) {
+    return 'tfoot';
+  }
+
+  if (normalized === 'tr' || (hasWord('table') && hasWord('row'))) {
+    return 'tr';
+  }
+
+  if (normalized === 'th' || ((hasWord('header') || hasWord('head')) && hasWord('cell'))) {
+    return 'th';
+  }
+
+  if (normalized === 'td' || (hasWord('table') && hasWord('cell'))) {
+    return 'td';
+  }
+
+  if (normalized === 'ul' || ((hasWord('unordered') || hasWord('bullet')) && hasWord('list'))) {
+    return 'ul';
+  }
+
+  if (normalized === 'ol' || ((hasWord('ordered') || hasWord('numbered')) && hasWord('list'))) {
+    return 'ol';
+  }
+
+  if (normalized === 'li' || (hasWord('list') && hasWord('item'))) {
+    return 'li';
+  }
+
+  if (normalized === 'table' || hasWord('table')) {
+    return 'table';
+  }
+
+  if (normalized === 'img' || hasWord('image') || hasWord('img')) {
+    return 'img';
+  }
+
+  if (normalized === 'source' || hasWord('source')) {
+    return 'source';
+  }
+
+  if (normalized === 'picture' || hasWord('picture')) {
+    return 'picture';
+  }
+
+  if (normalized === 'video' || hasWord('video')) {
+    return 'video';
+  }
+
+  if (normalized === 'audio' || hasWord('audio')) {
+    return 'audio';
+  }
+
+  if (normalized === 'input' || hasWord('input')) {
+    return 'input';
+  }
+
+  if (normalized === 'select' || hasWord('select')) {
+    return 'select';
+  }
+
+  if (normalized === 'option' || hasWord('option')) {
+    return 'option';
+  }
+
+  if (normalized === 'form' || hasWord('form')) {
+    return 'form';
+  }
+
+  if (normalized === 'label' || hasWord('label')) {
+    return 'label';
+  }
+
+  if (normalized === 'dialog' || hasWord('dialog')) {
+    return 'dialog';
+  }
+
+  if (normalized === 'details' || hasWord('details')) {
+    return 'details';
+  }
+
+  if (normalized === 'summary' || hasWord('summary')) {
+    return 'summary';
+  }
+
+  if (normalized === 'a' || hasWord('link') || hasWord('anchor')) {
+    return 'a';
+  }
+
+  if (normalized === 'nav' || hasWord('nav') || hasWord('navigation')) {
+    return 'nav';
+  }
+
+  if (normalized === 'section' || hasWord('section')) {
+    return 'section';
+  }
+
+  if (normalized === 'main' || hasWord('main')) {
+    return 'main';
+  }
+
+  if (normalized === 'header' || hasWord('header')) {
+    return 'header';
+  }
+
+  if (normalized === 'footer' || hasWord('footer')) {
+    return 'footer';
+  }
+
+  if (normalized === 'article' || hasWord('article')) {
+    return 'article';
+  }
+
+  if (normalized === 'aside' || hasWord('aside')) {
+    return 'aside';
+  }
+
+  if (
+    normalized === 'figcaption' ||
+    normalized === 'figurecaption' ||
+    (hasWord('fig') && hasWord('caption')) ||
+    (hasWord('figure') && hasWord('caption'))
+  ) {
+    return 'figcaption';
+  }
+
+  if (normalized === 'figure' || hasWord('figure')) {
+    return 'figure';
+  }
+
+  if (normalized === 'paragraph' || hasWord('paragraph')) {
+    return 'p';
+  }
+
+  if (normalized === 'span' || hasWord('span')) {
+    return 'span';
+  }
+
+  if (normalized === 'list' || hasWord('list')) {
+    return 'ul';
+  }
+
+  if (normalized === 'text' || hasWord('text')) {
+    return 'p';
+  }
+
+  return 'div';
+}
+
+function inferHeadingLevel(normalized, words) {
+  const compact = words.join('');
+
+  for (let level = 6; level >= 1; level -= 1) {
+    if (
+      normalized === `h${level}` ||
+      compact === `heading${level}` ||
+      (words.includes('heading') && words.includes(String(level)))
+    ) {
+      return level;
+    }
+  }
+
+  if (normalized === 'heading' || words.includes('heading')) {
+    return 1;
+  }
+
+  return null;
+}
+
+/**
+ * CSS GENERATION
+ * --------------
+ * CSS is collected from assignments into an explicit rule table so WEB can
+ * support:
+ *
+ *   - ordinary descendant selectors
+ *   - `styles { ... }` blocks
+ *   - pseudo selector blocks like `::hover`
+ *   - media-query blocks like `::media (...)`
+ *   - top-level `::keyframes`
+ *
+ * Regular style assignments become declaration blocks. `raw` template literal
+ * content is still expanded so nested selectors like `&:hover` remain valid.
+ */
+function buildStyleModel(ast, resolveContext, styleInheritanceTable) {
+  let orderCounter = 0;
+  const entries = [];
+  const ruleMap = new Map();
+  const keyframesMap = new Map();
+
+  for (const statement of ast.body) {
+    if (statement.type === 'Assignment') {
+      if (statement.path.length < 2) {
+        throw new CompilerError(
+          'Assignments must target an element path and a property',
+          statement.line,
+          statement.column
+        );
+      }
+
+      if (statement.scopeKind === 'attr') {
+        continue;
+      }
+
+      const propertyName = statement.path[statement.path.length - 1];
+
+      if (assignmentUsesCssOnlyContext(statement) && (propertyName === 'textContent' || propertyName === 'innerHTML')) {
+        const message = statement.scopeKind === 'style'
+          ? 'styles blocks only support CSS properties and raw assignments'
+          : 'Pseudo blocks and media queries only support CSS properties and raw assignments';
+        throw new CompilerError(message, statement.line, statement.column);
+      }
+
+      if (propertyName === 'textContent' || propertyName === 'innerHTML') {
+        continue;
+      }
+
+      const selector = selectorPartsToString(statement.selectorParts);
+      const rule = getOrCreateStyleRule(
+        entries,
+        ruleMap,
+        selector,
+        statement.selectorParts,
+        statement.atRules,
+        () => orderCounter++
+      );
+
+      if (propertyName === 'raw') {
+        rule.rawBlocks.push(literalToRawCss(statement.value, resolveContext));
+        continue;
+      }
+
+      if (rule.styles.has(propertyName)) {
+        rule.styles.delete(propertyName);
+      }
+
+      rule.styles.set(propertyName, {
+        property: camelToKebab(propertyName),
+        value: literalToCssValue(statement.value, resolveContext),
+      });
+
+      continue;
+    }
+
+    if (statement.type === 'KeyframesRule') {
+      if (keyframesMap.has(statement.name)) {
+        throw new CompilerError(
+          `Duplicate ::keyframes declaration for "${statement.name}"`,
+          statement.line,
+          statement.column
+        );
+      }
+
+      const entry = {
+        type: 'keyframes',
+        name: statement.name,
+        order: orderCounter++,
+        stages: [],
+        stageMap: new Map(),
+      };
+
+      keyframesMap.set(statement.name, entry);
+      entries.push(entry);
+
+      for (const stage of statement.stages) {
+        let stageEntry = entry.stageMap.get(stage.selector);
+
+        if (!stageEntry) {
+          stageEntry = {
+            selector: stage.selector,
+            order: entry.stages.length,
+            styles: new Map(),
+          };
+          entry.stageMap.set(stage.selector, stageEntry);
+          entry.stages.push(stageEntry);
+        }
+
+        for (const declaration of stage.declarations) {
+          if (stageEntry.styles.has(declaration.propertyName)) {
+            stageEntry.styles.delete(declaration.propertyName);
+          }
+
+          stageEntry.styles.set(declaration.propertyName, {
+            property: camelToKebab(declaration.propertyName),
+            value: literalToCssValue(declaration.value, resolveContext),
+          });
+        }
+      }
+    }
+  }
+
+  return {
+    entries: applyStyleInheritanceToStyleEntries(entries, styleInheritanceTable),
+  };
+}
+
+function getOrCreateStyleRule(entries, ruleMap, selector, selectorParts, atRules, nextOrder) {
+  const key = JSON.stringify({ selector, atRules });
+  let entry = ruleMap.get(key);
+
+  if (!entry) {
+    entry = {
+      type: 'rule',
+      selector,
+      selectorParts: cloneSelectorParts(selectorParts),
+      atRules: [...atRules],
+      order: nextOrder(),
+      styles: new Map(),
+      rawBlocks: [],
+    };
+    ruleMap.set(key, entry);
+    entries.push(entry);
+  }
+
+  return entry;
+}
+
+function applyStyleInheritanceToStyleEntries(entries, styleInheritanceTable) {
+  if (!styleInheritanceTable || !styleInheritanceTable.hasDeclarations()) {
+    return entries;
+  }
+
+  const ruleTargets = new Map();
+  const finalEntries = [];
+
+  for (const entry of entries) {
+    if (entry.type !== 'rule') {
+      finalEntries.push(entry);
+      continue;
+    }
+
+    for (const variant of expandInheritedSelectorVariants(entry.selectorParts, styleInheritanceTable)) {
+      const selector = selectorPartsToString(variant.selectorParts);
+      const key = JSON.stringify({ selector, atRules: entry.atRules });
+      let target = ruleTargets.get(key);
+
+      if (!target) {
+        target = {
+          type: 'rule',
+          selector,
+          selectorParts: cloneSelectorParts(variant.selectorParts),
+          atRules: [...entry.atRules],
+          order: entry.order,
+          contributors: [],
+        };
+        ruleTargets.set(key, target);
+      }
+
+      target.order = Math.max(target.order, entry.order);
+      target.contributors.push({
+        entry,
+        distance: variant.distance,
+      });
+    }
+  }
+
+  for (const target of ruleTargets.values()) {
+    const finalRule = {
+      type: 'rule',
+      selector: target.selector,
+      selectorParts: cloneSelectorParts(target.selectorParts),
+      atRules: [...target.atRules],
+      order: target.order,
+      styles: new Map(),
+      rawBlocks: [],
+    };
+
+    const contributors = [...target.contributors].sort(compareStyleInheritanceContributors);
+
+    for (const contributor of contributors) {
+      for (const [propertyName, style] of contributor.entry.styles.entries()) {
+        finalRule.styles.set(propertyName, {
+          property: style.property,
+          value: style.value,
+        });
+      }
+
+      finalRule.rawBlocks.push(...contributor.entry.rawBlocks);
+    }
+
+    finalEntries.push(finalRule);
+  }
+
+  return finalEntries.sort(compareStyleEntries);
+}
+
+function expandInheritedSelectorVariants(selectorParts, styleInheritanceTable) {
+  const variants = [];
+
+  function visit(index, builtParts, distance) {
+    if (index >= selectorParts.length) {
+      variants.push({
+        selectorParts: builtParts,
+        distance,
+      });
+      return;
+    }
+
+    const part = selectorParts[index];
+
+    if (part.type !== 'segment') {
+      visit(index + 1, [...builtParts, { ...part }], distance);
+      return;
+    }
+
+    const options = styleInheritanceTable.getExpansionOptions(part.value);
+
+    for (const option of options) {
+      visit(
+        index + 1,
+        [...builtParts, { type: 'segment', value: option.name }],
+        distance + option.distance
+      );
+    }
+  }
+
+  visit(0, [], 0);
+  return variants;
+}
+
+function compareStyleInheritanceContributors(left, right) {
+  if (left.distance !== right.distance) {
+    return right.distance - left.distance;
+  }
+
+  return left.entry.order - right.entry.order;
+}
+
+function compareStyleEntries(left, right) {
+  if (left.order !== right.order) {
+    return left.order - right.order;
+  }
+
+  if (left.type !== right.type) {
+    return left.type === 'rule' ? -1 : 1;
+  }
+
+  if (left.type === 'rule' && right.type === 'rule') {
+    return left.selector.localeCompare(right.selector);
+  }
+
+  if (left.type === 'keyframes' && right.type === 'keyframes') {
+    return left.name.localeCompare(right.name);
+  }
+
+  return 0;
+}
+
+function cloneSelectorParts(parts) {
+  return parts.map((part) => ({ ...part }));
+}
+
+function generateCss(styleModel) {
+  const blocks = [];
+
+  for (const entry of styleModel.entries) {
+    if (entry.type === 'rule') {
+      const renderedRule = renderStyleRuleEntry(entry);
+      if (renderedRule.trim()) {
+        blocks.push(renderedRule.trim());
+      }
+      continue;
+    }
+
+    if (entry.type === 'keyframes') {
+      const renderedKeyframes = renderKeyframesEntry(entry);
+      if (renderedKeyframes.trim()) {
+        blocks.push(renderedKeyframes.trim());
+      }
+    }
+  }
+
+  if (blocks.length === 0) {
+    return '';
+  }
+
+  return `${blocks.join('\n\n')}\n`;
+}
+
+function renderStyleRuleEntry(entry) {
+  const fragments = [];
+
+  if (entry.styles.size > 0) {
+    const declarations = [];
+
+    for (const style of entry.styles.values()) {
+      declarations.push(`${style.property}: ${style.value};`);
+    }
+
+    fragments.push(formatCssRule(entry.selector, declarations));
+  }
+
+  for (const rawBlock of entry.rawBlocks) {
+    const expanded = expandRawCss(rawBlock, entry.selector);
+    if (expanded.trim()) {
+      fragments.push(expanded.trim());
+    }
+  }
+
+  if (fragments.length === 0) {
+    return '';
+  }
+
+  return wrapCssInAtRules(fragments.join('\n\n'), entry.atRules);
+}
+
+function renderKeyframesEntry(entry) {
+  const stageBlocks = entry.stages.map((stage) => renderKeyframeStage(stage));
+  const keyframesBlock = [
+    `@keyframes ${entry.name} {`,
+    ...stageBlocks,
+    '}',
+  ].join('\n');
+
+  return keyframesBlock;
+}
+
+function renderKeyframeStage(stage) {
+  const declarations = [];
+
+  for (const style of stage.styles.values()) {
+    declarations.push(`  ${style.property}: ${style.value};`);
+  }
+
+  return [
+    `  ${stage.selector} {`,
+    ...declarations,
+    '  }',
+  ].join('\n');
+}
+
+function wrapCssInAtRules(cssText, atRules) {
+  let output = cssText.trim();
+
+  for (let index = atRules.length - 1; index >= 0; index -= 1) {
+    output = [
+      `${atRules[index]} {`,
+      indentMultiline(output, 1),
+      '}',
+    ].join('\n');
+  }
+
+  return output;
+}
+
+function selectorPartsToString(parts) {
+  let selector = '';
+
+  for (const part of parts) {
+    if (part.type === 'global') {
+      selector += `${selector ? ' ' : ''}${part.value}`;
+      continue;
+    }
+
+    if (part.type === 'segment') {
+      selector += `${selector ? ' ' : ''}.${part.value}`;
+      continue;
+    }
+
+    if (part.type === 'pseudo') {
+      selector += part.value;
+    }
+  }
+
+  return selector;
+}
+
+/**
+ * RAW CSS EXPANSION
+ * -----------------
+ * The WEB escape hatch accepts template literals that may contain:
+ *   - plain CSS declarations
+ *   - nested selector blocks using `&`
+ *   - at-rules like `@media`
+ *
+ * Example input:
+ *   raw = `
+ *     transition: all 0.3s ease;
+ *     &:hover { transform: scale(1.05); }
+ *   `;
+ *
+ * Output:
+ *   .heroSection .customButton {
+ *     transition: all 0.3s ease;
+ *   }
+ *
+ *   .heroSection .customButton:hover {
+ *     transform: scale(1.05);
+ *   }
+ */
+function expandRawCss(rawCss, selector, indentLevel = 0) {
+  const parts = parseCssBody(rawCss);
+  const declarationLines = [];
+  const emittedBlocks = [];
+
+  for (const part of parts) {
+    if (part.type === 'declaration') {
+      declarationLines.push(normalizeCssStatement(part.text));
+      continue;
+    }
+
+    if (part.type === 'statement') {
+      emittedBlocks.push(`${indent(indentLevel)}${normalizeCssStatement(part.text)}`);
+      continue;
+    }
+
+    if (part.type === 'rule') {
+      const nestedSelector = resolveNestedSelector(selector, part.prelude);
+      const nestedBlock = expandRawCss(part.body, nestedSelector, indentLevel);
+      if (nestedBlock.trim()) {
+        emittedBlocks.push(nestedBlock.trimEnd());
+      }
+      continue;
+    }
+
+    if (part.type === 'at-rule') {
+      emittedBlocks.push(renderAtRule(selector, part.prelude, part.body, indentLevel));
+    }
+  }
+
+  const output = [];
+
+  if (declarationLines.length > 0) {
+    output.push(formatCssRule(selector, declarationLines, indentLevel));
+  }
+
+  for (const block of emittedBlocks) {
+    if (block.trim()) {
+      output.push(block);
+    }
+  }
+
+  return output.join('\n\n');
+}
+
+function parseCssBody(source) {
+  const parts = [];
+  let buffer = '';
+  let index = 0;
+
+  while (index < source.length) {
+    const char = source[index];
+    const next = source[index + 1];
+
+    if (char === '/' && next === '*') {
+      index = skipBlockComment(source, index);
+      continue;
+    }
+
+    if (char === '"' || char === '\'' || char === '`') {
+      const consumed = consumeQuotedText(source, index);
+      buffer += consumed.text;
+      index = consumed.nextIndex;
+      continue;
+    }
+
+    if (char === ';') {
+      const text = buffer.trim();
+      if (text) {
+        parts.push({
+          type: text.startsWith('@') ? 'statement' : 'declaration',
+          text,
+        });
+      }
+      buffer = '';
+      index += 1;
+      continue;
+    }
+
+    if (char === '{') {
+      const prelude = buffer.trim();
+      const consumed = consumeBalancedBlock(source, index);
+
+      if (prelude) {
+        parts.push({
+          type: prelude.startsWith('@') ? 'at-rule' : 'rule',
+          prelude,
+          body: consumed.body,
+        });
+      }
+
+      buffer = '';
+      index = consumed.nextIndex;
+      continue;
+    }
+
+    buffer += char;
+    index += 1;
+  }
+
+  const trailing = buffer.trim();
+  if (trailing) {
+    parts.push({
+      type: trailing.startsWith('@') ? 'statement' : 'declaration',
+      text: trailing,
+    });
+  }
+
+  return parts;
+}
+
+function consumeBalancedBlock(source, startIndex) {
+  let depth = 0;
+  let index = startIndex;
+  let bodyStart = -1;
+
+  while (index < source.length) {
+    const char = source[index];
+    const next = source[index + 1];
+
+    if (char === '/' && next === '*') {
+      index = skipBlockComment(source, index);
+      continue;
+    }
+
+    if (char === '"' || char === '\'' || char === '`') {
+      const consumed = consumeQuotedText(source, index);
+      index = consumed.nextIndex;
+      continue;
+    }
+
+    if (char === '{') {
+      depth += 1;
+      if (depth === 1) {
+        bodyStart = index + 1;
+      }
+      index += 1;
+      continue;
+    }
+
+    if (char === '}') {
+      depth -= 1;
+      index += 1;
+
+      if (depth === 0) {
+        return {
+          body: source.slice(bodyStart, index - 1),
+          nextIndex: index,
+        };
+      }
+
+      continue;
+    }
+
+    index += 1;
+  }
+
+  throw new CompilerError('Unterminated CSS block in raw template literal');
+}
+
+function consumeQuotedText(source, startIndex) {
+  const quote = source[startIndex];
+  let index = startIndex + 1;
+
+  while (index < source.length) {
+    const char = source[index];
+
+    if (char === '\\') {
+      index += 2;
+      continue;
+    }
+
+    if (char === quote) {
+      return {
+        text: source.slice(startIndex, index + 1),
+        nextIndex: index + 1,
+      };
+    }
+
+    index += 1;
+  }
+
+  throw new CompilerError('Unterminated quoted text in raw CSS');
+}
+
+function skipBlockComment(source, startIndex) {
+  let index = startIndex + 2;
+
+  while (index < source.length && !(source[index] === '*' && source[index + 1] === '/')) {
+    index += 1;
+  }
+
+  if (index >= source.length) {
+    throw new CompilerError('Unterminated CSS block comment in raw template literal');
+  }
+
+  return index + 2;
+}
+
+function skipWhitespaceAndCommentsFromSource(source, startIndex) {
+  let index = startIndex;
+
+  while (index < source.length) {
+    const char = source[index];
+    const next = source[index + 1];
+
+    if (/\s/.test(char)) {
+      index += 1;
+      continue;
+    }
+
+    if (char === '/' && next === '/') {
+      index += 2;
+
+      while (index < source.length && source[index] !== '\n') {
+        index += 1;
+      }
+
+      continue;
+    }
+
+    if (char === '/' && next === '*') {
+      index += 2;
+
+      while (index < source.length && !(source[index] === '*' && source[index + 1] === '/')) {
+        index += 1;
+      }
+
+      if (index >= source.length) {
+        return source.length;
+      }
+
+      index += 2;
+      continue;
+    }
+
+    break;
+  }
+
+  return index;
+}
+
+function renderAtRule(selector, prelude, body, indentLevel) {
+  if (isPassthroughAtRule(prelude)) {
+    return [
+      `${indent(indentLevel)}${prelude} {`,
+      indentMultiline(body.trim(), indentLevel + 1),
+      `${indent(indentLevel)}}`,
+    ].join('\n');
+  }
+
+  const expandedBody = expandRawCss(body, selector, indentLevel + 1);
+  return [
+    `${indent(indentLevel)}${prelude} {`,
+    expandedBody ? expandedBody : indent(indentLevel + 1),
+    `${indent(indentLevel)}}`,
+  ].join('\n');
+}
+
+function isPassthroughAtRule(prelude) {
+  return /^@(keyframes|font-face|property|counter-style|page)\b/i.test(prelude);
+}
+
+function resolveNestedSelector(parentSelector, nestedSelectorText) {
+  const parts = splitSelectorList(nestedSelectorText);
+
+  return parts
+    .map((part) => {
+      const selector = part.trim();
+
+      if (!selector) {
+        return parentSelector;
+      }
+
+      if (selector.includes('&')) {
+        return selector.replace(/&/g, parentSelector);
+      }
+
+      if (/^[:\[]/.test(selector)) {
+        return `${parentSelector}${selector}`;
+      }
+
+      return `${parentSelector} ${selector}`;
+    })
+    .join(', ');
+}
+
+function splitSelectorList(text) {
+  const parts = [];
+  let buffer = '';
+  let parenDepth = 0;
+  let bracketDepth = 0;
+
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+
+    if (char === '"' || char === '\'' || char === '`') {
+      const consumed = consumeQuotedText(text, index);
+      buffer += consumed.text;
+      index = consumed.nextIndex - 1;
+      continue;
+    }
+
+    if (char === '(') {
+      parenDepth += 1;
+      buffer += char;
+      continue;
+    }
+
+    if (char === ')') {
+      parenDepth -= 1;
+      buffer += char;
+      continue;
+    }
+
+    if (char === '[') {
+      bracketDepth += 1;
+      buffer += char;
+      continue;
+    }
+
+    if (char === ']') {
+      bracketDepth -= 1;
+      buffer += char;
+      continue;
+    }
+
+    if (char === ',' && parenDepth === 0 && bracketDepth === 0) {
+      parts.push(buffer);
+      buffer = '';
+      continue;
+    }
+
+    buffer += char;
+  }
+
+  if (buffer) {
+    parts.push(buffer);
+  }
+
+  return parts;
+}
+
+function formatCssRule(selector, declarations, indentLevel = 0) {
+  return [
+    `${indent(indentLevel)}${selector} {`,
+    ...declarations.map((line) => `${indent(indentLevel + 1)}${normalizeCssStatement(line)}`),
+    `${indent(indentLevel)}}`,
+  ].join('\n');
+}
+
+function normalizeCssStatement(statement) {
+  const trimmed = statement.trim();
+  return trimmed.endsWith(';') ? trimmed : `${trimmed};`;
+}
+
+/**
+ * GENERAL HELPERS
+ */
+function literalToContentValue(literal, preferredKind, symbolTable, resolveContext) {
+  const resolved = resolveLiteral(literal, {
+    preserveStructured: preferredKind === 'html',
+    ...resolveContext,
+  });
+
+  if (resolved.isError) {
+    return {
+      kind: 'text',
+      value: resolved.value,
+    };
+  }
+
+  if (preferredKind === 'html' && isJavaScriptFragmentValue(resolved.value)) {
+    try {
+      return {
+        kind: 'html',
+        value: renderJavaScriptFragmentValue(resolved.value, symbolTable),
+      };
+    } catch (error) {
+      return {
+        kind: 'text',
+        value: formatJavaScriptInjectionError(error instanceof Error ? error.message : String(error)),
+      };
+    }
+  }
+
+  return {
+    kind: preferredKind,
+    value: String(resolved.value),
+  };
+}
+
+function literalToAttributeValue(literal, resolveContext) {
+  const resolved = resolveLiteral(literal, resolveContext);
+
+  if (resolved.isError) {
+    return resolved.value;
+  }
+
+  if (resolved.value === true) {
+    return true;
+  }
+
+  if (resolved.value === false || resolved.value === null || resolved.value === undefined) {
+    return null;
+  }
+
+  if (resolved.value === 'true') {
+    return true;
+  }
+
+  if (resolved.value === 'false' || resolved.value === 'null' || resolved.value === 'undefined') {
+    return null;
+  }
+
+  return String(resolved.value);
+}
+
+function literalToLooseHtmlAttributeValue(literal, resolveContext) {
+  const resolved = resolveLiteral(literal, resolveContext);
+
+  if (resolved.isError) {
+    return resolved.value;
+  }
+
+  if (literal.type === 'IdentifierLiteral') {
+    if (resolved.value === 'true') {
+      return true;
+    }
+
+    if (resolved.value === 'false' || resolved.value === 'null' || resolved.value === 'undefined') {
+      return null;
+    }
+  }
+
+  if (resolved.value === true) {
+    return true;
+  }
+
+  if (resolved.value === false || resolved.value === null || resolved.value === undefined) {
+    return null;
+  }
+
+  return String(resolved.value);
+}
+
+function literalToCssValue(literal, resolveContext) {
+  const resolved = resolveLiteral(literal, resolveContext);
+  return resolved.isError ? quoteCssString(resolved.value) : resolved.value;
+}
+
+function literalToString(literal, resolveContext) {
+  return resolveLiteral(literal, resolveContext).value;
+}
+
+function literalToRawCss(literal, resolveContext) {
+  const resolved = resolveLiteral(literal, resolveContext);
+  return resolved.isError ? formatCssComment(resolved.value) : resolved.value;
+}
+
+function resolveLiteral(literal, options = {}) {
+  switch (literal.type) {
+    case 'StringLiteral':
+    case 'TemplateLiteral':
+    case 'IdentifierLiteral':
+    case 'PercentageLiteral':
+      return { value: literal.value, isError: false };
+    case 'NumberLiteral':
+      return { value: String(literal.value), isError: false };
+    case 'VariableReferenceLiteral':
+      if (!options.variableTable) {
+        throw new CompilerError(`Unknown variable "${literal.value}"`, literal.line, literal.column);
+      }
+
+      return {
+        value: options.variableTable.resolve(literal.value, literal.line, literal.column),
+        isError: false,
+      };
+    case 'JavaScriptLiteral':
+      return evaluateJavaScriptLiteral(literal.value, options);
+    default:
+      throw new CompilerError(`Unsupported literal type "${literal.type}"`);
+  }
+}
+
+function evaluateJavaScriptLiteral(source, options = {}) {
+  try {
+    const script = new vm.Script(buildJavaScriptInjectionWrapper(source), {
+      displayErrors: true,
+      filename: `${options.sourceName || DEFAULT_INPUT_FILE}:js`,
+    });
+    const result = script.runInNewContext(createJavaScriptInjectionSandbox(), {
+      timeout: JAVASCRIPT_INJECTION_TIMEOUT_MS,
+    });
+
+    if (result && typeof result === 'object' && result.__webJsError) {
+      return {
+        value: formatJavaScriptInjectionError(result.message),
+        isError: true,
+      };
+    }
+
+    return {
+      value: normalizeJavaScriptInjectionResult(result, options),
+      isError: false,
+    };
+  } catch (error) {
+    return {
+      value: formatJavaScriptInjectionError(error instanceof Error ? error.message : String(error)),
+      isError: true,
+    };
+  }
+}
+
+function buildJavaScriptInjectionWrapper(source) {
+  const fallbackVariableName = inferLastDeclaredVariableName(source);
+  const fallbackLines = [
+    "      if (__webOutput !== '') {",
+    '        return __webOutput;',
+    '      }',
+  ];
+
+  if (fallbackVariableName) {
+    fallbackLines.push(
+      `      if (typeof ${fallbackVariableName} !== 'undefined') {`,
+      `        return ${fallbackVariableName};`,
+      '      }'
+    );
+  }
+
+  fallbackLines.push("      return '';");
+
+  return [
+    '(function () {',
+    "  let __webOutput = '';",
+    '  const emit = function (value) {',
+    "    if (value === undefined || value === null) {",
+    '      return __webOutput;',
+    '    }',
+    '    __webOutput += String(value);',
+    '    return __webOutput;',
+    '  };',
+    '  try {',
+    '    const __webUserFunction = function () {',
+    indentMultiline(source, 3),
+    ...fallbackLines,
+    '    };',
+    '    const __webResult = __webUserFunction();',
+    "    if ((__webResult === undefined || __webResult === null) && __webOutput !== '') {",
+    '      return __webOutput;',
+    '    }',
+    '    return __webResult;',
+    '  } catch (error) {',
+    '    return {',
+    '      __webJsError: true,',
+    "      message: error && error.message ? error.message : String(error),",
+    '    };',
+    '  }',
+    '})()',
+  ].join('\n');
+}
+
+function createJavaScriptInjectionSandbox() {
+  return {
+    console: {
+      log() {},
+      info() {},
+      warn() {},
+      error() {},
+    },
+    node: createJavaScriptFragmentNode,
+    el: createJavaScriptFragmentNode,
+    fragment: createJavaScriptFragment,
+    text: createJavaScriptFragmentText,
+    html: createJavaScriptFragmentHtml,
+  };
+}
+
+function normalizeJavaScriptInjectionResult(result, options = {}) {
+  if (result === undefined || result === null) {
+    return '';
+  }
+
+  if (options.preserveStructured && isJavaScriptFragmentValue(result)) {
+    return result;
+  }
+
+  if (typeof result === 'string') {
+    return result;
+  }
+
+  if (typeof result === 'object') {
+    try {
+      return JSON.stringify(result);
+    } catch (error) {
+      return String(result);
+    }
+  }
+
+  return String(result);
+}
+
+function createJavaScriptFragmentNode(typeName, classNameOrOptions, maybeOptions) {
+  if (typeof typeName !== 'string' || typeName.trim() === '') {
+    throw new Error('node() requires a non-empty type name');
+  }
+
+  let className = '';
+  let options = {};
+
+  if (classNameOrOptions === undefined || classNameOrOptions === null || isPlainObject(classNameOrOptions)) {
+    options = classNameOrOptions || {};
+  } else {
+    className = normalizeJavaScriptFragmentClassName(classNameOrOptions);
+    options = maybeOptions || {};
+  }
+
+  if (!isPlainObject(options)) {
+    throw new Error('node() options must be an object');
+  }
+
+  if (options.className !== undefined) {
+    const optionClassName = normalizeJavaScriptFragmentClassName(options.className);
+    className = className ? `${className} ${optionClassName}` : optionClassName;
+  }
+
+  return {
+    __webKind: 'node',
+    typeName: typeName.trim(),
+    className,
+    style: normalizeJavaScriptFragmentStyle(options.style),
+    attributes: normalizeJavaScriptFragmentAttributes(options.attributes),
+    textContent: options.textContent === undefined || options.textContent === null ? null : String(options.textContent),
+    innerHTML: options.innerHTML === undefined || options.innerHTML === null ? null : String(options.innerHTML),
+    children: normalizeJavaScriptFragmentChildren(options.children),
+  };
+}
+
+function createJavaScriptFragment(children) {
+  return {
+    __webKind: 'fragment',
+    children: normalizeJavaScriptFragmentChildren(children),
+  };
+}
+
+function createJavaScriptFragmentText(value) {
+  return {
+    __webKind: 'text',
+    value: value === undefined || value === null ? '' : String(value),
+  };
+}
+
+function createJavaScriptFragmentHtml(value) {
+  return {
+    __webKind: 'html',
+    value: value === undefined || value === null ? '' : String(value),
+  };
+}
+
+function normalizeJavaScriptFragmentClassName(value) {
+  if (Array.isArray(value)) {
+    return value
+      .flatMap((entry) => String(entry).trim().split(/\s+/))
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  return String(value)
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .join(' ');
+}
+
+function normalizeJavaScriptFragmentChildren(children) {
+  if (children === undefined || children === null) {
+    return [];
+  }
+
+  if (Array.isArray(children)) {
+    return children.flatMap((child) => normalizeJavaScriptFragmentChildren(child));
+  }
+
+  return [children];
+}
+
+function normalizeJavaScriptFragmentStyle(style) {
+  if (style === undefined || style === null || style === '') {
+    return null;
+  }
+
+  if (typeof style === 'string') {
+    return style.trim();
+  }
+
+  if (!isPlainObject(style)) {
+    throw new Error('node() style must be a string or object');
+  }
+
+  return Object.entries(style)
+    .filter(([, value]) => value !== undefined && value !== null && value !== false)
+    .map(([property, value]) => `${camelToKebab(property)}: ${String(value)};`)
+    .join(' ');
+}
+
+function normalizeJavaScriptFragmentAttributes(attributes) {
+  if (attributes === undefined || attributes === null) {
+    return [];
+  }
+
+  if (!isPlainObject(attributes)) {
+    throw new Error('node() attributes must be an object');
+  }
+
+  return Object.entries(attributes);
+}
+
+function isJavaScriptFragmentValue(value) {
+  if (value === undefined || value === null) {
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.every((entry) => isJavaScriptFragmentChild(entry));
+  }
+
+  return isPlainObject(value) && ['node', 'fragment', 'text', 'html'].includes(value.__webKind);
+}
+
+function isJavaScriptFragmentChild(value) {
+  if (value === undefined || value === null) {
+    return true;
+  }
+
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return true;
+  }
+
+  if (Array.isArray(value)) {
+    return value.every((entry) => isJavaScriptFragmentChild(entry));
+  }
+
+  return isPlainObject(value) && ['node', 'fragment', 'text', 'html'].includes(value.__webKind);
+}
+
+function renderJavaScriptFragmentValue(value, symbolTable, indentLevel = 0) {
+  if (value === undefined || value === null) {
+    return '';
+  }
+
+  if (Array.isArray(value)) {
+    const parts = value
+      .map((child) => renderJavaScriptFragmentValue(child, symbolTable, indentLevel))
+      .filter(Boolean);
+    return parts.join('\n');
+  }
+
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return escapeHtml(String(value));
+  }
+
+  if (!isPlainObject(value)) {
+    throw new Error('Unsupported js fragment value');
+  }
+
+  if (value.__webKind === 'fragment') {
+    return renderJavaScriptFragmentValue(value.children, symbolTable, indentLevel);
+  }
+
+  if (value.__webKind === 'text') {
+    return escapeHtml(value.value);
+  }
+
+  if (value.__webKind === 'html') {
+    return value.value;
+  }
+
+  if (value.__webKind !== 'node') {
+    throw new Error(`Unsupported js fragment kind "${value.__webKind}"`);
+  }
+
+  return renderJavaScriptFragmentNode(value, symbolTable, indentLevel);
+}
+
+function renderJavaScriptFragmentNode(node, symbolTable, indentLevel) {
+  const indentText = indent(indentLevel);
+  const contentIndent = indent(indentLevel + 1);
+  const tagName = inferHtmlTag(node.typeName, symbolTable);
+  const attributeText = renderJavaScriptFragmentAttributes(node);
+  const openTag = `${indentText}<${tagName}${attributeText}>`;
+
+  if (VOID_HTML_TAGS.has(tagName)) {
+    if (node.textContent !== null || node.innerHTML !== null || node.children.length > 0) {
+      throw new Error(`Void element <${tagName}> cannot contain content in js fragments`);
+    }
+
+    return openTag;
+  }
+
+  const innerParts = [];
+
+  if (node.textContent !== null) {
+    innerParts.push(...prefixLines(escapeHtml(node.textContent), contentIndent));
+  }
+
+  if (node.innerHTML !== null) {
+    innerParts.push(...prefixLines(node.innerHTML, contentIndent));
+  }
+
+  for (const child of node.children) {
+    const renderedChild = renderJavaScriptFragmentValue(child, symbolTable, indentLevel + 1);
+    if (renderedChild) {
+      innerParts.push(renderedChild);
+    }
+  }
+
+  if (innerParts.length === 0) {
+    return `${openTag}</${tagName}>`;
+  }
+
+  if (innerParts.length === 1 && !innerParts[0].includes('\n')) {
+    return `${openTag}${innerParts[0].trimStart()}</${tagName}>`;
+  }
+
+  return [openTag, ...innerParts, `${indentText}</${tagName}>`].join('\n');
+}
+
+function renderJavaScriptFragmentAttributes(node) {
+  const attributes = [];
+
+  if (node.className) {
+    attributes.push(['class', node.className]);
+  }
+
+  if (node.style) {
+    attributes.push(['style', node.style]);
+  }
+
+  for (const entry of node.attributes) {
+    attributes.push(entry);
+  }
+
+  return renderAttributeEntries(attributes);
+}
+
+function renderHtmlNodeAttributes(node) {
+  return renderAttributeEntries([
+    ['class', node.name],
+    ...node.attributes.entries(),
+  ]);
+}
+
+function normalizeHtmlAttributeName(value, line, column) {
+  const normalized = camelToKebab(value);
+
+  if (normalized === 'class' || normalized === 'style') {
+    throw new CompilerError(
+      '::attrs cannot set "class" or "style". WEB manages class names automatically, and visual styling should use normal WEB properties.',
+      line,
+      column
+    );
+  }
+
+  return normalized;
+}
+
+function normalizeLooseHtmlAttributeName(value) {
+  return camelToKebab(value);
+}
+
+function renderAttributeEntries(attributeEntries) {
+  const attributes = [];
+
+  for (const [name, value] of attributeEntries) {
+    if (value === undefined || value === null || value === false) {
+      continue;
+    }
+
+    if (value === true) {
+      attributes.push(`${name}`);
+      continue;
+    }
+
+    attributes.push(`${name}="${escapeAttribute(String(value))}"`);
+  }
+
+  return attributes.length > 0 ? ` ${attributes.join(' ')}` : '';
+}
+
+function formatJavaScriptInjectionError(message) {
+  return `JavaScript error: ${message}`;
+}
+
+function inferLastDeclaredVariableName(source) {
+  let index = 0;
+  let braceDepth = 0;
+  let parenDepth = 0;
+  let bracketDepth = 0;
+  let lastMatch = null;
+
+  while (index < source.length) {
+    const char = source[index];
+    const next = source[index + 1];
+
+    if (char === '"' || char === '\'') {
+      index = skipJavaScriptQuotedTextSource(source, index);
+      continue;
+    }
+
+    if (char === '`') {
+      index = skipJavaScriptTemplateLiteralSource(source, index);
+      continue;
+    }
+
+    if (char === '/' && next === '/') {
+      index = skipJavaScriptLineCommentSource(source, index);
+      continue;
+    }
+
+    if (char === '/' && next === '*') {
+      index = skipJavaScriptBlockCommentSource(source, index);
+      continue;
+    }
+
+    if (char === '{') {
+      braceDepth += 1;
+      index += 1;
+      continue;
+    }
+
+    if (char === '}') {
+      braceDepth = Math.max(0, braceDepth - 1);
+      index += 1;
+      continue;
+    }
+
+    if (char === '(') {
+      parenDepth += 1;
+      index += 1;
+      continue;
+    }
+
+    if (char === ')') {
+      parenDepth = Math.max(0, parenDepth - 1);
+      index += 1;
+      continue;
+    }
+
+    if (char === '[') {
+      bracketDepth += 1;
+      index += 1;
+      continue;
+    }
+
+    if (char === ']') {
+      bracketDepth = Math.max(0, bracketDepth - 1);
+      index += 1;
+      continue;
+    }
+
+    if (
+      braceDepth === 0 &&
+      parenDepth === 0 &&
+      bracketDepth === 0 &&
+      isIdentifierStart(char)
+    ) {
+      const wordResult = readIdentifierFromSource(source, index);
+      const keyword = wordResult.value;
+      index = wordResult.nextIndex;
+
+      if (keyword === 'let' || keyword === 'const' || keyword === 'var') {
+        index = skipJavaScriptWhitespaceSource(source, index);
+
+        if (isIdentifierStart(source[index])) {
+          const identifierResult = readIdentifierFromSource(source, index);
+          lastMatch = identifierResult.value;
+          index = identifierResult.nextIndex;
+        }
+      }
+
+      continue;
+    }
+
+    index += 1;
+  }
+
+  return lastMatch;
+}
+
+function camelToKebab(value) {
+  return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+function isPlainObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+function splitTypeWords(value) {
+  return String(value)
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .trim()
+    .split(/\s+/)
+    .flatMap((part) => part.split(/(?<=\D)(?=\d)|(?<=\d)(?=\D)/))
+    .map((part) => part.toLowerCase())
+    .filter(Boolean);
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function escapeAttribute(value) {
+  return escapeHtml(value);
+}
+
+function prefixLines(text, linePrefix) {
+  return String(text)
+    .split('\n')
+    .map((line) => `${linePrefix}${line}`);
+}
+
+function quoteCssString(value) {
+  return JSON.stringify(String(value));
+}
+
+function formatCssComment(value) {
+  const sanitized = String(value).replace(/\*\//g, '* /');
+  return `/* ${sanitized} */`;
+}
+
+function skipJavaScriptWhitespaceSource(source, startIndex) {
+  let index = startIndex;
+
+  while (index < source.length && /\s/.test(source[index])) {
+    index += 1;
+  }
+
+  return index;
+}
+
+function readIdentifierFromSource(source, startIndex) {
+  let index = startIndex;
+  let value = '';
+
+  while (index < source.length && isIdentifierPart(source[index])) {
+    value += source[index];
+    index += 1;
+  }
+
+  return {
+    value,
+    nextIndex: index,
+  };
+}
+
+function skipJavaScriptQuotedTextSource(source, startIndex) {
+  const quote = source[startIndex];
+  let index = startIndex + 1;
+
+  while (index < source.length) {
+    const char = source[index];
+
+    if (char === '\\') {
+      index += 2;
+      continue;
+    }
+
+    if (char === quote) {
+      return index + 1;
+    }
+
+    index += 1;
+  }
+
+  return source.length;
+}
+
+function skipJavaScriptTemplateLiteralSource(source, startIndex) {
+  let index = startIndex + 1;
+
+  while (index < source.length) {
+    const char = source[index];
+    const next = source[index + 1];
+
+    if (char === '\\') {
+      index += 2;
+      continue;
+    }
+
+    if (char === '`') {
+      return index + 1;
+    }
+
+    if (char === '$' && next === '{') {
+      index = skipJavaScriptTemplateInterpolationSource(source, index + 2);
+      continue;
+    }
+
+    index += 1;
+  }
+
+  return source.length;
+}
+
+function skipJavaScriptTemplateInterpolationSource(source, startIndex) {
+  let index = startIndex;
+  let depth = 1;
+
+  while (index < source.length && depth > 0) {
+    const char = source[index];
+    const next = source[index + 1];
+
+    if (char === '"' || char === '\'') {
+      index = skipJavaScriptQuotedTextSource(source, index);
+      continue;
+    }
+
+    if (char === '`') {
+      index = skipJavaScriptTemplateLiteralSource(source, index);
+      continue;
+    }
+
+    if (char === '/' && next === '/') {
+      index = skipJavaScriptLineCommentSource(source, index);
+      continue;
+    }
+
+    if (char === '/' && next === '*') {
+      index = skipJavaScriptBlockCommentSource(source, index);
+      continue;
+    }
+
+    if (char === '{') {
+      depth += 1;
+      index += 1;
+      continue;
+    }
+
+    if (char === '}') {
+      depth -= 1;
+      index += 1;
+      continue;
+    }
+
+    index += 1;
+  }
+
+  return index;
+}
+
+function skipJavaScriptLineCommentSource(source, startIndex) {
+  let index = startIndex + 2;
+
+  while (index < source.length && source[index] !== '\n') {
+    index += 1;
+  }
+
+  return index;
+}
+
+function skipJavaScriptBlockCommentSource(source, startIndex) {
+  let index = startIndex + 2;
+
+  while (index < source.length && !(source[index] === '*' && source[index + 1] === '/')) {
+    index += 1;
+  }
+
+  return index >= source.length ? source.length : index + 2;
+}
+
+function indent(level) {
+  return '  '.repeat(level);
+}
+
+function indentMultiline(text, level) {
+  if (!text) {
+    return indent(level);
+  }
+
+  return text
+    .split('\n')
+    .map((line) => `${indent(level)}${line}`)
+    .join('\n');
+}
+
+function isIdentifierStart(char) {
+  return typeof char === 'string' && /^[A-Za-z_$]$/.test(char);
+}
+
+function isIdentifierPart(char) {
+  return typeof char === 'string' && /^[A-Za-z0-9_$]$/.test(char);
+}
+
+function isDigit(char) {
+  return typeof char === 'string' && /^[0-9]$/.test(char);
+}
+
+function shouldStartNestedJavaScriptTemplate(currentValue) {
+  const lastSignificantChar = getLastSignificantChar(currentValue);
+
+  if (!lastSignificantChar) {
+    return false;
+  }
+
+  if ('=([{,:?+-*/%!&|^~<>'.includes(lastSignificantChar)) {
+    return true;
+  }
+
+  const trailingWord = getTrailingJavaScriptWord(currentValue);
+  return ['return', 'throw', 'case', 'yield', 'await', 'typeof', 'void', 'new', 'delete'].includes(trailingWord);
+}
+
+function getLastSignificantChar(value) {
+  for (let index = value.length - 1; index >= 0; index -= 1) {
+    if (!/\s/.test(value[index])) {
+      return value[index];
+    }
+  }
+
+  return null;
+}
+
+function getTrailingJavaScriptWord(value) {
+  const match = value.match(/([A-Za-z_$][A-Za-z0-9_$]*)\s*$/);
+  return match ? match[1] : '';
+}
+
+module.exports = {
+  CompilerError,
+  compileSource,
+  compileFile,
+  resolveCompileOutputPaths,
+};
+
+if (require.main === module) {
+  try {
+    main();
+  } catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+  }
+}