npm - @xmachines/play-router - Versions diffs - 1.0.0-beta.1 - Mend

@xmachines/play-router 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/.oxfmtrc.json +3 -0
package/.oxlintrc.json +3 -0
package/README.md +436 -0
package/coverage/base.css +224 -0
package/coverage/block-navigation.js +87 -0
package/coverage/build-tree.ts.html +316 -0
package/coverage/connect-router.ts.html +505 -0
package/coverage/coverage-summary.json +15 -0
package/coverage/crawl-machine.ts.html +385 -0
package/coverage/create-browser-history.ts.html +556 -0
package/coverage/create-route-map.ts.html +400 -0
package/coverage/create-router.ts.html +328 -0
package/coverage/extract-route.ts.html +322 -0
package/coverage/extract-routes.ts.html +286 -0
package/coverage/favicon.png +0 -0
package/coverage/index.html +296 -0
package/coverage/index.ts.html +610 -0
package/coverage/prettify.css +1 -0
package/coverage/prettify.js +2 -0
package/coverage/query.ts.html +307 -0
package/coverage/router-bridge-base.ts.html +919 -0
package/coverage/sort-arrow-sprite.png +0 -0
package/coverage/sorter.js +210 -0
package/coverage/types.ts.html +787 -0
package/coverage/validate-routes.ts.html +319 -0
package/dist/build-tree.d.ts +13 -0
package/dist/build-tree.d.ts.map +1 -0
package/dist/build-tree.js +67 -0
package/dist/build-tree.js.map +1 -0
package/dist/connect-router.d.ts +56 -0
package/dist/connect-router.d.ts.map +1 -0
package/dist/connect-router.js +119 -0
package/dist/connect-router.js.map +1 -0
package/dist/crawl-machine.d.ts +74 -0
package/dist/crawl-machine.d.ts.map +1 -0
package/dist/crawl-machine.js +95 -0
package/dist/crawl-machine.js.map +1 -0
package/dist/create-browser-history.d.ts +68 -0
package/dist/create-browser-history.d.ts.map +1 -0
package/dist/create-browser-history.js +94 -0
package/dist/create-browser-history.js.map +1 -0
package/dist/create-route-map.d.ts +46 -0
package/dist/create-route-map.d.ts.map +1 -0
package/dist/create-route-map.js +73 -0
package/dist/create-route-map.js.map +1 -0
package/dist/create-router.d.ts +73 -0
package/dist/create-router.d.ts.map +1 -0
package/dist/create-router.js +63 -0
package/dist/create-router.js.map +1 -0
package/dist/extract-route.d.ts +25 -0
package/dist/extract-route.d.ts.map +1 -0
package/dist/extract-route.js +63 -0
package/dist/extract-route.js.map +1 -0
package/dist/extract-routes.d.ts +41 -0
package/dist/extract-routes.d.ts.map +1 -0
package/dist/extract-routes.js +61 -0
package/dist/extract-routes.js.map +1 -0
package/dist/index.d.ts +56 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +141 -0
package/dist/index.js.map +1 -0
package/dist/query.d.ts +52 -0
package/dist/query.d.ts.map +1 -0
package/dist/query.js +69 -0
package/dist/query.js.map +1 -0
package/dist/router-bridge-base.d.ts +150 -0
package/dist/router-bridge-base.d.ts.map +1 -0
package/dist/router-bridge-base.js +240 -0
package/dist/router-bridge-base.js.map +1 -0
package/dist/types.d.ts +228 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +2 -0
package/dist/types.js.map +1 -0
package/dist/validate-routes.d.ts +39 -0
package/dist/validate-routes.d.ts.map +1 -0
package/dist/validate-routes.js +65 -0
package/dist/validate-routes.js.map +1 -0
package/examples/demo/README.md +127 -0
package/examples/demo/index.html +41 -0
package/examples/demo/package.json +27 -0
package/examples/demo/src/main.ts +28 -0
package/examples/demo/src/router.ts +37 -0
package/examples/demo/src/shell.ts +316 -0
package/examples/demo/test/browser/auth-flow.browser.test.ts +60 -0
package/examples/demo/test/browser/startup.browser.test.ts +37 -0
package/examples/demo/test/library-pattern.test.ts +51 -0
package/examples/demo/tsconfig.json +17 -0
package/examples/demo/vite.config.ts +7 -0
package/examples/demo/vitest.browser.config.ts +20 -0
package/examples/demo/vitest.config.ts +9 -0
package/examples/shared/dist/auth-machine.d.ts +20 -0
package/examples/shared/dist/auth-machine.d.ts.map +1 -0
package/examples/shared/dist/auth-machine.js +212 -0
package/examples/shared/dist/auth-machine.js.map +1 -0
package/examples/shared/dist/catalog.d.ts +85 -0
package/examples/shared/dist/catalog.d.ts.map +1 -0
package/examples/shared/dist/catalog.js +86 -0
package/examples/shared/dist/catalog.js.map +1 -0
package/examples/shared/dist/index.d.ts +4 -0
package/examples/shared/dist/index.d.ts.map +1 -0
package/examples/shared/dist/index.js +3 -0
package/examples/shared/dist/index.js.map +1 -0
package/examples/shared/package.json +37 -0
package/examples/shared/src/auth-machine.ts +234 -0
package/examples/shared/src/catalog.ts +95 -0
package/examples/shared/src/index.css +3 -0
package/examples/shared/src/index.ts +3 -0
package/examples/shared/src/styles/layout.css +413 -0
package/examples/shared/src/styles/reset.css +42 -0
package/examples/shared/src/styles/tokens.css +183 -0
package/examples/shared/tsconfig.json +14 -0
package/examples/shared/tsconfig.tsbuildinfo +1 -0
package/package.json +44 -0
package/src/build-tree.ts +77 -0
package/src/connect-router.ts +142 -0
package/src/crawl-machine.ts +100 -0
package/src/create-browser-history.ts +157 -0
package/src/create-route-map.ts +105 -0
package/src/create-router.ts +87 -0
package/src/extract-route.ts +79 -0
package/src/extract-routes.ts +67 -0
package/src/index.ts +175 -0
package/src/query.ts +74 -0
package/src/router-bridge-base.ts +279 -0
package/src/types.ts +234 -0
package/src/validate-routes.ts +76 -0
package/test/connect-route-map.test.ts +320 -0
package/test/crawl-extract.test.js +473 -0
package/test/create-browser-history.test.ts +123 -0
package/test/create-router.test.ts +23 -0
package/test/extract-routes.test.ts +80 -0
package/test/find-route-by-path-patterns.test.ts +69 -0
package/test/integration.test.js +438 -0
package/test/query.test.ts +56 -0
package/test/router-bridge-base-edge.test.ts +165 -0
package/test/router-bridge-base.test.ts +119 -0
package/test/tree-query.test.js +692 -0
package/test/validation.test.js +158 -0
package/tsconfig.json +14 -0
package/tsconfig.tsbuildinfo +1 -0
package/vitest.config.ts +35 -0

package/coverage/router-bridge-base.ts.html ADDED Viewed

@@ -0,0 +1,919 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for router-bridge-base.ts</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="prettify.css" />
+    <link rel="stylesheet" href="base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="index.html">All files</a> router-bridge-base.ts</h1>
+        <div class='clearfix'>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">86.56% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>58/67</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">68.42% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>26/38</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>11/11</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">94.91% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>56/59</span>
+            </div>
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</a>
+<a name='L4'></a><a href='#L4'>4</a>
+<a name='L5'></a><a href='#L5'>5</a>
+<a name='L6'></a><a href='#L6'>6</a>
+<a name='L7'></a><a href='#L7'>7</a>
+<a name='L8'></a><a href='#L8'>8</a>
+<a name='L9'></a><a href='#L9'>9</a>
+<a name='L10'></a><a href='#L10'>10</a>
+<a name='L11'></a><a href='#L11'>11</a>
+<a name='L12'></a><a href='#L12'>12</a>
+<a name='L13'></a><a href='#L13'>13</a>
+<a name='L14'></a><a href='#L14'>14</a>
+<a name='L15'></a><a href='#L15'>15</a>
+<a name='L16'></a><a href='#L16'>16</a>
+<a name='L17'></a><a href='#L17'>17</a>
+<a name='L18'></a><a href='#L18'>18</a>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a>
+<a name='L22'></a><a href='#L22'>22</a>
+<a name='L23'></a><a href='#L23'>23</a>
+<a name='L24'></a><a href='#L24'>24</a>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a>
+<a name='L27'></a><a href='#L27'>27</a>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</a>
+<a name='L31'></a><a href='#L31'>31</a>
+<a name='L32'></a><a href='#L32'>32</a>
+<a name='L33'></a><a href='#L33'>33</a>
+<a name='L34'></a><a href='#L34'>34</a>
+<a name='L35'></a><a href='#L35'>35</a>
+<a name='L36'></a><a href='#L36'>36</a>
+<a name='L37'></a><a href='#L37'>37</a>
+<a name='L38'></a><a href='#L38'>38</a>
+<a name='L39'></a><a href='#L39'>39</a>
+<a name='L40'></a><a href='#L40'>40</a>
+<a name='L41'></a><a href='#L41'>41</a>
+<a name='L42'></a><a href='#L42'>42</a>
+<a name='L43'></a><a href='#L43'>43</a>
+<a name='L44'></a><a href='#L44'>44</a>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a>
+<a name='L47'></a><a href='#L47'>47</a>
+<a name='L48'></a><a href='#L48'>48</a>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a>
+<a name='L60'></a><a href='#L60'>60</a>
+<a name='L61'></a><a href='#L61'>61</a>
+<a name='L62'></a><a href='#L62'>62</a>
+<a name='L63'></a><a href='#L63'>63</a>
+<a name='L64'></a><a href='#L64'>64</a>
+<a name='L65'></a><a href='#L65'>65</a>
+<a name='L66'></a><a href='#L66'>66</a>
+<a name='L67'></a><a href='#L67'>67</a>
+<a name='L68'></a><a href='#L68'>68</a>
+<a name='L69'></a><a href='#L69'>69</a>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</a>
+<a name='L72'></a><a href='#L72'>72</a>
+<a name='L73'></a><a href='#L73'>73</a>
+<a name='L74'></a><a href='#L74'>74</a>
+<a name='L75'></a><a href='#L75'>75</a>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a>
+<a name='L91'></a><a href='#L91'>91</a>
+<a name='L92'></a><a href='#L92'>92</a>
+<a name='L93'></a><a href='#L93'>93</a>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</a>
+<a name='L97'></a><a href='#L97'>97</a>
+<a name='L98'></a><a href='#L98'>98</a>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</a>
+<a name='L114'></a><a href='#L114'>114</a>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a>
+<a name='L128'></a><a href='#L128'>128</a>
+<a name='L129'></a><a href='#L129'>129</a>
+<a name='L130'></a><a href='#L130'>130</a>
+<a name='L131'></a><a href='#L131'>131</a>
+<a name='L132'></a><a href='#L132'>132</a>
+<a name='L133'></a><a href='#L133'>133</a>
+<a name='L134'></a><a href='#L134'>134</a>
+<a name='L135'></a><a href='#L135'>135</a>
+<a name='L136'></a><a href='#L136'>136</a>
+<a name='L137'></a><a href='#L137'>137</a>
+<a name='L138'></a><a href='#L138'>138</a>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a>
+<a name='L167'></a><a href='#L167'>167</a>
+<a name='L168'></a><a href='#L168'>168</a>
+<a name='L169'></a><a href='#L169'>169</a>
+<a name='L170'></a><a href='#L170'>170</a>
+<a name='L171'></a><a href='#L171'>171</a>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</a>
+<a name='L177'></a><a href='#L177'>177</a>
+<a name='L178'></a><a href='#L178'>178</a>
+<a name='L179'></a><a href='#L179'>179</a>
+<a name='L180'></a><a href='#L180'>180</a>
+<a name='L181'></a><a href='#L181'>181</a>
+<a name='L182'></a><a href='#L182'>182</a>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</a>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</a>
+<a name='L232'></a><a href='#L232'>232</a>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a>
+<a name='L242'></a><a href='#L242'>242</a>
+<a name='L243'></a><a href='#L243'>243</a>
+<a name='L244'></a><a href='#L244'>244</a>
+<a name='L245'></a><a href='#L245'>245</a>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a>
+<a name='L257'></a><a href='#L257'>257</a>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</a>
+<a name='L271'></a><a href='#L271'>271</a>
+<a name='L272'></a><a href='#L272'>272</a>
+<a name='L273'></a><a href='#L273'>273</a>
+<a name='L274'></a><a href='#L274'>274</a>
+<a name='L275'></a><a href='#L275'>275</a>
+<a name='L276'></a><a href='#L276'>276</a>
+<a name='L277'></a><a href='#L277'>277</a>
+<a name='L278'></a><a href='#L278'>278</a>
+<a name='L279'></a><a href='#L279'>279</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">/**
+ * RouterBridgeBase — Abstract base class for all framework router adapters
+ *
+ * Captures the 90% identical logic from all existing router bridges:
+ * - TC39 Signal watcher for actor → router direction
+ * - isProcessingNavigation flag for circular update prevention
+ * - syncRouterFromActor / syncActorFromRouter with URL parameter extraction
+ * - connect / disconnect lifecycle matching the RouterBridge protocol
+ *
+ * Subclasses implement only the 3 framework-specific abstract methods:
+ * - navigateRouter(path): How to tell the framework router to navigate
+ * - watchRouterChanges(): How to subscribe to router location changes
+ * - unwatchRouterChanges(): How to unsubscribe from router location changes
+ *
+ * @example
+ * ```typescript
+ * export class MyRouterBridge extends RouterBridgeBase {
+ *   private unsubscribe: (() =&gt; void) | null = null;
+ *
+ *   constructor(private router: MyRouter, actor: any, routeMap: any) {
+ *     super(actor, routeMap);
+ *   }
+ *
+ *   protected navigateRouter(path: string): void {
+ *     this.router.navigate(path);
+ *   }
+ *
+ *   protected watchRouterChanges(): void {
+ *     this.unsubscribe = this.router.subscribe((state) =&gt; {
+ *       this.syncActorFromRouter(state.location.pathname, state.location.search);
+ *     });
+ *   }
+ *
+ *   protected unwatchRouterChanges(): void {
+ *     this.unsubscribe?.();
+ *     this.unsubscribe = null;
+ *   }
+ * }
+ * ```
+ *
+ * @see {@link https://gitlab.com/xmachin-es/rfc/-/blob/main/src/play-v1.md | RFC Play v1 - Invariant INV-04}
+ */
+&nbsp;
+import { Signal } from "@xmachines/play-signals";
+import type { AbstractActor, Routable } from "@xmachines/play-actor";
+import type { PlayRouteEvent, RouterBridge } from "./types.js";
+&nbsp;
+/**
+ * Abstract base class for all @xmachines router adapter bridges.
+ *
+ * Implements RouterBridge protocol and contains all common bridge logic.
+ * Subclasses only need to implement the 3 abstract methods that differ
+ * between frameworks.
+ */
+export abstract class RouterBridgeBase implements RouterBridge {
+	// ── Common state (identical across all 4 existing bridges) ──
+	protected lastSyncedPath: string = "";
+	protected isProcessingNavigation: boolean = false;
+	protected routeWatcher: Signal.subtle.Watcher | null = null;
+&nbsp;
+	/**
+	 * Constructor receives the 3 things all bridges need.
+	 *
+	 * @param actor - Actor with currentRoute signal and send method
+	 * @param routeMap - Bidirectional route map for stateId ↔ path resolution
+	 */
+	constructor(
+		protected readonly actor: AbstractActor&lt;any&gt; &amp; Routable,
+		protected readonly routeMap: {
+			getStateIdByPath(path: string): string | undefined;
+			getPathByStateId(id: string): string | undefined;
+		},
+	) {
+		// Initialize lastSyncedPath to actor's current route (prevents initial sync loop)
+		// Pattern from VueRouterBridge and SolidRouterBridge
+		this.lastSyncedPath = this.actor.currentRoute.get() || <span class="branch-1 cbranch-no" title="branch not covered" >"";</span>
+	}
+&nbsp;
+	// ── RouterBridge protocol (final — subclasses must not override) ──
+&nbsp;
+	/**
+	 * Connect the router bridge to the Actor.
+	 *
+	 * Sets up the TC39 Signal watcher for actor → router direction and
+	 * starts watching router changes (framework-specific).
+	 */
+	connect(): void {
+		// Set up TC39 Signal watcher for actor → router direction
+		this.routeWatcher = new Signal.subtle.Watcher(() =&gt; {
+			queueMicrotask(() =&gt; {
+				this.routeWatcher?.getPending(); // Acknowledge notification
+				const route = this.actor.currentRoute.get();
+				this.syncRouterFromActor(route);
+				this.routeWatcher?.watch(this.actor.currentRoute); // Re-watch (one-shot)
+			});
+		});
+		this.routeWatcher.watch(this.actor.currentRoute);
+&nbsp;
+		// Start watching router changes (framework-specific)
+		this.watchRouterChanges();
+&nbsp;
+		// Initial sync: router → actor takes priority over actor → router.
+		//
+		// If the page loaded on a URL other than the actor's initial state (e.g. the
+		// user typed "/about" directly, or followed a deep link), the router already
+		// knows the correct path but the actor is still at its initial state ("/").
+		// We must drive the actor to match the URL, not overwrite the URL with the
+		// actor's default.
+		//
+		// router.subscribe() only fires on *future* navigation events — it does NOT
+		// fire for the already-loaded location. Subclasses that can read the router's
+		// current location synchronously should override getInitialRouterPath().
+		const initialRouterPath = this.getInitialRouterPath();
+		const initialActorRoute = this.actor.currentRoute.get();
+&nbsp;
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (initialRouterPath &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >initialRouterPath !== initialActorRoute) {</span>
+			// Router path differs from actor state → sync actor from router
+<span class="cstat-no" title="statement not covered" >			this.syncActorFromRouter(initialRouterPath);</span>
+		<span class="missing-if-branch" title="if path not taken" >I</span>} else if (initialActorRoute &amp;&amp; initialActorRoute !== this.lastSyncedPath) {
+			// No router path override → sync router from actor (original behaviour)
+<span class="cstat-no" title="statement not covered" >			this.syncRouterFromActor(initialActorRoute);</span>
+		}
+	}
+&nbsp;
+	/**
+	 * Disconnect the router bridge from the Actor.
+	 *
+	 * Stops signal watching and unregisters framework-specific router listener.
+	 */
+	disconnect(): void {
+		this.routeWatcher = null;
+		this.unwatchRouterChanges();
+	}
+&nbsp;
+	// ── Sync methods (protected, overridable if subclass needs custom behavior) ──
+&nbsp;
+	/**
+	 * Sync router location when actor route signal changes.
+	 *
+	 * Calls navigateRouter() for framework-specific navigation.
+	 * Prevents circular updates via isProcessingNavigation flag.
+	 */
+	protected syncRouterFromActor(route: string | null | unknown): void {
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (!route || typeof route !== "string") <span class="cstat-no" title="statement not covered" >return;</span>
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (route === this.lastSyncedPath) <span class="cstat-no" title="statement not covered" >return;</span>
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (this.isProcessingNavigation) <span class="cstat-no" title="statement not covered" >return;</span>
+&nbsp;
+		this.lastSyncedPath = route;
+		this.isProcessingNavigation = true;
+		this.navigateRouter(route);
+		queueMicrotask(() =&gt; {
+			this.isProcessingNavigation = false;
+		});
+	}
+&nbsp;
+	/**
+	 * Sync actor state when router location changes.
+	 *
+	 * Sends play.route event to actor with resolved stateId, params, and query.
+	 * Prevents circular updates via isProcessingNavigation flag.
+	 */
+	protected syncActorFromRouter(pathname: string, search?: string): void {
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (typeof pathname !== "string") <span class="cstat-no" title="statement not covered" >return;</span>
+		if (pathname === this.lastSyncedPath) return;
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (this.isProcessingNavigation) <span class="cstat-no" title="statement not covered" >return;</span>
+&nbsp;
+		this.isProcessingNavigation = true;
+&nbsp;
+		try {
+			const stateId = this.routeMap.getStateIdByPath(pathname);
+			if (!stateId) {
+				this.isProcessingNavigation = false;
+				return;
+			}
+&nbsp;
+			const params = this.extractParams(pathname, stateId);
+			const query = this.extractQuery(search || "");
+&nbsp;
+			// formatPlayRouteTransitions generates guards that match event.to === "#stateId"
+			// RouteMap stateIds from extractMachineRoutes don't include the "#" prefix,
+			// so we normalise here. If the routeMap already stores "#stateId" (as some
+			// manually-constructed maps do) we avoid doubling the prefix.
+			const eventTarget = stateId.startsWith("#") ? stateId : `#${stateId}`;
+&nbsp;
+			const event: PlayRouteEvent = {
+				type: "play.route",
+				to: eventTarget,
+				params,
+				query,
+			};
+&nbsp;
+			this.actor.send(event as any);
+			this.lastSyncedPath = pathname;
+		} catch (error) {
+			console.error("[RouterBridgeBase] Error sending event:", error);
+		} finally {
+			this.isProcessingNavigation = false;
+		}
+	}
+&nbsp;
+	// ── Utilities (protected, overridable for framework-native param extraction) ──
+&nbsp;
+	/**
+	 * Extract path parameters from URL using URLPattern API.
+	 *
+	 * @param pathname - The actual URL path (e.g., '/profile/john')
+	 * @param stateId - The matched state ID for looking up route pattern
+	 * @returns Extracted path parameters or empty object
+	 */
+	protected extractParams(pathname: string, stateId: string): Record&lt;string, string&gt; {
+		const pattern = this.routeMap.getPathByStateId(stateId);
+		if (!pattern || !pattern.includes(":")) return {};
+		try {
+			const urlPattern = new URLPattern({ pathname: pattern });
+			const result = urlPattern.exec({ pathname });
+			<span class="missing-if-branch" title="if path not taken" >I</span>if (!result) <span class="cstat-no" title="statement not covered" >return {};</span>
+<span class="cstat-no" title="statement not covered" >			return (result.pathname.groups as Record&lt;string, string&gt;) || {};</span>
+		} catch {
+			return {};
+		}
+	}
+&nbsp;
+	/**
+	 * Extract query parameters from URL search string.
+	 *
+	 * @param search - URL search string (e.g., '?tab=security&amp;page=1')
+	 * @returns Extracted query parameters or empty object
+	 */
+	protected extractQuery(search: string): Record&lt;string, string&gt; {
+		try {
+			return Object.fromEntries(new URLSearchParams(search)) as Record&lt;string, string&gt;;
+		} catch {
+			return {};
+		}
+	}
+&nbsp;
+	// ── Abstract methods (framework-specific, must be implemented by subclass) ──
+&nbsp;
+	/**
+	 * Navigate the framework router to the given path.
+	 *
+	 * Called when actor's currentRoute signal changes to a new path.
+	 * Must trigger the framework router's navigation (e.g., router.navigate(path)).
+	 */
+	protected abstract navigateRouter(path: string): void;
+&nbsp;
+	/**
+	 * Start watching for router location changes.
+	 *
+	 * Called by connect(). Should set up the framework-specific subscription
+	 * for location changes and call syncActorFromRouter() on each change.
+	 */
+	protected abstract watchRouterChanges(): void;
+&nbsp;
+	/**
+	 * Stop watching for router location changes.
+	 *
+	 * Called by disconnect(). Should clean up the framework-specific subscription.
+	 */
+	protected abstract unwatchRouterChanges(): void;
+&nbsp;
+	/**
+	 * Return the router's current pathname at connect() time, or null if unavailable.
+	 *
+	 * Called once during connect() to perform the initial URL → actor sync.
+	 * router.subscribe() only fires on *future* navigation events; it does not
+	 * replay the already-loaded location. Subclasses that can read the router's
+	 * current location synchronously (e.g. `router.state.location.pathname`)
+	 * should override this method so that deep-link / direct-URL loads drive the
+	 * actor to the correct state instead of leaving it at its machine default.
+	 *
+	 * The default returns null (no initial router → actor sync), preserving the
+	 * previous behaviour for bridges that have not yet implemented this hook.
+	 */
+	protected getInitialRouterPath(): string | null {
+		return null;
+	}
+}
+&nbsp;</pre></td></tr></table></pre>
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2026-03-08T21:05:56.278Z
+            </div>
+        <script src="prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="sorter.js"></script>
+        <script src="block-navigation.js"></script>
+    </body>
+</html>