@cere/cere-design-system 0.0.8 → 0.0.9

package/dist/index.mjs

@@ -3027,9 +3027,12 @@ var FlowEditor = ({
 // src/components/third-party/CodeEditor.tsx
 import { useCallback as useCallback4, useEffect, useState as useState4, useRef } from "react";
 import Editor from "@monaco-editor/react";
-import { Box as Box12, IconButton as IconButton6, Tooltip as Tooltip3, Alert as Alert2 } from "@mui/material";
+import { Box as Box12, IconButton as IconButton6, Tooltip as Tooltip3 } 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 ExpandMoreIcon2 from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import { jsx as jsx44, jsxs as jsxs17 } from "react/jsx-runtime";
 var configureTypeScript = (monaco) => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
@@ -3081,6 +3084,16 @@ var CodeEditor = ({
   const [actualHeight, setActualHeight] = useState4(
     typeof height === "number" ? `${height}px` : height
   );
+  const [showProblems, setShowProblems] = useState4(false);
+  const [hasUserToggledProblems, setHasUserToggledProblems] = useState4(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;
@@ -3099,6 +3112,21 @@ var CodeEditor = ({
       onFullscreenChange(newFullscreenState);
     }
   }, [isFullscreen, onFullscreenChange]);
+  const gotoMarker = useCallback4(
+    (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) {
@@ -3281,14 +3309,16 @@ var CodeEditor = ({
                 sx: {
                   flex: 1,
                   display: "flex",
+                  flexDirection: "column",
                   overflow: "hidden",
                   minHeight: editorMinHeight,
-                  position: "relative"
+                  position: "relative",
+                  height: isFullscreen ? "100%" : actualHeight
                 },
                 children: /* @__PURE__ */ jsx44(
                   Editor,
                   {
-                    height: actualHeight,
+                    height: "100%",
                     defaultLanguage: language,
                     defaultValue: value,
                     value: tsCode,
@@ -3305,38 +3335,84 @@ var CodeEditor = ({
               }
             ),
             validationErrors.length > 0 && /* @__PURE__ */ jsxs17(
-              Alert2,
+              Box12,
               {
-                severity: "error",
                 sx: {
-                  position: "absolute",
-                  bottom: 8,
-                  left: 8,
-                  right: 8,
-                  zIndex: 20,
-                  boxShadow: 3,
-                  border: "1px solid",
-                  borderColor: "error.main",
-                  borderRadius: 1,
-                  maxHeight: "150px",
-                  overflow: "auto"
+                  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__ */ jsx44(Box12, { sx: { mb: 1, fontWeight: 600 }, children: "Please fix the following errors:" }),
-                  /* @__PURE__ */ jsxs17(Box12, { component: "ul", sx: { m: 0, pl: 2 }, children: [
-                    validationErrors.slice(0, 3).map((error, index) => /* @__PURE__ */ jsxs17(Box12, { component: "li", sx: { fontSize: "0.85rem" }, children: [
-                      "Line ",
-                      error.startLineNumber,
-                      ": ",
-                      error.message
-                    ] }, index)),
-                    validationErrors.length > 3 && /* @__PURE__ */ jsxs17(Box12, { component: "li", sx: { fontSize: "0.85rem" }, children: [
-                      validationErrors.length - 3,
-                      " more error",
-                      validationErrors.length - 3 > 1 ? "s" : "",
-                      "..."
-                    ] })
-                  ] })
+                  /* @__PURE__ */ jsxs17(
+                    Box12,
+                    {
+                      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__ */ jsx44(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
+                        /* @__PURE__ */ jsx44(Box12, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
+                        /* @__PURE__ */ jsxs17(Box12, { sx: { ml: 1 }, children: [
+                          validationErrors.length,
+                          " error",
+                          validationErrors.length > 1 ? "s" : ""
+                        ] }),
+                        /* @__PURE__ */ jsx44(Box12, { sx: { flex: 1 } }),
+                        /* @__PURE__ */ jsx44(
+                          IconButton6,
+                          {
+                            size: "small",
+                            "aria-label": "Toggle problems panel",
+                            onClick: () => {
+                              setHasUserToggledProblems(true);
+                              setShowProblems((s) => !s);
+                            },
+                            children: showProblems ? /* @__PURE__ */ jsx44(ExpandMoreIcon2, { fontSize: "small" }) : /* @__PURE__ */ jsx44(ExpandLessIcon, { fontSize: "small" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  showProblems && /* @__PURE__ */ jsx44(Box12, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs17(
+                    Box12,
+                    {
+                      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__ */ jsx44(ErrorOutlineIcon, { color: "error", sx: { fontSize: 18 } }),
+                        /* @__PURE__ */ jsxs17(Box12, { sx: { color: "text.secondary", width: 64 }, children: [
+                          "Line ",
+                          error.startLineNumber
+                        ] }),
+                        /* @__PURE__ */ jsx44(Box12, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
+                      ]
+                    },
+                    `${error.startLineNumber}-${error.startColumn}-${index}`
+                  )) })
                 ]
               }
             )