@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/code-block-C4soB6uN.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const code = require('./code-DhrdtZce.cjs');
+const copyButton = require('./copy-button-Clv2tQeH.cjs');
+const select = require('./select-DIOGGfVZ.cjs');
+const tabsRoot = require('./tabs-root-C9QBXz5M.cjs');
+const tabsTab = require('./tabs-tab-Bm3yxYaU.cjs');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+
+function CodeBlock({
+  code: code$1,
+  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__ */ jsxRuntime.jsxs(
+    "figure",
+    {
+      className: utils_cn.cn(
+        "group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2 [contain:inline-size]",
+        className
+      ),
+      children: [
+        useTabs && firstOption && /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: firstOption.value, value: activeValue, onValueChange: onValueChange ?? (() => {
+        }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: opt.value, children: opt.label }, opt.value)) }) }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border1 flex shrink-0 items-center border-b pr-2 pl-3", children: actions })
+        ] }) }),
+        useSelect && options && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border2/40 flex items-center border-b px-2 py-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: activeValue, onValueChange, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+          ] }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
+        ] }),
+        !hasOptions && fileName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border2/40 flex items-center border-b px-4 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "text-ui-sm text-neutral4 font-mono", children: fileName }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
+        ] }),
+        !hasOptions && !fileName && actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border2/40 flex items-center justify-end border-b px-2 py-1.5", children: actions }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            code.Code,
+            {
+              code: code$1,
+              lang,
+              className: utils_cn.cn(
+                "px-4 py-3 font-mono text-ui-sm text-neutral5",
+                overflow === "scroll" ? "overflow-x-auto whitespace-pre" : "break-all whitespace-pre-wrap"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            copyButton.CopyButton,
+            {
+              content: code$1,
+              copyMessage,
+              tooltip: copyTooltip,
+              size: "sm",
+              className: utils_cn.cn(
+                "absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0",
+                primitives_transitions.transitions.opacity
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.CodeBlock = CodeBlock;
+//# sourceMappingURL=code-block-C4soB6uN.cjs.map

package/dist/code-block-C4soB6uN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-C4soB6uN.cjs","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-border2/40 bg-surface2 [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=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\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=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b 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-ui-sm text-neutral5',\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":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}

package/dist/code-editor-JI0lkx_d.cjs

@@ -0,0 +1,486 @@
+'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 ReactCodeMirror = require('@uiw/react-codemirror');
+const index = require('./index-Bk0d-AeX.cjs');
+const React = require('react');
+const autocomplete = require('@codemirror/autocomplete');
+const copyButton = require('./copy-button-Clv2tQeH.cjs');
+const themeProvider = require('./theme-provider-aO5-jZVp.cjs');
+const utils_cn = require('./cn-DPfV6E6L.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 afterCursor = view.state.sliceDoc(to, to + 2);
+        const hasClosingBraces = afterCursor === "}}";
+        const insertText = hasClosingBraces ? completion.label : `${completion.label}}}`;
+        view.dispatch({
+          changes: { from, to, 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() {
+  const baseTheme = codemirrorThemeDracula.draculaInit({
+    settings: {
+      fontFamily: "var(--font-mono)",
+      fontSize: "var(--text-ui-smd)",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "var(--neutral2)",
+      background: "transparent",
+      foreground: "var(--neutral6)",
+      caret: "var(--neutral6)"
+    },
+    styles: [
+      { tag: [highlight.tags.className, highlight.tags.propertyName], color: "var(--neutral6)" },
+      { tag: highlight.tags.heading, color: "var(--accent3)", fontWeight: "bold" },
+      {
+        tag: [highlight.tags.heading1, highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4, highlight.tags.heading5, highlight.tags.heading6],
+        color: "var(--accent3)",
+        fontWeight: "bold"
+      },
+      { tag: highlight.tags.emphasis, fontStyle: "italic", color: "var(--neutral6)" },
+      { tag: highlight.tags.strong, fontWeight: "bold", color: "var(--neutral6)" },
+      { tag: highlight.tags.link, color: "var(--accent3)", textDecoration: "underline" },
+      { tag: highlight.tags.url, color: "var(--accent3)" },
+      { tag: highlight.tags.monospace, color: "var(--neutral6)" },
+      { tag: highlight.tags.strikethrough, textDecoration: "line-through" },
+      { tag: highlight.tags.quote, fontStyle: "italic", color: "var(--neutral2)" }
+    ]
+  });
+  const customLineNumberTheme = view.EditorView.theme({
+    ".cm-editor": {
+      backgroundColor: "transparent"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)",
+      caretColor: "var(--neutral6)"
+    },
+    ".cm-lineNumbers .cm-gutterElement": {
+      color: "var(--neutral2)"
+    },
+    ".cm-activeLineGutter": {
+      color: "var(--neutral3)"
+    },
+    ".cm-cursor": {
+      borderLeftColor: "var(--neutral6)"
+    },
+    ".cm-selectionBackground, .cm-content ::selection": {
+      backgroundColor: "color-mix(in srgb, var(--accent3) 22%, transparent)"
+    },
+    ".cm-tooltip-autocomplete": {
+      backgroundColor: "var(--surface2)",
+      border: "1px solid var(--border1)",
+      borderRadius: "6px",
+      boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)"
+    },
+    ".cm-tooltip-autocomplete > ul": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-completionLabel": {
+      color: "var(--neutral6)"
+    },
+    ".cm-completionDetail": {
+      color: "var(--neutral3)",
+      fontSize: "var(--text-ui-sm)",
+      marginLeft: "auto",
+      paddingLeft: "12px"
+    },
+    ".cm-completionInfo": {
+      backgroundColor: "var(--surface2)",
+      border: "1px solid var(--border1)",
+      color: "var(--neutral3)",
+      padding: "8px 12px"
+    },
+    ".cm-completionIcon": {
+      display: "none"
+    },
+    "ul.cm-completionList li[aria-selected]": {
+      backgroundColor: "var(--surface4)",
+      color: "var(--neutral6)"
+    },
+    ".cm-line .cm-variable-highlight": {
+      color: "var(--accent6) !important",
+      fontWeight: "500"
+    }
+  });
+  return [baseTheme, customLineNumberTheme];
+}
+function buildLightTheme() {
+  const editorTheme = view.EditorView.theme({
+    "&": {
+      backgroundColor: "transparent",
+      color: "var(--neutral6)",
+      fontSize: "var(--text-ui-smd)"
+    },
+    "&.cm-editor .cm-scroller": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      color: "var(--neutral2)",
+      borderRight: "none"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)",
+      caretColor: "var(--neutral6)"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-lineNumbers .cm-gutterElement": {
+      color: "var(--neutral2)"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent",
+      color: "var(--neutral3)"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "var(--neutral6)"
+    },
+    "&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection": {
+      background: "color-mix(in srgb, var(--accent3) 22%, transparent) !important"
+    },
+    ".cm-tooltip-autocomplete": {
+      backgroundColor: "var(--surface2)",
+      border: "1px solid var(--border1)",
+      borderRadius: "6px",
+      boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)"
+    },
+    ".cm-tooltip-autocomplete > ul": {
+      fontFamily: "var(--font-mono)"
+    },
+    ".cm-completionLabel": {
+      color: "var(--neutral6)"
+    },
+    ".cm-completionDetail": {
+      color: "var(--neutral3)",
+      fontSize: "var(--text-ui-sm)",
+      marginLeft: "auto",
+      paddingLeft: "12px"
+    },
+    ".cm-completionInfo": {
+      backgroundColor: "var(--surface2)",
+      border: "1px solid var(--border1)",
+      color: "var(--neutral3)",
+      padding: "8px 12px"
+    },
+    ".cm-completionIcon": {
+      display: "none"
+    },
+    "ul.cm-completionList li[aria-selected]": {
+      backgroundColor: "var(--surface4)",
+      color: "var(--neutral6)"
+    },
+    ".cm-line .cm-variable-highlight": {
+      color: "var(--accent6) !important",
+      fontWeight: "500"
+    }
+  });
+  const highlightStyle = language.HighlightStyle.define([
+    { tag: [highlight.tags.comment, highlight.tags.bracket], color: "var(--neutral2)" },
+    { tag: [highlight.tags.string, highlight.tags.meta, highlight.tags.regexp], color: "var(--accent1)" },
+    { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: "var(--accent6)" },
+    { tag: [highlight.tags.keyword, highlight.tags.operator, highlight.tags.tagName], color: "var(--accent2)" },
+    { tag: [highlight.tags.function(highlight.tags.propertyName), highlight.tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [highlight.tags.definition(highlight.tags.variableName), highlight.tags.function(highlight.tags.variableName), highlight.tags.className, highlight.tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [highlight.tags.variableName, highlight.tags.number], color: "var(--accent5)" },
+    { tag: [highlight.tags.name, highlight.tags.quote], color: "var(--accent1)" },
+    { tag: highlight.tags.heading, color: "var(--accent3)", fontWeight: "bold" },
+    {
+      tag: [highlight.tags.heading1, highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4, highlight.tags.heading5, highlight.tags.heading6],
+      color: "var(--accent3)",
+      fontWeight: "bold"
+    },
+    { tag: [highlight.tags.emphasis], fontStyle: "italic", color: "var(--neutral6)" },
+    { tag: [highlight.tags.strong], fontWeight: "bold", color: "var(--neutral6)" },
+    { tag: highlight.tags.link, color: "var(--accent3)", textDecoration: "underline" },
+    { tag: highlight.tags.url, color: "var(--accent3)" },
+    { tag: highlight.tags.monospace, color: "var(--neutral6)" },
+    { tag: highlight.tags.strikethrough, textDecoration: "line-through" },
+    { tag: [highlight.tags.deleted], color: "var(--accent2)" },
+    { tag: highlight.tags.invalid, color: "var(--error)" },
+    { tag: [highlight.tags.standard(highlight.tags.tagName)], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, language.syntaxHighlighting(highlightStyle)];
+}
+const useCodemirrorTheme = () => {
+  const isDark = themeProvider.useTheme().resolvedTheme === "dark";
+  return React.useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
+};
+const codeEditorVariants = index.cva(
+  utils_cn.cn(
+    "relative overflow-hidden font-mono outline-hidden focus-within:outline-hidden focus:outline-hidden",
+    "duration-normal transition-colors ease-out-custom"
+  ),
+  {
+    variants: {
+      variant: {
+        default: "rounded-md border border-border1 bg-surface3 p-1 focus-within:border-neutral6/20",
+        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",
+    highlightVariables = false,
+    placeholder,
+    schema,
+    autoFocus,
+    lineNumbers = true,
+    lineWrapping = true,
+    editable,
+    variant,
+    ...props
+  }, ref) => {
+    const theme = useCodemirrorTheme();
+    const formattedCode = data ? JSON.stringify(data, null, 2) : value ?? "";
+    const extensions = React.useMemo(() => {
+      const exts = [...editorFocusExtensions];
+      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]);
+    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(
+        ReactCodeMirror,
+        {
+          ref,
+          value: formattedCode,
+          theme,
+          extensions,
+          onChange,
+          editable,
+          "aria-label": "Code editor",
+          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-JI0lkx_d.cjs.map