@unofficialbox/box-open-elements 0.24.0 → 0.26.0

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

@@ -1,6 +1,10 @@
 import { BaseElement } from "../../core/index.js";
 import { announce } from "../../foundations/a11y/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
+import { dismissModal, promoteModal } from "../../foundations/overlay/index.js";
+import { KindPicker } from "../flow-builder/primitives.js";
+import { arrangeProcess, routeProcessLine, lineMidpoint, nearProcessLine, roundedProcessPath } from "./geometry.js";
+import { restoreProcessPositions, snapshotProcessPositions, graphChecks, normalizeProcessSelectionPath } from "./bridge.js";
+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 emit = (element, name, detail) => element.dispatchEvent(new CustomEvent(name, {
@@ -13,7 +17,7 @@ const emit = (element, name, detail) => element.dispatchEvent(new CustomEvent(na
 export class ProcessModeler extends BaseElement {
     static tagName = "box-process-modeler";
     static get observedAttributes() {
-        return ["locked", "snap-to-grid"];
+        return ["locked", "snap-to-grid", "heading-level", "disable-connections", "embed-mode"];
     }
     documentValue;
     modelValue = {
@@ -22,19 +26,139 @@ export class ProcessModeler extends BaseElement {
     projection = { boxes: [], lines: [] };
     layoutValue = { boxes: {} };
     catalogValue = [];
+    detailValue = "business";
+    lastRunValue;
+    showLastRunValue = false;
     selectedId = null;
+    selectedLineId = null;
     connecting = null;
     checks = [];
     renderer;
     cleanupInspector;
     inspected;
     inspectedId;
+    inspectedControls = "";
     historyValue = new ProcessHistory();
     viewport = { x: 0, y: 0, zoom: 1 };
     pointers = new Map();
     drag;
     pinchDistance = 0;
     gestureZoom = 1;
+    insertion;
+    selectedIds = new Set();
+    clipboardIds = [];
+    selectionToolbarKey = "";
+    sectionSequence = 0;
+    versionValue = 0;
+    lastProjection = "";
+    lastReadableProjection = "";
+    readableValue = null;
+    lastDocument;
+    connectionsValue = [];
+    variablesValue = [];
+    outlineValue = [];
+    fieldsValue = {};
+    processTitleValue = "Process";
+    processSummaryValue = "";
+    activePane = "Outline";
+    portDrag;
+    endDrag;
+    pendingReattach;
+    marquee;
+    segmentDrag;
+    frameResize;
+    spacePressed = false;
+    dropLine;
+    paletteDragKind = null;
+    narrowValue = false;
+    suppressClick = false;
+    resizeObserver;
+    routedLines = new Map();
+    computedChecks = [];
+    get selectedBoxes() { return this.projection.boxes.filter(box => this.selectedIds.has(box.id)); }
+    get selectedLine() { return this.projection.lines.find(line => line.id === this.selectedLineId) ?? null; }
+    get selectedPath() { return this.selected?.path ? [...this.selected.path] : null; }
+    set selectedPath(path) {
+        if (!this.isRendered && this.documentValue !== undefined) {
+            this.projection = this.model.project(this.documentValue);
+            validateProjection(this.projection);
+        }
+        const normalized = normalizeProcessSelectionPath(this.projection, path);
+        this.select(normalized === null ? null : this.projection.boxes.find(box => JSON.stringify(box.path) === JSON.stringify(normalized))?.id ?? null);
+    }
+    get connections() { return this.connectionsValue; }
+    set connections(value) { this.connectionsValue = value; this.refresh(); }
+    get variables() { return this.variablesValue; }
+    set variables(value) { this.variablesValue = value; this.refresh(); }
+    get outline() { return this.outlineValue; }
+    set outline(value) { this.outlineValue = value; this.refresh(); }
+    get fields() { return this.fieldsValue; }
+    set fields(value) { this.fieldsValue = value; this.inspected = undefined; this.refresh(); }
+    get processTitle() { return this.processTitleValue; }
+    set processTitle(value) { this.processTitleValue = value; this.refresh(); }
+    get processSummary() { return this.processSummaryValue; }
+    set processSummary(value) { this.processSummaryValue = value; this.refresh(); }
+    get view() { return { ...this.viewport }; }
+    setView(view) {
+        if (![view.x, view.y, view.zoom].every(Number.isFinite) || view.zoom < 0.25 || view.zoom > 2)
+            return;
+        this.viewport = { ...view };
+        if (this.isRendered)
+            this.paintViewport();
+    }
+    get version() { return this.versionValue; }
+    get narrow() { return this.narrowValue; }
+    get positions() { return snapshotProcessPositions(this.projection, this.layoutValue); }
+    /** Current drawing and last valid drawing; hosts own conversion and persistence. */
+    get readback() {
+        return { current: this.allChecks.length ? null : this.projection, lastReadable: this.readableValue, checks: [...this.allChecks], version: this.versionValue };
+    }
+    load(document, options = {}) {
+        const projection = this.model.project(document);
+        validateProjection(projection);
+        this.documentValue = document;
+        this.projection = projection;
+        this.versionValue = options.version ?? 0;
+        this.lastProjection = "";
+        this.lastReadableProjection = "";
+        this.readableValue = null;
+        this.layoutValue = restoreProcessPositions(projection, options.positions ?? []);
+        this.history.clear();
+        this.selectedId = null;
+        this.selectedLineId = null;
+        this.selectedIds.clear();
+        this.clipboardIds = [];
+        this.refresh();
+        if (options.selectedPath)
+            this.selectedPath = options.selectedPath;
+    }
+    selectMany(ids) {
+        if (!this.isRendered && this.documentValue !== undefined) {
+            this.projection = this.model.project(this.documentValue);
+            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)))
+            return;
+        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 });
+    }
+    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)); }
+    get disableConnections() { return this.hasAttribute("disable-connections"); }
+    set disableConnections(value) { this.toggleAttribute("disable-connections", value); }
+    /** Hide duplicate process heading/view controls when the host supplies them. */
+    get embedMode() { return this.hasAttribute('embed-mode'); }
+    set embedMode(value) { this.toggleAttribute('embed-mode', value); }
+    arrangedLayout(layout) {
+        const arranged = this.model.arrange?.(this.projection) ?? arrangeProcess(this.projection);
+        return completeLayout(this.projection, { ...layout, boxes: { ...arranged?.boxes, ...layout.boxes } });
+    }
     get document() {
         return this.documentValue;
     }
@@ -74,6 +198,18 @@ export class ProcessModeler extends BaseElement {
         this.catalogValue = value;
         this.refresh();
     }
+    get detail() { return this.detailValue; }
+    set detail(value) {
+        if (value === this.detailValue)
+            return;
+        this.detailValue = value;
+        this.refresh();
+        emit(this, "detail-changed", { detail: value });
+    }
+    get lastRun() { return this.lastRunValue; }
+    set lastRun(value) { this.lastRunValue = value; this.inspected = undefined; this.refresh(); }
+    get showLastRun() { return this.showLastRunValue; }
+    set showLastRun(value) { this.showLastRunValue = Boolean(value); this.inspected = undefined; this.refresh(); }
     get locked() {
         return this.hasAttribute("locked");
     }
@@ -100,12 +236,23 @@ export class ProcessModeler extends BaseElement {
         this.refresh();
     }
     disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.shadowRoot?.querySelectorAll("[part=pane-drawer]").forEach(dialog => dismissModal(dialog));
+        const chooser = this.shadowRoot?.querySelector("[part=insert-chooser]");
+        if (chooser)
+            dismissModal(chooser);
         this.cleanupInspector?.();
         this.cleanupInspector = undefined;
         this.inspected = undefined;
         this.pointers.clear();
         this.drag = undefined;
+        this.portDrag = undefined;
+        this.endDrag = undefined;
+        this.pendingReattach = undefined;
+        this.marquee = undefined;
+        this.segmentDrag = undefined;
     }
+    connectedCallback() { super.connectedCallback(); this.resizeObserver?.observe(this); }
     refresh() {
         if (this.isRendered)
             this.update();
@@ -117,11 +264,26 @@ 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)
+            return;
         this.selectedId = id;
+        this.selectedIds = new Set(id ? [id] : []);
+        this.selectedLineId = null;
         this.renderSelection();
         if (this.isRendered)
             this.updateToolbar();
-        emit(this, "selection-changed", { box: this.selected });
+        emit(this, "selection-changed", { box: this.selected, boxes: this.selectedBoxes, path: this.selectedPath });
+    }
+    selectLine(id) {
+        if (id !== null && !this.projection.lines.some(line => line.id === id))
+            return;
+        if (this.selectedLineId === id && !this.selectedIds.size)
+            return;
+        this.selectedLineId = id;
+        this.selectedId = null;
+        this.selectedIds.clear();
+        this.refresh();
+        emit(this, 'selection-changed', { box: null, boxes: [], line: this.selectedLine, path: null });
     }
     setValidation(checks) {
         this.checks = checks;
@@ -131,7 +293,7 @@ export class ProcessModeler extends BaseElement {
         this.setValidation(message ? [{ message, path }] : []);
     }
     requestEdit(edit) {
-        if (this.locked)
+        if (this.locked || (this.disableConnections && (edit.type === "connect" || edit.type === "disconnect" || edit.type === 'reattach')))
             return;
         const before = this.layout;
         const previousIds = new Set(this.projection.boxes.map((box) => box.id));
@@ -142,11 +304,14 @@ export class ProcessModeler extends BaseElement {
                 if (accepted)
                     return;
                 accepted = true;
+                if (command.layout)
+                    this.layoutValue = structuredClone(command.layout);
                 this.refresh();
-                if (edit.position &&
+                if (!command.layout &&
+                    edit.position &&
                     Number.isFinite(edit.position.x) &&
                     Number.isFinite(edit.position.y)) {
-                    const added = this.projection.boxes.find((box) => !previousIds.has(box.id));
+                    const added = this.projection.boxes.find(box => box.id === edit.boxId) ?? this.projection.boxes.find((box) => !previousIds.has(box.id));
                     if (added)
                         this.layoutValue = this.translatedLayout(added.id, edit.position.x, edit.position.y);
                 }
@@ -154,7 +319,7 @@ export class ProcessModeler extends BaseElement {
                 const restore = (layout) => {
                     this.layoutValue = structuredClone(layout);
                     this.refresh();
-                    emit(this, "layout-changed", { layout: this.layout });
+                    this.emitPositions();
                 };
                 this.history.record({
                     undo: () => {
@@ -168,7 +333,7 @@ export class ProcessModeler extends BaseElement {
                 });
                 this.refresh();
                 if (JSON.stringify(before) !== JSON.stringify(after))
-                    emit(this, "layout-changed", { layout: this.layout });
+                    this.emitPositions();
                 announce("Process updated", "polite", this.ownerDocument);
             },
         };
@@ -194,7 +359,7 @@ export class ProcessModeler extends BaseElement {
         const apply = (layout) => {
             this.layoutValue = structuredClone(layout);
             this.refresh();
-            emit(this, "layout-changed", { layout: this.layout });
+            this.emitPositions();
         };
         apply(after);
         this.history.record({
@@ -213,8 +378,12 @@ export class ProcessModeler extends BaseElement {
         if (emit(this, "move-request", { boxId: id, position: next.boxes[id] }))
             this.commitLayout(next);
     }
+    emitPositions() {
+        emit(this, "layout-changed", { layout: this.layout });
+        emit(this, "positions-changed", { positions: this.positions, version: this.versionValue });
+    }
     translatedLayout(id, x, y) {
-        const snap = (n) => (this.snapToGrid ? Math.round(n / 20) * 20 : n);
+        const snap = (n) => (this.snapToGrid ? Math.round(n / 16) * 16 : n);
         const next = this.layout;
         next.boxes[id] = { ...next.boxes[id], x: snap(x), y: snap(y) };
         const dx = next.boxes[id].x - this.layoutValue.boxes[id].x;
@@ -241,7 +410,20 @@ export class ProcessModeler extends BaseElement {
     tidy() {
         if (this.locked)
             return;
-        this.commitLayout(completeLayout(this.projection, { ...this.layout, boxes: {} }));
+        const before = this.layout.boxes;
+        this.commitLayout(this.arrangedLayout({ ...this.layout, boxes: {} }));
+        if (!globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+            for (const element of Array.from(this.shadowRoot?.querySelectorAll('[data-box-id]') ?? [])) {
+                const previous = before[element.dataset.boxId];
+                const next = this.layoutValue.boxes[element.dataset.boxId];
+                if (!previous || !next || !element.animate)
+                    continue;
+                const dx = previous.x - next.x;
+                const dy = previous.y - next.y;
+                if (dx || dy)
+                    element.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'translate(0, 0)' }], { duration: 320, easing: 'ease-out' });
+            }
+        }
         this.fit();
     }
     resize(id, width, height) {
@@ -269,6 +451,13 @@ export class ProcessModeler extends BaseElement {
             },
         });
     }
+    resetLine(id) {
+        if (!this.layoutValue.lines?.[id])
+            return;
+        const next = this.layout;
+        delete next.lines?.[id];
+        this.commitLayout(next);
+    }
     setNote(note, id = note?.id) {
         if (!id || (note && (!Number.isFinite(note.x) || !Number.isFinite(note.y))))
             return;
@@ -300,7 +489,7 @@ export class ProcessModeler extends BaseElement {
         const centerX = viewport.clientWidth / 2;
         const centerY = viewport.clientHeight / 2;
         const previous = this.viewport.zoom;
-        const next = Math.max(0.25, Math.min(3, previous * factor));
+        const next = Math.max(0.25, Math.min(2, previous * factor));
         this.viewport.x = centerX - ((centerX - this.viewport.x) / previous) * next;
         this.viewport.y = centerY - ((centerY - this.viewport.y) / previous) * next;
         this.viewport.zoom = next;
@@ -321,55 +510,448 @@ export class ProcessModeler extends BaseElement {
         return {
             x,
             y,
-            width: Math.max(100, ...positions.map((pos) => pos.x + (pos.width ?? 220))) -
+            width: Math.max(100, ...positions.map((pos) => pos.x + (pos.width ?? 224))) -
                 x,
-            height: Math.max(100, ...positions.map((pos) => pos.y + (pos.height ?? 96))) -
+            height: Math.max(100, ...positions.map((pos) => pos.y + (pos.height ?? 64))) -
                 y,
         };
     }
     renderTemplate() {
-        this.shadowRoot.innerHTML = `<style>
-      :host{display:block;font:inherit;color:var(--boe-token-text-text,#222);min-width:0}:host([hidden]){display:none!important}
-      *{box-sizing:border-box}button,input{font:inherit;color:inherit}button{background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;padding:8px;min-height:36px;cursor:pointer}button:disabled{opacity:.5;cursor:default}
-      ${boeFocusVisibleStyles(":is(button,input,[part=canvas],[part=minimap])")}
-      [part=toolbar]{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
-      [part=layout]{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:16px}
-      [part=canvas]{position:relative;overflow:hidden;height:var(--boe-process-height,560px);background:var(--boe-token-surface-surface-secondary,#fbfbfb);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:12px;touch-action:none}
-      [part=world]{position:absolute;inset:0;transform-origin:0 0}
-      [part=lines]{position:absolute;inset:0;width:1px;height:1px;overflow:visible;pointer-events:none}
-      [part=line]{stroke:var(--boe-token-text-text-secondary,#666);stroke-width:2;fill:none}
-      [part=box],[part=frame]{position:absolute;padding:12px;display:flex;flex-direction:column;gap:6px;text-align:start;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;touch-action:none}
-      [part=box] strong,[part=frame] strong{overflow-wrap:anywhere}[part=box] small{color:var(--boe-token-text-text-secondary,#666)}
-      [part=frame]{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 4%,var(--boe-token-surface-surface,#fff));justify-content:flex-start}
-      [aria-pressed=true]{border-color:var(--boe-token-surface-surface-brand,#0061d5)}[data-invalid=true]{border-color:var(--boe-token-text-status-text-error,#b92340);border-width:2px}
-      [part=connection]{position:absolute;display:flex;gap:4px;align-items:center;background:var(--boe-token-surface-surface,#fff);border-radius:8px;padding:4px;font-size:12px;white-space:nowrap}
-      [part=connection] button{font-size:12px;min-height:32px;padding:4px}
-      [part=inspector]{min-width:0;padding:12px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:12px;background:var(--boe-token-surface-surface,#fff)}
-      [part=palette]{display:grid;gap:8px}[part=palette] input{width:100%;min-width:0;padding:8px;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px}
-      [part=choices]{display:grid;gap:6px;max-height:300px;overflow:auto}[part=group]{font-weight:600;margin:8px 0 0}
-      [part=checks]{display:grid;gap:6px;margin-top:12px}[part=checks] button{text-align:start;color:var(--boe-token-text-status-text-error,#b92340)}
-      [part=minimap]{position:absolute;right:12px;bottom:12px;width:150px;height:90px;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;touch-action:none}
-      [part=minimap] rect{fill:var(--boe-token-surface-surface-brand,#0061d5)}[part=minimap] [data-viewport]{fill:none;stroke:var(--boe-token-text-text,#222);stroke-width:3}
-      [part=icon]{width:20px;height:20px;color:var(--boe-token-surface-surface-brand,#0061d5)}[part=icon] svg{width:20px;height:20px}
-      [part=note],[part=section]{position:absolute;border:1px dashed var(--boe-token-stroke-stroke,#ddd);background:var(--boe-token-surface-surface,#fff);padding:8px;pointer-events:none}
-      [part=help]{font-size:13px;color:var(--boe-token-text-text-secondary,#666)}
-      @media(max-width:800px){[part=layout]{grid-template-columns:minmax(0,1fr)}[part=canvas]{height:420px}}
-      @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
-    </style><div part="toolbar" role="toolbar" aria-label="Diagram controls"><button data-command="zoom-out">Zoom out</button><button data-command="reset">100%</button><button data-command="zoom-in">Zoom in</button><button data-command="fit">Fit the whole process</button><button data-command="tidy">Tidy up</button><button data-command="undo">Undo</button><button data-command="redo">Redo</button><button data-command="snap" aria-pressed="false">Snap to grid</button><button data-command="lock" aria-pressed="false">Lock diagram</button></div><div part="layout"><div part="canvas" tabindex="0" role="region" aria-label="Process diagram" aria-describedby="process-help"><div part="world"></div><svg part="minimap" role="img" aria-label="Diagram overview. Click to jump"></svg></div><div part="inspector" role="region" aria-label="Process details"><div part="palette"><label>Find a building block<input type="search" part="search"></label><div part="choices"></div></div><div part="editor"></div><div part="checks" role="region" aria-label="Checks"></div></div></div><p part="help" id="process-help">Select a box. Arrow keys move it; C then another box connects it; Delete removes it. Drag the background to pan. Use zoom controls or pinch to zoom. Escape cancels connecting.</p><div part="status" role="status" aria-live="polite"></div>`;
+        this.shadowRoot.innerHTML = `<style>${processModelerDesign}</style><div part="toolbar" role="toolbar" aria-label="Diagram controls"><button data-command="zoom-out">Zoom out</button><button data-command="reset">100%</button><button data-command="zoom-in">Zoom in</button><button data-command="fit">Fit the whole process</button><button data-command="tidy">Tidy up</button><button data-command="undo">Undo</button><button data-command="redo">Redo</button><button data-command="snap" aria-pressed="false">Snap to grid</button><button data-command="lock" aria-pressed="false">Lock diagram</button></div><div part="layout"><div part="canvas" tabindex="0" role="region" aria-label="Process diagram" aria-describedby="process-help"><div part="world"></div><svg part="minimap" role="img" aria-label="Diagram overview. Click to jump"></svg></div><div part="inspector" role="region" aria-label="Process details"><div part="palette"><label>Find a building block<input type="search" part="search"></label><div part="choices"></div></div><div part="editor"></div><div part="checks" role="region" aria-label="Checks"></div></div></div><p part="help" id="process-help">Tab moves between steps. Alt plus an arrow selects the next step that way. Arrows move the selected step; Shift moves it four grid squares. N opens the building-block chooser. Enter edits. Delete removes. Shift plus 1 fits the process. Drag the background to pan; pinch or use the controls to zoom. Escape cancels connecting.</p><div part="status" role="status" aria-live="polite"></div>`;
+        const chooser = document.createElement("dialog");
+        chooser.setAttribute("part", "insert-chooser");
+        chooser.setAttribute("aria-label", "Insert a building block");
+        const picker = new KindPicker();
+        picker.variant = "menu";
+        picker.searchable = true;
+        chooser.append(picker);
+        this.shadowRoot.append(chooser);
+        picker.addEventListener("kind-pick", event => {
+            const insertion = this.insertion;
+            dismissModal(chooser);
+            this.insertion = undefined;
+            if (insertion)
+                this.requestEdit({ ...insertion, kind: event.detail.kind });
+        });
+        picker.addEventListener("picker-cancel", () => { dismissModal(chooser); this.insertion = undefined; });
+        this.setupPanes();
     }
-    setupListeners() {
-        const toolbar = this.shadowRoot.querySelector("[part=toolbar]");
-        for (const [command, label] of [
-            ["connect", "Connect selected"],
-            ["delete", "Delete selected"],
-        ]) {
+    setupPanes() {
+        const root = this.shadowRoot;
+        const toolbar = root.querySelector('[part=toolbar]');
+        const viewSwitch = document.createElement("div");
+        viewSwitch.setAttribute("part", "view-switch");
+        viewSwitch.setAttribute("role", "group");
+        viewSwitch.setAttribute("aria-label", "Diagram detail");
+        for (const [value, label] of [["business", "Business view"], ["technical", "Technical view"]]) {
             const button = document.createElement("button");
             button.type = "button";
-            button.dataset.command = command;
+            button.dataset.detail = value;
             button.textContent = label;
-            toolbar.append(button);
+            button.onclick = () => { this.detail = value; };
+            viewSwitch.append(button);
+        }
+        const runToggle = document.createElement("label");
+        runToggle.setAttribute("part", "run-toggle");
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.setAttribute("aria-label", "Show last run");
+        checkbox.onchange = () => { this.showLastRun = checkbox.checked; };
+        runToggle.append(checkbox, document.createTextNode("Last run"));
+        const viewMenu = document.createElement("details");
+        viewMenu.setAttribute("part", "view-menu");
+        const summary = document.createElement("summary");
+        summary.textContent = "View";
+        viewMenu.append(summary);
+        const viewOptions = document.createElement('div');
+        viewOptions.setAttribute('part', 'view-menu-options');
+        viewMenu.append(viewOptions);
+        for (const [value, label] of [["business", "Business view"], ["technical", "Technical view"]]) {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.dataset.detail = value;
+            button.textContent = label;
+            button.onclick = () => { this.detail = value; viewMenu.open = false; };
+            viewOptions.append(button);
+        }
+        const mobileRun = document.createElement('button');
+        mobileRun.type = 'button';
+        mobileRun.dataset.viewOption = 'last-run';
+        mobileRun.textContent = 'Last run';
+        mobileRun.onclick = () => { this.showLastRun = !this.showLastRun; viewMenu.open = false; };
+        viewOptions.append(mobileRun);
+        const mobileChecks = document.createElement('button');
+        mobileChecks.type = 'button';
+        mobileChecks.textContent = 'Checks';
+        mobileChecks.onclick = () => { this.select(null); this.activePane = 'Checks'; this.renderPane(); viewMenu.open = false; promoteModal(root.querySelector('[part=pane-drawer][data-pane=inspector]')); };
+        viewOptions.append(mobileChecks);
+        toolbar.prepend(viewSwitch, runToggle, viewMenu);
+        const layout = root.querySelector('[part=layout]');
+        const palette = root.querySelector('[part=palette]');
+        const searchLabel = palette.querySelector('label');
+        searchLabel.querySelector('input')?.setAttribute('placeholder', 'Find a building block');
+        const searchIcon = svgElement('svg');
+        searchIcon.setAttribute('part', 'search-icon');
+        searchIcon.setAttribute('viewBox', '0 0 24 24');
+        searchIcon.setAttribute('fill', 'none');
+        searchIcon.setAttribute('stroke', 'currentColor');
+        searchIcon.setAttribute('stroke-width', '1.8');
+        searchIcon.setAttribute('aria-hidden', 'true');
+        const searchCircle = svgElement('circle');
+        searchCircle.setAttribute('cx', '10.5');
+        searchCircle.setAttribute('cy', '10.5');
+        searchCircle.setAttribute('r', '6.5');
+        const searchHandle = svgElement('path');
+        searchHandle.setAttribute('d', 'm16 16 5 5');
+        searchIcon.append(searchCircle, searchHandle);
+        searchLabel.append(searchIcon);
+        const skip = document.createElement("button");
+        skip.type = "button";
+        skip.setAttribute("part", "skip-link");
+        skip.textContent = "Skip to the diagram";
+        skip.onclick = () => { const target = this.selectedId ?? this.projection.boxes.find(box => box.kind === "start")?.id; if (target)
+            this.focusBox(target);
+        else
+            root.querySelector('[part=canvas]')?.focus(); };
+        palette.prepend(skip);
+        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.";
+        palette.append(hint);
+        for (const [part, label] of [["palette", "Building blocks"], ["inspector", "Process details"]]) {
+            const pane = root.querySelector(`[part=${part}]`);
+            const dialog = document.createElement("dialog");
+            dialog.setAttribute("part", "pane-drawer");
+            dialog.setAttribute("aria-label", label);
+            dialog.dataset.pane = part;
+            const close = document.createElement("button");
+            close.setAttribute("part", "pane-close");
+            close.textContent = 'Close';
+            close.setAttribute('aria-label', `Close ${label.toLowerCase()}`);
+            close.onclick = () => dismissModal(dialog);
+            dialog.append(close, pane);
+            if (part === "palette")
+                layout.prepend(dialog);
+            else
+                layout.append(dialog);
+            const trigger = document.createElement("button");
+            trigger.dataset.command = part === "palette" ? "palette" : "details";
+            trigger.textContent = part === "palette" ? "Add" : "Details";
+            trigger.setAttribute("aria-label", `Open ${label.toLowerCase()}`);
+            trigger.onclick = () => promoteModal(dialog);
+            toolbar.append(trigger);
+        }
+        const inspector = root.querySelector('[part=inspector]');
+        const heading = document.createElement("div");
+        heading.setAttribute("part", "process-heading");
+        const title = document.createElement("strong");
+        title.setAttribute("part", "process-title");
+        const summaryText = document.createElement("span");
+        summaryText.setAttribute("part", "process-summary");
+        heading.append(title, summaryText);
+        inspector.prepend(heading);
+        const tabs = document.createElement("div");
+        tabs.setAttribute("part", "pane-tabs");
+        tabs.setAttribute("role", "tablist");
+        tabs.setAttribute("aria-label", "Process details");
+        for (const name of ["Outline", "Checks", "Variables", "Connections", "Shortcuts"]) {
+            const button = document.createElement("button");
+            button.textContent = name;
+            button.dataset.pane = name;
+            button.setAttribute("role", "tab");
+            button.id = `process-tab-${name.toLowerCase()}`;
+            button.setAttribute("aria-controls", "process-pane-content");
+            button.onclick = () => { this.activePane = name; this.renderPane(); };
+            button.onkeydown = event => {
+                const buttons = Array.from(tabs.querySelectorAll("button"));
+                const index = buttons.indexOf(button);
+                const next = event.key === "ArrowRight" ? (index + 1) % buttons.length : event.key === "ArrowLeft" ? (index + buttons.length - 1) % buttons.length : event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : -1;
+                if (next >= 0) {
+                    event.preventDefault();
+                    buttons[next].click();
+                    buttons[next].focus();
+                }
+            };
+            tabs.append(button);
+        }
+        const content = document.createElement("div");
+        content.setAttribute("part", "pane-content");
+        content.setAttribute("role", "tabpanel");
+        content.id = "process-pane-content";
+        heading.after(tabs);
+        inspector.append(content);
+        root.querySelector('[part=checks]').removeAttribute("role");
+        const canvas = root.querySelector('[part=canvas]');
+        const hold = document.createElement('div');
+        hold.setAttribute('part', 'hold');
+        hold.setAttribute('role', 'status');
+        hold.hidden = true;
+        const holdText = document.createElement('span');
+        holdText.setAttribute('part', 'hold-text');
+        const showChecks = document.createElement('button');
+        showChecks.type = 'button';
+        showChecks.textContent = 'Show checks';
+        showChecks.onclick = () => { this.select(null); this.activePane = 'Checks'; this.renderPane(); if (this.narrowValue)
+            promoteModal(root.querySelector('[part=pane-drawer][data-pane=inspector]')); root.querySelector('#process-tab-checks')?.focus(); };
+        hold.append(holdText, showChecks);
+        canvas.append(hold);
+        const controls = document.createElement("div");
+        controls.setAttribute("part", "controls");
+        controls.setAttribute("role", "toolbar");
+        controls.setAttribute("aria-label", "Canvas view controls");
+        for (const command of ["zoom-out", "reset", "zoom-in", "fit", "snap", "lock"]) {
+            const button = root.querySelector(`[data-command=${command}]`);
+            if (button)
+                controls.append(button);
+        }
+        canvas.append(controls);
+        const commandIcons = {
+            "zoom-out": '<circle cx="12" cy="12" r="9"/><path d="M8 12h8"/>',
+            "zoom-in": '<circle cx="12" cy="12" r="9"/><path d="M8 12h8m-4-4v8"/>',
+            fit: '<path d="M4 9V4h5m6 0h5v5m0 6v5h-5m-6 0H4v-5"/>',
+            snap: '<circle cx="5" cy="5" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="19" cy="5" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="19" r="1"/><circle cx="12" cy="19" r="1"/><circle cx="19" cy="19" r="1"/>',
+            lock: '<rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/>',
+            undo: '<path d="M9 7 4 12l5 5M4 12h10a6 6 0 0 1 6 6"/>',
+            redo: '<path d="m15 7 5 5-5 5m5-5H10a6 6 0 0 0-6 6"/>',
+        };
+        for (const [command, path] of Object.entries(commandIcons)) {
+            const button = root.querySelector(`[data-command=${command}]`);
+            const label = button.textContent ?? command;
+            button.setAttribute("aria-label", label);
+            button.title = label;
+            button.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${path}</svg><span part="sr-only">${label}</span>`;
         }
-        this.shadowRoot.querySelector("[part=toolbar]").addEventListener("click", (event) => {
+        const floating = document.createElement("div");
+        floating.setAttribute("part", "selection-toolbar");
+        floating.setAttribute("role", "toolbar");
+        floating.setAttribute("aria-label", "Selected steps");
+        canvas.append(floating);
+        if (typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver(entries => {
+                const narrow = entries[0].contentRect.width < 900;
+                this.narrowValue = narrow;
+                this.toggleAttribute("data-narrow", narrow);
+                this.toggleAttribute('data-phone', entries[0].contentRect.width < 560);
+                this.renderSelectionToolbar();
+                this.positionSelectionToolbar();
+                if (!narrow)
+                    root.querySelectorAll('[part=pane-drawer]').forEach(dialog => dismissModal(dialog));
+            });
+            this.resizeObserver.observe(this);
+        }
+    }
+    renderPane() {
+        if (!this.isRendered)
+            return;
+        const root = this.shadowRoot;
+        const selected = this.selected;
+        root.querySelector('[part=process-title]').textContent = this.selectedIds.size > 1 ? `${this.selectedIds.size} steps selected` : selected?.title ?? this.processTitleValue;
+        root.querySelector('[part=process-summary]').textContent = this.selectedIds.size > 1 ? 'Arrange or group these steps' : selected ? this.catalog.find(kind => kind.kind === selected.kind)?.label ?? selected.kind : this.processSummaryValue;
+        root.querySelector('[part=pane-tabs]').hidden = Boolean(selected);
+        root.querySelectorAll('[part=pane-tabs] button').forEach(button => {
+            button.textContent = button.dataset.pane === "Checks" ? `Checks ${this.allChecks.length}` : button.dataset.pane ?? "";
+            const selected = button.dataset.pane === this.activePane;
+            button.setAttribute("aria-selected", String(selected));
+            button.tabIndex = selected ? 0 : -1;
+        });
+        const content = root.querySelector('[part=pane-content]');
+        content.hidden = Boolean(selected);
+        content.setAttribute("aria-labelledby", `process-tab-${this.activePane.toLowerCase()}`);
+        const checks = root.querySelector('[part=checks]');
+        checks.hidden = this.activePane !== "Checks";
+        // Move the checks node out before replacing its parent; keep its handlers.
+        root.querySelector('[part=inspector]').append(checks);
+        content.replaceChildren();
+        root.querySelector('[part=editor]').hidden = !selected;
+        if (this.activePane === "Outline") {
+            const intro = document.createElement("p");
+            intro.setAttribute("part", "outline-intro");
+            intro.textContent = "The process as numbered steps, written from the diagram. Share it as documentation or read it aloud.";
+            content.append(intro);
+            const fallback = this.projection.boxes.map(box => ({ title: box.title, description: box.description, boxId: box.id }));
+            const outline = this.outlineValue.length ? this.outlineValue : fallback;
+            const copy = document.createElement('button');
+            copy.type = 'button';
+            copy.setAttribute('part', 'copy-outline');
+            copy.textContent = 'Copy as text';
+            copy.onclick = () => {
+                const lines = [];
+                const walk = (items, depth) => items.forEach((item, index) => { lines.push(`${'  '.repeat(depth)}${index + 1}. ${item.title}${item.description ? ` — ${item.description}` : ''}`); if (item.children)
+                    walk(item.children, depth + 1); });
+                walk(outline, 0);
+                const value = lines.join('\n');
+                emit(this, 'outline-copy-request', { text: value });
+                void navigator.clipboard?.writeText(value).then(() => this.setStatus('Outline copied')).catch(() => this.setStatus('Use your host copy action to copy the outline'));
+            };
+            content.append(copy);
+            const appendOutline = (items, parent) => {
+                const list = document.createElement("ol");
+                list.setAttribute("part", "outline-list");
+                for (const item of items) {
+                    const row = document.createElement("li");
+                    const label = document.createElement(item.boxId ? "button" : "strong");
+                    label.textContent = item.title;
+                    if (item.boxId && label instanceof HTMLButtonElement) {
+                        label.type = "button";
+                        label.setAttribute("aria-current", String(this.selectedIds.has(item.boxId)));
+                        label.onclick = () => { this.select(item.boxId); this.focusBox(item.boxId); };
+                    }
+                    row.append(label);
+                    if (item.description) {
+                        const detail = document.createElement("p");
+                        detail.textContent = item.description;
+                        row.append(detail);
+                    }
+                    if (item.children?.length)
+                        appendOutline(item.children, row);
+                    list.append(row);
+                }
+                parent.append(list);
+            };
+            appendOutline(outline, content);
+        }
+        else if (this.activePane === "Checks") {
+            content.append(checks);
+            if (!this.allChecks.length) {
+                const message = document.createElement("p");
+                message.textContent = "No checks to resolve.";
+                content.prepend(message);
+            }
+        }
+        else if (this.activePane === "Variables") {
+            if (!this.variables.length)
+                content.textContent = 'No variables supplied by the host.';
+            for (const variable of this.variables) {
+                const row = document.createElement('div');
+                row.setAttribute('part', 'variable-row');
+                const heading = document.createElement('strong');
+                heading.textContent = variable.name;
+                row.append(heading);
+                if (variable.scope) {
+                    const scope = document.createElement('span');
+                    scope.textContent = variable.scope;
+                    scope.setAttribute('part', 'variable-scope');
+                    row.append(scope);
+                }
+                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 input = document.createElement('input');
+                    input.type = 'text';
+                    input.dataset.variable = variable.name;
+                    input.value = variable.startingValue;
+                    input.disabled = this.locked;
+                    input.setAttribute('aria-invalid', String(Boolean(variable.problem)));
+                    input.addEventListener('input', () => emit(this, 'process-variable-change-request', { name: variable.name, value: input.value }));
+                    label.append(input);
+                    row.append(label);
+                }
+                if (variable.problem) {
+                    const problem = document.createElement('p');
+                    problem.setAttribute('part', 'field-problem');
+                    problem.textContent = variable.problem;
+                    row.append(problem);
+                }
+                content.append(row);
+            }
+        }
+        else if (this.activePane === "Connections") {
+            if (!this.connections.length)
+                content.textContent = 'No connections supplied by the host.';
+            for (const connection of this.connections) {
+                const row = document.createElement('div');
+                row.setAttribute('part', 'connection-row');
+                const name = document.createElement('strong');
+                name.textContent = connection.name;
+                const kind = document.createElement('span');
+                kind.textContent = `(${connection.kind})${connection.signIn ? ` · ${connection.signIn}` : ''}`;
+                row.append(name, document.createTextNode(' '), kind);
+                content.append(row);
+            }
+            const setup = document.createElement('button');
+            setup.type = 'button';
+            setup.textContent = 'Manage connections';
+            setup.onclick = () => emit(this, 'connection-setup-request', {});
+            content.append(setup);
+        }
+        else if (this.activePane === "Shortcuts") {
+            content.textContent = "Tab: move between steps. Alt+arrows: select the nearest step that way. Arrows: move one grid square. Shift+arrows: move four. N: add the next step. Ctrl+Alt+arrows: add in a direction. Enter: edit. Delete: remove. Ctrl/Command+A: select all. Ctrl/Command+C/V/D: copy, paste, duplicate. Ctrl/Command+Z and Shift+Ctrl/Command+Z: undo and redo. Shift+1: fit the whole process. Shift+drag: select a region. Drag a port: connect. Escape: cancel.";
+        }
+    }
+    selectionCommand(command) {
+        if (this.locked)
+            return;
+        const boxes = this.selectedBoxes;
+        if (command === "delete-many") {
+            for (const box of boxes)
+                this.requestEdit({ type: "delete", boxId: box.id });
+            return;
+        }
+        this.arrangeSelection(command === 'align' ? 'top' : 'distribute-horizontal');
+    }
+    arrangeSelection(action) {
+        if (this.locked || this.selectedBoxes.length < 2)
+            return;
+        const boxes = this.selectedBoxes;
+        const next = this.layout;
+        const sorted = [...boxes].filter(box => {
+            let parent = box.parentId;
+            while (parent) {
+                if (this.selectedIds.has(parent))
+                    return false;
+                parent = this.projection.boxes.find(box => box.id === parent)?.parentId;
+            }
+            return true;
+        });
+        if (sorted.length < 2)
+            return;
+        const width = (box) => next.boxes[box.id].width ?? (box.shape === 'gateway' || box.shape === 'event' ? 56 : 224);
+        const height = (box) => next.boxes[box.id].height ?? (box.shape === 'gateway' || box.shape === 'event' ? 56 : 64);
+        const minX = Math.min(...sorted.map(box => next.boxes[box.id].x));
+        const maxX = Math.max(...sorted.map(box => next.boxes[box.id].x + width(box)));
+        const minY = Math.min(...sorted.map(box => next.boxes[box.id].y));
+        const maxY = Math.max(...sorted.map(box => next.boxes[box.id].y + height(box)));
+        const ordered = [...sorted].sort((a, b) => action === 'distribute-vertical' ? next.boxes[a.id].y - next.boxes[b.id].y : next.boxes[a.id].x - next.boxes[b.id].x);
+        const starts = ordered.map(box => action === 'distribute-vertical' ? next.boxes[box.id].y : next.boxes[box.id].x);
+        for (const box of sorted) {
+            const position = next.boxes[box.id];
+            const index = ordered.indexOf(box);
+            const x = action === 'left' ? minX : action === 'center' ? (minX + maxX - width(box)) / 2 : action === 'right' ? maxX - width(box) : action === 'distribute-horizontal' ? starts[0] + index * (starts.at(-1) - starts[0]) / (ordered.length - 1) : position.x;
+            const y = action === 'top' ? minY : action === 'middle' ? (minY + maxY - height(box)) / 2 : action === 'bottom' ? maxY - height(box) : action === 'distribute-vertical' ? starts[0] + index * (starts.at(-1) - starts[0]) / (ordered.length - 1) : position.y;
+            const dx = x - position.x, dy = y - position.y;
+            const group = new Set([box.id]);
+            for (let changed = true; changed;) {
+                changed = false;
+                for (const candidate of this.projection.boxes)
+                    if (candidate.parentId && group.has(candidate.parentId) && !group.has(candidate.id)) {
+                        group.add(candidate.id);
+                        changed = true;
+                    }
+            }
+            for (const id of group)
+                next.boxes[id] = { ...next.boxes[id], x: next.boxes[id].x + dx, y: next.boxes[id].y + dy };
+        }
+        if (emit(this, "move-request", { boxId: sorted[0].id, position: next.boxes[sorted[0].id], boxIds: sorted.map(box => box.id), positions: next.boxes }))
+            this.commitLayout(next);
+    }
+    makeSection(title = 'New section') {
+        if (this.locked || 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;
+        const y = Math.min(...positions.map(position => position.y)) - 48;
+        const right = Math.max(...positions.map(position => position.x + (position.width ?? 224))) + 24;
+        const bottom = Math.max(...positions.map(position => position.y + (position.height ?? 64))) + 24;
+        const id = `section-${++this.sectionSequence}`;
+        this.setSection({ id, title, x, y, width: right - x, height: bottom - y });
+    }
+    setupListeners() {
+        this.shadowRoot.addEventListener("click", (event) => {
             const command = event.target.closest("button")?.dataset.command;
             if (command === "zoom-in")
                 this.zoomBy(1.2);
@@ -389,16 +971,19 @@ export class ProcessModeler extends BaseElement {
                 this.snapToGrid = !this.snapToGrid;
             else if (command === "lock")
                 this.locked = !this.locked;
-            else if (command === "connect" && this.selected && !this.locked) {
+            else if (command === "connect" && this.selected && !this.locked && !this.disableConnections) {
                 this.connecting = this.selected.id;
                 this.setStatus(`Select the next box to connect from ${this.selected.title}`);
             }
             else if (command === "delete" && this.selected)
-                this.requestEdit({ type: "delete", boxId: this.selected.id });
+                this.selectionCommand("delete-many");
         });
         this.shadowRoot.querySelector("[part=search]").addEventListener("input", () => this.renderPalette());
         const canvas = this.shadowRoot.querySelector("[part=canvas]");
         canvas.addEventListener("keydown", (event) => this.onKey(event));
+        canvas.addEventListener('keyup', event => { if (event.key === ' ')
+            this.spacePressed = false; });
+        canvas.addEventListener('blur', () => { this.spacePressed = false; }, true);
         canvas.addEventListener("wheel", (event) => {
             event.preventDefault();
             if (event.ctrlKey || event.metaKey)
@@ -413,6 +998,11 @@ export class ProcessModeler extends BaseElement {
         canvas.addEventListener("pointermove", (event) => this.pointerMove(event));
         canvas.addEventListener("pointerup", (event) => this.pointerEnd(event, true));
         canvas.addEventListener("pointercancel", (event) => this.pointerEnd(event, false));
+        canvas.addEventListener("lostpointercapture", event => {
+            // Touch transfers implicit box capture to the canvas during a drag.
+            if (event.target === canvas)
+                this.pointerEnd(event, false);
+        });
         canvas.addEventListener("gesturestart", (event) => {
             event.preventDefault();
             this.gestureZoom = this.viewport.zoom;
@@ -467,9 +1057,19 @@ export class ProcessModeler extends BaseElement {
         });
     }
     onKey(event) {
-        if (event.target.closest("input,textarea,select,[contenteditable]"))
+        if (event.defaultPrevented)
             return;
+        const target = event.target;
+        if (target.closest("input,textarea,select,[contenteditable],button,summary"))
+            return;
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.spacePressed = true;
+            return;
+        }
         if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+            if (this.locked || !(event.shiftKey ? this.history.canRedo : this.history.canUndo))
+                return;
             event.preventDefault();
             if (event.shiftKey)
                 this.redo();
@@ -477,22 +1077,87 @@ export class ProcessModeler extends BaseElement {
                 this.undo();
             return;
         }
+        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`);
+            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`);
+            return;
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v' && this.clipboardIds.length && !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) } }); });
+            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 } }); });
+            return;
+        }
         if (event.key === "Escape") {
             this.connecting = null;
+            this.pendingReattach = undefined;
+            if (this.selectedLineId)
+                this.selectLine(null);
+            this.portDrag = undefined;
+            this.marquee = undefined;
+            this.segmentDrag = undefined;
+            this.drag = undefined;
+            this.pointers.clear();
+            this.refresh();
             this.setStatus("Connecting cancelled");
             return;
         }
+        if (event.shiftKey && (event.key === "1" || event.key === "!" || event.code === "Digit1")) {
+            event.preventDefault();
+            this.fit();
+            this.setStatus("Whole process fitted to the canvas");
+            return;
+        }
         const box = this.selected;
+        if (this.selectedLine && (event.key === 'Delete' || event.key === 'Backspace') && !this.locked && !this.disableConnections) {
+            event.preventDefault();
+            this.requestEdit({ type: 'disconnect', lineId: this.selectedLine.id });
+            return;
+        }
+        if ((event.key === "n" || event.key === "N") && !this.locked && this.catalog.length) {
+            event.preventDefault();
+            this.openChooser({ type: "add", ...(box ? { from: box.id } : {}) });
+            return;
+        }
         if (!box || this.locked)
             return;
-        if (event.key.toLowerCase() === "c") {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            this.activePane = "Outline";
+            this.renderPane();
+            const editor = this.shadowRoot.querySelector('[part=editor]');
+            if (this.narrowValue)
+                promoteModal(this.shadowRoot.querySelector('[part=pane-drawer][data-pane=inspector]'));
+            const field = editor.querySelector('input,select,textarea,button,[contenteditable]');
+            if (field)
+                field.focus();
+            else {
+                const heading = editor.querySelector('[part=inspector-heading]');
+                heading?.setAttribute('tabindex', '-1');
+                heading?.focus();
+            }
+            return;
+        }
+        if (event.key.toLowerCase() === "c" && !this.disableConnections) {
             event.preventDefault();
             this.connecting = box.id;
             this.setStatus(`Select the next box to connect from ${box.title}`);
         }
         if (event.key === "Delete" || event.key === "Backspace") {
             event.preventDefault();
-            this.requestEdit({ type: "delete", boxId: box.id });
+            this.selectionCommand("delete-many");
         }
         const direction = {
             ArrowLeft: [-1, 0],
@@ -502,15 +1167,80 @@ export class ProcessModeler extends BaseElement {
         }[event.key];
         if (direction) {
             event.preventDefault();
+            if (event.ctrlKey && event.altKey && this.catalog.length && !this.disableConnections) {
+                const side = direction[0] < 0 ? "west" : direction[0] > 0 ? "east" : direction[1] < 0 ? "north" : "south";
+                const pos = this.layoutValue.boxes[box.id];
+                this.openChooser({ type: "add", from: box.id, fromSide: side, position: { x: pos.x + direction[0] * 320, y: pos.y + direction[1] * 170 } });
+                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 ? 100 : this.snapToGrid ? 20 : 10;
+            const distance = event.shiftKey ? 64 : 16;
             this.move(box.id, pos.x + direction[0] * distance, pos.y + direction[1] * distance);
             this.focusBox(box.id);
         }
     }
     pointerDown(event) {
+        if (event.button !== 0)
+            return;
+        this.suppressClick = false;
+        if (this.portDrag || this.endDrag || this.segmentDrag || this.marquee || this.frameResize)
+            return;
+        const resize = event.target.closest('[part=frame-resize]');
+        if (resize && !this.locked) {
+            event.preventDefault();
+            event.stopPropagation();
+            const id = resize.dataset.owner;
+            const position = this.layoutValue.boxes[id];
+            this.frameResize = { pointerId: event.pointerId, id, start: this.canvasPoint(event), width: position.width ?? 224, height: position.height ?? 64 };
+            this.shadowRoot.querySelector('[part=canvas]').setPointerCapture?.(event.pointerId);
+            return;
+        }
+        const grip = event.target.closest('[part=end-grip]');
+        if (grip && !this.locked && !this.disableConnections) {
+            event.preventDefault();
+            const point = this.canvasPoint(event);
+            this.endDrag = { pointerId: event.pointerId, lineId: grip.dataset.lineId, end: grip.dataset.end, start: point, point };
+            this.shadowRoot.querySelector('[part=canvas]').setPointerCapture?.(event.pointerId);
+            return;
+        }
+        const control = event.target.closest("[part=port]");
+        if (control && !this.locked && !this.disableConnections) {
+            event.preventDefault();
+            const point = this.canvasPoint(event);
+            this.portDrag = { pointerId: event.pointerId, id: control.dataset.owner, side: control.dataset.side, start: point, point };
+            this.shadowRoot.querySelector('[part=canvas]').setPointerCapture?.(event.pointerId);
+            return;
+        }
+        const segment = event.target.closest("[data-segment]");
+        if (segment && !this.locked) {
+            const line = this.projection.lines.find(line => line.id === segment.dataset.lineId);
+            this.selectLine(line.id);
+            this.segmentDrag = { pointerId: event.pointerId, id: line.id, index: Number(segment.dataset.segment), points: routeProcessLine(line, this.layoutValue, this.projection) };
+            this.shadowRoot.querySelector('[part=canvas]').setPointerCapture?.(event.pointerId);
+            event.preventDefault();
+            return;
+        }
         if (event.button !== 0 ||
-            event.target.closest("[part=connection]"))
+            event.target.closest("[part=connection],button,input,select,textarea,[contenteditable]"))
             return;
         this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
         if (this.pointers.size === 2) {
@@ -522,9 +1252,17 @@ export class ProcessModeler extends BaseElement {
         const target = event.target.closest("[data-box-id]");
         const id = target?.dataset.boxId;
         const canvas = this.shadowRoot.querySelector("[part=canvas]");
-        (target ?? canvas).setPointerCapture?.(event.pointerId);
+        if (id && !this.spacePressed && !this.selectedIds.has(id) && !event.shiftKey)
+            this.select(id);
+        if (!id && event.shiftKey && !this.locked) {
+            const point = this.canvasPoint(event);
+            this.marquee = { pointerId: event.pointerId, start: point, point };
+            canvas.setPointerCapture?.(event.pointerId);
+            event.preventDefault();
+            return;
+        }
         this.drag = {
-            id: this.locked ? undefined : id,
+            id: this.locked || this.spacePressed ? undefined : id,
             x: event.clientX,
             y: event.clientY,
             position: id ? { ...this.layoutValue.boxes[id] } : undefined,
@@ -537,6 +1275,78 @@ export class ProcessModeler extends BaseElement {
         return a && b ? Math.hypot(a.x - b.x, a.y - b.y) : 0;
     }
     pointerMove(event) {
+        const gesture = this.portDrag ?? this.endDrag ?? this.segmentDrag ?? this.marquee ?? this.frameResize;
+        if (gesture && gesture.pointerId !== event.pointerId)
+            return;
+        const point = this.canvasPoint(event);
+        if (this.frameResize) {
+            const resize = this.frameResize;
+            const element = Array.from(this.shadowRoot.querySelectorAll('[part=frame]')).find(frame => frame.dataset.boxId === resize.id);
+            if (element) {
+                element.style.width = `${Math.max(120, resize.width + point.x - resize.start.x)}px`;
+                element.style.height = `${Math.max(64, resize.height + point.y - resize.start.y)}px`;
+            }
+            return;
+        }
+        if (this.portDrag) {
+            this.portDrag.point = point;
+            let ghost = this.shadowRoot.querySelector('[part=connection-preview]');
+            if (!ghost) {
+                ghost = svgElement("polyline");
+                ghost.setAttribute("part", "connection-preview");
+                ghost.style.cssText = "fill:none;stroke:var(--boe-token-surface-surface-brand,#0061d5);stroke-width:3";
+                this.shadowRoot.querySelector('[part=lines]').append(ghost);
+            }
+            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); });
+            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 on a step to connect', !target);
+            return;
+        }
+        if (this.endDrag) {
+            this.endDrag.point = point;
+            let ghost = this.shadowRoot.querySelector('[part=connection-preview]');
+            if (!ghost) {
+                ghost = svgElement('polyline');
+                ghost.setAttribute('part', 'connection-preview');
+                this.shadowRoot.querySelector('[part=lines]').append(ghost);
+            }
+            const points = this.routedLines.get(this.endDrag.lineId);
+            const fixed = this.endDrag.end === 'from' ? points?.at(-1) : points?.[0];
+            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); });
+            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');
+            return;
+        }
+        if (this.segmentDrag) {
+            const { index, points } = this.segmentDrag;
+            if (points[index].x === points[index + 1].x)
+                points[index].x = points[index + 1].x = point.x;
+            else
+                points[index].y = points[index + 1].y = point.y;
+            const path = Array.from(this.shadowRoot.querySelectorAll('[part=line]')).find(path => path.dataset.lineId === this.segmentDrag.id);
+            path?.setAttribute("d", roundedProcessPath(points));
+            return;
+        }
+        if (this.marquee) {
+            this.marquee.point = point;
+            let region = this.shadowRoot.querySelector('[part=marquee]');
+            if (!region) {
+                region = document.createElement("div");
+                region.setAttribute("part", "marquee");
+                this.shadowRoot.querySelector('[part=world]').append(region);
+            }
+            this.place(region, { x: Math.min(point.x, this.marquee.start.x), y: Math.min(point.y, this.marquee.start.y), width: Math.abs(point.x - this.marquee.start.x), height: Math.abs(point.y - this.marquee.start.y) });
+            return;
+        }
         if (!this.pointers.has(event.pointerId))
             return;
         this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
@@ -551,11 +1361,16 @@ export class ProcessModeler extends BaseElement {
             return;
         const dx = event.clientX - this.drag.x;
         const dy = event.clientY - this.drag.y;
+        if (Math.hypot(dx, dy) <= 4)
+            return;
+        this.shadowRoot.querySelector('[part=canvas]').setPointerCapture?.(event.pointerId);
         if (this.drag.id && this.drag.position) {
             const element = Array.from(this.shadowRoot.querySelectorAll("[data-box-id]")).find((box) => box.dataset.boxId === this.drag.id);
             if (element) {
-                element.style.left = `${this.drag.position.x + dx / this.viewport.zoom}px`;
-                element.style.top = `${this.drag.position.y + dy / this.viewport.zoom}px`;
+                const position = this.alignedPoint(this.drag.id, this.drag.position.x + dx / this.viewport.zoom, this.drag.position.y + dy / this.viewport.zoom);
+                element.style.left = `${position.x}px`;
+                element.style.top = `${position.y}px`;
+                this.markDropLine(point, this.drag.id);
             }
         }
         else {
@@ -565,6 +1380,82 @@ export class ProcessModeler extends BaseElement {
         }
     }
     pointerEnd(event, commit) {
+        const gesture = this.portDrag ?? this.endDrag ?? this.segmentDrag ?? this.marquee ?? this.frameResize;
+        if (gesture && gesture.pointerId !== event.pointerId)
+            return;
+        const point = this.canvasPoint(event);
+        if (this.frameResize) {
+            const resize = this.frameResize;
+            this.frameResize = undefined;
+            if (commit)
+                this.resize(resize.id, resize.width + point.x - resize.start.x, resize.height + point.y - resize.start.y);
+            else
+                this.refresh();
+            return;
+        }
+        if (this.portDrag) {
+            const port = this.portDrag;
+            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('[part=port]').forEach(port => { delete port.dataset.hot; });
+            if (commit) {
+                if (Math.hypot(point.x - port.start.x, point.y - port.start.y) < 8) {
+                    const pos = this.layoutValue.boxes[port.id];
+                    const offsets = { east: [320, 0], west: [-320, 0], north: [0, -170], south: [0, 170] }[port.side];
+                    this.openChooser({ type: "add", from: port.id, fromSide: port.side, position: { x: pos.x + offsets[0], y: pos.y + offsets[1] } });
+                }
+                else {
+                    const target = this.boxAt(point, port.id);
+                    if (target)
+                        this.requestEdit({ type: "connect", from: port.id, to: target.id, fromSide: port.side, toSide: this.sideAt(target, point) });
+                }
+            }
+            return;
+        }
+        if (this.endDrag) {
+            const drag = this.endDrag;
+            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('[part=port]').forEach(port => { delete port.dataset.hot; });
+            if (commit) {
+                if (Math.hypot(point.x - drag.start.x, point.y - drag.start.y) < 8) {
+                    this.pendingReattach = { lineId: drag.lineId, end: drag.end };
+                    this.setStatus('Select a step to reattach the connection');
+                }
+                else {
+                    const target = this.boxAt(point);
+                    if (target)
+                        this.requestEdit({ type: 'reattach', lineId: drag.lineId, [drag.end]: target.id, [drag.end === 'from' ? 'fromSide' : 'toSide']: this.sideAt(target, point) });
+                    else
+                        this.setStatus('Connection unchanged. Drop on a step to reattach.');
+                }
+            }
+            return;
+        }
+        if (this.segmentDrag) {
+            const segment = this.segmentDrag;
+            this.segmentDrag = undefined;
+            if (commit)
+                this.routeLine(segment.id, segment.points.slice(1, -1));
+            else
+                this.refresh();
+            return;
+        }
+        if (this.marquee) {
+            const { start } = this.marquee;
+            this.marquee = undefined;
+            if (commit)
+                this.selectMany(this.projection.boxes.filter(box => { const p = this.layoutValue.boxes[box.id]; return p.x < Math.max(start.x, point.x) && p.x + (p.width ?? 224) > Math.min(start.x, point.x) && p.y < Math.max(start.y, point.y) && p.y + (p.height ?? 64) > Math.min(start.y, point.y); }).map(box => box.id));
+            this.shadowRoot.querySelector('[part=marquee]')?.remove();
+            this.pointers.delete(event.pointerId);
+            return;
+        }
+        if (!this.pointers.has(event.pointerId))
+            return;
         this.pointers.delete(event.pointerId);
         const drag = this.drag;
         this.drag = undefined;
@@ -572,22 +1463,191 @@ export class ProcessModeler extends BaseElement {
         if (drag?.id && drag.position) {
             const dx = event.clientX - drag.x;
             const dy = event.clientY - drag.y;
-            if (commit && Math.hypot(dx, dy) > 4)
-                this.move(drag.id, drag.position.x + dx / this.viewport.zoom, drag.position.y + dy / this.viewport.zoom);
+            if (commit && Math.hypot(dx, dy) > 4) {
+                this.suppressClick = true;
+                const position = this.alignedPoint(drag.id, drag.position.x + dx / this.viewport.zoom, drag.position.y + dy / this.viewport.zoom);
+                const line = this.lineAt(point, drag.id);
+                const frame = this.boxAt(point, drag.id, true);
+                if (line)
+                    this.requestEdit({ type: "insert", boxId: drag.id, lineId: line.id, from: line.from, to: line.to, position });
+                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)) {
+                    const next = this.layout;
+                    const dx = position.x - drag.position.x;
+                    const dy = position.y - drag.position.y;
+                    const 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;
+                            }
+                    }
+                    const primary = next.boxes[drag.id];
+                    const shiftX = this.snapToGrid ? Math.round((primary.x + dx) / 16) * 16 - primary.x : dx;
+                    const shiftY = this.snapToGrid ? Math.round((primary.y + dy) / 16) * 16 - primary.y : dy;
+                    for (const id of moved)
+                        next.boxes[id] = { ...next.boxes[id], x: next.boxes[id].x + shiftX, y: next.boxes[id].y + shiftY };
+                    if (emit(this, "move-request", { boxId: drag.id, position: next.boxes[drag.id], boxIds: [...moved], positions: next.boxes }))
+                        this.commitLayout(next);
+                }
+                else
+                    this.move(drag.id, position.x, position.y);
+            }
             else if (!commit)
                 this.refresh();
         }
+        this.shadowRoot.querySelectorAll('[part=guide],[part=measure]').forEach(element => element.remove());
+        this.markDropLine(undefined);
+        if (drag?.id && (!commit || Math.hypot(event.clientX - drag.x, event.clientY - drag.y) > 4))
+            this.refresh();
+    }
+    canvasPoint(event) {
+        const rect = this.shadowRoot.querySelector('[part=canvas]').getBoundingClientRect();
+        return { x: (event.clientX - rect.left - this.viewport.x) / this.viewport.zoom, y: (event.clientY - rect.top - this.viewport.y) / this.viewport.zoom };
+    }
+    boxAt(point, except, frameOnly = false) {
+        return [...this.projection.boxes].reverse().find(box => {
+            if (box.id === except || (frameOnly && !box.frame))
+                return false;
+            // A frame cannot be dropped inside its own descendants.
+            let parent = box.parentId;
+            while (parent) {
+                if (parent === except)
+                    return false;
+                parent = this.projection.boxes.find(b => b.id === parent)?.parentId;
+            }
+            const p = this.layoutValue.boxes[box.id];
+            return point.x >= p.x - 12 && point.x <= p.x + (p.width ?? 224) + 12 && point.y >= p.y - 12 && point.y <= p.y + (p.height ?? 64) + 12;
+        });
+    }
+    sideAt(box, point) {
+        const p = this.layoutValue.boxes[box.id];
+        const width = p.width ?? 224;
+        const height = p.height ?? 64;
+        const sides = [['north', p.x + width / 2, p.y], ['east', p.x + width, p.y + height / 2], ['south', p.x + width / 2, p.y + height], ['west', p.x, p.y + height / 2]];
+        return sides.find(([, x, y]) => Math.hypot(point.x - x, point.y - y) <= 12 / this.viewport.zoom)?.[0];
+    }
+    lineAt(point, except) {
+        return this.projection.lines.find(line => line.from !== except && line.to !== except && nearProcessLine(point, this.routedLines.get(line.id) ?? [], 16 / this.viewport.zoom));
+    }
+    markDropLine(point, except) {
+        this.dropLine = point ? this.lineAt(point, except)?.id : undefined;
+        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) {
+        const world = this.shadowRoot.querySelector('[part=world]');
+        world.querySelectorAll('[part=guide],[part=measure]').forEach(element => element.remove());
+        for (const box of this.projection.boxes) {
+            if (box.id === id)
+                continue;
+            const p = this.layoutValue.boxes[box.id];
+            for (const axis of ["x", "y"]) {
+                const value = axis === "x" ? x : y;
+                if (Math.abs(value - p[axis]) < 8 / this.viewport.zoom) {
+                    if (axis === "x")
+                        x = p.x;
+                    else
+                        y = p.y;
+                    const guide = document.createElement("div");
+                    guide.setAttribute("part", "guide");
+                    guide.style.cssText = axis === "x" ? `left:${x}px;top:${Math.min(y, p.y)}px;width:1px;height:${Math.abs(y - p.y) + 64}px` : `left:${Math.min(x, p.x)}px;top:${y}px;height:1px;width:${Math.abs(x - p.x) + 224}px`;
+                    world.append(guide);
+                }
+            }
+            if (Math.abs(y - p.y) < 8) {
+                const distance = x - p.x - (p.width ?? 224);
+                if (distance > 0) {
+                    const measure = document.createElement("span");
+                    measure.setAttribute("part", "measure");
+                    measure.textContent = `${Math.round(distance)}px`;
+                    measure.style.cssText = `left:${p.x + (p.width ?? 224)}px;top:${y + 40}px`;
+                    world.append(measure);
+                }
+            }
+        }
+        return { x, y };
+    }
+    openChooser(edit) {
+        this.insertion = edit;
+        const chooser = this.shadowRoot.querySelector('[part=insert-chooser]');
+        this.shadowRoot.querySelector('[part=ghost-box]')?.remove();
+        if ('position' in edit && edit.position) {
+            const ghost = document.createElement('div');
+            ghost.setAttribute('part', 'ghost-box');
+            ghost.textContent = edit.kind?.label ?? 'New step';
+            this.place(ghost, { ...edit.position, width: 224, height: 64 });
+            this.shadowRoot.querySelector('[part=world]')?.append(ghost);
+        }
+        chooser.addEventListener('close', () => this.shadowRoot?.querySelector('[part=ghost-box]')?.remove(), { once: true });
+        const picker = chooser.querySelector('box-kind-picker');
+        picker.catalog = this.catalog.filter(kind => !kind.placement);
+        picker.refresh();
+        promoteModal(chooser);
+        picker.focus();
+    }
+    addLayoutKind(kind, point) {
+        const canvas = this.shadowRoot.querySelector('[part=canvas]');
+        const position = point ?? { x: (canvas.clientWidth / 2 - this.viewport.x) / this.viewport.zoom, y: (canvas.clientHeight / 2 - this.viewport.y) / this.viewport.zoom };
+        const id = `${kind.placement}-${++this.sectionSequence}`;
+        if (kind.placement === 'note')
+            this.setNote({ id, text: kind.label, x: position.x, y: position.y });
+        if (kind.placement === 'section')
+            this.setSection({ id, title: kind.label, description: '', x: position.x, y: position.y, width: 320, height: 240 });
+    }
+    showConnectTooltip(point, message, invalid = false) {
+        const world = this.shadowRoot.querySelector('[part=world]');
+        let tooltip = world.querySelector('[part=connect-tooltip]');
+        if (!tooltip) {
+            tooltip = document.createElement('div');
+            tooltip.setAttribute('part', 'connect-tooltip');
+            world.append(tooltip);
+        }
+        tooltip.textContent = message;
+        tooltip.dataset.invalid = String(invalid);
+        tooltip.style.left = `${point.x + 16}px`;
+        tooltip.style.top = `${point.y + 16}px`;
     }
     update() {
+        const selectionBefore = JSON.stringify({ ids: [...this.selectedIds], path: this.selectedPath });
         if (this.documentValue !== undefined) {
             this.projection = this.model.project(this.documentValue);
             validateProjection(this.projection);
         }
         else
             this.projection = { boxes: [], lines: [] };
-        this.layoutValue = completeLayout(this.projection, this.layoutValue);
+        this.layoutValue = this.arrangedLayout(this.layoutValue);
+        this.routedLines = new Map(this.projection.lines.map(line => [line.id, routeProcessLine(line, this.layoutValue, this.projection)]));
+        this.computedChecks = this.collectChecks();
         if (this.selectedId && !this.selected)
             this.selectedId = null;
+        if (this.selectedLineId && !this.selectedLine)
+            this.selectedLineId = null;
+        this.selectedIds = new Set([...this.selectedIds].filter(id => this.projection.boxes.some(box => box.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 })),
+            lines: this.projection.lines,
+        });
+        if (serialized !== this.lastProjection || this.documentValue !== this.lastDocument) {
+            if (this.lastProjection)
+                this.versionValue = typeof this.versionValue === "number" ? this.versionValue + 1 : `${this.versionValue}+1`;
+            this.lastProjection = serialized;
+            this.lastDocument = this.documentValue;
+            emit(this, "projection-changed", { projection: 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.
+        if (this.allChecks.length)
+            this.lastReadableProjection = "";
+        if (!this.allChecks.length && serialized !== this.lastReadableProjection) {
+            this.lastReadableProjection = serialized;
+            this.readableValue = this.projection;
+            emit(this, "readable-projection-changed", { projection: this.projection, version: this.versionValue });
+        }
         const focused = this.shadowRoot.activeElement
             ?.dataset.boxId;
         this.renderWorld();
@@ -596,46 +1656,118 @@ export class ProcessModeler extends BaseElement {
         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);
     }
+    get allChecks() { return this.computedChecks; }
+    collectChecks() {
+        const routes = this.projection.lines.filter(line => !this.routedLines.get(line.id)?.length)
+            .map(line => ({ message: "A connection is blocked by overlapping steps. Move a step or adjust its route.", boxId: line.from }));
+        const hostChecks = this.documentValue === undefined ? undefined : this.model.validate?.(this.documentValue, this.projection);
+        return [...this.checks, ...(hostChecks ?? graphChecks(this.projection)), ...routes];
+    }
     renderWorld() {
         const world = this.shadowRoot.querySelector("[part=world]");
         world.replaceChildren();
         for (const section of this.layoutValue.sections ?? []) {
             const element = document.createElement("div");
             element.setAttribute("part", "section");
-            element.textContent = section.title;
+            const title = document.createElement('strong');
+            title.textContent = section.title;
+            element.append(title);
+            if (section.description) {
+                const description = document.createElement('small');
+                description.textContent = section.description;
+                element.append(description);
+            }
             this.place(element, section);
             world.append(element);
         }
         for (const box of [...this.projection.boxes].sort((a, b) => Number(Boolean(b.frame)) - Number(Boolean(a.frame)))) {
-            const element = document.createElement("button");
-            element.type = "button";
+            const element = document.createElement("div");
+            element.tabIndex = 0;
+            element.setAttribute("role", "group");
             element.setAttribute("part", box.frame ? "frame" : "box");
             element.dataset.boxId = box.id;
-            element.setAttribute("aria-label", [box.title, box.description, box.frame ? "Frame" : ""]
+            const kind = this.catalog.find((entry) => entry.kind === box.kind);
+            const shape = box.shape ?? kind?.shape ?? (box.frame ? "frame" : "task");
+            element.dataset.shape = shape;
+            element.dataset.kind = box.kind;
+            element.dataset.tone = kind?.tone === "accent" ? "accent" : "neutral";
+            const problem = this.allChecks.find(check => check.boxId === box.id || (check.path && JSON.stringify(check.path) === JSON.stringify(box.path)));
+            const incoming = this.projection.lines.filter(line => line.to === box.id).length;
+            const outgoing = this.projection.lines.filter(line => line.from === box.id).length;
+            element.setAttribute("aria-label", [`${kind?.label ?? box.kind}: ${box.title}. ${incoming} in, ${outgoing} out`, problem ? `Needs attention: ${problem.message}` : ""]
                 .filter(Boolean)
                 .join(". "));
-            element.setAttribute("aria-pressed", String(box.id === this.selectedId));
+            element.setAttribute("aria-current", String(this.selectedIds.has(box.id)));
             this.place(element, this.layoutValue.boxes[box.id]);
-            const kind = this.catalog.find((kind) => kind.kind === box.kind);
+            const icon = document.createElement("span");
+            icon.setAttribute("part", "icon");
+            icon.setAttribute("aria-hidden", "true");
             if (kind?.icon) {
-                const icon = document.createElement("span");
-                icon.setAttribute("part", "icon");
-                icon.setAttribute("aria-hidden", "true");
                 icon.append(kind.icon());
-                element.append(icon);
             }
+            element.append(icon);
             const title = document.createElement("strong");
             title.textContent = box.title;
             element.append(title);
-            if (box.description) {
+            const descriptionText = this.detailValue === "technical" ? box.technicalDescription ?? box.description : box.description;
+            if (descriptionText) {
                 const description = document.createElement("small");
-                description.textContent = box.description;
+                description.textContent = descriptionText;
+                if (this.detailValue === "technical")
+                    description.setAttribute("part", "technical-description");
                 element.append(description);
             }
-            element.addEventListener("click", () => {
+            if (box.frame && box.loopMark) {
+                const loop = document.createElement('span');
+                loop.setAttribute('part', 'loop-mark');
+                loop.setAttribute('aria-hidden', 'true');
+                loop.textContent = '↻';
+                element.append(loop);
+            }
+            const metrics = this.showLastRunValue ? this.lastRunValue?.steps[box.id] : undefined;
+            if (metrics) {
+                const line = document.createElement("span");
+                line.setAttribute("part", "metrics");
+                line.textContent = metrics.notInRun ? "Not in this run" : [
+                    metrics.callsPerSecond === undefined ? "" : `${metrics.callsPerSecond.toLocaleString()}/s`,
+                    metrics.p95Ms === undefined ? "" : `p95 ${metrics.p95Ms.toLocaleString()} ms`,
+                ].filter(Boolean).join(" · ");
+                if (metrics.failedShare !== undefined && metrics.failedShare > 0) {
+                    const failed = document.createElement('span');
+                    failed.setAttribute('part', 'metric-warning');
+                    failed.textContent = `${(metrics.failedShare * 100).toFixed(1)}% failed`;
+                    line.append(document.createTextNode(' · '), failed);
+                }
+                element.append(line);
+            }
+            if (problem) {
+                const message = document.createElement("span");
+                message.setAttribute("part", "problem");
+                message.textContent = problem.message;
+                element.append(message);
+            }
+            element.addEventListener("keydown", event => {
+                if (event.target === element && (event.key === "Enter" || event.key === " ")) {
+                    event.preventDefault();
+                    element.click();
+                }
+            });
+            element.addEventListener("click", event => {
+                if (this.suppressClick && event.detail !== 0) {
+                    this.suppressClick = false;
+                    return;
+                }
+                if (this.pendingReattach) {
+                    const pending = this.pendingReattach;
+                    this.pendingReattach = undefined;
+                    this.requestEdit({ type: 'reattach', lineId: pending.lineId, [pending.end]: box.id });
+                    return;
+                }
                 if (this.connecting && this.connecting !== box.id) {
                     this.requestEdit({
                         type: "connect",
@@ -644,65 +1776,204 @@ export class ProcessModeler extends BaseElement {
                     });
                     this.connecting = null;
                 }
-                this.select(box.id);
+                if (event.shiftKey)
+                    this.selectMany(this.selectedIds.has(box.id) ? [...this.selectedIds].filter(id => id !== box.id) : [...this.selectedIds, box.id]);
+                else
+                    this.select(box.id);
             });
+            if (!this.disableConnections && !this.locked) {
+                for (const side of ["north", "east", "south", "west"]) {
+                    const port = document.createElement("button");
+                    port.type = "button";
+                    port.setAttribute("part", "port");
+                    port.dataset.side = side;
+                    port.dataset.owner = box.id;
+                    port.setAttribute("aria-label", `Add or connect a step ${side} of ${box.title}`);
+                    port.addEventListener("click", event => {
+                        event.stopPropagation();
+                        if (!event.detail) {
+                            const pos = this.layoutValue.boxes[box.id];
+                            const offsets = { east: [320, 0], west: [-320, 0], north: [0, -170], south: [0, 170] }[side];
+                            this.openChooser({ type: "add", from: box.id, fromSide: side, position: { x: pos.x + offsets[0], y: pos.y + offsets[1] } });
+                        }
+                    });
+                    element.append(port);
+                }
+            }
+            if (box.frame && !this.locked) {
+                const handle = document.createElement('button');
+                handle.type = 'button';
+                handle.setAttribute('part', 'frame-resize');
+                handle.dataset.owner = box.id;
+                handle.setAttribute('aria-label', `Resize ${box.title}`);
+                handle.addEventListener('keydown', event => {
+                    const delta = { ArrowLeft: [-16, 0], ArrowRight: [16, 0], ArrowUp: [0, -16], ArrowDown: [0, 16] }[event.key];
+                    if (!delta)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const current = this.layoutValue.boxes[box.id];
+                    this.resize(box.id, (current.width ?? 224) + delta[0], (current.height ?? 64) + delta[1]);
+                    Array.from(this.shadowRoot.querySelectorAll('[part=frame-resize]')).find(handle => handle.dataset.owner === box.id)?.focus();
+                });
+                element.append(handle);
+            }
             world.append(element);
         }
         const lines = svgElement("svg");
         lines.setAttribute("part", "lines");
         lines.setAttribute("aria-hidden", "true");
+        const defs = svgElement('defs');
+        for (const [id, fill] of [['boe-process-arrow', 'var(--boe-token-text-text-secondary, #6f6f6f)'], ['boe-process-arrow-brand', 'var(--boe-token-surface-surface-brand, #0061d5)']]) {
+            const marker = svgElement('marker');
+            marker.id = id;
+            marker.setAttribute('viewBox', '0 0 8 8');
+            marker.setAttribute('refX', '7');
+            marker.setAttribute('refY', '4');
+            marker.setAttribute('markerWidth', '8');
+            marker.setAttribute('markerHeight', '8');
+            marker.setAttribute('orient', 'auto');
+            const arrow = svgElement('path');
+            arrow.setAttribute('d', 'M 0 0 L 8 4 L 0 8 Z');
+            arrow.setAttribute('fill', fill);
+            marker.append(arrow);
+            defs.append(marker);
+        }
+        lines.append(defs);
         world.append(lines);
         for (const line of this.projection.lines) {
-            const from = this.layoutValue.boxes[line.from];
-            const to = this.layoutValue.boxes[line.to];
-            const x1 = from.x + (from.width ?? 220) / 2;
-            const y1 = from.y + (from.height ?? 96);
-            const x2 = to.x + (to.width ?? 220) / 2;
-            const y2 = to.y;
-            const path = svgElement("polyline");
+            const points = this.routedLines.get(line.id);
+            if (!points.length)
+                continue;
+            const midpoint = lineMidpoint(points);
+            const path = svgElement("path");
             path.setAttribute("part", "line");
-            path.setAttribute("points", [
-                { x: x1, y: y1 },
-                ...(this.layoutValue.lines?.[line.id] ?? line.points ?? []),
-                { x: x2, y: y2 },
-            ]
-                .map((point) => `${point.x},${point.y}`)
-                .join(" "));
+            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.setAttribute("vector-effect", "non-scaling-stroke");
+            path.setAttribute("d", roundedProcessPath(points));
             if (line.dashed)
                 path.setAttribute("stroke-dasharray", "6 4");
+            if (this.showLastRunValue && line.share !== undefined) {
+                path.style.strokeWidth = `${1.5 + Math.max(0, Math.min(1, line.share)) * 2}px`;
+                path.setAttribute('aria-label', `${Math.round(line.share * 100)}% of last-run traffic`);
+            }
             lines.append(path);
+            for (const point of [line.fromSide ? points[0] : null, line.toSide ? points.at(-1) : null]) {
+                if (!point)
+                    continue;
+                const pin = svgElement('circle');
+                pin.setAttribute('part', 'pinned-end');
+                pin.setAttribute('cx', String(point.x));
+                pin.setAttribute('cy', String(point.y));
+                pin.setAttribute('r', '3');
+                lines.append(pin);
+            }
+            for (let i = 1; i < points.length - 2; i++) {
+                const hit = svgElement("polyline");
+                hit.setAttribute("part", "line-hit");
+                hit.dataset.lineId = line.id;
+                hit.dataset.segment = String(i);
+                hit.setAttribute("vector-effect", "non-scaling-stroke");
+                hit.setAttribute("points", `${points[i].x},${points[i].y} ${points[i + 1].x},${points[i + 1].y}`);
+                lines.append(hit);
+            }
             const label = document.createElement("div");
             label.setAttribute("part", "connection");
-            label.style.left = `${(x1 + x2) / 2}px`;
-            label.style.top = `${(y1 + y2) / 2}px`;
+            label.setAttribute('role', 'group');
+            label.tabIndex = 0;
+            label.style.left = `${midpoint.x}px`;
+            label.style.top = `${midpoint.y}px`;
             const names = `${this.projection.boxes.find((box) => box.id === line.from).title} to ${this.projection.boxes.find((box) => box.id === line.to).title}${line.label ? `, ${line.label}` : ""}`;
+            label.setAttribute('aria-label', `Connection: ${names}${this.showLastRunValue && line.share !== undefined ? `. ${Math.round(line.share * 100)}% of last-run traffic` : ''}`);
+            label.addEventListener('click', event => { if (event.target.closest('button'))
+                return; this.selectLine(line.id); });
+            label.addEventListener('keydown', event => { if (event.target === label && (event.key === 'Enter' || event.key === ' ')) {
+                event.preventDefault();
+                this.selectLine(line.id);
+            } });
             const text = document.createElement("span");
-            text.textContent = line.label ?? "Connection";
+            const source = this.projection.boxes.find(box => box.id === line.from);
+            const branchIndex = this.projection.lines.filter(candidate => candidate.from === line.from).indexOf(line);
+            text.textContent = line.label ?? (line.weight !== undefined ? String(line.weight) : /decision/i.test(source.kind) ? ["Yes", "No"][branchIndex] ?? `Route ${branchIndex + 1}` : /try/i.test(source.kind) && line.dashed ? "If it fails" : "");
             label.append(text);
+            const actions = document.createElement("div");
+            actions.setAttribute("part", "connection-actions");
+            label.append(actions);
+            if (points.length >= 4 && !this.locked) {
+                const adjust = document.createElement("button");
+                adjust.type = "button";
+                adjust.textContent = "Route";
+                adjust.dataset.segment = "1";
+                adjust.dataset.lineId = line.id;
+                adjust.setAttribute("aria-label", `Adjust route: ${names}. Use arrow keys`);
+                adjust.onkeydown = event => {
+                    const direction = { ArrowLeft: [-10, 0], ArrowRight: [10, 0], ArrowUp: [0, -10], ArrowDown: [0, 10] }[event.key];
+                    if (!direction)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const current = routeProcessLine(line, this.layoutValue, this.projection);
+                    const vertical = current[1].x === current[2].x;
+                    for (const point of [current[1], current[2]]) {
+                        if (vertical)
+                            point.x += direction[0];
+                        else
+                            point.y += direction[1];
+                    }
+                    this.routeLine(line.id, current.slice(1, -1));
+                    Array.from(this.shadowRoot.querySelectorAll('[data-segment]')).find(button => button.dataset.lineId === line.id)?.focus();
+                };
+                actions.append(adjust);
+            }
             for (const [type, title] of [
                 ["insert", "Insert a step here"],
                 ["disconnect", "Remove connection"],
             ]) {
+                if (type === "disconnect" && this.disableConnections)
+                    continue;
                 const button = document.createElement("button");
                 button.type = "button";
                 button.textContent = type === "insert" ? "+" : "Remove";
                 button.setAttribute("aria-label", `${title}: ${names}`);
                 button.disabled = this.locked;
-                button.addEventListener("click", () => this.requestEdit({
-                    type,
-                    lineId: line.id,
-                    from: line.from,
-                    to: line.to,
-                }));
-                label.append(button);
+                button.addEventListener("click", () => {
+                    const edit = {
+                        type,
+                        lineId: line.id,
+                        from: line.from,
+                        to: line.to,
+                    };
+                    if (type === "insert" && this.catalog.length) {
+                        this.openChooser(edit);
+                    }
+                    else
+                        this.requestEdit(edit);
+                });
+                actions.append(button);
             }
             world.append(label);
+            if (this.selectedLineId === line.id && !this.locked && !this.disableConnections) {
+                for (const [end, point] of [['from', points[0]], ['to', points.at(-1)]]) {
+                    const grip = document.createElement('button');
+                    grip.type = 'button';
+                    grip.setAttribute('part', 'end-grip');
+                    grip.dataset.lineId = line.id;
+                    grip.dataset.end = end;
+                    grip.style.left = `${point.x - 12}px`;
+                    grip.style.top = `${point.y - 12}px`;
+                    grip.setAttribute('aria-label', `Reattach ${end === 'from' ? 'start' : 'end'} of connection: ${names}`);
+                    grip.addEventListener('click', event => { event.stopPropagation(); this.pendingReattach = { lineId: line.id, end }; this.setStatus('Select a step to reattach the connection'); });
+                    world.append(grip);
+                }
+            }
         }
         for (const note of this.layoutValue.notes ?? []) {
             const element = document.createElement("div");
             element.setAttribute("part", "note");
             element.textContent = note.text;
-            this.place(element, { ...note, width: 180, height: 80 });
+            this.place(element, { ...note, width: 208, height: 80 });
             world.append(element);
         }
     }
@@ -710,8 +1981,8 @@ export class ProcessModeler extends BaseElement {
         Object.assign(element.style, {
             left: `${position.x}px`,
             top: `${position.y}px`,
-            width: `${position.width ?? 220}px`,
-            height: `${position.height ?? 96}px`,
+            width: `${position.width ?? 224}px`,
+            height: `${position.height ?? 64}px`,
         });
     }
     renderPalette() {
@@ -719,7 +1990,7 @@ export class ProcessModeler extends BaseElement {
         const query = this.shadowRoot.querySelector("[part=search]").value.toLowerCase();
         choices.replaceChildren();
         let group = "";
-        for (const kind of this.catalog.filter((kind) => `${kind.label} ${kind.description} ${kind.group ?? ""}`
+        for (const kind of this.catalog.filter((kind) => `${kind.label} ${kind.description} ${kind.group ?? ""} ${(kind.aliases ?? []).join(" ")}`
             .toLowerCase()
             .includes(query))) {
             if (kind.group && kind.group !== group) {
@@ -731,39 +2002,87 @@ export class ProcessModeler extends BaseElement {
             }
             const button = document.createElement("button");
             button.type = "button";
-            button.textContent = kind.label;
+            button.setAttribute("part", "choice");
+            button.dataset.tone = kind.tone === "accent" ? "accent" : "neutral";
+            const icon = document.createElement("span");
+            icon.setAttribute("part", "choice-icon");
+            icon.setAttribute("aria-hidden", "true");
+            if (kind.icon)
+                icon.append(kind.icon());
+            const name = document.createElement("span");
+            name.setAttribute("part", "choice-name");
+            name.textContent = kind.label;
+            const description = document.createElement("span");
+            description.setAttribute("part", "choice-description");
+            description.textContent = kind.description;
+            button.append(icon, name, description);
             button.disabled = this.locked;
             button.draggable = !this.locked;
-            button.addEventListener("click", () => this.requestEdit({ type: "add", kind, position: { x: 40, y: 40 } }));
-            button.addEventListener("dragstart", (event) => event.dataTransfer?.setData("application/boe-process-kind", kind.kind));
+            button.addEventListener("click", () => {
+                if (kind.placement) {
+                    this.addLayoutKind(kind);
+                    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 } : {}) });
+            });
+            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]");
         canvas.ondragover = (event) => {
-            if (!this.locked)
+            if (!this.locked) {
                 event.preventDefault();
+                const point = this.canvasPoint(event);
+                this.markDropLine(point);
+                if (this.paletteDragKind) {
+                    let ghost = this.shadowRoot.querySelector('[part=palette-ghost]');
+                    if (!ghost) {
+                        ghost = document.createElement('div');
+                        ghost.setAttribute('part', 'palette-ghost');
+                        this.shadowRoot.querySelector('[part=world]').append(ghost);
+                    }
+                    ghost.textContent = this.paletteDragKind.label;
+                    this.place(ghost, { x: point.x - 112, y: point.y - 32, width: 224, height: 64 });
+                }
+            }
         };
+        canvas.ondragleave = () => { this.markDropLine(undefined); this.shadowRoot.querySelector('[part=palette-ghost]')?.remove(); };
         canvas.ondrop = (event) => {
             event.preventDefault();
+            this.shadowRoot.querySelector('[part=palette-ghost]')?.remove();
+            this.paletteDragKind = null;
             const kind = this.catalog.find((kind) => kind.kind ===
                 event.dataTransfer?.getData("application/boe-process-kind"));
-            if (!kind)
+            if (!kind || this.locked)
+                return;
+            const position = this.canvasPoint(event);
+            if (kind.placement) {
+                this.addLayoutKind(kind, position);
+                this.markDropLine(undefined);
                 return;
-            const rect = canvas.getBoundingClientRect();
+            }
+            const line = this.lineAt(position);
+            const frame = this.boxAt(position, undefined, true);
             this.requestEdit({
-                type: "add",
+                type: line ? "insert" : "add",
                 kind,
-                position: {
-                    x: (event.clientX - rect.left - this.viewport.x) / this.viewport.zoom,
-                    y: (event.clientY - rect.top - this.viewport.y) / this.viewport.zoom,
-                },
+                lineId: line?.id, from: line?.from, to: line?.to, parentId: frame?.id,
+                position,
             });
+            this.markDropLine(undefined);
         };
     }
     renderChecks() {
         const checks = this.shadowRoot.querySelector("[part=checks]");
         checks.replaceChildren();
-        this.checks.forEach((check) => {
+        const hold = this.shadowRoot.querySelector('[part=hold]');
+        hold.hidden = this.allChecks.length === 0;
+        hold.querySelector('[part=hold-text]').textContent = `${this.allChecks.length} ${this.allChecks.length === 1 ? 'problem needs' : 'problems need'} fixing before this drawing can be read back.`;
+        this.allChecks.forEach((check) => {
             const button = document.createElement("button");
             button.type = "button";
             button.textContent = check.message;
@@ -780,22 +2099,252 @@ export class ProcessModeler extends BaseElement {
             checks.append(button);
         });
     }
+    renderField(box, field) {
+        const row = document.createElement('div');
+        row.setAttribute('part', 'field');
+        const label = document.createElement('label');
+        label.textContent = field.label;
+        let control;
+        if (field.kind === 'multiline')
+            control = document.createElement('textarea');
+        else if (field.kind === 'choice') {
+            const select = document.createElement('select');
+            const groups = new Map();
+            for (const option of field.options ?? []) {
+                const item = document.createElement('option');
+                item.value = option.value;
+                item.textContent = option.label;
+                if (option.group) {
+                    let group = groups.get(option.group);
+                    if (!group) {
+                        group = document.createElement('optgroup');
+                        group.label = option.group;
+                        groups.set(option.group, group);
+                        select.append(group);
+                    }
+                    group.append(item);
+                }
+                else
+                    select.append(item);
+            }
+            control = select;
+        }
+        else {
+            const input = document.createElement('input');
+            input.type = field.kind === 'boolean' ? 'checkbox' : field.kind === 'number' ? 'number' : field.kind === 'search' ? 'search' : 'text';
+            control = input;
+        }
+        control.dataset.field = field.key;
+        if (control instanceof HTMLInputElement && control.type === 'checkbox')
+            control.checked = Boolean(field.value);
+        else
+            control.value = field.kind === 'action' ? field.options?.find(option => option.value === field.value)?.label ?? String(field.value) : String(field.value);
+        control.disabled = Boolean(field.disabled || this.locked);
+        control.required = Boolean(field.required);
+        if (field.placeholder && control instanceof HTMLInputElement)
+            control.placeholder = field.placeholder;
+        if (field.problem)
+            control.setAttribute('aria-invalid', 'true');
+        const submit = () => emit(this, 'process-field-change-request', { boxId: box.id, path: box.path, key: field.key, value: control instanceof HTMLInputElement && control.type === 'checkbox' ? control.checked : control instanceof HTMLInputElement && control.type === 'number' && control.value !== '' ? Number(control.value) : control.value });
+        if (field.kind !== 'action')
+            control.addEventListener(field.kind === 'expression' ? 'input' : 'change', submit);
+        label.append(control);
+        row.append(label);
+        if (field.kind === 'action' && control instanceof HTMLInputElement) {
+            const input = control;
+            const options = field.options ?? [];
+            const list = document.createElement('div');
+            list.setAttribute('part', 'action-options');
+            list.id = `process-action-${box.id}-${field.key}`.replace(/[^a-zA-Z0-9-]/g, '-');
+            list.hidden = true;
+            const optionList = document.createElement('div');
+            optionList.setAttribute('role', 'listbox');
+            optionList.id = `${list.id}-choices`;
+            optionList.setAttribute('aria-label', `${field.label} choices`);
+            input.setAttribute('role', 'combobox');
+            input.setAttribute('aria-autocomplete', 'list');
+            input.setAttribute('aria-controls', optionList.id);
+            input.setAttribute('aria-expanded', 'false');
+            input.autocomplete = 'off';
+            let group = null;
+            let active = 0;
+            let browse = false;
+            const close = () => { list.hidden = true; browse = false; input.setAttribute('aria-expanded', 'false'); input.removeAttribute('aria-activedescendant'); };
+            const choose = (option) => { input.focus(); input.value = option.value; close(); submit(); };
+            const render = () => {
+                list.replaceChildren();
+                optionList.replaceChildren();
+                const query = browse ? '' : input.value.trim().toLocaleLowerCase();
+                const matches = options.filter(option => (!group || option.group === group) && (!query || `${option.label} ${option.value} ${option.group ?? ''}`.toLocaleLowerCase().includes(query)));
+                if (!group && !query) {
+                    const groups = [...new Set(options.map(option => option.group).filter((name) => Boolean(name)))];
+                    for (const name of groups) {
+                        const button = document.createElement('button');
+                        button.type = 'button';
+                        button.setAttribute('part', 'action-group');
+                        button.textContent = name;
+                        button.onclick = () => { input.focus(); group = name; browse = true; render(); };
+                        list.append(button);
+                    }
+                }
+                if (group) {
+                    const back = document.createElement('button');
+                    back.type = 'button';
+                    back.setAttribute('part', 'action-back');
+                    back.textContent = `All actions / ${group}`;
+                    back.onclick = () => { input.focus(); group = null; browse = true; render(); };
+                    list.prepend(back);
+                }
+                for (const [index, option] of matches.entries()) {
+                    const item = document.createElement('button');
+                    item.type = 'button';
+                    item.setAttribute('role', 'option');
+                    item.setAttribute('part', 'action-option');
+                    item.id = `${list.id}-${index}`;
+                    item.setAttribute('aria-selected', String(index === active));
+                    const title = document.createElement('strong');
+                    title.textContent = option.label;
+                    item.append(title);
+                    if (option.value !== option.label) {
+                        const code = document.createElement('small');
+                        code.textContent = option.value;
+                        item.append(code);
+                    }
+                    item.onclick = () => choose(option);
+                    optionList.append(item);
+                }
+                if (!matches.length) {
+                    const empty = document.createElement('p');
+                    empty.textContent = 'No matching actions';
+                    list.append(empty);
+                }
+                list.append(optionList);
+                active = Math.min(active, Math.max(0, matches.length - 1));
+                list.hidden = false;
+                input.setAttribute('aria-expanded', 'true');
+                const selected = list.querySelectorAll('[role=option]')[active];
+                if (selected)
+                    input.setAttribute('aria-activedescendant', selected.id);
+                else
+                    input.removeAttribute('aria-activedescendant');
+            };
+            input.addEventListener('focus', () => { group = null; browse = false; render(); });
+            input.addEventListener('input', () => { group = null; browse = false; active = 0; render(); });
+            input.addEventListener('keydown', event => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    close();
+                    return;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    if (list.hidden)
+                        render();
+                    const items = Array.from(list.querySelectorAll('[role=option]'));
+                    if (!items.length)
+                        return;
+                    active = (active + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+                    items.forEach((item, index) => item.setAttribute('aria-selected', String(index === active)));
+                    input.setAttribute('aria-activedescendant', items[active].id);
+                    items[active].scrollIntoView?.({ block: 'nearest' });
+                }
+                else if (event.key === 'Enter' && !list.hidden) {
+                    const items = Array.from(list.querySelectorAll('[role=option]'));
+                    if (items[active]) {
+                        event.preventDefault();
+                        items[active].click();
+                    }
+                }
+            });
+            const caret = document.createElement('button');
+            caret.type = 'button';
+            caret.setAttribute('part', 'action-caret');
+            caret.setAttribute('aria-label', `Browse ${field.label.toLowerCase()} choices`);
+            caret.textContent = '⌄';
+            caret.disabled = input.disabled;
+            caret.onclick = () => { input.focus(); group = null; browse = true; active = 0; render(); };
+            row.addEventListener('focusout', event => { if (!row.contains(event.relatedTarget))
+                close(); });
+            row.append(caret, list);
+        }
+        if (field.kind === 'search' && field.options?.length && control instanceof HTMLInputElement) {
+            const options = document.createElement('datalist');
+            options.id = `process-field-${box.id}-${field.key}`.replace(/[^a-zA-Z0-9-]/g, '-');
+            for (const option of field.options) {
+                const item = document.createElement('option');
+                item.value = option.value;
+                item.label = option.label;
+                options.append(item);
+            }
+            control.setAttribute('list', options.id);
+            row.append(options);
+        }
+        if (field.kind === 'expression' && this.variables.length) {
+            const chips = document.createElement('div');
+            chips.setAttribute('part', 'variable-chips');
+            chips.setAttribute('aria-label', 'Variables in scope');
+            for (const variable of this.variables) {
+                const chip = document.createElement('button');
+                chip.type = 'button';
+                chip.textContent = variable.name;
+                chip.disabled = control.disabled;
+                chip.onclick = () => { control.value += variable.name; submit(); control.focus(); };
+                chips.append(chip);
+            }
+            row.append(chips);
+        }
+        if (field.description) {
+            const help = document.createElement('small');
+            help.textContent = field.description;
+            row.append(help);
+        }
+        if (field.problem) {
+            const problem = document.createElement('small');
+            problem.setAttribute('part', 'field-problem');
+            problem.textContent = field.problem;
+            row.append(problem);
+        }
+        return row;
+    }
     renderSelection() {
         if (!this.isRendered)
             return;
+        const focusedControl = this.shadowRoot.activeElement;
+        const focusedKey = focusedControl?.dataset.field ?? focusedControl?.dataset.variable;
+        const focusedType = focusedControl?.dataset.field ? 'field' : focusedControl?.dataset.variable ? 'variable' : null;
+        const caret = focusedControl && 'selectionStart' in focusedControl ? focusedControl.selectionStart : null;
+        const restoreControlFocus = () => {
+            if (!focusedKey || !focusedType)
+                return;
+            const control = Array.from(this.shadowRoot.querySelectorAll('input,textarea')).find(item => item.dataset[focusedType] === focusedKey);
+            if (!control)
+                return;
+            control.focus();
+            if (caret !== null && control.type !== 'number' && control.type !== 'checkbox')
+                control.setSelectionRange(caret, caret);
+        };
+        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("[data-box-id]").forEach((element) => {
-            element.setAttribute("aria-pressed", String(element.dataset.boxId === this.selectedId));
+            element.setAttribute("aria-current", String(this.selectedIds.has(element.dataset.boxId)));
             const box = this.projection.boxes.find((box) => box.id === element.dataset.boxId);
-            element.dataset.invalid = String(this.checks.some((check) => check.boxId === box.id ||
+            element.dataset.invalid = String(this.allChecks.some((check) => check.boxId === box.id ||
                 (check.path &&
                     JSON.stringify(check.path) === JSON.stringify(box.path))));
         });
         const editor = this.shadowRoot.querySelector("[part=editor]");
         const selected = this.selected;
+        const controlsKey = `${[...this.selectedIds].join(',')}|${this.locked}|${this.disableConnections}|${this.showLastRunValue}|${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.renderSelectionToolbar();
+        this.renderPane();
+        this.positionSelectionToolbar();
         if (this.inspected === selected?.node &&
             this.inspectedId === selected?.id &&
-            editor.childNodes.length) {
-            editor.querySelector("h3").textContent = selected?.title ?? "";
+            this.inspectedControls === controlsKey &&
+            editor.querySelector(`[part=inspector-heading]`)?.tagName === `H${this.headingLevel}`) {
+            editor.querySelector("[part=inspector-heading]").textContent = selected?.title ?? "";
+            restoreControlFocus();
             return;
         }
         this.cleanupInspector?.();
@@ -803,12 +2352,170 @@ export class ProcessModeler extends BaseElement {
         editor.replaceChildren();
         this.inspected = selected?.node;
         this.inspectedId = selected?.id;
+        this.inspectedControls = controlsKey;
+        if (this.selectedIds.size > 1) {
+            const heading = document.createElement(`h${this.headingLevel}`);
+            heading.setAttribute('part', 'inspector-heading');
+            heading.textContent = `${this.selectedIds.size} steps selected`;
+            editor.append(heading);
+            const actions = document.createElement('div');
+            actions.setAttribute('part', 'arrange-actions');
+            for (const [label, action] of [['Align left', 'left'], ['Align centre', 'center'], ['Align right', 'right'], ['Align top', 'top'], ['Align middle', 'middle'], ['Align bottom', 'bottom'], ['Distribute horizontally', 'distribute-horizontal'], ['Distribute vertically', 'distribute-vertical']]) {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.textContent = label;
+                button.disabled = this.locked;
+                button.onclick = () => this.arrangeSelection(action);
+                actions.append(button);
+            }
+            const section = document.createElement('button');
+            section.type = 'button';
+            section.textContent = 'Make a section';
+            section.disabled = this.locked;
+            section.onclick = () => this.makeSection();
+            actions.append(section);
+            editor.append(actions);
+            restoreControlFocus();
+            return;
+        }
         if (selected) {
-            const heading = document.createElement("h3");
+            const heading = document.createElement(`h${this.headingLevel}`);
+            heading.setAttribute("part", "inspector-heading");
+            heading.dataset.single = 'true';
             heading.textContent = selected.title;
             editor.append(heading);
+            const kind = this.catalog.find(entry => entry.kind === selected.kind);
+            const kindLabel = document.createElement('p');
+            kindLabel.setAttribute('part', 'inspector-kind');
+            kindLabel.textContent = kind?.label ?? selected.kind;
+            editor.append(kindLabel);
+            if (selected.description) {
+                const purpose = document.createElement('p');
+                purpose.setAttribute('part', 'inspector-purpose');
+                purpose.textContent = selected.description;
+                editor.append(purpose);
+            }
+            for (const field of this.fieldsValue[selected.id] ?? [])
+                editor.append(this.renderField(selected, field));
             this.cleanupInspector =
                 this.renderer?.(selected.node, editor) || undefined;
+            const outgoing = this.projection.lines.filter(line => line.from === selected.id);
+            const leads = document.createElement('section');
+            leads.setAttribute('part', 'leads-to');
+            const leadsHeading = document.createElement('h3');
+            leadsHeading.textContent = 'Leads to';
+            leads.append(leadsHeading);
+            for (const line of outgoing) {
+                const row = document.createElement('div');
+                row.setAttribute('part', 'lead-row');
+                const target = this.projection.boxes.find(box => box.id === line.to);
+                const name = document.createElement('span');
+                name.textContent = `${line.label ? `${line.label}: ` : ''}${target?.title ?? line.to}`;
+                row.append(name);
+                if (!this.disableConnections) {
+                    const remove = document.createElement('button');
+                    remove.type = 'button';
+                    remove.textContent = 'Remove';
+                    remove.setAttribute('aria-label', `Remove connection to ${target?.title ?? line.to}`);
+                    remove.disabled = this.locked;
+                    remove.onclick = () => this.requestEdit({ type: 'disconnect', lineId: line.id });
+                    row.append(remove);
+                }
+                leads.append(row);
+            }
+            const connect = document.createElement('button');
+            connect.type = 'button';
+            connect.textContent = 'Connect to…';
+            connect.disabled = this.locked || this.disableConnections;
+            connect.onclick = () => { this.connecting = selected.id; this.setStatus(`Select the next box to connect from ${selected.title}`); };
+            leads.append(connect);
+            editor.append(leads);
+            const metrics = this.showLastRunValue ? this.lastRunValue?.steps[selected.id] : undefined;
+            if (metrics) {
+                const report = document.createElement('section');
+                report.setAttribute('part', 'inspector-metrics');
+                const title = document.createElement('h3');
+                title.textContent = this.lastRunValue?.label ?? 'Last run';
+                report.append(title);
+                if (metrics.notInRun) {
+                    const note = document.createElement('p');
+                    note.textContent = 'Not in this run';
+                    report.append(note);
+                }
+                else {
+                    const list = document.createElement('dl');
+                    for (const [label, value] of [['Per second', metrics.callsPerSecond?.toLocaleString()], ['95% within', metrics.p95Ms === undefined ? undefined : `${metrics.p95Ms.toLocaleString()} ms`], ['Failed', metrics.failedShare === undefined ? undefined : `${(metrics.failedShare * 100).toFixed(1)}%`]]) {
+                        if (value === undefined)
+                            continue;
+                        const term = document.createElement('dt');
+                        term.textContent = label;
+                        const detail = document.createElement('dd');
+                        detail.textContent = value;
+                        if (label === 'Failed' && metrics.failedShare)
+                            detail.setAttribute('part', 'metric-warning');
+                        list.append(term, detail);
+                    }
+                    report.append(list);
+                }
+                editor.append(report);
+            }
+            const actions = document.createElement('div');
+            actions.setAttribute('part', 'inspector-actions');
+            const duplicate = document.createElement('button');
+            duplicate.type = 'button';
+            duplicate.textContent = 'Duplicate';
+            duplicate.disabled = this.locked;
+            duplicate.onclick = () => this.requestEdit({ type: 'duplicate', sourceId: selected.id, position: { x: this.layoutValue.boxes[selected.id].x + 32, y: this.layoutValue.boxes[selected.id].y + 32 } });
+            const remove = document.createElement('button');
+            remove.type = 'button';
+            remove.textContent = 'Delete';
+            remove.disabled = this.locked;
+            remove.onclick = () => this.requestEdit({ type: 'delete', boxId: selected.id });
+            actions.append(duplicate, remove);
+            editor.append(actions);
+        }
+        restoreControlFocus();
+    }
+    renderSelectionToolbar() {
+        const toolbar = this.shadowRoot.querySelector('[part=selection-toolbar]');
+        const key = `${[...this.selectedIds].join(',')}|${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(',')}`;
+        if (key === this.selectionToolbarKey)
+            return;
+        this.selectionToolbarKey = key;
+        toolbar.replaceChildren();
+        if (!this.selectedIds.size && !this.selectedLineId)
+            return;
+        const add = (label, command, action) => {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.dataset.selectionCommand = command;
+            button.textContent = label;
+            button.setAttribute('aria-label', label);
+            button.disabled = this.locked;
+            button.onclick = action;
+            toolbar.append(button);
+        };
+        if (this.selectedLine) {
+            const line = this.selectedLine;
+            add('Insert a step', 'insert', () => this.openChooser({ type: 'insert', lineId: line.id, from: line.from, to: line.to }));
+            if (this.layoutValue.lines?.[line.id])
+                add('Reset line', 'reset-line', () => this.resetLine(line.id));
+            if (!this.disableConnections)
+                add('Delete', 'delete-line', () => this.requestEdit({ type: 'disconnect', lineId: line.id }));
+        }
+        else if (this.selectedIds.size === 1) {
+            const box = this.selected;
+            const failurePath = box.kind === 'try' && !this.projection.lines.some(line => line.from === box.id && (line.dashed || line.label === 'If it fails'));
+            add(box.shape === 'gateway' ? 'Add a path' : failurePath ? 'If it fails' : 'Add next', 'add-next', () => this.openChooser({ type: 'add', from: box.id, ...(failurePath ? { routeLabel: 'If it fails', dashed: true } : {}) }));
+            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('Delete', 'delete-many', () => this.selectionCommand('delete-many'));
+            if (this.narrowValue)
+                add('Details', 'details', () => promoteModal(this.shadowRoot.querySelector('[part=pane-drawer][data-pane=inspector]')));
+        }
+        else {
+            add('Line up', 'align', () => this.selectionCommand('align'));
+            add('Tidy these', 'space', () => this.selectionCommand('space'));
+            add('Delete', 'delete-many', () => this.selectionCommand('delete-many'));
         }
     }
     updateToolbar() {
@@ -816,14 +2523,23 @@ export class ProcessModeler extends BaseElement {
         button("undo").disabled = !this.history.canUndo || this.locked;
         button("redo").disabled = !this.history.canRedo || this.locked;
         button("tidy").disabled = this.locked;
-        button("connect").disabled = !this.selected || this.locked;
-        button("delete").disabled = !this.selected || this.locked;
         button("lock").setAttribute("aria-pressed", String(this.locked));
         button("snap").setAttribute("aria-pressed", String(this.snapToGrid));
+        this.shadowRoot.querySelectorAll('[data-detail]').forEach(control => {
+            control.setAttribute("aria-pressed", String(control.dataset.detail === this.detailValue));
+        });
+        const runToggle = this.shadowRoot.querySelector('[part=run-toggle]');
+        runToggle.hidden = !this.lastRunValue;
+        runToggle.querySelector('input').checked = this.showLastRunValue;
+        const mobileRun = this.shadowRoot.querySelector('[data-view-option=last-run]');
+        mobileRun.hidden = !this.lastRunValue;
+        mobileRun.setAttribute('aria-pressed', String(this.showLastRunValue));
     }
     paintViewport() {
         this.shadowRoot.querySelector("[part=world]").style.transform =
             `translate(${this.viewport.x}px,${this.viewport.y}px) scale(${this.viewport.zoom})`;
+        this.shadowRoot.querySelectorAll('[part=port]').forEach(port => port.style.transform = `scale(${1 / this.viewport.zoom})`);
+        this.positionSelectionToolbar();
         this.shadowRoot.querySelector("[data-command=reset]").textContent =
             `${Math.round(this.viewport.zoom * 100)}%`;
         const minimap = this.shadowRoot.querySelector("[part=minimap]");
@@ -836,8 +2552,8 @@ export class ProcessModeler extends BaseElement {
             const rect = svgElement("rect");
             rect.setAttribute("x", String(pos.x));
             rect.setAttribute("y", String(pos.y));
-            rect.setAttribute("width", String(pos.width ?? 220));
-            rect.setAttribute("height", String(pos.height ?? 96));
+            rect.setAttribute("width", String(pos.width ?? 224));
+            rect.setAttribute("height", String(pos.height ?? 64));
             minimap.append(rect);
         });
         const canvas = this.shadowRoot.querySelector("[part=canvas]");
@@ -849,6 +2565,26 @@ export class ProcessModeler extends BaseElement {
         viewport.setAttribute("height", String(canvas.clientHeight / this.viewport.zoom));
         minimap.append(viewport);
     }
+    positionSelectionToolbar() {
+        if (!this.isRendered || (!this.selectedIds.size && !this.selectedLineId))
+            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);
+        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)
+            return;
+        const left = Math.min(...positions.map(position => position.x * this.viewport.zoom + this.viewport.x));
+        const top = Math.min(...positions.map(position => position.y * this.viewport.zoom + this.viewport.y));
+        const bottom = Math.max(...positions.map(position => (position.y + (position.height ?? 64)) * this.viewport.zoom + this.viewport.y));
+        toolbar.style.left = `${Math.max(8, Math.min(left, Math.max(8, canvas.clientWidth - toolbar.offsetWidth - 8)))}px`;
+        toolbar.style.top = `${top > 56 ? top - 48 : Math.min(bottom + 8, Math.max(8, canvas.clientHeight - toolbar.offsetHeight - 8))}px`;
+    }
     focusBox(id) {
         Array.from(this.shadowRoot.querySelectorAll("[data-box-id]"))
             .find((box) => box.dataset.boxId === id)