@cere/cere-design-system 0.0.45 → 0.1.0

package/dist/chunk-XF66WQZE.mjs

@@ -0,0 +1,1535 @@
+import {
+  WORKFLOW_NODE_SHADOW,
+  WorkflowNode
+} from "./chunk-27JEWSWA.mjs";
+import {
+  CereIcon
+} from "./chunk-UPGFBPFX.mjs";
+import {
+  workflowNodeColors
+} from "./chunk-PWF2NJDB.mjs";
+
+// src/components/third-party/FlowEditor.tsx
+import { useCallback } from "react";
+import ReactFlow, {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlowProvider,
+  BackgroundVariant,
+  ConnectionLineType
+} from "reactflow";
+import { Box } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { Background as Background2, Controls as Controls2, MiniMap as MiniMap2, Panel, BackgroundVariant as BackgroundVariant2, ConnectionLineType as ConnectionLineType2 } from "reactflow";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FlowEditor = ({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  nodeTypes,
+  edgeTypes,
+  height = "600px",
+  showBackground = true,
+  backgroundVariant = BackgroundVariant.Dots,
+  showControls = true,
+  showMinimap = false,
+  showBorder = true,
+  borderRadius = 1,
+  nodesDraggable = true,
+  containerProps,
+  minimapProps,
+  onInit,
+  ...reactFlowProps
+}) => {
+  const theme = useTheme();
+  const handleInit = useCallback(
+    (instance) => {
+      if (onInit) {
+        onInit(instance);
+      }
+    },
+    [onInit]
+  );
+  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: [
+        {
+          width: "100%",
+          height: typeof height === "number" ? `${height}px` : height,
+          overflow: "hidden",
+          ...showBorder && { border: `1px solid ${theme.palette.divider}` },
+          borderRadius,
+          backgroundColor: theme.palette.background.paper
+        },
+        ...Array.isArray(containerSx) ? containerSx : [containerSx]
+      ],
+      ...restContainerProps,
+      children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          nodeTypes,
+          edgeTypes,
+          onInit: handleInit,
+          nodesDraggable,
+          connectionLineType: ConnectionLineType.SmoothStep,
+          defaultEdgeOptions: {
+            style: {
+              stroke: theme.palette.primary.main,
+              strokeWidth: 2
+            }
+          },
+          style: {
+            backgroundColor: "transparent"
+          },
+          ...reactFlowProps,
+          children: [
+            showBackground && /* @__PURE__ */ jsx(
+              Background,
+              {
+                variant: backgroundVariant,
+                gap: 16,
+                size: 1,
+                color: theme.palette.divider
+              }
+            ),
+            showControls && /* @__PURE__ */ jsx(Controls, {}),
+            showMinimap && /* @__PURE__ */ jsx(
+              MiniMap,
+              {
+                nodeColor: (node) => {
+                  const color = node.data?.color || theme.palette.primary.main;
+                  return typeof color === "string" ? color : theme.palette.primary.main;
+                },
+                nodeStrokeWidth: 3,
+                nodeBorderRadius: 8,
+                maskColor: `${theme.palette.background.paper}80`,
+                style: {
+                  backgroundColor: theme.palette.background.paper
+                },
+                ...minimapProps
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+
+// src/components/third-party/CodeEditor.tsx
+import { useCallback as useCallback2, useEffect, useState, useRef } from "react";
+import Editor from "@monaco-editor/react";
+import { Box as Box2, IconButton, Tooltip } from "@mui/material";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var configureTypeScript = (monaco) => {
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.ESNext,
+    noEmit: false,
+    lib: ["es2020", "dom"],
+    noUnusedLocals: false,
+    noUnusedParameters: false,
+    noImplicitAny: false,
+    noImplicitReturns: false,
+    noFallthroughCasesInSwitch: false,
+    // Treat every file as a module so top-level declarations don't clash
+    // across files in the workspace (prevents false "Cannot redeclare" errors).
+    moduleDetection: 3
+    // ts.ModuleDetectionKind.Force
+  });
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: false,
+    noSuggestionDiagnostics: true,
+    diagnosticCodesToIgnore: [
+      6133,
+      // 'x' is declared but its value is never read
+      6196
+      // 'x' is declared but its value is never read (different variant)
+    ]
+  });
+};
+var CodeEditor = ({
+  value,
+  onChange,
+  language = "typescript",
+  height = "400px",
+  minHeight,
+  theme: themeProp,
+  lineNumbers = "on",
+  options,
+  onMount,
+  onValidate,
+  editorRef,
+  monacoRef,
+  onFullscreenChange,
+  containerProps,
+  typeDefinitions,
+  externalModelManagement = false
+}) => {
+  const [isEditorReady, setIsEditorReady] = useState(false);
+  const [validationErrors, setValidationErrors] = useState([]);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [tsCode, setTsCode] = useState(value);
+  const [actualHeight, setActualHeight] = useState(
+    typeof height === "number" ? `${height}px` : height
+  );
+  const [showProblems, setShowProblems] = useState(false);
+  const [hasUserToggledProblems, setHasUserToggledProblems] = useState(false);
+  useEffect(() => {
+    if (hasUserToggledProblems) return;
+    if (validationErrors.length > 0) {
+      setShowProblems(true);
+    } else {
+      setShowProblems(false);
+    }
+  }, [validationErrors, hasUserToggledProblems]);
+  const internalEditorRef = useRef(null);
+  const internalMonacoRef = useRef(null);
+  const finalEditorRef = editorRef || internalEditorRef;
+  const finalMonacoRef = monacoRef || internalMonacoRef;
+  useEffect(() => {
+    if (isFullscreen) {
+      setActualHeight("calc(100vh - 80px)");
+    } else {
+      setActualHeight(typeof height === "number" ? `${height}px` : height);
+    }
+  }, [height, isFullscreen]);
+  const toggleFullscreen = useCallback2(() => {
+    const newFullscreenState = !isFullscreen;
+    setIsFullscreen(newFullscreenState);
+    if (onFullscreenChange) {
+      onFullscreenChange(newFullscreenState);
+    }
+  }, [isFullscreen, onFullscreenChange]);
+  const gotoMarker = useCallback2(
+    (marker) => {
+      const ed = finalEditorRef?.current;
+      if (!ed) return;
+      const position = { lineNumber: marker.startLineNumber, column: marker.startColumn || 1 };
+      try {
+        ed.revealPositionInCenter(position);
+        ed.setPosition(position);
+        ed.focus();
+      } catch (e) {
+        console.error("CodeEditor: Failed to navigate to marker", e);
+      }
+    },
+    [finalEditorRef]
+  );
+  useEffect(() => {
+    if (!isFullscreen) return;
+    function escapeHandler(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsFullscreen(false);
+        if (onFullscreenChange) {
+          onFullscreenChange(false);
+        }
+      }
+    }
+    window.addEventListener("keydown", escapeHandler, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", escapeHandler, { capture: true });
+    };
+  }, [isFullscreen, onFullscreenChange]);
+  const handleEditorDidMount = useCallback2(
+    (editor, monaco) => {
+      console.log("CodeEditor: onMount called", { editor: !!editor, monaco: !!monaco });
+      try {
+        configureTypeScript(monaco);
+      } catch (e) {
+        console.error("CodeEditor: Failed to configure TypeScript", e);
+      }
+      if (finalEditorRef) {
+        finalEditorRef.current = editor;
+      }
+      if (finalMonacoRef) {
+        finalMonacoRef.current = monaco;
+      }
+      setIsEditorReady(true);
+      console.log("CodeEditor: Editor ready");
+      try {
+        editor.addCommand(monaco.KeyCode.Escape, () => {
+          if (isFullscreen) {
+            setIsFullscreen(false);
+            if (onFullscreenChange) {
+              onFullscreenChange(false);
+            }
+            return true;
+          }
+          return false;
+        });
+        editor.onDidChangeModelDecorations(() => {
+          const model2 = editor.getModel();
+          if (model2 && onValidate) {
+            const markers = monaco.editor.getModelMarkers({ resource: model2.uri });
+            onValidate(markers);
+            setValidationErrors(markers);
+          }
+        });
+        const model = editor.getModel();
+        if (model && onValidate) {
+          const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+          onValidate(markers);
+          setValidationErrors(markers);
+        }
+      } catch (e) {
+        console.error("CodeEditor: Error setting up editor callbacks", e);
+      }
+      if (onMount) {
+        try {
+          onMount(editor, monaco);
+        } catch (e) {
+          console.error("CodeEditor: Error in custom onMount", e);
+        }
+      }
+    },
+    [isFullscreen, onFullscreenChange, onValidate, onMount, finalEditorRef, finalMonacoRef]
+  );
+  useEffect(() => {
+    if (!isEditorReady || !finalMonacoRef?.current || !typeDefinitions) return;
+    const monaco = finalMonacoRef.current;
+    const definitions = Array.isArray(typeDefinitions) ? typeDefinitions : [typeDefinitions];
+    const uris = [];
+    try {
+      definitions.forEach((def, index) => {
+        if (def && def.trim()) {
+          const uri = `ts:filename/custom-types-${index}.d.ts`;
+          uris.push(uri);
+          monaco.languages.typescript.typescriptDefaults.addExtraLib(def, uri);
+        }
+      });
+    } catch (error) {
+      console.error("CodeEditor: Error adding type definitions:", error);
+    }
+  }, [isEditorReady, finalMonacoRef, typeDefinitions]);
+  const handleCodeChange = (newValue) => {
+    const valueStr = newValue || "";
+    setTsCode(valueStr);
+    onChange(valueStr);
+  };
+  useEffect(() => {
+    if (externalModelManagement) return;
+    if (value !== tsCode) {
+      setTsCode(value);
+      if (isEditorReady && finalEditorRef?.current) {
+        const editor = finalEditorRef.current;
+        const currentValue = editor.getValue();
+        if (currentValue !== value) {
+          editor.setValue(value);
+        }
+      }
+    }
+  }, [value, tsCode, isEditorReady, finalEditorRef, externalModelManagement]);
+  const editorMinHeight = minHeight ? typeof minHeight === "number" ? `${minHeight}px` : minHeight : "400px";
+  const defaultOptions = {
+    lineNumbers,
+    minimap: { enabled: false },
+    readOnly: false,
+    wordWrap: "on",
+    fontSize: 14,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, "source-code-pro", monospace',
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    theme: themeProp || "vs",
+    ...options
+  };
+  return /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: isFullscreen ? "100vh" : "100%",
+        minHeight: isFullscreen ? "100vh" : editorMinHeight,
+        position: isFullscreen ? "fixed" : "relative",
+        top: isFullscreen ? 0 : "auto",
+        left: isFullscreen ? 0 : "auto",
+        right: isFullscreen ? 0 : "auto",
+        bottom: isFullscreen ? 0 : "auto",
+        zIndex: isFullscreen ? 9999 : "auto",
+        bgcolor: "background.paper",
+        pt: isFullscreen ? "80px" : 0,
+        // Add padding top in fullscreen to account for header (64px) + spacing (16px)
+        px: isFullscreen ? 2 : 0,
+        pb: isFullscreen ? 2 : 0,
+        overflow: isFullscreen ? "hidden" : "visible"
+      },
+      children: /* @__PURE__ */ jsxs2(
+        Box2,
+        {
+          sx: {
+            flex: 1,
+            border: 1,
+            borderColor: validationErrors.length > 0 ? "error.main" : "divider",
+            borderRadius: 1,
+            minHeight: editorMinHeight,
+            overflow: "hidden",
+            position: "relative",
+            display: "flex",
+            flexDirection: "column"
+          },
+          ...containerProps,
+          children: [
+            /* @__PURE__ */ jsx2(Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsx2(
+              IconButton,
+              {
+                onClick: toggleFullscreen,
+                size: "small",
+                sx: {
+                  position: isFullscreen ? "fixed" : "absolute",
+                  top: isFullscreen ? 72 : 8,
+                  // Position below header in fullscreen mode (header is ~64px)
+                  right: isFullscreen ? 16 : 8,
+                  zIndex: 1e4,
+                  // Ensure it's above other elements
+                  bgcolor: "rgba(255, 255, 255, 0.7)",
+                  "&:hover": {
+                    bgcolor: "rgba(255, 255, 255, 0.9)"
+                  },
+                  boxShadow: 1
+                },
+                children: isFullscreen ? /* @__PURE__ */ jsx2(FullscreenExitIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx2(FullscreenIcon, { fontSize: "small" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx2(
+              Box2,
+              {
+                sx: {
+                  flex: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden",
+                  minHeight: editorMinHeight,
+                  position: "relative",
+                  height: isFullscreen ? "100%" : actualHeight
+                },
+                children: /* @__PURE__ */ jsx2(
+                  Editor,
+                  {
+                    height: "100%",
+                    defaultLanguage: language,
+                    defaultValue: value,
+                    value: tsCode,
+                    onChange: handleCodeChange,
+                    onMount: handleEditorDidMount,
+                    theme: themeProp || "vs",
+                    options: defaultOptions,
+                    loading: /* @__PURE__ */ jsx2(Box2, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    beforeMount: (monaco) => {
+                      console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
+                    }
+                  }
+                )
+              }
+            ),
+            validationErrors.length > 0 && /* @__PURE__ */ jsxs2(
+              Box2,
+              {
+                sx: {
+                  borderTop: 1,
+                  borderColor: "divider",
+                  bgcolor: "background.default",
+                  display: "flex",
+                  flexDirection: "column",
+                  maxHeight: showProblems ? 180 : 40,
+                  minHeight: 40,
+                  transition: "max-height 0.2s ease"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2(
+                    Box2,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        px: 1,
+                        py: 0.5,
+                        gap: 1,
+                        borderBottom: showProblems ? "1px solid" : "none",
+                        borderColor: "divider",
+                        fontSize: "0.875rem",
+                        color: "text.secondary"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
+                        /* @__PURE__ */ jsx2(Box2, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
+                        /* @__PURE__ */ jsxs2(Box2, { sx: { ml: 1 }, children: [
+                          validationErrors.length,
+                          " error",
+                          validationErrors.length > 1 ? "s" : ""
+                        ] }),
+                        /* @__PURE__ */ jsx2(Box2, { sx: { flex: 1 } }),
+                        /* @__PURE__ */ jsx2(
+                          IconButton,
+                          {
+                            size: "small",
+                            "aria-label": "Toggle problems panel",
+                            onClick: () => {
+                              setHasUserToggledProblems(true);
+                              setShowProblems((s) => !s);
+                            },
+                            children: showProblems ? /* @__PURE__ */ jsx2(ExpandMoreIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx2(ExpandLessIcon, { fontSize: "small" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  showProblems && /* @__PURE__ */ jsx2(Box2, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs2(
+                    Box2,
+                    {
+                      onClick: () => gotoMarker(error),
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        px: 1.5,
+                        py: 0.75,
+                        gap: 1,
+                        cursor: "pointer",
+                        "&:hover": { bgcolor: "action.hover" },
+                        borderBottom: "1px dashed",
+                        borderColor: "divider",
+                        fontSize: "0.85rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2(ErrorOutlineIcon, { color: "error", sx: { fontSize: 18 } }),
+                        /* @__PURE__ */ jsxs2(Box2, { sx: { color: "text.secondary", width: 64 }, children: [
+                          "Line ",
+                          error.startLineNumber
+                        ] }),
+                        /* @__PURE__ */ jsx2(Box2, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
+                      ]
+                    },
+                    `${error.startLineNumber}-${error.startColumn}-${index}`
+                  )) })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/third-party/index.ts
+import { Panel as Panel2 } from "reactflow";
+
+// src/components/third-party/WorkflowNodeHandle.tsx
+import { Handle, Position } from "reactflow";
+import { useTheme as useTheme2 } from "@mui/material";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var WorkflowNodeHandle = ({
+  data,
+  selected
+}) => {
+  const theme = useTheme2();
+  const handleColor = workflowNodeColors[data.nodeType].accent;
+  const handleStyle = {
+    width: 8,
+    height: 8,
+    borderRadius: "999px",
+    border: `2px solid ${theme.palette.common.white}`,
+    background: handleColor,
+    boxShadow: WORKFLOW_NODE_SHADOW
+  };
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(Handle, { type: "target", position: Position.Left, style: handleStyle }),
+    /* @__PURE__ */ jsx3(
+      WorkflowNode,
+      {
+        nodeType: data.nodeType,
+        title: data.title,
+        description: data.description,
+        icon: data.icon,
+        badgeLabel: data.badgeLabel,
+        selected,
+        showSideDots: false
+      }
+    ),
+    /* @__PURE__ */ jsx3(Handle, { type: "source", position: Position.Right, style: handleStyle })
+  ] });
+};
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorWorkspace.types.ts
+var EXTENSION_LANGUAGE_MAP = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  json: "json",
+  html: "html",
+  htm: "html",
+  css: "css",
+  py: "python",
+  yaml: "yaml",
+  yml: "yaml",
+  md: "markdown",
+  sql: "sql",
+  xml: "xml",
+  txt: "plaintext"
+};
+function detectLanguage(path) {
+  const ext = path.split(".").pop()?.toLowerCase() ?? "";
+  return EXTENSION_LANGUAGE_MAP[ext] ?? "plaintext";
+}
+function getFileName(path) {
+  return path.split("/").pop() ?? path;
+}
+
+// src/components/third-party/CodeEditorWorkspace/useCodeEditorWorkspace.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+function useCodeEditorWorkspace({
+  files,
+  initialOpenPaths,
+  onFileChange,
+  onValidationChange
+}) {
+  const fileContentsRef = useRef2(/* @__PURE__ */ new Map());
+  const originalContentsRef = useRef2(/* @__PURE__ */ new Map());
+  const [openTabs, setOpenTabs] = useState2([]);
+  const [activeFilePath, setActiveFilePath] = useState2(null);
+  const monacoRef = useRef2(null);
+  const editorRef = useRef2(null);
+  const modelsRef = useRef2(/* @__PURE__ */ new Map());
+  const [validationMarkers, setValidationMarkers] = useState2({});
+  const [cursorPosition, setCursorPosition] = useState2(null);
+  useEffect2(() => {
+    for (const file of files) {
+      if (!fileContentsRef.current.has(file.path)) {
+        fileContentsRef.current.set(file.path, file.value);
+        originalContentsRef.current.set(file.path, file.value);
+      }
+      const model = modelsRef.current.get(file.path);
+      if (model && !model.isDisposed()) {
+        if (file.value === fileContentsRef.current.get(file.path)) {
+          originalContentsRef.current.set(file.path, file.value);
+          continue;
+        }
+        if (originalContentsRef.current.get(file.path) !== file.value) {
+          const localContent = fileContentsRef.current.get(file.path) ?? "";
+          const previousOriginal = originalContentsRef.current.get(file.path) ?? "";
+          originalContentsRef.current.set(file.path, file.value);
+          if (localContent === previousOriginal) {
+            fileContentsRef.current.set(file.path, file.value);
+            model.setValue(file.value);
+          }
+        }
+      }
+    }
+  }, [files]);
+  useEffect2(() => {
+    if (initialOpenPaths && initialOpenPaths.length > 0) {
+      const tabs = initialOpenPaths.filter((p) => files.some((f) => f.path === p)).map((p) => ({
+        path: p,
+        label: getFileName(p),
+        isDirty: false
+      }));
+      if (tabs.length > 0) {
+        setOpenTabs(tabs);
+        setActiveFilePath(tabs[0].path);
+      }
+    }
+  }, []);
+  const getOrCreateModel = useCallback3(
+    (path) => {
+      const monaco = monacoRef.current;
+      if (!monaco) return null;
+      const existing = modelsRef.current.get(path);
+      if (existing && !existing.isDisposed()) return existing;
+      const file = files.find((f) => f.path === path);
+      const content = fileContentsRef.current.get(path) ?? file?.value ?? "";
+      const lang = file?.language ?? detectLanguage(path);
+      const uri = monaco.Uri.parse(`file:///${path}`);
+      let model = monaco.editor.getModel(uri);
+      if (!model) {
+        model = monaco.editor.createModel(content, lang, uri);
+      }
+      modelsRef.current.set(path, model);
+      return model;
+    },
+    [files]
+  );
+  const disposeModel = useCallback3((path) => {
+    const model = modelsRef.current.get(path);
+    if (model && !model.isDisposed()) {
+      model.dispose();
+    }
+    modelsRef.current.delete(path);
+  }, []);
+  const switchToFile = useCallback3(
+    (path) => {
+      const ed = editorRef.current;
+      if (!ed) return;
+      const model = getOrCreateModel(path);
+      if (model) {
+        ed.setModel(model);
+      }
+    },
+    [getOrCreateModel]
+  );
+  const openFile = useCallback3(
+    (path) => {
+      const file = files.find((f) => f.path === path);
+      if (!file) return;
+      if (!fileContentsRef.current.has(path)) {
+        fileContentsRef.current.set(path, file.value);
+        originalContentsRef.current.set(path, file.value);
+      }
+      setOpenTabs((prev) => {
+        const exists = prev.some((t) => t.path === path);
+        if (exists) return prev;
+        return [
+          ...prev,
+          { path, label: getFileName(path), isDirty: false }
+        ];
+      });
+      setActiveFilePath(path);
+      switchToFile(path);
+    },
+    [files, switchToFile]
+  );
+  const closeFile = useCallback3(
+    (path) => {
+      disposeModel(path);
+      setOpenTabs((prev) => {
+        const newTabs = prev.filter((t) => t.path !== path);
+        if (activeFilePath === path) {
+          const closedIndex = prev.findIndex((t) => t.path === path);
+          const nextTab = newTabs[Math.min(closedIndex, newTabs.length - 1)] ?? null;
+          const nextPath = nextTab?.path ?? null;
+          setActiveFilePath(nextPath);
+          if (nextPath) {
+            switchToFile(nextPath);
+          }
+        }
+        return newTabs;
+      });
+    },
+    [activeFilePath, disposeModel, switchToFile]
+  );
+  const setActiveFileAction = useCallback3(
+    (path) => {
+      setActiveFilePath(path);
+      switchToFile(path);
+    },
+    [switchToFile]
+  );
+  const updateFileContent = useCallback3(
+    (path, value) => {
+      fileContentsRef.current.set(path, value);
+      const model = modelsRef.current.get(path);
+      if (model && !model.isDisposed() && model.getValue() !== value) {
+        model.setValue(value);
+      }
+      const isDirty = value !== originalContentsRef.current.get(path);
+      setOpenTabs(
+        (prev) => prev.map((t) => t.path === path ? { ...t, isDirty } : t)
+      );
+      onFileChange?.(path, value);
+    },
+    [onFileChange]
+  );
+  const getFileContent = useCallback3((path) => {
+    return fileContentsRef.current.get(path);
+  }, []);
+  const markSaved = useCallback3((path) => {
+    const content = fileContentsRef.current.get(path);
+    if (content !== void 0) {
+      originalContentsRef.current.set(path, content);
+    }
+    setOpenTabs(
+      (prev) => prev.map((t) => t.path === path ? { ...t, isDirty: false } : t)
+    );
+  }, []);
+  const markAllSaved = useCallback3(() => {
+    for (const [path, content] of fileContentsRef.current.entries()) {
+      originalContentsRef.current.set(path, content);
+    }
+    setOpenTabs((prev) => prev.map((t) => ({ ...t, isDirty: false })));
+  }, []);
+  const handleEditorMount = useCallback3(
+    (editorInstance, monacoInstance) => {
+      monacoRef.current = monacoInstance;
+      editorRef.current = editorInstance;
+      if (activeFilePath) {
+        const model = getOrCreateModel(activeFilePath);
+        if (model) {
+          editorInstance.setModel(model);
+        }
+      }
+      editorInstance.onDidChangeCursorPosition((e) => {
+        setCursorPosition({ line: e.position.lineNumber, column: e.position.column });
+      });
+      const pos = editorInstance.getPosition();
+      if (pos) {
+        setCursorPosition({ line: pos.lineNumber, column: pos.column });
+      }
+      monacoInstance.editor.onDidChangeMarkers((uris) => {
+        const newMarkers = { ...validationMarkers };
+        for (const uri of uris) {
+          const path = uri.path.replace(/^\//, "");
+          const markers = monacoInstance.editor.getModelMarkers({ resource: uri });
+          newMarkers[path] = markers;
+        }
+        setValidationMarkers(newMarkers);
+        onValidationChange?.(newMarkers);
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeFilePath, getOrCreateModel, onValidationChange]
+  );
+  const handleEditorChange = useCallback3(
+    (value) => {
+      if (!activeFilePath) return;
+      fileContentsRef.current.set(activeFilePath, value);
+      const isDirty = value !== originalContentsRef.current.get(activeFilePath);
+      setOpenTabs(
+        (prev) => prev.map(
+          (t) => t.path === activeFilePath ? { ...t, isDirty } : t
+        )
+      );
+      onFileChange?.(activeFilePath, value);
+    },
+    [activeFilePath, onFileChange]
+  );
+  const activeFile = activeFilePath ? {
+    path: activeFilePath,
+    value: fileContentsRef.current.get(activeFilePath) ?? "",
+    language: files.find((f) => f.path === activeFilePath)?.language ?? detectLanguage(activeFilePath)
+  } : void 0;
+  useEffect2(() => {
+    return () => {
+      for (const model of modelsRef.current.values()) {
+        if (!model.isDisposed()) {
+          model.dispose();
+        }
+      }
+      modelsRef.current.clear();
+    };
+  }, []);
+  return {
+    openTabs,
+    activeFilePath,
+    openFile,
+    closeFile,
+    setActiveFile: setActiveFileAction,
+    updateFileContent,
+    getFileContent,
+    activeFile,
+    monacoRef,
+    editorRef,
+    handleEditorMount,
+    handleEditorChange,
+    validationMarkers,
+    markSaved,
+    markAllSaved,
+    cursorPosition
+  };
+}
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorTabs.tsx
+import React3 from "react";
+import { Box as Box3, IconButton as IconButton2, Tooltip as Tooltip2, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var CodeEditorTabs = ({
+  tabs,
+  activeTab,
+  onTabSelect,
+  onTabClose,
+  renderTab,
+  containerProps
+}) => {
+  if (tabs.length === 0) return null;
+  return /* @__PURE__ */ jsx4(
+    Box3,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "stretch",
+        overflow: "auto",
+        minHeight: 36,
+        borderBottom: 1,
+        borderColor: "divider",
+        bgcolor: "background.default",
+        "&::-webkit-scrollbar": { height: 2 },
+        "&::-webkit-scrollbar-thumb": { bgcolor: "action.disabled", borderRadius: 1 }
+      },
+      ...containerProps,
+      children: tabs.map((tab) => {
+        const isActive = tab.path === activeTab;
+        const label = tab.label ?? getFileName(tab.path);
+        if (renderTab) {
+          return /* @__PURE__ */ jsx4(React3.Fragment, { children: renderTab({
+            tab,
+            isActive,
+            onSelect: () => onTabSelect?.(tab.path),
+            onClose: () => onTabClose?.(tab.path)
+          }) }, tab.path);
+        }
+        return /* @__PURE__ */ jsxs4(
+          Box3,
+          {
+            onClick: () => onTabSelect?.(tab.path),
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5,
+              px: 1.5,
+              py: 0.5,
+              cursor: "pointer",
+              whiteSpace: "nowrap",
+              borderRight: 1,
+              borderColor: "divider",
+              bgcolor: isActive ? "background.paper" : "transparent",
+              borderBottom: isActive ? "2px solid" : "2px solid transparent",
+              borderBottomColor: isActive ? "primary.main" : "transparent",
+              "&:hover": {
+                bgcolor: isActive ? "background.paper" : "action.hover"
+              },
+              transition: "background-color 0.15s ease"
+            },
+            children: [
+              tab.isDirty && /* @__PURE__ */ jsx4(
+                Box3,
+                {
+                  sx: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    bgcolor: "warning.main",
+                    flexShrink: 0
+                  }
+                }
+              ),
+              tab.syncStatus && /* @__PURE__ */ jsx4(
+                Box3,
+                {
+                  component: "span",
+                  sx: {
+                    fontSize: "0.6rem",
+                    fontWeight: 700,
+                    lineHeight: 1,
+                    color: tab.syncStatus === "new" ? "success.main" : "warning.main",
+                    flexShrink: 0
+                  },
+                  children: tab.syncStatus === "new" ? "N" : "M"
+                }
+              ),
+              /* @__PURE__ */ jsx4(Tooltip2, { title: tab.path, enterDelay: 600, children: /* @__PURE__ */ jsx4(
+                Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    fontSize: "0.8125rem",
+                    fontWeight: isActive ? 600 : 400,
+                    color: isActive ? "text.primary" : "text.secondary",
+                    userSelect: "none"
+                  },
+                  children: label
+                }
+              ) }),
+              onTabClose && /* @__PURE__ */ jsx4(
+                IconButton2,
+                {
+                  size: "small",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onTabClose(tab.path);
+                  },
+                  sx: {
+                    p: 0.25,
+                    ml: 0.5,
+                    opacity: isActive ? 0.7 : 0,
+                    "&:hover": { opacity: 1 },
+                    ".MuiBox-root:hover > &": { opacity: 0.5 },
+                    transition: "opacity 0.15s ease"
+                  },
+                  "aria-label": `Close ${label}`,
+                  children: /* @__PURE__ */ jsx4(CloseIcon, { sx: { fontSize: 14 } })
+                }
+              )
+            ]
+          },
+          tab.path
+        );
+      })
+    }
+  );
+};
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorFileTree.tsx
+import React4, { useCallback as useCallback4, useState as useState3 } from "react";
+import { Box as Box4, Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import FolderIcon from "@mui/icons-material/Folder";
+import FolderOpenIcon from "@mui/icons-material/FolderOpen";
+import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
+import ExpandMoreIcon2 from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var STATUS_CONFIG = {
+  new: { label: "N", color: "success.main" },
+  modified: { label: "M", color: "warning.main" },
+  deleted: { label: "D", color: "error.main" }
+};
+function computeFolderStatus(node) {
+  if (node.status) return node.status;
+  if (node.type !== "folder" || !node.children) return void 0;
+  const childStatuses = node.children.map((c) => c.type === "folder" ? computeFolderStatus(c) : c.status).filter((s) => !!s);
+  if (childStatuses.length === 0) return void 0;
+  if (childStatuses.includes("new")) return "new";
+  if (childStatuses.includes("modified")) return "modified";
+  return "deleted";
+}
+var CodeEditorFileTree = ({
+  tree,
+  selectedPath,
+  onFileSelect,
+  onFolderToggle,
+  renderNode,
+  defaultExpandedPaths,
+  width = 220,
+  containerProps
+}) => {
+  const [expandedPaths, setExpandedPaths] = useState3(
+    () => new Set(defaultExpandedPaths ?? [])
+  );
+  const toggleFolder = useCallback4(
+    (path) => {
+      setExpandedPaths((prev) => {
+        const next = new Set(prev);
+        const isExpanded = next.has(path);
+        if (isExpanded) {
+          next.delete(path);
+        } else {
+          next.add(path);
+        }
+        onFolderToggle?.(path, !isExpanded);
+        return next;
+      });
+    },
+    [onFolderToggle]
+  );
+  const renderTreeNode = (node, depth) => {
+    const isFolder = node.type === "folder";
+    const isExpanded = expandedPaths.has(node.path);
+    const isSelected = node.path === selectedPath;
+    if (renderNode) {
+      return /* @__PURE__ */ jsxs5(React4.Fragment, { children: [
+        renderNode({
+          node,
+          depth,
+          isSelected,
+          isExpanded,
+          onSelect: () => {
+            if (isFolder) {
+              toggleFolder(node.path);
+            } else {
+              onFileSelect?.(node.path);
+            }
+          },
+          onToggle: () => toggleFolder(node.path)
+        }),
+        isFolder && isExpanded && node.children?.map((child) => renderTreeNode(child, depth + 1))
+      ] }, node.path);
+    }
+    return /* @__PURE__ */ jsxs5(React4.Fragment, { children: [
+      /* @__PURE__ */ jsxs5(
+        ListItemButton,
+        {
+          selected: isSelected,
+          onClick: () => {
+            if (isFolder) {
+              toggleFolder(node.path);
+            } else {
+              onFileSelect?.(node.path);
+            }
+          },
+          sx: {
+            pl: 1 + depth * 1.5,
+            py: 0.25,
+            minHeight: 28,
+            "&.Mui-selected": {
+              bgcolor: "action.selected",
+              "&:hover": { bgcolor: "action.selected" }
+            }
+          },
+          children: [
+            isFolder && /* @__PURE__ */ jsx5(ListItemIcon, { sx: { minWidth: 20 }, children: isExpanded ? /* @__PURE__ */ jsx5(ExpandMoreIcon2, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx5(ChevronRightIcon, { sx: { fontSize: 16 } }) }),
+            /* @__PURE__ */ jsx5(ListItemIcon, { sx: { minWidth: 24 }, children: node.icon ?? (isFolder ? isExpanded ? /* @__PURE__ */ jsx5(FolderOpenIcon, { sx: { fontSize: 16, color: "warning.main" } }) : /* @__PURE__ */ jsx5(FolderIcon, { sx: { fontSize: 16, color: "warning.main" } }) : /* @__PURE__ */ jsx5(InsertDriveFileOutlinedIcon, { sx: { fontSize: 16, color: "text.secondary" } })) }),
+            /* @__PURE__ */ jsx5(
+              ListItemText,
+              {
+                primary: node.name,
+                slotProps: {
+                  primary: {
+                    sx: {
+                      fontSize: "0.8125rem",
+                      fontWeight: isSelected ? 600 : 400,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    }
+                  }
+                }
+              }
+            ),
+            (() => {
+              const effectiveStatus = isFolder ? computeFolderStatus(node) : node.status;
+              if (!effectiveStatus) return null;
+              const cfg = STATUS_CONFIG[effectiveStatus];
+              return /* @__PURE__ */ jsx5(
+                Box4,
+                {
+                  component: "span",
+                  sx: {
+                    ml: "auto",
+                    pl: 0.5,
+                    fontSize: "0.65rem",
+                    fontWeight: 700,
+                    lineHeight: 1,
+                    color: cfg.color,
+                    flexShrink: 0
+                  },
+                  children: cfg.label
+                }
+              );
+            })()
+          ]
+        }
+      ),
+      isFolder && /* @__PURE__ */ jsx5(Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true, children: node.children?.map((child) => renderTreeNode(child, depth + 1)) })
+    ] }, node.path);
+  };
+  return /* @__PURE__ */ jsx5(
+    Box4,
+    {
+      sx: {
+        width: typeof width === "number" ? `${width}px` : width,
+        minWidth: typeof width === "number" ? `${width}px` : width,
+        height: "100%",
+        overflow: "auto",
+        borderRight: 1,
+        borderColor: "divider",
+        bgcolor: "background.default"
+      },
+      ...containerProps,
+      children: /* @__PURE__ */ jsx5(List, { dense: true, disablePadding: true, children: tree.map((node) => renderTreeNode(node, 0)) })
+    }
+  );
+};
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorStatusBar.tsx
+import { Box as Box5, Tooltip as Tooltip3, Typography as Typography2 } from "@mui/material";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var LANGUAGE_LABELS = {
+  typescript: "TypeScript",
+  javascript: "JavaScript",
+  json: "JSON",
+  html: "HTML",
+  css: "CSS",
+  python: "Python",
+  yaml: "YAML",
+  markdown: "Markdown",
+  sql: "SQL",
+  xml: "XML",
+  plaintext: "Plain Text"
+};
+var CodeEditorStatusBar = ({
+  gitInfo,
+  language,
+  cursorPosition,
+  items,
+  renderStatusBar,
+  onBranchClick,
+  containerProps
+}) => {
+  if (renderStatusBar) {
+    return /* @__PURE__ */ jsx6(Fragment2, { children: renderStatusBar({ gitInfo, language, cursorPosition, items }) });
+  }
+  const leftItems = items?.filter((i) => i.align !== "right") ?? [];
+  const rightItems = items?.filter((i) => i.align === "right") ?? [];
+  return /* @__PURE__ */ jsxs6(
+    Box5,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        px: 1.5,
+        py: 0.25,
+        minHeight: 24,
+        borderTop: 1,
+        borderColor: "divider",
+        bgcolor: "primary.main",
+        color: "primary.contrastText",
+        fontSize: "0.75rem",
+        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, monospace',
+        gap: 1,
+        flexShrink: 0
+      },
+      ...containerProps,
+      children: [
+        /* @__PURE__ */ jsxs6(Box5, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
+          gitInfo && /* @__PURE__ */ jsx6(
+            Tooltip3,
+            {
+              title: [
+                gitInfo.remote && `Remote: ${gitInfo.remote}`,
+                gitInfo.commitHash && `Commit: ${gitInfo.commitHash}`,
+                gitInfo.ahead != null && `\u2191 ${gitInfo.ahead} ahead`,
+                gitInfo.behind != null && `\u2193 ${gitInfo.behind} behind`
+              ].filter(Boolean).join(" \xB7 ") || gitInfo.branch,
+              enterDelay: 400,
+              children: /* @__PURE__ */ jsxs6(
+                Box5,
+                {
+                  onClick: onBranchClick,
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    cursor: onBranchClick ? "pointer" : "default",
+                    overflow: "hidden",
+                    "&:hover": onBranchClick ? { opacity: 0.8 } : void 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx6(
+                      "svg",
+                      {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 16 16",
+                        fill: "currentColor",
+                        style: { flexShrink: 0 },
+                        children: /* @__PURE__ */ jsx6(
+                          "path",
+                          {
+                            fillRule: "evenodd",
+                            d: "M11.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5zm-2.25.75a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.492 2.492 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25zM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5zM3.5 3.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0z"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      Typography2,
+                      {
+                        variant: "caption",
+                        sx: {
+                          fontSize: "inherit",
+                          fontFamily: "inherit",
+                          color: "inherit",
+                          lineHeight: 1,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          maxWidth: 180
+                        },
+                        children: gitInfo.branch
+                      }
+                    ),
+                    gitInfo.isDirty && /* @__PURE__ */ jsx6(
+                      Box5,
+                      {
+                        component: "span",
+                        sx: {
+                          width: 6,
+                          height: 6,
+                          borderRadius: "50%",
+                          bgcolor: "warning.light",
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    gitInfo.ahead != null && gitInfo.ahead > 0 && /* @__PURE__ */ jsxs6(Typography2, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
+                      "\u2191",
+                      gitInfo.ahead
+                    ] }),
+                    gitInfo.behind != null && gitInfo.behind > 0 && /* @__PURE__ */ jsxs6(Typography2, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
+                      "\u2193",
+                      gitInfo.behind
+                    ] })
+                  ]
+                }
+              )
+            }
+          ),
+          leftItems.map((item) => /* @__PURE__ */ jsx6(StatusBarItemElement, { item }, item.id))
+        ] }),
+        /* @__PURE__ */ jsxs6(Box5, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
+          rightItems.map((item) => /* @__PURE__ */ jsx6(StatusBarItemElement, { item }, item.id)),
+          cursorPosition && /* @__PURE__ */ jsxs6(
+            Typography2,
+            {
+              variant: "caption",
+              sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, whiteSpace: "nowrap" },
+              children: [
+                "Ln ",
+                cursorPosition.line,
+                ", Col ",
+                cursorPosition.column
+              ]
+            }
+          ),
+          language && /* @__PURE__ */ jsx6(
+            Typography2,
+            {
+              variant: "caption",
+              sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, whiteSpace: "nowrap" },
+              children: LANGUAGE_LABELS[language] ?? language
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var StatusBarItemElement = ({ item }) => {
+  const inner = /* @__PURE__ */ jsx6(
+    Box5,
+    {
+      onClick: item.onClick,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        cursor: item.onClick ? "pointer" : "default",
+        lineHeight: 1,
+        whiteSpace: "nowrap",
+        "&:hover": item.onClick ? { opacity: 0.8 } : void 0
+      },
+      children: typeof item.content === "string" ? /* @__PURE__ */ jsx6(
+        Typography2,
+        {
+          variant: "caption",
+          sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1 },
+          children: item.content
+        }
+      ) : item.content
+    }
+  );
+  if (item.tooltip) {
+    return /* @__PURE__ */ jsx6(Tooltip3, { title: item.tooltip, enterDelay: 400, children: inner });
+  }
+  return inner;
+};
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorWelcomeScreen.tsx
+import { Box as Box6 } from "@mui/material";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var CodeEditorWelcomeScreen = ({
+  logo,
+  children,
+  containerProps
+}) => {
+  const defaultLogo = /* @__PURE__ */ jsx7(
+    CereIcon,
+    {
+      sx: {
+        fontSize: 80,
+        color: "text.disabled",
+        opacity: 0.4
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs7(
+    Box6,
+    {
+      sx: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 3,
+        p: 4,
+        userSelect: "none"
+      },
+      ...containerProps,
+      children: [
+        logo !== void 0 ? logo : defaultLogo,
+        children && /* @__PURE__ */ jsx7(
+          Box6,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 1
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorWorkspace.tsx
+import React5 from "react";
+import { Box as Box7 } from "@mui/material";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var CodeEditorWorkspace = ({
+  files,
+  initialOpenPaths,
+  onFileChange,
+  onValidationChange,
+  fileTree,
+  defaultExpandedPaths,
+  showTabs = true,
+  showFileTree = true,
+  fileTreeWidth = 220,
+  height = "500px",
+  editorProps,
+  containerProps,
+  renderTabs,
+  renderFileTree,
+  renderEditor,
+  renderStatusBar,
+  renderWelcomeScreen,
+  welcomeScreen,
+  welcomeScreenProps,
+  gitInfo,
+  showStatusBar = true,
+  statusBarItems,
+  onWorkspaceReady,
+  onSave,
+  onBranchClick
+}) => {
+  const workspace = useCodeEditorWorkspace({
+    files,
+    initialOpenPaths,
+    onFileChange,
+    onValidationChange
+  });
+  React5.useEffect(() => {
+    onWorkspaceReady?.(workspace);
+  }, []);
+  React5.useEffect(() => {
+    if (!onSave) return;
+    const handleKeyDown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        const dirtyFiles = workspace.openTabs.filter((t) => t.isDirty).map((t) => {
+          const file = files.find((f) => f.path === t.path);
+          if (!file) return null;
+          return {
+            ...file,
+            value: workspace.getFileContent(file.path) ?? file.value
+          };
+        }).filter((f) => f !== null);
+        if (dirtyFiles.length > 0) {
+          onSave(dirtyFiles);
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onSave, workspace, files]);
+  const hasFileTree = showFileTree && fileTree && fileTree.length > 0;
+  const tabsProps = {
+    tabs: workspace.openTabs,
+    activeTab: workspace.activeFilePath,
+    onTabSelect: workspace.setActiveFile,
+    onTabClose: workspace.closeFile
+  };
+  const tabsElement = showTabs ? renderTabs ? renderTabs({ ...tabsProps, workspace }) : /* @__PURE__ */ jsx8(CodeEditorTabs, { ...tabsProps }) : null;
+  const fileTreeProps = {
+    tree: fileTree ?? [],
+    selectedPath: workspace.activeFilePath,
+    onFileSelect: workspace.openFile,
+    defaultExpandedPaths,
+    width: fileTreeWidth
+  };
+  const fileTreeElement = hasFileTree ? renderFileTree ? renderFileTree({ ...fileTreeProps, workspace }) : /* @__PURE__ */ jsx8(CodeEditorFileTree, { ...fileTreeProps }) : null;
+  const statusBarProps = {
+    gitInfo,
+    language: workspace.activeFile?.language,
+    cursorPosition: workspace.cursorPosition ?? void 0,
+    items: statusBarItems,
+    onBranchClick
+  };
+  const statusBarElement = showStatusBar ? renderStatusBar ? renderStatusBar({ ...statusBarProps, workspace }) : /* @__PURE__ */ jsx8(CodeEditorStatusBar, { ...statusBarProps }) : null;
+  const welcomeElement = renderWelcomeScreen ? renderWelcomeScreen(workspace) : welcomeScreen !== void 0 ? welcomeScreen : /* @__PURE__ */ jsx8(CodeEditorWelcomeScreen, { ...welcomeScreenProps });
+  const editorElement = renderEditor ? renderEditor(workspace) : workspace.activeFile ? /* @__PURE__ */ jsx8(
+    CodeEditor,
+    {
+      value: workspace.activeFile.value,
+      onChange: workspace.handleEditorChange,
+      language: workspace.activeFile.language,
+      editorRef: workspace.editorRef,
+      monacoRef: workspace.monacoRef,
+      onMount: workspace.handleEditorMount,
+      onValidate: (markers) => {
+        if (workspace.activeFilePath) {
+          workspace.validationMarkers[workspace.activeFilePath] = markers;
+        }
+      },
+      externalModelManagement: true,
+      height: "100%",
+      ...editorProps
+    }
+  ) : welcomeElement;
+  return /* @__PURE__ */ jsxs8(
+    Box7,
+    {
+      sx: {
+        display: "flex",
+        height: typeof height === "number" ? `${height}px` : height,
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        overflow: "hidden",
+        bgcolor: "background.paper"
+      },
+      ...containerProps,
+      children: [
+        fileTreeElement,
+        /* @__PURE__ */ jsxs8(Box7, { sx: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden" }, children: [
+          tabsElement,
+          /* @__PURE__ */ jsx8(Box7, { sx: { flex: 1, overflow: "hidden" }, children: editorElement }),
+          statusBarElement
+        ] })
+      ]
+    }
+  );
+};
+
+export {
+  FlowEditor,
+  Background2 as Background,
+  Controls2 as Controls,
+  MiniMap2 as MiniMap,
+  BackgroundVariant2 as BackgroundVariant,
+  ConnectionLineType2 as ConnectionLineType,
+  CodeEditor,
+  WorkflowNodeHandle,
+  EXTENSION_LANGUAGE_MAP,
+  detectLanguage,
+  getFileName,
+  useCodeEditorWorkspace,
+  CodeEditorTabs,
+  CodeEditorFileTree,
+  CodeEditorStatusBar,
+  CodeEditorWelcomeScreen,
+  CodeEditorWorkspace,
+  Panel2 as Panel
+};
+//# sourceMappingURL=chunk-XF66WQZE.mjs.map