@lapikit/repl 0.0.0-insiders.24a3260 → 0.0.0-insiders.2ac5230

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nycolaide <https://github.com/Nycolaide>.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1,87 @@
 # @Lapikit/repl
+
+@lapikit/repl is a Svelte component for Lapikit. It's a add-on package for Lapikit library.
+
+## Installation
+
+```bash
+npm install -D @lapikit/repl
+```
+
+```javascript
+// svelte.config.js
+
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = {
+	preprocess: [vitePreprocess(), lapikitPreprocess({ plugins: ['repl'] })],
+
+	...
+};
+
+export default config;
+```
+
+## Usage
+
+```svelte
+<kit:repl content="console.log('hello')" />
+```
+
+```svelte
+<script lang="ts">
+	import sampleCounter from './samples/counter.svelte?raw';
+	import Counter from './samples/counter.svelte';
+</script>
+
+<kit:repl presentation content={sampleCounter}>
+	<Counter />
+</kit:repl>
+```
+
+```svelte
+<script lang="ts">
+	import sampleJson from './samples/json.json?raw';
+	import sampleCounter from './samples/counter.svelte?raw';
+	import sampleCss from './samples/css.css?raw';
+	import Counter from './samples/counter.svelte';
+</script>
+
+<kit:repl
+	presentation
+	content={{
+		'Counter.svelte': { code: sampleCounter, lang: 'svelte' },
+		'file.json': { code: sampleJson, lang: 'json' },
+		'Styles.css': { code: sampleCss, lang: 'css' }
+	}}
+>
+	<Counter />
+</kit:repl>
+```
+
+```svelte
+<script lang="ts">
+	import sampleJson from './samples/json.json?raw';
+	import sampleCounter from './samples/counter.svelte?raw';
+	import sampleCss from './samples/css.css?raw';
+	import Counter from './samples/counter.svelte';
+</script>
+
+<kit:repl
+	content={{
+		'Counter.svelte': { code: sampleCounter, lang: 'svelte' },
+		'file.json': { code: sampleJson, lang: 'json' },
+		'Styles.css': { code: sampleCss, lang: 'css' }
+	}}
+>
+	<Counter />
+</kit:repl>
+```
+
+## Props
+
+| Prop         | Type                                                      | Default | Description                                                                                                       |
+| ------------ | --------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| content      | string \| Record<string, { code: string; lang?: string }> | ''      | The code content to be displayed in the REPL. It can be a single string or an object representing multiple files. |
+| presentation | boolean                                                   | false   | If true, the REPL will be in presentation mode, showing only the output without the code editor.                  |
+| tiltle       | string                                                    | ''      | The title displayed on the REPL toolbar.                                                                          |

package/dist/Button.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-	let { children, ...rest } = $props();
+	import type { Snippet } from 'svelte';
+
+	let { children, type = 'button', disabled = false, ...rest }: PropsTypeButton = $props();
+
+	type PropsTypeButton = {
+		children?: Snippet;
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		[rest: string]: unknown;
+	};
 </script>
 
-<button {...rest}>
+<button {type} {disabled} {...rest}>
 	{@render children?.()}
 </button>
 
@@ -14,15 +23,15 @@
 		display: flex;
 		align-self: center;
 		justify-content: center;
-		font-size: 0.875rem;
-		border-radius: 0.375rem;
+		font-size: var(--kit-repl-shiki-size);
+		border-radius: var(--kit-repl-radius);
 		transition: background-color 0.2s ease;
 		padding: 8px;
-		color: var(--repl-secondary);
+		color: var(--kit-repl-secondary);
 	}
 
 	button:hover {
-		color: var(--repl-primary);
+		color: var(--kit-repl-primary);
 	}
 
 	button :global(svg) {

package/dist/Button.svelte.d.ts

@@ -1,5 +1,9 @@
+import type { Snippet } from 'svelte';
 declare const Button: import("svelte").Component<{
-    children: any;
-} & Record<string, any>, {}, "">;
+    [rest: string]: unknown;
+    children?: Snippet;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+}, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/Files.svelte

@@ -1,67 +1,64 @@
 <script lang="ts">
 	import type { FilesProps } from './types.js';
-	import { dictionaryIcons } from './utils.js';
+	import { dictionaryIcons, dictionaryPkgIcons } from './utils.js';
 
-	let { files, activeIndex = $bindable() }: FilesProps = $props();
+	let { files, activeIndex = $bindable(), modeState, viewState }: FilesProps = $props();
 </script>
 
-{#if files && files.length > 1}
-	<div>
+{#if modeState !== 'playground' && viewState === 'code' && files && files.length > 1}
+	<div role="tablist" aria-label="Files">
 		{#each files as file, index (index)}
-			<button class:active={activeIndex === index} onclick={() => (activeIndex = index)}>
-				{#if file.lang && dictionaryIcons[file.lang]}
+			<button
+				type="button"
+				role="tab"
+				aria-selected={activeIndex === index}
+				aria-label="Select {file.name}"
+				class:active={activeIndex === index}
+				onclick={() => (activeIndex = index)}
+			>
+				{#if dictionaryPkgIcons[file.name.toLowerCase()]}
+					<img src={dictionaryPkgIcons[file.name.toLowerCase()]} alt="{file.name} icon" />
+				{:else if file.lang && dictionaryIcons[file.lang]}
 					<img src={dictionaryIcons[file.lang]} alt="{file.lang} icon" />
 				{/if}
 				<span>{file.name}</span>
 			</button>
 		{/each}
 	</div>
-
-	<hr />
 {/if}
 
 <style>
 	div {
 		display: flex;
-		gap: calc(var(--repl-spacing) * 2);
-		padding-left: calc(5 * var(--repl-spacing));
-		padding-right: calc(5 * var(--repl-spacing));
-		padding-block: calc(var(--repl-spacing) * 2);
 		overflow-x: auto;
 	}
 
 	button {
 		display: flex;
 		align-items: center;
-		gap: calc(var(--repl-spacing) * 2);
-		padding: calc(var(--repl-spacing) * 2) calc(var(--repl-spacing) * 3);
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
+		padding: 9px 4px;
+		gap: var(--kit-repl-spacing);
+		font-size: var(--kit-repl-shiki-size);
 		transition: all 0.2s ease;
-		border: 1px solid transparent;
+		border: 0;
 		white-space: nowrap;
+		background-color: transparent;
+		border-bottom: 2px solid transparent;
+		cursor: pointer;
 	}
 
 	button img {
 		width: 16px;
 		height: 16px;
+		border: 0;
 	}
 
 	button:hover {
-		background-color: #f5f5f5;
+		border-color: var(--kit-color-accent, var(--kit-repl-secondary));
 	}
 
 	button.active {
-		background-color: #f0f0f0;
-		border-color: #d0d0d0;
-	}
-
-	hr {
-		max-width: calc(100% - 4.5rem);
-		margin-inline-start: calc(4.5rem / 2);
-		display: block;
-		border: thin solid var(--repl-border-color);
-		margin-top: 0;
-		margin-bottom: 0;
+		border-color: var(--kit-color-accent, var(--kit-repl-primary));
+		color: var(--kit-color-accent, var(--kit-repl-primary));
 	}
 </style>

package/dist/Repl.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { copyToClipboard } from './utils.js';
 	import { getHighlighterSingleton } from './shiki.js';
+	import { createTheme } from 'lapikit/actions';
 	import type { FileItem, ReplProps } from './types.js';
 
 	// components
@@ -13,14 +14,25 @@
 	let ref: null | HTMLElement = $state(null);
 
 	// states
-	let language = $state('javascript');
+	let language = $state('sh');
 
 	let modeState: 'code' | 'playground' | 'mixed' = $state('code');
 	let copyState = $state(false);
 	let viewState: 'code' | 'preview' = $state('code');
-	let themeState: 'light' | 'dark' = $state('light');
 
-	let codeHTML = $state('');
+	// 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.
+	const theme = createTheme();
+	let themeOverridden = $state(false);
+	let themeState = $derived<'light' | 'dark'>(theme.active === 'dark' ? 'dark' : 'light');
+
+	function toggleTheme() {
+		themeOverridden = true;
+		theme.set(themeState === 'dark' ? 'light' : 'dark');
+	}
+
+	let codeHTML = $state<string | null>(null);
 	let activeFileIndex = $state(0);
 
 	let files = $derived.by<FileItem[]>(() => {
@@ -29,7 +41,7 @@
 				{
 					name: title || 'code',
 					content: content.code,
-					lang: content.lang || 'javascript'
+					lang: content.lang || 'sh'
 				}
 			];
 		}
@@ -44,7 +56,7 @@
 				lang:
 					typeof fileContent === 'object'
 						? ((fileContent as Record<string, unknown>).lang as string)
-						: 'javascript'
+						: 'sh'
 			}));
 		}
 
@@ -52,11 +64,11 @@
 			return content.map((item) => ({
 				name: item.name,
 				content: item.content || item.code || '',
-				lang: item.lang || 'javascript'
+				lang: item.lang || 'sh'
 			}));
 		}
 
-		return [{ name: 'code', content: content || '', lang: 'javascript' }];
+		return [{ name: 'code', content: content || '', lang: 'sh' }];
 	});
 	let activeFile = $derived(files[activeFileIndex]);
 
@@ -91,105 +103,180 @@
 
 	$effect(() => {
 		const file = activeFile;
-		const theme = themeState;
 
 		if (file?.content) {
+			codeHTML = null;
+			language = file.lang || 'sh';
+
 			(async () => {
 				const highlighter = await getHighlighterSingleton();
-
-				language = file.lang || 'javascript';
 				const html = highlighter.codeToHtml(file.content, {
-					theme: theme === 'light' ? 'github-light' : 'github-dark',
+					themes: { light: 'github-light', dark: 'github-dark' },
+					defaultColor: false,
 					lang: file.lang || language
 				});
-
 				codeHTML = html;
 			})();
 		}
 	});
 </script>
 
-<div class="repl-container">
-	<Toolbar
-		{title}
-		{language}
-		{presentation}
-		bind:copyState
-		bind:viewState
-		bind:themeState
-		bind:modeState
-	/>
-
-	{#if modeState !== 'code'}
-		<hr />
-	{/if}
-
+<div class="kit-repl" use:theme.action={{ overridden: themeOverridden }}>
 	{#if presentation}
-		<div class="repl-content">
-			<div>{@render children?.()}</div>
+		<div class="kit-repl-content" class:kit-repl-content--playground={presentation}>
+			<div class="wrapper-playground">
+				{@render children?.()}
+			</div>
 		</div>
-
-		<hr />
 	{/if}
 
-	<Files {files} bind:activeIndex={activeFileIndex} />
+	<div class="kit-repl-container">
+		<Toolbar
+			{title}
+			{language}
+			{presentation}
+			{files}
+			{themeState}
+			onToggleTheme={toggleTheme}
+			bind:copyState
+			bind:viewState
+			bind:modeState
+		>
+			<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
+		</Toolbar>
+
+		{#if modeState !== 'code'}
+			<hr />
+		{/if}
 
-	<div class="repl-content">
-		{#if viewState === 'code'}
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			<div class="wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
-		{:else}
-			<div>{@render children?.()}</div>
+		{#if title}
+			<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
 		{/if}
+
+		<div
+			class="kit-repl-content"
+			class:kit-repl-content--code={viewState === 'code' && !presentation}
+		>
+			{#if viewState === 'code'}
+				<div class="kit-repl-wrapper-highlight" bind:this={ref}>
+					{#if codeHTML !== null}
+						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+						{@html codeHTML}
+					{:else}
+						<pre class="kit-repl-raw"><code>{activeFile?.content ?? ''}</code></pre>
+					{/if}
+				</div>
+			{:else}
+				<div class="kit-repl-wrapper-playground">
+					{@render children?.()}
+				</div>
+			{/if}
+		</div>
 	</div>
 </div>
 
 <style>
-	div.repl-container {
-		--repl-spacing: 0.25rem;
-		--repl-radius: 1rem;
-		--repl-shiki-size: 1rem;
-		--repl-shiki-tab-size: 2;
-
-		--repl-background: #f9f9f9;
-		--repl-border-color: #ebebeb;
+	.kit-repl {
+		/* ui */
+		--kit-repl-spacing: var(--kit-space-default, 4px);
+		--kit-repl-radius: var(--kit-shape-md, 10px);
 
-		--repl-primary: #0d0d34;
-		--repl-secondary: #8f8f8f;
+		/* shiki override */
+		--kit-repl-shiki-size: var(--kit-font-xs, 13px);
+		--kit-repl-shiki-tab-size: 2;
 
-		background-color: var(--repl-background);
-		border-radius: var(--repl-radius);
-		border: 2px solid var(--repl-border-color);
+		/* colors */
+		--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);
+		--kit-repl-secondary: var(--kit-color-text-muted, #8f8f8f);
+	}
+	.kit-repl-container {
+		background-color: var(--kit-repl-background);
+		border-radius: var(--kit-repl-radius);
+		border: 1px solid var(--kit-repl-border-color);
 	}
 
-	div.repl-container :global(pre) {
-		background-color: var(--repl-background) !important;
+	.kit-repl-container :global(pre) {
+		background-color: var(--kit-repl-background) !important;
+		border: 0 !important;
+		border-radius: 0 !important;
+		border-bottom-left-radius: var(--kit-repl-radius) !important;
+		border-bottom-right-radius: var(--kit-repl-radius) !important;
+		padding: 10px 0 !important;
+		margin-bottom: 0 !important;
+		margin-top: 0 !important;
+		font-size: var(--kit-repl-shiki-size) !important;
 	}
 
-	.repl-content {
+	.kit-repl-content {
 		display: flow-root;
-		margin-top: calc(var(--repl-spacing) * 0);
-		padding-right: calc(10 * var(--repl-spacing));
-		padding-left: calc(5 * var(--repl-spacing));
-		padding-bottom: calc(4 * var(--repl-spacing));
-		padding-top: calc(3 * var(--repl-spacing));
+		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));
+		padding-bottom: calc(4 * var(--kit-repl-spacing));
+		padding-top: calc(3 * var(--kit-repl-spacing)); */
 		position: relative;
 	}
 
+	.kit-repl-content--code {
+		padding-top: 0;
+	}
+
+	.kit-repl-content--playground {
+		padding-top: calc(4 * var(--kit-repl-spacing));
+		padding-bottom: calc(10 * var(--kit-repl-spacing));
+	}
+
 	hr {
-		max-width: calc(100% - 4.5rem);
-		margin-inline-start: calc(4.5rem / 2);
+		max-width: calc(100% - 2.5rem);
+		margin-inline-start: calc(2.5rem / 2);
 		display: block;
-		border: thin solid var(--repl-border-color);
+		border: thin solid var(--kit-repl-border-color);
 		margin-top: 0;
 		margin-bottom: 0;
 	}
 
-	div.repl-container .wrapper-highlight :global(pre code) {
-		font-size: var(--repl-shiki-size);
-		-moz-tab-size: var(--repl-shiki-tab-size);
-		tab-size: var(--repl-shiki-tab-size);
+	.kit-repl-raw {
+		font-size: var(--kit-repl-shiki-size);
+		-moz-tab-size: var(--kit-repl-shiki-tab-size);
+		tab-size: var(--kit-repl-shiki-tab-size);
+		white-space: pre-wrap;
+		word-break: break-word;
+		margin: 0;
+		padding: 0;
+	}
+
+	div.kit-repl-container .kit-repl-wrapper-highlight :global(pre code) {
+		font-size: var(--kit-repl-shiki-size);
+		-moz-tab-size: var(--kit-repl-shiki-tab-size);
+		tab-size: var(--kit-repl-shiki-tab-size);
 		white-space: pre-wrap;
 		word-break: break-word;
 	}
+
+	/* shiki dual-theme: follows the ambient lapikit theme (light/dark/system) */
+	.kit-repl-wrapper-highlight :global(.shiki),
+	.kit-repl-wrapper-highlight :global(.shiki span) {
+		color: var(--shiki-light);
+	}
+
+	:global([data-kit-theme='dark']) .kit-repl-wrapper-highlight :global(.shiki),
+	:global([data-kit-theme='dark']) .kit-repl-wrapper-highlight :global(.shiki span) {
+		color: var(--shiki-dark);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global([data-kit-theme='system']) .kit-repl-wrapper-highlight :global(.shiki),
+		:global([data-kit-theme='system']) .kit-repl-wrapper-highlight :global(.shiki span) {
+			color: var(--shiki-dark);
+		}
+	}
+
+	div.kit-repl-container .kit-repl-wrapper-playground {
+		background-color: var(--kit-repl-background);
+		border-radius: var(--kit-repl-radius);
+		padding: calc(4 * var(--kit-repl-spacing));
+	}
 </style>

package/dist/Toolbar.svelte

@@ -5,12 +5,15 @@
 	import { Copy, Check, Code, Codesandbox, Moon, Sun } from '@lucide/svelte';
 
 	let {
+		children,
 		title,
 		language,
 		presentation,
+		files,
 		copyState = $bindable(),
 		viewState = $bindable(),
-		themeState = $bindable(),
+		themeState,
+		onToggleTheme,
 		modeState = $bindable()
 	}: ToolbarProps = $props();
 
@@ -19,18 +22,28 @@
 	);
 </script>
 
-<div class="lpk-repl--toolbar">
-	<div class="lpk-repl--toolbar-title">
-		{#if title}
+<div class="kit-repl--toolbar">
+	{#if title}
+		<div class="kit-repl--toolbar-title" class:kit-repl--toolbar-title--title={title}>
 			<span>{title}</span>
-		{:else if language}
+		</div>
+	{:else if files && files.length > 1}
+		<div class="kit-repl--toolbar-files">
+			{@render children?.()}
+		</div>
+	{:else if language}
+		<div class="kit-repl--toolbar-title" class:kit-repl--toolbar-title--language={language}>
 			<span>{languageKey}</span>
-		{/if}
-	</div>
+		</div>
+	{/if}
 
-	<div class="lpk-repl--toolbar-actions">
+	<div class="kit-repl--toolbar-actions">
 		{#if (modeState !== 'code' && viewState === 'preview') || presentation}
-			<Button onclick={() => (themeState = themeState === 'light' ? 'dark' : 'light')}>
+			<Button
+				aria-label={themeState === 'light' ? 'Switch to dark theme' : 'Switch to light theme'}
+				aria-pressed={themeState === 'dark'}
+				onclick={() => onToggleTheme?.()}
+			>
 				{#if themeState === 'light'}
 					<Moon />
 				{:else}
@@ -40,7 +53,11 @@
 		{/if}
 
 		{#if modeState === 'mixed' && !presentation}
-			<Button onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}>
+			<Button
+				aria-label={viewState === 'code' ? 'Show preview' : 'Show code'}
+				aria-pressed={viewState === 'preview'}
+				onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}
+			>
 				{#if viewState === 'code'}
 					<Code />
 				{:else}
@@ -50,7 +67,10 @@
 		{/if}
 
 		{#if modeState !== 'playground'}
-			<Button onclick={() => (copyState = true)}>
+			<Button
+				aria-label={copyState ? 'Code copied' : 'Copy code'}
+				onclick={() => (copyState = true)}
+			>
 				{#if copyState}
 					<Check />
 				{:else}
@@ -62,32 +82,46 @@
 </div>
 
 <style>
-	.lpk-repl--toolbar {
-		display: flex;
+	.kit-repl--toolbar {
+		display: grid;
 		align-items: center;
-		justify-content: space-between;
-		gap: calc(var(--repl-spacing) * 3);
-		padding-left: calc(5 * var(--repl-spacing));
-		padding-right: calc(var(--repl-spacing) * 2);
-		padding-block: calc(var(--repl-spacing) * 1.5);
-		border-top-left-radius: var(--repl-radius);
-		border-top-right-radius: var(--repl-radius);
+		grid-template-columns: 1fr auto;
+		padding-left: calc(var(--kit-repl-spacing) * 2);
+		background-color: color-mix(in oklab, var(--kit-repl-background) 95%, black);
+		border-top-left-radius: var(--kit-repl-radius);
+		border-top-right-radius: var(--kit-repl-radius);
+		gap: var(--kit-repl-spacing);
 		min-height: 36px;
 	}
 
-	.lpk-repl--toolbar .lpk-repl--toolbar-title {
+	.kit-repl--toolbar .kit-repl--toolbar-title {
 		display: flex;
 		align-items: center;
-		gap: calc(var(--repl-spacing) * 2);
-		font-weight: 600;
-		color: var(--repl-secondary);
+		gap: calc(var(--kit-repl-spacing) * 2);
 		max-width: 80%;
 		min-width: 0;
 	}
 
-	.lpk-repl--toolbar .lpk-repl--toolbar-actions {
+	.kit-repl--toolbar-title--language {
+		font-size: var(--kit-repl-shiki-size);
+		line-height: 1;
+		color: var(--kit-color-text-muted);
+	}
+
+	.kit-repl--toolbar-title--title {
+		font-size: var(--kit-repl-shiki-size);
+		line-height: 1;
+		color: var(--kit-color-text-muted);
+	}
+
+	.kit-repl--toolbar .kit-repl--toolbar-actions {
 		display: flex;
 		align-items: center;
-		gap: calc(var(--repl-spacing) * 2);
+		gap: calc(var(--kit-repl-spacing) * 2);
+	}
+
+	.kit-repl--toolbar .kit-repl--toolbar-files {
+		width: 100%;
+		overflow-x: auto;
 	}
 </style>

package/dist/Toolbar.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ToolbarProps } from './types.js';
-declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "copyState" | "viewState" | "themeState" | "modeState">;
+declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "modeState" | "viewState" | "copyState">;
 type Toolbar = ReturnType<typeof Toolbar>;
 export default Toolbar;

package/dist/index.d.ts

@@ -1 +1 @@
-export { default as KitCode } from './Repl.svelte';
+export { default as KitRepl } from './Repl.svelte';

package/dist/index.js

@@ -1,2 +1,2 @@
 // components
-export { default as KitCode } from './Repl.svelte';
+export { default as KitRepl } from './Repl.svelte';

package/dist/pkg/bun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M113.744 41.999a18.558 18.558 0 0 0-.8-.772c-.272-.246-.528-.524-.8-.771s-.528-.525-.8-.771c-.272-.247-.528-.525-.8-.772s-.528-.524-.8-.771-.528-.525-.8-.772-.528-.524-.8-.771c7.936 7.52 12.483 17.752 12.656 28.481 0 25.565-26.912 46.363-60 46.363-18.528 0-35.104-6.526-46.128-16.756l.8.772.8.771.8.772.8.771.8.772.8.771.8.771c11.008 10.662 27.952 17.527 46.928 17.527 33.088 0 60-20.797 60-46.285 0-10.893-4.864-21.215-13.456-29.33z"/><path fill="#fbf0df" d="M116.8 65.08c0 23.467-25.072 42.49-56 42.49s-56-19.023-56-42.49c0-14.55 9.6-27.401 24.352-35.023C43.904 22.435 53.088 14.628 60.8 14.628S75.104 21 92.448 30.058C107.2 37.677 116.8 50.53 116.8 65.08Z"/><path fill="#f6dece" d="M116.8 65.08a32.314 32.314 0 0 0-1.28-8.918c-4.368 51.377-69.36 53.846-94.912 38.48 11.486 8.584 25.66 13.144 40.192 12.928 30.88 0 56-19.054 56-42.49z"/><path fill="#fffefc" d="M39.248 27.234c7.152-4.135 16.656-11.896 26-11.911a15.372 15.372 0 0 0-4.448-.695c-3.872 0-8 1.93-13.2 4.83-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08v1.836c9.696-33.033 27.312-35.547 34.448-39.682z"/><path fill="#ccbea7" d="M56.192 18.532A24.553 24.553 0 0 1 53.867 29.1a25.407 25.407 0 0 1-6.683 8.671c-.448.386-.096 1.127.48.91 5.392-2.02 12.672-8.068 9.6-20.272-.128-.695-1.072-.51-1.072.123zm3.632 0a24.474 24.474 0 0 1 3.646 10.12c.445 3.587.08 7.224-1.07 10.662-.192.54.496 1.003.88.556 3.504-4.32 6.56-12.899-2.592-22.156-.464-.4-1.184.216-.864.756zm4.416-.262a25.702 25.702 0 0 1 7.521 7.925A24.71 24.71 0 0 1 75.2 36.414c-.016.13.02.26.101.365a.543.543 0 0 0 .718.117.509.509 0 0 0 .221-.313c1.472-5.384.64-14.564-11.472-19.332-.64-.246-1.056.587-.528.957zM34.704 34.315a27.418 27.418 0 0 0 9.91-5.222 26.262 26.262 0 0 0 6.842-8.663c.288-.556 1.2-.34 1.056.277-2.768 12.343-12.032 14.92-17.792 14.58-.608.016-.592-.802-.016-.972z"/><path d="M60.8 111.443c-33.088 0-60-20.798-60-46.363 0-15.429 9.888-29.823 26.448-38.448 4.8-2.469 8.912-4.953 12.576-7.128 2.016-1.203 3.92-2.33 5.76-3.379C51.2 12.916 56 10.771 60.8 10.771c4.8 0 8.992 1.852 14.24 4.845 1.6.88 3.2 1.836 4.912 2.885 3.984 2.376 8.48 5.06 14.4 8.131 16.56 8.625 26.448 23.004 26.448 38.448 0 25.565-26.912 46.363-60 46.363zm0-96.814c-3.872 0-8 1.928-13.2 4.829-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08c0 23.436 25.12 42.506 56 42.506s56-19.07 56-42.506c0-14.01-9.104-27.108-24.352-35.023-6.048-3.086-10.768-5.986-14.592-8.27-1.744-1.033-3.344-1.99-4.8-2.838-4.848-2.778-8.384-4.32-12.256-4.32z"/><path fill="#b71422" d="M72.08 76.343c-.719 2.839-2.355 5.383-4.672 7.267a11.07 11.07 0 0 1-6.4 2.9 11.13 11.13 0 0 1-6.608-2.9c-2.293-1.892-3.906-4.436-4.608-7.267a1.073 1.073 0 0 1 .05-.5 1.11 1.11 0 0 1 .272-.428 1.19 1.19 0 0 1 .958-.322h19.744a1.185 1.185 0 0 1 .947.33 1.073 1.073 0 0 1 .317.92z"/><path fill="#ff6164" d="M54.4 83.733a11.24 11.24 0 0 0 6.592 2.932 11.239 11.239 0 0 0 6.576-2.932 16.652 16.652 0 0 0 1.6-1.65 10.904 10.904 0 0 0-3.538-2.564 11.26 11.26 0 0 0-4.302-1 10.121 10.121 0 0 0-4.549 1.192 9.71 9.71 0 0 0-3.451 3.097c.368.323.688.632 1.072.925z"/><path d="M54.656 82.514a8.518 8.518 0 0 1 2.97-2.347 8.836 8.836 0 0 1 3.734-.862 9.78 9.78 0 0 1 6.4 2.608c.368-.386.72-.787 1.056-1.188-2.035-1.87-4.726-2.933-7.536-2.978a10.487 10.487 0 0 0-4.335.975 10.125 10.125 0 0 0-3.489 2.666c.378.396.779.772 1.2 1.126z"/><path d="M60.944 87.436a12.078 12.078 0 0 1-7.12-3.086c-2.477-2.02-4.22-4.75-4.976-7.791-.054-.27-.045-.55.027-.817a1.83 1.83 0 0 1 .389-.726 2.25 2.25 0 0 1 .81-.595 2.32 2.32 0 0 1 .998-.192h19.744c.343-.007.683.06.996.196a2.3 2.3 0 0 1 .812.591c.182.212.313.46.382.728.07.267.076.545.018.815-.756 3.042-2.5 5.771-4.976 7.791a12.078 12.078 0 0 1-7.104 3.086zm-9.872-11.417c-.256 0-.32.108-.336.139.676 2.638 2.206 4.999 4.368 6.742a10.122 10.122 0 0 0 5.84 2.7 10.207 10.207 0 0 0 5.84-2.67c2.155-1.745 3.679-4.106 4.352-6.741a.333.333 0 0 0-.14-.113.348.348 0 0 0-.18-.026z"/><path fill="#febbd0" d="M85.152 77.3c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307zm-48.432 0c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307z"/><path d="M41.12 69.863a9.052 9.052 0 0 0 4.902-1.425 8.578 8.578 0 0 0 3.254-3.812 8.22 8.22 0 0 0 .508-4.913 8.41 8.41 0 0 0-2.408-4.357 8.92 8.92 0 0 0-4.514-2.33 9.12 9.12 0 0 0-5.096.48 8.755 8.755 0 0 0-3.96 3.131 8.287 8.287 0 0 0-1.486 4.725c0 2.252.927 4.412 2.577 6.005 1.65 1.594 3.888 2.492 6.223 2.496zm39.632 0a9.054 9.054 0 0 0 4.915-1.403 8.582 8.582 0 0 0 3.275-3.802 8.22 8.22 0 0 0 .528-4.917 8.408 8.408 0 0 0-2.398-4.368 8.92 8.92 0 0 0-4.512-2.344 9.12 9.12 0 0 0-5.103.473 8.756 8.756 0 0 0-3.967 3.13 8.287 8.287 0 0 0-1.49 4.73c-.004 2.245.914 4.4 2.555 5.994 1.64 1.593 3.869 2.495 6.197 2.507z"/><path fill="#fff" d="M38.4 61.902a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .844.347 1.654.964 2.253a3.374 3.374 0 0 0 2.332.94zm39.632 0a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .84.342 1.644.953 2.242.61.598 1.44.94 2.311.952z"/></svg>

package/dist/pkg/npm.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+		<g>
+				<polygon fill="#C12127" points="0 256 0 0 256 0 256 256">
+
+				<polygon fill="#FFFFFF" points="48 48 208 48 208 208 176 208 176 80 128 80 128 208 48 208">
+
+		</g>
+</svg>

package/dist/pkg/yarn.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_yarn</title><path d="M28.208,24.409a10.493,10.493,0,0,0-3.959,1.822,23.743,23.743,0,0,1-5.835,2.642,1.632,1.632,0,0,1-.983.55A62.228,62.228,0,0,1,10.984,30c-1.163.009-1.876-.3-2.074-.776a1.573,1.573,0,0,1,.866-2.074,3.759,3.759,0,0,1-.514-.379c-.171-.171-.352-.514-.406-.388-.225.55-.343,1.894-.947,2.5-.83.839-2.4.559-3.328.072-1.019-.541.072-1.813.072-1.813a.73.73,0,0,1-.992-.343,4.847,4.847,0,0,1-.667-2.949,5.374,5.374,0,0,1,1.749-2.895,9.334,9.334,0,0,1,.658-4.4,10.445,10.445,0,0,1,3.165-3.661S6.628,10.747,7.35,8.817c.469-1.262.658-1.253.812-1.308a3.633,3.633,0,0,0,1.452-.857,5.265,5.265,0,0,1,4.41-1.7S15.2,1.4,16.277,2.09a18.349,18.349,0,0,1,1.533,2.886s1.281-.748,1.425-.469a11.334,11.334,0,0,1,.523,6.132,14.01,14.01,0,0,1-2.6,5.411c-.135.225,1.551.938,2.615,3.887.983,2.7.108,4.96.262,5.212.027.045.036.063.036.063s1.127.09,3.391-1.308A8.5,8.5,0,0,1,27.739,22.3a1.081,1.081,0,0,1,.469,2.11Z" style="fill:#2188b6"/></svg>

package/dist/shiki.js

@@ -1,11 +1,14 @@
 import { createHighlighter } from 'shiki';
-let highlighter;
+let highlighter = null;
+const highlighterPromise = createHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: ['svelte', 'typescript', 'javascript', 'html', 'css', 'json', 'bash']
+}).then((h) => {
+    highlighter = h;
+    return h;
+});
 export async function getHighlighterSingleton() {
-    if (!highlighter) {
-        highlighter = await createHighlighter({
-            themes: ['github-light', 'github-dark'],
-            langs: ['svelte', 'typescript', 'javascript', 'html', 'css', 'json', 'bash']
-        });
-    }
-    return highlighter;
+    if (highlighter)
+        return highlighter;
+    return highlighterPromise;
 }

package/dist/types.d.ts

@@ -12,11 +12,16 @@ export interface ToolbarProps {
     presentation?: boolean;
     viewState?: 'code' | 'preview';
     themeState?: 'light' | 'dark';
+    onToggleTheme?: () => void;
     modeState?: 'code' | 'playground' | 'mixed';
+    children?: Snippet;
+    files?: FileItem[];
 }
 export interface FilesProps {
     files?: FileItem[];
     activeIndex: number;
+    viewState: 'code' | 'preview';
+    modeState: 'code' | 'playground' | 'mixed';
 }
 export interface FileItem {
     name: string;

package/dist/utils.d.ts

@@ -5,3 +5,6 @@ export declare const dictionary: {
 export declare const dictionaryIcons: {
     [key: string]: string;
 };
+export declare const dictionaryPkgIcons: {
+    [key: string]: string;
+};

package/dist/utils.js

@@ -4,6 +4,9 @@ import svelte from './languages/svelte.svg';
 import css from './languages/css.svg';
 import html from './languages/html.svg';
 import shell from './languages/shell.svg';
+import npm from './pkg/npm.svg';
+import yarn from './pkg/yarn.svg';
+import bun from './pkg/bun.svg';
 export const copyToClipboard = (value) => {
     if (navigator.clipboard && window.isSecureContext) {
         navigator.clipboard
@@ -59,3 +62,8 @@ export const dictionaryIcons = {
     htm: html,
     json: shell
 };
+export const dictionaryPkgIcons = {
+    npm,
+    yarn,
+    bun
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapikit/repl",
-  "version": "0.0.0-insiders.24a3260",
+  "version": "0.0.0-insiders.2ac5230",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -9,10 +9,12 @@
     "name": "Nycolaide",
     "email": "contact@lapikit.dev"
   },
+  "homepage": "https://lapikit.dev",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Nycolaide/lapikit.git"
+    "url": "git+https://github.com/lapikit/lapikit-repl.git"
   },
+  "funding": "https://buymeacoffee.com/nycolaide",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -45,7 +47,8 @@
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",
-    "svelte": "^5.0.0"
+    "svelte": "^5.0.0",
+    "lapikit": "^0.6.7"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",