Panel UI

packages/repl/src/lib/Output/Output.svelte

@@ -112,14 +112,14 @@
 	{#if embedded}
 		<Editor workspace={js_workspace} />
 	{:else}
-		<PaneWithPanel pos="50%" max="-4.2rem" panel="Compiler options">
-			<div slot="main">
+		<PaneWithPanel min="-18rem" pos="-18rem" panel="Compiler options">
+			{#snippet main()}
 				<Editor workspace={js_workspace} />
-			</div>
+			{/snippet}
 
-			<div slot="panel-body">
+			{#snippet body()}
 				<CompilerOptions {workspace} />
-			</div>
+			{/snippet}
 		</PaneWithPanel>
 	{/if}
 </div>

packages/repl/src/lib/Output/PaneWithPanel.svelte

@@ -1,63 +1,117 @@
 <script lang="ts">
-	import { spring } from 'svelte/motion';
+	import { Spring } from 'svelte/motion';
 	import { SplitPane, type Length } from '@rich_harris/svelte-split-pane';
 
 	const UNIT_REGEX = /(\d+)(?:(px|rem|%|em))/i;
 
-	export let panel: string;
+	interface Props {
+		panel: string;
+		pos?: Length;
+		min?: Length;
+		max?: Length;
+		main?: import('svelte').Snippet;
+		header?: import('svelte').Snippet;
+		body?: import('svelte').Snippet;
+	}
 
-	export let pos: Length = '90%';
+	let {
+		panel,
+		pos = $bindable('90%'),
+		min = '4.2rem',
+		max = '-4.2rem',
+		main,
+		header,
+		body
+	}: Props = $props();
 
-	$: previous_pos = Math.min(+pos.replace(UNIT_REGEX, '$1'), 70);
+	let previous_pos = Math.min(normalize(pos), 70);
 
-	export let max: Length = '90%';
+	let container: HTMLElement;
 
 	// we can't bind to the spring itself, but we
 	// can still use the spring to drive `pos`
-	const driver = spring(+pos.replace(UNIT_REGEX, '$1'), {
+	const driver = new Spring(normalize(pos), {
 		stiffness: 0.2,
 		damping: 0.5
 	});
 
-	// @ts-ignore
-	$: pos = $driver + '%';
+	$effect(() => {
+		pos = driver.current + '%';
+	});
 
 	const toggle = () => {
-		const numeric_pos = +pos.replace(UNIT_REGEX, '$1');
+		const pc = normalize(pos);
+		const px = pc * 0.01 * container.clientHeight;
 
-		driver.set(numeric_pos, { hard: true });
+		const open = container.clientHeight - px > 42;
 
-		if (numeric_pos > 80) {
-			driver.set(previous_pos);
-		} else {
-			previous_pos = numeric_pos;
+		driver.set(pc, { hard: true });
+
+		if (open) {
+			previous_pos = pc;
 			driver.set(100);
+		} else {
+			driver.set(previous_pos);
 		}
 	};
+
+	function normalize(pos: string) {
+		let normalized = +pos.replace(UNIT_REGEX, '$1');
+
+		if (normalized < 0) {
+			normalized += 100;
+		}
+
+		return normalized;
+	}
 </script>
 
-<SplitPane {max} min="10%" type="vertical" bind:pos>
-	{#snippet a()}
-		<section>
-			<slot name="main" />
-		</section>
-	{/snippet}
-
-	{#snippet b()}
-		<section>
-			<div class="panel-header">
-				<button class="panel-heading" on:click={toggle}>{panel}</button>
-				<slot name="panel-header" />
-			</div>
-
-			<div class="panel-body">
-				<slot name="panel-body" />
-			</div>
-		</section>
-	{/snippet}
-</SplitPane>
+<div class="container" bind:this={container}>
+	<SplitPane {min} {max} type="vertical" bind:pos>
+		{#snippet a()}
+			<section>
+				{@render main?.()}
+			</section>
+		{/snippet}
+
+		{#snippet b()}
+			<section>
+				<div class="panel-header">
+					<button class="panel-heading raised" onclick={toggle}>
+						<svg
+							width="1.8rem"
+							height="1.8rem"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="m7 15 5 5 5-5" />
+							<path d="m7 9 5-5 5 5" />
+						</svg>
+
+						{panel}
+					</button>
+
+					{@render header?.()}
+				</div>
+
+				<div class="panel-body">
+					{@render body?.()}
+				</div>
+			</section>
+		{/snippet}
+	</SplitPane>
+</div>
 
 <style>
+	.container {
+		width: 100%;
+		height: 100%;
+	}
+
 	.panel-header {
 		height: var(--sk-pane-controls-height);
 		display: flex;
@@ -74,8 +128,13 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		flex: 1;
+		height: 3.2rem;
+		padding: 0 0.8rem;
+		/* flex: 1; */
 		text-align: left;
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
 	}
 
 	section {

packages/repl/src/lib/Output/Viewer.svelte

@@ -295,23 +295,19 @@
 
 <div class="iframe-container">
 	{#if !onLog}
-		<PaneWithPanel pos="100%" max="-4.2rem" panel="Console">
-			<div slot="main">
-				{@render main()}
-			</div>
-
-			<div slot="panel-header">
+		<PaneWithPanel pos="100%" panel="Console" {main}>
+			{#snippet header()}
 				<button class="raised" disabled={logs.length === 0} on:click|stopPropagation={clear_logs}>
 					{#if logs.length > 0}
 						({logs.length})
 					{/if}
 					Clear
 				</button>
-			</div>
+			{/snippet}
 
-			<section slot="panel-body">
+			{#snippet body()}
 				<Console {logs} />
-			</section>
+			{/snippet}
 		</PaneWithPanel>
 	{:else}
 		{@render main()}