feat(registry): add code snippet blocks with VS Code workbench (#1113)

* feat(registry): add VS Code theme visualizer example

Full VS Code workbench recreation with per-character typing animation
across 12 built-in themes. Includes activity bar, sidebar, tabs,
editor with line-by-line cursor tracking, terminal panel, and status
bar — all driven by official VS Code theme JSON files.

Themes: Dark Modern, Dark 2026, Dark+, Light Modern, Light 2026,
Light+, Visual Studio Dark, Visual Studio Light, High Contrast,
High Contrast Light, Solarized Light, Monokai.

Includes build scripts to regenerate compositions from theme JSON.

* feat(registry): add 12 code snippet blocks for hyperframes add code

Individual blocks for each VS Code built-in theme, all tagged "code"
so `npx hyperframes add code` installs the full set.

Each block is a self-contained VS Code workbench with per-character
typing animation, activity bar, sidebar, tabs, terminal, and status
bar driven by official theme JSON data.

* docs: add mdx pages for code snippet blocks and example

- 12 block doc pages under catalog/blocks/code-snippet-*
- "Code Snippets" nav group in docs.json
- vscode-theme-visualizer entry in examples.mdx

* docs: revert examples.mdx — code snippets belong in catalog only

* docs: drop redundant 'Code Snippet' prefix from sidebar titles

* docs: add video previews to code snippet catalog pages

* style: format HTML, CSS, and MJS files for CI

* fix: address review feedback — build pipeline, LICENSE, dead code, nav order

1. Build script now regenerates both example compositions AND published
   blocks in registry/blocks/code-snippet-*/, keeping them in sync.
2. Add MIT LICENSE for vendored VS Code theme JSONs (microsoft/vscode).
3. Remove dead `chars` variable from runtime, build script, all blocks,
   and all example compositions.
4. Alphabetize Code Snippets nav group in docs.json to match catalog
   convention.

* style: format all build-generated files (render-entries, CSS, index)
This commit is contained in:
Miguel Ángel
2026-05-28 16:02:44 -04:00
committed by GitHub
parent 55c4a11884
commit 5245e19062
83 changed files with 22171 additions and 0 deletions
@@ -0,0 +1,67 @@
---
title: "Visual Studio Light"
description: "The traditional Visual Studio light color scheme."
---
# Visual Studio Light
VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
`code` `developer` `showcase` `vscode`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
## Install
<CodeGroup>
```bash Terminal
npx hyperframes add code-snippet-visual-studio-light
```
</CodeGroup>
Install all code snippet themes at once:
```bash Terminal
npx hyperframes add code
```
## Details
| Property | Value |
| --- | --- |
| Type | Block |
| Dimensions | 1920×1080 |
| Duration | 11s |
## Files
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-visual-studio-light.html` | `compositions/code-snippet-visual-studio-light.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
## Usage
After installing, add the block to your host composition:
```html
<div
data-composition-id="code-snippet-visual-studio-light"
data-composition-src="compositions/code-snippet-visual-studio-light.html"
data-start="0"
data-duration="11"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
```
## Features
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
- Per-character typing animation with cursor tracking and active line highlight
- Colors sourced from official `microsoft/vscode` built-in theme JSON
- 3D perspective tilt at the end of the typing sequence
- Terminal panel with mock test output