groundwork-method 0.0.1 → 0.10.0

package/src/generators/cli-app/files/src/registry.ts.template

@@ -0,0 +1,31 @@
+import type { Renderer } from './theme/render';
+import { hello } from './commands/hello';
+<% if (core) { %>import { status } from './commands/status';
+<% } %><% if (repl) { %>import { repl } from './commands/repl';
+<% } %>
+export interface Ctx {
+  r: Renderer;
+  json: boolean;
+  args: string[];
+}
+
+export type CommandGroup = 'CORE' | 'META';
+
+export interface CommandDef {
+  name: string;
+  group: CommandGroup;
+  summary: string;
+  handler: (ctx: Ctx) => Promise<number>;
+}
+
+/** The command registry — the single source of truth for dispatch and help. Add a row
+ *  here and the command is wired into both. */
+export const COMMANDS: CommandDef[] = [
+  { name: 'hello', group: 'CORE', summary: 'Print a themed greeting (supports --json)', handler: hello },
+<% if (core) { %>  { name: 'status', group: 'CORE', summary: 'Probe the workspace core (exit 0 reachable, 1 not)', handler: status },
+<% } %><% if (repl) { %>  { name: 'repl', group: 'CORE', summary: 'Start an interactive session', handler: repl },
+<% } %>];
+
+export function findCommand(name: string): CommandDef | undefined {
+  return COMMANDS.find((c) => c.name === name);
+}

package/src/generators/cli-app/files/tsconfig.json.template

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2021"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"]
+}

package/src/generators/cli-app/files/tsconfig.test.json.template

@@ -0,0 +1,11 @@
+{
+  "//": "Test build: compiles src/ (including *.test.ts) to CommonJS in dist-test/ so node --test runs it directly. The shipped bundle still comes from build.mjs.",
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "rootDir": "src",
+    "outDir": "dist-test",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  }
+}

package/src/generators/cli-app/generator.ts

@@ -0,0 +1,138 @@
+import { formatFiles, generateFiles, Tree } from '@nx/devkit';
+import * as path from 'path';
+import * as fs from 'fs';
+import { recordGeneratorProvenance } from '../shared/provenance';
+import { registerRunner } from '../shared/scaffold-helpers';
+
+export interface CliAppGeneratorSchema {
+  name: string;
+  repl?: boolean;
+  /** Wire the CLI to the workspace core (core-access seam + `status` wiring
+   *  proof). Omit for a standalone tool that fronts no services. */
+  core?: boolean;
+}
+
+const BRAND_TOKENS_PATH = '.groundwork/config/brand-tokens.json';
+
+/** The shared CLI render layer lives with the ./dev CLI source and is the single
+ *  source of truth. The product gets an owned copy so it can evolve independently. */
+const THEME_SRC = path.join(
+  __dirname,
+  '..',
+  '..',
+  '..',
+  '..',
+  'src',
+  'generators',
+  'workspace-dev-cli',
+  'cli-src',
+  'src',
+);
+
+function kebab(s: string): string {
+  return s
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+/** Project the design system's brand tokens (identity + terminal) for the product, or
+ *  a minimal Tier-1 identity derived from the name when no tokens exist. */
+function buildBrand(tree: Tree, name: string): Record<string, unknown> {
+  if (tree.exists(BRAND_TOKENS_PATH)) {
+    try {
+      const raw = JSON.parse(tree.read(BRAND_TOKENS_PATH, 'utf-8') || '{}');
+      return { identity: raw.identity, terminal: raw.terminal };
+    } catch {
+      /* malformed — fall through */
+    }
+  }
+  return {
+    identity: { appName: name, wordmark: '◢◤', primary: '#5fafff', accent: '#d7afff', voice: 'clear, modern' },
+  };
+}
+
+function copyShared(tree: Tree, fromRel: string, toRel: string): void {
+  const content = fs.readFileSync(path.join(THEME_SRC, fromRel), 'utf-8');
+  tree.write(toRel, content);
+}
+
+export default async function (tree: Tree, options: CliAppGeneratorSchema) {
+  const name = options.name;
+  const binName = kebab(name) || 'cli';
+  const repl = Boolean(options.repl);
+  const core = Boolean(options.core);
+  const projectRoot = path.join('services', binName);
+
+  const filesDir = path.join(__dirname, '..', '..', '..', '..', 'src', 'generators', 'cli-app', 'files');
+  generateFiles(tree, filesDir, projectRoot, {
+    name,
+    binName,
+    repl,
+    core,
+    tmpl: '',
+  });
+
+  // Standalone mode: the CLI is the whole product and fronts no services, so
+  // it carries no core-access seam. Core mode (--core) keeps these files —
+  // the same seam shape electron-app (src/main/core-client.ts) and
+  // flutter-app (lib/data/services/api_client.dart) ship unconditionally;
+  // here it is opt-in because a standalone CLI genuinely has no core.
+  if (!core) {
+    tree.delete(path.join(projectRoot, 'src/core/client.ts'));
+    tree.delete(path.join(projectRoot, 'src/core/client.test.ts'));
+    tree.delete(path.join(projectRoot, 'src/commands/status.ts'));
+  }
+
+  // Copy the shared render layer as owned product source.
+  copyShared(tree, 'theme/tokens.ts', path.join(projectRoot, 'src/theme/tokens.ts'));
+  copyShared(tree, 'theme/color.ts', path.join(projectRoot, 'src/theme/color.ts'));
+  copyShared(tree, 'theme/render.ts', path.join(projectRoot, 'src/theme/render.ts'));
+
+  // Project brand tokens into the product (baked into the build via import).
+  tree.write(path.join(projectRoot, 'src/brand.json'), JSON.stringify(buildBrand(tree, name), null, 2) + '\n');
+
+  // Interactive layer: reuse the same prompt utilities the ./dev wizard uses.
+  if (repl) {
+    copyShared(tree, 'util/prompt.ts', path.join(projectRoot, 'src/util/prompt.ts'));
+    tree.write(
+      path.join(projectRoot, 'src/commands/repl.ts'),
+      `import type { Ctx } from '../registry';
+import { isInteractive, textPrompt } from '../util/prompt';
+
+/** A minimal interactive session on top of the composable spine. Extend it into a
+ *  full REPL — slash commands, streaming, autocomplete — per your design system. */
+export async function repl(ctx: Ctx): Promise<number> {
+  if (!isInteractive()) {
+    ctx.r.error('repl requires an interactive terminal.');
+    return 2;
+  }
+  ctx.r.logo('interactive session');
+  ctx.r.info("Type a name to greet, or 'exit' to quit.");
+  for (;;) {
+    const line = await textPrompt(ctx.r.painter, '>');
+    if (line === 'exit' || line === 'quit') break;
+    if (line) ctx.r.success(\`Hello, \${line}!\`);
+  }
+  return 0;
+}
+`,
+    );
+  }
+
+  // A CLI is invoked ad hoc, not a long-running service — register it as a
+  // runner so `./dev status` reports it and `./dev` knows how to run it, but
+  // autostart is false so it is never launched by `./dev start`.
+  registerRunner(tree, {
+    name: binName,
+    kind: 'surface',
+    cmd: 'npm run dev',
+    cwd: projectRoot,
+    autostart: false,
+  });
+
+  await formatFiles(tree);
+
+  recordGeneratorProvenance(tree, 'cli-app', options as unknown as Record<string, unknown>);
+}

package/src/generators/cli-app/schema.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "CliApp",
+  "title": "CLI App",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The CLI product name (used for the binary, package name, and branding fallback).",
+      "x-prompt": "What is the CLI called?"
+    },
+    "repl": {
+      "type": "boolean",
+      "description": "Scaffold the interactive REPL layer on top of the composable spine.",
+      "default": false
+    },
+    "core": {
+      "type": "boolean",
+      "description": "Wire the CLI to the workspace core: scaffolds the core-access seam (src/core/client.ts, API_BASE_URL-configurable, Bearer auth seam) and a `status` wiring-proof command. Omit for a standalone tool that fronts no services.",
+      "default": false
+    }
+  },
+  "required": ["name"]
+}

package/src/generators/docs-site/files/.gitignore.ejs

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# fumadocs generated source map (regenerated by `fumadocs-mdx` / next build)
+/.source/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/src/generators/docs-site/files/app/docs/__slug__/page.tsx

@@ -0,0 +1,101 @@
+import { source } from '@/app/source';
+import { DocsPage, DocsBody, DocsDescription, DocsTitle } from 'fumadocs-ui/page';
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import type { ComponentProps, FC } from 'react';
+import { Mermaid } from '@/components/mermaid';
+
+// MDX components injected into every rendered doc. `Mermaid` resolves the
+// `<Mermaid chart="…" />` nodes the remark transform (source.config.ts) emits for fenced
+// ```mermaid blocks.
+const mdxComponents = { Mermaid };
+
+// The custom title-from-H1 schema (source.config.ts) is a transform, which stops
+// createMDXSource from threading the full page-data type through — the inferred
+// type degrades to the base PageData (title only). The other fields (description,
+// full, and the compiled-MDX runtime fields body + toc) are present at runtime;
+// this view restores their types. toc's type is borrowed from DocsPage's own prop.
+type DocData = {
+  title: string;
+  description?: string;
+  full?: boolean;
+  body: FC;
+  toc: ComponentProps<typeof DocsPage>['toc'];
+};
+
+// The pristine root docs/ tree ships without an index.md (source.config.ts reads
+// it untouched), so the `/docs` root — the empty slug — has no backing page. The
+// home route redirects here, so 404ing it would make the whole site look broken
+// on first load. Instead, render a generated overview that links into every
+// section, derived live from the page list and grouped by the first folder
+// segment under /docs (top-level docs fall under "Overview").
+function DocsIndex() {
+  const groups = new Map<string, { title: string; url: string }[]>();
+  for (const page of source.getPages()) {
+    const segments = page.url.replace(/^\/docs\/?/, '').split('/');
+    const section = segments.length > 1 ? segments[0] : 'Overview';
+    const list = groups.get(section) ?? [];
+    list.push({ title: page.data.title, url: page.url });
+    groups.set(section, list);
+  }
+
+  return (
+    <DocsPage>
+      <DocsTitle><%= navTitle %></DocsTitle>
+      <DocsDescription>Project documentation, organized by section.</DocsDescription>
+      <DocsBody>
+        {[...groups.entries()].map(([section, pages]) => (
+          <section key={section}>
+            <h2 style={{ textTransform: 'capitalize' }}>{section.replace(/-/g, ' ')}</h2>
+            <ul>
+              {pages.map((p) => (
+                <li key={p.url}>
+                  <Link href={p.url}>{p.title}</Link>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))}
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export default async function Page(props: { params: Promise<{ slug?: string[] }> }) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) {
+    // Empty slug is the `/docs` root — render the generated overview, not a 404.
+    if (!params.slug || params.slug.length === 0) return <DocsIndex />;
+    notFound();
+  }
+
+  const data = page.data as typeof page.data & DocData;
+  const MDX = data.body;
+
+  return (
+    <DocsPage toc={data.toc} full={data.full}>
+      <DocsTitle>{data.title}</DocsTitle>
+      <DocsDescription>{data.description}</DocsDescription>
+      <DocsBody>
+        <MDX components={mdxComponents} />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: { params: Promise<{ slug?: string[] }> }) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) return {};
+
+  const data = page.data as typeof page.data & DocData;
+  return {
+    title: data.title,
+    description: data.description,
+  };
+}

package/src/generators/docs-site/files/app/docs/layout.tsx

@@ -0,0 +1,14 @@
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import type { ReactNode } from 'react';
+import { source } from '@/app/source';
+
+// Sidebar order is declarative now: docs/meta.json seeds the canonical top-level
+// ordering and sinks the principles tree to the bottom (collapsed), so the old
+// imperative betsFirst() sort is gone. Order is owned by the content tree, not code.
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.pageTree} nav={{ title: '<%= navTitle %>' }}>
+      {children}
+    </DocsLayout>
+  );
+}

package/src/generators/docs-site/files/app/docs.css

@@ -0,0 +1,43 @@
+/* GENERATED by the GroundWork docs-site generator.
+ * Typography discipline for the docs prose (F2): a bounded reading measure, a
+ * comfortable line-height, and an explicit h1-h4 scale — the readability layer
+ * the stock Fumadocs starter leaves at defaults. Imported by app/layout.tsx
+ * only for branded sites; the unbranded fallback keeps the stock appearance.
+ *
+ * Scoped to the rendered doc body (`.prose`, Fumadocs' content container) so it
+ * shapes reference prose without touching the nav, sidebar, or landing chrome. */
+
+.prose {
+  /* ~68ch measure keeps long lines readable; the stock starter runs full-width. */
+  max-width: 68ch;
+  line-height: 1.6;
+}
+
+/* Full-bleed pages (`full: true` frontmatter) opt out of the measure cap. */
+.prose:where(.full) {
+  max-width: none;
+}
+
+/* Explicit type scale: a clear hierarchy from h1 to h4, with tightened
+ * line-height and tracking on headings so they read as structure, not body. */
+.prose h1 {
+  font-size: 2.25rem;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+
+.prose h2 {
+  font-size: 1.5rem;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.prose h3 {
+  font-size: 1.25rem;
+  line-height: 1.3;
+}
+
+.prose h4 {
+  font-size: 1.05rem;
+  line-height: 1.4;
+}

package/src/generators/docs-site/files/app/layout.tsx

@@ -0,0 +1,24 @@
+import { RootProvider } from 'fumadocs-ui/provider';
+import 'fumadocs-ui/style.css';
+<% if (branded) { %>import './brand.css';
+import './docs.css';
+<% } %><% if (bodyFont) { %>import { <%= bodyFont.replace(/[^A-Za-z0-9]/g, '_') %> } from 'next/font/google';
+<% } else { %>import { Inter } from 'next/font/google';
+<% } %>import type { ReactNode } from 'react';
+
+<% if (bodyFont) { %>const brandFont = <%= bodyFont.replace(/[^A-Za-z0-9]/g, '_') %>({
+  subsets: ['latin'],
+});
+<% } else { %>const inter = Inter({
+  subsets: ['latin'],
+});
+<% } %>
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={<% if (bodyFont) { %>brandFont.className<% } else { %>inter.className<% } %>} suppressHydrationWarning>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}

package/src/generators/docs-site/files/app/page.tsx

@@ -0,0 +1,135 @@
+import Link from 'next/link';
+import { source } from '@/app/source';
+
+// A generated, brand-driven landing page (F4): a hero (project name + a one-line
+// tagline) over two audience on-ramps, then section cards derived live from the
+// doc tree. Nothing here is product-specific — the project name, the on-ramp
+// targets, and the sections all come from the workspace and the docs/ folder, so
+// this renders sensibly for any project GroundWork builds. The /docs index (the
+// catch-all route's DocsIndex) remains the fallback link.
+
+const TITLE = '<%= projectName %>';
+const TAGLINE = '<%= tagline %>';
+const WORDMARK = '<%= wordmark %>';
+
+/** Human-friendly label for a top-level docs folder segment. */
+function label(slug: string): string {
+  return slug.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/** Every page url under /docs, lower-cased once for cheap existence checks. */
+function pageUrls(): Set<string> {
+  return new Set(source.getPages().map((p) => p.url.toLowerCase()));
+}
+
+/** True when any doc exists at exactly `url` or nested beneath it — lets an
+ *  on-ramp target either a leaf doc (product-brief) or a section (getting-started)
+ *  without 404ing on a fresh scaffold where the setup skills have not yet authored
+ *  the doc. */
+function hasRoute(urls: Set<string>, url: string): boolean {
+  const target = url.toLowerCase();
+  for (const u of urls) {
+    if (u === target || u.startsWith(target + '/')) return true;
+  }
+  return false;
+}
+
+/** The two audience on-ramps, in reading order — a fresh-clone developer first,
+ *  a product reader second. Only the ones whose target doc actually exists are
+ *  rendered, so the hero degrades gracefully before setup authors the docs. */
+function onramps(
+  urls: Set<string>,
+): { title: string; blurb: string; url: string }[] {
+  return [
+    {
+      title: 'New here — get it running',
+      blurb: 'Install dependencies, boot the stack, and learn the ./dev workflow.',
+      url: '/docs/getting-started',
+    },
+    {
+      title: 'Understand the product',
+      blurb: 'What the system is, who it serves, and what it does and does not do.',
+      url: '/docs/product-brief',
+    },
+  ].filter((r) => hasRoute(urls, r.url));
+}
+
+/** The top-level sections present under /docs, derived from the page list, plus
+ *  the count of pages each one carries. Top-level docs fall under "Overview". */
+function sections(): { slug: string; title: string; url: string; count: number }[] {
+  const groups = new Map<string, { count: number; firstUrl: string }>();
+  for (const page of source.getPages()) {
+    const segments = page.url.replace(/^\/docs\/?/, '').split('/').filter(Boolean);
+    const section = segments.length > 1 ? segments[0] : 'overview';
+    const g = groups.get(section);
+    if (g) g.count += 1;
+    else groups.set(section, { count: 1, firstUrl: page.url });
+  }
+  return [...groups.entries()].map(([slug, g]) => ({
+    slug,
+    title: slug === 'overview' ? 'Overview' : label(slug),
+    url: slug === 'overview' ? '/docs' : `/docs/${slug}`,
+    count: g.count,
+  }));
+}
+
+export default function HomePage() {
+  const urls = pageUrls();
+  const ramps = onramps(urls);
+  const cards = sections();
+  return (
+    <main className="flex flex-1 flex-col items-center px-4 py-16">
+      <section className="w-full max-w-3xl text-center">
+        {WORDMARK ? (
+          <div
+            aria-hidden
+            className="mb-6 text-4xl font-semibold"
+            style={{ color: 'hsl(var(--fd-primary))' }}
+          >
+            {WORDMARK}
+          </div>
+        ) : null}
+        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">{TITLE}</h1>
+        <p className="mt-4 text-lg text-fd-muted-foreground">{TAGLINE}</p>
+        <div className="mt-8 flex justify-center gap-3">
+          <Link
+            href="/docs"
+            className="rounded-lg bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-opacity hover:opacity-90"
+          >
+            Browse the docs
+          </Link>
+        </div>
+      </section>
+
+      {ramps.length ? (
+        <section className="mt-12 grid w-full max-w-4xl grid-cols-1 gap-4 sm:grid-cols-2">
+          {ramps.map((r) => (
+            <Link
+              key={r.url}
+              href={r.url}
+              className="rounded-xl border border-fd-border bg-fd-card p-6 text-left transition-colors hover:border-fd-primary hover:bg-fd-accent"
+            >
+              <div className="text-lg font-semibold text-fd-card-foreground">{r.title}</div>
+              <div className="mt-2 text-sm text-fd-muted-foreground">{r.blurb}</div>
+            </Link>
+          ))}
+        </section>
+      ) : null}
+
+      <section className="mt-10 grid w-full max-w-4xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {cards.map((c) => (
+          <Link
+            key={c.slug}
+            href={c.url}
+            className="rounded-xl border border-fd-border bg-fd-card p-5 text-left transition-colors hover:bg-fd-accent"
+          >
+            <div className="text-base font-semibold text-fd-card-foreground">{c.title}</div>
+            <div className="mt-1 text-sm text-fd-muted-foreground">
+              {c.count} {c.count === 1 ? 'page' : 'pages'}
+            </div>
+          </Link>
+        ))}
+      </section>
+    </main>
+  );
+}

package/src/generators/docs-site/files/app/source.ts

@@ -0,0 +1,8 @@
+import { docs, meta } from '@/.source';
+import { createMDXSource } from 'fumadocs-mdx';
+import { loader } from 'fumadocs-core/source';
+
+export const source = loader({
+  baseUrl: '/docs',
+  source: createMDXSource(docs, meta),
+});

package/src/generators/docs-site/files/components/mermaid.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useEffect, useId, useState } from 'react';
+
+// Client-side renderer for a single ```mermaid block. The remark transform in
+// source.config.ts rewrites each fenced mermaid block into `<Mermaid chart="…" />`, and the
+// docs page passes this component into the MDX components map. Rendering happens in the
+// browser via mermaid's own renderer — `next build` never needs a headless browser, so the
+// site stays plain-Markdown and Playwright-free. Re-renders on light/dark toggle (Fumadocs
+// flips the `dark` class on <html>).
+export function Mermaid({ chart }: { chart: string }) {
+  const [svg, setSvg] = useState('');
+  const rawId = useId();
+  const id = 'mmd-' + rawId.replace(/[^a-zA-Z0-9]/g, '');
+
+  useEffect(() => {
+    let active = true;
+
+    const render = async () => {
+      const mermaid = (await import('mermaid')).default;
+      if (!active) return;
+      const isDark = document.documentElement.classList.contains('dark');
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: isDark ? 'dark' : 'default',
+        securityLevel: 'strict',
+      });
+      try {
+        const { svg } = await mermaid.render(id, chart);
+        if (active) setSvg(svg);
+      } catch {
+        // A malformed diagram should never crash the page.
+        if (active) setSvg('');
+      }
+    };
+
+    void render();
+
+    const observer = new MutationObserver(() => void render());
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
+    return () => {
+      active = false;
+      observer.disconnect();
+    };
+  }, [chart, id]);
+
+  if (!svg) {
+    // Pre-render / pre-hydration fallback: show the source so the diagram is never blank.
+    return (
+      <pre className="mermaid-fallback">
+        <code>{chart}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <div
+      className="my-4 flex justify-center"
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

package/src/generators/docs-site/files/next.config.mjs

@@ -0,0 +1,10 @@
+import { createMDX } from 'fumadocs-mdx/next';
+
+const withMDX = createMDX();
+
+/** @type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+};
+
+export default withMDX(config);