fix: keep bit widths consistent across connections and components

src/pages/edit/Editor/components/ContextMenu.tsx

@@ -110,8 +110,12 @@ export default function CCComponentEditorContextMenu({
 									});
 								},
 							);
+							// A connection in a bit width conflict is moved as it is, since the
+							// original is removed below
 							for (const connection of newConnections)
-								store.connections.register(connection);
+								store.connections.register(connection, {
+									allowBitWidthConflict: true,
+								});
 							store.connections.unregister([
 								...componentEditorState.selectedConnectionIds,
 							]);

src/pages/edit/Editor/components/NodePinPropertyEditor.tsx

@@ -4,7 +4,6 @@ import nullthrows from "nullthrows";
 import { useState } from "react";
 import invariant from "tiny-invariant";
 import { rect } from "../../../../common/rect";
-import { CCConnectionStore } from "../../../../store/connection";
 import { IntrinsicComponentDefinition } from "../../../../store/intrinsics/base";
 import { CCNodePinStore } from "../../../../store/nodePin";
 import { useStore } from "../../../../store/react";
@@ -116,30 +115,10 @@ export function CCComponentEditorNodePinPropertyEditor() {
 						if (nodePin && bitWidth) {
 							maxOrder = nodePin.order; // nodePins are sorted by order
 							if (nodePin.manualBitWidth !== bitWidth) {
+								// A connection the new width conflicts with is kept and highlighted
 								store.nodePins.update(nodePin.id, {
 									manualBitWidth: bitWidth,
 								});
-								const connections = store.connections.getConnectionsByNodePinId(
-									nodePin.id,
-								);
-								for (const connection of connections) {
-									const from = connection.from;
-									const to = connection.to;
-									const parentComponentId = connection.parentComponentId;
-									store.connections.unregister([connection.id]).then(() => {
-										if (store.nodePins.isConnectable(from, to)) {
-											// reconnect if still connectable after bit width change
-											store.connections.register(
-												CCConnectionStore.create({
-													parentComponentId,
-													from,
-													to,
-													bentPortion: 0.5,
-												}),
-											);
-										}
-									});
-								}
 							}
 							continue;
 						}

src/pages/edit/Editor/components/SimulationErrorAlert.tsx

@@ -3,7 +3,8 @@ import { useComponentEditorStore } from "../store";
 
 /**
  * Shows why the circuit could not be simulated, e.g. because a loop needs a flip-flop
- * to break it or because an input pin is left unconnected.
+ * to break it, because an input pin is left unconnected, or because connected pins
+ * disagree on their bit width.
  */
 export default function CCComponentEditorSimulationErrorAlert() {
 	const componentEditorState = useComponentEditorStore()();

src/pages/edit/Editor/renderer/Connection/index.tsx

@@ -5,7 +5,10 @@ import type { CCComponentPinType } from "../../../../../store/componentPin";
 import type { CCConnectionId } from "../../../../../store/connection";
 import { useStore } from "../../../../../store/react";
 import ensureStoreItem from "../../../../../store/react/error";
-import { useNode } from "../../../../../store/react/selectors";
+import {
+	useIsConnectionInBitWidthConflict,
+	useNode,
+} from "../../../../../store/react/selectors";
 import { theme } from "../../../../../style";
 import { useComponentEditorStore } from "../../store";
 import { stringifySimulationValue } from "../../store/slices/core/index";
@@ -20,6 +23,8 @@ export type CCComponentEditorRendererConnectionCoreProps = {
 	from: CCComponentEditorRendererConnectionEndpoint;
 	to: CCComponentEditorRendererConnectionEndpoint;
 	connectionId?: CCConnectionId;
+	/** whether the bit widths of the pins it ties together conflict */
+	isInBitWidthConflict?: boolean;
 	onMouseEnter?: React.MouseEventHandler<SVGPathElement>;
 	onMouseLeave?: React.MouseEventHandler<SVGPathElement>;
 };
@@ -33,6 +38,7 @@ export function CCComponentEditorRendererConnectionCore({
 	from,
 	to,
 	connectionId,
+	isInBitWidthConflict = false,
 	onMouseEnter,
 	onMouseLeave,
 }: CCComponentEditorRendererConnectionCoreProps) {
@@ -65,9 +71,12 @@ export function CCComponentEditorRendererConnectionCore({
 				connectionId &&
 				componentEditorState.selectedConnectionIds.has(connectionId)
 					? theme.colors.primary
-					: theme.colors.textPrimary
+					: isInBitWidthConflict
+						? theme.colors.error
+						: theme.colors.textPrimary
 			}
 			strokeWidth="2"
+			strokeDasharray={isInBitWidthConflict ? "6 4" : undefined}
 			fill="none"
 			onClick={handleClick}
 			onContextMenu={(e) => {
@@ -121,6 +130,8 @@ const CCComponentEditorRendererConnection = ensureStoreItem(
 		);
 
 		const [isHovered, setIsHovered] = useState(false);
+		const isInBitWidthConflict =
+			useIsConnectionInBitWidthConflict(connectionId);
 
 		return (
 			<>
@@ -131,6 +142,7 @@ const CCComponentEditorRendererConnection = ensureStoreItem(
 					}}
 					to={{ direction: toComponentPin.type, position: toNodePinPosition }}
 					connectionId={connectionId}
+					isInBitWidthConflict={isInBitWidthConflict}
 					onMouseEnter={() => {
 						setIsHovered(true);
 					}}