feat: VSC-VsixManifestDesigner Implementation

[CalvinAllen]

Overview

A VS Code extension that provides a visual designer for editing VS Code extension package.json manifest files. Uses VS Code's Custom Editor API with a webview-based UI, following architectural patterns from the existing VS-VsixManifestDesigner Visual Studio extension.

Key Constraint: Only manages extension-specific properties, NOT general npm package fields (scripts, dependencies, devDependencies, etc.).

Implementation Phases

• feat(foundation): Phase 1 - Project Foundation #2 - Phase 1: Project Foundation
• feat(services): Phase 2 - Core Services & Models #3 - Phase 2: Core Services & Models
• feat(webview): Phase 3 - Webview UI Foundation #4 - Phase 3: Webview UI Foundation
• feat(views): Phase 4 - Commands & Configuration Views #5 - Phase 4: Commands & Configuration Views
• feat(views): Phase 5 - Views & Languages #6 - Phase 5: Views & Languages
• feat(views): Phase 6 - Remaining Views #7 - Phase 6: Remaining Views
• test: Phase 7 - Testing & Polish #8 - Phase 7: Testing & Polish
• ci: Phase 8 - CI/CD & Release #9 - Phase 8: CI/CD & Release

UI Sections (Tabs)

1. Metadata - Identity, Description, Branding, Keywords
2. Compatibility - Engine, Extension Kind, Capabilities
3. Activation - Activation Events, Entry Points
4. Commands - DataGrid-style list with add/edit/remove
5. Configuration - Tree/property editor for contributes.configuration
6. Menus & Keybindings - Menus, Keybindings
7. Views - View Containers, Views, Welcome Content
8. Languages & Grammars - Languages, Grammars
9. Themes & Snippets - Color Themes, Icon Themes, Snippets
10. Dependencies - Extension Dependencies, Extension Pack
11. Documentation - Repository, Links, Badges, Sponsor
12. Advanced - Localization, Scripts, Other Contributions

Technology Stack

• Language: TypeScript
• Extension Bundler: esbuild
• Webview Framework: Svelte with Vite
• Styling: CSS custom properties (VS Code theme tokens)
• Testing: Vitest for unit tests

Verification Criteria

1. npm run compile completes without errors
2. F5 launches Extension Development Host
3. Right-click package.json > "Open with Extension Manifest Designer" works
4. Changes in designer reflect in file, and vice versa
5. Non-extension fields preserved after round-trip edit
6. Designer respects VS Code light/dark themes