@sqlrooms/monaco-editor 0.29.0-rc.1 → 0.29.0-rc.2

package/README.md

@@ -105,16 +105,16 @@ configureMonacoLoader({paths: {vs: 'https://unpkg.com/monaco-editor/min/vs'}});
 
 ### MonacoEditor Props
 
-| Prop      | Type                 | Default      | Description                              |
-| --------- | -------------------- | ------------ | ---------------------------------------- |
-| className | string               | ''           | CSS class name for the editor container  |
-| language  | string               | 'javascript' | The language of the editor               |
-| theme     | 'vs-dark' \| 'light' | 'vs-dark'    | The theme of the editor                  |
-| value     | string               | ''           | The value of the editor                  |
-| readOnly  | boolean              | false        | Whether the editor is read-only          |
-| options   | object               | {}           | Additional options for the editor        |
-| onMount   | function             | -            | Callback when the editor is mounted      |
-| onChange  | function             | -            | Callback when the editor content changes |
+| Prop      | Type                          | Default      | Description                              |
+| --------- | ----------------------------- | ------------ | ---------------------------------------- |
+| className | string                        | ''           | CSS class name for the editor container  |
+| language  | string                        | 'javascript' | The language of the editor               |
+| theme     | 'dark' \| 'light' \| 'system' | 'dark'       | The theme of the editor                  |
+| value     | string                        | ''           | The value of the editor                  |
+| readOnly  | boolean                       | false        | Whether the editor is read-only          |
+| options   | object                        | {}           | Additional options for the editor        |
+| onMount   | function                      | -            | Callback when the editor is mounted      |
+| onChange  | function                      | -            | Callback when the editor content changes |
 
 ### JsonMonacoEditor Props
 

package/dist/components/MarkdownMonacoEditor.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MonacoEditorProps } from './MonacoEditor';
+export type MarkdownMonacoEditorProps = Omit<MonacoEditorProps, 'language'>;
+/**
+ * A Monaco editor configured for editing Markdown files with
+ * readable dark/light theme colors for headings, links, lists, and code.
+ */
+export declare const MarkdownMonacoEditor: React.FC<MarkdownMonacoEditorProps>;
+//# sourceMappingURL=MarkdownMonacoEditor.d.ts.map

package/dist/components/MarkdownMonacoEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownMonacoEditor.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownMonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAE/D,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAcpE,CAAC"}

package/dist/components/MarkdownMonacoEditor.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MonacoEditor } from './MonacoEditor';
+/**
+ * A Monaco editor configured for editing Markdown files with
+ * readable dark/light theme colors for headings, links, lists, and code.
+ */
+export const MarkdownMonacoEditor = ({ options: userOptions, ...props }) => {
+    return (_jsx(MonacoEditor, { language: "markdown", options: {
+            wordWrap: 'on',
+            ...userOptions,
+        }, ...props }));
+};
+//# sourceMappingURL=MarkdownMonacoEditor.js.map

package/dist/components/MarkdownMonacoEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownMonacoEditor.js","sourceRoot":"","sources":["../../src/components/MarkdownMonacoEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,YAAY,EAAoB,MAAM,gBAAgB,CAAC;AAI/D;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE;YACP,QAAQ,EAAE,IAAI;YACd,GAAG,WAAW;SACf,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport {MonacoEditor, MonacoEditorProps} from './MonacoEditor';\n\nexport type MarkdownMonacoEditorProps = Omit<MonacoEditorProps, 'language'>;\n\n/**\n * A Monaco editor configured for editing Markdown files with\n * readable dark/light theme colors for headings, links, lists, and code.\n */\nexport const MarkdownMonacoEditor: React.FC<MarkdownMonacoEditorProps> = ({\n  options: userOptions,\n  ...props\n}) => {\n  return (\n    <MonacoEditor\n      language=\"markdown\"\n      options={{\n        wordWrap: 'on',\n        ...userOptions,\n      }}\n      {...props}\n    />\n  );\n};\n"]}

package/dist/components/MonacoEditor.d.ts

@@ -1,6 +1,7 @@
 import { EditorProps, OnChange, OnMount } from '@monaco-editor/react';
-import type * as Monaco from 'monaco-editor';
+import type { Theme } from '@sqlrooms/ui';
 import React from 'react';
+import type * as Monaco from 'monaco-editor';
 export interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {
     /**
      * Callback when the editor is mounted
@@ -21,11 +22,11 @@ export interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {
      */
     language?: string;
     /**
-     * The theme of the editor
+     * The theme of the editor ('dark' | 'light' | 'system')
      * Can be explicitly set or will automatically use the app theme if not provided
-     * @default 'vs-dark'
+     * @default 'dark'
      */
-    theme?: 'vs-dark' | 'light';
+    theme?: Theme;
     /**
      * The value of the editor
      */

package/dist/components/MonacoEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoEditor.d.ts","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAE5E,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAyD,MAAM,OAAO,CAAC;AAwC9E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACrE;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,oCAAoC,CAAC;CAC9D;AA0ED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkHpD,CAAC"}
+{"version":3,"file":"MonacoEditor.d.ts","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAE5E,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,KAAmC,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAmC7C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACrE;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,oCAAoC,CAAC;CAC9D;AA4ED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8FpD,CAAC"}

package/dist/components/MonacoEditor.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Editor } from '@monaco-editor/react';
-import { Spinner, cn, useTheme } from '@sqlrooms/ui';
-import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
-import { getCssColor, getJsonEditorTheme, getMenuColors, getMonospaceFont, } from '../utils/color-utils';
+import { Spinner, cn, getResolvedTheme, useTheme } from '@sqlrooms/ui';
+import { useEffect, useMemo, useRef } from 'react';
+import { getJsonEditorTheme, getMarkdownEditorTheme, getMenuColors, } from '../utils/color-utils';
+import { getCssColor, getMonospaceFont } from '@sqlrooms/utils';
 // Rendering issue fix for white rectangle appearing above text in Monaco.
 // Monaco creates a hidden textarea for IME input. If Monaco CSS loads late,
 // this textarea can briefly render as a normal white block and shift content.
@@ -35,15 +36,8 @@ function suppressMonacoTextareaFlash() {
   `;
     document.head.appendChild(style);
 }
-// Module-level singleton to track theme state
-let lastDefinedForDarkMode = null;
 function defineMonacoThemes(monaco, isDark, currentTheme) {
     suppressMonacoTextareaFlash();
-    // Only redefine if the theme mode has changed or themes haven't been defined yet
-    if (lastDefinedForDarkMode === isDark)
-        return;
-    lastDefinedForDarkMode = isDark;
-    // Define both light and dark themes with current CSS variable values
     // Light theme
     monaco.editor.defineTheme('sqlrooms-light', {
         base: 'vs',
@@ -60,6 +54,7 @@ function defineMonacoThemes(monaco, isDark, currentTheme) {
         },
     });
     monaco.editor.defineTheme('sqlrooms-json-light', getJsonEditorTheme(false));
+    monaco.editor.defineTheme('sqlrooms-markdown-light', getMarkdownEditorTheme(false));
     // Dark theme
     monaco.editor.defineTheme('sqlrooms-dark', {
         base: 'vs-dark',
@@ -76,6 +71,7 @@ function defineMonacoThemes(monaco, isDark, currentTheme) {
         },
     });
     monaco.editor.defineTheme('sqlrooms-json-dark', getJsonEditorTheme(true));
+    monaco.editor.defineTheme('sqlrooms-markdown-dark', getMarkdownEditorTheme(true));
     // Apply the correct theme variant (respects JSON-specific themes)
     monaco.editor.setTheme(currentTheme);
 }
@@ -85,6 +81,8 @@ const DEFAULT_MONACO_OPTIONS = {
     automaticLayout: true,
     fontLigatures: true,
     fixedOverflowWidgets: true,
+    fontSize: 14,
+    lineHeight: 21,
     // Prevent an initial top "reserved" area that can appear briefly while Monaco
     // computes sticky scroll layout (shows up as a blank/white rectangle above text).
     stickyScroll: { enabled: false },
@@ -92,33 +90,20 @@ const DEFAULT_MONACO_OPTIONS = {
 /**
  * A wrapper around the Monaco Editor component
  */
-export const MonacoEditor = ({ className, language = 'javascript', theme: explicitTheme, value = '', readOnly = false, onMount, onChange, options = {}, beforeMount, ...props }) => {
-    const { theme: appTheme } = useTheme();
-    // Track system dark preference without setState-in-effect
-    const systemPrefersDark = useSyncExternalStore((onStoreChange) => {
-        if (appTheme !== 'system' || typeof window === 'undefined') {
-            return () => { };
-        }
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        mediaQuery.addEventListener('change', onStoreChange);
-        return () => mediaQuery.removeEventListener('change', onStoreChange);
-    }, () => {
-        if (appTheme !== 'system' || typeof window === 'undefined')
-            return false;
-        return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }, () => false);
-    const isDark = explicitTheme === 'vs-dark'
-        ? true
-        : explicitTheme === 'light'
-            ? false
-            : appTheme === 'dark' || (appTheme === 'system' && systemPrefersDark);
+export const MonacoEditor = ({ className, language = 'javascript', value = '', readOnly = false, onMount, onChange, options = {}, beforeMount, ...props }) => {
+    const { theme } = useTheme();
+    const isDark = getResolvedTheme(theme) === 'dark';
     const monacoTheme = language === 'json'
         ? isDark
             ? 'sqlrooms-json-dark'
             : 'sqlrooms-json-light'
-        : isDark
-            ? 'sqlrooms-dark'
-            : 'sqlrooms-light';
+        : language === 'markdown'
+            ? isDark
+                ? 'sqlrooms-markdown-dark'
+                : 'sqlrooms-markdown-light'
+            : isDark
+                ? 'sqlrooms-dark'
+                : 'sqlrooms-light';
     const editorRef = useRef(null);
     const monacoRef = useRef(null);
     const handleBeforeMount = (monaco) => {

package/dist/components/MonacoEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoEditor.js","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Editor, EditorProps, OnChange, OnMount} from '@monaco-editor/react';\nimport {Spinner, cn, useTheme} from '@sqlrooms/ui';\nimport type * as Monaco from 'monaco-editor';\nimport React, {useEffect, useMemo, useRef, useSyncExternalStore} from 'react';\nimport {\n  getCssColor,\n  getJsonEditorTheme,\n  getMenuColors,\n  getMonospaceFont,\n} from '../utils/color-utils';\n\n// Rendering issue fix for white rectangle appearing above text in Monaco.\n// Monaco creates a hidden textarea for IME input. If Monaco CSS loads late,\n// this textarea can briefly render as a normal white block and shift content.\n// Force it to never participate in layout / painting.\nlet isImeTextareaStyleInjected = false;\nfunction suppressMonacoTextareaFlash() {\n  if (isImeTextareaStyleInjected) return;\n  if (typeof document === 'undefined') return;\n  isImeTextareaStyleInjected = true;\n\n  const style = document.createElement('style');\n  style.setAttribute('data-sqlrooms-monaco-ime-style', 'true');\n  style.textContent = `\n    .monaco-editor textarea.ime-text-area {\n      position: absolute !important;\n      top: 0 !important;\n      left: 0 !important;\n      width: 1px !important;\n      height: 1px !important;\n      opacity: 0 !important;\n      background: transparent !important;\n      color: transparent !important;\n      border: 0 !important;\n      padding: 0 !important;\n      margin: 0 !important;\n      pointer-events: none !important;\n      z-index: -1 !important;\n    }\n  `;\n  document.head.appendChild(style);\n}\n\nexport interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {\n  /**\n   * Callback when the editor is mounted\n   */\n  onMount?: OnMount;\n  /**\n   * Callback when the editor content changes\n   */\n  onChange?: OnChange;\n  /**\n   * CSS class name for the editor container\n   * @default ''\n   */\n  className?: string;\n  /**\n   * The language of the editor\n   * @default 'javascript'\n   */\n  language?: string;\n  /**\n   * The theme of the editor\n   * Can be explicitly set or will automatically use the app theme if not provided\n   * @default 'vs-dark'\n   */\n  theme?: 'vs-dark' | 'light';\n  /**\n   * The value of the editor\n   */\n  value?: string;\n  /**\n   * Whether the editor is read-only\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * Additional options for the editor\n   */\n  options?: Monaco.editor.IStandaloneEditorConstructionOptions;\n}\n\n// Module-level singleton to track theme state\nlet lastDefinedForDarkMode: boolean | null = null;\n\nfunction defineMonacoThemes(\n  monaco: typeof Monaco,\n  isDark: boolean,\n  currentTheme: string,\n) {\n  suppressMonacoTextareaFlash();\n\n  // Only redefine if the theme mode has changed or themes haven't been defined yet\n  if (lastDefinedForDarkMode === isDark) return;\n  lastDefinedForDarkMode = isDark;\n\n  // Define both light and dark themes with current CSS variable values\n  // Light theme\n  monaco.editor.defineTheme('sqlrooms-light', {\n    base: 'vs',\n    inherit: true,\n    rules: [],\n    colors: {\n      'editor.background': getCssColor('--background', '#ffffff'),\n      'editor.foreground': getCssColor('--foreground', '#000000'),\n      'editor.lineHighlightBackground': getCssColor('--muted', '#f5f5f5'),\n      'editorCursor.foreground': getCssColor('--primary', '#000000'),\n      'editor.selectionBackground': getCssColor('--accent', '#e3e3e3'),\n      'editorLineNumber.foreground': getCssColor(\n        '--muted-foreground',\n        '#888888',\n      ),\n      ...getMenuColors(false),\n    },\n  });\n\n  monaco.editor.defineTheme('sqlrooms-json-light', getJsonEditorTheme(false));\n\n  // Dark theme\n  monaco.editor.defineTheme('sqlrooms-dark', {\n    base: 'vs-dark',\n    inherit: true,\n    rules: [],\n    colors: {\n      'editor.background': getCssColor('--background', '#1e1e1e'),\n      'editor.foreground': getCssColor('--foreground', '#d4d4d4'),\n      'editor.lineHighlightBackground': getCssColor('--muted', '#2a2a2a'),\n      'editorCursor.foreground': getCssColor('--primary', '#ffffff'),\n      'editor.selectionBackground': getCssColor('--accent', '#264f78'),\n      'editorLineNumber.foreground': getCssColor(\n        '--muted-foreground',\n        '#858585',\n      ),\n      ...getMenuColors(true),\n    },\n  });\n\n  monaco.editor.defineTheme('sqlrooms-json-dark', getJsonEditorTheme(true));\n\n  // Apply the correct theme variant (respects JSON-specific themes)\n  monaco.editor.setTheme(currentTheme);\n}\n\nconst DEFAULT_MONACO_OPTIONS: Monaco.editor.IStandaloneEditorConstructionOptions =\n  {\n    minimap: {enabled: false},\n    scrollBeyondLastLine: false,\n    automaticLayout: true,\n    fontLigatures: true,\n    fixedOverflowWidgets: true,\n    // Prevent an initial top \"reserved\" area that can appear briefly while Monaco\n    // computes sticky scroll layout (shows up as a blank/white rectangle above text).\n    stickyScroll: {enabled: false} as any,\n  };\n/**\n * A wrapper around the Monaco Editor component\n */\nexport const MonacoEditor: React.FC<MonacoEditorProps> = ({\n  className,\n  language = 'javascript',\n  theme: explicitTheme,\n  value = '',\n  readOnly = false,\n  onMount,\n  onChange,\n  options = {},\n  beforeMount,\n  ...props\n}) => {\n  const {theme: appTheme} = useTheme();\n\n  // Track system dark preference without setState-in-effect\n  const systemPrefersDark = useSyncExternalStore(\n    (onStoreChange) => {\n      if (appTheme !== 'system' || typeof window === 'undefined') {\n        return () => {};\n      }\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n      mediaQuery.addEventListener('change', onStoreChange);\n      return () => mediaQuery.removeEventListener('change', onStoreChange);\n    },\n    () => {\n      if (appTheme !== 'system' || typeof window === 'undefined') return false;\n      return window.matchMedia('(prefers-color-scheme: dark)').matches;\n    },\n    () => false,\n  );\n\n  const isDark =\n    explicitTheme === 'vs-dark'\n      ? true\n      : explicitTheme === 'light'\n        ? false\n        : appTheme === 'dark' || (appTheme === 'system' && systemPrefersDark);\n\n  const monacoTheme =\n    language === 'json'\n      ? isDark\n        ? 'sqlrooms-json-dark'\n        : 'sqlrooms-json-light'\n      : isDark\n        ? 'sqlrooms-dark'\n        : 'sqlrooms-light';\n\n  const editorRef = useRef<any>(null);\n  const monacoRef = useRef<typeof Monaco | null>(null);\n\n  const handleBeforeMount: NonNullable<EditorProps['beforeMount']> = (\n    monaco,\n  ) => {\n    monacoRef.current = monaco;\n    defineMonacoThemes(monaco, isDark, monacoTheme);\n    beforeMount?.(monaco);\n  };\n\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    editorRef.current = editor;\n    monacoRef.current = monaco;\n\n    // Safety: in case beforeMount didn't run for any reason.\n    defineMonacoThemes(monaco, isDark, monacoTheme);\n\n    if (onMount) {\n      onMount(editor, monaco);\n    }\n  };\n\n  // Redefine themes globally (once) when theme mode changes, then apply correct variant\n  useEffect(() => {\n    if (monacoRef.current) {\n      defineMonacoThemes(monacoRef.current, isDark, monacoTheme);\n    }\n  }, [isDark, monacoTheme, language]);\n\n  // Apply readOnly option\n  useEffect(() => {\n    if (editorRef.current) {\n      editorRef.current.updateOptions({readOnly});\n    }\n  }, [readOnly]);\n\n  // Get monospace font for code editor\n  const fontFamily = getMonospaceFont();\n\n  const combinedOptions = useMemo(\n    () => ({\n      ...DEFAULT_MONACO_OPTIONS,\n      readOnly,\n      fontFamily,\n      ...options,\n    }),\n    [options, fontFamily, readOnly],\n  );\n\n  return (\n    <div className={cn('h-[300px] w-full', className)}>\n      <Editor\n        height=\"100%\"\n        width=\"100%\"\n        language={language}\n        theme={monacoTheme}\n        value={value}\n        options={combinedOptions}\n        beforeMount={handleBeforeMount}\n        onMount={handleEditorDidMount}\n        onChange={onChange}\n        loading={<Spinner />}\n        {...props}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"MonacoEditor.js","sourceRoot":"","sources":["../../src/components/MonacoEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Editor, EditorProps, OnChange, OnMount} from '@monaco-editor/react';\nimport {Spinner, cn, getResolvedTheme, useTheme} from '@sqlrooms/ui';\nimport type {Theme} from '@sqlrooms/ui';\nimport React, {useEffect, useMemo, useRef} from 'react';\nimport {\n  getJsonEditorTheme,\n  getMarkdownEditorTheme,\n  getMenuColors,\n} from '../utils/color-utils';\nimport type * as Monaco from 'monaco-editor';\nimport {getCssColor, getMonospaceFont} from '@sqlrooms/utils';\n\n// Rendering issue fix for white rectangle appearing above text in Monaco.\n// Monaco creates a hidden textarea for IME input. If Monaco CSS loads late,\n// this textarea can briefly render as a normal white block and shift content.\n// Force it to never participate in layout / painting.\nlet isImeTextareaStyleInjected = false;\nfunction suppressMonacoTextareaFlash() {\n  if (isImeTextareaStyleInjected) return;\n  if (typeof document === 'undefined') return;\n  isImeTextareaStyleInjected = true;\n\n  const style = document.createElement('style');\n  style.setAttribute('data-sqlrooms-monaco-ime-style', 'true');\n  style.textContent = `\n    .monaco-editor textarea.ime-text-area {\n      position: absolute !important;\n      top: 0 !important;\n      left: 0 !important;\n      width: 1px !important;\n      height: 1px !important;\n      opacity: 0 !important;\n      background: transparent !important;\n      color: transparent !important;\n      border: 0 !important;\n      padding: 0 !important;\n      margin: 0 !important;\n      pointer-events: none !important;\n      z-index: -1 !important;\n    }\n  `;\n  document.head.appendChild(style);\n}\n\nexport interface MonacoEditorProps extends Omit<EditorProps, 'onMount'> {\n  /**\n   * Callback when the editor is mounted\n   */\n  onMount?: OnMount;\n  /**\n   * Callback when the editor content changes\n   */\n  onChange?: OnChange;\n  /**\n   * CSS class name for the editor container\n   * @default ''\n   */\n  className?: string;\n  /**\n   * The language of the editor\n   * @default 'javascript'\n   */\n  language?: string;\n  /**\n   * The theme of the editor ('dark' | 'light' | 'system')\n   * Can be explicitly set or will automatically use the app theme if not provided\n   * @default 'dark'\n   */\n  theme?: Theme;\n  /**\n   * The value of the editor\n   */\n  value?: string;\n  /**\n   * Whether the editor is read-only\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * Additional options for the editor\n   */\n  options?: Monaco.editor.IStandaloneEditorConstructionOptions;\n}\n\nfunction defineMonacoThemes(\n  monaco: typeof Monaco,\n  isDark: boolean,\n  currentTheme: string,\n) {\n  suppressMonacoTextareaFlash();\n\n  // Light theme\n  monaco.editor.defineTheme('sqlrooms-light', {\n    base: 'vs',\n    inherit: true,\n    rules: [],\n    colors: {\n      'editor.background': getCssColor('--background', '#ffffff'),\n      'editor.foreground': getCssColor('--foreground', '#000000'),\n      'editor.lineHighlightBackground': getCssColor('--muted', '#f5f5f5'),\n      'editorCursor.foreground': getCssColor('--primary', '#000000'),\n      'editor.selectionBackground': getCssColor('--accent', '#e3e3e3'),\n      'editorLineNumber.foreground': getCssColor(\n        '--muted-foreground',\n        '#888888',\n      ),\n      ...getMenuColors(false),\n    },\n  });\n\n  monaco.editor.defineTheme('sqlrooms-json-light', getJsonEditorTheme(false));\n  monaco.editor.defineTheme(\n    'sqlrooms-markdown-light',\n    getMarkdownEditorTheme(false),\n  );\n\n  // Dark theme\n  monaco.editor.defineTheme('sqlrooms-dark', {\n    base: 'vs-dark',\n    inherit: true,\n    rules: [],\n    colors: {\n      'editor.background': getCssColor('--background', '#1e1e1e'),\n      'editor.foreground': getCssColor('--foreground', '#d4d4d4'),\n      'editor.lineHighlightBackground': getCssColor('--muted', '#2a2a2a'),\n      'editorCursor.foreground': getCssColor('--primary', '#ffffff'),\n      'editor.selectionBackground': getCssColor('--accent', '#264f78'),\n      'editorLineNumber.foreground': getCssColor(\n        '--muted-foreground',\n        '#858585',\n      ),\n      ...getMenuColors(true),\n    },\n  });\n\n  monaco.editor.defineTheme('sqlrooms-json-dark', getJsonEditorTheme(true));\n  monaco.editor.defineTheme(\n    'sqlrooms-markdown-dark',\n    getMarkdownEditorTheme(true),\n  );\n\n  // Apply the correct theme variant (respects JSON-specific themes)\n  monaco.editor.setTheme(currentTheme);\n}\n\nconst DEFAULT_MONACO_OPTIONS: Monaco.editor.IStandaloneEditorConstructionOptions =\n  {\n    minimap: {enabled: false},\n    scrollBeyondLastLine: false,\n    automaticLayout: true,\n    fontLigatures: true,\n    fixedOverflowWidgets: true,\n    fontSize: 14,\n    lineHeight: 21,\n    // Prevent an initial top \"reserved\" area that can appear briefly while Monaco\n    // computes sticky scroll layout (shows up as a blank/white rectangle above text).\n    stickyScroll: {enabled: false} as any,\n  };\n/**\n * A wrapper around the Monaco Editor component\n */\nexport const MonacoEditor: React.FC<MonacoEditorProps> = ({\n  className,\n  language = 'javascript',\n  value = '',\n  readOnly = false,\n  onMount,\n  onChange,\n  options = {},\n  beforeMount,\n  ...props\n}) => {\n  const {theme} = useTheme();\n  const isDark = getResolvedTheme(theme) === 'dark';\n\n  const monacoTheme =\n    language === 'json'\n      ? isDark\n        ? 'sqlrooms-json-dark'\n        : 'sqlrooms-json-light'\n      : language === 'markdown'\n        ? isDark\n          ? 'sqlrooms-markdown-dark'\n          : 'sqlrooms-markdown-light'\n        : isDark\n          ? 'sqlrooms-dark'\n          : 'sqlrooms-light';\n\n  const editorRef = useRef<any>(null);\n  const monacoRef = useRef<typeof Monaco | null>(null);\n\n  const handleBeforeMount: NonNullable<EditorProps['beforeMount']> = (\n    monaco,\n  ) => {\n    monacoRef.current = monaco;\n    defineMonacoThemes(monaco, isDark, monacoTheme);\n    beforeMount?.(monaco);\n  };\n\n  const handleEditorDidMount: OnMount = (editor, monaco) => {\n    editorRef.current = editor;\n    monacoRef.current = monaco;\n\n    // Safety: in case beforeMount didn't run for any reason.\n    defineMonacoThemes(monaco, isDark, monacoTheme);\n\n    if (onMount) {\n      onMount(editor, monaco);\n    }\n  };\n\n  // Redefine themes globally (once) when theme mode changes, then apply correct variant\n  useEffect(() => {\n    if (monacoRef.current) {\n      defineMonacoThemes(monacoRef.current, isDark, monacoTheme);\n    }\n  }, [isDark, monacoTheme, language]);\n\n  // Apply readOnly option\n  useEffect(() => {\n    if (editorRef.current) {\n      editorRef.current.updateOptions({readOnly});\n    }\n  }, [readOnly]);\n\n  // Get monospace font for code editor\n  const fontFamily = getMonospaceFont();\n\n  const combinedOptions = useMemo(\n    () => ({\n      ...DEFAULT_MONACO_OPTIONS,\n      readOnly,\n      fontFamily,\n      ...options,\n    }),\n    [options, fontFamily, readOnly],\n  );\n\n  return (\n    <div className={cn('h-[300px] w-full', className)}>\n      <Editor\n        height=\"100%\"\n        width=\"100%\"\n        language={language}\n        theme={monacoTheme}\n        value={value}\n        options={combinedOptions}\n        beforeMount={handleBeforeMount}\n        onMount={handleEditorDidMount}\n        onChange={onChange}\n        loading={<Spinner />}\n        {...props}\n      />\n    </div>\n  );\n};\n"]}

package/dist/index.d.ts

@@ -7,5 +7,6 @@ export type { MonacoEditorProps } from './components/MonacoEditor';
 export { configureMonacoLoader, isMonacoLoaderConfigured, ensureMonacoLoaderConfigured, type LoaderConfig, type MonacoLoaderOptions, type LoaderWorkers, } from './loader';
 export { JsonMonacoEditor } from './components/JsonMonacoEditor';
 export type { JsonMonacoEditorProps } from './components/JsonMonacoEditor';
-export { getCssColor, hslToHex, getMonospaceFont } from './utils/color-utils';
+export { MarkdownMonacoEditor } from './components/MarkdownMonacoEditor';
+export type { MarkdownMonacoEditorProps } from './components/MarkdownMonacoEditor';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAC;AACvD,YAAY,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,4BAA4B,EAC5B,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,aAAa,GACnB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC/D,YAAY,EAAC,qBAAqB,EAAC,MAAM,+BAA+B,CAAC;AAGzE,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAC;AACvD,YAAY,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,4BAA4B,EAC5B,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,aAAa,GACnB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC/D,YAAY,EAAC,qBAAqB,EAAC,MAAM,+BAA+B,CAAC;AAEzE,OAAO,EAAC,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AACvE,YAAY,EAAC,yBAAyB,EAAC,MAAM,mCAAmC,CAAC"}

package/dist/index.js

@@ -5,6 +5,5 @@
 export { MonacoEditor } from './components/MonacoEditor';
 export { configureMonacoLoader, isMonacoLoaderConfigured, ensureMonacoLoaderConfigured, } from './loader';
 export { JsonMonacoEditor } from './components/JsonMonacoEditor';
-// Export utility functions
-export { getCssColor, hslToHex, getMonospaceFont } from './utils/color-utils';
+export { MarkdownMonacoEditor } from './components/MarkdownMonacoEditor';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAC;AAGvD,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,4BAA4B,GAI7B,MAAM,UAAU,CAAC;AAElB,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAG/D,2BAA2B;AAC3B,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {MonacoEditor} from './components/MonacoEditor';\nexport type {MonacoEditorProps} from './components/MonacoEditor';\n\nexport {\n  configureMonacoLoader,\n  isMonacoLoaderConfigured,\n  ensureMonacoLoaderConfigured,\n  type LoaderConfig,\n  type MonacoLoaderOptions,\n  type LoaderWorkers,\n} from './loader';\n\nexport {JsonMonacoEditor} from './components/JsonMonacoEditor';\nexport type {JsonMonacoEditorProps} from './components/JsonMonacoEditor';\n\n// Export utility functions\nexport {getCssColor, hslToHex, getMonospaceFont} from './utils/color-utils';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAC;AAGvD,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,4BAA4B,GAI7B,MAAM,UAAU,CAAC;AAElB,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAG/D,OAAO,EAAC,oBAAoB,EAAC,MAAM,mCAAmC,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {MonacoEditor} from './components/MonacoEditor';\nexport type {MonacoEditorProps} from './components/MonacoEditor';\n\nexport {\n  configureMonacoLoader,\n  isMonacoLoaderConfigured,\n  ensureMonacoLoaderConfigured,\n  type LoaderConfig,\n  type MonacoLoaderOptions,\n  type LoaderWorkers,\n} from './loader';\n\nexport {JsonMonacoEditor} from './components/JsonMonacoEditor';\nexport type {JsonMonacoEditorProps} from './components/JsonMonacoEditor';\n\nexport {MarkdownMonacoEditor} from './components/MarkdownMonacoEditor';\nexport type {MarkdownMonacoEditorProps} from './components/MarkdownMonacoEditor';\n"]}

package/dist/utils/color-utils.d.ts

@@ -1,29 +1,17 @@
-/**
- * Converts HSL color values to Hex color string
- * @param h Hue (0-360)
- * @param s Saturation (0-100)
- * @param l Lightness (0-100)
- * @returns Hex color string (#RRGGBB)
- */
-export declare function hslToHex(h: number, s: number, l: number): string;
-/**
- * Safely gets a CSS variable and ensures it's in a format Monaco can use
- * @param variableName CSS variable name (e.g. '--background')
- * @param fallbackColor Fallback color if the variable isn't found
- * @returns A color string in a format Monaco can use (typically hex)
- */
-export declare function getCssColor(variableName: string, fallbackColor: string): string;
-/**
- * Gets a monospace font family from CSS variables or falls back to a system monospace font stack
- * @returns Monospace font family string suitable for code editors
- */
-export declare function getMonospaceFont(): string;
 /**
  * Gets Monaco editor menu theme colors based on Tailwind CSS variables
  * @param isDarkTheme Whether the current theme is dark or light
  * @returns Object with menu-related color settings for Monaco editor
  */
 export declare function getMenuColors(isDarkTheme: boolean): Record<string, string>;
+/**
+ * Generates a Monaco editor theme for Markdown editing with Tailwind colors.
+ * Provides syntax-aware highlighting for headings, code blocks, links,
+ * bold/italic, lists, block quotes, and inline HTML.
+ * @param isDarkTheme Whether the current theme is dark or light
+ * @returns A complete Monaco editor theme data object for Markdown editing
+ */
+export declare function getMarkdownEditorTheme(isDarkTheme: boolean): any;
 /**
  * Generates a Monaco editor theme specifically for JSON editing with Tailwind colors
  * @param isDarkTheme Whether the current theme is dark or light

package/dist/utils/color-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../src/utils/color-utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CA8ChE;AA0BD;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB,MAAM,CAcR;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAWzC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA+J1E;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,OAAO,GAAG,GAAG,CAqH5D"}
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../src/utils/color-utils.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA+J1E;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,OAAO,GAAG,GAAG,CAsGhE;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,OAAO,GAAG,GAAG,CAmI5D"}

package/dist/utils/color-utils.js

@@ -1,111 +1,5 @@
-/**
- * Converts HSL color values to Hex color string
- * @param h Hue (0-360)
- * @param s Saturation (0-100)
- * @param l Lightness (0-100)
- * @returns Hex color string (#RRGGBB)
- */
-export function hslToHex(h, s, l) {
-    // Convert saturation and lightness to fractions
-    s /= 100;
-    l /= 100;
-    // Calculate chroma
-    const c = (1 - Math.abs(2 * l - 1)) * s;
-    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-    const m = l - c / 2;
-    let r = 0, g = 0, b = 0;
-    if (0 <= h && h < 60) {
-        r = c;
-        g = x;
-        b = 0;
-    }
-    else if (60 <= h && h < 120) {
-        r = x;
-        g = c;
-        b = 0;
-    }
-    else if (120 <= h && h < 180) {
-        r = 0;
-        g = c;
-        b = x;
-    }
-    else if (180 <= h && h < 240) {
-        r = 0;
-        g = x;
-        b = c;
-    }
-    else if (240 <= h && h < 300) {
-        r = x;
-        g = 0;
-        b = c;
-    }
-    else if (300 <= h && h < 360) {
-        r = c;
-        g = 0;
-        b = x;
-    }
-    // Convert RGB to hex format
-    const toHex = (c) => {
-        const hex = Math.round((c + m) * 255).toString(16);
-        return hex.length === 1 ? '0' + hex : hex;
-    };
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function normalizeCssColorValue(cssValue, fallbackColor) {
-    const trimmed = cssValue.trim();
-    if (!trimmed)
-        return fallbackColor;
-    // If already a hex color, return it
-    if (trimmed.startsWith('#'))
-        return trimmed;
-    // Check if value is in HSL format (e.g. "210 40% 98%" or "222.2 84% 4.9%")
-    const hslMatch = trimmed.match(/^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/);
-    if (hslMatch && hslMatch[1] && hslMatch[2] && hslMatch[3]) {
-        const h = parseFloat(hslMatch[1]);
-        const s = parseFloat(hslMatch[2]);
-        const l = parseFloat(hslMatch[3]);
-        return hslToHex(h, s, l);
-    }
-    return fallbackColor;
-}
-/**
- * Safely gets a CSS variable and ensures it's in a format Monaco can use
- * @param variableName CSS variable name (e.g. '--background')
- * @param fallbackColor Fallback color if the variable isn't found
- * @returns A color string in a format Monaco can use (typically hex)
- */
-export function getCssColor(variableName, fallbackColor) {
-    if (typeof document === 'undefined')
-        return fallbackColor;
-    try {
-        // Get CSS variable value from current DOM
-        const cssValue = getComputedStyle(document.documentElement)
-            .getPropertyValue(variableName)
-            .trim();
-        if (!cssValue)
-            return fallbackColor;
-        return normalizeCssColorValue(cssValue, fallbackColor);
-    }
-    catch (error) {
-        console.error(`Error getting CSS variable ${variableName}:`, error);
-        return fallbackColor;
-    }
-}
-/**
- * Gets a monospace font family from CSS variables or falls back to a system monospace font stack
- * @returns Monospace font family string suitable for code editors
- */
-export function getMonospaceFont() {
-    if (typeof document === 'undefined') {
-        return 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
-    }
-    return (getComputedStyle(document.documentElement)
-        .getPropertyValue('--font-mono')
-        .trim() ||
-        'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
-    //'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
-    );
-}
+// Re-export generic color utilities from shared utils package
+import { getCssColor } from '@sqlrooms/utils';
 /**
  * Gets Monaco editor menu theme colors based on Tailwind CSS variables
  * @param isDarkTheme Whether the current theme is dark or light
@@ -184,31 +78,94 @@ export function getMenuColors(isDarkTheme) {
     }
     return result;
 }
+/**
+ * Generates a Monaco editor theme for Markdown editing with Tailwind colors.
+ * Provides syntax-aware highlighting for headings, code blocks, links,
+ * bold/italic, lists, block quotes, and inline HTML.
+ * @param isDarkTheme Whether the current theme is dark or light
+ * @returns A complete Monaco editor theme data object for Markdown editing
+ */
+export function getMarkdownEditorTheme(isDarkTheme) {
+    const background = getCssColor('--background', isDarkTheme ? '#0b1220' : '#ffffff');
+    const foreground = getCssColor('--foreground', isDarkTheme ? '#e0e6ed' : '#24292f');
+    const lineHighlight = getCssColor('--muted', isDarkTheme ? '#111a2b' : '#f5f5f5');
+    const cursor = getCssColor('--primary', isDarkTheme ? '#ffffff' : '#000000');
+    const selection = getCssColor('--accent', isDarkTheme ? '#23436b' : '#e3e3e3');
+    const lineNumbers = getCssColor('--muted-foreground', isDarkTheme ? '#8b97ab' : '#888888');
+    const heading = getCssColor('--editor-heading', isDarkTheme ? '#78AEFF' : '#0550AE');
+    const bold = isDarkTheme ? '#E0E6ED' : '#24292F';
+    const italic = isDarkTheme ? '#C987E8' : '#8250DF';
+    const link = getCssColor('--editor-link', isDarkTheme ? '#58A6FF' : '#0969DA');
+    const codeInline = isDarkTheme ? '#FFAD85' : '#DB745C';
+    const codeContent = isDarkTheme ? '#8BD5CA' : '#2B6F63';
+    const codeFence = isDarkTheme ? '#525C6A' : '#A0A8B4';
+    const listMarker = isDarkTheme ? '#F0883E' : '#CF5309';
+    const quote = isDarkTheme ? '#8b97ab' : '#6E7781';
+    const separator = isDarkTheme ? '#3D444D' : '#D0D7DE';
+    const htmlTag = isDarkTheme ? '#7CD992' : '#116329';
+    const fg = (hex) => hex.slice(1);
+    return {
+        base: isDarkTheme ? 'vs-dark' : 'vs',
+        inherit: true,
+        rules: [
+            // Headings (# to ######)
+            { token: 'keyword.md', foreground: fg(heading), fontStyle: 'bold' },
+            { token: 'keyword.table.header.md', foreground: fg(heading) },
+            // Bold **text**
+            { token: 'strong.md', foreground: fg(bold), fontStyle: 'bold' },
+            // Italic *text*
+            { token: 'emphasis.md', foreground: fg(italic), fontStyle: 'italic' },
+            // Strikethrough ~~text~~
+            { token: 'strikethrough.md', fontStyle: 'strikethrough' },
+            // Links [text](url)
+            { token: 'string.link.md', foreground: fg(link) },
+            { token: 'type.header.md', foreground: fg(link), fontStyle: 'underline' },
+            // Inline code `code`
+            { token: 'variable.md', foreground: fg(codeInline) },
+            // Fenced code block fence markers (``` lines)
+            { token: 'variable.source.md', foreground: fg(codeFence) },
+            // Fenced code block content
+            { token: 'string.md', foreground: fg(codeContent) },
+            // List markers (-, *, 1.)
+            { token: 'keyword.list.md', foreground: fg(listMarker) },
+            // Block quotes >
+            { token: 'comment.md', foreground: fg(quote), fontStyle: 'italic' },
+            { token: 'quote.md', foreground: fg(quote), fontStyle: 'italic' },
+            // Horizontal rules --- / ***
+            { token: 'keyword.hr.md', foreground: fg(separator) },
+            // HTML tags in markdown
+            { token: 'tag.md', foreground: fg(htmlTag) },
+            { token: 'tag', foreground: fg(htmlTag) },
+            { token: 'attribute.name.md', foreground: fg(heading) },
+            { token: 'attribute.value.md', foreground: fg(codeInline) },
+            // Fallback
+            { token: '', foreground: fg(foreground) },
+        ],
+        colors: {
+            'editor.background': background,
+            'editor.foreground': foreground,
+            'editor.lineHighlightBackground': lineHighlight,
+            'editorCursor.foreground': cursor,
+            'editor.selectionBackground': selection,
+            'editorLineNumber.foreground': lineNumbers,
+            ...getMenuColors(isDarkTheme),
+        },
+    };
+}
 /**
  * Generates a Monaco editor theme specifically for JSON editing with Tailwind colors
  * @param isDarkTheme Whether the current theme is dark or light
  * @returns A complete Monaco editor theme data object for JSON editing
  */
 export function getJsonEditorTheme(isDarkTheme) {
-    // Predefined pastel colors for syntax highlighting
-    // Light theme colors
-    const lightThemeColors = {
-        property: '#4B6BDF', // Soft blue for property names
-        string: '#DB745C', // Soft coral for string values
-        number: '#56A64B', // Soft green for numbers
-        keyword: '#A450B5', // Soft purple for keywords
-        punctuation: '#6E7781', // Soft gray for punctuation
-    };
-    // Dark theme colors
-    const darkThemeColors = {
-        property: '#78AEFF', // Pastel blue for property names
-        string: '#FFAD85', // Pastel coral/orange for string values
-        number: '#7CD992', // Pastel green for numbers
-        keyword: '#C987E8', // Pastel purple for keywords
-        punctuation: '#A9B1BA', // Light gray for punctuation
-    };
-    // Select the appropriate color set based on theme
-    const colors = isDarkTheme ? darkThemeColors : lightThemeColors;
+    // Get syntax colors from CSS variables with fallbacks
+    const property = getCssColor('--editor-property', isDarkTheme ? '#78AEFF' : '#4B6BDF');
+    const string = getCssColor('--editor-string', isDarkTheme ? '#FFAD85' : '#DB745C');
+    const number = getCssColor('--editor-number', isDarkTheme ? '#7CD992' : '#56A64B');
+    const keyword = getCssColor('--editor-keyword', isDarkTheme ? '#C987E8' : '#A450B5');
+    const punctuation = getCssColor('--editor-punctuation', isDarkTheme ? '#A9B1BA' : '#6E7781');
+    const comment = getCssColor('--editor-comment', isDarkTheme ? '#6A9955' : '#008000');
+    const invalid = getCssColor('--editor-invalid', isDarkTheme ? '#F44747' : '#CD3131');
     // Theme background and UI colors - read from current DOM
     const background = getCssColor('--background', isDarkTheme ? '#1E1E1E' : '#FFFFFF');
     const foreground = getCssColor('--foreground', isDarkTheme ? '#D4D4D4' : '#000000');
@@ -224,20 +181,24 @@ export function getJsonEditorTheme(isDarkTheme) {
         base: isDarkTheme ? 'vs-dark' : 'vs',
         inherit: true,
         rules: [
-            // Property keys - using pastel blue
-            { token: 'type', foreground: colors.property.slice(1) },
-            { token: 'string.key.json', foreground: colors.property.slice(1) },
-            { token: 'key', foreground: colors.property.slice(1) },
-            // String values - using pastel coral/orange
-            { token: 'string.value.json', foreground: colors.string.slice(1) },
-            { token: 'string', foreground: colors.string.slice(1) },
-            // Numbers - using pastel green
-            { token: 'number', foreground: colors.number.slice(1) },
-            // Keywords (true, false, null) - using pastel purple
-            { token: 'keyword', foreground: colors.keyword.slice(1) },
-            // Punctuation - using light gray
-            { token: 'delimiter', foreground: colors.punctuation.slice(1) },
-            { token: 'bracket', foreground: colors.punctuation.slice(1) },
+            // Property keys
+            { token: 'type', foreground: property.slice(1) },
+            { token: 'string.key.json', foreground: property.slice(1) },
+            { token: 'key', foreground: property.slice(1) },
+            // String values
+            { token: 'string.value.json', foreground: string.slice(1) },
+            { token: 'string', foreground: string.slice(1) },
+            // Numbers
+            { token: 'number', foreground: number.slice(1) },
+            // Keywords (true, false, null)
+            { token: 'keyword', foreground: keyword.slice(1) },
+            // Punctuation
+            { token: 'delimiter', foreground: punctuation.slice(1) },
+            { token: 'bracket', foreground: punctuation.slice(1) },
+            // Comments
+            { token: 'comment', foreground: comment.slice(1) },
+            // Invalid syntax
+            { token: 'invalid', foreground: invalid.slice(1) },
             // Fallbacks
             { token: '', foreground: foreground.slice(1) },
         ],

package/dist/utils/color-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-utils.js","sourceRoot":"","sources":["../../src/utils/color-utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Converts HSL color values to Hex color string\n * @param h Hue (0-360)\n * @param s Saturation (0-100)\n * @param l Lightness (0-100)\n * @returns Hex color string (#RRGGBB)\n */\nexport function hslToHex(h: number, s: number, l: number): string {\n  // Convert saturation and lightness to fractions\n  s /= 100;\n  l /= 100;\n\n  // Calculate chroma\n  const c = (1 - Math.abs(2 * l - 1)) * s;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = l - c / 2;\n  let r = 0,\n    g = 0,\n    b = 0;\n\n  if (0 <= h && h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (60 <= h && h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (120 <= h && h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (180 <= h && h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (240 <= h && h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else if (300 <= h && h < 360) {\n    r = c;\n    g = 0;\n    b = x;\n  }\n\n  // Convert RGB to hex format\n  const toHex = (c: number) => {\n    const hex = Math.round((c + m) * 255).toString(16);\n    return hex.length === 1 ? '0' + hex : hex;\n  };\n\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nfunction normalizeCssColorValue(\n  cssValue: string,\n  fallbackColor: string,\n): string {\n  const trimmed = cssValue.trim();\n  if (!trimmed) return fallbackColor;\n\n  // If already a hex color, return it\n  if (trimmed.startsWith('#')) return trimmed;\n\n  // Check if value is in HSL format (e.g. \"210 40% 98%\" or \"222.2 84% 4.9%\")\n  const hslMatch = trimmed.match(\n    /^(\\d+(?:\\.\\d+)?)\\s+(\\d+(?:\\.\\d+)?)%\\s+(\\d+(?:\\.\\d+)?)%$/,\n  );\n  if (hslMatch && hslMatch[1] && hslMatch[2] && hslMatch[3]) {\n    const h = parseFloat(hslMatch[1]);\n    const s = parseFloat(hslMatch[2]);\n    const l = parseFloat(hslMatch[3]);\n    return hslToHex(h, s, l);\n  }\n\n  return fallbackColor;\n}\n\n/**\n * Safely gets a CSS variable and ensures it's in a format Monaco can use\n * @param variableName CSS variable name (e.g. '--background')\n * @param fallbackColor Fallback color if the variable isn't found\n * @returns A color string in a format Monaco can use (typically hex)\n */\nexport function getCssColor(\n  variableName: string,\n  fallbackColor: string,\n): string {\n  if (typeof document === 'undefined') return fallbackColor;\n  try {\n    // Get CSS variable value from current DOM\n    const cssValue = getComputedStyle(document.documentElement)\n      .getPropertyValue(variableName)\n      .trim();\n\n    if (!cssValue) return fallbackColor;\n    return normalizeCssColorValue(cssValue, fallbackColor);\n  } catch (error) {\n    console.error(`Error getting CSS variable ${variableName}:`, error);\n    return fallbackColor;\n  }\n}\n\n/**\n * Gets a monospace font family from CSS variables or falls back to a system monospace font stack\n * @returns Monospace font family string suitable for code editors\n */\nexport function getMonospaceFont(): string {\n  if (typeof document === 'undefined') {\n    return 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace';\n  }\n  return (\n    getComputedStyle(document.documentElement)\n      .getPropertyValue('--font-mono')\n      .trim() ||\n    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace'\n    //'SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace'\n  );\n}\n\n/**\n * Gets Monaco editor menu theme colors based on Tailwind CSS variables\n * @param isDarkTheme Whether the current theme is dark or light\n * @returns Object with menu-related color settings for Monaco editor\n */\nexport function getMenuColors(isDarkTheme: boolean): Record<string, string> {\n  const defaultDarkColors = {\n    'editorWidget.background': '#1f1f1f',\n    'editorWidget.foreground': '#cccccc',\n    'editorWidget.border': '#454545',\n    'editorSuggestWidget.background': '#252526',\n    'list.hoverBackground': '#2a2d2e',\n    'list.highlightForeground': '#0097fb',\n    'menu.background': '#252526',\n    'menu.foreground': '#cccccc',\n    'menu.selectionBackground': '#04395e',\n    'menu.selectionForeground': '#ffffff',\n    'quickInput.background': '#252526',\n    'quickInput.foreground': '#cccccc',\n    'dropdown.background': '#252526',\n    'dropdown.foreground': '#f0f0f0',\n  };\n\n  const defaultLightColors = {\n    'editorWidget.background': '#f3f3f3',\n    'editorWidget.foreground': '#616161',\n    'editorWidget.border': '#c8c8c8',\n    'editorSuggestWidget.background': '#f3f3f3',\n    'list.hoverBackground': '#e8e8e8',\n    'list.highlightForeground': '#0066bf',\n    'menu.background': '#f3f3f3',\n    'menu.foreground': '#616161',\n    'menu.selectionBackground': '#d6ebff',\n    'menu.selectionForeground': '#333333',\n    'quickInput.background': '#f3f3f3',\n    'quickInput.foreground': '#616161',\n    'dropdown.background': '#f3f3f3',\n    'dropdown.foreground': '#616161',\n  };\n\n  // Choose base defaults based on theme\n  const defaults = isDarkTheme ? defaultDarkColors : defaultLightColors;\n  const result: Record<string, string> = {};\n\n  // Map Tailwind variables to Monaco color settings\n  if (isDarkTheme) {\n    // Dark theme mappings\n    result['editorWidget.background'] = getCssColor(\n      '--popover',\n      defaults['editorWidget.background'],\n    );\n    result['editorWidget.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['editorWidget.foreground'],\n    );\n    result['editorWidget.border'] = getCssColor(\n      '--border',\n      defaults['editorWidget.border'],\n    );\n    result['editorSuggestWidget.background'] = getCssColor(\n      '--popover',\n      defaults['editorSuggestWidget.background'],\n    );\n    result['list.hoverBackground'] = getCssColor(\n      '--accent',\n      defaults['list.hoverBackground'],\n    );\n    result['list.highlightForeground'] = getCssColor(\n      '--primary',\n      defaults['list.highlightForeground'],\n    );\n    result['menu.background'] = getCssColor(\n      '--popover',\n      defaults['menu.background'],\n    );\n    result['menu.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['menu.foreground'],\n    );\n    result['menu.selectionBackground'] = getCssColor(\n      '--accent',\n      defaults['menu.selectionBackground'],\n    );\n    result['menu.selectionForeground'] = getCssColor(\n      '--accent-foreground',\n      defaults['menu.selectionForeground'],\n    );\n    result['quickInput.background'] = getCssColor(\n      '--popover',\n      defaults['quickInput.background'],\n    );\n    result['quickInput.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['quickInput.foreground'],\n    );\n    result['dropdown.background'] = getCssColor(\n      '--popover',\n      defaults['dropdown.background'],\n    );\n    result['dropdown.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['dropdown.foreground'],\n    );\n  } else {\n    // Light theme mappings\n    result['editorWidget.background'] = getCssColor(\n      '--popover',\n      defaults['editorWidget.background'],\n    );\n    result['editorWidget.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['editorWidget.foreground'],\n    );\n    result['editorWidget.border'] = getCssColor(\n      '--border',\n      defaults['editorWidget.border'],\n    );\n    result['editorSuggestWidget.background'] = getCssColor(\n      '--popover',\n      defaults['editorSuggestWidget.background'],\n    );\n    result['list.hoverBackground'] = getCssColor(\n      '--accent',\n      defaults['list.hoverBackground'],\n    );\n    result['list.highlightForeground'] = getCssColor(\n      '--primary',\n      defaults['list.highlightForeground'],\n    );\n    result['menu.background'] = getCssColor(\n      '--popover',\n      defaults['menu.background'],\n    );\n    result['menu.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['menu.foreground'],\n    );\n    result['menu.selectionBackground'] = getCssColor(\n      '--accent',\n      defaults['menu.selectionBackground'],\n    );\n    result['menu.selectionForeground'] = getCssColor(\n      '--accent-foreground',\n      defaults['menu.selectionForeground'],\n    );\n    result['quickInput.background'] = getCssColor(\n      '--popover',\n      defaults['quickInput.background'],\n    );\n    result['quickInput.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['quickInput.foreground'],\n    );\n    result['dropdown.background'] = getCssColor(\n      '--popover',\n      defaults['dropdown.background'],\n    );\n    result['dropdown.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['dropdown.foreground'],\n    );\n  }\n\n  return result;\n}\n\n/**\n * Generates a Monaco editor theme specifically for JSON editing with Tailwind colors\n * @param isDarkTheme Whether the current theme is dark or light\n * @returns A complete Monaco editor theme data object for JSON editing\n */\nexport function getJsonEditorTheme(isDarkTheme: boolean): any {\n  // Predefined pastel colors for syntax highlighting\n  // Light theme colors\n  const lightThemeColors = {\n    property: '#4B6BDF', // Soft blue for property names\n    string: '#DB745C', // Soft coral for string values\n    number: '#56A64B', // Soft green for numbers\n    keyword: '#A450B5', // Soft purple for keywords\n    punctuation: '#6E7781', // Soft gray for punctuation\n  };\n\n  // Dark theme colors\n  const darkThemeColors = {\n    property: '#78AEFF', // Pastel blue for property names\n    string: '#FFAD85', // Pastel coral/orange for string values\n    number: '#7CD992', // Pastel green for numbers\n    keyword: '#C987E8', // Pastel purple for keywords\n    punctuation: '#A9B1BA', // Light gray for punctuation\n  };\n\n  // Select the appropriate color set based on theme\n  const colors = isDarkTheme ? darkThemeColors : lightThemeColors;\n\n  // Theme background and UI colors - read from current DOM\n  const background = getCssColor(\n    '--background',\n    isDarkTheme ? '#1E1E1E' : '#FFFFFF',\n  );\n  const foreground = getCssColor(\n    '--foreground',\n    isDarkTheme ? '#D4D4D4' : '#000000',\n  );\n  const selection = getCssColor(\n    '--accent',\n    isDarkTheme ? '#264F78' : '#ADD6FF',\n  );\n  const lineHighlight = getCssColor(\n    '--muted',\n    isDarkTheme ? '#2A2A2A' : '#F5F5F5',\n  );\n  const lineNumbers = getCssColor(\n    '--muted-foreground',\n    isDarkTheme ? '#858585' : '#888888',\n  );\n  const cursor = getCssColor('--primary', isDarkTheme ? '#FFFFFF' : '#000000');\n\n  // Menu colors\n  const menuBackground = getCssColor(\n    '--popover',\n    isDarkTheme ? '#1C2233' : '#F3F3F3',\n  );\n  const menuForeground = getCssColor(\n    '--popover-foreground',\n    isDarkTheme ? '#FFFFFF' : '#616161',\n  );\n  const menuSeparator = getCssColor(\n    '--border',\n    isDarkTheme ? '#39435E' : '#C8C8C8',\n  );\n\n  return {\n    base: isDarkTheme ? 'vs-dark' : 'vs',\n    inherit: true,\n    rules: [\n      // Property keys - using pastel blue\n      {token: 'type', foreground: colors.property.slice(1)},\n      {token: 'string.key.json', foreground: colors.property.slice(1)},\n      {token: 'key', foreground: colors.property.slice(1)},\n\n      // String values - using pastel coral/orange\n      {token: 'string.value.json', foreground: colors.string.slice(1)},\n      {token: 'string', foreground: colors.string.slice(1)},\n\n      // Numbers - using pastel green\n      {token: 'number', foreground: colors.number.slice(1)},\n\n      // Keywords (true, false, null) - using pastel purple\n      {token: 'keyword', foreground: colors.keyword.slice(1)},\n\n      // Punctuation - using light gray\n      {token: 'delimiter', foreground: colors.punctuation.slice(1)},\n      {token: 'bracket', foreground: colors.punctuation.slice(1)},\n\n      // Fallbacks\n      {token: '', foreground: foreground.slice(1)},\n    ],\n    colors: {\n      // Editor colors\n      'editor.background': background,\n      'editor.foreground': foreground,\n      'editor.selectionBackground': selection,\n      'editor.lineHighlightBackground': lineHighlight,\n      'editorLineNumber.foreground': lineNumbers,\n      'editorCursor.foreground': cursor,\n\n      // Widget and UI colors\n      'editorWidget.background': menuBackground,\n      'editorWidget.foreground': menuForeground,\n      'editorWidget.border': menuSeparator,\n      'editorSuggestWidget.background': menuBackground,\n      'editorSuggestWidget.foreground': menuForeground,\n      'editorSuggestWidget.border': menuSeparator,\n\n      // Menu colors\n      'menu.background': menuBackground,\n      'menu.foreground': menuForeground,\n      'menu.selectionBackground': selection,\n      'menu.selectionForeground': menuForeground,\n      'menu.separatorBackground': menuSeparator,\n\n      // Additional UI elements\n      'list.hoverBackground': lineHighlight,\n      'list.activeSelectionBackground': selection,\n      'quickInput.background': menuBackground,\n      'quickInput.foreground': menuForeground,\n    },\n  };\n}\n"]}
+{"version":3,"file":"color-utils.js","sourceRoot":"","sources":["../../src/utils/color-utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Re-export generic color utilities from shared utils package\nimport {getCssColor} from '@sqlrooms/utils';\n\n/**\n * Gets Monaco editor menu theme colors based on Tailwind CSS variables\n * @param isDarkTheme Whether the current theme is dark or light\n * @returns Object with menu-related color settings for Monaco editor\n */\nexport function getMenuColors(isDarkTheme: boolean): Record<string, string> {\n  const defaultDarkColors = {\n    'editorWidget.background': '#1f1f1f',\n    'editorWidget.foreground': '#cccccc',\n    'editorWidget.border': '#454545',\n    'editorSuggestWidget.background': '#252526',\n    'list.hoverBackground': '#2a2d2e',\n    'list.highlightForeground': '#0097fb',\n    'menu.background': '#252526',\n    'menu.foreground': '#cccccc',\n    'menu.selectionBackground': '#04395e',\n    'menu.selectionForeground': '#ffffff',\n    'quickInput.background': '#252526',\n    'quickInput.foreground': '#cccccc',\n    'dropdown.background': '#252526',\n    'dropdown.foreground': '#f0f0f0',\n  };\n\n  const defaultLightColors = {\n    'editorWidget.background': '#f3f3f3',\n    'editorWidget.foreground': '#616161',\n    'editorWidget.border': '#c8c8c8',\n    'editorSuggestWidget.background': '#f3f3f3',\n    'list.hoverBackground': '#e8e8e8',\n    'list.highlightForeground': '#0066bf',\n    'menu.background': '#f3f3f3',\n    'menu.foreground': '#616161',\n    'menu.selectionBackground': '#d6ebff',\n    'menu.selectionForeground': '#333333',\n    'quickInput.background': '#f3f3f3',\n    'quickInput.foreground': '#616161',\n    'dropdown.background': '#f3f3f3',\n    'dropdown.foreground': '#616161',\n  };\n\n  // Choose base defaults based on theme\n  const defaults = isDarkTheme ? defaultDarkColors : defaultLightColors;\n  const result: Record<string, string> = {};\n\n  // Map Tailwind variables to Monaco color settings\n  if (isDarkTheme) {\n    // Dark theme mappings\n    result['editorWidget.background'] = getCssColor(\n      '--popover',\n      defaults['editorWidget.background'],\n    );\n    result['editorWidget.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['editorWidget.foreground'],\n    );\n    result['editorWidget.border'] = getCssColor(\n      '--border',\n      defaults['editorWidget.border'],\n    );\n    result['editorSuggestWidget.background'] = getCssColor(\n      '--popover',\n      defaults['editorSuggestWidget.background'],\n    );\n    result['list.hoverBackground'] = getCssColor(\n      '--accent',\n      defaults['list.hoverBackground'],\n    );\n    result['list.highlightForeground'] = getCssColor(\n      '--primary',\n      defaults['list.highlightForeground'],\n    );\n    result['menu.background'] = getCssColor(\n      '--popover',\n      defaults['menu.background'],\n    );\n    result['menu.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['menu.foreground'],\n    );\n    result['menu.selectionBackground'] = getCssColor(\n      '--accent',\n      defaults['menu.selectionBackground'],\n    );\n    result['menu.selectionForeground'] = getCssColor(\n      '--accent-foreground',\n      defaults['menu.selectionForeground'],\n    );\n    result['quickInput.background'] = getCssColor(\n      '--popover',\n      defaults['quickInput.background'],\n    );\n    result['quickInput.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['quickInput.foreground'],\n    );\n    result['dropdown.background'] = getCssColor(\n      '--popover',\n      defaults['dropdown.background'],\n    );\n    result['dropdown.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['dropdown.foreground'],\n    );\n  } else {\n    // Light theme mappings\n    result['editorWidget.background'] = getCssColor(\n      '--popover',\n      defaults['editorWidget.background'],\n    );\n    result['editorWidget.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['editorWidget.foreground'],\n    );\n    result['editorWidget.border'] = getCssColor(\n      '--border',\n      defaults['editorWidget.border'],\n    );\n    result['editorSuggestWidget.background'] = getCssColor(\n      '--popover',\n      defaults['editorSuggestWidget.background'],\n    );\n    result['list.hoverBackground'] = getCssColor(\n      '--accent',\n      defaults['list.hoverBackground'],\n    );\n    result['list.highlightForeground'] = getCssColor(\n      '--primary',\n      defaults['list.highlightForeground'],\n    );\n    result['menu.background'] = getCssColor(\n      '--popover',\n      defaults['menu.background'],\n    );\n    result['menu.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['menu.foreground'],\n    );\n    result['menu.selectionBackground'] = getCssColor(\n      '--accent',\n      defaults['menu.selectionBackground'],\n    );\n    result['menu.selectionForeground'] = getCssColor(\n      '--accent-foreground',\n      defaults['menu.selectionForeground'],\n    );\n    result['quickInput.background'] = getCssColor(\n      '--popover',\n      defaults['quickInput.background'],\n    );\n    result['quickInput.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['quickInput.foreground'],\n    );\n    result['dropdown.background'] = getCssColor(\n      '--popover',\n      defaults['dropdown.background'],\n    );\n    result['dropdown.foreground'] = getCssColor(\n      '--popover-foreground',\n      defaults['dropdown.foreground'],\n    );\n  }\n\n  return result;\n}\n\n/**\n * Generates a Monaco editor theme for Markdown editing with Tailwind colors.\n * Provides syntax-aware highlighting for headings, code blocks, links,\n * bold/italic, lists, block quotes, and inline HTML.\n * @param isDarkTheme Whether the current theme is dark or light\n * @returns A complete Monaco editor theme data object for Markdown editing\n */\nexport function getMarkdownEditorTheme(isDarkTheme: boolean): any {\n  const background = getCssColor(\n    '--background',\n    isDarkTheme ? '#0b1220' : '#ffffff',\n  );\n  const foreground = getCssColor(\n    '--foreground',\n    isDarkTheme ? '#e0e6ed' : '#24292f',\n  );\n  const lineHighlight = getCssColor(\n    '--muted',\n    isDarkTheme ? '#111a2b' : '#f5f5f5',\n  );\n  const cursor = getCssColor('--primary', isDarkTheme ? '#ffffff' : '#000000');\n  const selection = getCssColor(\n    '--accent',\n    isDarkTheme ? '#23436b' : '#e3e3e3',\n  );\n  const lineNumbers = getCssColor(\n    '--muted-foreground',\n    isDarkTheme ? '#8b97ab' : '#888888',\n  );\n\n  const heading = getCssColor(\n    '--editor-heading',\n    isDarkTheme ? '#78AEFF' : '#0550AE',\n  );\n  const bold = isDarkTheme ? '#E0E6ED' : '#24292F';\n  const italic = isDarkTheme ? '#C987E8' : '#8250DF';\n  const link = getCssColor(\n    '--editor-link',\n    isDarkTheme ? '#58A6FF' : '#0969DA',\n  );\n  const codeInline = isDarkTheme ? '#FFAD85' : '#DB745C';\n  const codeContent = isDarkTheme ? '#8BD5CA' : '#2B6F63';\n  const codeFence = isDarkTheme ? '#525C6A' : '#A0A8B4';\n  const listMarker = isDarkTheme ? '#F0883E' : '#CF5309';\n  const quote = isDarkTheme ? '#8b97ab' : '#6E7781';\n  const separator = isDarkTheme ? '#3D444D' : '#D0D7DE';\n  const htmlTag = isDarkTheme ? '#7CD992' : '#116329';\n\n  const fg = (hex: string) => hex.slice(1);\n\n  return {\n    base: isDarkTheme ? 'vs-dark' : 'vs',\n    inherit: true,\n    rules: [\n      // Headings (# to ######)\n      {token: 'keyword.md', foreground: fg(heading), fontStyle: 'bold'},\n      {token: 'keyword.table.header.md', foreground: fg(heading)},\n\n      // Bold **text**\n      {token: 'strong.md', foreground: fg(bold), fontStyle: 'bold'},\n\n      // Italic *text*\n      {token: 'emphasis.md', foreground: fg(italic), fontStyle: 'italic'},\n\n      // Strikethrough ~~text~~\n      {token: 'strikethrough.md', fontStyle: 'strikethrough'},\n\n      // Links [text](url)\n      {token: 'string.link.md', foreground: fg(link)},\n      {token: 'type.header.md', foreground: fg(link), fontStyle: 'underline'},\n\n      // Inline code `code`\n      {token: 'variable.md', foreground: fg(codeInline)},\n\n      // Fenced code block fence markers (``` lines)\n      {token: 'variable.source.md', foreground: fg(codeFence)},\n\n      // Fenced code block content\n      {token: 'string.md', foreground: fg(codeContent)},\n\n      // List markers (-, *, 1.)\n      {token: 'keyword.list.md', foreground: fg(listMarker)},\n\n      // Block quotes >\n      {token: 'comment.md', foreground: fg(quote), fontStyle: 'italic'},\n      {token: 'quote.md', foreground: fg(quote), fontStyle: 'italic'},\n\n      // Horizontal rules --- / ***\n      {token: 'keyword.hr.md', foreground: fg(separator)},\n\n      // HTML tags in markdown\n      {token: 'tag.md', foreground: fg(htmlTag)},\n      {token: 'tag', foreground: fg(htmlTag)},\n      {token: 'attribute.name.md', foreground: fg(heading)},\n      {token: 'attribute.value.md', foreground: fg(codeInline)},\n\n      // Fallback\n      {token: '', foreground: fg(foreground)},\n    ],\n    colors: {\n      'editor.background': background,\n      'editor.foreground': foreground,\n      'editor.lineHighlightBackground': lineHighlight,\n      'editorCursor.foreground': cursor,\n      'editor.selectionBackground': selection,\n      'editorLineNumber.foreground': lineNumbers,\n      ...getMenuColors(isDarkTheme),\n    },\n  };\n}\n\n/**\n * Generates a Monaco editor theme specifically for JSON editing with Tailwind colors\n * @param isDarkTheme Whether the current theme is dark or light\n * @returns A complete Monaco editor theme data object for JSON editing\n */\nexport function getJsonEditorTheme(isDarkTheme: boolean): any {\n  // Get syntax colors from CSS variables with fallbacks\n  const property = getCssColor(\n    '--editor-property',\n    isDarkTheme ? '#78AEFF' : '#4B6BDF',\n  );\n  const string = getCssColor(\n    '--editor-string',\n    isDarkTheme ? '#FFAD85' : '#DB745C',\n  );\n  const number = getCssColor(\n    '--editor-number',\n    isDarkTheme ? '#7CD992' : '#56A64B',\n  );\n  const keyword = getCssColor(\n    '--editor-keyword',\n    isDarkTheme ? '#C987E8' : '#A450B5',\n  );\n  const punctuation = getCssColor(\n    '--editor-punctuation',\n    isDarkTheme ? '#A9B1BA' : '#6E7781',\n  );\n  const comment = getCssColor(\n    '--editor-comment',\n    isDarkTheme ? '#6A9955' : '#008000',\n  );\n  const invalid = getCssColor(\n    '--editor-invalid',\n    isDarkTheme ? '#F44747' : '#CD3131',\n  );\n\n  // Theme background and UI colors - read from current DOM\n  const background = getCssColor(\n    '--background',\n    isDarkTheme ? '#1E1E1E' : '#FFFFFF',\n  );\n  const foreground = getCssColor(\n    '--foreground',\n    isDarkTheme ? '#D4D4D4' : '#000000',\n  );\n  const selection = getCssColor(\n    '--accent',\n    isDarkTheme ? '#264F78' : '#ADD6FF',\n  );\n  const lineHighlight = getCssColor(\n    '--muted',\n    isDarkTheme ? '#2A2A2A' : '#F5F5F5',\n  );\n  const lineNumbers = getCssColor(\n    '--muted-foreground',\n    isDarkTheme ? '#858585' : '#888888',\n  );\n  const cursor = getCssColor('--primary', isDarkTheme ? '#FFFFFF' : '#000000');\n\n  // Menu colors\n  const menuBackground = getCssColor(\n    '--popover',\n    isDarkTheme ? '#1C2233' : '#F3F3F3',\n  );\n  const menuForeground = getCssColor(\n    '--popover-foreground',\n    isDarkTheme ? '#FFFFFF' : '#616161',\n  );\n  const menuSeparator = getCssColor(\n    '--border',\n    isDarkTheme ? '#39435E' : '#C8C8C8',\n  );\n\n  return {\n    base: isDarkTheme ? 'vs-dark' : 'vs',\n    inherit: true,\n    rules: [\n      // Property keys\n      {token: 'type', foreground: property.slice(1)},\n      {token: 'string.key.json', foreground: property.slice(1)},\n      {token: 'key', foreground: property.slice(1)},\n\n      // String values\n      {token: 'string.value.json', foreground: string.slice(1)},\n      {token: 'string', foreground: string.slice(1)},\n\n      // Numbers\n      {token: 'number', foreground: number.slice(1)},\n\n      // Keywords (true, false, null)\n      {token: 'keyword', foreground: keyword.slice(1)},\n\n      // Punctuation\n      {token: 'delimiter', foreground: punctuation.slice(1)},\n      {token: 'bracket', foreground: punctuation.slice(1)},\n\n      // Comments\n      {token: 'comment', foreground: comment.slice(1)},\n\n      // Invalid syntax\n      {token: 'invalid', foreground: invalid.slice(1)},\n\n      // Fallbacks\n      {token: '', foreground: foreground.slice(1)},\n    ],\n    colors: {\n      // Editor colors\n      'editor.background': background,\n      'editor.foreground': foreground,\n      'editor.selectionBackground': selection,\n      'editor.lineHighlightBackground': lineHighlight,\n      'editorLineNumber.foreground': lineNumbers,\n      'editorCursor.foreground': cursor,\n\n      // Widget and UI colors\n      'editorWidget.background': menuBackground,\n      'editorWidget.foreground': menuForeground,\n      'editorWidget.border': menuSeparator,\n      'editorSuggestWidget.background': menuBackground,\n      'editorSuggestWidget.foreground': menuForeground,\n      'editorSuggestWidget.border': menuSeparator,\n\n      // Menu colors\n      'menu.background': menuBackground,\n      'menu.foreground': menuForeground,\n      'menu.selectionBackground': selection,\n      'menu.selectionForeground': menuForeground,\n      'menu.separatorBackground': menuSeparator,\n\n      // Additional UI elements\n      'list.hoverBackground': lineHighlight,\n      'list.activeSelectionBackground': selection,\n      'quickInput.background': menuBackground,\n      'quickInput.foreground': menuForeground,\n    },\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/monaco-editor",
-  "version": "0.29.0-rc.1",
+  "version": "0.29.0-rc.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -10,7 +10,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sqlrooms/sqlrooms.git"
+    "url": "git+https://github.com/sqlrooms/sqlrooms.git"
   },
   "files": [
     "dist"
@@ -20,8 +20,9 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@sqlrooms/ui": "0.29.0-rc.1",
-    "monaco-editor": "^0.55.1"
+    "@sqlrooms/ui": "0.29.0-rc.2",
+    "@sqlrooms/utils": "0.29.0-rc.2",
+    "monaco-editor": "^0.55.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -34,5 +35,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "69f127fd34bd7f2ce3d75d6098dbf8c1f5ab50f3"
+  "gitHead": "5d511631992c1af8852ea79ced488867aad4a555"
 }