npm - @pyric/cli - Versions diffs - 0.1.0-alpha.20 → 0.1.0-alpha.22 - Mend

@pyric/cli 0.1.0-alpha.20 → 0.1.0-alpha.22

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

package/dist/serve/site-ui/docs/pyric-ui-primitives-reference-api/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <link rel="stylesheet" href="/__pyric/ui/_astro/_slug_.Da5VLhW1.css">
 <style>:root{--rhythm-para: .875rem;--rhythm-group: 1.5rem;--rhythm-subsection: 2.25rem;--rhythm-section: 3.25rem;--rhythm-list: calc(var(--rhythm-para) * .75)}.prose>*,.prose blockquote>*,.prose li>*,.prose .compat-stat>*{margin-block:0}.prose>*+*{margin-block-start:var(--rhythm-group)}.prose>*+h2{margin-block-start:var(--rhythm-section)}.prose>*+h3,.prose>*+h4{margin-block-start:var(--rhythm-subsection)}.prose>h1+*,.prose>h2+*,.prose>h3+*,.prose>h4+*{margin-block-start:var(--rhythm-para)}.prose>p+p{margin-block-start:var(--rhythm-para)}.prose>p+ul,.prose>p+ol,.prose>p+blockquote{margin-block-start:var(--rhythm-para)}.prose li+li{margin-block-start:var(--rhythm-list)}.prose li>ul,.prose li>ol{margin-block-start:var(--rhythm-list)}.prose li>*+*,.prose blockquote>*+*{margin-block-start:var(--rhythm-para)}
 html{scrollbar-gutter:stable}
-</style></head> <body>  <header class="studio__chrome"> <div class="studio__bar"> <div class="studio__chrome-inner"> <nav class="studio__nav" aria-label="Site"> <a class="studio__brand" href="/__pyric/ui/" aria-label="Pyric">pyric</a> <a class="studio__nav-tab" href="/__pyric/ui/"> Home </a><a class="studio__nav-tab" href="/__pyric/ui/docs" aria-current="page"> Docs </a><a class="studio__nav-tab" href="/__pyric/ui/studio"> Studio </a> </nav> </div> </div> </header> <div class="docs-shell" data-astro-cid-mw7aashj>  <details class="docs-nav-drawer" data-astro-cid-mw7aashj> <summary data-astro-cid-mw7aashj>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> <details class="docs-nav-group"> <summary>Overview</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/overview/"> Overview </a> </li><li> <a href="/__pyric/ui/docs/tutorial/"> Tutorial </a> </li><li> <a href="/__pyric/ui/docs/examples/"> Examples </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Get started</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/get-started/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/get-started/vite/"> Vite </a> </li><li> <a href="/__pyric/ui/docs/get-started/nextjs/"> Next.js </a> </li><li> <a href="/__pyric/ui/docs/get-started/how-the-swap-works/"> How the swap works </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Build</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/build/authentication/"> Authentication </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-firestore/"> Cloud Firestore </a> </li><li> <a href="/__pyric/ui/docs/build/realtime-database/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-storage/"> Cloud Storage </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-messaging/"> Cloud Messaging </a> </li><li> <a href="/__pyric/ui/docs/build/ai-logic/"> AI Logic </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Secure &amp; debug</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/secure/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/secure/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/secure/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/secure/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/secure/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/secure/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/secure/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/secure/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Examples </h2> <ul> <li> <a href="/__pyric/ui/docs/examples/chess/"> Chess showcase </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Observe &amp; shape</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/observe/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/observe/resolve-runtime-status/"> Runtime status </a> </li><li> <a href="/__pyric/ui/docs/observe/shape-your-data/"> Seed, snapshot, replay </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Ship &amp; test</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/ship/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Work with an agent</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/agent/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/agent/work-with-an-agent/"> Use the MCP tools </a> </li><li> <a href="/__pyric/ui/docs/agent/watch-and-review/"> Watch in Pyric Studio </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Trust</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/trust/versioning-and-compatibility/"> Versioning and the fb tag </a> </li><li> <a href="/__pyric/ui/docs/trust/rules-standard-library/"> Rules standard library reference </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/conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/trust/how-we-know-it-matches-firebase/"> How we know it matches Firebase </a> </li><li> <a href="/__pyric/ui/docs/app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/functions-rtdb-compat/"> Functions · RTDB </a> </li><li> <a href="/__pyric/ui/docs/rules-compat/"> Rules </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" open> <summary>Reference</summary> <div class="docs-nav-group-body docs-nav-group-body--reference"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-app-reference-api/"> pyric/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-reference-api/"> pyric/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-reference-api/"> pyric/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-reference-api/"> pyric/ai </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-scripting-reference-api/"> pyric/ai/scripting </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-reference-api/"> pyric/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-reference-api/"> pyric/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-reference-api/"> pyric/messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-sw-reference-api/"> pyric/messaging/sw </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-reference-api/"> pyric/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-reference-api/"> pyric/sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-firestore-reference-api/"> pyric/sandbox/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-database-reference-api/"> pyric/sandbox/database </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric-admin</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-admin-reference-api/"> pyric-admin </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app-reference-api/"> pyric-admin/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore-reference-api/"> pyric-admin/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth-reference-api/"> pyric-admin/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database-reference-api/"> pyric-admin/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage-reference-api/"> pyric-admin/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-messaging-reference-api/"> pyric-admin/messaging </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">create-pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/create-pyric-reference-api/"> create-pyric </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-credentials-node-reference-api/"> @pyric/cli/credentials/node </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-verify-reference-api/"> @pyric/cli/verify </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-reference-api/"> @pyric/cli/conformance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-browser-reference-api/"> @pyric/cli/conformance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-docs-reference-api/"> @pyric/cli/conformance/docs </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-reference-api/"> @pyric/cli/assurance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-browser-reference-api/"> @pyric/cli/assurance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-reference-api/"> @pyric/cli/bridge </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-client-reference-api/"> @pyric/cli/bridge/client </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-discover-reference-api/"> @pyric/cli/discover </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-vite-reference-api/"> @pyric/cli/vite </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-next-reference-api/"> @pyric/cli/next </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-serve-worker-reference-api/"> @pyric/cli/serve/worker </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-remote-reference-api/"> @pyric/cli/remote </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-reference-api/"> @pyric/cli/register </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-app-bridge-reference-api/"> @pyric/cli/register/app-bridge </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/ui</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-ui-auth-reference-api/"> @pyric/ui/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-auth-hooks-reference-api/"> @pyric/ui/auth/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-primitives-reference-api/" aria-current="page"> @pyric/ui/primitives </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-reference-api/"> @pyric/ui/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-hooks-reference-api/"> @pyric/ui/firestore/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rtdb-reference-api/"> @pyric/ui/rtdb </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-reference-api/"> @pyric/ui/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-hooks-reference-api/"> @pyric/ui/storage/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-reference-api/"> @pyric/ui/traffic </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-hooks-reference-api/"> @pyric/ui/traffic/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-reference-api/"> @pyric/ui/events </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-hooks-reference-api/"> @pyric/ui/events/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-agents-reference-api/"> @pyric/ui/agents </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-reference-api/"> @pyric/ui/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-hooks-reference-api/"> @pyric/ui/rules/hooks </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/reference/cli/"> CLI </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>  <details class="docs-nav-group" id="nav-group-overview"> <summary>Overview</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/overview/"> Overview </a> </li><li> <a href="/__pyric/ui/docs/tutorial/"> Tutorial </a> </li><li> <a href="/__pyric/ui/docs/examples/"> Examples </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-get-started"> <summary>Get started</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/get-started/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/get-started/vite/"> Vite </a> </li><li> <a href="/__pyric/ui/docs/get-started/nextjs/"> Next.js </a> </li><li> <a href="/__pyric/ui/docs/get-started/how-the-swap-works/"> How the swap works </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-build"> <summary>Build</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/build/authentication/"> Authentication </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-firestore/"> Cloud Firestore </a> </li><li> <a href="/__pyric/ui/docs/build/realtime-database/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-storage/"> Cloud Storage </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-messaging/"> Cloud Messaging </a> </li><li> <a href="/__pyric/ui/docs/build/ai-logic/"> AI Logic </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-secure-debug"> <summary>Secure &amp; debug</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/secure/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/secure/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/secure/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/secure/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/secure/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/secure/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/secure/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/secure/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-secure-debug-examples"> Examples </h2> <ul> <li> <a href="/__pyric/ui/docs/examples/chess/"> Chess showcase </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-observe-shape"> <summary>Observe &amp; shape</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/observe/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/observe/resolve-runtime-status/"> Runtime status </a> </li><li> <a href="/__pyric/ui/docs/observe/shape-your-data/"> Seed, snapshot, replay </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-ship-test"> <summary>Ship &amp; test</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/ship/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-work-with-an-agent"> <summary>Work with an agent</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/agent/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/agent/work-with-an-agent/"> Use the MCP tools </a> </li><li> <a href="/__pyric/ui/docs/agent/watch-and-review/"> Watch in Pyric Studio </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-trust"> <summary>Trust</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/trust/versioning-and-compatibility/"> Versioning and the fb tag </a> </li><li> <a href="/__pyric/ui/docs/trust/rules-standard-library/"> Rules standard library reference </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/conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/trust/how-we-know-it-matches-firebase/"> How we know it matches Firebase </a> </li><li> <a href="/__pyric/ui/docs/app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/functions-rtdb-compat/"> Functions · RTDB </a> </li><li> <a href="/__pyric/ui/docs/rules-compat/"> Rules </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 docs-nav-group-body--reference"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-app-reference-api/"> pyric/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-reference-api/"> pyric/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-reference-api/"> pyric/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-reference-api/"> pyric/ai </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-scripting-reference-api/"> pyric/ai/scripting </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-reference-api/"> pyric/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-reference-api/"> pyric/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-reference-api/"> pyric/messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-sw-reference-api/"> pyric/messaging/sw </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-reference-api/"> pyric/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-reference-api/"> pyric/sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-firestore-reference-api/"> pyric/sandbox/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-database-reference-api/"> pyric/sandbox/database </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric-admin</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-admin-reference-api/"> pyric-admin </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app-reference-api/"> pyric-admin/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore-reference-api/"> pyric-admin/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth-reference-api/"> pyric-admin/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database-reference-api/"> pyric-admin/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage-reference-api/"> pyric-admin/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-messaging-reference-api/"> pyric-admin/messaging </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">create-pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/create-pyric-reference-api/"> create-pyric </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-credentials-node-reference-api/"> @pyric/cli/credentials/node </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-verify-reference-api/"> @pyric/cli/verify </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-reference-api/"> @pyric/cli/conformance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-browser-reference-api/"> @pyric/cli/conformance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-docs-reference-api/"> @pyric/cli/conformance/docs </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-reference-api/"> @pyric/cli/assurance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-browser-reference-api/"> @pyric/cli/assurance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-reference-api/"> @pyric/cli/bridge </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-client-reference-api/"> @pyric/cli/bridge/client </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-discover-reference-api/"> @pyric/cli/discover </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-vite-reference-api/"> @pyric/cli/vite </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-next-reference-api/"> @pyric/cli/next </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-serve-worker-reference-api/"> @pyric/cli/serve/worker </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-remote-reference-api/"> @pyric/cli/remote </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-reference-api/"> @pyric/cli/register </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-app-bridge-reference-api/"> @pyric/cli/register/app-bridge </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/ui</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-ui-auth-reference-api/"> @pyric/ui/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-auth-hooks-reference-api/"> @pyric/ui/auth/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-primitives-reference-api/" aria-current="page"> @pyric/ui/primitives </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-reference-api/"> @pyric/ui/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-hooks-reference-api/"> @pyric/ui/firestore/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rtdb-reference-api/"> @pyric/ui/rtdb </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-reference-api/"> @pyric/ui/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-hooks-reference-api/"> @pyric/ui/storage/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-reference-api/"> @pyric/ui/traffic </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-hooks-reference-api/"> @pyric/ui/traffic/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-reference-api/"> @pyric/ui/events </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-hooks-reference-api/"> @pyric/ui/events/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-agents-reference-api/"> @pyric/ui/agents </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-reference-api/"> @pyric/ui/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-hooks-reference-api/"> @pyric/ui/rules/hooks </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/reference/cli/"> CLI </a> </li> </ul> </div> </div> </details> </nav> <main class="doc-main" data-astro-cid-mw7aashj> <nav class="docs-breadcrumbs" aria-label="Breadcrumb"> <ol> <li>  <a href="/__pyric/ui/docs/api-reference/">API reference</a> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span>@pyric/ui</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">@pyric/ui/primitives</span> </li> </ol> </nav> <header class="api-reference-header" data-astro-cid-mw7aashj> <p class="api-reference-kicker" data-astro-cid-mw7aashj>API reference</p> <h1 data-astro-cid-mw7aashj><code data-astro-cid-mw7aashj>@pyric/ui/primitives</code></h1> <p class="api-reference-meta" data-astro-cid-mw7aashj> 31 published symbols from <code data-astro-cid-mw7aashj>@pyric/ui</code> </p> <p class="api-reference-source" data-astro-cid-mw7aashj>
+</style></head> <body>  <header class="studio__chrome"> <div class="studio__bar"> <div class="studio__chrome-inner"> <nav class="studio__nav" aria-label="Site"> <a class="studio__brand" href="/__pyric/ui/" aria-label="Pyric">pyric</a> <a class="studio__nav-tab" href="/__pyric/ui/"> Home </a><a class="studio__nav-tab" href="/__pyric/ui/docs" aria-current="page"> Docs </a><a class="studio__nav-tab" href="/__pyric/ui/studio"> Studio </a> </nav> </div> </div> </header> <div class="docs-shell" data-astro-cid-mw7aashj>  <details class="docs-nav-drawer" data-astro-cid-mw7aashj> <summary data-astro-cid-mw7aashj>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> <details class="docs-nav-group"> <summary>Overview</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/overview/"> Overview </a> </li><li> <a href="/__pyric/ui/docs/tutorial/"> Tutorial </a> </li><li> <a href="/__pyric/ui/docs/examples/"> Examples </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Get started</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/get-started/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/get-started/vite/"> Vite </a> </li><li> <a href="/__pyric/ui/docs/get-started/nextjs/"> Next.js </a> </li><li> <a href="/__pyric/ui/docs/get-started/backend-bundlers/"> Backend bundlers </a> </li><li> <a href="/__pyric/ui/docs/get-started/flutter/"> Flutter </a> </li><li> <a href="/__pyric/ui/docs/get-started/how-the-swap-works/"> How the swap works </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Build</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/build/authentication/"> Authentication </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-firestore/"> Cloud Firestore </a> </li><li> <a href="/__pyric/ui/docs/build/realtime-database/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-storage/"> Cloud Storage </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-messaging/"> Cloud Messaging </a> </li><li> <a href="/__pyric/ui/docs/build/ai-logic/"> AI Logic </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Secure &amp; debug</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/secure/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/secure/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/secure/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/secure/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/secure/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/secure/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/secure/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/secure/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Examples </h2> <ul> <li> <a href="/__pyric/ui/docs/examples/chess/"> Chess showcase </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Observe &amp; shape</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/observe/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/observe/resolve-runtime-status/"> Runtime status </a> </li><li> <a href="/__pyric/ui/docs/observe/switch-and-impersonate-identities/"> Impersonate &amp; tenants </a> </li><li> <a href="/__pyric/ui/docs/observe/shape-your-data/"> Seed, snapshot, replay </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Ship &amp; test</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/ship/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Work with an agent</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/agent/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/agent/work-with-an-agent/"> Use the MCP tools </a> </li><li> <a href="/__pyric/ui/docs/agent/watch-and-review/"> Watch in Pyric Studio </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Trust</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/trust/versioning-and-compatibility/"> Versioning and the fb tag </a> </li><li> <a href="/__pyric/ui/docs/trust/rules-standard-library/"> Rules standard library reference </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/conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/trust/how-we-know-it-matches-firebase/"> How we know it matches Firebase </a> </li><li> <a href="/__pyric/ui/docs/app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/functions-rtdb-compat/"> Functions · RTDB </a> </li><li> <a href="/__pyric/ui/docs/rules-compat/"> Rules </a> </li><li> <a href="/__pyric/ui/docs/firestore-flutter-compat/"> Firestore · Flutter </a> </li><li> <a href="/__pyric/ui/docs/firestore-kotlin-compat/"> Firestore · Kotlin </a> </li><li> <a href="/__pyric/ui/docs/firestore-swift-compat/"> Firestore · Swift </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" open> <summary>Reference</summary> <div class="docs-nav-group-body docs-nav-group-body--reference"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-app-reference-api/"> pyric/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-reference-api/"> pyric/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-lite-reference-api/"> pyric/firestore/lite </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-reference-api/"> pyric/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-reference-api/"> pyric/ai </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-scripting-reference-api/"> pyric/ai/scripting </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-reference-api/"> pyric/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-reference-api/"> pyric/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-reference-api/"> pyric/messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-sw-reference-api/"> pyric/messaging/sw </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-reference-api/"> pyric/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-reference-api/"> pyric/sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-firestore-reference-api/"> pyric/sandbox/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-database-reference-api/"> pyric/sandbox/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-app-check-reference-api/"> pyric/app-check </a> </li><li> <a href="/__pyric/ui/docs/pyric-functions-reference-api/"> pyric/functions </a> </li><li> <a href="/__pyric/ui/docs/pyric-analytics-reference-api/"> pyric/analytics </a> </li><li> <a href="/__pyric/ui/docs/pyric-performance-reference-api/"> pyric/performance </a> </li><li> <a href="/__pyric/ui/docs/pyric-remote-config-reference-api/"> pyric/remote-config </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric-admin</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-admin-reference-api/"> pyric-admin </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app-reference-api/"> pyric-admin/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore-reference-api/"> pyric-admin/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth-reference-api/"> pyric-admin/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database-reference-api/"> pyric-admin/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage-reference-api/"> pyric-admin/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-messaging-reference-api/"> pyric-admin/messaging </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">create-pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/create-pyric-reference-api/"> create-pyric </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-credentials-node-reference-api/"> @pyric/cli/credentials/node </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-verify-reference-api/"> @pyric/cli/verify </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-reference-api/"> @pyric/cli/conformance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-browser-reference-api/"> @pyric/cli/conformance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-docs-reference-api/"> @pyric/cli/conformance/docs </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-reference-api/"> @pyric/cli/assurance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-browser-reference-api/"> @pyric/cli/assurance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-reference-api/"> @pyric/cli/bridge </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-client-reference-api/"> @pyric/cli/bridge/client </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-discover-reference-api/"> @pyric/cli/discover </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-vite-reference-api/"> @pyric/cli/vite </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-next-reference-api/"> @pyric/cli/next </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bundler-reference-api/"> @pyric/cli/bundler </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-serve-worker-reference-api/"> @pyric/cli/serve/worker </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-remote-reference-api/"> @pyric/cli/remote </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-reference-api/"> @pyric/cli/register </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-app-bridge-reference-api/"> @pyric/cli/register/app-bridge </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/ui</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-ui-auth-reference-api/"> @pyric/ui/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-auth-hooks-reference-api/"> @pyric/ui/auth/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-primitives-reference-api/" aria-current="page"> @pyric/ui/primitives </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-reference-api/"> @pyric/ui/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-hooks-reference-api/"> @pyric/ui/firestore/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rtdb-reference-api/"> @pyric/ui/rtdb </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-reference-api/"> @pyric/ui/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-hooks-reference-api/"> @pyric/ui/storage/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-reference-api/"> @pyric/ui/traffic </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-hooks-reference-api/"> @pyric/ui/traffic/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-reference-api/"> @pyric/ui/events </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-hooks-reference-api/"> @pyric/ui/events/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-agents-reference-api/"> @pyric/ui/agents </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-reference-api/"> @pyric/ui/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-hooks-reference-api/"> @pyric/ui/rules/hooks </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/reference/cli/"> CLI </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>  <details class="docs-nav-group" id="nav-group-overview"> <summary>Overview</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/overview/"> Overview </a> </li><li> <a href="/__pyric/ui/docs/tutorial/"> Tutorial </a> </li><li> <a href="/__pyric/ui/docs/examples/"> Examples </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-get-started"> <summary>Get started</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/get-started/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/get-started/vite/"> Vite </a> </li><li> <a href="/__pyric/ui/docs/get-started/nextjs/"> Next.js </a> </li><li> <a href="/__pyric/ui/docs/get-started/backend-bundlers/"> Backend bundlers </a> </li><li> <a href="/__pyric/ui/docs/get-started/flutter/"> Flutter </a> </li><li> <a href="/__pyric/ui/docs/get-started/how-the-swap-works/"> How the swap works </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-build"> <summary>Build</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/build/authentication/"> Authentication </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-firestore/"> Cloud Firestore </a> </li><li> <a href="/__pyric/ui/docs/build/realtime-database/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-storage/"> Cloud Storage </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-messaging/"> Cloud Messaging </a> </li><li> <a href="/__pyric/ui/docs/build/ai-logic/"> AI Logic </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-secure-debug"> <summary>Secure &amp; debug</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/secure/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/secure/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/secure/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/secure/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/secure/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/secure/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/secure/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/secure/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-secure-debug-examples"> Examples </h2> <ul> <li> <a href="/__pyric/ui/docs/examples/chess/"> Chess showcase </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-observe-shape"> <summary>Observe &amp; shape</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/observe/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/observe/resolve-runtime-status/"> Runtime status </a> </li><li> <a href="/__pyric/ui/docs/observe/switch-and-impersonate-identities/"> Impersonate &amp; tenants </a> </li><li> <a href="/__pyric/ui/docs/observe/shape-your-data/"> Seed, snapshot, replay </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-ship-test"> <summary>Ship &amp; test</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/ship/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-work-with-an-agent"> <summary>Work with an agent</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/agent/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/agent/work-with-an-agent/"> Use the MCP tools </a> </li><li> <a href="/__pyric/ui/docs/agent/watch-and-review/"> Watch in Pyric Studio </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-trust"> <summary>Trust</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/trust/versioning-and-compatibility/"> Versioning and the fb tag </a> </li><li> <a href="/__pyric/ui/docs/trust/rules-standard-library/"> Rules standard library reference </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/conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/trust/how-we-know-it-matches-firebase/"> How we know it matches Firebase </a> </li><li> <a href="/__pyric/ui/docs/app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/functions-rtdb-compat/"> Functions · RTDB </a> </li><li> <a href="/__pyric/ui/docs/rules-compat/"> Rules </a> </li><li> <a href="/__pyric/ui/docs/firestore-flutter-compat/"> Firestore · Flutter </a> </li><li> <a href="/__pyric/ui/docs/firestore-kotlin-compat/"> Firestore · Kotlin </a> </li><li> <a href="/__pyric/ui/docs/firestore-swift-compat/"> Firestore · Swift </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 docs-nav-group-body--reference"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-app-reference-api/"> pyric/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-reference-api/"> pyric/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-lite-reference-api/"> pyric/firestore/lite </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-reference-api/"> pyric/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-reference-api/"> pyric/ai </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-scripting-reference-api/"> pyric/ai/scripting </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-reference-api/"> pyric/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-reference-api/"> pyric/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-reference-api/"> pyric/messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-sw-reference-api/"> pyric/messaging/sw </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-reference-api/"> pyric/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-reference-api/"> pyric/sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-firestore-reference-api/"> pyric/sandbox/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-database-reference-api/"> pyric/sandbox/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-app-check-reference-api/"> pyric/app-check </a> </li><li> <a href="/__pyric/ui/docs/pyric-functions-reference-api/"> pyric/functions </a> </li><li> <a href="/__pyric/ui/docs/pyric-analytics-reference-api/"> pyric/analytics </a> </li><li> <a href="/__pyric/ui/docs/pyric-performance-reference-api/"> pyric/performance </a> </li><li> <a href="/__pyric/ui/docs/pyric-remote-config-reference-api/"> pyric/remote-config </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric-admin</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-admin-reference-api/"> pyric-admin </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app-reference-api/"> pyric-admin/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore-reference-api/"> pyric-admin/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth-reference-api/"> pyric-admin/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database-reference-api/"> pyric-admin/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage-reference-api/"> pyric-admin/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-messaging-reference-api/"> pyric-admin/messaging </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">create-pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/create-pyric-reference-api/"> create-pyric </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-credentials-node-reference-api/"> @pyric/cli/credentials/node </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-verify-reference-api/"> @pyric/cli/verify </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-reference-api/"> @pyric/cli/conformance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-browser-reference-api/"> @pyric/cli/conformance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-docs-reference-api/"> @pyric/cli/conformance/docs </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-reference-api/"> @pyric/cli/assurance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-browser-reference-api/"> @pyric/cli/assurance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-reference-api/"> @pyric/cli/bridge </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-client-reference-api/"> @pyric/cli/bridge/client </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-discover-reference-api/"> @pyric/cli/discover </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-vite-reference-api/"> @pyric/cli/vite </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-next-reference-api/"> @pyric/cli/next </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bundler-reference-api/"> @pyric/cli/bundler </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-serve-worker-reference-api/"> @pyric/cli/serve/worker </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-remote-reference-api/"> @pyric/cli/remote </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-reference-api/"> @pyric/cli/register </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-app-bridge-reference-api/"> @pyric/cli/register/app-bridge </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/ui</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-ui-auth-reference-api/"> @pyric/ui/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-auth-hooks-reference-api/"> @pyric/ui/auth/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-primitives-reference-api/" aria-current="page"> @pyric/ui/primitives </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-reference-api/"> @pyric/ui/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-hooks-reference-api/"> @pyric/ui/firestore/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rtdb-reference-api/"> @pyric/ui/rtdb </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-reference-api/"> @pyric/ui/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-hooks-reference-api/"> @pyric/ui/storage/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-reference-api/"> @pyric/ui/traffic </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-hooks-reference-api/"> @pyric/ui/traffic/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-reference-api/"> @pyric/ui/events </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-hooks-reference-api/"> @pyric/ui/events/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-agents-reference-api/"> @pyric/ui/agents </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-reference-api/"> @pyric/ui/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-hooks-reference-api/"> @pyric/ui/rules/hooks </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/reference/cli/"> CLI </a> </li> </ul> </div> </div> </details> </nav> <main class="doc-main" data-astro-cid-mw7aashj> <nav class="docs-breadcrumbs" aria-label="Breadcrumb"> <ol> <li>  <a href="/__pyric/ui/docs/api-reference/">API reference</a> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span>@pyric/ui</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">@pyric/ui/primitives</span> </li> </ol> </nav> <header class="api-reference-header" data-astro-cid-mw7aashj> <p class="api-reference-kicker" data-astro-cid-mw7aashj>API reference</p> <h1 data-astro-cid-mw7aashj><code data-astro-cid-mw7aashj>@pyric/ui/primitives</code></h1> <p class="api-reference-meta" data-astro-cid-mw7aashj> 33 published symbols from <code data-astro-cid-mw7aashj>@pyric/ui</code> </p> <p class="api-reference-source" data-astro-cid-mw7aashj>
 Generated from the TypeScript declarations shipped at this import path.
 </p>  </header> <article class="prose api-reference-body" data-astro-cid-mw7aashj> <!-- Generated from published package declarations via TypeDoc. Rendered by the api-reference content loader. -->
 <h2 id="interfaces">Interfaces</h2>
@@ -230,6 +230,71 @@ Generated from the TypeScript declarations shipped at this import path.
 <table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-3"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the root container.</td></tr><tr><td align="left"><a id="defaultcollapseddepth"></a> <code>defaultCollapsedDepth?</code></td><td align="left"><code>number</code></td><td align="left">Depth at and below which object/array nodes start collapsed. <code>0</code> collapses the root, <code>1</code> collapses everything under the root, <code>Infinity</code> (default) leaves everything expanded.</td></tr><tr><td align="left"><a id="value"></a> <code>value</code></td><td align="left"><code>unknown</code></td><td align="left">Any JSON-serializable value.</td></tr></tbody></table></div>
 <hr>
+<p><a id="modalprops"></a></p>
+<h3 id="modalprops">ModalProps</h3>
+<h4 id="properties-6">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="ariadescribedby"></a> <code>ariaDescribedBy?</code></td><td align="left"><code>string</code></td><td align="left">Accessible description element ID.</td></tr><tr><td align="left"><a id="arialabel-2"></a> <code>ariaLabel?</code></td><td align="left"><code>string</code></td><td align="left">Accessible name for the dialog.</td></tr><tr><td align="left"><a id="arialabelledby"></a> <code>ariaLabelledBy?</code></td><td align="left"><code>string</code></td><td align="left">Accessible label element ID.</td></tr><tr><td align="left"><a id="backdropclassname"></a> <code>backdropClassName?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the backdrop element.</td></tr><tr><td align="left"><a id="children-3"></a> <code>children</code></td><td align="left"><code>ReactNode</code></td><td align="left">Content rendered inside the inner panel.</td></tr><tr><td align="left"><a id="classname-4"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the root wrapper (covers the full viewport).</td></tr><tr><td align="left"><a id="initialfocusref"></a> <code>initialFocusRef?</code></td><td align="left"><code>RefObject</code>&#x3C;<code>HTMLElement</code>></td><td align="left">Optional ref to focus when the modal opens. Defaults to first focusable element.</td></tr><tr><td align="left"><a id="onclose"></a> <code>onClose</code></td><td align="left">() => <code>void</code></td><td align="left">Called when the user dismisses via backdrop click or Escape.</td></tr><tr><td align="left"><a id="open-1"></a> <code>open</code></td><td align="left"><code>boolean</code></td><td align="left">Controlled open state.</td></tr><tr><td align="left"><a id="panelclassname"></a> <code>panelClassName?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the inner panel.</td></tr></tbody></table></div>
+<hr>
 <p><a id="segmentedcontrolprops"></a></p>
 <h3 id="segmentedcontrolprops">SegmentedControlProps</h3>
 <h4 id="type-parameters">Type Parameters</h4>
@@ -245,7 +310,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <table><thead><tr><th align="left">Type Parameter</th></tr></thead><tbody><tr><td align="left"><code>T</code> <em>extends</em> <code>string</code></td></tr></tbody></table></div>
-<h4 id="properties-6">Properties</h4>
+<h4 id="properties-7">Properties</h4>
 <div class="table-scroll">
@@ -281,7 +346,7 @@ Generated from the TypeScript declarations shipped at this import path.
-<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="arialabel-2"></a> <code>ariaLabel?</code></td><td align="left"><code>string</code></td><td align="left">Accessible label for the radiogroup.</td></tr><tr><td align="left"><a id="classname-4"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the container.</td></tr><tr><td align="left"><a id="onchange"></a> <code>onChange</code></td><td align="left">(<code>value</code>: <code>T</code>) => <code>void</code></td><td align="left">Fired with the new value when a segment is clicked.</td></tr><tr><td align="left"><a id="options"></a> <code>options</code></td><td align="left">readonly <a href="#segmentedoption"><code>SegmentedOption</code></a>&#x3C;<code>T</code>>[]</td><td align="left">The selectable segments, rendered left-to-right.</td></tr><tr><td align="left"><a id="value-1"></a> <code>value</code></td><td align="left"><code>T</code></td><td align="left">The currently-selected value.</td></tr></tbody></table></div>
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="arialabel-3"></a> <code>ariaLabel?</code></td><td align="left"><code>string</code></td><td align="left">Accessible label for the radiogroup.</td></tr><tr><td align="left"><a id="classname-5"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the container.</td></tr><tr><td align="left"><a id="onchange"></a> <code>onChange</code></td><td align="left">(<code>value</code>: <code>T</code>) => <code>void</code></td><td align="left">Fired with the new value when a segment is clicked.</td></tr><tr><td align="left"><a id="options"></a> <code>options</code></td><td align="left">readonly <a href="#segmentedoption"><code>SegmentedOption</code></a>&#x3C;<code>T</code>>[]</td><td align="left">The selectable segments, rendered left-to-right.</td></tr><tr><td align="left"><a id="value-1"></a> <code>value</code></td><td align="left"><code>T</code></td><td align="left">The currently-selected value.</td></tr></tbody></table></div>
 <hr>
 <p><a id="segmentedoption"></a></p>
 <h3 id="segmentedoption">SegmentedOption</h3>
@@ -298,7 +363,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <table><thead><tr><th align="left">Type Parameter</th></tr></thead><tbody><tr><td align="left"><code>T</code> <em>extends</em> <code>string</code></td></tr></tbody></table></div>
-<h4 id="properties-7">Properties</h4>
+<h4 id="properties-8">Properties</h4>
 <div class="table-scroll">
@@ -332,7 +397,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <ul>
 <li><a href="#toastrecord"><code>ToastRecord</code></a></li>
 </ul>
-<h4 id="properties-8">Properties</h4>
+<h4 id="properties-9">Properties</h4>
 <div class="table-scroll">
@@ -367,7 +432,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <hr>
 <p><a id="toastproviderprops"></a></p>
 <h3 id="toastproviderprops">ToastProviderProps</h3>
-<h4 id="properties-9">Properties</h4>
+<h4 id="properties-10">Properties</h4>
 <div class="table-scroll">
@@ -398,7 +463,7 @@ Generated from the TypeScript declarations shipped at this import path.
-<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="children-3"></a> <code>children</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr><tr><td align="left"><a id="classname-5"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the rendered container.</td></tr><tr><td align="left"><a id="defaultduration"></a> <code>defaultDuration?</code></td><td align="left"><code>number</code></td><td align="left">Default auto-dismiss in ms. Per-toast <code>duration</code> overrides. Default 5000; pass <code>0</code> to make sticky-by-default.</td></tr><tr><td align="left"><a id="regionlabel"></a> <code>regionLabel?</code></td><td align="left"><code>string</code></td><td align="left">Region label for assistive tech. Defaults to “Notifications”.</td></tr></tbody></table></div>
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="children-4"></a> <code>children</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr><tr><td align="left"><a id="classname-6"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the rendered container.</td></tr><tr><td align="left"><a id="defaultduration"></a> <code>defaultDuration?</code></td><td align="left"><code>number</code></td><td align="left">Default auto-dismiss in ms. Per-toast <code>duration</code> overrides. Default 5000; pass <code>0</code> to make sticky-by-default.</td></tr><tr><td align="left"><a id="regionlabel"></a> <code>regionLabel?</code></td><td align="left"><code>string</code></td><td align="left">Region label for assistive tech. Defaults to “Notifications”.</td></tr></tbody></table></div>
 <hr>
 <p><a id="toastrecord"></a></p>
 <h3 id="toastrecord">ToastRecord</h3>
@@ -406,7 +471,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <ul>
 <li><a href="#toastinput"><code>ToastInput</code></a></li>
 </ul>
-<h4 id="properties-10">Properties</h4>
+<h4 id="properties-11">Properties</h4>
 <div class="table-scroll">
@@ -446,7 +511,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <hr>
 <p><a id="updatehighlight"></a></p>
 <h3 id="updatehighlight">UpdateHighlight</h3>
-<h4 id="properties-11">Properties</h4>
+<h4 id="properties-12">Properties</h4>
 <div class="table-scroll">
@@ -468,7 +533,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <hr>
 <p><a id="usecontainersizeoptions"></a></p>
 <h3 id="usecontainersizeoptions">UseContainerSizeOptions</h3>
-<h4 id="properties-12">Properties</h4>
+<h4 id="properties-13">Properties</h4>
 <div class="table-scroll">
@@ -506,7 +571,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <table><thead><tr><th align="left">Type Parameter</th></tr></thead><tbody><tr><td align="left"><code>T</code></td></tr></tbody></table></div>
-<h4 id="properties-13">Properties</h4>
+<h4 id="properties-14">Properties</h4>
 <div class="table-scroll">
@@ -553,7 +618,7 @@ Generated from the TypeScript declarations shipped at this import path.
 <table><thead><tr><th align="left">Type Parameter</th></tr></thead><tbody><tr><td align="left"><code>T</code></td></tr></tbody></table></div>
-<h4 id="properties-14">Properties</h4>
+<h4 id="properties-15">Properties</h4>
 <div class="table-scroll">
@@ -599,7 +664,7 @@ Generated from the TypeScript declarations shipped at this import path.
-<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-6"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the scroll container.</td></tr><tr><td align="left"><a id="estimatesize"></a> <code>estimateSize</code></td><td align="left"><code>number</code> | (<code>index</code>: <code>number</code>) => <code>number</code></td><td align="left">Estimated row height in px. <code>useVirtualizer</code> measures actual rendered heights via ResizeObserver — this is just the guess used before measurement. Pass a function for variable sizing.</td></tr><tr><td align="left"><a id="getitemkey"></a> <code>getItemKey?</code></td><td align="left">(<code>item</code>: <code>T</code>, <code>index</code>: <code>number</code>) => <code>string</code> | <code>number</code></td><td align="left">Optional <code>key</code> resolver. Defaults to the index. Use when rows reorder so React can preserve component state across moves.</td></tr><tr><td align="left"><a id="height"></a> <code>height?</code></td><td align="left"><code>string</code> | <code>number</code></td><td align="left">Height the scroll container fills. Default <code>100%</code> — the consumer’s parent typically constrains height.</td></tr><tr><td align="left"><a id="items"></a> <code>items</code></td><td align="left">readonly <code>T</code>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="overscan"></a> <code>overscan?</code></td><td align="left"><code>number</code></td><td align="left">Number of off-screen rows to render on each side. TanStack default is 5; bump for smoother fast scrolling.</td></tr><tr><td align="left"><a id="renderitem"></a> <code>renderItem</code></td><td align="left">(<code>item</code>: <code>T</code>, <code>index</code>: <code>number</code>) => <code>ReactNode</code></td><td align="left">Render one row. The library handles positioning + key-by-index.</td></tr></tbody></table></div>
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-7"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the scroll container.</td></tr><tr><td align="left"><a id="estimatesize"></a> <code>estimateSize</code></td><td align="left"><code>number</code> | (<code>index</code>: <code>number</code>) => <code>number</code></td><td align="left">Estimated row height in px. <code>useVirtualizer</code> measures actual rendered heights via ResizeObserver — this is just the guess used before measurement. Pass a function for variable sizing.</td></tr><tr><td align="left"><a id="getitemkey"></a> <code>getItemKey?</code></td><td align="left">(<code>item</code>: <code>T</code>, <code>index</code>: <code>number</code>) => <code>string</code> | <code>number</code></td><td align="left">Optional <code>key</code> resolver. Defaults to the index. Use when rows reorder so React can preserve component state across moves.</td></tr><tr><td align="left"><a id="height"></a> <code>height?</code></td><td align="left"><code>string</code> | <code>number</code></td><td align="left">Height the scroll container fills. Default <code>100%</code> — the consumer’s parent typically constrains height.</td></tr><tr><td align="left"><a id="items"></a> <code>items</code></td><td align="left">readonly <code>T</code>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="overscan"></a> <code>overscan?</code></td><td align="left"><code>number</code></td><td align="left">Number of off-screen rows to render on each side. TanStack default is 5; bump for smoother fast scrolling.</td></tr><tr><td align="left"><a id="renderitem"></a> <code>renderItem</code></td><td align="left">(<code>item</code>: <code>T</code>, <code>index</code>: <code>number</code>) => <code>ReactNode</code></td><td align="left">Render one row. The library handles positioning + key-by-index.</td></tr></tbody></table></div>
 <h2 id="type-aliases">Type Aliases</h2>
 <p><a id="confirmfn"></a></p>
 <h3 id="confirmfn">ConfirmFn()</h3>
@@ -781,6 +846,39 @@ hooks for the consumer to style.</p>
 <h4 id="returns-5">Returns</h4>
 <p><code>Element</code></p>
 <hr>
+<p><a id="modal"></a></p>
+<h3 id="modal">Modal()</h3>
+<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:#C678DD">function</span><span style="color:#61AFEF"> Modal</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">ModalProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless modal primitive — provides accessible behavior:</p>
+<ul>
+<li>Traps keyboard focus within panel (<code>Tab</code> and <code>Shift+Tab</code> cycling)</li>
+<li>Restores focus to original trigger element on close</li>
+<li>Dismisses on <code>Escape</code> key or backdrop click</li>
+<li>Emits ARIA dialog attributes (<code>role="dialog"</code>, <code>aria-modal="true"</code>)</li>
+</ul>
+<p>Ships zero visual styling. Consumers attach styles via <code>className</code> slots
+or by targeting emitted attributes:
+[data-pyric-ui=“modal”]      — root viewport wrapper
+[data-pyric-modal-backdrop]  — clickable backdrop
+[data-pyric-modal-panel]     — inner panel containing children</p>
+<h4 id="parameters-6">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#modalprops"><code>ModalProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-6">Returns</h4>
+<p><code>Element</code></p>
+<hr>
 <p><a id="segmentedcontrol"></a></p>
 <h3 id="segmentedcontrol">SegmentedControl()</h3>
 <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:#C678DD">function</span><span style="color:#61AFEF"> SegmentedControl</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">T</span><span style="color:#ABB2BF">>(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">SegmentedControlProps</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">T</span><span style="color:#ABB2BF">>): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
@@ -806,7 +904,7 @@ buttons that reads as one widget. Wired as an ARIA radiogroup.</p>
 <table><thead><tr><th align="left">Type Parameter</th></tr></thead><tbody><tr><td align="left"><code>T</code> <em>extends</em> <code>string</code></td></tr></tbody></table></div>
-<h4 id="parameters-6">Parameters</h4>
+<h4 id="parameters-7">Parameters</h4>
 <div class="table-scroll">
@@ -821,7 +919,7 @@ buttons that reads as one widget. Wired as an ARIA radiogroup.</p>
 <table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#segmentedcontrolprops"><code>SegmentedControlProps</code></a>&#x3C;<code>T</code>></td></tr></tbody></table></div>
-<h4 id="returns-6">Returns</h4>
+<h4 id="returns-7">Returns</h4>
 <p><code>Element</code></p>
 <hr>
 <p><a id="toastprovider"></a></p>
@@ -832,7 +930,7 @@ via portal and exposes the imperative API via context. Scoped —
 a subtree can host its own provider for isolated queues if needed.</p>
 <p>Headless: every node carries structural <code>data-*</code> attributes, no
 shipped CSS. Auto-dismiss timers are kept per-toast.</p>
-<h4 id="parameters-7">Parameters</h4>
+<h4 id="parameters-8">Parameters</h4>
 <div class="table-scroll">
@@ -847,7 +945,7 @@ shipped CSS. Auto-dismiss timers are kept per-toast.</p>
 <table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#toastproviderprops"><code>ToastProviderProps</code></a></td></tr></tbody></table></div>
-<h4 id="returns-7">Returns</h4>
+<h4 id="returns-8">Returns</h4>
 <p><code>Element</code></p>
 <hr>
 <p><a id="useconfirm"></a></p>
@@ -860,7 +958,7 @@ on cancel/dismiss.</p>
 const ok = await confirm({ title: ‘Delete?’, destructive: true });
 if (ok) await deleteDoc(ref);</p>
 <p>Requires a <code>&#x3C;ConfirmProvider></code> ancestor.</p>
-<h4 id="returns-8">Returns</h4>
+<h4 id="returns-9">Returns</h4>
 <p><a href="#confirmfn"><code>ConfirmFn</code></a></p>
 <hr>
 <p><a id="usecontainersize"></a></p>
@@ -895,7 +993,7 @@ decision to the consumer via data attributes).</p>
 <table><thead><tr><th align="left">Type Parameter</th><th align="left">Default type</th></tr></thead><tbody><tr><td align="left"><code>T</code> <em>extends</em> <code>HTMLElement</code></td><td align="left"><code>HTMLDivElement</code></td></tr></tbody></table></div>
-<h4 id="parameters-8">Parameters</h4>
+<h4 id="parameters-9">Parameters</h4>
 <div class="table-scroll">
@@ -910,7 +1008,7 @@ decision to the consumer via data attributes).</p>
 <table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>options?</code></td><td align="left"><a href="#usecontainersizeoptions"><code>UseContainerSizeOptions</code></a></td></tr></tbody></table></div>
-<h4 id="returns-9">Returns</h4>
+<h4 id="returns-10">Returns</h4>
 <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:#ABB2BF">{</span></span>
 <span class="line"><span style="color:#E06C75">  ref</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">RefObject</span><span style="color:#56B6C2">&#x3C;</span><span style="color:#E5C07B">T</span><span style="color:#56B6C2">></span><span style="color:#ABB2BF">;</span></span>
 <span class="line"><span style="color:#E06C75">  size</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">ContainerSize</span><span style="color:#ABB2BF">;</span></span>
@@ -927,7 +1025,7 @@ decision to the consumer via data attributes).</p>
 <p>const { toast } = useToast();
 toast({ title: ‘Saved.’, kind: ‘success’ });</p>
 <p>Requires a <code>&#x3C;ToastProvider></code> ancestor.</p>
-<h4 id="returns-10">Returns</h4>
+<h4 id="returns-11">Returns</h4>
 <p><code>ToastContextValue</code></p>
 <hr>
 <p><a id="useupdatehighlights"></a></p>
@@ -948,7 +1046,7 @@ The first ready snapshot in each scope is a silent baseline.</p>
 <table><thead><tr><th align="left">Type Parameter</th></tr></thead><tbody><tr><td align="left"><code>T</code></td></tr></tbody></table></div>
-<h4 id="parameters-9">Parameters</h4>
+<h4 id="parameters-10">Parameters</h4>
 <div class="table-scroll">
@@ -963,7 +1061,7 @@ The first ready snapshot in each scope is a silent baseline.</p>
 <table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#useupdatehighlightsoptions"><code>UseUpdateHighlightsOptions</code></a>&#x3C;<code>T</code>></td></tr></tbody></table></div>
-<h4 id="returns-11">Returns</h4>
+<h4 id="returns-12">Returns</h4>
 <p><code>ReadonlyMap</code>&#x3C;<code>string</code>, <a href="#updatehighlight"><code>UpdateHighlight</code></a>></p>
 <hr>
 <p><a id="virtuallist"></a></p>
@@ -990,7 +1088,7 @@ to position rows (the inner spacer’s <code>height</code> + each row’s
 <table><thead><tr><th align="left">Type Parameter</th></tr></thead><tbody><tr><td align="left"><code>T</code></td></tr></tbody></table></div>
-<h4 id="parameters-10">Parameters</h4>
+<h4 id="parameters-11">Parameters</h4>
 <div class="table-scroll">
@@ -1005,5 +1103,5 @@ to position rows (the inner spacer’s <code>height</code> + each row’s
 <table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#virtuallistprops"><code>VirtualListProps</code></a>&#x3C;<code>T</code>></td></tr></tbody></table></div>
-<h4 id="returns-12">Returns</h4>
-<p><code>Element</code></p> </article> </main> <aside class="doc-toc api-symbols" aria-label="API symbols" data-astro-cid-mw7aashj> <h2 class="doc-toc-heading" data-astro-cid-mw7aashj>Symbols</h2> <input class="api-symbol-filter" type="search" placeholder="Filter symbols" aria-label="Filter API symbols" data-api-symbol-filter data-astro-cid-mw7aashj> <div class="api-symbol-groups" data-api-symbol-groups data-astro-cid-mw7aashj> <section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#interfaces" data-astro-cid-mw7aashj> Interfaces </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="badgeprops" data-astro-cid-mw7aashj> <a href="#badgeprops" data-astro-cid-mw7aashj>BadgeProps</a> </li><li data-api-symbol="confirmdialogprops" data-astro-cid-mw7aashj> <a href="#confirmdialogprops" data-astro-cid-mw7aashj>ConfirmDialogProps</a> </li><li data-api-symbol="confirmoptions" data-astro-cid-mw7aashj> <a href="#confirmoptions" data-astro-cid-mw7aashj>ConfirmOptions</a> </li><li data-api-symbol="confirmproviderprops" data-astro-cid-mw7aashj> <a href="#confirmproviderprops" data-astro-cid-mw7aashj>ConfirmProviderProps</a> </li><li data-api-symbol="copybuttonprops" data-astro-cid-mw7aashj> <a href="#copybuttonprops" data-astro-cid-mw7aashj>CopyButtonProps</a> </li><li data-api-symbol="jsonviewprops" data-astro-cid-mw7aashj> <a href="#jsonviewprops" data-astro-cid-mw7aashj>JsonViewProps</a> </li><li data-api-symbol="segmentedcontrolprops" data-astro-cid-mw7aashj> <a href="#segmentedcontrolprops" data-astro-cid-mw7aashj>SegmentedControlProps</a> </li><li data-api-symbol="segmentedoption" data-astro-cid-mw7aashj> <a href="#segmentedoption" data-astro-cid-mw7aashj>SegmentedOption</a> </li><li data-api-symbol="toastinput" data-astro-cid-mw7aashj> <a href="#toastinput" data-astro-cid-mw7aashj>ToastInput</a> </li><li data-api-symbol="toastproviderprops" data-astro-cid-mw7aashj> <a href="#toastproviderprops" data-astro-cid-mw7aashj>ToastProviderProps</a> </li><li data-api-symbol="toastrecord" data-astro-cid-mw7aashj> <a href="#toastrecord" data-astro-cid-mw7aashj>ToastRecord</a> </li><li data-api-symbol="updatehighlight" data-astro-cid-mw7aashj> <a href="#updatehighlight" data-astro-cid-mw7aashj>UpdateHighlight</a> </li><li data-api-symbol="usecontainersizeoptions" data-astro-cid-mw7aashj> <a href="#usecontainersizeoptions" data-astro-cid-mw7aashj>UseContainerSizeOptions</a> </li><li data-api-symbol="useupdatehighlightsoptions" data-astro-cid-mw7aashj> <a href="#useupdatehighlightsoptions" data-astro-cid-mw7aashj>UseUpdateHighlightsOptions</a> </li><li data-api-symbol="virtuallistprops" data-astro-cid-mw7aashj> <a href="#virtuallistprops" data-astro-cid-mw7aashj>VirtualListProps</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#type-aliases" data-astro-cid-mw7aashj> Type Aliases </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="confirmfn()" data-astro-cid-mw7aashj> <a href="#confirmfn" data-astro-cid-mw7aashj>ConfirmFn()</a> </li><li data-api-symbol="containersize" data-astro-cid-mw7aashj> <a href="#containersize" data-astro-cid-mw7aashj>ContainerSize</a> </li><li data-api-symbol="toastkind" data-astro-cid-mw7aashj> <a href="#toastkind" data-astro-cid-mw7aashj>ToastKind</a> </li><li data-api-symbol="updatehighlightkind" data-astro-cid-mw7aashj> <a href="#updatehighlightkind" data-astro-cid-mw7aashj>UpdateHighlightKind</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#functions" data-astro-cid-mw7aashj> Functions </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="badge()" data-astro-cid-mw7aashj> <a href="#badge" data-astro-cid-mw7aashj>Badge()</a> </li><li data-api-symbol="confirmdialog()" data-astro-cid-mw7aashj> <a href="#confirmdialog" data-astro-cid-mw7aashj>ConfirmDialog()</a> </li><li data-api-symbol="confirmprovider()" data-astro-cid-mw7aashj> <a href="#confirmprovider" data-astro-cid-mw7aashj>ConfirmProvider()</a> </li><li data-api-symbol="copybutton()" data-astro-cid-mw7aashj> <a href="#copybutton" data-astro-cid-mw7aashj>CopyButton()</a> </li><li data-api-symbol="jsonview()" data-astro-cid-mw7aashj> <a href="#jsonview" data-astro-cid-mw7aashj>JsonView()</a> </li><li data-api-symbol="segmentedcontrol()" data-astro-cid-mw7aashj> <a href="#segmentedcontrol" data-astro-cid-mw7aashj>SegmentedControl()</a> </li><li data-api-symbol="toastprovider()" data-astro-cid-mw7aashj> <a href="#toastprovider" data-astro-cid-mw7aashj>ToastProvider()</a> </li><li data-api-symbol="useconfirm()" data-astro-cid-mw7aashj> <a href="#useconfirm" data-astro-cid-mw7aashj>useConfirm()</a> </li><li data-api-symbol="usecontainersize()" data-astro-cid-mw7aashj> <a href="#usecontainersize" data-astro-cid-mw7aashj>useContainerSize()</a> </li><li data-api-symbol="usetoast()" data-astro-cid-mw7aashj> <a href="#usetoast" data-astro-cid-mw7aashj>useToast()</a> </li><li data-api-symbol="useupdatehighlights()" data-astro-cid-mw7aashj> <a href="#useupdatehighlights" data-astro-cid-mw7aashj>useUpdateHighlights()</a> </li><li data-api-symbol="virtuallist()" data-astro-cid-mw7aashj> <a href="#virtuallist" data-astro-cid-mw7aashj>VirtualList()</a> </li> </ul> </section> <p class="api-symbol-empty" data-api-symbol-empty hidden data-astro-cid-mw7aashj>No matching symbols</p> </div> </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>
+<h4 id="returns-13">Returns</h4>
+<p><code>Element</code></p> </article> </main> <aside class="doc-toc api-symbols" aria-label="API symbols" data-astro-cid-mw7aashj> <h2 class="doc-toc-heading" data-astro-cid-mw7aashj>Symbols</h2> <input class="api-symbol-filter" type="search" placeholder="Filter symbols" aria-label="Filter API symbols" data-api-symbol-filter data-astro-cid-mw7aashj> <div class="api-symbol-groups" data-api-symbol-groups data-astro-cid-mw7aashj> <section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#interfaces" data-astro-cid-mw7aashj> Interfaces </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="badgeprops" data-astro-cid-mw7aashj> <a href="#badgeprops" data-astro-cid-mw7aashj>BadgeProps</a> </li><li data-api-symbol="confirmdialogprops" data-astro-cid-mw7aashj> <a href="#confirmdialogprops" data-astro-cid-mw7aashj>ConfirmDialogProps</a> </li><li data-api-symbol="confirmoptions" data-astro-cid-mw7aashj> <a href="#confirmoptions" data-astro-cid-mw7aashj>ConfirmOptions</a> </li><li data-api-symbol="confirmproviderprops" data-astro-cid-mw7aashj> <a href="#confirmproviderprops" data-astro-cid-mw7aashj>ConfirmProviderProps</a> </li><li data-api-symbol="copybuttonprops" data-astro-cid-mw7aashj> <a href="#copybuttonprops" data-astro-cid-mw7aashj>CopyButtonProps</a> </li><li data-api-symbol="jsonviewprops" data-astro-cid-mw7aashj> <a href="#jsonviewprops" data-astro-cid-mw7aashj>JsonViewProps</a> </li><li data-api-symbol="modalprops" data-astro-cid-mw7aashj> <a href="#modalprops" data-astro-cid-mw7aashj>ModalProps</a> </li><li data-api-symbol="segmentedcontrolprops" data-astro-cid-mw7aashj> <a href="#segmentedcontrolprops" data-astro-cid-mw7aashj>SegmentedControlProps</a> </li><li data-api-symbol="segmentedoption" data-astro-cid-mw7aashj> <a href="#segmentedoption" data-astro-cid-mw7aashj>SegmentedOption</a> </li><li data-api-symbol="toastinput" data-astro-cid-mw7aashj> <a href="#toastinput" data-astro-cid-mw7aashj>ToastInput</a> </li><li data-api-symbol="toastproviderprops" data-astro-cid-mw7aashj> <a href="#toastproviderprops" data-astro-cid-mw7aashj>ToastProviderProps</a> </li><li data-api-symbol="toastrecord" data-astro-cid-mw7aashj> <a href="#toastrecord" data-astro-cid-mw7aashj>ToastRecord</a> </li><li data-api-symbol="updatehighlight" data-astro-cid-mw7aashj> <a href="#updatehighlight" data-astro-cid-mw7aashj>UpdateHighlight</a> </li><li data-api-symbol="usecontainersizeoptions" data-astro-cid-mw7aashj> <a href="#usecontainersizeoptions" data-astro-cid-mw7aashj>UseContainerSizeOptions</a> </li><li data-api-symbol="useupdatehighlightsoptions" data-astro-cid-mw7aashj> <a href="#useupdatehighlightsoptions" data-astro-cid-mw7aashj>UseUpdateHighlightsOptions</a> </li><li data-api-symbol="virtuallistprops" data-astro-cid-mw7aashj> <a href="#virtuallistprops" data-astro-cid-mw7aashj>VirtualListProps</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#type-aliases" data-astro-cid-mw7aashj> Type Aliases </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="confirmfn()" data-astro-cid-mw7aashj> <a href="#confirmfn" data-astro-cid-mw7aashj>ConfirmFn()</a> </li><li data-api-symbol="containersize" data-astro-cid-mw7aashj> <a href="#containersize" data-astro-cid-mw7aashj>ContainerSize</a> </li><li data-api-symbol="toastkind" data-astro-cid-mw7aashj> <a href="#toastkind" data-astro-cid-mw7aashj>ToastKind</a> </li><li data-api-symbol="updatehighlightkind" data-astro-cid-mw7aashj> <a href="#updatehighlightkind" data-astro-cid-mw7aashj>UpdateHighlightKind</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#functions" data-astro-cid-mw7aashj> Functions </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="badge()" data-astro-cid-mw7aashj> <a href="#badge" data-astro-cid-mw7aashj>Badge()</a> </li><li data-api-symbol="confirmdialog()" data-astro-cid-mw7aashj> <a href="#confirmdialog" data-astro-cid-mw7aashj>ConfirmDialog()</a> </li><li data-api-symbol="confirmprovider()" data-astro-cid-mw7aashj> <a href="#confirmprovider" data-astro-cid-mw7aashj>ConfirmProvider()</a> </li><li data-api-symbol="copybutton()" data-astro-cid-mw7aashj> <a href="#copybutton" data-astro-cid-mw7aashj>CopyButton()</a> </li><li data-api-symbol="jsonview()" data-astro-cid-mw7aashj> <a href="#jsonview" data-astro-cid-mw7aashj>JsonView()</a> </li><li data-api-symbol="modal()" data-astro-cid-mw7aashj> <a href="#modal" data-astro-cid-mw7aashj>Modal()</a> </li><li data-api-symbol="segmentedcontrol()" data-astro-cid-mw7aashj> <a href="#segmentedcontrol" data-astro-cid-mw7aashj>SegmentedControl()</a> </li><li data-api-symbol="toastprovider()" data-astro-cid-mw7aashj> <a href="#toastprovider" data-astro-cid-mw7aashj>ToastProvider()</a> </li><li data-api-symbol="useconfirm()" data-astro-cid-mw7aashj> <a href="#useconfirm" data-astro-cid-mw7aashj>useConfirm()</a> </li><li data-api-symbol="usecontainersize()" data-astro-cid-mw7aashj> <a href="#usecontainersize" data-astro-cid-mw7aashj>useContainerSize()</a> </li><li data-api-symbol="usetoast()" data-astro-cid-mw7aashj> <a href="#usetoast" data-astro-cid-mw7aashj>useToast()</a> </li><li data-api-symbol="useupdatehighlights()" data-astro-cid-mw7aashj> <a href="#useupdatehighlights" data-astro-cid-mw7aashj>useUpdateHighlights()</a> </li><li data-api-symbol="virtuallist()" data-astro-cid-mw7aashj> <a href="#virtuallist" data-astro-cid-mw7aashj>VirtualList()</a> </li> </ul> </section> <p class="api-symbol-empty" data-api-symbol-empty hidden data-astro-cid-mw7aashj>No matching symbols</p> </div> </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>