docs: update mistmatched docs

Author: farnabaz

docs/app/components/landing/HeroDemo.vue

@@ -35,7 +35,7 @@ const sourceAsCode = computed(() => ['```md', props.demoMarkdown, '```'].join('\
         <div class="shiki-source h-[280px] overflow-y-auto overflow-x-hidden p-4 md:h-[400px]">
           <ComarkDocs
             class="font-mono text-sm/6"
-            :markdown="sourceAsCode"
+            :value="sourceAsCode"
             :components="{ ProsePre: 'pre' }"
           />
         </div>

docs/content/8.examples/1.frameworks/astro.md

@@ -14,10 +14,10 @@ defaultValue: src/content/posts/comark-syntax.md
 ---
 ::
 
-This example demonstrates how to use Comark with Astro content collections and React components. Blog posts are stored as `.md` files with Zod-validated frontmatter, loaded via the `glob()` loader, and rendered using `ComarkRenderer` from `comark/react` with custom components like `Alert`.
+This example demonstrates how to use Comark with Astro content collections and React components. Blog posts are stored as `.md` files with Zod-validated frontmatter, loaded via the `glob()` loader, and rendered using `MarkdownDocument` from `@comark/react` with custom components like `Alert`.
 
 ## How it works
 
 - **Content collections** — Posts are defined with `glob()` loader and a Zod schema for type-safe frontmatter (title, description, pubDate, tags).
-- **Comark parsing** — In the blog post page, `parse()` converts the raw Markdown body into a Comark AST.
-- **React rendering** — `ComarkRenderer` from `comark/react` renders the AST using React components, including custom ones like `Alert`. Thanks to Astro's React integration, these are server-rendered with zero client-side JavaScript.
+- **Comark parsing** — In the blog post page, `parseMarkdown()` converts the raw Markdown body into a Comark document.
+- **React rendering** — `MarkdownDocument` from `@comark/react` renders the AST using React components, including custom ones like `Alert`. Thanks to Astro's React integration, these are server-rendered with zero client-side JavaScript.

docs/content/8.examples/1.frameworks/nextjs.md

@@ -17,11 +17,11 @@ defaultValue: content/posts/comark-syntax.md
 ::browser{src="https://comark-nextjs.vercel.app/blog/comark-syntax"}
 ::
 
-This example demonstrates how to use Comark with Next.js App Router and React Server Components. Blog posts are stored as `.md` files with frontmatter, parsed using `parse()` from `comark`, and rendered using `ComarkRenderer` from `@comark/react` with custom components like `Alert` and `FeatureCard`.
+This example demonstrates how to use Comark with Next.js App Router and React Server Components. Blog posts are stored as `.md` files with frontmatter, parsed using `parseMarkdown()` from `comark`, and rendered using `MarkdownDocument` from `@comark/react` with custom components like `Alert` and `FeatureCard`.
 
 ## How it works
 
 - **File-based content** — Posts are plain `.md` files in `content/posts/` with YAML frontmatter for metadata (title, description, pubDate, tags).
-- **Comark parsing** — `lib/posts.ts` reads markdown files and uses `parse()` to build the AST and extract frontmatter — replacing the usual `gray-matter` + `remark` + `rehype` pipeline.
+- **Comark parsing** — `lib/posts.ts` reads markdown files and uses `parseMarkdown()` to build the AST and extract frontmatter — replacing the usual `gray-matter` + `remark` + `rehype` pipeline.
 - **Static generation** — `generateStaticParams` pre-renders all blog posts at build time via `output: 'export'`.
-- **React rendering** — `ComarkRenderer` from `@comark/react` renders the AST using React Server Components, including custom ones like `Alert` and slot-aware components like `FeatureCard`. No client-side JavaScript is shipped for content rendering.
+- **React rendering** — `MarkdownDocument` from `@comark/react` renders the AST using React Server Components, including custom ones like `Alert` and slot-aware components like `FeatureCard`. No client-side JavaScript is shipped for content rendering.

docs/content/8.examples/1.frameworks/nuxt.md

@@ -17,11 +17,11 @@ defaultValue: content/posts/comark-syntax.md
 ::Browser{src="https://comark-nuxt.vercel.app/blog/comark-syntax"}
 ::
 
-This example demonstrates how to use Comark Syntax with Nuxt UI. Comark Syntax automatically detects when Nuxt UI is installed and uses its components for rendering. Simply add both `comark/nuxt` and `@nuxt/ui` modules to your Nuxt config, and the `Comark` component will use Nuxt UI components automatically.
+This example demonstrates how to use Comark Syntax with Nuxt UI. Comark Syntax automatically detects when Nuxt UI is installed and uses its components for rendering. Simply add both `@comark/nuxt` and `@nuxt/ui` modules to your Nuxt config, and the `Markdown` component will use Nuxt UI components automatically.
 
-## What does `comark/nuxt` module do
+## What does `@comark/nuxt` module do
 
-- Registers the `<Comark>` component in Nuxt for automatic import.
+- Registers the `<Markdown>` and `<MarkdownDocument>` components in Nuxt for automatic import.
 - Registers the `~/components/prose` directory in the app and all layers as a global components directory.
   - This allows users to override prose components by creating components in this directory.
 - Detects Nuxt UI and tells Nuxt UI to register its Prose components

docs/content/8.examples/1.frameworks/sveltekit.md

@@ -1,6 +1,6 @@
 ---
 title: SvelteKit
-description: A SvelteKit example showing Comark with lazy components, ComarkAsync, and SSR.
+description: A SvelteKit example showing Comark with lazy components, MarkdownAsync, and SSR.
 navigation:
   icon: i-simple-icons-svelte
 ---
@@ -21,8 +21,8 @@ This example demonstrates how to use Comark with SvelteKit and server-side rende
 
 ## How it works
 
-- **Lazy SSR route** — `/` renders markdown with `<ComarkAsync>` and resolves custom components through an explicit dynamic import map.
-- **Stable SSR route** — `/stable` parses markdown in `+page.server.ts` and renders the AST with `<ComarkRenderer>`.
+- **Lazy SSR route** — `/` renders markdown with `<MarkdownAsync>` and resolves custom components through an explicit dynamic import map.
+- **Stable SSR route** — `/stable` parses markdown in `+page.server.ts` and renders the AST with `<MarkdownDocument>`.
 - **Scoped Markdown components** — components rendered from Comark live in `src/lib/components/comark/`, separate from normal app UI components.
 - **Component manifest** — the examples show when to return dynamic imports and when to use eager/static entries for synchronous SSR.
 

docs/content/8.examples/2.vite/angular.md

@@ -14,4 +14,4 @@ defaultValue: src/main.ts
 ---
 ::
 
-This example demonstrates the simplest way to use Comark with Angular - use the `ComarkComponent` and pass it markdown content. The component handles parsing and rendering automatically.
+This example demonstrates the simplest way to use Comark with Angular - use the `Markdown` component and pass it markdown content via the `value` prop. The component handles parsing and rendering automatically.

docs/content/8.examples/2.vite/html.md

@@ -8,11 +8,11 @@ navigation:
 ::code-tree{defaultValue="src/main.ts" expandAll}
 
 ```ts [src/main.ts]
-import { createRender } from '@comark/html'
-import highlight from 'comark/plugins/highlight'
+import { createHtmlRenderer } from '@comark/html'
+import highlight from '@comark/html/plugins/highlight'
 
-const render = createRender({
-  parse: { plugins: [highlight()] },
+const renderHtml = createHtmlRenderer({
+  plugins: [highlight()],
 })
 
 const PREVIEW_STYLES = `
@@ -29,7 +29,7 @@ const PREVIEW_STYLES = `
 `
 
 async function updatePreview(markdown: string) {
-  const html = await render(markdown)
+  const html = await renderHtml(markdown)
   const frame = document.getElementById('preview') as HTMLIFrameElement
   frame.srcdoc = `<!doctype html><html><head><style>${PREVIEW_STYLES}</style></head><body>${html}</body></html>`
 }

docs/content/8.examples/2.vite/react.md

@@ -14,4 +14,4 @@ defaultValue: src/App.tsx
 ---
 ::
 
-This example demonstrates the simplest way to use Comark with React - use the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically.
+This example demonstrates the simplest way to use Comark with React - use the `Markdown` component and pass it markdown content. The component handles parsing and rendering automatically.

docs/content/8.examples/2.vite/svelte.md

@@ -17,4 +17,4 @@ defaultValue: src/App.svelte
 ::Browser{src="https://comark-svelte.vercel.app"}
 ::
 
-This example demonstrates the simplest way to use Comark with Svelte - use the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically using Svelte 5's `$state` and `$effect` runes.
+This example demonstrates the simplest way to use Comark with Svelte - use the `Markdown` component and pass it markdown content. The component handles parsing and rendering automatically using Svelte 5's `$state` and `$effect` runes.

docs/content/8.examples/2.vite/vue.md

@@ -17,4 +17,4 @@ defaultValue: content/posts/comark-syntax.md
 ::Browser{src="https://comark-vue.vercel.app/#/blog/comark-syntax"}
 ::
 
-This example demonstrates the simplest way to use Comark with Vue - use the `h()` render function with the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically.
+This example demonstrates the simplest way to use Comark with Vue - use the `Markdown` component and pass it markdown content. The component handles parsing and rendering automatically.