npm package: @slideskit/core
Description: React component library for building presentations and slide decks
Author: Jonatan Vahlberg
Latest version: 1.0.0

# @slideskit/core

React component library for building presentations and slide decks. Define slides as data, render with themeable components, and add a presenter notes window.

## Installation

```bash
npm install @slideskit/core
```

If you're not in a React project, you'll also need `react` and `react-dom`. npm 7+ installs these automatically as peer dependencies.

## Quick Start

```jsx
import { Presentation } from "@slideskit/core";
import "@slideskit/core/styles.css";

const presentation = {
  meta: { title: "My Deck" },
  defaults: { theme: "default" },
  options: { showNotes: true, showProgress: true },
  themes: [
    {
      name: "default",
      colors: { primary: "#0ea5e9", background: "#0f172a", text: "#f8fafc" },
      fonts: { body: "system-ui", headline: "system-ui" },
    },
  ],
  slides: [
    {
      layout: "full",
      title: "Welcome",
      subtitle: "A quick intro",
      content: [
        { type: "text", content: "Hello world!", align: "center" },
      ],
    },
  ],
};

function App() {
  return <Presentation presentation={presentation} />;
}
```

## Content Block Types

Slides are built from content blocks. Supported types:

| Type | Description |
|------|-------------|
| `text` | Plain text |
| `title` | Title + optional subtitle with divider |
| `list` | Bullet, numbered, or checklist |
| `image` | Image with optional caption, aspect ratio presets |
| `table` | Table with headers and rows |
| `columns` | Two-column layout (left/right blocks) |
| `card` | Opaque card containing nested blocks |
| `grid` | Grid of cells (rows × columns) |
| `layered` | Overlay content on top of a base block |
| `html` | Raw HTML (sanitized) |
| `component` | Custom React component via registry |
| `styleGuide` | Color and typography style guide block |
| `quote` | Blockquote with optional attribution and role |

Use `blockRegistry` to add extension block types (e.g. video). See [Extensions](#extensions).

## Extensions

| Package | Description |
|---------|-------------|
| [@slideskit/video](https://www.npmjs.com/package/@slideskit/video) | Video block (YouTube, Vimeo, file paths) via react-player |
| [@slideskit/code](https://www.npmjs.com/package/@slideskit/code) | Code block with syntax highlighting via Shiki |

```jsx
import { videoBlockRegistry } from "@slideskit/video";
import { codeBlockRegistry } from "@slideskit/code";
import "@slideskit/video/styles.css";
import "@slideskit/code/styles.css";

<Presentation
  presentation={...}
  blockRegistry={{ ...videoBlockRegistry, ...codeBlockRegistry }}
/>
```

## Theming

Provide themes in `presentation.themes`. Each theme has `name`, `colors` (e.g. `primary`, `background`, `text`, `cardBackground`, `cardText`), and `fonts` (`body`, `headline`). Set the active theme with `presentation.defaults.theme` or per-slide with `slide.theme`.

## Custom Components

Use `componentRegistry` to register custom components for `component` blocks:

```jsx
const registry = {
  MyChart: ({ data }) => <Chart data={data} />,
};

<Presentation
  presentation={presentation}
  componentRegistry={registry}
/>
```

In a slide:

```json
{ "type": "component", "content": { "name": "MyChart", "props": { "data": [...] } } }
```

## Notes Window

Enable `options.showNotes` to show a presenter notes button in the toolbar. Notes sync with the current slide via `BroadcastChannel`. Use a custom notes page with the `notesUrl` prop, or the built-in blob-based notes window.

## API

| Export | Description |
|--------|-------------|
| `Presentation` | Main presentation component |
| `Slide` | Single slide (used internally or for custom layouts) |
| `SlideContent` | Single content block renderer |
| `useDiscreteNavigation` | Hook for discrete slide scrolling |
| `resolveTheme`, `themeToStyle` | Theme utilities |
| `getNotesChannelName` | Notes BroadcastChannel name |
| `cn` | Class name utility |

All types are exported for TypeScript.

## License

MIT