feat!: replace heading-class layout syntax with ::: containers

[teezeit]

Why

The old heading-class approach used markdown headings as invisible layout declarations:

## Features {.grid-3 card}   ← heading renders as nothing, grid appears
### Item 1
### Item 2
##                            ← bare ## closes the grid

This violated wiremd's core principle: syntax should resemble output. A heading that disappears on render is confusing, hard to read, and inconsistent with every other container in the system (::: card, ::: hero, ::: alert all use ::: already).

What changed

Every layout container now uses explicit ::: syntax:

Old	New
## Title {.grid-3} + ##	::: grid-3 … :::
## Title {.grid-3 card}	::: grid-3 card … :::
## Title {.row}	::: row … :::
## Title {.row .right}	::: row {.right} … :::
## Reports {.tabs} + ### Tab	::: tabs + ::: tab Label … :::
## Nav {.sidebar} inside layout	::: sidebar … :::
## Content {.main} inside layout	::: main … :::
Bare ## (closer)	:::

Grid items still use ### headings. Alignment ({.left}, {.right}, {.center}) and col-span ({.col-span-N}) stay on ### children — only the container declaration changes.

Implementation

• transformer.ts — transformContainer() handles grid-N, row, tabs, tab container types; heading-class detection removed from processNodeList
• html-renderer.ts — sidebar/main detection updated to look for container children with containerType === 'sidebar'/'main'
• remark-containers.ts — fixed a bug where nested tabs/grid containers without a blank line before their closer were silently dropped (moved parseContainerOpener check before implicit-closer check)
• Tests — all 439 non-CLI tests updated to new syntax and passing

Migration

A migration script lives at scripts/migrate-v0.3.py for automated conversion of existing .md files.

Manual pattern:

1. Replace ## Title {.grid-N card} → ::: grid-N card
2. Replace closing ## → :::
3. Replace ## Title {.row} → ::: row
4. Replace ## Title {.tabs} + ### Tab panels → ::: tabs + ::: tab Label blocks
5. Inside :::layout {.sidebar-main}, replace ## {.sidebar} / ## {.main} with ::: sidebar / ::: main

Gotcha: when the last child before ::: is a list, add a blank line before the closer — remark will otherwise fold it into the list item.

Docs & examples updated

• QUICK-REFERENCE.md, SYNTAX-SPEC-v0.1.md, README.md, FAQ.md
• All docs/ guide pages
• All claude-skill/ references and examples
• ~200 occurrences across examples/ and examples/gallery/ (25+ files)

🤖 Generated with Claude Code