Rename package

README.md

@@ -1,32 +1,36 @@
-# Markstage
+# md-react-preview
 
-A lightweight toolkit for live-previewing React components directly from Markdown. Write `` ```tsx preview `` fenced blocks and get instant rendered output — powered by Vite.
+[![CI](https://github.com/IzumiSy/markstage/actions/workflows/ci.yml/badge.svg)](https://github.com/IzumiSy/markstage/actions/workflows/ci.yml)
+
+A lightweight toolkit for live-previewing React components directly from Markdown. Write ` ```tsx preview ` fenced blocks and get instant rendered output — powered by Vite.
+
+![screenshot](.github/assets/screenshot.png)
 
 ## Packages
 
-| Package | Description |
-|---------|-------------|
-| [`@izumisy/markstage`](packages/markstage/) | CLI & programmatic API — run a standalone preview server with `markstage dev` / `markstage build` |
-| [`@izumisy/react-preview`](packages/react-preview/) | Vite plugin & utilities — preview block parsing, iframe rendering, standalone preview page generation |
-| [`@izumisy/vitepress-plugin-react-preview`](packages/vitepress-plugin-react-preview/) | VitePress plugin — live React component previews inside a VitePress site |
+| Package                                                                               | Description                                                                                           |
+| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [`@izumisy/md-react-preview`](packages/md-react-preview/)                             | CLI & programmatic API — run a standalone preview server with `mrp dev` / `mrp build`                 |
+| [`@izumisy/vite-plugin-react-preview`](packages/vite-plugin-react-preview/)           | Vite plugin & utilities — preview block parsing, iframe rendering, standalone preview page generation |
+| [`@izumisy/vitepress-plugin-react-preview`](packages/vitepress-plugin-react-preview/) | VitePress plugin — live React component previews inside a VitePress site                              |
 
 ## Examples
 
-| Example | Description |
-|---------|-------------|
-| [`example-cli`](examples/cli/) | Standalone preview server using the `@izumisy/markstage` CLI |
+| Example                                    | Description                                                          |
+| ------------------------------------------ | -------------------------------------------------------------------- |
+| [`example-cli`](examples/cli/)             | Standalone preview server using the `@izumisy/md-react-preview` CLI  |
 | [`example-vitepress`](examples/vitepress/) | VitePress integration with `@izumisy/vitepress-plugin-react-preview` |
 
 ## Quick Start
 
 ```bash
-pnpm add -D @izumisy/markstage
+pnpm add -D @izumisy/md-react-preview
 
-npx markstage dev      # dev server (port 3040)
-npx markstage build    # static build
+npx mrp dev      # dev server (port 3040)
+npx mrp build    # static build
 ```
 
-See the [`@izumisy/markstage` README](packages/markstage/) for configuration and usage details.
+See the [`@izumisy/md-react-preview` README](packages/md-react-preview/) for configuration and usage details.
 
 ## License
 

examples/cli/README.md

@@ -1,6 +1,6 @@
 # example-cli
 
-Example project using the `@izumisy/markstage` CLI.
+Example project using the `@izumisy/md-react-preview` CLI.
 
 ## Commands
 

examples/cli/package.json

@@ -3,12 +3,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "markstage dev",
-    "build": "markstage build",
-    "preview": "markstage preview"
+    "dev": "mrp dev",
+    "build": "mrp build",
+    "preview": "mrp preview"
   },
   "dependencies": {
-    "@izumisy/markstage": "workspace:*",
+    "@izumisy/md-react-preview": "workspace:*",
     "@tailor-platform/app-shell": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:"

examples/cli/previewer.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "@izumisy/markstage";
+import { defineConfig } from "@izumisy/md-react-preview";
 
 export default defineConfig({
   title: "AppShell docs",

examples/vitepress/docs/.vitepress/config.ts

@@ -1,13 +1,13 @@
 import { defineConfig } from "vitepress";
-import { createMarkstagePlugin } from "@izumisy/vitepress-plugin-react-preview";
+import { createMrpPlugin } from "@izumisy/vitepress-plugin-react-preview";
 
-const markstage = createMarkstagePlugin({
+const mrp = createMrpPlugin({
   css: "@tailor-platform/app-shell/styles",
 });
 
 export default defineConfig({
   title: "VitePress Example",
-  description: "Example of using Markstage preview blocks in VitePress",
+  description: "Example of using md-react-preview blocks in VitePress",
 
   themeConfig: {
     sidebar: [
@@ -26,11 +26,11 @@ export default defineConfig({
 
   markdown: {
     config(md) {
-      md.use(markstage.markdownIt);
+      md.use(mrp.markdownIt);
     },
   },
 
   vite: {
-    plugins: [...markstage.vite()],
+    plugins: [...mrp.vite()],
   },
 });

examples/vitepress/docs/index.md

@@ -1,7 +1,7 @@
 ---
 layout: home
 hero:
-  name: "Markstage + VitePress"
+  name: "md-react-preview + VitePress"
   text: "React Component Preview Example"
   tagline: Live preview of React components inside VitePress using iframe isolation
   actions:

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "markstage",
+  "name": "md-react-preview",
   "private": true,
   "packageManager": "pnpm@10.24.0",
   "engines": {

packages/markstage/README.md → packages/md-react-preview/README.md

@@ -1,21 +1,21 @@
-# @izumisy/markstage
+# @izumisy/md-react-preview
 
-CLI and programmatic API for Markstage — a zero-config component previewer for React projects.
+CLI and programmatic API for md-react-preview — a zero-config component previewer for React projects.
 
 Drop Markdown files into `docs/` with `` ```tsx preview `` fenced blocks and get a Vite-powered dev server with live component previews and syntax-highlighted source code.
 
 ## Install
 
 ```bash
-pnpm add -D @izumisy/markstage
+pnpm add -D @izumisy/md-react-preview
 ```
 
 ## CLI
 
 ```bash
-npx markstage dev       # Start dev server (default port 3040)
-npx markstage build     # Build static output
-npx markstage preview   # Preview the production build locally
+npx mrp dev       # Start dev server (default port 3040)
+npx mrp build     # Build static output
+npx mrp preview   # Preview the production build locally
 ```
 
 ## Writing Previews
@@ -77,7 +77,7 @@ Options can be set as `key="value"` pairs or boolean flags in the fence meta:
 Create a `previewer.config.ts` at your project root:
 
 ```ts
-import { defineConfig } from "@izumisy/markstage";
+import { defineConfig } from "@izumisy/md-react-preview";
 
 export default defineConfig({
   title: "My Component Library",
@@ -99,7 +99,7 @@ export default defineConfig({
 ## Programmatic API
 
 ```ts
-import { startDev, runBuild, defineConfig, createPreviewerViteConfig } from "@izumisy/markstage";
+import { startDev, runBuild, defineConfig, createPreviewerViteConfig } from "@izumisy/md-react-preview";
 ```
 
 | Export | Description |

packages/markstage/app/index.html → packages/md-react-preview/app/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Markstage</title>
+    <title>md-react-preview</title>
     <style>
       *, *::before, *::after { box-sizing: border-box; margin: 0; }
       html, html.light {

packages/markstage/app/src/preview-block.tsx → packages/md-react-preview/app/src/preview-block.tsx

@@ -113,15 +113,12 @@ export function PreviewBlock({
   const initialColorScheme = useRef(colorScheme);
   useEffect(() => {
     if (colorScheme === initialColorScheme.current) return;
-    iframeRef.current?.contentWindow?.postMessage(
-      { type: "markstage-theme", theme: colorScheme },
-      "*",
-    );
+    iframeRef.current?.contentWindow?.postMessage({ type: "mrp-theme", theme: colorScheme }, "*");
   }, [colorScheme]);
 
   useEffect(() => {
     function onMessage(e: MessageEvent) {
-      if (e.data?.type === "markstage-resize" && e.data?.blockId === blockId) {
+      if (e.data?.type === "mrp-resize" && e.data?.blockId === blockId) {
         setIframeHeight(e.data.height);
       }
     }

packages/markstage/app/src/virtual-modules.d.ts → packages/md-react-preview/app/src/virtual-modules.d.ts

@@ -16,7 +16,7 @@ declare module "virtual:previewer-entries" {
 
 declare module "virtual:previewer-css" {}
 
-declare module "virtual:markstage-preview-registry" {
+declare module "virtual:mrp-preview-registry" {
   export const registry: Record<
     string,
     () => Promise<{ default: import("react").FC; css: string }>

packages/markstage/package.json → packages/md-react-preview/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@izumisy/markstage",
+  "name": "@izumisy/md-react-preview",
   "version": "1.0.0",
-  "description": "Markstage — component previewer powered by MDX",
+  "description": "md-react-preview — component previewer powered by MDX",
   "bin": {
-    "markstage": "./dist/cli.mjs"
+    "mrp": "./dist/cli.mjs"
   },
   "files": [
     "dist/**",
@@ -29,7 +29,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@izumisy/react-preview": "workspace:*",
+    "@izumisy/vite-plugin-react-preview": "workspace:*",
     "@mdx-js/react": "^3.1.0",
     "@mdx-js/rollup": "^3.1.0",
     "@shikijs/langs": "^4.0.2",

packages/markstage/src/build-preview.test.ts → packages/md-react-preview/src/build-preview.test.ts

@@ -4,7 +4,7 @@ import { rm } from "node:fs/promises";
 import fg from "fast-glob";
 import { runBuild, runPreview } from "./server";
 import { extractPreviewBlocks } from "./preview-transform";
-import { simpleHash } from "@izumisy/react-preview";
+import { simpleHash } from "@izumisy/vite-plugin-react-preview";
 import { readFile } from "node:fs/promises";
 import type { PreviewServer } from "vite";
 

packages/markstage/src/preview-transform.ts → packages/md-react-preview/src/preview-transform.ts

@@ -1,4 +1,4 @@
-import { parseMeta } from "@izumisy/react-preview";
+import { parseMeta } from "@izumisy/vite-plugin-react-preview";
 
 const PREVIEW_FENCE_RE = /```tsx preview(.*?)\n([\s\S]*?)```/g;
 

packages/markstage/src/vite-plugins/css.ts → packages/md-react-preview/src/vite-plugins/css.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from "vite";
-import { resolveCssImportPath } from "@izumisy/react-preview";
+import { resolveCssImportPath } from "@izumisy/vite-plugin-react-preview";
 
 /**
  * Virtual module `virtual:previewer-css` — imports the host project's

packages/markstage/src/vite-plugins/entries.test.ts → packages/md-react-preview/src/vite-plugins/entries.test.ts

@@ -13,7 +13,7 @@ describe("previewerEntriesPlugin", () => {
   let tmpDir: string;
 
   beforeEach(async () => {
-    tmpDir = await mkdtemp(resolve(tmpdir(), "markstage-test-"));
+    tmpDir = await mkdtemp(resolve(tmpdir(), "mrp-test-"));
   });
 
   // oxlint-disable-next-line -- cleanup