@m4l/components 9.17.0 → 9.17.1-beta-feature-731-m4l-components-code-editor.0

package/@types/types.d.ts

@@ -373,6 +373,10 @@ import {
   ReactJsonViewerOwnerState,
   ReactJsonViewerSlotsType,
 } from '../components/extended/React-Json-Viewer/types';
+import {
+  CodeEditorOwnerState,
+  CodeEditorSlotsType,
+} from '../components/extended/ReactSimpleCodeEditor/types';
 import {
   ResizableOwnerState as ReactResizableOwnerState,
   ResizableSlotsType,
@@ -499,6 +503,7 @@ declare module '@mui/material/styles' {
     M4LFixedSizeList: FixedSizeListSlotsType;
     M4LVariableSizeList: VariableSizeListSlotsType;
     M4LReactJsonViewer: ReactJsonViewerSlotsType;
+    M4LCodeEditor: CodeEditorSlotsType;
     M4LResizable: ResizableSlotsType;
     M4LResizableBox: ResizableBoxSlotsType;
     M4LImageSelector: ImageSelectorSlotsType;
@@ -614,6 +619,7 @@ declare module '@mui/material/styles' {
     M4LFixedSizeList: Partial<FixedSizeListOwnerState>;
     M4LVariableSizeList: Partial<VariableSizeListOwnerState>;
     M4LReactJsonViewer: Partial<ReactJsonViewerOwnerState>;
+    M4LCodeEditor: Partial<CodeEditorOwnerState>;
     M4LResizable: Partial<ReactResizableOwnerState>;
     M4LResizableBox: Partial<ResizableBoxOwnerState>;
     M4LImageSelector: Partial<ImageSelectorOwnerState>;
@@ -1168,6 +1174,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":"AAyCA,OAAO,KAAK,EAEV,eAAe,EAEhB,MAAM,SAAS,CAAC;AAgBjB;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDA8VhD"}

package/components/extended/ReactSimpleCodeEditor/CodeEditor.js

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

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

@@ -0,0 +1,297 @@
+import { getTypographyStyles as d } from "../../../utils/getTypographyStyles.js";
+import { getCodeEditorVSCodeModernPalette as s, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as n, CODE_EDITOR_MONO_FONT_FAMILY as l, CODE_EDITOR_PADDING_PX as i } 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: r, ownerState: e }) => {
+    const o = !e?.disabled && !e?.readOnly, a = e?.disabled ? r.vars.palette.border.disabled : r.vars.palette.border.secondary;
+    return {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 0,
+      gap: 0,
+      border: r.vars.size.borderStroke.container,
+      borderColor: e?.variant === "outlined" || e?.error ? a : "transparent",
+      borderRadius: r.vars.size.borderRadius["r1-5"],
+      ...e?.error && {
+        borderColor: r.vars.palette.error.focus
+      },
+      ...e?.variant === "contained" && {
+        backgroundColor: r.vars.palette.default.enabledOpacity
+      },
+      ...e?.variant === "outlined" && {
+        backgroundColor: r.vars.palette.background.default
+      },
+      ...e?.readOnly && {
+        backgroundColor: `${r.vars.palette.default.enabledOpacity}!important`
+      },
+      overflow: "hidden",
+      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: r.vars.palette.default.hoverOpacity,
+          ...e?.error && {
+            borderColor: r.vars.palette.error.active
+          }
+        },
+        "&:focus-within": {
+          borderColor: r.vars.palette.primary.enabled,
+          outline: "3px solid",
+          outlineColor: e?.error ? r.vars.palette.error.focusOpacity : r.vars.palette.primary.hoverOpacity,
+          ...e?.error && {
+            borderColor: r.vars.palette.error.enabled
+          },
+          ...e?.variant === "contained" && {
+            backgroundColor: r.vars.palette.background.default,
+            "&&& .M4LCodeEditor-header": {
+              backgroundColor: r.vars.palette.default.enabledOpacity
+            }
+          }
+        }
+      }
+    };
+  },
+  /** Layout the language badge row above the editing surface. */
+  header: ({ theme: r, ownerState: e }) => {
+    const o = s(r);
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      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"
+      },
+      ...e?.variant === "outlined" && {
+        backgroundColor: r.vars.palette.background.default
+      },
+      ...e?.readOnly && {
+        backgroundColor: `${r.vars.palette.background.default}!important`
+      },
+      color: o.surface.headerForeground,
+      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: r }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    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: r, ownerState: e }) => {
+    const o = s(r);
+    return {
+      flexShrink: 0,
+      minWidth: 0,
+      whiteSpace: "nowrap",
+      textTransform: "lowercase",
+      paddingTop: 0,
+      paddingBottom: 0,
+      backgroundColor: "transparent",
+      borderColor: r.vars.palette.chips.default.outlined.backgroundActive,
+      color: o.surface.languageChipForeground,
+      ...p(
+        r,
+        e?.size || "medium",
+        "base",
+        (a) => ({ height: a })
+      ),
+      "&&& .M4LTypography-root": {
+        ...d(r.generalSettings.isMobile, e?.size || "medium", "microSlim"),
+        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: r, ownerState: e }) => ({
+    "&&&": {
+      flexShrink: 0,
+      minWidth: 0,
+      whiteSpace: "nowrap",
+      ...p(
+        r,
+        e?.size || "medium",
+        "base",
+        (o) => ({ height: o })
+      ),
+      "&&& .M4LTypography-root": {
+        ...d(r.generalSettings.isMobile, e?.size || "medium", "microSlim"),
+        color: r.vars.palette.chips.info.contained.color
+      },
+      backgroundColor: r.vars.palette.chips.info.contained.backgroundColor,
+      borderColor: "transparent"
+    }
+  }),
+  /** Build the two-column layout used by the gutter and editor scroller. */
+  body: ({ theme: r, ownerState: e }) => {
+    const o = e?.visibleLineCount || e?.minLines || 1, a = e?.lineHeight || n.medium, t = e?.isLineCapped ? i : i * 2;
+    return {
+      display: "grid",
+      gridTemplateColumns: e?.showLineNumbers ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+      width: "100%",
+      alignItems: "start",
+      columnGap: 0,
+      maxHeight: `${o * a + t}px`,
+      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: r, ownerState: e }) => {
+    const o = s(r);
+    return {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      padding: `${i}px ${r.vars.size.baseSpacings.sp1} ${e?.isLineCapped ? 0 : i}px ${r.vars.size.baseSpacings.sp2}`,
+      backgroundColor: "transparent",
+      color: e?.disabled ? o.surface.placeholderForeground : o.surface.lineNumberForeground,
+      userSelect: "none",
+      ...d(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: r, ownerState: e }) => {
+    const o = s(r);
+    return {
+      display: "block",
+      minWidth: "2ch",
+      height: `${e?.lineHeight || n.medium}px`,
+      lineHeight: `${e?.lineHeight || n.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: r, ownerState: e }) => ({
+    position: "relative",
+    width: e?.isPlaceholderVisible ? "100%" : "fit-content",
+    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: r, ownerState: e }) => {
+    const o = s(r), a = e?.isLineCapped ? 0 : i, t = i + a;
+    return {
+      position: "relative",
+      zIndex: 0,
+      width: "max-content",
+      minWidth: "100%",
+      minHeight: `calc(${e?.minLines || 1} * ${e?.lineHeight || n.medium}px + ${t}px)`,
+      backgroundColor: "transparent",
+      fontFamily: l,
+      fontSize: "11px",
+      lineHeight: `${e?.lineHeight || n.medium}px`,
+      fontWeight: 400,
+      "& textarea, & pre": {
+        ...d(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`,
+        tabSize: 2,
+        fontVariantLigatures: "none",
+        backgroundColor: "transparent"
+      },
+      "&&& textarea": {
+        ...d(r.generalSettings.isMobile, e?.size || "medium", "microSlim"),
+        outline: "none",
+        backgroundColor: "transparent",
+        caretColor: e?.disabled ? "transparent" : o.surface.caretForeground,
+        cursor: e?.disabled ? "not-allowed" : e?.readOnly ? "default" : "text",
+        "&::selection": {
+          backgroundColor: o.surface.selectionBackground
+        }
+      },
+      "& pre": {
+        color: e?.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: r, ownerState: e }) => {
+    const o = s(r);
+    return {
+      position: "absolute",
+      zIndex: 1,
+      top: `${i}px`,
+      left: `${i}px`,
+      pointerEvents: "none",
+      color: o.surface.placeholderForeground,
+      ...d(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: r }) => ({
+    "&&&": {
+      borderRadius: r.vars.size.borderRadius.r1,
+      width: "100%",
+      height: "100px"
+    }
+  })
+};
+export {
+  b as codeEditorStyles
+};

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

@@ -0,0 +1,82 @@
+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_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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"}