@lapikit/repl 0.0.0-insiders.24a3260 → 0.0.0-insiders.39691bf

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>
 
@@ -18,11 +27,11 @@
 		border-radius: 0.375rem;
 		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

@@ -2,13 +2,20 @@
 	import type { FilesProps } from './types.js';
 	import { dictionaryIcons } 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)}>
+			<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}
@@ -16,30 +23,30 @@
 			</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);
+		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(--repl-spacing) * 2);
-		padding: calc(var(--repl-spacing) * 2) calc(var(--repl-spacing) * 3);
-		border-radius: 0.375rem;
+		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: 1px solid transparent;
+		border: 0;
 		white-space: nowrap;
+		background-color: transparent;
+		border-bottom: 2px solid transparent;
+		cursor: pointer;
 	}
 
 	button img {
@@ -48,20 +55,10 @@
 	}
 
 	button:hover {
-		background-color: #f5f5f5;
+		border-color: #cfcfcf;
 	}
 
 	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: #000000;
 	}
 </style>

package/dist/Repl.svelte

@@ -13,14 +13,14 @@
 	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('');
+	let codeHTML = $state<string | null>(null);
 	let activeFileIndex = $state(0);
 
 	let files = $derived.by<FileItem[]>(() => {
@@ -29,7 +29,7 @@
 				{
 					name: title || 'code',
 					content: content.code,
-					lang: content.lang || 'javascript'
+					lang: content.lang || 'sh'
 				}
 			];
 		}
@@ -44,7 +44,7 @@
 				lang:
 					typeof fileContent === 'object'
 						? ((fileContent as Record<string, unknown>).lang as string)
-						: 'javascript'
+						: 'sh'
 			}));
 		}
 
@@ -52,11 +52,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]);
 
@@ -94,102 +94,152 @@
 		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',
 					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">
 	{#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"
+				class:dark={themeState === 'dark'}
+				class:light={themeState === 'light'}
+			>
+				{@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>
+	<div class="kit-repl-container">
+		<Toolbar
+			{title}
+			{language}
+			{presentation}
+			bind:copyState
+			bind:viewState
+			bind:themeState
+			bind:modeState
+		/>
+
+		{#if modeState !== 'code'}
+			<hr />
 		{/if}
+
+		<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
+
+		<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"
+					class:dark={themeState === 'dark'}
+					class:light={themeState === 'light'}
+				>
+					{@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;
-
-		--repl-primary: #0d0d34;
-		--repl-secondary: #8f8f8f;
-
-		background-color: var(--repl-background);
-		border-radius: var(--repl-radius);
-		border: 2px solid var(--repl-border-color);
+	.kit-repl {
+		/* ui */
+		--kit-repl-spacing: 0.25rem;
+		--kit-repl-radius: 1rem;
+
+		/* shiki override */
+		--kit-repl-shiki-size: 0.875rem;
+		--kit-repl-shiki-tab-size: 2;
+
+		/* colors */
+		--kit-repl-background: var(--kit-surface-3, #f9f9f9);
+		--kit-repl-border-color: var(--kit-border, #ebebeb);
+		--kit-repl-primary: var(--kit-fg, #0d0d34);
+		--kit-repl-secondary: var(--kit-muted, #8f8f8f);
+	}
+	.kit-repl-container {
+		background-color: var(--kit-repl-background);
+		border-radius: var(--kit-repl-radius);
+		border: 2px 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;
 	}
 
-	.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));
+		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;
+	}
+
+	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

@@ -19,8 +19,12 @@
 	);
 </script>
 
-<div class="lpk-repl--toolbar">
-	<div class="lpk-repl--toolbar-title">
+<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}
@@ -28,9 +32,13 @@
 		{/if}
 	</div>
 
-	<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={() => (themeState = themeState === 'light' ? 'dark' : 'light')}
+			>
 				{#if themeState === 'light'}
 					<Moon />
 				{:else}
@@ -40,7 +48,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 +62,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 +77,44 @@
 </div>
 
 <style>
-	.lpk-repl--toolbar {
+	.kit-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);
+		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;
 	}
 
-	.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: 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(--repl-spacing) * 2);
+		gap: calc(var(--kit-repl-spacing) * 2);
 	}
 </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" | "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/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

@@ -17,6 +17,8 @@ export interface ToolbarProps {
 export interface FilesProps {
     files?: FileItem[];
     activeIndex: number;
+    viewState: 'code' | 'preview';
+    modeState: 'code' | 'playground' | 'mixed';
 }
 export interface FileItem {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapikit/repl",
-  "version": "0.0.0-insiders.24a3260",
+  "version": "0.0.0-insiders.39691bf",
   "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.5.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",