# @nice2dev/ui-presentations

> Presentation editor & player for React — slides, animations, data binding, business templates, recording mode.

## Features

### NicePresentationEditor

- Drag & drop slide canvas with element positioning
- Slide sidebar — thumbnails with reorder
- Element types — text, image, shape, chart, diagram, code block, table, video, embed
- Property panel — typography, colors, position, size, rotation, opacity
- Master slides / layouts — title, content, two-column, blank
- Animation timeline — entry (fade/slide/zoom/bounce), emphasis (pulse/shake), exit animations
- Transitions — 17+ built-in (fade, slide, zoom, flip, morph, dissolve) + custom registry
- Data binding — NiceChart / NiceDataGrid with live data embedded in slides
- Diagram embedding — NiceDiagramViewer with animations inside slides
- Speaker notes per slide
- Export — PDF, HTML standalone, PPTX (basic), `.ndp.json`, PNG per slide
- Import — `.ndp.json`, PPTX (basic), Markdown (--- separated)
- Interactive elements — buttons, polls, quizzes, countdown, Q&A (audience engagement)

### NicePresentationPlayer

- Fullscreen presenter mode (←→ navigation, Space = next)
- Speaker view — current slide + next + notes + timer
- Auto-play with configurable tempo
- Laser pointer / spotlight mode
- Progress bar with slide number

### Business Templates

- **Quarterly Report** — KPIs, revenue chart, costs, pipeline, risks
- **Product Pitch** — problem → solution → demo → pricing → CTA
- **Sprint Review** — done, demo, velocity, impediments, next sprint
- **Architecture Overview** — system diagram, tech stack, data flow, deployment
- **Onboarding** — welcome, team, tools, processes, first tasks
- **Incident Report** — timeline, root cause, impact, remediation

### Data Integrations

- Live data slides — NiceChart with REST/SignalR auto-refresh
- DataGrid embedding — interactive sort/filter in presentation mode
- SQL/OData query slide — query → auto-generated table/chart
- Dashboard slide — multi-KPI layout with gauge, chart, number tiles

### Collaboration & AI

- Multi-user CRDT editing (Yjs)
- AI slide generation — LLM creates slide structure
- AI design suggestions — alignment, contrast, spacing
- Brand kit — define colors + fonts + logo → auto-apply
- Version history, slide library (reuse across presentations)
- Recording mode — screen + mic → video export

## Installation

```bash
npm install @nice2dev/ui-presentations
```

## Styling

This package ships unstyled component logic. Import the shared CSS bundle once at your app entrypoint:

```tsx
import '@nice2dev/ui/style.css';
```

Optional: opt into the legacy shorthand token aliases (`--bg-*`, `--text-*`, `--border-*`, ...) when migrating from a custom design-token system:

```tsx
import '@nice2dev/ui/css/legacy-bg-text-aliases.css';
```

## License

MIT © NiceToDev
