@lapikit/repl 0.0.0-insiders.24a3260 → 0.0.0-insiders.c8fbb29

package/dist/Repl.svelte

@@ -1,28 +1,32 @@
 <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();
+	import { Copy, Check, Code, Codesandbox, Moon, Sun } from '@lucide/svelte';
 
-	// refs
-	let ref: null | HTMLElement = $state(null);
+	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';
 
-	// states
-	let language = $state('javascript');
+	interface FileItem {
+		name: string;
+		content: string;
+		lang?: string;
+	}
 
-	let modeState: 'code' | 'playground' | 'mixed' = $state('code');
+	let { title, content, children } = $props();
+	let codeHTML = $state('');
 	let copyState = $state(false);
-	let viewState: 'code' | 'preview' = $state('code');
-	let themeState: 'light' | 'dark' = $state('light');
+	let viewMode = $state('editor');
+	let themeMode = $state('light');
 
-	let codeHTML = $state('');
-	let activeFileIndex = $state(0);
+	let ref: null | HTMLElement = $state(null);
+	let typeContent = $state('code');
 
+	// multiple content types
 	let files = $derived.by<FileItem[]>(() => {
 		if (typeof content === 'object' && content !== null && 'code' in content) {
 			return [
@@ -37,14 +41,8 @@
 		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'
+				content: typeof fileContent === 'string' ? fileContent : (fileContent as any).code || '',
+				lang: typeof fileContent === 'object' ? (fileContent as any).lang : 'javascript'
 			}));
 		}
 
@@ -58,23 +56,21 @@
 
 		return [{ name: 'code', content: content || '', lang: 'javascript' }];
 	});
+
+	let activeFileIndex = $state(0);
 	let activeFile = $derived(files[activeFileIndex]);
+	let hasMultipleFiles = $derived(files.length > 1);
 
-	$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';
-		}
-	});
+	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(() => {
 		if (copyState) {
@@ -91,16 +87,16 @@
 
 	$effect(() => {
 		const file = activeFile;
-		const theme = themeState;
+		const theme = themeMode;
 
 		if (file?.content) {
 			(async () => {
+				console.log('Rendering file:', file);
 				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
+					lang: file.lang || 'javascript'
 				});
 
 				codeHTML = html;
@@ -110,32 +106,76 @@
 </script>
 
 <div class="repl-container">
-	<Toolbar
-		{title}
-		{language}
-		{presentation}
-		bind:copyState
-		bind:viewState
-		bind:themeState
-		bind:modeState
-	/>
-
-	{#if modeState !== 'code'}
-		<hr />
-	{/if}
+	<div class="repl-toolbar">
+		<div class="repl-toolbar--title">
+			<img src={currentIcon} alt="{typeContent} icon" class="toolbar-icon" />
+			<span>{title || 'REPL Toolbar'}</span>
+		</div>
 
-	{#if presentation}
-		<div class="repl-content">
-			<div>{@render children?.()}</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'}
+			>
+				{#if copyState}
+					<Check class="toolbar-icon" />
+				{:else}
+					<Copy class="toolbar-icon" />
+				{/if}
+			</button>
 		</div>
+	</div>
+
+	<hr />
 
+	{#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}
+				>
+					<img
+						src={iconMap[file.lang as keyof typeof iconMap] || CodeIcon}
+						alt="{file.lang} icon"
+						class="file-icon"
+					/>
+					<span>{file.name}</span>
+				</button>
+			{/each}
+		</div>
 		<hr />
 	{/if}
 
-	<Files {files} bind:activeIndex={activeFileIndex} />
-
 	<div class="repl-content">
-		{#if viewState === 'code'}
+		{#if viewMode === 'editor'}
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 			<div class="wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
 		{:else}
@@ -166,6 +206,74 @@
 		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);
+	}
+
+	div button.repl-btn--icon :global(svg) {
+		height: 20px;
+		width: 20px;
+	}
+
+	.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;
+	}
+
+	.repl-toolbar--title span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.repl-toolbar--title .toolbar-icon {
+		width: 20px;
+		height: 20px;
+		object-fit: contain;
+		flex-shrink: 0;
+	}
+
 	.repl-content {
 		display: flow-root;
 		margin-top: calc(var(--repl-spacing) * 0);
@@ -192,4 +300,40 @@
 		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;
+	}
 </style>

package/dist/Repl.svelte.d.ts

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

package/dist/assets/icons/check.svg

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

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

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

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

package/dist/utils.d.ts

@@ -1,7 +1 @@
 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,9 +1,3 @@
-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
@@ -34,28 +28,3 @@ 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.0-insiders.24a3260",
+  "version": "0.0.0-insiders.c8fbb29",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/dist/Button.svelte

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

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

package/dist/Files.svelte

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

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

package/dist/Toolbar.svelte

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

@@ -1,4 +0,0 @@
-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/types.d.ts

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

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