@m4l/components 9.10.1 → 9.10.2-beta-feature-731-m4l-components-code-editor.0

package/@types/types.d.ts

@@ -354,6 +354,10 @@ import {
   ReactJsonViewerOwnerState,
   ReactJsonViewerSlotsType,
 } from '../components/extended/React-Json-Viewer/types';
+import {
+  CodeEditorOwnerState,
+  CodeEditorSlotsType,
+} from '../components/extended/ReactSimpleCodeEditor/types';
 import {
   ResizableOwnerState as ReactResizableOwnerState,
   ResizableSlotsType,
@@ -474,6 +478,7 @@ declare module '@mui/material/styles' {
     M4LFixedSizeList: FixedSizeListSlotsType;
     M4LVariableSizeList: VariableSizeListSlotsType;
     M4LReactJsonViewer: ReactJsonViewerSlotsType;
+    M4LCodeEditor: CodeEditorSlotsType;
     M4LResizable: ResizableSlotsType;
     M4LResizableBox: ResizableBoxSlotsType;
   }
@@ -583,6 +588,7 @@ declare module '@mui/material/styles' {
     M4LFixedSizeList: Partial<FixedSizeListOwnerState>;
     M4LVariableSizeList: Partial<VariableSizeListOwnerState>;
     M4LReactJsonViewer: Partial<ReactJsonViewerOwnerState>;
+    M4LCodeEditor: Partial<CodeEditorOwnerState>;
     M4LResizable: Partial<ReactResizableOwnerState>;
     M4LResizableBox: Partial<ResizableBoxOwnerState>;
   }
@@ -1111,6 +1117,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LReactJsonViewer'];
       variants?: ComponentsVariants['M4LReactJsonViewer'];
     };
+    M4LCodeEditor?: {
+      defaultProps?: ComponentsPropsList['M4LCodeEditor'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCodeEditor'];
+      variants?: ComponentsVariants['M4LCodeEditor'];
+    };
     M4LResizable?: {
       defaultProps?: ComponentsPropsList['M4LResizable'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LResizable'];

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

@@ -0,0 +1,6 @@
+import { CodeEditorProps } from './types';
+/**
+ * Render a syntax-highlighted code editor with optional self-managed fallback state.
+ */
+export declare function CodeEditor(props: CodeEditorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CodeEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAwB,eAAe,EAAE,MAAM,SAAS,CAAC;AAErE;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAwShD"}

package/components/extended/ReactSimpleCodeEditor/CodeEditor.js

@@ -0,0 +1,229 @@
+import { jsx as t, jsxs as h } from "@emotion/react/jsx-runtime";
+import { useModuleDictionary as fe, useModuleSkeleton as ye } from "@m4l/core";
+import E from "clsx";
+import { useId as Oe, useState as xe, useEffect as ve, useMemo as m, useCallback as G } from "react";
+import { useTheme as De } from "@mui/material/styles";
+import { getPropDataTestId as v, getNameDataTestId as Ne } from "../../../test/getNameDataTestId.js";
+import { CODE_EDITOR_DEFAULT_MAX_LINES as be, CODE_EDITOR_DEFAULT_MIN_LINES as Re, CODE_EDITOR_DEFAULT_LANGUAGE as Ae, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as Me, CODE_EDITOR_KEY_COMPONENT as C, CODE_EDITOR_READ_ONLY_LABEL as Ve, CODE_EDITOR_CLASSES as L, CODE_EDITOR_LANGUAGE_CHIP_ICON_INSTANCE_ID as Pe } from "./constants.js";
+import { CODE_EDITOR_DICTIONARY as U } from "./dictionary.js";
+import { resolveCodeEditorLanguageIcon as we } from "./helpers/languageIcon.js";
+import { getCodeEditorLineCount as ze, createCodeEditorPrismTheme as He, resolveCodeEditorLanguageTemplate as ke, validateCodeEditorSyntax as Be, highlightCode as Ge } from "./helpers/highlighting.js";
+import { SkeletonStyled as Ue, RootStyled as Ye, HeaderStyled as Fe, LanguageChipStyled as je, LanguageChipIconStyled as Ke, HeaderBadgesStyled as Xe, ReadOnlyChipStyled as Ze, BodyStyled as $e, LineNumbersStyled as qe, LineNumberStyled as Je, EditorScrollerStyled as Qe, PlaceholderStyled as We, EditorStyled as ea } from "./slots/CodeEditorSlots.js";
+import { CodeEditorSlots as p } from "./slots/CodeEditorEnum.js";
+function ha(Y) {
+  const {
+    className: F,
+    customLanguages: D,
+    dataTestId: S,
+    defaultValue: j,
+    disabled: N = !1,
+    editorClassName: K,
+    error: X = !1,
+    highlightTheme: b,
+    id: Z,
+    insertSpaces: $,
+    languageLabel: q,
+    languageTemplate: l,
+    languageText: J,
+    maxLines: Q = be,
+    minLines: T = Re,
+    onBlur: W,
+    onChange: _,
+    placeholder: ee,
+    placeholderText: ae,
+    preClassName: te,
+    readOnly: u = !1,
+    readOnlyLabel: oe,
+    showLineNumbers: R = !1,
+    showPlaceholder: A = !0,
+    size: M = "medium",
+    syntaxValidator: I,
+    skeleton: le = !1,
+    textareaClassName: re,
+    validateSyntax: V = !0,
+    value: i,
+    variant: ne = "outlined",
+    ...g
+  } = Y, ie = Oe(), se = Z || ie, P = De(), { getLabel: de } = fe(), ce = ye() || le, s = _ === void 0, [me, w] = xe(
+    i ?? j ?? ""
+  );
+  ve(() => {
+    s && i !== void 0 && w(i);
+  }, [s, i]);
+  const r = s ? me : i ?? "", f = ae ?? ee, ue = A && r.length === 0 && !!f, ge = Me[M], z = ze(r), H = Math.max(z, T), y = Math.max(T, Q), he = Math.min(H, y), Ee = z >= y, k = m(
+    () => b ?? He(P),
+    [b, P]
+  ), d = m(
+    () => ke(l),
+    [l]
+  ), o = J ?? d?.languageText ?? Ae, Ce = q ?? d?.languageLabel ?? o.toLowerCase(), Le = m(
+    () => we(o),
+    [o]
+  ), O = u ? de(U.readOnly) : void 0, pe = oe ?? (O && O !== U.readOnly ? O : Ve), c = m(() => {
+    if (I)
+      return I({
+        code: r,
+        languageTemplate: d ?? l,
+        languageText: o
+      });
+    if (V)
+      return Be({
+        code: r,
+        languageTemplate: d ?? l,
+        languageText: o
+      });
+  }, [
+    l,
+    d,
+    o,
+    r,
+    I,
+    V
+  ]), B = X || !!c && !c.isValid, n = c && !c.isValid ? c.errorRange : void 0, Se = m(() => {
+    if (!n)
+      return /* @__PURE__ */ new Set();
+    const e = n.start.line, x = n.end?.line ?? e;
+    return new Set(
+      Array.from(
+        { length: Math.max(x - e + 1, 1) },
+        (aa, Ie) => e + Ie
+      )
+    );
+  }, [n]), a = {
+    disabled: N,
+    error: B,
+    isLineCapped: Ee,
+    isEmpty: r.length === 0,
+    isPlaceholderVisible: ue,
+    lineHeight: ge,
+    maxLines: y,
+    minLines: T,
+    readOnly: u,
+    showLineNumbers: R,
+    size: M,
+    variant: ne,
+    visibleLineCount: he
+  }, Te = G(
+    (e) => Ge({
+      code: e,
+      customLanguages: D,
+      languageTemplate: l,
+      languageText: o,
+      prismTheme: k,
+      syntaxErrorRange: n
+    }),
+    [
+      D,
+      l,
+      k,
+      o,
+      n
+    ]
+  ), _e = G(
+    (e) => {
+      s && w(e), _?.(e);
+    },
+    [_, s]
+  );
+  return ce ? /* @__PURE__ */ t(Ue, { ownerState: a }) : /* @__PURE__ */ h(
+    Ye,
+    {
+      ownerState: a,
+      "aria-disabled": a.disabled || void 0,
+      className: E(L.root, F),
+      ...v(C, p.root, S),
+      children: [
+        /* @__PURE__ */ h(Fe, { ownerState: a, children: [
+          /* @__PURE__ */ t(
+            je,
+            {
+              label: Ce,
+              size: "small",
+              variant: "outlined",
+              color: "default",
+              startIcon: /* @__PURE__ */ t(
+                Ke,
+                {
+                  ...v(
+                    C,
+                    p.languageChipIcon,
+                    Pe
+                  ),
+                  children: /* @__PURE__ */ t(Le, { fontSize: "small" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ t(Xe, { ownerState: a, children: u ? /* @__PURE__ */ t(
+            Ze,
+            {
+              label: pe,
+              size: "small",
+              variant: "contained",
+              color: "info"
+            }
+          ) : null })
+        ] }),
+        /* @__PURE__ */ h($e, { ownerState: a, children: [
+          R ? /* @__PURE__ */ t(qe, { ownerState: a, "aria-hidden": "true", children: Array.from({ length: H }, (e, x) => x + 1).map(
+            (e) => /* @__PURE__ */ t(
+              Je,
+              {
+                ownerState: a,
+                "data-code-editor-error-line": Se.has(e) || void 0,
+                children: e
+              },
+              `code-editor-line-${e}`
+            )
+          ) }) : null,
+          /* @__PURE__ */ h(Qe, { ownerState: a, children: [
+            A && a.isEmpty && f ? /* @__PURE__ */ t(
+              We,
+              {
+                ownerState: a,
+                ...v(
+                  C,
+                  p.placeholder,
+                  S
+                ),
+                children: f
+              }
+            ) : null,
+            /* @__PURE__ */ t(
+              ea,
+              {
+                ...g,
+                ownerState: a,
+                "aria-label": g["aria-label"] ?? "Code editor",
+                "aria-invalid": g["aria-invalid"] ?? (B || void 0),
+                className: E(L.editor, K),
+                "data-testid": Ne(
+                  C,
+                  p.textarea,
+                  S
+                ),
+                disabled: N,
+                highlight: Te,
+                insertSpaces: $,
+                onBlur: W,
+                onValueChange: _e,
+                preClassName: E(L.pre, te),
+                readOnly: u,
+                tabSize: g.tabSize,
+                textareaClassName: E(
+                  L.textarea,
+                  re
+                ),
+                textareaId: se,
+                value: r
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ha as CodeEditor
+};

package/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.d.ts

@@ -0,0 +1,3 @@
+import { CodeEditorStyles } from './types';
+export declare const codeEditorStyles: CodeEditorStyles;
+//# sourceMappingURL=CodeEditor.styles.d.ts.map

package/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD,eAAO,MAAM,gBAAgB,EAAE,gBA2S9B,CAAC"}

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

@@ -0,0 +1,265 @@
+import { getTypographyStyles as s } from "../../../utils/getTypographyStyles.js";
+import { getCodeEditorVSCodeModernPalette as n, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as d, CODE_EDITOR_MONO_FONT_FAMILY as l, CODE_EDITOR_PADDING_PX as a } from "./constants.js";
+import { getSizeStyles as p } from "../../../utils/getSizeStyles/getSizeStyles.js";
+const b = {
+  /** Resolve the interactive shell colors and focus treatment for the editor root. */
+  root: ({ theme: e, ownerState: r }) => {
+    const o = n(e), i = !r?.disabled && !r?.readOnly, t = r?.disabled ? o.surface.borderColor : r?.error && i ? o.surface.errorBorderColor : o.surface.borderColor;
+    return {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 0,
+      gap: 0,
+      border: e.vars.size.borderStroke.container,
+      borderColor: t,
+      borderRadius: e.vars.size.borderRadius.r2,
+      backgroundColor: o.surface.rootBackground,
+      overflow: "hidden",
+      opacity: r?.disabled ? 0.72 : 1,
+      outline: "3px solid",
+      outlineColor: "transparent",
+      transition: "border-color 120ms ease, outline 120ms ease, opacity 120ms ease, background-color 120ms ease",
+      ...i && {
+        "&:hover": {
+          backgroundColor: e.vars.palette.default.hoverOpacity
+        },
+        "&:focus-within": {
+          borderColor: e.vars.palette.primary.enabled,
+          outline: "3px solid",
+          outlineColor: e.vars.palette.primary.hoverOpacity
+        }
+      }
+    };
+  },
+  /** Layout the language badge row above the editing surface. */
+  header: ({ theme: e }) => {
+    const r = n(e);
+    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: r.surface.dividerColor,
+      backgroundColor: e.vars.palette.background.default,
+      color: r.surface.headerForeground,
+      borderTopLeftRadius: e.vars.size.borderRadius.r2,
+      borderTopRightRadius: e.vars.size.borderRadius.r2,
+      overflow: "hidden",
+      minHeight: "33px"
+    };
+  },
+  /** Align any trailing badges rendered in the header row. */
+  headerBadges: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: e.vars.size.baseSpacings.sp1,
+    minWidth: 0
+  }),
+  /** Keep the leading language chip aligned with the editor header layout. */
+  languageChip: ({ theme: e, ownerState: r }) => {
+    const o = n(e);
+    return {
+      flexShrink: 0,
+      minWidth: 0,
+      whiteSpace: "nowrap",
+      textTransform: "lowercase",
+      paddingTop: 0,
+      paddingBottom: 0,
+      backgroundColor: o.surface.languageChipBackground,
+      borderColor: o.surface.languageChipBorder,
+      color: o.surface.languageChipForeground,
+      ...p(
+        e,
+        r?.size || "medium",
+        "base",
+        (i) => ({ height: i })
+      ),
+      "&&& .M4LTypography-root": {
+        ...s(e.generalSettings.isMobile, r?.size || "medium", "microStandard"),
+        color: o.surface.languageChipForeground,
+        textTransform: "uppercase"
+      }
+    };
+  },
+  /** Keep the language icon aligned while preserving any intrinsic Seti fill colors. */
+  languageChipIcon: () => ({
+    display: "inline-flex",
+    flexShrink: 0,
+    width: "16px",
+    height: "16px",
+    lineHeight: 0,
+    "& .MuiSvgIcon-root": {
+      display: "block",
+      width: "16px",
+      height: "16px",
+      fontSize: "16px"
+    }
+  }),
+  /** Keep the read-only chip aligned with the trailing header actions. */
+  readOnlyChip: ({ theme: e, ownerState: r }) => {
+    const o = n(e);
+    return {
+      flexShrink: 0,
+      minWidth: 0,
+      whiteSpace: "nowrap",
+      backgroundColor: o.surface.readOnlyChipBackground,
+      borderColor: o.surface.readOnlyChipBorder,
+      color: o.surface.readOnlyChipForeground,
+      ...p(
+        e,
+        r?.size || "medium",
+        "base",
+        (i) => ({ height: i })
+      ),
+      "&&& .M4LTypography-root": {
+        ...s(e.generalSettings.isMobile, r?.size || "medium", "microStandard"),
+        color: o.surface.readOnlyChipForeground
+      }
+    };
+  },
+  /** Build the two-column layout used by the gutter and editor scroller. */
+  body: ({ theme: e, ownerState: r }) => {
+    const o = r?.visibleLineCount || r?.minLines || 1, i = r?.lineHeight || d.medium, t = r?.isLineCapped ? a : a * 2;
+    return {
+      display: "grid",
+      gridTemplateColumns: r?.showLineNumbers ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+      width: "100%",
+      alignItems: "start",
+      columnGap: 0,
+      maxHeight: `${o * i + t}px`,
+      minHeight: 0,
+      overflow: "auto",
+      pointerEvents: r?.disabled ? "none" : "auto",
+      userSelect: r?.disabled ? "none" : "auto",
+      gap: e.vars.size.baseSpacings.sp2
+    };
+  },
+  /** Style the optional line-number gutter. */
+  lineNumbers: ({ theme: e, ownerState: r }) => {
+    const o = n(e);
+    return {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      padding: `${a}px ${e.vars.size.baseSpacings.sp1} ${r?.isLineCapped ? 0 : a}px ${e.vars.size.baseSpacings.sp2}`,
+      backgroundColor: "transparent",
+      color: r?.disabled ? o.surface.placeholderForeground : o.surface.lineNumberForeground,
+      userSelect: "none",
+      ...s(e.generalSettings.isMobile, r?.size || "medium", "bodyStandard"),
+      fontFamily: l,
+      lineHeight: `${d[r?.size || "medium"]}px`
+    };
+  },
+  /** Keep each rendered line number aligned with the code line height. */
+  lineNumber: ({ theme: e, ownerState: r }) => {
+    const o = n(e);
+    return {
+      display: "block",
+      minWidth: "2ch",
+      height: `${r?.lineHeight || d.medium}px`,
+      lineHeight: `${r?.lineHeight || d.medium}px`,
+      textAlign: "right",
+      '&[data-code-editor-error-line="true"]': {
+        color: o.surface.errorBorderColor,
+        borderLeft: `1px solid ${o.surface.errorBorderColor}`
+      }
+    };
+  },
+  /** Provide horizontal overflow for long code lines without wrapping them. */
+  editorScroller: ({ theme: e, ownerState: r }) => ({
+    position: "relative",
+    width: r?.isPlaceholderVisible ? "100%" : "fit-content",
+    paddingTop: e.vars.size.baseSpacings.sp3,
+    paddingBottom: e.vars.size.baseSpacings.sp3,
+    paddingRight: e.vars.size.baseSpacings.sp2,
+    paddingLeft: e.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 = n(e), i = r?.isLineCapped ? 0 : a, t = a + i;
+    return {
+      position: "relative",
+      zIndex: 0,
+      width: "max-content",
+      minWidth: "100%",
+      minHeight: `calc(${r?.minLines || 1} * ${r?.lineHeight || d.medium}px + ${t}px)`,
+      backgroundColor: "transparent",
+      fontFamily: l,
+      fontSize: "11px",
+      lineHeight: `${r?.lineHeight || d.medium}px`,
+      fontWeight: 400,
+      "& textarea, & pre": {
+        ...s(e.generalSettings.isMobile, r?.size || "medium", "bodyStandard"),
+        fontFamily: l,
+        lineHeight: `${r?.lineHeight || d.medium}px`,
+        whiteSpace: "pre !important",
+        wordBreak: "normal",
+        overflowWrap: "normal",
+        margin: 0,
+        paddingTop: `${a}px`,
+        paddingRight: `${a}px`,
+        paddingBottom: `${i}px`,
+        paddingLeft: `${a}px`,
+        tabSize: 2,
+        fontVariantLigatures: "none",
+        backgroundColor: "transparent"
+      },
+      "&&& textarea": {
+        ...s(e.generalSettings.isMobile, r?.size || "medium", "microStandard"),
+        outline: "none",
+        backgroundColor: "transparent",
+        caretColor: r?.disabled ? "transparent" : o.surface.caretForeground,
+        cursor: r?.disabled ? "not-allowed" : r?.readOnly ? "default" : "text",
+        "&::selection": {
+          backgroundColor: o.surface.selectionBackground
+        }
+      },
+      "& pre": {
+        color: r?.disabled ? o.surface.placeholderForeground : o.surface.editorForeground
+      },
+      "& .token-line": {
+        display: "block",
+        width: "100%"
+      },
+      '& .token-line[data-code-editor-error-line="true"]': {
+        backgroundColor: o.surface.errorLineBackground
+      },
+      '& [data-code-editor-error-token="true"]': {
+        backgroundColor: o.surface.errorRangeBackground,
+        boxShadow: `inset 0 -1px 0 ${o.surface.errorRangeShadowColor}`
+      }
+    };
+  },
+  /** Position the empty-state placeholder above the editor surface. */
+  placeholder: ({ theme: e, ownerState: r }) => {
+    const o = n(e);
+    return {
+      position: "absolute",
+      zIndex: 1,
+      top: `${a}px`,
+      left: `${a}px`,
+      pointerEvents: "none",
+      color: o.surface.placeholderForeground,
+      ...s(e.generalSettings.isMobile, r?.size || "medium", "bodyStandard"),
+      fontFamily: l,
+      lineHeight: `${r?.lineHeight || d.medium}px`,
+      whiteSpace: "pre-wrap"
+    };
+  },
+  /** Size the skeleton block to the same footprint as the live editor. */
+  skeleton: ({ theme: e }) => ({
+    "&&&": {
+      borderRadius: e.vars.size.borderRadius.r1,
+      width: "100%",
+      height: "100px"
+    }
+  })
+};
+export {
+  b as codeEditorStyles
+};

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

@@ -0,0 +1,84 @@
+import { ElementType } from 'react';
+import { Theme } from '@mui/material';
+type CodeEditorVSCodeModernSurfacePalette = {
+    activeIndentGuideForeground: string;
+    borderColor: string;
+    bracketMatchBorder: string;
+    caretForeground: string;
+    dividerColor: string;
+    editorBackground: string;
+    editorForeground: string;
+    errorBorderColor: string;
+    errorRangeBackground: string;
+    errorRangeShadowColor: string;
+    errorLineBackground: string;
+    focusBorderColor: string;
+    headerBackground: string;
+    headerForeground: string;
+    inactiveSelectionBackground: string;
+    indentGuideForeground: string;
+    languageChipBackground: string;
+    languageChipBorder: string;
+    languageChipForeground: string;
+    lineNumberActiveForeground: string;
+    lineNumberForeground: string;
+    placeholderForeground: string;
+    readOnlyChipBackground: string;
+    readOnlyChipBorder: string;
+    readOnlyChipForeground: string;
+    rootBackground: string;
+    selectionBackground: string;
+    widgetBackground: string;
+};
+type CodeEditorVSCodeModernSyntaxPalette = {
+    attributeName: string;
+    boolean: string;
+    comment: string;
+    constant: string;
+    escape: string;
+    function: string;
+    keyword: string;
+    number: string;
+    operator: string;
+    regex: string;
+    string: string;
+    tag: string;
+    type: string;
+    variable: string;
+};
+export type CodeEditorVSCodeModernPalette = {
+    bracketPalette: readonly string[];
+    surface: CodeEditorVSCodeModernSurfacePalette;
+    syntax: CodeEditorVSCodeModernSyntaxPalette;
+};
+export declare const CODE_EDITOR_KEY_COMPONENT = "M4LCodeEditor";
+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_LINE_HEIGHT_BY_SIZE: {
+    readonly small: 18;
+    readonly medium: 20;
+};
+export declare const CODE_EDITOR_MONO_FONT_FAMILY = "\"Geist Mono\", \"JetBrains Mono\", \"Cascadia Code\", \"Liberation Mono\", monospace";
+export declare const CODE_EDITOR_READ_ONLY_LABEL = "Read Only";
+export declare const CODE_EDITOR_AT_LANGUAGE = "at-commands";
+export declare const CODE_EDITOR_AT_TEMPLATE_NAME = "at-basic";
+export declare const CODE_EDITOR_AT_TEMPLATE_LANGUAGE_LABEL = "AT Commands";
+export declare const CODE_EDITOR_LANGUAGE_CHIP_ICON_INSTANCE_ID = "CodeEditorLanguageChipIcon";
+export declare const CODE_EDITOR_AT_TEMPLATE_TOKENS: {
+    readonly commandPrefixes: readonly ["AT+", "+"];
+    readonly concatenationSeparators: readonly [";"];
+    readonly argumentSeparators: readonly [","];
+    readonly reservedWords: readonly ["SET", "INFO", "SAVE", "CLEAR"];
+};
+export declare const CODE_EDITOR_LANGUAGE_ALIASES: Record<string, string>;
+export declare const CODE_EDITOR_LANGUAGE_ICON_BY_LANGUAGE: Record<string, ElementType>;
+export declare const CODE_EDITOR_FALLBACK_LANGUAGE_ICON: import('@mui/material/OverridableComponent').OverridableComponent<import('@mui/material').SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/** Resolve the exact VS Code Modern palette for the current light or dark theme mode. */
+export declare function getCodeEditorVSCodeModernPalette(theme: Theme): CodeEditorVSCodeModernPalette;
+export declare const CODE_EDITOR_CLASSES: Record<"body" | "skeleton" | "header" | "pre" | "textarea" | "root" | "placeholder" | "headerBadges" | "languageChip" | "languageChipIcon" | "readOnlyChip" | "lineNumbers" | "lineNumber" | "editorScroller" | "editor", string>;
+export {};
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/constants.ts"],"names":[],"mappings":"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"}