@jbpark/live-editor 1.8.1 → 1.10.0

package/README.ko.md

@@ -12,16 +12,19 @@ live-editor/
 │  ├─ components/
 │  │  ├─ Context/           # 전역 상태 관리
 │  │  ├─ Dnd/               # 드래그 앤 드롭 시스템 및 편집 패널
-│  │  ├─ Editor/            # 코드 에디터
-│  │  ├─ Error/             # 에러 바운더리
-│  │  └─ Preview/           # 격리된 프리뷰 런타임
+│  │  ├─ Editor/             # 코드 에디터
+│  │  ├─ Error/              # 에러 바운더리
+│  │  ├─ Frame/              # iframe/shadow DOM 프리뷰 격리
+│  │  └─ Preview/            # 격리된 프리뷰 런타임
 │  ├─ pages/
-│  │  ├─ Playground/        # 메인 에디터 페이지
-│  │  └─ Preview/           # 전체화면 프리뷰 페이지
-│  ├─ utils/ast/            # AST 조작 및 코드 생성
-│  ├─ constants/            # 상수 및 설정
-│  ├─ types/                # TypeScript 타입 정의
-│  └─ App.tsx               # 라우팅이 포함된 앱 레이아웃
+│  │  ├─ Docs/                # 문서 형태 데모 사이트 (개요 + 기능별 페이지)
+│  │  ├─ Editor/              # 전체 에디터 앱 (에디터 + DnD 전환)
+│  │  ├─ Playground/          # 데이터 바인딩 설정 테스트 페이지
+│  │  └─ Preview/             # 전체화면 프리뷰 페이지
+│  ├─ utils/ast/             # AST 조작 및 코드 생성
+│  ├─ constants/             # 상수 및 설정
+│  ├─ types/                 # TypeScript 타입 정의
+│  └─ main.tsx                # 앱 진입점 + 라우팅
 └─ package.json
 ```
 

package/README.md

@@ -12,16 +12,19 @@ live-editor/
 │  ├─ components/
 │  │  ├─ Context/           # Global state management
 │  │  ├─ Dnd/               # Drag-and-drop system with editing panels
-│  │  ├─ Editor/            # Code editor
-│  │  ├─ Error/             # Error boundary
-│  │  └─ Preview/           # Isolated preview runtime
+│  │  ├─ Editor/             # Code editor
+│  │  ├─ Error/              # Error boundary
+│  │  ├─ Frame/              # iframe/shadow-DOM preview isolation
+│  │  └─ Preview/            # Isolated preview runtime
 │  ├─ pages/
-│  │  ├─ Playground/        # Main editor page
-│  │  └─ Preview/           # Full-screen preview page
-│  ├─ utils/ast/            # AST manipulation & code generation
-│  ├─ constants/            # Constants and configurations
-│  ├─ types/                # TypeScript type definitions
-│  └─ App.tsx               # App layout with routing
+│  │  ├─ 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
+│  ├─ utils/ast/             # AST manipulation & code generation
+│  ├─ constants/             # Constants and configurations
+│  ├─ types/                 # TypeScript type definitions
+│  └─ main.tsx                # App entry + routing
 └─ package.json
 ```
 

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import { n as Section } from "./index-DdSjzvA3.mjs";
 import "@jbpark/ui-kit/style.css";
+import * as react from "react";
 import React$1, { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Extension } from "@uiw/react-codemirror";
@@ -60,7 +61,7 @@ declare class ErrorBoundary extends React$1.Component<Props$6, State> {
   static getDerivedStateFromError(error: Error): State;
   componentDidCatch(error: Error, errorInfo: React$1.ErrorInfo): void;
   componentDidUpdate(prevProps: Props$6): void;
-  render(): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
+  render(): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 }
 //#endregion
 //#region src/components/error/error.d.ts
@@ -132,17 +133,26 @@ declare const Core: ({
 }: Props$2) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/editor/editor.d.ts
+interface EditorRenderData {
+  value: string;
+  onChange: (value: string) => void;
+  formatCode: (code: string) => Promise<string>;
+}
 interface Props$1 extends Omit<Props$2, 'onSave' | 'onError'> {
   defaultValue?: string;
   debounce?: number;
+  renderEditor?: (data: EditorRenderData) => React.ReactNode;
 }
 declare const Editor$1: ({
   defaultValue,
   value: _value,
   debounce,
   onChange: _onChange,
+  renderEditor,
+  fragment,
+  prettierOptions,
   ...props
-}: Props$1) => react_jsx_runtime0.JSX.Element;
+}: Props$1) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 //#endregion
 //#region src/components/editor/index.d.ts
 type EditorComponent = typeof Editor$1 & {
@@ -150,7 +160,32 @@ type EditorComponent = typeof Editor$1 & {
 };
 declare const Editor: EditorComponent;
 //#endregion
+//#region src/components/dnd/draggable.d.ts
+interface DraggableItemDragState {
+  ref: (node: HTMLElement | null) => void;
+  dragProps: React.HTMLAttributes<HTMLElement>;
+  isDragging: boolean;
+}
+interface DraggableItemProps {
+  item: Section;
+  children: (drag: DraggableItemDragState) => React.ReactNode;
+}
+declare const DraggableItem: ({
+  item,
+  children
+}: DraggableItemProps) => react.ReactNode;
+//#endregion
 //#region src/components/dnd/dnd.d.ts
+interface PaletteRenderData {
+  items: Section[];
+  onAdd: (item: Section) => void;
+  DraggableItem: typeof DraggableItem;
+}
+interface PanelRenderData {
+  item?: Section;
+  onChange: (next: Partial<Section>) => void;
+  onDelete: (id: string) => void;
+}
 interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   value?: string;
   props?: Record<string, unknown>;
@@ -159,8 +194,10 @@ interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   frame?: FrameProps;
   provider?: (children: React.ReactNode) => React.ReactNode;
   onChange?: (value: string) => void;
+  renderPalette?: (data: PaletteRenderData) => React.ReactNode;
+  renderPanel?: (data: PanelRenderData) => React.ReactNode;
 }
-declare const Dnd: ({
+declare const Dnd$1: ({
   value: _value,
   props,
   modules,
@@ -169,9 +206,17 @@ declare const Dnd: ({
   items,
   frame,
   provider,
+  renderPalette,
+  renderPanel,
   ...restProps
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/dnd/index.d.ts
+type DndComponent = typeof Dnd$1 & {
+  DraggableItem: typeof DraggableItem;
+};
+declare const Dnd: DndComponent;
+//#endregion
 //#region src/index.d.ts
 declare const App: {
   ({
@@ -216,8 +261,11 @@ declare const App: {
     value: _value,
     debounce,
     onChange: _onChange,
+    renderEditor,
+    fragment,
+    prettierOptions,
     ...props
-  }: Props$1) => react_jsx_runtime0.JSX.Element) & {
+  }: Props$1) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined) & {
     Core: ({
       value,
       theme,
@@ -232,7 +280,7 @@ declare const App: {
       ...props
     }: Props$2) => react_jsx_runtime0.JSX.Element;
   };
-  Dnd: ({
+  Dnd: (({
     value: _value,
     props,
     modules,
@@ -241,8 +289,15 @@ declare const App: {
     items,
     frame,
     provider,
+    renderPalette,
+    renderPanel,
     ...restProps
-  }: Props) => react_jsx_runtime0.JSX.Element;
+  }: Props) => react_jsx_runtime0.JSX.Element) & {
+    DraggableItem: ({
+      item,
+      children
+    }: DraggableItemProps) => react.ReactNode;
+  };
 };
 declare const LiveRenderer: ({
   code,