@ootc/markdown 0.0.7 → 0.0.9

package/README.md

@@ -11,7 +11,9 @@ pnpm add @ootc/markdown
 ## Usage
 
 ```tsx
-import {MarkdownEditor, MarkdownPreview, CodeBlock} from '@ootc/markdown';
+import {CodeBlock} from '@ootc/markdown/code';
+import {MarkdownPreview} from '@ootc/markdown/preview';
+import {MarkdownEditor} from '@ootc/markdown/editor';
 import '@ootc/markdown/style.css';
 
 export default function Demo() {
@@ -25,13 +27,21 @@ export default function Demo() {
 }
 ```
 
-## Components
+## Entrypoints
+
+- `@ootc/markdown`: minimal surface for code rendering primitives
+- `@ootc/markdown/code`: `CodeBlock`
+- `@ootc/markdown/preview`: `MarkdownPreview`
+- `@ootc/markdown/editor`: `MarkdownEditor`
+
+`@ootc/markdown/preview` lazy-loads Mermaid only when a rendered document contains a `mermaid` code fence.
 
 ### MarkdownPreview
 
 Props:
 - `content: string`
 - `compact?: boolean`
+- `theme?: "system" | "light" | "dark"` (default: `"system"`)
 
 `compact` removes default spacing and reduces vertical rhythm for tighter layouts.
 
@@ -47,6 +57,7 @@ Props:
 - `onChange: (next: string) => void`
 - `mode?: "side-by-side" | "tabbed"`
 - `showPreview?: boolean`
+- `theme?: "system" | "light" | "dark"` (default: `"system"`)
 - `id?: string`
 - `placeholder?: string`
 - `disabled?: boolean`
@@ -59,15 +70,55 @@ Props:
 - `code: string`
 - `language: string`
 - `className?: string`
+- `theme?: "system" | "light" | "dark"` (default: `"system"`)
 
 ## Styles
 
 This package ships CSS modules. The preview also imports KaTeX styles internally.
 
+## Dark Mode
+
+The components support both light and dark themes.
+
+- Global switch: set `data-theme` on `document.documentElement`.
+- Local override: pass `theme="light"` or `theme="dark"` to a component.
+- Default behavior is `theme="system"` (follows global `data-theme`, otherwise `prefers-color-scheme`).
+
+```ts
+document.documentElement.setAttribute('data-theme', 'dark'); // or 'light'
+```
+
+Component-level override:
+
+```tsx
+<MarkdownPreview content={markdown} theme="dark" />
+<MarkdownEditor value={value} onChange={setValue} theme="light" />
+<CodeBlock code={code} language="ts" theme="dark" />
+```
+
+React example:
+
+```tsx
+import {useEffect} from 'react';
+
+function ThemeSync({theme}: {theme: 'light' | 'dark'}) {
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return null;
+}
+```
+
 ## Development
 
 ```bash
-pnpm storybook
+pnpm dev
+```
+
+```bash
+pnpm demo:build
+pnpm demo:preview
 ```
 
 ```bash