@lapikit/repl 0.0.0-insiders.2ac5230 → 0.0.0-insiders.417ad1f

package/dist/Repl.svelte

@@ -21,8 +21,9 @@
 	let viewState: 'code' | 'preview' = $state('code');
 
 	// theme: mirrors the ambient lapikit theme (light/dark/system) until the
-	// toolbar toggle is used, at which point it becomes a local override
-	// scoped to this repl instance only.
+	// toolbar toggle is used. The override only applies to the rendered
+	// children/preview area — the toolbar and shiki code always follow
+	// the ambient theme.
 	const theme = createTheme();
 	let themeOverridden = $state(false);
 	let themeState = $derived<'light' | 'dark'>(theme.active === 'dark' ? 'dark' : 'light');
@@ -121,10 +122,10 @@
 	});
 </script>
 
-<div class="kit-repl" use:theme.action={{ overridden: themeOverridden }}>
+<div class="kit-repl">
 	{#if presentation}
 		<div class="kit-repl-content" class:kit-repl-content--playground={presentation}>
-			<div class="wrapper-playground">
+			<div class="wrapper-playground" use:theme.action={{ overridden: themeOverridden }}>
 				{@render children?.()}
 			</div>
 		</div>
@@ -145,9 +146,9 @@
 			<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
 		</Toolbar>
 
-		{#if modeState !== 'code'}
+		<!-- {#if modeState !== 'code'}
 			<hr />
-		{/if}
+		{/if} -->
 
 		{#if title}
 			<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
@@ -167,7 +168,7 @@
 					{/if}
 				</div>
 			{:else}
-				<div class="kit-repl-wrapper-playground">
+				<div class="kit-repl-wrapper-playground" use:theme.action={{ overridden: themeOverridden }}>
 					{@render children?.()}
 				</div>
 			{/if}
@@ -186,6 +187,7 @@
 		--kit-repl-shiki-tab-size: 2;
 
 		/* colors */
+		--kit-repl-playground: var(--kit-color-surface, #fbfbfb);
 		--kit-repl-background: var(--kit-color-surface-1, #f9f9f9);
 		--kit-repl-border-color: var(--kit-color-fill, #ebebeb);
 		--kit-repl-primary: var(--kit-color-text, #0d0d34);
@@ -211,7 +213,7 @@
 
 	.kit-repl-content {
 		display: flow-root;
-		padding-left: calc(var(--kit-repl-spacing) * 2);
+		/* padding-left: calc(var(--kit-repl-spacing) * 2); */
 		/* margin-top: calc(var(--kit-repl-spacing) * 0); */
 		/* padding-right: calc(10 * var(--kit-repl-spacing));
 		padding-left: calc(5 * var(--kit-repl-spacing));
@@ -222,6 +224,7 @@
 
 	.kit-repl-content--code {
 		padding-top: 0;
+		padding-left: calc(var(--kit-repl-spacing) * 2);
 	}
 
 	.kit-repl-content--playground {
@@ -229,14 +232,14 @@
 		padding-bottom: calc(10 * var(--kit-repl-spacing));
 	}
 
-	hr {
+	/* hr {
 		max-width: calc(100% - 2.5rem);
 		margin-inline-start: calc(2.5rem / 2);
 		display: block;
 		border: thin solid var(--kit-repl-border-color);
 		margin-top: 0;
 		margin-bottom: 0;
-	}
+	} */
 
 	.kit-repl-raw {
 		font-size: var(--kit-repl-shiki-size);
@@ -275,8 +278,10 @@
 	}
 
 	div.kit-repl-container .kit-repl-wrapper-playground {
-		background-color: var(--kit-repl-background);
-		border-radius: var(--kit-repl-radius);
+		background-color: var(--kit-repl-playground);
+		/* border-radius: var(--kit-repl-radius); */
+		border-bottom-left-radius: var(--kit-repl-radius);
+		border-bottom-right-radius: var(--kit-repl-radius);
 		padding: calc(4 * var(--kit-repl-spacing));
 	}
 </style>

package/dist/Toolbar.svelte

@@ -59,9 +59,9 @@
 				onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}
 			>
 				{#if viewState === 'code'}
-					<Code />
-				{:else}
 					<Codesandbox />
+				{:else}
+					<Code />
 				{/if}
 			</Button>
 		{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapikit/repl",
-  "version": "0.0.0-insiders.2ac5230",
+  "version": "0.0.0-insiders.417ad1f",
   "license": "MIT",
   "publishConfig": {
     "access": "public"