@lapikit/repl 0.0.0-insiders.24a3260

package/README.md

@@ -0,0 +1 @@
+# @Lapikit/repl

package/dist/Button.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	let { children, ...rest } = $props();
+</script>
+
+<button {...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(--repl-secondary);
+	}
+
+	button:hover {
+		color: var(--repl-primary);
+	}
+
+	button :global(svg) {
+		height: 20px;
+		width: 20px;
+	}
+</style>

package/dist/Button.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Button: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Files.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { FilesProps } from './types.js';
+	import { dictionaryIcons } from './utils.js';
+
+	let { files, activeIndex = $bindable() }: FilesProps = $props();
+</script>
+
+{#if files && files.length > 1}
+	<div>
+		{#each files as file, index (index)}
+			<button 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>
+
+	<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;
+		transition: all 0.2s ease;
+		border: 1px solid transparent;
+		white-space: nowrap;
+	}
+
+	button img {
+		width: 16px;
+		height: 16px;
+	}
+
+	button:hover {
+		background-color: #f5f5f5;
+	}
+
+	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;
+	}
+</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

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import { copyToClipboard } from './utils.js';
+	import { getHighlighterSingleton } from './shiki.js';
+	import type { FileItem, ReplProps } from './types.js';
+
+	// components
+	import Toolbar from './Toolbar.svelte';
+	import Files from './Files.svelte';
+
+	let { title, content, children, presentation }: ReplProps = $props();
+
+	// refs
+	let ref: null | HTMLElement = $state(null);
+
+	// states
+	let language = $state('javascript');
+
+	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('');
+	let activeFileIndex = $state(0);
+
+	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'
+				}
+			];
+		}
+
+		if (typeof content === 'object' && content !== null && !Array.isArray(content)) {
+			return Object.entries(content).map(([name, fileContent]) => ({
+				name,
+				content:
+					typeof fileContent === 'string'
+						? fileContent
+						: (fileContent as Record<string, unknown>).code || '',
+				lang:
+					typeof fileContent === 'object'
+						? ((fileContent as Record<string, unknown>).lang as string)
+						: 'javascript'
+			}));
+		}
+
+		if (Array.isArray(content)) {
+			return content.map((item) => ({
+				name: item.name,
+				content: item.content || item.code || '',
+				lang: item.lang || 'javascript'
+			}));
+		}
+
+		return [{ name: 'code', content: content || '', lang: 'javascript' }];
+	});
+	let activeFile = $derived(files[activeFileIndex]);
+
+	$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) {
+			if (ref?.textContent) {
+				copyToClipboard(ref?.textContent);
+				copyState = true;
+
+				setTimeout(() => {
+					copyState = false;
+				}, 1500);
+			}
+		}
+	});
+
+	$effect(() => {
+		const file = activeFile;
+		const theme = themeState;
+
+		if (file?.content) {
+			(async () => {
+				const highlighter = await getHighlighterSingleton();
+
+				language = file.lang || 'javascript';
+				const html = highlighter.codeToHtml(file.content, {
+					theme: theme === 'light' ? 'github-light' : 'github-dark',
+					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}
+
+	{#if presentation}
+		<div class="repl-content">
+			<div>{@render children?.()}</div>
+		</div>
+
+		<hr />
+	{/if}
+
+	<Files {files} bind:activeIndex={activeFileIndex} />
+
+	<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}
+	</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;
+
+		--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;
+	}
+
+	.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;
+	}
+
+	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;
+	}
+
+	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);
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+</style>

package/dist/Repl.svelte.d.ts

@@ -0,0 +1,4 @@
+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,93 @@
+<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="lpk-repl--toolbar">
+	<div class="lpk-repl--toolbar-title">
+		{#if title}
+			<span>{title}</span>
+		{:else if language}
+			<span>{languageKey}</span>
+		{/if}
+	</div>
+
+	<div class="lpk-repl--toolbar-actions">
+		{#if (modeState !== 'code' && viewState === 'preview') || presentation}
+			<Button onclick={() => (themeState = themeState === 'light' ? 'dark' : 'light')}>
+				{#if themeState === 'light'}
+					<Moon />
+				{:else}
+					<Sun />
+				{/if}
+			</Button>
+		{/if}
+
+		{#if modeState === 'mixed' && !presentation}
+			<Button onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}>
+				{#if viewState === 'code'}
+					<Code />
+				{:else}
+					<Codesandbox />
+				{/if}
+			</Button>
+		{/if}
+
+		{#if modeState !== 'playground'}
+			<Button onclick={() => (copyState = true)}>
+				{#if copyState}
+					<Check />
+				{:else}
+					<Copy />
+				{/if}
+			</Button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.lpk-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;
+	}
+
+	.lpk-repl--toolbar .lpk-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;
+	}
+
+	.lpk-repl--toolbar .lpk-repl--toolbar-actions {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--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, {}, "copyState" | "viewState" | "themeState" | "modeState">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/languages/css.svg

@@ -0,0 +1,6 @@
+<?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" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 28L4 3H28L26 28L16 31L6 28Z" fill="#1172B8"/>
+<path d="M26 5H16V29.5L24 27L26 5Z" fill="#33AADD"/>
+<path d="M19.5 17.5H9.5L9 14L17 11.5H9L8.5 8.5H24L23.5 12L17 14.5H23L22 24L16 26L10 24L9.5 19H12.5L13 21.5L16 22.5L19 21.5L19.5 17.5Z" fill="white"/>
+</svg>

package/dist/languages/html.svg

@@ -0,0 +1,6 @@
+<?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" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 28L4 3H28L26 28L16 31L6 28Z" fill="#E44D26"/>
+<path d="M26 5H16V29.5L24 27L26 5Z" fill="#F16529"/>
+<path d="M9.5 17.5L8.5 8H24L23.5 11H11.5L12 14.5H23L22 24L16 26L10 24L9.5 19H12.5L13 21.5L16 22.5L19 21.5L19.5 17.5H9.5Z" fill="white"/>
+</svg>

package/dist/languages/javascript.svg

@@ -0,0 +1,6 @@
+<?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" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="28" height="28" fill="#FFCA28"/>
+<path d="M19 25.2879L21.0615 23.9237C21.2231 24.4313 22.2462 25.6368 23.5385 25.6368C24.8308 25.6368 25.4308 24.931 25.4308 24.463C25.4308 23.1878 24.1112 22.7382 23.4774 22.5223C23.374 22.4871 23.289 22.4581 23.2308 22.4328C23.2009 22.4198 23.1558 22.4025 23.0979 22.3804C22.393 22.1111 19.7923 21.1175 19.7923 18.2373C19.7923 15.065 22.8538 14.7002 23.5462 14.7002C23.9991 14.7002 26.1769 14.7557 27.2615 16.7939L25.2615 18.1898C24.8231 17.3015 24.0946 17.0081 23.6462 17.0081C22.5385 17.0081 22.3077 17.8201 22.3077 18.1898C22.3077 19.227 23.5112 19.6919 24.5273 20.0844C24.7932 20.1871 25.0462 20.2848 25.2615 20.3866C26.3692 20.91 28 21.7666 28 24.463C28 25.8136 26.8672 28.0002 24.0154 28.0002C20.1846 28.0002 19.1692 25.7003 19 25.2879Z" fill="#3E3E3E"/>
+<path d="M9 25.5587L11.1487 24.1953C11.317 24.7026 11.9713 25.638 12.9205 25.638C13.8698 25.638 14.3557 24.663 14.3557 24.1953V15.0002H16.9982V24.1953C17.041 25.4636 16.3376 28.0002 13.2332 28.0002C10.379 28.0002 9.19242 26.3039 9 25.5587Z" fill="#3E3E3E"/>
+</svg>

package/dist/languages/shell.svg

@@ -0,0 +1,5 @@
+<?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 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.29291 14.2929C6.90238 14.6834 6.90238 15.3166 7.29291 15.7071C7.68343 16.0976 8.31659 16.0976 8.70712 15.7071L11.2071 13.2071C11.8738 12.5404 11.8738 11.4596 11.2071 10.7929L8.70712 8.29289C8.3166 7.90237 7.68343 7.90237 7.29291 8.29289C6.90238 8.68342 6.90238 9.31658 7.29291 9.70711L9.5858 12L7.29291 14.2929ZM13 14C12.4477 14 12 14.4477 12 15C12 15.5523 12.4477 16 13 16H16C16.5523 16 17 15.5523 17 15C17 14.4477 16.5523 14 16 14H13ZM22 7.93418C22 7.95604 22 7.97799 22 8.00001L22 16.0658C22.0001 16.9523 22.0001 17.7161 21.9179 18.3278C21.8297 18.9833 21.631 19.6117 21.1213 20.1213C20.6117 20.631 19.9833 20.8297 19.3278 20.9179C18.7161 21.0001 17.9523 21.0001 17.0658 21L6.9342 21C6.0477 21.0001 5.28388 21.0001 4.67222 20.9179C4.0167 20.8297 3.38835 20.631 2.87869 20.1213C2.36902 19.6117 2.17028 18.9833 2.08215 18.3278C1.99991 17.7161 1.99995 16.9523 2 16.0658L2 7.9342C1.99995 7.0477 1.99991 6.28388 2.08215 5.67221C2.17028 5.0167 2.36902 4.38835 2.87869 3.87868C3.38835 3.36902 4.0167 3.17028 4.67222 3.08215C5.28388 2.99991 6.04769 2.99995 6.93418 3L17 3.00001C17.022 3.00001 17.044 3 17.0658 3C17.9523 2.99995 18.7161 2.99991 19.3278 3.08215C19.9833 3.17028 20.6117 3.36902 21.1213 3.87869C21.631 4.38835 21.8297 5.0167 21.9179 5.67221C22.0001 6.28387 22.0001 7.04769 22 7.93418Z" fill="#323232"/>
+</svg>

package/dist/languages/svelte.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_svelte</title><path d="M26.47,5.7A8.973,8.973,0,0,0,14.677,3.246L7.96,7.4a7.461,7.461,0,0,0-3.481,5.009,7.686,7.686,0,0,0,.8,5.058,7.358,7.358,0,0,0-1.151,2.8,7.789,7.789,0,0,0,1.4,6.028,8.977,8.977,0,0,0,11.794,2.458L24.04,24.6a7.468,7.468,0,0,0,3.481-5.009,7.673,7.673,0,0,0-.8-5.062,7.348,7.348,0,0,0,1.152-2.8A7.785,7.785,0,0,0,26.47,5.7" style="fill:#ff3e00"/><path d="M14.022,26.64A5.413,5.413,0,0,1,8.3,24.581a4.678,4.678,0,0,1-.848-3.625,4.307,4.307,0,0,1,.159-.61l.127-.375.344.238a8.76,8.76,0,0,0,2.628,1.274l.245.073-.025.237a1.441,1.441,0,0,0,.271.968,1.63,1.63,0,0,0,1.743.636,1.512,1.512,0,0,0,.411-.175l6.7-4.154a1.366,1.366,0,0,0,.633-.909,1.407,1.407,0,0,0-.244-1.091,1.634,1.634,0,0,0-1.726-.622,1.509,1.509,0,0,0-.413.176l-2.572,1.584a4.934,4.934,0,0,1-1.364.582,5.415,5.415,0,0,1-5.727-2.06A4.678,4.678,0,0,1,7.811,13.1,4.507,4.507,0,0,1,9.9,10.09l6.708-4.154a4.932,4.932,0,0,1,1.364-.581A5.413,5.413,0,0,1,23.7,7.414a4.679,4.679,0,0,1,.848,3.625,4.272,4.272,0,0,1-.159.61l-.127.375-.344-.237a8.713,8.713,0,0,0-2.628-1.274l-.245-.074.025-.237a1.438,1.438,0,0,0-.272-.968,1.629,1.629,0,0,0-1.725-.622,1.484,1.484,0,0,0-.411.176l-6.722,4.14a1.353,1.353,0,0,0-.631.908,1.394,1.394,0,0,0,.244,1.092,1.634,1.634,0,0,0,1.726.621,1.538,1.538,0,0,0,.413-.175l2.562-1.585a4.9,4.9,0,0,1,1.364-.581,5.417,5.417,0,0,1,5.728,2.059,4.681,4.681,0,0,1,.843,3.625A4.5,4.5,0,0,1,22.1,21.905l-6.707,4.154a4.9,4.9,0,0,1-1.364.581" style="fill:#fff"/></svg>

package/dist/languages/typescript.svg

@@ -0,0 +1,12 @@
+<?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="#007ACC" transform="translate(128.000000, 128.000000) scale(1, -1) translate(-128.000000, -128.000000) " points="0 128 0 0 128 0 256 0 256 128 256 256 128 256 0 256">
+
+		<path d="M146.658132,223.436863 L146.739401,212.953054 L130.079084,212.953054 L113.418767,212.953054 L113.418767,165.613371 L113.418767,118.273689 L101.63464,118.273689 L89.8505126,118.273689 L89.8505126,165.613371 L89.8505126,212.953054 L73.1901951,212.953054 L56.5298776,212.953054 L56.5298776,223.233689 C56.5298776,228.922577 56.6517824,233.676863 56.8143221,233.798768 C56.9362269,233.961308 77.2130522,234.042577 101.797179,234.001943 L146.536227,233.880038 L146.658132,223.436863 Z" fill="#FFFFFF" transform="translate(101.634640, 176.142993) rotate(-180.000000) translate(-101.634640, -176.142993) ">
+
+		<path d="M206.566631,234.272145 C213.068219,232.646748 218.025679,229.761668 222.57679,225.048018 C224.933616,222.528653 228.428219,217.936907 228.712663,216.839764 C228.793933,216.514684 217.659965,209.037859 210.914568,204.852462 C210.670758,204.689922 209.69552,205.74643 208.598377,207.371827 C205.306949,212.166748 201.852981,214.239129 196.570441,214.604843 C188.809171,215.133097 183.811076,211.069605 183.851711,204.283573 C183.851711,202.292462 184.136155,201.114049 184.948854,199.488653 C186.65552,195.953414 189.825044,193.840399 199.7806,189.533097 C218.106949,181.649922 225.949489,176.448653 230.825679,169.053097 C236.270758,160.804208 237.489806,147.638494 233.792028,137.845478 C229.728536,127.199129 219.651076,119.966113 205.469489,117.568653 C201.080917,116.796589 190.678377,116.918494 185.964727,117.771827 C175.684092,119.600399 165.931711,124.679764 159.917743,131.343891 C157.560917,133.944526 152.969171,140.730557 153.253616,141.218176 C153.37552,141.380716 154.432028,142.030875 155.610441,142.721668 C156.748219,143.371827 161.05552,145.850557 165.119012,148.207383 L172.473933,152.474049 L174.01806,150.198494 C176.171711,146.907065 180.885362,142.396589 183.729806,140.893097 C191.897425,136.585795 203.112663,137.195319 208.639012,142.15278 C210.995838,144.30643 211.971076,146.541351 211.971076,149.83278 C211.971076,152.799129 211.605362,154.099446 210.061235,156.334367 C208.070123,159.178811 204.006631,161.576272 192.466314,166.574367 C179.259965,172.263256 173.571076,175.798494 168.369806,181.406113 C165.362822,184.656907 162.518377,189.858176 161.339965,194.206113 C160.364727,197.822621 160.120917,206.884208 160.892981,210.541351 C163.61552,223.300716 173.245996,232.199764 187.143139,234.841034 C191.653616,235.694367 202.137425,235.369287 206.566631,234.272145 Z" fill="#FFFFFF" transform="translate(194.578507, 176.190240) scale(1, -1) translate(-194.578507, -176.190240) ">
+
+	</g>
+</svg>

package/dist/shiki.d.ts

@@ -0,0 +1,2 @@
+import { type Highlighter } from 'shiki';
+export declare function getHighlighterSingleton(): Promise<Highlighter>;

package/dist/shiki.js

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

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+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;
+}
+export interface FileItem {
+    name: string;
+    content: string;
+    lang?: string;
+}

package/dist/types.js

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

package/dist/utils.d.ts

@@ -0,0 +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

@@ -0,0 +1,61 @@
+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
+            .writeText(value)
+            .then(function () {
+            console.log('Success copy: ' + value);
+        })
+            .catch(function (err) {
+            console.error('Error copying to clipboard: ', err);
+        });
+    }
+    else {
+        // Fallback (legacy browser)
+        const zoneTexte = document.createElement('textarea');
+        zoneTexte.value = value;
+        zoneTexte.style.position = 'fixed';
+        zoneTexte.style.left = '-9999px';
+        document.body.appendChild(zoneTexte);
+        zoneTexte.focus();
+        zoneTexte.select();
+        try {
+            document.execCommand('copy');
+            console.log('Success copy: ' + value);
+        }
+        catch (err) {
+            console.error('Error copying to clipboard: ', err);
+        }
+        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

@@ -0,0 +1,81 @@
+{
+  "name": "@lapikit/repl",
+  "version": "0.0.0-insiders.24a3260",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "Nycolaide",
+    "email": "contact@lapikit.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Nycolaide/lapikit.git"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^2.0.0",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.39.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.4",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.13.1",
+    "globals": "^16.5.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.0",
+    "publint": "^0.3.15",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vitest": "^4.0.15"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "dependencies": {
+    "@lucide/svelte": "^0.562.0",
+    "shiki": "^3.20.0"
+  }
+}