@rogatio/cli 6.5.0 → 6.6.0

package/dist/editor/index.css

@@ -276,13 +276,26 @@
 .rogatio-editor [data-editor-command-bar] {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
   margin-block: 1rem;
   padding: 0.65rem 0.75rem;
   border: 1px solid var(--rogatio-border);
   border-radius: var(--rogatio-radius);
   background: var(--rogatio-surface-raised);
 }
+.rogatio-editor [data-action-cluster] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+.rogatio-editor [data-action-cluster=danger] {
+  margin-left: 0.15rem;
+  padding-left: 0.65rem;
+  border-left: 1px solid var(--rogatio-border);
+}
 .rogatio-editor [data-editor-form] {
   display: grid;
   gap: 1rem;
@@ -385,9 +398,57 @@
   justify-content: space-between;
   gap: 0.65rem;
 }
-.rogatio-editor [data-group-heading] button[data-group-enable] {
-  padding: 0.55rem 1.05rem;
-  font-size: 0.95rem;
+.rogatio-editor [data-group-identity] {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+.rogatio-editor [data-group-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+.rogatio-editor [data-action-dock] {
+  display: grid;
+  margin-top: 0.35rem;
+  border: 1px solid var(--rogatio-border);
+  border-left: 3px solid var(--rogatio-card-rule-edge);
+  border-radius: var(--rogatio-radius);
+  background: var(--rogatio-surface-inset);
+  overflow: hidden;
+}
+.rogatio-editor [data-dock-row] {
+  display: grid;
+  grid-template-columns: 5.5rem minmax(0, 1fr);
+  column-gap: 0.75rem;
+  align-items: center;
+  padding: 0.65rem 0.85rem;
+}
+.rogatio-editor [data-dock-row] + [data-dock-row] {
+  border-top: 1px solid var(--rogatio-border);
+}
+.rogatio-editor [data-dock-label] {
+  font-family: var(--rogatio-font-mono);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--rogatio-muted);
+}
+.rogatio-editor [data-dock-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem 0.75rem;
+  min-width: 0;
+}
+.rogatio-editor [data-dock-actions] [data-action-cluster=tools] {
+  margin-right: auto;
 }
 .rogatio-editor [data-group-heading] h2,
 .rogatio-editor [data-section-heading] h2,
@@ -605,6 +666,22 @@
   .rogatio-editor [data-section-heading] {
     align-items: flex-start;
   }
+  .rogatio-editor [data-group-actions] {
+    margin-left: 0;
+    width: 100%;
+  }
+  .rogatio-editor [data-dock-row] {
+    grid-template-columns: 1fr;
+    justify-items: start;
+    row-gap: 0.45rem;
+  }
+  .rogatio-editor [data-dock-actions] {
+    justify-content: flex-start;
+    width: 100%;
+  }
+  .rogatio-editor [data-dock-actions] [data-action-cluster=tools] {
+    margin-right: 0;
+  }
   .rogatio-editor [data-rule-actions] {
     justify-content: flex-start;
     width: 100%;
@@ -630,7 +707,9 @@
   .rogatio-editor fieldset,
   .rogatio-editor [data-rule-card],
   .rogatio-editor [data-group-row],
-  .rogatio-editor [data-editor-check-group] {
+  .rogatio-editor [data-editor-check-group],
+  .rogatio-editor [data-action-dock],
+  .rogatio-editor [data-action-cluster=danger] {
     border-color: ButtonText;
     background: Canvas;
   }

package/dist/editor/index.js

@@ -2238,7 +2238,7 @@ var EditorControllerImpl = class {
     this.commandBar = this.document.createElement("div");
     this.commandBar.dataset.editorCommandBar = "true";
     this.commandBar.setAttribute("role", "toolbar");
-    this.commandBar.setAttribute("aria-label", "Editor commands");
+    this.commandBar.setAttribute("aria-label", "Project actions");
     this.form = this.document.createElement("form");
     this.form.dataset.editorForm = "true";
     this.form.noValidate = true;
@@ -3485,7 +3485,7 @@ var EditorControllerImpl = class {
       const draftGroup = this.draftGroupForSavedId(groupId);
       const groupName = displayName(
         draftGroup?.name,
-        button.parentElement?.querySelector("h2")?.textContent?.trim() ?? ""
+        this.host.querySelector("[data-group-heading] h2")?.textContent?.trim() ?? ""
       );
       this.applyGroupEnablementLabel(button, enabled.has(groupId), groupName);
     }
@@ -3616,6 +3616,7 @@ var EditorControllerImpl = class {
     } else {
       this.renderGroup(this.route.groupId);
     }
+    this.renderActionDock();
     this.decorateExtensionControls();
     this.renderSummary();
     this.renderMigrationNotices();
@@ -3722,24 +3723,185 @@ var EditorControllerImpl = class {
   renderCommandBar() {
     this.commandBar.replaceChildren();
     this.commandBar.setAttribute("aria-busy", this.saving ? "true" : "false");
+    this.commandBar.setAttribute("aria-label", "Project actions");
+    const tools = this.document.createElement("div");
+    tools.dataset.actionCluster = "tools";
     if (this.aiAssistPanel) {
-      this.commandBar.append(
+      tools.append(
         this.createCommandButton("AI Assist", "ai-assist", this.saving)
       );
     }
-    this.commandBar.append(
-      this.createCommandButton("Validate", "validate", this.saving),
+    tools.append(this.createCommandButton("Validate", "validate", this.saving));
+    if (this.route.kind === "project") {
+      tools.append(
+        this.createCommandButton(
+          "Add group",
+          "add-group",
+          this.saving,
+          {},
+          "primary"
+        )
+      );
+    } else if (this.route.kind === "test") {
+      tools.append(
+        this.createCommandButton(
+          "Run test",
+          "test:run",
+          this.saving || this.testRunning,
+          {},
+          "primary"
+        )
+      );
+    }
+    const commit = this.document.createElement("div");
+    commit.dataset.actionCluster = "commit";
+    commit.append(
+      this.createCommandButton("Cancel", "cancel", this.saving),
       this.createCommandButton(
         "Save",
         "save",
         this.saving || !this.isDirty(),
         {},
         "primary"
-      ),
-      this.createCommandButton("Cancel", "cancel", this.saving)
+      )
     );
-    if (this.route.kind === "project") {
-      this.commandBar.append(
+    this.commandBar.append(tools, commit);
+  }
+  createGroupEnableButton(savedGroupId, groupName) {
+    const enablement = this.options.groupEnablement;
+    const enableButton = this.document.createElement("button");
+    enableButton.type = "button";
+    enableButton.dataset.groupEnable = "true";
+    enableButton.dataset.groupId = savedGroupId;
+    enableButton.dataset.btn = "primary";
+    this.applyGroupEnablementLabel(
+      enableButton,
+      enablement?.isEnabled(savedGroupId) === true,
+      groupName
+    );
+    enableButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (enableButton.disabled || !enablement) return;
+      const next = enablement.isEnabled(savedGroupId) !== true;
+      const peers = Array.from(
+        this.host.querySelectorAll(
+          "button[data-group-enable]"
+        )
+      ).filter((peer) => peer.dataset.groupId === savedGroupId);
+      for (const peer of peers) peer.disabled = true;
+      void Promise.resolve(enablement.setEnabled(savedGroupId, next)).finally(
+        () => {
+          for (const peer of peers) {
+            if (peer.isConnected) peer.disabled = false;
+          }
+        }
+      );
+    });
+    return enableButton;
+  }
+  /** Enable/Disable, Copy, and Remove as one toolbar. Remove stays visually last. */
+  createGroupActionClusters(groupId, groupName) {
+    const actions = this.document.createElement("div");
+    actions.dataset.groupActions = "true";
+    actions.setAttribute("role", "toolbar");
+    actions.setAttribute("aria-label", `Actions for group ${groupName}`);
+    const safe = this.document.createElement("div");
+    safe.dataset.actionCluster = "safe";
+    const group = this.groupById(groupId);
+    const savedGroupId = group ? this.savedGroupId(group) : void 0;
+    if (this.options.groupEnablement && savedGroupId) {
+      safe.append(this.createGroupEnableButton(savedGroupId, groupName));
+    }
+    safe.append(
+      this.createCommandButton("Copy group", "copy-group", this.saving, {
+        groupId
+      })
+    );
+    const danger = this.document.createElement("div");
+    danger.dataset.actionCluster = "danger";
+    danger.append(
+      this.createCommandButton(
+        "Remove group",
+        "remove-group",
+        this.saving,
+        { groupId },
+        "danger"
+      )
+    );
+    actions.append(safe, danger);
+    return actions;
+  }
+  createProjectActionRow() {
+    const actions = this.document.createElement("div");
+    const tools = this.document.createElement("div");
+    tools.dataset.actionCluster = "tools";
+    if (this.aiAssistPanel) {
+      tools.append(
+        this.createCommandButton("AI Assist", "ai-assist", this.saving)
+      );
+    }
+    tools.append(this.createCommandButton("Validate", "validate", this.saving));
+    const commit = this.document.createElement("div");
+    commit.dataset.actionCluster = "commit";
+    commit.append(
+      this.createCommandButton("Cancel", "cancel", this.saving),
+      this.createCommandButton(
+        "Save",
+        "save",
+        this.saving || !this.isDirty(),
+        {},
+        "primary"
+      )
+    );
+    actions.append(tools, commit);
+    return actions;
+  }
+  appendDockRow(dock, label, actions) {
+    const row = this.document.createElement("div");
+    row.dataset.dockRow = "true";
+    const labelEl = this.document.createElement("span");
+    labelEl.dataset.dockLabel = "true";
+    labelEl.textContent = label;
+    actions.dataset.dockActions = "true";
+    row.append(labelEl, actions);
+    dock.append(row);
+  }
+  /**
+   * Repeats the actions a long page would otherwise hide: under the last rule,
+   * under the project group list, or under the test results.
+   */
+  renderActionDock() {
+    const dock = this.document.createElement("section");
+    dock.dataset.actionDock = "end";
+    dock.setAttribute("aria-label", "Repeated actions");
+    if (this.route.kind === "group") {
+      const groupId = this.route.groupId;
+      const group = this.groupById(groupId);
+      if (group) {
+        const groupName = displayName(group.name, "Unnamed group");
+        const addRule = this.document.createElement("div");
+        addRule.dataset.actionCluster = "safe";
+        addRule.append(
+          this.createCommandButton(
+            "Add rule",
+            "add-rule",
+            this.saving,
+            { groupId },
+            "primary"
+          )
+        );
+        this.appendDockRow(dock, "Rules", addRule);
+        this.appendDockRow(
+          dock,
+          "Group",
+          this.createGroupActionClusters(groupId, groupName)
+        );
+      }
+    } else if (this.route.kind === "project") {
+      const addGroup = this.document.createElement("div");
+      addGroup.dataset.actionCluster = "safe";
+      addGroup.append(
         this.createCommandButton(
           "Add group",
           "add-group",
@@ -3748,19 +3910,23 @@ var EditorControllerImpl = class {
           "primary"
         )
       );
-      return;
-    }
-    if (this.route.kind === "test") {
-      this.commandBar.append(
+      this.appendDockRow(dock, "Groups", addGroup);
+    } else {
+      const run = this.document.createElement("div");
+      run.dataset.actionCluster = "safe";
+      run.append(
         this.createCommandButton(
           "Run test",
           "test:run",
-          this.saving,
+          this.saving || this.testRunning,
           {},
           "primary"
         )
       );
+      this.appendDockRow(dock, "Test", run);
     }
+    this.appendDockRow(dock, "Project", this.createProjectActionRow());
+    this.form.append(dock);
   }
   renderProject() {
     const heading = this.document.createElement("h2");
@@ -3841,51 +4007,11 @@ var EditorControllerImpl = class {
     const groupName = displayName(group.name, "Unnamed group");
     const headingRow = this.document.createElement("div");
     headingRow.dataset.groupHeading = "true";
+    const identity = this.document.createElement("div");
+    identity.dataset.groupIdentity = "true";
     const heading = this.document.createElement("h2");
-    const copyGroup = this.createCommandButton(
-      "Copy group",
-      "copy-group",
-      this.saving,
-      { groupId }
-    );
-    const removeGroup = this.createCommandButton(
-      "Remove group",
-      "remove-group",
-      this.saving,
-      { groupId },
-      "danger"
-    );
-    const savedGroupId = this.savedGroupId(group);
-    const enablement = this.options.groupEnablement;
-    const commands = [];
-    if (enablement && savedGroupId) {
-      const enableButton = this.document.createElement("button");
-      enableButton.type = "button";
-      enableButton.dataset.groupEnable = "true";
-      enableButton.dataset.groupId = savedGroupId;
-      enableButton.dataset.btn = "primary";
-      this.applyGroupEnablementLabel(
-        enableButton,
-        enablement.isEnabled(savedGroupId) === true,
-        groupName
-      );
-      enableButton.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (enableButton.disabled) return;
-        const next = enablement.isEnabled(savedGroupId) !== true;
-        enableButton.disabled = true;
-        void Promise.resolve(enablement.setEnabled(savedGroupId, next)).finally(
-          () => {
-            if (enableButton.isConnected) enableButton.disabled = false;
-          }
-        );
-      });
-      commands.push(enableButton);
-    }
-    commands.push(copyGroup, removeGroup);
     this.renderNameHeading({
-      row: headingRow,
+      row: identity,
       heading,
       headingId: `${this.instanceId}-group-title-${groupIndex}`,
       kind: "group",
@@ -3893,8 +4019,12 @@ var EditorControllerImpl = class {
       namePath: pointer("groups", groupIndex, "name"),
       name: group.name,
       fallback: "Unnamed group",
-      commands
+      commands: []
     });
+    headingRow.append(
+      identity,
+      this.createGroupActionClusters(groupId, groupName)
+    );
     this.form.append(headingRow);
     const rulesSection = this.document.createElement("section");
     rulesSection.dataset.rulesSection = "true";

package/package.json

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