diff --git a/CLAUDE.md b/CLAUDE.md
index 9f81fce7..a9f8d474 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -14,9 +14,9 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
## Architecture
-OpenPencil is an open-source vector design tool (alternative to Pencil.dev) with a Design-as-Code philosophy. Built as a **TanStack Start** full-stack React application with Bun runtime.
+OpenPencil is an open-source vector design tool (alternative to Pencil.dev) with a Design-as-Code philosophy. Built as a **TanStack Start** full-stack React application with Bun runtime. Server API powered by **Nitro**.
-**Key technologies:** React 19, Fabric.js v7 (canvas engine), Zustand v5 (state management), TanStack Router (file-based routing), Tailwind CSS v4, Vite 7, TypeScript (strict mode).
+**Key technologies:** React 19, Fabric.js v7 (canvas engine), Zustand v5 (state management), TanStack Router (file-based routing), Tailwind CSS v4, shadcn/ui (UI primitives), Vite 7, Nitro (server), TypeScript (strict mode).
### Data Flow
@@ -43,12 +43,19 @@ React Components (Toolbar, LayerPanel, PropertyPanel)
### Key Modules
-- **`src/canvas/`** — Fabric.js integration: canvas init, drawing events, viewport (pan/zoom), selection sync, bidirectional document↔canvas sync, object factory
-- **`src/stores/`** — Zustand stores: `canvas-store` (UI state), `document-store` (PenDocument tree CRUD)
-- **`src/types/`** — Type system: `pen.ts` (PenDocument/PenNode), `canvas.ts` (ToolType), `styles.ts` (Fill/Stroke/Effect)
-- **`src/components/editor/`** — Editor layout, toolbar, tool buttons
-- **`src/components/panels/`** — Layer panel, property panel with section components
-- **`src/components/shared/`** — Reusable UI: ColorPicker, NumberInput, SliderInput
+- **`src/canvas/`** — Fabric.js integration: canvas init, drawing events, viewport (pan/zoom), selection sync, smart guides, bidirectional document↔canvas sync, object factory
+- **`src/stores/`** — Zustand stores: `canvas-store` (UI/tool/selection/viewport), `document-store` (PenDocument tree CRUD), `history-store` (undo/redo), `ai-store` (chat/code generation state)
+- **`src/types/`** — Type system: `pen.ts` (PenDocument/PenNode), `canvas.ts` (ToolType), `styles.ts` (Fill/Stroke/Effect), `variables.ts` (VariableDefinition)
+- **`src/components/editor/`** — Editor layout, toolbar, tool buttons, status bar
+- **`src/components/panels/`** — Layer panel, property panel (fill/stroke/size/corner-radius/effects/text/appearance sections), AI chat panel, code panel
+- **`src/components/shared/`** — Reusable UI: ColorPicker, NumberInput, DropdownSelect, ExportDialog, SaveDialog
+- **`src/components/ui/`** — shadcn/ui primitives: Button, Select, Separator, Slider, Toggle, Tooltip
+- **`src/services/ai/`** — AI chat service, design prompts, design-to-node generation
+- **`src/services/codegen/`** — React+Tailwind and HTML+CSS code generators
+- **`src/hooks/`** — `use-keyboard-shortcuts` (global keyboard event handling)
+- **`src/lib/`** — Utility functions (`utils.ts` with `cn()` for class merging)
+- **`src/utils/`** — File operations (save/open .pen), export (PNG/SVG), node clone, pen file normalization, syntax highlight
+- **`server/api/ai/`** — Nitro server API: `chat.ts` (streaming chat), `generate.ts` (non-streaming generation). Supports Anthropic API key or Claude Agent SDK (local OAuth) as dual providers
### Fabric.js v7 Gotchas
@@ -70,7 +77,7 @@ File-based routing via TanStack Router. Routes in `src/routes/`, auto-generated
### Styling
-Tailwind CSS v4 imported via `src/styles.css`. Icons from `lucide-react`.
+Tailwind CSS v4 imported via `src/styles.css`. UI primitives from shadcn/ui (`src/components/ui/`). Icons from `lucide-react`. shadcn/ui config in `components.json`.
## Code Style
@@ -109,3 +116,7 @@ Tailwind CSS v4 imported via `src/styles.css`. Icons from `lucide-react`.
- subject 用英文，小写开头，不加句号，祈使语气（如 `add`、`fix`、`remove`）。
- body 可选，解释 **why** 而非 what，可用中英文。
- 一个 commit 只做一件事。不要把不相关的改动混在一起。
+
+## License
+
+MIT License. See [LICENSE](./LICENSE) for details.
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..0dec8929
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ZSeven—W
+
+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.
diff --git a/README.md b/README.md
index f8a86558..da4ae572 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Open-source vector design tool with a Design-as-Code philosophy. An alternative
- **File operations**: Save/open .pen files (JSON-based, Git-friendly), auto-save support
- **Export**: PNG and SVG export with scale options (Cmd+Shift+E)
- **Code generation**: Generate React+Tailwind or HTML+CSS code from designs (Cmd+Shift+C)
-- **AI assistant**: Built-in AI chat panel for design assistance (Cmd+J)
+- **AI assistant**: Built-in AI chat panel for design assistance (Cmd+J), supports Anthropic API or local Claude Code
- **Keyboard shortcuts**: Tool keys (V/R/O/L/T/F/H), Delete, arrow nudge, bracket keys for z-order, Cmd+A select all
## Tech Stack
@@ -22,8 +22,10 @@ Open-source vector design tool with a Design-as-Code philosophy. An alternative
- **Framework:** [TanStack Start](https://tanstack.com/start) (React 19, SSR, file-based routing)
- **Canvas:** [Fabric.js](http://fabricjs.com/) v7
- **State:** [Zustand](https://zustand-demo.pmnd.rs/) v5
+- **UI:** [shadcn/ui](https://ui.shadcn.com/) (Radix + Tailwind primitives)
- **Styling:** [Tailwind CSS](https://tailwindcss.com/) v4
- **Icons:** [Lucide React](https://lucide.dev/)
+- **Server:** [Nitro](https://nitro.build/) (API routes)
- **Runtime:** [Bun](https://bun.sh/)
- **Build:** [Vite](https://vite.dev/) 7
@@ -36,6 +38,13 @@ bun --bun run dev
Open http://localhost:3000 and click "New Design" to enter the editor.
+### AI Configuration
+
+The AI assistant works in two modes:
+
+- **Anthropic API**: Set `ANTHROPIC_API_KEY` in `.env`
+- **Local Claude Code**: No config needed — uses Claude Agent SDK with OAuth login as fallback
+
## Scripts
| Command | Description |
@@ -49,21 +58,23 @@ Open http://localhost:3000 and click "New Design" to enter the editor.
```
src/
- canvas/ # Fabric.js canvas engine, drawing, sync, guides
+ canvas/ # Fabric.js canvas engine, drawing, sync, guides
components/
- editor/ # Editor layout, toolbar
- panels/ # Layer panel, property panel, AI chat, code panel
- shared/ # Reusable UI (ColorPicker, NumberInput, ExportDialog, etc.)
- hooks/ # Keyboard shortcuts
+ editor/ # Editor layout, toolbar, status bar
+ panels/ # Layer panel, property panel, AI chat, code panel
+ shared/ # Reusable UI (ColorPicker, NumberInput, ExportDialog, etc.)
+ ui/ # shadcn/ui primitives (Button, Select, Slider, etc.)
+ hooks/ # Keyboard shortcuts
+ lib/ # Utility functions (cn class merging)
services/
- ai/ # AI chat service, prompts, design generation
- codegen/ # React and HTML code generators
- stores/ # Zustand stores (canvas, document, history, AI)
- types/ # PenDocument/PenNode types, style types
- utils/ # File operations, export, node clone, syntax highlight
- routes/ # TanStack Router pages (/, /editor)
+ ai/ # AI chat service, prompts, design generation
+ codegen/ # React+Tailwind and HTML+CSS code generators
+ stores/ # Zustand stores (canvas, document, history, AI)
+ types/ # PenDocument/PenNode types, style types, variables
+ utils/ # File operations, export, node clone, syntax highlight
+ routes/ # TanStack Router pages (/, /editor)
server/
- api/ # Server-side API endpoints
+ api/ai/ # Nitro API: streaming chat, AI generation
```
## Roadmap
@@ -77,4 +88,4 @@ server/
## License
-MIT
+[MIT](./LICENSE)
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index 0157488b..00000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Link } from '@tanstack/react-router'
-
-import { useState } from 'react'
-import { Home, Menu, X } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-
-export default function Header() {
- const [isOpen, setIsOpen] = useState(false)
-
- return (
- <>
-
-
-
-
- 
-
-
-
-
-
-
- )
-}