@keboola/design 3.2.3 → 4.0.0

package/dist/editors.js

@@ -0,0 +1,1948 @@
+import { createContext, forwardRef, useMemo, useRef, useEffect, useCallback, 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 { 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 { 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 { keboolaLegacy } from '@keboola/brand-registry';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Root, Slottable } from '@radix-ui/react-slot';
+import * as lucide_react_star from 'lucide-react';
+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 colors from '@keboola/tailwind-config/colors';
+import { defaultKeymap } from '@codemirror/commands';
+import { installExtensions } from '@keboola/codemirror-lang-sql';
+import { StateEffect, StateField, RangeSet, RangeSetBuilder } from '@codemirror/state';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget);
+
+// src/constants/keyCodes.ts
+var keyCodes = {
+  ENTER: "Enter",
+  ESCAPE: "Escape",
+  SPACE: " "
+};
+var twMerge = extendTailwindMerge({
+  prefix: "tw-"
+});
+var cn = (...classes) => twMerge(clsx(...classes));
+
+// src/utils/copyToClipboard.ts
+var copyToClipboard = (text) => {
+  return navigator.clipboard.writeText(text);
+};
+var ThemeContext = createContext(null);
+
+// src/components/internal/useIsLegacyBrand.ts
+var useIsLegacyBrand = () => {
+  const context = use(ThemeContext);
+  return context === null || context.brand.id === keboolaLegacy.id;
+};
+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
+    "data-[argo=true]:tw-rounded-2xl",
+    "data-[argo=true]:tw-border",
+    "data-[argo=true]:tw-border-solid",
+    "data-[argo=true]:tw-border-border",
+    "data-[argo=true]:tw-bg-popover",
+    "data-[argo=true]:tw-text-popover-foreground",
+    "data-[argo=true]:tw-shadow-md",
+    // argo open animation
+    "data-[argo=true]:data-[state=delayed-open]:tw-animate-in",
+    "data-[argo=true]:data-[state=instant-open]:tw-animate-in",
+    "data-[argo=true]:data-[state=delayed-open]:tw-fade-in-0",
+    "data-[argo=true]:data-[state=instant-open]:tw-fade-in-0",
+    "data-[argo=true]:data-[state=delayed-open]:tw-zoom-in-95",
+    "data-[argo=true]:data-[state=instant-open]:tw-zoom-in-95",
+    // argo closed animation
+    "data-[argo=true]:data-[state=closed]:tw-animate-out",
+    "data-[argo=true]:data-[state=closed]:tw-fade-out-0",
+    "data-[argo=true]:data-[state=closed]:tw-zoom-out-95",
+    // argo position animation
+    "data-[argo=true]:data-[side=bottom]:tw-slide-in-from-top-2",
+    "data-[argo=true]:data-[side=left]:tw-slide-in-from-right-2",
+    "data-[argo=true]:data-[side=right]:tw-slide-in-from-left-2",
+    "data-[argo=true]:data-[side=top]:tw-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",
+          "tw-uppercase",
+          "tw-tracking-wider"
+        ],
+        explanatory: [
+          "tw-max-w-80",
+          "tw-px-4",
+          "tw-py-3",
+          "tw-text-left",
+          "tw-text-sm",
+          "tw-font-normal"
+        ]
+      }
+    }
+  }
+);
+var TooltipContent = ({
+  className,
+  variant,
+  argo,
+  keepOpenOnPointerDownOutside = false,
+  children,
+  onPointerDownOutside,
+  sideOffset = 8,
+  collisionPadding = 8,
+  hideWhenDetached = true,
+  placement = "right",
+  ...rest
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
+  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,
+  argo,
+  placement = "right",
+  forceHide = false,
+  forceShow = false,
+  // 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,
+      disableHoverableContent: isActionVariant,
+      children: [
+        /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            asChild: triggerAsChild,
+            keepOpenOnClick: keepOpenOnTriggerClick,
+            onKeyUp: handleKeyUp,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TooltipContent,
+          {
+            className,
+            variant: resolvedVariant,
+            argo,
+            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");
+var helpVariants = cva(["tw-m-0", "tw-text-xs"], {
+  defaultVariants: {
+    state: "default"
+  },
+  variants: {
+    state: {
+      default: ["tw-text-muted-foreground"],
+      error: ["tw-text-destructive"],
+      warning: ["tw-text-warning-500"]
+    }
+  }
+});
+var HelpBlock = ({ children, className, state = "default", testId }) => {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx("p", { "data-testid": testId, className: helpVariants({ state, className }), children });
+};
+
+// src/icons/index.ts
+var icons_exports = {};
+__export(icons_exports, {
+  Keboola: () => Keboola
+});
+__reExport(icons_exports, lucide_react_star);
+var Keboola = forwardRef(
+  ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 300 512",
+      fill: color,
+      className: cn("lucide", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M152 320C79.7 320 24.5 233.9 24.5 124.7C24.5 15.6 70.5 0 152 0s123.6 15.6 123.6 124.7C275.5 233.9 217.7 320 152 320zm-8.7-50.5c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm55.7 0c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm68.9 115.1c10.2 9.3 20.2 20.5 29 35c5.9 9.7 2.6 22.1-7.5 27.8c-3.4 1.9-7.1 2.8-10.7 2.8c-7.2 0-14.3-3.6-18.3-10c-6.8-11.1-13.8-18.9-21.7-26.1c-7.3-6.7-15.6-12.7-24.9-19.5c-.7-.5-1.4-1-2.1-1.5c-5-3.6-10-6.8-14.9-9.4c.6 1 1.2 2.1 1.8 3.2c14.4 26.4 29.2 63.1 29.2 104.9c0 11.2-9.5 20.3-21.2 20.3c-11.7 0-21.2-9.1-21.2-20.3c.1-31.8-11.6-62.3-23.8-84.9c-4-7.4-8-13.9-11.6-19.3c-3.4 5.2-7.2 11.3-11 18.3c-12.5 22.7-24.5 53.8-24.4 86c0 11.2-9.5 20.3-21.2 20.3s-21.2-9.1-21.2-20.3c.1-41.8 14.9-78.4 29.2-104.9c.6-1.1 1.2-2.1 1.8-3.2c-5 2.7-9.9 5.8-14.9 9.4c-.6 .5-1.3 .9-1.9 1.4c-9.5 6.9-17.8 12.9-25.1 19.7c-7.9 7.2-14.9 15.1-21.7 26.1c-5.9 9.7-18.9 12.9-29 7.2C.5 441.8-2.9 429.3 3.1 419.7c8.9-14.4 18.8-25.7 29-35c9.2-8.4 18.5-15.1 27.6-21.7c1-.7 2-1.4 3-2.2c4.7-3.5 9.6-6.7 14.6-9.6c-5-2.9-9.8-6.1-14.6-9.6C39.8 325 19.9 302.5 3.1 275.1c-5.9-9.7-2.6-22.1 7.5-27.8c10.1-5.7 23.1-2.5 29 7.2c14.6 23.7 31.1 42 48.7 54.9c18.9 13.7 37.4 20.5 56.5 21.5c1.7-.1 3.5-.1 5.2-.1c1.8 0 3.5 .1 5.2 .1c0 0 0 0 0 0c19.1-1.1 37.6-7.9 56.5-21.5c17.6-12.8 34.2-31.2 48.7-54.9c6-9.7 18.9-12.9 29-7.2c10.1 5.7 13.4 18.1 7.5 27.8c-16.8 27.4-36.7 49.9-59.6 66.6c-4.7 3.5-9.6 6.7-14.5 9.6c4.9 2.9 9.8 6.1 14.5 9.6c.9 .7 1.8 1.3 2.7 2c9.2 6.7 18.5 13.5 27.9 22z" }),
+        children
+      ]
+    }
+  )
+);
+Keboola.displayName = "Keboola";
+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
+    "tw-text-xs",
+    "tw-leading-5",
+    "tw-font-medium",
+    "tw-tracking-[1px]",
+    "tw-uppercase",
+    // border
+    "tw-rounded",
+    "tw-border",
+    "tw-border-transparent",
+    // styling
+    "tw-shadow-none",
+    "[a]:tw-cursor-pointer",
+    // explicitly set for anchor
+    "focus-visible:tw-outline",
+    "focus-visible:tw-outline-1",
+    "focus-visible:-tw-outline-offset-1",
+    "focus-visible:tw-outline-secondary-500",
+    "focus-visible:tw-ring-4",
+    "focus-visible:tw-ring-secondary-200",
+    // disabled
+    "disabled:tw-opacity-40",
+    "disabled:tw-cursor-not-allowed",
+    // anchor support
+    "!tw-no-underline",
+    "aria-disabled:tw-opacity-40",
+    "aria-disabled:tw-cursor-not-allowed",
+    "[&_svg]:tw-shrink-0"
+  ],
+  {
+    defaultVariants: {
+      size: "medium",
+      variant: "primary",
+      block: false
+    },
+    variants: {
+      block: {
+        true: ["tw-w-full"]
+      },
+      variant: {
+        primary: [
+          "tw-text-white",
+          "tw-bg-primary-500",
+          "focus:tw-text-white",
+          "hover:tw-text-white",
+          "hover:not-disabled:tw-bg-primary-600",
+          "active:not-disabled:tw-bg-primary-800",
+          // anchor disabled override
+          "aria-disabled:!tw-bg-primary-500"
+        ],
+        secondary: [
+          "tw-text-white",
+          "tw-bg-secondary-500",
+          "focus:tw-text-white",
+          "hover:tw-text-white",
+          "hover:not-disabled:tw-bg-secondary-700",
+          "active:not-disabled:tw-bg-secondary-800",
+          // anchor disabled override
+          "aria-disabled:!tw-bg-secondary-500"
+        ],
+        danger: [
+          "tw-text-white",
+          "tw-bg-error-500",
+          "focus:tw-text-white",
+          "hover:tw-text-white",
+          "hover:not-disabled:tw-bg-error-600",
+          "active:not-disabled:tw-bg-error-700",
+          // anchor disabled override
+          "aria-disabled:!tw-bg-error-500"
+        ],
+        invisible: [
+          "tw-text-neutral-800",
+          "tw-bg-transparent",
+          "focus:tw-text-neutral-800",
+          "hover:not-disabled:tw-bg-neutral-100",
+          "hover:tw-text-neutral-800",
+          "active:not-disabled:tw-bg-neutral-150",
+          // contrasting icon on hover/active
+          "[&_svg]:tw-text-neutral-400",
+          "[&_svg]:hover:not-disabled:tw-text-secondary-600",
+          "[&_svg]:active:not-disabled:tw-text-secondary-600",
+          // anchor disabled override
+          "aria-disabled:!tw-bg-transparent"
+        ],
+        outline: [
+          "tw-text-neutral-800",
+          "tw-bg-white",
+          // border
+          "!tw-border-neutral-200",
+          "hover:tw-text-neutral-800",
+          "focus:tw-text-neutral-800",
+          "hover:not-disabled:!tw-border-neutral-300",
+          "hover:not-disabled:tw-bg-neutral-100",
+          "active:not-disabled:tw-bg-neutral-200",
+          // contrasting icon hover, same as invisible
+          "[&_svg]:tw-text-neutral-400",
+          "[&_svg]:not-disabled:hover:tw-text-secondary-600",
+          "[&_svg]:active:not-disabled:tw-text-secondary-600",
+          // anchor disabled override
+          "aria-disabled:!tw-bg-white",
+          "aria-disabled:!tw-border-neutral-200"
+        ],
+        inline: [
+          "tw-text-neutral-800",
+          "tw-bg-transparent",
+          "tw-rounded-full",
+          "[&_svg]:tw-text-neutral-400",
+          "[&_svg]:not-disabled:hover:tw-text-secondary-600",
+          "[&_svg]:not-disabled:focus:tw-text-secondary-600"
+        ]
+      },
+      size: {
+        medium: [
+          "tw-max-h-10",
+          "tw-min-h-10",
+          "tw-px-4",
+          "tw-py-2.5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+        ],
+        small: [
+          "tw-max-h-8",
+          "tw-min-h-8",
+          "tw-px-4",
+          "tw-py-1.5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+        ],
+        large: [
+          "tw-max-h-12",
+          "tw-min-h-12",
+          "tw-px-4",
+          "tw-py-3.5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+        ],
+        "icon-lg": ["tw-size-12", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
+        icon: ["tw-size-10", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        "icon-sm": ["tw-size-8", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        "icon-xs": ["tw-size-6", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        "icon-2xs": [
+          "!tw-inline-flex",
+          "tw-size-5",
+          "tw-max-h-5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3'
+        ],
+        "icon-3xs": ["tw-h-fit", "tw-w-fit", '[&_svg:not([class*="tw-size-"])]:tw-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-lg",
+    // text
+    "tw-font-medium",
+    "tw-select-none",
+    // focus visible
+    "!tw-outline-none",
+    "focus-visible:tw-ring-2",
+    // disabled
+    "disabled:tw-cursor-not-allowed",
+    "disabled:tw-opacity-50",
+    "active:tw-opacity-60",
+    "tw-transition-all",
+    "tw-bg-clip-padding",
+    // anchor support
+    "!tw-no-underline",
+    "aria-disabled:tw-cursor-not-allowed",
+    "aria-disabled:tw-opacity-50",
+    // icon
+    "tw-shrink-0",
+    "[&_svg]:tw-pointer-events-none",
+    "[&_svg]:tw-shrink-0",
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4"
+  ],
+  {
+    defaultVariants: {
+      variant: "primary",
+      size: "medium"
+    },
+    variants: {
+      block: {
+        true: ["tw-w-full"]
+      },
+      variant: {
+        primary: [
+          "tw-bg-primary",
+          "tw-text-primary-foreground",
+          "[a]:hover:tw-bg-primary/80",
+          "hover:not-disabled:tw-bg-primary/90",
+          "hover:tw-text-primary-foreground",
+          "focus:tw-text-primary-foreground",
+          "focus-visible:tw-border-primary",
+          "focus-visible:tw-ring-primary/50"
+        ],
+        secondary: [
+          "tw-bg-primary/10",
+          "tw-text-primary",
+          "hover:not-disabled:tw-bg-primary/20",
+          "focus-visible:tw-border-primary",
+          "focus-visible:tw-ring-primary/50"
+        ],
+        // should be called "destructive" by Figma
+        danger: [
+          "tw-bg-destructive",
+          "tw-text-destructive-foreground",
+          "hover:tw-text-destructive-foreground",
+          "focus:tw-text-destructive-foreground",
+          "focus-visible:tw-border-destructive",
+          "focus-visible:tw-ring-destructive/20"
+        ],
+        outline: [
+          "!tw-border-input",
+          "tw-bg-background",
+          "hover:not-disabled:tw-bg-accent",
+          "hover:not-disabled:tw-text-accent-foreground",
+          "hover:active:tw-bg-background",
+          "focus-visible:!tw-border-primary",
+          "focus-visible:tw-ring-primary/50"
+        ],
+        // should be called "ghost" by Figma
+        invisible: [
+          "tw-bg-transparent",
+          "tw-text-foreground",
+          "hover:not-disabled:tw-bg-accent",
+          "hover:not-disabled:tw-text-accent-foreground",
+          "hover:not-disabled:tw-border-accent",
+          "focus-visible:tw-ring-primary/50"
+        ],
+        // should be called "link" by Figma
+        inline: [
+          "tw-bg-transparent",
+          "tw-text-primary",
+          "hover:tw-underline",
+          "hover:active:tw-bg-transparent",
+          "focus-visible:tw-ring-primary/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,
+  argo = false,
+  variant = "primary",
+  size = "medium",
+  block = false,
+  ...buttonProps
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
+  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(icons_exports.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+        /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })
+      ]
+    }
+  );
+};
+var Clipboard = ({
+  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) => {
+    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";
+  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
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip.Content,
+      {
+        keepOpenOnPointerDownOutside: true,
+        placement: tooltipPlacement,
+        variant: tooltipVariant,
+        children: tooltipContent
+      }
+    )
+  ] });
+};
+var DEFAULT_ICON = /* @__PURE__ */ jsx(icons_exports.Copy, {});
+var ClipboardButton = ({
+  // clipboard props
+  text,
+  tooltip,
+  tooltipPlacement,
+  tooltipVariant,
+  // button props
+  icon = DEFAULT_ICON,
+  variant = "outline",
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  Clipboard,
+  {
+    asChild: true,
+    tooltip,
+    tooltipPlacement,
+    tooltipVariant,
+    text,
+    children: /* @__PURE__ */ jsxs(Button, { ...rest, 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 baseThemeStyles = {
+  "*": { lineHeight: "20px" },
+  "*::selection": {
+    backgroundColor: colors.secondary[500],
+    color: `${colors.white} !important`
+  },
+  '&.cm-editor:has(.cm-content[contenteditable="false"])': { backgroundColor: colors.neutral[150] },
+  '&.cm-editor:has(.cm-content[contenteditable="false"]) .cm-gutters': {
+    backgroundColor: colors.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: colors.warning[700] },
+  // merge (diff) view
+  '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors.error[100] },
+  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors.primary[100] },
+  '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors.error[200] },
+  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors.primary[200] },
+  '&[class*="cm-merge-"] .cm-deletedText': { background: colors.error[200] },
+  '&[class*="cm-merge-"] .cm-changedText': { background: colors.primary[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 BASIS_SETUP = { drawSelection: false };
+var customTheme = githubLightInit({
+  settings: {
+    fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
+    background: colors.neutral[50],
+    gutterBackground: colors.neutral[100],
+    gutterBorder: "transparent",
+    lineHighlight: "transparent",
+    selection: colors.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 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",
+    '[&_svg:not([class*="size-"])]:tw-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: "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 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}`,
+        marginRight: "8px"
+      },
+      ".cm-active-query-first": {
+        boxShadow: `inset -1px 0 0 0 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}, inset 0 1px 0 0 ${colors.secondary[300]}`,
+        borderRadius: "4px 4px 0 0"
+      },
+      ".cm-active-query-last": {
+        boxShadow: `inset -1px 0 0 0 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}, inset 0 -1px 0 0 ${colors.secondary[300]}`,
+        borderRadius: "0 0 4px 4px"
+      },
+      ".cm-active-query-first.cm-active-query-last": {
+        boxShadow: `inset 0 0 0 1px ${colors.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: colors.secondary[500]
+  },
+  ".cm-error-line": {
+    backgroundColor: `${colors.error[100]} !important`
+  },
+  ".cm-processing-line": {
+    backgroundColor: `${colors.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: colors.secondary[100]
+  },
+  ".cm-searchMatch > span": {
+    color: `${colors.secondary[600]} !important`
+  },
+  ".cm-searchMatch-selected": {
+    backgroundColor: colors.secondary[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 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: colors.white,
+    borderRadius: "8px",
+    paddingTop: "8px",
+    paddingBottom: "8px"
+  },
+  '&.cm-editor:has(.cm-content[contenteditable="true"]):hover': {
+    borderColor: colors.secondary[500]
+  },
+  '&.cm-editor:has(.cm-content[contenteditable="true"]):focus-within': {
+    borderColor: colors.secondary[500],
+    boxShadow: `0 0 0 4px ${colors.secondary[200]}`
+  },
+  "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
+  "&.cm-editor :is(.cm-gutters,.cm-scroller)": { background: colors.white },
+  '&.cm-editor:has(.cm-content[contenteditable="false"])': { background: colors.neutral[100] },
+  '&.cm-editor:has(.cm-content[contenteditable="false"]) :is(.cm-scroller,.cm-gutters)': {
+    background: colors.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
+    }
+  );
+};
+
+// 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, 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: `${colors.primary[100]} !important`,
+      boxShadow: `inset 3px 0 0 ${colors.primary[500]}`
+    },
+    ".cm-merge-conflict-line": {
+      backgroundColor: `${colors.warning[100]} !important`,
+      boxShadow: `inset 3px 0 0 ${colors.warning[500]}`
+    },
+    ".cm-merge-safe-gutter": {
+      backgroundColor: `${colors.primary[200]} !important`
+    },
+    ".cm-merge-conflict-gutter": {
+      backgroundColor: `${colors.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 ? colors.error[100] : colors.neutral[50],
+          outline: "none"
+        },
+        ".cm-gutters": {
+          backgroundColor: deleted ? colors.error[200] : colors.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
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { CodeEditor, MergeEditor, SqlEditor };
+//# sourceMappingURL=editors.js.map
+//# sourceMappingURL=editors.js.map