refactor: cleanup docs and refactor code generation, events and focus system

Author: fzdwx

AGENTS.md

@@ -1,6 +1,6 @@
 # PROJECT KNOWLEDGE BASE
 
-**Generated:** 2026-01-10 **Branch:** main **Commit:** 705a3f5
+**Generated:** 2026-01-10 12:08:15 **Branch:** main **Commit:** 0b279f8
 
 ## OVERVIEW
 
@@ -17,7 +17,7 @@ gpui-react/
 │   ├── core/        # FFI abstraction (RustLib, FFI state, bindings)
 │   ├── reconciler/ # React reconciler + FFI bindings + event router
 │   └── events/     # Event types, factory, router (10 files)
-├── demo/            # Demo apps (7 entry points)
+├── demo/            # Demo apps (3 subdirs: canvas, drawing-board, event)
 └── scripts/         # Build/release scripts
 ```
 
@@ -85,13 +85,10 @@ gpui-react/
 
 ```bash
 just native                              # Build Rust native library
-bun run demo                            # Basic demo
-bun run styled-demo                     # CSS styling demo
-bun run flex-demo                       # Flexbox layout demo
-bun run elements-demo                   # Element types demo
-bun run event-demo                      # Event handling demo
-bun run focus-demo                      # Focus/hover demo
-bun run src/reconciler/__tests__/element-store.test.ts  # Run tests
+bun run event-demo                       # Event handling demo
+bun run drawing-demo                    # Drawing board demo
+bun run canvas-demo                      # Canvas element demo
+bun run test                             # Run element-store tests
 bun run format                          # Format all code (staged files)
 bun run format:ts                       # Format TypeScript only
 bun run format:rust                     # Format Rust only

CLAUD.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 fzdwx <likelovec@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

LICENSE

@@ -12,7 +12,16 @@ interface Stroke {
     width: number;
 }
 
-const COLORS = ["#000000", "#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7", "#dfe6e9", "#ffffff"];
+const COLORS = [
+    "#000000",
+    "#ff6b6b",
+    "#4ecdc4",
+    "#45b7d1",
+    "#96ceb4",
+    "#ffeaa7",
+    "#dfe6e9",
+    "#ffffff",
+];
 const BRUSH_SIZES = [2, 4, 8, 12, 20];
 
 export function DrawingBoardApp() {
@@ -160,15 +169,19 @@ export function DrawingBoardApp() {
                                 backgroundColor: color,
                                 borderRadius: 4,
                                 border:
-                                    selectedColor === color ? "3px solid #74b9ff" : "2px solid #636e72",
+                                    selectedColor === color
+                                        ? "3px solid #74b9ff"
+                                        : "2px solid #636e72",
                                 cursor: "pointer",
                             }}
                         />
                     ))}
                 </div>
 
                 {/* Brush Size */}
-                <div style={{ display: "flex", flexDirection: "row", gap: 8, alignItems: "center" }}>
+                <div
+                    style={{ display: "flex", flexDirection: "row", gap: 8, alignItems: "center" }}
+                >
                     <div style={{ color: "#b2bec3", fontSize: 12 }}>Brush:</div>
                     {BRUSH_SIZES.map((size) => (
                         <div

ROADMAP.md

@@ -1,11 +1,11 @@
-import {useState} from "react";
+import { useState } from "react";
 
 export function EventApp() {
     const [clickCount, setClickCount] = useState(0);
     const [mouseState, setMouseState] = useState("idle");
-    const [mousePos, setMousePos] = useState({x: 0, y: 0});
+    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
     const [lastKey, setLastKey] = useState("");
-    const [scrollDelta, setScrollDelta] = useState({x: 0, y: 0});
+    const [scrollDelta, setScrollDelta] = useState({ x: 0, y: 0 });
 
     return (
         <div
@@ -63,7 +63,9 @@ export function EventApp() {
                 }}
                 onMouseDown={() => setMouseState("down")}
                 onMouseUp={() => setMouseState("up")}
-                onMouseMove={(e) => setMousePos({x: Math.round(e.clientX), y: Math.round(e.clientY)})}
+                onMouseMove={(e) =>
+                    setMousePos({ x: Math.round(e.clientX), y: Math.round(e.clientY) })
+                }
             >
                 <div>{"Mouse: " + mouseState}</div>
                 <div>{"Position: " + mousePos.x + ", " + mousePos.y}</div>
@@ -101,7 +103,9 @@ export function EventApp() {
                     alignItems: "center",
                     justifyContent: "center",
                 }}
-                onWheel={(e) => setScrollDelta({x: Math.round(e.deltaX), y: Math.round(e.deltaY)})}
+                onWheel={(e) =>
+                    setScrollDelta({ x: Math.round(e.deltaX), y: Math.round(e.deltaY) })
+                }
             >
                 {"Wheel: " + scrollDelta.x + ", " + scrollDelta.y}
             </div>