nextjs-slides 0.6.1 → 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.

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 };

package/dist/primitives.js

@@ -11,7 +11,8 @@ function highlightCode(code, lang) {
   if (!lang) return hljs.highlight(code, { language: "typescript" }).value;
   const language = lang === "ts" || lang === "tsx" ? "typescript" : lang;
   const registered = hljs.getLanguage(language);
-  if (!registered) return hljs.highlight(code, { language: "typescript" }).value;
+  if (!registered)
+    return hljs.highlight(code, { language: "typescript" }).value;
   return hljs.highlight(code, { language }).value;
 }
 import { SlideDemoContent } from "./slide-demo-content";
@@ -30,7 +31,13 @@ function Slide({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6", "aria-hidden": true }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6",
+            "aria-hidden": true
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -46,32 +53,84 @@ function Slide({
     }
   );
 }
-function SlideSplitLayout({
+function SlideColumns({
   left,
   right,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("nxs-slide nxs-slide-split relative flex h-dvh w-dvw", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6", "aria-hidden": true }),
-    /* @__PURE__ */ jsx("div", { className: "nxs-slide-split-col relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24", children: left }),
-    /* @__PURE__ */ jsx("div", { className: "nxs-slide-split-divider bg-foreground/10 absolute top-4 bottom-4 left-1/2 z-10 w-px sm:top-6 sm:bottom-6", "aria-hidden": true }),
-    /* @__PURE__ */ jsx("div", { className: "nxs-slide-split-col relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24", children: right })
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid w-full grid-cols-2 gap-8", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-4", children: left }),
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-4", children: right })
   ] });
 }
-function SlideTitle({ children, className }) {
+function SlideSplitLayout({
+  left,
+  right,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "nxs-slide nxs-slide-split relative flex h-dvh w-dvw",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "nxs-slide-split-col relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24", children: left }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "nxs-slide-split-divider bg-foreground/10 absolute top-4 bottom-4 left-1/2 z-10 w-px sm:top-6 sm:bottom-6",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "nxs-slide-split-col relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24", children: right })
+      ]
+    }
+  );
+}
+function SlideTitle({
+  children,
+  className
+}) {
   return /* @__PURE__ */ jsx(
     "h1",
     {
-      className: cn("text-foreground text-4xl font-extrabold sm:text-5xl md:text-6xl lg:text-7xl", className),
+      className: cn(
+        "text-foreground text-4xl font-extrabold sm:text-5xl md:text-6xl lg:text-7xl",
+        className
+      ),
       style: { letterSpacing: "-0.04em" },
       children
     }
   );
 }
-function SlideSubtitle({ children, className }) {
-  return /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-lg sm:text-xl md:text-2xl", className), children });
+function SlideSubtitle({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "text-muted-foreground text-lg sm:text-xl md:text-2xl",
+        className
+      ),
+      children
+    }
+  );
 }
-function SlideBadge({ children, className }) {
+function SlideBadge({
+  children,
+  className
+}) {
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -83,27 +142,58 @@ function SlideBadge({ children, className }) {
     }
   );
 }
-function SlideHeaderBadge({ children, className }) {
+function SlideHeaderBadge({
+  children,
+  className
+}) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-3", className), children: /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl font-semibold tracking-tight italic sm:text-2xl", children }) });
 }
-function SlideCode({ children, className, title }) {
+function SlideCode({
+  children,
+  className,
+  title
+}) {
   const lang = title?.split(".").pop();
-  const html = highlightCode(children, lang);
+  const html = highlightCode(children.trim(), lang);
   return /* @__PURE__ */ jsxs("div", { className: cn("nxs-code-wrapper", className), children: [
     title && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase", children: title }),
     /* @__PURE__ */ jsx("pre", { className: "nxs-code-block", children: /* @__PURE__ */ jsx("code", { dangerouslySetInnerHTML: { __html: html } }) })
   ] });
 }
-function SlideList({ children, className }) {
+function SlideList({
+  children,
+  className
+}) {
   return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col gap-4 text-left", className), children });
 }
-function SlideListItem({ children, className }) {
-  return /* @__PURE__ */ jsxs("li", { className: cn("text-foreground/70 flex items-start gap-3 text-lg sm:text-xl", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "bg-foreground/40 mt-2 block h-1.5 w-1.5 shrink-0 rounded-full", "aria-hidden": true }),
-    /* @__PURE__ */ jsx("span", { children })
-  ] });
+function SlideListItem({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn(
+        "text-foreground/70 flex items-start gap-3 text-lg sm:text-xl",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bg-foreground/40 mt-2 block h-1.5 w-1.5 shrink-0 rounded-full",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
 }
-function SlideNote({ children, className }) {
+function SlideNote({
+  children,
+  className
+}) {
   return /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground/50 mt-4 text-sm", className), children });
 }
 function SlideDemo({
@@ -111,12 +201,22 @@ function SlideDemo({
   className,
   label
 }) {
-  return /* @__PURE__ */ jsxs("div", { "data-slide-interactive": true, className: cn("min-w-0 w-full max-w-2xl", className), children: [
-    label && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase", children: label }),
-    /* @__PURE__ */ jsx("div", { className: "border-foreground/10 bg-foreground/[0.03] min-w-0 w-full max-w-full border p-4 sm:p-6", children: /* @__PURE__ */ jsx(SlideDemoContent, { children }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slide-interactive": true,
+      className: cn("min-w-0 w-full max-w-2xl", className),
+      children: [
+        label && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "border-foreground/10 bg-foreground/[0.03] min-w-0 w-full max-w-full border p-4 sm:p-6", children: /* @__PURE__ */ jsx(SlideDemoContent, { children }) })
+      ]
+    }
+  );
 }
-function SlideStatementList({ children, className }) {
+function SlideStatementList({
+  children,
+  className
+}) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 w-full flex-col", className), children });
 }
 function SlideStatement({
@@ -124,10 +224,19 @@ function SlideStatement({
   description,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("border-foreground/10 border-t px-8 py-8 last:border-b sm:px-12 md:px-16", className), children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-bold sm:text-xl md:text-2xl", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm sm:text-base", children: description })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-foreground/10 border-t px-8 py-8 last:border-b sm:px-12 md:px-16",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-bold sm:text-xl md:text-2xl", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm sm:text-base", children: description })
+      ]
+    }
+  );
 }
 function SlideSpeaker({
   name,
@@ -153,16 +262,23 @@ function SlideSpeaker({
     ] })
   ] });
 }
-function SlideSpeakerGrid({ children, className }) {
+function SlideSpeakerGrid({
+  children,
+  className
+}) {
   return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", className), children });
 }
-function SlideSpeakerList({ children, className }) {
+function SlideSpeakerList({
+  children,
+  className
+}) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-6", className), children });
 }
 export {
   Slide,
   SlideBadge,
   SlideCode,
+  SlideColumns,
   SlideDemo,
   SlideHeaderBadge,
   SlideList,

package/dist/primitives.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/primitives.tsx"],"sourcesContent":["import hljs from 'highlight.js/lib/core';\nimport javascript from 'highlight.js/lib/languages/javascript';\nimport typescript from 'highlight.js/lib/languages/typescript';\nimport xml from 'highlight.js/lib/languages/xml';\nimport { cn } from './cn';\n\nhljs.registerLanguage('javascript', javascript);\nhljs.registerLanguage('typescript', typescript);\nhljs.registerLanguage('xml', xml);\n\nfunction highlightCode(code: string, lang?: string): string {\n  if (!lang) return hljs.highlight(code, { language: 'typescript' }).value;\n  const language = lang === 'ts' || lang === 'tsx' ? 'typescript' : lang;\n  const registered = hljs.getLanguage(language);\n  if (!registered) return hljs.highlight(code, { language: 'typescript' }).value;\n  return hljs.highlight(code, { language }).value;\n}\nimport { SlideDemoContent } from './slide-demo-content';\nimport type { SlideAlign } from './types';\n\nexport function Slide({\n  children,\n  align = 'center',\n  className,\n}: {\n  children: React.ReactNode;\n  align?: SlideAlign;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'nxs-slide relative flex h-dvh w-dvw flex-col justify-center gap-8 px-12 py-20 sm:px-24 md:px-32 lg:px-40',\n        align === 'center' && 'items-center text-center',\n        align === 'left' && 'items-start text-left',\n        className,\n      )}\n    >\n      <div className=\"border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6\" aria-hidden />\n      <div\n        className={cn(\n          'relative z-10 flex max-w-4xl flex-col gap-10',\n          align === 'center' && 'items-center',\n          align === 'left' && 'items-start',\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport function SlideSplitLayout({\n  left,\n  right,\n  className,\n}: {\n  left: React.ReactNode;\n  right: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('nxs-slide nxs-slide-split relative flex h-dvh w-dvw', className)}>\n      <div className=\"border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6\" aria-hidden />\n      <div className=\"nxs-slide-split-col relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24\">\n        {left}\n      </div>\n      <div className=\"nxs-slide-split-divider bg-foreground/10 absolute top-4 bottom-4 left-1/2 z-10 w-px sm:top-6 sm:bottom-6\" aria-hidden />\n      <div className=\"nxs-slide-split-col relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24\">{right}</div>\n    </div>\n  );\n}\n\nexport function SlideTitle({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <h1\n      className={cn('text-foreground text-4xl font-extrabold sm:text-5xl md:text-6xl lg:text-7xl', className)}\n      style={{ letterSpacing: '-0.04em' }}\n    >\n      {children}\n    </h1>\n  );\n}\n\nexport function SlideSubtitle({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <p className={cn('text-muted-foreground text-lg sm:text-xl md:text-2xl', className)}>{children}</p>;\n}\n\nexport function SlideBadge({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <span\n      className={cn(\n        'bg-foreground text-background inline-block w-fit shrink-0 rounded-full px-4 py-1.5 text-sm font-semibold tracking-wide',\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport function SlideHeaderBadge({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <div className={cn('flex items-center gap-3', className)}>\n      <span className=\"text-foreground text-xl font-semibold tracking-tight italic sm:text-2xl\">{children}</span>\n    </div>\n  );\n}\n\nexport function SlideCode({ children, className, title }: { children: string; className?: string; title?: string }) {\n  const lang = title?.split('.').pop();\n  const html = highlightCode(children, lang);\n\n  return (\n    <div className={cn('nxs-code-wrapper', className)}>\n      {title && <div className=\"text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase\">{title}</div>}\n      <pre className=\"nxs-code-block\">\n        <code dangerouslySetInnerHTML={{ __html: html }} />\n      </pre>\n    </div>\n  );\n}\n\nexport function SlideList({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <ul className={cn('flex flex-col gap-4 text-left', className)}>{children}</ul>;\n}\n\nexport function SlideListItem({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <li className={cn('text-foreground/70 flex items-start gap-3 text-lg sm:text-xl', className)}>\n      <span className=\"bg-foreground/40 mt-2 block h-1.5 w-1.5 shrink-0 rounded-full\" aria-hidden />\n      <span>{children}</span>\n    </li>\n  );\n}\n\nexport function SlideNote({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <p className={cn('text-muted-foreground/50 mt-4 text-sm', className)}>{children}</p>;\n}\n\nexport function SlideDemo({\n  children,\n  className,\n  label,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  label?: string;\n}) {\n  return (\n    <div data-slide-interactive className={cn('min-w-0 w-full max-w-2xl', className)}>\n      {label && <div className=\"text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase\">{label}</div>}\n      <div className=\"border-foreground/10 bg-foreground/[0.03] min-w-0 w-full max-w-full border p-4 sm:p-6\">\n        <SlideDemoContent>{children}</SlideDemoContent>\n      </div>\n    </div>\n  );\n}\n\nexport function SlideStatementList({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('flex min-w-0 w-full flex-col', className)}>{children}</div>;\n}\n\nexport function SlideStatement({\n  title,\n  description,\n  className,\n}: {\n  title: string;\n  description?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('border-foreground/10 border-t px-8 py-8 last:border-b sm:px-12 md:px-16', className)}>\n      <h3 className=\"text-foreground text-lg font-bold sm:text-xl md:text-2xl\">{title}</h3>\n      {description && <p className=\"text-muted-foreground mt-1 text-sm sm:text-base\">{description}</p>}\n    </div>\n  );\n}\n\nexport function SlideSpeaker({\n  name,\n  title,\n  avatar,\n  className,\n}: {\n  name: string;\n  title: string;\n  /** Image URL or path for the speaker avatar. Falls back to placeholder when omitted. */\n  avatar?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex items-center gap-4', className)}>\n      <div\n        className={cn(\n          'h-12 w-12 shrink-0 overflow-hidden rounded-full',\n          avatar ? 'relative' : 'bg-foreground/15 border-foreground/20 border',\n        )}\n        aria-hidden\n      >\n        {avatar ? (\n          <img src={avatar} alt=\"\" className=\"h-full w-full object-cover\" />\n        ) : null}\n      </div>\n      <div>\n        <p className=\"text-foreground/90 text-sm font-medium tracking-widest uppercase\">{name}</p>\n        <p className=\"text-muted-foreground text-sm tracking-wider uppercase\">{title}</p>\n      </div>\n    </div>\n  );\n}\n\nexport function SlideSpeakerGrid({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('grid grid-cols-1 gap-6 sm:grid-cols-2', className)}>{children}</div>;\n}\n\nexport function SlideSpeakerList({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('flex flex-col gap-6', className)}>{children}</div>;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/primitives.tsx"],"sourcesContent":["import hljs from 'highlight.js/lib/core';\nimport javascript from 'highlight.js/lib/languages/javascript';\nimport typescript from 'highlight.js/lib/languages/typescript';\nimport xml from 'highlight.js/lib/languages/xml';\nimport { cn } from './cn';\n\nhljs.registerLanguage('javascript', javascript);\nhljs.registerLanguage('typescript', typescript);\nhljs.registerLanguage('xml', xml);\n\nfunction highlightCode(code: string, lang?: string): string {\n  if (!lang) return hljs.highlight(code, { language: 'typescript' }).value;\n  const language = lang === 'ts' || lang === 'tsx' ? 'typescript' : lang;\n  const registered = hljs.getLanguage(language);\n  if (!registered)\n    return hljs.highlight(code, { language: 'typescript' }).value;\n  return hljs.highlight(code, { language }).value;\n}\nimport { SlideDemoContent } from './slide-demo-content';\nimport type { SlideAlign } from './types';\n\n/**\n * Full-viewport slide container with centered content and a decorative border.\n *\n * This is the primary slide primitive — use it as a top-level element in\n * the slides array. For a two-column layout that fills the whole viewport,\n * use {@link SlideSplitLayout} instead.\n *\n * @example\n * ```tsx\n * <Slide align=\"left\">\n *   <SlideTitle>My Slide</SlideTitle>\n *   <SlideSubtitle>Supporting text</SlideSubtitle>\n * </Slide>\n * ```\n */\nexport function Slide({\n  children,\n  align = 'center',\n  className,\n}: {\n  children: React.ReactNode;\n  /** Content alignment. `\"center\"` centers both horizontally and text; `\"left\"` aligns to the start. */\n  align?: SlideAlign;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'nxs-slide relative flex h-dvh w-dvw flex-col justify-center gap-8 px-12 py-20 sm:px-24 md:px-32 lg:px-40',\n        align === 'center' && 'items-center text-center',\n        align === 'left' && 'items-start text-left',\n        className\n      )}\n    >\n      <div\n        className=\"border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6\"\n        aria-hidden\n      />\n      <div\n        className={cn(\n          'relative z-10 flex max-w-4xl flex-col gap-10',\n          align === 'center' && 'items-center',\n          align === 'left' && 'items-start'\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Inline two-column grid for use **inside** a `Slide`.\n *\n * Use this when you need a title or other content above two columns.\n * For a full-viewport two-column slide, use `SlideSplitLayout` instead.\n */\nexport function SlideColumns({\n  left,\n  right,\n  className,\n}: {\n  left: React.ReactNode;\n  right: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('grid w-full grid-cols-2 gap-8', className)}>\n      <div className=\"flex min-w-0 flex-col gap-4\">{left}</div>\n      <div className=\"flex min-w-0 flex-col gap-4\">{right}</div>\n    </div>\n  );\n}\n\n/**\n * Full-viewport two-column slide — a **top-level** alternative to `Slide`.\n *\n * Do **not** nest this inside `Slide`; it renders its own `h-dvh w-dvw`\n * container, border, and padding. To combine a title with two columns,\n * use `SlideColumns` inside a `Slide` instead.\n */\nexport function SlideSplitLayout({\n  left,\n  right,\n  className,\n}: {\n  left: React.ReactNode;\n  right: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'nxs-slide nxs-slide-split relative flex h-dvh w-dvw',\n        className\n      )}\n    >\n      <div\n        className=\"border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6\"\n        aria-hidden\n      />\n      <div className=\"nxs-slide-split-col relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24\">\n        {left}\n      </div>\n      <div\n        className=\"nxs-slide-split-divider bg-foreground/10 absolute top-4 bottom-4 left-1/2 z-10 w-px sm:top-6 sm:bottom-6\"\n        aria-hidden\n      />\n      <div className=\"nxs-slide-split-col relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24\">\n        {right}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Primary heading for a slide. Renders an `<h1>` with responsive sizing\n * that scales from `text-4xl` to `text-7xl` across breakpoints.\n *\n * Override the default size with `className` (e.g. `className=\"text-3xl sm:text-4xl\"`).\n */\nexport function SlideTitle({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <h1\n      className={cn(\n        'text-foreground text-4xl font-extrabold sm:text-5xl md:text-6xl lg:text-7xl',\n        className\n      )}\n      style={{ letterSpacing: '-0.04em' }}\n    >\n      {children}\n    </h1>\n  );\n}\n\n/**\n * Secondary text below a title. Renders a `<p>` in a muted foreground color\n * with responsive sizing (`text-lg` to `text-2xl`).\n */\nexport function SlideSubtitle({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <p\n      className={cn(\n        'text-muted-foreground text-lg sm:text-xl md:text-2xl',\n        className\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\n/**\n * Small pill-shaped label, typically placed above a title to categorise\n * the slide (e.g. component name, topic tag).\n */\nexport function SlideBadge({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <span\n      className={cn(\n        'bg-foreground text-background inline-block w-fit shrink-0 rounded-full px-4 py-1.5 text-sm font-semibold tracking-wide',\n        className\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * Italic accent text for slide headers — use for event names, series labels,\n * or other branding above the title.\n */\nexport function SlideHeaderBadge({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex items-center gap-3', className)}>\n      <span className=\"text-foreground text-xl font-semibold tracking-tight italic sm:text-2xl\">\n        {children}\n      </span>\n    </div>\n  );\n}\n\n/**\n * Syntax-highlighted code block powered by highlight.js.\n *\n * Pass code as a **string** child. The language is auto-detected from the\n * `title` file extension (e.g. `\"example.tsx\"` → TypeScript); falls back\n * to TypeScript when unspecified. Supports JS, TS, JSX, and TSX.\n *\n * Theme colours are controlled by CSS custom properties (`--sh-*` / `--nxs-code-*`)\n * defined in `nextjs-slides/styles.css`. Override them in `:root` or `.dark`.\n *\n * @example\n * ```tsx\n * <SlideCode title=\"api.ts\">{`export async function fetchData() {\n *   return fetch('/api/data');\n * }`}</SlideCode>\n * ```\n */\nexport function SlideCode({\n  children,\n  className,\n  title,\n}: {\n  /** Code string to highlight. Leading/trailing whitespace is trimmed automatically. */\n  children: string;\n  className?: string;\n  /** File name shown above the code block. Its extension determines the highlight language. */\n  title?: string;\n}) {\n  const lang = title?.split('.').pop();\n  const html = highlightCode(children.trim(), lang);\n\n  return (\n    <div className={cn('nxs-code-wrapper', className)}>\n      {title && (\n        <div className=\"text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase\">\n          {title}\n        </div>\n      )}\n      <pre className=\"nxs-code-block\">\n        <code dangerouslySetInnerHTML={{ __html: html }} />\n      </pre>\n    </div>\n  );\n}\n\n/**\n * Bullet-point list container. Wrap {@link SlideListItem} children inside this.\n */\nexport function SlideList({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <ul className={cn('flex flex-col gap-4 text-left', className)}>\n      {children}\n    </ul>\n  );\n}\n\n/**\n * Single bullet item inside a {@link SlideList}. Renders a small dot\n * followed by the content.\n */\nexport function SlideListItem({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <li\n      className={cn(\n        'text-foreground/70 flex items-start gap-3 text-lg sm:text-xl',\n        className\n      )}\n    >\n      <span\n        className=\"bg-foreground/40 mt-2 block h-1.5 w-1.5 shrink-0 rounded-full\"\n        aria-hidden\n      />\n      <span>{children}</span>\n    </li>\n  );\n}\n\n/**\n * Small footnote text in a faded colour, typically placed at the bottom\n * of a slide for annotations or caveats.\n */\nexport function SlideNote({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <p className={cn('text-muted-foreground/50 mt-4 text-sm', className)}>\n      {children}\n    </p>\n  );\n}\n\n/**\n * Live interactive component embed. Keyboard navigation (arrow keys, space)\n * is disabled while focus is inside the demo area so the embedded component\n * can handle its own input.\n *\n * The container tracks its maximum height to prevent layout jumps when the\n * child re-renders with different content sizes.\n *\n * @example\n * ```tsx\n * <SlideDemo label=\"Live counter\">\n *   <Counter />\n * </SlideDemo>\n * ```\n */\nexport function SlideDemo({\n  children,\n  className,\n  label,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  /** Optional uppercase label shown above the demo area. */\n  label?: string;\n}) {\n  return (\n    <div\n      data-slide-interactive\n      className={cn('min-w-0 w-full max-w-2xl', className)}\n    >\n      {label && (\n        <div className=\"text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase\">\n          {label}\n        </div>\n      )}\n      <div className=\"border-foreground/10 bg-foreground/[0.03] min-w-0 w-full max-w-full border p-4 sm:p-6\">\n        <SlideDemoContent>{children}</SlideDemoContent>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Container for {@link SlideStatement} items. Adds border separators between\n * statements automatically.\n */\nexport function SlideStatementList({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex min-w-0 w-full flex-col', className)}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Title + description pair for structured content blocks.\n * Use inside a {@link SlideStatementList} for automatic border separators.\n */\nexport function SlideStatement({\n  title,\n  description,\n  className,\n}: {\n  /** Bold heading text. */\n  title: string;\n  /** Optional muted description below the title. */\n  description?: string;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'border-foreground/10 border-t px-8 py-8 last:border-b sm:px-12 md:px-16',\n        className\n      )}\n    >\n      <h3 className=\"text-foreground text-lg font-bold sm:text-xl md:text-2xl\">\n        {title}\n      </h3>\n      {description && (\n        <p className=\"text-muted-foreground mt-1 text-sm sm:text-base\">\n          {description}\n        </p>\n      )}\n    </div>\n  );\n}\n\n/**\n * Speaker card with an avatar circle, name, and role/title.\n * When `avatar` is omitted a placeholder circle is shown.\n *\n * Use inside {@link SlideSpeakerGrid} or {@link SlideSpeakerList} to\n * lay out multiple speakers.\n */\nexport function SlideSpeaker({\n  name,\n  title,\n  avatar,\n  className,\n}: {\n  name: string;\n  title: string;\n  /** Image URL or path for the speaker avatar. Falls back to placeholder when omitted. */\n  avatar?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex items-center gap-4', className)}>\n      <div\n        className={cn(\n          'h-12 w-12 shrink-0 overflow-hidden rounded-full',\n          avatar ? 'relative' : 'bg-foreground/15 border-foreground/20 border'\n        )}\n        aria-hidden\n      >\n        {avatar ? (\n          <img src={avatar} alt=\"\" className=\"h-full w-full object-cover\" />\n        ) : null}\n      </div>\n      <div>\n        <p className=\"text-foreground/90 text-sm font-medium tracking-widest uppercase\">\n          {name}\n        </p>\n        <p className=\"text-muted-foreground text-sm tracking-wider uppercase\">\n          {title}\n        </p>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Two-column responsive grid for laying out {@link SlideSpeaker} cards\n * side by side (stacks to one column on small screens).\n */\nexport function SlideSpeakerGrid({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('grid grid-cols-1 gap-6 sm:grid-cols-2', className)}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Vertical stack layout for {@link SlideSpeaker} cards.\n */\nexport function SlideSpeakerList({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return <div className={cn('flex flex-col gap-6', className)}>{children}</div>;\n}\n"],"mappings":"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","names":[]}

package/dist/slide-deck.d.ts

@@ -1,6 +1,35 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SlideDeckConfig } from './types.js';
 
+/**
+ * Top-level slide deck provider that wraps the current slide's content.
+ *
+ * Place this in your slides layout (e.g. `app/slides/layout.tsx`). It provides:
+ * - **Keyboard navigation** — Arrow keys and Space to navigate slides.
+ * - **ViewTransition animations** — Slide-in/out with directional awareness.
+ * - **Progress UI** — Dots and a counter at the bottom of the viewport.
+ * - **Exit button** — When `exitUrl` is set, shows an × in the top-right corner.
+ * - **Presenter sync** — When `syncEndpoint` is set, POSTs the current slide
+ *   on navigation for `SlideNotesView` to poll.
+ *
+ * `SlideDeck` must be the **direct child** of the layout (no wrapper div)
+ * for the deck-unveil exit animation to work correctly.
+ *
+ * @example
+ * ```tsx
+ * // app/slides/layout.tsx
+ * import { SlideDeck } from 'nextjs-slides';
+ * import { slides } from './slides';
+ *
+ * export default function SlidesLayout({ children }: { children: React.ReactNode }) {
+ *   return (
+ *     <SlideDeck slides={slides} exitUrl="/" syncEndpoint="/api/nxs-sync">
+ *       {children}
+ *     </SlideDeck>
+ *   );
+ * }
+ * ```
+ */
 declare function SlideDeck({ children, slides, basePath, exitUrl, showProgress, showCounter, syncEndpoint, className, ...rest }: SlideDeckConfig & {
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;

package/dist/slide-deck.js

@@ -2,7 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { addTransitionType, useCallback, useEffect, useTransition, ViewTransition } from "react";
+import {
+  addTransitionType,
+  useCallback,
+  useEffect,
+  useTransition,
+  ViewTransition
+} from "react";
 import { cn } from "./cn";
 function SlideDeck({
   children,
@@ -141,10 +147,24 @@ function SlideDeck({
             href: exitUrl,
             className: "text-foreground/50 hover:text-foreground fixed top-6 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-md transition-colors hover:bg-foreground/10",
             "aria-label": "Exit presentation",
-            children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-              /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-            ] })
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                ]
+              }
+            )
           }
         )
       ]

package/dist/slide-deck.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slide-deck.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { usePathname, useRouter } from 'next/navigation';\nimport { addTransitionType, useCallback, useEffect, useTransition, ViewTransition } from 'react';\nimport { cn } from './cn';\nimport type { SlideDeckConfig } from './types';\n\nexport function SlideDeck({\n  children,\n  slides,\n  basePath = '/slides',\n  exitUrl,\n  showProgress = true,\n  showCounter = true,\n  syncEndpoint,\n  className,\n  ...rest\n}: SlideDeckConfig & { children: React.ReactNode }) {\n  void rest; // accepts speakerNotes and other optional config\n  const router = useRouter();\n  const pathname = usePathname();\n  const [isPending, startTransition] = useTransition();\n\n  const total = slides.length;\n  const slideRoutePattern = new RegExp(`^${basePath}/(\\\\d+)$`);\n  const isSlideRoute = slideRoutePattern.test(pathname);\n  const current = (() => {\n    const match = pathname.match(slideRoutePattern);\n    return match ? Number(match[1]) - 1 : 0;\n  })();\n\n  const goTo = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, total - 1));\n      if (clamped === current) return;\n      const targetSlide = clamped + 1; // 1-based for sync API\n      if (syncEndpoint) {\n        fetch(syncEndpoint, {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ slide: targetSlide, total }),\n        }).catch(() => {});\n      }\n      startTransition(() => {\n        addTransitionType(clamped > current ? 'slide-forward' : 'slide-back');\n        router.push(`${basePath}/${targetSlide}`);\n      });\n    },\n    [basePath, current, router, startTransition, syncEndpoint, total],\n  );\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    if (current > 0) router.prefetch(`${basePath}/${current}`);\n    if (current < total - 1) router.prefetch(`${basePath}/${current + 2}`);\n  }, [basePath, current, isSlideRoute, router, total]);\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    function onKeyDown(e: KeyboardEvent) {\n      const target = e.target as HTMLElement;\n      if (\n        target.closest('[data-slide-interactive]') ||\n        target.matches('input, textarea, select, [contenteditable=\"true\"]')\n      ) {\n        return;\n      }\n      if (e.key === 'ArrowRight' || e.key === ' ') {\n        e.preventDefault();\n        goTo(current + 1);\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        goTo(current - 1);\n      }\n    }\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [current, goTo, isSlideRoute]);\n\n  useEffect(() => {\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!syncEndpoint || !isSlideRoute || isPending) return;\n    fetch(syncEndpoint, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ slide: current + 1, total }),\n    }).catch(() => {});\n  }, [syncEndpoint, current, total, isSlideRoute, isPending]);\n\n  return (\n    <ViewTransition default=\"none\" exit=\"deck-unveil\">\n      <div\n        id=\"slide-deck\"\n        className={cn(\n          'bg-background text-foreground fixed inset-0 z-50 flex flex-col overflow-hidden font-sans select-none',\n          className,\n        )}\n        data-pending={isPending ? '' : undefined}\n      >\n        <div className=\"flex-1 overflow-hidden\">\n        <ViewTransition\n          key={pathname}\n          default=\"none\"\n          enter={{\n            default: 'slide-from-right',\n            'slide-back': 'slide-from-left',\n            'slide-forward': 'slide-from-right',\n          }}\n          exit={{\n            default: 'slide-to-left',\n            'slide-back': 'slide-to-right',\n            'slide-forward': 'slide-to-left',\n          }}\n        >\n          <div>{children}</div>\n        </ViewTransition>\n        </div>\n\n        {isSlideRoute && showProgress && (\n          <div\n            className=\"fixed bottom-8 left-1/2 z-50 flex -translate-x-1/2 items-center gap-1.5\"\n            aria-label=\"Slide progress\"\n          >\n            {Array.from({ length: total }).map((_, i) => (\n              <div\n                key={i}\n                className={cn(\n                  'h-1 transition-all duration-300',\n                  i === current ? 'bg-foreground w-6' : 'bg-foreground/20 w-1',\n                )}\n              />\n            ))}\n          </div>\n        )}\n\n        {isSlideRoute && showCounter && (\n          <div className=\"text-foreground/30 fixed right-8 bottom-8 z-50 font-mono text-xs tracking-wider\">\n            {current + 1} / {total}\n          </div>\n        )}\n\n        {isSlideRoute && exitUrl && (\n          <Link\n            href={exitUrl}\n            className=\"text-foreground/50 hover:text-foreground fixed top-6 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-md transition-colors hover:bg-foreground/10\"\n            aria-label=\"Exit presentation\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </Link>\n        )}\n      </div>\n    </ViewTransition>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/slide-deck.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { usePathname, useRouter } from 'next/navigation';\nimport {\n  addTransitionType,\n  useCallback,\n  useEffect,\n  useTransition,\n  ViewTransition,\n} from 'react';\nimport { cn } from './cn';\nimport type { SlideDeckConfig } from './types';\n\n/**\n * Top-level slide deck provider that wraps the current slide's content.\n *\n * Place this in your slides layout (e.g. `app/slides/layout.tsx`). It provides:\n * - **Keyboard navigation** — Arrow keys and Space to navigate slides.\n * - **ViewTransition animations** — Slide-in/out with directional awareness.\n * - **Progress UI** — Dots and a counter at the bottom of the viewport.\n * - **Exit button** — When `exitUrl` is set, shows an × in the top-right corner.\n * - **Presenter sync** — When `syncEndpoint` is set, POSTs the current slide\n *   on navigation for `SlideNotesView` to poll.\n *\n * `SlideDeck` must be the **direct child** of the layout (no wrapper div)\n * for the deck-unveil exit animation to work correctly.\n *\n * @example\n * ```tsx\n * // app/slides/layout.tsx\n * import { SlideDeck } from 'nextjs-slides';\n * import { slides } from './slides';\n *\n * export default function SlidesLayout({ children }: { children: React.ReactNode }) {\n *   return (\n *     <SlideDeck slides={slides} exitUrl=\"/\" syncEndpoint=\"/api/nxs-sync\">\n *       {children}\n *     </SlideDeck>\n *   );\n * }\n * ```\n */\nexport function SlideDeck({\n  children,\n  slides,\n  basePath = '/slides',\n  exitUrl,\n  showProgress = true,\n  showCounter = true,\n  syncEndpoint,\n  className,\n  ...rest\n}: SlideDeckConfig & { children: React.ReactNode }) {\n  void rest; // accepts speakerNotes and other optional config\n  const router = useRouter();\n  const pathname = usePathname();\n  const [isPending, startTransition] = useTransition();\n\n  const total = slides.length;\n  const slideRoutePattern = new RegExp(`^${basePath}/(\\\\d+)$`);\n  const isSlideRoute = slideRoutePattern.test(pathname);\n  const current = (() => {\n    const match = pathname.match(slideRoutePattern);\n    return match ? Number(match[1]) - 1 : 0;\n  })();\n\n  const goTo = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, total - 1));\n      if (clamped === current) return;\n      const targetSlide = clamped + 1; // 1-based for sync API\n      if (syncEndpoint) {\n        fetch(syncEndpoint, {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ slide: targetSlide, total }),\n        }).catch(() => {});\n      }\n      startTransition(() => {\n        addTransitionType(clamped > current ? 'slide-forward' : 'slide-back');\n        router.push(`${basePath}/${targetSlide}`);\n      });\n    },\n    [basePath, current, router, startTransition, syncEndpoint, total]\n  );\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    if (current > 0) router.prefetch(`${basePath}/${current}`);\n    if (current < total - 1) router.prefetch(`${basePath}/${current + 2}`);\n  }, [basePath, current, isSlideRoute, router, total]);\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    function onKeyDown(e: KeyboardEvent) {\n      const target = e.target as HTMLElement;\n      if (\n        target.closest('[data-slide-interactive]') ||\n        target.matches('input, textarea, select, [contenteditable=\"true\"]')\n      ) {\n        return;\n      }\n      if (e.key === 'ArrowRight' || e.key === ' ') {\n        e.preventDefault();\n        goTo(current + 1);\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        goTo(current - 1);\n      }\n    }\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [current, goTo, isSlideRoute]);\n\n  useEffect(() => {\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!syncEndpoint || !isSlideRoute || isPending) return;\n    fetch(syncEndpoint, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ slide: current + 1, total }),\n    }).catch(() => {});\n  }, [syncEndpoint, current, total, isSlideRoute, isPending]);\n\n  return (\n    <ViewTransition default=\"none\" exit=\"deck-unveil\">\n      <div\n        id=\"slide-deck\"\n        className={cn(\n          'bg-background text-foreground fixed inset-0 z-50 flex flex-col overflow-hidden font-sans select-none',\n          className\n        )}\n        data-pending={isPending ? '' : undefined}\n      >\n        <div className=\"flex-1 overflow-hidden\">\n          <ViewTransition\n            key={pathname}\n            default=\"none\"\n            enter={{\n              default: 'slide-from-right',\n              'slide-back': 'slide-from-left',\n              'slide-forward': 'slide-from-right',\n            }}\n            exit={{\n              default: 'slide-to-left',\n              'slide-back': 'slide-to-right',\n              'slide-forward': 'slide-to-left',\n            }}\n          >\n            <div>{children}</div>\n          </ViewTransition>\n        </div>\n\n        {isSlideRoute && showProgress && (\n          <div\n            className=\"fixed bottom-8 left-1/2 z-50 flex -translate-x-1/2 items-center gap-1.5\"\n            aria-label=\"Slide progress\"\n          >\n            {Array.from({ length: total }).map((_, i) => (\n              <div\n                key={i}\n                className={cn(\n                  'h-1 transition-all duration-300',\n                  i === current ? 'bg-foreground w-6' : 'bg-foreground/20 w-1'\n                )}\n              />\n            ))}\n          </div>\n        )}\n\n        {isSlideRoute && showCounter && (\n          <div className=\"text-foreground/30 fixed right-8 bottom-8 z-50 font-mono text-xs tracking-wider\">\n            {current + 1} / {total}\n          </div>\n        )}\n\n        {isSlideRoute && exitUrl && (\n          <Link\n            href={exitUrl}\n            className=\"text-foreground/50 hover:text-foreground fixed top-6 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-md transition-colors hover:bg-foreground/10\"\n            aria-label=\"Exit presentation\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </Link>\n        )}\n      </div>\n    </ViewTransition>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/slide-demo-content.d.ts

@@ -1,5 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+/**
+ * Client wrapper for {@link SlideDemo} content that tracks the maximum
+ * rendered height via `ResizeObserver`, preventing layout jumps when
+ * the child re-renders with different content sizes.
+ *
+ * @internal Used by `SlideDemo` — not exported from the public API.
+ */
 declare function SlideDemoContent({ children }: {
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;

package/dist/slide-demo-content.js

@@ -10,7 +10,9 @@ function SlideDemoContent({ children }) {
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const height = entry.borderBoxSize[0].blockSize;
-        setMinHeight((prev) => prev === void 0 ? height : Math.max(prev, height));
+        setMinHeight(
+          (prev) => prev === void 0 ? height : Math.max(prev, height)
+        );
       }
     });
     observer.observe(el);

package/dist/slide-demo-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slide-demo-content.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nexport function SlideDemoContent({ children }: { children: React.ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [minHeight, setMinHeight] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const observer = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const height = entry.borderBoxSize[0].blockSize;\n        setMinHeight(prev => (prev === undefined ? height : Math.max(prev, height)));\n      }\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div ref={ref} style={minHeight !== undefined ? { minHeight } : undefined}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAuBI;AArBJ,SAAS,WAAW,QAAQ,gBAAgB;AAErC,SAAS,iBAAiB,EAAE,SAAS,GAAkC;AAC5E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,MAAS;AAExE,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,IAAI,eAAe,aAAW;AAC7C,iBAAW,SAAS,SAAS;AAC3B,cAAM,SAAS,MAAM,cAAc,CAAC,EAAE;AACtC,qBAAa,UAAS,SAAS,SAAY,SAAS,KAAK,IAAI,MAAM,MAAM,CAAE;AAAA,MAC7E;AAAA,IACF,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,SAAI,KAAU,OAAO,cAAc,SAAY,EAAE,UAAU,IAAI,QAC7D,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/slide-demo-content.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\n/**\n * Client wrapper for {@link SlideDemo} content that tracks the maximum\n * rendered height via `ResizeObserver`, preventing layout jumps when\n * the child re-renders with different content sizes.\n *\n * @internal Used by `SlideDemo` — not exported from the public API.\n */\nexport function SlideDemoContent({ children }: { children: React.ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [minHeight, setMinHeight] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const height = entry.borderBoxSize[0].blockSize;\n        setMinHeight((prev) =>\n          prev === undefined ? height : Math.max(prev, height)\n        );\n      }\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div ref={ref} style={minHeight !== undefined ? { minHeight } : undefined}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAgCI;AA9BJ,SAAS,WAAW,QAAQ,gBAAgB;AASrC,SAAS,iBAAiB,EAAE,SAAS,GAAkC;AAC5E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,MAAS;AAExE,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,iBAAW,SAAS,SAAS;AAC3B,cAAM,SAAS,MAAM,cAAc,CAAC,EAAE;AACtC;AAAA,UAAa,CAAC,SACZ,SAAS,SAAY,SAAS,KAAK,IAAI,MAAM,MAAM;AAAA,QACrD;AAAA,MACF;AAAA,IACF,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,SAAI,KAAU,OAAO,cAAc,SAAY,EAAE,UAAU,IAAI,QAC7D,UACH;AAEJ;","names":[]}

package/dist/slide-link.d.ts

@@ -1,10 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SlideLinkVariant } from './types.js';
 
+/**
+ * Styled Next.js `<Link>` for navigating between slides, to breakout pages,
+ * or to external URLs.
+ *
+ * @example
+ * ```tsx
+ * <SlideLink href="/slides/demo1">Breakout page →</SlideLink>
+ * <SlideLink href="/" variant="ghost">Exit deck</SlideLink>
+ * ```
+ */
 declare function SlideLink({ href, children, className, variant, }: {
     href: string;
     children: React.ReactNode;
     className?: string;
+    /** Visual style. `"primary"` is a solid button; `"ghost"` is a bordered transparent button. */
     variant?: SlideLinkVariant;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/slide-link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slide-link.tsx"],"sourcesContent":["import Link from 'next/link';\nimport { cn } from './cn';\nimport type { SlideLinkVariant } from './types';\n\nexport function SlideLink({\n  href,\n  children,\n  className,\n  variant = 'primary',\n}: {\n  href: string;\n  children: React.ReactNode;\n  className?: string;\n  variant?: SlideLinkVariant;\n}) {\n  return (\n    <Link\n      href={href}\n      className={cn(\n        'nxs-slide-link inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium tracking-wide transition-all',\n        variant === 'primary' && 'bg-primary text-primary-foreground hover:bg-primary/80',\n        variant === 'ghost' && 'border-border border bg-transparent hover:bg-muted',\n        'mt-2',\n        className,\n      )}\n    >\n      {children}\n    </Link>\n  );\n}\n"],"mappings":"AAgBI;AAhBJ,OAAO,UAAU;AACjB,SAAS,UAAU;AAGZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,YAAY,aAAa;AAAA,QACzB,YAAY,WAAW;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/slide-link.tsx"],"sourcesContent":["import Link from 'next/link';\nimport { cn } from './cn';\nimport type { SlideLinkVariant } from './types';\n\n/**\n * Styled Next.js `<Link>` for navigating between slides, to breakout pages,\n * or to external URLs.\n *\n * @example\n * ```tsx\n * <SlideLink href=\"/slides/demo1\">Breakout page →</SlideLink>\n * <SlideLink href=\"/\" variant=\"ghost\">Exit deck</SlideLink>\n * ```\n */\nexport function SlideLink({\n  href,\n  children,\n  className,\n  variant = 'primary',\n}: {\n  href: string;\n  children: React.ReactNode;\n  className?: string;\n  /** Visual style. `\"primary\"` is a solid button; `\"ghost\"` is a bordered transparent button. */\n  variant?: SlideLinkVariant;\n}) {\n  return (\n    <Link\n      href={href}\n      className={cn(\n        'nxs-slide-link inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium tracking-wide transition-all',\n        variant === 'primary' &&\n          'bg-primary text-primary-foreground hover:bg-primary/80',\n        variant === 'ghost' &&\n          'border-border border bg-transparent hover:bg-muted',\n        'mt-2',\n        className\n      )}\n    >\n      {children}\n    </Link>\n  );\n}\n"],"mappings":"AA2BI;AA3BJ,OAAO,UAAU;AACjB,SAAS,UAAU;AAaZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,YAAY,aACV;AAAA,QACF,YAAY,WACV;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/slide-notes-view.js

@@ -111,7 +111,13 @@ function SlideNotesView({
                 },
                 children: currentNote
               }
-            ) : /* @__PURE__ */ jsx("p", { style: { fontSize: "18px", color: "#525252", fontStyle: "italic" }, children: "No notes for this slide." })
+            ) : /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: { fontSize: "18px", color: "#525252", fontStyle: "italic" },
+                children: "No notes for this slide."
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxs(

package/dist/slide-notes-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slide-notes-view.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Phone-friendly speaker notes view that stays in sync with the presenter.\n *\n * Polls the sync endpoint to track the current slide and displays the\n * corresponding note. Notes beyond the slide count are treated as \"demo notes\"\n * — advance through them manually using the on-screen buttons.\n *\n * @example\n * ```tsx\n * // app/notes/page.tsx\n * import fs from 'fs';\n * import path from 'path';\n * import { parseSpeakerNotes, SlideNotesView } from 'nextjs-slides';\n *\n * const notes = parseSpeakerNotes(\n *   fs.readFileSync(path.join(process.cwd(), 'app/slides/notes.md'), 'utf-8'),\n * );\n *\n * export default function NotesPage() {\n *   return <SlideNotesView notes={notes} syncEndpoint=\"/api/nxs-sync\" />;\n * }\n * ```\n */\nexport function SlideNotesView({\n  notes,\n  syncEndpoint,\n  pollInterval = 500,\n}: {\n  /** Speaker notes array. Indices 0…slides-1 match slides; extras are demo notes. */\n  notes: (string | null)[];\n  /** API endpoint created with the sync route handlers. */\n  syncEndpoint: string;\n  /** Polling interval in ms. Defaults to 500. */\n  pollInterval?: number;\n}) {\n  const [noteIndex, setNoteIndex] = useState(0);\n  const [totalSlides, setTotalSlides] = useState(1);\n  const [connected, setConnected] = useState(false);\n  const manualOverride = useRef(false);\n\n  const poll = useCallback(async () => {\n    try {\n      const res = await fetch(syncEndpoint, { cache: 'no-store' });\n      if (!res.ok) return;\n      const data = await res.json();\n      const syncIndex = (data.slide as number) - 1;\n      setTotalSlides(data.total);\n      setConnected(true);\n\n      setNoteIndex(prev => {\n        if (manualOverride.current && prev >= data.total) return prev;\n        manualOverride.current = false;\n        return syncIndex;\n      });\n    } catch {\n      setConnected(false);\n    }\n  }, [syncEndpoint]);\n\n  useEffect(() => {\n    poll();\n    const id = setInterval(poll, pollInterval);\n    return () => clearInterval(id);\n  }, [poll, pollInterval]);\n\n  const goNext = useCallback(() => {\n    setNoteIndex(prev => {\n      if (prev >= notes.length - 1) return prev;\n      manualOverride.current = true;\n      return prev + 1;\n    });\n  }, [notes.length]);\n\n  const goPrev = useCallback(() => {\n    setNoteIndex(prev => {\n      if (prev <= 0) return prev;\n      manualOverride.current = true;\n      return prev - 1;\n    });\n  }, []);\n\n  const currentNote = noteIndex >= 0 && noteIndex < notes.length ? notes[noteIndex] : null;\n  const inDemoNotes = noteIndex >= totalSlides;\n  const displayNumber = noteIndex + 1;\n\n  const label = inDemoNotes\n    ? `Demo ${displayNumber - totalSlides} / ${notes.length - totalSlides}`\n    : `Slide ${displayNumber} / ${totalSlides}`;\n\n  return (\n    <div\n      style={{\n        minHeight: '100dvh',\n        display: 'flex',\n        flexDirection: 'column',\n        backgroundColor: '#0a0a0a',\n        color: '#e5e5e5',\n        fontFamily: 'system-ui, -apple-system, sans-serif',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: '12px 20px',\n          borderBottom: '1px solid #262626',\n          fontSize: '13px',\n          color: '#737373',\n        }}\n      >\n        <span>{label}</span>\n        <span\n          style={{\n            width: 8,\n            height: 8,\n            borderRadius: '50%',\n            backgroundColor: connected ? '#22c55e' : '#ef4444',\n          }}\n        />\n      </div>\n\n      <div\n        style={{\n          flex: 1,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          padding: '24px 20px',\n        }}\n      >\n        {currentNote ? (\n          <p\n            style={{\n              fontSize: 'clamp(18px, 4vw, 28px)',\n              lineHeight: 1.6,\n              maxWidth: '640px',\n              whiteSpace: 'pre-wrap',\n            }}\n          >\n            {currentNote}\n          </p>\n        ) : (\n          <p style={{ fontSize: '18px', color: '#525252', fontStyle: 'italic' }}>\n            No notes for this slide.\n          </p>\n        )}\n      </div>\n\n      <div\n        style={{\n          display: 'flex',\n          gap: '12px',\n          padding: '16px 20px',\n          borderTop: '1px solid #262626',\n        }}\n      >\n        <button\n          onClick={goPrev}\n          disabled={noteIndex <= 0}\n          style={{\n            flex: 1,\n            padding: '14px',\n            fontSize: '16px',\n            fontWeight: 500,\n            border: '1px solid #333',\n            borderRadius: '10px',\n            backgroundColor: noteIndex <= 0 ? '#111' : '#1a1a1a',\n            color: noteIndex <= 0 ? '#444' : '#e5e5e5',\n            cursor: noteIndex <= 0 ? 'default' : 'pointer',\n            WebkitTapHighlightColor: 'transparent',\n          }}\n        >\n          ← Prev\n        </button>\n        <button\n          onClick={goNext}\n          disabled={noteIndex >= notes.length - 1}\n          style={{\n            flex: 1,\n            padding: '14px',\n            fontSize: '16px',\n            fontWeight: 500,\n            border: '1px solid #333',\n            borderRadius: '10px',\n            backgroundColor: noteIndex >= notes.length - 1 ? '#111' : '#1a1a1a',\n            color: noteIndex >= notes.length - 1 ? '#444' : '#e5e5e5',\n            cursor: noteIndex >= notes.length - 1 ? 'default' : 'pointer',\n            WebkitTapHighlightColor: 'transparent',\n          }}\n        >\n          Next →\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/slide-notes-view.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Phone-friendly speaker notes view that stays in sync with the presenter.\n *\n * Polls the sync endpoint to track the current slide and displays the\n * corresponding note. Notes beyond the slide count are treated as \"demo notes\"\n * — advance through them manually using the on-screen buttons.\n *\n * @example\n * ```tsx\n * // app/notes/page.tsx\n * import fs from 'fs';\n * import path from 'path';\n * import { parseSpeakerNotes, SlideNotesView } from 'nextjs-slides';\n *\n * const notes = parseSpeakerNotes(\n *   fs.readFileSync(path.join(process.cwd(), 'app/slides/notes.md'), 'utf-8'),\n * );\n *\n * export default function NotesPage() {\n *   return <SlideNotesView notes={notes} syncEndpoint=\"/api/nxs-sync\" />;\n * }\n * ```\n */\nexport function SlideNotesView({\n  notes,\n  syncEndpoint,\n  pollInterval = 500,\n}: {\n  /** Speaker notes array. Indices 0…slides-1 match slides; extras are demo notes. */\n  notes: (string | null)[];\n  /** API endpoint created with the sync route handlers. */\n  syncEndpoint: string;\n  /** Polling interval in ms. Defaults to 500. */\n  pollInterval?: number;\n}) {\n  const [noteIndex, setNoteIndex] = useState(0);\n  const [totalSlides, setTotalSlides] = useState(1);\n  const [connected, setConnected] = useState(false);\n  const manualOverride = useRef(false);\n\n  const poll = useCallback(async () => {\n    try {\n      const res = await fetch(syncEndpoint, { cache: 'no-store' });\n      if (!res.ok) return;\n      const data = await res.json();\n      const syncIndex = (data.slide as number) - 1;\n      setTotalSlides(data.total);\n      setConnected(true);\n\n      setNoteIndex((prev) => {\n        if (manualOverride.current && prev >= data.total) return prev;\n        manualOverride.current = false;\n        return syncIndex;\n      });\n    } catch {\n      setConnected(false);\n    }\n  }, [syncEndpoint]);\n\n  useEffect(() => {\n    poll();\n    const id = setInterval(poll, pollInterval);\n    return () => clearInterval(id);\n  }, [poll, pollInterval]);\n\n  const goNext = useCallback(() => {\n    setNoteIndex((prev) => {\n      if (prev >= notes.length - 1) return prev;\n      manualOverride.current = true;\n      return prev + 1;\n    });\n  }, [notes.length]);\n\n  const goPrev = useCallback(() => {\n    setNoteIndex((prev) => {\n      if (prev <= 0) return prev;\n      manualOverride.current = true;\n      return prev - 1;\n    });\n  }, []);\n\n  const currentNote =\n    noteIndex >= 0 && noteIndex < notes.length ? notes[noteIndex] : null;\n  const inDemoNotes = noteIndex >= totalSlides;\n  const displayNumber = noteIndex + 1;\n\n  const label = inDemoNotes\n    ? `Demo ${displayNumber - totalSlides} / ${notes.length - totalSlides}`\n    : `Slide ${displayNumber} / ${totalSlides}`;\n\n  return (\n    <div\n      style={{\n        minHeight: '100dvh',\n        display: 'flex',\n        flexDirection: 'column',\n        backgroundColor: '#0a0a0a',\n        color: '#e5e5e5',\n        fontFamily: 'system-ui, -apple-system, sans-serif',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: '12px 20px',\n          borderBottom: '1px solid #262626',\n          fontSize: '13px',\n          color: '#737373',\n        }}\n      >\n        <span>{label}</span>\n        <span\n          style={{\n            width: 8,\n            height: 8,\n            borderRadius: '50%',\n            backgroundColor: connected ? '#22c55e' : '#ef4444',\n          }}\n        />\n      </div>\n\n      <div\n        style={{\n          flex: 1,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          padding: '24px 20px',\n        }}\n      >\n        {currentNote ? (\n          <p\n            style={{\n              fontSize: 'clamp(18px, 4vw, 28px)',\n              lineHeight: 1.6,\n              maxWidth: '640px',\n              whiteSpace: 'pre-wrap',\n            }}\n          >\n            {currentNote}\n          </p>\n        ) : (\n          <p\n            style={{ fontSize: '18px', color: '#525252', fontStyle: 'italic' }}\n          >\n            No notes for this slide.\n          </p>\n        )}\n      </div>\n\n      <div\n        style={{\n          display: 'flex',\n          gap: '12px',\n          padding: '16px 20px',\n          borderTop: '1px solid #262626',\n        }}\n      >\n        <button\n          onClick={goPrev}\n          disabled={noteIndex <= 0}\n          style={{\n            flex: 1,\n            padding: '14px',\n            fontSize: '16px',\n            fontWeight: 500,\n            border: '1px solid #333',\n            borderRadius: '10px',\n            backgroundColor: noteIndex <= 0 ? '#111' : '#1a1a1a',\n            color: noteIndex <= 0 ? '#444' : '#e5e5e5',\n            cursor: noteIndex <= 0 ? 'default' : 'pointer',\n            WebkitTapHighlightColor: 'transparent',\n          }}\n        >\n          ← Prev\n        </button>\n        <button\n          onClick={goNext}\n          disabled={noteIndex >= notes.length - 1}\n          style={{\n            flex: 1,\n            padding: '14px',\n            fontSize: '16px',\n            fontWeight: 500,\n            border: '1px solid #333',\n            borderRadius: '10px',\n            backgroundColor: noteIndex >= notes.length - 1 ? '#111' : '#1a1a1a',\n            color: noteIndex >= notes.length - 1 ? '#444' : '#e5e5e5',\n            cursor: noteIndex >= notes.length - 1 ? 'default' : 'pointer',\n            WebkitTapHighlightColor: 'transparent',\n          }}\n        >\n          Next →\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/slides.css

@@ -1,5 +1,8 @@
 /* nextjs-slides — Slide transition animations and code theme tokens */
 
+/* Ensure Tailwind v4 scans this package's component files for utility classes */
+@source "./*.js";
+
 /* Default code theme — override --sh-* and --nxs-code-* in :root or .dark */
 :root {
   --nxs-code-bg: #ffffff;
@@ -40,30 +43,9 @@
 
 .nxs-slide-split-col {
   min-width: 0;
-  width: 50%;
   overflow-x: auto;
 }
 
-/* Split layout: stack columns below 1024px — use grid to bypass flex overrides */
-@media (max-width: 1023px) {
-  #slide-deck .nxs-slide-split {
-    display: grid !important;
-    grid-template-columns: 1fr !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  #slide-deck .nxs-slide-split .nxs-slide-split-col {
-    width: 100% !important;
-    max-width: 100% !important;
-    min-width: 0 !important;
-  }
-
-  #slide-deck .nxs-slide-split .nxs-slide-split-divider {
-    display: none !important;
-  }
-}
-
 /* Code block wrapper — constrains width so code doesn't blow out the slide */
 .nxs-code-wrapper {
   min-width: 0;
@@ -76,7 +58,9 @@
   background: var(--nxs-code-bg);
   border: 1px solid var(--nxs-code-border);
   color: var(--nxs-code-text);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
   font-size: clamp(0.75rem, 1.5vw + 0.5rem, 0.875rem);
   line-height: 1.7;
   text-align: left;
@@ -93,23 +77,44 @@
   }
 }
 .nxs-code-block .hljs-keyword,
-.nxs-code-block .hljs-literal { color: var(--sh-keyword); }
-.nxs-code-block .hljs-string { color: var(--sh-string); }
-.nxs-code-block .hljs-number { color: var(--sh-literal); }
-.nxs-code-block .hljs-comment { color: var(--sh-comment); }
-.nxs-code-block .hljs-title.class_ { color: var(--sh-class); }
-.nxs-code-block .hljs-title.function_ { color: var(--sh-entity); }
+.nxs-code-block .hljs-literal {
+  color: var(--sh-keyword);
+}
+.nxs-code-block .hljs-string {
+  color: var(--sh-string);
+}
+.nxs-code-block .hljs-number {
+  color: var(--sh-literal);
+}
+.nxs-code-block .hljs-comment {
+  color: var(--sh-comment);
+}
+.nxs-code-block .hljs-title.class_ {
+  color: var(--sh-class);
+}
+.nxs-code-block .hljs-title.function_ {
+  color: var(--sh-entity);
+}
 .nxs-code-block .hljs-attr,
 .nxs-code-block .hljs-attribute,
-.nxs-code-block .hljs-params { color: var(--sh-property); }
+.nxs-code-block .hljs-params {
+  color: var(--sh-property);
+}
 .nxs-code-block .hljs-built_in,
-.nxs-code-block .hljs-variable { color: var(--sh-identifier); }
+.nxs-code-block .hljs-variable {
+  color: var(--sh-identifier);
+}
 .nxs-code-block .hljs-name,
-.nxs-code-block .hljs-tag .hljs-name { color: var(--sh-tag); }
-.nxs-code-block .hljs-tag { color: var(--sh-sign); }
+.nxs-code-block .hljs-tag .hljs-name {
+  color: var(--sh-tag);
+}
+.nxs-code-block .hljs-tag {
+  color: var(--sh-sign);
+}
 .nxs-code-block .hljs-punctuation,
-.nxs-code-block .hljs-operator { color: var(--sh-sign); }
-
+.nxs-code-block .hljs-operator {
+  color: var(--sh-sign);
+}
 
 /* Slide transition keyframes */
 @keyframes nxs-fade {

package/dist/types.d.ts

@@ -1,5 +1,8 @@
+/** Content alignment for {@link Slide}. */
 type SlideAlign = 'center' | 'left';
+/** Visual style for {@link SlideLink}. */
 type SlideLinkVariant = 'primary' | 'ghost';
+/** Configuration for the {@link SlideDeck} provider. */
 interface SlideDeckConfig {
     slides: React.ReactNode[];
     /** Speaker notes per slide (same index as slides). Use `parseSpeakerNotes()` to load from a markdown file. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-slides",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Composable slide deck primitives for Next.js — powered by React 19 ViewTransitions, Tailwind CSS, and highlight.js syntax highlighting.",
   "license": "MIT",
   "type": "module",
@@ -24,6 +24,8 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
@@ -55,6 +57,7 @@
     "eslint": "^10.0.2",
     "jsdom": "^25.0.0",
     "next": "^16.0.0",
+    "prettier": "^3.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.0",