Files
mach_examples/07-context-scoping.svg
2026-04-24 18:38:07 -05:00

51 lines
2.9 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 360" width="760" height="360">
<rect width="760" height="360" fill="#09080f"/>
<defs>
<style>text{font-family:'JetBrains Mono','Fira Code',monospace}</style>
</defs>
<!-- Outermost: Global .context -->
<rect x="30" y="20" width="700" height="310" rx="14" fill="#1a1328" stroke="#7c3aed" stroke-width="1.5"/>
<text x="50" y="46" fill="#c084fc" font-size="11" font-weight="700">Global .context</text>
<text x="50" y="62" fill="#9580b8" font-size="9">base_layout, site_name</text>
<!-- Middle: Resource .context -->
<rect x="60" y="78" width="640" height="230" rx="12" fill="#111827" stroke="#3b82f6" stroke-width="1.5"/>
<text x="80" y="102" fill="#60a5fa" font-size="11" font-weight="700">Resource .context</text>
<text x="80" y="118" fill="#7b9ec9" font-size="9">layout, sidebar</text>
<!-- Inner: Route pipeline -->
<rect x="90" y="134" width="580" height="152" rx="10" fill="#0f0d1a" stroke="#06b6d4" stroke-width="1.5"/>
<text x="110" y="158" fill="#22d3ee" font-size="11" font-weight="700">Route Pipeline — GET /todos</text>
<!-- Steps inside route -->
<rect x="110" y="172" width="120" height="36" rx="6" fill="#1e293b" stroke="#8b5cf6" stroke-width="0.75"/>
<text x="170" y="194" text-anchor="middle" fill="#c4b5fd" font-size="10" font-weight="600">db() → todos</text>
<line x1="230" y1="190" x2="258" y2="190" stroke="#64748b" stroke-width="1.5"/>
<polygon points="268,190 258,185 258,195" fill="#64748b"/>
<rect x="268" y="172" width="120" height="36" rx="6" fill="#1e293b" stroke="#f59e0b" stroke-width="0.75"/>
<text x="328" y="194" text-anchor="middle" fill="#fcd34d" font-size="10" font-weight="600">call() → count</text>
<line x1="388" y1="190" x2="416" y2="190" stroke="#64748b" stroke-width="1.5"/>
<polygon points="426,190 416,185 416,195" fill="#64748b"/>
<rect x="426" y="172" width="120" height="36" rx="6" fill="#1e293b" stroke="#10b981" stroke-width="0.75"/>
<text x="486" y="194" text-anchor="middle" fill="#6ee7b7" font-size="10" font-weight="600">render()</text>
<!-- Available context note -->
<text x="110" y="237" fill="#22d3ee" font-size="9">render() sees: base_layout, site_name, layout, sidebar, todos, count</text>
<text x="110" y="253" fill="#22d3ee" font-size="9">Context merges top-down; first named registration wins</text>
<!-- Cascade arrows on the left side -->
<line x1="42" y1="68" x2="42" y2="78" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="3,2"/>
<polygon points="42,84 38,76 46,76" fill="#7c3aed"/>
<line x1="72" y1="124" x2="72" y2="134" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="3,2"/>
<polygon points="72,140 68,132 76,132" fill="#3b82f6"/>
<!-- Bottom summary -->
<text x="380" y="348" text-anchor="middle" fill="#64748b" font-size="10">Context cascades: global .context → resource .context → pipeline steps add to context → render() merges all</text>
</svg>