@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Exotics/PatchBoard/PatchBoard.js

@@ -0,0 +1,682 @@
+import { useViewportContext } from "../Viewport/Viewport.context.js";
+import { access, accessSignal } from "../../Utils/propUtils.js";
+import { LiveAnnouncer } from "../../Abstracts/LiveAnnouncer/LiveAnnouncer.js";
+import { CarrierStack } from "../../Abstracts/Carrier/CarrierStack.js";
+import { LabelUtils } from "../../Fundamentals/Input/Label/Label.utils.js";
+import { InteractionWrapper } from "../../Fundamentals/InteractionWrapper/InteractionWrapper.js";
+import { PatchBoardUtils } from "./PatchBoard.utils.js";
+import { patchBoardCables, patchBoardNode, patchBoardNodeHolder, patchBoardRoot, patchBoardSlot, patchBoardSocket, patchBoardSocketHolder } from "./PatchBoard.css.js";
+import { Index, createEffect, createMemo, createSignal, createUniqueId, onCleanup } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Exotics/PatchBoard/PatchBoard.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=list><svg aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div><div>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div role=listitem>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div role=button>`);
+var DEFAULT_ORIENTATION = "horizontal";
+var DEFAULT_SOCKET_SIZE = 14;
+var DEFAULT_SOCKET_REACH = 28;
+var DEFAULT_STEP_SIZE = 8;
+var COARSE_STEP_FACTOR = 4;
+var NOTHING = 0;
+var SINGLE = 1;
+var INTERACTIVE_SELECTOR = "a[href], button, input, select, textarea, [role='button'], [role='checkbox'], [role='link'], [role='switch']";
+var NUDGE_KEYS = {
+	ArrowRight: { x: 1 },
+	ArrowLeft: { x: -1 },
+	ArrowDown: { y: 1 },
+	ArrowUp: { y: -1 }
+};
+var PatchBoard = (props) => {
+	const nodesSignal = accessSignal(() => props.nodesSignal);
+	const linksSignal = accessSignal(() => props.linksSignal);
+	const boardId = createUniqueId();
+	const viewportContext = useViewportContext();
+	const [getRootRef, setRootRef] = createSignal();
+	const [getFocusedStop, setFocusedStop] = createSignal();
+	const stopRefs = /* @__PURE__ */ new Map();
+	let grabOffset = {
+		x: NOTHING,
+		y: NOTHING
+	};
+	let hasPendingClick = false;
+	const getAriaLabel = LabelUtils.resolveAriaLabel(() => access(props.ariaLabel));
+	const getNodes = createMemo(() => nodesSignal[0]());
+	const getLinks = createMemo(() => linksSignal[0]());
+	const getSize = createMemo(() => access(props.size));
+	const getGroupId = createMemo(() => access(props.groupId));
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getIsLocked = createMemo(() => access(props.isLocked) ?? false);
+	const getOrientation = createMemo(() => access(props.orientation) ?? DEFAULT_ORIENTATION);
+	const getSocketSize = createMemo(() => access(props.socketSize) ?? DEFAULT_SOCKET_SIZE);
+	const getSocketReach = createMemo(() => access(props.socketReach) ?? DEFAULT_SOCKET_REACH);
+	const getStepSize = createMemo(() => access(props.stepSize) ?? DEFAULT_STEP_SIZE);
+	const getNodeKey = (node) => props.computeNodeKey(node.value);
+	const getNodeLabel = (node) => props.computeNodeLabel(node.value);
+	const asCarry = (carry) => carry.value;
+	const asPlace = (place) => place;
+	const findNode = (nodeKey) => getNodes().find((node) => getNodeKey(node) === nodeKey);
+	const getEndLabel = (end) => {
+		const node = findNode(end.nodeKey);
+		const socket = node?.sockets.find((entry) => entry.id === end.socketId);
+		return `${node ? getNodeLabel(node) : end.nodeKey} ${socket?.label ?? end.socketId}`;
+	};
+	const getIsEndAllowed = (fromEnd, toEnd) => {
+		const placed = getPlacedSockets();
+		const from = PatchBoardUtils.findSocket(placed, fromEnd);
+		const to = PatchBoardUtils.findSocket(placed, toEnd);
+		if (!from || !to) return false;
+		if (getIsLocked()) return false;
+		if (!PatchBoardUtils.getIsPairAllowed(from, to, getLinks())) return false;
+		const link = PatchBoardUtils.getLink(from, to);
+		return link !== void 0 && (props.computeCanLink?.(link) ?? true);
+	};
+	const getBoardPoint = (point) => {
+		const root = getRootRef();
+		if (!root) return void 0;
+		const rect = root.getBoundingClientRect();
+		const scale = viewportContext.getScale();
+		return {
+			x: (point.x - rect.left) / scale,
+			y: (point.y - rect.top) / scale
+		};
+	};
+	const zone = {
+		getGroupId,
+		getLabel: () => access(props.ariaLabel),
+		getRootRef,
+		getIsDisabled,
+		getKeyHint: () => {
+			const carry = CarrierStack.getCarry();
+			return carry && asCarry(carry).kind === "plug" ? "Arrow keys choose a socket, Enter connects, Escape cancels." : "Arrow keys move it, Enter drops, Escape cancels.";
+		},
+		computeCanAccept: (carry) => {
+			if (getIsDisabled()) return false;
+			const value = asCarry(carry);
+			if (value.kind === "node") return true;
+			return !getIsLocked() && PatchBoardUtils.findSocket(getPlacedSockets(), value.from) !== void 0;
+		},
+		computePlaceAtPoint: (point, carry) => {
+			const board = getBoardPoint(point);
+			if (!board) return void 0;
+			const value = asCarry(carry);
+			if (value.kind === "node") return {
+				kind: "spot",
+				...PatchBoardUtils.getClampedSpot({
+					x: board.x - grabOffset.x,
+					y: board.y - grabOffset.y
+				}, value.node.size, getSize())
+			};
+			const socket = PatchBoardUtils.getNearestSocket(getCandidateSockets(), board, getSocketReach());
+			return socket ? {
+				kind: "socket",
+				...socket.end
+			} : {
+				kind: "free",
+				...board
+			};
+		},
+		computeNudgedPlace: (place, nudge, carry) => {
+			const current = asPlace(place);
+			const value = asCarry(carry);
+			if (value.kind === "node") {
+				if (current.kind !== "spot") return void 0;
+				const step = getStepSize();
+				return {
+					kind: "spot",
+					...PatchBoardUtils.getClampedSpot({
+						x: current.x + (nudge.x ?? NOTHING) * step,
+						y: current.y + (nudge.y ?? NOTHING) * step
+					}, value.node.size, getSize())
+				};
+			}
+			const step = (nudge.x ?? NOTHING) + (nudge.y ?? NOTHING);
+			if (step === NOTHING) return void 0;
+			const socket = PatchBoardUtils.getSteppedSocket(getCandidateSockets(), current.kind === "socket" ? current : void 0, step);
+			return socket ? {
+				kind: "socket",
+				...socket.end
+			} : void 0;
+		},
+		computeEntryPlace: (carry) => {
+			const value = asCarry(carry);
+			return value.kind === "node" ? {
+				kind: "spot",
+				...value.node.spot
+			} : {
+				kind: "socket",
+				...value.from
+			};
+		},
+		computeIsSamePlace: (first, second) => {
+			const one = asPlace(first);
+			const other = asPlace(second);
+			if (one.kind !== other.kind) return false;
+			if (one.kind === "socket" && other.kind === "socket") return PatchBoardUtils.getIsSameEnd(one, other);
+			if (one.kind === "socket" || other.kind === "socket") return false;
+			return one.x === other.x && one.y === other.y;
+		},
+		computeIsPlaceAllowed: (place, carry) => {
+			const current = asPlace(place);
+			const value = asCarry(carry);
+			if (value.kind === "node") return current.kind === "spot";
+			if (current.kind !== "socket") return false;
+			return getIsEndAllowed(value.from, current);
+		},
+		computePlaceLabel: (place, carry) => {
+			const current = asPlace(place);
+			const value = asCarry(carry);
+			if (value.kind === "node") return current.kind === "spot" ? PatchBoardUtils.getRegionLabel(current, value.node.size, getSize()) : "off the board";
+			if (current.kind !== "socket") return "no socket";
+			const isRefused = getCarry() !== void 0 && !PatchBoardUtils.getIsSameEnd(value.from, current) && !getIsEndAllowed(value.from, current);
+			return `${getEndLabel(current)}${isRefused ? ", cannot connect" : ""}`;
+		},
+		takeAt: (_unusedPlace, carry) => {
+			if (asCarry(carry).kind !== "node") return;
+			const nodeKey = carry.key;
+			const orphaned = getLinks().filter((link) => link.from.nodeKey === nodeKey || link.to.nodeKey === nodeKey);
+			nodesSignal[1]((nodes) => nodes.filter((node) => getNodeKey(node) !== nodeKey));
+			if (orphaned.length < SINGLE) return;
+			linksSignal[1]((links) => links.filter((link) => !orphaned.some((cut) => PatchBoardUtils.getIsSameLink(cut, link))));
+			orphaned.forEach((link) => props.onUnlink?.(link));
+		},
+		putAt: (place, carry) => {
+			const current = asPlace(place);
+			const value = asCarry(carry);
+			if (value.kind !== "node" || current.kind !== "spot") return;
+			const spot = {
+				x: current.x,
+				y: current.y
+			};
+			nodesSignal[1]((nodes) => [...nodes, {
+				...value.node,
+				spot
+			}]);
+			props.onMove?.(carry.key, spot);
+		},
+		moveAt: (_unusedFrom, toPlace, carry) => {
+			const current = asPlace(toPlace);
+			const value = asCarry(carry);
+			if (value.kind === "node") {
+				if (current.kind !== "spot") return;
+				const spot = {
+					x: current.x,
+					y: current.y
+				};
+				nodesSignal[1]((nodes) => nodes.map((node) => getNodeKey(node) === carry.key ? {
+					...node,
+					spot
+				} : node));
+				props.onMove?.(carry.key, spot);
+				return;
+			}
+			if (current.kind !== "socket") return;
+			const placed = getPlacedSockets();
+			const from = PatchBoardUtils.findSocket(placed, value.from);
+			const to = PatchBoardUtils.findSocket(placed, current);
+			const link = from && to && PatchBoardUtils.getLink(from, to);
+			if (!link) return;
+			linksSignal[1]((links) => [...links, link]);
+			props.onLink?.(link);
+		}
+	};
+	CarrierStack.registerZone(zone);
+	const getCarry = () => CarrierStack.getSourceZone() === zone ? CarrierStack.getCarry() : void 0;
+	const getCarriedNodeKey = createMemo(() => {
+		const carry = getCarry();
+		return carry && asCarry(carry).kind === "node" ? carry.key : void 0;
+	});
+	const getPlugSource = createMemo(() => {
+		const carry = getCarry();
+		const value = carry && asCarry(carry);
+		return value?.kind === "plug" ? value.from : void 0;
+	});
+	const getAimedPlace = createMemo(() => {
+		const place = CarrierStack.getTargetPlace();
+		if (!getCarry() || place === void 0) return void 0;
+		return asPlace(place);
+	});
+	const getLiveSpot = (node) => {
+		const place = getAimedPlace();
+		if (getCarriedNodeKey() !== getNodeKey(node) || place?.kind !== "spot") return node.spot;
+		return {
+			x: place.x,
+			y: place.y
+		};
+	};
+	const getPlacements = createMemo(() => getNodes().map((node) => ({
+		key: getNodeKey(node),
+		spot: getLiveSpot(node),
+		size: node.size,
+		sockets: node.sockets,
+		isDisabled: node.isDisabled ?? false
+	})));
+	const getPlacedSockets = createMemo(() => PatchBoardUtils.getPlacedSockets(getPlacements(), getOrientation()));
+	const getStopKeys = createMemo(() => PatchBoardUtils.getStopKeys(getPlacements()));
+	const getNodeKeys = createMemo(() => PatchBoardUtils.getReadingOrder(getPlacements()).map((entry) => entry.key));
+	const getRovingStop = createMemo(() => {
+		const keys = getStopKeys();
+		const focused = getFocusedStop();
+		return focused !== void 0 && keys.includes(focused) ? focused : keys[NOTHING];
+	});
+	const getCandidateSockets = createMemo(() => {
+		const from = getPlugSource();
+		if (!from) return [];
+		return getPlacedSockets().filter((socket) => !PatchBoardUtils.getIsSameEnd(socket.end, from));
+	});
+	const getCableDefs = createMemo(() => {
+		const placed = getPlacedSockets();
+		const defs = getLinks().reduce((acc, link) => {
+			const from = PatchBoardUtils.findSocket(placed, link.from);
+			const to = PatchBoardUtils.findSocket(placed, link.to);
+			if (from && to) acc.push({
+				key: PatchBoardUtils.getLinkKey(link),
+				from: from.point,
+				to: to.point,
+				fromKind: from.kind,
+				orientation: getOrientation(),
+				isPending: false,
+				isAllowed: true
+			});
+			return acc;
+		}, []);
+		const source = getPlugSource();
+		const place = getAimedPlace();
+		const from = source && PatchBoardUtils.findSocket(placed, source);
+		if (!from || !place || place.kind === "spot") return defs;
+		const to = place.kind === "socket" ? PatchBoardUtils.findSocket(placed, place)?.point : {
+			x: place.x,
+			y: place.y
+		};
+		if (!to) return defs;
+		return [...defs, {
+			key: `${boardId}-pending`,
+			from: from.point,
+			to,
+			fromKind: from.kind,
+			orientation: getOrientation(),
+			isPending: true,
+			isAllowed: CarrierStack.getIsTargetAllowed()
+		}];
+	});
+	const setStopRef = (stopKey, element) => {
+		stopRefs.set(stopKey, element);
+		onCleanup(() => {
+			if (stopRefs.get(stopKey) === element) stopRefs.delete(stopKey);
+		});
+	};
+	const focusStop = (stopKey) => {
+		if (stopKey === void 0) return;
+		setFocusedStop(stopKey);
+		stopRefs.get(stopKey)?.focus();
+	};
+	const pickUpNode = (node, mode, from) => {
+		if (getIsDisabled() || (node.isDisabled ?? false)) return;
+		const board = from && getBoardPoint(from);
+		grabOffset = board ? {
+			x: board.x - node.spot.x,
+			y: board.y - node.spot.y
+		} : {
+			x: node.size.width / 2,
+			y: node.size.height / 2
+		};
+		CarrierStack.start(zone, {
+			kind: "spot",
+			...node.spot
+		}, {
+			groupId: getGroupId(),
+			key: getNodeKey(node),
+			label: getNodeLabel(node),
+			value: {
+				kind: "node",
+				node
+			}
+		}, mode);
+	};
+	const pickUpPlug = (socket, mode) => {
+		if (getIsDisabled() || getIsLocked() || socket.isDisabled) return;
+		CarrierStack.start(zone, {
+			kind: "socket",
+			...socket.end
+		}, {
+			groupId: getGroupId(),
+			key: PatchBoardUtils.getEndKey(socket.end),
+			label: `cable from ${getEndLabel(socket.end)}`,
+			value: {
+				kind: "plug",
+				from: socket.end
+			}
+		}, mode);
+	};
+	const unplug = (end) => {
+		if (getIsDisabled() || getIsLocked()) return false;
+		const cut = PatchBoardUtils.getLinksAt(getLinks(), end);
+		if (cut.length < SINGLE) return false;
+		linksSignal[1]((links) => links.filter((link) => !cut.some((removed) => PatchBoardUtils.getIsSameLink(removed, link))));
+		cut.forEach((link) => props.onUnlink?.(link));
+		LiveAnnouncer.announce(`${cut.length > SINGLE ? `${cut.length} cables` : "Cable"} unplugged from ${getEndLabel(end)}.`);
+		return true;
+	};
+	const handleNodePointerDown = (node, e) => {
+		if (e.button !== NOTHING || getIsDisabled()) return;
+		if (e.target.closest(INTERACTIVE_SELECTOR)) return;
+		if (CarrierStack.getCarry()) return;
+		const root = getRootRef();
+		if (!root) return;
+		CarrierStack.dragFromPointer(root, e, (from) => pickUpNode(node, "drag", from), () => {
+			hasPendingClick = true;
+		});
+	};
+	const handleSocketPointerDown = (socket, e) => {
+		if (e.button !== NOTHING || getIsDisabled() || getIsLocked() || !socket) return;
+		if (CarrierStack.getCarry()) return;
+		const root = getRootRef();
+		if (!root) return;
+		CarrierStack.dragFromPointer(root, e, () => pickUpPlug(socket, "drag"), () => {
+			hasPendingClick = true;
+		});
+	};
+	const dropAtPointer = (e) => {
+		if (CarrierStack.getCarryMode() === "drag") return;
+		if (CarrierStack.getCarryMode() === "key") CarrierStack.aimAtPoint(e.clientX, e.clientY);
+		CarrierStack.end("drop");
+	};
+	const handleNodeClick = (node, e) => {
+		if (getIsDisabled()) return;
+		if (e.target.closest(INTERACTIVE_SELECTOR)) return;
+		if (!CarrierStack.getCarry()) {
+			pickUpNode(node, "tap", {
+				x: e.clientX,
+				y: e.clientY
+			});
+			focusStop(getNodeKey(node));
+			return;
+		}
+		dropAtPointer(e);
+	};
+	const handleSocketClick = (socket, e) => {
+		if (getIsDisabled() || !socket) return;
+		if (CarrierStack.getCarry()) {
+			dropAtPointer(e);
+			return;
+		}
+		const stopKey = PatchBoardUtils.getEndKey(socket.end);
+		focusStop(stopKey);
+		if (PatchBoardUtils.getIsFull(getLinks(), socket)) {
+			unplug(socket.end);
+			return;
+		}
+		pickUpPlug(socket, "tap");
+	};
+	const handleStopKeyDown = (stopKey, node, socket, e) => {
+		if (getIsDisabled()) return;
+		const isCarrying = CarrierStack.getCarry() !== void 0 && CarrierStack.getCarryMode() !== "drag";
+		if (e.key === "Escape") {
+			if (!isCarrying) return;
+			e.preventDefault();
+			CarrierStack.end("cancel");
+			return;
+		}
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (isCarrying) {
+				CarrierStack.end("drop");
+				return;
+			}
+			if (!socket) {
+				pickUpNode(node, "key");
+				return;
+			}
+			if (PatchBoardUtils.getIsFull(getLinks(), socket)) {
+				unplug(socket.end);
+				return;
+			}
+			pickUpPlug(socket, "key");
+			return;
+		}
+		if (isCarrying) {
+			const nudge = NUDGE_KEYS[e.key];
+			if (!nudge) return;
+			e.preventDefault();
+			CarrierStack.aimAtNudge(e.shiftKey ? {
+				x: (nudge.x ?? NOTHING) * COARSE_STEP_FACTOR,
+				y: (nudge.y ?? NOTHING) * COARSE_STEP_FACTOR
+			} : nudge);
+			return;
+		}
+		if (e.key === "Delete" || e.key === "Backspace") {
+			if (!socket) return;
+			e.preventDefault();
+			unplug(socket.end);
+			return;
+		}
+		if (e.key === "Home" || e.key === "End") {
+			const keys = getNodeKeys();
+			e.preventDefault();
+			focusStop(e.key === "Home" ? keys[NOTHING] : keys[keys.length - SINGLE]);
+			return;
+		}
+		if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+			e.preventDefault();
+			focusStop(PatchBoardUtils.getSteppedKey(getStopKeys(), stopKey, e.key === "ArrowRight" ? SINGLE : -1));
+			return;
+		}
+		if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+		e.preventDefault();
+		focusStop(PatchBoardUtils.getSteppedKey(getNodeKeys(), getNodeKey(node), e.key === "ArrowDown" ? SINGLE : -1));
+	};
+	const handleRootClick = (e) => {
+		const carry = CarrierStack.getCarry();
+		if (getIsDisabled() || !carry) return;
+		if (e.target !== getRootRef()) return;
+		dropAtPointer(e);
+	};
+	createEffect(() => {
+		if (!getCarry()) return;
+		const trackPoint = (e) => {
+			if (CarrierStack.getCarryMode() !== "tap") return;
+			CarrierStack.aimAtPoint(e.clientX, e.clientY);
+		};
+		document.addEventListener("pointermove", trackPoint, true);
+		onCleanup(() => {
+			document.removeEventListener("pointermove", trackPoint, true);
+		});
+	});
+	createEffect(() => {
+		const root = getRootRef();
+		if (!root) return;
+		const swallowClick = (e) => {
+			if (!hasPendingClick) return;
+			hasPendingClick = false;
+			e.preventDefault();
+			e.stopPropagation();
+		};
+		root.addEventListener("click", swallowClick, true);
+		onCleanup(() => {
+			root.removeEventListener("click", swallowClick, true);
+		});
+	});
+	createEffect(() => {
+		if (!getIsDisabled() || !getCarry()) return;
+		CarrierStack.end("cancel");
+	});
+	onCleanup(() => {
+		if (CarrierStack.getSourceZone() === zone) CarrierStack.end("cancel");
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		_el$.$$click = handleRootClick;
+		use(setRootRef, _el$);
+		setAttribute(_el$, "id", boardId);
+		className(_el$, patchBoardRoot);
+		setAttribute(_el$2, "class", patchBoardCables);
+		insert(_el$2, createComponent(Index, {
+			get each() {
+				return getCableDefs();
+			},
+			children: (getDefs) => memo(() => props.renderCable(getDefs))
+		}));
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return getNodes();
+			},
+			children: (getNode) => {
+				const getKey = createMemo(() => getNodeKey(getNode()));
+				const getPlacement = createMemo(() => getPlacements().find((placement) => placement.key === getKey()));
+				return (() => {
+					var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild;
+					className(_el$3, patchBoardSlot);
+					className(_el$4, patchBoardNodeHolder);
+					insert(_el$4, createComponent(InteractionWrapper, {
+						sizing: () => "fill",
+						isDisabled: () => getNode().isDisabled ?? false,
+						isTabbable: () => getRovingStop() === getKey(),
+						extraFlags: () => ({ isCarried: getCarriedNodeKey() === getKey() }),
+						renderControl: (setElementRef, getFlags) => (() => {
+							var _el$5 = _tmpl$3();
+							_el$5.addEventListener("focus", () => setFocusedStop(getKey()));
+							_el$5.$$keydown = (e) => handleStopKeyDown(getKey(), getNode(), void 0, e);
+							_el$5.$$click = (e) => handleNodeClick(getNode(), e);
+							_el$5.$$pointerdown = (e) => handleNodePointerDown(getNode(), e);
+							use((element) => {
+								setStopRef(getKey(), element);
+								setElementRef(element);
+							}, _el$5);
+							className(_el$5, patchBoardNode);
+							insert(_el$5, () => props.renderNode(getNode, getFlags));
+							effect((_p$) => {
+								var _v$0 = getNodeLabel(getNode()), _v$1 = (getNode().isDisabled ?? false) || void 0;
+								_v$0 !== _p$.e && setAttribute(_el$5, "aria-label", _p$.e = _v$0);
+								_v$1 !== _p$.t && setAttribute(_el$5, "aria-disabled", _p$.t = _v$1);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0
+							});
+							return _el$5;
+						})()
+					}));
+					insert(_el$3, createComponent(Index, {
+						get each() {
+							return getNode().sockets;
+						},
+						children: (getSocket) => {
+							const getEnd = createMemo(() => ({
+								nodeKey: getKey(),
+								socketId: getSocket().id
+							}));
+							const getPlaced = createMemo(() => PatchBoardUtils.findSocket(getPlacedSockets(), getEnd()));
+							const getStopKey = createMemo(() => PatchBoardUtils.getEndKey(getEnd()));
+							const getIsTaken = createMemo(() => PatchBoardUtils.getLinksAt(getLinks(), getEnd()).length > NOTHING);
+							const getIsAimed = createMemo(() => {
+								const place = getAimedPlace();
+								return place?.kind === "socket" && PatchBoardUtils.getIsSameEnd(place, getEnd());
+							});
+							const getIsSource = createMemo(() => {
+								const source = getPlugSource();
+								return source !== void 0 && PatchBoardUtils.getIsSameEnd(source, getEnd());
+							});
+							const getIsAllowed = createMemo(() => {
+								const source = getPlugSource();
+								return source !== void 0 && getIsEndAllowed(source, getEnd());
+							});
+							return (() => {
+								var _el$6 = _tmpl$4();
+								className(_el$6, patchBoardSocketHolder);
+								insert(_el$6, createComponent(InteractionWrapper, {
+									isDisabled: () => (getNode().isDisabled ?? false) || (getSocket().isDisabled ?? false),
+									isTabbable: () => getRovingStop() === getStopKey(),
+									extraFlags: () => ({
+										kind: getSocket().kind,
+										isTaken: getIsTaken(),
+										isFull: getPlaced() ? PatchBoardUtils.getIsFull(getLinks(), getPlaced()) : false,
+										isSource: getIsSource(),
+										isAimed: getIsAimed(),
+										isAllowed: getIsAllowed()
+									}),
+									renderControl: (setElementRef, getFlags) => (() => {
+										var _el$7 = _tmpl$5();
+										_el$7.addEventListener("focus", () => setFocusedStop(getStopKey()));
+										_el$7.$$keydown = (e) => handleStopKeyDown(getStopKey(), getNode(), getPlaced(), e);
+										_el$7.$$click = (e) => handleSocketClick(getPlaced(), e);
+										_el$7.$$pointerdown = (e) => handleSocketPointerDown(getPlaced(), e);
+										use((element) => {
+											setStopRef(getStopKey(), element);
+											setElementRef(element);
+										}, _el$7);
+										className(_el$7, patchBoardSocket);
+										insert(_el$7, () => props.renderSocket?.(getSocket, getFlags));
+										effect((_p$) => {
+											var _v$14 = `${getEndLabel(getEnd())}, ${getSocket().kind === "in" ? "input" : "output"}${getIsTaken() ? ", connected" : ""}`, _v$15 = (getSocket().isDisabled ?? false) || getIsLocked() || void 0;
+											_v$14 !== _p$.e && setAttribute(_el$7, "aria-label", _p$.e = _v$14);
+											_v$15 !== _p$.t && setAttribute(_el$7, "aria-disabled", _p$.t = _v$15);
+											return _p$;
+										}, {
+											e: void 0,
+											t: void 0
+										});
+										return _el$7;
+									})()
+								}));
+								effect((_p$) => {
+									var _v$10 = `${(getPlaced()?.point.x ?? NOTHING) - (getPlacement()?.spot.x ?? NOTHING)}px`, _v$11 = `${(getPlaced()?.point.y ?? NOTHING) - (getPlacement()?.spot.y ?? NOTHING)}px`, _v$12 = `${getSocketSize()}px`, _v$13 = `${getSocketSize()}px`;
+									_v$10 !== _p$.e && setStyleProperty(_el$6, "left", _p$.e = _v$10);
+									_v$11 !== _p$.t && setStyleProperty(_el$6, "top", _p$.t = _v$11);
+									_v$12 !== _p$.a && setStyleProperty(_el$6, "width", _p$.a = _v$12);
+									_v$13 !== _p$.o && setStyleProperty(_el$6, "height", _p$.o = _v$13);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0,
+									a: void 0,
+									o: void 0
+								});
+								return _el$6;
+							})();
+						}
+					}), null);
+					effect((_p$) => {
+						var _v$6 = `${getPlacement()?.spot.x ?? getNode().spot.x}px`, _v$7 = `${getPlacement()?.spot.y ?? getNode().spot.y}px`, _v$8 = `${getNode().size.width}px`, _v$9 = `${getNode().size.height}px`;
+						_v$6 !== _p$.e && setStyleProperty(_el$3, "left", _p$.e = _v$6);
+						_v$7 !== _p$.t && setStyleProperty(_el$3, "top", _p$.t = _v$7);
+						_v$8 !== _p$.a && setStyleProperty(_el$3, "width", _p$.a = _v$8);
+						_v$9 !== _p$.o && setStyleProperty(_el$3, "height", _p$.o = _v$9);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0
+					});
+					return _el$3;
+				})();
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$ = `${getSize().width}px`, _v$2 = `${getSize().height}px`, _v$3 = getAriaLabel(), _v$4 = getIsDisabled() || void 0, _v$5 = `0 0 ${getSize().width} ${getSize().height}`;
+			_v$ !== _p$.e && setStyleProperty(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-disabled", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$2, "viewBox", _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+};
+delegateEvents([
+	"click",
+	"pointerdown",
+	"keydown"
+]);
+//#endregion
+export { PatchBoard };
+
+//# sourceMappingURL=PatchBoard.js.map