feat(ports): updateNodePortName + interface inherits parent port names (#289)

Author: milanofthe

src/lib/stores/graph/helpers.ts

@@ -69,15 +69,15 @@ export function deriveInterfaceNode(
 		outputs: parentSubsystem.inputs.map((port, i) => ({
 			id: `${interfaceNode.id}-output-${i}`,
 			nodeId: interfaceNode.id,
-			name: `in ${i}`,
+			name: port.name,
 			direction: 'output' as const,
 			index: i,
 			color: port.color
 		})),
 		inputs: parentSubsystem.outputs.map((port, i) => ({
 			id: `${interfaceNode.id}-input-${i}`,
 			nodeId: interfaceNode.id,
-			name: `out ${i}`,
+			name: port.name,
 			direction: 'input' as const,
 			index: i,
 			color: port.color

src/lib/stores/graph/index.ts

@@ -84,6 +84,7 @@ export const graphStore = {
 	removeInputPort: ports.removeInputPort,
 	addOutputPort: ports.addOutputPort,
 	removeOutputPort: ports.removeOutputPort,
+	updateNodePortName: ports.updateNodePortName,
 
 	// ==================== ANNOTATION OPERATIONS ====================
 	addAnnotation: annotations.addAnnotation,

src/lib/stores/graph/ports.ts

@@ -331,3 +331,47 @@ export function syncPortNamesFromLabels(
 		updateNodeById(nodeId, () => updated);
 	}
 }
+
+/**
+ * Rename a single port. For regular nodes this writes the new name into
+ * `node.{inputs|outputs}[index].name`. For Interface nodes, port names are
+ * derived from the parent Subsystem at read time, so we write to the parent
+ * instead (with the direction flipped, because Interface input ↔ Subsystem
+ * output).
+ */
+export function updateNodePortName(
+	nodeId: string,
+	direction: PortDirection,
+	index: number,
+	name: string
+): void {
+	const currentGraph = getCurrentGraph();
+	const node = currentGraph.nodes.get(nodeId);
+	if (!node) return;
+
+	const path = get(currentPath);
+
+	if (node.type === NODE_TYPES.INTERFACE && path.length > 0) {
+		const parentId = path[path.length - 1];
+		const parentPath = path.slice(0, -1);
+		const parentPortsKey = direction === 'input' ? 'outputs' : 'inputs';
+
+		updateParentSubsystem(parentPath, parentId, (parent) => {
+			const ports = parent[parentPortsKey] as PortInstance[];
+			if (index < 0 || index >= ports.length) return parent;
+			if (ports[index].name === name) return parent;
+			const newPorts = ports.map((p, i) => (i === index ? { ...p, name } : p));
+			return { ...parent, [parentPortsKey]: newPorts };
+		});
+		return;
+	}
+
+	updateNodeById(nodeId, (n) => {
+		const portsKey = direction === 'input' ? 'inputs' : 'outputs';
+		const ports = n[portsKey] as PortInstance[];
+		if (index < 0 || index >= ports.length) return n;
+		if (ports[index].name === name) return n;
+		const newPorts = ports.map((p, i) => (i === index ? { ...p, name } : p));
+		return { ...n, [portsKey]: newPorts };
+	});
+}

src/lib/stores/graph/state.ts

@@ -95,11 +95,13 @@ export function getCurrentGraph(): {
 				...node,
 				name: subsystem.name,
 				color: subsystem.color,
-				// Subsystem inputs → Interface outputs (signals coming in)
+				// Subsystem inputs → Interface outputs (signals coming in).
+				// Port names come from the parent — that's the single source
+				// of truth so user-customised labels survive across renders.
 				outputs: subsystem.inputs.map((port, i) => ({
 					id: `${node.id}-output-${i}`,
 					nodeId: node.id,
-					name: `in ${i}`,
+					name: port.name,
 					direction: 'output' as const,
 					index: i,
 					color: port.color
@@ -108,7 +110,7 @@ export function getCurrentGraph(): {
 				inputs: subsystem.outputs.map((port, i) => ({
 					id: `${node.id}-input-${i}`,
 					nodeId: node.id,
-					name: `out ${i}`,
+					name: port.name,
 					direction: 'input' as const,
 					index: i,
 					color: port.color