@mastra/playground-ui 61.0.0 → 62.0.0-alpha.0

package/dist/code-block-zZDgdkEU.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { C as Code } from './code-DAXWNzvf.js';
+import { C as CopyButton } from './copy-button-CRWQE6VF.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-CzDDdAMs.js';
+import { T as TabList } from './tabs-list-DY_hziv7.js';
+import { T as Tabs } from './tabs-root-CvGhdNKc.js';
+import { T as Tab } from './tabs-tab-BvPKLjyo.js';
+import { transitions } from './primitives/transitions.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+function CodeBlock({
+  code,
+  options,
+  value,
+  onValueChange,
+  selector = "select",
+  fileName,
+  lang,
+  overflow = "wrap",
+  copyMessage,
+  copyTooltip,
+  actions,
+  className
+}) {
+  const hasOptions = options && options.length > 0;
+  const useTabs = hasOptions && selector === "tabs";
+  const useSelect = hasOptions && selector === "select";
+  const firstOption = options?.[0];
+  const activeValue = value ?? firstOption?.value;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(
+        "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-background [contain:inline-size]",
+        className
+      ),
+      children: [
+        useTabs && firstOption && /* @__PURE__ */ jsx(Tabs, { defaultTab: firstOption.value, value: activeValue, onValueChange: onValueChange ?? (() => {
+        }), children: /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TabList, { children: options.map((opt) => /* @__PURE__ */ jsx(Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center border-b border-border pr-2 pl-3", children: actions })
+        ] }) }),
+        useSelect && options && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-border px-2 py-1.5", children: [
+          /* @__PURE__ */ jsxs(Select, { value: activeValue, onValueChange, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", variant: "ghost", className: "w-auto", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
+        ] }),
+        !hasOptions && fileName && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-border px-4 py-2", children: [
+          /* @__PURE__ */ jsx("figcaption", { className: "font-mono text-caption text-muted-foreground", children: fileName }),
+          actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
+        ] }),
+        !hasOptions && !fileName && actions && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end border-b border-border px-2 py-1.5", children: actions }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Code,
+            {
+              code,
+              lang,
+              className: cn(
+                "px-4 py-3 font-mono text-caption text-foreground",
+                overflow === "scroll" ? "overflow-x-auto whitespace-pre" : "break-all whitespace-pre-wrap"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              content: code,
+              copyMessage,
+              tooltip: copyTooltip,
+              size: "sm",
+              className: cn(
+                "absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0",
+                transitions.opacity
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { CodeBlock as C };
+//# sourceMappingURL=code-block-zZDgdkEU.js.map

package/dist/code-block-zZDgdkEU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-zZDgdkEU.js","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-background [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"flex shrink-0 items-center border-b border-border pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"flex items-center border-b border-border px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\" className=\"w-auto\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"flex items-center border-b border-border px-4 py-2\">\n          <figcaption className=\"font-mono text-caption text-muted-foreground\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"flex items-center justify-end border-b border-border px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-caption text-foreground',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/code-editor-Bw_rGwp9.cjs

@@ -0,0 +1,518 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const langJson = require('@codemirror/lang-json');
+const langMarkdown = require('@codemirror/lang-markdown');
+const language = require('@codemirror/language');
+const state = require('@codemirror/state');
+const view = require('@codemirror/view');
+const highlight = require('@lezer/highlight');
+const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
+const CodeMirror = require('@uiw/react-codemirror');
+const index = require('./index-DlPxfJz9.cjs');
+const React = require('react');
+const autocomplete = require('@codemirror/autocomplete');
+const copyButton = require('./copy-button-Q9i32p1G.cjs');
+const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
+const themeProvider = require('./theme-provider-DDGNiyY_.cjs');
+const primitives_formElement = require('./primitives/form-element.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+function legacy(parser) {
+  return new language.LanguageSupport(language.StreamLanguage.define(parser));
+}
+const codeLanguages = [
+  language.LanguageDescription.of({
+    name: "JavaScript",
+    alias: ["ecmascript", "js", "node"],
+    extensions: ["js", "mjs", "cjs"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript());
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "JSON",
+    alias: ["json5"],
+    extensions: ["json", "map"],
+    load() {
+      return import('@codemirror/lang-json').then((m) => m.json());
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "JSX",
+    extensions: ["jsx"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true }));
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "Markdown",
+    extensions: ["md", "markdown", "mkd"],
+    load() {
+      return import('@codemirror/lang-markdown').then((m) => m.markdown());
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "TSX",
+    extensions: ["tsx"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true, typescript: true }));
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "TypeScript",
+    alias: ["ts"],
+    extensions: ["ts", "mts", "cts"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true }));
+    }
+  }),
+  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));
+    }
+  })
+];
+
+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;
+}
+
+function createVariableAutocomplete(schema) {
+  const variables = flattenSchemaToVariables(schema);
+  return autocomplete.autocompletion({
+    override: [createVariableCompletionSource(variables)],
+    defaultKeymap: true,
+    closeOnBlur: true,
+    icons: false
+  });
+}
+function createVariableCompletionSource(variables) {
+  return (context) => {
+    const beforeCursor = context.state.sliceDoc(Math.max(0, context.pos - 50), context.pos);
+    const match = beforeCursor.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;
+    }
+    const completions = filteredVariables.map((variable) => ({
+      label: variable.path,
+      displayLabel: variable.path,
+      detail: variable.type,
+      info: variable.description,
+      apply: (view, completion, from, to) => {
+        const rest = view.state.sliceDoc(to);
+        const identifierEnd = to + (rest.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 }
+        });
+      }
+    }));
+    return {
+      from: startPos,
+      options: completions,
+      validFor: /^[a-zA-Z0-9_.\[\]]*$/
+    };
+  };
+}
+
+const VARIABLE_PATTERN = /\{\{([a-zA-Z_][a-zA-Z0-9_]*(?:\.[a-zA-Z_][a-zA-Z0-9_]*)*)\}\}/g;
+const variableDecoration = view.Decoration.mark({
+  class: "cm-variable-highlight"
+});
+const variableMatcher = new view.MatchDecorator({
+  regexp: VARIABLE_PATTERN,
+  decoration: () => variableDecoration
+});
+const variableHighlightPlugin = 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
+  }
+);
+const variableHighlight = variableHighlightPlugin;
+
+function buildDarkTheme(font) {
+  const baseTheme = codemirrorThemeDracula.draculaInit({
+    settings: {
+      fontFamily: `var(--font-${font})`,
+      fontSize: "var(--text-body-sm)",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "var(--placeholder)",
+      background: "transparent",
+      foreground: "var(--foreground)",
+      caret: "var(--foreground)"
+    },
+    styles: [
+      { tag: [highlight.tags.className, highlight.tags.propertyName], color: "var(--foreground)" },
+      { tag: highlight.tags.heading, color: "var(--info-indicator)", fontWeight: "bold" },
+      {
+        tag: [highlight.tags.heading1, highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4, highlight.tags.heading5, highlight.tags.heading6],
+        color: "var(--info-indicator)",
+        fontWeight: "bold"
+      },
+      { tag: highlight.tags.emphasis, fontStyle: "italic", color: "var(--foreground)" },
+      { tag: highlight.tags.strong, fontWeight: "bold", color: "var(--foreground)" },
+      { tag: highlight.tags.link, color: "var(--info-indicator)", textDecoration: "underline" },
+      { tag: highlight.tags.url, color: "var(--info-indicator)" },
+      { tag: highlight.tags.monospace, color: "var(--foreground)" },
+      { tag: highlight.tags.strikethrough, textDecoration: "line-through" },
+      { tag: highlight.tags.quote, fontStyle: "italic", color: "var(--placeholder)" }
+    ]
+  });
+  const customLineNumberTheme = view.EditorView.theme({
+    ".cm-editor": {
+      backgroundColor: "transparent"
+    },
+    ".cm-content": {
+      color: "var(--foreground)",
+      caretColor: "var(--foreground)"
+    },
+    ".cm-lineNumbers .cm-gutterElement": {
+      color: "var(--placeholder)"
+    },
+    ".cm-activeLineGutter": {
+      color: "var(--muted-foreground)"
+    },
+    ".cm-cursor": {
+      borderLeftColor: "var(--foreground)"
+    },
+    ".cm-selectionBackground, .cm-content ::selection": {
+      backgroundColor: "var(--info-subtle)"
+    },
+    ".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"
+    }
+  });
+  return [baseTheme, customLineNumberTheme];
+}
+function buildLightTheme(font) {
+  const editorTheme = 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"
+    }
+  });
+  const highlightStyle = language.HighlightStyle.define([
+    { tag: [highlight.tags.comment, highlight.tags.bracket], color: "var(--placeholder)" },
+    { tag: [highlight.tags.string, highlight.tags.meta, highlight.tags.regexp], color: "var(--syntax-string)" },
+    { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: "var(--syntax-literal)" },
+    { tag: [highlight.tags.keyword, highlight.tags.operator, highlight.tags.tagName], color: "var(--syntax-keyword)" },
+    { tag: [highlight.tags.function(highlight.tags.propertyName), highlight.tags.propertyName], color: "var(--syntax-name)" },
+    {
+      tag: [highlight.tags.definition(highlight.tags.variableName), highlight.tags.function(highlight.tags.variableName), highlight.tags.className, highlight.tags.attributeName],
+      color: "var(--syntax-link)"
+    },
+    { tag: [highlight.tags.variableName, highlight.tags.number], color: "var(--syntax-name)" },
+    { tag: [highlight.tags.name, highlight.tags.quote], color: "var(--syntax-string)" },
+    { tag: highlight.tags.heading, color: "var(--syntax-link)", fontWeight: "bold" },
+    {
+      tag: [highlight.tags.heading1, highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4, highlight.tags.heading5, highlight.tags.heading6],
+      color: "var(--syntax-link)",
+      fontWeight: "bold"
+    },
+    { tag: [highlight.tags.emphasis], fontStyle: "italic", color: "var(--foreground)" },
+    { tag: [highlight.tags.strong], fontWeight: "bold", color: "var(--foreground)" },
+    { tag: highlight.tags.link, color: "var(--syntax-link)", textDecoration: "underline" },
+    { tag: highlight.tags.url, color: "var(--syntax-link)" },
+    { tag: highlight.tags.monospace, color: "var(--foreground)" },
+    { tag: highlight.tags.strikethrough, textDecoration: "line-through" },
+    { tag: [highlight.tags.deleted], color: "var(--syntax-keyword)" },
+    { tag: highlight.tags.invalid, color: "var(--destructive-foreground)" },
+    { tag: [highlight.tags.standard(highlight.tags.tagName)], color: "var(--syntax-string)" }
+  ]);
+  return [editorTheme, language.syntaxHighlighting(highlightStyle)];
+}
+const useCodemirrorTheme = (font = "mono") => {
+  const isDark = themeProvider.useTheme().resolvedTheme === "dark";
+  return React.useMemo(() => isDark ? buildDarkTheme(font) : buildLightTheme(font), [isDark, font]);
+};
+const codeEditorVariants = index.cva(
+  utils_cn.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: utils_cn.cn(primitives_formElement.inputSurfaceAndFocusWithinStyle, "rounded-md p-1", primitives_formElement.fieldErrorRimWithin),
+        embedded: "rounded-none border-none bg-transparent p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const editorFocusAttributes = state.Prec.highest(
+  view.EditorView.editorAttributes.of({
+    style: "outline: none"
+  })
+);
+const editorFocusTheme = state.Prec.highest(
+  view.EditorView.theme({
+    "&": {
+      outline: "none"
+    },
+    "&.cm-focused": {
+      outline: "none"
+    },
+    ".cm-scroller": {
+      outline: "none"
+    },
+    ".cm-content": {
+      outline: "none"
+    },
+    ".cm-content:focus": {
+      outline: "none"
+    }
+  })
+);
+const editorFocusExtensions = [editorFocusAttributes, editorFocusTheme];
+const CodeEditor = React.forwardRef(
+  ({
+    data,
+    value,
+    onChange,
+    showCopyButton = true,
+    className,
+    language = "json",
+    font = "mono",
+    highlightVariables = false,
+    placeholder,
+    schema,
+    autoFocus,
+    lineNumbers = true,
+    lineWrapping = true,
+    editable,
+    variant,
+    id,
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-invalid": ariaInvalidProp,
+    ...props
+  }, ref) => {
+    const fieldAria = fieldControlAria.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 extensions = 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, view.EditorView.contentAttributes.of(contentAttributes)];
+      if (lineWrapping) {
+        exts.push(view.EditorView.lineWrapping);
+      }
+      if (language === "json") {
+        exts.push(langJson.jsonLanguage);
+      } else if (language === "markdown") {
+        exts.push(langMarkdown.markdown({ base: langMarkdown.markdownLanguage, codeLanguages }));
+      }
+      if (highlightVariables && language === "markdown") {
+        exts.push(variableHighlight);
+      }
+      if (schema && language === "markdown") {
+        exts.push(createVariableAutocomplete(schema));
+      }
+      if (editable === false) {
+        exts.push(state.EditorState.readOnly.of(true));
+      }
+      return exts;
+    }, [
+      language,
+      highlightVariables,
+      schema,
+      editable,
+      lineWrapping,
+      controlId,
+      ariaLabel,
+      ariaLabelledBy,
+      ariaDescribedBy,
+      ariaInvalid
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn(codeEditorVariants({ variant }), className), ...props, children: [
+      showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(copyButton.CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-20" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CodeMirror,
+        {
+          ref,
+          value: formattedCode,
+          theme,
+          extensions,
+          onChange,
+          editable,
+          "aria-label": ariaLabel,
+          placeholder,
+          height: "100%",
+          style: { height: "100%" },
+          autoFocus,
+          basicSetup: { lineNumbers }
+        }
+      )
+    ] });
+  }
+);
+
+exports.CodeEditor = CodeEditor;
+exports.VARIABLE_PATTERN = VARIABLE_PATTERN;
+exports.codeLanguages = codeLanguages;
+exports.createVariableAutocomplete = createVariableAutocomplete;
+exports.flattenSchemaToVariables = flattenSchemaToVariables;
+exports.useCodemirrorTheme = useCodemirrorTheme;
+exports.variableHighlight = variableHighlight;
+//# sourceMappingURL=code-editor-Bw_rGwp9.cjs.map