Wire PostPreview into Socials publish pane (live preview while composing)

[chubes4]

Goal

The publish pane composes a post by wiring `` (#43) live to the same caption + images state the user is editing, scoped to the active platform's `preview` config (from Extra-Chill/data-machine-socials#140).

As the user types in the caption textarea or adds/removes images, the preview updates in real time alongside the composer.

Layout

Publish pane becomes a two-column layout on wider screens, single-column stack on narrow:

```
┌──────────────────────────────────┬─────────────────────────────┐
│ COMPOSER (left) │ PREVIEW (right) │
│ (issues #38 + #39 ordering) │ │
│ │ <PostPreview │
│ • Media picker │ caption={caption} │
│ • Selected images thumbnails │ images={images} │
│ • External URL input │ preview={config.preview}│
│ • Caption textarea │ identity={...} │
│ • Submit / Publish actions │ /> │
└──────────────────────────────────┴─────────────────────────────┘
```

On narrow viewports (< ~960px), the preview moves under the composer in a collapsible "Preview" panel (open by default).

Identity for feed-surface platforms

The `identity` prop on `` (for `previewSurface: 'feed'`) is built from the platform's `label` and `username` already in `SocialPlatformConfig`. Avatar URL is optional — for v1 we just render initials in a circle if none is provided. Future: handlers could expose an `avatar_url` field, but v1 doesn't require it.

State plumbing

The publish pane already has `caption` and `imageUrls` in local state. After #39, `imageUrls` becomes the richer `images: Array<{ url, alt?, title? }>`. The preview reads the same state — no synchronization layer needed, both panels are siblings under one component.

Performance

Caption typing should not jitter. Use `useMemo` on the caption highlighting render, debounce nothing — typing should feel immediate. The image grid layout is CSS, so adding/removing images is cheap.

For very long captions or many images, the preview render is still well under a frame budget — no virtualization needed.

Empty / loading states

• No images yet: show the preview surface with the placeholder image area greyed out and a hint "Select images to preview"
• No caption yet: show the preview surface with the caption area collapsed or showing placeholder text
• Loading platforms: existing loading state continues to render the publish pane skeleton; preview just doesn't appear yet

Out of scope

• Switching the active platform within the publish pane to compare previews (today, the active platform is selected via the sidebar — that selection drives the publish pane). Side-by-side multi-platform preview is a larger feature deferred for later.
• Real-time char-count overflow warnings (separate validation concern, see notes in PostPreview: generic platform-agnostic preview primitive #43).

Acceptance

• Publish pane gains a preview column wired to live composer state.
• Preview reflects `config.preview` from the selected platform automatically.
• Identity (handle + avatar fallback) populated from `config.label` + `config.username`.
• Layout is responsive — two-column desktop, stacked narrow.
• No regression to any existing publish, submit-for-review, or media picker flow.
• Visually proves out at least three distinct platforms (Twitter feed, Instagram square, LinkedIn card).

Depends on

• Socials publish pane: reorder so media picker is on top #38 (publish pane reorder)
• Socials publish pane: thumbnail row for selected images #39 (thumbnail row + image data shape)
• PostPreview: generic platform-agnostic preview primitive #43 (PostPreview component)
• SocialPlatformConfig: declare preview shape (aspectRatio, captionPosition, previewSurface) data-machine-socials#140 (preview shape data)

Closes the redesign

This is the last issue in the socials publish-pane redesign track. After it lands:

• Layout is right (Socials publish pane: reorder so media picker is on top #38)
• Selected images are visible (Socials publish pane: thumbnail row for selected images #39)
• Posts have approval workflow on PendingActionStore (Refactor socials approval onto Data Machine PendingActionStore #40)
• Reviewer gets email with approve links (Email approval flow: notify reviewer with signed approve/reject links #41, depends on #1928, #1929, agents-api#128)
• Reviewer can batch-review in wp-admin (wp-admin review page: list pending studio socials submissions #42)
• Composer shows live preview (#140, PostPreview: generic platform-agnostic preview primitive #43, this)