@unofficialbox/box-open-elements 0.23.0 → 0.25.0

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

@@ -0,0 +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

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

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

@@ -0,0 +1,135 @@
+import type { FlowKind, NodePath } from "../flow-builder/model.js";
+export interface ProcessBox<N = unknown> {
+    id: string;
+    node: N;
+    kind: string;
+    title: string;
+    description?: string;
+    path?: NodePath;
+    /** Host identity at this path, used to reject stale saved positions. */
+    fingerprint?: string;
+    /** A frame draws behind its children and connects as one box. */
+    frame?: boolean;
+    parentId?: string;
+}
+export interface ProcessLine {
+    id: string;
+    from: string;
+    to: string;
+    label?: string;
+    weight?: number;
+    fromSide?: ProcessSide;
+    toSide?: ProcessSide;
+    dashed?: boolean;
+    points?: {
+        x: number;
+        y: number;
+    }[];
+}
+export type ProcessSide = "north" | "east" | "south" | "west";
+export interface ProcessConnection {
+    name: string;
+    kind: string;
+    id?: string;
+}
+export interface ProcessVariable {
+    name: string;
+    value?: unknown;
+    description?: string;
+}
+export interface ProcessPositionSnapshot {
+    path?: NodePath;
+    fingerprint?: string;
+    id: string;
+    position: BoxPosition;
+}
+export interface ProcessLoadOptions {
+    /** Keys are JSON.stringify(path); snapshots are also accepted. Fingerprints must match. */
+    positions?: Readonly<Record<string, {
+        fingerprint?: string;
+        position: BoxPosition;
+    }>> | readonly ProcessPositionSnapshot[];
+    version?: string | number;
+    selectedPath?: NodePath | null;
+}
+export interface ProcessProjection<N = unknown> {
+    boxes: readonly ProcessBox<N>[];
+    lines: readonly ProcessLine[];
+}
+export interface ProcessModel<D = unknown, N = unknown> {
+    project(document: D): ProcessProjection<N>;
+    /** Optional host arrangement, used by Tidy up and for missing positions. */
+    arrange?(projection: ProcessProjection<N>): ProcessLayout;
+    /** Host-specific semantics supplement the generic free-graph checks. */
+    validate?(document: D, projection: ProcessProjection<N>): readonly ProcessCheck[];
+}
+export interface BoxPosition {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+export interface ProcessLayout {
+    boxes: Record<string, BoxPosition>;
+    notes?: {
+        id: string;
+        text: string;
+        x: number;
+        y: number;
+    }[];
+    sections?: {
+        id: string;
+        title: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[];
+    lines?: Record<string, {
+        x: number;
+        y: number;
+    }[]>;
+}
+export interface ProcessCheck {
+    message: string;
+    boxId?: string;
+    path?: NodePath;
+}
+export interface ProcessEdit {
+    type: "add" | "delete" | "connect" | "disconnect" | "insert" | "reparent";
+    boxId?: string;
+    from?: string;
+    to?: string;
+    lineId?: string;
+    kind?: FlowKind;
+    position?: BoxPosition;
+    parentId?: string;
+    fromSide?: ProcessSide;
+    toSide?: ProcessSide;
+}
+export interface ReversibleProcessEdit {
+    undo(): void;
+    redo(): void;
+    /** The already-applied edit's layout, recorded atomically with the document. */
+    layout?: ProcessLayout;
+}
+/** Host applies the edit, then calls accept with its inverse and replay. */
+export interface ProcessEditRequest extends ProcessEdit {
+    accept(command: ReversibleProcessEdit): void;
+}
+export declare function validateProjection<N>(projection: ProcessProjection<N>): void;
+/** Deterministic fallback, preserving host-authored positions. */
+export declare function completeLayout<N>(projection: ProcessProjection<N>, layout: ProcessLayout): ProcessLayout;
+/** Bounded history shared by layout edits and host-accepted document commands. */
+export declare class ProcessHistory {
+    private replayingInternal;
+    private past;
+    private future;
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    get replaying(): boolean;
+    record(command: ReversibleProcessEdit): void;
+    undo(): void;
+    redo(): void;
+    clear(): void;
+}

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

@@ -0,0 +1,113 @@
+export function validateProjection(projection) {
+    const ids = new Set();
+    for (const box of projection.boxes) {
+        if (!box.id || ids.has(box.id))
+            throw new TypeError("Process boxes need unique non-empty IDs");
+        ids.add(box.id);
+    }
+    for (const box of projection.boxes) {
+        const ancestors = new Set([box.id]);
+        let parent = box.parentId;
+        while (parent) {
+            const frame = projection.boxes.find((candidate) => candidate.id === parent);
+            if (!frame?.frame || ancestors.has(parent))
+                throw new TypeError("Frame parents must exist and cannot form a cycle");
+            ancestors.add(parent);
+            parent = frame.parentId;
+        }
+    }
+    const lines = new Set();
+    for (const line of projection.lines) {
+        if (!line.id ||
+            lines.has(line.id) ||
+            !ids.has(line.from) ||
+            !ids.has(line.to))
+            throw new TypeError("Process lines need unique IDs and existing endpoints");
+        lines.add(line.id);
+    }
+}
+/** Deterministic fallback, preserving host-authored positions. */
+export function completeLayout(projection, layout) {
+    const boxes = { ...layout.boxes };
+    const sizes = new Map();
+    const measure = (box) => {
+        const children = projection.boxes
+            .filter((child) => child.parentId === box.id)
+            .map(measure);
+        const size = {
+            width: Math.max(box.frame ? 320 : 220, ...children.map((child) => child.width + 40)),
+            height: box.frame
+                ? Math.max(180, 64 + children.reduce((sum, child) => sum + child.height + 24, 0))
+                : 96,
+        };
+        sizes.set(box.id, size);
+        return size;
+    };
+    const roots = projection.boxes.filter((box) => !box.parentId);
+    roots.forEach(measure);
+    const place = (siblings, x, top) => {
+        let y = top;
+        for (const box of siblings) {
+            const size = sizes.get(box.id);
+            boxes[box.id] ??= { x, y, ...size };
+            const position = boxes[box.id];
+            place(projection.boxes.filter((child) => child.parentId === box.id), position.x + 20, position.y + 64);
+            y += (position.height ?? size.height) + 60;
+        }
+    };
+    place(roots, 40, 40);
+    return { ...layout, boxes };
+}
+/** Bounded history shared by layout edits and host-accepted document commands. */
+export class ProcessHistory {
+    replayingInternal = false;
+    past = [];
+    future = [];
+    get canUndo() {
+        return this.past.length > 0;
+    }
+    get canRedo() {
+        return this.future.length > 0;
+    }
+    get replaying() {
+        return this.replayingInternal;
+    }
+    record(command) {
+        this.past.push(command);
+        if (this.past.length > 100)
+            this.past.shift();
+        this.future = [];
+    }
+    undo() {
+        const command = this.past.at(-1);
+        if (!command)
+            return;
+        this.replayingInternal = true;
+        try {
+            command.undo();
+        }
+        finally {
+            this.replayingInternal = false;
+        }
+        this.past.pop();
+        this.future.push(command);
+    }
+    redo() {
+        const command = this.future.at(-1);
+        if (!command)
+            return;
+        this.replayingInternal = true;
+        try {
+            command.redo();
+        }
+        finally {
+            this.replayingInternal = false;
+        }
+        this.future.pop();
+        this.past.push(command);
+    }
+    clear() {
+        this.past = [];
+        this.future = [];
+    }
+}

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

@@ -0,0 +1,130 @@
+import { BaseElement } from "../../core/index.js";
+import type { FlowKind, NodePath } from "../flow-builder/model.js";
+import type { ProcessConnection, ProcessVariable, ProcessLoadOptions } from "./model.js";
+import { ProcessHistory, type ProcessBox, type ProcessCheck, type ProcessEdit, type ProcessLayout, type ProcessModel, type ProcessProjection } from "./model.js";
+/** Projects host documents without owning workflow schemas or persistence. */
+export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends BaseElement {
+    static readonly tagName = "box-process-modeler";
+    static get observedAttributes(): string[];
+    private documentValue?;
+    private modelValue;
+    private projection;
+    private layoutValue;
+    private catalogValue;
+    private selectedId;
+    private connecting;
+    private checks;
+    private renderer?;
+    private cleanupInspector?;
+    private inspected?;
+    private inspectedId?;
+    private historyValue;
+    private viewport;
+    private pointers;
+    private drag?;
+    private pinchDistance;
+    private gestureZoom;
+    private insertion?;
+    private selectedIds;
+    private versionValue;
+    private lastProjection;
+    private lastDocument?;
+    private connectionsValue;
+    private variablesValue;
+    private activePane;
+    private portDrag?;
+    private marquee?;
+    private segmentDrag?;
+    private dropLine?;
+    private narrowValue;
+    private suppressClick;
+    private resizeObserver?;
+    private routedLines;
+    private computedChecks;
+    get selectedBoxes(): readonly ProcessBox<N>[];
+    get selectedPath(): NodePath | null;
+    set selectedPath(path: NodePath | null);
+    get connections(): readonly ProcessConnection[];
+    set connections(value: readonly ProcessConnection[]);
+    get variables(): readonly ProcessVariable[];
+    set variables(value: readonly ProcessVariable[]);
+    get version(): string | number;
+    get narrow(): boolean;
+    get positions(): readonly import("./model.js").ProcessPositionSnapshot[];
+    load(document: D, options?: ProcessLoadOptions): void;
+    selectMany(ids: readonly string[]): void;
+    get headingLevel(): number;
+    set headingLevel(value: number);
+    get disableConnections(): boolean;
+    set disableConnections(value: boolean);
+    private arrangedLayout;
+    get document(): D | undefined;
+    get history(): ProcessHistory;
+    set history(value: ProcessHistory);
+    set document(value: D | undefined);
+    get model(): ProcessModel<D, N>;
+    set model(value: ProcessModel<D, N>);
+    get layout(): ProcessLayout;
+    set layout(value: ProcessLayout);
+    get catalog(): readonly FlowKind[];
+    set catalog(value: readonly FlowKind[]);
+    get locked(): boolean;
+    set locked(value: boolean);
+    get snapToGrid(): boolean;
+    set snapToGrid(value: boolean);
+    get selected(): ProcessBox<N> | null;
+    get renderInspector(): ((node: N, container: HTMLElement) => void | (() => void)) | undefined;
+    set renderInspector(value: ((node: N, container: HTMLElement) => void | (() => void)) | undefined);
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    refresh(): void;
+    select(id: string | null): void;
+    setValidation(checks: readonly ProcessCheck[]): void;
+    setValidationAtPath(message: string, path: NodePath): void;
+    requestEdit(edit: ProcessEdit): void;
+    undo(): void;
+    redo(): void;
+    private commitLayout;
+    move(id: string, x: number, y: number): void;
+    private emitPositions;
+    private translatedLayout;
+    tidy(): void;
+    resize(id: string, width: number, height: number): void;
+    routeLine(id: string, points: readonly {
+        x: number;
+        y: number;
+    }[]): void;
+    setNote(note: NonNullable<ProcessLayout["notes"]>[number] | null, id?: string | undefined): void;
+    setSection(section: NonNullable<ProcessLayout["sections"]>[number] | null, id?: string | undefined): void;
+    zoomBy(factor: number): void;
+    fit(): void;
+    private bounds;
+    protected renderTemplate(): void;
+    private setupPanes;
+    private renderPane;
+    private selectionCommand;
+    protected setupListeners(): void;
+    private onKey;
+    private pointerDown;
+    private distance;
+    private pointerMove;
+    private pointerEnd;
+    private canvasPoint;
+    private boxAt;
+    private lineAt;
+    private markDropLine;
+    private alignedPoint;
+    private openChooser;
+    protected update(): void;
+    private get allChecks();
+    private collectChecks;
+    private renderWorld;
+    private place;
+    private renderPalette;
+    private renderChecks;
+    private renderSelection;
+    private updateToolbar;
+    private paintViewport;
+    private focusBox;
+    private setStatus;
+}