Another Agent

Dự án được tổ chức thành các gói độc lập để tối ưu hóa việc tái sử dụng code và quản lý dependencies:

• apps/builder: Ứng dụng chính cho người dùng, sử dụng UnoCSS.
• apps/canvas-preview: Ứng dụng con chạy trong IFrame, chỉ tích hợp Tailwind CSS để render UI Kit.
• packages/ui-kit: Thư viện linh kiện Nuxt nội bộ của công ty.
• packages/parser: Bộ máy phân tích file .vue/.md để trích xuất Props và Snippets.
• packages/shared: Chứa các kiểu dữ liệu (Types) chung cho Virtual Tree và Schema.

3. Giao Thức Kết Nối (The Bridge Protocol)

Vì Canvas nằm trong IFrame, hệ thống sử dụng window.postMessage để truyền tải dữ liệu:

• SYNC_SCHEMA: Gửi toàn bộ cây linh kiện (Virtual Tree) sang Canvas để render.
• UPDATE_NODE: Cập nhật thuộc tính của một linh kiện cụ thể theo thời gian thực.
• SELECT_NODE: Canvas phản hồi ID linh kiện được click để Builder mở bảng thuộc tính.

4. Thuật Toán Mapping & Code Gen (The Brain)

Bộ máy Aggregator vận hành theo cơ chế duyệt cây đệ quy (Recursive Tree Traversal):

1. Input: Virtual Tree JSON từ Store.
2. Mapping: So khớp node.name với snippets trong Registry thu thập được từ packages/parser.
3. Transformation: Thay thế các placeholder trong snippet bằng giá trị props thực tế.
4. Output: Tổng hợp thành file Vue SFC hoàn chỉnh, đi qua Prettier Wasm để định dạng code chuẩn.

5. Danh Sách Công Nghệ (Tech Stack)