<mxfile host="app.diagrams.net" agent="tempest-react-sdk" version="24.0.0">
  <diagram name="architecture" id="architecture">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="826" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="title" value="tempest-react-sdk — Arquitetura" style="text;html=1;align=center;fontSize=18;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="380" y="20" width="400" height="30" as="geometry" />
        </mxCell>
        <mxCell id="app" value="Aplicativo consumidor (React)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=14;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="80" width="1080" height="80" as="geometry" />
        </mxCell>
        <mxCell id="layerUI" value="UI" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="190" width="260" height="200" as="geometry" />
        </mxCell>
        <mxCell id="ui1" value="components/ (Button, Modal, Table…)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="55" y="220" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="ui2" value="theme/ (ThemeProvider, useTheme)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="55" y="245" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="ui3" value="i18n/ (I18nProvider, useI18n)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="55" y="270" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="ui4" value="error-boundary/" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="55" y="295" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="ui5" value="hooks/, utils/ (cn, format…)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="55" y="320" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="ui6" value="audio/" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="55" y="345" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="layerData" value="Estado &amp; Cache" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="320" y="190" width="260" height="200" as="geometry" />
        </mxCell>
        <mxCell id="dt1" value="auth/ (createAuthStore, AuthGuard)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="335" y="220" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="dt2" value="query/ (QueryProvider, keys)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="335" y="245" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="dt3" value="offline/ (createOfflineStore — Dexie)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="335" y="270" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="dt4" value="forms/ (validateForm, zodResolver)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="335" y="295" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="layerTransport" value="Transporte" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="600" y="190" width="260" height="200" as="geometry" />
        </mxCell>
        <mxCell id="tr1" value="http/ (createApiClient, parseResponse, upload)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="615" y="220" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="tr2" value="sse/ (createEventStream, useEventStream)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="615" y="245" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="tr3" value="ws/ (createWebSocket, useWebSocket)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="615" y="270" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="tr4" value="push/ (WebPushClient, usePushSubscription)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="615" y="295" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="tr5" value="sw/ (registerSW + handlers)" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="615" y="320" width="230" height="20" as="geometry" />
        </mxCell>
        <mxCell id="layerPeer" value="Peer deps opcionais" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="880" y="190" width="240" height="200" as="geometry" />
        </mxCell>
        <mxCell id="pd1" value="@tanstack/react-query" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="895" y="220" width="210" height="20" as="geometry" />
        </mxCell>
        <mxCell id="pd2" value="zod" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="895" y="245" width="210" height="20" as="geometry" />
        </mxCell>
        <mxCell id="pd3" value="zustand" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="895" y="270" width="210" height="20" as="geometry" />
        </mxCell>
        <mxCell id="pd4" value="dexie" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="895" y="295" width="210" height="20" as="geometry" />
        </mxCell>
        <mxCell id="pd5" value="react-hook-form" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="895" y="320" width="210" height="20" as="geometry" />
        </mxCell>
        <mxCell id="pd6" value="lucide-react" style="text;html=1;align=left;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="895" y="345" width="210" height="20" as="geometry" />
        </mxCell>
        <mxCell id="backend" value="Backend (FastAPI / qualquer)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="430" width="1080" height="60" as="geometry" />
        </mxCell>
        <mxCell id="be1" value="REST / SSE / WebSocket / Web Push" style="text;html=1;align=center;verticalAlign=middle;" vertex="1" parent="1">
          <mxGeometry x="40" y="450" width="1080" height="30" as="geometry" />
        </mxCell>
        <mxCell id="legend" value="App importa apenas o que precisa — peer deps não usadas ficam fora do bundle." style="text;html=1;align=center;fontSize=11;fontStyle=2;" vertex="1" parent="1">
          <mxGeometry x="40" y="520" width="1080" height="20" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
