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

@pyric/cli 0.1.0-alpha.9

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

Files changed (1169) hide show

package/dist/serve/docs-ui/docs/ui-firestore-documenteditor/index.html ADDED Viewed

@@ -0,0 +1,154 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>&lt;DocumentEditor&gt; · Pyric Studio</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="/__pyric/ui/_astro/_slug_.CQYSemvw.css"></head> <body>  <header class="studio__bar"> <div class="studio__bar-inner"> <a class="studio__brand" href="/__pyric/ui/" aria-label="Pyric Studio">Pyric</a> <nav class="studio__nav" aria-label="Studio tabs"> <a class="studio__nav-tab" href="/__pyric/ui/"> Home </a><a class="studio__nav-tab" href="/__pyric/ui/firestore"> Firestore </a><a class="studio__nav-tab" href="/__pyric/ui/auth"> Auth </a><a class="studio__nav-tab" href="/__pyric/ui/rtdb"> RTDB </a><a class="studio__nav-tab" href="/__pyric/ui/storage"> Storage </a><a class="studio__nav-tab" href="/__pyric/ui/traffic"> Traffic </a><a class="studio__nav-tab" href="/__pyric/ui/settings"> Settings </a><a class="studio__nav-tab" href="/__pyric/ui/docs" aria-current="page"> Docs </a> </nav> </div> </header> <div class="docs-shell">  <details class="docs-nav-drawer"> <summary>Navigate</summary> <nav class="docs-nav" aria-label="Documentation"> <div class="docs-search" data-index-url="/__pyric/ui/docs/index.json"> <div class="docs-search-field"> <svg class="docs-search-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"> <path d="M11.5 11.5 15 15M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path> </svg> <input type="text" class="docs-search-input" placeholder="Search docs" aria-label="Search docs" autocomplete="off" spellcheck="false"> <kbd class="docs-search-kbd">⌘K</kbd> </div> <ul class="docs-search-results" hidden></ul> </div> <script type="module">let i=null;function d(t){return i||(i=fetch(t).then(e=>e.json())),i}function l(t,e){return t.title.toLowerCase().includes(e)||t.excerpt.toLowerCase().includes(e)?!0:t.headings.some(r=>r.text.toLowerCase().includes(e))}function u(t,e,r){if(e.innerHTML="",t.length===0){e.hidden=!1;{const n=document.createElement("li");n.className="docs-search-empty",n.textContent="No matches",e.appendChild(n)}return}e.hidden=!1;for(const n of t.slice(0,8)){const s=document.createElement("li"),c=document.createElement("a");c.href=n.path;const o=document.createElement("span");o.className="docs-search-result-title",o.textContent=n.title;const a=document.createElement("span");a.className="docs-search-result-meta",a.textContent=[n.group,n.section].filter(Boolean).join(" / "),c.append(o,a),s.appendChild(c),e.appendChild(s)}}document.querySelectorAll(".docs-search").forEach(t=>{const e=t.dataset.indexUrl,r=t.querySelector(".docs-search-input"),n=t.querySelector(".docs-search-results");r.addEventListener("input",async()=>{const s=r.value.trim().toLowerCase();if(!s){n.hidden=!0,n.innerHTML="";return}const{pages:c}=await d(e);r.value.trim().toLowerCase()===s&&u(c.filter(o=>l(o,s)),n)}),r.addEventListener("focus",()=>{d(e),n.childElementCount>0&&(n.hidden=!1)}),r.addEventListener("keydown",s=>{s.key==="Escape"&&(r.value="",n.hidden=!0,n.innerHTML="",r.blur())}),r.addEventListener("blur",()=>{window.setTimeout(()=>{n.hidden=!0},150)})});document.addEventListener("keydown",t=>{if(!(t.metaKey||t.ctrlKey)||t.key.toLowerCase()!=="k")return;const e=[...document.querySelectorAll(".docs-search-input")].find(r=>r.offsetParent!==null);e&&(t.preventDefault(),e.focus(),e.select())});</script> <a class="docs-nav-toplink" href="/__pyric/ui/docs/overview/"> Overview </a><details class="docs-nav-group"> <summary>Run locally</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/how-the-swap-works/"> How the swap works </a> </li><li> <a href="/__pyric/ui/docs/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Develop with Firebase APIs</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/sign-in-and-manage-users/"> Sign in and manage users </a> </li><li> <a href="/__pyric/ui/docs/store-and-query-data/"> Store and query data </a> </li><li> <a href="/__pyric/ui/docs/sync-realtime-data/"> Sync realtime data </a> </li><li> <a href="/__pyric/ui/docs/store-files/"> Store files </a> </li><li> <a href="/__pyric/ui/docs/receive-messages/"> Receive messages </a> </li><li> <a href="/__pyric/ui/docs/run-ai-logic-locally/"> Run AI Logic locally </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-how-to-run-rtdb-onvaluecreated/"> Run an RTDB function locally </a> </li><li> <a href="/__pyric/ui/docs/which-data-service/"> Which data service? </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Inspect and correct</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <h2 class="docs-nav-heading"> Inspect the sandbox </h2> <ul> <li> <a href="/__pyric/ui/docs/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/shape-your-data/"> Seed, snapshot, replay </a> </li><li> <a href="/__pyric/ui/docs/watch-and-review/"> Review agent activity </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Correct Security Rules </h2> <ul> <li> <a href="/__pyric/ui/docs/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/rules-patterns/"> Rules patterns </a> </li><li> <a href="/__pyric/ui/docs/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/whats-possible/"> Case studies </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Work with an agent </h2> <ul> <li> <a href="/__pyric/ui/docs/what-your-agent-can-do/"> Work through an agent </a> </li><li> <a href="/__pyric/ui/docs/skills/"> Agent skills </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Verify the boundary</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-how-to-verify-against-a-captured-session/"> Verify a captured session </a> </li><li> <a href="/__pyric/ui/docs/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Ship unchanged</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/set-up-the-project/"> Set up the Firebase project </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Conformance</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/how-we-know-it-matches-firebase/"> Conformance </a> </li><li> <a href="/__pyric/ui/docs/whats-experimental/"> What&#39;s experimental </a> </li><li> <a href="/__pyric/ui/docs/pyric-conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/pyric-app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-compat/"> Rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-functions-rtdb-compat/"> Functions · RTDB </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" open> <summary>Reference</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli/"> @pyric/cli </a> </li><li> <a href="/__pyric/ui/docs/pyric-explanation-versioning-and-compatibility/"> pyric </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore/"> pyric / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules/"> pyric / rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox/"> pyric / sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage/"> pyric / storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth/"> pyric / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database/"> pyric / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app/"> pyric-admin / app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore/"> pyric-admin / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth/"> pyric-admin / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database/"> pyric-admin / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage/"> pyric-admin / storage </a> </li><li> <a href="/__pyric/ui/docs/ui/" aria-current="true"> @pyric/ui </a> </li><li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div> </div> </details> </nav> </details> <nav class="docs-nav" aria-label="Documentation"> <div class="docs-search" data-index-url="/__pyric/ui/docs/index.json"> <div class="docs-search-field"> <svg class="docs-search-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"> <path d="M11.5 11.5 15 15M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path> </svg> <input type="text" class="docs-search-input" placeholder="Search docs" aria-label="Search docs" autocomplete="off" spellcheck="false"> <kbd class="docs-search-kbd">⌘K</kbd> </div> <ul class="docs-search-results" hidden></ul> </div>  <a class="docs-nav-toplink" href="/__pyric/ui/docs/overview/" id="nav-group-overview"> Overview </a><details class="docs-nav-group" id="nav-group-run-locally"> <summary>Run locally</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/how-the-swap-works/"> How the swap works </a> </li><li> <a href="/__pyric/ui/docs/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-develop-with-firebase-apis"> <summary>Develop with Firebase APIs</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/sign-in-and-manage-users/"> Sign in and manage users </a> </li><li> <a href="/__pyric/ui/docs/store-and-query-data/"> Store and query data </a> </li><li> <a href="/__pyric/ui/docs/sync-realtime-data/"> Sync realtime data </a> </li><li> <a href="/__pyric/ui/docs/store-files/"> Store files </a> </li><li> <a href="/__pyric/ui/docs/receive-messages/"> Receive messages </a> </li><li> <a href="/__pyric/ui/docs/run-ai-logic-locally/"> Run AI Logic locally </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-how-to-run-rtdb-onvaluecreated/"> Run an RTDB function locally </a> </li><li> <a href="/__pyric/ui/docs/which-data-service/"> Which data service? </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-inspect-and-correct"> <summary>Inspect and correct</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-inspect-the-sandbox"> Inspect the sandbox </h2> <ul> <li> <a href="/__pyric/ui/docs/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/shape-your-data/"> Seed, snapshot, replay </a> </li><li> <a href="/__pyric/ui/docs/watch-and-review/"> Review agent activity </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-correct-security-rules"> Correct Security Rules </h2> <ul> <li> <a href="/__pyric/ui/docs/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/rules-patterns/"> Rules patterns </a> </li><li> <a href="/__pyric/ui/docs/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/whats-possible/"> Case studies </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-work-with-an-agent"> Work with an agent </h2> <ul> <li> <a href="/__pyric/ui/docs/what-your-agent-can-do/"> Work through an agent </a> </li><li> <a href="/__pyric/ui/docs/skills/"> Agent skills </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-verify-the-boundary"> <summary>Verify the boundary</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-how-to-verify-against-a-captured-session/"> Verify a captured session </a> </li><li> <a href="/__pyric/ui/docs/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-ship-unchanged"> <summary>Ship unchanged</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/set-up-the-project/"> Set up the Firebase project </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-conformance"> <summary>Conformance</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/how-we-know-it-matches-firebase/"> Conformance </a> </li><li> <a href="/__pyric/ui/docs/whats-experimental/"> What&#39;s experimental </a> </li><li> <a href="/__pyric/ui/docs/pyric-conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/pyric-app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-compat/"> Rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-functions-rtdb-compat/"> Functions · RTDB </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" id="nav-group-reference" open> <summary>Reference</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli/"> @pyric/cli </a> </li><li> <a href="/__pyric/ui/docs/pyric-explanation-versioning-and-compatibility/"> pyric </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore/"> pyric / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules/"> pyric / rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox/"> pyric / sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage/"> pyric / storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth/"> pyric / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database/"> pyric / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app/"> pyric-admin / app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore/"> pyric-admin / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth/"> pyric-admin / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database/"> pyric-admin / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage/"> pyric-admin / storage </a> </li><li> <a href="/__pyric/ui/docs/ui/" aria-current="true"> @pyric/ui </a> </li><li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div> </div> </details> </nav> <main class="doc-main"> <nav class="docs-breadcrumbs" aria-label="Breadcrumb"> <ol> <li>  <a href="/__pyric/ui/docs/ui/">@pyric/ui</a> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span>Firestore</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">&lt;DocumentEditor&gt;</span> </li> </ol> </nav>  <article class="prose">  <h1 id="documenteditor"><code>&#x3C;DocumentEditor></code></h1>
+<p>Compound component over <code>useDocumentEditor</code>. The hook owns a reducer-backed normalized field tree; the component renders the tree with per-type Edit widgets and add/remove affordances.</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">DocumentEditor</span><span style="color:#ABB2BF">, </span><span style="color:#C678DD">type</span><span style="color:#E06C75"> UseDocumentEditorResult</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/firestore'</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h2 id="save-button-gating-pattern">Save-button gating pattern</h2>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> MyEditor</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75;font-style:italic">snap</span><span style="color:#ABB2BF"> }: { </span><span style="color:#E06C75">snap</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">DocumentSnapshot</span><span style="color:#ABB2BF"> }) {</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#ABB2BF"> [</span><span style="color:#E5C07B">editor</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">setEditor</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#61AFEF"> useState</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">UseDocumentEditorResult</span><span style="color:#ABB2BF"> | </span><span style="color:#E5C07B">null</span><span style="color:#ABB2BF">>(</span><span style="color:#D19A66">null</span><span style="color:#ABB2BF">);</span></span>
+<span class="line"><span style="color:#C678DD">  return</span><span style="color:#ABB2BF"> (</span></span>
+<span class="line"><span style="color:#ABB2BF">    &#x3C;></span></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;</span><span style="color:#E5C07B">DocumentEditor.Root</span><span style="color:#D19A66;font-style:italic"> initial</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">snap</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">data</span><span style="color:#ABB2BF">() </span><span style="color:#56B6C2">??</span><span style="color:#ABB2BF"> {}</span><span style="color:#C678DD">}</span><span style="color:#D19A66;font-style:italic"> onChange</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">setEditor</span><span style="color:#C678DD">}</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E5C07B">DocumentEditor.Fields</span><span style="color:#ABB2BF"> /></span></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;/</span><span style="color:#E5C07B">DocumentEditor.Root</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;</span><span style="color:#E06C75">button</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        disabled</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#56B6C2">!</span><span style="color:#E5C07B">editor</span><span style="color:#ABB2BF">?.</span><span style="color:#E06C75">isValid</span><span style="color:#56B6C2"> ||</span><span style="color:#56B6C2"> !</span><span style="color:#E5C07B">editor</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">isDirty</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        onClick</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{async</span><span style="color:#ABB2BF"> () </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
+<span class="line"><span style="color:#C678DD">          await</span><span style="color:#61AFEF"> setDoc</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">snap</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">ref</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">editor</span><span style="color:#56B6C2">!</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">toData</span><span style="color:#ABB2BF">());</span></span>
+<span class="line"><span style="color:#61AFEF">          toast</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'Saved'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">kind</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'success'</span><span style="color:#ABB2BF"> });</span></span>
+<span class="line"><span style="color:#ABB2BF">        }</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#ABB2BF">      ></span></span>
+<span class="line"><span style="color:#ABB2BF">        Save</span></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">    &#x3C;/></span></span>
+<span class="line"><span style="color:#ABB2BF">  );</span></span>
+<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
+<h2 id="documenteditorroot-props"><code>&#x3C;DocumentEditor.Root></code> props</h2>
+<div class="table-scroll">
+<table><thead><tr><th>Prop</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>initial</code></td><td><code>Record&#x3C;string, unknown></code></td><td>Initial document data — same shape as <code>DocumentSnapshot.data()</code>. Built into the tree on first mount; later changes do NOT rebuild — call <code>editor.reset()</code> for that.</td></tr><tr><td><code>fieldEditors</code></td><td><code>FieldEditorRegistry</code></td><td>Override or extend the built-in registry.</td></tr><tr><td><code>onChange</code></td><td><code>(state: UseDocumentEditorResult) => void</code></td><td>Fired on every state change. Capture this to drive the Save button and to call <code>toData()</code> on submit.</td></tr><tr><td><code>children</code></td><td><code>ReactNode</code></td><td>Typically <code>&#x3C;DocumentEditor.Fields /></code> and any custom chrome (Save button, breadcrumb).</td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Forwarded to the root.</td></tr></tbody></table></div>
+<p>The root emits <code>data-pyric-is-valid</code> and <code>data-pyric-is-dirty</code> attributes when the corresponding hook state is true. Use these to style Save buttons via attribute selectors alone if you prefer not to thread <code>onChange</code>.</p>
+<h2 id="documenteditorfields"><code>&#x3C;DocumentEditor.Fields></code></h2>
+<p>Recursive renderer over the tree’s root children. Inserts an <code>Add field</code> button at the bottom for adding to the root.</p>
+<p>No props. Must render inside a <code>&#x3C;DocumentEditor.Root></code>.</p>
+<h2 id="direct-hook-access">Direct hook access</h2>
+<p>Sometimes the default <code>&#x3C;DocumentEditor.Fields></code> layout isn’t what you want — e.g., you need a custom field order, or only edit a subset. Drop down to the hook:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">useDocumentEditor</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/firestore/hooks'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> CustomEditor</span><span style="color:#ABB2BF">() {</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> editor</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useDocumentEditor</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">initial</span><span style="color:#ABB2BF">: { </span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'Alice'</span><span style="color:#ABB2BF"> } });</span></span>
+<span class="line"><span style="color:#7F848E;font-style:italic">  // Render `editor.tree` yourself.</span></span>
+<span class="line"><span style="color:#C678DD">  return</span><span style="color:#ABB2BF"> &#x3C;</span><span style="color:#E06C75">pre</span><span style="color:#ABB2BF">></span><span style="color:#C678DD">{</span><span style="color:#E5C07B">JSON</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">stringify</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">editor</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">tree</span><span style="color:#ABB2BF">, </span><span style="color:#D19A66">null</span><span style="color:#ABB2BF">, </span><span style="color:#D19A66">2</span><span style="color:#ABB2BF">)</span><span style="color:#C678DD">}</span><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">pre</span><span style="color:#ABB2BF">>;</span></span>
+<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
+<p>Inside a <code>&#x3C;DocumentEditor.Root></code>, <code>useDocumentEditorContext()</code> gives you the same hook return value:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">DocumentEditor</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">useDocumentEditorContext</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/firestore'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> Inner</span><span style="color:#ABB2BF">() {</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> editor</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useDocumentEditorContext</span><span style="color:#ABB2BF">();</span></span>
+<span class="line"><span style="color:#C678DD">  return</span><span style="color:#ABB2BF"> &#x3C;</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">></span><span style="color:#C678DD">{</span><span style="color:#E5C07B">editor</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">errorCount</span><span style="color:#C678DD">}</span><span style="color:#ABB2BF"> errors&#x3C;/</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">>;</span></span>
+<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
+<h2 id="field-types-supported">Field types supported</h2>
+<p><code>string</code>, <code>number</code>, <code>boolean</code>, <code>null</code>, <code>timestamp</code>, <code>geopoint</code>, <code>reference</code>, <code>bytes</code>, <code>map</code>, <code>array</code>. See <a href="../ui-firestore-documentpreview/"><code>DocumentPreview.md</code></a> for the read-mode rendering of each; edit-mode widgets:</p>
+<div class="table-scroll">
+<table><thead><tr><th>Type</th><th>Widget</th></tr></thead><tbody><tr><td><code>string</code></td><td><code>&#x3C;input type="text"></code></td></tr><tr><td><code>number</code></td><td><code>&#x3C;input type="number"></code> — parseFloat, NaN propagates to validator</td></tr><tr><td><code>boolean</code></td><td><code>&#x3C;select></code> with <code>true</code>/<code>false</code> options (<code>data-pyric-boolean-select</code>)</td></tr><tr><td><code>null</code></td><td>inert placeholder</td></tr><tr><td><code>timestamp</code></td><td><code>&#x3C;input type="datetime-local"></code></td></tr><tr><td><code>geopoint</code></td><td>two <code>&#x3C;input type="number"></code> for lat/lng</td></tr><tr><td><code>reference</code></td><td>text input for path; <a href="../ui-firestore-referencepicker/"><code>&#x3C;ReferencePicker></code></a> is a richer alternative</td></tr><tr><td><code>bytes</code></td><td>base64 <code>&#x3C;textarea></code></td></tr><tr><td><code>map</code></td><td>recursive</td></tr><tr><td><code>array</code></td><td>recursive; nested arrays rejected at the reducer</td></tr></tbody></table></div>
+<h2 id="styling-hooks">Styling hooks</h2>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="plaintext"><code><span class="line"><span>[data-pyric-ui="document-editor"]</span></span>
+<span class="line"><span>[data-pyric-ui="document-editor"][data-pyric-is-valid]</span></span>
+<span class="line"><span>[data-pyric-ui="document-editor"][data-pyric-is-dirty]</span></span>
+<span class="line"><span>[data-pyric-ui="document-editor"][data-size="narrow|medium|wide"]</span></span>
+<span class="line"><span>[data-pyric-field-entry]</span></span>
+<span class="line"><span>[data-pyric-field-entry][data-pyric-error]</span></span>
+<span class="line"><span>[data-pyric-field-chrome]</span></span>
+<span class="line"><span>[data-pyric-field-key-input]</span></span>
+<span class="line"><span>[data-pyric-field-type-select]</span></span>
+<span class="line"><span>[data-pyric-remove]</span></span>
+<span class="line"><span>[data-pyric-add-map-entry]</span></span>
+<span class="line"><span>[data-pyric-add-array-entry]</span></span>
+<span class="line"><span>[data-pyric-error-message]</span></span>
+<span class="line"><span>[data-pyric-map-children]</span></span>
+<span class="line"><span>[data-pyric-array-children]</span></span></code></pre>
+<h2 id="notes">Notes</h2>
+<ul>
+<li><strong><code>initial</code> is captured once.</strong> The hook builds the tree on first mount and ignores later changes to the prop. If the underlying document changes externally, remount the editor (<code>&#x3C;DocumentEditor.Root key={ref.path}></code>) or call <code>editor.reset()</code> after updating your local state.</li>
+<li><strong><code>isDirty</code> is action-based, not value-based.</strong> Once any modifying action fires, dirty stays true until <code>reset()</code>. Editing back to the original value doesn’t clear it (cheap to check; expensive to do correctly).</li>
+<li><strong>No optimistic save.</strong> The component holds editor state locally. After <code>setDoc</code> succeeds, the underlying snapshot re-emits via <code>onSnapshot</code> and the parent re-renders. Decide explicitly whether to remount the editor on that re-render.</li>
+</ul>  </article> </main> <aside class="doc-toc" aria-label="On this page"> <h2 class="doc-toc-heading">On this page</h2> <ul> <li data-depth="2"> <a href="#save-button-gating-pattern">Save-button gating pattern</a> </li><li data-depth="2"> <a href="#documenteditorroot-props">&lt;DocumentEditor.Root&gt; props</a> </li><li data-depth="2"> <a href="#documenteditorfields">&lt;DocumentEditor.Fields&gt;</a> </li><li data-depth="2"> <a href="#direct-hook-access">Direct hook access</a> </li><li data-depth="2"> <a href="#field-types-supported">Field types supported</a> </li><li data-depth="2"> <a href="#styling-hooks">Styling hooks</a> </li><li data-depth="2"> <a href="#notes">Notes</a> </li> </ul> </aside> </div> <script type="module">const a=document.querySelector("[data-api-symbol-filter]"),d=[...document.querySelectorAll("[data-api-symbol-group]")],n=document.querySelector("[data-api-symbol-empty]");a?.addEventListener("input",()=>{const t=a.value.trim().toLowerCase();let o=0;for(const i of d){let e=0;i.querySelectorAll("[data-api-symbol]").forEach(l=>{const r=!t||(l.dataset.apiSymbol??"").includes(t);l.hidden=!r,r&&e++}),i.hidden=e===0,o+=e}n&&(n.hidden=o>0)});</script> <script type="module">const s=new Map;document.querySelectorAll('.doc-toc a[href^="#"]').forEach(t=>s.set(decodeURIComponent(t.hash.slice(1)),t));if(s.size>0){const t=new Set,n=()=>{let o=null;for(const e of s.keys())if(t.has(e)){o=e;break}s.forEach((e,c)=>e.classList.toggle("active",c===o))},r=new IntersectionObserver(o=>{for(const e of o)e.isIntersecting?t.add(e.target.id):t.delete(e.target.id);n()},{rootMargin:"-72px 0px -60% 0px"});s.forEach((o,e)=>{const c=document.getElementById(e);c&&r.observe(c)})}</script> <script type="module">document.querySelector('.studio__nav [aria-current="page"]')?.scrollIntoView({block:"nearest",inline:"center"});</script> </body> </html>

package/dist/serve/docs-ui/docs/ui-firestore-documenteditor.md ADDED Viewed

@@ -0,0 +1,117 @@
+# `<DocumentEditor>`
+Compound component over `useDocumentEditor`. The hook owns a reducer-backed normalized field tree; the component renders the tree with per-type Edit widgets and add/remove affordances.
+```ts
+import { DocumentEditor, type UseDocumentEditorResult } from '@pyric/ui/firestore';
+```
+## Save-button gating pattern
+```tsx
+function MyEditor({ snap }: { snap: DocumentSnapshot }) {
+  const [editor, setEditor] = useState<UseDocumentEditorResult | null>(null);
+  return (
+    <>
+      <DocumentEditor.Root initial={snap.data() ?? {}} onChange={setEditor}>
+        <DocumentEditor.Fields />
+      </DocumentEditor.Root>
+      <button
+        disabled={!editor?.isValid || !editor.isDirty}
+        onClick={async () => {
+          await setDoc(snap.ref, editor!.toData());
+          toast({ title: 'Saved', kind: 'success' });
+        }}
+      >
+        Save
+      </button>
+    </>
+  );
+}
+```
+## `<DocumentEditor.Root>` props
+| Prop | Type | Description |
+|---|---|---|
+| `initial` | `Record<string, unknown>` | Initial document data — same shape as `DocumentSnapshot.data()`. Built into the tree on first mount; later changes do NOT rebuild — call `editor.reset()` for that. |
+| `fieldEditors` | `FieldEditorRegistry` | Override or extend the built-in registry. |
+| `onChange` | `(state: UseDocumentEditorResult) => void` | Fired on every state change. Capture this to drive the Save button and to call `toData()` on submit. |
+| `children` | `ReactNode` | Typically `<DocumentEditor.Fields />` and any custom chrome (Save button, breadcrumb). |
+| `className` | `string` | Forwarded to the root. |
+The root emits `data-pyric-is-valid` and `data-pyric-is-dirty` attributes when the corresponding hook state is true. Use these to style Save buttons via attribute selectors alone if you prefer not to thread `onChange`.
+## `<DocumentEditor.Fields>`
+Recursive renderer over the tree's root children. Inserts an `Add field` button at the bottom for adding to the root.
+No props. Must render inside a `<DocumentEditor.Root>`.
+## Direct hook access
+Sometimes the default `<DocumentEditor.Fields>` layout isn't what you want — e.g., you need a custom field order, or only edit a subset. Drop down to the hook:
+```tsx
+import { useDocumentEditor } from '@pyric/ui/firestore/hooks';
+function CustomEditor() {
+  const editor = useDocumentEditor({ initial: { name: 'Alice' } });
+  // Render `editor.tree` yourself.
+  return <pre>{JSON.stringify(editor.tree, null, 2)}</pre>;
+}
+```
+Inside a `<DocumentEditor.Root>`, `useDocumentEditorContext()` gives you the same hook return value:
+```tsx
+import { DocumentEditor, useDocumentEditorContext } from '@pyric/ui/firestore';
+function Inner() {
+  const editor = useDocumentEditorContext();
+  return <span>{editor.errorCount} errors</span>;
+}
+```
+## Field types supported
+`string`, `number`, `boolean`, `null`, `timestamp`, `geopoint`, `reference`, `bytes`, `map`, `array`. See [`DocumentPreview.md`](../ui-firestore-documentpreview/) for the read-mode rendering of each; edit-mode widgets:
+| Type | Widget |
+|---|---|
+| `string` | `<input type="text">` |
+| `number` | `<input type="number">` — parseFloat, NaN propagates to validator |
+| `boolean` | `<select>` with `true`/`false` options (`data-pyric-boolean-select`) |
+| `null` | inert placeholder |
+| `timestamp` | `<input type="datetime-local">` |
+| `geopoint` | two `<input type="number">` for lat/lng |
+| `reference` | text input for path; [`<ReferencePicker>`](../ui-firestore-referencepicker/) is a richer alternative |
+| `bytes` | base64 `<textarea>` |
+| `map` | recursive |
+| `array` | recursive; nested arrays rejected at the reducer |
+## Styling hooks
+```
+[data-pyric-ui="document-editor"]
+[data-pyric-ui="document-editor"][data-pyric-is-valid]
+[data-pyric-ui="document-editor"][data-pyric-is-dirty]
+[data-pyric-ui="document-editor"][data-size="narrow|medium|wide"]
+[data-pyric-field-entry]
+[data-pyric-field-entry][data-pyric-error]
+[data-pyric-field-chrome]
+[data-pyric-field-key-input]
+[data-pyric-field-type-select]
+[data-pyric-remove]
+[data-pyric-add-map-entry]
+[data-pyric-add-array-entry]
+[data-pyric-error-message]
+[data-pyric-map-children]
+[data-pyric-array-children]
+```
+## Notes
+- **`initial` is captured once.** The hook builds the tree on first mount and ignores later changes to the prop. If the underlying document changes externally, remount the editor (`<DocumentEditor.Root key={ref.path}>`) or call `editor.reset()` after updating your local state.
+- **`isDirty` is action-based, not value-based.** Once any modifying action fires, dirty stays true until `reset()`. Editing back to the original value doesn't clear it (cheap to check; expensive to do correctly).
+- **No optimistic save.** The component holds editor state locally. After `setDoc` succeeds, the underlying snapshot re-emits via `onSnapshot` and the parent re-renders. Decide explicitly whether to remount the editor on that re-render.

package/dist/serve/docs-ui/docs/ui-firestore-documentlist/index.html ADDED Viewed

@@ -0,0 +1,132 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>&lt;DocumentList&gt; · Pyric Studio</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="/__pyric/ui/_astro/_slug_.CQYSemvw.css"></head> <body>  <header class="studio__bar"> <div class="studio__bar-inner"> <a class="studio__brand" href="/__pyric/ui/" aria-label="Pyric Studio">Pyric</a> <nav class="studio__nav" aria-label="Studio tabs"> <a class="studio__nav-tab" href="/__pyric/ui/"> Home </a><a class="studio__nav-tab" href="/__pyric/ui/firestore"> Firestore </a><a class="studio__nav-tab" href="/__pyric/ui/auth"> Auth </a><a class="studio__nav-tab" href="/__pyric/ui/rtdb"> RTDB </a><a class="studio__nav-tab" href="/__pyric/ui/storage"> Storage </a><a class="studio__nav-tab" href="/__pyric/ui/traffic"> Traffic </a><a class="studio__nav-tab" href="/__pyric/ui/settings"> Settings </a><a class="studio__nav-tab" href="/__pyric/ui/docs" aria-current="page"> Docs </a> </nav> </div> </header> <div class="docs-shell">  <details class="docs-nav-drawer"> <summary>Navigate</summary> <nav class="docs-nav" aria-label="Documentation"> <div class="docs-search" data-index-url="/__pyric/ui/docs/index.json"> <div class="docs-search-field"> <svg class="docs-search-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"> <path d="M11.5 11.5 15 15M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path> </svg> <input type="text" class="docs-search-input" placeholder="Search docs" aria-label="Search docs" autocomplete="off" spellcheck="false"> <kbd class="docs-search-kbd">⌘K</kbd> </div> <ul class="docs-search-results" hidden></ul> </div> <script type="module">let i=null;function d(t){return i||(i=fetch(t).then(e=>e.json())),i}function l(t,e){return t.title.toLowerCase().includes(e)||t.excerpt.toLowerCase().includes(e)?!0:t.headings.some(r=>r.text.toLowerCase().includes(e))}function u(t,e,r){if(e.innerHTML="",t.length===0){e.hidden=!1;{const n=document.createElement("li");n.className="docs-search-empty",n.textContent="No matches",e.appendChild(n)}return}e.hidden=!1;for(const n of t.slice(0,8)){const s=document.createElement("li"),c=document.createElement("a");c.href=n.path;const o=document.createElement("span");o.className="docs-search-result-title",o.textContent=n.title;const a=document.createElement("span");a.className="docs-search-result-meta",a.textContent=[n.group,n.section].filter(Boolean).join(" / "),c.append(o,a),s.appendChild(c),e.appendChild(s)}}document.querySelectorAll(".docs-search").forEach(t=>{const e=t.dataset.indexUrl,r=t.querySelector(".docs-search-input"),n=t.querySelector(".docs-search-results");r.addEventListener("input",async()=>{const s=r.value.trim().toLowerCase();if(!s){n.hidden=!0,n.innerHTML="";return}const{pages:c}=await d(e);r.value.trim().toLowerCase()===s&&u(c.filter(o=>l(o,s)),n)}),r.addEventListener("focus",()=>{d(e),n.childElementCount>0&&(n.hidden=!1)}),r.addEventListener("keydown",s=>{s.key==="Escape"&&(r.value="",n.hidden=!0,n.innerHTML="",r.blur())}),r.addEventListener("blur",()=>{window.setTimeout(()=>{n.hidden=!0},150)})});document.addEventListener("keydown",t=>{if(!(t.metaKey||t.ctrlKey)||t.key.toLowerCase()!=="k")return;const e=[...document.querySelectorAll(".docs-search-input")].find(r=>r.offsetParent!==null);e&&(t.preventDefault(),e.focus(),e.select())});</script> <a class="docs-nav-toplink" href="/__pyric/ui/docs/overview/"> Overview </a><details class="docs-nav-group"> <summary>Run locally</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/how-the-swap-works/"> How the swap works </a> </li><li> <a href="/__pyric/ui/docs/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Develop with Firebase APIs</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/sign-in-and-manage-users/"> Sign in and manage users </a> </li><li> <a href="/__pyric/ui/docs/store-and-query-data/"> Store and query data </a> </li><li> <a href="/__pyric/ui/docs/sync-realtime-data/"> Sync realtime data </a> </li><li> <a href="/__pyric/ui/docs/store-files/"> Store files </a> </li><li> <a href="/__pyric/ui/docs/receive-messages/"> Receive messages </a> </li><li> <a href="/__pyric/ui/docs/run-ai-logic-locally/"> Run AI Logic locally </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-how-to-run-rtdb-onvaluecreated/"> Run an RTDB function locally </a> </li><li> <a href="/__pyric/ui/docs/which-data-service/"> Which data service? </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Inspect and correct</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <h2 class="docs-nav-heading"> Inspect the sandbox </h2> <ul> <li> <a href="/__pyric/ui/docs/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/shape-your-data/"> Seed, snapshot, replay </a> </li><li> <a href="/__pyric/ui/docs/watch-and-review/"> Review agent activity </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Correct Security Rules </h2> <ul> <li> <a href="/__pyric/ui/docs/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/rules-patterns/"> Rules patterns </a> </li><li> <a href="/__pyric/ui/docs/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/whats-possible/"> Case studies </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Work with an agent </h2> <ul> <li> <a href="/__pyric/ui/docs/what-your-agent-can-do/"> Work through an agent </a> </li><li> <a href="/__pyric/ui/docs/skills/"> Agent skills </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Verify the boundary</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-how-to-verify-against-a-captured-session/"> Verify a captured session </a> </li><li> <a href="/__pyric/ui/docs/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Ship unchanged</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/set-up-the-project/"> Set up the Firebase project </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Conformance</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/how-we-know-it-matches-firebase/"> Conformance </a> </li><li> <a href="/__pyric/ui/docs/whats-experimental/"> What&#39;s experimental </a> </li><li> <a href="/__pyric/ui/docs/pyric-conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/pyric-app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-compat/"> Rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-functions-rtdb-compat/"> Functions · RTDB </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" open> <summary>Reference</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli/"> @pyric/cli </a> </li><li> <a href="/__pyric/ui/docs/pyric-explanation-versioning-and-compatibility/"> pyric </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore/"> pyric / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules/"> pyric / rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox/"> pyric / sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage/"> pyric / storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth/"> pyric / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database/"> pyric / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app/"> pyric-admin / app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore/"> pyric-admin / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth/"> pyric-admin / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database/"> pyric-admin / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage/"> pyric-admin / storage </a> </li><li> <a href="/__pyric/ui/docs/ui/" aria-current="true"> @pyric/ui </a> </li><li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div> </div> </details> </nav> </details> <nav class="docs-nav" aria-label="Documentation"> <div class="docs-search" data-index-url="/__pyric/ui/docs/index.json"> <div class="docs-search-field"> <svg class="docs-search-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"> <path d="M11.5 11.5 15 15M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path> </svg> <input type="text" class="docs-search-input" placeholder="Search docs" aria-label="Search docs" autocomplete="off" spellcheck="false"> <kbd class="docs-search-kbd">⌘K</kbd> </div> <ul class="docs-search-results" hidden></ul> </div>  <a class="docs-nav-toplink" href="/__pyric/ui/docs/overview/" id="nav-group-overview"> Overview </a><details class="docs-nav-group" id="nav-group-run-locally"> <summary>Run locally</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/how-the-swap-works/"> How the swap works </a> </li><li> <a href="/__pyric/ui/docs/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-develop-with-firebase-apis"> <summary>Develop with Firebase APIs</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/sign-in-and-manage-users/"> Sign in and manage users </a> </li><li> <a href="/__pyric/ui/docs/store-and-query-data/"> Store and query data </a> </li><li> <a href="/__pyric/ui/docs/sync-realtime-data/"> Sync realtime data </a> </li><li> <a href="/__pyric/ui/docs/store-files/"> Store files </a> </li><li> <a href="/__pyric/ui/docs/receive-messages/"> Receive messages </a> </li><li> <a href="/__pyric/ui/docs/run-ai-logic-locally/"> Run AI Logic locally </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-how-to-run-rtdb-onvaluecreated/"> Run an RTDB function locally </a> </li><li> <a href="/__pyric/ui/docs/which-data-service/"> Which data service? </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-inspect-and-correct"> <summary>Inspect and correct</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-inspect-the-sandbox"> Inspect the sandbox </h2> <ul> <li> <a href="/__pyric/ui/docs/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/shape-your-data/"> Seed, snapshot, replay </a> </li><li> <a href="/__pyric/ui/docs/watch-and-review/"> Review agent activity </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-correct-security-rules"> Correct Security Rules </h2> <ul> <li> <a href="/__pyric/ui/docs/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/rules-patterns/"> Rules patterns </a> </li><li> <a href="/__pyric/ui/docs/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/whats-possible/"> Case studies </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-inspect-and-correct-work-with-an-agent"> Work with an agent </h2> <ul> <li> <a href="/__pyric/ui/docs/what-your-agent-can-do/"> Work through an agent </a> </li><li> <a href="/__pyric/ui/docs/skills/"> Agent skills </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-verify-the-boundary"> <summary>Verify the boundary</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-how-to-verify-against-a-captured-session/"> Verify a captured session </a> </li><li> <a href="/__pyric/ui/docs/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-ship-unchanged"> <summary>Ship unchanged</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/set-up-the-project/"> Set up the Firebase project </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-conformance"> <summary>Conformance</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/how-we-know-it-matches-firebase/"> Conformance </a> </li><li> <a href="/__pyric/ui/docs/whats-experimental/"> What&#39;s experimental </a> </li><li> <a href="/__pyric/ui/docs/pyric-conformance-scores/"> Conformance scores </a> </li><li> <a href="/__pyric/ui/docs/pyric-app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-compat/"> Rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-functions-rtdb-compat/"> Functions · RTDB </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" id="nav-group-reference" open> <summary>Reference</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section"> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli/"> @pyric/cli </a> </li><li> <a href="/__pyric/ui/docs/pyric-explanation-versioning-and-compatibility/"> pyric </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore/"> pyric / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules/"> pyric / rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox/"> pyric / sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage/"> pyric / storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth/"> pyric / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-database/"> pyric / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-app/"> pyric-admin / app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore/"> pyric-admin / firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth/"> pyric-admin / auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database/"> pyric-admin / database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage/"> pyric-admin / storage </a> </li><li> <a href="/__pyric/ui/docs/ui/" aria-current="true"> @pyric/ui </a> </li><li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div> </div> </details> </nav> <main class="doc-main"> <nav class="docs-breadcrumbs" aria-label="Breadcrumb"> <ol> <li>  <a href="/__pyric/ui/docs/ui/">@pyric/ui</a> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span>Firestore</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">&lt;DocumentList&gt;</span> </li> </ol> </nav>  <article class="prose">  <h1 id="documentlist"><code>&#x3C;DocumentList></code></h1>
+<p>Headless list renderer for documents in a collection. Above <code>virtualizeThreshold</code> (default 100), switches to virtualized rendering via <code>&#x3C;VirtualList></code>; below, renders a plain <code>&#x3C;ul></code>.</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">DocumentList</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/firestore'</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h2 id="example">Example</h2>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">useDocumentList</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/firestore/hooks'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> DocsPane</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75;font-style:italic">collection</span><span style="color:#ABB2BF"> }) {</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#ABB2BF"> {</span></span>
+<span class="line"><span style="color:#E5C07B">    documents</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E5C07B">    hasMore</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E5C07B">    loadMore</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E5C07B">    isLoading</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E5C07B">    error</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#ABB2BF">  } </span><span style="color:#56B6C2">=</span><span style="color:#61AFEF"> useDocumentList</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">collection</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">pageSize</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">50</span><span style="color:#ABB2BF"> });</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C678DD">  return</span><span style="color:#ABB2BF"> (</span></span>
+<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E5C07B">DocumentList</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">      documents</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">documents</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">      isLoading</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">isLoading</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">      error</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">error</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">      hasMore</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">hasMore</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">      onLoadMore</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">loadMore</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">      onSelect</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">ref</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#61AFEF"> navigate</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">ref</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">path</span><span style="color:#ABB2BF">)</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">      renderLabel</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">doc</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> (</span></span>
+<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">span</span><span style="color:#D19A66;font-style:italic"> className</span><span style="color:#56B6C2">=</span><span style="color:#98C379">"flex justify-between"</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">          &#x3C;</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">></span><span style="color:#C678DD">{</span><span style="color:#E5C07B">doc</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">id</span><span style="color:#C678DD">}</span><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">          &#x3C;</span><span style="color:#E06C75">span</span><span style="color:#D19A66;font-style:italic"> className</span><span style="color:#56B6C2">=</span><span style="color:#98C379">"text-gray-500"</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#C678DD">            {</span><span style="color:#E5C07B">Object</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">keys</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">doc</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">data</span><span style="color:#ABB2BF">() </span><span style="color:#56B6C2">??</span><span style="color:#ABB2BF"> {}).</span><span style="color:#E06C75">length</span><span style="color:#C678DD">}</span><span style="color:#ABB2BF"> fields</span></span>
+<span class="line"><span style="color:#ABB2BF">          &#x3C;/</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">        &#x3C;/</span><span style="color:#E06C75">span</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">      )</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#ABB2BF">    /></span></span>
+<span class="line"><span style="color:#ABB2BF">  );</span></span>
+<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
+<h2 id="props">Props</h2>
+<div class="table-scroll">
+<table><thead><tr><th>Prop</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>documents</code></td><td><code>QueryDocumentSnapshot[]</code></td><td>The list to render.</td></tr><tr><td><code>isLoading</code></td><td><code>boolean</code></td><td>Renders the loading state when no documents yet.</td></tr><tr><td><code>error</code></td><td><code>Error</code></td><td>Renders an <code>role="alert"</code> container.</td></tr><tr><td><code>hasMore</code></td><td><code>boolean</code></td><td>If true AND <code>onLoadMore</code> is provided, renders a Load More button.</td></tr><tr><td><code>onSelect</code></td><td><code>(ref: DocumentReference) => void</code></td><td>Fired on row click.</td></tr><tr><td><code>onLoadMore</code></td><td><code>() => void</code></td><td>Wire to <code>useDocumentList.loadMore</code>. Button is hidden if not provided.</td></tr><tr><td><code>renderLabel</code></td><td><code>(doc: QueryDocumentSnapshot) => ReactNode</code></td><td>Optional row-label override. Default renders <code>doc.id</code>.</td></tr><tr><td><code>emptyState</code></td><td><code>ReactNode</code></td><td>Rendered when no documents.</td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Forwarded to the root.</td></tr><tr><td><code>virtualizeThreshold</code></td><td><code>number</code></td><td>Default <code>100</code>. Set to <code>Infinity</code> to disable virtualization.</td></tr><tr><td><code>rowHeight</code></td><td><code>number | (i: number) => number</code></td><td>Default <code>36</code>. TanStack measures real heights after first paint regardless.</td></tr><tr><td><code>virtualizedHeight</code></td><td><code>number | string</code></td><td>Scroll-container height when virtualized. Default <code>'60vh'</code>.</td></tr></tbody></table></div>
+<h2 id="pagination">Pagination</h2>
+<p><code>useDocumentList</code> exposes cursor-based pagination via <code>startAfter()</code> under the hood. The consumer never sees cursors — just <code>documents</code> (accumulating across pages), <code>hasMore</code>, and <code>loadMore()</code>.</p>
+<p>This is <strong>read-via-get, not realtime.</strong> For realtime, use <code>useFirestoreCollection(query)</code> directly. Combining pagination + realtime is non-trivial; deferred until a real use case demands it.</p>
+<h2 id="styling-hooks">Styling hooks</h2>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="plaintext"><code><span class="line"><span>[data-pyric-ui="document-list"]</span></span>
+<span class="line"><span>[data-pyric-ui="document-list"][data-pyric-loading]</span></span>
+<span class="line"><span>[data-pyric-ui="document-list"][data-pyric-empty]</span></span>
+<span class="line"><span>[data-pyric-ui="document-list"][data-pyric-error]</span></span>
+<span class="line"><span>[data-pyric-ui="document-list"][data-pyric-virtualized]</span></span>
+<span class="line"><span>[data-pyric-document-list-items]      /* the &#x3C;ul> in non-virtualized mode */</span></span>
+<span class="line"><span>[data-pyric-document-entry]</span></span>
+<span class="line"><span>[data-pyric-document-entry][data-pyric-document-id="alice"]</span></span>
+<span class="line"><span>[data-pyric-document-select]</span></span>
+<span class="line"><span>[data-pyric-load-more]</span></span></code></pre>
+<h2 id="notes">Notes</h2>
+<ul>
+<li><strong>Infinite scroll</strong> isn’t built in. Wire your own <code>IntersectionObserver</code> against the last rendered row’s element and call <code>onLoadMore</code> when it intersects.</li>
+<li><strong><code>renderLabel</code> runs per row</strong> — keep it cheap (no async work). React.memo around your custom label is fine if you need it.</li>
+<li><strong>Snapshot <code>.ref</code> access</strong> uses a structural cast under the hood — both backend shapes carry it at runtime but <code>pyric/firestore</code>’s modular interface omits it. Safe for both sandbox and prod refs.</li>
+</ul>
+<h2 id="see-also">See also</h2>
+<ul>
+<li><a href="../ui-firestore-collectionlist/"><code>&#x3C;CollectionList></code></a> — the collections-under-parent counterpart.</li>
+<li><a href="../ui-primitives-virtuallist/"><code>&#x3C;VirtualList></code></a> — the underlying virtualizer.</li>
+<li><code>useDocumentList</code>, <code>useFirestoreCollection</code> — data sources.</li>
+</ul>  </article> </main> <aside class="doc-toc" aria-label="On this page"> <h2 class="doc-toc-heading">On this page</h2> <ul> <li data-depth="2"> <a href="#example">Example</a> </li><li data-depth="2"> <a href="#props">Props</a> </li><li data-depth="2"> <a href="#pagination">Pagination</a> </li><li data-depth="2"> <a href="#styling-hooks">Styling hooks</a> </li><li data-depth="2"> <a href="#notes">Notes</a> </li><li data-depth="2"> <a href="#see-also">See also</a> </li> </ul> </aside> </div> <script type="module">const a=document.querySelector("[data-api-symbol-filter]"),d=[...document.querySelectorAll("[data-api-symbol-group]")],n=document.querySelector("[data-api-symbol-empty]");a?.addEventListener("input",()=>{const t=a.value.trim().toLowerCase();let o=0;for(const i of d){let e=0;i.querySelectorAll("[data-api-symbol]").forEach(l=>{const r=!t||(l.dataset.apiSymbol??"").includes(t);l.hidden=!r,r&&e++}),i.hidden=e===0,o+=e}n&&(n.hidden=o>0)});</script> <script type="module">const s=new Map;document.querySelectorAll('.doc-toc a[href^="#"]').forEach(t=>s.set(decodeURIComponent(t.hash.slice(1)),t));if(s.size>0){const t=new Set,n=()=>{let o=null;for(const e of s.keys())if(t.has(e)){o=e;break}s.forEach((e,c)=>e.classList.toggle("active",c===o))},r=new IntersectionObserver(o=>{for(const e of o)e.isIntersecting?t.add(e.target.id):t.delete(e.target.id);n()},{rootMargin:"-72px 0px -60% 0px"});s.forEach((o,e)=>{const c=document.getElementById(e);c&&r.observe(c)})}</script> <script type="module">document.querySelector('.studio__nav [aria-current="page"]')?.scrollIntoView({block:"nearest",inline:"center"});</script> </body> </html>