TypeScript Generics & Infer Visualizer

Overview

A high-performance, browser-based tool designed for TypeScript developers to visualize, analyze, and debug complex generic type definitions and infer keyword logic. This tool provides a graphical representation of how types are evaluated through conditional branches.

Core Features

• Live Code Editor: A clean, syntax-highlighted editor for pasting TypeScript interfaces and types.
• Dependency Graph Visualizer: An interactive tree or node-link graph representing the relationship between Generics, Conditional Types, and infer captures.
• Step-by-Step Evaluation: An "Evaluate" mode that allows users to step through a hypothetical type application to see how infer resolves.
• Type Breakdown: A detailed list view extracting all Generic Parameters, Constraints (extends), and captured types.
• Copy to Clipboard: One-click functionality to save generated analysis reports.

Design System & Aesthetics

• Color Palette: Clean light-mode only. Backgrounds in white and slate-50. Text in slate-900. UI borders in slate-200. Primary actions in blue-600 (saturated, professional).
• Typography: Sans-serif (e.g., Inter or system font) with high legibility for code blocks.
• Layout:
  • Header: Sticky, minimalist, containing the tool title and "Clear"/"Example" action buttons.
  • Main Area: Split-screen layout. Left side: Code Input. Right side: Visualization canvas.
  • Results Section: Bottom drawer or tabbed panel displaying textual metadata about the parsed type definitions.
• Animations: Subtle CSS transitions (ease-in-out) for panel resizing and smooth fade-in effects for new graph nodes.

Technical Directives

1. Single File Architecture: All logic (HTML, CSS, JS) must be in one file. Use CDNs for necessary parsing libraries (e.g., typescript compiler API, d3.js for visualization).
2. No Storage: ABSOLUTELY NO localStorage, sessionStorage, or cookies. Maintain all state in memory. Any attempt to use persistent storage will break the sandbox environment.
3. Sandboxed Compatibility: Ensure all UI interactions (modals, tooltips) use custom HTML elements rather than alert() or prompt().
4. Performance: Ensure the parser logic is non-blocking. Utilize requestAnimationFrame or setTimeout chunks if heavy parsing is required to keep the UI responsive.
5. Responsive: The layout must switch to a stacked column view on mobile devices, with tabs to toggle between the Code Editor and the Visualizer.