@unofficialbox/box-open-elements 0.24.0 → 0.25.0

package/dist/patterns/flow-builder/flow-builder.d.ts

@@ -27,7 +27,11 @@ export declare class FlowBuilder<N extends FlowNodeBase = FlowNode> extends Base
     private headingEl?;
     private renderedRenderer?;
     private observer?;
-    private narrow;
+    private narrowValue;
+    private visible;
+    get narrow(): boolean;
+    /** Focus a rendered card without changing selection or opening the editor. */
+    focusNode(node: N): void;
     private insertion?;
     private invoker?;
     private spine;

package/dist/patterns/flow-builder/flow-builder.js

@@ -22,7 +22,11 @@ export class FlowBuilder extends BaseElement {
     headingEl;
     renderedRenderer;
     observer;
-    narrow = false;
+    narrowValue = false;
+    visible = true;
+    get narrow() { return this.narrowValue; }
+    /** Focus a rendered card without changing selection or opening the editor. */
+    focusNode(node) { this.spine?.focusNode(node); }
     insertion;
     invoker;
     spine;
@@ -60,12 +64,18 @@ export class FlowBuilder extends BaseElement {
             this.refresh();
     }
     connectedCallback() {
+        this.visible = this.getClientRects().length > 0;
         super.connectedCallback();
         if (typeof ResizeObserver !== "undefined") {
-            this.observer = new ResizeObserver(entries => this.setNarrow(entries[0].contentRect.width < 800));
+            this.observer = new ResizeObserver(entries => {
+                const rect = entries[0].contentRect;
+                this.visible = rect.width > 0 && rect.height > 0 && this.getClientRects().length > 0;
+                this.setNarrow(this.visible && rect.width < 800);
+                this.updateInspector();
+            });
             this.observer.observe(this);
         }
-        this.setNarrow((this.getBoundingClientRect().width || this.ownerDocument.defaultView?.innerWidth || 1024) < 800);
+        this.setNarrow(this.visible && this.getBoundingClientRect().width < 800);
     }
     disconnectedCallback() {
         this.observer?.disconnect();
@@ -79,9 +89,10 @@ export class FlowBuilder extends BaseElement {
     setNarrow(narrow) {
         if (this.narrow === narrow)
             return;
-        this.narrow = narrow;
+        this.narrowValue = narrow;
         this.shadowRoot.querySelector("[part=layout]").dataset.narrow = String(narrow);
         this.updateInspector();
+        this.dispatchEvent(new CustomEvent("narrow-changed", { detail: { narrow }, bubbles: true, composed: true }));
     }
     renderTemplate() {
         this.shadowRoot.innerHTML = `<style>
@@ -134,7 +145,7 @@ export class FlowBuilder extends BaseElement {
         });
         this.palette.addEventListener("kind-pick", event => this.insert(event.detail.kind, { list: this.nodes, index: this.nodes.length, label: "Append to flow" }));
         this.drawer.addEventListener("open-changed", event => {
-            if (!event.detail.open && this.narrow && this.selectedValue)
+            if (!event.detail.open && this.visible && this.narrow && this.selectedValue)
                 this.select(null);
         });
     }
@@ -220,7 +231,7 @@ export class FlowBuilder extends BaseElement {
         if (this.inspector.parentElement !== target)
             target.append(this.inspector);
         if (this.inspected === this.selected && this.renderedRenderer === this.renderer && (!this.selected || this.headingEl?.tagName === `H${this.headingLevel}`)) {
-            this.drawer.open = this.narrow && Boolean(this.selected);
+            this.drawer.open = this.visible && this.narrow && Boolean(this.selected);
             return;
         }
         this.cleanupInspector?.();
@@ -243,7 +254,7 @@ export class FlowBuilder extends BaseElement {
             }
             this.drawer.heading = nodeTitle(this.selected, this.catalog, this.model);
         }
-        this.drawer.open = this.narrow && Boolean(this.selected);
+        this.drawer.open = this.visible && this.narrow && Boolean(this.selected);
     }
 }
 FlowBuilder.register();

package/dist/patterns/flow-builder/primitives.js

@@ -24,7 +24,7 @@ export class FlowCard extends BaseElement {
     renderTemplate() {
         this.shadowRoot.innerHTML = `<style>${styles}
       button { width:100%; text-align:start; display:grid; gap:6px; padding:16px; border:1px solid var(--boe-token-stroke-stroke,#ddd); border-radius:var(--boe-profile-radius-med,8px); background:var(--boe-token-surface-surface,#fff); overflow-wrap:anywhere; }
-      button[aria-pressed=true] { border-color:var(--boe-token-surface-surface-brand,#0061d5); background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 8%,var(--boe-token-surface-surface,#fff)); }
+      button[aria-pressed=true] { border-color:var(--boe-token-surface-surface-brand,#0061d5); background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 5%,var(--boe-token-surface-surface,#fff)); }
       button[data-invalid=true] { border-color:var(--boe-token-text-status-text-error,#b92340); }
       button.has-icon{grid-template-columns:20px minmax(0,1fr);column-gap:12px} button.has-icon [part=icon]{grid-column:1;grid-row:1/span 4} button.has-icon [part=title],button.has-icon [part=kind],button.has-icon [part=description],button.has-icon [part=status],button.has-icon [part=error]{grid-column:2}
       [part=icon]{color:var(--boe-token-surface-surface-brand,#0061d5);width:20px;height:20px} [part=icon][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [part=icon] svg{display:block;width:20px;height:20px} [part=title] { font-weight:650; } [part=kind],[part=description] { color:var(--boe-token-text-text-secondary,#666); } [part=error] { color:var(--boe-token-text-status-text-error,#b92340); }

package/dist/patterns/process-modeler/bridge.d.ts

@@ -0,0 +1,10 @@
+import type { NodePath } from "../flow-builder/model.js";
+import type { ProcessCheck, ProcessLayout, ProcessLoadOptions, ProcessPositionSnapshot, ProcessProjection } from "./model.js";
+/** Restore only current paths with explicitly matching host fingerprints. */
+export declare function restoreProcessPositions<N>(projection: ProcessProjection<N>, positions: ProcessLoadOptions["positions"]): ProcessLayout;
+/** Detached, ID-sorted entries; stale layout IDs and unplaced boxes are omitted. */
+export declare function snapshotProcessPositions<N>(projection: ProcessProjection<N>, layout: ProcessLayout): readonly ProcessPositionSnapshot[];
+/** Resolve a host field path to its deepest projected box, without string coercion. */
+export declare function normalizeProcessSelectionPath<N>(projection: ProcessProjection<N>, path: NodePath | null | undefined): NodePath | null;
+/** Generic topology only. Hosts own workflow vocabulary and semantic validation. */
+export declare function graphChecks<N>(projection: ProcessProjection<N>): readonly ProcessCheck[];

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

@@ -0,0 +1,173 @@
+const validPosition = (position) => Number.isFinite(position.x) && Number.isFinite(position.y) &&
+    (position.width === undefined || (Number.isFinite(position.width) && position.width > 0)) &&
+    (position.height === undefined || (Number.isFinite(position.height) && position.height > 0));
+/** Restore only current paths with explicitly matching host fingerprints. */
+export function restoreProcessPositions(projection, positions) {
+    const savedPositions = Array.isArray(positions)
+        ? Object.fromEntries(positions.filter(entry => entry.path).map(entry => [JSON.stringify(entry.path), entry]))
+        : positions;
+    const boxes = {};
+    for (const box of projection.boxes) {
+        if (!box.path || box.fingerprint === undefined)
+            continue;
+        const key = JSON.stringify(box.path);
+        const saved = savedPositions && Object.hasOwn(savedPositions, key) ? savedPositions[key] : undefined;
+        if (!saved || saved.fingerprint === undefined || saved.fingerprint !== box.fingerprint ||
+            !saved.position || !validPosition(saved.position))
+            continue;
+        Object.defineProperty(boxes, box.id, {
+            value: { ...saved.position }, enumerable: true, configurable: true, writable: true,
+        });
+    }
+    return { boxes };
+}
+/** Detached, ID-sorted entries; stale layout IDs and unplaced boxes are omitted. */
+export function snapshotProcessPositions(projection, layout) {
+    const snapshots = [];
+    for (const box of projection.boxes) {
+        if (!Object.hasOwn(layout.boxes, box.id))
+            continue;
+        const position = layout.boxes[box.id];
+        if (!position || !validPosition(position))
+            continue;
+        snapshots.push({
+            id: box.id,
+            ...(box.path ? { path: [...box.path] } : {}),
+            ...(box.fingerprint !== undefined ? { fingerprint: box.fingerprint } : {}),
+            position: { ...position },
+        });
+    }
+    return snapshots.sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
+}
+/** Resolve a host field path to its deepest projected box, without string coercion. */
+export function normalizeProcessSelectionPath(projection, path) {
+    if (path == null)
+        return null;
+    let selected;
+    for (const box of projection.boxes) {
+        if (box.path && box.path.length <= path.length &&
+            box.path.every((segment, index) => segment === path[index]) &&
+            (!selected || box.path.length > selected.length))
+            selected = box.path;
+    }
+    return selected ? [...selected] : null;
+}
+const branchKinds = new Set(["decision", "choice", "weighted", "weighted-choice", "parallel", "fork"]);
+const parallelKinds = new Set(["parallel", "fork"]);
+/** Generic topology only. Hosts own workflow vocabulary and semantic validation. */
+export function graphChecks(projection) {
+    const boxes = new Map(projection.boxes.map(box => [box.id, box]));
+    const outgoing = new Map(projection.boxes.map(box => [box.id, []]));
+    const incoming = new Map(projection.boxes.map(box => [box.id, []]));
+    for (const line of projection.lines) {
+        if (!boxes.has(line.from) || !boxes.has(line.to))
+            continue;
+        outgoing.get(line.from).push(line.to);
+        incoming.get(line.to).push(line.from);
+    }
+    // Iterative strongly connected components keep long host graphs off the call stack.
+    const visited = new Set();
+    const finished = [];
+    for (const id of boxes.keys()) {
+        if (visited.has(id))
+            continue;
+        visited.add(id);
+        const stack = [{ id, next: 0 }];
+        while (stack.length) {
+            const top = stack[stack.length - 1];
+            const targets = outgoing.get(top.id);
+            if (top.next < targets.length) {
+                const target = targets[top.next++];
+                if (!visited.has(target)) {
+                    visited.add(target);
+                    stack.push({ id: target, next: 0 });
+                }
+            }
+            else {
+                finished.push(top.id);
+                stack.pop();
+            }
+        }
+    }
+    visited.clear();
+    const loops = new Set();
+    for (const id of finished.reverse()) {
+        if (visited.has(id))
+            continue;
+        const component = [];
+        const stack = [id];
+        visited.add(id);
+        while (stack.length) {
+            const current = stack.pop();
+            component.push(current);
+            for (const source of incoming.get(current)) {
+                if (!visited.has(source)) {
+                    visited.add(source);
+                    stack.push(source);
+                }
+            }
+        }
+        if (component.length > 1 || outgoing.get(id).includes(id)) {
+            for (const member of component)
+                loops.add(member);
+        }
+    }
+    const reachable = (start) => {
+        const distances = new Map([[start, 0]]);
+        const queue = [start];
+        for (let i = 0; i < queue.length; i++) {
+            const id = queue[i];
+            for (const target of outgoing.get(id)) {
+                if (!distances.has(target)) {
+                    distances.set(target, distances.get(id) + 1);
+                    queue.push(target);
+                }
+            }
+        }
+        return distances;
+    };
+    const allPathsMeet = (start, join) => {
+        const queue = [start];
+        const seen = new Set();
+        for (let i = 0; i < queue.length; i++) {
+            const id = queue[i];
+            if (id === join || seen.has(id))
+                continue;
+            seen.add(id);
+            const targets = outgoing.get(id);
+            if (!targets.length || loops.has(id))
+                return false;
+            queue.push(...targets);
+        }
+        return true;
+    };
+    const checks = [];
+    for (const box of projection.boxes) {
+        const add = (message) => checks.push({
+            message, boxId: box.id, ...(box.path ? { path: [...box.path] } : {}),
+        });
+        if (loops.has(box.id))
+            add("This box is part of a loop. Remove a connection to break the loop.");
+        const targets = outgoing.get(box.id);
+        if (targets.length < 2)
+            continue;
+        if (!branchKinds.has(box.kind)) {
+            add("This step leads to multiple places. Use a Decision, Weighted choice or Parallel to branch.");
+            continue;
+        }
+        const routes = targets.map(reachable);
+        const candidates = [...routes[0].keys()].filter(id => id !== box.id && routes.every(route => route.has(id)));
+        candidates.sort((a, b) => Math.max(...routes.map(route => route.get(a))) - Math.max(...routes.map(route => route.get(b))) ||
+            (a < b ? -1 : a > b ? 1 : 0));
+        const join = candidates.find(id => targets.every(target => allPathsMeet(target, id)));
+        if (!join) {
+            add(parallelKinds.has(box.kind)
+                ? "Parallel paths must meet at a Wait for all (join) box."
+                : "These branch paths do not meet. Connect every path to a common next box.");
+        }
+        else if (parallelKinds.has(box.kind) && boxes.get(join).kind !== "join") {
+            add("Parallel paths must meet at a Wait for all (join) box.");
+        }
+    }
+    return checks;
+}

package/dist/patterns/process-modeler/geometry.d.ts

@@ -0,0 +1,18 @@
+import type { ProcessLayout, ProcessLine, ProcessProjection } from "./model.js";
+export interface ProcessPoint {
+    x: number;
+    y: number;
+}
+/** Stable left-to-right layers; cycles break at the smallest remaining ID. */
+export declare function arrangeProcess(projection: ProcessProjection): ProcessLayout;
+/**
+ * Authored points are interior waypoints; layout points override projection points.
+ * Explicit sides use centered ports with outward leads; unset sides snap to the
+ * nearest edge. Returns [] for missing endpoints, blocked ports or impossible
+ * waypoints (inside an obstacle), never an obstacle-crossing fallback.
+ */
+export declare function routeProcessLine(line: ProcessLine, layout: ProcessLayout, projection: ProcessProjection): ProcessPoint[];
+/** Halfway along the polyline's length, not halfway between its endpoints. */
+export declare function lineMidpoint(points: readonly ProcessPoint[]): ProcessPoint;
+/** Segment-distance hit testing, including zero-length and diagonal segments. */
+export declare function nearProcessLine(point: ProcessPoint, points: readonly ProcessPoint[], tolerance?: number): boolean;

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

@@ -0,0 +1,307 @@
+import { validateProjection } from "./model.js";
+const GAP_X = 80;
+const GAP_Y = 48;
+const PADDING = 24;
+const HEADER = 64;
+const CLEARANCE = 12;
+const compare = (a, b) => a < b ? -1 : a > b ? 1 : 0;
+/** Stable left-to-right layers; cycles break at the smallest remaining ID. */
+export function arrangeProcess(projection) {
+    validateProjection(projection);
+    const boxes = new Map(projection.boxes.map(box => [box.id, box]));
+    const children = new Map();
+    for (const box of projection.boxes) {
+        const siblings = children.get(box.parentId) ?? [];
+        siblings.push(box);
+        children.set(box.parentId, siblings);
+    }
+    for (const siblings of children.values())
+        siblings.sort((a, b) => compare(a.id, b.id));
+    const result = { boxes: Object.fromEntries(projection.boxes.map(box => [box.id, { x: 0, y: 0 }])) };
+    const measureGroup = (parentId) => {
+        const siblings = children.get(parentId) ?? [];
+        const ids = new Set(siblings.map(box => box.id));
+        // Collapse descendant endpoints to the sibling frame at this level.
+        const representative = (id) => {
+            let box = boxes.get(id);
+            while (box && !ids.has(box.id))
+                box = boxes.get(box.parentId ?? "");
+            return box?.id;
+        };
+        const outgoing = new Map(siblings.map(box => [box.id, new Set()]));
+        const incoming = new Map(siblings.map(box => [box.id, 0]));
+        for (const line of projection.lines) {
+            const from = representative(line.from), to = representative(line.to);
+            if (!from || !to || from === to || outgoing.get(from).has(to))
+                continue;
+            outgoing.get(from).add(to);
+            incoming.set(to, incoming.get(to) + 1);
+        }
+        const remaining = new Set(ids);
+        const rank = new Map(siblings.map(box => [box.id, 0]));
+        while (remaining.size) {
+            const ready = [...remaining].filter(id => incoming.get(id) === 0).sort(compare);
+            const id = ready[0] ?? [...remaining].sort(compare)[0];
+            remaining.delete(id);
+            for (const next of outgoing.get(id)) {
+                if (!remaining.has(next))
+                    continue;
+                rank.set(next, Math.max(rank.get(next), rank.get(id) + 1));
+                incoming.set(next, incoming.get(next) - 1);
+            }
+        }
+        const sizes = new Map();
+        for (const box of siblings) {
+            const group = measureGroup(box.id);
+            const width = box.frame ? Math.max(320, group.width + PADDING * 2) : 220;
+            const height = box.frame ? Math.max(180, group.height + HEADER + PADDING) : 96;
+            sizes.set(box.id, { x: 0, y: 0, width, height });
+            // Store local child coordinates until the parent's absolute position is known.
+            for (const [id, position] of group.positions)
+                result.boxes[id] = position;
+        }
+        const positions = new Map();
+        let x = 0, height = 0;
+        const ranks = [...new Set(rank.values())].sort((a, b) => a - b);
+        for (const layer of ranks) {
+            let y = 0, width = 0;
+            for (const box of siblings.filter(box => rank.get(box.id) === layer)) {
+                const size = sizes.get(box.id);
+                positions.set(box.id, { ...size, x, y });
+                width = Math.max(width, size.width);
+                y += size.height + GAP_Y;
+            }
+            height = Math.max(height, y - GAP_Y);
+            x += width + GAP_X;
+        }
+        return { width: Math.max(0, x - GAP_X), height, positions };
+    };
+    const roots = measureGroup();
+    const place = (positions, x, y) => {
+        for (const [id, local] of positions) {
+            const position = { ...local, x: local.x + x, y: local.y + y };
+            result.boxes[id] = position;
+            const nested = new Map((children.get(id) ?? []).map(child => [child.id, result.boxes[child.id]]));
+            place(nested, position.x + PADDING, position.y + HEADER);
+        }
+    };
+    place(roots.positions, 40, 40);
+    return result;
+}
+function rectangle(position, frame = false) {
+    return { ...position, width: position.width ?? (frame ? 320 : 220), height: position.height ?? (frame ? 180 : 96) };
+}
+const center = (box) => ({ x: box.x + box.width / 2, y: box.y + box.height / 2 });
+const distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+const same = (a, b) => a.x === b.x && a.y === b.y;
+const inside = (p, box) => p.x > box.x && p.x < box.x + box.width && p.y > box.y && p.y < box.y + box.height;
+function pin(box, toward, side) {
+    if (side) {
+        const middle = center(box);
+        switch (side) {
+            case "north": return { x: middle.x, y: box.y };
+            case "east": return { x: box.x + box.width, y: middle.y };
+            case "south": return { x: middle.x, y: box.y + box.height };
+            case "west": return { x: box.x, y: middle.y };
+        }
+    }
+    const x = Math.max(box.x, Math.min(toward.x, box.x + box.width));
+    const y = Math.max(box.y, Math.min(toward.y, box.y + box.height));
+    const candidates = [
+        { x: box.x + box.width, y }, { x: box.x, y },
+        { x, y: box.y + box.height }, { x, y: box.y },
+    ];
+    return candidates.reduce((best, point) => distance(point, toward) < distance(best, toward) ? point : best);
+}
+function portLead(point, side) {
+    switch (side) {
+        case "north": return { x: point.x, y: point.y - CLEARANCE };
+        case "east": return { x: point.x + CLEARANCE, y: point.y };
+        case "south": return { x: point.x, y: point.y + CLEARANCE };
+        case "west": return { x: point.x - CLEARANCE, y: point.y };
+        default: return point;
+    }
+}
+function blocked(a, b, obstacles) {
+    return obstacles.some(box => a.x === b.x
+        ? a.x > box.x && a.x < box.x + box.width && Math.max(a.y, b.y) > box.y && Math.min(a.y, b.y) < box.y + box.height
+        : a.y > box.y && a.y < box.y + box.height && Math.max(a.x, b.x) > box.x && Math.min(a.x, b.x) < box.x + box.width);
+}
+function simplify(points) {
+    const result = [];
+    for (const point of points) {
+        if (result.length && same(result[result.length - 1], point))
+            continue;
+        while (result.length > 1) {
+            const a = result[result.length - 2], b = result[result.length - 1];
+            if (!((a.x === b.x && b.x === point.x) || (a.y === b.y && b.y === point.y)))
+                break;
+            result.pop();
+        }
+        result.push(point);
+    }
+    return result;
+}
+/** Rectilinear visibility grid, with deterministic shortest-path tie breaking. */
+function orthogonal(start, end, obstacles) {
+    if (obstacles.some(box => inside(start, box) || inside(end, box)))
+        return [];
+    if (same(start, end))
+        return [{ ...start }];
+    if ((start.x === end.x || start.y === end.y) && !blocked(start, end, obstacles))
+        return [{ ...start }, { ...end }];
+    const xs = [...new Set([start.x, end.x, ...obstacles.flatMap(box => [box.x, box.x + box.width])])].sort((a, b) => a - b);
+    const ys = [...new Set([start.y, end.y, ...obstacles.flatMap(box => [box.y, box.y + box.height])])].sort((a, b) => a - b);
+    const count = xs.length * ys.length;
+    const point = (id) => ({ x: xs[id % xs.length], y: ys[Math.floor(id / xs.length)] });
+    const index = (p) => ys.indexOf(p.y) * xs.length + xs.indexOf(p.x);
+    const first = index(start), last = index(end);
+    const costs = new Float64Array(count).fill(Infinity);
+    const previous = new Int32Array(count).fill(-1);
+    const visited = new Uint8Array(count);
+    const heap = [];
+    const less = (a, b) => a.cost < b.cost || (a.cost === b.cost && a.id < b.id);
+    const push = (entry) => {
+        heap.push(entry);
+        let i = heap.length - 1;
+        while (i > 0) {
+            const parent = Math.floor((i - 1) / 2);
+            if (!less(heap[i], heap[parent]))
+                break;
+            [heap[i], heap[parent]] = [heap[parent], heap[i]];
+            i = parent;
+        }
+    };
+    const pop = () => {
+        const first = heap[0], tail = heap.pop();
+        if (heap.length) {
+            heap[0] = tail;
+            let i = 0;
+            while (i * 2 + 1 < heap.length) {
+                let child = i * 2 + 1;
+                if (child + 1 < heap.length && less(heap[child + 1], heap[child]))
+                    child++;
+                if (!less(heap[child], heap[i]))
+                    break;
+                [heap[i], heap[child]] = [heap[child], heap[i]];
+                i = child;
+            }
+        }
+        return first;
+    };
+    costs[first] = 0;
+    push({ id: first, cost: 0 });
+    while (heap.length) {
+        const { id } = pop();
+        if (visited[id])
+            continue;
+        visited[id] = 1;
+        if (id === last) {
+            const path = [];
+            for (let cursor = last; cursor !== -1; cursor = previous[cursor])
+                path.push(point(cursor));
+            return simplify(path.reverse());
+        }
+        const a = point(id), column = id % xs.length, row = Math.floor(id / xs.length);
+        const neighbors = [column > 0 ? id - 1 : -1, column + 1 < xs.length ? id + 1 : -1,
+            row > 0 ? id - xs.length : -1, row + 1 < ys.length ? id + xs.length : -1];
+        for (const next of neighbors) {
+            if (next < 0 || visited[next])
+                continue;
+            const b = point(next);
+            if (blocked(a, b, obstacles))
+                continue;
+            const cost = costs[id] + distance(a, b);
+            if (cost >= costs[next])
+                continue;
+            costs[next] = cost;
+            previous[next] = id;
+            push({ id: next, cost });
+        }
+    }
+    return [];
+}
+/**
+ * Authored points are interior waypoints; layout points override projection points.
+ * Explicit sides use centered ports with outward leads; unset sides snap to the
+ * nearest edge. Returns [] for missing endpoints, blocked ports or impossible
+ * waypoints (inside an obstacle), never an obstacle-crossing fallback.
+ */
+export function routeProcessLine(line, layout, projection) {
+    const boxes = new Map(projection.boxes.map(box => [box.id, box]));
+    const fromPosition = layout.boxes[line.from], toPosition = layout.boxes[line.to];
+    if (!fromPosition || !toPosition)
+        return [];
+    const from = rectangle(fromPosition, boxes.get(line.from)?.frame);
+    const to = rectangle(toPosition, boxes.get(line.to)?.frame);
+    const excluded = new Set();
+    for (const id of [line.from, line.to]) {
+        let parent = boxes.get(id)?.parentId;
+        while (parent && !excluded.has(parent)) {
+            excluded.add(parent);
+            parent = boxes.get(parent)?.parentId;
+        }
+    }
+    const obstacleBoxes = projection.boxes.filter(box => !excluded.has(box.id) && layout.boxes[box.id]);
+    const obstacles = obstacleBoxes.map(box => rectangle(layout.boxes[box.id], box.frame));
+    const waypoints = (layout.lines?.[line.id] ?? line.points ?? []).map(point => ({ ...point }));
+    if (waypoints.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y)))
+        return [];
+    if (line.from === line.to && !waypoints.length) {
+        waypoints.push({ x: from.x + from.width + CLEARANCE * 2, y: from.y + from.height / 2 }, { x: from.x + from.width / 2, y: from.y - CLEARANCE * 2 });
+    }
+    const start = pin(from, waypoints[0] ?? center(to), line.fromSide);
+    const end = pin(to, waypoints.at(-1) ?? center(from), line.toSide);
+    const startLead = portLead(start, line.fromSide), endLead = portLead(end, line.toSide);
+    // Fixed leads preserve port direction rather than detouring along a box edge.
+    if (line.fromSide && blocked(start, startLead, obstacles)
+        || line.toSide && blocked(endLead, end, obstacles))
+        return [];
+    const anchors = [startLead, ...waypoints, endLead];
+    const padded = obstacles.map((rect, index) => {
+        if (obstacleBoxes[index].id === line.from || obstacleBoxes[index].id === line.to)
+            return rect;
+        return { x: rect.x - CLEARANCE, y: rect.y - CLEARANCE, width: rect.width + CLEARANCE * 2, height: rect.height + CLEARANCE * 2 };
+    });
+    const result = line.fromSide ? [start, startLead] : [];
+    for (let i = 1; i < anchors.length; i++) {
+        // Prefer clearance, but never reject a valid narrow corridor or waypoint.
+        let segment = orthogonal(anchors[i - 1], anchors[i], padded);
+        if (!segment.length)
+            segment = orthogonal(anchors[i - 1], anchors[i], obstacles);
+        if (!segment.length)
+            return [];
+        result.push(...(result.length ? segment.slice(1) : segment));
+    }
+    if (line.toSide)
+        result.push(end);
+    return result;
+}
+/** Halfway along the polyline's length, not halfway between its endpoints. */
+export function lineMidpoint(points) {
+    if (!points.length)
+        return { x: 0, y: 0 };
+    let remaining = points.slice(1).reduce((sum, point, i) => sum + distance(points[i], point), 0) / 2;
+    for (let i = 1; i < points.length; i++) {
+        const a = points[i - 1], b = points[i], length = distance(a, b);
+        if (length && remaining <= length) {
+            const ratio = remaining / length;
+            return { x: a.x + (b.x - a.x) * ratio, y: a.y + (b.y - a.y) * ratio };
+        }
+        remaining -= length;
+    }
+    return { ...points[0] };
+}
+/** Segment-distance hit testing, including zero-length and diagonal segments. */
+export function nearProcessLine(point, points, tolerance = 16) {
+    if (tolerance < 0 || !points.length)
+        return false;
+    if (points.length === 1)
+        return distance(point, points[0]) <= tolerance;
+    return points.slice(1).some((b, i) => {
+        const a = points[i], dx = b.x - a.x, dy = b.y - a.y;
+        const squared = dx * dx + dy * dy;
+        const t = squared ? Math.max(0, Math.min(1, ((point.x - a.x) * dx + (point.y - a.y) * dy) / squared)) : 0;
+        return distance(point, { x: a.x + dx * t, y: a.y + dy * t }) <= tolerance;
+    });
+}

package/dist/patterns/process-modeler/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./model.js";
+export * from "./geometry.js";
+export * from "./bridge.js";
 export * from "./process-modeler.js";

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

@@ -1,2 +1,4 @@
 export * from "./model.js";
+export * from "./geometry.js";
+export * from "./bridge.js";
 export * from "./process-modeler.js";