docs(vscode): update documentation for CALM Canvas v1.0.0

[byrash]

do not merge until VSCode extension 1.0 is released.

• Rewrite vscode-extension.md for the new ReactFlow-based canvas editor
• Add demo video and poster image
• Update tooling overview slide to reference new canvas
• Remove old Mermaid-based preview screenshots

Description

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🎨 Code style/formatting changes
• ♻️ Refactoring (no functional changes)
• ⚡ Performance improvements
• ✅ Test additions or updates
• 🔧 Chore (maintenance, dependencies, CI, etc.)

Affected Components

• CLI (cli/)
• Schema (calm/)
• CALM AI (calm-ai/)
• CALM Hub (calm-hub/)
• CALM Hub UI (calm-hub-ui/)
• CALM Server (calm-server/)
• CALM Widgets (calm-widgets/)
• Documentation (docs/)
• Shared (shared/)
• VS Code Extension (calm-plugins/vscode/)
• Dependencies
• CI/CD

Commit Message Format ✅

Testing

• I have tested my changes locally
• I have added/updated unit tests
• All existing tests pass

Checklist

• My commits follow the conventional commit format
• I have updated documentation if necessary
• I have added tests for my changes (if applicable)
• My changes follow the project's coding standards

[rocketstack-matt]

@byrash are you able to look at the build failures on this PR?

[byrash]

@byrash are you able to look at the build failures on this PR?

Build is all green now. Thank You.

[YoofiTT96]

Reviewed with Claude and returned these slight blockers. Largely a documentation change so shouldnt be too much of an issue but would like these to either be acknowledged or addressed

Reviewed the rewrite against the extension source in calm-plugins/vscode/. The new page is accurate on most of what it describes — toolbar labels, direction and line-style options, the six container roles, metadata._layout, the adheres to dotted edge, offline Ajv validation, and theming all match the code exactly. The docs site also builds clean (exit 0, no warnings, no broken links) and the <video> tag renders fine inside the .md page.

Three things I think need fixing before merge.

1. The 74 MB MP4 goes into git history permanently

docs/static/video/calm-canvas-demo.mp4 is committed as an ordinary git blob:

$ git cat-file -s <blob>
78002112   # 74.4 MB

The eleven deleted PNGs give back 1.99 MB, so the net addition is ~73.8 MB, and it stays in history for every clone even if a later commit removes the file. The poster PNG is a further 1.4 MB.

The repo already has an answer that this file misses by its extension — the whole of .gitattributes is:

*.mov filter=lfs diff=lfs merge=lfs -text

It also dominates the published site. A local npm run build produces a 104 MB docs/build, of which 74.4 MB is this one file — about 72% of the site by bytes, shipped on every deploy.

Suggestions, in the order I'd try them: host the recording off-repo and embed it; or add *.mp4 filter=lfs diff=lfs merge=lfs -text and re-commit through LFS; or re-encode — a UI screen capture of this length should compress to a few MB, so 74 MB suggests it was never encoded for the web. The 1.4 MB poster frame could also come down well under 200 KB.

2. The Configuration Reference documents two settings that don't exist

The table lists calm.urlMapping and calm.schemas.additionalFolders. Neither exists — I searched every .ts/.tsx/.json in the extension outside node_modules and dist and got zero hits, in the manifest or at runtime.

contributes.configuration actually has three, none of which the page mentions:

Setting	Type	Default
calm.externalAssetsPath	string	""	absolute path to a folder holding shared nodes/, standards/, patterns/, templates/
calm.packs.enabled	string[]	[]	extension pack IDs to show in the palette
calm.packs.excludeNodes	string[]	[]	node type IDs to hide, as packId:nodeType

All three are read in extension.ts, webview/html-provider.ts, webview/canvas-panel.ts, and services/workspace-asset-service.ts.

Looks like the old page had a seven-row table and the rewrite kept two rows — the two it kept are as stale as the five it dropped. Worth noting the calm.packs.* settings are the only way to act on the page's own line "You can also drop nodes from Extension Packs if configured", and calm.externalAssetsPath is what unlocks shared standards and patterns across a team.

Related, and out of scope here: calm-plugins/vscode/README.md still documents calm.urlMapping (line 72) and still has the old Tree View / Timeline / Preview Panel headings. That README is what the Marketplace page renders, so the fix probably belongs in both places.

3. Two claims about opening the canvas don't hold

*.pattern.json isn't supported. The Supported File Formats table lists seven patterns; activationEvents names six, and *.pattern.json isn't one of them. The same six — and only those six — appear in the when clause shared by the keybinding, editor title button, editor context menu, and explorer context menu:

resourceFilename =~ /\.(calm|architecture|template|solution|standard|guideline)\.json$/

So a *.pattern.json file gets no context-menu item, no title-bar button, and no shortcut.

One wrinkle that may be an extension bug rather than a docs bug: pattern.json is in the file watcher glob at webview/canvas-panel.ts:521, and in the asset-discovery globs as patterns/**/*.pattern.json (patterns you apply, which is a different job). So the watcher watches a file type the menus won't open — worth deciding which side is right.

The command label is wrong. The page says to right-click and select CALM: Open Canvas. There's exactly one command:

command: calm.openCanvas   title: "View in CALM Canvas"   category: "CALM"

A category prefixes the Command Palette entry, not a context menu, so the explorer menu reads just "View in CALM Canvas". The Keyboard Shortcuts table names the same action "Open Canvas" and needs the same fix. The key itself is correct (ctrl+shift+k / cmd+shift+k).

---