@rogatio/cli 5.12.0 → 5.13.0

package/dist/editor/index.css

@@ -329,18 +329,47 @@
   align-items: end;
   margin-bottom: 0.5rem;
 }
+.rogatio-editor [data-editor-hint] {
+  margin: 0 0 0.75rem;
+  color: var(--rogatio-muted);
+  font-size: 0.8125rem;
+}
+.rogatio-editor [data-editor-check-groups] {
+  display: grid;
+  gap: 0.85rem;
+}
+.rogatio-editor [data-editor-check-group-label] {
+  margin: 0 0 0.35rem;
+  font-weight: 700;
+  font-family: var(--rogatio-font-mono);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--rogatio-muted);
+}
 .rogatio-editor [data-editor-checks] {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  gap: 0.35rem 0.7rem;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 0.45rem 0.7rem;
 }
 .rogatio-editor [data-editor-checks] label {
   display: flex;
   gap: 0.4rem;
-  align-items: center;
+  align-items: flex-start;
   font-weight: 500;
   color: var(--rogatio-muted);
 }
+.rogatio-editor [data-editor-check-text] {
+  display: grid;
+  gap: 0.1rem;
+  min-width: 0;
+}
+.rogatio-editor [data-editor-check-text] small {
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1.25;
+  color: var(--rogatio-muted);
+}
 .rogatio-editor [data-group-heading],
 .rogatio-editor [data-section-heading],
 .rogatio-editor [data-rule-heading] {

package/dist/editor/index.js

@@ -1621,6 +1621,42 @@ var RESOURCE_TYPES2 = [
   "webbundle",
   "other"
 ];
+var RESOURCE_TYPE_GLOSS = {
+  main_frame: "Top-level page navigation",
+  sub_frame: "iframe / embedded frame",
+  stylesheet: "CSS stylesheet",
+  script: "JavaScript file",
+  image: "Image",
+  font: "Web font",
+  object: "Plugin / <object> / <embed>",
+  media: "Audio / video",
+  xmlhttprequest: "XHR and fetch",
+  ping: "Hyperlink ping / beacon",
+  csp_report: "CSP violation report",
+  websocket: "WebSocket",
+  webtransport: "WebTransport",
+  webbundle: "Web Bundle",
+  other: "Anything else"
+};
+var RESOURCE_TYPE_GROUPS = [
+  { label: "Page", types: ["main_frame", "sub_frame"] },
+  {
+    label: "Assets",
+    types: ["stylesheet", "script", "image", "font", "media", "object"]
+  },
+  {
+    label: "Network",
+    types: [
+      "xmlhttprequest",
+      "websocket",
+      "webtransport",
+      "ping",
+      "csp_report",
+      "webbundle"
+    ]
+  },
+  { label: "Other", types: ["other"] }
+];
 var HTTP_METHODS2 = [
   "GET",
   "POST",
@@ -3765,20 +3801,50 @@ var EditorControllerImpl = class {
     const legend = this.document.createElement("legend");
     legend.textContent = "Resource types";
     fieldset.append(legend);
-    const checks = this.document.createElement("div");
-    checks.dataset.editorChecks = "true";
-    for (const resourceType of RESOURCE_TYPES2) {
-      const label = this.document.createElement("label");
-      const input = this.document.createElement("input");
-      input.type = "checkbox";
-      input.dataset.resourcePath = `${rulePath}/resourceTypes`;
-      input.dataset.resourceType = resourceType;
-      input.checked = rule.resourceTypes.includes(resourceType);
-      input.disabled = this.saving;
-      label.append(input, this.document.createTextNode(resourceType));
-      checks.append(label);
+    const hint = this.document.createElement("p");
+    hint.dataset.editorHint = "true";
+    hint.textContent = "Chrome request categories this rule can match.";
+    fieldset.append(hint);
+    const groups = this.document.createElement("div");
+    groups.dataset.editorCheckGroups = "true";
+    for (const group of RESOURCE_TYPE_GROUPS) {
+      const groupEl = this.document.createElement("div");
+      groupEl.dataset.editorCheckGroup = "true";
+      groupEl.setAttribute("role", "group");
+      const groupLabel = this.document.createElement("p");
+      groupLabel.dataset.editorCheckGroupLabel = "true";
+      groupLabel.id = `${this.instanceId}-resource-type-group-${group.label.toLowerCase()}-${safeText(rule.id)}`;
+      groupLabel.textContent = group.label;
+      groupEl.setAttribute("aria-labelledby", groupLabel.id);
+      groupEl.append(groupLabel);
+      const checks = this.document.createElement("div");
+      checks.dataset.editorChecks = "true";
+      for (const resourceType of group.types) {
+        const gloss = RESOURCE_TYPE_GLOSS[resourceType];
+        const label = this.document.createElement("label");
+        label.title = gloss;
+        const input = this.document.createElement("input");
+        input.type = "checkbox";
+        input.dataset.resourcePath = `${rulePath}/resourceTypes`;
+        input.dataset.resourceType = resourceType;
+        input.checked = rule.resourceTypes.includes(resourceType);
+        input.disabled = this.saving;
+        input.title = gloss;
+        const text = this.document.createElement("span");
+        text.dataset.editorCheckText = "true";
+        const idSpan = this.document.createElement("span");
+        idSpan.dataset.editorCheckId = "true";
+        idSpan.textContent = resourceType;
+        const glossEl = this.document.createElement("small");
+        glossEl.textContent = gloss;
+        text.append(idSpan, glossEl);
+        label.append(input, text);
+        checks.append(label);
+      }
+      groupEl.append(checks);
+      groups.append(groupEl);
     }
-    fieldset.append(checks);
+    fieldset.append(groups);
     parent.append(fieldset);
   }
   mountExtension(parent, extension, groupId, ruleId, rulePath) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogatio/cli",
-  "version": "5.12.0",
+  "version": "5.13.0",
   "private": false,
   "type": "module",
   "description": "Local-first browser request and response rules — editor host, file verification, test runner, and runtime dispatch.",