digraph wrapping {
    bgcolor="#0a0a0a"
    rankdir=LR
    fontname="Helvetica"
    node [fontname="Helvetica" fontsize=11 style=filled color="#333" fontcolor="#e5e5e5" shape=box]
    edge [fontname="Helvetica" fontsize=9 fontcolor="#a3a3a3" color="#666"]

    label="Sidebar Injection — How Wrapping Works"
    labelloc=t
    fontsize=14
    fontcolor="#d4a574"

    browser [label="Browser" fillcolor="#1a1a1a" shape=oval]

    subgraph cluster_nginx {
        label="Nginx (reverse proxy)"
        style=dashed
        color="#d4a574"
        fontcolor="#d4a574"

        proxy [label="proxy_pass\n+\nsub_filter\ninjects sidebar" fillcolor="#1a1a1a" shape=component]
    }

    subgraph cluster_app {
        label="Managed App"
        style=dashed
        color="#333"
        fontcolor="#666"

        frontend [label="Frontend\n(React/Next/Vue)" fillcolor="#1a1a1a"]
        backend [label="Backend API" fillcolor="#1a1a1a"]
    }

    subgraph cluster_spr {
        label="Soleprint"
        style=dashed
        color="#d4a574"
        fontcolor="#d4a574"

        sidebar_css [label="sidebar.css" fillcolor="#1a1a1a"]
        sidebar_js [label="sidebar.js" fillcolor="#1a1a1a"]
        hub [label="Hub API\n/api/sidebar/config" fillcolor="#1a1a1a"]
    }

    browser -> proxy [label="myroom.spr.local.ar"]
    proxy -> frontend [label="/ → app"]
    proxy -> hub [label="/spr/ → soleprint"]

    // The injection
    proxy -> sidebar_css [label="injects into </head>" color="#d4a574" style=dashed]
    proxy -> sidebar_js [color="#d4a574" style=dashed]

    sidebar_js -> hub [label="loads config" color="#d4a574"]
}