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

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

@@ -0,0 +1,371 @@
+import { getTypographyStyles as l } from "../../../utils/getTypographyStyles.js";
+import { getCodeEditorVSCodeModernPalette as d, CODE_EDITOR_LINE_HEIGHT_BY_SIZE as n, CODE_EDITOR_MONO_FONT_FAMILY as s, 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 f = {
+  /** Resolve the interactive shell colors and focus treatment for the editor root. */
+  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: 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
+      },
+      ...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 = d(
+      e?.colorMode
+    );
+    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 = d(
+      e?.colorMode
+    );
+    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",
+        (i) => ({ height: i })
+      ),
+      "&&& .M4LTypography-root": {
+        ...l(r.generalSettings.isMobile, e?.size || "medium", "microSlim"),
+        color: o.surface.languageChipForeground,
+        lineHeight: "normal",
+        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": {
+        ...l(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"
+    }
+  }),
+  /** 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 {
+      boxSizing: "border-box",
+      width: "100%",
+      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: r, ownerState: e }) => {
+    const o = d(
+      e?.colorMode
+    );
+    return {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      padding: `${a}px ${r.vars.size.baseSpacings.sp1} ${e?.isLineCapped ? 0 : a}px ${r.vars.size.baseSpacings.sp2}`,
+      backgroundColor: "transparent",
+      color: e?.disabled ? o.surface.placeholderForeground : o.surface.lineNumberForeground,
+      userSelect: "none",
+      ...l(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
+      fontFamily: s,
+      lineHeight: `${n[e?.size || "medium"]}px`
+    };
+  },
+  /** Keep each rendered line number aligned with the code line height. */
+  lineNumber: ({ theme: r, ownerState: e }) => {
+    const o = d(
+      e?.colorMode
+    );
+    return {
+      display: "block",
+      minWidth: "2ch",
+      height: `${e?.lineHeight || n.medium}px`,
+      lineHeight: `${e?.lineHeight || n.medium}px`,
+      textAlign: "right",
+      color: r.vars.palette.text.disabled,
+      '&[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 }) => ({
+    position: "relative",
+    width: "fit-content",
+    minWidth: "100%",
+    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 = d(
+      e?.colorMode
+    ), i = e?.isLineCapped ? 0 : a, c = a + i;
+    return {
+      position: "relative",
+      zIndex: 0,
+      width: "max-content",
+      minWidth: "100%",
+      minHeight: `calc(${e?.minLines || 1} * ${e?.lineHeight || n.medium}px + ${c}px)`,
+      backgroundColor: "transparent",
+      fontFamily: s,
+      fontSize: "11px",
+      lineHeight: `${e?.lineHeight || n.medium}px`,
+      fontWeight: 400,
+      "& textarea, & pre": {
+        ...l(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
+        fontFamily: s,
+        lineHeight: `${e?.lineHeight || n.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": {
+        ...l(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 = d(
+      e?.colorMode
+    );
+    return {
+      position: "absolute",
+      zIndex: 1,
+      top: `${a}px`,
+      left: `${a}px`,
+      pointerEvents: "none",
+      color: o.surface.placeholderForeground,
+      ...l(r.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
+      fontFamily: s,
+      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 {
+  f as codeEditorStyles
+};

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

@@ -0,0 +1,83 @@
+type CodeEditorVSCodeModernMode = 'dark' | 'light';
+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_RESIZE_HANDLE_SIZE_PX = 10;
+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(mode?: CodeEditorVSCodeModernMode): CodeEditorVSCodeModernPalette;
+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

@@ -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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"}

package/components/extended/ReactSimpleCodeEditor/constants.js

@@ -0,0 +1,149 @@
+import { FileFolderFileOutlined as e } from "@m4l/icons";
+import { getComponentClasses as n } from "../../../utils/getComponentSlotRoot.js";
+import { CodeEditorSlots as a } from "./slots/CodeEditorEnum.js";
+const t = {
+  dark: {
+    bracketPalette: ["#FFD700", "#DA70D6", "#179FFF"],
+    surface: {
+      activeIndentGuideForeground: "#707070",
+      borderColor: "#3C3C3C",
+      bracketMatchBorder: "#888888",
+      caretForeground: "#AEAFAD",
+      dividerColor: "#2B2B2B",
+      editorBackground: "#1F1F1F",
+      editorForeground: "#CCCCCC",
+      errorBorderColor: "#F85149",
+      errorRangeBackground: "#F8514926",
+      errorRangeShadowColor: "#F85149",
+      errorLineBackground: "#F8514914",
+      focusBorderColor: "#0078D4",
+      headerBackground: "#181818",
+      headerForeground: "#CCCCCC",
+      inactiveSelectionBackground: "#3A3D41",
+      indentGuideForeground: "#404040",
+      languageChipBackground: "#313131",
+      languageChipBorder: "#3C3C3C",
+      languageChipForeground: "#CCCCCC",
+      lineNumberActiveForeground: "#CCCCCC",
+      lineNumberForeground: "#6E7681",
+      placeholderForeground: "#989898",
+      readOnlyChipBackground: "#2489DB82",
+      readOnlyChipBorder: "#2488DB",
+      readOnlyChipForeground: "#FFFFFF",
+      rootBackground: "#181818",
+      selectionBackground: "#264F78",
+      widgetBackground: "#202020"
+    },
+    syntax: {
+      attributeName: "#9CDCFE",
+      boolean: "#569CD6",
+      comment: "#6A9955",
+      constant: "#4FC1FF",
+      escape: "#D7BA7D",
+      function: "#DCDCAA",
+      keyword: "#569CD6",
+      number: "#B5CEA8",
+      operator: "#CCCCCC",
+      regex: "#646695",
+      string: "#CE9178",
+      tag: "#569CD6",
+      type: "#4EC9B0",
+      variable: "#9CDCFE"
+    }
+  },
+  light: {
+    bracketPalette: ["#0431FA", "#319331", "#7B3814"],
+    surface: {
+      activeIndentGuideForeground: "#939393",
+      borderColor: "#CECECE",
+      bracketMatchBorder: "#B9B9B9",
+      caretForeground: "#000000",
+      dividerColor: "#E5E5E5",
+      editorBackground: "#FFFFFF",
+      editorForeground: "#3B3B3B",
+      errorBorderColor: "#F85149",
+      errorRangeBackground: "#F8514920",
+      errorRangeShadowColor: "#F85149",
+      errorLineBackground: "#F8514912",
+      focusBorderColor: "#005FB8",
+      headerBackground: "#F8F8F8",
+      headerForeground: "#3B3B3B",
+      inactiveSelectionBackground: "#E5EBF1",
+      indentGuideForeground: "#D3D3D3",
+      languageChipBackground: "#FFFFFF",
+      languageChipBorder: "#CECECE",
+      languageChipForeground: "#3B3B3B",
+      lineNumberActiveForeground: "#171184",
+      lineNumberForeground: "#6E7681",
+      placeholderForeground: "#767676",
+      readOnlyChipBackground: "#BED6ED",
+      readOnlyChipBorder: "#005FB8",
+      readOnlyChipForeground: "#000000",
+      rootBackground: "#F8F8F8",
+      selectionBackground: "#ADD6FF",
+      widgetBackground: "#F8F8F8"
+    },
+    syntax: {
+      attributeName: "#E50000",
+      boolean: "#0000FF",
+      comment: "#008000",
+      constant: "#0070C1",
+      escape: "#EE0000",
+      function: "#795E26",
+      keyword: "#0000FF",
+      number: "#098658",
+      operator: "#3B3B3B",
+      regex: "#811F3F",
+      string: "#A31515",
+      tag: "#800000",
+      type: "#267F99",
+      variable: "#001080"
+    }
+  }
+}, C = "M4LCodeEditor", c = "text", i = 4, g = 10, u = 12, D = 10, _ = {
+  small: 18,
+  medium: 20
+}, 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"]
+}, I = {
+  js: "javascript",
+  jsx: "jsx",
+  ts: "typescript",
+  tsx: "tsx",
+  py: "python",
+  sh: "bash",
+  shell: "bash",
+  yml: "yaml",
+  at: r,
+  "telemetry-at": r
+}, p = e;
+function m(o = "light") {
+  return t[o];
+}
+const L = n(
+  C,
+  a
+);
+export {
+  r as CODE_EDITOR_AT_LANGUAGE,
+  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,
+  p as CODE_EDITOR_FALLBACK_LANGUAGE_ICON,
+  C as CODE_EDITOR_KEY_COMPONENT,
+  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,
+  s as CODE_EDITOR_READ_ONLY_LABEL,
+  D as CODE_EDITOR_RESIZE_HANDLE_SIZE_PX,
+  m as getCodeEditorVSCodeModernPalette
+};

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

@@ -0,0 +1,11 @@
+import { Dictionary } from '@m4l/core';
+export declare const CODE_EDITOR_DICTIONARY_KEY = "code_editor";
+/**
+ * Return the dictionary namespaces required by the CodeEditor component.
+ */
+export declare function getCodeEditorComponentsDictionary(): string[];
+export declare const defaultCodeEditorDictionary: Dictionary;
+export declare const CODE_EDITOR_DICTIONARY: {
+    readonly readOnly: "code_editor.read_only";
+};
+//# sourceMappingURL=dictionary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/extended/ReactSimpleCodeEditor/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,0BAA0B,gBAAgB,CAAC;AAExD;;GAEG;AACH,wBAAgB,iCAAiC,aAEhD;AAED,eAAO,MAAM,2BAA2B,EAAE,UAIzC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;CAEzB,CAAC"}

package/components/extended/ReactSimpleCodeEditor/dictionary.js

@@ -0,0 +1,7 @@
+const O = "code_editor", _ = {
+  readOnly: `${O}.read_only`
+};
+export {
+  _ as CODE_EDITOR_DICTIONARY,
+  O as CODE_EDITOR_DICTIONARY_KEY
+};