flowbook 0.1.0

package/README.ko.md

@@ -0,0 +1,170 @@
+# Flowbook
+
+> **[English](./README.md)** | **한국어** | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
+
+플로우차트를 위한 Storybook. 코드베이스에서 Mermaid 다이어그램 파일을 자동으로 발견하고, 카테고리별로 정리하여 브라우저에서 볼 수 있게 렌더링합니다.
+
+![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
+![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
+![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
+![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
+
+## 빠른 시작
+
+```bash
+# 설치
+npm install -D flowbook
+
+# 초기화 — 스크립트 + 예제 파일 추가
+npx flowbook init
+
+# 개발 서버 실행
+npm run flowbook
+# → http://localhost:6200
+
+# 정적 사이트 빌드
+npm run build-flowbook
+# → flowbook-static/
+```
+
+## CLI
+
+```
+flowbook init                프로젝트에 Flowbook 설정
+flowbook dev  [--port 6200]  개발 서버 실행
+flowbook build [--out-dir d] 정적 사이트 빌드
+```
+
+### `flowbook init`
+
+- `package.json`에 `"flowbook"`, `"build-flowbook"` 스크립트를 추가합니다
+- `flows/example.flow.md` 예제 템플릿을 생성합니다
+
+### `flowbook dev`
+
+`http://localhost:6200`에서 HMR이 지원되는 Vite 개발 서버를 실행합니다. `.flow.md` 또는 `.flowchart.md` 파일 변경 사항이 즉시 반영됩니다.
+
+### `flowbook build`
+
+`flowbook-static/` 디렉토리에 정적 사이트를 빌드합니다 (`--out-dir`로 변경 가능). 어디서든 배포 가능합니다.
+
+## 플로우 파일 작성
+
+프로젝트 어디에서나 `.flow.md` (또는 `.flowchart.md`) 파일을 생성하세요:
+
+````markdown
+---
+title: 로그인 흐름
+category: 인증
+tags: [auth, login, oauth]
+order: 1
+description: OAuth2를 사용한 사용자 인증 흐름
+---
+
+```mermaid
+flowchart TD
+    A[사용자] --> B{인증됨?}
+    B -->|예| C[대시보드]
+    B -->|아니오| D[로그인 페이지]
+```
+````
+
+Flowbook이 자동으로 파일을 발견하여 뷰어에 추가합니다.
+
+## 프론트매터 스키마
+
+| 필드          | 타입       | 필수 | 설명                                |
+|---------------|------------|------|-------------------------------------|
+| `title`       | `string`   | 아니오 | 표시 제목 (기본값: 파일명)          |
+| `category`    | `string`   | 아니오 | 사이드바 카테고리 (기본값: "Uncategorized") |
+| `tags`        | `string[]` | 아니오 | 필터링 가능한 태그                  |
+| `order`       | `number`   | 아니오 | 카테고리 내 정렬 순서 (기본값: 999) |
+| `description` | `string`   | 아니오 | 상세 보기에 표시되는 설명           |
+
+## 파일 탐색
+
+Flowbook은 기본적으로 다음 패턴을 스캔합니다:
+
+```
+**/*.flow.md
+**/*.flowchart.md
+```
+
+`node_modules/`, `.git/`, `dist/`는 무시합니다.
+
+## 동작 원리
+
+```
+.flow.md 파일 ──→ Vite 플러그인 ──→ 가상 모듈 ──→ React 뷰어
+                    │                   │
+                    ├─ fast-glob 스캔   ├─ export default { flows: [...] }
+                    ├─ gray-matter      │
+                    │  파싱             └─ 파일 변경 시 HMR
+                    └─ mermaid 블록
+                       추출
+```
+
+1. **탐색** — `fast-glob`이 프로젝트에서 `*.flow.md` / `*.flowchart.md`를 스캔
+2. **파싱** — `gray-matter`가 YAML 프론트매터를 추출; 정규식으로 `` ```mermaid `` 블록 추출
+3. **가상 모듈** — Vite 플러그인이 파싱된 데이터를 `virtual:flowbook-data`로 제공
+4. **렌더링** — React 앱이 `mermaid.render()`를 통해 Mermaid 다이어그램 렌더링
+5. **HMR** — 파일 변경 시 가상 모듈을 무효화하여 리로드 트리거
+
+## 프로젝트 구조
+
+```
+src/
+├── types.ts                    # 공유 타입 (FlowEntry, FlowbookData)
+├── node/
+│   ├── cli.ts                  # CLI 진입점 (init, dev, build)
+│   ├── server.ts               # 프로그래밍 방식 Vite 서버 & 빌드
+│   ├── init.ts                 # 프로젝트 초기화 로직
+│   ├── discovery.ts            # 파일 스캐너 (fast-glob)
+│   ├── parser.ts               # 프론트매터 + mermaid 추출
+│   └── plugin.ts               # Vite 가상 모듈 플러그인
+└── client/
+    ├── index.html              # 진입 HTML
+    ├── main.tsx                # React 진입점
+    ├── App.tsx                 # 검색 + 사이드바 + 뷰어 레이아웃
+    ├── vite-env.d.ts           # 가상 모듈 타입 선언
+    ├── styles/globals.css      # Tailwind v4 + 커스텀 스타일
+    └── components/
+        ├── Header.tsx          # 로고, 검색바, 플로우 개수
+        ├── Sidebar.tsx         # 접을 수 있는 카테고리 트리
+        ├── MermaidRenderer.tsx # Mermaid 다이어그램 렌더링
+        ├── FlowView.tsx        # 단일 플로우 상세 보기
+        └── EmptyState.tsx      # 빈 상태 안내
+```
+
+## 개발 (기여)
+
+```bash
+git clone https://github.com/Epsilondelta-ai/flowbook.git
+cd flowbook
+npm install
+
+# 로컬 개발 (루트 vite.config.ts 사용)
+npm run dev
+
+# CLI 빌드
+npm run build
+
+# 로컬에서 CLI 테스트
+node dist/cli.js dev
+node dist/cli.js build
+```
+
+## 기술 스택
+
+- **Vite** — HMR 지원 개발 서버
+- **React 19** — UI
+- **Mermaid 11** — 다이어그램 렌더링
+- **Tailwind CSS v4** — 스타일링
+- **gray-matter** — YAML 프론트매터 파싱
+- **fast-glob** — 파일 탐색
+- **tsup** — CLI 번들러
+- **TypeScript** — 타입 안전성
+
+## 라이선스
+
+MIT

package/README.md

@@ -0,0 +1,170 @@
+# Flowbook
+
+> **English** | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
+
+Storybook for flowcharts. Auto-discovers Mermaid diagram files from your codebase, organizes them by category, and renders them in a browsable viewer.
+
+![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
+![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
+![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
+![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
+
+## Quick Start
+
+```bash
+# Install
+npm install -D flowbook
+
+# Initialize — adds scripts + example file
+npx flowbook init
+
+# Start dev server
+npm run flowbook
+# → http://localhost:6200
+
+# Build static site
+npm run build-flowbook
+# → flowbook-static/
+```
+
+## CLI
+
+```
+flowbook init                Set up Flowbook in your project
+flowbook dev  [--port 6200]  Start the dev server
+flowbook build [--out-dir d] Build a static site
+```
+
+### `flowbook init`
+
+- Adds `"flowbook"` and `"build-flowbook"` scripts to your `package.json`
+- Creates `flows/example.flow.md` as a starter template
+
+### `flowbook dev`
+
+Starts a Vite dev server at `http://localhost:6200` with HMR. Any `.flow.md` or `.flowchart.md` file changes are picked up instantly.
+
+### `flowbook build`
+
+Builds a static site to `flowbook-static/` (configurable via `--out-dir`). Deploy it anywhere.
+
+## Writing Flow Files
+
+Create a `.flow.md` (or `.flowchart.md`) file anywhere in your project:
+
+````markdown
+---
+title: Login Flow
+category: Authentication
+tags: [auth, login, oauth]
+order: 1
+description: User authentication flow with OAuth2
+---
+
+```mermaid
+flowchart TD
+    A[User] --> B{Authenticated?}
+    B -->|Yes| C[Dashboard]
+    B -->|No| D[Login Page]
+```
+````
+
+Flowbook automatically discovers the file and adds it to the viewer.
+
+## Frontmatter Schema
+
+| Field         | Type       | Required | Description                        |
+|---------------|------------|----------|------------------------------------|
+| `title`       | `string`   | No       | Display title (defaults to filename) |
+| `category`    | `string`   | No       | Sidebar category (defaults to "Uncategorized") |
+| `tags`        | `string[]` | No       | Filterable tags                    |
+| `order`       | `number`   | No       | Sort order within category (default: 999) |
+| `description` | `string`   | No       | Description shown in detail view   |
+
+## File Discovery
+
+Flowbook scans for these patterns by default:
+
+```
+**/*.flow.md
+**/*.flowchart.md
+```
+
+Ignores `node_modules/`, `.git/`, and `dist/`.
+
+## How It Works
+
+```
+.flow.md files ──→ Vite Plugin ──→ Virtual Module ──→ React Viewer
+                    │                   │
+                    ├─ fast-glob scan   ├─ export default { flows: [...] }
+                    ├─ gray-matter      │
+                    │  parse            └─ HMR on file change
+                    └─ mermaid block
+                       extraction
+```
+
+1. **Discovery** — `fast-glob` scans the project for `*.flow.md` / `*.flowchart.md`
+2. **Parsing** — `gray-matter` extracts YAML frontmatter; regex extracts `` ```mermaid `` blocks
+3. **Virtual Module** — Vite plugin serves parsed data as `virtual:flowbook-data`
+4. **Rendering** — React app renders Mermaid diagrams via `mermaid.render()`
+5. **HMR** — File changes invalidate the virtual module, triggering a reload
+
+## Project Structure
+
+```
+src/
+├── types.ts                    # Shared types (FlowEntry, FlowbookData)
+├── node/
+│   ├── cli.ts                  # CLI entry point (init, dev, build)
+│   ├── server.ts               # Programmatic Vite server & build
+│   ├── init.ts                 # Project initialization logic
+│   ├── discovery.ts            # File scanner (fast-glob)
+│   ├── parser.ts               # Frontmatter + mermaid extraction
+│   └── plugin.ts               # Vite virtual module plugin
+└── client/
+    ├── index.html              # Entry HTML
+    ├── main.tsx                # React entry
+    ├── App.tsx                 # Layout with search + sidebar + viewer
+    ├── vite-env.d.ts           # Virtual module type declarations
+    ├── styles/globals.css      # Tailwind v4 + custom styles
+    └── components/
+        ├── Header.tsx          # Logo, search bar, flow count
+        ├── Sidebar.tsx         # Collapsible category tree
+        ├── MermaidRenderer.tsx # Mermaid diagram rendering
+        ├── FlowView.tsx        # Single flow detail view
+        └── EmptyState.tsx      # Empty state with guide
+```
+
+## Development (Contributing)
+
+```bash
+git clone https://github.com/Epsilondelta-ai/flowbook.git
+cd flowbook
+npm install
+
+# Local dev (uses root vite.config.ts)
+npm run dev
+
+# Build CLI
+npm run build
+
+# Test CLI locally
+node dist/cli.js dev
+node dist/cli.js build
+```
+
+## Tech Stack
+
+- **Vite** — Dev server with HMR
+- **React 19** — UI
+- **Mermaid 11** — Diagram rendering
+- **Tailwind CSS v4** — Styling
+- **gray-matter** — YAML frontmatter parsing
+- **fast-glob** — File discovery
+- **tsup** — CLI bundler
+- **TypeScript** — Type safety
+
+## License
+
+MIT

package/README.pt-BR.md

@@ -0,0 +1,170 @@
+# Flowbook
+
+> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | **Português (BR)** | [Français](./README.fr.md) | [Русский](./README.ru.md) | [Deutsch](./README.de.md)
+
+Storybook para fluxogramas. Descobre automaticamente arquivos de diagramas Mermaid no seu código, organiza por categoria e renderiza em um visualizador navegável.
+
+![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
+![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
+![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
+![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
+
+## Início Rápido
+
+```bash
+# Instalar
+npm install -D flowbook
+
+# Inicializar — adiciona scripts + arquivo de exemplo
+npx flowbook init
+
+# Iniciar servidor de desenvolvimento
+npm run flowbook
+# → http://localhost:6200
+
+# Construir site estático
+npm run build-flowbook
+# → flowbook-static/
+```
+
+## CLI
+
+```
+flowbook init                Configurar Flowbook no seu projeto
+flowbook dev  [--port 6200]  Iniciar o servidor de desenvolvimento
+flowbook build [--out-dir d] Construir um site estático
+```
+
+### `flowbook init`
+
+- Adiciona os scripts `"flowbook"` e `"build-flowbook"` ao seu `package.json`
+- Cria `flows/example.flow.md` como template inicial
+
+### `flowbook dev`
+
+Inicia um servidor de desenvolvimento Vite em `http://localhost:6200` com HMR. Qualquer alteração em arquivos `.flow.md` ou `.flowchart.md` é refletida instantaneamente.
+
+### `flowbook build`
+
+Constrói um site estático em `flowbook-static/` (configurável via `--out-dir`). Faça deploy em qualquer lugar.
+
+## Escrevendo Arquivos de Fluxo
+
+Crie um arquivo `.flow.md` (ou `.flowchart.md`) em qualquer lugar do seu projeto:
+
+````markdown
+---
+title: Fluxo de Login
+category: Autenticação
+tags: [auth, login, oauth]
+order: 1
+description: Fluxo de autenticação de usuário com OAuth2
+---
+
+```mermaid
+flowchart TD
+    A[Usuário] --> B{Autenticado?}
+    B -->|Sim| C[Dashboard]
+    B -->|Não| D[Página de Login]
+```
+````
+
+O Flowbook descobre automaticamente o arquivo e o adiciona ao visualizador.
+
+## Schema do Frontmatter
+
+| Campo         | Tipo       | Obrigatório | Descrição                              |
+|---------------|------------|-------------|----------------------------------------|
+| `title`       | `string`   | Não         | Título exibido (padrão: nome do arquivo) |
+| `category`    | `string`   | Não         | Categoria na barra lateral (padrão: "Uncategorized") |
+| `tags`        | `string[]` | Não         | Tags filtráveis                        |
+| `order`       | `number`   | Não         | Ordem dentro da categoria (padrão: 999)|
+| `description` | `string`   | Não         | Descrição na visualização detalhada    |
+
+## Descoberta de Arquivos
+
+O Flowbook escaneia estes padrões por padrão:
+
+```
+**/*.flow.md
+**/*.flowchart.md
+```
+
+Ignora `node_modules/`, `.git/` e `dist/`.
+
+## Como Funciona
+
+```
+arquivos .flow.md ──→ Plugin Vite ──→ Módulo Virtual ──→ Visualizador React
+                        │                   │
+                        ├─ scan fast-glob   ├─ export default { flows: [...] }
+                        ├─ gray-matter      │
+                        │  parsing          └─ HMR na alteração de arquivo
+                        └─ bloco mermaid
+                           extração
+```
+
+1. **Descoberta** — `fast-glob` escaneia o projeto procurando `*.flow.md` / `*.flowchart.md`
+2. **Parsing** — `gray-matter` extrai o frontmatter YAML; regex extrai blocos `` ```mermaid ``
+3. **Módulo Virtual** — Plugin Vite serve os dados parseados como `virtual:flowbook-data`
+4. **Renderização** — App React renderiza diagramas Mermaid via `mermaid.render()`
+5. **HMR** — Alterações de arquivo invalidam o módulo virtual, disparando um reload
+
+## Estrutura do Projeto
+
+```
+src/
+├── types.ts                    # Tipos compartilhados (FlowEntry, FlowbookData)
+├── node/
+│   ├── cli.ts                  # Ponto de entrada CLI (init, dev, build)
+│   ├── server.ts               # Servidor Vite programático e build
+│   ├── init.ts                 # Lógica de inicialização do projeto
+│   ├── discovery.ts            # Scanner de arquivos (fast-glob)
+│   ├── parser.ts               # Extração de frontmatter + mermaid
+│   └── plugin.ts               # Plugin de módulo virtual do Vite
+└── client/
+    ├── index.html              # HTML de entrada
+    ├── main.tsx                # Entrada React
+    ├── App.tsx                 # Layout com busca + barra lateral + visualizador
+    ├── vite-env.d.ts           # Declarações de tipo do módulo virtual
+    ├── styles/globals.css      # Tailwind v4 + estilos customizados
+    └── components/
+        ├── Header.tsx          # Logo, barra de busca, contagem de fluxos
+        ├── Sidebar.tsx         # Árvore de categorias colapsável
+        ├── MermaidRenderer.tsx # Renderização de diagramas Mermaid
+        ├── FlowView.tsx        # Visualização detalhada de fluxo individual
+        └── EmptyState.tsx      # Estado vazio com guia
+```
+
+## Desenvolvimento (Contribuição)
+
+```bash
+git clone https://github.com/Epsilondelta-ai/flowbook.git
+cd flowbook
+npm install
+
+# Desenvolvimento local (usa o vite.config.ts raiz)
+npm run dev
+
+# Construir CLI
+npm run build
+
+# Testar CLI localmente
+node dist/cli.js dev
+node dist/cli.js build
+```
+
+## Stack Tecnológico
+
+- **Vite** — Servidor de desenvolvimento com HMR
+- **React 19** — UI
+- **Mermaid 11** — Renderização de diagramas
+- **Tailwind CSS v4** — Estilização
+- **gray-matter** — Parsing de frontmatter YAML
+- **fast-glob** — Descoberta de arquivos
+- **tsup** — Bundler de CLI
+- **TypeScript** — Segurança de tipos
+
+## Licença
+
+MIT

package/README.ru.md

@@ -0,0 +1,171 @@
+# Flowbook
+
+> [English](./README.md) | [한국어](./README.ko.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Español](./README.es.md) | [Português (BR)](./README.pt-BR.md) | [Français](./README.fr.md) | **Русский** | [Deutsch](./README.de.md)
+
+Storybook для блок-схем. Автоматически обнаруживает файлы диаграмм Mermaid в вашем коде, организует их по категориям и отображает в удобном просмотрщике.
+
+![Vite](https://img.shields.io/badge/vite-6.x-646CFF?logo=vite&logoColor=white)
+![React](https://img.shields.io/badge/react-19.x-61DAFB?logo=react&logoColor=white)
+![Mermaid](https://img.shields.io/badge/mermaid-11.x-FF3670?logo=mermaid&logoColor=white)
+![TypeScript](https://img.shields.io/badge/typescript-5.x-3178C6?logo=typescript&logoColor=white)
+
+## Быстрый Старт
+
+```bash
+# Установка
+npm install -D flowbook
+
+# Инициализация — добавляет скрипты + файл-пример
+npx flowbook init
+
+# Запуск сервера разработки
+npm run flowbook
+# → http://localhost:6200
+
+# Сборка статического сайта
+npm run build-flowbook
+# → flowbook-static/
+```
+
+## CLI
+
+```
+flowbook init                Настроить Flowbook в проекте
+flowbook dev  [--port 6200]  Запустить сервер разработки
+flowbook build [--out-dir d] Собрать статический сайт
+```
+
+### `flowbook init`
+
+- Добавляет скрипты `"flowbook"` и `"build-flowbook"` в ваш `package.json`
+- Создаёт `flows/example.flow.md` в качестве стартового шаблона
+
+### `flowbook dev`
+
+Запускает сервер разработки Vite на `http://localhost:6200` с поддержкой HMR. Любые изменения в файлах `.flow.md` или `.flowchart.md` отображаются мгновенно.
+
+### `flowbook build`
+
+Собирает статический сайт в `flowbook-static/` (настраивается через `--out-dir`). Разверните его где угодно.
+
+## Создание Файлов Потоков
+
+Создайте файл `.flow.md` (или `.flowchart.md`) в любом месте вашего проекта:
+
+````markdown
+---
+title: Поток Авторизации
+category: Аутентификация
+tags: [auth, login, oauth]
+order: 1
+description: Поток аутентификации пользователя с OAuth2
+---
+
+```mermaid
+flowchart TD
+    A[Пользователь] --> B{Авторизован?}
+    B -->|Да| C[Панель управления]
+    B -->|Нет| D[Страница входа]
+```
+````
+
+Flowbook автоматически обнаружит файл и добавит его в просмотрщик.
+
+## Схема Frontmatter
+
+| Поле          | Тип        | Обязательно | Описание                              |
+|---------------|------------|-------------|---------------------------------------|
+| `title`       | `string`   | Нет         | Отображаемый заголовок (по умолчанию: имя файла) |
+| `category`    | `string`   | Нет         | Категория в боковой панели (по умолчанию: "Uncategorized") |
+| `tags`        | `string[]` | Нет         | Фильтруемые теги                      |
+| `order`       | `number`   | Нет         | Порядок сортировки в категории (по умолчанию: 999) |
+| `description` | `string`   | Нет         | Описание в детальном просмотре        |
+
+## Обнаружение Файлов
+
+Flowbook по умолчанию сканирует следующие шаблоны:
+
+```
+**/*.flow.md
+**/*.flowchart.md
+```
+
+Игнорирует `node_modules/`, `.git/` и `dist/`.
+
+## Как Это Работает
+
+```
+файлы .flow.md ──→ Плагин Vite ──→ Виртуальный модуль ──→ React-просмотрщик
+                     │                    │
+                     ├─ сканирование      ├─ export default { flows: [...] }
+                     │  fast-glob         │
+                     ├─ gray-matter       └─ HMR при изменении файла
+                     │  парсинг
+                     └─ блок mermaid
+                        извлечение
+```
+
+1. **Обнаружение** — `fast-glob` сканирует проект в поисках `*.flow.md` / `*.flowchart.md`
+2. **Парсинг** — `gray-matter` извлекает YAML frontmatter; регулярные выражения извлекают блоки `` ```mermaid ``
+3. **Виртуальный модуль** — Плагин Vite предоставляет распарсенные данные как `virtual:flowbook-data`
+4. **Рендеринг** — React-приложение рендерит диаграммы Mermaid через `mermaid.render()`
+5. **HMR** — Изменения файлов инвалидируют виртуальный модуль, запуская перезагрузку
+
+## Структура Проекта
+
+```
+src/
+├── types.ts                    # Общие типы (FlowEntry, FlowbookData)
+├── node/
+│   ├── cli.ts                  # Точка входа CLI (init, dev, build)
+│   ├── server.ts               # Программный сервер Vite и сборка
+│   ├── init.ts                 # Логика инициализации проекта
+│   ├── discovery.ts            # Сканер файлов (fast-glob)
+│   ├── parser.ts               # Извлечение frontmatter + mermaid
+│   └── plugin.ts               # Плагин виртуального модуля Vite
+└── client/
+    ├── index.html              # Входной HTML
+    ├── main.tsx                # Точка входа React
+    ├── App.tsx                 # Макет с поиском + боковая панель + просмотрщик
+    ├── vite-env.d.ts           # Объявления типов виртуального модуля
+    ├── styles/globals.css      # Tailwind v4 + пользовательские стили
+    └── components/
+        ├── Header.tsx          # Логотип, поиск, количество потоков
+        ├── Sidebar.tsx         # Сворачиваемое дерево категорий
+        ├── MermaidRenderer.tsx # Рендеринг диаграмм Mermaid
+        ├── FlowView.tsx        # Детальный просмотр отдельного потока
+        └── EmptyState.tsx      # Пустое состояние с инструкцией
+```
+
+## Разработка (Вклад)
+
+```bash
+git clone https://github.com/Epsilondelta-ai/flowbook.git
+cd flowbook
+npm install
+
+# Локальная разработка (используется корневой vite.config.ts)
+npm run dev
+
+# Сборка CLI
+npm run build
+
+# Локальное тестирование CLI
+node dist/cli.js dev
+node dist/cli.js build
+```
+
+## Технологический Стек
+
+- **Vite** — Сервер разработки с HMR
+- **React 19** — Пользовательский интерфейс
+- **Mermaid 11** — Рендеринг диаграмм
+- **Tailwind CSS v4** — Стилизация
+- **gray-matter** — Парсинг YAML frontmatter
+- **fast-glob** — Обнаружение файлов
+- **tsup** — Сборщик CLI
+- **TypeScript** — Типобезопасность
+
+## Лицензия
+
+MIT