@amulet-digital/vscodemock

A production-ready Vue 3 component library for building VSCode-like IDE interfaces. WCAG AAA accessible, fully typed, extensively tested.

⭐ Features

• WCAG AAA Compliant — Every component is fully keyboard accessible and screen-reader ready
• Composable Components — Sidebar, TabBar, Editor, Terminal, StatusBar—all built with slots
• Type Safe — 100% TypeScript, zero any types, strict mode enabled
• Fully Tested — 80%+ line coverage, accessibility testing included
• No State Management — Presentation-only; parent controls all state and logic
• Tailwind Ready — Base styles easily themed and customized
• Vue 3 Composition API — Modern, lightweight, tree-shakable

📦 Installation

npm install @amulet-digital/vscodemock

🚀 Quick Start

Full Shell

<template>
  <VSCodeShell>
    <template #sidebar>
      <VSCodeSidebar :files="files" @file-select="handleFileSelect" />
    </template>
    
    <template #editor>
      <VSCodeTabBar :tabs="openTabs" @close="handleCloseTab" />
      <VSCodeEditor :content="currentFileContent" />
    </template>
    
    <template #status-bar>
      <VSCodeStatusBar :file-path="currentFilePath" />
    </template>
  </VSCodeShell>
</template>

<script setup lang="ts">
import { VSCodeShell, VSCodeSidebar, VSCodeTabBar, VSCodeEditor, VSCodeStatusBar } from '@amulet-digital/vscodemock'
import '@amulet-digital/vscodemock/css'
</script>

Individual Components

Each component is independently composable:

<template>
  <VSCodeSidebar :files="files" @select="handleSelect" />
</template>

<script setup lang="ts">
import { VSCodeSidebar } from '@amulet-digital/vscodemock'
</script>

📚 Components

| Component | Purpose | |-----------|---------| | VSCodeShell | Root container with slots for sidebar, editor, status bar | | VSCodeSidebar | File explorer with tree navigation and selection | | VSCodeTabBar | Tab bar for managing open files | | VSCodeEditor | Editor viewport for displaying content | | VSCodeTerminal | Terminal emulator stub (ready for integration) | | VSCodeStatusBar | Bottom bar showing cursor position, language, metadata |

All components are:

• ♿ Fully keyboard accessible
• 🔊 Screen reader compatible
• 🎨 Themeable with Tailwind CSS
• 📝 Fully documented with TypeScript

🎨 Styling & Theming

Components use Tailwind CSS. Customize by:

1. Override CSS variables in your app
2. Extend Tailwind config with custom colors/fonts
3. Pass class props for per-instance overrides

<script setup lang="ts">
import { VSCodeShell } from '@amulet-digital/vscodemock'
import '@amulet-digital/vscodemock/css'
</script>

<style>
/* Override VSCode colors */
:root {
  --vscode-bg: #1e1e1e;
  --vscode-fg: #d4d4d4;
}
</style>

♿ Accessibility

Components are WCAG 2.1 Level AAA compliant:

• ✅ Keyboard navigation (Tab, Arrow keys, Enter, Escape)
• ✅ Screen reader labels and live regions
• ✅ 7:1 color contrast ratio
• ✅ Focus management and indicators
• ✅ Respects prefers-reduced-motion

See ACCESSIBILITY.md for detailed standards and testing guide.

🧪 Testing

# Run all tests
npm run test

# Watch mode
npm run test -- --watch

# Coverage report
npm run test:coverage

# Lint code
npm run lint

# Format code
npm run format

See TESTING.md for detailed testing guide.

📖 Development

# Install dependencies
npm install

# Dev server (hot reload)
npm run dev

# Build library (generates types)
npm run build

# Type check
npm run type-check

# Preview built output
npm run preview

# Run full pre-publish checks
npm run prepublishOnly

📦 Distribution

Published on npm with dual builds:

• ESM — dist/index.es.js (recommended for modern bundlers)
• UMD — dist/index.umd.js (for legacy environments)
• Types — dist/index.d.ts (full TypeScript support)
• CSS — dist/style.css (base styles)

🔒 Security

We take security seriously. See SECURITY.md for:

• Reporting vulnerabilities
• Dependency management
• Security best practices

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for:

• Code of conduct
• Development setup
• Pull request process
• Style guide

📝 License

MIT © 2026 Amulet Digital

Made with ♿ accessibility and 🔒 security in mind.

Amulet Digital — Signal integrity maintained • Archive Protocol