# G014 — Live Preview Engine

## Objective

Implement a new **Live Preview Engine** that allows the Couple to experience their invitation exactly as a guest would, even while the invitation is still in **Draft Mode**.

This feature MUST NOT replace the existing Preview.

Instead, INVEETAIRE will have two different preview modes.

---

# Existing Preview (Keep)

The existing Preview remains unchanged.

Purpose:

- Fast layout checking
- Dummy preview
- Used while editing
- Lightweight
- No production renderer required

Do NOT modify this feature.

---

# New Feature

Implement a completely new feature:

## Live Preview

Purpose:

Allow the Couple to experience the invitation exactly as a guest would.

Example URL

Production

```
/i/david-nathasya/7DXWU
```

Live Preview

```
/i/david-nathasya/livepreview
```

The Couple becomes the "virtual guest".

---

# Important Architecture Requirement

The Live Preview MUST reuse the production invitation pipeline.

It should NOT create another renderer.

Reuse:

- InvitationRenderer
- Theme Renderer
- Section Renderer
- Media Engine
- Music Engine
- Story Engine
- Gallery Engine
- Event Engine
- RSVP Components
- Guest Book Components
- Gift Components

The rendered HTML should be identical to Production.

---

# Draft Mode Support

This is the most important requirement.

Production Guest Route

Requires:

```
invitation_status = published
```

Live Preview

MUST allow

```
draft
published
```

because the purpose is to preview before publishing.

Do NOT require publication.

---

# Virtual Guest

There is no guest token.

Inject a virtual guest object.

Example

```php
[
    'id' => 0,
    'guest_name' => 'Live Preview',
    'guest_group' => 'Preview',
    'guest_token' => 'preview',
    'invited_pax' => 2
]
```

Renderer should receive this object exactly like a normal guest.

---

# Preview Context

Introduce a rendering context.

Example

```php
RenderContext

mode = production

or

mode = live_preview
```

or another clean architecture if more appropriate.

The renderer should know whether it is rendering:

- Production
- Live Preview

without duplicating rendering logic.

---

# Read Only Mode

Live Preview MUST NEVER modify production data.

Disable:

- Analytics
- View Counter
- Invitation Open Tracking
- RSVP Save
- Guest Book Save
- QR Attendance
- Activity Log
- Any database write

The invitation should behave as if it were production, but all interactions are read-only.

Buttons may either:

- be disabled

or

- display a message

```
Live Preview Mode

This action is disabled because this invitation is being previewed.
```

Choose the cleanest UX.

---

# Route

Design a new route.

Example

```
GET

/i/{workspace_slug}/livepreview
```

Do not interfere with the existing guest route.

---

# Middleware

Ensure authorization is correct.

Guest route:

Requires:

- published invitation
- valid guest token

Live Preview:

Requires:

- authenticated Couple
- ownership of workspace

Should never expose draft invitations publicly.

---

# UI

Keep the existing Preview button.

Add another button.

Example

```
Preview

[ Preview ]

Fast preview while editing.

[ Live Preview ]

Experience the invitation exactly as your guests will see it.
```

Inside Live Preview display a small badge.

Example

```
👁 LIVE PREVIEW

Viewing as Guest

No interaction will be saved.
```

---

# Deliverables

Please provide:

## 1.

Architecture overview

---

## 2.

Files that need modification

Controllers

Services

Routes

Middleware

Renderer

Views

---

## 3.

Implementation plan

Step-by-step

---

## 4.

Potential security concerns

Especially preventing public access to Draft invitations.

---

## 5.

Implementation

Generate production-ready code following the existing INVEETAIRE architecture.

Maintain consistency with the current coding style.

Do NOT duplicate rendering logic.

Prefer extending the existing architecture over introducing parallel implementations.