flexdesk 0.17.14 → 0.17.16

package/css/flexdesk.css

@@ -3869,20 +3869,25 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 /* Selected — set by `_onConfigClick()` while the config dialog is open, and
-   cleared from every sibling by the same handler. It reads `--accent-lighter`
+   cleared from every sibling by the same handler. `--configuring` is the same
+   look set by the embedder through `setConfiguring()` (0.17.16), one per open
+   config window, and no handler clears it. It reads `--accent-lighter`
    (BUG-0045): `--accent-bright` is a border colour on this background and not
    a text one. It was #78b9ff, which no mix of `--accent-bright` with white
    gives exactly; `--accent-lighter` (about #73b6e3) is the nearest. */
-.tile.tile--selected {
+.tile.tile--selected,
+.tile.tile--configuring {
     border-color: var(--accent-lighter);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-lighter) 30%, transparent), var(--shadow-md);
 }
 
-.tile.tile--selected .tile-header {
+.tile.tile--selected .tile-header,
+.tile.tile--configuring .tile-header {
     background: color-mix(in srgb, var(--accent-lighter) 10%, transparent);
 }
 
-.tile.tile--selected .tile-title {
+.tile.tile--selected .tile-title,
+.tile.tile--configuring .tile-title {
     color: var(--accent-lighter);
 }
 
@@ -4609,6 +4614,215 @@ body.twm-window-maximized .twm-resize-handle {
     text-overflow: ellipsis;
 }
 
+/* ══ CATEGORY PICKER (STORY-0126) ══════════════════════════════════════
+   `CategoryPicker` (category_picker.js): a search field over three columns —
+   categories, the active category's items, the highlighted item's detail.
+   Placed by `ActionDropdown.position` (inline top/left/max-height), so it is
+   `position: fixed` on --z-over-windows: over the managed window it opened
+   from. It shrinks to the inline max-height and its columns scroll inside.
+   A category's colour arrives as `--twm-category-picker-color` on its rows. */
+.twm-category-picker {
+    position: fixed;
+    z-index: var(--z-over-windows);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 640px;
+    max-width: calc(100vw - 2 * var(--space-md));
+    height: 440px;
+    background: var(--surface-1);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--font-size-md);
+    overflow: hidden;
+}
+.twm-category-picker[hidden] {
+    display: none;
+}
+.twm-category-picker__search {
+    flex: none;
+    padding: var(--space-md);
+    border-bottom: 1px solid var(--border-default);
+}
+.twm-category-picker__input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-sm) var(--space-md);
+    background: var(--surface-0);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--font-size-md);
+}
+.twm-category-picker__input:focus {
+    outline: none;
+    border-color: var(--accent-bright);
+}
+.twm-category-picker__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+}
+.twm-category-picker__column {
+    flex: none;
+    box-sizing: border-box;
+    padding: var(--space-sm) 0;
+    border-right: 1px solid var(--border-default);
+    overflow-y: auto;
+}
+.twm-category-picker__categories {
+    width: 170px;
+}
+.twm-category-picker__items {
+    width: 220px;
+}
+.twm-category-picker__category,
+.twm-category-picker__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-sm) var(--space-lg);
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--font-size-md);
+    text-align: left;
+    cursor: pointer;
+}
+.twm-category-picker__category:hover,
+.twm-category-picker__item:hover {
+    background: var(--state-hover);
+}
+.twm-category-picker__category--active,
+.twm-category-picker__item--highlighted,
+.twm-category-picker__category--active:hover,
+.twm-category-picker__item--highlighted:hover {
+    background: var(--state-selected);
+}
+/* The column the arrow keys move in marks its row with an accent edge. */
+.twm-category-picker__column--current .twm-category-picker__category--active,
+.twm-category-picker__column--current .twm-category-picker__item--highlighted {
+    box-shadow: inset 2px 0 0 var(--accent-bright);
+}
+.twm-category-picker__category--empty {
+    color: var(--text-dim);
+}
+.twm-category-picker__dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-circle);
+    /* background-color, not the shorthand: the colour is the caller's, and a
+       url() in the shorthand would be fetched */
+    background-color: var(--twm-category-picker-color, var(--text-muted));
+}
+.twm-category-picker__category-label,
+.twm-category-picker__item-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.twm-category-picker__count {
+    flex: none;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    font-variant-numeric: tabular-nums;
+}
+.twm-category-picker__badge,
+.twm-category-picker__item .twm-category-picker__icon {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    box-sizing: border-box;
+    color: var(--twm-category-picker-color, var(--text-muted));
+}
+.twm-category-picker__badge {
+    border: 1px solid var(--twm-category-picker-color, var(--text-muted));
+    border-radius: var(--radius-sm);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    overflow: hidden;
+    white-space: nowrap;
+}
+.twm-category-picker__item .twm-category-picker__icon {
+    font-size: 18px;
+}
+/* One category's hits while a query is set: role="group", named by its header. */
+.twm-category-picker__hits {
+    display: flex;
+    flex-direction: column;
+}
+.twm-category-picker__group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) var(--space-lg) var(--space-xs);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.twm-category-picker__empty,
+.twm-category-picker__detail-empty {
+    padding: var(--space-md) var(--space-lg);
+    color: var(--text-muted);
+}
+.twm-category-picker__detail {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    padding: var(--space-xl);
+    overflow-y: auto;
+}
+.twm-category-picker__title {
+    color: var(--text-bright);
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-category-picker__description {
+    color: var(--text-secondary);
+    line-height: var(--line-height-normal);
+}
+.twm-category-picker__preview-label {
+    margin-top: var(--space-sm);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.twm-category-picker__preview {
+    margin: 0;
+    padding: var(--space-md);
+    background: var(--surface-0);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--text-body);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+.twm-category-picker__add {
+    margin-top: auto;
+    align-self: flex-end;
+}
+/* ══ end CATEGORY PICKER ══ */
+
 /* ── from code.css ───────────────────────── */
 /* Code language tabs */
 .twm-code-tabs-header {
@@ -4825,6 +5039,12 @@ body.twm-window-maximized .twm-resize-handle {
 .twm-managed-window:focus-within {
     border-color: #505050;
 }
+/* BUG-0053. The frame is focusable (tabindex -1) so a press on it keeps focus
+   in the window; the focus-within border above already shows that, so the
+   frame draws no outline of its own. */
+.twm-managed-window:focus {
+    outline: none;
+}
 /* Minimize animation class — targets taskbar item via CSS custom properties */
 .twm-managed-window--minimizing {
     transform: translate(var(--mw-target-x, 0px), var(--mw-target-y, 100vh)) scale(var(--mw-target-scale, 0.1));
@@ -5748,14 +5968,23 @@ button.twm-about-dialog__btn--close:focus {
     min-width: min(400px, var(--twm-slide-out-host-w, 400px));
     max-width: var(--twm-slide-out-host-w, none);
 
-    transform: translateX(100%);
-    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+    /* Never drawn outside its final box (BUG-0051). While open the panel
+     * is `position: fixed` at its host's right edge, where the host's
+     * `overflow: hidden` no longer clips it, and its slide from
+     * translateX(100%) was drawn across whatever lies right of the host (a
+     * dock panel). It does not move any more: a clip alone carries the
+     * motion, revealing it from its right edge leftwards, so no frame can
+     * paint outside its box (a transform and a clip animated together can
+     * drift apart, the transform often running on the compositor). The left
+     * inset of -16px keeps the box shadow. */
+    clip-path: inset(0 0 0 100%);
+    transition: clip-path 200ms ease-out, visibility 0s linear 200ms;
     visibility: hidden;
 }
 .twm-slide-out-panel--open {
-    transform: translateX(0);
+    clip-path: inset(0 0 0 -16px);
     visibility: visible;
-    transition: transform 200ms ease-out, visibility 0s linear 0s;
+    transition: clip-path 200ms ease-out, visibility 0s linear 0s;
 }
 /* Header bar */
 .twm-slide-out-panel__header {
@@ -6438,8 +6667,18 @@ button.twm-about-dialog__btn--close:focus {
     align-items: flex-start;
     column-gap: 10px;
 }
+/* Each field's basis is its label alone (the first field's: the form's 130px
+ * label column): the controls lend the row no intrinsic width
+ * (`contain: inline-size`), so the free space is shared equally and every
+ * input of a row is equally wide (BUG-0050). Until 0.17.14 each field was an
+ * equal share of the row (`flex: 1 1 0`), so the first input, whose share
+ * also held the 130px column, was the narrowest by far. */
 .twm-modal__field-group > .twm-modal__row {
-    flex: 1 1 0;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.twm-modal__field-group > .twm-modal__row > :not(:first-child) {
+    contain: inline-size;
     min-width: 0;
 }
 .twm-managed-window--modal .twm-modal__fields > .twm-modal__field-group {
@@ -9054,6 +9293,12 @@ tr:hover .twm-row-action { opacity: 1; }
     padding: 2px 8px;
     line-height: 22px;
 }
+/* A path of one segment is not drawn (STORY-0124): the tile's title already
+ * names it, so the strip and its slot take no room until a second level. */
+.twm-page-shell__breadcrumb .twm-tile-breadcrumb[hidden],
+.twm-page-shell__breadcrumb:has(> .twm-tile-breadcrumb[hidden]) {
+    display: none;
+}
 .twm-page-shell__content {
     flex: 1 1 auto;
     min-height: 0;
@@ -11059,6 +11304,11 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     flex: 1 1 140px;
     min-width: 0;
 }
+/* A picker has no helper text: its empty helper takes no room (it held a
+ * 28px gap under every picker, and the series header line off its centre). */
+.twm-plot-config__picker > .twm-autocomplete-field__helper:empty {
+    display: none;
+}
 .twm-plot-config__axes,
 .twm-plot-config__list,
 .twm-plot-config__series-list {
@@ -11092,37 +11342,114 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: var(--space-xs) var(--space-md);
 }
+/* A series is one block (BUG-0052): a header line (picker, legend label,
+ * remove) over its fields, one per line on the editor's 96px label column —
+ * colour, width, dash, stack group, the embedder's `extraSeriesFields` (their
+ * box is `display: contents`, so its rows are rows of the column) and the
+ * overlay. Until 0.17.15 all of it was one wrapped line. */
 .twm-plot-config__series {
     display: flex;
     flex-direction: column;
-    gap: var(--space-xxs);
-    padding: var(--space-xs) 0;
+    gap: var(--space-xs);
+    padding: var(--space-sm) 0;
     border-top: 1px solid var(--border-subtle);
+    min-width: 0;
+}
+.twm-plot-config__series-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-xs);
+    min-width: 0;
+}
+.twm-plot-config__series-head > .twm-plot-config__picker {
+    flex: 2 1 140px;
+}
+.twm-plot-config__series-head > .twm-plot-config__input {
+    flex: 1 1 100px;
+}
+.twm-plot-config__series-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxs);
+    min-width: 0;
+}
+.twm-plot-config__series-extra {
+    display: contents;
 }
-.twm-plot-config__series-main,
 .twm-plot-config__row {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--space-xs);
 }
-.twm-plot-config__series-main > .twm-plot-config__input:not(.twm-plot-config__input--number):not(.twm-plot-config__input--select),
 .twm-plot-config__row > .twm-plot-config__input:not(.twm-plot-config__input--number):not(.twm-plot-config__input--select) {
     flex: 1 1 100px;
 }
-.twm-plot-config__series-main > .twm-plot-config__input--select,
 .twm-plot-config__row > .twm-plot-config__input--select {
     flex: 0 1 auto;
 }
-.twm-plot-config__series-extra:empty {
-    display: none;
+/* On a field line a colour is the swatch and a hex box sized to `#rrggbb`. */
+.twm-plot-config__field > .twm-color-field {
+    flex: 0 1 auto;
+    flex-wrap: nowrap;
+}
+.twm-plot-config__field > .twm-color-field > .twm-color-field__hex {
+    flex: 0 1 auto;
+    width: 10ch;
 }
+/* A colour's hex box is a well like the editor's other inputs. */
+.twm-plot-config .twm-color-field__hex {
+    box-sizing: border-box;
+    padding: var(--space-xxs) var(--space-xs);
+    background: var(--surface-3);
+    color: var(--text-primary);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+}
+/* ... and still shows a hex that is not a colour (the well's border above
+ * would otherwise hide ColorField's invalid border). */
+.twm-plot-config .twm-color-field--invalid .twm-color-field__hex {
+    border-color: var(--color-danger);
+}
+/* A field line's select keeps to its options, as the number boxes do. */
+.twm-plot-config__series-fields .twm-plot-config__field > .twm-plot-config__input--select {
+    flex: 0 1 auto;
+    max-width: 100%;
+}
+/* An embedder's control drawn by a field spec's `render(slot)`. */
+.twm-plot-config__slot {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+/* A field's hint, under its control: past the label column. Only a field
+ * with a hint wraps, so a number box never drops under its label. */
+.twm-plot-config__field--hinted {
+    flex-wrap: wrap;
+}
+.twm-plot-config__hint {
+    box-sizing: border-box;
+    flex: 1 0 100%;
+    padding-left: calc(96px + var(--space-sm));
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+/* The overlay's own fields, under its source: set in by a rule, their label
+ * column shortened by as much, so their controls stay on the series' column. */
 .twm-plot-config__overlay,
 .twm-plot-config__overlay-fields {
     display: flex;
     flex-direction: column;
     gap: var(--space-xxs);
-    padding-left: var(--space-md);
+    min-width: 0;
+}
+.twm-plot-config__overlay-fields:not(:empty) {
+    margin-left: var(--space-sm);
+    padding-left: calc(var(--space-sm) - 1px);
+    border-left: 1px solid var(--border-subtle);
+}
+.twm-plot-config__overlay-fields > .twm-plot-config__field > .twm-plot-config__label {
+    flex-basis: calc(96px - 2 * var(--space-sm));
 }
 .twm-plot-config__overlay-source {
     color: var(--text-muted);

package/css/overrides.css

@@ -2262,6 +2262,12 @@ tr:hover .twm-row-action { opacity: 1; }
     padding: 2px 8px;
     line-height: 22px;
 }
+/* A path of one segment is not drawn (STORY-0124): the tile's title already
+ * names it, so the strip and its slot take no room until a second level. */
+.twm-page-shell__breadcrumb .twm-tile-breadcrumb[hidden],
+.twm-page-shell__breadcrumb:has(> .twm-tile-breadcrumb[hidden]) {
+    display: none;
+}
 .twm-page-shell__content {
     flex: 1 1 auto;
     min-height: 0;

package/dist/charts.js

@@ -55,17 +55,17 @@ import {
   strideIndices,
   uid,
   updateChart
-} from "./chunk-TLIV6QSU.js";
+} from "./chunk-7OL6F2AM.js";
 import {
   AutocompleteField,
   createRafResizeObserver
-} from "./chunk-2PM6ZMNS.js";
+} from "./chunk-2Z2ENHR3.js";
 import {
   ColorField,
   ManagedWindow,
   ToggleField,
   selectBox
-} from "./chunk-MADMGRX2.js";
+} from "./chunk-PGZ4EHSE.js";
 import "./chunk-HNU6MM2B.js";
 import "./chunk-N7HC3ADV.js";
 import "./chunk-WUFLGETN.js";
@@ -758,10 +758,27 @@ function removeButton(title, onClick) {
   b.appendChild(el("span", "material-symbols-outlined", "close"));
   return b;
 }
-function field(label, control) {
+var hintCount = 0;
+function field(label, control, { hint = null } = {}) {
   const single = control.matches("input, select, textarea");
-  const row = el(single ? "label" : "div", "twm-plot-config__field");
-  row.append(el("span", "twm-plot-config__label", label), control);
+  const hinted = hint != null && hint !== "";
+  if (!hinted) {
+    const row2 = el(single ? "label" : "div", "twm-plot-config__field");
+    row2.append(el("span", "twm-plot-config__label", label), control);
+    return row2;
+  }
+  const row = el("div", "twm-plot-config__field twm-plot-config__field--hinted");
+  const text = el(single ? "label" : "span", "twm-plot-config__label", label);
+  const note = el("span", "twm-plot-config__hint", hint);
+  note.id = `twm-plot-config-hint-${++hintCount}`;
+  if (single) {
+    if (!control.id) control.id = `${note.id}-control`;
+    text.htmlFor = control.id;
+  }
+  const target = single ? control : control.querySelector("input, select, textarea") ?? control;
+  const describedBy = target.getAttribute("aria-describedby");
+  target.setAttribute("aria-describedby", describedBy ? `${describedBy} ${note.id}` : note.id);
+  row.append(text, control, note);
   return row;
 }
 function textInput(value, onSet, { placeholder = "", label = null } = {}) {
@@ -920,7 +937,7 @@ function renderPlotConfigEditor(container, config, options = {}) {
     node.classList.add("twm-plot-config__picker");
     return node;
   }
-  function colorField(value, onSet, label) {
+  function colorField(value, onSet, label, keep = track) {
     const f = new ColorField({
       value: value ?? "",
       label,
@@ -931,7 +948,7 @@ function renderPlotConfigEditor(container, config, options = {}) {
         }
       }
     });
-    track(() => f.dispose());
+    keep(() => f.dispose());
     return f.render();
   }
   function toggle(label, checked, onSet) {
@@ -1154,60 +1171,113 @@ function renderPlotConfigEditor(container, config, options = {}) {
   }
   function seriesRow(sp, axis, s, overlaySources) {
     const row = el("div", "twm-plot-config__series");
-    const main = el("div", "twm-plot-config__series-main");
-    main.append(
+    const head = el("div", "twm-plot-config__series-head");
+    head.append(
       seriesPicker(s, "variable", "series", sp, "Series"),
       textInput(s.label, (v) => {
         s.label = v;
         notify();
       }, { placeholder: "Legend label", label: "Legend label" }),
-      colorField(s.color, (v) => {
+      removeButton("Remove series", () => {
+        const i = axis.series.indexOf(s);
+        if (i >= 0) axis.series.splice(i, 1);
+        renderBody();
+        notify();
+      })
+    );
+    const fields = el("div", "twm-plot-config__series-fields");
+    fields.append(
+      field("Colour", colorField(s.color, (v) => {
         if (v) s.color = v;
         else delete s.color;
-      }, "Colour"),
-      numberInput(
+      }, "Colour")),
+      field("Width", numberInput(
         s.lineWidth ?? 2,
         (v) => {
           s.lineWidth = v ?? 2;
           notify();
         },
         { placeholder: "2", label: "Line width", min: 1, max: 10, step: 1 }
-      ),
-      select(DASHES, s.lineStyle ?? "solid", (v) => {
+      )),
+      field("Dash", select(DASHES, s.lineStyle ?? "solid", (v) => {
         s.lineStyle = v;
         notify();
-      }, { label: "Dash" }),
-      textInput(
+      }, { label: "Dash" })),
+      field("Stack group", textInput(
         s.stackGroup,
         (v) => {
           s.stackGroup = v || null;
           notify();
         },
-        { placeholder: "Stack group", label: "Stack group" }
-      ),
-      removeButton("Remove series", () => {
-        const i = axis.series.indexOf(s);
-        if (i >= 0) axis.series.splice(i, 1);
-        renderBody();
-        notify();
-      })
+        { placeholder: "None", label: "Stack group" }
+      ))
     );
-    row.appendChild(main);
-    if (opts.extraSeriesFields) {
-      const extra = el("div", "twm-plot-config__series-extra");
-      row.appendChild(extra);
-      const handle = opts.extraSeriesFields(extra, s, { subplot: sp, axis, onChange: notify });
-      if (typeof handle?.dispose === "function") track(() => handle.dispose());
-    }
-    if (opts.overlaySources) row.appendChild(overlayEditor(s, overlaySources));
+    if (opts.extraSeriesFields) fields.appendChild(extraFields(sp, axis, s));
+    if (opts.overlaySources) fields.appendChild(overlayEditor(s, overlaySources));
+    row.append(head, fields);
     return row;
   }
+  const warn = (...args) => opts.logger?.warn ? opts.logger.warn(...args) : console.warn(...args);
+  function extraFields(sp, axis, s) {
+    const extra = el("div", "twm-plot-config__series-extra");
+    const result = opts.extraSeriesFields(extra, s, { subplot: sp, axis, onChange: notify, field });
+    if (!Array.isArray(result)) {
+      if (typeof result?.dispose === "function") track(() => result.dispose());
+      return extra;
+    }
+    for (const spec of result) {
+      const label = spec?.label;
+      let control = null;
+      if (typeof label !== "string") {
+        warn("[plot config editor] an extraSeriesFields spec has no label; skipped", spec);
+        continue;
+      }
+      if (spec.control != null) {
+        if (!(spec.control instanceof Element)) {
+          warn("[plot config editor] an extraSeriesFields spec control is not an Element; skipped", spec);
+          continue;
+        }
+        control = spec.control;
+      } else if (typeof spec.render === "function") {
+        control = el("div", "twm-plot-config__slot");
+        try {
+          const handle = spec.render(control);
+          if (typeof handle?.dispose === "function") track(() => handle.dispose());
+        } catch (error) {
+          warn("[plot config editor] an extraSeriesFields spec failed to render; skipped", error);
+          continue;
+        }
+      } else {
+        warn("[plot config editor] an extraSeriesFields spec has neither control nor render; skipped", spec);
+        continue;
+      }
+      extra.appendChild(field(label, control, { hint: spec.hint }));
+    }
+    return extra;
+  }
   function overlayEditor(s, overlaySources) {
     const wrap = el("div", "twm-plot-config__overlay");
     const head = el("div", "twm-plot-config__overlay-source", "Loading overlay sources\u2026");
     const details = el("div", "twm-plot-config__overlay-fields");
     wrap.append(head, details);
+    let detailDisposers = [];
+    const disposeDetails = () => {
+      const fns = detailDisposers;
+      detailDisposers = [];
+      for (const fn of fns) {
+        try {
+          fn();
+        } catch (error) {
+          opts.logger?.warn?.("[plot config editor] a field failed to dispose", error);
+        }
+      }
+    };
+    track(disposeDetails);
+    const keep = (fn) => {
+      detailDisposers.push(fn);
+    };
     const drawDetails = () => {
+      disposeDetails();
       details.replaceChildren();
       const ov = s.overlay;
       if (!ov) return;
@@ -1223,7 +1293,7 @@ function renderPlotConfigEditor(container, config, options = {}) {
         field("Colour", colorField(ov.color, (v) => {
           if (v) ov.color = v;
           else delete ov.color;
-        }, "Overlay colour")),
+        }, "Overlay colour", keep)),
         field("Dash", select(DASHES, ov.lineStyle ?? "dashed", (v) => {
           ov.lineStyle = v;
           notify();