@unofficialbox/box-open-elements 0.31.2 → 0.33.0

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

@@ -1,4 +1,5 @@
 import { BaseElement } from "../../core/index.js";
+import { iconPlus, iconXBatsu } from "../../foundations/icons/glyphs/index.js";
 import { announce } from "../../foundations/a11y/index.js";
 import { dismissModal, dismissPopover, promoteModal, promotePopover, trackAnchor } from "../../foundations/overlay/index.js";
 import { KindPicker } from "../flow-builder/primitives.js";
@@ -7,6 +8,20 @@ import { restoreProcessPositions, snapshotProcessPositions, snapshotProcessProje
 import { processModelerDesign } from "./design.js";
 import { completeLayout, ProcessHistory, validateProjection, } from "./model.js";
 const svgElement = (tag) => document.createElementNS("http://www.w3.org/2000/svg", tag);
+const variableLabel = (text) => {
+    const label = document.createElement('label'), name = document.createElement('span');
+    name.setAttribute('part', 'sr-only');
+    name.textContent = text;
+    label.append(name);
+    return label;
+};
+const variableGlyph = (add = false) => {
+    const template = document.createElement('template');
+    template.innerHTML = add ? iconPlus : iconXBatsu;
+    const glyph = template.content.firstElementChild;
+    glyph.setAttribute('part', 'variable-icon');
+    return glyph;
+};
 const checkGlyph = (success = false) => {
     const icon = svgElement('svg');
     icon.setAttribute('part', 'check-icon');
@@ -53,6 +68,9 @@ export class ProcessModeler extends BaseElement {
     showLastRunValue = false;
     selectedId = null;
     selectedLineId = null;
+    selectedLineIds = new Set();
+    selectedNoteIds = new Set();
+    graphSelection = false;
     connecting = null;
     checks = [];
     renderer;
@@ -60,6 +78,8 @@ export class ProcessModeler extends BaseElement {
     inspected;
     inspectedId;
     inspectedControls = "";
+    localEchoRevision = 0;
+    pendingLocalRename;
     historyValue = new ProcessHistory();
     viewport = { x: 0, y: 0, zoom: 1 };
     pointers = new Map();
@@ -74,7 +94,36 @@ export class ProcessModeler extends BaseElement {
     activeDrawer;
     drawerReturn;
     selectedIds = new Set();
-    clipboardIds = [];
+    clipboard = null;
+    clipboardSession = 0;
+    layoutEditSession = 0;
+    acceptanceNotifications = 0;
+    deferredNotifications = [];
+    notify(name, detail) {
+        if (this.acceptanceNotifications)
+            this.deferredNotifications.push({ name, detail, session: this.layoutEditSession });
+        else
+            emit(this, name, detail);
+    }
+    flushAcceptanceNotifications() {
+        if (this.acceptanceNotifications)
+            return;
+        this.acceptanceNotifications++;
+        try {
+            // Observer edits append behind the complete accepted batch, rather than
+            // publishing newer state before older queued persistence notifications.
+            while (this.deferredNotifications.length) {
+                const notification = this.deferredNotifications.shift();
+                if (notification.session !== this.layoutEditSession)
+                    continue;
+                emit(this, notification.name, notification.detail);
+            }
+        }
+        finally {
+            this.acceptanceNotifications--;
+        }
+    }
+    restoringBoxFocus = false;
     selectionToolbarKey = "";
     sectionSequence = 0;
     versionValue = 0;
@@ -99,6 +148,14 @@ export class ProcessModeler extends BaseElement {
     spacePressed = false;
     dropLine;
     paletteDragKind = null;
+    palettePointer;
+    suppressPaletteClick = false;
+    escapePalettePointer = (event) => {
+        if (event.key !== 'Escape' || !this.palettePointer)
+            return;
+        this.cancelPalettePointer();
+        event.preventDefault();
+    };
     narrowValue = false;
     suppressClick = false;
     resizeObserver;
@@ -157,6 +214,9 @@ export class ProcessModeler extends BaseElement {
         };
     }
     load(document, options = {}) {
+        this.pendingLocalRename = undefined;
+        this.layoutEditSession++;
+        this.cancelPalettePointer();
         const projection = this.model.project(document);
         validateProjection(projection);
         this.documentValue = document;
@@ -166,11 +226,12 @@ export class ProcessModeler extends BaseElement {
         this.lastReadableProjection = "";
         this.readableValue = null;
         this.layoutValue = restoreProcessPositions(projection, options.positions ?? []);
+        this.clearMixedSelection();
         this.history.clear();
         this.selectedId = null;
         this.selectedLineId = null;
         this.selectedIds.clear();
-        this.clipboardIds = [];
+        this.clearClipboard();
         this.refresh();
         if (options.selectedPath)
             this.selectedPath = options.selectedPath;
@@ -181,15 +242,54 @@ export class ProcessModeler extends BaseElement {
             validateProjection(this.projection);
         }
         const next = new Set(ids.filter(id => this.projection.boxes.some(box => box.id === id)));
-        if (next.size === this.selectedIds.size && [...next].every(id => this.selectedIds.has(id)))
+        if (!this.graphSelection && !this.selectedLineIds.size && !this.selectedNoteIds.size && next.size === this.selectedIds.size && [...next].every(id => this.selectedIds.has(id)))
             return;
+        this.clearMixedSelection();
         this.selectedIds = next;
         this.selectedId = this.selectedIds.values().next().value ?? null;
         this.selectedLineId = null;
         this.renderSelection();
         if (this.isRendered)
             this.updateToolbar();
-        emit(this, "selection-changed", { box: this.selected, boxes: this.selectedBoxes, path: this.selectedPath });
+        this.notify("selection-changed", { box: this.selected, boxes: this.selectedBoxes, path: this.selectedPath, ...(this.graphSelection ? { selection: this.selection } : {}) });
+    }
+    /** Detached mixed selection. Invalid and duplicate IDs are ignored by selectItems. */
+    get selection() {
+        return [...[...this.selectedIds].map(id => ({ type: 'box', id })),
+            ...[...this.selectedLineIds].map(id => ({ type: 'line', id })),
+            ...[...this.selectedNoteIds].map(id => ({ type: 'note', id }))];
+    }
+    selectItems(items) {
+        if (!this.isRendered && this.documentValue !== undefined) {
+            this.projection = this.model.project(this.documentValue);
+            validateProjection(this.projection);
+        }
+        const boxes = new Set(), lines = new Set(), notes = new Set();
+        for (const item of items) {
+            if (item.type === 'box' && this.projection.boxes.some(box => box.id === item.id))
+                boxes.add(item.id);
+            if (item.type === 'line' && this.projection.lines.some(line => line.id === item.id))
+                lines.add(item.id);
+            if (item.type === 'note' && this.layoutValue.notes?.some(note => note.id === item.id))
+                notes.add(item.id);
+        }
+        const before = JSON.stringify(this.selection);
+        this.selectedIds = boxes;
+        this.selectedLineIds = lines;
+        this.selectedNoteIds = notes;
+        this.selectedId = boxes.values().next().value ?? null;
+        this.selectedLineId = !boxes.size && !notes.size && lines.size === 1 ? lines.values().next().value : null;
+        this.graphSelection = true;
+        this.renderSelection();
+        if (this.isRendered)
+            this.updateToolbar();
+        if (before !== JSON.stringify(this.selection))
+            this.notify('selection-changed', { box: this.selected, boxes: this.selectedBoxes, path: this.selectedPath, selection: this.selection });
+    }
+    clearMixedSelection() {
+        this.selectedLineIds.clear();
+        this.selectedNoteIds.clear();
+        this.graphSelection = false;
     }
     get headingLevel() { const level = Number(this.getAttribute("heading-level") ?? 2); return Number.isInteger(level) && level >= 1 && level <= 6 ? level : 2; }
     set headingLevel(value) { this.setAttribute("heading-level", String(value)); }
@@ -213,8 +313,13 @@ export class ProcessModeler extends BaseElement {
         this.refresh();
     }
     set document(value) {
+        this.localEchoRevision++;
+        const rename = this.pendingLocalRename;
         this.documentValue = value;
         this.refresh();
+        // One explicit echo settles this intent, including a rejected unchanged echo.
+        if (rename === this.pendingLocalRename && rename && this.localEchoRevision > rename.echoRevision)
+            this.pendingLocalRename = undefined;
     }
     get model() {
         return this.modelValue;
@@ -259,6 +364,8 @@ export class ProcessModeler extends BaseElement {
     }
     set locked(value) {
         this.toggleAttribute("locked", value);
+        if (value)
+            this.cancelPalettePointer();
     }
     get snapToGrid() {
         return this.hasAttribute("snap-to-grid");
@@ -280,7 +387,10 @@ export class ProcessModeler extends BaseElement {
         this.refresh();
     }
     disconnectedCallback() {
+        this.layoutEditSession++;
         this.resizeObserver?.disconnect();
+        this.clearClipboard();
+        this.cancelPalettePointer();
         this.closeDrawer();
         const chooser = this.shadowRoot?.querySelector("[part=insert-chooser]");
         if (chooser)
@@ -312,8 +422,9 @@ export class ProcessModeler extends BaseElement {
         }
         if (id !== null && !this.projection.boxes.some((box) => box.id === id))
             return;
-        if (id === this.selectedId && this.selectedIds.size === (id ? 1 : 0) && !this.selectedLineId)
+        if (id === this.selectedId && this.selectedIds.size === (id ? 1 : 0) && !this.selectedLineId && !this.graphSelection)
             return;
+        this.clearMixedSelection();
         this.selectedId = id;
         this.selectedIds = new Set(id ? [id] : []);
         this.selectedLineId = null;
@@ -321,18 +432,20 @@ export class ProcessModeler extends BaseElement {
         if (this.isRendered)
             this.updateToolbar();
         if (notify)
-            emit(this, "selection-changed", { box: this.selected, boxes: this.selectedBoxes, path: this.selectedPath });
+            this.notify("selection-changed", { box: this.selected, boxes: this.selectedBoxes, path: this.selectedPath, ...(this.graphSelection ? { selection: this.selection } : {}) });
     }
     selectLine(id) {
         if (id !== null && !this.projection.lines.some(line => line.id === id))
             return;
-        if (this.selectedLineId === id && !this.selectedIds.size)
+        if (!this.graphSelection && this.selectedLineId === id && !this.selectedIds.size)
             return;
+        this.clearMixedSelection();
+        this.selectedLineIds = new Set(id ? [id] : []);
         this.selectedLineId = id;
         this.selectedId = null;
         this.selectedIds.clear();
         this.refresh();
-        emit(this, 'selection-changed', { box: null, boxes: [], line: this.selectedLine, path: null });
+        this.notify('selection-changed', { box: null, boxes: [], line: this.selectedLine, path: null });
     }
     setValidation(checks) {
         this.checks = checks;
@@ -341,21 +454,100 @@ export class ProcessModeler extends BaseElement {
     setValidationAtPath(message, path) {
         this.setValidation(message ? [{ message, path }] : []);
     }
+    connectionProblem(edit) {
+        if (!this.model.connectionProblem || this.documentValue === undefined || !['connect', 'reattach'].includes(edit.type))
+            return null;
+        if (!this.isRendered) {
+            this.projection = this.model.project(this.documentValue);
+            validateProjection(this.projection);
+        }
+        const line = edit.type === 'reattach' ? this.projection.lines.find(line => line.id === edit.lineId) : undefined;
+        const from = edit.from ?? line?.from;
+        const to = edit.to ?? line?.to;
+        if (!from || !to)
+            return null;
+        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')))
             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);
+            return;
+        }
+        if (edit.selection)
+            edit = { ...edit, selection: Object.freeze(edit.selection.map(item => Object.freeze({ type: item.type, id: item.id }))) };
+        if (this.disableConnections && edit.type === 'delete-selection' && edit.selection?.some(item => item.type === 'line')) {
+            this.setStatus('Deleting selected lines is disabled');
+            return;
+        }
+        const placement = edit.placement;
+        if (placement) {
+            const source = placement.source;
+            let normalized;
+            if (edit.type === 'add' || edit.type === 'insert') {
+                if (source === 'next')
+                    normalized = { source };
+                else if (source === 'direction') {
+                    const side = placement.side;
+                    if (['north', 'east', 'south', 'west'].includes(side))
+                        normalized = { source, side };
+                }
+                else if (source === 'point' || source === 'line') {
+                    const { x, y } = placement.center ?? {};
+                    if (Number.isFinite(x) && Number.isFinite(y))
+                        normalized = { source, center: { x, y } };
+                }
+            }
+            if (!normalized) {
+                this.setStatus('The insertion placement is invalid', true);
+                return;
+            }
+            edit = { ...edit, placement: normalized };
+        }
+        const problem = this.connectionProblem(edit);
+        if (problem) {
+            this.setStatus(problem, true);
+            return;
+        }
+        const request = { ...edit, accept: this.editAcceptance(edit) };
+        if (edit.type !== 'delete-selection') {
+            emit(this, 'process-edit-request', request);
+            return;
+        }
+        // A synchronous host echo can prune selected lines before accept records
+        // history. Keep those observers behind the complete atomic transaction.
+        this.acceptanceNotifications++;
+        try {
+            emit(this, 'process-edit-request', request);
+        }
+        finally {
+            this.acceptanceNotifications--;
+            this.flushAcceptanceNotifications();
+        }
+    }
+    editAcceptance(edit) {
         const before = this.layout;
+        const beforeSelection = [...this.selectedIds];
+        const beforeItems = this.selection;
         const previousIds = new Set(this.projection.boxes.map((box) => box.id));
+        const session = this.layoutEditSession;
         let accepted = false;
-        const request = {
-            ...edit,
-            accept: (command) => {
-                if (accepted)
-                    return;
-                accepted = true;
+        return (command) => {
+            if (accepted || session !== this.layoutEditSession)
+                return;
+            accepted = true;
+            // Projection/readability/selection observers may synchronously edit or
+            // replace the document. Publish only after the whole history entry exists.
+            this.acceptanceNotifications++;
+            try {
                 if (command.layout)
                     this.layoutValue = structuredClone(command.layout);
+                if (edit.type === 'reset-line' && edit.lineId)
+                    delete this.layoutValue.lines?.[edit.lineId];
                 this.refresh();
+                if (session !== this.layoutEditSession)
+                    return;
                 const inserted = edit.type === 'insert' && !edit.boxId && !command.layout
                     ? this.projection.boxes.find(box => !previousIds.has(box.id)) : undefined;
                 const reflowed = inserted ? this.reflowStraightInsert(edit, inserted.id, before) : false;
@@ -368,7 +560,11 @@ export class ProcessModeler extends BaseElement {
                     if (added)
                         this.layoutValue = this.translatedLayout(added.id, edit.position.x, edit.position.y);
                 }
+                if (session !== this.layoutEditSession)
+                    return;
                 const after = this.layout;
+                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) => {
                     this.layoutValue = structuredClone(layout);
                     this.refresh();
@@ -378,19 +574,34 @@ export class ProcessModeler extends BaseElement {
                     undo: () => {
                         command.undo();
                         restore(before);
+                        if (acceptedItems)
+                            this.selectItems(beforeItems);
+                        else if (acceptedSelection)
+                            this.selectMany(beforeSelection);
                     },
                     redo: () => {
                         command.redo();
                         restore(after);
+                        if (acceptedItems)
+                            this.selectItems(acceptedItems);
+                        else if (acceptedSelection)
+                            this.selectMany(acceptedSelection);
                     },
                 });
+                if (acceptedItems)
+                    this.selectItems(acceptedItems);
+                else if (acceptedSelection)
+                    this.selectMany(acceptedSelection);
                 this.refresh();
                 if (JSON.stringify(before) !== JSON.stringify(after))
                     this.emitPositions();
                 announce("Process updated", "polite", this.ownerDocument);
-            },
+            }
+            finally {
+                this.acceptanceNotifications--;
+                this.flushAcceptanceNotifications();
+            }
         };
-        emit(this, "process-edit-request", request);
     }
     undo() {
         if (this.locked)
@@ -404,6 +615,53 @@ export class ProcessModeler extends BaseElement {
         this.history.redo();
         this.refresh();
     }
+    requestLayoutEdit(type, sourceIds, title, onAccepted) {
+        const capability = this.model.layoutEdit;
+        if (!capability || this.documentValue === undefined)
+            return false;
+        if (this.locked)
+            return true;
+        if (!this.isRendered) {
+            this.projection = this.model.project(this.documentValue);
+            validateProjection(this.projection);
+        }
+        const session = this.layoutEditSession;
+        const accept = this.editAcceptance({ type });
+        let active = true, settled = false, acceptedLayout = false;
+        const valid = () => active && !settled && session === this.layoutEditSession && !this.locked;
+        const request = {
+            type, sourceIds: sourceIds ? Object.freeze([...sourceIds]) : null, ...(title !== undefined ? { title } : {}), layout: this.layout,
+            accept: command => {
+                if (!valid())
+                    return;
+                settled = true;
+                if (!command.layout) {
+                    this.setStatus('The host must supply the complete accepted layout', true);
+                    return;
+                }
+                accept(command);
+                acceptedLayout = session === this.layoutEditSession;
+            },
+            refuse: message => { if (!valid())
+                return; settled = true; this.setStatus(message ?? 'The host refused this layout edit', true); },
+        };
+        // Hosts may assign a fresh document before accepting the request. Its
+        // notifications must follow the same atomic history boundary.
+        this.acceptanceNotifications++;
+        try {
+            capability.call(this.model, this.documentValue, request, this.projection);
+        }
+        finally {
+            active = false;
+            this.acceptanceNotifications--;
+            this.flushAcceptanceNotifications();
+        }
+        if (acceptedLayout && session === this.layoutEditSession)
+            onAccepted?.();
+        if (!settled && session === this.layoutEditSession)
+            this.setStatus('This layout edit was not accepted by the host', true);
+        return true;
+    }
     commitLayout(next) {
         const before = this.layout;
         const after = structuredClone(next);
@@ -432,8 +690,8 @@ export class ProcessModeler extends BaseElement {
             this.commitLayout(next);
     }
     emitPositions() {
-        emit(this, "layout-changed", { layout: this.layout });
-        emit(this, "positions-changed", { positions: this.positions, version: this.versionValue });
+        this.notify("layout-changed", { layout: this.layout });
+        this.notify("positions-changed", { positions: this.positions, version: this.versionValue });
     }
     translatedLayout(id, x, y) {
         const snap = (n) => (this.snapToGrid ? Math.round(n / 16) * 16 : n);
@@ -499,6 +757,9 @@ export class ProcessModeler extends BaseElement {
     tidy() {
         if (this.locked)
             return;
+        if (this.requestLayoutEdit('tidy', null, undefined, () => { if (this.isRendered)
+            this.fitTo(this.narrowValue ? 0.55 : 0.7); }))
+            return;
         const before = this.layout.boxes;
         this.commitLayout(this.arrangedLayout({ ...this.layout, boxes: {} }));
         if (!globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
@@ -541,6 +802,13 @@ export class ProcessModeler extends BaseElement {
         });
     }
     resetLine(id) {
+        const line = this.projection.lines.find(line => line.id === id);
+        if (this.locked || !line)
+            return;
+        if (line.fromSide || line.toSide || line.points?.length) {
+            this.requestEdit({ type: 'reset-line', lineId: id });
+            return;
+        }
         if (!this.layoutValue.lines?.[id])
             return;
         const next = this.layout;
@@ -763,7 +1031,7 @@ export class ProcessModeler extends BaseElement {
         palette.prepend(skip, paletteHeading);
         const hint = document.createElement("p");
         hint.setAttribute("part", "palette-hint");
-        hint.textContent = "Drag onto the canvas, a connection, or a frame. Select a step first to add after it.";
+        hint.textContent = "Drag onto the canvas, onto a line to insert, or into a frame. Choosing one with a step selected adds it after that step. Or click a dot beside any step to add one that way.";
         palette.append(hint);
         for (const [part, label] of [["palette", "Building blocks"], ["inspector", "Process details"]]) {
             const pane = root.querySelector(`[part=${part}]`);
@@ -864,6 +1132,12 @@ export class ProcessModeler extends BaseElement {
         controls.setAttribute("role", "toolbar");
         controls.setAttribute("aria-label", "Canvas view controls");
         for (const command of ["zoom-out", "reset", "zoom-in", "fit", "snap", "lock"]) {
+            if (command === 'snap') {
+                const divider = document.createElement('span');
+                divider.setAttribute('part', 'controls-divider');
+                divider.setAttribute('aria-hidden', 'true');
+                controls.append(divider);
+            }
             const button = root.querySelector(`[data-command=${command}]`);
             if (button)
                 controls.append(button);
@@ -896,6 +1170,7 @@ export class ProcessModeler extends BaseElement {
                 this.narrowValue = narrow;
                 this.toggleAttribute("data-narrow", narrow);
                 this.toggleAttribute('data-phone', entries[0].contentRect.width < 560);
+                this.toggleAttribute('data-hide-tidy', entries[0].contentRect.width <= 560);
                 this.renderSelectionToolbar();
                 this.positionSelectionToolbar();
                 if (!narrow)
@@ -968,6 +1243,7 @@ export class ProcessModeler extends BaseElement {
         });
         const content = root.querySelector('[part=pane-content]');
         content.hidden = Boolean(selected);
+        content.dataset.pane = this.activePane;
         content.setAttribute("aria-labelledby", `process-tab-${this.activePane.toLowerCase()}`);
         const checks = root.querySelector('[part=checks]');
         checks.hidden = this.activePane !== "Checks";
@@ -1026,29 +1302,50 @@ export class ProcessModeler extends BaseElement {
             content.append(checks);
         }
         else if (this.activePane === "Variables") {
-            if (!this.variables.length)
-                content.textContent = 'No variables supplied by the host.';
+            const intro = document.createElement('p');
+            intro.setAttribute('part', 'variables-intro');
+            intro.textContent = 'Values the process keeps while it runs. Decisions and step inputs read them by name, written in CEL.';
+            content.append(intro);
+            const scopes = document.createElement('dl');
+            scopes.setAttribute('part', 'variable-scopes');
+            for (const [name, meaning] of [['Iteration', 'Starts fresh each time a test user runs the process.'], ['Process', 'Set once per test user and kept across their iterations.'], ['Step', 'Only inside one step or frame. Add those in the step’s details.']]) {
+                const term = document.createElement('dt');
+                term.textContent = name;
+                const definition = document.createElement('dd');
+                definition.textContent = meaning;
+                scopes.append(term, definition);
+            }
+            content.append(scopes);
+            const collection = document.createElement('div');
+            collection.setAttribute('part', 'variable-list');
+            content.append(collection);
+            if (!this.variables.length) {
+                const empty = document.createElement('p');
+                empty.textContent = 'None yet.';
+                collection.append(empty);
+            }
             for (const [index, variable] of this.variables.entries()) {
                 const row = document.createElement('div');
                 row.setAttribute('part', 'variable-row');
                 const identify = (control, key) => { control.dataset.variable = variable.name; control.dataset.variableKey = key; control.dataset.variableIndex = String(index); };
                 if (this.variablesEditable) {
-                    const label = document.createElement('label');
-                    label.textContent = 'Name';
+                    const label = variableLabel('Name');
                     const name = document.createElement('input');
                     name.type = 'text';
+                    name.placeholder = 'name';
+                    name.spellcheck = false;
+                    name.autocomplete = 'off';
                     name.value = variable.name;
                     name.disabled = this.locked;
                     identify(name, 'name');
                     name.onchange = () => this.requestVariableEdit({ type: 'rename', name: variable.name, value: name.value });
                     label.append(name);
                     row.append(label);
-                    const scopeLabel = document.createElement('label');
-                    scopeLabel.textContent = 'Scope';
+                    const scopeLabel = variableLabel('Kept for');
                     const scope = document.createElement('select');
                     identify(scope, 'scope');
                     scope.disabled = this.locked;
-                    for (const [value, text] of [['iteration', 'Each iteration'], ['process', 'The whole process']]) {
+                    for (const [value, text] of [['iteration', 'Iteration'], ['process', 'Process']]) {
                         const option = document.createElement('option');
                         option.value = value;
                         option.textContent = text;
@@ -1070,16 +1367,32 @@ export class ProcessModeler extends BaseElement {
                         row.append(scope);
                     }
                 }
-                if (variable.description) {
+                if (this.variablesEditable) {
+                    const label = variableLabel('What it’s for');
+                    const about = document.createElement('input');
+                    about.type = 'text';
+                    about.placeholder = 'What it’s for';
+                    about.value = variable.description ?? '';
+                    about.disabled = this.locked;
+                    identify(about, 'description');
+                    about.oninput = () => this.requestVariableEdit({ type: 'description', name: variable.name, value: about.value });
+                    label.append(about);
+                    row.append(label);
+                }
+                else if (variable.description) {
                     const description = document.createElement('p');
                     description.textContent = variable.description;
                     row.append(description);
                 }
                 if (variable.startingValue !== undefined) {
-                    const label = document.createElement('label');
-                    label.textContent = 'Starting value';
+                    const label = this.variablesEditable ? variableLabel('Starts as') : document.createElement('label');
+                    if (!this.variablesEditable)
+                        label.textContent = 'Starting value';
                     const input = document.createElement('input');
                     input.type = 'text';
+                    input.placeholder = 'starts as, like 0';
+                    input.spellcheck = false;
+                    input.autocomplete = 'off';
                     identify(input, 'value');
                     input.value = variable.startingValue;
                     input.disabled = this.locked;
@@ -1102,13 +1415,26 @@ export class ProcessModeler extends BaseElement {
                     remove.type = 'button';
                     remove.setAttribute('part', 'variable-remove');
                     remove.setAttribute('aria-label', `Remove ${variable.name || 'this variable'}`);
-                    remove.textContent = '×';
+                    remove.append(variableGlyph());
                     remove.disabled = this.locked;
                     identify(remove, 'remove');
                     remove.onclick = () => this.requestVariableEdit({ type: 'remove', name: variable.name });
                     row.append(remove);
                 }
-                content.append(row);
+                if (this.variablesEditable) {
+                    // The grid's visual ordering must also be the keyboard/read order.
+                    for (const key of ['name', 'value', 'remove', 'description', 'scope']) {
+                        const control = row.querySelector(`[data-variable-key=${key}]`);
+                        if (control)
+                            row.append(control.closest('label') ?? control);
+                    }
+                    const problem = row.querySelector('[part=field-problem]');
+                    if (problem)
+                        row.append(problem);
+                }
+                row.setAttribute('role', 'group');
+                row.setAttribute('aria-label', `Variable ${index + 1}`);
+                collection.append(row);
             }
             if (this.variablesEditable) {
                 const add = document.createElement('button');
@@ -1116,11 +1442,45 @@ export class ProcessModeler extends BaseElement {
                 add.setAttribute('part', 'variable-add');
                 add.dataset.variable = '@add';
                 add.dataset.variableKey = 'add';
-                add.textContent = 'Add a variable';
+                add.append(variableGlyph(true), document.createTextNode('Add a variable'));
                 add.disabled = this.locked;
                 add.onclick = () => this.requestVariableEdit({ type: 'add' });
-                content.append(add);
+                const actions = document.createElement('div');
+                actions.setAttribute('part', 'variable-actions');
+                actions.append(add);
+                content.append(actions);
             }
+            const localRows = this.projection.boxes.flatMap(box => (box.localVariables ?? []).filter(variable => variable.name).map(variable => ({ name: variable.name, connective: 'only in', title: box.title })));
+            const savedRows = this.projection.boxes.filter(box => box.savedResult).map(box => ({ name: box.savedResult, connective: 'from', title: box.title }));
+            const summary = (part, heading, rows, empty) => {
+                if (!rows.length && !empty)
+                    return;
+                const section = document.createElement('section');
+                section.setAttribute('part', part);
+                const title = document.createElement('h3');
+                title.textContent = heading;
+                section.append(title);
+                if (rows.length) {
+                    const list = document.createElement('ul');
+                    for (const item of rows) {
+                        const row = document.createElement('li'), text = document.createElement('span'), name = document.createElement('code'), connective = document.createElement('em');
+                        name.textContent = item.name;
+                        connective.textContent = item.connective;
+                        text.append(name, document.createTextNode(' '), connective, document.createTextNode(` ${item.title}`));
+                        row.append(text);
+                        list.append(row);
+                    }
+                    section.append(list);
+                }
+                else {
+                    const help = document.createElement('p');
+                    help.textContent = empty;
+                    section.append(help);
+                }
+                content.append(section);
+            };
+            summary('local-variable-summary', 'Only in one step', localRows);
+            summary('saved-result-summary', 'Saved by steps', savedRows, 'No step saves its result yet. Set “Save the result as” on a step.');
         }
         else if (this.activePane === "Connections") {
             if (!this.connections.length)
@@ -1162,6 +1522,14 @@ export class ProcessModeler extends BaseElement {
         if (this.locked)
             return;
         const boxes = this.selectedBoxes;
+        if (command === "delete-many" && this.graphSelection) {
+            if (this.disableConnections && this.selectedLineIds.size) {
+                this.setStatus('Deleting selected lines is disabled');
+                return;
+            }
+            this.requestEdit({ type: 'delete-selection', selection: this.selection });
+            return;
+        }
         if (command === "delete-many") {
             for (const box of boxes)
                 this.requestEdit({ type: "delete", boxId: box.id });
@@ -1179,6 +1547,8 @@ export class ProcessModeler extends BaseElement {
     tidySelection() {
         if (this.locked || this.selectedBoxes.length < 2)
             return;
+        if (this.requestLayoutEdit('tidy', [...this.selectedIds]))
+            return;
         const next = this.layout;
         const roots = this.selectedBoxes.filter(box => {
             let parent = box.parentId;
@@ -1218,11 +1588,13 @@ export class ProcessModeler extends BaseElement {
             const arrangedY = Math.min(...group.map(box => arranged.boxes[box.id]?.y ?? Infinity));
             if (![arrangedX, arrangedY].every(Number.isFinite))
                 continue;
+            const dx = Math.round((startX - arrangedX) / 16) * 16;
+            const dy = Math.round((startY - arrangedY) / 16) * 16;
             for (const box of subset.boxes) {
                 const position = arranged.boxes[box.id];
                 if (!position || !next.boxes[box.id])
                     continue;
-                next.boxes[box.id] = { ...next.boxes[box.id], x: startX + position.x - arrangedX, y: startY + position.y - arrangedY };
+                next.boxes[box.id] = { ...next.boxes[box.id], x: position.x + dx, y: position.y + dy };
             }
         }
         this.commitLayout(next);
@@ -1315,7 +1687,11 @@ export class ProcessModeler extends BaseElement {
             this.commitLayout(next);
     }
     makeSection(title = 'New section') {
-        if (this.locked || this.selectedBoxes.length < 2)
+        if (this.locked || !this.selectedBoxes.length)
+            return;
+        if (this.requestLayoutEdit('make-section', [...this.selectedIds], title))
+            return;
+        if (this.selectedBoxes.length < 2)
             return;
         const positions = this.selectedBoxes.map(box => this.layoutValue.boxes[box.id]);
         const x = Math.min(...positions.map(position => position.x)) - 24;
@@ -1326,6 +1702,16 @@ export class ProcessModeler extends BaseElement {
         this.setSection({ id, title, x, y, width: right - x, height: bottom - y });
     }
     setupListeners() {
+        this.addEventListener('pointermove', event => this.movePalettePointer(event));
+        this.addEventListener('pointerup', event => this.finishPalettePointer(event));
+        this.addEventListener('pointercancel', event => { if (event.pointerId === this.palettePointer?.id)
+            this.cancelPalettePointer(); });
+        this.addEventListener('lostpointercapture', event => { if (event.pointerId === this.palettePointer?.id)
+            this.cancelPalettePointer(); });
+        this.shadowRoot.addEventListener('keydown', event => { if (event.key === 'Escape' && this.palettePointer) {
+            this.cancelPalettePointer();
+            event.preventDefault();
+        } }, true);
         this.shadowRoot.addEventListener("click", (event) => {
             const command = event.target.closest("button")?.dataset.command;
             if (command === "zoom-in")
@@ -1455,6 +1841,93 @@ export class ProcessModeler extends BaseElement {
             this.paintViewport();
         });
     }
+    clearClipboard() {
+        const previous = this.clipboard;
+        this.clipboard = null;
+        this.clipboardSession++;
+        previous?.dispose?.();
+    }
+    copySelection() {
+        this.clearClipboard();
+        const session = this.clipboardSession;
+        let active = true;
+        let claimed = false;
+        const request = {
+            sourceIds: Object.freeze([...this.selectedIds]),
+            selection: Object.freeze(this.selection.map(item => Object.freeze(item))),
+            capture: clipboard => {
+                if (!active || claimed || session !== this.clipboardSession || !this.isConnected)
+                    return;
+                claimed = true;
+                if (!Number.isInteger(clipboard?.itemCount) || clipboard.itemCount < 1 || typeof clipboard.paste !== 'function' || (clipboard.dispose !== undefined && typeof clipboard.dispose !== 'function')) {
+                    this.setStatus('The host did not supply a valid clipboard');
+                    return;
+                }
+                this.clipboard = Object.freeze({ itemCount: clipboard.itemCount, paste: clipboard.paste.bind(clipboard), ...(clipboard.dispose ? { dispose: clipboard.dispose.bind(clipboard) } : {}) });
+                this.setStatus(`${clipboard.itemCount} steps copied`);
+            },
+            refuse: message => { if (!active || claimed || session !== this.clipboardSession || !this.isConnected)
+                return; claimed = true; this.setStatus(message ?? 'Copy is not supported by this host'); },
+        };
+        try {
+            emit(this, this.graphSelection && (this.selectedLineIds.size || this.selectedNoteIds.size) ? 'process-selection-copy-request' : 'process-copy-request', request);
+        }
+        finally {
+            active = false;
+        }
+        if (!claimed && session === this.clipboardSession && this.isConnected)
+            this.setStatus('Copy is not supported by this host');
+        return claimed;
+    }
+    pasteClipboard() {
+        const clipboard = this.clipboard;
+        if (!clipboard || this.locked)
+            return;
+        const session = this.clipboardSession;
+        const accept = this.editAcceptance({ type: 'duplicate' });
+        let active = true;
+        let settled = false;
+        const request = {
+            offset: Object.freeze({ x: 32, y: 32 }),
+            accept: command => {
+                if (!active || settled || session !== this.clipboardSession || this.locked)
+                    return;
+                settled = true;
+                accept(command);
+            },
+            refuse: message => { if (!active || settled || session !== this.clipboardSession || !this.isConnected)
+                return; settled = true; this.setStatus(message ?? 'Paste was refused by this host'); },
+        };
+        try {
+            clipboard.paste(request);
+        }
+        finally {
+            active = false;
+        }
+        if (!settled && session === this.clipboardSession)
+            this.setStatus('Paste was not accepted by this host');
+    }
+    duplicateBoxes(ids, distance) {
+        const selected = new Set(ids);
+        if (!selected.size || [...selected].some(id => !this.projection.boxes.some(box => box.id === id) || !this.layoutValue.boxes[id]))
+            return;
+        const sources = [...selected].filter(id => {
+            let parent = this.projection.boxes.find(box => box.id === id)?.parentId;
+            while (parent) {
+                if (selected.has(parent))
+                    return false;
+                parent = this.projection.boxes.find(box => box.id === parent)?.parentId;
+            }
+            return true;
+        });
+        if (sources.length === 1) {
+            const position = this.layoutValue.boxes[sources[0]];
+            this.requestEdit({ type: 'duplicate', sourceId: sources[0], position: { x: position.x + distance, y: position.y + distance } });
+        }
+        else {
+            this.requestEdit({ type: 'duplicate', sourceIds: sources, offset: { x: distance, y: distance } });
+        }
+    }
     onKey(event) {
         if (event.defaultPrevented)
             return;
@@ -1478,25 +1951,27 @@ export class ProcessModeler extends BaseElement {
         }
         if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
             event.preventDefault();
-            this.selectMany(this.projection.boxes.map(box => box.id));
-            this.setStatus(`${this.projection.boxes.length} steps selected`);
+            this.selectItems([
+                ...this.projection.boxes.filter(box => box.kind !== 'section').map(box => ({ type: 'box', id: box.id })),
+                ...this.projection.lines.map(line => ({ type: 'line', id: line.id })),
+                ...(this.layoutValue.notes ?? []).map(note => ({ type: 'note', id: note.id })),
+            ]);
+            this.setStatus(`${this.selection.length} items selected`);
             return;
         }
-        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && this.selectedIds.size) {
-            event.preventDefault();
-            this.clipboardIds = [...this.selectedIds];
-            this.setStatus(`${this.clipboardIds.length} steps copied`);
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && (this.selectedIds.size || this.selectedNoteIds.size)) {
+            if (this.copySelection())
+                event.preventDefault();
             return;
         }
-        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v' && this.clipboardIds.length && !this.locked) {
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v' && this.clipboard && !this.locked) {
             event.preventDefault();
-            this.clipboardIds.forEach((id, index) => { const position = this.layoutValue.boxes[id]; if (position)
-                this.requestEdit({ type: 'duplicate', sourceId: id, position: { x: position.x + 32 * (index + 1), y: position.y + 32 * (index + 1) } }); });
+            this.pasteClipboard();
             return;
         }
         if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'd' && this.selectedIds.size && !this.locked) {
             event.preventDefault();
-            [...this.selectedIds].forEach(id => { const position = this.layoutValue.boxes[id]; this.requestEdit({ type: 'duplicate', sourceId: id, position: { x: position.x + 32, y: position.y + 32 } }); });
+            this.duplicateBoxes([...this.selectedIds], 48);
             return;
         }
         if (event.key === "Escape") {
@@ -1506,6 +1981,7 @@ export class ProcessModeler extends BaseElement {
             if (this.selectedLineId)
                 this.selectLine(null);
             this.portDrag = undefined;
+            this.endDrag = undefined;
             this.marquee = undefined;
             this.segmentDrag = undefined;
             this.drag = undefined;
@@ -1521,6 +1997,11 @@ export class ProcessModeler extends BaseElement {
             this.setStatus("Whole process fitted to the canvas");
             return;
         }
+        if ((event.key === 'Delete' || event.key === 'Backspace') && this.graphSelection && this.selection.length && !this.locked) {
+            event.preventDefault();
+            this.selectionCommand('delete-many');
+            return;
+        }
         const box = this.selected;
         if (this.selectedLine && (event.key === 'Delete' || event.key === 'Backspace') && !this.locked && !this.disableConnections) {
             event.preventDefault();
@@ -1532,6 +2013,44 @@ export class ProcessModeler extends BaseElement {
             this.openKeyboardChooser(box);
             return;
         }
+        const direction = {
+            ArrowLeft: [-1, 0],
+            ArrowRight: [1, 0],
+            ArrowUp: [0, -1],
+            ArrowDown: [0, 1],
+        }[event.key];
+        if (direction && this.graphSelection && !this.locked && !event.altKey && !event.ctrlKey && !event.metaKey && (this.selectedIds.size || this.selectedNoteIds.size)) {
+            event.preventDefault();
+            const distance = event.shiftKey ? 64 : 16, dx = direction[0] * distance, dy = direction[1] * distance;
+            const next = this.layout, moved = new Set(this.selectedIds);
+            for (let changed = true; changed;) {
+                changed = false;
+                for (const box of this.projection.boxes)
+                    if (box.parentId && moved.has(box.parentId) && !moved.has(box.id)) {
+                        moved.add(box.id);
+                        changed = true;
+                    }
+            }
+            for (const id of moved) {
+                const p = next.boxes[id];
+                if (p)
+                    next.boxes[id] = { ...p, x: p.x + dx, y: p.y + dy };
+            }
+            next.notes = next.notes?.map(note => this.selectedNoteIds.has(note.id) ? { ...note, x: note.x + dx, y: note.y + dy } : note);
+            const primary = this.selectedId;
+            const allowed = primary
+                ? emit(this, 'move-request', { boxId: primary, position: next.boxes[primary], boxIds: [...moved], positions: next.boxes, noteIds: [...this.selectedNoteIds], notes: next.notes ?? [] })
+                : emit(this, 'note-move-request', { noteIds: [...this.selectedNoteIds], notes: next.notes ?? [] });
+            if (allowed)
+                this.commitLayout(next);
+            return;
+        }
+        const canInsertDirection = event.ctrlKey && event.altKey && box && !this.locked && this.catalog.length && !this.disableConnections;
+        if (direction && !canInsertDirection && (event.altKey || !box || this.locked)) {
+            event.preventDefault();
+            this.navigateSelection(direction);
+            return;
+        }
         if (!box || this.locked)
             return;
         if (event.key === "Enter") {
@@ -1560,12 +2079,6 @@ export class ProcessModeler extends BaseElement {
             event.preventDefault();
             this.selectionCommand("delete-many");
         }
-        const direction = {
-            ArrowLeft: [-1, 0],
-            ArrowRight: [1, 0],
-            ArrowUp: [0, -1],
-            ArrowDown: [0, 1],
-        }[event.key];
         if (direction) {
             event.preventDefault();
             if (event.ctrlKey && event.altKey && this.catalog.length && !this.disableConnections) {
@@ -1578,31 +2091,52 @@ export class ProcessModeler extends BaseElement {
                 this.openAnchoredChooser(this.nextEdit(box, side, { x: pos.x + direction[0] * 320, y: pos.y + direction[1] * 170 }), this.nextChooserTitle(box, side), anchor, returnFocus);
                 return;
             }
-            if (event.altKey) {
-                const origin = this.layoutValue.boxes[box.id];
-                const center = { x: origin.x + (origin.width ?? 224) / 2, y: origin.y + (origin.height ?? 64) / 2 };
-                const candidates = this.projection.boxes.filter(candidate => candidate.id !== box.id).map(candidate => {
-                    const position = this.layoutValue.boxes[candidate.id];
-                    const dx = position.x + (position.width ?? 224) / 2 - center.x;
-                    const dy = position.y + (position.height ?? 64) / 2 - center.y;
-                    const forward = dx * direction[0] + dy * direction[1];
-                    const sideways = Math.abs(dx * direction[1] - dy * direction[0]);
-                    return { candidate, forward, score: forward + sideways * 2 };
-                }).filter(item => item.forward > 0).sort((a, b) => a.score - b.score || a.candidate.id.localeCompare(b.candidate.id));
-                const next = candidates[0]?.candidate;
-                if (next) {
-                    this.select(next.id);
-                    this.focusBox(next.id);
-                    this.setStatus(`${next.title} selected`);
-                }
-                return;
-            }
             const pos = this.layoutValue.boxes[box.id];
             const distance = event.shiftKey ? 64 : 16;
             this.move(box.id, pos.x + direction[0] * distance, pos.y + direction[1] * distance);
             this.focusBox(box.id);
         }
     }
+    navigateSelection(direction) {
+        const canvas = this.shadowRoot.querySelector('[part=canvas]');
+        const box = this.selected;
+        const origin = box ? this.layoutValue.boxes[box.id] : undefined;
+        const originSize = box ? this.selectionDimensions(box) : undefined;
+        const center = origin && originSize
+            ? { x: origin.x + originSize.width / 2, y: origin.y + originSize.height / 2 }
+            : { x: (canvas.clientWidth / 2 - this.viewport.x) / this.viewport.zoom, y: (canvas.clientHeight / 2 - this.viewport.y) / this.viewport.zoom };
+        const candidates = this.projection.boxes.filter(candidate => candidate.id !== box?.id && candidate.kind !== 'section').map(candidate => {
+            const position = this.layoutValue.boxes[candidate.id];
+            const size = this.selectionDimensions(candidate);
+            const dx = position.x + size.width / 2 - center.x;
+            const dy = position.y + size.height / 2 - center.y;
+            const forward = dx * direction[0] + dy * direction[1];
+            const sideways = Math.abs(dx * direction[1] - dy * direction[0]);
+            return { candidate, forward, score: forward + sideways * 2.5 };
+        }).filter(item => item.forward > 4).sort((a, b) => a.score - b.score);
+        const next = candidates[0]?.candidate;
+        if (!next) {
+            this.setStatus('Nothing further that way');
+            return;
+        }
+        this.select(next.id);
+        this.revealBox(next);
+        this.focusBox(next.id);
+        this.setStatus(`${next.title} selected`);
+    }
+    revealBox(box) {
+        const canvas = this.shadowRoot.querySelector('[part=canvas]');
+        if (!canvas.clientWidth || !canvas.clientHeight)
+            return;
+        const position = this.layoutValue.boxes[box.id];
+        const size = this.selectionDimensions(box);
+        const left = position.x * this.viewport.zoom + this.viewport.x;
+        const top = position.y * this.viewport.zoom + this.viewport.y;
+        if (left > 48 && top > 48 && left + size.width * this.viewport.zoom < canvas.clientWidth - 48 && top + size.height * this.viewport.zoom < canvas.clientHeight - 48)
+            return;
+        this.setView({ x: canvas.clientWidth / 2 - (position.x + size.width / 2) * this.viewport.zoom,
+            y: canvas.clientHeight / 2 - (position.y + size.height / 2) * this.viewport.zoom, zoom: this.viewport.zoom });
+    }
     pointerDown(event) {
         if (event.button !== 0)
             return;
@@ -1706,10 +2240,12 @@ export class ProcessModeler extends BaseElement {
             const start = this.portDrag.start;
             ghost.setAttribute("points", `${start.x},${start.y} ${point.x},${start.y} ${point.x},${point.y}`);
             const target = this.boxAt(point, this.portDrag.id);
-            const pinned = target ? this.sideAt(target, point) : undefined;
-            this.shadowRoot.querySelectorAll('[data-box-id]').forEach(box => { box.dataset.connectTarget = String(box.dataset.boxId === target?.id); });
+            const problem = target ? this.connectionProblem({ type: 'connect', from: this.portDrag.id, to: target.id }) : null;
+            const pinned = target && !problem ? this.sideAt(target, point) : undefined;
+            ghost.dataset.invalid = String(Boolean(problem));
+            this.shadowRoot.querySelectorAll('[data-box-id]').forEach(box => { box.dataset.connectTarget = String(box.dataset.boxId === target?.id); box.dataset.connectInvalid = String(box.dataset.boxId === target?.id && Boolean(problem)); });
             this.shadowRoot.querySelectorAll('[part=port]').forEach(port => { port.dataset.hot = String(port.dataset.owner === target?.id && port.dataset.side === pinned); });
-            this.showConnectTooltip(point, target ? pinned ? `Pin to the ${pinned} of ${target.title}` : `Connect to ${target.title}` : 'Drop here to add a connected step');
+            this.showConnectTooltip(point, problem ?? (target ? pinned ? `Pin to the ${pinned} of ${target.title}` : `Connect to ${target.title}` : 'Drop here to add a connected step'), Boolean(problem));
             return;
         }
         if (this.endDrag) {
@@ -1725,11 +2261,13 @@ export class ProcessModeler extends BaseElement {
             if (fixed)
                 ghost.setAttribute('points', `${fixed.x},${fixed.y} ${point.x},${fixed.y} ${point.x},${point.y}`);
             const target = this.boxAt(point);
-            const pinned = target ? this.sideAt(target, point) : undefined;
-            this.shadowRoot.querySelectorAll('[data-box-id]').forEach(box => { box.dataset.connectTarget = String(box.dataset.boxId === target?.id); });
+            const problem = target ? this.connectionProblem({ type: 'reattach', lineId: this.endDrag.lineId, [this.endDrag.end]: target.id }) : null;
+            const pinned = target && !problem ? this.sideAt(target, point) : undefined;
+            ghost.dataset.invalid = String(Boolean(problem) || !target);
+            this.shadowRoot.querySelectorAll('[data-box-id]').forEach(box => { box.dataset.connectTarget = String(box.dataset.boxId === target?.id); box.dataset.connectInvalid = String(box.dataset.boxId === target?.id && Boolean(problem)); });
             this.shadowRoot.querySelectorAll('[part=port]').forEach(port => { port.dataset.hot = String(port.dataset.owner === target?.id && port.dataset.side === pinned); });
-            this.showConnectTooltip(point, target ? pinned ? `Pin to the ${pinned} of ${target.title}` : `Attach to ${target.title}` : 'Drop on a step to reattach', !target);
-            this.setStatus(target ? `Release to attach the connection to ${target.title}` : 'Move over a step to attach this connection');
+            this.showConnectTooltip(point, problem ?? (target ? pinned ? `Pin to the ${pinned} of ${target.title}` : `Attach to ${target.title}` : 'Drop on a step to reattach'), Boolean(problem) || !target);
+            this.setStatus(problem ?? (target ? `Release to attach the connection to ${target.title}` : 'Move over a step to attach this connection'));
             return;
         }
         if (this.segmentDrag) {
@@ -1828,7 +2366,7 @@ export class ProcessModeler extends BaseElement {
             this.portDrag = undefined;
             this.shadowRoot.querySelector('[part=connection-preview]')?.remove();
             this.shadowRoot.querySelector('[part=connect-tooltip]')?.remove();
-            this.shadowRoot.querySelectorAll('[data-connect-target]').forEach(box => { delete box.dataset.connectTarget; });
+            this.shadowRoot.querySelectorAll('[data-connect-target]').forEach(box => { delete box.dataset.connectTarget; delete box.dataset.connectInvalid; });
             this.shadowRoot.querySelectorAll('[part=port]').forEach(port => { delete port.dataset.hot; });
             if (commit) {
                 if (Math.hypot(point.x - port.start.x, point.y - port.start.y) < 8) {
@@ -1849,7 +2387,7 @@ export class ProcessModeler extends BaseElement {
                         if ((frame?.id ?? null) !== (source.parentId ?? null))
                             this.setStatus('Drop inside the same frame to add a connected step');
                         else
-                            this.openChooserAtPoint({ type: 'add', from: port.id, fromSide: port.side, parentId: source.parentId, position: point }, `Add after ${source.title}`, point);
+                            this.openChooserAtPoint({ type: 'add', from: port.id, fromSide: port.side, parentId: source.parentId, position: point, placement: { source: 'point', center: { ...point } } }, `Add after ${source.title}`, point);
                     }
                 }
             }
@@ -1860,7 +2398,7 @@ export class ProcessModeler extends BaseElement {
             this.endDrag = undefined;
             this.shadowRoot.querySelector('[part=connection-preview]')?.remove();
             this.shadowRoot.querySelector('[part=connect-tooltip]')?.remove();
-            this.shadowRoot.querySelectorAll('[data-connect-target]').forEach(box => { delete box.dataset.connectTarget; });
+            this.shadowRoot.querySelectorAll('[data-connect-target]').forEach(box => { delete box.dataset.connectTarget; delete box.dataset.connectInvalid; });
             this.shadowRoot.querySelectorAll('[part=port]').forEach(port => { delete port.dataset.hot; });
             if (commit) {
                 if (Math.hypot(point.x - drag.start.x, point.y - drag.start.y) < 8) {
@@ -1909,8 +2447,11 @@ export class ProcessModeler extends BaseElement {
                 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);
-                if (line)
-                    this.requestEdit({ type: "insert", boxId: drag.id, lineId: line.id, from: line.from, to: line.to, position });
+                if (line) {
+                    const box = this.projection.boxes.find(box => box.id === drag.id);
+                    const { width, height } = this.selectionDimensions(box);
+                    this.requestEdit({ type: "insert", boxId: drag.id, lineId: line.id, from: line.from, to: line.to, position, placement: { source: 'point', center: { x: position.x + width / 2, y: position.y + height / 2 } } });
+                }
                 else if (this.projection.boxes.find(box => box.id === drag.id)?.parentId !== frame?.id)
                     this.requestEdit({ type: "reparent", boxId: drag.id, parentId: frame?.id, position });
                 else if (this.selectedIds.size > 1 && this.selectedIds.has(drag.id)) {
@@ -1976,6 +2517,9 @@ export class ProcessModeler extends BaseElement {
     }
     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'})`); });
     }
     alignedPoint(id, x, y) {
@@ -2032,9 +2576,10 @@ export class ProcessModeler extends BaseElement {
     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 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 };
-        return { type: 'add', from: box.id, ...(side ? { fromSide: side } : {}), parentId: box.parentId, ...(position ? { position } : {}) };
+            return { type: 'insert', lineId: outgoing[0].id, from: box.id, to: outgoing[0].to, placement };
+        return { type: 'add', from: box.id, placement, ...(side ? { fromSide: side } : {}), parentId: box.parentId, ...(position ? { position } : {}) };
     }
     nextChooserTitle(box, side) {
         const edit = this.nextEdit(box, side);
@@ -2060,7 +2605,7 @@ export class ProcessModeler extends BaseElement {
         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);
-        this.openChooserAtPoint({ type: 'insert', lineId: line.id, from: line.from, to: line.to }, `Insert between ${source?.title ?? line.from} and ${target?.title ?? line.to}`, lineMidpoint(points), returnFocus);
+        this.openChooserAtPoint({ type: 'insert', lineId: line.id, from: line.from, to: line.to, placement: { source: 'line', center: lineMidpoint(points) } }, `Insert between ${source?.title ?? line.from} and ${target?.title ?? line.to}`, lineMidpoint(points), returnFocus);
     }
     closeKeyboardChooser(returnFocus = false) {
         const chooser = this.shadowRoot?.querySelector('[part=keyboard-chooser]');
@@ -2088,8 +2633,8 @@ export class ProcessModeler extends BaseElement {
         const anchor = Array.from(this.shadowRoot.querySelectorAll('[data-box-id]'))
             .find(element => element.dataset.boxId === box.id);
         this.openAnchoredChooser(insert
-            ? { type: 'insert', lineId: outgoing[0].id, from: box.id, to: target.id }
-            : { type: 'add', from: box.id }, insert ? `Insert between ${box.title} and ${target.title}`
+            ? { type: 'insert', lineId: outgoing[0].id, from: box.id, to: target.id, placement: { source: 'next' } }
+            : { type: 'add', from: box.id, placement: { source: 'next' } }, insert ? `Insert between ${box.title} and ${target.title}`
             : shape === 'gateway' ? `Add a path from ${box.title}` : `Add after ${box.title}`, anchor);
     }
     openAnchoredChooser(edit, title, anchor, returnFocus) {
@@ -2138,7 +2683,7 @@ export class ProcessModeler extends BaseElement {
         tooltip.style.top = `${point.y + 16}px`;
     }
     update() {
-        const selectionBefore = JSON.stringify({ ids: [...this.selectedIds], path: this.selectedPath });
+        const selectionBefore = JSON.stringify({ items: this.selection, path: this.selectedPath });
         if (this.documentValue !== undefined) {
             this.projection = this.model.project(this.documentValue);
             validateProjection(this.projection);
@@ -2153,10 +2698,12 @@ export class ProcessModeler extends BaseElement {
         if (this.selectedLineId && !this.selectedLine)
             this.selectedLineId = null;
         this.selectedIds = new Set([...this.selectedIds].filter(id => this.projection.boxes.some(box => box.id === id)));
+        this.selectedLineIds = new Set([...this.selectedLineIds].filter(id => this.projection.lines.some(line => line.id === id)));
+        this.selectedNoteIds = new Set([...this.selectedNoteIds].filter(id => this.layoutValue.notes?.some(note => note.id === id)));
         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 })),
+            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 })),
             lines: this.projection.lines,
         });
         if (this.documentValue !== undefined && (serialized !== this.lastProjection || this.documentValue !== this.lastDocument)) {
@@ -2164,7 +2711,7 @@ export class ProcessModeler extends BaseElement {
                 this.versionValue = typeof this.versionValue === "number" ? this.versionValue + 1 : `${this.versionValue}+1`;
             this.lastProjection = serialized;
             this.lastDocument = this.documentValue;
-            emit(this, "projection-changed", { projection: snapshotProcessProjection(this.projection), version: this.versionValue, checks: this.allChecks });
+            this.notify("projection-changed", { projection: snapshotProcessProjection(this.projection), version: this.versionValue, checks: this.allChecks });
         }
         // Riptide or another host owns conversion. It supplies validate() and
         // receives this event only when that conversion can read the drawing.
@@ -2174,7 +2721,7 @@ export class ProcessModeler extends BaseElement {
         if (this.documentValue !== undefined && !this.allChecks.length && readableKey !== this.lastReadableProjection) {
             this.lastReadableProjection = readableKey;
             this.readableValue = snapshotProcessProjection(this.projection);
-            emit(this, "readable-projection-changed", { projection: snapshotProcessProjection(this.readableValue), version: this.versionValue });
+            this.notify("readable-projection-changed", { projection: snapshotProcessProjection(this.readableValue), version: this.versionValue });
         }
         if (this.documentValue === undefined) {
             this.lastProjection = "";
@@ -2182,18 +2729,29 @@ export class ProcessModeler extends BaseElement {
             this.readableValue = null;
             this.lastDocument = undefined;
         }
-        const focused = this.shadowRoot.activeElement
-            ?.dataset.boxId;
+        const active = this.shadowRoot.activeElement;
+        const focused = active?.dataset.boxId, focusedNote = active?.dataset.noteId;
         this.renderWorld();
         this.renderPalette();
         this.renderChecks();
         this.renderSelection();
         this.paintViewport();
         this.updateToolbar();
-        if (selectionBefore !== JSON.stringify({ ids: [...this.selectedIds], path: this.selectedPath }))
-            emit(this, "selection-changed", { box: this.selected, boxes: this.selectedBoxes, path: this.selectedPath });
-        if (focused)
-            this.focusBox(focused);
+        if (selectionBefore !== JSON.stringify({ items: this.selection, path: this.selectedPath }))
+            this.notify("selection-changed", { box: this.selected, boxes: this.selectedBoxes, path: this.selectedPath, ...(this.graphSelection ? { selection: this.selection } : {}) });
+        if (focused) {
+            this.restoringBoxFocus = true;
+            try {
+                this.focusBox(focused);
+            }
+            finally {
+                this.restoringBoxFocus = false;
+            }
+        }
+        else if (focusedNote) {
+            const note = Array.from(this.shadowRoot.querySelectorAll('[data-note-id]')).find(note => note.dataset.noteId === focusedNote);
+            (note ?? this.shadowRoot.querySelector('[part=canvas]'))?.focus({ preventScroll: true });
+        }
     }
     get allChecks() { return this.computedChecks; }
     collectChecks() {
@@ -2222,6 +2780,13 @@ export class ProcessModeler extends BaseElement {
         for (const box of [...this.projection.boxes].sort((a, b) => Number(Boolean(b.frame)) - Number(Boolean(a.frame)))) {
             const element = document.createElement("div");
             element.tabIndex = 0;
+            element.addEventListener('focus', () => {
+                if (!this.restoringBoxFocus && !this.pointers.size && !this.portDrag && !this.endDrag && !this.segmentDrag && !this.marquee && !this.frameResize) {
+                    this.select(box.id);
+                    if (box.kind !== 'section')
+                        this.revealBox(box);
+                }
+            });
             element.setAttribute("role", "group");
             element.setAttribute("part", box.frame ? "frame" : "box");
             element.dataset.boxId = box.id;
@@ -2233,7 +2798,7 @@ export class ProcessModeler extends BaseElement {
             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.message}` : ""]
+            element.setAttribute("aria-label", [`${kind?.label ?? box.kind}: ${box.title}. ${incoming} in, ${outgoing} out`, problem ? `Needs attention: ${problem.title || problem.message}` : ""]
                 .filter(Boolean)
                 .join(". "));
             element.setAttribute("aria-current", String(this.selectedIds.has(box.id)));
@@ -2350,7 +2915,7 @@ export class ProcessModeler extends BaseElement {
             if (problem) {
                 const message = document.createElement("span");
                 message.setAttribute("part", "problem");
-                message.append(checkGlyph(), document.createTextNode(problem.title ?? problem.message));
+                message.append(checkGlyph(), document.createTextNode(problem.title || problem.message));
                 element.append(message);
             }
             element.addEventListener("keydown", event => {
@@ -2394,6 +2959,7 @@ export class ProcessModeler extends BaseElement {
                 for (const side of ["north", "east", "south", "west"]) {
                     const port = document.createElement("button");
                     port.type = "button";
+                    port.tabIndex = -1;
                     port.setAttribute("part", "port");
                     port.dataset.side = side;
                     port.dataset.owner = box.id;
@@ -2458,8 +3024,8 @@ export class ProcessModeler extends BaseElement {
             const path = svgElement("path");
             path.setAttribute("part", "line");
             path.dataset.lineId = line.id;
-            path.dataset.selected = String(this.selectedLineId === line.id);
-            path.setAttribute('marker-end', `url(#${this.selectedLineId === line.id ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`);
+            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'})`);
             path.setAttribute("vector-effect", "non-scaling-stroke");
             path.setAttribute("d", roundedProcessPath(points));
             if (line.dashed)
@@ -2558,6 +3124,7 @@ export class ProcessModeler extends BaseElement {
                         lineId: line.id,
                         from: line.from,
                         to: line.to,
+                        ...(type === 'insert' ? { placement: { source: 'line', center: lineMidpoint(points) } } : {}),
                     };
                     if (type === "insert" && this.catalog.length) {
                         this.openLineChooser(line, button);
@@ -2587,6 +3154,18 @@ export class ProcessModeler extends BaseElement {
             const element = document.createElement("div");
             element.setAttribute("part", "note");
             element.textContent = note.text;
+            element.dataset.noteId = note.id;
+            element.addEventListener('pointerdown', event => event.stopPropagation());
+            element.tabIndex = 0;
+            element.setAttribute('role', 'button');
+            element.setAttribute('aria-label', note.text || 'Diagram note');
+            element.addEventListener('click', event => { const items = event.shiftKey ? this.selection.filter(item => !(item.type === 'note' && item.id === note.id)) : []; if (!event.shiftKey || !this.selectedNoteIds.has(note.id))
+                items.push({ type: 'note', id: note.id }); this.selectItems(items); });
+            element.addEventListener('keydown', event => { if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.selectItems([{ type: 'note', id: note.id }]);
+            } });
             this.place(element, { ...note, width: 208, height: 80 });
             world.append(element);
         }
@@ -2599,6 +3178,149 @@ export class ProcessModeler extends BaseElement {
             height: `${position.height ?? 64}px`,
         });
     }
+    activatePaletteKind(kind) {
+        if (this.locked)
+            return;
+        if (this.narrowValue) {
+            this.closeDrawer();
+            this.shadowRoot.querySelector('[part=canvas]').focus({ preventScroll: true });
+        }
+        if (kind.placement) {
+            this.addLayoutKind(kind);
+            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;
+        if (from && selected)
+            this.requestEdit({ ...this.nextEdit(selected), kind });
+        else {
+            const canvas = this.shadowRoot.querySelector('[part=canvas]');
+            const center = { x: (canvas.clientWidth / 2 - this.viewport.x) / this.viewport.zoom, y: (canvas.clientHeight / 2 - this.viewport.y) / this.viewport.zoom };
+            this.requestEdit({ type: 'add', kind, placement: { source: 'point', center } });
+        }
+    }
+    paletteLineAt(point) {
+        let nearest;
+        let best = 20 / this.viewport.zoom;
+        for (const line of this.projection.lines) {
+            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;
+                const t = length ? Math.max(0, Math.min(1, ((point.x - a.x) * dx + (point.y - a.y) * dy) / length)) : 0;
+                const distance = Math.hypot(point.x - a.x - t * dx, point.y - a.y - t * dy);
+                if (distance < best) {
+                    best = distance;
+                    nearest = line;
+                }
+            }
+        }
+        return nearest;
+    }
+    paletteFrameAt(point) {
+        let nearest;
+        let depth = -1;
+        for (const box of this.projection.boxes) {
+            if (!box.frame)
+                continue;
+            const p = this.layoutValue.boxes[box.id];
+            if (!p)
+                continue;
+            const { width, height } = this.selectionDimensions(box);
+            if (point.x < p.x || point.x > p.x + width || point.y < p.y || point.y > p.y + height)
+                continue;
+            let level = 0, parent = box.parentId;
+            while (parent) {
+                level++;
+                parent = this.projection.boxes.find(box => box.id === parent)?.parentId;
+            }
+            if (level > depth) {
+                depth = level;
+                nearest = box;
+            }
+        }
+        return nearest;
+    }
+    markPaletteDrop(point) {
+        this.dropLine = point ? this.paletteLineAt(point)?.id : undefined;
+        const frame = point && !this.dropLine ? this.paletteFrameAt(point) : undefined;
+        this.shadowRoot.querySelectorAll('[part=frame]').forEach(element => { element.dataset.paletteDrop = String(element.dataset.boxId === frame?.id); });
+        this.paintDropLine();
+    }
+    paletteCanvasPoint(event) {
+        const rect = this.shadowRoot.querySelector('[part=canvas]').getBoundingClientRect();
+        if (event.clientX <= rect.left || event.clientX >= rect.right || event.clientY <= rect.top || event.clientY >= rect.bottom)
+            return;
+        return this.canvasPoint(event);
+    }
+    movePalettePointer(event) {
+        const drag = this.palettePointer;
+        if (!drag || drag.id !== event.pointerId)
+            return;
+        if (this.locked) {
+            this.cancelPalettePointer();
+            return;
+        }
+        if (!drag.moved && Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 5)
+            return;
+        if (!drag.moved) {
+            drag.moved = true;
+            if (this.narrowValue)
+                this.closeDrawer();
+        }
+        let ghost = this.shadowRoot.querySelector('[part=palette-ghost]');
+        if (!ghost) {
+            ghost = document.createElement('div');
+            ghost.setAttribute('part', 'palette-ghost');
+            ghost.dataset.pointer = 'true';
+            ghost.setAttribute('aria-hidden', 'true');
+            if (drag.kind.icon)
+                ghost.append(drag.kind.icon());
+            ghost.append(document.createTextNode(drag.kind.label));
+            this.shadowRoot.append(ghost);
+        }
+        ghost.style.left = `${event.clientX}px`;
+        ghost.style.top = `${event.clientY}px`;
+        this.markPaletteDrop(!drag.kind.placement && drag.kind.kind !== 'end' ? this.paletteCanvasPoint(event) : undefined);
+        event.preventDefault();
+    }
+    cancelPalettePointer() {
+        const drag = this.palettePointer;
+        this.palettePointer = undefined;
+        this.ownerDocument.removeEventListener('keydown', this.escapePalettePointer, true);
+        if (!drag)
+            return;
+        this.suppressPaletteClick = true;
+        this.shadowRoot?.querySelector('[part=palette-ghost]')?.remove();
+        this.markPaletteDrop(undefined);
+        try {
+            this.releasePointerCapture(drag.id);
+        }
+        catch { /* Capture may already have been lost. */ }
+    }
+    finishPalettePointer(event) {
+        const drag = this.palettePointer;
+        if (!drag || drag.id !== event.pointerId)
+            return;
+        const point = this.paletteCanvasPoint(event);
+        this.cancelPalettePointer();
+        if (this.locked)
+            return;
+        if (!drag.moved) {
+            this.activatePaletteKind(drag.kind);
+            if (this.narrowValue)
+                this.closeDrawer();
+            return;
+        }
+        if (!point)
+            return;
+        if (drag.kind.placement) {
+            this.addLayoutKind(drag.kind, point);
+            return;
+        }
+        const line = drag.kind.kind === 'end' ? undefined : this.paletteLineAt(point);
+        const frame = line ? undefined : this.paletteFrameAt(point);
+        this.requestEdit({ type: line ? 'insert' : 'add', kind: drag.kind, lineId: line?.id, from: line?.from, to: line?.to, parentId: frame?.id, position: point, placement: { source: 'point', center: { ...point } } });
+    }
     renderPalette() {
         const choices = this.shadowRoot.querySelector("[part=choices]");
         const query = this.shadowRoot.querySelector("[part=search]").value.toLowerCase();
@@ -2631,19 +3353,30 @@ export class ProcessModeler extends BaseElement {
             description.textContent = kind.description;
             button.append(icon, name, description);
             button.disabled = this.locked;
-            button.draggable = !this.locked;
-            button.addEventListener("click", () => {
-                if (kind.placement) {
-                    this.addLayoutKind(kind);
+            button.draggable = false;
+            button.addEventListener('pointerdown', event => {
+                if (this.locked || event.button !== 0 || event.isPrimary === false)
+                    return;
+                this.cancelPalettePointer();
+                this.suppressPaletteClick = false;
+                this.palettePointer = { kind, id: event.pointerId, x: event.clientX, y: event.clientY, moved: false };
+                this.ownerDocument.addEventListener('keydown', this.escapePalettePointer, true);
+                try {
+                    this.setPointerCapture(event.pointerId);
+                }
+                catch { /* Detached synthetic pointers cannot be captured. */ }
+                event.preventDefault();
+                event.stopPropagation();
+            });
+            button.addEventListener('click', event => {
+                if (event.detail > 0 && this.suppressPaletteClick) {
+                    this.suppressPaletteClick = false;
                     return;
                 }
-                const from = this.selectedId;
-                const outgoing = from ? this.projection.lines.filter(line => line.from === from) : [];
-                const line = outgoing.length === 1 ? outgoing[0] : undefined;
-                this.requestEdit(line ? { type: "insert", kind, lineId: line.id, from: line.from, to: line.to } : { type: "add", kind, ...(from ? { from } : {}) });
+                this.activatePaletteKind(kind);
             });
-            button.addEventListener("dragstart", event => { this.paletteDragKind = kind; event.dataTransfer?.setData("application/boe-process-kind", kind.kind); });
-            button.addEventListener("dragend", () => { this.paletteDragKind = null; this.shadowRoot?.querySelector('[part=palette-ghost]')?.remove(); this.markDropLine(undefined); });
+            button.addEventListener('dragstart', event => { this.paletteDragKind = kind; event.dataTransfer?.setData('application/boe-process-kind', kind.kind); });
+            button.addEventListener('dragend', () => { this.paletteDragKind = null; this.shadowRoot?.querySelector('[part=palette-ghost]')?.remove(); this.markDropLine(undefined); });
             choices.append(button);
         }
         const canvas = this.shadowRoot.querySelector("[part=canvas]");
@@ -2685,7 +3418,7 @@ export class ProcessModeler extends BaseElement {
                 type: line ? "insert" : "add",
                 kind,
                 lineId: line?.id, from: line?.from, to: line?.to, parentId: frame?.id,
-                position,
+                position, placement: { source: 'point', center: { ...position } },
             });
             this.markDropLine(undefined);
         };
@@ -2937,19 +3670,48 @@ export class ProcessModeler extends BaseElement {
         return row;
     }
     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 focusedKey = focusedControl?.dataset.field ?? focusedControl?.dataset.variable;
+        const focusedKey = focusedControl?.dataset.field ?? focusedControl?.dataset.variable ?? focusedControl?.dataset.localVariable;
         const variableKey = focusedControl?.dataset.variableKey;
-        const focusedType = focusedControl?.dataset.field !== undefined ? 'field' : focusedControl?.dataset.variable !== undefined ? 'variable' : null;
+        const localKey = focusedControl?.dataset.localKey, localName = focusedControl?.dataset.localName;
+        const focusedType = focusedControl?.dataset.field !== undefined ? 'field' : focusedControl?.dataset.variable !== undefined ? 'variable' : focusedControl?.dataset.localVariable !== undefined ? 'localVariable' : null;
         const caret = focusedControl && 'selectionStart' in focusedControl ? focusedControl.selectionStart : null;
         const restoreControlFocus = () => {
             if (focusedKey === undefined || !focusedType)
                 return;
             const controls = Array.from(this.shadowRoot.querySelectorAll('input,textarea,select,button'));
-            const control = controls.find(item => item.dataset[focusedType] === focusedKey && (focusedType !== 'variable' || item.dataset.variableKey === variableKey))
+            const control = controls.find(item => item.dataset[focusedType] === focusedKey && (focusedType !== 'variable' || item.dataset.variableKey === variableKey) && focusedType !== 'localVariable')
                 ?? (focusedType === 'variable' ? controls.find(item => this.pendingVariableRename?.name === focusedKey && item.dataset.variable === this.pendingVariableRename.value && item.dataset.variableKey === variableKey) ?? controls.find(item => item.dataset.variableKey === 'add') : undefined);
+            if (focusedType === 'localVariable') {
+                if (focusedControl?.dataset.localAmbiguous === 'true') {
+                    focusedControl.blur();
+                    return;
+                }
+                const names = [localName];
+                if (this.pendingLocalRename?.boxId === focusedKey && this.pendingLocalRename.name === localName && !this.pendingLocalRename.ambiguous)
+                    names.push(this.pendingLocalRename.value);
+                let localControl = undefined;
+                for (const name of names) {
+                    const matches = controls.filter(item => item.dataset.localVariable === focusedKey && item.dataset.localKey === localKey && item.dataset.localName === name);
+                    if (matches.length === 1) {
+                        localControl = matches[0];
+                        break;
+                    }
+                    if (matches.length > 1)
+                        break;
+                }
+                if (!localControl) {
+                    focusedControl?.blur();
+                    return;
+                }
+                localControl.focus();
+                if (caret !== null && localControl instanceof HTMLInputElement)
+                    localControl.setSelectionRange(caret, caret);
+                return;
+            }
             if (!control)
                 return;
             control.focus();
@@ -2957,7 +3719,7 @@ export class ProcessModeler extends BaseElement {
                 control.setSelectionRange(caret, caret);
         };
         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 = line.dataset.lineId === this.selectedLineId; 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); 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);
@@ -2967,9 +3729,9 @@ export class ProcessModeler extends BaseElement {
         });
         const editor = this.shadowRoot.querySelector("[part=editor]");
         const selected = this.selected;
-        const controlsKey = `${[...this.selectedIds].join(',')}|${this.locked}|${this.disableConnections}|${this.showLastRunValue}|${selected?.runMetrics}|${JSON.stringify(selected ? this.fieldsValue[selected.id] ?? [] : [])}`;
+        const controlsKey = `${[...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] ?? [] : [])}`;
         this.shadowRoot.querySelector("[part=palette]").hidden = false;
-        this.shadowRoot.querySelector('[part=selection-toolbar]').hidden = this.selectedIds.size === 0 && !this.selectedLineId;
+        this.shadowRoot.querySelector('[part=selection-toolbar]').hidden = this.selection.length === 0;
         this.renderSelectionToolbar();
         this.renderPane();
         this.positionSelectionToolbar();
@@ -2978,6 +3740,12 @@ export class ProcessModeler extends BaseElement {
             this.inspectedControls === controlsKey &&
             editor.querySelector(`[part=inspector-heading]`)?.tagName === `H${this.headingLevel}`) {
             editor.querySelector("[part=inspector-heading]").textContent = selected?.title ?? "";
+            const locals = editor.querySelector('[part=local-variables]');
+            if (selected && 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));
+            }
             restoreControlFocus();
             return;
         }
@@ -3031,6 +3799,8 @@ export class ProcessModeler extends BaseElement {
             }
             for (const field of this.fieldsValue[selected.id] ?? [])
                 editor.append(this.renderField(selected, field));
+            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);
@@ -3106,7 +3876,7 @@ export class ProcessModeler extends BaseElement {
             duplicate.type = 'button';
             duplicate.textContent = 'Duplicate';
             duplicate.disabled = this.locked;
-            duplicate.onclick = () => this.requestEdit({ type: 'duplicate', sourceId: selected.id, position: { x: this.layoutValue.boxes[selected.id].x + 32, y: this.layoutValue.boxes[selected.id].y + 32 } });
+            duplicate.onclick = () => this.duplicateBoxes([selected.id], 48);
             const remove = document.createElement('button');
             remove.type = 'button';
             remove.textContent = 'Delete';
@@ -3117,14 +3887,118 @@ export class ProcessModeler extends BaseElement {
         }
         restoreControlFocus();
     }
+    renderLocalVariables(box) {
+        const section = document.createElement('section');
+        section.setAttribute('part', 'local-variables');
+        section.dataset.localEchoRevision = String(this.localEchoRevision);
+        const heading = document.createElement('h3');
+        heading.textContent = box.frame ? 'Variables for the steps inside' : 'Variables for this step';
+        const help = document.createElement('p');
+        help.textContent = box.frame ? 'Every step inside can read these; they’re gone once the frame is done.' : 'Only this step’s inputs can read these; they’re gone once it’s done.';
+        const collection = document.createElement('div');
+        collection.setAttribute('part', 'local-variable-list');
+        section.append(heading, help, collection);
+        for (const [index, variable] of (box.localVariables ?? []).entries()) {
+            const row = document.createElement('div');
+            row.setAttribute('part', 'local-variable-row');
+            row.setAttribute('role', 'group');
+            row.setAttribute('aria-label', `Step variable ${index + 1}`);
+            const identify = (control, key) => { control.dataset.localVariable = box.id; control.dataset.localIndex = String(index); control.dataset.localKey = key; control.dataset.localName = variable.name; control.dataset.localAmbiguous = String(box.localVariables?.filter(item => item.name === variable.name).length !== 1); };
+            for (const [key, label, value] of [['rename', 'Name', variable.name], ['starting-value', 'Starts as', variable.startingValue ?? '']]) {
+                const field = variableLabel(label);
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.placeholder = key === 'rename' ? 'name' : 'starts as';
+                input.spellcheck = false;
+                input.autocomplete = 'off';
+                input.value = value;
+                input.disabled = this.locked || !box.localVariablesEditable;
+                identify(input, key);
+                if (variable.problem) {
+                    input.setAttribute('aria-invalid', 'true');
+                    input.setAttribute('aria-describedby', `process-local-problem-${encodeURIComponent(box.id)}-${index}`);
+                }
+                input.oninput = () => {
+                    if (key === 'rename')
+                        this.pendingLocalRename = { boxId: box.id, name: variable.name, value: input.value, echoRevision: this.localEchoRevision, ambiguous: input.dataset.localAmbiguous === 'true' };
+                    this.requestLocalVariableEdit(box, { type: key, index, name: variable.name, value: input.value });
+                };
+                field.append(input);
+                row.append(field);
+            }
+            if (box.localVariablesEditable) {
+                const remove = document.createElement('button');
+                remove.type = 'button';
+                remove.append(variableGlyph());
+                remove.setAttribute('aria-label', `Remove ${variable.name || 'this variable'}`);
+                remove.disabled = this.locked;
+                identify(remove, 'remove');
+                remove.onclick = () => this.requestLocalVariableEdit(box, { type: 'remove', index, name: variable.name });
+                row.append(remove);
+            }
+            if (variable.problem) {
+                const problem = document.createElement('small');
+                problem.setAttribute('part', 'field-problem');
+                problem.id = `process-local-problem-${encodeURIComponent(box.id)}-${index}`;
+                problem.textContent = variable.problem;
+                row.append(problem);
+            }
+            collection.append(row);
+        }
+        if (box.localVariablesEditable) {
+            const add = document.createElement('button');
+            add.type = 'button';
+            add.append(variableGlyph(true), document.createTextNode('Add a variable'));
+            add.disabled = this.locked;
+            add.dataset.localVariable = box.id;
+            add.dataset.localKey = 'add';
+            add.onclick = () => this.requestLocalVariableEdit(box, { type: 'add' });
+            const actions = document.createElement('div');
+            actions.setAttribute('part', 'local-variable-actions');
+            actions.append(add);
+            section.append(actions);
+        }
+        return section;
+    }
+    requestLocalVariableEdit(box, edit) {
+        const owner = this.selected;
+        if (this.locked || !owner?.localVariablesEditable || owner.id !== box.id)
+            return;
+        if (edit.type !== 'add' && owner.localVariables?.[edit.index]?.name !== edit.name)
+            return;
+        const request = { boxId: owner.id, ...(owner.path ? { path: [...owner.path] } : {}), edit };
+        const session = this.layoutEditSession, beforeNames = (owner.localVariables ?? []).map(variable => variable.name), beforeCount = beforeNames.length;
+        emit(this, 'process-local-variable-edit-request', request);
+        if (session !== this.layoutEditSession || this.selected?.id !== box.id)
+            return;
+        const count = this.selected.localVariables?.length ?? 0;
+        if (edit.type === 'add' && count > beforeCount) {
+            const remaining = [...beforeNames];
+            const added = (this.selected.localVariables ?? []).filter(variable => {
+                const index = remaining.indexOf(variable.name);
+                if (index < 0)
+                    return true;
+                remaining.splice(index, 1);
+                return false;
+            });
+            if (added.length === 1 && this.selected.localVariables?.filter(variable => variable.name === added[0].name).length === 1) {
+                const name = Array.from(this.shadowRoot.querySelectorAll('[data-local-key=rename]')).find(input => input.dataset.localVariable === box.id && input.dataset.localName === added[0].name);
+                name?.focus();
+                name?.select();
+            }
+        }
+        else if (edit.type === 'remove' && count < beforeCount) {
+            Array.from(this.shadowRoot.querySelectorAll('[data-local-key=add]')).find(button => button.dataset.localVariable === box.id)?.focus();
+        }
+    }
     renderSelectionToolbar() {
         const toolbar = this.shadowRoot.querySelector('[part=selection-toolbar]');
-        const key = `${[...this.selectedIds].join(',')}|${this.selected?.kind}|${this.selected?.shape}|${this.selectedLineId}|${Boolean(this.selectedLineId && this.layoutValue.lines?.[this.selectedLineId])}|${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.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;
         toolbar.replaceChildren();
-        if (!this.selectedIds.size && !this.selectedLineId)
+        if (!this.selection.length)
             return;
         const add = (label, command, action, withPlus = false) => {
             const button = document.createElement('button');
@@ -3145,10 +4019,15 @@ export class ProcessModeler extends BaseElement {
             button.append(text);
             toolbar.append(button);
         };
-        if (this.selectedLine) {
+        if (this.graphSelection && (this.selectedNoteIds.size || this.selectedLineIds.size > 1 || this.selectedLineIds.size && this.selectedIds.size)) {
+            if (this.selectedIds.size > 1)
+                add('Line up', 'align', () => this.selectionCommand('align'));
+            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])
+            if (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 }));
@@ -3161,9 +4040,9 @@ export class ProcessModeler extends BaseElement {
             if (!['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 }, `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);
+                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);
             if (!['start', 'timer', 'section'].includes(box.kind))
-                add('Duplicate', 'duplicate', () => { const position = this.layoutValue.boxes[box.id]; this.requestEdit({ type: 'duplicate', sourceId: box.id, position: { x: position.x + 32, y: position.y + 32 } }); });
+                add('Duplicate', 'duplicate', () => this.duplicateBoxes([box.id], 48));
             if (!['start', 'timer'].includes(box.kind))
                 add('Delete', 'delete-many', () => this.selectionCommand('delete-many'));
         }
@@ -3197,6 +4076,9 @@ export class ProcessModeler extends BaseElement {
     paintViewport() {
         const world = this.shadowRoot.querySelector("[part=world]");
         world.style.setProperty('--boe-process-inverse-zoom', String(1 / this.viewport.zoom));
+        // A small screen-space margin keeps targets above 24px after fractional
+        // layout rounding without assuming a browser's CSS-pixel quantum.
+        world.style.setProperty('--boe-process-hit-target', `${24.1 / this.viewport.zoom}px`);
         world.style.transform =
             `translate(${this.viewport.x}px,${this.viewport.y}px) scale(${this.viewport.zoom})`;
         const canvas = this.shadowRoot.querySelector("[part=canvas]");
@@ -3244,17 +4126,27 @@ export class ProcessModeler extends BaseElement {
         minimap.append(viewport);
     }
     positionSelectionToolbar() {
-        if (!this.isRendered || (!this.selectedIds.size && !this.selectedLineId))
+        if (!this.isRendered || !this.selection.length)
             return;
         const canvas = this.shadowRoot.querySelector('[part=canvas]');
         const toolbar = this.shadowRoot.querySelector('[part=selection-toolbar]');
         const positions = [...this.selectedIds].map(id => this.layoutValue.boxes[id]).filter(Boolean);
+        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;
         }
+        if (!positions.length) {
+            for (const id of this.selectedLineIds) {
+                const points = this.routedLines.get(id) ?? [];
+                if (!points.length)
+                    continue;
+                const x = Math.min(...points.map(point => point.x)), y = Math.min(...points.map(point => point.y));
+                positions.push({ x, y, width: Math.max(...points.map(point => point.x)) - x, height: Math.max(...points.map(point => point.y)) - y });
+            }
+        }
         if (!positions.length)
             return;
         const left = Math.min(...positions.map(position => position.x * this.viewport.zoom + this.viewport.x));
@@ -3266,9 +4158,11 @@ export class ProcessModeler extends BaseElement {
     focusBox(id) {
         Array.from(this.shadowRoot.querySelectorAll("[data-box-id]"))
             .find((box) => box.dataset.boxId === id)
-            ?.focus();
+            ?.focus({ preventScroll: true });
     }
     setStatus(message, urgent = false) {
+        if (!this.isRendered)
+            return;
         this.shadowRoot.querySelector(urgent ? "[part=status]" : "[part=urgent-status]").textContent = "";
         this.shadowRoot.querySelector(urgent ? "[part=urgent-status]" : "[part=status]").textContent = message;
     }