Add docker

docs/structure.svg

@@ -0,0 +1,57 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="900" height="320" viewBox="0 0 900 320">
+    <defs>
+        <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8"
+                orient="auto-start-reverse">
+            <path d="M0 0 L10 5 L0 10 z" fill="#4a6179"/>
+        </marker>
+        <style>
+            text { font-family: monospace; fill: #222; font-size: 14px; }
+            .node { fill: #e8eef5; stroke: #4a6179; stroke-width: 1.5; }
+            .label { font-size: 13px; }
+        </style>
+    </defs>
+    <rect width="900" height="320" fill="#ffffff"/>
+    <text x="450" y="40" font-size="18" text-anchor="middle">Поток данных в клиентском приложении (Компонент → Store →
+        API → Store → UI)
+    </text>
+    <rect class="node" x="30" y="90" width="150" height="80" rx="8" ry="8"/>
+    <text class="label" x="105" y="120" text-anchor="middle">
+        <tspan x="105" y="120">Компонент React</tspan>
+        <tspan x="105" y="140">(UI + обработчики)</tspan>
+    </text>
+    <rect class="node" x="210" y="90" width="150" height="80" rx="8" ry="8"/>
+    <text class="label" x="285" y="120" text-anchor="middle">
+        <tspan x="285" y="120">MobX Store</tspan>
+        <tspan x="285" y="140">(управление</tspan>
+        <tspan x="285" y="156">состоянием)</tspan>
+    </text>
+    <rect class="node" x="390" y="90" width="150" height="80" rx="8" ry="8"/>
+    <text class="label" x="465" y="120" text-anchor="middle">
+        <tspan x="465" y="120">API Client</tspan>
+        <tspan x="465" y="140">(fetch + Zod</tspan>
+        <tspan x="465" y="156">валидация)</tspan>
+    </text>
+    <rect class="node" x="570" y="90" width="150" height="80" rx="8" ry="8"/>
+    <text class="label" x="645" y="120" text-anchor="middle">
+        <tspan x="645" y="120">Store Update</tspan>
+        <tspan x="645" y="140">(наблюдаемые</tspan>
+        <tspan x="645" y="156">изменения)</tspan>
+    </text>
+    <rect class="node" x="750" y="90" width="150" height="80" rx="8" ry="8"/>
+    <text class="label" x="825" y="120" text-anchor="middle">
+        <tspan x="825" y="120">UI Re-render</tspan>
+        <tspan x="825" y="140">(observer</tspan>
+        <tspan x="825" y="156">компоненты)</tspan>
+    </text>
+    <line x1="180" y1="130" x2="210" y2="130" stroke="#4a6179" stroke-width="2" marker-end="url(#arrow)"/>
+    <text x="195" y="75" text-anchor="middle">действие / намерение</text>
+    <line x1="360" y1="130" x2="390" y2="130" stroke="#4a6179" stroke-width="2" marker-end="url(#arrow)"/>
+    <text x="375" y="75" text-anchor="middle">fetch-запрос</text>
+    <line x1="540" y1="130" x2="570" y2="130" stroke="#4a6179" stroke-width="2" marker-end="url(#arrow)"/>
+    <text x="555" y="75" text-anchor="middle">валидированный ответ</text>
+    <line x1="720" y1="130" x2="750" y2="130" stroke="#4a6179" stroke-width="2" marker-end="url(#arrow)"/>
+    <text x="735" y="75" text-anchor="middle">событие изменения</text>
+    <path d="M780 170 C 700 250, 220 250, 150 170" fill="none" stroke="#4a6179" stroke-width="2"
+          marker-end="url(#arrow)"/>
+    <text x="465" y="250" text-anchor="middle">следующее взаимодействие</text>
+</svg>