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

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
 };

package/dist/globals.css

@@ -1082,6 +1082,9 @@
   .h-\[380px\] {
     height: 380px;
   }
+  .h-\[480px\] {
+    height: 480px;
+  }
   .h-\[500px\] {
     height: 500px;
   }

package/dist/index.d.ts

@@ -14,7 +14,7 @@ import * as React$1 from 'react';
 import { b as ToolPart } from './parts-CyGkM6Fp.js';
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
 export { F as FileNode, a as FileTabData, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
-export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.js';
+export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars } from './files.js';
 export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, H as HARNESS_OPTIONS, i as HarnessPicker, j as HarnessPickerProps, k as HarnessType, I as Invoice, l as InvoiceTable, m as InvoiceTableProps, M as ModelInfo, n as ModelPicker, o as ModelPickerProps, p as ModelPickerVariant, q as ModelPreset, N as NavItem, r as NewSandboxCard, s as NewSandboxCardProps, P as PanelConfig, t as PlanCardData, u as PlanCards, v as PlanCardsProps, w as ProductVariant, x as ProfileAvatar, y as ProfileAvatarProps, z as ProfileComparison, A as ProfileComparisonProps, E as ProfileSelector, F as ProfileSelectorProps, R as RailButton, G as RailButtonProps, J as RailModeButton, K as RailModeButtonProps, L as RailSeparator, O as RailSeparatorProps, Q as ResourceMeter, S as ResourceMeterProps, T as SIDEBAR_MOBILE_WIDTH, U as SIDEBAR_PANEL_WIDTH, V as SIDEBAR_RAIL_WIDTH, W as SIDEBAR_TOTAL_WIDTH, X as SandboxCard, Y as SandboxCardData, Z as SandboxCardProps, _ as SandboxStatus, $ as SandboxTable, a0 as SandboxTableProps, a1 as Sidebar, a2 as SidebarContent, a3 as SidebarContentProps, a4 as SidebarPanel, a5 as SidebarPanelContent, a6 as SidebarPanelContentProps, a7 as SidebarPanelHeader, a8 as SidebarPanelHeaderProps, a9 as SidebarPanelProps, aa as SidebarProps, ab as SidebarProvider, ac as SidebarProviderProps, ad as SidebarRail, ae as SidebarRailFooter, af as SidebarRailFooterProps, ag as SidebarRailHeader, ah as SidebarRailHeaderProps, ai as SidebarRailNav, aj as SidebarRailNavProps, ak as SidebarRailProps, al as SidebarUser, am as TopNavLink, an as VariantList, ao as VariantListProps, ap as canonicalModelId, aq as formatContext, ar as formatPricing, as as useSidebar } from './variant-list-BrHYcBCk.js';
 export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-CPTcNlGs.js';
 export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
@@ -40,6 +40,7 @@ import '@radix-ui/react-label';
 import '@hocuspocus/provider';
 import 'yjs';
 import '@tiptap/react';
+import '@pierre/trees';
 import 'nanostores';
 import 'clsx';
 

package/dist/index.js

@@ -169,6 +169,9 @@ import {
   TableHeader,
   TableRow
 } from "./chunk-34I7UFSX.js";
+import {
+  RichFileTree
+} from "./chunk-LQNEZDRM.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -461,6 +464,7 @@ export {
   RailSeparator,
   RealtimeSessionRegistry,
   ResourceMeter,
+  RichFileTree,
   RunGroup,
   RuntimePane,
   SIDEBAR_MOBILE_WIDTH,

package/dist/styles.css

@@ -1082,6 +1082,9 @@
   .h-\[380px\] {
     height: 380px;
   }
+  .h-\[480px\] {
+    height: 480px;
+  }
   .h-\[500px\] {
     height: 500px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -151,6 +151,7 @@
   },
   "dependencies": {
     "@nanostores/react": "^1.1.0",
+    "@pierre/trees": "1.0.0-beta.3",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.0",