Match fields say "any of" or "any but" first

The zone, From and To fields start with an any of / any but choice
instead of a checkbox under the list, and an "any but" list is tinted
red. The release script encodes a + (build metadata) in its URLs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/style.css

@@ -379,6 +379,10 @@ pre.wrap { white-space: pre-wrap; word-break: break-all; font-size: 12px; }
 .list-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
 .list-row { display: flex; gap: 6px; align-items: center; }
 .list-row input { width: 26em; max-width: 100%; }
+.negatable { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
+.negatable > .list-editor { flex: 1; min-width: 0; }
+.negatable.negated > select { color: var(--err); border-color: var(--err); font-weight: 600; }
+.negatable.negated .list-row input { background: var(--err-soft); color: var(--del-text); border-color: var(--err); }
 input.short { width: 7em; }
 .builtins { margin-bottom: 10px; line-height: 1.6; }
 .policy { margin-top: 10px; }

internal/web/static/assets/widgets.js

@@ -1,6 +1,6 @@
 // Widgets shared by several pages: list editors with suggestions, the
 // match editor of rules and NAT, descriptions, hit counts, durations.
-import { h, input, select, field, checkbox } from "./ui.js";
+import { h, input, select, field } from "./ui.js";
 import { get, api } from "./api.js";
 
 // ---- durations
@@ -65,34 +65,44 @@ export function listEditor(values, opts = {}) {
 
 // ---- matches
 
+// negatable puts "any of" / "any but" in front of a list editor, so a
+// field says first whether it matches its entries or everything else;
+// "any but" tints the list. value() is the list, negated() the choice.
+function negatable(list, not) {
+  const mode = select([["", "any of"], ["not", "any but"]], not ? "not" : "", { class: "inline", "aria-label": "match these, or everything but these" });
+  const box = h("div", { class: "negatable" + (not ? " negated" : "") }, mode, list);
+  mode.addEventListener("change", () => box.classList.toggle("negated", mode.value === "not"));
+  box.value = list.value;
+  box.negated = () => mode.value === "not";
+  return box;
+}
+
 // matchEditor edits what a rule, source NAT or redirect matches. It
 // returns the form-grid fields; value() is the match's fields.
 export function matchEditor(m, n, opts = {}) {
   m = m || {};
   const zones = (list) => listEditor(list, { suggestions: n.zones, placeholder: "zone", mono: false, addLabel: "Add zone" });
   const addrs = (list) => listEditor(list, { suggestions: n.sets, placeholder: "a set, 192.168.1.0/24, 2001:db8:1::/64, 192.168.1.100-192.168.1.199", addLabel: "Add" });
-  const inZ = zones(m.in_zones), outZ = zones(m.out_zones);
-  const notIn = checkbox("any zone but these", m.not_in), notOut = checkbox("any zone but these", m.not_out);
-  const src = addrs(m.sources), dst = addrs(m.destinations);
-  const notSrc = checkbox("any source but these", m.not_sources), notDst = checkbox("any destination but these", m.not_destinations);
+  const inZ = negatable(zones(m.in_zones), m.not_in), outZ = negatable(zones(m.out_zones), m.not_out);
+  const src = negatable(addrs(m.sources), m.not_sources), dst = negatable(addrs(m.destinations), m.not_destinations);
   const svc = listEditor(m.services, { suggestions: n.services, placeholder: "ssh, https, tcp/8080, udp/1000-2000, icmp/echo-request", addLabel: "Add service" });
   const fam = select([["", "IPv4 and IPv6"], ["ipv4", "IPv4 only"], ["ipv6", "IPv6 only"]], m.family || "");
-  const inField = opts.in !== false ? field("Coming in on", h("div", null, inZ, notIn)) : null;
-  const outField = opts.out !== false ? field("Going out on", h("div", null, outZ, notOut)) : null;
+  const inField = opts.in !== false ? field("Coming in on", inZ) : null;
+  const outField = opts.out !== false ? field("Going out on", outZ) : null;
   const fields = [
     inField,
     outField,
-    field("From", h("div", null, src, notSrc), "Sets, addresses, prefixes or ranges, IPv4 and IPv6 mixed. Empty: any."),
-    field("To", h("div", null, dst, notDst)),
+    field("From", src, "Sets, addresses, prefixes or ranges, IPv4 and IPv6 mixed. Empty: any."),
+    field("To", dst),
     field("Services", svc, "Named services (built in, or yours) or entries such as tcp/8080. Empty: any traffic."),
     field("Family", fam),
   ];
   fields.value = () => {
-    const v = { sources: src.value(), not_sources: notSrc.input.checked, destinations: dst.value(), not_destinations: notDst.input.checked,
+    const v = { sources: src.value(), not_sources: src.negated(), destinations: dst.value(), not_destinations: dst.negated(),
       services: svc.value(), family: fam.value };
     // A hidden zone field (the chain has no such interface) matches nothing.
-    if (inField) Object.assign(v, inField[1].classList.contains("hidden") ? { in_zones: [], not_in: false } : { in_zones: inZ.value(), not_in: notIn.input.checked });
-    if (outField) Object.assign(v, outField[1].classList.contains("hidden") ? { out_zones: [], not_out: false } : { out_zones: outZ.value(), not_out: notOut.input.checked });
+    if (inField) Object.assign(v, inField[1].classList.contains("hidden") ? { in_zones: [], not_in: false } : { in_zones: inZ.value(), not_in: inZ.negated() });
+    if (outField) Object.assign(v, outField[1].classList.contains("hidden") ? { out_zones: [], not_out: false } : { out_zones: outZ.value(), not_out: outZ.negated() });
     return v;
   };
   // zones shows the zone fields a chain can use: input and early have no