@keboola/design 9.1.0 → 10.1.0

package/dist/chunk-7PUUHEJQ.js

@@ -0,0 +1,1313 @@
+import { escapeStringRegexp, useStableCallback, Kbd, isMac } from './chunk-Q7NWXLCT.js';
+import { ClipboardButton } from './chunk-L37JJ6MR.js';
+import { HelpBlock } from './chunk-ESBL3IPF.js';
+import { useArgoDesign, keyCodes } from './chunk-63NSN2VL.js';
+import { cn } from './chunk-JP7PNHLH.js';
+import { javascript } from '@codemirror/lang-javascript';
+import { jsonParseLinter, json } from '@codemirror/lang-json';
+import { python } from '@codemirror/lang-python';
+import { PLSQL, MSSQL, PostgreSQL, MySQL, StandardSQL } from '@codemirror/lang-sql';
+import { StreamLanguage } from '@codemirror/language';
+import { r } from '@codemirror/legacy-modes/mode/r';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+import { tags } from '@lezer/highlight';
+import { githubLightInit } from '@uiw/codemirror-theme-github';
+import { installExtensions, getSqlLanguageSupport } from '@keboola/codemirror-lang-sql';
+import colors from '@keboola/tailwind-config/colors';
+import { simpleMode } from '@codemirror/legacy-modes/mode/simple-mode';
+import { useRef, useEffect, useLayoutEffect, useMemo, useSyncExternalStore } from 'react';
+import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
+import { linter } from '@codemirror/lint';
+import { unifiedMergeView } from '@codemirror/merge';
+import { EditorView, Decoration, ViewPlugin, gutter, GutterMarker, keymap as keymap$1, placeholder, tooltips } from '@codemirror/view';
+import CodeMirror, { keymap, EditorState, EditorView as EditorView$1 } from '@uiw/react-codemirror';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { StateEffect, StateField, RangeSet, Compartment } from '@codemirror/state';
+import { defaultKeymap } from '@codemirror/commands';
+
+var COMMANDS = [
+  "run-operation",
+  "run",
+  "test",
+  "seed",
+  "snapshot",
+  "list",
+  "ls",
+  "compile",
+  "build",
+  "deps",
+  "docs",
+  "source"
+];
+var SUBCOMMANDS = { docs: ["generate"], source: ["freshness"] };
+var ARGUMENTS = ["--select", "--exclude", "--selector", "--defer", "--resource-type", "-s"];
+var SELECTORS = ["--select", "--exclude", "-s"];
+var METHODS = [
+  "path:",
+  "source:",
+  "tag:",
+  "package:",
+  "config:",
+  "test_type:",
+  "test_name:",
+  "state:",
+  "exposure:",
+  "metric:",
+  "result:",
+  "source_status:",
+  "column_name:"
+];
+var FLAGS = [
+  "--fail-fast",
+  "--warn-error",
+  "--favor-state",
+  "--vars",
+  "--models",
+  "--threads",
+  "--profiles-dir",
+  "--profile",
+  "--full-refresh"
+];
+var COMMAND_PHRASES = COMMANDS.flatMap((command) => {
+  const subcommands = SUBCOMMANDS[command];
+  return subcommands ? subcommands.map((subcommand) => `${command} ${subcommand}`) : [command];
+});
+var alternation = (list) => [...list].sort((a, b) => b.length - a.length).join("|");
+var word = (list) => new RegExp(`^\\s+(?:${alternation(list)})\\b`, "i");
+var prefix = (list) => new RegExp(`^\\s+(?:${alternation(list)})`, "i");
+var WORD = /[\w:-]*$/;
+var asOptions = (list, type) => list.map((label) => ({ label, type }));
+var DBT = [{ label: "dbt", type: "keyword" }];
+var COMMAND_OPTIONS = asOptions(COMMANDS, "keyword");
+var SUBCOMMAND_OPTIONS = Object.fromEntries(
+  Object.entries(SUBCOMMANDS).map(([command, subcommands]) => [
+    command,
+    asOptions(subcommands, "keyword")
+  ])
+);
+var ARGUMENT_OPTIONS = asOptions(ARGUMENTS, "variable");
+var FLAG_OPTIONS = asOptions(FLAGS, "constant");
+var METHOD_OPTIONS = asOptions(METHODS, "property");
+var optionsAfter = (words) => {
+  const [step, command, ...rest] = words;
+  if (step === void 0) return DBT;
+  if (step.toLowerCase() !== "dbt") return [];
+  if (command === void 0) return COMMAND_OPTIONS;
+  const subcommands = SUBCOMMAND_OPTIONS[command.toLowerCase()];
+  if (subcommands && rest.length === 0) return subcommands;
+  const lastArgument = rest.filter((it) => it.startsWith("-")).at(-1);
+  const selecting = lastArgument !== void 0 && SELECTORS.includes(lastArgument.toLowerCase());
+  return selecting ? [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS, ...METHOD_OPTIONS] : [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS];
+};
+var complete = (context) => {
+  const typed = context.matchBefore(WORD);
+  if (!typed?.text && !context.explicit) return null;
+  const from = typed?.from ?? context.pos;
+  const line = context.state.doc.lineAt(from);
+  const options = optionsAfter(
+    line.text.slice(0, from - line.from).split(/\s+/).filter(Boolean)
+  );
+  return options.length > 0 ? { from, options, validFor: WORD } : null;
+};
+var dbt = simpleMode({
+  languageData: {
+    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
+    autocomplete: complete
+  },
+  start: [
+    { regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string" },
+    // Word-bounded, so `dbtX` is not a dbt step whose first word happens to
+    // colour — the same thing the completion source asks of it.
+    { regex: /dbt\b/, token: "keyword", sol: true },
+    { regex: word(COMMAND_PHRASES), token: "keyword" },
+    { regex: word(ARGUMENTS), token: "variableName" },
+    { regex: prefix(METHODS), token: "propertyName" },
+    { regex: prefix(FLAGS), token: "attributeName" },
+    { regex: /(?:@|\*|,|\+\d+|\d+\+|\+)/, token: "operator" },
+    { regex: /'.*'/, token: "string" },
+    { regex: /true|false/, token: "atom" }
+  ]
+});
+
+// src/components/CodeEditor/modes/jsonnet.ts
+var COMMENT_END = /^\*\//;
+var COMMENT_START = /^\/\/|^#/;
+var C_COMMENT_START = /^\/\*/;
+var TEXT_BLOCK = /^\|\|\|/;
+var TEXT_BLOCK_END = /^\s*\|\|\|/;
+var RAW_DOUBLE = /^""/;
+var RAW_SINGLE = /^''/;
+var CLOSE_DOUBLE = /^"/;
+var CLOSE_SINGLE = /^'/;
+var ESCAPE = /^\\[\\"'/bfnrt0]/;
+var UNICODE_ESCAPE = /^\\u[0-9a-fA-F]{4}/;
+var BACKSLASH = /^\\/;
+var IMPORT = /^import(?:str)?\s*(@?)(["'])/;
+var QUOTE = /^(@?)(["'])/;
+var ROOT = /^\$/;
+var NUMBER = /^(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i;
+var OPERATOR = /^[-+/*=<>!&~^|$%]+/;
+var IDENTIFIER = /^[a-zA-Z_][a-zA-Z0-9_]*/;
+var KEYWORDS = {
+  local: "keyword",
+  self: "keyword",
+  super: "keyword",
+  assert: "keyword",
+  function: "keyword",
+  if: "keyword",
+  then: "keyword",
+  else: "keyword",
+  for: "keyword",
+  in: "keyword",
+  tailstrict: "keyword",
+  error: "keyword",
+  true: "atom",
+  false: "atom",
+  null: "atom"
+};
+var jsonnet = {
+  name: "jsonnet",
+  // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+  languageData: { commentTokens: { line: "//", block: { open: "/*", close: "*/" } } },
+  startState: () => ({
+    cComment: false,
+    textBlock: false,
+    textBlockIndent: null,
+    string: false,
+    importString: false,
+    stringSingle: false,
+    stringRaw: false
+  }),
+  token: (stream, state) => {
+    if (state.cComment) {
+      if (stream.match(COMMENT_END)) {
+        state.cComment = false;
+        return "comment";
+      }
+      stream.next();
+      return "comment";
+    }
+    if (state.textBlock) {
+      if (state.textBlockIndent == null) {
+        if (stream.match(TEXT_BLOCK_END)) {
+          state.textBlock = false;
+          return "string";
+        }
+        state.textBlockIndent = stream.indentation();
+      }
+      if (stream.indentation() >= state.textBlockIndent) {
+        stream.skipToEnd();
+        return "string";
+      }
+      if (stream.match(TEXT_BLOCK_END)) {
+        state.textBlock = false;
+        return "string";
+      }
+      stream.next();
+      return "invalid";
+    }
+    if (state.string || state.importString) {
+      const style = state.string ? "string" : "meta";
+      if (state.stringRaw) {
+        if (stream.match(state.stringSingle ? RAW_SINGLE : RAW_DOUBLE)) return "escape";
+      } else {
+        if (stream.match(ESCAPE)) return "escape";
+        if (stream.match(UNICODE_ESCAPE)) return "escape";
+        if (stream.match(BACKSLASH)) return "invalid";
+      }
+      if (stream.match(state.stringSingle ? CLOSE_SINGLE : CLOSE_DOUBLE)) {
+        state.string = false;
+        state.importString = false;
+        return style;
+      }
+      stream.next();
+      return style;
+    }
+    if (stream.match(COMMENT_START)) {
+      stream.skipToEnd();
+      return "comment";
+    }
+    if (stream.match(C_COMMENT_START)) {
+      state.cComment = true;
+      return "comment";
+    }
+    const imported = stream.match(IMPORT);
+    if (Array.isArray(imported)) {
+      state.importString = true;
+      state.stringRaw = imported[1] === "@";
+      state.stringSingle = imported[2] === "'";
+      return "meta";
+    }
+    const quoted = stream.match(QUOTE);
+    if (Array.isArray(quoted)) {
+      state.string = true;
+      state.stringRaw = quoted[1] === "@";
+      state.stringSingle = quoted[2] === "'";
+      return "string";
+    }
+    if (stream.match(TEXT_BLOCK)) {
+      state.textBlock = true;
+      state.textBlockIndent = null;
+      return "string";
+    }
+    if (stream.match(ROOT)) return "keyword";
+    if (stream.match(NUMBER)) return "number";
+    if (stream.match(OPERATOR)) return "operator";
+    const identifier = stream.match(IDENTIFIER);
+    if (Array.isArray(identifier)) return KEYWORDS[identifier[0]] ?? null;
+    stream.next();
+    return null;
+  }
+};
+var resolveToken = (token, fallbackChannels, alpha) => {
+  const channels = typeof document === "undefined" ? fallbackChannels : getComputedStyle(document.documentElement).getPropertyValue(`--${token}`).trim() || fallbackChannels;
+  return alpha === void 0 ? `rgb(${channels})` : `rgb(${channels} / ${alpha})`;
+};
+var isDarkScheme = () => typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark";
+var SSR_SIGNAL = "ssr";
+var readThemeSignal = () => {
+  if (typeof document === "undefined") return SSR_SIGNAL;
+  const root = document.documentElement;
+  return `${root.getAttribute("data-theme") ?? ""}:${root.getAttribute("data-brand") ?? ""}`;
+};
+var subscribeThemeSignal = (onChange) => {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme", "data-brand"]
+  });
+  return () => observer.disconnect();
+};
+var useThemeSignal = () => useSyncExternalStore(subscribeThemeSignal, readThemeSignal, () => SSR_SIGNAL);
+var themeCache = /* @__PURE__ */ new Map();
+var useThemedExtension = (cacheKey, build) => {
+  const themeSignal = useThemeSignal();
+  const key = `${themeSignal} ${cacheKey}`;
+  let cached = themeCache.get(key);
+  if (!cached) {
+    cached = build();
+    themeCache.set(key, cached);
+  }
+  return cached;
+};
+
+// src/components/CodeEditor/helpers.ts
+var LANGUAGE_MODES = [
+  "application/json",
+  "text/plain",
+  "text/x-python",
+  "text/x-sql",
+  "text/x-mysql",
+  "text/x-pgsql",
+  "text/x-mssql",
+  // Snowflake, under a historical name — these strings are a published prop contract.
+  "text/x-sfsql",
+  "text/x-bqsql",
+  "text/x-plsql",
+  "text/x-rsrc",
+  "text/x-sh",
+  "text/x-toml",
+  "text/jsonnet",
+  "text/x-dbt",
+  "text/javascript",
+  "text/typescript"
+];
+var isLanguageMode = (mode) => LANGUAGE_MODES.includes(mode);
+var READ_ONLY_EDITOR = '&.cm-editor:has(.cm-content[contenteditable="false"])';
+var EDITABLE_EDITOR = '&.cm-editor:has(.cm-content[contenteditable="true"])';
+var buildBaseThemeStyles = () => ({
+  "*": { lineHeight: "20px" },
+  "*::selection": {
+    backgroundColor: resolveToken("primary", "31 143 255"),
+    color: `${resolveToken("primary-foreground", "255 255 255")} !important`
+  },
+  [READ_ONLY_EDITOR]: {
+    backgroundColor: resolveToken("secondary", "226 232 240")
+  },
+  [`${READ_ONLY_EDITOR} .cm-gutters`]: {
+    backgroundColor: resolveToken("border", "229 231 235")
+  },
+  "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
+  "&.cm-editor, &.cm-editor .cm-scroller": {
+    minHeight: "100%",
+    flexGrow: 1,
+    alignItems: "stretch !important",
+    outline: "none"
+  },
+  ".cm-gutter.cm-foldGutter": { display: "none !important" },
+  ".cm-gutter.cm-lineNumbers": { paddingLeft: "20px", paddingRight: "6px" },
+  ".cm-gutters": { height: "auto" },
+  // merge (diff) view
+  '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors.error[100] },
+  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors.green[100] },
+  '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors.error[200] },
+  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors.green[200] },
+  '&[class*="cm-merge-"] .cm-deletedText': { background: colors.error[200] },
+  '&[class*="cm-merge-"] .cm-changedText': { background: colors.green[200] },
+  '&[class*="cm-merge-"]': {
+    backgroundColor: `${colors.white} !important`
+  },
+  '&[class*="cm-merge-"] .cm-gutters': {
+    backgroundColor: `${colors.white} !important`
+  },
+  ".cm-changeGutter": { position: "absolute", zIndex: -1, width: "100%", paddingLeft: 0 },
+  '&[class*="cm-merge-"] .cm-changedLine,&[class*="cm-merge-"] .cm-line, &[class*="cm-merge-"] .cm-deletedChunk': { paddingLeft: 0 }
+});
+var ALWAYS_OFF = {
+  drawSelection: false,
+  foldGutter: false,
+  foldKeymap: false,
+  highlightActiveLine: false,
+  highlightActiveLineGutter: false
+};
+var buildBasicSetup = (readOnly) => ({
+  ...ALWAYS_OFF,
+  ...readOnly ? {
+    closeBrackets: false,
+    closeBracketsKeymap: false,
+    lintKeymap: false,
+    indentOnInput: false,
+    rectangularSelection: false,
+    dropCursor: false,
+    highlightSelectionMatches: false
+  } : null
+});
+var buildCustomTheme = () => {
+  const foreground = resolveToken("foreground", "30 41 59");
+  return githubLightInit({
+    settings: {
+      fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
+      background: resolveToken("background", "249 250 251"),
+      foreground,
+      gutterBackground: resolveToken("muted", "241 245 249"),
+      gutterForeground: resolveToken("muted-foreground", "100 116 139"),
+      gutterBorder: "transparent",
+      lineHighlight: "transparent",
+      selection: resolveToken("primary", "31 143 255")
+    },
+    styles: [
+      { tag: [tags.name, tags.special(tags.string), tags.bracket], color: foreground },
+      { tag: tags.standard(tags.name), color: colors.purple[600] },
+      { tag: tags.special(tags.name), color: colors.cyan[700] },
+      { tag: tags.string, color: colors.warning[700] }
+    ]
+  });
+};
+var getLanguageMode = (mode) => {
+  switch (mode) {
+    case void 0:
+    case "application/json":
+      return json();
+    case "text/x-python":
+      return python();
+    case "text/x-sql":
+      return getSqlLanguageSupport(StandardSQL);
+    case "text/x-mysql":
+      return getSqlLanguageSupport(MySQL);
+    case "text/x-pgsql":
+      return getSqlLanguageSupport(PostgreSQL);
+    case "text/x-mssql":
+      return getSqlLanguageSupport(MSSQL);
+    case "text/x-sfsql":
+      return getSqlLanguageSupport("snowflake");
+    case "text/x-bqsql":
+      return getSqlLanguageSupport("bigquery");
+    case "text/x-plsql":
+      return getSqlLanguageSupport(PLSQL);
+    case "text/x-rsrc":
+      return StreamLanguage.define(r);
+    case "text/x-sh":
+      return StreamLanguage.define(shell);
+    case "text/x-toml":
+      return StreamLanguage.define(toml);
+    case "text/jsonnet":
+      return StreamLanguage.define(jsonnet);
+    case "text/x-dbt":
+      return StreamLanguage.define(dbt);
+    case "text/javascript":
+      return javascript({ jsx: true });
+    case "text/typescript":
+      return javascript({ jsx: true, typescript: true });
+    // No language — `text/plain` lands here, and so does any mode added to
+    // LANGUAGE_MODES without an arm above. Unstyled text is the safe degradation;
+    // a `json()` default would colour unrelated content as if it were JSON.
+    default:
+      return [];
+  }
+};
+var shouldLintJson = (mode, readOnly) => mode === "application/json" && !readOnly;
+var ButtonToolbar = ({ value, children }) => {
+  if (!value && !children) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "tw:absolute tw:right-3 tw:top-1 tw:z-10 tw:flex tw:gap-0.5 tw:overflow-visible tw:rounded tw:border tw:border-solid tw:border-border tw:!bg-background tw:p-px tw:shadow-sm", children: [
+    !!value && /* @__PURE__ */ jsx(ClipboardButton, { size: "icon-xs", variant: "invisible", text: value }),
+    children
+  ] });
+};
+var buildInputChrome = (isArgo) => ({
+  surface: isArgo ? resolveToken("muted", "241 245 249") : colors.neutral[100],
+  borderColor: isArgo ? resolveToken("input", "203 213 225") : colors.neutral[100],
+  readOnlySurface: isArgo ? resolveToken("muted", "241 245 249") : colors.neutral[150],
+  readOnlyBorderColor: isArgo ? resolveToken("input", "203 213 225") : colors.neutral[150],
+  hoverBorderColor: null,
+  focusBorderColor: isArgo ? resolveToken("primary", "37 99 235") : resolveToken("ring", "31 143 255"),
+  focusRing: `0 0 0 4px ${resolveToken("ring", "31 143 255", isArgo ? 0.5 : 0.3)}`,
+  radius: isArgo ? "var(--radius-lg, 0.25rem)" : "0.25rem",
+  // 2px border + 2×this + `.cm-content`'s own 4px + a 20px line, against the
+  // height a one-line `TextInput` has: argo forces `sizing: 'medium'` (36px),
+  // legacy leaves it at `default` (40px).
+  paddingY: isArgo ? "3px" : "5px",
+  // Tops `.cm-line`'s 6px/2px up to the 16px an input's text is inset by.
+  paddingX: { left: "10px", right: "14px" }
+});
+var buildCanvasChrome = () => ({
+  surface: resolveToken("card", "255 255 255"),
+  borderColor: "transparent",
+  readOnlySurface: resolveToken("muted", "241 245 249"),
+  readOnlyBorderColor: "transparent",
+  hoverBorderColor: resolveToken("ring", "31 143 255"),
+  focusBorderColor: resolveToken("ring", "31 143 255"),
+  focusRing: `0 0 0 4px ${resolveToken("ring", "31 143 255", 0.3)}`,
+  radius: "8px",
+  paddingY: "8px",
+  paddingX: null
+});
+var buildChromeStyles = (chrome) => ({
+  "&.cm-editor": {
+    border: `solid 1px ${chrome.borderColor}`,
+    borderRadius: chrome.radius,
+    backgroundColor: chrome.surface,
+    paddingTop: chrome.paddingY,
+    paddingBottom: chrome.paddingY
+  },
+  "&.cm-editor :is(.cm-gutters,.cm-scroller)": { backgroundColor: chrome.surface },
+  ...chrome.paddingX ? {
+    // Only without a gutter: there the editor reads as a one-line input and
+    // its text should start where a neighbouring `TextInput`'s does. With a
+    // gutter, the gutter owns the left edge.
+    "&.cm-editor:not(:has(.cm-gutters)) .cm-content": {
+      paddingLeft: chrome.paddingX.left,
+      paddingRight: chrome.paddingX.right
+    }
+  } : null,
+  ...chrome.hoverBorderColor ? { [`${EDITABLE_EDITOR}:hover`]: { borderColor: chrome.hoverBorderColor } } : null,
+  [`${EDITABLE_EDITOR}:focus-within`]: {
+    borderColor: chrome.focusBorderColor,
+    boxShadow: chrome.focusRing
+  },
+  [READ_ONLY_EDITOR]: {
+    backgroundColor: chrome.readOnlySurface,
+    borderColor: chrome.readOnlyBorderColor
+  },
+  [`${READ_ONLY_EDITOR} .cm-gutters`]: { backgroundColor: chrome.readOnlySurface },
+  [`${READ_ONLY_EDITOR} .cm-scroller`]: { backgroundColor: chrome.readOnlySurface }
+});
+var setSearchEffect = StateEffect.define();
+function findMatches(doc, query) {
+  if (!query) return [];
+  const text = doc.toString();
+  try {
+    const regex = new RegExp(escapeStringRegexp(query), "gi");
+    return Array.from(text.matchAll(regex)).map((match, index) => {
+      const from = match.index;
+      const to = from + match[0].length;
+      return { from, to, text: match[0], localIndex: index };
+    });
+  } catch (e) {
+    console.warn("Invalid search regex:", e);
+    return [];
+  }
+}
+function createDecorations(matches, selectedLocalIndex) {
+  const decorations = matches.map((match) => {
+    const isSelected = match.localIndex === selectedLocalIndex;
+    const decoration = Decoration.mark({
+      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
+    });
+    return decoration.range(match.from, match.to);
+  });
+  return Decoration.set(decorations, true);
+}
+var searchField = StateField.define({
+  create() {
+    return {
+      query: "",
+      selectedMatchIndex: void 0,
+      matches: [],
+      decorations: Decoration.none
+    };
+  },
+  update(state, tr) {
+    let newState = state;
+    for (const effect of tr.effects) {
+      if (!effect.is(setSearchEffect)) {
+        continue;
+      }
+      const { query, selectedMatchIndex } = effect.value;
+      const matches = findMatches(tr.state.doc, query);
+      const decorations = createDecorations(matches, selectedMatchIndex);
+      newState = {
+        query,
+        selectedMatchIndex,
+        matches,
+        decorations
+      };
+    }
+    if (tr.docChanged && newState.query) {
+      const matches = findMatches(tr.state.doc, newState.query);
+      const decorations = createDecorations(matches, newState.selectedMatchIndex);
+      newState = {
+        ...newState,
+        matches,
+        decorations
+      };
+    }
+    return newState;
+  },
+  provide: (field) => EditorView.decorations.from(field, (state) => state.decorations)
+});
+var searchViewPlugin = ViewPlugin.fromClass(
+  class {
+    lastSelectedIndex;
+    update(update) {
+      const state = update.state.field(searchField);
+      if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
+        const match = state.matches[state.selectedMatchIndex];
+        if (match) {
+          requestAnimationFrame(() => {
+            update.view.dispatch({
+              effects: EditorView.scrollIntoView(match.from, { y: "center" })
+            });
+          });
+        }
+        this.lastSelectedIndex = state.selectedMatchIndex;
+      }
+      if (state.selectedMatchIndex === void 0) {
+        this.lastSelectedIndex = void 0;
+      }
+    }
+  }
+);
+var searchTheme = EditorView.baseTheme({
+  ".cm-searchMatch": {
+    backgroundColor: colors.blue[100]
+  },
+  ".cm-searchMatch > span": {
+    color: `${colors.blue[600]} !important`
+  },
+  ".cm-searchMatch-selected": {
+    backgroundColor: colors.blue[600]
+  },
+  ".cm-searchMatch-selected > span": {
+    color: `${colors.white} !important`
+  }
+});
+function searchExtension() {
+  return [searchField, searchViewPlugin, searchTheme];
+}
+function updateSearch(view, query, selectedMatchIndex) {
+  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
+}
+var ToggleComponentHelp = () => /* @__PURE__ */ jsxs("div", { children: [
+  "Use ",
+  /* @__PURE__ */ jsx(Kbd, { children: isMac ? "Command+/" : "Ctrl+/" }),
+  " to toggle comments."
+] });
+var establishesFixedContainingBlock = (style) => style.transform !== "none" || style.translate !== "none" || style.rotate !== "none" || style.scale !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || /\b(paint|layout|strict|content)\b/.test(style.contain) || /\b(transform|perspective|filter|contain)\b/.test(style.willChange);
+var crops = (style) => style.overflowX !== "visible" || style.overflowY !== "visible" || style.maskImage !== "none" || style.contentVisibility !== "visible" || /\b(paint|strict|content)\b/.test(style.contain);
+var findTooltipHost = (from) => {
+  let outermostCropper = null;
+  for (let node = from.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    if (crops(style)) {
+      outermostCropper = node;
+    } else if (establishesFixedContainingBlock(style)) {
+      return outermostCropper?.parentElement ?? node;
+    }
+  }
+  return outermostCropper?.parentElement ?? null;
+};
+var tooltipsExtension = () => {
+  const layer = new Compartment();
+  return [
+    layer.of(tooltips()),
+    ViewPlugin.define((view) => {
+      const scheduled = setTimeout(() => {
+        if (!view.dom.isConnected) return;
+        const parent = findTooltipHost(view.dom);
+        if (parent) view.dispatch({ effects: layer.reconfigure(tooltips({ parent })) });
+      });
+      return { destroy: () => clearTimeout(scheduled) };
+    })
+  ];
+};
+var useTooltipsExtension = () => useMemo(tooltipsExtension, []);
+
+// src/components/CodeEditor/variableCompletion.ts
+var BOOST = 2e3;
+var NAME = String.raw`[\w-]*`;
+var AT_CARET = new RegExp(String.raw`(?:\{{1,2} ?)?${NAME}$`);
+var NAME_AT_END = new RegExp(`${NAME}$`);
+var OPENING = /\{{1,2} ?$/;
+var CLOSING = /^ ?\}{1,2}/;
+var completeVariables = (variables = []) => {
+  if (variables.length === 0) return () => null;
+  const options = variables.map(({ name, value }) => ({
+    // The bare name: `SqlEditor` filters prefix-only while `CodeEditor` filters
+    // fuzzily, and this is the only spelling both accept whether or not the caret
+    // has typed the braces. The braces are `displayLabel`, which is what renders.
+    label: name,
+    displayLabel: `{{${name}}}`,
+    detail: value,
+    type: "variable",
+    boost: BOOST,
+    apply: (view, completion, from, to) => {
+      const { doc } = view.state;
+      const line = doc.lineAt(from);
+      const insert = `{{${completion.label}}}`;
+      const opening = OPENING.exec(doc.sliceString(line.from, from));
+      const closing = CLOSING.exec(doc.sliceString(to, line.to));
+      const start = opening ? from - opening[0].length : from;
+      const end = closing ? to + closing[0].length : to;
+      view.dispatch({
+        changes: { from: start, to: end, insert },
+        selection: { anchor: start + insert.length }
+      });
+    }
+  }));
+  return (context) => {
+    const match = context.matchBefore(AT_CARET);
+    if (!match?.text) return null;
+    const [name = ""] = NAME_AT_END.exec(match.text) ?? [];
+    return { from: match.to - name.length, options };
+  };
+};
+var useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
+var emptyObject = {};
+var CodeEditor = ({
+  value,
+  previousValue,
+  onChange,
+  variant = "plain",
+  mode = "application/json",
+  placeholder: placeholder$1 = "",
+  ariaLabel,
+  searchQuery,
+  searchMatchIndex,
+  readOnly = false,
+  inputLocked = false,
+  autocompletions,
+  completionSource,
+  variables,
+  extraKeys = emptyObject,
+  withToggleCommentHint = false,
+  withAutofocus = false,
+  withLineNumbers = true,
+  withLineWrapping = true,
+  withCollapseUnchanged = false,
+  withCopyButton = false,
+  completeAny = false,
+  help = null,
+  helpPostfix = null,
+  renderAdditionalButtons,
+  className
+}) => {
+  const handleChange = useStableCallback((next) => onChange?.(next));
+  const withSearch = searchQuery !== void 0;
+  const editorRef = useRef(null);
+  useEffect(() => {
+    const view = editorRef.current?.view;
+    if (view && withSearch) updateSearch(view, searchQuery, searchMatchIndex);
+  }, [withSearch, searchQuery, searchMatchIndex]);
+  const handleCreateEditor = useStableCallback((view) => {
+    if (searchQuery) updateSearch(view, searchQuery, searchMatchIndex);
+  });
+  const extraKeysRef = useRef(extraKeys);
+  useLayoutEffect(() => {
+    extraKeysRef.current = extraKeys;
+  });
+  const boundKeysSignature = Object.keys(extraKeys).join("\n");
+  const boundKeys = useMemo(
+    () => boundKeysSignature.split("\n").filter(Boolean),
+    [boundKeysSignature]
+  );
+  const tooltipLayer = useTooltipsExtension();
+  const variableCompletion = useVariableCompletion(variables);
+  const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
+  const isArgo = useArgoDesign();
+  const isField = variant === "field";
+  const baseTheme = useThemedExtension(
+    isField ? `code-editor:field:${isArgo ? "argo" : "legacy"}` : "code-editor:chrome",
+    () => EditorView.theme({
+      ...buildBaseThemeStyles(),
+      ...isField ? buildChromeStyles(buildInputChrome(isArgo)) : null
+    })
+  );
+  const commonExtensions = useMemo(() => {
+    const callerCompletions = completionSource ?? (completeAny ? completeAnyWord : autocompletions?.length ? autocompletions : null);
+    const completionEntries = [
+      ...callerCompletions ? [{ autocomplete: callerCompletions }] : [],
+      { autocomplete: variableCompletion }
+    ];
+    return [
+      getLanguageMode(mode),
+      shouldLintJson(mode, readOnly) ? linter(jsonParseLinter()) : [],
+      withLineWrapping ? EditorView.lineWrapping : [],
+      EditorState.languageData.of(() => completionEntries),
+      keymap$1.of(
+        boundKeys.map((key) => ({
+          key,
+          run: () => {
+            extraKeysRef.current[key]?.();
+            return true;
+          }
+        }))
+      ),
+      readOnly ? [] : [
+        // CodeMirror's own default. Gating it on the props hid completions the
+        // *language* supplies — dbt's vocabulary, Snowflake's keywords — behind
+        // a shortcut, and macOS leaves no usable one. With nothing to offer, no
+        // popup opens anyway.
+        autocompletion()
+      ],
+      ariaLabel ? EditorView.contentAttributes.of({ "aria-label": ariaLabel }) : [],
+      withSearch ? searchExtension() : [],
+      tooltipLayer,
+      baseTheme
+    ];
+  }, [
+    autocompletions,
+    completionSource,
+    variableCompletion,
+    completeAny,
+    boundKeys,
+    mode,
+    readOnly,
+    withLineWrapping,
+    baseTheme,
+    ariaLabel,
+    withSearch,
+    tooltipLayer
+  ]);
+  const extensions = useMemo(() => {
+    return [
+      ...commonExtensions,
+      placeholder(placeholder$1),
+      EditorView.editable.of(!readOnly),
+      // The lock is this facet and nothing else. `contenteditable` is what the
+      // read-only wash keys off, and `basicSetup` is what holds the undo history,
+      // so leaving both alone is what makes the lock invisible.
+      EditorState.readOnly.of(readOnly || inputLocked),
+      previousValue ? unifiedMergeView({
+        original: previousValue,
+        mergeControls: false,
+        highlightChanges: false,
+        collapseUnchanged: withCollapseUnchanged ? {} : void 0
+      }) : []
+    ];
+  }, [commonExtensions, placeholder$1, readOnly, inputLocked, previousValue, withCollapseUnchanged]);
+  const config = useMemo(() => {
+    return {
+      ...buildBasicSetup(readOnly),
+      lineNumbers: withLineNumbers,
+      // Mod-f opens CodeMirror's own panel, which would run a second query and a
+      // second match count over the same document beside the caller's input.
+      ...withSearch ? { searchKeymap: false } : null
+    };
+  }, [withLineNumbers, readOnly, withSearch]);
+  return (
+    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-variant": variant,
+        className: cn(
+          // Scoped to the box CodeMirror renders into rather than to every child, so
+          // the toolbar below does not have to undo all three in `!important`.
+          "tw:relative tw:flex tw:min-h-0 tw:flex-col tw:[&_.cm-mergeViewEditor]:overflow-visible tw:[&_.cm-mergeViewEditors]:h-full tw:[&_.cm-mergeView]:h-full tw:[&_>.cm-theme]:h-full",
+          // A field's `.cm-editor` is rounded, so the square box behind it would show
+          // at the corners, and `overflow-auto` would crop the focus ring — a shadow
+          // painted outside the editor's own box.
+          isField ? "tw:[&_>.cm-theme]:overflow-visible tw:[&_>.cm-theme]:bg-transparent" : "tw:[&_>.cm-theme]:overflow-auto tw:[&_>.cm-theme]:bg-background",
+          className
+        ),
+        onKeyDown: (event) => {
+          if (event.key === keyCodes.ESCAPE) {
+            event.stopPropagation();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(ButtonToolbar, { value: withCopyButton ? value : void 0, children: renderAdditionalButtons?.(value) }),
+          /* @__PURE__ */ jsx(
+            CodeMirror,
+            {
+              ref: editorRef,
+              onCreateEditor: handleCreateEditor,
+              theme: customTheme,
+              value,
+              onChange: handleChange,
+              extensions,
+              autoFocus: withAutofocus,
+              basicSetup: config
+            }
+          ),
+          !readOnly && (withToggleCommentHint || help || helpPostfix) && /* @__PURE__ */ jsxs(HelpBlock, { className: "tw:mt-2 tw:flex tw:flex-wrap tw:gap-1", children: [
+            help,
+            withToggleCommentHint ? /* @__PURE__ */ jsx(ToggleComponentHelp, {}) : null,
+            helpPostfix
+          ] })
+        ]
+      }
+    )
+  );
+};
+var activeQueryFirstLine = Decoration.line({ class: "cm-active-query cm-active-query-first" });
+var activeQueryMiddleLine = Decoration.line({ class: "cm-active-query" });
+var activeQueryLastLine = Decoration.line({ class: "cm-active-query cm-active-query-last" });
+var activeQuerySingleLine = Decoration.line({
+  class: "cm-active-query cm-active-query-first cm-active-query-last"
+});
+var findActiveQueryRange = (doc, cursorPos, boundaries) => {
+  if (boundaries.length === 0) return null;
+  let match = boundaries[boundaries.length - 1];
+  for (const boundary of boundaries) {
+    if (cursorPos <= boundary.to) {
+      match = boundary;
+      break;
+    }
+  }
+  if (!match) return null;
+  const queryText = doc.slice(match.from, match.to);
+  const leadingWhitespace = queryText.length - queryText.trimStart().length;
+  const trailingWhitespace = queryText.length - queryText.trimEnd().length;
+  const trimmedStart = match.from + leadingWhitespace;
+  const trimmedEnd = match.to - trailingWhitespace;
+  if (trimmedStart >= trimmedEnd) return null;
+  return { from: trimmedStart, to: trimmedEnd };
+};
+var computeBoundaries = (queries) => {
+  const boundaries = [];
+  let offset = 0;
+  for (const query of queries) {
+    boundaries.push({ from: offset, to: offset + query.length });
+    offset += query.length;
+  }
+  return boundaries;
+};
+var mapBoundariesThroughChanges = (boundaries, changes) => {
+  const prevLen = changes.length;
+  const mapped = [];
+  for (const b of boundaries) {
+    const from = changes.mapPos(Math.max(0, Math.min(b.from, prevLen)), -1);
+    const to = changes.mapPos(Math.max(0, Math.min(b.to, prevLen)), 1);
+    if (from < to) mapped.push({ from, to });
+  }
+  return mapped;
+};
+var buildDecorations = (view, range) => {
+  const startLine = view.state.doc.lineAt(range.from).number;
+  const endLine = view.state.doc.lineAt(range.to).number;
+  const decorations = [];
+  for (let lineNum = startLine; lineNum <= endLine; lineNum++) {
+    const lineStart = view.state.doc.line(lineNum).from;
+    if (startLine === endLine) {
+      decorations.push(activeQuerySingleLine.range(lineStart));
+    } else if (lineNum === startLine) {
+      decorations.push(activeQueryFirstLine.range(lineStart));
+    } else if (lineNum === endLine) {
+      decorations.push(activeQueryLastLine.range(lineStart));
+    } else {
+      decorations.push(activeQueryMiddleLine.range(lineStart));
+    }
+  }
+  return Decoration.set(decorations);
+};
+var activeQueryHighlight = (splitQueries) => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations = Decoration.none;
+        debounceTimer = null;
+        seq = 0;
+        cachedDoc = "";
+        cachedBoundaries = [];
+        destroyed = false;
+        constructor(view) {
+          this.scheduleDocParse(view);
+        }
+        update(update) {
+          if (update.focusChanged && !update.view.hasFocus) {
+            this.decorations = Decoration.none;
+            return;
+          }
+          if (update.docChanged) {
+            if (this.cachedBoundaries.length > 0) {
+              this.cachedBoundaries = mapBoundariesThroughChanges(
+                this.cachedBoundaries,
+                update.changes
+              );
+              this.cachedDoc = update.state.doc.toString();
+              this.updateFromCache(update.view);
+            }
+            this.scheduleDocParse(update.view);
+          } else if (update.selectionSet || update.focusChanged && update.view.hasFocus) {
+            this.updateFromCache(update.view);
+          }
+        }
+        destroy() {
+          this.destroyed = true;
+          if (this.debounceTimer) clearTimeout(this.debounceTimer);
+        }
+        /**
+         * Update decorations using cached query boundaries.
+         * Only mutates this.decorations — does NOT call view.dispatch().
+         * When called from update() (sync), CodeMirror picks up the new
+         * decorations via the accessor. When called from the async
+         * scheduleDocParse callback, the caller must dispatch separately.
+         */
+        updateFromCache(view) {
+          if (!view.hasFocus) {
+            this.decorations = Decoration.none;
+            return;
+          }
+          const { main } = view.state.selection;
+          if (main.from !== main.to) {
+            this.decorations = Decoration.none;
+            return;
+          }
+          const doc = view.state.doc.toString();
+          if (doc !== this.cachedDoc) return;
+          if (this.cachedBoundaries.length === 0) {
+            this.decorations = Decoration.none;
+            return;
+          }
+          const range = findActiveQueryRange(doc, main.head, this.cachedBoundaries);
+          this.decorations = range ? buildDecorations(view, range) : Decoration.none;
+        }
+        /** Parse queries async (debounced) and update decorations. */
+        scheduleDocParse(view) {
+          if (this.debounceTimer) clearTimeout(this.debounceTimer);
+          this.debounceTimer = setTimeout(async () => {
+            const seq = ++this.seq;
+            const doc = view.state.doc.toString();
+            if (!doc.trim()) {
+              this.cachedDoc = doc;
+              this.cachedBoundaries = [];
+              if (this.decorations !== Decoration.none) {
+                this.decorations = Decoration.none;
+                if (!this.destroyed) view.dispatch();
+              }
+              return;
+            }
+            let queries;
+            try {
+              queries = await splitQueries(doc);
+            } catch {
+              return;
+            }
+            if (this.destroyed || seq !== this.seq) return;
+            this.cachedDoc = doc;
+            this.cachedBoundaries = computeBoundaries(queries);
+            this.updateFromCache(view);
+            if (!this.destroyed) view.dispatch();
+          }, 100);
+        }
+      },
+      { decorations: (v) => v.decorations }
+    ),
+    EditorView.baseTheme({
+      ".cm-active-query": {
+        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}`,
+        marginRight: "8px"
+      },
+      ".cm-active-query-first": {
+        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}, inset 0 1px 0 0 ${colors.blue[300]}`,
+        borderRadius: "4px 4px 0 0"
+      },
+      ".cm-active-query-last": {
+        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}, inset 0 -1px 0 0 ${colors.blue[300]}`,
+        borderRadius: "0 0 4px 4px"
+      },
+      ".cm-active-query-first.cm-active-query-last": {
+        boxShadow: `inset 0 0 0 1px ${colors.blue[300]}`,
+        borderRadius: "4px"
+      }
+    })
+  ];
+};
+var HighlightMarker = class extends GutterMarker {
+  toDOM() {
+    const marker = document.createElement("div");
+    marker.className = "cm-highlight-marker";
+    return marker;
+  }
+};
+var highlightMarker = new HighlightMarker();
+var forEachLineInRange = (doc, from, to, callback) => {
+  const results = [];
+  const fromLine = Math.max(1, from + 1);
+  const toLine = Math.min(doc.lines, to + 1);
+  for (let i = fromLine; i <= toLine; i++) {
+    const line = doc.line(i);
+    results.push(callback(line.from));
+  }
+  return results;
+};
+var setHighlightedLinesEffect = StateEffect.define();
+var highlightedLinesField = StateField.define({
+  create() {
+    return null;
+  },
+  update(value, transaction) {
+    for (const effect of transaction.effects) {
+      if (effect.is(setHighlightedLinesEffect)) {
+        return effect.value;
+      }
+    }
+    return value;
+  }
+});
+var highlightGutter = gutter({
+  class: "cm-highlight-gutter",
+  markers: (view) => {
+    const highlightInfo = view.state.field(highlightedLinesField, false);
+    if (!highlightInfo) {
+      return RangeSet.empty;
+    }
+    const markers = forEachLineInRange(
+      view.state.doc,
+      highlightInfo.from,
+      highlightInfo.to,
+      (lineFrom) => highlightMarker.range(lineFrom)
+    );
+    return RangeSet.of(markers);
+  }
+});
+var errorLineDecorations = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(decorations, transaction) {
+    decorations = decorations.map(transaction.changes);
+    for (const effect of transaction.effects) {
+      if (!effect.is(setHighlightedLinesEffect)) {
+        continue;
+      }
+      if (!effect.value || !effect.value.error) {
+        return Decoration.none;
+      }
+      const decorationArray = forEachLineInRange(
+        transaction.state.doc,
+        effect.value.error.from,
+        effect.value.error.to,
+        (lineFrom) => Decoration.line({ class: "cm-error-line" }).range(lineFrom)
+      );
+      return Decoration.set(decorationArray);
+    }
+    return decorations;
+  },
+  provide: (f) => EditorView.decorations.from(f)
+});
+var processingLineDecorations = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(decorations, transaction) {
+    decorations = decorations.map(transaction.changes);
+    for (const effect of transaction.effects) {
+      if (!effect.is(setHighlightedLinesEffect)) {
+        continue;
+      }
+      if (!effect.value || !effect.value.processing) {
+        return Decoration.none;
+      }
+      const decorationArray = forEachLineInRange(
+        transaction.state.doc,
+        effect.value.processing.from,
+        effect.value.processing.to,
+        (lineFrom) => Decoration.line({ class: "cm-processing-line" }).range(lineFrom)
+      );
+      return Decoration.set(decorationArray);
+    }
+    return decorations;
+  },
+  provide: (f) => EditorView.decorations.from(f)
+});
+var highlightedLinesTheme = EditorView.baseTheme({
+  ".cm-highlight-gutter": {
+    width: "2px",
+    marginRight: "2px"
+  },
+  ".cm-highlight-marker": {
+    width: "2px",
+    height: "100%",
+    backgroundColor: colors.blue[500]
+  },
+  ".cm-error-line": {
+    backgroundColor: `${colors.error[100]} !important`
+  },
+  ".cm-processing-line": {
+    backgroundColor: `${colors.blue[100]} !important`
+  }
+});
+function highlightingExtension() {
+  return [
+    highlightedLinesField,
+    highlightGutter,
+    errorLineDecorations,
+    processingLineDecorations,
+    highlightedLinesTheme
+  ];
+}
+function updateHighlighting(view, lines) {
+  view.dispatch({ effects: setHighlightedLinesEffect.of(lines ?? null) });
+}
+var OWN_KEYMAPS = {
+  defaultKeymap: false,
+  completionKeymap: false,
+  searchKeymap: false
+};
+var CUSTOM_KEYMAP = [
+  {
+    key: "Escape",
+    stopPropagation: true,
+    run: (view) => {
+      view.contentDOM.blur();
+      return true;
+    }
+  }
+];
+var OWN_KEYMAP_EXTENSION = keymap.of([...defaultKeymap, ...CUSTOM_KEYMAP]);
+var buildTheme = () => ({
+  ...buildBaseThemeStyles(),
+  ...buildChromeStyles(buildCanvasChrome())
+});
+var SqlEditor = ({
+  value,
+  onChange,
+  onSelectionChange,
+  onCreateEditor,
+  onDestroyEditor,
+  onBlurEditor,
+  onFocusEditor,
+  placeholder = "",
+  searchQuery = "",
+  searchMatchIndex,
+  readOnly = false,
+  queryParser,
+  autoFocus = false,
+  lineNumbers = true,
+  className,
+  schema,
+  completionSource,
+  variables,
+  defaultDatabase,
+  defaultSchema,
+  highlightLines,
+  dialect
+}) => {
+  const editorRef = useRef(null);
+  const handleChange = useStableCallback((next) => onChange?.(next));
+  const parseQueries = useStableCallback(async (sql) => await queryParser?.(sql) ?? []);
+  const handleBlur = useStableCallback((view) => onBlurEditor?.(view));
+  const handleFocus = useStableCallback((view) => onFocusEditor?.(view));
+  const handleUpdate = useStableCallback((update) => {
+    if (update.selectionSet) {
+      const { main } = update.state.selection;
+      onSelectionChange?.(update.state.sliceDoc(main.from, main.to));
+    }
+  });
+  const variableCompletion = useVariableCompletion(variables);
+  const withQueryParser = queryParser !== void 0;
+  const tooltipLayer = useTooltipsExtension();
+  const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
+  const themeExtension = useThemedExtension(
+    "sql-editor:chrome",
+    () => EditorView$1.theme(buildTheme())
+  );
+  const extensions = useMemo(() => {
+    return [
+      EditorView$1.lineWrapping,
+      OWN_KEYMAP_EXTENSION,
+      ...installExtensions({
+        schema,
+        defaultDatabase,
+        defaultSchema,
+        variableCompletion,
+        completionSource,
+        dialect
+      }),
+      searchExtension(),
+      highlightingExtension(),
+      withQueryParser ? activeQueryHighlight(parseQueries) : [],
+      tooltipLayer,
+      themeExtension,
+      EditorView$1.domEventHandlers({
+        blur: (_, view) => handleBlur(view),
+        focus: (_, view) => handleFocus(view)
+      })
+    ];
+  }, [
+    withQueryParser,
+    parseQueries,
+    schema,
+    completionSource,
+    defaultDatabase,
+    defaultSchema,
+    variableCompletion,
+    dialect,
+    handleBlur,
+    handleFocus,
+    themeExtension,
+    tooltipLayer
+  ]);
+  const defaultSetup = useMemo(() => {
+    return { ...buildBasicSetup(readOnly), ...OWN_KEYMAPS, lineNumbers };
+  }, [readOnly, lineNumbers]);
+  useEffect(() => {
+    if (editorRef.current?.view) {
+      updateHighlighting(editorRef.current.view, highlightLines);
+    }
+  }, [highlightLines]);
+  useEffect(() => {
+    if (editorRef.current?.view) {
+      updateSearch(editorRef.current.view, searchQuery, searchMatchIndex);
+    }
+  }, [searchQuery, searchMatchIndex]);
+  const handleDestroy = useStableCallback(() => onDestroyEditor?.());
+  useEffect(() => handleDestroy, [handleDestroy]);
+  const handleCreate = useStableCallback((view, state) => {
+    onCreateEditor?.(view, state);
+    if (highlightLines) {
+      updateHighlighting(view, highlightLines);
+    }
+    if (searchQuery) {
+      updateSearch(view, searchQuery, searchMatchIndex);
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    CodeMirror,
+    {
+      ref: editorRef,
+      theme: customTheme,
+      extensions,
+      value,
+      onChange: handleChange,
+      onUpdate: handleUpdate,
+      onCreateEditor: handleCreate,
+      autoFocus,
+      placeholder,
+      className,
+      readOnly,
+      editable: !readOnly,
+      basicSetup: defaultSetup
+    }
+  );
+};
+
+export { CodeEditor, LANGUAGE_MODES, SqlEditor, buildBasicSetup, isDarkScheme, isLanguageMode, resolveToken, useThemedExtension };
+//# sourceMappingURL=chunk-7PUUHEJQ.js.map
+//# sourceMappingURL=chunk-7PUUHEJQ.js.map