digraph wrapping {
    rankdir=LR
    fontname="Helvetica"
    node [fontname="Helvetica" fontsize=11 style=filled shape=box]
    edge [fontname="Helvetica" fontsize=9]

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

    browser [label="Browser" shape=oval]

    subgraph cluster_nginx {
        label="Nginx (reverse proxy)"
        style=dashed
        class="accent"

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

    subgraph cluster_app {
        label="Managed App"
        style=dashed

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

    subgraph cluster_spr {
        label="Soleprint"
        style=dashed
        class="accent"

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

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

    // The injection
    proxy -> sidebar_css [class="accent" label="injects into </head>" style=dashed]
    proxy -> sidebar_js [class="accent" style=dashed]

    sidebar_js -> hub [class="accent" label="loads config"]
}