From 15992eb2a3076506c6d258a8924b3e4fabe33195 Mon Sep 17 00:00:00 2001
From: Nick Sweeting <git@sweeting.me>
Date: Sun, 24 May 2026 00:24:10 -0700
Subject: [PATCH] release: archivebox 0.9.31rc21

---
 .../admin/personas/persona/change_form.html   |  15 -
 .../templates/core/plugin_config_grid.html    | 386 +++++++++++++++++-
 archivebox/templates/static/add.css           | 349 ----------------
 etc/package.json                              |   2 +-
 pyproject.toml                                |   8 +-
 5 files changed, 390 insertions(+), 370 deletions(-)

diff --git a/archivebox/templates/admin/personas/persona/change_form.html b/archivebox/templates/admin/personas/persona/change_form.html
index b3bcb072..4511f8a1 100644
--- a/archivebox/templates/admin/personas/persona/change_form.html
+++ b/archivebox/templates/admin/personas/persona/change_form.html
@@ -216,21 +216,6 @@
         font-size: 13px;
     }
 
-    .persona-plugin-config .plugin-card-main {
-        grid-template-columns: minmax(0, 1fr) auto;
-    }
-
-    .persona-plugin-config .plugin-card-label-static {
-        grid-column: 1;
-    }
-
-    .persona-plugin-config .plugin-config-details {
-        grid-column: 2;
-    }
-
-    .persona-plugin-config .plugin-config-details[open] {
-        grid-column: 1 / -1;
-    }
 </style>
 {% endblock %}
 
diff --git a/archivebox/templates/core/plugin_config_grid.html b/archivebox/templates/core/plugin_config_grid.html
index b4ed552b..983eadca 100644
--- a/archivebox/templates/core/plugin_config_grid.html
+++ b/archivebox/templates/core/plugin_config_grid.html
@@ -1,3 +1,387 @@
+<style>
+.plugin-config-form {
+    min-width: 0;
+}
+
+.plugin-config-form,
+.plugin-config-form * {
+    box-sizing: border-box;
+}
+
+.plugin-groups-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(280px, 1fr));
+    gap: 16px;
+    align-items: start;
+}
+
+.plugin-group {
+    min-width: 0;
+    padding: 14px 16px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+}
+
+.plugin-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #004882;
+}
+
+.plugin-group-header label {
+    margin: 0;
+    color: #004882;
+    font-size: 15px;
+    font-weight: 700;
+}
+
+.plugin-group-note {
+    color: #7a7a7a;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.select-all-btn {
+    padding: 4px 12px;
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.select-all-btn:hover {
+    background-color: #e0e0e0;
+}
+
+.plugin-checkboxes {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+    min-width: 0;
+}
+
+.plugin-card {
+    min-width: 0;
+    overflow: hidden;
+    background-color: #fff;
+    border: 1px solid #e3e8ef;
+    border-radius: 6px;
+    transition: background-color 0.2s;
+}
+
+.plugin-card:hover {
+    background-color: #f5f5f5;
+}
+
+.plugin-card-main {
+    display: grid;
+    grid-template-columns: 18px minmax(0, 1fr) auto;
+    gap: 8px;
+    align-items: start;
+    min-width: 0;
+    padding: 8px 10px;
+}
+
+.plugin-card-main--static {
+    grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.plugin-card-main > input[type="checkbox"] {
+    grid-column: 1;
+    grid-row: 1;
+    width: auto;
+    margin: 3px 0 0;
+}
+
+.plugin-config-form .plugin-card-label {
+    grid-column: 2;
+    grid-row: 1;
+    display: grid !important;
+    grid-template-columns: 20px minmax(0, 1fr);
+    column-gap: 8px;
+    row-gap: 3px;
+    align-items: start;
+    min-width: 0;
+    width: 100%;
+    margin: 0;
+    font-size: 14px;
+    font-weight: normal;
+    cursor: pointer;
+}
+
+.plugin-config-form .plugin-card-label-static {
+    grid-column: 1;
+}
+
+.plugin-choice-name {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+    color: #1f2937;
+    font-weight: 500;
+}
+
+.plugin-config-form .plugin-choice-icon {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    color: #7a7a7a;
+}
+
+.plugin-config-form .plugin-choice-icon .abx-output-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.plugin-config-form .plugin-choice-icon svg {
+    width: 18px;
+    height: 18px;
+}
+
+.plugin-config-form .plugin-choice-description {
+    grid-column: 2;
+    grid-row: 2;
+    display: inline-block;
+    min-width: 0;
+    margin-left: 0;
+    color: #7a7a7a !important;
+    font-size: 12px;
+    text-align: left;
+    text-decoration: none !important;
+}
+
+.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:link,
+.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:visited,
+.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:active {
+    color: #7a7a7a !important;
+    text-decoration: none !important;
+}
+
+.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:hover,
+.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:focus {
+    color: #4b5563 !important;
+    text-decoration: underline !important;
+}
+
+.plugin-config-details {
+    grid-column: 3;
+    grid-row: 1;
+    min-width: 0;
+}
+
+.plugin-card-main--static .plugin-config-details {
+    grid-column: 2;
+}
+
+.plugin-config-details summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 26px;
+    padding: 3px 8px;
+    border: 1px solid #d7e2eb;
+    border-radius: 999px;
+    background: #f8fafc;
+    color: #475569;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.plugin-config-details summary::-webkit-details-marker {
+    display: none;
+}
+
+.plugin-config-details summary:before {
+    content: "▶";
+    display: inline-block;
+    font-size: 10px;
+    transition: transform 0.2s;
+}
+
+.plugin-config-details[open] {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    width: 100%;
+    min-width: 0;
+    padding-top: 8px;
+}
+
+.plugin-config-details[open] summary {
+    margin-bottom: 8px;
+}
+
+.plugin-config-details[open] summary:before {
+    transform: rotate(90deg);
+}
+
+.plugin-config-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 999px;
+    background: #e2e8f0;
+    color: #334155;
+    font-size: 11px;
+}
+
+.plugin-config-meta,
+.plugin-config-empty {
+    margin-bottom: 8px;
+    padding: 7px 9px;
+    border: 1px solid #e5edf5;
+    border-radius: 6px;
+    background: #f8fafc;
+    color: #64748b;
+    font-size: 12px;
+    line-height: 1.4;
+}
+
+.plugin-config-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    max-width: 100%;
+    max-height: 360px;
+    overflow: auto;
+    padding: 10px;
+    border: 1px solid #e5edf5;
+    border-radius: 6px;
+    background: #fbfdff;
+}
+
+.plugin-config-field {
+    min-width: 0;
+}
+
+.plugin-config-form .plugin-config-field > label {
+    display: flex !important;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 5px;
+    color: #24303b;
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.plugin-config-field code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.plugin-config-type {
+    flex: 0 0 auto;
+    color: #7a8794;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.plugin-config-field input[type="text"],
+.plugin-config-field input[type="password"],
+.plugin-config-field input[type="number"],
+.plugin-config-field select,
+.plugin-config-field textarea {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    min-height: 34px;
+    padding: 6px 8px;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    box-shadow: none;
+    background: #fff;
+    font-family: inherit;
+    font-size: 12px;
+}
+
+.plugin-config-field textarea {
+    min-height: 70px;
+    resize: vertical;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.plugin-config-form .plugin-config-toggle {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    min-height: 34px;
+    margin: 0;
+    padding: 6px 8px;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.plugin-config-toggle input[type="checkbox"] {
+    width: auto;
+    margin: 0;
+}
+
+.plugin-config-help,
+.plugin-config-default {
+    margin-top: 4px;
+    color: #64748b;
+    font-size: 11px;
+    line-height: 1.35;
+}
+
+.plugin-config-default code {
+    color: #475569;
+    white-space: normal;
+    word-break: break-word;
+}
+
+@media (max-width: 768px) {
+    .plugin-checkboxes,
+    .plugin-groups-grid,
+    .plugin-config-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .plugin-card-main {
+        grid-template-columns: 18px minmax(0, 1fr);
+    }
+
+    .plugin-card-main--static {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .plugin-config-details,
+    .plugin-card-main--static .plugin-config-details {
+        grid-column: 1 / -1;
+        grid-row: 2;
+    }
+
+    .plugin-group-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+}
+</style>
 <div class="plugin-config-form">
     <div class="plugin-groups-grid">
         {% for group in plugin_groups %}
@@ -17,7 +401,7 @@
                     <div class="plugin-checkboxes"{% if group.dom_id %} id="{{ group.dom_id }}"{% endif %}>
                         {% for plugin in group.plugins %}
                             <div class="plugin-card">
-                                <div class="plugin-card-main">
+                                <div class="plugin-card-main{% if not group.show_selectors %} plugin-card-main--static{% endif %}">
                                     {% if group.show_selectors %}
                                         <input type="checkbox" name="{{ group.field_name }}" value="{{ plugin.name }}" id="{{ plugin.checkbox_id }}" {% if plugin.checked %}checked{% endif %}>
                                         <label for="{{ plugin.checkbox_id }}" class="plugin-card-label">
diff --git a/archivebox/templates/static/add.css b/archivebox/templates/static/add.css
index 54910e56..20611802 100755
--- a/archivebox/templates/static/add.css
+++ b/archivebox/templates/static/add.css
@@ -651,328 +651,6 @@ select {
   box-shadow: none;
 }
 
-/* Plugin groups */
-.plugin-group {
-  padding: 14px 16px;
-  background-color: white;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  min-width: 0;
-}
-
-.plugin-groups-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(280px, 1fr));
-  gap: 16px;
-  align-items: start;
-}
-
-.plugin-group-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #004882;
-  gap: 12px;
-}
-
-.plugin-group-header label {
-  font-size: 15px;
-  font-weight: 700;
-  color: #004882;
-  margin: 0;
-}
-
-.plugin-group-note {
-  font-size: 12px;
-  color: #7a7a7a;
-  white-space: nowrap;
-}
-
-.select-all-btn {
-  padding: 4px 12px;
-  font-size: 12px;
-  background-color: #f0f0f0;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.select-all-btn:hover {
-  background-color: #e0e0e0;
-}
-
-.plugin-checkboxes {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-}
-
-.plugin-card {
-  border: 1px solid #e3e8ef;
-  background-color: #fff;
-  border-radius: 6px;
-  transition: background-color 0.2s;
-}
-
-.plugin-card:hover {
-  background-color: #f5f5f5;
-}
-
-.plugin-card-main {
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) auto;
-  gap: 8px;
-  align-items: start;
-  padding: 8px 10px;
-}
-
-.plugin-card-main > input[type="checkbox"] {
-  grid-column: 1;
-  grid-row: 1;
-  width: auto;
-  margin: 3px 0 0;
-}
-
-.plugin-config-form .plugin-card-label {
-  grid-column: 2;
-  grid-row: 1;
-  display: grid !important;
-  grid-template-columns: 20px minmax(0, 1fr);
-  column-gap: 8px;
-  row-gap: 3px;
-  align-items: start;
-  width: 100%;
-  margin: 0;
-  font-size: 14px;
-  font-weight: normal;
-  cursor: pointer;
-}
-
-.plugin-choice-name {
-  grid-column: 2;
-  grid-row: 1;
-  font-weight: 500;
-  color: #1f2937;
-}
-
-.plugin-config-form .plugin-choice-icon {
-  grid-column: 1;
-  grid-row: 1 / span 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #7a7a7a;
-  flex: 0 0 auto;
-}
-
-.plugin-config-form .plugin-choice-icon .abx-output-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.plugin-config-form .plugin-choice-icon svg {
-  width: 18px;
-  height: 18px;
-}
-
-.plugin-config-form .plugin-choice-description {
-  grid-column: 2;
-  grid-row: 2;
-  margin-left: 0;
-  display: inline-block;
-  font-size: 12px;
-  color: #7a7a7a !important;
-  text-decoration: none !important;
-  text-align: left;
-}
-
-.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:link,
-.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:visited,
-.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:active {
-  color: #7a7a7a !important;
-  text-decoration: none !important;
-}
-
-.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:hover,
-.plugin-config-form .plugin-checkboxes label a.plugin-choice-description:focus {
-  color: #4b5563 !important;
-  text-decoration: underline !important;
-}
-
-.plugin-config-details {
-  grid-column: 3;
-  grid-row: 1;
-  min-width: 0;
-}
-
-.plugin-config-details summary {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-height: 26px;
-  padding: 3px 8px;
-  border: 1px solid #d7e2eb;
-  border-radius: 999px;
-  background: #f8fafc;
-  color: #475569;
-  font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  user-select: none;
-  list-style: none;
-  white-space: nowrap;
-}
-
-.plugin-config-details summary::-webkit-details-marker {
-  display: none;
-}
-
-.plugin-config-details summary:before {
-  content: '▶';
-  display: inline-block;
-  font-size: 10px;
-  transition: transform 0.2s;
-}
-
-.plugin-config-details[open] {
-  grid-column: 1 / -1;
-  grid-row: 2;
-  padding-top: 8px;
-}
-
-.plugin-config-details[open] summary {
-  margin-bottom: 8px;
-}
-
-.plugin-config-details[open] summary:before {
-  transform: rotate(90deg);
-}
-
-.plugin-config-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 999px;
-  background: #e2e8f0;
-  color: #334155;
-  font-size: 11px;
-}
-
-.plugin-config-meta,
-.plugin-config-empty {
-  margin-bottom: 8px;
-  padding: 7px 9px;
-  border: 1px solid #e5edf5;
-  border-radius: 6px;
-  background: #f8fafc;
-  color: #64748b;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.plugin-config-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-  max-height: 360px;
-  overflow: auto;
-  padding: 10px;
-  border: 1px solid #e5edf5;
-  border-radius: 6px;
-  background: #fbfdff;
-}
-
-.plugin-config-field {
-  min-width: 0;
-}
-
-.plugin-config-form .plugin-config-field > label {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 5px;
-  font-size: 12px;
-  font-weight: 700;
-  color: #24303b;
-}
-
-.plugin-config-field code {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.plugin-config-type {
-  flex: 0 0 auto;
-  color: #7a8794;
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.plugin-config-field input[type="text"],
-.plugin-config-field input[type="password"],
-.plugin-config-field input[type="number"],
-.plugin-config-field select,
-.plugin-config-field textarea {
-  width: 100%;
-  min-height: 34px;
-  padding: 6px 8px;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  box-shadow: none;
-  font-family: inherit;
-  font-size: 12px;
-  background: #fff;
-}
-
-.plugin-config-field textarea {
-  min-height: 70px;
-  resize: vertical;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-}
-
-.plugin-config-form .plugin-config-toggle {
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  min-height: 34px;
-  margin: 0;
-  padding: 6px 8px;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  background: #fff;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.plugin-config-toggle input[type="checkbox"] {
-  width: auto;
-  margin: 0;
-}
-
-.plugin-config-help,
-.plugin-config-default {
-  margin-top: 4px;
-  color: #64748b;
-  font-size: 11px;
-  line-height: 1.35;
-}
-
-.plugin-config-default code {
-  color: #475569;
-  white-space: normal;
-  word-break: break-word;
-}
-
 /* Advanced section (collapsible) */
 .advanced-section {
   background-color: white;
@@ -1032,33 +710,6 @@ input:focus, select:focus, textarea:focus, button:focus {
     grid-template-columns: 1fr;
   }
 
-  .plugin-checkboxes {
-    grid-template-columns: 1fr;
-  }
-
-  .plugin-groups-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .plugin-card-main {
-    grid-template-columns: 18px minmax(0, 1fr);
-  }
-
-  .plugin-config-details {
-    grid-column: 1 / -1;
-    grid-row: 2;
-  }
-
-  .plugin-config-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .plugin-group-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-
   .plugin-presets {
     flex-direction: column;
     align-items: stretch;
diff --git a/etc/package.json b/etc/package.json
index 80bd0e60..e01ee1fe 100644
--- a/etc/package.json
+++ b/etc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "archivebox",
-  "version": "0.9.31rc20",
+  "version": "0.9.31rc21",
   "repository": "github:ArchiveBox/ArchiveBox",
   "license": "MIT",
   "dependencies": {
diff --git a/pyproject.toml b/pyproject.toml
index 3aba41e5..38dafa1a 100755
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "archivebox"
-version = "0.9.31rc20"
+version = "0.9.31rc21"
 requires-python = ">=3.13"
 description = "Self-hosted internet archiving solution."
 authors = [{name = "Nick Sweeting", email = "pyproject.toml@archivebox.io"}]
@@ -79,9 +79,9 @@ dependencies = [
     ### Extractor dependencies (optional binaries detected at runtime via shutil.which)
     ### Binary/Package Management
     "abxbus>=2.5.4",          # EventBus API
-    "abxpkg>=1.10.14",         # for: detecting, versioning, and installing binaries via apt/brew/pip/npm
-    "abx-plugins>=1.10.80",   # shared ArchiveBox plugin package with Chrome/Puppeteer dependency wiring
-    "abx-dl>=1.10.80",        # shared ArchiveBox downloader package with blocking install preflight
+    "abxpkg>=1.10.17",         # for: detecting, versioning, and installing binaries via apt/brew/pip/npm
+    "abx-plugins>=1.10.82",   # shared ArchiveBox plugin package with Chrome/Puppeteer dependency wiring
+    "abx-dl>=1.10.82",        # shared ArchiveBox downloader package with blocking install preflight
     ### UUID7 backport for Python <3.14
     "uuid7>=0.1.0; python_version < '3.14'",  # provides the uuid_extensions module on Python 3.13
 ]