neuron-dsl 1.0.0

package/README.md

@@ -0,0 +1,259 @@
+<p align="center">
+  <img src="assets/banner.png" alt="Neuron" width="100%" />
+</p>
+
+# Neuron
+
+AI 에이전트를 위한 선언적 웹 앱 DSL 컴파일러.
+
+`.neuron` 파일을 작성하면 SPA(Single Page Application)로 컴파일합니다. 프레임워크 없이 순수 HTML/CSS/JS를 생성합니다.
+
+## Quick Start
+
+```bash
+# 프로젝트 생성
+neuron new my-shop
+
+# 빌드
+cd my-shop
+neuron build
+```
+
+`dist/` 폴더에 배포 가능한 SPA가 생성됩니다:
+
+```
+dist/
+├── index.html   ← 모든 페이지 포함 (SPA)
+├── style.css    ← 테마 + 컴포넌트 스타일
+├── main.js      ← 상태 + 라우터 + 컴포넌트 (Pure JS)
+└── assets/
+```
+
+## DSL 문법
+
+키워드는 4개뿐: `STATE` `ACTION` `API` `PAGE`
+
+### 프로젝트 구조
+
+```
+my-shop/
+├── app.neuron          ← STATE, ACTION 정의
+├── pages/
+│   ├── home.neuron
+│   ├── cart.neuron
+│   └── checkout.neuron
+├── apis/
+│   ├── products.neuron
+│   └── orders.neuron
+├── themes/
+│   └── theme.json
+├── assets/
+└── neuron.json
+```
+
+### STATE & ACTION (app.neuron)
+
+앱 전체의 상태와 액션을 정의합니다.
+
+```
+STATE
+  cart: []
+  products: []
+  user: null
+
+---
+
+ACTION add-to-cart
+  append: product -> cart
+
+ACTION remove-from-cart
+  remove: cart where id matches
+
+ACTION pay
+  call: orders
+  on_success: -> /complete
+  on_error: show-error
+```
+
+### PAGE (pages/*.neuron)
+
+페이지 하나당 파일 하나. 컴포넌트를 들여쓰기로 배치합니다.
+
+```
+PAGE home "홈" /
+
+  header
+    title: "My Shop"
+    links: [상품>/products, 장바구니>/cart]
+
+  hero
+    title: "최고의 쇼핑"
+    subtitle: "지금 시작하세요"
+    cta: "쇼핑하기" -> /products
+
+  product-grid
+    data: products
+    cols: 3
+    on_click: add-to-cart
+
+  footer
+    text: "© 2026 My Shop"
+```
+
+인라인 단축 문법도 지원합니다:
+
+```
+  button "결제하기" -> /checkout
+    variant: primary
+```
+
+### API (apis/*.neuron)
+
+```
+API products
+  GET /api/products
+  on_load: true
+  returns: Product[]
+
+API orders
+  POST /api/orders
+  body: cart
+  returns: Order
+```
+
+## 빌트인 컴포넌트
+
+### 레이아웃
+
+| 타입 | 설명 | 주요 속성 |
+|------|------|----------|
+| header | 상단 네비게이션 | title, logo, links |
+| footer | 하단 푸터 | text |
+| section | 컨테이너 | - |
+| grid | 그리드 레이아웃 | cols |
+| hero | 풀와이드 배너 | title, subtitle, cta |
+
+### 데이터 표시
+
+| 타입 | 설명 | 주요 속성 |
+|------|------|----------|
+| product-grid | 상품 목록 그리드 | data, cols, on_click |
+| list | 범용 리스트 | data, template |
+| table | 테이블 | data, cols |
+| text | 텍스트 | content, size |
+| image | 이미지 | src, alt |
+
+### 상태 연동
+
+| 타입 | 설명 | 주요 속성 |
+|------|------|----------|
+| cart-icon | 장바구니 아이콘+뱃지 | state, act |
+| cart-summary | 장바구니 합계 | state |
+| cart-list | 장바구니 목록 | state, on_remove |
+
+### 인터랙션
+
+| 타입 | 설명 | 주요 속성 |
+|------|------|----------|
+| button | 버튼 | label, act, variant |
+| form | 폼 | fields, submit |
+| search | 검색창 | placeholder, state, on_change |
+| tabs | 탭 | items |
+| modal | 모달 | state, title |
+
+## 테마 시스템
+
+`themes/theme.json`으로 색상, 폰트, 간격을 관리합니다. `.neuron`에서는 variant만 지정합니다.
+
+```json
+{
+  "colors": {
+    "primary": "#2E86AB",
+    "secondary": "#A23B72",
+    "danger": "#E84855",
+    "bg": "#FFFFFF",
+    "text": "#1A1A2E",
+    "border": "#E0E0E0"
+  },
+  "font": {
+    "family": "Inter",
+    "size": { "sm": 14, "md": 16, "lg": 20, "xl": 28 }
+  },
+  "radius": 8,
+  "shadow": "0 2px 8px rgba(0,0,0,0.1)",
+  "spacing": { "sm": 8, "md": 16, "lg": 24, "xl": 48 }
+}
+```
+
+variant 종류: `primary` | `secondary` | `danger` | `ghost`
+
+## 컴파일러 출력
+
+`neuron build`는 Svelte 방식으로 컴파일 타임에 상태-DOM 바인딩을 확정합니다:
+
+```javascript
+// 상태 초기화
+const _state = { cart: [], products: [] }
+
+// 상태-DOM 바인딩
+const _bindings = {
+  cart: [_update_cart_icon, _update_cart_list, _update_cart_summary],
+  products: [_update_product_grid]
+}
+
+// 상태 변경 → 바인딩된 DOM만 업데이트
+function _setState(key, val) {
+  _state[key] = val
+  _bindings[key]?.forEach(fn => fn(val))
+}
+```
+
+## 에러 메시지
+
+AI가 이해할 수 있는 명확한 에러를 출력합니다:
+
+```
+[NEURON ERROR] 알 수 없는 컴포넌트: "buttton"
+→ 사용 가능: button, form, text, image, header, footer ...
+
+[NEURON ERROR] state "wishlist" 가 정의되지 않음
+→ app.neuron STATE 섹션에 "wishlist: []" 를 추가하세요
+```
+
+## 개발
+
+```bash
+# 의존성 설치
+npm install
+
+# 테스트
+npm test
+
+# 빌드
+npm run build
+```
+
+## 아키텍처
+
+```
+.neuron 소스 → Lexer(토큰화) → Parser(AST) → Generator(HTML/CSS/JS) → dist/
+```
+
+| 모듈 | 파일 | 역할 |
+|------|------|------|
+| Lexer | `src/lexer.ts` | 소스 → 토큰 |
+| Parser | `src/parser.ts` | 토큰 → AST |
+| HTML Generator | `src/generator/html.ts` | 페이지 → HTML |
+| CSS Generator | `src/generator/css.ts` | 테마 → CSS |
+| JS Generator | `src/generator/js.ts` | 상태/라우터/액션 → JS |
+| Component Registry | `src/components/registry.ts` | 컴포넌트 → HTML 렌더러 |
+| Compiler | `src/compiler.ts` | 파이프라인 오케스트레이션 |
+| CLI | `src/cli.ts` | 명령어 인터페이스 |
+
+## 철학
+
+`.neuron` 파일은 AI 에이전트가 읽고 쓰는 파일입니다. 사람이 읽을 필요 없습니다. 컴파일러가 읽을 수 있으면 됩니다. 포맷은 LLM이 가장 정확하게 생성할 수 있는 구조를 우선합니다.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,886 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { resolve as resolve2, join as join2, basename } from "path";
+import { existsSync, mkdirSync as mkdirSync2, writeFileSync as writeFileSync2, readdirSync, readFileSync as readFileSync4 } from "fs";
+
+// src/compiler.ts
+import { readFileSync as readFileSync2 } from "fs";
+
+// src/lexer.ts
+function tokenize(input) {
+  const lines = input.split("\n");
+  const tokens = [];
+  for (let i = 0; i < lines.length; i++) {
+    const raw = lines[i];
+    const lineNum = i + 1;
+    if (raw.trim() === "") continue;
+    const indent = raw.length - raw.trimStart().length;
+    const trimmed = raw.trim();
+    if (trimmed === "---") {
+      tokens.push({ type: "SEPARATOR", indent, line: lineNum });
+      continue;
+    }
+    if (trimmed.startsWith("- ")) {
+      tokens.push({ type: "LIST_ITEM", value: trimmed.slice(2), indent, line: lineNum });
+      continue;
+    }
+    if (trimmed === "STATE") {
+      tokens.push({ type: "KEYWORD", value: "STATE", indent, line: lineNum });
+      continue;
+    }
+    const actionMatch = trimmed.match(/^ACTION\s+(\S+)$/);
+    if (actionMatch) {
+      tokens.push({ type: "KEYWORD", value: "ACTION", name: actionMatch[1], indent, line: lineNum });
+      continue;
+    }
+    const pageMatch = trimmed.match(/^PAGE\s+(\S+)\s+"([^"]+)"\s+(\S+)$/);
+    if (pageMatch) {
+      tokens.push({ type: "KEYWORD", value: "PAGE", name: pageMatch[1], title: pageMatch[2], route: pageMatch[3], indent, line: lineNum });
+      continue;
+    }
+    const apiMatch = trimmed.match(/^API\s+(\S+)$/);
+    if (apiMatch) {
+      tokens.push({ type: "KEYWORD", value: "API", name: apiMatch[1], indent, line: lineNum });
+      continue;
+    }
+    const httpMatch = trimmed.match(/^(GET|POST|PUT|DELETE|PATCH)\s+(\S+)$/);
+    if (httpMatch) {
+      tokens.push({ type: "HTTP_METHOD", method: httpMatch[1], endpoint: httpMatch[2], indent, line: lineNum });
+      continue;
+    }
+    const propMatch = trimmed.match(/^(\w[\w-]*):\s*(.*)$/);
+    if (propMatch) {
+      tokens.push({ type: "PROPERTY", key: propMatch[1], value: propMatch[2], indent, line: lineNum });
+      continue;
+    }
+    const inlineMatch = trimmed.match(/^(\w[\w-]*)\s+"([^"]+)"\s+->\s+(\S+)$/);
+    if (inlineMatch) {
+      tokens.push({ type: "COMPONENT", componentType: inlineMatch[1], inlineLabel: inlineMatch[2], inlineAction: inlineMatch[3], indent, line: lineNum });
+      continue;
+    }
+    const compMatch = trimmed.match(/^(\w[\w-]*)$/);
+    if (compMatch) {
+      tokens.push({ type: "COMPONENT", componentType: compMatch[1], indent, line: lineNum });
+      continue;
+    }
+  }
+  return tokens;
+}
+
+// src/parser.ts
+function parse(source) {
+  const tokens = tokenize(source);
+  const ast = {
+    states: [],
+    actions: [],
+    apis: [],
+    pages: []
+  };
+  let i = 0;
+  while (i < tokens.length) {
+    const token = tokens[i];
+    if (token.type === "SEPARATOR") {
+      i++;
+      continue;
+    }
+    if (token.type === "KEYWORD") {
+      switch (token.value) {
+        case "STATE": {
+          const [node, next] = parseState(tokens, i);
+          ast.states.push(node);
+          i = next;
+          break;
+        }
+        case "ACTION": {
+          const [node, next] = parseAction(tokens, i);
+          ast.actions.push(node);
+          i = next;
+          break;
+        }
+        case "API": {
+          const [node, next] = parseApi(tokens, i);
+          ast.apis.push(node);
+          i = next;
+          break;
+        }
+        case "PAGE": {
+          const [node, next] = parsePage(tokens, i);
+          ast.pages.push(node);
+          i = next;
+          break;
+        }
+      }
+    } else {
+      i++;
+    }
+  }
+  return ast;
+}
+function parseState(tokens, start) {
+  const baseIndent = tokens[start].indent;
+  const node = { type: "STATE", fields: [] };
+  let i = start + 1;
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (t.type === "KEYWORD" || t.type === "SEPARATOR" || t.indent <= baseIndent) break;
+    if (t.type === "PROPERTY") {
+      node.fields.push({ name: t.key, defaultValue: t.value });
+    }
+    i++;
+  }
+  return [node, i];
+}
+function parseAction(tokens, start) {
+  const keyword = tokens[start];
+  const baseIndent = keyword.indent;
+  const node = { type: "ACTION", name: keyword.name, steps: [] };
+  let i = start + 1;
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (t.type === "KEYWORD" || t.type === "SEPARATOR" || t.indent <= baseIndent) break;
+    if (t.type === "PROPERTY") {
+      node.steps.push({ key: t.key, value: t.value });
+    }
+    i++;
+  }
+  return [node, i];
+}
+function parseApi(tokens, start) {
+  const keyword = tokens[start];
+  const baseIndent = keyword.indent;
+  const node = { type: "API", name: keyword.name, method: "", endpoint: "", options: {} };
+  let i = start + 1;
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (t.type === "KEYWORD" || t.type === "SEPARATOR" || t.indent <= baseIndent) break;
+    if (t.type === "HTTP_METHOD") {
+      node.method = t.method;
+      node.endpoint = t.endpoint;
+    } else if (t.type === "PROPERTY") {
+      node.options[t.key] = t.value;
+    }
+    i++;
+  }
+  return [node, i];
+}
+function parsePage(tokens, start) {
+  const keyword = tokens[start];
+  const baseIndent = keyword.indent;
+  const node = {
+    type: "PAGE",
+    name: keyword.name,
+    title: keyword.title,
+    route: keyword.route,
+    components: []
+  };
+  let i = start + 1;
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (t.type === "KEYWORD" || t.type === "SEPARATOR" || t.indent <= baseIndent) break;
+    if (t.type === "COMPONENT") {
+      const [comp, next] = parseComponent(tokens, i);
+      node.components.push(comp);
+      i = next;
+    } else {
+      i++;
+    }
+  }
+  return [node, i];
+}
+function parseComponent(tokens, start) {
+  const t = tokens[start];
+  const baseIndent = t.indent;
+  const node = {
+    type: "COMPONENT",
+    componentType: t.componentType,
+    inlineLabel: t.inlineLabel,
+    inlineAction: t.inlineAction,
+    properties: [],
+    children: []
+  };
+  let i = start + 1;
+  while (i < tokens.length) {
+    const cur = tokens[i];
+    if (cur.indent <= baseIndent || cur.type === "KEYWORD" || cur.type === "SEPARATOR") break;
+    if (cur.type === "PROPERTY") {
+      node.properties.push({ key: cur.key, value: cur.value });
+      i++;
+    } else if (cur.type === "LIST_ITEM") {
+      node.properties.push({ key: "fields_items", value: cur.value });
+      i++;
+    } else if (cur.type === "COMPONENT") {
+      const [child, next] = parseComponent(tokens, i);
+      node.children.push(child);
+      i = next;
+    } else {
+      i++;
+    }
+  }
+  return [node, i];
+}
+
+// src/components/registry.ts
+function getProp(node, key) {
+  const found = node.properties.find((p) => p.key === key);
+  return found?.value;
+}
+function unquote(s) {
+  if (s.startsWith('"') && s.endsWith('"') || s.startsWith("'") && s.endsWith("'")) {
+    return s.slice(1, -1);
+  }
+  return s;
+}
+function parseLinks(raw) {
+  const inner = raw.replace(/^\[/, "").replace(/\]$/, "");
+  return inner.split(",").map((part) => {
+    const trimmed = part.trim();
+    const sepIdx = trimmed.indexOf(">");
+    if (sepIdx === -1) return { label: trimmed, href: "#" };
+    return { label: trimmed.slice(0, sepIdx).trim(), href: trimmed.slice(sepIdx + 1).trim() };
+  });
+}
+function parseCta(raw) {
+  const match = raw.match(/^"([^"]+)"\s*->\s*(.+)$/);
+  if (match) return { label: match[1], action: match[2].trim() };
+  return { label: raw, action: "#" };
+}
+var renderers = {
+  header(node) {
+    const title = unquote(getProp(node, "title") ?? "");
+    const linksRaw = getProp(node, "links") ?? "";
+    const links = linksRaw ? parseLinks(linksRaw) : [];
+    const navItems = links.map((l) => `<a href="${l.href}" data-link>${l.label}</a>`).join("");
+    return `<header class="neuron-header"><h1>${title}</h1><nav>${navItems}</nav></header>`;
+  },
+  footer(node) {
+    const text = unquote(getProp(node, "text") ?? "");
+    return `<footer class="neuron-footer"><p>${text}</p></footer>`;
+  },
+  section(node) {
+    const childrenHtml = node.children.map(renderComponent).join("");
+    return `<section class="neuron-section">${childrenHtml}</section>`;
+  },
+  grid(node) {
+    const cols = getProp(node, "cols") ?? "1";
+    const childrenHtml = node.children.map(renderComponent).join("");
+    return `<div class="neuron-grid" style="grid-template-columns:repeat(${cols},1fr)">${childrenHtml}</div>`;
+  },
+  hero(node) {
+    const title = unquote(getProp(node, "title") ?? "");
+    const subtitle = unquote(getProp(node, "subtitle") ?? "");
+    const ctaRaw = getProp(node, "cta");
+    let ctaHtml = "";
+    if (ctaRaw) {
+      const cta = parseCta(ctaRaw);
+      if (cta.action.startsWith("/")) {
+        ctaHtml = `<a href="${cta.action}" class="neuron-btn" data-link>${cta.label}</a>`;
+      } else {
+        ctaHtml = `<button class="neuron-btn" data-action="${cta.action}">${cta.label}</button>`;
+      }
+    }
+    return `<section class="neuron-hero"><h2>${title}</h2><p>${subtitle}</p>${ctaHtml}</section>`;
+  },
+  "product-grid"(node) {
+    const data = getProp(node, "data") ?? "";
+    const cols = getProp(node, "cols") ?? "3";
+    const action = getProp(node, "on_click") ?? "";
+    return `<div id="product-grid" class="neuron-product-grid" data-source="${data}" data-cols="${cols}" data-action="${action}"></div>`;
+  },
+  list(node) {
+    const data = getProp(node, "data") ?? "";
+    return `<div class="neuron-list" data-source="${data}"></div>`;
+  },
+  table(node) {
+    const data = getProp(node, "data") ?? "";
+    return `<table class="neuron-table" data-source="${data}"></table>`;
+  },
+  text(node) {
+    const content = unquote(getProp(node, "content") ?? "");
+    const size = getProp(node, "size") ?? "md";
+    return `<p class="neuron-text neuron-text--${size}">${content}</p>`;
+  },
+  image(node) {
+    const src = getProp(node, "src") ?? "";
+    const alt = getProp(node, "alt") ?? "";
+    return `<img class="neuron-image" src="${src}" alt="${alt}">`;
+  },
+  "cart-icon"(node) {
+    const state = getProp(node, "state") ?? "";
+    return `<div id="cart-icon" class="neuron-cart-icon" data-state="${state}"><span class="badge">0</span></div>`;
+  },
+  "cart-summary"(node) {
+    const state = getProp(node, "state") ?? "";
+    return `<div id="cart-summary" class="neuron-cart-summary" data-state="${state}"></div>`;
+  },
+  "cart-list"(node) {
+    const state = getProp(node, "state") ?? "";
+    const removeAction = getProp(node, "on_remove") ?? "";
+    return `<div id="cart-list" class="neuron-cart-list" data-state="${state}" data-remove-action="${removeAction}"></div>`;
+  },
+  button(node) {
+    const label = node.inlineLabel ?? unquote(getProp(node, "label") ?? "");
+    const action = node.inlineAction ?? getProp(node, "action") ?? "#";
+    const variant = getProp(node, "variant") ?? "default";
+    if (action.startsWith("/")) {
+      return `<a href="${action}" class="neuron-btn neuron-btn--${variant}" data-link>${label}</a>`;
+    }
+    return `<button class="neuron-btn neuron-btn--${variant}" data-action="${action}">${label}</button>`;
+  },
+  form(node) {
+    const submitRaw = getProp(node, "submit");
+    let submitHtml = "";
+    if (submitRaw) {
+      const submit = parseCta(submitRaw);
+      submitHtml = `<button type="submit" class="neuron-btn" data-action="${submit.action}">${submit.label}</button>`;
+    }
+    const fields = node.properties.filter((p) => p.key.startsWith("field")).map((p) => {
+      const val = unquote(p.value);
+      return `<input class="neuron-input" name="${p.key}" placeholder="${val}">`;
+    }).join("");
+    return `<form class="neuron-form">${fields}${submitHtml}</form>`;
+  },
+  search(node) {
+    const placeholder = unquote(getProp(node, "placeholder") ?? "");
+    const state = getProp(node, "state") ?? "";
+    return `<input class="neuron-search" type="search" placeholder="${placeholder}" data-state="${state}">`;
+  },
+  tabs(_node) {
+    return `<div class="neuron-tabs"></div>`;
+  },
+  modal(node) {
+    const state = getProp(node, "state") ?? "";
+    const title = unquote(getProp(node, "title") ?? "");
+    return `<div class="neuron-modal" data-state="${state}"><h3>${title}</h3><div class="neuron-modal-body"></div></div>`;
+  }
+};
+function renderComponent(node) {
+  const renderer = renderers[node.componentType];
+  if (!renderer) {
+    return `<!-- unknown component: ${node.componentType} -->`;
+  }
+  return renderer(node);
+}
+
+// src/generator/html.ts
+function generateHTML(pages, appTitle) {
+  const pagesSections = pages.map((page) => {
+    const componentsHtml = page.components.map((c) => renderComponent(c)).join("\n    ");
+    return `  <div class="neuron-page" data-page="${page.name}" data-route="${page.route}" style="display:none">
+    ${componentsHtml}
+  </div>`;
+  }).join("\n");
+  return `<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${appTitle}</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="app">
+${pagesSections}
+  </div>
+  <script src="main.js"></script>
+</body>
+</html>`;
+}
+
+// src/theme.ts
+import { readFileSync } from "fs";
+var DEFAULT_THEME = {
+  colors: {
+    primary: "#2E86AB",
+    secondary: "#A23B72",
+    danger: "#E84855",
+    bg: "#FFFFFF",
+    text: "#1A1A2E",
+    border: "#E0E0E0"
+  },
+  font: {
+    family: "Inter",
+    size: { sm: 14, md: 16, lg: 20, xl: 28 }
+  },
+  radius: 8,
+  shadow: "0 2px 8px rgba(0,0,0,0.1)",
+  spacing: { sm: 8, md: 16, lg: 24, xl: 48 }
+};
+function loadTheme(path) {
+  if (!path) return { ...DEFAULT_THEME };
+  const raw = readFileSync(path, "utf-8");
+  return JSON.parse(raw);
+}
+function themeToCSS(theme) {
+  const lines = [":root {"];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    lines.push(`  --color-${name}: ${value};`);
+  }
+  lines.push(`  --font-family: '${theme.font.family}', sans-serif;`);
+  for (const [size, val] of Object.entries(theme.font.size)) {
+    lines.push(`  --font-size-${size}: ${val}px;`);
+  }
+  lines.push(`  --radius: ${theme.radius}px;`);
+  lines.push(`  --shadow: ${theme.shadow};`);
+  for (const [name, val] of Object.entries(theme.spacing)) {
+    lines.push(`  --spacing-${name}: ${val}px;`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+
+// src/generator/css.ts
+var BASE_STYLES = `
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--font-family);
+  font-size: var(--font-size-md);
+  color: var(--color-text);
+  background: var(--color-bg);
+  line-height: 1.6;
+}
+
+a { color: var(--color-primary); text-decoration: none; }
+
+.neuron-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+}
+.neuron-header h1 { font-size: var(--font-size-lg); }
+.neuron-header nav { display: flex; gap: var(--spacing-md); }
+.neuron-header nav a { font-size: var(--font-size-md); }
+
+.neuron-footer {
+  padding: var(--spacing-lg);
+  text-align: center;
+  border-top: 1px solid var(--color-border);
+  color: #888;
+}
+
+.neuron-hero {
+  text-align: center;
+  padding: var(--spacing-xl) var(--spacing-lg);
+}
+.neuron-hero h2 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); }
+.neuron-hero p { margin-bottom: var(--spacing-md); color: #666; }
+
+.neuron-btn {
+  display: inline-block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+  font-size: var(--font-size-md);
+  text-align: center;
+  transition: background 0.2s, color 0.2s;
+}
+.neuron-btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
+.neuron-btn--secondary { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
+.neuron-btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
+.neuron-btn--ghost { background: transparent; color: var(--color-primary); border-color: transparent; }
+.neuron-btn--default { background: var(--color-bg); color: var(--color-text); }
+
+.neuron-product-grid {
+  display: grid;
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+}
+.neuron-product-grid article {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow);
+}
+
+.neuron-cart-list { padding: var(--spacing-lg); }
+.neuron-cart-list .cart-item {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.neuron-cart-summary {
+  padding: var(--spacing-lg);
+  text-align: right;
+  font-size: var(--font-size-lg);
+  font-weight: bold;
+}
+
+.neuron-form {
+  max-width: 480px;
+  margin: 0 auto;
+  padding: var(--spacing-lg);
+}
+.neuron-form label {
+  display: block;
+  margin-bottom: var(--spacing-md);
+  font-size: var(--font-size-md);
+}
+.neuron-form input {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: var(--font-size-md);
+}
+.neuron-form button[type="submit"] { width: 100%; margin-top: var(--spacing-md); }
+
+.neuron-cart-icon { position: relative; cursor: pointer; }
+.neuron-cart-icon .badge {
+  position: absolute; top: -4px; right: -4px;
+  background: var(--color-danger); color: #fff;
+  font-size: 12px; width: 18px; height: 18px;
+  border-radius: 50%; display: flex; align-items: center; justify-content: center;
+}
+
+.neuron-search {
+  width: 100%; padding: var(--spacing-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: var(--font-size-md);
+}
+
+.neuron-modal {
+  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.5); z-index: 100;
+}
+.neuron-modal.active { display: flex; align-items: center; justify-content: center; }
+.neuron-modal-body {
+  background: var(--color-bg); padding: var(--spacing-lg);
+  border-radius: var(--radius); box-shadow: var(--shadow);
+  min-width: 320px;
+}
+
+.neuron-text--sm { font-size: var(--font-size-sm); }
+.neuron-text--md { font-size: var(--font-size-md); }
+.neuron-text--lg { font-size: var(--font-size-lg); }
+.neuron-text--xl { font-size: var(--font-size-xl); }
+
+.neuron-grid { display: grid; gap: var(--spacing-md); padding: var(--spacing-md); }
+.neuron-list { padding: var(--spacing-md); }
+.neuron-section { padding: var(--spacing-md); }
+`;
+function generateCSS(theme) {
+  return themeToCSS(theme) + "\n" + BASE_STYLES;
+}
+
+// src/generator/js.ts
+function generateJS(ast) {
+  const lines = [];
+  lines.push(generateState(ast));
+  lines.push(generateBindings(ast));
+  lines.push(generateSetState());
+  lines.push(generateRouter(ast));
+  lines.push(generateActions(ast));
+  lines.push(generateFormHandling());
+  lines.push(generateAutoLoad(ast));
+  lines.push(generateInit());
+  return lines.join("\n\n");
+}
+function generateState(ast) {
+  const fields = ast.states.flatMap((s) => s.fields);
+  const entries = fields.map((f) => `  "${f.name}": ${f.defaultValue}`);
+  return `const _state = {
+${entries.join(",\n")}
+};`;
+}
+function generateBindings(ast) {
+  const fields = ast.states.flatMap((s) => s.fields);
+  const entries = fields.map((f) => `  "${f.name}": []`);
+  return `const _bindings = {
+${entries.join(",\n")}
+};`;
+}
+function generateSetState() {
+  return `function _setState(key, val) {
+  _state[key] = val;
+  (_bindings[key] || []).forEach(fn => fn(val));
+}`;
+}
+function generateRouter(ast) {
+  const routeEntries = ast.pages.map((p) => `  "${p.route}": "${p.name}"`);
+  const routeMap = `const _routes = {
+${routeEntries.join(",\n")}
+};`;
+  const navigate = `function _navigate(route) {
+  history.pushState(null, '', route);
+  _render(route);
+}`;
+  const render = `function _render(route) {
+  const pageName = _routes[route];
+  document.querySelectorAll('[data-page]').forEach(el => {
+    el.style.display = el.getAttribute('data-page') === pageName ? '' : 'none';
+  });
+}`;
+  const initRouter = `function _initRouter() {
+  document.addEventListener('click', function(e) {
+    const link = e.target.closest('[data-link]');
+    if (link) {
+      e.preventDefault();
+      _navigate(link.getAttribute('data-link') || link.getAttribute('href'));
+    }
+    const actionEl = e.target.closest('[data-action]');
+    if (actionEl) {
+      e.preventDefault();
+      const name = actionEl.getAttribute('data-action');
+      if (_actions[name]) _actions[name]();
+    }
+  });
+  window.addEventListener('popstate', function() {
+    _render(location.pathname);
+  });
+  _render(location.pathname);
+}`;
+  return [routeMap, navigate, render, initRouter].join("\n\n");
+}
+function generateActions(ast) {
+  const apiMap = /* @__PURE__ */ new Map();
+  for (const api of ast.apis) {
+    apiMap.set(api.name, api);
+  }
+  const entries = ast.actions.map((action) => {
+    const body = generateActionBody(action, apiMap);
+    return `  '${action.name}': ${body}`;
+  });
+  return `const _actions = {
+${entries.join(",\n")}
+};`;
+}
+function generateActionBody(action, apiMap) {
+  const stepMap = /* @__PURE__ */ new Map();
+  for (const step of action.steps) {
+    stepMap.set(step.key, step.value);
+  }
+  if (stepMap.has("append")) {
+    const val = stepMap.get("append");
+    const parts = val.split("->").map((s) => s.trim());
+    const target = parts[1];
+    return `function(item) {
+    _setState('${target}', [..._state.${target}, item]);
+  }`;
+  }
+  if (stepMap.has("remove")) {
+    const val = stepMap.get("remove");
+    const target = val.split(" ")[0].trim();
+    return `function(id) {
+    _setState('${target}', _state.${target}.filter(i => i.id !== id));
+  }`;
+  }
+  if (stepMap.has("call")) {
+    const apiName = stepMap.get("call");
+    const api = apiMap.get(apiName);
+    if (!api) {
+      return `function() { console.warn('API ${apiName} not found'); }`;
+    }
+    const onSuccess = stepMap.get("on_success");
+    const onError = stepMap.get("on_error");
+    const queryState = stepMap.get("query");
+    const targetState = stepMap.get("target");
+    let urlExpr;
+    if (queryState) {
+      urlExpr = `\`${api.endpoint}?q=\${encodeURIComponent(_state.${queryState})}\``;
+    } else {
+      urlExpr = `'${api.endpoint}'`;
+    }
+    const fetchOptions = [];
+    fetchOptions.push(`method: '${api.method}'`);
+    fetchOptions.push(`headers: { 'Content-Type': 'application/json' }`);
+    if (api.options.body) {
+      fetchOptions.push(`body: JSON.stringify(_state.${api.options.body})`);
+    }
+    let successCode = "";
+    if (onSuccess) {
+      if (onSuccess.startsWith("->")) {
+        const route = onSuccess.replace("->", "").trim();
+        successCode = `_navigate('${route}');`;
+      } else {
+        successCode = `_setState('${onSuccess}', data);`;
+      }
+    }
+    if (targetState) {
+      successCode = `_setState('${targetState}', data);`;
+    }
+    let errorCode = "";
+    if (onError) {
+      errorCode = `
+      } catch(err) {
+        console.error('${onError}', err);`;
+    } else {
+      errorCode = `
+      } catch(err) {
+        console.error(err);`;
+    }
+    return `async function() {
+      try {
+        const res = await fetch(${urlExpr}, {
+          ${fetchOptions.join(",\n          ")}
+        });
+        const data = await res.json();
+        ${successCode}${errorCode}
+      }
+    }`;
+  }
+  return `function() {}`;
+}
+function generateFormHandling() {
+  return `document.addEventListener('submit', function(e) {
+  const form = e.target.closest('form[data-action]');
+  if (form) {
+    e.preventDefault();
+    const name = form.getAttribute('data-action');
+    const formData = Object.fromEntries(new FormData(form));
+    if (_actions[name]) _actions[name](formData);
+  }
+});`;
+}
+function generateAutoLoad(ast) {
+  const autoApis = ast.apis.filter((a) => a.options.on_load === "true");
+  if (autoApis.length === 0) return "function _autoLoad() {}";
+  const calls = autoApis.map((api) => {
+    return `  fetch('${api.endpoint}')
+    .then(res => res.json())
+    .then(data => _setState('${api.name}', data))
+    .catch(err => console.error('Failed to load ${api.name}', err));`;
+  });
+  return `function _autoLoad() {
+${calls.join("\n")}
+}`;
+}
+function generateInit() {
+  return `document.addEventListener('DOMContentLoaded', function() {
+  _initRouter();
+  _autoLoad();
+});`;
+}
+
+// src/compiler.ts
+function compile(input) {
+  const errors = [];
+  const ast = { states: [], actions: [], apis: [], pages: [] };
+  try {
+    const appSource = readFileSync2(input.appFile, "utf-8");
+    const appAst = parse(appSource);
+    ast.states.push(...appAst.states);
+    ast.actions.push(...appAst.actions);
+  } catch (err) {
+    errors.push(`Failed to parse app.neuron: ${err}`);
+  }
+  for (const pageFile of input.pageFiles) {
+    try {
+      const source = readFileSync2(pageFile, "utf-8");
+      const pageAst = parse(source);
+      ast.pages.push(...pageAst.pages);
+    } catch (err) {
+      errors.push(`Failed to parse ${pageFile}: ${err}`);
+    }
+  }
+  for (const apiFile of input.apiFiles) {
+    try {
+      const source = readFileSync2(apiFile, "utf-8");
+      const apiAst = parse(source);
+      ast.apis.push(...apiAst.apis);
+    } catch (err) {
+      errors.push(`Failed to parse ${apiFile}: ${err}`);
+    }
+  }
+  const theme = loadTheme(input.themeFile);
+  const html = generateHTML(ast.pages, input.appTitle);
+  const css = generateCSS(theme);
+  const js = generateJS(ast);
+  return { html, css, js, errors };
+}
+
+// src/scaffold.ts
+import { mkdirSync, writeFileSync, readFileSync as readFileSync3 } from "fs";
+import { join, resolve } from "path";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+function scaffold(projectName, targetDir) {
+  const projectDir = join(targetDir, projectName);
+  const dirs = [
+    projectDir,
+    join(projectDir, "pages"),
+    join(projectDir, "apis"),
+    join(projectDir, "components"),
+    join(projectDir, "themes"),
+    join(projectDir, "assets")
+  ];
+  for (const d of dirs) mkdirSync(d, { recursive: true });
+  const templatesDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "templates");
+  const files = [
+    { src: "neuron.json", dest: "neuron.json" },
+    { src: "app.neuron", dest: "app.neuron" },
+    { src: "theme.json", dest: "themes/theme.json" },
+    { src: "pages/home.neuron", dest: "pages/home.neuron" }
+  ];
+  for (const file of files) {
+    let content = readFileSync3(join(templatesDir, file.src), "utf-8");
+    content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+    writeFileSync(join(projectDir, file.dest), content);
+  }
+}
+
+// src/cli.ts
+function run(args) {
+  const command = args[0];
+  if (command === "new") {
+    const projectName = args[1];
+    if (!projectName) {
+      console.error("Usage: neuron new <project-name>");
+      process.exit(1);
+    }
+    scaffold(projectName, process.cwd());
+    console.log(`Created project: ${projectName}/`);
+    return;
+  }
+  if (command === "build") {
+    const projectDir = resolve2(process.cwd());
+    const appFile = join2(projectDir, "app.neuron");
+    if (!existsSync(appFile)) {
+      console.error("[NEURON ERROR] app.neuron not found in current directory");
+      process.exit(1);
+    }
+    const pagesDir = join2(projectDir, "pages");
+    const pageFiles = existsSync(pagesDir) ? readdirSync(pagesDir).filter((f) => f.endsWith(".neuron")).map((f) => join2(pagesDir, f)) : [];
+    const apisDir = join2(projectDir, "apis");
+    const apiFiles = existsSync(apisDir) ? readdirSync(apisDir).filter((f) => f.endsWith(".neuron")).map((f) => join2(apisDir, f)) : [];
+    const themeFile = join2(projectDir, "themes", "theme.json");
+    const themeArg = existsSync(themeFile) ? themeFile : null;
+    let appTitle = basename(projectDir);
+    const neuronJson = join2(projectDir, "neuron.json");
+    if (existsSync(neuronJson)) {
+      try {
+        const config = JSON.parse(readFileSync4(neuronJson, "utf-8"));
+        appTitle = config.name || appTitle;
+      } catch {
+      }
+    }
+    const result = compile({ appFile, pageFiles, apiFiles, themeFile: themeArg, appTitle });
+    if (result.errors.length > 0) {
+      result.errors.forEach((e) => console.error(e));
+    }
+    const distDir = join2(projectDir, "dist");
+    mkdirSync2(distDir, { recursive: true });
+    mkdirSync2(join2(distDir, "assets"), { recursive: true });
+    writeFileSync2(join2(distDir, "index.html"), result.html);
+    writeFileSync2(join2(distDir, "style.css"), result.css);
+    writeFileSync2(join2(distDir, "main.js"), result.js);
+    console.log(`Build complete \u2192 dist/`);
+    console.log(`  index.html (${result.html.length} bytes)`);
+    console.log(`  style.css  (${result.css.length} bytes)`);
+    console.log(`  main.js    (${result.js.length} bytes)`);
+    return;
+  }
+  console.log("Neuron DSL Compiler");
+  console.log("");
+  console.log("Commands:");
+  console.log("  neuron new <name>   Create a new project");
+  console.log("  neuron build        Build the current project");
+}
+
+// src/index.ts
+run(process.argv.slice(2));

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "neuron-dsl",
+  "version": "1.0.0",
+  "description": "AI-first declarative web app DSL compiler",
+  "type": "module",
+  "bin": {
+    "neuron": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "prepublishOnly": "npm run build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github-second:rayforvideos/neuron.git"
+  },
+  "keywords": ["neuron", "dsl", "compiler", "spa", "ai"],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.1"
+  }
+}

package/templates/app.neuron

@@ -0,0 +1,7 @@
+STATE
+  items: []
+
+---
+
+ACTION add-item
+  append: item -> items

package/templates/neuron.json

@@ -0,0 +1,4 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0"
+}

package/templates/pages/home.neuron

@@ -0,0 +1,11 @@
+PAGE home "홈" /
+
+  header
+    title: "{{PROJECT_NAME}}"
+
+  hero
+    title: "Welcome"
+    subtitle: "Get started with Neuron"
+
+  footer
+    text: "Built with Neuron"

package/templates/theme.json

@@ -0,0 +1,17 @@
+{
+  "colors": {
+    "primary": "#2E86AB",
+    "secondary": "#A23B72",
+    "danger": "#E84855",
+    "bg": "#FFFFFF",
+    "text": "#1A1A2E",
+    "border": "#E0E0E0"
+  },
+  "font": {
+    "family": "Inter",
+    "size": { "sm": 14, "md": 16, "lg": 20, "xl": 28 }
+  },
+  "radius": 8,
+  "shadow": "0 2px 8px rgba(0,0,0,0.1)",
+  "spacing": { "sm": 8, "md": 16, "lg": 24, "xl": 48 }
+}