@lexibase/rdx-next 2.0.0 → 3.1.0

package/bin/cli.mjs

@@ -10,6 +10,7 @@ import { createJiti } from 'jiti'
 
 import postcssConfig from '../postcss.config.mjs'
 import { preparePublicAssets } from './public-assets.mjs'
+import { prepareProjectStyles } from './project-styles.mjs'
 
 export async function runRdxCli({ templateDir } = {}) {
   const supportedCommands = new Set(['dev', 'build', 'start'])
@@ -31,6 +32,7 @@ export async function runRdxCli({ templateDir } = {}) {
       force: true,
       recursive: true,
     })
+    await prepareProjectStyles(projectRoot, runtimeDirectory)
     // Resolve in Node before Next processes this file: UI may be transitive,
     // and native Tailwind plugins must stay outside the Turbopack module graph.
     const resolvePlugin = createRequire(import.meta.url)

package/bin/project-styles.mjs

@@ -0,0 +1,27 @@
+import { readFile, stat, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+
+/** Import project-owned CSS after the theme without copying or editing it. */
+export async function prepareProjectStyles(projectRoot, runtimeDirectory) {
+  const source = path.join(projectRoot, 'rdx.css')
+  const destination = path.join(runtimeDirectory, 'app', 'globals.css')
+  const current = await readFile(destination, 'utf8')
+  const original = current.replace(
+    /^@import "\.\.\/\.\.\/rdx\.css";\r?\n/gm,
+    ''
+  )
+  let exists = false
+  try {
+    const info = await stat(source)
+    if (!info.isFile()) throw new Error('rdx.css must be a CSS file.')
+    exists = true
+  } catch (error) {
+    if (error.code !== 'ENOENT') throw error
+  }
+  const next = exists
+    ? original.replace(/(@import[^;]+;)/, '$1\n@import "../../rdx.css";')
+    : original
+  if (next !== current) {
+    await writeFile(destination, next)
+  }
+}

package/dist/runtime/index.js

@@ -8,6 +8,7 @@ import {
 import { Button } from "@lexibase/rdx-ui/components/button";
 import { DocsSidebar } from "@lexibase/rdx-ui/components/docs-sidebar";
 import { DocsToc } from "@lexibase/rdx-ui/components/docs-toc";
+import { DocsPageTransition } from "@lexibase/rdx-ui/components/docs-page-transition";
 import { DocsSearch } from "@lexibase/rdx-ui/components/docs-search";
 import { Home } from "@lexibase/rdx-ui/components/home";
 import { FooterCredit } from "@lexibase/rdx-ui/components/footer-credit";
@@ -28,6 +29,7 @@ import { compileMDX } from "next-mdx-remote/rsc";
 import remarkGfm from "remark-gfm";
 import {
   remarkDocumentLinks,
+  remarkDocumentationComponents,
   rehypeDocumentationHeadings,
   rehypeDocumentationCode
 } from "@lexibase/rdx-core/mdx";
@@ -39,7 +41,11 @@ function compileDocumentation(source, components, links) {
       blockJS: true,
       blockDangerousJS: true,
       mdxOptions: {
-        remarkPlugins: [remarkGfm, [remarkDocumentLinks, links]],
+        remarkPlugins: [
+          remarkGfm,
+          remarkDocumentationComponents,
+          [remarkDocumentLinks, links]
+        ],
         rehypePlugins: [rehypeDocumentationHeadings, rehypeDocumentationCode]
       }
     }
@@ -286,51 +292,68 @@ async function DocsPage({
           className: "relative flex-1 min-w-0 h-full overflow-y-auto pt-12 md:pt-0 outline-none",
           children: [
             project.config.TOC && /* @__PURE__ */ jsx(DocsToc, {}, hrefFor(currentSlug)),
-            /* @__PURE__ */ jsxs(
-              "section",
+            /* @__PURE__ */ jsx(
+              DocsPageTransition,
               {
-                className: `w-full min-h-full px-7 flex flex-col gap-5 pb-8 md:py-8 ${project.config.TOC ? "xl:pr-20" : ""}`,
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-5 md:mx-auto md:max-w-[860px] pt-14 md:pt-0 flex-1", children: [
-                    /* @__PURE__ */ jsxs("header", { className: "mb-6", children: [
-                      source.badge && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: source.badge === "Archived" ? messages.archivedVersion : source.badge }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-600 font-semibold uppercase block -mb-0.5", children: category?.title }),
-                      /* @__PURE__ */ jsx("h1", { className: "text-4xl uppercase font-bold mb-2", children: title }),
-                      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-ring max-w-[726px]", children: description })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      "main",
-                      {
-                        id: "rdx-main",
-                        tabIndex: -1,
-                        className: "h-full w-full flex-1 max-w-[960px]",
-                        children: content
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs("footer", { className: "flex flex-col", children: [
-                    /* @__PURE__ */ jsxs("section", { className: "flex items-center justify-between", children: [
-                      previous ? /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          variant: "outline",
-                          size: "sm",
-                          href: hrefFor(previous.slug),
-                          children: previous.title
-                        }
-                      ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: messages.previous }),
-                      next ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", href: hrefFor(next.slug), children: next.title }) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: messages.next })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      FooterCredit,
-                      {
-                        lang: project.config.lang,
-                        name: project.config.metadata.applicationName,
-                        since: project.config.metadata.since
-                      }
-                    )
-                  ] })
-                ]
+                previousHref: previous ? hrefFor(previous.slug) : void 0,
+                nextHref: next ? hrefFor(next.slug) : void 0,
+                children: /* @__PURE__ */ jsxs(
+                  "section",
+                  {
+                    className: `w-full min-h-full bg-background px-7 flex flex-col gap-5 pb-8 md:py-8 ${project.config.TOC ? "xl:pr-20" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-5 md:mx-auto md:max-w-[860px] pt-14 md:pt-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("header", { className: "mb-6", children: [
+                          source.badge && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: source.badge === "Archived" ? messages.archivedVersion : source.badge }),
+                          /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-600 font-semibold uppercase block -mb-0.5", children: category?.title }),
+                          /* @__PURE__ */ jsx("h1", { className: "text-4xl uppercase font-bold mb-2", children: title }),
+                          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-ring max-w-[726px]", children: description })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          "main",
+                          {
+                            id: "rdx-main",
+                            tabIndex: -1,
+                            className: "h-full w-full flex-1 max-w-[960px]",
+                            children: content
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("footer", { className: "flex flex-col", children: [
+                        /* @__PURE__ */ jsxs("section", { className: "flex items-center justify-between", children: [
+                          previous ? /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "outline",
+                              size: "sm",
+                              href: hrefFor(previous.slug),
+                              transitionTypes: ["rdx-doc-back"],
+                              children: previous.title
+                            }
+                          ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: messages.previous }),
+                          next ? /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "outline",
+                              size: "sm",
+                              href: hrefFor(next.slug),
+                              transitionTypes: ["rdx-doc-forward"],
+                              children: next.title
+                            }
+                          ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: messages.next })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          FooterCredit,
+                          {
+                            lang: project.config.lang,
+                            name: project.config.metadata.applicationName,
+                            since: project.config.metadata.since
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
               }
             )
           ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-next",
-  "version": "2.0.0",
+  "version": "3.1.0",
   "description": "The Next.js runtime for RDX documentation projects.",
   "license": "MIT",
   "type": "module",
@@ -52,10 +52,10 @@
     "remark-gfm": "^4",
     "typescript": "6.0.3",
     "@lexibase/rdx-types": "1.1.1",
-    "@lexibase/rdx-core": "1.1.1"
+    "@lexibase/rdx-core": "1.3.0"
   },
   "peerDependencies": {
-    "@lexibase/rdx-ui": "^2.0.0",
+    "@lexibase/rdx-ui": "^3.1.0",
     "next": "^16.4.2",
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
@@ -81,7 +81,7 @@
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "@rdx/eslint-config": "1.0.0",
-    "@lexibase/rdx-ui": "2.0.0",
+    "@lexibase/rdx-ui": "3.1.0",
     "@rdx/typescript-config": "1.0.0"
   },
   "scripts": {