@keboola/design 9.1.0 → 10.1.0

package/dist/editors.js

@@ -1,2031 +1,20 @@
-import { createContext, useRef, useEffect, useLayoutEffect, useMemo, useCallback, useSyncExternalStore, useState, use, Children, Fragment as Fragment$1 } from 'react';
-import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
-import { jsonParseLinter, json } from '@codemirror/lang-json';
-import { linter } from '@codemirror/lint';
-import { unifiedMergeView } from '@codemirror/merge';
-import { EditorView, Decoration, ViewPlugin, gutter, GutterMarker, keymap as keymap$1, placeholder, tooltips, gutterLineClass } from '@codemirror/view';
-import CodeMirror, { keymap, EditorState, EditorView as EditorView$1 } from '@uiw/react-codemirror';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-import { Root as Root$1, Trigger, Portal, Content } from '@radix-ui/react-tooltip';
-import { cva } from 'class-variance-authority';
-import { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';
+import { LINE_HEIGHT_PX, PANE_HEADER_HEIGHT_PX, CHANGE_CLASS } from './chunk-VMFSRV5H.js';
+import { useThemedExtension, isDarkScheme, resolveToken, buildBasicSetup } from './chunk-7PUUHEJQ.js';
+export { CodeEditor, LANGUAGE_MODES, SqlEditor, isLanguageMode } from './chunk-7PUUHEJQ.js';
+import { useStableCallback } from './chunk-Q7NWXLCT.js';
+import './chunk-L37JJ6MR.js';
+import './chunk-ESBL3IPF.js';
+import { Button } from './chunk-CTCFYWJC.js';
+import { X, ChevronsRight, ChevronsLeft } from './chunk-BOHNXTMM.js';
+import './chunk-63NSN2VL.js';
+import { cn } from './chunk-JP7PNHLH.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Root, Slottable } from '@radix-ui/react-slot';
-import { X, ChevronsRight, ChevronsLeft, Loader2, Copy } from 'lucide-react';
-import { javascript } from '@codemirror/lang-javascript';
-import { python } from '@codemirror/lang-python';
-import { sql, PLSQL, MSSQL, PostgreSQL, MySQL } from '@codemirror/lang-sql';
-import { StreamLanguage } from '@codemirror/language';
-import { r } from '@codemirror/legacy-modes/mode/r';
-import { shell } from '@codemirror/legacy-modes/mode/shell';
-import { toml } from '@codemirror/legacy-modes/mode/toml';
-import { githubLightInit } from '@uiw/codemirror-theme-github';
-import { installExtensions, getSqlDialect } from '@keboola/codemirror-lang-sql';
+import { useRef, useCallback, useMemo, useEffect } from 'react';
+import { Decoration, GutterMarker, EditorView, gutterLineClass } from '@codemirror/view';
+import CodeMirror from '@uiw/react-codemirror';
 import colors from '@keboola/tailwind-config/colors';
-import { simpleMode } from '@codemirror/legacy-modes/mode/simple-mode';
-import { StateEffect, StateField, RangeSet, Compartment, RangeSetBuilder } from '@codemirror/state';
-import { defaultKeymap } from '@codemirror/commands';
+import { StateEffect, StateField, RangeSet, RangeSetBuilder } from '@codemirror/state';
 
-// src/components/CodeEditor/CodeEditor.tsx
-
-// src/constants/keyCodes.ts
-var keyCodes = {
-  ENTER: "Enter",
-  ESCAPE: "Escape",
-  SPACE: " "
-};
-var useStableCallback = (callback) => {
-  const latestRef = useRef(callback);
-  useLayoutEffect(() => {
-    latestRef.current = callback;
-  }, [callback]);
-  return useCallback((...args) => latestRef.current(...args), []);
-};
-var twMerge = extendTailwindMerge({
-  prefix: "tw"
-});
-var cn = (...classes) => twMerge(clsx(...classes));
-
-// src/utils/copyToClipboard.ts
-var copyToClipboard = (text) => {
-  return navigator.clipboard.writeText(text);
-};
-
-// src/components/ThemeProvider/utils.ts
-var createTheme = (brand) => ({
-  id: brand.id,
-  name: brand.name,
-  shell: brand.shell,
-  logo: brand.logo
-});
-
-// src/components/ThemeProvider/defaults.ts
-[keboolaLegacySidebar.id, keboolaLegacyTopnav.id];
-var DEFAULT_COLOR_SCHEME = "light";
-var DEFAULT_BRAND_ID = "design-system";
-var defaultBrand = {
-  id: DEFAULT_BRAND_ID,
-  name: "Design System",
-  shell: "sidebar"};
-var defaultTheme = createTheme(defaultBrand);
-
-// src/components/ThemeProvider/context.tsx
-var noop = () => void 0;
-var defaultContext = {
-  scheme: DEFAULT_COLOR_SCHEME,
-  resolvedScheme: DEFAULT_COLOR_SCHEME,
-  setScheme: noop,
-  brandId: defaultTheme.id,
-  setBrand: noop,
-  themes: [defaultTheme],
-  currentTheme: defaultTheme
-};
-createContext(defaultContext);
-var ArgoDesignContext = createContext(true);
-var useArgoDesign = () => use(ArgoDesignContext);
-var tooltipVariants = cva(
-  [
-    "tailwindcss-preflight",
-    "tw:inline-block",
-    "tw:break-anywhere",
-    "tw:max-h-96",
-    "tw:overflow-y-auto",
-    "tw:z-[1060]",
-    // legacy (dark) chrome — default
-    "tw:rounded",
-    "tw:bg-neutral-800",
-    "tw:text-white",
-    // argo chrome overrides — semantic floating-panel tokens
-    "tw:data-[argo=true]:rounded-2xl",
-    "tw:data-[argo=true]:border",
-    "tw:data-[argo=true]:border-solid",
-    "tw:data-[argo=true]:border-border",
-    "tw:data-[argo=true]:bg-popover",
-    "tw:data-[argo=true]:text-popover-foreground",
-    "tw:data-[argo=true]:shadow-md",
-    // argo open animation
-    "tw:data-[argo=true]:data-[state=delayed-open]:animate-in",
-    "tw:data-[argo=true]:data-[state=instant-open]:animate-in",
-    "tw:data-[argo=true]:data-[state=delayed-open]:fade-in-0",
-    "tw:data-[argo=true]:data-[state=instant-open]:fade-in-0",
-    "tw:data-[argo=true]:data-[state=delayed-open]:zoom-in-95",
-    "tw:data-[argo=true]:data-[state=instant-open]:zoom-in-95",
-    // argo closed animation
-    "tw:data-[argo=true]:data-[state=closed]:animate-out",
-    "tw:data-[argo=true]:data-[state=closed]:fade-out-0",
-    "tw:data-[argo=true]:data-[state=closed]:zoom-out-95",
-    // argo position animation
-    "tw:data-[argo=true]:data-[side=bottom]:slide-in-from-top-2",
-    "tw:data-[argo=true]:data-[side=left]:slide-in-from-right-2",
-    "tw:data-[argo=true]:data-[side=right]:slide-in-from-left-2",
-    "tw:data-[argo=true]:data-[side=top]:slide-in-from-bottom-2"
-  ],
-  {
-    defaultVariants: {
-      variant: "action"
-    },
-    variants: {
-      variant: {
-        action: [
-          "tw:max-w-fit",
-          "tw:px-3",
-          "tw:py-2",
-          "tw:text-center",
-          "tw:text-xs",
-          "tw:font-medium",
-          // Legacy chrome uppercases the action tooltip; the Keboola V2 brand
-          // (`data-brand="keboola"`) renders it in standard case instead.
-          "tw:uppercase",
-          "tw:tracking-wider",
-          "tw:[[data-brand=keboola]_&]:normal-case",
-          "tw:[[data-brand=keboola]_&]:tracking-normal"
-        ],
-        explanatory: [
-          "tw:max-w-80",
-          "tw:px-4",
-          "tw:py-3",
-          "tw:text-left",
-          "tw:text-sm",
-          "tw:font-normal"
-        ]
-      }
-    }
-  }
-);
-var TooltipContent = ({
-  className,
-  variant,
-  keepOpenOnPointerDownOutside = false,
-  children,
-  onPointerDownOutside,
-  sideOffset = 8,
-  collisionPadding = 8,
-  hideWhenDetached = true,
-  placement = "right",
-  ...rest
-}) => {
-  const renderArgo = useArgoDesign();
-  const handlePointerDownOutside = (event) => {
-    if (keepOpenOnPointerDownOutside) event.preventDefault();
-    onPointerDownOutside?.(event);
-  };
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-    Content,
-    {
-      ...rest,
-      "data-tooltip-content": renderArgo ? void 0 : true,
-      "data-argo": renderArgo,
-      sideOffset,
-      collisionPadding,
-      onPointerDownOutside: handlePointerDownOutside,
-      className: tooltipVariants({ className, variant }),
-      hideWhenDetached,
-      side: placement,
-      children
-    }
-  ) });
-};
-var DELAY_SHOW_TOOLTIP = 300;
-var TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }) => /* @__PURE__ */ jsx(Root$1, { ...rest, delayDuration, children });
-var TooltipTrigger = ({
-  ref,
-  children,
-  className,
-  keepOpenOnClick = false,
-  onClick,
-  onPointerDown,
-  asChild,
-  ...rest
-}) => {
-  const handleClick = (event) => {
-    if (keepOpenOnClick) event.preventDefault();
-    onClick?.(event);
-  };
-  const handlePointerDown = (event) => {
-    if (keepOpenOnClick) event.preventDefault();
-    onPointerDown?.(event);
-  };
-  return /* @__PURE__ */ jsx(
-    Trigger,
-    {
-      ...rest,
-      asChild: true,
-      ref,
-      className: cn("tailwindcss-preflight", className),
-      onClick: handleClick,
-      onPointerDown: handlePointerDown,
-      children: asChild ? children : (
-        // Default-mode trigger wraps children in a span so Radix has a
-        // single DOM element to attach handlers to. `tailwindcss-preflight`
-        // (merged in via Slot) activates Tailwind's preflight inside the
-        // span, which sets `svg { display: block }` — without an inline-flex
-        // container that would stack any bare Lucide icon onto its own
-        // line. `tw:inline-flex tw:items-center` keeps icon + text aligned.
-        /* @__PURE__ */ jsx("span", { className: "tw:inline-flex tw:items-center", children })
-      )
-    }
-  );
-};
-var ACTION_TOOLTIP_LIMIT = 30;
-var Tooltip = ({
-  tooltip,
-  children,
-  className,
-  keepOpenOnTriggerClick = false,
-  variant,
-  placement = "right",
-  forceHide = false,
-  forceShow = false,
-  delayDuration,
-  // trigger props
-  triggerAsChild = false
-}) => {
-  const [open, setOpen] = useState(false);
-  const resolvedVariant = (() => {
-    if (!!variant) return variant;
-    if (typeof tooltip === "string" && tooltip.length > ACTION_TOOLTIP_LIMIT) return "explanatory";
-    return "action";
-  })();
-  const isActionVariant = resolvedVariant === "action";
-  const handleKeyUp = (event) => {
-    if (![keyCodes.ENTER, keyCodes.SPACE].includes(event.key)) return;
-    event.stopPropagation();
-  };
-  return /* @__PURE__ */ jsxs(
-    TooltipRoot,
-    {
-      open: !!tooltip && (open || forceShow) && !forceHide,
-      onOpenChange: setOpen,
-      delayDuration,
-      disableHoverableContent: isActionVariant,
-      children: [
-        /* @__PURE__ */ jsx(
-          TooltipTrigger,
-          {
-            asChild: triggerAsChild,
-            keepOpenOnClick: keepOpenOnTriggerClick,
-            onKeyUp: handleKeyUp,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TooltipContent,
-          {
-            className,
-            variant: resolvedVariant,
-            placement,
-            keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
-            children: tooltip
-          }
-        )
-      ]
-    }
-  );
-};
-Tooltip.Root = TooltipRoot;
-Tooltip.Content = TooltipContent;
-Tooltip.Trigger = TooltipTrigger;
-
-// src/utils/escapeStringRegexp.ts
-var escapeStringRegexp = (string) => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
-
-// src/utils/isMac.ts
-var getIsMac = () => {
-  if (typeof navigator !== "undefined" && "userAgentData" in navigator) {
-    const platform = navigator.userAgentData.platform;
-    if (typeof platform === "string") {
-      return platform.toLowerCase() === "macos";
-    }
-  }
-  if (typeof navigator !== "undefined" && typeof navigator.platform === "string") {
-    return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
-  }
-  return false;
-};
-var isMac = getIsMac();
-var helpVariants = cva(["tw:m-0", "tw:text-xs"], {
-  defaultVariants: {
-    state: "default"
-  },
-  variants: {
-    state: {
-      default: ["tw:text-muted-foreground"],
-      warning: ["tw:text-warning"]
-    }
-  }
-});
-var HelpBlock = ({ children, className, state = "default", ...rest }) => {
-  if (!children) return null;
-  return /* @__PURE__ */ jsx("p", { ...rest, className: helpVariants({ state, className }), children });
-};
-var variants = cva(
-  [
-    "tailwindcss-preflight",
-    "tw:group/button",
-    "tw:border-box",
-    // layout
-    "tw:relative",
-    "tw:flex",
-    "tw:items-center",
-    "tw:justify-center",
-    "tw:gap-2",
-    // text — chrome weight/tracking are brand-overridable tokens
-    // (`--font-weight-medium` / `--letter-spacing-chrome`). Casing: standard case is
-    // the default; only legacy brands (`keboola-legacy-*`) uppercase the chrome, so
-    // modern brands (incl. Keboola V2) read naturally. Mirrors the V2 standard-case
-    // treatment shipped for Tooltip/Badge (PR 7629).
-    "tw:text-xs",
-    "tw:leading-5",
-    "tw:font-medium",
-    "tw:[[data-brand^=keboola-legacy]_&]:tracking-chrome",
-    "tw:[[data-brand^=keboola-legacy]_&]:uppercase",
-    // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.
-    "tw:rounded",
-    "tw:border",
-    "tw:border-transparent",
-    // styling
-    "tw:shadow-none",
-    "tw:[a]:cursor-pointer",
-    // explicitly set for anchor
-    "tw:focus-visible:outline",
-    "tw:focus-visible:outline-1",
-    "tw:focus-visible:-outline-offset-1",
-    "tw:focus-visible:outline-ring",
-    "tw:focus-visible:ring-4",
-    "tw:focus-visible:ring-ring/30",
-    // disabled
-    "tw:disabled:opacity-40",
-    "tw:disabled:cursor-not-allowed",
-    // anchor support
-    "tw:!no-underline",
-    "tw:aria-disabled:opacity-40",
-    "tw:aria-disabled:cursor-not-allowed",
-    "tw:[&_svg]:shrink-0"
-  ],
-  {
-    defaultVariants: {
-      size: "medium",
-      variant: "primary",
-      block: false
-    },
-    variants: {
-      block: {
-        true: ["tw:w-full"]
-      },
-      variant: {
-        primary: [
-          "tw:text-white",
-          "tw:bg-primary-500",
-          "tw:focus:text-white",
-          "tw:hover:text-white",
-          "tw:hover:not-disabled:bg-primary-600",
-          "tw:active:not-disabled:bg-primary-800",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-primary-500"
-        ],
-        secondary: [
-          "tw:text-white",
-          "tw:bg-secondary-500",
-          "tw:focus:text-white",
-          "tw:hover:text-white",
-          "tw:hover:not-disabled:bg-secondary-700",
-          "tw:active:not-disabled:bg-secondary-800",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-secondary-500"
-        ],
-        danger: [
-          "tw:text-white",
-          "tw:bg-error-500",
-          "tw:focus:text-white",
-          "tw:hover:text-white",
-          "tw:hover:not-disabled:bg-error-600",
-          "tw:active:not-disabled:bg-error-700",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-error-500"
-        ],
-        invisible: [
-          "tw:text-neutral-800",
-          "tw:bg-transparent",
-          "tw:focus:text-neutral-800",
-          "tw:hover:not-disabled:bg-neutral-100",
-          "tw:hover:text-neutral-800",
-          "tw:active:not-disabled:bg-neutral-150",
-          // contrasting icon on hover/active
-          "tw:[&_svg]:text-neutral-400",
-          "tw:hover:not-disabled:[&_svg]:text-secondary-600",
-          "tw:active:not-disabled:[&_svg]:text-secondary-600",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-transparent"
-        ],
-        outline: [
-          "tw:text-neutral-800",
-          "tw:bg-white",
-          // border
-          "tw:!border-neutral-200",
-          "tw:hover:text-neutral-800",
-          "tw:focus:text-neutral-800",
-          "tw:hover:not-disabled:!border-neutral-300",
-          "tw:hover:not-disabled:bg-neutral-100",
-          "tw:active:not-disabled:bg-neutral-200",
-          // contrasting icon hover, same as invisible
-          "tw:[&_svg]:text-neutral-400",
-          "tw:not-disabled:hover:[&_svg]:text-secondary-600",
-          "tw:active:not-disabled:[&_svg]:text-secondary-600",
-          // anchor disabled override
-          "tw:aria-disabled:!bg-white",
-          "tw:aria-disabled:!border-neutral-200"
-        ],
-        inline: [
-          "tw:text-neutral-800",
-          "tw:bg-transparent",
-          "tw:rounded-full",
-          "tw:[&_svg]:text-neutral-400",
-          "tw:not-disabled:hover:[&_svg]:text-secondary-600",
-          "tw:not-disabled:focus:[&_svg]:text-secondary-600"
-        ]
-      },
-      size: {
-        medium: [
-          "tw:max-h-10",
-          "tw:min-h-10",
-          "tw:px-4",
-          "tw:py-2.5",
-          'tw:[&_svg:not([class*="tw:size-"])]:size-4'
-        ],
-        small: [
-          "tw:max-h-8",
-          "tw:min-h-8",
-          "tw:px-4",
-          "tw:py-1.5",
-          'tw:[&_svg:not([class*="tw:size-"])]:size-4'
-        ],
-        large: [
-          "tw:max-h-12",
-          "tw:min-h-12",
-          "tw:px-4",
-          "tw:py-3.5",
-          'tw:[&_svg:not([class*="tw:size-"])]:size-4'
-        ],
-        "icon-lg": ["tw:size-12", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-6'],
-        icon: ["tw:size-10", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
-        "icon-sm": ["tw:size-8", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
-        "icon-xs": ["tw:size-6", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
-        "icon-2xs": [
-          "tw:!inline-flex",
-          "tw:size-5",
-          "tw:max-h-5",
-          'tw:[&_svg:not([class*="tw:size-"])]:size-3'
-        ],
-        "icon-3xs": ["tw:h-fit", "tw:w-fit", 'tw:[&_svg:not([class*="tw:size-"])]:size-4']
-      }
-    }
-  }
-);
-var argoVariants = cva(
-  [
-    "tailwindcss-preflight",
-    // layout
-    "tw:relative",
-    "tw:inline-flex",
-    "tw:items-center",
-    "tw:justify-center",
-    "tw:whitespace-nowrap",
-    "tw:gap-2",
-    // border
-    "tw:border",
-    "tw:border-transparent",
-    "tw:rounded-[var(--radius-lg,0.25rem)]",
-    // text
-    "tw:font-medium",
-    "tw:select-none",
-    // focus visible
-    "tw:!outline-hidden",
-    "tw:focus-visible:ring-2",
-    // disabled
-    "tw:disabled:cursor-not-allowed",
-    "tw:disabled:opacity-50",
-    "tw:active:opacity-60",
-    "tw:transition-all",
-    "tw:bg-clip-padding",
-    // anchor support
-    "tw:!no-underline",
-    "tw:aria-disabled:cursor-not-allowed",
-    "tw:aria-disabled:opacity-50",
-    // icon
-    "tw:shrink-0",
-    "tw:[&_svg]:pointer-events-none",
-    "tw:[&_svg]:shrink-0",
-    "tw:[&_svg:not([class*='tw:size-'])]:size-4"
-  ],
-  {
-    defaultVariants: {
-      variant: "primary",
-      size: "medium"
-    },
-    variants: {
-      block: {
-        true: ["tw:w-full"]
-      },
-      variant: {
-        primary: [
-          "tw:bg-primary",
-          "tw:text-primary-foreground",
-          "tw:[a]:hover:bg-primary/80",
-          "tw:hover:not-disabled:bg-primary/90",
-          "tw:hover:text-primary-foreground",
-          "tw:focus:text-primary-foreground",
-          "tw:focus-visible:border-primary",
-          "tw:focus-visible:ring-ring/50"
-        ],
-        secondary: [
-          "tw:bg-primary/10",
-          "tw:text-primary",
-          "tw:hover:not-disabled:bg-primary/20",
-          "tw:focus-visible:border-primary",
-          "tw:focus-visible:ring-ring/50"
-        ],
-        // should be called "destructive" by Figma
-        danger: [
-          "tw:bg-destructive",
-          "tw:text-destructive-foreground",
-          "tw:hover:text-destructive-foreground",
-          "tw:focus:text-destructive-foreground",
-          "tw:focus-visible:border-destructive",
-          "tw:focus-visible:ring-destructive/20"
-        ],
-        outline: [
-          "tw:!border-input",
-          "tw:bg-background",
-          // Semantic base text color so the label/icon flips in dark mode
-          // (matches `invisible`); previously unset → inherited a fixed dark color.
-          "tw:text-foreground",
-          // Hover follows the brand primary (translucent tint), matching the
-          // `secondary` variant — not the fixed `accent` blue.
-          "tw:hover:not-disabled:bg-primary/10",
-          "tw:hover:not-disabled:text-primary",
-          "tw:hover:active:bg-background",
-          "tw:focus-visible:!border-primary",
-          "tw:focus-visible:ring-ring/50"
-        ],
-        // should be called "ghost" by Figma
-        invisible: [
-          "tw:bg-transparent",
-          "tw:text-foreground",
-          "tw:hover:not-disabled:bg-primary/10",
-          "tw:hover:not-disabled:text-primary",
-          "tw:hover:not-disabled:border-primary/10",
-          "tw:focus-visible:ring-ring/50"
-        ],
-        // should be called "link" by Figma
-        inline: [
-          "tw:bg-transparent",
-          "tw:text-primary",
-          "tw:hover:underline",
-          "tw:hover:active:bg-transparent",
-          "tw:focus-visible:ring-ring/50"
-        ]
-      },
-      size: {
-        // should be called "default" by Figma
-        medium: ["tw:max-h-9", "tw:py-2", "tw:px-4", "tw:text-sm"],
-        // should be called "small" by Figma
-        small: ["tw:max-h-8", "tw:py-2", "tw:px-3", "tw:text-xs"],
-        // should be called "large" by Figma
-        large: ["tw:max-h-10", "tw:py-2.5", "tw:px-6", "tw:text-sm"],
-        "icon-lg": ["tw:size-10"],
-        icon: ["tw:size-9"],
-        "icon-sm": ["tw:size-8"],
-        // unsupported in ARGO, remove when old design is gone
-        "icon-xs": [],
-        "icon-2xs": [],
-        "icon-3xs": []
-      }
-    }
-  }
-);
-var Button = ({
-  ref,
-  children,
-  disabled = false,
-  className,
-  type = "button",
-  isLoading = false,
-  asChild = false,
-  onClick,
-  variant = "primary",
-  size = "medium",
-  block = false,
-  ...buttonProps
-}) => {
-  const renderArgo = useArgoDesign();
-  const Comp = asChild ? Root : "button";
-  const isIconOnly = String(size).startsWith("icon");
-  const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
-  const handleClick = (event) => {
-    const isAnchor = event.currentTarget.tagName === "A";
-    if (isAnchor && disabled) {
-      event.preventDefault();
-      return;
-    }
-    onClick?.(event);
-  };
-  return /* @__PURE__ */ jsxs(
-    Comp,
-    {
-      ...buttonProps,
-      ref,
-      disabled,
-      "aria-disabled": disabled,
-      "data-variant": variant,
-      "data-icon-only": isIconOnly,
-      type,
-      onClick: handleClick,
-      className: cn(classNames),
-      children: [
-        isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:shrink-0 tw:animate-spin" }),
-        /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })
-      ]
-    }
-  );
-};
-var Clipboard2 = ({
-  ref,
-  text: textProp,
-  children,
-  tooltip = "Copy to Clipboard",
-  tooltipPlacement = "top",
-  tooltipVariant: tooltipVariantProp = "action",
-  asChild = false,
-  onClick,
-  className,
-  ...restButtonProps
-}) => {
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const [state, setState] = useState("ready");
-  const text = typeof textProp === "function" ? textProp() : textProp;
-  const copy = async (text2) => {
-    try {
-      if (!document.hasFocus()) window.focus();
-      await copyToClipboard(text2);
-      setState("copied");
-    } catch {
-      setState("error");
-    }
-  };
-  const handleOnClick = (event) => {
-    setIsTooltipOpen(true);
-    if (text && state === "ready") void copy(text);
-    onClick?.(event);
-  };
-  const handleOnOpenChange = (open) => {
-    if (!open && state !== "ready") setState("ready");
-    setIsTooltipOpen(open);
-  };
-  const tooltipContent = (() => {
-    if (!text) return "Nothing to copy";
-    if (state === "error") return "Failed to copy";
-    if (state === "copied") return "Copied to Clipboard";
-    return tooltip;
-  })();
-  const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
-  const hasTooltipContent = tooltipContent !== null && tooltipContent !== void 0;
-  return /* @__PURE__ */ jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ jsx(
-      Tooltip.Trigger,
-      {
-        ...restButtonProps,
-        asChild,
-        keepOpenOnClick: true,
-        onClick: handleOnClick,
-        className: cn("tw:cursor-pointer", className),
-        ref,
-        children: children ?? text
-      }
-    ),
-    hasTooltipContent && /* @__PURE__ */ jsx(
-      Tooltip.Content,
-      {
-        keepOpenOnPointerDownOutside: true,
-        placement: tooltipPlacement,
-        variant: tooltipVariant,
-        children: tooltipContent
-      }
-    )
-  ] });
-};
-var DEFAULT_ICON = /* @__PURE__ */ jsx(Copy, {});
-var DEFAULT_ARIA_LABEL = "Copy";
-var ClipboardButton = ({
-  // clipboard props
-  text,
-  tooltip,
-  tooltipPlacement,
-  tooltipVariant,
-  // button props
-  icon = DEFAULT_ICON,
-  variant = "outline",
-  children,
-  ...rest
-}) => {
-  const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
-  const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
-  return /* @__PURE__ */ jsx(
-    Clipboard2,
-    {
-      asChild: true,
-      tooltip,
-      tooltipPlacement,
-      tooltipVariant,
-      text,
-      children: /* @__PURE__ */ jsxs(Button, { ...rest, "aria-label": ariaLabel, variant, disabled: !text, children: [
-        icon,
-        children
-      ] })
-    }
-  );
-};
-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 COMMANDS = [
-  "run-operation",
-  "run",
-  "test",
-  "seed",
-  "snapshot",
-  "list",
-  "ls",
-  "compile",
-  "build",
-  "deps",
-  "docs",
-  "source"
-];
-var SUBCOMMANDS = { docs: ["generate"], source: ["freshness"] };
-var ARGUMENTS = ["--select", "--exclude", "--selector", "--defer", "--resource-type", "-s"];
-var SELECTORS = ["--select", "--exclude", "-s"];
-var METHODS = [
-  "path:",
-  "source:",
-  "tag:",
-  "package:",
-  "config:",
-  "test_type:",
-  "test_name:",
-  "state:",
-  "exposure:",
-  "metric:",
-  "result:",
-  "source_status:",
-  "column_name:"
-];
-var FLAGS = [
-  "--fail-fast",
-  "--warn-error",
-  "--favor-state",
-  "--vars",
-  "--models",
-  "--threads",
-  "--profiles-dir",
-  "--profile",
-  "--full-refresh"
-];
-var COMMAND_PHRASES = COMMANDS.flatMap((command) => {
-  const subcommands = SUBCOMMANDS[command];
-  return subcommands ? subcommands.map((subcommand) => `${command} ${subcommand}`) : [command];
-});
-var alternation = (list) => [...list].sort((a, b) => b.length - a.length).join("|");
-var word = (list) => new RegExp(`^\\s+(?:${alternation(list)})\\b`, "i");
-var prefix = (list) => new RegExp(`^\\s+(?:${alternation(list)})`, "i");
-var WORD = /[\w:-]*$/;
-var asOptions = (list, type) => list.map((label) => ({ label, type }));
-var DBT = [{ label: "dbt", type: "keyword" }];
-var COMMAND_OPTIONS = asOptions(COMMANDS, "keyword");
-var SUBCOMMAND_OPTIONS = Object.fromEntries(
-  Object.entries(SUBCOMMANDS).map(([command, subcommands]) => [
-    command,
-    asOptions(subcommands, "keyword")
-  ])
-);
-var ARGUMENT_OPTIONS = asOptions(ARGUMENTS, "variable");
-var FLAG_OPTIONS = asOptions(FLAGS, "constant");
-var METHOD_OPTIONS = asOptions(METHODS, "property");
-var optionsAfter = (words) => {
-  const [step, command, ...rest] = words;
-  if (step === void 0) return DBT;
-  if (step.toLowerCase() !== "dbt") return [];
-  if (command === void 0) return COMMAND_OPTIONS;
-  const subcommands = SUBCOMMAND_OPTIONS[command.toLowerCase()];
-  if (subcommands && rest.length === 0) return subcommands;
-  const lastArgument = rest.filter((it) => it.startsWith("-")).at(-1);
-  const selecting = lastArgument !== void 0 && SELECTORS.includes(lastArgument.toLowerCase());
-  return selecting ? [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS, ...METHOD_OPTIONS] : [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS];
-};
-var complete = (context) => {
-  const typed = context.matchBefore(WORD);
-  if (!typed?.text && !context.explicit) return null;
-  const from = typed?.from ?? context.pos;
-  const line = context.state.doc.lineAt(from);
-  const options = optionsAfter(
-    line.text.slice(0, from - line.from).split(/\s+/).filter(Boolean)
-  );
-  return options.length > 0 ? { from, options, validFor: WORD } : null;
-};
-var dbt = simpleMode({
-  languageData: {
-    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
-    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
-    autocomplete: complete
-  },
-  start: [
-    { regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string" },
-    // Word-bounded, so `dbtX` is not a dbt step whose first word happens to
-    // colour — the same thing the completion source asks of it.
-    { regex: /dbt\b/, token: "keyword", sol: true },
-    { regex: word(COMMAND_PHRASES), token: "keyword" },
-    { regex: word(ARGUMENTS), token: "variableName" },
-    { regex: prefix(METHODS), token: "propertyName" },
-    { regex: prefix(FLAGS), token: "attributeName" },
-    { regex: /(?:@|\*|,|\+\d+|\d+\+|\+)/, token: "operator" },
-    { regex: /'.*'/, token: "string" },
-    { regex: /true|false/, token: "atom" }
-  ]
-});
-
-// src/components/CodeEditor/modes/jsonnet.ts
-var COMMENT_END = /^\*\//;
-var COMMENT_START = /^\/\/|^#/;
-var C_COMMENT_START = /^\/\*/;
-var TEXT_BLOCK = /^\|\|\|/;
-var TEXT_BLOCK_END = /^\s*\|\|\|/;
-var RAW_DOUBLE = /^""/;
-var RAW_SINGLE = /^''/;
-var CLOSE_DOUBLE = /^"/;
-var CLOSE_SINGLE = /^'/;
-var ESCAPE = /^\\[\\"'/bfnrt0]/;
-var UNICODE_ESCAPE = /^\\u[0-9a-fA-F]{4}/;
-var BACKSLASH = /^\\/;
-var IMPORT = /^import(?:str)?\s*(@?)(["'])/;
-var QUOTE = /^(@?)(["'])/;
-var ROOT = /^\$/;
-var NUMBER = /^(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i;
-var OPERATOR = /^[-+/*=<>!&~^|$%]+/;
-var IDENTIFIER = /^[a-zA-Z_][a-zA-Z0-9_]*/;
-var KEYWORDS = {
-  local: "keyword",
-  self: "keyword",
-  super: "keyword",
-  assert: "keyword",
-  function: "keyword",
-  if: "keyword",
-  then: "keyword",
-  else: "keyword",
-  for: "keyword",
-  in: "keyword",
-  tailstrict: "keyword",
-  error: "keyword",
-  true: "atom",
-  false: "atom",
-  null: "atom"
-};
-var jsonnet = {
-  name: "jsonnet",
-  // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
-  languageData: { commentTokens: { line: "//", block: { open: "/*", close: "*/" } } },
-  startState: () => ({
-    cComment: false,
-    textBlock: false,
-    textBlockIndent: null,
-    string: false,
-    importString: false,
-    stringSingle: false,
-    stringRaw: false
-  }),
-  token: (stream, state) => {
-    if (state.cComment) {
-      if (stream.match(COMMENT_END)) {
-        state.cComment = false;
-        return "comment";
-      }
-      stream.next();
-      return "comment";
-    }
-    if (state.textBlock) {
-      if (state.textBlockIndent == null) {
-        if (stream.match(TEXT_BLOCK_END)) {
-          state.textBlock = false;
-          return "string";
-        }
-        state.textBlockIndent = stream.indentation();
-      }
-      if (stream.indentation() >= state.textBlockIndent) {
-        stream.skipToEnd();
-        return "string";
-      }
-      if (stream.match(TEXT_BLOCK_END)) {
-        state.textBlock = false;
-        return "string";
-      }
-      stream.next();
-      return "invalid";
-    }
-    if (state.string || state.importString) {
-      const style = state.string ? "string" : "meta";
-      if (state.stringRaw) {
-        if (stream.match(state.stringSingle ? RAW_SINGLE : RAW_DOUBLE)) return "escape";
-      } else {
-        if (stream.match(ESCAPE)) return "escape";
-        if (stream.match(UNICODE_ESCAPE)) return "escape";
-        if (stream.match(BACKSLASH)) return "invalid";
-      }
-      if (stream.match(state.stringSingle ? CLOSE_SINGLE : CLOSE_DOUBLE)) {
-        state.string = false;
-        state.importString = false;
-        return style;
-      }
-      stream.next();
-      return style;
-    }
-    if (stream.match(COMMENT_START)) {
-      stream.skipToEnd();
-      return "comment";
-    }
-    if (stream.match(C_COMMENT_START)) {
-      state.cComment = true;
-      return "comment";
-    }
-    const imported = stream.match(IMPORT);
-    if (Array.isArray(imported)) {
-      state.importString = true;
-      state.stringRaw = imported[1] === "@";
-      state.stringSingle = imported[2] === "'";
-      return "meta";
-    }
-    const quoted = stream.match(QUOTE);
-    if (Array.isArray(quoted)) {
-      state.string = true;
-      state.stringRaw = quoted[1] === "@";
-      state.stringSingle = quoted[2] === "'";
-      return "string";
-    }
-    if (stream.match(TEXT_BLOCK)) {
-      state.textBlock = true;
-      state.textBlockIndent = null;
-      return "string";
-    }
-    if (stream.match(ROOT)) return "keyword";
-    if (stream.match(NUMBER)) return "number";
-    if (stream.match(OPERATOR)) return "operator";
-    const identifier = stream.match(IDENTIFIER);
-    if (Array.isArray(identifier)) return KEYWORDS[identifier[0]] ?? null;
-    stream.next();
-    return null;
-  }
-};
-var resolveToken = (token, fallbackChannels, alpha) => {
-  const channels = typeof document === "undefined" ? fallbackChannels : getComputedStyle(document.documentElement).getPropertyValue(`--${token}`).trim() || fallbackChannels;
-  return alpha === void 0 ? `rgb(${channels})` : `rgb(${channels} / ${alpha})`;
-};
-var SSR_SIGNAL = "ssr";
-var readThemeSignal = () => {
-  if (typeof document === "undefined") return SSR_SIGNAL;
-  const root = document.documentElement;
-  return `${root.getAttribute("data-theme") ?? ""}:${root.getAttribute("data-brand") ?? ""}`;
-};
-var subscribeThemeSignal = (onChange) => {
-  if (typeof document === "undefined") return () => {
-  };
-  const observer = new MutationObserver(onChange);
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["data-theme", "data-brand"]
-  });
-  return () => observer.disconnect();
-};
-var useThemeSignal = () => useSyncExternalStore(subscribeThemeSignal, readThemeSignal, () => SSR_SIGNAL);
-var themeCache = /* @__PURE__ */ new Map();
-var useThemedExtension = (cacheKey, build) => {
-  const themeSignal = useThemeSignal();
-  const key = `${themeSignal} ${cacheKey}`;
-  let cached = themeCache.get(key);
-  if (!cached) {
-    cached = build();
-    themeCache.set(key, cached);
-  }
-  return cached;
-};
-
-// src/components/CodeEditor/helpers.ts
-var LANGUAGE_MODES = [
-  "application/json",
-  "text/plain",
-  "text/x-python",
-  "text/x-sql",
-  "text/x-mysql",
-  "text/x-pgsql",
-  "text/x-mssql",
-  // Snowflake, under a historical name — these strings are a published prop contract.
-  "text/x-sfsql",
-  "text/x-plsql",
-  "text/x-rsrc",
-  "text/x-sh",
-  "text/x-toml",
-  "text/jsonnet",
-  "text/x-dbt",
-  "text/javascript",
-  "text/typescript"
-];
-var isLanguageMode = (mode) => LANGUAGE_MODES.includes(mode);
-var buildBaseThemeStyles = () => ({
-  "*": { lineHeight: "20px" },
-  "*::selection": {
-    backgroundColor: resolveToken("primary", "31 143 255"),
-    color: `${resolveToken("primary-foreground", "255 255 255")} !important`
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': {
-    backgroundColor: resolveToken("secondary", "226 232 240")
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) .cm-gutters': {
-    backgroundColor: resolveToken("border", "229 231 235")
-  },
-  "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
-  "&.cm-editor, &.cm-editor .cm-scroller": {
-    minHeight: "100%",
-    flexGrow: 1,
-    alignItems: "stretch !important",
-    outline: "none"
-  },
-  ".cm-gutter.cm-foldGutter": { display: "none !important" },
-  ".cm-gutter.cm-lineNumbers": { paddingLeft: "20px", paddingRight: "6px" },
-  ".cm-gutters": { height: "auto" },
-  // tokens overrides
-  ".cm-line .tok-string": { color: colors.warning[700] },
-  // merge (diff) view
-  '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors.error[100] },
-  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors.green[100] },
-  '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors.error[200] },
-  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors.green[200] },
-  '&[class*="cm-merge-"] .cm-deletedText': { background: colors.error[200] },
-  '&[class*="cm-merge-"] .cm-changedText': { background: colors.green[200] },
-  '&[class*="cm-merge-"]': {
-    backgroundColor: `${colors.white} !important`
-  },
-  '&[class*="cm-merge-"] .cm-gutters': {
-    backgroundColor: `${colors.white} !important`
-  },
-  ".cm-changeGutter": { position: "absolute", zIndex: -1, width: "100%", paddingLeft: 0 },
-  '&[class*="cm-merge-"] .cm-changedLine,&[class*="cm-merge-"] .cm-line, &[class*="cm-merge-"] .cm-deletedChunk': { paddingLeft: 0 }
-});
-var ALWAYS_OFF = {
-  drawSelection: false,
-  foldGutter: false,
-  foldKeymap: false,
-  highlightActiveLine: false,
-  highlightActiveLineGutter: false
-};
-var buildBasicSetup = (readOnly) => ({
-  ...ALWAYS_OFF,
-  ...readOnly ? {
-    closeBrackets: false,
-    closeBracketsKeymap: false,
-    lintKeymap: false,
-    indentOnInput: false,
-    rectangularSelection: false,
-    dropCursor: false,
-    highlightSelectionMatches: false
-  } : null
-});
-var buildCustomTheme = () => githubLightInit({
-  settings: {
-    fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
-    background: resolveToken("background", "249 250 251"),
-    foreground: resolveToken("foreground", "30 41 59"),
-    gutterBackground: resolveToken("muted", "241 245 249"),
-    gutterForeground: resolveToken("muted-foreground", "100 116 139"),
-    gutterBorder: "transparent",
-    lineHighlight: "transparent",
-    selection: resolveToken("primary", "31 143 255")
-  }
-});
-var getLanguageMode = (mode) => {
-  switch (mode) {
-    case void 0:
-    case "application/json":
-      return json();
-    case "text/x-python":
-      return python();
-    case "text/x-sql":
-      return sql({ upperCaseKeywords: true });
-    case "text/x-mysql":
-      return sql({ upperCaseKeywords: true, dialect: MySQL });
-    case "text/x-pgsql":
-      return sql({ upperCaseKeywords: true, dialect: PostgreSQL });
-    case "text/x-mssql":
-      return sql({ upperCaseKeywords: true, dialect: MSSQL });
-    case "text/x-sfsql":
-      return sql({ upperCaseKeywords: true, dialect: getSqlDialect("snowflake") });
-    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/x-toml":
-      return StreamLanguage.define(toml);
-    case "text/jsonnet":
-      return StreamLanguage.define(jsonnet);
-    case "text/x-dbt":
-      return StreamLanguage.define(dbt);
-    case "text/javascript":
-      return javascript({ jsx: true });
-    case "text/typescript":
-      return javascript({ jsx: true, typescript: true });
-    // No language — `text/plain` lands here, and so does any mode added to
-    // LANGUAGE_MODES without an arm above. Unstyled text is the safe degradation;
-    // a `json()` default would colour unrelated content as if it were JSON.
-    default:
-      return [];
-  }
-};
-var shouldLintJson = (mode, readOnly) => mode === "application/json" && !readOnly;
-var setSearchEffect = StateEffect.define();
-function findMatches(doc, query) {
-  if (!query) return [];
-  const text = doc.toString();
-  try {
-    const regex = new RegExp(escapeStringRegexp(query), "gi");
-    return Array.from(text.matchAll(regex)).map((match, index) => {
-      const from = match.index;
-      const to = from + match[0].length;
-      return { from, to, text: match[0], localIndex: index };
-    });
-  } catch (e) {
-    console.warn("Invalid search regex:", e);
-    return [];
-  }
-}
-function createDecorations(matches, selectedLocalIndex) {
-  const decorations = matches.map((match) => {
-    const isSelected = match.localIndex === selectedLocalIndex;
-    const decoration = Decoration.mark({
-      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
-    });
-    return decoration.range(match.from, match.to);
-  });
-  return Decoration.set(decorations, true);
-}
-var searchField = StateField.define({
-  create() {
-    return {
-      query: "",
-      selectedMatchIndex: void 0,
-      matches: [],
-      decorations: Decoration.none
-    };
-  },
-  update(state, tr) {
-    let newState = state;
-    for (const effect of tr.effects) {
-      if (!effect.is(setSearchEffect)) {
-        continue;
-      }
-      const { query, selectedMatchIndex } = effect.value;
-      const matches = findMatches(tr.state.doc, query);
-      const decorations = createDecorations(matches, selectedMatchIndex);
-      newState = {
-        query,
-        selectedMatchIndex,
-        matches,
-        decorations
-      };
-    }
-    if (tr.docChanged && newState.query) {
-      const matches = findMatches(tr.state.doc, newState.query);
-      const decorations = createDecorations(matches, newState.selectedMatchIndex);
-      newState = {
-        ...newState,
-        matches,
-        decorations
-      };
-    }
-    return newState;
-  },
-  provide: (field) => EditorView.decorations.from(field, (state) => state.decorations)
-});
-var searchViewPlugin = ViewPlugin.fromClass(
-  class {
-    lastSelectedIndex;
-    update(update) {
-      const state = update.state.field(searchField);
-      if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
-        const match = state.matches[state.selectedMatchIndex];
-        if (match) {
-          requestAnimationFrame(() => {
-            update.view.dispatch({
-              effects: EditorView.scrollIntoView(match.from, { y: "center" })
-            });
-          });
-        }
-        this.lastSelectedIndex = state.selectedMatchIndex;
-      }
-      if (state.selectedMatchIndex === void 0) {
-        this.lastSelectedIndex = void 0;
-      }
-    }
-  }
-);
-var searchTheme = EditorView.baseTheme({
-  ".cm-searchMatch": {
-    backgroundColor: colors.blue[100]
-  },
-  ".cm-searchMatch > span": {
-    color: `${colors.blue[600]} !important`
-  },
-  ".cm-searchMatch-selected": {
-    backgroundColor: colors.blue[600]
-  },
-  ".cm-searchMatch-selected > span": {
-    color: `${colors.white} !important`
-  }
-});
-function searchExtension() {
-  return [searchField, searchViewPlugin, searchTheme];
-}
-function updateSearch(view, query, selectedMatchIndex) {
-  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
-}
-var KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, className: cn("tw:text-xs tw:text-muted-foreground", className) });
-var KbdGroup = ({ ref, className, children, separator, ...props }) => {
-  return /* @__PURE__ */ jsx(
-    "kbd",
-    {
-      ...props,
-      ref,
-      className: cn("tw:inline-flex", "tw:items-center", "tw:gap-1", className),
-      children: separator ? (
-        // oxlint-disable-next-line react-x/no-children-to-array
-        Children.toArray(children).map((child, index) => (
-          // oxlint-disable-next-line
-          /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            index > 0 && /* @__PURE__ */ jsx(KbdSeparator, { children: separator }),
-            child
-          ] }, index)
-        ))
-      ) : children
-    }
-  );
-};
-var kbdVariants = cva(
-  [
-    "tailwindcss-preflight",
-    // style
-    "tw:pointer-events-none",
-    "tw:w-fit",
-    "tw:h-5",
-    "tw:min-w-5",
-    // layout
-    "tw:inline-flex",
-    "tw:items-center",
-    "tw:justify-center",
-    "tw:gap-1",
-    "tw:shrink-0",
-    // spacing
-    "tw:px-1",
-    'tw:[&_svg:not([class*="size-"])]:size-2.5',
-    "tw:text-xs",
-    "tw:font-medium",
-    "tw:rounded"
-  ],
-  {
-    defaultVariants: {
-      variant: "default"
-    },
-    variants: {
-      variant: {
-        default: "tw:bg-muted tw:text-muted-foreground",
-        primary: "tw:bg-white/20 tw:text-white"
-      }
-    }
-  }
-);
-var Kbd = ({ children, className, variant, ...rest }) => /* @__PURE__ */ jsx("kbd", { ...rest, className: kbdVariants({ className, variant }), children });
-Kbd.Group = KbdGroup;
-Kbd.Separator = KbdSeparator;
-var ToggleComponentHelp = () => /* @__PURE__ */ jsxs("div", { children: [
-  "Use ",
-  /* @__PURE__ */ jsx(Kbd, { children: isMac ? "Command+/" : "Ctrl+/" }),
-  " to toggle comments."
-] });
-var establishesFixedContainingBlock = (style) => style.transform !== "none" || style.translate !== "none" || style.rotate !== "none" || style.scale !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || /\b(paint|layout|strict|content)\b/.test(style.contain) || /\b(transform|perspective|filter|contain)\b/.test(style.willChange);
-var crops = (style) => style.overflowX !== "visible" || style.overflowY !== "visible" || style.maskImage !== "none" || style.contentVisibility !== "visible" || /\b(paint|strict|content)\b/.test(style.contain);
-var findTooltipHost = (from) => {
-  let outermostCropper = null;
-  for (let node = from.parentElement; node && node !== document.body; node = node.parentElement) {
-    const style = getComputedStyle(node);
-    if (crops(style)) {
-      outermostCropper = node;
-    } else if (establishesFixedContainingBlock(style)) {
-      return outermostCropper?.parentElement ?? node;
-    }
-  }
-  return outermostCropper?.parentElement ?? null;
-};
-var tooltipsExtension = () => {
-  const layer = new Compartment();
-  return [
-    layer.of(tooltips()),
-    ViewPlugin.define((view) => {
-      const scheduled = setTimeout(() => {
-        if (!view.dom.isConnected) return;
-        const parent = findTooltipHost(view.dom);
-        if (parent) view.dispatch({ effects: layer.reconfigure(tooltips({ parent })) });
-      });
-      return { destroy: () => clearTimeout(scheduled) };
-    })
-  ];
-};
-var useTooltipsExtension = () => useMemo(tooltipsExtension, []);
-
-// src/components/CodeEditor/variableCompletion.ts
-var BOOST = 2e3;
-var NAME = String.raw`[\w-]*`;
-var AT_CARET = new RegExp(String.raw`(?:\{{1,2} ?)?${NAME}$`);
-var NAME_AT_END = new RegExp(`${NAME}$`);
-var OPENING = /\{{1,2} ?$/;
-var CLOSING = /^ ?\}{1,2}/;
-var completeVariables = (variables = []) => {
-  if (variables.length === 0) return () => null;
-  const options = variables.map(({ name, value }) => ({
-    // The bare name: `SqlEditor` filters prefix-only while `CodeEditor` filters
-    // fuzzily, and this is the only spelling both accept whether or not the caret
-    // has typed the braces. The braces are `displayLabel`, which is what renders.
-    label: name,
-    displayLabel: `{{${name}}}`,
-    detail: value,
-    type: "variable",
-    boost: BOOST,
-    apply: (view, completion, from, to) => {
-      const { doc } = view.state;
-      const line = doc.lineAt(from);
-      const insert = `{{${completion.label}}}`;
-      const opening = OPENING.exec(doc.sliceString(line.from, from));
-      const closing = CLOSING.exec(doc.sliceString(to, line.to));
-      const start = opening ? from - opening[0].length : from;
-      const end = closing ? to + closing[0].length : to;
-      view.dispatch({
-        changes: { from: start, to: end, insert },
-        selection: { anchor: start + insert.length }
-      });
-    }
-  }));
-  return (context) => {
-    const match = context.matchBefore(AT_CARET);
-    if (!match?.text) return null;
-    const [name = ""] = NAME_AT_END.exec(match.text) ?? [];
-    return { from: match.to - name.length, options };
-  };
-};
-var useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
-var emptyObject = {};
-var CodeEditor = ({
-  value,
-  previousValue,
-  onChange,
-  mode = "application/json",
-  placeholder: placeholder$1 = "",
-  ariaLabel,
-  searchQuery,
-  searchMatchIndex,
-  readOnly = false,
-  inputLocked = false,
-  autocompletions,
-  completionSource,
-  variables,
-  extraKeys = emptyObject,
-  withToggleCommentHint = false,
-  withAutofocus = false,
-  withLineNumbers = true,
-  withLineWrapping = true,
-  withCollapseUnchanged = false,
-  withCopyButton = false,
-  completeAny = false,
-  help = null,
-  helpPostfix = null,
-  renderAdditionalButtons,
-  className
-}) => {
-  const handleChange = useStableCallback((next) => onChange?.(next));
-  const withSearch = searchQuery !== void 0;
-  const editorRef = useRef(null);
-  useEffect(() => {
-    const view = editorRef.current?.view;
-    if (view && withSearch) updateSearch(view, searchQuery, searchMatchIndex);
-  }, [withSearch, searchQuery, searchMatchIndex]);
-  const handleCreateEditor = useStableCallback((view) => {
-    if (searchQuery) updateSearch(view, searchQuery, searchMatchIndex);
-  });
-  const extraKeysRef = useRef(extraKeys);
-  useLayoutEffect(() => {
-    extraKeysRef.current = extraKeys;
-  });
-  const boundKeysSignature = Object.keys(extraKeys).join("\n");
-  const boundKeys = useMemo(
-    () => boundKeysSignature.split("\n").filter(Boolean),
-    [boundKeysSignature]
-  );
-  const tooltipLayer = useTooltipsExtension();
-  const variableCompletion = useVariableCompletion(variables);
-  const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
-  const baseTheme = useThemedExtension(
-    "code-editor:chrome",
-    () => EditorView.theme(buildBaseThemeStyles())
-  );
-  const commonExtensions = useMemo(() => {
-    const callerCompletions = completionSource ?? (completeAny ? completeAnyWord : autocompletions?.length ? autocompletions : null);
-    const completionEntries = [
-      ...callerCompletions ? [{ autocomplete: callerCompletions }] : [],
-      { autocomplete: variableCompletion }
-    ];
-    return [
-      getLanguageMode(mode),
-      shouldLintJson(mode, readOnly) ? linter(jsonParseLinter()) : [],
-      withLineWrapping ? EditorView.lineWrapping : [],
-      EditorState.languageData.of(() => completionEntries),
-      keymap$1.of(
-        boundKeys.map((key) => ({
-          key,
-          run: () => {
-            extraKeysRef.current[key]?.();
-            return true;
-          }
-        }))
-      ),
-      readOnly ? [] : [
-        // CodeMirror's own default. Gating it on the props hid completions the
-        // *language* supplies — dbt's vocabulary, Snowflake's keywords — behind
-        // a shortcut, and macOS leaves no usable one. With nothing to offer, no
-        // popup opens anyway.
-        autocompletion()
-      ],
-      ariaLabel ? EditorView.contentAttributes.of({ "aria-label": ariaLabel }) : [],
-      withSearch ? searchExtension() : [],
-      tooltipLayer,
-      baseTheme
-    ];
-  }, [
-    autocompletions,
-    completionSource,
-    variableCompletion,
-    completeAny,
-    boundKeys,
-    mode,
-    readOnly,
-    withLineWrapping,
-    baseTheme,
-    ariaLabel,
-    withSearch,
-    tooltipLayer
-  ]);
-  const extensions = useMemo(() => {
-    return [
-      ...commonExtensions,
-      placeholder(placeholder$1),
-      EditorView.editable.of(!readOnly),
-      // The lock is this facet and nothing else. `contenteditable` is what the
-      // read-only wash keys off, and `basicSetup` is what holds the undo history,
-      // so leaving both alone is what makes the lock invisible.
-      EditorState.readOnly.of(readOnly || inputLocked),
-      previousValue ? unifiedMergeView({
-        original: previousValue,
-        mergeControls: false,
-        highlightChanges: false,
-        collapseUnchanged: withCollapseUnchanged ? {} : void 0
-      }) : []
-    ];
-  }, [commonExtensions, placeholder$1, readOnly, inputLocked, previousValue, withCollapseUnchanged]);
-  const config = useMemo(() => {
-    return {
-      ...buildBasicSetup(readOnly),
-      lineNumbers: withLineNumbers,
-      // Mod-f opens CodeMirror's own panel, which would run a second query and a
-      // second match count over the same document beside the caller's input.
-      ...withSearch ? { searchKeymap: false } : null
-    };
-  }, [withLineNumbers, readOnly, withSearch]);
-  const additionalButtons = renderAdditionalButtons?.(value);
-  const hasToolbar = withCopyButton && !!value || !!additionalButtons;
-  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 tw:[&_.cm-mergeViewEditor]:overflow-visible tw:[&_.cm-mergeViewEditors]:h-full tw:[&_.cm-mergeView]:h-full tw:[&_>div]:h-full tw:[&_>div]:overflow-auto tw:[&_>div]:bg-background",
-          { "tw:mt-8": hasToolbar },
-          className
-        ),
-        onKeyDown: (event) => {
-          if (event.key === keyCodes.ESCAPE) {
-            event.stopPropagation();
-          }
-        },
-        children: [
-          hasToolbar && /* @__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: additionalButtons }) }) }),
-          /* @__PURE__ */ jsx(
-            CodeMirror,
-            {
-              ref: editorRef,
-              onCreateEditor: handleCreateEditor,
-              theme: customTheme,
-              value,
-              onChange: handleChange,
-              extensions,
-              autoFocus: withAutofocus,
-              basicSetup: config
-            }
-          ),
-          !readOnly && (withToggleCommentHint || help || helpPostfix) && /* @__PURE__ */ jsxs(HelpBlock, { className: "tw:mt-2 tw:flex tw:flex-wrap tw:gap-1", children: [
-            help,
-            withToggleCommentHint ? /* @__PURE__ */ jsx(ToggleComponentHelp, {}) : null,
-            helpPostfix
-          ] })
-        ]
-      }
-    )
-  );
-};
-var activeQueryFirstLine = Decoration.line({ class: "cm-active-query cm-active-query-first" });
-var activeQueryMiddleLine = Decoration.line({ class: "cm-active-query" });
-var activeQueryLastLine = Decoration.line({ class: "cm-active-query cm-active-query-last" });
-var activeQuerySingleLine = Decoration.line({
-  class: "cm-active-query cm-active-query-first cm-active-query-last"
-});
-var findActiveQueryRange = (doc, cursorPos, boundaries) => {
-  if (boundaries.length === 0) return null;
-  let match = boundaries[boundaries.length - 1];
-  for (const boundary of boundaries) {
-    if (cursorPos <= boundary.to) {
-      match = boundary;
-      break;
-    }
-  }
-  if (!match) return null;
-  const queryText = doc.slice(match.from, match.to);
-  const leadingWhitespace = queryText.length - queryText.trimStart().length;
-  const trailingWhitespace = queryText.length - queryText.trimEnd().length;
-  const trimmedStart = match.from + leadingWhitespace;
-  const trimmedEnd = match.to - trailingWhitespace;
-  if (trimmedStart >= trimmedEnd) return null;
-  return { from: trimmedStart, to: trimmedEnd };
-};
-var computeBoundaries = (queries) => {
-  const boundaries = [];
-  let offset = 0;
-  for (const query of queries) {
-    boundaries.push({ from: offset, to: offset + query.length });
-    offset += query.length;
-  }
-  return boundaries;
-};
-var mapBoundariesThroughChanges = (boundaries, changes) => {
-  const prevLen = changes.length;
-  const mapped = [];
-  for (const b of boundaries) {
-    const from = changes.mapPos(Math.max(0, Math.min(b.from, prevLen)), -1);
-    const to = changes.mapPos(Math.max(0, Math.min(b.to, prevLen)), 1);
-    if (from < to) mapped.push({ from, to });
-  }
-  return mapped;
-};
-var buildDecorations = (view, range) => {
-  const startLine = view.state.doc.lineAt(range.from).number;
-  const endLine = view.state.doc.lineAt(range.to).number;
-  const decorations = [];
-  for (let lineNum = startLine; lineNum <= endLine; lineNum++) {
-    const lineStart = view.state.doc.line(lineNum).from;
-    if (startLine === endLine) {
-      decorations.push(activeQuerySingleLine.range(lineStart));
-    } else if (lineNum === startLine) {
-      decorations.push(activeQueryFirstLine.range(lineStart));
-    } else if (lineNum === endLine) {
-      decorations.push(activeQueryLastLine.range(lineStart));
-    } else {
-      decorations.push(activeQueryMiddleLine.range(lineStart));
-    }
-  }
-  return Decoration.set(decorations);
-};
-var activeQueryHighlight = (splitQueries) => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations = Decoration.none;
-        debounceTimer = null;
-        seq = 0;
-        cachedDoc = "";
-        cachedBoundaries = [];
-        destroyed = false;
-        constructor(view) {
-          this.scheduleDocParse(view);
-        }
-        update(update) {
-          if (update.focusChanged && !update.view.hasFocus) {
-            this.decorations = Decoration.none;
-            return;
-          }
-          if (update.docChanged) {
-            if (this.cachedBoundaries.length > 0) {
-              this.cachedBoundaries = mapBoundariesThroughChanges(
-                this.cachedBoundaries,
-                update.changes
-              );
-              this.cachedDoc = update.state.doc.toString();
-              this.updateFromCache(update.view);
-            }
-            this.scheduleDocParse(update.view);
-          } else if (update.selectionSet || update.focusChanged && update.view.hasFocus) {
-            this.updateFromCache(update.view);
-          }
-        }
-        destroy() {
-          this.destroyed = true;
-          if (this.debounceTimer) clearTimeout(this.debounceTimer);
-        }
-        /**
-         * Update decorations using cached query boundaries.
-         * Only mutates this.decorations — does NOT call view.dispatch().
-         * When called from update() (sync), CodeMirror picks up the new
-         * decorations via the accessor. When called from the async
-         * scheduleDocParse callback, the caller must dispatch separately.
-         */
-        updateFromCache(view) {
-          if (!view.hasFocus) {
-            this.decorations = Decoration.none;
-            return;
-          }
-          const { main } = view.state.selection;
-          if (main.from !== main.to) {
-            this.decorations = Decoration.none;
-            return;
-          }
-          const doc = view.state.doc.toString();
-          if (doc !== this.cachedDoc) return;
-          if (this.cachedBoundaries.length === 0) {
-            this.decorations = Decoration.none;
-            return;
-          }
-          const range = findActiveQueryRange(doc, main.head, this.cachedBoundaries);
-          this.decorations = range ? buildDecorations(view, range) : Decoration.none;
-        }
-        /** Parse queries async (debounced) and update decorations. */
-        scheduleDocParse(view) {
-          if (this.debounceTimer) clearTimeout(this.debounceTimer);
-          this.debounceTimer = setTimeout(async () => {
-            const seq = ++this.seq;
-            const doc = view.state.doc.toString();
-            if (!doc.trim()) {
-              this.cachedDoc = doc;
-              this.cachedBoundaries = [];
-              if (this.decorations !== Decoration.none) {
-                this.decorations = Decoration.none;
-                if (!this.destroyed) view.dispatch();
-              }
-              return;
-            }
-            let queries;
-            try {
-              queries = await splitQueries(doc);
-            } catch {
-              return;
-            }
-            if (this.destroyed || seq !== this.seq) return;
-            this.cachedDoc = doc;
-            this.cachedBoundaries = computeBoundaries(queries);
-            this.updateFromCache(view);
-            if (!this.destroyed) view.dispatch();
-          }, 100);
-        }
-      },
-      { decorations: (v) => v.decorations }
-    ),
-    EditorView.baseTheme({
-      ".cm-active-query": {
-        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}`,
-        marginRight: "8px"
-      },
-      ".cm-active-query-first": {
-        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}, inset 0 1px 0 0 ${colors.blue[300]}`,
-        borderRadius: "4px 4px 0 0"
-      },
-      ".cm-active-query-last": {
-        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}, inset 0 -1px 0 0 ${colors.blue[300]}`,
-        borderRadius: "0 0 4px 4px"
-      },
-      ".cm-active-query-first.cm-active-query-last": {
-        boxShadow: `inset 0 0 0 1px ${colors.blue[300]}`,
-        borderRadius: "4px"
-      }
-    })
-  ];
-};
-var HighlightMarker = class extends GutterMarker {
-  toDOM() {
-    const marker = document.createElement("div");
-    marker.className = "cm-highlight-marker";
-    return marker;
-  }
-};
-var highlightMarker = new HighlightMarker();
-var forEachLineInRange = (doc, from, to, callback) => {
-  const results = [];
-  const fromLine = Math.max(1, from + 1);
-  const toLine = Math.min(doc.lines, to + 1);
-  for (let i = fromLine; i <= toLine; i++) {
-    const line = doc.line(i);
-    results.push(callback(line.from));
-  }
-  return results;
-};
-var setHighlightedLinesEffect = StateEffect.define();
-var highlightedLinesField = StateField.define({
-  create() {
-    return null;
-  },
-  update(value, transaction) {
-    for (const effect of transaction.effects) {
-      if (effect.is(setHighlightedLinesEffect)) {
-        return effect.value;
-      }
-    }
-    return value;
-  }
-});
-var highlightGutter = gutter({
-  class: "cm-highlight-gutter",
-  markers: (view) => {
-    const highlightInfo = view.state.field(highlightedLinesField, false);
-    if (!highlightInfo) {
-      return RangeSet.empty;
-    }
-    const markers = forEachLineInRange(
-      view.state.doc,
-      highlightInfo.from,
-      highlightInfo.to,
-      (lineFrom) => highlightMarker.range(lineFrom)
-    );
-    return RangeSet.of(markers);
-  }
-});
-var errorLineDecorations = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(decorations, transaction) {
-    decorations = decorations.map(transaction.changes);
-    for (const effect of transaction.effects) {
-      if (!effect.is(setHighlightedLinesEffect)) {
-        continue;
-      }
-      if (!effect.value || !effect.value.error) {
-        return Decoration.none;
-      }
-      const decorationArray = forEachLineInRange(
-        transaction.state.doc,
-        effect.value.error.from,
-        effect.value.error.to,
-        (lineFrom) => Decoration.line({ class: "cm-error-line" }).range(lineFrom)
-      );
-      return Decoration.set(decorationArray);
-    }
-    return decorations;
-  },
-  provide: (f) => EditorView.decorations.from(f)
-});
-var processingLineDecorations = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(decorations, transaction) {
-    decorations = decorations.map(transaction.changes);
-    for (const effect of transaction.effects) {
-      if (!effect.is(setHighlightedLinesEffect)) {
-        continue;
-      }
-      if (!effect.value || !effect.value.processing) {
-        return Decoration.none;
-      }
-      const decorationArray = forEachLineInRange(
-        transaction.state.doc,
-        effect.value.processing.from,
-        effect.value.processing.to,
-        (lineFrom) => Decoration.line({ class: "cm-processing-line" }).range(lineFrom)
-      );
-      return Decoration.set(decorationArray);
-    }
-    return decorations;
-  },
-  provide: (f) => EditorView.decorations.from(f)
-});
-var highlightedLinesTheme = EditorView.baseTheme({
-  ".cm-highlight-gutter": {
-    width: "2px",
-    marginRight: "2px"
-  },
-  ".cm-highlight-marker": {
-    width: "2px",
-    height: "100%",
-    backgroundColor: colors.blue[500]
-  },
-  ".cm-error-line": {
-    backgroundColor: `${colors.error[100]} !important`
-  },
-  ".cm-processing-line": {
-    backgroundColor: `${colors.blue[100]} !important`
-  }
-});
-function highlightingExtension() {
-  return [
-    highlightedLinesField,
-    highlightGutter,
-    errorLineDecorations,
-    processingLineDecorations,
-    highlightedLinesTheme
-  ];
-}
-function updateHighlighting(view, lines) {
-  view.dispatch({ effects: setHighlightedLinesEffect.of(lines ?? null) });
-}
-var OWN_KEYMAPS = {
-  defaultKeymap: false,
-  completionKeymap: false,
-  searchKeymap: false
-};
-var CUSTOM_KEYMAP = [
-  {
-    key: "Escape",
-    stopPropagation: true,
-    run: (view) => {
-      view.contentDOM.blur();
-      return true;
-    }
-  }
-];
-var OWN_KEYMAP_EXTENSION = keymap.of([...defaultKeymap, ...CUSTOM_KEYMAP]);
-var buildTheme = () => ({
-  ...buildBaseThemeStyles(),
-  "&.cm-editor": {
-    border: "solid 1px transparent",
-    background: resolveToken("card", "255 255 255"),
-    borderRadius: "8px",
-    paddingTop: "8px",
-    paddingBottom: "8px"
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):hover': {
-    borderColor: resolveToken("ring", "31 143 255")
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):focus-within': {
-    borderColor: resolveToken("ring", "31 143 255"),
-    boxShadow: `0 0 0 4px ${resolveToken("ring", "31 143 255", 0.3)}`
-  },
-  "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
-  "&.cm-editor :is(.cm-gutters,.cm-scroller)": { background: resolveToken("card", "255 255 255") },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': {
-    background: resolveToken("muted", "241 245 249")
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) :is(.cm-scroller,.cm-gutters)': {
-    background: resolveToken("muted", "241 245 249")
-  }
-});
-var SqlEditor = ({
-  value,
-  onChange,
-  onSelectionChange,
-  onCreateEditor,
-  onDestroyEditor,
-  onBlurEditor,
-  onFocusEditor,
-  placeholder = "",
-  searchQuery = "",
-  searchMatchIndex,
-  readOnly = false,
-  queryParser,
-  autoFocus = false,
-  lineNumbers = true,
-  className,
-  schema,
-  variables,
-  defaultDatabase,
-  defaultSchema,
-  highlightLines,
-  dialect
-}) => {
-  const editorRef = useRef(null);
-  const handleChange = useStableCallback((next) => onChange?.(next));
-  const parseQueries = useStableCallback(async (sql2) => await queryParser?.(sql2) ?? []);
-  const handleBlur = useStableCallback((view) => onBlurEditor?.(view));
-  const handleFocus = useStableCallback((view) => onFocusEditor?.(view));
-  const handleUpdate = useStableCallback((update) => {
-    if (update.selectionSet) {
-      const { main } = update.state.selection;
-      onSelectionChange?.(update.state.sliceDoc(main.from, main.to));
-    }
-  });
-  const variableCompletion = useVariableCompletion(variables);
-  const withQueryParser = queryParser !== void 0;
-  const tooltipLayer = useTooltipsExtension();
-  const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
-  const themeExtension = useThemedExtension(
-    "sql-editor:chrome",
-    () => EditorView$1.theme(buildTheme())
-  );
-  const extensions = useMemo(() => {
-    return [
-      EditorView$1.lineWrapping,
-      OWN_KEYMAP_EXTENSION,
-      ...installExtensions({
-        schema,
-        defaultDatabase,
-        defaultSchema,
-        variableCompletion,
-        dialect
-      }),
-      searchExtension(),
-      highlightingExtension(),
-      withQueryParser ? activeQueryHighlight(parseQueries) : [],
-      tooltipLayer,
-      themeExtension,
-      EditorView$1.domEventHandlers({
-        blur: (_, view) => handleBlur(view),
-        focus: (_, view) => handleFocus(view)
-      })
-    ];
-  }, [
-    withQueryParser,
-    parseQueries,
-    schema,
-    defaultDatabase,
-    defaultSchema,
-    variableCompletion,
-    dialect,
-    handleBlur,
-    handleFocus,
-    themeExtension,
-    tooltipLayer
-  ]);
-  const defaultSetup = useMemo(() => {
-    return { ...buildBasicSetup(readOnly), ...OWN_KEYMAPS, lineNumbers };
-  }, [readOnly, lineNumbers]);
-  useEffect(() => {
-    if (editorRef.current?.view) {
-      updateHighlighting(editorRef.current.view, highlightLines);
-    }
-  }, [highlightLines]);
-  useEffect(() => {
-    if (editorRef.current?.view) {
-      updateSearch(editorRef.current.view, searchQuery, searchMatchIndex);
-    }
-  }, [searchQuery, searchMatchIndex]);
-  const handleDestroy = useStableCallback(() => onDestroyEditor?.());
-  useEffect(() => handleDestroy, [handleDestroy]);
-  const handleCreate = useStableCallback((view, state) => {
-    onCreateEditor?.(view, state);
-    if (highlightLines) {
-      updateHighlighting(view, highlightLines);
-    }
-    if (searchQuery) {
-      updateSearch(view, searchQuery, searchMatchIndex);
-    }
-  });
-  return /* @__PURE__ */ jsx(
-    CodeMirror,
-    {
-      ref: editorRef,
-      theme: customTheme,
-      extensions,
-      value,
-      onChange: handleChange,
-      onUpdate: handleUpdate,
-      onCreateEditor: handleCreate,
-      autoFocus,
-      placeholder,
-      className,
-      readOnly,
-      editable: !readOnly,
-      basicSetup: defaultSetup
-    }
-  );
-};
-
-// src/components/MergeEditor/constants.ts
-var CHANGE_CLASS = {
-  SAFE: "safe"};
-var LINE_HEIGHT_PX = 20;
-var PANE_HEADER_HEIGHT_PX = 58;
 var AcceptButton = ({ side, onAccept }) => {
   const label = `Accept ${side === "left" ? "production" : "branch"} version`;
   const Chevron = side === "left" ? ChevronsRight : ChevronsLeft;
@@ -2080,62 +69,70 @@ var ConflictGutterMarker = class extends GutterMarker {
 };
 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);
+var createDiffHighlightExtension = () => 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: decoBuilder.finish(),
-        gutterMarkers: gutterBuilder.finish()
+        decorations: value.decorations.map(tr.changes),
+        gutterMarkers: value.gutterMarkers.map(tr.changes)
       };
-    },
-    provide: (f) => [
-      EditorView.decorations.from(f, (val) => val.decorations),
-      gutterLineClass.from(f, (val) => val.gutterMarkers)
-    ]
-  });
-  const theme = EditorView.theme({
+    }
+    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)
+  ]
+});
+var DARK_LINE_ALPHA = "29";
+var DARK_GUTTER_ALPHA = "47";
+var buildDiffHighlightTheme = () => {
+  const dark = isDarkScheme();
+  const line = (hue, pastel) => dark ? `${hue}${DARK_LINE_ALPHA}` : pastel;
+  const gutter = (hue, pastel) => dark ? `${hue}${DARK_GUTTER_ALPHA}` : pastel;
+  const safeNumber = dark ? colors.green[300] : colors.green[900];
+  const conflictNumber = dark ? colors.warning[300] : colors.warning[800];
+  return EditorView.theme({
     ".cm-merge-safe-line": {
-      backgroundColor: `${colors.green[100]} !important`,
+      backgroundColor: `${line(colors.green[500], colors.green[100])} !important`,
       boxShadow: `inset 3px 0 0 ${colors.green[500]}`
     },
     ".cm-merge-conflict-line": {
-      backgroundColor: `${colors.warning[100]} !important`,
+      backgroundColor: `${line(colors.warning[500], colors.warning[100])} !important`,
       boxShadow: `inset 3px 0 0 ${colors.warning[500]}`
     },
     ".cm-merge-safe-gutter": {
-      backgroundColor: `${colors.green[200]} !important`
+      backgroundColor: `${gutter(colors.green[500], colors.green[200])} !important`,
+      color: safeNumber
     },
     ".cm-merge-conflict-gutter": {
-      backgroundColor: `${colors.warning[200]} !important`
+      backgroundColor: `${gutter(colors.warning[500], colors.warning[200])} !important`,
+      color: conflictNumber
     }
   });
-  return [field, theme];
 };
 var updateHighlightedLines = (view, lines, classification) => {
   view.dispatch({ effects: setHighlightedLines.of({ lines, classification }) });
@@ -2156,27 +153,30 @@ var MergePane = ({
 }) => {
   const editorRef = useRef(null);
   const handleChange = useStableCallback((next) => onChange?.(next));
-  const themeExtension = useThemedExtension(
-    `merge-pane:${deleted}`,
-    () => EditorView.theme({
+  const themeExtension = useThemedExtension(`merge-pane:${deleted}`, () => {
+    const dark = isDarkScheme();
+    const deletedSurface = dark ? `${colors.error[500]}1f` : colors.error[100];
+    const deletedGutter = dark ? `${colors.error[500]}3d` : colors.error[200];
+    const deletedGutterText = dark ? colors.error[300] : colors.error[700];
+    return EditorView.theme({
       "&.cm-editor": {
         height: "100%",
-        backgroundColor: deleted ? colors.error[100] : resolveToken("background", "249 250 251"),
+        backgroundColor: deleted ? deletedSurface : resolveToken("background", "249 250 251"),
         // Pair the token-driven surface with a token-driven text color so line
         // content stays readable when the pane's `--background` goes dark.
-        // The deleted pane keeps default dark text on its fixed light-red wash.
-        ...deleted ? {} : { color: resolveToken("foreground", "30 41 59") },
+        color: resolveToken("foreground", "30 41 59"),
         outline: "none"
       },
       ".cm-gutters": {
-        backgroundColor: deleted ? colors.error[200] : resolveToken("muted", "241 245 249"),
-        ...deleted ? {} : { color: resolveToken("muted-foreground", "100 116 139") }
+        backgroundColor: deleted ? deletedGutter : resolveToken("muted", "241 245 249"),
+        color: deleted ? deletedGutterText : resolveToken("muted-foreground", "100 116 139")
       },
       "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
       ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
-    })
-  );
+    });
+  });
   const diffHighlightExtension = useMemo(() => createDiffHighlightExtension(), []);
+  const diffHighlightTheme = useThemedExtension("merge-diff-highlight", buildDiffHighlightTheme);
   const basicSetup = useMemo(
     () => ({ ...buildBasicSetup(readOnly), lineNumbers: true }),
     [readOnly]
@@ -2184,6 +184,7 @@ var MergePane = ({
   const extensions = useMemo(
     () => [
       diffHighlightExtension,
+      diffHighlightTheme,
       themeExtension,
       // Recalc viewport after every doc change so late-settling layouts (alerts
       // appearing above the editor) don't leave trailing lines blank.
@@ -2193,7 +194,7 @@ var MergePane = ({
         }
       })
     ],
-    [diffHighlightExtension, themeExtension]
+    [diffHighlightExtension, diffHighlightTheme, themeExtension]
   );
   useEffect(() => {
     const view = editorRef.current?.view;
@@ -2232,7 +233,7 @@ var MergePane = ({
       className: cn(
         "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:overflow-hidden",
         className,
-        deleted && "tw:border-error-300"
+        deleted && "tw:border-error-300 tw:[[data-theme=dark]_&]:border-error-500/50"
       ),
       children: [
         header && /* @__PURE__ */ jsx(
@@ -2240,7 +241,10 @@ var MergePane = ({
           {
             className: cn(
               "tw:px-4 tw:py-3",
-              deleted ? "tw:border-b tw:border-error-200 tw:bg-error-100" : "tw:bg-background",
+              // Same light/dark split as the editor wash below — `PaneHeader` pins
+              // `text-foreground`, which goes near-white and vanishes on the
+              // opaque light-red band.
+              deleted ? "tw:border-b tw:border-error-200 tw:bg-error-100 tw:[[data-theme=dark]_&]:border-error-500/30 tw:[[data-theme=dark]_&]:bg-error-500/15" : "tw:bg-background",
               headerClassName
             ),
             children: header
@@ -2424,6 +428,6 @@ var MergeEditor = ({
   );
 };
 
-export { CodeEditor, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };
+export { MergeEditor };
 //# sourceMappingURL=editors.js.map
 //# sourceMappingURL=editors.js.map