@rogatio/cli 6.19.0 → 6.20.0

package/dist/editor/index.css

@@ -156,6 +156,13 @@
   grid-template-rows: auto minmax(0, 1fr);
   min-width: 0;
 }
+.rogatio-editor [data-desktop-route-rail][hidden],
+.rogatio-editor [data-editor-header][hidden],
+.rogatio-editor [data-editor-status][hidden],
+.rogatio-editor [data-editor-summary][hidden],
+.rogatio-editor [data-editor-form][hidden] {
+  display: none;
+}
 .rogatio-editor [data-desktop-route-rail] {
   position: sticky;
   top: 0;
@@ -908,12 +915,28 @@
   margin: 0;
   color: var(--rogatio-muted);
 }
+.rogatio-editor [data-test-page] {
+  width: min(68rem, 100%);
+  margin-inline: auto;
+}
+.rogatio-editor [data-test-page-head] h2 {
+  margin: 0;
+  font-size: 1.65rem;
+  letter-spacing: -0.03em;
+}
+.rogatio-editor [data-test-page] [data-test-description] {
+  margin: 0.35rem 0 1rem;
+  max-width: 40rem;
+  color: var(--rogatio-muted);
+}
 @media (min-width: 52rem) {
-  .rogatio-editor [data-test-dialog] [data-test-panel] {
+  .rogatio-editor [data-test-dialog] [data-test-panel],
+  .rogatio-editor [data-test-page] [data-test-panel] {
     grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.7fr);
     align-items: start;
   }
-  .rogatio-editor [data-test-dialog] [data-test-panel] > fieldset {
+  .rogatio-editor [data-test-dialog] [data-test-panel] > fieldset,
+  .rogatio-editor [data-test-page] [data-test-panel] > fieldset {
     grid-row: 1 / span 3;
   }
 }

package/dist/editor/index.js

@@ -2541,6 +2541,11 @@ var EditorControllerImpl = class {
   confirmation;
   groupPickerOpen = false;
   testConsoleOpen = false;
+  /** Page-surface console closed by navigation; the host is told after render. */
+  pendingConsoleLeave = false;
+  /** Rule a console leave is opening, when the destination has one. */
+  consoleLeaveRuleId = null;
+  consoleSurface;
   projectActions;
   focusRequest;
   saving = false;
@@ -2572,6 +2577,7 @@ var EditorControllerImpl = class {
     this.root = options.root;
     this.document = options.root.ownerDocument;
     this.options = options;
+    this.consoleSurface = options.consoleSurface === "page" ? "page" : "dialog";
     this.projectActions = normalizeProjectActions(options.projectActions);
     this.extensions = extensions;
     this.instanceId = `rogatio-editor-${++editorInstanceCount}`;
@@ -2680,7 +2686,7 @@ var EditorControllerImpl = class {
     if (this.destroyed) return;
     const target = event.target;
     if (!(target instanceof Element)) return;
-    if (this.testConsoleOpen && target instanceof HTMLElement && target.dataset.testConsole !== void 0 && event.target === target) {
+    if (this.consoleSurface === "dialog" && this.testConsoleOpen && target instanceof HTMLElement && target.dataset.testConsole !== void 0 && event.target === target) {
       this.closeTestConsole();
       return;
     }
@@ -2800,12 +2806,12 @@ var EditorControllerImpl = class {
       this.closeGroupPicker();
       return;
     }
-    if (event.key === "Escape" && this.testConsoleOpen) {
+    if (event.key === "Escape" && this.consoleSurface === "dialog" && this.testConsoleOpen) {
       event.preventDefault();
       this.closeTestConsole();
       return;
     }
-    if (event.key === "Tab" && this.testConsoleOpen && !this.confirmation) {
+    if (event.key === "Tab" && this.consoleSurface === "dialog" && this.testConsoleOpen && !this.confirmation) {
       this.trapTestConsoleFocus(event);
     }
     const target = event.target;
@@ -2955,7 +2961,7 @@ var EditorControllerImpl = class {
       return;
     }
     if (command === "test:open-rule") {
-      this.testConsoleOpen = false;
+      this.releaseConsolePage();
       this.navigateToRule(element.dataset.groupId, element.dataset.ruleId);
       return;
     }
@@ -3712,7 +3718,7 @@ var EditorControllerImpl = class {
     this.statusMessage = count === 0 ? "The project could not be tested." : `${count} validation error${count === 1 ? "" : "s"} found.`;
     const first = diagnostics[0];
     if (first) {
-      this.testConsoleOpen = false;
+      this.releaseConsolePage();
       this.navigateToPath(first.path);
       return;
     }
@@ -3958,6 +3964,7 @@ var EditorControllerImpl = class {
   }
   navigate(route, groupId) {
     if (route === "test") {
+      if (this.consoleSurface === "page") return;
       this.openTestConsole();
       return;
     }
@@ -3969,7 +3976,7 @@ var EditorControllerImpl = class {
     } else {
       return;
     }
-    this.testConsoleOpen = false;
+    this.releaseConsolePage();
     this.groupPickerOpen = false;
     if (returnFocusToGroups) this.focusRequest = "route:groups";
     this.closeRenameOnLeave();
@@ -3998,11 +4005,8 @@ var EditorControllerImpl = class {
   }
   navigateToGroup(groupId) {
     this.groupPickerOpen = false;
-    this.testConsoleOpen = false;
-    const groupIds = new Set(
-      this.draft.groups.map((group) => typeof group.id === "string" ? group.id : "").filter((id) => id.length > 0)
-    );
-    const resolved = resolveGroupRoute(groupId, groupIds);
+    this.releaseConsolePage();
+    const resolved = resolveGroupRoute(groupId, this.draftGroupIds());
     if (resolved.kind === "group") {
       this.route = { kind: "group", groupId: resolved.groupId };
     } else {
@@ -4012,6 +4016,31 @@ var EditorControllerImpl = class {
     this.statusMessage = "";
     this.render();
   }
+  syncRoute(groupId) {
+    if (this.destroyed) return;
+    const resolved = resolveGroupRoute(groupId, this.draftGroupIds());
+    const next = resolved.kind === "group" ? { kind: "group", groupId: resolved.groupId } : { kind: "project" };
+    if (this.sameRoute(this.route, next)) return;
+    this.groupPickerOpen = false;
+    this.route = next;
+    this.closeRenameOnLeave();
+    if (this.consoleSurface === "page" && this.testConsoleOpen) return;
+    this.testRequestId += 1;
+    this.statusMessage = "";
+    this.render();
+  }
+  draftGroupIds() {
+    return new Set(
+      this.draft.groups.map((group) => typeof group.id === "string" ? group.id : "").filter((id) => id.length > 0)
+    );
+  }
+  sameRoute(left, right) {
+    if (left.kind === "project" && right.kind === "project") return true;
+    if (left.kind === "group" && right.kind === "group") {
+      return left.groupId === right.groupId;
+    }
+    return false;
+  }
   syncGroupEnablement(enabledGroupIds) {
     if (this.destroyed) return;
     const enabled = /* @__PURE__ */ new Set();
@@ -4064,6 +4093,8 @@ var EditorControllerImpl = class {
    * failing.
    */
   navigateToRule(groupId, ruleId) {
+    const rule = safeText(ruleId);
+    this.consoleLeaveRuleId = rule.length > 0 ? rule : null;
     this.navigateToGroup(groupId);
     const resolvedGroup = safeText(this.currentGroupId());
     const resolvedRule = safeText(ruleId);
@@ -4072,7 +4103,7 @@ var EditorControllerImpl = class {
   }
   navigateToSearchResult(path) {
     this.groupPickerOpen = false;
-    this.testConsoleOpen = false;
+    this.releaseConsolePage();
     const segments = decodePointer(path);
     if (segments?.[0] !== "groups") {
       this.route = { kind: "project" };
@@ -4088,6 +4119,7 @@ var EditorControllerImpl = class {
     this.route = { kind: "group", groupId: group.id };
     this.searchQuery = "";
     this.statusMessage = "Jumped to rule.";
+    this.consoleLeaveRuleId = rule && typeof rule.id === "string" && rule.id.length > 0 ? rule.id : null;
     this.render();
     if (rule && typeof rule.id === "string") {
       this.revealRuleCard(group.id, rule.id);
@@ -4097,7 +4129,8 @@ var EditorControllerImpl = class {
     const segments = decodePointer(path);
     if (segments?.[0] !== "groups") {
       this.route = { kind: "project" };
-      this.testConsoleOpen = false;
+      this.consoleLeaveRuleId = null;
+      this.releaseConsolePage();
       this.focusRequest = path;
       this.render();
       return;
@@ -4107,9 +4140,11 @@ var EditorControllerImpl = class {
     const group = this.draft.groups[groupIndex];
     if (!group || typeof group.id !== "string") return;
     this.route = { kind: "group", groupId: group.id };
-    this.testConsoleOpen = false;
-    const last = segments[segments.length - 1];
     const ruleIndex = arrayIndex(segments[3] ?? "");
+    const namedRule = ruleIndex === void 0 ? void 0 : group.rules[ruleIndex];
+    this.consoleLeaveRuleId = namedRule && typeof namedRule.id === "string" && namedRule.id.length > 0 ? namedRule.id : null;
+    this.releaseConsolePage();
+    const last = segments[segments.length - 1];
     const entityPath = last === "name" ? path : segments.length === 2 ? pointer("groups", groupIndex, "name") : segments.length === 4 && ruleIndex !== void 0 ? pointer("groups", groupIndex, "rules", ruleIndex, "name") : path;
     this.focusRequest = entityPath;
     this.render();
@@ -4167,8 +4202,20 @@ var EditorControllerImpl = class {
     this.renderConfirmation();
     this.renderGroupPicker();
     this.renderTestConsole();
+    this.syncConsolePageChrome();
+    const leavingConsole = this.pendingConsoleLeave;
+    this.pendingConsoleLeave = false;
+    const leaveGroupId = this.currentGroupId() ?? null;
+    const leaveRuleId = this.consoleLeaveRuleId;
+    this.consoleLeaveRuleId = null;
     this.restoreFocus();
     this.focusRequest = void 0;
+    if (leavingConsole) {
+      this.options.onLeaveConsole?.({
+        groupId: leaveGroupId,
+        ruleId: leaveGroupId !== null && leaveRuleId !== null && this.ruleById(leaveGroupId, leaveRuleId) ? leaveRuleId : null
+      });
+    }
   }
   renderHeader() {
     this.header.replaceChildren();
@@ -4243,19 +4290,22 @@ var EditorControllerImpl = class {
     searchWrap.append(searchLabel, this.searchResults);
     const railTools = this.document.createElement("div");
     railTools.dataset.railTools = "true";
-    const testBtn = this.createButton("Console", "route:test");
-    testBtn.dataset.route = "test";
-    testBtn.dataset.editorKey = "route:test";
-    testBtn.dataset.btn = "secondary";
-    testBtn.disabled = this.saving;
-    testBtn.setAttribute("aria-label", "Test console");
-    testBtn.setAttribute("aria-haspopup", "dialog");
-    testBtn.setAttribute(
-      "aria-expanded",
-      this.testConsoleOpen ? "true" : "false"
-    );
-    testBtn.setAttribute("aria-controls", `${this.instanceId}-test-console`);
-    railTools.append(testBtn, searchWrap);
+    if (this.consoleSurface === "dialog") {
+      const testBtn = this.createButton("Console", "route:test");
+      testBtn.dataset.route = "test";
+      testBtn.dataset.editorKey = "route:test";
+      testBtn.dataset.btn = "secondary";
+      testBtn.disabled = this.saving;
+      testBtn.setAttribute("aria-label", "Test console");
+      testBtn.setAttribute("aria-haspopup", "dialog");
+      testBtn.setAttribute(
+        "aria-expanded",
+        this.testConsoleOpen ? "true" : "false"
+      );
+      testBtn.setAttribute("aria-controls", `${this.instanceId}-test-console`);
+      railTools.append(testBtn);
+    }
+    railTools.append(searchWrap);
     this.rail.append(railTools);
   }
   appendProjectActions(actions) {
@@ -5605,6 +5655,30 @@ var EditorControllerImpl = class {
     }
     fields.append(group);
   }
+  setConsolePage(open) {
+    if (this.destroyed || this.consoleSurface !== "page") return;
+    if (this.testConsoleOpen === open) return;
+    this.pendingConsoleLeave = false;
+    this.groupPickerOpen = false;
+    this.testConsoleOpen = open;
+    if (open) this.focusRequest = "test-urls";
+    this.render();
+  }
+  /** Close the console because the user left it for a rule, field, or route. */
+  releaseConsolePage() {
+    if (this.consoleSurface === "page" && this.testConsoleOpen) {
+      this.pendingConsoleLeave = true;
+    }
+    this.testConsoleOpen = false;
+  }
+  syncConsolePageChrome() {
+    const page = this.consoleSurface === "page" && this.testConsoleOpen;
+    this.rail.hidden = page;
+    this.header.hidden = page;
+    this.status.hidden = page;
+    this.form.hidden = page;
+    if (page) this.summary.hidden = true;
+  }
   openTestConsole() {
     this.groupPickerOpen = false;
     this.testConsoleOpen = true;
@@ -5612,12 +5686,13 @@ var EditorControllerImpl = class {
     this.render();
   }
   closeTestConsole() {
+    if (this.consoleSurface === "page") return;
     if (this.testRunning) {
       this.testRequestId += 1;
       this.testRunning = false;
       this.testNotice = "";
     }
-    this.testConsoleOpen = false;
+    this.releaseConsolePage();
     this.focusRequest = "route:test";
     this.render();
   }
@@ -5661,6 +5736,13 @@ var EditorControllerImpl = class {
   }
   renderTestConsole() {
     this.host.querySelector("[data-test-console]")?.remove();
+    this.host.querySelector("[data-test-page]")?.remove();
+    if (this.consoleSurface === "page") {
+      if ("inert" in this.layout) this.layout.inert = false;
+      if (!this.testConsoleOpen) return;
+      this.main.append(this.buildTestPage());
+      return;
+    }
     if ("inert" in this.layout) this.layout.inert = this.testConsoleOpen;
     if (!this.testConsoleOpen) return;
     const overlay = this.document.createElement("div");
@@ -5697,8 +5779,31 @@ var EditorControllerImpl = class {
     overlay.append(dialog);
     this.host.append(overlay);
   }
+  buildTestPage() {
+    const page = this.document.createElement("section");
+    page.dataset.testPage = "true";
+    page.id = `${this.instanceId}-test-console`;
+    const head = this.document.createElement("div");
+    head.dataset.testPageHead = "true";
+    const kicker = this.document.createElement("p");
+    kicker.dataset.testKicker = "true";
+    kicker.textContent = "Offline match";
+    const heading = this.document.createElement("h2");
+    heading.id = `${this.instanceId}-test-console-title`;
+    heading.textContent = "Test console";
+    page.setAttribute("aria-labelledby", heading.id);
+    const description = this.document.createElement("p");
+    description.dataset.testDescription = "true";
+    description.textContent = "Check whether these URLs match your rules. Nothing is contacted, and nothing is saved.";
+    head.append(kicker, heading, description);
+    const body = this.document.createElement("div");
+    body.dataset.testPageBody = "true";
+    this.renderTestBody(body);
+    page.append(head, body);
+    return page;
+  }
   openGroupPicker() {
-    this.testConsoleOpen = false;
+    this.releaseConsolePage();
     this.groupPickerOpen = true;
     this.focusRequest = this.draft.groups.length > 0 ? "group-picker-first" : "group-picker-close";
     this.render();

package/package.json

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