@tangle-network/sandbox-ui 0.3.7 → 0.3.11

package/dist/{chunk-JF6E2DS5.js → chunk-6NYG2R7V.js}

@@ -1,3 +1,6 @@
+import {
+  ArtifactPane
+} from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
 } from "./chunk-LTFK464G.js";
@@ -5,53 +8,6 @@ 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 {
@@ -65,7 +21,7 @@ import {
   ChevronRight,
   FileJson
 } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function isNodeVisible(node, visibility) {
   if (!visibility) return true;
   if (visibility.hiddenPaths?.includes(node.path)) {
@@ -153,8 +109,8 @@ function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
   };
   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(
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: handleClick,
@@ -166,7 +122,7 @@ function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
         ),
         style: { paddingLeft: `${depth * 16 + 8}px` },
         children: [
-          isDir && /* @__PURE__ */ jsx2(
+          isDir && /* @__PURE__ */ jsx(
             ChevronRight,
             {
               className: cn(
@@ -175,17 +131,17 @@ function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
               )
             }
           ),
-          !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 && /* @__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-[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) => {
+    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__ */ jsx2(
+    }).map((child) => /* @__PURE__ */ jsx(
       TreeNode,
       {
         node: child,
@@ -215,10 +171,10 @@ function FileTree({
   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) => {
+  return /* @__PURE__ */ jsx("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(
+  }).map((child) => /* @__PURE__ */ jsx(
     TreeNode,
     {
       node: child,
@@ -228,7 +184,7 @@ function FileTree({
       defaultExpanded
     },
     child.path
-  )) : /* @__PURE__ */ jsx2(
+  )) : /* @__PURE__ */ jsx(
     TreeNode,
     {
       node: visibleRoot,
@@ -246,7 +202,7 @@ import {
   X,
   FileText as FileText2
 } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, 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";
@@ -287,26 +243,26 @@ function getPreviewLabel(previewType) {
 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]" })
+  return /* @__PURE__ */ jsxs2("div", { className: "relative bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-2.5", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-[#FF5F57]" }),
+        /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-[#FEBC2E]" }),
+        /* @__PURE__ */ jsx2("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: [
+      /* @__PURE__ */ jsx2("div", { className: "ml-2 min-w-0 flex-1 truncate text-xs font-[var(--font-mono)] text-[var(--text-muted)]", children: filename }),
+      /* @__PURE__ */ jsxs2("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__ */ jsx2("span", { children: language }),
+        /* @__PURE__ */ jsx2("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__ */ 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 || " " })
+    /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh]", children: /* @__PURE__ */ jsx2("table", { className: "w-full", children: /* @__PURE__ */ jsx2("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tr", { className: "hover:bg-[var(--bg-hover)]/50", children: [
+      /* @__PURE__ */ jsx2("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__ */ jsx2("td", { className: "pr-4 py-0 font-[var(--font-mono)] text-[13px] text-[var(--text-secondary)] leading-[1.55] whitespace-pre", children: line || " " })
     ] }, i)) }) }) })
   ] });
 }
@@ -343,8 +299,8 @@ function CsvPreview({ content }) {
   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(
+  return /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh] rounded-[var(--radius-md)] border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { className: "bg-[var(--bg-elevated)] sticky top-0", children: headers.map((h, i) => /* @__PURE__ */ jsx2(
       "th",
       {
         className: "px-3 py-2 text-left text-xs font-semibold text-[var(--text-secondary)] border-b border-[var(--border-subtle)] whitespace-nowrap",
@@ -352,7 +308,7 @@ function CsvPreview({ content }) {
       },
       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(
+    /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-[var(--border-subtle)] hover:bg-[var(--bg-hover)]/50", children: row.map((cell, j) => /* @__PURE__ */ jsx2(
       "td",
       {
         className: "px-3 py-1.5 text-[var(--text-secondary)] font-[var(--font-mono)] text-xs whitespace-nowrap",
@@ -363,10 +319,10 @@ function CsvPreview({ content }) {
   ] }) });
 }
 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" }) });
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center p-4 bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx2("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(
+  return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden bg-[var(--bg-input)]", children: /* @__PURE__ */ jsx2(
     "iframe",
     {
       src: blobUrl,
@@ -376,31 +332,31 @@ function PdfPreview({ blobUrl, filename }) {
   ) });
 }
 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 });
+  return /* @__PURE__ */ jsx2("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 })
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2(FileText2, { className: "mb-3 h-12 w-12 opacity-30" }),
+    /* @__PURE__ */ jsx2("p", { className: "text-sm text-[var(--text-secondary)]", children: title }),
+    /* @__PURE__ */ jsx2("p", { className: "mt-1 max-w-md text-xs", children: description }),
+    /* @__PURE__ */ jsx2("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 }) });
+  return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-input)] p-5", children: /* @__PURE__ */ jsx2(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: [
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-16 text-[var(--text-muted)]", children: [
+    /* @__PURE__ */ jsx2(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" })
+    /* @__PURE__ */ jsx2("p", { className: "text-xs mt-1", children: "Download to view this file" })
   ] });
 }
 function FilePreview({
@@ -416,41 +372,41 @@ function FilePreview({
   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 })
+  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-[var(--border-subtle)] shrink-0", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx2("div", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: filename }),
+        /* @__PURE__ */ jsx2("div", { className: "mt-0.5 text-[11px] uppercase tracking-[0.12em] text-[var(--text-muted)]", children: previewLabel })
       ] }),
-      onDownload && /* @__PURE__ */ jsx3(
+      onDownload && /* @__PURE__ */ jsx2(
         "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" })
+          children: /* @__PURE__ */ jsx2(Download, { className: "h-4 w-4" })
         }
       ),
-      onClose && /* @__PURE__ */ jsx3(
+      onClose && /* @__PURE__ */ jsx2(
         "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" })
+          children: /* @__PURE__ */ jsx2(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(
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-auto p-3", children: [
+      previewType === "pdf" && blobUrl && /* @__PURE__ */ jsx2(PdfPreview, { blobUrl, filename }),
+      previewType === "image" && blobUrl && /* @__PURE__ */ jsx2(ImagePreview, { src: blobUrl, filename }),
+      previewType === "csv" && content && /* @__PURE__ */ jsx2(CsvPreview, { content }),
+      (previewType === "code" || previewType === "json" || previewType === "yaml") && content && /* @__PURE__ */ jsx2(CodePreview, { content, filename }),
+      previewType === "text" && content && /* @__PURE__ */ jsx2(TextPreview, { content }),
+      previewType === "markdown" && content && /* @__PURE__ */ jsx2(MarkdownPreview, { content }),
+      previewType === "spreadsheet" && /* @__PURE__ */ jsx2(
         UnsupportedPreview,
         {
           filename,
@@ -458,8 +414,8 @@ function FilePreview({
           description: "Download the workbook or convert it to CSV when you need an inline preview."
         }
       ),
-      previewType === "unknown" && /* @__PURE__ */ jsx3(EmptyPreview, { filename }),
-      !hasRenderableSource && /* @__PURE__ */ jsx3(
+      previewType === "unknown" && /* @__PURE__ */ jsx2(EmptyPreview, { filename }),
+      !hasRenderableSource && /* @__PURE__ */ jsx2(
         UnsupportedPreview,
         {
           filename,
@@ -473,7 +429,7 @@ function FilePreview({
 
 // 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";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function getTabIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase() || "";
   if (["pdf"].includes(ext)) return FileText3;
@@ -482,10 +438,10 @@ function getTabIcon(name) {
 }
 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) => {
+  return /* @__PURE__ */ jsx3("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(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         className: cn(
@@ -493,27 +449,27 @@ function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
           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(
+          /* @__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-[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__ */ jsx3(Icon, { className: "h-3 w-3 shrink-0" }),
+                /* @__PURE__ */ jsx3("span", { className: "max-w-[120px] truncate", children: tab.name }),
+                tab.dirty && /* @__PURE__ */ jsx3("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--brand-cool)]" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx3(
             "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" })
+              children: /* @__PURE__ */ jsx3(X2, { className: "h-2.5 w-2.5" })
             }
           )
         ]
@@ -524,8 +480,13 @@ function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
 }
 
 // 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 jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var LazyDocumentEditorPane = lazy(async () => {
+  const module = await import("./document-editor-pane-AFBP2KFT.js");
+  return { default: module.DocumentEditorPane };
+});
 function FileArtifactPane({
   filename,
   content,
@@ -542,10 +503,95 @@ function FileArtifactPane({
   meta,
   toolbar,
   footer,
-  className
+  className,
+  editor
 }) {
   const showTabs = tabs.length > 0 && onTabSelect && onTabClose;
-  return /* @__PURE__ */ jsx5(
+  const paneTabs = showTabs ? /* @__PURE__ */ jsx4(
+    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__ */ jsx4(
+      "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__ */ jsx4(Download2, { className: "h-4 w-4" })
+      }
+    ),
+    onClose && /* @__PURE__ */ jsx4(
+      "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__ */ jsx4(X3, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+  if (isEditableMarkdown) {
+    return /* @__PURE__ */ jsx4(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsx4(
+          ArtifactPane,
+          {
+            eyebrow,
+            title: filename,
+            subtitle: path,
+            meta,
+            toolbar,
+            footer,
+            className,
+            tabs: paneTabs,
+            headerActions,
+            children: /* @__PURE__ */ jsx4("div", { className: "flex min-h-[20rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-card)]/40 text-sm text-[var(--text-muted)]", children: "Loading editor\u2026" })
+          }
+        ),
+        children: /* @__PURE__ */ jsx4(
+          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__ */ jsx4(
     ArtifactPane,
     {
       eyebrow,
@@ -555,38 +601,9 @@ function FileArtifactPane({
       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(
+      tabs: paneTabs,
+      headerActions,
+      children: /* @__PURE__ */ jsx4(
         FilePreview,
         {
           filename,
@@ -601,7 +618,6 @@ function FileArtifactPane({
 }
 
 export {
-  ArtifactPane,
   filterFileTree,
   FileTree,
   FilePreview,