npm - @pyric/cli - Versions diffs - 0.1.0-alpha.9 - Mend

@pyric/cli 0.1.0-alpha.9

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 (1169) hide show

package/dist/serve/docs-ui/docs/pyric-cli-how-to-use-the-vite-plugin/index.html ADDED Viewed

@@ -0,0 +1,341 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Use the Vite plugin (@pyric/cli/vite) · Pyric Studio</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="/__pyric/ui/_astro/_slug_.CQYSemvw.css"></head> <body>  <header class="studio__bar"> <div class="studio__bar-inner"> <a class="studio__brand" href="/__pyric/ui/" aria-label="Pyric Studio">Pyric</a> <nav class="studio__nav" aria-label="Studio tabs"> <a class="studio__nav-tab" href="/__pyric/ui/"> Home </a><a class="studio__nav-tab" href="/__pyric/ui/firestore"> Firestore </a><a class="studio__nav-tab" href="/__pyric/ui/auth"> Auth </a><a class="studio__nav-tab" href="/__pyric/ui/rtdb"> RTDB </a><a class="studio__nav-tab" href="/__pyric/ui/storage"> Storage </a><a class="studio__nav-tab" href="/__pyric/ui/traffic"> Traffic </a><a class="studio__nav-tab" href="/__pyric/ui/settings"> Settings </a><a class="studio__nav-tab" href="/__pyric/ui/docs" aria-current="page"> Docs </a> </nav> </div> </header> <div class="docs-shell">  <details class="docs-nav-drawer"> <summary>Navigate</summary> <nav class="docs-nav" aria-label="Documentation"> <div class="docs-search" data-index-url="/__pyric/ui/docs/index.json"> <div class="docs-search-field"> <svg class="docs-search-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"> <path d="M11.5 11.5 15 15M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path> </svg> <input type="text" class="docs-search-input" placeholder="Search docs" aria-label="Search docs" autocomplete="off" spellcheck="false"> <kbd class="docs-search-kbd">⌘K</kbd> </div> <ul class="docs-search-results" hidden></ul> </div> <script type="module">let i=null;function d(t){return i||(i=fetch(t).then(e=>e.json())),i}function l(t,e){return t.title.toLowerCase().includes(e)||t.excerpt.toLowerCase().includes(e)?!0:t.headings.some(r=>r.text.toLowerCase().includes(e))}function u(t,e,r){if(e.innerHTML="",t.length===0){e.hidden=!1;{const n=document.createElement("li");n.className="docs-search-empty",n.textContent="No matches",e.appendChild(n)}return}e.hidden=!1;for(const n of t.slice(0,8)){const s=document.createElement("li"),c=document.createElement("a");c.href=n.path;const o=document.createElement("span");o.className="docs-search-result-title",o.textContent=n.title;const a=document.createElement("span");a.className="docs-search-result-meta",a.textContent=[n.group,n.section].filter(Boolean).join(" / "),c.append(o,a),s.appendChild(c),e.appendChild(s)}}document.querySelectorAll(".docs-search").forEach(t=>{const e=t.dataset.indexUrl,r=t.querySelector(".docs-search-input"),n=t.querySelector(".docs-search-results");r.addEventListener("input",async()=>{const s=r.value.trim().toLowerCase();if(!s){n.hidden=!0,n.innerHTML="";return}const{pages:c}=await d(e);r.value.trim().toLowerCase()===s&&u(c.filter(o=>l(o,s)),n)}),r.addEventListener("focus",()=>{d(e),n.childElementCount>0&&(n.hidden=!1)}),r.addEventListener("keydown",s=>{s.key==="Escape"&&(r.value="",n.hidden=!0,n.innerHTML="",r.blur())}),r.addEventListener("blur",()=>{window.setTimeout(()=>{n.hidden=!0},150)})});document.addEventListener("keydown",t=>{if(!(t.metaKey||t.ctrlKey)||t.key.toLowerCase()!=="k")return;const e=[...document.querySelectorAll(".docs-search-input")].find(r=>r.offsetParent!==null);e&&(t.preventDefault(),e.focus(),e.select())});</script> <a class="docs-nav-toplink" href="/__pyric/ui/docs/overview/"> Overview </a><details class="docs-nav-group"> <summary>Run locally</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/how-the-swap-works/"> How the swap works </a> </li><li> <a href="/__pyric/ui/docs/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Develop with Firebase APIs</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/sign-in-and-manage-users/"> Sign in and manage users </a> </li><li> <a href="/__pyric/ui/docs/store-and-query-data/"> Store and query data </a> </li><li> <a href="/__pyric/ui/docs/sync-realtime-data/"> Sync realtime data </a> </li><li> <a href="/__pyric/ui/docs/store-files/"> Store files </a> </li><li> <a href="/__pyric/ui/docs/receive-messages/"> Receive messages </a> </li><li> <a href="/__pyric/ui/docs/run-ai-logic-locally/"> Run AI Logic locally </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-how-to-run-rtdb-onvaluecreated/"> Run an RTDB function locally </a> </li><li> <a href="/__pyric/ui/docs/which-data-service/"> Which data service? </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Inspect and correct</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <h2 class="docs-nav-heading"> Inspect the sandbox </h2> <ul> <li> <a href="/__pyric/ui/docs/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/shape-your-data/"> Seed, snapshot, replay </a> </li><li> <a href="/__pyric/ui/docs/watch-and-review/"> Review agent activity </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Correct Security Rules </h2> <ul> <li> <a href="/__pyric/ui/docs/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/rules-patterns/"> Rules patterns </a> </li><li> <a href="/__pyric/ui/docs/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/whats-possible/"> Case studies </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Work with an agent </h2> <ul> <li> <a href="/__pyric/ui/docs/what-your-agent-can-do/"> Work through an agent </a> </li><li> <a href="/__pyric/ui/docs/skills/"> Agent skills </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Verify the boundary</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-how-to-verify-against-a-captured-session/"> Verify a captured session </a> </li><li> <a href="/__pyric/ui/docs/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Ship unchanged</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/set-up-the-project/"> Set up the Firebase project </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Conformance</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/how-we-know-it-matches-firebase/"> Conformance </a> </li><li> <a href="/__pyric/ui/docs/whats-experimental/"> What&#39;s experimental </a> </li><li> <a href="/__pyric/ui/docs/pyric-conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/pyric-app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-compat/"> Rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-functions-rtdb-compat/"> Functions · RTDB </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" open> <summary>Reference</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli/" aria-current="true"> @pyric/cli </a> </li><li> <a href="/__pyric/ui/docs/pyric-explanation-versioning-and-compatibility/"> pyric </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore/"> pyric / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules/"> pyric / rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox/"> pyric / sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage/"> pyric / storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth/"> pyric / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database/"> pyric / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app/"> pyric-admin / app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore/"> pyric-admin / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth/"> pyric-admin / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database/"> pyric-admin / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage/"> pyric-admin / storage </a> </li><li> <a href="/__pyric/ui/docs/ui/"> @pyric/ui </a> </li><li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div> </div> </details> </nav> </details> <nav class="docs-nav" aria-label="Documentation"> <div class="docs-search" data-index-url="/__pyric/ui/docs/index.json"> <div class="docs-search-field"> <svg class="docs-search-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"> <path d="M11.5 11.5 15 15M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path> </svg> <input type="text" class="docs-search-input" placeholder="Search docs" aria-label="Search docs" autocomplete="off" spellcheck="false"> <kbd class="docs-search-kbd">⌘K</kbd> </div> <ul class="docs-search-results" hidden></ul> </div>  <a class="docs-nav-toplink" href="/__pyric/ui/docs/overview/" id="nav-group-overview"> Overview </a><details class="docs-nav-group" id="nav-group-run-locally"> <summary>Run locally</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/how-the-swap-works/"> How the swap works </a> </li><li> <a href="/__pyric/ui/docs/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-develop-with-firebase-apis"> <summary>Develop with Firebase APIs</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/sign-in-and-manage-users/"> Sign in and manage users </a> </li><li> <a href="/__pyric/ui/docs/store-and-query-data/"> Store and query data </a> </li><li> <a href="/__pyric/ui/docs/sync-realtime-data/"> Sync realtime data </a> </li><li> <a href="/__pyric/ui/docs/store-files/"> Store files </a> </li><li> <a href="/__pyric/ui/docs/receive-messages/"> Receive messages </a> </li><li> <a href="/__pyric/ui/docs/run-ai-logic-locally/"> Run AI Logic locally </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-how-to-run-rtdb-onvaluecreated/"> Run an RTDB function locally </a> </li><li> <a href="/__pyric/ui/docs/which-data-service/"> Which data service? </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-inspect-and-correct"> <summary>Inspect and correct</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-inspect-the-sandbox"> Inspect the sandbox </h2> <ul> <li> <a href="/__pyric/ui/docs/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/shape-your-data/"> Seed, snapshot, replay </a> </li><li> <a href="/__pyric/ui/docs/watch-and-review/"> Review agent activity </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-correct-security-rules"> Correct Security Rules </h2> <ul> <li> <a href="/__pyric/ui/docs/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/rules-patterns/"> Rules patterns </a> </li><li> <a href="/__pyric/ui/docs/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/whats-possible/"> Case studies </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-work-with-an-agent"> Work with an agent </h2> <ul> <li> <a href="/__pyric/ui/docs/what-your-agent-can-do/"> Work through an agent </a> </li><li> <a href="/__pyric/ui/docs/skills/"> Agent skills </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-verify-the-boundary"> <summary>Verify the boundary</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-how-to-verify-against-a-captured-session/"> Verify a captured session </a> </li><li> <a href="/__pyric/ui/docs/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-ship-unchanged"> <summary>Ship unchanged</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/set-up-the-project/"> Set up the Firebase project </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-conformance"> <summary>Conformance</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/how-we-know-it-matches-firebase/"> Conformance </a> </li><li> <a href="/__pyric/ui/docs/whats-experimental/"> What&#39;s experimental </a> </li><li> <a href="/__pyric/ui/docs/pyric-conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/pyric-app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-compat/"> Rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-functions-rtdb-compat/"> Functions · RTDB </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" id="nav-group-reference" open> <summary>Reference</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli/" aria-current="true"> @pyric/cli </a> </li><li> <a href="/__pyric/ui/docs/pyric-explanation-versioning-and-compatibility/"> pyric </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore/"> pyric / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules/"> pyric / rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox/"> pyric / sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage/"> pyric / storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth/"> pyric / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database/"> pyric / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app/"> pyric-admin / app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore/"> pyric-admin / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth/"> pyric-admin / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database/"> pyric-admin / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage/"> pyric-admin / storage </a> </li><li> <a href="/__pyric/ui/docs/ui/"> @pyric/ui </a> </li><li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div> </div> </details> </nav> <main class="doc-main"> <nav class="docs-breadcrumbs" aria-label="Breadcrumb"> <ol> <li>  <a href="/__pyric/ui/docs/pyric-cli/">@pyric/cli</a> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span>How-to</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">Use the Vite plugin</span> </li> </ol> </nav>  <article class="prose">  <h1 id="use-the-vite-plugin-pyricclivite">Use the Vite plugin (<code>@pyric/cli/vite</code>)</h1>
+<p>The <code>pyricSandbox()</code> Vite plugin gives a <strong>source-driven</strong> app the same
+<code>firebase/*</code> → pyric-sandbox swap that <code>pyric dev</code> gives a <strong>static</strong> app,
+without leaving your normal <code>vite dev</code> loop (HMR, source maps, your own
+router/UI stack). Your app’s <code>firebase/*</code> imports stay exactly as written; the
+plugin swaps them at Vite’s module-resolution layer. A plain <code>vite build</code> keeps
+the real firebase package; only <code>vite dev</code> and an explicit sandbox build
+(<code>vite build --mode development</code>) run the swap. See
+<a href="#two-build-flavors-production-vs-sandbox">Two build flavors</a>.</p>
+<h2 id="plugin-or-pyric-dev-theyre-complementary">Plugin or <code>pyric dev</code>? (they’re complementary)</h2>
+<p>Both do the identical thing: run your unmodified <code>firebase/*</code> against an
+in-browser pyric sandbox with your <code>firestore.rules</code> enforced, but at different
+points in your toolchain. Pick by how your app is built:</p>
+<div class="table-scroll">
+<table><thead><tr><th></th><th><code>pyricSandbox()</code> Vite plugin</th><th><code>pyric dev</code></th></tr></thead><tbody><tr><td><strong>Use it for</strong></td><td>source-driven apps you run with <code>vite dev</code></td><td>static / pre-built / retrofit apps (<code>dist/</code>, <code>public/</code>, any folder with <code>firebase.json</code>)</td></tr><tr><td><strong>Where the swap happens</strong></td><td>at module resolution, before bundling</td><td>at load time, via a runtime import map over already-built files</td></tr><tr><td><strong>Dev loop</strong></td><td>your existing <code>vite dev</code> (HMR, source maps)</td><td><code>pyric dev</code> owns the dev server</td></tr></tbody></table></div>
+<p>They are <strong>not</strong> competing. If you already build with Vite, the plugin keeps you
+in one toolchain (<code>vite dev</code> for the sandbox, <code>vite build</code> for prod). If you have
+a pre-built or no-build app, reach for <a href="../pyric-cli-how-to-serve-persistence-and-multi-tab/"><code>pyric dev</code></a>.</p>
+<blockquote>
+<p><strong>What the plugin covers.</strong> It swaps <code>firebase/*</code>, deploys/hot-reloads your
+rules, runs the sandbox in a <strong>SharedWorker</strong> (one backend shared across tabs,
+durable in IndexedDB), supports opt-in on-disk <strong>persistence</strong>, <strong>seeding</strong>, and
+session <strong>capture</strong>, and can mount the <strong>MCP bridge</strong> (<code>bridge: true</code>) so an
+external agent drives the same sandbox, the same surface <code>pyric dev</code> gives a
+static app, in one Vite plugin.</p>
+</blockquote>
+<h2 id="prerequisites">Prerequisites</h2>
+<ul>
+<li>A Vite app (Vite 5, 6, or 7) whose data layer uses canonical <code>firebase/*</code>
+imports (<code>firebase/app</code>, <code>firebase/auth</code>, <code>firebase/firestore</code>).</li>
+<li>A <code>firestore.rules</code> file (and optionally a <code>firebase.json</code>) in your project.</li>
+</ul>
+<h2 id="install">Install</h2>
+<p>Add <code>@pyric/cli</code> as a development dependency:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#61AFEF">npm</span><span style="color:#98C379"> install</span><span style="color:#D19A66"> --save-dev</span><span style="color:#98C379"> @pyric/cli</span></span></code></pre>
+<p>(<code>vite</code> is a peer dependency you already have.)</p>
+<h2 id="add-it-to-viteconfigts">Add it to <code>vite.config.ts</code></h2>
+<p>Import <code>pyricSandbox</code> from <code>@pyric/cli/vite</code> and add it to your <code>plugins</code>:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#7F848E;font-style:italic">// vite.config.ts</span></span>
+<span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">defineConfig</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> 'vite'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">pyricSandbox</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/cli/vite'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C678DD">export</span><span style="color:#C678DD"> default</span><span style="color:#61AFEF"> defineConfig</span><span style="color:#ABB2BF">({</span></span>
+<span class="line"><span style="color:#E06C75">  plugins</span><span style="color:#ABB2BF">: [</span><span style="color:#61AFEF">pyricSandbox</span><span style="color:#ABB2BF">()],</span></span>
+<span class="line"><span style="color:#ABB2BF">});</span></span></code></pre>
+<p>With no options, the plugin discovers your rules from <code>firebase.json</code>’s
+<code>firestore.rules</code>, falling back to <code>firestore.rules</code> in your project root.</p>
+<h3 id="options">Options</h3>
+<p><code>pyricSandbox(options?)</code>: all optional.</p>
+<div class="table-scroll">
+<table><thead><tr><th>Option</th><th>Type</th><th>Default</th><th>What it does</th></tr></thead><tbody><tr><td><code>rules</code></td><td><code>string</code></td><td><code>firebase.json</code>’s <code>firestore.rules</code>, else <code>firestore.rules</code> in the project root</td><td>Path to your Firestore rules file, <strong>relative to <code>root</code></strong>. Overrides whatever <code>firebase.json</code> declares.</td></tr><tr><td><code>root</code></td><td><code>string</code></td><td>Vite’s own <code>root</code></td><td>Project directory used to discover <code>firebase.json</code> and resolve <code>rules</code>.</td></tr><tr><td><code>persist</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Persist sandbox data + test users to <code>.pyric/state/state.json</code> so they survive reloads and restarts. Off = ephemeral.</td></tr><tr><td><code>fresh</code></td><td><code>boolean</code></td><td><code>false</code></td><td>With <code>persist</code>: discard the existing state file and re-seed from scratch.</td></tr><tr><td><code>seed</code></td><td><code>string</code></td><td>none</td><td>Path to a seed file: a <code>"collection/doc" → fields</code> JSON map, <strong>or</strong> a <code>pyric snapshot</code> state-file. Applied at page init; lived state wins once it exists.</td></tr><tr><td><code>capture</code></td><td><code>boolean</code></td><td><code>true</code></td><td>Write the live session to <code>.pyric/last-session.json</code> for <code>pyric verify</code>. Pass <code>false</code> to suppress.</td></tr><tr><td><code>bridge</code></td><td><code>boolean | { project?, disableAuditLog? }</code></td><td><code>false</code></td><td>Mount the <strong>MCP bridge</strong> so an external agent can drive the sandbox. <code>true</code> ⇒ defaults; the object form sets the audit project / disables the audit log. The agent shares the <strong>same SharedWorker sandbox</strong> as your app (and Studio). See <a href="#drive-the-sandbox-from-an-agent-bridge">Drive the sandbox from an agent</a>.</td></tr><tr><td><code>swapInBuild</code></td><td><code>boolean</code></td><td>mode-based</td><td>Force whether <code>vite build</code> runs the swap, overriding the mode default. Unset: swap for any non-<code>production</code> mode. <code>true</code> = always a sandbox build; <code>false</code> = always real firebase in builds. <code>vite dev</code> is unaffected. See <a href="#two-build-flavors-production-vs-sandbox">Two build flavors</a>.</td></tr></tbody></table></div>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#7F848E;font-style:italic">// Point at a non-default rules file, and persist + seed the sandbox</span></span>
+<span class="line"><span style="color:#61AFEF">pyricSandbox</span><span style="color:#ABB2BF">({</span></span>
+<span class="line"><span style="color:#E06C75">  rules</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'config/firestore.rules'</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  persist</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">true</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  seed</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'seed.json'</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#ABB2BF">});</span></span></code></pre>
+<h2 id="run-your-app-on-the-sandbox">Run your app on the sandbox</h2>
+<p>Start your normal dev server:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#61AFEF">npm</span><span style="color:#98C379"> run</span><span style="color:#98C379"> dev</span><span style="color:#7F848E;font-style:italic">   # i.e. vite dev</span></span></code></pre>
+<p>Now <code>vite dev</code> serves your app against the in-process pyric sandbox:</p>
+<ul>
+<li>Your app’s <code>firebase/*</code> imports are <strong>unchanged</strong>: the plugin swaps
+<code>firebase/app</code>, <code>firebase/auth</code>, and <code>firebase/firestore</code> to pyric’s adapters
+at resolution time. You never import anything from pyric in app code.</li>
+<li>Your <code>firestore.rules</code> are <strong>deployed at page load</strong>: the plugin injects a
+small init module into the served HTML, and that module deploys your rules
+before your app code runs.</li>
+<li>The Firebase config you pass to <code>initializeApp(config)</code> is
+<strong>accepted but ignored</strong> in dev. No project, no credentials, no network:
+the sandbox stands in for the real backend. (That same config flows through
+untouched to your production build; see <a href="#two-build-flavors-production-vs-sandbox">Two build flavors</a>.)</li>
+</ul>
+<h3 id="rules-hot-reload-on-save">Rules hot-reload on save</h3>
+<p>Edit your <code>firestore.rules</code> and save. The plugin watches the file (through
+Vite’s own watcher, no second file watcher) and <strong>re-deploys the rules in
+place</strong>, with no page reload. You’ll see a line like:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="plaintext"><code><span class="line"><span>  ↻ [pyric] rules reloaded (a1b2c3d4e5f6)</span></span></code></pre>
+<p>If a save leaves the rules un-parseable, the plugin keeps the <strong>last good</strong>
+ruleset live and warns instead of breaking your session:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="plaintext"><code><span class="line"><span>  ⚠ [pyric] rules NOT reloaded (last-good stays live): &#x3C;reason></span></span></code></pre>
+<p>Fix the file and save again to deploy the corrected rules.</p>
+<h3 id="multi-tab-sync-and-persistence">Multi-tab sync and persistence</h3>
+<p>By default the sandbox runs in a <strong>SharedWorker</strong>: every tab of your dev origin
+talks to <strong>one</strong> backend, so a write in one tab shows up live in another, and the
+data is held in IndexedDB (it survives a refresh). If the browser lacks
+<code>SharedWorker</code>, the plugin falls back to a per-tab in-page sandbox automatically.</p>
+<p>That IndexedDB data is still <strong>browser-local</strong>: it doesn’t land in your repo. To
+make data + test users durable across restarts (and committable), turn on
+<code>persist</code>:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#61AFEF">pyricSandbox</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">persist</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">true</span><span style="color:#ABB2BF"> });          </span><span style="color:#7F848E;font-style:italic">// writes .pyric/state/state.json</span></span>
+<span class="line"><span style="color:#61AFEF">pyricSandbox</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">persist</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">true</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">fresh</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">true</span><span style="color:#ABB2BF"> }); </span><span style="color:#7F848E;font-style:italic">// wipe + re-seed this run</span></span></code></pre>
+<p>To preload data, point <code>seed</code> at a <code>"collection/doc" → fields</code> map or a file from
+<code>pyric snapshot</code>. With <code>persist</code>, the seed applies only on the first run. After
+that, <strong>lived state wins</strong>:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#61AFEF">pyricSandbox</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">seed</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'seed.json'</span><span style="color:#ABB2BF"> });</span></span></code></pre>
+<p>The persistence model (the <code>.pyric/state</code> file, <code>persist</code> vs <code>fresh</code>, and how
+seed precedence works) is identical to <code>pyric dev</code> and documented in depth in
+<a href="../pyric-cli-how-to-serve-persistence-and-multi-tab/">Persistence and multi-tab</a>.</p>
+<h2 id="drive-the-sandbox-from-an-agent-bridge">Drive the sandbox from an agent (<code>bridge</code>)</h2>
+<p>Turn on <code>bridge</code> and the plugin mounts the <strong>MCP bridge</strong> on Vite’s own dev
+origin, so an external agent (Claude Code, Cursor, any MCP client) can read and
+write the <em>same</em> sandbox your app is using, live, while you keep <code>vite dev</code>:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#61AFEF">pyricSandbox</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">bridge</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">true</span><span style="color:#ABB2BF"> });</span></span>
+<span class="line"><span style="color:#7F848E;font-style:italic">// or tune the audit log:</span></span>
+<span class="line"><span style="color:#61AFEF">pyricSandbox</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">bridge</span><span style="color:#ABB2BF">: { </span><span style="color:#E06C75">project</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'my-app'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">disableAuditLog</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span><span style="color:#ABB2BF"> } });</span></span></code></pre>
+<p>This adds three routes on your dev server’s port (no sidecar process):</p>
+<div class="table-scroll">
+<table><thead><tr><th>Route</th><th>What it is</th></tr></thead><tbody><tr><td><code>POST /__pyric/mcp</code></td><td>MCP over streamable HTTP, point your agent here</td></tr><tr><td><code>GET /__pyric/health</code></td><td>bridge health JSON</td></tr><tr><td><code>WS /__pyric/sandbox</code></td><td>the page’s bridge peer, routing to the SharedWorker (wired automatically)</td></tr></tbody></table></div>
+<p>Connect from Claude Code with the <strong>pyric Claude Code plugin</strong>: it runs a bundled
+stdio proxy that auto-discovers the running bridge from <code>.pyric/serve.json</code> (no
+fixed port, no <code>claude mcp add</code>). The <a href="../pyric-cli-tutorials-wire-claude-code/">Wire Claude Code</a>
+tutorial walks the agent-side setup end to end.</p>
+<p>Open your app in a browser tab; the page connects to the bridge automatically (the
+plugin injects the bridge URL into the served init payload), and your agent can
+then seed, query, undo/redo, and audit the sandbox the page is running on.</p>
+<blockquote>
+<p><strong>One shared sandbox.</strong> The bridge routes the agent’s tool-calls <em>through</em> the
+<strong>SharedWorker</strong>: the same backend your app and (if enabled) Pyric Studio use.
+Agent writes show up live in your open tab and in Studio, and vice versa; there
+is no separate agent sandbox. The agent still reaches the worker through an open
+page, so keep a tab open while it works.</p>
+</blockquote>
+<p>The bridge is the same machinery as <a href="../pyric-cli-how-to-serve-persistence-and-multi-tab/"><code>pyric dev --bridge</code></a>;
+the <a href="../pyric-cli-tutorials-wire-claude-code/">Wire Claude Code</a> tutorial walks the
+agent-side setup end to end.</p>
+<h2 id="two-build-flavors-production-vs-sandbox">Two build flavors: production vs. sandbox</h2>
+<p>Under <code>vite dev</code> the swap is always on. For <code>vite build</code>, the plugin decides by
+the build <strong>mode</strong>:</p>
+<div class="table-scroll">
+<table><thead><tr><th>Command</th><th>Mode</th><th>Output</th></tr></thead><tbody><tr><td><code>vite build</code></td><td><code>production</code> (default)</td><td>ships the <strong>real <code>firebase</code> package</strong>, your production artifact</td></tr><tr><td><code>vite build --mode development</code></td><td>any non-<code>production</code> mode</td><td>a <strong>sandbox build</strong> that bundles pyric’s in-page adapters instead of the SDK</td></tr></tbody></table></div>
+<p>A plain <code>vite build</code> means there is <strong>no separate “graduation” step</strong>. The
+Firebase config you passed to <code>initializeApp</code> (ignored by the sandbox in dev)
+is the <em>same</em> config your built app uses to talk to real Firebase in production.
+Dev and prod are one toolchain: <code>vite dev</code> and the sandbox build run on the
+sandbox, <code>vite build</code> runs on Firebase, and your source never changes between
+them.</p>
+<h3 id="the-sandbox-build-vite-build---mode-development">The sandbox build (<code>vite build --mode development</code>)</h3>
+<p><code>vite build --mode development</code> produces a <strong>self-contained bundle</strong> whose
+<code>firebase/*</code> imports are already swapped to pyric’s in-page adapters, plus a
+sandbox init chunk (the runtime bootstrap and the sign-in helper) that shares
+one runtime with your app, nothing to intercept or inject at load time, so you
+can preview a bundled build under <code>pyric dev</code> (which sees the marker and skips
+its own runtime injection for these pages):</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#61AFEF">vite</span><span style="color:#98C379"> build</span><span style="color:#D19A66"> --mode</span><span style="color:#98C379"> development</span><span style="color:#7F848E;font-style:italic">   # or the scaffolded `build:sandbox` script</span></span>
+<span class="line"><span style="color:#61AFEF">pyric</span><span style="color:#98C379"> dev</span><span style="color:#7F848E;font-style:italic">                       # serves dist/ against the sandbox</span></span></code></pre>
+<p>The output carries a <strong>sandbox-build marker</strong> in <code>index.html</code>
+(<code>&#x3C;meta name="pyric-sandbox-build"></code>). The marker makes the flavor unmistakable:</p>
+<ul>
+<li><code>pyric dev</code> <strong>trusts</strong> a marked dist and serves it (it skips the inlined-SDK
+scan; a swapped bundle has no real SDK to find).</li>
+<li>Production hosting deploys should use an <strong>unmarked</strong> production build
+(<code>vite build</code> / production mode) and <code>firebase-tools</code> — a sandbox-marked dist
+must never reach production.</li>
+</ul>
+<p>To force the build behavior regardless of mode, pass <code>swapInBuild</code> to the
+plugin: <code>pyricSandbox({ swapInBuild: true })</code> always produces a sandbox build,
+<code>{ swapInBuild: false }</code> never swaps in a build (real firebase in every mode).</p>
+<h3 id="why-pyric-dev-refuses-a-plain-vite-build">Why <code>pyric dev</code> refuses a plain <code>vite build</code></h3>
+<p><code>pyric dev</code>’s import map can only remap <strong>bare</strong> <code>firebase/*</code> specifiers. A plain
+<code>vite build</code> inlines the real SDK into the app chunk, leaving nothing to
+intercept: the page would reach live Google endpoints with the sandbox’s fake
+credentials. Rather than serve that silently, <code>pyric dev</code> <strong>hard-refuses</strong> a dist
+that bundles the real SDK and points you at the two ways forward: run plain
+<code>pyric dev</code> (the child dev-server flow, plugin active), or rebuild with
+<code>vite build --mode development</code> and serve that.</p>
+<h2 id="library-imports-are-swapped-too-transitive-deps">Library imports are swapped too (transitive deps)</h2>
+<p>The swap happens at resolution time, <em>before</em> bundling, so it also catches
+libraries that import <code>firebase/*</code> on your behalf: <code>react-firebase-hooks</code>,
+<code>reactfire</code>, and similar. When such a library does
+<code>import { getFirestore } from 'firebase/firestore'</code>, that import resolves to the
+sandbox adapter exactly as your own code does. The library transparently runs on
+the sandbox with no changes.</p>
+<p>This works because the plugin also tames Vite’s <strong>dependency optimizer</strong>. Vite
+pre-bundles <code>node_modules</code> with esbuild; left alone, the optimizer would pre-bake
+a library’s <code>firebase/*</code> import to the <em>real</em> firebase before the plugin’s
+resolver ever runs. The plugin mirrors its swap into the optimizer’s esbuild pass
+(and excludes the served <code>firebase/*</code> modules from pre-bundling) so the optimizer
+and the dev resolver agree. You don’t need to configure any of this: adding the
+plugin is enough. But it’s why the swap reaches dependencies, not just your own code.</p>
+<h2 id="limitations">Limitations</h2>
+<p>What the plugin does and doesn’t cover:</p>
+<ul>
+<li>
+<p><strong>Libraries that reach into Firebase internals throw at import.</strong> The swap
+mirrors Firebase’s <strong>public modular surface</strong>: what your app and most
+data-layer libraries use. A library that reaches into Firebase <em>internals</em>
+(<code>@firebase/component</code>, <code>_getProvider</code>, app component registration, e.g.
+<code>firebaseui</code>, parts of <code>@angular/fire</code>) falls outside that surface and
+<strong>throws at import</strong>. This is inherent to mirroring the public API; <code>pyric serve</code> has the same ceiling.</p>
+</li>
+<li>
+<p><strong>Only <code>firebase/app</code>, <code>firebase/auth</code>, and <code>firebase/firestore</code> are swapped.</strong>
+Other subpaths (<code>firebase/storage</code>, <code>firebase/database</code>) resolve to the real
+package: the same surface <code>pyric dev</code> covers today.</p>
+</li>
+<li>
+<p><strong>The agent reaches the sandbox through an open page.</strong> <code>pyricSandbox({ bridge: true })</code>
+routes the agent’s tool-calls through the SharedWorker (the same backend your
+app and Studio use), but the worker lives in the browser, so a tab must stay
+open for the agent to act. (<code>pyric dev --bridge</code> has the same shape.)</p>
+</li>
+</ul>
+<h2 id="troubleshooting">Troubleshooting</h2>
+<p><strong><code>@pyric/cli/vite: pyric is not built …</code></strong> The plugin needs pyric’s compiled
+output to read Firebase’s public surface. In a monorepo checkout, build pyric
+first (e.g. <code>bun run build</code>). An installed <code>@pyric/cli</code> from npm ships built, so
+you’ll only hit this developing against a source checkout.</p>
+<p><strong>A <code>firebase/*</code> import you expected to swap didn’t.</strong> Only <code>firebase/app</code>,
+<code>firebase/auth</code>, and <code>firebase/firestore</code> are swapped. Other <code>firebase/*</code>
+subpaths (e.g. <code>firebase/storage</code>, <code>firebase/database</code>) resolve to the real
+package in this release.</p>
+<h2 id="see-also">See also</h2>
+<ul>
+<li><a href="../pyric-cli-how-to-serve-persistence-and-multi-tab/">Persistence and multi-tab with <code>pyric dev</code></a>:
+the static-app analog; the worker/persist/seed model is identical to the plugin’s.</li>
+<li><a href="../start-building/">Getting started</a>: the end-to-end scaffold →
+serve → agent loop.</li>
+<li><a href="../pyric-sandbox-explanation-local-backend-vs-firestore-offline/">Why an in-browser backend is <em>not</em> Firestore offline persistence</a>.</li>
+</ul>  </article> </main> <aside class="doc-toc" aria-label="On this page"> <h2 class="doc-toc-heading">On this page</h2> <ul> <li data-depth="2"> <a href="#plugin-or-pyric-dev-theyre-complementary">Plugin or pyric dev? (they’re complementary)</a> </li><li data-depth="2"> <a href="#prerequisites">Prerequisites</a> </li><li data-depth="2"> <a href="#install">Install</a> </li><li data-depth="2"> <a href="#add-it-to-viteconfigts">Add it to vite.config.ts</a> </li><li data-depth="3"> <a href="#options">Options</a> </li><li data-depth="2"> <a href="#run-your-app-on-the-sandbox">Run your app on the sandbox</a> </li><li data-depth="3"> <a href="#rules-hot-reload-on-save">Rules hot-reload on save</a> </li><li data-depth="3"> <a href="#multi-tab-sync-and-persistence">Multi-tab sync and persistence</a> </li><li data-depth="2"> <a href="#drive-the-sandbox-from-an-agent-bridge">Drive the sandbox from an agent (bridge)</a> </li><li data-depth="2"> <a href="#two-build-flavors-production-vs-sandbox">Two build flavors: production vs. sandbox</a> </li><li data-depth="3"> <a href="#the-sandbox-build-vite-build---mode-development">The sandbox build (vite build --mode development)</a> </li><li data-depth="3"> <a href="#why-pyric-dev-refuses-a-plain-vite-build">Why pyric dev refuses a plain vite build</a> </li><li data-depth="2"> <a href="#library-imports-are-swapped-too-transitive-deps">Library imports are swapped too (transitive deps)</a> </li><li data-depth="2"> <a href="#limitations">Limitations</a> </li><li data-depth="2"> <a href="#troubleshooting">Troubleshooting</a> </li><li data-depth="2"> <a href="#see-also">See also</a> </li> </ul> </aside> </div> <script type="module">const a=document.querySelector("[data-api-symbol-filter]"),d=[...document.querySelectorAll("[data-api-symbol-group]")],n=document.querySelector("[data-api-symbol-empty]");a?.addEventListener("input",()=>{const t=a.value.trim().toLowerCase();let o=0;for(const i of d){let e=0;i.querySelectorAll("[data-api-symbol]").forEach(l=>{const r=!t||(l.dataset.apiSymbol??"").includes(t);l.hidden=!r,r&&e++}),i.hidden=e===0,o+=e}n&&(n.hidden=o>0)});</script> <script type="module">const s=new Map;document.querySelectorAll('.doc-toc a[href^="#"]').forEach(t=>s.set(decodeURIComponent(t.hash.slice(1)),t));if(s.size>0){const t=new Set,n=()=>{let o=null;for(const e of s.keys())if(t.has(e)){o=e;break}s.forEach((e,c)=>e.classList.toggle("active",c===o))},r=new IntersectionObserver(o=>{for(const e of o)e.isIntersecting?t.add(e.target.id):t.delete(e.target.id);n()},{rootMargin:"-72px 0px -60% 0px"});s.forEach((o,e)=>{const c=document.getElementById(e);c&&r.observe(c)})}</script> <script type="module">document.querySelector('.studio__nav [aria-current="page"]')?.scrollIntoView({block:"nearest",inline:"center"});</script> </body> </html>