@gentleduck/docs 0.1.1 → 0.2.1

package/dist/velite/config.js

@@ -1,2 +1,2 @@
-import{t as e}from"../metadata-plugin-DA7OesoA.js";import{t}from"../rehype-mermaid-Be9A3aSw.js";import{t as n}from"../rehype-npm-command-0W5WqcQY.js";import{t as r}from"../rehype-pre-block-source-paX7yPQ4.js";import{t as i}from"../rehype-title-CB9V-h9I.js";import"./plugins/index.js";import{cleanTocItems as a}from"./utils.js";import o from"rehype-autolink-headings";import s from"rehype-pretty-code";import c from"rehype-slug";import{codeImport as l}from"remark-code-import";import u from"remark-gfm";import{createHighlighter as d}from"shiki";import{defineConfig as f,s as p}from"velite";function m({rehypePlugins:a=[],rehypePluginsBefore:l=[]}){return[...l,c,e,[s,{getHighlighter:d,onVisitHighlightedLine(e){e.properties||={},e.properties.className||(e.properties.className=[]),e.properties.className.push(`line--highlighted`)},onVisitHighlightedWord(e){e.properties.className=[`word--highlighted`]},onVisitLine(e){e.children?.length===0&&(e.children=[{type:`text`,value:` `}])},theme:{dark:`catppuccin-mocha`,light:`github-light`}}],i,r,t,n,[o,{properties:{ariaLabel:`Link to section`,className:[`subheading-anchor`]}}],...a]}function h({remarkPlugins:e=[],remarkPluginsBefore:t=[]}){return[...t,u,l,...e]}function g({docsPattern:e=`docs/**/*.mdx`,rehypePlugins:t=[],rehypePluginsBefore:n=[],remarkPlugins:r=[],remarkPluginsBefore:i=[]}={}){return f({collections:{docs:{name:`Docs`,pattern:e,schema:p.object({body:p.mdx(),component:p.boolean().default(!1),content:p.markdown(),description:p.string(),excerpt:p.excerpt(),links:p.object({api:p.string().optional(),doc:p.string().optional()}).optional(),metadata:p.metadata(),title:p.string().max(99),toc:p.toc()}).transform((e,{path:t,meta:n})=>{let r=n;return{...e,contentType:r.path.split(`.`).pop(),flattenedPath:r.path.split(`/`).slice(-2,-1).join(`/`).replace(/\.mdx$/,``),permalink:r.path.replace(/^.*docs\//,``).replace(/\.mdx$/,``),slug:r.path.split(`docs/`).pop()?.replace(/\.mdx$/,``).replace(/^\/+/,``)?`docs/${r.path.split(`docs/`).pop()?.replace(/\.mdx$/,``).replace(/^\/+/,``)}`:`docs`,sourceFileDir:r.path.split(`/`).slice(-3,-1).join(`/`),sourceFileName:r.path.split(`/`).pop(),sourceFilePath:t,toc:a(e.toc)}})}},mdx:{rehypePlugins:m({rehypePlugins:t,rehypePluginsBefore:n}),remarkPlugins:h({remarkPlugins:r,remarkPluginsBefore:i})}})}const _=g();export{g as createDocsVeliteConfig,_ as docsVeliteConfig};
+import{t as e}from"../metadata-plugin-XzUCOTJ4.js";import{t}from"../rehype-mermaid-CQ75hp2Q.js";import{t as n}from"../rehype-npm-command-D_fYpcFr.js";import{t as r}from"../rehype-pre-block-source-Cdsik072.js";import{t as i}from"../rehype-title-D5VN1law.js";import"./plugins/index.js";import{cleanTocItems as a}from"./utils.js";import{getHighlighter as o}from"@shikijs/compat";import s from"rehype-autolink-headings";import c from"rehype-pretty-code";import l from"rehype-slug";import{codeImport as u}from"remark-code-import";import d from"remark-gfm";import{defineConfig as f,s as p}from"velite";function m({rehypePlugins:a=[],rehypePluginsBefore:u=[]}){return[...u,l,e,[c,{getHighlighter:o,onVisitHighlightedLine(e){e.properties.className.push(`line--highlighted`)},onVisitHighlightedWord(e){e.properties.className=[`word--highlighted`]},onVisitLine(e){e.children?.length===0&&(e.children=[{type:`text`,value:` `}])},theme:{dark:`catppuccin-mocha`,light:`github-light`}}],i,r,t,n,[s,{properties:{ariaLabel:`Link to section`,className:[`subheading-anchor`]}}],...a]}function h({remarkPlugins:e=[],remarkPluginsBefore:t=[]}){return[...t,d,u,...e]}function g({docsPattern:e=`docs/**/*.mdx`,rehypePlugins:t=[],rehypePluginsBefore:n=[],remarkPlugins:r=[],remarkPluginsBefore:i=[]}={}){return f({collections:{docs:{name:`Docs`,pattern:e,schema:p.object({body:p.mdx(),component:p.boolean().default(!1),content:p.markdown(),description:p.string(),excerpt:p.excerpt(),links:p.object({api:p.string().optional(),doc:p.string().optional()}).optional(),metadata:p.metadata(),title:p.string().max(99),toc:p.toc()}).transform((e,{path:t,meta:n})=>{let r=n;return{...e,contentType:r.path.split(`.`).pop(),flattenedPath:r.path.split(`/`).slice(-2,-1).join(`/`).replace(/\.mdx$/,``),permalink:r.path.replace(/^.*docs\//,``).replace(/\.mdx$/,``),slug:r.path.split(`docs/`).pop()?.replace(/\.mdx$/,``).replace(/^\/+/,``)?`docs/${r.path.split(`docs/`).pop()?.replace(/\.mdx$/,``).replace(/^\/+/,``)}`:`docs`,sourceFileDir:r.path.split(`/`).slice(-3,-1).join(`/`),sourceFileName:r.path.split(`/`).pop(),sourceFilePath:t,toc:a(e.toc)}})}},mdx:{rehypePlugins:m({rehypePlugins:t,rehypePluginsBefore:n}),remarkPlugins:h({remarkPlugins:r,remarkPluginsBefore:i})}})}const _=g();export{g as createDocsVeliteConfig,_ as docsVeliteConfig};
 //# sourceMappingURL=config.js.map

package/dist/velite/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":[],"sources":["../../src/velite/config.ts"],"sourcesContent":["import type { UnistNode } from '@duck-docs/types'\nimport rehypeAutolinkHeadings from 'rehype-autolink-headings'\n// @ts-ignore\nimport rehypePrettyCode from 'rehype-pretty-code'\nimport rehypeSlug from 'rehype-slug'\nimport { codeImport } from 'remark-code-import'\nimport remarkGfm from 'remark-gfm'\nimport { createHighlighter as getHighlighter } from 'shiki'\nimport type { Pluggable } from 'unified'\nimport { defineConfig, s, type ZodMeta } from 'velite'\nimport { rehypeMermaid, rehypeMetadataPlugin, rehypeNpmCommand, rehypePreBlockSource, rehypeTitle } from './plugins'\nimport { cleanTocItems } from './utils'\n\nexport type DocsVeliteConfigOptions = {\n  docsPattern?: string\n  rehypePlugins?: Pluggable[]\n  rehypePluginsBefore?: Pluggable[]\n  remarkPlugins?: Pluggable[]\n  remarkPluginsBefore?: Pluggable[]\n}\n\nfunction buildDefaultRehypePlugins({\n  rehypePlugins = [],\n  rehypePluginsBefore = [],\n}: Pick<DocsVeliteConfigOptions, 'rehypePlugins' | 'rehypePluginsBefore'>): Pluggable[] {\n  return [\n    ...rehypePluginsBefore,\n    // 1) Structural transforms.\n    // @ts-ignore\n    rehypeSlug,\n    rehypeMetadataPlugin,\n    // 2) Syntax highlighting.\n    [\n      rehypePrettyCode,\n      {\n        getHighlighter,\n        onVisitHighlightedLine(node: UnistNode) {\n          // @ts-ignore\n          if (!node.properties) node.properties = {}\n          // @ts-ignore\n          if (!node.properties.className) node.properties.className = []\n          // @ts-ignore\n          node.properties.className.push('line--highlighted')\n        },\n        onVisitHighlightedWord(node: UnistNode) {\n          // @ts-ignore\n          node.properties.className = ['word--highlighted']\n        },\n        onVisitLine(node: UnistNode) {\n          if (node.children?.length === 0) {\n            node.children = [{ type: 'text', value: ' ' }]\n          }\n        },\n        theme: {\n          dark: 'catppuccin-mocha',\n          light: 'github-light',\n        },\n      },\n    ],\n    // 3) Post-highlight enrichments and specialized transforms.\n    rehypeTitle,\n    rehypePreBlockSource,\n    rehypeMermaid,\n    rehypeNpmCommand,\n    // 4) Heading links for docs navigation.\n    // @ts-ignore\n    [rehypeAutolinkHeadings, { properties: { ariaLabel: 'Link to section', className: ['subheading-anchor'] } }],\n    ...rehypePlugins,\n  ]\n}\n\nfunction buildDefaultRemarkPlugins({\n  remarkPlugins = [],\n  remarkPluginsBefore = [],\n}: Pick<DocsVeliteConfigOptions, 'remarkPlugins' | 'remarkPluginsBefore'>): Pluggable[] {\n  return [...remarkPluginsBefore, remarkGfm, codeImport, ...remarkPlugins]\n}\n\nexport function createDocsVeliteConfig({\n  docsPattern = 'docs/**/*.mdx',\n  rehypePlugins = [],\n  rehypePluginsBefore = [],\n  remarkPlugins = [],\n  remarkPluginsBefore = [],\n}: DocsVeliteConfigOptions = {}) {\n  return defineConfig({\n    collections: {\n      docs: {\n        name: 'Docs',\n        pattern: docsPattern,\n        schema: s\n          .object({\n            body: s.mdx(),\n            component: s.boolean().default(false),\n            content: s.markdown(),\n            description: s.string(),\n            excerpt: s.excerpt(),\n            links: s.object({ api: s.string().optional(), doc: s.string().optional() }).optional(),\n            metadata: s.metadata(),\n            title: s.string().max(99),\n            toc: s.toc(),\n          })\n          .transform((data, { path, meta }) => {\n            const _meta = meta as ZodMeta & { path: string }\n            return {\n              ...data,\n              contentType: _meta.path.split('.').pop(),\n              flattenedPath: _meta.path\n                .split('/')\n                .slice(-2, -1)\n                .join('/')\n                .replace(/\\.mdx$/, ''),\n              permalink: _meta.path.replace(/^.*docs\\//, '').replace(/\\.mdx$/, ''),\n              slug: _meta.path\n                .split('docs/')\n                .pop()\n                ?.replace(/\\.mdx$/, '')\n                .replace(/^\\/+/, '')\n                ? `docs/${_meta.path\n                    .split('docs/')\n                    .pop()\n                    ?.replace(/\\.mdx$/, '')\n                    .replace(/^\\/+/, '')}`\n                : 'docs',\n              sourceFileDir: _meta.path.split('/').slice(-3, -1).join('/'),\n              sourceFileName: _meta.path.split('/').pop(),\n              sourceFilePath: path,\n              toc: cleanTocItems(data.toc),\n            }\n          }),\n      },\n    },\n    mdx: {\n      rehypePlugins: buildDefaultRehypePlugins({ rehypePlugins, rehypePluginsBefore }),\n      remarkPlugins: buildDefaultRemarkPlugins({ remarkPlugins, remarkPluginsBefore }),\n    },\n  }) as any\n}\n\nexport const docsVeliteConfig = createDocsVeliteConfig()\n"],"mappings":"6kBAqBA,SAAS,EAA0B,CACjC,gBAAgB,EAAE,CAClB,sBAAsB,EAAE,EAC8D,CACtF,MAAO,CACL,GAAG,EAGH,EACA,EAEA,CACE,EACA,CACE,eAAA,EACA,uBAAuB,EAAiB,CAEtC,AAAsB,EAAK,aAAa,EAAE,CAErC,EAAK,WAAW,YAAW,EAAK,WAAW,UAAY,EAAE,EAE9D,EAAK,WAAW,UAAU,KAAK,oBAAoB,EAErD,uBAAuB,EAAiB,CAEtC,EAAK,WAAW,UAAY,CAAC,oBAAoB,EAEnD,YAAY,EAAiB,CACvB,EAAK,UAAU,SAAW,IAC5B,EAAK,SAAW,CAAC,CAAE,KAAM,OAAQ,MAAO,IAAK,CAAC,GAGlD,MAAO,CACL,KAAM,mBACN,MAAO,eACR,CACF,CACF,CAED,EACA,EACA,EACA,EAGA,CAAC,EAAwB,CAAE,WAAY,CAAE,UAAW,kBAAmB,UAAW,CAAC,oBAAoB,CAAE,CAAE,CAAC,CAC5G,GAAG,EACJ,CAGH,SAAS,EAA0B,CACjC,gBAAgB,EAAE,CAClB,sBAAsB,EAAE,EAC8D,CACtF,MAAO,CAAC,GAAG,EAAqB,EAAW,EAAY,GAAG,EAAc,CAG1E,SAAgB,EAAuB,CACrC,cAAc,gBACd,gBAAgB,EAAE,CAClB,sBAAsB,EAAE,CACxB,gBAAgB,EAAE,CAClB,sBAAsB,EAAE,EACG,EAAE,CAAE,CAC/B,OAAO,EAAa,CAClB,YAAa,CACX,KAAM,CACJ,KAAM,OACN,QAAS,EACT,OAAQ,EACL,OAAO,CACN,KAAM,EAAE,KAAK,CACb,UAAW,EAAE,SAAS,CAAC,QAAQ,GAAM,CACrC,QAAS,EAAE,UAAU,CACrB,YAAa,EAAE,QAAQ,CACvB,QAAS,EAAE,SAAS,CACpB,MAAO,EAAE,OAAO,CAAE,IAAK,EAAE,QAAQ,CAAC,UAAU,CAAE,IAAK,EAAE,QAAQ,CAAC,UAAU,CAAE,CAAC,CAAC,UAAU,CACtF,SAAU,EAAE,UAAU,CACtB,MAAO,EAAE,QAAQ,CAAC,IAAI,GAAG,CACzB,IAAK,EAAE,KAAK,CACb,CAAC,CACD,WAAW,EAAM,CAAE,OAAM,UAAW,CACnC,IAAM,EAAQ,EACd,MAAO,CACL,GAAG,EACH,YAAa,EAAM,KAAK,MAAM,IAAI,CAAC,KAAK,CACxC,cAAe,EAAM,KAClB,MAAM,IAAI,CACV,MAAM,GAAI,GAAG,CACb,KAAK,IAAI,CACT,QAAQ,SAAU,GAAG,CACxB,UAAW,EAAM,KAAK,QAAQ,YAAa,GAAG,CAAC,QAAQ,SAAU,GAAG,CACpE,KAAM,EAAM,KACT,MAAM,QAAQ,CACd,KAAK,EACJ,QAAQ,SAAU,GAAG,CACtB,QAAQ,OAAQ,GAAG,CAClB,QAAQ,EAAM,KACX,MAAM,QAAQ,CACd,KAAK,EACJ,QAAQ,SAAU,GAAG,CACtB,QAAQ,OAAQ,GAAG,GACtB,OACJ,cAAe,EAAM,KAAK,MAAM,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,KAAK,IAAI,CAC5D,eAAgB,EAAM,KAAK,MAAM,IAAI,CAAC,KAAK,CAC3C,eAAgB,EAChB,IAAK,EAAc,EAAK,IAAI,CAC7B,EACD,CACL,CACF,CACD,IAAK,CACH,cAAe,EAA0B,CAAE,gBAAe,sBAAqB,CAAC,CAChF,cAAe,EAA0B,CAAE,gBAAe,sBAAqB,CAAC,CACjF,CACF,CAAC,CAGJ,MAAa,EAAmB,GAAwB"}
+{"version":3,"file":"config.js","names":[],"sources":["../../src/velite/config.ts"],"sourcesContent":["import type { UnistNode } from '@duck-docs/types'\nimport { getHighlighter } from '@shikijs/compat'\nimport rehypeAutolinkHeadings from 'rehype-autolink-headings'\n// @ts-ignore\nimport rehypePrettyCode from 'rehype-pretty-code'\nimport rehypeSlug from 'rehype-slug'\nimport { codeImport } from 'remark-code-import'\nimport remarkGfm from 'remark-gfm'\nimport type { Pluggable } from 'unified'\nimport { defineConfig, s, type ZodMeta } from 'velite'\nimport { rehypeMermaid, rehypeMetadataPlugin, rehypeNpmCommand, rehypePreBlockSource, rehypeTitle } from './plugins'\nimport { cleanTocItems } from './utils'\n\nexport type DocsVeliteConfigOptions = {\n  docsPattern?: string\n  rehypePlugins?: Pluggable[]\n  rehypePluginsBefore?: Pluggable[]\n  remarkPlugins?: Pluggable[]\n  remarkPluginsBefore?: Pluggable[]\n}\n\nfunction buildDefaultRehypePlugins({\n  rehypePlugins = [],\n  rehypePluginsBefore = [],\n}: Pick<DocsVeliteConfigOptions, 'rehypePlugins' | 'rehypePluginsBefore'>): Pluggable[] {\n  return [\n    ...rehypePluginsBefore,\n    // 1) Structural transforms.\n    // @ts-ignore\n    rehypeSlug,\n    rehypeMetadataPlugin,\n    // 2) Syntax highlighting.\n    [\n      rehypePrettyCode,\n      {\n        getHighlighter,\n        onVisitHighlightedLine(node: UnistNode) {\n          // @ts-ignore\n          node.properties.className.push('line--highlighted')\n        },\n        onVisitHighlightedWord(node: UnistNode) {\n          // @ts-ignore\n          node.properties.className = ['word--highlighted']\n        },\n        onVisitLine(node: UnistNode) {\n          if (node.children?.length === 0) {\n            node.children = [{ type: 'text', value: ' ' }]\n          }\n        },\n        theme: {\n          dark: 'catppuccin-mocha',\n          light: 'github-light',\n        },\n      },\n    ],\n    // 3) Post-highlight enrichments and specialized transforms.\n    rehypeTitle,\n    rehypePreBlockSource,\n    rehypeMermaid,\n    rehypeNpmCommand,\n    // 4) Heading links for docs navigation.\n    // @ts-ignore\n    [rehypeAutolinkHeadings, { properties: { ariaLabel: 'Link to section', className: ['subheading-anchor'] } }],\n    ...rehypePlugins,\n  ]\n}\n\nfunction buildDefaultRemarkPlugins({\n  remarkPlugins = [],\n  remarkPluginsBefore = [],\n}: Pick<DocsVeliteConfigOptions, 'remarkPlugins' | 'remarkPluginsBefore'>): Pluggable[] {\n  return [...remarkPluginsBefore, remarkGfm, codeImport, ...remarkPlugins]\n}\n\nexport function createDocsVeliteConfig({\n  docsPattern = 'docs/**/*.mdx',\n  rehypePlugins = [],\n  rehypePluginsBefore = [],\n  remarkPlugins = [],\n  remarkPluginsBefore = [],\n}: DocsVeliteConfigOptions = {}) {\n  return defineConfig({\n    collections: {\n      docs: {\n        name: 'Docs',\n        pattern: docsPattern,\n        schema: s\n          .object({\n            body: s.mdx(),\n            component: s.boolean().default(false),\n            content: s.markdown(),\n            description: s.string(),\n            excerpt: s.excerpt(),\n            links: s.object({ api: s.string().optional(), doc: s.string().optional() }).optional(),\n            metadata: s.metadata(),\n            title: s.string().max(99),\n            toc: s.toc(),\n          })\n          .transform((data, { path, meta }) => {\n            const _meta = meta as ZodMeta & { path: string }\n            return {\n              ...data,\n              contentType: _meta.path.split('.').pop(),\n              flattenedPath: _meta.path\n                .split('/')\n                .slice(-2, -1)\n                .join('/')\n                .replace(/\\.mdx$/, ''),\n              permalink: _meta.path.replace(/^.*docs\\//, '').replace(/\\.mdx$/, ''),\n              slug: _meta.path\n                .split('docs/')\n                .pop()\n                ?.replace(/\\.mdx$/, '')\n                .replace(/^\\/+/, '')\n                ? `docs/${_meta.path\n                    .split('docs/')\n                    .pop()\n                    ?.replace(/\\.mdx$/, '')\n                    .replace(/^\\/+/, '')}`\n                : 'docs',\n              sourceFileDir: _meta.path.split('/').slice(-3, -1).join('/'),\n              sourceFileName: _meta.path.split('/').pop(),\n              sourceFilePath: path,\n              toc: cleanTocItems(data.toc),\n            }\n          }),\n      },\n    },\n    mdx: {\n      rehypePlugins: buildDefaultRehypePlugins({ rehypePlugins, rehypePluginsBefore }),\n      remarkPlugins: buildDefaultRemarkPlugins({ remarkPlugins, remarkPluginsBefore }),\n    },\n  }) as any\n}\n\nexport const docsVeliteConfig = createDocsVeliteConfig()\n"],"mappings":"olBAqBA,SAAS,EAA0B,CACjC,gBAAgB,EAAE,CAClB,sBAAsB,EAAE,EAC8D,CACtF,MAAO,CACL,GAAG,EAGH,EACA,EAEA,CACE,EACA,CACE,iBACA,uBAAuB,EAAiB,CAEtC,EAAK,WAAW,UAAU,KAAK,oBAAoB,EAErD,uBAAuB,EAAiB,CAEtC,EAAK,WAAW,UAAY,CAAC,oBAAoB,EAEnD,YAAY,EAAiB,CACvB,EAAK,UAAU,SAAW,IAC5B,EAAK,SAAW,CAAC,CAAE,KAAM,OAAQ,MAAO,IAAK,CAAC,GAGlD,MAAO,CACL,KAAM,mBACN,MAAO,eACR,CACF,CACF,CAED,EACA,EACA,EACA,EAGA,CAAC,EAAwB,CAAE,WAAY,CAAE,UAAW,kBAAmB,UAAW,CAAC,oBAAoB,CAAE,CAAE,CAAC,CAC5G,GAAG,EACJ,CAGH,SAAS,EAA0B,CACjC,gBAAgB,EAAE,CAClB,sBAAsB,EAAE,EAC8D,CACtF,MAAO,CAAC,GAAG,EAAqB,EAAW,EAAY,GAAG,EAAc,CAG1E,SAAgB,EAAuB,CACrC,cAAc,gBACd,gBAAgB,EAAE,CAClB,sBAAsB,EAAE,CACxB,gBAAgB,EAAE,CAClB,sBAAsB,EAAE,EACG,EAAE,CAAE,CAC/B,OAAO,EAAa,CAClB,YAAa,CACX,KAAM,CACJ,KAAM,OACN,QAAS,EACT,OAAQ,EACL,OAAO,CACN,KAAM,EAAE,KAAK,CACb,UAAW,EAAE,SAAS,CAAC,QAAQ,GAAM,CACrC,QAAS,EAAE,UAAU,CACrB,YAAa,EAAE,QAAQ,CACvB,QAAS,EAAE,SAAS,CACpB,MAAO,EAAE,OAAO,CAAE,IAAK,EAAE,QAAQ,CAAC,UAAU,CAAE,IAAK,EAAE,QAAQ,CAAC,UAAU,CAAE,CAAC,CAAC,UAAU,CACtF,SAAU,EAAE,UAAU,CACtB,MAAO,EAAE,QAAQ,CAAC,IAAI,GAAG,CACzB,IAAK,EAAE,KAAK,CACb,CAAC,CACD,WAAW,EAAM,CAAE,OAAM,UAAW,CACnC,IAAM,EAAQ,EACd,MAAO,CACL,GAAG,EACH,YAAa,EAAM,KAAK,MAAM,IAAI,CAAC,KAAK,CACxC,cAAe,EAAM,KAClB,MAAM,IAAI,CACV,MAAM,GAAI,GAAG,CACb,KAAK,IAAI,CACT,QAAQ,SAAU,GAAG,CACxB,UAAW,EAAM,KAAK,QAAQ,YAAa,GAAG,CAAC,QAAQ,SAAU,GAAG,CACpE,KAAM,EAAM,KACT,MAAM,QAAQ,CACd,KAAK,EACJ,QAAQ,SAAU,GAAG,CACtB,QAAQ,OAAQ,GAAG,CAClB,QAAQ,EAAM,KACX,MAAM,QAAQ,CACd,KAAK,EACJ,QAAQ,SAAU,GAAG,CACtB,QAAQ,OAAQ,GAAG,GACtB,OACJ,cAAe,EAAM,KAAK,MAAM,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,KAAK,IAAI,CAC5D,eAAgB,EAAM,KAAK,MAAM,IAAI,CAAC,KAAK,CAC3C,eAAgB,EAChB,IAAK,EAAc,EAAK,IAAI,CAC7B,EACD,CACL,CACF,CACD,IAAK,CACH,cAAe,EAA0B,CAAE,gBAAe,sBAAqB,CAAC,CAChF,cAAe,EAA0B,CAAE,gBAAe,sBAAqB,CAAC,CACjF,CACF,CAAC,CAGJ,MAAa,EAAmB,GAAwB"}

package/dist/velite/index.d.ts

@@ -1,11 +1,11 @@
-import "../unist-q3NIH9ya.js";
-import "../index-BOXZdgrl.js";
+import "../unist-C-gDxuYf.js";
+import "../index-COTJSnad.js";
 import { DocsVeliteConfigOptions, createDocsVeliteConfig, docsVeliteConfig } from "./config.js";
-import { n as rhypeMetadataPlugin, t as rehypeMetadataPlugin } from "../metadata-plugin-BL84sQM5.js";
-import { t as rehypeMermaid } from "../rehype-mermaid-DPZ6UzOu.js";
-import { t as rehypeNpmCommand } from "../rehype-npm-command-khRZrj_X.js";
-import { t as rehypePreBlockSource } from "../rehype-pre-block-source-0UyWe2hh.js";
-import { t as rehypeTitle } from "../rehype-title-CTj31zR2.js";
+import { n as rhypeMetadataPlugin, t as rehypeMetadataPlugin } from "../metadata-plugin-5TaYHWXh.js";
+import { t as rehypeMermaid } from "../rehype-mermaid-DecYf_rU.js";
+import { t as rehypeNpmCommand } from "../rehype-npm-command-Bg4YXfot.js";
+import { t as rehypePreBlockSource } from "../rehype-pre-block-source-BAdGFElv.js";
+import { t as rehypeTitle } from "../rehype-title-9j_Q2o1g.js";
 import "./plugins/index.js";
 import { cleanTocItems } from "./utils.js";
 export { type DocsVeliteConfigOptions, cleanTocItems, createDocsVeliteConfig, docsVeliteConfig, rehypeMermaid, rehypeMetadataPlugin, rehypeNpmCommand, rehypePreBlockSource, rehypeTitle, rhypeMetadataPlugin };

package/dist/velite/index.js

@@ -1 +1 @@
-import{n as e,t}from"../metadata-plugin-DA7OesoA.js";import{t as n}from"../rehype-mermaid-Be9A3aSw.js";import{t as r}from"../rehype-npm-command-0W5WqcQY.js";import{t as i}from"../rehype-pre-block-source-paX7yPQ4.js";import{t as a}from"../rehype-title-CB9V-h9I.js";import"./plugins/index.js";import{cleanTocItems as o}from"./utils.js";import{createDocsVeliteConfig as s,docsVeliteConfig as c}from"./config.js";export{o as cleanTocItems,s as createDocsVeliteConfig,c as docsVeliteConfig,n as rehypeMermaid,t as rehypeMetadataPlugin,r as rehypeNpmCommand,i as rehypePreBlockSource,a as rehypeTitle,e as rhypeMetadataPlugin};
+import{n as e,t}from"../metadata-plugin-XzUCOTJ4.js";import{t as n}from"../rehype-mermaid-CQ75hp2Q.js";import{t as r}from"../rehype-npm-command-D_fYpcFr.js";import{t as i}from"../rehype-pre-block-source-Cdsik072.js";import{t as a}from"../rehype-title-D5VN1law.js";import"./plugins/index.js";import{cleanTocItems as o}from"./utils.js";import{createDocsVeliteConfig as s,docsVeliteConfig as c}from"./config.js";export{o as cleanTocItems,s as createDocsVeliteConfig,c as docsVeliteConfig,n as rehypeMermaid,t as rehypeMetadataPlugin,r as rehypeNpmCommand,i as rehypePreBlockSource,a as rehypeTitle,e as rhypeMetadataPlugin};

package/dist/velite/plugins/hast-properties.d.ts

@@ -1,5 +1,5 @@
-import { t as UnistNode } from "../../unist-q3NIH9ya.js";
-import "../../index-BOXZdgrl.js";
+import { t as UnistNode } from "../../unist-C-gDxuYf.js";
+import "../../index-COTJSnad.js";
 
 //#region src/velite/plugins/hast-properties.d.ts
 declare function readNodeProperties<T extends object>(node: UnistNode): T;

package/dist/velite/plugins/hast-properties.js

@@ -1 +1 @@
-import{n as e,t}from"../../hast-properties-C103K0PZ.js";export{t as assignNodeProperties,e as readNodeProperties};
+import{n as e,t}from"../../hast-properties-DMieBO19.js";export{t as assignNodeProperties,e as readNodeProperties};

package/dist/velite/plugins/index.d.ts

@@ -1,8 +1,8 @@
-import "../../unist-q3NIH9ya.js";
-import "../../index-BOXZdgrl.js";
-import { n as rhypeMetadataPlugin, t as rehypeMetadataPlugin } from "../../metadata-plugin-BL84sQM5.js";
-import { t as rehypeMermaid } from "../../rehype-mermaid-DPZ6UzOu.js";
-import { t as rehypeNpmCommand } from "../../rehype-npm-command-khRZrj_X.js";
-import { t as rehypePreBlockSource } from "../../rehype-pre-block-source-0UyWe2hh.js";
-import { t as rehypeTitle } from "../../rehype-title-CTj31zR2.js";
+import "../../unist-C-gDxuYf.js";
+import "../../index-COTJSnad.js";
+import { n as rhypeMetadataPlugin, t as rehypeMetadataPlugin } from "../../metadata-plugin-5TaYHWXh.js";
+import { t as rehypeMermaid } from "../../rehype-mermaid-DecYf_rU.js";
+import { t as rehypeNpmCommand } from "../../rehype-npm-command-Bg4YXfot.js";
+import { t as rehypePreBlockSource } from "../../rehype-pre-block-source-BAdGFElv.js";
+import { t as rehypeTitle } from "../../rehype-title-9j_Q2o1g.js";
 export { rehypeMermaid, rehypeMetadataPlugin, rehypeNpmCommand, rehypePreBlockSource, rehypeTitle, rhypeMetadataPlugin };

package/dist/velite/plugins/index.js

@@ -1 +1 @@
-import{n as e,t}from"../../metadata-plugin-DA7OesoA.js";import{t as n}from"../../rehype-mermaid-Be9A3aSw.js";import{t as r}from"../../rehype-npm-command-0W5WqcQY.js";import{t as i}from"../../rehype-pre-block-source-paX7yPQ4.js";import{t as a}from"../../rehype-title-CB9V-h9I.js";export{n as rehypeMermaid,t as rehypeMetadataPlugin,r as rehypeNpmCommand,i as rehypePreBlockSource,a as rehypeTitle,e as rhypeMetadataPlugin};
+import{n as e,t}from"../../metadata-plugin-XzUCOTJ4.js";import{t as n}from"../../rehype-mermaid-CQ75hp2Q.js";import{t as r}from"../../rehype-npm-command-D_fYpcFr.js";import{t as i}from"../../rehype-pre-block-source-Cdsik072.js";import{t as a}from"../../rehype-title-D5VN1law.js";export{n as rehypeMermaid,t as rehypeMetadataPlugin,r as rehypeNpmCommand,i as rehypePreBlockSource,a as rehypeTitle,e as rhypeMetadataPlugin};

package/dist/velite/plugins/metadata-plugin.d.ts

@@ -1,4 +1,4 @@
-import "../../unist-q3NIH9ya.js";
-import "../../index-BOXZdgrl.js";
-import { n as rhypeMetadataPlugin, t as rehypeMetadataPlugin } from "../../metadata-plugin-BL84sQM5.js";
+import "../../unist-C-gDxuYf.js";
+import "../../index-COTJSnad.js";
+import { n as rhypeMetadataPlugin, t as rehypeMetadataPlugin } from "../../metadata-plugin-5TaYHWXh.js";
 export { rehypeMetadataPlugin, rhypeMetadataPlugin };

package/dist/velite/plugins/metadata-plugin.js

@@ -1 +1 @@
-import{n as e,t}from"../../metadata-plugin-DA7OesoA.js";export{t as rehypeMetadataPlugin,e as rhypeMetadataPlugin};
+import{n as e,t}from"../../metadata-plugin-XzUCOTJ4.js";export{t as rehypeMetadataPlugin,e as rhypeMetadataPlugin};

package/dist/velite/plugins/metadata-utils.js

@@ -1 +1 @@
-import{t as e}from"../../metadata-utils-C_8CcvsG.js";export{e as parseCodeFenceMeta};
+import{t as e}from"../../metadata-utils-BMtaoiZF.js";export{e as parseCodeFenceMeta};

package/dist/velite/plugins/rehype-mermaid.d.ts

@@ -1,4 +1,4 @@
-import "../../unist-q3NIH9ya.js";
-import "../../index-BOXZdgrl.js";
-import { t as rehypeMermaid } from "../../rehype-mermaid-DPZ6UzOu.js";
+import "../../unist-C-gDxuYf.js";
+import "../../index-COTJSnad.js";
+import { t as rehypeMermaid } from "../../rehype-mermaid-DecYf_rU.js";
 export { rehypeMermaid };

package/dist/velite/plugins/rehype-mermaid.js

@@ -1 +1 @@
-import{t as e}from"../../rehype-mermaid-Be9A3aSw.js";export{e as rehypeMermaid};
+import{t as e}from"../../rehype-mermaid-CQ75hp2Q.js";export{e as rehypeMermaid};

package/dist/velite/plugins/rehype-npm-command.d.ts

@@ -1,4 +1,4 @@
-import "../../unist-q3NIH9ya.js";
-import "../../index-BOXZdgrl.js";
-import { t as rehypeNpmCommand } from "../../rehype-npm-command-khRZrj_X.js";
+import "../../unist-C-gDxuYf.js";
+import "../../index-COTJSnad.js";
+import { t as rehypeNpmCommand } from "../../rehype-npm-command-Bg4YXfot.js";
 export { rehypeNpmCommand };

package/dist/velite/plugins/rehype-npm-command.js

@@ -1 +1 @@
-import{t as e}from"../../rehype-npm-command-0W5WqcQY.js";export{e as rehypeNpmCommand};
+import{t as e}from"../../rehype-npm-command-D_fYpcFr.js";export{e as rehypeNpmCommand};

package/dist/velite/plugins/rehype-pre-block-source.d.ts

@@ -1,4 +1,4 @@
-import "../../unist-q3NIH9ya.js";
-import "../../index-BOXZdgrl.js";
-import { t as rehypePreBlockSource } from "../../rehype-pre-block-source-0UyWe2hh.js";
+import "../../unist-C-gDxuYf.js";
+import "../../index-COTJSnad.js";
+import { t as rehypePreBlockSource } from "../../rehype-pre-block-source-BAdGFElv.js";
 export { rehypePreBlockSource };

package/dist/velite/plugins/rehype-pre-block-source.js

@@ -1 +1 @@
-import{t as e}from"../../rehype-pre-block-source-paX7yPQ4.js";export{e as rehypePreBlockSource};
+import{t as e}from"../../rehype-pre-block-source-Cdsik072.js";export{e as rehypePreBlockSource};

package/dist/velite/plugins/rehype-title.d.ts

@@ -1,4 +1,4 @@
-import "../../unist-q3NIH9ya.js";
-import "../../index-BOXZdgrl.js";
-import { t as rehypeTitle } from "../../rehype-title-CTj31zR2.js";
+import "../../unist-C-gDxuYf.js";
+import "../../index-COTJSnad.js";
+import { t as rehypeTitle } from "../../rehype-title-9j_Q2o1g.js";
 export { rehypeTitle };

package/dist/velite/plugins/rehype-title.js

@@ -1 +1 @@
-import{t as e}from"../../rehype-title-CB9V-h9I.js";export{e as rehypeTitle};
+import{t as e}from"../../rehype-title-D5VN1law.js";export{e as rehypeTitle};

package/dist/{visibility-hidden-CAHx9RLp-CN32k1Im.js → visibility-hidden-CAHx9RLp-DoPUpniv.js}

@@ -1,2 +1,2 @@
 import{p as e}from"./portal-BNuCvTAR-DDrsnIMA.js";import*as t from"react";import{jsx as n}from"react/jsx-runtime";const r=t.forwardRef((t,r)=>n(e.span,{"data-slot":`visually-hidden`,...t,ref:r,style:{position:`absolute`,border:0,width:1,height:1,padding:0,margin:-1,overflow:`hidden`,clip:`rect(0, 0, 0, 0)`,whiteSpace:`nowrap`,wordWrap:`normal`,...t.style}}));r.displayName=`VisuallyHidden`;const i=r;export{r as n,i as t};
-//# sourceMappingURL=visibility-hidden-CAHx9RLp-CN32k1Im.js.map
+//# sourceMappingURL=visibility-hidden-CAHx9RLp-DoPUpniv.js.map

package/dist/{visibility-hidden-CAHx9RLp-CN32k1Im.js.map → visibility-hidden-CAHx9RLp-DoPUpniv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"visibility-hidden-CAHx9RLp-CN32k1Im.js","names":["n","e","t","r"],"sources":["../../duck-primitives/dist/visibility-hidden-CAHx9RLp.js"],"sourcesContent":["import{t as e}from\"./primitive-elements-Ds9SbVBa.js\";import*as t from\"react\";import{jsx as n}from\"react/jsx-runtime\";const r=t.forwardRef((t,r)=>n(e.span,{\"data-slot\":`visually-hidden`,...t,ref:r,style:{position:`absolute`,border:0,width:1,height:1,padding:0,margin:-1,overflow:`hidden`,clip:`rect(0, 0, 0, 0)`,whiteSpace:`nowrap`,wordWrap:`normal`,...t.style}}));r.displayName=`VisuallyHidden`;const i=r;export{r as n,i as t};"],"mappings":"kHAAqH,MAAM,EAAE,EAAE,YAAY,EAAE,IAAIA,EAAEC,EAAE,KAAK,CAAC,YAAY,kBAAkB,GAAGC,EAAE,IAAIC,EAAE,MAAM,CAAC,SAAS,WAAW,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,SAAS,KAAK,mBAAmB,WAAW,SAAS,SAAS,SAAS,GAAGD,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,YAAY,iBAAiB,MAAM,EAAE"}
+{"version":3,"file":"visibility-hidden-CAHx9RLp-DoPUpniv.js","names":["n","e","t","r"],"sources":["../../duck-primitives/dist/visibility-hidden-CAHx9RLp.js"],"sourcesContent":["import{t as e}from\"./primitive-elements-Ds9SbVBa.js\";import*as t from\"react\";import{jsx as n}from\"react/jsx-runtime\";const r=t.forwardRef((t,r)=>n(e.span,{\"data-slot\":`visually-hidden`,...t,ref:r,style:{position:`absolute`,border:0,width:1,height:1,padding:0,margin:-1,overflow:`hidden`,clip:`rect(0, 0, 0, 0)`,whiteSpace:`nowrap`,wordWrap:`normal`,...t.style}}));r.displayName=`VisuallyHidden`;const i=r;export{r as n,i as t};"],"mappings":"kHAAqH,MAAM,EAAE,EAAE,YAAY,EAAE,IAAIA,EAAEC,EAAE,KAAK,CAAC,YAAY,kBAAkB,GAAGC,EAAE,IAAIC,EAAE,MAAM,CAAC,SAAS,WAAW,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,SAAS,KAAK,mBAAmB,WAAW,SAAS,SAAS,SAAS,GAAGD,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,YAAY,iBAAiB,MAAM,EAAE"}

package/package.json

@@ -4,6 +4,7 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
+    "@shikijs/compat": "1.12.1",
     "@tanstack/react-virtual": "^3.13.19",
     "@types/unist": "^3.0.3",
     "aria-hidden": "^1.2.6",
@@ -13,12 +14,11 @@
     "mdast-util-toc": "^7.1.0",
     "react-remove-scroll": "^2.7.2",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-pretty-code": "^0.14.3",
+    "rehype-pretty-code": "^0.6.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
     "remark-code-import": "^1.2.0",
     "remark-gfm": "^4.0.0",
-    "shiki": "^2.5.0",
     "tabbable": "6.2.0",
     "tw-animate-css": "^1.2.4",
     "unified": "^11.0.5",
@@ -164,5 +164,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.1.1"
+  "version": "0.2.1"
 }

package/src/components/layouts/site-header.tsx

@@ -5,9 +5,16 @@ import { ModeSwitcher } from '@duck-docs/components/mode-toggle'
 import { useSiteConfig } from '@duck-docs/context'
 import { cn } from '@gentleduck/libs/cn'
 import { buttonVariants } from '@gentleduck/registry-ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@gentleduck/registry-ui/dropdown-menu'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
-import { CaseUpper, Github, Twitter, Type } from 'lucide-react'
+import { Github, Twitter, Type } from 'lucide-react'
 import Link from 'next/link'
 import React from 'react'
 import { HeaderContainer, HeaderRoot } from './header-shell'
@@ -17,6 +24,71 @@ const CommandMenu = React.lazy(() =>
 )
 const MobileNav = React.lazy(() => import('@duck-docs/components/mobile-nav').then((m) => ({ default: m.MobileNav })))
 
+type FontPreset = 'mono-italic' | 'mono-normal' | 'sans-normal' | 'sans-italic' | 'serif-normal' | 'serif-italic'
+const FONT_PRESET_STORAGE_KEY = 'fontPresetV6'
+
+const DEFAULT_FONT_PRESET: FontPreset = 'mono-normal'
+
+const FONT_PRESET_OPTIONS: Array<{ label: string; value: FontPreset }> = [
+  { label: 'JetBrains Mono Nerd Italic', value: 'mono-italic' },
+  { label: 'JetBrains Mono Nerd Regular', value: 'mono-normal' },
+  { label: 'Inter Regular', value: 'sans-normal' },
+  { label: 'Inter Italic', value: 'sans-italic' },
+  { label: 'Inria Serif Regular', value: 'serif-normal' },
+  { label: 'Inria Serif Italic', value: 'serif-italic' },
+]
+
+const VALID_FONT_PRESETS = new Set<FontPreset>(FONT_PRESET_OPTIONS.map((option) => option.value))
+
+function isFontPreset(value: unknown): value is FontPreset {
+  return typeof value === 'string' && VALID_FONT_PRESETS.has(value as FontPreset)
+}
+
+function applyFontPreset(preset: FontPreset) {
+  const family = preset.startsWith('sans')
+    ? 'var(--font-sans-font, "Inter"), ui-sans-serif, system-ui, sans-serif'
+    : preset.startsWith('serif')
+      ? 'var(--font-serif-font, "Inria Serif"), Georgia, "Times New Roman", serif'
+      : 'var(--font-mono-font, "JetBrains Mono Nerd Font Mono"), "JetBrains Mono Nerd Font", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+  const familyVar = preset.startsWith('sans')
+    ? '--font-sans-font'
+    : preset.startsWith('serif')
+      ? '--font-serif-font'
+      : '--font-mono-font'
+  const style = preset.endsWith('italic') ? 'italic' : 'normal'
+
+  document.documentElement.setAttribute('data-font-preset', preset)
+  const warmUpFont = () => {
+    if (!document.fonts?.load) {
+      return
+    }
+    try {
+      const familyToken = getComputedStyle(document.documentElement).getPropertyValue(familyVar).trim()
+      if (!familyToken) {
+        return
+      }
+      const stylePrefix = style === 'italic' ? 'italic ' : ''
+      void document.fonts.load(`${stylePrefix}400 1em ${familyToken}`)
+      void document.fonts.load(`${stylePrefix}500 1em ${familyToken}`)
+      void document.fonts.load(`${stylePrefix}700 1em ${familyToken}`)
+    } catch {
+      // Ignore font prewarm failures and let normal rendering fallback.
+    }
+  }
+
+  document.documentElement.style.setProperty('--duck-font-family', family)
+  document.documentElement.style.setProperty('--font-sans', family)
+  document.documentElement.style.setProperty('--font-mono', family)
+  document.documentElement.style.setProperty('font-family', family, 'important')
+  document.documentElement.style.setProperty('font-style', style, 'important')
+  document.documentElement.style.setProperty('--duck-font-style', style)
+  if (document.body) {
+    document.body.style.setProperty('font-family', family, 'important')
+    document.body.style.setProperty('font-style', style, 'important')
+  }
+  warmUpFont()
+}
+
 export function SiteHeader() {
   const siteConfig = useSiteConfig()
 
@@ -144,34 +216,99 @@ function GitHubStarsButton() {
     </Link>
   )
 }
-const fontAtom = atomWithStorage('fontType', 'mono')
+const fontPresetAtom = atomWithStorage<FontPreset>(FONT_PRESET_STORAGE_KEY, DEFAULT_FONT_PRESET)
 
 export function FontStyleButton() {
-  const [fontType, setFontType] = useAtom(fontAtom)
-  const firstRender = React.useRef(true)
+  const [fontPreset, setFontPreset] = useAtom(fontPresetAtom)
 
   React.useEffect(() => {
-    if (firstRender.current) {
-      firstRender.current = false
-      return
-    }
+    try {
+      const hasNewPreset = localStorage.getItem(FONT_PRESET_STORAGE_KEY) !== null
+      if (hasNewPreset) {
+        return
+      }
 
-    const family =
-      fontType === 'sans'
-        ? 'var(--font-geist-sans, "Montserrat"), sans-serif'
-        : 'var(--font-geist-mono, "Geist Mono"), monospace'
+      const rawV5Preset = localStorage.getItem('fontPresetV5')
+      if (rawV5Preset) {
+        const v5Preset = JSON.parse(rawV5Preset)
+        const migratedPreset: FontPreset = isFontPreset(v5Preset)
+          ? (String(v5Preset).replace('-italic', '-normal') as FontPreset)
+          : DEFAULT_FONT_PRESET
+        setFontPreset(migratedPreset)
+        return
+      }
+
+      const rawV2Preset = localStorage.getItem('fontPresetV2')
+      if (rawV2Preset) {
+        const v2Preset = JSON.parse(rawV2Preset)
+        const migratedPreset: FontPreset =
+          isFontPreset(v2Preset) && v2Preset.startsWith('mono') ? v2Preset : DEFAULT_FONT_PRESET
+        setFontPreset(migratedPreset)
+        return
+      }
 
-    document.documentElement.style.setProperty('font-family', family, 'important')
-  }, [fontType])
+      const rawOldPreset = localStorage.getItem('fontPreset')
+      if (rawOldPreset) {
+        const oldPreset = JSON.parse(rawOldPreset)
+        const migratedPreset: FontPreset =
+          isFontPreset(oldPreset) && oldPreset.startsWith('mono') ? oldPreset : DEFAULT_FONT_PRESET
+        setFontPreset(migratedPreset)
+        return
+      }
+
+      const rawLegacyType = localStorage.getItem('fontType')
+      if (rawLegacyType) {
+        const legacyType = JSON.parse(rawLegacyType)
+        const migratedPreset: FontPreset = legacyType === 'mono' ? 'mono-normal' : DEFAULT_FONT_PRESET
+        setFontPreset(migratedPreset)
+      }
+    } catch {
+      // Ignore legacy migration issues and keep defaults.
+    }
+  }, [setFontPreset])
+
+  React.useEffect(() => {
+    if (!isFontPreset(fontPreset)) {
+      setFontPreset(DEFAULT_FONT_PRESET)
+      return
+    }
+    applyFontPreset(fontPreset)
+  }, [fontPreset, setFontPreset])
 
   return (
-    <button
-      aria-label={fontType === 'mono' ? 'Switch to sans-serif font' : 'Switch to monospace font'}
-      className={cn(buttonVariants({ size: 'icon', variant: 'ghost' }))}
-      onClick={() => setFontType(fontType === 'mono' ? 'sans' : 'mono')}
-      type="button">
-      {fontType === 'mono' ? <Type aria-hidden="true" /> : <CaseUpper aria-hidden="true" />}
-    </button>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          aria-label="Font and style"
+          className={cn(buttonVariants({ size: 'icon', variant: 'ghost' }), 'size-8')}
+          type="button">
+          <Type aria-hidden="true" className="size-4" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-60">
+        <DropdownMenuRadioGroup
+          onValueChange={(value) => {
+            if (!isFontPreset(value)) {
+              return
+            }
+            setFontPreset(value)
+            applyFontPreset(value)
+          }}
+          value={fontPreset}>
+          {FONT_PRESET_OPTIONS.map((option) => (
+            <DropdownMenuRadioItem
+              key={option.value}
+              onSelect={() => {
+                setFontPreset(option.value)
+                applyFontPreset(option.value)
+              }}
+              value={option.value}>
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 

package/src/styles/base.css

@@ -44,6 +44,10 @@
   --code-number: oklch(0.546 0 0);
   --selection: oklch(0.145 0 0);
   --selection-foreground: oklch(1 0 0);
+  --duck-font-family:
+    "Duck JetBrains Mono NFM", "JetBrains Mono Nerd Font Mono", "JetBrains Mono Nerd Font", "JetBrains Mono",
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --duck-font-style: normal;
 }
 
 .dark {
@@ -97,8 +101,36 @@
 @theme inline {
   --breakpoint-3xl: 1600px;
   --breakpoint-4xl: 2000px;
-  --font-sans: var(--font-geist-sans, "Montserrat"), sans-serif;
-  --font-mono: var(--font-geist-mono, "Geist Mono"), monospace;
+  --font-sans: var(
+    --duck-font-family,
+    "Duck JetBrains Mono NFM",
+    var(--font-mono-font, "JetBrains Mono Nerd Font Mono"),
+    "JetBrains Mono Nerd Font",
+    "JetBrains Mono",
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace
+  );
+  --font-mono: var(
+    --duck-font-family,
+    "Duck JetBrains Mono NFM",
+    var(--font-mono-font, "JetBrains Mono Nerd Font Mono"),
+    "JetBrains Mono Nerd Font",
+    "JetBrains Mono",
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace
+  );
   --radius: 0.5rem;
 
   --color-background: var(--background);

package/src/styles/docs.css

@@ -6,6 +6,7 @@
 
 @theme {
   --animate-shine: shine 8s ease-in-out infinite;
+  --animate-heart-pop: heart-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
 
   @keyframes shine {
     from {
@@ -16,6 +17,28 @@
       background-position: -200% 0;
     }
   }
+
+  @keyframes heart-pop {
+    0% {
+      transform: scale(1);
+    }
+
+    35% {
+      transform: scale(1.26);
+    }
+
+    62% {
+      transform: scale(0.94);
+    }
+
+    82% {
+      transform: scale(1.08);
+    }
+
+    to {
+      transform: scale(1);
+    }
+  }
 }
 
 @layer base {
@@ -30,12 +53,41 @@
     @apply scroll-smooth;
   }
 
+  html[data-font-preset^="mono"] {
+    --duck-font-family:
+      var(--font-mono-font, "JetBrains Mono Nerd Font Mono"), "JetBrains Mono Nerd Font", "JetBrains Mono",
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  html[data-font-preset^="sans"] {
+    --duck-font-family: var(--font-sans-font, "Inter"), ui-sans-serif, system-ui, sans-serif;
+  }
+
+  html[data-font-preset^="serif"] {
+    --duck-font-family: var(--font-serif-font, "Inria Serif"), Georgia, "Times New Roman", serif;
+  }
+
+  html[data-font-preset$="italic"] {
+    --duck-font-style: italic;
+  }
+
+  html[data-font-preset$="normal"] {
+    --duck-font-style: normal;
+  }
+
+  html,
+  body {
+    font-family: var(--duck-font-family, var(--font-mono)) !important;
+    font-style: var(--duck-font-style, normal) !important;
+  }
+
   .font-sans {
-    font-family: var(--font-geist-sans, "Montserrat"), sans-serif !important;
+    font-family: var(--font-sans) !important;
   }
 
   .font-mono {
-    font-family: var(--font-geist-mono, "Geist Mono"), monospace !important;
+    font-family: var(--font-mono) !important;
+    font-variant-numeric: tabular-nums;
   }
 
   ::-webkit-scrollbar {
@@ -63,6 +115,7 @@
 
   body {
     @apply bg-background text-foreground;
+    font-variant-numeric: tabular-nums;
     font-feature-settings:
       "rlig" 1,
       "calt" 1;

package/src/styles/mdx-base.css

@@ -5,8 +5,10 @@
   samp,
   pre {
     font-family: var(--font-mono);
-    font-style: normal;
+    font-style: var(--duck-font-style, normal);
     font-optical-sizing: auto;
+    font-size: var(--text-sm);
+    font-weight: 700;
   }
 
   [data-theme="light"] {

package/src/styles/mdx-code.css

@@ -47,7 +47,7 @@
     position: relative;
     margin-top: calc(var(--spacing) * 6);
     overflow: hidden;
-    font-size: var(--text-base);
+    font-size: var(--text-sm);
     color: var(--color-code-foreground);
     outline: none;
     background-color: var(--color-code);
@@ -65,7 +65,7 @@
     padding-block: calc(var(--spacing) * 2.5);
     padding-inline: calc(var(--spacing) * 4);
     font-family: var(--font-mono);
-    font-size: var(--text-base);
+    font-size: var(--text-sm);
     color: var(--color-code-foreground);
   }
 
@@ -86,7 +86,7 @@
     display: inline-block;
     width: calc(var(--spacing) * 16);
     padding-right: calc(var(--spacing) * 6);
-    font-size: var(--text-base);
+    font-size: var(--text-sm);
     color: var(--color-code-number);
     text-align: right;
     content: counter(line);