nextjs-slides 0.3.3 → 0.4.0

package/README.md

@@ -28,17 +28,6 @@ Open http://localhost:3000 — choose "Geist deck" or "Alternate deck" (Playfair
 
 Peer dependencies: `next >=15`, `react >=19`, `tailwindcss >=4`.
 
-### Enable View Transitions
-
-Add to your `next.config.ts` (merge with existing config) for slide transition animations:
-
-```ts
-const nextConfig = {
-  experimental: {
-    viewTransition: true,
-  },
-};
-```
 
 ## Quick Start
 
@@ -165,7 +154,7 @@ That's it. Navigate to `/slides` and you have a full slide deck.
 ### Structured
 
 - **`<SlideStatementList>`** / **`<SlideStatement>`** — Title + description pairs with border separators.
-- **`<SlideSpeaker>`** — Avatar + name + title row.
+- **`<SlideSpeaker>`** — Avatar + name + title row. Props: `name`, `title`, `avatar` (optional image URL).
 - **`<SlideSpeakerGrid>`** — 2-column speaker grid.
 - **`<SlideSpeakerList>`** — Vertical speaker stack.
 
@@ -245,7 +234,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.
 
-**Required:** Enable `experimental.viewTransition: true` in your Next.js config (see Install section above). Without it, transitions may not animate correctly.
 
 ## Troubleshooting
 

package/dist/primitives.d.ts

@@ -58,9 +58,11 @@ declare function SlideStatement({ title, description, className, }: {
     description?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function SlideSpeaker({ name, title, className }: {
+declare function SlideSpeaker({ name, title, avatar, className, }: {
     name: string;
     title: string;
+    /** Image URL or path for the speaker avatar. Falls back to placeholder when omitted. */
+    avatar?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function SlideSpeakerGrid({ children, className }: {

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 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 overflow-hidden 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 max-w-4xl flex-col gap-6",
+              "relative z-10 flex min-w-0 max-w-4xl flex-col gap-6",
               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", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("nxs-slide relative flex h-dvh w-dvw overflow-hidden", 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 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: "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: "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 w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24", children: right })
+    /* @__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 })
   ] });
 }
 function SlideTitle({ children, className }) {
@@ -89,9 +89,9 @@ 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("w-full max-w-2xl", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 w-full max-w-2xl", 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 overflow-x-auto border p-6 text-left font-mono text-[13px] leading-[1.7] sm:text-sm", children: /* @__PURE__ */ jsx("code", { dangerouslySetInnerHTML: { __html: html } }) })
+    /* @__PURE__ */ jsx("pre", { className: "nxs-code-block min-w-0 overflow-x-auto border p-6 text-left font-mono text-[13px] leading-[1.7] sm:text-sm", children: /* @__PURE__ */ jsx("code", { dangerouslySetInnerHTML: { __html: html } }) })
   ] });
 }
 function SlideList({ children, className }) {
@@ -111,13 +111,13 @@ function SlideDemo({
   className,
   label
 }) {
-  return /* @__PURE__ */ jsxs("div", { "data-slide-interactive": true, className: cn("w-full max-w-2xl", className), 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] border p-6", children: /* @__PURE__ */ jsx(SlideDemoContent, { children }) })
   ] });
 }
 function SlideStatementList({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col", className), children });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 w-full flex-col", className), children });
 }
 function SlideStatement({
   title,
@@ -129,9 +129,24 @@ function SlideStatement({
     description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm sm:text-base", children: description })
   ] });
 }
-function SlideSpeaker({ name, title, className }) {
+function SlideSpeaker({
+  name,
+  title,
+  avatar,
+  className
+}) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-muted h-12 w-12 shrink-0 rounded-full", "aria-hidden": true }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "h-12 w-12 shrink-0 overflow-hidden rounded-full",
+          avatar ? "relative" : "bg-foreground/15 border-foreground/20 border"
+        ),
+        "aria-hidden": true,
+        children: avatar ? /* @__PURE__ */ jsx("img", { src: avatar, alt: "", className: "h-full w-full object-cover" }) : null
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("p", { className: "text-foreground/90 text-sm font-medium tracking-widest uppercase", children: name }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm tracking-wider uppercase", children: title })

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-6',\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=\"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=\"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('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 overflow-x-auto border p-6 text-left font-mono text-[13px] leading-[1.7] sm:text-sm\">\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('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] border 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 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({ name, title, className }: { name: string; title: string; className?: string }) {\n  return (\n    <div className={cn('flex items-center gap-4', className)}>\n      <div className=\"bg-muted h-12 w-12 shrink-0 rounded-full\" aria-hidden />\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 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-6',\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 min-w-0 overflow-x-auto border p-6 text-left font-mono text-[13px] leading-[1.7] sm:text-sm\">\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] border 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-slides",
-  "version": "0.3.3",
+  "version": "0.4.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",