updated docs

docs/graphs/wrapping.dot

@@ -0,0 +1,54 @@
+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"]
+}