@jbpark/live-editor 0.1.0

package/README.ko.md

@@ -0,0 +1,127 @@
+# Live Editor
+
+[English](./README.md) | [한국어](./README.ko.md)
+
+실시간 프리뷰와 드래그 앤 드롭을 지원하는 인터랙티브 UI 에디터입니다. 캔버스에서의 편집 내용은 AST 변환을 통해 실제 소스 코드에 정확히 반영되며, 결과는 DOM/CSS 격리를 위해 iframe 안에서 렌더링됩니다. React 19와 TypeScript로 구현되었습니다. iframe은 보안 샌드박스가 아닙니다 — [보안 참고사항](#-보안-참고사항)을 확인하세요.
+
+## 📁 프로젝트 구조
+
+```text
+live-editor/
+├─ src/
+│  ├─ components/
+│  │  ├─ Context/           # 전역 상태 관리
+│  │  ├─ Dnd/               # 드래그 앤 드롭 시스템 및 편집 패널
+│  │  ├─ Editor/            # 코드 에디터
+│  │  ├─ Error/             # 에러 바운더리
+│  │  └─ Preview/           # 격리된 프리뷰 런타임
+│  ├─ pages/
+│  │  ├─ Playground/        # 메인 에디터 페이지
+│  │  └─ Preview/           # 전체화면 프리뷰 페이지
+│  ├─ utils/ast/            # AST 조작 및 코드 생성
+│  ├─ enums/                # 상수 및 설정
+│  ├─ types/                # TypeScript 타입 정의
+│  └─ App.tsx               # 라우팅이 포함된 앱 레이아웃
+└─ package.json
+```
+
+## 🎯 주요 기능
+
+- **AST 기반 실시간 코드 반영**: 캔버스 상호작용(추가/이동/삭제, 속성 변경)을 안전하게 소스 코드에 적용합니다.
+- **인터랙티브 속성 패널**: 숫자, 문자열, 불리언, 배열, 객체를 패널에서 바로 편집합니다.
+- **고급 JSX 바인딩 시스템**: 타입 기반 감지를 통해 모든 JSX 요소 속성(children, label, icon 등)을 자동으로 인식하고 편집 가능하게 합니다.
+- **스마트 Items 에디터**: 배열 아이템을 추가/이동/삭제하고, 일반 속성과 중첩된 JSX 컴포넌트를 편집합니다. 순서 변경 시에도 안정적인 컴포넌트 ID를 유지합니다.
+- **프리뷰 런타임**: 컴파일된 결과를 DOM/CSS 격리를 위해 iframe 안에서 렌더링합니다 (보안 샌드박스는 아닙니다 — [보안 참고사항](#-보안-참고사항) 참고).
+- **강력한 드래그 앤 드롭**: `@dnd-kit` 기반으로 부드러운 정렬과 배치를 지원합니다.
+- **저장 & 미리보기**: 작성한 코드를 localStorage에 저장하고 전용 전체화면 미리보기 페이지(`/preview`)에서 확인할 수 있습니다.
+
+## 🔒 보안 참고사항
+
+- 프리뷰 `<iframe>`(`src/components/Frame/IFrame`)의 `sandbox` prop은 **실제 보안 경계가 아닙니다**. 컴파일된 프리뷰 코드는 host 페이지 자신의 JS realm에서 `new Function(...)`으로 실행되며(`src/utils/index.ts`의 `compileModule`), iframe에는 그 결과로 생성된 React 엘리먼트만 `contentDocument`에 포탈되어 DOM/CSS 렌더링 용도로만 쓰입니다. iframe 자체는 사용자 코드를 실행하지 않습니다.
+- 실질적 의미: 미리보기되는 코드는 호스트 애플리케이션과 동일한 수준의 JS 접근 권한(쿠키, DOM, 메모리상의 상태 등)을 가지며, iframe 경계가 이를 막아주지 않습니다.
+- 신뢰할 수 있는 프로젝트만 열어서 편집하세요. 직접 별도의 격리 조치(예: iframe 자체 `contentWindow` realm에서 컴파일을 실행하고 결과를 `postMessage`로 주고받는 방식)를 추가하지 않은 채로, 신뢰할 수 없는 제3자 프로젝트 파일을 미리보기하는 용도로 사용하지 마세요 — 그런 격리는 현재 구현되어 있지 않습니다.
+
+## 🧰 기술 스택
+
+- **Core**: React 19, TypeScript 5.8, Vite 7
+- **Routing**: `react-router-dom` (SPA 네비게이션)
+- **DnD**: `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers`
+- **Editor**: `@uiw/react-codemirror` (VSCode 테마)
+- **UI/스타일**: Ant Design, Tailwind CSS 4
+- **변환**: Babel(standalone) 기반 브라우저 내 변환
+
+## ⚙️ 요구 사항
+
+- Peer dependencies: `react >=19`, `react-dom >=19`
+- Node.js: 20.x 이상
+- **pnpm**: 9.x 이상 ([Corepack](https://nodejs.org/api/corepack.html)으로 관리)
+
+## 🚀 시작하기
+
+### pnpm 설정 (권장)
+
+본 프로젝트는 **pnpm@9**를 [Corepack](https://nodejs.org/api/corepack.html)으로 관리합니다. Corepack을 활성화하고 지정된 버전을 적용하세요:
+
+```bash
+corepack enable
+corepack prepare pnpm@9.0.0 --activate
+```
+
+또는 수동으로 설치:
+
+```bash
+npm install -g pnpm@9
+```
+
+### 설치
+
+```bash
+pnpm install
+```
+
+### 개발 서버 실행
+
+```bash
+pnpm run dev
+```
+
+### 빌드
+
+```bash
+pnpm run build
+```
+
+### 린트 & 타입 체크
+
+```bash
+pnpm run lint
+pnpm exec tsc -b
+```
+
+### 프로덕션 프리뷰
+
+```bash
+pnpm run preview
+```
+
+## 📦 버전 관리 & 배포
+
+배포는 [changesets](https://github.com/changesets/changesets)로 완전히 자동화되어 있습니다:
+
+- `main`으로 향하는 PR마다 AI가 변경 내용을 요약한 changeset 파일을 초안으로 작성합니다.
+- `main`에 changeset들이 쌓이면 "Version Packages" PR이 `package.json`의 버전을 승격시키고 `CHANGELOG.md`를 정리합니다.
+- 이 PR을 머지하면 빌드, 태그 생성, (이 패키지가 공개로 전환되면) npm 배포가 실행됩니다.
+
+CI 워크플로우:
+
+- `changeset-draft.yml`: `main` 대상 PR이 열리거나 갱신될 때 AI가 changeset 초안을 작성
+- `version.yml`: changeset이 쌓이면 "Version Packages" PR을 열거나 갱신
+- `publish.yml`: `main` 머지 시 버전이 미태그 상태면 빌드/(공개 패키지면 배포)/태그/GitHub Release 생성
+- `release.yml`: 기존 태그에 대한 GitHub Release를 수동(`workflow_dispatch`)으로 재생성하는 백업 유틸리티
+- `docs-deploy.yml`: 빌드 후 `dist/`를 GitHub Pages에 배포
+
+참고: GitHub Pages 사용 시 저장소 설정에서 Pages Source를 "GitHub Actions"로 지정하세요. 저장소 서브경로로 배포한다면 `vite.config.ts`의 `base` 값을 경로에 맞게 설정해야 합니다.
+
+## 📄 라이선스
+
+MIT License

package/README.md

@@ -0,0 +1,127 @@
+# Live Editor
+
+[English](./README.md) | [한국어](./README.ko.md)
+
+An interactive editor for building UIs with real-time preview and drag‑and‑drop. Canvas edits are synced back to source code via AST transforms, and the result renders inside an iframe for DOM/CSS isolation. Built with React 19 and TypeScript. See [Security Notes](#-security-notes) — the iframe is not a security sandbox.
+
+## 📁 Project Structure
+
+```text
+live-editor/
+├─ src/
+│  ├─ components/
+│  │  ├─ Context/           # Global state management
+│  │  ├─ Dnd/               # Drag-and-drop system with editing panels
+│  │  ├─ Editor/            # Code editor
+│  │  ├─ Error/             # Error boundary
+│  │  └─ Preview/           # Isolated preview runtime
+│  ├─ pages/
+│  │  ├─ Playground/        # Main editor page
+│  │  └─ Preview/           # Full-screen preview page
+│  ├─ utils/ast/            # AST manipulation & code generation
+│  ├─ enums/                # Constants and configurations
+│  ├─ types/                # TypeScript type definitions
+│  └─ App.tsx               # App layout with routing
+└─ package.json
+```
+
+## 🎯 Highlights
+
+- **Real-time code updates**: Canvas interactions (add/move/remove, property edits) are propagated back to source code safely.
+- **Interactive property panel**: Edit numbers, strings, booleans, arrays, and objects from the side panel.
+- **Advanced JSX binding system**: Automatically detects and enables editing for all JSX element properties (children, label, icon, etc.) through type-based detection.
+- **Smart Items editor**: Manage array items with add/move/delete operations, edit properties and nested JSX components with stable component identity across reorders.
+- **Preview runtime**: Renders compiled output inside an iframe for DOM/CSS isolation (not a security sandbox — see [Security Notes](#-security-notes)).
+- **Robust drag-and-drop**: Powered by `@dnd-kit` for smooth sorting and positioning.
+- **Save & Preview**: Save your code to localStorage and view it in a dedicated full-screen preview page (`/preview`).
+
+## 🔒 Security Notes
+
+- The `sandbox` prop on the preview `<iframe>` (`src/components/Frame/IFrame`) is **not a security boundary**. Compiled preview code is executed via `new Function(...)` in the host page's own JS realm (`compileModule` in `src/utils/index.ts`); only the resulting React elements are portaled into the iframe's `contentDocument` for DOM/CSS rendering. The iframe itself never evaluates user code.
+- Practical implication: previewed code runs with the same JS-level access as the host application (cookies, DOM, in-memory state) — the iframe boundary does not contain it.
+- Only open/edit projects you trust. Don't use this editor to preview arbitrary third-party project files without adding real isolation yourself (e.g. running compilation inside the iframe's own `contentWindow` realm and communicating results back via `postMessage`) — that isolation is not implemented here today.
+
+## 🧰 Tech Stack
+
+- **Core**: React 19, TypeScript 5.8, Vite 7
+- **Routing**: `react-router-dom` for SPA navigation
+- **DnD**: `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers`
+- **Editor**: `@uiw/react-codemirror` with VSCode theme
+- **UI/Styling**: Ant Design, Tailwind CSS 4
+- **Transform**: Babel (standalone) for in-browser transforms
+
+## ⚙️ Requirements
+
+- Peer deps: `react >=19`, `react-dom >=19`
+- Node.js: 20.x or higher
+- **pnpm**: 9.x or higher (managed via [Corepack](https://nodejs.org/api/corepack.html))
+
+## 🚀 Getting Started
+
+### pnpm Setup (Recommended)
+
+This project uses **pnpm@9** with [Corepack](https://nodejs.org/api/corepack.html) for reproducibility. Enable Corepack and activate the specified pnpm version:
+
+```bash
+corepack enable
+corepack prepare pnpm@9.0.0 --activate
+```
+
+Or, if you prefer a manual install:
+
+```bash
+npm install -g pnpm@9
+```
+
+### Install
+
+```bash
+pnpm install
+```
+
+### Develop
+
+```bash
+pnpm run dev
+```
+
+### Build
+
+```bash
+pnpm run build
+```
+
+### Lint & Type Check
+
+```bash
+pnpm run lint
+pnpm exec tsc -b
+```
+
+### Preview Production Build
+
+```bash
+pnpm run preview
+```
+
+## 📦 Versioning & Release
+
+Releases are fully automated via [changesets](https://github.com/changesets/changesets):
+
+- Each PR against `main` gets an AI-drafted changeset file describing its change.
+- Once changesets accumulate on `main`, a "Version Packages" PR bumps `package.json`'s version and consolidates `CHANGELOG.md`.
+- Merging that PR builds, tags the release, and (once this package is made public) publishes to npm.
+
+CI workflows:
+
+- `changeset-draft.yml`: Drafts an AI-generated changeset on PR open/sync against `main`.
+- `version.yml`: Opens/updates the "Version Packages" PR once changesets accumulate.
+- `publish.yml`: Builds/(publishes if public)/tags/creates the GitHub Release on merge to `main` when the version is untagged.
+- `release.yml`: Manual `workflow_dispatch` fallback to (re)create a GitHub Release for an existing tag.
+- `docs-deploy.yml`: Builds and deploys `dist/` to GitHub Pages.
+
+Note: For GitHub Pages, set the repository Pages source to “GitHub Actions”. If deploying under a repo subpath, configure `base` in `vite.config.ts` accordingly.
+
+## 📄 License
+
+MIT License