|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | + <title>A7 Pipeline Reference</title> |
| 7 | + <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 8 | + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 9 | + <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> |
| 10 | + <style> |
| 11 | + :root { |
| 12 | + --bg:#f1fcf8; --surface:#ffffff; --surface2:#e8faf3; --text:#17342b; --text-dim:#4f7b6e; |
| 13 | + --border:rgba(12,63,50,.14); --accent:#0f7b66; --accent-dim:rgba(15,123,102,.12); |
| 14 | + --blue:#196baf; --amber:#ba7318; --rose:#b2425e; |
| 15 | + --font:'Bricolage Grotesque',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; |
| 16 | + } |
| 17 | + @media (prefers-color-scheme: dark) { |
| 18 | + :root { |
| 19 | + --bg:#0f1d1a; --surface:#152824; --surface2:#1a312c; --text:#e8f7f1; --text-dim:#9bc6b7; |
| 20 | + --border:rgba(186,230,214,.2); --accent:#65d0b2; --accent-dim:rgba(101,208,178,.16); |
| 21 | + --blue:#82c8ff; --amber:#ffcd8d; --rose:#f3a0b5; |
| 22 | + } |
| 23 | + } |
| 24 | + *{box-sizing:border-box} body{margin:0;padding:36px;background: |
| 25 | + radial-gradient(900px 360px at 10% -8%, var(--accent-dim), transparent 60%), |
| 26 | + radial-gradient(860px 360px at 92% 0%, rgba(186,115,24,.16), transparent 58%), var(--bg); |
| 27 | + color:var(--text); font-family:var(--font);} |
| 28 | + .wrap{max-width:1100px;margin:0 auto} |
| 29 | + h1{margin:0;font-size:clamp(2rem,4vw,3.1rem);line-height:1.03;letter-spacing:-.02em} |
| 30 | + .sub{margin:.65rem 0 1.4rem;color:var(--text-dim);font-family:var(--mono);font-size:12px} |
| 31 | + .panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px} |
| 32 | + .legend{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 10px} |
| 33 | + .legend span{font-family:var(--mono);font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:6px} |
| 34 | + .dot{width:10px;height:10px;border-radius:999px;display:inline-block} |
| 35 | + .dot-a{background:var(--accent)} .dot-b{background:var(--blue)} .dot-c{background:var(--amber)} .dot-d{background:var(--rose)} |
| 36 | + .mermaid-wrap{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--surface2);padding:30px 18px;overflow:auto} |
| 37 | + .mermaid-wrap .mermaid{display:flex;justify-content:center;transition:transform .2s ease;transform-origin:top center;min-width:680px} |
| 38 | + .zoom{position:absolute;top:8px;right:8px;display:flex;gap:2px;padding:2px;background:var(--surface);border:1px solid var(--border);border-radius:8px;z-index:8} |
| 39 | + .zoom button{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--text-dim);font-family:var(--mono);cursor:pointer} |
| 40 | + .zoom button:hover{background:var(--accent-dim);color:var(--text)} |
| 41 | + .mermaid-wrap.is-zoomed{cursor:grab}.mermaid-wrap.is-panning{cursor:grabbing;user-select:none} |
| 42 | + .mermaid .nodeLabel{font-family:var(--font)!important;font-size:15px!important;color:var(--text)!important} |
| 43 | + .mermaid .edgeLabel{font-family:var(--mono)!important;font-size:12px!important;color:var(--text-dim)!important} |
| 44 | + .mermaid .edgeLabel rect{fill:var(--bg)!important} |
| 45 | + </style> |
| 46 | +</head> |
| 47 | +<body> |
| 48 | + <div class="wrap"> |
| 49 | + <h1>A7 Pipeline Reference</h1> |
| 50 | + <p class="sub">Compiler stage map with semantic passes and output artifacts.</p> |
| 51 | + <section class="panel"> |
| 52 | + <div class="legend"> |
| 53 | + <span><i class="dot dot-a"></i>Frontend parsing</span> |
| 54 | + <span><i class="dot dot-b"></i>Semantic analysis</span> |
| 55 | + <span><i class="dot dot-c"></i>Preprocess/codegen</span> |
| 56 | + <span><i class="dot dot-d"></i>Artifacts</span> |
| 57 | + </div> |
| 58 | + <div class="mermaid-wrap" id="m1"> |
| 59 | + <div class="zoom"><button data-z="in">+</button><button data-z="out">−</button><button data-z="reset">↺</button></div> |
| 60 | + <pre class="mermaid"> |
| 61 | +graph LR |
| 62 | + SRC["source .a7"] --> TOK["tokenizer"] --> PAR["parser"] --> AST["AST"] |
| 63 | + AST --> NR["name resolution"] --> TC["type checker"] --> SV["semantic validator"] |
| 64 | + SV --> AP["AST preprocessor"] --> ZIG["zig backend"] |
| 65 | + ZIG --> OUT[".zig output"] |
| 66 | + AP -. doc mode .-> DOC["markdown report"] |
| 67 | + TOK -. mode .-> MT["tokens output"] |
| 68 | + PAR -. mode .-> MA["AST output"] |
| 69 | + SV -. mode .-> MS["semantic report"] |
| 70 | + |
| 71 | + classDef a fill:#0f7b6624,stroke:#0f7b66,stroke-width:1.5px |
| 72 | + classDef b fill:#196baf24,stroke:#196baf,stroke-width:1.5px |
| 73 | + classDef c fill:#ba731824,stroke:#ba7318,stroke-width:1.5px |
| 74 | + classDef d fill:#b2425e24,stroke:#b2425e,stroke-width:1.5px |
| 75 | + |
| 76 | + class SRC,TOK,PAR,AST a |
| 77 | + class NR,TC,SV b |
| 78 | + class AP,ZIG c |
| 79 | + class OUT,DOC,MT,MA,MS d |
| 80 | + </pre> |
| 81 | + </div> |
| 82 | + </section> |
| 83 | + </div> |
| 84 | + <script type="module"> |
| 85 | + import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; |
| 86 | + import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk/dist/mermaid-layout-elk.esm.min.mjs'; |
| 87 | + mermaid.registerLayoutLoaders(elkLayouts); |
| 88 | + const dark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
| 89 | + mermaid.initialize({ startOnLoad:true, theme:'base', layout:'elk', look:'classic', themeVariables:{ |
| 90 | + primaryColor: dark ? '#1a312c' : '#e8faf3', primaryBorderColor: dark ? '#65d0b2' : '#0f7b66', primaryTextColor: dark ? '#e8f7f1' : '#17342b', |
| 91 | + secondaryColor: dark ? '#1d2f43' : '#e7f2ff', secondaryBorderColor: dark ? '#82c8ff' : '#196baf', secondaryTextColor: dark ? '#e8f7f1' : '#17342b', |
| 92 | + tertiaryColor: dark ? '#362b1f' : '#fff2df', tertiaryBorderColor: dark ? '#ffcd8d' : '#ba7318', tertiaryTextColor: dark ? '#e8f7f1' : '#17342b', |
| 93 | + lineColor: dark ? '#89b7a9' : '#4f7b6e', fontSize:'15px', fontFamily:'Bricolage Grotesque' |
| 94 | + }}); |
| 95 | + const wrap=document.getElementById('m1'); const mer=wrap.querySelector('.mermaid'); const zoom=wrap.querySelector('.zoom'); |
| 96 | + let s=1, p=false, sx=0, sy=0, sl=0, st=0; |
| 97 | + const apply=()=>{mer.style.transform=`scale(${s})`; wrap.classList.toggle('is-zoomed', s>1.01)}; |
| 98 | + zoom.addEventListener('click',(e)=>{const b=e.target.closest('button'); if(!b)return; const z=b.dataset.z; if(z==='in')s=Math.min(3,s+.14); if(z==='out')s=Math.max(.7,s-.14); if(z==='reset')s=1; apply();}); |
| 99 | + wrap.addEventListener('wheel',(e)=>{if(!(e.ctrlKey||e.metaKey))return; e.preventDefault(); s += e.deltaY<0?.08:-.08; s=Math.max(.7,Math.min(3,s)); apply();},{passive:false}); |
| 100 | + wrap.addEventListener('mousedown',(e)=>{if(s<=1.01||e.button!==0)return; p=true; wrap.classList.add('is-panning'); sx=e.pageX-wrap.offsetLeft; sy=e.pageY-wrap.offsetTop; sl=wrap.scrollLeft; st=wrap.scrollTop;}); |
| 101 | + window.addEventListener('mouseup',()=>{p=false; wrap.classList.remove('is-panning');}); |
| 102 | + wrap.addEventListener('mousemove',(e)=>{if(!p)return; e.preventDefault(); const x=e.pageX-wrap.offsetLeft; const y=e.pageY-wrap.offsetTop; wrap.scrollLeft=sl-(x-sx); wrap.scrollTop=st-(y-sy);}); |
| 103 | + apply(); |
| 104 | + </script> |
| 105 | +</body> |
| 106 | +</html> |
0 commit comments