python.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Python Grammar Visualizer</title>
  <link rel="stylesheet" href="../shared/style.css">
</head>
<body>
  <header class="page-header">
    <h1 class="project-name">Python Grammar Visualizer</h1>
    <h2 class="project-tagline">Indentation-aware grammar visualizer for modern Python 3.12+ source code producing typed ASTs.</h2>
    <div class="header-nav">
      <a class="btn" href="https://petitparser.github.io/">Website</a>
      <a class="btn" href="../index.html">Examples</a>
      <a class="btn" href="https://github.com/petitparser/dart-petitparser-examples/blob/main/lib/python.dart" target="_blank" rel="noopener">Source</a>
    </div>
  </header>

  <main class="container">
    <div class="card">
      <h2>Presets</h2>
      <div class="button-group">
        <button type="button" class="preset-btn" id="btn-classes">Classes &amp; Generics (PEP 695)</button>
        <button type="button" class="preset-btn" id="btn-patterns">Pattern Matching (PEP 634)</button>
        <button type="button" class="preset-btn" id="btn-async">Async &amp; Decorators</button>
        <button type="button" class="preset-btn" id="btn-comprehensions">Comprehensions &amp; Walrus</button>
      </div>

      <h2>Input Source Code</h2>
      <textarea id="input" rows="10" spellcheck="false"></textarea>

      <div class="toolbar">
        <div class="toolbar-field">
          <label for="production">Target Grammar Production</label>
          <select id="production">
            <option value="module" selected>Module (Full File)</option>
            <option value="statement">Statement</option>
            <option value="expression">Expression</option>
            <option value="pattern">Pattern (PEP 634)</option>
          </select>
        </div>
        <div class="toolbar-action">
          <button type="button" id="action" class="button">Parse Code</button>
        </div>
      </div>
    </div>

    <div class="card">
      <h2>Abstract Syntax Tree</h2>
      <div class="stats" id="stats"></div>
      <div id="output"></div>
    </div>

    <div class="card markdown-body">
      <script type="text/markdown">
## About Python Grammar

Python is a high-level programming language featuring indentation-delimited syntactic block structures.

### Key Parser Features

- **Significant Whitespace Tracking**: Uses an indentation manager to track column depths and emit virtual `INDENT`, `DEDENT`, and `NEWLINE` tokens.
- **Python 3.12+ Features**: Supports PEP 634 pattern matching (`match` / `case`), PEP 695 type parameter syntax and aliases (`class Stack[T]`, `type NumberList[T]`), walrus operator (`:=`), and decorators.
- **Production Targets**: Allows parsing full modules or isolating statements, expressions, and match patterns.
      </script>
    </div>

    <footer>
      Built with <a href="https://petitparser.github.io/">PetitParser</a>.
    </footer>
  </main>

  <script src="python.dart.js"></script>
</body>
</html>