@rogatio/cli 6.9.1 → 6.10.0

package/dist/editor/index.css

@@ -163,28 +163,60 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.75rem 1rem;
   border-bottom: 1px solid var(--rogatio-border);
   background: color-mix(in srgb, var(--rogatio-surface) 92%, #000);
   padding: 0.6rem 1rem;
   backdrop-filter: blur(8px);
 }
-.rogatio-editor [data-desktop-route-rail] button {
-  border: 1px solid transparent;
-  border-radius: 999px;
-  background: transparent;
-  padding: 0.35rem 0.8rem;
+.rogatio-editor [data-route-breadcrumb] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 0;
+}
+.rogatio-editor [data-route-breadcrumb] li {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 18rem;
+}
+.rogatio-editor [data-route-breadcrumb] li + li::before {
+  content: "/";
+  margin: 0 0.45rem;
   color: var(--rogatio-muted);
+  font-weight: 500;
 }
-.rogatio-editor [data-desktop-route-rail] button:hover:not(:disabled) {
-  background: var(--rogatio-surface-raised);
-  color: var(--rogatio-text);
+.rogatio-editor [data-route-breadcrumb] button {
+  max-width: 18rem;
+  overflow: hidden;
+  border-color: transparent;
+  background: transparent;
+  padding: 0.15rem 0.2rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.rogatio-editor [data-desktop-route-rail] button[aria-current=page] {
-  border-color: rgba(59, 158, 255, 0.45);
-  background: var(--rogatio-primary-bg);
+.rogatio-editor [data-route-breadcrumb] button:hover:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--rogatio-primary);
+}
+.rogatio-editor [data-route-breadcrumb] button[aria-current=page] {
   color: var(--rogatio-text);
-  font-weight: 700;
+}
+.rogatio-editor [data-route-breadcrumb] button:not([aria-current=page]) {
+  color: var(--rogatio-muted);
+  font-weight: 600;
+}
+.rogatio-editor [data-search-wrap] {
+  margin-left: auto;
+  flex: 1 1 12rem;
+  min-width: 0;
+  max-width: 100%;
 }
 .rogatio-editor [data-editor-main] {
   min-width: 0;
@@ -192,7 +224,7 @@
 }
 .rogatio-editor [data-editor-header] {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem);
+  grid-template-columns: minmax(0, 1fr);
   gap: 1rem;
   align-items: end;
   margin-bottom: 1rem;
@@ -240,9 +272,6 @@
   min-height: 5rem;
   resize: vertical;
 }
-.rogatio-editor [data-mobile-route-nav] {
-  display: none;
-}
 .rogatio-editor [data-editor-status] {
   min-height: 1.5rem;
   margin-block: 0.5rem;
@@ -273,6 +302,17 @@
   text-align: left;
   text-decoration: underline;
 }
+.rogatio-editor [data-editor-command-bar] button[aria-current=page] {
+  border-color: rgba(59, 158, 255, 0.45);
+  background: var(--rogatio-primary-bg);
+  font-weight: 700;
+}
+.rogatio-editor [data-project-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
 .rogatio-editor [data-editor-command-bar] {
   display: flex;
   flex-wrap: wrap;
@@ -580,7 +620,8 @@
   text-decoration: underline;
   color: var(--rogatio-text);
 }
-.rogatio-editor [data-editor-confirmation] {
+.rogatio-editor [data-editor-confirmation],
+.rogatio-editor [data-group-picker] {
   position: fixed;
   inset: 0;
   z-index: 2;
@@ -605,6 +646,27 @@
   flex-wrap: wrap;
   gap: 0.5rem;
 }
+.rogatio-editor [data-group-picker-list] {
+  list-style: none;
+  margin: 0 0 1rem;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+  max-height: min(50vh, 20rem);
+  overflow: auto;
+}
+.rogatio-editor [data-group-picker-list] button {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.75rem;
+  text-align: left;
+}
+.rogatio-editor [data-group-picker-rules],
+.rogatio-editor [data-group-picker-state] {
+  color: var(--rogatio-muted);
+  font-size: 0.875rem;
+}
 .rogatio-editor [data-editor-visually-hidden] {
   position: absolute;
   width: 1px;
@@ -616,17 +678,18 @@
 }
 .rogatio-editor [data-search-wrap] {
   position: relative;
-  margin-left: auto;
 }
 .rogatio-editor [data-search-label] {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   gap: 0.15rem;
+  max-width: 100%;
   font-size: 0.75rem;
   color: var(--rogatio-muted);
 }
 .rogatio-editor [data-search-wrap] input[type=search] {
-  width: min(18rem, 60vw);
+  width: 100%;
+  max-width: 18rem;
 }
 .rogatio-editor [data-search-results] {
   position: absolute;
@@ -662,15 +725,6 @@
   .rogatio-editor [data-editor-layout] {
     display: block;
   }
-  .rogatio-editor [data-desktop-route-rail] {
-    display: none;
-  }
-  .rogatio-editor [data-mobile-route-nav] {
-    display: grid;
-    gap: 0.3rem;
-    margin-block: 1rem;
-    color: var(--rogatio-muted);
-  }
   .rogatio-editor [data-editor-header] {
     grid-template-columns: 1fr;
   }

package/dist/editor/index.js

@@ -1784,6 +1784,30 @@ var FORBIDDEN_EXTENSION_FIELDS = /* @__PURE__ */ new Set([
 var MAX_SNAPSHOT_ARRAY_LENGTH = 4096;
 var F2_MAX_URL_REGEX_LENGTH2 = 2048;
 var editorInstanceCount = 0;
+function normalizeProjectActions(value) {
+  if (!Array.isArray(value)) return [];
+  const actions = [];
+  for (let index = 0; index < value.length; index += 1) {
+    if (!Object.hasOwn(value, index)) continue;
+    const item = value[index];
+    if (!isRecord4(item)) continue;
+    const command = item.command;
+    const label = item.label;
+    if (typeof command !== "string" || command.length === 0) continue;
+    if (typeof label !== "string" || label.length === 0) continue;
+    if (item.tone === "danger") {
+      actions.push({ command, label, tone: "danger" });
+    } else {
+      actions.push({ command, label });
+    }
+  }
+  return actions;
+}
+function ruleCountLabel(count) {
+  if (count === 0) return "No rules";
+  if (count === 1) return "1 rule";
+  return `${count} rules`;
+}
 function isRecord4(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value);
 }
@@ -2262,6 +2286,8 @@ var EditorControllerImpl = class {
   extensionControls = /* @__PURE__ */ new Map();
   extensionCleanups = [];
   confirmation;
+  groupPickerOpen = false;
+  projectActions;
   focusRequest;
   saving = false;
   destroyed = false;
@@ -2291,6 +2317,7 @@ var EditorControllerImpl = class {
     this.root = options.root;
     this.document = options.root.ownerDocument;
     this.options = options;
+    this.projectActions = normalizeProjectActions(options.projectActions);
     this.extensions = extensions;
     this.instanceId = `rogatio-editor-${++editorInstanceCount}`;
     this.draft = initial;
@@ -2408,6 +2435,10 @@ var EditorControllerImpl = class {
     if (this.destroyed) return;
     const target = event.target;
     if (!(target instanceof Element)) return;
+    if (this.groupPickerOpen && target instanceof HTMLElement && target.dataset.groupPicker !== void 0 && event.target === target) {
+      this.closeGroupPicker();
+      return;
+    }
     const element = target.closest(
       "[data-command], [data-route], [data-search-result], [data-error-path]"
     );
@@ -2460,12 +2491,6 @@ var EditorControllerImpl = class {
     if (!(target instanceof HTMLInputElement || target instanceof HTMLSelectElement)) {
       return;
     }
-    if (target.dataset.mobileRoute !== void 0 && target instanceof HTMLSelectElement) {
-      const selectedOption = target.options[target.selectedIndex];
-      const groupId = selectedOption?.dataset.groupId;
-      this.navigate(target.value, groupId);
-      return;
-    }
     if (target instanceof HTMLInputElement && target.dataset.resourcePath !== void 0) {
       this.updateResourceTypes(
         target.dataset.resourcePath,
@@ -2521,6 +2546,11 @@ var EditorControllerImpl = class {
       this.render();
       return;
     }
+    if (event.key === "Escape" && this.groupPickerOpen) {
+      event.preventDefault();
+      this.closeGroupPicker();
+      return;
+    }
     const target = event.target;
     const inRenameInput = target instanceof HTMLElement && target.dataset.renameInput !== void 0;
     if (!inRenameInput) return;
@@ -2677,6 +2707,14 @@ var EditorControllerImpl = class {
       this.testUrls = url;
       this.statusMessage = "";
       this.render();
+      return;
+    }
+    if (command === "open-group-picker") {
+      this.openGroupPicker();
+      return;
+    }
+    if (command === "close-group-picker") {
+      this.closeGroupPicker();
     }
   }
   collectDiagnostics(value) {
@@ -3639,6 +3677,7 @@ var EditorControllerImpl = class {
     return enablement.isEnabled(id) !== true;
   }
   navigate(route, groupId) {
+    const returnFocusToGroups = this.groupPickerOpen;
     if (route === "project") {
       this.route = { kind: "project" };
     } else if (route === "test") {
@@ -3648,6 +3687,8 @@ var EditorControllerImpl = class {
     } else {
       return;
     }
+    this.groupPickerOpen = false;
+    if (returnFocusToGroups) this.focusRequest = "route:groups";
     this.closeRenameOnLeave();
     this.testRequestId += 1;
     this.statusMessage = "";
@@ -3673,6 +3714,7 @@ var EditorControllerImpl = class {
     }
   }
   navigateToGroup(groupId) {
+    this.groupPickerOpen = false;
     const groupIds = new Set(
       this.draft.groups.map((group) => typeof group.id === "string" ? group.id : "").filter((id) => id.length > 0)
     );
@@ -3745,6 +3787,7 @@ var EditorControllerImpl = class {
     this.revealRuleCard(resolvedGroup, resolvedRule);
   }
   navigateToSearchResult(path) {
+    this.groupPickerOpen = false;
     const segments = decodePointer(path);
     if (segments?.[0] !== "groups") {
       this.route = { kind: "project" };
@@ -3836,7 +3879,9 @@ var EditorControllerImpl = class {
     this.renderSummary();
     this.renderMigrationNotices();
     this.renderSearchResults();
+    if (this.confirmation) this.groupPickerOpen = false;
     this.renderConfirmation();
+    this.renderGroupPicker();
     this.restoreFocus();
     this.focusRequest = void 0;
   }
@@ -3849,39 +3894,7 @@ var EditorControllerImpl = class {
     dirty.dataset.dirtyState = "true";
     dirty.textContent = this.isDirty() ? "Unsaved changes" : "All changes saved";
     titleBlock.append(title, dirty);
-    const mobileNav = this.document.createElement("label");
-    mobileNav.dataset.mobileRouteNav = "true";
-    mobileNav.textContent = "Project section";
-    const select = this.document.createElement("select");
-    select.dataset.mobileRoute = "true";
-    select.dataset.editorKey = "mobile-route";
-    const projectOption = this.document.createElement("option");
-    projectOption.value = "project";
-    projectOption.textContent = "Project";
-    select.append(projectOption);
-    for (const group of this.draft.groups) {
-      const option = this.document.createElement("option");
-      option.value = "group";
-      option.dataset.groupId = safeText(group.id);
-      option.textContent = displayName(group.name, "Unnamed group");
-      select.append(option);
-    }
-    const testOption = this.document.createElement("option");
-    testOption.value = "test";
-    testOption.textContent = "Test console";
-    select.append(testOption);
-    if (this.route.kind === "project") {
-      select.value = "project";
-    } else if (this.route.kind === "test") {
-      select.value = "test";
-    } else {
-      const groupId = this.route.groupId;
-      const options = Array.from(select.options);
-      const option = options.find((value) => value.dataset.groupId === groupId);
-      if (option) select.value = "group";
-    }
-    mobileNav.append(select);
-    this.header.append(titleBlock, mobileNav);
+    this.header.append(titleBlock);
     this.status.textContent = this.statusMessage;
     this.status.setAttribute("aria-busy", this.saving ? "true" : "false");
   }
@@ -3891,30 +3904,34 @@ var EditorControllerImpl = class {
     heading.dataset.editorVisuallyHidden = "true";
     heading.textContent = "Project sections";
     this.rail.append(heading);
-    const project = this.createButton("Project", "route:project");
+    const list = this.document.createElement("ol");
+    list.dataset.routeBreadcrumb = "true";
+    const projectItem = this.document.createElement("li");
+    const project = this.createButton(
+      displayName(this.draft.name, "Project"),
+      "route:project"
+    );
     project.dataset.route = "project";
     project.dataset.editorKey = "route:project";
-    if (this.route.kind === "project")
+    if (this.route.kind === "project") {
       project.setAttribute("aria-current", "page");
-    this.rail.append(project);
-    for (const group of this.draft.groups) {
-      const groupId = safeText(group.id);
-      const name = displayName(group.name, "Unnamed group");
-      const button = this.createButton(name, `route:group:${groupId}`);
-      button.dataset.route = "group";
-      button.dataset.groupId = groupId;
-      button.dataset.editorKey = `route:group:${groupId}`;
-      if (this.route.kind === "group" && this.route.groupId === groupId) {
-        button.setAttribute("aria-current", "page");
-      }
-      this.rail.append(button);
     }
-    const testBtn = this.createButton("Test console", "route:test");
-    testBtn.dataset.route = "test";
-    testBtn.dataset.editorKey = "route:test";
-    if (this.route.kind === "test")
-      testBtn.setAttribute("aria-current", "page");
-    this.rail.append(testBtn);
+    projectItem.append(project);
+    const groupItem = this.document.createElement("li");
+    const openGroup = this.route.kind === "group" ? this.groupById(this.route.groupId) : void 0;
+    const groups = this.createButton(
+      openGroup ? displayName(openGroup.name, "Unnamed group") : "Groups",
+      "route:groups"
+    );
+    groups.dataset.command = "open-group-picker";
+    groups.dataset.editorKey = "route:groups";
+    if (openGroup) {
+      groups.dataset.groupId = safeText(openGroup.id);
+      groups.setAttribute("aria-current", "page");
+    }
+    groupItem.append(groups);
+    list.append(projectItem, groupItem);
+    this.rail.append(list);
     const searchWrap = this.document.createElement("div");
     searchWrap.dataset.searchWrap = "true";
     const searchLabel = this.document.createElement("label");
@@ -3946,7 +3963,18 @@ var EditorControllerImpl = class {
         this.createCommandButton("AI Assist", "ai-assist", this.saving)
       );
     }
-    tools.append(this.createCommandButton("Validate", "validate", this.saving));
+    const testBtn = this.createButton("Test console", "route:test");
+    testBtn.dataset.route = "test";
+    testBtn.dataset.editorKey = "route:test";
+    testBtn.dataset.btn = "secondary";
+    testBtn.disabled = this.saving;
+    if (this.route.kind === "test") {
+      testBtn.setAttribute("aria-current", "page");
+    }
+    tools.append(
+      testBtn,
+      this.createCommandButton("Validate", "validate", this.saving)
+    );
     const commit = this.document.createElement("div");
     commit.dataset.actionCluster = "commit";
     commit.append(
@@ -4123,6 +4151,7 @@ var EditorControllerImpl = class {
       description
     );
     fields.append(fieldGrid);
+    this.renderProjectActions(fields);
     this.form.append(fields);
     const groups = this.document.createElement("section");
     groups.dataset.groupListSection = "true";
@@ -5284,6 +5313,103 @@ var EditorControllerImpl = class {
     }
     return results;
   }
+  renderProjectActions(fields) {
+    if (this.projectActions.length === 0) return;
+    const group = this.document.createElement("div");
+    group.dataset.projectActions = "true";
+    group.setAttribute("role", "group");
+    group.setAttribute("aria-label", "Project settings");
+    for (const action of this.projectActions) {
+      group.append(
+        this.createCommandButton(
+          action.label,
+          action.command,
+          false,
+          {},
+          action.tone === "danger" ? "danger" : "secondary"
+        )
+      );
+    }
+    fields.append(group);
+  }
+  openGroupPicker() {
+    this.groupPickerOpen = true;
+    this.focusRequest = this.draft.groups.length > 0 ? "group-picker-first" : "group-picker-close";
+    this.render();
+  }
+  closeGroupPicker() {
+    this.groupPickerOpen = false;
+    this.focusRequest = "route:groups";
+    this.render();
+  }
+  renderGroupPicker() {
+    const existing = this.host.querySelector("[data-group-picker]");
+    existing?.remove();
+    if (!this.groupPickerOpen) return;
+    const overlay = this.document.createElement("div");
+    overlay.dataset.groupPicker = "true";
+    overlay.setAttribute("role", "presentation");
+    const dialog = this.document.createElement("section");
+    dialog.dataset.editorDialog = "true";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    const title = this.document.createElement("h2");
+    title.id = `${this.instanceId}-group-picker-title`;
+    title.textContent = "Groups";
+    dialog.setAttribute("aria-labelledby", title.id);
+    dialog.append(title);
+    if (this.draft.groups.length === 0) {
+      const empty = this.document.createElement("p");
+      empty.textContent = "No groups yet.";
+      dialog.append(empty);
+    } else {
+      const list = this.document.createElement("ul");
+      list.dataset.groupPickerList = "true";
+      for (let index = 0; index < this.draft.groups.length; index += 1) {
+        const group = this.draft.groups[index];
+        if (!group) continue;
+        const groupId = safeText(group.id);
+        const name = displayName(group.name, "Unnamed group");
+        const item = this.document.createElement("li");
+        const button = this.document.createElement("button");
+        button.type = "button";
+        button.dataset.route = "group";
+        button.dataset.groupId = groupId;
+        button.dataset.btn = "secondary";
+        button.dataset.editorKey = index === 0 ? "group-picker-first" : `group-picker:${groupId}`;
+        if (this.route.kind === "group" && this.route.groupId === groupId) {
+          button.setAttribute("aria-current", "true");
+        }
+        const nameEl = this.document.createElement("span");
+        nameEl.dataset.groupPickerName = "true";
+        nameEl.textContent = name;
+        const rulesEl = this.document.createElement("span");
+        rulesEl.dataset.groupPickerRules = "true";
+        rulesEl.textContent = ruleCountLabel(group.rules.length);
+        button.append(nameEl, rulesEl);
+        const savedId = this.savedGroupId(group);
+        if (this.options.groupEnablement && savedId) {
+          const stateEl = this.document.createElement("span");
+          stateEl.dataset.groupPickerState = "true";
+          stateEl.textContent = this.options.groupEnablement.isEnabled(savedId) ? "Enabled" : "Disabled";
+          button.append(stateEl);
+        }
+        item.append(button);
+        list.append(item);
+      }
+      dialog.append(list);
+    }
+    const actions = this.document.createElement("div");
+    actions.dataset.editorDialogActions = "true";
+    const close = this.createButton("Close", "group-picker-close");
+    close.dataset.command = "close-group-picker";
+    close.dataset.editorKey = "group-picker-close";
+    close.dataset.btn = "secondary";
+    actions.append(close);
+    dialog.append(actions);
+    overlay.append(dialog);
+    this.host.append(overlay);
+  }
   renderConfirmation() {
     const existing = this.host.querySelector("[data-editor-confirmation]");
     existing?.remove();

package/package.json

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