@rogatio/cli 5.11.2 → 5.12.0

package/dist/editor/index.css

@@ -39,8 +39,12 @@
   --rogatio-surface: #161b22;
   --rogatio-surface-raised: #1c222c;
   --rogatio-surface-inset: #10131a;
-  --rogatio-primary: #007aff;
-  --rogatio-primary-strong: #0066d6;
+  --rogatio-card-group: #171d28;
+  --rogatio-card-rule: #1a222e;
+  --rogatio-card-rule-edge: #2ec4b6;
+  --rogatio-primary: #3b9eff;
+  --rogatio-primary-strong: #1f87f0;
+  --rogatio-primary-bg: rgba(59, 158, 255, 0.16);
   --rogatio-secondary: #64748b;
   --rogatio-tertiary: #0f172a;
   --rogatio-neutral: #1e293b;
@@ -48,8 +52,9 @@
   --rogatio-muted: #94a3b8;
   --rogatio-faint: #64748b;
   --rogatio-border: rgba(148, 163, 184, 0.16);
-  --rogatio-danger: #f87171;
-  --rogatio-danger-bg: rgba(248, 113, 113, 0.12);
+  --rogatio-danger: #f07178;
+  --rogatio-danger-strong: #e2555d;
+  --rogatio-danger-bg: rgba(240, 113, 120, 0.12);
   --rogatio-success: #4ade80;
   --rogatio-success-bg: rgba(74, 222, 128, 0.12);
   --rogatio-warning: #fbbf24;
@@ -100,7 +105,8 @@
   transition:
     background-color 120ms ease,
     border-color 120ms ease,
-    color 120ms ease;
+    color 120ms ease,
+    box-shadow 120ms ease;
 }
 .rogatio-editor button:hover:not(:disabled) {
   background: var(--rogatio-surface-raised);
@@ -110,6 +116,37 @@
   cursor: not-allowed;
   opacity: 0.55;
 }
+.rogatio-editor button[data-btn=primary] {
+  border-color: transparent;
+  background: var(--rogatio-primary);
+  color: #061018;
+  font-weight: 700;
+}
+.rogatio-editor button[data-btn=primary]:hover:not(:disabled) {
+  background: var(--rogatio-primary-strong);
+  border-color: transparent;
+  color: #061018;
+  box-shadow: 0 0 0 3px var(--rogatio-primary-bg);
+}
+.rogatio-editor button[data-btn=secondary] {
+  border-color: rgba(148, 163, 184, 0.28);
+  background: transparent;
+  color: var(--rogatio-text);
+}
+.rogatio-editor button[data-btn=secondary]:hover:not(:disabled) {
+  background: var(--rogatio-surface-raised);
+  border-color: rgba(148, 163, 184, 0.4);
+}
+.rogatio-editor button[data-btn=danger] {
+  border-color: rgba(240, 113, 120, 0.35);
+  background: var(--rogatio-danger-bg);
+  color: var(--rogatio-danger);
+}
+.rogatio-editor button[data-btn=danger]:hover:not(:disabled) {
+  border-color: var(--rogatio-danger);
+  background: rgba(240, 113, 120, 0.22);
+  color: #fecaca;
+}
 .rogatio-editor :focus-visible {
   outline: 3px solid var(--rogatio-primary);
   outline-offset: 2px;
@@ -128,8 +165,9 @@
   align-items: center;
   gap: 0.35rem;
   border-bottom: 1px solid var(--rogatio-border);
-  background: var(--rogatio-surface);
+  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;
@@ -143,8 +181,8 @@
   color: var(--rogatio-text);
 }
 .rogatio-editor [data-desktop-route-rail] button[aria-current=page] {
-  border-color: rgba(0, 122, 255, 0.45);
-  background: rgba(0, 122, 255, 0.14);
+  border-color: rgba(59, 158, 255, 0.45);
+  background: var(--rogatio-primary-bg);
   color: var(--rogatio-text);
   font-weight: 700;
 }
@@ -240,6 +278,10 @@
   flex-wrap: wrap;
   gap: 0.5rem;
   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-editor-form] {
   display: grid;
@@ -249,7 +291,7 @@
   min-width: 0;
   border: 1px solid var(--rogatio-border);
   border-radius: var(--rogatio-radius);
-  background: var(--rogatio-surface);
+  background: var(--rogatio-card-group);
   padding: 1rem;
 }
 .rogatio-editor legend {
@@ -299,22 +341,90 @@
   font-weight: 500;
   color: var(--rogatio-muted);
 }
+.rogatio-editor [data-group-heading],
+.rogatio-editor [data-section-heading],
+.rogatio-editor [data-rule-heading] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+}
+.rogatio-editor [data-group-heading] h2,
+.rogatio-editor [data-section-heading] h2,
+.rogatio-editor [data-rule-heading] h3 {
+  margin: 0;
+  min-width: 0;
+}
+.rogatio-editor [data-group-list] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+.rogatio-editor [data-group-row] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border: 1px solid var(--rogatio-border);
+  border-radius: var(--rogatio-radius);
+  background: var(--rogatio-card-group);
+  padding: 0.65rem 0.85rem;
+}
+.rogatio-editor [data-group-card] {
+  background: var(--rogatio-card-group);
+  border-color: rgba(148, 163, 184, 0.2);
+}
+.rogatio-editor [data-rules-section] {
+  display: grid;
+  gap: 0.85rem;
+}
+.rogatio-editor [data-rule-list] {
+  display: grid;
+  gap: 1rem;
+}
+.rogatio-editor [data-empty-rules] {
+  margin: 0;
+  color: var(--rogatio-muted);
+  border: 1px dashed var(--rogatio-border);
+  border-radius: var(--rogatio-radius);
+  padding: 1rem;
+  background: var(--rogatio-surface-inset);
+}
 .rogatio-editor [data-rule-card] {
   display: grid;
   gap: 1rem;
-  border: 1px solid var(--rogatio-border);
+  border: 1px solid rgba(46, 196, 182, 0.22);
+  border-left: 3px solid var(--rogatio-card-rule-edge);
   border-radius: var(--rogatio-radius);
-  background: var(--rogatio-surface);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--rogatio-card-rule) 92%, #2ec4b6) 0%,
+      var(--rogatio-card-rule) 2.5rem);
   padding: 1rem;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 .rogatio-editor [data-rule-card] h3 {
   margin: 0;
   font-weight: 700;
 }
+.rogatio-editor [data-rule-card] > fieldset {
+  background: color-mix(in srgb, var(--rogatio-surface-inset) 55%, transparent);
+  border-color: rgba(148, 163, 184, 0.14);
+}
 .rogatio-editor [data-rule-actions] {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.4rem;
+  justify-content: flex-end;
+}
+.rogatio-editor [data-rule-actions] button {
+  font-size: 0.8125rem;
+  padding: 0.35rem 0.55rem;
 }
 .rogatio-editor [data-search-results] {
   margin-block: 1rem;
@@ -352,7 +462,7 @@
   width: min(32rem, 100%);
   border: 1px solid var(--rogatio-border);
   border-radius: var(--rogatio-radius);
-  background: var(--rogatio-surface);
+  background: var(--rogatio-surface-raised);
   box-shadow: 0 20px 50px rgb(0 0 0 / 45%);
   padding: 1rem;
 }
@@ -433,6 +543,15 @@
   .rogatio-editor [data-editor-header] {
     grid-template-columns: 1fr;
   }
+  .rogatio-editor [data-rule-heading],
+  .rogatio-editor [data-group-heading],
+  .rogatio-editor [data-section-heading] {
+    align-items: flex-start;
+  }
+  .rogatio-editor [data-rule-actions] {
+    justify-content: flex-start;
+    width: 100%;
+  }
 }
 @media (forced-colors: active) {
   .rogatio-editor {
@@ -443,6 +562,7 @@
     --rogatio-danger: Mark;
     --rogatio-success: ButtonText;
     --rogatio-warning: ButtonText;
+    --rogatio-card-rule-edge: Highlight;
     color: CanvasText;
     background: Canvas;
   }
@@ -451,7 +571,8 @@
   .rogatio-editor select,
   .rogatio-editor textarea,
   .rogatio-editor fieldset,
-  .rogatio-editor [data-rule-card] {
+  .rogatio-editor [data-rule-card],
+  .rogatio-editor [data-group-row] {
     border-color: ButtonText;
     background: Canvas;
   }
@@ -488,7 +609,7 @@
   gap: 0.5rem;
   border: 1px solid var(--rogatio-border);
   border-radius: var(--rogatio-radius);
-  background: var(--rogatio-surface);
+  background: var(--rogatio-card-group);
   padding: 0.75rem;
   margin-bottom: 0.75rem;
 }
@@ -506,6 +627,7 @@
   padding: 0.5rem;
   border-radius: var(--rogatio-radius-sm);
   background: var(--rogatio-surface-inset);
+  border-left: 2px solid var(--rogatio-card-rule-edge);
 }
 .rogatio-editor [data-test-rule-header] {
   display: flex;

package/dist/editor/index.js

@@ -3171,7 +3171,7 @@ var EditorControllerImpl = class {
     }
     const testOption = this.document.createElement("option");
     testOption.value = "test";
-    testOption.textContent = "Test rules";
+    testOption.textContent = "Test console";
     select.append(testOption);
     if (this.route.kind === "project") {
       select.value = "project";
@@ -3212,7 +3212,7 @@ var EditorControllerImpl = class {
       }
       this.rail.append(button);
     }
-    const testBtn = this.createButton("Test rules", "route:test");
+    const testBtn = this.createButton("Test console", "route:test");
     testBtn.dataset.route = "test";
     testBtn.dataset.editorKey = "route:test";
     if (this.route.kind === "test")
@@ -3248,44 +3248,38 @@ var EditorControllerImpl = class {
     }
     this.commandBar.append(
       this.createCommandButton("Validate", "validate", this.saving),
-      this.createCommandButton("Save", "save", this.saving || !this.isDirty()),
+      this.createCommandButton(
+        "Save",
+        "save",
+        this.saving || !this.isDirty(),
+        {},
+        "primary"
+      ),
       this.createCommandButton("Cancel", "cancel", this.saving)
     );
     if (this.route.kind === "project") {
       this.commandBar.append(
-        this.createCommandButton("Add group", "add-group", this.saving)
+        this.createCommandButton(
+          "Add group",
+          "add-group",
+          this.saving,
+          {},
+          "primary"
+        )
       );
       return;
     }
     if (this.route.kind === "test") {
       this.commandBar.append(
-        this.createCommandButton("Run test", "test:run", this.saving)
+        this.createCommandButton(
+          "Run test",
+          "test:run",
+          this.saving,
+          {},
+          "primary"
+        )
       );
-      return;
     }
-    const group = this.groupById(this.route.groupId);
-    if (!group) return;
-    const index = this.groupIndex(this.route.groupId);
-    this.commandBar.append(
-      this.createCommandButton("Add rule", "add-rule", this.saving, {
-        groupId: this.route.groupId
-      }),
-      this.createCommandButton(
-        "Move group up",
-        "move-group-up",
-        this.saving || index <= 0,
-        { groupId: this.route.groupId }
-      ),
-      this.createCommandButton(
-        "Move group down",
-        "move-group-down",
-        this.saving || index >= this.draft.groups.length - 1,
-        { groupId: this.route.groupId }
-      ),
-      this.createCommandButton("Remove group", "remove-group", this.saving, {
-        groupId: this.route.groupId
-      })
-    );
   }
   renderProject() {
     const heading = this.document.createElement("h2");
@@ -3314,6 +3308,7 @@ var EditorControllerImpl = class {
     fields.append(fieldGrid);
     this.form.append(fields);
     const groups = this.document.createElement("section");
+    groups.dataset.groupListSection = "true";
     const groupsHeading = this.document.createElement("h2");
     groupsHeading.textContent = "Groups";
     groups.append(groupsHeading);
@@ -3323,15 +3318,28 @@ var EditorControllerImpl = class {
       groups.append(empty);
     } else {
       const list = this.document.createElement("ul");
+      list.dataset.groupList = "true";
       for (const group of this.draft.groups) {
+        const groupId = safeText(group.id);
+        const groupName = displayName(group.name, "Unnamed group");
         const item = this.document.createElement("li");
-        const button = this.createButton(
-          `Edit group ${displayName(group.name, "Unnamed group")}`,
-          `route:group:${safeText(group.id)}`
+        item.dataset.groupRow = "true";
+        const open = this.createButton(
+          `Edit group ${groupName}`,
+          `route:group:${groupId}`
+        );
+        open.dataset.route = "group";
+        open.dataset.groupId = groupId;
+        open.dataset.btn = "secondary";
+        const remove = this.createCommandButton(
+          "Remove group",
+          "remove-group",
+          this.saving,
+          { groupId },
+          "danger"
         );
-        button.dataset.route = "group";
-        button.dataset.groupId = safeText(group.id);
-        item.append(button);
+        remove.setAttribute("aria-label", `Remove group ${groupName}`);
+        item.append(open, remove);
         list.append(item);
       }
       groups.append(list);
@@ -3342,10 +3350,22 @@ var EditorControllerImpl = class {
     const group = this.groupById(groupId);
     if (!group) return;
     const groupIndex = this.groupIndex(groupId);
+    const groupName = displayName(group.name, "Unnamed group");
+    const headingRow = this.document.createElement("div");
+    headingRow.dataset.groupHeading = "true";
     const heading = this.document.createElement("h2");
-    heading.textContent = displayName(group.name, "Unnamed group");
-    this.form.append(heading);
+    heading.textContent = groupName;
+    const removeGroup = this.createCommandButton(
+      "Remove group",
+      "remove-group",
+      this.saving,
+      { groupId },
+      "danger"
+    );
+    headingRow.append(heading, removeGroup);
+    this.form.append(headingRow);
     const settings = this.document.createElement("fieldset");
+    settings.dataset.groupCard = "true";
     const legend = this.document.createElement("legend");
     legend.textContent = "Group details";
     settings.append(legend);
@@ -3383,9 +3403,20 @@ var EditorControllerImpl = class {
       groupIndex
     );
     const rulesSection = this.document.createElement("section");
+    rulesSection.dataset.rulesSection = "true";
+    const rulesHeadingRow = this.document.createElement("div");
+    rulesHeadingRow.dataset.sectionHeading = "true";
     const rulesHeading = this.document.createElement("h2");
     rulesHeading.textContent = "Rules";
-    rulesSection.append(rulesHeading);
+    const addRule = this.createCommandButton(
+      "Add rule",
+      "add-rule",
+      this.saving,
+      { groupId },
+      "primary"
+    );
+    rulesHeadingRow.append(rulesHeading, addRule);
+    rulesSection.append(rulesHeadingRow);
     const list = this.document.createElement("div");
     list.dataset.ruleList = groupId;
     for (let ruleIndex = 0; ruleIndex < group.rules.length; ruleIndex += 1) {
@@ -3395,7 +3426,8 @@ var EditorControllerImpl = class {
     }
     if (group.rules.length === 0) {
       const empty = this.document.createElement("p");
-      empty.textContent = "No rules yet.";
+      empty.dataset.emptyRules = "true";
+      empty.textContent = "No rules yet. Add a rule to start matching requests.";
       list.append(empty);
     }
     rulesSection.append(list);
@@ -3403,7 +3435,7 @@ var EditorControllerImpl = class {
   }
   renderTest() {
     const heading = this.document.createElement("h2");
-    heading.textContent = "Test rules (dry-run)";
+    heading.textContent = "Test console";
     this.form.append(heading);
     const description = this.document.createElement("p");
     description.dataset.testDescription = "true";
@@ -3492,6 +3524,8 @@ var EditorControllerImpl = class {
     const runBtn = this.createButton("Run test", "test:run");
     runBtn.type = "button";
     runBtn.dataset.testRun = "true";
+    runBtn.dataset.command = "test:run";
+    runBtn.dataset.btn = "primary";
     runBtn.disabled = this.saving || this.testRunning;
     panel.append(runBtn);
     this.form.append(panel);
@@ -3517,11 +3551,37 @@ var EditorControllerImpl = class {
     card.dataset.ruleId = ruleId;
     card.id = `rogatio-rule-${groupId}-${ruleId}`;
     card.tabIndex = -1;
+    const headingRow = this.document.createElement("div");
+    headingRow.dataset.ruleHeading = "true";
     const heading = this.document.createElement("h3");
     heading.id = `${this.instanceId}-rule-title-${groupIndex}-${ruleIndex}`;
     heading.textContent = ruleName;
     card.setAttribute("aria-labelledby", heading.id);
-    card.append(heading);
+    const actions = this.document.createElement("div");
+    actions.dataset.ruleActions = "true";
+    actions.append(
+      this.createCommandButton(
+        "Move rule up",
+        "move-rule-up",
+        this.saving || ruleIndex <= 0,
+        { groupId, ruleId }
+      ),
+      this.createCommandButton(
+        "Move rule down",
+        "move-rule-down",
+        this.saving || ruleIndex >= group.rules.length - 1,
+        { groupId, ruleId }
+      ),
+      this.createCommandButton(
+        "Remove rule",
+        "remove-rule",
+        this.saving,
+        { groupId, ruleId },
+        "danger"
+      )
+    );
+    headingRow.append(heading, actions);
+    card.append(headingRow);
     const fields = this.document.createElement("fieldset");
     const legend = this.document.createElement("legend");
     legend.textContent = "Common rule matcher";
@@ -3551,7 +3611,8 @@ var EditorControllerImpl = class {
       "Convert to regex",
       "convert-url",
       this.saving,
-      { groupId, ruleId }
+      { groupId, ruleId },
+      "secondary"
     );
     grid.append(convert);
     fields.append(grid);
@@ -3654,27 +3715,6 @@ var EditorControllerImpl = class {
       extensionError.textContent = match.error.message;
       card.append(extensionError);
     }
-    const actions = this.document.createElement("div");
-    actions.dataset.ruleActions = "true";
-    actions.append(
-      this.createCommandButton(
-        "Move rule up",
-        "move-rule-up",
-        this.saving || ruleIndex <= 0,
-        { groupId, ruleId }
-      ),
-      this.createCommandButton(
-        "Move rule down",
-        "move-rule-down",
-        this.saving || ruleIndex >= group.rules.length - 1,
-        { groupId, ruleId }
-      ),
-      this.createCommandButton("Remove rule", "remove-rule", this.saving, {
-        groupId,
-        ruleId
-      })
-    );
-    card.append(actions);
     return card;
   }
   renderOrigins(parent, label, values, owner, groupId, ruleId, groupIndex, ruleIndex) {
@@ -3703,7 +3743,8 @@ var EditorControllerImpl = class {
         `Remove ${owner} origin ${index + 1}`,
         owner === "group" ? "remove-group-origin" : "remove-rule-origin",
         this.saving,
-        { groupId, ruleId, index: String(index) }
+        { groupId, ruleId, index: String(index) },
+        "danger"
       );
       row.append(remove);
       fieldset.append(row);
@@ -3713,7 +3754,8 @@ var EditorControllerImpl = class {
         "Add origin",
         owner === "group" ? "add-group-origin" : "add-rule-origin",
         this.saving,
-        { groupId, ruleId }
+        { groupId, ruleId },
+        "secondary"
       )
     );
     parent.append(fieldset);
@@ -4005,6 +4047,7 @@ var EditorControllerImpl = class {
     cancel.type = "button";
     cancel.dataset.command = this.confirmation.kind === "cancel" ? "cancel-confirmation" : "remove-confirmation";
     cancel.dataset.editorKey = "confirm-cancel";
+    cancel.dataset.btn = "secondary";
     cancel.textContent = this.confirmation.kind === "cancel" ? "Keep editing" : "Cancel removal";
     const confirm = this.document.createElement("button");
     confirm.type = "button";
@@ -4014,14 +4057,17 @@ var EditorControllerImpl = class {
       title.textContent = "Discard unsaved changes?";
       message.textContent = "Your current edits will be replaced by the last saved project.";
       confirm.textContent = "Discard changes";
+      confirm.dataset.btn = "danger";
     } else if (this.confirmation.kind === "remove-group") {
       title.textContent = "Remove group?";
       message.textContent = `Remove group ${this.confirmation.name} and its rules?`;
       confirm.textContent = "Remove group";
+      confirm.dataset.btn = "danger";
     } else {
       title.textContent = "Remove rule?";
       message.textContent = `Remove rule ${this.confirmation.name}?`;
       confirm.textContent = "Remove rule";
+      confirm.dataset.btn = "danger";
     }
     dialog.setAttribute("aria-labelledby", title.id);
     actions.append(cancel, confirm);
@@ -4036,12 +4082,13 @@ var EditorControllerImpl = class {
     button.dataset.editorKey = `button:${key}`;
     return button;
   }
-  createCommandButton(label, command, disabled, data = {}) {
+  createCommandButton(label, command, disabled, data = {}, tone = "secondary") {
     const button = this.createButton(
       label,
       `command:${command}:${Object.values(data).join(":")}`
     );
     button.dataset.command = command;
+    button.dataset.btn = tone;
     button.disabled = disabled;
     for (const [key, value] of Object.entries(data)) {
       if (value !== void 0) button.dataset[key] = value;

package/package.json

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