Add drawing tools, Mermaid support, and MCP server bridge

- Convert flat project to Cargo workspace (crates/agcanvas, crates/agcanvas-mcp)
- Add drawing layer: rectangles, ellipses, lines, arrows, text with select/move/resize
- Add Mermaid diagram rendering via mermaid-rs-renderer
- Add agcanvas-mcp: MCP server bridge for Claude Code, OpenCode, and Codex
- Add toolbar UI with keyboard shortcuts (V/R/E/L/A/T) and shape interaction
- Add example MCP configs for Claude Code, OpenCode, and Codex
- Update README with full feature docs, MCP setup, and updated architecture

examples/mcp-configs/README.md

@@ -0,0 +1,94 @@
+# MCP Configuration Examples
+
+These are example configuration files for connecting AI coding tools to agcanvas via the MCP bridge.
+
+## Prerequisites
+
+1. Build the MCP server:
+   ```bash
+   cargo build --release -p agcanvas-mcp
+   ```
+
+2. Make sure `agcanvas-mcp` is in your PATH, or use the full path:
+   ```
+   ./target/release/agcanvas-mcp
+   ```
+
+3. agcanvas must be running (it hosts the WebSocket server on port 9876).
+
+## Claude Code
+
+Copy `claude-code.mcp.json` to your project root as `.mcp.json`:
+
+```bash
+cp examples/mcp-configs/claude-code.mcp.json /path/to/your/project/.mcp.json
+```
+
+Or add to your global Claude Code config at `~/.claude/mcp.json`.
+
+If `agcanvas-mcp` is not in your PATH, use the full path:
+
+```json
+{
+  "mcpServers": {
+    "agcanvas": {
+      "command": "/path/to/agcanvas-mcp",
+      "args": ["--port", "9876"]
+    }
+  }
+}
+```
+
+## OpenCode
+
+Add the server to your `opencode.json`:
+
+```bash
+cp examples/mcp-configs/opencode.json /path/to/your/project/opencode.json
+```
+
+Or merge the `mcpServers` block into your existing config.
+
+## Codex (OpenAI)
+
+Codex uses the same MCP config format. Add to your project's MCP config:
+
+```json
+{
+  "mcpServers": {
+    "agcanvas": {
+      "command": "agcanvas-mcp",
+      "args": ["--port", "9876"]
+    }
+  }
+}
+```
+
+## Custom Port
+
+If agcanvas is running on a different port, change the `--port` argument:
+
+```json
+{
+  "mcpServers": {
+    "agcanvas": {
+      "command": "agcanvas-mcp",
+      "args": ["--port", "8080"]
+    }
+  }
+}
+```
+
+## Available Tools
+
+Once connected, the following MCP tools are available:
+
+| Tool | Description |
+|------|-------------|
+| `list_sessions` | List all open tabs/sessions in agcanvas |
+| `get_element_tree` | Get the full parsed SVG element tree (structured JSON) |
+| `describe_canvas` | Get a human-readable description of the canvas |
+| `get_element_by_id` | Look up a specific element by ID |
+| `get_elements_at_point` | Find elements at an (x, y) coordinate |
+| `get_drawing_elements` | Get all user-drawn shapes (rects, ellipses, lines, arrows, text) |
+| `generate_code` | Generate code stubs (html, react, tailwind, svelte, vue) |

examples/mcp-configs/claude-code.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "agcanvas": {
+      "command": "agcanvas-mcp",
+      "args": ["--port", "9876"]
+    }
+  }
+}

examples/mcp-configs/opencode.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://opencode.ai/config.schema.json",
+  "mcpServers": {
+    "agcanvas": {
+      "command": "agcanvas-mcp",
+      "args": ["--port", "9876"]
+    }
+  }
+}