@particle-academy/react-fancy 1.7.4 → 1.8.1

package/README.md

@@ -125,6 +125,7 @@ npx vite build                      # Build demo app (verifies imports work)
 | Breadcrumbs | Navigation breadcrumb trail with separator | [docs](docs/Breadcrumbs.md) |
 | Navbar | Responsive navigation bar with hamburger collapse | [docs](docs/Navbar.md) |
 | Pagination | Page navigation with prev/next and ellipsis | [docs](docs/Pagination.md) |
+| TreeNav | Hierarchical file/folder tree with expand/collapse, selection, and extension-based icons | [docs](docs/TreeNav.md) |
 
 ### Rich Content
 

package/dist/index.cjs

@@ -10028,7 +10028,7 @@ function DiagramEntity({
 }
 DiagramEntity.displayName = "DiagramEntity";
 var HEADER_HEIGHT = 36;
-var FIELD_HEIGHT = 28;
+var FIELD_HEIGHT = 29;
 var SYMBOL_SIZE = 12;
 function oneSymbol(pt, direction) {
   const s = SYMBOL_SIZE * 0.6;
@@ -10125,82 +10125,32 @@ function DiagramRelation({
     const toFieldY = toFieldIdx >= 0 ? HEADER_HEIGHT + toFieldIdx * FIELD_HEIGHT + FIELD_HEIGHT / 2 : toRect.height / 2;
     const fromCx = fromRect.x + fromRect.width / 2;
     const toCx = toRect.x + toRect.width / 2;
-    const fromCy = fromRect.y + fromRect.height / 2;
-    const toCy = toRect.y + toRect.height / 2;
-    const dx = Math.abs(fromCx - toCx);
-    const dy = Math.abs(fromCy - toCy);
     let fromPt, toPt;
     let fromDir;
     let toDir;
-    if (dx > dy * 0.5) {
-      if (fromCx < toCx) {
-        fromPt = { x: fromRect.x + fromRect.width, y: fromRect.y + fromFieldY };
-        toPt = { x: toRect.x, y: toRect.y + toFieldY };
-        fromDir = "right";
-        toDir = "left";
-      } else {
-        fromPt = { x: fromRect.x, y: fromRect.y + fromFieldY };
-        toPt = { x: toRect.x + toRect.width, y: toRect.y + toFieldY };
-        fromDir = "left";
-        toDir = "right";
-      }
+    if (fromCx <= toCx) {
+      fromPt = { x: fromRect.x + fromRect.width, y: fromRect.y + fromFieldY };
+      toPt = { x: toRect.x, y: toRect.y + toFieldY };
+      fromDir = "right";
+      toDir = "left";
     } else {
-      if (fromCy < toCy) {
-        fromPt = { x: fromRect.x + fromRect.width / 2, y: fromRect.y + fromRect.height };
-        toPt = { x: toRect.x + toRect.width / 2, y: toRect.y };
-        fromDir = "down";
-        toDir = "up";
-      } else {
-        fromPt = { x: fromRect.x + fromRect.width / 2, y: fromRect.y };
-        toPt = { x: toRect.x + toRect.width / 2, y: toRect.y + toRect.height };
-        fromDir = "up";
-        toDir = "down";
-      }
+      fromPt = { x: fromRect.x, y: fromRect.y + fromFieldY };
+      toPt = { x: toRect.x + toRect.width, y: toRect.y + toFieldY };
+      fromDir = "left";
+      toDir = "right";
     }
     const offsetFrom = { ...fromPt };
     const offsetTo = { ...toPt };
-    switch (fromDir) {
-      case "right":
-        offsetFrom.x += SYMBOL_SIZE;
-        break;
-      case "left":
-        offsetFrom.x -= SYMBOL_SIZE;
-        break;
-      case "down":
-        offsetFrom.y += SYMBOL_SIZE;
-        break;
-      case "up":
-        offsetFrom.y -= SYMBOL_SIZE;
-        break;
-    }
-    switch (toDir) {
-      case "right":
-        offsetTo.x += SYMBOL_SIZE;
-        break;
-      case "left":
-        offsetTo.x -= SYMBOL_SIZE;
-        break;
-      case "down":
-        offsetTo.y += SYMBOL_SIZE;
-        break;
-      case "up":
-        offsetTo.y -= SYMBOL_SIZE;
-        break;
-    }
+    if (fromDir === "right") offsetFrom.x += SYMBOL_SIZE;
+    else offsetFrom.x -= SYMBOL_SIZE;
+    if (toDir === "left") offsetTo.x -= SYMBOL_SIZE;
+    else offsetTo.x += SYMBOL_SIZE;
     const adx = Math.abs(offsetTo.x - offsetFrom.x);
     const ady = Math.abs(offsetTo.y - offsetFrom.y);
-    let linePath;
-    if (adx > ady) {
-      const off = adx * 0.4;
-      const cp1x = offsetFrom.x + (offsetTo.x > offsetFrom.x ? off : -off);
-      const cp2x = offsetTo.x + (offsetTo.x > offsetFrom.x ? -off : off);
-      linePath = `M${offsetFrom.x},${offsetFrom.y} C${cp1x},${offsetFrom.y} ${cp2x},${offsetTo.y} ${offsetTo.x},${offsetTo.y}`;
-    } else {
-      const off = Math.max(ady * 0.4, 20);
-      const cp1y = offsetFrom.y + (offsetTo.y > offsetFrom.y ? off : -off);
-      const cp2y = offsetTo.y + (offsetTo.y > offsetFrom.y ? -off : off);
-      linePath = `M${offsetFrom.x},${offsetFrom.y} C${offsetFrom.x},${cp1y} ${offsetTo.x},${cp2y} ${offsetTo.x},${offsetTo.y}`;
-    }
+    const off = Math.max(adx * 0.4, ady * 0.25, 40);
+    const cp1x = offsetFrom.x + (fromDir === "right" ? off : -off);
+    const cp2x = offsetTo.x + (toDir === "left" ? -off : off);
+    const linePath = `M${offsetFrom.x},${offsetFrom.y} C${cp1x},${offsetFrom.y} ${cp2x},${offsetTo.y} ${offsetTo.x},${offsetTo.y}`;
     const startSymbol = getSymbolPath(type, "start", fromPt, fromDir);
     const endSymbol = getSymbolPath(type, "end", toPt, toDir);
     return { linePath, startSymbol, endSymbol, midX: (offsetFrom.x + offsetTo.x) / 2, midY: (offsetFrom.y + offsetTo.y) / 2 };
@@ -10553,6 +10503,155 @@ var Diagram = Object.assign(DiagramRoot, {
   Relation: DiagramRelation,
   Toolbar: DiagramToolbar
 });
+var TreeNavContext = react.createContext(null);
+function useTreeNav() {
+  const ctx = react.useContext(TreeNavContext);
+  if (!ctx) {
+    throw new Error("useTreeNav must be used within a <TreeNav> component");
+  }
+  return ctx;
+}
+var EXT_COLORS = {
+  ts: "#3178c6",
+  tsx: "#3178c6",
+  js: "#f7df1e",
+  jsx: "#f7df1e",
+  php: "#777bb4",
+  html: "#e34c26",
+  htm: "#e34c26",
+  css: "#264de4",
+  json: "#a1a1aa",
+  md: "#71717a",
+  yaml: "#cb171e",
+  yml: "#cb171e"
+};
+function FileIcon({ ext }) {
+  const color = ext && EXT_COLORS[ext.toLowerCase()] || "#71717a";
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 1h5.5L13 4.5V14a1 1 0 01-1 1H4a1 1 0 01-1-1V2a1 1 0 011-1z", stroke: color, strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 1v4h4", stroke: color, strokeWidth: "1.2" })
+  ] });
+}
+function FolderIcon({ open }) {
+  if (open) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1.5 3.5a1 1 0 011-1h3l1.5 1.5H13a1 1 0 011 1V5H2.5V3.5z", fill: "#fbbf24" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 6h13l-1.5 7.5H2.5L1 6z", fill: "#fbbf24", opacity: "0.7" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1.5 3a1 1 0 011-1h3l1.5 1.5H13a1 1 0 011 1v8a1 1 0 01-1 1H2.5a1 1 0 01-1-1V3z", fill: "#fbbf24" }) });
+}
+function ChevronIcon({ open }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("shrink-0 transition-transform duration-150", open && "rotate-90"),
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
+    }
+  );
+}
+function TreeNode({ node, depth }) {
+  const { selectedId, onSelect, expandedIds, toggle, indentSize, showIcons } = useTreeNav();
+  const isFolder = node.type === "folder" || node.children && node.children.length > 0;
+  const isExpanded = expandedIds.includes(node.id);
+  const isSelected = selectedId === node.id;
+  const paddingLeft = depth * indentSize + 4;
+  const handleClick = () => {
+    if (node.disabled) return;
+    if (isFolder) {
+      toggle(node.id);
+    }
+    onSelect?.(node.id, node);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-tree-node": "", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled: node.disabled,
+        className: cn(
+          "flex w-full items-center gap-1 rounded-md py-0.5 text-left text-[13px] transition-colors",
+          isSelected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+          node.disabled && "pointer-events-none opacity-40"
+        ),
+        style: { paddingLeft },
+        children: [
+          isFolder && /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { open: isExpanded }),
+          !isFolder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3.5 shrink-0" }),
+          showIcons && (node.icon ?? (isFolder ? /* @__PURE__ */ jsxRuntime.jsx(FolderIcon, { open: isExpanded }) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { ext: node.ext ?? node.label.split(".").pop() }))),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: node.label })
+        ]
+      }
+    ),
+    isFolder && isExpanded && node.children && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-tree-node-children": "", children: node.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node: child, depth: depth + 1 }, child.id)) })
+  ] });
+}
+TreeNode.displayName = "TreeNode";
+function collectFolderIds(nodes) {
+  const ids = [];
+  for (const node of nodes) {
+    if (node.children && node.children.length > 0) {
+      ids.push(node.id);
+      ids.push(...collectFolderIds(node.children));
+    }
+  }
+  return ids;
+}
+function TreeNavRoot({
+  nodes,
+  selectedId,
+  onSelect,
+  expandedIds: controlledExpanded,
+  defaultExpandedIds,
+  onExpandedChange,
+  defaultExpandAll = false,
+  indentSize = 16,
+  showIcons = true,
+  className
+}) {
+  const [internalExpanded, setInternalExpanded] = react.useState(() => {
+    if (defaultExpandedIds) return defaultExpandedIds;
+    if (defaultExpandAll) return collectFolderIds(nodes);
+    return [];
+  });
+  const isControlled = controlledExpanded !== void 0;
+  const expandedIds = isControlled ? controlledExpanded : internalExpanded;
+  const toggle = react.useCallback(
+    (id) => {
+      const next = expandedIds.includes(id) ? expandedIds.filter((v) => v !== id) : [...expandedIds, id];
+      if (!isControlled) {
+        setInternalExpanded(next);
+      }
+      onExpandedChange?.(next);
+    },
+    [expandedIds, isControlled, onExpandedChange]
+  );
+  const ctx = react.useMemo(
+    () => ({ selectedId, onSelect, expandedIds, toggle, indentSize, showIcons }),
+    [selectedId, onSelect, expandedIds, toggle, indentSize, showIcons]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "data-react-fancy-tree-nav": "",
+      className: cn("flex flex-col gap-0.5 py-1 text-sm", className),
+      children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node, depth: 0 }, node.id))
+    }
+  ) });
+}
+TreeNavRoot.displayName = "TreeNav";
+var TreeNav = Object.assign(TreeNavRoot, {
+  Node: TreeNode
+});
 
 exports.Accordion = Accordion;
 exports.Action = Action;
@@ -10615,6 +10714,7 @@ exports.TimePicker = TimePicker;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip;
+exports.TreeNav = TreeNav;
 exports.cn = cn;
 exports.configureIcons = configureIcons;
 exports.find = find;
@@ -10650,5 +10750,6 @@ exports.usePopover = usePopover;
 exports.useSidebar = useSidebar;
 exports.useTabs = useTabs;
 exports.useToast = useToast;
+exports.useTreeNav = useTreeNav;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map