docs(homepage): let the developer experience example compose itself

[Lisa18289]

Closes #2824

The "Fokus auf Developer Experience" tile claimed nested components, automatic spacing and design system conformance while showing a single plain Button. None of the three was visible.

The example is now a profile section that composes itself from the bare <Section> — Header with its heading, then the labeled value, then the action. Every added layer snaps into place with the right spacing, and the header pushes its action to the opposite end on its own. That also ties the tile to its "Zu den Components" link.

<Section>
  <Header>
    <Heading>Profil</Heading>
    <Button color="secondary" variant="soft">
      Bearbeiten
    </Button>
  </Header>
  <LabeledValue>
    <Label>E-Mail-Adresse</Label>
    <Content>max@mustermann.de</Content>
  </LabeledValue>
</Section>

The editor shows the composition without its import — spelled out, seven component names take more room than the example itself. The editor scope comes from a real import statement in codeSteps.ts, just one the reader never sees.

How it behaves

• Starts when the tile scrolls into view (IntersectionObserver, 30 %). The tile sits below the fold; otherwise the animation would be over before anyone sees it.
• Nothing moves. The finished example is rendered server side; preview and code block each measure their final height on mount and hold it while typing, and the preview is top aligned during the run.
• prefers-reduced-motion: the last step immediately, no animation.
• Stays a live example. Focusing or clicking the editor jumps to the end and stops the animation; editing works as before.
• transformCode keeps the last parsable preview instead of rendering a parser error while the code is half typed. This also applies to manual edits.

Implementation

page.tsx no longer builds the LiveProvider inline — it renders <HomeCodeExample />, which keeps the animation's re-renders out of the page component.

• codeSteps.ts — the four steps plus the import statement the scope is derived from. Each step inserts one block at a single position, inside <Header> or <Section>. That is what makes typing the difference between two steps possible.
• useTypedCode.ts — describes step n+1 as one insertion into step n, expands it into frames and drives them with a timer chain. Insertions are normalised to whole lines, so a new block is typed on its own line instead of growing out of the line below it.
• HomeCodeExample.tsx — editor, height reservation, visibility trigger.

Verified

Driven with Playwright against pnpm nx dev docs, sampled every 400 ms across the whole run:

• Tile 430 px, preview 143 px, code block 285 px, first code line 161 px — every value constant, and the heading stays at its offset of 25 px from the moment it appears.
• No horizontal scrolling in the code block at 1280 px, 1100 px or 390 px.
• Off screen the finished example stays put; scrolling in restarts it at <Section></Section> and it completes.
• Reduced motion keeps the complete example, on load and on scroll.
• Clicking the editor mid-run jumps to the end; editing "Bearbeiten" afterwards updates the button in the preview.
• Dark theme and 390 px width (no horizontal page overflow).

pnpm lint, prettier --check and tsc --noEmit pass.

🤖 Generated with Claude Code

[github-actions]

Coverage Report for ./packages/components/

Status	Category	Percentage	Covered / Total
🔵	Lines	75.59%	601 / 795
🔵	Statements	75.46%	615 / 815
🔵	Functions	77.97%	131 / 168
🔵	Branches	65.85%	272 / 413

File Coverage

No changed files found.

Generated in workflow #6088 for commit 8a88fc1 by the Vitest Coverage Report Action

[github-actions]

🚀 Preview Deployment

Preview environments are ready:

Type	URL
docs	pr-2829.docs.review.flow-components.de
storybook	pr-2829.storybook.review.flow-components.de

Images:

• docs: ghcr.io/mittwald/flow/docs:pr-2829
• storybook: ghcr.io/mittwald/flow/storybook:pr-2829