docs(examples): tab the compiled-output dumps per target via code-group

Each example page stacked six "## <Target> output" sections — one tall
scroll per page. Wrap the six rozie-out fences in a VitePress `::: code-group`
so readers toggle between Vue / React / Svelte / Angular / Solid / Lit in
place. rozie-codegen now injects the target name as the fence `[label]` (with
an optional explicit `[Custom]` override) so each block names its tab; the
compiled output is still regenerated from the real .rozie source through
@rozie/core on every build (no drift). card.md keeps its two components as two
labeled groups.

Docs build green (147 anchors, 0 broken); rendered HTML carries vp-code-group
with six labeled radio tabs per group.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: serpentblade

docs/.vitepress/rozie-codegen.ts

@@ -36,6 +36,21 @@ const TARGET_LANG: Record<CompileTarget, string> = {
   lit: 'ts',
 };
 
+/**
+ * Human-readable tab label per target. Injected as the fence's `[label]` so a
+ * `rozie-out` block carries its framework name into a VitePress `::: code-group`
+ * (the label becomes the tab; outside a code-group it renders as the code-block
+ * title). An explicit trailing `[Custom]` in the fence info overrides this.
+ */
+const TARGET_LABEL: Record<CompileTarget, string> = {
+  vue: 'Vue',
+  react: 'React',
+  svelte: 'Svelte',
+  angular: 'Angular',
+  solid: 'Solid',
+  lit: 'Lit',
+};
+
 const VALID_TARGETS = new Set<string>(Object.keys(TARGET_LANG));
 
 export interface RozieCodegenOptions {
@@ -107,7 +122,12 @@ export function rozieCodegen(
       }
 
       if (info.startsWith('rozie-out')) {
-        const [name, target] = info.slice('rozie-out'.length).trim().split(/\s+/);
+        const rest = info.slice('rozie-out'.length).trim();
+        // An optional trailing `[Custom Label]` overrides the derived tab label.
+        const labelMatch = rest.match(/\[([^\]]*)\]\s*$/);
+        const explicitLabel = labelMatch ? labelMatch[1].trim() : '';
+        const spec = labelMatch ? rest.slice(0, labelMatch.index).trim() : rest;
+        const [name, target] = spec.split(/\s+/);
         if (!name || !target) {
           throw new Error(
             '[rozie-codegen] `rozie-out` needs a component name and a target',
@@ -131,7 +151,10 @@ export function rozieCodegen(
           );
         }
         token.content = result.code;
-        token.info = TARGET_LANG[target as CompileTarget];
+        const label = explicitLabel || TARGET_LABEL[target as CompileTarget];
+        // Language first, then `[label]` — VitePress reads the label to title the
+        // block / name the code-group tab.
+        token.info = `${TARGET_LANG[target as CompileTarget]} [${label}]`;
         continue;
       }
     }

docs/examples/card.md

@@ -39,36 +39,30 @@ Note the auto kebab/camel conversion: the source writes `:on-close="$props.onClo
 ```rozie-src Card
 ```
 
-### Card — Vue output
+### Card — compiled output
+
+::: code-group
 
 ```rozie-out Card vue
 ```
 
-### Card — React output
-
 ```rozie-out Card react
 ```
 
-### Card — Svelte output
-
 ```rozie-out Card svelte
 ```
 
-### Card — Angular output
-
 ```rozie-out Card angular
 ```
 
-### Card — Solid output
-
 ```rozie-out Card solid
 ```
 
-### Card — Lit output
-
 ```rozie-out Card lit
 ```
 
+:::
+
 ---
 
 ## CardHeader — source
@@ -78,32 +72,26 @@ A tiny leaf component (~30 lines) — no `<components>` block, no slots, no life
 ```rozie-src CardHeader
 ```
 
-### CardHeader — Vue output
+### CardHeader — compiled output
+
+::: code-group
 
 ```rozie-out CardHeader vue
 ```
 
-### CardHeader — React output
-
 ```rozie-out CardHeader react
 ```
 
-### CardHeader — Svelte output
-
 ```rozie-out CardHeader svelte
 ```
 
-### CardHeader — Angular output
-
 ```rozie-out CardHeader angular
 ```
 
-### CardHeader — Solid output
-
 ```rozie-out CardHeader solid
 ```
 
-### CardHeader — Lit output
-
 ```rozie-out CardHeader lit
 ```
+
+:::

docs/examples/counter.md

@@ -26,32 +26,26 @@ The Counter below is the *actual* `examples/Counter.rozie` file from the monorep
 ```rozie-src Counter
 ```
 
-## Vue output
+## Compiled output
+
+::: code-group
 
 ```rozie-out Counter vue
 ```
 
-## React output
-
 ```rozie-out Counter react
 ```
 
-## Svelte output
-
 ```rozie-out Counter svelte
 ```
 
-## Angular output
-
 ```rozie-out Counter angular
 ```
 
-## Solid output
-
 ```rozie-out Counter solid
 ```
 
-## Lit output
-
 ```rozie-out Counter lit
 ```
+
+:::

docs/examples/dropdown.md

@@ -40,32 +40,26 @@ Click the trigger to open. Then try: clicking outside the panel (closes via the
 ```rozie-src Dropdown
 ```
 
-## Vue output
+## Compiled output
+
+::: code-group
 
 ```rozie-out Dropdown vue
 ```
 
-## React output
-
 ```rozie-out Dropdown react
 ```
 
-## Svelte output
-
 ```rozie-out Dropdown svelte
 ```
 
-## Angular output
-
 ```rozie-out Dropdown angular
 ```
 
-## Solid output
-
 ```rozie-out Dropdown solid
 ```
 
-## Lit output
-
 ```rozie-out Dropdown lit
 ```
+
+:::

docs/examples/flatpickr.md

@@ -28,36 +28,30 @@ The wrapper is a compact tour of the engine-binding pattern:
 ```rozie-src Flatpickr
 ```
 
-## Vue output
+## Compiled output
+
+::: code-group
 
 ```rozie-out Flatpickr vue
 ```
 
-## React output
-
 ```rozie-out Flatpickr react
 ```
 
-## Svelte output
-
 ```rozie-out Flatpickr svelte
 ```
 
-## Angular output
-
 ```rozie-out Flatpickr angular
 ```
 
-## Solid output
-
 ```rozie-out Flatpickr solid
 ```
 
-## Lit output
-
 ```rozie-out Flatpickr lit
 ```
 
+:::
+
 ## Demo source — FlatpickrDemo.rozie
 
 ```rozie-src FlatpickrDemo

docs/examples/line-chart.md

@@ -27,36 +27,30 @@ It is the deepest-reactivity example in the set:
 ```rozie-src Chart
 ```
 
-## Vue output
+## Compiled output
+
+::: code-group
 
 ```rozie-out Chart vue
 ```
 
-## React output
-
 ```rozie-out Chart react
 ```
 
-## Svelte output
-
 ```rozie-out Chart svelte
 ```
 
-## Angular output
-
 ```rozie-out Chart angular
 ```
 
-## Solid output
-
 ```rozie-out Chart solid
 ```
 
-## Lit output
-
 ```rozie-out Chart lit
 ```
 
+:::
+
 ## Demo source — LineChartDemo.rozie
 
 ```rozie-src LineChartDemo

docs/examples/modal.md

@@ -32,32 +32,26 @@ Click the button to open the *actual* `examples/Modal.rozie`. Press Escape, clic
 ```rozie-src Modal
 ```
 
-## Vue output
+## Compiled output
+
+::: code-group
 
 ```rozie-out Modal vue
 ```
 
-## React output
-
 ```rozie-out Modal react
 ```
 
-## Svelte output
-
 ```rozie-out Modal svelte
 ```
 
-## Angular output
-
 ```rozie-out Modal angular
 ```
 
-## Solid output
-
 ```rozie-out Modal solid
 ```
 
-## Lit output
-
 ```rozie-out Modal lit
 ```
+
+:::

docs/examples/portal-list.md

@@ -98,32 +98,26 @@ All six targets dispose every active portal mount BEFORE destroying the engine i
 ```rozie-src PortalListDemo
 ```
 
-## Vue output
+## Compiled output
+
+::: code-group
 
 ```rozie-out PortalList vue
 ```
 
-## React output
-
 ```rozie-out PortalList react
 ```
 
-## Svelte output
-
 ```rozie-out PortalList svelte
 ```
 
-## Angular output
-
 ```rozie-out PortalList angular
 ```
 
-## Solid output
-
 ```rozie-out PortalList solid
 ```
 
-## Lit output
-
 ```rozie-out PortalList lit
 ```
+
+:::