nextjs-slides 0.6.0 → 0.7.0

package/README.md

@@ -28,7 +28,6 @@ Open http://localhost:3000 — choose "Geist deck" or "Alternate deck" (Playfair
 
 Peer dependencies: `next >=15`, `react >=19`, `tailwindcss >=4`.
 
-
 ## Quick Start
 
 ### 1. Import the stylesheet
@@ -36,8 +35,8 @@ Peer dependencies: `next >=15`, `react >=19`, `tailwindcss >=4`.
 In your root layout or global CSS:
 
 ```css
-@import "tailwindcss";
-@import "nextjs-slides/styles.css";
+@import 'tailwindcss';
+@import 'nextjs-slides/styles.css';
 
 @source "../node_modules/nextjs-slides/dist";
 ```
@@ -54,7 +53,7 @@ import {
   SlideSubtitle,
   SlideBadge,
   SlideCode,
-} from "nextjs-slides";
+} from 'nextjs-slides';
 
 export const slides = [
   <Slide key="intro">
@@ -75,8 +74,8 @@ console.log(greeting);`}</SlideCode>
 
 ```tsx
 // app/slides/layout.tsx
-import { SlideDeck } from "nextjs-slides";
-import { slides } from "./slides";
+import { SlideDeck } from 'nextjs-slides';
+import { slides } from './slides';
 
 export default function SlidesLayout({
   children,
@@ -93,17 +92,17 @@ export default function SlidesLayout({
 
 ```tsx
 // app/slides/page.tsx
-import { redirect } from "next/navigation";
+import { redirect } from 'next/navigation';
 
 export default function SlidesPage() {
-  redirect("/slides/1");
+  redirect('/slides/1');
 }
 ```
 
 ```tsx
 // app/slides/[page]/page.tsx
-import { getSlide, generateSlideParams } from "nextjs-slides";
-import { slides } from "../slides";
+import { getSlide, generateSlideParams } from 'nextjs-slides';
+import { slides } from '../slides';
 
 export const generateStaticParams = () => generateSlideParams(slides);
 
@@ -120,17 +119,17 @@ That's it. Navigate to `/slides` and you have a full slide deck.
 
 ## `<SlideDeck>` Props
 
-| Prop           | Type                              | Default      | Description                                             |
-| -------------- | --------------------------------- | ------------ | ------------------------------------------------------- |
-| `slides`       | `ReactNode[]`                     | **required** | Your slides array                                       |
-| `speakerNotes` | `(string \| ReactNode \| null)[]` | —            | Notes per slide (same index). See Speaker Notes below.  |
-| `syncEndpoint` | `string`                          | —            | API route for presenter ↔ phone sync.                   |
-| `basePath`     | `string`                          | `"/slides"`  | URL prefix for slide routes                             |
-| `exitUrl`      | `string`                          | —            | URL for exit button (×). Shows in top-right when set.   |
-| `showProgress` | `boolean`                         | `true`       | Show dot progress indicator                             |
-| `showCounter`  | `boolean`                         | `true`       | Show "3 / 10" counter                                   |
-| `className`    | `string`                          | —            | Additional class for the deck container                 |
-| `children`     | `React.ReactNode`                 | **required** | Route content (from Next.js)                            |
+| Prop           | Type                              | Default      | Description                                            |
+| -------------- | --------------------------------- | ------------ | ------------------------------------------------------ |
+| `slides`       | `ReactNode[]`                     | **required** | Your slides array                                      |
+| `speakerNotes` | `(string \| ReactNode \| null)[]` | —            | Notes per slide (same index). See Speaker Notes below. |
+| `syncEndpoint` | `string`                          | —            | API route for presenter ↔ phone sync.                  |
+| `basePath`     | `string`                          | `"/slides"`  | URL prefix for slide routes                            |
+| `exitUrl`      | `string`                          | —            | URL for exit button (×). Shows in top-right when set.  |
+| `showProgress` | `boolean`                         | `true`       | Show dot progress indicator                            |
+| `showCounter`  | `boolean`                         | `true`       | Show "3 / 10" counter                                  |
+| `className`    | `string`                          | —            | Additional class for the deck container                |
+| `children`     | `React.ReactNode`                 | **required** | Route content (from Next.js)                           |
 
 ## Primitives
 
@@ -196,20 +195,20 @@ Slide 4 notes. Slide 3 had none.
 **Leading document title:** If the file starts with `# My Title` (a single heading line), use `stripLeadingTitle: true` so that block isn't treated as slide 1:
 
 ```ts
-parseSpeakerNotes(markdown, { stripLeadingTitle: true })
+parseSpeakerNotes(markdown, { stripLeadingTitle: true });
 ```
 
 Parse the file and pass it to `SlideDeck`. Include `syncEndpoint` so the phone can follow along:
 
 ```tsx
 // app/slides/layout.tsx
-import fs from "fs";
-import path from "path";
-import { SlideDeck, parseSpeakerNotes } from "nextjs-slides";
-import { slides } from "./slides";
+import fs from 'fs';
+import path from 'path';
+import { SlideDeck, parseSpeakerNotes } from 'nextjs-slides';
+import { slides } from './slides';
 
 const notes = parseSpeakerNotes(
-  fs.readFileSync(path.join(process.cwd(), "app/slides/notes.md"), "utf-8")
+  fs.readFileSync(path.join(process.cwd(), 'app/slides/notes.md'), 'utf-8')
 );
 
 export default function SlidesLayout({
@@ -218,7 +217,11 @@ export default function SlidesLayout({
   children: React.ReactNode;
 }) {
   return (
-    <SlideDeck slides={slides} speakerNotes={notes} syncEndpoint="/api/nxs-sync">
+    <SlideDeck
+      slides={slides}
+      speakerNotes={notes}
+      syncEndpoint="/api/nxs-sync"
+    >
       {children}
     </SlideDeck>
   );
@@ -237,19 +240,19 @@ Open `/notes` on your phone while presenting on your laptop. The phone shows the
 
 ```ts
 // app/api/nxs-sync/route.ts
-export { GET, POST } from "nextjs-slides/sync";
+export { GET, POST } from 'nextjs-slides/sync';
 ```
 
 **2. Create the notes page** (same `notes.md`, same `parseSpeakerNotes` — indices must match slides):
 
 ```tsx
 // app/notes/page.tsx
-import fs from "fs";
-import path from "path";
-import { parseSpeakerNotes, SlideNotesView } from "nextjs-slides";
+import fs from 'fs';
+import path from 'path';
+import { parseSpeakerNotes, SlideNotesView } from 'nextjs-slides';
 
 const notes = parseSpeakerNotes(
-  fs.readFileSync(path.join(process.cwd(), "app/slides/notes.md"), "utf-8")
+  fs.readFileSync(path.join(process.cwd(), 'app/slides/notes.md'), 'utf-8')
 );
 
 export default function NotesPage() {
@@ -284,7 +287,12 @@ The notes view auto-follows the deck during slides. Once you tap "Next" past the
 Use `basePath` for a different URL, `exitUrl` for an exit button (×), and `className` for scoped font/syntax overrides:
 
 ```tsx
-<SlideDeck slides={slides} basePath="/slides-alt" exitUrl="/" className="slides-alt-deck">
+<SlideDeck
+  slides={slides}
+  basePath="/slides-alt"
+  exitUrl="/"
+  className="slides-alt-deck"
+>
   {children}
 </SlideDeck>
 ```
@@ -316,13 +324,16 @@ Install `geist`, wire the fonts in your layout, and add the theme variables:
 
 ```tsx
 // app/layout.tsx
-import { GeistSans } from "geist/font/sans";
-import { GeistMono } from "geist/font/mono";
-import { GeistPixelSquare } from "geist/font/pixel";
+import { GeistSans } from 'geist/font/sans';
+import { GeistMono } from 'geist/font/mono';
+import { GeistPixelSquare } from 'geist/font/pixel';
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable}`}>
+    <html
+      lang="en"
+      className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable}`}
+    >
       <body className={GeistSans.className}>{children}</body>
     </html>
   );
@@ -333,7 +344,9 @@ export default function RootLayout({ children }) {
 /* globals.css @theme inline */
 --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
 --font-mono: var(--font-geist-mono), ui-monospace, monospace;
---font-pixel: var(--font-geist-pixel-square), var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
+--font-pixel:
+  var(--font-geist-pixel-square), var(--font-geist-sans), ui-sans-serif,
+  system-ui, sans-serif;
 ```
 
 Use `className="font-pixel"` on primitives where you want the pixel display font.
@@ -346,6 +359,8 @@ Slide transitions use the React 19 `<ViewTransition>` component with `addTransit
 
 **SlideCode syntax highlighting looks broken or colorless** — Ensure you import `nextjs-slides/styles.css` in your root layout or global CSS (see Quick Start). The `--sh-*` variables must be in scope for highlight.js tokens to display correctly.
 
+**Split layout not stacking on small screens** — Import `nextjs-slides/styles.css` without a layer: `@import "nextjs-slides/styles.css"` (not `layer(base)`). Layered imports can be overridden by Tailwind utilities. Also ensure the library CSS loads after Tailwind.
+
 **`@source` path not found** — The `@source "../node_modules/nextjs-slides/dist"` path is relative to your CSS file. If your `globals.css` lives in `app/`, use `../node_modules/...`. If it lives in the project root, use `./node_modules/nextjs-slides/dist`.
 
 **SlideCode error "Could not find the language '…'"** — Only JavaScript, TypeScript, and HTML/XML are registered. Unrecognized file extensions in the `title` prop (e.g. `.terminal`, `.sh`, `.py`) will fall back to TypeScript highlighting. If you previously saw this error, update the package — the fix gracefully handles unknown languages instead of throwing.

package/dist/cn.d.ts

@@ -1,5 +1,6 @@
 import { ClassValue } from 'clsx';
 
+/** Merge Tailwind classes with `clsx` + `tailwind-merge` (internal utility). */
 declare function cn(...inputs: ClassValue[]): string;
 
 export { cn };

package/dist/cn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}
+{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/** Merge Tailwind classes with `clsx` + `tailwind-merge` (internal utility). */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAGjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/get-slide.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/get-slide.tsx"],"sourcesContent":["import { notFound } from 'next/navigation';\n\n/**\n * Resolves the current slide from params and the slides array.\n * Use in your `[page]/page.tsx` dynamic route.\n *\n * @example\n * ```tsx\n * import { getSlide } from 'nextjs-slides';\n * import { slides } from '../slides';\n *\n * export default async function SlidePage({ params }: { params: Promise<{ page: string }> }) {\n *   return getSlide(await params, slides);\n * }\n * ```\n */\nexport function getSlide(params: { page: string }, slides: React.ReactNode[]): React.ReactNode {\n  const index = Number(params.page) - 1;\n\n  if (isNaN(index) || index < 0 || index >= slides.length) {\n    notFound();\n  }\n\n  return slides[index];\n}\n\n/**\n * Generates static params for all slides. Use with `generateStaticParams`.\n *\n * @example\n * ```tsx\n * import { generateSlideParams } from 'nextjs-slides';\n * import { slides } from '../slides';\n *\n * export const generateStaticParams = () => generateSlideParams(slides);\n * ```\n */\nexport function generateSlideParams(slides: React.ReactNode[]) {\n  return slides.map((_, i) => ({ page: String(i + 1) }));\n}\n"],"mappings":"AAAA,SAAS,gBAAgB;AAgBlB,SAAS,SAAS,QAA0B,QAA4C;AAC7F,QAAM,QAAQ,OAAO,OAAO,IAAI,IAAI;AAEpC,MAAI,MAAM,KAAK,KAAK,QAAQ,KAAK,SAAS,OAAO,QAAQ;AACvD,aAAS;AAAA,EACX;AAEA,SAAO,OAAO,KAAK;AACrB;AAaO,SAAS,oBAAoB,QAA2B;AAC7D,SAAO,OAAO,IAAI,CAAC,GAAG,OAAO,EAAE,MAAM,OAAO,IAAI,CAAC,EAAE,EAAE;AACvD;","names":[]}
+{"version":3,"sources":["../src/get-slide.tsx"],"sourcesContent":["import { notFound } from 'next/navigation';\n\n/**\n * Resolves the current slide from params and the slides array.\n * Use in your `[page]/page.tsx` dynamic route.\n *\n * @example\n * ```tsx\n * import { getSlide } from 'nextjs-slides';\n * import { slides } from '../slides';\n *\n * export default async function SlidePage({ params }: { params: Promise<{ page: string }> }) {\n *   return getSlide(await params, slides);\n * }\n * ```\n */\nexport function getSlide(\n  params: { page: string },\n  slides: React.ReactNode[]\n): React.ReactNode {\n  const index = Number(params.page) - 1;\n\n  if (isNaN(index) || index < 0 || index >= slides.length) {\n    notFound();\n  }\n\n  return slides[index];\n}\n\n/**\n * Generates static params for all slides. Use with `generateStaticParams`.\n *\n * @example\n * ```tsx\n * import { generateSlideParams } from 'nextjs-slides';\n * import { slides } from '../slides';\n *\n * export const generateStaticParams = () => generateSlideParams(slides);\n * ```\n */\nexport function generateSlideParams(slides: React.ReactNode[]) {\n  return slides.map((_, i) => ({ page: String(i + 1) }));\n}\n"],"mappings":"AAAA,SAAS,gBAAgB;AAgBlB,SAAS,SACd,QACA,QACiB;AACjB,QAAM,QAAQ,OAAO,OAAO,IAAI,IAAI;AAEpC,MAAI,MAAM,KAAK,KAAK,QAAQ,KAAK,SAAS,OAAO,QAAQ;AACvD,aAAS;AAAA,EACX;AAEA,SAAO,OAAO,KAAK;AACrB;AAaO,SAAS,oBAAoB,QAA2B;AAC7D,SAAO,OAAO,IAAI,CAAC,GAAG,OAAO,EAAE,MAAM,OAAO,IAAI,CAAC,EAAE,EAAE;AACvD;","names":[]}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { SlideDeck } from './slide-deck.js';
 export { generateSlideParams, getSlide } from './get-slide.js';
-export { Slide, SlideBadge, SlideCode, SlideDemo, SlideHeaderBadge, SlideList, SlideListItem, SlideNote, SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList, SlideSplitLayout, SlideStatement, SlideStatementList, SlideSubtitle, SlideTitle } from './primitives.js';
+export { Slide, SlideBadge, SlideCode, SlideColumns, SlideDemo, SlideHeaderBadge, SlideList, SlideListItem, SlideNote, SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList, SlideSplitLayout, SlideStatement, SlideStatementList, SlideSubtitle, SlideTitle } from './primitives.js';
 export { SlideLink } from './slide-link.js';
 export { parseSpeakerNotes } from './parse-speaker-notes.js';
 export { SlideNotesView } from './slide-notes-view.js';

package/dist/index.js

@@ -1,7 +1,13 @@
 import { SlideDeck } from "./slide-deck";
 import { getSlide, generateSlideParams } from "./get-slide";
-import { Slide, SlideSplitLayout } from "./primitives";
-import { SlideTitle, SlideSubtitle, SlideBadge, SlideHeaderBadge, SlideNote } from "./primitives";
+import { Slide, SlideColumns, SlideSplitLayout } from "./primitives";
+import {
+  SlideTitle,
+  SlideSubtitle,
+  SlideBadge,
+  SlideHeaderBadge,
+  SlideNote
+} from "./primitives";
 import { SlideCode, SlideList, SlideListItem, SlideDemo } from "./primitives";
 import { SlideStatementList, SlideStatement } from "./primitives";
 import { SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList } from "./primitives";
@@ -12,6 +18,7 @@ export {
   Slide,
   SlideBadge,
   SlideCode,
+  SlideColumns,
   SlideDeck,
   SlideDemo,
   SlideHeaderBadge,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Provider\nexport { SlideDeck } from './slide-deck';\n\n// Routing helpers\nexport { getSlide, generateSlideParams } from './get-slide';\n\n// Primitives — Layout\nexport { Slide, SlideSplitLayout } from './primitives';\n\n// Primitives — Typography\nexport { SlideTitle, SlideSubtitle, SlideBadge, SlideHeaderBadge, SlideNote } from './primitives';\n\n// Primitives — Content\nexport { SlideCode, SlideList, SlideListItem, SlideDemo } from './primitives';\n\n// Primitives — Statements\nexport { SlideStatementList, SlideStatement } from './primitives';\n\n// Primitives — Speakers\nexport { SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList } from './primitives';\n\n// Navigation\nexport { SlideLink } from './slide-link';\n\n// Utilities\nexport { parseSpeakerNotes } from './parse-speaker-notes';\n\n// Speaker notes\nexport { SlideNotesView } from './slide-notes-view';\n\n// Types\nexport type { SlideAlign, SlideLinkVariant, SlideDeckConfig } from './types';\n"],"mappings":"AACA,SAAS,iBAAiB;AAG1B,SAAS,UAAU,2BAA2B;AAG9C,SAAS,OAAO,wBAAwB;AAGxC,SAAS,YAAY,eAAe,YAAY,kBAAkB,iBAAiB;AAGnF,SAAS,WAAW,WAAW,eAAe,iBAAiB;AAG/D,SAAS,oBAAoB,sBAAsB;AAGnD,SAAS,cAAc,kBAAkB,wBAAwB;AAGjE,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAGlC,SAAS,sBAAsB;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Provider\nexport { SlideDeck } from './slide-deck';\n\n// Routing helpers\nexport { getSlide, generateSlideParams } from './get-slide';\n\n// Primitives — Layout\nexport { Slide, SlideColumns, SlideSplitLayout } from './primitives';\n\n// Primitives — Typography\nexport {\n  SlideTitle,\n  SlideSubtitle,\n  SlideBadge,\n  SlideHeaderBadge,\n  SlideNote,\n} from './primitives';\n\n// Primitives — Content\nexport { SlideCode, SlideList, SlideListItem, SlideDemo } from './primitives';\n\n// Primitives — Statements\nexport { SlideStatementList, SlideStatement } from './primitives';\n\n// Primitives — Speakers\nexport { SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList } from './primitives';\n\n// Navigation\nexport { SlideLink } from './slide-link';\n\n// Utilities\nexport { parseSpeakerNotes } from './parse-speaker-notes';\n\n// Speaker notes\nexport { SlideNotesView } from './slide-notes-view';\n\n// Types\nexport type { SlideAlign, SlideLinkVariant, SlideDeckConfig } from './types';\n"],"mappings":"AACA,SAAS,iBAAiB;AAG1B,SAAS,UAAU,2BAA2B;AAG9C,SAAS,OAAO,cAAc,wBAAwB;AAGtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,WAAW,WAAW,eAAe,iBAAiB;AAG/D,SAAS,oBAAoB,sBAAsB;AAGnD,SAAS,cAAc,kBAAkB,wBAAwB;AAGjE,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAGlC,SAAS,sBAAsB;","names":[]}

package/dist/parse-speaker-notes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/parse-speaker-notes.ts"],"sourcesContent":["/**\n * Parse speaker notes from a markdown string.\n *\n * Format: one section per slide, separated by `---` on its own line.\n * Sections map to slides by position: notes[0] = slide 1, notes[1] = slide 2, etc.\n * Empty sections produce `null` (no notes for that slide).\n *\n * @param stripLeadingTitle - If true, removes a leading section that is a single\n *   markdown heading (# Title). Use when the file starts with a document title.\n *\n * @example\n * ```md\n * Welcome everyone. This is the opening slide.\n *\n * ---\n *\n * Talk about the base container here.\n *\n * ---\n *\n * ---\n *\n * Slide 4 notes. Slide 3 had none.\n * ```\n *\n * @example\n * ```tsx\n * const notes = parseSpeakerNotes(markdown, { stripLeadingTitle: true });\n * ```\n */\nexport function parseSpeakerNotes(\n  markdown: string,\n  options?: { stripLeadingTitle?: boolean },\n): (string | null)[] {\n  let sections = markdown.split(/^---$/m).map((section) => {\n    const trimmed = section.trim();\n    return trimmed.length > 0 ? trimmed : null;\n  });\n\n  if (options?.stripLeadingTitle && sections[0] && /^#+\\s+.+$/.test(sections[0].replace(/\\n.*/s, ''))) {\n    sections = sections.slice(1);\n  }\n\n  return sections;\n}\n"],"mappings":"AA8BO,SAAS,kBACd,UACA,SACmB;AACnB,MAAI,WAAW,SAAS,MAAM,QAAQ,EAAE,IAAI,CAAC,YAAY;AACvD,UAAM,UAAU,QAAQ,KAAK;AAC7B,WAAO,QAAQ,SAAS,IAAI,UAAU;AAAA,EACxC,CAAC;AAED,MAAI,SAAS,qBAAqB,SAAS,CAAC,KAAK,YAAY,KAAK,SAAS,CAAC,EAAE,QAAQ,SAAS,EAAE,CAAC,GAAG;AACnG,eAAW,SAAS,MAAM,CAAC;AAAA,EAC7B;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/parse-speaker-notes.ts"],"sourcesContent":["/**\n * Parse speaker notes from a markdown string.\n *\n * Format: one section per slide, separated by `---` on its own line.\n * Sections map to slides by position: notes[0] = slide 1, notes[1] = slide 2, etc.\n * Empty sections produce `null` (no notes for that slide).\n *\n * @param stripLeadingTitle - If true, removes a leading section that is a single\n *   markdown heading (# Title). Use when the file starts with a document title.\n *\n * @example\n * ```md\n * Welcome everyone. This is the opening slide.\n *\n * ---\n *\n * Talk about the base container here.\n *\n * ---\n *\n * ---\n *\n * Slide 4 notes. Slide 3 had none.\n * ```\n *\n * @example\n * ```tsx\n * const notes = parseSpeakerNotes(markdown, { stripLeadingTitle: true });\n * ```\n */\nexport function parseSpeakerNotes(\n  markdown: string,\n  options?: { stripLeadingTitle?: boolean }\n): (string | null)[] {\n  let sections = markdown.split(/^---$/m).map((section) => {\n    const trimmed = section.trim();\n    return trimmed.length > 0 ? trimmed : null;\n  });\n\n  if (\n    options?.stripLeadingTitle &&\n    sections[0] &&\n    /^#+\\s+.+$/.test(sections[0].replace(/\\n.*/s, ''))\n  ) {\n    sections = sections.slice(1);\n  }\n\n  return sections;\n}\n"],"mappings":"AA8BO,SAAS,kBACd,UACA,SACmB;AACnB,MAAI,WAAW,SAAS,MAAM,QAAQ,EAAE,IAAI,CAAC,YAAY;AACvD,UAAM,UAAU,QAAQ,KAAK;AAC7B,WAAO,QAAQ,SAAS,IAAI,UAAU;AAAA,EACxC,CAAC;AAED,MACE,SAAS,qBACT,SAAS,CAAC,KACV,YAAY,KAAK,SAAS,CAAC,EAAE,QAAQ,SAAS,EAAE,CAAC,GACjD;AACA,eAAW,SAAS,MAAM,CAAC;AAAA,EAC7B;AAEA,SAAO;AACT;","names":[]}

package/dist/primitives.d.ts

@@ -1,63 +1,178 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SlideAlign } from './types.js';
 
+/**
+ * Full-viewport slide container with centered content and a decorative border.
+ *
+ * This is the primary slide primitive — use it as a top-level element in
+ * the slides array. For a two-column layout that fills the whole viewport,
+ * use {@link SlideSplitLayout} instead.
+ *
+ * @example
+ * ```tsx
+ * <Slide align="left">
+ *   <SlideTitle>My Slide</SlideTitle>
+ *   <SlideSubtitle>Supporting text</SlideSubtitle>
+ * </Slide>
+ * ```
+ */
 declare function Slide({ children, align, className, }: {
     children: React.ReactNode;
+    /** Content alignment. `"center"` centers both horizontally and text; `"left"` aligns to the start. */
     align?: SlideAlign;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+/**
+ * Inline two-column grid for use **inside** a `Slide`.
+ *
+ * Use this when you need a title or other content above two columns.
+ * For a full-viewport two-column slide, use `SlideSplitLayout` instead.
+ */
+declare function SlideColumns({ left, right, className, }: {
+    left: React.ReactNode;
+    right: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Full-viewport two-column slide — a **top-level** alternative to `Slide`.
+ *
+ * Do **not** nest this inside `Slide`; it renders its own `h-dvh w-dvw`
+ * container, border, and padding. To combine a title with two columns,
+ * use `SlideColumns` inside a `Slide` instead.
+ */
 declare function SlideSplitLayout({ left, right, className, }: {
     left: React.ReactNode;
     right: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideTitle({ children, className }: {
+/**
+ * Primary heading for a slide. Renders an `<h1>` with responsive sizing
+ * that scales from `text-4xl` to `text-7xl` across breakpoints.
+ *
+ * Override the default size with `className` (e.g. `className="text-3xl sm:text-4xl"`).
+ */
+declare function SlideTitle({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideSubtitle({ children, className }: {
+/**
+ * Secondary text below a title. Renders a `<p>` in a muted foreground color
+ * with responsive sizing (`text-lg` to `text-2xl`).
+ */
+declare function SlideSubtitle({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideBadge({ children, className }: {
+/**
+ * Small pill-shaped label, typically placed above a title to categorise
+ * the slide (e.g. component name, topic tag).
+ */
+declare function SlideBadge({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideHeaderBadge({ children, className }: {
+/**
+ * Italic accent text for slide headers — use for event names, series labels,
+ * or other branding above the title.
+ */
+declare function SlideHeaderBadge({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideCode({ children, className, title }: {
+/**
+ * Syntax-highlighted code block powered by highlight.js.
+ *
+ * Pass code as a **string** child. The language is auto-detected from the
+ * `title` file extension (e.g. `"example.tsx"` → TypeScript); falls back
+ * to TypeScript when unspecified. Supports JS, TS, JSX, and TSX.
+ *
+ * Theme colours are controlled by CSS custom properties (`--sh-*` / `--nxs-code-*`)
+ * defined in `nextjs-slides/styles.css`. Override them in `:root` or `.dark`.
+ *
+ * @example
+ * ```tsx
+ * <SlideCode title="api.ts">{`export async function fetchData() {
+ *   return fetch('/api/data');
+ * }`}</SlideCode>
+ * ```
+ */
+declare function SlideCode({ children, className, title, }: {
+    /** Code string to highlight. Leading/trailing whitespace is trimmed automatically. */
     children: string;
     className?: string;
+    /** File name shown above the code block. Its extension determines the highlight language. */
     title?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideList({ children, className }: {
+/**
+ * Bullet-point list container. Wrap {@link SlideListItem} children inside this.
+ */
+declare function SlideList({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideListItem({ children, className }: {
+/**
+ * Single bullet item inside a {@link SlideList}. Renders a small dot
+ * followed by the content.
+ */
+declare function SlideListItem({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideNote({ children, className }: {
+/**
+ * Small footnote text in a faded colour, typically placed at the bottom
+ * of a slide for annotations or caveats.
+ */
+declare function SlideNote({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+/**
+ * Live interactive component embed. Keyboard navigation (arrow keys, space)
+ * is disabled while focus is inside the demo area so the embedded component
+ * can handle its own input.
+ *
+ * The container tracks its maximum height to prevent layout jumps when the
+ * child re-renders with different content sizes.
+ *
+ * @example
+ * ```tsx
+ * <SlideDemo label="Live counter">
+ *   <Counter />
+ * </SlideDemo>
+ * ```
+ */
 declare function SlideDemo({ children, className, label, }: {
     children: React.ReactNode;
     className?: string;
+    /** Optional uppercase label shown above the demo area. */
     label?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideStatementList({ children, className }: {
+/**
+ * Container for {@link SlideStatement} items. Adds border separators between
+ * statements automatically.
+ */
+declare function SlideStatementList({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+/**
+ * Title + description pair for structured content blocks.
+ * Use inside a {@link SlideStatementList} for automatic border separators.
+ */
 declare function SlideStatement({ title, description, className, }: {
+    /** Bold heading text. */
     title: string;
+    /** Optional muted description below the title. */
     description?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+/**
+ * Speaker card with an avatar circle, name, and role/title.
+ * When `avatar` is omitted a placeholder circle is shown.
+ *
+ * Use inside {@link SlideSpeakerGrid} or {@link SlideSpeakerList} to
+ * lay out multiple speakers.
+ */
 declare function SlideSpeaker({ name, title, avatar, className, }: {
     name: string;
     title: string;
@@ -65,13 +180,20 @@ declare function SlideSpeaker({ name, title, avatar, className, }: {
     avatar?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideSpeakerGrid({ children, className }: {
+/**
+ * Two-column responsive grid for laying out {@link SlideSpeaker} cards
+ * side by side (stacks to one column on small screens).
+ */
+declare function SlideSpeakerGrid({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideSpeakerList({ children, className }: {
+/**
+ * Vertical stack layout for {@link SlideSpeaker} cards.
+ */
+declare function SlideSpeakerList({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { Slide, SlideBadge, SlideCode, SlideDemo, SlideHeaderBadge, SlideList, SlideListItem, SlideNote, SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList, SlideSplitLayout, SlideStatement, SlideStatementList, SlideSubtitle, SlideTitle };
+export { Slide, SlideBadge, SlideCode, SlideColumns, SlideDemo, SlideHeaderBadge, SlideList, SlideListItem, SlideNote, SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList, SlideSplitLayout, SlideStatement, SlideStatementList, SlideSubtitle, SlideTitle };