├── dist
    ├── assets
    │   └── favicon.svg
    ├── stores.d.ts
    ├── index.d.ts
    ├── index.js
    ├── stores.js
    ├── utils.d.ts
    ├── types.js
    ├── utils.js
    ├── shell.d.ts
    ├── Terminal.svelte.d.ts
    ├── types.d.ts
    ├── shell.js
    └── Terminal.svelte
├── .npmrc
├── static
    ├── robots.txt
    └── svelte-bash.jpg
├── .vscode
    └── settings.json
├── src
    ├── routes
    │   ├── layout.css
    │   ├── +layout.svelte
    │   └── +page.svelte
    ├── lib
    │   ├── index.ts
    │   ├── stores.ts
    │   ├── utils.ts
    │   ├── types.ts
    │   ├── shell.ts
    │   └── Terminal.svelte
    ├── app.d.ts
    └── app.html
├── vite.config.ts
├── .gitignore
├── svelte.config.js
├── tsconfig.json
├── package.json
└── README.md


/dist/assets/favicon.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/dist/stores.d.ts:
--------------------------------------------------------------------------------
1 | export {};
2 | 


--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | # allow crawling everything by default
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"files.associations": {
3 | 		"*.css": "tailwindcss"
4 | 	}
5 | }
6 | 


--------------------------------------------------------------------------------
/static/svelte-bash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YusufCeng1z/svelte-bash/HEAD/static/svelte-bash.jpg


--------------------------------------------------------------------------------
/src/routes/layout.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 | @plugin '@tailwindcss/forms';
3 | @plugin '@tailwindcss/typography';
4 | 


--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
1 | export { default as Terminal } from './Terminal.svelte';
2 | export * from './types';
3 | export { Shell } from './shell';
4 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | export { default as Terminal } from './Terminal.svelte';
2 | export * from './types';
3 | export { Shell } from './shell';
4 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | 
2 | export { default as Terminal } from './Terminal.svelte';
3 | export * from './types';
4 | export { Shell } from './shell';


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | 	import "./layout.css";
3 | 	let { children } = $props();
4 | </script>
5 | 
6 | {@render children()}
7 | 


--------------------------------------------------------------------------------
/dist/stores.js:
--------------------------------------------------------------------------------
1 | // We are moving state to local component scope to support multiple instances.
2 | // This file is now deprecated or can be used for shared utilities if needed.
3 | // For now, exporting nothing to avoid confusion.
4 | export {};
5 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import tailwindcss from '@tailwindcss/vite';
2 | import { sveltekit } from '@sveltejs/kit/vite';
3 | import { defineConfig } from 'vite';
4 | 
5 | export default defineConfig({
6 | 	plugins: [tailwindcss(), sveltekit()]
7 | });
8 | 


--------------------------------------------------------------------------------
/dist/utils.d.ts:
--------------------------------------------------------------------------------
1 | import type { FileStructure } from './types';
2 | export declare function resolvePath(structure: FileStructure, cwdParts: string[], targetPath: string): {
3 |     node: string | FileStructure | undefined;
4 |     name: string;
5 | };
6 | 


--------------------------------------------------------------------------------
/src/lib/stores.ts:
--------------------------------------------------------------------------------
1 | 
2 | // We are moving state to local component scope to support multiple instances.
3 | // This file is now deprecated or can be used for shared utilities if needed.
4 | // For now, exporting nothing to avoid confusion.
5 | export { };
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # Output
 4 | .output
 5 | .vercel
 6 | .netlify
 7 | .wrangler
 8 | /.svelte-kit
 9 | /build
10 | 
11 | # OS
12 | .DS_Store
13 | Thumbs.db
14 | 
15 | # Env
16 | .env
17 | .env.*
18 | !.env.example
19 | !.env.test
20 | 
21 | # Vite
22 | vite.config.js.timestamp-*
23 | vite.config.ts.timestamp-*
24 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://svelte.dev/docs/kit/types#app.d.ts
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface PageState {}
 9 | 		// interface Platform {}
10 | 	}
11 | }
12 | 
13 | export {};
14 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 		%sveltekit.head%
 7 | 	</head>
 8 | 	<body data-sveltekit-preload-data="hover">
 9 | 		<div style="display: contents">%sveltekit.body%</div>
10 | 	</body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://svelte.dev/docs/kit/integrations
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
11 | 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12 | 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14 | 		adapter: adapter()
15 | 	}
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/dist/types.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Predefined themes available in the library.
 3 |  */
 4 | export const Themes = {
 5 |     dark: {
 6 |         background: '#1a1b26',
 7 |         foreground: '#a9b1d6',
 8 |         prompt: '#7aa2f7',
 9 |         cursor: '#c0caf5'
10 |     },
11 |     light: {
12 |         background: '#ffffff',
13 |         foreground: '#000000',
14 |         prompt: '#2563eb',
15 |         cursor: '#000000'
16 |     },
17 |     dracula: {
18 |         background: '#282a36',
19 |         foreground: '#f8f8f2',
20 |         prompt: '#bd93f9',
21 |         cursor: '#f8f8f2'
22 |     },
23 |     matrix: {
24 |         background: '#000000',
25 |         foreground: '#00ff00',
26 |         prompt: '#00cc00',
27 |         cursor: '#00ff00'
28 |     }
29 | };
30 | 


--------------------------------------------------------------------------------
/dist/utils.js:
--------------------------------------------------------------------------------
 1 | export function resolvePath(structure, cwdParts, targetPath) {
 2 |     if (targetPath === '/') {
 3 |         return { node: structure, name: '' };
 4 |     }
 5 |     const parts = targetPath.split('/');
 6 |     let currentParts = [...cwdParts];
 7 |     let pointer = structure;
 8 |     // Navigate to CWD first
 9 |     for (const p of currentParts) {
10 |         if (pointer[p] && typeof pointer[p] === 'object') {
11 |             pointer = pointer[p];
12 |         }
13 |     }
14 |     if (pointer[targetPath]) {
15 |         return { node: pointer[targetPath], name: targetPath };
16 |     }
17 |     if (targetPath === '..') {
18 |         return { node: undefined, name: targetPath };
19 |     }
20 |     return { node: undefined, name: targetPath };
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"rewriteRelativeImportExtensions": true,
 5 | 		"allowJs": true,
 6 | 		"checkJs": true,
 7 | 		"esModuleInterop": true,
 8 | 		"forceConsistentCasingInFileNames": true,
 9 | 		"resolveJsonModule": true,
10 | 		"skipLibCheck": true,
11 | 		"sourceMap": true,
12 | 		"strict": true,
13 | 		"moduleResolution": "bundler"
14 | 	}
15 | 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
16 | 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
17 | 	//
18 | 	// To make changes to top-level options such as include and exclude, we recommend extending
19 | 	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
20 | }
21 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import type { FileStructure } from './types';
 3 | 
 4 | export function resolvePath(structure: FileStructure, cwdParts: string[], targetPath: string): { node: string | FileStructure | undefined, name: string } {
 5 |     if (targetPath === '/') {
 6 |         return { node: structure, name: '' };
 7 |     }
 8 | 
 9 |     const parts = targetPath.split('/');
10 |     let currentParts = [...cwdParts];
11 | 
12 | 
13 |     let pointer: any = structure;
14 | 
15 |     // Navigate to CWD first
16 |     for (const p of currentParts) {
17 |         if (pointer[p] && typeof pointer[p] === 'object') {
18 |             pointer = pointer[p];
19 |         }
20 |     }
21 | 
22 |     if (pointer[targetPath]) {
23 |         return { node: pointer[targetPath], name: targetPath };
24 |     }
25 | 
26 |     if (targetPath === '..') {
27 |         return { node: undefined, name: targetPath };
28 |     }
29 | 
30 |     return { node: undefined, name: targetPath };
31 | }
32 | 


--------------------------------------------------------------------------------
/dist/shell.d.ts:
--------------------------------------------------------------------------------
 1 | import type { FileStructure, CommandHandler, TerminalLine } from './types';
 2 | export declare class Shell {
 3 |     private structure;
 4 |     private customCommands;
 5 |     private cwd;
 6 |     private history;
 7 |     private user;
 8 |     constructor(structure?: FileStructure, commands?: Record<string, CommandHandler>, user?: string, history?: TerminalLine[]);
 9 |     get currentPath(): string[];
10 |     setHistory(h: TerminalLine[]): void;
11 |     setStructure(s: FileStructure): void;
12 |     setCommands(c: Record<string, CommandHandler>): void;
13 |     /**
14 |      * Resolve path parts to a node in the file structure.
15 |      */
16 |     private resolveNode;
17 |     /**
18 |      * Process a command string and return the updated history lines (or void if direct history mutation).
19 |      * Actually, let's return a list of NEW lines provided by the command execution.
20 |      */
21 |     execute(input: string): Promise<TerminalLine[]>;
22 | }
23 | 


--------------------------------------------------------------------------------
/dist/Terminal.svelte.d.ts:
--------------------------------------------------------------------------------
 1 | interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
 2 |     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
 3 |         $$bindings?: Bindings;
 4 |     } & Exports;
 5 |     (internal: unknown, props: Props & {
 6 |         $$events?: Events;
 7 |         $$slots?: Slots;
 8 |     }): Exports & {
 9 |         $set?: any;
10 |         $on?: any;
11 |     };
12 |     z_$$bindings?: Bindings;
13 | }
14 | declare const Terminal: $$__sveltets_2_IsomorphicComponent<{
15 |     [x: string]: any;
16 |     commands?: Record<string, import("./types").CommandHandler> | undefined;
17 |     structure?: import("./types").FileStructure | undefined;
18 |     theme?: string | import("./types").Theme | undefined;
19 |     welcomeMessage?: string | string[] | undefined;
20 |     user?: string | undefined;
21 |     promptStr?: string | undefined;
22 |     autoplay?: {
23 |         command: string;
24 |         output?: string | string[] | import("svelte").Component;
25 |     }[] | undefined;
26 |     autoplayLoop?: boolean | undefined;
27 |     typingSpeed?: number | undefined;
28 |     class?: string | undefined;
29 | }, {
30 |     [evt: string]: CustomEvent<any>;
31 | }, {}, {}, string>;
32 | type Terminal = InstanceType<typeof Terminal>;
33 | export default Terminal;
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "svelte-bash",
 3 | 	"version": "1.0.2",
 4 | 	"description": "A fully typed, customizable, and lightweight terminal component for Svelte 5.",
 5 | 	"type": "module",
 6 | 	"license": "MIT",
 7 | 	"repository": {
 8 | 		"type": "git",
 9 | 		"url": "https://github.com/YusufCeng1z/svelte-bash.git"
10 | 	},
11 | 	"homepage": "https://svelte-bash.netlify.app",
12 | 	"bugs": {
13 | 		"url": "https://github.com/YusufCeng1z/svelte-bash/issues"
14 | 	},
15 | 	"keywords": [
16 | 		"svelte",
17 | 		"terminal",
18 | 		"console",
19 | 		"cli",
20 | 		"bash",
21 | 		"shell",
22 | 		"emulator",
23 | 		"component",
24 | 		"ui",
25 | 		"svelte-5",
26 | 		"runes"
27 | 	],
28 | 	"exports": {
29 | 		".": {
30 | 			"types": "./dist/index.d.ts",
31 | 			"svelte": "./dist/index.js"
32 | 		}
33 | 	},
34 | 	"files": [
35 | 		"dist",
36 | 		"!dist/**/*.test.*",
37 | 		"!dist/**/*.spec.*"
38 | 	],
39 | 	"peerDependencies": {
40 | 		"svelte": "^5.0.0"
41 | 	},
42 | 	"scripts": {
43 | 		"dev": "vite dev",
44 | 		"build": "vite build",
45 | 		"package": "svelte-package -o dist",
46 | 		"preview": "vite preview",
47 | 		"prepare": "svelte-kit sync || echo ''",
48 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
49 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
50 | 	},
51 | 	"devDependencies": {
52 | 		"@sveltejs/adapter-auto": "^7.0.0",
53 | 		"@sveltejs/kit": "^2.48.5",
54 | 		"@sveltejs/package": "^2.0.0",
55 | 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
56 | 		"@tailwindcss/forms": "^0.5.10",
57 | 		"@tailwindcss/typography": "^0.5.19",
58 | 		"@tailwindcss/vite": "^4.1.17",
59 | 		"svelte": "^5.43.8",
60 | 		"svelte-check": "^4.3.4",
61 | 		"tailwindcss": "^4.1.17",
62 | 		"typescript": "^5.9.3",
63 | 		"vite": "^7.2.2"
64 | 	}
65 | }
66 | 


--------------------------------------------------------------------------------
/dist/types.d.ts:
--------------------------------------------------------------------------------
 1 | import type { Component } from 'svelte';
 2 | /**
 3 |  * Represents a single line in the terminal history.
 4 |  */
 5 | export interface TerminalLine {
 6 |     type: 'command' | 'output' | 'error';
 7 |     content: string | string[] | Component;
 8 |     id?: number;
 9 |     /** Optional snapshot of the prompt at the time this line was created (for commands). */
10 |     promptLabel?: string;
11 | }
12 | /**
13 |  * Represents the virtual file system structure.
14 |  * keys are file/directory names.
15 |  * values are string (file content) or object (subdirectory).
16 |  */
17 | export type FileStructure = {
18 |     [key: string]: string | FileStructure;
19 | };
20 | /**
21 |  * Function signature for custom commands.
22 |  * Returns a promise that resolves to the output (string, lines, or void).
23 |  */
24 | export type CommandHandler = (args: string[]) => Promise<string | string[] | void> | string | string[] | void;
25 | /**
26 |  * Interface for the terminal theme.
27 |  */
28 | export interface Theme {
29 |     background: string;
30 |     foreground: string;
31 |     prompt: string;
32 |     cursor: string;
33 |     selection?: string;
34 | }
35 | /**
36 |  * Predefined themes available in the library.
37 |  */
38 | export declare const Themes: Record<string, Theme>;
39 | /**
40 |  * Props accepted by the `<Terminal />` component.
41 |  */
42 | export interface TerminalProps {
43 |     /** Map of custom commands. Key is the command name. */
44 |     commands?: Record<string, CommandHandler>;
45 |     /** Virtual file system structure. */
46 |     structure?: FileStructure;
47 |     /**
48 |      * Theme object or name of a preset ('dark', 'light', 'dracula', 'matrix').
49 |      * @default 'dark'
50 |      */
51 |     theme?: keyof typeof Themes | Theme;
52 |     /** Message to display on initialization. */
53 |     welcomeMessage?: string | string[];
54 |     /** Username for the prompt. @default 'user' */
55 |     user?: string;
56 |     /**
57 |      * Static override for the entire prompt string.
58 |      * If provided, `user` and dynamic path are ignored.
59 |      */
60 |     promptStr?: string;
61 |     /**
62 |      * Autoplay script for "Show Mode".
63 |      * If provided, the terminal becomes read-only and plays this script.
64 |      */
65 |     autoplay?: {
66 |         command: string;
67 |         output?: string | string[] | Component;
68 |     }[];
69 |     /**
70 |      * Whether to loop the autoplay script.
71 |      * @default true
72 |      */
73 |     autoplayLoop?: boolean;
74 |     /**
75 |      * Typing speed in milliseconds for autoplay.
76 |      * @default 50
77 |      */
78 |     typingSpeed?: number;
79 |     /**
80 |      * Additional CSS classes for the terminal container.
81 |      */
82 |     class?: string;
83 | }
84 | 


--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | import type { Component } from 'svelte';
  3 | 
  4 | /**
  5 |  * Represents a single line in the terminal history.
  6 |  */
  7 | export interface TerminalLine {
  8 |     type: 'command' | 'output' | 'error';
  9 |     content: string | string[] | Component;
 10 |     id?: number;
 11 |     /** Optional snapshot of the prompt at the time this line was created (for commands). */
 12 |     promptLabel?: string;
 13 | }
 14 | 
 15 | /**
 16 |  * Represents the virtual file system structure.
 17 |  * keys are file/directory names.
 18 |  * values are string (file content) or object (subdirectory).
 19 |  */
 20 | export type FileStructure = {
 21 |     [key: string]: string | FileStructure;
 22 | };
 23 | 
 24 | /**
 25 |  * Function signature for custom commands.
 26 |  * Returns a promise that resolves to the output (string, lines, or void).
 27 |  */
 28 | export type CommandHandler = (args: string[]) => Promise<string | string[] | void> | string | string[] | void;
 29 | 
 30 | /**
 31 |  * Interface for the terminal theme.
 32 |  */
 33 | export interface Theme {
 34 |     background: string;
 35 |     foreground: string;
 36 |     prompt: string;
 37 |     cursor: string;
 38 |     selection?: string;
 39 | }
 40 | 
 41 | /**
 42 |  * Predefined themes available in the library.
 43 |  */
 44 | export const Themes: Record<string, Theme> = {
 45 |     dark: {
 46 |         background: '#1a1b26',
 47 |         foreground: '#a9b1d6',
 48 |         prompt: '#7aa2f7',
 49 |         cursor: '#c0caf5'
 50 |     },
 51 |     light: {
 52 |         background: '#ffffff',
 53 |         foreground: '#000000',
 54 |         prompt: '#2563eb',
 55 |         cursor: '#000000'
 56 |     },
 57 |     dracula: {
 58 |         background: '#282a36',
 59 |         foreground: '#f8f8f2',
 60 |         prompt: '#bd93f9',
 61 |         cursor: '#f8f8f2'
 62 |     },
 63 |     matrix: {
 64 |         background: '#000000',
 65 |         foreground: '#00ff00',
 66 |         prompt: '#00cc00',
 67 |         cursor: '#00ff00'
 68 |     }
 69 | };
 70 | 
 71 | /**
 72 |  * Props accepted by the `<Terminal />` component.
 73 |  */
 74 | export interface TerminalProps {
 75 |     /** Map of custom commands. Key is the command name. */
 76 |     commands?: Record<string, CommandHandler>;
 77 | 
 78 |     /** Virtual file system structure. */
 79 |     structure?: FileStructure;
 80 | 
 81 |     /** 
 82 |      * Theme object or name of a preset ('dark', 'light', 'dracula', 'matrix').
 83 |      * @default 'dark'
 84 |      */
 85 |     theme?: keyof typeof Themes | Theme;
 86 | 
 87 |     /** Message to display on initialization. */
 88 |     welcomeMessage?: string | string[];
 89 | 
 90 |     /** Username for the prompt. @default 'user' */
 91 |     user?: string;
 92 | 
 93 |     /** 
 94 |      * Static override for the entire prompt string. 
 95 |      * If provided, `user` and dynamic path are ignored. 
 96 |      */
 97 |     promptStr?: string;
 98 | 
 99 |     /**
100 |      * Autoplay script for "Show Mode".
101 |      * If provided, the terminal becomes read-only and plays this script.
102 |      */
103 |     autoplay?: { command: string; output?: string | string[] | Component }[];
104 | 
105 |     /**
106 |      * Whether to loop the autoplay script.
107 |      * @default true
108 |      */
109 |     autoplayLoop?: boolean;
110 | 
111 |     /**
112 |      * Typing speed in milliseconds for autoplay.
113 |      * @default 50
114 |      */
115 |     typingSpeed?: number;
116 | 
117 |     /**
118 |      * Additional CSS classes for the terminal container.
119 |      */
120 |     class?: string;
121 | }
122 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Svelte Bash
  2 | 
  3 | <div align="center">
  4 | 
  5 |   <img src="static/svelte-bash.jpg" alt="Svelte Bash Banner" width="100%" />
  6 | 
  7 |   <h1>Svelte Bash</h1>
  8 | 
  9 |   <p>
 10 |     <strong>The ultimate lightweight, fully typed, and customizable terminal component for Svelte 5.</strong>
 11 |   </p>
 12 | 
 13 |   <p>
 14 |     <a href="https://svelte-bash.netlify.app/"><strong>Live Demo</strong></a> · 
 15 |     <a href="https://www.npmjs.com/package/svelte-bash"><strong>NPM</strong></a> · 
 16 |     <a href="https://github.com/YusufCeng1z/svelte-bash"><strong>GitHub</strong></a>
 17 |   </p>
 18 | 
 19 |   <p>
 20 |     <img src="https://img.shields.io/npm/v/svelte-bash?style=flat-square&color=blue" alt="NPM Version" />
 21 |     <img src="https://img.shields.io/npm/l/svelte-bash?style=flat-square&color=orange" alt="License" />
 22 |     <img src="https://img.shields.io/badge/Svelte-5-orange?style=flat-square&logo=svelte" alt="Svelte 5" />
 23 |     <img src="https://img.shields.io/badge/Zero_Dependency-Used_Vanilla_CSS-blueviolet?style=flat-square" alt="Zero Dependency" />
 24 |   </p>
 25 | 
 26 | </div>
 27 | 
 28 | ---
 29 | 
 30 | **Svelte Bash** is a high-performance terminal emulator component designed specifically for modern Svelte applications. It provides a realistic shell experience with a virtual file system, command history navigation, and advanced features like autoplay sequences for tutorials.
 31 | 
 32 | > **Note:** As of v1.0.1, svelte-bash has been refactored to use **Pure Vanilla CSS** internally. This means it has **ZERO dependencies** on Tailwind CSS and will render correctly in any project (including Bootstrap, Tailwind, or plain CSS projects). You do NOT need to install Tailwind.
 33 | 
 34 | Whether you are building a developer portfolio, a documentation site, or a web-based CLI tool, Svelte Bash offers the perfect balance of aesthetics and functionality.
 35 | 
 36 | ## Key Features
 37 | 
 38 | *   **Lightweight & Fast**: Zero external dependencies, ~4kb gzipped.
 39 | *   **Virtual File System**: fully functional `ls`, `cd`, `cat`, and `pwd` commands.
 40 | *   **Deep Theming**: Includes `dracula`, `matrix`, and `dark` presets, plus full CSS control.
 41 | *   **Autoplay Mode**: Script commands to run automatically—perfect for landing page demos.
 42 | *   **Accessible**: Proper focus management and keyboard history navigation (Up/Down arrows).
 43 | *   **TypeScript**: Written in TypeScript for excellent type safety and autocomplete.
 44 | 
 45 | ## Installation
 46 | 
 47 | ```bash
 48 | npm install svelte-bash
 49 | ```
 50 | 
 51 | ## Usage
 52 | 
 53 | ### Basic Example
 54 | 
 55 | Import the component and pass a `structure` object to define the virtual file system.
 56 | 
 57 | ```svelte
 58 | <script>
 59 |   import { Terminal } from 'svelte-bash';
 60 | 
 61 |   const fileSystem = {
 62 |     'readme.md': '# Hello World',
 63 |     'src': {
 64 |        'app.js': 'console.log("Hi")'
 65 |     }
 66 |   };
 67 | </script>
 68 | 
 69 | <Terminal 
 70 |     structure={fileSystem} 
 71 |     user="guest"
 72 |     style="height: 300px"
 73 | />
 74 | ```
 75 | 
 76 | ### Custom Commands
 77 | 
 78 | You can extend the terminal with your own commands by passing a `commands` object.
 79 | 
 80 | ```svelte
 81 | <script>
 82 |   import { Terminal } from 'svelte-bash';
 83 | 
 84 |   const myCommands = {
 85 |     // Return a string
 86 |     hello: () => "Hello form svelte-bash!",
 87 |     
 88 |     // Accept arguments
 89 |     echo: (args) => args.join(' '),
 90 |     
 91 |     // Async support
 92 |     fetchdata: async () => {
 93 |         const res = await fetch('https://api.example.com/data');
 94 |         return await res.text();
 95 |     }
 96 |   };
 97 | </script>
 98 | 
 99 | <Terminal commands={myCommands} />
100 | ```
101 | 
102 | ### Autoplay (Show Mode)
103 | 
104 | Perfect for documentation or presentations. The terminal will automatically type and execute the provided sequence.
105 | 
106 | ```svelte
107 | <Terminal 
108 |   autoplay={[
109 |     { command: "npm install svelte-bash" },
110 |     { command: "echo 'Installation complete!'", output: "Done." }
111 |   ]}
112 | />
113 | ```
114 | 
115 | ## Theming
116 | 
117 | Svelte Bash allows comprehensive styling customization.
118 | 
119 | **Built-in Presets:**
120 | - `dark` (default)
121 | - `light`
122 | - `dracula`
123 | - `matrix`
124 | 
125 | **Custom Theme Object:**
126 | 
127 | ```svelte
128 | <Terminal 
129 |   theme={{
130 |     background: '#1a1b26',
131 |     foreground: '#a9b1d6',
132 |     prompt: '#7aa2f7',
133 |     cursor: '#c0caf5'
134 |   }}
135 | />
136 | ```
137 | 
138 | ## API Reference
139 | 
140 | | Prop | Type | Default | Description |
141 | |------|------|---------|-------------|
142 | | `structure` | `FileStructure` | `{}` | Key-value pairs defining the virtual file system. |
143 | | `commands` | `Record<string, Function>` | `{}` | Custom command handlers. |
144 | | `theme` | `string` \| `Theme` | `'dark'` | Theme preset name or specific color object. |
145 | | `user` | `string` | `'user'` | The username displayed in the prompt. |
146 | | `machine` | `string` | `'machine'` | The machine name displayed in the prompt. |
147 | | `welcomeMessage` | `string` \| `string[]` | `[]` | Message shown on initialization. |
148 | | `autoplay` | `AutoplayItem[]` | `undefined` | Array of commands to execute automatically. |
149 | | `readonly` | `boolean` | `false` | If true, user input is disabled. |
150 | 
151 | ## Contributing
152 | 
153 | Contributions are welcome! Please feel free to submit a Pull Request.
154 | 
155 | ## License
156 | 
157 | MIT © [Yusuf Cengiz](https://github.com/YusufCeng1z)
158 | 


--------------------------------------------------------------------------------
/dist/shell.js:
--------------------------------------------------------------------------------
  1 | export class Shell {
  2 |     structure;
  3 |     customCommands;
  4 |     cwd;
  5 |     history;
  6 |     user;
  7 |     constructor(structure = {}, commands = {}, user = 'user', history = []) {
  8 |         this.structure = structure;
  9 |         this.customCommands = commands;
 10 |         this.user = user;
 11 |         this.history = history;
 12 |         this.cwd = ['~'];
 13 |     }
 14 |     get currentPath() {
 15 |         return this.cwd;
 16 |     }
 17 |     setHistory(h) {
 18 |         this.history = h;
 19 |     }
 20 |     setStructure(s) {
 21 |         this.structure = s;
 22 |     }
 23 |     setCommands(c) {
 24 |         this.customCommands = c;
 25 |     }
 26 |     /**
 27 |      * Resolve path parts to a node in the file structure.
 28 |      */
 29 |     resolveNode(pathParts) {
 30 |         let current = this.structure;
 31 |         // If path starts at root (not supported in this simple version unless we add '/' handling)
 32 |         // We assume structure IS the root.
 33 |         // We currently handle paths relative to root for simplification as `~` is implicit root here.
 34 |         // Actually, let's just traverse the structure object.
 35 |         for (const part of pathParts) {
 36 |             if (part === '~')
 37 |                 continue;
 38 |             if (typeof current === 'object' && current[part]) {
 39 |                 current = current[part];
 40 |             }
 41 |             else {
 42 |                 return undefined;
 43 |             }
 44 |         }
 45 |         return current;
 46 |     }
 47 |     /**
 48 |      * Process a command string and return the updated history lines (or void if direct history mutation).
 49 |      * Actually, let's return a list of NEW lines provided by the command execution.
 50 |      */
 51 |     async execute(input) {
 52 |         const trimmed = input.trim();
 53 |         if (!trimmed)
 54 |             return [];
 55 |         const [cmd, ...args] = trimmed.split(/\s+/);
 56 |         const outputLines = [];
 57 |         // 1. Built-in: clear
 58 |         if (cmd === 'clear') {
 59 |             // Signal to clear history. 
 60 |             // We can return a special signal or just handle it in the component?
 61 |             // "Types" didn't specify a clear signal. 
 62 |             // Let's assume the component checks for 'CLEAR_SIGNAL' or we act on history reference?
 63 |             // Cleaner: return a specific line type or handle it. 
 64 |             // Let's just return a "system" type? Or rely on component to clear if it sees special property?
 65 |             // Actually, we can just return a 'clear' type line if we update types? 
 66 |             // Or just return null?
 67 |             // "Professional": The shell should control history. 
 68 |             // But Svelte reactivity means component owns the 'history' array usually.
 69 |             // Let's make this method just return the RESULT of the command.
 70 |             // Special handling for clear:
 71 |             return [{ type: 'command', content: 'CLEAR_SIGNAL', id: -1 }];
 72 |         }
 73 |         // 2. Built-in: ls
 74 |         if (cmd === 'ls') {
 75 |             const ptr = this.resolveNode(this.cwd);
 76 |             if (ptr && typeof ptr === 'object') {
 77 |                 const entries = Object.entries(ptr).map(([name, val]) => {
 78 |                     return typeof val === 'object' ? name + '/' : name;
 79 |                 });
 80 |                 outputLines.push({ type: 'output', content: entries.length ? entries.join('  ') : '' });
 81 |             }
 82 |             else {
 83 |                 outputLines.push({ type: 'error', content: `ls: cannot access '${this.cwd.join('/')}': Not a directory` });
 84 |             }
 85 |             return outputLines;
 86 |         }
 87 |         // 3. Built-in: cat
 88 |         if (cmd === 'cat') {
 89 |             const target = args[0];
 90 |             if (!target) {
 91 |                 return [{ type: 'error', content: 'usage: cat <file>' }];
 92 |             }
 93 |             // Resolve path relative to CWD
 94 |             // Simple 1-level check for now (or improve to full path parser)
 95 |             const ptr = this.resolveNode(this.cwd);
 96 |             if (ptr && typeof ptr === 'object' && ptr[target]) {
 97 |                 const file = ptr[target];
 98 |                 if (typeof file === 'string') {
 99 |                     return [{ type: 'output', content: file }];
100 |                 }
101 |                 return [{ type: 'error', content: `cat: ${target}: Is a directory` }];
102 |             }
103 |             return [{ type: 'error', content: `cat: ${target}: No such file` }];
104 |         }
105 |         // 4. Built-in: cd
106 |         if (cmd === 'cd') {
107 |             const target = args[0];
108 |             if (!target || target === '~') {
109 |                 this.cwd = ['~'];
110 |                 return [];
111 |             }
112 |             if (target === '..') {
113 |                 if (this.cwd.length > 1) {
114 |                     this.cwd.pop();
115 |                 }
116 |                 return [];
117 |             }
118 |             // Allow relative one-level down
119 |             const ptr = this.resolveNode(this.cwd);
120 |             if (ptr && typeof ptr === 'object' && ptr[target]) {
121 |                 if (typeof ptr[target] === 'object') {
122 |                     this.cwd.push(target);
123 |                 }
124 |                 else {
125 |                     return [{ type: 'error', content: `cd: ${target}: Not a directory` }];
126 |                 }
127 |             }
128 |             else {
129 |                 return [{ type: 'error', content: `cd: ${target}: No such file or directory` }];
130 |             }
131 |             return [];
132 |         }
133 |         // 5. Built-in: pwd
134 |         if (cmd === 'pwd') {
135 |             return [{ type: 'output', content: '/' + this.cwd.slice(1).join('/') }]; // slice(1) to ignore ~ as explicit root string
136 |         }
137 |         // 6. Built-in: help
138 |         if (cmd === 'help') {
139 |             const custom = Object.keys(this.customCommands);
140 |             const content = `Available commands: clear, ls, cat, cd, pwd, help${custom.length ? ', ' + custom.join(', ') : ''}`;
141 |             return [{ type: 'output', content }];
142 |         }
143 |         // 7. Custom Commands
144 |         if (this.customCommands[cmd]) {
145 |             try {
146 |                 const res = await this.customCommands[cmd](args);
147 |                 if (res)
148 |                     return [{ type: 'output', content: res }];
149 |                 return [];
150 |             }
151 |             catch (err) {
152 |                 return [{ type: 'error', content: err.message || String(err) }];
153 |             }
154 |         }
155 |         return [{ type: 'error', content: `Command not found: ${cmd}` }];
156 |     }
157 | }
158 | 


--------------------------------------------------------------------------------
/src/lib/shell.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | import type { FileStructure, CommandHandler, TerminalLine } from './types';
  3 | 
  4 | export class Shell {
  5 |     private structure: FileStructure;
  6 |     private customCommands: Record<string, CommandHandler>;
  7 |     private cwd: string[];
  8 |     private history: TerminalLine[];
  9 |     private user: string;
 10 | 
 11 |     constructor(
 12 |         structure: FileStructure = {},
 13 |         commands: Record<string, CommandHandler> = {},
 14 |         user: string = 'user',
 15 |         history: TerminalLine[] = []
 16 |     ) {
 17 |         this.structure = structure;
 18 |         this.customCommands = commands;
 19 |         this.user = user;
 20 |         this.history = history;
 21 |         this.cwd = ['~'];
 22 |     }
 23 | 
 24 |     public get currentPath(): string[] {
 25 |         return this.cwd;
 26 |     }
 27 | 
 28 |     public setHistory(h: TerminalLine[]) {
 29 |         this.history = h;
 30 |     }
 31 | 
 32 |     public setStructure(s: FileStructure) {
 33 |         this.structure = s;
 34 |     }
 35 | 
 36 |     public setCommands(c: Record<string, CommandHandler>) {
 37 |         this.customCommands = c;
 38 |     }
 39 | 
 40 |     /**
 41 |      * Resolve path parts to a node in the file structure.
 42 |      */
 43 |     private resolveNode(pathParts: string[]): FileStructure | string | undefined {
 44 |         let current: FileStructure | string = this.structure;
 45 | 
 46 |         // If path starts at root (not supported in this simple version unless we add '/' handling)
 47 |         // We assume structure IS the root.
 48 |         // We currently handle paths relative to root for simplification as `~` is implicit root here.
 49 | 
 50 |         // Actually, let's just traverse the structure object.
 51 |         for (const part of pathParts) {
 52 |             if (part === '~') continue;
 53 |             if (typeof current === 'object' && current[part]) {
 54 |                 current = current[part];
 55 |             } else {
 56 |                 return undefined;
 57 |             }
 58 |         }
 59 |         return current;
 60 |     }
 61 | 
 62 |     /**
 63 |      * Process a command string and return the updated history lines (or void if direct history mutation).
 64 |      * Actually, let's return a list of NEW lines provided by the command execution.
 65 |      */
 66 |     public async execute(input: string): Promise<TerminalLine[]> {
 67 |         const trimmed = input.trim();
 68 |         if (!trimmed) return [];
 69 | 
 70 |         const [cmd, ...args] = trimmed.split(/\s+/);
 71 |         const outputLines: TerminalLine[] = [];
 72 | 
 73 |         // 1. Built-in: clear
 74 |         if (cmd === 'clear') {
 75 |             // Signal to clear history. 
 76 |             // We can return a special signal or just handle it in the component?
 77 |             // "Types" didn't specify a clear signal. 
 78 |             // Let's assume the component checks for 'CLEAR_SIGNAL' or we act on history reference?
 79 |             // Cleaner: return a specific line type or handle it. 
 80 |             // Let's just return a "system" type? Or rely on component to clear if it sees special property?
 81 |             // Actually, we can just return a 'clear' type line if we update types? 
 82 |             // Or just return null?
 83 |             // "Professional": The shell should control history. 
 84 |             // But Svelte reactivity means component owns the 'history' array usually.
 85 |             // Let's make this method just return the RESULT of the command.
 86 |             // Special handling for clear:
 87 |             return [{ type: 'command' as any, content: 'CLEAR_SIGNAL', id: -1 }];
 88 |         }
 89 | 
 90 |         // 2. Built-in: ls
 91 |         if (cmd === 'ls') {
 92 |             const ptr = this.resolveNode(this.cwd);
 93 |             if (ptr && typeof ptr === 'object') {
 94 |                 const entries = Object.entries(ptr).map(([name, val]) => {
 95 |                     return typeof val === 'object' ? name + '/' : name;
 96 |                 });
 97 |                 outputLines.push({ type: 'output', content: entries.length ? entries.join('  ') : '' });
 98 |             } else {
 99 |                 outputLines.push({ type: 'error', content: `ls: cannot access '${this.cwd.join('/')}': Not a directory` });
100 |             }
101 |             return outputLines;
102 |         }
103 | 
104 |         // 3. Built-in: cat
105 |         if (cmd === 'cat') {
106 |             const target = args[0];
107 |             if (!target) {
108 |                 return [{ type: 'error', content: 'usage: cat <file>' }];
109 |             }
110 |             // Resolve path relative to CWD
111 |             // Simple 1-level check for now (or improve to full path parser)
112 |             const ptr = this.resolveNode(this.cwd);
113 |             if (ptr && typeof ptr === 'object' && ptr[target]) {
114 |                 const file = ptr[target];
115 |                 if (typeof file === 'string') {
116 |                     return [{ type: 'output', content: file }];
117 |                 }
118 |                 return [{ type: 'error', content: `cat: ${target}: Is a directory` }];
119 |             }
120 |             return [{ type: 'error', content: `cat: ${target}: No such file` }];
121 |         }
122 | 
123 |         // 4. Built-in: cd
124 |         if (cmd === 'cd') {
125 |             const target = args[0];
126 |             if (!target || target === '~') {
127 |                 this.cwd = ['~'];
128 |                 return [];
129 |             }
130 |             if (target === '..') {
131 |                 if (this.cwd.length > 1) {
132 |                     this.cwd.pop();
133 |                 }
134 |                 return [];
135 |             }
136 | 
137 |             // Allow relative one-level down
138 |             const ptr = this.resolveNode(this.cwd);
139 |             if (ptr && typeof ptr === 'object' && ptr[target]) {
140 |                 if (typeof ptr[target] === 'object') {
141 |                     this.cwd.push(target);
142 |                 } else {
143 |                     return [{ type: 'error', content: `cd: ${target}: Not a directory` }];
144 |                 }
145 |             } else {
146 |                 return [{ type: 'error', content: `cd: ${target}: No such file or directory` }];
147 |             }
148 |             return [];
149 |         }
150 | 
151 |         // 5. Built-in: pwd
152 |         if (cmd === 'pwd') {
153 |             return [{ type: 'output', content: '/' + this.cwd.slice(1).join('/') }]; // slice(1) to ignore ~ as explicit root string
154 |         }
155 | 
156 |         // 6. Built-in: help
157 |         if (cmd === 'help') {
158 |             const custom = Object.keys(this.customCommands);
159 |             const content = `Available commands: clear, ls, cat, cd, pwd, help${custom.length ? ', ' + custom.join(', ') : ''}`;
160 |             return [{ type: 'output', content }];
161 |         }
162 | 
163 |         // 7. Custom Commands
164 |         if (this.customCommands[cmd]) {
165 |             try {
166 |                 const res = await this.customCommands[cmd](args);
167 |                 if (res) return [{ type: 'output', content: res as any }];
168 |                 return [];
169 |             } catch (err: any) {
170 |                 return [{ type: 'error', content: err.message || String(err) }];
171 |             }
172 |         }
173 | 
174 |         return [{ type: 'error', content: `Command not found: ${cmd}` }];
175 |     }
176 | }
177 | 


--------------------------------------------------------------------------------
/src/lib/Terminal.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import { onMount, tick } from "svelte";
  3 |     import { type TerminalProps, type TerminalLine, Themes } from "./types";
  4 |     import { Shell } from "./shell";
  5 | 
  6 |     // Props
  7 |     export let commands: TerminalProps["commands"] = {};
  8 |     export let structure: TerminalProps["structure"] = {};
  9 |     export let theme: TerminalProps["theme"] = "dark";
 10 |     export let welcomeMessage: TerminalProps["welcomeMessage"] = "";
 11 |     export let user: TerminalProps["user"] = "user";
 12 |     export let promptStr: TerminalProps["promptStr"] = "";
 13 |     export let autoplay: TerminalProps["autoplay"] = undefined;
 14 |     export let autoplayLoop: boolean = true;
 15 |     export let typingSpeed: number = 50;
 16 | 
 17 |     // Style Props
 18 |     let clazz: string = "";
 19 |     export { clazz as class };
 20 | 
 21 |     // Internal State
 22 |     let history: TerminalLine[] = [];
 23 |     let currentInput = "";
 24 | 
 25 |     // Input history state
 26 |     let inputHistory: string[] = [];
 27 |     let historyIndex = -1;
 28 |     let tempInput = "";
 29 | 
 30 |     // Theme resolution
 31 |     const defaultTheme = {
 32 |         background: "#1a1b26",
 33 |         foreground: "#a9b1d6",
 34 |         prompt: "#7aa2f7",
 35 |         cursor: "#c0caf5",
 36 |     };
 37 |     $: activeTheme =
 38 |         typeof theme === "string"
 39 |             ? Themes[theme] || defaultTheme
 40 |             : { ...defaultTheme, ...theme };
 41 | 
 42 |     // Shell Logic Instance
 43 |     const shell = new Shell(structure, commands, user);
 44 | 
 45 |     // Reactivity for props -> Shell
 46 |     $: if (structure) shell.setStructure(structure);
 47 |     $: if (commands) shell.setCommands(commands);
 48 | 
 49 |     // Elements
 50 |     let container: HTMLDivElement;
 51 |     let inputElement: HTMLInputElement;
 52 | 
 53 |     // Initialize
 54 |     onMount(() => {
 55 |         if (welcomeMessage) {
 56 |             addToHistory({ type: "output", content: welcomeMessage });
 57 |         }
 58 |         if (autoplay && autoplay.length > 0) {
 59 |             runAutoplay();
 60 |         }
 61 |     });
 62 | 
 63 |     async function runAutoplay() {
 64 |         while (true) {
 65 |             for (const item of autoplay!) {
 66 |                 await typeCommand(item.command);
 67 |                 await sleep(500);
 68 | 
 69 |                 addToHistory({ type: "command", content: item.command });
 70 |                 currentInput = "";
 71 | 
 72 |                 if (item.output) {
 73 |                     await sleep(200);
 74 |                     addToHistory({ type: "output", content: item.output });
 75 |                 }
 76 |                 await sleep(1000);
 77 |             }
 78 |             if (!autoplayLoop) break;
 79 |             history = [];
 80 |             await sleep(500);
 81 |         }
 82 |     }
 83 | 
 84 |     async function typeCommand(cmd: string) {
 85 |         currentInput = "";
 86 |         for (const char of cmd) {
 87 |             currentInput += char;
 88 |             await sleep(typingSpeed + Math.random() * 20);
 89 |         }
 90 |     }
 91 | 
 92 |     function sleep(ms: number) {
 93 |         return new Promise((r) => setTimeout(r, ms));
 94 |     }
 95 | 
 96 |     function addToHistory(line: Omit<TerminalLine, "id">) {
 97 |         history = [...history, { ...line, id: Date.now() + Math.random() }];
 98 |         scrollToBottom();
 99 |     }
100 | 
101 |     async function scrollToBottom() {
102 |         await tick();
103 |         if (container) container.scrollTop = container.scrollHeight;
104 |     }
105 | 
106 |     async function handleEnter() {
107 |         const raw = currentInput;
108 |         currentInput = "";
109 | 
110 |         // Reset navigation
111 |         historyIndex = -1;
112 |         tempInput = "";
113 | 
114 |         // 1. Snapshot Prompt & Add Command
115 |         const currentPath = shell.currentPath.join("/");
116 |         const promptLabel = promptStr || `${user}@host ${currentPath} $`;
117 | 
118 |         addToHistory({ type: "command", content: raw, promptLabel });
119 | 
120 |         if (!raw.trim()) return;
121 | 
122 |         // Save to input history
123 |         inputHistory = [...inputHistory, raw];
124 | 
125 |         // 2. Execute
126 |         const results = await shell.execute(raw);
127 | 
128 |         // 3. Handle Results
129 |         for (const line of results) {
130 |             if (
131 |                 line.type === ("command" as any) &&
132 |                 line.content === "CLEAR_SIGNAL"
133 |             ) {
134 |                 history = [];
135 |                 return;
136 |             }
137 |             addToHistory(line);
138 |         }
139 |     }
140 | 
141 |     function handleKeydown(e: KeyboardEvent) {
142 |         if (e.key === "Enter") {
143 |             handleEnter();
144 |         } else if (e.key === "ArrowUp") {
145 |             e.preventDefault();
146 |             if (inputHistory.length === 0) return;
147 | 
148 |             if (historyIndex === -1) {
149 |                 // Save current typing before moving up
150 |                 tempInput = currentInput;
151 |                 historyIndex = inputHistory.length - 1;
152 |             } else if (historyIndex > 0) {
153 |                 historyIndex--;
154 |             }
155 |             currentInput = inputHistory[historyIndex];
156 |             // Move cursor to end? Browsers usually do this automatically on value change.
157 |         } else if (e.key === "ArrowDown") {
158 |             e.preventDefault();
159 |             if (historyIndex === -1) return;
160 | 
161 |             if (historyIndex < inputHistory.length - 1) {
162 |                 historyIndex++;
163 |                 currentInput = inputHistory[historyIndex];
164 |             } else {
165 |                 // Back to temp
166 |                 historyIndex = -1;
167 |                 currentInput = tempInput;
168 |             }
169 |         }
170 |     }
171 | </script>
172 | 
173 | <!-- 
174 |   Uses vanilla CSS classes instead of Tailwind to ensure zero-dependency 
175 |   compatibility across all projects.
176 | -->
177 | <div
178 |     bind:this={container}
179 |     on:click={() => inputElement?.focus()}
180 |     role="button"
181 |     tabindex="0"
182 |     on:keydown={() => {}}
183 |     {...$$restProps}
184 |     class="svelte-bash-terminal custom-scrollbar {clazz}"
185 |     style="
186 |         background-color: {activeTheme.background}; 
187 |         color: {activeTheme.foreground};
188 |         border-color: {activeTheme.prompt}33;
189 |         {$$restProps.style || ''}
190 |     "
191 | >
192 |     <!-- HISTORY rendering -->
193 |     {#each history as line (line.id)}
194 |         <div class="line">
195 |             {#if line.type === "command"}
196 |                 <span class="prompt-label" style="color: {activeTheme.prompt};">
197 |                     {line.promptLabel || "$"}
198 |                 </span>
199 |                 <span>{line.content}</span>
200 |             {:else if line.type === "error"}
201 |                 <span class="error">{line.content}</span>
202 |             {:else}
203 |                 <!-- Output -->
204 |                 {#if typeof line.content === "string"}
205 |                     <div class="output">
206 |                         {line.content}
207 |                     </div>
208 |                 {:else if Array.isArray(line.content)}
209 |                     {#each line.content as item}
210 |                         <div class="output">{item}</div>
211 |                     {/each}
212 |                 {:else}
213 |                     <svelte:component this={line.content} />
214 |                 {/if}
215 |             {/if}
216 |         </div>
217 |     {/each}
218 | 
219 |     <!-- ACTIVE INPUT LINE -->
220 |     {#if !autoplay}
221 |         <div class="input-line">
222 |             <span
223 |                 class="prompt-label shrink-0"
224 |                 style="color: {activeTheme.prompt};"
225 |             >
226 |                 {promptStr || `${user}@host ${shell.currentPath.join("/")} $`}
227 |             </span>
228 |             <input
229 |                 bind:this={inputElement}
230 |                 bind:value={currentInput}
231 |                 on:keydown={handleKeydown}
232 |                 class="terminal-input"
233 |                 style="color: {activeTheme.cursor}; caret-color: {activeTheme.cursor};"
234 |                 spellcheck="false"
235 |                 autocomplete="off"
236 |                 autofocus
237 |             />
238 |         </div>
239 |     {:else}
240 |         <div class="input-line">
241 |             <span
242 |                 class="prompt-label shrink-0"
243 |                 style="color: {activeTheme.prompt};"
244 |             >
245 |                 {promptStr || `${user}@host ${shell.currentPath.join("/")} $`}
246 |             </span>
247 |             <span>{currentInput}</span>
248 |             <span
249 |                 class="cursor-block"
250 |                 style="background-color: {activeTheme.cursor};"
251 |             ></span>
252 |         </div>
253 |     {/if}
254 | </div>
255 | 
256 | <style>
257 |     /* Container Styles */
258 |     .svelte-bash-terminal {
259 |         width: 100%;
260 |         height: 100%;
261 |         overflow-y: auto;
262 |         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
263 |             "Liberation Mono", "Courier New", monospace;
264 |         font-size: 14px;
265 |         padding: 1rem;
266 |         border-width: 1px;
267 |         border-style: solid;
268 |         border-radius: 0.25rem;
269 |         transition:
270 |             background-color 0.3s,
271 |             color 0.3s;
272 |         cursor: text;
273 |         display: block;
274 |         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
275 |         box-sizing: border-box;
276 |         text-align: left;
277 |     }
278 | 
279 |     /* Common Line Styles */
280 |     .line {
281 |         margin-bottom: 0.25rem;
282 |         line-height: 1.375;
283 |         word-break: break-all;
284 |     }
285 | 
286 |     .prompt-label {
287 |         font-weight: bold;
288 |         margin-right: 0.5rem;
289 |         user-select: none;
290 |     }
291 | 
292 |     .error {
293 |         color: #ef4444; /* red-500 */
294 |     }
295 | 
296 |     .output {
297 |         white-space: pre-wrap;
298 |         opacity: 0.9;
299 |     }
300 | 
301 |     /* Input Area */
302 |     .input-line {
303 |         display: flex;
304 |         align-items: center;
305 |         margin-bottom: 0.25rem;
306 |         line-height: 1.375;
307 |         width: 100%;
308 |     }
309 | 
310 |     .shrink-0 {
311 |         flex-shrink: 0;
312 |     }
313 | 
314 |     .terminal-input {
315 |         flex: 1;
316 |         background-color: transparent !important;
317 |         background: transparent !important;
318 |         border: none !important;
319 |         outline: none !important;
320 |         box-shadow: none !important;
321 |         padding: 0 !important;
322 |         margin: 0 !important;
323 |         width: 100%;
324 |         font-family: inherit;
325 |         font-size: inherit;
326 |     }
327 | 
328 |     .terminal-input:focus {
329 |         outline: none !important;
330 |         border: none !important;
331 |     }
332 | 
333 |     /* Autoplay Cursor */
334 |     .cursor-block {
335 |         display: inline-block;
336 |         width: 0.6em;
337 |         height: 1.2em;
338 |         vertical-align: middle;
339 |         margin-left: 0.25rem;
340 |         animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
341 |     }
342 | 
343 |     @keyframes pulse {
344 |         0%,
345 |         100% {
346 |             opacity: 1;
347 |         }
348 |         50% {
349 |             opacity: 0.5;
350 |         }
351 |     }
352 | 
353 |     /* Scrollbar */
354 |     .custom-scrollbar::-webkit-scrollbar {
355 |         width: 8px;
356 |     }
357 |     .custom-scrollbar::-webkit-scrollbar-track {
358 |         background: transparent;
359 |     }
360 |     .custom-scrollbar::-webkit-scrollbar-thumb {
361 |         background: rgba(255, 255, 255, 0.2);
362 |         border-radius: 4px;
363 |     }
364 | </style>
365 | 


--------------------------------------------------------------------------------
/dist/Terminal.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import { onMount, tick } from "svelte";
  3 |     import { type TerminalProps, type TerminalLine, Themes } from "./types";
  4 |     import { Shell } from "./shell";
  5 | 
  6 |     // Props
  7 |     export let commands: TerminalProps["commands"] = {};
  8 |     export let structure: TerminalProps["structure"] = {};
  9 |     export let theme: TerminalProps["theme"] = "dark";
 10 |     export let welcomeMessage: TerminalProps["welcomeMessage"] = "";
 11 |     export let user: TerminalProps["user"] = "user";
 12 |     export let promptStr: TerminalProps["promptStr"] = "";
 13 |     export let autoplay: TerminalProps["autoplay"] = undefined;
 14 |     export let autoplayLoop: boolean = true;
 15 |     export let typingSpeed: number = 50;
 16 | 
 17 |     // Style Props
 18 |     let clazz: string = "";
 19 |     export { clazz as class };
 20 | 
 21 |     // Internal State
 22 |     let history: TerminalLine[] = [];
 23 |     let currentInput = "";
 24 | 
 25 |     // Input history state
 26 |     let inputHistory: string[] = [];
 27 |     let historyIndex = -1;
 28 |     let tempInput = "";
 29 | 
 30 |     // Theme resolution
 31 |     const defaultTheme = {
 32 |         background: "#1a1b26",
 33 |         foreground: "#a9b1d6",
 34 |         prompt: "#7aa2f7",
 35 |         cursor: "#c0caf5",
 36 |     };
 37 |     $: activeTheme =
 38 |         typeof theme === "string"
 39 |             ? Themes[theme] || defaultTheme
 40 |             : { ...defaultTheme, ...theme };
 41 | 
 42 |     // Shell Logic Instance
 43 |     const shell = new Shell(structure, commands, user);
 44 | 
 45 |     // Reactivity for props -> Shell
 46 |     $: if (structure) shell.setStructure(structure);
 47 |     $: if (commands) shell.setCommands(commands);
 48 | 
 49 |     // Elements
 50 |     let container: HTMLDivElement;
 51 |     let inputElement: HTMLInputElement;
 52 | 
 53 |     // Initialize
 54 |     onMount(() => {
 55 |         if (welcomeMessage) {
 56 |             addToHistory({ type: "output", content: welcomeMessage });
 57 |         }
 58 |         if (autoplay && autoplay.length > 0) {
 59 |             runAutoplay();
 60 |         }
 61 |     });
 62 | 
 63 |     async function runAutoplay() {
 64 |         while (true) {
 65 |             for (const item of autoplay!) {
 66 |                 await typeCommand(item.command);
 67 |                 await sleep(500);
 68 | 
 69 |                 addToHistory({ type: "command", content: item.command });
 70 |                 currentInput = "";
 71 | 
 72 |                 if (item.output) {
 73 |                     await sleep(200);
 74 |                     addToHistory({ type: "output", content: item.output });
 75 |                 }
 76 |                 await sleep(1000);
 77 |             }
 78 |             if (!autoplayLoop) break;
 79 |             history = [];
 80 |             await sleep(500);
 81 |         }
 82 |     }
 83 | 
 84 |     async function typeCommand(cmd: string) {
 85 |         currentInput = "";
 86 |         for (const char of cmd) {
 87 |             currentInput += char;
 88 |             await sleep(typingSpeed + Math.random() * 20);
 89 |         }
 90 |     }
 91 | 
 92 |     function sleep(ms: number) {
 93 |         return new Promise((r) => setTimeout(r, ms));
 94 |     }
 95 | 
 96 |     function addToHistory(line: Omit<TerminalLine, "id">) {
 97 |         history = [...history, { ...line, id: Date.now() + Math.random() }];
 98 |         scrollToBottom();
 99 |     }
100 | 
101 |     async function scrollToBottom() {
102 |         await tick();
103 |         if (container) container.scrollTop = container.scrollHeight;
104 |     }
105 | 
106 |     async function handleEnter() {
107 |         const raw = currentInput;
108 |         currentInput = "";
109 | 
110 |         // Reset navigation
111 |         historyIndex = -1;
112 |         tempInput = "";
113 | 
114 |         // 1. Snapshot Prompt & Add Command
115 |         const currentPath = shell.currentPath.join("/");
116 |         const promptLabel = promptStr || `${user}@host ${currentPath} $`;
117 | 
118 |         addToHistory({ type: "command", content: raw, promptLabel });
119 | 
120 |         if (!raw.trim()) return;
121 | 
122 |         // Save to input history
123 |         inputHistory = [...inputHistory, raw];
124 | 
125 |         // 2. Execute
126 |         const results = await shell.execute(raw);
127 | 
128 |         // 3. Handle Results
129 |         for (const line of results) {
130 |             if (
131 |                 line.type === ("command" as any) &&
132 |                 line.content === "CLEAR_SIGNAL"
133 |             ) {
134 |                 history = [];
135 |                 return;
136 |             }
137 |             addToHistory(line);
138 |         }
139 |     }
140 | 
141 |     function handleKeydown(e: KeyboardEvent) {
142 |         if (e.key === "Enter") {
143 |             handleEnter();
144 |         } else if (e.key === "ArrowUp") {
145 |             e.preventDefault();
146 |             if (inputHistory.length === 0) return;
147 | 
148 |             if (historyIndex === -1) {
149 |                 // Save current typing before moving up
150 |                 tempInput = currentInput;
151 |                 historyIndex = inputHistory.length - 1;
152 |             } else if (historyIndex > 0) {
153 |                 historyIndex--;
154 |             }
155 |             currentInput = inputHistory[historyIndex];
156 |             // Move cursor to end? Browsers usually do this automatically on value change.
157 |         } else if (e.key === "ArrowDown") {
158 |             e.preventDefault();
159 |             if (historyIndex === -1) return;
160 | 
161 |             if (historyIndex < inputHistory.length - 1) {
162 |                 historyIndex++;
163 |                 currentInput = inputHistory[historyIndex];
164 |             } else {
165 |                 // Back to temp
166 |                 historyIndex = -1;
167 |                 currentInput = tempInput;
168 |             }
169 |         }
170 |     }
171 | </script>
172 | 
173 | <!-- 
174 |   Uses vanilla CSS classes instead of Tailwind to ensure zero-dependency 
175 |   compatibility across all projects.
176 | -->
177 | <div
178 |     bind:this={container}
179 |     on:click={() => inputElement?.focus()}
180 |     role="button"
181 |     tabindex="0"
182 |     on:keydown={() => {}}
183 |     {...$$restProps}
184 |     class="svelte-bash-terminal custom-scrollbar {clazz}"
185 |     style="
186 |         background-color: {activeTheme.background}; 
187 |         color: {activeTheme.foreground};
188 |         border-color: {activeTheme.prompt}33;
189 |         {$$restProps.style || ''}
190 |     "
191 | >
192 |     <!-- HISTORY rendering -->
193 |     {#each history as line (line.id)}
194 |         <div class="line">
195 |             {#if line.type === "command"}
196 |                 <span class="prompt-label" style="color: {activeTheme.prompt};">
197 |                     {line.promptLabel || "$"}
198 |                 </span>
199 |                 <span>{line.content}</span>
200 |             {:else if line.type === "error"}
201 |                 <span class="error">{line.content}</span>
202 |             {:else}
203 |                 <!-- Output -->
204 |                 {#if typeof line.content === "string"}
205 |                     <div class="output">
206 |                         {line.content}
207 |                     </div>
208 |                 {:else if Array.isArray(line.content)}
209 |                     {#each line.content as item}
210 |                         <div class="output">{item}</div>
211 |                     {/each}
212 |                 {:else}
213 |                     <svelte:component this={line.content} />
214 |                 {/if}
215 |             {/if}
216 |         </div>
217 |     {/each}
218 | 
219 |     <!-- ACTIVE INPUT LINE -->
220 |     {#if !autoplay}
221 |         <div class="input-line">
222 |             <span
223 |                 class="prompt-label shrink-0"
224 |                 style="color: {activeTheme.prompt};"
225 |             >
226 |                 {promptStr || `${user}@host ${shell.currentPath.join("/")} $`}
227 |             </span>
228 |             <input
229 |                 bind:this={inputElement}
230 |                 bind:value={currentInput}
231 |                 on:keydown={handleKeydown}
232 |                 class="terminal-input"
233 |                 style="color: {activeTheme.cursor}; caret-color: {activeTheme.cursor};"
234 |                 spellcheck="false"
235 |                 autocomplete="off"
236 |                 autofocus
237 |             />
238 |         </div>
239 |     {:else}
240 |         <div class="input-line">
241 |             <span
242 |                 class="prompt-label shrink-0"
243 |                 style="color: {activeTheme.prompt};"
244 |             >
245 |                 {promptStr || `${user}@host ${shell.currentPath.join("/")} $`}
246 |             </span>
247 |             <span>{currentInput}</span>
248 |             <span
249 |                 class="cursor-block"
250 |                 style="background-color: {activeTheme.cursor};"
251 |             ></span>
252 |         </div>
253 |     {/if}
254 | </div>
255 | 
256 | <style>
257 |     /* Container Styles */
258 |     .svelte-bash-terminal {
259 |         width: 100%;
260 |         height: 100%;
261 |         min-height: 300px;
262 |         max-height: 500px;
263 |         overflow-y: auto;
264 |         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
265 |             "Liberation Mono", "Courier New", monospace;
266 |         font-size: 14px;
267 |         padding: 1rem;
268 |         border-width: 1px;
269 |         border-style: solid;
270 |         border-radius: 0.25rem;
271 |         transition:
272 |             background-color 0.3s,
273 |             color 0.3s;
274 |         cursor: text;
275 |         display: block;
276 |         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
277 |         box-sizing: border-box;
278 |         text-align: left;
279 |     }
280 | 
281 |     /* Common Line Styles */
282 |     .line {
283 |         margin-bottom: 0.25rem;
284 |         line-height: 1.375;
285 |         word-break: break-all;
286 |     }
287 | 
288 |     .prompt-label {
289 |         font-weight: bold;
290 |         margin-right: 0.5rem;
291 |         user-select: none;
292 |     }
293 | 
294 |     .error {
295 |         color: #ef4444; /* red-500 */
296 |     }
297 | 
298 |     .output {
299 |         white-space: pre-wrap;
300 |         opacity: 0.9;
301 |     }
302 | 
303 |     /* Input Area */
304 |     .input-line {
305 |         display: flex;
306 |         align-items: center;
307 |         margin-bottom: 0.25rem;
308 |         line-height: 1.375;
309 |         width: 100%;
310 |     }
311 | 
312 |     .shrink-0 {
313 |         flex-shrink: 0;
314 |     }
315 | 
316 |     .terminal-input {
317 |         flex: 1;
318 |         background-color: transparent !important;
319 |         background: transparent !important;
320 |         border: none !important;
321 |         outline: none !important;
322 |         box-shadow: none !important;
323 |         padding: 0 !important;
324 |         margin: 0 !important;
325 |         width: 100%;
326 |         font-family: inherit;
327 |         font-size: inherit;
328 |     }
329 | 
330 |     .terminal-input:focus {
331 |         outline: none !important;
332 |         border: none !important;
333 |     }
334 | 
335 |     /* Autoplay Cursor */
336 |     .cursor-block {
337 |         display: inline-block;
338 |         width: 0.6em;
339 |         height: 1.2em;
340 |         vertical-align: middle;
341 |         margin-left: 0.25rem;
342 |         animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
343 |     }
344 | 
345 |     @keyframes pulse {
346 |         0%,
347 |         100% {
348 |             opacity: 1;
349 |         }
350 |         50% {
351 |             opacity: 0.5;
352 |         }
353 |     }
354 | 
355 |     /* Scrollbar */
356 |     .custom-scrollbar::-webkit-scrollbar {
357 |         width: 8px;
358 |     }
359 |     .custom-scrollbar::-webkit-scrollbar-track {
360 |         background: transparent;
361 |     }
362 |     .custom-scrollbar::-webkit-scrollbar-thumb {
363 |         background: rgba(255, 255, 255, 0.2);
364 |         border-radius: 4px;
365 |     }
366 | </style>
367 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import { Terminal } from "$lib";
  3 |     import type { FileStructure } from "$lib/types";
  4 | 
  5 |     // --- DEMO DATA ---
  6 |     const myFiles: FileStructure = {
  7 |         "readme.md":
  8 |             "# Svelte Bash\nA configurable, lightweight terminal component.",
  9 |         src: {
 10 |             "App.svelte": "<script>...</scr" + "ipt>",
 11 |             "main.ts": "console.log('Hello Terminal');",
 12 |         },
 13 |         public: {
 14 |             "favicon.ico": "[BINARY CONTENT]",
 15 |         },
 16 |     };
 17 | 
 18 |     const myCommands = {
 19 |         star: async () => "⭐ Thank you for the star! You are awesome.",
 20 |         socials: async () => "GitHub: github.com/username\nTwitter: @username",
 21 |     };
 22 | 
 23 |     const codeExample = `<div style="height: 400px">
 24 |   <Terminal 
 25 |      structure={myFiles}
 26 |      commands={myCommands}
 27 |      welcomeMessage="Welcome!"
 28 |      user="developer"
 29 |   />
 30 | </div>`;
 31 | 
 32 |     // --- UI Logic ---
 33 |     let copied = false;
 34 |     function copyInstall() {
 35 |         navigator.clipboard.writeText("npm install svelte-bash");
 36 |         copied = true;
 37 |         setTimeout(() => (copied = false), 2000);
 38 |     }
 39 | </script>
 40 | 
 41 | <svelte:head>
 42 |     <title>Svelte Bash - The Terminal Component for Svelte</title>
 43 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 44 |     <link
 45 |         rel="preconnect"
 46 |         href="https://fonts.gstatic.com"
 47 |         crossorigin="anonymous"
 48 |     />
 49 |     <link
 50 |         href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
 51 |         rel="stylesheet"
 52 |     />
 53 |     <style>
 54 |         :root {
 55 |             font-family: "Inter", sans-serif;
 56 |         }
 57 |         .bg-grid-pattern {
 58 |             background-size: 40px 40px;
 59 |             background-image: linear-gradient(
 60 |                     to right,
 61 |                     rgba(0, 0, 0, 0.05) 1px,
 62 |                     transparent 1px
 63 |                 ),
 64 |                 linear-gradient(
 65 |                     to bottom,
 66 |                     rgba(0, 0, 0, 0.05) 1px,
 67 |                     transparent 1px
 68 |                 );
 69 |         }
 70 |         .perspective-container {
 71 |             perspective: 2000px;
 72 |         }
 73 |         .hero-terminal {
 74 |             transition: transform 0.5s ease-out;
 75 |             box-shadow:
 76 |                 0 0 0 1px rgba(0, 0, 0, 0.05),
 77 |                 0 20px 50px -10px rgba(0, 0, 0, 0.3);
 78 |         }
 79 |         .hero-terminal:hover {
 80 |             transform: translateY(-5px);
 81 |             box-shadow:
 82 |                 0 0 0 1px rgba(0, 0, 0, 0.05),
 83 |                 0 30px 60px -12px rgba(0, 0, 0, 0.4);
 84 |         }
 85 |     </style>
 86 | </svelte:head>
 87 | 
 88 | <div
 89 |     class="min-h-screen bg-white text-slate-800 font-sans selection:bg-blue-100 bg-grid-pattern"
 90 | >
 91 |     <!-- NAVBAR -->
 92 |     <nav
 93 |         class="border-b border-gray-200 bg-white/80 backdrop-blur-md sticky top-0 z-50"
 94 |     >
 95 |         <div
 96 |             class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"
 97 |         >
 98 |             <div class="flex items-center gap-2">
 99 |                 <div
100 |                     class="w-8 h-8 rounded-lg bg-slate-950 flex items-center justify-center text-white font-mono font-bold text-xs shadow-lg shadow-blue-900/10"
101 |                 >
102 |                     >_
103 |                 </div>
104 |                 <div class="flex flex-col">
105 |                     <span
106 |                         class="font-bold text-sm tracking-tight text-slate-950 leading-none"
107 |                         >svelte-bash</span
108 |                     >
109 |                     <span
110 |                         class="text-[10px] text-slate-500 font-medium tracking-wide"
111 |                         >v1.0.0</span
112 |                     >
113 |                 </div>
114 |             </div>
115 |             <div class="flex items-center gap-4">
116 |                 <a
117 |                     href="https://github.com/YusufCeng1z/svelte-bash"
118 |                     target="_blank"
119 |                     class="hidden sm:flex items-center gap-2 text-xs font-semibold text-slate-600 hover:text-slate-950 transition-colors border border-slate-200 rounded-lg px-3 py-2 hover:bg-slate-50"
120 |                 >
121 |                     <svg
122 |                         class="w-4 h-4"
123 |                         fill="currentColor"
124 |                         viewBox="0 0 24 24"
125 |                         aria-hidden="true"
126 |                         ><path
127 |                             fill-rule="evenodd"
128 |                             d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
129 |                             clip-rule="evenodd"
130 |                         ></path></svg
131 |                     >
132 |                     <span>Star on GitHub</span>
133 |                 </a>
134 | 
135 |                 <button
136 |                     on:click={copyInstall}
137 |                     class="group flex items-center gap-2 bg-slate-950 text-white rounded-lg px-4 py-2 text-xs font-mono font-medium hover:bg-slate-800 transition-all shadow-md shadow-slate-900/10"
138 |                 >
139 |                     <span class="text-slate-400">$</span>
140 |                     <span>npm i svelte-bash</span>
141 |                     <span
142 |                         class="opacity-50 group-hover:opacity-100 transition-opacity ml-1"
143 |                     >
144 |                         {copied ? "✓" : "⎘"}
145 |                     </span>
146 |                 </button>
147 |             </div>
148 |         </div>
149 |     </nav>
150 | 
151 |     <main class="max-w-7xl mx-auto px-6 pt-24 pb-32">
152 |         <div
153 |             class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center perspective-container"
154 |         >
155 |             <!-- LEFT: Hero Content -->
156 |             <div
157 |                 class="space-y-10 animate-in slide-in-from-bottom-5 fade-in duration-700"
158 |             >
159 |                 <div class="space-y-8">
160 |                     <a
161 |                         href="https://github.com/YusufCeng1z/svelte-bash/releases"
162 |                         target="_blank"
163 |                         class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold text-slate-700 hover:border-slate-300 transition-colors cursor-pointer group"
164 |                     >
165 |                         <span class="flex h-2 w-2 relative">
166 |                             <span
167 |                                 class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
168 |                             ></span>
169 |                             <span
170 |                                 class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"
171 |                             ></span>
172 |                         </span>
173 |                         <span class="tracking-wide">v1.0.0 released</span>
174 |                         <svg
175 |                             class="w-3 h-3 text-slate-400 group-hover:translate-x-0.5 transition-transform"
176 |                             fill="none"
177 |                             viewBox="0 0 24 24"
178 |                             stroke="currentColor"
179 |                             ><path
180 |                                 stroke-linecap="round"
181 |                                 stroke-linejoin="round"
182 |                                 stroke-width="2"
183 |                                 d="M9 5l7 7-7 7"
184 |                             /></svg
185 |                         >
186 |                     </a>
187 | 
188 |                     <h1
189 |                         class="text-6xl sm:text-7xl font-[800] tracking-tight text-slate-950 leading-[1.05]"
190 |                     >
191 |                         The Terminal <br />
192 |                         <span
193 |                             class="text-transparent bg-clip-text bg-gradient-to-br from-slate-950 via-slate-700 to-slate-500"
194 |                             >for Svelte.</span
195 |                         >
196 |                     </h1>
197 | 
198 |                     <p
199 |                         class="text-lg sm:text-xl text-slate-600 leading-relaxed max-w-md font-medium"
200 |                     >
201 |                         A beautifully typed, file-system ready terminal
202 |                         component. Give your app a CLI power-user interface in
203 |                         minutes.
204 |                     </p>
205 | 
206 |                     <div class="flex flex-wrap items-center gap-4 pt-2">
207 |                         <button
208 |                             on:click={() => copyInstall()}
209 |                             class="inline-flex items-center justify-center rounded-lg text-sm font-semibold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 disabled:opacity-50 disabled:pointer-events-none ring-offset-2 bg-slate-950 text-white hover:bg-slate-800 h-12 px-8 shadow-xl shadow-slate-950/10 hover:shadow-2xl hover:-translate-y-0.5"
210 |                         >
211 |                             Get Started
212 |                         </button>
213 |                         <a
214 |                             href="https://github.com/YusufCeng1z/svelte-bash"
215 |                             target="_blank"
216 |                             class="inline-flex items-center justify-center rounded-lg text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 disabled:opacity-50 disabled:pointer-events-none ring-offset-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 h-12 px-8 shadow-sm"
217 |                         >
218 |                             <svg
219 |                                 class="mr-2 w-4 h-4"
220 |                                 fill="currentColor"
221 |                                 viewBox="0 0 24 24"
222 |                                 ><path
223 |                                     fill-rule="evenodd"
224 |                                     d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
225 |                                     clip-rule="evenodd"
226 |                                 ></path></svg
227 |                             >
228 |                             GitHub
229 |                         </a>
230 |                     </div>
231 |                 </div>
232 |             </div>
233 | 
234 |             <!-- RIGHT: 3D Terminal Visual -->
235 |             <div class="relative lg:-mr-16 hero-terminal">
236 |                 <!-- Decorative Glows -->
237 |                 <div
238 |                     class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-emerald-500 rounded-2xl opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"
239 |                 ></div>
240 | 
241 |                 <!-- Terminal Window -->
242 |                 <div
243 |                     class="relative rounded-xl overflow-hidden bg-[#1e1e2e] ring-1 ring-white/10 shadow-2xl h-[550px] flex flex-col"
244 |                 >
245 |                     <!-- Title Bar -->
246 |                     <div
247 |                         class="h-10 bg-[#181825] border-b border-[#313244] flex items-center px-4 gap-2 shrink-0"
248 |                     >
249 |                         <div class="flex gap-2">
250 |                             <div
251 |                                 class="w-3 h-3 rounded-full bg-[#f38ba8]"
252 |                             ></div>
253 |                             <div
254 |                                 class="w-3 h-3 rounded-full bg-[#f9e2af]"
255 |                             ></div>
256 |                             <div
257 |                                 class="w-3 h-3 rounded-full bg-[#a6e3a1]"
258 |                             ></div>
259 |                         </div>
260 |                         <div
261 |                             class="ml-4 flex items-center gap-2 px-3 py-1 bg-[#1e1e2e] rounded-t-md text-[10px] text-slate-400 font-mono mt-2"
262 |                         >
263 |                             <span>user@svelte-bash</span>
264 |                             <span class="text-slate-600">x</span>
265 |                         </div>
266 |                     </div>
267 |                     <!-- Terminal Component -->
268 |                     <div class="flex-1 overflow-hidden relative">
269 |                         <!-- Overlay gradient for content fade at bottom -->
270 |                         <div
271 |                             class="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-[#1e1e2e] to-transparent pointer-events-none z-10"
272 |                         ></div>
273 | 
274 |                         <Terminal
275 |                             structure={myFiles}
276 |                             commands={myCommands}
277 |                             welcomeMessage={[
278 |                                 "Welcome to Svelte Bash v1.0.0",
279 |                                 "---------------------------------",
280 |                                 "This is currently running in an interactive demo container.",
281 |                                 "Type 'help' to see available commands.",
282 |                             ]}
283 |                             user="guest"
284 |                             class="h-full pb-8"
285 |                         />
286 |                     </div>
287 |                 </div>
288 | 
289 |                 <!-- Reflection/Grounding Shadow -->
290 |                 <div
291 |                     class="absolute -bottom-[40px] left-[10%] right-[10%] h-[30px] bg-black/40 blur-[40px] rounded-full pointer-events-none"
292 |                 ></div>
293 |             </div>
294 |         </div>
295 |     </main>
296 | 
297 |     <!-- DOCUMENTATION & EXAMPLES -->
298 |     <section
299 |         id="docs"
300 |         class="border-t border-slate-200 bg-slate-50 py-24 scroll-mt-20"
301 |     >
302 |         <div class="max-w-5xl mx-auto px-6 space-y-24">
303 |             <!-- 1. Installation -->
304 |             <div class="space-y-6">
305 |                 <div class="flex items-center gap-3">
306 |                     <div
307 |                         class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-lg"
308 |                     >
309 |                         1
310 |                     </div>
311 |                     <h2 class="text-3xl font-bold text-slate-900">
312 |                         Installation
313 |                     </h2>
314 |                 </div>
315 |                 <p class="text-lg text-slate-600 max-w-2xl">
316 |                     Get started by installing the package via npm. It has zero
317 |                     dependencies other than Svelte itself.
318 |                 </p>
319 |                 <div
320 |                     class="rounded-lg bg-[#09090b] border border-slate-800 shadow-xl overflow-hidden p-6 max-w-2xl"
321 |                 >
322 |                     <div
323 |                         class="flex justify-between items-center text-slate-400 font-mono text-sm"
324 |                     >
325 |                         <span>npm install svelte-bash</span>
326 |                         <button
327 |                             class="hover:text-white transition-colors"
328 |                             on:click={copyInstall}
329 |                         >
330 |                             {copied ? "Copied" : "Copy"}
331 |                         </button>
332 |                     </div>
333 |                 </div>
334 |             </div>
335 | 
336 |             <!-- 2. Basic Usage -->
337 |             <div class="space-y-6">
338 |                 <div class="flex items-center gap-3">
339 |                     <div
340 |                         class="w-10 h-10 rounded-lg bg-violet-100 flex items-center justify-center text-violet-600 font-bold text-lg"
341 |                     >
342 |                         2
343 |                     </div>
344 |                     <h2 class="text-3xl font-bold text-slate-900">
345 |                         Basic Usage
346 |                     </h2>
347 |                 </div>
348 |                 <p class="text-lg text-slate-600 max-w-2xl">
349 |                     Import the component and pass a <code>structure</code> object
350 |                     to define your file system.
351 |                 </p>
352 |                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
353 |                     <!-- Code -->
354 |                     <div
355 |                         class="rounded-lg bg-[#09090b] border border-slate-800 shadow-xl overflow-hidden p-6 text-sm"
356 |                     >
357 |                         <pre
358 |                             class="font-mono text-blue-100 leading-relaxed overflow-x-auto"><code
359 |                                 >&lt;script&gt;
360 |   import {`{`} Terminal {`}`} from 'svelte-bash';
361 | 
362 |   const <span class="text-yellow-400">files</span> = {`{`}
363 |     'readme.md': '# Hello World',
364 |     'src': {`{`}
365 |        'app.js': 'console.log("Hi")'
366 |     {`}`}
367 |   {`}`};
368 | &lt;/script&gt;
369 | 
370 | &lt;Terminal 
371 |     structure={`{`}<span class="text-yellow-400">files</span>{`}`} 
372 |     user="alice" 
373 |     style="height: 300px"
374 | /&gt;</code
375 |                             ></pre>
376 |                     </div>
377 |                     <!-- Preview -->
378 |                     <div
379 |                         class="rounded-xl overflow-hidden shadow-lg ring-1 ring-slate-900/10"
380 |                     >
381 |                         <Terminal
382 |                             structure={{
383 |                                 "readme.md": "# Hello World",
384 |                                 src: { "app.js": 'console.log("Hi")' },
385 |                             }}
386 |                             welcomeMessage="Default setup. Type 'ls' or 'cat readme.md'"
387 |                             user="alice"
388 |                             style="height: 300px; width: 100%;"
389 |                         />
390 |                     </div>
391 |                 </div>
392 |             </div>
393 | 
394 |             <!-- 3. Advanced Features (Tabs) -->
395 |             <div class="space-y-8">
396 |                 <div class="flex items-center gap-3">
397 |                     <div
398 |                         class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center text-emerald-600 font-bold text-lg"
399 |                     >
400 |                         3
401 |                     </div>
402 |                     <h2 class="text-3xl font-bold text-slate-900">
403 |                         Advanced Features
404 |                     </h2>
405 |                 </div>
406 | 
407 |                 <div class="grid grid-cols-1 gap-16">
408 |                     <!-- Feature A: custom commands -->
409 |                     <div
410 |                         class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
411 |                     >
412 |                         <div class="space-y-4 order-2 lg:order-1">
413 |                             <h3 class="text-xl font-bold text-slate-900">
414 |                                 Custom Commands
415 |                             </h3>
416 |                             <p class="text-slate-600">
417 |                                 Pass a <code>commands</code> object to handle custom
418 |                                 logic. You can return a string, an array of lines,
419 |                                 or even other Svelte components.
420 |                             </p>
421 |                             <div
422 |                                 class="rounded-lg bg-[#09090b] border border-slate-800 shadow-lg p-5 text-xs"
423 |                             >
424 |                                 <pre
425 |                                     class="font-mono text-blue-100 overflow-x-auto"><code
426 |                                         >const <span class="text-green-400"
427 |                                             >cmds</span
428 |                                         > = {`{`}
429 |   <span class="text-purple-400">greet</span
430 |                                         >: (args) =&gt; `Hello ${`{`}args[0]{`}`}`,
431 |   <span class="text-purple-400">async</span>: async () =&gt; {`{`}
432 |      await fetch('/api');
433 |      return 'Done!';
434 |   {`}`}
435 | {`}`};
436 | 
437 | &lt;Terminal 
438 |    commands={`{`}<span class="text-green-400">cmds</span>{`}`} 
439 |    style="height: 300px" 
440 | /&gt;</code
441 |                                     ></pre>
442 |                             </div>
443 |                         </div>
444 |                         <div
445 |                             class="order-1 lg:order-2 rounded-xl overflow-hidden shadow-lg ring-1 ring-slate-900/10"
446 |                         >
447 |                             <Terminal
448 |                                 commands={{
449 |                                     greet: (args) =>
450 |                                         `Hello ${args[0] || "Friend"}!`,
451 |                                     time: () => new Date().toLocaleTimeString(),
452 |                                 }}
453 |                                 welcomeMessage="Type 'greet [name]' or 'time'"
454 |                                 style="height: 250px; width: 100%;"
455 |                             />
456 |                         </div>
457 |                     </div>
458 | 
459 |                     <!-- Feature B: Autoplay -->
460 |                     <div
461 |                         class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
462 |                     >
463 |                         <div
464 |                             class="order-1 rounded-xl overflow-hidden shadow-lg ring-1 ring-slate-900/10"
465 |                         >
466 |                             <Terminal
467 |                                 theme="dracula"
468 |                                 autoplay={[
469 |                                     { command: "git status" },
470 |                                     {
471 |                                         command: "git commit -m 'wip'",
472 |                                         output: "[main 2d3f4a] wip",
473 |                                     },
474 |                                 ]}
475 |                                 style="height: 250px; width: 100%;"
476 |                             />
477 |                         </div>
478 |                         <div class="space-y-4 order-2">
479 |                             <h3 class="text-xl font-bold text-slate-900">
480 |                                 Autoplay / Show Mode
481 |                             </h3>
482 |                             <p class="text-slate-600">
483 |                                 Great for tutorials. The terminal will type for
484 |                                 you.
485 |                             </p>
486 |                             <div
487 |                                 class="rounded-lg bg-[#09090b] border border-slate-800 shadow-lg p-5 text-xs"
488 |                             >
489 |                                 <pre
490 |                                     class="font-mono text-blue-100 overflow-x-auto"><code
491 |                                         >&lt;Terminal 
492 |   <span class="text-purple-400">autoplay</span>={`{[`}
493 |     {`{`} command: 'git status' {`}`},
494 |     {`{`} 
495 |       command: 'git commit -m "wip"', 
496 |       output: '...' 
497 |     {`}`}
498 |   {`]}`}
499 |   style="height: 300px"
500 | /&gt;</code
501 |                                     ></pre>
502 |                             </div>
503 |                         </div>
504 |                     </div>
505 | 
506 |                     <!-- Feature C: Theming -->
507 |                     <div
508 |                         class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
509 |                     >
510 |                         <div class="space-y-4 order-2 lg:order-1">
511 |                             <h3 class="text-xl font-bold text-slate-900">
512 |                                 Deep Theming
513 |                             </h3>
514 |                             <p class="text-slate-600">
515 |                                 Override standard colors with the <code
516 |                                     >theme</code
517 |                                 > prop.
518 |                             </p>
519 |                             <div
520 |                                 class="rounded-lg bg-[#09090b] border border-slate-800 shadow-lg p-5 text-xs"
521 |                             >
522 |                                 <pre
523 |                                     class="font-mono text-blue-100 overflow-x-auto"><code
524 |                                         >&lt;Terminal 
525 |   <span class="text-purple-400">theme</span>={`{{`}
526 |     background: '#282a36',
527 |     prompt: '#ff79c6',
528 |     cursor: '#f8f8f2'
529 |   {`}}`}
530 |   style="height: 300px"
531 | /&gt;</code
532 |                                     ></pre>
533 |                             </div>
534 |                         </div>
535 |                         <div
536 |                             class="order-1 lg:order-2 rounded-xl overflow-hidden shadow-lg ring-1 ring-slate-900/10"
537 |                         >
538 |                             <Terminal
539 |                                 theme={{
540 |                                     background: "#282a36",
541 |                                     prompt: "#ff79c6",
542 |                                     cursor: "#f8f8f2",
543 |                                     foreground: "#f8f8f2",
544 |                                 }}
545 |                                 welcomeMessage="Custom Dracula Variant"
546 |                                 style="height: 250px; width: 100%;"
547 |                             />
548 |                         </div>
549 |                     </div>
550 |                 </div>
551 |             </div>
552 | 
553 |             <!-- 4. API Reference -->
554 |             <div class="space-y-6 pt-12 border-t border-slate-200">
555 |                 <h2 class="text-3xl font-bold text-slate-900">API Reference</h2>
556 |                 <div class="overflow-x-auto">
557 |                     <table class="w-full text-left text-sm border-collapse">
558 |                         <thead>
559 |                             <tr class="border-b border-slate-200">
560 |                                 <th class="py-4 font-semibold text-slate-900"
561 |                                     >Prop</th
562 |                                 >
563 |                                 <th class="py-4 font-semibold text-slate-900"
564 |                                     >Type</th
565 |                                 >
566 |                                 <th class="py-4 font-semibold text-slate-900"
567 |                                     >Default</th
568 |                                 >
569 |                                 <th class="py-4 font-semibold text-slate-900"
570 |                                     >Description</th
571 |                                 >
572 |                             </tr>
573 |                         </thead>
574 |                         <tbody class="text-slate-600">
575 |                             <tr class="border-b border-slate-100">
576 |                                 <td class="py-4 font-mono text-purple-600"
577 |                                     >structure</td
578 |                                 >
579 |                                 <td class="py-4 font-mono text-xs"
580 |                                     >FileStructure</td
581 |                                 >
582 |                                 <td class="py-4 font-mono text-xs"
583 |                                     ><code>{`{}`}</code></td
584 |                                 >
585 |                                 <td class="py-4"
586 |                                     >Virtual file system object key-value pairs.</td
587 |                                 >
588 |                             </tr>
589 |                             <tr class="border-b border-slate-100">
590 |                                 <td class="py-4 font-mono text-purple-600"
591 |                                     >commands</td
592 |                                 >
593 |                                 <td class="py-4 font-mono text-xs"
594 |                                     >Record&lt;string, Handler&gt;</td
595 |                                 >
596 |                                 <td class="py-4 font-mono text-xs"
597 |                                     ><code>{`{}`}</code></td
598 |                                 >
599 |                                 <td class="py-4">Custom command handlers.</td>
600 |                             </tr>
601 |                             <tr class="border-b border-slate-100">
602 |                                 <td class="py-4 font-mono text-purple-600"
603 |                                     >theme</td
604 |                                 >
605 |                                 <td class="py-4 font-mono text-xs"
606 |                                     >string | Theme</td
607 |                                 >
608 |                                 <td class="py-4 font-mono text-xs">'dark'</td>
609 |                                 <td class="py-4"
610 |                                     >Preset name ('dark', 'light', 'dracula') or
611 |                                     object.</td
612 |                                 >
613 |                             </tr>
614 |                             <tr class="border-b border-slate-100">
615 |                                 <td class="py-4 font-mono text-purple-600"
616 |                                     >autoplay</td
617 |                                 >
618 |                                 <td class="py-4 font-mono text-xs"
619 |                                     >AutoplayItem[]</td
620 |                                 >
621 |                                 <td class="py-4 font-mono text-xs">undefined</td
622 |                                 >
623 |                                 <td class="py-4"
624 |                                     >Array of commands to type automatically.</td
625 |                                 >
626 |                             </tr>
627 |                             <tr>
628 |                                 <td class="py-4 font-mono text-purple-600"
629 |                                     >user</td
630 |                                 >
631 |                                 <td class="py-4 font-mono text-xs">string</td>
632 |                                 <td class="py-4 font-mono text-xs">'user'</td>
633 |                                 <td class="py-4">Username shown in prompt.</td>
634 |                             </tr>
635 |                         </tbody>
636 |                     </table>
637 |                 </div>
638 |             </div>
639 |         </div>
640 |     </section>
641 | 
642 |     <!-- FOOTER -->
643 |     <footer class="border-t border-slate-200 bg-slate-50 py-12">
644 |         <div
645 |             class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4"
646 |         >
647 |             <div class="flex items-center gap-2">
648 |                 <div
649 |                     class="w-6 h-6 rounded bg-slate-900 flex items-center justify-center text-white font-mono font-bold text-[10px]"
650 |                 >
651 |                     >_
652 |                 </div>
653 |                 <span class="font-bold text-sm text-slate-900">svelte-bash</span
654 |                 >
655 |             </div>
656 |             <div class="flex items-center gap-6 text-sm text-slate-500">
657 |                 <a
658 |                     href="https://github.com/YusufCeng1z/svelte-bash"
659 |                     target="_blank"
660 |                     class="hover:text-slate-900 transition-colors">GitHub</a
661 |                 >
662 |                 <a
663 |                     href="https://www.npmjs.com/package/svelte-bash"
664 |                     target="_blank"
665 |                     class="hover:text-slate-900 transition-colors">NPM</a
666 |                 >
667 |                 <span>MIT License</span>
668 |             </div>
669 |         </div>
670 |     </footer>
671 | </div>
672 | 


--------------------------------------------------------------------------------