@keboola/design 3.2.0 → 4.0.0

package/dist/index.cjs

@@ -39,27 +39,9 @@ var ResizablePrimitive = require('react-resizable-panels');
 var RadixAvatar = require('@radix-ui/react-avatar');
 var RadixTabs = require('@radix-ui/react-tabs');
 var diff = require('diff');
-var view = require('@codemirror/view');
-var CodeMirror = require('@uiw/react-codemirror');
-var colors3 = require('@keboola/tailwind-config/colors');
-var state = require('@codemirror/state');
 var nodeDiff3 = require('node-diff3');
 var reactForm = require('@tanstack/react-form');
 var DOMPurify = require('dompurify');
-var autocomplete = require('@codemirror/autocomplete');
-var langJson = require('@codemirror/lang-json');
-var lint = require('@codemirror/lint');
-var merge = require('@codemirror/merge');
-var langJavascript = require('@codemirror/lang-javascript');
-var langPython = require('@codemirror/lang-python');
-var langSql = require('@codemirror/lang-sql');
-var language = require('@codemirror/language');
-var r = require('@codemirror/legacy-modes/mode/r');
-var shell = require('@codemirror/legacy-modes/mode/shell');
-var codemirrorThemeGithub = require('@uiw/codemirror-theme-github');
-var codemirrorLangSfsql = require('@keboola/codemirror-lang-sfsql');
-var commands = require('@codemirror/commands');
-var codemirrorLangSql = require('@keboola/codemirror-lang-sql');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -95,8 +77,6 @@ var BoringAvatar__default = /*#__PURE__*/_interopDefault(BoringAvatar);
 var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrimitive);
 var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
 var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
-var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
-var colors3__default = /*#__PURE__*/_interopDefault(colors3);
 var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 
 var __defProp = Object.defineProperty;
@@ -168,7 +148,6 @@ var createChangeInputEvent = (input) => {
 // src/constants/keyCodes.ts
 var keyCodes = {
   ENTER: "Enter",
-  ESCAPE: "Escape",
   SPACE: " "
 };
 var ThemeContext = react.createContext(null);
@@ -6904,8 +6883,8 @@ var coerceColorPickerValue = (value) => {
   const body = extractHexBody(value);
   if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;
   if (body.length === 3 || body.length === 4) {
-    const [r2, g, b] = body;
-    return `#${r2}${r2}${g}${g}${b}${b}`.toLowerCase();
+    const [r, g, b] = body;
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
   }
   if (body.length === 6 || body.length === 8) {
     return `#${body.slice(0, 6).toLowerCase()}`;
@@ -9346,7 +9325,11 @@ var AlertRoot = ({
         "has-[[data-slot=alert-icon]]:tw-gap-x-2",
         // fonts
         "tw-text-sm",
+        // Legacy keeps the fixed neutral text; argo uses the semantic foreground
+        // so the alert flips with the brand's light/dark palette (the categorical
+        // variant tint stays — only the text token becomes brand-aware).
         "tw-text-neutral-800",
+        "data-[argo=true]:tw-text-foreground",
         "tw-text-left",
         "tw-p-4",
         // border
@@ -10320,17 +10303,40 @@ var AIGradientsSvg = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", h
 // src/components/ThemeProvider/brandToCssVars.ts
 var brandToCssVars = (brand, resolvedMode) => {
   const vars = {};
-  const colors8 = resolvedMode === "dark" ? brand.colorsDark : brand.colors;
-  if (colors8) {
-    vars["--color-background"] = colors8.background;
-    vars["--color-foreground"] = colors8.foreground;
-    vars["--color-muted"] = colors8.muted;
-    vars["--color-muted-foreground"] = colors8.mutedForeground;
-    vars["--color-border"] = colors8.border;
-    vars["--color-primary"] = colors8.primary;
-    vars["--color-primary-foreground"] = colors8.primaryForeground;
-    vars["--color-destructive"] = colors8.destructive;
-    vars["--color-destructive-foreground"] = colors8.destructiveForeground;
+  const colors = resolvedMode === "dark" ? brand.colorsDark : brand.colors;
+  if (colors) {
+    vars["--color-background"] = colors.background;
+    vars["--color-foreground"] = colors.foreground;
+    vars["--color-muted"] = colors.muted;
+    vars["--color-muted-foreground"] = colors.mutedForeground;
+    vars["--color-border"] = colors.border;
+    vars["--color-primary"] = colors.primary;
+    vars["--color-primary-foreground"] = colors.primaryForeground;
+    vars["--color-destructive"] = colors.destructive;
+    vars["--color-destructive-foreground"] = colors.destructiveForeground;
+    if (colors.accent !== void 0) vars["--color-accent"] = colors.accent;
+    if (colors.accentForeground !== void 0)
+      vars["--color-accent-foreground"] = colors.accentForeground;
+  }
+  const sidebar = resolvedMode === "dark" ? brand.sidebarColorsDark : brand.sidebarColors;
+  if (sidebar) {
+    const sidebarVars = {
+      "--color-sidebar": sidebar.sidebar,
+      "--color-sidebar-foreground": sidebar.sidebarForeground,
+      "--color-sidebar-primary": sidebar.sidebarPrimary,
+      "--color-sidebar-primary-foreground": sidebar.sidebarPrimaryForeground,
+      "--color-sidebar-accent": sidebar.sidebarAccent,
+      "--color-sidebar-accent-foreground": sidebar.sidebarAccentForeground,
+      "--color-sidebar-border": sidebar.sidebarBorder,
+      "--color-sidebar-ring": sidebar.sidebarRing
+    };
+    for (const [name, value] of Object.entries(sidebarVars)) {
+      if (value !== void 0) vars[name] = value;
+    }
+  }
+  const fontFamily = brand.typography?.fontFamily?.trim();
+  if (fontFamily) {
+    vars["--font-sans"] = fontFamily;
   }
   if (brand.radii) {
     vars["--radius-sm"] = brand.radii.sm;
@@ -10418,7 +10424,7 @@ var useTheme = () => {
   const context = react.use(ThemeContext);
   if (context === null) {
     throw new Error(
-      "useTheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider brand={...}> from @keboola/design."
+      "useTheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider> from @keboola/design."
     );
   }
   return context;
@@ -10427,7 +10433,7 @@ var useColorScheme = () => {
   const context = react.use(ThemeContext);
   if (context === null) {
     throw new Error(
-      "useColorScheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider colorScheme={...}> from @keboola/design."
+      "useColorScheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider> from @keboola/design."
     );
   }
   return { colorScheme: context.colorScheme, resolvedMode: context.resolvedMode };
@@ -10688,6 +10694,7 @@ var PageLayout = Object.assign(Root25, {
 // src/blocks/PageHeader/styles.ts
 var titleRowClass = "tw-flex tw-flex-wrap tw-items-center tw-gap-x-3 tw-gap-y-2";
 var titleClass = "tw-m-0 tw-text-3xl tw-font-semibold tw-leading-9 tw-text-foreground tw-break-words";
+var titleCompactClass = "tw-m-0 tw-text-xl tw-font-semibold tw-leading-7 tw-text-foreground tw-break-words";
 var badgesClass = "tw-flex tw-flex-wrap tw-items-center tw-gap-2 [&_[data-slot=badge]]:tw-rounded-full [&_[data-slot=badge]]:tw-normal-case [&_[data-slot=badge]]:tw-tracking-normal [&_[data-slot=badge]]:tw-py-0";
 var descriptionClass = "tw-m-0 tw-max-w-[800px] tw-break-words tw-text-sm tw-leading-5 tw-text-muted-foreground";
 var PageHeaderDetail = ({
@@ -10699,6 +10706,7 @@ var PageHeaderDetail = ({
   titleIcon,
   badges,
   description,
+  compact = false,
   primaryAction,
   secondaryAction,
   headerNav,
@@ -10712,7 +10720,7 @@ var PageHeaderDetail = ({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: titleRowClass, children: [
         titleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: titleClass, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: compact ? titleCompactClass : titleClass, children: title }),
         badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgesClass, children: badges })
       ] }),
       description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClass, children: description })
@@ -14000,423 +14008,6 @@ var DiffView = ({
     }
   );
 };
-
-// src/components/MergeEditor/constants.ts
-var CHUNK_TYPE = {
-  UNCHANGED: "unchanged",
-  ADDED: "added",
-  REMOVED: "removed"
-};
-var CHANGE_CLASS = {
-  SAFE: "safe",
-  CONFLICT: "conflict"
-};
-var LINE_HEIGHT_PX = 20;
-var PANE_HEADER_HEIGHT_PX = 58;
-var AcceptButton = ({ side, onAccept, argo }) => {
-  const label = `Accept ${side === "left" ? "production" : "branch"} version`;
-  const Chevron = side === "left" ? icons_exports.ChevronsRight : icons_exports.ChevronsLeft;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
-    {
-      onClick: onAccept,
-      variant: "outline",
-      size: "icon-sm",
-      title: label,
-      "aria-label": label,
-      argo,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { className: "tw-size-5" })
-    }
-  );
-};
-var AcceptControls = ({
-  conflicts,
-  side,
-  onAccept,
-  onDismiss,
-  contentRef,
-  argo
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "tw-z-10 tw-flex tw-shrink-0 tw-flex-col tw-items-center",
-      conflicts.length > 0 ? "tw-w-7" : "tw-w-0"
-    ),
-    children: conflicts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-shrink-0", style: { height: `${PANE_HEADER_HEIGHT_PX}px` } }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-relative tw-w-full tw-flex-1 tw-overflow-y-clip tw-overflow-x-visible", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: "tw-relative tw-size-full", children: conflicts.map((conflict) => {
-        const topLine = side === "left" ? conflict.oldStartLine : conflict.newStartLine;
-        const topOffset = (topLine - 1) * LINE_HEIGHT_PX - 2;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "tw-absolute tw-inset-x-0 tw-flex tw-flex-col tw-items-center tw-gap-0.5",
-            style: { top: `${topOffset}px` },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AcceptButton, { side, onAccept: () => onAccept(conflict), argo }),
-              onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  onClick: () => onDismiss(conflict),
-                  variant: "outline",
-                  size: "icon-sm",
-                  title: "Dismiss",
-                  "aria-label": `Dismiss ${side === "left" ? "production" : "branch"} change`,
-                  argo,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
-                }
-              )
-            ]
-          },
-          conflict.id
-        );
-      }) }) })
-    ] })
-  }
-);
-var setHighlightedLines = state.StateEffect.define();
-var safeDecoration = view.Decoration.line({ class: "cm-merge-safe-line" });
-var conflictDecoration = view.Decoration.line({ class: "cm-merge-conflict-line" });
-var SafeGutterMarker = class extends view.GutterMarker {
-  elementClass = "cm-merge-safe-gutter";
-};
-var ConflictGutterMarker = class extends view.GutterMarker {
-  elementClass = "cm-merge-conflict-gutter";
-};
-var safeGutterMarker = new SafeGutterMarker();
-var conflictGutterMarker = new ConflictGutterMarker();
-var createDiffHighlightExtension = () => {
-  const field = state.StateField.define({
-    create: () => ({ decorations: view.Decoration.none, gutterMarkers: state.RangeSet.empty }),
-    update(value, tr) {
-      let payload = null;
-      for (const effect of tr.effects) {
-        if (effect.is(setHighlightedLines)) {
-          payload = effect.value;
-        }
-      }
-      if (!payload) {
-        return {
-          decorations: value.decorations.map(tr.changes),
-          gutterMarkers: value.gutterMarkers.map(tr.changes)
-        };
-      }
-      const decoBuilder = new state.RangeSetBuilder();
-      const gutterBuilder = new state.RangeSetBuilder();
-      const doc = tr.state.doc;
-      const { lines, classification } = payload;
-      const sorted = [...lines].filter((l) => l >= 1 && l <= doc.lines).sort((a, b) => a - b);
-      for (const i of sorted) {
-        const cls = classification.get(i);
-        if (!cls) continue;
-        const isSafe = cls === CHANGE_CLASS.SAFE;
-        const line = doc.line(i);
-        decoBuilder.add(line.from, line.from, isSafe ? safeDecoration : conflictDecoration);
-        gutterBuilder.add(line.from, line.from, isSafe ? safeGutterMarker : conflictGutterMarker);
-      }
-      return {
-        decorations: decoBuilder.finish(),
-        gutterMarkers: gutterBuilder.finish()
-      };
-    },
-    provide: (f) => [
-      view.EditorView.decorations.from(f, (val) => val.decorations),
-      view.gutterLineClass.from(f, (val) => val.gutterMarkers)
-    ]
-  });
-  const theme2 = view.EditorView.theme({
-    ".cm-merge-safe-line": {
-      backgroundColor: `${colors3__default.default.primary[100]} !important`,
-      boxShadow: `inset 3px 0 0 ${colors3__default.default.primary[500]}`
-    },
-    ".cm-merge-conflict-line": {
-      backgroundColor: `${colors3__default.default.warning[100]} !important`,
-      boxShadow: `inset 3px 0 0 ${colors3__default.default.warning[500]}`
-    },
-    ".cm-merge-safe-gutter": {
-      backgroundColor: `${colors3__default.default.primary[200]} !important`
-    },
-    ".cm-merge-conflict-gutter": {
-      backgroundColor: `${colors3__default.default.warning[200]} !important`
-    }
-  });
-  return [field, theme2];
-};
-var updateHighlightedLines = (view, lines, classification) => {
-  view.dispatch({ effects: setHighlightedLines.of({ lines, classification }) });
-};
-var EMPTY_LINES = /* @__PURE__ */ new Set();
-var EMPTY_CLASSIFICATION = /* @__PURE__ */ new Map();
-var MergePane = ({
-  value,
-  highlightedLines,
-  lineClassification,
-  readOnly = false,
-  onChange,
-  header,
-  headerClassName,
-  className,
-  onScrollDOMReady,
-  deleted = false
-}) => {
-  const editorRef = react.useRef(null);
-  const extensions = react.useMemo(
-    () => [
-      createDiffHighlightExtension(),
-      view.EditorView.theme({
-        "&.cm-editor": {
-          height: "100%",
-          backgroundColor: deleted ? colors3__default.default.error[100] : colors3__default.default.neutral[50],
-          outline: "none"
-        },
-        ".cm-gutters": {
-          backgroundColor: deleted ? colors3__default.default.error[200] : colors3__default.default.neutral[100]
-        },
-        "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
-        ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
-      }),
-      // Recalc viewport after every doc change so late-settling layouts (alerts
-      // appearing above the editor) don't leave trailing lines blank.
-      view.EditorView.updateListener.of((update) => {
-        if (update.docChanged) {
-          requestAnimationFrame(() => update.view.dispatch({}));
-        }
-      })
-    ],
-    [deleted]
-  );
-  react.useEffect(() => {
-    const view = editorRef.current?.view;
-    if (!view) return;
-    updateHighlightedLines(
-      view,
-      deleted ? EMPTY_LINES : highlightedLines,
-      deleted ? EMPTY_CLASSIFICATION : lineClassification
-    );
-  }, [highlightedLines, lineClassification, deleted]);
-  const handleCreateEditor = react.useCallback(
-    (view) => {
-      updateHighlightedLines(
-        view,
-        deleted ? EMPTY_LINES : highlightedLines,
-        deleted ? EMPTY_CLASSIFICATION : lineClassification
-      );
-      onScrollDOMReady?.(view.scrollDOM);
-    },
-    [highlightedLines, lineClassification, onScrollDOMReady, deleted]
-  );
-  react.useEffect(() => {
-    return () => onScrollDOMReady?.(null);
-  }, [onScrollDOMReady]);
-  react.useEffect(() => {
-    const view = editorRef.current?.view;
-    const wrapper = view?.dom.parentElement;
-    if (!view || !wrapper) return;
-    const observer = new ResizeObserver(() => view.dispatch({}));
-    observer.observe(wrapper);
-    return () => observer.disconnect();
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-overflow-hidden",
-        className,
-        deleted && "tw-border-error-300"
-      ),
-      children: [
-        header && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "tw-px-4 tw-py-3",
-              deleted ? "tw-border-b tw-border-error-200 tw-bg-error-100" : "tw-bg-background",
-              headerClassName
-            ),
-            children: header
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-          CodeMirror__default.default,
-          {
-            ref: editorRef,
-            height: "100%",
-            value,
-            onChange,
-            extensions,
-            readOnly,
-            onCreateEditor: handleCreateEditor,
-            basicSetup: { lineNumbers: true, drawSelection: false }
-          }
-        ) })
-      ]
-    }
-  );
-};
-var useScrollSync = () => {
-  const scrollersRef = react.useRef([]);
-  const followersRef = react.useRef(/* @__PURE__ */ new Map());
-  const isSyncingRef = react.useRef(false);
-  const scrollerCallbacksRef = react.useRef(/* @__PURE__ */ new Map());
-  const followerCallbacksRef = react.useRef(/* @__PURE__ */ new Map());
-  const updateFollowers = react.useCallback(() => {
-    for (const [, { paneIndex, el }] of followersRef.current) {
-      const scroller = scrollersRef.current[paneIndex];
-      if (!scroller) continue;
-      el.style.transform = `translateY(-${scroller.scrollTop}px)`;
-    }
-  }, []);
-  const handleScroll = react.useCallback(
-    (e) => {
-      if (isSyncingRef.current) return;
-      isSyncingRef.current = true;
-      const sourceScrollTop = e.target.scrollTop;
-      for (const scroller of scrollersRef.current) {
-        if (!scroller || scroller === e.target) continue;
-        const targetMax = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-        scroller.scrollTop = Math.min(sourceScrollTop, targetMax);
-      }
-      updateFollowers();
-      isSyncingRef.current = false;
-    },
-    [updateFollowers]
-  );
-  const registerScroller = react.useCallback(
-    (index) => {
-      const existing = scrollerCallbacksRef.current.get(index);
-      if (existing) return existing;
-      const callback = (el) => {
-        const prev = scrollersRef.current[index];
-        if (prev === el) return;
-        prev?.removeEventListener("scroll", handleScroll);
-        scrollersRef.current[index] = el;
-        el?.addEventListener("scroll", handleScroll, { passive: true });
-      };
-      scrollerCallbacksRef.current.set(index, callback);
-      return callback;
-    },
-    [handleScroll]
-  );
-  const registerFollower = react.useCallback((paneIndex, key) => {
-    const existing = followerCallbacksRef.current.get(key);
-    if (existing) return existing;
-    const callback = (el) => {
-      if (el) {
-        followersRef.current.set(key, { paneIndex, el });
-      } else {
-        followersRef.current.delete(key);
-      }
-    };
-    followerCallbacksRef.current.set(key, callback);
-    return callback;
-  }, []);
-  return { registerScroller, registerFollower };
-};
-var EMPTY_LINES2 = /* @__PURE__ */ new Set();
-var EMPTY_CLASSIFICATION2 = /* @__PURE__ */ new Map();
-var MergeEditor = ({
-  mergeValue,
-  handleMergeChange,
-  leftText,
-  rightText,
-  leftConflicts,
-  rightConflicts,
-  leftHighlightedLines,
-  rightHighlightedLines,
-  leftClassification,
-  rightClassification,
-  mergeHighlightedLines,
-  mergeClassification,
-  acceptLeft,
-  acceptRight,
-  dismissLeft,
-  dismissRight,
-  leftHeader,
-  middleHeader,
-  middleHeaderClassName,
-  middleClassName,
-  rightHeader,
-  className,
-  argo,
-  leftDeleted = false,
-  rightDeleted = false
-}) => {
-  const { registerScroller, registerFollower } = useScrollSync();
-  const anySideDeleted = leftDeleted || rightDeleted;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "tw-flex tw-h-full tw-min-h-0 tw-overflow-hidden tw-bg-background tw-gap-3",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MergePane,
-          {
-            value: leftText,
-            highlightedLines: leftHighlightedLines,
-            lineClassification: leftClassification,
-            readOnly: true,
-            header: leftHeader,
-            className: "tw-rounded-r-lg tw-border tw-border-border",
-            onScrollDOMReady: registerScroller(0),
-            deleted: leftDeleted
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AcceptControls,
-          {
-            conflicts: leftDeleted ? [] : leftConflicts,
-            side: "left",
-            onAccept: acceptLeft,
-            onDismiss: dismissLeft,
-            contentRef: registerFollower(0, "left-controls"),
-            argo
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MergePane,
-          {
-            value: mergeValue,
-            highlightedLines: anySideDeleted ? EMPTY_LINES2 : mergeHighlightedLines,
-            lineClassification: anySideDeleted ? EMPTY_CLASSIFICATION2 : mergeClassification,
-            onChange: handleMergeChange,
-            header: middleHeader,
-            headerClassName: middleHeaderClassName,
-            className: cn("tw-border tw-border-border tw-rounded-lg", middleClassName),
-            onScrollDOMReady: registerScroller(1)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AcceptControls,
-          {
-            conflicts: rightDeleted ? [] : rightConflicts,
-            side: "right",
-            onAccept: acceptRight,
-            onDismiss: dismissRight,
-            contentRef: registerFollower(2, "right-controls"),
-            argo
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MergePane,
-          {
-            value: rightText,
-            highlightedLines: rightHighlightedLines,
-            lineClassification: rightClassification,
-            readOnly: true,
-            header: rightHeader,
-            className: "tw-rounded-l-lg tw-border tw-border-border",
-            onScrollDOMReady: registerScroller(2),
-            deleted: rightDeleted
-          }
-        )
-      ]
-    }
-  );
-};
 var PaneHeader = ({ label, sublabel }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-sm tw-font-medium tw-text-foreground", children: label }),
   sublabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: sublabel })
@@ -14446,6 +14037,17 @@ var ConflictStatusIndicator = ({ remainingConflicts, remainingSafeChanges }) =>
     }
   );
 };
+
+// src/components/MergeEditor/constants.ts
+var CHUNK_TYPE = {
+  UNCHANGED: "unchanged",
+  ADDED: "added",
+  REMOVED: "removed"
+};
+var CHANGE_CLASS = {
+  SAFE: "safe",
+  CONFLICT: "conflict"
+};
 var computeDiffChunks = (oldText, newText) => {
   const changes = diff.diffLines(oldText, newText);
   const chunks = [];
@@ -15058,6 +14660,7 @@ var SelectField = ({
   required,
   help,
   className,
+  items,
   options,
   placeholder,
   triggerClassName,
@@ -15067,6 +14670,7 @@ var SelectField = ({
   ...rootProps
 }) => {
   const field = useFieldContext();
+  const resolved = items ?? options ?? [];
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsxs(
     Select.Root,
     {
@@ -15088,7 +14692,7 @@ var SelectField = ({
             onBlur: field.handleBlur
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Select.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
+        /* @__PURE__ */ jsxRuntime.jsx(Select.Content, { variant: variant === "argo" ? "argo" : "default", children: resolved.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
       ]
     }
   ) });
@@ -15413,751 +15017,6 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     }
   );
 };
-var ButtonToolbar = ({ value, children }) => {
-  if (!value && !children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-pointer-events-auto tw-ml-auto tw-mr-4 tw-flex tw-w-fit tw-gap-1 tw-overflow-visible tw-rounded-lg tw-border tw-border-solid tw-border-border !tw-bg-background tw-p-[3px] tw-shadow", children: [
-    !!value && /* @__PURE__ */ jsxRuntime.jsx(ClipboardButton, { size: "icon-sm", variant: "invisible", text: value }),
-    children
-  ] });
-};
-var baseThemeStyles = {
-  "*": { lineHeight: "20px" },
-  "*::selection": {
-    backgroundColor: colors3__default.default.secondary[500],
-    color: `${colors3__default.default.white} !important`
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { backgroundColor: colors3__default.default.neutral[150] },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) .cm-gutters': {
-    backgroundColor: colors3__default.default.neutral[200]
-  },
-  "&.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" },
-  // tokens overrides
-  ".cm-line .tok-string": { color: colors3__default.default.warning[700] },
-  // merge (diff) view
-  '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors3__default.default.error[100] },
-  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors3__default.default.primary[100] },
-  '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors3__default.default.error[200] },
-  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors3__default.default.primary[200] },
-  '&[class*="cm-merge-"] .cm-deletedText': { background: colors3__default.default.error[200] },
-  '&[class*="cm-merge-"] .cm-changedText': { background: colors3__default.default.primary[200] },
-  '&[class*="cm-merge-"]': {
-    backgroundColor: `${colors3__default.default.white} !important`
-  },
-  '&[class*="cm-merge-"] .cm-gutters': {
-    backgroundColor: `${colors3__default.default.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 BASIS_SETUP = { drawSelection: false };
-var customTheme = codemirrorThemeGithub.githubLightInit({
-  settings: {
-    fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
-    background: colors3__default.default.neutral[50],
-    gutterBackground: colors3__default.default.neutral[100],
-    gutterBorder: "transparent",
-    lineHighlight: "transparent",
-    selection: colors3__default.default.secondary[500]
-  }
-});
-var getLanguageMode = (mode) => {
-  switch (mode) {
-    case "text/x-python":
-      return langPython.python();
-    case "text/x-sql":
-      return langSql.sql({ upperCaseKeywords: true });
-    case "text/x-sfsql":
-      return language.StreamLanguage.define(codemirrorLangSfsql.sfsql);
-    case "text/x-plsql":
-      return langSql.sql({ upperCaseKeywords: true, dialect: langSql.PLSQL });
-    case "text/x-rsrc":
-      return language.StreamLanguage.define(r.r);
-    case "text/x-sh":
-      return language.StreamLanguage.define(shell.shell);
-    case "text/javascript":
-      return langJavascript.javascript({ jsx: true });
-    case "text/typescript":
-      return langJavascript.javascript({ jsx: true, typescript: true });
-    default:
-      return langJson.json();
-  }
-};
-var ToggleComponentHelp = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-  "Use ",
-  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Ctrl+/" }),
-  " or ",
-  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Command+/" }),
-  " to toggle comments."
-] });
-var emptyArray = [];
-var emptyObject = {};
-var CodeEditor = ({
-  value,
-  previousValue,
-  onChange,
-  mode = "application/json",
-  placeholder = "",
-  readOnly = false,
-  autocompletions = emptyArray,
-  extraKeys = emptyObject,
-  withToggleCommentHint = false,
-  withAutofocus = false,
-  withLineNumbers = true,
-  withLineWrapping = true,
-  withCollapseUnchanged = false,
-  withCopyButton = true,
-  completeAny = false,
-  help = null,
-  helpPostfix = null,
-  renderAdditionalButtons,
-  className
-}) => {
-  const commonExtensions = react.useMemo(() => {
-    return [
-      getLanguageMode(mode),
-      mode === "application/json" && lint.linter(langJson.jsonParseLinter()),
-      withLineWrapping ? view.EditorView.lineWrapping : [],
-      CodeMirror.EditorState.languageData.of(() => [
-        { autocomplete: completeAny ? autocomplete.completeAnyWord : autocompletions }
-      ]),
-      view.keymap.of(
-        Object.entries(extraKeys).map(([key, run]) => ({
-          key,
-          run: () => {
-            if (typeof run === "string") return run;
-            run();
-            return true;
-          }
-        }))
-      ),
-      autocomplete.autocompletion({ activateOnTyping: completeAny }),
-      view.EditorView.theme(baseThemeStyles)
-    ].filter(Boolean);
-  }, [autocompletions, completeAny, extraKeys, mode, withLineWrapping]);
-  const extensions = react.useMemo(() => {
-    return [
-      ...commonExtensions,
-      view.placeholder(placeholder),
-      view.EditorView.editable.of(!readOnly),
-      CodeMirror.EditorState.readOnly.of(readOnly),
-      previousValue ? merge.unifiedMergeView({
-        original: previousValue,
-        mergeControls: false,
-        highlightChanges: false,
-        collapseUnchanged: withCollapseUnchanged ? {} : void 0
-      }) : []
-    ];
-  }, [commonExtensions, placeholder, readOnly, previousValue, withCollapseUnchanged]);
-  const config = react.useMemo(() => {
-    return {
-      ...BASIS_SETUP,
-      lineNumbers: withLineNumbers
-    };
-  }, [withLineNumbers]);
-  return (
-    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "tw-relative tw-flex tw-min-h-0 tw-flex-col [&_.cm-mergeViewEditor]:tw-overflow-visible [&_.cm-mergeViewEditors]:tw-h-full [&_.cm-mergeView]:tw-h-full [&_>div]:tw-h-full [&_>div]:tw-overflow-auto [&_>div]:tw-bg-background",
-          { "tw-mt-5": !!renderAdditionalButtons },
-          className
-        ),
-        onKeyDown: (event) => {
-          if (event.key === keyCodes.ESCAPE) {
-            event.stopPropagation();
-          }
-        },
-        children: [
-          (withCopyButton || renderAdditionalButtons) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-pointer-events-none tw-absolute tw-z-10 tw-flex !tw-h-auto tw-w-full tw-translate-y-[calc(-100%_+_8px)] !tw-overflow-visible !tw-bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ButtonToolbar, { value: withCopyButton ? value : void 0, children: renderAdditionalButtons?.(value) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CodeMirror__default.default,
-            {
-              theme: customTheme,
-              value,
-              onChange,
-              extensions,
-              autoFocus: withAutofocus,
-              basicSetup: config
-            }
-          ),
-          !readOnly && (withToggleCommentHint || help || helpPostfix) && /* @__PURE__ */ jsxRuntime.jsxs(HelpBlock, { className: "tw-mt-2 tw-flex tw-flex-wrap tw-gap-1", children: [
-            help,
-            withToggleCommentHint ? /* @__PURE__ */ jsxRuntime.jsx(ToggleComponentHelp, {}) : null,
-            helpPostfix
-          ] })
-        ]
-      }
-    )
-  );
-};
-var activeQueryFirstLine = view.Decoration.line({ class: "cm-active-query cm-active-query-first" });
-var activeQueryMiddleLine = view.Decoration.line({ class: "cm-active-query" });
-var activeQueryLastLine = view.Decoration.line({ class: "cm-active-query cm-active-query-last" });
-var activeQuerySingleLine = view.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$1, range) => {
-  const startLine = view$1.state.doc.lineAt(range.from).number;
-  const endLine = view$1.state.doc.lineAt(range.to).number;
-  const decorations = [];
-  for (let lineNum = startLine; lineNum <= endLine; lineNum++) {
-    const lineStart = view$1.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 view.Decoration.set(decorations);
-};
-var activeQueryHighlight = (splitQueries) => {
-  return [
-    view.ViewPlugin.fromClass(
-      class {
-        decorations = view.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 = view.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$1) {
-          if (!view$1.hasFocus) {
-            this.decorations = view.Decoration.none;
-            return;
-          }
-          const { main } = view$1.state.selection;
-          if (main.from !== main.to) {
-            this.decorations = view.Decoration.none;
-            return;
-          }
-          const doc = view$1.state.doc.toString();
-          if (doc !== this.cachedDoc) return;
-          if (this.cachedBoundaries.length === 0) {
-            this.decorations = view.Decoration.none;
-            return;
-          }
-          const range = findActiveQueryRange(doc, main.head, this.cachedBoundaries);
-          this.decorations = range ? buildDecorations(view$1, range) : view.Decoration.none;
-        }
-        /** Parse queries async (debounced) and update decorations. */
-        scheduleDocParse(view$1) {
-          if (this.debounceTimer) clearTimeout(this.debounceTimer);
-          this.debounceTimer = setTimeout(async () => {
-            const seq = ++this.seq;
-            const doc = view$1.state.doc.toString();
-            if (!doc.trim()) {
-              this.cachedDoc = doc;
-              this.cachedBoundaries = [];
-              if (this.decorations !== view.Decoration.none) {
-                this.decorations = view.Decoration.none;
-                if (!this.destroyed) view$1.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$1);
-            if (!this.destroyed) view$1.dispatch();
-          }, 100);
-        }
-      },
-      { decorations: (v) => v.decorations }
-    ),
-    view.EditorView.baseTheme({
-      ".cm-active-query": {
-        boxShadow: `inset -1px 0 0 0 ${colors3__default.default.secondary[300]}, inset 1px 0 0 0 ${colors3__default.default.secondary[300]}`,
-        marginRight: "8px"
-      },
-      ".cm-active-query-first": {
-        boxShadow: `inset -1px 0 0 0 ${colors3__default.default.secondary[300]}, inset 1px 0 0 0 ${colors3__default.default.secondary[300]}, inset 0 1px 0 0 ${colors3__default.default.secondary[300]}`,
-        borderRadius: "4px 4px 0 0"
-      },
-      ".cm-active-query-last": {
-        boxShadow: `inset -1px 0 0 0 ${colors3__default.default.secondary[300]}, inset 1px 0 0 0 ${colors3__default.default.secondary[300]}, inset 0 -1px 0 0 ${colors3__default.default.secondary[300]}`,
-        borderRadius: "0 0 4px 4px"
-      },
-      ".cm-active-query-first.cm-active-query-last": {
-        boxShadow: `inset 0 0 0 1px ${colors3__default.default.secondary[300]}`,
-        borderRadius: "4px"
-      }
-    })
-  ];
-};
-
-// src/components/CodeEditor/highlighting.ts
-var HighlightMarker = class extends view.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 = state.StateEffect.define();
-var highlightedLinesField = state.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 = view.gutter({
-  class: "cm-highlight-gutter",
-  markers: (view) => {
-    const highlightInfo = view.state.field(highlightedLinesField, false);
-    if (!highlightInfo) {
-      return state.RangeSet.empty;
-    }
-    const markers = forEachLineInRange(
-      view.state.doc,
-      highlightInfo.from,
-      highlightInfo.to,
-      (lineFrom) => highlightMarker.range(lineFrom)
-    );
-    return state.RangeSet.of(markers);
-  }
-});
-var errorLineDecorations = state.StateField.define({
-  create() {
-    return view.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 view.Decoration.none;
-      }
-      const decorationArray = forEachLineInRange(
-        transaction.state.doc,
-        effect.value.error.from,
-        effect.value.error.to,
-        (lineFrom) => view.Decoration.line({ class: "cm-error-line" }).range(lineFrom)
-      );
-      return view.Decoration.set(decorationArray);
-    }
-    return decorations;
-  },
-  provide: (f) => view.EditorView.decorations.from(f)
-});
-var processingLineDecorations = state.StateField.define({
-  create() {
-    return view.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 view.Decoration.none;
-      }
-      const decorationArray = forEachLineInRange(
-        transaction.state.doc,
-        effect.value.processing.from,
-        effect.value.processing.to,
-        (lineFrom) => view.Decoration.line({ class: "cm-processing-line" }).range(lineFrom)
-      );
-      return view.Decoration.set(decorationArray);
-    }
-    return decorations;
-  },
-  provide: (f) => view.EditorView.decorations.from(f)
-});
-var highlightedLinesTheme = view.EditorView.baseTheme({
-  ".cm-highlight-gutter": {
-    width: "2px",
-    marginRight: "2px"
-  },
-  ".cm-highlight-marker": {
-    width: "2px",
-    height: "100%",
-    backgroundColor: colors3__default.default.secondary[500]
-  },
-  ".cm-error-line": {
-    backgroundColor: `${colors3__default.default.error[100]} !important`
-  },
-  ".cm-processing-line": {
-    backgroundColor: `${colors3__default.default.secondary[100]} !important`
-  }
-});
-function highlightingExtension(queryParser) {
-  return [
-    highlightedLinesField,
-    highlightGutter,
-    errorLineDecorations,
-    processingLineDecorations,
-    highlightedLinesTheme,
-    ...queryParser ? activeQueryHighlight(queryParser) : []
-  ];
-}
-function updateHighlighting(view, lines) {
-  view.dispatch({ effects: setHighlightedLinesEffect.of(lines ?? null) });
-}
-var setSearchEffect = state.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 = view.Decoration.mark({
-      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
-    });
-    return decoration.range(match.from, match.to);
-  });
-  return view.Decoration.set(decorations, true);
-}
-var searchField = state.StateField.define({
-  create() {
-    return {
-      query: "",
-      selectedMatchIndex: void 0,
-      matches: [],
-      decorations: view.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) => view.EditorView.decorations.from(field, (state) => state.decorations)
-});
-var searchViewPlugin = view.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: view.EditorView.scrollIntoView(match.from, { y: "center" })
-            });
-          });
-        }
-        this.lastSelectedIndex = state.selectedMatchIndex;
-      }
-      if (state.selectedMatchIndex === void 0) {
-        this.lastSelectedIndex = void 0;
-      }
-    }
-  }
-);
-var searchTheme = view.EditorView.baseTheme({
-  ".cm-searchMatch": {
-    backgroundColor: colors3__default.default.secondary[100]
-  },
-  ".cm-searchMatch > span": {
-    color: `${colors3__default.default.secondary[600]} !important`
-  },
-  ".cm-searchMatch-selected": {
-    backgroundColor: colors3__default.default.secondary[600]
-  },
-  ".cm-searchMatch-selected > span": {
-    color: `${colors3__default.default.white} !important`
-  }
-});
-function searchExtension() {
-  return [searchField, searchViewPlugin, searchTheme];
-}
-function updateSearch(view, query, selectedMatchIndex) {
-  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
-}
-var BASIS_SETUP2 = {
-  drawSelection: false,
-  defaultKeymap: false,
-  completionKeymap: false,
-  searchKeymap: false
-};
-var CUSTOM_KEYMAP = [
-  {
-    key: "Escape",
-    stopPropagation: true,
-    run: (view) => {
-      view.contentDOM.blur();
-      return true;
-    }
-  }
-];
-var theme = {
-  ...baseThemeStyles,
-  "&.cm-editor": {
-    border: "solid 1px transparent",
-    background: colors3__default.default.white,
-    borderRadius: "8px",
-    paddingTop: "8px",
-    paddingBottom: "8px"
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):hover': {
-    borderColor: colors3__default.default.secondary[500]
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):focus-within': {
-    borderColor: colors3__default.default.secondary[500],
-    boxShadow: `0 0 0 4px ${colors3__default.default.secondary[200]}`
-  },
-  "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
-  "&.cm-editor :is(.cm-gutters,.cm-scroller)": { background: colors3__default.default.white },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { background: colors3__default.default.neutral[100] },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) :is(.cm-scroller,.cm-gutters)': {
-    background: colors3__default.default.neutral[100]
-  }
-};
-var SqlEditor = ({
-  value,
-  onChange,
-  onSelectionChange,
-  onCreateEditor,
-  onDestroyEditor,
-  onBlurEditor,
-  onFocusEditor,
-  placeholder = "",
-  searchQuery = "",
-  searchMatchIndex,
-  readOnly = false,
-  extraKeys,
-  queryParser,
-  autoFocus = false,
-  lineNumbers = true,
-  className,
-  schema,
-  variables,
-  defaultDatabase,
-  defaultSchema,
-  highlightLines,
-  dialect
-}) => {
-  const editorRef = react.useRef(null);
-  const extensions = react.useMemo(() => {
-    const baseKeymap = [...commands.defaultKeymap, ...CUSTOM_KEYMAP];
-    return [
-      CodeMirror.EditorView.lineWrapping,
-      CodeMirror.keymap.of(extraKeys ? [...extraKeys, ...baseKeymap] : baseKeymap),
-      ...codemirrorLangSql.installExtensions({ schema, defaultDatabase, defaultSchema, variables, dialect }),
-      searchExtension(),
-      highlightingExtension(queryParser),
-      CodeMirror.EditorView.theme(theme),
-      onBlurEditor ? CodeMirror.EditorView.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
-      onFocusEditor ? CodeMirror.EditorView.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : []
-    ];
-  }, [
-    extraKeys,
-    queryParser,
-    schema,
-    defaultDatabase,
-    defaultSchema,
-    variables,
-    dialect,
-    onBlurEditor,
-    onFocusEditor
-  ]);
-  const defaultSetup = react.useMemo(() => {
-    return { ...BASIS_SETUP2, lineNumbers };
-  }, [lineNumbers]);
-  react.useEffect(() => {
-    if (editorRef.current?.view) {
-      updateHighlighting(editorRef.current.view, highlightLines);
-    }
-  }, [highlightLines]);
-  react.useEffect(() => {
-    if (editorRef.current?.view) {
-      updateSearch(editorRef.current.view, searchQuery, searchMatchIndex);
-    }
-  }, [searchQuery, searchMatchIndex]);
-  react.useEffect(() => {
-    if (!onDestroyEditor) return;
-    return () => {
-      onDestroyEditor();
-    };
-  }, [onDestroyEditor]);
-  const handleOnCreate = react.useCallback(
-    (view, state) => {
-      onCreateEditor?.(view, state);
-      if (highlightLines) {
-        updateHighlighting(view, highlightLines);
-      }
-      if (searchQuery) {
-        updateSearch(view, searchQuery, searchMatchIndex);
-      }
-    },
-    [onCreateEditor, highlightLines, searchQuery, searchMatchIndex]
-  );
-  const handleOnUpdate = react.useCallback(
-    (update) => {
-      if (update.selectionSet) {
-        const { main } = update.state.selection;
-        const text = update.state.sliceDoc(main.from, main.to);
-        onSelectionChange?.(text);
-      }
-    },
-    [onSelectionChange]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CodeMirror__default.default,
-    {
-      ref: editorRef,
-      theme: customTheme,
-      extensions,
-      value,
-      onChange,
-      onUpdate: handleOnUpdate,
-      onCreateEditor: handleOnCreate,
-      autoFocus,
-      placeholder,
-      className,
-      readOnly,
-      editable: !readOnly,
-      basicSetup: defaultSetup
-    }
-  );
-};
 
 Object.defineProperty(exports, "Slot", {
   enumerable: true,
@@ -16223,7 +15082,6 @@ exports.Checkbox = Checkbox;
 exports.Clipboard = Clipboard;
 exports.ClipboardButton = ClipboardButton;
 exports.ClipboardInline = ClipboardInline;
-exports.CodeEditor = CodeEditor;
 exports.Collapse = Collapse;
 exports.Collapsible = Collapsible;
 exports.CollapsiblePanel = CollapsiblePanel;
@@ -16263,7 +15121,6 @@ exports.Kbd = Kbd;
 exports.Label = Label2;
 exports.Link = Link;
 exports.MarkedText = MarkedText;
-exports.MergeEditor = MergeEditor;
 exports.MessageBubble = MessageBubble;
 exports.Modal = Modal;
 exports.MultiActionButtonGroup = MultiActionButtonGroup;
@@ -16304,7 +15161,6 @@ exports.Skeleton = Skeleton;
 exports.SkeletonList = SkeletonList;
 exports.Slider = Slider;
 exports.SplitButton = SplitButton;
-exports.SqlEditor = SqlEditor;
 exports.Stepper = Stepper;
 exports.SuggestedPrompt = SuggestedPrompt;
 exports.Switch = Switch;