react-tree-node-view 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2026 Hossein Najafi
+
+Website: https://hosseinajafi.com/
+
+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.md

@@ -1,3 +1,278 @@
-# Temporary Holding Version
+# react-tree-node-view
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<div align="center">
+
+![React](https://img.shields.io/badge/React-%3E%3D18.2.0-61dafb?style=flat-square&logo=react&logoColor=20232a)
+![TypeScript](https://img.shields.io/badge/TypeScript-first-3178c6?style=flat-square&logo=typescript&logoColor=white)
+![NPM Version](https://img.shields.io/npm/v/react-tree-node-view?style=flat-square&logo=npm&color=cb3837)
+![Monthly Downloads](https://img.shields.io/npm/dm/react-tree-node-view?style=flat-square&logo=npm&color=blue)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/react-tree-node-view?style=flat-square&color=10b981)
+
+</div>
+
+A lightweight, dependency-free React tree view with selection, inline editing, drag-and-drop, and node management.
+
+<div align="center">
+  <img src="./images/react-tree-node-view-demo.gif" alt="React Tree Node Demo" width="100%" />
+</div>
+
+## Installation
+
+```bash
+npm install react-tree-node-view
+```
+
+The component imports its scoped stylesheet automatically. You can also import it explicitly when your bundler handles CSS entry points:
+
+```tsx
+import "react-tree-node-view/styles.css";
+```
+
+## Quick start
+
+```tsx
+import { useState } from "react";
+import { TreeView, type TreeNode } from "react-tree-node-view";
+
+const initialItems: TreeNode[] = [
+  {
+    key: "products",
+    title: "Products",
+    children: [{ key: "books", title: "Books" }],
+  },
+];
+
+export default function Example() {
+  const [items, setItems] = useState(initialItems);
+
+  return (
+    <TreeView 
+      items={items}
+      onChange={setItems}
+    />
+  );
+}
+```
+
+Click an editable title to rename it. Press Enter or move focus away to save; press Escape to cancel. Drag rows before, inside, or after another row to reorder them.
+
+## Preview
+
+### Light & Dark Themes
+
+<p align="center">
+  <img src="./images/Light.png" alt="Light Theme" width="49%" />
+  <img src="./images/Dark.png" alt="Dark Theme" width="49%" />
+</p>
+
+### Custom Colors
+
+Use the `defaultColor` prop to customize the primary color across the entire component.
+
+```tsx
+export default function CustomColorExample() {
+  return (
+    <TreeView
+      defaultItems={categories}
+      defaultColor="#8b5cf6"
+      theme="light"
+    />
+  );
+}
+```
+
+<p align="center">
+  <img src="./images/Light-color.png" alt="Light Theme with Custom Color" width="49%" />
+  <img src="./images/Dark-color.png" alt="Dark Theme with Custom Color" width="49%" />
+</p>
+
+The `defaultColor` prop customizes the primary color throughout the tree view, including buttons, icons, active states, hover effects, and focus indicators. It works with both light and dark themes.
+
+## Selectable mode
+
+Set `type="selectable"` to enable checkbox-based node selection.
+
+```tsx
+<TreeView
+  type="selectable"
+  defaultItems={initialItems}
+  defaultChecked={[{ _id: "books", title: "Books" }]}
+  onCheckedChange={(checked) => console.log(checked)}
+/>
+```
+
+Selecting a child also includes its ancestors, matching the serialized `TreeItem[]` format used by the component.
+
+<p align="center">
+  <img src="./images/selectable.png" alt="Selectable Tree View" width="75%" />
+</p>
+
+## Custom icons and labels
+
+Every built-in icon can be replaced with a `ReactNode`. Omitted icons continue to use the package's inline SVG defaults.
+
+```tsx
+import { TreeView, type TreeViewIcons } from "react-tree-node-view";
+
+const icons: TreeViewIcons = {
+  folder: <span aria-hidden="true">📁</span>,
+  openFolder: <span aria-hidden="true">📂</span>,
+  add: <span aria-hidden="true">＋</span>,
+  delete: <span aria-hidden="true">×</span>,
+};
+
+<TreeView
+  defaultItems={initialItems}
+  icons={icons}
+  labels={{
+    addCategory: "Create category",
+    defaultCategoryTitle: "Untitled category",
+    before: "Above",
+  }}
+  direction="ltr"
+/>
+```
+
+The `labels` prop allows you to customize individual text labels. English defaults are used for any omitted labels. Dynamic accessibility labels also support the `{title}` placeholder, for example `addChild: "Add {title} below"`.
+
+The `direction` prop supports both `ltr` and `rtl` layouts, controlling indentation, text alignment, icon placement, actions, and drop indicators.
+
+## Drop indicator colors
+
+Customize the colors of drag-and-drop indicators using the `dropIndicatorColors` prop. It accepts an object with three optional properties:
+
+- `before`: The color displayed when dropping a category above another category.
+- `inside`: The color displayed when dropping a category inside another category.
+- `after`: The color displayed when dropping a category below another category.
+
+```tsx
+<TreeView
+  defaultItems={initialItems}
+  dropIndicatorColors={{
+    before: "#0ea5e9",
+    inside: "#f59e0b",
+    after: "#22c55e",
+  }}
+/>
+
+Each color can be customized independently. Omitted values fall back to the package's default colors.
+```
+
+## API
+
+All `TreeView` props are optional. When `items` or `checkedItems` is provided, that value is controlled; otherwise the corresponding `defaultItems` or `defaultChecked` value initializes internal state.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `items` | `TreeNode[]` | Optional controlled tree data. If omitted, the component uses `defaultItems` and internal state. |
+| `defaultItems` | `TreeNode[]` | Optional initial data for an uncontrolled tree. Defaults to `[]`. |
+| `type` | `"editable" \| "selectable"` | Enables editing and drag actions or checkboxes. Defaults to `"editable"`. |
+| `onChange` | `(items: TreeNode[]) => void` | Optional callback called after tree data changes. |
+| `defaultChecked` | `TreeItem[]` | Optional initial checked items in selectable mode. Defaults to `[]`. |
+| `checkedItems` | `TreeItem[]` | Optional controlled checked items. If omitted, checked state is managed internally. |
+| `onCheckedChange` | `(items: TreeItem[]) => void` | Optional callback called after selection changes. |
+| `onTitleChange` | `(node, title) => void` | Optional callback called after an inline title edit. |
+| `onDelete` | `(node) => void` | Optional callback called after a node is removed. |
+| `height` | `number` | Optional maximum tree height in pixels. Applied as the shell's `max-height`; overflow is scrollable when needed. |
+| `className` | `string` | Optional class name applied to the component root. |
+| `defaultColor` | `string` | Optional CSS color used as the primary color in both themes, including the Add Category button, icons, active states, hover states, and focus indicators. |
+| `theme` | `"light" \| "dark"` | Complete component theme. Defaults to `"light"`. |
+| `direction` | `"ltr" \| "rtl"` | Layout direction. Defaults to `"ltr"`; use `"rtl"` for right-to-left layouts. |
+| `icons` | `TreeViewIcons` | Optional ReactNode replacements for `expand`, `collapse`, `dragHandle`, `folder`, `openFolder`, `add`, `delete`, `check`, and `empty`. Defaults to inline SVG icons for omitted entries. |
+| `labels` | `Partial<TreeViewLabels>` | Optional partial overrides for action text, tooltips, accessibility labels, default titles, drag guide labels, loading text, and empty-state text. Defaults to English labels. |
+| `dropIndicatorColors` | `Partial<TreeViewDropIndicatorColors>` | Optional partial customization of `before`, `inside`, and `after` drop colors in rows and the guide legend. Defaults to blue `#3b82f6`, amber `#f59e0b`, and green `#10b981`. |
+| `loading` | `boolean` | Shows the loading skeleton when `true`. Defaults to `false`. |
+| `emptyMessage` | `ReactNode` | Optional replacement for the default `"No categories found"` message when there are no nodes. |
+| `disabled` | `boolean` | Disables editing, selection, and drag actions when `true`. Defaults to `false`. |
+
+## Checked items
+
+Use the `checkedItems` prop to control the selected items externally. When provided, the checked state is controlled by the parent component. Otherwise, the component manages the checked state internally.
+
+```tsx
+const [checkedItems, setCheckedItems] = useState<TreeItem[]>([]);
+
+<TreeView
+  defaultItems={initialItems}
+  checkedItems={checkedItems}
+  onCheckedChange={setCheckedItems}
+/>
+```
+
+## Selection change callback
+
+Use `onCheckedChange` to receive the updated list of checked items whenever the selection changes.
+
+```tsx
+<TreeView
+  defaultItems={initialItems}
+  onCheckedChange={(items) => {
+    console.log("Selected items:", items);
+  }}
+/>
+```
+
+## Title change callback
+
+Use `onTitleChange` to track inline title edits. It receives the updated node and its new title.
+
+```tsx
+<TreeView
+  defaultItems={initialItems}
+  onTitleChange={(node, title) => {
+    console.log("Updated node:", node);
+    console.log("New title:", title);
+  }}
+/>
+```
+
+## Delete callback
+
+Use `onDelete` to be notified whenever a category is deleted. It receives the deleted node.
+
+```tsx
+<TreeView
+  defaultItems={initialItems}
+  onDelete={(node) => {
+    console.log("Deleted category:", node);
+  }}
+/>
+```
+
+## Loading state
+
+Set `loading` to `true` to display the built-in loading skeleton while your categories are being loaded. It defaults to `false`.
+
+```tsx
+<TreeView
+  defaultItems={initialItems}
+  loading={isLoading}
+/>
+```
+
+## Empty state message
+
+Use `emptyMessage` to customize the content displayed when there are no categories. It accepts any `ReactNode`, so you can provide text, icons, or custom components. The default message is `"No categories found"`.
+
+```tsx
+<TreeView
+  defaultItems={[]}
+  emptyMessage={
+    <div>
+      <span>No categories yet.</span>
+      <button onClick={() => console.log("Add category")}>
+        Create your first category
+      </button>
+    </div>
+  }
+/>
+```
+
+## Development
+
+```bash
+npm install
+npm run typecheck
+npm run build
+npm run pack:check
+```

package/dist/TreeView.d.ts

@@ -0,0 +1,78 @@
+import "./styles.css";
+import { type ReactNode } from "react";
+export type TreeNode = {
+    key: string;
+    title: string;
+    children?: TreeNode[];
+    image?: string;
+    imagePath?: string;
+};
+export type TreeItem = {
+    _id: string;
+    title: string;
+};
+export type TreeViewMode = "editable" | "selectable";
+export type TreeViewDirection = "ltr" | "rtl";
+export type TreeViewTheme = "light" | "dark";
+export type TreeViewLabels = {
+    addCategory: string;
+    addChild: string;
+    delete: string;
+    expand: string;
+    collapse: string;
+    select: string;
+    edit: string;
+    dragHandle: string;
+    loading: string;
+    empty: string;
+    dragAndDropGuide: string;
+    before: string;
+    inside: string;
+    after: string;
+    defaultCategoryTitle: string;
+};
+export type TreeViewIcons = {
+    expand?: ReactNode;
+    collapse?: ReactNode;
+    dragHandle?: ReactNode;
+    folder?: ReactNode;
+    openFolder?: ReactNode;
+    add?: ReactNode;
+    delete?: ReactNode;
+    check?: ReactNode;
+    empty?: ReactNode;
+};
+export type TreeViewDropIndicatorColors = {
+    before: string;
+    inside: string;
+    after: string;
+};
+export type TreeViewProps = {
+    /** Controlled tree data. Use `defaultItems` for an uncontrolled tree. */
+    items?: TreeNode[];
+    /** Initial tree data for an uncontrolled tree. */
+    defaultItems?: TreeNode[];
+    /** Editable trees support add, delete, inline rename, and drag-and-drop. */
+    type?: TreeViewMode;
+    defaultChecked?: TreeItem[];
+    checkedItems?: TreeItem[];
+    onChange?: (items: TreeNode[]) => void;
+    onCheckedChange?: (items: TreeItem[]) => void;
+    onTitleChange?: (node: TreeNode, title: string) => void;
+    onDelete?: (node: TreeNode) => void;
+    height?: number;
+    className?: string;
+    /** CSS color used as the primary color in both themes. */
+    defaultColor?: string;
+    /** Visual theme for the complete tree view. Defaults to light. */
+    theme?: TreeViewTheme;
+    direction?: TreeViewDirection;
+    icons?: TreeViewIcons;
+    labels?: Partial<TreeViewLabels>;
+    dropIndicatorColors?: Partial<TreeViewDropIndicatorColors>;
+    loading?: boolean;
+    emptyMessage?: ReactNode;
+    disabled?: boolean;
+};
+export declare function TreeView({ items, defaultItems, type, defaultChecked, checkedItems, onChange, onCheckedChange, onTitleChange, onDelete, height, className, defaultColor, theme, direction, icons, labels, dropIndicatorColors, loading, emptyMessage, disabled, }: TreeViewProps): import("react").JSX.Element;
+export default TreeView;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default, TreeView } from "./TreeView";
+export type { TreeItem, TreeNode, TreeViewDirection, TreeViewDropIndicatorColors, TreeViewIcons, TreeViewLabels, TreeViewMode, TreeViewProps, TreeViewTheme, } from "./TreeView";

package/dist/react-tree-node-view.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),d=require("react"),Ne=typeof window>"u"?d.useEffect:d.useLayoutEffect,He={addCategory:"Add category",addChild:"Add child to {title}",delete:"Delete {title}",expand:"Expand category",collapse:"Collapse category",select:"Select {title}",edit:"Edit {title}",dragHandle:"Drag to reorder",loading:"Loading categories",empty:"No categories found",dragAndDropGuide:"Drag and drop guide",before:"Before",inside:"Inside",after:"After",defaultCategoryTitle:"New category"},$e={before:"#3b82f6",inside:"#f59e0b",after:"#10b981"};function K(e,s){return s===void 0?e:e.replace(/\{title\}/g,s)}const Be=180,ye={duration:Be,easing:"cubic-bezier(0.2, 0.7, 0.2, 1)",fill:"forwards"};function pe(e){const s=Number.parseFloat(e);return Number.isFinite(s)?s:0}function be(e){const s=e.style.height,i=e.style.overflow,o=e.firstElementChild;e.style.height="auto",e.style.overflow="visible",e.getBoundingClientRect();const u=getComputedStyle(e),l=o?getComputedStyle(o):void 0,h=pe(u.paddingBlockStart)+pe(u.paddingBlockEnd),$=o instanceof HTMLElement?o.getBoundingClientRect().height:0,B=l?pe(l.marginBlockStart)+pe(l.marginBlockEnd):0,z=e.getBoundingClientRect().height,O=Math.max(e.scrollHeight,z,$+B,h);return e.style.height=s,e.style.overflow=i,Math.ceil(O)}function Ae(){const[e,s]=d.useState(!1);return d.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;const i=window.matchMedia("(prefers-reduced-motion: reduce)"),o=()=>s(i.matches);return o(),i.addEventListener?i.addEventListener("change",o):i.addListener(o),()=>{i.removeEventListener?i.removeEventListener("change",o):i.removeListener(o)}},[]),e}function F({children:e,size:s=16,className:i,label:o}){return r.jsx("svg",{"aria-hidden":o?void 0:!0,"aria-label":o,className:i,fill:"none",height:s,role:o?"img":void 0,viewBox:"0 0 24 24",width:s,xmlns:"http://www.w3.org/2000/svg",children:e})}function T({children:e,className:s}){return r.jsx("span",{className:`treeview-icon${s?` ${s}`:""}`,children:e})}function Se({direction:e,...s}){const i=e==="down"?"m6 9 6 6 6-6":e==="left"?"m14 6-6 6 6 6":"m10 6 6 6-6 6";return r.jsx(F,{...s,children:r.jsx("path",{d:i,stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})})}function Re(e){return r.jsx(F,{...e,children:r.jsx("path",{d:"M12 5v14M5 12h14",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"2"})})}function Pe(e){return r.jsx(F,{...e,children:r.jsx("path",{d:"M5 7h14M10 11v6M14 11v6M9 7V5h6v2m-9 0 1 13h10l1-13",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.8"})})}function Te(e){return r.jsx(F,{...e,children:r.jsx("path",{d:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"3"})})}function ze(e){return r.jsx(F,{...e,children:r.jsx("path",{d:"m5 12 4 4L19 6",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})})}function Ce({open:e,...s}){return r.jsxs(F,{...s,children:[r.jsx("path",{d:"M3.5 7.5h6l1.6 2H20a1 1 0 0 1 1 1v7.2a1.8 1.8 0 0 1-1.8 1.8H4.8A1.8 1.8 0 0 1 3 17.7V8.2a.7.7 0 0 1 .5-.7Z",fill:e?"currentColor":"none",opacity:e?.2:1,stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"1.7"}),e&&r.jsx("path",{d:"M4 10h16.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.7"})]})}function Oe(e){return r.jsxs(F,{...e,children:[r.jsx("path",{d:"M3.5 7.5h6l1.6 2H20a1 1 0 0 1 1 1v7.2a1.8 1.8 0 0 1-1.8 1.8H4.8A1.8 1.8 0 0 1 3 17.7V8.2a.7.7 0 0 1 .5-.7Z",fill:"currentColor",opacity:".12",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"1.7"}),r.jsx("path",{d:"M7 14h10",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.7"})]})}function Ee(){var e,s;return((s=(e=globalThis.crypto)==null?void 0:e.randomUUID)==null?void 0:s.call(e))??`tree-node-${Date.now()}-${Math.random().toString(36).slice(2)}`}function X(e,s){for(const i of e){if(i.key===s)return i;const o=i.children?X(i.children,s):void 0;if(o)return o}}function me(e,s){var i;return!!((i=e.children)!=null&&i.some(o=>o.key===s||me(o,s)))}function we(e,s,i){return e.map(o=>o.key===s?i(o):o.children?{...o,children:we(o.children,s,i)}:o)}function je(e,s){let i;const o=[];for(const u of e){if(u.key===s){i=u;continue}if(u.children){const[l,h]=je(u.children,s);h&&(i=h),o.push({...u,children:l})}else o.push(u)}return[o,i]}function Me(e,s,i=[]){for(const o of e){if(o.key===s)return i;const u=o.children?Me(o.children,s,[...i,o.key]):[];if(u.length)return u}return[]}function ke(e,s=new Set){return e.forEach(i=>{var o;(o=i.children)!=null&&o.length&&(s.add(i.key),ke(i.children,s))}),s}function De(e,s,i,o){const u=[];for(const l of e){if(l.key===s){o==="before"&&u.push(i,l),o==="inside"&&u.push({...l,children:[...l.children??[],i]}),o==="after"&&u.push(l,i);continue}u.push(l.children?{...l,children:De(l.children,s,i,o)}:l)}return u}function Le({node:e,level:s,mode:i,direction:o,prefersReducedMotion:u,icons:l,labels:h,checkedItems:$,expandedKeys:B,editingKey:z,editValue:O,draggedKey:Y,dragOverKey:ee,dragPosition:G,disabled:j,onToggle:te,onCheck:re,onStartEdit:ne,onEditChange:ie,onCommitEdit:y,onCancelEdit:se,onDragStart:oe,onDragEnd:ce,onAddChild:ae,onDeleteNode:p,onDragOver:D,onDragLeave:le,onDrop:x}){var he,fe,ge;const m=!!((he=e.children)!=null&&he.length),f=m&&B.has(e.key),[k,N]=d.useState(()=>m&&f),[A,L]=d.useState(()=>f?"open":"closing"),b=d.useRef(k),S=d.useRef(!0),q=d.useRef(null),g=d.useRef(null),R=d.useRef(0),U=d.useRef(f),W=d.useRef(!1),I=d.useRef(0),H=z===e.key,de=$.some(t=>t._id===e.key),ve=ee===e.key,J=d.useRef(null);d.useEffect(()=>{var t,C;H&&((t=J.current)==null||t.focus(),(C=J.current)==null||C.select())},[H]),Ne(()=>{var a;const t=q.current;if(S.current){S.current=!1,U.current=f,t&&m&&f&&(t.style.height="",t.style.overflow="",L("open"));return}const C=U.current!==f;if(U.current=f,m&&f&&!b.current){W.current=!0,b.current=!0,N(!0);return}if(!m){(a=g.current)==null||a.cancel(),g.current=null,R.current+=1,W.current=!1,t&&(t.style.height="",t.style.overflow=""),b.current=!1,k&&N(!1);return}if(!t)return;const Q=f&&(C||W.current);if(W.current=!1,!Q&&!C)return;const M=g.current,P=t.getBoundingClientRect().height;M==null||M.cancel(),g.current=null;const _=++R.current,V=()=>{t.style.height="",t.style.overflow=""};if(u||typeof t.animate!="function"){V(),f?L("open"):(b.current=!1,N(!1));return}t.style.overflow="hidden";const n=f&&!M?0:P;if(t.style.height=`${n}px`,t.getBoundingClientRect(),f){const v=be(t);I.current=v,L("opening");const w=t.animate([{height:`${n}px`},{height:`${v}px`}],ye);g.current=w,w.finished.then(()=>{_!==R.current||g.current!==w||(g.current=null,w.cancel(),V(),L("open"))}).catch(()=>{});return}L("closing");const c=t.animate([{height:`${P}px`},{height:"0px"}],ye);g.current=c,c.finished.then(()=>{_!==R.current||g.current!==c||(g.current=null,c.cancel(),V(),b.current=!1,N(!1))}).catch(()=>{})},[k,m,f,u]),Ne(()=>{const t=q.current,C=t==null?void 0:t.firstElementChild;if(!t||!C||typeof ResizeObserver>"u")return;const Q=new ResizeObserver(()=>{if(A!=="opening"||!f)return;const M=g.current;if(!M)return;const P=be(t);if(Math.abs(P-I.current)<1)return;const _=t.getBoundingClientRect().height;M.cancel(),g.current=null;const V=++R.current;t.style.overflow="hidden",t.style.height=`${_}px`,t.getBoundingClientRect(),I.current=P;const n=t.animate([{height:`${_}px`},{height:`${P}px`}],ye);g.current=n,n.finished.then(()=>{V!==R.current||g.current!==n||(g.current=null,n.cancel(),t.style.height="",t.style.overflow="",L("open"))}).catch(()=>{})});return Q.observe(C),()=>Q.disconnect()},[A,k,f]),d.useEffect(()=>()=>{var t;R.current+=1,(t=g.current)==null||t.cancel(),g.current=null},[]);const Z=t=>t.stopPropagation(),ue=k&&A==="open"&&f;return r.jsxs("div",{className:"treeview-node",children:[r.jsxs("div",{className:`treeview-row${Y===e.key?" is-dragging":""}${ve&&G?` is-drag-${G}`:""}`,draggable:i==="editable"&&!j&&!H,onDragStart:t=>oe(t,e.key),onDragEnd:ce,onDragOver:t=>D(t,e.key),onDragLeave:le,onDrop:t=>x(t,e.key),style:{paddingInlineStart:`calc(${s} * var(--treeview-indent) + 0.5rem)`},children:[m?r.jsx("button",{"aria-label":f?h.collapse:h.expand,className:"treeview-expander",disabled:j,onClick:t=>{t.stopPropagation(),te(e.key)},title:f?h.collapse:h.expand,type:"button",children:r.jsx(T,{children:f?l.collapse??r.jsx(Se,{direction:"down",size:14}):l.expand??r.jsx(Se,{direction:o==="rtl"?"left":"right",size:14})})}):r.jsx("span",{className:"treeview-expander-spacer"}),i==="editable"&&r.jsx("span",{"aria-label":h.dragHandle,className:"treeview-drag-handle",title:h.dragHandle,children:r.jsx(T,{children:l.dragHandle??r.jsx(Te,{size:16})})}),i==="selectable"&&r.jsxs("label",{className:"treeview-checkbox-wrap",onClick:Z,children:[r.jsx("input",{"aria-label":K(h.select,e.title),checked:de,className:"treeview-checkbox",disabled:j,onChange:t=>re(e,t.target.checked),type:"checkbox"}),r.jsx("span",{"aria-hidden":"true",className:"treeview-checkmark",children:r.jsx(T,{children:l.check??r.jsx(ze,{size:12})})})]}),r.jsx("span",{"aria-hidden":"true",className:`treeview-folder${f?" is-open":""}`,children:r.jsx(T,{children:f?l.openFolder??r.jsx(Ce,{open:!0,size:18}):l.folder??r.jsx(Ce,{open:!1,size:18})})}),H?r.jsx("input",{"aria-label":K(h.edit,e.title),className:"treeview-title-input",disabled:j,onBlur:y,onChange:t=>ie(t.target.value),onClick:Z,onKeyDown:t=>{t.key==="Enter"&&y(),t.key==="Escape"&&se()},ref:J,value:O}):r.jsx("button",{"aria-label":i==="editable"?K(h.edit,e.title):e.title,className:`treeview-title${i==="editable"?" is-editable":""}`,disabled:j,onClick:t=>{t.stopPropagation(),i==="editable"&&ne(e)},type:"button",children:e.title}),i==="editable"&&r.jsxs("div",{className:"treeview-actions",children:[r.jsx("button",{"aria-label":K(h.addChild,e.title),className:"treeview-action treeview-action-add",disabled:j,onClick:t=>{t.stopPropagation(),ae(e)},onMouseDown:Z,title:K(h.addChild,e.title),type:"button",children:r.jsx(T,{children:l.add??r.jsx(Re,{size:13})})}),r.jsx("button",{"aria-label":K(h.delete,e.title),className:"treeview-action treeview-action-delete",disabled:j,onClick:t=>{t.stopPropagation(),p(e)},onMouseDown:Z,title:K(h.delete,e.title),type:"button",children:r.jsx(T,{children:l.delete??r.jsx(Pe,{size:13})})})]}),m&&r.jsx("span",{className:"treeview-child-count",children:(fe=e.children)==null?void 0:fe.length})]}),m&&k&&r.jsx("div",{"aria-hidden":ue?void 0:!0,className:"treeview-children",ref:t=>{q.current=t,t==null||t.toggleAttribute("inert",!ue)},children:r.jsx("div",{className:"treeview-children-content",children:(ge=e.children)==null?void 0:ge.map(t=>r.jsx(Le,{node:t,level:s+1,mode:i,direction:o,prefersReducedMotion:u,icons:l,labels:h,checkedItems:$,expandedKeys:B,editingKey:z,editValue:O,draggedKey:Y,dragOverKey:ee,dragPosition:G,disabled:j,onToggle:te,onCheck:re,onStartEdit:ne,onEditChange:ie,onCommitEdit:y,onCancelEdit:se,onDragStart:oe,onDragEnd:ce,onAddChild:ae,onDeleteNode:p,onDragOver:D,onDragLeave:le,onDrop:x},t.key))})})]})}function Ie({items:e,defaultItems:s=[],type:i="editable",defaultChecked:o=[],checkedItems:u,onChange:l,onCheckedChange:h,onTitleChange:$,onDelete:B,height:z,className:O,defaultColor:Y,theme:ee="light",direction:G="ltr",icons:j={},labels:te={},dropIndicatorColors:re={},loading:ne=!1,emptyMessage:ie,disabled:y=!1}){const[se,oe]=d.useState(s),[ce,ae]=d.useState(o),p=e??se,D=u??ce,le=Ae(),x={...He,...te},m={...$e,...re},[f,k]=d.useState(()=>ke(p)),[N,A]=d.useState(null),[L,b]=d.useState(""),[S,q]=d.useState(null),[g,R]=d.useState(null),[U,W]=d.useState(null),I=n=>{e===void 0&&oe(n),de(n),l==null||l(n)},H=n=>{u===void 0&&ae(n),h==null||h(n)},de=n=>{const c=ke(n);k(a=>{let v=!1;const w=new Set;return a.forEach(E=>{c.has(E)?w.add(E):v=!0}),v?w:a})};d.useEffect(()=>{de(p)},[p]);const ve=n=>k(c=>{const a=new Set(c);return a.has(n)?a.delete(n):a.add(n),a}),J=n=>{if(y)return;const c={key:Ee(),title:x.defaultCategoryTitle,children:[]};I(we(p,n.key,a=>({...a,children:[...a.children??[],c]}))),k(a=>new Set(a).add(n.key))},Z=()=>{y||I([...p,{key:Ee(),title:x.defaultCategoryTitle,children:[]}])},ue=n=>{!y&&i==="editable"&&(A(n.key),b(n.title))},he=()=>{if(!N)return;const n=X(p,N);if(!n)return;const c=L.trim()||n.title;if(c!==n.title){const a={...n,title:c};I(we(p,N,v=>({...v,title:c}))),H(D.map(v=>v._id===N?{...v,title:c}:v)),$==null||$(a,c)}A(null),b("")},fe=n=>{if(y)return;const[c]=je(p,n.key);I(c),H(D.filter(a=>a._id!==n.key)),B==null||B(n),N===n.key&&(A(null),b(""))},ge=(n,c)=>{const a=Me(p,n.key);if(c){const v=new Set(D.map(E=>E._id)),w=[...a,n.key].filter(E=>!v.has(E)).map(E=>{const xe=X(p,E);return{_id:E,title:(xe==null?void 0:xe.title)??""}});H([...D,...w])}else{const v=new Set([...a,n.key]);H(D.filter(w=>!v.has(w._id)))}},t=()=>{R(null),W(null)},C=()=>{q(null),t()},Q=(n,c)=>{y||i!=="editable"||(q(c),n.dataTransfer.effectAllowed="move",n.dataTransfer.setData("text/plain",c),t())},M=n=>{const c=n.currentTarget.getBoundingClientRect(),a=n.clientY-c.top;return a<c.height*.3?"before":a>c.height*.7?"after":"inside"},P=(n,c)=>{if(y||i!=="editable"||!S)return;if(S===c){t();return}const a=X(p,S);if(!a||me(a,c)){t();return}n.preventDefault(),n.stopPropagation(),R(c),W(M(n))},_=(n,c)=>{n.preventDefault(),n.stopPropagation();try{if(y||i!=="editable"||!S||S===c)return;const a=X(p,S),v=U??M(n);if(!a||me(a,c))return;const[w]=je(p,S);I(De(w,c,a,v)),v==="inside"&&k(E=>new Set(E).add(c))}finally{C()}},V={"--treeview-drop-before":m.before,"--treeview-drop-inside":m.inside,"--treeview-drop-after":m.after,...Y===void 0?{}:{"--treeview-primary":Y}};return r.jsxs("div",{className:`treeview-root${O?` ${O}`:""}`,"data-disabled":y||void 0,"data-theme":ee,dir:G,style:V,children:[i==="editable"&&r.jsxs("div",{className:"treeview-toolbar",children:[r.jsxs("button",{"aria-label":x.addCategory,className:"treeview-add-root",disabled:y,onClick:Z,title:x.addCategory,type:"button",children:[r.jsx(T,{children:j.add??r.jsx(Re,{size:16})})," ",x.addCategory]}),r.jsxs("div",{className:"treeview-guide","aria-label":x.dragAndDropGuide,children:[r.jsxs("span",{children:[r.jsx("i",{className:"treeview-guide-dot is-before"}),x.before]}),r.jsxs("span",{children:[r.jsx("i",{className:"treeview-guide-dot is-inside"}),x.inside]}),r.jsxs("span",{children:[r.jsx("i",{className:"treeview-guide-dot is-after"}),x.after]})]})]}),r.jsx("div",{className:"treeview-shell",style:z===void 0?void 0:{maxHeight:z},children:ne?r.jsx("div",{className:"treeview-loading","aria-busy":"true","aria-label":x.loading,children:Array.from({length:6},(n,c)=>r.jsx("div",{className:"treeview-skeleton-row"},c))}):p.length===0?r.jsxs("div",{className:"treeview-empty",children:[r.jsx("span",{className:"treeview-empty-icon",children:r.jsx(T,{children:j.empty??r.jsx(Oe,{size:38})})}),r.jsx("p",{children:ie??x.empty})]}):r.jsx("div",{className:"treeview-list",children:p.map(n=>r.jsx(Le,{node:n,level:0,mode:i,direction:G,prefersReducedMotion:le,icons:j,labels:x,checkedItems:D,expandedKeys:f,editingKey:N,editValue:L,draggedKey:S,dragOverKey:g,dragPosition:U,disabled:y,onToggle:ve,onCheck:ge,onStartEdit:ue,onEditChange:b,onCommitEdit:he,onCancelEdit:()=>{A(null),b("")},onDragStart:Q,onDragEnd:C,onAddChild:J,onDeleteNode:fe,onDragOver:P,onDragLeave:t,onDrop:_},n.key))})})]})}exports.TreeView=Ie;exports.default=Ie;

package/dist/react-tree-node-view.js

@@ -0,0 +1,544 @@
+"use client";
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
+import { useState as D, useEffect as re, useRef as A, useLayoutEffect as Ae } from "react";
+const Ee = typeof window > "u" ? re : Ae, Pe = {
+  addCategory: "Add category",
+  addChild: "Add child to {title}",
+  delete: "Delete {title}",
+  expand: "Expand category",
+  collapse: "Collapse category",
+  select: "Select {title}",
+  edit: "Edit {title}",
+  dragHandle: "Drag to reorder",
+  loading: "Loading categories",
+  empty: "No categories found",
+  dragAndDropGuide: "Drag and drop guide",
+  before: "Before",
+  inside: "Inside",
+  after: "After",
+  defaultCategoryTitle: "New category"
+}, ze = {
+  before: "#3b82f6",
+  inside: "#f59e0b",
+  after: "#10b981"
+};
+function G(e, o) {
+  return o === void 0 ? e : e.replace(/\{title\}/g, o);
+}
+const Te = 180, Ne = {
+  duration: Te,
+  easing: "cubic-bezier(0.2, 0.7, 0.2, 1)",
+  fill: "forwards"
+};
+function ye(e) {
+  const o = Number.parseFloat(e);
+  return Number.isFinite(o) ? o : 0;
+}
+function Se(e) {
+  const o = e.style.height, i = e.style.overflow, c = e.firstElementChild;
+  e.style.height = "auto", e.style.overflow = "visible", e.getBoundingClientRect();
+  const d = getComputedStyle(e), s = c ? getComputedStyle(c) : void 0, u = ye(d.paddingBlockStart) + ye(d.paddingBlockEnd), P = c instanceof HTMLElement ? c.getBoundingClientRect().height : 0, z = s ? ye(s.marginBlockStart) + ye(s.marginBlockEnd) : 0, j = e.getBoundingClientRect().height, V = Math.max(e.scrollHeight, j, P + z, u);
+  return e.style.height = o, e.style.overflow = i, Math.ceil(V);
+}
+function We() {
+  const [e, o] = D(!1);
+  return re(() => {
+    if (typeof window > "u" || typeof window.matchMedia != "function") return;
+    const i = window.matchMedia("(prefers-reduced-motion: reduce)"), c = () => o(i.matches);
+    return c(), i.addEventListener ? i.addEventListener("change", c) : i.addListener(c), () => {
+      i.removeEventListener ? i.removeEventListener("change", c) : i.removeListener(c);
+    };
+  }, []), e;
+}
+function U({ children: e, size: o = 16, className: i, label: c }) {
+  return /* @__PURE__ */ n("svg", { "aria-hidden": c ? void 0 : !0, "aria-label": c, className: i, fill: "none", height: o, role: c ? "img" : void 0, viewBox: "0 0 24 24", width: o, xmlns: "http://www.w3.org/2000/svg", children: e });
+}
+function O({ children: e, className: o }) {
+  return /* @__PURE__ */ n("span", { className: `treeview-icon${o ? ` ${o}` : ""}`, children: e });
+}
+function De({ direction: e, ...o }) {
+  return /* @__PURE__ */ n(U, { ...o, children: /* @__PURE__ */ n("path", { d: e === "down" ? "m6 9 6 6 6-6" : e === "left" ? "m14 6-6 6 6 6" : "m10 6 6 6-6 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) });
+}
+function Ie(e) {
+  return /* @__PURE__ */ n(U, { ...e, children: /* @__PURE__ */ n("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" }) });
+}
+function Oe(e) {
+  return /* @__PURE__ */ n(U, { ...e, children: /* @__PURE__ */ n("path", { d: "M5 7h14M10 11v6M14 11v6M9 7V5h6v2m-9 0 1 13h10l1-13", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8" }) });
+}
+function je(e) {
+  return /* @__PURE__ */ n(U, { ...e, children: /* @__PURE__ */ n("path", { d: "M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "3" }) });
+}
+function Ve(e) {
+  return /* @__PURE__ */ n(U, { ...e, children: /* @__PURE__ */ n("path", { d: "m5 12 4 4L19 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) });
+}
+function Le({ open: e, ...o }) {
+  return /* @__PURE__ */ y(U, { ...o, children: [
+    /* @__PURE__ */ n("path", { d: "M3.5 7.5h6l1.6 2H20a1 1 0 0 1 1 1v7.2a1.8 1.8 0 0 1-1.8 1.8H4.8A1.8 1.8 0 0 1 3 17.7V8.2a.7.7 0 0 1 .5-.7Z", fill: e ? "currentColor" : "none", opacity: e ? 0.2 : 1, stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.7" }),
+    e && /* @__PURE__ */ n("path", { d: "M4 10h16.5", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.7" })
+  ] });
+}
+function _e(e) {
+  return /* @__PURE__ */ y(U, { ...e, children: [
+    /* @__PURE__ */ n("path", { d: "M3.5 7.5h6l1.6 2H20a1 1 0 0 1 1 1v7.2a1.8 1.8 0 0 1-1.8 1.8H4.8A1.8 1.8 0 0 1 3 17.7V8.2a.7.7 0 0 1 .5-.7Z", fill: "currentColor", opacity: ".12", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.7" }),
+    /* @__PURE__ */ n("path", { d: "M7 14h10", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.7" })
+  ] });
+}
+function Re() {
+  var e, o;
+  return ((o = (e = globalThis.crypto) == null ? void 0 : e.randomUUID) == null ? void 0 : o.call(e)) ?? `tree-node-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function te(e, o) {
+  for (const i of e) {
+    if (i.key === o) return i;
+    const c = i.children ? te(i.children, o) : void 0;
+    if (c) return c;
+  }
+}
+function be(e, o) {
+  var i;
+  return !!((i = e.children) != null && i.some((c) => c.key === o || be(c, o)));
+}
+function Ce(e, o, i) {
+  return e.map((c) => c.key === o ? i(c) : c.children ? { ...c, children: Ce(c.children, o, i) } : c);
+}
+function xe(e, o) {
+  let i;
+  const c = [];
+  for (const d of e) {
+    if (d.key === o) {
+      i = d;
+      continue;
+    }
+    if (d.children) {
+      const [s, u] = xe(d.children, o);
+      u && (i = u), c.push({ ...d, children: s });
+    } else
+      c.push(d);
+  }
+  return [c, i];
+}
+function He(e, o, i = []) {
+  for (const c of e) {
+    if (c.key === o) return i;
+    const d = c.children ? He(c.children, o, [...i, c.key]) : [];
+    if (d.length) return d;
+  }
+  return [];
+}
+function Me(e, o = /* @__PURE__ */ new Set()) {
+  return e.forEach((i) => {
+    var c;
+    (c = i.children) != null && c.length && (o.add(i.key), Me(i.children, o));
+  }), o;
+}
+function $e(e, o, i, c) {
+  const d = [];
+  for (const s of e) {
+    if (s.key === o) {
+      c === "before" && d.push(i, s), c === "inside" && d.push({ ...s, children: [...s.children ?? [], i] }), c === "after" && d.push(s, i);
+      continue;
+    }
+    d.push(s.children ? { ...s, children: $e(s.children, o, i, c) } : s);
+  }
+  return d;
+}
+function Be({
+  node: e,
+  level: o,
+  mode: i,
+  direction: c,
+  prefersReducedMotion: d,
+  icons: s,
+  labels: u,
+  checkedItems: P,
+  expandedKeys: z,
+  editingKey: j,
+  editValue: V,
+  draggedKey: X,
+  dragOverKey: ne,
+  dragPosition: Z,
+  disabled: N,
+  onToggle: ie,
+  onCheck: oe,
+  onStartEdit: ce,
+  onEditChange: ae,
+  onCommitEdit: m,
+  onCancelEdit: le,
+  onDragStart: se,
+  onDragEnd: de,
+  onAddChild: ue,
+  onDeleteNode: p,
+  onDragOver: I,
+  onDragLeave: he,
+  onDrop: v
+}) {
+  var ge, ve, me;
+  const w = !!((ge = e.children) != null && ge.length), h = w && z.has(e.key), [b, C] = D(() => w && h), [T, H] = D(() => h ? "open" : "closing"), x = A(b), M = A(!0), Q = A(null), f = A(null), L = A(0), Y = A(h), _ = A(!1), $ = A(0), B = j === e.key, fe = P.some((t) => t._id === e.key), we = ne === e.key, ee = A(null);
+  re(() => {
+    var t, E;
+    B && ((t = ee.current) == null || t.focus(), (E = ee.current) == null || E.select());
+  }, [B]), Ee(() => {
+    var l;
+    const t = Q.current;
+    if (M.current) {
+      M.current = !1, Y.current = h, t && w && h && (t.style.height = "", t.style.overflow = "", H("open"));
+      return;
+    }
+    const E = Y.current !== h;
+    if (Y.current = h, w && h && !x.current) {
+      _.current = !0, x.current = !0, C(!0);
+      return;
+    }
+    if (!w) {
+      (l = f.current) == null || l.cancel(), f.current = null, L.current += 1, _.current = !1, t && (t.style.height = "", t.style.overflow = ""), x.current = !1, b && C(!1);
+      return;
+    }
+    if (!t) return;
+    const J = h && (E || _.current);
+    if (_.current = !1, !J && !E) return;
+    const R = f.current, W = t.getBoundingClientRect().height;
+    R == null || R.cancel(), f.current = null;
+    const K = ++L.current, F = () => {
+      t.style.height = "", t.style.overflow = "";
+    };
+    if (d || typeof t.animate != "function") {
+      F(), h ? H("open") : (x.current = !1, C(!1));
+      return;
+    }
+    t.style.overflow = "hidden";
+    const r = h && !R ? 0 : W;
+    if (t.style.height = `${r}px`, t.getBoundingClientRect(), h) {
+      const g = Se(t);
+      $.current = g, H("opening");
+      const k = t.animate(
+        [{ height: `${r}px` }, { height: `${g}px` }],
+        Ne
+      );
+      f.current = k, k.finished.then(() => {
+        K !== L.current || f.current !== k || (f.current = null, k.cancel(), F(), H("open"));
+      }).catch(() => {
+      });
+      return;
+    }
+    H("closing");
+    const a = t.animate(
+      [{ height: `${W}px` }, { height: "0px" }],
+      Ne
+    );
+    f.current = a, a.finished.then(() => {
+      K !== L.current || f.current !== a || (f.current = null, a.cancel(), F(), x.current = !1, C(!1));
+    }).catch(() => {
+    });
+  }, [b, w, h, d]), Ee(() => {
+    const t = Q.current, E = t == null ? void 0 : t.firstElementChild;
+    if (!t || !E || typeof ResizeObserver > "u") return;
+    const J = new ResizeObserver(() => {
+      if (T !== "opening" || !h) return;
+      const R = f.current;
+      if (!R) return;
+      const W = Se(t);
+      if (Math.abs(W - $.current) < 1) return;
+      const K = t.getBoundingClientRect().height;
+      R.cancel(), f.current = null;
+      const F = ++L.current;
+      t.style.overflow = "hidden", t.style.height = `${K}px`, t.getBoundingClientRect(), $.current = W;
+      const r = t.animate(
+        [{ height: `${K}px` }, { height: `${W}px` }],
+        Ne
+      );
+      f.current = r, r.finished.then(() => {
+        F !== L.current || f.current !== r || (f.current = null, r.cancel(), t.style.height = "", t.style.overflow = "", H("open"));
+      }).catch(() => {
+      });
+    });
+    return J.observe(E), () => J.disconnect();
+  }, [T, b, h]), re(() => () => {
+    var t;
+    L.current += 1, (t = f.current) == null || t.cancel(), f.current = null;
+  }, []);
+  const q = (t) => t.stopPropagation(), pe = b && T === "open" && h;
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      className: "treeview-node",
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            className: `treeview-row${X === e.key ? " is-dragging" : ""}${we && Z ? ` is-drag-${Z}` : ""}`,
+            draggable: i === "editable" && !N && !B,
+            onDragStart: (t) => se(t, e.key),
+            onDragEnd: de,
+            onDragOver: (t) => I(t, e.key),
+            onDragLeave: he,
+            onDrop: (t) => v(t, e.key),
+            style: { paddingInlineStart: `calc(${o} * var(--treeview-indent) + 0.5rem)` },
+            children: [
+              w ? /* @__PURE__ */ n("button", { "aria-label": h ? u.collapse : u.expand, className: "treeview-expander", disabled: N, onClick: (t) => {
+                t.stopPropagation(), ie(e.key);
+              }, title: h ? u.collapse : u.expand, type: "button", children: /* @__PURE__ */ n(O, { children: h ? s.collapse ?? /* @__PURE__ */ n(De, { direction: "down", size: 14 }) : s.expand ?? /* @__PURE__ */ n(De, { direction: c === "rtl" ? "left" : "right", size: 14 }) }) }) : /* @__PURE__ */ n("span", { className: "treeview-expander-spacer" }),
+              i === "editable" && /* @__PURE__ */ n("span", { "aria-label": u.dragHandle, className: "treeview-drag-handle", title: u.dragHandle, children: /* @__PURE__ */ n(O, { children: s.dragHandle ?? /* @__PURE__ */ n(je, { size: 16 }) }) }),
+              i === "selectable" && /* @__PURE__ */ y("label", { className: "treeview-checkbox-wrap", onClick: q, children: [
+                /* @__PURE__ */ n("input", { "aria-label": G(u.select, e.title), checked: fe, className: "treeview-checkbox", disabled: N, onChange: (t) => oe(e, t.target.checked), type: "checkbox" }),
+                /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "treeview-checkmark", children: /* @__PURE__ */ n(O, { children: s.check ?? /* @__PURE__ */ n(Ve, { size: 12 }) }) })
+              ] }),
+              /* @__PURE__ */ n("span", { "aria-hidden": "true", className: `treeview-folder${h ? " is-open" : ""}`, children: /* @__PURE__ */ n(O, { children: h ? s.openFolder ?? /* @__PURE__ */ n(Le, { open: !0, size: 18 }) : s.folder ?? /* @__PURE__ */ n(Le, { open: !1, size: 18 }) }) }),
+              B ? /* @__PURE__ */ n(
+                "input",
+                {
+                  "aria-label": G(u.edit, e.title),
+                  className: "treeview-title-input",
+                  disabled: N,
+                  onBlur: m,
+                  onChange: (t) => ae(t.target.value),
+                  onClick: q,
+                  onKeyDown: (t) => {
+                    t.key === "Enter" && m(), t.key === "Escape" && le();
+                  },
+                  ref: ee,
+                  value: V
+                }
+              ) : /* @__PURE__ */ n("button", { "aria-label": i === "editable" ? G(u.edit, e.title) : e.title, className: `treeview-title${i === "editable" ? " is-editable" : ""}`, disabled: N, onClick: (t) => {
+                t.stopPropagation(), i === "editable" && ce(e);
+              }, type: "button", children: e.title }),
+              i === "editable" && /* @__PURE__ */ y("div", { className: "treeview-actions", children: [
+                /* @__PURE__ */ n("button", { "aria-label": G(u.addChild, e.title), className: "treeview-action treeview-action-add", disabled: N, onClick: (t) => {
+                  t.stopPropagation(), ue(e);
+                }, onMouseDown: q, title: G(u.addChild, e.title), type: "button", children: /* @__PURE__ */ n(O, { children: s.add ?? /* @__PURE__ */ n(Ie, { size: 13 }) }) }),
+                /* @__PURE__ */ n("button", { "aria-label": G(u.delete, e.title), className: "treeview-action treeview-action-delete", disabled: N, onClick: (t) => {
+                  t.stopPropagation(), p(e);
+                }, onMouseDown: q, title: G(u.delete, e.title), type: "button", children: /* @__PURE__ */ n(O, { children: s.delete ?? /* @__PURE__ */ n(Oe, { size: 13 }) }) })
+              ] }),
+              w && /* @__PURE__ */ n("span", { className: "treeview-child-count", children: (ve = e.children) == null ? void 0 : ve.length })
+            ]
+          }
+        ),
+        w && b && /* @__PURE__ */ n(
+          "div",
+          {
+            "aria-hidden": pe ? void 0 : !0,
+            className: "treeview-children",
+            ref: (t) => {
+              Q.current = t, t == null || t.toggleAttribute("inert", !pe);
+            },
+            children: /* @__PURE__ */ n("div", { className: "treeview-children-content", children: (me = e.children) == null ? void 0 : me.map((t) => /* @__PURE__ */ n(
+              Be,
+              {
+                node: t,
+                level: o + 1,
+                mode: i,
+                direction: c,
+                prefersReducedMotion: d,
+                icons: s,
+                labels: u,
+                checkedItems: P,
+                expandedKeys: z,
+                editingKey: j,
+                editValue: V,
+                draggedKey: X,
+                dragOverKey: ne,
+                dragPosition: Z,
+                disabled: N,
+                onToggle: ie,
+                onCheck: oe,
+                onStartEdit: ce,
+                onEditChange: ae,
+                onCommitEdit: m,
+                onCancelEdit: le,
+                onDragStart: se,
+                onDragEnd: de,
+                onAddChild: ue,
+                onDeleteNode: p,
+                onDragOver: I,
+                onDragLeave: he,
+                onDrop: v
+              },
+              t.key
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+function Ge({
+  items: e,
+  defaultItems: o = [],
+  type: i = "editable",
+  defaultChecked: c = [],
+  checkedItems: d,
+  onChange: s,
+  onCheckedChange: u,
+  onTitleChange: P,
+  onDelete: z,
+  height: j,
+  className: V,
+  defaultColor: X,
+  theme: ne = "light",
+  direction: Z = "ltr",
+  icons: N = {},
+  labels: ie = {},
+  dropIndicatorColors: oe = {},
+  loading: ce = !1,
+  emptyMessage: ae,
+  disabled: m = !1
+}) {
+  const [le, se] = D(o), [de, ue] = D(c), p = e ?? le, I = d ?? de, he = We(), v = { ...Pe, ...ie }, w = { ...ze, ...oe }, [h, b] = D(() => Me(p)), [C, T] = D(null), [H, x] = D(""), [M, Q] = D(null), [f, L] = D(null), [Y, _] = D(null), $ = (r) => {
+    e === void 0 && se(r), fe(r), s == null || s(r);
+  }, B = (r) => {
+    d === void 0 && ue(r), u == null || u(r);
+  }, fe = (r) => {
+    const a = Me(r);
+    b((l) => {
+      let g = !1;
+      const k = /* @__PURE__ */ new Set();
+      return l.forEach((S) => {
+        a.has(S) ? k.add(S) : g = !0;
+      }), g ? k : l;
+    });
+  };
+  re(() => {
+    fe(p);
+  }, [p]);
+  const we = (r) => b((a) => {
+    const l = new Set(a);
+    return l.has(r) ? l.delete(r) : l.add(r), l;
+  }), ee = (r) => {
+    if (m) return;
+    const a = { key: Re(), title: v.defaultCategoryTitle, children: [] };
+    $(Ce(p, r.key, (l) => ({ ...l, children: [...l.children ?? [], a] }))), b((l) => new Set(l).add(r.key));
+  }, q = () => {
+    m || $([...p, { key: Re(), title: v.defaultCategoryTitle, children: [] }]);
+  }, pe = (r) => {
+    !m && i === "editable" && (T(r.key), x(r.title));
+  }, ge = () => {
+    if (!C) return;
+    const r = te(p, C);
+    if (!r) return;
+    const a = H.trim() || r.title;
+    if (a !== r.title) {
+      const l = { ...r, title: a };
+      $(Ce(p, C, (g) => ({ ...g, title: a }))), B(I.map((g) => g._id === C ? { ...g, title: a } : g)), P == null || P(l, a);
+    }
+    T(null), x("");
+  }, ve = (r) => {
+    if (m) return;
+    const [a] = xe(p, r.key);
+    $(a), B(I.filter((l) => l._id !== r.key)), z == null || z(r), C === r.key && (T(null), x(""));
+  }, me = (r, a) => {
+    const l = He(p, r.key);
+    if (a) {
+      const g = new Set(I.map((S) => S._id)), k = [...l, r.key].filter((S) => !g.has(S)).map((S) => {
+        const ke = te(p, S);
+        return { _id: S, title: (ke == null ? void 0 : ke.title) ?? "" };
+      });
+      B([...I, ...k]);
+    } else {
+      const g = /* @__PURE__ */ new Set([...l, r.key]);
+      B(I.filter((k) => !g.has(k._id)));
+    }
+  }, t = () => {
+    L(null), _(null);
+  }, E = () => {
+    Q(null), t();
+  }, J = (r, a) => {
+    m || i !== "editable" || (Q(a), r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", a), t());
+  }, R = (r) => {
+    const a = r.currentTarget.getBoundingClientRect(), l = r.clientY - a.top;
+    return l < a.height * 0.3 ? "before" : l > a.height * 0.7 ? "after" : "inside";
+  }, W = (r, a) => {
+    if (m || i !== "editable" || !M) return;
+    if (M === a) {
+      t();
+      return;
+    }
+    const l = te(p, M);
+    if (!l || be(l, a)) {
+      t();
+      return;
+    }
+    r.preventDefault(), r.stopPropagation(), L(a), _(R(r));
+  }, K = (r, a) => {
+    r.preventDefault(), r.stopPropagation();
+    try {
+      if (m || i !== "editable" || !M || M === a) return;
+      const l = te(p, M), g = Y ?? R(r);
+      if (!l || be(l, a)) return;
+      const [k] = xe(p, M);
+      $($e(k, a, l, g)), g === "inside" && b((S) => new Set(S).add(a));
+    } finally {
+      E();
+    }
+  }, F = {
+    "--treeview-drop-before": w.before,
+    "--treeview-drop-inside": w.inside,
+    "--treeview-drop-after": w.after,
+    ...X === void 0 ? {} : { "--treeview-primary": X }
+  };
+  return /* @__PURE__ */ y("div", { className: `treeview-root${V ? ` ${V}` : ""}`, "data-disabled": m || void 0, "data-theme": ne, dir: Z, style: F, children: [
+    i === "editable" && /* @__PURE__ */ y("div", { className: "treeview-toolbar", children: [
+      /* @__PURE__ */ y("button", { "aria-label": v.addCategory, className: "treeview-add-root", disabled: m, onClick: q, title: v.addCategory, type: "button", children: [
+        /* @__PURE__ */ n(O, { children: N.add ?? /* @__PURE__ */ n(Ie, { size: 16 }) }),
+        " ",
+        v.addCategory
+      ] }),
+      /* @__PURE__ */ y("div", { className: "treeview-guide", "aria-label": v.dragAndDropGuide, children: [
+        /* @__PURE__ */ y("span", { children: [
+          /* @__PURE__ */ n("i", { className: "treeview-guide-dot is-before" }),
+          v.before
+        ] }),
+        /* @__PURE__ */ y("span", { children: [
+          /* @__PURE__ */ n("i", { className: "treeview-guide-dot is-inside" }),
+          v.inside
+        ] }),
+        /* @__PURE__ */ y("span", { children: [
+          /* @__PURE__ */ n("i", { className: "treeview-guide-dot is-after" }),
+          v.after
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "treeview-shell", style: j === void 0 ? void 0 : { maxHeight: j }, children: ce ? /* @__PURE__ */ n("div", { className: "treeview-loading", "aria-busy": "true", "aria-label": v.loading, children: Array.from({ length: 6 }, (r, a) => /* @__PURE__ */ n("div", { className: "treeview-skeleton-row" }, a)) }) : p.length === 0 ? /* @__PURE__ */ y("div", { className: "treeview-empty", children: [
+      /* @__PURE__ */ n("span", { className: "treeview-empty-icon", children: /* @__PURE__ */ n(O, { children: N.empty ?? /* @__PURE__ */ n(_e, { size: 38 }) }) }),
+      /* @__PURE__ */ n("p", { children: ae ?? v.empty })
+    ] }) : /* @__PURE__ */ n("div", { className: "treeview-list", children: p.map((r) => /* @__PURE__ */ n(
+      Be,
+      {
+        node: r,
+        level: 0,
+        mode: i,
+        direction: Z,
+        prefersReducedMotion: he,
+        icons: N,
+        labels: v,
+        checkedItems: I,
+        expandedKeys: h,
+        editingKey: C,
+        editValue: H,
+        draggedKey: M,
+        dragOverKey: f,
+        dragPosition: Y,
+        disabled: m,
+        onToggle: we,
+        onCheck: me,
+        onStartEdit: pe,
+        onEditChange: x,
+        onCommitEdit: ge,
+        onCancelEdit: () => {
+          T(null), x("");
+        },
+        onDragStart: J,
+        onDragEnd: E,
+        onAddChild: ee,
+        onDeleteNode: ve,
+        onDragOver: W,
+        onDragLeave: t,
+        onDrop: K
+      },
+      r.key
+    )) }) })
+  ] });
+}
+export {
+  Ge as TreeView,
+  Ge as default
+};

package/dist/styles.css

@@ -0,0 +1 @@
+.treeview-root{--treeview-border: #e5e7eb;--treeview-surface: #ffffff;--treeview-surface-muted: #f8fafc;--treeview-text: #172033;--treeview-muted: #718096;--treeview-primary: #171717;--treeview-primary-soft: color-mix(in srgb, var(--treeview-primary) 10%, transparent);--treeview-danger: #dc2626;--treeview-shadow: rgba(15, 23, 42, .08);--treeview-drop-before: #3b82f6;--treeview-drop-inside: #f59e0b;--treeview-drop-after: #10b981;--treeview-toolbar-background: var(--treeview-surface);--treeview-shell-background: color-mix(in srgb, var(--treeview-surface) 92%, transparent);--treeview-checkmark: #ffffff;--treeview-indent: 32px;box-sizing:border-box;width:100%;color:var(--treeview-text);color-scheme:light;font-family:inherit;font-size:.875rem;transition:color .16s ease}.treeview-root[data-theme=dark]{--treeview-border: rgba(255, 255, 255, .11);--treeview-surface: #111111;--treeview-surface-muted: rgba(255, 255, 255, .045);--treeview-text: #f0f2f7;--treeview-muted: #9ba3b5;--treeview-primary: #ffffff;--treeview-primary-soft: color-mix(in srgb, var(--treeview-primary) 14%, transparent);--treeview-shadow: rgba(0, 0, 0, .2);--treeview-toolbar-background: #000000;--treeview-shell-background: #111111;--treeview-checkmark: #171717;color-scheme:dark}.treeview-root *,.treeview-root *:before,.treeview-root *:after{box-sizing:border-box}.treeview-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;line-height:0}.treeview-icon>svg{display:block;max-width:100%;max-height:100%}.treeview-expander .treeview-icon,.treeview-drag-handle .treeview-icon{width:1rem;height:1rem}.treeview-folder .treeview-icon{width:1.125rem;height:1.125rem}.treeview-checkmark .treeview-icon{width:.75rem;height:.75rem}.treeview-action .treeview-icon{width:.8125rem;height:.8125rem}.treeview-add-root .treeview-icon{width:1rem;height:1rem}.treeview-empty-icon .treeview-icon{width:2.375rem;height:2.375rem}.treeview-toolbar{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border:1px solid var(--treeview-border);border-bottom:0;border-radius:1rem 1rem 0 0;background:var(--treeview-toolbar-background);transition:background-color .16s ease,border-color .16s ease,color .16s ease}.treeview-add-root,.treeview-action,.treeview-expander,.treeview-title{border:0;font:inherit}.treeview-add-root{display:inline-flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.5rem .85rem;border:1px solid color-mix(in srgb,var(--treeview-primary) 22%,transparent);border-radius:.75rem;color:var(--treeview-primary);background:color-mix(in srgb,var(--treeview-primary) 10%,transparent);cursor:pointer;font-size:.8125rem;font-weight:700;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.treeview-add-root:hover:not(:disabled){background:color-mix(in srgb,var(--treeview-primary) 16%,transparent);transform:translateY(-1px)}.treeview-add-root:disabled,.treeview-action:disabled,.treeview-expander:disabled,.treeview-title:disabled{cursor:not-allowed;opacity:.55}.treeview-guide{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;color:var(--treeview-muted);font-size:.6875rem}.treeview-guide span{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}.treeview-guide-dot{width:.45rem;height:.45rem;border-radius:999px;box-shadow:0 0 7px currentColor}.treeview-guide-dot.is-before{color:var(--treeview-drop-before);background:currentColor}.treeview-guide-dot.is-inside{color:var(--treeview-drop-inside);background:currentColor}.treeview-guide-dot.is-after{color:var(--treeview-drop-after);background:currentColor}.treeview-shell{width:100%;overflow:auto;border:1px solid var(--treeview-border);border-radius:1rem;background:var(--treeview-shell-background);box-shadow:0 12px 35px var(--treeview-shadow);transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}.treeview-toolbar+.treeview-shell{border-radius:0 0 1rem 1rem}.treeview-list{display:flex;min-height:4rem;flex-direction:column;gap:.25rem;padding:.5rem}.treeview-node{min-width:0}.treeview-row{position:relative;z-index:1;display:flex;min-height:2.75rem;align-items:center;gap:.45rem;margin:0;padding:.35rem .5rem;border:1px solid transparent;border-radius:.75rem;cursor:default;transition:background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease}.treeview-row:hover{border-color:var(--treeview-border);background:var(--treeview-surface-muted)}.treeview-row.is-dragging{opacity:.3}.treeview-row.is-drag-before{border-color:color-mix(in srgb,var(--treeview-drop-before) 32%,transparent);background:color-mix(in srgb,var(--treeview-drop-before) 9%,transparent)}.treeview-row.is-drag-before:before,.treeview-row.is-drag-after:after{position:absolute;inset-inline:.5rem;height:3px;border-radius:99px;content:"";box-shadow:0 0 12px currentColor}.treeview-row.is-drag-before:before{top:-1px;color:var(--treeview-drop-before);background:currentColor}.treeview-row.is-drag-after{border-color:color-mix(in srgb,var(--treeview-drop-after) 32%,transparent);background:color-mix(in srgb,var(--treeview-drop-after) 9%,transparent)}.treeview-row.is-drag-after:after{bottom:-1px;color:var(--treeview-drop-after);background:currentColor}.treeview-row.is-drag-inside{border-color:color-mix(in srgb,var(--treeview-drop-inside) 42%,transparent);background:color-mix(in srgb,var(--treeview-drop-inside) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--treeview-drop-inside) 16%,transparent)}.treeview-expander,.treeview-expander-spacer{display:inline-flex;width:1.75rem;height:1.75rem;flex:0 0 auto;align-items:center;justify-content:center;border-radius:.55rem}.treeview-expander{color:var(--treeview-muted);background:transparent;cursor:pointer;transition:background-color .16s ease,color .16s ease}.treeview-expander:hover:not(:disabled){color:var(--treeview-primary);background:var(--treeview-primary-soft)}.treeview-drag-handle{display:inline-flex;width:1.5rem;height:1.5rem;flex:0 0 auto;align-items:center;justify-content:center;color:var(--treeview-muted);cursor:grab;opacity:.45;transition:opacity .16s ease,color .16s ease}.treeview-row:hover .treeview-drag-handle{color:var(--treeview-primary);opacity:1}.treeview-drag-handle:active{cursor:grabbing}.treeview-folder{display:inline-flex;flex:0 0 auto;color:#e5a93d}.treeview-folder.is-open{color:var(--treeview-primary)}.treeview-checkbox-wrap{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;cursor:pointer}.treeview-checkbox{width:1rem;height:1rem;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--treeview-border);border-radius:.35rem;background:var(--treeview-surface);cursor:pointer;transition:background-color .16s ease,border-color .16s ease}.treeview-checkbox:checked{border-color:var(--treeview-primary);background:var(--treeview-primary)}.treeview-checkmark{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--treeview-checkmark);pointer-events:none;transform:scale(0);transition:transform .16s ease}.treeview-checkbox:checked+.treeview-checkmark{transform:scale(1)}.treeview-title{min-width:0;flex:1;overflow:hidden;padding:.3rem 0;color:var(--treeview-text);background:transparent;text-align:start;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:600;line-height:1.5rem;transition:color .16s ease,background-color .16s ease}.treeview-title.is-editable{cursor:text}.treeview-title.is-editable:hover{color:var(--treeview-primary)}.treeview-title-input{min-width:5rem;flex:1;height:2rem;padding:.25rem .5rem;border:1px solid var(--treeview-primary);border-radius:.45rem;outline:2px solid color-mix(in srgb,var(--treeview-primary) 18%,transparent);color:var(--treeview-text);background:var(--treeview-surface);font:inherit}.treeview-actions{display:flex;flex:0 0 auto;align-items:center;gap:.25rem}.treeview-action{display:inline-flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;border:1px solid transparent;border-radius:.5rem;cursor:pointer;opacity:0;transition:opacity .16s ease,background-color .16s ease,transform .16s ease}.treeview-row:hover .treeview-action,.treeview-action:focus-visible{opacity:1}.treeview-action:hover:not(:disabled){transform:scale(1.06)}.treeview-action-add{border-color:color-mix(in srgb,var(--treeview-primary) 20%,transparent);color:var(--treeview-primary);background:var(--treeview-primary-soft)}.treeview-action-delete{border-color:#dc262633;color:var(--treeview-danger);background:#dc262614}.treeview-child-count{flex:0 0 auto;padding:.1rem .5rem;border-radius:999px;color:var(--treeview-muted);background:var(--treeview-surface-muted);font-size:.625rem;font-weight:600}.treeview-children{margin-block-start:.25rem;overflow:visible}.treeview-children-content{display:flex;min-block-size:0;flex-direction:column;gap:.25rem;overflow:visible}.treeview-children[aria-hidden=true]{pointer-events:none;-webkit-user-select:none;user-select:none}.treeview-loading{display:flex;min-height:11rem;flex-direction:column;gap:.5rem;padding:.75rem}.treeview-skeleton-row{height:2.75rem;border-radius:.75rem;background:linear-gradient(90deg,var(--treeview-surface-muted) 20%,var(--treeview-primary-soft) 50%,var(--treeview-surface-muted) 80%);background-size:220% 100%;animation:treeview-shimmer 1.4s ease-in-out infinite}.treeview-empty{display:flex;min-height:11rem;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;color:var(--treeview-muted);text-align:center}.treeview-empty-icon{color:var(--treeview-muted);opacity:.35}.treeview-empty p{margin:0;font-size:.8125rem}@keyframes treeview-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(max-width:640px){.treeview-root{--treeview-indent: 26px}.treeview-toolbar{align-items:flex-start;flex-direction:column}.treeview-guide{gap:.55rem}}@media(prefers-reduced-motion:reduce){.treeview-root *{transition:none!important;animation:none!important}}

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "react-tree-node-view",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "A lightweight, standalone React tree view with selection, inline editing, and drag-and-drop reordering.",
+  "type": "module",
+  "main": "./dist/react-tree-node-view.cjs",
+  "module": "./dist/react-tree-node-view.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-tree-node-view.js",
+      "require": "./dist/react-tree-node-view.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "tsc -p tsconfig.json --noEmit",
+    "pack:check": "npm pack --dry-run"
+  },
+  "keywords": [
+    "react",
+    "tree-view",
+    "treeview",
+    "tree-component",
+    "nested-list",
+    "drag-and-drop",
+    "typescript",
+    "inline-editing",
+    "category-tree"
+  ],
+  "homepage": "https://github.com/hossein-nj/react-tree-node-view#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hossein-nj/react-tree-node-view.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hossein-nj/react-tree-node-view/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.18.0"
+  }
+}