@tangle-network/sandbox-ui 0.10.9 → 0.12.0

package/dist/chunk-LQNEZDRM.js

@@ -0,0 +1,109 @@
+// src/files/rich-file-tree.tsx
+import {
+  FileTree as PierreFileTree,
+  useFileTree as usePierreFileTree
+} from "@pierre/trees/react";
+import { useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function cssVarFromToken(name) {
+  return `var(${name})`;
+}
+var DEFAULT_THEME = {
+  selectedBg: cssVarFromToken("--accent-surface-soft"),
+  selectedFg: cssVarFromToken("--accent-text"),
+  fg: cssVarFromToken("--foreground"),
+  hoverBg: cssVarFromToken("--muted"),
+  border: cssVarFromToken("--border"),
+  mutedFg: cssVarFromToken("--muted-foreground")
+};
+function flattenFileNode(node, out = []) {
+  if (node.type === "file" && node.path) {
+    out.push(node.path);
+    return out;
+  }
+  if (node.type === "directory") {
+    if (node.children?.length) {
+      for (const child of node.children) {
+        flattenFileNode(child, out);
+      }
+      return out;
+    }
+    if (node.path) out.push(`${node.path}/`);
+  }
+  return out;
+}
+function RichFileTree({
+  root,
+  paths,
+  selectedPath,
+  onSelect,
+  search = true,
+  initialExpansion = "open",
+  gitStatus,
+  renderContextMenu,
+  header,
+  themeOverrides,
+  className,
+  style,
+  height
+}) {
+  if (root && paths) {
+    throw new Error("RichFileTree: pass `root` or `paths`, not both");
+  }
+  const flatPaths = useMemo(() => {
+    if (paths) return Array.from(paths);
+    if (root) return flattenFileNode(root);
+    return [];
+  }, [paths, root]);
+  const { model } = usePierreFileTree({
+    paths: flatPaths,
+    search,
+    initialExpansion,
+    onSelectionChange: (selected) => {
+      const next = selected[0];
+      if (next && next !== selectedPath) onSelect?.(next);
+    }
+  });
+  useEffect(() => {
+    if (!gitStatus) return;
+    model.setGitStatus(gitStatus);
+  }, [model, gitStatus]);
+  useEffect(() => {
+    model.resetPaths(flatPaths);
+  }, [model, flatPaths]);
+  useEffect(() => {
+    if (!selectedPath) return;
+    const current = model.getSelectedPaths();
+    if (current.length === 1 && current[0] === selectedPath) return;
+    const m = model;
+    m.setSelectedPaths?.([selectedPath]);
+  }, [model, selectedPath]);
+  const theme = { ...DEFAULT_THEME, ...themeOverrides };
+  const themeStyle = useMemo(
+    () => ({
+      ["--trees-selected-bg-override"]: theme.selectedBg,
+      ["--trees-selected-fg-override"]: theme.selectedFg,
+      ["--trees-fg-override"]: theme.fg,
+      ["--trees-hover-bg-override"]: theme.hoverBg,
+      ["--trees-border-color-override"]: theme.border,
+      ["--trees-muted-fg-override"]: theme.mutedFg,
+      height: height ?? "100%",
+      ...style
+    }),
+    [theme, height, style]
+  );
+  return /* @__PURE__ */ jsx(
+    PierreFileTree,
+    {
+      model,
+      header,
+      renderContextMenu,
+      className,
+      style: themeStyle
+    }
+  );
+}
+
+export {
+  RichFileTree
+};