@unofficialbox/box-open-elements 0.28.7 → 0.29.0

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

@@ -13,6 +13,7 @@ const emit = (element, name, detail) => element.dispatchEvent(new CustomEvent(na
     composed: true,
     cancelable: true,
 }));
+const formatRunDuration = (ms) => ms >= 1000 ? `${(ms / 1000).toFixed(ms >= 10000 ? 0 : 1)} s` : `${Math.round(ms)} ms`;
 /** Projects host documents without owning workflow schemas or persistence. */
 export class ProcessModeler extends BaseElement {
     static tagName = "box-process-modeler";
@@ -47,6 +48,7 @@ export class ProcessModeler extends BaseElement {
     insertion;
     keyboardInsertion;
     keyboardReturn;
+    transientChooserAnchor;
     stopKeyboardAnchor;
     activeDrawer;
     drawerReturn;
@@ -322,7 +324,11 @@ export class ProcessModeler extends BaseElement {
                 if (command.layout)
                     this.layoutValue = structuredClone(command.layout);
                 this.refresh();
-                if (!command.layout &&
+                const inserted = edit.type === 'insert' && !edit.boxId && !command.layout
+                    ? this.projection.boxes.find(box => !previousIds.has(box.id)) : undefined;
+                const reflowed = inserted ? this.reflowStraightInsert(edit, inserted.id, before) : false;
+                if (!reflowed &&
+                    !command.layout &&
                     edit.position &&
                     Number.isFinite(edit.position.x) &&
                     Number.isFinite(edit.position.y)) {
@@ -422,6 +428,42 @@ export class ProcessModeler extends BaseElement {
         }
         return next;
     }
+    /** Make room only on a simple, root-level horizontal connection. */
+    reflowStraightInsert(edit, insertedId, before) {
+        const source = this.projection.boxes.find(box => box.id === edit.from);
+        const target = this.projection.boxes.find(box => box.id === edit.to);
+        const inserted = this.projection.boxes.find(box => box.id === insertedId);
+        if (!source || !target || !inserted || source.parentId || target.parentId || inserted.parentId)
+            return false;
+        const start = before.boxes[source.id], end = before.boxes[target.id];
+        const fresh = this.layoutValue.boxes[insertedId];
+        if (!start || !end || !fresh)
+            return false;
+        const sourceWidth = start.width ?? 224, sourceHeight = start.height ?? 64;
+        const targetHeight = end.height ?? 64, width = fresh.width ?? 224, height = fresh.height ?? 64;
+        if (start.x + sourceWidth >= end.x || Math.abs(start.y + sourceHeight / 2 - end.y - targetHeight / 2) > 24)
+            return false;
+        const x = start.x + sourceWidth + 80;
+        const delta = Math.max(0, x + width + 80 - end.x);
+        const next = this.layout;
+        const shifted = new Set(this.projection.boxes.filter(box => !box.parentId && before.boxes[box.id]?.x >= end.x).map(box => box.id));
+        for (let changed = true; changed;) {
+            changed = false;
+            for (const box of this.projection.boxes)
+                if (box.parentId && shifted.has(box.parentId) && !shifted.has(box.id)) {
+                    shifted.add(box.id);
+                    changed = true;
+                }
+        }
+        for (const box of this.projection.boxes) {
+            if (box.id === insertedId || !shifted.has(box.id))
+                continue;
+            next.boxes[box.id] = { ...next.boxes[box.id], x: next.boxes[box.id].x + delta };
+        }
+        next.boxes[insertedId] = { ...fresh, x, y: start.y + (sourceHeight - height) / 2 };
+        this.layoutValue = next;
+        return true;
+    }
     tidy() {
         if (this.locked)
             return;
@@ -439,7 +481,7 @@ export class ProcessModeler extends BaseElement {
                     element.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'translate(0, 0)' }], { duration: 320, easing: 'ease-out' });
             }
         }
-        this.fit();
+        this.fitTo(this.narrowValue ? 0.55 : 0.7);
     }
     resize(id, width, height) {
         if (!this.layoutValue.boxes[id] ||
@@ -510,10 +552,11 @@ export class ProcessModeler extends BaseElement {
         this.viewport.zoom = next;
         this.paintViewport();
     }
-    fit() {
+    fit() { this.fitTo(0.25); }
+    fitTo(minimumZoom) {
         const bounds = this.bounds();
         const canvas = this.shadowRoot.querySelector("[part=canvas]");
-        this.viewport.zoom = Math.max(0.25, Math.min(1.5, ((canvas.clientWidth || 700) - 40) / bounds.width, ((canvas.clientHeight || 480) - 40) / bounds.height));
+        this.viewport.zoom = Math.max(minimumZoom, Math.min(1.5, ((canvas.clientWidth || 700) - 40) / bounds.width, ((canvas.clientHeight || 480) - 40) / bounds.height));
         this.viewport.x = 20 - bounds.x * this.viewport.zoom;
         this.viewport.y = 20 - bounds.y * this.viewport.zoom;
         this.paintViewport();
@@ -1355,7 +1398,11 @@ export class ProcessModeler extends BaseElement {
             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 } });
+                const anchor = Array.from(this.shadowRoot.querySelectorAll('[part=port]'))
+                    .find(element => element.dataset.owner === box.id && element.dataset.side === side);
+                const returnFocus = Array.from(this.shadowRoot.querySelectorAll('[data-box-id]'))
+                    .find(element => element.dataset.boxId === box.id);
+                this.openAnchoredChooser(this.nextEdit(box, side, { x: pos.x + direction[0] * 320, y: pos.y + direction[1] * 170 }), this.nextChooserTitle(box, side), anchor, returnFocus);
                 return;
             }
             if (event.altKey) {
@@ -1479,7 +1526,6 @@ export class ProcessModeler extends BaseElement {
             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;
@@ -1488,7 +1534,7 @@ export class ProcessModeler extends BaseElement {
             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);
+            this.showConnectTooltip(point, target ? pinned ? `Pin to the ${pinned} of ${target.title}` : `Connect to ${target.title}` : 'Drop here to add a connected step');
             return;
         }
         if (this.endDrag) {
@@ -1589,12 +1635,23 @@ export class ProcessModeler extends BaseElement {
                 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] } });
+                    const source = this.projection.boxes.find(box => box.id === port.id);
+                    const anchor = Array.from(this.shadowRoot.querySelectorAll('[part=port]'))
+                        .find(element => element.dataset.owner === port.id && element.dataset.side === port.side);
+                    this.openAnchoredChooser(this.nextEdit(source, port.side, { x: pos.x + offsets[0], y: pos.y + offsets[1] }), this.nextChooserTitle(source, port.side), anchor);
                 }
                 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) });
+                    else {
+                        const source = this.projection.boxes.find(box => box.id === port.id);
+                        const frame = this.boxAt(point, undefined, true);
+                        if ((frame?.id ?? null) !== (source.parentId ?? null))
+                            this.setStatus('Drop inside the same frame to add a connected step');
+                        else
+                            this.openChooserAtPoint({ type: 'add', from: port.id, fromSide: port.side, parentId: source.parentId, position: point }, `Add after ${source.title}`, point);
+                    }
                 }
             }
             return;
@@ -1773,11 +1830,45 @@ export class ProcessModeler extends BaseElement {
         promoteModal(chooser);
         picker.focus();
     }
+    nextEdit(box, side, position) {
+        const shape = box.shape ?? this.catalog.find(kind => kind.kind === box.kind)?.shape;
+        const outgoing = this.projection.lines.filter(line => line.from === box.id);
+        if ((!side || side === 'east') && shape !== 'gateway' && outgoing.length === 1)
+            return { type: 'insert', lineId: outgoing[0].id, from: box.id, to: outgoing[0].to };
+        return { type: 'add', from: box.id, ...(side ? { fromSide: side } : {}), parentId: box.parentId, ...(position ? { position } : {}) };
+    }
+    nextChooserTitle(box, side) {
+        const edit = this.nextEdit(box, side);
+        if (edit.type === 'insert') {
+            const target = this.projection.boxes.find(candidate => candidate.id === edit.to);
+            return `Insert between ${box.title} and ${target?.title ?? 'the next step'}`;
+        }
+        if (box.shape === 'gateway')
+            return `Add a path from ${box.title}`;
+        return side && side !== 'east' ? `Add ${{ north: 'above', south: 'below', west: 'before' }[side]} ${box.title}, connected` : `Add after ${box.title}`;
+    }
+    openChooserAtPoint(edit, title, point, returnFocus) {
+        if (this.keyboardInsertion)
+            this.closeKeyboardChooser();
+        const anchor = document.createElement('span');
+        anchor.style.cssText = `position:absolute;left:${point.x}px;top:${point.y}px;width:1px;height:1px;pointer-events:none`;
+        this.shadowRoot.querySelector('[part=world]').append(anchor);
+        this.transientChooserAnchor = anchor;
+        this.openAnchoredChooser(edit, title, anchor, returnFocus);
+    }
+    openLineChooser(line, returnFocus) {
+        const source = this.projection.boxes.find(box => box.id === line.from);
+        const target = this.projection.boxes.find(box => box.id === line.to);
+        const points = this.routedLines.get(line.id) ?? routeProcessLine(line, this.layoutValue, this.projection);
+        this.openChooserAtPoint({ type: 'insert', lineId: line.id, from: line.from, to: line.to }, `Insert between ${source?.title ?? line.from} and ${target?.title ?? line.to}`, lineMidpoint(points), returnFocus);
+    }
     closeKeyboardChooser(returnFocus = false) {
         const chooser = this.shadowRoot?.querySelector('[part=keyboard-chooser]');
         dismissPopover(chooser ?? null);
         this.stopKeyboardAnchor?.();
         this.stopKeyboardAnchor = undefined;
+        this.transientChooserAnchor?.remove();
+        this.transientChooserAnchor = undefined;
         document.removeEventListener('pointerdown', this.dismissKeyboardChooserOutside, true);
         this.keyboardInsertion = undefined;
         if (returnFocus)
@@ -1790,32 +1881,35 @@ export class ProcessModeler extends BaseElement {
             this.closeKeyboardChooser();
     };
     openKeyboardChooser(box) {
-        const chooser = this.shadowRoot.querySelector('[part=keyboard-chooser]');
         const shape = box.shape ?? this.catalog.find(kind => kind.kind === box.kind)?.shape ?? (box.frame ? 'frame' : 'task');
         const outgoing = this.projection.lines.filter(line => line.from === box.id);
         const target = outgoing.length === 1 ? this.projection.boxes.find(candidate => candidate.id === outgoing[0].to) : undefined;
         const insert = shape !== 'gateway' && outgoing.length === 1 && target;
+        const anchor = Array.from(this.shadowRoot.querySelectorAll('[data-box-id]'))
+            .find(element => element.dataset.boxId === box.id);
+        this.openAnchoredChooser(insert
+            ? { type: 'insert', lineId: outgoing[0].id, from: box.id, to: target.id }
+            : { type: 'add', from: box.id }, insert ? `Insert between ${box.title} and ${target.title}`
+            : shape === 'gateway' ? `Add a path from ${box.title}` : `Add after ${box.title}`, anchor);
+    }
+    openAnchoredChooser(edit, title, anchor, returnFocus) {
+        const chooser = this.shadowRoot.querySelector('[part=keyboard-chooser]');
         if (this.keyboardInsertion)
             this.closeKeyboardChooser();
-        this.keyboardInsertion = insert
-            ? { type: 'insert', lineId: outgoing[0].id, from: box.id, to: target.id }
-            : { type: 'add', from: box.id };
-        chooser.querySelector('[part=chooser-title]').textContent = insert
-            ? `Insert between ${box.title} and ${target.title}`
-            : shape === 'gateway' ? `Add a path from ${box.title}` : `Add after ${box.title}`;
+        this.keyboardInsertion = edit;
+        chooser.querySelector('[part=chooser-title]').textContent = title;
         const picker = chooser.querySelector('box-kind-picker');
         picker.catalog = this.catalog.filter(kind => !kind.placement);
         picker.refresh();
-        this.keyboardReturn = Array.from(this.shadowRoot.querySelectorAll('[data-box-id]'))
-            .find(element => element.dataset.boxId === box.id);
-        if (!this.keyboardReturn || !promotePopover(chooser)) {
+        this.keyboardReturn = returnFocus ?? anchor;
+        if (!anchor || !promotePopover(chooser)) {
             const edit = this.keyboardInsertion;
             this.closeKeyboardChooser();
             if (edit)
                 this.openChooser(edit);
             return;
         }
-        this.stopKeyboardAnchor = trackAnchor(this.keyboardReturn, chooser, {
+        this.stopKeyboardAnchor = trackAnchor(anchor, chooser, {
             placement: { side: 'right', align: 'start' }, offset: 8, padding: 12,
         });
         document.addEventListener('pointerdown', this.dismissKeyboardChooserOutside, true);
@@ -1970,14 +2064,14 @@ export class ProcessModeler extends BaseElement {
                 element.append(loop);
             }
             const metrics = this.showLastRunValue ? this.lastRunValue?.steps[box.id] : undefined;
-            if (metrics) {
+            if (this.showLastRunValue && this.lastRunValue && shape === 'task') {
                 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`,
+                line.textContent = !metrics || metrics.notInRun ? "Not in the last run" : [
+                    metrics.callsPerSecond === undefined ? "" : `${metrics.callsPerSecond.toFixed(1)}/s`,
+                    metrics.p95Ms === undefined ? "" : `p95 ${formatRunDuration(metrics.p95Ms)}`,
                 ].filter(Boolean).join(" · ");
-                if (metrics.failedShare !== undefined && metrics.failedShare > 0) {
+                if (metrics?.failedShare !== undefined && metrics.failedShare > 0 && !metrics.notInRun) {
                     const failed = document.createElement('span');
                     failed.setAttribute('part', 'metric-warning');
                     failed.textContent = `${(metrics.failedShare * 100).toFixed(1)}% failed`;
@@ -2021,7 +2115,7 @@ export class ProcessModeler extends BaseElement {
                 else
                     this.select(box.id);
             });
-            if (!this.disableConnections && !this.locked) {
+            if (!this.disableConnections && !this.locked && !['end', 'finish'].includes(box.kind)) {
                 for (const side of ["north", "east", "south", "west"]) {
                     const port = document.createElement("button");
                     port.type = "button";
@@ -2034,7 +2128,7 @@ export class ProcessModeler extends BaseElement {
                         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] } });
+                            this.openAnchoredChooser(this.nextEdit(box, side, { x: pos.x + offsets[0], y: pos.y + offsets[1] }), this.nextChooserTitle(box, side), port);
                         }
                     });
                     element.append(port);
@@ -2096,7 +2190,7 @@ export class ProcessModeler extends BaseElement {
             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.style.strokeWidth = `${Math.round((1.5 + Math.max(0, Math.min(1, line.share)) * 2.5) * 100) / 100}px`;
                 path.setAttribute('aria-label', `${Math.round(line.share * 100)}% of last-run traffic`);
             }
             lines.append(path);
@@ -2138,6 +2232,11 @@ export class ProcessModeler extends BaseElement {
             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);
+            if (this.showLastRunValue && line.share !== undefined) {
+                const share = document.createElement('small');
+                share.textContent = `${Math.round(line.share * 100)}%`;
+                label.append(share);
+            }
             const actions = document.createElement("div");
             actions.setAttribute("part", "connection-actions");
             label.append(actions);
@@ -2186,7 +2285,7 @@ export class ProcessModeler extends BaseElement {
                         to: line.to,
                     };
                     if (type === "insert" && this.catalog.length) {
-                        this.openChooser(edit);
+                        this.openLineChooser(line, button);
                     }
                     else
                         this.requestEdit(edit);
@@ -2675,8 +2774,13 @@ export class ProcessModeler extends BaseElement {
                 const report = document.createElement('section');
                 report.setAttribute('part', 'inspector-metrics');
                 const title = document.createElement('h3');
-                title.textContent = this.lastRunValue?.label ?? 'Last run';
+                title.textContent = 'Last run';
                 report.append(title);
+                if (this.lastRunValue?.label) {
+                    const source = document.createElement('p');
+                    source.textContent = `From ${this.lastRunValue.label}.`;
+                    report.append(source);
+                }
                 if (metrics.notInRun) {
                     const note = document.createElement('p');
                     note.textContent = 'Not in this run';
@@ -2684,9 +2788,7 @@ export class ProcessModeler extends BaseElement {
                 }
                 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;
+                    for (const [label, value] of [['Per second', metrics.callsPerSecond === undefined ? '–' : metrics.callsPerSecond.toFixed(1)], ['95% finished within', metrics.p95Ms === undefined ? '–' : formatRunDuration(metrics.p95Ms)], ['Failed', metrics.failedShare === undefined ? '–' : `${(metrics.failedShare * 100).toFixed(1)}%`]]) {
                         const term = document.createElement('dt');
                         term.textContent = label;
                         const detail = document.createElement('dd');
@@ -2718,26 +2820,35 @@ export class ProcessModeler extends BaseElement {
     }
     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(',')}`;
+        const key = `${[...this.selectedIds].join(',')}|${this.selected?.kind}|${this.selected?.shape}|${this.selectedLineId}|${Boolean(this.selectedLineId && this.layoutValue.lines?.[this.selectedLineId])}|${this.locked}|${this.narrowValue}|${this.projection.lines.filter(line => line.from === this.selectedId).map(line => `${line.id}:${line.label}:${line.dashed}`).join(',')}`;
         if (key === this.selectionToolbarKey)
             return;
         this.selectionToolbarKey = key;
         toolbar.replaceChildren();
         if (!this.selectedIds.size && !this.selectedLineId)
             return;
-        const add = (label, command, action) => {
+        const add = (label, command, action, withPlus = false) => {
             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;
+            if (withPlus) {
+                const icon = document.createElement('span');
+                icon.setAttribute('part', 'selection-plus');
+                icon.setAttribute('aria-hidden', 'true');
+                icon.textContent = '+';
+                button.append(icon);
+            }
+            const text = document.createElement('span');
+            text.textContent = label;
+            button.append(text);
             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 }));
+            add('Insert a step', 'insert', () => this.openLineChooser(line, toolbar.querySelector('[data-selection-command=insert]') ?? undefined), true);
             if (this.layoutValue.lines?.[line.id])
                 add('Reset line', 'reset-line', () => this.resetLine(line.id));
             if (!this.disableConnections)
@@ -2746,11 +2857,16 @@ export class ProcessModeler extends BaseElement {
         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', () => this.openDrawer('inspector'));
+            if (!['end', 'finish', 'section', 'note'].includes(box.kind))
+                add(box.shape === 'gateway' ? 'Add a path' : 'Add next', 'add-next', () => this.openAnchoredChooser(this.nextEdit(box), this.nextChooserTitle(box), toolbar.querySelector('[data-selection-command=add-next]') ?? undefined), true);
+            if (failurePath)
+                add('If it fails', 'add-failure', () => this.openAnchoredChooser({ type: 'add', from: box.id, routeLabel: 'If it fails', dashed: true }, `If a step in ${box.title} fails`, toolbar.querySelector('[data-selection-command=add-failure]') ?? undefined, Array.from(this.shadowRoot.querySelectorAll('[data-box-id]')).find(element => element.dataset.boxId === box.id)), true);
+            if (!['start', 'timer', 'section'].includes(box.kind))
+                add('Duplicate', 'duplicate', () => { const position = this.layoutValue.boxes[box.id]; this.requestEdit({ type: 'duplicate', sourceId: box.id, position: { x: position.x + 32, y: position.y + 32 } }); });
+            if (!['start', 'timer'].includes(box.kind))
+                add('Delete', 'delete-many', () => this.selectionCommand('delete-many'));
         }
         else {
             add('Line up', 'align', () => this.selectionCommand('align'));
@@ -2780,7 +2896,9 @@ export class ProcessModeler extends BaseElement {
         checksStatus.dataset.state = count ? 'bad' : 'ready';
     }
     paintViewport() {
-        this.shadowRoot.querySelector("[part=world]").style.transform =
+        const world = this.shadowRoot.querySelector("[part=world]");
+        world.style.setProperty('--boe-process-inverse-zoom', String(1 / this.viewport.zoom));
+        world.style.transform =
             `translate(${this.viewport.x}px,${this.viewport.y}px) scale(${this.viewport.zoom})`;
         const canvas = this.shadowRoot.querySelector("[part=canvas]");
         const grid = 16 * this.viewport.zoom * (this.viewport.zoom < 0.5 ? 4 : 1);

package/dist/patterns/run/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./types.js";
 export * from "./run-trace.js";
+export * from "./trace-waterfall.js";
 export * from "./progress.js";
 export * from "./run-summary.js";

package/dist/patterns/run/index.js

@@ -2,5 +2,6 @@
 export * from "./types.js";
 // Machine execution trace surface
 export * from "./run-trace.js";
+export * from "./trace-waterfall.js";
 export * from "./progress.js";
 export * from "./run-summary.js";

package/dist/patterns/run/run-trace.d.ts

@@ -1,5 +1,6 @@
 import type { RunResolution, RunStep, RunStepStatus } from "./types.js";
 import { BaseElement } from "../../core/index.js";
+export type RunTraceDensity = "default" | "compact";
 /** Every status in words — colour never carries the meaning alone. */
 export declare const RUN_STEP_STATUS_LABEL: Record<RunStepStatus, string>;
 /**
@@ -28,6 +29,8 @@ export declare class RunTrace extends BaseElement {
     private readonly previousStatuses;
     get heading(): string;
     set heading(value: string);
+    get density(): RunTraceDensity;
+    set density(value: RunTraceDensity);
     get steps(): RunStep[];
     set steps(value: RunStep[]);
     /** The resolved run — same object the render uses. */

package/dist/patterns/run/run-trace.js

@@ -34,6 +34,29 @@ const STATUS_TONE = {
 const elementStyles = `
         :host {
           display: block;
+          --_run-marker-column: var(--boe-run-trace-marker-column-width, 1.1rem);
+          --_run-marker-size: var(--boe-run-trace-marker-size, 1rem);
+          --_run-marker-inline: var(--boe-run-trace-marker-inline-inset, 0.15rem);
+          --_run-marker-block: var(--boe-run-trace-marker-block-offset, 0.2rem);
+          --_run-step-padding: var(--boe-run-trace-step-padding-block, 0.55rem);
+          --_run-step-row-gap: var(--boe-run-trace-step-row-gap, 0rem);
+          --_run-step-column-gap: var(--boe-run-trace-step-column-gap, 0.65rem);
+          --_run-child-row-gap: var(--boe-run-trace-child-row-gap, 0.4rem);
+          --_run-connector-start-gap: var(--boe-run-trace-connector-start-gap, 0.1rem);
+          --_run-connector-overhang: var(--boe-run-trace-connector-end-overhang, 0.35rem);
+        }
+
+        :host([density="compact"]) {
+          --_run-marker-column: var(--boe-run-trace-marker-column-width, 1rem);
+          --_run-marker-size: var(--boe-run-trace-marker-size, 0.875rem);
+          --_run-marker-inline: var(--boe-run-trace-marker-inline-inset, 0.1rem);
+          --_run-marker-block: var(--boe-run-trace-marker-block-offset, 0.15rem);
+          --_run-step-padding: var(--boe-run-trace-step-padding-block, 0.35rem);
+          --_run-step-row-gap: var(--boe-run-trace-step-row-gap, 0rem);
+          --_run-step-column-gap: var(--boe-run-trace-step-column-gap, 0.5rem);
+          --_run-child-row-gap: var(--boe-run-trace-child-row-gap, 0.25rem);
+          --_run-connector-start-gap: var(--boe-run-trace-connector-start-gap, 0.04rem);
+          --_run-connector-overhang: var(--boe-run-trace-connector-end-overhang, 0.25rem);
         }
 
         /* The host's own display would otherwise beat the UA rule for [hidden],
@@ -94,6 +117,8 @@ const elementStyles = `
         }
 
         [part="steps"] {
+          display: grid;
+          row-gap: var(--_run-step-row-gap);
           margin: 0;
           padding: 0;
           list-style: none;
@@ -104,28 +129,33 @@ const elementStyles = `
         [part="step"] {
           position: relative;
           display: grid;
-          grid-template-columns: auto 1fr;
-          gap: 0.65rem;
-          padding: 0.55rem 0 0.55rem 0.15rem;
+          grid-template-columns: var(--_run-marker-column) minmax(0, 1fr);
+          column-gap: var(--_run-step-column-gap);
+          padding: var(--_run-step-padding) 0 var(--_run-step-padding) var(--_run-marker-inline);
         }
 
         [part="step"]:not(:last-child)::after {
           content: "";
           position: absolute;
-          left: calc(0.15rem + 0.55rem - 1px);
-          top: 1.9rem;
-          bottom: -0.35rem;
+          left: calc(var(--_run-marker-inline) + var(--_run-marker-column) / 2 - 1px);
+          top: calc(var(--_run-step-padding) + var(--_run-marker-block) + var(--_run-marker-column) / 2 + var(--_run-marker-size) / 2 + var(--_run-connector-start-gap));
+          bottom: calc(-1 * var(--_run-connector-overhang) - var(--_run-step-row-gap));
           width: 2px;
           background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 72%, transparent);
         }
 
         [part="marker"] {
-          inline-size: 1.1rem;
-          block-size: 1.1rem;
-          margin-top: 0.2rem;
+          inline-size: var(--_run-marker-column);
+          block-size: var(--_run-marker-column);
+          margin-top: var(--_run-marker-block);
           border-radius: 999px;
-          border: 2px solid var(--run-tone, var(--boe-token-text-text-secondary, #6f6f6f));
-          background: color-mix(in srgb, var(--run-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 14%, var(--boe-token-surface-surface, #ffffff) 86%);
+          align-items: center;
+          justify-content: center;
+        }
+
+        [part="marker"] .boe-status {
+          inline-size: var(--_run-marker-size);
+          block-size: var(--_run-marker-size);
         }
 
         [part="step"][data-status="running"] [part="marker"] {
@@ -218,7 +248,7 @@ const elementStyles = `
           padding: 0;
           list-style: none;
           display: grid;
-          gap: 0.4rem;
+          gap: var(--_run-child-row-gap);
         }
 
         [part="child"] {
@@ -254,7 +284,7 @@ const elementStyles = `
         :host([variant="plain"]) [part="panel"] { border: 0; border-radius: 0; background: none; padding: 0; }
         :host([variant="plain"]) [part="header"],
         :host([variant="plain"]) [part="summary"] { display: none; }
-        :host([variant="plain"]) [part="step"] { padding-block: 0.35rem; }
+        :host([variant="plain"]) [part="step"] { padding-block: var(--boe-run-trace-step-padding-block, 0.35rem); }
         :host([variant="plain"]) [part="step"]::after { display: none; }
         :host([variant="plain"]) [part="status"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
         :host([variant="plain"]) [part="toggle"] { display: none; }
@@ -304,6 +334,15 @@ export class RunTrace extends BaseElement {
     set heading(value) {
         this.setAttribute("heading", value);
     }
+    get density() {
+        return this.getAttribute("density") === "compact" ? "compact" : "default";
+    }
+    set density(value) {
+        if (value === "compact")
+            this.setAttribute("density", "compact");
+        else
+            this.removeAttribute("density");
+    }
     get steps() {
         const raw = this.getAttribute("steps");
         if (!raw) {

package/dist/patterns/run/trace-waterfall.d.ts

@@ -0,0 +1,80 @@
+import { BaseElement } from "../../core/index.js";
+export type TraceSpanStatus = "ok" | "failed" | "skipped" | "running";
+export interface TraceMarker {
+    atMs: number;
+    label: string;
+}
+export interface TraceSpan {
+    id: string;
+    parentId?: string;
+    label: string;
+    kind: string;
+    startMs: number;
+    durationMs: number;
+    status: TraceSpanStatus;
+    system?: boolean;
+    markers?: TraceMarker[];
+    detail?: {
+        input?: unknown;
+        response?: unknown;
+        attributes?: unknown;
+    };
+}
+export interface TraceRow {
+    span: TraceSpan;
+    comparisonOnly: boolean;
+    parentId?: string;
+    depth: number;
+    hasChildren: boolean;
+    expanded: boolean;
+    position: number;
+    siblings: number;
+}
+export interface TraceLayout {
+    rows: TraceRow[];
+    hiddenCount: number;
+    endMs: number;
+}
+/** Invalid/duplicate spans are omitted; invalid parent relationships become roots. */
+export declare function validTraceSpans(spans: TraceSpan[]): TraceSpan[];
+export declare function traceSpanDuration(span: TraceSpan, nowMs: number): number;
+/** Stable report layout: input sibling order, one zero-based axis, no browser dependency. */
+export declare function traceWaterfallLayout(spans: TraceSpan[], options?: {
+    showSystem?: boolean;
+    search?: string;
+    collapsed?: ReadonlySet<string>;
+    nowMs?: number;
+    comparisonSpans?: TraceSpan[];
+}): TraceLayout;
+/** Host-driven live or completed trace; requests selection, never owns host sessions. */
+export declare class TraceWaterfall extends BaseElement {
+    static readonly tagName = "box-trace-waterfall";
+    static get observedAttributes(): string[];
+    private _spans;
+    private _comparisonSpans;
+    private collapsed;
+    private search;
+    private table;
+    private code;
+    private fullScreen;
+    private focusedId;
+    get heading(): string;
+    set heading(value: string);
+    get spans(): TraceSpan[];
+    set spans(value: TraceSpan[]);
+    get comparisonSpans(): TraceSpan[];
+    set comparisonSpans(value: TraceSpan[]);
+    get showSystem(): boolean;
+    set showSystem(value: boolean);
+    get selectedSpanId(): string;
+    set selectedSpanId(value: string);
+    get nowMs(): number;
+    set nowMs(value: number);
+    get layout(): TraceLayout;
+    protected renderTemplate(): void;
+    private select;
+    private focusRow;
+    private toggle;
+    protected setupListeners(): void;
+    protected update(): void;
+}