@powerduck/tree 0.7.3

package/dist/react/index.d.cts

@@ -0,0 +1,213 @@
+import { ReactNode } from 'react';
+import { T as TreeNode } from '../types-DVz8c2Yd.cjs';
+import { ReorderResult } from '../core/index.cjs';
+
+/**
+ * RFC 6902 JSON Patch operation.
+ */
+interface JsonPatchOp {
+    op: "add" | "remove" | "replace" | "move" | "copy" | "test";
+    path: (string | number)[];
+    value?: unknown;
+    from?: (string | number)[];
+}
+/**
+ * Context menu item definition.
+ */
+interface ContextMenuItem<TMetadata = unknown> {
+    /** Display label. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: ReactNode;
+    /** Click handler. */
+    onClick: (node: TreeNode<TMetadata>) => void;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+    /** Whether this is a danger action (red text). */
+    danger?: boolean;
+    /** Render a separator above this item. */
+    separator?: boolean;
+    /** Whether this item requires a two-step confirmation. First click arms it
+     * (label changes to confirmLabel), second click executes onClick. */
+    confirm?: boolean;
+    /** Label shown when the item is in confirm state. Default "Confirm?". */
+    confirmLabel?: string;
+}
+/**
+ * Render context passed to custom render functions.
+ */
+interface TreeRenderContext<TMetadata = unknown> {
+    node: TreeNode<TMetadata>;
+    depth: number;
+    isExpanded: boolean;
+    isSelected: boolean;
+    isBranch: boolean;
+    isLeaf: boolean;
+    /** Whether this node is currently being dragged. */
+    isDragging: boolean;
+    /** Whether this node is the current drop target. */
+    isDragOver: boolean;
+    /** Drop position relative to this node. */
+    dragOverPosition: "before" | "after" | "child" | null;
+}
+/**
+ * Props for the Tree component.
+ */
+interface TreeProps<TMetadata = unknown> {
+    /** Root nodes to render. */
+    nodes: TreeNode<TMetadata>[];
+    /** Called when a leaf node is selected (clicked). */
+    onSelect?: (node: TreeNode<TMetadata>) => void;
+    /** Called when expanded nodes change. */
+    onExpandedChange?: (expandedIds: string[]) => void;
+    /** Initially expanded node IDs. Overrides defaultExpandDepth. */
+    defaultExpandedIds?: string[];
+    /** Default expansion depth. 1 = root only, 2 = root + children, etc. Default 1. */
+    defaultExpandDepth?: number;
+    /** Enable search input. Default false. */
+    searchable?: boolean;
+    /** Placeholder text for the search input. Default "Search...". */
+    searchPlaceholder?: string;
+    /** Show expand/collapse all buttons in the toolbar. Default false. */
+    showExpandAll?: boolean;
+    /** Show refresh button in the toolbar. When clicked, calls onRefresh. Default false. */
+    showRefresh?: boolean;
+    /** Called when the refresh button is clicked. Use to reload/rebuild the tree data. */
+    onRefresh?: () => void;
+    /** Custom toolbar content rendered above the tree. */
+    toolbar?: ReactNode;
+    /** Extra content rendered inside the search row, between the search input and action buttons. */
+    searchRowExtra?: ReactNode;
+    /** Custom node renderer. Overrides all default rendering. */
+    renderNode?: (context: TreeRenderContext<TMetadata>, defaultNode: ReactNode) => ReactNode;
+    /** Custom icon renderer. */
+    renderIcon?: (context: TreeRenderContext<TMetadata>) => ReactNode;
+    /** Custom label renderer. */
+    renderLabel?: (context: TreeRenderContext<TMetadata>) => ReactNode;
+    /** Custom suffix renderer (rendered after the label, e.g. badges). */
+    renderSuffix?: (context: TreeRenderContext<TMetadata>) => ReactNode;
+    /** Additional CSS class name. */
+    className?: string;
+    /** Inline styles. */
+    style?: React.CSSProperties;
+    /** Size variant. Default "sm". */
+    size?: "xs" | "sm" | "md";
+    /** Visual variant for different use cases. Default "default".
+     * - "api": API debug tree with method badges and drag handles
+     * - "schema": Schema/JSON Schema navigation tree
+     * - "doc": Stripe-style documentation tree with section headers
+     */
+    variant?: "default" | "api" | "schema" | "doc";
+    /** Whether to show indent guides. Default true. */
+    showIndentGuides?: boolean;
+    /** Maximum height before scrolling. Default undefined (no limit). */
+    maxHeight?: number | string;
+    /** Callback ref for the root DOM element. */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Enable drag and drop reordering. Default false. */
+    draggable?: boolean;
+    /** Metadata key for drag group isolation. When set, nodes with different
+     * group values cannot be dragged into each other's sections. */
+    dragGroupKey?: string;
+    /** Called when a node is reordered via drag and drop. */
+    onReorder?: (result: ReorderResult<TMetadata>) => void;
+    /** Called when a node is moved to a different parent via drag and drop. */
+    onMove?: (nodes: TreeNode<TMetadata>[], movedNode: TreeNode<TMetadata>, targetParentId: string | null) => void;
+    /** Predicate to control which nodes can be dragged. Default all nodes draggable. */
+    canDrag?: (node: TreeNode<TMetadata>) => boolean;
+    /** Predicate to control whether a drop is allowed at the target. Default all drops allowed. */
+    canDrop?: (draggedNode: TreeNode<TMetadata>, targetNode: TreeNode<TMetadata>, position: "before" | "after" | "child") => boolean;
+    /**
+     * Context menu items for right-click and the more (…) button.
+     * Receives the node and returns an array of menu items.
+     * When provided, a more button appears on row hover and right-click opens the menu.
+     */
+    contextMenuItems?: (node: TreeNode<TMetadata>) => ContextMenuItem<TMetadata>[];
+    /**
+     * Called when a mutation (reorder, move, delete via context menu) produces JSON Patch operations.
+     * Only fires when the affected node has a `jsonPath` in its metadata.
+     * Use with @powerduck/conf-patch `patchContent` to apply to the original document.
+     */
+    onPatch?: (ops: JsonPatchOp[], context: {
+        node: TreeNode<TMetadata>;
+        type: "reorder" | "move" | "remove";
+    }) => void;
+}
+/**
+ * Handle exposed by the Tree component via ref.
+ */
+interface TreeHandle {
+    /** Expand all nodes. */
+    expandAll: () => void;
+    /** Collapse all nodes. */
+    collapseAll: () => void;
+    /** Expand nodes to a specific depth. */
+    expandToDepth: (depth: number) => void;
+    /** Get the currently expanded node IDs. */
+    getExpandedIds: () => string[];
+    /** Get the currently selected node. */
+    getSelectedNode: () => TreeNode | undefined;
+    /** Scroll a node into view by ID. */
+    scrollToNode: (id: string) => void;
+    /** Find a node by predicate, expand its ancestors, select it, and scroll into view. Returns the found node or undefined. */
+    locateNode: (predicate: (node: TreeNode) => boolean) => TreeNode | undefined;
+}
+
+declare const Tree: <TMetadata = unknown>(props: TreeProps<TMetadata> & {
+    ref?: React.Ref<TreeHandle>;
+}) => React.ReactElement;
+
+/**
+ * Manages tree search state with deferred query for performance.
+ *
+ * When searching, the expansion state is temporarily overridden to show
+ * all matching nodes and their ancestors. When the search is cleared,
+ * the previous expansion state is restored.
+ */
+declare function useTreeSearch<TMetadata>(nodes: TreeNode<TMetadata>[]): {
+    query: string;
+    deferredQuery: string;
+    isSearching: boolean;
+    filteredNodes: TreeNode<TMetadata>[];
+    expandedBeforeSearch: string[] | null;
+    handleQueryChange: (value: string, currentExpanded: string[]) => void;
+    clearSearch: () => void;
+};
+
+/**
+ * Manages tree expansion state.
+ *
+ * Supports controlled (via onExpandedChange) and uncontrolled usage.
+ * Provides expandAll, collapseAll, and expandToDepth helpers.
+ */
+declare function useTreeExpansion<TMetadata>(nodes: TreeNode<TMetadata>[], options?: {
+    defaultExpandedIds?: string[];
+    defaultExpandDepth?: number;
+    onExpandedChange?: (expandedIds: string[]) => void;
+}): {
+    expandedIds: string[];
+    setExpandedIds: (nextExpanded: string[]) => void;
+    toggleNode: (id: string) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandToDepth: (depth: number) => void;
+    isAllExpanded: boolean;
+    allBranchIds: string[];
+    setNodeElementRef: (id: string, element: HTMLElement | null) => void;
+    scrollToNode: (id: string) => void;
+};
+
+/**
+ * HTTP method display labels for compact badge rendering.
+ *
+ * Longer methods are abbreviated to fit the fixed-width badge.
+ * Exported so consumer libraries can reuse the same mapping.
+ */
+declare const METHOD_LABEL_MAP: Record<string, string>;
+/**
+ * Returns the compact display label for an HTTP method.
+ * Falls back to the first 4 characters uppercased for unknown methods.
+ */
+declare function getMethodLabel(method: string): string;
+
+export { type ContextMenuItem, type JsonPatchOp, METHOD_LABEL_MAP, Tree, type TreeHandle, type TreeProps, type TreeRenderContext, getMethodLabel, useTreeExpansion, useTreeSearch };

package/dist/react/index.d.ts

@@ -0,0 +1,213 @@
+import { ReactNode } from 'react';
+import { T as TreeNode } from '../types-DVz8c2Yd.js';
+import { ReorderResult } from '../core/index.js';
+
+/**
+ * RFC 6902 JSON Patch operation.
+ */
+interface JsonPatchOp {
+    op: "add" | "remove" | "replace" | "move" | "copy" | "test";
+    path: (string | number)[];
+    value?: unknown;
+    from?: (string | number)[];
+}
+/**
+ * Context menu item definition.
+ */
+interface ContextMenuItem<TMetadata = unknown> {
+    /** Display label. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: ReactNode;
+    /** Click handler. */
+    onClick: (node: TreeNode<TMetadata>) => void;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+    /** Whether this is a danger action (red text). */
+    danger?: boolean;
+    /** Render a separator above this item. */
+    separator?: boolean;
+    /** Whether this item requires a two-step confirmation. First click arms it
+     * (label changes to confirmLabel), second click executes onClick. */
+    confirm?: boolean;
+    /** Label shown when the item is in confirm state. Default "Confirm?". */
+    confirmLabel?: string;
+}
+/**
+ * Render context passed to custom render functions.
+ */
+interface TreeRenderContext<TMetadata = unknown> {
+    node: TreeNode<TMetadata>;
+    depth: number;
+    isExpanded: boolean;
+    isSelected: boolean;
+    isBranch: boolean;
+    isLeaf: boolean;
+    /** Whether this node is currently being dragged. */
+    isDragging: boolean;
+    /** Whether this node is the current drop target. */
+    isDragOver: boolean;
+    /** Drop position relative to this node. */
+    dragOverPosition: "before" | "after" | "child" | null;
+}
+/**
+ * Props for the Tree component.
+ */
+interface TreeProps<TMetadata = unknown> {
+    /** Root nodes to render. */
+    nodes: TreeNode<TMetadata>[];
+    /** Called when a leaf node is selected (clicked). */
+    onSelect?: (node: TreeNode<TMetadata>) => void;
+    /** Called when expanded nodes change. */
+    onExpandedChange?: (expandedIds: string[]) => void;
+    /** Initially expanded node IDs. Overrides defaultExpandDepth. */
+    defaultExpandedIds?: string[];
+    /** Default expansion depth. 1 = root only, 2 = root + children, etc. Default 1. */
+    defaultExpandDepth?: number;
+    /** Enable search input. Default false. */
+    searchable?: boolean;
+    /** Placeholder text for the search input. Default "Search...". */
+    searchPlaceholder?: string;
+    /** Show expand/collapse all buttons in the toolbar. Default false. */
+    showExpandAll?: boolean;
+    /** Show refresh button in the toolbar. When clicked, calls onRefresh. Default false. */
+    showRefresh?: boolean;
+    /** Called when the refresh button is clicked. Use to reload/rebuild the tree data. */
+    onRefresh?: () => void;
+    /** Custom toolbar content rendered above the tree. */
+    toolbar?: ReactNode;
+    /** Extra content rendered inside the search row, between the search input and action buttons. */
+    searchRowExtra?: ReactNode;
+    /** Custom node renderer. Overrides all default rendering. */
+    renderNode?: (context: TreeRenderContext<TMetadata>, defaultNode: ReactNode) => ReactNode;
+    /** Custom icon renderer. */
+    renderIcon?: (context: TreeRenderContext<TMetadata>) => ReactNode;
+    /** Custom label renderer. */
+    renderLabel?: (context: TreeRenderContext<TMetadata>) => ReactNode;
+    /** Custom suffix renderer (rendered after the label, e.g. badges). */
+    renderSuffix?: (context: TreeRenderContext<TMetadata>) => ReactNode;
+    /** Additional CSS class name. */
+    className?: string;
+    /** Inline styles. */
+    style?: React.CSSProperties;
+    /** Size variant. Default "sm". */
+    size?: "xs" | "sm" | "md";
+    /** Visual variant for different use cases. Default "default".
+     * - "api": API debug tree with method badges and drag handles
+     * - "schema": Schema/JSON Schema navigation tree
+     * - "doc": Stripe-style documentation tree with section headers
+     */
+    variant?: "default" | "api" | "schema" | "doc";
+    /** Whether to show indent guides. Default true. */
+    showIndentGuides?: boolean;
+    /** Maximum height before scrolling. Default undefined (no limit). */
+    maxHeight?: number | string;
+    /** Callback ref for the root DOM element. */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Enable drag and drop reordering. Default false. */
+    draggable?: boolean;
+    /** Metadata key for drag group isolation. When set, nodes with different
+     * group values cannot be dragged into each other's sections. */
+    dragGroupKey?: string;
+    /** Called when a node is reordered via drag and drop. */
+    onReorder?: (result: ReorderResult<TMetadata>) => void;
+    /** Called when a node is moved to a different parent via drag and drop. */
+    onMove?: (nodes: TreeNode<TMetadata>[], movedNode: TreeNode<TMetadata>, targetParentId: string | null) => void;
+    /** Predicate to control which nodes can be dragged. Default all nodes draggable. */
+    canDrag?: (node: TreeNode<TMetadata>) => boolean;
+    /** Predicate to control whether a drop is allowed at the target. Default all drops allowed. */
+    canDrop?: (draggedNode: TreeNode<TMetadata>, targetNode: TreeNode<TMetadata>, position: "before" | "after" | "child") => boolean;
+    /**
+     * Context menu items for right-click and the more (…) button.
+     * Receives the node and returns an array of menu items.
+     * When provided, a more button appears on row hover and right-click opens the menu.
+     */
+    contextMenuItems?: (node: TreeNode<TMetadata>) => ContextMenuItem<TMetadata>[];
+    /**
+     * Called when a mutation (reorder, move, delete via context menu) produces JSON Patch operations.
+     * Only fires when the affected node has a `jsonPath` in its metadata.
+     * Use with @powerduck/conf-patch `patchContent` to apply to the original document.
+     */
+    onPatch?: (ops: JsonPatchOp[], context: {
+        node: TreeNode<TMetadata>;
+        type: "reorder" | "move" | "remove";
+    }) => void;
+}
+/**
+ * Handle exposed by the Tree component via ref.
+ */
+interface TreeHandle {
+    /** Expand all nodes. */
+    expandAll: () => void;
+    /** Collapse all nodes. */
+    collapseAll: () => void;
+    /** Expand nodes to a specific depth. */
+    expandToDepth: (depth: number) => void;
+    /** Get the currently expanded node IDs. */
+    getExpandedIds: () => string[];
+    /** Get the currently selected node. */
+    getSelectedNode: () => TreeNode | undefined;
+    /** Scroll a node into view by ID. */
+    scrollToNode: (id: string) => void;
+    /** Find a node by predicate, expand its ancestors, select it, and scroll into view. Returns the found node or undefined. */
+    locateNode: (predicate: (node: TreeNode) => boolean) => TreeNode | undefined;
+}
+
+declare const Tree: <TMetadata = unknown>(props: TreeProps<TMetadata> & {
+    ref?: React.Ref<TreeHandle>;
+}) => React.ReactElement;
+
+/**
+ * Manages tree search state with deferred query for performance.
+ *
+ * When searching, the expansion state is temporarily overridden to show
+ * all matching nodes and their ancestors. When the search is cleared,
+ * the previous expansion state is restored.
+ */
+declare function useTreeSearch<TMetadata>(nodes: TreeNode<TMetadata>[]): {
+    query: string;
+    deferredQuery: string;
+    isSearching: boolean;
+    filteredNodes: TreeNode<TMetadata>[];
+    expandedBeforeSearch: string[] | null;
+    handleQueryChange: (value: string, currentExpanded: string[]) => void;
+    clearSearch: () => void;
+};
+
+/**
+ * Manages tree expansion state.
+ *
+ * Supports controlled (via onExpandedChange) and uncontrolled usage.
+ * Provides expandAll, collapseAll, and expandToDepth helpers.
+ */
+declare function useTreeExpansion<TMetadata>(nodes: TreeNode<TMetadata>[], options?: {
+    defaultExpandedIds?: string[];
+    defaultExpandDepth?: number;
+    onExpandedChange?: (expandedIds: string[]) => void;
+}): {
+    expandedIds: string[];
+    setExpandedIds: (nextExpanded: string[]) => void;
+    toggleNode: (id: string) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandToDepth: (depth: number) => void;
+    isAllExpanded: boolean;
+    allBranchIds: string[];
+    setNodeElementRef: (id: string, element: HTMLElement | null) => void;
+    scrollToNode: (id: string) => void;
+};
+
+/**
+ * HTTP method display labels for compact badge rendering.
+ *
+ * Longer methods are abbreviated to fit the fixed-width badge.
+ * Exported so consumer libraries can reuse the same mapping.
+ */
+declare const METHOD_LABEL_MAP: Record<string, string>;
+/**
+ * Returns the compact display label for an HTTP method.
+ * Falls back to the first 4 characters uppercased for unknown methods.
+ */
+declare function getMethodLabel(method: string): string;
+
+export { type ContextMenuItem, type JsonPatchOp, METHOD_LABEL_MAP, Tree, type TreeHandle, type TreeProps, type TreeRenderContext, getMethodLabel, useTreeExpansion, useTreeSearch };

package/dist/react/index.js

@@ -0,0 +1 @@
+import{filterTree as e,findPath as n,getBranchIds as t,getExpandableIds as r,moveNode as d,reorderNode as o}from"../chunk-5KF7QUTD.js";import{forwardRef as a,memo as i,useCallback as l,useEffect as s,useImperativeHandle as c,useMemo as u,useRef as p,useState as h}from"react";import{useCallback as g,useMemo as f,useRef as m,useState as x}from"react";function I(e,n={}){const{defaultExpandedIds:d,defaultExpandDepth:o=1,onExpandedChange:a}=n,i=f(()=>d&&d.length>0?[...d]:o<=1?[]:r(e,{maxDepth:o-1,onlyWithChildren:!0}),[]),[l,s]=x(i),c=m(new Map),u=f(()=>t(e),[e]),p=f(()=>u.length>0&&u.every(e=>l.includes(e)),[u,l]),h=g(e=>{s(e),a?.(e)},[a]),I=g(e=>{s(n=>{const t=n.includes(e)?n.filter(n=>n!==e):[...n,e];return a?.(t),t})},[a]),v=g(()=>{h([...u])},[u,h]),D=g(()=>{h([])},[h]),N=g(n=>{const t=r(e,{maxDepth:n,onlyWithChildren:!0});h(t)},[e,h]),b=g((e,n)=>{n?c.current.set(e,n):c.current.delete(e)},[]),S=g(e=>{const n=c.current.get(e);n&&n.scrollIntoView({behavior:"smooth",block:"nearest"})},[]);return{expandedIds:l,setExpandedIds:h,toggleNode:I,expandAll:v,collapseAll:D,expandToDepth:N,isAllExpanded:p,allBranchIds:u,setNodeElementRef:b,scrollToNode:S}}import{useCallback as v,useDeferredValue as D,useMemo as N,useState as b}from"react";function S(n){const[t,r]=b(""),d=D(t),[o,a]=b(null),i=d.trim().length>0,l=N(()=>i?e(n,{query:d,keepAncestors:!0}):n,[n,d,i]),s=v((e,n)=>{const d=t.trim(),o=e.trim();!d&&o&&a(n),d&&!o&&a(null),r(e)},[t]),c=v(()=>{r(""),a(null)},[]);return{query:t,deferredQuery:d,isSearching:i,filteredNodes:l,expandedBeforeSearch:o,handleQueryChange:s,clearSearch:c}}function C(e,n,t=[]){for(const r of e){if(r.id===n)return[...t,r];if(r.children?.length){const e=C(r.children,n,[...t,r]);if(e)return e}}return null}function y(e,n){const t=C(e,n);return t?t.slice(0,-1).map(e=>e.id):[]}var M={get:"GET",post:"POST",put:"PUT",delete:"DEL",patch:"PATCH",head:"HEAD",options:"OPT",trace:"TRA",connect:"CONN"};function E(e){const n=e.toLowerCase().trim();return M[n]??n.slice(0,4).toUpperCase()}import{LuBraces as w,LuChevronDown as B,LuChevronRight as O,LuEllipsisVertical as A,LuFolder as L,LuFolderOpen as P,LuGripVertical as R,LuList as k,LuRefreshCw as T,LuSearch as z,LuZap as G}from"react-icons/lu";import{MdOutlineUnfoldMore as $,MdUnfoldLess as q}from"react-icons/md";import{Fragment as H,jsx as Q,jsxs as j}from"react/jsx-runtime";var F={branchControl:"pde-tree-branchControl",contextMenu:"pde-tree-contextMenu",contextMenuItem:"pde-tree-contextMenuItem",contextMenuItemDanger:"pde-tree-contextMenuItemDanger",contextMenuItemConfirming:"pde-tree-contextMenuItemConfirming",contextMenuIcon:"pde-tree-contextMenuIcon",contextMenuSeparator:"pde-tree-contextMenuSeparator",deprecatedLabel:"pde-tree-deprecatedLabel",dragHandle:"pde-tree-dragHandle",dragHandleDisabled:"pde-tree-dragHandleDisabled",dropIndicatorAfter:"pde-tree-dropIndicatorAfter",dropIndicatorBefore:"pde-tree-dropIndicatorBefore",dropIndicatorChild:"pde-tree-dropIndicatorChild",emptyState:"pde-tree-emptyState",expandIcon:"pde-tree-expandIcon",expandIconExpanded:"pde-tree-expandIconExpanded",expandIconPlaceholder:"pde-tree-expandIconPlaceholder",highlight:"pde-tree-highlight",iconButton:"pde-tree-iconButton",indentGuide:"pde-tree-indentGuide",leafItem:"pde-tree-leafItem",methodBadge:"pde-tree-methodBadge",methodDelete:"pde-tree-methodDelete",methodGet:"pde-tree-methodGet",methodOther:"pde-tree-methodOther",methodPatch:"pde-tree-methodPatch",methodPost:"pde-tree-methodPost",methodPut:"pde-tree-methodPut",moreButton:"pde-tree-moreButton",moreButtonActive:"pde-tree-moreButtonActive",nodeDragging:"pde-tree-nodeDragging",nodeIcon:"pde-tree-nodeIcon",primitiveDot:"pde-tree-primitiveDot",nodeLabel:"pde-tree-nodeLabel",nodeLabelBranch:"pde-tree-nodeLabelBranch",nodeRow:"pde-tree-nodeRow",nodeRowSelected:"pde-tree-nodeRowSelected",nodeSuffix:"pde-tree-nodeSuffix",requiredDot:"pde-tree-requiredDot",root:"pde-tree-root",searchIcon:"pde-tree-searchIcon",searchInput:"pde-tree-searchInput",searchInputWrap:"pde-tree-searchInputWrap",searchRow:"pde-tree-searchRow",toolbar:"pde-tree-toolbar",treeContainer:"pde-tree-treeContainer"};function W({expanded:e}){return Q("span",{className:F.expandIcon,children:Q(e?B:O,{size:14})})}function K(){return Q(z,{size:14,"aria-hidden":"true"})}function U(){return Q(R,{size:14,"aria-hidden":"true"})}function Y(){return Q(A,{size:14,"aria-hidden":"true"})}function V({state:e,onClose:n}){const{x:t,y:r,items:d}=e,[o,a]=h(null);return Q("div",{className:F.contextMenu,style:{left:t,top:r},role:"menu",onMouseDown:e=>e.stopPropagation(),children:d.map((t,r)=>t.separator?Q("div",{className:F.contextMenuSeparator},`sep-${r}`):j("button",{type:"button",role:"menuitem",className:[F.contextMenuItem,t.danger?F.contextMenuItemDanger:"",o===r?F.contextMenuItemConfirming:""].filter(Boolean).join(" "),disabled:t.disabled,onClick:()=>((t,r)=>{t.confirm&&o!==r?a(r):(t.onClick(e.node),a(null),n())})(t,r),children:[t.icon&&Q("span",{className:F.contextMenuIcon,children:t.icon}),Q("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:t.confirm&&o===r?t.confirmLabel??"Confirm?":t.label})]},`${t.label}-${r}`))})}function X(e,n,t){const r=function(e){const n=e.metadata,t=n?.jsonPath;if(Array.isArray(t)&&t.length>0)return t}(e);if(!r||0===r.length)return[];const d=r.slice(0,-1);return[{op:"move",from:[...d,n],path:[...d,t]}]}function J({text:e,query:n}){if(!n)return Q(H,{children:e});const t=e.toLowerCase(),r=n.toLowerCase(),d=t.indexOf(r);return-1===d?Q(H,{children:e}):j(H,{children:[e.slice(0,d),Q("span",{className:F.highlight,children:e.slice(d,d+n.length)}),e.slice(d+n.length)]})}var Z={get:F.methodGet,post:F.methodPost,put:F.methodPut,patch:F.methodPatch,delete:F.methodDelete};function _({method:e}){const n=e.toLowerCase(),t=Z[n]??F.methodOther,r=E(e);return Q("span",{className:`${F.methodBadge} ${t}`,children:r})}var ee={draggedId:null,dragOverId:null,dragOverPosition:null};var ne=i(function(e){const{node:n,depth:t,expandedIds:r,selectedId:d,onToggle:o,onSelect:a,onNodeRef:i,searchQuery:s,showIndentGuides:c,renderIcon:u,renderLabel:p,renderSuffix:h,renderNode:g,draggable:f,dragState:m,canDragNode:x,canDragNodeFn:I,onDragStart:v,onDragOver:D,onDragLeave:N,onDrop:b,onDragEnd:S,showContextMenuButton:C,activeMenuNodeId:y,onContextMenu:M,onMoreClick:E}=e,B=r.includes(n.id),O=d===n.id,A=(n.children?.length??0)>0,R=A,T=!A,z=m.draggedId===n.id,$=m.dragOverId===n.id,q=$?m.dragOverPosition:null,H=n.metadata,K="string"==typeof H?.method?H.method:void 0,V=!0===H?.deprecated,X=!0===H?.required,Z="string"==typeof H?.kind?H.kind:void 0,ee={node:n,depth:t,isExpanded:B,isSelected:O,isBranch:R,isLeaf:T,isDragging:z,isDragOver:$,dragOverPosition:q},te=l(()=>{R?o(n.id):a(n)},[R,n,a,o]),re=l(e=>{"Enter"===e.key||" "===e.key?(e.preventDefault(),te()):("ArrowRight"===e.key&&R&&!B||"ArrowLeft"===e.key&&R&&B)&&(e.preventDefault(),o(n.id))},[te,R,B,n.id,o]),de=u?u(ee):K?null:Q("span",{className:F.nodeIcon,children:"section"===Z&&"components"===H?.section?Q(w,{size:14}):"section"===Z&&"webhooks"===H?.section?Q(G,{size:14}):"schema"===Z||"component"===Z||"object"===Z?Q(w,{size:14}):"array"===Z||"items"===Z?Q(k,{size:14}):R?Q(B?P:L,{size:14}):Q("span",{className:F.primitiveDot})}),oe=p?p(ee):Q("span",{className:`${F.nodeLabel} ${R?F.nodeLabelBranch:""} ${V?F.deprecatedLabel:""}`,children:Q(J,{text:n.name,query:s})}),ae=h?h(ee):null,ie=[F.nodeRow,R?F.branchControl:F.leafItem,O?F.nodeRowSelected:"",z?F.nodeDragging:"",$&&"before"===q?F.dropIndicatorBefore:"",$&&"after"===q?F.dropIndicatorAfter:"",$&&"child"===q?F.dropIndicatorChild:"",Z?`pde-tree-kind-${Z}`:""].filter(Boolean).join(" "),le=j("div",{ref:e=>i(n.id,e),className:ie,style:{paddingLeft:14*t+8+"px"},role:"treeitem","aria-expanded":R?B:void 0,"aria-selected":O,"aria-level":t,"aria-grabbed":f&&x?z:void 0,tabIndex:0,onClick:te,onKeyDown:re,onContextMenu:C?e=>M(n,e):void 0,onDragOver:f?e=>D(n,e):void 0,onDragLeave:f?()=>N(n):void 0,onDrop:f?e=>b(n,e):void 0,children:[c&&t>1&&Array.from({length:t-1},(e,n)=>Q("span",{className:F.indentGuide,style:{left:14*(n+1)+33+"px"}},`guide-${n}`)),f&&x&&Q("span",{className:F.dragHandle,draggable:!0,onDragStart:e=>v(n,e),onDragEnd:S,title:"Drag to reorder","aria-label":"Drag to reorder",children:Q(U,{})}),R?Q(W,{expanded:B}):Q("span",{className:F.expandIconPlaceholder}),de,K&&Q(_,{method:K}),oe,X&&Q("span",{className:F.requiredDot,title:"Required"}),Q("span",{className:F.nodeSuffix,children:ae}),C&&Q("button",{type:"button",className:[F.moreButton,y===n.id?F.moreButtonActive:""].filter(Boolean).join(" "),onClick:e=>E(n,e),title:"More actions","aria-label":"More actions",children:Q(Y,{})})]}),se=g?g(ee,le):le;return j("div",{role:"presentation",children:[se,R&&B&&n.children?.map(n=>Q(ne,{...e,node:n,depth:t+1,isExpanded:r.includes(n.id),isSelected:d===n.id,canDragNode:I(n)},n.id))]})},function(e,n){if(e.node!==n.node)return!1;if(e.depth!==n.depth)return!1;if(e.isExpanded!==n.isExpanded)return!1;if(e.isSelected!==n.isSelected)return!1;if(e.searchQuery!==n.searchQuery)return!1;if(e.showIndentGuides!==n.showIndentGuides)return!1;if(e.canDragNode!==n.canDragNode)return!1;if(e.draggable!==n.draggable)return!1;if(e.showContextMenuButton!==n.showContextMenuButton)return!1;if(e.activeMenuNodeId!==n.activeMenuNodeId)return!1;if((e.node.children?.length??0)>0){if(e.expandedIds!==n.expandedIds)return!1;if(e.selectedId!==n.selectedId)return!1;if(e.dragState!==n.dragState)return!1}if(e.dragState.draggedId===e.node.id!==(n.dragState.draggedId===n.node.id))return!1;const t=e.dragState.dragOverId===e.node.id,r=n.dragState.dragOverId===n.node.id;return t===r&&((!t||!r||e.dragState.dragOverPosition===n.dragState.dragOverPosition)&&(e.renderIcon===n.renderIcon&&(e.renderLabel===n.renderLabel&&(e.renderSuffix===n.renderSuffix&&(e.renderNode===n.renderNode&&(e.onToggle===n.onToggle&&(e.onSelect===n.onSelect&&(e.onNodeRef===n.onNodeRef&&(e.canDragNodeFn===n.canDragNodeFn&&(e.onDragStart===n.onDragStart&&(e.onDragOver===n.onDragOver&&(e.onDragLeave===n.onDragLeave&&(e.onDrop===n.onDrop&&(e.onDragEnd===n.onDragEnd&&(e.onContextMenu===n.onContextMenu&&e.onMoreClick===n.onMoreClick)))))))))))))))}),te=a(function(e,t){const{nodes:r,onSelect:a,onExpandedChange:i,defaultExpandedIds:g,defaultExpandDepth:f=1,searchable:m=!1,searchPlaceholder:x="Search...",showExpandAll:v=!1,showRefresh:D=!1,onRefresh:N,toolbar:b,searchRowExtra:C,renderNode:M,renderIcon:E,renderLabel:w,renderSuffix:B,className:O,style:A,size:L="sm",variant:P="default",showIndentGuides:R=!0,maxHeight:k,rootRef:z,draggable:G=!1,dragGroupKey:H,onReorder:W,onMove:U,canDrag:Y,canDrop:J,contextMenuItems:Z,onPatch:_}=e,[te,re]=h(null),[de,oe]=h(ee),[ae,ie]=h(null),le=p(null),se=I(r,{defaultExpandedIds:g,defaultExpandDepth:f,onExpandedChange:i}),ce=S(r),ue=ce.isSearching?se.allBranchIds:ce.expandedBeforeSearch??se.expandedIds,pe=l(e=>{re(e.id),a?.(e)},[a]),he=l(e=>{ce.handleQueryChange(e,se.expandedIds)},[se.expandedIds,ce]),ge=l(e=>{if(!G)return!1;const n=e.metadata;return"section"!==n?.kind&&(!Y||Y(e))},[Y,G]),fe=l((e,n)=>{ge(e)?(n.dataTransfer.effectAllowed="move",n.dataTransfer.setData("text/plain",e.id),oe({draggedId:e.id,dragOverId:null,dragOverPosition:null})):n.preventDefault()},[ge]),me=l((e,t)=>{if(!de.draggedId||de.draggedId===e.id)return;t.preventDefault(),t.dataTransfer.dropEffect="move";const d=t.currentTarget.getBoundingClientRect(),o=(t.clientY-d.top)/d.height,a=(e.children?.length??0)>0;let i;i=a?o<.25?"before":o>.75?"after":"child":o<.5?"before":"after";const l=de.draggedId?n(r,de.draggedId):null;if("child"!==i||!l||!l.ancestorIds.includes(e.id)){if(H&&l){const t=n(r,e.id);if(t){const e=e=>{for(let n=e.nodes.length-1;n>=0;n--){const t=e.nodes[n]?.metadata;if(t&&H in t)return t[H]}},n=e(l),r=e(t);if(void 0!==n&&void 0!==r&&n!==r)return}}if(J){const n=l?.target;if(!n||!J(n,e,i))return}oe(n=>n.dragOverId===e.id&&n.dragOverPosition===i?n:{...n,dragOverId:e.id,dragOverPosition:i})}},[J,de.draggedId,r]),xe=l(e=>{oe(n=>n.dragOverId!==e.id?n:{...n,dragOverId:null,dragOverPosition:null})},[]),Ie=l((e,t)=>{t.preventDefault();const a=de.draggedId,i=de.dragOverPosition;if(!a||!i||a===e.id)return void oe(ee);if("child"===i){const t=n(r,a),o=t?.target;if(!o)return void oe(ee);const i=d(r,a,e.id);return i&&U?.(i,o,e.id),void oe(ee)}const l=n(r,e.id);if(!l)return void oe(ee);const s=l.parent?.children??r,c=s.findIndex(n=>n.id===e.id);if(-1===c)return void oe(ee);let u="before"===i?c:c+1;const p=n(r,a),h=l.parent?.id??null;if((p?.parent?.id??null)!==h){const e=p?.target,n=d(r,a,h,u);return n&&e&&U?.(n,e,h),void oe(ee)}if(p&&p.parent===l.parent){const e=s.findIndex(e=>e.id===a);-1!==e&&e<u&&(u-=1)}const g=o(r,a,u);if(g&&g.fromIndex!==g.toIndex&&(W?.(g),_)){const e=X(g.moved,g.fromIndex,g.toIndex);e.length>0&&_(e,{node:g.moved,type:"reorder"})}oe(ee)},[de,r,U,_,W]),ve=l(()=>{oe(ee)},[]),De=l((e,n,t)=>{if(!Z)return;const r=Z(e);if(0===r.length)return;const d=28*r.length+8,o=Math.min(n,window.innerWidth-200-8),a=Math.min(t,window.innerHeight-d-8);ie({x:Math.max(8,o),y:Math.max(8,a),node:e,items:r})},[Z]),Ne=l(()=>{ie(null)},[]),be=l((e,n)=>{n.preventDefault(),De(e,n.clientX,n.clientY)},[De]),Se=l((e,n)=>{n.stopPropagation();const t=n.currentTarget.getBoundingClientRect();De(e,t.left,t.bottom+4)},[De]);s(()=>{if(!ae)return;const e=e=>{const n=e.target;n.closest(`.${F.contextMenu}`)||n.closest(`.${F.moreButton}`)||Ne()},n=e=>{"Escape"===e.key&&Ne()};return document.addEventListener("mousedown",e),document.addEventListener("keydown",n),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",n)}},[ae,Ne]);const Ce=l(e=>{const n=y(r,e);se.setExpandedIds([...new Set([...se.expandedIds,...n])]),requestAnimationFrame(()=>{se.scrollToNode(e)})},[se,r]);c(t,()=>({expandAll:se.expandAll,collapseAll:se.collapseAll,expandToDepth:se.expandToDepth,getExpandedIds:()=>se.expandedIds,getSelectedNode:()=>{if(!te)return;const e=n(r,te);return e?.target},scrollToNode:Ce,locateNode:e=>{const t=[...r];for(;t.length>0;){const d=t.shift();if(d){if(e(d)){const e=n(r,d.id);return e&&se.setExpandedIds([...new Set([...se.expandedIds,...e.ancestorIds])]),re(d.id),requestAnimationFrame(()=>{se.scrollToNode(d.id)}),d}d.children?.length&&t.push(...d.children)}}}}),[se,Ce,te,r]);const ye=u(()=>({...A,...void 0!==k?{maxHeight:k}:{}}),[A,k]),Me=[F.root,"default"!==P?`pde-tree-variant-${P}`:"",O].filter(Boolean).join(" ");return j("div",{ref:z,className:Me,style:ye,"data-size":L,children:[b&&Q("div",{className:F.toolbar,children:b}),m&&j("div",{className:F.searchRow,children:[j("div",{className:F.searchInputWrap,children:[Q("span",{className:F.searchIcon,children:Q(K,{})}),Q("input",{className:F.searchInput,type:"search",placeholder:x,value:ce.query,onChange:e=>he(e.target.value),"aria-label":"Search tree"})]}),C,v&&Q("button",{type:"button",className:F.iconButton,onClick:se.isAllExpanded?se.collapseAll:se.expandAll,title:se.isAllExpanded?"Collapse all":"Expand all","aria-label":se.isAllExpanded?"Collapse all":"Expand all",children:se.isAllExpanded?Q(q,{size:16,"aria-hidden":"true"}):Q($,{size:16,"aria-hidden":"true"})}),D&&Q("button",{type:"button",className:F.iconButton,onClick:N,title:"Refresh","aria-label":"Refresh",children:Q(T,{size:14,"aria-hidden":"true"})})]}),Q("div",{ref:le,className:F.treeContainer,role:"tree","aria-label":"Tree navigation",children:0===ce.filteredNodes.length?Q("div",{className:F.emptyState,children:ce.isSearching?"No matching results":"No items"}):ce.filteredNodes.map(e=>Q(ne,{node:e,depth:0,expandedIds:ue,selectedId:te,isExpanded:ue.includes(e.id),isSelected:te===e.id,onToggle:se.toggleNode,onSelect:pe,onNodeRef:se.setNodeElementRef,searchQuery:ce.deferredQuery,showIndentGuides:R,renderIcon:E,renderLabel:w,renderSuffix:B,renderNode:M,draggable:G,dragState:de,canDragNode:ge(e),canDragNodeFn:ge,onDragStart:fe,onDragOver:me,onDragLeave:xe,onDrop:Ie,onDragEnd:ve,showContextMenuButton:Boolean(Z),activeMenuNodeId:ae?.node.id??null,onContextMenu:be,onMoreClick:Se},e.id))}),ae&&Q(V,{state:ae,onClose:Ne})]})});export{M as METHOD_LABEL_MAP,te as Tree,E as getMethodLabel,I as useTreeExpansion,S as useTreeSearch};

package/dist/types-DVz8c2Yd.d.cts

@@ -0,0 +1,51 @@
+/**
+ * Generic tree node with extensible metadata.
+ *
+ * The metadata field is generic so each adapter (openapi, json-schema, doc)
+ * can attach its own data without subclassing.
+ */
+interface TreeNode<TMetadata = unknown> {
+    /** Unique identifier within the tree. */
+    id: string;
+    /** Display label. */
+    name: string;
+    /** Optional sort order. Lower values come first. */
+    order?: number;
+    /** Child nodes. Undefined means a leaf; empty array means expandable with no children. */
+    children?: TreeNode<TMetadata>[];
+    /** Adapter-specific data (method, path, jsonPath, type, etc.). */
+    metadata?: TMetadata;
+}
+/**
+ * A resolved path through the tree, from root to a target node.
+ */
+interface TreePath<TMetadata = unknown> {
+    /** All nodes from root (inclusive) to the target (inclusive). */
+    nodes: TreeNode<TMetadata>[];
+    /** The target node (last in nodes). */
+    target: TreeNode<TMetadata>;
+    /** The parent node, or undefined if the target is at the root level. */
+    parent: TreeNode<TMetadata> | undefined;
+    /** IDs of all ancestor nodes (excluding the target). */
+    ancestorIds: string[];
+}
+/**
+ * Options for filtering trees.
+ */
+interface FilterTreeOptions {
+    /** Case-insensitive substring match on node name and id. */
+    query: string;
+    /** When true, ancestors of matching nodes are retained even if they do not match. */
+    keepAncestors?: boolean;
+}
+/**
+ * Options for building expansion paths.
+ */
+interface ExpandOptions {
+    /** Maximum depth to expand. 0 means only the root. Defaults to Infinity. */
+    maxDepth?: number;
+    /** When true, only expand nodes that have children. Defaults to true. */
+    onlyWithChildren?: boolean;
+}
+
+export type { ExpandOptions as E, FilterTreeOptions as F, TreeNode as T, TreePath as a };

package/dist/types-DVz8c2Yd.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Generic tree node with extensible metadata.
+ *
+ * The metadata field is generic so each adapter (openapi, json-schema, doc)
+ * can attach its own data without subclassing.
+ */
+interface TreeNode<TMetadata = unknown> {
+    /** Unique identifier within the tree. */
+    id: string;
+    /** Display label. */
+    name: string;
+    /** Optional sort order. Lower values come first. */
+    order?: number;
+    /** Child nodes. Undefined means a leaf; empty array means expandable with no children. */
+    children?: TreeNode<TMetadata>[];
+    /** Adapter-specific data (method, path, jsonPath, type, etc.). */
+    metadata?: TMetadata;
+}
+/**
+ * A resolved path through the tree, from root to a target node.
+ */
+interface TreePath<TMetadata = unknown> {
+    /** All nodes from root (inclusive) to the target (inclusive). */
+    nodes: TreeNode<TMetadata>[];
+    /** The target node (last in nodes). */
+    target: TreeNode<TMetadata>;
+    /** The parent node, or undefined if the target is at the root level. */
+    parent: TreeNode<TMetadata> | undefined;
+    /** IDs of all ancestor nodes (excluding the target). */
+    ancestorIds: string[];
+}
+/**
+ * Options for filtering trees.
+ */
+interface FilterTreeOptions {
+    /** Case-insensitive substring match on node name and id. */
+    query: string;
+    /** When true, ancestors of matching nodes are retained even if they do not match. */
+    keepAncestors?: boolean;
+}
+/**
+ * Options for building expansion paths.
+ */
+interface ExpandOptions {
+    /** Maximum depth to expand. 0 means only the root. Defaults to Infinity. */
+    maxDepth?: number;
+    /** When true, only expand nodes that have children. Defaults to true. */
+    onlyWithChildren?: boolean;
+}
+
+export type { ExpandOptions as E, FilterTreeOptions as F, TreeNode as T, TreePath as a };

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@powerduck/tree",
+  "version": "0.7.3",
+  "description": "Extensible tree component for API navigation, schema exploration, and documentation. Supports OpenAPI 3.2 nested tags, x-tagGroups, and custom data sources.",
+  "license": "MIT",
+  "author": "powerduck",
+  "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"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./react/index.css": {
+      "import": "./dist/react/index.css",
+      "require": "./dist/react/index.css",
+      "default": "./dist/react/index.css"
+    },
+    "./adapters": {
+      "types": "./dist/adapters/index.d.ts",
+      "import": "./dist/adapters/index.js",
+      "require": "./dist/adapters/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build && npm run test"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": ">=2.4.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@chakra-ui/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@powerduck/openapi-parser": "^0.3.3",
+    "react-icons": "^5.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "terser": "^5.51.2",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.2.0"
+  },
+  "keywords": [
+    "tree",
+    "openapi",
+    "api-navigation",
+    "schema-explorer",
+    "documentation",
+    "chakra-ui",
+    "powerduck"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}