nextjs-slides 0.5.1 → 0.5.2

package/README.md

@@ -247,6 +247,24 @@ export default function NotesPage() {
 
 Open your phone on `http://<your-ip>:3000/notes` (same network). The deck POSTs the current slide to the sync endpoint on every navigation; the notes view polls it every 500ms.
 
+### Demo notes (extra sections after the slides)
+
+Add more `---` sections after the last slide's notes — these become demo notes you can step through on your phone after the presentation ends:
+
+```md
+...last slide notes
+
+---
+
+Open the counter demo. Show how useState drives the count.
+
+---
+
+Switch to the editor. Walk through adding a new slide.
+```
+
+The notes view auto-follows the deck during slides. Once you tap "Next" past the last slide, you enter demo notes territory (the header switches to "Demo 1 / 2") and the phone stops auto-syncing so you control it manually.
+
 > **Note:** The sync state lives in server memory — designed for `next dev` or single-server deployments. It won't persist across serverless function invocations.
 
 ## Custom Base Path & Multiple Decks
@@ -312,7 +330,6 @@ Use `className="font-pixel"` on primitives where you want the pixel display font
 
 Slide transitions use the React 19 `<ViewTransition>` component with `addTransitionType()`. The CSS in `nextjs-slides/styles.css` defines the `::view-transition-*` animations. Override them in your own CSS to customize.
 
-
 ## Troubleshooting
 
 **SlideCode syntax highlighting looks broken or colorless** — Ensure you import `nextjs-slides/styles.css` in your root layout or global CSS (see Quick Start). The `--sh-*` variables must be in scope for highlight.js tokens to display correctly.

package/dist/primitives.js

@@ -24,7 +24,7 @@ function Slide({
     "div",
     {
       className: cn(
-        "nxs-slide relative flex h-dvh w-dvw flex-col justify-center gap-8 overflow-hidden px-12 py-20 sm:px-24 md:px-32 lg:px-40",
+        "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",
         align === "center" && "items-center text-center",
         align === "left" && "items-start text-left",
         className
@@ -35,7 +35,7 @@ function Slide({
           "div",
           {
             className: cn(
-              "relative z-10 flex min-w-0 max-w-4xl flex-col gap-10",
+              "relative z-10 flex max-w-4xl flex-col gap-10",
               align === "center" && "items-center",
               align === "left" && "items-start"
             ),
@@ -51,11 +51,11 @@ function SlideSplitLayout({
   right,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("nxs-slide relative flex h-dvh w-dvw overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("nxs-slide 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: "relative z-10 flex min-w-0 w-1/2 flex-col justify-center overflow-x-auto px-12 py-20 sm:px-16 md:px-20 lg:px-24", children: left }),
+    /* @__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: "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: "relative z-10 flex min-w-0 w-1/2 flex-col justify-center overflow-x-auto px-12 py-20 sm:px-16 md:px-20 lg:px-24", children: right })
+    /* @__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 }) {
@@ -89,7 +89,7 @@ function SlideHeaderBadge({ children, className }) {
 function SlideCode({ children, className, title }) {
   const lang = title?.split(".").pop();
   const html = highlightCode(children, lang);
-  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 w-full max-w-2xl", className), children: [
+  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 } }) })
   ] });

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 overflow-hidden 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 min-w-0 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 relative flex h-dvh w-dvw overflow-hidden', className)}>\n      <div className=\"border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6\" aria-hidden />\n      <div className=\"relative z-10 flex min-w-0 w-1/2 flex-col justify-center overflow-x-auto px-12 py-20 sm:px-16 md:px-20 lg:px-24\">\n        {left}\n      </div>\n      <div className=\"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=\"relative z-10 flex min-w-0 w-1/2 flex-col justify-center overflow-x-auto 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('min-w-0 w-full max-w-2xl', 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) 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 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=\"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":[]}

package/dist/slides.css

@@ -33,11 +33,27 @@
   --sh-sign: #ededed;
 }
 
+/* Slide container overflow containment */
+.nxs-slide {
+  overflow: hidden;
+}
+
+.nxs-slide-split-col {
+  min-width: 0;
+  overflow-x: auto;
+}
+
+/* Code block wrapper — constrains width so code doesn't blow out the slide */
+.nxs-code-wrapper {
+  min-width: 0;
+  width: 100%;
+  max-width: 42rem;
+}
+
 /* Map highlight.js to theme variables (all overwritable via --sh-*) */
 .nxs-code-block {
   background: var(--nxs-code-bg);
   border: 1px solid var(--nxs-code-border);
-  border-radius: 0.5rem;
   color: var(--nxs-code-text);
   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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-slides",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Composable slide deck primitives for Next.js — powered by React 19 ViewTransitions, Tailwind CSS, and highlight.js syntax highlighting.",
   "license": "MIT",
   "type": "module",