feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)

## What

Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.

### Shader transitions (14 blocks, WebGL, 4s each)
`domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak`

### CSS transition showcases (14 blocks, various durations)
`transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader`

## Why

Phase D content accumulation. Transitions are the most-requested category for the catalog.

## How

- Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders
- CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page
- All tagged with `transition` + `shader` or `showcase` for catalog grouping
- Preview thumbnails generated for all 28 blocks
- Catalog pages + index regenerated

## Test plan

- [x] All 28 blocks produce preview thumbnails
- [x] `registry-item.json` validates for all blocks
- [x] Catalog pages generated (45 total items in catalog-index.json)
- [x] `oxfmt --check` passes

registry/blocks/macos-notification/macos-notification.html

@@ -26,7 +26,7 @@
         font-family: "Inter", sans-serif;
       }
 
-      .notification-card {
+      [data-composition-id="macos-notification"] .notification-card {
         position: absolute;
         top: 24px;
         right: 24px;
@@ -44,7 +44,7 @@
         align-items: flex-start;
       }
 
-      .app-icon {
+      [data-composition-id="macos-notification"] .app-icon {
         width: 36px;
         height: 36px;
         border-radius: 8px;
@@ -52,25 +52,25 @@
         overflow: hidden;
       }
 
-      .app-icon svg {
+      [data-composition-id="macos-notification"] .app-icon svg {
         width: 36px;
         height: 36px;
         display: block;
       }
 
-      .notification-content {
+      [data-composition-id="macos-notification"] .notification-content {
         flex: 1;
         min-width: 0;
       }
 
-      .notification-header {
+      [data-composition-id="macos-notification"] .notification-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 2px;
       }
 
-      .app-name {
+      [data-composition-id="macos-notification"] .app-name {
         font-size: 13px;
         font-weight: 600;
         color: rgba(255, 255, 255, 0.5);
@@ -78,13 +78,13 @@
         letter-spacing: 0.02em;
       }
 
-      .time-label {
+      [data-composition-id="macos-notification"] .time-label {
         font-size: 13px;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.35);
       }
 
-      .notification-title {
+      [data-composition-id="macos-notification"] .notification-title {
         font-size: 15px;
         font-weight: 600;
         color: #ffffff;
@@ -92,7 +92,7 @@
         margin-bottom: 2px;
       }
 
-      .notification-body {
+      [data-composition-id="macos-notification"] .notification-body {
         font-size: 13px;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.6);