Update workspace packages to latest versions

.changeset/bright-hairs-teach.md

@@ -0,0 +1,13 @@
+---
+"@create-markdown/preview": minor
+"@create-markdown/preview-mermaid": minor
+"create-markdown": minor
+---
+
+Split Mermaid support into a dedicated `@create-markdown/preview-mermaid` addon package and add the matching `create-markdown/preview-mermaid` convenience export.
+
+Base preview rendering continues to work as before for the normal happy path, but Mermaid users now need to install the addon explicitly:
+
+`pnpm add @create-markdown/preview-mermaid mermaid`
+
+If you previously imported `mermaidPlugin` from `@create-markdown/preview`, update that import to `@create-markdown/preview-mermaid`.

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+- Split Mermaid support out of `@create-markdown/preview` into the new optional `@create-markdown/preview-mermaid` package.
+- Added `create-markdown/preview-mermaid` as a convenience re-export for Mermaid users on the bundle package.
+- Pinned the shared Vite toolchain back to `7.1.11` while newer releases are evaluated.
+
+### Migration
+- If you currently import `mermaidPlugin` from `@create-markdown/preview`, switch to `@create-markdown/preview-mermaid`.
+- Install Mermaid support explicitly with `pnpm add @create-markdown/preview-mermaid mermaid`.
+
 ### Planned
 - Frontmatter parsing support
 - Markdown validation utilities

README.md

@@ -97,7 +97,8 @@ function Editor() {
 ### HTML Preview with Plugins
 
 ```typescript
-import { renderAsync, shikiPlugin, mermaidPlugin } from '@create-markdown/preview';
+import { renderAsync, shikiPlugin } from '@create-markdown/preview';
+import { mermaidPlugin } from '@create-markdown/preview-mermaid';
 import { parse } from '@create-markdown/core';
 
 const blocks = parse(`

package.json

@@ -36,14 +36,14 @@
     "prepare": "turbo run build"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.0",
-    "@testing-library/react": "^16.0.0",
-    "jsdom": "^25.0.0",
+    "@changesets/cli": "^2.30.0",
+    "@testing-library/react": "^16.3.2",
+    "jsdom": "^29.0.1",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
-    "turbo": "^2.3.0",
-    "typescript": "^5.3.0",
-    "vite": "^7.1.11",
+    "turbo": "^2.9.4",
+    "typescript": "^6.0.2",
+    "vite": "7.1.11",
     "vitest": "^4.1.2"
   },
   "pnpm": {

packages/core/package.json

@@ -46,8 +46,8 @@
     "test:watch": "vitest"
   },
   "devDependencies": {
-    "typescript": "^5.3.0",
-    "vite": "^7.1.11",
+    "typescript": "^6.0.2",
+    "vite": "7.1.11",
     "vitest": "^4.1.2"
   },
   "publishConfig": {

packages/create-markdown/package.json

@@ -54,6 +54,16 @@
         "types": "./dist/preview.d.ts",
         "default": "./dist/preview.cjs"
       }
+    },
+    "./preview-mermaid": {
+      "import": {
+        "types": "./dist/preview-mermaid.d.ts",
+        "default": "./dist/preview-mermaid.js"
+      },
+      "require": {
+        "types": "./dist/preview-mermaid.d.ts",
+        "default": "./dist/preview-mermaid.cjs"
+      }
     }
   },
   "files": [
@@ -69,29 +79,26 @@
   },
   "dependencies": {
     "@create-markdown/core": "workspace:^",
-    "@create-markdown/react": "workspace:^",
-    "@create-markdown/preview": "workspace:^"
+    "@create-markdown/preview": "workspace:^",
+    "@create-markdown/preview-mermaid": "workspace:^",
+    "@create-markdown/react": "workspace:^"
   },
   "devDependencies": {
-    "@types/react": "^18.3.0",
-    "react": "^18.2.0",
-    "typescript": "^5.3.0",
-    "@types/react-dom": "^18.3.0"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "typescript": "^6.0.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "shiki": ">=1.0.0",
-    "mermaid": ">=10.0.0"
+    "shiki": ">=1.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
     },
     "shiki": {
       "optional": true
-    },
-    "mermaid": {
-      "optional": true
     }
   },
   "publishConfig": {

packages/create-markdown/src/preview-mermaid.ts

@@ -0,0 +1,6 @@
+/**
+ * create-markdown/preview-mermaid
+ * Mermaid diagram support for the preview package.
+ */
+
+export * from '@create-markdown/preview-mermaid';

packages/create-markdown/tsup.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
     index: 'src/index.ts',
     react: 'src/react.ts',
     preview: 'src/preview.ts',
+    'preview-mermaid': 'src/preview-mermaid.ts',
   },
   format: ['esm', 'cjs'],
   outDir: 'dist',
@@ -17,9 +18,9 @@ export default defineConfig({
     '@create-markdown/core',
     '@create-markdown/react',
     '@create-markdown/preview',
+    '@create-markdown/preview-mermaid',
     'react',
     'shiki',
-    'mermaid',
   ],
   outExtension({ format }) {
     return {

packages/docs/app/globals.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@config "../tailwind.config.ts";
+@import "tailwindcss";
 
 @layer base {
   :root {
@@ -183,7 +182,12 @@
   }
 
   .glass-card {
-    @apply glass rounded-2xl;
+    background: rgba(var(--glass-bg));
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid rgba(var(--glass-border));
+    box-shadow: var(--glass-shadow);
+    border-radius: 1rem;
   }
 
   .glass-code {
@@ -229,7 +233,7 @@
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-transparent;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -247,29 +251,47 @@
 
 /* Code block styling */
 .prose pre {
-  @apply !bg-transparent !p-0 overflow-hidden;
+  background: transparent !important;
+  padding: 0 !important;
+  overflow: hidden;
 }
 
 .prose pre code {
-  @apply !bg-transparent block p-5 overflow-x-auto text-[14px] leading-7;
+  background: transparent !important;
+  display: block;
+  padding: 1.25rem;
+  overflow-x: auto;
+  font-size: 14px;
+  line-height: 1.75rem;
 }
 
 .prose code:not(pre code) {
-  @apply px-1.5 py-0.5 rounded-md text-sm font-medium before:content-none after:content-none;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
   background: var(--muted);
 }
 
+.prose code:not(pre code)::before,
+.prose code:not(pre code)::after {
+  content: none;
+}
+
 /* Shiki code highlighting */
 .shiki {
-  @apply !bg-transparent;
+  background: transparent !important;
 }
 
 .shiki code {
-  @apply block overflow-x-auto text-[14px] leading-7;
+  display: block;
+  overflow-x: auto;
+  font-size: 14px;
+  line-height: 1.75rem;
 }
 
 .shiki code .line {
-  @apply block;
+  display: block;
 }
 
 /* Command palette - ensure mouse selection works */
@@ -299,4 +321,4 @@
   .hover-glow:hover {
     transform: none;
   }
-}
+}

packages/docs/components/header.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Github, Menu, X } from 'lucide-react';
+import { Menu, X } from 'lucide-react';
 import { useState } from 'react';
 import { ThemeToggle } from './theme-toggle';
 import { CommandMenu } from './command-menu';
@@ -64,7 +64,19 @@ export function Header() {
             rel="noopener noreferrer"
             className="hidden md:inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border/50 bg-background/50 backdrop-blur-sm hover:bg-accent/50 hover:border-accent hover:shadow-glow-sm transition-all duration-200"
           >
-            <Github className="h-4 w-4" />
+            <svg
+              className="h-4 w-4"
+              viewBox="0 0 98 96"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.48 2.93-16.227-5.468-16.227-5.468-2.184-5.705-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.195-22.262-5.42-22.262-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                fill="currentColor"
+              />
+            </svg>
             <span className="sr-only">GitHub</span>
           </a>
           <ThemeToggle />

packages/docs/content/api/preview.mdx

@@ -17,7 +17,7 @@ pnpm add @create-markdown/preview
 npm install @create-markdown/preview
 
 # Optional: Install plugins
-pnpm add shiki mermaid
+pnpm add shiki @create-markdown/preview-mermaid mermaid
 ```
 
 ## Quick Start
@@ -64,7 +64,8 @@ const html = await renderAsync(blocks, {
 ### With Mermaid Diagrams
 
 ```typescript
-import { renderAsync, mermaidPlugin } from '@create-markdown/preview';
+import { renderAsync } from '@create-markdown/preview';
+import { mermaidPlugin } from '@create-markdown/preview-mermaid';
 import { parse } from '@create-markdown/core';
 
 const blocks = parse(`
@@ -105,7 +106,8 @@ This is rendered as HTML automatically!
 With plugins:
 
 ```typescript
-import { registerPreviewElement, shikiPlugin, mermaidPlugin } from '@create-markdown/preview';
+import { registerPreviewElement, shikiPlugin } from '@create-markdown/preview';
+import { mermaidPlugin } from '@create-markdown/preview-mermaid';
 
 registerPreviewElement({
   plugins: [
@@ -134,7 +136,7 @@ Async version that initializes plugins before rendering.
 ### Plugins
 
 - `shikiPlugin(options?)` - Syntax highlighting with Shiki
-- `mermaidPlugin(options?)` - Mermaid diagram rendering
+- `mermaidPlugin(options?)` - Mermaid diagram rendering from `@create-markdown/preview-mermaid`
 
 ### Themes
 

packages/docs/content/guides/integration.mdx

@@ -56,7 +56,7 @@ pnpm add @create-markdown/core @create-markdown/preview
 npm install @create-markdown/core @create-markdown/preview
 
 # With syntax highlighting and diagrams
-pnpm add @create-markdown/core @create-markdown/preview shiki mermaid
+pnpm add @create-markdown/core @create-markdown/preview @create-markdown/preview-mermaid shiki mermaid
 ```
 
 ### Convenience Bundle
@@ -69,7 +69,7 @@ pnpm add create-markdown
 npm install create-markdown
 
 # With optional peer dependencies
-pnpm add create-markdown react shiki mermaid
+pnpm add create-markdown react @create-markdown/preview-mermaid shiki mermaid
 ```
 
 ---
@@ -685,10 +685,10 @@ Use the preview package for server-side HTML rendering with syntax highlighting:
 import { parse } from '@create-markdown/core';
 import { 
   blocksToHTML, 
-  renderAsync, 
-  shikiPlugin, 
-  mermaidPlugin 
+  renderAsync,
+  shikiPlugin
 } from '@create-markdown/preview';
+import { mermaidPlugin } from '@create-markdown/preview-mermaid';
 
 const markdown = `
 # Hello World
@@ -956,7 +956,7 @@ Some packages have optional peer dependencies:
 pnpm add shiki
 
 # If using Mermaid diagrams
-pnpm add mermaid
+pnpm add @create-markdown/preview-mermaid mermaid
 
 # If using @create-markdown/react
 pnpm add react react-dom
@@ -988,4 +988,4 @@ If you're using path aliases, ensure they're configured:
 - 📖 [API Reference - MDX](/docs/api/mdx.mdx)
 - 🐛 [Report Issues](https://github.com/BunsDev/create-markdown/issues)
 - 💬 [Discussions](https://github.com/BunsDev/create-markdown/discussions)
-- 🎮 [Playground](https://create-markdown.vercel.app)
+- 🎮 [Playground](https://create-markdown.vercel.app)

packages/docs/content/index.mdx

@@ -105,7 +105,8 @@ function Editor() {
 ### HTML Preview with Plugins
 
 ```typescript
-import { renderAsync, shikiPlugin, mermaidPlugin } from '@create-markdown/preview';
+import { renderAsync, shikiPlugin } from '@create-markdown/preview';
+import { mermaidPlugin } from '@create-markdown/preview-mermaid';
 import { parse } from '@create-markdown/core';
 
 const blocks = parse(`