@jbpark/live-editor 2.1.0 → 2.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jbpark
+
+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.

package/README.ko.md

@@ -12,20 +12,25 @@
 live-editor/
 ├─ src/
 │  ├─ components/
-│  │  ├─ Context/           # 전역 상태 관리
-│  │  ├─ Dnd/               # 드래그 앤 드롭 시스템 및 편집 패널
-│  │  ├─ Editor/             # 코드 에디터
-│  │  ├─ Error/              # 에러 바운더리
-│  │  ├─ Frame/              # iframe/shadow DOM 프리뷰 격리
-│  │  └─ Preview/            # 격리된 프리뷰 런타임
+│  │  ├─ context/            # 전역 상태 관리
+│  │  ├─ dnd/                # 드래그 앤 드롭 시스템 및 편집 패널
+│  │  │  └─ panel/           # 속성 패널 필드 에디터
+│  │  ├─ editor/             # CodeMirror 코드 에디터
+│  │  ├─ error/             # 에러 바운더리
+│  │  ├─ frame/             # iframe/shadow DOM 프리뷰 격리
+│  │  └─ preview/           # 격리된 프리뷰 런타임
 │  ├─ pages/
-│  │  └─ Editor/              # 로컬 개발용 에디터 (에디터 + DnD 전환)
-│  ├─ utils/ast/             # AST 조작 및 코드 생성
-│  ├─ constants/             # 상수 및 설정
-│  ├─ types/                 # TypeScript 타입 정의
-│  └─ main.tsx                # 로컬 개발 앱 엔트리
-├─ demos/                     # 문서용 독립 iframe 데모
-├─ website/                   # Docusaurus 문서 사이트
+│  │  └─ editor/            # 로컬 개발용 에디터 (에디터 + DnD 전환)
+│  ├─ utils/
+│  │  ├─ ast/               # AST 조작 및 코드 생성
+│  │  ├─ tailwind/          # Tailwind 테마 헬퍼
+│  │  ├─ cache.ts           # 바운디드 LRU 캐시
+│  │  └─ selection.ts       # 다중 선택 헬퍼
+│  ├─ constants/            # 상수 및 설정
+│  ├─ types/                # TypeScript 타입 정의
+│  └─ main.tsx              # 로컬 개발 앱 엔트리
+├─ demos/                   # 문서용 독립 iframe 데모
+├─ website/                 # Docusaurus 문서 사이트
 └─ package.json
 ```
 
@@ -38,6 +43,76 @@ live-editor/
 - **프리뷰 런타임**: 컴파일된 결과를 DOM/CSS 격리를 위해 iframe 안에서 렌더링합니다 (보안 샌드박스는 아닙니다 — [보안 참고사항](#-보안-참고사항) 참고).
 - **강력한 드래그 앤 드롭**: `@dnd-kit` 기반으로 부드러운 정렬과 배치를 지원합니다.
 
+## 📦 설치
+
+```bash
+pnpm add @jbpark/live-editor react react-dom
+```
+
+`react`와 `react-dom`(>= 19)은 peer dependency입니다. `prettier`(>= 3)는 선택적
+peer로, 에디터의 저장 시 포맷(format-on-save)을 쓰려면 함께 설치하세요. 없어도
+에디터는 정상 동작하며 포맷만 건너뜁니다.
+
+## 🧑‍💻 사용법
+
+스타일시트를 앱 루트 근처에서 한 번 import하세요 — **필수**이며 JS 엔트리가
+자동으로 불러오지 않습니다:
+
+```tsx
+import { useState } from 'react';
+
+import Live from '@jbpark/live-editor';
+import '@jbpark/live-editor/style.css';
+
+// 필수 — JS 엔트리가 import하지 않음
+
+const SAMPLE = `
+import * as ui from 'ui-kit';
+
+const App = () => (
+  <div className="p-6 space-y-2">
+    <ui.Typography.Title level={3}>Hello</ui.Typography.Title>
+    <ui.Button type="primary">Edit me</ui.Button>
+  </div>
+);
+
+export default App;
+`;
+
+export default function Example() {
+  const [code, setCode] = useState(SAMPLE);
+
+  return (
+    <Live>
+      <Live.Editor value={code} onChange={setCode} />
+      <Live.Preview showError frame={{ mode: 'iframe', syncStyle: true }} />
+    </Live>
+  );
+}
+```
+
+전체 가이드(Tailwind가 프리뷰에 반영되는 방식, 커스텀 패널 등)는
+[문서 사이트](https://live-editor-lab.vercel.app)를 참고하세요.
+
+## 🧩 엔트리 포인트
+
+패키지는 서브패스 export를 제공해, 한 기능 영역만 필요한 소비자가 나머지를
+번들에 포함하지 않도록 합니다(예: 프리뷰 전용 빌드에는 CodeMirror 미포함) —
+[#194](https://github.com/pjb0811/live-editor/issues/194) 참고:
+
+| Import                               | 내용                                   |
+| ------------------------------------ | -------------------------------------- |
+| `@jbpark/live-editor`                | 전체 (`Live` 프로바이더 + 모든 서피스) |
+| `@jbpark/live-editor/provider`       | 공유 편집 컨텍스트 프로바이더만        |
+| `@jbpark/live-editor/dnd`            | 드래그 앤 드롭 캔버스 + 속성 패널      |
+| `@jbpark/live-editor/editor`         | CodeMirror 코드 에디터                 |
+| `@jbpark/live-editor/preview`        | 격리된 프리뷰 런타임                   |
+| `@jbpark/live-editor/error`          | 에러 바운더리                          |
+| `@jbpark/live-editor/utils`          | 컴파일/섹션 헬퍼                       |
+| `@jbpark/live-editor/utils/ast`      | AST 조작 및 코드 생성                  |
+| `@jbpark/live-editor/utils/tailwind` | Tailwind 테마 헬퍼                     |
+| `@jbpark/live-editor/style.css`      | 컴파일된 스타일시트 (필수)             |
+
 ## 🔒 보안 참고사항
 
 - 프리뷰 `<iframe>`(`src/components/frame/iframe.tsx`)의 `sandbox` prop은 **실제 보안 경계가 아닙니다**. 컴파일된 프리뷰 코드는 host 페이지 자신의 JS realm에서 `new Function(...)`으로 실행되며(`src/utils/index.ts`의 `compileModule`), iframe에는 그 결과로 생성된 React 엘리먼트만 `contentDocument`에 포탈되어 DOM/CSS 렌더링 용도로만 쓰입니다. iframe 자체는 사용자 코드를 실행하지 않습니다.
@@ -58,7 +133,10 @@ live-editor/
 - Node.js: 20.x 이상
 - **pnpm**: 10.x 이상 ([Corepack](https://nodejs.org/api/corepack.html)으로 관리)
 
-## 🚀 시작하기
+## 🚀 개발 (이 저장소)
+
+> Live Editor 자체를 개발할 때 참고하세요. 패키지를 앱에서 _사용_ 하려면
+> 위의 [설치](#-설치)를 보세요.
 
 ### pnpm 설정 (권장)
 
@@ -95,6 +173,12 @@ pnpm run dev
 pnpm run build
 ```
 
+### 테스트
+
+```bash
+pnpm test
+```
+
 ### 린트 & 타입 체크
 
 ```bash
@@ -114,16 +198,16 @@ pnpm run preview
 
 - `main`으로 향하는 PR마다 AI가 변경 내용을 요약한 changeset 파일을 초안으로 작성합니다.
 - `main`에 changeset들이 쌓이면 "Version Packages" PR이 `package.json`의 버전을 승격시키고 `CHANGELOG.md`를 정리합니다.
-- 이 PR을 머지하면 빌드, 태그 생성, (이 패키지가 공개로 전환되면) npm 배포가 실행됩니다.
+- 이 PR을 머지하면 빌드, 태그 생성, npm 배포가 실행됩니다.
 
 CI 워크플로우:
 
 - `changeset-draft.yml`: `main` 대상 PR이 열리거나 갱신될 때 AI가 changeset 초안을 작성
 - `version.yml`: changeset이 쌓이면 "Version Packages" PR을 열거나 갱신
-- `publish.yml`: `main` 머지 시 버전이 미태그 상태면 빌드/(공개 패키지면 배포)/태그/GitHub Release 생성
+- `publish.yml`: `main` 머지 시 버전이 미태그 상태면 빌드/배포/태그/GitHub Release 생성
 - `release.yml`: 기존 태그에 대한 GitHub Release를 수동(`workflow_dispatch`)으로 재생성하는 백업 유틸리티
 - Docusaurus 문서 사이트는 `website/`에서 빌드되며 Vercel로 배포됩니다(`vercel.json` 참고).
 
 ## 📄 라이선스
 
-MIT License
+[MIT License](./LICENSE) — Copyright (c) 2026 jbpark

package/README.md

@@ -12,20 +12,25 @@ An interactive editor for building UIs with real-time preview and drag‑and‑d
 live-editor/
 ├─ src/
 │  ├─ components/
-│  │  ├─ Context/           # Global state management
-│  │  ├─ Dnd/               # Drag-and-drop system with editing panels
-│  │  ├─ Editor/             # Code editor
-│  │  ├─ Error/              # Error boundary
-│  │  ├─ Frame/              # iframe/shadow-DOM preview isolation
-│  │  └─ Preview/            # Isolated preview runtime
+│  │  ├─ context/            # Global state management
+│  │  ├─ dnd/                # Drag-and-drop system with editing panels
+│  │  │  └─ panel/           # Property panel field editors
+│  │  ├─ editor/             # CodeMirror code editor
+│  │  ├─ error/             # Error boundary
+│  │  ├─ frame/             # iframe/shadow-DOM preview isolation
+│  │  └─ preview/           # Isolated preview runtime
 │  ├─ pages/
-│  │  └─ Editor/              # Local development editor (editor + DnD toggle)
-│  ├─ utils/ast/             # AST manipulation & code generation
-│  ├─ constants/             # Constants and configurations
-│  ├─ types/                 # TypeScript type definitions
-│  └─ main.tsx                # Local development app entry
-├─ demos/                     # Standalone iframe demos for the documentation
-├─ website/                   # Docusaurus documentation site
+│  │  └─ editor/            # Local development editor (editor + DnD toggle)
+│  ├─ utils/
+│  │  ├─ ast/               # AST manipulation & code generation
+│  │  ├─ tailwind/          # Tailwind theme helpers
+│  │  ├─ cache.ts           # Bounded LRU cache
+│  │  └─ selection.ts       # Multi-select helpers
+│  ├─ constants/            # Constants and configurations
+│  ├─ types/                # TypeScript type definitions
+│  └─ main.tsx              # Local development app entry
+├─ demos/                   # Standalone iframe demos for the documentation
+├─ website/                 # Docusaurus documentation site
 └─ package.json
 ```
 
@@ -38,6 +43,76 @@ live-editor/
 - **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.
 
+## 📦 Installation
+
+```bash
+pnpm add @jbpark/live-editor react react-dom
+```
+
+`react` and `react-dom` (>= 19) are peer dependencies. `prettier` (>= 3) is an
+optional peer — install it too if you want the editor's format-on-save; without
+it the editor still works and simply skips formatting.
+
+## 🧑‍💻 Usage
+
+Import the stylesheet once near your app root — it is **required** and is not
+imported by the JS entry:
+
+```tsx
+import { useState } from 'react';
+
+import Live from '@jbpark/live-editor';
+import '@jbpark/live-editor/style.css';
+
+// required — not imported by the JS entry
+
+const SAMPLE = `
+import * as ui from 'ui-kit';
+
+const App = () => (
+  <div className="p-6 space-y-2">
+    <ui.Typography.Title level={3}>Hello</ui.Typography.Title>
+    <ui.Button type="primary">Edit me</ui.Button>
+  </div>
+);
+
+export default App;
+`;
+
+export default function Example() {
+  const [code, setCode] = useState(SAMPLE);
+
+  return (
+    <Live>
+      <Live.Editor value={code} onChange={setCode} />
+      <Live.Preview showError frame={{ mode: 'iframe', syncStyle: true }} />
+    </Live>
+  );
+}
+```
+
+See the [documentation site](https://live-editor-lab.vercel.app) for the full
+guide (how Tailwind reaches the preview, custom panels, and more).
+
+## 🧩 Entry points
+
+The package ships subpath exports so a consumer who needs only one feature area
+can avoid pulling in the rest (e.g. no CodeMirror in a preview-only build) — see
+[#194](https://github.com/pjb0811/live-editor/issues/194):
+
+| Import                               | Contains                                    |
+| ------------------------------------ | ------------------------------------------- |
+| `@jbpark/live-editor`                | Everything (`Live` provider + all surfaces) |
+| `@jbpark/live-editor/provider`       | The shared editing context provider only    |
+| `@jbpark/live-editor/dnd`            | Drag-and-drop canvas + property panel       |
+| `@jbpark/live-editor/editor`         | CodeMirror code editor                      |
+| `@jbpark/live-editor/preview`        | Isolated preview runtime                    |
+| `@jbpark/live-editor/error`          | Error boundary                              |
+| `@jbpark/live-editor/utils`          | Compile/section helpers                     |
+| `@jbpark/live-editor/utils/ast`      | AST manipulation & code generation          |
+| `@jbpark/live-editor/utils/tailwind` | Tailwind theme helpers                      |
+| `@jbpark/live-editor/style.css`      | Compiled stylesheet (required)              |
+
 ## 🔒 Security Notes
 
 - The `sandbox` prop on the preview `<iframe>` (`src/components/frame/iframe.tsx`) 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.
@@ -58,7 +133,10 @@ live-editor/
 - Node.js: 20.x or higher
 - **pnpm**: 10.x or higher (managed via [Corepack](https://nodejs.org/api/corepack.html))
 
-## 🚀 Getting Started
+## 🚀 Development (this repo)
+
+> Working on Live Editor itself. To _use_ the package in your app, see
+> [Installation](#-installation) above.
 
 ### pnpm Setup (Recommended)
 
@@ -96,6 +174,12 @@ feature demos live in `website/`.
 pnpm run build
 ```
 
+### Test
+
+```bash
+pnpm test
+```
+
 ### Lint & Type Check
 
 ```bash
@@ -115,17 +199,17 @@ Releases are fully automated via [changesets](https://github.com/changesets/chan
 
 - 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.
+- Merging that PR builds, tags the release, and 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.
+- `publish.yml`: Builds/publishes/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.
 - The Docusaurus documentation site is built from `website/` and deployed via
   Vercel (see `vercel.json`).
 
 ## 📄 License
 
-MIT License
+[MIT License](./LICENSE) — Copyright (c) 2026 jbpark

package/dist/dnd/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ICON_OPTIONS, c as PanelRenderData, d as DraggableItemDragState, f as DraggableItemProps, i as ICON_MAP, l as Props, n as Panel, o as PaletteRenderData, r as PanelProps, s as PanelBinding, t as Dnd, u as DraggableItem } from "../index-9bvWkK07.js";
-export { Panel as DefaultPanel, DraggableItem, type DraggableItemDragState, type DraggableItemProps, ICON_MAP, ICON_OPTIONS, type PaletteRenderData, type PanelBinding, type PanelProps, type PanelRenderData, type Props, Dnd as default };
+import { S as DraggableItemProps, _ as PanelNodeChange, a as ItemsEditorNestedElement, b as DraggableItem, c as useItemsEditor, d as ICON_MAP, f as ICON_OPTIONS, g as PanelBinding, h as PaletteRenderData, i as ItemsEditorItem, l as Panel, m as FieldProps, n as ItemsEditor, o as ItemsEditorNestedGroup, p as Field, r as ItemsEditorActions, s as ItemsEditorOptions, t as Dnd, u as PanelProps, v as PanelRenderData, x as DraggableItemDragState, y as Props } from "../index-DYm4nsej.js";
+export { Panel as DefaultPanel, DraggableItem, type DraggableItemDragState, type DraggableItemProps, Field, type FieldProps, ICON_MAP, ICON_OPTIONS, type ItemsEditor, type ItemsEditorActions, type ItemsEditorItem, type ItemsEditorNestedElement, type ItemsEditorNestedGroup, type ItemsEditorOptions, type PaletteRenderData, type PanelBinding, type PanelNodeChange, type PanelProps, type PanelRenderData, type Props, Dnd as default, useItemsEditor };

package/dist/dnd/index.js

@@ -1,2 +1,2 @@
-import { a as DraggableItem, i as ICON_OPTIONS, n as Panel, r as ICON_MAP, t as Dnd } from "../dnd-C1YGcp4k.js";
-export { Panel as DefaultPanel, DraggableItem, ICON_MAP, ICON_OPTIONS, Dnd as default };
+import { a as ICON_OPTIONS, i as ICON_MAP, n as Panel, o as useItemsEditor, r as Field, s as DraggableItem, t as Dnd } from "../dnd-DRivgZdt.js";
+export { Panel as DefaultPanel, DraggableItem, Field, ICON_MAP, ICON_OPTIONS, Dnd as default, useItemsEditor };