@tangle-network/sandbox-ui 0.2.1 → 0.3.3

package/dist/chunk-JF6E2DS5.js

@@ -0,0 +1,610 @@
+import {
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/workspace/artifact-pane.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ArtifactPane({
+  eyebrow,
+  title,
+  subtitle,
+  meta,
+  headerActions,
+  tabs,
+  toolbar,
+  footer,
+  emptyState,
+  children,
+  className,
+  contentClassName
+}) {
+  const hasContent = children !== void 0 && children !== null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex h-full min-h-0 flex-col overflow-hidden rounded-[var(--radius-xl)] bg-[linear-gradient(180deg,rgba(255,255,255,0.02),transparent_18%),var(--bg-dark)] text-[var(--text-primary)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "border-b border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(98,114,243,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              eyebrow && /* @__PURE__ */ jsx("div", { className: "mb-1 inline-flex max-w-full items-center rounded-full border border-[var(--border-accent)] bg-[var(--brand-cool)]/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--brand-cool)]", children: eyebrow }),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 text-[15px] font-semibold text-[var(--text-primary)]", children: title }),
+              (subtitle || meta) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-[var(--text-muted)]", children: [
+                subtitle && /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle }),
+                meta && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: meta })
+              ] })
+            ] }),
+            headerActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: headerActions })
+          ] }),
+          tabs,
+          toolbar && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] px-3 py-2", children: toolbar })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-auto", contentClassName), children: hasContent ? children : emptyState ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", children: emptyState }) : null }),
+        footer && /* @__PURE__ */ jsx("footer", { className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-card)] px-3 py-2", children: footer })
+      ]
+    }
+  );
+}
+
+// src/files/file-tree.tsx
+import { useState } from "react";
+import {
+  File,
+  FileText,
+  FileCode,
+  FileSpreadsheet,
+  FileImage,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  FileJson
+} from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } 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-[var(--text-secondary)]";
+    default:
+      return "text-[var(--text-muted)]";
+  }
+}
+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-[var(--brand-cool)]" : getFileColor(node.name);
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        onClick: handleClick,
+        className: cn(
+          "flex items-center gap-1.5 w-full text-left px-2 py-1 rounded-[var(--radius-sm)] text-sm transition-colors",
+          "hover:bg-[var(--bg-hover)]",
+          isSelected && "bg-[var(--brand-cool)]/10 text-[var(--text-primary)]",
+          !isSelected && "text-[var(--text-secondary)]"
+        ),
+        style: { paddingLeft: `${depth * 16 + 8}px` },
+        children: [
+          isDir && /* @__PURE__ */ jsx2(
+            ChevronRight,
+            {
+              className: cn(
+                "h-3 w-3 shrink-0 text-[var(--text-muted)] transition-transform",
+                expanded && "rotate-90"
+              )
+            }
+          ),
+          !isDir && /* @__PURE__ */ jsx2("span", { className: "w-3" }),
+          /* @__PURE__ */ jsx2(Icon, { className: cn("h-4 w-4 shrink-0", iconColor) }),
+          /* @__PURE__ */ jsx2("span", { className: "truncate", children: node.name }),
+          node.size !== void 0 && !isDir && /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)] text-xs ml-auto tabular-nums", children: formatSize(node.size) })
+        ]
+      }
+    ),
+    isDir && expanded && node.children && /* @__PURE__ */ jsx2("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__ */ jsx2(
+      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__ */ jsx2("div", { className: cn("text-sm font-[var(--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__ */ jsx2(
+    TreeNode,
+    {
+      node: child,
+      depth: 0,
+      selectedPath,
+      onSelect,
+      defaultExpanded
+    },
+    child.path
+  )) : /* @__PURE__ */ jsx2(
+    TreeNode,
+    {
+      node: visibleRoot,
+      depth: 0,
+      selectedPath,
+      onSelect,
+      defaultExpanded
+    }
+  ) });
+}
+
+// src/files/file-preview.tsx
+import {
+  Download,
+  X,
+  FileText as FileText2
+} from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } 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)) 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";
+  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__ */ jsxs3("div", { className: "relative bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-2.5", children: [
+      /* @__PURE__ */ jsxs3("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-[var(--font-mono)] text-[var(--text-muted)]", children: filename }),
+      /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx3("span", { children: language }),
+        /* @__PURE__ */ jsx3("span", { className: "h-1 w-1 rounded-full bg-[var(--border-hover)]" }),
+        /* @__PURE__ */ jsxs3("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__ */ jsxs3("tr", { className: "hover:bg-[var(--bg-hover)]/50", children: [
+      /* @__PURE__ */ jsx3("td", { className: "text-right pr-4 pl-4 py-0 select-none text-[var(--text-muted)] text-xs font-[var(--font-mono)] w-10 align-top leading-[1.55]", children: i + 1 }),
+      /* @__PURE__ */ jsx3("td", { className: "pr-4 py-0 font-[var(--font-mono)] text-[13px] text-[var(--text-secondary)] 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-[var(--border-subtle)]", children: /* @__PURE__ */ jsxs3("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { className: "bg-[var(--bg-elevated)] sticky top-0", children: headers.map((h, i) => /* @__PURE__ */ jsx3(
+      "th",
+      {
+        className: "px-3 py-2 text-left text-xs font-semibold text-[var(--text-secondary)] border-b border-[var(--border-subtle)] whitespace-nowrap",
+        children: h
+      },
+      i
+    )) }) }),
+    /* @__PURE__ */ jsx3("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx3("tr", { className: "border-b border-[var(--border-subtle)] hover:bg-[var(--bg-hover)]/50", children: row.map((cell, j) => /* @__PURE__ */ jsx3(
+      "td",
+      {
+        className: "px-3 py-1.5 text-[var(--text-secondary)] font-[var(--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-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)]", 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-[var(--border-subtle)] overflow-hidden bg-[var(--bg-input)]", children: /* @__PURE__ */ jsx3(
+    "iframe",
+    {
+      src: blobUrl,
+      title: filename,
+      className: "w-full h-[70vh] border-0"
+    }
+  ) });
+}
+function TextPreview({ content }) {
+  return /* @__PURE__ */ jsx3("pre", { className: "bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)] p-4 overflow-auto max-h-[70vh] text-sm text-[var(--text-secondary)] font-[var(--font-mono)] leading-[1.55]", children: content });
+}
+function UnsupportedPreview({
+  filename,
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center rounded-[var(--radius-md)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-input)] px-6 py-16 text-center text-[var(--text-muted)]", children: [
+    /* @__PURE__ */ jsx3(FileText2, { className: "mb-3 h-12 w-12 opacity-30" }),
+    /* @__PURE__ */ jsx3("p", { className: "text-sm text-[var(--text-secondary)]", 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-[var(--border-subtle)] bg-[var(--bg-input)] p-5", children: /* @__PURE__ */ jsx3(Markdown, { className: "prose-sm max-w-none", children: content }) });
+}
+function EmptyPreview({ filename }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-16 text-[var(--text-muted)]", children: [
+    /* @__PURE__ */ jsx3(FileText2, { className: "h-12 w-12 mb-3 opacity-30" }),
+    /* @__PURE__ */ jsxs3("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__ */ jsxs3("div", { className: cn("flex flex-col h-full", className), children: [
+    !hideHeader && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[var(--border-subtle)] shrink-0", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: filename }),
+        /* @__PURE__ */ jsx3("div", { className: "mt-0.5 text-[11px] uppercase tracking-[0.12em] text-[var(--text-muted)]", children: previewLabel })
+      ] }),
+      onDownload && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: onDownload,
+          "aria-label": `Download ${filename}`,
+          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] 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-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+          children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("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" && content && /* @__PURE__ */ jsx3(CsvPreview, { content }),
+      (previewType === "code" || previewType === "json" || previewType === "yaml") && content && /* @__PURE__ */ jsx3(CodePreview, { content, filename }),
+      previewType === "text" && content && /* @__PURE__ */ jsx3(TextPreview, { content }),
+      previewType === "markdown" && content && /* @__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" && /* @__PURE__ */ jsx3(EmptyPreview, { filename }),
+      !hasRenderableSource && /* @__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 jsxs4 } 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-[var(--border-subtle)] bg-[var(--bg-dark)] overflow-x-auto", className), children: tabs.map((tab) => {
+    const isActive = tab.id === activeId;
+    const Icon = getTabIcon(tab.name);
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cn(
+          "group flex items-center border-r border-[var(--border-subtle)] shrink-0",
+          isActive ? "bg-[var(--bg-card)] text-[var(--text-primary)] border-b-2 border-b-[var(--brand-cool)]" : "text-[var(--text-muted)] hover:bg-[var(--bg-elevated)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs4(
+            "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-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand-cool)]/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-[var(--brand-cool)]" })
+              ]
+            }
+          ),
+          /* @__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-[var(--bg-hover)] focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/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 { Download as Download2, X as X3 } from "lucide-react";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function FileArtifactPane({
+  filename,
+  content,
+  blobUrl,
+  mimeType,
+  onClose,
+  onDownload,
+  path,
+  tabs = [],
+  activeTabId,
+  onTabSelect,
+  onTabClose,
+  eyebrow = "Artifact",
+  meta,
+  toolbar,
+  footer,
+  className
+}) {
+  const showTabs = tabs.length > 0 && onTabSelect && onTabClose;
+  return /* @__PURE__ */ jsx5(
+    ArtifactPane,
+    {
+      eyebrow,
+      title: filename,
+      subtitle: path,
+      meta,
+      toolbar,
+      footer,
+      className,
+      tabs: showTabs ? /* @__PURE__ */ jsx5(
+        FileTabs,
+        {
+          tabs,
+          activeId: activeTabId,
+          onSelect: onTabSelect,
+          onClose: onTabClose
+        }
+      ) : void 0,
+      headerActions: /* @__PURE__ */ jsxs5(Fragment, { children: [
+        onDownload && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Download ${filename}`,
+            onClick: onDownload,
+            className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/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-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+            children: /* @__PURE__ */ jsx5(X3, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx5(
+        FilePreview,
+        {
+          filename,
+          content,
+          blobUrl,
+          mimeType,
+          hideHeader: true
+        }
+      )
+    }
+  );
+}
+
+export {
+  ArtifactPane,
+  filterFileTree,
+  FileTree,
+  FilePreview,
+  FileTabs,
+  FileArtifactPane
+};