@jbpark/live-editor 1.13.0 → 1.14.0

package/README.ko.md

@@ -4,6 +4,8 @@
 
 실시간 프리뷰와 드래그 앤 드롭을 지원하는 인터랙티브 UI 에디터입니다. 캔버스에서의 편집 내용은 AST 변환을 통해 실제 소스 코드에 정확히 반영되며, 결과는 DOM/CSS 격리를 위해 iframe 안에서 렌더링됩니다. React 19와 TypeScript로 구현되었습니다. iframe은 보안 샌드박스가 아닙니다 — [보안 참고사항](#-보안-참고사항)을 확인하세요.
 
+📖 **문서 & 라이브 데모:** https://live-editor-lab.vercel.app
+
 ## 📁 프로젝트 구조
 
 ```text
@@ -17,14 +19,13 @@ live-editor/
 │  │  ├─ Frame/              # iframe/shadow DOM 프리뷰 격리
 │  │  └─ Preview/            # 격리된 프리뷰 런타임
 │  ├─ pages/
-│  │  ├─ Docs/                # 문서 형태 데모 사이트 (개요 + 기능별 페이지)
-│  │  ├─ Editor/              # 전체 에디터 앱 (에디터 + DnD 전환)
-│  │  ├─ Playground/          # 데이터 바인딩 설정 테스트 페이지
-│  │  └─ Preview/             # 전체화면 프리뷰 페이지
+│  │  └─ Editor/              # 로컬 개발용 에디터 (에디터 + DnD 전환)
 │  ├─ utils/ast/             # AST 조작 및 코드 생성
 │  ├─ constants/             # 상수 및 설정
 │  ├─ types/                 # TypeScript 타입 정의
-│  └─ main.tsx                # 앱 진입점 + 라우팅
+│  └─ main.tsx                # 로컬 개발 앱 엔트리
+├─ demos/                     # 문서용 독립 iframe 데모
+├─ website/                   # Docusaurus 문서 사이트
 └─ package.json
 ```
 
@@ -36,7 +37,6 @@ live-editor/
 - **스마트 Items 에디터**: 배열 아이템을 추가/이동/삭제하고, 일반 속성과 중첩된 JSX 컴포넌트를 편집합니다. 순서 변경 시에도 안정적인 컴포넌트 ID를 유지합니다.
 - **프리뷰 런타임**: 컴파일된 결과를 DOM/CSS 격리를 위해 iframe 안에서 렌더링합니다 (보안 샌드박스는 아닙니다 — [보안 참고사항](#-보안-참고사항) 참고).
 - **강력한 드래그 앤 드롭**: `@dnd-kit` 기반으로 부드러운 정렬과 배치를 지원합니다.
-- **저장 & 미리보기**: 작성한 코드를 localStorage에 저장하고 전용 전체화면 미리보기 페이지(`/preview`)에서 확인할 수 있습니다.
 
 ## 🔒 보안 참고사항
 
@@ -46,34 +46,33 @@ live-editor/
 
 ## 🧰 기술 스택
 
-- **Core**: React 19, TypeScript 5.8, Vite 7
-- **Routing**: `react-router-dom` (SPA 네비게이션)
+- **Core**: React 19, TypeScript 6, Vite 8
 - **DnD**: `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers`
 - **Editor**: `@uiw/react-codemirror` (VSCode 테마)
-- **UI/스타일**: Ant Design, Tailwind CSS 4
+- **UI/스타일**: `@jbpark/ui-kit`, `lucide-react`, 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**: 10.x 이상 ([Corepack](https://nodejs.org/api/corepack.html)으로 관리)
 
 ## 🚀 시작하기
 
 ### pnpm 설정 (권장)
 
-본 프로젝트는 **pnpm@9**를 [Corepack](https://nodejs.org/api/corepack.html)으로 관리합니다. Corepack을 활성화하고 지정된 버전을 적용하세요:
+본 프로젝트는 **pnpm@10**을 [Corepack](https://nodejs.org/api/corepack.html)으로 관리합니다. Corepack을 활성화하고 지정된 버전을 적용하세요:
 
 ```bash
 corepack enable
-corepack prepare pnpm@9.0.0 --activate
+corepack prepare pnpm@10.29.3 --activate
 ```
 
 또는 수동으로 설치:
 
 ```bash
-npm install -g pnpm@9
+npm install -g pnpm@10
 ```
 
 ### 설치
@@ -88,6 +87,8 @@ pnpm install
 pnpm run dev
 ```
 
+루트 경로에서 로컬 에디터가 실행됩니다. 공개 문서와 기능별 데모는 `website/`에 있습니다.
+
 ### 빌드
 
 ```bash
@@ -121,9 +122,7 @@ CI 워크플로우:
 - `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` 값을 경로에 맞게 설정해야 합니다.
+- Docusaurus 문서 사이트는 `website/`에서 빌드되며 Vercel로 배포됩니다(`vercel.json` 참고).
 
 ## 📄 라이선스
 

package/README.md

@@ -4,6 +4,8 @@
 
 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.
 
+📖 **Documentation & live demos:** https://live-editor-lab.vercel.app
+
 ## 📁 Project Structure
 
 ```text
@@ -17,14 +19,13 @@ live-editor/
 │  │  ├─ Frame/              # iframe/shadow-DOM preview isolation
 │  │  └─ Preview/            # Isolated preview runtime
 │  ├─ pages/
-│  │  ├─ Docs/                # Docs-style demo site (overview + feature pages)
-│  │  ├─ Editor/              # Full editor app (editor + DnD toggle)
-│  │  ├─ Playground/          # Data-binding config test page
-│  │  └─ Preview/             # Full-screen preview page
+│  │  └─ Editor/              # Local development editor (editor + DnD toggle)
 │  ├─ utils/ast/             # AST manipulation & code generation
 │  ├─ constants/             # Constants and configurations
 │  ├─ types/                 # TypeScript type definitions
-│  └─ main.tsx                # App entry + routing
+│  └─ main.tsx                # Local development app entry
+├─ demos/                     # Standalone iframe demos for the documentation
+├─ website/                   # Docusaurus documentation site
 └─ package.json
 ```
 
@@ -36,7 +37,6 @@ live-editor/
 - **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
 
@@ -46,34 +46,33 @@ live-editor/
 
 ## 🧰 Tech Stack
 
-- **Core**: React 19, TypeScript 5.8, Vite 7
-- **Routing**: `react-router-dom` for SPA navigation
+- **Core**: React 19, TypeScript 6, Vite 8
 - **DnD**: `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers`
 - **Editor**: `@uiw/react-codemirror` with VSCode theme
-- **UI/Styling**: Ant Design, Tailwind CSS 4
+- **UI/Styling**: `@jbpark/ui-kit`, `lucide-react`, 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))
+- **pnpm**: 10.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:
+This project uses **pnpm@10** 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
+corepack prepare pnpm@10.29.3 --activate
 ```
 
 Or, if you prefer a manual install:
 
 ```bash
-npm install -g pnpm@9
+npm install -g pnpm@10
 ```
 
 ### Install
@@ -88,6 +87,9 @@ pnpm install
 pnpm run dev
 ```
 
+This starts the local editor at the root route. The public documentation and
+feature demos live in `website/`.
+
 ### Build
 
 ```bash
@@ -121,9 +123,8 @@ CI workflows:
 - `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.
+- The Docusaurus documentation site is built from `website/` and deployed via
+  Vercel (see `vercel.json`).
 
 ## 📄 License
 

package/dist/index.js

@@ -100,6 +100,20 @@ const UNIT_MAP = {
 const UNITS_PATTERN = Object.keys(UNIT_MAP).sort((a, b) => b.length - a.length).join("|");
 const VIEWPORT_UNIT_RE = new RegExp(`(?<![\\w.-])(-?(?:\\d+\\.?\\d*|\\.\\d+))(${UNITS_PATTERN})(?![a-zA-Z0-9_-])`, "gi");
 const convertViewportUnits = (css) => css.replace(VIEWPORT_UNIT_RE, (_match, number, unit) => number + UNIT_MAP[unit.toLowerCase()]);
+const rewriteInlineViewportUnits = (root) => {
+	root.querySelectorAll("[style*=\"vh\" i], [style*=\"vmin\" i], [style*=\"vmax\" i]").forEach((el) => {
+		const current = el.getAttribute("style");
+		if (current == null) return;
+		const converted = convertViewportUnits(current);
+		if (converted !== current) el.setAttribute("style", converted);
+	});
+	root.querySelectorAll("style").forEach((styleEl) => {
+		const current = styleEl.textContent;
+		if (!current) return;
+		const converted = convertViewportUnits(current);
+		if (converted !== current) styleEl.textContent = converted;
+	});
+};
 //#endregion
 //#region src/components/frame/iframe.tsx
 const EMPTY_STRING_ARRAY = [];
@@ -289,6 +303,7 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		let contentHeight = 0;
 		withMeasurementOverrides(doc, () => {
 			ensureContainerStyle(doc, probeHeight);
+			rewriteInlineViewportUnits(mountNode);
 			contentHeight = mountNode.scrollHeight;
 			mountNode.querySelectorAll("*").forEach((el) => {
 				const style = win.getComputedStyle(el);