@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/Card-LU1aWO7U.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-LU1aWO7U.js","names":["React"],"sources":["../src/ds/components/Card/Card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\nimport { surfaceRimFocus } from '@/ds/primitives/form-element';\nimport { raisedSurfaceStyle, surfaceStateLayerStyle } from '@/ds/primitives/raised-surface';\nimport { focusRingInset } from '@/ds/primitives/transitions';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { cn } from '@/lib/utils';\n\nconst cardVariants = cva(\n  cn(raisedSurfaceStyle, 'rounded-xl transition-all duration-normal ease-out-custom motion-reduce:transition-none'),\n  {\n    variants: {\n      elevation: {\n        flat: 'shadow-none',\n        raised: '',\n      },\n      interactive: {\n        true: cn(surfaceStateLayerStyle, surfaceRimFocus, 'cursor-pointer active:scale-99'),\n        false: '',\n      },\n    },\n    compoundVariants: [{ elevation: 'flat', interactive: true, class: focusRingInset }],\n    defaultVariants: {\n      elevation: 'raised',\n      interactive: false,\n    },\n  },\n);\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof cardVariants> & {\n    as?: React.ElementType;\n  };\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, elevation, interactive, as, ...props }, ref) => {\n    const Component = as || (interactive ? 'button' : 'div');\n\n    return (\n      <Component\n        ref={ref}\n        type={Component === 'button' ? 'button' : undefined}\n        className={cn(cardVariants({ elevation, interactive }), className)}\n        {...props}\n      />\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport type CardLinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> &\n  Omit<VariantProps<typeof cardVariants>, 'interactive'> & {\n    href: string;\n    LinkComponent?: LinkComponent;\n  };\n\nexport function CardLink({ className, elevation, LinkComponent: Link = 'a', ...props }: CardLinkProps) {\n  return <Link className={cn(cardVariants({ elevation, interactive: true }), className)} {...props} />;\n}\n\n// Card Header component\nexport type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex flex-col space-y-1.5 px-3 py-1', className)} {...props} />\n));\nCardHeader.displayName = 'CardHeader';\n\n// Card Title component\nexport type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(({ className, ...props }, ref) => (\n  <h3 ref={ref} className={cn('text-subheading text-foreground', className)} {...props} />\n));\nCardTitle.displayName = 'CardTitle';\n\n// Card Description component\nexport type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn('text-caption text-muted-foreground', className)} {...props} />\n  ),\n);\nCardDescription.displayName = 'CardDescription';\n\n// Card Content component\nconst cardContentVariants = cva('', {\n  variants: {\n    density: {\n      default: 'p-3',\n      compact: 'p-2',\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n  },\n});\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardContentVariants>;\n\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, density, ...props }, ref) => (\n    <div ref={ref} className={cn(cardContentVariants({ density }), className)} {...props} />\n  ),\n);\nCardContent.displayName = 'CardContent';\n\n// Card Footer component\nexport type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center p-3 pt-0', className)} {...props} />\n));\nCardFooter.displayName = 'CardFooter';\n"],"mappings":";;;;;;;;AASA,IAAM,eAAe,IACnB,GAAG,oBAAoB,yFAAyF,GAChH;CACE,UAAU;EACR,WAAW;GACT,MAAM;GACN,QAAQ;EACV;EACA,aAAa;GACX,MAAM,GAAG,wBAAwB,iBAAiB,gCAAgC;GAClF,OAAO;EACT;CACF;CACA,kBAAkB,CAAC;EAAE,WAAW;EAAQ,aAAa;EAAM,OAAO;CAAe,CAAC;CAClF,iBAAiB;EACf,WAAW;EACX,aAAa;CACf;AACF,CACF;AAOA,IAAa,OAAOA,QAAM,YACvB,EAAE,WAAW,WAAW,aAAa,IAAI,GAAG,SAAS,QAAQ;CAC5D,MAAM,YAAY,OAAO,cAAc,WAAW;CAElD,OACE,oBAAC,WAAD;EACO;EACL,MAAM,cAAc,WAAW,WAAW,KAAA;EAC1C,WAAW,GAAG,aAAa;GAAE;GAAW;EAAY,CAAC,GAAG,SAAS;EACjE,GAAI;CACL,CAAA;AAEL,CACF;AACA,KAAK,cAAc;AAQnB,SAAgB,SAAS,EAAE,WAAW,WAAW,eAAe,OAAO,KAAK,GAAG,SAAwB;CACrG,OAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,aAAa;GAAE;GAAW,aAAa;EAAK,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrG;AAKA,IAAa,aAAaA,QAAM,YAA6C,EAAE,WAAW,GAAG,SAAS,QACpG,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,uCAAuC,SAAS;CAAG,GAAI;AAAQ,CAAA,CAC7F;AACD,WAAW,cAAc;AAKzB,IAAa,YAAYA,QAAM,YAAgD,EAAE,WAAW,GAAG,SAAS,QACtG,oBAAC,MAAD;CAAS;CAAK,WAAW,GAAG,mCAAmC,SAAS;CAAG,GAAI;AAAQ,CAAA,CACxF;AACD,UAAU,cAAc;AAKxB,IAAa,kBAAkBA,QAAM,YAClC,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC,KAAD;CAAQ;CAAK,WAAW,GAAG,sCAAsC,SAAS;CAAG,GAAI;AAAQ,CAAA,CAE7F;AACA,gBAAgB,cAAc;AAG9B,IAAM,sBAAsB,IAAI,IAAI;CAClC,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAID,IAAa,cAAcA,QAAM,YAC9B,EAAE,WAAW,SAAS,GAAG,SAAS,QACjC,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oBAAoB,EAAE,QAAQ,CAAC,GAAG,SAAS;CAAG,GAAI;AAAQ,CAAA,CAE3F;AACA,YAAY,cAAc;AAK1B,IAAa,aAAaA,QAAM,YAA6C,EAAE,WAAW,GAAG,SAAS,QACpG,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,8BAA8B,SAAS;CAAG,GAAI;AAAQ,CAAA,CACpF;AACD,WAAW,cAAc"}

package/dist/CodeEditor-CLzs0yVc.cjs

@@ -1,515 +0,0 @@
-const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
-const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_formatting = require("./formatting-BcPMU2NY.cjs");
-const require_dist = require("./dist-ClDKPtVq.cjs");
-const require_primitives_form_element = require("./primitives/form-element.cjs.js");
-const require_Button = require("./Button-DLcMcuUL.cjs");
-const require_field_control_aria = require("./field-control-aria-Dw0_ObOU.cjs");
-const require_toast_api = require("./toast-api-qtkOucy2.cjs");
-const require_copy_button = require("./copy-button-DJAQ6_3o.cjs");
-const require_highlight = require("./highlight-D0VoR2qO.cjs");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let lucide_react = require("lucide-react");
-let _codemirror_lang_json = require("@codemirror/lang-json");
-let _codemirror_lang_markdown = require("@codemirror/lang-markdown");
-let _codemirror_language = require("@codemirror/language");
-let _codemirror_state = require("@codemirror/state");
-let _codemirror_view = require("@codemirror/view");
-let _uiw_react_codemirror = require("@uiw/react-codemirror");
-_uiw_react_codemirror = require_rolldown_runtime.__toESM(_uiw_react_codemirror, 1);
-let _codemirror_autocomplete = require("@codemirror/autocomplete");
-// src/ds/components/CodeEditor/code-languages.ts
-function legacy(parser) {
-	return new _codemirror_language.LanguageSupport(_codemirror_language.StreamLanguage.define(parser));
-}
-/**
-* A minimal subset of CodeMirror language descriptions used for fenced code
-* blocks inside markdown. Mirrors the relevant entries from
-* `@codemirror/language-data` but only the languages we actually support, so
-* bundlers don't have to emit a chunk for every known language.
-*/
-var codeLanguages = [
-	_codemirror_language.LanguageDescription.of({
-		name: "JavaScript",
-		alias: [
-			"ecmascript",
-			"js",
-			"node"
-		],
-		extensions: [
-			"js",
-			"mjs",
-			"cjs"
-		],
-		load() {
-			return import("@codemirror/lang-javascript").then((m) => m.javascript());
-		}
-	}),
-	_codemirror_language.LanguageDescription.of({
-		name: "JSON",
-		alias: ["json5"],
-		extensions: ["json", "map"],
-		load() {
-			return import("@codemirror/lang-json").then((m) => m.json());
-		}
-	}),
-	_codemirror_language.LanguageDescription.of({
-		name: "JSX",
-		extensions: ["jsx"],
-		load() {
-			return import("@codemirror/lang-javascript").then((m) => m.javascript({ jsx: true }));
-		}
-	}),
-	_codemirror_language.LanguageDescription.of({
-		name: "Markdown",
-		extensions: [
-			"md",
-			"markdown",
-			"mkd"
-		],
-		load() {
-			return import("@codemirror/lang-markdown").then((m) => m.markdown());
-		}
-	}),
-	_codemirror_language.LanguageDescription.of({
-		name: "TSX",
-		extensions: ["tsx"],
-		load() {
-			return import("@codemirror/lang-javascript").then((m) => m.javascript({
-				jsx: true,
-				typescript: true
-			}));
-		}
-	}),
-	_codemirror_language.LanguageDescription.of({
-		name: "TypeScript",
-		alias: ["ts"],
-		extensions: [
-			"ts",
-			"mts",
-			"cts"
-		],
-		load() {
-			return import("@codemirror/lang-javascript").then((m) => m.javascript({ typescript: true }));
-		}
-	}),
-	_codemirror_language.LanguageDescription.of({
-		name: "Shell",
-		alias: [
-			"bash",
-			"sh",
-			"zsh"
-		],
-		extensions: [
-			"sh",
-			"ksh",
-			"bash"
-		],
-		filename: /^PKGBUILD$/,
-		load() {
-			return import("@codemirror/legacy-modes/mode/shell").then((m) => legacy(m.shell));
-		}
-	})
-];
-// src/ds/components/CodeEditor/fold-gutter-extension.ts
-var foldTheme = _codemirror_view.EditorView.theme({
-	".cm-foldGutter .cm-gutterElement": {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		padding: "0 4px"
-	},
-	".cm-fold-marker": {
-		display: "inline-flex",
-		alignItems: "center",
-		justifyContent: "center",
-		width: "12px",
-		height: "12px",
-		boxSizing: "border-box",
-		border: "1px solid var(--border)",
-		borderRadius: "2px",
-		color: "var(--muted-foreground)",
-		fontSize: "var(--text-caption)",
-		lineHeight: "1",
-		cursor: "pointer",
-		userSelect: "none"
-	},
-	".cm-fold-marker:hover": {
-		background: "var(--fill-hover)",
-		color: "var(--foreground)"
-	},
-	".cm-foldPlaceholder": {
-		background: "var(--fill-hover)",
-		border: "1px solid var(--border)",
-		color: "var(--muted-foreground)",
-		borderRadius: "2px",
-		padding: "0 4px",
-		margin: "0 2px"
-	}
-});
-/** Fold gutter with a square −/+ toggle next to each foldable line, styled with design tokens. */
-var codeFoldGutter = [(0, _codemirror_language.foldGutter)({ markerDOM: (open) => {
-	const marker = document.createElement("span");
-	marker.className = "cm-fold-marker";
-	marker.dataset.state = open ? "open" : "closed";
-	marker.title = open ? "Fold" : "Unfold";
-	marker.textContent = open ? "−" : "+";
-	return marker;
-} }), foldTheme];
-// src/ds/components/CodeEditor/schema-to-variables.ts
-/**
-* Flattens a JSON Schema into a list of variable completions for autocomplete.
-* Recursively extracts property paths using dot-notation.
-*
-* @param schema - The JSON Schema to flatten
-* @param maxDepth - Maximum recursion depth (default: 5)
-* @returns Array of variable completions
-*
-* @example
-* ```ts
-* const schema = {
-*   type: 'object',
-*   properties: {
-*     user: {
-*       type: 'object',
-*       properties: {
-*         name: { type: 'string' },
-*         email: { type: 'string' }
-*       }
-*     }
-*   }
-* };
-*
-* flattenSchemaToVariables(schema);
-* // Returns:
-* // [
-* //   { path: 'user', label: 'user', type: 'object' },
-* //   { path: 'user.name', label: 'user.name', type: 'string' },
-* //   { path: 'user.email', label: 'user.email', type: 'string' }
-* // ]
-* ```
-*/
-function flattenSchemaToVariables(schema, maxDepth = 5) {
-	if (!schema?.properties) return [];
-	const results = [];
-	function processProperty(property, path, depth) {
-		if (depth > maxDepth) return;
-		const type = Array.isArray(property.type) ? property.type.join(" | ") : property.type;
-		results.push({
-			path,
-			label: path,
-			description: property.description ?? property.title,
-			type
-		});
-		if (property.properties) for (const [key, nestedProperty] of Object.entries(property.properties)) processProperty(nestedProperty, `${path}.${key}`, depth + 1);
-		if (property.items?.properties) for (const [key, itemProperty] of Object.entries(property.items.properties)) processProperty(itemProperty, `${path}[].${key}`, depth + 1);
-	}
-	for (const [key, property] of Object.entries(schema.properties)) processProperty(property, key, 1);
-	return results;
-}
-// src/ds/components/CodeEditor/variable-autocomplete-extension.ts
-/**
-* Creates a CodeMirror autocomplete extension for {{variable}} placeholders.
-* Triggers when the user types `{{` and shows suggestions derived from the schema.
-*
-* @param schema - JSON Schema to derive variable suggestions from
-* @returns CodeMirror Extension that provides variable autocomplete
-*
-* @example
-* ```tsx
-* const schema = {
-*   type: 'object',
-*   properties: {
-*     user: { type: 'object', properties: { name: { type: 'string' } } }
-*   }
-* };
-*
-* <CodeMirror extensions={[createVariableAutocomplete(schema)]} />
-* // Typing "{{" will show: user, user.name
-* ```
-*/
-function createVariableAutocomplete(schema) {
-	const variables = flattenSchemaToVariables(schema);
-	return (0, _codemirror_autocomplete.autocompletion)({
-		override: [createVariableCompletionSource(variables)],
-		defaultKeymap: true,
-		closeOnBlur: true,
-		icons: false
-	});
-}
-/**
-* Creates a completion source function for CodeMirror's autocompletion.
-*/
-function createVariableCompletionSource(variables) {
-	return (context) => {
-		const match = context.state.sliceDoc(Math.max(0, context.pos - 50), context.pos).match(/\{\{([a-zA-Z0-9_.\[\]]*)?$/);
-		if (!match) return null;
-		const prefix = match[1] ?? "";
-		const startPos = context.pos - prefix.length;
-		const filteredVariables = prefix ? variables.filter((v) => v.path.toLowerCase().startsWith(prefix.toLowerCase())) : variables;
-		if (filteredVariables.length === 0) return null;
-		return {
-			from: startPos,
-			options: filteredVariables.map((variable) => ({
-				label: variable.path,
-				displayLabel: variable.path,
-				detail: variable.type,
-				info: variable.description,
-				apply: (view, completion, from, to) => {
-					const identifierEnd = to + (view.state.sliceDoc(to).match(/^[a-zA-Z0-9_.\[\]]*/)?.[0].length ?? 0);
-					const hasClosingBraces = view.state.sliceDoc(identifierEnd, identifierEnd + 2) === "}}";
-					const end = hasClosingBraces ? identifierEnd : to;
-					const insertText = hasClosingBraces ? completion.label : `${completion.label}}}`;
-					view.dispatch({
-						changes: {
-							from,
-							to: end,
-							insert: insertText
-						},
-						selection: { anchor: from + insertText.length }
-					});
-				}
-			})),
-			validFor: /^[a-zA-Z0-9_.\[\]]*$/
-		};
-	};
-}
-// src/ds/components/CodeEditor/variable-highlight-extension.ts
-/**
-* Regex pattern to match variable placeholders like {{variableName}} or {{user.name}}
-* Matches: {{ followed by a valid identifier path (with optional dot notation), then }}
-*/
-var VARIABLE_PATTERN = /\{\{([a-zA-Z_][a-zA-Z0-9_]*(?:\.[a-zA-Z_][a-zA-Z0-9_]*)*)\}\}/g;
-var variableDecoration = _codemirror_view.Decoration.mark({ class: "cm-variable-highlight" });
-var variableMatcher = new _codemirror_view.MatchDecorator({
-	regexp: VARIABLE_PATTERN,
-	decoration: () => variableDecoration
-});
-/**
-* CodeMirror extension that highlights {{variableName}} patterns
-* with orange color and semibold weight
-*/
-var variableHighlight = _codemirror_view.ViewPlugin.fromClass(class {
-	decorations;
-	constructor(view) {
-		this.decorations = variableMatcher.createDeco(view);
-	}
-	update(update) {
-		this.decorations = variableMatcher.updateDeco(update, this.decorations);
-	}
-}, { decorations: (v) => v.decorations });
-// src/ds/components/CodeEditor/code-editor.tsx
-/**
-* The single CodeMirror theme for every editor. Chrome and syntax colors come
-* from CSS variables that flip under `.dark`, and syntax roles use the same
-* `syntaxHighlighter` as the read-only `<Code>` viewer, so editors and viewers
-* look identical in both modes.
-*/
-function buildCodemirrorTheme(font) {
-	return [_codemirror_view.EditorView.theme({
-		"&": {
-			backgroundColor: "transparent",
-			color: "var(--foreground)",
-			fontSize: "var(--text-body-sm)"
-		},
-		"&.cm-editor .cm-scroller": { fontFamily: `var(--font-${font})` },
-		".cm-gutters": {
-			backgroundColor: "transparent",
-			color: "var(--placeholder)",
-			borderRight: "none"
-		},
-		".cm-content": {
-			color: "var(--foreground)",
-			caretColor: "var(--foreground)"
-		},
-		".cm-activeLine": { backgroundColor: "transparent" },
-		".cm-lineNumbers .cm-gutterElement": { color: "var(--placeholder)" },
-		".cm-activeLineGutter": {
-			backgroundColor: "transparent",
-			color: "var(--muted-foreground)"
-		},
-		".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--foreground)" },
-		"&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection": { background: "var(--info-edge) !important" },
-		".cm-tooltip-autocomplete": {
-			backgroundColor: "var(--background)",
-			border: "1px solid var(--border)",
-			borderRadius: "6px",
-			boxShadow: "var(--elevation-overlay)"
-		},
-		".cm-tooltip-autocomplete > ul": { fontFamily: "var(--font-mono)" },
-		".cm-completionLabel": { color: "var(--foreground)" },
-		".cm-completionDetail": {
-			color: "var(--muted-foreground)",
-			fontSize: "var(--text-caption)",
-			marginLeft: "auto",
-			paddingLeft: "12px"
-		},
-		".cm-completionInfo": {
-			backgroundColor: "var(--background)",
-			border: "1px solid var(--border)",
-			color: "var(--muted-foreground)",
-			padding: "8px 12px"
-		},
-		".cm-completionIcon": { display: "none" },
-		"ul.cm-completionList li[aria-selected]": {
-			backgroundColor: "var(--fill-hover)",
-			color: "var(--foreground)"
-		},
-		".cm-line .cm-variable-highlight": {
-			color: "var(--warning-foreground) !important",
-			fontWeight: "500"
-		}
-	}), (0, _codemirror_language.syntaxHighlighting)(require_highlight.syntaxHighlighter)];
-}
-var useCodemirrorTheme = (font = "mono") => {
-	return (0, react.useMemo)(() => buildCodemirrorTheme(font), [font]);
-};
-var codeEditorVariants = require_dist.cva(require_utils.cn("relative overflow-hidden font-mono outline-hidden focus-within:outline-hidden focus:outline-hidden", "transition-colors duration-normal ease-out-custom"), {
-	variants: { variant: {
-		default: require_utils.cn(require_primitives_form_element.inputSurfaceAndFocusWithinStyle, "rounded-md p-1", require_primitives_form_element.fieldErrorRimWithin),
-		embedded: "rounded-none border-none bg-transparent p-0"
-	} },
-	defaultVariants: { variant: "default" }
-});
-var editorFocusExtensions = [_codemirror_state.Prec.highest(_codemirror_view.EditorView.editorAttributes.of({ style: "outline: none" })), _codemirror_state.Prec.highest(_codemirror_view.EditorView.theme({
-	"&": { outline: "none" },
-	"&.cm-focused": { outline: "none" },
-	".cm-scroller": { outline: "none" },
-	".cm-content": { outline: "none" },
-	".cm-content:focus": { outline: "none" }
-}))];
-var CodeEditor = (0, react.forwardRef)(({ data, value, onChange, showCopyButton = true, showFormatButton = false, className, language = "json", font = "mono", highlightVariables = false, placeholder, schema, autoFocus, lineNumbers = true, lineWrapping = true, editable, extensions: extraExtensions, variant, id, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledByProp, "aria-describedby": ariaDescribedByProp, "aria-invalid": ariaInvalidProp, ...props }, ref) => {
-	const fieldAria = require_field_control_aria.useFieldControlAria({ "aria-label": ariaLabelProp });
-	const ariaLabel = ariaLabelProp ?? "Code editor";
-	const controlId = id ?? fieldAria.id;
-	const ariaLabelledBy = ariaLabelledByProp ?? fieldAria["aria-labelledby"];
-	const ariaDescribedBy = ariaDescribedByProp ?? fieldAria["aria-describedby"];
-	const ariaInvalid = ariaInvalidProp ?? fieldAria["aria-invalid"];
-	const theme = useCodemirrorTheme(font);
-	const formattedCode = data ? JSON.stringify(data, null, 2) : value ?? "";
-	const canFormat = showFormatButton && language === "json" && editable !== false && Boolean(onChange);
-	const handleFormat = async () => {
-		try {
-			onChange?.((await require_formatting.formatJSON(formattedCode)).trimEnd());
-		} catch {
-			require_toast_api.toast.error("Can’t format: the JSON is invalid");
-		}
-	};
-	const extensions = (0, react.useMemo)(() => {
-		const contentAttributes = { "aria-label": ariaLabel };
-		if (controlId) contentAttributes.id = controlId;
-		if (ariaLabelledBy) contentAttributes["aria-labelledby"] = ariaLabelledBy;
-		if (ariaDescribedBy) contentAttributes["aria-describedby"] = ariaDescribedBy;
-		if (ariaInvalid !== void 0) contentAttributes["aria-invalid"] = String(ariaInvalid);
-		const exts = [
-			...editorFocusExtensions,
-			_codemirror_view.EditorView.contentAttributes.of(contentAttributes),
-			codeFoldGutter
-		];
-		if (lineWrapping) exts.push(_codemirror_view.EditorView.lineWrapping);
-		if (language === "json") exts.push(_codemirror_lang_json.jsonLanguage);
-		else if (language === "markdown") exts.push((0, _codemirror_lang_markdown.markdown)({
-			base: _codemirror_lang_markdown.markdownLanguage,
-			codeLanguages
-		}));
-		if (highlightVariables && language === "markdown") exts.push(variableHighlight);
-		if (schema && language === "markdown") exts.push(createVariableAutocomplete(schema));
-		if (editable === false) exts.push(_codemirror_state.EditorState.readOnly.of(true));
-		if (extraExtensions) exts.push(...extraExtensions);
-		return exts;
-	}, [
-		extraExtensions,
-		language,
-		highlightVariables,
-		schema,
-		editable,
-		lineWrapping,
-		controlId,
-		ariaLabel,
-		ariaLabelledBy,
-		ariaDescribedBy,
-		ariaInvalid
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_utils.cn(codeEditorVariants({ variant }), className),
-		...props,
-		children: [(showCopyButton || canFormat) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "absolute top-2 right-2 z-20 flex gap-1",
-			children: [canFormat && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
-				type: "button",
-				size: "icon-sm",
-				tooltip: "Format JSON",
-				"aria-label": "Format JSON",
-				onClick: handleFormat,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Braces, {})
-			}), showCopyButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_copy_button.CopyButton, { content: formattedCode })]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_uiw_react_codemirror.default, {
-			ref,
-			value: formattedCode,
-			theme,
-			extensions,
-			onChange,
-			editable,
-			"aria-label": ariaLabel,
-			placeholder,
-			height: "100%",
-			style: { height: "100%" },
-			autoFocus,
-			basicSetup: {
-				lineNumbers,
-				foldGutter: false
-			}
-		})]
-	});
-});
-Object.defineProperty(exports, "CodeEditor", {
-	enumerable: true,
-	get: function() {
-		return CodeEditor;
-	}
-});
-Object.defineProperty(exports, "VARIABLE_PATTERN", {
-	enumerable: true,
-	get: function() {
-		return VARIABLE_PATTERN;
-	}
-});
-Object.defineProperty(exports, "codeFoldGutter", {
-	enumerable: true,
-	get: function() {
-		return codeFoldGutter;
-	}
-});
-Object.defineProperty(exports, "codeLanguages", {
-	enumerable: true,
-	get: function() {
-		return codeLanguages;
-	}
-});
-Object.defineProperty(exports, "createVariableAutocomplete", {
-	enumerable: true,
-	get: function() {
-		return createVariableAutocomplete;
-	}
-});
-Object.defineProperty(exports, "flattenSchemaToVariables", {
-	enumerable: true,
-	get: function() {
-		return flattenSchemaToVariables;
-	}
-});
-Object.defineProperty(exports, "useCodemirrorTheme", {
-	enumerable: true,
-	get: function() {
-		return useCodemirrorTheme;
-	}
-});
-Object.defineProperty(exports, "variableHighlight", {
-	enumerable: true,
-	get: function() {
-		return variableHighlight;
-	}
-});
-
-//# sourceMappingURL=CodeEditor-CLzs0yVc.cjs.map

package/dist/CodeEditor-CLzs0yVc.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeEditor-CLzs0yVc.cjs","names":["LanguageSupport","StreamLanguage","LanguageDescription","EditorView","foldGutter","autocompletion","Decoration","MatchDecorator","ViewPlugin","EditorView","syntaxHighlighting","syntaxHighlighter","useMemo","cva","cn","inputSurfaceAndFocusWithinStyle","fieldErrorRimWithin","Prec","forwardRef","useFieldControlAria","formatJSON","jsonLanguage","markdown","markdownLanguage","EditorState","Button","Braces","CopyButton","CodeMirror"],"sources":["../src/ds/components/CodeEditor/code-languages.ts","../src/ds/components/CodeEditor/fold-gutter-extension.ts","../src/ds/components/CodeEditor/schema-to-variables.ts","../src/ds/components/CodeEditor/variable-autocomplete-extension.ts","../src/ds/components/CodeEditor/variable-highlight-extension.ts","../src/ds/components/CodeEditor/code-editor.tsx"],"sourcesContent":["import { LanguageDescription, LanguageSupport, StreamLanguage } from '@codemirror/language';\n\nfunction legacy(parser: Parameters<typeof StreamLanguage.define>[0]) {\n  return new LanguageSupport(StreamLanguage.define(parser));\n}\n\n/**\n * A minimal subset of CodeMirror language descriptions used for fenced code\n * blocks inside markdown. Mirrors the relevant entries from\n * `@codemirror/language-data` but only the languages we actually support, so\n * bundlers don't have to emit a chunk for every known language.\n */\nexport const codeLanguages = [\n  LanguageDescription.of({\n    name: 'JavaScript',\n    alias: ['ecmascript', 'js', 'node'],\n    extensions: ['js', 'mjs', 'cjs'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'JSON',\n    alias: ['json5'],\n    extensions: ['json', 'map'],\n    load() {\n      return import('@codemirror/lang-json').then(m => m.json());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'JSX',\n    extensions: ['jsx'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'Markdown',\n    extensions: ['md', 'markdown', 'mkd'],\n    load() {\n      return import('@codemirror/lang-markdown').then(m => m.markdown());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'TSX',\n    extensions: ['tsx'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true, typescript: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'TypeScript',\n    alias: ['ts'],\n    extensions: ['ts', 'mts', 'cts'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ typescript: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'Shell',\n    alias: ['bash', 'sh', 'zsh'],\n    extensions: ['sh', 'ksh', 'bash'],\n    filename: /^PKGBUILD$/,\n    load() {\n      return import('@codemirror/legacy-modes/mode/shell').then(m => legacy(m.shell));\n    },\n  }),\n];\n","import { foldGutter } from '@codemirror/language';\nimport type { Extension } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\n\nconst foldTheme = EditorView.theme({\n  '.cm-foldGutter .cm-gutterElement': {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: '0 4px',\n  },\n  '.cm-fold-marker': {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '12px',\n    height: '12px',\n    boxSizing: 'border-box',\n    border: '1px solid var(--border)',\n    borderRadius: '2px',\n    color: 'var(--muted-foreground)',\n    fontSize: 'var(--text-caption)',\n    lineHeight: '1',\n    cursor: 'pointer',\n    userSelect: 'none',\n  },\n  '.cm-fold-marker:hover': {\n    background: 'var(--fill-hover)',\n    color: 'var(--foreground)',\n  },\n  '.cm-foldPlaceholder': {\n    background: 'var(--fill-hover)',\n    border: '1px solid var(--border)',\n    color: 'var(--muted-foreground)',\n    borderRadius: '2px',\n    padding: '0 4px',\n    margin: '0 2px',\n  },\n});\n\n/** Fold gutter with a square −/+ toggle next to each foldable line, styled with design tokens. */\nexport const codeFoldGutter: Extension = [\n  foldGutter({\n    markerDOM: open => {\n      const marker = document.createElement('span');\n      marker.className = 'cm-fold-marker';\n      marker.dataset.state = open ? 'open' : 'closed';\n      marker.title = open ? 'Fold' : 'Unfold';\n      marker.textContent = open ? '−' : '+';\n      return marker;\n    },\n  }),\n  foldTheme,\n];\n","import type { JsonSchema, JsonSchemaProperty } from '@/lib/json-schema';\n\n/**\n * Represents a variable completion option derived from a schema\n */\nexport interface VariableCompletion {\n  /** The dot-notation path (e.g., \"user.name\") */\n  path: string;\n  /** Display label for the autocomplete */\n  label: string;\n  /** Description from the schema, if available */\n  description?: string;\n  /** The type of the property */\n  type?: string;\n}\n\n/**\n * Flattens a JSON Schema into a list of variable completions for autocomplete.\n * Recursively extracts property paths using dot-notation.\n *\n * @param schema - The JSON Schema to flatten\n * @param maxDepth - Maximum recursion depth (default: 5)\n * @returns Array of variable completions\n *\n * @example\n * ```ts\n * const schema = {\n *   type: 'object',\n *   properties: {\n *     user: {\n *       type: 'object',\n *       properties: {\n *         name: { type: 'string' },\n *         email: { type: 'string' }\n *       }\n *     }\n *   }\n * };\n *\n * flattenSchemaToVariables(schema);\n * // Returns:\n * // [\n * //   { path: 'user', label: 'user', type: 'object' },\n * //   { path: 'user.name', label: 'user.name', type: 'string' },\n * //   { path: 'user.email', label: 'user.email', type: 'string' }\n * // ]\n * ```\n */\nexport function flattenSchemaToVariables(schema: JsonSchema | undefined, maxDepth = 5): VariableCompletion[] {\n  if (!schema?.properties) {\n    return [];\n  }\n\n  const results: VariableCompletion[] = [];\n\n  function processProperty(property: JsonSchemaProperty, path: string, depth: number): void {\n    if (depth > maxDepth) {\n      return;\n    }\n\n    const type = Array.isArray(property.type) ? property.type.join(' | ') : property.type;\n\n    results.push({\n      path,\n      label: path,\n      description: property.description ?? property.title,\n      type,\n    });\n\n    // Recurse into nested object properties\n    if (property.properties) {\n      for (const [key, nestedProperty] of Object.entries(property.properties)) {\n        processProperty(nestedProperty, `${path}.${key}`, depth + 1);\n      }\n    }\n\n    // Handle array items if they have properties (array of objects)\n    if (property.items?.properties) {\n      // Add a placeholder for array item access (e.g., items[0].name)\n      for (const [key, itemProperty] of Object.entries(property.items.properties)) {\n        processProperty(itemProperty, `${path}[].${key}`, depth + 1);\n      }\n    }\n  }\n\n  for (const [key, property] of Object.entries(schema.properties)) {\n    processProperty(property, key, 1);\n  }\n\n  return results;\n}\n","import { autocompletion } from '@codemirror/autocomplete';\nimport type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';\nimport type { Extension } from '@codemirror/state';\nimport { flattenSchemaToVariables } from './schema-to-variables';\nimport type { VariableCompletion } from './schema-to-variables';\nimport type { JsonSchema } from '@/lib/json-schema';\n\n/**\n * Creates a CodeMirror autocomplete extension for {{variable}} placeholders.\n * Triggers when the user types `{{` and shows suggestions derived from the schema.\n *\n * @param schema - JSON Schema to derive variable suggestions from\n * @returns CodeMirror Extension that provides variable autocomplete\n *\n * @example\n * ```tsx\n * const schema = {\n *   type: 'object',\n *   properties: {\n *     user: { type: 'object', properties: { name: { type: 'string' } } }\n *   }\n * };\n *\n * <CodeMirror extensions={[createVariableAutocomplete(schema)]} />\n * // Typing \"{{\" will show: user, user.name\n * ```\n */\nexport function createVariableAutocomplete(schema: JsonSchema | undefined): Extension {\n  const variables = flattenSchemaToVariables(schema);\n\n  return autocompletion({\n    override: [createVariableCompletionSource(variables)],\n    defaultKeymap: true,\n    closeOnBlur: true,\n    icons: false,\n  });\n}\n\n/**\n * Creates a completion source function for CodeMirror's autocompletion.\n */\nexport function createVariableCompletionSource(\n  variables: VariableCompletion[],\n): (context: CompletionContext) => CompletionResult | null {\n  return (context: CompletionContext): CompletionResult | null => {\n    // Look for {{ pattern before cursor\n    const beforeCursor = context.state.sliceDoc(Math.max(0, context.pos - 50), context.pos);\n    const match = beforeCursor.match(/\\{\\{([a-zA-Z0-9_.\\[\\]]*)?$/);\n\n    if (!match) {\n      return null;\n    }\n\n    // The text after {{ that we're matching against\n    const prefix = match[1] ?? '';\n    const startPos = context.pos - prefix.length;\n\n    // Filter variables based on what the user has typed\n    const filteredVariables = prefix\n      ? variables.filter(v => v.path.toLowerCase().startsWith(prefix.toLowerCase()))\n      : variables;\n\n    if (filteredVariables.length === 0) {\n      return null;\n    }\n\n    const completions: Completion[] = filteredVariables.map(variable => ({\n      label: variable.path,\n      displayLabel: variable.path,\n      detail: variable.type,\n      info: variable.description,\n      apply: (view, completion, from, to) => {\n        // Inside an existing placeholder, replace the rest of the identifier and reuse its closing }}\n        const rest = view.state.sliceDoc(to);\n        const identifierEnd = to + (rest.match(/^[a-zA-Z0-9_.\\[\\]]*/)?.[0].length ?? 0);\n        const hasClosingBraces = view.state.sliceDoc(identifierEnd, identifierEnd + 2) === '}}';\n        const end = hasClosingBraces ? identifierEnd : to;\n\n        const insertText = hasClosingBraces ? completion.label : `${completion.label}}}`;\n\n        view.dispatch({\n          changes: { from, to: end, insert: insertText },\n          selection: { anchor: from + insertText.length },\n        });\n      },\n    }));\n\n    return {\n      from: startPos,\n      options: completions,\n      validFor: /^[a-zA-Z0-9_.\\[\\]]*$/,\n    };\n  };\n}\n","import type { DecorationSet, EditorView, ViewUpdate } from '@codemirror/view';\nimport { Decoration, MatchDecorator, ViewPlugin } from '@codemirror/view';\n\n/**\n * Regex pattern to match variable placeholders like {{variableName}} or {{user.name}}\n * Matches: {{ followed by a valid identifier path (with optional dot notation), then }}\n */\nexport const VARIABLE_PATTERN = /\\{\\{([a-zA-Z_][a-zA-Z0-9_]*(?:\\.[a-zA-Z_][a-zA-Z0-9_]*)*)\\}\\}/g;\n\nconst variableDecoration = Decoration.mark({\n  class: 'cm-variable-highlight',\n});\n\nconst variableMatcher = new MatchDecorator({\n  regexp: VARIABLE_PATTERN,\n  decoration: () => variableDecoration,\n});\n\nconst variableHighlightPlugin = ViewPlugin.fromClass(\n  class {\n    decorations: DecorationSet;\n\n    constructor(view: EditorView) {\n      this.decorations = variableMatcher.createDeco(view);\n    }\n\n    update(update: ViewUpdate) {\n      this.decorations = variableMatcher.updateDeco(update, this.decorations);\n    }\n  },\n  {\n    decorations: v => v.decorations,\n  },\n);\n\n/**\n * CodeMirror extension that highlights {{variableName}} patterns\n * with orange color and semibold weight\n */\nexport const variableHighlight = variableHighlightPlugin;\n","import { jsonLanguage } from '@codemirror/lang-json';\nimport { markdown, markdownLanguage } from '@codemirror/lang-markdown';\nimport { syntaxHighlighting } from '@codemirror/language';\nimport { EditorState, Prec } from '@codemirror/state';\nimport type { Extension } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport CodeMirror from '@uiw/react-codemirror';\nimport type { ReactCodeMirrorRef } from '@uiw/react-codemirror';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { Braces } from 'lucide-react';\nimport { forwardRef, useMemo } from 'react';\nimport type { HTMLAttributes } from 'react';\nimport { codeLanguages } from './code-languages';\nimport { codeFoldGutter } from './fold-gutter-extension';\nimport { syntaxHighlighter } from './highlight';\nimport { createVariableAutocomplete } from './variable-autocomplete-extension';\nimport { variableHighlight } from './variable-highlight-extension';\nimport { Button } from '@/ds/components/Button';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { useFieldControlAria } from '@/ds/components/Field/field-control-aria';\nimport { fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { formatJSON } from '@/lib/formatting';\nimport type { JsonSchema } from '@/lib/json-schema';\nimport { toast } from '@/lib/toast';\nimport { cn } from '@/lib/utils';\n\nexport type CodeEditorLanguage = 'json' | 'markdown';\ntype CodeEditorFont = 'body' | 'mono';\n\n/**\n * The single CodeMirror theme for every editor. Chrome and syntax colors come\n * from CSS variables that flip under `.dark`, and syntax roles use the same\n * `syntaxHighlighter` as the read-only `<Code>` viewer, so editors and viewers\n * look identical in both modes.\n */\nfunction buildCodemirrorTheme(font: CodeEditorFont): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--foreground)',\n      fontSize: 'var(--text-body-sm)',\n    },\n    '&.cm-editor .cm-scroller': {\n      fontFamily: `var(--font-${font})`,\n    },\n    '.cm-gutters': {\n      backgroundColor: 'transparent',\n      color: 'var(--placeholder)',\n      borderRight: 'none',\n    },\n    '.cm-content': {\n      color: 'var(--foreground)',\n      caretColor: 'var(--foreground)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-lineNumbers .cm-gutterElement': {\n      color: 'var(--placeholder)',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n      color: 'var(--muted-foreground)',\n    },\n    '.cm-cursor, .cm-dropCursor': {\n      borderLeftColor: 'var(--foreground)',\n    },\n    '&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection':\n      {\n        background: 'var(--info-edge) !important',\n      },\n    '.cm-tooltip-autocomplete': {\n      backgroundColor: 'var(--background)',\n      border: '1px solid var(--border)',\n      borderRadius: '6px',\n      boxShadow: 'var(--elevation-overlay)',\n    },\n    '.cm-tooltip-autocomplete > ul': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-completionLabel': {\n      color: 'var(--foreground)',\n    },\n    '.cm-completionDetail': {\n      color: 'var(--muted-foreground)',\n      fontSize: 'var(--text-caption)',\n      marginLeft: 'auto',\n      paddingLeft: '12px',\n    },\n    '.cm-completionInfo': {\n      backgroundColor: 'var(--background)',\n      border: '1px solid var(--border)',\n      color: 'var(--muted-foreground)',\n      padding: '8px 12px',\n    },\n    '.cm-completionIcon': {\n      display: 'none',\n    },\n    'ul.cm-completionList li[aria-selected]': {\n      backgroundColor: 'var(--fill-hover)',\n      color: 'var(--foreground)',\n    },\n    '.cm-line .cm-variable-highlight': {\n      color: 'var(--warning-foreground) !important',\n      fontWeight: '500',\n    },\n  });\n\n  return [editorTheme, syntaxHighlighting(syntaxHighlighter)];\n}\n\n// eslint-disable-next-line react-refresh/only-export-components -- shared hook intentionally co-located with the editor it themes\nexport const useCodemirrorTheme = (font: CodeEditorFont = 'mono'): Extension => {\n  return useMemo(() => buildCodemirrorTheme(font), [font]);\n};\n\nconst codeEditorVariants = cva(\n  cn(\n    'relative overflow-hidden font-mono outline-hidden focus-within:outline-hidden focus:outline-hidden',\n    'transition-colors duration-normal ease-out-custom',\n  ),\n  {\n    variants: {\n      variant: {\n        default: cn(inputSurfaceAndFocusWithinStyle, 'rounded-md p-1', fieldErrorRimWithin),\n        embedded: 'rounded-none border-none bg-transparent p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nconst editorFocusAttributes = Prec.highest(\n  EditorView.editorAttributes.of({\n    style: 'outline: none',\n  }),\n);\n\nconst editorFocusTheme = Prec.highest(\n  EditorView.theme({\n    '&': {\n      outline: 'none',\n    },\n    '&.cm-focused': {\n      outline: 'none',\n    },\n    '.cm-scroller': {\n      outline: 'none',\n    },\n    '.cm-content': {\n      outline: 'none',\n    },\n    '.cm-content:focus': {\n      outline: 'none',\n    },\n  }),\n);\n\nconst editorFocusExtensions: Extension[] = [editorFocusAttributes, editorFocusTheme];\n\ntype CodeEditorContentAttributes = {\n  'aria-label': string;\n  id?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-invalid'?: string;\n};\n\nexport type CodeEditorProps = {\n  /** Prose editors can opt into the body face; code stays monospace by default. */\n  font?: CodeEditorFont;\n  data?: Record<string, unknown> | Array<Record<string, unknown>>;\n  value?: string;\n  onChange?: (value: string) => void;\n  showCopyButton?: boolean;\n  /** Offers a button that rewrites the JSON with Prettier. Needs `onChange`; ignored for markdown or read-only editors. */\n  showFormatButton?: boolean;\n  className?: string;\n  highlightVariables?: boolean;\n  language?: CodeEditorLanguage;\n  placeholder?: string;\n  /** JSON Schema to enable variable autocomplete for {{variable}} placeholders (markdown only) */\n  schema?: JsonSchema;\n  autoFocus?: boolean;\n  /** Show line numbers in the gutter (default: true) */\n  lineNumbers?: boolean;\n  /** Wrap long lines within the editor viewport (default: true) */\n  lineWrapping?: boolean;\n  /** When false, makes the editor read-only */\n  editable?: boolean;\n  /** Extra CodeMirror extensions, added after the built-in ones. Memoize them to avoid reconfiguring on every render. */\n  extensions?: Extension[];\n} & VariantProps<typeof codeEditorVariants> &\n  Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeEditor = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(\n  (\n    {\n      data,\n      value,\n      onChange,\n      showCopyButton = true,\n      showFormatButton = false,\n      className,\n      language = 'json',\n      font = 'mono',\n      highlightVariables = false,\n      placeholder,\n      schema,\n      autoFocus,\n      lineNumbers = true,\n      lineWrapping = true,\n      editable,\n      extensions: extraExtensions,\n      variant,\n      id,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-invalid': ariaInvalidProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const fieldAria = useFieldControlAria({ 'aria-label': ariaLabelProp });\n    const ariaLabel = ariaLabelProp ?? 'Code editor';\n    const controlId = id ?? fieldAria.id;\n    const ariaLabelledBy = ariaLabelledByProp ?? fieldAria['aria-labelledby'];\n    const ariaDescribedBy = ariaDescribedByProp ?? fieldAria['aria-describedby'];\n    const ariaInvalid = ariaInvalidProp ?? fieldAria['aria-invalid'];\n    const theme = useCodemirrorTheme(font);\n    const formattedCode = data ? JSON.stringify(data, null, 2) : (value ?? '');\n    const canFormat = showFormatButton && language === 'json' && editable !== false && Boolean(onChange);\n\n    const handleFormat = async () => {\n      try {\n        onChange?.((await formatJSON(formattedCode)).trimEnd());\n      } catch {\n        toast.error('Can’t format: the JSON is invalid');\n      }\n    };\n\n    const extensions = useMemo(() => {\n      const contentAttributes: CodeEditorContentAttributes = { 'aria-label': ariaLabel };\n      if (controlId) contentAttributes.id = controlId;\n      if (ariaLabelledBy) contentAttributes['aria-labelledby'] = ariaLabelledBy;\n      if (ariaDescribedBy) contentAttributes['aria-describedby'] = ariaDescribedBy;\n      if (ariaInvalid !== undefined) contentAttributes['aria-invalid'] = String(ariaInvalid);\n\n      const exts: Extension[] = [\n        ...editorFocusExtensions,\n        EditorView.contentAttributes.of(contentAttributes),\n        codeFoldGutter,\n      ];\n\n      if (lineWrapping) {\n        exts.push(EditorView.lineWrapping);\n      }\n\n      if (language === 'json') {\n        exts.push(jsonLanguage);\n      } else if (language === 'markdown') {\n        exts.push(markdown({ base: markdownLanguage, codeLanguages }));\n      }\n\n      if (highlightVariables && language === 'markdown') {\n        exts.push(variableHighlight);\n      }\n\n      if (schema && language === 'markdown') {\n        exts.push(createVariableAutocomplete(schema));\n      }\n\n      if (editable === false) {\n        exts.push(EditorState.readOnly.of(true));\n      }\n\n      if (extraExtensions) {\n        exts.push(...extraExtensions);\n      }\n\n      return exts;\n    }, [\n      extraExtensions,\n      language,\n      highlightVariables,\n      schema,\n      editable,\n      lineWrapping,\n      controlId,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      ariaInvalid,\n    ]);\n\n    return (\n      <div className={cn(codeEditorVariants({ variant }), className)} {...props}>\n        {(showCopyButton || canFormat) && (\n          <div className=\"absolute top-2 right-2 z-20 flex gap-1\">\n            {canFormat && (\n              <Button\n                type=\"button\"\n                size=\"icon-sm\"\n                tooltip=\"Format JSON\"\n                aria-label=\"Format JSON\"\n                onClick={handleFormat}\n              >\n                <Braces />\n              </Button>\n            )}\n            {showCopyButton && <CopyButton content={formattedCode} />}\n          </div>\n        )}\n        <CodeMirror\n          ref={ref}\n          value={formattedCode}\n          theme={theme}\n          extensions={extensions}\n          onChange={onChange}\n          editable={editable}\n          aria-label={ariaLabel}\n          placeholder={placeholder}\n          height=\"100%\"\n          style={{ height: '100%' }}\n          autoFocus={autoFocus}\n          basicSetup={{ lineNumbers, foldGutter: false }}\n        />\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}