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-auth-authusers/index.html ADDED Viewed

@@ -0,0 +1,263 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Auth users admin — useAuthUsers, &lt;AuthUserList&gt;, &lt;AuthUserForm&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>Auth</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">Auth users admin</span> </li> </ol> </nav>  <article class="prose">  <h1 id="auth-users-admin--useauthusers-authuserlist-authuserform">Auth users admin — <code>useAuthUsers</code>, <code>&#x3C;AuthUserList></code>, <code>&#x3C;AuthUserForm></code></h1>
+<p>Emulator-style user administration for a sandbox <code>Auth</code> handle: a live
+users table, an add/edit form with emulator-grade validation, and
+confirm-gated destructive actions.</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>
+<span class="line"><span style="color:#E06C75">  useAuthUsers</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  useAuthUserEditor</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  AuthUserList</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  AuthUserForm</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  ClaimsField</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  DeleteUserWithConfirm</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  ClearUsersWithConfirm</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#ABB2BF">} </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/auth'</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Sandbox-only (drives <code>sandbox.listUsers</code> / <code>subscribeUsers</code> / CRUD, which
+throw <code>failed-precondition</code> on prod-backed handles — the hook surfaces
+that via <code>error</code>).</p>
+<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">getAuth</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> 'pyric/auth'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">ConfirmProvider</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/primitives'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#C678DD">import</span><span style="color:#ABB2BF"> {</span></span>
+<span class="line"><span style="color:#E06C75">  useAuthUsers</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  AuthUserList</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  AuthUserForm</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  DeleteUserWithConfirm</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  ClearUsersWithConfirm</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#ABB2BF">} </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/auth'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> AuthTab</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75;font-style:italic">sandbox</span><span style="color:#ABB2BF"> }) {</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> auth</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> getAuth</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">sandbox</span><span style="color:#ABB2BF">);</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> users</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useAuthUsers</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">auth</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">editing</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">setEditing</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#61AFEF"> useState</span><span style="color:#ABB2BF">();   </span><span style="color:#7F848E;font-style:italic">// AuthUserRecord | 'new' | undefined</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">ConfirmProvider</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;</span><span style="color:#E06C75">input</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        value</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">users</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">filter</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        onChange</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">e</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#E5C07B"> users</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">setFilter</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">e</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">target</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">value</span><span style="color:#ABB2BF">)</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        placeholder</span><span style="color:#56B6C2">=</span><span style="color:#98C379">"Search by email, name, uid…"</span></span>
+<span class="line"><span style="color:#ABB2BF">      /></span></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;</span><span style="color:#E5C07B">ClearUsersWithConfirm</span><span style="color:#D19A66;font-style:italic"> onClear</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">users</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">clearUsers</span><span style="color:#C678DD">}</span><span style="color:#D19A66;font-style:italic"> count</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">users</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">totalCount</span><span style="color:#C678DD">}</span><span style="color:#ABB2BF"> /></span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;</span><span style="color:#E5C07B">AuthUserList</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        users</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">users</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">users</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:#E5C07B">users</span><span style="color:#ABB2BF">.</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:#E5C07B">users</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">error</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        filter</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">users</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">filter</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:#E06C75">setEditing</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        renderActions</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">u</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:#E5C07B">DeleteUserWithConfirm</span><span style="color:#D19A66;font-style:italic"> user</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">u</span><span style="color:#C678DD">}</span><span style="color:#D19A66;font-style:italic"> onDelete</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">users</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">deleteUser</span><span style="color:#C678DD">}</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>
+<span class="line"><span style="color:#C678DD">      {</span><span style="color:#E06C75">editing</span><span style="color:#56B6C2"> &#x26;&#x26;</span><span style="color:#ABB2BF"> (</span></span>
+<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E5C07B">AuthUserForm</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          initial</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">editing</span><span style="color:#56B6C2"> ===</span><span style="color:#98C379"> 'new'</span><span style="color:#C678DD"> ?</span><span style="color:#D19A66"> undefined</span><span style="color:#C678DD"> :</span><span style="color:#E06C75"> editing</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          onCancel</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">() </span><span style="color:#C678DD">=></span><span style="color:#61AFEF"> setEditing</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">undefined</span><span style="color:#ABB2BF">)</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          onSubmit</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">s</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
+<span class="line"><span style="color:#C678DD">            if</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">s</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">mode</span><span style="color:#56B6C2"> ===</span><span style="color:#98C379"> 'create'</span><span style="color:#ABB2BF">) </span><span style="color:#E5C07B">users</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">createUser</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">s</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">request</span><span style="color:#ABB2BF">);</span></span>
+<span class="line"><span style="color:#C678DD">            else</span><span style="color:#E5C07B"> users</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">updateUser</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">s</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">uid</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">s</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">request</span><span style="color:#ABB2BF">);</span></span>
+<span class="line"><span style="color:#61AFEF">            setEditing</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">undefined</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 style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E5C07B">ConfirmProvider</span><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="useauthusersauth"><code>useAuthUsers(auth)</code></h2>
+<div class="table-scroll">
+<table><thead><tr><th>Returns</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>users</code></td><td><code>AuthUserRecord[]</code></td><td>Filtered view. Live — any user-DB mutation (these actions, the running app’s sign-ups, agent seeding) re-lists via <code>subscribeUsers</code>.</td></tr><tr><td><code>totalCount</code></td><td><code>number</code></td><td>Unfiltered count (distinguishes “no users” from “no results”).</td></tr><tr><td><code>isLoading</code> / <code>error</code></td><td></td><td>Subscription state. Mutation errors <strong>throw to the caller</strong> instead.</td></tr><tr><td><code>filter</code> / <code>setFilter</code></td><td><code>string</code></td><td>Case-insensitive substring over uid / email / display name / phone.</td></tr><tr><td><code>createUser</code></td><td><code>(req: CreateUserRequest) => AuthUserRecord</code></td><td></td></tr><tr><td><code>updateUser</code></td><td><code>(uid, update: UpdateUserRequest) => AuthUserRecord</code></td><td></td></tr><tr><td><code>deleteUser</code> / <code>clearUsers</code> / <code>refresh</code></td><td></td><td></td></tr></tbody></table></div>
+<h2 id="useauthusereditor-initial"><code>useAuthUserEditor({ initial? })</code></h2>
+<p>Reducer-backed form state (like <code>useDocumentEditor</code>): <code>{fields, errors, isDirty, isValid, setField, reset, toCreateRequest, toUpdateRequest}</code>.
+Validation messages match the emulator UI (“Invalid email”, “Password
+should be at least 6 characters”, “Email is required for password
+authentication”, claims messages). The pure reducer
+(<code>authUserEditorReducer</code>, <code>initAuthUserEditorState</code>, …) is exported for
+non-React drivers.</p>
+<h2 id="authuserlist-props"><code>&#x3C;AuthUserList></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>users</code></td><td><code>AuthUserRecord[]</code></td><td>Usually <code>useAuthUsers().users</code>.</td></tr><tr><td><code>isLoading</code> / <code>error</code></td><td></td><td>Loading / <code>role="alert"</code> states.</td></tr><tr><td><code>filter</code></td><td><code>string</code></td><td>Picks the zero state: “No users for this project yet” vs “No results” (<code>data-pyric-no-results</code>).</td></tr><tr><td><code>onSelect</code></td><td><code>(user) => void</code></td><td>Identifier cell becomes a button.</td></tr><tr><td><code>renderIdentifier</code> / <code>renderProviders</code> / <code>renderActions</code></td><td>render props</td><td>Cell overrides; actions add a trailing column.</td></tr><tr><td><code>formatCreatedAt</code></td><td><code>(iso | null) => ReactNode</code></td><td>Created-time formatter. Default: locale date, em dash for null.</td></tr><tr><td><code>formatLastLoginAt</code></td><td><code>(iso | null) => ReactNode</code></td><td>Last-sign-in formatter. Kept separate so consumers can render a null login as “never”.</td></tr><tr><td><code>emptyState</code> / <code>noResultsState</code></td><td><code>ReactNode</code></td><td>Copy overrides.</td></tr><tr><td><code>virtualizeThreshold</code> / <code>rowHeight</code> / <code>virtualizedHeight</code></td><td></td><td>Virtualizes >100 rows via <code>&#x3C;VirtualList></code>.</td></tr></tbody></table></div>
+<p>Columns mirror the emulator UI: Identifier, Provider, Created, Signed In,
+User UID (+ actions). Disabled accounts carry <code>data-pyric-user-disabled</code>.</p>
+<h2 id="authuserform-props"><code>&#x3C;AuthUserForm></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>AuthUserRecord</code></td><td>Edit mode (delta payloads); omit for create.</td></tr><tr><td><code>onSubmit</code></td><td><code>(s: AuthUserFormSubmit) => void</code></td><td><code>{mode:'create', request}</code> or <code>{mode:'edit', uid, request}</code>.</td></tr><tr><td><code>onCancel</code></td><td><code>() => void</code></td><td>Renders the cancel button when present.</td></tr><tr><td><code>submitLabel</code> / <code>cancelLabel</code> / <code>children</code> / <code>className</code></td><td></td><td><code>children</code> renders before the action row (e.g. backend errors).</td></tr><tr><td><code>renderField</code></td><td><code>(f: AuthUserFormField) => ReactNode</code></td><td>Per-field layout override. <code>f</code> carries <code>{name, label, input, error, kind, defaultRender}</code> — place <code>f.input</code> anywhere (it stays wired to the editor state) or call <code>f.defaultRender()</code> to keep the stock label wrapper for fields you don’t customize. Claims is not a slot field (compose <code>useAuthUserEditor</code> to move it).</td></tr></tbody></table></div>
+<p>State attrs <code>data-pyric-mode</code>, <code>data-pyric-is-dirty</code>, <code>data-pyric-is-valid</code>;
+fields <code>[data-pyric-field="email" | "password" | "display-name" | "phone-number" | "photo-url" | "email-verified" | "disabled" | "claims"]</code>;
+per-field <code>[data-pyric-field-error]</code> alerts. Submit is disabled while
+invalid, or pristine in edit mode.</p>
+<p>Every field is wrapped in <code>label[data-pyric-field-label="&#x3C;name>"]</code>
+containing a visible <code>span[data-pyric-label-text]</code> and (for email/password)
+the field’s error alert — so a labeled grid layout is pure CSS:</p>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="css"><code><span class="line"><span style="color:#C678DD">[</span><span style="color:#D19A66">data-pyric-ui</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">'auth-user-form'</span><span style="color:#C678DD">] [</span><span style="color:#D19A66">data-pyric-field-label</span><span style="color:#C678DD">]</span><span style="color:#ABB2BF"> {</span></span>
+<span class="line"><span style="color:#ABB2BF">  display: </span><span style="color:#D19A66">grid</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#ABB2BF">  gap: </span><span style="color:#D19A66">0.25</span><span style="color:#E06C75">rem</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#ABB2BF">}</span></span>
+<span class="line"><span style="color:#7F848E;font-style:italic">/* label-less design: hide the text, lean on the placeholders */</span></span>
+<span class="line"><span style="color:#C678DD">[</span><span style="color:#D19A66">data-pyric-ui</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">'auth-user-form'</span><span style="color:#C678DD">] [</span><span style="color:#D19A66">data-pyric-label-text</span><span style="color:#C678DD">]</span><span style="color:#ABB2BF"> {</span></span>
+<span class="line"><span style="color:#ABB2BF">  display: </span><span style="color:#D19A66">none</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
+<p>For layout beyond CSS reach (two-column grids with mixed groupings, custom
+label/error placement), use the <code>renderField</code> slot:</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:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">AuthUserForm</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">  onSubmit</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">save</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">  renderField</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">f</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span></span>
+<span class="line"><span style="color:#E5C07B">    f</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">kind</span><span style="color:#56B6C2"> ===</span><span style="color:#98C379"> 'checkbox'</span><span style="color:#C678DD"> ?</span><span style="color:#ABB2BF"> (</span></span>
+<span class="line"><span style="color:#E5C07B">      f</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">defaultRender</span><span style="color:#ABB2BF">()</span></span>
+<span class="line"><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">div</span><span style="color:#D19A66;font-style:italic"> className</span><span style="color:#56B6C2">=</span><span style="color:#98C379">"grid grid-cols-[10rem_1fr] items-center gap-2"</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-xs uppercase"</span><span style="color:#ABB2BF">></span><span style="color:#C678DD">{</span><span style="color:#E5C07B">f</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">label</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:#C678DD">        {</span><span style="color:#E5C07B">f</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">input</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#C678DD">        {</span><span style="color:#E5C07B">f</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">error</span><span style="color:#56B6C2"> &#x26;&#x26;</span><span style="color:#ABB2BF"> &#x3C;</span><span style="color:#E06C75">p</span><span style="color:#D19A66;font-style:italic"> role</span><span style="color:#56B6C2">=</span><span style="color:#98C379">"alert"</span><span style="color:#D19A66;font-style:italic"> className</span><span style="color:#56B6C2">=</span><span style="color:#98C379">"col-start-2"</span><span style="color:#ABB2BF">></span><span style="color:#C678DD">{</span><span style="color:#E5C07B">f</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">error</span><span style="color:#C678DD">}</span><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">p</span><span style="color:#ABB2BF">></span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">    )</span></span>
+<span class="line"><span style="color:#C678DD">  }</span></span>
+<span class="line"><span style="color:#ABB2BF">/></span></span></code></pre>
+<h2 id="destructive-actions">Destructive actions</h2>
+<p><code>&#x3C;DeleteUserWithConfirm user onDelete></code> and
+<code>&#x3C;ClearUsersWithConfirm onClear count?></code> require a <code>&#x3C;ConfirmProvider></code>
+ancestor; both accept <code>title</code> / <code>body</code> / <code>confirmLabel</code> / <code>renderTrigger</code>.
+Default triggers carry <code>data-pyric-destructive</code>.</p>
+<h2 id="gotchas">Gotchas</h2>
+<ul>
+<li>Mutation errors (e.g. <code>auth/uid-already-exists</code>, <code>auth/user-not-found</code>)
+throw from the action — catch at the call site; the hook’s <code>error</code> is
+only for subscription setup failures.</li>
+<li><code>updateUser</code>’s <code>customClaims</code> replaces the whole map
+(<code>setCustomUserClaims</code> semantics); the editor’s <code>toUpdateRequest</code> emits
+<code>{}</code> when the claims textarea is cleared.</li>
+<li>Disabled users reject sign-in with <code>auth/user-disabled</code> (faithful) —
+the table only dims them.</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="#useauthusersauth">useAuthUsers(auth)</a> </li><li data-depth="2"> <a href="#useauthusereditor-initial">useAuthUserEditor({ initial? })</a> </li><li data-depth="2"> <a href="#authuserlist-props">&lt;AuthUserList&gt; props</a> </li><li data-depth="2"> <a href="#authuserform-props">&lt;AuthUserForm&gt; props</a> </li><li data-depth="2"> <a href="#destructive-actions">Destructive actions</a> </li><li data-depth="2"> <a href="#gotchas">Gotchas</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-auth-authusers.md ADDED Viewed

@@ -0,0 +1,183 @@
+# Auth users admin — `useAuthUsers`, `<AuthUserList>`, `<AuthUserForm>`
+Emulator-style user administration for a sandbox `Auth` handle: a live
+users table, an add/edit form with emulator-grade validation, and
+confirm-gated destructive actions.
+```ts
+import {
+  useAuthUsers,
+  useAuthUserEditor,
+  AuthUserList,
+  AuthUserForm,
+  ClaimsField,
+  DeleteUserWithConfirm,
+  ClearUsersWithConfirm,
+} from '@pyric/ui/auth';
+```
+Sandbox-only (drives `sandbox.listUsers` / `subscribeUsers` / CRUD, which
+throw `failed-precondition` on prod-backed handles — the hook surfaces
+that via `error`).
+## Example
+```tsx
+import { getAuth } from 'pyric/auth';
+import { ConfirmProvider } from '@pyric/ui/primitives';
+import {
+  useAuthUsers,
+  AuthUserList,
+  AuthUserForm,
+  DeleteUserWithConfirm,
+  ClearUsersWithConfirm,
+} from '@pyric/ui/auth';
+function AuthTab({ sandbox }) {
+  const auth = getAuth(sandbox);
+  const users = useAuthUsers(auth);
+  const [editing, setEditing] = useState();   // AuthUserRecord | 'new' | undefined
+  return (
+    <ConfirmProvider>
+      <input
+        value={users.filter}
+        onChange={(e) => users.setFilter(e.target.value)}
+        placeholder="Search by email, name, uid…"
+      />
+      <ClearUsersWithConfirm onClear={users.clearUsers} count={users.totalCount} />
+      <AuthUserList
+        users={users.users}
+        isLoading={users.isLoading}
+        error={users.error}
+        filter={users.filter}
+        onSelect={setEditing}
+        renderActions={(u) => (
+          <DeleteUserWithConfirm user={u} onDelete={users.deleteUser} />
+        )}
+      />
+      {editing && (
+        <AuthUserForm
+          initial={editing === 'new' ? undefined : editing}
+          onCancel={() => setEditing(undefined)}
+          onSubmit={(s) => {
+            if (s.mode === 'create') users.createUser(s.request);
+            else users.updateUser(s.uid, s.request);
+            setEditing(undefined);
+          }}
+        />
+      )}
+    </ConfirmProvider>
+  );
+}
+```
+## `useAuthUsers(auth)`
+| Returns | Type | Description |
+|---|---|---|
+| `users` | `AuthUserRecord[]` | Filtered view. Live — any user-DB mutation (these actions, the running app's sign-ups, agent seeding) re-lists via `subscribeUsers`. |
+| `totalCount` | `number` | Unfiltered count (distinguishes "no users" from "no results"). |
+| `isLoading` / `error` | | Subscription state. Mutation errors **throw to the caller** instead. |
+| `filter` / `setFilter` | `string` | Case-insensitive substring over uid / email / display name / phone. |
+| `createUser` | `(req: CreateUserRequest) => AuthUserRecord` | |
+| `updateUser` | `(uid, update: UpdateUserRequest) => AuthUserRecord` | |
+| `deleteUser` / `clearUsers` / `refresh` | | |
+## `useAuthUserEditor({ initial? })`
+Reducer-backed form state (like `useDocumentEditor`): `{fields, errors,
+isDirty, isValid, setField, reset, toCreateRequest, toUpdateRequest}`.
+Validation messages match the emulator UI ("Invalid email", "Password
+should be at least 6 characters", "Email is required for password
+authentication", claims messages). The pure reducer
+(`authUserEditorReducer`, `initAuthUserEditorState`, …) is exported for
+non-React drivers.
+## `<AuthUserList>` props
+| Prop | Type | Description |
+|---|---|---|
+| `users` | `AuthUserRecord[]` | Usually `useAuthUsers().users`. |
+| `isLoading` / `error` | | Loading / `role="alert"` states. |
+| `filter` | `string` | Picks the zero state: "No users for this project yet" vs "No results" (`data-pyric-no-results`). |
+| `onSelect` | `(user) => void` | Identifier cell becomes a button. |
+| `renderIdentifier` / `renderProviders` / `renderActions` | render props | Cell overrides; actions add a trailing column. |
+| `formatCreatedAt` | `(iso \| null) => ReactNode` | Created-time formatter. Default: locale date, em dash for null. |
+| `formatLastLoginAt` | `(iso \| null) => ReactNode` | Last-sign-in formatter. Kept separate so consumers can render a null login as "never". |
+| `emptyState` / `noResultsState` | `ReactNode` | Copy overrides. |
+| `virtualizeThreshold` / `rowHeight` / `virtualizedHeight` | | Virtualizes >100 rows via `<VirtualList>`. |
+Columns mirror the emulator UI: Identifier, Provider, Created, Signed In,
+User UID (+ actions). Disabled accounts carry `data-pyric-user-disabled`.
+## `<AuthUserForm>` props
+| Prop | Type | Description |
+|---|---|---|
+| `initial` | `AuthUserRecord` | Edit mode (delta payloads); omit for create. |
+| `onSubmit` | `(s: AuthUserFormSubmit) => void` | `{mode:'create', request}` or `{mode:'edit', uid, request}`. |
+| `onCancel` | `() => void` | Renders the cancel button when present. |
+| `submitLabel` / `cancelLabel` / `children` / `className` | | `children` renders before the action row (e.g. backend errors). |
+| `renderField` | `(f: AuthUserFormField) => ReactNode` | Per-field layout override. `f` carries `{name, label, input, error, kind, defaultRender}` — place `f.input` anywhere (it stays wired to the editor state) or call `f.defaultRender()` to keep the stock label wrapper for fields you don't customize. Claims is not a slot field (compose `useAuthUserEditor` to move it). |
+State attrs `data-pyric-mode`, `data-pyric-is-dirty`, `data-pyric-is-valid`;
+fields `[data-pyric-field="email" | "password" | "display-name" |
+"phone-number" | "photo-url" | "email-verified" | "disabled" | "claims"]`;
+per-field `[data-pyric-field-error]` alerts. Submit is disabled while
+invalid, or pristine in edit mode.
+Every field is wrapped in `label[data-pyric-field-label="<name>"]`
+containing a visible `span[data-pyric-label-text]` and (for email/password)
+the field's error alert — so a labeled grid layout is pure CSS:
+```css
+[data-pyric-ui='auth-user-form'] [data-pyric-field-label] {
+  display: grid;
+  gap: 0.25rem;
+}
+/* label-less design: hide the text, lean on the placeholders */
+[data-pyric-ui='auth-user-form'] [data-pyric-label-text] {
+  display: none;
+}
+```
+For layout beyond CSS reach (two-column grids with mixed groupings, custom
+label/error placement), use the `renderField` slot:
+```tsx
+<AuthUserForm
+  onSubmit={save}
+  renderField={(f) =>
+    f.kind === 'checkbox' ? (
+      f.defaultRender()
+    ) : (
+      <div className="grid grid-cols-[10rem_1fr] items-center gap-2">
+        <span className="text-xs uppercase">{f.label}</span>
+        {f.input}
+        {f.error && <p role="alert" className="col-start-2">{f.error}</p>}
+      </div>
+    )
+  }
+/>
+```
+## Destructive actions
+`<DeleteUserWithConfirm user onDelete>` and
+`<ClearUsersWithConfirm onClear count?>` require a `<ConfirmProvider>`
+ancestor; both accept `title` / `body` / `confirmLabel` / `renderTrigger`.
+Default triggers carry `data-pyric-destructive`.
+## Gotchas
+- Mutation errors (e.g. `auth/uid-already-exists`, `auth/user-not-found`)
+  throw from the action — catch at the call site; the hook's `error` is
+  only for subscription setup failures.
+- `updateUser`'s `customClaims` replaces the whole map
+  (`setCustomUserClaims` semantics); the editor's `toUpdateRequest` emits
+  `{}` when the claims textarea is cleared.
+- Disabled users reject sign-in with `auth/user-disabled` (faithful) —
+  the table only dims them.