@aprovan/patchwork-editor 0.1.0

package/dist/index.js

@@ -0,0 +1,1597 @@
+import { Node, textblockTypeInputRule } from '@tiptap/core';
+import { ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent, useEditor, EditorContent } from '@tiptap/react';
+import { useRef, useCallback, useMemo, useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Pencil, Loader2, RotateCcw, FileCode, FolderTree, Eye, Code, X, AlertCircle, Send, MessageSquare, Cloud, Check, Server, ChevronDown, ChevronRight, Folder, File } from 'lucide-react';
+import { createSingleFileProject, LocalFSBackend, VFSStore, detectMainFile, createProjectFromFiles } from '@aprovan/patchwork-compiler';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Typography from '@tiptap/extension-typography';
+import { Markdown as Markdown$1 } from 'tiptap-markdown';
+import { TextSelection } from '@tiptap/pm/state';
+import { Bobbin, serializeChangesToYAML } from '@aprovan/bobbin';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/components/CodeBlockExtension.tsx
+var BACKTICK_INPUT_REGEX = /^```([a-z]*)?$/;
+function CodeBlockComponent({ node, updateAttributes, editor, getPos }) {
+  const inputRef = useRef(null);
+  const focusInput = useCallback(() => {
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+  const focusCodeContent = useCallback(() => {
+    const pos = typeof getPos === "function" ? getPos() : void 0;
+    if (pos !== void 0) {
+      editor.chain().focus().setTextSelection(pos + 1).run();
+    }
+  }, [editor, getPos]);
+  const focusPreviousNode = useCallback(() => {
+    const pos = typeof getPos === "function" ? getPos() : void 0;
+    if (pos !== void 0 && pos > 1) {
+      const $pos = editor.state.doc.resolve(pos);
+      if ($pos.nodeBefore) {
+        editor.chain().focus().setTextSelection(pos - 1).run();
+      } else {
+        editor.chain().focus().setTextSelection(1).run();
+      }
+    }
+  }, [editor, getPos]);
+  const handleLanguageChange = useCallback(
+    (e) => {
+      updateAttributes({ language: e.target.value });
+    },
+    [updateAttributes]
+  );
+  const handleInputKeyDown = useCallback((e) => {
+    e.stopPropagation();
+    switch (e.key) {
+      case "Enter":
+      case "ArrowDown":
+        e.preventDefault();
+        focusCodeContent();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusPreviousNode();
+        break;
+      case "Escape":
+        e.preventDefault();
+        focusCodeContent();
+        break;
+    }
+  }, [focusCodeContent, focusPreviousNode]);
+  const handleInputMouseDown = useCallback((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    focusInput();
+  }, [focusInput]);
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: "code-block-wrapper my-2", "data-type": "codeBlock", children: [
+    /* @__PURE__ */ jsxs("div", { className: "language-input-wrapper flex items-center gap-1 mb-1", contentEditable: false, children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground select-none", children: "```" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: node.attrs.language || "",
+          onChange: handleLanguageChange,
+          onKeyDown: handleInputKeyDown,
+          onKeyUp: (e) => e.stopPropagation(),
+          onMouseDown: handleInputMouseDown,
+          onClick: (e) => {
+            e.stopPropagation();
+            focusInput();
+          },
+          onFocus: (e) => e.stopPropagation(),
+          onBlur: (e) => e.stopPropagation(),
+          placeholder: "language",
+          className: "language-input bg-transparent text-xs text-muted-foreground outline-none border-none min-w-[60px] max-w-[120px] focus:ring-1 focus:ring-ring rounded px-1",
+          style: { width: `${Math.max(60, (node.attrs.language?.length || 8) * 7)}px` },
+          spellCheck: false,
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("pre", { className: "bg-muted rounded-md px-3 py-2 font-mono text-sm overflow-x-auto !mt-0", children: /* @__PURE__ */ jsx(NodeViewContent, { as: "code" }) })
+  ] });
+}
+var CodeBlockExtension = Node.create({
+  name: "codeBlock",
+  addOptions() {
+    return {
+      languageClassPrefix: "language-",
+      HTMLAttributes: {}
+    };
+  },
+  content: "text*",
+  marks: "",
+  group: "block",
+  code: true,
+  defining: true,
+  addAttributes() {
+    return {
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          const { languageClassPrefix } = this.options;
+          const classNames = [...element.firstElementChild?.classList || []];
+          const languages = classNames.filter((className) => className.startsWith(languageClassPrefix)).map((className) => className.replace(languageClassPrefix, ""));
+          return languages[0] || null;
+        },
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "pre", preserveWhitespace: "full" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "pre",
+      HTMLAttributes,
+      [
+        "code",
+        {
+          class: node.attrs.language ? this.options.languageClassPrefix + node.attrs.language : null
+        },
+        0
+      ]
+    ];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlockComponent, {
+      stopEvent: ({ event }) => {
+        const target = event.target;
+        return target.classList.contains("language-input") || !!target.closest(".language-input-wrapper");
+      }
+    });
+  },
+  addInputRules() {
+    return [
+      textblockTypeInputRule({
+        find: BACKTICK_INPUT_REGEX,
+        type: this.type,
+        getAttributes: (match) => ({
+          language: match[1] || ""
+        })
+      })
+    ];
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-c": () => this.editor.commands.toggleCodeBlock(),
+      Backspace: () => {
+        const { empty, $anchor } = this.editor.state.selection;
+        const isAtStart = $anchor.pos === 1;
+        if (!empty || $anchor.parent.type.name !== this.name) {
+          return false;
+        }
+        if (isAtStart || !$anchor.parent.textContent.length) {
+          return this.editor.commands.clearNodes();
+        }
+        return false;
+      }
+    };
+  }
+});
+
+// src/components/edit/types.ts
+function getActiveContent(state) {
+  return state.project.files.get(state.activeFile)?.content ?? "";
+}
+function getFiles(project) {
+  return Array.from(project.files.values());
+}
+
+// src/lib/diff.ts
+var DIFF_BLOCK_REGEX = /<<<<<<< SEARCH\n([\s\S]*?)\n=======\n([\s\S]*?)\n>>>>>>> REPLACE/g;
+var DIFF_MARKER_PATTERNS = [
+  /^<<<<<<< SEARCH\s*$/m,
+  /^=======\s*$/m,
+  /^>>>>>>> REPLACE\s*$/m
+];
+var CODE_FENCE_REGEX = /^```(\w*)\s*((?:[a-zA-Z_][\w-]*="[^"]*"\s*)*)\s*$/;
+var ATTRIBUTE_REGEX = /([a-zA-Z_][\w-]*)="([^"]*)"/g;
+function parseCodeBlockAttributes(attrString) {
+  const attrs = {};
+  if (!attrString) return attrs;
+  const regex = new RegExp(ATTRIBUTE_REGEX.source, "g");
+  let match;
+  while ((match = regex.exec(attrString)) !== null) {
+    const key = match[1];
+    const value = match[2];
+    if (key && value !== void 0) {
+      attrs[key] = value;
+    }
+  }
+  return attrs;
+}
+function parseCodeBlocks(text) {
+  const blocks = [];
+  const lines = text.split("\n");
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line) {
+      i++;
+      continue;
+    }
+    const fenceMatch = line.match(CODE_FENCE_REGEX);
+    if (fenceMatch) {
+      const language = fenceMatch[1] || "";
+      const attributes = parseCodeBlockAttributes(fenceMatch[2] ?? "");
+      const contentLines = [];
+      i++;
+      while (i < lines.length) {
+        const currentLine = lines[i];
+        if (currentLine !== void 0 && currentLine.match(/^```\s*$/)) {
+          break;
+        }
+        contentLines.push(currentLine ?? "");
+        i++;
+      }
+      blocks.push({
+        language,
+        attributes,
+        content: contentLines.join("\n")
+      });
+    }
+    i++;
+  }
+  return blocks;
+}
+function findDiffMarkers(text) {
+  for (const pattern of DIFF_MARKER_PATTERNS) {
+    const match = text.match(pattern);
+    if (match) {
+      return match[0].trim();
+    }
+  }
+  return null;
+}
+function sanitizeDiffMarkers(text) {
+  let result = text;
+  result = result.replace(/^<<<<<<< SEARCH\s*\n?/gm, "");
+  result = result.replace(/^=======\s*\n?/gm, "");
+  result = result.replace(/^>>>>>>> REPLACE\s*\n?/gm, "");
+  result = result.replace(/\n{3,}/g, "\n\n");
+  return result;
+}
+function parseEditResponse(text) {
+  const progressNotes = [];
+  const diffs = [];
+  const codeBlocks = parseCodeBlocks(text);
+  for (const block of codeBlocks) {
+    if (block.attributes.note) {
+      progressNotes.push(block.attributes.note);
+    }
+    const diffMatch = block.content.match(
+      /<<<<<<< SEARCH\n([\s\S]*?)\n=======\n([\s\S]*?)\n>>>>>>> REPLACE/
+    );
+    if (diffMatch && diffMatch[1] !== void 0 && diffMatch[2] !== void 0) {
+      diffs.push({
+        note: block.attributes.note,
+        path: block.attributes.path,
+        search: diffMatch[1],
+        replace: diffMatch[2]
+      });
+    }
+  }
+  const summary = extractSummary(text);
+  return { progressNotes, diffs, summary };
+}
+function parseDiffs(text) {
+  const blocks = [];
+  const codeBlocks = parseCodeBlocks(text);
+  for (const block of codeBlocks) {
+    const diffMatch = block.content.match(
+      /<<<<<<< SEARCH\n([\s\S]*?)\n=======\n([\s\S]*?)\n>>>>>>> REPLACE/
+    );
+    if (diffMatch && diffMatch[1] !== void 0 && diffMatch[2] !== void 0) {
+      blocks.push({
+        note: block.attributes.note,
+        path: block.attributes.path,
+        search: diffMatch[1],
+        replace: diffMatch[2]
+      });
+    }
+  }
+  if (blocks.length === 0) {
+    const regex = new RegExp(DIFF_BLOCK_REGEX.source, "g");
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+      if (match[1] !== void 0 && match[2] !== void 0) {
+        blocks.push({ search: match[1], replace: match[2] });
+      }
+    }
+  }
+  return blocks;
+}
+function applyDiffs(code, diffs, options = {}) {
+  let result = code;
+  let applied = 0;
+  const failed = [];
+  for (const diff of diffs) {
+    if (result.includes(diff.search)) {
+      result = result.replace(diff.search, diff.replace);
+      applied++;
+    } else {
+      const lines = diff.search.split("\n").slice(0, 3);
+      const preview = lines.join("\n").slice(0, 100);
+      const suffix = diff.search.length > preview.length ? "..." : "";
+      failed.push(preview + suffix);
+    }
+  }
+  const marker = findDiffMarkers(result);
+  let warning;
+  if (marker) {
+    if (options.sanitize) {
+      result = sanitizeDiffMarkers(result);
+      warning = `Removed stray diff marker "${marker}" from output`;
+    } else {
+      warning = `Output contains diff marker "${marker}" - the LLM may have generated a malformed response`;
+    }
+  }
+  return { code: result, applied, failed, warning };
+}
+function hasDiffBlocks(text) {
+  return DIFF_BLOCK_REGEX.test(text);
+}
+function extractTextWithoutDiffs(text) {
+  return text.replace(DIFF_BLOCK_REGEX, "").trim();
+}
+var CODE_BLOCK_FULL_REGEX = /```\w*(?:\s+[a-zA-Z_][\w-]*="[^"]*")*\s*\n[\s\S]*?\n```/g;
+function extractSummary(text) {
+  let summary = text.replace(CODE_BLOCK_FULL_REGEX, "");
+  summary = summary.replace(/^<<<<<<< SEARCH\s*$/gm, "");
+  summary = summary.replace(/^=======\s*$/gm, "");
+  summary = summary.replace(/^>>>>>>> REPLACE\s*$/gm, "");
+  summary = summary.replace(/^```[\w]*(?:\s+[a-zA-Z_][\w-]*="[^"]*")*\s*$/gm, "");
+  summary = summary.replace(/\n{3,}/g, "\n\n").trim();
+  return summary;
+}
+
+// src/components/edit/api.ts
+async function sendEditRequest(request, options = {}) {
+  const { endpoint = "/api/edit", onProgress, sanitize = true } = options;
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request)
+  });
+  if (!response.ok) {
+    throw new Error("Edit request failed");
+  }
+  const text = await streamResponse(response, onProgress);
+  if (!hasDiffBlocks(text)) {
+    throw new Error("No valid diffs in response");
+  }
+  const parsed = parseEditResponse(text);
+  const result = applyDiffs(request.code, parsed.diffs, { sanitize });
+  if (result.applied === 0) {
+    const failedDetails = result.failed.map((f, i) => `[${i + 1}] "${f}"`).join("\n");
+    throw new Error(
+      `Failed to apply ${parsed.diffs.length} diff(s). None of the SEARCH blocks matched the code.
+
+Failed searches:
+${failedDetails}
+
+This usually means the code has changed or the SEARCH text doesn't match exactly.`
+    );
+  }
+  let summary = parsed.summary || `Applied ${result.applied} change(s)`;
+  if (result.warning) {
+    summary = `\u26A0\uFE0F ${result.warning}
+
+${summary}`;
+  }
+  return {
+    newCode: result.code,
+    summary,
+    progressNotes: parsed.progressNotes
+  };
+}
+async function streamResponse(response, onProgress) {
+  const reader = response.body?.getReader();
+  if (!reader) {
+    return response.text();
+  }
+  const decoder = new TextDecoder();
+  let fullText = "";
+  const emittedNotes = /* @__PURE__ */ new Set();
+  let done = false;
+  while (!done) {
+    const result = await reader.read();
+    done = result.done;
+    if (result.value) {
+      fullText += decoder.decode(result.value, { stream: true });
+      if (onProgress) {
+        const noteAttrRegex = /```\w*\s+note="([^"]+)"/g;
+        let match;
+        while ((match = noteAttrRegex.exec(fullText)) !== null) {
+          const noteMatch = match[1];
+          if (noteMatch) {
+            const note = noteMatch.trim();
+            if (!emittedNotes.has(note)) {
+              emittedNotes.add(note);
+              onProgress(note);
+            }
+          }
+        }
+      }
+    }
+  }
+  return fullText;
+}
+function cloneProject(project) {
+  return {
+    ...project,
+    files: new Map(project.files)
+  };
+}
+function useEditSession(options) {
+  const { originalCode, compile, apiEndpoint } = options;
+  const originalProject = useMemo(
+    () => createSingleFileProject(originalCode),
+    [originalCode]
+  );
+  const [project, setProject] = useState(originalProject);
+  const [activeFile, setActiveFile] = useState(originalProject.entry);
+  const [history, setHistory] = useState([]);
+  const [isApplying, setIsApplying] = useState(false);
+  const [error, setError] = useState(null);
+  const [streamingNotes, setStreamingNotes] = useState([]);
+  const [pendingPrompt, setPendingPrompt] = useState(null);
+  const performEdit = useCallback(
+    async (currentCode2, prompt, isRetry = false) => {
+      const entries = [];
+      const response = await sendEditRequest(
+        { code: currentCode2, prompt },
+        {
+          endpoint: apiEndpoint,
+          onProgress: (note) => setStreamingNotes((prev) => [...prev, note])
+        }
+      );
+      entries.push({
+        prompt: isRetry ? `Fix: ${prompt}` : prompt,
+        summary: response.summary,
+        isRetry
+      });
+      if (compile) {
+        const compileResult = await compile(response.newCode);
+        if (!compileResult.success && compileResult.error) {
+          setStreamingNotes([]);
+          const errorPrompt = `Compilation error: ${compileResult.error}
+
+Please fix this error.`;
+          const retryResult = await performEdit(
+            response.newCode,
+            errorPrompt,
+            true
+          );
+          return {
+            newCode: retryResult.newCode,
+            entries: [...entries, ...retryResult.entries]
+          };
+        }
+      }
+      return { newCode: response.newCode, entries };
+    },
+    [compile, apiEndpoint]
+  );
+  const currentCode = useMemo(
+    () => project.files.get(activeFile)?.content ?? "",
+    [project, activeFile]
+  );
+  const submitEdit = useCallback(
+    async (prompt) => {
+      if (!prompt.trim() || isApplying) return;
+      setIsApplying(true);
+      setError(null);
+      setStreamingNotes([]);
+      setPendingPrompt(prompt);
+      try {
+        const result = await performEdit(currentCode, prompt);
+        setProject((prev) => {
+          const updated = cloneProject(prev);
+          const file = updated.files.get(activeFile);
+          if (file) {
+            updated.files.set(activeFile, { ...file, content: result.newCode });
+          }
+          return updated;
+        });
+        setHistory((prev) => [...prev, ...result.entries]);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Edit failed");
+      } finally {
+        setIsApplying(false);
+        setStreamingNotes([]);
+        setPendingPrompt(null);
+      }
+    },
+    [currentCode, activeFile, isApplying, performEdit]
+  );
+  const revert = useCallback(() => {
+    setProject(originalProject);
+    setActiveFile(originalProject.entry);
+    setHistory([]);
+    setError(null);
+    setStreamingNotes([]);
+  }, [originalProject]);
+  const updateActiveFile = useCallback(
+    (content) => {
+      setProject((prev) => {
+        const updated = cloneProject(prev);
+        const file = updated.files.get(activeFile);
+        if (file) {
+          updated.files.set(activeFile, { ...file, content });
+        }
+        return updated;
+      });
+    },
+    [activeFile]
+  );
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+  return {
+    project,
+    originalProject,
+    activeFile,
+    history,
+    isApplying,
+    error,
+    streamingNotes,
+    pendingPrompt,
+    submitEdit,
+    revert,
+    updateActiveFile,
+    setActiveFile,
+    clearError
+  };
+}
+function ProgressNote({ text, isLatest }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground/60", children: [
+    isLatest && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs italic", children: text })
+  ] });
+}
+function EditHistory({
+  entries,
+  streamingNotes,
+  isStreaming,
+  pendingPrompt,
+  className = ""
+}) {
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [entries, streamingNotes, pendingPrompt]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: scrollRef,
+      className: `overflow-y-auto p-4 space-y-4 bg-background ${className}`,
+      children: [
+        entries.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground rounded-lg px-4 py-2 max-w-[85%]", children: /* @__PURE__ */ jsx("div", { className: "prose prose-sm prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0", children: /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], children: entry.prompt }) }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx("div", { className: "bg-primary/10 rounded-lg px-4 py-2 max-w-[85%]", children: /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0", children: /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], children: entry.summary }) }) }) })
+        ] }, i)),
+        pendingPrompt && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground rounded-lg px-4 py-2 max-w-[85%]", children: /* @__PURE__ */ jsx("div", { className: "prose prose-sm prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0", children: /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], children: pendingPrompt }) }) }) }),
+          isStreaming && streamingNotes.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1 py-2 px-3", children: streamingNotes.map((note, i) => /* @__PURE__ */ jsx(
+            ProgressNote,
+            {
+              text: note,
+              isLatest: i === streamingNotes.length - 1
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+function MarkdownEditor({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Type a message...",
+  disabled = false,
+  className = ""
+}) {
+  const containerRef = useRef(null);
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        bulletList: { keepMarks: true, keepAttributes: false },
+        orderedList: { keepMarks: true, keepAttributes: false },
+        codeBlock: false,
+        // Use our custom CodeBlockExtension
+        code: {
+          HTMLAttributes: {
+            class: "bg-muted rounded px-1 py-0.5 font-mono text-sm"
+          }
+        },
+        blockquote: {
+          HTMLAttributes: {
+            class: "border-l-4 border-muted-foreground/30 pl-4 italic"
+          }
+        },
+        horizontalRule: false,
+        hardBreak: { keepMarks: false }
+      }),
+      CodeBlockExtension,
+      Placeholder.configure({
+        placeholder,
+        emptyEditorClass: "is-editor-empty"
+      }),
+      Typography,
+      Markdown$1.configure({
+        html: false,
+        transformPastedText: true,
+        transformCopiedText: true
+      })
+    ],
+    content: value,
+    editable: !disabled,
+    editorProps: {
+      attributes: {
+        class: `outline-none min-h-[40px] max-h-[200px] overflow-y-auto px-3 py-2 ${className}`
+      },
+      handleKeyDown: (view, event) => {
+        const { state } = view;
+        const { selection } = state;
+        const { $from, $to, empty } = selection;
+        const parentType = $from.parent.type.name;
+        const isInList = parentType === "listItem";
+        const isInCodeBlock = parentType === "codeBlock";
+        if ((event.metaKey || event.ctrlKey) && event.key === "a" && isInCodeBlock) {
+          event.preventDefault();
+          const { tr } = state;
+          tr.setSelection(TextSelection.create(tr.doc, $from.start(), $from.end()));
+          view.dispatch(tr);
+          return true;
+        }
+        if (event.key === "ArrowUp" && isInCodeBlock) {
+          const textBefore = $from.parent.textContent.slice(0, $from.parentOffset);
+          if (!textBefore.includes("\n")) {
+            const domPos = view.domAtPos($from.start());
+            const wrapper = domPos.node.parentElement?.closest(".code-block-wrapper");
+            const langInput = wrapper?.querySelector(".language-input");
+            if (langInput) {
+              event.preventDefault();
+              langInput.focus();
+              langInput.select();
+              return true;
+            }
+          }
+        }
+        if (event.key === "Tab" && isInCodeBlock) {
+          event.preventDefault();
+          const { tr } = state;
+          if (empty) {
+            if (event.shiftKey) {
+              const textBefore = $from.parent.textContent.slice(0, $from.parentOffset);
+              if (textBefore.endsWith("  ")) {
+                tr.delete($from.pos - 2, $from.pos);
+              } else if (textBefore.endsWith(" ")) {
+                tr.delete($from.pos - 1, $from.pos);
+              }
+            } else {
+              tr.insertText("  ");
+            }
+          } else {
+            const text = $from.parent.textContent;
+            const lineStart = text.lastIndexOf("\n", $from.parentOffset - 1) + 1;
+            const lineEnd = text.indexOf("\n", $to.parentOffset);
+            const actualEnd = lineEnd === -1 ? text.length : lineEnd;
+            const selectedText = text.slice(lineStart, actualEnd);
+            const lines = selectedText.split("\n");
+            const newText = event.shiftKey ? lines.map((line) => line.replace(/^  ?/, "")).join("\n") : lines.map((line) => "  " + line).join("\n");
+            const blockStart = $from.start();
+            tr.replaceWith(blockStart + lineStart, blockStart + actualEnd, state.schema.text(newText));
+          }
+          view.dispatch(tr);
+          return true;
+        }
+        if (event.key === "Enter") {
+          if (isInCodeBlock) {
+            if (event.shiftKey) {
+              event.preventDefault();
+              const { tr } = state;
+              tr.insertText("\n");
+              view.dispatch(tr);
+              return true;
+            }
+            event.preventDefault();
+            onSubmit();
+            return true;
+          }
+          if (event.shiftKey) {
+            event.preventDefault();
+            const { tr } = state;
+            view.dispatch(tr.split($from.pos));
+            return true;
+          }
+          if (!isInList) {
+            event.preventDefault();
+            onSubmit();
+            return true;
+          }
+        }
+        return false;
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      const markdownStorage = editor2.storage.markdown;
+      if (markdownStorage?.getMarkdown) {
+        onChange(markdownStorage.getMarkdown());
+      } else {
+        onChange(editor2.getText());
+      }
+    }
+  });
+  useEffect(() => {
+    if (!editor) return;
+    const handlePaste = (event) => {
+      const plainText = event.clipboardData?.getData("text/plain");
+      const htmlText = event.clipboardData?.getData("text/html");
+      if (!plainText) return;
+      const { $from } = editor.state.selection;
+      const isInCodeBlock = $from.parent.type.name === "codeBlock";
+      if (isInCodeBlock) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { tr } = editor.state;
+        tr.insertText(plainText);
+        editor.view.dispatch(tr);
+        return;
+      }
+      if (htmlText) {
+        event.preventDefault();
+        event.stopPropagation();
+        const markdownStorage = editor.storage.markdown;
+        if (markdownStorage?.parser) {
+          try {
+            const parsed = markdownStorage.parser.parse(plainText);
+            if (parsed?.content?.size > 0) {
+              const nodes = [];
+              parsed.content.forEach((node) => nodes.push(node.toJSON()));
+              editor.chain().focus().insertContent(nodes).run();
+              return;
+            }
+          } catch (e) {
+            console.warn("Markdown parse failed, falling back to plain text", e);
+          }
+        }
+        editor.chain().focus().insertContent(plainText).run();
+      }
+    };
+    const container = containerRef.current;
+    container?.addEventListener("paste", handlePaste, { capture: true });
+    return () => container?.removeEventListener("paste", handlePaste, { capture: true });
+  }, [editor]);
+  useEffect(() => {
+    if (editor && value === "" && editor.getText() !== "") {
+      editor.commands.clearContent();
+    }
+  }, [editor, value]);
+  useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+  const focus = useCallback(() => {
+    editor?.commands.focus();
+  }, [editor]);
+  useEffect(() => {
+    if (editor) {
+      editor.focusInput = focus;
+    }
+  }, [editor, focus]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: `
+        flex-1 rounded-md border border-input bg-background text-sm
+        ring-offset-background
+        focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2
+        ${disabled ? "cursor-not-allowed opacity-50" : ""}
+      `,
+      onClick: () => editor?.commands.focus(),
+      children: /* @__PURE__ */ jsx(EditorContent, { editor, className: "markdown-editor" })
+    }
+  );
+}
+function buildTree(files) {
+  const root = { name: "", path: "", isDir: true, children: [] };
+  for (const file of files) {
+    const parts = file.path.split("/");
+    let current = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const isLast = i === parts.length - 1;
+      const currentPath = parts.slice(0, i + 1).join("/");
+      let child = current.children.find((c) => c.name === part);
+      if (!child) {
+        child = {
+          name: part,
+          path: currentPath,
+          isDir: !isLast,
+          children: []
+        };
+        current.children.push(child);
+      }
+      current = child;
+    }
+  }
+  root.children.sort((a, b) => {
+    if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+  return root;
+}
+function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }) {
+  const [expanded, setExpanded] = useState(true);
+  if (!node.name) {
+    return /* @__PURE__ */ jsx(Fragment, { children: node.children.map((child) => /* @__PURE__ */ jsx(
+      TreeNodeComponent,
+      {
+        node: child,
+        activeFile,
+        onSelect,
+        depth
+      },
+      child.path
+    )) });
+  }
+  const isActive = node.path === activeFile;
+  if (node.isDir) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setExpanded(!expanded),
+          className: "flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded",
+          style: { paddingLeft: `${depth * 12 + 8}px` },
+          children: [
+            expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0" }),
+            /* @__PURE__ */ jsx(Folder, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: node.name })
+          ]
+        }
+      ),
+      expanded && /* @__PURE__ */ jsx("div", { children: node.children.map((child) => /* @__PURE__ */ jsx(
+        TreeNodeComponent,
+        {
+          node: child,
+          activeFile,
+          onSelect,
+          depth: depth + 1
+        },
+        child.path
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => onSelect(node.path),
+      className: `flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded ${isActive ? "bg-primary/10 text-primary" : ""}`,
+      style: { paddingLeft: `${depth * 12 + 20}px` },
+      children: [
+        /* @__PURE__ */ jsx(File, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: node.name })
+      ]
+    }
+  );
+}
+function FileTree({ files, activeFile, onSelectFile }) {
+  const tree = useMemo(() => buildTree(files), [files]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-48 border-r bg-muted/30 overflow-auto text-foreground", children: [
+    /* @__PURE__ */ jsx("div", { className: "p-2 border-b text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Files" }),
+    /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(
+      TreeNodeComponent,
+      {
+        node: tree,
+        activeFile,
+        onSelect: onSelectFile
+      }
+    ) })
+  ] });
+}
+function hashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
+  }
+  return hash;
+}
+function EditModal({
+  isOpen,
+  onClose,
+  renderPreview,
+  renderLoading,
+  renderError,
+  previewError,
+  previewLoading,
+  ...sessionOptions
+}) {
+  const [showPreview, setShowPreview] = useState(true);
+  const [showTree, setShowTree] = useState(false);
+  const [editInput, setEditInput] = useState("");
+  const [bobbinChanges, setBobbinChanges] = useState([]);
+  const [previewContainer, setPreviewContainer] = useState(null);
+  const session = useEditSession(sessionOptions);
+  const code = getActiveContent(session);
+  const files = useMemo(() => getFiles(session.project), [session.project]);
+  const hasChanges = code !== (session.originalProject.files.get(session.activeFile)?.content ?? "");
+  const handleBobbinChanges = useCallback((changes) => {
+    setBobbinChanges(changes);
+  }, []);
+  const handleSubmit = () => {
+    if (!editInput.trim() && bobbinChanges.length === 0 || session.isApplying) return;
+    let promptWithContext = editInput;
+    if (bobbinChanges.length > 0) {
+      const bobbinYaml = serializeChangesToYAML(bobbinChanges, []);
+      promptWithContext = `${editInput}
+
+---
+Visual Changes (apply these styles/modifications):
+\`\`\`yaml
+${bobbinYaml}
+\`\`\``;
+    }
+    session.submitEdit(promptWithContext);
+    setEditInput("");
+    setBobbinChanges([]);
+  };
+  const handleClose = () => {
+    const editCount = session.history.length;
+    const finalCode = code;
+    setEditInput("");
+    session.clearError();
+    onClose(finalCode, editCount);
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-background rounded-lg shadow-xl w-full h-full max-w-6xl max-h-[90vh] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3 bg-background border-b-2", children: [
+      /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-primary" }),
+      session.isApplying && /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-primary flex items-center gap-1 ml-2", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+        "Applying edits..."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-2", children: [
+        hasChanges && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: session.revert,
+            className: "px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-primary/20 text-primary",
+            title: "Revert to original",
+            children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowTree(!showTree),
+            className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${showTree ? "bg-primary text-primary-foreground" : "hover:bg-primary/20 text-primary"}`,
+            title: showTree ? "Single file" : "File tree",
+            children: showTree ? /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FolderTree, { className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setShowPreview(!showPreview),
+            className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${showPreview ? "bg-primary text-primary-foreground" : "hover:bg-primary/20 text-primary"}`,
+            children: [
+              showPreview ? /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Code, { className: "h-3 w-3" }),
+              showPreview ? "Preview" : "Code"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleClose,
+            className: "px-2 py-1 text-xs rounded flex items-center gap-1 bg-primary text-primary-foreground hover:bg-primary/90",
+            title: "Exit edit mode",
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
+              "Done"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 border-b-2 overflow-hidden flex", children: [
+      showTree && /* @__PURE__ */ jsx(
+        FileTree,
+        {
+          files,
+          activeFile: session.activeFile,
+          onSelectFile: session.setActiveFile
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: showPreview ? /* @__PURE__ */ jsxs("div", { className: "bg-white h-full relative", ref: setPreviewContainer, children: [
+        previewError && renderError ? renderError(previewError) : previewError ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-sm text-destructive flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: previewError })
+        ] }) : previewLoading && renderLoading ? renderLoading() : previewLoading ? /* @__PURE__ */ jsxs("div", { className: "p-4 flex items-center gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Rendering preview..." })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: renderPreview(code) }, hashCode(code)),
+        !renderLoading && !renderError && !previewLoading && /* @__PURE__ */ jsx(
+          Bobbin,
+          {
+            container: previewContainer,
+            pillContainer: previewContainer,
+            defaultActive: false,
+            showInspector: true,
+            onChanges: handleBobbinChanges,
+            exclude: [".bobbin-pill", "[data-bobbin]"]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("div", { className: "p-4 bg-muted/10 h-full overflow-auto", children: /* @__PURE__ */ jsx("pre", { className: "text-xs whitespace-pre-wrap break-words m-0", children: /* @__PURE__ */ jsx("code", { children: code }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EditHistory,
+      {
+        entries: session.history,
+        streamingNotes: session.streamingNotes,
+        isStreaming: session.isApplying,
+        pendingPrompt: session.pendingPrompt,
+        className: "h-48"
+      }
+    ),
+    session.error && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-destructive/10 text-destructive text-sm flex items-center gap-2 border-t-2 border-destructive", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+      session.error
+    ] }),
+    bobbinChanges.length > 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-blue-50 text-blue-700 text-sm flex items-center gap-2 border-t", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        bobbinChanges.length,
+        " visual change",
+        bobbinChanges.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setBobbinChanges([]),
+          className: "text-xs underline hover:no-underline",
+          children: "Clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 border-t-2 bg-primary/5 flex gap-2 items-end", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        MarkdownEditor,
+        {
+          value: editInput,
+          onChange: setEditInput,
+          onSubmit: handleSubmit,
+          placeholder: "Describe changes...",
+          disabled: session.isApplying
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSubmit,
+          disabled: !editInput.trim() && bobbinChanges.length === 0 || session.isApplying,
+          className: "px-3 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 shrink-0",
+          children: session.isApplying ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] }) });
+}
+var VFS_BASE_URL = "/vfs";
+var vfsConfigCache = null;
+async function getVFSConfig() {
+  if (vfsConfigCache) return vfsConfigCache;
+  try {
+    const res = await fetch(`${VFS_BASE_URL}/config`);
+    if (res.ok) {
+      vfsConfigCache = await res.json();
+      return vfsConfigCache;
+    }
+  } catch {
+  }
+  return { usePaths: false };
+}
+var storeInstance = null;
+function getVFSStore() {
+  if (!storeInstance) {
+    const backend = new LocalFSBackend({ baseUrl: VFS_BASE_URL });
+    storeInstance = new VFSStore(backend);
+  }
+  return storeInstance;
+}
+async function saveProject(project) {
+  const store = getVFSStore();
+  await store.saveProject(project);
+}
+async function loadProject(id) {
+  const store = getVFSStore();
+  return store.loadProject(id);
+}
+async function listProjects() {
+  const store = getVFSStore();
+  const files = await store.listFiles();
+  const projectIds = /* @__PURE__ */ new Set();
+  for (const file of files) {
+    const id = file.split("/")[0];
+    if (id) projectIds.add(id);
+  }
+  return Array.from(projectIds);
+}
+async function saveFile(file) {
+  const store = getVFSStore();
+  await store.putFile(file);
+}
+async function isVFSAvailable() {
+  try {
+    const res = await fetch(VFS_BASE_URL, { method: "HEAD" });
+    return res.ok || res.status === 404;
+  } catch {
+    return false;
+  }
+}
+function createManifest(services) {
+  return {
+    name: "preview",
+    version: "1.0.0",
+    platform: "browser",
+    image: "@aprovan/patchwork-image-shadcn",
+    services
+  };
+}
+function useCodeCompiler(compiler, code, enabled, services) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const containerRef = useRef(null);
+  const mountedRef = useRef(null);
+  useEffect(() => {
+    if (!enabled || !compiler || !containerRef.current) return;
+    let cancelled = false;
+    async function compileAndMount() {
+      if (!containerRef.current || !compiler) return;
+      setLoading(true);
+      setError(null);
+      try {
+        if (mountedRef.current) {
+          compiler.unmount(mountedRef.current);
+          mountedRef.current = null;
+        }
+        const widget = await compiler.compile(
+          code,
+          createManifest(services),
+          { typescript: true }
+        );
+        if (cancelled) {
+          return;
+        }
+        const mounted = await compiler.mount(widget, {
+          target: containerRef.current,
+          mode: "embedded"
+        });
+        mountedRef.current = mounted;
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to render JSX");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    compileAndMount();
+    return () => {
+      cancelled = true;
+      if (mountedRef.current && compiler) {
+        compiler.unmount(mountedRef.current);
+        mountedRef.current = null;
+      }
+    };
+  }, [code, compiler, enabled, services]);
+  return { containerRef, loading, error };
+}
+function CodePreview({ code: originalCode, compiler, services, filePath }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [showPreview, setShowPreview] = useState(true);
+  const [currentCode, setCurrentCode] = useState(originalCode);
+  const [editCount, setEditCount] = useState(0);
+  const [saveStatus, setSaveStatus] = useState("unsaved");
+  const fallbackId = useMemo(() => crypto.randomUUID(), []);
+  const getProjectId = useCallback(async () => {
+    if (filePath) {
+      const config = await getVFSConfig();
+      if (config.usePaths) {
+        const parts = filePath.split("/");
+        if (parts.length > 1) {
+          return parts.slice(0, -1).join("/");
+        }
+        return filePath.replace(/\.[^.]+$/, "");
+      }
+    }
+    return fallbackId;
+  }, [filePath, fallbackId]);
+  const getEntryFile = useCallback(() => {
+    if (filePath) {
+      const parts = filePath.split("/");
+      return parts[parts.length - 1] || "main.tsx";
+    }
+    return "main.tsx";
+  }, [filePath]);
+  const handleSave = useCallback(async () => {
+    setSaveStatus("saving");
+    try {
+      const projectId = await getProjectId();
+      const entryFile = getEntryFile();
+      const project = createSingleFileProject(currentCode, entryFile, projectId);
+      await saveProject(project);
+      setSaveStatus("saved");
+    } catch (err) {
+      console.warn("[VFS] Failed to save project:", err);
+      setSaveStatus("error");
+    }
+  }, [currentCode, getProjectId, getEntryFile]);
+  const { containerRef, loading, error } = useCodeCompiler(
+    compiler,
+    currentCode,
+    showPreview && !isEditing,
+    services
+  );
+  const compile = useCallback(
+    async (code) => {
+      if (!compiler) return { success: true };
+      const errors = [];
+      const originalError = console.error;
+      console.error = (...args) => {
+        errors.push(args.map((a) => typeof a === "object" ? JSON.stringify(a) : String(a)).join(" "));
+        originalError.apply(console, args);
+      };
+      try {
+        await compiler.compile(
+          code,
+          createManifest(services),
+          { typescript: true }
+        );
+        return { success: true };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Compilation failed";
+        const consoleErrors = errors.length > 0 ? `
+
+Console errors:
+${errors.join("\n")}` : "";
+        return {
+          success: false,
+          error: errorMessage + consoleErrors
+        };
+      } finally {
+        console.error = originalError;
+      }
+    },
+    [compiler, services]
+  );
+  const handleRevert = () => {
+    setCurrentCode(originalCode);
+    setEditCount(0);
+  };
+  const hasChanges = currentCode !== originalCode;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "my-3 border rounded-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/50 border-b rounded-t-lg", children: [
+        /* @__PURE__ */ jsx(Code, { className: "h-4 w-4 text-muted-foreground" }),
+        editCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(MessageSquare, { className: "h-3 w-3" }),
+          editCount,
+          " edit",
+          editCount !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSave,
+            disabled: saveStatus === "saving",
+            className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${saveStatus === "saved" ? "text-green-600" : saveStatus === "error" ? "text-destructive hover:bg-muted" : "text-muted-foreground hover:bg-muted"}`,
+            title: saveStatus === "saved" ? "Saved to disk" : saveStatus === "saving" ? "Saving..." : saveStatus === "error" ? "Save failed - click to retry" : "Click to save",
+            children: saveStatus === "saving" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Cloud, { className: "h-3 w-3" }),
+              saveStatus === "saved" && /* @__PURE__ */ jsx(Check, { className: "h-2 w-2 absolute -bottom-0.5 -right-0.5 stroke-[3]" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-1", children: [
+          hasChanges && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleRevert,
+              className: "px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-muted text-muted-foreground",
+              title: "Revert to original",
+              children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsEditing(true),
+              className: "px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-muted",
+              title: "Edit component",
+              children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setShowPreview(!showPreview),
+              className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${showPreview ? "bg-primary text-primary-foreground" : "hover:bg-primary/20 text-primary"}`,
+              children: [
+                showPreview ? /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Code, { className: "h-3 w-3" }),
+                showPreview ? "Preview" : "Code"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      showPreview ? /* @__PURE__ */ jsxs("div", { className: "bg-white", children: [
+        error ? /* @__PURE__ */ jsxs("div", { className: "p-3 text-sm text-destructive flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: error })
+        ] }) : loading ? /* @__PURE__ */ jsxs("div", { className: "p-3 flex items-center gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Rendering preview..." })
+        ] }) : !compiler ? /* @__PURE__ */ jsx("div", { className: "p-3 text-sm text-muted-foreground", children: "Compiler not initialized" }) : null,
+        /* @__PURE__ */ jsx("div", { ref: containerRef })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "p-3 bg-muted/30 overflow-auto max-h-96", children: /* @__PURE__ */ jsx("pre", { className: "text-xs whitespace-pre-wrap break-words m-0", children: /* @__PURE__ */ jsx("code", { children: currentCode }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EditModal,
+      {
+        isOpen: isEditing,
+        onClose: (finalCode, edits) => {
+          setCurrentCode(finalCode);
+          setEditCount((prev) => prev + edits);
+          setIsEditing(false);
+          if (edits > 0) {
+            setSaveStatus("saving");
+            (async () => {
+              try {
+                const projectId = await getProjectId();
+                const entryFile = getEntryFile();
+                const project = createSingleFileProject(finalCode, entryFile, projectId);
+                await saveProject(project);
+                setSaveStatus("saved");
+              } catch (err) {
+                console.warn("[VFS] Failed to save project:", err);
+                setSaveStatus("error");
+              }
+            })();
+          }
+        },
+        originalCode: currentCode,
+        compile,
+        renderPreview: (code) => /* @__PURE__ */ jsx(ModalPreview, { code, compiler, services })
+      }
+    )
+  ] });
+}
+function ModalPreview({
+  code,
+  compiler,
+  services
+}) {
+  const { containerRef, loading, error } = useCodeCompiler(compiler, code, true, services);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    error && /* @__PURE__ */ jsxs("div", { className: "text-sm text-destructive flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: error })
+    ] }),
+    loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Rendering preview..." })
+    ] }),
+    !compiler && !loading && !error && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Compiler not initialized" }),
+    /* @__PURE__ */ jsx("div", { ref: containerRef })
+  ] });
+}
+function DefaultBadge({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${className}`, children });
+}
+function DefaultDialog({ children, open, onOpenChange }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 bg-black/50", onClick: () => onOpenChange?.(false), children: /* @__PURE__ */ jsx("div", { className: "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg rounded-lg", onClick: (e) => e.stopPropagation(), children }) });
+}
+function ServicesInspector({
+  namespaces,
+  services = [],
+  BadgeComponent = DefaultBadge,
+  DialogComponent = DefaultDialog
+}) {
+  const [open, setOpen] = useState(false);
+  if (namespaces.length === 0) return null;
+  const groupedServices = services.reduce((acc, svc) => {
+    (acc[svc.namespace] ??= []).push(svc);
+    return acc;
+  }, {});
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setOpen(true),
+        className: "flex items-center gap-2 hover:opacity-80 transition-opacity",
+        children: [
+          /* @__PURE__ */ jsx(Server, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs(BadgeComponent, { className: "text-xs", children: [
+            namespaces.length,
+            " service",
+            namespaces.length !== 1 ? "s" : ""
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogComponent, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Available Services" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setOpen(false), className: "text-muted-foreground hover:text-foreground", children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3 max-h-96 overflow-auto", children: namespaces.map((ns) => /* @__PURE__ */ jsxs("details", { open: namespaces.length === 1, children: [
+        /* @__PURE__ */ jsxs("summary", { className: "flex items-center gap-2 w-full p-2 rounded bg-muted/50 hover:bg-muted transition-colors cursor-pointer", children: [
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: ns }),
+          groupedServices[ns] && /* @__PURE__ */ jsxs(BadgeComponent, { className: "ml-auto text-xs", children: [
+            groupedServices[ns].length,
+            " tool",
+            groupedServices[ns].length !== 1 ? "s" : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ml-6 mt-2 space-y-2", children: groupedServices[ns]?.map((svc) => /* @__PURE__ */ jsxs("details", { children: [
+          /* @__PURE__ */ jsxs("summary", { className: "flex items-center gap-2 w-full text-left text-sm hover:text-foreground text-muted-foreground transition-colors cursor-pointer", children: [
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsx("code", { className: "font-mono text-xs", children: svc.procedure }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs opacity-70", children: svc.description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ml-5 mt-1 p-2 rounded border bg-muted/30 overflow-auto max-h-48", children: /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words m-0", children: JSON.stringify(svc.parameters.jsonSchema, null, 2) }) })
+        ] }, svc.name)) ?? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No tool details available" }) })
+      ] }, ns)) })
+    ] })
+  ] });
+}
+var CODE_BLOCK_REGEX = /```([a-zA-Z0-9_+-]*)((?:\s+[a-zA-Z_][\w-]*="[^"]*")*)\s*\n([\s\S]*?)```/g;
+var UNCLOSED_BLOCK_REGEX = /```([a-zA-Z0-9_+-]*)((?:\s+[a-zA-Z_][\w-]*="[^"]*")*)\s*\n([\s\S]*)$/;
+var ATTRIBUTE_REGEX2 = /([a-zA-Z_][\w-]*)="([^"]*)"/g;
+function parseAttributes(attrString) {
+  const attrs = {};
+  if (!attrString) return attrs;
+  const regex = new RegExp(ATTRIBUTE_REGEX2.source, "g");
+  let match;
+  while ((match = regex.exec(attrString)) !== null) {
+    const key = match[1];
+    const value = match[2];
+    if (key && value !== void 0) {
+      attrs[key] = value;
+    }
+  }
+  return attrs;
+}
+function extractCodeBlocks(text, options = {}) {
+  const { filterLanguages, includeUnclosed = false } = options;
+  const parts = [];
+  let lastIndex = 0;
+  const allMatches = [];
+  const regex = new RegExp(CODE_BLOCK_REGEX.source, "g");
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    const language = match[1]?.toLowerCase() || "";
+    const attributes = parseAttributes(match[2] || "");
+    const content = match[3] ?? "";
+    const included = !filterLanguages || filterLanguages.has(language);
+    allMatches.push({ match, language, content, attributes, included });
+  }
+  for (const { match: match2, language, content, attributes, included } of allMatches) {
+    if (match2.index > lastIndex) {
+      const textBefore = text.slice(lastIndex, match2.index);
+      if (textBefore.trim()) {
+        parts.push({ type: "text", content: textBefore });
+      }
+    }
+    lastIndex = match2.index + match2[0].length;
+    if (included) {
+      parts.push({ type: "code", content, language, attributes });
+    }
+  }
+  const remainingText = text.slice(lastIndex);
+  if (includeUnclosed && remainingText.includes("```")) {
+    const unclosedMatch = remainingText.match(UNCLOSED_BLOCK_REGEX);
+    if (unclosedMatch) {
+      const language = unclosedMatch[1]?.toLowerCase() || "";
+      const attributes = parseAttributes(unclosedMatch[2] || "");
+      const content = unclosedMatch[3] ?? "";
+      const included = !filterLanguages || filterLanguages.has(language);
+      const unclosedIndex = remainingText.indexOf("```");
+      if (unclosedIndex > 0) {
+        const textBefore = remainingText.slice(0, unclosedIndex);
+        if (textBefore.trim()) {
+          parts.push({ type: "text", content: textBefore });
+        }
+      }
+      if (included) {
+        parts.push({ type: "code", content, language, attributes });
+      }
+      lastIndex = text.length;
+    }
+  }
+  if (lastIndex < text.length) {
+    const remaining = text.slice(lastIndex);
+    if (remaining.trim()) {
+      parts.push({ type: "text", content: remaining });
+    }
+  }
+  if (parts.length === 0) {
+    parts.push({ type: "text", content: text });
+  }
+  return parts;
+}
+function findFirstCodeBlock(text) {
+  const parts = extractCodeBlocks(text);
+  return parts.find((p) => p.type === "code") ?? null;
+}
+function hasCodeBlock(text) {
+  return findFirstCodeBlock(text) !== null;
+}
+function getCodeBlockLanguages(text) {
+  const parts = extractCodeBlocks(text);
+  const languages = /* @__PURE__ */ new Set();
+  for (const part of parts) {
+    if (part.type === "code") {
+      languages.add(part.language);
+    }
+  }
+  return languages;
+}
+function extractProject(text, options) {
+  const parts = extractCodeBlocks(text, options);
+  const files = [];
+  const textParts = [];
+  for (const part of parts) {
+    if (part.type === "text") {
+      textParts.push(part);
+    } else if (part.type === "code") {
+      const codePart = part;
+      if (codePart.attributes?.path) {
+        files.push({
+          path: codePart.attributes.path,
+          content: codePart.content,
+          language: codePart.language,
+          note: codePart.attributes.note
+        });
+      } else {
+        files.push({
+          path: detectMainFile(codePart.language),
+          content: codePart.content,
+          language: codePart.language
+        });
+      }
+    }
+  }
+  return {
+    project: createProjectFromFiles(files),
+    textParts
+  };
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { CodeBlockExtension, CodePreview, EditHistory, EditModal, FileTree, MarkdownEditor, ServicesInspector, applyDiffs, cn, extractCodeBlocks, extractProject, extractSummary, extractTextWithoutDiffs, findDiffMarkers, findFirstCodeBlock, getActiveContent, getCodeBlockLanguages, getFiles, getVFSConfig, getVFSStore, hasCodeBlock, hasDiffBlocks, isVFSAvailable, listProjects, loadProject, parseCodeBlockAttributes, parseCodeBlocks, parseDiffs, parseEditResponse, sanitizeDiffMarkers, saveFile, saveProject, sendEditRequest, useEditSession };