Add payload reference and policy rail

docs/_javascript/filter_tool.js

@@ -1802,6 +1802,42 @@
       URL.revokeObjectURL(url);
     });
 
+    const policyPanel = root.querySelector(".filter-policy");
+    const policyGrid = policyPanel ? policyPanel.parentElement : null;
+    const policyMarker = document.createComment("policy-draft-home");
+    const widePolicyLayout = global.matchMedia("(min-width: 90rem)");
+    let policyRail = null;
+    let policySidebar = null;
+
+    if (policyPanel && policyGrid) policyGrid.insertBefore(policyMarker, policyPanel);
+
+    function placePolicyDraft() {
+      if (!policyPanel || !policyGrid) return;
+      const sidebar = document.querySelector(".md-sidebar--secondary");
+      const sidebarInner = sidebar ? sidebar.querySelector(".md-sidebar__inner") : null;
+      if (widePolicyLayout.matches && sidebarInner) {
+        if (!policyRail) {
+          policyRail = document.createElement("div");
+          policyRail.className = "filter-tool filter-policy-rail";
+          policyRail.setAttribute("aria-label", "Policy draft");
+        }
+        policySidebar = sidebar;
+        policySidebar.classList.add("filter-policy-sidebar");
+        sidebarInner.appendChild(policyRail);
+        policyRail.appendChild(policyPanel);
+        root.classList.add("filter-policy-detached");
+        return;
+      }
+      policyMarker.parentNode.insertBefore(policyPanel, policyMarker.nextSibling);
+      root.classList.remove("filter-policy-detached");
+      if (policySidebar) policySidebar.classList.remove("filter-policy-sidebar");
+      if (policyRail) policyRail.remove();
+      policySidebar = null;
+    }
+
+    widePolicyLayout.addEventListener("change", placePolicyDraft);
+    placePolicyDraft();
+
     const requestedExample = new URLSearchParams(global.location.search).get("example");
     if (requestedExample && COMPLETE_EXAMPLES[requestedExample]) assignRules(clone(COMPLETE_EXAMPLES[requestedExample]));
     resetForm();

docs/_stylesheets/filter_tool.css

@@ -177,6 +177,24 @@
   align-items: start;
 }
 
+.filter-tool.filter-policy-detached .filter-tool-grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.filter-policy-rail {
+  margin: 1rem 0 2rem;
+}
+
+.filter-policy-rail .filter-policy {
+  width: 100%;
+}
+
+@media (min-width: 90rem) {
+  .md-sidebar--secondary.filter-policy-sidebar {
+    width: 20rem;
+  }
+}
+
 .filter-panel {
   min-width: 0;
   padding: 1rem;

docs/filter_tool.md

@@ -50,11 +50,11 @@ in the simulator below. The examples draw from
             <tr><th><code>type=</code> value</th><th>Matches</th></tr>
           </thead>
           <tbody>
-            <tr><td><code>grp_data</code></td><td>Only the named payload type</td></tr>
+            <tr><td><a href="#payload-type-reference"><code>grp_data</code></a></td><td>Only the named payload type; see every exact type below</td></tr>
             <tr><td><code>any</code></td><td>Every payload type</td></tr>
             <tr><td><code>class:group</code></td><td>GRP_TXT and GRP_DATA</td></tr>
             <tr><td><code>class:login</code></td><td>REQ, RESPONSE, TXT_MSG, ANON_REQ, and PATH</td></tr>
-            <tr><td><code>class:other</code></td><td>Every remaining payload type</td></tr>
+            <tr><td><code>class:other</code></td><td>Every remaining payload type that is not group or login</td></tr>
           </tbody>
         </table>
         <table class="filter-primer-table">
@@ -579,6 +579,30 @@ in the simulator below. The examples draw from
   </section>
 </div>
 
+## Payload type reference
+
+Use an exact `type=` value when a rule should match only one payload type.
+The class column shows which broader selector also matches it.
+
+| `type=` value | Payload | Class |
+| --- | --- | --- |
+| `req` | Request | `class:login` |
+| `response` | Response | `class:login` |
+| `txt_msg` | Peer text message | `class:login` |
+| `ack` | Acknowledgment | `class:other` |
+| `advert` | Node advertisement | `class:other` |
+| `grp_txt` | Group-channel text | `class:group` |
+| `grp_data` | Group-channel datagram | `class:group` |
+| `anon_req` | Anonymous request | `class:login` |
+| `path` | Returned path | `class:login` |
+| `trace` | Path trace | `class:other` |
+| `multipart` | One frame in a multipart sequence | `class:other` |
+| `control` | Control or discovery data | `class:other` |
+| `ota` | OTA-over-LoRa data | `class:other` |
+| `13` | Reserved payload type 13 | `class:other` |
+| `14` | Reserved payload type 14 | `class:other` |
+| `raw_custom` | Application-defined raw data | `class:other` |
+
 ## Proposed evaluation contract
 
 The simulator uses these rules: