@mittwald/flow-react-components 0.2.0-experimental.776 → 1.0.0

package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs

@@ -1,103 +1,128 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
-import CodeMirror from '@uiw/react-codemirror';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import clsx from 'clsx';
-import styles from './CodeEditor.module.scss.mjs';
-import './languages/index.mjs';
-import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
-import { useObjectRef } from 'react-aria';
-import { defaultLightTheme } from './themes/defaultEditorTheme.mjs';
-import { useCodeEditorExtensions } from './hooks/useCodeEditorExtensions.mjs';
-import { CopyButton } from '../CopyButton/CopyButton.mjs';
-import 'react';
-
-const CodeEditor = flowComponent("CodeEditor", (props) => {
-  const {
-    ref,
-    children,
-    className,
-    language,
-    extensions,
-    isReadOnly,
-    isInvalid,
-    isRequired,
-    validationBehavior: _ignoredValidationBehavior,
-    value,
-    showLineNumbers = true,
-    showCodeFolding = true,
-    showCodeIndentationMakers = true,
-    showLinterMarkers = true,
-    showActiveLineMarker = true,
-    copyable = true,
-    ...rest
-  } = useControlledHostValueProps(props);
-  const {
-    FieldErrorView,
-    FieldErrorCaptureContext,
-    fieldProps,
-    fieldPropsContext
-  } = useFieldComponent(props);
-  const rootClassName = clsx(
-    fieldProps.className,
-    styles.codeEditor,
-    className
-  );
-  const enabledExtensions = useCodeEditorExtensions(language, extensions, {
-    showLineNumbers,
-    showCodeIndentationMakers,
-    showCodeFolding,
-    showLinterMarkers
-  });
-  const localRef = useObjectRef(ref);
-  useMakeFocusable(localRef);
-  return /* @__PURE__ */ jsx("div", { className: rootClassName, children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: fieldPropsContext, children: [
-    /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
-      /* @__PURE__ */ jsx(
-        CodeMirror,
-        {
-          ...rest,
-          value,
-          basicSetup: {
-            highlightActiveLine: showActiveLineMarker,
-            highlightActiveLineGutter: showActiveLineMarker,
-            autocompletion: false,
-            lineNumbers: false,
-            foldGutter: false,
-            highlightSelectionMatches: false
-          },
-          theme: defaultLightTheme,
-          "aria-required": isRequired,
-          "aria-invalid": isInvalid,
-          readOnly: isReadOnly,
-          className: styles.codeMirror,
-          ref: (codeMirrorRef) => {
-            if (codeMirrorRef?.editor) {
-              localRef.current = codeMirrorRef.editor;
-            }
-          },
-          extensions: enabledExtensions,
-          children: copyable && /* @__PURE__ */ jsx(
-            CopyButton,
-            {
-              className: styles.copyButton,
-              size: "s",
-              variant: "soft",
-              text: value
-            }
-          )
-        }
-      ),
-      children
-    ] }),
-    /* @__PURE__ */ jsx(FieldErrorView, {})
-  ] }) });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
+import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
+import CodeEditor_module_default from "./CodeEditor.module.mjs";
+import { defaultLightTheme } from "./themes/defaultEditorTheme.mjs";
+import { useCodeEditorExtensions } from "./hooks/useCodeEditorExtensions.mjs";
+import { CopyButton } from "../CopyButton/CopyButton.mjs";
+import clsx from "clsx";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria";
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+//#region src/components/CodeEditor/CodeEditor.tsx
+/**
+* @flr-generate all
+* @flowStatus new
+*/
+var CodeEditor = flowComponent("CodeEditor", (props) => {
+	const { ref, children, className, language, extensions, isReadOnly, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
+	const rootClassName = clsx(fieldProps.className, CodeEditor_module_default.codeEditor, className);
+	const labelId = useId();
+	const descriptionId = useId();
+	/**
+	* The label and the field description are declared as children of the code
+	* editor, but must be rendered outside of the editor itself. They are
+	* tunneled out of the editor – just like the field error. Their ids are the
+	* ones the editor references.
+	*/
+	const propsContext = {
+		...fieldPropsContext,
+		Label: {
+			...fieldPropsContext.Label,
+			id: labelId,
+			tunnel: {
+				id: "label",
+				component: "CodeEditor"
+			}
+		},
+		FieldDescription: {
+			...fieldPropsContext.FieldDescription,
+			id: descriptionId,
+			tunnel: {
+				id: "fieldDescription",
+				component: "CodeEditor"
+			}
+		}
+	};
+	const enabledExtensions = useCodeEditorExtensions(language, extensions, {
+		showLineNumbers,
+		showCodeIndentationMakers,
+		showCodeFolding,
+		showLinterMarkers
+	});
+	/**
+	* The editable element of CodeMirror is the `.cm-content` element – not the
+	* root element the props are applied to. Its ARIA attributes are set through
+	* the content attributes facet.
+	*
+	* The label reference only resolves when a label is given. Without one, an
+	* `aria-label` names the editor instead – the name computation skips
+	* references that point at nothing.
+	*/
+	const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(" ");
+	const describedBy = [descriptionId, fieldProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	const contentAttributes = EditorView.contentAttributes.of({
+		"aria-labelledby": labelledBy,
+		...ariaLabel ? { "aria-label": ariaLabel } : {},
+		...describedBy ? { "aria-describedby": describedBy } : {},
+		...isRequired ? { "aria-required": "true" } : {},
+		...isInvalid ? { "aria-invalid": "true" } : {}
+	});
+	const localRef = useObjectRef(ref);
+	useMakeFocusable(localRef);
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClassName,
+		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			props: propsContext,
+			children: [
+				/* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: "label",
+					component: "CodeEditor"
+				}),
+				/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(CodeMirror, {
+					...rest,
+					value,
+					basicSetup: {
+						highlightActiveLine: showActiveLineMarker,
+						highlightActiveLineGutter: showActiveLineMarker,
+						autocompletion: false,
+						lineNumbers: false,
+						foldGutter: false,
+						highlightSelectionMatches: false
+					},
+					theme: defaultLightTheme,
+					"data-invalid": isInvalid || void 0,
+					readOnly: isReadOnly,
+					className: clsx(CodeEditor_module_default.codeMirror, isReadOnly && CodeEditor_module_default.readonly),
+					ref: (codeMirrorRef) => {
+						if (codeMirrorRef?.editor) localRef.current = codeMirrorRef.editor;
+					},
+					extensions: [...enabledExtensions, contentAttributes],
+					height: height ?? minHeight,
+					children: [copyable && /* @__PURE__ */ jsx(CopyButton, {
+						className: CodeEditor_module_default.copyButton,
+						size: "s",
+						variant: "soft",
+						text: value
+					}), children]
+				}) }),
+				/* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: "fieldDescription",
+					component: "CodeEditor"
+				}),
+				/* @__PURE__ */ jsx(FieldErrorView, {})
+			]
+		})
+	});
 });
+//#endregion
+export { CodeEditor, CodeEditor as default };
 
-export { CodeEditor };
-//# sourceMappingURL=CodeEditor.mjs.map
+//# sourceMappingURL=CodeEditor.mjs.map

package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n  type CodeEditorSetup,\n  useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport React from \"react\";\n\nexport interface CodeEditorProps\n  extends\n    Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n    CodeEditorSetup,\n    FlowComponentProps {\n  defaultValue?: string;\n  isReadOnly?: boolean;\n  isInvalid?: boolean;\n  className?: string;\n  language?: CodeEditorLanguage;\n  copyable?: boolean;\n\n  isRequired?: boolean;\n  validationBehavior?: unknown;\n}\n\n/** @flr-generate all */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n  const {\n    ref,\n    children,\n    className,\n    language,\n    extensions,\n    isReadOnly,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    showLineNumbers = true,\n    showCodeFolding = true,\n    showCodeIndentationMakers = true,\n    showLinterMarkers = true,\n    showActiveLineMarker = true,\n    copyable = true,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    fieldProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  const localRef = useObjectRef(ref);\n  useMakeFocusable(localRef);\n\n  return (\n    <div className={rootClassName}>\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>\n          <CodeMirror\n            {...rest}\n            value={value}\n            basicSetup={{\n              highlightActiveLine: showActiveLineMarker,\n              highlightActiveLineGutter: showActiveLineMarker,\n              autocompletion: false,\n              lineNumbers: false,\n              foldGutter: false,\n              highlightSelectionMatches: false,\n            }}\n            theme={defaultLightTheme}\n            aria-required={isRequired}\n            aria-invalid={isInvalid}\n            readOnly={isReadOnly}\n            className={styles.codeMirror}\n            ref={(codeMirrorRef) => {\n              if (codeMirrorRef?.editor) {\n                localRef.current = codeMirrorRef.editor;\n              }\n            }}\n            extensions={enabledExtensions}\n          >\n            {copyable && (\n              <CopyButton\n                className={styles.copyButton}\n                size=\"s\"\n                variant=\"soft\"\n                text={value}\n              />\n            )}\n          </CodeMirror>\n          {children}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuCO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM;AAAA,IACJ,GAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA,EAAoB,0BAAA;AAAA,IACpB,KAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,eAAA,GAAkB,IAAA;AAAA,IAClB,yBAAA,GAA4B,IAAA;AAAA,IAC5B,iBAAA,GAAoB,IAAA;AAAA,IACpB,oBAAA,GAAuB,IAAA;AAAA,IACvB,QAAA,GAAW,IAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,UAAA,CAAW,SAAA;AAAA,IACX,MAAA,CAAO,UAAA;AAAA,IACP;AAAA,GACF;AAEA,EAAA,MAAM,iBAAA,GAAoB,uBAAA,CAAwB,QAAA,EAAU,UAAA,EAAY;AAAA,IACtE,eAAA;AAAA,IACA,yBAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eACd,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,IAAA;AAAA,UACJ,KAAA;AAAA,UACA,UAAA,EAAY;AAAA,YACV,mBAAA,EAAqB,oBAAA;AAAA,YACrB,yBAAA,EAA2B,oBAAA;AAAA,YAC3B,cAAA,EAAgB,KAAA;AAAA,YAChB,WAAA,EAAa,KAAA;AAAA,YACb,UAAA,EAAY,KAAA;AAAA,YACZ,yBAAA,EAA2B;AAAA,WAC7B;AAAA,UACA,KAAA,EAAO,iBAAA;AAAA,UACP,eAAA,EAAe,UAAA;AAAA,UACf,cAAA,EAAc,SAAA;AAAA,UACd,QAAA,EAAU,UAAA;AAAA,UACV,WAAW,MAAA,CAAO,UAAA;AAAA,UAClB,GAAA,EAAK,CAAC,aAAA,KAAkB;AACtB,YAAA,IAAI,eAAe,MAAA,EAAQ;AACzB,cAAA,QAAA,CAAS,UAAU,aAAA,CAAc,MAAA;AAAA,YACnC;AAAA,UACF,CAAA;AAAA,UACA,UAAA,EAAY,iBAAA;AAAA,UAEX,QAAA,EAAA,QAAA,oBACC,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAA,CAAO,UAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,MAAA;AAAA,cACR,IAAA,EAAM;AAAA;AAAA;AACR;AAAA,OAEJ;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CodeEditor.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useId } from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n  type CodeEditorSetup,\n  useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n  extends\n    Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n    CodeEditorSetup,\n    FlowComponentProps {\n  /** The initial code of an uncontrolled editor. */\n  defaultValue?: string;\n  /**\n   * Whether the code can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * Whether the editor is displayed as invalid.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n  /** The elements class name. */\n  className?: string;\n  /** The language the code is highlighted as. */\n  language?: CodeEditorLanguage;\n  /**\n   * Whether a button to copy the code to the clipboard is shown.\n   *\n   * @default true\n   */\n  copyable?: boolean;\n  /**\n   * Whether the field must be filled in. Only marks the editor as required for\n   * assistive technology — the editor does not validate itself.\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * @internal Set by `<Field />` on every form field. The editor has no\n   * react-aria validation to forward it to and drops it.\n   */\n  validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n  const {\n    ref,\n    children,\n    className,\n    language,\n    extensions,\n    isReadOnly,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    showLineNumbers = true,\n    showCodeFolding = true,\n    showCodeIndentationMakers = true,\n    showLinterMarkers = true,\n    showActiveLineMarker = true,\n    copyable = true,\n    height,\n    minHeight,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    fieldProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * The label and the field description are declared as children of the code\n   * editor, but must be rendered outside of the editor itself. They are\n   * tunneled out of the editor – just like the field error. Their ids are the\n   * ones the editor references.\n   */\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      id: labelId,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n    },\n  };\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  /**\n   * The editable element of CodeMirror is the `.cm-content` element – not the\n   * root element the props are applied to. Its ARIA attributes are set through\n   * the content attributes facet.\n   *\n   * The label reference only resolves when a label is given. Without one, an\n   * `aria-label` names the editor instead – the name computation skips\n   * references that point at nothing.\n   */\n  const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(\" \");\n\n  const describedBy =\n    [descriptionId, fieldProps[\"aria-describedby\"]].filter(Boolean).join(\" \") ||\n    undefined;\n\n  const contentAttributes = EditorView.contentAttributes.of({\n    \"aria-labelledby\": labelledBy,\n    ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n  });\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  return (\n    <div className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          <CodeMirror\n            {...rest}\n            value={value}\n            basicSetup={{\n              highlightActiveLine: showActiveLineMarker,\n              highlightActiveLineGutter: showActiveLineMarker,\n              autocompletion: false,\n              lineNumbers: false,\n              foldGutter: false,\n              highlightSelectionMatches: false,\n            }}\n            theme={defaultLightTheme}\n            data-invalid={isInvalid || undefined}\n            readOnly={isReadOnly}\n            className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n            ref={(codeMirrorRef) => {\n              if (codeMirrorRef?.editor) {\n                localRef.current = codeMirrorRef.editor;\n              }\n            }}\n            extensions={[...enabledExtensions, contentAttributes]}\n            height={height ?? minHeight}\n          >\n            {copyable && (\n              <CopyButton\n                className={styles.copyButton}\n                size=\"s\"\n                variant=\"soft\"\n                text={value}\n              />\n            )}\n            {children}\n          </CodeMirror>\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsEA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,KACA,UACA,WACA,UACA,YACA,YACA,WACA,YACA,oBAAoB,4BACpB,OACA,kBAAkB,MAClB,kBAAkB,MAClB,4BAA4B,MAC5B,oBAAoB,MACpB,uBAAuB,MACvB,WAAW,MACX,QACA,WACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,KAAK;CAErC,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KACpB,WAAW,WACX,0BAAO,YACP,SACF;CAEA,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;;;;;;;CAQ5B,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,IAAI;GACJ,QAAQ;IAAE,IAAI;IAAS,WAAW;GAAa;EACjD;EACA,kBAAkB;GAChB,GAAG,kBAAkB;GACrB,IAAI;GACJ,QAAQ;IAAE,IAAI;IAAoB,WAAW;GAAa;EAC5D;CACF;CAEA,MAAM,oBAAoB,wBAAwB,UAAU,YAAY;EACrD;EACU;EACV;EACE;CACrB,CAAC;;;;;;;;;;CAWD,MAAM,aAAa,CAAC,gBAAgB,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErE,MAAM,cACJ,CAAC,eAAe,WAAW,mBAAmB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KACxE,KAAA;CAEF,MAAM,oBAAoB,WAAW,kBAAkB,GAAG;EACxD,mBAAmB;EACnB,GAAI,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;EAC/C,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;EACzD,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;EAChD,GAAI,YAAY,EAAE,gBAAgB,OAAO,IAAI,CAAC;CAChD,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,OACE,oBAAC,OAAD;EAAK,WAAW;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACE,qBAAC,YAAD;KACE,GAAI;KACG;KACP,YAAY;MACV,qBAAqB;MACrB,2BAA2B;MAC3B,gBAAgB;MAChB,aAAa;MACb,YAAY;MACZ,2BAA2B;KAC7B;KACA,OAAO;KACP,gBAAc,aAAa,KAAA;KAC3B,UAAU;KACV,WAAW,KAAK,0BAAO,YAAY,cAAc,0BAAO,QAAQ;KAChE,MAAM,kBAAkB;MACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;KAErC;KACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;KACpD,QAAQ,UAAU;KArBpB,UAAA,CAuBG,YACC,oBAAC,YAAD;MACE,WAAW,0BAAO;MAClB,MAAK;MACL,SAAQ;MACR,MAAM;KACP,CAAA,GAEF,QACS;IACY,CAAA,EAAA,CAAA;IAC1B,oBAAC,uBAAD;KAAuB,IAAG;KAAmB,WAAU;IAAc,CAAA;IACrE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACnB,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.module.mjs

@@ -0,0 +1,17 @@
+"use client"
+/* */
+//#region src/components/CodeEditor/CodeEditor.module.scss
+var codeEditor = "flow--code-editor";
+var codeMirror = "flow--code-editor--code-mirror";
+var readonly = "flow--code-editor--readonly";
+var copyButton = "flow--code-editor--copy-button";
+var CodeEditor_module_default = {
+	codeEditor,
+	codeMirror,
+	readonly,
+	copyButton
+};
+//#endregion
+export { codeEditor, codeMirror, copyButton, CodeEditor_module_default as default, readonly };
+
+//# sourceMappingURL=CodeEditor.module.mjs.map

package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.codeEditor {\n  outline: none;\n  isolation: isolate;\n\n  .codeMirror {\n    @include formControl.formControl();\n\n    position: relative;\n    order: 2;\n\n    /*\n     * The inline padding is applied by the lines and the gutter instead, so\n     * that the highlight of the active line spans the full editor width.\n     */\n    padding-inline: unset;\n\n    /* the vertical padding applied by the form control mixin */\n    --editor-padding: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n\n    min-height: calc(var(--form-control--padding-y) * 2 + var(--line-height-m));\n\n    &:hover {\n      background-color: var(--form-control--background-color--default);\n    }\n\n    &.readonly {\n      border-color: var(--form-control--border-color--default);\n    }\n\n    .copyButton {\n      position: absolute;\n      inset-block-start: var(--editor-padding);\n      inset-inline-end: var(--form-control--padding-x);\n      z-index: 1;\n    }\n  }\n}\n\n/*\n * CodeMirror ships its theme as unlayered `<style>` elements that it injects\n * into the document at runtime, outside of Flow's build. Unlayered CSS beats\n * layered CSS regardless of specificity, so these overrides only apply in the\n * layered stylesheet variant if they leave the cascade layer as well.\n */\n@layer flow.unlayered {\n  .codeEditor .codeMirror {\n    /*\n     * The gutter needs an opaque background – the content scrolls underneath\n     * it – but it must follow the background of the editor, which changes with\n     * its state (invalid, disabled, …). Inheriting it down from the editor\n     * beats the background the CodeMirror theme applies, which only serves as\n     * a fallback.\n     */\n    & :global(.cm-editor),\n    & :global(.cm-scroller),\n    & :global(.cm-gutters) {\n      background-color: inherit;\n    }\n\n    & :global(.cm-editor) {\n      outline: none;\n\n      & :global(.cm-scroller) {\n        @include scrollbar.scrollbar;\n      }\n\n      & :global(.cm-lineNumbers .cm-gutterElement) {\n        min-width: var(--code-editor--gutter-element-min-width);\n      }\n\n      & :global(.cm-foldGutter) {\n        min-width: var(--code-editor--gutter-element-min-width);\n        text-align: center;\n      }\n\n      & :global(.cm-panels) {\n        display: none;\n      }\n\n      /* the block padding is applied by the editor itself */\n      & :global(.cm-content) {\n        padding-block: unset;\n      }\n\n      & :global(.cm-line) {\n        padding-inline: var(--form-control--padding-x);\n      }\n\n      /*\n       * The elements of the first gutter carry the inline start padding, so\n       * that the highlight of the active line reaches the editor border.\n       */\n      & :global(.cm-gutters > .cm-gutter:first-child .cm-gutterElement) {\n        padding-inline-start: var(--form-control--padding-x);\n      }\n\n      & :global(.cm-activeLineGutter),\n      & :global(.cm-activeLine) {\n        background-color: color-mix(\n          in srgb,\n          var(--form-control--background-color--hover) 65%,\n          transparent\n        );\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/CodeEditor/extensions/gutterSpacer.mjs

@@ -1,19 +1,20 @@
 "use client"
 /* */
-import { gutter, GutterMarker } from '@uiw/react-codemirror';
-
-class EmptyGutterSpacer extends GutterMarker {
-  toDOM() {
-    const element = document.createElement("div");
-    element.style.minWidth = "var(--form-control--spacing-x)";
-    return element;
-  }
-}
-const gutterSpacer = () => gutter({
-  class: "cm-foldGutter-spacer",
-  renderEmptyElements: true,
-  initialSpacer: () => new EmptyGutterSpacer()
+import { GutterMarker, gutter } from "@uiw/react-codemirror";
+//#region src/components/CodeEditor/extensions/gutterSpacer.ts
+var EmptyGutterSpacer = class extends GutterMarker {
+	toDOM() {
+		const element = document.createElement("div");
+		element.style.minWidth = "var(--form-control--spacing-x)";
+		return element;
+	}
+};
+var gutterSpacer = () => gutter({
+	class: "cm-foldGutter-spacer",
+	renderEmptyElements: true,
+	initialSpacer: () => new EmptyGutterSpacer()
 });
-
+//#endregion
 export { gutterSpacer };
-//# sourceMappingURL=gutterSpacer.mjs.map
+
+//# sourceMappingURL=gutterSpacer.mjs.map

package/dist/js/packages/components/src/components/CodeEditor/extensions/gutterSpacer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gutterSpacer.mjs","sources":["../../../../../../../../src/components/CodeEditor/extensions/gutterSpacer.ts"],"sourcesContent":["import { GutterMarker, gutter } from \"@uiw/react-codemirror\";\n\nclass EmptyGutterSpacer extends GutterMarker {\n  override toDOM() {\n    const element = document.createElement(\"div\");\n    element.style.minWidth = \"var(--form-control--spacing-x)\";\n\n    return element;\n  }\n}\n\nexport const gutterSpacer = () =>\n  gutter({\n    class: \"cm-foldGutter-spacer\",\n    renderEmptyElements: true,\n    initialSpacer: () => new EmptyGutterSpacer(),\n  });\n"],"names":[],"mappings":";;AAEA,MAAM,0BAA0B,YAAA,CAAa;AAAA,EAClC,KAAA,GAAQ;AACf,IAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,IAAA,OAAA,CAAQ,MAAM,QAAA,GAAW,gCAAA;AAEzB,IAAA,OAAO,OAAA;AAAA,EACT;AACF;AAEO,MAAM,YAAA,GAAe,MAC1B,MAAA,CAAO;AAAA,EACL,KAAA,EAAO,sBAAA;AAAA,EACP,mBAAA,EAAqB,IAAA;AAAA,EACrB,aAAA,EAAe,MAAM,IAAI,iBAAA;AAC3B,CAAC;;;;"}
+{"version":3,"file":"gutterSpacer.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/extensions/gutterSpacer.ts"],"sourcesContent":["import { GutterMarker, gutter } from \"@uiw/react-codemirror\";\n\nclass EmptyGutterSpacer extends GutterMarker {\n  override toDOM() {\n    const element = document.createElement(\"div\");\n    element.style.minWidth = \"var(--form-control--spacing-x)\";\n\n    return element;\n  }\n}\n\nexport const gutterSpacer = () =>\n  gutter({\n    class: \"cm-foldGutter-spacer\",\n    renderEmptyElements: true,\n    initialSpacer: () => new EmptyGutterSpacer(),\n  });\n"],"mappings":";;;;AAEA,IAAM,oBAAN,cAAgC,aAAa;CAC3C,QAAiB;EACf,MAAM,UAAU,SAAS,cAAc,KAAK;EAC5C,QAAQ,MAAM,WAAW;EAEzB,OAAO;CACT;AACF;AAEA,IAAa,qBACX,OAAO;CACL,OAAO;CACP,qBAAqB;CACrB,qBAAqB,IAAI,kBAAkB;AAC7C,CAAC"}

package/dist/js/packages/components/src/components/CodeEditor/hooks/useCodeEditorExtensions.mjs

@@ -1,52 +1,34 @@
 "use client"
 /* */
-import { lineNumbers } from '@uiw/react-codemirror';
-import { lintGutter } from '@codemirror/lint';
-import supportedCodeEditorLanguages from '../languages/index.mjs';
-import { indentationMarkers } from '@replit/codemirror-indentation-markers';
-import { foldGutter } from '@codemirror/language';
-import { gutterSpacer } from '../extensions/gutterSpacer.mjs';
-
-const useCodeEditorExtensions = (language, extensions = [], options = {
-  showCodeFolding: true,
-  showCodeIndentationMakers: true,
-  showLineNumbers: true,
-  showLinterMarkers: true
+import supportedCodeEditorLanguages from "../languages/index.mjs";
+import { gutterSpacer } from "../extensions/gutterSpacer.mjs";
+import { lineNumbers } from "@uiw/react-codemirror";
+import { foldGutter } from "@codemirror/language";
+import { lintGutter } from "@codemirror/lint";
+import { indentationMarkers } from "@replit/codemirror-indentation-markers";
+//#region src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx
+/** @internal */
+var useCodeEditorExtensions = (language, extensions = [], options = {
+	showCodeFolding: true,
+	showCodeIndentationMakers: true,
+	showLineNumbers: true,
+	showLinterMarkers: true
 }) => {
-  if (options.showLineNumbers) {
-    extensions.push(lineNumbers());
-  }
-  if (options.showCodeFolding) {
-    extensions.push(
-      foldGutter({
-        markerDOM: (open) => {
-          const element = document.createElement("span");
-          element.classList.add("cm-foldGutter");
-          element.classList.add(
-            open ? "cm-foldGutter-open" : "cm-foldGutter-closed"
-          );
-          element.innerText = open ? "⌄" : "›";
-          return element;
-        }
-      })
-    );
-  }
-  if (options.showLinterMarkers) {
-    extensions.push(lintGutter());
-  }
-  if (options.showLineNumbers && (!options.showCodeFolding || !options.showLinterMarkers)) {
-    extensions.push(gutterSpacer());
-  }
-  if (options.showCodeIndentationMakers) {
-    extensions.push(indentationMarkers());
-  }
-  if (language) {
-    supportedCodeEditorLanguages[language]?.map(
-      (loader) => extensions.push(loader())
-    );
-  }
-  return extensions;
+	if (options.showLineNumbers) extensions.push(lineNumbers());
+	if (options.showCodeFolding) extensions.push(foldGutter({ markerDOM: (open) => {
+		const element = document.createElement("span");
+		element.classList.add("cm-foldGutter");
+		element.classList.add(open ? "cm-foldGutter-open" : "cm-foldGutter-closed");
+		element.innerText = open ? "⌄" : "›";
+		return element;
+	} }));
+	if (options.showLinterMarkers) extensions.push(lintGutter());
+	if (options.showLineNumbers && (!options.showCodeFolding || !options.showLinterMarkers)) extensions.push(gutterSpacer());
+	if (options.showCodeIndentationMakers) extensions.push(indentationMarkers());
+	if (language) supportedCodeEditorLanguages[language]?.map((loader) => extensions.push(loader()));
+	return extensions;
 };
-
+//#endregion
 export { useCodeEditorExtensions };
-//# sourceMappingURL=useCodeEditorExtensions.mjs.map
+
+//# sourceMappingURL=useCodeEditorExtensions.mjs.map

package/dist/js/packages/components/src/components/CodeEditor/hooks/useCodeEditorExtensions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCodeEditorExtensions.mjs","sources":["../../../../../../../../src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx"],"sourcesContent":["import { type Extension, lineNumbers } from \"@uiw/react-codemirror\";\nimport { lintGutter } from \"@codemirror/lint\";\nimport supportedCodeEditorLanguages, {\n  type CodeEditorLanguage,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\n\n/** @internal */\nexport interface CodeEditorSetup {\n  showActiveLineMarker?: boolean;\n  showCodeFolding?: boolean;\n  showCodeIndentationMakers?: boolean;\n  showLineNumbers?: boolean;\n  showLinterMarkers?: boolean;\n}\n\n/** @internal */\nexport const useCodeEditorExtensions = (\n  language?: CodeEditorLanguage,\n  extensions: Extension[] = [],\n  options: CodeEditorSetup = {\n    showCodeFolding: true,\n    showCodeIndentationMakers: true,\n    showLineNumbers: true,\n    showLinterMarkers: true,\n  },\n) => {\n  if (options.showLineNumbers) {\n    extensions.push(lineNumbers());\n  }\n\n  if (options.showCodeFolding) {\n    extensions.push(\n      foldGutter({\n        markerDOM: (open) => {\n          const element = document.createElement(\"span\");\n          element.classList.add(\"cm-foldGutter\");\n          element.classList.add(\n            open ? \"cm-foldGutter-open\" : \"cm-foldGutter-closed\",\n          );\n          element.innerText = open ? \"⌄\" : \"›\";\n          return element;\n        },\n      }),\n    );\n  }\n\n  if (options.showLinterMarkers) {\n    extensions.push(lintGutter());\n  }\n\n  if (\n    options.showLineNumbers &&\n    (!options.showCodeFolding || !options.showLinterMarkers)\n  ) {\n    extensions.push(gutterSpacer());\n  }\n\n  if (options.showCodeIndentationMakers) {\n    extensions.push(indentationMarkers());\n  }\n\n  if (language) {\n    supportedCodeEditorLanguages[language]?.map((loader) =>\n      extensions.push(loader()),\n    );\n  }\n\n  return extensions;\n};\n"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,0BAA0B,CACrC,QAAA,EACA,UAAA,GAA0B,IAC1B,OAAA,GAA2B;AAAA,EACzB,eAAA,EAAiB,IAAA;AAAA,EACjB,yBAAA,EAA2B,IAAA;AAAA,EAC3B,eAAA,EAAiB,IAAA;AAAA,EACjB,iBAAA,EAAmB;AACrB,CAAA,KACG;AACH,EAAA,IAAI,QAAQ,eAAA,EAAiB;AAC3B,IAAA,UAAA,CAAW,IAAA,CAAK,aAAa,CAAA;AAAA,EAC/B;AAEA,EAAA,IAAI,QAAQ,eAAA,EAAiB;AAC3B,IAAA,UAAA,CAAW,IAAA;AAAA,MACT,UAAA,CAAW;AAAA,QACT,SAAA,EAAW,CAAC,IAAA,KAAS;AACnB,UAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC7C,UAAA,OAAA,CAAQ,SAAA,CAAU,IAAI,eAAe,CAAA;AACrC,UAAA,OAAA,CAAQ,SAAA,CAAU,GAAA;AAAA,YAChB,OAAO,oBAAA,GAAuB;AAAA,WAChC;AACA,UAAA,OAAA,CAAQ,SAAA,GAAY,OAAO,GAAA,GAAM,GAAA;AACjC,UAAA,OAAO,OAAA;AAAA,QACT;AAAA,OACD;AAAA,KACH;AAAA,EACF;AAEA,EAAA,IAAI,QAAQ,iBAAA,EAAmB;AAC7B,IAAA,UAAA,CAAW,IAAA,CAAK,YAAY,CAAA;AAAA,EAC9B;AAEA,EAAA,IACE,QAAQ,eAAA,KACP,CAAC,QAAQ,eAAA,IAAmB,CAAC,QAAQ,iBAAA,CAAA,EACtC;AACA,IAAA,UAAA,CAAW,IAAA,CAAK,cAAc,CAAA;AAAA,EAChC;AAEA,EAAA,IAAI,QAAQ,yBAAA,EAA2B;AACrC,IAAA,UAAA,CAAW,IAAA,CAAK,oBAAoB,CAAA;AAAA,EACtC;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,4BAAA,CAA6B,QAAQ,CAAA,EAAG,GAAA;AAAA,MAAI,CAAC,MAAA,KAC3C,UAAA,CAAW,IAAA,CAAK,QAAQ;AAAA,KAC1B;AAAA,EACF;AAEA,EAAA,OAAO,UAAA;AACT;;;;"}
+{"version":3,"file":"useCodeEditorExtensions.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx"],"sourcesContent":["import { type Extension, lineNumbers } from \"@uiw/react-codemirror\";\nimport { lintGutter } from \"@codemirror/lint\";\nimport supportedCodeEditorLanguages, {\n  type CodeEditorLanguage,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\n\n/** @internal */\nexport interface CodeEditorSetup {\n  /**\n   * Whether the line the cursor is on is highlighted.\n   *\n   * @default true\n   */\n  showActiveLineMarker?: boolean;\n  /**\n   * Whether the gutter offers controls to fold and unfold code blocks.\n   *\n   * @default true\n   */\n  showCodeFolding?: boolean;\n  /**\n   * Whether indentation levels are visualized with guide lines.\n   *\n   * @default true\n   */\n  showCodeIndentationMakers?: boolean;\n  /**\n   * Whether line numbers are shown in the gutter.\n   *\n   * @default true\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Whether linter results are shown in the gutter.\n   *\n   * @default true\n   */\n  showLinterMarkers?: boolean;\n}\n\n/** @internal */\nexport const useCodeEditorExtensions = (\n  language?: CodeEditorLanguage,\n  extensions: Extension[] = [],\n  options: CodeEditorSetup = {\n    showCodeFolding: true,\n    showCodeIndentationMakers: true,\n    showLineNumbers: true,\n    showLinterMarkers: true,\n  },\n) => {\n  if (options.showLineNumbers) {\n    extensions.push(lineNumbers());\n  }\n\n  if (options.showCodeFolding) {\n    extensions.push(\n      foldGutter({\n        markerDOM: (open) => {\n          const element = document.createElement(\"span\");\n          element.classList.add(\"cm-foldGutter\");\n          element.classList.add(\n            open ? \"cm-foldGutter-open\" : \"cm-foldGutter-closed\",\n          );\n          element.innerText = open ? \"⌄\" : \"›\";\n          return element;\n        },\n      }),\n    );\n  }\n\n  if (options.showLinterMarkers) {\n    extensions.push(lintGutter());\n  }\n\n  if (\n    options.showLineNumbers &&\n    (!options.showCodeFolding || !options.showLinterMarkers)\n  ) {\n    extensions.push(gutterSpacer());\n  }\n\n  if (options.showCodeIndentationMakers) {\n    extensions.push(indentationMarkers());\n  }\n\n  if (language) {\n    supportedCodeEditorLanguages[language]?.map((loader) =>\n      extensions.push(loader()),\n    );\n  }\n\n  return extensions;\n};\n"],"mappings":";;;;;;;;;;AA4CA,IAAa,2BACX,UACA,aAA0B,CAAC,GAC3B,UAA2B;CACzB,iBAAiB;CACjB,2BAA2B;CAC3B,iBAAiB;CACjB,mBAAmB;AACrB,MACG;CACH,IAAI,QAAQ,iBACV,WAAW,KAAK,YAAY,CAAC;CAG/B,IAAI,QAAQ,iBACV,WAAW,KACT,WAAW,EACT,YAAY,SAAS;EACnB,MAAM,UAAU,SAAS,cAAc,MAAM;EAC7C,QAAQ,UAAU,IAAI,eAAe;EACrC,QAAQ,UAAU,IAChB,OAAO,uBAAuB,sBAChC;EACA,QAAQ,YAAY,OAAO,MAAM;EACjC,OAAO;CACT,EACF,CAAC,CACH;CAGF,IAAI,QAAQ,mBACV,WAAW,KAAK,WAAW,CAAC;CAG9B,IACE,QAAQ,oBACP,CAAC,QAAQ,mBAAmB,CAAC,QAAQ,oBAEtC,WAAW,KAAK,aAAa,CAAC;CAGhC,IAAI,QAAQ,2BACV,WAAW,KAAK,mBAAmB,CAAC;CAGtC,IAAI,UACF,6BAA6B,SAAS,EAAE,KAAK,WAC3C,WAAW,KAAK,OAAO,CAAC,CAC1B;CAGF,OAAO;AACT"}

package/dist/js/packages/components/src/components/CodeEditor/languages/dotEnv/dotEnv.mjs

@@ -0,0 +1,22 @@
+"use client"
+/* */
+import { LRParser } from "../../../../../../../node_modules/.pnpm/@lezer_lr@1.4.10/node_modules/@lezer/lr/dist/index.mjs";
+//#region src/components/CodeEditor/languages/dotEnv/dotEnv.grammar
+var parser = LRParser.deserialize({
+	version: 14,
+	states: "!vOVQPOOOeQPO'#C`OOQO'#Ci'#CiOjQPO'#C_OOQO'#Cm'#CmOoQPO'#C^QOQPOOO}QQO,58zOOQO,58y,58yOOQO-E6k-E6kOOQO'#Cd'#CdOOQO'#Cg'#CgOOQO'#Cc'#CcOOQO1G.f1G.f",
+	stateData: "!]~OdOS~OTPO^QO`_PbQP~OUVO~O`WO~OTPO^QO`_PbQX~OXYOYYO[ZO`Sa~O",
+	goto: "zbPPcfjPPnqPPqPjPjPtRUOTSOTTROTR]VR[VQTORXT",
+	nodeNames: "⚠ DotenvFile Document Line EnvVarAssignment Identifier Equal Value StringValue SQString DQString BareValue BareValueToken Comment CommentToken BlankLine Newline",
+	maxTerm: 20,
+	skippedNodes: [0],
+	repeatNodeCount: 1,
+	tokenData: "&}~RbXY!ZYZ!f]^!kpq!Zrs!sst#}wx$]{|%^}!O%^!O!P%^!P!Q%^!Q![%^![!]%^!_!`&R!b!c%^!c!}&W#R#S&W#T#o&W~!`Qd~XY!Zpq!Z~!kO`~~!pP`~YZ!f~!vYpq!srs#f}!O!s!O!P!s!P!Q!s!Q![!s!c!}!s#O#P#k#R#S!s#T#o!s~#kOY~~#nTrs!s#O#P!s#b#c!s#f#g!s#h#i!s~$SR^~YZ#}]^#}#Q#R#}~$`Ypq$]wx%O}!O$]!O!P$]!P!Q$]!Q![$]!c!}$]#O#P%T#R#S$]#T#o$]~%TOX~~%WQwx$]#O#P$]Q%cY[Q{|%^}!O%^!O!P%^!P!Q%^!Q![%^![!]%^!b!c%^!c!}%^#R#S%^#T#o%^~&WOU~R&_Y[QTP{|%^}!O%^!O!P&W!P!Q%^!Q![&W![!]%^!b!c%^!c!}&W#R#S&W#T#o&W",
+	tokenizers: [0, 1],
+	topRules: { "DotenvFile": [0, 1] },
+	tokenPrec: 0
+});
+//#endregion
+export { parser };
+
+//# sourceMappingURL=dotEnv.mjs.map

package/dist/js/packages/components/src/components/CodeEditor/languages/dotEnv/dotEnv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dotEnv.mjs","names":[],"sources":["../../../../../../../../../src/components/CodeEditor/languages/dotEnv/dotEnv.grammar"],"sourcesContent":["// This file was generated by lezer-generator. You probably shouldn't edit it.\nimport {LRParser} from \"@lezer/lr\"\nexport const parser = LRParser.deserialize({\n  version: 14,\n  states: \"!vOVQPOOOeQPO'#C`OOQO'#Ci'#CiOjQPO'#C_OOQO'#Cm'#CmOoQPO'#C^QOQPOOO}QQO,58zOOQO,58y,58yOOQO-E6k-E6kOOQO'#Cd'#CdOOQO'#Cg'#CgOOQO'#Cc'#CcOOQO1G.f1G.f\",\n  stateData: \"!]~OdOS~OTPO^QO`_PbQP~OUVO~O`WO~OTPO^QO`_PbQX~OXYOYYO[ZO`Sa~O\",\n  goto: \"zbPPcfjPPnqPPqPjPjPtRUOTSOTTROTR]VR[VQTORXT\",\n  nodeNames: \"⚠ DotenvFile Document Line EnvVarAssignment Identifier Equal Value StringValue SQString DQString BareValue BareValueToken Comment CommentToken BlankLine Newline\",\n  maxTerm: 20,\n  skippedNodes: [0],\n  repeatNodeCount: 1,\n  tokenData: \"&}~RbXY!ZYZ!f]^!kpq!Zrs!sst#}wx$]{|%^}!O%^!O!P%^!P!Q%^!Q![%^![!]%^!_!`&R!b!c%^!c!}&W#R#S&W#T#o&W~!`Qd~XY!Zpq!Z~!kO`~~!pP`~YZ!f~!vYpq!srs#f}!O!s!O!P!s!P!Q!s!Q![!s!c!}!s#O#P#k#R#S!s#T#o!s~#kOY~~#nTrs!s#O#P!s#b#c!s#f#g!s#h#i!s~$SR^~YZ#}]^#}#Q#R#}~$`Ypq$]wx%O}!O$]!O!P$]!P!Q$]!Q![$]!c!}$]#O#P%T#R#S$]#T#o$]~%TOX~~%WQwx$]#O#P$]Q%cY[Q{|%^}!O%^!O!P%^!P!Q%^!Q![%^![!]%^!b!c%^!c!}%^#R#S%^#T#o%^~&WOU~R&_Y[QTP{|%^}!O%^!O!P&W!P!Q%^!Q![&W![!]%^!b!c%^!c!}&W#R#S&W#T#o&W\",\n  tokenizers: [0, 1],\n  topRules: {\"DotenvFile\":[0,1]},\n  tokenPrec: 0\n})\n"],"mappings":";;;;AAEA,IAAa,SAAS,SAAS,YAAY;CACzC,SAAS;CACT,QAAQ;CACR,WAAW;CACX,MAAM;CACN,WAAW;CACX,SAAS;CACT,cAAc,CAAC,CAAC;CAChB,iBAAiB;CACjB,WAAW;CACX,YAAY,CAAC,GAAG,CAAC;CACjB,UAAU,EAAC,cAAa,CAAC,GAAE,CAAC,EAAC;CAC7B,WAAW;AACb,CAAC"}