docs: add v0.11.0 changelog and update guides for new features

Add EN/ZH changelogs, StateMachine guide with blend states and input
control, rewrite Timeline guide with tutorial, update MCP/UI/scenes docs.

Author: esengine

docs/astro/astro.config.mjs

@@ -76,6 +76,7 @@ export default defineConfig({
                 { label: 'Tween Animation', translations: { 'zh-CN': '补间动画' }, slug: 'guides/tween' },
                 { label: 'Spine Animation', translations: { 'zh-CN': 'Spine 动画' }, slug: 'guides/spine' },
                 { label: 'Timeline', translations: { 'zh-CN': '时间轴' }, slug: 'guides/timeline' },
+                { label: 'State Machine', translations: { 'zh-CN': '状态机' }, slug: 'guides/state-machine' },
                 { label: 'Bitmap Text', translations: { 'zh-CN': '位图文本' }, slug: 'guides/bitmap-text' },
                 { label: 'Custom Draw', translations: { 'zh-CN': '自定义绘制' }, slug: 'guides/custom-draw' },
                 { label: 'Post-Processing', translations: { 'zh-CN': '后处理效果' }, slug: 'guides/post-processing' },
@@ -154,6 +155,7 @@ export default defineConfig({
           label: 'Changelog',
           translations: { 'zh-CN': '更新日志' },
           items: [
+            { label: 'v0.11.0', slug: 'changelog-v0110' },
             { label: 'v0.10.0', slug: 'changelog-v0100' },
             { label: 'v0.9.2', slug: 'changelog-v092' },
             { label: 'v0.9.1', slug: 'changelog-v091' },

docs/astro/src/content/docs/changelog-v0110.mdx

@@ -0,0 +1,98 @@
+---
+title: v0.11.0
+description: Estella v0.11.0 release notes
+---
+
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside type="tip">
+v0.11.0 introduces a full visual StateMachine system, replaces the layout engine with Yoga, ships a custom dock system, and delivers numerous editor UX improvements.
+</Aside>
+
+## StateMachine: Visual State Management
+
+A complete state machine system for driving animations and game logic, with a visual node-graph editor inspired by Rive and Unity Animator.
+
+### Component & Asset
+
+The new `StateMachine` component references a `.statemachine` asset and supports `autoPlay`. Define named states (Idle, Run, Attack…), each linked to a timeline clip, and connect them with condition-based transitions using user-defined parameters (float, int, bool, trigger).
+
+### Node Graph Editor
+
+A dedicated panel provides a full node-graph editing experience:
+
+- Drag between state nodes to create transitions
+- Click transitions to configure conditions (parameter comparisons, exit time)
+- Right-click canvas to add states or set the default state
+- Multi-layer tabs for switching between layers
+
+### Multi-Layer, Blend State & Exit State
+
+- **Multiple layers**: each layer runs its own state graph independently with configurable weight (0.0–1.0) and blend mode (Override / Additive)
+- **Blend State**: blends between multiple timeline clips via a 1D blend tree — define motion entries at threshold values and the runtime interpolates between the two nearest motions
+- **Exit State**: a special node that signals a layer has finished, useful for one-shot animations
+
+### Timeline Integration
+
+Selecting a state in the graph opens its timeline clip in the Timeline panel for direct editing. StateMachine timeline handles are managed independently from regular timeline handles. Timeline assets are preloaded when entering Play Mode to prevent missing animation data.
+
+### Inspector
+
+Collapsible parameter and layer editors with persistent collapse state. Add, remove, and rename parameters; configure layer weights and blend modes — all inline in the Inspector.
+
+## Yoga Layout Engine
+
+The hand-written CSS Flexbox implementation has been replaced with **Yoga**, Facebook's battle-tested cross-platform layout engine (used by React Native). This brings more correct handling of edge cases in flex layout.
+
+- `FlexContainer`: flexDirection, justifyContent, alignItems, alignContent, flexWrap, gap, padding, overflow
+- `FlexItem`: flexGrow, flexShrink, flexBasis, alignSelf, width/height, min/max dimensions, margin, aspectRatio, position (relative/absolute), positionInsets
+
+Properties are now organized into groups (Layout, Alignment, Spacing, Sizing, Position) with human-readable display names in the Inspector.
+
+## Custom Dock System
+
+The third-party dockview library has been replaced with a fully custom dock system:
+
+- **Drag-and-drop tabs**: reorder within a dock area or move panels between areas
+- **Split layouts**: drop tabs on edge indicators to split horizontally or vertically
+- **Resizable splitters**: drag borders between dock areas
+- **Floating panels**: pop out any panel as a floating window
+- **Persistent layout**: saved to localStorage and restored on reload, with a menu option to reset to defaults
+
+## Add Component Popup
+
+The "Add Component" button now opens a redesigned anchored panel:
+
+- **Fuzzy search**: type to filter components with fuzzy matching
+- **Categorized list**: components organized by category (Rendering, UI, Physics, Audio, Layout, Animation, etc.)
+- **Keyboard navigation**: arrow keys to navigate, Enter to select
+
+## spawn(name) API
+
+- `world.spawn(name?)` creates a new entity with an optional name
+- `world.getEntityByName(name)` provides O(1) name-based entity lookup via an internal name index
+- The Hierarchy panel displays tag badges next to entity names for quick visual identification
+
+## Enhanced Selection & Gizmo Cursors
+
+- **Context-aware cursors**: move arrows show directional cursor, scale handles show resize cursor, rotate ring shows rotation cursor
+- **Hover highlighting**: gizmo handles highlight on hover with color feedback
+- **Click-through prevention**: gizmos take priority over entity selection when overlapping
+
+## Multiple Output Handlers
+
+`OutputService` now supports registering multiple output handlers via `addOutputHandler()` / `removeOutputHandler()`. Handlers are called in sequence, enabling scenarios like writing to file, sending to preview, and logging to console simultaneously.
+
+## MCP Enhancements
+
+- UI template instantiation route for creating UI hierarchies from templates
+- Improved screenshot capture with timeout, panel content selector, and html2canvas integration
+- MCP server extracted to a standalone repository as a git submodule
+
+## Bug Fixes
+
+- Fixed preview server port binding failure on Windows
+- Fixed MCP bridge file not created on Windows
+- Fixed popup and dropdown menus overflowing viewport bounds — positions are now clamped
+- Fixed padding editor style inconsistency with vec editor
+- Fixed Canvas missing UIRect when creating a new scene

docs/astro/src/content/docs/core-concepts/systems.mdx

@@ -130,7 +130,7 @@ defineSystem([Commands()], (cmds) => {
 
 | Method | Returns | Description |
 |--------|---------|-------------|
-| `cmds.spawn()` | `EntityCommands` | Create a new entity, returns a builder |
+| `cmds.spawn(name?)` | `EntityCommands` | Create a new entity with an optional name, returns a builder |
 | `cmds.entity(entity)` | `EntityCommands` | Get a builder for an existing entity |
 | `cmds.despawn(entity)` | `this` | Queue entity for destruction |
 | `cmds.insertResource(res, value)` | `this` | Insert or overwrite a resource |

docs/astro/src/content/docs/guides/mcp.mdx

@@ -13,7 +13,7 @@ The Estella editor includes a built-in **MCP (Model Context Protocol)** bridge t
 
 ## Prerequisites
 
-- Estella editor v0.10.0 or later
+- Estella editor v0.11.0 or later
 - Node.js 18+
 - An MCP-compatible AI client (e.g., Claude Desktop, Claude Code, Cursor)
 
@@ -136,12 +136,40 @@ AI Client ←→ MCP Server (stdio) ←→ HTTP Bridge ←→ Estella Editor
 | `pause` | Pause/resume play mode |
 | `set_play_speed` | Adjust playback speed |
 
+### UI Creation
+
+Create fully configured UI widget hierarchies with a single tool call. Entities are auto-parented under the Canvas.
+
+| Tool | Description |
+|------|-------------|
+| `create_text` | Create a text label with content, fontSize, color, and alignment |
+| `create_image` | Create an image element with tint color and size |
+| `create_panel` | Create a panel with background and mask |
+| `create_button` | Create a button with background and interactable |
+| `create_input_field` | Create a text input field with placeholder and initial value |
+| `create_toggle` | Create a toggle/checkbox |
+| `create_slider` | Create a slider with fill bar and handle |
+| `create_progress_bar` | Create a progress bar with fill |
+| `create_scroll_view` | Create a scrollable container |
+| `create_dropdown` | Create a dropdown/select with options |
+
+### Editor State
+
+| Tool | Description |
+|------|-------------|
+| `get_console_logs` | Get recent console logs, optionally filtered by level |
+| `get_panel_layout` | Get editor panel positions |
+| `get_project_settings` | Get project settings |
+| `get_build_status` | Get recent build history |
+| `get_render_stats` | Get frame timing and performance data |
+| `get_asset_info` | Get detailed info about an asset by UUID or path |
+
 ### Visual
 
 | Tool | Description |
 |------|-------------|
-| `screenshot` | Capture a screenshot of the current viewport |
-| `screenshot_diff` | Compare two screenshots pixel-by-pixel |
+| `capture_editor` | Capture a screenshot of the editor (whole window or specific panel) |
+| `capture_diff` | Compare two screenshots pixel-by-pixel |
 
 ## Example Prompts
 

docs/astro/src/content/docs/guides/scenes.mdx

@@ -48,7 +48,18 @@ After building your project, the engine automatically loads the scene, resolves
 
 ### By Name
 
-Every entity loaded from a scene receives a built-in `Name` component with the name assigned in the editor. Query `Name` to find entities:
+Use `findEntityByName()` for O(1) name-based lookup:
+
+```typescript
+import { findEntityByName } from 'esengine';
+
+const player = findEntityByName(world, 'Player');
+if (player) {
+    // found the player entity
+}
+```
+
+Alternatively, query the `Name` component to iterate over named entities:
 
 ```typescript
 import { defineSystem, addStartupSystem, Query, Name, Transform } from 'esengine';