diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 7280a5f..2b003d6 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -16,7 +16,10 @@ "Bash(bun tsc:*)", "Bash(ls:*)", "Bash(bun x tsc:*)", - "Bash(bun:*)" + "Bash(bun:*)", + "Bash(mkdir:*)", + "Bash(cp:*)", + "Bash(rg:*)" ], "deny": [] } diff --git a/README.md b/README.md index c4a5cd8..d5f889a 100644 --- a/README.md +++ b/README.md @@ -1,211 +1,230 @@ -# React Telegram Bot ⚛️🤖 +# React Telegram ⚛️🤖 -Build interactive Telegram bots using React components with state management, just like a web app! +Build interactive Telegram bots using React components! This monorepo contains packages for creating Telegram bots with familiar React patterns, state management, and full TypeScript support. -![Demo](https://img.shields.io/badge/demo-live-brightgreen) ![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB) ![Bun](https://img.shields.io/badge/Bun-000?logo=bun&logoColor=white) +![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB) ![Bun](https://img.shields.io/badge/Bun-000?logo=bun&logoColor=white) + +## 📦 Packages + +### [@react-telegram/core](./packages/core) +Core React reconciler for building Telegram bot interfaces. Translates React components into Telegram message structures. + +### [@react-telegram/mtcute-adapter](./packages/mtcute-adapter) +MTCute adapter that connects the React reconciler with the Telegram Bot API. + +### [Examples](./packages/examples) +Complete example bots demonstrating various features and patterns. + +## 🚀 Installation + +```bash +# Using bun (recommended) +bun add @react-telegram/core @react-telegram/mtcute-adapter + +# Using npm +npm install @react-telegram/core @react-telegram/mtcute-adapter + +# Using yarn +yarn add @react-telegram/core @react-telegram/mtcute-adapter +``` ## ✨ Features - **React Components**: Write bot interfaces using familiar React syntax -- **State Management**: Full React state with `useState`, `useEffect`, and more -- **Interactive Buttons**: onClick handlers that work just like web buttons -- **Rich Text Formatting**: Bold, italic, code blocks, spoilers, and more -- **Message Editing**: Efficient updates using Telegram's edit message API -- **TypeScript Support**: Full type safety throughout -- **Hot Reload**: Instant development feedback with Bun's hot reload +- **State Management**: Full React state with `useState`, `useEffect`, and hooks +- **Interactive Elements**: Buttons with onClick handlers, text inputs +- **Rich Formatting**: Bold, italic, code blocks, spoilers, links, and more +- **Message Updates**: Automatic message editing when state changes +- **TypeScript Support**: Full type safety with autocompletion +- **Line Breaks**: Use `
` tags for clean formatting -## 🚀 Quick Start - -```bash -# Clone the repository -git clone https://github.com/your-username/react-telegram-bot.git -cd react-telegram-bot - -# Install dependencies -bun install - -# Set up environment variables -cp .env.example .env -# Edit .env with your Telegram bot credentials - -# Run the bot -bun run src/example-bot.tsx -``` - -## 📱 Example Bot - -Here's a complete interactive counter bot in just a few lines: +## 📱 Quick Example ```tsx import React, { useState } from 'react'; -import { MtcuteAdapter } from './mtcute-adapter'; +import { MtcuteAdapter } from '@react-telegram/mtcute-adapter'; -const CounterApp = () => { +const CounterBot = () => { const [count, setCount] = useState(0); return ( <> - 🔢 Counter Bot - {'\n\n'} - Current count: {count} - {'\n\n'} + Counter Bot 🤖 +
+
+ Current count: {count} +
+
- - - - - + + ); }; -// Set up the bot -const adapter = new MtcuteAdapter(config); -adapter.onCommand('counter', () => ); +// Initialize the bot +async function main() { + const adapter = new MtcuteAdapter({ + apiId: parseInt(process.env.API_ID!), + apiHash: process.env.API_HASH!, + botToken: process.env.BOT_TOKEN! + }); + + adapter.onCommand('start', () => ); + await adapter.start(process.env.BOT_TOKEN!); + + console.log('Bot is running!'); +} + +main().catch(console.error); ``` -## 🎯 What Makes This Special? +## 🛠️ Development Setup -### Real React State Management -Components maintain state between interactions, just like in a web app: +This project uses Bun workspaces for managing multiple packages. +```bash +# Clone the repository +git clone https://github.com/your-username/react-telegram.git +cd react-telegram + +# Install dependencies +bun install + +# Run examples +cd packages/examples +bun run start +``` + +### Environment Variables + +Create a `.env` file in the examples package: + +```env +API_ID=your_telegram_api_id +API_HASH=your_telegram_api_hash +BOT_TOKEN=your_bot_token_from_botfather +``` + +Get your credentials from: +- Bot token: [@BotFather](https://t.me/botfather) +- API credentials: [my.telegram.org](https://my.telegram.org) + +## 📖 Supported Elements + +### Text Formatting +- ``, `` - Bold text +- ``, `` - Italic text +- ``, `` - Underlined text +- ``, ``, `` - Strikethrough +- `` - Inline code +- `
` - Code blocks
+- `
` - Line breaks
+
+### Telegram-Specific
+- `` - Hidden spoiler text
+- `` - Custom emoji
+- `
` - Quotes
+- `` - Links
+
+### Interactive Elements
+- `
+      

+      

+      {todos.length === 0 ? (
+        No todos yet!
+      ) : (
+        todos.map((todo, i) => (
+          <>
+            {i + 1}. {todo}
+            

+          
+        ))
+      )}
+      

+      
+        
+        
+      
     
   );
 };
 ```
 
-### Rich Text Formatting
-Support for all Telegram formatting features:
-
+### Input Handling
 ```tsx
-<>
-  Bold and italic text
-  inline code
-  
Code blocks

-  
Quotes

-  Hidden text
-  Links
-
+const InputBot = () => {
+  const [name, setName] = useState('');
+  
+  return (
+    <>
+      What's your name?
+      

+      

+      {name && <>Hello, {name}!}
+       setName(text)} 
+        autoDelete // Automatically delete user's message
+      />
+    
+  );
+};
 ```
 
-### Efficient Message Updates
-The bot automatically uses Telegram's edit message API for updates instead of sending multiple messages:
+## 🏗️ Project Structure
 
-- ✅ First render: Sends new message  
-- ✅ State changes: Edits existing message
-- ✅ No message spam in chats
-
-## 🛠️ Built With
-
-- **[MTCute](https://mtcute.dev/)** - Modern Telegram client library
-- **[React](https://react.dev/)** - UI library with custom reconciler
-- **[Bun](https://bun.sh/)** - Fast JavaScript runtime and package manager
-- **[TypeScript](https://typescriptlang.org/)** - Type safety
-
-## 📖 How It Works
-
-This project implements a custom React reconciler that translates React components into Telegram messages:
-
-1. **React Components** → **Virtual DOM Tree**
-2. **Custom Reconciler** → **Telegram Message Structure**
-3. **Message Renderer** → **Rich Text + Inline Keyboards**
-4. **State Updates** → **Message Edits**
-
-The reconciler handles:
-- Text formatting (``, ``, ``, etc.)
-- Interactive buttons with click handlers
-- Message layout with rows and columns
-- Efficient updates via message editing
-
-## 🎮 Example Bots Included
-
-### 🔢 Counter Bot
-Interactive counter with increment/decrement buttons
-
-### 📝 Todo List Bot  
-Full todo list manager with add/remove/toggle functionality
-
-### ❓ Help Bot
-Multi-section help system with navigation
-
-### 🎨 Formatting Demo
-Showcase of all supported Telegram formatting features
-
-## 🚀 Getting Started
-
-### Prerequisites
-- [Bun](https://bun.sh/) installed
-- Telegram Bot Token from [@BotFather](https://t.me/botfather)
-- Telegram API credentials from [my.telegram.org](https://my.telegram.org)
-
-### Environment Setup
-```bash
-# Required environment variables
-API_ID=your_api_id
-API_HASH=your_api_hash
-BOT_TOKEN=your_bot_token
-STORAGE_PATH=.mtcute  # Optional
 ```
-
-### Development
-```bash
-# Run with hot reload
-bun --hot src/example-bot.tsx
-
-# Run tests
-bun test
-
-# Type check
-bun run tsc --noEmit
+react-telegram/
+├── packages/
+│   ├── core/              # Core React reconciler
+│   │   ├── src/
+│   │   │   ├── reconciler.ts
+│   │   │   ├── jsx.d.ts
+│   │   │   └── index.ts
+│   │   └── package.json
+│   │
+│   ├── mtcute-adapter/    # MTCute Telegram adapter
+│   │   ├── src/
+│   │   │   ├── mtcute-adapter.ts
+│   │   │   └── index.ts
+│   │   └── package.json
+│   │
+│   └── examples/          # Example bots
+│       ├── src/
+│       │   ├── example-bot.tsx
+│       │   ├── quiz-bot.tsx
+│       │   └── ...
+│       └── package.json
+│
+└── package.json          # Root workspace configuration
 ```
 
-## 📚 API Reference
-
-### MtcuteAdapter
-```tsx
-const adapter = new MtcuteAdapter({
-  apiId: number,
-  apiHash: string,
-  botToken: string,
-  storage?: string
-});
-
-// Register command handlers
-adapter.onCommand('start', (ctx) => );
-
-// Start the bot
-await adapter.start();
-```
-
-### Supported Elements
-- ``, ``, ``, `` - Text formatting
-- ``, `
` - Code formatting  
-- `
` - Quotes
-- `` - Spoiler text
-- `` - Links
-- `
+    
+  
+);
+
+async function main() {
+  const adapter = new MtcuteAdapter({
+    apiId: parseInt(process.env.API_ID!),
+    apiHash: process.env.API_HASH!,
+    botToken: process.env.BOT_TOKEN!
+  });
+
+  adapter.onCommand('start', () => );
+  
+  await adapter.start(process.env.BOT_TOKEN!);
+  console.log('Bot is running!');
+}
+
+main().catch(console.error);
+```
+
+## Features
+
+- Full React component support for Telegram messages
+- Automatic message updates when state changes
+- Button click handling
+- Text input support with auto-delete option
+- Command handling
+- TypeScript support
+
+## API
+
+### MtcuteAdapter
+
+```typescript
+const adapter = new MtcuteAdapter({
+  apiId: number,
+  apiHash: string,
+  botToken: string,
+  storage?: string // Default: '.mtcute'
+});
+```
+
+### Methods
+
+- `onCommand(command: string, handler: (ctx) => ReactElement)` - Register a command handler
+- `start(botToken: string)` - Start the bot
+- `sendReactMessage(chatId: number | string, app: ReactElement)` - Send a React-powered message
+- `getClient()` - Get the underlying MTCute client
+- `getDispatcher()` - Get the MTCute dispatcher
+
+## License
+
+MIT
\ No newline at end of file
diff --git a/packages/mtcute-adapter/package.json b/packages/mtcute-adapter/package.json
new file mode 100644
index 0000000..a924b76
--- /dev/null
+++ b/packages/mtcute-adapter/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@react-telegram/mtcute-adapter",
+  "version": "0.1.0",
+  "description": "MTCute adapter for React Telegram bots",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "bun": "./src/index.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bun run clean && bun run build:types",
+    "build:types": "tsc",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@mtcute/bun": "^0.24.3",
+    "@mtcute/dispatcher": "^0.24.3",
+    "@mtcute/tl": "*",
+    "@react-telegram/core": "workspace:*",
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "npm:pure-react-types@^0.1.4",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "@react-telegram/core": "^0.1.0",
+    "react": ">=18.0.0"
+  },
+  "keywords": [
+    "react",
+    "telegram",
+    "bot",
+    "mtcute",
+    "adapter"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-username/react-telegram.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-username/react-telegram/issues"
+  },
+  "homepage": "https://github.com/your-username/react-telegram#readme"
+}
\ No newline at end of file
diff --git a/packages/mtcute-adapter/src/index.ts b/packages/mtcute-adapter/src/index.ts
new file mode 100644
index 0000000..f49da89
--- /dev/null
+++ b/packages/mtcute-adapter/src/index.ts
@@ -0,0 +1 @@
+export { MtcuteAdapter, type MtcuteAdapterConfig } from './mtcute-adapter';
\ No newline at end of file
diff --git a/src/mtcute-adapter.ts b/packages/mtcute-adapter/src/mtcute-adapter.ts
similarity index 99%
rename from src/mtcute-adapter.ts
rename to packages/mtcute-adapter/src/mtcute-adapter.ts
index e83dbb0..7e56de1 100644
--- a/src/mtcute-adapter.ts
+++ b/packages/mtcute-adapter/src/mtcute-adapter.ts
@@ -11,8 +11,8 @@ import type {
   CodeBlockNode, 
   BlockQuoteNode, 
   RowNode 
-} from './reconciler';
-import { createContainer } from './reconciler';
+} from '@react-telegram/core';
+import { createContainer } from '@react-telegram/core';
 import type { ReactElement } from 'react';
 
 export interface MtcuteAdapterConfig {
diff --git a/packages/mtcute-adapter/tsconfig.json b/packages/mtcute-adapter/tsconfig.json
new file mode 100644
index 0000000..27f7bfb
--- /dev/null
+++ b/packages/mtcute-adapter/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "lib": ["ES2020"],
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "types": ["bun-types"],
+    "composite": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index 32b0bc2..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export { createContainer } from './reconciler';
-export type { 
-  TextNode, 
-  FormattedNode, 
-  LinkNode, 
-  EmojiNode, 
-  CodeBlockNode, 
-  BlockQuoteNode, 
-  ButtonNode, 
-  RowNode, 
-  RootNode,
-  Node
-} from './reconciler';
-
-// Also export the Telegram-prefixed types from jsx.d.ts
-export type {
-  TelegramTextNode,
-  TelegramFormattedNode,
-  TelegramLinkNode,
-  TelegramEmojiNode,
-  TelegramCodeBlockNode,
-  TelegramBlockQuoteNode,
-  TelegramButtonNode,
-  TelegramRowNode,
-  TelegramRootNode,
-  TelegramNode
-} from './jsx';
\ No newline at end of file
diff --git a/src/mtcute-adapter.test.tsx b/src/mtcute-adapter.test.tsx
deleted file mode 100644
index 6d56e66..0000000
--- a/src/mtcute-adapter.test.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/// 
-import { describe, it, expect } from 'vitest';
-import React, { useState } from 'react';
-import { createContainer } from './reconciler';
-
-describe('MtcuteAdapter Integration Tests', () => {
-  it('should generate correct structure for a Telegram message', async () => {
-    const { container, render } = createContainer();
-    
-    const App = () => (
-      <>
-        Bold text
-        {' normal '}
-        italic
-        {'\n'}
-        Link
-        {'\n'}
-        
-          
-          
-        
-      
-    );
-    
-    render();
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Check text nodes (bold, ' normal ', italic, '\n', link, '\n')
-    const textNodes = container.root.children.filter(n => n.type !== 'row');
-    expect(textNodes).toHaveLength(6);
-    
-    // Check button row
-    const rows = container.root.children.filter(n => n.type === 'row');
-    expect(rows).toHaveLength(1);
-    expect(rows[0]?.type).toBe('row');
-    if (rows[0]?.type === 'row') {
-      expect(rows[0].children).toHaveLength(2);
-      expect(rows[0].children[0]?.text).toBe('Yes');
-      expect(rows[0].children[1]?.text).toBe('No');
-    }
-  });
-
-  it('should handle interactive state changes', async () => {
-    const { container, render, clickButton } = createContainer();
-    
-    const CounterApp = () => {
-      const [count, setCount] = useState(0);
-      
-      return (
-        <>
-          Count: {count}
-          {'\n'}
-          
-            
-          
-        
-      );
-    };
-    
-    render();
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Check initial state
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [
-        { type: 'text', content: 'Count: ' },
-        { type: 'text', content: '0' }
-      ]
-    });
-    
-    // Click button
-    clickButton('0-0');
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Check updated state
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [
-        { type: 'text', content: 'Count: ' },
-        { type: 'text', content: '1' }
-      ]
-    });
-  });
-
-  it('should handle all Telegram formatting types', async () => {
-    const { container, render } = createContainer();
-    
-    const FormattingApp = () => (
-      <>
-        Bold
-        {'\n'}
-        Italic
-        {'\n'}
-        Underline
-        {'\n'}
-        Strikethrough
-        {'\n'}
-        Spoiler
-        {'\n'}
-        code
-        {'\n'}
-        
code block

-        {'\n'}
-        
Quote

-        {'\n'}
-        👍
-      
-    );
-    
-    render();
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    const formattedNodes = container.root.children.filter(n => n.type === 'formatted');
-    const otherNodes = container.root.children.filter(n => n.type !== 'formatted' && n.type !== 'text');
-    
-    // Check we have all formatting types
-    expect(formattedNodes).toHaveLength(6); // bold, italic, underline, strikethrough, spoiler, code
-    expect(otherNodes).toHaveLength(3); // codeblock, blockquote, emoji
-    
-    // Check specific nodes
-    const emoji = otherNodes.find(n => n.type === 'emoji');
-    expect(emoji?.type).toBe('emoji');
-    if (emoji?.type === 'emoji') {
-      expect(emoji.emojiId).toBe('123456');
-      expect(emoji.fallback).toBe('👍');
-    }
-    
-    const blockquote = otherNodes.find(n => n.type === 'blockquote');
-    expect(blockquote?.type).toBe('blockquote');
-    if (blockquote?.type === 'blockquote') {
-      expect(blockquote.expandable).toBe(true);
-    }
-  });
-});
\ No newline at end of file
diff --git a/src/reconciler-persistence.test.tsx b/src/reconciler-persistence.test.tsx
deleted file mode 100644
index d5500fb..0000000
--- a/src/reconciler-persistence.test.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/// 
-import { describe, it, expect } from 'vitest';
-import React, { useState } from 'react';
-import { createContainer } from './reconciler';
-
-describe('Telegram Reconciler - Persistence Mode', () => {
-  it('should preserve static content in formatted elements during re-renders', async () => {
-    const { container, render, clickButton } = createContainer();
-    
-    const App = () => {
-      const [count, setCount] = useState(0);
-      
-      return (
-        <>
-          Static bold text
-          Count: {count}
-          
Static quote content

-          
-            
-          
-        
-      );
-    };
-    
-    render();
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Check initial render
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [{ type: 'text', content: 'Static bold text' }]
-    });
-    
-    expect(container.root.children[1]).toEqual({
-      type: 'formatted',
-      format: 'italic',
-      children: [
-        { type: 'text', content: 'Count: ' },
-        { type: 'text', content: '0' }
-      ]
-    });
-    
-    expect(container.root.children[2]).toEqual({
-      type: 'blockquote',
-      children: [{ type: 'text', content: 'Static quote content' }]
-    });
-    
-    // Click button to trigger re-render
-    clickButton('0-0');
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Bold text should still have its content
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [{ type: 'text', content: 'Static bold text' }]
-    });
-    
-    // Italic should update count but keep structure
-    expect(container.root.children[1]).toEqual({
-      type: 'formatted',
-      format: 'italic',
-      children: [
-        { type: 'text', content: 'Count: ' },
-        { type: 'text', content: '1' }
-      ]
-    });
-    
-    // Blockquote should still have its content
-    expect(container.root.children[2]).toEqual({
-      type: 'blockquote',
-      children: [{ type: 'text', content: 'Static quote content' }]
-    });
-  });
-
-  it('should handle mixed static and dynamic content', async () => {
-    const { container, render, clickButton } = createContainer();
-    
-    const App = () => {
-      const [show, setShow] = useState(true);
-      
-      return (
-        <>
-          
-            Always here
-            {show && ' - Dynamic part'}
-          
-          
-            
-          
-        
-      );
-    };
-    
-    render();
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Initial state with dynamic part
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [
-        { type: 'text', content: 'Always here' },
-        { type: 'text', content: ' - Dynamic part' }
-      ]
-    });
-    
-    // Toggle to hide dynamic part
-    clickButton('0-0');
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Should only have static part now
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [
-        { type: 'text', content: 'Always here' }
-      ]
-    });
-    
-    // Toggle back
-    clickButton('0-0');
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Should have both parts again
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [
-        { type: 'text', content: 'Always here' },
-        { type: 'text', content: ' - Dynamic part' }
-      ]
-    });
-  });
-});
\ No newline at end of file
diff --git a/src/reconciler.test.tsx b/src/reconciler.test.tsx
deleted file mode 100644
index 3cfe399..0000000
--- a/src/reconciler.test.tsx
+++ /dev/null
@@ -1,383 +0,0 @@
-/// 
-import { describe, it, expect, vi } from 'vitest';
-import React, { useState } from 'react';
-import { createContainer } from './reconciler';
-
-describe('Telegram Reconciler', () => {
-  it('should render text formatting', async () => {
-    const { container, render } = createContainer();
-    
-    render(
-      <>
-        bold
-        italic
-        underline
-        strikethrough
-        spoiler
-      
-    );
-    
-    // Wait for React to finish rendering
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children).toHaveLength(5);
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [{ type: 'text', content: 'bold' }]
-    });
-    expect(container.root.children[1]).toEqual({
-      type: 'formatted',
-      format: 'italic',
-      children: [{ type: 'text', content: 'italic' }]
-    });
-  });
-
-  it('should render nested formatting', async () => {
-    const { container, render } = createContainer();
-    
-    render(
-      
-        bold italic bold bold
-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children).toHaveLength(1);
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'bold',
-      children: [
-        { type: 'text', content: 'bold ' },
-        {
-          type: 'formatted',
-          format: 'italic',
-          children: [{ type: 'text', content: 'italic bold' }]
-        },
-        { type: 'text', content: ' bold' }
-      ]
-    });
-  });
-
-  it('should render links', async () => {
-    const { container, render } = createContainer();
-    
-    render(
-      <>
-        inline URL
-        inline mention
-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children).toHaveLength(2);
-    expect(container.root.children[0]).toEqual({
-      type: 'link',
-      href: 'http://www.example.com/',
-      children: [{ type: 'text', content: 'inline URL' }]
-    });
-  });
-
-  it('should render emoji', async () => {
-    const { container, render } = createContainer();
-    
-    render(
-      👍
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children).toHaveLength(1);
-    expect(container.root.children[0]).toEqual({
-      type: 'emoji',
-      emojiId: '5368324170671202286',
-      fallback: '👍'
-    });
-  });
-
-  it('should render code blocks', async () => {
-    const { container, render } = createContainer();
-    
-    render(
-      <>
-        inline code
-        
pre-formatted code

-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children).toHaveLength(2);
-    expect(container.root.children[0]).toEqual({
-      type: 'formatted',
-      format: 'code',
-      children: [{ type: 'text', content: 'inline code' }]
-    });
-    expect(container.root.children[1]).toEqual({
-      type: 'codeblock',
-      content: 'pre-formatted code',
-      language: undefined
-    });
-  });
-
-  it('should render blockquotes', async () => {
-    const { container, render } = createContainer();
-    
-    render(
-      <>
-        
Regular quote

-        
Expandable quote

-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children).toHaveLength(2);
-    expect(container.root.children[0]).toEqual({
-      type: 'blockquote',
-      children: [{ type: 'text', content: 'Regular quote' }],
-      expandable: undefined
-    });
-    expect(container.root.children[1]).toEqual({
-      type: 'blockquote',
-      children: [{ type: 'text', content: 'Expandable quote' }],
-      expandable: true
-    });
-  });
-
-  it('should render buttons with IDs based on position', async () => {
-    const { container, render } = createContainer();
-    const onClick1 = vi.fn();
-    const onClick2 = vi.fn();
-    
-    render(
-      
-        
-        
-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children).toHaveLength(1);
-    const row = container.root.children[0];
-    expect(row?.type).toBe('row');
-    if (row?.type === 'row') {
-      expect(row.children).toHaveLength(2);
-      expect(row.children[0]?.id).toBe('0-0');
-      expect(row.children[1]?.id).toBe('0-1');
-    }
-  });
-
-  it('should handle button clicks', async () => {
-    const { render, clickButton } = createContainer();
-    const onClick = vi.fn();
-    
-    render(
-      
-        
-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    clickButton('0-0');
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('should handle buttons with complex children', async () => {
-    const { container, render } = createContainer();
-    const onClick = vi.fn();
-    const mode = 'normal';
-    
-    render(
-      
-        
-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    const row = container.root.children[0];
-    expect(row?.type).toBe('row');
-    if (row?.type === 'row') {
-      expect(row.children[0]?.text).toBe('Switch to Secret Mode');
-    }
-  });
-
-  it('should handle buttons with array children', async () => {
-    const { container, render } = createContainer();
-    
-    render(
-      
-        
-        
-        
-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    const row = container.root.children[0];
-    expect(row?.type).toBe('row');
-    if (row?.type === 'row') {
-      expect(row.children[0]?.text).toBe('Hello World');
-      expect(row.children[1]?.text).toBe('One Two Three');
-      expect(row.children[2]?.text).toBe('123 items');
-    }
-  });
-
-  it('should work with React state', async () => {
-    const { container, render, clickButton } = createContainer();
-    
-    const App = () => {
-      const [count, setCount] = useState(0);
-      return (
-        <>
-          count {count}
-          
-            
-            
-          
-        
-      );
-    };
-    
-    render();
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Initial state - React creates separate text nodes
-    expect(container.root.children[0]).toEqual({
-      type: 'text',
-      content: 'count '
-    });
-    expect(container.root.children[1]).toEqual({
-      type: 'text',
-      content: '0'
-    });
-    
-    // The row is the third child (index 2)
-    expect(container.root.children[2]?.type).toBe('row');
-    
-    // Click increase button
-    clickButton('0-1');
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // After re-render, the text should update
-    expect(container.root.children[1]).toEqual({
-      type: 'text',
-      content: '1'
-    });
-    
-    // Click decrease button
-    clickButton('0-0');
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children[1]).toEqual({
-      type: 'text',
-      content: '0'
-    });
-  });
-
-  it('should handle input elements', async () => {
-    const { container, render } = createContainer();
-    const onSubmit = vi.fn();
-    
-    render(
-      <>
-        
-        
-      
-    );
-    
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    expect(container.root.children).toHaveLength(2);
-    expect(container.root.children[0]).toEqual({
-      type: 'input',
-      onSubmit: expect.any(Function),
-      autoDelete: undefined
-    });
-    expect(container.root.children[1]).toEqual({
-      type: 'input',
-      onSubmit: expect.any(Function),
-      autoDelete: true
-    });
-    
-    // Check input callbacks
-    expect(container.inputCallbacks).toHaveLength(2);
-    expect(container.inputCallbacks[0]).toEqual({
-      callback: expect.any(Function),
-      autoDelete: undefined
-    });
-    expect(container.inputCallbacks[1]).toEqual({
-      callback: expect.any(Function),
-      autoDelete: true
-    });
-    
-    // Test callback execution
-    container.inputCallbacks[0]?.callback('test message');
-    expect(onSubmit).toHaveBeenCalledWith('test message');
-  });
-
-  it('should preserve input elements across re-renders', async () => {
-    const { container, render, clickButton } = createContainer();
-    
-    const App = () => {
-      const [mode, setMode] = useState<'normal' | 'secret'>('normal');
-      const handleNormal = vi.fn();
-      const handleSecret = vi.fn();
-      
-      return (
-        <>
-          {mode === 'normal' ? (
-            
-          ) : (
-            
-          )}
-          
-            
-          
-        
-      );
-    };
-    
-    render();
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Initial state - normal mode
-    expect(container.root.children[0]).toEqual({
-      type: 'input',
-      onSubmit: expect.any(Function),
-      autoDelete: undefined
-    });
-    expect(container.inputCallbacks).toHaveLength(1);
-    expect(container.inputCallbacks[0]?.autoDelete).toBeUndefined();
-    
-    // Toggle to secret mode
-    clickButton('0-0');
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    // Should still have input but with different props
-    expect(container.root.children[0]).toEqual({
-      type: 'input',
-      onSubmit: expect.any(Function),
-      autoDelete: true
-    });
-    expect(container.inputCallbacks).toHaveLength(1);
-    expect(container.inputCallbacks[0]?.autoDelete).toBe(true);
-    
-    // Verify the callback works
-    container.inputCallbacks[0]?.callback('test');
-    
-    // Verify the structure is correct
-    expect(container.inputCallbacks[0]).toBeDefined();
-  });
-});
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index d167589..0fd7aab 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,5 +28,10 @@
     
     // Types
     "types": ["bun-types", "pure-react-types"]
-  }
+  },
+  "references": [
+    { "path": "./packages/core" },
+    { "path": "./packages/mtcute-adapter" },
+    { "path": "./packages/examples" }
+  ]
 }