diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 12084bf..8349eff 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -72,3 +72,19 @@ jobs:
 
       - name: Validate Expo config
         run: pnpm run example:build
+
+  build-docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@9f698171ed81b15d1823a05fc7211befd50c8ae0 # v6.0.3
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Check documentation
+        run: pnpm run docs:check
+
+      - name: Build documentation
+        run: pnpm run docs:build
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
index ded30a7..8b06430 100644
--- a/.oxfmtrc.json
+++ b/.oxfmtrc.json
@@ -1,6 +1,16 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "ignorePatterns": ["lib", "node_modules", "ios", "android", "dist", "**/*.md"],
+  "ignorePatterns": [
+    "lib",
+    "node_modules",
+    "ios",
+    "android",
+    "dist",
+    "doc_build",
+    ".rspress",
+    "**/*.md",
+    "**/*.mdx"
+  ],
   "sortImports": {
     "groups": [
       "type-import",
diff --git a/.oxlintrc.json b/.oxlintrc.json
index ff2449c..90d9ec5 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -58,5 +58,5 @@
   "globals": {
     "__DEV__": "readonly"
   },
-  "ignorePatterns": ["lib", "node_modules", "ios", "android", "dist"]
+  "ignorePatterns": ["lib", "node_modules", "ios", "android", "dist", "doc_build", ".rspress"]
 }
diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..c4e73d7
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,118 @@
+# Design
+
+## Source of truth
+
+Status: Active. Updated: 2026-10-31. Scope: the inline documentation demos only.
+Evidence: the user's supplied demo screenshot; `docs/components/MotionDemo.tsx`,
+`docs/components/motion-demo.css`, `example/src/DocsDemo.tsx`, the Rspress theme,
+and the existing English/Korean documentation. The user rejected the large navy
+panel, mint emphasis, duplicate labels, and conspicuous decorative chrome.
+
+## Brand
+
+Quiet, precise, developer-facing documentation. Keep the existing Motion Kit
+rabbit asset. Avoid gradients, promotional copy, bright status badges, pill-like
+code labels, heavy cards, and extra fonts or icon packages.
+
+## Product goals
+
+Let readers compare text motion, replay it, inspect the actual recipe, and see
+timeline progress independently of the Typewriter character count. Success means
+the animated text is the focus and all existing controls remain easy to use.
+Compare stagger directions with the displayed recipe following the selection.
+Show native line remeasurement when a paragraph switches between 220 and 320
+layout units, including a fixed halfway progress state. Library semantics,
+documentation routes, and the site home page are outside scope.
+
+## Personas and jobs
+
+React Native developers reading an API page, comparing an effect, and copying its
+source. They use desktop browsers and narrow mobile documentation layouts.
+
+## Information architecture
+
+One compact example: a single name and platform label, an animation stage, local
+playback controls, then a thin toolbar for source disclosure and closing the live
+preview. Source remains below its own example, with recipe/player selections.
+
+## Design principles
+
+- Show the demo name once; do not repeat it inside an embedded player.
+- Use document surfaces and neutral controls so motion supplies the emphasis.
+- Keep controls near the text and remove excess vertical space.
+- Preserve an explicit React Native Web versus iOS recording distinction.
+- Keep existing library behavior and source accuracy when adding comparisons.
+
+## Visual language
+
+Inherit Rspress text, surface, divider, and focus colors. Use matching neutral
+light/dark palettes in the isolated RNW player. Use the system font and existing
+code font, 24–26px medium-weight example text, 12–13px control text, 4/8px spacing,
+a single thin border, 6px corners, and no shadow or gradient. Ordinary stages are
+about 240px high; control/progress examples have room for their extra readouts.
+Do not apply the design-search suggestions for oversized display typography,
+large whitespace, page transitions, or new font downloads.
+
+## Components
+
+`MotionDemo` owns framing, platform information, theme synchronization, source
+viewing, and preview lifecycle. `DocsDemo` owns the actual library rendering,
+playback actions, and progress/count diagnostics. Reuse Rspress syntax highlighting
+and copy controls. Keep palette values local to the preview implementation.
+For stagger, `MotionDemo` owns a four-button direction group above the preview;
+the selected recipe is shared by the iframe query and generated source. Selecting
+a direction starts that recipe from the beginning. Native width reflow stays an
+iOS recording with real Narrow/Wide and progress controls visible in the capture.
+
+## Accessibility
+
+Maintain keyboard-operable buttons, visible focus, descriptive source disclosure,
+and contrast in both themes. Preserve reduced-motion behavior and the library's
+accessible full-text label. Use at least 44px control hit areas where practical;
+selected progress is indicated by both an outline and accessible state. No new
+autoplay loops, decorative animation, or per-frame screen-reader announcements.
+
+## Responsive behavior
+
+At 375px, wrap control groups without horizontal page scrolling or clipped
+readouts. Keep all Typewriter progress/count information visible. Wide layouts
+stay within the document column rather than becoming a dashboard or hero section.
+Check a narrow phone viewport and landscape, plus a desktop viewport.
+
+## Interaction states
+
+The initial state offers a neutral Run example button. Loading and source loading
+remain legible. Replay/reset/stop/progress keep their existing meaning. Closing a
+live preview unmounts it. Toggling source does not remount the animation. Theme
+updates reach the iframe without resetting playback. Native recordings use English
+sample text and matching light/dark captures with native video controls. Switching
+appearance selects the corresponding recording.
+Stagger selection is available before running the example and while viewing code.
+Source disclosure and source tabs preserve the selection. Each embedded demo owns
+its own direction state. Theme changes preserve that choice.
+Before playback, show its poster and a neutral Play recording button; expose
+native video controls after the user starts it.
+
+## Content voice
+
+Short functional English/Korean labels: Run example, Replay, Code, Close preview,
+Timeline progress, Visible characters. Platform metadata is muted sentence case,
+not a colored LIVE badge. Avoid repeated implementation explanations in toolbars.
+
+## Implementation constraints
+
+Use the current Rspress, Expo, React Native Web, and Reanimated setup. Add no
+dependencies and change no `packages/text-motion/src` files. Keep source extraction
+and the genuine iOS recording intact. Theme messages contain appearance data only
+and the embedded app accepts messages only from its parent.
+
+Implementation plan: retain the supplied screenshot as the visual baseline;
+update the wrapper and player presentation independently; then run source checks,
+typechecking, lint/format, and a production docs build. Verify replay/source/close,
+Typewriter 0 → 25 → 50 → 0 (0/10 → 9/10 → 10/10 → 0/10), continuous playback,
+English/Korean labels, light/dark appearance, and narrow-layout screenshots.
+
+## Open questions
+
+None blocking. Native recordings are identified as captures; this change does not
+promise browser/native rendering equivalence.
diff --git a/README.ko.md b/README.ko.md
index e550ee1..d0ae5f2 100644
--- a/README.ko.md
+++ b/README.ko.md
@@ -1,5 +1,7 @@
 # @react-native-motion-kit/text-motion
 
+한영 Rspress 문서: [개발 및 빌드 안내](./docs/README.md). `pnpm docs:dev`로 로컬 문서를 실행할 수 있습니다.
+
 React Native에서 고성능 split text animation을 만들기 위한 라이브러리입니다. Reanimated 기반으로 동작하고, 확장 가능한 renderer boundary를 염두에 두고 있습니다.
 
 English documentation: [README.md](./README.md)
diff --git a/README.md b/README.md
index 8319169..32f7da6 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@ Korean documentation: [README.ko.md](./README.ko.md)
 
 Package documentation: [packages/text-motion/README.md](./packages/text-motion/README.md)
 
+Bilingual Rspress documentation: [development and build instructions](./docs/README.md). Run `pnpm docs:dev` to browse locally.
+
 This repository is a pnpm workspace for the `@react-native-motion-kit/text-motion` package and Expo example app.
 
 ## Package
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..02875e3
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,7 @@
+node_modules/
+doc_build/
+.rspress/
+.cache/
+docs/public/demos/
+*.local
+*.log
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..6618356
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,63 @@
+# React Native Text Motion documentation
+
+This pnpm workspace uses Rspress 2, following the structure of the Gesture Image
+Viewer documentation. It documents the current public `0.1.0` API in English and
+Korean, with one set of routes and no historical version selector.
+
+## Develop
+
+Run commands from the repository root:
+
+```sh
+pnpm install
+pnpm docs:dev
+```
+
+English is served at `/`; Korean is served at `/ko/`. Use the language menu to
+switch to the corresponding page. The home page extends the default theme with
+package-manager installation tabs.
+
+## Verify and build
+
+```sh
+pnpm docs:check
+pnpm docs:typecheck
+pnpm docs:build
+pnpm docs:preview
+```
+
+The static build is written to `docs/doc_build/`. A static host such as Cloudflare
+Pages can use `pnpm docs:build` as its build command and `docs/doc_build` as its
+output directory, with the repository root as the working directory. Deployment
+and a production domain must be configured separately.
+
+## Maintain
+
+- Keep matching pages under `docs/en/` and `docs/ko/` in sync. `docs:check` checks
+  page parity, local links, and navigation metadata.
+- Edit `_nav.json` for top navigation and `_meta.json` for sidebar ordering.
+- Keep code samples aligned with the public exports and the Expo example app.
+- Use `docs/public/` for shared static files and `theme/` for theme extensions.
+- Rspress generates `llms.txt` and full documentation text for AI tools.
+- Link to official setup instructions for Reanimated and Worklets; the package's
+  peer minimums are not a complete native dependency compatibility matrix.
+- Inline demos run the actual library using an isolated React Native Web bundle.
+  Press Run example to load one, use its replay/controls, and close it to unload.
+  Reduced-motion preferences remain respected. Browser playback illustrates the
+  API; it is not native performance evidence.
+- Open **View code** below an example to inspect and copy that demo's
+  recipe, including its shared defaults and text. The second view contains the
+  complete shared player source for playback handlers and styles. These views
+  are extracted from the same Expo source files during development, checks,
+  typechecking, and production builds, rather than maintained as separate samples.
+- The preview follows the document's light/dark appearance without restarting
+  playback. The wrapper and embedded app share appearance data only. See the
+  repository's `DESIGN.md` for the documentation demo's visual constraints.
+- `pnpm docs:dev` and `pnpm docs:build` first export the demo app from `example/`
+  into ignored `docs/public/demos/`. After changing preview recipes during a dev
+  session, run `pnpm -C docs demos:build` again and reopen the preview.
+- The native `overlayText()` / `lineReveal()` demo uses an iOS simulator recording
+  in `docs/public/media/`, because React Native Web does not provide the native
+  `onTextLayout` event required for rendered-line measurement.
+- Native recordings use English text with matching light/dark palettes. The
+  video and poster follow the document theme, just like the live preview shell.
diff --git a/docs/components/MotionDemo.tsx b/docs/components/MotionDemo.tsx
new file mode 100644
index 0000000..60bf81c
--- /dev/null
+++ b/docs/components/MotionDemo.tsx
@@ -0,0 +1,294 @@
+// oxlint-disable-next-line import/no-unassigned-import -- Styles shared by the documentation preview cards.
+import './motion-demo.css';
+import { useDark, useLang, withBase } from '@rspress/core/runtime';
+import { lazy, Suspense, useEffect, useId, useRef, useState } from 'react';
+
+import demoSources from '../.cache/demo-sources.json';
+import demos from '../demos.json';
+
+type DemoId = keyof typeof demos;
+type SourceTab = 'recipe' | 'player';
+
+const RuntimeCode = lazy(async () => ({
+  default: (await import('@rspress/core/theme-original')).CodeBlockRuntime,
+}));
+
+function NativeDemoVideo({
+  id,
+  theme,
+  lang,
+}: {
+  id: 'line-reveal' | 'width-reflow';
+  theme: 'dark' | 'light';
+  lang: 'en' | 'ko';
+}) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [mounted, setMounted] = useState(false);
+  const [started, setStarted] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const mediaPath = `/media/${id}${theme === 'light' ? '-light' : ''}`;
+
+  // Match the SSG placeholder during hydration, then select the browser theme.
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return <div className="motion-demo__video" aria-hidden="true" />;
+
+  return (
+    <div className="motion-demo__video-wrap">
+      <video
+        ref={videoRef}
+        className="motion-demo__video"
+        controls={started}
+        playsInline
+        preload="metadata"
+        poster={withBase(`${mediaPath}.jpg`)}
+        onError={() => {
+          setStarted(false);
+          setFailed(true);
+        }}
+        aria-label={
+          id === 'width-reflow'
+            ? lang === 'ko'
+              ? '실제 iOS 폭 변경과 줄 재측정 녹화'
+              : 'Width changes and native line remeasurement recorded on iOS'
+            : lang === 'ko'
+              ? '실제 iOS 줄 단위 텍스트 애니메이션 녹화'
+              : 'Rendered-line animation recorded on iOS'
+        }
+      >
+        <source src={withBase(`${mediaPath}.mp4`)} type="video/mp4" />
+        <track
+          kind="captions"
+          src={withBase(`/media/${id}.${lang}.vtt`)}
+          srcLang={lang}
+          label={lang === 'ko' ? '한국어' : 'English'}
+        />
+      </video>
+      {!started ? (
+        <img
+          className="motion-demo__video-poster"
+          src={withBase(`${mediaPath}.jpg`)}
+          alt=""
+          aria-hidden="true"
+        />
+      ) : null}
+      {!started ? (
+        <button
+          className="motion-demo__video-start"
+          type="button"
+          onClick={async () => {
+            setFailed(false);
+            setStarted(true);
+            try {
+              if (videoRef.current?.error) videoRef.current.load();
+              await videoRef.current?.play();
+            } catch {
+              setStarted(false);
+              setFailed(true);
+            }
+          }}
+        >
+          <svg aria-hidden="true" width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M5 3.5v9L12 8 5 3.5Z" />
+          </svg>
+          {lang === 'ko' ? '영상 재생' : 'Play recording'}
+        </button>
+      ) : null}
+      {failed ? (
+        <p className="motion-demo__video-error" role="alert">
+          {lang === 'ko'
+            ? '영상을 재생하지 못했습니다. 다시 시도해 주세요.'
+            : 'The recording could not play. Please try again.'}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function MotionDemo({ id }: { id: DemoId }) {
+  const lang = useLang() === 'ko' ? 'ko' : 'en';
+  const theme = useDark() ? 'dark' : 'light';
+  const [playing, setPlaying] = useState(false);
+  const [previewTheme, setPreviewTheme] = useState(theme);
+  const [sourceOpen, setSourceOpen] = useState(false);
+  const [sourceTab, setSourceTab] = useState<SourceTab>('recipe');
+  const [direction, setDirection] = useState<keyof typeof demoSources.variants.stagger>('start');
+  const sourceId = useId();
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const demo = demos[id];
+  const source =
+    sourceTab === 'recipe'
+      ? id === 'stagger'
+        ? demoSources.variants.stagger[direction]
+        : demoSources.recipes[id]
+      : demoSources.player;
+  const native = id === 'line-reveal' || id === 'width-reflow';
+
+  useEffect(() => {
+    // The sandbox has an opaque origin. Only appearance data is sent.
+    frameRef.current?.contentWindow?.postMessage({ type: 'text-motion-theme', theme }, '*');
+  }, [theme, playing]);
+
+  return (
+    <section
+      className="motion-demo"
+      data-demo={id}
+      data-kind={demo.kind}
+      aria-label={`${demo.label} ${lang === 'ko' ? '데모' : 'demo'}`}
+    >
+      <header className="motion-demo__header">
+        <code>{demo.label}</code>
+        <span className="motion-demo__platform">
+          {native ? (lang === 'ko' ? 'iOS 녹화' : 'iOS recording') : 'React Native Web'}
+        </span>
+      </header>
+      {id === 'stagger' ? (
+        <div
+          className="motion-demo__options"
+          role="group"
+          aria-label={lang === 'ko' ? 'stagger 시작 방향' : 'Stagger origin'}
+        >
+          <span>{lang === 'ko' ? '시작 방향' : 'Origin'}</span>
+          {(
+            Object.keys(
+              demoSources.variants.stagger,
+            ) as (keyof typeof demoSources.variants.stagger)[]
+          ).map((option) => (
+            <button
+              type="button"
+              key={option}
+              aria-pressed={direction === option}
+              onClick={() => {
+                setPreviewTheme(theme);
+                setDirection(option);
+              }}
+            >
+              {option}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      {native ? (
+        <NativeDemoVideo key={`${id}-${theme}`} id={id} theme={theme} lang={lang} />
+      ) : playing ? (
+        <iframe
+          ref={frameRef}
+          className="motion-demo__frame"
+          sandbox="allow-scripts"
+          src={withBase(
+            `/demos/index.html?demo=${id}&lang=${lang}&embedded=1&theme=${previewTheme}${id === 'stagger' ? `&variant=${direction}` : ''}`,
+          )}
+          title={`${demo.label} ${lang === 'ko' ? '대화형 미리보기' : 'interactive preview'}`}
+          loading="lazy"
+          onLoad={() =>
+            frameRef.current?.contentWindow?.postMessage({ type: 'text-motion-theme', theme }, '*')
+          }
+        />
+      ) : (
+        <div className="motion-demo__start">
+          <button
+            type="button"
+            onClick={() => {
+              setPreviewTheme(theme);
+              setPlaying(true);
+            }}
+          >
+            <svg aria-hidden="true" width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M5 3.5v9L12 8 5 3.5Z" />
+            </svg>
+            {lang === 'ko' ? '예제 실행' : 'Run example'}
+          </button>
+        </div>
+      )}
+      <div className="motion-demo__toolbar">
+        <button
+          type="button"
+          className="motion-demo__source-toggle"
+          aria-expanded={sourceOpen}
+          aria-controls={sourceId}
+          onClick={() => setSourceOpen(!sourceOpen)}
+        >
+          <svg
+            aria-hidden="true"
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path d={sourceOpen ? 'm4 10 4-4 4 4' : 'm4 6 4 4 4-4'} />
+          </svg>
+          {sourceOpen
+            ? lang === 'ko'
+              ? '코드 닫기'
+              : 'Hide code'
+            : lang === 'ko'
+              ? '코드 보기'
+              : 'View code'}
+        </button>
+        {!native && playing ? (
+          <button type="button" className="motion-demo__close" onClick={() => setPlaying(false)}>
+            {lang === 'ko' ? '미리보기 닫기' : 'Close preview'}
+          </button>
+        ) : null}
+      </div>
+      <div id={sourceId} className="motion-demo__source" hidden={!sourceOpen}>
+        {sourceOpen ? (
+          <div className="motion-demo__source-content">
+            <div
+              className="motion-demo__source-tabs"
+              role="group"
+              aria-label={lang === 'ko' ? '코드 종류' : 'Source selection'}
+            >
+              {(['recipe', 'player'] as const).map((tab) => (
+                <button
+                  type="button"
+                  key={tab}
+                  aria-pressed={sourceTab === tab}
+                  aria-controls={sourceId}
+                  onClick={() => setSourceTab(tab)}
+                >
+                  {tab === 'recipe'
+                    ? lang === 'ko'
+                      ? '레시피'
+                      : 'Recipe'
+                    : lang === 'ko'
+                      ? '재생·제어'
+                      : 'Player'}
+                </button>
+              ))}
+            </div>
+            <p className="motion-demo__source-note">
+              {sourceTab === 'recipe'
+                ? lang === 'ko'
+                  ? '이 예제에서 실행하는 레시피와 기본 설정입니다.'
+                  : 'The recipe and shared defaults used by this example.'
+                : lang === 'ko'
+                  ? '모든 예제가 공유하는 재생·제어 UI의 원본입니다.'
+                  : 'The shared player source, including controls and styles.'}
+            </p>
+            <div>
+              <Suspense
+                fallback={
+                  <pre className="motion-demo__source-fallback">
+                    <code>{source}</code>
+                  </pre>
+                }
+              >
+                <RuntimeCode
+                  key={`${sourceTab}-${id === 'stagger' ? direction : id}`}
+                  lang="tsx"
+                  title={sourceTab === 'recipe' ? `${id}.tsx` : 'DocsDemo.tsx'}
+                  code={source}
+                  lineNumbers
+                  height={360}
+                />
+              </Suspense>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
diff --git a/docs/components/motion-demo.css b/docs/components/motion-demo.css
new file mode 100644
index 0000000..0673edf
--- /dev/null
+++ b/docs/components/motion-demo.css
@@ -0,0 +1,289 @@
+.motion-demo {
+  --motion-demo-height: 240px;
+  margin-block: 1.5rem 2rem;
+  overflow: hidden;
+  border: 1px solid var(--rp-c-divider);
+  border-radius: 6px;
+  background: var(--rp-c-bg);
+}
+
+.motion-demo[data-demo='controls'] {
+  --motion-demo-height: 300px;
+}
+
+.motion-demo[data-demo='progress'] {
+  --motion-demo-height: 320px;
+}
+
+.motion-demo[data-demo='typewriter-progress'] {
+  --motion-demo-height: 360px;
+}
+
+.motion-demo[data-demo='width-reflow'] {
+  --motion-demo-height: 380px;
+}
+
+.motion-demo__options {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 16px;
+  padding-inline: 16px;
+  border-bottom: 1px solid var(--rp-c-divider);
+  color: var(--rp-c-text-2);
+  font-size: 12px;
+}
+
+.motion-demo__options button {
+  min-height: 44px;
+  appearance: none;
+  padding: 8px 0;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--rp-c-text-2);
+  font-family: var(--rp-font-family-mono);
+  font-size: 12px;
+}
+
+.motion-demo__options button:hover,
+.motion-demo__options button[aria-pressed='true'] {
+  color: var(--rp-c-text-1);
+}
+
+.motion-demo__options button[aria-pressed='true'] {
+  border-bottom-color: var(--rp-c-text-1);
+}
+
+.motion-demo__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 42px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--rp-c-divider);
+}
+
+.motion-demo__header code {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--rp-c-text-1);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.motion-demo__platform {
+  flex-shrink: 0;
+  color: var(--rp-c-text-2);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.motion-demo__frame,
+.motion-demo__video {
+  display: block;
+  width: 100%;
+  height: var(--motion-demo-height);
+  border: 0;
+  background: var(--rp-c-bg);
+}
+
+.motion-demo__video {
+  object-fit: contain;
+}
+
+.motion-demo__video-wrap {
+  position: relative;
+}
+
+.motion-demo__video-poster {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: var(--rp-c-bg);
+  pointer-events: none;
+}
+
+.motion-demo__video-start {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  border: 1px solid var(--rp-c-divider);
+  border-radius: 5px;
+  background: var(--rp-c-bg);
+  color: var(--rp-c-text-1);
+  font-size: 13px;
+}
+
+.motion-demo__video-start:hover {
+  border-color: var(--rp-c-text-2);
+  background: var(--rp-c-bg-soft);
+}
+
+.motion-demo__video-error {
+  position: absolute;
+  right: 16px;
+  bottom: 66px;
+  left: 16px;
+  margin: 0;
+  padding: 8px;
+  background: var(--rp-c-bg);
+  color: var(--rp-c-text-1);
+  font-size: 12px;
+}
+
+.motion-demo__start {
+  display: flex;
+  min-height: var(--motion-demo-height);
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.motion-demo__start button {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 14px;
+  border: 1px solid var(--rp-c-divider);
+  border-radius: 5px;
+  background: transparent;
+  color: var(--rp-c-text-1);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.motion-demo button {
+  cursor: pointer;
+}
+
+.motion-demo button:focus-visible {
+  outline: 2px solid var(--rp-c-brand);
+  outline-offset: -2px;
+}
+
+.motion-demo__start button:hover {
+  border-color: var(--rp-c-text-2);
+  background: var(--rp-c-bg-soft);
+}
+
+.motion-demo__toolbar {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-inline: 12px;
+  border-top: 1px solid var(--rp-c-divider);
+}
+
+.motion-demo__toolbar button {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 6px;
+  padding: 4px;
+  background: transparent;
+  color: var(--rp-c-text-2);
+  font-size: 12px;
+}
+
+.motion-demo__toolbar button:hover,
+.motion-demo__source-toggle[aria-expanded='true'] {
+  color: var(--rp-c-text-1);
+}
+
+.motion-demo__source[hidden] {
+  display: none;
+}
+
+.motion-demo__source-content {
+  padding: 0 16px 16px;
+  border-top: 1px solid var(--rp-c-divider);
+}
+
+.motion-demo__source-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--rp-c-divider);
+}
+
+.motion-demo__source-tabs button {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  appearance: none;
+  padding: 10px 0;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--rp-c-text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.motion-demo__source-tabs button:hover {
+  color: var(--rp-c-text-1);
+}
+
+.motion-demo__source-tabs button[aria-pressed='true'] {
+  border-bottom-color: var(--rp-c-text-1);
+  color: var(--rp-c-text-1);
+}
+
+.motion-demo__source-note {
+  margin-block: 12px;
+  color: var(--rp-c-text-2);
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.motion-demo__source-content .rp-codeblock {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.motion-demo__source-fallback {
+  max-height: 360px;
+  overflow: auto;
+  padding: 16px;
+  background: var(--rp-c-bg-soft);
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+@media (max-width: 480px) {
+  .motion-demo__header {
+    gap: 12px;
+    padding-inline: 12px;
+  }
+
+  .motion-demo__platform {
+    font-size: 10px;
+  }
+
+  .motion-demo__source-content {
+    padding-inline: 12px;
+  }
+}
diff --git a/docs/demos.json b/docs/demos.json
new file mode 100644
index 0000000..13d85c1
--- /dev/null
+++ b/docs/demos.json
@@ -0,0 +1,28 @@
+{
+  "editorial-rise": { "label": "editorialRise()", "kind": "live" },
+  "soft-wave": { "label": "softWave()", "kind": "live" },
+  "gentle-emphasis": { "label": "gentleEmphasis()", "kind": "live" },
+  "fade": { "label": "fade()", "kind": "live" },
+  "rise": { "label": "rise()", "kind": "live" },
+  "slide": { "label": "slide()", "kind": "live" },
+  "scale": { "label": "scale()", "kind": "live" },
+  "pulse": { "label": "pulse()", "kind": "live" },
+  "shake": { "label": "shake()", "kind": "live" },
+  "typewriter": { "label": "typewriter()", "kind": "live" },
+  "typewriter-progress": { "label": "typewriter() + progress", "kind": "live" },
+  "line-reveal": { "label": "overlayText() + lineReveal()", "kind": "native" },
+  "width-reflow": { "label": "overlayText() · width reflow", "kind": "native" },
+  "words": { "label": "words()", "kind": "live" },
+  "graphemes": { "label": "graphemes()", "kind": "live" },
+  "lines": { "label": "lines()", "kind": "live" },
+  "custom": { "label": "custom()", "kind": "live" },
+  "stagger": { "label": "stagger()", "kind": "live" },
+  "wave": { "label": "wave()", "kind": "live" },
+  "sequence": { "label": "sequence()", "kind": "live" },
+  "parallel": { "label": "parallel()", "kind": "live" },
+  "compose": { "label": "fade().and(rise()).and(scale())", "kind": "live" },
+  "autoplay": { "label": "Autoplay", "kind": "live" },
+  "controls": { "label": "play() / replay() / reset() / stop()", "kind": "live" },
+  "progress": { "label": "progress", "kind": "live" },
+  "spring": { "label": ".motion({ kind: 'spring' })", "kind": "live" }
+}
diff --git a/docs/docs/en/_meta.json b/docs/docs/en/_meta.json
new file mode 100644
index 0000000..9c1dd78
--- /dev/null
+++ b/docs/docs/en/_meta.json
@@ -0,0 +1,4 @@
+[
+  { "type": "dir", "name": "guide", "label": "Guide" },
+  { "type": "dir", "name": "api", "label": "API Reference" }
+]
diff --git a/docs/docs/en/_nav.json b/docs/docs/en/_nav.json
new file mode 100644
index 0000000..80eacc6
--- /dev/null
+++ b/docs/docs/en/_nav.json
@@ -0,0 +1,5 @@
+[
+  { "text": "Guide", "link": "/guide/getting-started/overview.html", "activeMatch": "/guide/" },
+  { "text": "API", "link": "/api/recipe.html", "activeMatch": "/api/" },
+  { "text": "Examples", "link": "/guide/usage/examples.html" }
+]
diff --git a/docs/docs/en/api/_meta.json b/docs/docs/en/api/_meta.json
new file mode 100644
index 0000000..786ebf5
--- /dev/null
+++ b/docs/docs/en/api/_meta.json
@@ -0,0 +1,32 @@
+[
+  {
+    "type": "file",
+    "name": "recipe",
+    "label": "Recipe"
+  },
+  {
+    "type": "file",
+    "name": "splitters",
+    "label": "Splitters"
+  },
+  {
+    "type": "file",
+    "name": "renderers",
+    "label": "Renderers"
+  },
+  {
+    "type": "file",
+    "name": "timelines",
+    "label": "Timelines"
+  },
+  {
+    "type": "file",
+    "name": "effects",
+    "label": "Effects"
+  },
+  {
+    "type": "file",
+    "name": "component-props",
+    "label": "Component Props"
+  }
+]
diff --git a/docs/docs/en/api/component-props.md b/docs/docs/en/api/component-props.md
new file mode 100644
index 0000000..cc745dd
--- /dev/null
+++ b/docs/docs/en/api/component-props.md
@@ -0,0 +1,85 @@
+# Component Props
+
+Calling a recipe's `.component()` returns a `TextMotionComponent`. Its props are `TextMotionComponentProps`, shared by both built-in renderers.
+
+## Text and styling
+
+| Prop | Type | Behavior |
+| --- | --- | --- |
+| `children` | `string` | Required plain text. Nested elements, arrays, and rich text are not supported. |
+| `style` | `StyleProp<TextStyle>` | Text styling. `nativeText()` applies it to token text; `overlayText()` uses it for the measured paragraph. |
+| `testID` | `string` | Identifies the parent container. |
+| `nativeID` | `string` | Passed to the parent container. |
+| `allowFontScaling` | React Native `TextProps['allowFontScaling']` | Forwarded to text rendering. |
+| `maxFontSizeMultiplier` | React Native `TextProps['maxFontSizeMultiplier']` | Forwarded to text rendering. |
+
+The component requires a string at runtime as well as in TypeScript. To include authored newlines, use a string expression such as `{'First line\nSecond line'}`. Use a surrounding `View` for external layout constraints instead of assuming all `Text` or `View` props are forwarded.
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  words,
+} from '@react-native-motion-kit/text-motion';
+import { View } from 'react-native';
+
+const Title = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .effect(fade())
+  .component();
+
+export function Heading() {
+  return (
+    <View style={{ maxWidth: 320 }}>
+      <Title
+        testID="heading"
+        allowFontScaling
+        maxFontSizeMultiplier={1.5}
+        style={{ fontSize: 28, lineHeight: 36, color: '#234' }}
+      >
+        Make room for readable motion
+      </Title>
+    </View>
+  );
+}
+```
+
+## Playback
+
+| Prop | Type | Behavior |
+| --- | --- | --- |
+| `controls` | `TextMotionControls` | Event-driven `play`, `replay`, `reset`, and `stop`; internal playback uses the recipe's `.motion()` config. |
+| `progress` | Reanimated `SharedValue<number>` | App-owned whole-text progress; internal autoplay and `.motion()` do not drive that instance. |
+
+**`controls` and `progress` are mutually exclusive.** TypeScript rejects the combination and both renderers also throw at runtime. With neither prop, animated content autoplays on mount.
+
+`progress` is normalized: `0` is initial and `1` is final. Finite values outside that range are clamped, and non-finite values are treated as `0`. Timeline delays map it to per-unit progress, so it is not a visible-character percentage. See [Playback](../guide/usage/playback.mdx) for complete controls and progress examples.
+
+## Accessibility
+
+The supported accessibility props are:
+
+- `accessibilityLabel`
+- `accessibilityHint`
+- `accessibilityRole`
+- `accessibilityState`
+- `accessibilityValue`
+- `accessibilityActions`
+- `accessibilityLanguage`
+- `onAccessibilityAction`
+
+The default parent label is the complete original string; `accessibilityLabel` overrides it. The policy owns whether the parent is accessible and whether decorative nodes are hidden. Configure it through `.accessibility(parentLabelPolicy(...))`, rather than passing an `accessible` prop. See [Accessibility](../guide/usage/accessibility.md).
+
+## Lifecycle
+
+Ordinary parent rerenders with the same text and recipe preserve in-flight playback. Text changes are enter-only: old content is not retained for an exit, crossfade, or token diff. In controls mode, later commands target the current text. In external-progress mode, the current shared value determines the new text's state.
+
+Changes to effect, timeline, or motion configuration can reset affected animations. Keep recipe components and function-valued motion options stable when playback should survive parent rerenders.
+
+## Deliberately narrow surface
+
+These components are not full React Native `Text` replacements. Props such as `numberOfLines`, `ellipsizeMode`, `lineBreakMode`, `onTextLayout`, `selectable`, text `onPress`, and nested styled text are outside the current contract. Put interaction or external layout on an appropriate surrounding component.
+
+`TextMotionComponent`, `TextMotionComponentProps`, `TextMotionComponentTextProps`, and `TextMotionComponentAccessibilityProps` are exported from the root for typed application code. Controls use `useTextMotionControls()` and the exported `TextMotionControls` type; there is no public component-ref or context/provider playback API.
diff --git a/docs/docs/en/api/effects.mdx b/docs/docs/en/api/effects.mdx
new file mode 100644
index 0000000..0eb1ca5
--- /dev/null
+++ b/docs/docs/en/api/effects.mdx
@@ -0,0 +1,151 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# Effects
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+Effects describe the visual change of each motion unit. Import them from `@react-native-motion-kit/text-motion` and pass a compatible effect to `.effect(...)` after selecting a renderer.
+
+## Factories and defaults
+
+Every option is optional; `typewriter()` takes no options. All numeric effect inputs must be finite. Directional offsets can be negative. Offsets use React Native layout units, opacity is a scalar, and scale values are multipliers.
+
+| Factory | Options and defaults | Behavior | Renderer |
+| --- | --- | --- | --- |
+| `fade(options?)` | `from: 0`, `to: 1` | Changes opacity from `from` to `to` | Both |
+| `rise(options?)` | `y: 12` | Starts offset downward by `y`, then moves into place | Both |
+| `slide(options?)` | `x: 0`, `y: 12` | Starts at an x/y offset, then moves into place | Both |
+| `scale(options?)` | `from: 0.96`, `to: 1` | Changes the scale multiplier | Both |
+| `pulse(options?)` | `scale: 1.04` | Peaks around the midpoint, then returns to the composed final scale | Both |
+| `shake(options?)` | `x: 4` | Starts with a horizontal offset for a shake-like entrance | Both |
+| `lineReveal(options?)` | `y: 16`, `fromOpacity: 0` | Reveals rendered lines through masks | `overlayText()` |
+| `typewriter()` | None | Hides a token until its local progress becomes positive | `nativeText()` |
+
+`shake()` is an entrance offset; it does not create a repeating oscillation. `pulse()` provides midpoint emphasis; use `scale()` when the starting or ending size should change.
+
+The root exports `FadeOptions`, `RiseOptions`, `SlideOptions`, `ScaleOptions`, `PulseOptions`, `ShakeOptions`, and `LineRevealOptions`. Their properties match the table above.
+
+## Try each effect
+
+Replay each demo to compare its starting position, opacity, and scale.
+
+### `fade()`
+
+<MotionDemo id="fade" />
+
+### `rise()`
+
+<MotionDemo id="rise" />
+
+### `slide()`
+
+<MotionDemo id="slide" />
+
+### `scale()`
+
+<MotionDemo id="scale" />
+
+### `pulse()`
+
+<MotionDemo id="pulse" />
+
+### `shake()`
+
+<MotionDemo id="shake" />
+
+## Compose with `.and(...)`
+
+<MotionDemo id="compose" />
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  scale,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const HeroTitle = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(rise({ y: 14 }).and(fade()).and(scale({ from: 0.98 })))
+  .component();
+
+export function Heading() {
+  return <HeroTitle>A little motion, a clear message</HeroTitle>;
+}
+```
+
+`.and(...)` returns a composed `TextMotionEffect`. Repeated `.effect(...)` calls also append effects. Transform offsets accumulate and scale multipliers multiply; opacity-setting effects are applied in composition order. Prefer one clear opacity effect when combining recipes.
+
+Effects require compatible renderer capabilities. `lineReveal()` cannot be used with `nativeText()`, and `typewriter()` cannot be used with `overlayText()`. TypeScript checks valid combinations; runtime checks also reject incompatible effects.
+
+## `lineReveal()`
+
+<MotionDemo id="line-reveal" />
+
+```tsx
+import {
+  defineTextMotion,
+  lineReveal,
+  overlayText,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+
+const HeroLines = defineTextMotion()
+  .layout(overlayText())
+  .timeline(stagger(0.08))
+  .effect(lineReveal({ y: 18, fromOpacity: 0 }))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .component();
+```
+
+Do not add a splitter. The renderer measures actual wrapped lines. The reveal offset moves the paragraph copy inside each mask, while opacity applies to the line frame. Composed `scale()` and `pulse()` transform the measured line frame. See [Renderers](./renderers.mdx) for layout and measurement behavior.
+
+## `typewriter()`
+
+<MotionDemo id="typewriter" />
+
+Use this for fixed-layout character reveals. The splitter chooses the reveal unit, the timeline chooses its start, and `.motion()` chooses any subsequent movement.
+
+```tsx
+import {
+  defineTextMotion,
+  graphemes,
+  nativeText,
+  parentLabelPolicy,
+  stagger,
+  typewriter,
+} from '@react-native-motion-kit/text-motion';
+
+const TypewriterText = defineTextMotion()
+  .split(graphemes())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(typewriter())
+  .motion({ kind: 'timing', options: { duration: 0 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Greeting() {
+  return <TypewriterText>안녕 세계! 👩🏽‍💻</TypewriterText>;
+}
+```
+
+The completed phrase's space and line breaks remain in place from the start. Visible graphemes get delay slots 40ms apart; whitespace and explicit newlines keep their layout without taking a slot. Punctuation takes a slot like other visible characters. The first character appears on the first playback update, and display timing follows device frames.
+
+`duration: 0` makes each reveal instant in autoplay or controls mode. To move a character after it appears, use a nonzero duration and compose an effect such as `typewriter().and(rise({ y: 6 }))`. Composing `fade()` intentionally makes appearance gradual. The visibility gate works in either composition order; adding `typewriter()` twice does not add another clock.
+
+Use [controls](../guide/usage/playback.mdx) for replay/reset/stop. `stop()` preserves the current state; a later `play()` does not promise exact continuation of the remaining typing schedule. To type a new phrase fully from its start, remount with a new React `key`. Appending text is not a streaming API.
+
+With external `progress`, `0` hides the animated characters and `1` shows the final state. **Progress is timeline progress, not the percentage of characters shown.** For maximum delay `D` and a character's delay `d`, local progress is `clamp(progress × (D + 1) - d, 0, 1)`. A character becomes visible when this is greater than zero. Decreasing progress past its start hides it again. `.motion()` is ignored in external-progress mode.
+
+This effect does not grow or delete the underlying string, provide a cursor, guarantee single-`Text` shaping, or implement streaming. Use it with short UI copy and measure larger workloads.
+
+## Public scope
+
+Effect handles expose `.and(...)`; internal `name`, `options`, and `requiredCapabilities` fields are not public. Custom effect factories, `wipe`, `scramble`, and Skia effects are outside the current API.
diff --git a/docs/docs/en/api/recipe.mdx b/docs/docs/en/api/recipe.mdx
new file mode 100644
index 0000000..e0d2583
--- /dev/null
+++ b/docs/docs/en/api/recipe.mdx
@@ -0,0 +1,94 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# Recipe API
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+Import the public factories from `@react-native-motion-kit/text-motion`. Presets are exported separately from `@react-native-motion-kit/text-motion/presets`.
+
+## `defineTextMotion()`
+
+<MotionDemo id="compose" />
+
+Starts a recipe builder. Every configuration method returns a new builder, so a base recipe can be reused without changing earlier recipes.
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const base = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04));
+
+const FadeTitle = base.effect(fade()).component();
+const RisingTitle = base.effect(fade().and(rise({ y: 12 }))).component();
+
+export function Heading() {
+  return <RisingTitle>Motion made for text</RisingTitle>;
+}
+```
+
+Create recipe components outside the rendering function so ordinary rerenders preserve their React identity.
+
+## Builder methods
+
+| Method | Input | Behavior |
+| --- | --- | --- |
+| `.split(splitter)` | A [splitter](./splitters.mdx) | Chooses source tokens. Omit this for `overlayText()`. |
+| `.layout(renderer)` | A [renderer](./renderers.mdx) | Selects how text is laid out and rendered. Required before `.component()`. |
+| `.timeline(timeline)` | A [timeline](./timelines.mdx) | Chooses each visible motion unit's start delay. |
+| `.effect(effect)` | A compatible [effect](./effects.mdx) | Appends an effect; repeated calls accumulate effects. |
+| `.motion(config)` | `TextMotionMotionConfig` | Configures autoplay and controls-driven playback. |
+| `.accessibility(policy)` | `TextMotionAccessibilityPolicy` | Configures parent labeling and reduced motion. |
+| `.recipe()` | None | Returns a configuration snapshot; allowed before a renderer is chosen. |
+| `.component()` | None | Creates a React component accepting [text-motion props](./component-props.md). |
+
+Repeated `.split()`, `.layout()`, `.timeline()`, `.motion()`, and `.accessibility()` calls replace that part of the new recipe. Select the renderer before adding effects so TypeScript can check its capabilities. A rendered-line recipe cannot use `.split(...)`; that combination is also rejected at runtime.
+
+With `nativeText()` and no splitter, the whole string is one token. With no timeline, all animated units start together. With no effects, their visual style stays unchanged.
+
+## `.motion(config)`
+
+<MotionDemo id="spring" />
+
+```tsx
+.motion({ kind: 'timing', options: { duration: 420 } })
+.motion({ kind: 'spring', options: { damping: 14, stiffness: 160 } })
+```
+
+`TextMotionMotionConfig` is a discriminated union:
+
+```ts
+type TextMotionMotionConfig =
+  | { kind: 'timing'; options?: TextMotionTimingOptions }
+  | { kind: 'spring'; options?: TextMotionSpringOptions };
+```
+
+`TextMotionTimingOptions` follows Reanimated's `WithTimingConfig` and `TextMotionSpringOptions` follows `WithSpringConfig`, with `reduceMotion` excluded from both. Configure reduced motion through `.accessibility(...)`. The installed Reanimated version determines the remaining supported options. Numeric motion options must be finite.
+
+The default internal animation is timing with a **300ms** duration. Timeline inputs use **seconds**; `duration` uses **milliseconds**. Function-valued options such as `easing` are compared by reference: reuse the same function when a rerender should preserve playback.
+
+Passing a component an external `progress` shared value disables internal autoplay and ignores `.motion()` for that instance. See [Playback](../guide/usage/playback.mdx).
+
+## `.accessibility(parentLabelPolicy(options))`
+
+```tsx
+import { parentLabelPolicy } from '@react-native-motion-kit/text-motion';
+
+const policy = parentLabelPolicy({ reducedMotion: 'final-state' });
+```
+
+`ParentLabelPolicyOptions` has one option, `reducedMotion?: 'system' | 'final-state'`, defaulting to `'system'`. The returned policy exposes one full-text accessible parent label and hides decorative token nodes. Both renderers use `parentLabelPolicy()` when no policy is supplied. See [Accessibility](../guide/usage/accessibility.md) for renderer behavior and recommended usage.
+
+## Public handles and types
+
+`TextMotionSplitter`, `TextMotionRenderer`, `TextMotionTimeline`, and `TextMotionEffect` are opaque handles returned by the public factories. Pass them to the builder; use `.and(...)` to compose effects. Their internal `kind`, `name`, `options`, `delayFor`, `Component`, and capability arrays are not a supported inspection or extension API.
+
+The root also exports `TextMotionRendererCapability`, `TextMotionRendererProps`, and `TextMotionToken` as types. Exported types do not make internal factory functions public. Custom effect factories, custom renderer factories, descriptor readers, and capability factories are outside the current root API.
diff --git a/docs/docs/en/api/renderers.mdx b/docs/docs/en/api/renderers.mdx
new file mode 100644
index 0000000..a1425e4
--- /dev/null
+++ b/docs/docs/en/api/renderers.mdx
@@ -0,0 +1,112 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# Renderers
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+Choose a renderer with `.layout(...)` before calling `.component()`. Both factories return opaque handles, not React components.
+
+| Renderer | Motion unit | Splitter | Supported effects |
+| --- | --- | --- | --- |
+| `nativeText()` | Source word, grapheme, authored line, or custom token | Optional | `fade`, `rise`, `slide`, `scale`, `pulse`, `shake`, `typewriter` |
+| `overlayText()` | Actual React Native rendered line | Not allowed | `fade`, `rise`, `slide`, `scale`, `pulse`, `shake`, `lineReveal` |
+
+## `nativeText(options?)`
+
+<MotionDemo id="words" />
+
+```ts
+type NativeTextRendererOptions = {
+  testIDPrefix?: string;
+};
+```
+
+The stable default choice for short titles, labels, onboarding text, and product copy. It renders animated tokens inside animated `View` containers with inner `Text` nodes so transforms are visible. Static tokens remain plain text nodes. Explicit newlines preserve authored line breaks without consuming motion timing slots.
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const WordReveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText({ testIDPrefix: 'title-word' }))
+  .timeline(stagger(0.04))
+  .effect(fade().and(rise({ y: 12 })))
+  .component();
+
+export function Heading() {
+  return <WordReveal style={{ fontSize: 32 }}>Make words move</WordReveal>;
+}
+```
+
+`testIDPrefix` has no default. It creates generated token test IDs; an animated token's ID belongs to its animated container. The component's `testID` identifies the parent. Typography props such as `allowFontScaling` reach the inner text.
+
+This renderer uses a wrapping token layout, so exact single-`Text` shaping, kerning, ligatures, and automatic line wrapping are not guaranteed. `textAlign` maps to token-row alignment; it does not turn the renderer into a full native paragraph implementation. Use `overlayText()` for actual rendered-line motion, and ordinary React Native `Text` for rich inline content or exact text-node behavior.
+
+## `overlayText(options?)`
+
+<MotionDemo id="line-reveal" />
+
+```ts
+type OverlayTextRendererOptions = {
+  testIDPrefix?: string;
+};
+```
+
+Measures one native paragraph and animates masks for each actual rendered line. Use this when line breaks depend on available width, font, font scale, alignment, or language shaping. **Do not call `.split(...)`.** TypeScript and runtime checks reject that combination.
+
+```tsx
+import {
+  defineTextMotion,
+  lineReveal,
+  overlayText,
+  scale,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+import { View } from 'react-native';
+
+const HeroLines = defineTextMotion()
+  .layout(overlayText({ testIDPrefix: 'hero-line' }))
+  .timeline(stagger(0.08))
+  .effect(lineReveal({ y: 18 }).and(scale({ from: 0.98 })))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .component();
+
+export function Hero() {
+  return (
+    <View style={{ width: 300 }}>
+      <HeroLines style={{ fontSize: 32, lineHeight: 40 }}>
+        A responsive title that reveals one rendered line at a time
+      </HeroLines>
+    </View>
+  );
+}
+```
+
+Give the paragraph a meaningful available width. Measurement is based on native text layout, not a guessed character count. Changes to text or layout inputs trigger measurement updates. If usable line mapping is unavailable, the renderer keeps readable source text instead of animating guessed line geometry. When system reduced motion is enabled, it renders the final source paragraph directly.
+
+`testIDPrefix` has no default and prefixes generated overlay/line-mask IDs. `lineReveal()` moves the paragraph copy inside each mask while applying its opacity to the line frame. Other transform effects operate on the measured line frame, so a composed `scale()` or `pulse()` can grow around the line center without being clipped by the renderer's own reveal mask.
+
+This is rendered-line motion, not word-in-line or character-in-line mapping. It does not expose `onTextLayout`, `numberOfLines`, text selection, or inline links as component props.
+
+### Reflow at different widths
+
+<MotionDemo id="width-reflow" />
+
+This iOS recording shows a long English paragraph without explicit newlines at React Native layout widths of `220` and `320`. The native example's **Narrow** and **Wide** buttons change the available width; its progress controls hold `progress` at `0.5` during the change, then replay at each width. The line masks follow the source paragraph's native measurements after reflow.
+
+## Shared playback and accessibility
+
+Both renderers support autoplay, explicit [controls](../guide/usage/playback.mdx), and app-owned `progress`. Never pass both `controls` and `progress`. The default accessibility policy exposes the complete phrase once and hides decorative nodes; a component-level `accessibilityLabel` overrides the spoken label.
+
+Read [Component Props](./component-props.md), [Accessibility](../guide/usage/accessibility.md), and [Performance](../guide/usage/performance.md) before using many tokens or rows. Browser rendering is not evidence of iOS/Android layout or performance.
+
+## Renderer types
+
+The root exports `NativeTextRendererOptions`, `OverlayTextRendererOptions`, `TextMotionRenderer`, `TextMotionRendererCapability`, and `TextMotionRendererProps`. Renderer descriptors, implementation `Component` fields, and capability factories remain internal. A public renderer-extension SDK is outside the current API.
diff --git a/docs/docs/en/api/splitters.mdx b/docs/docs/en/api/splitters.mdx
new file mode 100644
index 0000000..8e3436f
--- /dev/null
+++ b/docs/docs/en/api/splitters.mdx
@@ -0,0 +1,121 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# Splitters
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+Splitters choose source-text tokens for `nativeText()`. They return an opaque `TextMotionSplitter` handle used by `.split(...)`.
+
+```tsx
+import {
+  custom,
+  defineTextMotion,
+  fade,
+  graphemes,
+  lines,
+  nativeText,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const WordTitle = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade())
+  .component();
+```
+
+`overlayText()` owns actual rendered-line measurement and cannot be combined with any splitter. See [Renderers](./renderers.mdx).
+
+## `words()`
+
+<MotionDemo id="words" />
+
+Takes no options. Produces word, spacing, and punctuation tokens using `Intl.Segmenter` when available, with an internal fallback otherwise. Whitespace preserves layout but does not consume a motion index; visible punctuation can consume one.
+
+Words follow the runtime's segmentation rules. This is not a promise that every language separates words by spaces. The generated token metadata includes `isWordLike`.
+
+## `graphemes()`
+
+<MotionDemo id="graphemes" />
+
+Takes no options. Produces grapheme-aware tokens for character-level motion. Prefer it over `text.split('')`, which can break surrogate pairs and combining sequences.
+
+The fallback handles common emoji sequences and decomposed Hangul such as `한` without normalizing the source, but does not implement every Unicode grapheme rule. Some complex-script conjuncts can still split. See [Segmentation](../guide/usage/segmentation.md) before relying on exact locale boundaries.
+
+## `lines()` — experimental
+
+<MotionDemo id="lines" />
+
+Takes no options. Splits at explicit `\n` boundaries and preserves newline text in the token's source range. It **does not** measure automatic wrapping caused by width, fonts, or font scaling.
+
+```tsx
+const AuthoredLines = defineTextMotion()
+  .split(lines())
+  .layout(nativeText())
+  .effect(fade())
+  .component();
+
+export function Heading() {
+  return <AuthoredLines>{'First line\nSecond line'}</AuthoredLines>;
+}
+```
+
+Tokens have `metadata: { experimental: true, mapping: 'newline-only' }`. Use `overlayText()` and `lineReveal()` when you need the lines React Native actually rendered.
+
+## `custom(split)`
+
+<MotionDemo id="custom" />
+
+```ts
+type TextMotionCustomSplit = (
+  input: string,
+  context?: { locale?: string | string[] },
+) => readonly TextMotionCustomSplitResult[];
+
+type TextMotionCustomSplitResult = string | TextMotionCustomSplitToken;
+
+type TextMotionCustomSplitToken = {
+  text: string;
+  sourceRange?: { start: number; end: number };
+  metadata?: Record<string, unknown>;
+};
+```
+
+Return strings or token objects. String results get inferred source ranges by searching forward from the previous token's end. Return explicit ranges when matching is ambiguous or metadata matters. Ranges use JavaScript string indices (UTF-16 code units), with an exclusive `end`.
+
+```tsx
+const phrases = custom((input) => {
+  const separator = input.indexOf(' / ');
+  if (separator < 0) return [input];
+
+  return [
+    { text: input.slice(0, separator), sourceRange: { start: 0, end: separator } },
+    { text: ' / ', sourceRange: { start: separator, end: separator + 3 } },
+    {
+      text: input.slice(separator + 3),
+      sourceRange: { start: separator + 3, end: input.length },
+    },
+  ];
+});
+```
+
+Preserve all characters and spacing that should remain visible. A custom splitter does not repair or validate product-specific segmentation decisions. The optional context is part of the callback shape; recipe components currently call splitters without passing a locale, so there is no component `locale` prop.
+
+## Token type
+
+`TextMotionToken` is exported for typed integrations:
+
+```ts
+type TextMotionToken = {
+  id: string;
+  text: string;
+  index: number;
+  unit: 'grapheme' | 'word' | 'line' | 'custom';
+  sourceRange: { start: number; end: number };
+  metadata?: Record<string, unknown>;
+};
+```
+
+A splitter handle does not expose a public `.split()` method or its internal descriptor. Pass the handle to the recipe builder instead.
diff --git a/docs/docs/en/api/timelines.mdx b/docs/docs/en/api/timelines.mdx
new file mode 100644
index 0000000..65638ff
--- /dev/null
+++ b/docs/docs/en/api/timelines.mdx
@@ -0,0 +1,115 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# Timelines
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+Timelines assign start delays to visible motion units: source tokens for `nativeText()` and measured lines for `overlayText()`. **All timeline delays are in seconds.** Whitespace and non-animated layout units do not consume motion indices.
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  parallel,
+  sequence,
+  stagger,
+  wave,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const Title = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04, { from: 'center' }))
+  .effect(fade())
+  .motion({ kind: 'timing', options: { duration: 300 } })
+  .component();
+```
+
+Here `0.04` means a 40ms delay step. The `300` motion duration is **milliseconds** per animated unit. Without a timeline, every unit has zero delay.
+
+## `stagger(step, options?)`
+
+<MotionDemo id="stagger" />
+
+Choose **start**, **center**, **end**, or **edges** above to compare reveal order. Each selection switches the actual React Native Web recipe and replays it. The **Recipe** source and copy controls follow the selected direction.
+
+```ts
+type TextMotionStaggerFrom = 'start' | 'center' | 'end' | 'edges' | number;
+type TextMotionStaggerOptions = { from?: TextMotionStaggerFrom };
+```
+
+`step` is required, finite, and non-negative. `from` defaults to `'start'`. A numeric origin is a finite token index, not a percentage; it may be fractional.
+
+For unit index `i` and total count `n`, the delay is `step × distance`:
+
+| `from` | Distance | Pattern |
+| --- | --- | --- |
+| `'start'` | `i` | First to last |
+| `'end'` | `n - 1 - i` | Last to first |
+| `'center'` | `abs(i - (n - 1) / 2)` | Middle outward |
+| `'edges'` | `min(i, n - 1 - i)` | Both ends inward |
+| A number `k` | `abs(i - k)` | Outward from index `k` |
+
+```tsx
+stagger(0.04);
+stagger(0.04, { from: 'end' });
+stagger(0.04, { from: 'edges' });
+stagger(0.04, { from: 2 });
+```
+
+## `wave(options?)`
+
+<MotionDemo id="wave" />
+
+```ts
+type TextMotionWaveOptions = {
+  amplitude?: number;
+  wavelength?: number;
+};
+```
+
+| Option | Default | Constraint | Meaning |
+| --- | --- | --- | --- |
+| `amplitude` | `0.08` | Finite, `>= 0` | Maximum delay in seconds |
+| `wavelength` | `4` | Finite, `> 0` | Number of motion units per sine-wave cycle |
+
+The delay for index `i` is `((sin(i / wavelength × 2π) + 1) / 2) × amplitude`. The first unit therefore starts at half the amplitude; a wave does not promise left-to-right reveal order.
+
+```tsx
+wave();
+wave({ amplitude: 0.06, wavelength: 5 });
+```
+
+## `sequence(...timelines)`
+
+<MotionDemo id="sequence" />
+
+Accepts zero or more timeline handles and **adds their delays for each unit**. This composes delay patterns; it does not wait for one whole animation to finish before starting another.
+
+```tsx
+sequence(stagger(0.02), wave({ amplitude: 0.04, wavelength: 4 }));
+```
+
+`sequence()` with no arguments produces zero delay.
+
+## `parallel(...timelines)`
+
+<MotionDemo id="parallel" />
+
+Accepts zero or more timeline handles and chooses the **earliest delay for each unit**.
+
+```tsx
+parallel(stagger(0.08), wave({ amplitude: 0.05, wavelength: 3 }));
+```
+
+`parallel()` with no arguments produces zero delay. It does not create independent playback tracks.
+
+## Controlled progress
+
+In [external progress mode](../guide/usage/playback.mdx), timeline delays still shape each unit's local progress. The app controls the shared value's timing curve; `.motion()` does not run. A timeline is a delay pattern, not a separate playback controller.
+
+## Handles and validation
+
+The root exports `TextMotionTimeline`, `TextMotionStaggerFrom`, `TextMotionStaggerOptions`, and `TextMotionWaveOptions`. Numeric factory inputs are validated as described above. Returned timelines are opaque handles: `delayFor`, `name`, and `options` are not public properties. Pass timelines to `.timeline(...)`, `sequence(...)`, or `parallel(...)`.
diff --git a/docs/docs/en/guide/_meta.json b/docs/docs/en/guide/_meta.json
new file mode 100644
index 0000000..6dea2c3
--- /dev/null
+++ b/docs/docs/en/guide/_meta.json
@@ -0,0 +1,4 @@
+[
+  { "type": "dir", "name": "getting-started", "label": "Getting Started" },
+  { "type": "dir", "name": "usage", "label": "Usage" }
+]
diff --git a/docs/docs/en/guide/getting-started/_meta.json b/docs/docs/en/guide/getting-started/_meta.json
new file mode 100644
index 0000000..4b83f28
--- /dev/null
+++ b/docs/docs/en/guide/getting-started/_meta.json
@@ -0,0 +1 @@
+["overview", "installation", "quick-start"]
diff --git a/docs/docs/en/guide/getting-started/installation.md b/docs/docs/en/guide/getting-started/installation.md
new file mode 100644
index 0000000..eecbf65
--- /dev/null
+++ b/docs/docs/en/guide/getting-started/installation.md
@@ -0,0 +1,69 @@
+# Installation
+
+Text Motion uses React Native Reanimated and React Native Worklets. Set up compatible versions of these dependencies in your app before rendering animated text.
+
+## Requirements
+
+The package declares these peer dependency minimums:
+
+| Dependency | Declared range |
+| --- | --- |
+| `react` | `>=18.0.0` |
+| `react-native` | `>=0.76.0` |
+| `react-native-reanimated` | `>=4.0.0` |
+| `react-native-worklets` | `>=0.5.0` |
+
+These ranges are not a compatibility matrix. Choose a React Native, Reanimated, and Worklets combination supported by the [Reanimated compatibility table](https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/). Reanimated 4 requires the React Native New Architecture.
+
+## Install the packages
+
+For an existing React Native app:
+
+```sh
+pnpm add @react-native-motion-kit/text-motion react-native-reanimated react-native-worklets
+```
+
+With npm or Yarn, use the equivalent `npm install` or `yarn add` command.
+
+For an Expo app, let Expo choose the Reanimated and Worklets versions for your SDK:
+
+```sh
+npx expo install react-native-reanimated react-native-worklets
+pnpm add @react-native-motion-kit/text-motion
+```
+
+Check that your SDK's selected versions satisfy the peer ranges above. Follow the [Expo Reanimated guide](https://docs.expo.dev/versions/latest/sdk/reanimated/) for the setup required by your SDK and build type.
+
+## Configure Worklets
+
+Follow the official [Reanimated getting-started guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) and [Worklets getting-started guide](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/getting-started/) for your environment.
+
+In a bare React Native app using Babel, add the Worklets plugin as the **last** plugin in the existing configuration:
+
+```js
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-worklets/plugin'],
+};
+```
+
+Preserve any other presets and plugins your app needs. Expo's Babel preset may configure this for your SDK; use the SDK-specific setup rather than adding a duplicate plugin.
+
+After adding native dependencies, install iOS pods through your app's existing CocoaPods workflow and rebuild the native app. Restart Metro with its cache reset if the Babel configuration changed. Text Motion itself does not require an additional Babel plugin, provider, or native configuration.
+
+## Import from the public entrypoints
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+```
+
+Built-in primitives come from the package root. The three presets come from `/presets`. Do not import internal renderer or descriptor files.
+
+Continue to the [quick start](./quick-start.mdx).
diff --git a/docs/docs/en/guide/getting-started/overview.md b/docs/docs/en/guide/getting-started/overview.md
new file mode 100644
index 0000000..3652396
--- /dev/null
+++ b/docs/docs/en/guide/getting-started/overview.md
@@ -0,0 +1,48 @@
+# Overview
+
+`@react-native-motion-kit/text-motion` creates reusable animated text components for React Native. Compose text splitting, rendering, timing, effects, and accessibility in a recipe, then render the result as a component.
+
+```txt
+split → layout(renderer) → timeline → effect → motion/accessibility → component
+```
+
+This documentation describes the current `0.1.0` public API.
+
+## Choose your starting point
+
+Use a [preset](../usage/presets.mdx) for common title, label, and product-copy animation. Use a [custom recipe](../usage/recipes.mdx) when you need to choose the motion unit, timing, or effects.
+
+```tsx
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+
+const HeroTitle = editorialRise().component();
+
+export function Hero() {
+  return <HeroTitle>Design motion that feels native</HeroTitle>;
+}
+```
+
+The component accepts a plain string child. Define it outside your React render function so a parent rerender reuses the same component type.
+
+## What you can build
+
+| Need | Public API |
+| --- | --- |
+| Animate words or user-perceived characters | `words()` or `graphemes()` with `nativeText()` |
+| Reveal the lines React Native actually wraps | `overlayText()` with `lineReveal()`, without `.split(...)` |
+| Reveal characters while reserving the complete phrase's layout | `graphemes()`, `nativeText()`, and `typewriter()` |
+| Replay after a button or another app event | `useTextMotionControls()` and the `controls` prop |
+| Follow scroll, gestures, or another app-owned animation | A Reanimated shared value passed as `progress` |
+| Keep the phrase readable to screen readers | Parent-label accessibility with decorative token nodes hidden |
+
+`controls` sends playback commands; `progress` supplies the current visual state. An instance accepts one of these playback inputs at a time.
+
+## Scope and limits
+
+The intended workloads are short titles, headings, labels, onboarding copy, and product descriptions. Measure long paragraphs, many rows, and large grapheme counts on your target devices before adopting them.
+
+`nativeText()` uses containers around moving tokens and does not reproduce every behavior of a single native `Text`. Rich nested children, inline links, selectable text, and text `onPress` are outside the component contract. `lines()` splits explicit `\n` characters only; use `overlayText()` for automatic wrapping.
+
+The current public API does not include custom effect factories, a renderer-extension SDK, Skia effects, `pause`/`seek`/`reverse`, or built-in scroll, gesture, screen-focus, and in-view drivers. Apps can connect their own events through `controls` and continuous shared values through `progress`. Text changes are enter-only; the library does not retain old text for exit animation or provide a streaming-text API.
+
+Continue with [installation](./installation.md), then create your first component in the [quick start](./quick-start.mdx).
diff --git a/docs/docs/en/guide/getting-started/quick-start.mdx b/docs/docs/en/guide/getting-started/quick-start.mdx
new file mode 100644
index 0000000..d5be9a5
--- /dev/null
+++ b/docs/docs/en/guide/getting-started/quick-start.mdx
@@ -0,0 +1,96 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# Quick Start
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+Complete [installation](./installation.md), then choose a preset or create a recipe. Both approaches return a reusable React component.
+
+## Start with a preset
+
+<MotionDemo id="editorial-rise" />
+
+```tsx
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+
+const HeroReveal = editorialRise().component();
+
+export function HeroTitle() {
+  return (
+    <HeroReveal style={{ fontSize: 32, fontWeight: '700' }}>
+      Design motion that feels native
+    </HeroReveal>
+  );
+}
+```
+
+`editorialRise()` uses word tokens, a centered stagger, and combined rise, fade, and scale effects. The component autoplays when it mounts.
+
+## Create a word reveal
+
+<MotionDemo id="words" />
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  parentLabelPolicy,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const WordReveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade().and(rise({ y: 12 })))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Headline() {
+  return <WordReveal style={{ fontSize: 28 }}>Make every word count</WordReveal>;
+}
+```
+
+The timeline uses **seconds**: `stagger(0.04)` starts visible words 40ms apart. Motion `duration` uses **milliseconds**: each token animates for 420ms after its delay. Whitespace keeps its layout space without taking a delay slot. The accessibility policy exposes the complete phrase once and shows the final state when reduced motion is enabled.
+
+## Reveal actual rendered lines
+
+<MotionDemo id="line-reveal" />
+
+Use `overlayText()` when width and font settings should determine the animated lines. This renderer owns line measurement, so omit `.split(...)`.
+
+```tsx
+import {
+  defineTextMotion,
+  lineReveal,
+  overlayText,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+
+const LineTitle = defineTextMotion()
+  .layout(overlayText())
+  .timeline(stagger(0.08))
+  .effect(lineReveal({ y: 18 }))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .component();
+
+export function ResponsiveTitle() {
+  return (
+    <LineTitle style={{ fontSize: 32, lineHeight: 40, maxWidth: 320 }}>
+      Motion follows the lines your layout creates
+    </LineTitle>
+  );
+}
+```
+
+`lines()` is different: it splits only explicit newline characters and does not measure wrapping.
+
+## Next steps
+
+- Learn how [recipes](../usage/recipes.mdx) compose and how to customize [presets](../usage/presets.mdx).
+- Add [playback controls or external progress](../usage/playback.mdx).
+- Compare [renderers](../../api/renderers.mdx), [effects](../../api/effects.mdx), and [component props](../../api/component-props.md).
diff --git a/docs/docs/en/guide/usage/_meta.json b/docs/docs/en/guide/usage/_meta.json
new file mode 100644
index 0000000..23b38b6
--- /dev/null
+++ b/docs/docs/en/guide/usage/_meta.json
@@ -0,0 +1 @@
+["recipes", "presets", "playback", "accessibility", "segmentation", "performance", "examples"]
diff --git a/docs/docs/en/guide/usage/accessibility.md b/docs/docs/en/guide/usage/accessibility.md
new file mode 100644
index 0000000..7488ef9
--- /dev/null
+++ b/docs/docs/en/guide/usage/accessibility.md
@@ -0,0 +1,59 @@
+# Accessibility
+
+Text Motion treats animated token nodes as decoration. By default, the parent exposes the complete phrase as one accessible label and the individual animated nodes are hidden from accessibility tools. A screen reader should read the phrase once, rather than announcing each word or character.
+
+## Parent-label policy
+
+`parentLabelPolicy(options?)` configures this behavior for a recipe. Its only option is `reducedMotion`.
+
+| Option | Default | Meaning |
+| --- | --- | --- |
+| `reducedMotion` | `'system'` | Uses Reanimated's system reduced-motion behavior for internal animations. |
+| `reducedMotion: 'final-state'` | Opt-in | When system reduced motion is enabled, renders the final visual state immediately. |
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  parentLabelPolicy,
+  rise,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const AccessibleTitle = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .effect(fade().and(rise({ y: 10 })))
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Title() {
+  return (
+    <AccessibleTitle accessibilityRole="header">
+      Motion that keeps the message readable
+    </AccessibleTitle>
+  );
+}
+```
+
+`'final-state'` does not disable motion for everyone. It skips to the final state when the device's reduced-motion setting is enabled. That visual state also takes priority over controls and external progress, so a Typewriter phrase remains fully readable even when the app's shared value is still `0`.
+
+With `nativeText()` and the default `'system'` policy, an external `progress` value remains app-owned. Configure its animation curve to respect the user's preference, or choose `'final-state'` when the rendered text must immediately show the complete result.
+
+`overlayText()` has an additional renderer-level fallback: whenever system reduced motion is enabled, it renders the original final paragraph instead of animated line overlays. This applies with either policy and with external progress, and does not change the app's shared value.
+
+Do not pass `reduceMotion` to `.motion()` options. Text Motion exposes reduced-motion behavior through `.accessibility(...)` instead.
+
+## Labels and text props
+
+The string child supplies the default accessible label. An explicit `accessibilityLabel` can describe text whose visual wording is abbreviated. Supported accessibility props also include `accessibilityHint`, `accessibilityRole`, `accessibilityState`, `accessibilityValue`, `accessibilityActions`, `accessibilityLanguage`, and `onAccessibilityAction`.
+
+`allowFontScaling` and `maxFontSizeMultiplier` are supported. Verify larger font scales and narrow widths in your app, especially for rendered-line motion. See [Component props](../../api/component-props.md) for the complete prop contract and [Renderers](../../api/renderers.mdx) for layout differences.
+
+## Check in your app
+
+- Read the phrase using VoiceOver and TalkBack; confirm that decorative words and characters are not announced separately.
+- Enable reduced motion and check the initial frame, replay, reset, and externally controlled states.
+- Check your supported font scales, languages, widths, and contrast in the surrounding UI.
+- Keep essential information readable independently of the decorative motion. Typewriter does not emit per-character announcements.
diff --git a/docs/docs/en/guide/usage/examples.mdx b/docs/docs/en/guide/usage/examples.mdx
new file mode 100644
index 0000000..8e50f6f
--- /dev/null
+++ b/docs/docs/en/guide/usage/examples.mdx
@@ -0,0 +1,171 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# Examples
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+These examples use the current public API. Run them in a React Native app after [installation](../getting-started/installation.md). Use each preview to inspect the motion and replay it alongside the code.
+
+## Start with a preset
+
+<MotionDemo id="editorial-rise" />
+
+Presets are recipe factories imported from the `/presets` subpath. Create the component once outside render.
+
+```tsx
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+
+const HeroTitle = editorialRise().component();
+
+export function Hero() {
+  return (
+    <HeroTitle style={{ fontSize: 32, fontWeight: '700' }}>
+      Design motion that feels native
+    </HeroTitle>
+  );
+}
+```
+
+See [Presets](./presets.mdx) for `softWave()` and `gentleEmphasis()`.
+
+## Word reveal with replay
+
+<MotionDemo id="controls" />
+
+```tsx
+import { Button, View } from 'react-native';
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  useTextMotionControls,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const WordReveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade().and(rise({ y: 10 })))
+  .motion({ kind: 'timing', options: { duration: 360 } })
+  .component();
+
+export function ReplayExample() {
+  const controls = useTextMotionControls();
+
+  return (
+    <View>
+      <WordReveal controls={controls}>A little motion, word by word.</WordReveal>
+      <Button title="Replay" onPress={controls.replay} />
+    </View>
+  );
+}
+```
+
+`stagger(0.04)` sets starts 40ms apart; `duration: 360` controls each token's motion in milliseconds. Mount autoplay remains enabled with controls. See [Playback](./playback.mdx) for external progress and the full command set.
+
+## Reveal rendered lines
+
+<MotionDemo id="line-reveal" />
+
+Use native rendered lines when a title should wrap with the available width. Do not add a splitter to this recipe.
+
+```tsx
+import { View } from 'react-native';
+import {
+  defineTextMotion,
+  lineReveal,
+  overlayText,
+  parentLabelPolicy,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+
+const LineTitle = defineTextMotion()
+  .layout(overlayText())
+  .timeline(stagger(0.08))
+  .effect(lineReveal({ y: 18 }))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function RenderedLinesExample() {
+  return (
+    <View style={{ width: 280 }}>
+      <LineTitle style={{ fontSize: 32, lineHeight: 40, fontWeight: '700' }}>
+        Let the title follow the lines your layout actually renders
+      </LineTitle>
+    </View>
+  );
+}
+```
+
+`overlayText()` measures the paragraph after width, font, font scale, and shaping are applied. `lines()` only splits explicit newline characters. See [Renderers](../../api/renderers.mdx).
+
+## Keep progress while the paragraph reflows
+
+<MotionDemo id="width-reflow" />
+
+The iOS recording uses a long English paragraph with no explicit newlines. In the native example, **Narrow** and **Wide** switch between React Native layout widths of `220` and `320`. Progress controls hold `progress` at `0.5` across the width change, then replay at each width so you can inspect the masks against the newly measured source paragraph.
+
+## Typewriter with fixed layout
+
+<MotionDemo id="typewriter" />
+
+```tsx
+import { Button, View } from 'react-native';
+import {
+  defineTextMotion,
+  graphemes,
+  nativeText,
+  parentLabelPolicy,
+  stagger,
+  typewriter,
+  useTextMotionControls,
+} from '@react-native-motion-kit/text-motion';
+
+const TypewriterText = defineTextMotion()
+  .split(graphemes())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(typewriter())
+  .motion({ kind: 'timing', options: { duration: 0 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Greeting() {
+  const controls = useTextMotionControls();
+
+  return (
+    <View>
+      <TypewriterText controls={controls}>Hello, 한글! 👩🏽‍💻</TypewriterText>
+      <Button title="Replay" onPress={controls.replay} />
+      <Button title="Reset" onPress={controls.reset} />
+      <Button title="Stop" onPress={controls.stop} />
+    </View>
+  );
+}
+```
+
+The complete phrase reserves its space from the start. Each visible token is revealed at its timeline start; spaces and hard newlines keep their space without taking a delay slot. `duration: 0` makes the per-token reveal instant. Typewriter requires `nativeText()` and does not provide a cursor, streaming, or exact single-`Text` wrapping.
+
+For a different phrase that must type from the beginning, remount it with a new React `key`. Appending text is not a streaming API. See [Effects](../../api/effects.mdx) for composition and [Segmentation](./segmentation.md) for grapheme fallback limits.
+
+## Run the repository example
+
+From the repository root, use the pinned Node and pnpm versions in `.nvmrc` and `package.json`:
+
+```sh
+pnpm install
+pnpm example start
+# Or build and launch the native app:
+pnpm example ios
+pnpm example android
+# Optional browser development:
+pnpm example web
+```
+
+Native build commands require the platform's normal development tools. Browser rendering is useful for inspection but is not evidence of iOS or Android layout and performance.
+
+The example groups demos under **Presets**, **Splitters**, **Effects**, **Timelines**, **Layout**, and **Playback**. Try **Line Reveal**, **Typewriter Controls**, **Controlled Progress**, and **Renderer Performance** to inspect the corresponding APIs. See [Performance](./performance.md) for how to record measurements.
diff --git a/docs/docs/en/guide/usage/performance.md b/docs/docs/en/guide/usage/performance.md
new file mode 100644
index 0000000..90a34ce
--- /dev/null
+++ b/docs/docs/en/guide/usage/performance.md
@@ -0,0 +1,41 @@
+# Performance
+
+Text Motion is intended for short, high-value UI text: titles, labels, onboarding copy, and concise product copy. Performance depends on the number of animated units, effects, simultaneous components, device, and playback mode. This documentation does not promise an FPS target or a universal safe character count.
+
+## Choose the unit deliberately
+
+`nativeText()` uses an animated `View` container with an inner `Text` for each animated token. Static tokens remain plain text. This makes token transforms visible, but a grapheme split can create many more animated units than a word split.
+
+- Prefer `words()` when whole-word motion communicates the intent.
+- Use `graphemes()` or `typewriter()` for short character-level reveals and measure larger workloads.
+- Keep recipe components outside render. Replay existing components with controls instead of repeatedly remounting them solely to restart motion.
+- Test shared controls with the actual number of mounted rows: one command broadcasts to all attached components.
+- Use `overlayText()` when the motion should follow rendered lines. It measures native text and renders clipped paragraph copies per line; fewer motion units alone do not establish that it will be faster for your layout.
+
+See [Renderers](../../api/renderers.mdx) for the layout tradeoffs and [Playback](./playback.mdx) for command and progress ownership.
+
+## Profile the example app
+
+Run the repository example on the platform you want to measure. See [Examples](./examples.mdx) for commands.
+
+Open **Playback → Renderer Performance**. The probe includes word and grapheme workloads, Typewriter, repeated replay, shared rows, and externally driven progress. **Playback → Controls Stress** provides additional command fan-out cases. **Layout → Line Reveal** and **Layout → Line Layout Probe** help inspect width, alignment, font-scale, hard-newline, and language behavior.
+
+The case labels `normal`, `caution`, and `stress` describe probe workloads. They are not measured performance grades or supported token limits. Token/node estimates in the UI are diagnostics, not a public implementation contract.
+
+Use a real FPS/profiling source such as React Native Perf Monitor, Xcode Instruments, Android Studio Profiler, or Flashlight. Record device and OS, platform, build mode, text/splitter, effect, number of components and motion units, playback mode, and visible jank alongside the measurement. Development and simulator results should be identified as such.
+
+## Report evidence consistently
+
+| Status | Required evidence |
+| --- | --- |
+| `measured` | The same case family has both iOS and Android evidence. |
+| `provisional` | Only one platform was checked, or evidence is limited to simulator/emulator/development mode. |
+| `unknown` | That case family has not been measured. |
+
+This site does not claim that a workload has been measured unless platform evidence accompanies that result.
+
+If normal title and label workloads are smooth, keep the default renderer and document the boundary for heavier text. If normal workloads jank, investigate renderer costs before adding more effects. A failing grapheme stress case alone does not prove that ordinary word-based headings need a different renderer.
+
+## Validate layout as well as frames
+
+`nativeText()` trades exact single-`Text` shaping and wrapping for per-token transforms. `overlayText()` follows native rendered lines but should still be checked with the fonts, scale, width, alignment, and scripts your app uses. Frame rate cannot establish correct wrapping, accessible reading order, or reduced-motion behavior. See [Segmentation](./segmentation.md) and [Accessibility](./accessibility.md).
diff --git a/docs/docs/en/guide/usage/playback.mdx b/docs/docs/en/guide/usage/playback.mdx
new file mode 100644
index 0000000..8d0db46
--- /dev/null
+++ b/docs/docs/en/guide/usage/playback.mdx
@@ -0,0 +1,154 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# Playback
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+Choose who owns playback: the component, an event, or an app-owned Reanimated shared value.
+
+| Mode | Input | Playback owner |
+| --- | --- | --- |
+| Autoplay | No playback prop | Text Motion starts playback when inputs change. |
+| Commands | `controls={controls}` | Your app sends commands; Text Motion executes the recipe. |
+| External progress | `progress={progress}` | Your app owns the value and its animation curve. |
+
+## Autoplay and text updates
+
+<MotionDemo id="autoplay" />
+
+On mount, visible animated tokens play from their initial styles to their final styles. Passing `controls` keeps this mount autoplay; it does not make a component wait for its first command.
+
+- Rerendering the same text with the same recipe preserves playback already in progress.
+- Changing text replays the affected token animations, including replacements with the same token shape.
+- Changing effective effects, timing, or motion configuration resets affected tokens and uses the new configuration. Function-valued motion options, such as easing functions, are reference-sensitive; reuse their references when playback should continue.
+- Whitespace and static tokens keep their layout but do not animate or consume a motion index.
+
+Text changes are enter-only. There is no exit animation, crossfade, or old/new token transition. In external-progress mode, new text uses the current shared value instead of starting autoplay. Commands always target the currently rendered text.
+
+Create recipe components outside render so React can preserve their identity. See [Recipes](./recipes.mdx).
+
+## Event-driven controls
+
+<MotionDemo id="controls" />
+
+`useTextMotionControls()` returns a stable command channel. Pass it explicitly to each component that should receive commands.
+
+```tsx
+import { Button, View } from 'react-native';
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  useTextMotionControls,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const Reveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade().and(rise({ y: 12 })))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .component();
+
+export function Headlines() {
+  const controls = useTextMotionControls();
+
+  return (
+    <View>
+      <Reveal controls={controls}>A title with shared playback</Reveal>
+      <Reveal controls={controls}>A subtitle with the same command channel</Reveal>
+      <Button title="Play" onPress={controls.play} />
+      <Button title="Replay" onPress={controls.replay} />
+      <Button title="Reset" onPress={controls.reset} />
+      <Button title="Stop" onPress={controls.stop} />
+    </View>
+  );
+}
+```
+
+| Command | Behavior |
+| --- | --- |
+| `play()` | Plays from the current progress toward the final state. |
+| `replay()` | Resets and plays again with the recipe timeline and motion configuration. |
+| `reset()` | Cancels playback and returns to the initial state. |
+| `stop()` | Cancels playback and keeps the current visual state. |
+
+Commands broadcast to every mounted component attached to that controls object; each uses its own recipe. Commands are not a stored playback state or a queue for future mounts. Components unsubscribe when detached or unmounted.
+
+`stop()` followed by `play()` is not a precise pause/resume API and does not promise the original remaining schedule. Use `replay()` for a complete restart. With the explicit reduced-motion final-state policy active, the final visible state takes priority over reset and replay.
+
+Use controls for buttons, screen-focus events wired by your app, or onboarding steps. There is no provider/context playback API or public component-ref playback API.
+
+## App-owned progress
+
+<MotionDemo id="progress" />
+
+Use a Reanimated `SharedValue<number>` when text should follow another animation, a scroll value, or a gesture value your app already owns.
+
+```tsx
+import { Button, View } from 'react-native';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const ProgressReveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.08))
+  .effect(fade().and(rise({ y: 12 })))
+  .component();
+
+export function ProgressExample() {
+  const progress = useSharedValue(0);
+
+  return (
+    <View>
+      <ProgressReveal progress={progress}>
+        Progress drives the whole phrase
+      </ProgressReveal>
+      <Button
+        title="Play"
+        onPress={() => {
+          progress.value = withTiming(1, { duration: 720 });
+        }}
+      />
+      <Button title="Reset" onPress={() => { progress.value = 0; }} />
+    </View>
+  );
+}
+```
+
+`0` renders initial styles and `1` renders final styles. Finite values outside that range are clamped; non-finite values are treated as `0`. Passing `progress` disables internal autoplay and ignores the recipe's `.motion()` configuration for that instance. Set duration and easing where you update the shared value.
+
+The value represents the whole effect timeline. For a token delay `d` and largest token delay `D` in seconds, the current mapping uses a fixed per-token span of `1.0`:
+
+```txt
+localProgress = clamp(progress * (D + 1) - d, 0, 1)
+```
+
+Timelines still shape when each token starts. Whitespace does not take a delay slot. This is not a per-token duration API.
+
+### Typewriter progress
+
+<MotionDemo id="typewriter-progress" />
+
+The preview shows **timeline progress** and **visible characters** separately. The character count excludes spaces and includes punctuation and emoji; it updates during playback and when you move progress backward.
+
+`typewriter()` shows a token once its local progress is greater than zero. Progress is **not the fraction of characters visible**: for ten visible characters with `stagger(0.05)`, all are visible just after about `0.310345`. Moving progress backward across a start threshold hides that character again. Use a linear external timing curve for evenly spaced threshold crossings in time.
+
+The effect preserves the completed phrase's layout. It does not add a cursor or provide text streaming. See [Effects](../../api/effects.mdx) and [Examples](./examples.mdx).
+
+## Boundaries
+
+`controls` and `progress` are mutually exclusive in TypeScript and at runtime. There are no first-class `pause`, `seek`, `reverse`, scroll, gesture, in-view, or screen-focus drivers. Integrate your own events with controls or your own continuous values with progress.
+
+For reduced-motion behavior, see [Accessibility](./accessibility.md). For supported text and accessibility props, see [Component props](../../api/component-props.md).
diff --git a/docs/docs/en/guide/usage/presets.mdx b/docs/docs/en/guide/usage/presets.mdx
new file mode 100644
index 0000000..6b0b49a
--- /dev/null
+++ b/docs/docs/en/guide/usage/presets.mdx
@@ -0,0 +1,87 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# Presets
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+Presets are recipe factories from `@react-native-motion-kit/text-motion/presets`. Each factory returns a builder with words, `nativeText()`, a timeline, and effects already selected. Call `.component()` to create a component, or customize the builder first.
+
+```tsx
+import {
+  editorialRise,
+  gentleEmphasis,
+  softWave,
+} from '@react-native-motion-kit/text-motion/presets';
+
+const HeroTitle = editorialRise().component();
+const ProductCopy = softWave().component();
+const Label = gentleEmphasis().component();
+
+export function ProductHeader() {
+  return (
+    <>
+      <HeroTitle>Give your words a little motion</HeroTitle>
+      <ProductCopy>Reusable animation for short product copy</ProductCopy>
+      <Label>New</Label>
+    </>
+  );
+}
+```
+
+## Built-in recipes
+
+| Factory | Timeline | Effects |
+| --- | --- | --- |
+| `editorialRise()` | `stagger(0.032, { from: 'center' })` | `rise({ y: 14 })`, `fade()`, `scale({ from: 0.98 })` |
+| `softWave()` | `wave({ amplitude: 0.06, wavelength: 5 })` | `fade()`, `rise({ y: 8 })` |
+| `gentleEmphasis()` | `stagger(0.024)` | `pulse({ scale: 1.06 })`, `fade()` |
+
+All three factories take no arguments. Their delay values use seconds. They do not select a custom `.motion()` or accessibility policy, so the renderer defaults apply unless you configure them.
+
+`editorialRise()` suits titles that should unfold from the center. `softWave()` varies word start times for a softer rhythm. `gentleEmphasis()` briefly scales tokens near the midpoint and returns to the final scale; it does not loop.
+
+## Preview the presets
+
+### `editorialRise()`
+
+<MotionDemo id="editorial-rise" />
+
+### `softWave()`
+
+<MotionDemo id="soft-wave" />
+
+### `gentleEmphasis()`
+
+<MotionDemo id="gentle-emphasis" />
+
+## Customize a preset
+
+```tsx
+import {
+  parentLabelPolicy,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+
+const base = editorialRise();
+
+const StandardTitle = base.component();
+const SlowerTitle = base
+  .timeline(stagger(0.06, { from: 'start' }))
+  .motion({ kind: 'timing', options: { duration: 500 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Titles() {
+  return (
+    <>
+      <StandardTitle>Centered by default</StandardTitle>
+      <SlowerTitle>A slower entrance from the start</SlowerTitle>
+    </>
+  );
+}
+```
+
+Builders are immutable, so the customized variation does not change `StandardTitle`. A later `.timeline(...)` replaces the preset timeline. A later `.effect(...)` adds to its effects instead of replacing them. Start with `defineTextMotion()` when you want a different effect set or a rendered-line recipe with `overlayText()`.
+
+Presets use the same [component props](../../api/component-props.md) and [playback inputs](./playback.mdx) as custom recipes. Keep generated components outside render functions and pass text as a plain string child.
diff --git a/docs/docs/en/guide/usage/recipes.mdx b/docs/docs/en/guide/usage/recipes.mdx
new file mode 100644
index 0000000..fb5f901
--- /dev/null
+++ b/docs/docs/en/guide/usage/recipes.mdx
@@ -0,0 +1,110 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# Recipes
+
+Live previews run the actual library through React Native Web. Examples that need native line measurements use an iOS recording.
+
+`defineTextMotion()` starts an immutable builder. Each chain method returns a new builder, so you can share a base recipe and create variations without changing the base.
+
+## Build a component
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const base = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade());
+
+const SoftTitle = base
+  .motion({ kind: 'timing', options: { duration: 360 } })
+  .component();
+
+const RisingTitle = base
+  .effect(rise({ y: 12 }))
+  .motion({ kind: 'spring', options: { damping: 16, stiffness: 140 } })
+  .component();
+
+export function Titles() {
+  return (
+    <>
+      <SoftTitle>A soft entrance</SoftTitle>
+      <RisingTitle>A little more movement</RisingTitle>
+    </>
+  );
+}
+```
+
+Define generated components at module scope. Calling `.component()` during render creates a new component type and can cause remounts and unintended autoplay.
+
+## What each stage controls
+
+| Stage | Responsibility |
+| --- | --- |
+| `.split(...)` | Source token boundaries for `nativeText()` |
+| `.layout(...)` | Renderer and its supported motion units/effects |
+| `.timeline(...)` | Per-token start delays, in seconds |
+| `.effect(...)` | Add an effect; repeated calls accumulate effects |
+| `.motion(...)` | Internal autoplay and controls-driven timing or spring playback |
+| `.accessibility(...)` | Parent label, decorative tokens, and reduced-motion policy |
+| `.component()` | Produce a React component that accepts a string child |
+| `.recipe()` | Read a recipe configuration snapshot without creating a component |
+
+Calling `.split()`, `.layout()`, `.timeline()`, `.motion()`, or `.accessibility()` again replaces that setting on the new builder. `.effect()` adds to the existing effects instead. `.recipe()` can be used before layout; treat its returned configuration as a snapshot rather than mutating it to update a component.
+
+## Choose a renderer first
+
+TypeScript exposes `.component()` only after `.layout(...)` selects a renderer. Choose the renderer before `.effect(...)` so its capability constraints guide effect selection.
+
+With `nativeText()`, an explicit splitter chooses words, graphemes, custom tokens, or authored newline units. Without a splitter, the entire input is one source token. The default is not word splitting.
+
+With `overlayText()`, the renderer derives units from measured native lines. Do not add `.split(...)`, even if you want to animate lines. The type system prevents the incompatible chain and runtime checks also reject it.
+
+## Compose compatible effects
+
+<MotionDemo id="compose" />
+
+Both `.effect(fade().and(rise()))` and `.effect(fade()).effect(rise())` add fade and rise behavior. Built-in `fade`, `rise`, `slide`, `scale`, `pulse`, and `shake` work with both renderers. `typewriter()` requires `nativeText()`; `lineReveal()` requires `overlayText()`.
+
+Splitters, timelines, effects, and renderers are opaque public handles. Pass them to the builder rather than accessing internal descriptors. The root API does not export custom effect factories or a renderer-extension SDK.
+
+## Configure playback
+
+<MotionDemo id="spring" />
+
+```tsx
+import { defineTextMotion, fade, nativeText } from '@react-native-motion-kit/text-motion';
+
+const TimedText = defineTextMotion()
+  .layout(nativeText())
+  .effect(fade())
+  .motion({ kind: 'timing', options: { duration: 400 } })
+  .component();
+
+const SpringText = defineTextMotion()
+  .layout(nativeText())
+  .effect(fade())
+  .motion({ kind: 'spring', options: { damping: 16, stiffness: 140 } })
+  .component();
+
+export function Message() {
+  return (
+    <>
+      <TimedText>The whole phrase fades together</TimedText>
+      <SpringText>The same unit follows a spring</SpringText>
+    </>
+  );
+}
+```
+
+Motion options follow the relevant Reanimated timing or spring configuration, except `reduceMotion`, which belongs to the accessibility policy. Timeline delays use seconds; timing `duration` uses milliseconds. Function-valued options such as easing are compared by reference: reuse the same function when rerenders should preserve playback.
+
+Passing `progress` to an instance gives the app ownership of playback and bypasses `.motion()` for that instance. Use `controls` for discrete commands while retaining recipe-owned playback. See [playback](./playback.mdx) and the [recipe API](../../api/recipe.mdx).
diff --git a/docs/docs/en/guide/usage/segmentation.md b/docs/docs/en/guide/usage/segmentation.md
new file mode 100644
index 0000000..4002ab8
--- /dev/null
+++ b/docs/docs/en/guide/usage/segmentation.md
@@ -0,0 +1,53 @@
+# Text segmentation
+
+Choose token boundaries before choosing their motion. A JavaScript code unit is not necessarily a visible character: emoji, combining accents, and decomposed Hangul can contain several code points.
+
+## Built-in splitting
+
+| Splitter | Unit | When to use it |
+| --- | --- | --- |
+| `words()` | Word, punctuation, and spacing tokens | Readable word-based headings and product copy. |
+| `graphemes()` | Grapheme-aware tokens | Short character-level reveals and Typewriter. |
+| `lines()` | Explicit newline-separated source units | Experimental hard-newline motion; it does not detect wrapping. |
+| `custom(fn)` | App-defined strings or token objects | Product-specific boundaries or a different segmentation implementation. |
+
+Whitespace keeps its layout space without consuming an animation delay slot. Punctuation can be a visible animated unit. See [Splitters](../../api/splitters.mdx) for signatures and token metadata.
+
+For automatic wrapping based on width and fonts, use `overlayText()` without `.split(...)`. See [Renderers](../../api/renderers.mdx).
+
+## `Intl.Segmenter` and fallback behavior
+
+`words()` and `graphemes()` use `Intl.Segmenter` when the runtime provides it. React Native/Hermes availability varies, so the package also includes a small fallback tokenizer. Your app does not need a polyfill merely to avoid a startup crash when `Intl.Segmenter` is absent.
+
+The fallback preserves decomposed Hangul syllable sequences such as `한`, including relevant precomposed-Hangul/Jamo boundaries, without normalizing or rewriting the input. It handles common combining marks and emoji sequences, but it is not a complete implementation of Unicode grapheme or locale-aware word-boundary rules. Some Indic conjuncts, such as `क्ष`, can still split; scripts without spaces may need more precise word segmentation.
+
+If exact boundaries matter, provide an `Intl.Segmenter` implementation in your app entrypoint before rendering Text Motion, or use `custom()` with an app-chosen tokenizer. An app may choose a polyfill such as `@formatjs/intl-segmenter`; it is not installed by this library.
+
+## Preserve the original text
+
+Custom splitters should preserve spacing and token order. For example, a product may choose whitespace-delimited units while keeping each whitespace run:
+
+```tsx
+import {
+  custom,
+  defineTextMotion,
+  fade,
+  nativeText,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+
+const PhraseReveal = defineTextMotion()
+  .split(custom((input) => input.match(/\S+|\s+/gu) ?? []))
+  .layout(nativeText())
+  .timeline(stagger(0.06))
+  .effect(fade())
+  .component();
+
+export function Phrase() {
+  return <PhraseReveal>Keep the original spacing.</PhraseReveal>;
+}
+```
+
+This example groups punctuation with its neighboring non-whitespace text. It is a deliberate app rule, not full linguistic word segmentation. `custom()` also accepts token objects with explicit source ranges and metadata when that information matters.
+
+Correct segmentation alone does not make per-token rendering equivalent to a single native `Text`. Shaping, ligatures, bidirectional text, wrapping, and complex scripts need visual verification with the chosen renderer. See [Performance](./performance.md) for the example app's layout probes.
diff --git a/docs/docs/en/index.md b/docs/docs/en/index.md
new file mode 100644
index 0000000..917fbc7
--- /dev/null
+++ b/docs/docs/en/index.md
@@ -0,0 +1,37 @@
+---
+pageType: home
+
+hero:
+  name: React Native Text Motion
+  text: Give your words a rhythm.
+  tagline: Compose reusable text animations with splitters, renderers, timelines, and effects.
+  actions:
+    - theme: brand
+      text: Quick Start
+      link: /guide/getting-started/quick-start.html
+    - theme: alt
+      text: Explore Examples
+      link: /guide/usage/examples.html
+  image:
+    src: /logo.png
+    alt: React Native Motion Kit logo
+features:
+  - title: Start with a preset
+    details: Turn editorialRise, softWave, or gentleEmphasis into a reusable component in a few lines.
+    icon: ✨
+  - title: Compose your own recipe
+    details: Choose how text splits, how tokens render, when they start, and how they move.
+    icon: 🧩
+  - title: Reveal rendered lines
+    details: Use overlayText and lineReveal to animate the lines React Native actually lays out.
+    icon: 📐
+  - title: Type without shifting layout
+    details: Reveal graphemes while preserving the completed phrase's token layout.
+    icon: ⌨️
+  - title: Own playback
+    details: Replay from events with explicit controls or drive motion from your Reanimated shared value.
+    icon: 🎛️
+  - title: Keep text readable
+    details: Expose the full phrase once to screen readers and choose a reduced-motion policy.
+    icon: ♿
+---
diff --git a/docs/docs/ko/_meta.json b/docs/docs/ko/_meta.json
new file mode 100644
index 0000000..f1b2c2e
--- /dev/null
+++ b/docs/docs/ko/_meta.json
@@ -0,0 +1,4 @@
+[
+  { "type": "dir", "name": "guide", "label": "가이드" },
+  { "type": "dir", "name": "api", "label": "API 레퍼런스" }
+]
diff --git a/docs/docs/ko/_nav.json b/docs/docs/ko/_nav.json
new file mode 100644
index 0000000..4cdca4a
--- /dev/null
+++ b/docs/docs/ko/_nav.json
@@ -0,0 +1,9 @@
+[
+  {
+    "text": "가이드",
+    "link": "/guide/getting-started/overview.html",
+    "activeMatch": "/guide/"
+  },
+  { "text": "API", "link": "/api/recipe.html", "activeMatch": "/api/" },
+  { "text": "예제", "link": "/guide/usage/examples.html" }
+]
diff --git a/docs/docs/ko/api/_meta.json b/docs/docs/ko/api/_meta.json
new file mode 100644
index 0000000..b1a2fb9
--- /dev/null
+++ b/docs/docs/ko/api/_meta.json
@@ -0,0 +1,32 @@
+[
+  {
+    "type": "file",
+    "name": "recipe",
+    "label": "레시피"
+  },
+  {
+    "type": "file",
+    "name": "splitters",
+    "label": "분할기"
+  },
+  {
+    "type": "file",
+    "name": "renderers",
+    "label": "렌더러"
+  },
+  {
+    "type": "file",
+    "name": "timelines",
+    "label": "타임라인"
+  },
+  {
+    "type": "file",
+    "name": "effects",
+    "label": "효과"
+  },
+  {
+    "type": "file",
+    "name": "component-props",
+    "label": "컴포넌트 Props"
+  }
+]
diff --git a/docs/docs/ko/api/component-props.md b/docs/docs/ko/api/component-props.md
new file mode 100644
index 0000000..8757a03
--- /dev/null
+++ b/docs/docs/ko/api/component-props.md
@@ -0,0 +1,85 @@
+# 컴포넌트 Props
+
+레시피의 `.component()`는 `TextMotionComponent`를 반환합니다. 두 기본 렌더러는 `TextMotionComponentProps`를 공통으로 사용합니다.
+
+## 텍스트·스타일
+
+| Prop | 타입 | 동작 |
+| --- | --- | --- |
+| `children` | `string` | 필수 일반 문자열. 중첩 요소·배열·서식 있는 텍스트는 지원하지 않습니다. |
+| `style` | `StyleProp<TextStyle>` | 텍스트 스타일. `nativeText()`는 토큰 텍스트에, `overlayText()`는 측정할 문단에 적용합니다. |
+| `testID` | `string` | 부모 컨테이너를 식별합니다. |
+| `nativeID` | `string` | 부모 컨테이너에 전달합니다. |
+| `allowFontScaling` | React Native `TextProps['allowFontScaling']` | 텍스트 렌더링에 전달합니다. |
+| `maxFontSizeMultiplier` | React Native `TextProps['maxFontSizeMultiplier']` | 텍스트 렌더링에 전달합니다. |
+
+TypeScript뿐 아니라 런타임에서도 문자열을 요구합니다. 명시적 줄바꿈은 `{'첫 번째 줄\n두 번째 줄'}` 같은 문자열 표현식으로 전달하세요. 모든 `Text`·`View` props가 전달된다고 가정하지 말고, 바깥 배치 제약은 감싸는 `View`에 지정하세요.
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  words,
+} from '@react-native-motion-kit/text-motion';
+import { View } from 'react-native';
+
+const Title = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .effect(fade())
+  .component();
+
+export function Heading() {
+  return (
+    <View style={{ maxWidth: 320 }}>
+      <Title
+        testID="heading"
+        allowFontScaling
+        maxFontSizeMultiplier={1.5}
+        style={{ fontSize: 28, lineHeight: 36, color: '#234' }}
+      >
+        읽기 좋은 모션을 위한 공간
+      </Title>
+    </View>
+  );
+}
+```
+
+## 재생
+
+| Prop | 타입 | 동작 |
+| --- | --- | --- |
+| `controls` | `TextMotionControls` | 이벤트로 `play`, `replay`, `reset`, `stop`을 실행합니다. 내부 재생은 레시피의 `.motion()` 설정을 사용합니다. |
+| `progress` | Reanimated `SharedValue<number>` | 앱이 소유한 전체 텍스트 진행률입니다. 해당 인스턴스는 내부 자동 재생과 `.motion()`으로 움직이지 않습니다. |
+
+**`controls`와 `progress`는 함께 사용할 수 없습니다.** TypeScript에서 조합을 거부하고 두 렌더러 모두 런타임에서도 오류를 던집니다. 둘 다 없으면 애니메이션 콘텐츠는 마운트 시 자동 재생합니다.
+
+`progress`는 정규화된 값으로 `0`은 초기 상태, `1`은 최종 상태입니다. 범위를 벗어난 유한한 값은 보정하고, 유한하지 않은 값은 `0`으로 처리합니다. 타임라인 지연으로 단위별 진행률에 매핑하므로 표시된 문자 비율이 아닙니다. 전체 controls·progress 예제는 [재생 제어](../guide/usage/playback.mdx)를 참고하세요.
+
+## 접근성
+
+지원하는 접근성 props는 다음과 같습니다.
+
+- `accessibilityLabel`
+- `accessibilityHint`
+- `accessibilityRole`
+- `accessibilityState`
+- `accessibilityValue`
+- `accessibilityActions`
+- `accessibilityLanguage`
+- `onAccessibilityAction`
+
+기본 부모 레이블은 원문 전체이며, `accessibilityLabel`로 덮어쓸 수 있습니다. 부모의 접근 가능 여부와 장식용 노드 숨김은 정책에서 정합니다. `accessible` prop을 넘기는 대신 `.accessibility(parentLabelPolicy(...))`로 설정하세요. [접근성](../guide/usage/accessibility.md)을 참고하세요.
+
+## 생명주기
+
+텍스트와 레시피가 같으면 일반적인 부모 리렌더에서 진행 중인 재생을 유지합니다. 텍스트 변경은 진입만 처리하며, 이전 텍스트를 종료 애니메이션·크로스페이드·토큰 비교를 위해 남겨 두지 않습니다. controls 모드에서 이후 명령은 현재 텍스트에 적용됩니다. 외부 progress 모드에서는 현재 공유 값이 새 텍스트의 상태를 결정합니다.
+
+효과·타임라인·모션 설정이 달라지면 해당 애니메이션이 초기화될 수 있습니다. 부모 리렌더에서 재생을 유지하려면 레시피 컴포넌트와 함수 형태의 모션 옵션 참조를 안정적으로 유지하세요.
+
+## 제한된 prop 범위
+
+이 컴포넌트는 React Native `Text` 전체를 대체하지 않습니다. `numberOfLines`, `ellipsizeMode`, `lineBreakMode`, `onTextLayout`, `selectable`, 텍스트 `onPress`, 중첩된 서식 텍스트는 현재 계약에 포함되지 않습니다. 상호작용과 외부 배치는 적절한 바깥 컴포넌트에 지정하세요.
+
+앱에서 타입을 사용할 수 있도록 루트에서 `TextMotionComponent`, `TextMotionComponentProps`, `TextMotionComponentTextProps`, `TextMotionComponentAccessibilityProps`를 내보냅니다. controls는 `useTextMotionControls()`와 공개 `TextMotionControls` 타입을 사용합니다. 공개 컴포넌트 ref나 context/provider 재생 API는 없습니다.
diff --git a/docs/docs/ko/api/effects.mdx b/docs/docs/ko/api/effects.mdx
new file mode 100644
index 0000000..0fc2503
--- /dev/null
+++ b/docs/docs/ko/api/effects.mdx
@@ -0,0 +1,151 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# 효과
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+효과는 각 모션 단위의 시각적 변화를 설명합니다. `@react-native-motion-kit/text-motion`에서 가져오고, 렌더러를 선택한 뒤 호환되는 효과를 `.effect(...)`에 전달하세요.
+
+## 팩터리와 기본값
+
+모든 옵션은 선택 사항이며 `typewriter()`는 옵션이 없습니다. 숫자 효과 입력은 모두 유한한 값이어야 합니다. 방향을 나타내는 오프셋은 음수도 가능합니다. 오프셋은 React Native 레이아웃 단위, 불투명도는 스칼라, 크기는 배율입니다.
+
+| 팩터리 | 옵션과 기본값 | 동작 | 렌더러 |
+| --- | --- | --- | --- |
+| `fade(options?)` | `from: 0`, `to: 1` | 불투명도를 `from`에서 `to`로 변경 | 둘 다 |
+| `rise(options?)` | `y: 12` | 아래쪽 `y` 오프셋에서 제자리로 이동 | 둘 다 |
+| `slide(options?)` | `x: 0`, `y: 12` | x/y 오프셋에서 제자리로 이동 | 둘 다 |
+| `scale(options?)` | `from: 0.96`, `to: 1` | 크기 배율 변경 | 둘 다 |
+| `pulse(options?)` | `scale: 1.04` | 중간 부근에서 커진 뒤 합성된 최종 크기로 복귀 | 둘 다 |
+| `shake(options?)` | `x: 4` | 가로 오프셋으로 흔들리는 듯한 진입 표현 | 둘 다 |
+| `lineReveal(options?)` | `y: 16`, `fromOpacity: 0` | 마스크 안에서 렌더링된 줄을 드러냄 | `overlayText()` |
+| `typewriter()` | 없음 | 로컬 progress가 양수가 될 때까지 토큰을 숨김 | `nativeText()` |
+
+`shake()`는 진입 오프셋이며 반복적인 진동을 만들지 않습니다. `pulse()`는 중간 지점의 강조 효과입니다. 시작·종료 크기를 바꾸려면 `scale()`을 사용하세요.
+
+루트에서 `FadeOptions`, `RiseOptions`, `SlideOptions`, `ScaleOptions`, `PulseOptions`, `ShakeOptions`, `LineRevealOptions`를 내보냅니다. 각 속성은 위 표의 옵션과 같습니다.
+
+## 효과별 미리보기
+
+각 데모에서 다시 재생해 시작 위치와 투명도, 크기 변화를 비교하세요.
+
+### `fade()`
+
+<MotionDemo id="fade" />
+
+### `rise()`
+
+<MotionDemo id="rise" />
+
+### `slide()`
+
+<MotionDemo id="slide" />
+
+### `scale()`
+
+<MotionDemo id="scale" />
+
+### `pulse()`
+
+<MotionDemo id="pulse" />
+
+### `shake()`
+
+<MotionDemo id="shake" />
+
+## `.and(...)`로 합성
+
+<MotionDemo id="compose" />
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  scale,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const HeroTitle = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(rise({ y: 14 }).and(fade()).and(scale({ from: 0.98 })))
+  .component();
+
+export function Heading() {
+  return <HeroTitle>작은 움직임으로 전하는 선명한 메시지</HeroTitle>;
+}
+```
+
+`.and(...)`는 합성된 `TextMotionEffect`를 반환합니다. `.effect(...)`를 여러 번 호출해도 효과가 누적됩니다. 변형 오프셋은 더해지고 크기 배율은 곱해지며, 불투명도를 설정하는 효과는 합성 순서대로 적용됩니다. 레시피를 조합할 때는 불투명도 효과를 하나로 명확하게 정하는 편이 좋습니다.
+
+효과는 렌더러가 제공하는 기능과 호환되어야 합니다. `lineReveal()`은 `nativeText()`에서, `typewriter()`는 `overlayText()`에서 사용할 수 없습니다. TypeScript가 조합을 검사하며 런타임에서도 호환되지 않는 효과를 거부합니다.
+
+## `lineReveal()`
+
+<MotionDemo id="line-reveal" />
+
+```tsx
+import {
+  defineTextMotion,
+  lineReveal,
+  overlayText,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+
+const HeroLines = defineTextMotion()
+  .layout(overlayText())
+  .timeline(stagger(0.08))
+  .effect(lineReveal({ y: 18, fromOpacity: 0 }))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .component();
+```
+
+분할기를 추가하지 마세요. 렌더러가 실제로 줄바꿈된 줄을 측정합니다. reveal 오프셋은 각 마스크 안의 문단 복사본을 움직이고, 불투명도는 줄 프레임에 적용됩니다. 함께 사용하는 `scale()`과 `pulse()`는 측정된 줄 프레임을 변형합니다. 배치·측정 동작은 [렌더러](./renderers.mdx)를 참고하세요.
+
+## `typewriter()`
+
+<MotionDemo id="typewriter" />
+
+완성된 배치를 유지하면서 문자를 드러낼 때 사용합니다. 분할기는 드러낼 단위, 타임라인은 시작 시점, `.motion()`은 시작 후의 움직임을 정합니다.
+
+```tsx
+import {
+  defineTextMotion,
+  graphemes,
+  nativeText,
+  parentLabelPolicy,
+  stagger,
+  typewriter,
+} from '@react-native-motion-kit/text-motion';
+
+const TypewriterText = defineTextMotion()
+  .split(graphemes())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(typewriter())
+  .motion({ kind: 'timing', options: { duration: 0 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Greeting() {
+  return <TypewriterText>안녕 세계! 👩🏽‍💻</TypewriterText>;
+}
+```
+
+처음부터 완성된 문장의 공간과 줄바꿈을 유지합니다. 보이는 그래핌은 40ms 간격의 지연 슬롯을 받으며, 공백과 명시적 줄바꿈은 공간을 유지하되 슬롯을 사용하지 않습니다. 문장 부호는 다른 보이는 문자처럼 슬롯을 사용합니다. 첫 문자는 첫 재생 갱신에서 나타나며, 실제 표시 시점은 기기 프레임을 따릅니다.
+
+`duration: 0`이면 자동 재생과 controls 모드에서 각 문자가 즉시 나타납니다. 나타난 뒤 움직이게 하려면 0보다 큰 지속 시간과 `typewriter().and(rise({ y: 6 }))` 같은 효과를 사용하세요. `fade()`를 합성하면 의도적으로 서서히 나타납니다. 표시 여부는 어느 합성 순서에서도 유지되며, `typewriter()`를 두 번 더해도 재생 시계가 추가되지 않습니다.
+
+다시 재생·초기화·정지는 [controls](../guide/usage/playback.mdx)를 사용하세요. `stop()`은 현재 상태를 유지하며, 이후 `play()`가 남은 타이핑 일정을 정확히 이어간다고 보장하지 않습니다. 새 문구를 처음부터 전부 타이핑하려면 새 React `key`로 다시 마운트하세요. 텍스트를 덧붙이는 동작은 스트리밍 API가 아닙니다.
+
+외부 `progress`에서 `0`은 애니메이션 문자를 숨기고 `1`은 최종 상태를 표시합니다. **progress는 표시된 문자 비율이 아니라 타임라인 진행률입니다.** 최대 지연을 `D`, 문자의 지연을 `d`라 하면 로컬 progress는 `clamp(progress × (D + 1) - d, 0, 1)`입니다. 이 값이 0보다 크면 문자가 보이며, 시작점을 지나 뒤로 되돌리면 다시 숨겨집니다. 외부 progress 모드에서는 `.motion()`을 무시합니다.
+
+이 효과는 원문 문자열을 늘리거나 지우지 않으며, 커서·단일 `Text`의 정확한 조형·스트리밍을 제공하지 않습니다. 짧은 UI 문구에 사용하고 큰 작업량은 직접 측정하세요.
+
+## 공개 범위
+
+효과 핸들은 `.and(...)`를 공개합니다. 내부 `name`, `options`, `requiredCapabilities` 필드는 공개 API가 아닙니다. 사용자 정의 효과 팩터리, `wipe`, `scramble`, Skia 효과는 현재 API에 포함되지 않습니다.
diff --git a/docs/docs/ko/api/recipe.mdx b/docs/docs/ko/api/recipe.mdx
new file mode 100644
index 0000000..e3a867d
--- /dev/null
+++ b/docs/docs/ko/api/recipe.mdx
@@ -0,0 +1,94 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# 레시피 API
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+공개 팩터리는 `@react-native-motion-kit/text-motion`에서 가져옵니다. 프리셋은 별도 경로인 `@react-native-motion-kit/text-motion/presets`에서 가져옵니다.
+
+## `defineTextMotion()`
+
+<MotionDemo id="compose" />
+
+레시피 빌더를 만듭니다. 각 설정 메서드는 새 빌더를 반환하므로, 기본 레시피를 재사용해도 앞서 만든 레시피는 바뀌지 않습니다.
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const base = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04));
+
+const FadeTitle = base.effect(fade()).component();
+const RisingTitle = base.effect(fade().and(rise({ y: 12 }))).component();
+
+export function Heading() {
+  return <RisingTitle>텍스트를 위한 모션</RisingTitle>;
+}
+```
+
+일반적인 리렌더에서 React 컴포넌트의 정체성이 유지되도록, 레시피 컴포넌트는 렌더 함수 밖에서 만드세요.
+
+## 빌더 메서드
+
+| 메서드 | 입력 | 동작 |
+| --- | --- | --- |
+| `.split(splitter)` | [분할기](./splitters.mdx) | 원문을 토큰으로 나눕니다. `overlayText()`에서는 생략합니다. |
+| `.layout(renderer)` | [렌더러](./renderers.mdx) | 텍스트 배치·렌더링 방식을 선택합니다. `.component()` 전에 필요합니다. |
+| `.timeline(timeline)` | [타임라인](./timelines.mdx) | 보이는 모션 단위별 시작 지연을 정합니다. |
+| `.effect(effect)` | 호환되는 [효과](./effects.mdx) | 효과를 추가합니다. 여러 번 호출하면 효과가 누적됩니다. |
+| `.motion(config)` | `TextMotionMotionConfig` | 자동 재생과 controls 기반 재생을 설정합니다. |
+| `.accessibility(policy)` | `TextMotionAccessibilityPolicy` | 부모 레이블과 모션 줄이기 동작을 설정합니다. |
+| `.recipe()` | 없음 | 설정 스냅샷을 반환합니다. 렌더러 선택 전에도 호출할 수 있습니다. |
+| `.component()` | 없음 | [텍스트 모션 props](./component-props.md)를 받는 React 컴포넌트를 만듭니다. |
+
+`.split()`, `.layout()`, `.timeline()`, `.motion()`, `.accessibility()`를 다시 호출하면 새 레시피에서 해당 설정이 교체됩니다. TypeScript가 렌더러 기능을 검사할 수 있도록 렌더러를 먼저 선택한 뒤 효과를 추가하세요. 렌더링된 줄을 사용하는 레시피에는 `.split(...)`을 지정할 수 없으며, 런타임에서도 이 조합을 거부합니다.
+
+`nativeText()`에서 분할기를 생략하면 문자열 전체가 하나의 토큰이 됩니다. 타임라인이 없으면 모든 애니메이션 단위가 함께 시작합니다. 효과가 없으면 시각 스타일이 바뀌지 않습니다.
+
+## `.motion(config)`
+
+<MotionDemo id="spring" />
+
+```tsx
+.motion({ kind: 'timing', options: { duration: 420 } })
+.motion({ kind: 'spring', options: { damping: 14, stiffness: 160 } })
+```
+
+`TextMotionMotionConfig`는 `kind`로 구분하는 유니온입니다.
+
+```ts
+type TextMotionMotionConfig =
+  | { kind: 'timing'; options?: TextMotionTimingOptions }
+  | { kind: 'spring'; options?: TextMotionSpringOptions };
+```
+
+`TextMotionTimingOptions`는 Reanimated의 `WithTimingConfig`, `TextMotionSpringOptions`는 `WithSpringConfig`를 따르며, 두 타입 모두 `reduceMotion`을 제외합니다. 모션 줄이기는 `.accessibility(...)`에서 설정합니다. 나머지 지원 옵션은 설치된 Reanimated 버전에 따릅니다. 숫자 모션 옵션은 유한한 값이어야 합니다.
+
+내부 애니메이션의 기본값은 **300ms timing**입니다. 타임라인 입력은 **초**, `duration`은 **밀리초** 단위입니다. `easing`처럼 함수인 옵션은 참조로 비교하므로, 리렌더에서 재생을 유지하려면 같은 함수를 재사용하세요.
+
+컴포넌트에 외부 `progress` 공유 값을 넘기면 내부 자동 재생을 사용하지 않고 해당 인스턴스의 `.motion()` 설정을 무시합니다. [재생 제어](../guide/usage/playback.mdx)를 참고하세요.
+
+## `.accessibility(parentLabelPolicy(options))`
+
+```tsx
+import { parentLabelPolicy } from '@react-native-motion-kit/text-motion';
+
+const policy = parentLabelPolicy({ reducedMotion: 'final-state' });
+```
+
+`ParentLabelPolicyOptions`의 옵션은 `reducedMotion?: 'system' | 'final-state'` 하나이며, 기본값은 `'system'`입니다. 반환되는 정책은 전체 문장을 부모 접근성 레이블로 노출하고 장식용 토큰 노드를 숨깁니다. 두 렌더러 모두 정책을 생략하면 `parentLabelPolicy()`를 사용합니다. 렌더러별 동작과 권장 사용법은 [접근성](../guide/usage/accessibility.md)을 참고하세요.
+
+## 공개 핸들과 타입
+
+`TextMotionSplitter`, `TextMotionRenderer`, `TextMotionTimeline`, `TextMotionEffect`는 공개 팩터리가 반환하는 불투명 핸들입니다. 빌더에 전달하고, 효과는 `.and(...)`로 합성하세요. 내부 `kind`, `name`, `options`, `delayFor`, `Component`, 기능 배열은 지원하는 조회·확장 API가 아닙니다.
+
+루트에서는 `TextMotionRendererCapability`, `TextMotionRendererProps`, `TextMotionToken` 타입도 내보냅니다. 타입을 공개했다고 해서 내부 팩터리 함수까지 공개하는 것은 아닙니다. 사용자 정의 효과·렌더러 팩터리, descriptor 조회 함수, capability 팩터리는 현재 루트 API에 포함되지 않습니다.
diff --git a/docs/docs/ko/api/renderers.mdx b/docs/docs/ko/api/renderers.mdx
new file mode 100644
index 0000000..dfc8eff
--- /dev/null
+++ b/docs/docs/ko/api/renderers.mdx
@@ -0,0 +1,112 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# 렌더러
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+`.component()`를 호출하기 전에 `.layout(...)`으로 렌더러를 선택하세요. 두 팩터리는 React 컴포넌트가 아닌 불투명 핸들을 반환합니다.
+
+| 렌더러 | 모션 단위 | 분할기 | 지원 효과 |
+| --- | --- | --- | --- |
+| `nativeText()` | 원문의 단어·그래핌·명시적 줄·사용자 정의 토큰 | 선택 | `fade`, `rise`, `slide`, `scale`, `pulse`, `shake`, `typewriter` |
+| `overlayText()` | React Native가 실제 렌더링한 줄 | 사용 불가 | `fade`, `rise`, `slide`, `scale`, `pulse`, `shake`, `lineReveal` |
+
+## `nativeText(options?)`
+
+<MotionDemo id="words" />
+
+```ts
+type NativeTextRendererOptions = {
+  testIDPrefix?: string;
+};
+```
+
+짧은 제목·레이블·온보딩 문구·제품 설명의 기본 선택입니다. 변형이 화면에 적용되도록 애니메이션 토큰을 animated `View` 컨테이너와 내부 `Text`로 렌더링합니다. 정적인 토큰은 일반 텍스트 노드로 남습니다. 명시적인 줄바꿈은 모션 지연 슬롯을 소비하지 않으면서 원문의 줄바꿈을 보존합니다.
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const WordReveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText({ testIDPrefix: 'title-word' }))
+  .timeline(stagger(0.04))
+  .effect(fade().and(rise({ y: 12 })))
+  .component();
+
+export function Heading() {
+  return <WordReveal style={{ fontSize: 32 }}>단어에 움직임을 더해요</WordReveal>;
+}
+```
+
+`testIDPrefix`의 기본값은 없습니다. 생성되는 토큰 test ID의 접두사이며, 애니메이션 토큰의 ID는 animated 컨테이너에 붙습니다. 컴포넌트의 `testID`는 부모를 식별합니다. `allowFontScaling` 같은 타이포그래피 props는 내부 텍스트로 전달됩니다.
+
+이 렌더러는 토큰을 감싸는 줄 배치를 사용하므로 단일 `Text`의 정확한 글자 조형·커닝·합자·자동 줄바꿈은 보장하지 않습니다. `textAlign`은 토큰 행의 정렬로 대응하며, 완전한 네이티브 문단 구현으로 바뀌지는 않습니다. 실제 렌더링된 줄의 모션은 `overlayText()`, 중첩 인라인 콘텐츠나 정확한 텍스트 노드 동작은 일반 React Native `Text`를 사용하세요.
+
+## `overlayText(options?)`
+
+<MotionDemo id="line-reveal" />
+
+```ts
+type OverlayTextRendererOptions = {
+  testIDPrefix?: string;
+};
+```
+
+하나의 네이티브 문단을 측정하고 실제 렌더링된 줄마다 마스크를 애니메이션합니다. 너비·글꼴·글자 크기 배율·정렬·언어별 조형에 따라 줄바꿈이 달라지는 경우에 사용하세요. **`.split(...)`을 호출하지 마세요.** TypeScript와 런타임 검사 모두 이 조합을 거부합니다.
+
+```tsx
+import {
+  defineTextMotion,
+  lineReveal,
+  overlayText,
+  scale,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+import { View } from 'react-native';
+
+const HeroLines = defineTextMotion()
+  .layout(overlayText({ testIDPrefix: 'hero-line' }))
+  .timeline(stagger(0.08))
+  .effect(lineReveal({ y: 18 }).and(scale({ from: 0.98 })))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .component();
+
+export function Hero() {
+  return (
+    <View style={{ width: 300 }}>
+      <HeroLines style={{ fontSize: 32, lineHeight: 40 }}>
+        화면에 배치된 줄을 따라 한 줄씩 나타나는 반응형 제목
+      </HeroLines>
+    </View>
+  );
+}
+```
+
+문단에 실제로 사용할 수 있는 너비를 제공하세요. 측정은 추정한 글자 수가 아닌 네이티브 텍스트 레이아웃을 기준으로 합니다. 텍스트나 레이아웃 입력이 달라지면 측정값을 갱신합니다. 사용할 수 있는 줄 매핑이 없으면 줄의 위치를 추정해 애니메이션하는 대신 원문을 읽을 수 있게 유지합니다. 시스템 모션 줄이기가 켜져 있으면 완성된 원문 문단을 직접 렌더링합니다.
+
+`testIDPrefix`의 기본값은 없으며, 생성되는 overlay·줄 마스크 ID의 접두사입니다. `lineReveal()`은 각 마스크 안의 문단 복사본을 움직이고, 불투명도는 줄 프레임에 적용합니다. 다른 변형 효과는 측정한 줄 프레임에 적용되므로, `scale()`이나 `pulse()`를 합성해도 렌더러 자체의 reveal 마스크에 잘리지 않고 줄 중심을 기준으로 커질 수 있습니다.
+
+이는 렌더링된 줄의 모션이며, 줄 안의 단어·문자 매핑은 아닙니다. `onTextLayout`, `numberOfLines`, 텍스트 선택, 인라인 링크를 컴포넌트 props로 공개하지 않습니다.
+
+### 너비가 달라질 때 줄 다시 배치하기
+
+<MotionDemo id="width-reflow" />
+
+이 iOS 녹화는 명시적 줄바꿈이 없는 긴 영문 문단을 React Native 레이아웃 너비 `220`과 `320`에서 보여줍니다. 네이티브 예제의 **Narrow**와 **Wide** 버튼으로 사용 가능한 너비를 바꾸고, 진행률 컨트롤로 너비 변경 중 `progress`를 `0.5`로 유지한 뒤 각 너비에서 다시 재생합니다. 줄 마스크는 다시 배치된 원문 문단의 네이티브 측정값을 따릅니다.
+
+## 공통 재생·접근성
+
+두 렌더러 모두 자동 재생, 명시적 [controls](../guide/usage/playback.mdx), 앱이 소유한 `progress`를 지원합니다. `controls`와 `progress`를 함께 넘기지 마세요. 기본 접근성 정책은 전체 문장을 한 번 노출하고 장식용 노드를 숨기며, 컴포넌트의 `accessibilityLabel`로 읽을 레이블을 바꿀 수 있습니다.
+
+많은 토큰이나 행에 적용하기 전에 [컴포넌트 Props](./component-props.md), [접근성](../guide/usage/accessibility.md), [성능](../guide/usage/performance.md)을 확인하세요. 브라우저 렌더링만으로 iOS·Android의 배치나 성능을 검증할 수는 없습니다.
+
+## 렌더러 타입
+
+루트는 `NativeTextRendererOptions`, `OverlayTextRendererOptions`, `TextMotionRenderer`, `TextMotionRendererCapability`, `TextMotionRendererProps`를 내보냅니다. 렌더러 descriptor, 구현 `Component` 필드, capability 팩터리는 내부 API입니다. 공개 렌더러 확장 SDK는 현재 API 범위에 포함되지 않습니다.
diff --git a/docs/docs/ko/api/splitters.mdx b/docs/docs/ko/api/splitters.mdx
new file mode 100644
index 0000000..9847fa6
--- /dev/null
+++ b/docs/docs/ko/api/splitters.mdx
@@ -0,0 +1,121 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# 분할기
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+분할기는 `nativeText()`가 사용할 원문 토큰을 정합니다. 반환되는 불투명 `TextMotionSplitter` 핸들을 `.split(...)`에 전달합니다.
+
+```tsx
+import {
+  custom,
+  defineTextMotion,
+  fade,
+  graphemes,
+  lines,
+  nativeText,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const WordTitle = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade())
+  .component();
+```
+
+`overlayText()`는 실제 렌더링된 줄을 직접 측정하므로 어떤 분할기와도 조합할 수 없습니다. [렌더러](./renderers.mdx)를 참고하세요.
+
+## `words()`
+
+<MotionDemo id="words" />
+
+옵션을 받지 않습니다. `Intl.Segmenter`가 있으면 이를 사용하고, 없으면 내부 대체 구현으로 단어·공백·문장 부호 토큰을 만듭니다. 공백은 배치를 유지하지만 모션 인덱스를 사용하지 않으며, 보이는 문장 부호는 모션 인덱스를 사용할 수 있습니다.
+
+단어 경계는 실행 환경의 분할 규칙을 따릅니다. 모든 언어에서 공백이 단어를 구분한다고 보장하지 않습니다. 생성된 토큰의 메타데이터에는 `isWordLike`가 포함됩니다.
+
+## `graphemes()`
+
+<MotionDemo id="graphemes" />
+
+옵션을 받지 않습니다. 문자 단위 모션을 위한 그래핌 기반 토큰을 만듭니다. 서로게이트 쌍과 결합 문자를 자를 수 있는 `text.split('')` 대신 사용하세요.
+
+대체 구현은 일반적인 이모지 시퀀스와 `한` 같은 분해형 한글을 원문 정규화 없이 처리하지만, 모든 유니코드 그래핌 규칙을 구현하지는 않습니다. 일부 복잡한 문자 결합은 나뉠 수 있습니다. 정확한 언어별 경계가 필요하면 [텍스트 분할](../guide/usage/segmentation.md)을 확인하세요.
+
+## `lines()` — 실험적
+
+<MotionDemo id="lines" />
+
+옵션을 받지 않습니다. 명시적인 `\n` 경계에서 나누며, 토큰의 원문 범위에 줄바꿈 문자를 보존합니다. 너비·글꼴·글자 크기 배율로 생긴 자동 줄바꿈은 **측정하지 않습니다**.
+
+```tsx
+const AuthoredLines = defineTextMotion()
+  .split(lines())
+  .layout(nativeText())
+  .effect(fade())
+  .component();
+
+export function Heading() {
+  return <AuthoredLines>{'첫 번째 줄\n두 번째 줄'}</AuthoredLines>;
+}
+```
+
+토큰에는 `metadata: { experimental: true, mapping: 'newline-only' }`가 들어갑니다. React Native가 실제로 렌더링한 줄이 필요하면 `overlayText()`와 `lineReveal()`을 사용하세요.
+
+## `custom(split)`
+
+<MotionDemo id="custom" />
+
+```ts
+type TextMotionCustomSplit = (
+  input: string,
+  context?: { locale?: string | string[] },
+) => readonly TextMotionCustomSplitResult[];
+
+type TextMotionCustomSplitResult = string | TextMotionCustomSplitToken;
+
+type TextMotionCustomSplitToken = {
+  text: string;
+  sourceRange?: { start: number; end: number };
+  metadata?: Record<string, unknown>;
+};
+```
+
+문자열 또는 토큰 객체를 반환합니다. 문자열의 원문 범위는 이전 토큰의 끝부터 앞으로 검색해 추론합니다. 대응 관계가 모호하거나 메타데이터가 필요하면 범위를 직접 지정하세요. 범위는 JavaScript 문자열 인덱스(UTF-16 코드 단위)를 사용하며, `end` 위치는 포함하지 않습니다.
+
+```tsx
+const phrases = custom((input) => {
+  const separator = input.indexOf(' / ');
+  if (separator < 0) return [input];
+
+  return [
+    { text: input.slice(0, separator), sourceRange: { start: 0, end: separator } },
+    { text: ' / ', sourceRange: { start: separator, end: separator + 3 } },
+    {
+      text: input.slice(separator + 3),
+      sourceRange: { start: separator + 3, end: input.length },
+    },
+  ];
+});
+```
+
+화면에 남겨야 할 문자와 공백을 모두 보존하세요. 사용자 정의 분할기는 제품별 분할 결정을 자동으로 보정하거나 검증하지 않습니다. 선택적인 context는 콜백 타입의 일부입니다. 현재 레시피 컴포넌트는 locale 없이 분할기를 호출하며, 컴포넌트에 `locale` prop은 없습니다.
+
+## 토큰 타입
+
+타입이 필요한 연동을 위해 `TextMotionToken`을 공개합니다.
+
+```ts
+type TextMotionToken = {
+  id: string;
+  text: string;
+  index: number;
+  unit: 'grapheme' | 'word' | 'line' | 'custom';
+  sourceRange: { start: number; end: number };
+  metadata?: Record<string, unknown>;
+};
+```
+
+분할기 핸들은 공개 `.split()` 메서드나 내부 descriptor를 노출하지 않습니다. 핸들을 레시피 빌더에 전달하세요.
diff --git a/docs/docs/ko/api/timelines.mdx b/docs/docs/ko/api/timelines.mdx
new file mode 100644
index 0000000..96c493b
--- /dev/null
+++ b/docs/docs/ko/api/timelines.mdx
@@ -0,0 +1,115 @@
+import { MotionDemo } from '../../../components/MotionDemo';
+
+# 타임라인
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+타임라인은 보이는 모션 단위별 시작 지연을 정합니다. `nativeText()`에서는 원문 토큰, `overlayText()`에서는 측정된 줄이 단위입니다. **타임라인의 모든 지연은 초 단위**입니다. 공백과 애니메이션하지 않는 배치 단위는 모션 인덱스를 사용하지 않습니다.
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  parallel,
+  sequence,
+  stagger,
+  wave,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const Title = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04, { from: 'center' }))
+  .effect(fade())
+  .motion({ kind: 'timing', options: { duration: 300 } })
+  .component();
+```
+
+여기서 `0.04`는 40ms 지연 간격입니다. 모션의 `300`은 애니메이션 단위당 **밀리초** 지속 시간입니다. 타임라인을 생략하면 모든 단위의 지연이 0입니다.
+
+## `stagger(step, options?)`
+
+<MotionDemo id="stagger" />
+
+위에서 **start**, **center**, **end**, **edges**를 선택해 나타나는 순서를 비교하세요. 선택할 때마다 실제 React Native Web 레시피를 바꾸고 다시 재생합니다. **Recipe** 소스와 복사 컨트롤도 선택한 방향을 따릅니다.
+
+```ts
+type TextMotionStaggerFrom = 'start' | 'center' | 'end' | 'edges' | number;
+type TextMotionStaggerOptions = { from?: TextMotionStaggerFrom };
+```
+
+`step`은 필수이며, 유한한 0 이상의 값이어야 합니다. `from`의 기본값은 `'start'`입니다. 숫자로 지정한 시작점은 비율이 아닌 유한한 토큰 인덱스이며 소수도 가능합니다.
+
+단위 인덱스가 `i`, 전체 개수가 `n`이면 지연은 `step × 거리`입니다.
+
+| `from` | 거리 | 순서 |
+| --- | --- | --- |
+| `'start'` | `i` | 처음에서 끝으로 |
+| `'end'` | `n - 1 - i` | 끝에서 처음으로 |
+| `'center'` | `abs(i - (n - 1) / 2)` | 가운데에서 바깥으로 |
+| `'edges'` | `min(i, n - 1 - i)` | 양 끝에서 안쪽으로 |
+| 숫자 `k` | `abs(i - k)` | 인덱스 `k`에서 바깥으로 |
+
+```tsx
+stagger(0.04);
+stagger(0.04, { from: 'end' });
+stagger(0.04, { from: 'edges' });
+stagger(0.04, { from: 2 });
+```
+
+## `wave(options?)`
+
+<MotionDemo id="wave" />
+
+```ts
+type TextMotionWaveOptions = {
+  amplitude?: number;
+  wavelength?: number;
+};
+```
+
+| 옵션 | 기본값 | 제약 | 의미 |
+| --- | --- | --- | --- |
+| `amplitude` | `0.08` | 유한한 값, `>= 0` | 최대 지연 시간(초) |
+| `wavelength` | `4` | 유한한 값, `> 0` | 사인파 한 주기에 포함되는 모션 단위 수 |
+
+인덱스 `i`의 지연은 `((sin(i / wavelength × 2π) + 1) / 2) × amplitude`입니다. 따라서 첫 단위는 amplitude의 절반만큼 늦게 시작하며, wave가 왼쪽부터 오른쪽으로 나타나는 순서를 보장하지는 않습니다.
+
+```tsx
+wave();
+wave({ amplitude: 0.06, wavelength: 5 });
+```
+
+## `sequence(...timelines)`
+
+<MotionDemo id="sequence" />
+
+0개 이상의 타임라인 핸들을 받아 **각 단위의 지연을 더합니다**. 지연 패턴의 합성이며, 하나의 전체 애니메이션이 끝날 때까지 기다린 뒤 다음 애니메이션을 시작하는 API는 아닙니다.
+
+```tsx
+sequence(stagger(0.02), wave({ amplitude: 0.04, wavelength: 4 }));
+```
+
+인자 없는 `sequence()`는 지연 0을 만듭니다.
+
+## `parallel(...timelines)`
+
+<MotionDemo id="parallel" />
+
+0개 이상의 타임라인 핸들을 받아 **각 단위에서 가장 빠른 지연**을 선택합니다.
+
+```tsx
+parallel(stagger(0.08), wave({ amplitude: 0.05, wavelength: 3 }));
+```
+
+인자 없는 `parallel()`은 지연 0을 만듭니다. 독립적인 재생 트랙을 만드는 API는 아닙니다.
+
+## 외부 progress
+
+[외부 progress 모드](../guide/usage/playback.mdx)에서도 타임라인 지연은 각 단위의 로컬 progress를 정합니다. 공유 값의 시간 곡선은 앱이 제어하고 `.motion()`은 실행하지 않습니다. 타임라인은 지연 패턴이며 별도의 재생 컨트롤러가 아닙니다.
+
+## 핸들과 검증
+
+루트는 `TextMotionTimeline`, `TextMotionStaggerFrom`, `TextMotionStaggerOptions`, `TextMotionWaveOptions`를 내보냅니다. 숫자 팩터리 입력은 위의 제약대로 검사합니다. 반환되는 타임라인은 불투명 핸들이므로 `delayFor`, `name`, `options`는 공개 속성이 아닙니다. `.timeline(...)`, `sequence(...)`, `parallel(...)`에 전달하세요.
diff --git a/docs/docs/ko/guide/_meta.json b/docs/docs/ko/guide/_meta.json
new file mode 100644
index 0000000..e51fd07
--- /dev/null
+++ b/docs/docs/ko/guide/_meta.json
@@ -0,0 +1,4 @@
+[
+  { "type": "dir", "name": "getting-started", "label": "시작하기" },
+  { "type": "dir", "name": "usage", "label": "사용법" }
+]
diff --git a/docs/docs/ko/guide/getting-started/_meta.json b/docs/docs/ko/guide/getting-started/_meta.json
new file mode 100644
index 0000000..4b83f28
--- /dev/null
+++ b/docs/docs/ko/guide/getting-started/_meta.json
@@ -0,0 +1 @@
+["overview", "installation", "quick-start"]
diff --git a/docs/docs/ko/guide/getting-started/installation.md b/docs/docs/ko/guide/getting-started/installation.md
new file mode 100644
index 0000000..4e38c69
--- /dev/null
+++ b/docs/docs/ko/guide/getting-started/installation.md
@@ -0,0 +1,69 @@
+# 설치
+
+Text Motion은 React Native Reanimated와 React Native Worklets를 사용합니다. 텍스트 애니메이션을 렌더링하기 전에 앱에서 서로 호환되는 버전으로 설정하세요.
+
+## 요구 사항
+
+패키지가 선언한 peer dependency 최소 버전은 다음과 같습니다.
+
+| 의존성 | 선언된 범위 |
+| --- | --- |
+| `react` | `>=18.0.0` |
+| `react-native` | `>=0.76.0` |
+| `react-native-reanimated` | `>=4.0.0` |
+| `react-native-worklets` | `>=0.5.0` |
+
+이 범위가 모든 버전 조합의 호환성을 보장하지는 않습니다. [Reanimated 호환성 표](https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/)에서 지원하는 React Native, Reanimated, Worklets 조합을 선택하세요. Reanimated 4는 React Native New Architecture를 요구합니다.
+
+## 패키지 설치
+
+기존 React Native 앱에서는 다음과 같이 설치합니다.
+
+```sh
+pnpm add @react-native-motion-kit/text-motion react-native-reanimated react-native-worklets
+```
+
+npm이나 Yarn을 사용한다면 같은 패키지를 `npm install` 또는 `yarn add`로 설치하세요.
+
+Expo 앱에서는 SDK에 맞는 Reanimated와 Worklets 버전을 Expo가 선택하도록 설치합니다.
+
+```sh
+npx expo install react-native-reanimated react-native-worklets
+pnpm add @react-native-motion-kit/text-motion
+```
+
+SDK가 선택한 버전이 위의 peer dependency 범위를 만족하는지 확인하세요. SDK와 빌드 방식에 필요한 설정은 [Expo Reanimated 가이드](https://docs.expo.dev/versions/latest/sdk/reanimated/)를 따르세요.
+
+## Worklets 설정
+
+사용하는 환경에 맞춰 공식 [Reanimated 시작 가이드](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)와 [Worklets 시작 가이드](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/getting-started/)를 따르세요.
+
+Babel을 사용하는 bare React Native 앱에서는 기존 설정의 **마지막** 플러그인으로 Worklets 플러그인을 추가합니다.
+
+```js
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-worklets/plugin'],
+};
+```
+
+앱에 필요한 다른 preset과 plugin은 유지하세요. Expo의 Babel preset이 해당 SDK에서 플러그인을 설정할 수 있으므로, 중복으로 추가하지 말고 SDK별 설정을 확인하세요.
+
+네이티브 의존성을 추가한 뒤에는 앱에서 사용하는 CocoaPods 절차로 iOS pod를 설치하고 네이티브 앱을 다시 빌드하세요. Babel 설정을 바꿨다면 Metro 캐시를 초기화하고 다시 실행하세요. Text Motion 자체에는 별도 Babel 플러그인, provider, 네이티브 설정이 필요하지 않습니다.
+
+## 공개 진입점에서 가져오기
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+```
+
+기본 구성 요소는 패키지 루트에서 가져옵니다. 세 가지 프리셋은 `/presets`에서 가져옵니다. 내부 렌더러나 descriptor 파일을 직접 가져오지 마세요.
+
+[빠른 시작](./quick-start.mdx)으로 이어서 진행하세요.
diff --git a/docs/docs/ko/guide/getting-started/overview.md b/docs/docs/ko/guide/getting-started/overview.md
new file mode 100644
index 0000000..dfb47fb
--- /dev/null
+++ b/docs/docs/ko/guide/getting-started/overview.md
@@ -0,0 +1,48 @@
+# 소개
+
+`@react-native-motion-kit/text-motion`은 React Native에서 재사용할 수 있는 텍스트 애니메이션 컴포넌트를 만듭니다. 텍스트 분할, 렌더링, 타이밍, 효과, 접근성을 레시피로 조합한 뒤 컴포넌트로 렌더링합니다.
+
+```txt
+split → layout(renderer) → timeline → effect → motion/accessibility → component
+```
+
+이 문서는 현재 `0.1.0`의 공개 API를 설명합니다.
+
+## 시작 방법 선택하기
+
+일반적인 제목, 라벨, 제품 설명 애니메이션은 [프리셋](../usage/presets.mdx)으로 시작하세요. 애니메이션 단위, 타이밍, 효과를 직접 선택하려면 [커스텀 레시피](../usage/recipes.mdx)를 만드세요.
+
+```tsx
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+
+const HeroTitle = editorialRise().component();
+
+export function Hero() {
+  return <HeroTitle>자연스럽게 움직이는 텍스트</HeroTitle>;
+}
+```
+
+컴포넌트의 자식에는 일반 문자열을 전달합니다. 부모가 다시 렌더링되어도 같은 컴포넌트 타입을 사용하도록 React 렌더 함수 밖에서 정의하세요.
+
+## 만들 수 있는 기능
+
+| 목적 | 공개 API |
+| --- | --- |
+| 단어나 사용자가 인식하는 글자 단위로 움직이기 | `words()` 또는 `graphemes()`와 `nativeText()` |
+| React Native가 실제로 줄바꿈한 줄을 드러내기 | `.split(...)` 없이 `overlayText()`와 `lineReveal()` |
+| 완성된 문장의 공간을 유지하며 한 글자씩 드러내기 | `graphemes()`, `nativeText()`, `typewriter()` |
+| 버튼이나 앱 이벤트에 맞춰 다시 재생하기 | `useTextMotionControls()`와 `controls` prop |
+| 스크롤, 제스처, 앱이 관리하는 애니메이션 따라가기 | Reanimated shared value를 `progress`로 전달 |
+| 스크린 리더가 문장을 읽을 수 있게 유지하기 | 부모 레이블을 사용하고 장식용 토큰 노드는 접근성 트리에서 숨기기 |
+
+`controls`는 재생 명령을 보내고, `progress`는 현재 시각적 상태를 전달합니다. 한 인스턴스에서는 둘 중 하나만 사용할 수 있습니다.
+
+## 범위와 제약
+
+짧은 제목, 헤딩, 라벨, 온보딩 문구, 제품 설명을 대상으로 합니다. 긴 문단, 많은 행, 글자 수가 많은 grapheme 애니메이션은 도입 전에 대상 기기에서 성능을 측정하세요.
+
+`nativeText()`는 움직이는 토큰을 컨테이너로 감싸므로 하나의 네이티브 `Text`가 제공하는 모든 동작을 재현하지 않습니다. 중첩된 리치 텍스트, 인라인 링크, 텍스트 선택, 텍스트 `onPress`는 컴포넌트 계약에 포함되지 않습니다. `lines()`는 명시적인 `\n`만 분할합니다. 자동 줄바꿈에는 `overlayText()`를 사용하세요.
+
+현재 공개 API에는 커스텀 효과 팩토리, 렌더러 확장 SDK, Skia 효과, `pause`/`seek`/`reverse`, 스크롤·제스처·화면 포커스·in-view 전용 드라이버가 없습니다. 앱 이벤트는 `controls`로 연결하고 연속적인 shared value는 `progress`로 연결할 수 있습니다. 텍스트 변경은 새 텍스트의 등장만 처리합니다. 퇴장 애니메이션을 위해 이전 텍스트를 유지하거나 스트리밍 텍스트 API를 제공하지 않습니다.
+
+[설치](./installation.md)를 마친 뒤 [빠른 시작](./quick-start.mdx)에서 첫 컴포넌트를 만들어 보세요.
diff --git a/docs/docs/ko/guide/getting-started/quick-start.mdx b/docs/docs/ko/guide/getting-started/quick-start.mdx
new file mode 100644
index 0000000..7422a66
--- /dev/null
+++ b/docs/docs/ko/guide/getting-started/quick-start.mdx
@@ -0,0 +1,96 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# 빠른 시작
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+[설치](./installation.md)를 마친 뒤 프리셋을 선택하거나 레시피를 만드세요. 두 방식 모두 재사용할 수 있는 React 컴포넌트를 반환합니다.
+
+## 프리셋으로 시작하기
+
+<MotionDemo id="editorial-rise" />
+
+```tsx
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+
+const HeroReveal = editorialRise().component();
+
+export function HeroTitle() {
+  return (
+    <HeroReveal style={{ fontSize: 32, fontWeight: '700' }}>
+      자연스럽게 움직이는 텍스트
+    </HeroReveal>
+  );
+}
+```
+
+`editorialRise()`는 단어 토큰, 중앙에서 시작하는 stagger, rise·fade·scale 조합을 사용합니다. 컴포넌트가 마운트되면 자동으로 재생합니다.
+
+## 단어 등장 효과 만들기
+
+<MotionDemo id="words" />
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  parentLabelPolicy,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const WordReveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade().and(rise({ y: 12 })))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Headline() {
+  return <WordReveal style={{ fontSize: 28 }}>단어마다 움직임을 더하세요</WordReveal>;
+}
+```
+
+타임라인의 단위는 **초**입니다. `stagger(0.04)`는 보이는 단어를 40ms 간격으로 시작합니다. motion의 `duration` 단위는 **밀리초**입니다. 각 토큰은 자신의 지연 시간이 지난 뒤 420ms 동안 움직입니다. 공백은 레이아웃 공간을 유지하지만 지연 순번을 차지하지 않습니다. 위 접근성 정책은 전체 문장을 한 번 읽도록 제공하고, 동작 줄이기가 활성화되면 최종 상태를 보여 줍니다.
+
+## 실제 렌더링된 줄 드러내기
+
+<MotionDemo id="line-reveal" />
+
+폭과 글꼴 설정에 따라 애니메이션할 줄을 결정하려면 `overlayText()`를 사용하세요. 이 렌더러가 줄 측정을 담당하므로 `.split(...)`은 생략합니다.
+
+```tsx
+import {
+  defineTextMotion,
+  lineReveal,
+  overlayText,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+
+const LineTitle = defineTextMotion()
+  .layout(overlayText())
+  .timeline(stagger(0.08))
+  .effect(lineReveal({ y: 18 }))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .component();
+
+export function ResponsiveTitle() {
+  return (
+    <LineTitle style={{ fontSize: 32, lineHeight: 40, maxWidth: 320 }}>
+      레이아웃이 만든 줄을 따라 움직여요
+    </LineTitle>
+  );
+}
+```
+
+`lines()`는 다른 용도입니다. 명시적인 줄바꿈 문자만 분할하며 자동 줄바꿈을 측정하지 않습니다.
+
+## 다음 단계
+
+- [레시피](../usage/recipes.mdx) 조합 방식과 [프리셋](../usage/presets.mdx) 수정 방법을 알아보세요.
+- [재생 제어 또는 외부 progress](../usage/playback.mdx)를 연결하세요.
+- [렌더러](../../api/renderers.mdx), [효과](../../api/effects.mdx), [컴포넌트 props](../../api/component-props.md)를 비교하세요.
diff --git a/docs/docs/ko/guide/usage/_meta.json b/docs/docs/ko/guide/usage/_meta.json
new file mode 100644
index 0000000..23b38b6
--- /dev/null
+++ b/docs/docs/ko/guide/usage/_meta.json
@@ -0,0 +1 @@
+["recipes", "presets", "playback", "accessibility", "segmentation", "performance", "examples"]
diff --git a/docs/docs/ko/guide/usage/accessibility.md b/docs/docs/ko/guide/usage/accessibility.md
new file mode 100644
index 0000000..4141bff
--- /dev/null
+++ b/docs/docs/ko/guide/usage/accessibility.md
@@ -0,0 +1,59 @@
+# 접근성
+
+Text Motion은 애니메이션 토큰 노드를 장식 요소로 취급합니다. 기본적으로 부모는 문장 전체를 하나의 접근성 레이블로 제공하고, 개별 애니메이션 노드는 접근성 도구에서 숨깁니다. 화면 읽기 도구는 각 단어나 글자를 따로 읽는 대신 문장 전체를 한 번 읽습니다.
+
+## 부모 레이블 정책
+
+`parentLabelPolicy(options?)`로 레시피의 접근성 동작을 설정합니다. 옵션은 `reducedMotion` 하나입니다.
+
+| 옵션 | 기본값 | 의미 |
+| --- | --- | --- |
+| `reducedMotion` | `'system'` | 내부 애니메이션에 Reanimated의 시스템 모션 감소 동작을 적용합니다. |
+| `reducedMotion: 'final-state'` | 명시적으로 선택 | 시스템 모션 감소가 켜져 있으면 즉시 최종 화면 상태를 표시합니다. |
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  parentLabelPolicy,
+  rise,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const AccessibleTitle = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .effect(fade().and(rise({ y: 10 })))
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Title() {
+  return (
+    <AccessibleTitle accessibilityRole="header">
+      메시지를 읽기 쉽게 유지하는 모션
+    </AccessibleTitle>
+  );
+}
+```
+
+`'final-state'`는 모든 사용자에게 모션을 비활성화하는 옵션이 아닙니다. 기기의 모션 감소 설정이 켜져 있을 때 최종 상태를 표시합니다. 이 표시 상태는 controls와 외부 progress보다 우선하므로, 앱의 공유값이 아직 `0`이어도 Typewriter 문장 전체가 읽을 수 있는 상태로 유지됩니다.
+
+`nativeText()`의 기본 `'system'` 정책에서는 외부 `progress`를 앱이 계속 제어합니다. 값을 갱신하는 애니메이션도 사용자 설정을 존중하도록 구성하거나, 텍스트의 완성된 결과를 즉시 표시해야 한다면 `'final-state'`를 선택하세요.
+
+`overlayText()`에는 별도의 렌더러 폴백도 있습니다. 시스템 모션 감소가 켜져 있으면 애니메이션 줄 오버레이 대신 원본 문단의 최종 상태를 표시합니다. 두 정책과 외부 progress 모두에 적용되며 앱의 공유값 자체는 바꾸지 않습니다.
+
+`.motion()` 옵션에 `reduceMotion`을 전달하지 마세요. Text Motion의 모션 감소 동작은 `.accessibility(...)`로 설정합니다.
+
+## 레이블과 텍스트 props
+
+문자열 자식이 기본 접근성 레이블이 됩니다. 화면의 문구가 축약돼 있다면 `accessibilityLabel`로 설명을 지정할 수 있습니다. `accessibilityHint`, `accessibilityRole`, `accessibilityState`, `accessibilityValue`, `accessibilityActions`, `accessibilityLanguage`, `onAccessibilityAction`도 지원합니다.
+
+`allowFontScaling`과 `maxFontSizeMultiplier`를 지원합니다. 특히 실제 렌더링된 줄을 움직일 때는 큰 글꼴 배율과 좁은 너비를 앱에서 확인하세요. 전체 prop 계약은 [컴포넌트 props](../../api/component-props.md), 레이아웃 차이는 [렌더러](../../api/renderers.mdx)를 참고하세요.
+
+## 앱에서 확인할 항목
+
+- VoiceOver와 TalkBack으로 문장을 읽고, 장식용 단어와 문자가 개별적으로 읽히지 않는지 확인하세요.
+- 모션 감소를 켜고 첫 프레임, 다시 재생, 초기화, 외부 진행률 상태를 확인하세요.
+- 지원하는 글꼴 배율, 언어, 너비와 주변 UI의 대비를 확인하세요.
+- 장식용 모션과 관계없이 핵심 정보가 읽혀야 합니다. Typewriter는 글자마다 별도의 안내를 보내지 않습니다.
diff --git a/docs/docs/ko/guide/usage/examples.mdx b/docs/docs/ko/guide/usage/examples.mdx
new file mode 100644
index 0000000..9074cc7
--- /dev/null
+++ b/docs/docs/ko/guide/usage/examples.mdx
@@ -0,0 +1,171 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# 예제
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+아래 예제는 현재 공개 API를 사용합니다. [설치](../getting-started/installation.md)를 마친 React Native 앱에서 실행하세요. 각 예제 옆의 미리보기에서 움직임을 확인하고 다시 재생할 수 있습니다.
+
+## 프리셋으로 시작하기
+
+<MotionDemo id="editorial-rise" />
+
+프리셋은 `/presets` 경로에서 가져오는 레시피 팩토리입니다. 컴포넌트는 렌더 함수 밖에서 한 번 만드세요.
+
+```tsx
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+
+const HeroTitle = editorialRise().component();
+
+export function Hero() {
+  return (
+    <HeroTitle style={{ fontSize: 32, fontWeight: '700' }}>
+      자연스럽게 느껴지는 텍스트 모션
+    </HeroTitle>
+  );
+}
+```
+
+`softWave()`와 `gentleEmphasis()`는 [프리셋](./presets.mdx)을 참고하세요.
+
+## 단어 진입 효과와 다시 재생
+
+<MotionDemo id="controls" />
+
+```tsx
+import { Button, View } from 'react-native';
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  useTextMotionControls,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const WordReveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade().and(rise({ y: 10 })))
+  .motion({ kind: 'timing', options: { duration: 360 } })
+  .component();
+
+export function ReplayExample() {
+  const controls = useTextMotionControls();
+
+  return (
+    <View>
+      <WordReveal controls={controls}>단어마다 작은 움직임을 더합니다.</WordReveal>
+      <Button title="다시 재생" onPress={controls.replay} />
+    </View>
+  );
+}
+```
+
+`stagger(0.04)`는 시작 간격을 40ms로 설정하고, `duration: 360`은 토큰별 모션 시간을 밀리초로 설정합니다. controls를 전달해도 마운트 시 자동 재생은 유지됩니다. 외부 진행률과 전체 명령은 [재생 제어](./playback.mdx)를 참고하세요.
+
+## 실제 렌더링된 줄 표시하기
+
+<MotionDemo id="line-reveal" />
+
+사용 가능한 너비에 맞춰 제목이 줄바꿈돼야 한다면 네이티브가 렌더링한 줄을 사용하세요. 이 레시피에는 splitter를 추가하지 않습니다.
+
+```tsx
+import { View } from 'react-native';
+import {
+  defineTextMotion,
+  lineReveal,
+  overlayText,
+  parentLabelPolicy,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+
+const LineTitle = defineTextMotion()
+  .layout(overlayText())
+  .timeline(stagger(0.08))
+  .effect(lineReveal({ y: 18 }))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function RenderedLinesExample() {
+  return (
+    <View style={{ width: 280 }}>
+      <LineTitle style={{ fontSize: 32, lineHeight: 40, fontWeight: '700' }}>
+        레이아웃이 실제로 렌더링한 줄에 맞춰 제목을 움직입니다
+      </LineTitle>
+    </View>
+  );
+}
+```
+
+`overlayText()`는 너비, 글꼴, 글꼴 배율, 글자 조형이 적용된 문단을 측정합니다. `lines()`는 명시적인 줄바꿈 문자만 나눕니다. [렌더러](../../api/renderers.mdx)를 참고하세요.
+
+## 너비가 바뀌어도 진행률 유지하기
+
+<MotionDemo id="width-reflow" />
+
+이 iOS 녹화는 명시적 줄바꿈이 없는 긴 영문 문단을 사용합니다. 네이티브 예제의 **Narrow**와 **Wide**는 React Native 레이아웃 너비를 `220`과 `320`으로 전환합니다. 진행률 컨트롤로 너비 변경 전후에 `progress`를 `0.5`로 유지한 뒤 각 너비에서 다시 재생하며, 새로 측정한 원문 문단에 맞춰 마스크가 배치되는지 확인할 수 있습니다.
+
+## 레이아웃을 유지하는 Typewriter
+
+<MotionDemo id="typewriter" />
+
+```tsx
+import { Button, View } from 'react-native';
+import {
+  defineTextMotion,
+  graphemes,
+  nativeText,
+  parentLabelPolicy,
+  stagger,
+  typewriter,
+  useTextMotionControls,
+} from '@react-native-motion-kit/text-motion';
+
+const TypewriterText = defineTextMotion()
+  .split(graphemes())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(typewriter())
+  .motion({ kind: 'timing', options: { duration: 0 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Greeting() {
+  const controls = useTextMotionControls();
+
+  return (
+    <View>
+      <TypewriterText controls={controls}>안녕, 한글! 👩🏽‍💻</TypewriterText>
+      <Button title="다시 재생" onPress={controls.replay} />
+      <Button title="초기화" onPress={controls.reset} />
+      <Button title="정지" onPress={controls.stop} />
+    </View>
+  );
+}
+```
+
+완성된 문장의 공간을 처음부터 확보합니다. 보이는 토큰은 타임라인의 시작 시점에 표시되고, 공백과 명시적 줄바꿈은 지연 슬롯 없이 공간을 유지합니다. `duration: 0`은 토큰별 표시를 즉시 처리합니다. Typewriter는 `nativeText()`가 필요하며 커서, 스트리밍, 단일 `Text`와 정확히 같은 줄바꿈을 제공하지 않습니다.
+
+다른 문장을 처음부터 입력하려면 새 React `key`로 다시 마운트하세요. 문자열을 이어 붙이는 방식은 스트리밍 API가 아닙니다. 효과 조합은 [효과](../../api/effects.mdx), 문자소 폴백의 한계는 [문자 분할](./segmentation.md)을 참고하세요.
+
+## 저장소 예제 실행
+
+저장소 루트에서 `.nvmrc`와 `package.json`에 고정된 Node·pnpm 버전을 사용하세요.
+
+```sh
+pnpm install
+pnpm example start
+# 또는 네이티브 앱을 빌드하고 실행합니다.
+pnpm example ios
+pnpm example android
+# 브라우저 개발도 가능합니다.
+pnpm example web
+```
+
+네이티브 빌드 명령에는 각 플랫폼의 일반적인 개발 도구가 필요합니다. 브라우저는 화면을 살펴보는 데 유용하지만 iOS·Android의 레이아웃과 성능을 검증한 근거는 아닙니다.
+
+예제는 **Presets**, **Splitters**, **Effects**, **Timelines**, **Layout**, **Playback** 그룹으로 나뉩니다. **Line Reveal**, **Typewriter Controls**, **Controlled Progress**, **Renderer Performance**에서 관련 API를 확인하세요. 측정 기록 방법은 [성능](./performance.md)을 참고하세요.
diff --git a/docs/docs/ko/guide/usage/performance.md b/docs/docs/ko/guide/usage/performance.md
new file mode 100644
index 0000000..b42cd0b
--- /dev/null
+++ b/docs/docs/ko/guide/usage/performance.md
@@ -0,0 +1,41 @@
+# 성능
+
+Text Motion은 제목, 레이블, 온보딩 문구, 짧은 제품 설명처럼 중요한 UI 텍스트를 대상으로 합니다. 성능은 애니메이션 단위 수, 효과, 동시에 표시하는 컴포넌트 수, 기기와 재생 방식에 따라 달라집니다. 이 문서는 특정 FPS나 모든 환경에 통용되는 안전한 글자 수를 보장하지 않습니다.
+
+## 애니메이션 단위 선택
+
+`nativeText()`는 애니메이션 토큰마다 내부 `Text`와 애니메이션 `View` 컨테이너를 사용합니다. 정적 토큰은 일반 텍스트로 남습니다. 이 구조로 토큰 변형을 표시할 수 있지만, 글자 단위 분할은 단어 단위보다 훨씬 많은 애니메이션 단위를 만들 수 있습니다.
+
+- 단어 단위 모션으로 의도가 전달된다면 `words()`를 우선 사용하세요.
+- 짧은 글자 단위 표현에는 `graphemes()`나 `typewriter()`를 사용하고, 더 큰 작업량은 측정하세요.
+- 레시피 컴포넌트는 렌더 함수 밖에 만드세요. 재시작만을 위해 반복해서 언마운트하기보다 controls로 기존 컴포넌트를 다시 재생하세요.
+- 공유 controls는 실제 마운트할 행 수로 검사하세요. 명령 하나가 연결된 모든 컴포넌트에 전달됩니다.
+- 실제 렌더링된 줄을 움직여야 한다면 `overlayText()`를 사용하세요. 네이티브 텍스트를 측정하고 줄마다 잘린 문단 복사본을 렌더링하므로, 모션 단위가 적다는 이유만으로 더 빠르다고 판단할 수는 없습니다.
+
+레이아웃의 차이는 [렌더러](../../api/renderers.mdx), 명령과 진행률 제어는 [재생 제어](./playback.mdx)를 참고하세요.
+
+## 예제 앱으로 프로파일링
+
+측정할 플랫폼에서 저장소의 예제 앱을 실행하세요. 명령은 [예제](./examples.mdx)에 있습니다.
+
+**Playback → Renderer Performance**에서 단어·글자 작업량, Typewriter, 반복 재생, 공유 행, 외부 진행률 사례를 확인할 수 있습니다. **Playback → Controls Stress**는 명령을 여러 컴포넌트에 전달하는 추가 사례입니다. **Layout → Line Reveal**과 **Layout → Line Layout Probe**에서는 너비, 정렬, 글꼴 배율, 명시적 줄바꿈과 언어별 표시를 확인할 수 있습니다.
+
+사례의 `normal`, `caution`, `stress` 표시는 프로브의 작업량 구분입니다. 측정된 성능 등급이나 지원하는 토큰 수 한도가 아닙니다. UI의 토큰·노드 수 추정치도 진단용이며 공개 구현 계약이 아닙니다.
+
+React Native Perf Monitor, Xcode Instruments, Android Studio Profiler, Flashlight 같은 실제 FPS·프로파일링 도구를 사용하세요. 측정과 함께 기기·OS, 플랫폼, 빌드 모드, 텍스트·splitter, 효과, 컴포넌트·모션 단위 수, 재생 방식, 눈에 보이는 끊김을 기록하세요. 개발 모드와 시뮬레이터의 결과는 그 조건을 명시해야 합니다.
+
+## 측정 근거 표기
+
+| 상태 | 필요한 근거 |
+| --- | --- |
+| `measured` | 같은 사례 유형에 대해 iOS와 Android 근거가 모두 있습니다. |
+| `provisional` | 한 플랫폼만 확인했거나 시뮬레이터·에뮬레이터·개발 모드의 근거만 있습니다. |
+| `unknown` | 해당 사례 유형을 측정하지 않았습니다. |
+
+이 사이트는 플랫폼별 근거가 함께 제공되지 않는 작업량을 측정 완료로 주장하지 않습니다.
+
+일반적인 제목과 레이블이 부드럽다면 기본 렌더러를 유지하고 무거운 텍스트의 경계를 안내하세요. 일반적인 작업량부터 끊긴다면 효과를 추가하기 전에 렌더러 비용을 조사하세요. 글자 단위 스트레스 사례가 실패했다는 사실만으로 일반적인 단어 단위 제목에도 다른 렌더러가 필요하다고 판단할 수는 없습니다.
+
+## 프레임과 레이아웃을 함께 검증
+
+`nativeText()`는 토큰별 변형을 위해 단일 `Text`의 정확한 글자 조형과 줄바꿈을 일부 포기합니다. `overlayText()`는 네이티브가 렌더링한 줄을 따르지만 앱의 글꼴, 배율, 너비, 정렬, 문자 체계에서도 확인해야 합니다. FPS만으로 줄바꿈, 접근성 읽기 순서, 모션 감소 동작까지 검증할 수는 없습니다. [문자 분할](./segmentation.md)과 [접근성](./accessibility.md)을 참고하세요.
diff --git a/docs/docs/ko/guide/usage/playback.mdx b/docs/docs/ko/guide/usage/playback.mdx
new file mode 100644
index 0000000..93baa15
--- /dev/null
+++ b/docs/docs/ko/guide/usage/playback.mdx
@@ -0,0 +1,154 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# 재생 제어
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+컴포넌트의 자동 재생, 이벤트 기반 명령, 앱이 소유한 Reanimated 공유값 중 재생을 제어할 방식을 선택합니다.
+
+| 방식 | 입력 | 재생 담당 |
+| --- | --- | --- |
+| 자동 재생 | 재생 관련 prop 없음 | Text Motion이 입력 변화에 따라 재생합니다. |
+| 명령 | `controls={controls}` | 앱이 명령을 보내고 Text Motion이 레시피를 실행합니다. |
+| 외부 진행률 | `progress={progress}` | 앱이 값과 애니메이션 곡선을 직접 제어합니다. |
+
+## 자동 재생과 텍스트 변경
+
+<MotionDemo id="autoplay" />
+
+마운트하면 화면에 보이는 애니메이션 토큰이 초기 스타일에서 최종 스타일로 재생됩니다. `controls`를 전달해도 마운트 시 자동 재생은 유지됩니다. 첫 명령을 기다리는 방식으로 바뀌지는 않습니다.
+
+- 같은 텍스트와 레시피로 다시 렌더링하면 진행 중인 재생을 유지합니다.
+- 텍스트가 바뀌면 토큰 형태가 같아도 변경된 토큰의 애니메이션을 다시 재생합니다.
+- 실제 효과, 타이밍, 모션 설정이 바뀌면 관련 토큰을 초기화하고 새 설정을 적용합니다. easing 같은 함수 옵션은 참조로 비교하므로 재생을 유지하려면 같은 함수 참조를 사용하세요.
+- 공백과 정적 토큰은 레이아웃을 유지하지만 애니메이션이나 모션 인덱스를 소비하지 않습니다.
+
+텍스트 변경은 새 텍스트의 진입만 처리합니다. 이전 텍스트의 퇴장, 크로스페이드, 이전·새 토큰 간 전환은 제공하지 않습니다. 외부 진행률을 전달한 경우 새 텍스트도 현재 공유값을 사용하며 자동으로 처음부터 재생하지 않습니다. 명령은 현재 렌더링된 텍스트에 적용됩니다.
+
+React가 컴포넌트 정체성을 유지할 수 있도록 레시피 컴포넌트는 렌더 함수 밖에서 만드세요. [레시피](./recipes.mdx)를 참고하세요.
+
+## 이벤트 기반 controls
+
+<MotionDemo id="controls" />
+
+`useTextMotionControls()`는 참조가 유지되는 명령 채널을 반환합니다. 명령을 받을 컴포넌트에 명시적으로 전달합니다.
+
+```tsx
+import { Button, View } from 'react-native';
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  useTextMotionControls,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const Reveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade().and(rise({ y: 12 })))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .component();
+
+export function Headlines() {
+  const controls = useTextMotionControls();
+
+  return (
+    <View>
+      <Reveal controls={controls}>함께 재생하는 제목</Reveal>
+      <Reveal controls={controls}>같은 명령 채널을 사용하는 부제목</Reveal>
+      <Button title="재생" onPress={controls.play} />
+      <Button title="다시 재생" onPress={controls.replay} />
+      <Button title="초기화" onPress={controls.reset} />
+      <Button title="정지" onPress={controls.stop} />
+    </View>
+  );
+}
+```
+
+| 명령 | 동작 |
+| --- | --- |
+| `play()` | 현재 진행 상태에서 최종 상태를 향해 재생합니다. |
+| `replay()` | 초기화한 뒤 레시피의 타임라인과 모션 설정으로 다시 재생합니다. |
+| `reset()` | 재생을 취소하고 초기 상태로 돌아갑니다. |
+| `stop()` | 재생을 취소하고 현재 화면 상태를 유지합니다. |
+
+명령은 같은 controls 객체에 연결된 모든 마운트된 컴포넌트에 전달되며, 각 컴포넌트는 자신의 레시피로 실행합니다. 명령은 저장된 재생 상태나 이후 마운트할 컴포넌트를 위한 대기열이 아닙니다. 연결이 해제되거나 언마운트되면 구독도 해제됩니다.
+
+`stop()` 후 `play()`는 정확한 일시 정지·재개 API가 아니며 원래 일정의 남은 시간을 그대로 이어갈 것을 보장하지 않습니다. 처음부터 다시 시작하려면 `replay()`를 사용하세요. 명시적인 모션 감소 최종 상태 정책이 활성화돼 있으면 초기화나 다시 재생보다 최종 표시 상태가 우선합니다.
+
+버튼, 앱에서 연결한 화면 포커스 이벤트, 온보딩 단계에는 controls를 사용하세요. 재생용 provider/context API나 공개 컴포넌트 ref API는 제공하지 않습니다.
+
+## 앱이 소유한 progress
+
+<MotionDemo id="progress" />
+
+앱이 이미 소유한 다른 애니메이션, 스크롤 값, 제스처 값을 따라야 한다면 Reanimated의 `SharedValue<number>`를 사용합니다.
+
+```tsx
+import { Button, View } from 'react-native';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const ProgressReveal = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.08))
+  .effect(fade().and(rise({ y: 12 })))
+  .component();
+
+export function ProgressExample() {
+  const progress = useSharedValue(0);
+
+  return (
+    <View>
+      <ProgressReveal progress={progress}>
+        문장 전체를 하나의 진행률로 제어합니다
+      </ProgressReveal>
+      <Button
+        title="재생"
+        onPress={() => {
+          progress.value = withTiming(1, { duration: 720 });
+        }}
+      />
+      <Button title="초기화" onPress={() => { progress.value = 0; }} />
+    </View>
+  );
+}
+```
+
+`0`은 초기 스타일, `1`은 최종 스타일입니다. 이 범위를 벗어난 유한한 값은 보정하고, 유한하지 않은 값은 `0`으로 처리합니다. `progress`를 전달하면 내부 자동 재생이 비활성화되고 해당 인스턴스에서는 레시피의 `.motion()` 설정을 사용하지 않습니다. 시간과 easing은 공유값을 갱신하는 곳에서 설정하세요.
+
+이 값은 효과 타임라인 전체의 진행률입니다. 토큰 지연 `d`와 가장 큰 토큰 지연 `D`를 초 단위로 나타내면 현재 매핑은 토큰별 구간을 `1.0`으로 고정해 계산합니다.
+
+```txt
+localProgress = clamp(progress * (D + 1) - d, 0, 1)
+```
+
+타임라인은 각 토큰이 시작하는 시점을 계속 결정합니다. 공백은 지연 슬롯을 사용하지 않습니다. 이 매핑은 토큰별 재생 시간 API가 아닙니다.
+
+### Typewriter의 진행률
+
+<MotionDemo id="typewriter-progress" />
+
+미리보기는 **타임라인 진행률**과 **현재 표시된 글자 수**를 따로 보여줍니다. 글자 수는 공백을 제외하고 문장부호와 이모지를 포함하며, 재생 중이나 진행률을 되돌릴 때도 갱신됩니다.
+
+`typewriter()`는 토큰의 로컬 진행률이 0보다 커지면 해당 토큰을 표시합니다. 진행률은 **표시된 문자 수의 비율이 아닙니다**. 보이는 문자 10개에 `stagger(0.05)`를 사용하면 약 `0.310345`를 넘는 시점에 모든 문자가 보입니다. 진행률을 줄여 시작 임계점을 다시 지나면 문자가 숨겨질 수 있습니다. 시간상 일정한 간격으로 임계점을 통과하려면 외부 타이밍 곡선을 선형으로 설정하세요.
+
+이 효과는 완성된 문장의 레이아웃을 유지합니다. 커서나 스트리밍 텍스트 API는 제공하지 않습니다. [효과](../../api/effects.mdx)와 [예제](./examples.mdx)를 참고하세요.
+
+## 지원 범위
+
+`controls`와 `progress`는 TypeScript와 런타임 모두에서 함께 사용할 수 없습니다. 전용 `pause`, `seek`, `reverse`, 스크롤, 제스처, in-view, 화면 포커스 드라이버는 제공하지 않습니다. 앱의 이벤트는 controls에, 연속적인 값은 progress에 연결하세요.
+
+모션 감소 동작은 [접근성](./accessibility.md), 지원하는 텍스트·접근성 prop은 [컴포넌트 props](../../api/component-props.md)를 참고하세요.
diff --git a/docs/docs/ko/guide/usage/presets.mdx b/docs/docs/ko/guide/usage/presets.mdx
new file mode 100644
index 0000000..6d98397
--- /dev/null
+++ b/docs/docs/ko/guide/usage/presets.mdx
@@ -0,0 +1,87 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# 프리셋
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+프리셋은 `@react-native-motion-kit/text-motion/presets`에서 가져오는 레시피 팩토리입니다. 각 팩토리는 단어 분할, `nativeText()`, 타임라인, 효과를 미리 선택한 빌더를 반환합니다. `.component()`로 컴포넌트를 만들거나 빌더를 먼저 수정할 수 있습니다.
+
+```tsx
+import {
+  editorialRise,
+  gentleEmphasis,
+  softWave,
+} from '@react-native-motion-kit/text-motion/presets';
+
+const HeroTitle = editorialRise().component();
+const ProductCopy = softWave().component();
+const Label = gentleEmphasis().component();
+
+export function ProductHeader() {
+  return (
+    <>
+      <HeroTitle>단어에 움직임을 더하세요</HeroTitle>
+      <ProductCopy>짧은 제품 설명을 위한 재사용 가능한 애니메이션</ProductCopy>
+      <Label>새 기능</Label>
+    </>
+  );
+}
+```
+
+## 기본 레시피
+
+| 팩토리 | 타임라인 | 효과 |
+| --- | --- | --- |
+| `editorialRise()` | `stagger(0.032, { from: 'center' })` | `rise({ y: 14 })`, `fade()`, `scale({ from: 0.98 })` |
+| `softWave()` | `wave({ amplitude: 0.06, wavelength: 5 })` | `fade()`, `rise({ y: 8 })` |
+| `gentleEmphasis()` | `stagger(0.024)` | `pulse({ scale: 1.06 })`, `fade()` |
+
+세 팩토리는 모두 인수를 받지 않습니다. 지연 값의 단위는 초입니다. 별도의 `.motion()`이나 접근성 정책을 지정하지 않으므로 직접 설정하지 않으면 렌더러 기본값을 사용합니다.
+
+`editorialRise()`는 중앙에서 펼쳐지는 제목에 어울립니다. `softWave()`는 단어의 시작 시간을 달리해 부드러운 리듬을 만듭니다. `gentleEmphasis()`는 애니메이션 중간 부근에서 토큰을 잠시 확대했다가 최종 크기로 돌아오며, 반복 재생하지 않습니다.
+
+## 프리셋 미리보기
+
+### `editorialRise()`
+
+<MotionDemo id="editorial-rise" />
+
+### `softWave()`
+
+<MotionDemo id="soft-wave" />
+
+### `gentleEmphasis()`
+
+<MotionDemo id="gentle-emphasis" />
+
+## 프리셋 수정하기
+
+```tsx
+import {
+  parentLabelPolicy,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+import { editorialRise } from '@react-native-motion-kit/text-motion/presets';
+
+const base = editorialRise();
+
+const StandardTitle = base.component();
+const SlowerTitle = base
+  .timeline(stagger(0.06, { from: 'start' }))
+  .motion({ kind: 'timing', options: { duration: 500 } })
+  .accessibility(parentLabelPolicy({ reducedMotion: 'final-state' }))
+  .component();
+
+export function Titles() {
+  return (
+    <>
+      <StandardTitle>기본은 중앙에서 시작해요</StandardTitle>
+      <SlowerTitle>처음부터 천천히 나타나요</SlowerTitle>
+    </>
+  );
+}
+```
+
+빌더는 불변이므로 수정한 변형이 `StandardTitle`을 바꾸지 않습니다. 뒤에서 호출한 `.timeline(...)`은 프리셋 타임라인을 교체합니다. `.effect(...)`는 기존 효과를 교체하지 않고 추가합니다. 효과 구성을 바꾸거나 `overlayText()`로 실제 줄 단위 레시피를 만들려면 `defineTextMotion()`에서 시작하세요.
+
+프리셋도 커스텀 레시피와 같은 [컴포넌트 props](../../api/component-props.md)와 [재생 입력](./playback.mdx)을 사용합니다. 생성한 컴포넌트는 렌더 함수 밖에 정의하고 자식으로 일반 문자열을 전달하세요.
diff --git a/docs/docs/ko/guide/usage/recipes.mdx b/docs/docs/ko/guide/usage/recipes.mdx
new file mode 100644
index 0000000..0dcd350
--- /dev/null
+++ b/docs/docs/ko/guide/usage/recipes.mdx
@@ -0,0 +1,110 @@
+import { MotionDemo } from '../../../../components/MotionDemo';
+
+# 레시피
+
+라이브 미리보기는 React Native Web에서 실제 라이브러리를 실행합니다. 네이티브 줄 측정이 필요한 예제는 iOS 녹화로 표시합니다.
+
+`defineTextMotion()`은 불변 빌더를 만듭니다. 각 체인 메서드는 새로운 빌더를 반환하므로 기본 레시피를 공유하면서 원본을 바꾸지 않고 여러 변형을 만들 수 있습니다.
+
+## 컴포넌트 만들기
+
+```tsx
+import {
+  defineTextMotion,
+  fade,
+  nativeText,
+  rise,
+  stagger,
+  words,
+} from '@react-native-motion-kit/text-motion';
+
+const base = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(fade());
+
+const SoftTitle = base
+  .motion({ kind: 'timing', options: { duration: 360 } })
+  .component();
+
+const RisingTitle = base
+  .effect(rise({ y: 12 }))
+  .motion({ kind: 'spring', options: { damping: 16, stiffness: 140 } })
+  .component();
+
+export function Titles() {
+  return (
+    <>
+      <SoftTitle>부드럽게 등장해요</SoftTitle>
+      <RisingTitle>움직임을 조금 더해요</RisingTitle>
+    </>
+  );
+}
+```
+
+생성한 컴포넌트는 모듈 최상위에서 정의하세요. 렌더 중 `.component()`를 호출하면 매번 새로운 컴포넌트 타입이 생겨 재마운트와 의도하지 않은 자동 재생이 발생할 수 있습니다.
+
+## 각 단계가 결정하는 것
+
+| 단계 | 역할 |
+| --- | --- |
+| `.split(...)` | `nativeText()`가 사용할 원문 토큰 경계 |
+| `.layout(...)` | 렌더러와 지원하는 애니메이션 단위·효과 |
+| `.timeline(...)` | 초 단위의 토큰별 시작 지연 |
+| `.effect(...)` | 효과 추가. 여러 번 호출하면 누적됨 |
+| `.motion(...)` | 내부 자동 재생과 controls 명령에 사용할 timing 또는 spring |
+| `.accessibility(...)` | 부모 레이블, 장식용 토큰, 동작 줄이기 정책 |
+| `.component()` | 문자열 자식을 받는 React 컴포넌트 생성 |
+| `.recipe()` | 컴포넌트를 만들지 않고 레시피 설정 스냅샷 확인 |
+
+`.split()`, `.layout()`, `.timeline()`, `.motion()`, `.accessibility()`를 다시 호출하면 새 빌더에서 해당 설정을 교체합니다. `.effect()`는 기존 효과에 추가합니다. `.recipe()`는 layout을 선택하기 전에도 사용할 수 있습니다. 반환값은 설정 스냅샷으로 취급하고, 컴포넌트를 갱신하려고 직접 수정하지 마세요.
+
+## 렌더러 먼저 선택하기
+
+TypeScript에서는 `.layout(...)`으로 렌더러를 선택한 뒤에만 `.component()`를 사용할 수 있습니다. `.effect(...)`보다 먼저 렌더러를 선택하면 타입이 지원 가능한 효과를 안내합니다.
+
+`nativeText()`에서는 splitter를 명시해 단어, grapheme, 커스텀 토큰, 직접 작성한 줄바꿈 단위를 선택합니다. splitter를 생략하면 전체 입력이 하나의 원문 토큰이 됩니다. 기본 동작은 단어 분할이 아닙니다.
+
+`overlayText()`는 측정한 네이티브 줄을 애니메이션 단위로 사용합니다. 줄을 움직이려는 경우에도 `.split(...)`을 추가하지 마세요. 타입 시스템이 호환되지 않는 체인을 막고, 런타임 검사도 같은 조합을 거부합니다.
+
+## 호환되는 효과 조합하기
+
+<MotionDemo id="compose" />
+
+`.effect(fade().and(rise()))`와 `.effect(fade()).effect(rise())` 모두 fade와 rise를 추가합니다. 기본 효과인 `fade`, `rise`, `slide`, `scale`, `pulse`, `shake`는 두 렌더러에서 사용할 수 있습니다. `typewriter()`는 `nativeText()`를, `lineReveal()`은 `overlayText()`를 요구합니다.
+
+splitter, timeline, effect, renderer는 내부 구조를 숨긴 공개 핸들입니다. 내부 descriptor에 접근하는 대신 빌더에 전달하세요. 패키지 루트 API는 커스텀 효과 팩토리나 렌더러 확장 SDK를 내보내지 않습니다.
+
+## 재생 방식 설정하기
+
+<MotionDemo id="spring" />
+
+```tsx
+import { defineTextMotion, fade, nativeText } from '@react-native-motion-kit/text-motion';
+
+const TimedText = defineTextMotion()
+  .layout(nativeText())
+  .effect(fade())
+  .motion({ kind: 'timing', options: { duration: 400 } })
+  .component();
+
+const SpringText = defineTextMotion()
+  .layout(nativeText())
+  .effect(fade())
+  .motion({ kind: 'spring', options: { damping: 16, stiffness: 140 } })
+  .component();
+
+export function Message() {
+  return (
+    <>
+      <TimedText>문장 전체가 함께 나타나요</TimedText>
+      <SpringText>같은 단위를 스프링으로 움직여요</SpringText>
+    </>
+  );
+}
+```
+
+motion 옵션은 Reanimated의 해당 timing 또는 spring 설정을 따릅니다. 단, `reduceMotion`은 접근성 정책에서 설정합니다. 타임라인 지연의 단위는 초이고 timing의 `duration`은 밀리초입니다. easing처럼 함수인 옵션은 참조로 비교합니다. 다시 렌더링할 때 재생을 유지하려면 같은 함수 참조를 재사용하세요.
+
+인스턴스에 `progress`를 전달하면 앱이 재생을 담당하고 해당 인스턴스의 `.motion()`은 적용되지 않습니다. 레시피가 재생을 담당하면서 개별 명령을 받게 하려면 `controls`를 사용하세요. [재생 제어](./playback.mdx)와 [레시피 API](../../api/recipe.mdx)를 참고하세요.
diff --git a/docs/docs/ko/guide/usage/segmentation.md b/docs/docs/ko/guide/usage/segmentation.md
new file mode 100644
index 0000000..2baffd0
--- /dev/null
+++ b/docs/docs/ko/guide/usage/segmentation.md
@@ -0,0 +1,53 @@
+# 문자 분할
+
+모션을 정하기 전에 토큰 경계를 선택하세요. JavaScript의 코드 단위 하나가 화면의 문자 하나와 같지는 않습니다. 이모지, 결합 악센트, 분해된 한글은 여러 코드 포인트로 이루어질 수 있습니다.
+
+## 기본 splitter
+
+| Splitter | 단위 | 용도 |
+| --- | --- | --- |
+| `words()` | 단어, 문장부호, 공백 토큰 | 읽기 쉬운 단어 단위 제목과 제품 설명. |
+| `graphemes()` | 문자소를 고려한 토큰 | 짧은 글자 단위 진입 효과와 Typewriter. |
+| `lines()` | 명시적 줄바꿈으로 구분한 소스 단위 | 실험적인 줄바꿈 모션. 자동 줄바꿈은 감지하지 않습니다. |
+| `custom(fn)` | 앱이 정의한 문자열 또는 토큰 객체 | 제품별 경계나 별도의 분할 구현. |
+
+공백은 레이아웃 공간을 유지하면서 애니메이션 지연 슬롯을 소비하지 않습니다. 문장부호는 보이는 애니메이션 단위가 될 수 있습니다. 시그니처와 토큰 메타데이터는 [Splitters](../../api/splitters.mdx)를 참고하세요.
+
+너비와 글꼴에 따른 자동 줄바꿈을 기준으로 움직이려면 `.split(...)` 없이 `overlayText()`를 사용하세요. [렌더러](../../api/renderers.mdx)를 참고하세요.
+
+## `Intl.Segmenter`와 폴백
+
+`words()`와 `graphemes()`는 런타임에 `Intl.Segmenter`가 있으면 사용합니다. React Native/Hermes 환경에 따라 제공 여부가 달라질 수 있어 작은 폴백 토크나이저도 포함합니다. `Intl.Segmenter`가 없을 때 앱 시작 오류를 피하기 위한 목적으로만 폴리필을 설치할 필요는 없습니다.
+
+폴백은 `한` 같은 분해된 한글 음절과 관련된 완성형 한글·자모 경계를 처리하며 입력을 정규화하거나 다시 쓰지 않습니다. 일반적인 결합 문자와 이모지 시퀀스를 처리하지만, 모든 유니코드 문자소 규칙이나 언어별 단어 경계를 구현하지는 않습니다. `क्ष` 같은 일부 인도계 문자 결합은 여전히 나뉠 수 있고, 띄어쓰기가 없는 문자 체계는 더 정밀한 단어 분할이 필요할 수 있습니다.
+
+정확한 경계가 중요하면 Text Motion을 렌더링하기 전에 앱 진입점에서 `Intl.Segmenter` 구현을 제공하거나, 앱이 선택한 토크나이저를 `custom()`에 연결하세요. 앱에서 `@formatjs/intl-segmenter` 같은 폴리필을 선택할 수 있지만 이 라이브러리가 설치해 주지는 않습니다.
+
+## 원본 텍스트 보존
+
+사용자 정의 splitter는 공백과 토큰 순서를 보존해야 합니다. 예를 들어 제품의 규칙에 따라 공백 기준으로 나누되 공백 묶음을 그대로 유지할 수 있습니다.
+
+```tsx
+import {
+  custom,
+  defineTextMotion,
+  fade,
+  nativeText,
+  stagger,
+} from '@react-native-motion-kit/text-motion';
+
+const PhraseReveal = defineTextMotion()
+  .split(custom((input) => input.match(/\S+|\s+/gu) ?? []))
+  .layout(nativeText())
+  .timeline(stagger(0.06))
+  .effect(fade())
+  .component();
+
+export function Phrase() {
+  return <PhraseReveal>원본의 공백을 유지합니다.</PhraseReveal>;
+}
+```
+
+이 예제는 문장부호를 인접한 공백 없는 텍스트에 포함합니다. 앱이 정한 규칙이며 완전한 언어학적 단어 분할은 아닙니다. 소스 범위와 메타데이터가 중요하다면 `custom()`에서 이를 명시한 토큰 객체를 반환할 수도 있습니다.
+
+분할이 정확하다고 해서 토큰별 렌더링이 단일 네이티브 `Text`와 같아지지는 않습니다. 글자 조형, 합자, 양방향 텍스트, 줄바꿈, 복잡한 문자 체계는 선택한 렌더러에서 직접 확인해야 합니다. 예제 앱의 레이아웃 프로브는 [성능](./performance.md)을 참고하세요.
diff --git a/docs/docs/ko/index.md b/docs/docs/ko/index.md
new file mode 100644
index 0000000..f46ec4d
--- /dev/null
+++ b/docs/docs/ko/index.md
@@ -0,0 +1,37 @@
+---
+pageType: home
+
+hero:
+  name: React Native Text Motion
+  text: 글자에 리듬을 더하세요.
+  tagline: 텍스트 분할, 렌더러, 타임라인, 효과를 조합해 재사용 가능한 애니메이션을 만드세요.
+  actions:
+    - theme: brand
+      text: 빠르게 시작하기
+      link: /ko/guide/getting-started/quick-start.html
+    - theme: alt
+      text: 예제 살펴보기
+      link: /ko/guide/usage/examples.html
+  image:
+    src: /logo.png
+    alt: React Native Motion Kit 로고
+features:
+  - title: 프리셋으로 시작
+    details: editorialRise, softWave, gentleEmphasis를 몇 줄의 코드로 재사용 가능한 컴포넌트로 만드세요.
+    icon: ✨
+  - title: 나만의 레시피
+    details: 텍스트 분할 방식부터 토큰 렌더링, 시작 시점, 움직임까지 직접 조합하세요.
+    icon: 🧩
+  - title: 실제 렌더링된 줄의 움직임
+    details: overlayText와 lineReveal로 React Native가 실제 배치한 줄을 애니메이션하세요.
+    icon: 📐
+  - title: 레이아웃을 유지하는 타이핑
+    details: 완성된 문장의 토큰 배치를 유지하면서 글자를 차례로 표시하세요.
+    icon: ⌨️
+  - title: 명시적인 재생 제어
+    details: 이벤트에서 controls로 다시 재생하거나 Reanimated 공유 값으로 진행률을 제어하세요.
+    icon: 🎛️
+  - title: 읽을 수 있는 텍스트
+    details: 스크린 리더에는 전체 문장을 한 번 전달하고 모션 줄이기 정책을 선택하세요.
+    icon: ♿
+---
diff --git a/docs/docs/public/logo.png b/docs/docs/public/logo.png
new file mode 100644
index 0000000..b69e1e3
Binary files /dev/null and b/docs/docs/public/logo.png differ
diff --git a/docs/docs/public/media/README.md b/docs/docs/public/media/README.md
new file mode 100644
index 0000000..7c52659
--- /dev/null
+++ b/docs/docs/public/media/README.md
@@ -0,0 +1,84 @@
+# Native line reveal recording
+
+`line-reveal.mp4` and `line-reveal-light.mp4` show the actual `overlayText()` +
+`lineReveal()` recipe from `example/src/docsDemoRecipes.ts`, rendered on an iPhone
+17 simulator with iOS 26.2. Both use the English text “Every rendered line / finds
+its own rhythm.” The documentation selects the recording and poster matching its
+current theme. The clips demonstrate the API, not device performance.
+
+The source was served from this workspace through Expo Metro. The recording uses
+the current React Native 0.85.3, Reanimated 4.3.1, and Worklets 0.8.3 example setup.
+The captures use the current neutral preview palette and medium-weight text.
+They are cropped to the text area, encoded as H.264, and have no audio. Each
+poster is a frame extracted from its recording. No animation was recreated with
+CSS. The original clips were refreshed on 2026-10-31.
+
+The current captures include the line-isolation correction from commit
+`a0188e9`, submitted separately in [PR #5](https://github.com/react-native-motion-kit/react-native-text-motion/pull/5).
+The recording refresh belongs to the documentation PR; the renderer patch and
+regression tests remain isolated in that library PR.
+
+To capture a fresh version after changing the recipe, launch the repository's
+native example with these environment variables:
+
+```sh
+EXPO_PUBLIC_TEXT_MOTION_DOCS=1 \
+EXPO_PUBLIC_TEXT_MOTION_DEMO_ID=line-reveal \
+EXPO_PUBLIC_TEXT_MOTION_CAPTURE=1 \
+EXPO_PUBLIC_TEXT_MOTION_CAPTURE_THEME=dark \
+pnpm -C example start
+```
+
+Use an isolated simulator, record with `xcrun simctl io <udid> recordVideo`, and
+stop recording with Ctrl-C. Capture mode replays every three seconds; normal
+documentation previews do not loop. Keep the caption tracks and poster aligned
+with the replacement recording.
+
+Repeat with `EXPO_PUBLIC_TEXT_MOTION_CAPTURE_THEME=light` for the light recording.
+Capture mode defaults to English; ordinary browser previews still follow their
+`lang` query parameter.
+
+## Native width reflow recording
+
+`width-reflow.mp4` and `width-reflow-light.mp4` were captured on 2026-10-31
+from the real `width-reflow` recipe in `example/src/docsDemoRecipes.ts` and
+`WidthReflowPreview` in `example/src/DocsDemo.tsx`. The English phrase has no
+authored line breaks: “Every rendered line finds its own rhythm when the
+available width changes.” Width 220 produces four native measured lines;
+width 320 produces three. Both theme recordings retain the actual native
+Narrow/Wide, 0%/50%/100%, and Replay controls.
+
+A disposable iPhone 17 / iOS 26.2 simulator
+(`19E183A5-4500-42A2-8BC1-63A263BEC37C`, deleted after capture) ran the existing
+matching `com.anonymous.example` Debug binary. Source was served from this
+workspace with Metro on port 8090, offline with two workers, using:
+
+```sh
+EXPO_PUBLIC_TEXT_MOTION_DOCS=1 \
+EXPO_PUBLIC_TEXT_MOTION_DEMO_ID=width-reflow \
+EXPO_PUBLIC_TEXT_MOTION_CAPTURE=1 \
+EXPO_PUBLIC_TEXT_MOTION_CAPTURE_THEME=dark \
+EXPO_NO_TELEMETRY=1 CI=1 pnpm_config_verify_deps_before_run=false \
+pnpm -C example exec expo start --offline --port 8090 --max-workers 2 --clear
+```
+
+The light capture used `EXPO_PUBLIC_TEXT_MOTION_CAPTURE_THEME=light` after a
+Metro restart with cleared cache. The capture-only 12-second cycle holds
+progress at 0.5 while changing from narrow to wide at 2.5 seconds and back at
+5 seconds, then replays narrow at 6.5 seconds and wide at 9 seconds. Each
+replay uses `withTiming(1, { duration: 1400 })`. The exported 11.87-second clips
+start at the held narrow state and end before the next cycle reset; timing
+was checked against the recorded native width-selection borders.
+
+`xcrun simctl io ... recordVideo --codec=h264` supplied the native 1206×2622
+source footage. The verified stage/control crop is 1032×1000 at x=90, y=900;
+exports are 744×720 H.264, 30 fps, yuv420p, with fast-start metadata and no
+audio. At a documentation preview height of 360 px, this is 372 px wide.
+JPEG posters are fully readable final narrow frames extracted at 8.4 seconds
+from each export. English and Korean WebVTT tracks describe the same recorded
+sequence. No animation was recreated outside the native app.
+
+These captures include the line-isolation correction from `a0188e9` in
+[PR #5](https://github.com/react-native-motion-kit/react-native-text-motion/pull/5).
+The renderer patch remains in that separate library PR. The recordings show
+native remeasurement and mask behavior, not device-performance measurements.
diff --git a/docs/docs/public/media/line-reveal-light.jpg b/docs/docs/public/media/line-reveal-light.jpg
new file mode 100644
index 0000000..091f3ee
Binary files /dev/null and b/docs/docs/public/media/line-reveal-light.jpg differ
diff --git a/docs/docs/public/media/line-reveal-light.mp4 b/docs/docs/public/media/line-reveal-light.mp4
new file mode 100644
index 0000000..a9f4221
Binary files /dev/null and b/docs/docs/public/media/line-reveal-light.mp4 differ
diff --git a/docs/docs/public/media/line-reveal.en.vtt b/docs/docs/public/media/line-reveal.en.vtt
new file mode 100644
index 0000000..f5447ce
--- /dev/null
+++ b/docs/docs/public/media/line-reveal.en.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00.000 --> 00:12.000
+The headline reveals one rendered line at a time. Recorded with overlayText and lineReveal on the iOS simulator.
diff --git a/docs/docs/public/media/line-reveal.jpg b/docs/docs/public/media/line-reveal.jpg
new file mode 100644
index 0000000..4d0e5bf
Binary files /dev/null and b/docs/docs/public/media/line-reveal.jpg differ
diff --git a/docs/docs/public/media/line-reveal.ko.vtt b/docs/docs/public/media/line-reveal.ko.vtt
new file mode 100644
index 0000000..359e5b2
--- /dev/null
+++ b/docs/docs/public/media/line-reveal.ko.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00.000 --> 00:12.000
+실제 렌더링된 줄이 차례로 나타납니다. iOS 시뮬레이터에서 overlayText와 lineReveal로 녹화한 화면입니다.
diff --git a/docs/docs/public/media/line-reveal.mp4 b/docs/docs/public/media/line-reveal.mp4
new file mode 100644
index 0000000..705b6c5
Binary files /dev/null and b/docs/docs/public/media/line-reveal.mp4 differ
diff --git a/docs/docs/public/media/width-reflow-light.jpg b/docs/docs/public/media/width-reflow-light.jpg
new file mode 100644
index 0000000..d558a51
Binary files /dev/null and b/docs/docs/public/media/width-reflow-light.jpg differ
diff --git a/docs/docs/public/media/width-reflow-light.mp4 b/docs/docs/public/media/width-reflow-light.mp4
new file mode 100644
index 0000000..19a897a
Binary files /dev/null and b/docs/docs/public/media/width-reflow-light.mp4 differ
diff --git a/docs/docs/public/media/width-reflow.en.vtt b/docs/docs/public/media/width-reflow.en.vtt
new file mode 100644
index 0000000..4e5a699
--- /dev/null
+++ b/docs/docs/public/media/width-reflow.en.vtt
@@ -0,0 +1,16 @@
+WEBVTT
+
+00:00.000 --> 00:02.500
+At 50% progress, the unbroken phrase wraps into four measured lines at width 220.
+
+00:02.500 --> 00:05.000
+Width 320 remeasures the phrase into three lines while keeping progress at 50%.
+
+00:05.000 --> 00:06.500
+Width 220 restores four lines at the same progress.
+
+00:06.500 --> 00:09.000
+Replay reveals the four narrow lines over 1.4 seconds.
+
+00:09.000 --> 00:11.866
+Replay reveals the three wide lines over 1.4 seconds. Recorded on iOS.
diff --git a/docs/docs/public/media/width-reflow.jpg b/docs/docs/public/media/width-reflow.jpg
new file mode 100644
index 0000000..2c6ea59
Binary files /dev/null and b/docs/docs/public/media/width-reflow.jpg differ
diff --git a/docs/docs/public/media/width-reflow.ko.vtt b/docs/docs/public/media/width-reflow.ko.vtt
new file mode 100644
index 0000000..df995c5
--- /dev/null
+++ b/docs/docs/public/media/width-reflow.ko.vtt
@@ -0,0 +1,16 @@
+WEBVTT
+
+00:00.000 --> 00:02.500
+진행률 50%에서 줄바꿈 없는 문장이 폭 220에 맞춰 네 줄로 배치됩니다.
+
+00:02.500 --> 00:05.000
+진행률 50%를 유지한 채 폭 320에서 실제 줄을 다시 측정해 세 줄로 배치합니다.
+
+00:05.000 --> 00:06.500
+같은 진행률에서 폭 220으로 돌아가 네 줄로 배치합니다.
+
+00:06.500 --> 00:09.000
+좁은 폭의 네 줄을 1.4초 동안 다시 재생합니다.
+
+00:09.000 --> 00:11.866
+넓은 폭의 세 줄을 1.4초 동안 다시 재생합니다. iOS에서 녹화한 화면입니다.
diff --git a/docs/docs/public/media/width-reflow.mp4 b/docs/docs/public/media/width-reflow.mp4
new file mode 100644
index 0000000..d11338e
Binary files /dev/null and b/docs/docs/public/media/width-reflow.mp4 differ
diff --git a/docs/env.d.ts b/docs/env.d.ts
new file mode 100644
index 0000000..35306c6
--- /dev/null
+++ b/docs/env.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000..f205d8d
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "docs",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "pnpm run sources:generate && pnpm run demos:build && rspress build",
+    "check": "pnpm run sources:generate && node --test scripts/generate-demo-sources.test.mjs && node scripts/check-docs.mjs",
+    "demos:build": "node scripts/build-demos.mjs",
+    "dev": "pnpm run sources:generate && pnpm run demos:build && rspress dev",
+    "preview": "rspress preview",
+    "sources:generate": "node scripts/generate-demo-sources.mjs",
+    "typecheck": "pnpm run sources:generate && tsc --noEmit"
+  },
+  "devDependencies": {
+    "@rspress/core": "2.0.21",
+    "@shikijs/transformers": "4.4.3",
+    "@types/node": "^24.13.4",
+    "@types/react": "^19.2.0",
+    "react": "catalog:",
+    "react-dom": "19.2.3",
+    "typescript": "catalog:"
+  }
+}
diff --git a/docs/rspress.config.ts b/docs/rspress.config.ts
new file mode 100644
index 0000000..c453a1f
--- /dev/null
+++ b/docs/rspress.config.ts
@@ -0,0 +1,47 @@
+import { defineConfig } from '@rspress/core';
+import { transformerNotationDiff, transformerNotationHighlight } from '@shikijs/transformers';
+import { fileURLToPath } from 'node:url';
+
+const docsRoot = fileURLToPath(new URL('./docs', import.meta.url));
+
+export default defineConfig({
+  root: docsRoot,
+  lang: 'en',
+  locales: [
+    { lang: 'en', label: 'English' },
+    { lang: 'ko', label: '한국어' },
+  ],
+  title: 'React Native Text Motion',
+  description: 'Composable text motion for React Native, powered by Reanimated.',
+  icon: '/logo.png',
+  logo: '/logo.png',
+  logoText: 'Text Motion',
+  llms: true,
+  ssg: true,
+  markdown: {
+    showLineNumbers: true,
+    defaultWrapCode: false,
+    shiki: {
+      transformers: [transformerNotationDiff(), transformerNotationHighlight()],
+    },
+  },
+  themeConfig: {
+    lastUpdated: true,
+    socialLinks: [
+      {
+        icon: 'github',
+        mode: 'link',
+        content: 'https://github.com/react-native-motion-kit/react-native-text-motion',
+      },
+      {
+        icon: 'npm',
+        mode: 'link',
+        content: 'https://www.npmjs.com/package/@react-native-motion-kit/text-motion',
+      },
+    ],
+    editLink: {
+      docRepoBaseUrl:
+        'https://github.com/react-native-motion-kit/react-native-text-motion/tree/main/docs/docs',
+    },
+  },
+});
diff --git a/docs/scripts/build-demos.mjs b/docs/scripts/build-demos.mjs
new file mode 100644
index 0000000..00a9305
--- /dev/null
+++ b/docs/scripts/build-demos.mjs
@@ -0,0 +1,38 @@
+import { spawnSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const exampleRoot = fileURLToPath(new URL('../../example/', import.meta.url));
+const outputDirectory = fileURLToPath(new URL('../docs/public/demos/', import.meta.url));
+
+const result = spawnSync(
+  'pnpm',
+  [
+    'exec',
+    'expo',
+    'export',
+    '--platform',
+    'web',
+    '--output-dir',
+    outputDirectory,
+    '--max-workers',
+    '2',
+  ],
+  {
+    cwd: exampleRoot,
+    env: {
+      ...process.env,
+      CI: '1',
+      EXPO_NO_TELEMETRY: '1',
+      EXPO_PUBLIC_TEXT_MOTION_DOCS: '1',
+      EXPO_PUBLIC_TEXT_MOTION_CAPTURE: '0',
+      EXPO_PUBLIC_TEXT_MOTION_DEMO_ID: '',
+      TEXT_MOTION_DOCS_WEB_EXPORT: '1',
+    },
+    stdio: 'inherit',
+  },
+);
+
+if (result.error) {
+  throw result.error;
+}
+process.exit(result.status ?? 1);
diff --git a/docs/scripts/check-docs.mjs b/docs/scripts/check-docs.mjs
new file mode 100644
index 0000000..5dc08cc
--- /dev/null
+++ b/docs/scripts/check-docs.mjs
@@ -0,0 +1,174 @@
+import assert from 'node:assert/strict';
+import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = fileURLToPath(new URL('../docs/', import.meta.url));
+const locales = ['en', 'ko'];
+const demos = JSON.parse(readFileSync(new URL('../demos.json', import.meta.url), 'utf8'));
+const demoSources = JSON.parse(
+  readFileSync(new URL('../.cache/demo-sources.json', import.meta.url), 'utf8'),
+);
+const demoCounts = { en: {}, ko: {} };
+
+assert.deepEqual(
+  Object.keys(demoSources.recipes).toSorted(),
+  Object.keys(demos).toSorted(),
+  'Every demo must have matching source code.',
+);
+assert.equal(
+  demoSources.player,
+  readFileSync(new URL('../../example/src/DocsDemo.tsx', import.meta.url), 'utf8'),
+  'Player source must match the actual preview app.',
+);
+
+function filesIn(directory) {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const target = path.join(directory, entry.name);
+    return entry.isDirectory() ? filesIn(target) : [target];
+  });
+}
+
+function pageNames(locale) {
+  const directory = path.join(root, locale);
+  return filesIn(directory)
+    .filter((file) => /\.mdx?$/.test(file))
+    .map((file) => path.relative(directory, file))
+    .toSorted();
+}
+
+function checkLink(file, value) {
+  if (/^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i.test(value)) {
+    return;
+  }
+
+  const target = decodeURIComponent(value.split(/[?#]/)[0]);
+  if (!target) {
+    return;
+  }
+
+  let resolved;
+  if (target.startsWith('/')) {
+    const asset = path.join(root, 'public', target.slice(1));
+    if (existsSync(asset) && statSync(asset).isFile()) {
+      return;
+    }
+    const localized = target.startsWith('/ko/') ? target.slice(4) : target.slice(1);
+    resolved = path.join(root, target.startsWith('/ko/') ? 'ko' : 'en', localized);
+  } else {
+    resolved = path.resolve(path.dirname(file), target);
+  }
+
+  resolved = resolved.replace(/\.html$/, '.md');
+  const candidates = [
+    resolved,
+    resolved.replace(/\.md$/, '.mdx'),
+    `${resolved}.md`,
+    `${resolved}.mdx`,
+    path.join(resolved, 'index.md'),
+  ];
+  assert(
+    candidates.some((candidate) => existsSync(candidate) && statSync(candidate).isFile()),
+    `Broken local link in ${path.relative(root, file)}: ${value}`,
+  );
+}
+
+assert.deepEqual(
+  pageNames('en'),
+  pageNames('ko'),
+  'English and Korean pages must have matching paths.',
+);
+
+for (const locale of locales) {
+  for (const file of filesIn(path.join(root, locale))) {
+    if (/\.mdx?$/.test(file)) {
+      const content = readFileSync(file, 'utf8').replace(/^```[^\n]*\n[\s\S]*?^```/gm, '');
+      for (const match of content.matchAll(/<MotionDemo\s+id="([^"]+)"\s*\/>/g)) {
+        assert(Object.hasOwn(demos, match[1]), `Unknown demo in ${file}: ${match[1]}`);
+        demoCounts[locale][match[1]] = (demoCounts[locale][match[1]] ?? 0) + 1;
+      }
+      for (const match of content.matchAll(/^import .* from ['"]([^'"]+)['"]/gm)) {
+        const component = path.resolve(path.dirname(file), match[1]);
+        assert(
+          existsSync(component) || existsSync(`${component}.tsx`),
+          `Missing MDX import in ${file}: ${match[1]}`,
+        );
+      }
+      for (const match of content.matchAll(/\]\(([^\s)]+)(?:\s+"[^"]*")?\)/g)) {
+        checkLink(file, match[1]);
+      }
+      for (const match of content.matchAll(/^\s*(?:link|src):\s*(\/\S+)/gm)) {
+        checkLink(file, match[1]);
+      }
+    } else if (path.basename(file) === '_nav.json') {
+      for (const item of JSON.parse(readFileSync(file, 'utf8'))) {
+        // Rspress prefixes navigation links with the current non-default locale.
+        const link =
+          locale !== 'en' && item.link.startsWith('/') ? `/${locale}${item.link}` : item.link;
+        checkLink(file, link);
+      }
+    } else if (path.basename(file) === '_meta.json') {
+      for (const item of JSON.parse(readFileSync(file, 'utf8'))) {
+        const name = typeof item === 'string' ? item : item.name;
+        if (typeof item === 'object' && item.type === 'dir') {
+          assert(
+            existsSync(path.join(path.dirname(file), name)),
+            `Missing sidebar directory: ${name}`,
+          );
+        } else {
+          checkLink(file, `${name}.md`);
+        }
+      }
+    }
+  }
+}
+
+assert.deepEqual(demoCounts.en, demoCounts.ko, 'Demo placement must match between languages.');
+for (const id of Object.keys(demos)) {
+  assert(demoCounts.en[id] > 0, `Missing demonstration: ${id}`);
+}
+for (const asset of [
+  'line-reveal.mp4',
+  'line-reveal.jpg',
+  'line-reveal-light.mp4',
+  'line-reveal-light.jpg',
+  'line-reveal.en.vtt',
+  'line-reveal.ko.vtt',
+  'width-reflow.mp4',
+  'width-reflow.jpg',
+  'width-reflow-light.mp4',
+  'width-reflow-light.jpg',
+  'width-reflow.en.vtt',
+  'width-reflow.ko.vtt',
+]) {
+  const file = path.join(root, 'public/media', asset);
+  assert(existsSync(file) && statSync(file).size > 0, `Missing native demo asset: ${asset}`);
+}
+
+const exportsFile = fileURLToPath(
+  new URL('../../packages/text-motion/src/index.tsx', import.meta.url),
+);
+const valueExports = [
+  ...readFileSync(exportsFile, 'utf8').matchAll(/export \{([^}]+)\} from/g),
+].flatMap((match) => match[1].split(',').map((name) => name.trim()));
+const presetsFile = fileURLToPath(
+  new URL('../../packages/text-motion/src/presets/index.ts', import.meta.url),
+);
+const presetExports = [
+  ...readFileSync(presetsFile, 'utf8').matchAll(/export function (\w+)\(/g),
+].map((match) => match[1]);
+for (const locale of locales) {
+  const content = pageNames(locale)
+    .map((name) => readFileSync(path.join(root, locale, name), 'utf8'))
+    .join('\n');
+  for (const name of [...valueExports, ...presetExports]) {
+    assert(
+      content.includes(`\`${name}\``) || content.includes(`${name}(`),
+      `Undocumented ${locale} API: ${name}`,
+    );
+  }
+}
+
+process.stdout.write(
+  `Checked ${pageNames('en').length} pages per language: parity, local links, navigation, public API coverage, and ${Object.keys(demos).length} demos.\n`,
+);
diff --git a/docs/scripts/generate-demo-sources.mjs b/docs/scripts/generate-demo-sources.mjs
new file mode 100644
index 0000000..adf9741
--- /dev/null
+++ b/docs/scripts/generate-demo-sources.mjs
@@ -0,0 +1,207 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+
+function unwrap(expression) {
+  while (
+    ts.isSatisfiesExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isParenthesizedExpression(expression)
+  ) {
+    expression = expression.expression;
+  }
+  return expression;
+}
+
+/** Read source only; never execute the React Native modules being documented. */
+export function generateDemoSources({ recipesSource, playerSource, catalog }) {
+  const fileName = '/docsDemoRecipes.ts';
+  const options = { noLib: true, noResolve: true, target: ts.ScriptTarget.Latest };
+  const source = ts.createSourceFile(fileName, recipesSource, options.target, true);
+  if (source.parseDiagnostics.length > 0) {
+    throw new Error(ts.flattenDiagnosticMessageText(source.parseDiagnostics[0].messageText, '\n'));
+  }
+
+  const host = ts.createCompilerHost(options);
+  host.getSourceFile = (name) => (name === fileName ? source : undefined);
+  host.fileExists = (name) => name === fileName;
+  host.readFile = (name) => (name === fileName ? recipesSource : undefined);
+  const checker = ts.createProgram([fileName], options, host).getTypeChecker();
+  const declarations = new Map();
+  const declarationSymbols = new Map();
+  const variantDeclarations = [];
+  const imports = [];
+  const importSymbols = new Set();
+
+  for (const statement of source.statements) {
+    if (ts.isVariableStatement(statement)) {
+      for (const declaration of statement.declarationList.declarations) {
+        if (!ts.isIdentifier(declaration.name)) continue;
+        if (declaration.name.text === 'docsDemoVariants') {
+          variantDeclarations.push(declaration);
+        }
+        declarations.set(declaration.name.text, declaration);
+        declarationSymbols.set(checker.getSymbolAtLocation(declaration.name), declaration);
+      }
+    } else if (ts.isImportDeclaration(statement)) {
+      imports.push(statement);
+      const clause = statement.importClause;
+      if (clause?.name) {
+        importSymbols.add(checker.getSymbolAtLocation(clause.name));
+      }
+      if (clause?.namedBindings) {
+        if (ts.isNamedImports(clause.namedBindings)) {
+          for (const element of clause.namedBindings.elements) {
+            importSymbols.add(checker.getSymbolAtLocation(element.name));
+          }
+        } else {
+          importSymbols.add(checker.getSymbolAtLocation(clause.namedBindings.name));
+        }
+      }
+    }
+  }
+
+  function objectInitializer(expression, seen = new Set()) {
+    if (!expression) throw new Error('Missing demo initializer.');
+    expression = unwrap(expression);
+    if (ts.isObjectLiteralExpression(expression)) return expression;
+    if (ts.isIdentifier(expression) && !seen.has(expression.text)) {
+      seen.add(expression.text);
+      return objectInitializer(declarations.get(expression.text)?.initializer, seen);
+    }
+    throw new Error('Demo values must be object literals or top-level object aliases.');
+  }
+
+  function registryEntries(registry, label) {
+    const entries = new Map();
+    for (const property of registry.properties) {
+      if (
+        !ts.isPropertyAssignment(property) ||
+        (!ts.isIdentifier(property.name) && !ts.isStringLiteral(property.name))
+      ) {
+        throw new Error(`The ${label} registry must use explicit named properties.`);
+      }
+      const name = property.name.text;
+      if (entries.has(name)) throw new Error(`Duplicate ${label} ID: ${name}`);
+      entries.set(name, objectInitializer(property.initializer));
+    }
+    return entries;
+  }
+
+  const entries = registryEntries(
+    objectInitializer(declarations.get('docsDemoRecipes')?.initializer),
+    'demo',
+  );
+
+  const catalogIds = Object.keys(catalog).toSorted();
+  if (JSON.stringify([...entries.keys()].toSorted()) !== JSON.stringify(catalogIds)) {
+    throw new Error('The demo registry and documentation catalog must have identical IDs.');
+  }
+
+  function extractSource(initializer) {
+    const neededDeclarations = new Set();
+    const neededImports = new Set();
+
+    function visit(node) {
+      if (ts.isIdentifier(node)) {
+        const symbol = checker.getSymbolAtLocation(node);
+        const declaration = declarationSymbols.get(symbol);
+        if (declaration && !neededDeclarations.has(declaration)) {
+          neededDeclarations.add(declaration);
+          if (declaration.initializer) visit(declaration.initializer);
+        } else if (importSymbols.has(symbol)) {
+          neededImports.add(symbol);
+        }
+      }
+      ts.forEachChild(node, visit);
+    }
+    visit(initializer);
+
+    const chunks = [];
+    for (const statement of imports) {
+      const clause = statement.importClause;
+      if (!clause) continue;
+      const bindings = [];
+      if (clause.name && neededImports.has(checker.getSymbolAtLocation(clause.name))) {
+        bindings.push(clause.name.getText(source));
+      }
+      if (clause.namedBindings) {
+        if (ts.isNamedImports(clause.namedBindings)) {
+          const named = clause.namedBindings.elements.filter((element) =>
+            neededImports.has(checker.getSymbolAtLocation(element.name)),
+          );
+          if (named.length > 0) {
+            bindings.push(`{ ${named.map((element) => element.getText(source)).join(', ')} }`);
+          }
+        } else if (neededImports.has(checker.getSymbolAtLocation(clause.namedBindings.name))) {
+          bindings.push(clause.namedBindings.getText(source));
+        }
+      }
+      if (bindings.length > 0) {
+        chunks.push(
+          `import ${clause.isTypeOnly ? 'type ' : ''}${bindings.join(', ')} from ${statement.moduleSpecifier.getText(source)};`,
+        );
+      }
+    }
+
+    for (const declaration of declarations.values()) {
+      if (!neededDeclarations.has(declaration)) continue;
+      const list = declaration.parent;
+      const kind =
+        list.flags & ts.NodeFlags.Const ? 'const' : list.flags & ts.NodeFlags.Let ? 'let' : 'var';
+      chunks.push(`${kind} ${declaration.getText(source)};`);
+    }
+    chunks.push(`const demo = ${initializer.getText(source)};`);
+    return `${chunks.join('\n\n')}\n`;
+  }
+
+  const recipes = Object.fromEntries(
+    Object.keys(catalog).map((id) => [id, extractSource(entries.get(id))]),
+  );
+  const variants = {};
+  if (variantDeclarations.length > 0) {
+    const declaration = variantDeclarations[0];
+    const statement = declaration.parent.parent;
+    if (
+      variantDeclarations.length !== 1 ||
+      !(declaration.parent.flags & ts.NodeFlags.Const) ||
+      !statement.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)
+    ) {
+      throw new Error(
+        'The variant registry must be one top-level exported const docsDemoVariants.',
+      );
+    }
+    const variantEntries = registryEntries(objectInitializer(declaration.initializer), 'variant');
+    for (const [id, variantOptions] of variantEntries) {
+      if (!Object.hasOwn(catalog, id)) throw new Error(`Unknown variant demo ID: ${id}`);
+      variants[id] = Object.fromEntries(
+        [...registryEntries(variantOptions, 'variant option')].map(([option, initializer]) => [
+          option,
+          extractSource(initializer),
+        ]),
+      );
+    }
+  }
+
+  return { recipes, player: playerSource, variants };
+}
+
+if (process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  const result = generateDemoSources({
+    recipesSource: readFileSync(
+      new URL('../../example/src/docsDemoRecipes.ts', import.meta.url),
+      'utf8',
+    ),
+    playerSource: readFileSync(new URL('../../example/src/DocsDemo.tsx', import.meta.url), 'utf8'),
+    catalog: JSON.parse(readFileSync(new URL('../demos.json', import.meta.url), 'utf8')),
+  });
+  mkdirSync(new URL('../.cache/', import.meta.url), { recursive: true });
+  writeFileSync(
+    new URL('../.cache/demo-sources.json', import.meta.url),
+    `${JSON.stringify(result, null, 2)}\n`,
+  );
+  process.stdout.write(
+    `Extracted current source for ${Object.keys(result.recipes).length} demos.\n`,
+  );
+}
diff --git a/docs/scripts/generate-demo-sources.test.mjs b/docs/scripts/generate-demo-sources.test.mjs
new file mode 100644
index 0000000..3621dfd
--- /dev/null
+++ b/docs/scripts/generate-demo-sources.test.mjs
@@ -0,0 +1,252 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+import ts from 'typescript';
+
+import { generateDemoSources } from './generate-demo-sources.mjs';
+
+const recipesSource = readFileSync(
+  new URL('../../example/src/docsDemoRecipes.ts', import.meta.url),
+  'utf8',
+);
+const playerSource = readFileSync(
+  new URL('../../example/src/DocsDemo.tsx', import.meta.url),
+  'utf8',
+);
+const catalog = JSON.parse(readFileSync(new URL('../demos.json', import.meta.url), 'utf8'));
+
+test('extracts every current demo with its exact shared dependencies and player source', () => {
+  const result = generateDemoSources({ recipesSource, playerSource, catalog });
+  assert.deepEqual(Object.keys(result.recipes), Object.keys(catalog));
+  assert.equal(Object.keys(result.recipes).length, Object.keys(catalog).length);
+  assert.equal(result.player, playerSource);
+  assert.match(result.recipes.fade, /const accessibility = parentLabelPolicy/);
+  assert.match(result.recipes.fade, /const base = defineTextMotion/);
+  assert.match(result.recipes.fade, /duration: 520/);
+  assert.match(result.recipes.fade, /const phrase =/);
+  assert.match(result.recipes.fade, /base\.effect\(fade\(\)\)\.component\(\)/);
+  assert.doesNotMatch(result.recipes.fade, /\bpulse\b|\btypewriter\b|\bReveal\b/);
+  assert.match(result.recipes.words, /const Reveal = base\.effect/);
+  assert.match(result.recipes.words, /Component: Reveal/);
+  assert.equal(result.recipes.typewriter, result.recipes['typewriter-progress']);
+  assert.match(result.recipes.typewriter, /\.effect\(typewriter\(\)\)/);
+  assert.doesNotMatch(result.recipes.typewriter, /typewriterDemo|const base/);
+  assert.match(result.recipes['line-reveal'], /\.layout\(overlayText\(\)\)/);
+  assert.match(result.recipes['line-reveal'], /duration: 650/);
+  assert.doesNotMatch(result.recipes['line-reveal'], /nativeText|const base/);
+
+  for (const [id, recipe] of Object.entries(result.recipes)) {
+    const diagnostics = ts.transpileModule(recipe, {
+      fileName: `${id}.ts`,
+      compilerOptions: { target: ts.ScriptTarget.Latest },
+      reportDiagnostics: true,
+    }).diagnostics;
+    assert.deepEqual(diagnostics, [], `Invalid generated TypeScript for ${id}`);
+  }
+});
+
+test('extracts current stagger directions without unrelated variant constructors', () => {
+  const result = generateDemoSources({ recipesSource, playerSource, catalog });
+  const directions = ['start', 'center', 'end', 'edges'];
+  assert.deepEqual(Object.keys(result.variants), ['stagger']);
+  assert.deepEqual(Object.keys(result.variants.stagger), directions);
+  assert.equal(result.variants.stagger.start, result.recipes.stagger);
+  for (const direction of directions) {
+    const source = result.variants.stagger[direction];
+    assert.ok(
+      source.includes(
+        `Component: staggerBase.timeline(stagger(0.14, { from: '${direction}' })).component()`,
+      ),
+    );
+    assert.match(source, /const staggerBase = defineTextMotion\(\)/);
+    assert.doesNotMatch(source, /const stagger(?:Start|Center|End|Edges)\b|docsDemoVariants/);
+    for (const other of directions.filter((value) => value !== direction)) {
+      assert.ok(!source.includes(`from: '${other}'`));
+      assert.notEqual(source, result.variants.stagger[other]);
+    }
+    assert.deepEqual(
+      ts.transpileModule(source, {
+        compilerOptions: { target: ts.ScriptTarget.Latest },
+        reportDiagnostics: true,
+      }).diagnostics,
+      [],
+    );
+  }
+});
+
+test('extracts width reflow with natural wrapping text and both configured widths', () => {
+  const result = generateDemoSources({ recipesSource, playerSource, catalog });
+  const source = result.recipes['width-reflow'];
+  assert.match(source, /widths: \{ narrow: 220, wide: 320 \}/);
+  assert.match(
+    source,
+    /Every rendered line finds its own rhythm when the available width changes\./,
+  );
+  assert.match(source, /\.layout\(overlayText\(\)\)/);
+  assert.match(source, /\.effect\(lineReveal\(\{ y: 24 \}\)\)/);
+  assert.doesNotMatch(source, /\\n/);
+});
+
+test('reflects source parameter and shared player edits without hand-maintained snippets', () => {
+  const updatedPlayer = `${playerSource}\n// Source freshness marker\n`;
+  const result = generateDemoSources({
+    recipesSource: recipesSource.replace('duration: 520', 'duration: 777'),
+    playerSource: updatedPlayer,
+    catalog,
+  });
+  assert.match(result.recipes.fade, /duration: 777/);
+  assert.match(result.recipes.words, /duration: 777/);
+  assert.doesNotMatch(result.recipes.fade, /duration: 520/);
+  assert.match(result.recipes['line-reveal'], /duration: 650/);
+  assert.equal(result.player, updatedPlayer);
+});
+
+test('uses bound references rather than property names or shadowed callback identifiers', () => {
+  const source = `
+import { custom, fade } from '@react-native-motion-kit/text-motion';
+const input = 'unrelated outer value';
+const docsDemoRecipes = {
+  sample: { Component: custom((input) => [input]), text: { fade: 'property only' } },
+};`;
+  const result = generateDemoSources({
+    recipesSource: source,
+    playerSource: '',
+    catalog: { sample: {} },
+  });
+  assert.match(result.recipes.sample, /import \{ custom \}/);
+  assert.doesNotMatch(result.recipes.sample, /import \{ custom, fade/);
+  assert.doesNotMatch(result.recipes.sample, /unrelated outer value/);
+  assert.match(result.recipes.sample, /custom\(\(input\) => \[input\]\)/);
+});
+
+test('fails when registry IDs drift from the documented catalog', () => {
+  assert.throws(
+    () => generateDemoSources({ recipesSource, playerSource, catalog: { missing: {} } }),
+    /identical IDs/,
+  );
+});
+
+test('fails on ambiguous registries and invalid syntax instead of showing invented code', () => {
+  assert.throws(
+    () =>
+      generateDemoSources({
+        recipesSource: 'const docsDemoRecipes = { ...other };',
+        playerSource: '',
+        catalog: {},
+      }),
+    /explicit named properties/,
+  );
+  assert.throws(
+    () =>
+      generateDemoSources({
+        recipesSource: 'const docsDemoRecipes = {',
+        playerSource: '',
+        catalog: {},
+      }),
+    /expected/,
+  );
+});
+
+const variantSource = `
+import { defineTextMotion, stagger } from '@react-native-motion-kit/text-motion';
+const base = defineTextMotion({ duration: 520 });
+const startDelay = 30;
+const centerDelay = 45;
+const Start = base.stagger(stagger({ from: 'start', delay: startDelay })).component();
+const Center = base.stagger(stagger({ from: 'center', delay: centerDelay })).component();
+const End = base.stagger(stagger({ from: 'end', delay: 60 })).component();
+const Edges = base.stagger(stagger({ from: 'edges', delay: 75 })).component();
+const startRecipe = { Component: Start, text: 'Start' };
+const startAlias = startRecipe;
+const docsDemoRecipes = { stagger: startAlias };
+export const docsDemoVariants = {
+  stagger: {
+    start: startAlias,
+    center: { Component: Center, text: 'Center' },
+    end: { Component: End, text: 'End' },
+    edges: { Component: Edges, text: 'Edges' },
+  },
+};`;
+
+function extractVariants(source = variantSource) {
+  return generateDemoSources({ recipesSource: source, playerSource: '', catalog: { stagger: {} } });
+}
+
+test('extracts each variant with its exact dependency closure and no other directions', () => {
+  const result = extractVariants();
+  assert.deepEqual(Object.keys(result.variants), ['stagger']);
+  assert.deepEqual(Object.keys(result.variants.stagger), ['start', 'center', 'end', 'edges']);
+  assert.equal(result.variants.stagger.start, result.recipes.stagger);
+  for (const [option, source] of Object.entries(result.variants.stagger)) {
+    assert.match(source, /const base = defineTextMotion\(\{ duration: 520 \}\)/);
+    assert.ok(source.includes(`from: '${option}'`));
+    for (const other of ['start', 'center', 'end', 'edges'].filter((name) => name !== option)) {
+      assert.ok(!source.includes(`from: '${other}'`));
+    }
+    assert.doesNotMatch(source, /docsDemoVariants|docsDemoRecipes/);
+    assert.deepEqual(
+      ts.transpileModule(source, {
+        compilerOptions: { target: ts.ScriptTarget.Latest },
+        reportDiagnostics: true,
+      }).diagnostics,
+      [],
+    );
+  }
+  assert.match(result.variants.stagger.start, /const startDelay = 30/);
+  assert.doesNotMatch(result.variants.stagger.start, /centerDelay|const Center/);
+});
+
+test('propagates variant parameter edits only to the corresponding extracted closure', () => {
+  const before = extractVariants();
+  const after = extractVariants(variantSource.replace('centerDelay = 45', 'centerDelay = 123'));
+  assert.match(after.variants.stagger.center, /const centerDelay = 123/);
+  assert.notEqual(after.variants.stagger.center, before.variants.stagger.center);
+  for (const option of ['start', 'end', 'edges']) {
+    assert.equal(after.variants.stagger[option], before.variants.stagger[option]);
+  }
+  assert.equal(after.recipes.stagger, before.recipes.stagger);
+});
+
+test('returns an empty variants object when the optional registry is absent', () => {
+  const result = extractVariants("const docsDemoRecipes = { stagger: { text: 'Example' } };");
+  assert.deepEqual(result.variants, {});
+});
+
+test('rejects ambiguous variant registries, unknown IDs and implicit option properties', () => {
+  const base = "const docsDemoRecipes = { stagger: { text: 'Example' } };\n";
+  const invalid = [
+    ['const docsDemoVariants = {};', /top-level exported const/],
+    ['export let docsDemoVariants = {};', /top-level exported const/],
+    [
+      'export const docsDemoVariants = {}; export const docsDemoVariants = {};',
+      /top-level exported const/,
+    ],
+    ['export const docsDemoVariants = { missing: {} };', /Unknown variant demo ID: missing/],
+    ['export const docsDemoVariants = { stagger: {}, stagger: {} };', /Duplicate variant ID/],
+    ['export const docsDemoVariants = { ...other };', /explicit named properties/],
+    [
+      'export const docsDemoVariants = { stagger: { start: {}, start: {} } };',
+      /Duplicate variant option ID/,
+    ],
+    ['export const docsDemoVariants = { stagger: { ...other } };', /explicit named properties/],
+    [
+      'const start = {}; export const docsDemoVariants = { stagger: { start } };',
+      /explicit named properties/,
+    ],
+    [
+      "export const docsDemoVariants = { stagger: { ['start']: {} } };",
+      /explicit named properties/,
+    ],
+    [
+      'export const docsDemoVariants = { stagger: { start: makeRecipe() } };',
+      /object literals or top-level object aliases/,
+    ],
+    [
+      'const a = b; const b = a; export const docsDemoVariants = { stagger: { start: a } };',
+      /object literals or top-level object aliases/,
+    ],
+  ];
+  for (const [registry, error] of invalid) {
+    assert.throws(() => extractVariants(base + registry), error, registry);
+  }
+});
diff --git a/docs/theme/index.css b/docs/theme/index.css
new file mode 100644
index 0000000..8797933
--- /dev/null
+++ b/docs/theme/index.css
@@ -0,0 +1,15 @@
+.rp-flex:has(.text-motion-install) {
+  width: 100%;
+}
+
+.text-motion-install {
+  width: 100%;
+  max-width: 640px;
+  min-height: auto;
+}
+
+.text-motion-install > p {
+  margin-bottom: 0.75rem;
+  color: var(--rp-c-text-2);
+  font-size: 0.95rem;
+}
diff --git a/docs/theme/index.tsx b/docs/theme/index.tsx
new file mode 100644
index 0000000..14dbf99
--- /dev/null
+++ b/docs/theme/index.tsx
@@ -0,0 +1,27 @@
+// oxlint-disable-next-line import/no-unassigned-import -- Load the global Rspress theme styles.
+import './index.css';
+import { useLang } from '@rspress/core/runtime';
+import { HomeLayout as BasicHomeLayout, PackageManagerTabs } from '@rspress/core/theme-original';
+
+function HomeLayout() {
+  const lang = useLang();
+
+  return (
+    <BasicHomeLayout
+      afterHeroActions={
+        <div className="rspress-doc text-motion-install">
+          <p>
+            {lang === 'ko'
+              ? '다음 타이틀에 움직임을 더해보세요.'
+              : 'Give your next title a little motion.'}
+          </p>
+          <PackageManagerTabs command="install @react-native-motion-kit/text-motion react-native-reanimated react-native-worklets" />
+        </div>
+      }
+    />
+  );
+}
+
+export { HomeLayout };
+// oxlint-disable-next-line import/export
+export * from '@rspress/core/theme-original';
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 0000000..b7d4f2e
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "ESNext"],
+    "types": ["node", "react"]
+  },
+  "include": ["env.d.ts", "rspress.config.ts", "theme/**/*", "components/**/*"]
+}
diff --git a/example/app.config.js b/example/app.config.js
new file mode 100644
index 0000000..bf00801
--- /dev/null
+++ b/example/app.config.js
@@ -0,0 +1,13 @@
+module.exports = ({ config }) => {
+  if (process.env.TEXT_MOTION_DOCS_WEB_EXPORT !== '1') {
+    return config;
+  }
+
+  return {
+    ...config,
+    experiments: {
+      ...config.experiments,
+      baseUrl: '/demos',
+    },
+  };
+};
diff --git a/example/index.js b/example/index.js
index 018d06f..c18a892 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,8 +1,9 @@
 import { registerRootComponent } from 'expo';
 
 import App from './src/App';
+import DocsDemo from './src/DocsDemo';
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,
 // the environment is set up appropriately
-registerRootComponent(App);
+registerRootComponent(process.env.EXPO_PUBLIC_TEXT_MOTION_DOCS === '1' ? DocsDemo : App);
diff --git a/example/src/DocsDemo.tsx b/example/src/DocsDemo.tsx
new file mode 100644
index 0000000..abb1b35
--- /dev/null
+++ b/example/src/DocsDemo.tsx
@@ -0,0 +1,590 @@
+import type { SharedValue } from 'react-native-reanimated';
+
+import { useTextMotionControls } from '@react-native-motion-kit/text-motion';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import {
+  cancelAnimation,
+  useAnimatedReaction,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+import demoCatalog from '../../docs/demos.json';
+import { readTextMotionSplitterDescriptor } from '../../packages/text-motion/src/recipe/descriptors';
+import {
+  clampTextMotionProgress,
+  createTextMotionControlledTimelineSpan,
+  createTextMotionDelaySecondsByItemIndex,
+  mapTextMotionControlledProgressToItemProgress,
+} from '../../packages/text-motion/src/renderers/rendererMotion';
+import {
+  docsDemoRecipes,
+  docsDemoVariants,
+  typewriterRecipe,
+  type DocsDemoId,
+  type DocsDemoLanguage,
+  type DocsStaggerDirection,
+} from './docsDemoRecipes';
+
+const captureMode = process.env.EXPO_PUBLIC_TEXT_MOTION_CAPTURE === '1';
+
+type DemoTheme = 'dark' | 'light';
+type DemoPalette = {
+  background: string;
+  foreground: string;
+  muted: string;
+  border: string;
+  control: string;
+  selected: string;
+};
+
+const palettes: Record<DemoTheme, DemoPalette> = {
+  dark: {
+    background: '#111111',
+    foreground: '#f4f4f5',
+    muted: '#a1a1aa',
+    border: '#303033',
+    control: '#18181b',
+    selected: '#27272a',
+  },
+  light: {
+    background: '#ffffff',
+    foreground: '#18181b',
+    muted: '#62626a',
+    border: '#dedee1',
+    control: '#fafafa',
+    selected: '#ededf0',
+  },
+};
+
+const PaletteContext = createContext<DemoPalette>(palettes.dark);
+
+function initialSelection(): {
+  id: DocsDemoId;
+  language: DocsDemoLanguage;
+  embedded: boolean;
+  theme: DemoTheme;
+  direction: DocsStaggerDirection;
+} {
+  let requested = process.env.EXPO_PUBLIC_TEXT_MOTION_DEMO_ID;
+  let language: DocsDemoLanguage = 'en';
+  let embedded = false;
+  let direction: DocsStaggerDirection = 'start';
+  let theme: DemoTheme =
+    captureMode && process.env.EXPO_PUBLIC_TEXT_MOTION_CAPTURE_THEME === 'light' ? 'light' : 'dark';
+  if (Platform.OS === 'web' && typeof window !== 'undefined') {
+    const parameters = new URLSearchParams(window.location.search);
+    requested = parameters.get('demo') ?? requested;
+    language = parameters.get('lang') === 'ko' ? 'ko' : 'en';
+    embedded = parameters.get('embedded') === '1';
+    theme = parameters.get('theme') === 'light' ? 'light' : 'dark';
+    const requestedDirection = parameters.get('variant');
+    if (requestedDirection && Object.hasOwn(docsDemoVariants.stagger, requestedDirection)) {
+      direction = requestedDirection as DocsStaggerDirection;
+    }
+  }
+  return {
+    id: requested && Object.hasOwn(demoCatalog, requested) ? (requested as DocsDemoId) : 'words',
+    language,
+    embedded,
+    theme,
+    direction,
+  };
+}
+
+const copy = {
+  en: {
+    replay: 'Replay',
+    remount: 'Remount',
+    play: 'Play',
+    reset: 'Reset',
+    stop: 'Stop',
+    ready: 'Ready',
+    playing: 'Playback requested',
+    stopped: 'Stopped · current state kept',
+    initial: 'Reset · initial state',
+    progress: 'Timeline progress',
+    visibleCharacters: 'Visible characters',
+    characterCountNote: 'Excludes spaces; includes punctuation and emoji.',
+    reducedMotion: 'Reduced motion is enabled. The complete phrase stays visible.',
+    controlsNote: 'Play moves toward the final state; stop/play is not an exact pause/resume API.',
+    narrow: 'Narrow',
+    wide: 'Wide',
+    widthNote: 'Change width at 50% to compare the measured lines.',
+    nativeOnly:
+      'This renderer measures native text lines. Watch its iOS recording in the documentation.',
+  },
+  ko: {
+    replay: '다시 재생',
+    remount: '다시 마운트',
+    play: '재생',
+    reset: '초기화',
+    stop: '정지',
+    ready: '준비됨',
+    playing: '재생 요청됨',
+    stopped: '정지됨 · 현재 상태 유지',
+    initial: '초기화됨 · 시작 상태',
+    progress: '타임라인 진행률',
+    visibleCharacters: '현재 표시된 글자 수',
+    characterCountNote: '공백 제외 · 문장부호와 이모지 포함',
+    reducedMotion: '모션 줄이기가 켜져 있어 전체 문장을 표시합니다.',
+    controlsNote:
+      '재생은 최종 상태를 향해 움직입니다. 정지 후 재생은 정확한 일시 정지·이어 재생 API가 아닙니다.',
+    narrow: '좁게',
+    wide: '넓게',
+    widthNote: '50%에서 폭을 바꾸며 실제 줄 배치를 비교하세요.',
+    nativeOnly: '이 렌더러는 네이티브 텍스트 줄을 측정합니다. 문서의 iOS 녹화 영상을 확인하세요.',
+  },
+};
+
+type DemoButtonProps = {
+  label: string;
+  onPress(): void;
+  selected?: boolean;
+  primary?: boolean;
+};
+
+function DemoButton({ label, onPress, selected, primary = false }: DemoButtonProps) {
+  const palette = useContext(PaletteContext);
+  const [focused, setFocused] = useState(false);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={selected === undefined ? undefined : { selected }}
+      onPress={onPress}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      style={({ pressed }) => [
+        styles.button,
+        { borderColor: palette.border, backgroundColor: palette.control },
+        (selected || primary) && { borderColor: palette.foreground },
+        selected && { backgroundColor: palette.selected },
+        focused && {
+          outlineColor: palette.foreground,
+          outlineOffset: 2,
+          outlineStyle: 'solid',
+          outlineWidth: 2,
+        },
+        pressed && styles.pressedButton,
+      ]}
+    >
+      <Text
+        style={[
+          styles.buttonText,
+          { color: palette.foreground },
+          (selected || primary) && styles.emphasizedButtonText,
+        ]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+function ProgressReadout({
+  progress,
+  language,
+  reducedMotion,
+  typewriterText,
+}: {
+  progress: SharedValue<number>;
+  language: DocsDemoLanguage;
+  reducedMotion: boolean;
+  typewriterText?: string;
+}) {
+  const [snapshot, setSnapshot] = useState({ percent: 0, visible: 0 });
+  const palette = useContext(PaletteContext);
+  const content = copy[language];
+  const plan = useMemo(() => {
+    if (typewriterText === undefined) return undefined;
+
+    // This diagnostic lives in the repository example, like the existing layout
+    // probes. Reuse the renderer's helpers without adding a public library API.
+    const recipe = typewriterRecipe.recipe();
+    if (!recipe.splitter) throw new Error('The Typewriter demo requires a splitter.');
+    const count = readTextMotionSplitterDescriptor(recipe.splitter)
+      .split(typewriterText)
+      .filter((token) => token.text.trim().length > 0).length;
+    const delays = createTextMotionDelaySecondsByItemIndex(recipe, count);
+
+    return {
+      delays,
+      span: createTextMotionControlledTimelineSpan(delays),
+      reducedMotionFinalState: recipe.accessibility?.reducedMotion === 'final-state',
+    };
+  }, [typewriterText]);
+
+  useAnimatedReaction(
+    () => {
+      const value = clampTextMotionProgress(progress.value);
+      const revealProgress = reducedMotion && plan?.reducedMotionFinalState ? 1 : value;
+      let visible = 0;
+      if (plan) {
+        for (const delay of plan.delays) {
+          if (
+            mapTextMotionControlledProgressToItemProgress({
+              progress: revealProgress,
+              itemDelaySeconds: delay,
+              totalTimelineSpan: plan.span,
+            }) > 0
+          )
+            visible++;
+        }
+      }
+      return { percent: Math.round(value * 100), visible };
+    },
+    (current, previous) => {
+      if (
+        !previous ||
+        current.percent !== previous.percent ||
+        current.visible !== previous.visible
+      ) {
+        scheduleOnRN(setSnapshot, current);
+      }
+    },
+    [progress, plan, reducedMotion],
+  );
+
+  return (
+    <View style={styles.progressReadout}>
+      <Text style={[styles.note, { color: palette.muted }]}>
+        {content.progress}: {snapshot.percent}%
+      </Text>
+      {plan ? (
+        <>
+          <Text style={[styles.status, { color: palette.foreground }]}>
+            {content.visibleCharacters}:{' '}
+            {reducedMotion && plan.reducedMotionFinalState ? plan.delays.length : snapshot.visible}{' '}
+            / {plan.delays.length}
+          </Text>
+          <Text style={[styles.note, { color: palette.muted }]}>{content.characterCountNote}</Text>
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+function WidthReflowPreview({ language }: { language: DocsDemoLanguage }) {
+  const demo = docsDemoRecipes['width-reflow'];
+  const MotionText = demo.Component;
+  const [widthMode, setWidthMode] = useState<'narrow' | 'wide'>('narrow');
+  const [targetProgress, setTargetProgress] = useState(0.5);
+  const progress = useSharedValue(0.5);
+  const reducedMotion = useReducedMotion();
+  const palette = useContext(PaletteContext);
+  const content = copy[language];
+
+  const changeProgress = (value: number) => {
+    cancelAnimation(progress);
+    progress.value = value;
+    setTargetProgress(value);
+  };
+  const replay = useCallback(() => {
+    progress.value = 0;
+    progress.value = withTiming(1, { duration: 1400 });
+    setTargetProgress(1);
+  }, [progress]);
+
+  useEffect(() => {
+    if (!captureMode || reducedMotion) return;
+    let timers: ReturnType<typeof setTimeout>[] = [];
+    const cycle = () => {
+      setWidthMode('narrow');
+      progress.value = 0.5;
+      setTargetProgress(0.5);
+      timers = [
+        setTimeout(() => setWidthMode('wide'), 2500),
+        setTimeout(() => setWidthMode('narrow'), 5000),
+        setTimeout(replay, 6500),
+        setTimeout(() => {
+          setWidthMode('wide');
+          replay();
+        }, 9000),
+      ];
+    };
+    cycle();
+    const interval = setInterval(cycle, 12000);
+    return () => {
+      timers.forEach(clearTimeout);
+      clearInterval(interval);
+      cancelAnimation(progress);
+    };
+  }, [progress, reducedMotion, replay]);
+
+  useEffect(() => () => cancelAnimation(progress), [progress]);
+
+  return (
+    <View style={styles.widthDemo}>
+      <View style={styles.widthStage}>
+        <View style={{ width: demo.widths[widthMode] }}>
+          <MotionText progress={progress} style={[styles.widthText, { color: palette.foreground }]}>
+            {demo.text[language]}
+          </MotionText>
+        </View>
+      </View>
+      <View style={styles.widthControls}>
+        <View style={styles.actions}>
+          {(['narrow', 'wide'] as const).map((mode) => (
+            <DemoButton
+              key={mode}
+              label={`${content[mode]} · ${demo.widths[mode]}`}
+              selected={widthMode === mode}
+              onPress={() => setWidthMode(mode)}
+            />
+          ))}
+        </View>
+        <View style={styles.actions}>
+          {[0, 0.5, 1].map((value) => (
+            <DemoButton
+              key={value}
+              label={`${value * 100}%`}
+              selected={targetProgress === value}
+              onPress={() => changeProgress(value)}
+            />
+          ))}
+          <DemoButton label={content.replay} onPress={replay} />
+        </View>
+        <Text style={[styles.note, { color: palette.muted }]}>{content.widthNote}</Text>
+      </View>
+    </View>
+  );
+}
+
+export default function DocsDemo() {
+  const [{ id, language, embedded, theme: initialTheme, direction }] = useState(initialSelection);
+  const [theme, setTheme] = useState<DemoTheme>(initialTheme);
+  const [mountKey, setMountKey] = useState(0);
+  const [status, setStatus] = useState<'ready' | 'playing' | 'stopped' | 'initial'>('ready');
+  const [targetProgress, setTargetProgress] = useState(0);
+  const controls = useTextMotionControls();
+  const progress = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+  const content = copy[language];
+  const demo = id === 'stagger' ? docsDemoVariants.stagger[direction] : docsDemoRecipes[id];
+  const MotionText = demo.Component;
+  const isProgress = id === 'progress' || id === 'typewriter-progress';
+  const isControls = id === 'controls';
+  const nativeOnly = demoCatalog[id].kind === 'native' && Platform.OS === 'web';
+  const palette = palettes[theme];
+
+  useEffect(() => {
+    if (Platform.OS !== 'web' || !embedded || typeof window === 'undefined') return;
+
+    const updateTheme = (event: MessageEvent) => {
+      if (event.source !== window.parent) return;
+      const message: unknown = event.data;
+      if (
+        typeof message === 'object' &&
+        message !== null &&
+        'type' in message &&
+        message.type === 'text-motion-theme' &&
+        'theme' in message &&
+        (message.theme === 'dark' || message.theme === 'light')
+      ) {
+        setTheme(message.theme);
+      }
+    };
+
+    window.addEventListener('message', updateTheme);
+    return () => window.removeEventListener('message', updateTheme);
+  }, [embedded]);
+
+  useEffect(() => {
+    if (!captureMode || reducedMotion || nativeOnly || id === 'width-reflow') return;
+    const initialReplay = setTimeout(controls.replay, 750);
+    const replayInterval = setInterval(controls.replay, 3000);
+    return () => {
+      clearTimeout(initialReplay);
+      clearInterval(replayInterval);
+    };
+  }, [controls, id, nativeOnly, reducedMotion]);
+
+  useEffect(() => () => cancelAnimation(progress), [progress]);
+
+  const changeProgress = (value: number) => {
+    cancelAnimation(progress);
+    progress.value = value;
+    setTargetProgress(value);
+  };
+
+  return (
+    <PaletteContext.Provider value={palette}>
+      <View
+        style={[
+          styles.root,
+          { backgroundColor: palette.background },
+          captureMode && styles.captureRoot,
+        ]}
+      >
+        {!embedded && (
+          <Text style={[styles.label, { color: palette.muted }]}>{demoCatalog[id].label}</Text>
+        )}
+        <View style={styles.stage}>
+          {nativeOnly ? (
+            <Text style={[styles.note, { color: palette.muted }]}>{content.nativeOnly}</Text>
+          ) : id === 'width-reflow' ? (
+            <WidthReflowPreview language={language} />
+          ) : isProgress ? (
+            <MotionText
+              progress={progress}
+              style={[styles.motionText, { color: palette.foreground }]}
+            >
+              {demo.text[language]}
+            </MotionText>
+          ) : id === 'autoplay' ? (
+            <MotionText key={mountKey} style={[styles.motionText, { color: palette.foreground }]}>
+              {demo.text[language]}
+            </MotionText>
+          ) : (
+            <MotionText
+              controls={controls}
+              style={[styles.motionText, { color: palette.foreground }]}
+            >
+              {demo.text[language]}
+            </MotionText>
+          )}
+        </View>
+
+        {!nativeOnly && !captureMode && id !== 'width-reflow' && (
+          <View style={[styles.footer, { borderTopColor: palette.border }]}>
+            <View style={styles.actions}>
+              {isProgress ? (
+                <>
+                  {[0, 0.25, 0.5, 0.75, 1].map((value) => (
+                    <DemoButton
+                      key={value}
+                      label={`${value * 100}%`}
+                      onPress={() => changeProgress(value)}
+                      selected={targetProgress === value}
+                    />
+                  ))}
+                  <DemoButton
+                    label={content.play}
+                    onPress={() => {
+                      progress.value = withTiming(1, { duration: 1800 });
+                      setTargetProgress(1);
+                    }}
+                  />
+                  <DemoButton label={content.reset} onPress={() => changeProgress(0)} />
+                </>
+              ) : id === 'autoplay' ? (
+                <DemoButton
+                  label={content.remount}
+                  onPress={() => setMountKey((value) => value + 1)}
+                />
+              ) : (
+                <>
+                  {isControls && (
+                    <DemoButton
+                      label={content.play}
+                      onPress={() => {
+                        controls.play();
+                        setStatus('playing');
+                      }}
+                    />
+                  )}
+                  <DemoButton
+                    label={content.replay}
+                    onPress={() => {
+                      controls.replay();
+                      setStatus('playing');
+                    }}
+                    primary
+                  />
+                  {isControls && (
+                    <>
+                      <DemoButton
+                        label={content.reset}
+                        onPress={() => {
+                          controls.reset();
+                          setStatus('initial');
+                        }}
+                      />
+                      <DemoButton
+                        label={content.stop}
+                        onPress={() => {
+                          controls.stop();
+                          setStatus('stopped');
+                        }}
+                      />
+                    </>
+                  )}
+                </>
+              )}
+            </View>
+            {isProgress && (
+              <ProgressReadout
+                progress={progress}
+                language={language}
+                reducedMotion={reducedMotion}
+                typewriterText={id === 'typewriter-progress' ? demo.text[language] : undefined}
+              />
+            )}
+            {isControls && (
+              <>
+                <Text
+                  accessibilityLiveRegion="polite"
+                  style={[styles.status, { color: palette.foreground }]}
+                >
+                  {content[status]}
+                </Text>
+                <Text style={[styles.note, { color: palette.muted }]}>{content.controlsNote}</Text>
+              </>
+            )}
+            {reducedMotion && (
+              <Text style={[styles.note, { color: palette.muted }]}>{content.reducedMotion}</Text>
+            )}
+          </View>
+        )}
+      </View>
+    </PaletteContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    padding: 16,
+  },
+  captureRoot: { justifyContent: 'center', paddingHorizontal: 30 },
+  widthDemo: { width: '100%', alignItems: 'center', gap: 16 },
+  widthStage: { minHeight: 230, justifyContent: 'center', alignItems: 'center', width: '100%' },
+  widthText: { fontSize: 24, fontWeight: '500', lineHeight: 34, textAlign: 'left' },
+  widthControls: { gap: 8, width: 320, maxWidth: '100%' },
+  label: { fontSize: 12, fontWeight: '500' },
+  stage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: 100,
+    paddingVertical: 20,
+  },
+  motionText: {
+    fontSize: 26,
+    fontWeight: '500',
+    lineHeight: 36,
+    textAlign: 'center',
+    maxWidth: '100%',
+  },
+  footer: { gap: 8, borderTopWidth: 1, paddingTop: 12 },
+  progressReadout: { gap: 4 },
+  actions: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+  button: {
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    minHeight: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  pressedButton: { opacity: 0.72 },
+  buttonText: { fontSize: 12, fontWeight: '500' },
+  emphasizedButtonText: { fontWeight: '600' },
+  status: { fontSize: 12, lineHeight: 18 },
+  note: { fontSize: 12, lineHeight: 18 },
+});
diff --git a/example/src/docsDemoRecipes.ts b/example/src/docsDemoRecipes.ts
new file mode 100644
index 0000000..8c169c1
--- /dev/null
+++ b/example/src/docsDemoRecipes.ts
@@ -0,0 +1,235 @@
+import type { TextMotionComponent } from '@react-native-motion-kit/text-motion';
+
+import {
+  custom,
+  defineTextMotion,
+  fade,
+  graphemes,
+  lineReveal,
+  lines,
+  nativeText,
+  overlayText,
+  parallel,
+  parentLabelPolicy,
+  pulse,
+  rise,
+  scale,
+  sequence,
+  shake,
+  slide,
+  stagger,
+  typewriter,
+  wave,
+  words,
+} from '@react-native-motion-kit/text-motion';
+import {
+  editorialRise,
+  gentleEmphasis,
+  softWave,
+} from '@react-native-motion-kit/text-motion/presets';
+
+import demoCatalog from '../../docs/demos.json';
+
+export type DocsDemoId = keyof typeof demoCatalog;
+export type DocsDemoLanguage = 'en' | 'ko';
+
+type DocsDemoRecipe = {
+  Component: TextMotionComponent;
+  text: Record<DocsDemoLanguage, string>;
+  widths?: { narrow: number; wide: number };
+};
+
+const accessibility = parentLabelPolicy({ reducedMotion: 'final-state' });
+const base = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .timeline(stagger(0.08))
+  .motion({ kind: 'timing', options: { duration: 520 } })
+  .accessibility(accessibility);
+const Reveal = base.effect(fade().and(rise({ y: 12 }))).component();
+const phrase = {
+  en: 'Give your words a little motion.',
+  ko: '글자에 작은 움직임을 더해보세요.',
+};
+
+export const typewriterRecipe = defineTextMotion()
+  .split(graphemes())
+  .layout(nativeText())
+  .timeline(stagger(0.04))
+  .effect(typewriter())
+  .motion({ kind: 'timing', options: { duration: 0 } })
+  .accessibility(accessibility);
+
+const typewriterDemo = {
+  Component: typewriterRecipe.component(),
+  text: { en: 'Hello, motion! 👋', ko: '안녕, 텍스트 모션! 👋' },
+};
+
+const staggerBase = defineTextMotion()
+  .split(words())
+  .layout(nativeText())
+  .effect(fade().and(rise({ y: 12 })))
+  .motion({ kind: 'timing', options: { duration: 420 } })
+  .accessibility(accessibility);
+const staggerStart = {
+  Component: staggerBase.timeline(stagger(0.14, { from: 'start' })).component(),
+  text: phrase,
+};
+const staggerCenter = {
+  Component: staggerBase.timeline(stagger(0.14, { from: 'center' })).component(),
+  text: phrase,
+};
+const staggerEnd = {
+  Component: staggerBase.timeline(stagger(0.14, { from: 'end' })).component(),
+  text: phrase,
+};
+const staggerEdges = {
+  Component: staggerBase.timeline(stagger(0.14, { from: 'edges' })).component(),
+  text: phrase,
+};
+
+export const docsDemoVariants = {
+  stagger: {
+    start: staggerStart,
+    center: staggerCenter,
+    end: staggerEnd,
+    edges: staggerEdges,
+  },
+};
+export type DocsStaggerDirection = keyof typeof docsDemoVariants.stagger;
+
+export const docsDemoRecipes = {
+  'editorial-rise': {
+    Component: editorialRise().accessibility(accessibility).component(),
+    text: { en: 'Design motion that feels native.', ko: '자연스럽게 움직이는 타이틀을 만드세요.' },
+  },
+  'soft-wave': { Component: softWave().accessibility(accessibility).component(), text: phrase },
+  'gentle-emphasis': {
+    Component: gentleEmphasis().accessibility(accessibility).component(),
+    text: { en: 'A little emphasis goes a long way.', ko: '작은 강조가 시선을 이끕니다.' },
+  },
+  fade: { Component: base.effect(fade()).component(), text: phrase },
+  rise: { Component: base.effect(rise()).component(), text: phrase },
+  slide: { Component: base.effect(slide()).component(), text: phrase },
+  scale: { Component: base.effect(scale()).component(), text: phrase },
+  pulse: { Component: base.effect(pulse()).component(), text: phrase },
+  shake: { Component: base.effect(shake()).component(), text: phrase },
+  typewriter: typewriterDemo,
+  'typewriter-progress': typewriterDemo,
+  'line-reveal': {
+    Component: defineTextMotion()
+      .layout(overlayText())
+      .timeline(stagger(0.16))
+      .effect(lineReveal({ y: 24 }))
+      .motion({ kind: 'timing', options: { duration: 650 } })
+      .accessibility(accessibility)
+      .component(),
+    text: {
+      en: 'Every rendered line\nfinds its own rhythm.',
+      ko: '실제 배치된 줄마다\n리듬을 더하세요.',
+    },
+  },
+  'width-reflow': {
+    Component: defineTextMotion()
+      .layout(overlayText())
+      .timeline(stagger(0.16))
+      .effect(lineReveal({ y: 24 }))
+      .accessibility(accessibility)
+      .component(),
+    text: {
+      en: 'Every rendered line finds its own rhythm when the available width changes.',
+      ko: 'Every rendered line finds its own rhythm when the available width changes.',
+    },
+    widths: { narrow: 220, wide: 320 },
+  },
+  words: { Component: Reveal, text: phrase },
+  graphemes: {
+    Component: defineTextMotion()
+      .split(graphemes())
+      .layout(nativeText())
+      .timeline(stagger(0.04))
+      .effect(fade().and(rise()))
+      .motion({ kind: 'timing', options: { duration: 420 } })
+      .accessibility(accessibility)
+      .component(),
+    text: { en: 'One grapheme at a time.', ko: '한 글자씩 움직여요. 👩🏽‍💻' },
+  },
+  lines: {
+    Component: defineTextMotion()
+      .split(lines())
+      .layout(nativeText())
+      .timeline(stagger(0.22))
+      .effect(slide().and(fade()))
+      .motion({ kind: 'timing', options: { duration: 520 } })
+      .accessibility(accessibility)
+      .component(),
+    text: {
+      en: 'An authored line.\nAnd another line.',
+      ko: '직접 나눈 첫 번째 줄.\n그리고 두 번째 줄.',
+    },
+  },
+  custom: {
+    Component: defineTextMotion()
+      .split(custom((input) => input.split(/( \/ )/)))
+      .layout(nativeText())
+      .timeline(stagger(0.22))
+      .effect(fade().and(rise()))
+      .motion({ kind: 'timing', options: { duration: 520 } })
+      .accessibility(accessibility)
+      .component(),
+    text: { en: 'Your phrase / Your rhythm', ko: '원하는 구절 / 원하는 리듬' },
+  },
+  stagger: staggerStart,
+  wave: {
+    Component: base
+      .timeline(wave({ amplitude: 0.25, wavelength: 4 }))
+      .effect(fade().and(rise()))
+      .component(),
+    text: phrase,
+  },
+  sequence: {
+    Component: base
+      .timeline(sequence(stagger(0.05), wave({ amplitude: 0.18, wavelength: 4 })))
+      .effect(fade().and(rise()))
+      .component(),
+    text: phrase,
+  },
+  parallel: {
+    Component: base
+      .timeline(parallel(stagger(0.1), wave({ amplitude: 0.2, wavelength: 4 })))
+      .effect(fade().and(rise()))
+      .component(),
+    text: phrase,
+  },
+  compose: {
+    Component: base
+      .effect(
+        fade()
+          .and(rise({ y: 20 }))
+          .and(scale({ from: 0.9 })),
+      )
+      .component(),
+    text: phrase,
+  },
+  autoplay: { Component: Reveal, text: phrase },
+  controls: {
+    Component: base
+      .timeline(stagger(0.14))
+      .motion({ kind: 'timing', options: { duration: 1100 } })
+      .effect(fade().and(rise({ y: 20 })))
+      .component(),
+    text: { en: 'Play, replay, reset, and stop.', ko: '재생하고, 다시 시작하고, 멈춰보세요.' },
+  },
+  progress: { Component: Reveal, text: phrase },
+  spring: {
+    Component: base
+      .effect(
+        fade()
+          .and(rise({ y: 24 }))
+          .and(scale({ from: 0.9 })),
+      )
+      .motion({ kind: 'spring', options: { damping: 14, stiffness: 160 } })
+      .component(),
+    text: phrase,
+  },
+} satisfies Record<DocsDemoId, DocsDemoRecipe>;
diff --git a/example/tsconfig.json b/example/tsconfig.json
index cc49d35..edc2924 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -1,3 +1,6 @@
 {
-  "extends": "expo/tsconfig.base"
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "customConditions": ["react-native", "react-native-motion-kit-text-motion-source"]
+  }
 }
diff --git a/package.json b/package.json
index 49f7c47..0e16b53 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,11 @@
   "scripts": {
     "build": "pnpm --filter @react-native-motion-kit/text-motion run build",
     "clean": "pnpm --filter @react-native-motion-kit/text-motion run clean",
+    "docs:build": "pnpm -C docs build",
+    "docs:check": "pnpm -C docs check",
+    "docs:dev": "pnpm -C docs dev",
+    "docs:preview": "pnpm -C docs preview",
+    "docs:typecheck": "pnpm -C docs typecheck",
     "example": "pnpm --filter example run",
     "example:build": "pnpm -C example build",
     "format": "oxfmt",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f627688..44a46f3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -42,6 +42,30 @@ importers:
         specifier: ^1.72.0
         version: 1.72.0
 
+  docs:
+    devDependencies:
+      '@rspress/core':
+        specifier: 2.0.21
+        version: 2.0.21(@rspack/core@2.2.9(@swc/helpers@0.5.23))(micromark-util-types@2.0.3)(micromark@4.0.3)
+      '@shikijs/transformers':
+        specifier: 4.4.3
+        version: 4.4.3
+      '@types/node':
+        specifier: ^24.13.4
+        version: 24.19.2
+      '@types/react':
+        specifier: ^19.2.0
+        version: 19.2.17
+      react:
+        specifier: 'catalog:'
+        version: 19.2.3
+      react-dom:
+        specifier: 19.2.3
+        version: 19.2.3(react@19.2.3)
+      typescript:
+        specifier: 'catalog:'
+        version: 6.0.3
+
   example:
     dependencies:
       '@react-native-motion-kit/text-motion':
@@ -924,6 +948,15 @@ packages:
       conventional-commits-parser:
         optional: true
 
+  '@emnapi/core@1.11.3':
+    resolution: {integrity: sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==}
+
+  '@emnapi/runtime@1.11.3':
+    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
+
+  '@emnapi/wasi-threads@1.2.3':
+    resolution: {integrity: sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==}
+
   '@expo/cli@56.1.16':
     resolution: {integrity: sha512-VBQn0mqAwc67b9Cn0RVXyeodghomAx5xGRhA/bXaQzuxDjMQk0zIOb6pXMZX7yiIwJW66UZt/zQiJNSv6aWJYw==}
     hasBin: true
@@ -1193,6 +1226,21 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@mdx-js/mdx@3.1.1':
+    resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
+
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
+  '@napi-rs/wasm-runtime@1.1.6':
+    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1534,6 +1582,184 @@ packages:
       '@types/react':
         optional: true
 
+  '@rsbuild/core@2.2.14':
+    resolution: {integrity: sha512-HNzuviBQuaPn24ltmlW0BwwB9YclY9sFz847Qyh8CeTtLLkfznmkSMeXeUHSTcZC22gveRKkut7iLjI1HPzCjw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      core-js: '>= 3.0.0'
+    peerDependenciesMeta:
+      core-js:
+        optional: true
+
+  '@rsbuild/plugin-react@2.1.1':
+    resolution: {integrity: sha512-tLtUedsRtTLS6M4VtwzI6aakFLOFdgl9Sh1ZNBWvxb0Te3EnHrppaE7UiYEmDUXQDJ50gfr6yyirtxY5N6moyg==}
+    peerDependencies:
+      '@rsbuild/core': ^2.0.0
+    peerDependenciesMeta:
+      '@rsbuild/core':
+        optional: true
+
+  '@rspack/binding-darwin-arm64@2.2.9':
+    resolution: {integrity: sha512-aIHkk/wngpwgWkwVQFz2AIkmG9WpWtWlkqy4BlYhs5a7l9z0BrB0kXnUb6VSbqZ7Tc3cRepKw7ipkGjKa8KKXw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rspack/binding-darwin-x64@2.2.9':
+    resolution: {integrity: sha512-QtUS7lyOE5oxdMm7RH/Fw176jqwdHiTW2qEsmbdCYzPw3t7QkmI5ohoyiuxOp3czJfaayXP6bVyvm2FqqnWPAw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rspack/binding-linux-arm64-gnu@2.2.9':
+    resolution: {integrity: sha512-GMKxtBJAMoqBPqXZVi0QanDkneWwgiKRpTgHW/pbKPY/2XMfZJ98thm4YlATO18XZJ2KET+GfsNfaf1o5Y+aaA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-arm64-musl@2.2.9':
+    resolution: {integrity: sha512-aW3fcM64R5mY2+ym6Q8okAo/pcVIjAliqxFOc9lf9hCyS7hHaabWo30smeMX3neEjsqw+iyNbzWMuH0G5AugTw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rspack/binding-linux-ppc64-gnu@2.2.9':
+    resolution: {integrity: sha512-dVEiyZdANq+g/qugI64vKnxO+PCVicidu/GQ6sO0QEWGVzdSUbxHztHviSnMwdvRs6OLrN7Lwhaw536hJ/cU8w==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-riscv64-gnu@2.2.9':
+    resolution: {integrity: sha512-uBHWmfMm502145le0EUOsBoV6bJ9XA5s3NQLL4smSMoSEuMbNrRhqDJ2+B1u8aXVfjfhxCPyNlMDmgbsdVaO0Q==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-riscv64-musl@2.2.9':
+    resolution: {integrity: sha512-MR7e6PP7KcG3jHYWznk17npBBvjUXQg7qQbS+yrAu0R3p/27wLp+aP5m/zk4ev1Iq93ccIBIAGVRGA3v1fSKew==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rspack/binding-linux-s390x-gnu@2.2.9':
+    resolution: {integrity: sha512-Tc9Nuv7XvkrAG79Ps/6F7vT4bxZqiaiQ3Rd3BidKUjVYiwTPJogk1W3gPXp7Lw+AMoN/dY63W22bMJ7Oh0FeZw==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-x64-gnu@2.2.9':
+    resolution: {integrity: sha512-xQYhQwC8q3mSCzHV+yi76Gt2Lt9BhnmeJnQgXGjuhyvjZWBB9jFNp9Uj6umun7tlMliMRhoqTesqvK4Vo/kkcQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-x64-musl@2.2.9':
+    resolution: {integrity: sha512-FfEYdFhOd1nZL+U/up8nlbcRTTyWX4ohXUQcApQMYKIZoR1EJ0g/oBhS915+TSray0DchA+NT6yVL1sqWJOFaQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rspack/binding-wasm32-wasi@2.2.9':
+    resolution: {integrity: sha512-+29JEBiUi2TMDOGYmT3Tm3JGk3f19+CbjxNEt1bVreR8axuZZj+wOSwB/sx85lKQkL5fuNPh0BhOZ7cdkDxQpA==}
+    cpu: [wasm32]
+
+  '@rspack/binding-win32-arm64-msvc@2.2.9':
+    resolution: {integrity: sha512-x/BDAwQCkR+ANWAAWV+15PFWuae2z9DzL+QcVeb+5taOri+tHa/iQdG8e3GJ60d0amsR+u9BJ2CBtJLK1fQkxw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rspack/binding-win32-ia32-msvc@2.2.9':
+    resolution: {integrity: sha512-i622t0Mom3STiDi8VHLaX62LKwhbT2kg37fKjzv3wQT+9bJvQ/+St6QQzFZg9C7fV53LXqAw8jFi5yIPIjg0Qw==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rspack/binding-win32-x64-msvc@2.2.9':
+    resolution: {integrity: sha512-K98FPCAv0VpDPAz5ZqZ0XI1CmdJu9Kw1FmUDl4rN/zQIt9iqYn+Hgxq6Nk6Zx7g938jiG7ABLwITXSIKGbs6aw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rspack/binding@2.2.9':
+    resolution: {integrity: sha512-Y8wDJoRo8n0KXDGq6J3KGVekkUQcOcUHSppMHoJv8JLbNBEsyaaKiDx4ljNTGEDtTON0CRbMEWbSiLRe+bJxOQ==}
+
+  '@rspack/core@2.2.9':
+    resolution: {integrity: sha512-Tp6/ZdM5UrGB3BeLfvh69l1iX03PZ46IgXjKqubVEuJVAhnOjpshooH/YAxcxR0AymcBLKA997Z4v+LV2aXzCw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@module-federation/runtime-tools': ^0.24.1 || ^2.0.0
+      '@swc/helpers': ^0.5.23
+    peerDependenciesMeta:
+      '@module-federation/runtime-tools':
+        optional: true
+      '@swc/helpers':
+        optional: true
+
+  '@rspack/plugin-react-refresh@2.0.2':
+    resolution: {integrity: sha512-dGNZiCxQxgAUI9sah7gd8u+O7OJZRCmqtEJNDOd8xW5RqcieC86F7p5qcShyw6onH5pKf57evpr2VjGbaFGkZg==}
+    peerDependencies:
+      '@rspack/core': ^2.0.0
+      react-refresh: '>=0.10.0 <1.0.0'
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+
+  '@rspress/core@2.0.21':
+    resolution: {integrity: sha512-QxhVqhHhN4guA24MlvlsFTb96pE/X8gBd5RBfp4j1kn5tAu1nJ7A9itKcRAuEw0WYJHcsWtI+WUnd7JPioHtlw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  '@rspress/shared@2.0.21':
+    resolution: {integrity: sha512-siCWkv1a4n6y7JdVRII+fwCRZGZtG5KGFfKi2w/Tt33UnIgh4XGqozZ5F/K0iZ/QUwg0wi93SoVdOQm2Q+wf8w==}
+
+  '@shikijs/core@4.4.3':
+    resolution: {integrity: sha512-QCR4q2ZO/ILJEuwiBMel4wdcTDb1JGwfjKTxPDF6x8ixOaluPrVqIn06C99AcRPhmYlBR56d/Fb+GN58GzExpg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/core@4.5.0':
+    resolution: {integrity: sha512-6CIgwq+bt2JZ3OSjb/nBkkwEf/CfpHcbam+Mg5Pllco7HAGRQ2/EFhZrrJtbyNTgKwknfVS+llsXGygiDGwJWw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-javascript@4.5.0':
+    resolution: {integrity: sha512-Ed6UdEj84LyYkwnxM5CvSMWAD+id9ExTYri0/+x41U9zrgNifPSS9lZm0JqBP0VfYI8yr8tY5nbNq9+p9R0kFA==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-oniguruma@4.5.0':
+    resolution: {integrity: sha512-dKVmbJecVdB9recl8a/CU4jdpNXyjJQrIcesIkpS70s5HS02ohpnCSpMUbotPnEUzbAcLQ+S4hwZYbkBBiTcJw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/langs@4.5.0':
+    resolution: {integrity: sha512-wwBTqwduXSz0X4v9Qa2EWeFaYJEw1clCncWjoRNQRbVDu3SPRTRWucnouYapKj3b8Q+sk/41Vbc4B5c8nuYzLA==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.4.3':
+    resolution: {integrity: sha512-m0wBeLDQDeIxRdUmrCPdQqfuUamDwRL5isCfYbguKD6NiaKpVbsv+3J81DyIKgNW5h4WAIIr8T4EkgQrBBxvaQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.5.0':
+    resolution: {integrity: sha512-UM7ShlA8oz0OWxLLO8BmO9Ip6fVqdkt8yF0EH7nOCqHfrx1eEAzF0ZUVK7L+I8NEgeu1PEWSRlxaiPPeCb4iDg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/rehype@4.5.0':
+    resolution: {integrity: sha512-+OnQqc4Pdjo4m13sBdlBrPxuylSqWwnw6qOjmLRKGf6yDr1SdhZcKFUEXFGoFRBeRSwogmZp8M3LIAO7Urmxjw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/themes@4.5.0':
+    resolution: {integrity: sha512-zGb87H3UBbpuI4yoh5UguB1XbU+2BDU3kflM7UfZ+Cy2hWo9lBtqjSVK20gmLY6ukYl040hAypGXMgud9vul8Q==}
+    engines: {node: '>=20'}
+
+  '@shikijs/transformers@4.4.3':
+    resolution: {integrity: sha512-oJSARV6NaWd+rnNJbtnpAdj3Zg0ZVyzsnMgb3vi3HA+35y8lBWUCpOnWsmyiXZIikY+x1BDqrQUgmxfzWh7Jvw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/types@4.4.3':
+    resolution: {integrity: sha512-UEJxmRR++MAGR6hugn0vgVS2W/6lWAts84FFSrnlH9sP0LNol7E5+NQ792pH8liWUhyMyjhTgSUH3k7iD7tc5g==}
+    engines: {node: '>=20'}
+
+  '@shikijs/types@4.5.0':
+    resolution: {integrity: sha512-drtPrtD8N0DENyD2cyt6Ajy+IWsiCLgMxODwLTpvH1UsN6a9jf90tNTPjqwHvA+0Lzu9e0txk8DjfqH1p9UJRw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/vscode-textmate@10.1.0':
+    resolution: {integrity: sha512-cVBuhDQjBZaNMTwBquYfPydrUP+E3hE6oYGasx8h6ZrODIM7/r+gxLDXdd66oszbrggZHEntdE6j+5gYIVyMWQ==}
+
   '@simple-libs/child-process-utils@1.0.2':
     resolution: {integrity: sha512-/4R8QKnd/8agJynkNdJmNw2MBxuFTRcNFnE5Sg/G+jkSsV8/UBgULMzhizWWW42p8L5H7flImV2ATi79Ove2Tw==}
     engines: {node: '>=18'}
@@ -1558,6 +1784,9 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
+  '@swc/helpers@0.5.23':
+    resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
+
   '@testing-library/react-native@14.0.1':
     resolution: {integrity: sha512-2r2e2y8SkUNRWKRXlUGqDYunB+AkbdXUPn49Bs5rpv9oxRb0K3USBVugbPbAKJjfj4w5Ba91NJ8LcQCZyopUZA==}
     engines: {node: ^22.13.0 || >=24}
@@ -1570,6 +1799,9 @@ packages:
       jest:
         optional: true
 
+  '@tybys/wasm-util@0.10.4':
+    resolution: {integrity: sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -1582,9 +1814,21 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/debug@4.1.13':
+    resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
   '@types/graceful-fs@4.1.9':
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
 
+  '@types/hast@3.0.5':
+    resolution: {integrity: sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==}
+
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
@@ -1597,6 +1841,18 @@ packages:
   '@types/jest@29.5.14':
     resolution: {integrity: sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/mdx@2.0.14':
+    resolution: {integrity: sha512-T48PeuJtvLosNTPVhfnIp3i/n3a4g4Bad7YCq5k64D4u7NwDrAotikQ+5+sjtUvBmxCMlbo3dVL+C2dP0rWHzg==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/node@24.19.2':
+    resolution: {integrity: sha512-93d49wCWJkCyN87MxLpNN6KXPCwFw7bVUg79mGUV1OS40JGWwVCr8n61DXCSqz7CV6/VfPkb7xec7uP2M+QHWQ==}
+
   '@types/node@26.0.1':
     resolution: {integrity: sha512-fc3KiUoBt6kie0N9bIW3E47vZsuaMf0PM2AaUpLCLT0s/LvX1nxAim6Fc049cNxODPpGm6qRAuUOB86SkRuPQw==}
 
@@ -1608,9 +1864,18 @@ packages:
   '@types/react@19.2.17':
     resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
 
+  '@types/react@19.3.0':
+    resolution: {integrity: sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==}
+
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@types/yargs-parser@21.0.3':
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
 
@@ -1620,13 +1885,20 @@ packages:
   '@ungap/structured-clone@1.3.2':
     resolution: {integrity: sha512-5jsZFwgR5rTdKwidH9Qmat75RKwqfpKlWWB1frDkljN127mwqBu8K0PYo7/hFpF03IEJpfVPpCQDY/eDx3iHvA==}
 
+  '@unhead/react@2.1.17':
+    resolution: {integrity: sha512-KmcYksDjlLozL0fxUjIDwH/0k6+Lg2HWHLUPlkRW8Gl08hdB1AbLB5iU9QxFvkaT8p0Q4dFEqZWnz3g6RMeiRA==}
+    peerDependencies:
+      react: '>=18.3.1'
+
   '@xmldom/xmldom@0.8.13':
     resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
     engines: {node: '>=10.0.0'}
+    deprecated: this version has critical issues, please update to the latest version
 
   '@xmldom/xmldom@0.9.10':
     resolution: {integrity: sha512-A9gOqLdi6cV4ibazAjcQufGj0B1y/vDqYrcuP6d/6x8P27gRS8643Dj9o1dEKtB6O7fwxb2FgBmJS2mX7gpvdw==}
     engines: {node: '>=14.6'}
+    deprecated: this version has critical issues, please update to the latest version
 
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
@@ -1640,6 +1912,11 @@ packages:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
 
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
   acorn@8.17.0:
     resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
     engines: {node: '>=0.4.0'}
@@ -1712,6 +1989,10 @@ packages:
   asap@2.0.6:
     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
 
+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
+    hasBin: true
+
   babel-jest@29.7.0:
     resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -1787,6 +2068,9 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1806,6 +2090,9 @@ packages:
     resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
     engines: {node: '>=0.6'}
 
+  body-scroll-lock@4.0.0-beta.0:
+    resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
+
   bplist-creator@0.1.0:
     resolution: {integrity: sha512-sXaHZicyEEmY86WyueLTQesbeoH/mquvarJaQNbjuOQO+7gbFcDEWqKmcWA4cOTLzFlfgvkiVxolk1k5bBIpmg==}
 
@@ -1858,6 +2145,9 @@ packages:
   caniuse-lite@1.0.30001799:
     resolution: {integrity: sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1870,6 +2160,18 @@ packages:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
   chrome-launcher@0.15.2:
     resolution: {integrity: sha512-zdLEwNo3aUVzIhKhTtXfxhdvZhUghrnmkvcAq2NoDd+LeOHKf03H5jwZ8T/STsAlzyALkBVK552iaG1fGf1xVQ==}
     engines: {node: '>=12.13.0'}
@@ -1908,10 +2210,17 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
+  collapse-white-space@2.1.0:
+    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
+
   collect-v8-coverage@1.0.3:
     resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
 
@@ -1928,6 +2237,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@12.1.0:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
@@ -1955,6 +2267,9 @@ packages:
     resolution: {integrity: sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==}
     engines: {node: '>= 0.8.0'}
 
+  compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -1978,6 +2293,13 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  copy-to-clipboard@3.3.3:
+    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
+
   core-js-compat@3.49.0:
     resolution: {integrity: sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==}
 
@@ -2041,6 +2363,9 @@ packages:
       supports-color:
         optional: true
 
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
   dedent@1.7.2:
     resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
     peerDependencies:
@@ -2069,6 +2394,10 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -2081,6 +2410,9 @@ packages:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2116,6 +2448,10 @@ packages:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -2133,6 +2469,12 @@ packages:
   es-toolkit@1.49.0:
     resolution: {integrity: sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==}
 
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -2161,6 +2503,27 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  estree-util-attach-comments@3.0.0:
+    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
+
+  estree-util-build-jsx@3.0.1:
+    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  estree-util-scope@1.0.1:
+    resolution: {integrity: sha512-B0np3dcdxqILX5e9nEi5/Fr4K7gL4oYFVPV1zRa2e9wRCbQoZZNWOZFYyoInvXUPJXBXjss+QXlWLJChDEHDkA==}
+
+  estree-util-to-js@2.0.0:
+    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
+
+  estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -2273,6 +2636,9 @@ packages:
   exponential-backoff@3.1.3:
     resolution: {integrity: sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -2327,6 +2693,9 @@ packages:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
 
+  flexsearch@0.8.212:
+    resolution: {integrity: sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==}
+
   flow-enums-runtime@0.0.6:
     resolution: {integrity: sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw==}
 
@@ -2417,6 +2786,42 @@ packages:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-heading-rank@3.0.0:
+    resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
+
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
+  hast-util-to-estree@3.1.3:
+    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-to-parse5@8.0.1:
+    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
+
+  hast-util-to-string@3.0.1:
+    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
   hermes-compiler@250829098.0.10:
     resolution: {integrity: sha512-TcRlZ0/TlyfJqquRFAWoyElVNnkdYRi/sEp4/Qy8/GYxjg8j2cS9D4MjuaQ+qimkmLN7AmO+44IznRf06mAr0w==}
 
@@ -2438,6 +2843,9 @@ packages:
   hermes-parser@0.35.0:
     resolution: {integrity: sha512-9JLjeHxBx8T4CAsydZR49PNZUaix+WpQJwu9p2010lu+7Kwl6D/7wYFFJxoz+aXkaaClp9Zfg6W6/zVlSJORaA==}
 
+  hookable@6.1.2:
+    resolution: {integrity: sha512-+abwxtiEA52GCVIsQqut3S/uKTbUwYIp4Pe/vv+6py5XiXBCqMZHg6pA6Y5qhgLSEys0/cYuPbO0z1QFj5ZCmg==}
+
   hosted-git-info@7.0.2:
     resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -2445,6 +2853,9 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -2501,12 +2912,25 @@ packages:
     resolution: {integrity: sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
   inline-style-prefixer@7.0.1:
     resolution: {integrity: sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==}
 
   invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
 
+  is-absolute-url@4.0.1:
+    resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
@@ -2514,6 +2938,9 @@ packages:
     resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
   is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
@@ -2535,6 +2962,9 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -2935,6 +3365,9 @@ packages:
     resolution: {integrity: sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==}
     engines: {node: '>=4'}
 
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -2956,9 +3389,85 @@ packages:
   makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
 
+  markdown-extensions@2.0.0:
+    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
+    engines: {node: '>=16'}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
   marky@1.3.0:
     resolution: {integrity: sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ==}
 
+  mdast-util-find-and-replace@3.0.4:
+    resolution: {integrity: sha512-z4B5c6jrnJ1ltOQemhWYPBSAo6y42Z8Gt2yEgfgNTMcLSU59B8bfj8Z8AnAlJrBGLnqkdAUZ7jdDEqQw3KuipQ==}
+
+  mdast-util-from-markdown@2.1.0:
+    resolution: {integrity: sha512-KRLgmPaP2H1ul2bpoJkOS+9pAcDAAj9Nu1mqLnh8NLeJG5tlvj42TH80PIGBpROWlRXLk0lDrWNuZCFy/tsB4A==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.1:
+    resolution: {integrity: sha512-OuJHqvr455pwu2OaOrir7dbzqs4jlWKOtlu9L6GjcIjjQwNyw02VntQsr/Ek6/A13vgnXfUhBekWRUP1OkNivw==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown-cjk-friendly-gfm-strikethrough@1.0.1:
+    resolution: {integrity: sha512-8ovOXqA50rIESs94V3VSdfcAd7irw1Ro+RvfI8FAcSoRya44IMPdaJ2Xx0rWVNIS1im780/oVRIJC/oHEyzXRw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/mdast': '*'
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
+  mdast-util-to-markdown-cjk-friendly@1.0.1:
+    resolution: {integrity: sha512-J3njpXAKUXGOa4k5pUwxHV0yuO4k5DgCrHGPady8xCFutjDr31UmuSaLuuxPLJNBO3336dX+CtB4GnNhgl0KKw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/mdast': '*'
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
+  mdast-util-to-markdown@2.2.0:
+    resolution: {integrity: sha512-2Jn/ADrHFFyyniBMi0bncTbJqU78K3/TEYvzvwrWWzD9MYPUa/Gm4r3nOeKFQg/PDM5BsbDYdc8ackW4NTY6NA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  medium-zoom@1.1.0:
+    resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
+
   memoize-one@5.2.1:
     resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
 
@@ -3038,34 +3547,171 @@ packages:
     engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     hasBin: true
 
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
-
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
+  micromark-core-commonmark@2.0.4:
+    resolution: {integrity: sha512-wxEeE8v8XVvOrxn1TZj74qYhAtTQsSqufHVS3uNVyT1MupXxhyaHk8/9xDNPh9BmL77QNDgWTkZ3RsYHB2ry7w==}
 
-  mime-db@1.54.0:
-    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
-    engines: {node: '>= 0.6'}
+  micromark-extension-cjk-friendly-gfm-strikethrough@2.0.1:
+    resolution: {integrity: sha512-wVC0zwjJNqQeX+bb07YTPu/CvSAyCTafyYb7sMhX1r62/Lw5M/df3JyYaANyp8g15c1ypJRFSsookTqA1IDsUg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      micromark: ^4.0.0
+      micromark-util-types: ^2.0.0
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
 
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
+  micromark-extension-cjk-friendly-util@3.0.1:
+    resolution: {integrity: sha512-GcbXqTTHOsiZHyF753oIddP/J2eH8j9zpyQPhkof6B2JNxfEJabnQqxbCgzJNuNes0Y2jTNJ3LiYPSXr6eJA8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      micromark-util-types: '*'
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
 
-  mime-types@3.0.2:
-    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+  micromark-extension-cjk-friendly@2.0.2:
+    resolution: {integrity: sha512-/BqZNCkDWg3Hj9zEEcRitZ5uMF3X78qmBFuP17oAjnVDZ0+H1GHiDKMJZDpJsXasCHEn/kzl6QHozUiWgCHtPQ==}
     engines: {node: '>=18'}
+    peerDependencies:
+      micromark: ^4.0.0
+      micromark-util-types: ^2.0.0
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
 
-  mime@1.6.0:
-    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
-    engines: {node: '>=4'}
-    hasBin: true
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
 
-  mimic-fn@1.2.0:
-    resolution: {integrity: sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==}
-    engines: {node: '>=4'}
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.2:
+    resolution: {integrity: sha512-pRzm4kDTu0MjlmBkxmS9yYhw60nncfcEwu9NNdPFSQEFXS95ZKyIIyTSHu/o3ReBUrLKYEq+7YaXCRn/bPB4MA==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+
+  micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+
+  micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+
+  micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+
+  micromark-factory-space@2.1.0:
+    resolution: {integrity: sha512-fS8hnLIjnjvdQIj39Geug8wWsR0HrYZ43KShKxNfwT7t2LOHo/LbWZEzEaSOjwtjdCsjoE6syHhonEzW0zv0+Q==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-edit-map@1.0.0:
+    resolution: {integrity: sha512-Pa2ljlsEL6sVwFaYeyrOLSYbQt73JvGbPOYFq+9AElXiSnfI5Q4465RRZ1sHv7lDjDOnGRDDaqPXqClqWK/q1Q==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.3:
+    resolution: {integrity: sha512-oxB2Ik03hI0gv+VNn9tnh1t1YEe9MDPptViAEgfdf3YQHsn0pzGTgCdlSCJXcwhqm8phaEuM7zeEu3QQzVBrPg==}
+
+  micromark@4.0.3:
+    resolution: {integrity: sha512-oGYfQzHSG5dOMovQcJ3fyTmZlWAWpi0XA0sJwJs+i6OT88o1+Jtw/8z0CmdowSLxGhhFK89rQ/oXph/wN02PNw==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  mimic-fn@1.2.0:
+    resolution: {integrity: sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==}
+    engines: {node: '>=4'}
 
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
@@ -3152,6 +3798,9 @@ packages:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
 
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
   nullthrows@1.1.1:
     resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
 
@@ -3186,6 +3835,12 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
   open@7.4.2:
     resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
     engines: {node: '>=8'}
@@ -3244,6 +3899,9 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -3252,6 +3910,9 @@ packages:
     resolution: {integrity: sha512-Nt/a5SfCLiTnQAjx3fHlqp8hRgTL3z7kTQZzvIMS9uCAepnCyjpdEc6M/sz69WqMBdaDBw9sF1F1UaHROYzGkQ==}
     engines: {node: '>=10'}
 
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -3343,6 +4004,9 @@ packages:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
@@ -3364,12 +4028,20 @@ packages:
     peerDependencies:
       react: ^19.2.3
 
+  react-dom@19.3.1:
+    resolution: {integrity: sha512-Y0bARz53lhEC1NMCASs0/j+faB/zqt3R8hpvg1e8+61ZVJ4UL0UdC4cBbXfZMcIuhrfgeILTLe+ZeBCavQPtKQ==}
+    peerDependencies:
+      react: ^19.3.1
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
   react-is@19.2.7:
     resolution: {integrity: sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==}
 
+  react-lazy-with-preload@2.2.1:
+    resolution: {integrity: sha512-ONSb8gizLE5jFpdHAclZ6EAAKuFX2JydnFXPPPjoUImZlLjGtKzyBS8SJgJq7CpLgsGKh9QCZdugJyEEOVC16Q==}
+
   react-native-builder-bob@0.43.0:
     resolution: {integrity: sha512-suE1OYf0umMQvzzQ+4Ba+5xMc8jLu60ILQi85x8SCBaBtVUSJfcaGvlv6+34xxXgy+a2PuyNzoOXr9STEweLrQ==}
     engines: {node: ^20.19.0 || ^22.12.0 || >= 23.4.0}
@@ -3426,10 +4098,54 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  react-refresh@0.19.0:
+    resolution: {integrity: sha512-5HdstYgoJBbBofjapO5qCPcovECJCBfvjLb+iTcsmqDFVMRdqy0qs7iiInBJTUXmIFc2bjoc5b2HVLp2zRtYhQ==}
+    engines: {node: '>=0.10.0'}
+
+  react-render-to-markdown@19.1.0:
+    resolution: {integrity: sha512-dF9b3tO41ezqdmHP8X92kbHbMexJ6iC7iHw4ykC8fwiO7DgpFc9PhMoKlI+BcPzRxGcWgQSdrixVB9RykhjJpQ==}
+    peerDependencies:
+      react: '>=19'
+
+  react-router-dom@7.18.4:
+    resolution: {integrity: sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.18.4:
+    resolution: {integrity: sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react@19.2.3:
     resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
+  react@19.3.1:
+    resolution: {integrity: sha512-QNhWdt7nrgVWWQG58QuGsAR3jv3Hbe4mb4vz7w2csnHavciZJgda1CPNaldF6eVxv90ud3jUXpKlHL69gO38yw==}
+    engines: {node: '>=0.10.0'}
+
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.1:
+    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -3444,6 +4160,15 @@ packages:
   regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
   regexpu-core@6.4.0:
     resolution: {integrity: sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==}
     engines: {node: '>=4'}
@@ -3455,6 +4180,50 @@ packages:
     resolution: {integrity: sha512-NgRBy2Nx/bE+9F27nVHnqcN5HjyLmecqsqx2PJHu3/IEtADD4WuxuXIVExD5PoSDFVrl78dOonfcOe5O+5nbzQ==}
     hasBin: true
 
+  rehype-external-links@3.0.0:
+    resolution: {integrity: sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==}
+
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
+  remark-cjk-friendly-gfm-strikethrough@2.3.2:
+    resolution: {integrity: sha512-47ucoUO5Idkm5tmAtcusMNQMVh+lYbv9Pfexss1XX13i4qL30c4iM8WYRJ/WUnE1zchtL228xwQW6z06vjtpfg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/mdast': ^4.0.0
+      unified: ^11.0.0
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
+  remark-cjk-friendly@2.3.3:
+    resolution: {integrity: sha512-tx+udvO1M3Pc36Mw4rXDWIFpeIqCzFdbmHq+IjteIEqnKkEjVACYR9FfUqCTDaKEjbjQQ1XlDq7tzRvuXw6Uzg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/mdast': ^4.0.0
+      unified: ^11.0.0
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-mdx@3.1.1:
+    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -3508,6 +4277,12 @@ packages:
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
+  scheduler@0.28.0:
+    resolution: {integrity: sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==}
+
+  scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3529,6 +4304,9 @@ packages:
     resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
     engines: {node: '>= 0.8.0'}
 
+  set-cookie-parser@2.7.3:
+    resolution: {integrity: sha512-irZHtTqurLna57KQG/s+fzOwv/J6XSH4cs8M/vsrY3uCaQ3S6+QJguAH0WdN47SXlk82voMZ4naWMQf8fdEoIg==}
+
   setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
 
@@ -3547,6 +4325,10 @@ packages:
     resolution: {integrity: sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==}
     engines: {node: '>= 0.4'}
 
+  shiki@4.5.0:
+    resolution: {integrity: sha512-OcRW72ngQvc+MSVWBRIovC/BTW589iUE/Vxav7VeM4RcY9MUjqB+IR6ILG1k9nuW6LiG/nct9uma4/MBtnZbmQ==}
+    engines: {node: '>=20'}
+
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
@@ -3586,6 +4368,13 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
@@ -3624,6 +4413,9 @@ packages:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@5.2.0:
     resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
     engines: {node: '>=6'}
@@ -3655,6 +4447,12 @@ packages:
   structured-headers@0.4.1:
     resolution: {integrity: sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==}
 
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
   styleq@0.1.3:
     resolution: {integrity: sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==}
 
@@ -3718,6 +4516,9 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  toggle-selection@1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+
   toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -3728,6 +4529,15 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   type-detect@4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
@@ -3749,9 +4559,15 @@ packages:
     resolution: {integrity: sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==}
     hasBin: true
 
+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
+
   undici-types@8.3.0:
     resolution: {integrity: sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==}
 
+  unhead@2.1.17:
+    resolution: {integrity: sha512-HLMKXOszRhAPBrr6VlqCeVeJq2kbC4kXwzGLEZvvojPLWNYTJw22xG7Bfwhsvs31+IBet3Wl8ADg9dwYdyphfQ==}
+
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
@@ -3772,6 +4588,30 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-children@3.0.0:
+    resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==}
+
+  unist-util-visit-parents@6.1.0:
+    resolution: {integrity: sha512-vKXxz6O38sKDj1mtx/k2cWvkkFBuYGx6uGrlzBkVeWCRF/F8sdI0j3Wbkz/5rVNRRuVc8UrgRdbCxNhmYXgP3w==}
+
+  unist-util-visit@5.2.0:
+    resolution: {integrity: sha512-fpsYs/VVoZxfGY9/j3FQpZmN8wdLJaV1Pt38AaJNZu9uKIHcFU3halCdBveEq1HGKO1OEfJY65w1zvoFV1b3qQ==}
+
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
@@ -3807,6 +4647,15 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vlq@1.0.1:
     resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
 
@@ -3816,6 +4665,9 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -3928,6 +4780,9 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@ark/schema@0.56.0':
@@ -4928,6 +5783,22 @@ snapshots:
     optionalDependencies:
       conventional-commits-parser: 6.4.0
 
+  '@emnapi/core@1.11.3':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.3
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.11.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@expo/cli@56.1.16(@expo/dom-webview@56.0.6)(expo-constants@56.0.18(expo@56.0.12)(react-native@0.85.3(@babel/core@7.29.7)(@react-native/jest-preset@0.85.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3)))(expo-font@56.0.7(expo@56.0.12)(react-native@0.85.3(@babel/core@7.29.7)(@react-native/jest-preset@0.85.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3))(react@19.2.3))(expo@56.0.12)(react-dom@19.2.3(react@19.2.3))(react-native@0.85.3(@babel/core@7.29.7)(@react-native/jest-preset@0.85.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3))(react@19.2.3)(typescript@6.0.3)':
     dependencies:
       '@expo/code-signing-certificates': 0.0.6
@@ -5485,6 +6356,49 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@mdx-js/mdx@3.1.1':
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.5
+      '@types/mdx': 2.0.14
+      acorn: 8.17.0
+      collapse-white-space: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.1
+      estree-walker: 3.0.3
+      hast-util-to-jsx-runtime: 2.3.6
+      markdown-extensions: 2.0.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.1(acorn@8.17.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      source-map: 0.7.6
+      unified: 11.0.5
+      unist-util-position-from-estree: 2.0.0
+      unist-util-stringify-position: 4.0.0
+      unist-util-visit: 5.2.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mdx-js/react@3.1.1(@types/react@19.3.0)(react@19.3.1)':
+    dependencies:
+      '@types/mdx': 2.0.14
+      '@types/react': 19.3.0
+      react: 19.3.1
+
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
+    dependencies:
+      '@emnapi/core': 1.11.3
+      '@emnapi/runtime': 1.11.3
+      '@tybys/wasm-util': 0.10.4
+    optional: true
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -5764,6 +6678,230 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@rsbuild/core@2.2.14':
+    dependencies:
+      '@rspack/core': 2.2.9(@swc/helpers@0.5.23)
+      '@swc/helpers': 0.5.23
+    transitivePeerDependencies:
+      - '@module-federation/runtime-tools'
+
+  '@rsbuild/plugin-react@2.1.1(@rsbuild/core@2.2.14)(@rspack/core@2.2.9(@swc/helpers@0.5.23))':
+    dependencies:
+      '@rspack/plugin-react-refresh': 2.0.2(@rspack/core@2.2.9(@swc/helpers@0.5.23))(react-refresh@0.19.0)
+      react-refresh: 0.19.0
+    optionalDependencies:
+      '@rsbuild/core': 2.2.14
+    transitivePeerDependencies:
+      - '@rspack/core'
+
+  '@rspack/binding-darwin-arm64@2.2.9':
+    optional: true
+
+  '@rspack/binding-darwin-x64@2.2.9':
+    optional: true
+
+  '@rspack/binding-linux-arm64-gnu@2.2.9':
+    optional: true
+
+  '@rspack/binding-linux-arm64-musl@2.2.9':
+    optional: true
+
+  '@rspack/binding-linux-ppc64-gnu@2.2.9':
+    optional: true
+
+  '@rspack/binding-linux-riscv64-gnu@2.2.9':
+    optional: true
+
+  '@rspack/binding-linux-riscv64-musl@2.2.9':
+    optional: true
+
+  '@rspack/binding-linux-s390x-gnu@2.2.9':
+    optional: true
+
+  '@rspack/binding-linux-x64-gnu@2.2.9':
+    optional: true
+
+  '@rspack/binding-linux-x64-musl@2.2.9':
+    optional: true
+
+  '@rspack/binding-wasm32-wasi@2.2.9':
+    dependencies:
+      '@emnapi/core': 1.11.3
+      '@emnapi/runtime': 1.11.3
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
+    optional: true
+
+  '@rspack/binding-win32-arm64-msvc@2.2.9':
+    optional: true
+
+  '@rspack/binding-win32-ia32-msvc@2.2.9':
+    optional: true
+
+  '@rspack/binding-win32-x64-msvc@2.2.9':
+    optional: true
+
+  '@rspack/binding@2.2.9':
+    optionalDependencies:
+      '@rspack/binding-darwin-arm64': 2.2.9
+      '@rspack/binding-darwin-x64': 2.2.9
+      '@rspack/binding-linux-arm64-gnu': 2.2.9
+      '@rspack/binding-linux-arm64-musl': 2.2.9
+      '@rspack/binding-linux-ppc64-gnu': 2.2.9
+      '@rspack/binding-linux-riscv64-gnu': 2.2.9
+      '@rspack/binding-linux-riscv64-musl': 2.2.9
+      '@rspack/binding-linux-s390x-gnu': 2.2.9
+      '@rspack/binding-linux-x64-gnu': 2.2.9
+      '@rspack/binding-linux-x64-musl': 2.2.9
+      '@rspack/binding-wasm32-wasi': 2.2.9
+      '@rspack/binding-win32-arm64-msvc': 2.2.9
+      '@rspack/binding-win32-ia32-msvc': 2.2.9
+      '@rspack/binding-win32-x64-msvc': 2.2.9
+
+  '@rspack/core@2.2.9(@swc/helpers@0.5.23)':
+    dependencies:
+      '@rspack/binding': 2.2.9
+    optionalDependencies:
+      '@swc/helpers': 0.5.23
+
+  '@rspack/plugin-react-refresh@2.0.2(@rspack/core@2.2.9(@swc/helpers@0.5.23))(react-refresh@0.19.0)':
+    dependencies:
+      react-refresh: 0.19.0
+    optionalDependencies:
+      '@rspack/core': 2.2.9(@swc/helpers@0.5.23)
+
+  '@rspress/core@2.0.21(@rspack/core@2.2.9(@swc/helpers@0.5.23))(micromark-util-types@2.0.3)(micromark@4.0.3)':
+    dependencies:
+      '@mdx-js/mdx': 3.1.1
+      '@mdx-js/react': 3.1.1(@types/react@19.3.0)(react@19.3.1)
+      '@rsbuild/core': 2.2.14
+      '@rsbuild/plugin-react': 2.1.1(@rsbuild/core@2.2.14)(@rspack/core@2.2.9(@swc/helpers@0.5.23))
+      '@rspress/shared': 2.0.21
+      '@shikijs/rehype': 4.5.0
+      '@types/mdast': 4.0.4
+      '@types/react': 19.3.0
+      '@unhead/react': 2.1.17(react@19.3.1)
+      body-scroll-lock: 4.0.0-beta.0
+      clsx: 2.1.1
+      copy-to-clipboard: 3.3.3
+      flexsearch: 0.8.212
+      hast-util-heading-rank: 3.0.0
+      hast-util-to-jsx-runtime: 2.3.6
+      mdast-util-mdx: 3.0.0
+      mdast-util-mdxjs-esm: 2.0.1
+      medium-zoom: 1.1.0
+      nprogress: 0.2.0
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      react-lazy-with-preload: 2.2.1
+      react-render-to-markdown: 19.1.0(react@19.3.1)
+      react-router-dom: 7.18.4(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      rehype-external-links: 3.0.0
+      rehype-raw: 7.0.0
+      remark-cjk-friendly: 2.3.3(@types/mdast@4.0.4)(micromark-util-types@2.0.3)(micromark@4.0.3)(unified@11.0.5)
+      remark-cjk-friendly-gfm-strikethrough: 2.3.2(@types/mdast@4.0.4)(micromark-util-types@2.0.3)(micromark@4.0.3)(unified@11.0.5)
+      remark-gfm: 4.0.1
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      scroll-into-view-if-needed: 3.1.0
+      shiki: 4.5.0
+      unified: 11.0.5
+      unist-util-visit: 5.2.0
+      unist-util-visit-children: 3.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - '@module-federation/runtime-tools'
+      - '@rspack/core'
+      - core-js
+      - micromark
+      - micromark-util-types
+      - supports-color
+
+  '@rspress/shared@2.0.21':
+    dependencies:
+      '@rsbuild/core': 2.2.14
+      '@shikijs/rehype': 4.5.0
+      '@types/react': 19.3.0
+      mdast-util-mdx-jsx: 3.2.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - '@module-federation/runtime-tools'
+      - core-js
+      - supports-color
+
+  '@shikijs/core@4.4.3':
+    dependencies:
+      '@shikijs/primitive': 4.4.3
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/core@4.5.0':
+    dependencies:
+      '@shikijs/primitive': 4.5.0
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+      oniguruma-to-es: 4.3.6
+
+  '@shikijs/engine-oniguruma@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+
+  '@shikijs/langs@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+
+  '@shikijs/primitive@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+
+  '@shikijs/primitive@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+
+  '@shikijs/rehype@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+      '@types/hast': 3.0.5
+      hast-util-to-string: 3.0.1
+      shiki: 4.5.0
+      unified: 11.0.5
+      unist-util-visit: 5.2.0
+
+  '@shikijs/themes@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+
+  '@shikijs/transformers@4.4.3':
+    dependencies:
+      '@shikijs/core': 4.4.3
+      '@shikijs/types': 4.4.3
+
+  '@shikijs/types@4.4.3':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+
+  '@shikijs/types@4.5.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+
+  '@shikijs/vscode-textmate@10.1.0': {}
+
   '@simple-libs/child-process-utils@1.0.2':
     dependencies:
       '@simple-libs/stream-utils': 1.2.0
@@ -5784,6 +6922,10 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
+  '@swc/helpers@0.5.23':
+    dependencies:
+      tslib: 2.8.1
+
   '@testing-library/react-native@14.0.1(jest@29.7.0(@types/node@26.0.1))(react-native@0.85.3(@babel/core@7.29.7)(@react-native/jest-preset@0.85.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.85.3(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3))(react@19.2.3)(test-renderer@1.2.0(@types/react@19.2.17)(react@19.2.3))':
     dependencies:
       jest-matcher-utils: 30.4.1
@@ -5796,6 +6938,11 @@ snapshots:
     optionalDependencies:
       jest: 29.7.0(@types/node@26.0.1)
 
+  '@tybys/wasm-util@0.10.4':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.7
@@ -5817,10 +6964,24 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.7
 
+  '@types/debug@4.1.13':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.9
+
+  '@types/estree@1.0.9': {}
+
   '@types/graceful-fs@4.1.9':
     dependencies:
       '@types/node': 26.0.1
 
+  '@types/hast@3.0.5':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/istanbul-lib-coverage@2.0.6': {}
 
   '@types/istanbul-lib-report@3.0.3':
@@ -5836,6 +6997,18 @@ snapshots:
       expect: 29.7.0
       pretty-format: 29.7.0
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdx@2.0.14': {}
+
+  '@types/ms@2.1.0': {}
+
+  '@types/node@24.19.2':
+    dependencies:
+      undici-types: 7.24.6
+
   '@types/node@26.0.1':
     dependencies:
       undici-types: 8.3.0
@@ -5848,8 +7021,16 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/react@19.3.0':
+    dependencies:
+      csstype: 3.2.3
+
   '@types/stack-utils@2.0.3': {}
 
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
   '@types/yargs-parser@21.0.3': {}
 
   '@types/yargs@17.0.35':
@@ -5858,6 +7039,11 @@ snapshots:
 
   '@ungap/structured-clone@1.3.2': {}
 
+  '@unhead/react@2.1.17(react@19.3.1)':
+    dependencies:
+      react: 19.3.1
+      unhead: 2.1.17
+
   '@xmldom/xmldom@0.8.13': {}
 
   '@xmldom/xmldom@0.9.10': {}
@@ -5876,6 +7062,10 @@ snapshots:
       mime-types: 3.0.2
       negotiator: 1.0.0
 
+  acorn-jsx@5.3.2(acorn@8.17.0):
+    dependencies:
+      acorn: 8.17.0
+
   acorn@8.17.0: {}
 
   agent-base@7.1.4: {}
@@ -5938,6 +7128,8 @@ snapshots:
 
   asap@2.0.6: {}
 
+  astring@1.9.0: {}
+
   babel-jest@29.7.0(@babel/core@7.29.7):
     dependencies:
       '@babel/core': 7.29.7
@@ -6097,6 +7289,8 @@ snapshots:
       babel-plugin-jest-hoist: 29.6.3
       babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.7)
 
+  bail@2.0.2: {}
+
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
@@ -6107,6 +7301,8 @@ snapshots:
 
   big-integer@1.6.52: {}
 
+  body-scroll-lock@4.0.0-beta.0: {}
+
   bplist-creator@0.1.0:
     dependencies:
       stream-buffers: 2.2.0
@@ -6156,6 +7352,8 @@ snapshots:
 
   caniuse-lite@1.0.30001799: {}
 
+  ccount@2.0.1: {}
+
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -6169,6 +7367,14 @@ snapshots:
 
   char-regex@1.0.2: {}
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
   chrome-launcher@0.15.2:
     dependencies:
       '@types/node': 26.0.1
@@ -6214,8 +7420,12 @@ snapshots:
 
   clone@1.0.4: {}
 
+  clsx@2.1.1: {}
+
   co@4.6.0: {}
 
+  collapse-white-space@2.1.0: {}
+
   collect-v8-coverage@1.0.3: {}
 
   color-convert@1.9.3:
@@ -6230,6 +7440,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@12.1.0: {}
 
   commander@2.20.3: {}
@@ -6267,6 +7479,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  compute-scroll-into-view@3.1.1: {}
+
   concat-map@0.0.1: {}
 
   connect@3.7.0:
@@ -6293,6 +7507,12 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cookie@1.1.1: {}
+
+  copy-to-clipboard@3.3.3:
+    dependencies:
+      toggle-selection: 1.0.6
+
   core-js-compat@3.49.0:
     dependencies:
       browserslist: 4.28.4
@@ -6358,6 +7578,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
   dedent@1.7.2: {}
 
   deepmerge@4.3.1: {}
@@ -6384,12 +7608,18 @@ snapshots:
 
   depd@2.0.0: {}
 
+  dequal@2.0.3: {}
+
   destroy@1.2.0: {}
 
   detect-libc@2.1.2: {}
 
   detect-newline@3.1.0: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   diff-sequences@29.6.3: {}
 
   dnssd-advertise@1.1.6: {}
@@ -6412,6 +7642,8 @@ snapshots:
 
   encodeurl@2.0.0: {}
 
+  entities@6.0.1: {}
+
   env-paths@2.2.1: {}
 
   error-ex@1.3.4:
@@ -6426,6 +7658,20 @@ snapshots:
 
   es-toolkit@1.49.0: {}
 
+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.17.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
   escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
@@ -6440,6 +7686,39 @@ snapshots:
 
   esprima@4.0.1: {}
 
+  estree-util-attach-comments@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  estree-util-build-jsx@3.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-walker: 3.0.3
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  estree-util-scope@1.0.1:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+
+  estree-util-to-js@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      astring: 1.9.0
+      source-map: 0.7.6
+
+  estree-util-visit@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/unist': 3.0.3
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
   esutils@2.0.3: {}
 
   etag@1.8.1: {}
@@ -6579,6 +7858,8 @@ snapshots:
 
   exponential-backoff@3.1.3: {}
 
+  extend@3.0.2: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-glob@3.3.3:
@@ -6644,6 +7925,8 @@ snapshots:
       locate-path: 5.0.0
       path-exists: 4.0.0
 
+  flexsearch@0.8.212: {}
+
   flow-enums-runtime@0.0.6: {}
 
   fontfaceobserver@2.3.0: {}
@@ -6725,6 +8008,126 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.2.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-heading-rank@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.3.2
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.1
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      parse5: 7.3.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.2.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-estree@3.1.3:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.5
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-attach-comments: 3.0.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      zwitch: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-parse5@8.0.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-string@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+
   hermes-compiler@250829098.0.10: {}
 
   hermes-estree@0.33.3: {}
@@ -6745,12 +8148,16 @@ snapshots:
     dependencies:
       hermes-estree: 0.35.0
 
+  hookable@6.1.2: {}
+
   hosted-git-info@7.0.2:
     dependencies:
       lru-cache: 10.4.3
 
   html-escaper@2.0.2: {}
 
+  html-void-elements@3.0.0: {}
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -6801,6 +8208,8 @@ snapshots:
 
   ini@6.0.0: {}
 
+  inline-style-parser@0.2.7: {}
+
   inline-style-prefixer@7.0.1:
     dependencies:
       css-in-js-utils: 3.1.0
@@ -6809,12 +8218,23 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  is-absolute-url@4.0.1: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
   is-arrayish@0.2.1: {}
 
   is-core-module@2.16.2:
     dependencies:
       hasown: 2.0.4
 
+  is-decimal@2.0.1: {}
+
   is-docker@2.2.1: {}
 
   is-extglob@2.1.1: {}
@@ -6827,6 +8247,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-hexadecimal@2.0.1: {}
+
   is-number@7.0.0: {}
 
   is-obj@2.0.0: {}
@@ -7362,6 +8784,8 @@ snapshots:
     dependencies:
       chalk: 2.4.2
 
+  longest-streak@3.1.0: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -7382,8 +8806,202 @@ snapshots:
     dependencies:
       tmpl: 1.0.5
 
+  markdown-extensions@2.0.0: {}
+
+  markdown-table@3.0.4: {}
+
   marky@1.3.0: {}
 
+  mdast-util-find-and-replace@3.0.4:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.1.0
+
+  mdast-util-from-markdown@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.3
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.4
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-to-markdown: 2.2.0
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-to-markdown: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-to-markdown: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-to-markdown: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.1
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-to-markdown: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-to-markdown: 2.2.0
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx@3.0.0:
+    dependencies:
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.1.0
+      mdast-util-to-markdown: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.2
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.2.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown-cjk-friendly-gfm-strikethrough@1.0.1(@types/mdast@4.0.4)(micromark-util-types@2.0.3):
+    dependencies:
+      mdast-util-gfm-strikethrough: 2.0.1
+      mdast-util-to-markdown: 2.2.0
+      mdast-util-to-markdown-cjk-friendly: 1.0.1(@types/mdast@4.0.4)(micromark-util-types@2.0.3)
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark-util-types
+      - supports-color
+
+  mdast-util-to-markdown-cjk-friendly@1.0.1(@types/mdast@4.0.4)(micromark-util-types@2.0.3):
+    dependencies:
+      mdast-util-to-markdown: 2.2.0
+      micromark-extension-cjk-friendly-util: 3.0.1(micromark-util-types@2.0.3)
+      micromark-util-character: 2.1.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark-util-types
+
+  mdast-util-to-markdown@2.2.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      unist-util-visit: 5.2.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  medium-zoom@1.1.0: {}
+
   memoize-one@5.2.1: {}
 
   memoize-one@6.0.0: {}
@@ -7570,6 +9188,308 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  micromark-core-commonmark@2.0.4:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.1.0
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-edit-map: 1.0.0
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-extension-cjk-friendly-gfm-strikethrough@2.0.1(micromark-util-types@2.0.3)(micromark@4.0.3):
+    dependencies:
+      devlop: 1.1.0
+      get-east-asian-width: 1.6.0
+      micromark: 4.0.3
+      micromark-extension-cjk-friendly-util: 3.0.1(micromark-util-types@2.0.3)
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.3
+
+  micromark-extension-cjk-friendly-util@3.0.1(micromark-util-types@2.0.3):
+    dependencies:
+      get-east-asian-width: 1.6.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.3
+
+  micromark-extension-cjk-friendly@2.0.2(micromark-util-types@2.0.3)(micromark@4.0.3):
+    dependencies:
+      devlop: 1.1.0
+      micromark: 4.0.3
+      micromark-extension-cjk-friendly-util: 3.0.1(micromark-util-types@2.0.3)
+      micromark-util-chunked: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.3
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.4
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-extension-gfm-table@2.1.2:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.3
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.2
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-extension-mdx-expression@3.0.1:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-extension-mdx-jsx@3.0.2:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+      vfile-message: 4.0.3
+
+  micromark-extension-mdx-md@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.3
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.4
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  micromark-extension-mdxjs@3.0.0:
+    dependencies:
+      acorn: 8.17.0
+      acorn-jsx: 5.3.2(acorn@8.17.0)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-factory-mdx-expression@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  micromark-factory-space@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.3
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-edit-map@1.0.0:
+    dependencies:
+      micromark-util-types: 2.0.3
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-events-to-acorn@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+      vfile-message: 4.0.3
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.3
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.3: {}
+
+  micromark@4.0.3:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.4
+      micromark-factory-space: 2.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-edit-map: 1.0.0
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+    transitivePeerDependencies:
+      - supports-color
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -7646,6 +9566,8 @@ snapshots:
     dependencies:
       path-key: 3.1.1
 
+  nprogress@0.2.0: {}
+
   nullthrows@1.1.1: {}
 
   ob1@0.84.4:
@@ -7676,6 +9598,14 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  oniguruma-parser@0.12.2: {}
+
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   open@7.4.2:
     dependencies:
       is-docker: 2.2.1
@@ -7756,6 +9686,16 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -7767,6 +9707,10 @@ snapshots:
     dependencies:
       pngjs: 3.4.0
 
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
   parseurl@1.3.3: {}
 
   path-exists@4.0.0: {}
@@ -7844,6 +9788,8 @@ snapshots:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
+  property-information@7.2.0: {}
+
   pure-rand@6.1.0: {}
 
   queue-microtask@1.2.3: {}
@@ -7867,10 +9813,17 @@ snapshots:
       react: 19.2.3
       scheduler: 0.27.0
 
+  react-dom@19.3.1(react@19.3.1):
+    dependencies:
+      react: 19.3.1
+      scheduler: 0.28.0
+
   react-is@18.3.1: {}
 
   react-is@19.2.7: {}
 
+  react-lazy-with-preload@2.2.1: {}
+
   react-native-builder-bob@0.43.0:
     dependencies:
       '@babel/core': 7.29.7
@@ -7998,10 +9951,67 @@ snapshots:
       react: 19.2.3
       scheduler: 0.27.0
 
+  react-reconciler@0.33.0(react@19.3.1):
+    dependencies:
+      react: 19.3.1
+      scheduler: 0.27.0
+
   react-refresh@0.14.2: {}
 
+  react-refresh@0.19.0: {}
+
+  react-render-to-markdown@19.1.0(react@19.3.1):
+    dependencies:
+      react: 19.3.1
+      react-reconciler: 0.33.0(react@19.3.1)
+
+  react-router-dom@7.18.4(react-dom@19.3.1(react@19.3.1))(react@19.3.1):
+    dependencies:
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      react-router: 7.18.4(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+
+  react-router@7.18.4(react-dom@19.3.1(react@19.3.1))(react@19.3.1):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.3.1
+      set-cookie-parser: 2.7.3
+    optionalDependencies:
+      react-dom: 19.3.1(react@19.3.1)
+
   react@19.2.3: {}
 
+  react@19.3.1: {}
+
+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.1(acorn@8.17.0):
+    dependencies:
+      acorn: 8.17.0
+      acorn-jsx: 5.3.2(acorn@8.17.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -8015,6 +10025,16 @@ snapshots:
 
   regenerator-runtime@0.13.11: {}
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regexpu-core@6.4.0:
     dependencies:
       regenerate: 1.4.2
@@ -8030,6 +10050,93 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
+  rehype-external-links@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@ungap/structured-clone': 1.3.2
+      hast-util-is-element: 3.0.0
+      is-absolute-url: 4.0.1
+      space-separated-tokens: 2.0.2
+      unist-util-visit: 5.2.0
+
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
+  rehype-recma@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/hast': 3.0.5
+      hast-util-to-estree: 3.1.3
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-cjk-friendly-gfm-strikethrough@2.3.2(@types/mdast@4.0.4)(micromark-util-types@2.0.3)(micromark@4.0.3)(unified@11.0.5):
+    dependencies:
+      mdast-util-to-markdown-cjk-friendly-gfm-strikethrough: 1.0.1(@types/mdast@4.0.4)(micromark-util-types@2.0.3)
+      micromark-extension-cjk-friendly-gfm-strikethrough: 2.0.1(micromark-util-types@2.0.3)(micromark@4.0.3)
+      unified: 11.0.5
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark
+      - micromark-util-types
+      - supports-color
+
+  remark-cjk-friendly@2.3.3(@types/mdast@4.0.4)(micromark-util-types@2.0.3)(micromark@4.0.3)(unified@11.0.5):
+    dependencies:
+      mdast-util-to-markdown-cjk-friendly: 1.0.1(@types/mdast@4.0.4)(micromark-util-types@2.0.3)
+      micromark-extension-cjk-friendly: 2.0.2(micromark-util-types@2.0.3)(micromark@4.0.3)
+      unified: 11.0.5
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark
+      - micromark-util-types
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-mdx@3.1.1:
+    dependencies:
+      mdast-util-mdx: 3.0.0
+      micromark-extension-mdxjs: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.1.0
+      micromark-util-types: 2.0.3
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.2.0
+      unified: 11.0.5
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -8070,6 +10177,12 @@ snapshots:
 
   scheduler@0.27.0: {}
 
+  scheduler@0.28.0: {}
+
+  scroll-into-view-if-needed@3.1.0:
+    dependencies:
+      compute-scroll-into-view: 3.1.1
+
   semver@6.3.1: {}
 
   semver@7.8.5: {}
@@ -8103,6 +10216,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  set-cookie-parser@2.7.3: {}
+
   setimmediate@1.0.5: {}
 
   setprototypeof@1.2.0: {}
@@ -8115,6 +10230,17 @@ snapshots:
 
   shell-quote@1.9.0: {}
 
+  shiki@4.5.0:
+    dependencies:
+      '@shikijs/core': 4.5.0
+      '@shikijs/engine-javascript': 4.5.0
+      '@shikijs/engine-oniguruma': 4.5.0
+      '@shikijs/langs': 4.5.0
+      '@shikijs/themes': 4.5.0
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+
   signal-exit@3.0.7: {}
 
   simple-plist@1.3.1:
@@ -8147,6 +10273,10 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  source-map@0.7.6: {}
+
+  space-separated-tokens@2.0.2: {}
+
   sprintf-js@1.0.3: {}
 
   stack-utils@2.0.6:
@@ -8182,6 +10312,11 @@ snapshots:
       get-east-asian-width: 1.6.0
       strip-ansi: 7.2.0
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@5.2.0:
     dependencies:
       ansi-regex: 4.1.1
@@ -8206,6 +10341,14 @@ snapshots:
 
   structured-headers@0.4.1: {}
 
+  style-to-js@1.1.21:
+    dependencies:
+      style-to-object: 1.0.14
+
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
   styleq@0.1.3: {}
 
   supports-color@5.5.0:
@@ -8270,12 +10413,20 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  toggle-selection@1.0.6: {}
+
   toidentifier@1.0.1: {}
 
   toqr@0.1.1: {}
 
   tr46@0.0.3: {}
 
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  tslib@2.8.1: {}
+
   type-detect@4.0.8: {}
 
   type-fest@0.21.3: {}
@@ -8286,8 +10437,14 @@ snapshots:
 
   ua-parser-js@1.0.41: {}
 
+  undici-types@7.24.6: {}
+
   undici-types@8.3.0: {}
 
+  unhead@2.1.17:
+    dependencies:
+      hookable: 6.1.2
+
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
@@ -8301,6 +10458,47 @@ snapshots:
 
   unicorn-magic@0.3.0: {}
 
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position-from-estree@2.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-children@3.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.2.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.1.0
+
   universalify@2.0.1: {}
 
   unpipe@1.0.0: {}
@@ -8325,6 +10523,21 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   vlq@1.0.1: {}
 
   walker@1.0.8:
@@ -8335,6 +10548,8 @@ snapshots:
     dependencies:
       defaults: 1.0.4
 
+  web-namespaces@2.0.1: {}
+
   webidl-conversions@3.0.1: {}
 
   whatwg-fetch@3.6.20: {}
@@ -8423,3 +10638,5 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   zod@3.25.76: {}
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index aa2664e..2affbee 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,7 @@
 packages:
   - packages/*
   - example
+  - docs
 allowBuilds:
   lefthook: true
 catalog: