@m4l/components 9.24.0-beta-feature-724-add-icons.0 → 9.24.0-beta-feature-731-m4l-components-code-editor.7

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,oDAuXhD"}

package/components/extended/ReactSimpleCodeEditor/CodeEditor.js

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

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

@@ -0,0 +1,311 @@
+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 { 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 = !r?.disabled && !r?.readOnly, a = r?.disabled ? e.vars.palette.border.disabled : e.vars.palette.border.secondary;
+    return {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      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
+      },
+      ...r?.variant === "contained" && {
+        backgroundColor: e.vars.palette.default.enabledOpacity
+      },
+      ...r?.variant === "outlined" && {
+        backgroundColor: e.vars.palette.background.default
+      },
+      ...r?.readOnly && {
+        backgroundColor: `${e.vars.palette.default.enabledOpacity}!important`
+      },
+      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",
+      ...o && {
+        "&:hover": {
+          backgroundColor: e.vars.palette.default.hoverOpacity,
+          ...r?.error && {
+            borderColor: e.vars.palette.error.active
+          }
+        },
+        "&:focus-within": {
+          borderColor: e.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
+          },
+          ...r?.variant === "contained" && {
+            backgroundColor: e.vars.palette.background.default,
+            "&&& .M4LCodeEditor-header": {
+              backgroundColor: e.vars.palette.default.enabledOpacity
+            }
+          }
+        }
+      }
+    };
+  },
+  /** Layout the language badge row above the editing surface. */
+  header: ({ theme: e, ownerState: r }) => {
+    const o = l(
+      r?.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" && {
+        backgroundColor: "transparent"
+      },
+      ...r?.variant === "outlined" && {
+        backgroundColor: e.vars.palette.background.default
+      },
+      ...r?.readOnly && {
+        backgroundColor: `${e.vars.palette.background.default}!important`
+      },
+      color: o.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 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
+    );
+    return {
+      flexShrink: 0,
+      minWidth: 0,
+      whiteSpace: "nowrap",
+      textTransform: "lowercase",
+      paddingTop: 0,
+      paddingBottom: 0,
+      backgroundColor: "transparent",
+      borderColor: e.vars.palette.chips.default.outlined.backgroundActive,
+      color: o.surface.languageChipForeground,
+      ...p(
+        e,
+        r?.size || "medium",
+        "base",
+        (a) => ({ height: a })
+      ),
+      "&&& .M4LTypography-root": {
+        ...d(e.generalSettings.isMobile, r?.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: e, ownerState: r }) => ({
+    "&&&": {
+      flexShrink: 0,
+      minWidth: 0,
+      whiteSpace: "nowrap",
+      ...p(
+        e,
+        r?.size || "medium",
+        "base",
+        (o) => ({ height: o })
+      ),
+      "&&& .M4LTypography-root": {
+        ...d(e.generalSettings.isMobile, r?.size || "medium", "microSlim"),
+        color: e.vars.palette.chips.info.contained.color
+      },
+      backgroundColor: e.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;
+    return {
+      display: "grid",
+      gridTemplateColumns: r?.showLineNumbers ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+      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
+    };
+  },
+  /** Style the optional line-number gutter. */
+  lineNumbers: ({ theme: e, ownerState: r }) => {
+    const o = l(
+      r?.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}`,
+      backgroundColor: "transparent",
+      color: r?.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`
+    };
+  },
+  /** Keep each rendered line number aligned with the code line height. */
+  lineNumber: ({ theme: e, ownerState: r }) => {
+    const o = l(
+      r?.colorMode
+    );
+    return {
+      display: "block",
+      minWidth: "2ch",
+      height: `${r?.lineHeight || n.medium}px`,
+      lineHeight: `${r?.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: e }) => ({
+    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,
+    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;
+    return {
+      position: "relative",
+      zIndex: 0,
+      width: "max-content",
+      minWidth: "100%",
+      minHeight: `calc(${r?.minLines || 1} * ${r?.lineHeight || n.medium}px + ${t}px)`,
+      backgroundColor: "transparent",
+      fontFamily: s,
+      fontSize: "11px",
+      lineHeight: `${r?.lineHeight || n.medium}px`,
+      fontWeight: 400,
+      "& textarea, & pre": {
+        ...d(e.generalSettings.isMobile, r?.size || "medium", "bodyStandard"),
+        fontFamily: s,
+        lineHeight: `${r?.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(e.generalSettings.isMobile, r?.size || "medium", "microSlim"),
+        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 = l(
+      r?.colorMode
+    );
+    return {
+      position: "absolute",
+      zIndex: 1,
+      top: `${i}px`,
+      left: `${i}px`,
+      pointerEvents: "none",
+      color: o.surface.placeholderForeground,
+      ...d(e.generalSettings.isMobile, r?.size || "medium", "bodyStandard"),
+      fontFamily: s,
+      lineHeight: `${r?.lineHeight || n.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
+};