Deck generatorPro

Outline to slides, drafted one by one, with themes, per slide layouts, regenerate and export.

Markdown

On this page

ProGenerate a ten slide board deck from its outline, then theme, relayout, redraft and export.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/deck-generator

Usage

tsx

import { DeckGenerator } from "@/components/ui/chatcn/pro/deck-generator"

<DeckGenerator
  title="A second café on Mill Lane"
  outline={outline}
  slides={slides}
  draftingId={draftingId}
  status={status}
  onRegenerate={(id) => redraft(id)}
  onExport={(format, progress) => exportDeck(format, progress)}
/>

Feed slides as the model writes them, keyed by outline id; partial slides are fine and the caret follows the last field that arrived. The line being drafted lights in the outline, the stage follows it until someone picks a slide, and each slot in the filmstrip fills as its slide lands. Slides are typeset in container units, so the stage, the filmstrip and DeckSlideView (exported for your own exports and previews) all render the same slide at any size.

Examples

Themes

ProThe same deck in Paper, Contrast, Serif and Signal, typeset in container units.

States

ProOutline before drafting, mid draft, a slide being redrafted, a failed slide and a short deck.

Props

Prop	Type	Notes
`title`	`string`	Deck title, also in each slide footer
`outline`	`{ id, title }[]`	One entry per slide, in order
`slides`	`Record<string, DeckSlide>`	Drafted slides by outline id; partial is fine
`draftingId`	`string`	The slide being written now
`regeneratingIds`	`string[]`	Slides being redrafted
`errors`	`Record<string, string>`	Slides that failed, with how to fix it
`status`	`"outline" \| "generating" \| "done" \| "error"`	Default `done`
`theme`, `defaultTheme`, `onThemeChange`	`"paper" \| "contrast" \| "serif" \| "signal"`	Deck theme
`selectedId`, `defaultSelectedId`, `onSelectedChange`	`string`	Slide on the stage
`onLayoutChange`	`(id, layout) => void`	Shows the layout picker
`onRegenerate`	`(id) => void`	Shows Regenerate slide
`onExport`	`(format, progress) => Promise<{ name, size?, href? }>`	PDF or PowerPoint, with progress
`onGenerate`	`() => void`	Generate slides, while `status` is `outline`

Keyboard

Key	Action
Tab	Outline, theme, layout picker, then the filmstrip
Left and Right arrows	Previous or next slide in the filmstrip
Home and End	First or last slide

Accessibility

The filmstrip is a listbox; each slide is an option named by its number and title.
The status line under the title is a polite live region: drafting progress and the slide count.
Theme and layout pickers are toggle groups with labelled options; layouts read their name, not the drawing.
Export progress is announced as it runs; failures say how to fix them.

Motion

New slides fade and settle into their filmstrip slot over 200 ms; text streams in with no per word effects. The outline line being drafted carries a still accent bar, never a pulse. Export progress fills by transform. Reduced motion keeps the fades only.