@jbpark/live-editor 2.0.4 → 2.1.1

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/{ast-BhbOxomw.js → ast-CAhr9WXv.js}

@@ -1,4 +1,4 @@
-import { C as __toESM, _ as CONFIG, d as createBoundedCache, f as nanoid, g as BINDING_PROP, h as require_lib$1, m as require_lib$2, p as require_lib, u as traverse, v as DATA_ATTR, x as REGEX } from "./document-Ddw-tfnt.js";
+import { C as __toESM, _ as CONFIG, d as createBoundedCache, f as nanoid, g as BINDING_PROP, h as require_lib$1, m as require_lib$2, p as require_lib, u as traverse, v as DATA_ATTR, x as REGEX } from "./document-CgUTKVQo.js";
 import { z } from "zod";
 //#region src/utils/ast/types.ts
 var import_lib$1 = require_lib$1();
@@ -242,7 +242,7 @@ const extractObjectProperties = (element) => {
 	element.properties.forEach((prop) => {
 		if (import_lib$2.isObjectProperty(prop) && import_lib$2.isIdentifier(prop.key)) {
 			const key = prop.key.name;
-			if (key === "children") return;
+			if (key === "children" || import_lib$2.isJSXElement(prop.value) || import_lib$2.isJSXFragment(prop.value)) return;
 			const extracted = extractNodeValue(prop.value);
 			properties[key] = {
 				...extracted,
@@ -513,7 +513,7 @@ const buildPropertyValue = (value, declaredType, renderLeaf, current) => {
 			cooked: raw
 		}, true)], []);
 	}
-	if (renderLeaf?.type === "jsx") {
+	if (renderLeaf?.type === "jsx" || import_lib$2.isJSXElement(current) || import_lib$2.isJSXFragment(current)) {
 		const trimmed = String(value).trim();
 		if (!trimmed.startsWith("<")) return import_lib$2.stringLiteral(trimmed);
 		try {
@@ -1098,9 +1098,13 @@ const update = (code, dataId, label, value, property) => {
 			plugins: ["jsx", "typescript"]
 		});
 		let changed = false;
+		let failure;
 		const edits = [];
-		const collect = (result) => {
-			if (!result) return;
+		const collect = (result, onNull) => {
+			if (!result) {
+				failure = onNull();
+				return;
+			}
 			edits.push(...result);
 			changed = true;
 		};
@@ -1110,33 +1114,79 @@ const update = (code, dataId, label, value, property) => {
 				return import_lib$2.isJSXAttribute(attr) && import_lib$2.isJSXIdentifier(attr.name) && attr.name.name === DATA_ATTR.ID && attr.value && import_lib$2.isStringLiteral(attr.value) && attr.value.value === dataId;
 			})) return;
 			const bindingAttr = opening.attributes.find((attr) => import_lib$2.isJSXAttribute(attr) && import_lib$2.isJSXIdentifier(attr.name) && attr.name.name === DATA_ATTR.BINDING);
-			if (!bindingAttr?.value) return;
+			if (!bindingAttr?.value) {
+				failure = {
+					reason: "no-binding",
+					dataId
+				};
+				return;
+			}
 			let bindingValue = "";
 			if (import_lib$2.isStringLiteral(bindingAttr.value)) bindingValue = bindingAttr.value.value;
 			else if (import_lib$2.isJSXExpressionContainer(bindingAttr.value)) try {
 				bindingValue = generateCode(bindingAttr.value.expression);
-			} catch {
+			} catch (error) {
+				failure = {
+					reason: "parse-error",
+					error
+				};
 				return;
 			}
 			const matches = parseBinding(bindingValue).filter((binding) => property !== void 0 ? binding.property === property : binding.label === label);
-			if (matches.length !== 1) return;
+			if (matches.length === 0) {
+				failure = {
+					reason: "binding-not-declared",
+					dataId,
+					label,
+					property
+				};
+				return;
+			}
+			if (matches.length > 1) {
+				failure = {
+					reason: "duplicate-binding",
+					dataId,
+					label,
+					property,
+					count: matches.length
+				};
+				return;
+			}
 			const propertyBinding = matches[0];
-			switch (propertyBinding.property) {
+			const prop = propertyBinding.property;
+			switch (prop) {
 				case BINDING_PROP.INNER_TEXT:
-					collect(editInnerText(wrapped, path.node, String(value)));
+					collect(editInnerText(wrapped, path.node, String(value)), () => ({
+						reason: "parse-error",
+						error: /* @__PURE__ */ new Error(`could not update "${prop}"`)
+					}));
 					break;
 				case BINDING_PROP.INNER_HTML:
-					collect(propertyBinding.type === "richtext" ? editRichtext(path.node, String(value)) : editInnerHTML(path.node, String(value)));
+					collect(propertyBinding.type === "richtext" ? editRichtext(path.node, String(value)) : editInnerHTML(path.node, String(value)), () => ({
+						reason: "parse-error",
+						error: /* @__PURE__ */ new Error(`could not update "${prop}"`)
+					}));
 					break;
 				case BINDING_PROP.CHILDREN:
-					collect(editChildren(path.node, value));
+					collect(editChildren(path.node, value), () => ({
+						reason: "parse-error",
+						error: /* @__PURE__ */ new Error(`could not update "${prop}"`)
+					}));
 					break;
-				default: collect(propertyBinding.type === "jsx" ? editJsxAttribute(opening, propertyBinding.property, value) : editAttribute(opening, propertyBinding.property, value, propertyBinding.type));
+				default: collect(propertyBinding.type === "jsx" ? editJsxAttribute(opening, prop, value) : editAttribute(opening, prop, value, propertyBinding.type), () => ({
+					reason: "attribute-not-found",
+					dataId,
+					property: prop
+				}));
 			}
 		} });
 		if (!changed) return {
 			code,
-			success: false
+			success: false,
+			failure: failure ?? {
+				reason: "element-not-found",
+				dataId
+			}
 		};
 		return {
 			code: unwrap(applyEdits(wrapped, edits)),
@@ -1146,21 +1196,29 @@ const update = (code, dataId, label, value, property) => {
 		console.error("❌ Code update error:", error);
 		return {
 			code,
-			success: false
+			success: false,
+			failure: {
+				reason: "parse-error",
+				error
+			}
 		};
 	}
 };
 const bulkUpdate = (raw, entries) => {
 	let current = raw;
-	let allSucceeded = true;
+	const failures = [];
 	for (const entry of entries) {
 		const result = update(current, entry.dataId, entry.label, entry.value, entry.property);
 		current = result.code;
-		allSucceeded = allSucceeded && result.success;
+		if (!result.success && result.failure) failures.push(result.failure);
 	}
-	return {
+	return failures.length > 0 ? {
+		code: current,
+		success: false,
+		failures
+	} : {
 		code: current,
-		success: allSucceeded
+		success: true
 	};
 };
 //#endregion
@@ -1215,4 +1273,4 @@ const validateBindingValue = (binding, value) => {
 //#endregion
 export { parseValue as A, parseBindingExpression as C, extractObjectProperties as D, extractNodeValue as E, generateCode as M, flattenEditableValue as O, parseBinding as S, createNodeFromValue as T, moveSelectedIndices as _, extract as a, getCurrentValue as b, moveArrayItem as c, removeArrayItems as d, updateArrayItemProperty as f, replaceIds as g, fillIds as h, clearExtractCache as i, setEditableValue as j, parseArrayExpression as k, moveArrayItems as l, clone as m, bulkUpdate as n, appendArrayItem as o, updateArrayItemValue as p, update as r, duplicateArrayItems as s, validateBindingValue as t, parseItems as u, removeIndices as v, arrayExpressionToCode as w, getStructuredValue as x, findEditableChildren as y };
 
-//# sourceMappingURL=ast-BhbOxomw.js.map
+//# sourceMappingURL=ast-CAhr9WXv.js.map