Technical Specification: Markdown TOC & Auto-Numbering Generator

Overview

This single-file application is a browser-based utility designed to parse Markdown text, identify header structures, and generate an auto-numbered Table of Contents (TOC) with nested hierarchy. The application must be fast, responsive, and completely privacy-focused.

Core Architecture

• Single File: The entire tool (HTML, CSS, JS) must be contained in one file.
• No Persistence: Do not use localStorage, sessionStorage, or any form of cookies. If the page is refreshed, the input is cleared.
• No Server Dependencies: All processing happens in-memory via Vanilla JS.
• UI Framework: Tailwind CSS (via CDN) for styling to maintain a consistent SaaS-like aesthetic.

UI/UX Design

• Layout:
  • Header: Simple, clean application title with a subtitle indicating the function.
  • Main Area: A split-pane view on desktops (Left: Input, Right: Output/Preview). On mobile, stack them vertically.
  • Configuration Toolbar: A floating or sticky header area for settings (numbering style, max-depth).
• Color Palette:
  • Background: #F9FAFB (Off-white/Gray 50)
  • Panels: #FFFFFF (White) with a subtle drop shadow (shadow-md, rounded-lg).
  • Primary Action: #4F46E5 (Indigo 600) for primary buttons (Generate/Copy).
  • Text: #111827 (Gray 900) for headings, #374151 (Gray 700) for body text.
  • Borders: #E5E7EB (Gray 200).

Functional Requirements

1. Input Handling: A textarea input where users paste their Markdown.
2. Real-time Parsing: As the user types, the app parses the text using Regex to find ^#{1,6}\s+.
3. Formatting Logic:
   • Generate hierarchical numbering: 1, 1.1, 1.1.1.
   • Create a list of internal links [Title](#link-anchor).
4. Controls:
   • Buttons: "Copy to Clipboard", "Download as .md file", "Clear".
   • Toggles: "Include H1", "Include H2", etc.
5. Feedback:
   • Smooth CSS transitions (transition-all) for button hover states.
   • Success states (e.g., "Copied!" tooltip) via custom, lightweight CSS-only popups (no alert()).

Developer Directives

• Security: Do not use innerHTML to render user input to prevent XSS. Use textContent or text sanitization strategies.
• Animations: Use standard CSS transition: all 0.2s ease for interactions.
• Responsive: Ensure the textarea grows to fit at least 60% of the screen height on tablets/desktops.
• Performance: Use requestAnimationFrame or debounced input listeners for the live preview generation to ensure the UI remains responsive during large text inputs.