@cere/cere-design-system 0.0.29 → 0.0.30

package/dist/index.js

@@ -60,6 +60,10 @@ __export(index_exports, {
   ClockIcon: () => ClockIcon,
   CloudFlashIcon: () => CloudFlashIcon,
   CodeEditor: () => CodeEditor,
+  CodeEditorFileTree: () => CodeEditorFileTree,
+  CodeEditorStatusBar: () => CodeEditorStatusBar,
+  CodeEditorTabs: () => CodeEditorTabs,
+  CodeEditorWorkspace: () => CodeEditorWorkspace,
   Collapse: () => Collapse,
   ConnectionLineType: () => import_reactflow2.ConnectionLineType,
   ConnectionStatus: () => ConnectionStatus,
@@ -78,6 +82,7 @@ __export(index_exports, {
   Drawer: () => Drawer2,
   Dropdown: () => Dropdown,
   DropdownAnchor: () => DropdownAnchor,
+  EXTENSION_LANGUAGE_MAP: () => EXTENSION_LANGUAGE_MAP,
   EmptyState: () => EmptyState,
   EntityHeader: () => EntityHeader,
   FilledFolderIcon: () => FilledFolderIcon,
@@ -164,9 +169,12 @@ __export(index_exports, {
   WorkspaceSelectorButton: () => WorkspaceSelectorButton,
   colors: () => colors,
   contextMenuItems: () => contextMenuItems,
+  detectLanguage: () => detectLanguage,
+  getFileName: () => getFileName,
   robPaletteExtended: () => robPaletteExtended,
   robPrimaryPalette: () => robPrimaryPalette,
   theme: () => theme,
+  useCodeEditorWorkspace: () => useCodeEditorWorkspace,
   useIsDesktop: () => useIsDesktop,
   useIsMobile: () => useIsMobile,
   useIsTablet: () => useIsTablet,
@@ -8735,7 +8743,8 @@ var CodeEditor = ({
   monacoRef,
   onFullscreenChange,
   containerProps,
-  typeDefinitions
+  typeDefinitions,
+  externalModelManagement = false
 }) => {
   const [isEditorReady, setIsEditorReady] = (0, import_react35.useState)(false);
   const [validationErrors, setValidationErrors] = (0, import_react35.useState)([]);
@@ -8881,6 +8890,7 @@ var CodeEditor = ({
     onChange(valueStr);
   };
   (0, import_react35.useEffect)(() => {
+    if (externalModelManagement) return;
     if (value !== tsCode) {
       setTsCode(value);
       if (isEditorReady && finalEditorRef?.current) {
@@ -8891,7 +8901,7 @@ var CodeEditor = ({
         }
       }
     }
-  }, [value, tsCode, isEditorReady, finalEditorRef]);
+  }, [value, tsCode, isEditorReady, finalEditorRef, externalModelManagement]);
   const editorMinHeight = minHeight ? typeof minHeight === "number" ? `${minHeight}px` : minHeight : "400px";
   const defaultOptions = {
     lineNumbers,
@@ -9119,6 +9129,832 @@ var WorkflowNodeHandle = ({
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_reactflow3.Handle, { type: "source", position: import_reactflow3.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
+var import_react37 = require("react");
+function useCodeEditorWorkspace({
+  files,
+  initialOpenPaths,
+  onFileChange,
+  onValidationChange
+}) {
+  const fileContentsRef = (0, import_react37.useRef)(/* @__PURE__ */ new Map());
+  const originalContentsRef = (0, import_react37.useRef)(/* @__PURE__ */ new Map());
+  const [openTabs, setOpenTabs] = (0, import_react37.useState)([]);
+  const [activeFilePath, setActiveFilePath] = (0, import_react37.useState)(null);
+  const monacoRef = (0, import_react37.useRef)(null);
+  const editorRef = (0, import_react37.useRef)(null);
+  const modelsRef = (0, import_react37.useRef)(/* @__PURE__ */ new Map());
+  const [validationMarkers, setValidationMarkers] = (0, import_react37.useState)({});
+  const [cursorPosition, setCursorPosition] = (0, import_react37.useState)(null);
+  (0, import_react37.useEffect)(() => {
+    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]);
+  (0, import_react37.useEffect)(() => {
+    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 = (0, import_react37.useCallback)(
+    (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 = (0, import_react37.useCallback)((path) => {
+    const model = modelsRef.current.get(path);
+    if (model && !model.isDisposed()) {
+      model.dispose();
+    }
+    modelsRef.current.delete(path);
+  }, []);
+  const switchToFile = (0, import_react37.useCallback)(
+    (path) => {
+      const ed = editorRef.current;
+      if (!ed) return;
+      const model = getOrCreateModel(path);
+      if (model) {
+        ed.setModel(model);
+      }
+    },
+    [getOrCreateModel]
+  );
+  const openFile = (0, import_react37.useCallback)(
+    (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 = (0, import_react37.useCallback)(
+    (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 = (0, import_react37.useCallback)(
+    (path) => {
+      setActiveFilePath(path);
+      switchToFile(path);
+    },
+    [switchToFile]
+  );
+  const updateFileContent = (0, import_react37.useCallback)(
+    (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 = (0, import_react37.useCallback)((path) => {
+    return fileContentsRef.current.get(path);
+  }, []);
+  const markSaved = (0, import_react37.useCallback)((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 = (0, import_react37.useCallback)(() => {
+    for (const [path, content] of fileContentsRef.current.entries()) {
+      originalContentsRef.current.set(path, content);
+    }
+    setOpenTabs((prev) => prev.map((t) => ({ ...t, isDirty: false })));
+  }, []);
+  const handleEditorMount = (0, import_react37.useCallback)(
+    (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 = (0, import_react37.useCallback)(
+    (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;
+  (0, import_react37.useEffect)(() => {
+    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
+var import_react38 = __toESM(require("react"));
+var import_material74 = require("@mui/material");
+var import_Close5 = __toESM(require("@mui/icons-material/Close"));
+var import_jsx_runtime98 = require("react/jsx-runtime");
+var CodeEditorTabs = ({
+  tabs,
+  activeTab,
+  onTabSelect,
+  onTabClose,
+  renderTab,
+  containerProps
+}) => {
+  if (tabs.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+    import_material74.Box,
+    {
+      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__ */ (0, import_jsx_runtime98.jsx)(import_react38.default.Fragment, { children: renderTab({
+            tab,
+            isActive,
+            onSelect: () => onTabSelect?.(tab.path),
+            onClose: () => onTabClose?.(tab.path)
+          }) }, tab.path);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+          import_material74.Box,
+          {
+            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__ */ (0, import_jsx_runtime98.jsx)(
+                import_material74.Box,
+                {
+                  sx: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    bgcolor: "warning.main",
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_material74.Tooltip, { title: tab.path, enterDelay: 600, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_material74.Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    fontSize: "0.8125rem",
+                    fontWeight: isActive ? 600 : 400,
+                    color: isActive ? "text.primary" : "text.secondary",
+                    userSelect: "none"
+                  },
+                  children: label
+                }
+              ) }),
+              onTabClose && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_material74.IconButton,
+                {
+                  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__ */ (0, import_jsx_runtime98.jsx)(import_Close5.default, { sx: { fontSize: 14 } })
+                }
+              )
+            ]
+          },
+          tab.path
+        );
+      })
+    }
+  );
+};
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorFileTree.tsx
+var import_react39 = __toESM(require("react"));
+var import_material75 = require("@mui/material");
+var import_Folder = __toESM(require("@mui/icons-material/Folder"));
+var import_FolderOpen = __toESM(require("@mui/icons-material/FolderOpen"));
+var import_InsertDriveFileOutlined = __toESM(require("@mui/icons-material/InsertDriveFileOutlined"));
+var import_ExpandMore4 = __toESM(require("@mui/icons-material/ExpandMore"));
+var import_ChevronRight4 = __toESM(require("@mui/icons-material/ChevronRight"));
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var CodeEditorFileTree = ({
+  tree,
+  selectedPath,
+  onFileSelect,
+  onFolderToggle,
+  renderNode,
+  defaultExpandedPaths,
+  width = 220,
+  containerProps
+}) => {
+  const [expandedPaths, setExpandedPaths] = (0, import_react39.useState)(
+    () => new Set(defaultExpandedPaths ?? [])
+  );
+  const toggleFolder = (0, import_react39.useCallback)(
+    (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__ */ (0, import_jsx_runtime99.jsxs)(import_react39.default.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__ */ (0, import_jsx_runtime99.jsxs)(import_react39.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+        import_material75.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__ */ (0, import_jsx_runtime99.jsx)(import_material75.ListItemIcon, { sx: { minWidth: 20 }, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_ExpandMore4.default, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_ChevronRight4.default, { sx: { fontSize: 16 } }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_material75.ListItemIcon, { sx: { minWidth: 24 }, children: node.icon ?? (isFolder ? isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_FolderOpen.default, { sx: { fontSize: 16, color: "warning.main" } }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_Folder.default, { sx: { fontSize: 16, color: "warning.main" } }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_InsertDriveFileOutlined.default, { sx: { fontSize: 16, color: "text.secondary" } })) }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              import_material75.ListItemText,
+              {
+                primary: node.name,
+                slotProps: {
+                  primary: {
+                    sx: {
+                      fontSize: "0.8125rem",
+                      fontWeight: isSelected ? 600 : 400,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    }
+                  }
+                }
+              }
+            )
+          ]
+        }
+      ),
+      isFolder && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_material75.Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true, children: node.children?.map((child) => renderTreeNode(child, depth + 1)) })
+    ] }, node.path);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    import_material75.Box,
+    {
+      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__ */ (0, import_jsx_runtime99.jsx)(import_material75.List, { dense: true, disablePadding: true, children: tree.map((node) => renderTreeNode(node, 0)) })
+    }
+  );
+};
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorStatusBar.tsx
+var import_material76 = require("@mui/material");
+var import_jsx_runtime100 = require("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,
+  containerProps
+}) => {
+  if (renderStatusBar) {
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_jsx_runtime100.Fragment, { children: renderStatusBar({ gitInfo, language, cursorPosition, items }) });
+  }
+  const leftItems = items?.filter((i) => i.align !== "right") ?? [];
+  const rightItems = items?.filter((i) => i.align === "right") ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
+    import_material76.Box,
+    {
+      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__ */ (0, import_jsx_runtime100.jsxs)(import_material76.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
+          gitInfo && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+            import_material76.Tooltip,
+            {
+              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__ */ (0, import_jsx_runtime100.jsxs)(
+                import_material76.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    cursor: "default",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+                      "svg",
+                      {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 16 16",
+                        fill: "currentColor",
+                        style: { flexShrink: 0 },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+                          "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__ */ (0, import_jsx_runtime100.jsx)(
+                      import_material76.Typography,
+                      {
+                        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__ */ (0, import_jsx_runtime100.jsx)(
+                      import_material76.Box,
+                      {
+                        component: "span",
+                        sx: {
+                          width: 6,
+                          height: 6,
+                          borderRadius: "50%",
+                          bgcolor: "warning.light",
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    gitInfo.ahead != null && gitInfo.ahead > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_material76.Typography, { 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__ */ (0, import_jsx_runtime100.jsxs)(import_material76.Typography, { variant: "caption", sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, opacity: 0.85 }, children: [
+                      "\u2193",
+                      gitInfo.behind
+                    ] })
+                  ]
+                }
+              )
+            }
+          ),
+          leftItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(StatusBarItemElement, { item }, item.id))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_material76.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }, children: [
+          rightItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(StatusBarItemElement, { item }, item.id)),
+          cursorPosition && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
+            import_material76.Typography,
+            {
+              variant: "caption",
+              sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, whiteSpace: "nowrap" },
+              children: [
+                "Ln ",
+                cursorPosition.line,
+                ", Col ",
+                cursorPosition.column
+              ]
+            }
+          ),
+          language && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+            import_material76.Typography,
+            {
+              variant: "caption",
+              sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1, whiteSpace: "nowrap" },
+              children: LANGUAGE_LABELS[language] ?? language
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var StatusBarItemElement = ({ item }) => {
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    import_material76.Box,
+    {
+      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__ */ (0, import_jsx_runtime100.jsx)(
+        import_material76.Typography,
+        {
+          variant: "caption",
+          sx: { fontSize: "inherit", fontFamily: "inherit", color: "inherit", lineHeight: 1 },
+          children: item.content
+        }
+      ) : item.content
+    }
+  );
+  if (item.tooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_material76.Tooltip, { title: item.tooltip, enterDelay: 400, children: inner });
+  }
+  return inner;
+};
+
+// src/components/third-party/CodeEditorWorkspace/CodeEditorWorkspace.tsx
+var import_react40 = __toESM(require("react"));
+var import_material77 = require("@mui/material");
+var import_jsx_runtime101 = require("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,
+  gitInfo,
+  showStatusBar = true,
+  statusBarItems,
+  onWorkspaceReady
+}) => {
+  const workspace = useCodeEditorWorkspace({
+    files,
+    initialOpenPaths,
+    onFileChange,
+    onValidationChange
+  });
+  import_react40.default.useEffect(() => {
+    onWorkspaceReady?.(workspace);
+  }, []);
+  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__ */ (0, import_jsx_runtime101.jsx)(CodeEditorTabs, { ...tabsProps }) : null;
+  const fileTreeProps = {
+    tree: fileTree ?? [],
+    selectedPath: workspace.activeFilePath,
+    onFileSelect: workspace.openFile,
+    defaultExpandedPaths,
+    width: fileTreeWidth
+  };
+  const fileTreeElement = hasFileTree ? renderFileTree ? renderFileTree({ ...fileTreeProps, workspace }) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(CodeEditorFileTree, { ...fileTreeProps }) : null;
+  const statusBarProps = {
+    gitInfo,
+    language: workspace.activeFile?.language,
+    cursorPosition: workspace.cursorPosition ?? void 0,
+    items: statusBarItems
+  };
+  const statusBarElement = showStatusBar ? renderStatusBar ? renderStatusBar({ ...statusBarProps, workspace }) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(CodeEditorStatusBar, { ...statusBarProps }) : null;
+  const editorElement = renderEditor ? renderEditor(workspace) : workspace.activeFile ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    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
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    import_material77.Box,
+    {
+      sx: {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "text.secondary",
+        fontSize: "0.875rem"
+      },
+      children: "Open a file to start editing"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
+    import_material77.Box,
+    {
+      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__ */ (0, import_jsx_runtime101.jsxs)(import_material77.Box, { sx: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden" }, children: [
+          tabsElement,
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_material77.Box, { sx: { flex: 1, overflow: "hidden" }, children: editorElement }),
+          statusBarElement
+        ] })
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -9151,6 +9987,10 @@ var WorkflowNodeHandle = ({
   ClockIcon,
   CloudFlashIcon,
   CodeEditor,
+  CodeEditorFileTree,
+  CodeEditorStatusBar,
+  CodeEditorTabs,
+  CodeEditorWorkspace,
   Collapse,
   ConnectionLineType,
   ConnectionStatus,
@@ -9169,6 +10009,7 @@ var WorkflowNodeHandle = ({
   Drawer,
   Dropdown,
   DropdownAnchor,
+  EXTENSION_LANGUAGE_MAP,
   EmptyState,
   EntityHeader,
   FilledFolderIcon,
@@ -9255,9 +10096,12 @@ var WorkflowNodeHandle = ({
   WorkspaceSelectorButton,
   colors,
   contextMenuItems,
+  detectLanguage,
+  getFileName,
   robPaletteExtended,
   robPrimaryPalette,
   theme,
+  useCodeEditorWorkspace,
   useIsDesktop,
   useIsMobile,
   useIsTablet,