@keboola/design 6.5.0 → 9.0.0

package/dist/editors.cjs

@@ -14,61 +14,28 @@ var classVarianceAuthority = require('class-variance-authority');
 var brandRegistry = require('@keboola/brand-registry');
 var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
-var lucide_react_star = require('lucide-react');
+var lucideReact = require('lucide-react');
 var langJavascript = require('@codemirror/lang-javascript');
 var langPython = require('@codemirror/lang-python');
 var langSql = require('@codemirror/lang-sql');
 var language = require('@codemirror/language');
 var r = require('@codemirror/legacy-modes/mode/r');
 var shell = require('@codemirror/legacy-modes/mode/shell');
+var toml = require('@codemirror/legacy-modes/mode/toml');
 var codemirrorThemeGithub = require('@uiw/codemirror-theme-github');
 var codemirrorLangSfsql = require('@keboola/codemirror-lang-sfsql');
 var colors = require('@keboola/tailwind-config/colors');
+var simpleMode = require('@codemirror/legacy-modes/mode/simple-mode');
+var state = require('@codemirror/state');
 var commands = require('@codemirror/commands');
 var codemirrorLangSql = require('@keboola/codemirror-lang-sql');
-var state = require('@codemirror/state');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
 var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
-var lucide_react_star__namespace = /*#__PURE__*/_interopNamespace(lucide_react_star);
 var colors__default = /*#__PURE__*/_interopDefault(colors);
 
-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/components/CodeEditor/CodeEditor.tsx
 
 // src/constants/keyCodes.ts
 var keyCodes = {
@@ -76,8 +43,15 @@ var keyCodes = {
   ESCAPE: "Escape",
   SPACE: " "
 };
+var useStableCallback = (callback) => {
+  const latestRef = react.useRef(callback);
+  react.useLayoutEffect(() => {
+    latestRef.current = callback;
+  }, [callback]);
+  return react.useCallback((...args) => latestRef.current(...args), []);
+};
 var twMerge = tailwindMerge.extendTailwindMerge({
-  prefix: "tw-"
+  prefix: "tw"
 });
 var cn = (...classes) => twMerge(clsx.clsx(...classes));
 
@@ -121,39 +95,39 @@ var useArgoDesign = () => react.use(ArgoDesignContext);
 var tooltipVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
-    "tw-inline-block",
-    "tw-break-anywhere",
-    "tw-max-h-96",
-    "tw-overflow-y-auto",
-    "tw-z-[1060]",
+    "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",
+    "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",
+    "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
-    "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",
+    "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
-    "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",
+    "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
-    "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"
+    "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: {
@@ -162,22 +136,26 @@ var tooltipVariants = classVarianceAuthority.cva(
     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"
+          "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"
+          "tw:max-w-80",
+          "tw:px-4",
+          "tw:py-3",
+          "tw:text-left",
+          "tw:text-sm",
+          "tw:font-normal"
         ]
       }
     }
@@ -251,8 +229,8 @@ var TooltipTrigger = ({
         // (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__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-items-center", children })
+        // line. `tw:inline-flex tw:items-center` keeps icon + text aligned.
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw:inline-flex tw:items-center", children })
       )
     }
   );
@@ -319,14 +297,29 @@ Tooltip.Trigger = TooltipTrigger;
 
 // src/utils/escapeStringRegexp.ts
 var escapeStringRegexp = (string) => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
-var helpVariants = classVarianceAuthority.cva(["tw-m-0", "tw-text-xs"], {
+
+// 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 = classVarianceAuthority.cva(["tw:m-0", "tw:text-xs"], {
   defaultVariants: {
     state: "default"
   },
   variants: {
     state: {
-      default: ["tw-text-muted-foreground"],
-      warning: ["tw-text-warning"]
+      default: ["tw:text-muted-foreground"],
+      warning: ["tw:text-warning"]
     }
   }
 });
@@ -334,146 +327,49 @@ var HelpBlock = ({ children, className, state = "default", ...rest }) => {
   if (!children) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: helpVariants({ state, className }), children });
 };
-
-// src/icons/index.ts
-var icons_exports = {};
-__export(icons_exports, {
-  Google: () => Google,
-  Keboola: () => Keboola,
-  Microsoft: () => Microsoft
-});
-__reExport(icons_exports, lucide_react_star__namespace);
-var Google = react.forwardRef(
-  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "12 10 20 20",
-      fill: "none",
-      className: cn("lucide", className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M31.6 20.2273C31.6 19.5182 31.5364 18.8364 31.4182 18.1818H22V22.05H27.3818C27.15 23.3 26.4455 24.3591 25.3864 25.0682V27.5773H28.6182C30.5091 25.8364 31.6 23.2727 31.6 20.2273Z",
-            fill: "#4285F4"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M22 30C24.7 30 26.9636 29.1045 28.6181 27.5773L25.3863 25.0682C24.4909 25.6682 23.3454 26.0227 22 26.0227C19.3954 26.0227 17.1909 24.2636 16.4045 21.9H13.0636V24.4909C14.7091 27.7591 18.0909 30 22 30Z",
-            fill: "#34A853"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M16.4045 21.9C16.2045 21.3 16.0909 20.6591 16.0909 20C16.0909 19.3409 16.2045 18.7 16.4045 18.1V15.5091H13.0636C12.3864 16.8591 12 18.3864 12 20C12 21.6136 12.3864 23.1409 13.0636 24.4909L16.4045 21.9Z",
-            fill: "#FBBC04"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M22 13.9773C23.4681 13.9773 24.7863 14.4818 25.8227 15.4727L28.6909 12.6045C26.9591 10.9909 24.6954 10 22 10C18.0909 10 14.7091 12.2409 13.0636 15.5091L16.4045 18.1C17.1909 15.7364 19.3954 13.9773 22 13.9773Z",
-            fill: "#EA4335"
-          }
-        ),
-        children
-      ]
-    }
-  )
-);
-Google.displayName = "Google";
-var Keboola = react.forwardRef(
-  ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 300 512",
-      overflow: "visible",
-      fill: color,
-      className: cn("lucide", className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.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 Microsoft = react.forwardRef(
-  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 21 21",
-      fill: "none",
-      className: cn("lucide", className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "10", height: "10", fill: "#F25022" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "0", width: "10", height: "10", fill: "#7FBA00" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "11", width: "10", height: "10", fill: "#00A4EF" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" }),
-        children
-      ]
-    }
-  )
-);
-Microsoft.displayName = "Microsoft";
 var variants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
-    "tw-group/button",
-    "tw-border-box",
+    "tw:group/button",
+    "tw:border-box",
     // layout
-    "tw-relative",
-    "tw-flex",
-    "tw-items-center",
-    "tw-justify-center",
-    "tw-gap-2",
+    "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 stays `tw-uppercase`.
-    "tw-text-xs",
-    "tw-leading-5",
-    "tw-font-medium",
-    "tw-tracking-chrome",
-    "tw-uppercase",
+    // (`--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",
+    "tw:rounded",
+    "tw:border",
+    "tw:border-transparent",
     // styling
-    "tw-shadow-none",
-    "[a]:tw-cursor-pointer",
+    "tw:shadow-none",
+    "tw:[a]: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-ring",
-    "focus-visible:tw-ring-4",
-    "focus-visible:tw-ring-ring/30",
+    "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
-    "disabled:tw-opacity-40",
-    "disabled:tw-cursor-not-allowed",
+    "tw:disabled:opacity-40",
+    "tw:disabled:cursor-not-allowed",
     // anchor support
-    "!tw-no-underline",
-    "aria-disabled:tw-opacity-40",
-    "aria-disabled:tw-cursor-not-allowed",
-    "[&_svg]:tw-shrink-0"
+    "tw:!no-underline",
+    "tw:aria-disabled:opacity-40",
+    "tw:aria-disabled:cursor-not-allowed",
+    "tw:[&_svg]:shrink-0"
   ],
   {
     defaultVariants: {
@@ -483,113 +379,113 @@ var variants = classVarianceAuthority.cva(
     },
     variants: {
       block: {
-        true: ["tw-w-full"]
+        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",
+          "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
-          "aria-disabled:!tw-bg-primary-500"
+          "tw:aria-disabled:!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",
+          "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
-          "aria-disabled:!tw-bg-secondary-500"
+          "tw:aria-disabled:!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",
+          "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
-          "aria-disabled:!tw-bg-error-500"
+          "tw:aria-disabled:!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",
+          "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
-          "[&_svg]:tw-text-neutral-400",
-          "[&_svg]:hover:not-disabled:tw-text-secondary-600",
-          "[&_svg]:active:not-disabled:tw-text-secondary-600",
+          "tw:[&_svg]:text-neutral-400",
+          "tw:hover:not-disabled:[&_svg]:text-secondary-600",
+          "tw:active:not-disabled:[&_svg]:text-secondary-600",
           // anchor disabled override
-          "aria-disabled:!tw-bg-transparent"
+          "tw:aria-disabled:!bg-transparent"
         ],
         outline: [
-          "tw-text-neutral-800",
-          "tw-bg-white",
+          "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",
+          "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
-          "[&_svg]:tw-text-neutral-400",
-          "[&_svg]:not-disabled:hover:tw-text-secondary-600",
-          "[&_svg]:active:not-disabled:tw-text-secondary-600",
+          "tw:[&_svg]:text-neutral-400",
+          "tw:not-disabled:hover:[&_svg]:text-secondary-600",
+          "tw:active:not-disabled:[&_svg]:text-secondary-600",
           // anchor disabled override
-          "aria-disabled:!tw-bg-white",
-          "aria-disabled:!tw-border-neutral-200"
+          "tw:aria-disabled:!bg-white",
+          "tw:aria-disabled:!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"
+          "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",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+          "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",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+          "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",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+          "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", '[&_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-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",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-3'
+          "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", '[&_svg:not([class*="tw-size-"])]:tw-size-4']
+        "icon-3xs": ["tw:h-fit", "tw:w-fit", 'tw:[&_svg:not([class*="tw:size-"])]:size-4']
       }
     }
   }
@@ -598,37 +494,37 @@ var argoVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
     // layout
-    "tw-relative",
-    "tw-inline-flex",
-    "tw-items-center",
-    "tw-justify-center",
-    "tw-whitespace-nowrap",
-    "tw-gap-2",
+    "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)]",
+    "tw:border",
+    "tw:border-transparent",
+    "tw:rounded-[var(--radius-lg,0.25rem)]",
     // text
-    "tw-font-medium",
-    "tw-select-none",
+    "tw:font-medium",
+    "tw:select-none",
     // focus visible
-    "!tw-outline-none",
-    "focus-visible:tw-ring-2",
+    "tw:!outline-hidden",
+    "tw:focus-visible:ring-2",
     // disabled
-    "disabled:tw-cursor-not-allowed",
-    "disabled:tw-opacity-50",
-    "active:tw-opacity-60",
-    "tw-transition-all",
-    "tw-bg-clip-padding",
+    "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",
-    "aria-disabled:tw-cursor-not-allowed",
-    "aria-disabled:tw-opacity-50",
+    "tw:!no-underline",
+    "tw:aria-disabled:cursor-not-allowed",
+    "tw:aria-disabled:opacity-50",
     // icon
-    "tw-shrink-0",
-    "[&_svg]:tw-pointer-events-none",
-    "[&_svg]:tw-shrink-0",
-    "[&_svg:not([class*='tw-size-'])]:tw-size-4"
+    "tw:shrink-0",
+    "tw:[&_svg]:pointer-events-none",
+    "tw:[&_svg]:shrink-0",
+    "tw:[&_svg:not([class*='tw:size-'])]:size-4"
   ],
   {
     defaultVariants: {
@@ -637,77 +533,77 @@ var argoVariants = classVarianceAuthority.cva(
     },
     variants: {
       block: {
-        true: ["tw-w-full"]
+        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-ring/50"
+          "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",
-          "hover:not-disabled:tw-bg-primary/20",
-          "focus-visible:tw-border-primary",
-          "focus-visible:tw-ring-ring/50"
+          "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",
-          "hover:tw-text-destructive-foreground",
-          "focus:tw-text-destructive-foreground",
-          "focus-visible:tw-border-destructive",
-          "focus-visible:tw-ring-destructive/20"
+          "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",
+          "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",
+          "tw:text-foreground",
           // Hover follows the brand primary (translucent tint), matching the
           // `secondary` variant — not the fixed `accent` blue.
-          "hover:not-disabled:tw-bg-primary/10",
-          "hover:not-disabled:tw-text-primary",
-          "hover:active:tw-bg-background",
-          "focus-visible:!tw-border-primary",
-          "focus-visible:tw-ring-ring/50"
+          "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",
-          "hover:not-disabled:tw-bg-primary/10",
-          "hover:not-disabled:tw-text-primary",
-          "hover:not-disabled:tw-border-primary/10",
-          "focus-visible:tw-ring-ring/50"
+          "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",
-          "hover:tw-underline",
-          "hover:active:tw-bg-transparent",
-          "focus-visible:tw-ring-ring/50"
+          "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"],
+        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"],
+        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"],
+        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": [],
@@ -755,13 +651,13 @@ var Button = ({
       onClick: handleClick,
       className: cn(classNames),
       children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw:size-4 tw:shrink-0 tw:animate-spin" }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children: isLoading && isIconOnly ? null : children })
       ]
     }
   );
 };
-var Clipboard = ({
+var Clipboard2 = ({
   ref,
   text: textProp,
   children,
@@ -786,6 +682,7 @@ var Clipboard = ({
     }
   };
   const handleOnClick = (event) => {
+    setIsTooltipOpen(true);
     if (text && state === "ready") void copy(text);
     onClick?.(event);
   };
@@ -800,6 +697,7 @@ var Clipboard = ({
     return tooltip;
   })();
   const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
+  const hasTooltipContent = tooltipContent !== null && tooltipContent !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Tooltip.Trigger,
@@ -808,12 +706,12 @@ var Clipboard = ({
         asChild,
         keepOpenOnClick: true,
         onClick: handleOnClick,
-        className: cn("tw-cursor-pointer", className),
+        className: cn("tw:cursor-pointer", className),
         ref,
         children: children ?? text
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    hasTooltipContent && /* @__PURE__ */ jsxRuntime.jsx(
       Tooltip.Content,
       {
         keepOpenOnPointerDownOutside: true,
@@ -824,7 +722,7 @@ var Clipboard = ({
     )
   ] });
 };
-var DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Copy, {});
+var DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {});
 var DEFAULT_ARIA_LABEL = "Copy";
 var ClipboardButton = ({
   // clipboard props
@@ -841,7 +739,7 @@ var ClipboardButton = ({
   const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
   const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Clipboard,
+    Clipboard2,
     {
       asChild: true,
       tooltip,
@@ -857,13 +755,248 @@ var ClipboardButton = ({
 };
 var ButtonToolbar = ({ value, children }) => {
   if (!value && !children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-pointer-events-auto tw-ml-auto tw-mr-4 tw-flex tw-w-fit tw-gap-1 tw-overflow-visible tw-rounded-lg tw-border tw-border-solid tw-border-border !tw-bg-background tw-p-[3px] tw-shadow", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw:pointer-events-auto tw:ml-auto tw:mr-4 tw:flex tw:w-fit tw:gap-1 tw:overflow-visible tw:rounded-lg tw:border tw:border-solid tw:border-border tw:!bg-background tw:p-[3px] tw:shadow", children: [
     !!value && /* @__PURE__ */ jsxRuntime.jsx(ClipboardButton, { size: "icon-sm", variant: "invisible", text: value }),
     children
   ] });
 };
+var 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.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(`--color-${token}`).trim() || fallbackChannels;
+  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";
@@ -883,12 +1016,38 @@ var subscribeThemeSignal = (onChange) => {
   return () => observer.disconnect();
 };
 var useThemeSignal = () => react.useSyncExternalStore(subscribeThemeSignal, readThemeSignal, () => SSR_SIGNAL);
-var useThemedExtension = (build, deps = []) => {
+var themeCache = /* @__PURE__ */ new Map();
+var useThemedExtension = (cacheKey, build) => {
   const themeSignal = useThemeSignal();
-  return react.useMemo(build, [themeSignal, ...deps]);
+  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",
+  "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": {
@@ -929,7 +1088,27 @@ var buildBaseThemeStyles = () => ({
   ".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 ALWAYS_OFF = {
+  drawSelection: false,
+  foldGutter: false,
+  foldKeymap: false,
+  highlightActiveLine: false,
+  highlightActiveLineGutter: false
+};
+var buildBasicSetup = (readOnly) => ({
+  ...ALWAYS_OFF,
+  ...readOnly ? {
+    history: false,
+    historyKeymap: false,
+    closeBrackets: false,
+    closeBracketsKeymap: false,
+    lintKeymap: false,
+    indentOnInput: false,
+    rectangularSelection: false,
+    dropCursor: false,
+    highlightSelectionMatches: false
+  } : null
+});
 var buildCustomTheme = () => codemirrorThemeGithub.githubLightInit({
   settings: {
     fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
@@ -942,37 +1121,175 @@ var buildCustomTheme = () => codemirrorThemeGithub.githubLightInit({
     selection: resolveToken("primary", "31 143 255")
   }
 });
+var sfsqlWithLanguageData = {
+  ...codemirrorLangSfsql.sfsql,
+  languageData: {
+    ...codemirrorLangSfsql.sfsql.languageData,
+    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
+    autocomplete: autocomplete.completeFromList(
+      Object.keys(codemirrorLangSfsql.modeSpec.keywords).map((label) => ({
+        label: label.toUpperCase(),
+        type: "keyword"
+      }))
+    )
+  }
+};
 var getLanguageMode = (mode) => {
   switch (mode) {
+    case void 0:
+    case "application/json":
+      return langJson.json();
     case "text/x-python":
       return langPython.python();
     case "text/x-sql":
       return langSql.sql({ upperCaseKeywords: true });
+    case "text/x-mysql":
+      return langSql.sql({ upperCaseKeywords: true, dialect: langSql.MySQL });
+    case "text/x-pgsql":
+      return langSql.sql({ upperCaseKeywords: true, dialect: langSql.PostgreSQL });
+    case "text/x-mssql":
+      return langSql.sql({ upperCaseKeywords: true, dialect: langSql.MSSQL });
     case "text/x-sfsql":
-      return language.StreamLanguage.define(codemirrorLangSfsql.sfsql);
+      return language.StreamLanguage.define(sfsqlWithLanguageData);
     case "text/x-plsql":
       return langSql.sql({ upperCaseKeywords: true, dialect: langSql.PLSQL });
     case "text/x-rsrc":
       return language.StreamLanguage.define(r.r);
     case "text/x-sh":
       return language.StreamLanguage.define(shell.shell);
+    case "text/x-toml":
+      return language.StreamLanguage.define(toml.toml);
+    case "text/jsonnet":
+      return language.StreamLanguage.define(jsonnet);
+    case "text/x-dbt":
+      return language.StreamLanguage.define(dbt);
     case "text/javascript":
       return langJavascript.javascript({ jsx: true });
     case "text/typescript":
       return langJavascript.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 langJson.json();
+      return [];
   }
 };
 var shouldLintJson = (mode, readOnly) => mode === "application/json" && !readOnly;
-var KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: cn("tw-text-xs tw-text-muted-foreground", className) });
+var setSearchEffect = state.StateEffect.define();
+function findMatches(doc, query) {
+  if (!query) return [];
+  const text = doc.toString();
+  try {
+    const regex = new RegExp(escapeStringRegexp(query), "gi");
+    return Array.from(text.matchAll(regex)).map((match, index) => {
+      const from = match.index;
+      const to = from + match[0].length;
+      return { from, to, text: match[0], localIndex: index };
+    });
+  } catch (e) {
+    console.warn("Invalid search regex:", e);
+    return [];
+  }
+}
+function createDecorations(matches, selectedLocalIndex) {
+  const decorations = matches.map((match) => {
+    const isSelected = match.localIndex === selectedLocalIndex;
+    const decoration = view.Decoration.mark({
+      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
+    });
+    return decoration.range(match.from, match.to);
+  });
+  return view.Decoration.set(decorations, true);
+}
+var searchField = state.StateField.define({
+  create() {
+    return {
+      query: "",
+      selectedMatchIndex: void 0,
+      matches: [],
+      decorations: view.Decoration.none
+    };
+  },
+  update(state, tr) {
+    let newState = state;
+    for (const effect of tr.effects) {
+      if (!effect.is(setSearchEffect)) {
+        continue;
+      }
+      const { query, selectedMatchIndex } = effect.value;
+      const matches = findMatches(tr.state.doc, query);
+      const decorations = createDecorations(matches, selectedMatchIndex);
+      newState = {
+        query,
+        selectedMatchIndex,
+        matches,
+        decorations
+      };
+    }
+    if (tr.docChanged && newState.query) {
+      const matches = findMatches(tr.state.doc, newState.query);
+      const decorations = createDecorations(matches, newState.selectedMatchIndex);
+      newState = {
+        ...newState,
+        matches,
+        decorations
+      };
+    }
+    return newState;
+  },
+  provide: (field) => view.EditorView.decorations.from(field, (state) => state.decorations)
+});
+var searchViewPlugin = view.ViewPlugin.fromClass(
+  class {
+    lastSelectedIndex;
+    update(update) {
+      const state = update.state.field(searchField);
+      if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
+        const match = state.matches[state.selectedMatchIndex];
+        if (match) {
+          requestAnimationFrame(() => {
+            update.view.dispatch({
+              effects: view.EditorView.scrollIntoView(match.from, { y: "center" })
+            });
+          });
+        }
+        this.lastSelectedIndex = state.selectedMatchIndex;
+      }
+      if (state.selectedMatchIndex === void 0) {
+        this.lastSelectedIndex = void 0;
+      }
+    }
+  }
+);
+var searchTheme = view.EditorView.baseTheme({
+  ".cm-searchMatch": {
+    backgroundColor: colors__default.default.blue[100]
+  },
+  ".cm-searchMatch > span": {
+    color: `${colors__default.default.blue[600]} !important`
+  },
+  ".cm-searchMatch-selected": {
+    backgroundColor: colors__default.default.blue[600]
+  },
+  ".cm-searchMatch-selected > span": {
+    color: `${colors__default.default.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__ */ jsxRuntime.jsx("span", { ...props, className: cn("tw:text-xs tw:text-muted-foreground", className) });
 var KbdGroup = ({ ref, className, children, separator, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "kbd",
     {
       ...props,
       ref,
-      className: cn("tw-inline-flex", "tw-items-center", "tw-gap-1", className),
+      className: cn("tw:inline-flex", "tw:items-center", "tw:gap-1", className),
       children: separator ? (
         // oxlint-disable-next-line react-x/no-children-to-array
         react.Children.toArray(children).map((child, index) => (
@@ -990,22 +1307,22 @@ var kbdVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
     // style
-    "tw-pointer-events-none",
-    "tw-w-fit",
-    "tw-h-5",
-    "tw-min-w-5",
+    "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",
+    "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"
+    "tw:px-1",
+    'tw:[&_svg:not([class*="size-"])]:size-2.5',
+    "tw:text-xs",
+    "tw:font-medium",
+    "tw:rounded"
   ],
   {
     defaultVariants: {
@@ -1013,8 +1330,8 @@ var kbdVariants = classVarianceAuthority.cva(
     },
     variants: {
       variant: {
-        default: "tw-bg-muted tw-text-muted-foreground",
-        primary: "tw-bg-white/20 tw-text-white"
+        default: "tw:bg-muted tw:text-muted-foreground",
+        primary: "tw:bg-white/20 tw:text-white"
       }
     }
   }
@@ -1024,11 +1341,78 @@ Kbd.Group = KbdGroup;
 Kbd.Separator = KbdSeparator;
 var ToggleComponentHelp = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
   "Use ",
-  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Ctrl+/" }),
-  " or ",
-  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Command+/" }),
+  /* @__PURE__ */ jsxRuntime.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 state.Compartment();
+  return [
+    layer.of(view.tooltips()),
+    view.ViewPlugin.define((view$1) => {
+      const scheduled = setTimeout(() => {
+        if (!view$1.dom.isConnected) return;
+        const parent = findTooltipHost(view$1.dom);
+        if (parent) view$1.dispatch({ effects: layer.reconfigure(view.tooltips({ parent })) });
+      });
+      return { destroy: () => clearTimeout(scheduled) };
+    })
+  ];
+};
+var useTooltipsExtension = () => react.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 emptyArray = [];
 var emptyObject = {};
 var CodeEditor = ({
@@ -1037,45 +1421,96 @@ var CodeEditor = ({
   onChange,
   mode = "application/json",
   placeholder = "",
+  ariaLabel,
+  searchQuery,
+  searchMatchIndex,
   readOnly = false,
   autocompletions = emptyArray,
+  completionSource,
+  variables,
   extraKeys = emptyObject,
   withToggleCommentHint = false,
   withAutofocus = false,
   withLineNumbers = true,
   withLineWrapping = true,
   withCollapseUnchanged = false,
-  withCopyButton = true,
+  withCopyButton = false,
   completeAny = false,
   help = null,
   helpPostfix = null,
   renderAdditionalButtons,
   className
 }) => {
-  const customTheme = useThemedExtension(buildCustomTheme);
-  const baseTheme = useThemedExtension(() => view.EditorView.theme(buildBaseThemeStyles()));
+  const handleChange = useStableCallback((next) => onChange?.(next));
+  const withSearch = searchQuery !== void 0;
+  const editorRef = react.useRef(null);
+  react.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 = react.useRef(extraKeys);
+  react.useLayoutEffect(() => {
+    extraKeysRef.current = extraKeys;
+  });
+  const boundKeysSignature = Object.keys(extraKeys).join("\n");
+  const boundKeys = react.useMemo(
+    () => boundKeysSignature.split("\n").filter(Boolean),
+    [boundKeysSignature]
+  );
+  const tooltipLayer = useTooltipsExtension();
+  const variableCompletion = react.useMemo(() => completeVariables(variables), [variables]);
+  const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
+  const baseTheme = useThemedExtension(
+    "code-editor:chrome",
+    () => view.EditorView.theme(buildBaseThemeStyles())
+  );
   const commonExtensions = react.useMemo(() => {
     return [
       getLanguageMode(mode),
-      shouldLintJson(mode, readOnly) && lint.linter(langJson.jsonParseLinter()),
+      shouldLintJson(mode, readOnly) ? lint.linter(langJson.jsonParseLinter()) : [],
       withLineWrapping ? view.EditorView.lineWrapping : [],
       CodeMirror.EditorState.languageData.of(() => [
-        { autocomplete: completeAny ? autocomplete.completeAnyWord : autocompletions }
+        { autocomplete: completionSource ?? (completeAny ? autocomplete.completeAnyWord : autocompletions) }
       ]),
+      CodeMirror.EditorState.languageData.of(() => [{ autocomplete: variableCompletion }]),
       view.keymap.of(
-        Object.entries(extraKeys).map(([key, run]) => ({
+        boundKeys.map((key) => ({
           key,
           run: () => {
-            if (typeof run === "string") return run;
-            run();
+            extraKeysRef.current[key]?.();
             return true;
           }
         }))
       ),
-      autocomplete.autocompletion({ activateOnTyping: completeAny }),
+      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.
+        autocomplete.autocompletion()
+      ],
+      ariaLabel ? view.EditorView.contentAttributes.of({ "aria-label": ariaLabel }) : [],
+      withSearch ? searchExtension() : [],
+      tooltipLayer,
       baseTheme
-    ].filter(Boolean);
-  }, [autocompletions, completeAny, extraKeys, mode, readOnly, withLineWrapping, baseTheme]);
+    ];
+  }, [
+    autocompletions,
+    completionSource,
+    variableCompletion,
+    completeAny,
+    boundKeys,
+    mode,
+    readOnly,
+    withLineWrapping,
+    baseTheme,
+    ariaLabel,
+    withSearch,
+    tooltipLayer
+  ]);
   const extensions = react.useMemo(() => {
     return [
       ...commonExtensions,
@@ -1092,18 +1527,23 @@ var CodeEditor = ({
   }, [commonExtensions, placeholder, readOnly, previousValue, withCollapseUnchanged]);
   const config = react.useMemo(() => {
     return {
-      ...BASIS_SETUP,
-      lineNumbers: withLineNumbers
+      ...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]);
+  }, [withLineNumbers, readOnly, withSearch]);
+  const additionalButtons = renderAdditionalButtons?.(value);
+  const hasToolbar = withCopyButton && !!value || !!additionalButtons;
   return (
     // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "tw-relative tw-flex tw-min-h-0 tw-flex-col [&_.cm-mergeViewEditor]:tw-overflow-visible [&_.cm-mergeViewEditors]:tw-h-full [&_.cm-mergeView]:tw-h-full [&_>div]:tw-h-full [&_>div]:tw-overflow-auto [&_>div]:tw-bg-background",
-          { "tw-mt-5": !!renderAdditionalButtons },
+          "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) => {
@@ -1112,19 +1552,21 @@ var CodeEditor = ({
           }
         },
         children: [
-          (withCopyButton || renderAdditionalButtons) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-pointer-events-none tw-absolute tw-z-10 tw-flex !tw-h-auto tw-w-full tw-translate-y-[calc(-100%_+_8px)] !tw-overflow-visible !tw-bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ButtonToolbar, { value: withCopyButton ? value : void 0, children: renderAdditionalButtons?.(value) }) }) }),
+          hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:pointer-events-none tw:absolute tw:z-10 tw:flex tw:!h-auto tw:w-full tw:translate-y-[calc(-100%_+_8px)] tw:!overflow-visible tw:!bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ButtonToolbar, { value: withCopyButton ? value : void 0, children: additionalButtons }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             CodeMirror__default.default,
             {
+              ref: editorRef,
+              onCreateEditor: handleCreateEditor,
               theme: customTheme,
               value,
-              onChange,
+              onChange: handleChange,
               extensions,
               autoFocus: withAutofocus,
               basicSetup: config
             }
           ),
-          !readOnly && (withToggleCommentHint || help || helpPostfix) && /* @__PURE__ */ jsxRuntime.jsxs(HelpBlock, { className: "tw-mt-2 tw-flex tw-flex-wrap tw-gap-1", children: [
+          !readOnly && (withToggleCommentHint || help || helpPostfix) && /* @__PURE__ */ jsxRuntime.jsxs(HelpBlock, { className: "tw:mt-2 tw:flex tw:flex-wrap tw:gap-1", children: [
             help,
             withToggleCommentHint ? /* @__PURE__ */ jsxRuntime.jsx(ToggleComponentHelp, {}) : null,
             helpPostfix
@@ -1438,114 +1880,7 @@ function highlightingExtension(queryParser) {
 function updateHighlighting(view, lines) {
   view.dispatch({ effects: setHighlightedLinesEffect.of(lines ?? null) });
 }
-var setSearchEffect = state.StateEffect.define();
-function findMatches(doc, query) {
-  if (!query) return [];
-  const text = doc.toString();
-  try {
-    const regex = new RegExp(escapeStringRegexp(query), "gi");
-    return Array.from(text.matchAll(regex)).map((match, index) => {
-      const from = match.index;
-      const to = from + match[0].length;
-      return { from, to, text: match[0], localIndex: index };
-    });
-  } catch (e) {
-    console.warn("Invalid search regex:", e);
-    return [];
-  }
-}
-function createDecorations(matches, selectedLocalIndex) {
-  const decorations = matches.map((match) => {
-    const isSelected = match.localIndex === selectedLocalIndex;
-    const decoration = view.Decoration.mark({
-      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
-    });
-    return decoration.range(match.from, match.to);
-  });
-  return view.Decoration.set(decorations, true);
-}
-var searchField = state.StateField.define({
-  create() {
-    return {
-      query: "",
-      selectedMatchIndex: void 0,
-      matches: [],
-      decorations: view.Decoration.none
-    };
-  },
-  update(state, tr) {
-    let newState = state;
-    for (const effect of tr.effects) {
-      if (!effect.is(setSearchEffect)) {
-        continue;
-      }
-      const { query, selectedMatchIndex } = effect.value;
-      const matches = findMatches(tr.state.doc, query);
-      const decorations = createDecorations(matches, selectedMatchIndex);
-      newState = {
-        query,
-        selectedMatchIndex,
-        matches,
-        decorations
-      };
-    }
-    if (tr.docChanged && newState.query) {
-      const matches = findMatches(tr.state.doc, newState.query);
-      const decorations = createDecorations(matches, newState.selectedMatchIndex);
-      newState = {
-        ...newState,
-        matches,
-        decorations
-      };
-    }
-    return newState;
-  },
-  provide: (field) => view.EditorView.decorations.from(field, (state) => state.decorations)
-});
-var searchViewPlugin = view.ViewPlugin.fromClass(
-  class {
-    lastSelectedIndex;
-    update(update) {
-      const state = update.state.field(searchField);
-      if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
-        const match = state.matches[state.selectedMatchIndex];
-        if (match) {
-          requestAnimationFrame(() => {
-            update.view.dispatch({
-              effects: view.EditorView.scrollIntoView(match.from, { y: "center" })
-            });
-          });
-        }
-        this.lastSelectedIndex = state.selectedMatchIndex;
-      }
-      if (state.selectedMatchIndex === void 0) {
-        this.lastSelectedIndex = void 0;
-      }
-    }
-  }
-);
-var searchTheme = view.EditorView.baseTheme({
-  ".cm-searchMatch": {
-    backgroundColor: colors__default.default.blue[100]
-  },
-  ".cm-searchMatch > span": {
-    color: `${colors__default.default.blue[600]} !important`
-  },
-  ".cm-searchMatch-selected": {
-    backgroundColor: colors__default.default.blue[600]
-  },
-  ".cm-searchMatch-selected > span": {
-    color: `${colors__default.default.white} !important`
-  }
-});
-function searchExtension() {
-  return [searchField, searchViewPlugin, searchTheme];
-}
-function updateSearch(view, query, selectedMatchIndex) {
-  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
-}
-var BASIS_SETUP2 = {
-  drawSelection: false,
+var OWN_KEYMAPS = {
   defaultKeymap: false,
   completionKeymap: false,
   searchKeymap: false
@@ -1610,16 +1945,27 @@ var SqlEditor = ({
   dialect
 }) => {
   const editorRef = react.useRef(null);
-  const customTheme = useThemedExtension(buildCustomTheme);
-  const themeExtension = useThemedExtension(() => CodeMirror.EditorView.theme(buildTheme()));
+  const tooltipLayer = useTooltipsExtension();
+  const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
+  const themeExtension = useThemedExtension(
+    "sql-editor:chrome",
+    () => CodeMirror.EditorView.theme(buildTheme())
+  );
   const extensions = react.useMemo(() => {
     const baseKeymap = [...commands.defaultKeymap, ...CUSTOM_KEYMAP];
     return [
       CodeMirror.EditorView.lineWrapping,
       CodeMirror.keymap.of(extraKeys ? [...extraKeys, ...baseKeymap] : baseKeymap),
-      ...codemirrorLangSql.installExtensions({ schema, defaultDatabase, defaultSchema, variables, dialect }),
+      ...codemirrorLangSql.installExtensions({
+        schema,
+        defaultDatabase,
+        defaultSchema,
+        variableCompletion: completeVariables(variables),
+        dialect
+      }),
       searchExtension(),
       highlightingExtension(queryParser),
+      tooltipLayer,
       themeExtension,
       onBlurEditor ? CodeMirror.EditorView.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
       onFocusEditor ? CodeMirror.EditorView.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : []
@@ -1634,11 +1980,12 @@ var SqlEditor = ({
     dialect,
     onBlurEditor,
     onFocusEditor,
-    themeExtension
+    themeExtension,
+    tooltipLayer
   ]);
   const defaultSetup = react.useMemo(() => {
-    return { ...BASIS_SETUP2, lineNumbers };
-  }, [lineNumbers]);
+    return { ...buildBasicSetup(readOnly), ...OWN_KEYMAPS, lineNumbers };
+  }, [readOnly, lineNumbers]);
   react.useEffect(() => {
     if (editorRef.current?.view) {
       updateHighlighting(editorRef.current.view, highlightLines);
@@ -1704,25 +2051,25 @@ 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" ? icons_exports.ChevronsRight : icons_exports.ChevronsLeft;
-  return /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onAccept, variant: "outline", size: "icon-sm", title: label, "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { className: "tw-size-5" }) });
+  const Chevron = side === "left" ? lucideReact.ChevronsRight : lucideReact.ChevronsLeft;
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onAccept, variant: "outline", size: "icon-sm", title: label, "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { className: "tw:size-5" }) });
 };
 var AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     className: cn(
-      "tw-z-10 tw-flex tw-shrink-0 tw-flex-col tw-items-center",
-      conflicts.length > 0 ? "tw-w-7" : "tw-w-0"
+      "tw:z-10 tw:flex tw:shrink-0 tw:flex-col tw:items-center",
+      conflicts.length > 0 ? "tw:w-7" : "tw:w-0"
     ),
     children: conflicts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-shrink-0", style: { height: `${PANE_HEADER_HEIGHT_PX}px` } }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-relative tw-w-full tw-flex-1 tw-overflow-y-clip tw-overflow-x-visible", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: "tw-relative tw-size-full", children: conflicts.map((conflict) => {
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:shrink-0", style: { height: `${PANE_HEADER_HEIGHT_PX}px` } }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:relative tw:w-full tw:flex-1 tw:overflow-y-clip tw:overflow-x-visible", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: "tw:relative tw:size-full", children: conflicts.map((conflict) => {
         const topLine = side === "left" ? conflict.oldStartLine : conflict.newStartLine;
         const topOffset = (topLine - 1) * LINE_HEIGHT_PX - 2;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "tw-absolute tw-inset-x-0 tw-flex tw-flex-col tw-items-center tw-gap-0.5",
+            className: "tw:absolute tw:inset-x-0 tw:flex tw:flex-col tw:items-center tw:gap-0.5",
             style: { top: `${topOffset}px` },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(AcceptButton, { side, onAccept: () => onAccept(conflict) }),
@@ -1734,7 +2081,7 @@ var AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /
                   size: "icon-sm",
                   title: "Dismiss",
                   "aria-label": `Dismiss ${side === "left" ? "production" : "branch"} change`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw:size-4" })
                 }
               )
             ]
@@ -1831,13 +2178,15 @@ var MergePane = ({
   deleted = false
 }) => {
   const editorRef = react.useRef(null);
+  const handleChange = useStableCallback((next) => onChange?.(next));
   const themeExtension = useThemedExtension(
+    `merge-pane:${deleted}`,
     () => view.EditorView.theme({
       "&.cm-editor": {
         height: "100%",
         backgroundColor: deleted ? colors__default.default.error[100] : 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 `--color-background` goes dark.
+        // 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") },
         outline: "none"
@@ -1848,10 +2197,13 @@ var MergePane = ({
       },
       "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
       ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
-    }),
-    [deleted]
+    })
   );
   const diffHighlightExtension = react.useMemo(() => createDiffHighlightExtension(), []);
+  const basicSetup = react.useMemo(
+    () => ({ ...buildBasicSetup(readOnly), lineNumbers: true }),
+    [readOnly]
+  );
   const extensions = react.useMemo(
     () => [
       diffHighlightExtension,
@@ -1901,33 +2253,33 @@ var MergePane = ({
     "div",
     {
       className: cn(
-        "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-overflow-hidden",
+        "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"
       ),
       children: [
         header && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "tw-px-4 tw-py-3",
-              deleted ? "tw-border-b tw-border-error-200 tw-bg-error-100" : "tw-bg-background",
+              "tw:px-4 tw:py-3",
+              deleted ? "tw:border-b tw:border-error-200 tw:bg-error-100" : "tw:bg-background",
               headerClassName
             ),
             children: header
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:flex tw:h-0 tw:flex-1 tw:flex-col tw:[&_>div]:h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           CodeMirror__default.default,
           {
             ref: editorRef,
             height: "100%",
             value,
-            onChange,
+            onChange: handleChange,
             extensions,
             readOnly,
             onCreateEditor: handleCreateEditor,
-            basicSetup: { lineNumbers: true, drawSelection: false }
+            basicSetup
           }
         ) })
       ]
@@ -2027,7 +2379,7 @@ var MergeEditor = ({
     "div",
     {
       className: cn(
-        "tw-flex tw-h-full tw-min-h-0 tw-overflow-hidden tw-bg-background tw-gap-3",
+        "tw:flex tw:h-full tw:min-h-0 tw:overflow-hidden tw:bg-background tw:gap-3",
         className
       ),
       children: [
@@ -2039,7 +2391,7 @@ var MergeEditor = ({
             lineClassification: leftClassification,
             readOnly: true,
             header: leftHeader,
-            className: "tw-rounded-r-lg tw-border tw-border-border",
+            className: "tw:rounded-r-lg tw:border tw:border-border",
             onScrollDOMReady: registerScroller(0),
             deleted: leftDeleted
           }
@@ -2063,7 +2415,7 @@ var MergeEditor = ({
             onChange: handleMergeChange,
             header: middleHeader,
             headerClassName: middleHeaderClassName,
-            className: cn("tw-border tw-border-border tw-rounded-lg", middleClassName),
+            className: cn("tw:border tw:border-border tw:rounded-lg", middleClassName),
             onScrollDOMReady: registerScroller(1)
           }
         ),
@@ -2085,7 +2437,7 @@ var MergeEditor = ({
             lineClassification: rightClassification,
             readOnly: true,
             header: rightHeader,
-            className: "tw-rounded-l-lg tw-border tw-border-border",
+            className: "tw:rounded-l-lg tw:border tw:border-border",
             onScrollDOMReady: registerScroller(2),
             deleted: rightDeleted
           }
@@ -2096,7 +2448,9 @@ var MergeEditor = ({
 };
 
 exports.CodeEditor = CodeEditor;
+exports.LANGUAGE_MODES = LANGUAGE_MODES;
 exports.MergeEditor = MergeEditor;
 exports.SqlEditor = SqlEditor;
+exports.isLanguageMode = isLanguageMode;
 //# sourceMappingURL=editors.cjs.map
 //# sourceMappingURL=editors.cjs.map