website-htmx-rustelo-code/site/public/images/projects/syntaxis_architecture-dark.svg
2026-07-10 03:44:13 +01:00

372 lines
23 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1020">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;700&amp;display=swap');
text { font-family: 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.title { font-size: 28px; font-weight: 700; fill: #ffffff; }
.subtitle { font-size: 14px; font-weight: 400; fill: #94a3b8; }
.section-title { font-size: 16px; font-weight: 700; fill: #ffffff; }
.label { font-size: 12px; font-weight: 600; fill: #e2e8f0; }
.label-sm { font-size: 10px; font-weight: 500; fill: #94a3b8; }
.label-mono { font-size: 11px; font-weight: 500; fill: #cbd5e1; font-family: 'JetBrains Mono', monospace; }
.badge { font-size: 9px; font-weight: 700; fill: #ffffff; }
</style>
<linearGradient id="grad-cyan-violet" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.15"/>
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:0.05"/>
</linearGradient>
<linearGradient id="grad-violet-emerald" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.15"/>
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0.05"/>
</linearGradient>
<linearGradient id="grad-emerald-cyan" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.15"/>
<stop offset="100%" style="stop-color:#06b6d4;stop-opacity:0.05"/>
</linearGradient>
<linearGradient id="grad-card-cyan" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.12"/>
<stop offset="100%" style="stop-color:#06b6d4;stop-opacity:0.02"/>
</linearGradient>
<linearGradient id="grad-card-violet" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.12"/>
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:0.02"/>
</linearGradient>
<linearGradient id="grad-card-emerald" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.12"/>
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0.02"/>
</linearGradient>
<linearGradient id="grad-card-amber" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.12"/>
<stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0.02"/>
</linearGradient>
<linearGradient id="grad-header" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1"/>
<stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#10b981;stop-opacity:1"/>
</linearGradient>
<filter id="glow-sm"><feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
<filter id="glow-md"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
<filter id="glow-lg"><feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
<filter id="shadow"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000000" flood-opacity="0.3"/></filter>
</defs>
<!-- Background -->
<rect width="1400" height="1020" fill="#0a0a0f"/>
<rect width="1400" height="1020" fill="url(#grad-cyan-violet)" opacity="0.3"/>
<!-- Header -->
<text x="700" y="42" class="title" text-anchor="middle">SYNTAXIS Architecture</text>
<text x="700" y="62" class="subtitle" text-anchor="middle">Systematic Orchestration, Perfectly Arranged</text>
<line x1="400" y1="72" x2="1000" y2="72" stroke="url(#grad-header)" stroke-width="1" opacity="0.4"/>
<!-- ======================== -->
<!-- USER INTERFACES (Top) -->
<!-- ======================== -->
<g transform="translate(50, 90)">
<rect width="1300" height="160" rx="12" fill="url(#grad-card-cyan)" stroke="#06b6d4" stroke-width="0.8" opacity="0.9" filter="url(#shadow)"/>
<text x="20" y="28" class="section-title" fill="#06b6d4">User Interfaces</text>
<rect x="180" y="8" width="36" height="16" rx="4" fill="#06b6d4" opacity="0.2"/>
<text x="198" y="20" class="badge" fill="#06b6d4" text-anchor="middle">4</text>
<!-- CLI -->
<g transform="translate(30, 45)">
<rect width="280" height="100" rx="8" fill="#0f172a" stroke="#06b6d4" stroke-width="0.5" opacity="0.8"/>
<text x="140" y="24" class="label" text-anchor="middle" fill="#06b6d4">CLI</text>
<text x="140" y="42" class="label-mono" text-anchor="middle">syntaxis-cli</text>
<text x="140" y="60" class="label-sm" text-anchor="middle">clap structured commands</text>
<text x="140" y="76" class="label-sm" text-anchor="middle">Automation &amp; CI/CD</text>
<rect x="95" y="84" width="90" height="12" rx="3" fill="#06b6d4" opacity="0.15"/>
<text x="140" y="93" class="badge" fill="#06b6d4" text-anchor="middle">ACTIVE</text>
</g>
<!-- TUI -->
<g transform="translate(340, 45)">
<rect width="280" height="100" rx="8" fill="#0f172a" stroke="#8b5cf6" stroke-width="0.5" opacity="0.8"/>
<text x="140" y="24" class="label" text-anchor="middle" fill="#8b5cf6">TUI</text>
<text x="140" y="42" class="label-mono" text-anchor="middle">syntaxis-tui</text>
<text x="140" y="60" class="label-sm" text-anchor="middle">ratatui + vim keys (hjkl)</text>
<text x="140" y="76" class="label-sm" text-anchor="middle">Interactive &amp; SSH-friendly</text>
<rect x="95" y="84" width="90" height="12" rx="3" fill="#8b5cf6" opacity="0.15"/>
<text x="140" y="93" class="badge" fill="#8b5cf6" text-anchor="middle">ACTIVE</text>
</g>
<!-- Dashboard -->
<g transform="translate(650, 45)">
<rect width="280" height="100" rx="8" fill="#0f172a" stroke="#10b981" stroke-width="0.5" opacity="0.8"/>
<text x="140" y="24" class="label" text-anchor="middle" fill="#10b981">Dashboard</text>
<text x="140" y="42" class="label-mono" text-anchor="middle">Leptos WASM (CSR)</text>
<text x="140" y="60" class="label-sm" text-anchor="middle">Trunk + UnoCSS build</text>
<text x="140" y="76" class="label-sm" text-anchor="middle">Real-time &amp; Responsive</text>
<rect x="95" y="84" width="90" height="12" rx="3" fill="#10b981" opacity="0.15"/>
<text x="140" y="93" class="badge" fill="#10b981" text-anchor="middle">ACTIVE</text>
</g>
<!-- REST API -->
<g transform="translate(960, 45)">
<rect width="280" height="100" rx="8" fill="#0f172a" stroke="#f59e0b" stroke-width="0.5" opacity="0.8"/>
<text x="140" y="24" class="label" text-anchor="middle" fill="#f59e0b">REST API</text>
<text x="140" y="42" class="label-mono" text-anchor="middle">syntaxis-api (axum)</text>
<text x="140" y="60" class="label-sm" text-anchor="middle">Tower middleware + WebSocket</text>
<text x="140" y="76" class="label-sm" text-anchor="middle">Auth, Rate Limit, Metrics</text>
<rect x="95" y="84" width="90" height="12" rx="3" fill="#f59e0b" opacity="0.15"/>
<text x="140" y="93" class="badge" fill="#f59e0b" text-anchor="middle">ACTIVE</text>
</g>
</g>
<!-- Connection arrows from interfaces to core -->
<g filter="url(#glow-sm)">
<line x1="220" y1="255" x2="420" y2="310" stroke="#06b6d4" stroke-width="1" opacity="0.5" stroke-dasharray="4,4"/>
<line x1="530" y1="255" x2="560" y2="310" stroke="#8b5cf6" stroke-width="1" opacity="0.5" stroke-dasharray="4,4"/>
<line x1="840" y1="255" x2="750" y2="310" stroke="#10b981" stroke-width="1" opacity="0.5" stroke-dasharray="4,4"/>
<line x1="1150" y1="255" x2="900" y2="310" stroke="#f59e0b" stroke-width="1" opacity="0.5" stroke-dasharray="4,4"/>
</g>
<!-- ======================== -->
<!-- CORE ENGINE (Middle) -->
<!-- ======================== -->
<g transform="translate(50, 310)">
<rect width="860" height="290" rx="12" fill="url(#grad-card-violet)" stroke="#8b5cf6" stroke-width="0.8" opacity="0.9" filter="url(#shadow)"/>
<text x="20" y="28" class="section-title" fill="#8b5cf6">Core Engine</text>
<text x="140" y="28" class="label-mono" fill="#64748b">syntaxis-core</text>
<!-- Domain Models -->
<g transform="translate(20, 45)">
<rect width="250" height="110" rx="8" fill="#0f172a" stroke="#8b5cf6" stroke-width="0.5" opacity="0.7"/>
<text x="125" y="22" class="label" text-anchor="middle" fill="#c4b5fd">Domain Models</text>
<line x1="20" y1="30" x2="230" y2="30" stroke="#8b5cf6" stroke-width="0.3" opacity="0.3"/>
<text x="20" y="48" class="label-mono">Project</text>
<text x="100" y="48" class="label-sm">id, name, metadata</text>
<text x="20" y="64" class="label-mono">Phase</text>
<text x="100" y="64" class="label-sm">create/devel/pub/arch</text>
<text x="20" y="80" class="label-mono">Task</text>
<text x="100" y="80" class="label-sm">state, priority, audit</text>
<text x="20" y="96" class="label-mono">Template</text>
<text x="100" y="96" class="label-sm">reusable structures</text>
</g>
<!-- Phase Lifecycle -->
<g transform="translate(290, 45)">
<rect width="250" height="110" rx="8" fill="#0f172a" stroke="#06b6d4" stroke-width="0.5" opacity="0.7"/>
<text x="125" y="22" class="label" text-anchor="middle" fill="#67e8f9">Phase Lifecycle</text>
<line x1="20" y1="30" x2="230" y2="30" stroke="#06b6d4" stroke-width="0.3" opacity="0.3"/>
<!-- Phase flow diagram -->
<rect x="15" y="42" width="55" height="20" rx="4" fill="#06b6d4" opacity="0.2"/>
<text x="42" y="56" class="badge" fill="#06b6d4" text-anchor="middle">CREATE</text>
<line x1="72" y1="52" x2="82" y2="52" stroke="#06b6d4" stroke-width="0.8" marker-end="none"/>
<text x="78" y="48" class="badge" fill="#64748b">&#8594;</text>
<rect x="85" y="42" width="50" height="20" rx="4" fill="#8b5cf6" opacity="0.2"/>
<text x="110" y="56" class="badge" fill="#8b5cf6" text-anchor="middle">DEVEL</text>
<line x1="137" y1="52" x2="147" y2="52" stroke="#8b5cf6" stroke-width="0.8"/>
<text x="143" y="48" class="badge" fill="#64748b">&#8594;</text>
<rect x="150" y="42" width="50" height="20" rx="4" fill="#10b981" opacity="0.2"/>
<text x="175" y="56" class="badge" fill="#10b981" text-anchor="middle">PUBLISH</text>
<line x1="202" y1="52" x2="212" y2="52" stroke="#10b981" stroke-width="0.8"/>
<text x="208" y="48" class="badge" fill="#64748b">&#8594;</text>
<rect x="165" y="72" width="60" height="20" rx="4" fill="#f59e0b" opacity="0.2"/>
<text x="195" y="86" class="badge" fill="#f59e0b" text-anchor="middle">ARCHIVE</text>
<text x="125" y="104" class="label-sm" text-anchor="middle">State transitions with audit trail</text>
</g>
<!-- Business Logic -->
<g transform="translate(560, 45)">
<rect width="280" height="110" rx="8" fill="#0f172a" stroke="#10b981" stroke-width="0.5" opacity="0.7"/>
<text x="140" y="22" class="label" text-anchor="middle" fill="#6ee7b7">Business Logic</text>
<line x1="20" y1="30" x2="260" y2="30" stroke="#10b981" stroke-width="0.3" opacity="0.3"/>
<text x="20" y="48" class="label-mono">Audit</text>
<text x="120" y="48" class="label-sm">Full change history &amp; rollback</text>
<text x="20" y="64" class="label-mono">Checklist</text>
<text x="120" y="64" class="label-sm">Phase-based verification</text>
<text x="20" y="80" class="label-mono">Security</text>
<text x="120" y="80" class="label-sm">Auth &amp; access control</text>
<text x="20" y="96" class="label-mono">Config</text>
<text x="120" y="96" class="label-sm">TOML + Nickel driven</text>
</g>
<!-- Test badge -->
<g transform="translate(20, 170)">
<rect width="820" height="50" rx="8" fill="#0f172a" stroke="#22d3ee" stroke-width="0.3" opacity="0.5"/>
<text x="20" y="20" class="label-sm" fill="#22d3ee">Quality</text>
<rect x="70" y="8" width="100" height="16" rx="4" fill="#10b981" opacity="0.15"/>
<text x="120" y="20" class="badge" fill="#10b981" text-anchor="middle">632+ TESTS</text>
<rect x="180" y="8" width="110" height="16" rx="4" fill="#06b6d4" opacity="0.15"/>
<text x="235" y="20" class="badge" fill="#06b6d4" text-anchor="middle">ZERO UNSAFE</text>
<rect x="300" y="8" width="110" height="16" rx="4" fill="#8b5cf6" opacity="0.15"/>
<text x="355" y="20" class="badge" fill="#8b5cf6" text-anchor="middle">NO UNWRAP()</text>
<rect x="420" y="8" width="90" height="16" rx="4" fill="#f59e0b" opacity="0.15"/>
<text x="465" y="20" class="badge" fill="#f59e0b" text-anchor="middle">100% DOCS</text>
<rect x="520" y="8" width="80" height="16" rx="4" fill="#10b981" opacity="0.15"/>
<text x="560" y="20" class="badge" fill="#10b981" text-anchor="middle">CLIPPY 0W</text>
<text x="20" y="40" class="label-sm" fill="#64748b">thiserror | Result&lt;T&gt; | #![forbid(unsafe_code)] | cargo fmt | cargo audit</text>
</g>
<!-- Test distribution -->
<g transform="translate(20, 230)">
<text x="0" y="12" class="label-sm" fill="#64748b">Test distribution:</text>
<text x="120" y="12" class="label-mono" style="font-size:9px">core:173</text>
<text x="200" y="12" class="label-mono" style="font-size:9px">tui-lib:262</text>
<text x="290" y="12" class="label-mono" style="font-size:9px">api-lib:93</text>
<text x="370" y="12" class="label-mono" style="font-size:9px">vapora:57</text>
<text x="440" y="12" class="label-mono" style="font-size:9px">dashboard:52</text>
<text x="530" y="12" class="label-mono" style="font-size:9px">shared:33</text>
<text x="600" y="12" class="label-mono" style="font-size:9px">tui:10</text>
<text x="660" y="12" class="label-mono" style="font-size:9px">dash-shared:4</text>
</g>
</g>
<!-- ======================== -->
<!-- VAPORA ADAPTER (Right) -->
<!-- ======================== -->
<g transform="translate(940, 310)">
<rect width="360" height="290" rx="12" fill="url(#grad-card-amber)" stroke="#f59e0b" stroke-width="0.8" opacity="0.9" filter="url(#shadow)"/>
<text x="20" y="28" class="section-title" fill="#f59e0b">VAPORA SST</text>
<text x="140" y="28" class="label-mono" fill="#64748b">syntaxis-vapora</text>
<g transform="translate(20, 45)">
<rect width="320" height="90" rx="8" fill="#0f172a" stroke="#f59e0b" stroke-width="0.5" opacity="0.7"/>
<text x="160" y="22" class="label" text-anchor="middle" fill="#fcd34d">Orchestration Adapter</text>
<line x1="20" y1="30" x2="300" y2="30" stroke="#f59e0b" stroke-width="0.3" opacity="0.3"/>
<text x="20" y="48" class="label-sm">Agent triggering on task state changes</text>
<text x="20" y="64" class="label-sm">Phase-based workflow orchestration</text>
<text x="20" y="80" class="label-sm">Enterprise audit &amp; rollback support</text>
</g>
<g transform="translate(20, 150)">
<rect width="320" height="70" rx="8" fill="#0f172a" stroke="#f59e0b" stroke-width="0.5" opacity="0.7"/>
<text x="160" y="22" class="label" text-anchor="middle" fill="#fcd34d">Event Streaming</text>
<line x1="20" y1="30" x2="300" y2="30" stroke="#f59e0b" stroke-width="0.3" opacity="0.3"/>
<text x="20" y="48" class="label-mono">NATS</text>
<text x="80" y="48" class="label-sm">KOGRAL &amp; SYNTAXIS_SOURCE streams</text>
<text x="20" y="64" class="label-sm">Real-time federation between services</text>
</g>
<rect x="100" y="235" width="160" height="18" rx="4" fill="#f59e0b" opacity="0.15"/>
<text x="180" y="248" class="badge" fill="#f59e0b" text-anchor="middle">57 TESTS | ACTIVE</text>
</g>
<!-- ======================== -->
<!-- PERSISTENCE LAYER -->
<!-- ======================== -->
<g transform="translate(50, 620)">
<rect width="1250" height="160" rx="12" fill="url(#grad-card-emerald)" stroke="#10b981" stroke-width="0.8" opacity="0.9" filter="url(#shadow)"/>
<text x="20" y="28" class="section-title" fill="#10b981">Persistence Layer</text>
<text x="180" y="28" class="label-mono" fill="#64748b">Database trait abstraction</text>
<!-- SQLite -->
<g transform="translate(30, 45)">
<rect width="350" height="95" rx="8" fill="#0f172a" stroke="#10b981" stroke-width="0.5" opacity="0.7"/>
<text x="175" y="22" class="label" text-anchor="middle" fill="#6ee7b7">SQLite (Default)</text>
<line x1="20" y1="30" x2="330" y2="30" stroke="#10b981" stroke-width="0.3" opacity="0.3"/>
<text x="20" y="48" class="label-mono">sqlx async</text>
<text x="140" y="48" class="label-sm">Connection pooling + WAL mode</text>
<text x="20" y="64" class="label-sm">Prepared statements | Indexed queries | Batch ops</text>
<text x="20" y="82" class="label-sm" fill="#64748b">Best for: Solo dev, small teams, local</text>
</g>
<!-- SurrealDB -->
<g transform="translate(420, 45)">
<rect width="380" height="95" rx="8" fill="#0f172a" stroke="#8b5cf6" stroke-width="0.5" opacity="0.7"/>
<text x="190" y="22" class="label" text-anchor="middle" fill="#c4b5fd">SurrealDB 2.3</text>
<line x1="20" y1="30" x2="360" y2="30" stroke="#8b5cf6" stroke-width="0.3" opacity="0.3"/>
<text x="20" y="48" class="label-mono">40+ operations</text>
<text x="160" y="48" class="label-sm">Type-safe async | JSON binding</text>
<text x="20" y="64" class="label-sm">In-Memory | File (RocksDB) | Server | Docker | K8s</text>
<text x="20" y="82" class="label-sm" fill="#64748b">Best for: Teams, distributed, enterprise</text>
</g>
<!-- Config -->
<g transform="translate(840, 45)">
<rect width="380" height="95" rx="8" fill="#0f172a" stroke="#06b6d4" stroke-width="0.5" opacity="0.7"/>
<text x="190" y="22" class="label" text-anchor="middle" fill="#67e8f9">Configuration</text>
<line x1="20" y1="30" x2="360" y2="30" stroke="#06b6d4" stroke-width="0.3" opacity="0.3"/>
<text x="20" y="48" class="label-mono">TOML + Nickel</text>
<text x="160" y="48" class="label-sm">Runtime backend selection</text>
<text x="20" y="64" class="label-sm">database-default.toml | database-surrealdb.toml</text>
<text x="20" y="82" class="label-sm" fill="#64748b">Switch via: cp configs/database-*.toml configs/database.toml</text>
</g>
</g>
<!-- Connection arrows core to persistence -->
<g filter="url(#glow-sm)">
<line x1="480" y1="600" x2="350" y2="665" stroke="#10b981" stroke-width="1" opacity="0.4" stroke-dasharray="4,4"/>
<line x1="480" y1="600" x2="660" y2="665" stroke="#8b5cf6" stroke-width="1" opacity="0.4" stroke-dasharray="4,4"/>
<line x1="700" y1="600" x2="1080" y2="665" stroke="#06b6d4" stroke-width="1" opacity="0.4" stroke-dasharray="4,4"/>
</g>
<!-- ======================== -->
<!-- SHARED LIBRARIES -->
<!-- ======================== -->
<g transform="translate(50, 800)">
<rect width="1250" height="100" rx="12" fill="url(#grad-emerald-cyan)" stroke="#06b6d4" stroke-width="0.5" opacity="0.7" filter="url(#shadow)"/>
<text x="20" y="28" class="section-title" fill="#06b6d4">Shared Libraries</text>
<g transform="translate(30, 40)">
<rect width="380" height="45" rx="6" fill="#0f172a" stroke="#06b6d4" stroke-width="0.3" opacity="0.6"/>
<text x="15" y="18" class="label-mono" fill="#67e8f9">shared-api-lib</text>
<text x="15" y="35" class="label-sm">REST utilities, request/response helpers (93 tests)</text>
</g>
<g transform="translate(440, 40)">
<rect width="380" height="45" rx="6" fill="#0f172a" stroke="#8b5cf6" stroke-width="0.3" opacity="0.6"/>
<text x="15" y="18" class="label-mono" fill="#c4b5fd">rust-tui</text>
<text x="15" y="35" class="label-sm">TUI utilities, ratatui helpers (262 tests)</text>
</g>
<g transform="translate(850, 40)">
<rect width="380" height="45" rx="6" fill="#0f172a" stroke="#10b981" stroke-width="0.3" opacity="0.6"/>
<text x="15" y="18" class="label-mono" fill="#6ee7b7">tools-shared</text>
<text x="15" y="35" class="label-sm">Configuration, utilities, helpers (33 tests)</text>
</g>
</g>
<!-- ======================== -->
<!-- INFRASTRUCTURE SIDEBAR -->
<!-- ======================== -->
<g transform="translate(1310, 310)">
<rect width="80" height="580" rx="8" fill="#0f172a" stroke="#64748b" stroke-width="0.3" opacity="0.4"/>
<text x="40" y="20" class="label-sm" text-anchor="middle" fill="#64748b">Infra</text>
<g transform="translate(10, 50)">
<rect width="60" height="22" rx="4" fill="#06b6d4" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#06b6d4" text-anchor="middle">tokio</text>
</g>
<g transform="translate(10, 82)">
<rect width="60" height="22" rx="4" fill="#8b5cf6" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#8b5cf6" text-anchor="middle">axum</text>
</g>
<g transform="translate(10, 114)">
<rect width="60" height="22" rx="4" fill="#10b981" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#10b981" text-anchor="middle">sqlx</text>
</g>
<g transform="translate(10, 146)">
<rect width="60" height="22" rx="4" fill="#f59e0b" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#f59e0b" text-anchor="middle">serde</text>
</g>
<g transform="translate(10, 178)">
<rect width="60" height="22" rx="4" fill="#06b6d4" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#06b6d4" text-anchor="middle">clap</text>
</g>
<g transform="translate(10, 210)">
<rect width="60" height="22" rx="4" fill="#8b5cf6" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#8b5cf6" text-anchor="middle">ratatui</text>
</g>
<g transform="translate(10, 242)">
<rect width="60" height="22" rx="4" fill="#10b981" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#10b981" text-anchor="middle">leptos</text>
</g>
<g transform="translate(10, 274)">
<rect width="60" height="22" rx="4" fill="#f59e0b" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#f59e0b" text-anchor="middle">tower</text>
</g>
<g transform="translate(10, 306)">
<rect width="60" height="22" rx="4" fill="#06b6d4" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#06b6d4" text-anchor="middle">nats</text>
</g>
<g transform="translate(10, 338)">
<rect width="60" height="22" rx="4" fill="#8b5cf6" opacity="0.1"/>
<text x="30" y="15" class="badge" fill="#8b5cf6" text-anchor="middle">nickel</text>
</g>
</g>
<!-- Footer -->
<text x="700" y="1005" class="label-sm" text-anchor="middle" fill="#475569">SYNTAXIS v0.x | Rust 2021 (MSRV 1.75+) | 10K+ LOC | 632+ tests | Production Beta</text>
</svg>