@exem-ui/react 0.3.4-next.20260701100258 → 0.3.4-next.20260702065311

package/dist/code-editor/index.js

@@ -0,0 +1,987 @@
+'use strict';
+
+var utils = require('@exem-ui/core/utils');
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@monaco-editor/react');
+var sqlFormatter = require('sql-formatter');
+
+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 React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// src/codeEditor/CodeEditor.tsx
+var CodeEditorSourceContext = React2__namespace.createContext(null);
+var useCodeEditorSource = () => {
+  const context = React2__namespace.useContext(CodeEditorSourceContext);
+  if (!context) {
+    throw new Error("CodeEditor components must be used within CodeEditor");
+  }
+  return context;
+};
+var CodeEditorSourceProvider = ({
+  children,
+  onSourceValueChange,
+  readOnly,
+  sourceValue
+}) => {
+  const contextValue = React2__namespace.useMemo(
+    () => ({
+      onSourceValueChange,
+      readOnly,
+      sourceValue
+    }),
+    [onSourceValueChange, readOnly, sourceValue]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CodeEditorSourceContext.Provider, { value: contextValue, children });
+};
+var useControllableViewMode = ({
+  value,
+  defaultValue = "original",
+  onChange
+}) => {
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const setValue = React2.useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  return [currentValue, setValue];
+};
+var CodeEditorFormatContext = React2__namespace.createContext(null);
+var useCodeEditorFormat = () => {
+  const context = React2__namespace.useContext(CodeEditorFormatContext);
+  if (!context) {
+    throw new Error("CodeEditor components must be used within CodeEditor");
+  }
+  return context;
+};
+var CodeEditorFormatProvider = ({
+  children,
+  defaultViewMode,
+  formatter,
+  onViewModeChange,
+  viewMode: viewModeProp
+}) => {
+  const [viewMode, setViewMode] = useControllableViewMode({
+    value: viewModeProp,
+    defaultValue: defaultViewMode,
+    onChange: onViewModeChange
+  });
+  const [activeFormatterOverride, setActiveFormatterOverride] = React2__namespace.useState();
+  const activeFormatter = activeFormatterOverride === void 0 ? formatter : activeFormatterOverride;
+  const setActiveFormatter = React2__namespace.useCallback((nextFormatter) => {
+    setActiveFormatterOverride(() => nextFormatter);
+  }, []);
+  const contextValue = React2__namespace.useMemo(
+    () => ({
+      activeFormatter,
+      formatter,
+      setActiveFormatter,
+      setViewMode,
+      viewMode
+    }),
+    [activeFormatter, formatter, setActiveFormatter, setViewMode, viewMode]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CodeEditorFormatContext.Provider, { value: contextValue, children });
+};
+
+// src/codeEditor/format/getDisplayValue.ts
+var getDisplayValue = (value, viewMode, formatter) => {
+  const currentValue = value ?? "";
+  if (viewMode !== "formatted" || !formatter) {
+    return currentValue;
+  }
+  return formatter(currentValue);
+};
+var useCopyState = (copiedDuration) => {
+  const [copied, setCopied] = React2__namespace.useState(false);
+  const timerRef = React2__namespace.useRef(null);
+  const markCopied = React2__namespace.useCallback(() => {
+    setCopied(true);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+      timerRef.current = null;
+    }, copiedDuration);
+  }, [copiedDuration]);
+  React2__namespace.useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  return { copied, markCopied };
+};
+var CopyTrigger = ({
+  children,
+  copiedDuration = 1500,
+  formatter,
+  value
+}) => {
+  const { activeFormatter, viewMode } = useCodeEditorFormat();
+  const { sourceValue } = useCodeEditorSource();
+  const copyFormatter = formatter === void 0 ? activeFormatter : formatter;
+  const displayValue = getDisplayValue(value ?? sourceValue, viewMode, copyFormatter);
+  const { copied, markCopied } = useCopyState(copiedDuration);
+  const copy = React2__namespace.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(displayValue);
+    } catch {
+      throw new Error("CodeEditor.CopyTrigger: Clipboard copy failed.");
+    }
+    markCopied();
+  }, [displayValue, markCopied]);
+  const getCopyProps = React2__namespace.useCallback(
+    () => ({
+      onClick: copy,
+      type: "button"
+    }),
+    [copy]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ copied, copy, getCopyProps }) });
+};
+CopyTrigger.displayName = "CodeEditor.CopyTrigger";
+var FormatToggle = ({ children }) => {
+  const { viewMode, setViewMode } = useCodeEditorFormat();
+  const formatted = viewMode === "formatted";
+  const toggle = React2__namespace.useCallback(() => {
+    setViewMode(formatted ? "original" : "formatted");
+  }, [formatted, setViewMode]);
+  const getToggleProps = React2__namespace.useCallback(
+    () => ({
+      onClick: toggle,
+      "aria-pressed": formatted,
+      type: "button"
+    }),
+    [formatted, toggle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ formatted, toggle, getToggleProps }) });
+};
+FormatToggle.displayName = "CodeEditor.FormatToggle";
+var FormatTrigger = ({ children }) => {
+  const { onSourceValueChange, readOnly, sourceValue } = useCodeEditorSource();
+  const { activeFormatter, setViewMode } = useCodeEditorFormat();
+  const disabled = readOnly || !activeFormatter || !onSourceValueChange;
+  const format2 = React2__namespace.useCallback(() => {
+    if (readOnly || !activeFormatter || !onSourceValueChange) {
+      return;
+    }
+    onSourceValueChange(activeFormatter(sourceValue ?? ""));
+    setViewMode("original");
+  }, [activeFormatter, onSourceValueChange, readOnly, setViewMode, sourceValue]);
+  const getFormatProps = React2__namespace.useCallback(
+    () => ({
+      disabled,
+      onClick: format2,
+      type: "button"
+    }),
+    [disabled, format2]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ format: format2, getFormatProps }) });
+};
+FormatTrigger.displayName = "CodeEditor.FormatTrigger";
+var localMonacoLoaderPromise = null;
+var configuredMonaco = null;
+var codeEditorSemanticColorStyleId = "exem-code-editor-semantic-colors";
+var codeEditorThemeName = "exem-code";
+var defaultCodeEditorOptions = {
+  automaticLayout: true,
+  bracketPairColorization: { enabled: false },
+  domReadOnly: true,
+  folding: false,
+  fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  fontSize: 14,
+  glyphMargin: false,
+  guides: {
+    highlightActiveIndentation: false,
+    indentation: false
+  },
+  lineDecorationsWidth: 0,
+  lineHeight: 20,
+  lineNumbers: "on",
+  lineNumbersMinChars: 4,
+  minimap: { enabled: false },
+  overviewRulerLanes: 0,
+  padding: {
+    bottom: 8,
+    top: 8
+  },
+  readOnly: true,
+  renderLineHighlight: "none",
+  renderWhitespace: "none",
+  scrollbar: {
+    alwaysConsumeMouseWheel: false,
+    horizontal: "auto",
+    horizontalScrollbarSize: 10,
+    horizontalSliderSize: 6,
+    useShadows: false,
+    vertical: "hidden",
+    verticalScrollbarSize: 10,
+    verticalSliderSize: 6
+  },
+  scrollBeyondLastLine: false,
+  stickyScroll: {
+    enabled: false
+  },
+  wordWrap: "off"
+};
+var codeEditorSemanticColors = [
+  "--color-text-secondary",
+  "--color-tint-foreground-violet",
+  "--color-tint-foreground-teal",
+  "--color-tint-foreground-pink",
+  "--color-text-disabled",
+  "--color-text-tertiary",
+  "--color-tint-foreground-orange"
+];
+var codeEditorThemeRuleContributors = /* @__PURE__ */ new Set();
+var registerCodeEditorThemeRules = (contributor) => {
+  codeEditorThemeRuleContributors.add(contributor);
+  if (configuredMonaco) {
+    configuredMonaco.editor.defineTheme(codeEditorThemeName, buildCodeEditorTheme());
+  }
+};
+var withoutHash = (color) => color.replace(/^#/, "");
+var createCodeEditorTokenMarker = (index) => `#${String(index + 1).padStart(6, "0")}`;
+var getCodeEditorSemanticColorMarker = (cssVariable) => createCodeEditorTokenMarker(codeEditorSemanticColors.indexOf(cssVariable));
+var createCodeEditorThemeRules = (rules) => rules.map(({ token, cssVariable, fontStyle }) => {
+  const themeRule = {
+    token,
+    foreground: withoutHash(getCodeEditorSemanticColorMarker(cssVariable))
+  };
+  if (fontStyle) {
+    themeRule.fontStyle = fontStyle;
+  }
+  return themeRule;
+});
+var getCodeEditorSemanticColorStyleSheet = () => codeEditorSemanticColors.map(
+  (cssVariable, index) => `.exem-code-editor-monaco .mtk${index + 1} {
+  color: var(${cssVariable});
+}`
+).join("\n\n");
+var ensureCodeEditorSemanticColorStyles = () => {
+  if (typeof document === "undefined" || document.getElementById(codeEditorSemanticColorStyleId)) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = codeEditorSemanticColorStyleId;
+  styleElement.textContent = getCodeEditorSemanticColorStyleSheet();
+  document.head.append(styleElement);
+};
+var baseCodeEditorThemeRules = createCodeEditorThemeRules([
+  { token: "", cssVariable: "--color-text-secondary" },
+  { token: "attribute.name", cssVariable: "--color-tint-foreground-violet" },
+  { token: "comment", cssVariable: "--color-text-disabled" },
+  { token: "delimiter", cssVariable: "--color-text-secondary" },
+  { token: "keyword", cssVariable: "--color-tint-foreground-violet" },
+  { token: "number", cssVariable: "--color-tint-foreground-pink" },
+  { token: "string", cssVariable: "--color-tint-foreground-teal" },
+  { token: "string.key", cssVariable: "--color-tint-foreground-violet" },
+  { token: "type", cssVariable: "--color-tint-foreground-violet" },
+  { token: "variable", cssVariable: "--color-text-secondary" }
+]);
+var codeEditorEncodedTokenColors = codeEditorSemanticColors.map(
+  (_, index) => createCodeEditorTokenMarker(index)
+);
+var buildCodeEditorTheme = () => ({
+  base: "vs",
+  inherit: false,
+  encodedTokensColors: codeEditorEncodedTokenColors,
+  rules: [
+    ...baseCodeEditorThemeRules,
+    ...[...codeEditorThemeRuleContributors].flatMap((contributor) => contributor())
+  ],
+  colors: {}
+});
+var hasCodeEditorLanguage = (monaco, languageId) => monaco.languages.getLanguages().some((language) => language.id === languageId);
+var setupLocalMonacoLoader = () => {
+  localMonacoLoaderPromise ?? (localMonacoLoaderPromise = import('monaco-editor').then((monaco) => {
+    ensureCodeEditorSemanticColorStyles();
+    react.loader.config({ monaco });
+    configuredMonaco = monaco;
+    monaco.editor.defineTheme(codeEditorThemeName, buildCodeEditorTheme());
+  }));
+  return localMonacoLoaderPromise;
+};
+var useMonacoLoader = () => {
+  const [monacoLoaderError, setMonacoLoaderError] = React2.useState(null);
+  const [monacoLoaderReady, setMonacoLoaderReady] = React2.useState(false);
+  React2.useEffect(() => {
+    let canceled = false;
+    setupLocalMonacoLoader().then(() => {
+      if (!canceled) {
+        setMonacoLoaderReady(true);
+      }
+    }).catch((error) => {
+      if (!canceled) {
+        setMonacoLoaderError(error);
+      }
+    });
+    return () => {
+      canceled = true;
+    };
+  }, []);
+  return { monacoLoaderError, monacoLoaderReady };
+};
+var getCodeEditorSurfaceReadOnly = ({
+  contextReadOnly,
+  readOnly,
+  viewMode
+}) => {
+  if (viewMode === "formatted") {
+    return true;
+  }
+  return readOnly ?? contextReadOnly;
+};
+var CodeEditorSurface = React2__namespace.forwardRef(
+  ({
+    className,
+    editorClassName,
+    height,
+    language = "plaintext",
+    value,
+    formatter,
+    onChange,
+    options,
+    readOnly,
+    beforeMount,
+    onMount
+  }, ref) => {
+    const { formatter: contextFormatter, viewMode } = useCodeEditorFormat();
+    const {
+      onSourceValueChange,
+      readOnly: contextReadOnly,
+      sourceValue: contextValue
+    } = useCodeEditorSource();
+    const { monacoLoaderError, monacoLoaderReady } = useMonacoLoader();
+    const surfaceFormatter = formatter === void 0 ? contextFormatter : formatter;
+    const displayValue = getDisplayValue(value ?? contextValue, viewMode, surfaceFormatter);
+    const surfaceReadOnly = getCodeEditorSurfaceReadOnly({
+      contextReadOnly,
+      readOnly,
+      viewMode
+    });
+    const handleChange = React2__namespace.useCallback(
+      (nextValue) => {
+        if (onChange) {
+          onChange(nextValue);
+          return;
+        }
+        if (surfaceReadOnly) {
+          return;
+        }
+        onSourceValueChange?.(nextValue ?? "");
+      },
+      [onChange, onSourceValueChange, surfaceReadOnly]
+    );
+    if (monacoLoaderError) {
+      throw monacoLoaderError;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          "h-[400px] min-h-[160px] overflow-hidden rounded-medium border border-border-primary bg-background-primary",
+          className
+        ),
+        style: height === void 0 ? void 0 : { height },
+        children: monacoLoaderReady ? /* @__PURE__ */ jsxRuntime.jsx(
+          react.Editor,
+          {
+            beforeMount,
+            className: utils.cn("exem-code-editor-monaco size-full", editorClassName),
+            height: "100%",
+            language,
+            onChange: handleChange,
+            onMount,
+            options: {
+              ...defaultCodeEditorOptions,
+              ...options,
+              domReadOnly: surfaceReadOnly,
+              readOnly: surfaceReadOnly
+            },
+            theme: codeEditorThemeName,
+            value: displayValue
+          }
+        ) : null
+      }
+    );
+  }
+);
+CodeEditorSurface.displayName = "CodeEditor.Surface";
+var CodeEditor = React2__namespace.forwardRef(
+  ({
+    value,
+    onValueChange,
+    readOnly = true,
+    defaultViewMode,
+    viewMode: viewModeProp,
+    onViewModeChange,
+    formatter,
+    className,
+    children
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CodeEditorSourceProvider,
+      {
+        onSourceValueChange: onValueChange,
+        readOnly,
+        sourceValue: value,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          CodeEditorFormatProvider,
+          {
+            defaultViewMode,
+            formatter,
+            onViewModeChange,
+            viewMode: viewModeProp,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("flex min-w-0 flex-col gap-2", className), children })
+          }
+        )
+      }
+    );
+  }
+);
+CodeEditor.Surface = CodeEditorSurface;
+CodeEditor.FormatToggle = FormatToggle;
+CodeEditor.FormatTrigger = FormatTrigger;
+CodeEditor.CopyTrigger = CopyTrigger;
+CodeEditor.displayName = "CodeEditor";
+var useActiveFormatter = (formatter) => {
+  const { setActiveFormatter } = useCodeEditorFormat();
+  React2__namespace.useEffect(() => {
+    setActiveFormatter(formatter);
+    return () => {
+      setActiveFormatter(void 0);
+    };
+  }, [formatter, setActiveFormatter]);
+};
+
+// src/codeEditor/jsonEditor/formatJsonValue.ts
+var formatJsonValue = (value) => {
+  try {
+    return JSON.stringify(JSON.parse(value), null, 2);
+  } catch {
+    return value;
+  }
+};
+
+// src/codeEditor/jsonEditor/monacoJsonEditor.ts
+var jsonEditorLanguageId = "exem-json";
+var isJsonEditorLanguageConfigured = false;
+var defineJsonEditorLanguage = (monaco) => {
+  if (isJsonEditorLanguageConfigured) {
+    return;
+  }
+  if (!hasCodeEditorLanguage(monaco, jsonEditorLanguageId)) {
+    monaco.languages.register({ id: jsonEditorLanguageId });
+  }
+  monaco.languages.setMonarchTokensProvider(jsonEditorLanguageId, {
+    tokenizer: {
+      root: [
+        [/\s+/, ""],
+        [/[{}]/, "delimiter.bracket.json"],
+        [/\[/, "delimiter.array.json"],
+        [/\]/, "delimiter.array.json"],
+        [/:/, "delimiter.colon.json"],
+        [/,/, "delimiter.comma.json"],
+        [/\b(?:true|false)\b/, "boolean.json"],
+        [/\bnull\b/, "keyword.json"],
+        [/-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/, "number.json"],
+        // 뒤에 콜론이 오면 key, 아니면 value 문자열로 구분한다.
+        [/"(?:\\.|[^"\\])*"(?=\s*:)/, "string.key.json"],
+        [/"(?:\\.|[^"\\])*"/, "string.value.json"]
+      ]
+    }
+  });
+  isJsonEditorLanguageConfigured = true;
+};
+var getJsonEditorThemeRules = () => createCodeEditorThemeRules([
+  { token: "boolean.json", cssVariable: "--color-text-secondary" },
+  { token: "delimiter.array.json", cssVariable: "--color-text-secondary" },
+  { token: "delimiter.bracket.json", cssVariable: "--color-text-secondary" },
+  { token: "delimiter.colon.json", cssVariable: "--color-text-secondary" },
+  { token: "delimiter.comma.json", cssVariable: "--color-text-secondary" },
+  { token: "keyword.json", cssVariable: "--color-text-tertiary" },
+  { token: "number.json", cssVariable: "--color-tint-foreground-violet" },
+  { token: "string.key.json", cssVariable: "--color-tint-foreground-teal" },
+  { token: "string.value.json", cssVariable: "--color-tint-foreground-orange" }
+]);
+registerCodeEditorThemeRules(getJsonEditorThemeRules);
+var CodeEditorJSON = React2__namespace.forwardRef(
+  ({ beforeMount, editorClassName, formatter, ...props }, ref) => {
+    const jsonFormatter = formatter === void 0 ? formatJsonValue : formatter;
+    useActiveFormatter(jsonFormatter);
+    const handleBeforeMount = React2__namespace.useCallback(
+      (monaco) => {
+        defineJsonEditorLanguage(monaco);
+        beforeMount?.(monaco);
+      },
+      [beforeMount]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CodeEditor.Surface,
+      {
+        ref,
+        ...props,
+        beforeMount: handleBeforeMount,
+        editorClassName: utils.cn("exem-json-editor-monaco", editorClassName),
+        formatter: jsonFormatter,
+        language: jsonEditorLanguageId
+      }
+    );
+  }
+);
+CodeEditorJSON.displayName = "CodeEditor.JSON";
+var resolveSqlFormatterLanguage = (dbType) => {
+  return dbType === "oracle" ? "plsql" : dbType;
+};
+var createSqlFormatter = (dbType = "sql") => {
+  let lastValue = null;
+  let lastResult = "";
+  return (value) => {
+    if (value === lastValue) {
+      return lastResult;
+    }
+    lastValue = value;
+    try {
+      lastResult = sqlFormatter.format(value, {
+        language: resolveSqlFormatterLanguage(dbType),
+        // :region 같은 바인드 변수를 파라미터로 인식시켜 포맷 중 깨지지 않게 한다.
+        paramTypes: { named: [":"] }
+      });
+    } catch {
+      lastResult = value;
+    }
+    return lastResult;
+  };
+};
+
+// src/codeEditor/sqlEditor/monacoSqlEditor.ts
+var sqlEditorLanguageId = "exem-sql";
+var isSqlEditorLanguageConfigured = false;
+var sqlEditorKeywords = [
+  "ADD",
+  "ALL",
+  "ALTER",
+  "AND",
+  "AS",
+  "ASC",
+  "BETWEEN",
+  "BY",
+  "CASE",
+  "COUNT",
+  "CREATE",
+  "DELETE",
+  "DESC",
+  "DISTINCT",
+  "DROP",
+  "ELSE",
+  "END",
+  "EXISTS",
+  "FROM",
+  "GROUP",
+  "HAVING",
+  "IN",
+  "INSERT",
+  "IS",
+  "JOIN",
+  "LEFT",
+  "LIKE",
+  "LIMIT",
+  "NOT",
+  "ON",
+  "OR",
+  "ORDER",
+  "RIGHT",
+  "SELECT",
+  "SET",
+  "SUM",
+  "THEN",
+  "UNION",
+  "UPDATE",
+  "VALUES",
+  "WHEN",
+  "WHERE"
+];
+var sqlEditorBooleans = ["FALSE", "TRUE"];
+var sqlEditorConstants = ["NULL"];
+var defineSqlEditorLanguage = (monaco) => {
+  if (isSqlEditorLanguageConfigured) {
+    return;
+  }
+  if (!hasCodeEditorLanguage(monaco, sqlEditorLanguageId)) {
+    monaco.languages.register({ id: sqlEditorLanguageId });
+  }
+  monaco.languages.setMonarchTokensProvider(sqlEditorLanguageId, {
+    ignoreCase: true,
+    keywords: sqlEditorKeywords,
+    booleans: sqlEditorBooleans,
+    constants: sqlEditorConstants,
+    tokenizer: {
+      root: [
+        [/--.*$/, "comment.sql"],
+        [/\/\*/, { token: "comment.quote.sql", next: "@comment" }],
+        [/'(?:[^']|'')*'/, "string.sql"],
+        [/"(?:""|[^"])*"/, "identifier.quote.sql"],
+        [/\b\d+(?:\.\d+)?\b/, "number.sql"],
+        [/:[A-Za-z_][\w$#]*/, "variable.bind.sql"],
+        [/[(),;]/, "delimiter.sql"],
+        [/[<>!=]=?|[-+*/%]/, "operator.sql"],
+        [
+          /[A-Za-z_][\w$#]*/,
+          {
+            cases: {
+              "@booleans": "boolean.sql",
+              // 디자인 스펙상 NULL은 숫자와 같은 색이라 number 토큰으로 분류한다.
+              "@constants": "number.sql",
+              "@keywords": "keyword.sql",
+              "@default": "identifier.sql"
+            }
+          }
+        ]
+      ],
+      comment: [
+        [/[^*/]+/, "comment.quote.sql"],
+        [/\*\//, { token: "comment.quote.sql", next: "@pop" }],
+        [/[*/]/, "comment.quote.sql"]
+      ]
+    }
+  });
+  isSqlEditorLanguageConfigured = true;
+};
+var getSqlEditorThemeRules = () => createCodeEditorThemeRules([
+  { token: "identifier.sql", cssVariable: "--color-text-secondary" },
+  { token: "identifier.quote.sql", cssVariable: "--color-text-secondary" },
+  { token: "variable.bind.sql", cssVariable: "--color-tint-foreground-orange" },
+  { token: "boolean.sql", cssVariable: "--color-text-tertiary" },
+  { token: "keyword.sql", cssVariable: "--color-tint-foreground-violet" },
+  { token: "operator.sql", cssVariable: "--color-text-secondary" },
+  { token: "number.sql", cssVariable: "--color-tint-foreground-pink" },
+  { token: "string.sql", cssVariable: "--color-tint-foreground-teal" },
+  { token: "comment.sql", cssVariable: "--color-text-disabled", fontStyle: "italic" },
+  { token: "comment.quote.sql", cssVariable: "--color-text-disabled", fontStyle: "italic" },
+  { token: "delimiter.sql", cssVariable: "--color-text-secondary" }
+]);
+
+// src/codeEditor/sqlEditor/tokens.ts
+var identifierBoundaryPattern = /[A-Za-z0-9_$#]/;
+var escapeRegExp = (value) => {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+var isProtectedOffset = (spans, start, end) => {
+  return spans.some((span) => start < span.end && end > span.start);
+};
+var getLineCommentEnd = (value, start) => {
+  const end = value.indexOf("\n", start + 2);
+  return end === -1 ? value.length : end;
+};
+var getBlockCommentEnd = (value, start) => {
+  const end = value.indexOf("*/", start + 2);
+  return end === -1 ? value.length : end + 2;
+};
+var getQuotedSpanEnd = (value, start) => {
+  const quote = value[start];
+  let index = start + 1;
+  while (index < value.length) {
+    if (value[index] === quote && value[index + 1] === quote) {
+      index += 2;
+      continue;
+    }
+    if (value[index] === quote) {
+      return index + 1;
+    }
+    index += 1;
+  }
+  return index;
+};
+var getProtectedSpans = (value) => {
+  const spans = [];
+  let index = 0;
+  while (index < value.length) {
+    const char = value[index];
+    const next = value[index + 1];
+    if (char === "-" && next === "-") {
+      const start = index;
+      index = getLineCommentEnd(value, start);
+      spans.push({ start, end: index });
+      continue;
+    }
+    if (char === "/" && next === "*") {
+      const start = index;
+      index = getBlockCommentEnd(value, start);
+      spans.push({ start, end: index });
+      continue;
+    }
+    if (char === "'" || char === '"') {
+      const start = index;
+      index = getQuotedSpanEnd(value, start);
+      spans.push({ start, end: index });
+      continue;
+    }
+    index += 1;
+  }
+  return spans;
+};
+var getLineStarts = (value) => {
+  const lineStarts = [0];
+  for (let index = 0; index < value.length; index += 1) {
+    if (value[index] === "\n") {
+      lineStarts.push(index + 1);
+    }
+  }
+  return lineStarts;
+};
+var offsetToPosition = (lineStarts, offset) => {
+  let low = 0;
+  let high = lineStarts.length - 1;
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    if ((lineStarts[mid] ?? 0) <= offset) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  const lineIndex = Math.max(0, high);
+  const lineStart = lineStarts[lineIndex] ?? 0;
+  return {
+    lineNumber: lineIndex + 1,
+    column: offset - lineStart + 1
+  };
+};
+var getRangeFromOffsets = (lineStarts, startOffset, endOffset) => {
+  const start = offsetToPosition(lineStarts, startOffset);
+  const end = offsetToPosition(lineStarts, endOffset);
+  return {
+    startLineNumber: start.lineNumber,
+    startColumn: start.column,
+    endLineNumber: end.lineNumber,
+    endColumn: end.column
+  };
+};
+var hasIdentifierBoundary = (value, startOffset, endOffset) => {
+  const before = value[startOffset - 1];
+  const after = value[endOffset];
+  return !identifierBoundaryPattern.test(before ?? "") && !identifierBoundaryPattern.test(after ?? "");
+};
+var getSearchableTokens = (tokens) => {
+  const searchableTokens = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    if (!token.match) {
+      continue;
+    }
+    const key = token.match.toLowerCase();
+    if (!searchableTokens.has(key)) {
+      searchableTokens.set(key, token);
+    }
+  }
+  return [...searchableTokens.values()].sort((a, b) => b.match.length - a.match.length);
+};
+var getSqlEditorTokens = (value, tokens) => {
+  const searchableTokens = getSearchableTokens(tokens);
+  if (!searchableTokens.length) {
+    return [];
+  }
+  const tokenByMatch = new Map(searchableTokens.map((token) => [token.match.toLowerCase(), token]));
+  const pattern = new RegExp(
+    searchableTokens.map((token) => escapeRegExp(token.match)).join("|"),
+    "gi"
+  );
+  const protectedSpans = getProtectedSpans(value);
+  const lineStarts = getLineStarts(value);
+  const parsedTokens = [];
+  let match = pattern.exec(value);
+  while (match !== null) {
+    const text = match[0];
+    const startOffset = match.index;
+    const endOffset = startOffset + text.length;
+    const token = tokenByMatch.get(text.toLowerCase());
+    if (token && hasIdentifierBoundary(value, startOffset, endOffset) && !isProtectedOffset(protectedSpans, startOffset, endOffset)) {
+      parsedTokens.push({
+        token,
+        text,
+        range: getRangeFromOffsets(lineStarts, startOffset, endOffset),
+        startOffset,
+        endOffset,
+        className: token.className
+      });
+    }
+    match = pattern.exec(value);
+  }
+  return parsedTokens;
+};
+
+// src/codeEditor/sqlEditor/useSqlEditorTokenDecorations.ts
+var isPositionInToken = (position, token) => {
+  const { range } = token;
+  if (position.lineNumber < range.startLineNumber || position.lineNumber > range.endLineNumber) {
+    return false;
+  }
+  if (position.lineNumber === range.startLineNumber && position.column < range.startColumn) {
+    return false;
+  }
+  if (position.lineNumber === range.endLineNumber && position.column >= range.endColumn) {
+    return false;
+  }
+  return true;
+};
+var useSqlEditorTokenDecorations = ({
+  displayValue,
+  tokens,
+  onTokenClick,
+  onMount
+}) => {
+  const editorRef = React2.useRef(null);
+  const monacoRef = React2.useRef(null);
+  const decorationsRef = React2.useRef(null);
+  const clickHandlerRef = React2.useRef(null);
+  const applyTokenDecorations = React2.useCallback(() => {
+    const editor = editorRef.current;
+    const monaco = monacoRef.current;
+    if (!editor || !monaco) {
+      return;
+    }
+    const parsedTokens = getSqlEditorTokens(displayValue, tokens);
+    decorationsRef.current ?? (decorationsRef.current = editor.createDecorationsCollection());
+    decorationsRef.current.set(
+      parsedTokens.map((token) => ({
+        range: new monaco.Range(
+          token.range.startLineNumber,
+          token.range.startColumn,
+          token.range.endLineNumber,
+          token.range.endColumn
+        ),
+        options: {
+          inlineClassName: token.className,
+          stickiness: monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
+        }
+      }))
+    );
+    if (clickHandlerRef.current) {
+      clickHandlerRef.current.dispose();
+      clickHandlerRef.current = null;
+    }
+    if (!onTokenClick) {
+      return;
+    }
+    clickHandlerRef.current = editor.onMouseDown((mouseEvent) => {
+      const position = mouseEvent.target.position;
+      if (!position) {
+        return;
+      }
+      const parsedToken = parsedTokens.find((token) => isPositionInToken(position, token));
+      if (!parsedToken) {
+        return;
+      }
+      onTokenClick(parsedToken.token);
+    });
+  }, [displayValue, onTokenClick, tokens]);
+  const handleMount = React2.useCallback(
+    (editor, monaco) => {
+      editorRef.current = editor;
+      monacoRef.current = monaco;
+      applyTokenDecorations();
+      onMount?.(editor, monaco);
+    },
+    [applyTokenDecorations, onMount]
+  );
+  React2.useEffect(() => {
+    applyTokenDecorations();
+  }, [applyTokenDecorations]);
+  React2.useEffect(() => {
+    return () => {
+      if (clickHandlerRef.current) {
+        clickHandlerRef.current.dispose();
+        clickHandlerRef.current = null;
+      }
+    };
+  }, []);
+  return { handleMount };
+};
+registerCodeEditorThemeRules(getSqlEditorThemeRules);
+var CodeEditorSQL = React2__namespace.forwardRef(
+  ({
+    beforeMount,
+    dbType,
+    editorClassName,
+    formatter,
+    onMount,
+    onTokenClick,
+    tokens = [],
+    ...props
+  }, ref) => {
+    const { viewMode } = useCodeEditorFormat();
+    const { sourceValue: contextValue } = useCodeEditorSource();
+    const sqlFormatter = React2__namespace.useMemo(
+      () => createSqlFormatter(dbType),
+      [dbType]
+    );
+    const surfaceFormatter = formatter === void 0 ? sqlFormatter : formatter;
+    const surfaceValue = props.value ?? contextValue ?? "";
+    const surfaceDisplayValue = getDisplayValue(surfaceValue, viewMode, surfaceFormatter);
+    useActiveFormatter(surfaceFormatter);
+    const { handleMount } = useSqlEditorTokenDecorations({
+      displayValue: surfaceDisplayValue,
+      tokens,
+      onTokenClick,
+      onMount
+    });
+    const handleBeforeMount = React2__namespace.useCallback(
+      (monaco) => {
+        defineSqlEditorLanguage(monaco);
+        beforeMount?.(monaco);
+      },
+      [beforeMount]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CodeEditor.Surface,
+      {
+        ref,
+        ...props,
+        beforeMount: handleBeforeMount,
+        editorClassName: utils.cn("exem-sql-editor-monaco", editorClassName),
+        formatter: surfaceFormatter,
+        language: sqlEditorLanguageId,
+        onMount: handleMount
+      }
+    );
+  }
+);
+CodeEditorSQL.displayName = "CodeEditor.SQL";
+
+// src/codeEditor/index.ts
+var CodeEditor2 = CodeEditor;
+CodeEditor2.JSON = CodeEditorJSON;
+CodeEditor2.SQL = CodeEditorSQL;
+
+exports.CodeEditor = CodeEditor2;
+exports.getSqlEditorTokens = getSqlEditorTokens;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map