<svg aria-roledescription="stateDiagram" role="graphics-document document" viewBox="0 0 757.17578125 409" style="max-width: 100%;" class="statediagram" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");'</style><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#graph-div .error-icon{fill:#552222;}#graph-div .error-text{fill:#552222;stroke:#552222;}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:#333333;stroke:#333333;}#graph-div .marker.cross{stroke:#333333;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#graph-div g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#graph-div g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#graph-div g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#graph-div g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#graph-div g.stateGroup line{stroke:#333333;stroke-width:1;}#graph-div .transition{stroke:#333333;stroke-width:1;fill:none;}#graph-div .stateGroup .composit{fill:white;border-bottom:1px;}#graph-div .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#graph-div .state-note{stroke:#aaaa33;fill:#fff5ad;}#graph-div .state-note text{fill:black;stroke:none;font-size:10px;}#graph-div .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#graph-div .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#graph-div .edgeLabel .label text{fill:#333;}#graph-div .label div .edgeLabel{color:#333;}#graph-div .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#graph-div .node circle.state-start{fill:#333333;stroke:#333333;}#graph-div .node .fork-join{fill:#333333;stroke:#333333;}#graph-div .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#graph-div .end-state-inner{fill:white;stroke-width:1.5;}#graph-div .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#graph-div .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#graph-div #statediagram-barbEnd{fill:#333333;}#graph-div .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#graph-div .cluster-label,#graph-div .nodeLabel{color:#131300;}#graph-div .statediagram-cluster rect.outer{rx:5px;ry:5px;}#graph-div .statediagram-state .divider{stroke:#9370DB;}#graph-div .statediagram-state .title-state{rx:5px;ry:5px;}#graph-div .statediagram-cluster.statediagram-cluster .inner{fill:white;}#graph-div .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#graph-div .statediagram-cluster .inner{rx:0;ry:0;}#graph-div .statediagram-state rect.basic{rx:5px;ry:5px;}#graph-div .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#graph-div .note-edge{stroke-dasharray:5;}#graph-div .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#graph-div .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#graph-div .statediagram-note text{fill:black;}#graph-div .statediagram-note .nodeLabel{color:black;}#graph-div .statediagram .edgeLabel{color:red;}#graph-div #dependencyStart,#graph-div #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#graph-div .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker orient="auto" markerUnits="strokeWidth" markerHeight="14" markerWidth="20" refY="7" refX="19" id="statediagram-barbEnd"><path d="M 19,7 L9,13 L14,7 L9,1 Z"></path></marker></defs><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge8" d="M361.25390625,22L361.25390625,26.166666666666668C361.25390625,30.333333333333332,361.25390625,38.666666666666664,361.25390625,47C361.25390625,55.333333333333336,361.25390625,63.666666666666664,361.25390625,67.83333333333333L361.25390625,72"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge9" d="M400.40355365044246,111L412.7842113753688,117.16666666666667C425.164869100295,123.33333333333333,449.9261845501475,135.66666666666666,462.30684227507373,148C474.6875,160.33333333333334,474.6875,172.66666666666666,474.6875,178.83333333333334L474.6875,185"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge10" d="M565.7890625,192.0682302771855L574.421875,190.8901918976546C583.0546875,189.7121535181237,600.3203125,187.35607675906184,611.111328125,186.17803837953093C621.90234375,185,626.21875,185,630.53515625,188.25C634.8515625,191.5,639.16796875,198,639.16796875,204.5C639.16796875,211,634.8515625,217.5,630.53515625,220.75C626.21875,224,621.90234375,224,611.111328125,222.8219616204691C600.3203125,221.64392324093816,583.0546875,219.2878464818763,574.421875,218.1098081023454L565.7890625,216.9317697228145"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge11" d="M312.40234375,101.81863253355141L275.962890625,109.51552711129284C239.5234375,117.21242168903427,166.64453125,132.60621084451714,130.205078125,146.46977208892523C93.765625,160.33333333333334,93.765625,172.66666666666666,93.765625,178.83333333333334L93.765625,185"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge12" d="M93.765625,224L93.765625,230.16666666666666C93.765625,236.33333333333334,93.765625,248.66666666666666,118.29287656710915,261C142.8201281342183,273.3333333333333,191.8746312684366,285.6666666666667,216.40188283554573,291.8333333333333L240.92913440265488,298"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge13" d="M420.7780351216814,224L403.7297428097345,230.16666666666666C386.6814504977876,236.33333333333334,352.58486587389376,248.66666666666666,335.5365735619469,261C318.48828125,273.3333333333333,318.48828125,285.6666666666667,318.48828125,291.8333333333333L318.48828125,298"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge14" d="M528.5969648783185,224L545.6452571902654,230.16666666666666C562.6935495022124,236.33333333333334,596.7901341261062,248.66666666666666,576.0675931047198,261.6645201357108C555.3450520833334,274.6623736047549,479.8033854166667,288.3247472095098,442.0325520833333,295.1559340118872L404.26171875,301.98712081426464"></path><path marker-end="url(#statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge15" d="M318.48828125,337L318.48828125,341.1666666666667C318.48828125,345.3333333333333,318.48828125,353.6666666666667,318.48828125,362C318.48828125,370.3333333333333,318.48828125,378.6666666666667,318.48828125,382.8333333333333L318.48828125,387"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"></rect><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(474.6875, 148)" class="edgeLabel"><g transform="translate(-42.6953125, -12)" class="label"><rect height="24" width="85.390625" ry="0" rx="0"></rect><foreignObject height="24" width="85.390625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">keydown [5]</span></div></foreignObject></g></g><g transform="translate(643.484375, 204.5)" class="edgeLabel"><g transform="translate(-42.6953125, -12)" class="label"><rect height="24" width="85.390625" ry="0" rx="0"></rect><foreignObject height="24" width="85.390625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">keydown [6]</span></div></foreignObject></g></g><g transform="translate(93.765625, 148)" class="edgeLabel"><g transform="translate(-69.3671875, -12)" class="label"><rect height="24" width="138.734375" ry="0" rx="0"></rect><foreignObject height="24" width="138.734375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">compositionstart [7]</span></div></foreignObject></g></g><g transform="translate(93.765625, 261)" class="edgeLabel"><g transform="translate(-28.46875, -12)" class="label"><rect height="24" width="56.9375" ry="0" rx="0"></rect><foreignObject height="24" width="56.9375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">input [8]</span></div></foreignObject></g></g><g transform="translate(318.48828125, 261)" class="edgeLabel"><g transform="translate(-174.109375, -12)" class="label"><rect height="24" width="348.21875" ry="0" rx="0"></rect><foreignObject height="24" width="348.21875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">[keyup key_code = keydown key_code] keyup [9]</span></div></foreignObject></g></g><g transform="translate(630.88671875, 261)" class="edgeLabel"><g transform="translate(-118.2890625, -12)" class="label"><rect height="24" width="236.578125" ry="0" rx="0"></rect><foreignObject height="24" width="236.578125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">MaybeFlushKeyboardEntries [10]</span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"></rect><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(361.25390625, 91.5)" id="state-no_entry-11" class="node statediagram-state"><rect height="39" width="97.703125" y="-19.5" x="-48.8515625" style="" class="basic label-container"></rect><g transform="translate(-41.3515625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="82.703125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">No entry [1]</span></div></foreignObject></g></g><g transform="translate(474.6875, 204.5)" id="state-have_key_down-14" class="node statediagram-state"><rect height="39" width="182.203125" y="-19.5" x="-91.1015625" style="" class="basic label-container"></rect><g transform="translate(-83.6015625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="167.203125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Have keydown entry [2]</span></div></foreignObject></g></g><g transform="translate(93.765625, 204.5)" id="state-have_composition-12" class="node statediagram-state"><rect height="39" width="171.53125" y="-19.5" x="-85.765625" style="" class="basic label-container"></rect><g transform="translate(-78.265625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="156.53125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Composition Event [3]</span></div></foreignObject></g></g><g transform="translate(318.48828125, 317.5)" id="state-interaction_finished-15" class="node statediagram-state"><rect height="39" width="171.546875" y="-19.5" x="-85.7734375" style="" class="basic label-container"></rect><g transform="translate(-78.2734375, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="156.546875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Interaction finished [4]</span></div></foreignObject></g></g><g transform="translate(361.25390625, 15)" id="state-root_start-8" class="node default"><circle height="14" width="14" r="7" class="state-start"></circle></g><g transform="translate(318.48828125, 394)" id="state-root_end-15" class="node default"><circle height="14" width="14" r="7" class="state-start"></circle><circle height="10" width="10" r="5" class="state-end"></circle></g></g></g></g></svg>