docs: wire up Fumadocs Twoslash for TypeScript examples

docs/app/global.css

@@ -1,6 +1,7 @@
 @import 'tailwindcss';
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
+@import 'fumadocs-twoslash/twoslash.css';
 
 html {
   scrollbar-gutter: stable;

docs/components/mdx.tsx

@@ -3,6 +3,7 @@ import { AutoTypeTable } from 'fumadocs-typescript/ui';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { TypeTable } from 'fumadocs-ui/components/type-table';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
+import * as Twoslash from 'fumadocs-twoslash/ui';
 import type { MDXComponents } from 'mdx/types';
 import { CodeCompare } from './code-compare';
 
@@ -18,6 +19,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     Tab,
     Tabs,
     TypeTable,
+    ...Twoslash,
     ...components,
   };
 }

docs/content/docs/configuration.mdx

@@ -11,7 +11,7 @@ discovery won't reach, like alongside your sources). Supported formats:
 `actio.config.ts`, `.mts`, `.cts`, `.js`, `.mjs`, `.cjs`, `.json` (TS/ESM are
 loaded at runtime via [jiti](https://github.com/unjs/jiti) — no build step).
 
-```ts title="actio.config.ts"
+```ts twoslash title="actio.config.ts"
 import { defineConfig } from "actio-core"; // also re-exported from "actio-cli/config"
 
 export default defineConfig({

docs/next.config.mjs

@@ -16,6 +16,9 @@ const basePath = process.env.PAGES_BASE_PATH ?? '';
 const config = {
   output: 'export',
   reactStrictMode: true,
+  // Twoslash runs the TypeScript compiler at build time; keep these heavy,
+  // Node-only deps out of the bundler (per the Fumadocs Twoslash guide).
+  serverExternalPackages: ['typescript', 'twoslash'],
   // actio-core ships as ESM built for node20; let Next transpile it for the browser.
   transpilePackages: ['actio-core'],
   trailingSlash: true,

docs/package.json

@@ -19,6 +19,7 @@
     "actio-core": "file:../packages/core",
     "fumadocs-core": "16.10.4",
     "fumadocs-mdx": "15.0.12",
+    "fumadocs-twoslash": "^3.2.0",
     "fumadocs-typescript": "^5.2.6",
     "fumadocs-ui": "16.10.4",
     "lucide-react": "^1.20.0",
@@ -28,6 +29,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tailwind-merge": "^3.6.0",
+    "twoslash": "^0.3.9",
     "yaml": "^2.9.0"
   },
   "devDependencies": {

docs/source.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
 import { metaSchema, pageSchema } from 'fumadocs-core/source/schema';
 import { rehypeCodeDefaultOptions } from 'fumadocs-core/mdx-plugins';
+import { transformerTwoslash } from 'fumadocs-twoslash';
 import { transformerActioKeywords } from './lib/shiki-actio';
 
 // You can customize Zod schemas for frontmatter and `meta.json` here
@@ -25,6 +26,7 @@ export default defineConfig({
       transformers: [
         ...(rehypeCodeDefaultOptions.transformers ?? []),
         transformerActioKeywords(),
+        transformerTwoslash(),
       ],
     },
   },