@tangle-network/ui 1.0.0

package/dist/chunk-HJKCSXCH.js

@@ -0,0 +1,737 @@
+import {
+  ArtifactPane
+} from "./chunk-CSAIKY36.js";
+import {
+  Markdown
+} from "./chunk-CD53GZOM.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/files/file-tree.tsx
+import { useState } from "react";
+import {
+  File,
+  FileText,
+  FileCode,
+  FileSpreadsheet,
+  FileImage,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  FileJson
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isNodeVisible(node, visibility) {
+  if (!visibility) return true;
+  if (visibility.hiddenPaths?.includes(node.path)) {
+    return false;
+  }
+  if (visibility.hiddenPathPrefixes?.some(
+    (prefix) => node.path === prefix || node.path.startsWith(`${prefix}/`)
+  )) {
+    return false;
+  }
+  return visibility.isVisible ? visibility.isVisible(node) : true;
+}
+function filterFileTree(root, visibility) {
+  if (!isNodeVisible(root, visibility)) {
+    return null;
+  }
+  if (root.type === "file") {
+    return root;
+  }
+  const children = (root.children ?? []).map((child) => filterFileTree(child, visibility)).filter((child) => child !== null);
+  if (root.children && root.children.length > 0 && children.length === 0) {
+    return null;
+  }
+  return {
+    ...root,
+    children
+  };
+}
+var FILE_ICONS = {
+  pdf: FileText,
+  csv: FileSpreadsheet,
+  xlsx: FileSpreadsheet,
+  xls: FileSpreadsheet,
+  py: FileCode,
+  ts: FileCode,
+  js: FileCode,
+  json: FileJson,
+  yaml: FileCode,
+  yml: FileCode,
+  md: FileText,
+  txt: FileText,
+  png: FileImage,
+  jpg: FileImage,
+  jpeg: FileImage,
+  gif: FileImage,
+  svg: FileImage
+};
+function getFileIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  return FILE_ICONS[ext] || File;
+}
+function getFileColor(name) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  switch (ext) {
+    case "pdf":
+      return "text-red-400";
+    case "py":
+      return "text-yellow-400";
+    case "ts":
+    case "js":
+      return "text-blue-400";
+    case "json":
+      return "text-green-400";
+    case "yaml":
+    case "yml":
+      return "text-[var(--accent-text)]";
+    case "csv":
+    case "xlsx":
+      return "text-emerald-400";
+    case "md":
+      return "text-foreground";
+    default:
+      return "text-muted-foreground";
+  }
+}
+function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isSelected = node.path === selectedPath;
+  const isDir = node.type === "directory";
+  const handleClick = () => {
+    if (isDir) {
+      setExpanded(!expanded);
+    }
+    onSelect?.(node.path, node);
+  };
+  const Icon = isDir ? expanded ? FolderOpen : Folder : getFileIcon(node.name);
+  const iconColor = isDir ? "text-primary" : getFileColor(node.name);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex items-center gap-1.5 w-full text-left px-2 py-[2px] cursor-pointer text-[13px] transition-colors",
+          "appearance-none bg-transparent border-none",
+          "hover:bg-accent",
+          isSelected ? "bg-primary/15 text-foreground" : "text-foreground"
+        ),
+        style: { paddingLeft: `${depth * 16 + 8}px` },
+        onClick: handleClick,
+        "aria-expanded": isDir ? expanded : void 0,
+        children: [
+          isDir && /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: cn(
+                "h-3 w-3 shrink-0 text-muted-foreground transition-transform",
+                expanded && "rotate-90"
+              )
+            }
+          ),
+          !isDir && /* @__PURE__ */ jsx("span", { className: "w-3" }),
+          /* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4 shrink-0", iconColor) }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: node.name }),
+          node.size !== void 0 && !isDir && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs ml-auto tabular-nums", children: formatSize(node.size) })
+        ]
+      }
+    ),
+    isDir && expanded && node.children && /* @__PURE__ */ jsx("div", { children: node.children.sort((a, b) => {
+      if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    }).map((child) => /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        node: child,
+        depth: depth + 1,
+        selectedPath,
+        onSelect,
+        defaultExpanded
+      },
+      child.path
+    )) })
+  ] });
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}K`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+}
+function FileTree({
+  root,
+  selectedPath,
+  onSelect,
+  className,
+  defaultExpanded = true,
+  visibility
+}) {
+  const visibleRoot = filterFileTree(root, visibility);
+  if (!visibleRoot) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("text-sm font-sans", className), children: visibleRoot.children ? visibleRoot.children.sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  }).map((child) => /* @__PURE__ */ jsx(
+    TreeNode,
+    {
+      node: child,
+      depth: 0,
+      selectedPath,
+      onSelect,
+      defaultExpanded
+    },
+    child.path
+  )) : /* @__PURE__ */ jsx(
+    TreeNode,
+    {
+      node: visibleRoot,
+      depth: 0,
+      selectedPath,
+      onSelect,
+      defaultExpanded
+    }
+  ) });
+}
+
+// src/files/rich-file-tree.tsx
+import {
+  FileTree as PierreFileTree,
+  useFileTree as usePierreFileTree
+} from "@pierre/trees/react";
+import { useEffect, useMemo } from "react";
+import { jsx as jsx2 } 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__ */ jsx2(
+    PierreFileTree,
+    {
+      model,
+      header,
+      renderContextMenu,
+      className,
+      style: themeStyle
+    }
+  );
+}
+
+// src/files/file-preview.tsx
+import {
+  Download,
+  X,
+  FileText as FileText2
+} from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function getPreviewType(filename, mimeType) {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+  if (mimeType?.startsWith("application/pdf") || ext === "pdf") return "pdf";
+  if (mimeType?.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext)) return "image";
+  if (["csv"].includes(ext)) return "csv";
+  if (["xlsx", "xls"].includes(ext)) return "spreadsheet";
+  if (["py", "ts", "js", "tsx", "jsx", "sh", "bash"].includes(ext) || ["profile", "bashrc", "bash_logout", "env", "gitignore"].includes(ext)) return "code";
+  if (["json"].includes(ext)) return "json";
+  if (["yaml", "yml"].includes(ext)) return "yaml";
+  if (["md", "markdown"].includes(ext)) return "markdown";
+  if (["txt", "log", "text"].includes(ext)) return "text";
+  if (mimeType?.startsWith("text/plain")) return "text";
+  return "unknown";
+}
+function getPreviewLabel(previewType) {
+  switch (previewType) {
+    case "pdf":
+      return "PDF";
+    case "image":
+      return "Image";
+    case "csv":
+      return "CSV";
+    case "spreadsheet":
+      return "Spreadsheet";
+    case "code":
+      return "Code";
+    case "json":
+      return "JSON";
+    case "yaml":
+      return "YAML";
+    case "markdown":
+      return "Markdown";
+    case "text":
+      return "Text";
+    default:
+      return "File";
+  }
+}
+function CodePreview({ content, filename }) {
+  const lines = content.split("\n");
+  const language = filename.split(".").pop()?.toUpperCase() || "TXT";
+  return /* @__PURE__ */ jsxs2("div", { className: "relative bg-background rounded-[var(--radius-md)] border border-border overflow-hidden", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2.5", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-3 h-3 rounded-full bg-[#FF5F57]" }),
+        /* @__PURE__ */ jsx3("div", { className: "w-3 h-3 rounded-full bg-[#FEBC2E]" }),
+        /* @__PURE__ */ jsx3("div", { className: "w-3 h-3 rounded-full bg-[#8E59FF]" })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "ml-2 min-w-0 flex-1 truncate text-xs font-mono text-muted-foreground", children: filename }),
+      /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx3("span", { children: language }),
+        /* @__PURE__ */ jsx3("span", { className: "h-1 w-1 rounded-full bg-[var(--border-hover)]" }),
+        /* @__PURE__ */ jsxs2("span", { children: [
+          lines.length,
+          " lines"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "overflow-auto max-h-[70vh]", children: /* @__PURE__ */ jsx3("table", { className: "w-full", children: /* @__PURE__ */ jsx3("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tr", { className: "hover:bg-accent", children: [
+      /* @__PURE__ */ jsx3("td", { className: "text-right pr-4 pl-4 py-0 select-none text-muted-foreground text-xs font-mono w-10 align-top leading-[1.55]", children: i + 1 }),
+      /* @__PURE__ */ jsx3("td", { className: "pr-4 py-0 font-mono text-[13px] text-foreground leading-[1.55] whitespace-pre", children: line || " " })
+    ] }, i)) }) }) })
+  ] });
+}
+function parseCsvRow(line) {
+  const cells = [];
+  let current = "";
+  let inQuotes = false;
+  for (let index = 0; index < line.length; index += 1) {
+    const char = line[index];
+    const next = line[index + 1];
+    if (char === '"') {
+      if (inQuotes && next === '"') {
+        current += '"';
+        index += 1;
+        continue;
+      }
+      inQuotes = !inQuotes;
+      continue;
+    }
+    if (char === "," && !inQuotes) {
+      cells.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  cells.push(current.trim());
+  return cells;
+}
+function CsvPreview({ content }) {
+  const lines = content.trim().split(/\r?\n/).filter(Boolean);
+  if (lines.length === 0) return null;
+  const headers = parseCsvRow(lines[0]).map((header) => header.replace(/^"|"$/g, ""));
+  const rows = lines.slice(1).map(
+    (line) => parseCsvRow(line).map((cell) => cell.replace(/^"|"$/g, ""))
+  );
+  return /* @__PURE__ */ jsx3("div", { className: "overflow-auto max-h-[70vh] rounded-[var(--radius-md)] border border-border", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { className: "bg-muted/50 sticky top-0", children: headers.map((h, i) => /* @__PURE__ */ jsx3(
+      "th",
+      {
+        className: "px-3 py-2 text-left text-xs font-semibold text-foreground border-b border-border whitespace-nowrap",
+        children: h
+      },
+      i
+    )) }) }),
+    /* @__PURE__ */ jsx3("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx3("tr", { className: "border-b border-border hover:bg-accent", children: row.map((cell, j) => /* @__PURE__ */ jsx3(
+      "td",
+      {
+        className: "px-3 py-1.5 text-foreground font-mono text-xs whitespace-nowrap",
+        children: cell
+      },
+      j
+    )) }, i)) })
+  ] }) });
+}
+function ImagePreview({ src, filename }) {
+  return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center p-4 bg-background rounded-[var(--radius-md)] border border-border", children: /* @__PURE__ */ jsx3("img", { src, alt: filename, className: "max-w-full max-h-[70vh] object-contain rounded" }) });
+}
+function PdfPreview({ blobUrl, filename }) {
+  return /* @__PURE__ */ jsx3("div", { className: "rounded-[var(--radius-md)] border border-border overflow-hidden bg-background", children: /* @__PURE__ */ jsx3(
+    "iframe",
+    {
+      src: blobUrl,
+      title: filename,
+      className: "w-full h-[70vh] border-0"
+    }
+  ) });
+}
+function TextPreview({ content }) {
+  return /* @__PURE__ */ jsx3("pre", { className: "bg-background rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]", children: content });
+}
+function UnsupportedPreview({
+  filename,
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border bg-background px-6 py-16 text-center text-muted-foreground", children: [
+    /* @__PURE__ */ jsx3(FileText2, { className: "mb-3 h-12 w-12 opacity-30" }),
+    /* @__PURE__ */ jsx3("p", { className: "text-sm text-foreground", children: title }),
+    /* @__PURE__ */ jsx3("p", { className: "mt-1 max-w-md text-xs", children: description }),
+    /* @__PURE__ */ jsx3("p", { className: "mt-4 text-[11px] uppercase tracking-[0.12em]", children: filename })
+  ] });
+}
+function MarkdownPreview({ content }) {
+  return /* @__PURE__ */ jsx3("div", { className: "rounded-[var(--radius-md)] border border-border bg-background p-5", children: /* @__PURE__ */ jsx3(Markdown, { className: "prose-sm max-w-none", children: content }) });
+}
+function EmptyPreview({ filename }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-16 text-muted-foreground", children: [
+    /* @__PURE__ */ jsx3(FileText2, { className: "h-12 w-12 mb-3 opacity-30" }),
+    /* @__PURE__ */ jsxs2("p", { className: "text-sm", children: [
+      "Cannot preview ",
+      filename
+    ] }),
+    /* @__PURE__ */ jsx3("p", { className: "text-xs mt-1", children: "Download to view this file" })
+  ] });
+}
+function FilePreview({
+  filename,
+  content,
+  blobUrl,
+  mimeType,
+  onClose,
+  onDownload,
+  hideHeader = false,
+  className
+}) {
+  const previewType = getPreviewType(filename, mimeType);
+  const previewLabel = getPreviewLabel(previewType);
+  const hasRenderableSource = Boolean(content) || Boolean(blobUrl) || previewType === "unknown" || previewType === "spreadsheet";
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col h-full", className), children: [
+    !hideHeader && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border shrink-0", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-medium text-foreground", children: filename }),
+        /* @__PURE__ */ jsx3("div", { className: "mt-0.5 text-[11px] uppercase tracking-[0.12em] text-muted-foreground", children: previewLabel })
+      ] }),
+      onDownload && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: onDownload,
+          "aria-label": `Download ${filename}`,
+          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx3(Download, { className: "h-4 w-4" })
+        }
+      ),
+      onClose && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          "aria-label": `Close ${filename}`,
+          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-auto p-3", children: [
+      previewType === "pdf" && blobUrl && /* @__PURE__ */ jsx3(PdfPreview, { blobUrl, filename }),
+      previewType === "image" && blobUrl && /* @__PURE__ */ jsx3(ImagePreview, { src: blobUrl, filename }),
+      previewType === "csv" && typeof content === "string" && /* @__PURE__ */ jsx3(CsvPreview, { content }),
+      (previewType === "code" || previewType === "json" || previewType === "yaml") && typeof content === "string" && /* @__PURE__ */ jsx3(CodePreview, { content, filename }),
+      previewType === "text" && typeof content === "string" && /* @__PURE__ */ jsx3(TextPreview, { content }),
+      previewType === "markdown" && typeof content === "string" && /* @__PURE__ */ jsx3(MarkdownPreview, { content }),
+      previewType === "spreadsheet" && /* @__PURE__ */ jsx3(
+        UnsupportedPreview,
+        {
+          filename,
+          title: "Spreadsheet preview is not available in this surface",
+          description: "Download the workbook or convert it to CSV when you need an inline preview."
+        }
+      ),
+      previewType === "unknown" && typeof content !== "string" && /* @__PURE__ */ jsx3(EmptyPreview, { filename }),
+      previewType === "unknown" && typeof content === "string" && /* @__PURE__ */ jsx3(TextPreview, { content }),
+      !hasRenderableSource && typeof content !== "string" && /* @__PURE__ */ jsx3(
+        UnsupportedPreview,
+        {
+          filename,
+          title: "Preview data is not available yet",
+          description: "This artifact can be shown once the app provides inline content or a downloadable blob."
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/files/file-tabs.tsx
+import { X as X2, FileText as FileText3, FileCode as FileCode2, FileSpreadsheet as FileSpreadsheet2 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function getTabIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  if (["pdf"].includes(ext)) return FileText3;
+  if (["csv", "xlsx"].includes(ext)) return FileSpreadsheet2;
+  return FileCode2;
+}
+function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
+  if (tabs.length === 0) return null;
+  return /* @__PURE__ */ jsx4("div", { className: cn("flex items-center border-b border-border bg-background overflow-x-auto", className), children: tabs.map((tab) => {
+    const isActive = tab.id === activeId;
+    const Icon = getTabIcon(tab.name);
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cn(
+          "group flex items-center border-r border-border shrink-0",
+          isActive ? "bg-card text-foreground border-b-2 border-b-primary" : "text-muted-foreground hover:bg-muted/50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSelect(tab.id),
+              className: "flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/60",
+              children: [
+                /* @__PURE__ */ jsx4(Icon, { className: "h-3 w-3 shrink-0" }),
+                /* @__PURE__ */ jsx4("span", { className: "max-w-[120px] truncate", children: tab.name }),
+                tab.dirty && /* @__PURE__ */ jsx4("span", { className: "h-1.5 w-1.5 rounded-full bg-primary" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Close ${tab.name}`,
+              onClick: () => onClose(tab.id),
+              className: "mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-accent focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 group-hover:opacity-100",
+              children: /* @__PURE__ */ jsx4(X2, { className: "h-2.5 w-2.5" })
+            }
+          )
+        ]
+      },
+      tab.id
+    );
+  }) });
+}
+
+// src/files/file-artifact-pane.tsx
+import { lazy, Suspense } from "react";
+import { Download as Download2, X as X3 } from "lucide-react";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var LazyDocumentEditorPane = lazy(async () => {
+  const module = await import("./document-editor-pane-A5LT5H4N.js");
+  return { default: module.DocumentEditorPane };
+});
+function FileArtifactPane({
+  filename,
+  content,
+  blobUrl,
+  mimeType,
+  onClose,
+  onDownload,
+  path,
+  tabs = [],
+  activeTabId,
+  onTabSelect,
+  onTabClose,
+  eyebrow = "Artifact",
+  meta,
+  toolbar,
+  footer,
+  className,
+  editor
+}) {
+  const showTabs = tabs.length > 0 && onTabSelect && onTabClose;
+  const paneTabs = showTabs ? /* @__PURE__ */ jsx5(
+    FileTabs,
+    {
+      tabs,
+      activeId: activeTabId,
+      onSelect: onTabSelect,
+      onClose: onTabClose
+    }
+  ) : void 0;
+  const isMarkdown = mimeType === "text/markdown" || filename.toLowerCase().endsWith(".md") || path?.toLowerCase().endsWith(".md");
+  const isEditableMarkdown = isMarkdown && editor?.enabled;
+  const headerActions = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    onDownload && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Download ${filename}`,
+        onClick: onDownload,
+        className: "rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+        children: /* @__PURE__ */ jsx5(Download2, { className: "h-4 w-4" })
+      }
+    ),
+    onClose && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Close ${filename}`,
+        onClick: onClose,
+        className: "rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+        children: /* @__PURE__ */ jsx5(X3, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+  if (isEditableMarkdown) {
+    return /* @__PURE__ */ jsx5(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsx5(
+          ArtifactPane,
+          {
+            eyebrow,
+            title: filename,
+            subtitle: path,
+            meta,
+            toolbar,
+            footer,
+            className,
+            tabs: paneTabs,
+            headerActions,
+            children: /* @__PURE__ */ jsx5("div", { className: "flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-border bg-muted text-sm text-muted-foreground", children: "Loading editor\u2026" })
+          }
+        ),
+        children: /* @__PURE__ */ jsx5(
+          LazyDocumentEditorPane,
+          {
+            eyebrow,
+            title: filename,
+            subtitle: path,
+            meta,
+            toolbar,
+            footer,
+            className,
+            tabs: paneTabs,
+            headerActions,
+            markdown: content ?? "",
+            mode: editor.mode,
+            defaultMode: editor.defaultMode,
+            onModeChange: editor.onModeChange,
+            backend: editor.backend,
+            collaboration: editor.collaboration,
+            placeholder: editor.placeholder,
+            autoFocus: editor.autoFocus,
+            readOnly: editor.readOnly,
+            saving: editor.saving,
+            saveLabel: editor.saveLabel,
+            onChange: editor.onChange,
+            onSave: editor.onSave,
+            previewClassName: editor.previewClassName,
+            editorClassName: editor.editorClassName
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    ArtifactPane,
+    {
+      eyebrow,
+      title: filename,
+      subtitle: path,
+      meta,
+      toolbar,
+      footer,
+      className,
+      tabs: paneTabs,
+      headerActions,
+      children: /* @__PURE__ */ jsx5(
+        FilePreview,
+        {
+          filename,
+          content,
+          blobUrl,
+          mimeType,
+          hideHeader: true
+        }
+      )
+    }
+  );
+}
+
+export {
+  filterFileTree,
+  FileTree,
+  RichFileTree,
+  FilePreview,
+  FileTabs,
+  FileArtifactPane
+};