@dannysir/floating-components 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+## [0.1.0] - 2026-04-14
+
+### Added
+
+- `TreeLayout` component and `useLayoutTree` hook
+- Path-based border resize (`resizeBorder`)
+- `splitPanel` / `removePanel` / `movePanel` API
+- Drag-and-drop panel reordering (HTML5 Drag & Drop API, depth-aware drop target)
+- `resizerClassName` prop for custom resizer styling
+- ESM + CJS dual-format bundle with TypeScript declarations

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 dannysir
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

package/README.ko.md

@@ -0,0 +1,235 @@
+# react-tree-layout
+
+[English README](./README.md)
+
+Tree 기반으로 크기 조절과 패널 이동이 가능한 React 레이아웃 라이브러리입니다. VS Code나 IDE처럼 패널을 수평/수직으로 분할하고, 경계선 드래그로 크기를 조절하고, 드래그 앤 드롭으로 패널을 이동할 수 있습니다.
+
+<img src="doc/assets/layout-overview.png" alt="기본 레이아웃" width="640" />
+
+---
+
+## 특징
+
+- **N-ary 트리 구조** — SplitNode가 2개 이상의 자식을 가질 수 있어 불필요한 중첩 없이 flat한 트리 유지
+- **경계선 드래그 리사이즈** — 패널 사이 경계선을 드래그해서 크기 조절 (requestAnimationFrame 최적화)
+- **드래그 앤 드롭 패널 이동** — HTML5 Drag & Drop API로 패널을 다른 위치로 이동
+- **다단계 드롭 타겟 감지** — 패널 가장자리, 부모 split 가장자리, 루트 가장자리를 구분하여 depth 기반 배치
+- **불변 상태 관리** — 모든 트리 업데이트가 immutable하게 처리
+- **View / State 분리** — `TreeLayout` (렌더링)과 `useLayoutTree` (상태 관리)를 독립적으로 사용 가능
+- **TypeScript 지원** — 모든 타입 선언 포함
+- **ESM + CJS** — 듀얼 포맷 번들 출력
+
+---
+
+## 설치
+
+```bash
+npm install react-tree-layout
+```
+
+> **Peer dependencies**: `react >= 17`, `react-dom >= 17`
+
+---
+
+## 빠른 시작
+
+```tsx
+import { TreeLayout, useLayoutTree, type LayoutNode } from "react-tree-layout";
+
+const initialTree: LayoutNode = {
+  type: "split",
+  direction: "horizontal",
+  size: 1,
+  children: [
+    {
+      type: "panel",
+      id: "panel-a",
+      size: 1,
+      component: <div style={{ padding: 16, background: "#dbeafe", height: "100%" }}>Panel A</div>,
+    },
+    {
+      type: "split",
+      direction: "vertical",
+      size: 1,
+      children: [
+        {
+          type: "panel",
+          id: "panel-b",
+          size: 1,
+          component: <div style={{ padding: 16, background: "#dcfce7", height: "100%" }}>Panel B</div>,
+        },
+        {
+          type: "panel",
+          id: "panel-c",
+          size: 1,
+          component: <div style={{ padding: 16, background: "#ffedd5", height: "100%" }}>Panel C</div>,
+        },
+      ],
+    },
+  ],
+};
+
+const App = () => {
+  const { tree, resizeBorder, movePanel } = useLayoutTree(initialTree);
+
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <TreeLayout tree={tree} onResizeBorder={resizeBorder} onMovePanel={movePanel} />
+    </div>
+  );
+};
+```
+
+---
+
+## 설계 개요
+
+레이아웃 상태를 **N-ary 트리**로 표현합니다.
+
+- **Leaf 노드 (`PanelNode`)** — 실제 콘텐츠가 렌더링되는 패널. `id`와 `component`를 가짐
+- **Branch 노드 (`SplitNode`)** — 자식 노드들을 수평 또는 수직으로 분할하는 컨테이너. `id` 없음
+
+```
+root (SplitNode, horizontal)
+├── panel-a (PanelNode, size: 1)
+├── panel-b (PanelNode, size: 1)
+└── (SplitNode, vertical)
+    ├── panel-c (PanelNode, size: 1)
+    └── panel-d (PanelNode, size: 1)
+```
+
+### 아키텍처
+
+```
+src/
+├── types.ts                    # LayoutNode, PanelNode, SplitNode 타입
+├── hooks/
+│   └── useLayoutTree.ts        # 트리 상태 관리 훅
+├── renderers/
+│   ├── TreeLayout.tsx           # 루트 레이아웃 컴포넌트
+│   ├── LayoutNodeRenderer.tsx   # 재귀 노드 렌더러 + 드래그 앤 드롭
+│   └── Resizer.tsx              # 경계선 리사이즈 핸들
+└── index.ts                    # public API export
+```
+
+---
+
+## API
+
+### `<TreeLayout />`
+
+레이아웃 트리를 재귀적으로 렌더링하는 컴포넌트입니다. flexbox 기반으로 패널을 배치합니다.
+
+| Prop | Type | 필수 | 설명 |
+|------|------|:----:|------|
+| `tree` | `LayoutNode` | O | 렌더링할 트리 루트 노드 |
+| `onResizeBorder` | `(path, borderIndex, delta) => void` | | 경계선 리사이즈 콜백 |
+| `onMovePanel` | `(sourceId, anchorId, position, depth) => void` | | 드래그 앤 드롭 이동 콜백 |
+| `className` | `string` | | 최상위 div의 className |
+| `style` | `CSSProperties` | | 최상위 div의 인라인 스타일 |
+| `resizerClassName` | `string` | | 경계선 div에 적용할 className |
+
+### `useLayoutTree(initialTree)`
+
+레이아웃 트리 상태를 관리하는 훅입니다.
+
+```ts
+const { tree, setTree, resizeBorder, splitPanel, removePanel, movePanel } = useLayoutTree(initialTree);
+```
+
+| 반환값 | 타입 | 설명 |
+|--------|------|------|
+| `tree` | `LayoutNode` | 현재 레이아웃 트리 상태 |
+| `setTree` | `(tree: LayoutNode) => void` | 트리 직접 설정 |
+| `resizeBorder` | `(path, borderIndex, delta) => void` | 경계선 기반 리사이즈 |
+| `splitPanel` | `(panelId, direction) => void` | 패널 분할 |
+| `removePanel` | `(panelId) => void` | 패널 제거 |
+| `movePanel` | `(sourceId, anchorId, position, depth?) => void` | 패널 이동 |
+
+---
+
+## 타입
+
+```ts
+type SplitDirection = "horizontal" | "vertical";
+
+interface PanelNode {
+  type: "panel";
+  id: string;
+  size: number;         // flex 비율
+  component: ReactNode; // 렌더링할 콘텐츠
+}
+
+interface SplitNode {
+  type: "split";
+  direction: SplitDirection;
+  size: number;             // flex 비율
+  children: LayoutNode[];   // 2개 이상의 자식
+}
+
+type LayoutNode = PanelNode | SplitNode;
+
+type DropPosition = "top" | "bottom" | "left" | "right";
+```
+
+---
+
+## 커스터마이징
+
+### 리사이저 스타일
+
+`resizerClassName`으로 경계선 스타일을 CSS로 완전히 제어할 수 있습니다.
+
+```tsx
+// styles.css
+// .my-resizer { background: #6366f1; width: 2px; }
+// .my-resizer:hover { background: #4f46e5; }
+
+<TreeLayout
+  tree={tree}
+  onResizeBorder={resizeBorder}
+  resizerClassName="my-resizer"
+/>
+```
+
+기본 인라인 스타일(너비 4px, `#e0e0e0` 배경)은 베이스로 유지되며, `className`으로 CSS 우선순위 또는 원하는 스타일링 방식을 통해 덮어쓸 수 있습니다.
+
+<img src="doc/assets/resize-demo.png" alt="경계선 리사이즈" width="640" />
+
+### 드래그 앤 드롭
+
+<img src="doc/assets/drag-drop-demo.png" alt="드래그 앤 드롭" width="640" />
+
+`movePanel(sourceId, anchorId, position, depth)` — 패널을 다른 위치로 이동합니다.
+
+- `position`: 앵커 패널 기준 드롭 위치 (`top` / `bottom` / `left` / `right`)
+- `depth`: 드롭 깊이 (0 = 패널 레벨, 1 = 부모 split 레벨, ...)
+
+**드롭 타겟 감지 우선순위:**
+1. 루트 가장자리 (외곽 5%) — 최상위 레벨에 배치
+2. 부모 split 가장자리 (외곽 15%) — 상위 split에 배치
+3. 패널 중앙 — 패널 레벨에서 분할
+
+---
+
+## 빌드
+
+```bash
+npm run build       # dist/ 생성 (ESM + CJS + .d.ts)
+npm run dev         # Vite 개발 서버
+npm run type-check  # 타입 검사
+```
+
+### 출력물
+
+| 파일 | 용도 |
+|------|------|
+| `dist/index.js` | ESM 번들 |
+| `dist/index.cjs` | CommonJS 번들 |
+| `dist/index.d.ts` | TypeScript 타입 선언 |
+
+---
+
+## 라이선스
+
+ISC

package/README.md

@@ -0,0 +1,185 @@
+# react-tree-layout
+
+[한국어 README](./README.ko.md)
+
+Tree-based resizable and reorderable panel layout for React. Split panels horizontally or vertically, resize borders by dragging, and reorder panels via drag and drop — just like VS Code or any modern IDE.
+
+<img src="doc/assets/layout-overview.png" alt="Layout overview" width="640" />
+
+---
+
+## Features
+
+- **N-ary tree structure** — `SplitNode` can hold two or more children, keeping the tree flat without unnecessary nesting
+- **Border drag resize** — drag panel borders to resize (requestAnimationFrame optimized)
+- **Drag-and-drop panel move** — reorder panels via HTML5 Drag & Drop API
+- **Multi-level drop target** — distinguishes panel edge, parent split edge, and root edge for depth-aware placement
+- **Immutable state** — all tree updates produce new objects via spread
+- **View / State separation** — `TreeLayout` (rendering) and `useLayoutTree` (state) can be used independently
+- **TypeScript** — full type declarations included
+- **ESM + CJS** — dual-format bundle output
+
+---
+
+## Installation
+
+```bash
+npm install react-tree-layout
+```
+
+> **Peer dependencies**: `react >= 17`, `react-dom >= 17`
+
+---
+
+## Quick Start
+
+```tsx
+import { TreeLayout, useLayoutTree, type LayoutNode } from "react-tree-layout";
+
+const initialTree: LayoutNode = {
+  type: "split",
+  direction: "horizontal",
+  size: 1,
+  children: [
+    {
+      type: "panel",
+      id: "panel-a",
+      size: 1,
+      component: <div style={{ padding: 16, background: "#dbeafe", height: "100%" }}>Panel A</div>,
+    },
+    {
+      type: "split",
+      direction: "vertical",
+      size: 1,
+      children: [
+        {
+          type: "panel",
+          id: "panel-b",
+          size: 1,
+          component: <div style={{ padding: 16, background: "#dcfce7", height: "100%" }}>Panel B</div>,
+        },
+        {
+          type: "panel",
+          id: "panel-c",
+          size: 1,
+          component: <div style={{ padding: 16, background: "#ffedd5", height: "100%" }}>Panel C</div>,
+        },
+      ],
+    },
+  ],
+};
+
+const App = () => {
+  const { tree, resizeBorder, movePanel } = useLayoutTree(initialTree);
+
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <TreeLayout tree={tree} onResizeBorder={resizeBorder} onMovePanel={movePanel} />
+    </div>
+  );
+};
+```
+
+---
+
+## API
+
+### `<TreeLayout />`
+
+Recursively renders the layout tree using flexbox.
+
+| Prop | Type | Required | Description |
+|------|------|:--------:|-------------|
+| `tree` | `LayoutNode` | Yes | Root node of the layout tree |
+| `onResizeBorder` | `(path, borderIndex, delta) => void` | | Border resize callback |
+| `onMovePanel` | `(sourceId, anchorId, position, depth) => void` | | Drag-and-drop move callback |
+| `className` | `string` | | className for the root div |
+| `style` | `CSSProperties` | | Inline style for the root div |
+| `resizerClassName` | `string` | | className applied to every resizer border div |
+
+### `useLayoutTree(initialTree)`
+
+Hook for managing layout tree state.
+
+```ts
+const { tree, setTree, resizeBorder, splitPanel, removePanel, movePanel } = useLayoutTree(initialTree);
+```
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `tree` | `LayoutNode` | Current layout tree state |
+| `setTree` | `(tree: LayoutNode) => void` | Directly set the tree |
+| `resizeBorder` | `(path, borderIndex, delta) => void` | Resize by border index |
+| `splitPanel` | `(panelId, direction) => void` | Split a panel |
+| `removePanel` | `(panelId) => void` | Remove a panel |
+| `movePanel` | `(sourceId, anchorId, position, depth?) => void` | Move a panel |
+
+---
+
+## Types
+
+```ts
+type SplitDirection = "horizontal" | "vertical";
+
+interface PanelNode {
+  type: "panel";
+  id: string;
+  size: number;          // flex ratio
+  component: ReactNode;  // content to render
+}
+
+interface SplitNode {
+  type: "split";
+  direction: SplitDirection;
+  size: number;            // flex ratio
+  children: LayoutNode[];  // two or more children
+}
+
+type LayoutNode = PanelNode | SplitNode;
+
+type DropPosition = "top" | "bottom" | "left" | "right";
+```
+
+---
+
+## Customization
+
+### Resizer style
+
+Use `resizerClassName` to fully control the border appearance via CSS:
+
+```tsx
+// styles.css
+// .my-resizer { background: #6366f1; width: 2px; }
+// .my-resizer:hover { background: #4f46e5; }
+
+<TreeLayout
+  tree={tree}
+  onResizeBorder={resizeBorder}
+  resizerClassName="my-resizer"
+/>
+```
+
+The default inline styles (4 px wide, `#e0e0e0` background) are still applied as a base; `className` lets you override them via CSS specificity or your preferred styling solution.
+
+<img src="doc/assets/resize-demo.png" alt="Border resize" width="640" />
+
+### Drag-and-drop
+
+<img src="doc/assets/drag-drop-demo.png" alt="Drag and drop" width="640" />
+
+`movePanel(sourceId, anchorId, position, depth)` — moves a panel to another location.
+
+- `position`: drop side relative to the anchor panel (`top` / `bottom` / `left` / `right`)
+- `depth`: 0 = panel level, 1 = parent split level, higher = ancestor split level
+
+**Drop target priority:**
+1. Root edge (outer 5%) — places at the top level
+2. Parent split edge (outer 15%) — places at the enclosing split level
+3. Panel center — splits at the panel level
+
+---
+
+## License
+
+ISC

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),E=require("react"),w=t=>{process.env.NODE_ENV!=="production"&&console.warn(`[react-tree-layout] ${t}`)};let q=0;const F=()=>typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():`panel-${++q}-${Math.random().toString(36).slice(2,9)}`,G=(t,u)=>{let i=t;for(const s of u){if(i.type!=="split"||s>=i.children.length)return null;i=i.children[s]}return i},j=(t,u,i)=>{if(u.length===0)return i(t);if(t.type!=="split")return t;const[s,...o]=u;return{...t,children:t.children.map((n,l)=>l===s?j(n,o,i):n)}},L=(t,u)=>{const i=[],s=n=>{if(n.type==="panel")return n.id===u?n:null;for(let l=0;l<n.children.length;l++){i.push({split:n,childIndex:l});const e=s(n.children[l]);if(e)return e;i.pop()}return null},o=s(t);return o?{panel:o,ancestors:[...i]}:null},k=(t,u,i,s=null,o=0)=>{if(t.type==="panel"&&t.id===u)return i(t,s,o);if(t.type==="split"){const n=t.children.map((l,e)=>k(l,u,i,t,e)).filter(l=>l!==null);return n.length===0?null:n.length===1?n[0]:{...t,children:n}}return t},O="__move_ghost__",X=(t,u,i,s,o)=>{const n=s==="left"||s==="right"?"horizontal":"vertical",l=s==="left"||s==="top",e={...u,size:1},f=L(t,i);if(!f)return t;const{ancestors:d}=f,p=Math.min(o,d.length),h=a=>{if(a.type==="split"&&a.direction===n){const y=l?[e,...a.children]:[...a.children,e];return{...a,children:y}}const g=l?[e,{...a,size:1}]:[{...a,size:1},e];return{type:"split",direction:n,size:1,children:g}};if(p>=d.length)return h(t);if(p===0){const a=(g,y=null)=>{if(g.type==="panel"&&g.id===i){if(y&&y.direction===n)return g;const x=l?[e,{...g,size:1}]:[{...g,size:1},e];return{type:"split",direction:n,size:g.size,children:x}}if(g.type==="split"){const x=g.children.findIndex(c=>c.type==="panel"&&c.id===i);if(x!==-1&&g.direction===n){const c=[...g.children],r=l?x:x+1;return c.splice(r,0,e),{...g,children:c}}return{...g,children:g.children.map(c=>a(c,g))}}return g};return a(t)}const z=d.length-p,m=z>0?d[z-1]:null;if(!m)return h(t);const T=m.childIndex,P=d.slice(0,z-1).map(a=>a.childIndex);return j(t,P,a=>{if(a.type!=="split")return a;if(a.direction===n){const x=[...a.children],c=l?T:T+1;return x.splice(c,0,e),{...a,children:x}}const g=a.children[T],y=l?[e,{...g,size:1}]:[{...g,size:1},e];return{...a,children:a.children.map((x,c)=>c===T?{type:"split",direction:n,size:g.size,children:y}:x)}})},v=(t,u,i,s,o)=>{if(u===i)return null;let n=null;const l=h=>{h.type==="panel"&&h.id===u?n=h:h.type==="split"&&h.children.forEach(l)};if(l(t),!n)return null;const f=X(t,{type:"panel",id:O,size:1,component:null},i,s,o),d=k(f,u,()=>null);return d?k(d,O,()=>({...n,size:1}))??null:null},Y=t=>{const[u,i]=E.useState(t),s=E.useCallback((e,f,d,p)=>{i(h=>{const z=G(h,e);if(!z||z.type!=="split"||f<0||f>=z.children.length-1)return h;const m=z.children[f],T=z.children[f+1],P=m.size+T.size,a=D=>p&&p>0?D/p*P:0,g=m.minSize!==void 0?a(m.minSize):.05,y=m.maxSize!==void 0?a(m.maxSize):P-.05,x=T.minSize!==void 0?a(T.minSize):.05,c=T.maxSize!==void 0?a(T.maxSize):P-.05,r=Math.max(g,P-c),R=Math.min(y,P-x),I=Math.max(r,Math.min(R,m.size+d)),b=P-I;return j(h,e,D=>D.type!=="split"?D:{...D,children:D.children.map((S,A)=>A===f?{...S,size:I}:A===f+1?{...S,size:b}:S)})})},[]),o=E.useCallback((e,f,d)=>{var h;const p=((h=d==null?void 0:d.newPanel)==null?void 0:h.id)??F();return i(z=>{var a,g;if(!L(z,e))return w(`splitPanel: panel "${e}" not found`),z;const m={type:"panel",id:p,size:((a=d==null?void 0:d.newPanel)==null?void 0:a.size)??.5,component:((g=d==null?void 0:d.newPanel)==null?void 0:g.component)??null},T=k(z,e,(y,x)=>x&&x.direction===f?y:{type:"split",direction:f,size:y.size,children:[{...y,size:1},{...m,size:1}]}),P=y=>{if(y.type==="split"){const x=y.children.findIndex(c=>c.type==="panel"&&c.id===e);if(x!==-1&&y.direction===f){const c=[...y.children];return c.splice(x+1,0,m),{...y,children:c}}return{...y,children:y.children.map(P)}}return y};return T===z?z:T?P(T):z}),p},[]),n=E.useCallback(e=>{i(f=>L(f,e)?k(f,e,()=>null)??f:(w(`removePanel: panel "${e}" not found`),f))},[]),l=E.useCallback((e,f,d,p=0)=>{i(h=>L(h,e)?L(h,f)?v(h,e,f,d,p)??h:(w(`movePanel: anchor panel "${f}" not found`),h):(w(`movePanel: source panel "${e}" not found`),h))},[]);return{tree:u,setTree:i,resizeBorder:s,splitPanel:o,removePanel:n,movePanel:l}},B=({direction:t,onResize:u,className:i,style:s})=>{const o=t==="horizontal",n=E.useRef(0),l=E.useRef(0),e=E.useRef(0),f=E.useCallback(p=>{p.preventDefault(),n.current=o?p.clientX:p.clientY,e.current=0;const h=m=>{const T=o?m.clientX:m.clientY,P=T-n.current;P!==0&&(n.current=T,e.current+=P,l.current||(l.current=requestAnimationFrame(()=>{u(e.current),e.current=0,l.current=0})))},z=()=>{l.current&&(cancelAnimationFrame(l.current),e.current!==0&&u(e.current),l.current=0,e.current=0),document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",z)};document.addEventListener("mousemove",h),document.addEventListener("mouseup",z)},[o,u]),d=i?{}:{width:o?4:"100%",height:o?"100%":4,background:"#e0e0e0",cursor:o?"col-resize":"row-resize"};return M.jsx("div",{onMouseDown:f,className:i,style:{flexShrink:0,...d,...s}})},H=.05,V=.15,_=(t,u,i)=>{const s=i.getBoundingClientRect(),o={left:(t-s.left)/s.width,right:(s.right-t)/s.width,top:(u-s.top)/s.height,bottom:(s.bottom-u)/s.height},n=Object.keys(o).reduce((l,e)=>o[l]<o[e]?l:e);return{position:n,dist:o[n]}},$=(t,u,i)=>{const s=[];let o=null,n=i.parentElement;for(;n;){if(n.hasAttribute("data-tree-root")){o=n;break}n.hasAttribute("data-layout-split")&&s.push(n),n=n.parentElement}if(o){const{position:e,dist:f}=_(t,u,o);if(f<H)return{position:e,depth:s.length+1}}for(let e=s.length-1;e>=0;e--){const{position:f,dist:d}=_(t,u,s[e]);if(d<V)return{position:f,depth:e+1}}const{position:l}=_(t,u,i);return{position:l,depth:0}},C=({node:t,path:u=[],onResizeBorder:i,onMovePanel:s,onDropPreviewChange:o,shadowPanelId:n,isPreviewActive:l,resizerClassName:e,resizerStyle:f,dragHandleSelector:d,shadowClassName:p,shadowStyle:h,panelClassName:z,splitClassName:m})=>{const T=E.useRef(null),P=E.useRef(0),a=E.useRef(null),g=E.useCallback((c,r)=>{if(!i||!T.current)return;const R=T.current.getBoundingClientRect(),I=t.type==="split"?t.direction==="horizontal"?R.width:R.height:0;if(I===0||t.type!=="split")return;const b=t.children.reduce((S,A)=>S+A.size,0),D=r/I*b;i(u,c,D,I)},[i,u,t]),y=E.useCallback(c=>{if(!d)return;const R=!!c.target.closest(d);a.current&&(a.current.draggable=R)},[d]);if(t.type==="panel"){const c=t.id===n;return M.jsx("div",{ref:a,draggable:!d,onMouseDown:y,className:c?p??z:z,onDragStart:r=>{r.dataTransfer.setData("text/panel-id",t.id),r.dataTransfer.effectAllowed="move";const R=r.currentTarget.closest("[data-tree-root]");R&&(R.dataset.draggingPanelId=t.id)},onDragOver:r=>{r.preventDefault(),r.dataTransfer.dropEffect="move";const R=r.clientX,I=r.clientY,b=r.currentTarget,D=b.closest("[data-tree-root]"),S=D==null?void 0:D.dataset.draggingPanelId;!S||S===t.id||P.current||(P.current=requestAnimationFrame(()=>{P.current=0;const{position:A,depth:W}=$(R,I,b);o==null||o({sourcePanelId:S,anchorPanelId:t.id,position:A,depth:W})}))},onDrop:r=>{if(r.preventDefault(),l)return;r.stopPropagation(),o==null||o(null);const R=r.dataTransfer.getData("text/panel-id");if(!R||R===t.id||!s)return;const{position:I,depth:b}=$(r.clientX,r.clientY,r.currentTarget);s(R,t.id,I,b)},style:{flex:t.size,minWidth:0,minHeight:0,overflow:"hidden",...c?p?h:{opacity:.5,outline:"2px dashed rgba(59, 130, 246, 0.6)",outlineOffset:-2,...h}:void 0},children:t.component})}const x=[];return t.children.forEach((c,r)=>{x.push(M.jsx(C,{node:c,path:[...u,r],onResizeBorder:i,onMovePanel:s,onDropPreviewChange:o,shadowPanelId:n,isPreviewActive:l,resizerClassName:e,resizerStyle:f,dragHandleSelector:d,shadowClassName:p,shadowStyle:h,panelClassName:z,splitClassName:m},c.type==="panel"?c.id:`split-${r}`)),r<t.children.length-1&&x.push(M.jsx(B,{direction:t.direction,onResize:R=>g(r,R),className:e,style:f},`resizer-${r}`))}),M.jsx("div",{ref:T,"data-layout-split":!0,className:m,style:{display:"flex",flexDirection:t.direction==="horizontal"?"row":"column",flex:t.size,minWidth:0,minHeight:0},children:x})},U=(t,u=[])=>(t.type==="panel"?u.push(t.id):t.children.forEach(i=>U(i,u)),u),J=({tree:t,onResizeBorder:u,onMovePanel:i,className:s,style:o,resizerClassName:n,resizerStyle:l,dragHandleSelector:e,shadowClassName:f,shadowStyle:d,classNames:p})=>{const h=E.useRef(null),z=E.useId();E.useEffect(()=>{const c=U(t),r=new Set;c.forEach(R=>{r.has(R)&&w(`Duplicate panel id detected: "${R}". Panel ids must be unique.`),r.add(R)})},[t]);const[m,T]=E.useState(null),P=E.useRef(null),a=E.useRef(null),g=E.useCallback(c=>{const r=P.current;!c&&!r||c&&r&&r.sourcePanelId===c.sourcePanelId&&r.anchorPanelId===c.anchorPanelId&&r.position===c.position&&r.depth===c.depth||(P.current=c,a.current=c,T(c))},[]),y=E.useCallback(()=>{P.current=null,a.current=null,T(null),h.current&&delete h.current.dataset.draggingPanelId},[z]),x=E.useMemo(()=>m?v(t,m.sourcePanelId,m.anchorPanelId,m.position,m.depth):null,[t,m]);return M.jsx("div",{ref:h,"data-tree-root":z,className:s,style:{display:"flex",width:"100%",height:"100%",...o},onDrop:c=>{c.preventDefault();const r=a.current;r&&i&&i(r.sourcePanelId,r.anchorPanelId,r.position,r.depth),y()},onDragEnd:()=>y(),onDragLeave:c=>{const r=h.current;if(!r)return;const R=c.relatedTarget;(!R||!r.contains(R))&&y()},children:M.jsx(C,{node:x??t,onResizeBorder:u,onMovePanel:i,onDropPreviewChange:g,shadowPanelId:m==null?void 0:m.sourcePanelId,isPreviewActive:!!x,resizerClassName:(p==null?void 0:p.resizer)??n,resizerStyle:l,dragHandleSelector:e,shadowClassName:f,shadowStyle:d,panelClassName:p==null?void 0:p.panel,splitClassName:p==null?void 0:p.split})})};exports.TreeLayout=J;exports.useLayoutTree=Y;

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import { CSSProperties } from 'react';
+import { Dispatch } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SetStateAction } from 'react';
+
+export declare type DropPosition = "top" | "bottom" | "left" | "right";
+
+export declare interface LayoutClassNames {
+    panel?: string;
+    split?: string;
+    resizer?: string;
+}
+
+export declare type LayoutNode = PanelNode | SplitNode;
+
+export declare interface PanelNode {
+    type: "panel";
+    id: string;
+    size: number;
+    component: ReactNode;
+    minSize?: number;
+    maxSize?: number;
+}
+
+export declare type SplitDirection = "horizontal" | "vertical";
+
+export declare interface SplitNode {
+    type: "split";
+    direction: SplitDirection;
+    size: number;
+    children: LayoutNode[];
+    minSize?: number;
+    maxSize?: number;
+}
+
+export declare const TreeLayout: ({ tree, onResizeBorder, onMovePanel, className, style, resizerClassName, resizerStyle, dragHandleSelector, shadowClassName, shadowStyle, classNames }: TreeLayoutProps) => JSX.Element;
+
+declare interface TreeLayoutProps {
+    tree: LayoutNode;
+    onResizeBorder?: (path: number[], borderIndex: number, delta: number, totalPixels?: number) => void;
+    onMovePanel?: (sourcePanelId: string, anchorPanelId: string, position: DropPosition, depth: number) => void;
+    className?: string;
+    style?: CSSProperties;
+    resizerClassName?: string;
+    resizerStyle?: CSSProperties;
+    dragHandleSelector?: string;
+    shadowClassName?: string;
+    shadowStyle?: CSSProperties;
+    classNames?: LayoutClassNames;
+}
+
+export declare const useLayoutTree: (initialTree: LayoutNode) => {
+    tree: LayoutNode;
+    setTree: Dispatch<SetStateAction<LayoutNode>>;
+    resizeBorder: (path: number[], borderIndex: number, delta: number, totalPixels?: number) => void;
+    splitPanel: (panelId: string, direction: SplitDirection, options?: {
+        newPanel?: Partial<Omit<PanelNode, "type">>;
+    }) => string;
+    removePanel: (panelId: string) => void;
+    movePanel: (sourcePanelId: string, anchorPanelId: string, position: DropPosition, depth?: number) => void;
+};
+
+export { }

package/dist/index.js

@@ -0,0 +1,425 @@
+import { jsx as R } from "react/jsx-runtime";
+import { useState as k, useCallback as M, useRef as A, useId as X, useEffect as Y, useMemo as B } from "react";
+const _ = (t) => {
+  process.env.NODE_ENV !== "production" && console.warn(`[react-tree-layout] ${t}`);
+};
+let H = 0;
+const V = () => typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : `panel-${++H}-${Math.random().toString(36).slice(2, 9)}`, C = (t, u) => {
+  let i = t;
+  for (const l of u) {
+    if (i.type !== "split" || l >= i.children.length) return null;
+    i = i.children[l];
+  }
+  return i;
+}, b = (t, u, i) => {
+  if (u.length === 0) return i(t);
+  if (t.type !== "split") return t;
+  const [l, ...o] = u;
+  return {
+    ...t,
+    children: t.children.map(
+      (n, s) => s === l ? b(n, o, i) : n
+    )
+  };
+}, $ = (t, u) => {
+  const i = [], l = (n) => {
+    if (n.type === "panel") return n.id === u ? n : null;
+    for (let s = 0; s < n.children.length; s++) {
+      i.push({ split: n, childIndex: s });
+      const e = l(n.children[s]);
+      if (e) return e;
+      i.pop();
+    }
+    return null;
+  }, o = l(t);
+  return o ? { panel: o, ancestors: [...i] } : null;
+}, O = (t, u, i, l = null, o = 0) => {
+  if (t.type === "panel" && t.id === u)
+    return i(t, l, o);
+  if (t.type === "split") {
+    const n = t.children.map((s, e) => O(s, u, i, t, e)).filter((s) => s !== null);
+    return n.length === 0 ? null : n.length === 1 ? n[0] : { ...t, children: n };
+  }
+  return t;
+}, U = "__move_ghost__", J = (t, u, i, l, o) => {
+  const n = l === "left" || l === "right" ? "horizontal" : "vertical", s = l === "left" || l === "top", e = { ...u, size: 1 }, f = $(t, i);
+  if (!f) return t;
+  const { ancestors: d } = f, p = Math.min(o, d.length), h = (a) => {
+    if (a.type === "split" && a.direction === n) {
+      const z = s ? [e, ...a.children] : [...a.children, e];
+      return { ...a, children: z };
+    }
+    const g = s ? [e, { ...a, size: 1 }] : [{ ...a, size: 1 }, e];
+    return { type: "split", direction: n, size: 1, children: g };
+  };
+  if (p >= d.length)
+    return h(t);
+  if (p === 0) {
+    const a = (g, z = null) => {
+      if (g.type === "panel" && g.id === i) {
+        if (z && z.direction === n) return g;
+        const x = s ? [e, { ...g, size: 1 }] : [{ ...g, size: 1 }, e];
+        return { type: "split", direction: n, size: g.size, children: x };
+      }
+      if (g.type === "split") {
+        const x = g.children.findIndex(
+          (c) => c.type === "panel" && c.id === i
+        );
+        if (x !== -1 && g.direction === n) {
+          const c = [...g.children], r = s ? x : x + 1;
+          return c.splice(r, 0, e), { ...g, children: c };
+        }
+        return {
+          ...g,
+          children: g.children.map((c) => a(c, g))
+        };
+      }
+      return g;
+    };
+    return a(t);
+  }
+  const y = d.length - p, m = y > 0 ? d[y - 1] : null;
+  if (!m)
+    return h(t);
+  const E = m.childIndex, I = d.slice(0, y - 1).map((a) => a.childIndex);
+  return b(t, I, (a) => {
+    if (a.type !== "split") return a;
+    if (a.direction === n) {
+      const x = [...a.children], c = s ? E : E + 1;
+      return x.splice(c, 0, e), { ...a, children: x };
+    }
+    const g = a.children[E], z = s ? [e, { ...g, size: 1 }] : [{ ...g, size: 1 }, e];
+    return {
+      ...a,
+      children: a.children.map(
+        (x, c) => c === E ? { type: "split", direction: n, size: g.size, children: z } : x
+      )
+    };
+  });
+}, F = (t, u, i, l, o) => {
+  if (u === i) return null;
+  let n = null;
+  const s = (h) => {
+    h.type === "panel" && h.id === u ? n = h : h.type === "split" && h.children.forEach(s);
+  };
+  if (s(t), !n) return null;
+  const f = J(t, { type: "panel", id: U, size: 1, component: null }, i, l, o), d = O(f, u, () => null);
+  return d ? O(d, U, () => ({ ...n, size: 1 })) ?? null : null;
+}, et = (t) => {
+  const [u, i] = k(t), l = M(
+    (e, f, d, p) => {
+      i((h) => {
+        const y = C(h, e);
+        if (!y || y.type !== "split" || f < 0 || f >= y.children.length - 1) return h;
+        const m = y.children[f], E = y.children[f + 1], I = m.size + E.size, a = (D) => p && p > 0 ? D / p * I : 0, g = m.minSize !== void 0 ? a(m.minSize) : 0.05, z = m.maxSize !== void 0 ? a(m.maxSize) : I - 0.05, x = E.minSize !== void 0 ? a(E.minSize) : 0.05, c = E.maxSize !== void 0 ? a(E.maxSize) : I - 0.05, r = Math.max(g, I - c), T = Math.min(z, I - x), P = Math.max(r, Math.min(T, m.size + d)), w = I - P;
+        return b(h, e, (D) => D.type !== "split" ? D : {
+          ...D,
+          children: D.children.map((S, L) => L === f ? { ...S, size: P } : L === f + 1 ? { ...S, size: w } : S)
+        });
+      });
+    },
+    []
+  ), o = M(
+    (e, f, d) => {
+      var h;
+      const p = ((h = d == null ? void 0 : d.newPanel) == null ? void 0 : h.id) ?? V();
+      return i((y) => {
+        var a, g;
+        if (!$(y, e))
+          return _(`splitPanel: panel "${e}" not found`), y;
+        const m = {
+          type: "panel",
+          id: p,
+          size: ((a = d == null ? void 0 : d.newPanel) == null ? void 0 : a.size) ?? 0.5,
+          component: ((g = d == null ? void 0 : d.newPanel) == null ? void 0 : g.component) ?? null
+        }, E = O(y, e, (z, x) => x && x.direction === f ? z : {
+          type: "split",
+          direction: f,
+          size: z.size,
+          children: [{ ...z, size: 1 }, { ...m, size: 1 }]
+        }), I = (z) => {
+          if (z.type === "split") {
+            const x = z.children.findIndex(
+              (c) => c.type === "panel" && c.id === e
+            );
+            if (x !== -1 && z.direction === f) {
+              const c = [...z.children];
+              return c.splice(x + 1, 0, m), { ...z, children: c };
+            }
+            return { ...z, children: z.children.map(I) };
+          }
+          return z;
+        };
+        return E === y ? y : E ? I(E) : y;
+      }), p;
+    },
+    []
+  ), n = M((e) => {
+    i((f) => $(f, e) ? O(f, e, () => null) ?? f : (_(`removePanel: panel "${e}" not found`), f));
+  }, []), s = M(
+    (e, f, d, p = 0) => {
+      i((h) => $(h, e) ? $(h, f) ? F(h, e, f, d, p) ?? h : (_(`movePanel: anchor panel "${f}" not found`), h) : (_(`movePanel: source panel "${e}" not found`), h));
+    },
+    []
+  );
+  return { tree: u, setTree: i, resizeBorder: l, splitPanel: o, removePanel: n, movePanel: s };
+}, K = ({ direction: t, onResize: u, className: i, style: l }) => {
+  const o = t === "horizontal", n = A(0), s = A(0), e = A(0), f = M(
+    (p) => {
+      p.preventDefault(), n.current = o ? p.clientX : p.clientY, e.current = 0;
+      const h = (m) => {
+        const E = o ? m.clientX : m.clientY, I = E - n.current;
+        I !== 0 && (n.current = E, e.current += I, s.current || (s.current = requestAnimationFrame(() => {
+          u(e.current), e.current = 0, s.current = 0;
+        })));
+      }, y = () => {
+        s.current && (cancelAnimationFrame(s.current), e.current !== 0 && u(e.current), s.current = 0, e.current = 0), document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", y);
+      };
+      document.addEventListener("mousemove", h), document.addEventListener("mouseup", y);
+    },
+    [o, u]
+  );
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      onMouseDown: f,
+      className: i,
+      style: {
+        flexShrink: 0,
+        ...i ? {} : {
+          width: o ? 4 : "100%",
+          height: o ? "100%" : 4,
+          background: "#e0e0e0",
+          cursor: o ? "col-resize" : "row-resize"
+        },
+        ...l
+      }
+    }
+  );
+}, Q = 0.05, Z = 0.15, v = (t, u, i) => {
+  const l = i.getBoundingClientRect(), o = {
+    left: (t - l.left) / l.width,
+    right: (l.right - t) / l.width,
+    top: (u - l.top) / l.height,
+    bottom: (l.bottom - u) / l.height
+  }, n = Object.keys(o).reduce(
+    (s, e) => o[s] < o[e] ? s : e
+  );
+  return { position: n, dist: o[n] };
+}, W = (t, u, i) => {
+  const l = [];
+  let o = null, n = i.parentElement;
+  for (; n; ) {
+    if (n.hasAttribute("data-tree-root")) {
+      o = n;
+      break;
+    }
+    n.hasAttribute("data-layout-split") && l.push(n), n = n.parentElement;
+  }
+  if (o) {
+    const { position: e, dist: f } = v(t, u, o);
+    if (f < Q)
+      return { position: e, depth: l.length + 1 };
+  }
+  for (let e = l.length - 1; e >= 0; e--) {
+    const { position: f, dist: d } = v(t, u, l[e]);
+    if (d < Z)
+      return { position: f, depth: e + 1 };
+  }
+  const { position: s } = v(t, u, i);
+  return { position: s, depth: 0 };
+}, G = ({
+  node: t,
+  path: u = [],
+  onResizeBorder: i,
+  onMovePanel: l,
+  onDropPreviewChange: o,
+  shadowPanelId: n,
+  isPreviewActive: s,
+  resizerClassName: e,
+  resizerStyle: f,
+  dragHandleSelector: d,
+  shadowClassName: p,
+  shadowStyle: h,
+  panelClassName: y,
+  splitClassName: m
+}) => {
+  const E = A(null), I = A(0), a = A(null), g = M(
+    (c, r) => {
+      if (!i || !E.current) return;
+      const T = E.current.getBoundingClientRect(), P = t.type === "split" ? t.direction === "horizontal" ? T.width : T.height : 0;
+      if (P === 0 || t.type !== "split") return;
+      const w = t.children.reduce((S, L) => S + L.size, 0), D = r / P * w;
+      i(u, c, D, P);
+    },
+    [i, u, t]
+  ), z = M(
+    (c) => {
+      if (!d) return;
+      const T = !!c.target.closest(d);
+      a.current && (a.current.draggable = T);
+    },
+    [d]
+  );
+  if (t.type === "panel") {
+    const c = t.id === n;
+    return /* @__PURE__ */ R(
+      "div",
+      {
+        ref: a,
+        draggable: !d,
+        onMouseDown: z,
+        className: c ? p ?? y : y,
+        onDragStart: (r) => {
+          r.dataTransfer.setData("text/panel-id", t.id), r.dataTransfer.effectAllowed = "move";
+          const T = r.currentTarget.closest("[data-tree-root]");
+          T && (T.dataset.draggingPanelId = t.id);
+        },
+        onDragOver: (r) => {
+          r.preventDefault(), r.dataTransfer.dropEffect = "move";
+          const T = r.clientX, P = r.clientY, w = r.currentTarget, D = w.closest("[data-tree-root]"), S = D == null ? void 0 : D.dataset.draggingPanelId;
+          !S || S === t.id || I.current || (I.current = requestAnimationFrame(() => {
+            I.current = 0;
+            const { position: L, depth: j } = W(T, P, w);
+            o == null || o({ sourcePanelId: S, anchorPanelId: t.id, position: L, depth: j });
+          }));
+        },
+        onDrop: (r) => {
+          if (r.preventDefault(), s) return;
+          r.stopPropagation(), o == null || o(null);
+          const T = r.dataTransfer.getData("text/panel-id");
+          if (!T || T === t.id || !l) return;
+          const { position: P, depth: w } = W(r.clientX, r.clientY, r.currentTarget);
+          l(T, t.id, P, w);
+        },
+        style: {
+          flex: t.size,
+          minWidth: 0,
+          minHeight: 0,
+          overflow: "hidden",
+          ...c ? p ? h : {
+            opacity: 0.5,
+            outline: "2px dashed rgba(59, 130, 246, 0.6)",
+            outlineOffset: -2,
+            ...h
+          } : void 0
+        },
+        children: t.component
+      }
+    );
+  }
+  const x = [];
+  return t.children.forEach((c, r) => {
+    x.push(
+      /* @__PURE__ */ R(
+        G,
+        {
+          node: c,
+          path: [...u, r],
+          onResizeBorder: i,
+          onMovePanel: l,
+          onDropPreviewChange: o,
+          shadowPanelId: n,
+          isPreviewActive: s,
+          resizerClassName: e,
+          resizerStyle: f,
+          dragHandleSelector: d,
+          shadowClassName: p,
+          shadowStyle: h,
+          panelClassName: y,
+          splitClassName: m
+        },
+        c.type === "panel" ? c.id : `split-${r}`
+      )
+    ), r < t.children.length - 1 && x.push(
+      /* @__PURE__ */ R(
+        K,
+        {
+          direction: t.direction,
+          onResize: (T) => g(r, T),
+          className: e,
+          style: f
+        },
+        `resizer-${r}`
+      )
+    );
+  }), /* @__PURE__ */ R(
+    "div",
+    {
+      ref: E,
+      "data-layout-split": !0,
+      className: m,
+      style: {
+        display: "flex",
+        flexDirection: t.direction === "horizontal" ? "row" : "column",
+        flex: t.size,
+        minWidth: 0,
+        minHeight: 0
+      },
+      children: x
+    }
+  );
+}, q = (t, u = []) => (t.type === "panel" ? u.push(t.id) : t.children.forEach((i) => q(i, u)), u), nt = ({ tree: t, onResizeBorder: u, onMovePanel: i, className: l, style: o, resizerClassName: n, resizerStyle: s, dragHandleSelector: e, shadowClassName: f, shadowStyle: d, classNames: p }) => {
+  const h = A(null), y = X();
+  Y(() => {
+    const c = q(t), r = /* @__PURE__ */ new Set();
+    c.forEach((T) => {
+      r.has(T) && _(`Duplicate panel id detected: "${T}". Panel ids must be unique.`), r.add(T);
+    });
+  }, [t]);
+  const [m, E] = k(null), I = A(null), a = A(null), g = M((c) => {
+    const r = I.current;
+    !c && !r || c && r && r.sourcePanelId === c.sourcePanelId && r.anchorPanelId === c.anchorPanelId && r.position === c.position && r.depth === c.depth || (I.current = c, a.current = c, E(c));
+  }, []), z = M(() => {
+    I.current = null, a.current = null, E(null), h.current && delete h.current.dataset.draggingPanelId;
+  }, [y]), x = B(() => m ? F(
+    t,
+    m.sourcePanelId,
+    m.anchorPanelId,
+    m.position,
+    m.depth
+  ) : null, [t, m]);
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      ref: h,
+      "data-tree-root": y,
+      className: l,
+      style: { display: "flex", width: "100%", height: "100%", ...o },
+      onDrop: (c) => {
+        c.preventDefault();
+        const r = a.current;
+        r && i && i(r.sourcePanelId, r.anchorPanelId, r.position, r.depth), z();
+      },
+      onDragEnd: () => z(),
+      onDragLeave: (c) => {
+        const r = h.current;
+        if (!r) return;
+        const T = c.relatedTarget;
+        (!T || !r.contains(T)) && z();
+      },
+      children: /* @__PURE__ */ R(
+        G,
+        {
+          node: x ?? t,
+          onResizeBorder: u,
+          onMovePanel: i,
+          onDropPreviewChange: g,
+          shadowPanelId: m == null ? void 0 : m.sourcePanelId,
+          isPreviewActive: !!x,
+          resizerClassName: (p == null ? void 0 : p.resizer) ?? n,
+          resizerStyle: s,
+          dragHandleSelector: e,
+          shadowClassName: f,
+          shadowStyle: d,
+          panelClassName: p == null ? void 0 : p.panel,
+          splitClassName: p == null ? void 0 : p.split
+        }
+      )
+    }
+  );
+};
+export {
+  nt as TreeLayout,
+  et as useLayoutTree
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@dannysir/floating-components",
+  "version": "0.1.0",
+  "description": "VS Code-style tree-based panel layout for React",
+  "license": "ISC",
+  "author": "dannysir",
+  "keywords": [
+    "react",
+    "layout",
+    "panel",
+    "split",
+    "resize",
+    "drag-drop",
+    "tree"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dannysir/floating-component.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dannysir/floating-component/issues"
+  },
+  "homepage": "https://github.com/dannysir/floating-component#readme",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "README.ko.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.3.0",
+    "vite-plugin-dts": "^4.5.0"
+  }
+}