@mittwald/flow-react-components 1.6.0-next.5 → 1.6.0-next.51

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Checkbox/Checkbox.module.scss
+// src/components/Checkbox/Checkbox.module.scss
 var checkbox = "flow--checkbox";
 var input = "flow--checkbox--input";
 var icon = "flow--checkbox--icon";
@@ -14,7 +14,6 @@ var Checkbox_module_default = {
 	"skeleton-surface-shimmer": "flow--checkbox--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--checkbox--skeleton-text-shimmer"
 };
-//#endregion
 export { checkbox, Checkbox_module_default as default, icon, input, skeletonIcon };
 
 //# sourceMappingURL=Checkbox.module.mjs.map

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

@@ -8,7 +8,7 @@ import { Checkbox } from "../Checkbox/Checkbox.mjs";
 import CheckboxButton_module_default from "./CheckboxButton.module.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/CheckboxButton/CheckboxButton.tsx
+// src/components/CheckboxButton/CheckboxButton.tsx
 /** @flr-generate all */
 var CheckboxButton = flowComponent("CheckboxButton", (props) => {
 	const { children, className, inputClassName, ...rest } = props;
@@ -36,7 +36,6 @@ var CheckboxButton = flowComponent("CheckboxButton", (props) => {
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: isSkeleton ? skeletonCheckbox : checkbox }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
-//#endregion
 export { CheckboxButton, CheckboxButton as default };
 
 //# sourceMappingURL=CheckboxButton.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/CheckboxButton/CheckboxButton.module.scss
+// src/components/CheckboxButton/CheckboxButton.module.scss
 var checkboxButton = "flow--checkbox-button";
 var input = "flow--checkbox-button--input";
 var readonly = "flow--checkbox-button--readonly";
@@ -17,7 +17,6 @@ var CheckboxButton_module_default = {
 	checkbox,
 	"skeleton-text-shimmer": "flow--checkbox-button--skeleton-text-shimmer"
 };
-//#endregion
 export { checkbox, checkboxButton, content, CheckboxButton_module_default as default, input, label, readonly };
 
 //# sourceMappingURL=CheckboxButton.module.mjs.map

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

@@ -11,7 +11,7 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
-//#region src/components/CheckboxGroup/CheckboxGroup.tsx
+// src/components/CheckboxGroup/CheckboxGroup.tsx
 /** @flr-generate all */
 var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
 	const { children, className, isInvalid, s, m, l, ref, ...rest } = props;
@@ -73,7 +73,6 @@ var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
 		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
-//#endregion
 export { CheckboxGroup, CheckboxGroup as default };
 
 //# sourceMappingURL=CheckboxGroup.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/CheckboxGroup/CheckboxGroup.module.scss
+// src/components/CheckboxGroup/CheckboxGroup.module.scss
 var checkboxGroup = "flow--checkbox-group";
 var checkboxButton = "flow--checkbox-group--checkbox-button";
 var checkbox = "flow--checkbox-group--checkbox";
@@ -9,7 +9,6 @@ var CheckboxGroup_module_default = {
 	checkboxButton,
 	checkbox
 };
-//#endregion
 export { checkbox, checkboxButton, checkboxGroup, CheckboxGroup_module_default as default };
 
 //# sourceMappingURL=CheckboxGroup.module.mjs.map

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

@@ -8,7 +8,7 @@ import { Popover } from "../Popover/Popover.mjs";
 import CoachMark_module_default from "./CoachMark.module.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/CoachMark/CoachMark.tsx
+// src/components/CoachMark/CoachMark.tsx
 /**
 * Resolves whichever anchor was given into something `Popover` can position
 * against.
@@ -95,7 +95,6 @@ var CoachMark = flowComponent("CoachMark", (props) => {
 		})
 	});
 });
-//#endregion
 export { CoachMark, CoachMark as default };
 
 //# sourceMappingURL=CoachMark.mjs.map

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

@@ -1,13 +1,12 @@
 "use client"
 /* */
-//#region src/components/CoachMark/CoachMark.module.scss
+// src/components/CoachMark/CoachMark.module.scss
 var coachMark = "flow--coach-mark";
 var dismiss = "flow--coach-mark--dismiss";
 var CoachMark_module_default = {
 	coachMark,
 	dismiss
 };
-//#endregion
 export { coachMark, CoachMark_module_default as default, dismiss };
 
 //# sourceMappingURL=CoachMark.module.mjs.map

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

@@ -10,7 +10,7 @@ import clsx from "clsx";
 import { useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
-//#region src/components/CodeBlock/CodeBlock.tsx
+// src/components/CodeBlock/CodeBlock.tsx
 /** @flr-generate all */
 var CodeBlock = (props) => {
 	const { code, className, copyable = false, showLineNumbers = false, children, truncateLines = false, ...rest } = props;
@@ -20,10 +20,10 @@ var CodeBlock = (props) => {
 	const editorRef = useRef(null);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "CodeBlock");
 	const isSkeleton = useSkeletonMode();
-	const rootClassName = clsx(CodeBlock_module_default.codeBlock, isSkeleton && CodeBlock_module_default.skeleton, className);
+	const baseClassName = clsx(CodeBlock_module_default.codeBlock, isSkeleton && CodeBlock_module_default.skeleton);
 	const id = useId();
 	if (!code) return /* @__PURE__ */ jsx("div", {
-		className: clsx(rootClassName, CodeBlock_module_default.withChildren),
+		className: clsx(baseClassName, CodeBlock_module_default.withChildren, className),
 		inert: isSkeleton || void 0,
 		children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx(SkeletonModeReset, { children }) }) })
 	});
@@ -48,7 +48,7 @@ var CodeBlock = (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx(rootClassName, maxHeight && CodeBlock_module_default.truncated, folded && CodeBlock_module_default.folded),
+		className: clsx(baseClassName, maxHeight && CodeBlock_module_default.truncated, folded && CodeBlock_module_default.folded, className),
 		style: heightVariables,
 		onTransitionEnd: (event) => {
 			if (event.propertyName === "max-height") setExpandedHeight(void 0);
@@ -88,7 +88,6 @@ var CodeBlock = (props) => {
 		}) })
 	});
 };
-//#endregion
 export { CodeBlock, CodeBlock as default };
 
 //# sourceMappingURL=CodeBlock.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  type FC,\n  type PropsWithChildren,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeBlockProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    Partial<\n      Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n    > {\n  /** The code displayed in the block. */\n  code?: string;\n  /**\n   * Controls truncation of long code blocks. `false` disables it, `true`\n   * truncates after 8 lines, and a number sets the maximum line count.\n   *\n   * @default: false\n   */\n  truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n  const {\n    code,\n    className,\n    copyable = false,\n    showLineNumbers = false,\n    children,\n    truncateLines = false,\n    ...rest\n  } = props;\n\n  const [folded, setFolded] = useState(truncateLines !== false);\n  const [maxHeight, setMaxHeight] = useState<number>();\n  /* The full height, only while the toggle animates to or from it. */\n  const [expandedHeight, setExpandedHeight] = useState<number>();\n  const editorRef = useRef<HTMLElement>(null);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.codeBlock,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const id = useId();\n\n  if (!code) {\n    return (\n      <div\n        className={clsx(rootClassName, styles.withChildren)}\n        inert={isSkeleton || undefined}\n      >\n        {/* Deliberately class-less: a `flow--` class would make the global\n            reset's `font: inherit` apply and replace the UA monospace\n            metrics. See CodeBlock.module.scss. */}\n        <pre>\n          <code>\n            <SkeletonModeReset>{children}</SkeletonModeReset>\n          </code>\n        </pre>\n      </div>\n    );\n  }\n\n  const heightVariables: React.CSSProperties = {\n    ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n    ...(expandedHeight\n      ? { \"--expanded-max-height\": `${expandedHeight}px` }\n      : {}),\n  };\n\n  /* A height transition needs a length on both ends – `none` does not\n     interpolate. So the full height is measured for the transition and\n     released once it ended, and code that changes later is not clipped. */\n  const toggleFolded = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      setFolded((folded) => !folded);\n      return;\n    }\n\n    const animates = getComputedStyle(editor)\n      .transitionDuration.split(\",\")\n      .some((duration) => parseFloat(duration) > 0);\n\n    if (folded) {\n      setExpandedHeight(animates ? editor.scrollHeight : undefined);\n      setFolded(false);\n    } else {\n      flushSync(() => setExpandedHeight(editor.scrollHeight));\n      // Applies the start height before the folded one replaces it.\n      editor.getBoundingClientRect();\n      setFolded(true);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        rootClassName,\n        maxHeight && styles.truncated,\n        folded && styles.folded,\n      )}\n      style={heightVariables}\n      onTransitionEnd={(event) => {\n        if (event.propertyName === \"max-height\") {\n          setExpandedHeight(undefined);\n        }\n      }}\n      inert={isSkeleton || undefined}\n    >\n      {/* The code block is one skeleton surface in the size of its code, so\n          the editor inside renders for real, but invisibly. */}\n      <SkeletonModeReset>\n        <CodeEditor\n          {...rest}\n          value={code}\n          editable={false}\n          copyable={copyable}\n          showLineNumbers={showLineNumbers}\n          showLinterMarkers={false}\n          showCodeFolding={false}\n          showActiveLineMarker={false}\n          isReadOnly\n          onCreateEditor={(view) => {\n            editorRef.current = view.dom;\n\n            if (!truncateLines) {\n              return;\n            }\n\n            const lineHeight = 20;\n            const padding = 12;\n\n            const visibleLines =\n              typeof truncateLines === \"number\" ? truncateLines : 8;\n\n            const totalLines = view.state.doc.lines;\n\n            if (totalLines > visibleLines)\n              setMaxHeight(lineHeight * visibleLines + padding);\n          }}\n          id={id}\n        >\n          {truncateLines && maxHeight && (\n            <div className={clsx(styles.buttonContainer)}>\n              <Button\n                variant=\"plain\"\n                color=\"secondary\"\n                size=\"s\"\n                onPress={toggleFolded}\n                aria-expanded={!folded}\n                aria-controls={id}\n              >\n                {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n              </Button>\n            </div>\n          )}\n        </CodeEditor>\n      </SkeletonModeReset>\n    </div>\n  );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;;AAuCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CACxE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,yBAAO,WACP,cAAcA,yBAAO,UACrB,SACF;CAEA,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,eAAeA,yBAAO,YAAY;EAClD,OAAO,cAAc,KAAA;EAKrB,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UACE,oBAAC,mBAAD,EAAoB,SAA4B,CAAA,EAC5C,CAAA,EACH,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAaA,yBAAO,WACpB,UAAUA,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EACA,OAAO,cAAc,KAAA;EAIrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAKA,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA,EACK,CAAA;CAChB,CAAA;AAET"}
+{"version":3,"file":"CodeBlock.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  type FC,\n  type PropsWithChildren,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeBlockProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    Partial<\n      Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n    > {\n  /** The code displayed in the block. */\n  code?: string;\n  /**\n   * Controls truncation of long code blocks. `false` disables it, `true`\n   * truncates after 8 lines, and a number sets the maximum line count.\n   *\n   * @default false\n   */\n  truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n  const {\n    code,\n    className,\n    copyable = false,\n    showLineNumbers = false,\n    children,\n    truncateLines = false,\n    ...rest\n  } = props;\n\n  const [folded, setFolded] = useState(truncateLines !== false);\n  const [maxHeight, setMaxHeight] = useState<number>();\n  /* The full height, only while the toggle animates to or from it. */\n  const [expandedHeight, setExpandedHeight] = useState<number>();\n  const editorRef = useRef<HTMLElement>(null);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n  const isSkeleton = useSkeletonMode();\n\n  const baseClassName = clsx(styles.codeBlock, isSkeleton && styles.skeleton);\n\n  const id = useId();\n\n  if (!code) {\n    return (\n      <div\n        className={clsx(baseClassName, styles.withChildren, className)}\n        inert={isSkeleton || undefined}\n      >\n        {/* Deliberately class-less: a `flow--` class would make the global\n            reset's `font: inherit` apply and replace the UA monospace\n            metrics. See CodeBlock.module.scss. */}\n        <pre>\n          <code>\n            <SkeletonModeReset>{children}</SkeletonModeReset>\n          </code>\n        </pre>\n      </div>\n    );\n  }\n\n  const heightVariables: React.CSSProperties = {\n    ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n    ...(expandedHeight\n      ? { \"--expanded-max-height\": `${expandedHeight}px` }\n      : {}),\n  };\n\n  /* A height transition needs a length on both ends – `none` does not\n     interpolate. So the full height is measured for the transition and\n     released once it ended, and code that changes later is not clipped. */\n  const toggleFolded = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      setFolded((folded) => !folded);\n      return;\n    }\n\n    const animates = getComputedStyle(editor)\n      .transitionDuration.split(\",\")\n      .some((duration) => parseFloat(duration) > 0);\n\n    if (folded) {\n      setExpandedHeight(animates ? editor.scrollHeight : undefined);\n      setFolded(false);\n    } else {\n      flushSync(() => setExpandedHeight(editor.scrollHeight));\n      // Applies the start height before the folded one replaces it.\n      editor.getBoundingClientRect();\n      setFolded(true);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        baseClassName,\n        maxHeight && styles.truncated,\n        folded && styles.folded,\n        className,\n      )}\n      style={heightVariables}\n      onTransitionEnd={(event) => {\n        if (event.propertyName === \"max-height\") {\n          setExpandedHeight(undefined);\n        }\n      }}\n      inert={isSkeleton || undefined}\n    >\n      {/* The code block is one skeleton surface in the size of its code, so\n          the editor inside renders for real, but invisibly. */}\n      <SkeletonModeReset>\n        <CodeEditor\n          {...rest}\n          value={code}\n          editable={false}\n          copyable={copyable}\n          showLineNumbers={showLineNumbers}\n          showLinterMarkers={false}\n          showCodeFolding={false}\n          showActiveLineMarker={false}\n          isReadOnly\n          onCreateEditor={(view) => {\n            editorRef.current = view.dom;\n\n            if (!truncateLines) {\n              return;\n            }\n\n            const lineHeight = 20;\n            const padding = 12;\n\n            const visibleLines =\n              typeof truncateLines === \"number\" ? truncateLines : 8;\n\n            const totalLines = view.state.doc.lines;\n\n            if (totalLines > visibleLines)\n              setMaxHeight(lineHeight * visibleLines + padding);\n          }}\n          id={id}\n        >\n          {truncateLines && maxHeight && (\n            <div className={clsx(styles.buttonContainer)}>\n              <Button\n                variant=\"plain\"\n                color=\"secondary\"\n                size=\"s\"\n                onPress={toggleFolded}\n                aria-expanded={!folded}\n                aria-controls={id}\n              >\n                {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n              </Button>\n            </div>\n          )}\n        </CodeEditor>\n      </SkeletonModeReset>\n    </div>\n  );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;;AAuCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CACxE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KAAKC,yBAAO,WAAW,cAAcA,yBAAO,QAAQ;CAE1E,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,eAAeA,yBAAO,cAAc,SAAS;EAC7D,OAAO,cAAc,KAAA;EAKrB,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UACE,oBAAC,mBAAD,EAAoB,SAA4B,CAAA,EAC5C,CAAA,EACH,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAaA,yBAAO,WACpB,UAAUA,yBAAO,QACjB,SACF;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EACA,OAAO,cAAc,KAAA;EAIrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAKA,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA,EACK,CAAA;CAChB,CAAA;AAET"}

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/CodeBlock/CodeBlock.module.scss
+// src/components/CodeBlock/CodeBlock.module.scss
 var codeBlock = "flow--code-block";
 var withChildren = "flow--code-block--with-children";
 var truncated = "flow--code-block--truncated";
@@ -17,7 +17,6 @@ var CodeBlock_module_default = {
 	"skeleton-surface-shimmer": "flow--code-block--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--code-block--skeleton-text-shimmer"
 };
-//#endregion
 export { buttonContainer, codeBlock, CodeBlock_module_default as default, folded, skeleton, truncated, withChildren };
 
 //# sourceMappingURL=CodeBlock.module.mjs.map

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

@@ -12,17 +12,17 @@ import { defaultLightTheme } from "./themes/defaultEditorTheme.mjs";
 import { useCodeEditorExtensions } from "./hooks/useCodeEditorExtensions.mjs";
 import { CopyButton } from "../CopyButton/CopyButton.mjs";
 import clsx from "clsx";
-import { useCallback, useId, useState } from "react";
+import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } 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
+// src/components/CodeEditor/CodeEditor.tsx
 /**
 * @flr-generate all
 * @flowStatus new
 */
 var CodeEditor = flowComponent("CodeEditor", (props) => {
-	const { ref, children, className, language, extensions, isReadOnly, isDisabled, 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 { ref, children, className, language, extensions, isReadOnly, isDisabled, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, onChange, onStatistics, 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, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
 	const rootClassName = clsx(wrapperProps.className, CodeEditor_module_default.codeEditor, className);
 	const labelId = useId();
@@ -83,14 +83,48 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 	*/
 	const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);
 	const describedBy = joinIds(hasDescription && descriptionId, controlProps["aria-describedby"]);
-	const contentAttributes = EditorView.contentAttributes.of({
+	/**
+	* CodeMirror reconfigures the editor whenever `extensions`, `basicSetup` or
+	* `onChange` is a new object. All three are stable, so a render with
+	* unchanged props leaves the editor as it is.
+	*/
+	const allExtensions = useMemo(() => [...enabledExtensions, EditorView.contentAttributes.of({
 		...labelledBy ? { "aria-labelledby": labelledBy } : {},
 		...ariaLabel ? { "aria-label": ariaLabel } : {},
 		...describedBy ? { "aria-describedby": describedBy } : {},
 		...isRequired ? { "aria-required": "true" } : {},
 		...isInvalid ? { "aria-invalid": "true" } : {},
 		...isDisabled ? { "aria-disabled": "true" } : {}
+	})], [
+		enabledExtensions,
+		labelledBy,
+		ariaLabel,
+		describedBy,
+		isRequired,
+		isInvalid,
+		isDisabled
+	]);
+	const handlersRef = useRef({
+		onChange,
+		onStatistics
 	});
+	useLayoutEffect(() => {
+		handlersRef.current = {
+			onChange,
+			onStatistics
+		};
+	});
+	const stableOnChange = useCallback((value) => handlersRef.current.onChange(value), []);
+	const stableOnStatistics = useCallback((statistics) => handlersRef.current.onStatistics?.(statistics), []);
+	const highlightActiveLine = showActiveLineMarker && !isDisabled;
+	const basicSetup = useMemo(() => ({
+		highlightActiveLine,
+		highlightActiveLineGutter: highlightActiveLine,
+		autocompletion: false,
+		lineNumbers: false,
+		foldGutter: false,
+		highlightSelectionMatches: false
+	}), [highlightActiveLine]);
 	const localRef = useObjectRef(ref);
 	useMakeFocusable(localRef);
 	const isSkeleton = useSkeletonMode();
@@ -105,14 +139,9 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 	const editor = /* @__PURE__ */ jsxs(CodeMirror, {
 		...rest,
 		value,
-		basicSetup: {
-			highlightActiveLine: showActiveLineMarker && !isDisabled,
-			highlightActiveLineGutter: showActiveLineMarker && !isDisabled,
-			autocompletion: false,
-			lineNumbers: false,
-			foldGutter: false,
-			highlightSelectionMatches: false
-		},
+		onChange: stableOnChange,
+		onStatistics: stableOnStatistics,
+		basicSetup,
 		theme: defaultLightTheme,
 		"data-invalid": isInvalid || void 0,
 		"data-disabled": isDisabled || void 0,
@@ -122,7 +151,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		ref: (codeMirrorRef) => {
 			if (codeMirrorRef?.editor) localRef.current = codeMirrorRef.editor;
 		},
-		extensions: [...enabledExtensions, contentAttributes],
+		extensions: allExtensions,
 		height: height ?? minHeight,
 		children: [copyable && /* @__PURE__ */ jsx(CopyButton, {
 			className: CodeEditor_module_default.copyButton,
@@ -153,7 +182,6 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		})
 	});
 });
-//#endregion
 export { CodeEditor, CodeEditor as default };
 
 //# sourceMappingURL=CodeEditor.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useCallback, useId, useState } from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, 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\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\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 disabled. The code can neither be edited, focused nor\n   * copied.\n   *\n   * @default false\n   */\n  isDisabled?: 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  /**\n   * The language the code is highlighted as. A language the editor does not\n   * know is shown as plain text.\n   */\n  language?: CodeEditorLanguage | (string & {});\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    isDisabled,\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    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * Both are optional. Their refs tell whether they are rendered, so the editor\n   * never references an element that does not exist – a dangling id fails HTML\n   * validators and a11y checks. The callbacks are stable: a new one per render\n   * would detach and re-attach on every render.\n   */\n  const [hasLabel, setHasLabel] = useState(false);\n  const [hasDescription, setHasDescription] = useState(false);\n  const labelRef = useCallback((element: Element | null) => {\n    setHasLabel(!!element);\n  }, []);\n  const descriptionRef = useCallback((element: Element | null) => {\n    setHasDescription(!!element);\n  }, []);\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      ref: labelRef,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      ref: descriptionRef,\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   * Without a label, an `aria-label` names the editor instead.\n   */\n  const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n  const describedBy = joinIds(\n    hasDescription && descriptionId,\n    controlProps[\"aria-describedby\"],\n  );\n\n  const contentAttributes = EditorView.contentAttributes.of({\n    ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n    ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n    ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n  });\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const isSkeleton = useSkeletonMode();\n\n  /* No CodeMirror: one surface, as high as the code in the editor's line\n     height. The children still render, so a label or a field description\n     tunnels out and follows its own skeleton rule. */\n  const skeleton = (\n    <div\n      className={clsx(\n        styles.codeMirror,\n        isReadOnly && styles.readonly,\n        styles.skeleton,\n      )}\n    >\n      <div\n        className={styles.skeletonLines}\n        style={{ height: height ?? minHeight }}\n      >\n        {(value ?? \"\").split(\"\\n\").map((line, index) => (\n          <div key={index}>{line || \" \"}</div>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n\n  const editor = (\n    <CodeMirror\n      {...rest}\n      value={value}\n      basicSetup={{\n        highlightActiveLine: showActiveLineMarker && !isDisabled,\n        highlightActiveLineGutter: showActiveLineMarker && !isDisabled,\n        autocompletion: false,\n        lineNumbers: false,\n        foldGutter: false,\n        highlightSelectionMatches: false,\n      }}\n      theme={defaultLightTheme}\n      data-invalid={isInvalid || undefined}\n      data-disabled={isDisabled || undefined}\n      readOnly={isReadOnly || isDisabled}\n      editable={!isDisabled}\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          isDisabled={isDisabled}\n        />\n      )}\n      {children}\n    </CodeMirror>\n  );\n\n  return (\n    <div\n      className={rootClassName}\n      data-disabled={isDisabled || undefined}\n      inert={isSkeleton || undefined}\n    >\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          {isSkeleton ? skeleton : editor}\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiFA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,KACA,UACA,WACA,UACA,YACA,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,OAAO,EAAE;CAEzC,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KACpB,aAAa,WACbA,0BAAO,YACP,SACF;CAEA,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;;;;;;;CAQ5B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,WAAW,aAAa,YAA4B;EACxD,YAAY,CAAC,CAAC,OAAO;CACvB,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,aAAa,YAA4B;EAC9D,kBAAkB,CAAC,CAAC,OAAO;CAC7B,GAAG,CAAC,CAAC;;;;;;;CAQL,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAS,WAAW;GAAa;EACjD;EACA,kBAAkB;GAChB,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAoB,WAAW;GAAa;EAC5D;CACF;CAEA,MAAM,oBAAoB,wBAAwB,UAAU,YAAY;EACrD;EACU;EACV;EACE;CACrB,CAAC;;;;;;;;CASD,MAAM,aAAa,QAAQ,gBAAgB,YAAY,OAAO;CAC9D,MAAM,cAAc,QAClB,kBAAkB,eAClB,aAAa,mBACf;CAEA,MAAM,oBAAoB,WAAW,kBAAkB,GAAG;EACxD,GAAI,aAAa,EAAE,mBAAmB,WAAW,IAAI,CAAC;EACtD,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;EAC9C,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;CAClD,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,aAAa,gBAAgB;CAKnC,MAAM,WACJ,qBAAC,OAAD;EACE,WAAW,KACTA,0BAAO,YACP,cAAcA,0BAAO,UACrBA,0BAAO,QACT;EALF,UAAA,CAOE,oBAAC,OAAD;GACE,WAAWA,0BAAO;GAClB,OAAO,EAAE,QAAQ,UAAU,UAAU;GAEnC,WAAA,SAAS,GAAA,CAAI,MAAM,IAAI,CAAC,CAAC,KAAK,MAAM,UACpC,oBAAC,OAAD,EAAA,UAAkB,QAAQ,IAAS,GAAzB,KAAyB,CACpC;EACE,CAAA,GACJ,QACE;;CAGP,MAAM,SACJ,qBAAC,YAAD;EACE,GAAI;EACG;EACP,YAAY;GACV,qBAAqB,wBAAwB,CAAC;GAC9C,2BAA2B,wBAAwB,CAAC;GACpD,gBAAgB;GAChB,aAAa;GACb,YAAY;GACZ,2BAA2B;EAC7B;EACA,OAAO;EACP,gBAAc,aAAa,KAAA;EAC3B,iBAAe,cAAc,KAAA;EAC7B,UAAU,cAAc;EACxB,UAAU,CAAC;EACX,WAAW,KAAKA,0BAAO,YAAY,cAAcA,0BAAO,QAAQ;EAChE,MAAM,kBAAkB;GACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;EAErC;EACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;EACpD,QAAQ,UAAU;EAvBpB,UAAA,CAyBG,YACC,oBAAC,YAAD;GACE,WAAWA,0BAAO;GAClB,MAAK;GACL,SAAQ;GACR,MAAM;GACM;EACb,CAAA,GAEF,QACS;;CAGd,OACE,oBAAC,OAAD;EACE,WAAW;EACX,iBAAe,cAAc,KAAA;EAC7B,OAAO,cAAc,KAAA;EAErB,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACG,aAAa,WAAW,OACD,CAAA;IAC1B,oBAAC,uBAAD;KAAuB,IAAG;KAAmB,WAAU;IAAc,CAAA;IACrE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACnB,CAAA;AAET,CAAC"}
+{"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps, Statistics } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport {\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, 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\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\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 disabled. The code can neither be edited, focused nor\n   * copied.\n   *\n   * @default false\n   */\n  isDisabled?: 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  /**\n   * The language the code is highlighted as. A language the editor does not\n   * know is shown as plain text.\n   */\n  language?: CodeEditorLanguage | (string & {});\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    isDisabled,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    onChange,\n    onStatistics,\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    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * Both are optional. Their refs tell whether they are rendered, so the editor\n   * never references an element that does not exist – a dangling id fails HTML\n   * validators and a11y checks. The callbacks are stable: a new one per render\n   * would detach and re-attach on every render.\n   */\n  const [hasLabel, setHasLabel] = useState(false);\n  const [hasDescription, setHasDescription] = useState(false);\n  const labelRef = useCallback((element: Element | null) => {\n    setHasLabel(!!element);\n  }, []);\n  const descriptionRef = useCallback((element: Element | null) => {\n    setHasDescription(!!element);\n  }, []);\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      ref: labelRef,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      ref: descriptionRef,\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   * Without a label, an `aria-label` names the editor instead.\n   */\n  const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n  const describedBy = joinIds(\n    hasDescription && descriptionId,\n    controlProps[\"aria-describedby\"],\n  );\n\n  /**\n   * CodeMirror reconfigures the editor whenever `extensions`, `basicSetup` or\n   * `onChange` is a new object. All three are stable, so a render with\n   * unchanged props leaves the editor as it is.\n   */\n  const allExtensions = useMemo(\n    () => [\n      ...enabledExtensions,\n      EditorView.contentAttributes.of({\n        ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n        ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n        ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n        ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n        ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n        ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n      }),\n    ],\n    [\n      enabledExtensions,\n      labelledBy,\n      ariaLabel,\n      describedBy,\n      isRequired,\n      isInvalid,\n      isDisabled,\n    ],\n  );\n\n  /*\n   * A new `onChange` on every render would reconfigure the editor as well.\n   * CodeMirror's update listener captures `onStatistics` along with it, so both\n   * call the latest handler through a ref.\n   */\n  const handlersRef = useRef({ onChange, onStatistics });\n  useLayoutEffect(() => {\n    handlersRef.current = { onChange, onStatistics };\n  });\n  const stableOnChange = useCallback(\n    (value: string) => handlersRef.current.onChange(value),\n    [],\n  );\n  const stableOnStatistics = useCallback(\n    (statistics: Statistics) => handlersRef.current.onStatistics?.(statistics),\n    [],\n  );\n\n  const highlightActiveLine = showActiveLineMarker && !isDisabled;\n  const basicSetup = useMemo(\n    () => ({\n      highlightActiveLine,\n      highlightActiveLineGutter: highlightActiveLine,\n      autocompletion: false,\n      lineNumbers: false,\n      foldGutter: false,\n      highlightSelectionMatches: false,\n    }),\n    [highlightActiveLine],\n  );\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const isSkeleton = useSkeletonMode();\n\n  /* No CodeMirror: one surface, as high as the code in the editor's line\n     height. The children still render, so a label or a field description\n     tunnels out and follows its own skeleton rule. */\n  const skeleton = (\n    <div\n      className={clsx(\n        styles.codeMirror,\n        isReadOnly && styles.readonly,\n        styles.skeleton,\n      )}\n    >\n      <div\n        className={styles.skeletonLines}\n        style={{ height: height ?? minHeight }}\n      >\n        {(value ?? \"\").split(\"\\n\").map((line, index) => (\n          <div key={index}>{line || \" \"}</div>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n\n  const editor = (\n    <CodeMirror\n      {...rest}\n      value={value}\n      onChange={stableOnChange}\n      onStatistics={stableOnStatistics}\n      basicSetup={basicSetup}\n      theme={defaultLightTheme}\n      data-invalid={isInvalid || undefined}\n      data-disabled={isDisabled || undefined}\n      readOnly={isReadOnly || isDisabled}\n      editable={!isDisabled}\n      className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n      ref={(codeMirrorRef) => {\n        if (codeMirrorRef?.editor) {\n          localRef.current = codeMirrorRef.editor;\n        }\n      }}\n      extensions={allExtensions}\n      height={height ?? minHeight}\n    >\n      {copyable && (\n        <CopyButton\n          className={styles.copyButton}\n          size=\"s\"\n          variant=\"soft\"\n          text={value}\n          isDisabled={isDisabled}\n        />\n      )}\n      {children}\n    </CodeMirror>\n  );\n\n  return (\n    <div\n      className={rootClassName}\n      data-disabled={isDisabled || undefined}\n      inert={isSkeleton || undefined}\n    >\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          {isSkeleton ? skeleton : editor}\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":"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"}

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

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

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { GutterMarker, gutter } from "@uiw/react-codemirror";
-//#region src/components/CodeEditor/extensions/gutterSpacer.ts
+// src/components/CodeEditor/extensions/gutterSpacer.ts
 var EmptyGutterSpacer = class extends GutterMarker {
 	toDOM() {
 		const element = document.createElement("div");
@@ -14,7 +14,6 @@ var gutterSpacer = () => gutter({
 	renderEmptyElements: true,
 	initialSpacer: () => new EmptyGutterSpacer()
 });
-//#endregion
 export { gutterSpacer };
 
 //# sourceMappingURL=gutterSpacer.mjs.map

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

@@ -2,40 +2,52 @@
 /* */
 import supportedCodeEditorLanguages, { isCodeEditorLanguage } from "../languages/index.mjs";
 import { gutterSpacer } from "../extensions/gutterSpacer.mjs";
+import { useMemo } from "react";
 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
+// src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx
 var markerColor = "var(--code-editor--indentation-marker-color)";
-var indentationMarkerColors = {
+var codeIndentationMarkers = indentationMarkers({ colors: {
 	light: markerColor,
 	dark: markerColor,
 	activeLight: markerColor,
 	activeDark: markerColor
-};
+} });
+var noExtensions = [];
 /** @internal */
-var useCodeEditorExtensions = (language, extensions = [], options = {
+var useCodeEditorExtensions = (language, extensions = noExtensions, 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({ colors: indentationMarkerColors }));
-	if (language && isCodeEditorLanguage(language)) supportedCodeEditorLanguages[language]?.map((loader) => extensions.push(loader()));
-	return extensions;
+	const { showCodeFolding, showCodeIndentationMakers, showLineNumbers, showLinterMarkers } = options;
+	return useMemo(() => {
+		const enabledExtensions = [...extensions];
+		if (showLineNumbers) enabledExtensions.push(lineNumbers());
+		if (showCodeFolding) enabledExtensions.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 (showLinterMarkers) enabledExtensions.push(lintGutter());
+		if (showLineNumbers && (!showCodeFolding || !showLinterMarkers)) enabledExtensions.push(gutterSpacer());
+		if (showCodeIndentationMakers) enabledExtensions.push(codeIndentationMarkers);
+		if (language && isCodeEditorLanguage(language)) for (const loader of supportedCodeEditorLanguages[language] ?? []) enabledExtensions.push(loader());
+		return enabledExtensions;
+	}, [
+		language,
+		extensions,
+		showCodeFolding,
+		showCodeIndentationMakers,
+		showLineNumbers,
+		showLinterMarkers
+	]);
 };
-//#endregion
 export { useCodeEditorExtensions };
 
 //# sourceMappingURL=useCodeEditorExtensions.mjs.map

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

@@ -1 +1 @@
-{"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  isCodeEditorLanguage,\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/*\n * Every slot gets the same color: the library picks between its light and dark\n * one by CodeMirror's dark theme flag, which Flow's theme never sets, and the\n * active block needs no color of its own.\n */\nconst markerColor = \"var(--code-editor--indentation-marker-color)\";\nconst indentationMarkerColors = {\n  light: markerColor,\n  dark: markerColor,\n  activeLight: markerColor,\n  activeDark: markerColor,\n};\n\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?: string,\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({ colors: indentationMarkerColors }));\n  }\n\n  if (language && isCodeEditorLanguage(language)) {\n    supportedCodeEditorLanguages[language]?.map((loader) =>\n      extensions.push(loader()),\n    );\n  }\n\n  return extensions;\n};\n"],"mappings":";;;;;;;;;AAcA,IAAM,cAAc;AACpB,IAAM,0BAA0B;CAC9B,OAAO;CACP,MAAM;CACN,aAAa;CACb,YAAY;AACd;;AAoCA,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,EAAE,QAAQ,wBAAwB,CAAC,CAAC;CAGzE,IAAI,YAAY,qBAAqB,QAAQ,GAC3C,6BAA6B,SAAS,EAAE,KAAK,WAC3C,WAAW,KAAK,OAAO,CAAC,CAC1B;CAGF,OAAO;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  isCodeEditorLanguage,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\nimport { useMemo } from \"react\";\n\n/*\n * Every slot gets the same color: the library picks between its light and dark\n * one by CodeMirror's dark theme flag, which Flow's theme never sets, and the\n * active block needs no color of its own.\n */\nconst markerColor = \"var(--code-editor--indentation-marker-color)\";\n\n/*\n * Created once: every call brings a new style module along, and CodeMirror\n * never unmounts a style module – one per render grows the document's styles.\n */\nconst codeIndentationMarkers = indentationMarkers({\n  colors: {\n    light: markerColor,\n    dark: markerColor,\n    activeLight: markerColor,\n    activeDark: markerColor,\n  },\n});\n\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\nconst noExtensions: Extension[] = [];\n\n/** @internal */\nexport const useCodeEditorExtensions = (\n  language?: string,\n  extensions: Extension[] = noExtensions,\n  options: CodeEditorSetup = {\n    showCodeFolding: true,\n    showCodeIndentationMakers: true,\n    showLineNumbers: true,\n    showLinterMarkers: true,\n  },\n): Extension[] => {\n  const {\n    showCodeFolding,\n    showCodeIndentationMakers,\n    showLineNumbers,\n    showLinterMarkers,\n  } = options;\n\n  return useMemo(() => {\n    const enabledExtensions = [...extensions];\n\n    if (showLineNumbers) {\n      enabledExtensions.push(lineNumbers());\n    }\n\n    if (showCodeFolding) {\n      enabledExtensions.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 (showLinterMarkers) {\n      enabledExtensions.push(lintGutter());\n    }\n\n    if (showLineNumbers && (!showCodeFolding || !showLinterMarkers)) {\n      enabledExtensions.push(gutterSpacer());\n    }\n\n    if (showCodeIndentationMakers) {\n      enabledExtensions.push(codeIndentationMarkers);\n    }\n\n    if (language && isCodeEditorLanguage(language)) {\n      for (const loader of supportedCodeEditorLanguages[language] ?? []) {\n        enabledExtensions.push(loader());\n      }\n    }\n\n    return enabledExtensions;\n  }, [\n    language,\n    extensions,\n    showCodeFolding,\n    showCodeIndentationMakers,\n    showLineNumbers,\n    showLinterMarkers,\n  ]);\n};\n"],"mappings":";;;;;;;;;;AAeA,IAAM,cAAc;AAMpB,IAAM,yBAAyB,mBAAmB,EAChD,QAAQ;CACN,OAAO;CACP,MAAM;CACN,aAAa;CACb,YAAY;AACd,EACF,CAAC;AAmCD,IAAM,eAA4B,CAAC;;AAGnC,IAAa,2BACX,UACA,aAA0B,cAC1B,UAA2B;CACzB,iBAAiB;CACjB,2BAA2B;CAC3B,iBAAiB;CACjB,mBAAmB;AACrB,MACgB;CAChB,MAAM,EACJ,iBACA,2BACA,iBACA,sBACE;CAEJ,OAAO,cAAc;EACnB,MAAM,oBAAoB,CAAC,GAAG,UAAU;EAExC,IAAI,iBACF,kBAAkB,KAAK,YAAY,CAAC;EAGtC,IAAI,iBACF,kBAAkB,KAChB,WAAW,EACT,YAAY,SAAS;GACnB,MAAM,UAAU,SAAS,cAAc,MAAM;GAC7C,QAAQ,UAAU,IAAI,eAAe;GACrC,QAAQ,UAAU,IAChB,OAAO,uBAAuB,sBAChC;GACA,QAAQ,YAAY,OAAO,MAAM;GACjC,OAAO;EACT,EACF,CAAC,CACH;EAGF,IAAI,mBACF,kBAAkB,KAAK,WAAW,CAAC;EAGrC,IAAI,oBAAoB,CAAC,mBAAmB,CAAC,oBAC3C,kBAAkB,KAAK,aAAa,CAAC;EAGvC,IAAI,2BACF,kBAAkB,KAAK,sBAAsB;EAG/C,IAAI,YAAY,qBAAqB,QAAQ,GAC3C,KAAK,MAAM,UAAU,6BAA6B,aAAa,CAAC,GAC9D,kBAAkB,KAAK,OAAO,CAAC;EAInC,OAAO;CACT,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}

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

@@ -1,7 +1,7 @@
 "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
+import { LRParser } from "../../../../../../../node_modules/.pnpm/@lezer_lr@1.4.11/node_modules/@lezer/lr/dist/index.mjs";
+// 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",
@@ -16,7 +16,6 @@ var parser = LRParser.deserialize({
 	topRules: { "DotenvFile": [0, 1] },
 	tokenPrec: 0
 });
-//#endregion
 export { parser };
 
 //# sourceMappingURL=dotEnv.mjs.map

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

@@ -3,7 +3,7 @@ import { parser } from "./dotEnv.mjs";
 import { HighlightStyle, LRLanguage, LanguageSupport, syntaxHighlighting, syntaxTree } from "@codemirror/language";
 import { linter } from "@codemirror/lint";
 import { styleTags, tags } from "@lezer/highlight";
-//#region src/components/CodeEditor/languages/dotEnv/index.tsx
+// src/components/CodeEditor/languages/dotEnv/index.tsx
 var definedStyle = HighlightStyle.define([{
 	tag: tags.variableName,
 	fontWeight: "bold"
@@ -78,7 +78,6 @@ var language = [
 		return diagnostics;
 	})
 ];
-//#endregion
 export { language as default };
 
 //# sourceMappingURL=index.mjs.map

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

@@ -2,7 +2,7 @@
 import language from "./dotEnv/index.mjs";
 import { langs } from "@uiw/codemirror-extensions-langs";
 import "@codemirror/language";
-//#region src/components/CodeEditor/languages/index.ts
+// src/components/CodeEditor/languages/index.ts
 var supportedCodeEditorLanguages = {};
 Object.keys(langs).forEach((key) => {
 	const languageKey = key;
@@ -10,7 +10,6 @@ Object.keys(langs).forEach((key) => {
 });
 supportedCodeEditorLanguages.dotEnv = language;
 var isCodeEditorLanguage = (language) => Object.hasOwn(supportedCodeEditorLanguages, language);
-//#endregion
 export { supportedCodeEditorLanguages as default, isCodeEditorLanguage };
 
 //# sourceMappingURL=index.mjs.map

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

@@ -2,7 +2,7 @@
 /* */
 import { tags } from "@lezer/highlight";
 import { githubLightInit } from "@uiw/codemirror-theme-github";
-//#region src/components/CodeEditor/themes/defaultEditorTheme.ts
+// src/components/CodeEditor/themes/defaultEditorTheme.ts
 var defaultLightTheme = githubLightInit({
 	theme: "light",
 	settings: {
@@ -61,7 +61,6 @@ var defaultLightTheme = githubLightInit({
 		}
 	]
 });
-//#endregion
 export { defaultLightTheme };
 
 //# sourceMappingURL=defaultEditorTheme.mjs.map

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

@@ -4,7 +4,7 @@ import { alphaColors, statusTypes } from "../../lib/types/props.mjs";
 import Color_module_default from "./Color.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Color/Color.tsx
+// src/components/Color/Color.tsx
 var flowColors = [
 	"blue",
 	"violet",
@@ -27,7 +27,6 @@ var Color = (props) => {
 		children
 	});
 };
-//#endregion
 export { Color, Color as default };
 
 //# sourceMappingURL=Color.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Color/Color.module.scss
+// src/components/Color/Color.module.scss
 var blue = "flow--color--blue";
 var violet = "flow--color--violet";
 var teal = "flow--color--teal";
@@ -27,7 +27,6 @@ var Color_module_default = {
 	"light-static": "flow--color--light-static",
 	"dark-static": "flow--color--dark-static"
 };
-//#endregion
 export { blue, danger, dark, Color_module_default as default, info, light, lilac, success, teal, unavailable, violet, warning };
 
 //# sourceMappingURL=Color.module.mjs.map