diff --git a/web/lib/editor.js b/web/lib/editor.js
index 46dc96e..f4567c7 100644
--- a/web/lib/editor.js
+++ b/web/lib/editor.js
@@ -561,112 +561,36 @@
 
 	DOMWrapper.WrappedElement = WrappedElement;
 
-	/* eslint-disable max-lines */
-
-	const DELAY_AGENTCHANGE = 500;
-	const DELAY_STAGECHANGE = 250;
-	const PNG_RESOLUTION = 4;
-
-	const PARAM_PATTERN = /\{[^}]+\}/g;
-
-	function addNewline(value) {
-		if(value.length > 0 && value.charAt(value.length - 1) !== '\n') {
-			return value + '\n';
-		}
-		return value;
-	}
-
-	function findPos(content, index) {
-		let p = 0;
-		let line = 0;
-		for(;;) {
-			const nextLn = content.indexOf('\n', p) + 1;
-			if(index < nextLn || nextLn === 0) {
-				return {ch: index - p, line};
-			}
-			p = nextLn;
-			++ line;
-		}
-	}
-
-	function cmInRange(pos, {from, to}) {
-		return !(
-			pos.line < from.line || (pos.line === from.line && pos.ch < from.ch) ||
-			pos.line > to.line || (pos.line === to.line && pos.ch > to.ch)
-		);
-	}
-
-	function findNextToken(block, skip) {
-		PARAM_PATTERN.lastIndex = 0;
-		for(let m = null; (m = PARAM_PATTERN.exec(block));) {
-			if(!skip.includes(m[0])) {
-				return m[0];
-			}
-		}
-		return null;
-	}
-
-	function simplifyPreview(code) {
-		return 'headers fade\nterminators fade\n' + code
-			.replace(/\{Agent([0-9]*)\}/g, (match, num) => {
-				if(typeof num === 'undefined') {
-					return 'A';
-				} else {
-					return String.fromCharCode('A'.charCodeAt(0) + Number(num) - 1);
+	DOMWrapper.WrappedElement.prototype.fastClick = function() {
+		const pt = {x: -1, y: 0};
+		return this
+			.on('touchstart', (e) => {
+				const [touch] = e.touches;
+				pt.x = touch.pageX;
+				pt.y = touch.pageY;
+			}, {passive: true})
+			.on('touchend', (e) => {
+				if(
+					pt.x === -1 ||
+					e.touches.length !== 0 ||
+					e.changedTouches.length !== 1
+				) {
+					pt.x = -1;
+					return;
 				}
-			})
-			.replace(/[{}]/g, '');
-	}
-
-	function toCappedFixed(v, cap) {
-		const s = v.toString();
-		const p = s.indexOf('.');
-		if(p === -1 || s.length - p - 1 <= cap) {
-			return s;
-		}
-		return v.toFixed(cap);
-	}
-
-	function fetchResource(path) {
-		if(typeof fetch === 'undefined') {
-			return Promise.reject(new Error());
-		}
-		return fetch(path)
-			.then((response) => {
-				if(!response.ok) {
-					throw new Error(response.statusText);
+				const [touch] = e.changedTouches;
+				if(
+					Math.abs(pt.x - touch.pageX) < 10 &&
+					Math.abs(pt.y - touch.pageY) < 10
+				) {
+					e.preventDefault();
+					e.target.click();
 				}
-				return response;
+				pt.x = -1;
 			});
-	}
+	};
 
-	/* eslint-disable complexity */
-	function makeURL(code, {height, width, zoom}) {
-		/* eslint-enable complexity */
-		const uri = code
-			.split('\n')
-			.map(encodeURIComponent)
-			.filter((ln) => ln !== '')
-			.join('/');
-
-		let opts = '';
-		if(!Number.isNaN(width) || !Number.isNaN(height)) {
-			if(!Number.isNaN(width)) {
-				opts += 'w' + toCappedFixed(Math.max(width, 0), 4);
-			}
-			if(!Number.isNaN(height)) {
-				opts += 'h' + toCappedFixed(Math.max(height, 0), 4);
-			}
-			opts += '/';
-		} else if(!Number.isNaN(zoom) && zoom !== 1) {
-			opts += 'z' + toCappedFixed(Math.max(zoom, 0), 4);
-			opts += '/';
-		}
-
-		return opts + uri + '.svg';
-	}
-
-	function makeSplit(nodes, options) {
+	function split(nodes, options) {
 		const filteredNodes = [];
 		const filteredOpts = {
 			direction: options.direction,
@@ -759,7 +683,7 @@
 
 	DOMWrapper.WrappedElement.prototype.split = function(nodes, options) {
 		this.add(nodes);
-		makeSplit(nodes, options);
+		split(nodes, options);
 		return this;
 	};
 
@@ -796,34 +720,533 @@
 		});
 	}
 
-	DOMWrapper.WrappedElement.prototype.fastClick = function() {
-		const pt = {x: -1, y: 0};
-		return this
-			.on('touchstart', (e) => {
-				const [touch] = e.touches;
-				pt.x = touch.pageX;
-				pt.y = touch.pageY;
-			}, {passive: true})
-			.on('touchend', (e) => {
-				if(
-					pt.x === -1 ||
-					e.touches.length !== 0 ||
-					e.changedTouches.length !== 1
-				) {
-					pt.x = -1;
+	class EventObject {
+		constructor() {
+			this.listeners = new Map();
+			this.forwards = new Set();
+		}
+
+		addEventListener(type, callback) {
+			const l = this.listeners.get(type);
+			if(l) {
+				l.push(callback);
+			} else {
+				this.listeners.set(type, [callback]);
+			}
+		}
+
+		removeEventListener(type, fn) {
+			const l = this.listeners.get(type);
+			if(!l) {
+				return;
+			}
+			const i = l.indexOf(fn);
+			if(i !== -1) {
+				l.splice(i, 1);
+			}
+		}
+
+		on(type, fn) {
+			this.addEventListener(type, fn);
+			return this;
+		}
+
+		off(type, fn) {
+			this.removeEventListener(type, fn);
+			return this;
+		}
+
+		countEventListeners(type) {
+			return (this.listeners.get(type) || []).length;
+		}
+
+		removeAllEventListeners(type) {
+			if(type) {
+				this.listeners.delete(type);
+			} else {
+				this.listeners.clear();
+			}
+		}
+
+		addEventForwarding(target) {
+			this.forwards.add(target);
+		}
+
+		removeEventForwarding(target) {
+			this.forwards.delete(target);
+		}
+
+		removeAllEventForwardings() {
+			this.forwards.clear();
+		}
+
+		trigger(type, params = []) {
+			(this.listeners.get(type) || []).forEach(
+				(listener) => listener(...params)
+			);
+			this.forwards.forEach((fwd) => fwd.trigger(type, params));
+		}
+	}
+
+	const PARAM_PATTERN = /\{[^}]+\}/g;
+
+	function addNewline(value) {
+		if(value.length > 0 && value.charAt(value.length - 1) !== '\n') {
+			return value + '\n';
+		}
+		return value;
+	}
+
+	function findPos(content, index) {
+		let p = 0;
+		let line = 0;
+		for(;;) {
+			const nextLn = content.indexOf('\n', p) + 1;
+			if(index < nextLn || nextLn === 0) {
+				return {ch: index - p, line};
+			}
+			p = nextLn;
+			++ line;
+		}
+	}
+
+	function cmInRange(pos, {from, to}) {
+		return !(
+			pos.line < from.line || (pos.line === from.line && pos.ch < from.ch) ||
+			pos.line > to.line || (pos.line === to.line && pos.ch > to.ch)
+		);
+	}
+
+	function findNextToken(block, skip) {
+		PARAM_PATTERN.lastIndex = 0;
+		for(let m = null; (m = PARAM_PATTERN.exec(block));) {
+			if(!skip.includes(m[0])) {
+				return m[0];
+			}
+		}
+		return null;
+	}
+
+	class CodeEditor extends EventObject {
+		constructor(dom, container, {
+			mode = '',
+			require = null,
+			value = '',
+		}) {
+			super();
+
+			this.mode = mode;
+			this.require = require || (() => null);
+
+			this.marker = null;
+
+			this.isAutocompleting = false;
+			this.enhanced = false;
+
+			this.code = dom.el('textarea')
+				.setClass('editor-simple')
+				.val(value)
+				.on('input', () => this.trigger('change'))
+				.on('focus', () => this.trigger('focus'))
+				.attach(container);
+
+			this._enhance();
+		}
+
+		markLineHover(ln = null) {
+			this.unmarkLineHover();
+			if(ln !== null && this.enhanced) {
+				this.marker = this.code.markText(
+					{ch: 0, line: ln},
+					{ch: 0, line: ln + 1},
+					{
+						className: 'hover',
+						clearOnEnter: true,
+						inclusiveLeft: false,
+						inclusiveRight: false,
+					}
+				);
+			}
+		}
+
+		unmarkLineHover() {
+			if(this.marker) {
+				this.marker.clear();
+				this.marker = null;
+			}
+		}
+
+		selectLine(ln = null) {
+			if(ln === null) {
+				return;
+			}
+			if(this.enhanced) {
+				this.code.setSelection(
+					{ch: 0, line: ln},
+					{ch: 0, line: ln + 1},
+					{bias: -1, origin: '+focus'}
+				);
+				this.code.focus();
+			}
+		}
+
+		enterParams(start, end, block) {
+			const doc = this.code.getDoc();
+			const endBookmark = doc.setBookmark(end);
+			const done = [];
+
+			const keydown = (cm, event) => {
+				switch(event.keyCode) {
+				case 13:
+				case 9:
+					if(!this.isAutocompleting) {
+						event.preventDefault();
+					}
+					this.advanceParams();
+					break;
+				case 27:
+					if(!this.isAutocompleting) {
+						event.preventDefault();
+						this.cancelParams();
+					}
+					break;
+				}
+			};
+
+			const move = () => {
+				if(this.paramMarkers.length === 0) {
 					return;
 				}
-				const [touch] = e.changedTouches;
-				if(
-					Math.abs(pt.x - touch.pageX) < 10 &&
-					Math.abs(pt.y - touch.pageY) < 10
-				) {
-					e.preventDefault();
-					e.target.click();
+				const m = this.paramMarkers[0].find();
+				const [r] = doc.listSelections();
+				if(!cmInRange(r.anchor, m) || !cmInRange(r.head, m)) {
+					this.cancelParams();
+					this.code.setSelection(r.anchor, r.head);
 				}
-				pt.x = -1;
+			};
+
+			this.paramMarkers = [];
+			this.cancelParams = () => {
+				this.code.off('keydown', keydown);
+				this.code.off('cursorActivity', move);
+				this.paramMarkers.forEach((m) => m.clear());
+				this.paramMarkers = null;
+				endBookmark.clear();
+				this.code.setCursor(end);
+				this.cancelParams = null;
+				this.advanceParams = null;
+			};
+			this.advanceParams = () => {
+				this.paramMarkers.forEach((m) => m.clear());
+				this.paramMarkers.length = 0;
+				this.nextParams(start, endBookmark, block, done);
+			};
+
+			this.code.on('keydown', keydown);
+			this.code.on('cursorActivity', move);
+
+			this.advanceParams();
+		}
+
+		nextParams(start, endBookmark, block, done) {
+			const tok = findNextToken(block, done);
+			if(!tok) {
+				this.cancelParams();
+				return;
+			}
+			done.push(tok);
+
+			const doc = this.code.getDoc();
+			const ranges = [];
+			let {ch} = start;
+			for(let ln = start.line; ln < endBookmark.find().line; ++ ln) {
+				const line = doc.getLine(ln).slice(ch);
+				for(let p = 0; (p = line.indexOf(tok, p)) !== -1; p += tok.length) {
+					const anchor = {ch: p, line: ln};
+					const head = {ch: p + tok.length, line: ln};
+					ranges.push({anchor, head});
+					this.paramMarkers.push(doc.markText(anchor, head, {
+						className: 'param',
+						clearWhenEmpty: false,
+						inclusiveLeft: true,
+						inclusiveRight: true,
+					}));
+				}
+				ch = 0;
+			}
+
+			if(ranges.length > 0) {
+				doc.setSelections(ranges, 0);
+			} else {
+				this.cancelParams();
+			}
+		}
+
+		addCodeBlock(block) {
+			const lines = block.split('\n').length;
+
+			this.code.focus();
+
+			if(this.enhanced) {
+				const cur = this.code.getCursor('head');
+				const pos = {ch: 0, line: cur.line + ((cur.ch > 0) ? 1 : 0)};
+				let replaced = addNewline(block);
+				if(pos.line >= this.code.lineCount()) {
+					replaced = '\n' + replaced;
+				}
+				this.code.replaceRange(replaced, pos, null, 'library');
+				const end = {ch: 0, line: pos.line + lines};
+				this.enterParams(pos, end, block);
+			} else {
+				const value = this.value();
+				const cur = this.code.element.selectionStart;
+				const pos = ('\n' + value + '\n').indexOf('\n', cur);
+				const replaced = (
+					addNewline(value.substr(0, pos)) +
+					addNewline(block)
+				);
+				this.code
+					.val(replaced + value.substr(pos))
+					.select(replaced.length);
+				this.trigger('change');
+			}
+		}
+
+		value() {
+			if(this.enhanced) {
+				return this.code.getDoc().getValue();
+			} else {
+				return this.code.element.value;
+			}
+		}
+
+		setValue(code) {
+			if(this.enhanced) {
+				const doc = this.code.getDoc();
+				doc.setValue(code);
+				doc.clearHistory();
+			} else {
+				this.code.val(code);
+			}
+		}
+
+		_enhance() {
+			// Load on demand for progressive enhancement
+			// (failure to load external module will not block functionality)
+			this.require([
+				'cm/lib/codemirror',
+				'cm/addon/hint/show-hint',
+				'cm/addon/edit/trailingspace',
+				'cm/addon/comment/comment',
+			], (CodeMirror) => {
+				const globals = {};
+				this.trigger('enhance', [CodeMirror, globals]);
+
+				const oldCode = this.code;
+
+				const {selectionStart, selectionEnd, value} = oldCode.element;
+				const focussed = oldCode.focussed();
+
+				const code = new CodeMirror(oldCode.element.parentNode, {
+					extraKeys: {
+						'Cmd-/': (cm) => cm.toggleComment({padding: ''}),
+						'Cmd-Enter': 'autocomplete',
+						'Ctrl-/': (cm) => cm.toggleComment({padding: ''}),
+						'Ctrl-Enter': 'autocomplete',
+						'Ctrl-Space': 'autocomplete',
+						'Shift-Tab': (cm) => cm.execCommand('indentLess'),
+						'Tab': (cm) => cm.execCommand('indentMore'),
+					},
+					globals,
+					lineNumbers: true,
+					mode: this.mode,
+					showTrailingSpace: true,
+					value,
+				});
+				oldCode.detach();
+
+				code.getDoc().setSelection(
+					findPos(value, selectionStart),
+					findPos(value, selectionEnd)
+				);
+
+				let lastKey = 0;
+				code.on('keydown', (cm, event) => {
+					lastKey = event.keyCode;
+				});
+
+				code.on('change', (cm, change) => {
+					this.trigger('change');
+
+					if(change.origin === '+input') {
+						if(lastKey === 13) {
+							lastKey = 0;
+							return;
+						}
+					} else if(change.origin !== 'complete') {
+						return;
+					}
+					CodeMirror.commands.autocomplete(cm, null, {
+						completeSingle: false,
+					});
+				});
+
+				code.on('focus', () => this.trigger('focus'));
+
+				code.on('cursorActivity', () => {
+					const from = code.getCursor('from');
+					const to = code.getCursor('to');
+					this.trigger('cursorActivity', [from, to]);
+				});
+
+				/*
+				 * See https://github.com/codemirror/CodeMirror/issues/3092
+				 * startCompletion will fire even if there are no completions, so
+				 * we cannot rely on it. Instead we hack the hints function to
+				 * propagate 'shown' as 'hint-shown', which we pick up here
+				 */
+				code.on('hint-shown', () => {
+					this.isAutocompleting = true;
+				});
+
+				code.on('endCompletion', () => {
+					this.isAutocompleting = false;
+				});
+
+				if(focussed) {
+					code.focus();
+				}
+
+				this.code = code;
+				this.enhanced = true;
 			});
-	};
+		}
+	}
+
+	class LocalStorage {
+		constructor(id) {
+			this.id = id;
+		}
+
+		set(value) {
+			if(!this.id) {
+				return;
+			}
+			try {
+				window.localStorage.setItem(this.id, value);
+			} catch(ignore) {
+				// Ignore
+			}
+		}
+
+		get() {
+			if(!this.id) {
+				return '';
+			}
+			try {
+				return window.localStorage.getItem(this.id) || '';
+			} catch(e) {
+				return '';
+			}
+		}
+	}
+
+	function toCappedFixed(v, cap) {
+		const s = v.toString();
+		const p = s.indexOf('.');
+		if(p === -1 || s.length - p - 1 <= cap) {
+			return s;
+		}
+		return v.toFixed(cap);
+	}
+
+	function valid(v = null) {
+		return v !== null && !Number.isNaN(v);
+	}
+
+	class URLExporter {
+		constructor(base = '') {
+			this.base = base;
+		}
+
+		setBase(base) {
+			this.base = base;
+		}
+
+		_convertCode(code) {
+			return code
+				.split('\n')
+				.map(encodeURIComponent)
+				.filter((ln) => ln !== '')
+				.join('/');
+		}
+
+		_convertWidthHeight(width, height) {
+			let opts = '';
+			if(valid(width)) {
+				opts += 'w' + toCappedFixed(Math.max(width, 0), 4);
+			}
+			if(valid(height)) {
+				opts += 'h' + toCappedFixed(Math.max(height, 0), 4);
+			}
+			return opts + '/';
+		}
+
+		_convertZoom(zoom) {
+			if(zoom === 1) {
+				return '';
+			}
+			return 'z' + toCappedFixed(Math.max(zoom, 0), 4) + '/';
+		}
+
+		_convertSize({height, width, zoom}) {
+			if(valid(width) || valid(height)) {
+				return this._convertWidthHeight(width, height);
+			}
+			if(valid(zoom)) {
+				return this._convertZoom(zoom);
+			}
+			return '';
+		}
+
+		getURL(code, size = {}) {
+			return (
+				this.base +
+				this._convertSize(size) +
+				this._convertCode(code) +
+				'.svg'
+			);
+		}
+	}
+
+	const DELAY_AGENTCHANGE = 500;
+	const DELAY_STAGECHANGE = 250;
+	const PNG_RESOLUTION = 4;
+
+	function simplifyPreview(code) {
+		return 'headers fade\nterminators fade\n' + code
+			.replace(/\{Agent([0-9]*)\}/g, (match, num) => {
+				if(typeof num === 'undefined') {
+					return 'A';
+				} else {
+					return String.fromCharCode('A'.charCodeAt(0) + Number(num) - 1);
+				}
+			})
+			.replace(/[{}]/g, '');
+	}
+
+	function fetchResource(path) {
+		if(typeof fetch === 'undefined') {
+			return Promise.reject(new Error());
+		}
+		return fetch(path)
+			.then((response) => {
+				if(!response.ok) {
+					throw new Error(response.statusText);
+				}
+				return response;
+			});
+	}
 
 	class Interface {
 		constructor({
@@ -837,7 +1260,7 @@
 		}) {
 			this.diagram = sequenceDiagram;
 			this.defaultCode = defaultCode;
-			this.localStorage = localStorage;
+			this.localStorage = new LocalStorage(localStorage);
 			this.library = library;
 			this.links = links;
 			this.minScale = 1.5;
@@ -863,45 +1286,11 @@
 					this.updateMinSize(this.diagram.getSize());
 					this.pngDirty = true;
 				})
-				.on('mouseover', (element) => {
-					if(this.marker) {
-						this.marker.clear();
-					}
-					if(typeof element.ln !== 'undefined' && this.code.markText) {
-						this.marker = this.code.markText(
-							{ch: 0, line: element.ln},
-							{ch: 0, line: element.ln + 1},
-							{
-								className: 'hover',
-								clearOnEnter: true,
-								inclusiveLeft: false,
-								inclusiveRight: false,
-							}
-						);
-					}
-				})
-				.on('mouseout', () => {
-					if(this.marker) {
-						this.marker.clear();
-						this.marker = null;
-					}
-				})
+				.on('mouseover', (element) => this.code.markLineHover(element.ln))
+				.on('mouseout', () => this.code.unmarkLineHover())
 				.on('click', (element) => {
-					if(this.marker) {
-						this.marker.clear();
-						this.marker = null;
-					}
-					if(
-						typeof element.ln !== 'undefined' &&
-						this.code.setSelection
-					) {
-						this.code.setSelection(
-							{ch: 0, line: element.ln},
-							{ch: 0, line: element.ln + 1},
-							{bias: -1, origin: '+focus'}
-						);
-						this.code.focus();
-					}
+					this.code.unmarkLineHover();
+					this.code.selectLine(element.ln);
 					this._hideURLBuilder();
 				})
 				.on('dblclick', (element) => {
@@ -996,7 +1385,7 @@
 						.add('Loading\u2026')
 				);
 
-			this.renderService = '';
+			this.renderService = new URLExporter();
 			const relativePath = 'render/';
 			fetchResource(relativePath)
 				.then((response) => response.text())
@@ -1005,7 +1394,9 @@
 					if(!path || path.startsWith('<')) {
 						path = relativePath;
 					}
-					this.renderService = new URL(path, window.location.href).href;
+					this.renderService.setBase(
+						new URL(path, window.location.href).href
+					);
 					urlBuilder.empty().add(urlOpts);
 					this._refreshURL();
 				})
@@ -1020,7 +1411,7 @@
 		}
 
 		_refreshURL() {
-			this.urlOutput.val(this.renderService + makeURL(this.value(), {
+			this.urlOutput.val(this.renderService.getURL(this.code.value(), {
 				height: Number.parseFloat(this.urlHeight.element.value),
 				width: Number.parseFloat(this.urlWidth.element.value),
 				zoom: Number.parseFloat(this.urlZoom.element.value || '1'),
@@ -1138,7 +1529,7 @@
 					.setClass('library-item')
 					.add(holdInner)
 					.fastClick()
-					.on('click', this.addCodeBlock.bind(this, lib.code))
+					.on('click', () => this.code.addCodeBlock(lib.code))
 					.attach(container);
 
 				return this.diagram.clone({
@@ -1162,15 +1553,26 @@
 		}
 
 		buildCodePane() {
-			this.isAutocompleting = false;
+			const container = this.dom.el('div').setClass('pane-code');
 
-			this.code = this.dom.el('textarea')
-				.setClass('editor-simple')
-				.val(this.loadCode() || this.defaultCode)
-				.on('input', () => this.update(false));
+			this.code = new CodeEditor(this.dom, container, {
+				mode: 'sequence',
+				require: this.require,
+				value: this.localStorage.get() || this.defaultCode,
+			});
 
-			return this.dom.el('div').setClass('pane-code')
-				.add(this.code);
+			this.code
+				.on('enhance', (CM, globals) => {
+					this.diagram.registerCodeMirrorMode(CM);
+					globals.themes = this.diagram.getThemeNames();
+				})
+				.on('change', () => this.update(false))
+				.on('cursorActivity', (from, to) => {
+					this.diagram.setHighlight(Math.min(from.line, to.line));
+				})
+				.on('focus', () => this._hideURLBuilder());
+
+			return container;
 		}
 
 		buildLibPane() {
@@ -1295,130 +1697,6 @@
 			// Delay first update 1 frame to ensure render target is ready
 			// (prevents initial incorrect font calculations for custom fonts)
 			setTimeout(this.update.bind(this), 0);
-
-			this._enhanceEditor();
-		}
-
-		enterParams(start, end, block) {
-			const doc = this.code.getDoc();
-			const endBookmark = doc.setBookmark(end);
-			const done = [];
-
-			const keydown = (cm, event) => {
-				switch(event.keyCode) {
-				case 13:
-				case 9:
-					if(!this.isAutocompleting) {
-						event.preventDefault();
-					}
-					this.advanceParams();
-					break;
-				case 27:
-					if(!this.isAutocompleting) {
-						event.preventDefault();
-						this.cancelParams();
-					}
-					break;
-				}
-			};
-
-			const move = () => {
-				if(this.paramMarkers.length === 0) {
-					return;
-				}
-				const m = this.paramMarkers[0].find();
-				const [r] = doc.listSelections();
-				if(!cmInRange(r.anchor, m) || !cmInRange(r.head, m)) {
-					this.cancelParams();
-					this.code.setSelection(r.anchor, r.head);
-				}
-			};
-
-			this.paramMarkers = [];
-			this.cancelParams = () => {
-				this.code.off('keydown', keydown);
-				this.code.off('cursorActivity', move);
-				this.paramMarkers.forEach((m) => m.clear());
-				this.paramMarkers = null;
-				endBookmark.clear();
-				this.code.setCursor(end);
-				this.cancelParams = null;
-				this.advanceParams = null;
-			};
-			this.advanceParams = () => {
-				this.paramMarkers.forEach((m) => m.clear());
-				this.paramMarkers.length = 0;
-				this.nextParams(start, endBookmark, block, done);
-			};
-
-			this.code.on('keydown', keydown);
-			this.code.on('cursorActivity', move);
-
-			this.advanceParams();
-		}
-
-		nextParams(start, endBookmark, block, done) {
-			const tok = findNextToken(block, done);
-			if(!tok) {
-				this.cancelParams();
-				return;
-			}
-			done.push(tok);
-
-			const doc = this.code.getDoc();
-			const ranges = [];
-			let {ch} = start;
-			for(let ln = start.line; ln < endBookmark.find().line; ++ ln) {
-				const line = doc.getLine(ln).slice(ch);
-				for(let p = 0; (p = line.indexOf(tok, p)) !== -1; p += tok.length) {
-					const anchor = {ch: p, line: ln};
-					const head = {ch: p + tok.length, line: ln};
-					ranges.push({anchor, head});
-					this.paramMarkers.push(doc.markText(anchor, head, {
-						className: 'param',
-						clearWhenEmpty: false,
-						inclusiveLeft: true,
-						inclusiveRight: true,
-					}));
-				}
-				ch = 0;
-			}
-
-			if(ranges.length > 0) {
-				doc.setSelections(ranges, 0);
-			} else {
-				this.cancelParams();
-			}
-		}
-
-		addCodeBlock(block) {
-			const lines = block.split('\n').length;
-
-			if(this.code.getCursor) {
-				const cur = this.code.getCursor('head');
-				const pos = {ch: 0, line: cur.line + ((cur.ch > 0) ? 1 : 0)};
-				let replaced = addNewline(block);
-				if(pos.line >= this.code.lineCount()) {
-					replaced = '\n' + replaced;
-				}
-				this.code.replaceRange(replaced, pos, null, 'library');
-				const end = {ch: 0, line: pos.line + lines};
-				this.enterParams(pos, end, block);
-			} else {
-				const value = this.value();
-				const cur = this.code.element.selectionStart;
-				const pos = ('\n' + value + '\n').indexOf('\n', cur);
-				const replaced = (
-					addNewline(value.substr(0, pos)) +
-					addNewline(block)
-				);
-				this.code
-					.val(replaced + value.substr(pos))
-					.select(replaced.length);
-				this.update(false);
-			}
-
-			this.code.focus();
 		}
 
 		updateMinSize({width, height}) {
@@ -1445,28 +1723,6 @@
 			this.diagram.render(sequence);
 		}
 
-		saveCode(src) {
-			if(!this.localStorage) {
-				return;
-			}
-			try {
-				window.localStorage.setItem(this.localStorage, src);
-			} catch(ignore) {
-				// Ignore
-			}
-		}
-
-		loadCode() {
-			if(!this.localStorage) {
-				return '';
-			}
-			try {
-				return window.localStorage.getItem(this.localStorage) || '';
-			} catch(e) {
-				return '';
-			}
-		}
-
 		markError(error) {
 			if(typeof error === 'object' && error.message) {
 				this.errorMsg.text(error.message);
@@ -1480,40 +1736,22 @@
 			this.errorMsg.text('').delClass('error');
 		}
 
-		value() {
-			if(this.code.getDoc) {
-				return this.code.getDoc().getValue();
-			} else {
-				return this.code.element.value;
-			}
-		}
-
-		setValue(code) {
-			if(this.code.getDoc) {
-				const doc = this.code.getDoc();
-				doc.setValue(code);
-				doc.clearHistory();
-			} else {
-				this.code.val(code);
-			}
-			this.diagram.expandAll({render: false});
-			this.update(true);
-			this.diagram.setHighlight(null);
-		}
-
 		loadFile(file) {
 			return getFileContent(file).then((svg) => {
 				const code = this.diagram.extractCodeFromSVG(svg);
 				if(code) {
-					this.setValue(code);
+					this.code.setValue(code);
+					this.diagram.expandAll({render: false});
+					this.update(true);
+					this.diagram.setHighlight(null);
 				}
 			});
 		}
 
 		update(immediate = true) {
 			this._hideURLBuilder();
-			const src = this.value();
-			this.saveCode(src);
+			const src = this.code.value();
+			this.localStorage.set(src);
 			let sequence = null;
 			try {
 				sequence = this.diagram.process(src);
@@ -1597,97 +1835,6 @@
 				this._showURLBuilder();
 			}
 		}
-
-		_enhanceEditor() {
-			// Load on demand for progressive enhancement
-			// (failure to load external module will not block functionality)
-			this.require([
-				'cm/lib/codemirror',
-				'cm/addon/hint/show-hint',
-				'cm/addon/edit/trailingspace',
-				'cm/addon/comment/comment',
-			], (CodeMirror) => {
-				this.diagram.registerCodeMirrorMode(CodeMirror);
-
-				const selBegin = this.code.element.selectionStart;
-				const selEnd = this.code.element.selectionEnd;
-				const val = this.code.element.value;
-				const focussed = this.code.focussed();
-
-				const code = new CodeMirror(this.code.element.parentNode, {
-					extraKeys: {
-						'Cmd-/': (cm) => cm.toggleComment({padding: ''}),
-						'Cmd-Enter': 'autocomplete',
-						'Ctrl-/': (cm) => cm.toggleComment({padding: ''}),
-						'Ctrl-Enter': 'autocomplete',
-						'Ctrl-Space': 'autocomplete',
-						'Shift-Tab': (cm) => cm.execCommand('indentLess'),
-						'Tab': (cm) => cm.execCommand('indentMore'),
-					},
-					globals: {
-						themes: this.diagram.getThemeNames(),
-					},
-					lineNumbers: true,
-					mode: 'sequence',
-					showTrailingSpace: true,
-					value: val,
-				});
-				this.code.detach();
-				code.getDoc().setSelection(
-					findPos(val, selBegin),
-					findPos(val, selEnd)
-				);
-
-				let lastKey = 0;
-				code.on('keydown', (cm, event) => {
-					lastKey = event.keyCode;
-				});
-
-				code.on('change', (cm, change) => {
-					this.update(false);
-
-					if(change.origin === '+input') {
-						if(lastKey === 13) {
-							lastKey = 0;
-							return;
-						}
-					} else if(change.origin !== 'complete') {
-						return;
-					}
-					CodeMirror.commands.autocomplete(cm, null, {
-						completeSingle: false,
-					});
-				});
-
-				code.on('focus', () => this._hideURLBuilder());
-
-				code.on('cursorActivity', () => {
-					const from = code.getCursor('from').line;
-					const to = code.getCursor('to').line;
-					this.diagram.setHighlight(Math.min(from, to));
-				});
-
-				/*
-				 * See https://github.com/codemirror/CodeMirror/issues/3092
-				 * startCompletion will fire even if there are no completions, so
-				 * we cannot rely on it. Instead we hack the hints function to
-				 * propagate 'shown' as 'hint-shown', which we pick up here
-				 */
-				code.on('hint-shown', () => {
-					this.isAutocompleting = true;
-				});
-
-				code.on('endCompletion', () => {
-					this.isAutocompleting = false;
-				});
-
-				if(focussed) {
-					code.focus();
-				}
-
-				this.code = code;
-			});
-		}
 	}
 
 	var SequenceDiagram = window.SequenceDiagram;
diff --git a/web/lib/editor.min.js b/web/lib/editor.min.js
index d137393..7525604 100644
--- a/web/lib/editor.min.js
+++ b/web/lib/editor.min.js
@@ -1 +1 @@
-!function(){"use strict";function e(e){return null===e?null:e.element?e.element:e}function t(e){return e.length>0&&"\n"!==e.charAt(e.length-1)?e+"\n":e}function i(e,t){let i=0,s=0;for(;;){const n=e.indexOf("\n",i)+1;if(t<n||0===n)return{ch:t-i,line:s};i=n,++s}}function s(e,{from:t,to:i}){return!(e.line<t.line||e.line===t.line&&e.ch<t.ch||e.line>i.line||e.line===i.line&&e.ch>i.ch)}function n(e,t){const i=e.toString(),s=i.indexOf(".");return-1===s||i.length-s-1<=t?i:e.toFixed(t)}var o=[{code:"{Agent1} -> {Agent2}: {Message}",title:"Simple arrow (synchronous)"},{code:"{Agent1} --\x3e {Agent2}: {Message}",title:"Arrow with dotted line (response)"},{code:"{Agent1} ->> {Agent2}: {Message}",title:"Open arrow (asynchronous)"},{code:"{Agent1} -x {Agent2}: {Message}",title:"Lost message"},{code:"{Agent1} ~> {Agent2}: {Message}",title:"Wavy line"},{code:"{Agent1} -> {Agent1}: {Message}",title:"Self-connection"},{code:"{Agent1} -> ...{id}\n...{id} -> {Agent2}: {Message}",preview:"begin A, B\nA -> ...x\n...x -> B: Message",title:"Asynchronous message"},{code:"* -> {Agent1}: {Message}",title:"Found message"},{code:"{Agent1} -> {Agent2}\n& {Agent1} -> {Agent3}: {Broadcast}",title:"Broadcast message"},{code:"{Agent1} -> +{Agent2}: {Request}\n{Agent1} <-- -{Agent2}: {Response}",title:"Request/response pair"},{code:"{Agent1} -> *{Agent2}: {Request}\n{Agent1} <-- !{Agent2}: {Response}",title:"Inline agent creation / destruction"},{code:"{Agent1} -> {Agent2}: {Request}\n{Agent1} <-- {Agent2}: {Response}\nend {Agent2}",preview:"begin A\n::\nA -> B: Request\nA <-- B: Response\nend B",title:"Agent creation / destruction"},{code:'autolabel "[<inc>] <label>"',preview:'autolabel "[<inc>] <label>"\nA -> B: Foo\nA <- B: Bar\nA -> B: Baz',title:"Numbered labels"},{code:"if {Condition1}\n  {Agent1} -> {Agent2}\nelse if {Condition2}\n  {Agent1} -> {Agent2}\nelse\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\nif Condition1\n  A -> B\nelse if Condition2\n  A -> B\nelse\n  A -> B\nend",title:"Conditional blocks"},{code:"repeat {Condition}\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\nrepeat Condition\n  A -> B\nend",title:"Repeated block"},{code:"begin reference: {Label} as {Name}\n{Agent1} -> {Name}\nend {Name}",preview:'begin A\nbegin reference: "See 1.3" as myRef\nA -> myRef\nmyRef -> A\nend myRef',title:"Reference"},{code:"begin reference over {Covered}: {Label} as {Name}\n{Agent1} -> {Name}\nend {Name}",preview:'begin A, B, C\nbegin reference over B, C: "See 1.3" as myRef\nA -> myRef\nmyRef -> A\nend myRef',title:"Reference over agents"},{code:"group {Label}\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\ngroup Label\n  A -> B\nend",title:"Group"},{code:"note over {Agent1}: {Message}",title:"Note over agent"},{code:"note over {Agent1}, {Agent2}: {Message}",title:"Note over multiple agents"},{code:"note left of {Agent1}: {Message}",title:"Note left of agent"},{code:"note right of {Agent1}: {Message}",title:"Note right of agent"},{code:"note between {Agent1}, {Agent2}: {Message}",title:"Note between agents"},{code:"{Agent1} -> {Agent2}\n& note right of {Agent2}: {Message}",title:"Inline note"},{code:"state over {Agent1}: {State}",title:"State over agent"},{code:"[ -> {Agent1}: {Message1}\n{Agent1} -> ]: {Message2}",title:"Arrows to/from the sides"},{code:"{Agent1} -~ ]: {Message1}\n{Agent1} <-~ ]: {Message2}",title:"Fading arrows"},{code:"text right: {Message}",preview:'A -> B\nsimultaneously:\ntext right: "Message\\non the\\nside"',title:"Text beside the diagram"},{code:"divider space with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider space with height 30: message",title:"Vertical space divider"},{code:"divider line with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider line with height 30: message",title:"Line divider"},{code:"divider delay with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider delay with height 30: message",title:"Delay divider"},{code:"divider tear with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider tear with height 30: message",title:"Tear divider"},{code:"title {Title}",preview:"headers box\ntitle Title\nA -> B",title:"Title"},{code:"**{text}**",preview:"A -> B: **bold**",title:"Bold markdown"},{code:"_{text}_",preview:"A -> B: _italic_",title:"Italic markdown"},{code:"~{text}~",preview:"A -> B: ~strikeout~",title:"Strikeout markdown"},{code:"<u>{text}</u>",preview:"A -> B: <u>underline</u>",title:"Underline markdown"},{code:"<o>{text}</o>",preview:"A -> B: <o>overline</o>",title:"Overline markdown"},{code:"<sup>{text}</sup>",preview:"A -> B: super<sup>script</sup>",title:"Superscript markdown"},{code:"<sub>{text}</sub>",preview:"A -> B: sub<sub>script</sub>",title:"Subscript markdown"},{code:"`{text}`",preview:"A -> B: `mono`",title:"Monospace markdown"},{code:"<red>{text}</red>",preview:"A -> B: <red>red</red>",title:"Red markdown"},{code:"<highlight>{text}</highlight>",preview:"A -> B: <highlight>highlight</highlight>",title:"Highlight markdown"},{code:"{Agent} is red",preview:"headers box\nA is red\nbegin A",title:"Red agent line"},{code:"{Agent} is a person",preview:"headers box\nA is a person\nbegin A",title:"Person indicator"},{code:"{Agent} is a database",preview:"headers box\nA is a database\nbegin A",title:"Database indicator"},{code:"theme monospace",preview:"headers box\ntitle mono\ntheme monospace\nA -> B",title:"Monospace theme"},{code:"theme chunky",preview:"headers box\ntitle chunky\ntheme chunky\nA -> B",title:"Chunky theme"},{code:"theme sketch",preview:"headers box\ntitle sketch\ntheme sketch\nA -> B",title:"Sketch theme"},{code:"terminators cross",preview:"begin A\nterminators cross",title:"Cross terminators"},{code:"terminators fade",preview:"begin A\nterminators fade",title:"Fade terminators"},{code:"terminators bar",preview:"begin A\nterminators bar",title:"Bar terminators"},{code:"terminators box",preview:"begin A\nterminators box",title:"Box terminators"}];class r{constructor(e){this.element=e}addBefore(t=null,i=null){if(null===t)return this;if(Array.isArray(t))for(const e of t)this.addBefore(e,i);else{const s=function(e,t){return"string"==typeof e?t.createTextNode(e):"number"==typeof e?t.createTextNode(e.toString(10)):"object"==typeof e&&e.element?e.element:e}(t,this.element.ownerDocument);this.element.insertBefore(s,e(i))}return this}add(...e){return this.addBefore(e,null)}del(t=null){return null!==t&&this.element.removeChild(e(t)),this}attr(e,t){return this.element.setAttribute(e,t),this}attrs(e){for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&this.element.setAttribute(t,e[t]);return this}styles(e){for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&(this.element.style[t]=e[t]);return this}setClass(e){return this.attr("class",e)}addClass(e){const t=this.element.getAttribute("class");if(!t)return this.setClass(e);const i=t.split(" ");return i.includes(e)?this:(i.push(e),this.attr("class",i.join(" ")))}delClass(e){const t=this.element.getAttribute("class");if(!t)return this;const i=t.split(" "),s=i.indexOf(e);return-1!==s&&(i.splice(s,1),this.attr("class",i.join(" "))),this}text(e){return this.element.textContent=e,this}on(e,t,i={}){if(Array.isArray(e))for(const s of e)this.on(s,t,i);else this.element.addEventListener(e,t,i);return this}off(e,t,i={}){if(Array.isArray(e))for(const s of e)this.off(s,t,i);else this.element.removeEventListener(e,t,i);return this}val(e){return this.element.value=e,this}select(e,t=null){return this.element.selectionStart=e,this.element.selectionEnd=null===t?e:t,this}focus(){return this.element.focus(),this}focussed(){return this.element===this.element.ownerDocument.activeElement}empty(){for(;this.element.childNodes.length>0;)this.element.removeChild(this.element.lastChild);return this}attach(t){return e(t).appendChild(this.element),this}detach(){return this.element.parentNode&&this.element.parentNode.removeChild(this.element),this}}class l{constructor(e){if(!e)throw new Error("Missing document!");this.document=e,this.wrap=this.wrap.bind(this),this.el=this.el.bind(this),this.txt=this.txt.bind(this)}wrap(e){return e.element?e:new r(e)}el(e,t=null){let i=null;return i=null===t?this.document.createElement(e):this.document.createElementNS(t,e),new r(i)}txt(e=""){return this.document.createTextNode(e)}}l.WrappedElement=r;const a=500,d=250,h=4,c=/\{[^}]+\}/g;l.WrappedElement.prototype.split=function(e,t){return this.add(e),function(e,t){const i=[],s={direction:t.direction,minSize:[],sizes:[],snapOffset:t.snapOffset};let n=0;for(let o=0;o<e.length;++o)e[o]&&(i.push(e[o]),s.minSize.push(t.minSize[o]),s.sizes.push(t.sizes[o]),n+=t.sizes[o]);for(let t=0;t<i.length;++t){s.minSize[t]*=100/n,s.sizes[t]*=100/n;const i=s.sizes[t]+"%";"vertical"===s.direction?e[t].styles({boxSizing:"border-box",height:i,width:"100%"}):e[t].styles({boxSizing:"border-box",display:"inline-block",height:"100%",verticalAlign:"top",width:i})}i.length<2||t.require(["split"],t=>{const n=e[0].element.parentNode,o=n.addEventListener,r=n.removeEventListener;n.addEventListener=((e,t)=>{"mousemove"===e||"touchmove"===e?window.addEventListener(e,t,{passive:!0}):o.call(n,e,t)}),n.removeEventListener=((e,t)=>{"mousemove"===e||"touchmove"===e?window.removeEventListener(e,t):r.call(n,e,t)});let l=null;const a="vertical"===s.direction?"row-resize":"col-resize";return new t(i.map(e=>e.element),Object.assign({cursor:a,direction:"vertical",gutterSize:0,onDragEnd:()=>{document.body.style.cursor=l,l=null},onDragStart:()=>{l=document.body.style.cursor,document.body.style.cursor=a}},s))})}(e,t),this},l.WrappedElement.prototype.fastClick=function(){const e={x:-1,y:0};return this.on("touchstart",t=>{const[i]=t.touches;e.x=i.pageX,e.y=i.pageY},{passive:!0}).on("touchend",t=>{if(-1===e.x||0!==t.touches.length||1!==t.changedTouches.length)return void(e.x=-1);const[i]=t.changedTouches;Math.abs(e.x-i.pageX)<10&&Math.abs(e.y-i.pageY)<10&&(t.preventDefault(),t.target.click()),e.x=-1})};var u=window.SequenceDiagram;const m=window.requirejs,g={},p={},b=window.document.getElementsByTagName("meta");for(let e=0;e<b.length;++e){const t=b[e],i=t.getAttribute("name");if(i&&i.startsWith("cdn-")){const e=i.substr("cdn-".length);let s=t.getAttribute("content");s.endsWith(".mjs")?s=s.substr(0,s.length-".mjs".length):s.endsWith(".js")&&(s=s.substr(0,s.length-".js".length)),g[e]=s;const n=t.getAttribute("data-integrity");n&&(p[e]=n)}}m.config({hashes:p,onNodeCreated:(e,t,i)=>{t.hashes[i]&&(e.setAttribute("integrity",t.hashes[i]),e.setAttribute("crossorigin","anonymous"))},paths:g});window.addEventListener("load",()=>{const e=window.document.getElementById("loader"),[r]=e.getElementsByTagName("nav"),g=r.getElementsByTagName("a"),p=[];for(let e=0;e<g.length;++e){const t=g[e];p.push({href:t.getAttribute("href"),label:t.textContent,touchLabel:t.dataset.touch})}const b=new class{constructor({sequenceDiagram:e,defaultCode:t="",localStorage:i="",library:s=[],links:n=[],require:o=null,touchUI:r=!1}){this.diagram=e,this.defaultCode=t,this.localStorage=i,this.library=s,this.links=n,this.minScale=1.5,this.require=o||(()=>null),this.touchUI=r,this.debounced=null,this.latestSeq=null,this.renderedSeq=null,this.pngDirty=!0,this.updatingPNG=!1,this.marker=null,this._downloadSVGClick=this._downloadSVGClick.bind(this),this._downloadPNGClick=this._downloadPNGClick.bind(this),this._downloadPNGFocus=this._downloadPNGFocus.bind(this),this._downloadURLClick=this._downloadURLClick.bind(this),this._hideDropStyle=this._hideDropStyle.bind(this),this.diagram.on("render",()=>{this.updateMinSize(this.diagram.getSize()),this.pngDirty=!0}).on("mouseover",e=>{this.marker&&this.marker.clear(),void 0!==e.ln&&this.code.markText&&(this.marker=this.code.markText({ch:0,line:e.ln},{ch:0,line:e.ln+1},{className:"hover",clearOnEnter:!0,inclusiveLeft:!1,inclusiveRight:!1}))}).on("mouseout",()=>{this.marker&&(this.marker.clear(),this.marker=null)}).on("click",e=>{this.marker&&(this.marker.clear(),this.marker=null),void 0!==e.ln&&this.code.setSelection&&(this.code.setSelection({ch:0,line:e.ln},{ch:0,line:e.ln+1},{bias:-1,origin:"+focus"}),this.code.focus()),this._hideURLBuilder()}).on("dblclick",e=>{this.diagram.toggleCollapsed(e.ln),this._hideURLBuilder()})}buildURLBuilder(){const e=this.dom.el("div").setClass("copied").add("Copied to Clipboard");this.urlOutput=this.dom.el("input").setClass("output").attr("readonly","readonly").on("focus",()=>{this.urlOutput.select(0,this.urlOutput.element.value.length)});const t=this.dom.el("button").setClass("copy").attr("title","Copy to clipboard").fastClick().on("click",()=>{this.touchUI&&this.urlOutput.styles({display:"block"}),this.urlOutput.focus().select(0,this.urlOutput.element.value.length).element.ownerDocument.execCommand("copy"),t.focus(),this.container.delClass("keyinput"),this.touchUI&&this.urlOutput.styles({display:"none"}),e.styles({display:"block",opacity:1,transition:"none"}),setTimeout(()=>e.styles({opacity:0,transition:"opacity 0.5s linear"}),1e3),setTimeout(()=>e.styles({display:"none"}),1500)});this.urlWidth=this.dom.el("input").attrs({min:0,placeholder:"auto",step:"any",type:"number"}).on("input",()=>{this.urlZoom.val("1"),this._refreshURL()}),this.urlHeight=this.dom.el("input").attrs({min:0,placeholder:"auto",step:"any",type:"number"}).on("input",()=>{this.urlZoom.val("1"),this._refreshURL()}),this.urlZoom=this.dom.el("input").attrs({min:0,step:"any",type:"number",value:1}).on("input",()=>{this.urlWidth.val(""),this.urlHeight.val(""),this._refreshURL()});const i=this.dom.el("div").setClass("config").add(this.dom.el("label").add("width ",this.urlWidth),", ",this.dom.el("label").add("height ",this.urlHeight),this.dom.el("span").setClass("or").add("or"),this.dom.el("label").add("zoom ",this.urlZoom),this.urlOutput,t,e),s=this.dom.el("div").setClass("urlbuilder").styles({display:"none"}).add(this.dom.el("div").setClass("message").add("Loading…"));return this.renderService="",function(e){return"undefined"==typeof fetch?Promise.reject(new Error):fetch(e).then(e=>{if(!e.ok)throw new Error(e.statusText);return e})}("render/").then(e=>e.text()).then(e=>{let t=e.trim();t&&!t.startsWith("<")||(t="render/"),this.renderService=new URL(t,window.location.href).href,s.empty().add(i),this._refreshURL()}).catch(()=>{s.empty().add(this.dom.el("div").setClass("message").add("No online rendering service available."))}),s}_refreshURL(){this.urlOutput.val(this.renderService+function(e,{height:t,width:i,zoom:s}){const o=e.split("\n").map(encodeURIComponent).filter(e=>""!==e).join("/");let r="";return Number.isNaN(i)&&Number.isNaN(t)?Number.isNaN(s)||1===s||(r+="z"+n(Math.max(s,0),4),r+="/"):(Number.isNaN(i)||(r+="w"+n(Math.max(i,0),4)),Number.isNaN(t)||(r+="h"+n(Math.max(t,0),4)),r+="/"),r+o+".svg"}(this.value(),{height:Number.parseFloat(this.urlHeight.element.value),width:Number.parseFloat(this.urlWidth.element.value),zoom:Number.parseFloat(this.urlZoom.element.value||"1")}))}_showURLBuilder(){this.builderVisible||(this.builderVisible=!0,this.touchUI?this.urlBuilder.styles({bottom:"-210px",display:"block"}):this.urlBuilder.styles({display:"block",height:"0px",padding:"0px",width:this.optsHold.element.clientWidth+"px"}),clearTimeout(this.builderTm),this.builderTm=setTimeout(()=>{this.touchUI?this.urlBuilder.styles({bottom:0}):(this.urlBuilder.styles({height:"150px",padding:"10px",width:"400px"}),this.optsHold.styles({"box-shadow":"10px 10px 25px 12px rgba(0,0,0,0.3)"}))},0),this._refreshURL())}_hideURLBuilder(){this.builderVisible&&(this.builderVisible=!1,this.touchUI?this.urlBuilder.styles({bottom:-this.urlBuilder.element.clientHeight-60+"px"}):(this.urlBuilder.styles({height:"0px",padding:"0px",width:"0px"}),this.optsHold.styles({"box-shadow":"none"})),this.container.delClass("keyinput"),clearTimeout(this.builderTm),this.builderTm=setTimeout(()=>{this.urlBuilder.styles({display:"none"})},200))}buildOptionsDownloads(){return this.downloadPNG=this.dom.el("a").text("Export PNG").attrs({download:"SequenceDiagram.png",href:"#"}).on(["focus","mouseover","mousedown"],this._downloadPNGFocus).on("touchend",this._downloadPNGFocus).on("click",this._downloadPNGClick),this.downloadSVG=this.dom.el("a").text("SVG").attrs({download:"SequenceDiagram.svg",href:"#"}).fastClick().on("click",this._downloadSVGClick),this.downloadURL=this.dom.el("a").text("URL").attrs({href:"#"}).fastClick().on("click",this._downloadURLClick),this.urlBuilder=this.buildURLBuilder(),this.optsHold=this.dom.el("div").setClass("options downloads").add(this.downloadPNG,this.downloadSVG,this.downloadURL,this.urlBuilder),this.optsHold}buildLibrary(e){const t=this.library.map(t=>{const i=this.dom.el("div").attr("title",t.title||t.code),s=this.dom.el("div").setClass("library-item").add(i).fastClick().on("click",this.addCodeBlock.bind(this,t.code)).attach(e);return this.diagram.clone({code:function(e){return"headers fade\nterminators fade\n"+e.replace(/\{Agent([0-9]*)\}/g,(e,t)=>void 0===t?"A":String.fromCharCode("A".charCodeAt(0)+Number(t)-1)).replace(/[{}]/g,"")}(t.preview||t.code),container:i.element,render:!1}).on("error",(e,n)=>{window.console.warn("Failed to render preview",n),s.attr("class","library-item broken"),i.text(t.code)})});try{this.diagram.renderAll(t)}catch(e){}return e}buildCodePane(){return this.isAutocompleting=!1,this.code=this.dom.el("textarea").setClass("editor-simple").val(this.loadCode()||this.defaultCode).on("input",()=>this.update(!1)),this.dom.el("div").setClass("pane-code").add(this.code)}buildLibPane(){return 0===this.library.length?null:this.dom.el("div").setClass("pane-library").add(this.dom.el("div").setClass("pane-library-scroller").add(this.buildLibrary(this.dom.el("div").setClass("pane-library-inner"))))}buildViewPane(){return this.viewPaneInner=this.dom.el("div").setClass("pane-view-inner").add(this.diagram.dom()).on("touchstart",()=>this._hideURLBuilder(),{passive:!0}).on("mousedown",()=>this._hideURLBuilder()),this.errorMsg=this.dom.el("div").setClass("msg-error"),this.dom.el("div").setClass("pane-view").add(this.dom.el("div").setClass("pane-view-scroller").add(this.viewPaneInner),this.errorMsg)}build(e){this.dom=new l(e.ownerDocument),this.container=this.dom.wrap(e).on("dragover",e=>{e.preventDefault(),function(e,t){if(!e.dataTransfer.items&&0===e.dataTransfer.files.length)return[...e.dataTransfer.types].includes("Files");const i=e.dataTransfer.items||e.dataTransfer.files;return 1===i.length&&i[0].type===t}(e,"image/svg+xml")?(e.dataTransfer.dropEffect="copy",this._showDropStyle()):e.dataTransfer.dropEffect="none"}).on("dragleave",this._hideDropStyle).on("dragend",this._hideDropStyle).on("drop",e=>{e.preventDefault(),this._hideDropStyle();const t=function(e,t){const i=e.dataTransfer.items||e.dataTransfer.files;if(1!==i.length||i[0].type!==t)return null;const[s]=i;return s.getAsFile?s.getAsFile():s}(e,"image/svg+xml");t&&this.loadFile(t)}).on("focusin",()=>this.container.addClass("keyinput")).on("focusout",()=>this.container.delClass("keyinput"));const t=this.buildCodePane(),i=this.buildLibPane(),s=this.buildViewPane(),n=this.links.map(e=>this.dom.el("a").attrs({href:e.href,target:"_blank"}).text(this.touchUI?e.touchLabel:e.label));this.touchUI?(this.buildOptionsDownloads(),this.container.addClass("touch").add(this.dom.el("div").setClass("pane-hold").split([s,t],{direction:"vertical",minSize:[10,10],require:this.require,sizes:[80,20],snapOffset:20}),i.styles({display:"none",top:"100%"}),this.urlBuilder,this.dom.el("div").setClass("optbar").add(...n,this.downloadPNG.text("PNG"),this.downloadSVG.text("SVG"),this.downloadURL.text("URL")))):this.container.add(this.dom.el("div").setClass("pane-hold").split([this.dom.el("div").setClass("pane-side").split([t,i],{direction:"vertical",minSize:[100,5],require:this.require,sizes:[70,30],snapOffset:5}),s],{direction:"horizontal",minSize:[10,10],require:this.require,sizes:[30,70],snapOffset:70}),this.dom.el("div").setClass("options links").add(n),this.buildOptionsDownloads()),"undefined"!=typeof window&&window.addEventListener("keydown",e=>{27===e.keyCode&&this._hideURLBuilder()}),setTimeout(this.update.bind(this),0),this._enhanceEditor()}enterParams(e,t,i){const n=this.code.getDoc(),o=n.setBookmark(t),r=[],l=(e,t)=>{switch(t.keyCode){case 13:case 9:this.isAutocompleting||t.preventDefault(),this.advanceParams();break;case 27:this.isAutocompleting||(t.preventDefault(),this.cancelParams())}},a=()=>{if(0===this.paramMarkers.length)return;const e=this.paramMarkers[0].find(),[t]=n.listSelections();s(t.anchor,e)&&s(t.head,e)||(this.cancelParams(),this.code.setSelection(t.anchor,t.head))};this.paramMarkers=[],this.cancelParams=(()=>{this.code.off("keydown",l),this.code.off("cursorActivity",a),this.paramMarkers.forEach(e=>e.clear()),this.paramMarkers=null,o.clear(),this.code.setCursor(t),this.cancelParams=null,this.advanceParams=null}),this.advanceParams=(()=>{this.paramMarkers.forEach(e=>e.clear()),this.paramMarkers.length=0,this.nextParams(e,o,i,r)}),this.code.on("keydown",l),this.code.on("cursorActivity",a),this.advanceParams()}nextParams(e,t,i,s){const n=function(e,t){c.lastIndex=0;for(let i=null;i=c.exec(e);)if(!t.includes(i[0]))return i[0];return null}(i,s);if(!n)return void this.cancelParams();s.push(n);const o=this.code.getDoc(),r=[];let{ch:l}=e;for(let i=e.line;i<t.find().line;++i){const e=o.getLine(i).slice(l);for(let t=0;-1!==(t=e.indexOf(n,t));t+=n.length){const e={ch:t,line:i},s={ch:t+n.length,line:i};r.push({anchor:e,head:s}),this.paramMarkers.push(o.markText(e,s,{className:"param",clearWhenEmpty:!1,inclusiveLeft:!0,inclusiveRight:!0}))}l=0}r.length>0?o.setSelections(r,0):this.cancelParams()}addCodeBlock(e){const i=e.split("\n").length;if(this.code.getCursor){const s=this.code.getCursor("head"),n={ch:0,line:s.line+(s.ch>0?1:0)};let o=t(e);n.line>=this.code.lineCount()&&(o="\n"+o),this.code.replaceRange(o,n,null,"library");const r={ch:0,line:n.line+i};this.enterParams(n,r,e)}else{const i=this.value(),s=this.code.element.selectionStart,n=("\n"+i+"\n").indexOf("\n",s),o=t(i.substr(0,n))+t(e);this.code.val(o+i.substr(n)).select(o.length),this.update(!1)}this.code.focus()}updateMinSize({width:e,height:t}){this.viewPaneInner.styles({minHeight:Math.ceil(t*this.minScale)+"px",minWidth:Math.ceil(e*this.minScale)+"px"})}redrawDebounced(e,t){t<=0?this.redraw(e):(clearTimeout(this.debounced),this.latestSeq=e,this.debounced=setTimeout(()=>this.redraw(e),t))}redraw(e){clearTimeout(this.debounced),this.debounced=null,this.renderedSeq=e,this.diagram.render(e)}saveCode(e){if(this.localStorage)try{window.localStorage.setItem(this.localStorage,e)}catch(e){}}loadCode(){if(!this.localStorage)return"";try{return window.localStorage.getItem(this.localStorage)||""}catch(e){return""}}markError(e){"object"==typeof e&&e.message?this.errorMsg.text(e.message):this.errorMsg.text(e),this.errorMsg.addClass("error")}markOK(){this.errorMsg.text("").delClass("error")}value(){return this.code.getDoc?this.code.getDoc().getValue():this.code.element.value}setValue(e){if(this.code.getDoc){const t=this.code.getDoc();t.setValue(e),t.clearHistory()}else this.code.val(e);this.diagram.expandAll({render:!1}),this.update(!0),this.diagram.setHighlight(null)}loadFile(e){return function(e){return new Promise(t=>{const i=new FileReader;i.addEventListener("loadend",()=>{t(i.result)},{once:!0}),i.readAsText(e)})}(e).then(e=>{const t=this.diagram.extractCodeFromSVG(e);t&&this.setValue(t)})}update(e=!0){this._hideURLBuilder();const t=this.value();this.saveCode(t);let i=null;try{i=this.diagram.process(t)}catch(e){return void this.markError(e)}this.markOK();let s=0;if(!e&&this.renderedSeq){const e=this.renderedSeq;i.agents.length!==e.agents.length?s=a:i.stages.length!==e.stages.length&&(s=d)}this.redrawDebounced(i,s)}forceRender(){this.debounced&&(clearTimeout(this.debounced),this.redraw(this.latestSeq))}updatePNGLink(){return this.forceRender(),!(this.updatingPNG||!this.pngDirty||(this.pngDirty=!1,this.updatingPNG=!0,this.diagram.getPNG({resolution:h}).then(({url:e,latest:t})=>{t&&(this.downloadPNG.attr("href",e),this.updatingPNG=!1)}),0))}_showDropStyle(){this.container.addClass("drop-target")}_hideDropStyle(){this.container.delClass("drop-target")}_downloadPNGFocus(){this.updatePNGLink()}_downloadPNGClick(e){this.updatingPNG?e.preventDefault():this.updatePNGLink()&&e.preventDefault(),this._hideURLBuilder()}_downloadSVGClick(){this.forceRender();const e=this.diagram.getSVGSynchronous();this.downloadSVG.attr("href",e),this._hideURLBuilder()}_downloadURLClick(e){e.preventDefault(),this.builderVisible?this._hideURLBuilder():this._showURLBuilder()}_enhanceEditor(){this.require(["cm/lib/codemirror","cm/addon/hint/show-hint","cm/addon/edit/trailingspace","cm/addon/comment/comment"],e=>{this.diagram.registerCodeMirrorMode(e);const t=this.code.element.selectionStart,s=this.code.element.selectionEnd,n=this.code.element.value,o=this.code.focussed(),r=new e(this.code.element.parentNode,{extraKeys:{"Cmd-/":e=>e.toggleComment({padding:""}),"Cmd-Enter":"autocomplete","Ctrl-/":e=>e.toggleComment({padding:""}),"Ctrl-Enter":"autocomplete","Ctrl-Space":"autocomplete","Shift-Tab":e=>e.execCommand("indentLess"),Tab:e=>e.execCommand("indentMore")},globals:{themes:this.diagram.getThemeNames()},lineNumbers:!0,mode:"sequence",showTrailingSpace:!0,value:n});this.code.detach(),r.getDoc().setSelection(i(n,t),i(n,s));let l=0;r.on("keydown",(e,t)=>{l=t.keyCode}),r.on("change",(t,i)=>{if(this.update(!1),"+input"===i.origin){if(13===l)return void(l=0)}else if("complete"!==i.origin)return;e.commands.autocomplete(t,null,{completeSingle:!1})}),r.on("focus",()=>this._hideURLBuilder()),r.on("cursorActivity",()=>{const e=r.getCursor("from").line,t=r.getCursor("to").line;this.diagram.setHighlight(Math.min(e,t))}),r.on("hint-shown",()=>{this.isAutocompleting=!0}),r.on("endCompletion",()=>{this.isAutocompleting=!1}),o&&r.focus(),this.code=r})}}({defaultCode:'title Labyrinth\n\nBowie -> Goblin: You remind me of the babe\nGoblin -> Bowie: What babe?\nBowie -> Goblin: The babe with the power\nGoblin -> Bowie: What power?\nnote right of Bowie, Goblin: Most people get muddled here!\nBowie -> Goblin: "The power of voodoo"\nGoblin -> Bowie: "Who-do?"\nBowie -> Goblin: You do!\nGoblin -> Bowie: Do what?\nBowie -> Goblin: Remind me of the babe!\n\nBowie -> Audience: Sings\n\nterminators box\n',library:o,links:p,localStorage:"src",require:m,sequenceDiagram:new u,touchUI:"ontouchstart"in window});e.parentNode.removeChild(e),b.build(window.document.body)})}();
\ No newline at end of file
+!function(){"use strict";function e(e){return null===e?null:e.element?e.element:e}function t(e){return e.length>0&&"\n"!==e.charAt(e.length-1)?e+"\n":e}function i(e,t){let i=0,s=0;for(;;){const n=e.indexOf("\n",i)+1;if(t<n||0===n)return{ch:t-i,line:s};i=n,++s}}function s(e,{from:t,to:i}){return!(e.line<t.line||e.line===t.line&&e.ch<t.ch||e.line>i.line||e.line===i.line&&e.ch>i.ch)}function n(e,t){const i=e.toString(),s=i.indexOf(".");return-1===s||i.length-s-1<=t?i:e.toFixed(t)}function r(e=null){return null!==e&&!Number.isNaN(e)}var o=[{code:"{Agent1} -> {Agent2}: {Message}",title:"Simple arrow (synchronous)"},{code:"{Agent1} --\x3e {Agent2}: {Message}",title:"Arrow with dotted line (response)"},{code:"{Agent1} ->> {Agent2}: {Message}",title:"Open arrow (asynchronous)"},{code:"{Agent1} -x {Agent2}: {Message}",title:"Lost message"},{code:"{Agent1} ~> {Agent2}: {Message}",title:"Wavy line"},{code:"{Agent1} -> {Agent1}: {Message}",title:"Self-connection"},{code:"{Agent1} -> ...{id}\n...{id} -> {Agent2}: {Message}",preview:"begin A, B\nA -> ...x\n...x -> B: Message",title:"Asynchronous message"},{code:"* -> {Agent1}: {Message}",title:"Found message"},{code:"{Agent1} -> {Agent2}\n& {Agent1} -> {Agent3}: {Broadcast}",title:"Broadcast message"},{code:"{Agent1} -> +{Agent2}: {Request}\n{Agent1} <-- -{Agent2}: {Response}",title:"Request/response pair"},{code:"{Agent1} -> *{Agent2}: {Request}\n{Agent1} <-- !{Agent2}: {Response}",title:"Inline agent creation / destruction"},{code:"{Agent1} -> {Agent2}: {Request}\n{Agent1} <-- {Agent2}: {Response}\nend {Agent2}",preview:"begin A\n::\nA -> B: Request\nA <-- B: Response\nend B",title:"Agent creation / destruction"},{code:'autolabel "[<inc>] <label>"',preview:'autolabel "[<inc>] <label>"\nA -> B: Foo\nA <- B: Bar\nA -> B: Baz',title:"Numbered labels"},{code:"if {Condition1}\n  {Agent1} -> {Agent2}\nelse if {Condition2}\n  {Agent1} -> {Agent2}\nelse\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\nif Condition1\n  A -> B\nelse if Condition2\n  A -> B\nelse\n  A -> B\nend",title:"Conditional blocks"},{code:"repeat {Condition}\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\nrepeat Condition\n  A -> B\nend",title:"Repeated block"},{code:"begin reference: {Label} as {Name}\n{Agent1} -> {Name}\nend {Name}",preview:'begin A\nbegin reference: "See 1.3" as myRef\nA -> myRef\nmyRef -> A\nend myRef',title:"Reference"},{code:"begin reference over {Covered}: {Label} as {Name}\n{Agent1} -> {Name}\nend {Name}",preview:'begin A, B, C\nbegin reference over B, C: "See 1.3" as myRef\nA -> myRef\nmyRef -> A\nend myRef',title:"Reference over agents"},{code:"group {Label}\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\ngroup Label\n  A -> B\nend",title:"Group"},{code:"note over {Agent1}: {Message}",title:"Note over agent"},{code:"note over {Agent1}, {Agent2}: {Message}",title:"Note over multiple agents"},{code:"note left of {Agent1}: {Message}",title:"Note left of agent"},{code:"note right of {Agent1}: {Message}",title:"Note right of agent"},{code:"note between {Agent1}, {Agent2}: {Message}",title:"Note between agents"},{code:"{Agent1} -> {Agent2}\n& note right of {Agent2}: {Message}",title:"Inline note"},{code:"state over {Agent1}: {State}",title:"State over agent"},{code:"[ -> {Agent1}: {Message1}\n{Agent1} -> ]: {Message2}",title:"Arrows to/from the sides"},{code:"{Agent1} -~ ]: {Message1}\n{Agent1} <-~ ]: {Message2}",title:"Fading arrows"},{code:"text right: {Message}",preview:'A -> B\nsimultaneously:\ntext right: "Message\\non the\\nside"',title:"Text beside the diagram"},{code:"divider space with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider space with height 30: message",title:"Vertical space divider"},{code:"divider line with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider line with height 30: message",title:"Line divider"},{code:"divider delay with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider delay with height 30: message",title:"Delay divider"},{code:"divider tear with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider tear with height 30: message",title:"Tear divider"},{code:"title {Title}",preview:"headers box\ntitle Title\nA -> B",title:"Title"},{code:"**{text}**",preview:"A -> B: **bold**",title:"Bold markdown"},{code:"_{text}_",preview:"A -> B: _italic_",title:"Italic markdown"},{code:"~{text}~",preview:"A -> B: ~strikeout~",title:"Strikeout markdown"},{code:"<u>{text}</u>",preview:"A -> B: <u>underline</u>",title:"Underline markdown"},{code:"<o>{text}</o>",preview:"A -> B: <o>overline</o>",title:"Overline markdown"},{code:"<sup>{text}</sup>",preview:"A -> B: super<sup>script</sup>",title:"Superscript markdown"},{code:"<sub>{text}</sub>",preview:"A -> B: sub<sub>script</sub>",title:"Subscript markdown"},{code:"`{text}`",preview:"A -> B: `mono`",title:"Monospace markdown"},{code:"<red>{text}</red>",preview:"A -> B: <red>red</red>",title:"Red markdown"},{code:"<highlight>{text}</highlight>",preview:"A -> B: <highlight>highlight</highlight>",title:"Highlight markdown"},{code:"{Agent} is red",preview:"headers box\nA is red\nbegin A",title:"Red agent line"},{code:"{Agent} is a person",preview:"headers box\nA is a person\nbegin A",title:"Person indicator"},{code:"{Agent} is a database",preview:"headers box\nA is a database\nbegin A",title:"Database indicator"},{code:"theme monospace",preview:"headers box\ntitle mono\ntheme monospace\nA -> B",title:"Monospace theme"},{code:"theme chunky",preview:"headers box\ntitle chunky\ntheme chunky\nA -> B",title:"Chunky theme"},{code:"theme sketch",preview:"headers box\ntitle sketch\ntheme sketch\nA -> B",title:"Sketch theme"},{code:"terminators cross",preview:"begin A\nterminators cross",title:"Cross terminators"},{code:"terminators fade",preview:"begin A\nterminators fade",title:"Fade terminators"},{code:"terminators bar",preview:"begin A\nterminators bar",title:"Bar terminators"},{code:"terminators box",preview:"begin A\nterminators box",title:"Box terminators"}];class l{constructor(e){this.element=e}addBefore(t=null,i=null){if(null===t)return this;if(Array.isArray(t))for(const e of t)this.addBefore(e,i);else{const s=function(e,t){return"string"==typeof e?t.createTextNode(e):"number"==typeof e?t.createTextNode(e.toString(10)):"object"==typeof e&&e.element?e.element:e}(t,this.element.ownerDocument);this.element.insertBefore(s,e(i))}return this}add(...e){return this.addBefore(e,null)}del(t=null){return null!==t&&this.element.removeChild(e(t)),this}attr(e,t){return this.element.setAttribute(e,t),this}attrs(e){for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&this.element.setAttribute(t,e[t]);return this}styles(e){for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&(this.element.style[t]=e[t]);return this}setClass(e){return this.attr("class",e)}addClass(e){const t=this.element.getAttribute("class");if(!t)return this.setClass(e);const i=t.split(" ");return i.includes(e)?this:(i.push(e),this.attr("class",i.join(" ")))}delClass(e){const t=this.element.getAttribute("class");if(!t)return this;const i=t.split(" "),s=i.indexOf(e);return-1!==s&&(i.splice(s,1),this.attr("class",i.join(" "))),this}text(e){return this.element.textContent=e,this}on(e,t,i={}){if(Array.isArray(e))for(const s of e)this.on(s,t,i);else this.element.addEventListener(e,t,i);return this}off(e,t,i={}){if(Array.isArray(e))for(const s of e)this.off(s,t,i);else this.element.removeEventListener(e,t,i);return this}val(e){return this.element.value=e,this}select(e,t=null){return this.element.selectionStart=e,this.element.selectionEnd=null===t?e:t,this}focus(){return this.element.focus(),this}focussed(){return this.element===this.element.ownerDocument.activeElement}empty(){for(;this.element.childNodes.length>0;)this.element.removeChild(this.element.lastChild);return this}attach(t){return e(t).appendChild(this.element),this}detach(){return this.element.parentNode&&this.element.parentNode.removeChild(this.element),this}}class a{constructor(e){if(!e)throw new Error("Missing document!");this.document=e,this.wrap=this.wrap.bind(this),this.el=this.el.bind(this),this.txt=this.txt.bind(this)}wrap(e){return e.element?e:new l(e)}el(e,t=null){let i=null;return i=null===t?this.document.createElement(e):this.document.createElementNS(t,e),new l(i)}txt(e=""){return this.document.createTextNode(e)}}a.WrappedElement=l,a.WrappedElement.prototype.fastClick=function(){const e={x:-1,y:0};return this.on("touchstart",t=>{const[i]=t.touches;e.x=i.pageX,e.y=i.pageY},{passive:!0}).on("touchend",t=>{if(-1===e.x||0!==t.touches.length||1!==t.changedTouches.length)return void(e.x=-1);const[i]=t.changedTouches;Math.abs(e.x-i.pageX)<10&&Math.abs(e.y-i.pageY)<10&&(t.preventDefault(),t.target.click()),e.x=-1})},a.WrappedElement.prototype.split=function(e,t){return this.add(e),function(e,t){const i=[],s={direction:t.direction,minSize:[],sizes:[],snapOffset:t.snapOffset};let n=0;for(let r=0;r<e.length;++r)e[r]&&(i.push(e[r]),s.minSize.push(t.minSize[r]),s.sizes.push(t.sizes[r]),n+=t.sizes[r]);for(let t=0;t<i.length;++t){s.minSize[t]*=100/n,s.sizes[t]*=100/n;const i=s.sizes[t]+"%";"vertical"===s.direction?e[t].styles({boxSizing:"border-box",height:i,width:"100%"}):e[t].styles({boxSizing:"border-box",display:"inline-block",height:"100%",verticalAlign:"top",width:i})}i.length<2||t.require(["split"],t=>{const n=e[0].element.parentNode,r=n.addEventListener,o=n.removeEventListener;n.addEventListener=((e,t)=>{"mousemove"===e||"touchmove"===e?window.addEventListener(e,t,{passive:!0}):r.call(n,e,t)}),n.removeEventListener=((e,t)=>{"mousemove"===e||"touchmove"===e?window.removeEventListener(e,t):o.call(n,e,t)});let l=null;const a="vertical"===s.direction?"row-resize":"col-resize";return new t(i.map(e=>e.element),Object.assign({cursor:a,direction:"vertical",gutterSize:0,onDragEnd:()=>{document.body.style.cursor=l,l=null},onDragStart:()=>{l=document.body.style.cursor,document.body.style.cursor=a}},s))})}(e,t),this};class d{constructor(){this.listeners=new Map,this.forwards=new Set}addEventListener(e,t){const i=this.listeners.get(e);i?i.push(t):this.listeners.set(e,[t])}removeEventListener(e,t){const i=this.listeners.get(e);if(!i)return;const s=i.indexOf(t);-1!==s&&i.splice(s,1)}on(e,t){return this.addEventListener(e,t),this}off(e,t){return this.removeEventListener(e,t),this}countEventListeners(e){return(this.listeners.get(e)||[]).length}removeAllEventListeners(e){e?this.listeners.delete(e):this.listeners.clear()}addEventForwarding(e){this.forwards.add(e)}removeEventForwarding(e){this.forwards.delete(e)}removeAllEventForwardings(){this.forwards.clear()}trigger(e,t=[]){(this.listeners.get(e)||[]).forEach(e=>e(...t)),this.forwards.forEach(i=>i.trigger(e,t))}}const h=/\{[^}]+\}/g;class c extends d{constructor(e,t,{mode:i="",require:s=null,value:n=""}){super(),this.mode=i,this.require=s||(()=>null),this.marker=null,this.isAutocompleting=!1,this.enhanced=!1,this.code=e.el("textarea").setClass("editor-simple").val(n).on("input",()=>this.trigger("change")).on("focus",()=>this.trigger("focus")).attach(t),this._enhance()}markLineHover(e=null){this.unmarkLineHover(),null!==e&&this.enhanced&&(this.marker=this.code.markText({ch:0,line:e},{ch:0,line:e+1},{className:"hover",clearOnEnter:!0,inclusiveLeft:!1,inclusiveRight:!1}))}unmarkLineHover(){this.marker&&(this.marker.clear(),this.marker=null)}selectLine(e=null){null!==e&&this.enhanced&&(this.code.setSelection({ch:0,line:e},{ch:0,line:e+1},{bias:-1,origin:"+focus"}),this.code.focus())}enterParams(e,t,i){const n=this.code.getDoc(),r=n.setBookmark(t),o=[],l=(e,t)=>{switch(t.keyCode){case 13:case 9:this.isAutocompleting||t.preventDefault(),this.advanceParams();break;case 27:this.isAutocompleting||(t.preventDefault(),this.cancelParams())}},a=()=>{if(0===this.paramMarkers.length)return;const e=this.paramMarkers[0].find(),[t]=n.listSelections();s(t.anchor,e)&&s(t.head,e)||(this.cancelParams(),this.code.setSelection(t.anchor,t.head))};this.paramMarkers=[],this.cancelParams=(()=>{this.code.off("keydown",l),this.code.off("cursorActivity",a),this.paramMarkers.forEach(e=>e.clear()),this.paramMarkers=null,r.clear(),this.code.setCursor(t),this.cancelParams=null,this.advanceParams=null}),this.advanceParams=(()=>{this.paramMarkers.forEach(e=>e.clear()),this.paramMarkers.length=0,this.nextParams(e,r,i,o)}),this.code.on("keydown",l),this.code.on("cursorActivity",a),this.advanceParams()}nextParams(e,t,i,s){const n=function(e,t){h.lastIndex=0;for(let i=null;i=h.exec(e);)if(!t.includes(i[0]))return i[0];return null}(i,s);if(!n)return void this.cancelParams();s.push(n);const r=this.code.getDoc(),o=[];let{ch:l}=e;for(let i=e.line;i<t.find().line;++i){const e=r.getLine(i).slice(l);for(let t=0;-1!==(t=e.indexOf(n,t));t+=n.length){const e={ch:t,line:i},s={ch:t+n.length,line:i};o.push({anchor:e,head:s}),this.paramMarkers.push(r.markText(e,s,{className:"param",clearWhenEmpty:!1,inclusiveLeft:!0,inclusiveRight:!0}))}l=0}o.length>0?r.setSelections(o,0):this.cancelParams()}addCodeBlock(e){const i=e.split("\n").length;if(this.code.focus(),this.enhanced){const s=this.code.getCursor("head"),n={ch:0,line:s.line+(s.ch>0?1:0)};let r=t(e);n.line>=this.code.lineCount()&&(r="\n"+r),this.code.replaceRange(r,n,null,"library");const o={ch:0,line:n.line+i};this.enterParams(n,o,e)}else{const i=this.value(),s=this.code.element.selectionStart,n=("\n"+i+"\n").indexOf("\n",s),r=t(i.substr(0,n))+t(e);this.code.val(r+i.substr(n)).select(r.length),this.trigger("change")}}value(){return this.enhanced?this.code.getDoc().getValue():this.code.element.value}setValue(e){if(this.enhanced){const t=this.code.getDoc();t.setValue(e),t.clearHistory()}else this.code.val(e)}_enhance(){this.require(["cm/lib/codemirror","cm/addon/hint/show-hint","cm/addon/edit/trailingspace","cm/addon/comment/comment"],e=>{const t={};this.trigger("enhance",[e,t]);const s=this.code,{selectionStart:n,selectionEnd:r,value:o}=s.element,l=s.focussed(),a=new e(s.element.parentNode,{extraKeys:{"Cmd-/":e=>e.toggleComment({padding:""}),"Cmd-Enter":"autocomplete","Ctrl-/":e=>e.toggleComment({padding:""}),"Ctrl-Enter":"autocomplete","Ctrl-Space":"autocomplete","Shift-Tab":e=>e.execCommand("indentLess"),Tab:e=>e.execCommand("indentMore")},globals:t,lineNumbers:!0,mode:this.mode,showTrailingSpace:!0,value:o});s.detach(),a.getDoc().setSelection(i(o,n),i(o,r));let d=0;a.on("keydown",(e,t)=>{d=t.keyCode}),a.on("change",(t,i)=>{if(this.trigger("change"),"+input"===i.origin){if(13===d)return void(d=0)}else if("complete"!==i.origin)return;e.commands.autocomplete(t,null,{completeSingle:!1})}),a.on("focus",()=>this.trigger("focus")),a.on("cursorActivity",()=>{const e=a.getCursor("from"),t=a.getCursor("to");this.trigger("cursorActivity",[e,t])}),a.on("hint-shown",()=>{this.isAutocompleting=!0}),a.on("endCompletion",()=>{this.isAutocompleting=!1}),l&&a.focus(),this.code=a,this.enhanced=!0})}}class u{constructor(e){this.id=e}set(e){if(this.id)try{window.localStorage.setItem(this.id,e)}catch(e){}}get(){if(!this.id)return"";try{return window.localStorage.getItem(this.id)||""}catch(e){return""}}}class m{constructor(e=""){this.base=e}setBase(e){this.base=e}_convertCode(e){return e.split("\n").map(encodeURIComponent).filter(e=>""!==e).join("/")}_convertWidthHeight(e,t){let i="";return r(e)&&(i+="w"+n(Math.max(e,0),4)),r(t)&&(i+="h"+n(Math.max(t,0),4)),i+"/"}_convertZoom(e){return 1===e?"":"z"+n(Math.max(e,0),4)+"/"}_convertSize({height:e,width:t,zoom:i}){return r(t)||r(e)?this._convertWidthHeight(t,e):r(i)?this._convertZoom(i):""}getURL(e,t={}){return this.base+this._convertSize(t)+this._convertCode(e)+".svg"}}const g=500,p=250,f=4;var w=window.SequenceDiagram;const b=window.requirejs,v={},y={},A=window.document.getElementsByTagName("meta");for(let e=0;e<A.length;++e){const t=A[e],i=t.getAttribute("name");if(i&&i.startsWith("cdn-")){const e=i.substr("cdn-".length);let s=t.getAttribute("content");s.endsWith(".mjs")?s=s.substr(0,s.length-".mjs".length):s.endsWith(".js")&&(s=s.substr(0,s.length-".js".length)),v[e]=s;const n=t.getAttribute("data-integrity");n&&(y[e]=n)}}b.config({hashes:y,onNodeCreated:(e,t,i)=>{t.hashes[i]&&(e.setAttribute("integrity",t.hashes[i]),e.setAttribute("crossorigin","anonymous"))},paths:v});window.addEventListener("load",()=>{const e=window.document.getElementById("loader"),[t]=e.getElementsByTagName("nav"),i=t.getElementsByTagName("a"),s=[];for(let e=0;e<i.length;++e){const t=i[e];s.push({href:t.getAttribute("href"),label:t.textContent,touchLabel:t.dataset.touch})}const n=new class{constructor({sequenceDiagram:e,defaultCode:t="",localStorage:i="",library:s=[],links:n=[],require:r=null,touchUI:o=!1}){this.diagram=e,this.defaultCode=t,this.localStorage=new u(i),this.library=s,this.links=n,this.minScale=1.5,this.require=r||(()=>null),this.touchUI=o,this.debounced=null,this.latestSeq=null,this.renderedSeq=null,this.pngDirty=!0,this.updatingPNG=!1,this.marker=null,this._downloadSVGClick=this._downloadSVGClick.bind(this),this._downloadPNGClick=this._downloadPNGClick.bind(this),this._downloadPNGFocus=this._downloadPNGFocus.bind(this),this._downloadURLClick=this._downloadURLClick.bind(this),this._hideDropStyle=this._hideDropStyle.bind(this),this.diagram.on("render",()=>{this.updateMinSize(this.diagram.getSize()),this.pngDirty=!0}).on("mouseover",e=>this.code.markLineHover(e.ln)).on("mouseout",()=>this.code.unmarkLineHover()).on("click",e=>{this.code.unmarkLineHover(),this.code.selectLine(e.ln),this._hideURLBuilder()}).on("dblclick",e=>{this.diagram.toggleCollapsed(e.ln),this._hideURLBuilder()})}buildURLBuilder(){const e=this.dom.el("div").setClass("copied").add("Copied to Clipboard");this.urlOutput=this.dom.el("input").setClass("output").attr("readonly","readonly").on("focus",()=>{this.urlOutput.select(0,this.urlOutput.element.value.length)});const t=this.dom.el("button").setClass("copy").attr("title","Copy to clipboard").fastClick().on("click",()=>{this.touchUI&&this.urlOutput.styles({display:"block"}),this.urlOutput.focus().select(0,this.urlOutput.element.value.length).element.ownerDocument.execCommand("copy"),t.focus(),this.container.delClass("keyinput"),this.touchUI&&this.urlOutput.styles({display:"none"}),e.styles({display:"block",opacity:1,transition:"none"}),setTimeout(()=>e.styles({opacity:0,transition:"opacity 0.5s linear"}),1e3),setTimeout(()=>e.styles({display:"none"}),1500)});this.urlWidth=this.dom.el("input").attrs({min:0,placeholder:"auto",step:"any",type:"number"}).on("input",()=>{this.urlZoom.val("1"),this._refreshURL()}),this.urlHeight=this.dom.el("input").attrs({min:0,placeholder:"auto",step:"any",type:"number"}).on("input",()=>{this.urlZoom.val("1"),this._refreshURL()}),this.urlZoom=this.dom.el("input").attrs({min:0,step:"any",type:"number",value:1}).on("input",()=>{this.urlWidth.val(""),this.urlHeight.val(""),this._refreshURL()});const i=this.dom.el("div").setClass("config").add(this.dom.el("label").add("width ",this.urlWidth),", ",this.dom.el("label").add("height ",this.urlHeight),this.dom.el("span").setClass("or").add("or"),this.dom.el("label").add("zoom ",this.urlZoom),this.urlOutput,t,e),s=this.dom.el("div").setClass("urlbuilder").styles({display:"none"}).add(this.dom.el("div").setClass("message").add("Loading…"));return this.renderService=new m,function(e){return"undefined"==typeof fetch?Promise.reject(new Error):fetch(e).then(e=>{if(!e.ok)throw new Error(e.statusText);return e})}("render/").then(e=>e.text()).then(e=>{let t=e.trim();t&&!t.startsWith("<")||(t="render/"),this.renderService.setBase(new URL(t,window.location.href).href),s.empty().add(i),this._refreshURL()}).catch(()=>{s.empty().add(this.dom.el("div").setClass("message").add("No online rendering service available."))}),s}_refreshURL(){this.urlOutput.val(this.renderService.getURL(this.code.value(),{height:Number.parseFloat(this.urlHeight.element.value),width:Number.parseFloat(this.urlWidth.element.value),zoom:Number.parseFloat(this.urlZoom.element.value||"1")}))}_showURLBuilder(){this.builderVisible||(this.builderVisible=!0,this.touchUI?this.urlBuilder.styles({bottom:"-210px",display:"block"}):this.urlBuilder.styles({display:"block",height:"0px",padding:"0px",width:this.optsHold.element.clientWidth+"px"}),clearTimeout(this.builderTm),this.builderTm=setTimeout(()=>{this.touchUI?this.urlBuilder.styles({bottom:0}):(this.urlBuilder.styles({height:"150px",padding:"10px",width:"400px"}),this.optsHold.styles({"box-shadow":"10px 10px 25px 12px rgba(0,0,0,0.3)"}))},0),this._refreshURL())}_hideURLBuilder(){this.builderVisible&&(this.builderVisible=!1,this.touchUI?this.urlBuilder.styles({bottom:-this.urlBuilder.element.clientHeight-60+"px"}):(this.urlBuilder.styles({height:"0px",padding:"0px",width:"0px"}),this.optsHold.styles({"box-shadow":"none"})),this.container.delClass("keyinput"),clearTimeout(this.builderTm),this.builderTm=setTimeout(()=>{this.urlBuilder.styles({display:"none"})},200))}buildOptionsDownloads(){return this.downloadPNG=this.dom.el("a").text("Export PNG").attrs({download:"SequenceDiagram.png",href:"#"}).on(["focus","mouseover","mousedown"],this._downloadPNGFocus).on("touchend",this._downloadPNGFocus).on("click",this._downloadPNGClick),this.downloadSVG=this.dom.el("a").text("SVG").attrs({download:"SequenceDiagram.svg",href:"#"}).fastClick().on("click",this._downloadSVGClick),this.downloadURL=this.dom.el("a").text("URL").attrs({href:"#"}).fastClick().on("click",this._downloadURLClick),this.urlBuilder=this.buildURLBuilder(),this.optsHold=this.dom.el("div").setClass("options downloads").add(this.downloadPNG,this.downloadSVG,this.downloadURL,this.urlBuilder),this.optsHold}buildLibrary(e){const t=this.library.map(t=>{const i=this.dom.el("div").attr("title",t.title||t.code),s=this.dom.el("div").setClass("library-item").add(i).fastClick().on("click",()=>this.code.addCodeBlock(t.code)).attach(e);return this.diagram.clone({code:function(e){return"headers fade\nterminators fade\n"+e.replace(/\{Agent([0-9]*)\}/g,(e,t)=>void 0===t?"A":String.fromCharCode("A".charCodeAt(0)+Number(t)-1)).replace(/[{}]/g,"")}(t.preview||t.code),container:i.element,render:!1}).on("error",(e,n)=>{window.console.warn("Failed to render preview",n),s.attr("class","library-item broken"),i.text(t.code)})});try{this.diagram.renderAll(t)}catch(e){}return e}buildCodePane(){const e=this.dom.el("div").setClass("pane-code");return this.code=new c(this.dom,e,{mode:"sequence",require:this.require,value:this.localStorage.get()||this.defaultCode}),this.code.on("enhance",(e,t)=>{this.diagram.registerCodeMirrorMode(e),t.themes=this.diagram.getThemeNames()}).on("change",()=>this.update(!1)).on("cursorActivity",(e,t)=>{this.diagram.setHighlight(Math.min(e.line,t.line))}).on("focus",()=>this._hideURLBuilder()),e}buildLibPane(){return 0===this.library.length?null:this.dom.el("div").setClass("pane-library").add(this.dom.el("div").setClass("pane-library-scroller").add(this.buildLibrary(this.dom.el("div").setClass("pane-library-inner"))))}buildViewPane(){return this.viewPaneInner=this.dom.el("div").setClass("pane-view-inner").add(this.diagram.dom()).on("touchstart",()=>this._hideURLBuilder(),{passive:!0}).on("mousedown",()=>this._hideURLBuilder()),this.errorMsg=this.dom.el("div").setClass("msg-error"),this.dom.el("div").setClass("pane-view").add(this.dom.el("div").setClass("pane-view-scroller").add(this.viewPaneInner),this.errorMsg)}build(e){this.dom=new a(e.ownerDocument),this.container=this.dom.wrap(e).on("dragover",e=>{e.preventDefault(),function(e,t){if(!e.dataTransfer.items&&0===e.dataTransfer.files.length)return[...e.dataTransfer.types].includes("Files");const i=e.dataTransfer.items||e.dataTransfer.files;return 1===i.length&&i[0].type===t}(e,"image/svg+xml")?(e.dataTransfer.dropEffect="copy",this._showDropStyle()):e.dataTransfer.dropEffect="none"}).on("dragleave",this._hideDropStyle).on("dragend",this._hideDropStyle).on("drop",e=>{e.preventDefault(),this._hideDropStyle();const t=function(e,t){const i=e.dataTransfer.items||e.dataTransfer.files;if(1!==i.length||i[0].type!==t)return null;const[s]=i;return s.getAsFile?s.getAsFile():s}(e,"image/svg+xml");t&&this.loadFile(t)}).on("focusin",()=>this.container.addClass("keyinput")).on("focusout",()=>this.container.delClass("keyinput"));const t=this.buildCodePane(),i=this.buildLibPane(),s=this.buildViewPane(),n=this.links.map(e=>this.dom.el("a").attrs({href:e.href,target:"_blank"}).text(this.touchUI?e.touchLabel:e.label));this.touchUI?(this.buildOptionsDownloads(),this.container.addClass("touch").add(this.dom.el("div").setClass("pane-hold").split([s,t],{direction:"vertical",minSize:[10,10],require:this.require,sizes:[80,20],snapOffset:20}),i.styles({display:"none",top:"100%"}),this.urlBuilder,this.dom.el("div").setClass("optbar").add(...n,this.downloadPNG.text("PNG"),this.downloadSVG.text("SVG"),this.downloadURL.text("URL")))):this.container.add(this.dom.el("div").setClass("pane-hold").split([this.dom.el("div").setClass("pane-side").split([t,i],{direction:"vertical",minSize:[100,5],require:this.require,sizes:[70,30],snapOffset:5}),s],{direction:"horizontal",minSize:[10,10],require:this.require,sizes:[30,70],snapOffset:70}),this.dom.el("div").setClass("options links").add(n),this.buildOptionsDownloads()),"undefined"!=typeof window&&window.addEventListener("keydown",e=>{27===e.keyCode&&this._hideURLBuilder()}),setTimeout(this.update.bind(this),0)}updateMinSize({width:e,height:t}){this.viewPaneInner.styles({minHeight:Math.ceil(t*this.minScale)+"px",minWidth:Math.ceil(e*this.minScale)+"px"})}redrawDebounced(e,t){t<=0?this.redraw(e):(clearTimeout(this.debounced),this.latestSeq=e,this.debounced=setTimeout(()=>this.redraw(e),t))}redraw(e){clearTimeout(this.debounced),this.debounced=null,this.renderedSeq=e,this.diagram.render(e)}markError(e){"object"==typeof e&&e.message?this.errorMsg.text(e.message):this.errorMsg.text(e),this.errorMsg.addClass("error")}markOK(){this.errorMsg.text("").delClass("error")}loadFile(e){return function(e){return new Promise(t=>{const i=new FileReader;i.addEventListener("loadend",()=>{t(i.result)},{once:!0}),i.readAsText(e)})}(e).then(e=>{const t=this.diagram.extractCodeFromSVG(e);t&&(this.code.setValue(t),this.diagram.expandAll({render:!1}),this.update(!0),this.diagram.setHighlight(null))})}update(e=!0){this._hideURLBuilder();const t=this.code.value();this.localStorage.set(t);let i=null;try{i=this.diagram.process(t)}catch(e){return void this.markError(e)}this.markOK();let s=0;if(!e&&this.renderedSeq){const e=this.renderedSeq;i.agents.length!==e.agents.length?s=g:i.stages.length!==e.stages.length&&(s=p)}this.redrawDebounced(i,s)}forceRender(){this.debounced&&(clearTimeout(this.debounced),this.redraw(this.latestSeq))}updatePNGLink(){return this.forceRender(),!(this.updatingPNG||!this.pngDirty||(this.pngDirty=!1,this.updatingPNG=!0,this.diagram.getPNG({resolution:f}).then(({url:e,latest:t})=>{t&&(this.downloadPNG.attr("href",e),this.updatingPNG=!1)}),0))}_showDropStyle(){this.container.addClass("drop-target")}_hideDropStyle(){this.container.delClass("drop-target")}_downloadPNGFocus(){this.updatePNGLink()}_downloadPNGClick(e){this.updatingPNG?e.preventDefault():this.updatePNGLink()&&e.preventDefault(),this._hideURLBuilder()}_downloadSVGClick(){this.forceRender();const e=this.diagram.getSVGSynchronous();this.downloadSVG.attr("href",e),this._hideURLBuilder()}_downloadURLClick(e){e.preventDefault(),this.builderVisible?this._hideURLBuilder():this._showURLBuilder()}}({defaultCode:'title Labyrinth\n\nBowie -> Goblin: You remind me of the babe\nGoblin -> Bowie: What babe?\nBowie -> Goblin: The babe with the power\nGoblin -> Bowie: What power?\nnote right of Bowie, Goblin: Most people get muddled here!\nBowie -> Goblin: "The power of voodoo"\nGoblin -> Bowie: "Who-do?"\nBowie -> Goblin: You do!\nGoblin -> Bowie: Do what?\nBowie -> Goblin: Remind me of the babe!\n\nBowie -> Audience: Sings\n\nterminators box\n',library:o,links:s,localStorage:"src",require:b,sequenceDiagram:new w,touchUI:"ontouchstart"in window});e.parentNode.removeChild(e),n.build(window.document.body)})}();
\ No newline at end of file
diff --git a/web/scripts/interface/CodeEditor.mjs b/web/scripts/interface/CodeEditor.mjs
new file mode 100644
index 0000000..6b9b764
--- /dev/null
+++ b/web/scripts/interface/CodeEditor.mjs
@@ -0,0 +1,336 @@
+import EventObject from '../../../scripts/core/EventObject.mjs';
+
+const PARAM_PATTERN = /\{[^}]+\}/g;
+
+function addNewline(value) {
+	if(value.length > 0 && value.charAt(value.length - 1) !== '\n') {
+		return value + '\n';
+	}
+	return value;
+}
+
+function findPos(content, index) {
+	let p = 0;
+	let line = 0;
+	for(;;) {
+		const nextLn = content.indexOf('\n', p) + 1;
+		if(index < nextLn || nextLn === 0) {
+			return {ch: index - p, line};
+		}
+		p = nextLn;
+		++ line;
+	}
+}
+
+function cmInRange(pos, {from, to}) {
+	return !(
+		pos.line < from.line || (pos.line === from.line && pos.ch < from.ch) ||
+		pos.line > to.line || (pos.line === to.line && pos.ch > to.ch)
+	);
+}
+
+function findNextToken(block, skip) {
+	PARAM_PATTERN.lastIndex = 0;
+	for(let m = null; (m = PARAM_PATTERN.exec(block));) {
+		if(!skip.includes(m[0])) {
+			return m[0];
+		}
+	}
+	return null;
+}
+
+export default class CodeEditor extends EventObject {
+	constructor(dom, container, {
+		mode = '',
+		require = null,
+		value = '',
+	}) {
+		super();
+
+		this.mode = mode;
+		this.require = require || (() => null);
+
+		this.marker = null;
+
+		this.isAutocompleting = false;
+		this.enhanced = false;
+
+		this.code = dom.el('textarea')
+			.setClass('editor-simple')
+			.val(value)
+			.on('input', () => this.trigger('change'))
+			.on('focus', () => this.trigger('focus'))
+			.attach(container);
+
+		this._enhance();
+	}
+
+	markLineHover(ln = null) {
+		this.unmarkLineHover();
+		if(ln !== null && this.enhanced) {
+			this.marker = this.code.markText(
+				{ch: 0, line: ln},
+				{ch: 0, line: ln + 1},
+				{
+					className: 'hover',
+					clearOnEnter: true,
+					inclusiveLeft: false,
+					inclusiveRight: false,
+				}
+			);
+		}
+	}
+
+	unmarkLineHover() {
+		if(this.marker) {
+			this.marker.clear();
+			this.marker = null;
+		}
+	}
+
+	selectLine(ln = null) {
+		if(ln === null) {
+			return;
+		}
+		if(this.enhanced) {
+			this.code.setSelection(
+				{ch: 0, line: ln},
+				{ch: 0, line: ln + 1},
+				{bias: -1, origin: '+focus'}
+			);
+			this.code.focus();
+		}
+	}
+
+	enterParams(start, end, block) {
+		const doc = this.code.getDoc();
+		const endBookmark = doc.setBookmark(end);
+		const done = [];
+
+		const keydown = (cm, event) => {
+			switch(event.keyCode) {
+			case 13:
+			case 9:
+				if(!this.isAutocompleting) {
+					event.preventDefault();
+				}
+				this.advanceParams();
+				break;
+			case 27:
+				if(!this.isAutocompleting) {
+					event.preventDefault();
+					this.cancelParams();
+				}
+				break;
+			}
+		};
+
+		const move = () => {
+			if(this.paramMarkers.length === 0) {
+				return;
+			}
+			const m = this.paramMarkers[0].find();
+			const [r] = doc.listSelections();
+			if(!cmInRange(r.anchor, m) || !cmInRange(r.head, m)) {
+				this.cancelParams();
+				this.code.setSelection(r.anchor, r.head);
+			}
+		};
+
+		this.paramMarkers = [];
+		this.cancelParams = () => {
+			this.code.off('keydown', keydown);
+			this.code.off('cursorActivity', move);
+			this.paramMarkers.forEach((m) => m.clear());
+			this.paramMarkers = null;
+			endBookmark.clear();
+			this.code.setCursor(end);
+			this.cancelParams = null;
+			this.advanceParams = null;
+		};
+		this.advanceParams = () => {
+			this.paramMarkers.forEach((m) => m.clear());
+			this.paramMarkers.length = 0;
+			this.nextParams(start, endBookmark, block, done);
+		};
+
+		this.code.on('keydown', keydown);
+		this.code.on('cursorActivity', move);
+
+		this.advanceParams();
+	}
+
+	nextParams(start, endBookmark, block, done) {
+		const tok = findNextToken(block, done);
+		if(!tok) {
+			this.cancelParams();
+			return;
+		}
+		done.push(tok);
+
+		const doc = this.code.getDoc();
+		const ranges = [];
+		let {ch} = start;
+		for(let ln = start.line; ln < endBookmark.find().line; ++ ln) {
+			const line = doc.getLine(ln).slice(ch);
+			for(let p = 0; (p = line.indexOf(tok, p)) !== -1; p += tok.length) {
+				const anchor = {ch: p, line: ln};
+				const head = {ch: p + tok.length, line: ln};
+				ranges.push({anchor, head});
+				this.paramMarkers.push(doc.markText(anchor, head, {
+					className: 'param',
+					clearWhenEmpty: false,
+					inclusiveLeft: true,
+					inclusiveRight: true,
+				}));
+			}
+			ch = 0;
+		}
+
+		if(ranges.length > 0) {
+			doc.setSelections(ranges, 0);
+		} else {
+			this.cancelParams();
+		}
+	}
+
+	addCodeBlock(block) {
+		const lines = block.split('\n').length;
+
+		this.code.focus();
+
+		if(this.enhanced) {
+			const cur = this.code.getCursor('head');
+			const pos = {ch: 0, line: cur.line + ((cur.ch > 0) ? 1 : 0)};
+			let replaced = addNewline(block);
+			if(pos.line >= this.code.lineCount()) {
+				replaced = '\n' + replaced;
+			}
+			this.code.replaceRange(replaced, pos, null, 'library');
+			const end = {ch: 0, line: pos.line + lines};
+			this.enterParams(pos, end, block);
+		} else {
+			const value = this.value();
+			const cur = this.code.element.selectionStart;
+			const pos = ('\n' + value + '\n').indexOf('\n', cur);
+			const replaced = (
+				addNewline(value.substr(0, pos)) +
+				addNewline(block)
+			);
+			this.code
+				.val(replaced + value.substr(pos))
+				.select(replaced.length);
+			this.trigger('change');
+		}
+	}
+
+	value() {
+		if(this.enhanced) {
+			return this.code.getDoc().getValue();
+		} else {
+			return this.code.element.value;
+		}
+	}
+
+	setValue(code) {
+		if(this.enhanced) {
+			const doc = this.code.getDoc();
+			doc.setValue(code);
+			doc.clearHistory();
+		} else {
+			this.code.val(code);
+		}
+	}
+
+	_enhance() {
+		// Load on demand for progressive enhancement
+		// (failure to load external module will not block functionality)
+		this.require([
+			'cm/lib/codemirror',
+			'cm/addon/hint/show-hint',
+			'cm/addon/edit/trailingspace',
+			'cm/addon/comment/comment',
+		], (CodeMirror) => {
+			const globals = {};
+			this.trigger('enhance', [CodeMirror, globals]);
+
+			const oldCode = this.code;
+
+			const {selectionStart, selectionEnd, value} = oldCode.element;
+			const focussed = oldCode.focussed();
+
+			const code = new CodeMirror(oldCode.element.parentNode, {
+				extraKeys: {
+					'Cmd-/': (cm) => cm.toggleComment({padding: ''}),
+					'Cmd-Enter': 'autocomplete',
+					'Ctrl-/': (cm) => cm.toggleComment({padding: ''}),
+					'Ctrl-Enter': 'autocomplete',
+					'Ctrl-Space': 'autocomplete',
+					'Shift-Tab': (cm) => cm.execCommand('indentLess'),
+					'Tab': (cm) => cm.execCommand('indentMore'),
+				},
+				globals,
+				lineNumbers: true,
+				mode: this.mode,
+				showTrailingSpace: true,
+				value,
+			});
+			oldCode.detach();
+
+			code.getDoc().setSelection(
+				findPos(value, selectionStart),
+				findPos(value, selectionEnd)
+			);
+
+			let lastKey = 0;
+			code.on('keydown', (cm, event) => {
+				lastKey = event.keyCode;
+			});
+
+			code.on('change', (cm, change) => {
+				this.trigger('change');
+
+				if(change.origin === '+input') {
+					if(lastKey === 13) {
+						lastKey = 0;
+						return;
+					}
+				} else if(change.origin !== 'complete') {
+					return;
+				}
+				CodeMirror.commands.autocomplete(cm, null, {
+					completeSingle: false,
+				});
+			});
+
+			code.on('focus', () => this.trigger('focus'));
+
+			code.on('cursorActivity', () => {
+				const from = code.getCursor('from');
+				const to = code.getCursor('to');
+				this.trigger('cursorActivity', [from, to]);
+			});
+
+			/*
+			 * See https://github.com/codemirror/CodeMirror/issues/3092
+			 * startCompletion will fire even if there are no completions, so
+			 * we cannot rely on it. Instead we hack the hints function to
+			 * propagate 'shown' as 'hint-shown', which we pick up here
+			 */
+			code.on('hint-shown', () => {
+				this.isAutocompleting = true;
+			});
+
+			code.on('endCompletion', () => {
+				this.isAutocompleting = false;
+			});
+
+			if(focussed) {
+				code.focus();
+			}
+
+			this.code = code;
+			this.enhanced = true;
+		});
+	}
+}
diff --git a/web/scripts/interface/Interface.mjs b/web/scripts/interface/Interface.mjs
index b24c365..e972ed8 100644
--- a/web/scripts/interface/Interface.mjs
+++ b/web/scripts/interface/Interface.mjs
@@ -1,50 +1,19 @@
-/* eslint-disable max-lines */
-
+import './fastClick.mjs';
+import './split.mjs';
+import {
+	getDroppedFile,
+	getFileContent,
+	hasDroppedFile,
+} from './fileHelpers.mjs';
+import CodeEditor from './CodeEditor.mjs';
 import DOMWrapper from '../../../scripts/core/DOMWrapper.mjs';
+import LocalStorage from './LocalStorage.mjs';
+import URLExporter from './URLExporter.mjs';
 
 const DELAY_AGENTCHANGE = 500;
 const DELAY_STAGECHANGE = 250;
 const PNG_RESOLUTION = 4;
 
-const PARAM_PATTERN = /\{[^}]+\}/g;
-
-function addNewline(value) {
-	if(value.length > 0 && value.charAt(value.length - 1) !== '\n') {
-		return value + '\n';
-	}
-	return value;
-}
-
-function findPos(content, index) {
-	let p = 0;
-	let line = 0;
-	for(;;) {
-		const nextLn = content.indexOf('\n', p) + 1;
-		if(index < nextLn || nextLn === 0) {
-			return {ch: index - p, line};
-		}
-		p = nextLn;
-		++ line;
-	}
-}
-
-function cmInRange(pos, {from, to}) {
-	return !(
-		pos.line < from.line || (pos.line === from.line && pos.ch < from.ch) ||
-		pos.line > to.line || (pos.line === to.line && pos.ch > to.ch)
-	);
-}
-
-function findNextToken(block, skip) {
-	PARAM_PATTERN.lastIndex = 0;
-	for(let m = null; (m = PARAM_PATTERN.exec(block));) {
-		if(!skip.includes(m[0])) {
-			return m[0];
-		}
-	}
-	return null;
-}
-
 function simplifyPreview(code) {
 	return 'headers fade\nterminators fade\n' + code
 		.replace(/\{Agent([0-9]*)\}/g, (match, num) => {
@@ -57,15 +26,6 @@ function simplifyPreview(code) {
 		.replace(/[{}]/g, '');
 }
 
-function toCappedFixed(v, cap) {
-	const s = v.toString();
-	const p = s.indexOf('.');
-	if(p === -1 || s.length - p - 1 <= cap) {
-		return s;
-	}
-	return v.toFixed(cap);
-}
-
 function fetchResource(path) {
 	if(typeof fetch === 'undefined') {
 		return Promise.reject(new Error());
@@ -79,191 +39,6 @@ function fetchResource(path) {
 		});
 }
 
-/* eslint-disable complexity */
-function makeURL(code, {height, width, zoom}) {
-	/* eslint-enable complexity */
-	const uri = code
-		.split('\n')
-		.map(encodeURIComponent)
-		.filter((ln) => ln !== '')
-		.join('/');
-
-	let opts = '';
-	if(!Number.isNaN(width) || !Number.isNaN(height)) {
-		if(!Number.isNaN(width)) {
-			opts += 'w' + toCappedFixed(Math.max(width, 0), 4);
-		}
-		if(!Number.isNaN(height)) {
-			opts += 'h' + toCappedFixed(Math.max(height, 0), 4);
-		}
-		opts += '/';
-	} else if(!Number.isNaN(zoom) && zoom !== 1) {
-		opts += 'z' + toCappedFixed(Math.max(zoom, 0), 4);
-		opts += '/';
-	}
-
-	return opts + uri + '.svg';
-}
-
-function makeSplit(nodes, options) {
-	const filteredNodes = [];
-	const filteredOpts = {
-		direction: options.direction,
-		minSize: [],
-		sizes: [],
-		snapOffset: options.snapOffset,
-	};
-
-	let total = 0;
-	for(let i = 0; i < nodes.length; ++ i) {
-		if(nodes[i]) {
-			filteredNodes.push(nodes[i]);
-			filteredOpts.minSize.push(options.minSize[i]);
-			filteredOpts.sizes.push(options.sizes[i]);
-			total += options.sizes[i];
-		}
-	}
-	for(let i = 0; i < filteredNodes.length; ++ i) {
-		filteredOpts.minSize[i] *= 100 / total;
-		filteredOpts.sizes[i] *= 100 / total;
-
-		const percent = filteredOpts.sizes[i] + '%';
-		if(filteredOpts.direction === 'vertical') {
-			nodes[i].styles({
-				boxSizing: 'border-box',
-				height: percent,
-				width: '100%',
-			});
-		} else {
-			nodes[i].styles({
-				boxSizing: 'border-box',
-				display: 'inline-block',
-				height: '100%',
-				verticalAlign: 'top', // Safari fix
-				width: percent,
-			});
-		}
-	}
-
-	if(filteredNodes.length < 2) {
-		return;
-	}
-
-	// Load on demand for progressive enhancement
-	// (failure to load external module will not block functionality)
-	options.require(['split'], (Split) => {
-		// Patches for:
-		// https://github.com/nathancahill/Split.js/issues/97
-		// https://github.com/nathancahill/Split.js/issues/111
-		const parent = nodes[0].element.parentNode;
-		const oldAEL = parent.addEventListener;
-		const oldREL = parent.removeEventListener;
-		parent.addEventListener = (event, callback) => {
-			if(event === 'mousemove' || event === 'touchmove') {
-				window.addEventListener(event, callback, {passive: true});
-			} else {
-				oldAEL.call(parent, event, callback);
-			}
-		};
-		parent.removeEventListener = (event, callback) => {
-			if(event === 'mousemove' || event === 'touchmove') {
-				window.removeEventListener(event, callback);
-			} else {
-				oldREL.call(parent, event, callback);
-			}
-		};
-
-		let oldCursor = null;
-		const cursor = (filteredOpts.direction === 'vertical') ?
-			'row-resize' : 'col-resize';
-
-		return new Split(
-			filteredNodes.map((node) => node.element),
-			Object.assign({
-				cursor,
-				direction: 'vertical',
-				gutterSize: 0,
-				onDragEnd: () => {
-					document.body.style.cursor = oldCursor;
-					oldCursor = null;
-				},
-				onDragStart: () => {
-					oldCursor = document.body.style.cursor;
-					document.body.style.cursor = cursor;
-				},
-			}, filteredOpts)
-		);
-	});
-}
-
-DOMWrapper.WrappedElement.prototype.split = function(nodes, options) {
-	this.add(nodes);
-	makeSplit(nodes, options);
-	return this;
-};
-
-function hasDroppedFile(event, mime) {
-	if(!event.dataTransfer.items && event.dataTransfer.files.length === 0) {
-		// Work around Safari not supporting dataTransfer.items
-		return [...event.dataTransfer.types].includes('Files');
-	}
-
-	const items = (event.dataTransfer.items || event.dataTransfer.files);
-	return (items.length === 1 && items[0].type === mime);
-}
-
-function getDroppedFile(event, mime) {
-	const items = (event.dataTransfer.items || event.dataTransfer.files);
-	if(items.length !== 1 || items[0].type !== mime) {
-		return null;
-	}
-	const [item] = items;
-	if(item.getAsFile) {
-		return item.getAsFile();
-	} else {
-		return item;
-	}
-}
-
-function getFileContent(file) {
-	return new Promise((resolve) => {
-		const reader = new FileReader();
-		reader.addEventListener('loadend', () => {
-			resolve(reader.result);
-		}, {once: true});
-		reader.readAsText(file);
-	});
-}
-
-DOMWrapper.WrappedElement.prototype.fastClick = function() {
-	const pt = {x: -1, y: 0};
-	return this
-		.on('touchstart', (e) => {
-			const [touch] = e.touches;
-			pt.x = touch.pageX;
-			pt.y = touch.pageY;
-		}, {passive: true})
-		.on('touchend', (e) => {
-			if(
-				pt.x === -1 ||
-				e.touches.length !== 0 ||
-				e.changedTouches.length !== 1
-			) {
-				pt.x = -1;
-				return;
-			}
-			const [touch] = e.changedTouches;
-			if(
-				Math.abs(pt.x - touch.pageX) < 10 &&
-				Math.abs(pt.y - touch.pageY) < 10
-			) {
-				e.preventDefault();
-				e.target.click();
-			}
-			pt.x = -1;
-		});
-};
-
 export default class Interface {
 	constructor({
 		sequenceDiagram,
@@ -276,7 +51,7 @@ export default class Interface {
 	}) {
 		this.diagram = sequenceDiagram;
 		this.defaultCode = defaultCode;
-		this.localStorage = localStorage;
+		this.localStorage = new LocalStorage(localStorage);
 		this.library = library;
 		this.links = links;
 		this.minScale = 1.5;
@@ -302,45 +77,11 @@ export default class Interface {
 				this.updateMinSize(this.diagram.getSize());
 				this.pngDirty = true;
 			})
-			.on('mouseover', (element) => {
-				if(this.marker) {
-					this.marker.clear();
-				}
-				if(typeof element.ln !== 'undefined' && this.code.markText) {
-					this.marker = this.code.markText(
-						{ch: 0, line: element.ln},
-						{ch: 0, line: element.ln + 1},
-						{
-							className: 'hover',
-							clearOnEnter: true,
-							inclusiveLeft: false,
-							inclusiveRight: false,
-						}
-					);
-				}
-			})
-			.on('mouseout', () => {
-				if(this.marker) {
-					this.marker.clear();
-					this.marker = null;
-				}
-			})
+			.on('mouseover', (element) => this.code.markLineHover(element.ln))
+			.on('mouseout', () => this.code.unmarkLineHover())
 			.on('click', (element) => {
-				if(this.marker) {
-					this.marker.clear();
-					this.marker = null;
-				}
-				if(
-					typeof element.ln !== 'undefined' &&
-					this.code.setSelection
-				) {
-					this.code.setSelection(
-						{ch: 0, line: element.ln},
-						{ch: 0, line: element.ln + 1},
-						{bias: -1, origin: '+focus'}
-					);
-					this.code.focus();
-				}
+				this.code.unmarkLineHover();
+				this.code.selectLine(element.ln);
 				this._hideURLBuilder();
 			})
 			.on('dblclick', (element) => {
@@ -435,7 +176,7 @@ export default class Interface {
 					.add('Loading\u2026')
 			);
 
-		this.renderService = '';
+		this.renderService = new URLExporter();
 		const relativePath = 'render/';
 		fetchResource(relativePath)
 			.then((response) => response.text())
@@ -444,7 +185,9 @@ export default class Interface {
 				if(!path || path.startsWith('<')) {
 					path = relativePath;
 				}
-				this.renderService = new URL(path, window.location.href).href;
+				this.renderService.setBase(
+					new URL(path, window.location.href).href
+				);
 				urlBuilder.empty().add(urlOpts);
 				this._refreshURL();
 			})
@@ -459,7 +202,7 @@ export default class Interface {
 	}
 
 	_refreshURL() {
-		this.urlOutput.val(this.renderService + makeURL(this.value(), {
+		this.urlOutput.val(this.renderService.getURL(this.code.value(), {
 			height: Number.parseFloat(this.urlHeight.element.value),
 			width: Number.parseFloat(this.urlWidth.element.value),
 			zoom: Number.parseFloat(this.urlZoom.element.value || '1'),
@@ -577,7 +320,7 @@ export default class Interface {
 				.setClass('library-item')
 				.add(holdInner)
 				.fastClick()
-				.on('click', this.addCodeBlock.bind(this, lib.code))
+				.on('click', () => this.code.addCodeBlock(lib.code))
 				.attach(container);
 
 			return this.diagram.clone({
@@ -601,15 +344,26 @@ export default class Interface {
 	}
 
 	buildCodePane() {
-		this.isAutocompleting = false;
+		const container = this.dom.el('div').setClass('pane-code');
 
-		this.code = this.dom.el('textarea')
-			.setClass('editor-simple')
-			.val(this.loadCode() || this.defaultCode)
-			.on('input', () => this.update(false));
+		this.code = new CodeEditor(this.dom, container, {
+			mode: 'sequence',
+			require: this.require,
+			value: this.localStorage.get() || this.defaultCode,
+		});
 
-		return this.dom.el('div').setClass('pane-code')
-			.add(this.code);
+		this.code
+			.on('enhance', (CM, globals) => {
+				this.diagram.registerCodeMirrorMode(CM);
+				globals.themes = this.diagram.getThemeNames();
+			})
+			.on('change', () => this.update(false))
+			.on('cursorActivity', (from, to) => {
+				this.diagram.setHighlight(Math.min(from.line, to.line));
+			})
+			.on('focus', () => this._hideURLBuilder());
+
+		return container;
 	}
 
 	buildLibPane() {
@@ -734,130 +488,6 @@ export default class Interface {
 		// Delay first update 1 frame to ensure render target is ready
 		// (prevents initial incorrect font calculations for custom fonts)
 		setTimeout(this.update.bind(this), 0);
-
-		this._enhanceEditor();
-	}
-
-	enterParams(start, end, block) {
-		const doc = this.code.getDoc();
-		const endBookmark = doc.setBookmark(end);
-		const done = [];
-
-		const keydown = (cm, event) => {
-			switch(event.keyCode) {
-			case 13:
-			case 9:
-				if(!this.isAutocompleting) {
-					event.preventDefault();
-				}
-				this.advanceParams();
-				break;
-			case 27:
-				if(!this.isAutocompleting) {
-					event.preventDefault();
-					this.cancelParams();
-				}
-				break;
-			}
-		};
-
-		const move = () => {
-			if(this.paramMarkers.length === 0) {
-				return;
-			}
-			const m = this.paramMarkers[0].find();
-			const [r] = doc.listSelections();
-			if(!cmInRange(r.anchor, m) || !cmInRange(r.head, m)) {
-				this.cancelParams();
-				this.code.setSelection(r.anchor, r.head);
-			}
-		};
-
-		this.paramMarkers = [];
-		this.cancelParams = () => {
-			this.code.off('keydown', keydown);
-			this.code.off('cursorActivity', move);
-			this.paramMarkers.forEach((m) => m.clear());
-			this.paramMarkers = null;
-			endBookmark.clear();
-			this.code.setCursor(end);
-			this.cancelParams = null;
-			this.advanceParams = null;
-		};
-		this.advanceParams = () => {
-			this.paramMarkers.forEach((m) => m.clear());
-			this.paramMarkers.length = 0;
-			this.nextParams(start, endBookmark, block, done);
-		};
-
-		this.code.on('keydown', keydown);
-		this.code.on('cursorActivity', move);
-
-		this.advanceParams();
-	}
-
-	nextParams(start, endBookmark, block, done) {
-		const tok = findNextToken(block, done);
-		if(!tok) {
-			this.cancelParams();
-			return;
-		}
-		done.push(tok);
-
-		const doc = this.code.getDoc();
-		const ranges = [];
-		let {ch} = start;
-		for(let ln = start.line; ln < endBookmark.find().line; ++ ln) {
-			const line = doc.getLine(ln).slice(ch);
-			for(let p = 0; (p = line.indexOf(tok, p)) !== -1; p += tok.length) {
-				const anchor = {ch: p, line: ln};
-				const head = {ch: p + tok.length, line: ln};
-				ranges.push({anchor, head});
-				this.paramMarkers.push(doc.markText(anchor, head, {
-					className: 'param',
-					clearWhenEmpty: false,
-					inclusiveLeft: true,
-					inclusiveRight: true,
-				}));
-			}
-			ch = 0;
-		}
-
-		if(ranges.length > 0) {
-			doc.setSelections(ranges, 0);
-		} else {
-			this.cancelParams();
-		}
-	}
-
-	addCodeBlock(block) {
-		const lines = block.split('\n').length;
-
-		if(this.code.getCursor) {
-			const cur = this.code.getCursor('head');
-			const pos = {ch: 0, line: cur.line + ((cur.ch > 0) ? 1 : 0)};
-			let replaced = addNewline(block);
-			if(pos.line >= this.code.lineCount()) {
-				replaced = '\n' + replaced;
-			}
-			this.code.replaceRange(replaced, pos, null, 'library');
-			const end = {ch: 0, line: pos.line + lines};
-			this.enterParams(pos, end, block);
-		} else {
-			const value = this.value();
-			const cur = this.code.element.selectionStart;
-			const pos = ('\n' + value + '\n').indexOf('\n', cur);
-			const replaced = (
-				addNewline(value.substr(0, pos)) +
-				addNewline(block)
-			);
-			this.code
-				.val(replaced + value.substr(pos))
-				.select(replaced.length);
-			this.update(false);
-		}
-
-		this.code.focus();
 	}
 
 	updateMinSize({width, height}) {
@@ -884,28 +514,6 @@ export default class Interface {
 		this.diagram.render(sequence);
 	}
 
-	saveCode(src) {
-		if(!this.localStorage) {
-			return;
-		}
-		try {
-			window.localStorage.setItem(this.localStorage, src);
-		} catch(ignore) {
-			// Ignore
-		}
-	}
-
-	loadCode() {
-		if(!this.localStorage) {
-			return '';
-		}
-		try {
-			return window.localStorage.getItem(this.localStorage) || '';
-		} catch(e) {
-			return '';
-		}
-	}
-
 	markError(error) {
 		if(typeof error === 'object' && error.message) {
 			this.errorMsg.text(error.message);
@@ -919,40 +527,22 @@ export default class Interface {
 		this.errorMsg.text('').delClass('error');
 	}
 
-	value() {
-		if(this.code.getDoc) {
-			return this.code.getDoc().getValue();
-		} else {
-			return this.code.element.value;
-		}
-	}
-
-	setValue(code) {
-		if(this.code.getDoc) {
-			const doc = this.code.getDoc();
-			doc.setValue(code);
-			doc.clearHistory();
-		} else {
-			this.code.val(code);
-		}
-		this.diagram.expandAll({render: false});
-		this.update(true);
-		this.diagram.setHighlight(null);
-	}
-
 	loadFile(file) {
 		return getFileContent(file).then((svg) => {
 			const code = this.diagram.extractCodeFromSVG(svg);
 			if(code) {
-				this.setValue(code);
+				this.code.setValue(code);
+				this.diagram.expandAll({render: false});
+				this.update(true);
+				this.diagram.setHighlight(null);
 			}
 		});
 	}
 
 	update(immediate = true) {
 		this._hideURLBuilder();
-		const src = this.value();
-		this.saveCode(src);
+		const src = this.code.value();
+		this.localStorage.set(src);
 		let sequence = null;
 		try {
 			sequence = this.diagram.process(src);
@@ -1036,95 +626,4 @@ export default class Interface {
 			this._showURLBuilder();
 		}
 	}
-
-	_enhanceEditor() {
-		// Load on demand for progressive enhancement
-		// (failure to load external module will not block functionality)
-		this.require([
-			'cm/lib/codemirror',
-			'cm/addon/hint/show-hint',
-			'cm/addon/edit/trailingspace',
-			'cm/addon/comment/comment',
-		], (CodeMirror) => {
-			this.diagram.registerCodeMirrorMode(CodeMirror);
-
-			const selBegin = this.code.element.selectionStart;
-			const selEnd = this.code.element.selectionEnd;
-			const val = this.code.element.value;
-			const focussed = this.code.focussed();
-
-			const code = new CodeMirror(this.code.element.parentNode, {
-				extraKeys: {
-					'Cmd-/': (cm) => cm.toggleComment({padding: ''}),
-					'Cmd-Enter': 'autocomplete',
-					'Ctrl-/': (cm) => cm.toggleComment({padding: ''}),
-					'Ctrl-Enter': 'autocomplete',
-					'Ctrl-Space': 'autocomplete',
-					'Shift-Tab': (cm) => cm.execCommand('indentLess'),
-					'Tab': (cm) => cm.execCommand('indentMore'),
-				},
-				globals: {
-					themes: this.diagram.getThemeNames(),
-				},
-				lineNumbers: true,
-				mode: 'sequence',
-				showTrailingSpace: true,
-				value: val,
-			});
-			this.code.detach();
-			code.getDoc().setSelection(
-				findPos(val, selBegin),
-				findPos(val, selEnd)
-			);
-
-			let lastKey = 0;
-			code.on('keydown', (cm, event) => {
-				lastKey = event.keyCode;
-			});
-
-			code.on('change', (cm, change) => {
-				this.update(false);
-
-				if(change.origin === '+input') {
-					if(lastKey === 13) {
-						lastKey = 0;
-						return;
-					}
-				} else if(change.origin !== 'complete') {
-					return;
-				}
-				CodeMirror.commands.autocomplete(cm, null, {
-					completeSingle: false,
-				});
-			});
-
-			code.on('focus', () => this._hideURLBuilder());
-
-			code.on('cursorActivity', () => {
-				const from = code.getCursor('from').line;
-				const to = code.getCursor('to').line;
-				this.diagram.setHighlight(Math.min(from, to));
-			});
-
-			/*
-			 * See https://github.com/codemirror/CodeMirror/issues/3092
-			 * startCompletion will fire even if there are no completions, so
-			 * we cannot rely on it. Instead we hack the hints function to
-			 * propagate 'shown' as 'hint-shown', which we pick up here
-			 */
-			code.on('hint-shown', () => {
-				this.isAutocompleting = true;
-			});
-
-			code.on('endCompletion', () => {
-				this.isAutocompleting = false;
-			});
-
-			if(focussed) {
-				code.focus();
-			}
-
-			this.code = code;
-		});
-	}
 }
diff --git a/web/scripts/interface/Interface_spec.mjs b/web/scripts/interface/Interface_spec.mjs
index 7fdc99a..9b0842f 100644
--- a/web/scripts/interface/Interface_spec.mjs
+++ b/web/scripts/interface/Interface_spec.mjs
@@ -48,7 +48,7 @@ describe('Interface', () => {
 		it('creates a code mirror instance with the given code', (done) => {
 			ui.build(container);
 			const check = setInterval(() => {
-				const constructorArgs = ui.code.constructor;
+				const constructorArgs = ui.code.code.constructor;
 				if(!constructorArgs.options) {
 					return;
 				}
diff --git a/web/scripts/interface/LocalStorage.mjs b/web/scripts/interface/LocalStorage.mjs
new file mode 100644
index 0000000..e9ae11b
--- /dev/null
+++ b/web/scripts/interface/LocalStorage.mjs
@@ -0,0 +1,27 @@
+export default class LocalStorage {
+	constructor(id) {
+		this.id = id;
+	}
+
+	set(value) {
+		if(!this.id) {
+			return;
+		}
+		try {
+			window.localStorage.setItem(this.id, value);
+		} catch(ignore) {
+			// Ignore
+		}
+	}
+
+	get() {
+		if(!this.id) {
+			return '';
+		}
+		try {
+			return window.localStorage.getItem(this.id) || '';
+		} catch(e) {
+			return '';
+		}
+	}
+}
diff --git a/web/scripts/interface/URLExporter.mjs b/web/scripts/interface/URLExporter.mjs
new file mode 100644
index 0000000..169e1c5
--- /dev/null
+++ b/web/scripts/interface/URLExporter.mjs
@@ -0,0 +1,67 @@
+function toCappedFixed(v, cap) {
+	const s = v.toString();
+	const p = s.indexOf('.');
+	if(p === -1 || s.length - p - 1 <= cap) {
+		return s;
+	}
+	return v.toFixed(cap);
+}
+
+function valid(v = null) {
+	return v !== null && !Number.isNaN(v);
+}
+
+export default class URLExporter {
+	constructor(base = '') {
+		this.base = base;
+	}
+
+	setBase(base) {
+		this.base = base;
+	}
+
+	_convertCode(code) {
+		return code
+			.split('\n')
+			.map(encodeURIComponent)
+			.filter((ln) => ln !== '')
+			.join('/');
+	}
+
+	_convertWidthHeight(width, height) {
+		let opts = '';
+		if(valid(width)) {
+			opts += 'w' + toCappedFixed(Math.max(width, 0), 4);
+		}
+		if(valid(height)) {
+			opts += 'h' + toCappedFixed(Math.max(height, 0), 4);
+		}
+		return opts + '/';
+	}
+
+	_convertZoom(zoom) {
+		if(zoom === 1) {
+			return '';
+		}
+		return 'z' + toCappedFixed(Math.max(zoom, 0), 4) + '/';
+	}
+
+	_convertSize({height, width, zoom}) {
+		if(valid(width) || valid(height)) {
+			return this._convertWidthHeight(width, height);
+		}
+		if(valid(zoom)) {
+			return this._convertZoom(zoom);
+		}
+		return '';
+	}
+
+	getURL(code, size = {}) {
+		return (
+			this.base +
+			this._convertSize(size) +
+			this._convertCode(code) +
+			'.svg'
+		);
+	}
+}
diff --git a/web/scripts/interface/URLExporter_spec.mjs b/web/scripts/interface/URLExporter_spec.mjs
new file mode 100644
index 0000000..e4f926e
--- /dev/null
+++ b/web/scripts/interface/URLExporter_spec.mjs
@@ -0,0 +1,73 @@
+import URLExporter from './URLExporter.mjs';
+
+describe('URLExporter', () => {
+	it('converts code into a URL-safe format', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('A\nB');
+
+		expect(url).toEqual('A/B.svg');
+	});
+
+	it('escapes special characters', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('a/b%c"d');
+
+		expect(url).toEqual('a%2Fb%25c%22d.svg');
+	});
+
+	it('adds a base url if specified', () => {
+		const exporter = new URLExporter('abc/');
+		const url = exporter.getURL('d');
+
+		expect(url).toEqual('abc/d.svg');
+	});
+
+	it('adds width/height information if specified', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('a', {height: 20, width: 10});
+
+		expect(url).toEqual('w10h20/a.svg');
+	});
+
+	it('adds zoom information if specified', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('a', {zoom: 2});
+
+		expect(url).toEqual('z2/a.svg');
+	});
+
+	it('ignores zoom of 1', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('a', {zoom: 1});
+
+		expect(url).toEqual('a.svg');
+	});
+
+	it('ignores values of not-a-number', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('a', {zoom: Number.NaN});
+
+		expect(url).toEqual('a.svg');
+	});
+
+	it('adds just width if specified', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('a', {width: 10});
+
+		expect(url).toEqual('w10/a.svg');
+	});
+
+	it('adds just height if specified', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('a', {height: 10});
+
+		expect(url).toEqual('h10/a.svg');
+	});
+
+	it('prefers width/height over zoom', () => {
+		const exporter = new URLExporter();
+		const url = exporter.getURL('a', {height: 20, width: 10, zoom: 2});
+
+		expect(url).toEqual('w10h20/a.svg');
+	});
+});
diff --git a/web/scripts/interface/fastClick.mjs b/web/scripts/interface/fastClick.mjs
new file mode 100644
index 0000000..ac905f7
--- /dev/null
+++ b/web/scripts/interface/fastClick.mjs
@@ -0,0 +1,30 @@
+import DOMWrapper from '../../../scripts/core/DOMWrapper.mjs';
+
+DOMWrapper.WrappedElement.prototype.fastClick = function() {
+	const pt = {x: -1, y: 0};
+	return this
+		.on('touchstart', (e) => {
+			const [touch] = e.touches;
+			pt.x = touch.pageX;
+			pt.y = touch.pageY;
+		}, {passive: true})
+		.on('touchend', (e) => {
+			if(
+				pt.x === -1 ||
+				e.touches.length !== 0 ||
+				e.changedTouches.length !== 1
+			) {
+				pt.x = -1;
+				return;
+			}
+			const [touch] = e.changedTouches;
+			if(
+				Math.abs(pt.x - touch.pageX) < 10 &&
+				Math.abs(pt.y - touch.pageY) < 10
+			) {
+				e.preventDefault();
+				e.target.click();
+			}
+			pt.x = -1;
+		});
+};
diff --git a/web/scripts/interface/fileHelpers.mjs b/web/scripts/interface/fileHelpers.mjs
new file mode 100644
index 0000000..372b9ff
--- /dev/null
+++ b/web/scripts/interface/fileHelpers.mjs
@@ -0,0 +1,32 @@
+export function hasDroppedFile(event, mime) {
+	if(!event.dataTransfer.items && event.dataTransfer.files.length === 0) {
+		// Work around Safari not supporting dataTransfer.items
+		return [...event.dataTransfer.types].includes('Files');
+	}
+
+	const items = (event.dataTransfer.items || event.dataTransfer.files);
+	return (items.length === 1 && items[0].type === mime);
+}
+
+export function getDroppedFile(event, mime) {
+	const items = (event.dataTransfer.items || event.dataTransfer.files);
+	if(items.length !== 1 || items[0].type !== mime) {
+		return null;
+	}
+	const [item] = items;
+	if(item.getAsFile) {
+		return item.getAsFile();
+	} else {
+		return item;
+	}
+}
+
+export function getFileContent(file) {
+	return new Promise((resolve) => {
+		const reader = new FileReader();
+		reader.addEventListener('loadend', () => {
+			resolve(reader.result);
+		}, {once: true});
+		reader.readAsText(file);
+	});
+}
diff --git a/web/scripts/interface/split.mjs b/web/scripts/interface/split.mjs
new file mode 100644
index 0000000..28b5139
--- /dev/null
+++ b/web/scripts/interface/split.mjs
@@ -0,0 +1,98 @@
+import DOMWrapper from '../../../scripts/core/DOMWrapper.mjs';
+
+export default function split(nodes, options) {
+	const filteredNodes = [];
+	const filteredOpts = {
+		direction: options.direction,
+		minSize: [],
+		sizes: [],
+		snapOffset: options.snapOffset,
+	};
+
+	let total = 0;
+	for(let i = 0; i < nodes.length; ++ i) {
+		if(nodes[i]) {
+			filteredNodes.push(nodes[i]);
+			filteredOpts.minSize.push(options.minSize[i]);
+			filteredOpts.sizes.push(options.sizes[i]);
+			total += options.sizes[i];
+		}
+	}
+	for(let i = 0; i < filteredNodes.length; ++ i) {
+		filteredOpts.minSize[i] *= 100 / total;
+		filteredOpts.sizes[i] *= 100 / total;
+
+		const percent = filteredOpts.sizes[i] + '%';
+		if(filteredOpts.direction === 'vertical') {
+			nodes[i].styles({
+				boxSizing: 'border-box',
+				height: percent,
+				width: '100%',
+			});
+		} else {
+			nodes[i].styles({
+				boxSizing: 'border-box',
+				display: 'inline-block',
+				height: '100%',
+				verticalAlign: 'top', // Safari fix
+				width: percent,
+			});
+		}
+	}
+
+	if(filteredNodes.length < 2) {
+		return;
+	}
+
+	// Load on demand for progressive enhancement
+	// (failure to load external module will not block functionality)
+	options.require(['split'], (Split) => {
+		// Patches for:
+		// https://github.com/nathancahill/Split.js/issues/97
+		// https://github.com/nathancahill/Split.js/issues/111
+		const parent = nodes[0].element.parentNode;
+		const oldAEL = parent.addEventListener;
+		const oldREL = parent.removeEventListener;
+		parent.addEventListener = (event, callback) => {
+			if(event === 'mousemove' || event === 'touchmove') {
+				window.addEventListener(event, callback, {passive: true});
+			} else {
+				oldAEL.call(parent, event, callback);
+			}
+		};
+		parent.removeEventListener = (event, callback) => {
+			if(event === 'mousemove' || event === 'touchmove') {
+				window.removeEventListener(event, callback);
+			} else {
+				oldREL.call(parent, event, callback);
+			}
+		};
+
+		let oldCursor = null;
+		const cursor = (filteredOpts.direction === 'vertical') ?
+			'row-resize' : 'col-resize';
+
+		return new Split(
+			filteredNodes.map((node) => node.element),
+			Object.assign({
+				cursor,
+				direction: 'vertical',
+				gutterSize: 0,
+				onDragEnd: () => {
+					document.body.style.cursor = oldCursor;
+					oldCursor = null;
+				},
+				onDragStart: () => {
+					oldCursor = document.body.style.cursor;
+					document.body.style.cursor = cursor;
+				},
+			}, filteredOpts)
+		);
+	});
+}
+
+DOMWrapper.WrappedElement.prototype.split = function(nodes, options) {
+	this.add(nodes);
+	split(nodes, options);
+	return this;
+};