@lapikit/repl 0.0.1 → 0.0.3

package/README.md

@@ -1 +1,93 @@
 # @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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	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 {type} {disabled} {...rest}>
+	{@render children?.()}
+</button>
+
+<style>
+	button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		display: flex;
+		align-self: center;
+		justify-content: center;
+		font-size: 0.875rem;
+		border-radius: 0.375rem;
+		transition: background-color 0.2s ease;
+		padding: 8px;
+		color: var(--kit-repl-secondary);
+	}
+
+	button:hover {
+		color: var(--kit-repl-primary);
+	}
+
+	button :global(svg) {
+		height: 20px;
+		width: 20px;
+	}
+</style>

package/dist/Button.svelte.d.ts

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

package/dist/Files.svelte

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

package/dist/Files.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FilesProps } from './types.js';
+declare const Files: import("svelte").Component<FilesProps, {}, "activeIndex">;
+type Files = ReturnType<typeof Files>;
+export default Files;

package/dist/Repl.svelte

@@ -1,39 +1,35 @@
 <script lang="ts">
 	import { copyToClipboard } from './utils.js';
+	import { getHighlighterSingleton } from './shiki.js';
+	import type { FileItem, ReplProps } from './types.js';
 
-	import { Copy, Check, Code, Codesandbox, Moon, Sun } from '@lucide/svelte';
+	// components
+	import Toolbar from './Toolbar.svelte';
+	import Files from './Files.svelte';
 
-	import CodeIcon from './assets/languages/code.svg';
-	import JavaScriptIcon from './assets/languages/javascript.svg';
-	import TypeScriptIcon from './assets/languages/typescript.svg';
-	import SvelteIcon from './assets/languages/svelte.svg';
-	import CssIcon from './assets/languages/css.svg';
-	import HtmlIcon from './assets/languages/html.svg';
-	import { getHighlighterSingleton } from './shiki.js';
+	let { title, content, children, presentation }: ReplProps = $props();
 
-	interface FileItem {
-		name: string;
-		content: string;
-		lang?: string;
-	}
+	// refs
+	let ref: null | HTMLElement = $state(null);
 
-	let { title, content, children } = $props();
-	let codeHTML = $state('');
+	// states
+	let language = $state('sh');
+
+	let modeState: 'code' | 'playground' | 'mixed' = $state('code');
 	let copyState = $state(false);
-	let viewMode = $state('editor');
-	let themeMode = $state('light');
+	let viewState: 'code' | 'preview' = $state('code');
+	let themeState: 'light' | 'dark' = $state('light');
 
-	let ref: null | HTMLElement = $state(null);
-	let typeContent = $state('code');
+	let codeHTML = $state('');
+	let activeFileIndex = $state(0);
 
-	// multiple content types
 	let files = $derived.by<FileItem[]>(() => {
 		if (typeof content === 'object' && content !== null && 'code' in content) {
 			return [
 				{
 					name: title || 'code',
 					content: content.code,
-					lang: content.lang || 'javascript'
+					lang: content.lang || 'sh'
 				}
 			];
 		}
@@ -41,8 +37,14 @@
 		if (typeof content === 'object' && content !== null && !Array.isArray(content)) {
 			return Object.entries(content).map(([name, fileContent]) => ({
 				name,
-				content: typeof fileContent === 'string' ? fileContent : (fileContent as any).code || '',
-				lang: typeof fileContent === 'object' ? (fileContent as any).lang : 'javascript'
+				content:
+					typeof fileContent === 'string'
+						? fileContent
+						: (fileContent as Record<string, unknown>).code || '',
+				lang:
+					typeof fileContent === 'object'
+						? ((fileContent as Record<string, unknown>).lang as string)
+						: 'sh'
 			}));
 		}
 
@@ -50,27 +52,29 @@
 			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 activeFileIndex = $state(0);
 	let activeFile = $derived(files[activeFileIndex]);
-	let hasMultipleFiles = $derived(files.length > 1);
-
-	let iconMap = {
-		code: CodeIcon,
-		javascript: JavaScriptIcon,
-		typescript: TypeScriptIcon,
-		svelte: SvelteIcon,
-		css: CssIcon,
-		html: HtmlIcon
-	} as const;
 
-	let currentIcon = $derived(iconMap[typeContent as keyof typeof iconMap] || CodeIcon);
+	$effect.pre(() => {
+		if (children && content && !presentation) {
+			modeState = 'mixed';
+			viewState = 'preview';
+		} else if (presentation) {
+			modeState = 'mixed';
+			viewState = 'code';
+		} else if (children && !content) {
+			modeState = 'playground';
+			viewState = 'preview';
+		} else {
+			modeState = 'code';
+			viewState = 'code';
+		}
+	});
 
 	$effect(() => {
 		if (copyState) {
@@ -87,16 +91,16 @@
 
 	$effect(() => {
 		const file = activeFile;
-		const theme = themeMode;
+		const theme = themeState;
 
 		if (file?.content) {
 			(async () => {
-				console.log('Rendering file:', file);
 				const highlighter = await getHighlighterSingleton();
 
+				language = file.lang || 'sh';
 				const html = highlighter.codeToHtml(file.content, {
 					theme: theme === 'light' ? 'github-light' : 'github-dark',
-					lang: file.lang || 'javascript'
+					lang: file.lang || language
 				});
 
 				codeHTML = html;
@@ -105,235 +109,121 @@
 	});
 </script>
 
-<div class="repl-container">
-	<div class="repl-toolbar">
-		<div class="repl-toolbar--title">
-			<img src={currentIcon} alt="{typeContent} icon" class="toolbar-icon" />
-			<span>{title || 'REPL Toolbar'}</span>
-		</div>
-
-		<div class="repl-toolbar--actions">
-			{#if viewMode !== 'editor'}
-				<button
-					class="repl-btn--icon"
-					onclick={() => (themeMode = themeMode === 'light' ? 'dark' : 'light')}
-					title="Toggle Theme"
-				>
-					{#if themeMode === 'light'}
-						<Moon class="toolbar-icon" />
-					{:else}
-						<Sun class="toolbar-icon" />
-					{/if}
-				</button>
-			{/if}
-			<button
-				class="repl-btn--icon"
-				title={viewMode === 'editor' ? 'Code' : 'Playground'}
-				onclick={() => (viewMode = viewMode === 'editor' ? 'playground' : 'editor')}
-			>
-				{#if viewMode === 'editor'}
-					<Code class="toolbar-icon" />
-				{:else}
-					<Codesandbox class="toolbar-icon" />
-				{/if}
-			</button>
-			<button
-				class="repl-btn--icon"
-				onclick={() => (copyState = true)}
-				title={copyState ? 'Copied!' : 'Copy'}
+<div class="kit-repl">
+	{#if presentation}
+		<div class="kit-repl-content" class:kit-repl-content--playground={presentation}>
+			<div
+				class="wrapper-playground"
+				class:dark={themeState === 'dark'}
+				class:light={themeState === 'light'}
 			>
-				{#if copyState}
-					<Check class="toolbar-icon" />
-				{:else}
-					<Copy class="toolbar-icon" />
-				{/if}
-			</button>
+				{@render children?.()}
+			</div>
 		</div>
-	</div>
+	{/if}
 
-	<hr />
+	<div class="kit-repl-container">
+		<Toolbar
+			{title}
+			{language}
+			{presentation}
+			bind:copyState
+			bind:viewState
+			bind:themeState
+			bind:modeState
+		/>
+
+		{#if modeState !== 'code'}
+			<hr />
+		{/if}
 
-	{#if hasMultipleFiles && viewMode === 'editor'}
-		<div class="sub-toolbar">
-			{#each files as file, index (index)}
-				<button
-					class="file-tab"
-					class:active={activeFileIndex === index}
-					onclick={() => (activeFileIndex = index)}
-					title={file.name}
+		<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
+
+		<div
+			class="kit-repl-content"
+			class:kit-repl-content--code={viewState === 'code' && !presentation}
+		>
+			{#if viewState === 'code'}
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+				<div class="kit-repl-wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
+			{:else}
+				<div
+					class="kit-repl-wrapper-playground"
+					class:dark={themeState === 'dark'}
+					class:light={themeState === 'light'}
 				>
-					<img
-						src={iconMap[file.lang as keyof typeof iconMap] || CodeIcon}
-						alt="{file.lang} icon"
-						class="file-icon"
-					/>
-					<span>{file.name}</span>
-				</button>
-			{/each}
+					{@render children?.()}
+				</div>
+			{/if}
 		</div>
-		<hr />
-	{/if}
-
-	<div class="repl-content">
-		{#if viewMode === 'editor'}
-			<!-- 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}
 	</div>
 </div>
 
 <style>
-	div.repl-container {
-		--repl-spacing: 0.25rem;
-		--repl-radius: 1rem;
-		--repl-shiki-size: 1rem;
-		--repl-shiki-tab-size: 2;
+	.kit-repl {
+		/* ui */
+		--kit-repl-spacing: 0.25rem;
+		--kit-repl-radius: 1rem;
 
-		--repl-background: #f9f9f9;
-		--repl-border-color: #ebebeb;
+		/* shiki override */
+		--kit-repl-shiki-size: 0.875rem;
+		--kit-repl-shiki-tab-size: 2;
 
-		--repl-primary: #0d0d34;
-		--repl-secondary: #8f8f8f;
-
-		background-color: var(--repl-background);
-		border-radius: var(--repl-radius);
-		border: 2px solid var(--repl-border-color);
-	}
-
-	div.repl-container :global(pre) {
-		background-color: var(--repl-background) !important;
-	}
-
-	div.repl-toolbar {
-		display: flex;
-		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);
-		min-height: 36px;
-	}
-
-	div.repl-toolbar--actions {
-		display: flex;
-		align-items: center;
-		gap: calc(var(--repl-spacing) * 2);
-	}
-
-	.sub-toolbar button {
-	}
-
-	div button.repl-btn--icon {
-		background: none;
-		border: none;
-		cursor: pointer;
-		display: flex;
-		align-self: center;
-		justify-content: center;
-		font-size: 0.875rem;
-		border-radius: 0.375rem;
-		transition: background-color 0.2s ease;
-		padding: 8px;
-		color: var(--repl-secondary);
-	}
-
-	div button.repl-btn--icon:hover {
-		color: var(--repl-primary);
+		/* colors */
+		--kit-repl-background: #f9f9f9;
+		--kit-repl-border-color: #ebebeb;
+		--kit-repl-primary: #0d0d34;
+		--kit-repl-secondary: #8f8f8f;
 	}
-
-	div button.repl-btn--icon :global(svg) {
-		height: 20px;
-		width: 20px;
+	.kit-repl-container {
+		background-color: var(--kit-repl-background);
+		border-radius: var(--kit-repl-radius);
+		border: 2px solid var(--kit-repl-border-color);
 	}
 
-	.repl-toolbar--title {
-		display: flex;
-		align-items: center;
-		gap: calc(var(--repl-spacing) * 2);
-		font-weight: 600;
-		color: var(--repl-secondary);
-		max-width: 80%;
-		min-width: 0;
+	.kit-repl-container :global(pre) {
+		background-color: var(--kit-repl-background) !important;
 	}
 
-	.repl-toolbar--title span {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+	.kit-repl-content {
+		display: flow-root;
+		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;
 	}
 
-	.repl-toolbar--title .toolbar-icon {
-		width: 20px;
-		height: 20px;
-		object-fit: contain;
-		flex-shrink: 0;
+	.kit-repl-content--code {
+		padding-top: 0;
 	}
 
-	.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));
-		position: relative;
+	.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);
+	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;
 	}
 
-	.sub-toolbar {
-		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;
-	}
-
-	.file-tab {
-		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;
-		transition: all 0.2s ease;
-		border: 1px solid transparent;
-		white-space: nowrap;
-	}
-
-	.file-tab:hover {
-		background-color: #f5f5f5;
-	}
-
-	.file-tab.active {
-		background-color: #f0f0f0;
-		border-color: #d0d0d0;
-	}
-
-	.file-icon {
-		width: 16px;
-		height: 16px;
-		object-fit: contain;
+	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/Repl.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const Repl: import("svelte").Component<{
-    title: any;
-    content: any;
-    children: any;
-}, {}, "">;
+import type { ReplProps } from './types.js';
+declare const Repl: import("svelte").Component<ReplProps, {}, "">;
 type Repl = ReturnType<typeof Repl>;
 export default Repl;

package/dist/Toolbar.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { ToolbarProps } from './types.js';
+	import Button from './Button.svelte';
+	import { dictionary } from './utils.js';
+	import { Copy, Check, Code, Codesandbox, Moon, Sun } from '@lucide/svelte';
+
+	let {
+		title,
+		language,
+		presentation,
+		copyState = $bindable(),
+		viewState = $bindable(),
+		themeState = $bindable(),
+		modeState = $bindable()
+	}: ToolbarProps = $props();
+
+	let languageKey = $derived(
+		Object.entries(dictionary).find(([, values]) => values.includes(language))?.[0] || language
+	);
+</script>
+
+<div class="kit-repl--toolbar">
+	<div
+		class="kit-repl--toolbar-title"
+		class:kit-repl--toolbar-title--language={!title && language}
+		class:kit-repl--toolbar-title--title={title}
+	>
+		{#if title}
+			<span>{title}</span>
+		{:else if language}
+			<span>{languageKey}</span>
+		{/if}
+	</div>
+
+	<div class="kit-repl--toolbar-actions">
+		{#if (modeState !== 'code' && viewState === 'preview') || presentation}
+			<Button
+				aria-label={themeState === 'light' ? 'Switch to dark theme' : 'Switch to light theme'}
+				aria-pressed={themeState === 'dark'}
+				onclick={() => (themeState = themeState === 'light' ? 'dark' : 'light')}
+			>
+				{#if themeState === 'light'}
+					<Moon />
+				{:else}
+					<Sun />
+				{/if}
+			</Button>
+		{/if}
+
+		{#if modeState === 'mixed' && !presentation}
+			<Button
+				aria-label={viewState === 'code' ? 'Show preview' : 'Show code'}
+				aria-pressed={viewState === 'preview'}
+				onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}
+			>
+				{#if viewState === 'code'}
+					<Code />
+				{:else}
+					<Codesandbox />
+				{/if}
+			</Button>
+		{/if}
+
+		{#if modeState !== 'playground'}
+			<Button
+				aria-label={copyState ? 'Code copied' : 'Copy code'}
+				onclick={() => (copyState = true)}
+			>
+				{#if copyState}
+					<Check />
+				{:else}
+					<Copy />
+				{/if}
+			</Button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.kit-repl--toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: calc(var(--kit-repl-spacing) * 3);
+		padding-left: calc(5 * var(--kit-repl-spacing));
+		padding-right: calc(var(--kit-repl-spacing) * 2);
+		padding-block: calc(var(--kit-repl-spacing) * 1.5);
+		border-top-left-radius: var(--kit-repl-radius);
+		border-top-right-radius: var(--kit-repl-radius);
+		min-height: 36px;
+	}
+
+	.kit-repl--toolbar .kit-repl--toolbar-title {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--kit-repl-spacing) * 2);
+		max-width: 80%;
+		min-width: 0;
+	}
+
+	.kit-repl--toolbar-title--language {
+		font-size: 0.875rem;
+		line-height: 16px;
+		font-weight: 400;
+		color: #5d5d5d;
+	}
+
+	.kit-repl--toolbar-title--title {
+		font-weight: 500;
+		font-size: 1rem;
+		line-height: 20px;
+		color: #8f8f8f;
+	}
+
+	.kit-repl--toolbar .kit-repl--toolbar-actions {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--kit-repl-spacing) * 2);
+	}
+</style>

package/dist/Toolbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolbarProps } from './types.js';
+declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "modeState" | "viewState" | "copyState" | "themeState">;
+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/types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export interface ReplProps {
+    title?: string;
+    content?: string | Record<string, string | Record<string, unknown>>;
+    children?: Snippet;
+    presentation?: boolean;
+}
+export interface ToolbarProps {
+    title?: string;
+    language: string;
+    copyState?: boolean;
+    presentation?: boolean;
+    viewState?: 'code' | 'preview';
+    themeState?: 'light' | 'dark';
+    modeState?: 'code' | 'playground' | 'mixed';
+}
+export interface FilesProps {
+    files?: FileItem[];
+    activeIndex: number;
+    viewState: 'code' | 'preview';
+    modeState: 'code' | 'playground' | 'mixed';
+}
+export interface FileItem {
+    name: string;
+    content: string;
+    lang?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -1 +1,7 @@
 export declare const copyToClipboard: (value: string) => void;
+export declare const dictionary: {
+    [key: string]: string[];
+};
+export declare const dictionaryIcons: {
+    [key: string]: string;
+};

package/dist/utils.js

@@ -1,3 +1,9 @@
+import javascript from './languages/javascript.svg';
+import typescript from './languages/typescript.svg';
+import svelte from './languages/svelte.svg';
+import css from './languages/css.svg';
+import html from './languages/html.svg';
+import shell from './languages/shell.svg';
 export const copyToClipboard = (value) => {
     if (navigator.clipboard && window.isSecureContext) {
         navigator.clipboard
@@ -28,3 +34,28 @@ export const copyToClipboard = (value) => {
         document.body.removeChild(zoneTexte);
     }
 };
+export const dictionary = {
+    javascript: ['js', 'javascript'],
+    typescript: ['ts', 'typescript'],
+    svelte: ['svelte', 'svelte.ts', 'svelte.js'],
+    css: ['css', 'scss', 'less'],
+    html: ['html', 'htm'],
+    json: ['json'],
+    shell: ['bash', 'sh', 'shell']
+};
+export const dictionaryIcons = {
+    js: javascript,
+    ts: typescript,
+    'svelte.ts': svelte,
+    'svelte.js': svelte,
+    svelte: svelte,
+    shell: shell,
+    bash: shell,
+    sh: shell,
+    css: css,
+    scss: css,
+    less: css,
+    html: html,
+    htm: html,
+    json: shell
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lapikit/repl",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -11,7 +11,7 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/Nycolaide/lapikit.git"
+		"url": "git+https://github.com/Nycolaide/lapikit.git"
 	},
 	"scripts": {
 		"dev": "vite dev",

package/dist/assets/icons/check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>

package/dist/assets/icons/code.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-icon lucide-code"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>

package/dist/assets/icons/codesandbox.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-codesandbox-icon lucide-codesandbox"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="7.5 4.21 12 6.81 16.5 4.21"/><polyline points="7.5 19.79 7.5 14.6 3 12"/><polyline points="21 12 16.5 14.6 16.5 19.79"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" x2="12" y1="22.08" y2="12"/></svg>

package/dist/assets/icons/copy.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>