@unofficialbox/box-open-elements 0.35.0 → 0.36.0

package/dist/patterns/process-modeler/process-modeler.js

@@ -6,7 +6,8 @@ import { KindPicker } from "../flow-builder/primitives.js";
 import { arrangeProcess, routeProcessLine, lineMidpoint, nearProcessLine, roundedProcessPath } from "./geometry.js";
 import { restoreProcessPositions, snapshotProcessPositions, snapshotProcessProjection, graphChecks, normalizeProcessSelectionPath } from "./bridge.js";
 import { processModelerDesign } from "./design.js";
-import { completeLayout, ProcessHistory, validateProjection, } from "./model.js";
+import { completeLayout, isFlowBox, isFlowLine, ProcessHistory, validateProjection, } from "./model.js";
+let actionControlSequence = 0;
 const svgElement = (tag) => document.createElementNS("http://www.w3.org/2000/svg", tag);
 const variableLabel = (text) => {
     const label = document.createElement('label'), name = document.createElement('span');
@@ -75,6 +76,11 @@ export class ProcessModeler extends BaseElement {
     checks = [];
     renderer;
     cleanupInspector;
+    inspectorFieldCleanups = [];
+    pendingActionChoice;
+    quietActionFocus = false;
+    cleanupInspectorFields() { for (const cleanup of this.inspectorFieldCleanups.splice(0))
+        cleanup(); }
     inspected;
     inspectedId;
     inspectedControls = "";
@@ -160,6 +166,8 @@ export class ProcessModeler extends BaseElement {
     narrowValue = false;
     suppressClick = false;
     resizeObserver;
+    autoNoteHeights = new Set();
+    unplacedNotes = new Set();
     routedLines = new Map();
     computedChecks = [];
     get selectedBoxes() { return this.projection.boxes.filter(box => this.selectedIds.has(box.id)); }
@@ -236,6 +244,9 @@ export class ProcessModeler extends BaseElement {
         this.lastProjection = "";
         this.lastReadableProjection = "";
         this.readableValue = null;
+        this.marquee = undefined;
+        this.pointers.clear();
+        this.autoNoteHeights.clear();
         this.layoutValue = restoreProcessPositions(projection, options.positions ?? []);
         this.clearMixedSelection();
         this.history.clear();
@@ -311,7 +322,10 @@ export class ProcessModeler extends BaseElement {
     set embedMode(value) { this.toggleAttribute('embed-mode', value); }
     arrangedLayout(layout) {
         const arranged = this.model.arrange?.(this.projection) ?? arrangeProcess(this.projection);
-        return completeLayout(this.projection, { ...layout, boxes: { ...arranged?.boxes, ...layout.boxes } });
+        const notes = Object.fromEntries(this.projection.boxes.filter(box => !isFlowBox(box) && this.layoutValue.boxes[box.id]).map(box => [box.id, this.layoutValue.boxes[box.id]]));
+        const boxes = { ...arranged?.boxes, ...notes, ...layout.boxes };
+        this.unplacedNotes = new Set(this.projection.boxes.filter(box => !isFlowBox(box) && !boxes[box.id]).map(box => box.id));
+        return completeLayout(this.projection, { ...layout, boxes });
     }
     get document() {
         return this.documentValue;
@@ -346,6 +360,7 @@ export class ProcessModeler extends BaseElement {
         if (JSON.stringify(this.layoutValue) === JSON.stringify(value))
             return;
         this.layoutValue = structuredClone(value);
+        this.autoNoteHeights.clear();
         if (!this.history.replaying)
             this.history.clear();
         this.refresh();
@@ -391,6 +406,7 @@ export class ProcessModeler extends BaseElement {
         return this.renderer;
     }
     set renderInspector(value) {
+        this.cleanupInspectorFields();
         this.cleanupInspector?.();
         this.cleanupInspector = undefined;
         this.inspected = undefined;
@@ -404,6 +420,7 @@ export class ProcessModeler extends BaseElement {
         this.viewMenuDocument?.removeEventListener('pointerdown', this.dismissViewMenuOutside, true);
         this.viewMenuDocument = undefined;
         this.layoutEditSession++;
+        this.pendingActionChoice = undefined;
         this.resizeObserver?.disconnect();
         this.clearClipboard();
         this.cancelPalettePointer();
@@ -412,6 +429,7 @@ export class ProcessModeler extends BaseElement {
         if (chooser)
             dismissModal(chooser);
         this.closeKeyboardChooser();
+        this.cleanupInspectorFields();
         this.cleanupInspector?.();
         this.cleanupInspector = undefined;
         this.inspected = undefined;
@@ -485,7 +503,20 @@ export class ProcessModeler extends BaseElement {
         return this.model.connectionProblem(this.documentValue, { from, to, ...(line ? { ignoreLineId: line.id } : {}) }, this.projection) || null;
     }
     requestEdit(edit) {
-        if (this.locked || (this.disableConnections && (edit.type === "connect" || edit.type === "disconnect" || edit.type === 'reattach')))
+        if (!this.isRendered && this.documentValue !== undefined) {
+            this.projection = this.model.project(this.documentValue);
+            validateProjection(this.projection);
+        }
+        const line = edit.lineId ? this.projection.lines.find(line => line.id === edit.lineId) : undefined;
+        const source = edit.from ? this.projection.boxes.find(box => box.id === edit.from) : undefined;
+        const inserted = edit.boxId ? this.projection.boxes.find(box => box.id === edit.boxId) : undefined;
+        if (line && !isFlowLine(line) && ["insert", "reattach", "reset-line", "edit-line"].includes(edit.type))
+            return;
+        if ((edit.type === "add" && source && !isFlowBox(source)) || (edit.type === "insert" && inserted && !isFlowBox(inserted)))
+            return;
+        if (this.locked || (this.disableConnections && (edit.type === "connect" || edit.type === "disconnect" || edit.type === 'reattach' || edit.type === 'edit-line')))
+            return;
+        if (edit.type === 'edit-line' && (!this.projection.lines.some(line => line.id === edit.lineId) || (edit.label === undefined && edit.weight === undefined) || (edit.label !== undefined && typeof edit.label !== 'string') || (edit.weight !== undefined && (!Number.isFinite(edit.weight) || edit.weight < 0))))
             return;
         if (edit.type === 'delete-selection' && (!edit.selection?.length || edit.selection.some(item => !['box', 'line', 'note'].includes(item.type) || typeof item.id !== 'string' || !item.id))) {
             this.setStatus('The selected graph items are invalid', true);
@@ -544,6 +575,7 @@ export class ProcessModeler extends BaseElement {
     }
     editAcceptance(edit) {
         const before = this.layout;
+        const beforeAutoHeights = new Set(this.autoNoteHeights);
         const beforeSelection = [...this.selectedIds];
         const beforeItems = this.selection;
         const previousIds = new Set(this.projection.boxes.map((box) => box.id));
@@ -557,8 +589,10 @@ export class ProcessModeler extends BaseElement {
             // replace the document. Publish only after the whole history entry exists.
             this.acceptanceNotifications++;
             try {
-                if (command.layout)
+                if (command.layout) {
+                    this.autoNoteHeights.clear();
                     this.layoutValue = structuredClone(command.layout);
+                }
                 if (edit.type === 'reset-line' && edit.lineId)
                     delete this.layoutValue.lines?.[edit.lineId];
                 this.refresh();
@@ -579,9 +613,11 @@ export class ProcessModeler extends BaseElement {
                 if (session !== this.layoutEditSession)
                     return;
                 const after = this.layout;
+                const afterAutoHeights = new Set(this.autoNoteHeights);
                 const acceptedItems = command.selection ? command.selection.map(item => ({ type: item.type, id: item.id })) : undefined;
                 const acceptedSelection = command.selectionIds ? [...command.selectionIds] : undefined;
-                const restore = (layout) => {
+                const restore = (layout, autoHeights) => {
+                    this.autoNoteHeights = new Set(autoHeights);
                     this.layoutValue = structuredClone(layout);
                     this.refresh();
                     this.emitPositions();
@@ -589,7 +625,7 @@ export class ProcessModeler extends BaseElement {
                 this.history.record({
                     undo: () => {
                         command.undo();
-                        restore(before);
+                        restore(before, beforeAutoHeights);
                         if (acceptedItems)
                             this.selectItems(beforeItems);
                         else if (acceptedSelection)
@@ -597,7 +633,7 @@ export class ProcessModeler extends BaseElement {
                     },
                     redo: () => {
                         command.redo();
-                        restore(after);
+                        restore(after, afterAutoHeights);
                         if (acceptedItems)
                             this.selectItems(acceptedItems);
                         else if (acceptedSelection)
@@ -681,17 +717,20 @@ export class ProcessModeler extends BaseElement {
     commitLayout(next) {
         const before = this.layout;
         const after = structuredClone(next);
+        const beforeAutoHeights = new Set(this.autoNoteHeights);
+        const afterAutoHeights = new Set([...beforeAutoHeights].filter(id => before.boxes[id]?.height === after.boxes[id]?.height));
         if (JSON.stringify(before) === JSON.stringify(after) || this.locked)
             return;
-        const apply = (layout) => {
+        const apply = (layout, autoHeights) => {
+            this.autoNoteHeights = new Set(autoHeights);
             this.layoutValue = structuredClone(layout);
             this.refresh();
             this.emitPositions();
         };
-        apply(after);
+        apply(after, afterAutoHeights);
         this.history.record({
-            undo: () => apply(before),
-            redo: () => apply(after),
+            undo: () => apply(before, beforeAutoHeights),
+            redo: () => apply(after, afterAutoHeights),
         });
         this.updateToolbar();
     }
@@ -806,7 +845,7 @@ export class ProcessModeler extends BaseElement {
         this.commitLayout(next);
     }
     routeLine(id, points) {
-        if (!this.projection.lines.some((line) => line.id === id) ||
+        if (!this.projection.lines.some((line) => line.id === id && isFlowLine(line)) ||
             points.some((point) => !Number.isFinite(point.x) || !Number.isFinite(point.y)))
             return;
         this.commitLayout({
@@ -819,7 +858,7 @@ export class ProcessModeler extends BaseElement {
     }
     resetLine(id) {
         const line = this.projection.lines.find(line => line.id === id);
-        if (this.locked || !line)
+        if (this.locked || !line || !isFlowLine(line))
             return;
         if (line.fromSide || line.toSide || line.points?.length) {
             this.requestEdit({ type: 'reset-line', lineId: id });
@@ -1345,7 +1384,10 @@ export class ProcessModeler extends BaseElement {
         const root = this.shadowRoot;
         const selected = this.selected;
         root.querySelector('[part=process-title]').textContent = this.selectedIds.size > 1 ? `${this.selectedIds.size} steps selected` : selected?.title ?? this.processTitleValue;
-        root.querySelector('[part=process-summary]').textContent = this.selectedIds.size > 1 ? 'Arrange or group these steps' : selected ? this.catalog.find(kind => kind.kind === selected.kind)?.label ?? selected.kind : this.processSummaryValue;
+        const kind = selected && this.catalog.find(kind => kind.kind === selected.kind);
+        const kindSummary = kind ? `${kind.label}${kind.description !== undefined ? `. ${kind.description}` : ''}` : selected?.kind;
+        root.querySelector('[part=process-heading]').toggleAttribute('data-selected', Boolean(selected));
+        root.querySelector('[part=process-summary]').textContent = this.selectedIds.size > 1 ? 'Arrange or group these steps' : selected ? kindSummary : this.processSummaryValue;
         root.querySelector('[part=pane-tabs]').hidden = Boolean(selected);
         root.querySelectorAll('[part=pane-tabs] button').forEach(button => {
             button.textContent = button.dataset.pane === "Checks" ? `Checks ${this.allChecks.length}` : button.dataset.pane ?? "";
@@ -1632,7 +1674,34 @@ export class ProcessModeler extends BaseElement {
             content.append(actions);
         }
         else if (this.activePane === "Shortcuts") {
-            content.textContent = "Tab: move between steps. Alt+arrows: select the nearest step that way. Arrows: move one grid square. Shift+arrows: move four. N: add the next step. Ctrl+Alt+arrows: add in a direction. Enter: edit. Delete: remove. Ctrl/Command+A: select all. Ctrl/Command+C/V/D: copy, paste, duplicate. Ctrl/Command+Z and Shift+Ctrl/Command+Z: undo and redo. Shift+1: fit the whole process. Shift+drag: select a region. Drag a port: connect. Escape: cancel.";
+            const shortcuts = document.createElement('dl');
+            shortcuts.setAttribute('part', 'shortcut-list');
+            for (const [term, description] of [
+                ['Drag the canvas', 'Move around'], ['Scroll', 'Move around'], ['`Ctrl` + scroll, or pinch', 'Zoom'], ['`Shift` + drag', 'Select an area'],
+                ['Drag a dot beside a step', 'Draw a line. Drop on a box to attach it (the side follows the layout), or on one of its points to pin it there'],
+                ['Click a dot', 'Add a connected step that way'], ['`Alt` `Ctrl` + arrow', 'Add a connected step that way'],
+                ["Drag a line's handle", 'Move that part of the line by hand (Reset line undoes it)'], ["Drag a line's end", 'Attach it somewhere else'],
+                ['`N`', 'Add the next step'], ['Arrow keys', 'Nudge by one grid square (`Shift` for four)'], ['`Alt` + arrow', 'Go to the nearest step that way'],
+                ['`Enter`', 'Edit the selected step'], ['`Delete`', 'Delete the selection'], ['`Ctrl` `Z` / `Shift` `Z`', 'Undo / redo'],
+                ['`Ctrl` `C` `V` `D`', 'Copy, paste, duplicate'], ['`Shift` `1`', 'Fit the whole process'], ['`+` `-` `0`', 'Zoom in, out, 100%'],
+                ['Steps view', ''], ['`↑` `↓`', 'Go to the step above or below'], ['`Alt` + `↑` `↓`', 'Move the step up or down its path'], ['`Delete`', 'Delete the step'],
+                ['Pinch, or `Ctrl` + scroll', 'Zoom'], ['Code view', ''], ['`Ctrl` `Space`', 'Suggest what can go here'], ['`F8`', 'Go to the problem'], ['`Esc`', 'Leave the editor'],
+            ]) {
+                const dt = document.createElement('dt'), dd = document.createElement('dd');
+                if (!description)
+                    dt.setAttribute('part', 'shortcut-heading');
+                for (const [element, text] of [[dt, term], [dd, description]]) {
+                    text.split('`').forEach((run, index) => { if (index % 2) {
+                        const key = document.createElement('kbd');
+                        key.textContent = run;
+                        element.append(key);
+                    }
+                    else
+                        element.append(document.createTextNode(run)); });
+                }
+                shortcuts.append(dt, dd);
+            }
+            content.append(shortcuts);
         }
     }
     requestVariableEdit(edit) {
@@ -1643,6 +1712,10 @@ export class ProcessModeler extends BaseElement {
         }
     }
     selectionDimensions(box) {
+        if (!isFlowBox(box)) {
+            const p = this.layoutValue.boxes[box.id];
+            return { width: p.width ?? 208, height: p.height ?? 64 };
+        }
         const shape = box.shape ?? this.catalog.find(kind => kind.kind === box.kind)?.shape;
         const compact = shape === 'gateway' || shape === 'event';
         const position = this.layoutValue.boxes[box.id];
@@ -1675,12 +1748,13 @@ export class ProcessModeler extends BaseElement {
         this.arrangeSelection(width >= height ? 'middle' : 'center');
     }
     tidySelection() {
-        if (this.locked || this.selectedBoxes.length < 2)
+        const flow = this.selectedBoxes.filter(isFlowBox);
+        if (this.locked || flow.length < 2)
             return;
-        if (this.requestLayoutEdit('tidy', [...this.selectedIds]))
+        if (this.requestLayoutEdit('tidy', flow.map(box => box.id)))
             return;
         const next = this.layout;
-        const roots = this.selectedBoxes.filter(box => {
+        const roots = this.selectedBoxes.filter(isFlowBox).filter(box => {
             let parent = box.parentId;
             while (parent) {
                 if (this.selectedIds.has(parent))
@@ -1732,7 +1806,9 @@ export class ProcessModeler extends BaseElement {
     arrangeSelection(action) {
         if (this.locked || this.selectedBoxes.length < 2)
             return;
-        const boxes = this.selectedBoxes;
+        const boxes = this.selectedBoxes.filter(isFlowBox);
+        if (boxes.length < 2)
+            return;
         const next = this.layout;
         const sorted = [...boxes].filter(box => {
             let parent = box.parentId;
@@ -1817,13 +1893,14 @@ export class ProcessModeler extends BaseElement {
             this.commitLayout(next);
     }
     makeSection(title = 'New section') {
-        if (this.locked || !this.selectedBoxes.length)
+        const flow = this.selectedBoxes.filter(isFlowBox);
+        if (this.locked || !flow.length)
             return;
-        if (this.requestLayoutEdit('make-section', [...this.selectedIds], title))
+        if (this.requestLayoutEdit('make-section', flow.map(box => box.id), title))
             return;
-        if (this.selectedBoxes.length < 2)
+        if (flow.length < 2)
             return;
-        const positions = this.selectedBoxes.map(box => this.layoutValue.boxes[box.id]);
+        const positions = flow.map(box => this.layoutValue.boxes[box.id]);
         const x = Math.min(...positions.map(position => position.x)) - 24;
         const y = Math.min(...positions.map(position => position.y)) - 48;
         const right = Math.max(...positions.map(position => position.x + (position.width ?? 224))) + 24;
@@ -2064,6 +2141,11 @@ export class ProcessModeler extends BaseElement {
         const target = event.target;
         if (target.closest("input,textarea,select,[contenteditable],button,summary"))
             return;
+        if (target.closest('[part=canvas]') && !event.ctrlKey && !event.metaKey && !event.altKey && ['+', '=', '-', '0'].includes(event.key)) {
+            event.preventDefault();
+            this.zoomBy(event.key === '0' ? 1 / this.viewport.zoom : event.key === '-' ? 1 / 1.2 : 1.2);
+            return;
+        }
         if (event.key === ' ') {
             event.preventDefault();
             this.spacePressed = true;
@@ -2138,7 +2220,7 @@ export class ProcessModeler extends BaseElement {
             this.requestEdit({ type: 'disconnect', lineId: this.selectedLine.id });
             return;
         }
-        if ((event.key === "n" || event.key === "N") && box && !this.locked && this.catalog.length && !['finish', 'end'].includes(box.kind)) {
+        if ((event.key === "n" || event.key === "N") && box && isFlowBox(box) && !this.locked && this.catalog.length && !['finish', 'end'].includes(box.kind)) {
             event.preventDefault();
             this.openKeyboardChooser(box);
             return;
@@ -2175,7 +2257,11 @@ export class ProcessModeler extends BaseElement {
                 this.commitLayout(next);
             return;
         }
-        const canInsertDirection = event.ctrlKey && event.altKey && box && !this.locked && this.catalog.length && !this.disableConnections;
+        if (direction && event.ctrlKey && event.altKey && box && !isFlowBox(box)) {
+            event.preventDefault();
+            return;
+        }
+        const canInsertDirection = event.ctrlKey && event.altKey && box && isFlowBox(box) && !this.locked && this.catalog.length && !this.disableConnections;
         if (direction && !canInsertDirection && (event.altKey || !box || this.locked)) {
             event.preventDefault();
             this.navigateSelection(direction);
@@ -2211,6 +2297,8 @@ export class ProcessModeler extends BaseElement {
         }
         if (direction) {
             event.preventDefault();
+            if (event.ctrlKey && event.altKey && !isFlowBox(box))
+                return;
             if (event.ctrlKey && event.altKey && this.catalog.length && !this.disableConnections) {
                 const side = direction[0] < 0 ? "west" : direction[0] > 0 ? "east" : direction[1] < 0 ? "north" : "south";
                 const pos = this.layoutValue.boxes[box.id];
@@ -2309,7 +2397,7 @@ export class ProcessModeler extends BaseElement {
             return;
         }
         if (event.button !== 0 ||
-            event.target.closest("[part=connection],button,input,select,textarea,[contenteditable]"))
+            event.target.closest("[part=connection],[part=line-hit],button,input,select,textarea,[contenteditable]"))
             return;
         this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
         if (this.pointers.size === 2) {
@@ -2327,7 +2415,7 @@ export class ProcessModeler extends BaseElement {
             this.select(id);
         if (!id && event.shiftKey && !this.locked) {
             const point = this.canvasPoint(event);
-            this.marquee = { pointerId: event.pointerId, start: point, point };
+            this.marquee = { pointerId: event.pointerId, start: point, point, add: this.selection };
             canvas.setPointerCapture?.(event.pointerId);
             event.preventDefault();
             return;
@@ -2341,6 +2429,23 @@ export class ProcessModeler extends BaseElement {
             panY: this.viewport.y,
         };
     }
+    selectMarquee(start, point, add) {
+        const items = [...add];
+        const ids = new Set(add.filter(item => item.type === 'box').map(item => item.id));
+        for (const box of this.projection.boxes) {
+            if (box.kind === 'section')
+                continue;
+            const p = this.layoutValue.boxes[box.id], size = this.selectionDimensions(box);
+            if (p.x < Math.max(start.x, point.x) && p.x + size.width > Math.min(start.x, point.x) && p.y < Math.max(start.y, point.y) && p.y + size.height > Math.min(start.y, point.y)) {
+                ids.add(box.id);
+                items.push({ type: 'box', id: box.id });
+            }
+        }
+        for (const line of this.projection.lines)
+            if (ids.has(line.from) && ids.has(line.to))
+                items.push({ type: 'line', id: line.id });
+        this.selectItems(items);
+    }
     distance() {
         const [a, b] = [...this.pointers.values()];
         return a && b ? Math.hypot(a.x - b.x, a.y - b.y) : 0;
@@ -2411,7 +2516,11 @@ export class ProcessModeler extends BaseElement {
             return;
         }
         if (this.marquee) {
-            this.marquee.point = point;
+            const marquee = this.marquee;
+            marquee.point = point;
+            this.selectMarquee(marquee.start, point, marquee.add);
+            if (this.marquee !== marquee)
+                return;
             let region = this.shadowRoot.querySelector('[part=marquee]');
             if (!region) {
                 region = document.createElement("div");
@@ -2503,6 +2612,11 @@ export class ProcessModeler extends BaseElement {
                     const pos = this.layoutValue.boxes[port.id];
                     const offsets = { east: [320, 0], west: [-320, 0], north: [0, -170], south: [0, 170] }[port.side];
                     const source = this.projection.boxes.find(box => box.id === port.id);
+                    if (!isFlowBox(source)) {
+                        this.connecting = source.id;
+                        this.setStatus(`Select a step to attach ${source.title}`);
+                        return;
+                    }
                     const anchor = Array.from(this.shadowRoot.querySelectorAll('[part=port]'))
                         .find(element => element.dataset.owner === port.id && element.dataset.side === port.side);
                     this.openAnchoredChooser(this.nextEdit(source, port.side, { x: pos.x + offsets[0], y: pos.y + offsets[1] }), this.nextChooserTitle(source, port.side), anchor);
@@ -2513,6 +2627,10 @@ export class ProcessModeler extends BaseElement {
                         this.requestEdit({ type: "connect", from: port.id, to: target.id, fromSide: port.side, toSide: this.sideAt(target, point) });
                     else {
                         const source = this.projection.boxes.find(box => box.id === port.id);
+                        if (!isFlowBox(source)) {
+                            this.setStatus("Drop on a step to attach the note");
+                            return;
+                        }
                         const frame = this.boxAt(point, undefined, true);
                         if ((frame?.id ?? null) !== (source.parentId ?? null))
                             this.setStatus('Drop inside the same frame to add a connected step');
@@ -2555,10 +2673,10 @@ export class ProcessModeler extends BaseElement {
             return;
         }
         if (this.marquee) {
-            const { start } = this.marquee;
+            const { start, add } = this.marquee;
             this.marquee = undefined;
             if (commit)
-                this.selectMany(this.projection.boxes.filter(box => { const p = this.layoutValue.boxes[box.id]; return p.x < Math.max(start.x, point.x) && p.x + (p.width ?? 224) > Math.min(start.x, point.x) && p.y < Math.max(start.y, point.y) && p.y + (p.height ?? 64) > Math.min(start.y, point.y); }).map(box => box.id));
+                this.selectMarquee(start, point, add);
             this.shadowRoot.querySelector('[part=marquee]')?.remove();
             this.pointers.delete(event.pointerId);
             return;
@@ -2576,7 +2694,8 @@ export class ProcessModeler extends BaseElement {
                 this.suppressClick = true;
                 const position = this.alignedPoint(drag.id, drag.position.x + dx / this.viewport.zoom, drag.position.y + dy / this.viewport.zoom);
                 const line = this.lineAt(point, drag.id);
-                const frame = this.boxAt(point, drag.id, true);
+                const draggedBox = this.projection.boxes.find(box => box.id === drag.id);
+                const frame = isFlowBox(draggedBox) ? this.boxAt(point, drag.id, true) : this.projection.boxes.find(box => box.id === draggedBox.parentId);
                 if (line) {
                     const box = this.projection.boxes.find(box => box.id === drag.id);
                     const { width, height } = this.selectionDimensions(box);
@@ -2643,14 +2762,15 @@ export class ProcessModeler extends BaseElement {
         return sides.find(([, x, y]) => Math.hypot(point.x - x, point.y - y) <= 12 / this.viewport.zoom)?.[0];
     }
     lineAt(point, except) {
-        return this.projection.lines.find(line => line.from !== except && line.to !== except && nearProcessLine(point, this.routedLines.get(line.id) ?? [], 16 / this.viewport.zoom));
+        return this.projection.lines.find(line => isFlowLine(line) && (!except || isFlowBox(this.projection.boxes.find(box => box.id === except))) && line.from !== except && line.to !== except && nearProcessLine(point, this.routedLines.get(line.id) ?? [], 16 / this.viewport.zoom));
     }
     markDropLine(point, except) {
         this.dropLine = point ? this.lineAt(point, except)?.id : undefined;
         this.paintDropLine();
     }
     paintDropLine() {
-        this.shadowRoot.querySelectorAll('[part=line]').forEach(path => { const active = path.dataset.lineId === this.dropLine; path.dataset.drop = String(active); path.setAttribute('marker-end', `url(#${active || path.dataset.selected === 'true' ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`); });
+        this.shadowRoot.querySelectorAll('[part=line]').forEach(path => { const active = path.dataset.lineId === this.dropLine; path.dataset.drop = String(active); if (path.dataset.role !== 'association')
+            path.setAttribute('marker-end', `url(#${active || path.dataset.selected === 'true' ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`); });
     }
     alignedPoint(id, x, y) {
         const world = this.shadowRoot.querySelector('[part=world]');
@@ -2698,14 +2818,14 @@ export class ProcessModeler extends BaseElement {
         }
         chooser.addEventListener('close', () => this.shadowRoot?.querySelector('[part=ghost-box]')?.remove(), { once: true });
         const picker = chooser.querySelector('box-kind-picker');
-        picker.catalog = this.catalog.filter(kind => !kind.placement);
+        picker.catalog = this.catalog.filter(kind => kind.addable !== false && !kind.placement);
         picker.refresh();
         promoteModal(chooser);
         picker.focus();
     }
     nextEdit(box, side, position) {
         const shape = box.shape ?? this.catalog.find(kind => kind.kind === box.kind)?.shape;
-        const outgoing = this.projection.lines.filter(line => line.from === box.id);
+        const outgoing = this.projection.lines.filter(line => isFlowLine(line) && line.from === box.id);
         const placement = side ? { source: 'direction', side } : { source: 'next' };
         if ((!side || side === 'east') && shape !== 'gateway' && outgoing.length === 1)
             return { type: 'insert', lineId: outgoing[0].id, from: box.id, to: outgoing[0].to, placement };
@@ -2732,6 +2852,8 @@ export class ProcessModeler extends BaseElement {
         this.openAnchoredChooser(edit, title, anchor, returnFocus ?? source ?? this.shadowRoot.querySelector('[part=canvas]'));
     }
     openLineChooser(line, returnFocus) {
+        if (!isFlowLine(line))
+            return;
         const source = this.projection.boxes.find(box => box.id === line.from);
         const target = this.projection.boxes.find(box => box.id === line.to);
         const points = this.routedLines.get(line.id) ?? routeProcessLine(line, this.layoutValue, this.projection);
@@ -2758,7 +2880,7 @@ export class ProcessModeler extends BaseElement {
     };
     openKeyboardChooser(box) {
         const shape = box.shape ?? this.catalog.find(kind => kind.kind === box.kind)?.shape ?? (box.frame ? 'frame' : 'task');
-        const outgoing = this.projection.lines.filter(line => line.from === box.id);
+        const outgoing = this.projection.lines.filter(line => isFlowLine(line) && line.from === box.id);
         const target = outgoing.length === 1 ? this.projection.boxes.find(candidate => candidate.id === outgoing[0].to) : undefined;
         const insert = shape !== 'gateway' && outgoing.length === 1 && target;
         const anchor = Array.from(this.shadowRoot.querySelectorAll('[data-box-id]'))
@@ -2775,7 +2897,7 @@ export class ProcessModeler extends BaseElement {
         this.keyboardInsertion = edit;
         chooser.querySelector('[part=chooser-title]').textContent = title;
         const picker = chooser.querySelector('box-kind-picker');
-        picker.catalog = this.catalog.filter(kind => !kind.placement);
+        picker.catalog = this.catalog.filter(kind => kind.addable !== false && !kind.placement);
         picker.refresh();
         this.keyboardReturn = returnFocus ?? anchor;
         if (!anchor || !promotePopover(chooser)) {
@@ -2822,6 +2944,7 @@ export class ProcessModeler extends BaseElement {
         else
             this.projection = { boxes: [], lines: [] };
         this.layoutValue = this.arrangedLayout(this.layoutValue);
+        this.measureGraphNotes();
         this.routedLines = new Map(this.projection.lines.map(line => [line.id, routeProcessLine(line, this.layoutValue, this.projection)]));
         this.computedChecks = this.collectChecks();
         if (this.selectedId && !this.selected)
@@ -2834,7 +2957,7 @@ export class ProcessModeler extends BaseElement {
         if (!this.selectedId)
             this.selectedId = this.selectedIds.values().next().value ?? null;
         const serialized = JSON.stringify({
-            boxes: this.projection.boxes.map(box => ({ id: box.id, kind: box.kind, title: box.title, description: box.description, path: box.path, fingerprint: box.fingerprint, frame: box.frame, loopMark: box.loopMark, parentId: box.parentId, localVariables: box.localVariables, localVariablesEditable: box.localVariablesEditable, savedResult: box.savedResult })),
+            boxes: this.projection.boxes.map(box => ({ id: box.id, role: box.role, kind: box.kind, title: box.title, description: box.description, path: box.path, fingerprint: box.fingerprint, frame: box.frame, loopMark: box.loopMark, parentId: box.parentId, localVariables: box.localVariables, localVariablesEditable: box.localVariablesEditable, savedResult: box.savedResult })),
             lines: this.projection.lines,
         });
         if (this.documentValue !== undefined && (serialized !== this.lastProjection || this.documentValue !== this.lastDocument)) {
@@ -2884,9 +3007,44 @@ export class ProcessModeler extends BaseElement {
             (note ?? this.shadowRoot.querySelector('[part=canvas]'))?.focus({ preventScroll: true });
         }
     }
+    measureGraphNotes() {
+        const world = this.shadowRoot.querySelector('[part=world]');
+        for (const box of this.projection.boxes.filter(box => !isFlowBox(box))) {
+            const position = this.layoutValue.boxes[box.id];
+            if (position.height !== undefined && !this.autoNoteHeights.has(box.id))
+                continue;
+            this.autoNoteHeights.add(box.id);
+            const element = document.createElement('div');
+            element.setAttribute('part', 'box');
+            element.dataset.shape = 'note';
+            element.style.cssText = `visibility:hidden;pointer-events:none;height:auto;width:${position.width ?? 208}px`;
+            const body = document.createElement('div');
+            body.setAttribute('part', 'note-body');
+            body.textContent = box.description ?? box.title;
+            element.append(body);
+            world.append(element);
+            const bounds = body.getBoundingClientRect();
+            if (bounds.width > 0 && bounds.height > 0)
+                position.height = bounds.height * (position.width ?? 208) / bounds.width;
+            element.remove();
+        }
+        // Only library fallback positions need collision placement; a host's
+        // arrangement is authoritative, and a containing frame is not an obstacle.
+        for (const box of this.projection.boxes.filter(box => this.unplacedNotes.has(box.id))) {
+            const position = this.layoutValue.boxes[box.id], ancestors = new Set();
+            for (let parent = box.parentId; parent; parent = this.projection.boxes.find(b => b.id === parent)?.parentId)
+                ancestors.add(parent);
+            let overlaps;
+            do {
+                overlaps = Object.entries(this.layoutValue.boxes).filter(([id, p]) => id !== box.id && !ancestors.has(id) && position.x < p.x + (p.width ?? 224) && position.x + (position.width ?? 208) > p.x && position.y < p.y + (p.height ?? 64) && position.y + (position.height ?? 64) > p.y).map(([, p]) => p);
+                if (overlaps.length)
+                    position.y = Math.max(...overlaps.map(p => p.y + (p.height ?? 64))) + 60;
+            } while (overlaps.length);
+        }
+    }
     get allChecks() { return this.computedChecks; }
     collectChecks() {
-        const routes = this.projection.lines.filter(line => !this.routedLines.get(line.id)?.length)
+        const routes = this.projection.lines.filter(line => isFlowLine(line) && !this.routedLines.get(line.id)?.length)
             .map(line => ({ message: "A connection is blocked by overlapping steps. Move a step or adjust its route.", boxId: line.from }));
         const hostChecks = this.documentValue === undefined ? undefined : this.model.validate?.(this.documentValue, this.projection);
         return [...this.checks, ...(hostChecks ?? graphChecks(this.projection)), ...routes];
@@ -2922,28 +3080,38 @@ export class ProcessModeler extends BaseElement {
             element.setAttribute("part", box.frame ? "frame" : "box");
             element.dataset.boxId = box.id;
             const kind = this.catalog.find((entry) => entry.kind === box.kind);
-            const shape = box.shape ?? kind?.shape ?? (box.frame ? "frame" : "task");
+            const shape = !isFlowBox(box) ? "note" : box.shape ?? kind?.shape ?? (box.frame ? "frame" : "task");
             element.dataset.shape = shape;
+            if (!isFlowBox(box))
+                element.setAttribute("aria-roledescription", "note");
             element.dataset.kind = box.kind;
             element.dataset.tone = kind?.tone === "accent" ? "accent" : "neutral";
             const problem = this.allChecks.find(check => check.boxId === box.id || (check.path && JSON.stringify(check.path) === JSON.stringify(box.path)));
-            const incoming = this.projection.lines.filter(line => line.to === box.id).length;
-            const outgoing = this.projection.lines.filter(line => line.from === box.id).length;
-            element.setAttribute("aria-label", [`${kind?.label ?? box.kind}: ${box.title}. ${incoming} in, ${outgoing} out`, problem ? `Needs attention: ${problem.title || problem.message}` : ""]
+            const incoming = this.projection.lines.filter(line => isFlowLine(line) && line.to === box.id).length;
+            const outgoing = this.projection.lines.filter(line => isFlowLine(line) && line.from === box.id).length;
+            element.setAttribute("aria-label", [`${kind?.label ?? box.kind}: ${box.title}${isFlowBox(box) ? `. ${incoming} in, ${outgoing} out` : ""}`, problem ? `Needs attention: ${problem.title || problem.message}` : ""]
                 .filter(Boolean)
                 .join(". "));
             element.setAttribute("aria-current", String(this.selectedIds.has(box.id)));
-            this.place(element, this.layoutValue.boxes[box.id]);
+            this.place(element, { ...this.layoutValue.boxes[box.id], ...(!isFlowBox(box) ? { width: this.layoutValue.boxes[box.id].width ?? 208 } : {}) });
+            if (!isFlowBox(box)) {
+                const text = document.createElement("div");
+                text.setAttribute("part", "note-body");
+                text.textContent = box.description ?? box.title;
+                element.append(text);
+            }
             const icon = document.createElement("span");
             icon.setAttribute("part", "icon");
             icon.setAttribute("aria-hidden", "true");
             if (kind?.icon) {
                 icon.append(kind.icon());
             }
-            element.append(icon);
+            if (isFlowBox(box))
+                element.append(icon);
             const title = document.createElement("strong");
             title.textContent = box.title;
-            element.append(title);
+            if (isFlowBox(box))
+                element.append(title);
             let descriptionParent = element;
             if (shape === 'event' && this.detailValue === 'technical' && box.technicalDetails?.length) {
                 const details = document.createElement('div');
@@ -2973,7 +3141,7 @@ export class ProcessModeler extends BaseElement {
             }
             if (shape === 'task' && box.technicalDetails)
                 icon.style.gridRow = 'span 4';
-            if (this.detailValue === "technical" && box.technicalDetails) {
+            if (isFlowBox(box) && this.detailValue === "technical" && box.technicalDetails) {
                 for (const line of box.technicalDetails) {
                     if (!line.text && !line.segments?.length)
                         continue;
@@ -2996,7 +3164,7 @@ export class ProcessModeler extends BaseElement {
                     descriptionParent.append(description);
                 }
             }
-            else {
+            else if (isFlowBox(box)) {
                 const descriptionText = this.detailValue === "technical" ? box.technicalDescription ?? box.description : box.description;
                 if (descriptionText) {
                     const description = document.createElement("small");
@@ -3081,7 +3249,9 @@ export class ProcessModeler extends BaseElement {
                     });
                     this.connecting = null;
                 }
-                if (event.shiftKey)
+                if (event.shiftKey && (this.graphSelection || this.selectedLineIds.size || this.selectedNoteIds.size))
+                    this.selectItems(this.selectedIds.has(box.id) ? this.selection.filter(item => item.type !== "box" || item.id !== box.id) : [...this.selection, { type: "box", id: box.id }]);
+                else if (event.shiftKey)
                     this.selectMany(this.selectedIds.has(box.id) ? [...this.selectedIds].filter(id => id !== box.id) : [...this.selectedIds, box.id]);
                 else
                     this.select(box.id);
@@ -3098,6 +3268,11 @@ export class ProcessModeler extends BaseElement {
                     port.addEventListener("click", event => {
                         event.stopPropagation();
                         if (!event.detail) {
+                            if (!isFlowBox(box)) {
+                                this.connecting = box.id;
+                                this.setStatus(`Select a step to attach ${box.title}`);
+                                return;
+                            }
                             const pos = this.layoutValue.boxes[box.id];
                             const offsets = { east: [320, 0], west: [-320, 0], north: [0, -170], south: [0, 170] }[side];
                             this.openAnchoredChooser(this.nextEdit(box, side, { x: pos.x + offsets[0], y: pos.y + offsets[1] }), this.nextChooserTitle(box, side), port);
@@ -3125,6 +3300,11 @@ export class ProcessModeler extends BaseElement {
                 element.append(handle);
             }
             world.append(element);
+            if (!isFlowBox(box)) {
+                const height = this.layoutValue.boxes[box.id].height;
+                if (height !== undefined)
+                    element.querySelector('[part=note-body]').style.minHeight = `${height}px`;
+            }
         }
         const lines = svgElement("svg");
         lines.setAttribute("part", "lines");
@@ -3156,17 +3336,33 @@ export class ProcessModeler extends BaseElement {
             path.setAttribute("part", "line");
             path.dataset.lineId = line.id;
             path.dataset.selected = String(this.selectedLineIds.has(line.id));
-            path.setAttribute('marker-end', `url(#${this.selectedLineIds.has(line.id) ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`);
+            if (isFlowLine(line))
+                path.setAttribute('marker-end', `url(#${this.selectedLineIds.has(line.id) ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`);
             path.setAttribute("vector-effect", "non-scaling-stroke");
             path.setAttribute("d", roundedProcessPath(points));
-            if (line.dashed)
+            path.dataset.role = line.role ?? "flow";
+            if (!isFlowLine(line))
+                path.setAttribute("stroke-dasharray", "2 4");
+            else if (line.dashed)
                 path.setAttribute("stroke-dasharray", "6 4");
-            if (this.showLastRunValue && line.share !== undefined) {
+            if (!isFlowLine(line)) {
+                const hit = svgElement("polyline");
+                hit.setAttribute("part", "line-hit");
+                hit.dataset.lineId = line.id;
+                hit.setAttribute("vector-effect", "non-scaling-stroke");
+                hit.setAttribute("points", points.map(p => `${p.x},${p.y}`).join(" "));
+                hit.addEventListener("click", event => { if (event.shiftKey)
+                    this.selectItems(this.selectedLineIds.has(line.id) ? this.selection.filter(item => item.type !== "line" || item.id !== line.id) : [...this.selection, { type: "line", id: line.id }]);
+                else
+                    this.selectLine(line.id); });
+                lines.append(hit);
+            }
+            if (isFlowLine(line) && this.showLastRunValue && line.share !== undefined) {
                 path.style.strokeWidth = `${Math.round((1.5 + Math.max(0, Math.min(1, line.share)) * 2.5) * 100) / 100}px`;
                 path.setAttribute('aria-label', `${Math.round(line.share * 100)}% of last-run traffic`);
             }
             lines.append(path);
-            for (const point of [line.fromSide ? points[0] : null, line.toSide ? points.at(-1) : null]) {
+            for (const point of [isFlowLine(line) && line.fromSide ? points[0] : null, isFlowLine(line) && line.toSide ? points.at(-1) : null]) {
                 if (!point)
                     continue;
                 const pin = svgElement('circle');
@@ -3176,7 +3372,7 @@ export class ProcessModeler extends BaseElement {
                 pin.setAttribute('r', '3');
                 lines.append(pin);
             }
-            for (let i = 1; i < points.length - 2; i++) {
+            for (let i = 1; isFlowLine(line) && i < points.length - 2; i++) {
                 const hit = svgElement("polyline");
                 hit.setAttribute("part", "line-hit");
                 hit.dataset.lineId = line.id;
@@ -3187,6 +3383,8 @@ export class ProcessModeler extends BaseElement {
             }
             const label = document.createElement("div");
             label.setAttribute("part", "connection");
+            label.dataset.lineId = line.id;
+            label.dataset.role = line.role ?? "flow";
             label.setAttribute('role', 'group');
             label.tabIndex = 0;
             label.style.left = `${midpoint.x}px`;
@@ -3194,17 +3392,20 @@ export class ProcessModeler extends BaseElement {
             const names = `${this.projection.boxes.find((box) => box.id === line.from).title} to ${this.projection.boxes.find((box) => box.id === line.to).title}${line.label ? `, ${line.label}` : ""}`;
             label.setAttribute('aria-label', `Connection: ${names}${this.showLastRunValue && line.share !== undefined ? `. ${Math.round(line.share * 100)}% of last-run traffic` : ''}`);
             label.addEventListener('click', event => { if (event.target.closest('button'))
-                return; this.selectLine(line.id); });
+                return; if (event.shiftKey)
+                this.selectItems(this.selectedLineIds.has(line.id) ? this.selection.filter(item => item.type !== 'line' || item.id !== line.id) : [...this.selection, { type: 'line', id: line.id }]);
+            else
+                this.selectLine(line.id); });
             label.addEventListener('keydown', event => { if (event.target === label && (event.key === 'Enter' || event.key === ' ')) {
                 event.preventDefault();
                 this.selectLine(line.id);
             } });
             const text = document.createElement("span");
             const source = this.projection.boxes.find(box => box.id === line.from);
-            const branchIndex = this.projection.lines.filter(candidate => candidate.from === line.from).indexOf(line);
-            text.textContent = line.label ?? (line.weight !== undefined ? String(line.weight) : /decision/i.test(source.kind) ? ["Yes", "No"][branchIndex] ?? `Route ${branchIndex + 1}` : /try/i.test(source.kind) && line.dashed ? "If it fails" : "");
+            const branchIndex = this.projection.lines.filter(candidate => isFlowLine(candidate) && candidate.from === line.from).indexOf(line);
+            text.textContent = !isFlowLine(line) ? "" : line.label ?? (line.weight !== undefined ? String(line.weight) : /decision/i.test(source.kind) ? ["Yes", "No"][branchIndex] ?? `Route ${branchIndex + 1}` : /try/i.test(source.kind) && line.dashed ? "If it fails" : "");
             label.append(text);
-            if (this.showLastRunValue && line.share !== undefined) {
+            if (isFlowLine(line) && this.showLastRunValue && line.share !== undefined) {
                 const share = document.createElement('small');
                 share.textContent = `${Math.round(line.share * 100)}%`;
                 label.append(share);
@@ -3212,7 +3413,7 @@ export class ProcessModeler extends BaseElement {
             const actions = document.createElement("div");
             actions.setAttribute("part", "connection-actions");
             label.append(actions);
-            if (points.length >= 4 && !this.locked) {
+            if (isFlowLine(line) && points.length >= 4 && !this.locked) {
                 const adjust = document.createElement("button");
                 adjust.type = "button";
                 adjust.textContent = "Route";
@@ -3242,7 +3443,7 @@ export class ProcessModeler extends BaseElement {
                 ["insert", "Insert a step here"],
                 ["disconnect", "Remove connection"],
             ]) {
-                if (type === "disconnect" && this.disableConnections)
+                if ((type === "disconnect" && this.disableConnections) || (type === "insert" && !isFlowLine(line)))
                     continue;
                 const button = document.createElement("button");
                 button.type = "button";
@@ -3266,7 +3467,7 @@ export class ProcessModeler extends BaseElement {
                 actions.append(button);
             }
             world.append(label);
-            if (this.selectedLineId === line.id && !this.locked && !this.disableConnections) {
+            if (isFlowLine(line) && this.selectedLineId === line.id && !this.locked && !this.disableConnections) {
                 for (const [end, point] of [['from', points[0]], ['to', points.at(-1)]]) {
                     const grip = document.createElement('button');
                     grip.type = 'button';
@@ -3321,7 +3522,7 @@ export class ProcessModeler extends BaseElement {
             return;
         }
         const selected = this.selectedIds.size === 1 ? this.selected : null;
-        const from = selected && !selected.frame && selected.kind !== 'section' && !['end', 'finish'].includes(selected.kind) ? selected.id : undefined;
+        const from = selected && isFlowBox(selected) && !selected.frame && selected.kind !== 'section' && !['end', 'finish'].includes(selected.kind) ? selected.id : undefined;
         if (from && selected)
             this.requestEdit({ ...this.nextEdit(selected), kind });
         else {
@@ -3333,7 +3534,7 @@ export class ProcessModeler extends BaseElement {
     paletteLineAt(point) {
         let nearest;
         let best = 20 / this.viewport.zoom;
-        for (const line of this.projection.lines) {
+        for (const line of this.projection.lines.filter(isFlowLine)) {
             const points = this.routedLines.get(line.id) ?? [];
             for (let i = 1; i < points.length; i++) {
                 const a = points[i - 1], b = points[i], dx = b.x - a.x, dy = b.y - a.y, length = dx * dx + dy * dy;
@@ -3457,7 +3658,7 @@ export class ProcessModeler extends BaseElement {
         const query = this.shadowRoot.querySelector("[part=search]").value.toLowerCase();
         choices.replaceChildren();
         let group = "";
-        for (const kind of this.catalog.filter((kind) => `${kind.label} ${kind.description} ${kind.group ?? ""} ${(kind.aliases ?? []).join(" ")}`
+        for (const kind of this.catalog.filter((kind) => kind.addable !== false && `${kind.label} ${kind.description} ${kind.group ?? ""} ${(kind.aliases ?? []).join(" ")}`
             .toLowerCase()
             .includes(query))) {
             if (kind.group && kind.group !== group) {
@@ -3593,16 +3794,99 @@ export class ProcessModeler extends BaseElement {
             checks.append(button);
         });
     }
+    renderFields(editor, box, help, disclosures) {
+        let sectionKey, disclosureKey, rowKey;
+        let section = editor, disclosure = editor, row = editor;
+        for (const field of this.fieldsValue[box.id] ?? []) {
+            if (field.section?.key !== sectionKey) {
+                sectionKey = field.section?.key;
+                disclosureKey = rowKey = undefined;
+                section = editor;
+                if (field.section) {
+                    section = document.createElement('section');
+                    section.setAttribute('part', 'field-section');
+                    section.dataset.section = sectionKey;
+                    const title = document.createElement('h3');
+                    title.textContent = field.section.title;
+                    section.append(title);
+                    if (field.section.description || field.section.descriptionSegments) {
+                        const description = document.createElement('p');
+                        description.setAttribute('part', 'field-section-description');
+                        if (field.section.descriptionSegments)
+                            for (const segment of field.section.descriptionSegments) {
+                                if (segment.format === 'code') {
+                                    const code = document.createElement('code');
+                                    code.textContent = segment.text;
+                                    description.append(code);
+                                }
+                                else
+                                    description.append(document.createTextNode(segment.text));
+                            }
+                        else
+                            description.textContent = field.section.description;
+                        section.append(description);
+                    }
+                    editor.append(section);
+                }
+                disclosure = row = section;
+            }
+            if (field.disclosure?.key !== disclosureKey) {
+                disclosureKey = field.disclosure?.key;
+                rowKey = undefined;
+                disclosure = section;
+                if (field.disclosure) {
+                    const details = document.createElement('details');
+                    details.setAttribute('part', 'field-disclosure');
+                    details.dataset.disclosure = JSON.stringify([sectionKey, disclosureKey]);
+                    details.dataset.session = String(this.layoutEditSession);
+                    const configuredOpen = Boolean(field.disclosure.open);
+                    const previous = disclosures.get(details.dataset.disclosure);
+                    details.dataset.configuredOpen = String(configuredOpen);
+                    details.open = previous?.configuredOpen === configuredOpen ? previous.open : configuredOpen;
+                    const summary = document.createElement('summary');
+                    summary.textContent = field.disclosure.summary;
+                    details.append(summary);
+                    section.append(details);
+                    disclosure = details;
+                }
+                row = disclosure;
+            }
+            if (field.row?.key !== rowKey) {
+                rowKey = field.row?.key;
+                row = disclosure;
+                if (field.row) {
+                    row = document.createElement('div');
+                    row.setAttribute('part', 'field-row');
+                    row.dataset.row = rowKey;
+                    if (field.row.leadingWidth !== undefined && Number.isFinite(field.row.leadingWidth) && field.row.leadingWidth > 0)
+                        row.style.gridTemplateColumns = `${field.row.leadingWidth}px minmax(0, 1fr)`;
+                    if (field.row.gap !== undefined && Number.isFinite(field.row.gap) && field.row.gap >= 0)
+                        row.style.gap = `${field.row.gap}px`;
+                    disclosure.append(row);
+                }
+            }
+            row.append(this.renderField(box, field, help.get(field.key)));
+        }
+    }
     renderField(box, field, helpOpen = false) {
         const row = document.createElement('div');
         row.setAttribute('part', 'field');
         const label = document.createElement('label');
         label.textContent = field.label;
+        if (field.optional) {
+            const optional = document.createElement('em');
+            optional.setAttribute('part', 'field-optional');
+            optional.textContent = ' optional';
+            const name = document.createElement('span');
+            name.append(...Array.from(label.childNodes), optional);
+            label.append(name);
+        }
         let control;
         if (field.kind === 'multiline' || (field.kind === 'expression' && (field.expression?.rows ?? 1) > 1)) {
             control = document.createElement('textarea');
-            if (field.expression?.rows)
-                control.rows = Math.max(2, Math.floor(field.expression.rows));
+            const rows = field.kind === 'expression' ? field.expression?.rows : field.rows;
+            if (rows !== undefined && Number.isFinite(rows))
+                control.rows = Math.max(field.kind === 'expression' ? 2 : 1, Math.floor(rows));
         }
         else if (field.kind === 'choice') {
             const select = document.createElement('select');
@@ -3628,7 +3912,7 @@ export class ProcessModeler extends BaseElement {
         }
         else {
             const input = document.createElement('input');
-            input.type = field.kind === 'boolean' ? 'checkbox' : field.kind === 'number' ? 'number' : field.kind === 'search' ? 'search' : 'text';
+            input.type = field.kind === 'boolean' ? 'checkbox' : field.kind === 'number' ? 'number' : field.kind === 'search' ? 'search' : field.kind === 'time' || field.kind === 'datetime-local' ? field.kind : 'text';
             control = input;
         }
         control.dataset.field = field.key;
@@ -3641,6 +3925,18 @@ export class ProcessModeler extends BaseElement {
         control.required = Boolean(field.required);
         if (field.placeholder && (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement))
             control.placeholder = field.placeholder;
+        if (control instanceof HTMLInputElement && field.kind === 'number') {
+            if (field.min !== undefined && Number.isFinite(field.min))
+                control.min = String(field.min);
+            if (field.max !== undefined && Number.isFinite(field.max))
+                control.max = String(field.max);
+            if (field.step === 'any' || (typeof field.step === 'number' && Number.isFinite(field.step) && field.step > 0))
+                control.step = String(field.step);
+        }
+        if (field.format === 'code') {
+            control.dataset.format = 'code';
+            control.spellcheck = false;
+        }
         if (field.kind === 'expression') {
             control.spellcheck = false;
             control.setAttribute('autocomplete', 'off');
@@ -3648,17 +3944,27 @@ export class ProcessModeler extends BaseElement {
         }
         if (field.problem)
             control.setAttribute('aria-invalid', 'true');
-        const submit = () => emit(this, 'process-field-change-request', { boxId: box.id, path: box.path, key: field.key, value: control instanceof HTMLInputElement && control.type === 'checkbox' ? control.checked : control instanceof HTMLInputElement && control.type === 'number' && control.value !== '' ? Number(control.value) : control.value });
+        const fieldSession = this.layoutEditSession;
+        const submit = () => {
+            if (!control.isConnected || control.disabled || this.locked || fieldSession !== this.layoutEditSession || this.selected?.id !== box.id)
+                return;
+            emit(this, 'process-field-change-request', { boxId: box.id, path: box.path, key: field.key, value: control instanceof HTMLInputElement && control.type === 'checkbox' ? control.checked : control instanceof HTMLInputElement && control.type === 'number' && control.value !== '' ? Number(control.value) : control.value });
+        };
         if (field.kind !== 'action')
             control.addEventListener(field.kind === 'expression' ? 'input' : 'change', submit);
-        label.append(control);
+        if (field.kind === 'boolean') {
+            row.dataset.boolean = '';
+            label.prepend(control);
+        }
+        else
+            label.append(control);
         row.append(label);
         if (field.kind === 'action' && control instanceof HTMLInputElement) {
             const input = control;
             const options = field.options ?? [];
             const list = document.createElement('div');
             list.setAttribute('part', 'action-options');
-            list.id = `process-action-${box.id}-${field.key}`.replace(/[^a-zA-Z0-9-]/g, '-');
+            list.id = `process-action-${++actionControlSequence}`;
             list.hidden = true;
             const optionList = document.createElement('div');
             optionList.setAttribute('role', 'listbox');
@@ -3669,106 +3975,234 @@ export class ProcessModeler extends BaseElement {
             input.setAttribute('aria-controls', optionList.id);
             input.setAttribute('aria-expanded', 'false');
             input.autocomplete = 'off';
+            const availableGroups = [...new Set(options.map(option => option.group).filter((name) => Boolean(name)))];
+            const groups = [...new Set([...(field.actionGroups ?? []).map(item => item.name).filter(name => availableGroups.includes(name)), ...availableGroups])];
+            const shown = input.value;
             let group = null;
             let active = 0;
-            let browse = false;
-            const close = () => { list.hidden = true; browse = false; input.setAttribute('aria-expanded', 'false'); input.removeAttribute('aria-activedescendant'); };
-            const choose = (option) => { input.focus(); input.value = option.value; close(); submit(); };
+            let browse = true;
+            const close = (restore = true) => { list.hidden = true; if (restore)
+                input.value = shown; input.setAttribute('aria-expanded', 'false'); input.removeAttribute('aria-activedescendant'); };
+            const place = () => {
+                if (list.hidden)
+                    return;
+                const viewport = this.ownerDocument.defaultView;
+                const rect = input.getBoundingClientRect();
+                if (!input.isConnected) {
+                    close();
+                    return;
+                }
+                if (!rect.width && !rect.height)
+                    return;
+                if (rect.bottom <= 0 || rect.top >= viewport.innerHeight) {
+                    close();
+                    return;
+                }
+                const below = Math.max(0, viewport.innerHeight - rect.bottom - 12), above = Math.max(0, rect.top - 12);
+                const up = below < 260 && above > below;
+                Object.assign(list.style, { left: `${Math.max(8, rect.left)}px`, right: 'auto', width: `${Math.min(rect.width, viewport.innerWidth - 16)}px`, maxHeight: `${Math.min(420, up ? above : below)}px`, top: up ? 'auto' : `${rect.bottom + 4}px`, bottom: up ? `${viewport.innerHeight - rect.top + 4}px` : 'auto' });
+            };
+            const dismissOutside = (event) => { const path = event.composedPath(); if (!list.hidden && !path.includes(input) && !path.includes(list) && !path.some(target => target instanceof HTMLElement && target.getAttribute('part') === 'action-caret'))
+                close(); };
+            const viewport = this.ownerDocument.defaultView;
+            viewport.addEventListener('resize', place);
+            this.ownerDocument.addEventListener('scroll', place, true);
+            this.shadowRoot.addEventListener('scroll', place, true);
+            this.ownerDocument.addEventListener('pointerdown', dismissOutside, true);
+            this.inspectorFieldCleanups.push(() => { close(); viewport.removeEventListener('resize', place); this.ownerDocument.removeEventListener('scroll', place, true); this.shadowRoot?.removeEventListener('scroll', place, true); this.ownerDocument.removeEventListener('pointerdown', dismissOutside, true); });
+            const choose = (option) => {
+                const session = this.layoutEditSession;
+                if (!input.isConnected || input.disabled || this.locked || this.selected?.id !== box.id)
+                    return;
+                input.focus();
+                if (session !== this.layoutEditSession || !input.isConnected || input.disabled || this.locked || this.selected?.id !== box.id || this.shadowRoot?.activeElement !== input || input.closest('[inert]'))
+                    return;
+                input.value = option.value;
+                close(false);
+                this.pendingActionChoice = { boxId: box.id, key: field.key, value: option.value, session };
+                submit();
+            };
             const render = () => {
                 list.replaceChildren();
                 optionList.replaceChildren();
                 const query = browse ? '' : input.value.trim().toLocaleLowerCase();
-                const matches = options.filter(option => (!group || option.group === group) && (!query || `${option.label} ${option.value} ${option.group ?? ''}`.toLocaleLowerCase().includes(query)));
-                if (!group && !query) {
-                    const groups = [...new Set(options.map(option => option.group).filter((name) => Boolean(name)))];
-                    for (const name of groups) {
-                        const button = document.createElement('button');
-                        button.type = 'button';
-                        button.setAttribute('part', 'action-group');
-                        button.textContent = name;
-                        button.onclick = () => { input.focus(); group = name; browse = true; render(); };
-                        list.append(button);
+                const terms = query.split(/\s+/).filter(Boolean);
+                let matches = options.filter(option => (!group || option.group === group) && terms.every(term => `${option.label} ${option.value} ${option.group ?? ''} ${option.description ?? ''}`.toLocaleLowerCase().includes(term)));
+                if (!group && !query && groups.length)
+                    matches = matches.filter(option => !option.group);
+                if (query) {
+                    const starts = (text, term) => text.toLocaleLowerCase().split(/[\s›_.]+/).some(word => word.startsWith(term));
+                    const score = (option) => terms.filter(term => starts(option.group ?? '', term) || starts(option.label, term)).length;
+                    matches.sort((a, b) => score(b) - score(a) || (a.group?.length ?? 0) - (b.group?.length ?? 0) || a.label.length - b.label.length);
+                    matches = matches.slice(0, 60);
+                }
+                const addHeading = (text) => { const heading = document.createElement('h3'); heading.setAttribute('part', 'action-heading'); heading.setAttribute('aria-hidden', 'true'); heading.textContent = text; optionList.append(heading); };
+                const addNavigation = (name, part, activate) => {
+                    const button = document.createElement('button');
+                    button.type = 'button';
+                    button.tabIndex = -1;
+                    button.setAttribute('part', part);
+                    button.setAttribute('role', 'option');
+                    const title = document.createElement('strong');
+                    title.textContent = name;
+                    const chevron = document.createElement('span');
+                    chevron.setAttribute('part', 'action-chevron');
+                    chevron.setAttribute('aria-hidden', 'true');
+                    chevron.textContent = part === 'action-back' ? '‹' : '›';
+                    if (part === 'action-back') {
+                        button.append(chevron, title);
+                        button.setAttribute('aria-label', 'Back to all kinds of items');
+                    }
+                    else {
+                        const count = document.createElement('small');
+                        const total = options.filter(option => option.group === name).length;
+                        count.textContent = String(total);
+                        button.append(title, count, chevron);
+                        button.setAttribute('aria-label', `${name}, ${total} actions`);
+                    }
+                    button.onclick = activate;
+                    optionList.append(button);
+                };
+                if (!group && (!query || groups.some(name => name.toLocaleLowerCase().includes(query)))) {
+                    const visibleGroups = query ? groups.filter(name => name.toLocaleLowerCase().includes(query)).slice(0, 4) : groups;
+                    let heading;
+                    for (const name of visibleGroups) {
+                        const nextHeading = !query ? field.actionGroups?.find(item => item.name === name)?.heading : undefined;
+                        if (nextHeading && nextHeading !== heading)
+                            addHeading(nextHeading);
+                        heading = nextHeading;
+                        addNavigation(name, 'action-group', () => { group = name; browse = true; active = 1; render(); });
                     }
                 }
                 if (group) {
-                    const back = document.createElement('button');
-                    back.type = 'button';
-                    back.setAttribute('part', 'action-back');
-                    back.textContent = `All actions / ${group}`;
-                    back.onclick = () => { input.focus(); group = null; browse = true; render(); };
-                    list.prepend(back);
+                    addNavigation('All kinds of items', 'action-back', () => { const previous = group; group = null; browse = true; active = Math.max(0, groups.indexOf(previous)); render(); });
+                    addHeading(group);
                 }
-                for (const [index, option] of matches.entries()) {
+                const addAction = (option, custom = false) => {
                     const item = document.createElement('button');
                     item.type = 'button';
+                    item.tabIndex = -1;
                     item.setAttribute('role', 'option');
                     item.setAttribute('part', 'action-option');
-                    item.id = `${list.id}-${index}`;
-                    item.setAttribute('aria-selected', String(index === active));
                     const title = document.createElement('strong');
-                    title.textContent = option.label;
+                    title.textContent = group && option.label.startsWith(`${group} › `) ? option.label.slice(group.length + 3) : query && option.group && !option.label.startsWith(`${option.group} › `) ? `${option.group} › ${option.label}` : option.label;
                     item.append(title);
-                    if (option.value !== option.label) {
+                    const actionLabel = option.group && option.label.startsWith(`${option.group} › `) ? option.label.slice(option.group.length + 3) : option.label;
+                    item.setAttribute('aria-label', custom ? `Use ${option.value}, a step named in your code` : query && option.group ? `${option.group}, ${actionLabel}` : title.textContent);
+                    if (custom)
+                        item.dataset.custom = '';
+                    if (option.value === field.value)
+                        item.dataset.current = '';
+                    const detail = option.description ?? (option.value !== option.label ? option.value : undefined);
+                    if (detail) {
                         const code = document.createElement('small');
-                        code.textContent = option.value;
+                        code.textContent = detail;
+                        if (!custom)
+                            code.dataset.format = 'code';
                         item.append(code);
                     }
                     item.onclick = () => choose(option);
                     optionList.append(item);
-                }
-                if (!matches.length) {
+                };
+                for (const option of matches)
+                    addAction(option);
+                if (field.allowCustomValue && /^[a-z0-9_]+(\.[a-z0-9_]+)+$/.test(query) && !options.some(option => option.value === query))
+                    addAction({ value: query, label: `Use “${query}”`, description: 'A step named in your code' }, true);
+                if (!optionList.querySelector('[role=option]')) {
                     const empty = document.createElement('p');
-                    empty.textContent = 'No matching actions';
+                    empty.setAttribute('part', 'action-empty');
+                    empty.textContent = 'No Box action matches. Try a kind of item, like “files”, or an action, like “delete”.';
                     list.append(empty);
                 }
                 list.append(optionList);
-                active = Math.min(active, Math.max(0, matches.length - 1));
+                const items = Array.from(optionList.querySelectorAll('[role=option]'));
+                active = Math.min(active, Math.max(0, items.length - 1));
+                items.forEach((item, index) => { item.id = `${list.id}-${index}`; item.setAttribute('aria-selected', String(index === active)); });
                 list.hidden = false;
                 input.setAttribute('aria-expanded', 'true');
-                const selected = list.querySelectorAll('[role=option]')[active];
-                if (selected)
-                    input.setAttribute('aria-activedescendant', selected.id);
+                if (items[active])
+                    input.setAttribute('aria-activedescendant', items[active].id);
                 else
                     input.removeAttribute('aria-activedescendant');
+                place();
+                items[active]?.scrollIntoView?.({ block: 'nearest' });
             };
-            input.addEventListener('focus', () => { group = null; browse = false; render(); });
-            input.addEventListener('input', () => { group = null; browse = false; active = 0; render(); });
+            const openSelected = () => {
+                if (this.quietActionFocus)
+                    return;
+                this.pendingActionChoice = undefined;
+                const current = options.find(option => option.value === field.value);
+                group = current?.group ?? null;
+                browse = true;
+                active = group ? 1 + options.filter(option => option.group === group).findIndex(option => option === current) : current ? groups.length + options.filter(option => !option.group).indexOf(current) : 0;
+                render();
+            };
+            list.addEventListener('pointerdown', event => event.preventDefault());
+            input.addEventListener('focus', () => { if (!this.quietActionFocus) {
+                input.select();
+                openSelected();
+            } });
+            input.addEventListener('input', () => { this.pendingActionChoice = undefined; group = null; browse = false; active = 0; render(); });
+            input.addEventListener('pointerdown', () => { if (list.hidden && this.shadowRoot?.activeElement === input)
+                openSelected(); });
             input.addEventListener('keydown', event => {
+                if (list.hidden) {
+                    if (event.key === 'ArrowDown' || event.key === 'Enter') {
+                        event.preventDefault();
+                        openSelected();
+                    }
+                    return;
+                }
                 if (event.key === 'Escape') {
                     event.preventDefault();
+                    event.stopPropagation();
                     close();
                     return;
                 }
-                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                if (event.key === 'Tab') {
+                    close();
+                    return;
+                }
+                const items = Array.from(list.querySelectorAll('[role=option]'));
+                if (!items.length)
+                    return;
+                if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || group && (event.key === 'Home' || event.key === 'End')) {
                     event.preventDefault();
-                    if (list.hidden)
-                        render();
-                    const items = Array.from(list.querySelectorAll('[role=option]'));
-                    if (!items.length)
-                        return;
-                    active = (active + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+                    active = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : (active + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
                     items.forEach((item, index) => item.setAttribute('aria-selected', String(index === active)));
                     input.setAttribute('aria-activedescendant', items[active].id);
                     items[active].scrollIntoView?.({ block: 'nearest' });
                 }
-                else if (event.key === 'Enter' && !list.hidden) {
-                    const items = Array.from(list.querySelectorAll('[role=option]'));
+                else if (event.key === 'Enter' || event.key === 'ArrowRight' && items[active]?.getAttribute('part') === 'action-group') {
                     if (items[active]) {
                         event.preventDefault();
                         items[active].click();
                     }
                 }
+                else if (event.key === 'ArrowLeft' && group && input.value === shown) {
+                    event.preventDefault();
+                    list.querySelector('[part=action-back]')?.click();
+                }
             });
             const caret = document.createElement('button');
             caret.type = 'button';
             caret.setAttribute('part', 'action-caret');
             caret.setAttribute('aria-label', `Browse ${field.label.toLowerCase()} choices`);
-            caret.textContent = '⌄';
+            const caretIcon = document.createElement('span');
+            caretIcon.setAttribute('part', 'action-caret-icon');
+            caretIcon.setAttribute('aria-hidden', 'true');
+            caret.append(caretIcon);
             caret.disabled = input.disabled;
-            caret.onclick = () => { input.focus(); group = null; browse = true; active = 0; render(); };
+            caret.onclick = () => { this.pendingActionChoice = undefined; input.focus(); group = null; browse = true; active = 0; render(); };
             row.addEventListener('focusout', event => { if (!row.contains(event.relatedTarget))
                 close(); });
-            row.append(caret, list);
+            const combo = document.createElement('span');
+            combo.setAttribute('part', 'action-input');
+            input.remove();
+            input.id = `${list.id}-input`;
+            label.htmlFor = input.id;
+            combo.append(input, caret);
+            row.append(combo, list);
         }
         if (field.kind === 'search' && field.options?.length && control instanceof HTMLInputElement) {
             const options = document.createElement('datalist');
@@ -3823,10 +4257,10 @@ export class ProcessModeler extends BaseElement {
             describedBy.push(help.id);
         }
         const feedback = field.problem || (field.kind === 'expression' ? field.expression?.feedback?.message : undefined);
-        if (feedback) {
+        if (feedback || (field.kind === 'expression' && field.expression?.feedback !== undefined)) {
             const message = document.createElement('small');
             message.id = `${messageId}-feedback`;
-            message.textContent = feedback;
+            message.textContent = feedback ?? '';
             message.setAttribute('part', field.problem ? 'field-problem' : 'field-feedback');
             if (field.kind === 'expression')
                 message.setAttribute('aria-live', 'polite');
@@ -3836,6 +4270,14 @@ export class ProcessModeler extends BaseElement {
             row.insertBefore(message, chips);
             describedBy.push(message.id);
         }
+        if (field.annotation) {
+            const annotation = document.createElement('small');
+            annotation.setAttribute('part', 'field-annotation');
+            annotation.id = `${messageId}-annotation`;
+            annotation.textContent = field.annotation;
+            row.append(annotation);
+            describedBy.push(annotation.id);
+        }
         if (describedBy.length)
             control.setAttribute('aria-describedby', describedBy.join(' '));
         if (field.kind === 'expression' && field.expression?.help) {
@@ -3867,11 +4309,118 @@ export class ProcessModeler extends BaseElement {
         }
         return row;
     }
+    renderLeadsTo(editor, selected) {
+        const previous = editor.querySelector('[part=leads-to]');
+        if (!isFlowBox(selected) || ['end', 'finish'].includes(selected.kind)) {
+            previous?.remove();
+            return;
+        }
+        const outgoing = this.projection.lines.filter(line => isFlowLine(line) && line.from === selected.id);
+        const state = JSON.stringify([selected.id, selected.kind, this.locked, this.disableConnections, outgoing, this.projection.boxes.filter(box => box.parentId === selected.parentId).map(({ id, title, kind, role }) => ({ id, title, kind, role }))]);
+        if (previous?.dataset.state === state)
+            return;
+        const leads = document.createElement('section');
+        leads.setAttribute('part', 'leads-to');
+        leads.dataset.state = state;
+        const heading = document.createElement('h3');
+        heading.textContent = 'Leads to';
+        leads.append(heading);
+        const session = this.layoutEditSession;
+        const current = (control) => control.isConnected && this.selected?.id === selected.id && this.layoutEditSession === session && !this.locked && !this.disableConnections;
+        const list = document.createElement('ul');
+        list.setAttribute('part', 'lead-list');
+        for (const line of outgoing) {
+            const row = document.createElement('li');
+            row.setAttribute('part', 'lead-row');
+            if (selected.kind === 'decision' || selected.kind === 'choice') {
+                const input = document.createElement('input');
+                const weighted = selected.kind === 'choice';
+                input.setAttribute('part', 'lead-control');
+                input.dataset.lead = line.id;
+                input.dataset.leadOwner = selected.id;
+                input.type = weighted ? 'number' : 'text';
+                input.setAttribute('aria-label', weighted ? 'Weight' : 'Path name');
+                if (weighted)
+                    input.min = '0';
+                input.value = weighted ? String(line.weight ?? 1) : line.label ?? '';
+                input.disabled = this.locked || this.disableConnections;
+                input.onchange = () => {
+                    if (!current(input) || !this.projection.lines.some(candidate => candidate.id === line.id && candidate.from === selected.id))
+                        return;
+                    if (weighted) {
+                        const weight = input.valueAsNumber;
+                        if (Number.isFinite(weight) && weight >= 0 && weight !== (line.weight ?? 1))
+                            this.requestEdit({ type: 'edit-line', lineId: line.id, weight });
+                    }
+                    else if (input.value !== (line.label ?? ''))
+                        this.requestEdit({ type: 'edit-line', lineId: line.id, label: input.value });
+                };
+                row.append(input);
+            }
+            const target = this.projection.boxes.find(box => box.id === line.to);
+            const name = document.createElement('span');
+            name.textContent = target?.title ?? line.to;
+            row.append(name);
+            if (!this.disableConnections) {
+                const remove = document.createElement('button');
+                remove.type = 'button';
+                remove.setAttribute('part', 'lead-remove');
+                remove.setAttribute('aria-label', `Remove the connection to ${target?.title ?? line.to}`);
+                remove.append(variableGlyph());
+                remove.disabled = this.locked;
+                remove.onclick = () => { if (current(remove))
+                    this.requestEdit({ type: 'disconnect', lineId: line.id }); };
+                row.append(remove);
+            }
+            list.append(row);
+        }
+        if (outgoing.length)
+            leads.append(list);
+        else {
+            const empty = document.createElement('p');
+            empty.setAttribute('part', 'lead-help');
+            empty.textContent = 'Nothing yet. Drag from a dot on the step, or pick one below.';
+            leads.append(empty);
+        }
+        const eligible = this.projection.boxes.filter(box => isFlowBox(box) && box.id !== selected.id && !['start', 'timer'].includes(box.kind) && box.parentId === selected.parentId && !outgoing.some(line => line.to === box.id));
+        if (eligible.length) {
+            const label = variableLabel('Connect to');
+            label.setAttribute('part', 'lead-target');
+            const select = document.createElement('select');
+            select.setAttribute('aria-label', 'Connect to');
+            select.disabled = this.locked || this.disableConnections;
+            const placeholder = document.createElement('option');
+            placeholder.value = '';
+            placeholder.textContent = 'Connect to…';
+            select.append(placeholder);
+            for (const box of eligible) {
+                const option = document.createElement('option');
+                option.value = box.id;
+                option.textContent = box.title;
+                select.append(option);
+            }
+            select.onchange = () => { const to = select.value; if (to && current(select) && eligible.some(box => box.id === to))
+                this.requestEdit({ type: 'connect', from: selected.id, to }); select.value = ''; };
+            label.append(select);
+            leads.append(label);
+        }
+        if (previous)
+            previous.replaceWith(leads);
+        else
+            editor.append(leads);
+    }
     renderSelection() {
         this.shadowRoot?.querySelectorAll('[part=note]').forEach(note => { note.dataset.selected = String(this.selectedNoteIds.has(note.dataset.noteId)); note.setAttribute('aria-pressed', note.dataset.selected); });
         if (!this.isRendered)
             return;
         const focusedControl = this.shadowRoot.activeElement;
+        const focusedLead = focusedControl?.dataset.lead, focusedLeadOwner = focusedControl?.dataset.leadOwner;
+        const focusedLeadSession = this.layoutEditSession;
+        const summaryOwner = focusedControl?.tagName === 'SUMMARY' ? focusedControl.parentElement : null;
+        const focusedDisclosure = summaryOwner?.matches('[part=field-disclosure]') ? summaryOwner : null;
+        const disclosureOwner = this.inspectedId;
+        const focusedDisclosureKey = focusedDisclosure?.dataset.disclosure;
+        const disclosureSession = focusedDisclosure?.dataset.session;
         const focusedKey = focusedControl?.dataset.field ?? focusedControl?.dataset.variable ?? focusedControl?.dataset.localVariable;
         const variableKey = focusedControl?.dataset.variableKey;
         const fieldBox = focusedControl?.dataset.fieldBox;
@@ -3882,6 +4431,22 @@ export class ProcessModeler extends BaseElement {
         const direction = focusedControl && 'selectionDirection' in focusedControl ? focusedControl.selectionDirection : null;
         const scrollTop = focusedControl?.scrollTop, scrollLeft = focusedControl?.scrollLeft;
         const restoreControlFocus = () => {
+            if (focusedLead !== undefined) {
+                if (this.selected?.id !== focusedLeadOwner || focusedLeadSession !== this.layoutEditSession || this.locked || this.disableConnections)
+                    return;
+                const replacement = Array.from(this.shadowRoot.querySelectorAll('[part=lead-control]')).find(input => input.dataset.lead === focusedLead && input.dataset.leadOwner === focusedLeadOwner);
+                replacement?.focus({ preventScroll: true });
+                if (replacement && caret !== null && replacement.selectionStart !== null)
+                    replacement.setSelectionRange(caret, selectionEnd ?? caret);
+                return;
+            }
+            if (focusedDisclosureKey !== undefined) {
+                if (this.selected?.id !== disclosureOwner || disclosureSession !== String(this.layoutEditSession))
+                    return;
+                const replacement = Array.from(this.shadowRoot.querySelectorAll('[part=field-disclosure]')).find(item => item.dataset.disclosure === focusedDisclosureKey && item.dataset.session === disclosureSession);
+                replacement?.querySelector('summary')?.focus({ preventScroll: true });
+                return;
+            }
             if (focusedKey === undefined || !focusedType)
                 return;
             if (focusedType === 'field' && (this.selected?.id !== fieldBox || this.locked))
@@ -3918,8 +4483,23 @@ export class ProcessModeler extends BaseElement {
             }
             if (!control || control.disabled || control.closest('[inert]'))
                 return;
-            control.focus({ preventScroll: true });
-            if (caret !== null && (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) && control.type !== 'number' && control.type !== 'checkbox')
+            const closedDisclosure = control.closest('[part=field-disclosure]:not([open])');
+            if (closedDisclosure) {
+                closedDisclosure.querySelector('summary')?.focus({ preventScroll: true });
+                return;
+            }
+            const choice = this.pendingActionChoice;
+            // Hosts may echo the committed value repeatedly. Keep focus restoration
+            // quiet until the user explicitly reopens or searches this picker.
+            const quiet = Boolean(focusedType === 'field' && choice && choice.boxId === fieldBox && choice.key === focusedKey && choice.session === this.layoutEditSession && this.fieldsValue[fieldBox]?.some(field => field.key === focusedKey && field.value === choice.value));
+            this.quietActionFocus = quiet;
+            try {
+                control.focus({ preventScroll: true });
+            }
+            finally {
+                this.quietActionFocus = false;
+            }
+            if (caret !== null && (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) && control.selectionStart !== null)
                 control.setSelectionRange(caret, selectionEnd ?? caret, direction ?? undefined);
             if (scrollTop !== undefined)
                 control.scrollTop = scrollTop;
@@ -3927,7 +4507,8 @@ export class ProcessModeler extends BaseElement {
                 control.scrollLeft = scrollLeft;
         };
         this.shadowRoot.querySelectorAll('[part=minimap] [data-map-box]').forEach(rect => rect.dataset.selected = String(this.selectedIds.has(rect.dataset.mapBox)));
-        this.shadowRoot.querySelectorAll('[part=line]').forEach(line => { const selected = this.selectedLineIds.has(line.dataset.lineId); line.dataset.selected = String(selected); line.setAttribute('marker-end', `url(#${selected ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`); });
+        this.shadowRoot.querySelectorAll('[part=line]').forEach(line => { const selected = this.selectedLineIds.has(line.dataset.lineId); line.dataset.selected = String(selected); if (line.dataset.role !== 'association')
+            line.setAttribute('marker-end', `url(#${selected ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`); });
         this.shadowRoot.querySelectorAll("[data-box-id]").forEach((element) => {
             element.setAttribute("aria-current", String(this.selectedIds.has(element.dataset.boxId)));
             const box = this.projection.boxes.find((box) => box.id === element.dataset.boxId);
@@ -3938,7 +4519,7 @@ export class ProcessModeler extends BaseElement {
         const editor = this.shadowRoot.querySelector("[part=editor]");
         const selected = this.selected;
         const fallbackScope = selected && (this.fieldsValue[selected.id] ?? []).some(field => field.kind === 'expression' && field.expression?.variables === undefined) ? this.variables.map(({ name, description }) => ({ name, description })) : undefined;
-        const controlsKey = `${JSON.stringify(fallbackScope)}|${[...this.selectedIds].join(',')}|${this.locked}|${this.disableConnections}|${this.showLastRunValue}|${selected?.runMetrics}|${JSON.stringify([selected?.localVariables, selected?.localVariablesEditable, selected?.frame])}|${JSON.stringify(selected ? this.fieldsValue[selected.id] ?? [] : [])}`;
+        const controlsKey = `${JSON.stringify(fallbackScope)}|${[...this.selectedIds].join(',')}|${this.locked}|${this.disableConnections}|${this.showLastRunValue}|${selected?.runMetrics}|${selected?.role}|${JSON.stringify([selected?.localVariables, selected?.localVariablesEditable, selected?.frame])}|${JSON.stringify(selected ? this.fieldsValue[selected.id] ?? [] : [])}`;
         this.shadowRoot.querySelector("[part=palette]").hidden = false;
         this.shadowRoot.querySelector('[part=selection-toolbar]').hidden = this.selection.length === 0;
         this.renderSelectionToolbar();
@@ -3948,23 +4529,31 @@ export class ProcessModeler extends BaseElement {
             this.inspectedId === selected?.id &&
             this.inspectedControls === controlsKey &&
             editor.querySelector(`[part=inspector-heading]`)?.tagName === `H${this.headingLevel}`) {
-            editor.querySelector("[part=inspector-heading]").textContent = selected?.title ?? "";
+            editor.querySelector("[part=inspector-heading]").textContent = this.selectedIds.size > 1 ? `${this.selectedIds.size} steps selected` : selected?.title ?? "";
             const locals = editor.querySelector('[part=local-variables]');
-            if (selected && locals && locals.dataset.localEchoRevision !== String(this.localEchoRevision)) {
+            if (selected && this.selectedIds.size === 1 && locals && locals.dataset.localEchoRevision !== String(this.localEchoRevision)) {
                 // Reconcile controlled local drafts without disposing the host's custom
                 // inspector or unrelated focused controls on unchanged document echoes.
                 locals.replaceWith(this.renderLocalVariables(selected));
             }
+            if (selected && this.selectedIds.size === 1)
+                this.renderLeadsTo(editor, selected);
             restoreControlFocus();
             return;
         }
         const expressionHelp = new Map();
+        const disclosures = new Map();
         if (this.inspectedId === selected?.id && this.selectedIds.size === 1) {
+            for (const disclosure of Array.from(editor.querySelectorAll('[part=field-disclosure]'))) {
+                if (disclosure.dataset.session === String(this.layoutEditSession))
+                    disclosures.set(disclosure.dataset.disclosure, { open: disclosure.open, configuredOpen: disclosure.dataset.configuredOpen === 'true' });
+            }
             for (const help of Array.from(editor.querySelectorAll('[part=expression-help]'))) {
                 if (help.dataset.session === String(this.layoutEditSession))
                     expressionHelp.set(help.dataset.helpField, help.open);
             }
         }
+        this.cleanupInspectorFields();
         this.cleanupInspector?.();
         this.cleanupInspector = undefined;
         editor.replaceChildren();
@@ -4013,44 +4602,13 @@ export class ProcessModeler extends BaseElement {
                 purpose.textContent = selected.description;
                 editor.append(purpose);
             }
-            for (const field of this.fieldsValue[selected.id] ?? [])
-                editor.append(this.renderField(selected, field, expressionHelp.get(field.key)));
+            this.renderFields(editor, selected, expressionHelp, disclosures);
             if (selected.localVariables !== undefined)
                 editor.append(this.renderLocalVariables(selected));
             this.cleanupInspector =
                 this.renderer?.(selected.node, editor) || undefined;
-            const outgoing = this.projection.lines.filter(line => line.from === selected.id);
-            const leads = document.createElement('section');
-            leads.setAttribute('part', 'leads-to');
-            const leadsHeading = document.createElement('h3');
-            leadsHeading.textContent = 'Leads to';
-            leads.append(leadsHeading);
-            for (const line of outgoing) {
-                const row = document.createElement('div');
-                row.setAttribute('part', 'lead-row');
-                const target = this.projection.boxes.find(box => box.id === line.to);
-                const name = document.createElement('span');
-                name.textContent = `${line.label ? `${line.label}: ` : ''}${target?.title ?? line.to}`;
-                row.append(name);
-                if (!this.disableConnections) {
-                    const remove = document.createElement('button');
-                    remove.type = 'button';
-                    remove.textContent = 'Remove';
-                    remove.setAttribute('aria-label', `Remove connection to ${target?.title ?? line.to}`);
-                    remove.disabled = this.locked;
-                    remove.onclick = () => this.requestEdit({ type: 'disconnect', lineId: line.id });
-                    row.append(remove);
-                }
-                leads.append(row);
-            }
-            const connect = document.createElement('button');
-            connect.type = 'button';
-            connect.textContent = 'Connect to…';
-            connect.disabled = this.locked || this.disableConnections;
-            connect.onclick = () => { this.connecting = selected.id; this.setStatus(`Select the next box to connect from ${selected.title}`); };
-            leads.append(connect);
-            editor.append(leads);
-            const metrics = this.showLastRunValue && selected.runMetrics !== false ? this.lastRunValue?.steps[selected.id] : undefined;
+            this.renderLeadsTo(editor, selected);
+            const metrics = isFlowBox(selected) && this.showLastRunValue && selected.runMetrics !== false ? this.lastRunValue?.steps[selected.id] : undefined;
             if (metrics) {
                 const report = document.createElement('section');
                 report.setAttribute('part', 'inspector-metrics');
@@ -4084,22 +4642,25 @@ export class ProcessModeler extends BaseElement {
                     }
                     report.append(list);
                 }
-                editor.insertBefore(report, leads);
+                editor.insertBefore(report, editor.querySelector('[part=leads-to]'));
             }
             const actions = document.createElement('div');
             actions.setAttribute('part', 'inspector-actions');
-            const duplicate = document.createElement('button');
-            duplicate.type = 'button';
-            duplicate.textContent = 'Duplicate';
-            duplicate.disabled = this.locked;
-            duplicate.onclick = () => this.duplicateBoxes([selected.id], 48);
-            const remove = document.createElement('button');
-            remove.type = 'button';
-            remove.textContent = 'Delete';
-            remove.disabled = this.locked;
-            remove.onclick = () => this.requestEdit({ type: 'delete', boxId: selected.id });
-            actions.append(duplicate, remove);
-            editor.append(actions);
+            if (!['start', 'timer'].includes(selected.kind)) {
+                const duplicate = document.createElement('button');
+                duplicate.type = 'button';
+                duplicate.textContent = 'Duplicate';
+                duplicate.disabled = this.locked;
+                duplicate.onclick = () => this.duplicateBoxes([selected.id], 48);
+                const remove = document.createElement('button');
+                remove.type = 'button';
+                remove.textContent = 'Delete';
+                remove.disabled = this.locked;
+                remove.onclick = () => this.requestEdit({ type: 'delete', boxId: selected.id });
+                actions.append(duplicate, remove);
+            }
+            if (actions.childElementCount)
+                editor.append(actions);
         }
         restoreControlFocus();
     }
@@ -4209,7 +4770,7 @@ export class ProcessModeler extends BaseElement {
     }
     renderSelectionToolbar() {
         const toolbar = this.shadowRoot.querySelector('[part=selection-toolbar]');
-        const key = `${JSON.stringify(this.selection)}|${this.graphSelection}|${this.selected?.kind}|${this.selected?.shape}|${this.selectedLineId}|${Boolean(this.selectedLine && (this.layoutValue.lines?.[this.selectedLine.id] || this.selectedLine.fromSide || this.selectedLine.toSide || this.selectedLine.points?.length))}|${this.locked}|${this.narrowValue}|${this.projection.lines.filter(line => line.from === this.selectedId).map(line => `${line.id}:${line.label}:${line.dashed}`).join(',')}`;
+        const key = `${JSON.stringify(this.selection)}|${this.graphSelection}|${this.selected?.kind}|${this.selected?.shape}|${this.selected?.role}|${this.selectedLine?.role}|${this.selectedLineId}|${Boolean(this.selectedLine && (this.layoutValue.lines?.[this.selectedLine.id] || this.selectedLine.fromSide || this.selectedLine.toSide || this.selectedLine.points?.length))}|${this.locked}|${this.narrowValue}|${this.projection.lines.filter(line => line.from === this.selectedId).map(line => `${line.id}:${line.label}:${line.dashed}`).join(',')}`;
         if (key === this.selectionToolbarKey)
             return;
         this.selectionToolbarKey = key;
@@ -4224,10 +4785,10 @@ export class ProcessModeler extends BaseElement {
             button.disabled = this.locked;
             button.onclick = action;
             if (withPlus) {
-                const icon = document.createElement('span');
+                const icon = variableGlyph(true);
                 icon.setAttribute('part', 'selection-plus');
                 icon.setAttribute('aria-hidden', 'true');
-                icon.textContent = '+';
+                icon.setAttribute('focusable', 'false');
                 button.append(icon);
             }
             const text = document.createElement('span');
@@ -4236,24 +4797,27 @@ export class ProcessModeler extends BaseElement {
             toolbar.append(button);
         };
         if (this.graphSelection && (this.selectedNoteIds.size || this.selectedLineIds.size > 1 || this.selectedLineIds.size && this.selectedIds.size)) {
-            if (this.selectedIds.size > 1)
+            if (this.selectedIds.size) {
                 add('Line up', 'align', () => this.selectionCommand('align'));
+                add('Tidy these', 'space', () => this.selectionCommand('space'));
+            }
             add('Delete', 'delete-many', () => this.selectionCommand('delete-many'));
         }
         else if (this.selectedLine) {
             const line = this.selectedLine;
-            add('Insert a step', 'insert', () => this.openLineChooser(line, toolbar.querySelector('[data-selection-command=insert]') ?? undefined), true);
-            if (this.layoutValue.lines?.[line.id] || line.fromSide || line.toSide || line.points?.length)
+            if (isFlowLine(line))
+                add('Insert a step', 'insert', () => this.openLineChooser(line, toolbar.querySelector('[data-selection-command=insert]') ?? undefined), true);
+            if (isFlowLine(line) && (this.layoutValue.lines?.[line.id] || line.fromSide || line.toSide || line.points?.length))
                 add('Reset line', 'reset-line', () => this.resetLine(line.id));
             if (!this.disableConnections)
                 add('Delete', 'delete-line', () => this.requestEdit({ type: 'disconnect', lineId: line.id }));
         }
         else if (this.selectedIds.size === 1) {
             const box = this.selected;
-            const failurePath = box.kind === 'try' && !this.projection.lines.some(line => line.from === box.id && (line.dashed || line.label === 'If it fails'));
+            const failurePath = isFlowBox(box) && box.kind === 'try' && !this.projection.lines.some(line => isFlowLine(line) && line.from === box.id && (line.dashed || line.label === 'If it fails'));
             if (this.narrowValue)
                 add('Details', 'details', () => this.openDrawer('inspector'));
-            if (!['end', 'finish', 'section', 'note'].includes(box.kind))
+            if (isFlowBox(box) && !['end', 'finish', 'section', 'note'].includes(box.kind))
                 add(box.shape === 'gateway' ? 'Add a path' : 'Add next', 'add-next', () => this.openAnchoredChooser(this.nextEdit(box), this.nextChooserTitle(box), toolbar.querySelector('[data-selection-command=add-next]') ?? undefined), true);
             if (failurePath)
                 add('If it fails', 'add-failure', () => this.openAnchoredChooser({ type: 'add', from: box.id, routeLabel: 'If it fails', dashed: true, placement: { source: 'next' } }, `If a step in ${box.title} fails`, toolbar.querySelector('[data-selection-command=add-failure]') ?? undefined, Array.from(this.shadowRoot.querySelectorAll('[data-box-id]')).find(element => element.dataset.boxId === box.id)), true);
@@ -4378,9 +4942,7 @@ export class ProcessModeler extends BaseElement {
         positions.push(...(this.layoutValue.notes ?? []).filter(note => this.selectedNoteIds.has(note.id)).map(note => ({ ...note, width: 208, height: 80 })));
         if (!positions.length && this.selectedLine) {
             const point = lineMidpoint(this.routedLines.get(this.selectedLine.id) ?? []);
-            toolbar.style.left = `${Math.max(8, Math.min(point.x * this.viewport.zoom + this.viewport.x, Math.max(8, canvas.clientWidth - toolbar.offsetWidth - 8)))}px`;
-            toolbar.style.top = `${Math.max(8, point.y * this.viewport.zoom + this.viewport.y - 52)}px`;
-            return;
+            positions.push({ x: point.x, y: point.y - 14 / this.viewport.zoom, width: 0, height: 0 });
         }
         if (!positions.length) {
             for (const id of this.selectedLineIds) {
@@ -4394,10 +4956,11 @@ export class ProcessModeler extends BaseElement {
         if (!positions.length)
             return;
         const left = Math.min(...positions.map(position => position.x * this.viewport.zoom + this.viewport.x));
+        const right = Math.max(...positions.map(position => (position.x + (position.width ?? 224)) * this.viewport.zoom + this.viewport.x));
         const top = Math.min(...positions.map(position => position.y * this.viewport.zoom + this.viewport.y));
         const bottom = Math.max(...positions.map(position => (position.y + (position.height ?? 64)) * this.viewport.zoom + this.viewport.y));
-        toolbar.style.left = `${Math.max(8, Math.min(left, Math.max(8, canvas.clientWidth - toolbar.offsetWidth - 8)))}px`;
-        toolbar.style.top = `${top > 56 ? top - 48 : Math.min(bottom + 8, Math.max(8, canvas.clientHeight - toolbar.offsetHeight - 8))}px`;
+        toolbar.style.left = `${Math.min(Math.max((left + right) / 2, 120), canvas.clientWidth - 120)}px`;
+        toolbar.style.top = `${top - 12 < 56 ? bottom + 52 : top - 12}px`;
     }
     focusBox(id) {
         Array.from(this.shadowRoot.querySelectorAll("[data-box-id]"))