@syware/jlib 0.1.3 → 0.3.0

package/dist/organisms/jl-flow.js

@@ -0,0 +1,755 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove, svgElement } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { FLOW_NODE, FLOW_ZOOM, centeredAt, connect, edgeEnds, edgeMidpoint, edgePath, fitView, isEdgeTaken, isPortFree, layoutFlow, moveNode, nodeAt, nodeHeight, outputAnchor, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, snap, toWorld, zoomAt } from "../lib/flow.js";
+import jl_flow_default from "./jl-flow.css_raw.js";
+import { css } from "@jadis/core";
+import { Check, CircleAlert, Hourglass, LoaderCircle, Maximize, Minus, Plus, WandSparkles, X } from "lucide";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-flow.tsx
+registerIcons({
+	check: Check,
+	"circle-alert": CircleAlert,
+	hourglass: Hourglass,
+	"loader-circle": LoaderCircle,
+	maximize: Maximize,
+	minus: Minus,
+	plus: Plus,
+	"wand-sparkles": WandSparkles,
+	x: X
+});
+var EMPTY = {
+	edges: [],
+	nodes: []
+};
+var IDLE = { kind: "idle" };
+var DEFAULT_LABEL = "Flow";
+var DOT_SPACING = 20;
+var WHEEL_ZOOM_SPEED = .0018;
+var CLICK_TOLERANCE = 4;
+var NUDGE = 8;
+var LONG_NUDGE = 40;
+var PERCENT = 100;
+var ICON_SIZE = 16;
+var ADD_ICON_SIZE = 12;
+var CONTROL_ICON_SIZE = 14;
+var STATUS_ICON_SIZE = 12;
+var PORT_GAP = 6;
+var ID_LENGTH = 8;
+var DELETE_KEYS = /* @__PURE__ */ new Set(["Delete", "Backspace"]);
+var ARROWS = /* @__PURE__ */ new Map([
+	["ArrowDown", {
+		x: 0,
+		y: 1
+	}],
+	["ArrowLeft", {
+		x: -1,
+		y: 0
+	}],
+	["ArrowRight", {
+		x: 1,
+		y: 0
+	}],
+	["ArrowUp", {
+		x: 0,
+		y: -1
+	}]
+]);
+var STATUS_ICONS = {
+	done: "check",
+	failed: "x",
+	running: "loader-circle",
+	waiting: "hourglass"
+};
+var STATUS_LABELS = {
+	done: "Done",
+	failed: "Failed",
+	running: "Running",
+	waiting: "Waiting"
+};
+/** What screen readers hear after a node's label: how it did in the run, and what to fix. */
+var noteOf = (node) => [node.status ? STATUS_LABELS[node.status] : "", node.problem ?? ""].filter((part) => part !== "").join(". ");
+var markOf = (element, name) => element?.closest(`[${name}]`)?.getAttribute(name) ?? void 0;
+var isControl = (event) => event.composedPath().some((element) => element instanceof Element && element.hasAttribute("data-control"));
+function targetOf(event) {
+	const element = event.target instanceof Element ? event.target : null;
+	return {
+		add: markOf(element, "data-add"),
+		control: isControl(event),
+		edge: markOf(element, "data-edge"),
+		node: markOf(element, "data-node"),
+		port: markOf(element, "data-port")
+	};
+}
+var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+var newId = (prefix) => `${prefix}_${crypto.randomUUID().replaceAll("-", "").slice(0, ID_LENGTH)}`;
+var addLabel = (node, port) => port.label ? `Add after ${node.label}, ${port.label}` : `Add after ${node.label}`;
+/**
+* A flow of nodes joined by edges, to edit: people move the nodes, draw an edge from a node's exit to another node,
+* press + on a free exit to ask for the next node, and move and zoom the view. Every edit goes out as a new graph
+* (`change`); the page adds nodes itself, when `add` or `drop` asks. Nodes can show how a run went (`status`,
+* `taken`) and what to fix (`problem`).
+*/
+var JlFlow = class extends JlElement {
+	static selector = "jl-flow";
+	events = this.useEvents();
+	graph = this.useChange(EMPTY, (graph) => this.show(graph), {
+		attribute: "graph",
+		parse: jsonOf(EMPTY)
+	});
+	/** The id of the selected node; the view moves to show it. */
+	selected = this.useChange("", (id) => {
+		this.renderSelection();
+		this.reveal(id);
+	}, { attribute: "selected" });
+	/** View only: nodes can be selected, not moved, joined or removed. */
+	readonly = this.useChange(false, (value) => {
+		this.reflect("readonly", value);
+		this.render();
+	}, { attribute: "readonly" });
+	/**
+	* The drag-and-drop type the canvas takes (`application/x-step`): something dragged in carrying it asks for a node
+	* where it is dropped, with `drop`.
+	*/
+	dropType = this.useChange("", () => void 0, { attribute: "drop-type" });
+	/** The canvas's name for screen readers. */
+	label = this.useChange("", (value) => this._refs.viewport.setAttribute("aria-label", value || DEFAULT_LABEL), { attribute: "label" });
+	_state = {
+		edge: "",
+		fitted: false,
+		gesture: IDLE,
+		graph: EMPTY,
+		viewport: {
+			x: 0,
+			y: 0,
+			zoom: 1
+		}
+	};
+	_nodes = /* @__PURE__ */ new Map();
+	_svg = {
+		draft: svgElement("path", { class: "edge draft" }),
+		root: svgElement("svg", {
+			class: "edges",
+			height: "1",
+			width: "1"
+		})
+	};
+	_refs = this.useRefs((ref) => ({
+		empty: ref(".empty"),
+		fit: ref(".fit"),
+		nodes: ref(".nodes"),
+		removeEdge: ref(".remove-edge"),
+		tidy: ref(".tidy"),
+		viewport: ref(".viewport"),
+		world: ref(".world"),
+		zoomIn: ref(".zoom-in"),
+		zoomLabel: ref(".zoom-label"),
+		zoomOut: ref(".zoom-out")
+	}));
+	/** Moves and zooms the view to show every node, never larger than life. */
+	fit() {
+		this.whenRendered(() => {
+			const { width, height } = this._refs.viewport.getBoundingClientRect();
+			if (width === 0) return;
+			this._state.fitted = true;
+			this.setViewport(fitView(this._state.graph.nodes, width, height));
+		});
+	}
+	/** Moves the view, when needed, so that a node is in sight: one just added, or moved with the keys. */
+	reveal(id) {
+		this.whenRendered(() => {
+			const node = this.nodeOf(id);
+			const { width, height } = this._refs.viewport.getBoundingClientRect();
+			if (!node || width === 0) return;
+			this.setViewport(revealIn(this._state.viewport, node, width, height));
+		});
+	}
+	/** Where a node added after an exit goes, as + puts it: a row below, under that exit. */
+	positionAfter(from, port) {
+		return positionAfter(this._state.graph, from, port);
+	}
+	/** Where a node added without a place goes: in the middle of the view (its top left corner). */
+	centerPosition() {
+		const { width, height } = this._refs.viewport.getBoundingClientRect();
+		return centeredAt(toWorld(this._state.viewport, {
+			x: width / 2,
+			y: height / 2
+		}));
+	}
+	/** Lays the nodes out again, in rows from the starts down (`change` gives the new positions), and shows them all. */
+	layout() {
+		this.whenRendered(() => {
+			this.commit(layoutFlow(this._state.graph));
+			this.fit();
+		});
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "viewport",
+			role: "application",
+			tabIndex: 0,
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "world",
+					children: [
+						this._svg.root,
+						/* @__PURE__ */ jsx("div", { class: "nodes" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							class: "remove-edge",
+							"data-control": "",
+							hidden: true,
+							"aria-label": "Remove this edge",
+							children: /* @__PURE__ */ jsx(JlIcon, {
+								name: "x",
+								size: ADD_ICON_SIZE
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "empty",
+					"data-control": "",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", {
+						name: "empty",
+						children: "Nothing here yet."
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "controls",
+					"data-control": "",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							class: "control zoom-out",
+							title: "Zoom out",
+							"aria-label": "Zoom out",
+							children: /* @__PURE__ */ jsx(JlIcon, {
+								name: "minus",
+								size: CONTROL_ICON_SIZE
+							})
+						}),
+						/* @__PURE__ */ jsx("span", { class: "zoom-label" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							class: "control zoom-in",
+							title: "Zoom in",
+							"aria-label": "Zoom in",
+							children: /* @__PURE__ */ jsx(JlIcon, {
+								name: "plus",
+								size: CONTROL_ICON_SIZE
+							})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							class: "control fit",
+							title: "Show every node",
+							"aria-label": "Show every node",
+							children: /* @__PURE__ */ jsx(JlIcon, {
+								name: "maximize",
+								size: CONTROL_ICON_SIZE
+							})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							class: "control tidy",
+							title: "Tidy up the layout",
+							"aria-label": "Tidy up the layout",
+							children: /* @__PURE__ */ jsx(JlIcon, {
+								name: "wand-sparkles",
+								size: CONTROL_ICON_SIZE
+							})
+						})
+					]
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_flow_default}`;
+	}
+	onConnect() {
+		const viewport = this._refs.viewport;
+		this.on(viewport, "pointerdown", (event) => this.pointerDown(event));
+		this.on(viewport, "pointermove", (event) => this.pointerMove(event));
+		this.on(viewport, "pointerup", (event) => this.pointerUp(event));
+		this.on(viewport, "pointercancel", (event) => this.pointerUp(event));
+		this.on(viewport, "wheel", (event) => this.wheel(event));
+		this.on(viewport, "keydown", (event) => this.key(event));
+		this.on(viewport, "click", (event) => this.pressAdd(event));
+		this.on(viewport, "dragover", (event) => this.dragOver(event));
+		this.on(viewport, "drop", (event) => this.dropOn(event));
+		this.on(viewport, "focusin", (event) => {
+			const node = targetOf(event).node;
+			if (node !== void 0) this.select(node);
+		});
+		this.on(this._refs.removeEdge, "click", () => this.removeSelection());
+		this.on(this._refs.zoomIn, "click", () => this.zoomBy(FLOW_ZOOM.step));
+		this.on(this._refs.zoomOut, "click", () => this.zoomBy(1 / FLOW_ZOOM.step));
+		this.on(this._refs.fit, "click", () => this.fit());
+		this.on(this._refs.tidy, "click", () => this.layout());
+		this.applyViewport();
+	}
+	show(graph) {
+		this._state.graph = graph;
+		this.render();
+		if (!this._state.fitted && graph.nodes.length > 0) requestAnimationFrame(() => this.fit());
+	}
+	/** An edit: drawn, kept, and sent to the page. */
+	commit(graph) {
+		this.graph.set(graph);
+		this.events.emit("change", graph);
+	}
+	select(id) {
+		if (this._state.edge !== "") {
+			this._state.edge = "";
+			this.renderEdges();
+		}
+		if (id === this.selected.get()) return;
+		this.selected.set(id);
+		this.events.emit("select", id);
+	}
+	selectEdge(id) {
+		this.select("");
+		this._state.edge = id;
+		this.renderEdges();
+	}
+	removeSelection() {
+		const { edge, graph } = this._state;
+		const node = this.selected.get();
+		if (edge !== "") {
+			this._state.edge = "";
+			this.commit(removeEdge(graph, edge));
+			return;
+		}
+		if (node === "") return;
+		this.select("");
+		this.commit(removeNode(graph, node));
+	}
+	nodeOf(id) {
+		return this._state.graph.nodes.find((node) => node.id === id);
+	}
+	pointerDown(event) {
+		const target = targetOf(event);
+		if (event.button !== 0 || target.control || target.add !== void 0) return;
+		if (target.node !== void 0) this.select(target.node);
+		this._state.gesture = this.gestureFor(target, event);
+		this._refs.viewport.setPointerCapture(event.pointerId);
+	}
+	gestureFor(target, event) {
+		const start = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const node = target.node === void 0 ? void 0 : this.nodeOf(target.node);
+		if (node && target.port !== void 0 && !this.readonly.get()) return {
+			kind: "connect",
+			node: node.id,
+			port: target.port,
+			start
+		};
+		if (node) {
+			const world = this.worldPoint(event);
+			const offset = {
+				x: world.x - node.position.x,
+				y: world.y - node.position.y
+			};
+			return {
+				kind: "drag",
+				moved: false,
+				node: node.id,
+				offset,
+				start
+			};
+		}
+		return {
+			edge: target.edge ?? "",
+			kind: "pan",
+			moved: false,
+			origin: this._state.viewport,
+			start
+		};
+	}
+	pointerMove(event) {
+		const gesture = this._state.gesture;
+		const screen = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (gesture.kind === "pan") {
+			this._state.gesture = {
+				...gesture,
+				moved: gesture.moved || distance(screen, gesture.start) > CLICK_TOLERANCE
+			};
+			this.setViewport({
+				...gesture.origin,
+				x: gesture.origin.x + screen.x - gesture.start.x,
+				y: gesture.origin.y + screen.y - gesture.start.y
+			});
+			return;
+		}
+		if (gesture.kind === "drag") {
+			this.drag(gesture, screen, event);
+			return;
+		}
+		if (gesture.kind === "connect") this.drawDraft(gesture, event);
+	}
+	drag(gesture, screen, event) {
+		const moved = gesture.moved || distance(screen, gesture.start) > CLICK_TOLERANCE;
+		if (!moved || this.readonly.get()) return;
+		this._state.gesture = {
+			...gesture,
+			moved
+		};
+		const world = this.worldPoint(event);
+		const position = snap({
+			x: world.x - gesture.offset.x,
+			y: world.y - gesture.offset.y
+		});
+		this._state.graph = moveNode(this._state.graph, gesture.node, position);
+		const element = this._nodes.get(gesture.node);
+		if (element) this.place(element, position);
+		this.renderEdges();
+	}
+	drawDraft(gesture, event) {
+		const node = this.nodeOf(gesture.node);
+		const from = node ? outputAnchor(node, gesture.port) : void 0;
+		if (from) this._svg.draft.setAttribute("d", edgePath(from, this.worldPoint(event)));
+	}
+	pointerUp(event) {
+		const gesture = this._state.gesture;
+		this._state.gesture = IDLE;
+		if (gesture.kind === "connect") {
+			this._svg.draft.removeAttribute("d");
+			this.connectAt(gesture, event);
+			return;
+		}
+		if (gesture.kind === "drag" && gesture.moved) {
+			this.commit(this._state.graph);
+			return;
+		}
+		if (gesture.kind === "pan" && !gesture.moved) this.selectEdge(gesture.edge);
+	}
+	/** An edge dropped on a node joins it; dropped on empty space, it asks for a node there. */
+	connectAt(gesture, event) {
+		if (distance({
+			x: event.clientX,
+			y: event.clientY
+		}, gesture.start) <= CLICK_TOLERANCE) return;
+		const at = this.worldPoint(event);
+		const target = nodeAt(this._state.graph, at, gesture.node);
+		if (!target) {
+			const position = snap({
+				x: at.x - FLOW_NODE.width / 2,
+				y: at.y
+			});
+			this.events.emit("add", {
+				from: gesture.node,
+				port: gesture.port,
+				position
+			});
+			return;
+		}
+		const joined = connect(this._state.graph, {
+			from: gesture.node,
+			id: newId("e"),
+			port: gesture.port,
+			to: target.id
+		});
+		if (joined) this.commit(joined);
+	}
+	pressAdd(event) {
+		const { add, node } = targetOf(event);
+		if (add === void 0 || node === void 0 || this.readonly.get()) return;
+		this.events.emit("add", {
+			from: node,
+			port: add,
+			position: positionAfter(this._state.graph, node, add)
+		});
+	}
+	/** Whether a drag carries what the canvas takes: then it may be dropped here. */
+	carriesDrop(event) {
+		const type = this.dropType.get();
+		return type !== "" && !this.readonly.get() && (event.dataTransfer?.types.includes(type) ?? false);
+	}
+	dragOver(event) {
+		if (this.carriesDrop(event)) event.preventDefault();
+	}
+	dropOn(event) {
+		if (!this.carriesDrop(event)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const data = event.dataTransfer?.getData(this.dropType.get()) ?? "";
+		this.events.emit("drop", {
+			data,
+			position: centeredAt(this.worldPoint(event))
+		});
+	}
+	key(event) {
+		const target = targetOf(event);
+		if (target.control || target.add !== void 0) return;
+		if (event.key === "Escape") {
+			this.select("");
+			return;
+		}
+		if (this.readonly.get()) return;
+		if (DELETE_KEYS.has(event.key)) {
+			event.preventDefault();
+			this.removeSelection();
+			return;
+		}
+		this.nudge(event);
+	}
+	/** The arrows move the selected node; with Shift, further. */
+	nudge(event) {
+		const arrow = ARROWS.get(event.key);
+		const node = this.nodeOf(this.selected.get());
+		if (!arrow || !node) return;
+		event.preventDefault();
+		const step = event.shiftKey ? LONG_NUDGE : NUDGE;
+		const position = {
+			x: node.position.x + arrow.x * step,
+			y: node.position.y + arrow.y * step
+		};
+		this.commit(moveNode(this._state.graph, node.id, position));
+		this.reveal(node.id);
+	}
+	/** Two fingers or the wheel move the view; with Ctrl or ⌘ (a pinch on a trackpad), they zoom. */
+	wheel(event) {
+		event.preventDefault();
+		const viewport = this._state.viewport;
+		if (event.ctrlKey || event.metaKey) {
+			this.setViewport(zoomAt(viewport, this.screenPoint(event), Math.exp(-event.deltaY * WHEEL_ZOOM_SPEED)));
+			return;
+		}
+		this.setViewport({
+			...viewport,
+			x: viewport.x - event.deltaX,
+			y: viewport.y - event.deltaY
+		});
+	}
+	zoomBy(factor) {
+		const { width, height } = this._refs.viewport.getBoundingClientRect();
+		this.setViewport(zoomAt(this._state.viewport, {
+			x: width / 2,
+			y: height / 2
+		}, factor));
+	}
+	setViewport(viewport) {
+		this._state.viewport = viewport;
+		this.applyViewport();
+	}
+	applyViewport() {
+		const { x, y, zoom } = this._state.viewport;
+		const viewport = this._refs.viewport;
+		this._refs.world.style.transform = `translate(${x}px, ${y}px) scale(${zoom})`;
+		viewport.style.backgroundSize = `${DOT_SPACING * zoom}px ${DOT_SPACING * zoom}px`;
+		viewport.style.backgroundPosition = `${x}px ${y}px`;
+		this._refs.zoomLabel.textContent = `${Math.round(zoom * PERCENT)}%`;
+	}
+	screenPoint(event) {
+		const rect = this._refs.viewport.getBoundingClientRect();
+		return {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+	}
+	worldPoint(event) {
+		return toWorld(this._state.viewport, this.screenPoint(event));
+	}
+	render() {
+		this._refs.empty.hidden = this._state.graph.nodes.length > 0;
+		this.renderNodes();
+		this.renderEdges();
+	}
+	/** The nodes' elements stay from one drawing to the next: the focused one keeps the focus. */
+	renderNodes() {
+		const nodes = this._state.graph.nodes;
+		const ids = new Set(nodes.map((node) => node.id));
+		for (const [id, element] of this._nodes) if (!ids.has(id)) {
+			element.remove();
+			this._nodes.delete(id);
+		}
+		for (const node of nodes) this.drawNode(this._nodes.get(node.id) ?? this.createNode(node.id), node);
+		this.renderSelection();
+	}
+	createNode(id) {
+		const element = /* @__PURE__ */ jsx("div", {
+			class: "node",
+			"data-node": id,
+			tabIndex: 0,
+			role: "group",
+			"aria-roledescription": "node",
+			attrs: { part: "node" }
+		});
+		this._nodes.set(id, element);
+		this._refs.nodes.append(element);
+		return element;
+	}
+	drawNode(element, node) {
+		const ports = portsOf(node);
+		element.setAttribute("aria-label", node.label);
+		setOrRemove(element, "aria-description", noteOf(node));
+		element.part.toggle("start", node.start === true);
+		setOrRemove(element, "data-tone", node.tone ?? "");
+		setOrRemove(element, "data-status", node.status ?? "");
+		element.style.height = `${nodeHeight(node)}px`;
+		this.paintIcon(element, node.color ?? "");
+		element.replaceChildren(/* @__PURE__ */ jsxs(Fragment, { children: [
+			node.start === true ? null : /* @__PURE__ */ jsx("span", { class: "input" }),
+			/* @__PURE__ */ jsxs("span", {
+				class: "head",
+				children: [
+					node.icon ? /* @__PURE__ */ jsx("span", {
+						class: "icon",
+						attrs: { part: "icon" },
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							name: node.icon,
+							size: ICON_SIZE
+						})
+					}) : null,
+					/* @__PURE__ */ jsxs("span", {
+						class: "text",
+						children: [/* @__PURE__ */ jsx("span", {
+							class: "label",
+							attrs: { part: "label" },
+							children: node.label
+						}), node.description ? /* @__PURE__ */ jsx("span", {
+							class: "description",
+							attrs: { part: "description" },
+							children: node.description
+						}) : null]
+					}),
+					node.problem ? /* @__PURE__ */ jsx("span", {
+						class: "problem",
+						title: node.problem,
+						attrs: { part: "problem" },
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							name: "circle-alert",
+							size: ICON_SIZE
+						})
+					}) : null,
+					node.status ? /* @__PURE__ */ jsx("span", {
+						class: "status",
+						title: STATUS_LABELS[node.status],
+						attrs: { part: "status" },
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							name: STATUS_ICONS[node.status],
+							size: STATUS_ICON_SIZE
+						})
+					}) : null
+				]
+			}),
+			node.detail ? /* @__PURE__ */ jsx("span", {
+				class: "detail",
+				title: node.detail,
+				attrs: { part: "detail" },
+				children: node.detail
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				class: "ports",
+				children: ports.map((port, index) => this.portElement(node, port, index, ports.length))
+			})
+		] }));
+		this.place(element, node.position);
+	}
+	/** A colour of the page's own for the icon wins over the tone's. */
+	paintIcon(element, color) {
+		if (color === "") {
+			element.style.removeProperty("--tone");
+			return;
+		}
+		element.style.setProperty("--tone", color);
+	}
+	portElement(node, port, index, count) {
+		const free = !this.readonly.get() && isPortFree(this._state.graph, node, port.id);
+		const element = /* @__PURE__ */ jsxs("span", {
+			class: "port",
+			"data-port": port.id,
+			title: "Drag to another node to connect",
+			attrs: { part: "port" },
+			children: [
+				/* @__PURE__ */ jsx("span", { class: "dot" }),
+				port.label ? /* @__PURE__ */ jsx("span", {
+					class: "port-label",
+					children: port.label
+				}) : null,
+				free ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: "add",
+					"data-add": port.id,
+					"aria-label": addLabel(node, port),
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "plus",
+						size: ADD_ICON_SIZE
+					})
+				}) : null
+			]
+		});
+		element.style.left = `${portX(index, count)}px`;
+		element.style.maxWidth = `${FLOW_NODE.width / count - PORT_GAP}px`;
+		setOrRemove(element, "data-tone", port.tone ?? "");
+		element.toggleAttribute("data-taken", node.taken === port.id);
+		return element;
+	}
+	place(element, position) {
+		element.style.transform = `translate(${position.x}px, ${position.y}px)`;
+	}
+	renderSelection() {
+		const selected = this.selected.get();
+		for (const [id, element] of this._nodes) {
+			element.classList.toggle("selected", id === selected);
+			element.part.toggle("selected", id === selected);
+			setOrRemove(element, "aria-current", id === selected ? "true" : "");
+		}
+	}
+	renderEdges() {
+		const { edge: selected, graph } = this._state;
+		const groups = graph.edges.flatMap((edge) => {
+			const ends = edgeEnds(graph, edge);
+			return ends ? [this.edgeGroup(edge.id, ends, edge.id === selected, isEdgeTaken(graph, edge))] : [];
+		});
+		this._svg.root.replaceChildren(...groups, this._svg.draft);
+		this.renderEdgeTool();
+	}
+	/**
+	* An edge, with a wide invisible twin that catches the pointer: a thin line is still easy to press. One a run took
+	* stands out.
+	*/
+	edgeGroup(id, ends, selected, taken) {
+		const d = edgePath(ends.from, ends.to);
+		const states = [selected ? "selected" : "", taken ? "taken" : ""].filter((state) => state !== "");
+		const group = svgElement("g", {
+			class: ["edge-group", ...states].join(" "),
+			"data-edge": id
+		});
+		group.append(svgElement("path", {
+			class: "edge-hit",
+			d
+		}), svgElement("path", {
+			class: "edge",
+			d,
+			"data-tone": ends.tone,
+			part: ["edge", ...states].join(" ")
+		}));
+		return group;
+	}
+	/** The button that removes the selected edge, in its middle. */
+	renderEdgeTool() {
+		const { edge: selected, graph } = this._state;
+		const edge = graph.edges.find((candidate) => candidate.id === selected);
+		const ends = edge ? edgeEnds(graph, edge) : void 0;
+		const button = this._refs.removeEdge;
+		button.hidden = ends === void 0 || this.readonly.get();
+		if (!ends) return;
+		const middle = edgeMidpoint(ends.from, ends.to);
+		button.style.transform = `translate(${middle.x}px, ${middle.y}px) translate(-50%, -50%)`;
+	}
+};
+JlFlow.register();
+export { JlFlow };