{"_id":"@aflansburg/terminal-ui","_rev":"5-06d4d12058e2ddadd9835ba270f8897b","name":"@aflansburg/terminal-ui","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@aflansburg/terminal-ui","version":"0.1.0","keywords":["svelte","svelte5","terminal","sci-fi","cyberpunk","components","ui","crt","retro","matrix","glitch","terminal-ui"],"author":{"url":"https://github.com/aflansburg","name":"Abram Flansburg"},"license":"MIT","_id":"@aflansburg/terminal-ui@0.1.0","maintainers":[{"name":"aflansburg","email":"abeflansburg@gmail.com"}],"homepage":"https://github.com/aflansburg/terminal-ui#readme","bugs":{"url":"https://github.com/aflansburg/terminal-ui/issues"},"dist":{"shasum":"e0bcd35dfd551ae1dce1dede8152171fc15f728c","tarball":"https://registry.npmjs.org/@aflansburg/terminal-ui/-/terminal-ui-0.1.0.tgz","fileCount":29,"integrity":"sha512-2SJBiDuql2964whPtKMEb7Ox+1sbYiLNgOD3Ohf1XiwRuVz+IEtqGhmCyRILs5aT5wULX8Gx7HDciPAd/CgRKg==","signatures":[{"sig":"MEYCIQDLOJZJgiaLcdis1X93uPZfrDPUlwLfgmyAyaMoGOUUXwIhAKauRnv2teviA+IQlAevkBusHTwmLK+X0eGj5IwrFOC6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52773},"type":"module","svelte":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","svelte":"./src/index.js"},"./theme":"./src/theme/index.js","./styles":"./src/styles/terminal-theme.css"},"scripts":{"test":"vitest run","test:ui":"vitest --ui","test:watch":"vitest","postversion":"git push && git push --tags","test:coverage":"vitest run --coverage","version:major":"npm version major -m \"chore: release v%s\"","version:minor":"npm version minor -m \"chore: release v%s\"","version:patch":"npm version patch -m \"chore: release v%s\"","prepublishOnly":"npm run test && node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json','utf8'));if(!pkg.name||!pkg.version||!pkg.description){console.error('Missing required package.json fields');process.exit(1)}if(!fs.existsSync('README.md')){console.error('README.md not found');process.exit(1)}if(!fs.existsSync('LICENSE')){console.error('LICENSE not found');process.exit(1)}console.log('✓ Package validation passed')\""},"_npmUser":{"name":"aflansburg","email":"abeflansburg@gmail.com"},"repository":{"url":"git+https://github.com/aflansburg/terminal-ui.git","type":"git"},"_npmVersion":"10.9.3","description":"Terminal-themed sci-fi UI component library for Svelte 5 with CRT effects, matrix animations, and cyberpunk aesthetics","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.10","jsdom":"^27.0.0","vitest":"^3.2.4","@testing-library/svelte":"^5.2.8","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0","tailwindcss":"^4.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/terminal-ui_0.1.0_1760732180316_0.9388916508074672","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aflansburg/terminal-ui","version":"0.1.2","keywords":["svelte","svelte5","terminal","sci-fi","cyberpunk","components","ui","crt","retro","matrix","glitch","terminal-ui"],"author":{"url":"https://github.com/aflansburg","name":"Abram Flansburg"},"license":"MIT","_id":"@aflansburg/terminal-ui@0.1.2","maintainers":[{"name":"aflansburg","email":"abeflansburg@gmail.com"}],"homepage":"https://github.com/aflansburg/terminal-ui#readme","bugs":{"url":"https://github.com/aflansburg/terminal-ui/issues"},"dist":{"shasum":"d659cf1fe5476bd232107d13e0eb51c8c1b1adbe","tarball":"https://registry.npmjs.org/@aflansburg/terminal-ui/-/terminal-ui-0.1.2.tgz","fileCount":29,"integrity":"sha512-C7V6oJvSFRmSi6tuEDodr4KaUFw/puC0ZEAyhhWuZ85JRWcjGoeBYYM9QEE7XbD954sWIDTVGBxJ28yEM56a4A==","signatures":[{"sig":"MEUCIC3jBh5x0fHTP2DxntahwH3YRGwewYtw218mmjbsKQLaAiEA3wHo/x5gAzwbE/KqpH6cCpHs8YCsdmhF+u8CXzL3wUY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aflansburg%2fterminal-ui@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":52927},"type":"module","svelte":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","svelte":"./src/index.js"},"./theme":"./src/theme/index.js","./styles":"./src/styles/terminal-theme.css"},"gitHead":"684302a3f98196d6489145e5baf0cab47e0edfef","scripts":{"test":"vitest run","test:ui":"vitest --ui","test:watch":"vitest","postversion":"git push && git push --tags","test:coverage":"vitest run --coverage","version:major":"npm version major -m \"chore: release v%s\"","version:minor":"npm version minor -m \"chore: release v%s\"","version:patch":"npm version patch -m \"chore: release v%s\"","prepublishOnly":"npm run test && node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json','utf8'));if(!pkg.name||!pkg.version||!pkg.description){console.error('Missing required package.json fields');process.exit(1)}if(!fs.existsSync('README.md')){console.error('README.md not found');process.exit(1)}if(!fs.existsSync('LICENSE')){console.error('LICENSE not found');process.exit(1)}console.log('✓ Package validation passed')\""},"_npmUser":{"name":"aflansburg","email":"abeflansburg@gmail.com"},"repository":{"url":"git+https://github.com/aflansburg/terminal-ui.git","type":"git"},"_npmVersion":"10.8.2","description":"Terminal-themed sci-fi UI component library for Svelte 5 with CRT effects, matrix animations, and cyberpunk aesthetics","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.10","jsdom":"^27.0.0","vitest":"^3.2.4","@vitest/coverage-v8":"^3.2.4","@testing-library/svelte":"^5.2.8","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0","tailwindcss":"^4.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/terminal-ui_0.1.2_1760733501121_0.05076493337280952","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@aflansburg/terminal-ui","version":"0.1.3","keywords":["svelte","svelte5","terminal","sci-fi","cyberpunk","components","ui","crt","retro","matrix","glitch","terminal-ui"],"author":{"url":"https://github.com/aflansburg","name":"Abram Flansburg"},"license":"MIT","_id":"@aflansburg/terminal-ui@0.1.3","maintainers":[{"name":"aflansburg","email":"abeflansburg@gmail.com"}],"homepage":"https://github.com/aflansburg/terminal-ui#readme","bugs":{"url":"https://github.com/aflansburg/terminal-ui/issues"},"dist":{"shasum":"ab33421a74a2f0a30486884384e79826b79a9a2e","tarball":"https://registry.npmjs.org/@aflansburg/terminal-ui/-/terminal-ui-0.1.3.tgz","fileCount":29,"integrity":"sha512-0Ecnqi0afHWvFtK6iBz9v9kh/tQfVigLgdsYowh+V5XRhvZORoBgkpfaAHMQ5N6cjLKTTixG0kEZkxjoauZPPA==","signatures":[{"sig":"MEUCIHZW/a8Owp9sUtpP6oJm9XqHLUp9a7oTXGgRZom+8wzPAiEAvQLaUc5nm4K/ChtJ53N2vnAG/52EfefbsY6ifM3aT3A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aflansburg%2fterminal-ui@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":53099},"type":"module","svelte":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","svelte":"./src/index.js"},"./theme":"./src/theme/index.js","./styles":"./src/styles/terminal-theme.css"},"gitHead":"297333d22d82375e6bdd0ea35bcce7fc03e29a61","scripts":{"test":"vitest run","test:ui":"vitest --ui","test:watch":"vitest","postversion":"git push && git push --tags","test:coverage":"vitest run --coverage","version:major":"npm version major -m \"chore: release v%s\"","version:minor":"npm version minor -m \"chore: release v%s\"","version:patch":"npm version patch -m \"chore: release v%s\"","prepublishOnly":"npm run test && node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json','utf8'));if(!pkg.name||!pkg.version||!pkg.description){console.error('Missing required package.json fields');process.exit(1)}if(!fs.existsSync('README.md')){console.error('README.md not found');process.exit(1)}if(!fs.existsSync('LICENSE')){console.error('LICENSE not found');process.exit(1)}console.log('✓ Package validation passed')\""},"_npmUser":{"name":"aflansburg","email":"abeflansburg@gmail.com"},"repository":{"url":"git+https://github.com/aflansburg/terminal-ui.git","type":"git"},"_npmVersion":"10.8.2","description":"Terminal-themed sci-fi UI component library for Svelte 5 with CRT effects, matrix animations, and cyberpunk aesthetics","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.10","jsdom":"^27.0.0","vitest":"^3.2.4","@vitest/coverage-v8":"^3.2.4","@testing-library/svelte":"^5.2.8","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0","tailwindcss":"^4.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/terminal-ui_0.1.3_1760733616445_0.43157990441139527","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@aflansburg/terminal-ui","version":"0.2.0","keywords":["svelte","svelte5","terminal","sci-fi","cyberpunk","components","ui","crt","retro","matrix","glitch","terminal-ui"],"author":{"url":"https://github.com/aflansburg","name":"Abram Flansburg"},"license":"MIT","_id":"@aflansburg/terminal-ui@0.2.0","maintainers":[{"name":"aflansburg","email":"abeflansburg@gmail.com"}],"homepage":"https://github.com/aflansburg/terminal-ui#readme","bugs":{"url":"https://github.com/aflansburg/terminal-ui/issues"},"dist":{"shasum":"342d7f329eb94d8d88a42043c26dc362622a6d6a","tarball":"https://registry.npmjs.org/@aflansburg/terminal-ui/-/terminal-ui-0.2.0.tgz","fileCount":29,"integrity":"sha512-aOt8IxowCDG2JgJ+wg9xSmk1m/Q3EarpipRd02w1OhnpnAXyi0gX5SCRuU7nSRW41Oilg+6iEL6EJ4WcJY3U7A==","signatures":[{"sig":"MEUCIEJXZVOGbLDUD4GjIWxw71GXJ/bIzL5+7oML0UfWg1PWAiEAo4ag8LGTqM4xr9Xv5/eYdCWo2pRAKVgC/HCgjVhobbQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aflansburg%2fterminal-ui@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":54898},"type":"module","svelte":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","svelte":"./src/index.js"},"./theme":"./src/theme/index.js","./styles":"./src/styles/terminal-theme.css"},"gitHead":"03e6632e9d57e5c5a31977c7bdfdd10d4d21a7c7","scripts":{"test":"vitest run","test:ui":"vitest --ui","test:watch":"vitest","postversion":"git push && git push --tags","test:coverage":"vitest run --coverage","version:major":"npm version major -m \"chore: release v%s\"","version:minor":"npm version minor -m \"chore: release v%s\"","version:patch":"npm version patch -m \"chore: release v%s\"","prepublishOnly":"npm run test && node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json','utf8'));if(!pkg.name||!pkg.version||!pkg.description){console.error('Missing required package.json fields');process.exit(1)}if(!fs.existsSync('README.md')){console.error('README.md not found');process.exit(1)}if(!fs.existsSync('LICENSE')){console.error('LICENSE not found');process.exit(1)}console.log('✓ Package validation passed')\""},"_npmUser":{"name":"aflansburg","email":"abeflansburg@gmail.com"},"repository":{"url":"git+https://github.com/aflansburg/terminal-ui.git","type":"git"},"_npmVersion":"10.8.2","description":"Terminal-themed sci-fi UI component library for Svelte 5 with CRT effects, matrix animations, and cyberpunk aesthetics","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.10","jsdom":"^27.0.0","vitest":"^3.2.4","@vitest/coverage-v8":"^3.2.4","@testing-library/svelte":"^5.2.8","@testing-library/jest-dom":"^6.9.1","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0","tailwindcss":"^4.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/terminal-ui_0.2.0_1760734444656_0.9042750289413612","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@aflansburg/terminal-ui","version":"0.3.0","description":"Terminal-themed sci-fi UI component library for Svelte 5 with CRT effects, matrix animations, and cyberpunk aesthetics","type":"module","svelte":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","svelte":"./src/index.js"},"./styles":"./src/styles/terminal-theme.css","./theme":"./src/theme/index.js"},"scripts":{"test":"vitest run","test:watch":"vitest","test:ui":"vitest --ui","test:coverage":"vitest run --coverage","prepublishOnly":"npm run test && node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json','utf8'));if(!pkg.name||!pkg.version||!pkg.description){console.error('Missing required package.json fields');process.exit(1)}if(!fs.existsSync('README.md')){console.error('README.md not found');process.exit(1)}if(!fs.existsSync('LICENSE')){console.error('LICENSE not found');process.exit(1)}console.log('✓ Package validation passed')\"","version:patch":"npm version patch -m \"chore: release v%s\"","version:minor":"npm version minor -m \"chore: release v%s\"","version:major":"npm version major -m \"chore: release v%s\"","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/aflansburg/terminal-ui.git"},"bugs":{"url":"https://github.com/aflansburg/terminal-ui/issues"},"homepage":"https://github.com/aflansburg/terminal-ui#readme","peerDependencies":{"svelte":"^5.0.0","tailwindcss":"^4.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"keywords":["svelte","svelte5","terminal","sci-fi","cyberpunk","components","ui","crt","retro","matrix","glitch","terminal-ui"],"author":{"name":"Abram Flansburg","url":"https://github.com/aflansburg"},"license":"MIT","devDependencies":{"@sveltejs/vite-plugin-svelte":"^6.2.1","@testing-library/jest-dom":"^6.9.1","@testing-library/svelte":"^5.2.8","@vitest/coverage-v8":"^3.2.4","jsdom":"^27.0.0","vite":"^7.1.10","vitest":"^3.2.4"},"_id":"@aflansburg/terminal-ui@0.3.0","gitHead":"a3f3b4fbc6a3c23d9a29794d80688e0aa278b0f4","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-teLjJEBbhuDnCHvPSkw697DBK9nuXYSuxf04z4BIinRqSHCRu6tL5yZnALj6742YCrUAVo4LaNPy9fjVk00sBQ==","shasum":"ebc09cd18cd4ab2b2030823391b2993ea0d7d4c7","tarball":"https://registry.npmjs.org/@aflansburg/terminal-ui/-/terminal-ui-0.3.0.tgz","fileCount":32,"unpackedSize":350108,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aflansburg%2fterminal-ui@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFSHa65VHrqiBpSQ5etj8FNP9afccRQv4QUj8DFflujCAiEAyDH9eE8PY3aS6bGNEKbPxC52DEnHybde+IGi17+mjoU="}]},"_npmUser":{"name":"aflansburg","email":"abeflansburg@gmail.com"},"directories":{},"maintainers":[{"name":"aflansburg","email":"abeflansburg@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/terminal-ui_0.3.0_1761587821341_0.3064975924534583"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-17T20:16:20.219Z","modified":"2025-10-27T17:57:02.233Z","0.1.0":"2025-10-17T20:16:20.565Z","0.1.2":"2025-10-17T20:38:21.308Z","0.1.3":"2025-10-17T20:40:16.651Z","0.2.0":"2025-10-17T20:54:04.866Z","0.3.0":"2025-10-27T17:57:01.843Z"},"bugs":{"url":"https://github.com/aflansburg/terminal-ui/issues"},"author":{"name":"Abram Flansburg","url":"https://github.com/aflansburg"},"license":"MIT","homepage":"https://github.com/aflansburg/terminal-ui#readme","keywords":["svelte","svelte5","terminal","sci-fi","cyberpunk","components","ui","crt","retro","matrix","glitch","terminal-ui"],"repository":{"type":"git","url":"git+https://github.com/aflansburg/terminal-ui.git"},"description":"Terminal-themed sci-fi UI component library for Svelte 5 with CRT effects, matrix animations, and cyberpunk aesthetics","maintainers":[{"name":"aflansburg","email":"abeflansburg@gmail.com"}],"readme":"# @aflansburg/terminal-ui\n\n[![Test](https://github.com/aflansburg/terminal-ui/actions/workflows/test.yml/badge.svg)](https://github.com/aflansburg/terminal-ui/actions/workflows/test.yml)\n[![Deployment](https://github.com/aflansburg/terminal-ui/actions/workflows/publish.yml/badge.svg)](https://github.com/aflansburg/terminal-ui/actions/workflows/publish.yml)\n[![npm version](https://img.shields.io/badge/npm-%40aflansburg%2Fterminal-ui?style=flat&logo=npm&logoColor=%23CB3837&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40aflansburg%2Fterminal-ui)](https://www.npmjs.com/package/@aflansburg/terminal-ui)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA terminal-themed, sci-fi styled UI component library for Svelte 5. Features CRT screen effects, matrix-style animations, and cyberpunk aesthetics.\n\n## See it in action\n\nhttps://engabe.com\n\n![Terminal UI Demo](./demo.gif)\n\n## Features\n\n- **Terminal-themed components** - Buttons, containers, modals, and headers with authentic CRT/terminal styling\n- **Rich animations** - Scanlines, glitches, VHS effects, portal pulses, and matrix rain\n- **Icon library** - 12 pre-styled SVG icons\n- **Design tokens** - Consistent color palette and styling variables\n- **TypeScript support** - Full type definitions included\n- **Responsive** - Mobile-first design with responsive breakpoints\n- **Svelte 5 ready** - Built with latest Svelte features (runes, snippets)\n\n## Installation\n\n```bash\nnpm install @aflansburg/terminal-ui\n```\n\nOr with pnpm:\n\n```bash\npnpm add @aflansburg/terminal-ui\n```\n\n## Usage\n\n### Import Styles\n\nFirst, import the terminal theme CSS in your main app file:\n\n```css\n/* In your app.css or main CSS file */\n@import '@aflansburg/terminal-ui/styles';\n```\n\nOr import it in your Svelte layout:\n\n```svelte\n<script>\n  import '@aflansburg/terminal-ui/styles';\n</script>\n```\n\n### Components\n\n#### TerminalButton\n\n```svelte\n<script>\n  import { TerminalButton } from '@aflansburg/terminal-ui';\n</script>\n\n<TerminalButton onclick={() => console.log('clicked')}>\n  > EXECUTE_COMMAND\n</TerminalButton>\n\n<TerminalButton variant=\"disabled\" size=\"lg\">\n  > SYSTEM_OFFLINE\n</TerminalButton>\n```\n\n**Props:**\n- `variant?: 'default' | 'disabled' | 'danger'` - Button style variant\n- `size?: 'sm' | 'md' | 'lg'` - Button size\n- `class?: string` - Additional CSS classes\n- `onclick?: (event: MouseEvent) => void` - Click handler\n- `disabled?: boolean` - Disable button\n\n#### TerminalContainer\n\n```svelte\n<script>\n  import { TerminalContainer } from '@aflansburg/terminal-ui';\n</script>\n\n<TerminalContainer bordered dark>\n  <p class=\"terminal-font text-terminal-green\">Content goes here</p>\n</TerminalContainer>\n\n<TerminalContainer portalBorder>\n  <p>Portal-themed container with pulsing animation</p>\n</TerminalContainer>\n```\n\n**Props:**\n- `bordered?: boolean` - Add terminal-green glowing border\n- `portalBorder?: boolean` - Add portal-themed pulsing border\n- `dark?: boolean` - Add dark background\n- `class?: string` - Additional CSS classes\n\n#### TerminalHeader\n\n```svelte\n<script>\n  import { TerminalHeader } from '@aflansburg/terminal-ui';\n</script>\n\n<TerminalHeader\n  title=\"C-137-INFO TERMINAL\"\n  subtitle=\"INTERDIMENSIONAL DATABASE\"\n/>\n\n<TerminalHeader title=\"STATUS\" centered={false} />\n```\n\n**Props:**\n- `title: string` - Header title text\n- `subtitle?: string` - Optional subtitle text\n- `centered?: boolean` - Center align text (default: true)\n- `class?: string` - Additional CSS classes\n\n#### TerminalModal\n\n```svelte\n<script>\n  import { TerminalModal } from '@aflansburg/terminal-ui';\n\n  let isOpen = $state(false);\n</script>\n\n<TerminalButton onclick={() => isOpen = true}>\n  Open Modal\n</TerminalButton>\n\n<TerminalModal\n  isOpen={isOpen}\n  onClose={() => isOpen = false}\n  title=\"SYSTEM MESSAGE\"\n  subtitle=\"ATTENTION REQUIRED\"\n>\n  <p class=\"terminal-font text-terminal-green\">\n    Modal content goes here\n  </p>\n</TerminalModal>\n```\n\n**Props:**\n- `isOpen: boolean` - Control modal visibility\n- `onClose: () => void` - Close handler\n- `title?: string` - Modal title\n- `subtitle?: string` - Modal subtitle\n- `showDataStream?: boolean` - Show animated data stream background (default: true)\n\n#### TerminalBootSequence\n\nA full-screen terminal boot sequence animation that displays system initialization messages.\n\n```svelte\n<script>\n  import { TerminalBootSequence } from '@aflansburg/terminal-ui';\n\n  let showBoot = $state(true);\n</script>\n\n<TerminalBootSequence\n  shouldShow={showBoot}\n  systemDesignation=\"ALPHA-7\"\n  onComplete={() => {\n    showBoot = false;\n    console.log('Boot sequence complete!');\n  }}\n/>\n```\n\n**Props:**\n- `shouldShow?: boolean` - Whether to show the boot sequence (default: true)\n- `systemDesignation?: string` - System designation text displayed in the sequence (default: 'UNKNOWN')\n- `onComplete?: () => void` - Callback fired when the boot sequence completes\n- `lineDelay?: number` - Delay between each line in milliseconds (default: 200)\n- `completeDelay?: number` - Delay before hiding after completion in milliseconds (default: 2000)\n\n#### MatrixLyrics\n\nA Matrix-style animated text overlay that displays lyrics or text in cascading or straight-line modes with glitch effects.\n\n```svelte\n<script>\n  import { MatrixLyrics } from '@aflansburg/terminal-ui';\n\n  let showLyrics = $state(true);\n  const songLyrics = \"Wake up Neo The Matrix has you Follow the white rabbit\";\n</script>\n\n<MatrixLyrics\n  isActive={showLyrics}\n  lyrics={songLyrics}\n  mode=\"matrix\"\n/>\n\n<!-- Or use straight mode for centered scrolling text -->\n<MatrixLyrics\n  isActive={showLyrics}\n  lyrics={songLyrics}\n  mode=\"straight\"\n/>\n```\n\n**Props:**\n- `isActive?: boolean` - Whether to show the lyrics overlay (default: false)\n- `lyrics?: string` - Space-separated lyrics text to display (default: \"\")\n- `mode?: \"matrix\" | \"straight\"` - Display mode:\n  - `\"matrix\"`: Words cascade down in columns Matrix-style\n  - `\"straight\"`: Words scroll down centered in a single line (default: \"matrix\")\n\n### Icons\n\nAll icons are exported and can be used directly:\n\n```svelte\n<script>\n  import {\n    GitHubIcon,\n    LinkedInIcon,\n    YouTubeIcon,\n    MenuIcon,\n    CloseIcon,\n    SunIcon,\n    MoonIcon\n  } from '@aflansburg/terminal-ui';\n</script>\n\n<GitHubIcon />\n<GitHubIcon fill=\"#00ff41\" className=\"w-8 h-8\" />\n<LinkedInIcon fill=\"#ffffff\" />\n<MenuIcon />\n```\n\n**Icon Props:**\nAll icons accept the following props:\n- `className?: string` - Additional CSS classes\n- `fill?: string` - Fill color (each icon has a sensible default)\n\n**Available Sample Icons:**\n- `MenuIcon` - Hamburger menu\n- `CloseIcon` - Close/X icon\n- `GitHubIcon` - GitHub logo\n- `LinkedInIcon` - LinkedIn logo\n- `YouTubeIcon` - YouTube logo\n- `SunIcon` - Sun/light mode\n- `MoonIcon` - Moon/dark mode\n- `SkullIcon` - Skull icon\n- `RickAndMortyIcon` - Rick and Morty themed\n- `GreenCheckIcon` - Checkmark\n- `QuestionMarkIcon` - Question mark\n- `ClickMeIcon` - Pointing hand\n\n### Theme & Design Tokens\n\nImport and use design tokens in your components:\n\n```svelte\n<script>\n  import { colors, fonts, animations } from '@aflansburg/terminal-ui/theme';\n</script>\n\n<style>\n  .my-element {\n    color: {colors.terminalGreen};\n    font-family: {fonts.terminal};\n    animation: {animations.glitch};\n  }\n</style>\n```\n\n**Available Tokens:**\n\n**Colors:**\n```typescript\ncolors.terminalGreen    // #00ff41\ncolors.terminalRed      // #d01b1b\ncolors.terminalBlue     // #4dabf7\ncolors.portalOrange     // #fd7e14\ncolors.neonPurple       // #be4bdb\ncolors.rickCyan         // #67e8f9\ncolors.citadelGray      // #1a1a1a\n```\n\n**Fonts:**\n```typescript\nfonts.terminal  // 'JetBrains Mono', monospace\nfonts.header    // 'Orbitron', sans-serif\n```\n\n**Animations:**\n```typescript\nanimations.scanlines\nanimations.terminalFlicker\nanimations.portalPulse\nanimations.glitch\nanimations.screenGlitch\n// ... and more\n```\n\n### CSS Utility Classes\n\nThe library includes many utility classes you can use directly:\n\n**Typography:**\n- `.terminal-font` - Apply JetBrains Mono font\n- `.sci-fi-header` - Apply Orbitron font with uppercase styling\n- `.ascii-art` - Styled for ASCII art with glow effect\n\n**Effects:**\n- `.crt-screen` - Full CRT screen effect with scanlines\n- `.terminal-border` - Green glowing border with flicker\n- `.portal-border` - Blue/orange pulsing border\n- `.glitch-text` - Subtle glitch animation\n- `.glitch-text-strong` - Strong glitch effect\n- `.screen-glitch` - Full screen distortion\n- `.data-stream` - Falling matrix-style text\n\n**Buttons:**\n- `.terminal-button` - Green terminal button\n- `.terminal-button-disabled` - Red disabled button\n\n**Colors:**\n- `.text-terminal-green` - Terminal green text\n- `.text-terminal-red` - Terminal red text\n- `.text-portal-orange` - Portal orange text\n- `.text-neon-purple` - Neon purple text\n\n**Overlays:**\n- `.vhs-glitch-overlay` - VHS scan line effect\n- `.matrix-runes-overlay` - Matrix rune animation container\n- `.matrix-bg` - Subtle binary pattern background\n\n## Example: Complete Page\n\n```svelte\n<script>\n  import {\n    TerminalButton,\n    TerminalContainer,\n    TerminalHeader,\n    TerminalModal\n  } from '@aflansburg/terminal-ui';\n  import '@aflansburg/terminal-ui/styles';\n\n  let modalOpen = $state(false);\n</script>\n\n<div class=\"crt-screen min-h-screen bg-black p-8\">\n  <div class=\"max-w-4xl mx-auto space-y-6\">\n    <TerminalHeader\n      title=\"SYSTEM CONTROL PANEL\"\n      subtitle=\"C-137 TERMINAL INTERFACE\"\n    />\n\n    <TerminalContainer bordered dark>\n      <h2 class=\"sci-fi-header text-terminal-green text-2xl mb-4\">\n        Welcome to the Terminal\n      </h2>\n      <p class=\"terminal-font text-terminal-green\">\n        > System online and ready for commands\n      </p>\n\n      <TerminalButton\n        onclick={() => modalOpen = true}\n        class=\"mt-4\"\n      >\n        > Open_System_Modal\n      </TerminalButton>\n    </TerminalContainer>\n  </div>\n\n  <TerminalModal\n    isOpen={modalOpen}\n    onClose={() => modalOpen = false}\n    title=\"SYSTEM MESSAGE\"\n  >\n    <p class=\"terminal-font text-terminal-green\">\n      This is a terminal-styled modal\n    </p>\n  </TerminalModal>\n</div>\n```\n\n## Responsive Design\n\nAll components are mobile-first and responsive:\n\n- ASCII art and headers scale appropriately\n- Modals adapt to screen size\n- Touch-friendly button sizes on mobile\n- Breakpoints: 480px (mobile), 640px (tablet), 768px (desktop)\n\n## Browser Support\n\n- Modern browsers with CSS Grid and Custom Properties support\n- Chrome/Edge 88+\n- Firefox 85+\n- Safari 14+\n\n## License\n\nMIT\n\n## Author\n\nAbram Flansburg\n","readmeFilename":"README.md"}