@m4l/components 9.24.0-beta-feature-731-m4l-components-code-editor.8 → 9.24.1-beta-feature-731-code-editor.0

package/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.js

@@ -1,54 +1,56 @@
-import { getTypographyStyles as d } from "../../../utils/getTypographyStyles.js";
-import { getCodeEditorVSCodeModernPalette as l, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as n, CODE_EDITOR_MONO_FONT_FAMILY as s, CODE_EDITOR_PADDING_PX as i } from "./constants.js";
+import { getTypographyStyles as s } from "../../../utils/getTypographyStyles.js";
+import { getCodeEditorVSCodeModernPalette as d, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as n, CODE_EDITOR_MONO_FONT_FAMILY as l, CODE_EDITOR_PADDING_PX as a, CODE_EDITOR_RESIZE_HANDLE_SIZE_PX as t } from "./constants.js";
 import { getSizeStyles as p } from "../../../utils/getSizeStyles/getSizeStyles.js";
-const b = {
+const f = {
   /** Resolve the interactive shell colors and focus treatment for the editor root. */
-  root: ({ theme: e, ownerState: r }) => {
-    const o = !r?.disabled && !r?.readOnly, a = r?.disabled ? e.vars.palette.border.disabled : e.vars.palette.border.secondary;
+  root: ({ theme: r, ownerState: e }) => {
+    const o = !e?.disabled && !e?.readOnly, i = e?.disabled ? r.vars.palette.border.disabled : r.vars.palette.border.secondary;
     return {
+      boxSizing: "border-box",
       width: "100%",
       display: "flex",
       flexDirection: "column",
+      height: e?.resizable ? `calc(100% - ${t}px)` : "100%",
       minHeight: 0,
       gap: 0,
-      border: e.vars.size.borderStroke.container,
-      borderColor: r?.variant === "outlined" || r?.error ? a : "transparent",
-      borderRadius: e.vars.size.borderRadius["r1-5"],
-      ...r?.error && {
-        borderColor: e.vars.palette.error.focus
+      border: r.vars.size.borderStroke.container,
+      borderColor: e?.variant === "outlined" || e?.error ? i : "transparent",
+      borderRadius: r.vars.size.borderRadius["r1-5"],
+      ...e?.error && {
+        borderColor: r.vars.palette.error.focus
       },
-      ...r?.variant === "contained" && {
-        backgroundColor: e.vars.palette.default.enabledOpacity
+      ...e?.variant === "contained" && {
+        backgroundColor: r.vars.palette.default.enabledOpacity
       },
-      ...r?.variant === "outlined" && {
-        backgroundColor: e.vars.palette.background.default
+      ...e?.variant === "outlined" && {
+        backgroundColor: r.vars.palette.background.default
       },
-      ...r?.readOnly && {
-        backgroundColor: `${e.vars.palette.default.enabledOpacity}!important`
+      ...e?.readOnly && {
+        backgroundColor: `${r.vars.palette.default.enabledOpacity}!important`
       },
       overflow: "hidden",
-      opacity: r?.disabled ? 0.72 : 1,
+      opacity: e?.disabled ? 0.72 : 1,
       outline: "3px solid",
       outlineColor: "transparent",
       transition: "border-color 120ms ease, outline 120ms ease, opacity 120ms ease, background-color 120ms ease",
       ...o && {
         "&:hover": {
-          backgroundColor: e.vars.palette.default.hoverOpacity,
-          ...r?.error && {
-            borderColor: e.vars.palette.error.active
+          backgroundColor: r.vars.palette.default.hoverOpacity,
+          ...e?.error && {
+            borderColor: r.vars.palette.error.active
           }
         },
         "&:focus-within": {
-          borderColor: e.vars.palette.primary.enabled,
+          borderColor: r.vars.palette.primary.enabled,
           outline: "3px solid",
-          outlineColor: r?.error ? e.vars.palette.error.focusOpacity : e.vars.palette.primary.hoverOpacity,
-          ...r?.error && {
-            borderColor: e.vars.palette.error.enabled
+          outlineColor: e?.error ? r.vars.palette.error.focusOpacity : r.vars.palette.primary.hoverOpacity,
+          ...e?.error && {
+            borderColor: r.vars.palette.error.enabled
           },
-          ...r?.variant === "contained" && {
-            backgroundColor: e.vars.palette.background.default,
+          ...e?.variant === "contained" && {
+            backgroundColor: r.vars.palette.background.default,
             "&&& .M4LCodeEditor-header": {
-              backgroundColor: e.vars.palette.default.enabledOpacity
+              backgroundColor: r.vars.palette.default.enabledOpacity
             }
           }
         }
@@ -56,49 +58,49 @@ const b = {
     };
   },
   /** Layout the language badge row above the editing surface. */
-  header: ({ theme: e, ownerState: r }) => {
-    const o = l(
-      r?.colorMode
+  header: ({ theme: r, ownerState: e }) => {
+    const o = d(
+      e?.colorMode
     );
     return {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      padding: e.vars.size.baseSpacings.sp2,
-      gap: e.vars.size.baseSpacings.sp2,
-      borderBottom: e.vars.size.borderStroke.container,
-      borderColor: e.vars.palette.border.secondary,
-      ...r?.variant === "contained" && {
+      padding: r.vars.size.baseSpacings.sp2,
+      gap: r.vars.size.baseSpacings.sp2,
+      borderBottom: r.vars.size.borderStroke.container,
+      borderColor: r.vars.palette.border.secondary,
+      ...e?.variant === "contained" && {
         backgroundColor: "transparent"
       },
-      ...r?.variant === "outlined" && {
-        backgroundColor: e.vars.palette.background.default
+      ...e?.variant === "outlined" && {
+        backgroundColor: r.vars.palette.background.default
       },
-      ...r?.readOnly && {
-        backgroundColor: `${e.vars.palette.background.default}!important`
+      ...e?.readOnly && {
+        backgroundColor: `${r.vars.palette.background.default}!important`
       },
       color: o.surface.headerForeground,
-      borderTopLeftRadius: e.vars.size.borderRadius.r2,
-      borderTopRightRadius: e.vars.size.borderRadius.r2,
+      borderTopLeftRadius: r.vars.size.borderRadius.r2,
+      borderTopRightRadius: r.vars.size.borderRadius.r2,
       overflow: "hidden",
       minHeight: "33px"
     };
   },
   /** Align any trailing badges rendered in the header row. */
-  headerBadges: ({ theme: e }) => ({
+  headerBadges: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",
-    gap: e.vars.size.baseSpacings.sp1,
+    gap: r.vars.size.baseSpacings.sp1,
     minWidth: 0,
     // Keep badges right-aligned even when the language chip is absent and the
     // badges container is the only child of the header row.
     marginLeft: "auto"
   }),
   /** Keep the leading language chip aligned with the editor header layout. */
-  languageChip: ({ theme: e, ownerState: r }) => {
-    const o = l(
-      r?.colorMode
+  languageChip: ({ theme: r, ownerState: e }) => {
+    const o = d(
+      e?.colorMode
     );
     return {
       flexShrink: 0,
@@ -108,16 +110,16 @@ const b = {
       paddingTop: 0,
       paddingBottom: 0,
       backgroundColor: "transparent",
-      borderColor: e.vars.palette.chips.default.outlined.backgroundActive,
+      borderColor: r.vars.palette.chips.default.outlined.backgroundActive,
       color: o.surface.languageChipForeground,
       ...p(
-        e,
-        r?.size || "medium",
+        r,
+        e?.size || "medium",
         "base",
-        (a) => ({ height: a })
+        (i) => ({ height: i })
       ),
       "&&& .M4LTypography-root": {
-        ...d(e.generalSettings.isMobile, r?.size || "medium", "microSlim"),
+        ...s(r.generalSettings.isMobile, e?.size || "medium", "microSlim"),
         color: o.surface.languageChipForeground,
         lineHeight: "normal",
         textTransform: "uppercase"
@@ -139,63 +141,120 @@ const b = {
     }
   }),
   /** Keep the read-only chip aligned with the trailing header actions. */
-  readOnlyChip: ({ theme: e, ownerState: r }) => ({
+  readOnlyChip: ({ theme: r, ownerState: e }) => ({
     "&&&": {
       flexShrink: 0,
       minWidth: 0,
       whiteSpace: "nowrap",
       ...p(
-        e,
-        r?.size || "medium",
+        r,
+        e?.size || "medium",
         "base",
         (o) => ({ height: o })
       ),
       "&&& .M4LTypography-root": {
-        ...d(e.generalSettings.isMobile, r?.size || "medium", "microSlim"),
-        color: e.vars.palette.chips.info.contained.color
+        ...s(r.generalSettings.isMobile, e?.size || "medium", "microSlim"),
+        color: r.vars.palette.chips.info.contained.color
       },
-      backgroundColor: e.vars.palette.chips.info.contained.backgroundColor,
+      backgroundColor: r.vars.palette.chips.info.contained.backgroundColor,
       borderColor: "transparent"
     }
   }),
-  /** Build the two-column layout used by the gutter and editor scroller. */
-  body: ({ theme: e, ownerState: r }) => {
-    const o = r?.visibleLineCount || r?.minLines || 1, a = r?.lineHeight || n.medium, t = r?.isLineCapped ? i : i * 2;
+  /** Provide the react-rnd resize shell that owns the full-width bottom handle. */
+  bodyResizeShell: ({ theme: r, ownerState: e }) => {
+    const o = d(
+      e?.colorMode
+    ), i = !e?.disabled && !!e?.isResizeHandleActive;
     return {
-      display: "grid",
-      gridTemplateColumns: r?.showLineNumbers ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+      boxSizing: "border-box",
       width: "100%",
-      alignItems: "start",
-      columnGap: 0,
-      maxHeight: `${o * a + t}px`,
-      minHeight: 0,
-      overflow: "auto",
-      pointerEvents: r?.disabled ? "none" : "auto",
-      userSelect: r?.disabled ? "none" : "auto",
-      gap: e.vars.size.baseSpacings.sp2
+      minWidth: 0,
+      maxWidth: "100%",
+      overflow: "hidden",
+      flexShrink: 0,
+      pointerEvents: e?.disabled ? "none" : "auto",
+      userSelect: e?.disabled ? "none" : "auto",
+      "& .resize-handle-bottom": {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: `${t}px !important`,
+        visibility: "visible",
+        pointerEvents: i ? "auto" : "none",
+        cursor: e?.disabled ? "not-allowed" : "row-resize",
+        touchAction: "none"
+      },
+      "& .resize-handle-bottom::after": {
+        content: '""',
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: `calc(${t}px / 2 - 1px)`,
+        height: "1px",
+        borderRadius: "999px",
+        backgroundColor: e?.disabled ? r.vars.palette.border.disabled : e?.error ? o.surface.errorBorderColor : r.vars.palette.border.secondary,
+        opacity: i ? 1 : 0,
+        transition: "opacity 120ms ease"
+      },
+      "&:hover .resize-handle-bottom": {
+        visibility: e?.disabled ? "hidden" : "visible",
+        pointerEvents: e?.disabled ? "none" : "auto"
+      },
+      "&:focus-within .resize-handle-bottom": {
+        pointerEvents: e?.disabled ? "none" : "auto"
+      },
+      "& .resize-handle-bottom:active": {
+        pointerEvents: e?.disabled ? "none" : "auto"
+      },
+      "&:hover .resize-handle-bottom::after": {
+        opacity: e?.disabled ? 0 : 1
+      },
+      "&:focus-within .resize-handle-bottom::after": {
+        opacity: e?.disabled ? 0 : 1
+      },
+      "& .resize-handle-bottom:active::after": {
+        opacity: e?.disabled ? 0 : 1
+      }
     };
   },
+  /** Build the two-column layout used by the gutter and editor scroller. */
+  body: ({ theme: r, ownerState: e }) => ({
+    boxSizing: "border-box",
+    display: "grid",
+    flex: "1 1 auto",
+    gridTemplateColumns: e?.showLineNumbers ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+    width: "100%",
+    maxWidth: "100%",
+    alignItems: "start",
+    columnGap: 0,
+    minHeight: 0,
+    overflow: "auto",
+    pointerEvents: e?.disabled ? "none" : "auto",
+    userSelect: e?.disabled ? "none" : "auto",
+    gap: r.vars.size.baseSpacings.sp2
+  }),
   /** Style the optional line-number gutter. */
-  lineNumbers: ({ theme: e, ownerState: r }) => {
-    const o = l(
-      r?.colorMode
+  lineNumbers: ({ theme: r, ownerState: e }) => {
+    const o = d(
+      e?.colorMode
     );
     return {
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-end",
-      padding: `${i}px ${e.vars.size.baseSpacings.sp1} ${r?.isLineCapped ? 0 : i}px ${e.vars.size.baseSpacings.sp2}`,
+      padding: `${a}px ${r.vars.size.baseSpacings.sp1} ${e?.isLineCapped ? 0 : a}px ${r.vars.size.baseSpacings.sp2}`,
       backgroundColor: "transparent",
-      color: r?.disabled ? o.surface.placeholderForeground : o.surface.lineNumberForeground,
+      color: e?.disabled ? o.surface.placeholderForeground : o.surface.lineNumberForeground,
       userSelect: "none",
-      ...d(e.generalSettings.isMobile, r?.size || "medium", "bodyStandard"),
-      fontFamily: s,
-      lineHeight: `${n[r?.size || "medium"]}px`
+      ...s(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
+      fontFamily: l,
+      lineHeight: `${n[e?.size || "medium"]}px`
     };
   },
   /** Keep each rendered line number aligned with the code line height. */
-  lineNumber: ({ theme: e, ownerState: r }) => {
-    const o = l(
+  lineNumber: ({ ownerState: r }) => {
+    const e = d(
       r?.colorMode
     );
     return {
@@ -205,66 +264,66 @@ const b = {
       lineHeight: `${r?.lineHeight || n.medium}px`,
       textAlign: "right",
       '&[data-code-editor-error-line="true"]': {
-        color: o.surface.errorBorderColor,
-        borderLeft: `1px solid ${o.surface.errorBorderColor}`
+        color: e.surface.errorBorderColor,
+        borderLeft: `1px solid ${e.surface.errorBorderColor}`
       }
     };
   },
   /** Provide horizontal overflow for long code lines without wrapping them. */
-  editorScroller: ({ theme: e }) => ({
+  editorScroller: ({ theme: r }) => ({
     position: "relative",
     width: "fit-content",
     minWidth: "100%",
-    paddingTop: e.vars.size.baseSpacings.sp3,
-    paddingBottom: e.vars.size.baseSpacings.sp3,
-    paddingRight: e.vars.size.baseSpacings.sp2,
-    paddingLeft: e.vars.size.baseSpacings.sp2,
+    paddingTop: r.vars.size.baseSpacings.sp3,
+    paddingBottom: r.vars.size.baseSpacings.sp3,
+    paddingRight: r.vars.size.baseSpacings.sp2,
+    paddingLeft: r.vars.size.baseSpacings.sp2,
     backgroundColor: "transparent"
   }),
   /** Style the underlying react-simple-code-editor surface and its inner elements. */
-  editor: ({ theme: e, ownerState: r }) => {
-    const o = l(
-      r?.colorMode
-    ), a = r?.isLineCapped ? 0 : i, t = i + a;
+  editor: ({ theme: r, ownerState: e }) => {
+    const o = d(
+      e?.colorMode
+    ), i = e?.isLineCapped ? 0 : a, c = a + i;
     return {
       position: "relative",
       zIndex: 0,
       width: "max-content",
       minWidth: "100%",
-      minHeight: `calc(${r?.minLines || 1} * ${r?.lineHeight || n.medium}px + ${t}px)`,
+      minHeight: `calc(${e?.minLines || 1} * ${e?.lineHeight || n.medium}px + ${c}px)`,
       backgroundColor: "transparent",
-      fontFamily: s,
+      fontFamily: l,
       fontSize: "11px",
-      lineHeight: `${r?.lineHeight || n.medium}px`,
+      lineHeight: `${e?.lineHeight || n.medium}px`,
       fontWeight: 400,
       "& textarea, & pre": {
-        ...d(e.generalSettings.isMobile, r?.size || "medium", "bodyStandard"),
-        fontFamily: s,
-        lineHeight: `${r?.lineHeight || n.medium}px`,
+        ...s(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
+        fontFamily: l,
+        lineHeight: `${e?.lineHeight || n.medium}px`,
         whiteSpace: "pre !important",
         wordBreak: "normal",
         overflowWrap: "normal",
         margin: 0,
-        paddingTop: `${i}px`,
-        paddingRight: `${i}px`,
-        paddingBottom: `${a}px`,
-        paddingLeft: `${i}px`,
+        paddingTop: `${a}px`,
+        paddingRight: `${a}px`,
+        paddingBottom: `${i}px`,
+        paddingLeft: `${a}px`,
         tabSize: 2,
         fontVariantLigatures: "none",
         backgroundColor: "transparent"
       },
       "&&& textarea": {
-        ...d(e.generalSettings.isMobile, r?.size || "medium", "microSlim"),
+        ...s(r.generalSettings.isMobile, e?.size || "medium", "microSlim"),
         outline: "none",
         backgroundColor: "transparent",
-        caretColor: r?.disabled ? "transparent" : o.surface.caretForeground,
-        cursor: r?.disabled ? "not-allowed" : r?.readOnly ? "default" : "text",
+        caretColor: e?.disabled ? "transparent" : o.surface.caretForeground,
+        cursor: e?.disabled ? "not-allowed" : e?.readOnly ? "default" : "text",
         "&::selection": {
           backgroundColor: o.surface.selectionBackground
         }
       },
       "& pre": {
-        color: r?.disabled ? o.surface.placeholderForeground : o.surface.editorForeground
+        color: e?.disabled ? o.surface.placeholderForeground : o.surface.editorForeground
       },
       "& .token-line": {
         display: "block",
@@ -280,32 +339,32 @@ const b = {
     };
   },
   /** Position the empty-state placeholder above the editor surface. */
-  placeholder: ({ theme: e, ownerState: r }) => {
-    const o = l(
-      r?.colorMode
+  placeholder: ({ theme: r, ownerState: e }) => {
+    const o = d(
+      e?.colorMode
     );
     return {
       position: "absolute",
       zIndex: 1,
-      top: `${i}px`,
-      left: `${i}px`,
+      top: `${a}px`,
+      left: `${a}px`,
       pointerEvents: "none",
       color: o.surface.placeholderForeground,
-      ...d(e.generalSettings.isMobile, r?.size || "medium", "bodyStandard"),
-      fontFamily: s,
-      lineHeight: `${r?.lineHeight || n.medium}px`,
+      ...s(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
+      fontFamily: l,
+      lineHeight: `${e?.lineHeight || n.medium}px`,
       whiteSpace: "pre-wrap"
     };
   },
   /** Size the skeleton block to the same footprint as the live editor. */
-  skeleton: ({ theme: e }) => ({
+  skeleton: ({ theme: r }) => ({
     "&&&": {
-      borderRadius: e.vars.size.borderRadius.r1,
+      borderRadius: r.vars.size.borderRadius.r1,
       width: "100%",
       height: "100px"
     }
   })
 };
 export {
-  b as codeEditorStyles
+  f as codeEditorStyles
 };

package/components/extended/ReactSimpleCodeEditor/constants.d.ts

@@ -55,6 +55,7 @@ export declare const CODE_EDITOR_DEFAULT_LANGUAGE = "text";
 export declare const CODE_EDITOR_DEFAULT_MIN_LINES = 4;
 export declare const CODE_EDITOR_DEFAULT_MAX_LINES = 10;
 export declare const CODE_EDITOR_PADDING_PX = 12;
+export declare const CODE_EDITOR_RESIZE_HANDLE_SIZE_PX = 10;
 export declare const CODE_EDITOR_LINE_HEIGHT_BY_SIZE: {
     readonly small: 18;
     readonly medium: 20;
@@ -77,6 +78,6 @@ export declare const CODE_EDITOR_FALLBACK_LANGUAGE_ICON: import('@mui/material/O
 };
 /** Resolve the exact VS Code Modern palette for the current light or dark theme mode. */
 export declare function getCodeEditorVSCodeModernPalette(mode?: CodeEditorVSCodeModernMode): CodeEditorVSCodeModernPalette;
-export declare const CODE_EDITOR_CLASSES: Record<"root" | "skeleton" | "body" | "header" | "pre" | "textarea" | "placeholder" | "headerBadges" | "languageChip" | "languageChipIcon" | "readOnlyChip" | "lineNumbers" | "lineNumber" | "editorScroller" | "editor", string>;
+export declare const CODE_EDITOR_CLASSES: Record<"root" | "skeleton" | "body" | "header" | "pre" | "textarea" | "placeholder" | "headerBadges" | "languageChip" | "languageChipIcon" | "readOnlyChip" | "bodyResizeShell" | "lineNumbers" | "lineNumber" | "editorScroller" | "editor", string>;
 export {};
 //# sourceMappingURL=constants.d.ts.map

package/components/extended/ReactSimpleCodeEditor/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/constants.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/constants.ts"],"names":[],"mappings":"AAMA,KAAK,0BAA0B,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD,KAAK,oCAAoC,GAAG;IAC1C,2BAA2B,EAAE,MAAM,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,2BAA2B,EAAE,MAAM,CAAC;IACpC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,0BAA0B,EAAE,MAAM,CAAC;IACnC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,OAAO,EAAE,oCAAoC,CAAC;IAC9C,MAAM,EAAE,mCAAmC,CAAC;CAC7C,CAAC;AA0GF,eAAO,MAAM,yBAAyB,kBAAkB,CAAC;AACzD,eAAO,MAAM,4BAA4B,SAAS,CAAC;AACnD,eAAO,MAAM,6BAA6B,IAAI,CAAC;AAC/C,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAChD,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,+BAA+B;;;CAGlC,CAAC;AAEX,eAAO,MAAM,4BAA4B,0FAAkF,CAAC;AAC5H,eAAO,MAAM,2BAA2B,cAAc,CAAC;AACvD,eAAO,MAAM,uBAAuB,gBAAgB,CAAC;AACrD,eAAO,MAAM,4BAA4B,aAAa,CAAC;AACvD,eAAO,MAAM,sCAAsC,gBAAgB,CAAC;AACpE,eAAO,MAAM,0CAA0C,+BAA+B,CAAC;AACvF,eAAO,MAAM,8BAA8B;;;;;CAKjC,CAAC;AACX,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/D,CAAC;AAEF,eAAO,MAAM,kCAAkC;;CAAyB,CAAC;AAEzE,yFAAyF;AACzF,wBAAgB,gCAAgC,CAC9C,IAAI,GAAE,0BAAoC,GACzC,6BAA6B,CAE/B;AAED,eAAO,MAAM,mBAAmB,uPAG/B,CAAC"}

package/components/extended/ReactSimpleCodeEditor/constants.js

@@ -100,15 +100,15 @@ const t = {
       variable: "#001080"
     }
   }
-}, C = "M4LCodeEditor", c = "text", i = 4, g = 10, u = 12, D = {
+}, C = "M4LCodeEditor", c = "text", i = 4, g = 10, u = 12, D = 10, _ = {
   small: 18,
   medium: 20
-}, _ = '"Geist Mono", "JetBrains Mono", "Cascadia Code", "Liberation Mono", monospace', B = "Read Only", r = "at-commands", s = "at-basic", l = "AT Commands", A = "CodeEditorLanguageChipIcon", O = {
+}, B = '"Geist Mono", "JetBrains Mono", "Cascadia Code", "Liberation Mono", monospace', s = "Read Only", r = "at-commands", l = "at-basic", A = "AT Commands", O = "CodeEditorLanguageChipIcon", T = {
   commandPrefixes: ["AT+", "+"],
   concatenationSeparators: [";"],
   argumentSeparators: [","],
   reservedWords: ["SET", "INFO", "SAVE", "CLEAR"]
-}, T = {
+}, I = {
   js: "javascript",
   jsx: "jsx",
   ts: "typescript",
@@ -119,30 +119,31 @@ const t = {
   yml: "yaml",
   at: r,
   "telemetry-at": r
-}, I = e;
-function p(o = "light") {
+}, p = e;
+function m(o = "light") {
   return t[o];
 }
-const m = n(
+const L = n(
   C,
   a
 );
 export {
   r as CODE_EDITOR_AT_LANGUAGE,
-  l as CODE_EDITOR_AT_TEMPLATE_LANGUAGE_LABEL,
-  s as CODE_EDITOR_AT_TEMPLATE_NAME,
-  O as CODE_EDITOR_AT_TEMPLATE_TOKENS,
-  m as CODE_EDITOR_CLASSES,
+  A as CODE_EDITOR_AT_TEMPLATE_LANGUAGE_LABEL,
+  l as CODE_EDITOR_AT_TEMPLATE_NAME,
+  T as CODE_EDITOR_AT_TEMPLATE_TOKENS,
+  L as CODE_EDITOR_CLASSES,
   c as CODE_EDITOR_DEFAULT_LANGUAGE,
   g as CODE_EDITOR_DEFAULT_MAX_LINES,
   i as CODE_EDITOR_DEFAULT_MIN_LINES,
-  I as CODE_EDITOR_FALLBACK_LANGUAGE_ICON,
+  p as CODE_EDITOR_FALLBACK_LANGUAGE_ICON,
   C as CODE_EDITOR_KEY_COMPONENT,
-  T as CODE_EDITOR_LANGUAGE_ALIASES,
-  A as CODE_EDITOR_LANGUAGE_CHIP_ICON_INSTANCE_ID,
-  D as CODE_EDITOR_LINE_HEIGHT_BY_SIZE,
-  _ as CODE_EDITOR_MONO_FONT_FAMILY,
+  I as CODE_EDITOR_LANGUAGE_ALIASES,
+  O as CODE_EDITOR_LANGUAGE_CHIP_ICON_INSTANCE_ID,
+  _ as CODE_EDITOR_LINE_HEIGHT_BY_SIZE,
+  B as CODE_EDITOR_MONO_FONT_FAMILY,
   u as CODE_EDITOR_PADDING_PX,
-  B as CODE_EDITOR_READ_ONLY_LABEL,
-  p as getCodeEditorVSCodeModernPalette
+  s as CODE_EDITOR_READ_ONLY_LABEL,
+  D as CODE_EDITOR_RESIZE_HANDLE_SIZE_PX,
+  m as getCodeEditorVSCodeModernPalette
 };

package/components/extended/ReactSimpleCodeEditor/slots/CodeEditorEnum.d.ts

@@ -5,6 +5,7 @@ export declare enum CodeEditorSlots {
     languageChip = "languageChip",
     languageChipIcon = "languageChipIcon",
     readOnlyChip = "readOnlyChip",
+    bodyResizeShell = "bodyResizeShell",
     body = "body",
     lineNumbers = "lineNumbers",
     lineNumber = "lineNumber",

package/components/extended/ReactSimpleCodeEditor/slots/CodeEditorEnum.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditorEnum.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/slots/CodeEditorEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,YAAY,iBAAiB;IAC7B,YAAY,iBAAiB;IAC7B,gBAAgB,qBAAqB;IACrC,YAAY,iBAAiB;IAC7B,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,cAAc,mBAAmB;IACjC,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,GAAG,QAAQ;IACX,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB"}
+{"version":3,"file":"CodeEditorEnum.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/slots/CodeEditorEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,YAAY,iBAAiB;IAC7B,YAAY,iBAAiB;IAC7B,gBAAgB,qBAAqB;IACrC,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;IACnC,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,cAAc,mBAAmB;IACjC,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,GAAG,QAAQ;IACX,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB"}

package/components/extended/ReactSimpleCodeEditor/slots/CodeEditorEnum.js

@@ -1,4 +1,4 @@
-var a = /* @__PURE__ */ ((e) => (e.root = "root", e.header = "header", e.headerBadges = "headerBadges", e.languageChip = "languageChip", e.languageChipIcon = "languageChipIcon", e.readOnlyChip = "readOnlyChip", e.body = "body", e.lineNumbers = "lineNumbers", e.lineNumber = "lineNumber", e.editorScroller = "editorScroller", e.editor = "editor", e.textarea = "textarea", e.pre = "pre", e.placeholder = "placeholder", e.skeleton = "skeleton", e))(a || {});
+var a = /* @__PURE__ */ ((e) => (e.root = "root", e.header = "header", e.headerBadges = "headerBadges", e.languageChip = "languageChip", e.languageChipIcon = "languageChipIcon", e.readOnlyChip = "readOnlyChip", e.bodyResizeShell = "bodyResizeShell", e.body = "body", e.lineNumbers = "lineNumbers", e.lineNumber = "lineNumber", e.editorScroller = "editorScroller", e.editor = "editor", e.textarea = "textarea", e.pre = "pre", e.placeholder = "placeholder", e.skeleton = "skeleton", e))(a || {});
 export {
   a as CodeEditorSlots
 };

package/components/extended/ReactSimpleCodeEditor/slots/CodeEditorSlots.d.ts

@@ -1,3 +1,4 @@
+import { Rnd } from 'react-rnd';
 export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').CodeEditorOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
@@ -16,6 +17,9 @@ export declare const LanguageChipIconStyled: import('@emotion/styled').StyledCom
 export declare const ReadOnlyChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../..').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').CodeEditorOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
+export declare const BodyResizeShellStyled: import('@emotion/styled').StyledComponent<import('react-rnd').Props & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
+    ref?: import('react').Ref<Rnd> | undefined;
+}>;
 export declare const BodyStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').CodeEditorOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/extended/ReactSimpleCodeEditor/slots/CodeEditorSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditorSlots.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/slots/CodeEditorSlots.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU;;6NAGG,CAAC;AAE3B,eAAO,MAAM,YAAY;;6NAGG,CAAC;AAE7B,eAAO,MAAM,kBAAkB;;6NAGG,CAAC;AAEnC,eAAO,MAAM,kBAAkB;;UAGG,CAAC;AAEnC,eAAO,MAAM,sBAAsB;;iOAGG,CAAC;AAEvC,eAAO,MAAM,kBAAkB;;UAGG,CAAC;AAEnC,eAAO,MAAM,UAAU;;6NAGG,CAAC;AAE3B,eAAO,MAAM,iBAAiB;;6NAGG,CAAC;AAElC,eAAO,MAAM,gBAAgB;;iOAGG,CAAC;AAEjC,eAAO,MAAM,oBAAoB;;6NAGG,CAAC;AAErC,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAIG,CAAC;AAE7B,eAAO,MAAM,iBAAiB;;iOAGG,CAAC;AAElC,eAAO,MAAM,cAAc;;UAGG,CAAC"}
+{"version":3,"file":"CodeEditorSlots.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/slots/CodeEditorSlots.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAWhC,eAAO,MAAM,UAAU;;6NAGG,CAAC;AAE3B,eAAO,MAAM,YAAY;;6NAGG,CAAC;AAE7B,eAAO,MAAM,kBAAkB;;6NAGG,CAAC;AAEnC,eAAO,MAAM,kBAAkB;;UAGG,CAAC;AAEnC,eAAO,MAAM,sBAAsB;;iOAGG,CAAC;AAEvC,eAAO,MAAM,kBAAkB;;UAGG,CAAC;AAEnC,eAAO,MAAM,qBAAqB;;EAIG,CAAC;AAEtC,eAAO,MAAM,UAAU;;6NAGG,CAAC;AAE3B,eAAO,MAAM,iBAAiB;;6NAGG,CAAC;AAElC,eAAO,MAAM,gBAAgB;;iOAGG,CAAC;AAEjC,eAAO,MAAM,oBAAoB;;6NAGG,CAAC;AAErC,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAIG,CAAC;AAE7B,eAAO,MAAM,iBAAiB;;iOAGG,CAAC;AAElC,eAAO,MAAM,cAAc;;UAGG,CAAC"}