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

@@ -0,0 +1,150 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>@pyric/ui/storage · 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>Storage</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">@pyric/ui/storage</span> </li> </ol> </nav>  <article class="prose">  <h1 id="pyricuistorage"><code>@pyric/ui/storage</code></h1>
+<p>Headless components + hooks for browsing AND administering Firebase Storage —
+list/navigate/select (the read path), upload, inspect, metadata editing, and
+bulk delete (the write path), plus rules-aware affordances (the gate
+pre-evaluates rules so denied actions warn BEFORE the click). Same one-handle
+contract as the Firestore half: every hook takes the sandbox
+<code>FirebaseStorage</code> handle from <code>pyric/storage</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>
+<span class="line"><span style="color:#7F848E;font-style:italic">  // read path</span></span>
+<span class="line"><span style="color:#E06C75">  useStorageList</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  usePathState</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  ObjectBrowser</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  PathBreadcrumb</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#7F848E;font-style:italic">  // write path</span></span>
+<span class="line"><span style="color:#E06C75">  useObjectUpload</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  useStorageObject</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  useMetadataEditor</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  useStorageSelection</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  useStorageDelete</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#7F848E;font-style:italic">  // rules-aware affordances</span></span>
+<span class="line"><span style="color:#E06C75">  useStorageRulesGate</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  UploadDropzone</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  ObjectInspector</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  DeleteSelectionWithConfirm</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75">  defaultStoragePreviews</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/storage'</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#7F848E;font-style:italic">// hooks-only entry: '@pyric/ui/storage/hooks'</span></span></code></pre>
+<h2 id="the-wiring-one-screen">The wiring (one screen)</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"> StorageAdmin</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75;font-style:italic">storage</span><span style="color:#ABB2BF"> }) {</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> nav</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> usePathState</span><span style="color:#ABB2BF">();</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> list</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useStorageList</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">storage</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">nav</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">path</span><span style="color:#ABB2BF">);</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> selection</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useStorageSelection</span><span style="color:#ABB2BF">();</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> upload</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useObjectUpload</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">storage</span><span style="color:#ABB2BF">, { </span><span style="color:#E06C75">path</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">nav</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">path</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">list</span><span style="color:#ABB2BF"> });</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> gate</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useStorageRulesGate</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">storage</span><span style="color:#ABB2BF">);</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> pathVerdict</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> gate</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">verdictFor</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">nav</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">path</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">inspecting</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">setInspecting</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">string</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>
+<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">ToastProvider</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:#E5C07B">PathBreadcrumb</span><span style="color:#D19A66;font-style:italic"> path</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">nav</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">path</span><span style="color:#C678DD">}</span><span style="color:#D19A66;font-style:italic"> onNavigate</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">nav</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">setPath</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">UploadDropzone</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">pathVerdict</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">upload</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          disabledReason</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">pathVerdict</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">reasons</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">write</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">join</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'; '</span><span style="color:#ABB2BF">)</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          onFiles</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">files</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span></span>
+<span class="line"><span style="color:#E5C07B">            upload</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">upload</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">files</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">map</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 style="color:#ABB2BF"> ({ </span><span style="color:#E06C75">path</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">f</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">relativePath</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">data</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">f</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">file</span><span style="color:#ABB2BF"> })))</span></span>
+<span class="line"><span style="color:#C678DD">          }</span></span>
+<span class="line"><span style="color:#ABB2BF">        ></span></span>
+<span class="line"><span style="color:#ABB2BF">          &#x3C;</span><span style="color:#E5C07B">ObjectBrowser</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">            entries</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">list</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">entries</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">            status</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">list</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">status</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">list</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">            gate</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">gate</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">            onNavigate</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">p</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> { </span><span style="color:#E5C07B">selection</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">clear</span><span style="color:#ABB2BF">(); </span><span style="color:#E5C07B">nav</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">enter</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">p</span><span style="color:#ABB2BF">); }</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"> setInspecting</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">ref</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">fullPath</span><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">        &#x3C;/</span><span style="color:#E5C07B">UploadDropzone</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E5C07B">DeleteSelectionWithConfirm</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          storage</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">storage</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          entries</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">selection</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">selected</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          list</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">list</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          gate</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">gate</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">          onDeleted</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">() </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> { </span><span style="color:#E5C07B">selection</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">clear</span><span style="color:#ABB2BF">(); </span><span style="color:#E5C07B">list</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">refresh</span><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">        &#x3C;</span><span style="color:#E5C07B">ObjectInspector</span><span style="color:#D19A66;font-style:italic"> storage</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">storage</span><span style="color:#C678DD">}</span><span style="color:#D19A66;font-style:italic"> path</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">inspecting</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">ConfirmProvider</span><span style="color:#ABB2BF">></span></span>
+<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E5C07B">ToastProvider</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="components">Components</h2>
+<ul>
+<li><a href="../ui-storage-objectbrowser/">ObjectBrowser</a> — the folder/object row list;
+virtualized above 100 rows.</li>
+<li><a href="../ui-storage-pathbreadcrumb/">PathBreadcrumb</a> — clickable ancestor trail.</li>
+<li><a href="../ui-storage-uploaddropzone/">UploadDropzone</a> — slot-based file + folder drop
+target.</li>
+<li><a href="../ui-storage-objectinspector/">ObjectInspector</a> — metadata + content-type-driven
+previews (image/text/json built in, consumer-extensible).</li>
+<li><a href="../ui-storage-deleteselectionwithconfirm/">DeleteSelectionWithConfirm</a> — bulk +
+recursive delete behind the confirm dialog, toasts on outcome.</li>
+</ul>
+<h2 id="concepts">Concepts</h2>
+<ul>
+<li><a href="../ui-storage-rules-aware-affordances/">Rules-aware affordances</a> — how the gate’s
+verdicts flow into <code>data-pyric-denied</code> rows and disabled-with-reason
+states.</li>
+</ul>
+<h2 id="hooks">Hooks</h2>
+<p>Hook docs live in the source JSDoc — every hook has an options/return
+interface commented per field (<a href="../ui-storage-usestoragerulesgate/"><code>useStorageRulesGate</code></a>
+also has a full page). Summary:</p>
+<ul>
+<li><strong><code>useStorageList(storage, path)</code></strong> — <code>listAll</code> + the prefix→folder
+synthesis: <code>{ status, items, prefixes, entries, error, refresh, insertItem, removeItem }</code>. <code>insertItem</code>/<code>removeItem</code> are the optimistic
+seam the upload/delete hooks plug into (a trailing slash declares a
+folder). A rules-denied list surfaces the typed error
+(<code>error.code === 'storage/unauthorized'</code>).</li>
+<li><strong><code>usePathState({ path?, onPathChange?, defaultPath? })</code></strong> — navigation
+state, controlled or uncontrolled. <code>{ path, segments, setPath, enter, up, navigateToIndex }</code>.</li>
+<li><strong><code>useObjectUpload(storage, { path, list, onProgress, onComplete, onError })</code></strong> — multi-file upload with a <strong>task-shaped API</strong>
+(<code>UploadTask</code> carries byte counters; <code>pyric/storage</code> has no resumable
+uploads yet, so tasks complete in one tick — the type won’t change when
+resumable lands). Optimistic insert + rollback through the <code>list</code> seam.
+Also <code>createFolder(name)</code> — writes the zero-byte <code>&#x3C;path>/</code> placeholder
+(the GCS convention) into the sandbox mirror.</li>
+<li><strong><code>useStorageObject(storage, path)</code></strong> — one object’s metadata + lazy
+bytes: <code>{ status, metadata, error, refresh, blobStatus, blob, blobUrl, blobError, loadBlob }</code>. <code>blobUrl</code> is a <code>URL.createObjectURL</code> handle,
+revoked automatically on path change and unmount.</li>
+<li><strong><code>useMetadataEditor(storage, path, { initial })</code></strong> — the
+<code>useDocumentEditor</code> reducer pattern over <code>updateMetadata</code>: contentType,
+cacheControl, customMetadata k/v rows (stable ids, empty/duplicate-key
+validation), <code>isDirty</code>/<code>isValid</code>/<code>reset</code>/<code>toPatch</code>, plus
+<code>save</code>/<code>isSaving</code>/<code>saveError</code>. Note: clearing a text field keeps the old
+value — the storage surface doesn’t model null-clears yet.</li>
+<li><strong><code>useStorageSelection()</code></strong> — multi-select keyed by <code>fullPath</code>;
+<code>list.entries</code> rows pass straight in.</li>
+<li><strong><code>useStorageDelete(storage, { impl?, list? })</code></strong> — bulk + recursive
+delete. Folders walk via the injectable <code>StorageRecursiveDeleteImpl</code>
+(default: <code>createListAllDeleteImpl()</code> — <code>listAll</code>-driven, sweeps
+create-folder placeholders so emptied folders don’t ghost).</li>
+<li><strong><code>useStorageRulesGate(storage, { paths?, rules?, identity?, writeResource? })</code></strong> — pre-flight rules verdicts (<code>{ read, write, delete, upload, reasons }</code>; delete/upload derive from write) via the
+pure evaluator. Sandbox handles need zero config (rules + identity come
+off the handle). Fails open. Full page:
+<a href="../ui-storage-usestoragerulesgate/">useStorageRulesGate</a>.</li>
+</ul>
+<h2 id="constraints-worth-knowing-from-the-storage-compat">Constraints worth knowing (from the storage COMPAT)</h2>
+<ul>
+<li><strong><code>listAll</code> only, no pagination</strong> — a very large sandbox prefix arrives
+as one flat result. <code>&#x3C;ObjectBrowser></code> virtualizes, but
+the fetch itself is unpaginated. The recursive delete walks the same way.</li>
+<li><strong>Read-via-get, not realtime</strong> — lists and inspectors update on <code>refresh</code>,
+path change, or the optimistic seam.</li>
+<li><strong><code>getDownloadURL</code> is page-local</strong> — it returns a blob URL backed by
+the sandbox object; revoke it with <code>URL.revokeObjectURL</code> when done.</li>
+<li><strong>No resumable uploads</strong> — <code>useObjectUpload</code> is task-shaped for
+forward-compat; <code>onProgress</code> fires start + completion today.</li>
+<li><strong>Create-folder uses a structural reference</strong> — the <code>&#x3C;path>/</code> placeholder
+name cannot be expressed through the JS-SDK-shaped <code>ref()</code> because it
+normalizes trailing slashes.</li>
+</ul>
+<h2 id="see-also">See also</h2>
+<ul>
+<li>design rationale — the
+milestone roadmap (the playground consumer, M8, is next; M7’s traffic
+panel is STOP-documented in
+the design rationale).</li>
+<li><a href="../ui-primitives-virtuallist/"><code>&#x3C;VirtualList></code></a>,
+<a href="../ui-primitives-confirmdialog/"><code>&#x3C;ConfirmDialog></code></a>,
+<a href="../ui-primitives-toast/"><code>&#x3C;Toast></code></a> — the primitives this half composes.</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="#the-wiring-one-screen">The wiring (one screen)</a> </li><li data-depth="2"> <a href="#components">Components</a> </li><li data-depth="2"> <a href="#concepts">Concepts</a> </li><li data-depth="2"> <a href="#hooks">Hooks</a> </li><li data-depth="2"> <a href="#constraints-worth-knowing-from-the-storage-compat">Constraints worth knowing (from the storage COMPAT)</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>

package/dist/serve/docs-ui/docs/ui-storage-deleteselectionwithconfirm/index.html ADDED Viewed

@@ -0,0 +1,126 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>&lt;DeleteSelectionWithConfirm&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>Storage</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">&lt;DeleteSelectionWithConfirm&gt;</span> </li> </ol> </nav>  <article class="prose">  <h1 id="deleteselectionwithconfirm"><code>&#x3C;DeleteSelectionWithConfirm></code></h1>
+<p>Bulk + recursive delete behind the confirm-dialog primitive, with <strong>toasts on outcome</strong> — the storage counterpart of the Firestore half’s <code>&#x3C;DeleteWithConfirm></code>. Objects delete via <code>deleteObject</code>; folders walk recursively (default impl: <code>listAll</code>-driven, including the create-folder placeholder sweep). Requires <code>&#x3C;ConfirmProvider></code> <strong>and</strong> <code>&#x3C;ToastProvider></code> ancestors.</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">DeleteSelectionWithConfirm</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/storage'</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">useStorageList</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">useStorageSelection</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> '@pyric/ui/storage/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"> Toolbar</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75;font-style:italic">storage</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75;font-style:italic">path</span><span style="color:#ABB2BF"> }) {</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> list</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useStorageList</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">storage</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">path</span><span style="color:#ABB2BF">);</span></span>
+<span class="line"><span style="color:#C678DD">  const</span><span style="color:#E5C07B"> selection</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> useStorageSelection</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>
+<span class="line"><span style="color:#C678DD">      {</span><span style="color:#7F848E;font-style:italic">/* rows toggle selection.toggle(entry) — see useStorageSelection */</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#ABB2BF">      &#x3C;</span><span style="color:#E5C07B">DeleteSelectionWithConfirm</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        storage</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">storage</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        entries</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E5C07B">selection</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">selected</span><span style="color:#C678DD">}</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        list</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#E06C75">list</span><span style="color:#C678DD">}</span><span style="color:#7F848E;font-style:italic"> // optimistic removal + kind-correct rollback</span></span>
+<span class="line"><span style="color:#D19A66;font-style:italic">        onDeleted</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">{</span><span style="color:#ABB2BF">() </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
+<span class="line"><span style="color:#E5C07B">          selection</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">clear</span><span style="color:#ABB2BF">();</span></span>
+<span class="line"><span style="color:#E5C07B">          list</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">refresh</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">    &#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="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>storage</code></td><td><code>FirebaseStorage</code></td><td>The single Storage handle prop.</td></tr><tr><td><code>entries</code></td><td><code>StorageSelectionEntry[]</code></td><td><code>{kind, fullPath}</code> rows — <code>useStorageSelection().selected</code> or any <code>StorageListEntry</code>s. Folders delete recursively.</td></tr><tr><td><code>impl</code></td><td><code>StorageRecursiveDeleteImpl</code></td><td>Folder-walk override (e.g. a server-driven delete). Default: <code>createListAllDeleteImpl()</code>.</td></tr><tr><td><code>list</code></td><td><code>{ insertItem, removeItem }</code></td><td><code>useStorageList</code>’s optimistic seam.</td></tr><tr><td><code>gate</code></td><td><code>Pick&#x3C;UseStorageRulesGateResult, 'verdictFor'></code></td><td>Pass <code>useStorageRulesGate(storage)</code> — when ANY selected entry’s DELETE verdict denies, the trigger disables with the reason. See <a href="../ui-storage-rules-aware-affordances/">rules-aware affordances</a>.</td></tr><tr><td><code>title</code> / <code>body</code></td><td><code>string</code> / <code>ReactNode</code></td><td>Dialog copy. Defaults: count-derived title, path list body.</td></tr><tr><td><code>confirmLabel</code></td><td><code>string</code></td><td>Default <code>'Delete'</code>.</td></tr><tr><td><code>onDeleted</code></td><td><code>(outcome) => void</code></td><td>Fired after a run with NO failures.</td></tr><tr><td><code>onFailed</code></td><td><code>(outcome) => void</code></td><td>Fired after a run with failures (the error toast already showed).</td></tr><tr><td><code>renderTrigger</code></td><td><code>({ onClick, isRunning, progress, disabled, deniedReason }) => ReactNode</code></td><td>Trigger override. <code>deniedReason</code> is set when the rules gate denied the selection.</td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Forwarded to the default trigger.</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="delete-selection"]                       /* default trigger */</span></span>
+<span class="line"><span>[data-pyric-ui="delete-selection"][data-pyric-destructive]</span></span>
+<span class="line"><span>[data-pyric-ui="delete-selection"][data-pyric-running]</span></span>
+<span class="line"><span>[data-pyric-ui="delete-selection"][data-pyric-denied]    /* rules gate denied */</span></span>
+<span class="line"><span>[data-pyric-ui="delete-selection"][data-pyric-denied-reason]  /* …why (also on title) */</span></span>
+<span class="line"><span>[data-pyric-delete-selection-paths]                      /* default dialog body */</span></span>
+<span class="line"><span>[data-pyric-delete-selection-failures]                   /* error-toast body */</span></span></code></pre>
+<p>(The dialog and toasts style via the primitives’ own hooks —
+<code>[data-pyric-ui="confirm-dialog"]</code>, <code>[data-pyric-toast]</code>.)</p>
+<h2 id="notes">Notes</h2>
+<ul>
+<li><strong>Outcome toasts are typed-code-driven</strong>: the error toast lists each
+failed path with its <code>StorageError.code</code> (<code>storage/unauthorized</code>, …) —
+rules denials read as rules denials, not generic failures.</li>
+<li><strong>Partial failures don’t abort the batch</strong> — every entry is attempted;
+failures roll their optimistic removal back (objects re-insert as items,
+folders as prefixes) and collect into the outcome.</li>
+<li><strong>The gate check is per-entry and pre-flight</strong> — folder entries evaluate
+the folder path itself (an approximation of the recursive walk; exact
+under <code>{allPaths=**}</code>-shaped rules). A denial surfaces through the normal
+typed-code error toast.</li>
+<li><strong>The recursive default sweeps <code>&#x3C;path>/</code> placeholders</strong> after the walk, so
+folders created via <code>createFolder</code> actually disappear (<code>listAll</code> hides
+placeholders — without the sweep they’d ghost as empty prefixes).</li>
+<li>Headless alternative: <code>useStorageDelete</code> + <code>useConfirm</code> + <code>useToast</code>
+directly when the composition’s shape doesn’t fit.</li>
+</ul>
+<h2 id="see-also">See also</h2>
+<ul>
+<li><code>useStorageSelection</code>, <code>useStorageDelete</code> — the hooks underneath.</li>
+<li><a href="../ui-primitives-confirmdialog/"><code>&#x3C;ConfirmDialog></code></a>,
+<a href="../ui-primitives-toast/"><code>&#x3C;Toast></code></a> — the primitives.</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="#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>

package/dist/serve/docs-ui/docs/ui-storage-deleteselectionwithconfirm.md ADDED Viewed

@@ -0,0 +1,88 @@
+# `<DeleteSelectionWithConfirm>`
+Bulk + recursive delete behind the confirm-dialog primitive, with **toasts on outcome** — the storage counterpart of the Firestore half's `<DeleteWithConfirm>`. Objects delete via `deleteObject`; folders walk recursively (default impl: `listAll`-driven, including the create-folder placeholder sweep). Requires `<ConfirmProvider>` **and** `<ToastProvider>` ancestors.
+```ts
+import { DeleteSelectionWithConfirm } from '@pyric/ui/storage';
+```
+## Example
+```tsx
+import { useStorageList, useStorageSelection } from '@pyric/ui/storage/hooks';
+function Toolbar({ storage, path }) {
+  const list = useStorageList(storage, path);
+  const selection = useStorageSelection();
+  return (
+    <>
+      {/* rows toggle selection.toggle(entry) — see useStorageSelection */}
+      <DeleteSelectionWithConfirm
+        storage={storage}
+        entries={selection.selected}
+        list={list} // optimistic removal + kind-correct rollback
+        onDeleted={() => {
+          selection.clear();
+          list.refresh();
+        }}
+      />
+    </>
+  );
+}
+```
+## Props
+| Prop | Type | Description |
+|---|---|---|
+| `storage` | `FirebaseStorage` | The single Storage handle prop. |
+| `entries` | `StorageSelectionEntry[]` | `{kind, fullPath}` rows — `useStorageSelection().selected` or any `StorageListEntry`s. Folders delete recursively. |
+| `impl` | `StorageRecursiveDeleteImpl` | Folder-walk override (e.g. a server-driven delete). Default: `createListAllDeleteImpl()`. |
+| `list` | `{ insertItem, removeItem }` | `useStorageList`'s optimistic seam. |
+| `gate` | `Pick<UseStorageRulesGateResult, 'verdictFor'>` | Pass `useStorageRulesGate(storage)` — when ANY selected entry's DELETE verdict denies, the trigger disables with the reason. See [rules-aware affordances](../ui-storage-rules-aware-affordances/). |
+| `title` / `body` | `string` / `ReactNode` | Dialog copy. Defaults: count-derived title, path list body. |
+| `confirmLabel` | `string` | Default `'Delete'`. |
+| `onDeleted` | `(outcome) => void` | Fired after a run with NO failures. |
+| `onFailed` | `(outcome) => void` | Fired after a run with failures (the error toast already showed). |
+| `renderTrigger` | `({ onClick, isRunning, progress, disabled, deniedReason }) => ReactNode` | Trigger override. `deniedReason` is set when the rules gate denied the selection. |
+| `className` | `string` | Forwarded to the default trigger. |
+## Styling hooks
+```
+[data-pyric-ui="delete-selection"]                       /* default trigger */
+[data-pyric-ui="delete-selection"][data-pyric-destructive]
+[data-pyric-ui="delete-selection"][data-pyric-running]
+[data-pyric-ui="delete-selection"][data-pyric-denied]    /* rules gate denied */
+[data-pyric-ui="delete-selection"][data-pyric-denied-reason]  /* …why (also on title) */
+[data-pyric-delete-selection-paths]                      /* default dialog body */
+[data-pyric-delete-selection-failures]                   /* error-toast body */
+```
+(The dialog and toasts style via the primitives' own hooks —
+`[data-pyric-ui="confirm-dialog"]`, `[data-pyric-toast]`.)
+## Notes
+- **Outcome toasts are typed-code-driven**: the error toast lists each
+  failed path with its `StorageError.code` (`storage/unauthorized`, …) —
+  rules denials read as rules denials, not generic failures.
+- **Partial failures don't abort the batch** — every entry is attempted;
+  failures roll their optimistic removal back (objects re-insert as items,
+  folders as prefixes) and collect into the outcome.
+- **The gate check is per-entry and pre-flight** — folder entries evaluate
+  the folder path itself (an approximation of the recursive walk; exact
+  under `{allPaths=**}`-shaped rules). A denial surfaces through the normal
+  typed-code error toast.
+- **The recursive default sweeps `<path>/` placeholders** after the walk, so
+  folders created via `createFolder` actually disappear (`listAll` hides
+  placeholders — without the sweep they'd ghost as empty prefixes).
+- Headless alternative: `useStorageDelete` + `useConfirm` + `useToast`
+  directly when the composition's shape doesn't fit.
+## See also
+- `useStorageSelection`, `useStorageDelete` — the hooks underneath.
+- [`<ConfirmDialog>`](../ui-primitives-confirmdialog/),
+  [`<Toast>`](../ui-primitives-toast/) — the primitives.