@keboola/design 3.2.0 → 4.0.0

package/dist/index.js

@@ -45,27 +45,9 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { diffLines, diffWords } from 'diff';
-import { Decoration, gutter, EditorView, ViewPlugin, GutterMarker, keymap, placeholder, gutterLineClass } from '@codemirror/view';
-import CodeMirror, { EditorState, EditorView as EditorView$1, keymap as keymap$1 } from '@uiw/react-codemirror';
-import colors3 from '@keboola/tailwind-config/colors';
-import { StateEffect, StateField, RangeSet, RangeSetBuilder } from '@codemirror/state';
 import { diff3Merge } from 'node-diff3';
 import { createFormHookContexts, createFormHook } from '@tanstack/react-form';
 import DOMPurify from 'dompurify';
-import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
-import { jsonParseLinter, json } from '@codemirror/lang-json';
-import { linter } from '@codemirror/lint';
-import { unifiedMergeView } from '@codemirror/merge';
-import { javascript } from '@codemirror/lang-javascript';
-import { python } from '@codemirror/lang-python';
-import { sql, PLSQL } 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 { githubLightInit } from '@uiw/codemirror-theme-github';
-import { sfsql } from '@keboola/codemirror-lang-sfsql';
-import { defaultKeymap } from '@codemirror/commands';
-import { installExtensions } from '@keboola/codemirror-lang-sql';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -136,7 +118,6 @@ var createChangeInputEvent = (input) => {
 // src/constants/keyCodes.ts
 var keyCodes = {
   ENTER: "Enter",
-  ESCAPE: "Escape",
   SPACE: " "
 };
 var ThemeContext = createContext(null);
@@ -6872,8 +6853,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()}`;
@@ -9314,7 +9295,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
@@ -10288,17 +10273,40 @@ var AIGradientsSvg = () => /* @__PURE__ */ jsx("svg", { width: "0", height: "0",
 // 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;
@@ -10386,7 +10394,7 @@ var useTheme = () => {
   const context = 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;
@@ -10395,7 +10403,7 @@ var useColorScheme = () => {
   const context = 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 };
@@ -10656,6 +10664,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 = ({
@@ -10667,6 +10676,7 @@ var PageHeaderDetail = ({
   titleIcon,
   badges,
   description,
+  compact = false,
   primaryAction,
   secondaryAction,
   headerNav,
@@ -10680,7 +10690,7 @@ var PageHeaderDetail = ({
     /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
       /* @__PURE__ */ jsxs("div", { className: titleRowClass, children: [
         titleIcon && /* @__PURE__ */ jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
-        /* @__PURE__ */ jsx("h1", { className: titleClass, children: title }),
+        /* @__PURE__ */ jsx("h1", { className: compact ? titleCompactClass : titleClass, children: title }),
         badges && /* @__PURE__ */ jsx("div", { className: badgesClass, children: badges })
       ] }),
       description && /* @__PURE__ */ jsx("p", { className: descriptionClass, children: description })
@@ -13968,423 +13978,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__ */ jsx(
-    Button,
-    {
-      onClick: onAccept,
-      variant: "outline",
-      size: "icon-sm",
-      title: label,
-      "aria-label": label,
-      argo,
-      children: /* @__PURE__ */ jsx(Chevron, { className: "tw-size-5" })
-    }
-  );
-};
-var AcceptControls = ({
-  conflicts,
-  side,
-  onAccept,
-  onDismiss,
-  contentRef,
-  argo
-}) => /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "tw-shrink-0", style: { height: `${PANE_HEADER_HEIGHT_PX}px` } }),
-      /* @__PURE__ */ jsx("div", { className: "tw-relative tw-w-full tw-flex-1 tw-overflow-y-clip tw-overflow-x-visible", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(AcceptButton, { side, onAccept: () => onAccept(conflict), argo }),
-              onDismiss && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: () => onDismiss(conflict),
-                  variant: "outline",
-                  size: "icon-sm",
-                  title: "Dismiss",
-                  "aria-label": `Dismiss ${side === "left" ? "production" : "branch"} change`,
-                  argo,
-                  children: /* @__PURE__ */ jsx(icons_exports.X, { className: "tw-size-4" })
-                }
-              )
-            ]
-          },
-          conflict.id
-        );
-      }) }) })
-    ] })
-  }
-);
-var setHighlightedLines = StateEffect.define();
-var safeDecoration = Decoration.line({ class: "cm-merge-safe-line" });
-var conflictDecoration = Decoration.line({ class: "cm-merge-conflict-line" });
-var SafeGutterMarker = class extends GutterMarker {
-  elementClass = "cm-merge-safe-gutter";
-};
-var ConflictGutterMarker = class extends GutterMarker {
-  elementClass = "cm-merge-conflict-gutter";
-};
-var safeGutterMarker = new SafeGutterMarker();
-var conflictGutterMarker = new ConflictGutterMarker();
-var createDiffHighlightExtension = () => {
-  const field = StateField.define({
-    create: () => ({ decorations: Decoration.none, gutterMarkers: 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 RangeSetBuilder();
-      const gutterBuilder = new 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) => [
-      EditorView.decorations.from(f, (val) => val.decorations),
-      gutterLineClass.from(f, (val) => val.gutterMarkers)
-    ]
-  });
-  const theme2 = EditorView.theme({
-    ".cm-merge-safe-line": {
-      backgroundColor: `${colors3.primary[100]} !important`,
-      boxShadow: `inset 3px 0 0 ${colors3.primary[500]}`
-    },
-    ".cm-merge-conflict-line": {
-      backgroundColor: `${colors3.warning[100]} !important`,
-      boxShadow: `inset 3px 0 0 ${colors3.warning[500]}`
-    },
-    ".cm-merge-safe-gutter": {
-      backgroundColor: `${colors3.primary[200]} !important`
-    },
-    ".cm-merge-conflict-gutter": {
-      backgroundColor: `${colors3.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 = useRef(null);
-  const extensions = useMemo(
-    () => [
-      createDiffHighlightExtension(),
-      EditorView.theme({
-        "&.cm-editor": {
-          height: "100%",
-          backgroundColor: deleted ? colors3.error[100] : colors3.neutral[50],
-          outline: "none"
-        },
-        ".cm-gutters": {
-          backgroundColor: deleted ? colors3.error[200] : colors3.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.
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged) {
-          requestAnimationFrame(() => update.view.dispatch({}));
-        }
-      })
-    ],
-    [deleted]
-  );
-  useEffect(() => {
-    const view = editorRef.current?.view;
-    if (!view) return;
-    updateHighlightedLines(
-      view,
-      deleted ? EMPTY_LINES : highlightedLines,
-      deleted ? EMPTY_CLASSIFICATION : lineClassification
-    );
-  }, [highlightedLines, lineClassification, deleted]);
-  const handleCreateEditor = useCallback(
-    (view) => {
-      updateHighlightedLines(
-        view,
-        deleted ? EMPTY_LINES : highlightedLines,
-        deleted ? EMPTY_CLASSIFICATION : lineClassification
-      );
-      onScrollDOMReady?.(view.scrollDOM);
-    },
-    [highlightedLines, lineClassification, onScrollDOMReady, deleted]
-  );
-  useEffect(() => {
-    return () => onScrollDOMReady?.(null);
-  }, [onScrollDOMReady]);
-  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__ */ 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__ */ 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__ */ jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full", children: /* @__PURE__ */ jsx(
-          CodeMirror,
-          {
-            ref: editorRef,
-            height: "100%",
-            value,
-            onChange,
-            extensions,
-            readOnly,
-            onCreateEditor: handleCreateEditor,
-            basicSetup: { lineNumbers: true, drawSelection: false }
-          }
-        ) })
-      ]
-    }
-  );
-};
-var useScrollSync = () => {
-  const scrollersRef = useRef([]);
-  const followersRef = useRef(/* @__PURE__ */ new Map());
-  const isSyncingRef = useRef(false);
-  const scrollerCallbacksRef = useRef(/* @__PURE__ */ new Map());
-  const followerCallbacksRef = useRef(/* @__PURE__ */ new Map());
-  const updateFollowers = 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 = 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 = 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 = 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__ */ 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__ */ 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__ */ jsx(
-          AcceptControls,
-          {
-            conflicts: leftDeleted ? [] : leftConflicts,
-            side: "left",
-            onAccept: acceptLeft,
-            onDismiss: dismissLeft,
-            contentRef: registerFollower(0, "left-controls"),
-            argo
-          }
-        ),
-        /* @__PURE__ */ 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__ */ jsx(
-          AcceptControls,
-          {
-            conflicts: rightDeleted ? [] : rightConflicts,
-            side: "right",
-            onAccept: acceptRight,
-            onDismiss: dismissRight,
-            contentRef: registerFollower(2, "right-controls"),
-            argo
-          }
-        ),
-        /* @__PURE__ */ 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__ */ jsxs("div", { children: [
   /* @__PURE__ */ jsx("p", { className: "tw-m-0 tw-text-sm tw-font-medium tw-text-foreground", children: label }),
   sublabel && /* @__PURE__ */ jsx("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: sublabel })
@@ -14414,6 +14007,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 = diffLines(oldText, newText);
   const chunks = [];
@@ -15026,6 +14630,7 @@ var SelectField = ({
   required,
   help,
   className,
+  items,
   options,
   placeholder,
   triggerClassName,
@@ -15035,6 +14640,7 @@ var SelectField = ({
   ...rootProps
 }) => {
   const field = useFieldContext();
+  const resolved = items ?? options ?? [];
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxs(
     Select.Root,
     {
@@ -15056,7 +14662,7 @@ var SelectField = ({
             onBlur: field.handleBlur
           }
         ),
-        /* @__PURE__ */ jsx(Select.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
+        /* @__PURE__ */ jsx(Select.Content, { variant: variant === "argo" ? "argo" : "default", children: resolved.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
       ]
     }
   ) });
@@ -15381,752 +14987,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     }
   );
 };
-var ButtonToolbar = ({ value, children }) => {
-  if (!value && !children) return null;
-  return /* @__PURE__ */ 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__ */ jsx(ClipboardButton, { size: "icon-sm", variant: "invisible", text: value }),
-    children
-  ] });
-};
-var baseThemeStyles = {
-  "*": { lineHeight: "20px" },
-  "*::selection": {
-    backgroundColor: colors3.secondary[500],
-    color: `${colors3.white} !important`
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { backgroundColor: colors3.neutral[150] },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) .cm-gutters': {
-    backgroundColor: colors3.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.warning[700] },
-  // merge (diff) view
-  '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors3.error[100] },
-  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors3.primary[100] },
-  '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors3.error[200] },
-  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors3.primary[200] },
-  '&[class*="cm-merge-"] .cm-deletedText': { background: colors3.error[200] },
-  '&[class*="cm-merge-"] .cm-changedText': { background: colors3.primary[200] },
-  '&[class*="cm-merge-"]': {
-    backgroundColor: `${colors3.white} !important`
-  },
-  '&[class*="cm-merge-"] .cm-gutters': {
-    backgroundColor: `${colors3.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 = githubLightInit({
-  settings: {
-    fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
-    background: colors3.neutral[50],
-    gutterBackground: colors3.neutral[100],
-    gutterBorder: "transparent",
-    lineHighlight: "transparent",
-    selection: colors3.secondary[500]
-  }
-});
-var getLanguageMode = (mode) => {
-  switch (mode) {
-    case "text/x-python":
-      return python();
-    case "text/x-sql":
-      return sql({ upperCaseKeywords: true });
-    case "text/x-sfsql":
-      return StreamLanguage.define(sfsql);
-    case "text/x-plsql":
-      return sql({ upperCaseKeywords: true, dialect: PLSQL });
-    case "text/x-rsrc":
-      return StreamLanguage.define(r);
-    case "text/x-sh":
-      return StreamLanguage.define(shell);
-    case "text/javascript":
-      return javascript({ jsx: true });
-    case "text/typescript":
-      return javascript({ jsx: true, typescript: true });
-    default:
-      return json();
-  }
-};
-var ToggleComponentHelp = () => /* @__PURE__ */ jsxs("div", { children: [
-  "Use ",
-  /* @__PURE__ */ jsx(Kbd, { children: "Ctrl+/" }),
-  " or ",
-  /* @__PURE__ */ jsx(Kbd, { children: "Command+/" }),
-  " to toggle comments."
-] });
-var emptyArray = [];
-var emptyObject = {};
-var CodeEditor = ({
-  value,
-  previousValue,
-  onChange,
-  mode = "application/json",
-  placeholder: placeholder$1 = "",
-  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 = useMemo(() => {
-    return [
-      getLanguageMode(mode),
-      mode === "application/json" && linter(jsonParseLinter()),
-      withLineWrapping ? EditorView.lineWrapping : [],
-      EditorState.languageData.of(() => [
-        { autocomplete: completeAny ? completeAnyWord : autocompletions }
-      ]),
-      keymap.of(
-        Object.entries(extraKeys).map(([key, run]) => ({
-          key,
-          run: () => {
-            if (typeof run === "string") return run;
-            run();
-            return true;
-          }
-        }))
-      ),
-      autocompletion({ activateOnTyping: completeAny }),
-      EditorView.theme(baseThemeStyles)
-    ].filter(Boolean);
-  }, [autocompletions, completeAny, extraKeys, mode, withLineWrapping]);
-  const extensions = useMemo(() => {
-    return [
-      ...commonExtensions,
-      placeholder(placeholder$1),
-      EditorView.editable.of(!readOnly),
-      EditorState.readOnly.of(readOnly),
-      previousValue ? unifiedMergeView({
-        original: previousValue,
-        mergeControls: false,
-        highlightChanges: false,
-        collapseUnchanged: withCollapseUnchanged ? {} : void 0
-      }) : []
-    ];
-  }, [commonExtensions, placeholder$1, readOnly, previousValue, withCollapseUnchanged]);
-  const config = useMemo(() => {
-    return {
-      ...BASIS_SETUP,
-      lineNumbers: withLineNumbers
-    };
-  }, [withLineNumbers]);
-  return (
-    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "tw-flex-1", children: /* @__PURE__ */ jsx(ButtonToolbar, { value: withCopyButton ? value : void 0, children: renderAdditionalButtons?.(value) }) }) }),
-          /* @__PURE__ */ jsx(
-            CodeMirror,
-            {
-              theme: customTheme,
-              value,
-              onChange,
-              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 ${colors3.secondary[300]}, inset 1px 0 0 0 ${colors3.secondary[300]}`,
-        marginRight: "8px"
-      },
-      ".cm-active-query-first": {
-        boxShadow: `inset -1px 0 0 0 ${colors3.secondary[300]}, inset 1px 0 0 0 ${colors3.secondary[300]}, inset 0 1px 0 0 ${colors3.secondary[300]}`,
-        borderRadius: "4px 4px 0 0"
-      },
-      ".cm-active-query-last": {
-        boxShadow: `inset -1px 0 0 0 ${colors3.secondary[300]}, inset 1px 0 0 0 ${colors3.secondary[300]}, inset 0 -1px 0 0 ${colors3.secondary[300]}`,
-        borderRadius: "0 0 4px 4px"
-      },
-      ".cm-active-query-first.cm-active-query-last": {
-        boxShadow: `inset 0 0 0 1px ${colors3.secondary[300]}`,
-        borderRadius: "4px"
-      }
-    })
-  ];
-};
-
-// src/components/CodeEditor/highlighting.ts
-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: colors3.secondary[500]
-  },
-  ".cm-error-line": {
-    backgroundColor: `${colors3.error[100]} !important`
-  },
-  ".cm-processing-line": {
-    backgroundColor: `${colors3.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 = 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: colors3.secondary[100]
-  },
-  ".cm-searchMatch > span": {
-    color: `${colors3.secondary[600]} !important`
-  },
-  ".cm-searchMatch-selected": {
-    backgroundColor: colors3.secondary[600]
-  },
-  ".cm-searchMatch-selected > span": {
-    color: `${colors3.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.white,
-    borderRadius: "8px",
-    paddingTop: "8px",
-    paddingBottom: "8px"
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):hover': {
-    borderColor: colors3.secondary[500]
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):focus-within': {
-    borderColor: colors3.secondary[500],
-    boxShadow: `0 0 0 4px ${colors3.secondary[200]}`
-  },
-  "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
-  "&.cm-editor :is(.cm-gutters,.cm-scroller)": { background: colors3.white },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { background: colors3.neutral[100] },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) :is(.cm-scroller,.cm-gutters)': {
-    background: colors3.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 = useRef(null);
-  const extensions = useMemo(() => {
-    const baseKeymap = [...defaultKeymap, ...CUSTOM_KEYMAP];
-    return [
-      EditorView$1.lineWrapping,
-      keymap$1.of(extraKeys ? [...extraKeys, ...baseKeymap] : baseKeymap),
-      ...installExtensions({ schema, defaultDatabase, defaultSchema, variables, dialect }),
-      searchExtension(),
-      highlightingExtension(queryParser),
-      EditorView$1.theme(theme),
-      onBlurEditor ? EditorView$1.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
-      onFocusEditor ? EditorView$1.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : []
-    ];
-  }, [
-    extraKeys,
-    queryParser,
-    schema,
-    defaultDatabase,
-    defaultSchema,
-    variables,
-    dialect,
-    onBlurEditor,
-    onFocusEditor
-  ]);
-  const defaultSetup = useMemo(() => {
-    return { ...BASIS_SETUP2, lineNumbers };
-  }, [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]);
-  useEffect(() => {
-    if (!onDestroyEditor) return;
-    return () => {
-      onDestroyEditor();
-    };
-  }, [onDestroyEditor]);
-  const handleOnCreate = useCallback(
-    (view, state) => {
-      onCreateEditor?.(view, state);
-      if (highlightLines) {
-        updateHighlighting(view, highlightLines);
-      }
-      if (searchQuery) {
-        updateSearch(view, searchQuery, searchMatchIndex);
-      }
-    },
-    [onCreateEditor, highlightLines, searchQuery, searchMatchIndex]
-  );
-  const handleOnUpdate = useCallback(
-    (update) => {
-      if (update.selectionSet) {
-        const { main } = update.state.selection;
-        const text = update.state.sliceDoc(main.from, main.to);
-        onSelectionChange?.(text);
-      }
-    },
-    [onSelectionChange]
-  );
-  return /* @__PURE__ */ jsx(
-    CodeMirror,
-    {
-      ref: editorRef,
-      theme: customTheme,
-      extensions,
-      value,
-      onChange,
-      onUpdate: handleOnUpdate,
-      onCreateEditor: handleOnCreate,
-      autoFocus,
-      placeholder,
-      className,
-      readOnly,
-      editable: !readOnly,
-      basicSetup: defaultSetup
-    }
-  );
-};
 
-export { Alert, AnswerSummary, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeDecorator, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useColorScheme, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
+export { Alert, AnswerSummary, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeDecorator, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useColorScheme, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map