@tangle-network/sandbox-ui 0.11.0 → 0.13.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
+};

package/dist/files.d.ts

@@ -1,12 +1,72 @@
-import { a as FileTabData } from './file-tabs-BLfxfmAH.js';
-export { F as FileNode, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
+import { F as FileNode, a as FileTabData } from './file-tabs-BLfxfmAH.js';
+export { b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GitStatusEntry, ContextMenuItem, ContextMenuOpenContext, GitStatus } from '@pierre/trees';
+import { ReactNode, CSSProperties } from 'react';
 import { b as DocumentEditorMode, D as DocumentEditorBackend, d as DocumentEditorPaneCollaborationConfig } from './document-editor-pane-A70-EhdQ.js';
 import { A as ArtifactPaneProps } from './artifact-pane-Bh45Ssco.js';
-import 'react';
 import '@hocuspocus/provider';
 import 'yjs';
 
+/**
+ * Re-export Pierre's git-status union under a stable name so consumers
+ * don't import directly from the dep. If we ever swap the underlying
+ * implementation, only this file changes.
+ */
+type RichFileTreeGitStatus = GitStatus;
+type RichFileTreeGitEntry = GitStatusEntry;
+interface RichFileTreeProps {
+    /**
+     * Either a recursive `FileNode` tree (matches the existing FileTree
+     * input) or a flat list of canonical paths. Pass exactly one.
+     */
+    root?: FileNode;
+    paths?: ReadonlyArray<string>;
+    /** Currently-selected path. Pierre supports multi-select internally; the
+     * wrapper exposes a single string for parity with FileTree. */
+    selectedPath?: string;
+    /** Called whenever the selection changes (single-select fan-out). */
+    onSelect?: (path: string) => void;
+    /** Show the inline search input. Defaults to true. */
+    search?: boolean;
+    /** Open / closed initial expansion. Defaults to "open" — match FileTree. */
+    initialExpansion?: "open" | "closed";
+    /** Optional git-status decorations per path. */
+    gitStatus?: ReadonlyArray<RichFileTreeGitEntry>;
+    /**
+     * Right-click / button-lane menu content. Receives the row and the
+     * trigger context (which interaction opened the menu).
+     */
+    renderContextMenu?: (item: ContextMenuItem, context: ContextMenuOpenContext) => ReactNode;
+    /** Optional header rendered above the tree rows. */
+    header?: ReactNode;
+    /**
+     * Theme override map for shadow-DOM CSS variables. Most consumers can
+     * leave this — defaults derive from the host element's computed
+     * tokens via `cssVarFromToken()`.
+     */
+    themeOverrides?: Partial<RichFileTreeThemeVars>;
+    className?: string;
+    style?: CSSProperties;
+    /** Inline height (or set via `style.height`). Defaults to 100% of parent. */
+    height?: number | string;
+}
+interface RichFileTreeThemeVars {
+    /** Selected-row background. */
+    selectedBg: string;
+    /** Selected-row foreground. */
+    selectedFg: string;
+    /** Default row foreground. */
+    fg: string;
+    /** Hover background. */
+    hoverBg: string;
+    /** Border / divider color. */
+    border: string;
+    /** Muted (parent path, breadcrumb) foreground. */
+    mutedFg: string;
+}
+declare function RichFileTree({ root, paths, selectedPath, onSelect, search, initialExpansion, gitStatus, renderContextMenu, header, themeOverrides, className, style, height, }: RichFileTreeProps): react_jsx_runtime.JSX.Element;
+
 /**
  * FilePreview — universal file renderer.
  *
@@ -66,4 +126,4 @@ interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
  */
 declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, editor, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
-export { FileArtifactPane, type FileArtifactPaneProps, FilePreview, type FilePreviewProps, FileTabData };
+export { FileArtifactPane, type FileArtifactPaneProps, FileNode, FilePreview, type FilePreviewProps, FileTabData, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars };

package/dist/files.js

@@ -1,3 +1,6 @@
+import {
+  RichFileTree
+} from "./chunk-LQNEZDRM.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -13,5 +16,6 @@ export {
   FilePreview,
   FileTabs,
   FileTree,
+  RichFileTree,
   filterFileTree
 };