more REPL UI stuff

site/package-lock.json

@@ -4363,6 +4363,11 @@
       "requires": {
         "isexe": "^2.0.0"
       }
+    },
+    "yootils": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/yootils/-/yootils-0.0.14.tgz",
+      "integrity": "sha512-yWoA/a/4aVUp5nqfqdjbTdyXcR8d0OAbRQ8Ktu3ZsfQnArwLpS81oqZl3adIszX3p8NEhT0aNHARPsaTwBH/Qw=="
     }
   }
 }

site/package.json

@@ -19,7 +19,8 @@
     "golden-fleece": "^1.0.9",
     "marked": "^0.5.2",
     "prismjs": "^1.15.0",
-    "sirv": "^0.2.0"
+    "sirv": "^0.2.0",
+    "yootils": "0.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

site/src/routes/repl/_components/CodeMirror.html

@@ -131,7 +131,6 @@
 
 	.codemirror-container :global(.CodeMirror) {
 		height: 100%;
-		min-height: 60px;
 		background: var(--background);
 		font: 300 var(--code-fs)/1.7 var(--font-mono);
 		color: var(--base);

site/src/routes/repl/_components/Input/ComponentSelector.html

@@ -72,13 +72,13 @@
 	.file-tabs button {
 		position: relative;
 		font: 300 1.2rem/1.5 var(--font-ui);
-		color: var(--second);
 		border-bottom: var(--border-w) solid transparent;
 		padding: 1.2rem 1.2rem 0.8rem 0.5rem;
 		margin: 0 0.5rem 0 0;
 	}
 
 	.file-tabs button.active {
+		color: var(--second);
 		border-bottom: var(--border-w) solid var(--prime);
 	}
 
@@ -154,8 +154,6 @@
 	}
 </style>
 
-<!-- WUT -->
-
 <div class="component-selector">
 	<div class="file-tabs" on:dblclick="{() => dispatch('create')}">
 		{#each components as component}

site/src/routes/repl/_components/Output/index.html

@@ -27,8 +27,10 @@
 		/* width: 50%;
 		height: 100%; */
 		text-align: left;
+		position: relative;
 		font: 300 1.2rem/1.5 var(--font-ui);
 		border-bottom: var(--border-w) solid transparent;
+		padding: 1.2rem 1.5rem 0.8rem 1.5rem;
 	}
 
 	button.active {
@@ -39,6 +41,11 @@
 	div {
 		height: 100%;
 	}
+
+	h3 {
+		font: 300 1.2rem/1.5 var(--font-ui);
+		padding: 1.2rem 0 0.8rem 1rem;
+	}
 </style>
 
 <div class="view-toggle">
@@ -74,6 +81,10 @@
 		</div>
 
 		<section slot="b">
+			<h3>
+				Props editor
+			</h3>
+
 			<CodeMirror
 				mode="json"
 				bind:code={json5}
@@ -95,7 +106,11 @@
 		</div>
 
 		<section slot="b">
-			compiler options go here
+			<h3>
+				Compiler options
+			</h3>
+
+			<div>TODO</div>
 		</section>
 	</SplitPane>
 {/if}

site/src/routes/repl/_components/SplitPane.html

@@ -1,9 +1,11 @@
 <script>
+	import * as yootils from 'yootils';
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher();
 
 	export let type;
+	export let min = 50;
 
 	const refs = {};
 	const side = type === 'horizontal' ? 'left' : 'top';
@@ -15,9 +17,15 @@
 	function setPos(event) {
 		const { top, bottom, left, right } = refs.container.getBoundingClientRect();
 
-		pos = 100 * (type === 'vertical'
+		const extents = type === 'vertical' ? [top, bottom] : [left, right];
-			? (event.clientY - top) / (bottom - top)
+
-			: (event.clientX - left) / (right - left));
+		const px = yootils.clamp(
+			type === 'vertical' ? event.clientY : event.clientX,
+			extents[0] + min,
+			extents[1] - min
+		);
+
+		pos = 100 * (px - extents[0]) / (extents[1] - extents[0]);
 
 		dispatch('change');
 	}