switch REPL orientation in tutorial, hide props editor

site/src/components/Repl/Output/index.svelte

@@ -19,6 +19,7 @@
 	export let runtimeError;
 	export let compileOptions;
 	export let embedded;
+	export let show_props;
 
 	// refs
 	let viewer;
@@ -121,7 +122,7 @@
 </div>
 
 {#if view === 'result'}
-	<SplitPane type="vertical" pos={67}>
+	<SplitPane type="vertical" pos={67} fixed={!show_props} fixed_pos={100}>
 		<div slot="a">
 			{#if bundle}
 				<Viewer
@@ -143,6 +144,7 @@
 		</div>
 
 		<section slot="b">
+			{#if show_props}
 				<h3>Props editor</h3>
 
 				{#if props}
@@ -166,6 +168,7 @@
 						</div>
 					{/if}
 				{/if}
+			{/if}
 		</section>
 	</SplitPane>
 {:elseif embedded}

site/src/components/Repl/Output/replProxy.js

@@ -86,5 +86,4 @@ export default class ReplProxy {
 	fetchImports(bundle) {
 		return this.iframeCommand("fetch_imports", { bundle })
 	}
-
 }

site/src/components/Repl/index.svelte

@@ -11,6 +11,8 @@
 	export let version = 'beta'; // TODO change this to latest when the time comes
 	export let app;
 	export let embedded = false;
+	export let orientation = 'auto';
+	export let show_props = true;
 
 	export function toJSON() {
 		// TODO there's a bug here — Svelte hoists this function because
@@ -277,7 +279,12 @@
 
 <div class="container" bind:clientWidth={width}>
 	<div class="repl-inner" class:offset="{show_output}">
-		<SplitPane type="horizontal" fixed="{600 > width}" pos={60} fixed_pos={50}>
+		<SplitPane
+			type="{orientation === 'rows' ? 'vertical' : 'horizontal'}"
+			fixed="{600 > width}"
+			pos="{orientation === 'rows' ? 50 : 60}"
+			fixed_pos={50}
+		>
 			<section slot=a>
 				<Input
 					{component_store}
@@ -306,6 +313,7 @@
 					{sourceError}
 					{runtimeError}
 					{embedded}
+					{show_props}
 				/>
 			</section>
 		</SplitPane>

site/src/routes/tutorial/[slug]/index.svelte

@@ -146,7 +146,7 @@
 	</div>
 
 	<div class="tutorial-repl">
-		<Repl {app}/>
+		<Repl {app} orientation="rows" show_props={false}/>
 	</div>
 
 </div>