From ed1110d74fae6ab810969134e2fb25d4ddbfe3aa Mon Sep 17 00:00:00 2001
From: David Evans <davidje13@users.noreply.github.com>
Date: Mon, 20 Jan 2020 19:23:17 +0000
Subject: [PATCH] Support open-in-editor URLs [#59]

---
 web/lib/editor.js                          | 150 ++++++++++++++++++---
 web/lib/editor.min.js                      |   2 +-
 web/scripts/editor.mjs                     |  27 ++++
 web/scripts/interface/Interface.mjs        |  75 ++++++++++-
 web/scripts/interface/URLExporter.mjs      |  44 ++++--
 web/scripts/interface/URLExporter_spec.mjs |  24 ++--
 web/scripts/slots/HashSlotNav.mjs          |   4 +
 web/styles/editor.css                      |  13 +-
 8 files changed, 290 insertions(+), 49 deletions(-)

diff --git a/web/lib/editor.js b/web/lib/editor.js
index 2448958..586796a 100644
--- a/web/lib/editor.js
+++ b/web/lib/editor.js
@@ -370,6 +370,10 @@
 			});
 		}
 
+		getRawHash() {
+			return getHash();
+		}
+
 		maxSlots() {
 			// Capacity of localStorage is limited
 			// So avoid allowing too many documents
@@ -1176,20 +1180,34 @@
 	}
 
 	class URLExporter {
-		constructor(base = '') {
-			this.base = base;
+		constructor(renderBase = '', editBase = '') {
+			this.renderBase = renderBase;
+			this.editBase = editBase;
 		}
 
-		setBase(base) {
-			this.base = base;
+		setRenderBase(renderBase) {
+			this.renderBase = renderBase;
 		}
 
-		_convertCode(code) {
-			return code
+		setEditBase(editBase) {
+			this.editBase = editBase;
+		}
+
+		_convertCode(code, keepBlankLines = false) {
+			let lines = code
 				.split('\n')
-				.map(encodeURIComponent)
-				.filter((ln) => ln !== '')
-				.join('/');
+				.map(encodeURIComponent);
+
+			if(keepBlankLines) {
+				// Always trim trailing blank lines
+				while(lines.length > 0 && lines[lines.length - 1] === '') {
+					-- lines.length;
+				}
+			} else {
+				lines = lines.filter((ln) => ln !== '');
+			}
+
+			return lines.join('/');
 		}
 
 		_convertWidthHeight(width, height) {
@@ -1220,14 +1238,22 @@
 			return '';
 		}
 
-		getURL(code, size = {}) {
+		getRenderURL(code, size = {}) {
 			return (
-				this.base +
+				this.renderBase +
 				this._convertSize(size) +
 				this._convertCode(code) +
 				'.svg'
 			);
 		}
+
+		getEditURL(code) {
+			return (
+				this.editBase +
+				'#edit:' +
+				this._convertCode(code, true)
+			);
+		}
 	}
 
 	class VoidStorage {
@@ -1277,6 +1303,14 @@
 			});
 	}
 
+	function setDocumentTitle(diagramTitle) {
+		let title = diagramTitle.trim();
+		if(title.length > 20) {
+			title = title.substr(0, 18).trim() + '\u2026';
+		}
+		document.title = (title ? `${title} \u2014 ` : '') + 'Sequence Diagram';
+	}
+
 	class Interface {
 		constructor({
 			sequenceDiagram,
@@ -1313,6 +1347,7 @@
 			this.diagram
 				.on('render', () => {
 					this.updateMinSize(this.diagram.getSize());
+					setDocumentTitle(this.diagram.getTitle());
 					this.pngDirty = true;
 				})
 				.on('mouseover', (element) => this.code.markLineHover(element.ln))
@@ -1365,6 +1400,32 @@
 					setTimeout(() => copied.styles({'display': 'none'}), 1500);
 				});
 
+			const updateMode = () => {
+				this.renderOpts.styles({
+					'display': this.modeEdit.element.checked ? 'none' : 'block',
+				});
+				this._refreshURL();
+			};
+
+			this.modeRender = this.dom.el('input').attrs({
+				'checked': 'checked',
+				'name': 'export-mode',
+				'type': 'radio',
+				'value': 'render',
+			}).on('change', updateMode);
+
+			this.modeEdit = this.dom.el('input').attrs({
+				'name': 'export-mode',
+				'type': 'radio',
+				'value': 'edit',
+			}).on('change', updateMode);
+
+			this.modeMarkdown = this.dom.el('input').attrs({
+				'name': 'export-mode',
+				'type': 'radio',
+				'value': 'markdown',
+			}).on('change', updateMode);
+
 			this.urlWidth = this.dom.el('input').attrs({
 				'min': 0,
 				'placeholder': 'auto',
@@ -1396,12 +1457,21 @@
 				this._refreshURL();
 			});
 
-			const urlOpts = this.dom.el('div').setClass('config').add(
+			this.renderOpts = this.dom.el('div').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.dom.el('label').add('zoom ', this.urlZoom)
+			);
+
+			const urlOpts = this.dom.el('div').setClass('config').add(
+				this.dom.el('div').setClass('export-mode').add(
+					this.dom.el('label').add(this.modeRender, 'View'),
+					this.dom.el('label').add(this.modeEdit, 'Edit'),
+					this.dom.el('label').add(this.modeMarkdown, 'Markdown')
+				),
+				this.renderOpts,
 				this.urlOutput,
 				copy,
 				copied
@@ -1414,7 +1484,10 @@
 						.add('Loading\u2026')
 				);
 
+			const ownURL = (typeof window === 'undefined') ? 'http://localhost' : window.location.href;
 			this.renderService = new URLExporter();
+			this.renderService.setEditBase(new URL('.', ownURL).href);
+
 			const relativePath = 'render/';
 			fetchResource(relativePath)
 				.then((response) => response.text())
@@ -1423,9 +1496,7 @@
 					if(!path || path.startsWith('<')) {
 						path = relativePath;
 					}
-					this.renderService.setBase(
-						new URL(path, window.location.href).href
-					);
+					this.renderService.setRenderBase(new URL(path, ownURL).href);
 					urlBuilder.empty().add(urlOpts);
 					this._refreshURL();
 				})
@@ -1440,11 +1511,27 @@
 		}
 
 		_refreshURL() {
-			this.urlOutput.val(this.renderService.getURL(this.code.value(), {
+			const code = this.code.value();
+			const viewOpts = {
 				height: Number.parseFloat(this.urlHeight.element.value),
 				width: Number.parseFloat(this.urlWidth.element.value),
 				zoom: Number.parseFloat(this.urlZoom.element.value || '1'),
-			}));
+			};
+
+			let url = '';
+			if(this.modeMarkdown.element.checked) {
+				const edit = this.renderService.getEditURL(code);
+				const view = this.renderService.getRenderURL(code, viewOpts);
+				const title = this.diagram.getTitle()
+					.replace(/[^a-zA-Z0-9 \-_'"]/g, '')
+					.trim();
+				url = `[![${title}](${view})](${edit})`;
+			} else if(this.modeEdit.element.checked) {
+				url = this.renderService.getEditURL(code);
+			} else {
+				url = this.renderService.getRenderURL(code, viewOpts);
+			}
+			this.urlOutput.val(url);
 		}
 
 		_showURLBuilder() {
@@ -2214,6 +2301,32 @@
 		}
 	}
 
+	function loadHashDocument(hashNav, slotStorage) {
+		const editPrefix = 'edit:';
+		const hash = hashNav.getRawHash();
+		if(!hash.startsWith(editPrefix)) {
+			return;
+		}
+
+		let doc = hash
+			.substr(editPrefix.length)
+			.split('/')
+			.map(decodeURIComponent)
+			.join('\n');
+
+		if(!doc) {
+			return;
+		}
+
+		if(!doc.endsWith('\n')) {
+			doc += '\n';
+		}
+
+		const newSlot = slotStorage.nextAvailableSlot();
+		slotStorage.set(newSlot, doc);
+		hashNav.setSlot(newSlot);
+	}
+
 	window.addEventListener('load', () => {
 		const loader = window.document.getElementById('loader');
 		const [nav] = loader.getElementsByTagName('nav');
@@ -2235,6 +2348,7 @@
 			// If the slot is changed by the user, reload to force a document load
 			window.location.reload();
 		});
+		loadHashDocument(hashNav, slotStorage);
 
 		loader.parentNode.removeChild(loader);
 
diff --git a/web/lib/editor.min.js b/web/lib/editor.min.js
index 792897a..75306bf 100644
--- a/web/lib/editor.min.js
+++ b/web/lib/editor.min.js
@@ -1 +1 @@
-!function(){"use strict";function e(){const e=window.location.hash;return e?e.substr(1):""}function t(e){return null===e?null:e.element?e.element:e}function i(e){return e.length>0&&"\n"!==e.charAt(e.length-1)?e+"\n":e}function s(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 n(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 o(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 l=[{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"}];const a=/^[0-9]{1,2}$/;class d{constructor(e){this.element=e}addBefore(e=null,i=null){if(null===e)return this;if(Array.isArray(e))for(const t of e)this.addBefore(t,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}(e,this.element.ownerDocument);this.element.insertBefore(s,t(i))}return this}add(...e){return this.addBefore(e,null)}del(e=null){return null!==e&&this.element.removeChild(t(e)),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(e){return t(e).appendChild(this.element),this}detach(){return this.element.parentNode&&this.element.parentNode.removeChild(this.element),this}}class h{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 d(e)}el(e,t=null){let i=null;return i=null===t?this.document.createElement(e):this.document.createElementNS(t,e),new d(i)}txt(e=""){return this.document.createTextNode(e)}}h.WrappedElement=d,h.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})},h.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};class c{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 u=/\{[^}]+\}/g;class m extends c{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 s=this.code.getDoc(),o=s.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]=s.listSelections();n(t.anchor,e)&&n(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){u.lastIndex=0;for(let i=null;i=u.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 t=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 o=i(e);n.line>=this.code.lineCount()&&(o="\n"+o),this.code.replaceRange(o,n,null,"library");const r={ch:0,line:n.line+t};this.enterParams(n,r,e)}else{const t=this.value(),s=this.code.element.selectionStart,n=("\n"+t+"\n").indexOf("\n",s),o=i(t.substr(0,n))+i(e);this.code.val(o+t.substr(n)).select(o.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 i=this.code,{selectionStart:n,selectionEnd:o,value:r}=i.element,l=i.focussed(),a=new e(i.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:r});i.detach(),a.getDoc().setSelection(s(r,n),s(r,o));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 g{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"+o(Math.max(e,0),4)),r(t)&&(i+="h"+o(Math.max(t,0),4)),i+"/"}_convertZoom(e){return 1===e?"":"z"+o(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"}}class p{constructor(){this.value=""}set(e){this.value=e}get(){return this.value}remove(){this.value=""}}const w=500,v=250,f=4;class b{constructor(e){this.id=e}set(e){try{window.localStorage.setItem(this.id,e)}catch(e){}}get(){try{return window.localStorage.getItem(this.id)||""}catch(e){return""}}remove(){try{window.localStorage.removeItem(this.id)}catch(e){}}}var y=window.SequenceDiagram;const A=/^s[0-9]+$/;var S=(e,t)=>{if(null!==e.getSlot())return Promise.resolve();const i=t.getAllSlots().sort((e,t)=>e-t);if(!i.length)return e.setSlot(1),Promise.resolve();const s=new h(window.document),n=s.el("div").setClass("pick-document").add(s.el("h1").text("Available documents on this computer:")).add(s.el("p").text("(right-click to delete)")).attach(document.body),o=new y;return new Promise(r=>{const l=i.map(e=>{const i=t.get(e),l=s.el("div").attr("title",i.trim()),a=s.el("a").attr("href",`#${e}`).setClass("pick-document-item").add(l).fastClick().on("click",t=>{t.preventDefault(),r(e)}).on("contextmenu",i=>{i.preventDefault(),function(e){window.confirm("Delete this document?")&&(t.remove(e),window.location.reload())}(e)}).attach(n);return o.clone({code:i,container:l.element,render:!1}).on("error",(e,t)=>{window.console.warn("Failed to render preview",t),a.attr("class","pick-document-item broken"),l.text(i)})});try{o.renderAll(l)}catch(e){}i.length<e.maxSlots()&&s.el("div").setClass("pick-document-item new").add(s.el("div").attr("title","New document")).on("click",()=>r(t.nextAvailableSlot())).attach(n)}).then(t=>{n.detach(),e.setSlot(t)})};const k=window.requirejs,C={},x={},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)),C[e]=s;const n=t.getAttribute("data-integrity");n&&(x[e]=n)}}k.config({hashes:x,onNodeCreated:(e,t,i)=>{t.hashes[i]&&(e.setAttribute("integrity",t.hashes[i]),e.setAttribute("crossorigin","anonymous"))},paths:C});window.addEventListener("load",()=>{const t=window.document.getElementById("loader"),[i]=t.getElementsByTagName("nav"),s=i.getElementsByTagName("a"),n=[];for(let e=0;e<s.length;++e){const t=s[e];n.push({href:t.getAttribute("href"),label:t.textContent,touchLabel:t.dataset.touch})}const o=new class{getSlotKey(e){return`s${e}`}getAllSlots(){const e=[];try{for(const t in window.localStorage)A.test(t)&&e.push(Number(t.substr(1)))}catch(e){}return e}nextAvailableSlot(e=Number.MAX_SAFE_INTEGER){try{for(let t=1;t<e;++t)if(null===window.localStorage.getItem(this.getSlotKey(t)))return t;return null}catch(e){return null}}set(e,t){try{window.localStorage.setItem(this.getSlotKey(e),t)}catch(e){}}get(e){try{return window.localStorage.getItem(this.getSlotKey(e))||""}catch(e){return""}}remove(e){try{window.localStorage.removeItem(this.getSlotKey(e))}catch(e){}}};!function(e){const t=new b("src"),i=t.get();if(i){const s=e.nextAvailableSlot();e.set(s,i),t.remove()}}(o);const r=new class{constructor(t=(()=>null)){this.hash=e(),window.addEventListener("hashchange",()=>{e()!==this.hash&&t()})}maxSlots(){return 100}getSlot(){const t=e();return a.test(t)?Number(t):null}setSlot(e){this.hash=e.toFixed(0),window.location.hash=this.hash}}(()=>{window.location.reload()});t.parentNode.removeChild(t),S(r,o).then(()=>{new class{constructor({sequenceDiagram:e,defaultCode:t="",library:i=[],links:s=[],require:n=null,storage:o=new p,touchUI:r=!1}){this.diagram=e,this.defaultCode=t,this.storage=o,this.library=i,this.links=s,this.minScale=1.5,this.require=n||(()=>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.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 g,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 m(this.dom,e,{mode:"sequence",require:this.require,value:this.storage.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 h(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.storage.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=w:i.stages.length!==e.stages.length&&(s=v)}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:l,links:n,require:k,sequenceDiagram:new y,storage:new class{constructor(e,t){this.slotManager=e,this.slotStorage=t,this.slot=this.slotManager.getSlot(),this.value=this.get(),this.originalValue=this.value,this.loadTime=Date.now(),this.internalStorageListener=this.internalStorageListener.bind(this),window.addEventListener("storage",this.internalStorageListener),this.checkSlot()}getCurrentValue(){return Date.now()<this.loadTime+500?this.originalValue:this.value}key(){return this.slotStorage.getSlotKey(this.slot)}checkSlot(){const e=this.key();window.localStorage.removeItem(`chk-${e}`),window.localStorage.removeItem(`res-${e}`),window.localStorage.removeItem(`ack-${e}`),window.localStorage.setItem(`chk-${e}`,"1")}cloneSlot(){const e=this.slotManager.maxSlots(),t=this.slotStorage.nextAvailableSlot(e);if(!t)return;const i=this.getCurrentValue();this.slotStorage.set(t,i),this.slot=t,this.slotManager.setSlot(t),i!==this.value&&document.location.reload()}internalStorageListener({storageArea:e,key:t,newValue:i}){if(e!==window.localStorage)return;const s=this.key();t===s&&i!==this.value&&(null===i&&window.localStorage.setItem(s,this.value),window.localStorage.removeItem(`res-${s}`),window.localStorage.setItem(`res-${s}`,"1")),t===`chk-${s}`&&i&&window.localStorage.setItem(`res-${s}`,"1"),t===`res-${s}`&&i&&(window.localStorage.removeItem(`chk-${s}`),window.localStorage.removeItem(`res-${s}`),window.localStorage.setItem(`ack-${s}`,"1"),this.cloneSlot()),t===`ack-${s}`&&i&&(window.localStorage.removeItem(`ack-${s}`,"1"),window.localStorage.setItem(s,this.value))}set(e){this.value=e,this.slotStorage.set(this.slot,e)}get(){return this.slotStorage.get(this.slot)}remove(){this.slotStorage.remove(this.slot)}close(){window.removeEventListener("storage",this.internalStorageListener)}}(r,o),touchUI:"ontouchstart"in window}).build(window.document.body)})})}();
\ No newline at end of file
+!function(){"use strict";function e(){const e=window.location.hash;return e?e.substr(1):""}function t(e){return null===e?null:e.element?e.element:e}function i(e){return e.length>0&&"\n"!==e.charAt(e.length-1)?e+"\n":e}function s(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 n(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 r(e,t){const i=e.toString(),s=i.indexOf(".");return-1===s||i.length-s-1<=t?i:e.toFixed(t)}function o(e=null){return null!==e&&!Number.isNaN(e)}var l=[{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"}];const a=/^[0-9]{1,2}$/;class d{constructor(e){this.element=e}addBefore(e=null,i=null){if(null===e)return this;if(Array.isArray(e))for(const t of e)this.addBefore(t,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}(e,this.element.ownerDocument);this.element.insertBefore(s,t(i))}return this}add(...e){return this.addBefore(e,null)}del(e=null){return null!==e&&this.element.removeChild(t(e)),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(e){return t(e).appendChild(this.element),this}detach(){return this.element.parentNode&&this.element.parentNode.removeChild(this.element),this}}class h{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 d(e)}el(e,t=null){let i=null;return i=null===t?this.document.createElement(e):this.document.createElementNS(t,e),new d(i)}txt(e=""){return this.document.createTextNode(e)}}h.WrappedElement=d,h.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})},h.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 c{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 u=/\{[^}]+\}/g;class m extends c{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 s=this.code.getDoc(),r=s.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]=s.listSelections();n(t.anchor,e)&&n(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){u.lastIndex=0;for(let i=null;i=u.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 t=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=i(e);n.line>=this.code.lineCount()&&(r="\n"+r),this.code.replaceRange(r,n,null,"library");const o={ch:0,line:n.line+t};this.enterParams(n,o,e)}else{const t=this.value(),s=this.code.element.selectionStart,n=("\n"+t+"\n").indexOf("\n",s),r=i(t.substr(0,n))+i(e);this.code.val(r+t.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 i=this.code,{selectionStart:n,selectionEnd:r,value:o}=i.element,l=i.focussed(),a=new e(i.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});i.detach(),a.getDoc().setSelection(s(o,n),s(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 g{constructor(e="",t=""){this.renderBase=e,this.editBase=t}setRenderBase(e){this.renderBase=e}setEditBase(e){this.editBase=e}_convertCode(e,t=!1){let i=e.split("\n").map(encodeURIComponent);if(t)for(;i.length>0&&""===i[i.length-1];)--i.length;else i=i.filter(e=>""!==e);return i.join("/")}_convertWidthHeight(e,t){let i="";return o(e)&&(i+="w"+r(Math.max(e,0),4)),o(t)&&(i+="h"+r(Math.max(t,0),4)),i+"/"}_convertZoom(e){return 1===e?"":"z"+r(Math.max(e,0),4)+"/"}_convertSize({height:e,width:t,zoom:i}){return o(t)||o(e)?this._convertWidthHeight(t,e):o(i)?this._convertZoom(i):""}getRenderURL(e,t={}){return this.renderBase+this._convertSize(t)+this._convertCode(e)+".svg"}getEditURL(e){return this.editBase+"#edit:"+this._convertCode(e,!0)}}class p{constructor(){this.value=""}set(e){this.value=e}get(){return this.value}remove(){this.value=""}}const w=500,v=250,f=4;class b{constructor(e){this.id=e}set(e){try{window.localStorage.setItem(this.id,e)}catch(e){}}get(){try{return window.localStorage.getItem(this.id)||""}catch(e){return""}}remove(){try{window.localStorage.removeItem(this.id)}catch(e){}}}var y=window.SequenceDiagram;const A=/^s[0-9]+$/;var S=(e,t)=>{if(null!==e.getSlot())return Promise.resolve();const i=t.getAllSlots().sort((e,t)=>e-t);if(!i.length)return e.setSlot(1),Promise.resolve();const s=new h(window.document),n=s.el("div").setClass("pick-document").add(s.el("h1").text("Available documents on this computer:")).add(s.el("p").text("(right-click to delete)")).attach(document.body),r=new y;return new Promise(o=>{const l=i.map(e=>{const i=t.get(e),l=s.el("div").attr("title",i.trim()),a=s.el("a").attr("href",`#${e}`).setClass("pick-document-item").add(l).fastClick().on("click",t=>{t.preventDefault(),o(e)}).on("contextmenu",i=>{i.preventDefault(),function(e){window.confirm("Delete this document?")&&(t.remove(e),window.location.reload())}(e)}).attach(n);return r.clone({code:i,container:l.element,render:!1}).on("error",(e,t)=>{window.console.warn("Failed to render preview",t),a.attr("class","pick-document-item broken"),l.text(i)})});try{r.renderAll(l)}catch(e){}i.length<e.maxSlots()&&s.el("div").setClass("pick-document-item new").add(s.el("div").attr("title","New document")).on("click",()=>o(t.nextAvailableSlot())).attach(n)}).then(t=>{n.detach(),e.setSlot(t)})};const k=window.requirejs,C={},x={},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)),C[e]=s;const n=t.getAttribute("data-integrity");n&&(x[e]=n)}}k.config({hashes:x,onNodeCreated:(e,t,i)=>{t.hashes[i]&&(e.setAttribute("integrity",t.hashes[i]),e.setAttribute("crossorigin","anonymous"))},paths:C});window.addEventListener("load",()=>{const t=window.document.getElementById("loader"),[i]=t.getElementsByTagName("nav"),s=i.getElementsByTagName("a"),n=[];for(let e=0;e<s.length;++e){const t=s[e];n.push({href:t.getAttribute("href"),label:t.textContent,touchLabel:t.dataset.touch})}const r=new class{getSlotKey(e){return`s${e}`}getAllSlots(){const e=[];try{for(const t in window.localStorage)A.test(t)&&e.push(Number(t.substr(1)))}catch(e){}return e}nextAvailableSlot(e=Number.MAX_SAFE_INTEGER){try{for(let t=1;t<e;++t)if(null===window.localStorage.getItem(this.getSlotKey(t)))return t;return null}catch(e){return null}}set(e,t){try{window.localStorage.setItem(this.getSlotKey(e),t)}catch(e){}}get(e){try{return window.localStorage.getItem(this.getSlotKey(e))||""}catch(e){return""}}remove(e){try{window.localStorage.removeItem(this.getSlotKey(e))}catch(e){}}};!function(e){const t=new b("src"),i=t.get();if(i){const s=e.nextAvailableSlot();e.set(s,i),t.remove()}}(r);const o=new class{constructor(t=(()=>null)){this.hash=e(),window.addEventListener("hashchange",()=>{e()!==this.hash&&t()})}getRawHash(){return e()}maxSlots(){return 100}getSlot(){const t=e();return a.test(t)?Number(t):null}setSlot(e){this.hash=e.toFixed(0),window.location.hash=this.hash}}(()=>{window.location.reload()});!function(e,t){const i=e.getRawHash();if(!i.startsWith("edit:"))return;let s=i.substr("edit:".length).split("/").map(decodeURIComponent).join("\n");if(!s)return;s.endsWith("\n")||(s+="\n");const n=t.nextAvailableSlot();t.set(n,s),e.setSlot(n)}(o,r),t.parentNode.removeChild(t),S(o,r).then(()=>{new class{constructor({sequenceDiagram:e,defaultCode:t="",library:i=[],links:s=[],require:n=null,storage:r=new p,touchUI:o=!1}){this.diagram=e,this.defaultCode=t,this.storage=r,this.library=i,this.links=s,this.minScale=1.5,this.require=n||(()=>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()),function(e){let t=e.trim();t.length>20&&(t=t.substr(0,18).trim()+"…"),document.title=(t?`${t} — `:"")+"Sequence Diagram"}(this.diagram.getTitle()),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)}),i=()=>{this.renderOpts.styles({display:this.modeEdit.element.checked?"none":"block"}),this._refreshURL()};this.modeRender=this.dom.el("input").attrs({checked:"checked",name:"export-mode",type:"radio",value:"render"}).on("change",i),this.modeEdit=this.dom.el("input").attrs({name:"export-mode",type:"radio",value:"edit"}).on("change",i),this.modeMarkdown=this.dom.el("input").attrs({name:"export-mode",type:"radio",value:"markdown"}).on("change",i),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()}),this.renderOpts=this.dom.el("div").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));const s=this.dom.el("div").setClass("config").add(this.dom.el("div").setClass("export-mode").add(this.dom.el("label").add(this.modeRender,"View"),this.dom.el("label").add(this.modeEdit,"Edit"),this.dom.el("label").add(this.modeMarkdown,"Markdown")),this.renderOpts,this.urlOutput,t,e),n=this.dom.el("div").setClass("urlbuilder").styles({display:"none"}).add(this.dom.el("div").setClass("message").add("Loading…")),r="undefined"==typeof window?"http://localhost":window.location.href;return this.renderService=new g,this.renderService.setEditBase(new URL(".",r).href),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.setRenderBase(new URL(t,r).href),n.empty().add(s),this._refreshURL()}).catch(()=>{n.empty().add(this.dom.el("div").setClass("message").add("No online rendering service available."))}),n}_refreshURL(){const e=this.code.value(),t={height:Number.parseFloat(this.urlHeight.element.value),width:Number.parseFloat(this.urlWidth.element.value),zoom:Number.parseFloat(this.urlZoom.element.value||"1")};let i="";if(this.modeMarkdown.element.checked){const s=this.renderService.getEditURL(e),n=this.renderService.getRenderURL(e,t);i=`[![${this.diagram.getTitle().replace(/[^a-zA-Z0-9 \-_'"]/g,"").trim()}](${n})](${s})`}else i=this.modeEdit.element.checked?this.renderService.getEditURL(e):this.renderService.getRenderURL(e,t);this.urlOutput.val(i)}_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 m(this.dom,e,{mode:"sequence",require:this.require,value:this.storage.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 h(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.storage.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=w:i.stages.length!==e.stages.length&&(s=v)}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:l,links:n,require:k,sequenceDiagram:new y,storage:new class{constructor(e,t){this.slotManager=e,this.slotStorage=t,this.slot=this.slotManager.getSlot(),this.value=this.get(),this.originalValue=this.value,this.loadTime=Date.now(),this.internalStorageListener=this.internalStorageListener.bind(this),window.addEventListener("storage",this.internalStorageListener),this.checkSlot()}getCurrentValue(){return Date.now()<this.loadTime+500?this.originalValue:this.value}key(){return this.slotStorage.getSlotKey(this.slot)}checkSlot(){const e=this.key();window.localStorage.removeItem(`chk-${e}`),window.localStorage.removeItem(`res-${e}`),window.localStorage.removeItem(`ack-${e}`),window.localStorage.setItem(`chk-${e}`,"1")}cloneSlot(){const e=this.slotManager.maxSlots(),t=this.slotStorage.nextAvailableSlot(e);if(!t)return;const i=this.getCurrentValue();this.slotStorage.set(t,i),this.slot=t,this.slotManager.setSlot(t),i!==this.value&&document.location.reload()}internalStorageListener({storageArea:e,key:t,newValue:i}){if(e!==window.localStorage)return;const s=this.key();t===s&&i!==this.value&&(null===i&&window.localStorage.setItem(s,this.value),window.localStorage.removeItem(`res-${s}`),window.localStorage.setItem(`res-${s}`,"1")),t===`chk-${s}`&&i&&window.localStorage.setItem(`res-${s}`,"1"),t===`res-${s}`&&i&&(window.localStorage.removeItem(`chk-${s}`),window.localStorage.removeItem(`res-${s}`),window.localStorage.setItem(`ack-${s}`,"1"),this.cloneSlot()),t===`ack-${s}`&&i&&(window.localStorage.removeItem(`ack-${s}`,"1"),window.localStorage.setItem(s,this.value))}set(e){this.value=e,this.slotStorage.set(this.slot,e)}get(){return this.slotStorage.get(this.slot)}remove(){this.slotStorage.remove(this.slot)}close(){window.removeEventListener("storage",this.internalStorageListener)}}(o,r),touchUI:"ontouchstart"in window}).build(window.document.body)})})}();
\ No newline at end of file
diff --git a/web/scripts/editor.mjs b/web/scripts/editor.mjs
index f96e97b..66c149d 100644
--- a/web/scripts/editor.mjs
+++ b/web/scripts/editor.mjs
@@ -37,6 +37,32 @@ function migrateOldDocument(slotStorage) {
 	}
 }
 
+function loadHashDocument(hashNav, slotStorage) {
+	const editPrefix = 'edit:';
+	const hash = hashNav.getRawHash();
+	if(!hash.startsWith(editPrefix)) {
+		return;
+	}
+
+	let doc = hash
+		.substr(editPrefix.length)
+		.split('/')
+		.map(decodeURIComponent)
+		.join('\n');
+
+	if(!doc) {
+		return;
+	}
+
+	if(!doc.endsWith('\n')) {
+		doc += '\n';
+	}
+
+	const newSlot = slotStorage.nextAvailableSlot();
+	slotStorage.set(newSlot, doc);
+	hashNav.setSlot(newSlot);
+}
+
 window.addEventListener('load', () => {
 	const loader = window.document.getElementById('loader');
 	const [nav] = loader.getElementsByTagName('nav');
@@ -58,6 +84,7 @@ window.addEventListener('load', () => {
 		// If the slot is changed by the user, reload to force a document load
 		window.location.reload();
 	});
+	loadHashDocument(hashNav, slotStorage);
 
 	loader.parentNode.removeChild(loader);
 
diff --git a/web/scripts/interface/Interface.mjs b/web/scripts/interface/Interface.mjs
index 5d0073f..486a601 100644
--- a/web/scripts/interface/Interface.mjs
+++ b/web/scripts/interface/Interface.mjs
@@ -39,6 +39,14 @@ function fetchResource(path) {
 		});
 }
 
+function setDocumentTitle(diagramTitle) {
+	let title = diagramTitle.trim();
+	if(title.length > 20) {
+		title = title.substr(0, 18).trim() + '\u2026';
+	}
+	document.title = (title ? `${title} \u2014 ` : '') + 'Sequence Diagram';
+}
+
 export default class Interface {
 	constructor({
 		sequenceDiagram,
@@ -75,6 +83,7 @@ export default class Interface {
 		this.diagram
 			.on('render', () => {
 				this.updateMinSize(this.diagram.getSize());
+				setDocumentTitle(this.diagram.getTitle());
 				this.pngDirty = true;
 			})
 			.on('mouseover', (element) => this.code.markLineHover(element.ln))
@@ -127,6 +136,32 @@ export default class Interface {
 				setTimeout(() => copied.styles({'display': 'none'}), 1500);
 			});
 
+		const updateMode = () => {
+			this.renderOpts.styles({
+				'display': this.modeEdit.element.checked ? 'none' : 'block',
+			});
+			this._refreshURL();
+		};
+
+		this.modeRender = this.dom.el('input').attrs({
+			'checked': 'checked',
+			'name': 'export-mode',
+			'type': 'radio',
+			'value': 'render',
+		}).on('change', updateMode);
+
+		this.modeEdit = this.dom.el('input').attrs({
+			'name': 'export-mode',
+			'type': 'radio',
+			'value': 'edit',
+		}).on('change', updateMode);
+
+		this.modeMarkdown = this.dom.el('input').attrs({
+			'name': 'export-mode',
+			'type': 'radio',
+			'value': 'markdown',
+		}).on('change', updateMode);
+
 		this.urlWidth = this.dom.el('input').attrs({
 			'min': 0,
 			'placeholder': 'auto',
@@ -158,12 +193,21 @@ export default class Interface {
 			this._refreshURL();
 		});
 
-		const urlOpts = this.dom.el('div').setClass('config').add(
+		this.renderOpts = this.dom.el('div').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.dom.el('label').add('zoom ', this.urlZoom)
+		);
+
+		const urlOpts = this.dom.el('div').setClass('config').add(
+			this.dom.el('div').setClass('export-mode').add(
+				this.dom.el('label').add(this.modeRender, 'View'),
+				this.dom.el('label').add(this.modeEdit, 'Edit'),
+				this.dom.el('label').add(this.modeMarkdown, 'Markdown')
+			),
+			this.renderOpts,
 			this.urlOutput,
 			copy,
 			copied
@@ -176,7 +220,10 @@ export default class Interface {
 					.add('Loading\u2026')
 			);
 
+		const ownURL = (typeof window === 'undefined') ? 'http://localhost' : window.location.href;
 		this.renderService = new URLExporter();
+		this.renderService.setEditBase(new URL('.', ownURL).href);
+
 		const relativePath = 'render/';
 		fetchResource(relativePath)
 			.then((response) => response.text())
@@ -185,9 +232,7 @@ export default class Interface {
 				if(!path || path.startsWith('<')) {
 					path = relativePath;
 				}
-				this.renderService.setBase(
-					new URL(path, window.location.href).href
-				);
+				this.renderService.setRenderBase(new URL(path, ownURL).href);
 				urlBuilder.empty().add(urlOpts);
 				this._refreshURL();
 			})
@@ -202,11 +247,27 @@ export default class Interface {
 	}
 
 	_refreshURL() {
-		this.urlOutput.val(this.renderService.getURL(this.code.value(), {
+		const code = this.code.value();
+		const viewOpts = {
 			height: Number.parseFloat(this.urlHeight.element.value),
 			width: Number.parseFloat(this.urlWidth.element.value),
 			zoom: Number.parseFloat(this.urlZoom.element.value || '1'),
-		}));
+		};
+
+		let url = '';
+		if(this.modeMarkdown.element.checked) {
+			const edit = this.renderService.getEditURL(code);
+			const view = this.renderService.getRenderURL(code, viewOpts);
+			const title = this.diagram.getTitle()
+				.replace(/[^a-zA-Z0-9 \-_'"]/g, '')
+				.trim();
+			url = `[![${title}](${view})](${edit})`;
+		} else if(this.modeEdit.element.checked) {
+			url = this.renderService.getEditURL(code);
+		} else {
+			url = this.renderService.getRenderURL(code, viewOpts);
+		}
+		this.urlOutput.val(url);
 	}
 
 	_showURLBuilder() {
diff --git a/web/scripts/interface/URLExporter.mjs b/web/scripts/interface/URLExporter.mjs
index 169e1c5..ae7f034 100644
--- a/web/scripts/interface/URLExporter.mjs
+++ b/web/scripts/interface/URLExporter.mjs
@@ -12,20 +12,34 @@ function valid(v = null) {
 }
 
 export default class URLExporter {
-	constructor(base = '') {
-		this.base = base;
+	constructor(renderBase = '', editBase = '') {
+		this.renderBase = renderBase;
+		this.editBase = editBase;
 	}
 
-	setBase(base) {
-		this.base = base;
+	setRenderBase(renderBase) {
+		this.renderBase = renderBase;
 	}
 
-	_convertCode(code) {
-		return code
+	setEditBase(editBase) {
+		this.editBase = editBase;
+	}
+
+	_convertCode(code, keepBlankLines = false) {
+		let lines = code
 			.split('\n')
-			.map(encodeURIComponent)
-			.filter((ln) => ln !== '')
-			.join('/');
+			.map(encodeURIComponent);
+
+		if(keepBlankLines) {
+			// Always trim trailing blank lines
+			while(lines.length > 0 && lines[lines.length - 1] === '') {
+				-- lines.length;
+			}
+		} else {
+			lines = lines.filter((ln) => ln !== '');
+		}
+
+		return lines.join('/');
 	}
 
 	_convertWidthHeight(width, height) {
@@ -56,12 +70,20 @@ export default class URLExporter {
 		return '';
 	}
 
-	getURL(code, size = {}) {
+	getRenderURL(code, size = {}) {
 		return (
-			this.base +
+			this.renderBase +
 			this._convertSize(size) +
 			this._convertCode(code) +
 			'.svg'
 		);
 	}
+
+	getEditURL(code) {
+		return (
+			this.editBase +
+			'#edit:' +
+			this._convertCode(code, true)
+		);
+	}
 }
diff --git a/web/scripts/interface/URLExporter_spec.mjs b/web/scripts/interface/URLExporter_spec.mjs
index e4f926e..836f68f 100644
--- a/web/scripts/interface/URLExporter_spec.mjs
+++ b/web/scripts/interface/URLExporter_spec.mjs
@@ -3,70 +3,74 @@ 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');
+		const url = exporter.getRenderURL('A\nB');
 
 		expect(url).toEqual('A/B.svg');
 	});
 
 	it('escapes special characters', () => {
 		const exporter = new URLExporter();
-		const url = exporter.getURL('a/b%c"d');
+		const url = exporter.getRenderURL('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');
+		const url = exporter.getRenderURL('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});
+		const url = exporter.getRenderURL('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});
+		const url = exporter.getRenderURL('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});
+		const url = exporter.getRenderURL('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});
+		const url = exporter.getRenderURL('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});
+		const url = exporter.getRenderURL('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});
+		const url = exporter.getRenderURL('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});
+		const url = exporter.getRenderURL('a', {
+			height: 20,
+			width: 10,
+			zoom: 2,
+		});
 
 		expect(url).toEqual('w10h20/a.svg');
 	});
diff --git a/web/scripts/slots/HashSlotNav.mjs b/web/scripts/slots/HashSlotNav.mjs
index 472e478..c09018e 100644
--- a/web/scripts/slots/HashSlotNav.mjs
+++ b/web/scripts/slots/HashSlotNav.mjs
@@ -16,6 +16,10 @@ export default class HashSlotNav {
 		});
 	}
 
+	getRawHash() {
+		return getHash();
+	}
+
 	maxSlots() {
 		// Capacity of localStorage is limited
 		// So avoid allowing too many documents
diff --git a/web/styles/editor.css b/web/styles/editor.css
index 0874eb4..fd60ac7 100644
--- a/web/styles/editor.css
+++ b/web/styles/editor.css
@@ -315,7 +315,16 @@ html, body {
 }
 
 .urlbuilder .config {
-	padding-top: 10px;
+	padding-top: 0;
+}
+
+.urlbuilder .export-mode input {
+	margin-right: 5px;
+}
+
+.urlbuilder .export-mode label {
+	display: inline-block;
+	margin: 0 10px 10px;
 }
 
 .urlbuilder input[type=number] {
@@ -325,7 +334,7 @@ html, body {
 
 .urlbuilder .or {
 	display: block;
-	margin: 10px 0;
+	margin: 5px 0;
 	color: #333333;
 	font-size: 1.2em;
 }