@lexibase/rdx-next 1.0.0-beta.5 → 1.0.0-beta.7

package/README.md

@@ -1,6 +1,26 @@
-# `@rdx/next`
+# `@lexibase/rdx-next`
 
 The official Next.js runtime for RDX documentation projects.
 
 It exposes the `rdx` command used by generated projects to create their
 internal `.rdx` application and run Next.js.
+
+Generated sites use the same theme and components as the development website,
+through `@lexibase/rdx-ui`: logo, navbar, Radix version dropdown, mobile/desktop
+sidebar, landing page, MDX styles and theme provider. The adapter owns content
+and route data; it does not implement a parallel UI theme.
+
+Use `homepage: { enabled: true }` in `rdx.config.ts` for the centered-logo
+homepage, or import a project-owned React component with `homepage.component`.
+Without the option, `/` redirects to `/docs`. Additional content sources from
+explicitly configured plugins enable the shared navbar dropdown.
+
+`.rdx/` is generated. Configure the site or edit a project-owned `home.tsx`
+instead of modifying files inside `.rdx/`.
+
+Place images, favicon and downloads in the project-root `public/` directory.
+The CLI links `.rdx/public` to it using a junction on Windows or a directory
+symlink elsewhere. `/images/logo.svg` serves `public/images/logo.svg` in dev and
+production. No asset copies are cached and original files are never removed.
+Restart/redeploy production after adding/removing assets. Documentation versions
+share this directory; snapshots do not copy its contents.

package/bin/public-assets.mjs

@@ -0,0 +1,58 @@
+import { lstat, mkdir, realpath, symlink, unlink } from 'node:fs/promises'
+import path from 'node:path'
+import process from 'node:process'
+
+async function inspect(filePath) {
+  try {
+    return await lstat(filePath)
+  } catch (error) {
+    if (error.code === 'ENOENT') return null
+    throw error
+  }
+}
+
+/** Link generated Next public/ to project-owned assets; never copy or delete them. */
+export async function preparePublicAssets(projectRoot, runtimeDirectory) {
+  const runtime = await inspect(runtimeDirectory)
+  if (!runtime?.isDirectory() || runtime.isSymbolicLink())
+    throw new Error(
+      '.rdx/ must be a real directory, not a symbolic link or junction.'
+    )
+
+  const publicDirectory = path.join(projectRoot, 'public')
+  const existing = await inspect(publicDirectory)
+  if (existing && (!existing.isDirectory() || existing.isSymbolicLink()))
+    throw new Error('public/ must be a real directory in the project root.')
+  await mkdir(publicDirectory, { recursive: true })
+
+  const destination = path.join(runtimeDirectory, 'public')
+  const link = await inspect(destination)
+  if (link) {
+    if (!link.isSymbolicLink())
+      throw new Error(
+        'Cannot prepare .rdx/public: a file or directory already exists there. Move any assets to the project public/ directory, then remove the conflicting .rdx/public entry and retry. RDX has not removed it.'
+      )
+    let target
+    try {
+      target = await realpath(destination)
+    } catch (error) {
+      if (error.code !== 'ENOENT') throw error
+    }
+    if (target === (await realpath(publicDirectory))) return
+    // Only unlink the internal pointer, never its old target or the user's files.
+    await unlink(destination)
+  }
+
+  const target = process.platform === 'win32' ? publicDirectory : '../public'
+  try {
+    await symlink(
+      target,
+      destination,
+      process.platform === 'win32' ? 'junction' : 'dir'
+    )
+  } catch (error) {
+    throw new Error(
+      `Could not link .rdx/public to public/: ${error.message}. Use a filesystem that supports directory links (junctions on Windows); your public files have not been removed.`
+    )
+  }
+}

package/bin/rdx.mjs

@@ -10,6 +10,8 @@ import process from 'node:process'
 import { createRdxProject } from '@lexibase/rdx-core/config'
 import { createJiti } from 'jiti'
 
+import { preparePublicAssets } from './public-assets.mjs'
+
 const supportedCommands = new Set(['dev', 'build', 'start'])
 const command = process.argv[2]
 const commandArgs = process.argv.slice(3)
@@ -23,6 +25,7 @@ const runtimeDirectory = path.join(projectRoot, '.rdx')
 
 async function prepareRuntime() {
   await mkdir(runtimeDirectory, { recursive: true })
+  await preparePublicAssets(projectRoot, runtimeDirectory)
   await cp(runtimeTemplate, runtimeDirectory, { force: true, recursive: true })
 }
 
@@ -47,6 +50,7 @@ async function main() {
   const jiti = createJiti(import.meta.url, {
     moduleCache: false,
     fsCache: false,
+    jsx: { runtime: 'automatic' },
   })
   let input
   try {

package/dist/runtime/index.d.ts

@@ -3,9 +3,10 @@ import { ReactNode } from 'react';
 import { RdxProject, RdxRuntimeConfig } from '@lexibase/rdx-types';
 export { createRdxProject, getProjectDocsPaths } from '@lexibase/rdx-core';
 
-declare function RdxLayout({ children, config, }: {
+declare function RdxLayout({ children, config, bodyClassName, }: {
     children: ReactNode;
     config: RdxRuntimeConfig;
+    bodyClassName?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function HomePage({ project }: {
     project: RdxProject;

package/dist/runtime/index.js

@@ -5,50 +5,39 @@ import {
   getSourceOptions,
   resolveDocsRoute
 } from "@lexibase/rdx-core";
+import { Button } from "@lexibase/rdx-ui/components/button";
+import { DocsSidebar } from "@lexibase/rdx-ui/components/docs-sidebar";
+import { Home } from "@lexibase/rdx-ui/components/home";
+import { Logo } from "@lexibase/rdx-ui/components/logo";
+import { mdxComponents } from "@lexibase/rdx-ui/components/mdx-components";
+import { Navbar } from "@lexibase/rdx-ui/components/navbar";
+import {
+  VersionDropdown
+} from "@lexibase/rdx-ui/components/version-dropdown";
+import { ThemeProvider } from "@lexibase/rdx-ui/providers/theme-provider";
 import { compileMDX } from "next-mdx-remote/rsc";
 import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
 import { createRdxProject, getProjectDocsPaths } from "@lexibase/rdx-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var mdxComponents = {
-  h1: (props) => /* @__PURE__ */ jsx("h1", { ...props }),
-  h2: (props) => /* @__PURE__ */ jsx("h2", { ...props }),
-  h3: (props) => /* @__PURE__ */ jsx("h3", { ...props }),
-  p: (props) => /* @__PURE__ */ jsx("p", { ...props }),
-  ul: (props) => /* @__PURE__ */ jsx("ul", { ...props }),
-  ol: (props) => /* @__PURE__ */ jsx("ol", { ...props }),
-  li: (props) => /* @__PURE__ */ jsx("li", { ...props }),
-  blockquote: (props) => /* @__PURE__ */ jsx("blockquote", { ...props }),
-  pre: (props) => /* @__PURE__ */ jsx("pre", { ...props }),
-  code: (props) => /* @__PURE__ */ jsx("code", { ...props }),
-  a: ({ href, ...props }) => {
-    const isExternal = href?.startsWith("http");
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        rel: isExternal ? "noreferrer" : void 0,
-        target: isExternal ? "_blank" : void 0,
-        ...props
-      }
-    );
-  }
-};
 function RdxLayout({
   children,
-  config
+  config,
+  bodyClassName
 }) {
-  return /* @__PURE__ */ jsx(
-    "html",
+  return /* @__PURE__ */ jsx("html", { suppressHydrationWarning: true, lang: config.lang ?? "en", children: /* @__PURE__ */ jsx("body", { className: bodyClassName, children: /* @__PURE__ */ jsxs(
+    ThemeProvider,
     {
-      lang: config.lang ?? "en",
-      "data-theme": config.theme?.defaultTheme ?? "system",
-      children: /* @__PURE__ */ jsxs("body", { children: [
+      disableTransitionOnChange: true,
+      enableSystem: true,
+      attribute: "class",
+      defaultTheme: config.theme?.defaultTheme ?? "system",
+      children: [
         /* @__PURE__ */ jsx("a", { className: "rdx-skip-link", href: "#rdx-main", children: "Skip to content" }),
-        children
-      ] })
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col h-dvh", children })
+      ]
     }
-  );
+  ) }) });
 }
 function RdxHeader({
   project,
@@ -56,78 +45,56 @@ function RdxHeader({
 }) {
   const { config } = project;
   const { source, slug: currentSlug } = resolveDocsRoute(project, slug);
-  const brand = config.navbar?.title ?? config.title;
-  return /* @__PURE__ */ jsxs("header", { className: "rdx-header", children: [
-    /* @__PURE__ */ jsx(
-      Link,
-      {
-        className: "rdx-brand",
-        href: config.homepage?.enabled ? "/" : "/docs",
-        "aria-label": config.title,
-        children: brand
-      }
-    ),
-    /* @__PURE__ */ jsxs("nav", { className: "rdx-header-actions", "aria-label": "Main navigation", children: [
-      config.homepage?.enabled && /* @__PURE__ */ jsx(Link, { href: "/", children: "Home" }),
-      /* @__PURE__ */ jsx(Link, { href: "/docs", children: "Documentation" }),
-      project.sources.length > 1 && /* @__PURE__ */ jsxs("details", { className: "rdx-version-menu", children: [
-        /* @__PURE__ */ jsxs("summary", { "aria-label": `Documentation version: ${source.label}`, children: [
-          source.label,
-          source.badge ? ` (${source.badge})` : ""
-        ] }),
-        /* @__PURE__ */ jsx("ul", { "aria-label": "Documentation versions", children: project.sources.map((edition) => {
-          const options = getSourceOptions(project, edition);
-          const destination = currentSlug && getDocument(currentSlug, options) ? currentSlug : getDocsPaths(options)[0];
-          const href = ["/docs", edition.routePrefix, destination].filter(Boolean).join("/");
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-            Link,
-            {
-              href,
-              "aria-current": edition.id === source.id ? "true" : void 0,
-              children: [
-                edition.label,
-                edition.badge ? ` (${edition.badge})` : ""
-              ]
-            }
-          ) }, edition.id);
-        }) })
-      ] }),
-      config.navbar?.actions?.github?.visible && config.navbar.actions.github.url && /* @__PURE__ */ jsx(
-        "a",
-        {
-          className: "rdx-github-link",
-          href: config.navbar.actions.github.url,
-          rel: "noreferrer",
-          target: "_blank",
-          children: "GitHub"
-        }
-      )
-    ] })
-  ] });
+  const options = project.sources.map((edition) => {
+    const docs = getSourceOptions(project, edition);
+    const destination = currentSlug && getDocument(currentSlug, docs) ? currentSlug : getDocsPaths(docs)[0];
+    return {
+      id: edition.id,
+      label: edition.id === "current" ? "Current" : `Version ${edition.label}`,
+      kind: edition.id === "current" ? "live" : edition.badge === "Archived" ? "archived" : "version",
+      href: ["/docs", edition.routePrefix, destination].filter(Boolean).join("/")
+    };
+  });
+  const BrandLogo = config.navbar?.logo ?? Logo;
+  return /* @__PURE__ */ jsx(
+    Navbar,
+    {
+      title: config.navbar?.title ?? "",
+      siteTitle: config.title,
+      logo: /* @__PURE__ */ jsx(BrandLogo, { className: "size-5" }),
+      homeHref: config.homepage?.enabled ? "/" : "/docs",
+      docsHref: ["/docs", source.routePrefix].filter(Boolean).join("/"),
+      versionMenu: project.sources.length > 1 ? /* @__PURE__ */ jsx(VersionDropdown, { options, currentId: source.id }) : void 0,
+      github: config.navbar?.actions?.github,
+      showToggleMode: config.navbar?.actions?.showToggleMode
+    }
+  );
 }
 function HomePage({ project }) {
   const { config } = project;
   if (!config.homepage?.enabled) redirect("/docs");
   const homepage = config.homepage;
-  const buttons = homepage.buttons ?? [
-    { label: "Read the documentation", href: "/docs" }
-  ];
+  const CustomHome = homepage.component;
+  const BrandLogo = config.navbar?.logo ?? Logo;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(RdxHeader, { project }),
-    /* @__PURE__ */ jsxs("main", { id: "rdx-main", tabIndex: -1, className: "rdx-homepage", children: [
-      /* @__PURE__ */ jsx("p", { className: "rdx-homepage-eyebrow", children: config.title }),
-      /* @__PURE__ */ jsx("h1", { children: homepage.title ?? config.title }),
-      /* @__PURE__ */ jsx("p", { className: "rdx-homepage-description", children: homepage.description ?? config.description }),
-      /* @__PURE__ */ jsx("div", { className: "rdx-homepage-buttons", children: buttons.map((button, index) => /* @__PURE__ */ jsx(
-        Link,
-        {
-          className: index === 0 ? "rdx-button rdx-button-primary" : "rdx-button",
-          href: button.href,
-          children: button.label
-        },
-        `${index}:${button.href}`
-      )) })
-    ] })
+    /* @__PURE__ */ jsx(
+      "main",
+      {
+        id: "rdx-main",
+        tabIndex: -1,
+        className: "flex-1 min-h-0 overflow-y-auto",
+        children: CustomHome ? /* @__PURE__ */ jsx(CustomHome, {}) : /* @__PURE__ */ jsx(
+          Home,
+          {
+            title: homepage.title ?? config.title,
+            logo: /* @__PURE__ */ jsx(BrandLogo, { className: "size-52 hover:scale-105 hover:rotate-1 transition-[scale,rotation] duration-1000" }),
+            description: homepage.description,
+            buttons: homepage.buttons
+          }
+        )
+      }
+    )
   ] });
 }
 async function DocsPage({
@@ -140,15 +107,14 @@ async function DocsPage({
     document,
     categories
   } = resolveDocsRoute(project, slug);
-  if (!currentSlug) {
+  if (!currentSlug)
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
-      /* @__PURE__ */ jsxs("main", { id: "rdx-main", tabIndex: -1, className: "rdx-empty-state", children: [
+      /* @__PURE__ */ jsxs("main", { id: "rdx-main", tabIndex: -1, className: "p-8", children: [
         /* @__PURE__ */ jsx("h1", { children: "Your documentation is ready." }),
-        /* @__PURE__ */ jsx("p", { children: "Add an `.mdx` file inside `docs/` to create your first page." })
+        /* @__PURE__ */ jsx("p", { children: "Add an .mdx file inside your configured documentation directory." })
       ] })
     ] });
-  }
   if (!document) notFound();
   const { content } = await compileMDX({
     source: document.content,
@@ -156,37 +122,62 @@ async function DocsPage({
   });
   const title = typeof document.frontmatter.title === "string" ? document.frontmatter.title : currentSlug;
   const description = typeof document.frontmatter.description === "string" ? document.frontmatter.description : null;
+  const hrefFor = (pageSlug) => ["/docs", source.routePrefix, pageSlug].filter(Boolean).join("/");
+  const sidebarCategories = categories.map((category2) => ({
+    title: category2.title,
+    links: category2.pages.map((page) => ({
+      label: page.title,
+      href: hrefFor(page.slug)
+    }))
+  }));
+  const pages = categories.flatMap((category2) => category2.pages);
+  const index = pages.findIndex((page) => page.slug === currentSlug);
+  const previous = pages[index - 1];
+  const next = pages[index + 1];
+  const category = categories.find(
+    (entry) => entry.pages.some((page) => page.slug === currentSlug)
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
-    /* @__PURE__ */ jsxs("div", { className: "rdx-docs-layout", children: [
-      /* @__PURE__ */ jsx("aside", { className: "rdx-sidebar", "aria-label": "Documentation navigation", children: /* @__PURE__ */ jsxs("details", { className: "rdx-sidebar-menu", open: true, children: [
-        /* @__PURE__ */ jsx("summary", { children: "On this site" }),
-        /* @__PURE__ */ jsx("nav", { "aria-label": "Documentation pages", children: categories.map((category) => /* @__PURE__ */ jsxs("section", { className: "rdx-sidebar-category", children: [
-          /* @__PURE__ */ jsx("h2", { children: category.title }),
-          /* @__PURE__ */ jsx("ul", { children: category.pages.map((page) => {
-            const href = ["/docs", source.routePrefix, page.slug].filter(Boolean).join("/");
-            const isCurrentPage = page.slug === currentSlug;
-            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              Link,
-              {
-                "aria-current": isCurrentPage ? "page" : void 0,
-                className: isCurrentPage ? "is-active" : void 0,
-                href,
-                children: page.title
-              }
-            ) }, page.slug);
-          }) })
-        ] }, category.id)) })
-      ] }) }),
-      /* @__PURE__ */ jsxs("main", { id: "rdx-main", tabIndex: -1, className: "rdx-document", children: [
-        /* @__PURE__ */ jsxs("header", { className: "rdx-document-header", children: [
-          source.badge && /* @__PURE__ */ jsx("p", { className: "rdx-source-badge", children: source.badge }),
-          /* @__PURE__ */ jsx("p", { className: "rdx-breadcrumb", children: currentSlug }),
-          /* @__PURE__ */ jsx("h1", { children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "rdx-description", children: description })
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 overflow-hidden relative", children: [
+      /* @__PURE__ */ jsx(
+        DocsSidebar,
+        {
+          categories: sidebarCategories,
+          pathname: hrefFor(currentSlug)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-full overflow-y-auto pt-12 md:pt-0 outline-none", children: /* @__PURE__ */ jsxs("section", { className: "w-full min-h-full px-7 flex flex-col gap-5 pb-8 md:py-8", 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 }),
+            /* @__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__ */ jsx("article", { className: "rdx-mdx-content", 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", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: hrefFor(previous.slug), children: previous.title }) }) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: "Previous" }),
+            next ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: hrefFor(next.slug), children: next.title }) }) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: "Next" })
+          ] }),
+          /* @__PURE__ */ jsx("section", { className: "flex items-center justify-center w-full py-5", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            "\xA9 ",
+            (/* @__PURE__ */ new Date()).getFullYear(),
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: project.config.title })
+          ] }) })
+        ] })
+      ] }) })
     ] })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-next",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "description": "The Next.js runtime for RDX documentation projects.",
   "license": "MIT",
   "type": "module",
@@ -8,6 +8,8 @@
     "rdx": "./bin/rdx.mjs"
   },
   "exports": {
+    "./postcss.config": "./postcss.config.mjs",
+    "./styles.css": "./src/runtime/styles.css",
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -21,13 +23,16 @@
     "bin",
     "dist",
     "templates",
+    "postcss.config.mjs",
+    "src/runtime/styles.css",
     "README.md"
   ],
   "dependencies": {
     "jiti": "^2.6.1",
     "next-mdx-remote": "^5.0.0",
-    "@lexibase/rdx-types": "1.0.0-beta.3",
-    "@lexibase/rdx-core": "1.0.0-beta.3"
+    "@lexibase/rdx-ui": "1.0.0-beta.0",
+    "@lexibase/rdx-core": "1.0.0-beta.4",
+    "@lexibase/rdx-types": "1.0.0-beta.4"
   },
   "peerDependencies": {
     "next": "^15.5.0",
@@ -55,8 +60,8 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "typescript": "5.9.2",
-    "@rdx/typescript-config": "1.0.0",
-    "@rdx/eslint-config": "1.0.0"
+    "@rdx/eslint-config": "1.0.0",
+    "@rdx/typescript-config": "1.0.0"
   },
   "scripts": {
     "build": "tsup src/index.ts src/runtime/index.tsx --format esm --dts --clean --external @lexibase/rdx-core --external @lexibase/rdx-types --external next --external react --external react-dom --external next-mdx-remote",

package/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@lexibase/rdx-ui/postcss.config'

package/src/runtime/styles.css

@@ -0,0 +1,16 @@
+@import '@lexibase/rdx-ui/globals.css';
+@source '../../dist/**/*.js';
+
+/* Colors, buttons, dropdowns and typography come from the shared UI theme. */
+.rdx-skip-link {
+  position: fixed;
+  top: -100px;
+  left: 16px;
+  z-index: 100;
+  padding: 12px;
+  background: var(--background);
+  color: var(--foreground);
+}
+.rdx-skip-link:focus {
+  top: 12px;
+}

package/templates/runtime/app/globals.css

@@ -1,369 +1,4 @@
-:root {
-  --rdx-background: #ffffff;
-  --rdx-foreground: #171717;
-  --rdx-muted: #666666;
-  --rdx-border: #e7e7e7;
-  --rdx-accent: #f5f5f5;
-  --rdx-link: #0f5ed8;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
-    --rdx-background: #121212;
-    --rdx-foreground: #f4f4f5;
-    --rdx-muted: #a1a1aa;
-    --rdx-border: #303033;
-    --rdx-accent: #202022;
-    --rdx-link: #7bb0ff;
-  }
-}
-
-:root[data-theme='dark'] {
-  --rdx-background: #121212;
-  --rdx-foreground: #f4f4f5;
-  --rdx-muted: #a1a1aa;
-  --rdx-border: #303033;
-  --rdx-accent: #202022;
-  --rdx-link: #7bb0ff;
-}
-
-.rdx-source-badge {
-  color: var(--rdx-muted);
-  font-size: 0.85rem;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  min-height: 100%;
-}
-
-body {
-  background: var(--rdx-background);
-  color: var(--rdx-foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-a {
-  color: inherit;
-}
-
-.rdx-header {
-  align-items: center;
-  border-bottom: 1px solid var(--rdx-border);
-  display: flex;
-  min-height: 64px;
-  gap: 16px;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: 12px 24px;
-}
-
-.rdx-header-actions {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  font-size: 0.9rem;
-}
-
-.rdx-header-actions a {
-  text-decoration: none;
-}
-.rdx-header-actions a:hover {
-  color: var(--rdx-link);
-}
-.rdx-brand {
-  overflow-wrap: anywhere;
-}
-
-:where(a, summary):focus-visible {
-  outline: 2px solid var(--rdx-link);
-  outline-offset: 4px;
-  border-radius: 4px;
-}
-
-.rdx-skip-link {
-  position: fixed;
-  top: -100px;
-  left: 16px;
-  z-index: 20;
-  padding: 12px;
-  background: var(--rdx-background);
-}
-.rdx-skip-link:focus {
-  top: 12px;
-}
-
-.rdx-version-menu {
-  position: relative;
-}
-.rdx-version-menu summary {
-  cursor: pointer;
-  padding: 8px 12px;
-  border: 1px solid var(--rdx-border);
-  border-radius: 8px;
-  background: var(--rdx-accent);
-}
-.rdx-version-menu ul {
-  position: absolute;
-  right: 0;
-  z-index: 10;
-  min-width: 180px;
-  max-width: calc(100vw - 48px);
-  max-height: 320px;
-  overflow: auto;
-  list-style: none;
-  margin: 8px 0 0;
-  padding: 6px;
-  border: 1px solid var(--rdx-border);
-  border-radius: 10px;
-  background: var(--rdx-background);
-  box-shadow: 0 8px 24px #0002;
-}
-.rdx-version-menu a {
-  display: block;
-  padding: 10px;
-  border-radius: 6px;
-  overflow-wrap: anywhere;
-}
-.rdx-version-menu a:hover,
-.rdx-version-menu a[aria-current] {
-  background: var(--rdx-accent);
-}
-.rdx-sidebar-menu > summary {
-  display: list-item;
-  cursor: pointer;
-  font-weight: 600;
-  margin-bottom: 20px;
-}
-
-.rdx-homepage {
-  max-width: 1040px;
-  margin: 0 auto;
-  padding: clamp(72px, 16vh, 160px) 24px;
-  text-align: center;
-}
-.rdx-homepage-eyebrow {
-  color: var(--rdx-link);
-  font-weight: 600;
-}
-.rdx-homepage h1 {
-  font-size: clamp(2.5rem, 7vw, 5rem);
-  line-height: 1.05;
-  letter-spacing: -0.05em;
-  margin: 24px 0;
-  overflow-wrap: anywhere;
-}
-.rdx-homepage-description {
-  color: var(--rdx-muted);
-  font-size: 1.2rem;
-  line-height: 1.7;
-  max-width: 640px;
-  margin: 0 auto;
-}
-.rdx-homepage-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  justify-content: center;
-  margin-top: 32px;
-}
-.rdx-button {
-  border: 1px solid var(--rdx-border);
-  border-radius: 8px;
-  padding: 14px 20px;
-  text-decoration: none;
-  font-weight: 600;
-}
-.rdx-button-primary {
-  background: var(--rdx-foreground);
-  color: var(--rdx-background);
-}
-.rdx-button:hover {
-  outline: 2px solid var(--rdx-link);
-  outline-offset: 2px;
-}
-
-.rdx-brand {
-  font-size: 1.1rem;
-  font-weight: 700;
-  text-decoration: none;
-}
-
-.rdx-github-link {
-  color: var(--rdx-muted);
-  font-size: 0.9rem;
-  text-decoration: none;
-}
-
-.rdx-docs-layout {
-  display: grid;
-  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
-  min-height: calc(100vh - 64px);
-}
-
-.rdx-sidebar {
-  border-right: 1px solid var(--rdx-border);
-  padding: 24px;
-}
-
-.rdx-sidebar-category + .rdx-sidebar-category {
-  border-top: 1px solid var(--rdx-border);
-  margin-top: 20px;
-  padding-top: 20px;
-}
-
-.rdx-sidebar h2 {
-  color: var(--rdx-muted);
-  font-size: 0.72rem;
-  letter-spacing: 0.08em;
-  margin: 0 0 8px;
-  text-transform: uppercase;
-}
-
-.rdx-sidebar ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.rdx-sidebar a {
-  border-radius: 6px;
-  display: block;
-  font-size: 0.92rem;
-  padding: 7px 8px;
-  text-decoration: none;
-}
-
-.rdx-sidebar a:hover,
-.rdx-sidebar a.is-active {
-  background: var(--rdx-accent);
-}
-
-.rdx-sidebar a.is-active {
-  font-weight: 600;
-}
-
-.rdx-document,
-.rdx-empty-state {
-  margin: 0 auto;
-  max-width: 860px;
-  padding: 56px 40px 80px;
-  width: 100%;
-}
-
-.rdx-document-header {
-  border-bottom: 1px solid var(--rdx-border);
-  margin-bottom: 36px;
-  padding-bottom: 28px;
-}
-
-.rdx-document-header h1,
-.rdx-mdx-content h1 {
-  font-size: clamp(2rem, 5vw, 3rem);
-  letter-spacing: -0.04em;
-  line-height: 1.1;
-  margin: 0;
-}
-
-.rdx-breadcrumb {
-  color: var(--rdx-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.8rem;
-  margin: 0 0 12px;
-}
-
-.rdx-description {
-  color: var(--rdx-muted);
-  font-size: 1.05rem;
-  line-height: 1.6;
-  margin: 14px 0 0;
-}
-
-.rdx-mdx-content {
-  font-size: 1rem;
-  line-height: 1.75;
-}
-
-.rdx-mdx-content h2,
-.rdx-mdx-content h3 {
-  letter-spacing: -0.02em;
-  line-height: 1.25;
-  margin: 2.2em 0 0.7em;
-}
-
-.rdx-mdx-content p,
-.rdx-mdx-content ul,
-.rdx-mdx-content ol {
-  margin: 1em 0;
-}
-
-.rdx-mdx-content li + li {
-  margin-top: 0.4em;
-}
-
-.rdx-mdx-content a {
-  color: var(--rdx-link);
-}
-
-.rdx-mdx-content blockquote {
-  border-left: 3px solid var(--rdx-border);
-  color: var(--rdx-muted);
-  margin: 1.5em 0;
-  padding-left: 16px;
-}
-
-.rdx-mdx-content code {
-  background: var(--rdx-accent);
-  border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.9em;
-  padding: 0.16em 0.35em;
-}
-
-.rdx-mdx-content pre {
-  background: var(--rdx-accent);
-  border: 1px solid var(--rdx-border);
-  border-radius: 8px;
-  overflow-x: auto;
-  padding: 16px;
-}
-
-.rdx-mdx-content pre code {
-  background: transparent;
-  padding: 0;
-}
-
-@media (max-width: 720px) {
-  .rdx-header {
-    padding: 12px 20px;
-  }
-  .rdx-header-actions {
-    gap: 12px;
-  }
-  .rdx-sidebar-menu > summary {
-    display: list-item;
-    padding: 4px 0;
-  }
-  .rdx-sidebar-menu[open] > summary {
-    margin-bottom: 20px;
-  }
-  .rdx-docs-layout {
-    display: block;
-  }
-
-  .rdx-sidebar {
-    border-bottom: 1px solid var(--rdx-border);
-    border-right: 0;
-  }
-
-  .rdx-document,
-  .rdx-empty-state {
-    padding: 36px 24px 60px;
-  }
-}
+@import '@lexibase/rdx-next/styles.css';
+@source '../../home.{ts,tsx}';
+@source '../../components/**/*.{ts,tsx}';
+@source '../../docs/**/*.mdx';

package/templates/runtime/app/layout.tsx

@@ -18,5 +18,9 @@ export default async function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   const { config } = await getProject()
-  return <RdxLayout config={config}>{children}</RdxLayout>
+  return (
+    <RdxLayout config={config} bodyClassName="antialiased">
+      {children}
+    </RdxLayout>
+  )
 }

package/templates/runtime/next.config.mjs

@@ -6,6 +6,7 @@ const nextConfig = {
   transpilePackages: [
     '@lexibase/rdx-core',
     '@lexibase/rdx-next',
+    '@lexibase/rdx-ui',
     'next-mdx-remote',
   ],
 }

package/templates/runtime/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@lexibase/rdx-next/postcss.config'

package/templates/runtime/tsconfig.json

@@ -16,5 +16,5 @@
     "target": "esnext"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "public"]
 }