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

@pyric/cli 0.1.0-alpha.9

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

Files changed (1169) hide show

package/dist/serve/docs-ui/docs/pyric-ui-traffic-reference-api/index.html ADDED Viewed

@@ -0,0 +1,2289 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>API reference: @pyric/ui/traffic · Pyric Studio</title><meta name="description" content="Published declarations for @pyric/ui/traffic."><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/"> @pyric/ui </a> </li><li> <a href="/__pyric/ui/docs/api-reference/" aria-current="true"> 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/"> @pyric/ui </a> </li><li> <a href="/__pyric/ui/docs/api-reference/" aria-current="true"> 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/api-reference/">API reference</a> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span>@pyric/ui</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">@pyric/ui/traffic</span> </li> </ol> </nav> <header class="api-reference-header"> <p class="api-reference-kicker">API reference</p> <h1><code>@pyric/ui/traffic</code></h1> <p class="api-reference-meta"> 74 published symbols from <code>@pyric/ui</code> </p> <p class="api-reference-source">
+Generated from the TypeScript declarations shipped at this import path.
+</p>  </header> <article class="prose api-reference-body">  <!-- Generated from published package declarations via TypeDoc. Do not edit by hand; run bun run docs:api:generate. -->
+<h2 id="interfaces">Interfaces</h2>
+<p><a id="metricpoint"></a></p>
+<h3 id="metricpoint">MetricPoint</h3>
+<h4 id="properties">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="end"></a> <code>end</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="index"></a> <code>index</code></td><td align="left"><code>number</code></td><td align="left">0-based bucket index, left (oldest) to right (newest).</td></tr><tr><td align="left"><a id="start"></a> <code>start</code></td><td align="left"><code>number</code></td><td align="left">Half-open bounds of this bucket <code>[start, end)</code> in epoch-ms.</td></tr></tbody></table></div>
+<hr>
+<p><a id="metricseries"></a></p>
+<h3 id="metricseries">MetricSeries</h3>
+<h4 id="properties-1">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="key"></a> <code>key</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="label"></a> <code>label</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="total"></a> <code>total</code></td><td align="left"><code>number</code></td><td align="left">Sum of <code>values</code> — the period total (the legend/card number).</td></tr><tr><td align="left"><a id="values"></a> <code>values</code></td><td align="left"><code>number</code>[]</td><td align="left">One count per bucket, aligned with <code>points</code>.</td></tr></tbody></table></div>
+<hr>
+<p><a id="ruleheatmapentry"></a></p>
+<h3 id="ruleheatmapentry">RuleHeatmapEntry</h3>
+<h4 id="properties-2">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="allows"></a> <code>allows</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="denies"></a> <code>denies</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="denyratio"></a> <code>denyRatio</code></td><td align="left"><code>number</code></td><td align="left"><code>denies / total</code> — 0 when the rule never denied.</td></tr><tr><td align="left"><a id="operations"></a> <code>operations</code></td><td align="left"><code>string</code>[]</td><td align="left">Union of all operations seen matching this rule.</td></tr><tr><td align="left"><a id="ruleindex"></a> <code>ruleIndex</code></td><td align="left"><code>number</code></td><td align="left">The rule’s index in the rules file.</td></tr><tr><td align="left"><a id="total-1"></a> <code>total</code></td><td align="left"><code>number</code></td><td align="left">Total events that matched this rule.</td></tr><tr><td align="left"><a id="unsupported"></a> <code>unsupported</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="ruleheatmapprops"></a></p>
+<h3 id="ruleheatmapprops">RuleHeatmapProps</h3>
+<h4 id="properties-3">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="emptystate"></a> <code>emptyState?</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr><tr><td align="left"><a id="entries"></a> <code>entries</code></td><td align="left"><a href="#ruleheatmapentry"><code>RuleHeatmapEntry</code></a>[]</td><td align="left">Per-rule rollup from <code>useRuleHeatmap</code>.</td></tr><tr><td align="left"><a id="onselectrule"></a> <code>onSelectRule?</code></td><td align="left">(<code>ruleIndex</code>: <code>number</code>) => <code>void</code></td><td align="left">Fired when a rule row is clicked — wire this to the log filter for the cross-view “click a rule, see its traffic” interaction.</td></tr><tr><td align="left"><a id="selectedruleindex"></a> <code>selectedRuleIndex?</code></td><td align="left"><code>number</code></td><td align="left">Marks one rule row as the active selection.</td></tr></tbody></table></div>
+<hr>
+<p><a id="timewindow"></a></p>
+<h3 id="timewindow">TimeWindow</h3>
+<p>A half-open time window <code>[start, end)</code> in epoch-ms. The timeline
+buckets events whose <code>at</code> falls inside it; events outside are
+dropped from the histogram (but still counted in <code>outOfWindow</code>).</p>
+<h4 id="properties-4">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="end-1"></a> <code>end</code></td><td align="left"><code>number</code></td></tr><tr><td align="left"><a id="start-1"></a> <code>start</code></td><td align="left"><code>number</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficauthstate"></a></p>
+<h3 id="trafficauthstate">TrafficAuthState</h3>
+<h4 id="properties-5">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="token"></a> <code>token?</code></td><td align="left"><code>Record</code>&#x3C;<code>string</code>, <code>unknown</code>></td></tr><tr><td align="left"><a id="uid"></a> <code>uid</code></td><td align="left"><code>string</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficbucket"></a></p>
+<h3 id="trafficbucket">TrafficBucket</h3>
+<h4 id="properties-6">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="allows-1"></a> <code>allows</code></td><td align="left"><code>number</code></td><td align="left"><code>count - denies</code> — allowed + unsupported. The “non-deny” stack.</td></tr><tr><td align="left"><a id="count"></a> <code>count</code></td><td align="left"><code>number</code></td><td align="left">Total events that fell in this bucket.</td></tr><tr><td align="left"><a id="denies-1"></a> <code>denies</code></td><td align="left"><code>number</code></td><td align="left">How many of <code>count</code> were denied.</td></tr><tr><td align="left"><a id="denyheightratio"></a> <code>denyHeightRatio</code></td><td align="left"><code>number</code></td><td align="left"><code>denies / maxCount</code> — 0..1. The deny sub-stack height as a fraction of the tallest bucket, so the deny segment is drawn to the same scale as the full bar. Drives <code>--pyric-bucket-deny-h</code>.</td></tr><tr><td align="left"><a id="end-2"></a> <code>end</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="heightratio"></a> <code>heightRatio</code></td><td align="left"><code>number</code></td><td align="left"><code>count / maxCount</code> across all buckets — 0..1. The full bar height as a fraction of the tallest bucket. Drives <code>--pyric-bucket-h</code>.</td></tr><tr><td align="left"><a id="index-1"></a> <code>index</code></td><td align="left"><code>number</code></td><td align="left">0-based bucket index, left (oldest) to right (newest).</td></tr><tr><td align="left"><a id="start-2"></a> <code>start</code></td><td align="left"><code>number</code></td><td align="left">Half-open bounds of this bucket <code>[start, end)</code> in epoch-ms.</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficcounts"></a></p>
+<h3 id="trafficcounts">TrafficCounts</h3>
+<h4 id="properties-7">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="denied"></a> <code>denied</code></td><td align="left"><code>number</code></td><td align="left">Of those, how many were denied.</td></tr><tr><td align="left"><a id="listener"></a> <code>listener</code></td><td align="left"><code>number</code></td><td align="left">Of those, how many are listener re-evals.</td></tr><tr><td align="left"><a id="total-2"></a> <code>total</code></td><td align="left"><code>number</code></td><td align="left">Events currently in the buffer.</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficdetailprops"></a></p>
+<h3 id="trafficdetailprops">TrafficDetailProps</h3>
+<h4 id="properties-8">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-1"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="event"></a> <code>event</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="formattime"></a> <code>formatTime?</code></td><td align="left">(<code>at</code>: <code>number</code>) => <code>string</code></td><td align="left">Override the timestamp rendering. Default is <code>HH:MM:SS</code>.</td></tr><tr><td align="left"><a id="onback"></a> <code>onBack?</code></td><td align="left">() => <code>void</code></td><td align="left">Fired by the back affordance. When absent, no back button.</td></tr><tr><td align="left"><a id="renderclassification"></a> <code>renderClassification?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <code>ReactNode</code></td><td align="left">Render-prop slot below the header — the playground drops its denial overlay (classification + LLM analysis) here. The library doesn’t own that analysis.</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficevent"></a></p>
+<h3 id="trafficevent">TrafficEvent</h3>
+<h4 id="properties-9">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="at"></a> <code>at</code></td><td align="left"><code>number</code></td><td align="left"><code>Date.now()</code> at op start.</td></tr><tr><td align="left"><a id="auth"></a> <code>auth</code></td><td align="left"><a href="#trafficauthstate"><code>TrafficAuthState</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="durationms"></a> <code>durationMs?</code></td><td align="left"><code>number</code></td><td align="left">Canonical service-operation duration.</td></tr><tr><td align="left"><a id="evalms"></a> <code>evalMs?</code></td><td align="left"><code>number</code></td><td align="left">Simulator eval duration in ms. De-featured in the UI (local simulator) — present for the detail panel only.</td></tr><tr><td align="left"><a id="groupid"></a> <code>groupId?</code></td><td align="left"><code>string</code></td><td align="left">Shared across ops in one batch or transaction.</td></tr><tr><td align="left"><a id="groupkind"></a> <code>groupKind?</code></td><td align="left">| <code>string</code> &#x26; { } | <code>"transaction"</code> | <code>"batch"</code></td><td align="left">-</td></tr><tr><td align="left"><a id="id"></a> <code>id</code></td><td align="left"><code>string</code></td><td align="left">Unique per emission.</td></tr><tr><td align="left"><a id="kind"></a> <code>kind?</code></td><td align="left"><code>"request"</code> | <code>"operation"</code></td><td align="left">Source event kind. Firestore request events omit this in older adapters.</td></tr><tr><td align="left"><a id="matchedrule"></a> <code>matchedRule?</code></td><td align="left"><a href="#trafficmatchedrule"><code>TrafficMatchedRule</code></a></td><td align="left">Parsed from the matched <code>Rule #N</code> debug line — absent if none.</td></tr><tr><td align="left"><a id="method"></a> <code>method</code></td><td align="left"><a href="#trafficmethod"><code>TrafficMethod</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="origin"></a> <code>origin</code></td><td align="left"><a href="#trafficorigin"><code>TrafficOrigin</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="path"></a> <code>path</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="reasons"></a> <code>reasons</code></td><td align="left"><code>string</code>[]</td><td align="left">Simulator debug messages — <code>Rule #N (op) → ALLOW</code> format.</td></tr><tr><td align="left"><a id="request"></a> <code>request?</code></td><td align="left">{ <code>data?</code>: <code>unknown</code>; <code>query?</code>: <code>unknown</code>; <code>resourceData?</code>: <code>unknown</code>; }</td><td align="left">Proposed write payload — absent on reads + delete.</td></tr><tr><td align="left"><code>request.data?</code></td><td align="left"><code>unknown</code></td><td align="left">-</td></tr><tr><td align="left"><code>request.query?</code></td><td align="left"><code>unknown</code></td><td align="left">-</td></tr><tr><td align="left"><code>request.resourceData?</code></td><td align="left"><code>unknown</code></td><td align="left">-</td></tr><tr><td align="left"><a id="resourceafter"></a> <code>resourceAfter?</code></td><td align="left"><a href="#trafficresourcestate"><code>TrafficResourceState</code></a></td><td align="left">Projected doc state after the write — absent on reads.</td></tr><tr><td align="left"><a id="resourcebefore"></a> <code>resourceBefore?</code></td><td align="left"><a href="#trafficresourcestate"><code>TrafficResourceState</code></a></td><td align="left">Existing doc state before the write (or the read target).</td></tr><tr><td align="left"><a id="result"></a> <code>result</code></td><td align="left"><a href="#trafficresult"><code>TrafficResult</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="service"></a> <code>service?</code></td><td align="left">| <code>"firestore"</code> | <code>"auth"</code> | <code>"storage"</code> | <code>"rtdb"</code> | <code>string</code> &#x26; { }</td><td align="left">Service that emitted the event. Omitted means Firestore.</td></tr><tr><td align="left"><a id="triggeredby"></a> <code>triggeredBy?</code></td><td align="left">{ <code>method</code>: <code>string</code>; <code>path?</code>: <code>string</code>; }</td><td align="left">For listener re-evals — the originating user op.</td></tr><tr><td align="left"><code>triggeredBy.method</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><code>triggeredBy.path?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficfilterstate"></a></p>
+<h3 id="trafficfilterstate">TrafficFilterState</h3>
+<h4 id="properties-10">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="origin-1"></a> <code>origin</code></td><td align="left"><a href="#trafficoriginfilter"><code>TrafficOriginFilter</code></a></td></tr><tr><td align="left"><a id="pathquery"></a> <code>pathQuery</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="result-1"></a> <code>result</code></td><td align="left"><a href="#trafficresultfilter"><code>TrafficResultFilter</code></a></td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficgroup"></a></p>
+<h3 id="trafficgroup">TrafficGroup</h3>
+<h4 id="properties-11">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="count-1"></a> <code>count</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="denies-2"></a> <code>denies</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="events"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="key-1"></a> <code>key</code></td><td align="left"><code>string</code></td><td align="left"><code>groupId</code> for batch/transaction; a synthetic key for listener runs. Stable enough for a React key.</td></tr><tr><td align="left"><a id="kind-1"></a> <code>kind</code></td><td align="left"><a href="#trafficgroupkind-1"><code>TrafficGroupKind</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="type"></a> <code>type</code></td><td align="left"><code>"group"</code></td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficgrouprowprops"></a></p>
+<h3 id="trafficgrouprowprops">TrafficGroupRowProps</h3>
+<h4 id="properties-12">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-2"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="defaultexpanded"></a> <code>defaultExpanded?</code></td><td align="left"><code>boolean</code></td><td align="left">Whether the group starts expanded. Default false — grouping exists to collapse volume, so collapsed is the useful default.</td></tr><tr><td align="left"><a id="formattime-1"></a> <code>formatTime?</code></td><td align="left">(<code>at</code>: <code>number</code>) => <code>string</code></td><td align="left">Passed through to each member <code>&#x3C;TrafficRow></code>.</td></tr><tr><td align="left"><a id="group"></a> <code>group</code></td><td align="left"><a href="#trafficgroup"><code>TrafficGroup</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="onselect"></a> <code>onSelect?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <code>void</code></td><td align="left">-</td></tr><tr><td align="left"><a id="renderclassification-1"></a> <code>renderClassification?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <code>ReactNode</code></td><td align="left">Passed through to each member <code>&#x3C;TrafficRow></code>.</td></tr><tr><td align="left"><a id="selectedid"></a> <code>selectedId?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficlinechartprops"></a></p>
+<h3 id="trafficlinechartprops">TrafficLineChartProps</h3>
+<h4 id="properties-13">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-3"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="emptystate-1"></a> <code>emptyState?</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr><tr><td align="left"><a id="formattime-2"></a> <code>formatTime?</code></td><td align="left">(<code>t</code>: <code>number</code>) => <code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="formatvalue"></a> <code>formatValue?</code></td><td align="left">(<code>n</code>: <code>number</code>) => <code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="omitzeroseries"></a> <code>omitZeroSeries?</code></td><td align="left"><code>boolean</code></td><td align="left">Omit all-zero series from the plot and tooltip while retaining their explicit total in the accompanying metric strip.</td></tr><tr><td align="left"><a id="points"></a> <code>points</code></td><td align="left">readonly <a href="#metricpoint"><code>MetricPoint</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="series"></a> <code>series</code></td><td align="left">readonly <a href="#metricseries"><code>MetricSeries</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="visible"></a> <code>visible?</code></td><td align="left"><code>ReadonlySet</code>&#x3C;<code>string</code>></td><td align="left">Series keys currently drawn. Omit to draw every series. Pair with <a href="#trafficmetriccards">TrafficMetricCards</a>’ <code>visible</code>/<code>onToggle</code> so the legend cards and the chart’s lines toggle in lockstep.</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficlogprops"></a></p>
+<h3 id="trafficlogprops">TrafficLogProps</h3>
+<h4 id="properties-14">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-4"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="emptystate-2"></a> <code>emptyState?</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr><tr><td align="left"><a id="events-1"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">Events to render, in display order. The hook layer decides the order — <code>&#x3C;TrafficLog></code> renders the array as given.</td></tr><tr><td align="left"><a id="formattime-3"></a> <code>formatTime?</code></td><td align="left">(<code>at</code>: <code>number</code>) => <code>string</code></td><td align="left">Passed through to each <code>&#x3C;TrafficRow></code>.</td></tr><tr><td align="left"><a id="items"></a> <code>items?</code></td><td align="left"><a href="#trafficlogitem"><code>TrafficLogItem</code></a>[]</td><td align="left">Grouped items from <code>useTrafficGroups</code>. When provided, the log renders singles + collapsible group rows and does NOT virtualize — grouping is itself the volume reducer (a 250-event listener storm becomes one group row). <code>events</code> is ignored.</td></tr><tr><td align="left"><a id="onselect-1"></a> <code>onSelect?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <code>void</code></td><td align="left">-</td></tr><tr><td align="left"><a id="renderclassification-2"></a> <code>renderClassification?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <code>ReactNode</code></td><td align="left">Passed through to each <code>&#x3C;TrafficRow></code>.</td></tr><tr><td align="left"><a id="renderrow"></a> <code>renderRow?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>, <code>selected</code>: <code>boolean</code>) => <code>ReactNode</code></td><td align="left">Full escape hatch — render a row yourself instead of the default <code>&#x3C;TrafficRow></code>. Receives the event and its selected state. Applies to the flat (<code>events</code>) path only.</td></tr><tr><td align="left"><a id="rowheight"></a> <code>rowHeight?</code></td><td align="left"><code>number</code> | (<code>index</code>: <code>number</code>) => <code>number</code></td><td align="left">Estimated row height when virtualizing. Default 28.</td></tr><tr><td align="left"><a id="selectedid-1"></a> <code>selectedId?</code></td><td align="left"><code>string</code></td><td align="left">The selected event’s id, marked with <code>data-pyric-selected</code>.</td></tr><tr><td align="left"><a id="virtualizedheight"></a> <code>virtualizedHeight?</code></td><td align="left"><code>string</code> | <code>number</code></td><td align="left">Pixel height the virtualized scroll container fills. Default <code>'60vh'</code>.</td></tr><tr><td align="left"><a id="virtualizethreshold"></a> <code>virtualizeThreshold?</code></td><td align="left"><code>number</code></td><td align="left">Above this row count, the list virtualizes via <code>&#x3C;VirtualList></code>. Default 100 — a <code>load-test</code>-shaped session can emit 100k+ events, so virtualization is load-bearing, not polish.</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficmatchedrule"></a></p>
+<h3 id="trafficmatchedrule">TrafficMatchedRule</h3>
+<h4 id="properties-15">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="operations-1"></a> <code>operations</code></td><td align="left"><code>string</code>[]</td></tr><tr><td align="left"><a id="ruleindex-1"></a> <code>ruleIndex</code></td><td align="left"><code>number</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficmetriccardsprops"></a></p>
+<h3 id="trafficmetriccardsprops">TrafficMetricCardsProps</h3>
+<h4 id="properties-16">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-5"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="formatvalue-1"></a> <code>formatValue?</code></td><td align="left">(<code>n</code>: <code>number</code>) => <code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="ontoggle"></a> <code>onToggle?</code></td><td align="left">(<code>key</code>: <code>string</code>) => <code>void</code></td><td align="left">-</td></tr><tr><td align="left"><a id="series-1"></a> <code>series</code></td><td align="left">readonly <a href="#metricseries"><code>MetricSeries</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="visible-1"></a> <code>visible?</code></td><td align="left"><code>ReadonlySet</code>&#x3C;<code>string</code>></td><td align="left">When supplied (with <code>onToggle</code>), each card gets a checkbox and doubles as the chart’s legend — Console reference semantics (“toggle series visibility”). Omit for a read-only totals strip.</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficmetricsresult"></a></p>
+<h3 id="trafficmetricsresult">TrafficMetricsResult</h3>
+<h4 id="properties-17">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="maxvalue"></a> <code>maxValue</code></td><td align="left"><code>number</code></td><td align="left">The largest single-bucket value across every series — the shared y-scale divisor a chart would use by default.</td></tr><tr><td align="left"><a id="points-1"></a> <code>points</code></td><td align="left"><a href="#metricpoint"><code>MetricPoint</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="series-2"></a> <code>series</code></td><td align="left"><a href="#metricseries"><code>MetricSeries</code></a>[]</td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficresourcestate"></a></p>
+<h3 id="trafficresourcestate">TrafficResourceState</h3>
+<h4 id="properties-18">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="data"></a> <code>data</code></td><td align="left"><code>unknown</code></td></tr><tr><td align="left"><a id="exists"></a> <code>exists</code></td><td align="left"><code>boolean</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficrowprops"></a></p>
+<h3 id="trafficrowprops">TrafficRowProps</h3>
+<h4 id="properties-19">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-6"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="event-1"></a> <code>event</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="formattime-4"></a> <code>formatTime?</code></td><td align="left">(<code>at</code>: <code>number</code>) => <code>string</code></td><td align="left">Override the timestamp rendering. Default is <code>HH:MM:SS</code>.</td></tr><tr><td align="left"><a id="onselect-2"></a> <code>onSelect?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <code>void</code></td><td align="left">-</td></tr><tr><td align="left"><a id="renderclassification-3"></a> <code>renderClassification?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <code>ReactNode</code></td><td align="left">Render-prop slot for a consumer-specific classification badge — e.g. the playground’s <code>expected</code>/<code>ambiguous</code>/<code>unexpected</code> verdict, which is app-source analysis the library doesn’t own. Returns <code>null</code> to render nothing.</td></tr><tr><td align="left"><a id="selected"></a> <code>selected?</code></td><td align="left"><code>boolean</code></td><td align="left">Marks the row as the active selection (<code>data-pyric-selected</code>).</td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficsingle"></a></p>
+<h3 id="trafficsingle">TrafficSingle</h3>
+<h4 id="properties-20">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="event-2"></a> <code>event</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a></td></tr><tr><td align="left"><a id="type-1"></a> <code>type</code></td><td align="left"><code>"single"</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficstatbucket"></a></p>
+<h3 id="trafficstatbucket">TrafficStatBucket</h3>
+<h4 id="properties-21">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="count-2"></a> <code>count</code></td><td align="left"><code>number</code></td></tr><tr><td align="left"><a id="key-2"></a> <code>key</code></td><td align="left"><code>string</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficstatsprops"></a></p>
+<h3 id="trafficstatsprops">TrafficStatsProps</h3>
+<h4 id="properties-22">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="classname-7"></a> <code>className?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="stats"></a> <code>stats</code></td><td align="left"><a href="#trafficstatssummary"><code>TrafficStatsSummary</code></a></td></tr></tbody></table></div>
+<hr>
+<p><a id="trafficstatssummary"></a></p>
+<h3 id="trafficstatssummary">TrafficStatsSummary</h3>
+<h4 id="properties-23">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="allows-2"></a> <code>allows</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="bymethod"></a> <code>byMethod</code></td><td align="left"><a href="#trafficstatbucket"><code>TrafficStatBucket</code></a>[]</td><td align="left">Counts by method, sorted descending.</td></tr><tr><td align="left"><a id="byorigin"></a> <code>byOrigin</code></td><td align="left"><a href="#trafficstatbucket"><code>TrafficStatBucket</code></a>[]</td><td align="left">Counts by origin, sorted descending.</td></tr><tr><td align="left"><a id="bypath"></a> <code>byPath</code></td><td align="left"><a href="#trafficstatbucket"><code>TrafficStatBucket</code></a>[]</td><td align="left">Counts by path, sorted descending, capped at <code>topPaths</code>.</td></tr><tr><td align="left"><a id="denies-3"></a> <code>denies</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="denyrate"></a> <code>denyRate</code></td><td align="left"><code>number</code></td><td align="left"><code>denies / total</code> — 0 for an empty buffer.</td></tr><tr><td align="left"><a id="total-3"></a> <code>total</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr><tr><td align="left"><a id="unsupported-1"></a> <code>unsupported</code></td><td align="left"><code>number</code></td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="traffictimelineprops"></a></p>
+<h3 id="traffictimelineprops">TrafficTimelineProps</h3>
+<h4 id="properties-24">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="axis"></a> <code>axis?</code></td><td align="left"><code>ReactNode</code> | (<code>window</code>: <a href="#timewindow"><code>TimeWindow</code></a>) => <code>ReactNode</code></td><td align="left">Axis slot — tick labels below the bars inside <code>[data-pyric-timeline-axis]</code>. The mock puts “14m ago · 7m · now” here. Receives the resolved window so labels can be derived.</td></tr><tr><td align="left"><a id="brush"></a> <code>brush?</code></td><td align="left"><a href="#timewindow"><code>TimeWindow</code></a></td><td align="left">A brushed sub-range (<code>[start, end)</code>) drawn as an overlay over the bars. Position is derived from where it falls inside <code>window</code>, so a partly-out-of-window brush clamps to the chart edges.</td></tr><tr><td align="left"><a id="bucketcount"></a> <code>bucketCount?</code></td><td align="left"><code>number</code></td><td align="left">Number of bars. Default 30. Only used on the <code>events</code> path.</td></tr><tr><td align="left"><a id="buckets"></a> <code>buckets?</code></td><td align="left"><a href="#usetrafficbucketsresult"><code>UseTrafficBucketsResult</code></a></td><td align="left">Pre-bucketed counts — the escape hatch when the caller already ran <a href="#usetrafficbuckets">useTrafficBuckets</a> (or <code>bucketTraffic</code>) upstream, e.g. to share one bucketing pass across the timeline + a stats header. Takes precedence over <code>events</code>.</td></tr><tr><td align="left"><a id="classname-8"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="emptystate-3"></a> <code>emptyState?</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr><tr><td align="left"><a id="events-2"></a> <code>events?</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">Raw traffic events to bucket. Ignored when <code>buckets</code> is supplied (the consumer pre-bucketed). Exactly one of <code>events</code> / <code>buckets</code> should drive the histogram.</td></tr><tr><td align="left"><a id="header"></a> <code>header?</code></td><td align="left"><code>ReactNode</code></td><td align="left">Header slot — title, deny summary, live label. Rendered above the bars inside <code>[data-pyric-timeline-header]</code>. The mock puts “142 requests · 16 denied · live” here.</td></tr><tr><td align="left"><a id="liveat"></a> <code>liveAt?</code></td><td align="left"><code>number</code></td><td align="left">Where the live edge marker sits, in epoch-ms. Defaults to <code>window.end</code> (the right edge = “now”). Omit / pass <code>null</code> to hide the marker entirely (e.g. a frozen, non-live window).</td></tr><tr><td align="left"><a id="onbrush"></a> <code>onBrush?</code></td><td align="left">(<code>window</code>: <a href="#timewindow"><code>TimeWindow</code></a>) => <code>void</code></td><td align="left">Fired when a bar inside the brush region is clicked-through — the component itself is presentation-agnostic about drag, so the primary brush gesture is owned by the consumer. As a built-in affordance, clicking a bucket calls this with a one-bucket-wide window so a bare consumer still gets a working selection.</td></tr><tr><td align="left"><a id="renderbucketsummary"></a> <code>renderBucketSummary?</code></td><td align="left">(<code>bucket</code>: <a href="#trafficbucket"><code>TrafficBucket</code></a>) => <code>ReactNode</code></td><td align="left">Direct annotation shown while a bucket is hovered or keyboard-focused. The timeline owns preview state and positioning; the consumer owns the words and number formatting.</td></tr><tr><td align="left"><a id="window"></a> <code>window</code></td><td align="left"><a href="#timewindow"><code>TimeWindow</code></a></td><td align="left">The time range the histogram spans.</td></tr></tbody></table></div>
+<hr>
+<p><a id="useruleheatmapoptions"></a></p>
+<h3 id="useruleheatmapoptions">UseRuleHeatmapOptions</h3>
+<h4 id="properties-25">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="events-3"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td></tr></tbody></table></div>
+<hr>
+<p><a id="useruleheatmapresult"></a></p>
+<h3 id="useruleheatmapresult">UseRuleHeatmapResult</h3>
+<h4 id="properties-26">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="entries-1"></a> <code>entries</code></td><td align="left"><a href="#ruleheatmapentry"><code>RuleHeatmapEntry</code></a>[]</td><td align="left">Per-rule rollup, sorted by <code>total</code> descending (busiest first), ties broken by <code>ruleIndex</code> ascending.</td></tr><tr><td align="left"><a id="unmatchedcount"></a> <code>unmatchedCount</code></td><td align="left"><code>number</code></td><td align="left">Events that matched no rule — counted here, not attributed to any entry.</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficbucketsoptions"></a></p>
+<h3 id="usetrafficbucketsoptions">UseTrafficBucketsOptions</h3>
+<h4 id="properties-27">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="bucketcount-1"></a> <code>bucketCount?</code></td><td align="left"><code>number</code></td><td align="left">Number of buckets to divide the window into. Default 30.</td></tr><tr><td align="left"><a id="events-4"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="window-1"></a> <code>window</code></td><td align="left"><a href="#timewindow"><code>TimeWindow</code></a></td><td align="left">The time range to bucket over.</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficbucketsresult"></a></p>
+<h3 id="usetrafficbucketsresult">UseTrafficBucketsResult</h3>
+<h4 id="properties-28">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="buckets-1"></a> <code>buckets</code></td><td align="left"><a href="#trafficbucket"><code>TrafficBucket</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="denies-4"></a> <code>denies</code></td><td align="left"><code>number</code></td><td align="left">Sum of <code>denies</code> across buckets.</td></tr><tr><td align="left"><a id="maxcount"></a> <code>maxCount</code></td><td align="left"><code>number</code></td><td align="left">The largest single-bucket <code>count</code> — the height-ratio divisor.</td></tr><tr><td align="left"><a id="outofwindow"></a> <code>outOfWindow</code></td><td align="left"><code>number</code></td><td align="left">Events whose <code>at</code> fell outside <code>[window.start, window.end)</code>.</td></tr><tr><td align="left"><a id="total-4"></a> <code>total</code></td><td align="left"><code>number</code></td><td align="left">Sum of <code>count</code> across buckets (events inside the window).</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficfilteroptions"></a></p>
+<h3 id="usetrafficfilteroptions">UseTrafficFilterOptions</h3>
+<h4 id="properties-29">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="events-5"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="initialorigin"></a> <code>initialOrigin?</code></td><td align="left"><a href="#trafficoriginfilter"><code>TrafficOriginFilter</code></a></td><td align="left">Default <code>user</code> — the probe found listener traffic is 94–99.6% of events, so it’s hidden until explicitly asked for.</td></tr><tr><td align="left"><a id="initialpathquery"></a> <code>initialPathQuery?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="initialresult"></a> <code>initialResult?</code></td><td align="left"><a href="#trafficresultfilter"><code>TrafficResultFilter</code></a></td><td align="left">Default <code>all</code> — the probe found ~75–80% allow in realistic sessions, so hiding either side loses diagnostic signal.</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficfilterresult"></a></p>
+<h3 id="usetrafficfilterresult">UseTrafficFilterResult</h3>
+<h4 id="properties-30">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="filter"></a> <code>filter</code></td><td align="left"><a href="#trafficfilterstate"><code>TrafficFilterState</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="filtered"></a> <code>filtered</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">Events passing all three filters, in the input order.</td></tr><tr><td align="left"><a id="setorigin"></a> <code>setOrigin</code></td><td align="left">(<code>origin</code>: <a href="#trafficoriginfilter"><code>TrafficOriginFilter</code></a>) => <code>void</code></td><td align="left">-</td></tr><tr><td align="left"><a id="setpathquery"></a> <code>setPathQuery</code></td><td align="left">(<code>pathQuery</code>: <code>string</code>) => <code>void</code></td><td align="left">-</td></tr><tr><td align="left"><a id="setresult"></a> <code>setResult</code></td><td align="left">(<code>result</code>: <a href="#trafficresultfilter"><code>TrafficResultFilter</code></a>) => <code>void</code></td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficgroupsoptions"></a></p>
+<h3 id="usetrafficgroupsoptions">UseTrafficGroupsOptions</h3>
+<h4 id="properties-31">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="events-6"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="groupbatches"></a> <code>groupBatches?</code></td><td align="left"><code>boolean</code></td><td align="left">Collapse consecutive ops sharing a <code>groupId</code>. Default true.</td></tr><tr><td align="left"><a id="grouplistenerruns"></a> <code>groupListenerRuns?</code></td><td align="left"><code>boolean</code></td><td align="left">Collapse a consecutive run of listener re-evals from the same originating op into one group — the probe found a single write can trigger 250+ re-evals. Default true.</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficgroupsresult"></a></p>
+<h3 id="usetrafficgroupsresult">UseTrafficGroupsResult</h3>
+<h4 id="properties-32">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="items-1"></a> <code>items</code></td><td align="left"><a href="#trafficlogitem"><code>TrafficLogItem</code></a>[]</td><td align="left">Events folded into a flat list of singles and groups, in the input order.</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficmetricsoptions"></a></p>
+<h3 id="usetrafficmetricsoptions">UseTrafficMetricsOptions</h3>
+<h4 id="properties-33">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="bucketcount-2"></a> <code>bucketCount?</code></td><td align="left"><code>number</code></td><td align="left">Number of buckets to divide the window into. The window itself should already be sized to the session (sandbox sessions run minutes, not days) — bucket count doesn’t need to change, only the window a caller passes in. Default 24.</td></tr><tr><td align="left"><a id="events-7"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="isadmin"></a> <code>isAdmin?</code></td><td align="left">(<code>event</code>: <code>Pick</code>&#x3C;<a href="#trafficevent"><code>TrafficEvent</code></a>, <code>"origin"</code>>) => <code>boolean</code></td><td align="left">Override admin classification (e.g. a Studio caller with <code>authLens</code> provenance available — see the module doc). Defaults to <code>origin === 'admin'</code>.</td></tr><tr><td align="left"><a id="window-2"></a> <code>window</code></td><td align="left"><a href="#timewindow"><code>TimeWindow</code></a></td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficmonitoroptions"></a></p>
+<h3 id="usetrafficmonitoroptions">UseTrafficMonitorOptions</h3>
+<h4 id="properties-34">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="buffersize"></a> <code>bufferSize?</code></td><td align="left"><code>number</code></td><td align="left">Ring-buffer cap. Once exceeded, the oldest events are dropped. Default 5000 (~3 MB worst case — see the traffic-monitor probe findings).</td></tr><tr><td align="left"><a id="paused"></a> <code>paused?</code></td><td align="left"><code>boolean</code></td><td align="left">Whether the buffer starts paused. Default false.</td></tr><tr><td align="left"><a id="source"></a> <code>source</code></td><td align="left"><a href="#trafficsource"><code>TrafficSource</code></a></td><td align="left">The subscription function — <code>sandbox.onRequest</code> satisfies this directly. Pass a stable reference; the hook re-subscribes on identity change.</td></tr><tr><td align="left"><a id="transform"></a> <code>transform?</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <a href="#trafficevent"><code>TrafficEvent</code></a></td><td align="left">Runs per event before buffering — return a (possibly trimmed) event. Lets the consumer shrink oversized payloads without the library knowing payload semantics. Identity is read fresh on each event, so it need not be memoized.</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficmonitorresult"></a></p>
+<h3 id="usetrafficmonitorresult">UseTrafficMonitorResult</h3>
+<h4 id="properties-35">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="clear"></a> <code>clear</code></td><td align="left">() => <code>void</code></td><td align="left">Empty the buffer.</td></tr><tr><td align="left"><a id="counts"></a> <code>counts</code></td><td align="left"><a href="#trafficcounts"><code>TrafficCounts</code></a></td><td align="left">-</td></tr><tr><td align="left"><a id="events-8"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">The buffered events, oldest first.</td></tr><tr><td align="left"><a id="ispaused"></a> <code>isPaused</code></td><td align="left"><code>boolean</code></td><td align="left">-</td></tr><tr><td align="left"><a id="pause"></a> <code>pause</code></td><td align="left">() => <code>void</code></td><td align="left">Stop appending — incoming events are dropped while paused.</td></tr><tr><td align="left"><a id="resume"></a> <code>resume</code></td><td align="left">() => <code>void</code></td><td align="left">Resume appending.</td></tr></tbody></table></div>
+<hr>
+<p><a id="usetrafficstatsoptions"></a></p>
+<h3 id="usetrafficstatsoptions">UseTrafficStatsOptions</h3>
+<h4 id="properties-36">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="events-9"></a> <code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td><td align="left">-</td></tr><tr><td align="left"><a id="toppaths"></a> <code>topPaths?</code></td><td align="left"><code>number</code></td><td align="left">Cap on <code>byPath</code> entries — paths are unbounded. Default 10.</td></tr></tbody></table></div>
+<h2 id="type-aliases">Type Aliases</h2>
+<p><a id="billableserieskey"></a></p>
+<h3 id="billableserieskey">BillableSeriesKey</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> BillableSeriesKey</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "reads"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"writes"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"deletes"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<hr>
+<p><a id="rulesserieskey"></a></p>
+<h3 id="rulesserieskey">RulesSeriesKey</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> RulesSeriesKey</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "allows"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"denies"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"errors"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<hr>
+<p><a id="trafficgroupkind-1"></a></p>
+<h3 id="trafficgroupkind">TrafficGroupKind</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> TrafficGroupKind</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "batch"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"transaction"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"listener-run"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<hr>
+<p><a id="trafficlogitem"></a></p>
+<h3 id="trafficlogitem">TrafficLogItem</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> TrafficLogItem</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> TrafficGroup</span><span style="color:#ABB2BF"> | </span><span style="color:#E5C07B">TrafficSingle</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<hr>
+<p><a id="trafficmethod"></a></p>
+<h3 id="trafficmethod">TrafficMethod</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> TrafficMethod</span><span style="color:#56B6C2"> =</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"get"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"list"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"create"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"update"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"set"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"delete"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"remove"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"push"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"listen"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#98C379">"transaction"</span></span>
+<span class="line"><span style="color:#ABB2BF">  | </span><span style="color:#E5C07B">string</span><span style="color:#ABB2BF"> &#x26; {</span></span>
+<span class="line"><span style="color:#ABB2BF">};</span></span></code></pre>
+<p>The traffic domain types. <code>TrafficEvent</code> is structurally identical
+to <code>pyric/sandbox</code>’s <code>RequestEvent</code> (locked in
+the design rationale) — but the library defines its
+own copy so it never imports <code>pyric/sandbox</code>. <code>sandbox.onRequest</code>
+is assignable as a <code>TrafficSource</code> with zero adapter code; a prod
+log feed can satisfy the same shape.</p>
+<hr>
+<p><a id="trafficorigin"></a></p>
+<h3 id="trafficorigin">TrafficOrigin</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> TrafficOrigin</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "user"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"listener"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"transaction"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"batch"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"admin"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"system"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<hr>
+<p><a id="trafficoriginfilter"></a></p>
+<h3 id="trafficoriginfilter">TrafficOriginFilter</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> TrafficOriginFilter</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "user"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"all"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"listener"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p><code>user</code> keeps everything that isn’t a listener re-eval (user ops
+plus their transaction/batch sub-ops); <code>listener</code> keeps only
+listener re-evals; <code>all</code> keeps everything.</p>
+<hr>
+<p><a id="trafficresult"></a></p>
+<h3 id="trafficresult">TrafficResult</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> TrafficResult</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "allow"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"deny"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"unsupported"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"error"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"not-applicable"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<hr>
+<p><a id="trafficresultfilter"></a></p>
+<h3 id="trafficresultfilter">TrafficResultFilter</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> TrafficResultFilter</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "all"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"allow"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"deny"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<hr>
+<p><a id="trafficsource"></a></p>
+<h3 id="trafficsource">TrafficSource()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> TrafficSource</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> (</span><span style="color:#61AFEF">cb</span><span style="color:#ABB2BF">: (</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#E5C07B"> void</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> () </span><span style="color:#C678DD">=></span><span style="color:#E5C07B"> void</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>A subscription function: register a callback, get back an
+unsubscribe. <code>pyric/sandbox</code>’s <code>Sandbox.onRequest</code> matches this
+signature exactly.</p>
+<h4 id="parameters">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>cb</code></td><td align="left">(<code>event</code>: <a href="#trafficevent"><code>TrafficEvent</code></a>) => <code>void</code></td></tr></tbody></table></div>
+<h4 id="returns">Returns</h4>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#ABB2BF">(): </span><span style="color:#E5C07B">void</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h5 id="returns-1">Returns</h5>
+<p><code>void</code></p>
+<h2 id="variables">Variables</h2>
+<p><a id="billable_series_defs"></a></p>
+<h3 id="billable_series_defs">BILLABLE_SERIES_DEFS</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">const</span><span style="color:#E5C07B"> BILLABLE_SERIES_DEFS</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">ReadonlyArray</span><span style="color:#ABB2BF">&#x3C;{</span></span>
+<span class="line"><span style="color:#E06C75">  key</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">BillableSeriesKey</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#E06C75">  label</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">string</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#ABB2BF">}>;</span></span></code></pre>
+<hr>
+<p><a id="rules_series_defs"></a></p>
+<h3 id="rules_series_defs">RULES_SERIES_DEFS</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">const</span><span style="color:#E5C07B"> RULES_SERIES_DEFS</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">ReadonlyArray</span><span style="color:#ABB2BF">&#x3C;{</span></span>
+<span class="line"><span style="color:#E06C75">  key</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">RulesSeriesKey</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#E06C75">  label</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">string</span><span style="color:#ABB2BF">;</span></span>
+<span class="line"><span style="color:#ABB2BF">}>;</span></span></code></pre>
+<h2 id="functions">Functions</h2>
+<p><a id="bucketbillablemetrics"></a></p>
+<h3 id="bucketbillablemetrics">bucketBillableMetrics()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> bucketBillableMetrics</span><span style="color:#ABB2BF">(</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   events</span><span style="color:#ABB2BF">: </span><span style="color:#C678DD">readonly</span><span style="color:#E5C07B"> TrafficEvent</span><span style="color:#ABB2BF">[],</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   window</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TimeWindow</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   bucketCount</span><span style="color:#C678DD">?</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">number</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#61AFEF">   isAdmin</span><span style="color:#C678DD">?</span><span style="color:#ABB2BF">: (</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">Pick</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">"origin"</span><span style="color:#ABB2BF">>) </span><span style="color:#C678DD">=></span><span style="color:#E5C07B"> boolean</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">TrafficMetricsResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Pure kernel behind <a href="#usebillablemetrics">useBillableMetrics</a> — usable outside React.</p>
+<h4 id="parameters-1">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>events</code></td><td align="left">readonly <a href="#trafficevent"><code>TrafficEvent</code></a>[]</td></tr><tr><td align="left"><code>window</code></td><td align="left"><a href="#timewindow"><code>TimeWindow</code></a></td></tr><tr><td align="left"><code>bucketCount?</code></td><td align="left"><code>number</code></td></tr><tr><td align="left"><code>isAdmin?</code></td><td align="left">(<code>event</code>: <code>Pick</code>&#x3C;<a href="#trafficevent"><code>TrafficEvent</code></a>, <code>"origin"</code>>) => <code>boolean</code></td></tr></tbody></table></div>
+<h4 id="returns-2">Returns</h4>
+<p><a href="#trafficmetricsresult"><code>TrafficMetricsResult</code></a></p>
+<hr>
+<p><a id="bucketrulesmetrics"></a></p>
+<h3 id="bucketrulesmetrics">bucketRulesMetrics()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> bucketRulesMetrics</span><span style="color:#ABB2BF">(</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   events</span><span style="color:#ABB2BF">: </span><span style="color:#C678DD">readonly</span><span style="color:#E5C07B"> TrafficEvent</span><span style="color:#ABB2BF">[],</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   window</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TimeWindow</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   bucketCount</span><span style="color:#C678DD">?</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">number</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#61AFEF">   isAdmin</span><span style="color:#C678DD">?</span><span style="color:#ABB2BF">: (</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">Pick</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">"origin"</span><span style="color:#ABB2BF">>) </span><span style="color:#C678DD">=></span><span style="color:#E5C07B"> boolean</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">TrafficMetricsResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Pure kernel behind <a href="#userulesmetrics">useRulesMetrics</a> — usable outside React.</p>
+<h4 id="parameters-2">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>events</code></td><td align="left">readonly <a href="#trafficevent"><code>TrafficEvent</code></a>[]</td></tr><tr><td align="left"><code>window</code></td><td align="left"><a href="#timewindow"><code>TimeWindow</code></a></td></tr><tr><td align="left"><code>bucketCount?</code></td><td align="left"><code>number</code></td></tr><tr><td align="left"><code>isAdmin?</code></td><td align="left">(<code>event</code>: <code>Pick</code>&#x3C;<a href="#trafficevent"><code>TrafficEvent</code></a>, <code>"origin"</code>>) => <code>boolean</code></td></tr></tbody></table></div>
+<h4 id="returns-3">Returns</h4>
+<p><a href="#trafficmetricsresult"><code>TrafficMetricsResult</code></a></p>
+<hr>
+<p><a id="buckettraffic"></a></p>
+<h3 id="buckettraffic">bucketTraffic()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> bucketTraffic</span><span style="color:#ABB2BF">(</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   events</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">[],</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   window</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TimeWindow</span><span style="color:#ABB2BF">,</span></span>
+<span class="line"><span style="color:#E06C75;font-style:italic">   bucketCount</span><span style="color:#C678DD">?</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">number</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">UseTrafficBucketsResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>The pure bucketing kernel behind <a href="#usetrafficbuckets">useTrafficBuckets</a> — usable
+outside React. Returns an empty result for a non-positive
+<code>bucketCount</code> or a zero/negative-width window.</p>
+<h4 id="parameters-3">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>events</code></td><td align="left"><a href="#trafficevent"><code>TrafficEvent</code></a>[]</td></tr><tr><td align="left"><code>window</code></td><td align="left"><a href="#timewindow"><code>TimeWindow</code></a></td></tr><tr><td align="left"><code>bucketCount?</code></td><td align="left"><code>number</code></td></tr></tbody></table></div>
+<h4 id="returns-4">Returns</h4>
+<p><a href="#usetrafficbucketsresult"><code>UseTrafficBucketsResult</code></a></p>
+<hr>
+<p><a id="classifybillable"></a></p>
+<h3 id="classifybillable">classifyBillable()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> classifyBillable</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">Pick</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">"method"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"result"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"origin"</span><span style="color:#ABB2BF">>, </span><span style="color:#61AFEF">isAdmin</span><span style="color:#C678DD">?</span><span style="color:#ABB2BF">: (</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">Pick</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">"origin"</span><span style="color:#ABB2BF">>) </span><span style="color:#C678DD">=></span><span style="color:#E5C07B"> boolean</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">BillableSeriesKey</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Classify a billable op, or <code>null</code> if it isn’t one / never ran.</p>
+<h4 id="parameters-4">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>event</code></td><td align="left"><code>Pick</code>&#x3C;<a href="#trafficevent"><code>TrafficEvent</code></a>, <code>"method"</code> | <code>"result"</code> | <code>"origin"</code>></td></tr><tr><td align="left"><code>isAdmin?</code></td><td align="left">(<code>event</code>: <code>Pick</code>&#x3C;<a href="#trafficevent"><code>TrafficEvent</code></a>, <code>"origin"</code>>) => <code>boolean</code></td></tr></tbody></table></div>
+<h4 id="returns-5">Returns</h4>
+<p><a href="#billableserieskey"><code>BillableSeriesKey</code></a></p>
+<hr>
+<p><a id="classifyrules"></a></p>
+<h3 id="classifyrules">classifyRules()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> classifyRules</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">Pick</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">"result"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"origin"</span><span style="color:#ABB2BF">>, </span><span style="color:#61AFEF">isAdmin</span><span style="color:#C678DD">?</span><span style="color:#ABB2BF">: (</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">Pick</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">"origin"</span><span style="color:#ABB2BF">>) </span><span style="color:#C678DD">=></span><span style="color:#E5C07B"> boolean</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">RulesSeriesKey</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Classify a rules-engine verdict, or <code>null</code> if it isn’t one (bypassed,
+unsupported, or not-applicable).</p>
+<h4 id="parameters-5">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>event</code></td><td align="left"><code>Pick</code>&#x3C;<a href="#trafficevent"><code>TrafficEvent</code></a>, <code>"result"</code> | <code>"origin"</code>></td></tr><tr><td align="left"><code>isAdmin?</code></td><td align="left">(<code>event</code>: <code>Pick</code>&#x3C;<a href="#trafficevent"><code>TrafficEvent</code></a>, <code>"origin"</code>>) => <code>boolean</code></td></tr></tbody></table></div>
+<h4 id="returns-6">Returns</h4>
+<p><a href="#rulesserieskey"><code>RulesSeriesKey</code></a></p>
+<hr>
+<p><a id="defaultformattime"></a></p>
+<h3 id="defaultformattime">defaultFormatTime()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> defaultFormatTime</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">at</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">number</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">string</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Default <code>HH:MM:SS</code> timestamp formatter. Components accept a
+<code>formatTime</code> prop to override — this is just the fallback so the
+library has no hard locale dependency.</p>
+<h4 id="parameters-6">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>at</code></td><td align="left"><code>number</code></td></tr></tbody></table></div>
+<h4 id="returns-7">Returns</h4>
+<p><code>string</code></p>
+<hr>
+<p><a id="isadminevent"></a></p>
+<h3 id="isadminevent">isAdminEvent()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> isAdminEvent</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">Pick</span><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E5C07B">TrafficEvent</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">"origin"</span><span style="color:#ABB2BF">>): </span><span style="color:#E5C07B">boolean</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Default admin predicate: the one signal the public <code>TrafficEvent</code>
+type declares. See the module doc for the known Firestore gap.</p>
+<h4 id="parameters-7">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>event</code></td><td align="left"><code>Pick</code>&#x3C;<a href="#trafficevent"><code>TrafficEvent</code></a>, <code>"origin"</code>></td></tr></tbody></table></div>
+<h4 id="returns-8">Returns</h4>
+<p><code>boolean</code></p>
+<hr>
+<p><a id="reasonverdict"></a></p>
+<h3 id="reasonverdict">reasonVerdict()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> reasonVerdict</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">reason</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">string</span><span style="color:#ABB2BF">): </span><span style="color:#98C379">"allow"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"deny"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"neutral"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Classifies a simulator debug line as a deny / allow / neutral
+verdict so consumers can tint reason rows via
+<code>[data-pyric-reason-verdict="…"]</code>.</p>
+<h4 id="parameters-8">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>reason</code></td><td align="left"><code>string</code></td></tr></tbody></table></div>
+<h4 id="returns-9">Returns</h4>
+<p><code>"allow"</code> | <code>"deny"</code> | <code>"neutral"</code></p>
+<hr>
+<p><a id="ruleheatmap"></a></p>
+<h3 id="ruleheatmap">RuleHeatmap()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> RuleHeatmap</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">RuleHeatmapProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless rule heatmap — one row per rule, busiest first. Each row
+exposes two styling channels:</p>
+<ul>
+<li><code>data-pyric-rule-heat</code> — a discrete bucket (<code>none</code>/<code>low</code>/
+<code>medium</code>/<code>high</code>) by deny ratio, for threshold-based coloring.</li>
+<li><code>--pyric-deny-ratio</code> — the raw 0–1 ratio as a CSS custom
+property, for a proportional bar / gradient.</li>
+</ul>
+<p>Counts render as separate elements (<code>data-pyric-rule-total</code>,
+<code>-allows</code>, <code>-denies</code>) so the consumer can show numbers, bars, or
+both.</p>
+<p>Styling hooks: <code>[data-pyric-ui="rule-heatmap"]</code>,
+<code>[data-pyric-rule-row]</code> (with <code>data-pyric-rule-index</code>,
+<code>data-pyric-rule-heat</code>, <code>data-pyric-selected</code>).</p>
+<h4 id="parameters-9">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#ruleheatmapprops"><code>RuleHeatmapProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-10">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="trafficdetail"></a></p>
+<h3 id="trafficdetail">TrafficDetail()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TrafficDetail</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficDetailProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless drill-in panel for a single traffic event. Renders the
+header (result + origin + timestamp + method/path + matched rule),
+a consumer classification slot, then JSON sections for auth,
+request payload, and resource before/after via <code>&#x3C;JsonView></code>, plus
+the reasons list, <code>triggeredBy</code>, and <code>groupId</code>.</p>
+<p><code>evalMs</code> appears here as a minor header field only — it is not a
+log column (local simulator; latency is de-featured per
+the design rationale).</p>
+<p>Styling hooks: <code>[data-pyric-ui="traffic-detail"]</code>,
+<code>[data-pyric-traffic-section]</code> (with <code>data-pyric-section-label</code>),
+<code>[data-pyric-traffic-reason]</code> (with <code>data-pyric-reason-verdict</code>).</p>
+<h4 id="parameters-10">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#trafficdetailprops"><code>TrafficDetailProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-11">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="trafficgrouprow"></a></p>
+<h3 id="trafficgrouprow">TrafficGroupRow()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TrafficGroupRow</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficGroupRowProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>A collapsible group row — one header summarizing a batch,
+transaction, or listener-run, expanding to the member rows. The
+header carries <code>data-pyric-group-kind</code> and a <code>data-pyric-group-*</code>
+count/deny rollup; expansion state is <code>data-pyric-expanded</code>.</p>
+<p>Styling hooks: <code>[data-pyric-traffic-group]</code>,
+<code>[data-pyric-traffic-group-header]</code> (with <code>data-pyric-group-kind</code>),
+<code>[data-pyric-traffic-group-members]</code>.</p>
+<h4 id="parameters-11">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#trafficgrouprowprops"><code>TrafficGroupRowProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-12">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="trafficlinechart"></a></p>
+<h3 id="trafficlinechart">TrafficLineChart()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TrafficLineChart</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficLineChartProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Hand-rolled SVG line chart, no charting dependency — plain lines over
+a 0..100 viewBox so CSS drives the actual size (intrinsic layout, no
+fixed pixel chart). Each series draws only when <code>visible</code> includes
+its key (or <code>visible</code> is omitted). The y-scale is the max value
+across the currently VISIBLE series only, so toggling a tall series
+off rescales the rest up — matching the Console reference.</p>
+<p>Interaction: hovering (or focusing, via the invisible per-bucket hit
+targets) shows a tooltip with the bucket’s time range and each visible
+series’ value at that bucket — <code>[data-pyric-chart-tooltip]</code>, positioned
+via <code>--pyric-hover-x</code>.</p>
+<p>Styling hooks: <code>[data-pyric-ui="traffic-line-chart"]</code>,
+<code>[data-pyric-chart-svg]</code>, <code>[data-pyric-chart-line]</code> (with
+<code>data-pyric-series-key</code>, <code>data-pyric-series-index</code> — the same index a
+<code>TrafficMetricCards</code> card carries, so line + card colors line up),
+<code>[data-pyric-chart-hit]</code> (with <code>data-pyric-point-index</code>),
+<code>[data-pyric-chart-tooltip]</code>, <code>[data-pyric-tooltip-row]</code>.</p>
+<h4 id="parameters-12">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#trafficlinechartprops"><code>TrafficLineChartProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-13">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="trafficlog"></a></p>
+<h3 id="trafficlog">TrafficLog()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TrafficLog</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficLogProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless traffic log — a Chrome DevTools Network-panel-style event
+stream. Below <code>virtualizeThreshold</code> it renders a plain <code>&#x3C;ul></code>;
+above it, TanStack-Virtual via <code>&#x3C;VirtualList></code>.</p>
+<p>Styling hooks: <code>[data-pyric-ui="traffic-log"]</code>,
+<code>[data-pyric-traffic-entry]</code> (the list item wrapper), plus the
+<code>&#x3C;TrafficRow></code> hooks.</p>
+<h4 id="parameters-13">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#trafficlogprops"><code>TrafficLogProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-14">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="trafficmetriccards"></a></p>
+<h3 id="trafficmetriccards">TrafficMetricCards()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TrafficMetricCards</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficMetricCardsProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>The period-total strip: one card per series, each showing the series’
+total for the current window. Doubles as BOTH the chart’s legend row
+(pass <code>visible</code> + <code>onToggle</code> to get the checkbox-toggle semantics) AND
+the standalone fallback presentation when a chart isn’t warranted —
+this component never depends on <a href="#trafficlinechart">TrafficLineChart</a>.</p>
+<p>Styling hooks: <code>[data-pyric-ui="traffic-metric-cards"]</code>,
+<code>[data-pyric-metric-card]</code> (with <code>data-pyric-metric-key</code>,
+<code>data-pyric-series-index</code> — the color channel a chart’s lines also
+key off of, so a card and its line always match), <code>[data-pyric-metric-hidden]</code>
+when toggled off.</p>
+<h4 id="parameters-14">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#trafficmetriccardsprops"><code>TrafficMetricCardsProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-15">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="trafficrow"></a></p>
+<h3 id="trafficrow">TrafficRow()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TrafficRow</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficRowProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>One headless traffic row — timestamp, method badge, path, and an
+optional consumer classification slot. The raw result is exposed as
+<code>data-pyric-result</code> on the row (for tinting/filtering); rendering a
+verdict/outcome label is the consumer’s job via
+<code>renderClassification</code> — the row itself draws no result chip, so a
+consumer verdict never collides with a built-in one. Latency is
+intentionally absent: this is a local simulator, so <code>evalMs</code> lives
+in <code>&#x3C;TrafficDetail></code> only.</p>
+<p>Styling hooks:</p>
+<ul>
+<li><code>[data-pyric-traffic-row]</code> — the row button, with
+<code>data-pyric-result</code>, <code>data-pyric-origin</code>, <code>data-pyric-method</code></li>
+<li><code>[data-pyric-traffic-row][data-pyric-selected]</code> — active row</li>
+<li><code>[data-pyric-traffic-time]</code> / <code>[data-pyric-traffic-path]</code></li>
+<li><code>[data-pyric-traffic-service]</code> — the service label (firestore / rtdb /
+storage / auth), rendered even when unknown (empty) so fixed-width
+styling keeps the columns aligned</li>
+<li>method renders as <code>&#x3C;Badge></code> (<code>data-pyric-badge-kind</code>)</li>
+</ul>
+<h4 id="parameters-15">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#trafficrowprops"><code>TrafficRowProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-16">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="trafficstats"></a></p>
+<h3 id="trafficstats">TrafficStats()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TrafficStats</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficStatsProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless aggregation panel. Renders the totals, the deny rate, and
+count breakdowns by method / origin / path. The deny rate is
+exposed both as text and as a <code>--pyric-deny-rate</code> CSS custom
+property on the root for a proportional meter.</p>
+<p>Styling hooks: <code>[data-pyric-ui="traffic-stats"]</code>,
+<code>[data-pyric-stat]</code> (with <code>data-pyric-stat-key</code>),
+<code>[data-pyric-stat-group]</code> (with <code>data-pyric-stat-group-label</code>),
+<code>[data-pyric-stat-bucket]</code>.</p>
+<h4 id="parameters-16">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#trafficstatsprops"><code>TrafficStatsProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-17">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="traffictimeline"></a></p>
+<h3 id="traffictimeline">TrafficTimeline()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TrafficTimeline</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TrafficTimelineProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless volume-over-time histogram — the time axis for the traffic
+lens. Buckets events into N bars; each bar stacks denies (dark, at
+the base) under the allow remainder, matching the Studio mock.</p>
+<p>Per-bucket styling channels (on <code>[data-pyric-bucket]</code>):</p>
+<ul>
+<li><code>data-pyric-bucket-count</code> / <code>-denies</code> — raw integers.</li>
+<li><code>--pyric-bucket-h</code> — full bar height, 0..1 of the tallest bucket.</li>
+<li><code>--pyric-bucket-deny-h</code> — deny sub-stack height, same scale.
+The deny segment (<code>[data-pyric-bucket-deny]</code>) and allow segment
+(<code>[data-pyric-bucket-allow]</code>) are separate children so the consumer
+colors them independently.</li>
+</ul>
+<p>A <code>[data-pyric-brush]</code> overlay marks a sub-range via
+<code>--pyric-brush-left</code> / <code>--pyric-brush-right</code> (0..1 fractions). The
+<code>[data-pyric-live]</code> edge marker sits at <code>--pyric-live-x</code>.</p>
+<p>Styling hooks: <code>[data-pyric-ui="traffic-timeline"]</code>,
+<code>[data-pyric-timeline-header]</code>, <code>[data-pyric-timeline-bars]</code>,
+<code>[data-pyric-bucket]</code> (with <code>data-pyric-bucket-index</code>,
+<code>data-pyric-has-denies</code>, <code>data-pyric-bucket-selected</code>),
+<code>[data-pyric-bucket-summary]</code>, <code>[data-pyric-brush]</code>, <code>[data-pyric-live]</code>,
+<code>[data-pyric-timeline-axis]</code>.</p>
+<h4 id="parameters-17">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#traffictimelineprops"><code>TrafficTimelineProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-18">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="usebillablemetrics"></a></p>
+<h3 id="usebillablemetrics">useBillableMetrics()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> useBillableMetrics</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">UseTrafficMetricsOptions</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">TrafficMetricsResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Reads / writes / deletes, bucketed over <code>window</code>. See the module doc
+for the billable mapping + the “read ops, not billable reads” caveat.</p>
+<h4 id="parameters-18">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#usetrafficmetricsoptions"><code>UseTrafficMetricsOptions</code></a></td></tr></tbody></table></div>
+<h4 id="returns-19">Returns</h4>
+<p><a href="#trafficmetricsresult"><code>TrafficMetricsResult</code></a></p>
+<hr>
+<p><a id="useruleheatmap"></a></p>
+<h3 id="useruleheatmap">useRuleHeatmap()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> useRuleHeatmap</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">UseRuleHeatmapOptions</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">UseRuleHeatmapResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Rolls a traffic buffer up by <code>matchedRule.ruleIndex</code>: how often
+each rule fired, and how that split across allow / deny /
+unsupported. Pure derivation — feed it the filtered or full
+event list depending on what the heatmap should reflect.</p>
+<h4 id="parameters-19">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#useruleheatmapoptions"><code>UseRuleHeatmapOptions</code></a></td></tr></tbody></table></div>
+<h4 id="returns-20">Returns</h4>
+<p><a href="#useruleheatmapresult"><code>UseRuleHeatmapResult</code></a></p>
+<hr>
+<p><a id="userulesmetrics"></a></p>
+<h3 id="userulesmetrics">useRulesMetrics()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> useRulesMetrics</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">UseTrafficMetricsOptions</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">TrafficMetricsResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Allows / denies / errors, bucketed over <code>window</code>. Excludes
+rules-bypassed (admin) ops — see the module doc.</p>
+<h4 id="parameters-20">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#usetrafficmetricsoptions"><code>UseTrafficMetricsOptions</code></a></td></tr></tbody></table></div>
+<h4 id="returns-21">Returns</h4>
+<p><a href="#trafficmetricsresult"><code>TrafficMetricsResult</code></a></p>
+<hr>
+<p><a id="usetrafficbuckets"></a></p>
+<h3 id="usetrafficbuckets">useTrafficBuckets()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> useTrafficBuckets</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">UseTrafficBucketsOptions</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">UseTrafficBucketsResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Buckets a traffic buffer into <code>bucketCount</code> equal time slices over
+<code>window</code>, counting total + denied events per slice. Pure
+derivation — the histogram component renders the result, this hook
+(and <code>bucketTraffic</code> under it) owns the math.</p>
+<p>Each bucket carries a <code>heightRatio</code> and <code>denyHeightRatio</code>
+(0..1, scaled to the tallest bucket) so the consumer can map them
+straight onto a bar height without re-finding the max.</p>
+<h4 id="parameters-21">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#usetrafficbucketsoptions"><code>UseTrafficBucketsOptions</code></a></td></tr></tbody></table></div>
+<h4 id="returns-22">Returns</h4>
+<p><a href="#usetrafficbucketsresult"><code>UseTrafficBucketsResult</code></a></p>
+<hr>
+<p><a id="usetrafficfilter"></a></p>
+<h3 id="usetrafficfilter">useTrafficFilter()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> useTrafficFilter</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">UseTrafficFilterOptions</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">UseTrafficFilterResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Derives a filtered view over a traffic buffer along three
+dimensions: origin, result, and a case-insensitive path substring.
+Owns the filter state; pure derivation otherwise.</p>
+<h4 id="parameters-22">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#usetrafficfilteroptions"><code>UseTrafficFilterOptions</code></a></td></tr></tbody></table></div>
+<h4 id="returns-23">Returns</h4>
+<p><a href="#usetrafficfilterresult"><code>UseTrafficFilterResult</code></a></p>
+<hr>
+<p><a id="usetrafficgroups"></a></p>
+<h3 id="usetrafficgroups">useTrafficGroups()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> useTrafficGroups</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">UseTrafficGroupsOptions</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">UseTrafficGroupsResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Folds a traffic buffer into a list of singles and collapsible
+groups. Two grouping modes, both over <em>consecutive</em> events:</p>
+<ul>
+<li><code>groupId</code> — batch/transaction sub-ops sharing an id collapse
+into one <code>batch</code> / <code>transaction</code> group.</li>
+<li>listener runs — a consecutive run of listener re-evals from the
+same originating op collapses into one <code>listener-run</code> group.
+A run of length 1 stays a single (no point collapsing one row).</li>
+</ul>
+<p>Pure derivation; the input order is preserved.</p>
+<h4 id="parameters-23">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#usetrafficgroupsoptions"><code>UseTrafficGroupsOptions</code></a></td></tr></tbody></table></div>
+<h4 id="returns-24">Returns</h4>
+<p><a href="#usetrafficgroupsresult"><code>UseTrafficGroupsResult</code></a></p>
+<hr>
+<p><a id="usetrafficmonitor"></a></p>
+<h3 id="usetrafficmonitor">useTrafficMonitor()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> useTrafficMonitor</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">UseTrafficMonitorOptions</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">UseTrafficMonitorResult</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Buffers a traffic stream into a capped ring buffer with
+pause/resume/clear. Decoupled from <code>pyric/sandbox</code> — <code>source</code> is
+just a <code>(cb) => unsubscribe</code> function.</p>
+<p>Pause is consumer-side: while paused, the subscription stays
+attached but incoming events are dropped (not queued). This
+matches the probe decision — a <code>load-test</code>-shaped session can emit
+100k+ events, so queueing-while-paused would defeat the point.</p>
+<h4 id="parameters-24">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#usetrafficmonitoroptions"><code>UseTrafficMonitorOptions</code></a></td></tr></tbody></table></div>
+<h4 id="returns-25">Returns</h4>
+<p><a href="#usetrafficmonitorresult"><code>UseTrafficMonitorResult</code></a></p>
+<hr>
+<p><a id="usetrafficstats"></a></p>
+<h3 id="usetrafficstats">useTrafficStats()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> useTrafficStats</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">UseTrafficStatsOptions</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">TrafficStatsSummary</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Aggregations over a traffic buffer: totals, deny rate, and counts
+broken down by method, origin, and path. Pure derivation — feed it
+the filtered or full event list depending on what the panel
+should reflect.</p>
+<h4 id="parameters-25">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#usetrafficstatsoptions"><code>UseTrafficStatsOptions</code></a></td></tr></tbody></table></div>
+<h4 id="returns-26">Returns</h4>
+<p><a href="#trafficstatssummary"><code>TrafficStatsSummary</code></a></p>  </article> </main> <aside class="doc-toc api-symbols" aria-label="API symbols"> <h2 class="doc-toc-heading">Symbols</h2> <input class="api-symbol-filter" type="search" placeholder="Filter symbols" aria-label="Filter API symbols" data-api-symbol-filter> <div class="api-symbol-groups" data-api-symbol-groups> <section class="api-symbol-group" data-api-symbol-group> <a class="api-symbol-kind" href="#interfaces"> Interfaces </a> <ul> <li data-api-symbol="metricpoint"> <a href="#metricpoint">MetricPoint</a> </li><li data-api-symbol="metricseries"> <a href="#metricseries">MetricSeries</a> </li><li data-api-symbol="ruleheatmapentry"> <a href="#ruleheatmapentry">RuleHeatmapEntry</a> </li><li data-api-symbol="ruleheatmapprops"> <a href="#ruleheatmapprops">RuleHeatmapProps</a> </li><li data-api-symbol="timewindow"> <a href="#timewindow">TimeWindow</a> </li><li data-api-symbol="trafficauthstate"> <a href="#trafficauthstate">TrafficAuthState</a> </li><li data-api-symbol="trafficbucket"> <a href="#trafficbucket">TrafficBucket</a> </li><li data-api-symbol="trafficcounts"> <a href="#trafficcounts">TrafficCounts</a> </li><li data-api-symbol="trafficdetailprops"> <a href="#trafficdetailprops">TrafficDetailProps</a> </li><li data-api-symbol="trafficevent"> <a href="#trafficevent">TrafficEvent</a> </li><li data-api-symbol="trafficfilterstate"> <a href="#trafficfilterstate">TrafficFilterState</a> </li><li data-api-symbol="trafficgroup"> <a href="#trafficgroup">TrafficGroup</a> </li><li data-api-symbol="trafficgrouprowprops"> <a href="#trafficgrouprowprops">TrafficGroupRowProps</a> </li><li data-api-symbol="trafficlinechartprops"> <a href="#trafficlinechartprops">TrafficLineChartProps</a> </li><li data-api-symbol="trafficlogprops"> <a href="#trafficlogprops">TrafficLogProps</a> </li><li data-api-symbol="trafficmatchedrule"> <a href="#trafficmatchedrule">TrafficMatchedRule</a> </li><li data-api-symbol="trafficmetriccardsprops"> <a href="#trafficmetriccardsprops">TrafficMetricCardsProps</a> </li><li data-api-symbol="trafficmetricsresult"> <a href="#trafficmetricsresult">TrafficMetricsResult</a> </li><li data-api-symbol="trafficresourcestate"> <a href="#trafficresourcestate">TrafficResourceState</a> </li><li data-api-symbol="trafficrowprops"> <a href="#trafficrowprops">TrafficRowProps</a> </li><li data-api-symbol="trafficsingle"> <a href="#trafficsingle">TrafficSingle</a> </li><li data-api-symbol="trafficstatbucket"> <a href="#trafficstatbucket">TrafficStatBucket</a> </li><li data-api-symbol="trafficstatsprops"> <a href="#trafficstatsprops">TrafficStatsProps</a> </li><li data-api-symbol="trafficstatssummary"> <a href="#trafficstatssummary">TrafficStatsSummary</a> </li><li data-api-symbol="traffictimelineprops"> <a href="#traffictimelineprops">TrafficTimelineProps</a> </li><li data-api-symbol="useruleheatmapoptions"> <a href="#useruleheatmapoptions">UseRuleHeatmapOptions</a> </li><li data-api-symbol="useruleheatmapresult"> <a href="#useruleheatmapresult">UseRuleHeatmapResult</a> </li><li data-api-symbol="usetrafficbucketsoptions"> <a href="#usetrafficbucketsoptions">UseTrafficBucketsOptions</a> </li><li data-api-symbol="usetrafficbucketsresult"> <a href="#usetrafficbucketsresult">UseTrafficBucketsResult</a> </li><li data-api-symbol="usetrafficfilteroptions"> <a href="#usetrafficfilteroptions">UseTrafficFilterOptions</a> </li><li data-api-symbol="usetrafficfilterresult"> <a href="#usetrafficfilterresult">UseTrafficFilterResult</a> </li><li data-api-symbol="usetrafficgroupsoptions"> <a href="#usetrafficgroupsoptions">UseTrafficGroupsOptions</a> </li><li data-api-symbol="usetrafficgroupsresult"> <a href="#usetrafficgroupsresult">UseTrafficGroupsResult</a> </li><li data-api-symbol="usetrafficmetricsoptions"> <a href="#usetrafficmetricsoptions">UseTrafficMetricsOptions</a> </li><li data-api-symbol="usetrafficmonitoroptions"> <a href="#usetrafficmonitoroptions">UseTrafficMonitorOptions</a> </li><li data-api-symbol="usetrafficmonitorresult"> <a href="#usetrafficmonitorresult">UseTrafficMonitorResult</a> </li><li data-api-symbol="usetrafficstatsoptions"> <a href="#usetrafficstatsoptions">UseTrafficStatsOptions</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group> <a class="api-symbol-kind" href="#type-aliases"> Type Aliases </a> <ul> <li data-api-symbol="billableserieskey"> <a href="#billableserieskey">BillableSeriesKey</a> </li><li data-api-symbol="rulesserieskey"> <a href="#rulesserieskey">RulesSeriesKey</a> </li><li data-api-symbol="trafficgroupkind"> <a href="#trafficgroupkind">TrafficGroupKind</a> </li><li data-api-symbol="trafficlogitem"> <a href="#trafficlogitem">TrafficLogItem</a> </li><li data-api-symbol="trafficmethod"> <a href="#trafficmethod">TrafficMethod</a> </li><li data-api-symbol="trafficorigin"> <a href="#trafficorigin">TrafficOrigin</a> </li><li data-api-symbol="trafficoriginfilter"> <a href="#trafficoriginfilter">TrafficOriginFilter</a> </li><li data-api-symbol="trafficresult"> <a href="#trafficresult">TrafficResult</a> </li><li data-api-symbol="trafficresultfilter"> <a href="#trafficresultfilter">TrafficResultFilter</a> </li><li data-api-symbol="trafficsource()"> <a href="#trafficsource">TrafficSource()</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group> <a class="api-symbol-kind" href="#variables"> Variables </a> <ul> <li data-api-symbol="billable_series_defs"> <a href="#billable_series_defs">BILLABLE_SERIES_DEFS</a> </li><li data-api-symbol="rules_series_defs"> <a href="#rules_series_defs">RULES_SERIES_DEFS</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group> <a class="api-symbol-kind" href="#functions"> Functions </a> <ul> <li data-api-symbol="bucketbillablemetrics()"> <a href="#bucketbillablemetrics">bucketBillableMetrics()</a> </li><li data-api-symbol="bucketrulesmetrics()"> <a href="#bucketrulesmetrics">bucketRulesMetrics()</a> </li><li data-api-symbol="buckettraffic()"> <a href="#buckettraffic">bucketTraffic()</a> </li><li data-api-symbol="classifybillable()"> <a href="#classifybillable">classifyBillable()</a> </li><li data-api-symbol="classifyrules()"> <a href="#classifyrules">classifyRules()</a> </li><li data-api-symbol="defaultformattime()"> <a href="#defaultformattime">defaultFormatTime()</a> </li><li data-api-symbol="isadminevent()"> <a href="#isadminevent">isAdminEvent()</a> </li><li data-api-symbol="reasonverdict()"> <a href="#reasonverdict">reasonVerdict()</a> </li><li data-api-symbol="ruleheatmap()"> <a href="#ruleheatmap">RuleHeatmap()</a> </li><li data-api-symbol="trafficdetail()"> <a href="#trafficdetail">TrafficDetail()</a> </li><li data-api-symbol="trafficgrouprow()"> <a href="#trafficgrouprow">TrafficGroupRow()</a> </li><li data-api-symbol="trafficlinechart()"> <a href="#trafficlinechart">TrafficLineChart()</a> </li><li data-api-symbol="trafficlog()"> <a href="#trafficlog">TrafficLog()</a> </li><li data-api-symbol="trafficmetriccards()"> <a href="#trafficmetriccards">TrafficMetricCards()</a> </li><li data-api-symbol="trafficrow()"> <a href="#trafficrow">TrafficRow()</a> </li><li data-api-symbol="trafficstats()"> <a href="#trafficstats">TrafficStats()</a> </li><li data-api-symbol="traffictimeline()"> <a href="#traffictimeline">TrafficTimeline()</a> </li><li data-api-symbol="usebillablemetrics()"> <a href="#usebillablemetrics">useBillableMetrics()</a> </li><li data-api-symbol="useruleheatmap()"> <a href="#useruleheatmap">useRuleHeatmap()</a> </li><li data-api-symbol="userulesmetrics()"> <a href="#userulesmetrics">useRulesMetrics()</a> </li><li data-api-symbol="usetrafficbuckets()"> <a href="#usetrafficbuckets">useTrafficBuckets()</a> </li><li data-api-symbol="usetrafficfilter()"> <a href="#usetrafficfilter">useTrafficFilter()</a> </li><li data-api-symbol="usetrafficgroups()"> <a href="#usetrafficgroups">useTrafficGroups()</a> </li><li data-api-symbol="usetrafficmonitor()"> <a href="#usetrafficmonitor">useTrafficMonitor()</a> </li><li data-api-symbol="usetrafficstats()"> <a href="#usetrafficstats">useTrafficStats()</a> </li> </ul> </section> <p class="api-symbol-empty" data-api-symbol-empty hidden>No matching symbols</p> </div> </aside> </div> <script type="module">const a=document.querySelector("[data-api-symbol-filter]"),d=[...document.querySelectorAll("[data-api-symbol-group]")],n=document.querySelector("[data-api-symbol-empty]");a?.addEventListener("input",()=>{const t=a.value.trim().toLowerCase();let o=0;for(const i of d){let e=0;i.querySelectorAll("[data-api-symbol]").forEach(l=>{const r=!t||(l.dataset.apiSymbol??"").includes(t);l.hidden=!r,r&&e++}),i.hidden=e===0,o+=e}n&&(n.hidden=o>0)});</script> <script type="module">const s=new Map;document.querySelectorAll('.doc-toc a[href^="#"]').forEach(t=>s.set(decodeURIComponent(t.hash.slice(1)),t));if(s.size>0){const t=new Set,n=()=>{let o=null;for(const e of s.keys())if(t.has(e)){o=e;break}s.forEach((e,c)=>e.classList.toggle("active",c===o))},r=new IntersectionObserver(o=>{for(const e of o)e.isIntersecting?t.add(e.target.id):t.delete(e.target.id);n()},{rootMargin:"-72px 0px -60% 0px"});s.forEach((o,e)=>{const c=document.getElementById(e);c&&r.observe(c)})}</script> <script type="module">document.querySelector('.studio__nav [aria-current="page"]')?.scrollIntoView({block:"nearest",inline:"center"});</script> </body> </html>