@ii_elif_ii/ui-node-tree 1.0.0

package/dist/index.js

@@ -0,0 +1,843 @@
+// src/components/node-tree.tsx
+import * as React2 from "react";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+
+// src/components/tree-connections.tsx
+import { jsx } from "react/jsx-runtime";
+function TreeConnections({
+  layoutState,
+  debug,
+  strokeColor,
+  strokeWidth,
+  opacity,
+  className
+}) {
+  if (!layoutState.svgBounds) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("unt-tree-connections", className),
+      width: layoutState.svgBounds.width,
+      height: layoutState.svgBounds.height,
+      viewBox: `0 0 ${layoutState.svgBounds.width} ${layoutState.svgBounds.height}`,
+      style: {
+        left: layoutState.svgBounds.offsetX,
+        top: layoutState.svgBounds.offsetY,
+        opacity
+      },
+      children: layoutState.segments.map((segment) => {
+        const debugPalette = [
+          "#22d3ee",
+          "#a855f7",
+          "#f59e0b",
+          "#10b981",
+          "#f97316",
+          "#38bdf8"
+        ];
+        const lineColor = debug ? debugPalette[segment.colorIndex % debugPalette.length] : strokeColor;
+        return /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: segment.x1 - layoutState.svgBounds.offsetX,
+            y1: segment.y1 - layoutState.svgBounds.offsetY,
+            x2: segment.x2 - layoutState.svgBounds.offsetX,
+            y2: segment.y2 - layoutState.svgBounds.offsetY,
+            className: "node-line",
+            style: {
+              strokeDasharray: segment.length,
+              strokeDashoffset: segment.length,
+              animationDelay: `${segment.delay}s`,
+              animationDuration: `${segment.duration}s`
+            },
+            stroke: lineColor,
+            strokeWidth,
+            strokeLinecap: "round"
+          },
+          `${segment.x1}-${segment.y1}-${segment.x2}-${segment.y2}-${segment.delay}`
+        );
+      })
+    }
+  );
+}
+
+// src/components/tree-renderer.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function axisToFlexAlign(axis) {
+  if (axis === "start") {
+    return "flex-start";
+  }
+  if (axis === "end") {
+    return "flex-end";
+  }
+  return "center";
+}
+function axisToFlexJustify(axis) {
+  if (axis === "start") {
+    return "flex-start";
+  }
+  if (axis === "end") {
+    return "flex-end";
+  }
+  return "center";
+}
+function NodeFrame({ node, className, onRef, children, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: (element) => {
+        onRef(node.id, element);
+      },
+      className: cn("unt-tree-node-hit", className),
+      "data-nodeframe": true,
+      "data-viewport-no-pan": true,
+      ...props,
+      children
+    }
+  );
+}
+function renderTreeNode({
+  node,
+  index,
+  parentId,
+  depth,
+  path,
+  flowDown,
+  alignX,
+  alignY,
+  gap,
+  debug,
+  layoutState,
+  doneNodes,
+  registerNode,
+  nodeFrameClassName,
+  nodeFrameStyle
+}) {
+  const stackUnder = !flowDown && node.children?.layout === "stack";
+  if (path.has(node.id)) {
+    return null;
+  }
+  path.add(node.id);
+  const childrenLayoutIsStack = node.children?.layout === "stack" || !flowDown;
+  const childCount = node.children?.nodes.length ?? 0;
+  const isLeaf = childCount === 0;
+  const pathIds = [...path];
+  const childrenContent = node.children?.nodes && node.children.nodes.length > 0 ? /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "unt-tree-children",
+      style: {
+        display: "flex",
+        flexShrink: 0,
+        flexDirection: childrenLayoutIsStack ? "column" : "row",
+        alignItems: axisToFlexAlign(childrenLayoutIsStack ? alignX : alignY),
+        justifyContent: axisToFlexJustify(childrenLayoutIsStack ? alignY : alignX),
+        gap,
+        marginTop: flowDown || stackUnder ? gap : 0,
+        marginLeft: flowDown ? node.children?.layout === "stack" ? gap : 0 : stackUnder ? gap / 2 : gap
+      },
+      children: node.children.nodes.map(
+        (child, childIndex) => renderTreeNode({
+          node: child,
+          index: childIndex,
+          parentId: node.id,
+          depth: depth + 1,
+          path,
+          flowDown,
+          alignX,
+          alignY,
+          gap,
+          debug,
+          layoutState,
+          doneNodes,
+          registerNode,
+          nodeFrameClassName,
+          nodeFrameStyle
+        })
+      )
+    }
+  ) : null;
+  path.delete(node.id);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "unt-tree-node-wrap",
+      style: {
+        display: "flex",
+        position: "relative",
+        flexDirection: flowDown || stackUnder ? "column" : "row",
+        alignItems: axisToFlexAlign(flowDown ? alignX : alignY),
+        justifyContent: axisToFlexJustify(flowDown ? alignY : alignX)
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          NodeFrame,
+          {
+            node,
+            className: cn("node-enter unt-tree-node-frame", nodeFrameClassName),
+            style: {
+              justifyContent: axisToFlexJustify(alignX),
+              animationDuration: `${layoutState.nodeAnimDuration}s`,
+              animationDelay: `${layoutState.nodeDelays.get(node.id) ?? depth * 0.08 + index * 0.04}s`,
+              ...nodeFrameStyle
+            },
+            onRef: registerNode,
+            children: [
+              debug ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "unt-tree-debug-badge",
+                    `unt-tree-debug-badge--${depth % 6}`
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx2("div", { children: `DEPTH: ${depth}` }),
+                    /* @__PURE__ */ jsx2("div", { children: `PARENT-ID: ${parentId ?? "root"}` }),
+                    /* @__PURE__ */ jsx2("div", { children: `NODE-ID: ${node.id}` }),
+                    /* @__PURE__ */ jsx2("div", { children: `C-LAYOUT: ${node.children?.layout ?? "N/A"}` })
+                  ]
+                }
+              ) : null,
+              node.render({
+                node,
+                index,
+                depth,
+                parentId,
+                path: pathIds,
+                isLeaf,
+                childCount,
+                isNodeAnimationDone: doneNodes.has(node.id)
+              })
+            ]
+          }
+        ),
+        childrenContent
+      ]
+    },
+    `${node.id}-${index}`
+  );
+}
+function TreeRenderer({
+  nodeTree,
+  rootLayout,
+  flowDown,
+  alignX,
+  alignY,
+  gap,
+  debug,
+  layoutState,
+  doneNodes,
+  registerNode,
+  rendererClassName,
+  nodeFrameClassName,
+  nodeFrameStyle
+}) {
+  const rootLayoutRow = rootLayout === "row";
+  return /* @__PURE__ */ jsx2(
+    "section",
+    {
+      className: cn("unt-tree-renderer", rendererClassName),
+      style: {
+        gap,
+        display: "flex",
+        width: "100%",
+        overflow: "visible",
+        position: "relative",
+        zIndex: 10,
+        flexDirection: rootLayoutRow ? "row" : "column",
+        alignItems: axisToFlexAlign(rootLayoutRow ? alignY : alignX),
+        justifyContent: axisToFlexJustify(rootLayoutRow ? alignX : alignY)
+      },
+      children: nodeTree.map(
+        (node, index) => renderTreeNode({
+          node,
+          index,
+          depth: 0,
+          path: /* @__PURE__ */ new Set(),
+          flowDown,
+          alignX,
+          alignY,
+          gap,
+          debug,
+          layoutState,
+          doneNodes,
+          registerNode,
+          nodeFrameClassName,
+          nodeFrameStyle
+        })
+      )
+    }
+  );
+}
+
+// src/hooks/use-node-tree-layout.ts
+import * as React from "react";
+var EMPTY_LAYOUT = {
+  segments: [],
+  nodeDelays: /* @__PURE__ */ new Map(),
+  nodeAnimDuration: 0.42,
+  animationTotal: 0,
+  svgBounds: null
+};
+function collectEdges(nodes) {
+  const edges = [];
+  const visiting = /* @__PURE__ */ new Set();
+  const visit = (node) => {
+    if (visiting.has(node.id)) {
+      return;
+    }
+    visiting.add(node.id);
+    if (node.children?.nodes && node.children.nodes.length > 0) {
+      node.children.nodes.forEach((child, index) => {
+        const key = `${node.id}=>${child.id}`;
+        edges.push({
+          key,
+          from: node.id,
+          to: child.id,
+          index,
+          count: node.children?.nodes.length ?? 1
+        });
+        visit(child);
+      });
+    }
+    visiting.delete(node.id);
+  };
+  nodes.forEach(visit);
+  return edges;
+}
+function collectDescendants(nodes) {
+  const map = /* @__PURE__ */ new Map();
+  const visiting = /* @__PURE__ */ new Set();
+  const visit = (node) => {
+    if (visiting.has(node.id)) {
+      return [];
+    }
+    visiting.add(node.id);
+    const descendants = [];
+    node.children?.nodes.forEach((child) => {
+      descendants.push(child.id);
+      descendants.push(...visit(child));
+    });
+    map.set(node.id, descendants);
+    visiting.delete(node.id);
+    return descendants;
+  };
+  nodes.forEach(visit);
+  return map;
+}
+function useNodeTreeLayout({
+  nodeTree,
+  direction,
+  gap,
+  padding,
+  animationSpeed,
+  debug,
+  containerRef,
+  nodeRefs
+}) {
+  const [layoutState, setLayoutState] = React.useState(EMPTY_LAYOUT);
+  const [doneNodes, setDoneNodes] = React.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const doneNodesRef = React.useRef(/* @__PURE__ */ new Set());
+  const edges = React.useMemo(() => collectEdges(nodeTree), [nodeTree]);
+  const descendantMap = React.useMemo(
+    () => collectDescendants(nodeTree),
+    [nodeTree]
+  );
+  const totalAnimationSec = Math.max(0.1, animationSpeed / 1e3);
+  const drawConnections = React.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const flowDown = direction === "down";
+    const getRelativeRect = (element) => {
+      let left = 0;
+      let top = 0;
+      let current = element;
+      while (current && current !== container) {
+        left += current.offsetLeft;
+        top += current.offsetTop;
+        current = current.offsetParent;
+      }
+      return {
+        left,
+        top,
+        right: left + element.offsetWidth,
+        bottom: top + element.offsetHeight,
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      };
+    };
+    const rectMap = /* @__PURE__ */ new Map();
+    nodeRefs.current.forEach((el, id) => {
+      rectMap.set(id, getRelativeRect(el));
+    });
+    const nextSegments = [];
+    const nextNodeDelays = /* @__PURE__ */ new Map();
+    const baseSecondsPerPixel = 1 / 900;
+    const baseNodeAnimDuration = 0.42;
+    const edgeColorIndex = debug ? /* @__PURE__ */ new Map() : null;
+    const edgeData = /* @__PURE__ */ new Map();
+    edges.forEach((edge) => {
+      const fromRect = rectMap.get(edge.from);
+      const toRect = rectMap.get(edge.to);
+      if (!fromRect || !toRect) {
+        return;
+      }
+      const fromX = flowDown ? fromRect.left + fromRect.width / 2 : fromRect.right;
+      const fromY = flowDown ? fromRect.bottom : fromRect.top + fromRect.height / 2;
+      const toX = flowDown ? toRect.left + toRect.width / 2 : toRect.left;
+      const toY = flowDown ? toRect.top : toRect.top + toRect.height / 2;
+      edgeData.set(edge.key, {
+        edge,
+        fromX,
+        fromY,
+        fromBottom: fromRect.bottom,
+        fromCenterX: fromRect.left + fromRect.width / 2,
+        toX,
+        toY,
+        toLeft: toRect.left,
+        toCenterY: toRect.top + toRect.height / 2
+      });
+    });
+    const pushSegment = (x1, y1, x2, y2, depth, delay, colorIndex, order) => {
+      const length = Math.hypot(x2 - x1, y2 - y1);
+      const duration = Math.max(0.05, length * baseSecondsPerPixel);
+      nextSegments.push({
+        x1,
+        y1,
+        x2,
+        y2,
+        length,
+        depth,
+        delay,
+        duration,
+        colorIndex,
+        order
+      });
+      return duration;
+    };
+    const visit = (node, depth, nodeDelay) => {
+      const existing = nextNodeDelays.get(node.id) ?? 0;
+      const resolvedDelay = Math.max(existing, nodeDelay);
+      nextNodeDelays.set(node.id, resolvedDelay);
+      const childEdges = node.children?.nodes.map((child) => edgeData.get(`${node.id}=>${child.id}`)).filter((edge) => Boolean(edge)) ?? [];
+      const stackLayout = node.children?.layout === "stack";
+      const descendantIds = flowDown && stackLayout ? descendantMap.get(node.id) ?? [] : [];
+      const descendantLefts = flowDown && stackLayout ? descendantIds.map((id) => rectMap.get(id)).filter((rect) => Boolean(rect)).map((rect) => rect.left) : [];
+      const descendantMinLeft = descendantLefts.length > 0 ? Math.min(...descendantLefts) : void 0;
+      const gutterX = flowDown && stackLayout ? (descendantMinLeft ?? (childEdges.length > 0 ? Math.min(...childEdges.map((edge) => edge.toLeft)) : 0)) - gap / 2 : 0;
+      const gutterXRight = !flowDown && stackLayout ? (childEdges.length > 0 ? Math.min(...childEdges.map((edge) => edge.toLeft)) : 0) - gap / 2 : 0;
+      const orderedChildren = node.children?.nodes.map((child) => {
+        const edge = edgeData.get(`${node.id}=>${child.id}`);
+        if (!edge) {
+          return null;
+        }
+        const dx = edge.toX - edge.fromX;
+        const dy = edge.toY - edge.fromY;
+        const length = Math.hypot(dx, dy);
+        return { child, edge, length, toX: edge.toX };
+      }).filter(
+        (entry) => Boolean(entry)
+      ) ?? [];
+      if (debug) {
+        orderedChildren.sort((a, b) => {
+          if (a.length !== b.length) {
+            return a.length - b.length;
+          }
+          return a.toX - b.toX;
+        });
+      }
+      orderedChildren.forEach((entry, index) => {
+        const { child, edge } = entry;
+        const edgeKey = edge.edge.key;
+        let colorIndex = 0;
+        if (edgeColorIndex) {
+          if (!edgeColorIndex.has(edgeKey)) {
+            edgeColorIndex.set(edgeKey, edgeColorIndex.size);
+          }
+          colorIndex = edgeColorIndex.get(edgeKey) ?? 0;
+        }
+        const order = orderedChildren.length - 1 - index;
+        const edgeDelay = resolvedDelay + baseNodeAnimDuration + index * 0.04;
+        let totalDuration = 0;
+        if (flowDown && stackLayout) {
+          const baseDrop = Math.max(12, gap / 2);
+          const targetY = edge.toCenterY;
+          const midY = edge.fromY + Math.min(baseDrop, (targetY - edge.fromY) * 0.6);
+          totalDuration += pushSegment(
+            edge.fromX,
+            edge.fromY,
+            edge.fromX,
+            midY,
+            depth,
+            edgeDelay,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            edge.fromX,
+            midY,
+            gutterX,
+            midY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            gutterX,
+            midY,
+            gutterX,
+            targetY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            gutterX,
+            targetY,
+            edge.toLeft,
+            targetY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+        } else if (!flowDown && stackLayout) {
+          const targetY = edge.toCenterY;
+          const baseDrop = Math.max(12, gap / 2);
+          const midY = edge.fromBottom + Math.min(baseDrop, (targetY - edge.fromBottom) * 0.6);
+          totalDuration += pushSegment(
+            edge.fromCenterX,
+            edge.fromBottom,
+            edge.fromCenterX,
+            midY,
+            depth,
+            edgeDelay,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            edge.fromCenterX,
+            midY,
+            gutterXRight,
+            midY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            gutterXRight,
+            midY,
+            gutterXRight,
+            targetY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            gutterXRight,
+            targetY,
+            edge.toLeft,
+            targetY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+        } else if (flowDown) {
+          const midY = edge.fromY + (edge.toY - edge.fromY) * 0.5;
+          totalDuration += pushSegment(
+            edge.fromX,
+            edge.fromY,
+            edge.fromX,
+            midY,
+            depth,
+            edgeDelay,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            edge.fromX,
+            midY,
+            edge.toX,
+            midY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            edge.toX,
+            midY,
+            edge.toX,
+            edge.toY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+        } else {
+          const midX = edge.fromX + (edge.toX - edge.fromX) * 0.5;
+          totalDuration += pushSegment(
+            edge.fromX,
+            edge.fromY,
+            midX,
+            edge.fromY,
+            depth,
+            edgeDelay,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            midX,
+            edge.fromY,
+            midX,
+            edge.toY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+          totalDuration += pushSegment(
+            midX,
+            edge.toY,
+            edge.toX,
+            edge.toY,
+            depth,
+            edgeDelay + totalDuration,
+            colorIndex,
+            order
+          );
+        }
+        visit(child, depth + 1, edgeDelay + totalDuration);
+      });
+    };
+    nodeTree.forEach((node) => visit(node, 0, 0));
+    if (nextSegments.length === 0) {
+      setLayoutState((prev) => ({
+        ...prev,
+        segments: [],
+        svgBounds: null,
+        animationTotal: 0
+      }));
+      setDoneNodes(/* @__PURE__ */ new Set());
+      doneNodesRef.current = /* @__PURE__ */ new Set();
+      return;
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    nextSegments.forEach((segment) => {
+      minX = Math.min(minX, segment.x1, segment.x2);
+      minY = Math.min(minY, segment.y1, segment.y2);
+      maxX = Math.max(maxX, segment.x1, segment.x2);
+      maxY = Math.max(maxY, segment.y1, segment.y2);
+    });
+    if (!Number.isFinite(minX) || !Number.isFinite(minY) || !Number.isFinite(maxX) || !Number.isFinite(maxY)) {
+      return;
+    }
+    const width = Math.max(1, maxX - minX + padding * 2);
+    const height = Math.max(1, maxY - minY + padding * 2);
+    const offsetX = minX - padding;
+    const offsetY = minY - padding;
+    const maxLineEnd = Math.max(
+      0,
+      ...nextSegments.map((segment) => segment.delay + segment.duration)
+    );
+    const maxNodeEnd = Math.max(0, ...Array.from(nextNodeDelays.values())) + baseNodeAnimDuration;
+    const animationMax = Math.max(maxLineEnd, maxNodeEnd);
+    const scale = animationMax > 0 ? totalAnimationSec / animationMax : 1;
+    const scaledSegments = nextSegments.map((segment) => ({
+      ...segment,
+      delay: segment.delay * scale,
+      duration: segment.duration * scale
+    })).sort((a, b) => a.order - b.order);
+    const scaledNodeDelays = /* @__PURE__ */ new Map();
+    nextNodeDelays.forEach((value, key) => {
+      scaledNodeDelays.set(key, value * scale);
+    });
+    setLayoutState({
+      segments: scaledSegments,
+      nodeDelays: scaledNodeDelays,
+      nodeAnimDuration: baseNodeAnimDuration * scale,
+      animationTotal: animationMax * scale,
+      svgBounds: { width, height, offsetX, offsetY }
+    });
+    setDoneNodes(/* @__PURE__ */ new Set());
+    doneNodesRef.current = /* @__PURE__ */ new Set();
+  }, [
+    animationSpeed,
+    containerRef,
+    debug,
+    descendantMap,
+    direction,
+    edges,
+    gap,
+    nodeRefs,
+    nodeTree,
+    padding,
+    totalAnimationSec
+  ]);
+  React.useLayoutEffect(() => {
+    const rafId = requestAnimationFrame(drawConnections);
+    return () => cancelAnimationFrame(rafId);
+  }, [drawConnections, nodeTree]);
+  React.useEffect(() => {
+    if (layoutState.animationTotal <= 0 || layoutState.nodeDelays.size === 0) {
+      return;
+    }
+    const entries = Array.from(layoutState.nodeDelays.entries()).map(([id, delay]) => ({
+      id,
+      end: delay + layoutState.nodeAnimDuration
+    })).sort((a, b) => a.end - b.end);
+    doneNodesRef.current = /* @__PURE__ */ new Set();
+    setDoneNodes(/* @__PURE__ */ new Set());
+    const start = performance.now();
+    let rafId = 0;
+    let index = 0;
+    const tick = () => {
+      const elapsed = (performance.now() - start) / 1e3;
+      let updated = false;
+      while (index < entries.length && elapsed >= entries[index].end) {
+        doneNodesRef.current.add(entries[index].id);
+        index += 1;
+        updated = true;
+      }
+      if (updated) {
+        setDoneNodes(new Set(doneNodesRef.current));
+      }
+      if (index < entries.length) {
+        rafId = requestAnimationFrame(tick);
+      }
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, [
+    layoutState.animationTotal,
+    layoutState.nodeAnimDuration,
+    layoutState.nodeDelays
+  ]);
+  return { doneNodes, layoutState };
+}
+
+// src/components/node-tree.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var NodeTree = React2.forwardRef(
+  ({
+    className,
+    nodeTree,
+    layout,
+    connection,
+    animation,
+    nodeFrame,
+    debug = false,
+    style,
+    ...props
+  }, ref) => {
+    const containerRef = React2.useRef(null);
+    const nodeRefs = React2.useRef(/* @__PURE__ */ new Map());
+    const registerNode = React2.useCallback(
+      (id, element) => {
+        const registry = nodeRefs.current;
+        if (element) {
+          registry.set(id, element);
+        } else {
+          registry.delete(id);
+        }
+      },
+      []
+    );
+    const resolvedAlign = layout?.align ?? "center";
+    const resolvedDirection = layout?.direction ?? "down";
+    const resolvedRootLayout = layout?.root ?? "stack";
+    const resolvedPaddingContainer = layout?.containerPadding ?? 128;
+    const resolvedPadding = layout?.padding ?? 64;
+    const resolvedGap = layout?.gap ?? 64;
+    const resolvedStrokeColor = connection?.color ?? "rgba(255,255,255)";
+    const resolvedStrokeWidth = connection?.width ?? 1;
+    const resolvedAnimationDurationMs = animation?.durationMs ?? 2e3;
+    const resolvedNodeFrameStyle = nodeFrame?.style;
+    const { doneNodes, layoutState } = useNodeTreeLayout({
+      nodeTree,
+      direction: resolvedDirection,
+      gap: resolvedGap,
+      padding: resolvedPadding,
+      animationSpeed: resolvedAnimationDurationMs,
+      debug,
+      containerRef,
+      nodeRefs
+    });
+    const flowDown = resolvedDirection === "down";
+    const alignValue = resolvedAlign;
+    const alignX = typeof alignValue === "string" ? alignValue : alignValue.x;
+    const alignY = typeof alignValue === "string" ? "start" : alignValue.y;
+    const resolvedConnectionOpacity = connection?.opacity ?? (debug ? 1 : 0.1);
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref,
+        className: cn("unt-tree-root-container", className?.root),
+        style,
+        ...props,
+        children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            ref: containerRef,
+            className: cn("unt-tree-canvas", className?.canvas),
+            style: { padding: resolvedPaddingContainer },
+            children: [
+              /* @__PURE__ */ jsx3(
+                TreeConnections,
+                {
+                  layoutState,
+                  debug,
+                  strokeColor: resolvedStrokeColor,
+                  strokeWidth: resolvedStrokeWidth,
+                  opacity: resolvedConnectionOpacity,
+                  className: className?.connections
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                TreeRenderer,
+                {
+                  nodeTree,
+                  rootLayout: resolvedRootLayout,
+                  flowDown,
+                  alignX,
+                  alignY,
+                  gap: resolvedGap,
+                  debug,
+                  layoutState,
+                  doneNodes,
+                  registerNode,
+                  rendererClassName: className?.renderer,
+                  nodeFrameClassName: className?.frame,
+                  nodeFrameStyle: resolvedNodeFrameStyle
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+NodeTree.displayName = "NodeTree";
+export {
+  NodeTree
+};
+//# sourceMappingURL=index.js.map