@nuraly/lumenui 0.1.0 → 0.2.1

package/dist/src/components/code-editor/code-editor.component.js

@@ -15,38 +15,28 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { styles } from './code-editor.style.js';
 import { CODE_EDITOR_THEME } from './code-editor.types.js';
 import { ThemeAwareMixin } from '../../shared/theme-mixin.js';
-// Monaco Editor Imports
-import * as monaco from 'monaco-editor';
-import { registerCompletion } from 'monacopilot';
-// @ts-ignore
-import monacoStyles from 'monaco-editor/min/vs/editor/editor.main.css?inline';
-// @ts-ignore
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-// @ts-ignore
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-// @ts-ignore
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-// @ts-ignore
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-// Setup Monaco workers (client-side only)
-if (typeof self !== 'undefined') {
-    self.MonacoEnvironment = {
-        getWorker(_, label) {
-            if (label === 'typescript' || label === 'javascript') {
-                return new tsWorker();
-            }
-            if (label === 'json') {
-                return new jsonWorker();
-            }
-            if (label === 'html') {
-                return new htmlWorker();
-            }
-            return new editorWorker();
-        },
-    };
-}
+import { CodeJar } from 'codejar';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import json from 'highlight.js/lib/languages/json';
+import xml from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import sql from 'highlight.js/lib/languages/sql';
+// Register languages
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('html', xml);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('sql', sql);
 /**
- * NuralyUI Code Editor component wrapping Monaco Editor.
+ * NuralyUI Code Editor component using CodeJar — a lightweight (~2KB) code editor.
  *
  * @example
  * ```html
@@ -66,20 +56,16 @@ if (typeof self !== 'undefined') {
  * @fires nr-ready - Fired when the editor is ready
  *
  * @csspart editor-container - The container wrapping the editor
- *
- * @cssprop [--nr-code-editor-width=100%] - Width of the editor
- * @cssprop [--nr-code-editor-height=100%] - Height of the editor
- * @cssprop [--nr-code-editor-min-height=0] - Minimum height
- * @cssprop [--nr-code-editor-max-height=none] - Maximum height
- * @cssprop [--nr-code-editor-border-radius=4px] - Border radius
  */
 let NrCodeEditorElement = class NrCodeEditorElement extends ThemeAwareMixin(LitElement) {
     constructor() {
         super(...arguments);
         /** Whether editor is initialized */
         this.isEditorReady = false;
-        /** Reference to the editor container */
-        this.containerRef = createRef();
+        /** Reference to the editor element */
+        this.editorRef = createRef();
+        /** Suppress change events during programmatic updates */
+        this.suppressChange = false;
         /** Makes the editor read-only */
         this.readonly = false;
         /** Editor theme (vs, vs-dark, hc-black, hc-light) */
@@ -90,137 +76,134 @@ let NrCodeEditorElement = class NrCodeEditorElement extends ThemeAwareMixin(LitE
         this.code = '';
         /** Show line numbers */
         this.lineNumbers = true;
-        /** Show minimap */
-        this.minimap = false;
-        /** Enable word wrap */
-        this.wordWrap = false;
         /** Font size in pixels */
         this.fontSize = 13;
-        /** Enable AI completions via monacopilot */
-        this.aiCompletions = true;
-        /** API endpoint for AI completions */
-        this.completionsEndpoint = '/api/v1/copilot/completion';
-        /** Extra type definitions for Monaco IntelliSense (host-provided) */
-        this.extraTypeDefinitions = '';
+        /** Enable word wrap */
+        this.wordWrap = false;
+        /** Tab size in spaces */
+        this.tabSize = 2;
     }
     render() {
+        const isDark = this.isDarkTheme();
         return html `
-      <style>
-        ${monacoStyles}
-      </style>
-      <div class="editor-container" part="editor-container">
-        <main ${ref(this.containerRef)}></main>
+      <div class="editor-container ${isDark ? 'dark' : 'light'}" part="editor-container">
+        <div class="line-numbers-gutter" style="display: ${this.lineNumbers ? 'block' : 'none'}"></div>
+        <code
+          ${ref(this.editorRef)}
+          class="editor language-${this.language}"
+          style="font-size: ${this.fontSize}px; tab-size: ${this.tabSize}; white-space: ${this.wordWrap ? 'pre-wrap' : 'pre'};"
+        ></code>
       </div>
     `;
     }
-    /**
-     * Returns the current code contents
-     */
+    /** Returns the current code contents */
     getValue() {
         var _a, _b;
-        return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : '';
+        return (_b = (_a = this.editorRef.value) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '';
     }
-    /**
-     * Sets the editor value programmatically
-     */
+    /** Sets the editor value programmatically */
     setValue(value) {
-        if (this.editor) {
-            const cursorPosition = this.editor.getPosition();
-            this.editor.setValue(value);
-            if (cursorPosition) {
-                this.editor.setPosition(cursorPosition);
-            }
+        if (this.jar) {
+            this.suppressChange = true;
+            this.jar.updateCode(value);
+            this.suppressChange = false;
         }
     }
-    /**
-     * Updates Monaco editor options
-     */
-    setOptions(options) {
-        var _a;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.updateOptions(options);
-    }
-    /**
-     * Focus the editor
-     */
+    /** Focus the editor */
     focus() {
         var _a;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = this.editorRef.value) === null || _a === void 0 ? void 0 : _a.focus();
     }
     firstUpdated() {
-        if (!this.containerRef.value) {
-            console.error('NrCodeEditor: Container element not available');
+        if (!this.editorRef.value)
             return;
-        }
         this.initializeEditor();
     }
     initializeEditor() {
-        // Determine initial theme - prefer data-theme if no explicit theme set
-        const initialTheme = this.getInitialTheme();
-        try {
-            this.editor = monaco.editor.create(this.containerRef.value, {
-                value: this.code,
-                language: this.language,
-                theme: initialTheme,
-                fontSize: this.fontSize,
-                automaticLayout: true,
-                readOnly: this.readonly,
-                lineNumbers: this.lineNumbers ? 'on' : 'off',
-                minimap: { enabled: this.minimap },
-                wordWrap: this.wordWrap ? 'on' : 'off',
-            });
-            this.isEditorReady = true;
-        }
-        catch (error) {
-            console.error('NrCodeEditor: Failed to create editor', error);
-            return;
-        }
-        this.setupCustomIntelliSense();
-        if (this.aiCompletions) {
-            registerCompletion(monaco, this.editor, {
-                language: this.language,
-                endpoint: this.completionsEndpoint,
-            });
-        }
-        this.setupEventListeners();
-        this.setupThemeListener();
-        this.dispatchEvent(new CustomEvent('nr-ready', {
-            detail: { editor: this.editor },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    setupEventListeners() {
-        var _a;
-        if (!this.editor)
-            return;
-        // Content change events
-        (_a = this.editor.getModel()) === null || _a === void 0 ? void 0 : _a.onDidChangeContent(() => {
-            this.emit('nr-change', { value: this.getValue() });
+        const el = this.editorRef.value;
+        // Set initial content
+        el.textContent = this.code;
+        // Syntax highlighter using highlight.js
+        const highlight = (editor) => {
+            const code = editor.textContent || '';
+            const lang = this.language || 'plaintext';
+            try {
+                if (lang !== 'plaintext' && hljs.getLanguage(lang)) {
+                    editor.innerHTML = hljs.highlight(code, { language: lang }).value;
+                }
+                else {
+                    editor.innerHTML = this.escapeHtml(code);
+                }
+            }
+            catch (_a) {
+                editor.innerHTML = this.escapeHtml(code);
+            }
+        };
+        this.jar = CodeJar(el, highlight, {
+            tab: ' '.repeat(this.tabSize),
+            indentOn: /[({[]$/,
+            addClosing: true,
+            catchTab: true,
+            preserveIdent: true,
+            history: true,
+        });
+        this.isEditorReady = true;
+        // Listen for changes
+        this.jar.onUpdate((code) => {
+            if (!this.suppressChange) {
+                this.code = code;
+                this.updateLineNumbers();
+                this.emit('nr-change', { value: code });
+            }
         });
         // Keyboard events
-        this.editor.onKeyDown((e) => {
+        el.addEventListener('keydown', (e) => {
+            if (this.readonly) {
+                e.preventDefault();
+                return;
+            }
             this.emit('nr-keydown', this.createKeyEventDetail(e));
         });
-        this.editor.onKeyUp((e) => {
+        el.addEventListener('keyup', (e) => {
             this.emit('nr-keyup', this.createKeyEventDetail(e));
         });
-        // Focus events
-        this.editor.onDidFocusEditorWidget(() => this.emit('nr-focus'));
-        this.editor.onDidBlurEditorWidget(() => this.emit('nr-blur'));
+        // Focus/blur
+        el.addEventListener('focus', () => this.emit('nr-focus'));
+        el.addEventListener('blur', () => this.emit('nr-blur'));
+        // Readonly
+        if (this.readonly) {
+            el.setAttribute('contenteditable', 'false');
+        }
+        // Initial line numbers
+        this.updateLineNumbers();
+        this.emit('nr-ready', { editor: this.jar });
+    }
+    escapeHtml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    updateLineNumbers() {
+        var _a, _b, _c;
+        const gutter = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.line-numbers-gutter')) !== null && _b !== void 0 ? _b : (_c = this.renderRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.line-numbers-gutter');
+        if (!gutter || !this.lineNumbers)
+            return;
+        const code = this.getValue();
+        const lines = code.split('\n').length;
+        gutter.innerHTML = Array.from({ length: lines }, (_, i) => `<div class="line-number">${i + 1}</div>`).join('');
     }
-    /** Helper to create keyboard event detail */
     createKeyEventDetail(e) {
         return {
-            event: e.browserEvent,
-            key: e.browserEvent.key,
-            code: e.browserEvent.code,
-            ctrlKey: e.browserEvent.ctrlKey,
-            shiftKey: e.browserEvent.shiftKey,
-            altKey: e.browserEvent.altKey,
-            metaKey: e.browserEvent.metaKey,
+            event: e,
+            key: e.key,
+            code: e.code,
+            ctrlKey: e.ctrlKey,
+            shiftKey: e.shiftKey,
+            altKey: e.altKey,
+            metaKey: e.metaKey,
         };
     }
-    /** Helper to emit custom events */
     emit(eventName, detail) {
         this.dispatchEvent(new CustomEvent(eventName, {
             detail,
@@ -228,270 +211,43 @@ let NrCodeEditorElement = class NrCodeEditorElement extends ThemeAwareMixin(LitE
             composed: true,
         }));
     }
-    setupThemeListener() {
-        // The ThemeAwareMixin handles theme observation automatically
-        // We just need to apply the initial theme
-        this.applyThemeFromMixin();
-    }
-    /**
-     * Convert the mixin's currentTheme to Monaco theme
-     * Uses explicit theme prop if set, otherwise derives from data-theme
-     */
-    getMonacoThemeFromMixin() {
-        // If explicit theme prop is set, use it
-        if (this.theme) {
-            return this.theme;
-        }
-        // Use the mixin's currentTheme which handles data-theme and system preference
-        const currentTheme = this.currentTheme;
-        // Map theme values to Monaco themes
-        if (currentTheme.includes('dark')) {
-            return CODE_EDITOR_THEME.Dark;
+    isDarkTheme() {
+        var _a, _b;
+        if (this.theme === CODE_EDITOR_THEME.Dark || this.theme === CODE_EDITOR_THEME.HighContrastDark) {
+            return true;
         }
-        return CODE_EDITOR_THEME.Light;
-    }
-    /**
-     * Apply the current theme from the mixin to Monaco editor
-     */
-    applyThemeFromMixin() {
-        if (!this.isEditorReady || !this.editor)
-            return;
-        const monacoTheme = this.getMonacoThemeFromMixin();
-        // Only update if theme has changed
-        if (monacoTheme !== this.lastAppliedTheme) {
-            try {
-                monaco.editor.setTheme(monacoTheme);
-                this.lastAppliedTheme = monacoTheme;
-            }
-            catch (_a) {
-                // Ignore errors
-            }
+        if (this.theme === CODE_EDITOR_THEME.Light || this.theme === CODE_EDITOR_THEME.HighContrastLight) {
+            return false;
         }
-    }
-    /**
-     * Get the initial theme for the editor
-     * Priority: explicit theme prop > data-theme > system preference
-     */
-    getInitialTheme() {
-        return this.getMonacoThemeFromMixin();
-    }
-    setupCustomIntelliSense() {
-        const tsDefaults = monaco.languages.typescript.typescriptDefaults;
-        const jsDefaults = monaco.languages.typescript.javascriptDefaults;
-        // Add custom type definitions for both TypeScript and JavaScript
-        [tsDefaults, jsDefaults].forEach(defaults => {
-            if (this.extraTypeDefinitions) {
-                defaults.addExtraLib(this.extraTypeDefinitions, 'database-types.d.ts');
-            }
-        });
-        // Base compiler options shared between TS and JS
-        const baseCompilerOptions = {
-            target: monaco.languages.typescript.ScriptTarget.ES2020,
-            allowNonTsExtensions: true,
-            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-            module: monaco.languages.typescript.ModuleKind.CommonJS,
-            noEmit: true,
-            esModuleInterop: true,
-            allowJs: true,
-        };
-        // TypeScript-specific options
-        tsDefaults.setCompilerOptions(Object.assign(Object.assign({}, baseCompilerOptions), { jsx: monaco.languages.typescript.JsxEmit.React, reactNamespace: 'React', typeRoots: ['node_modules/@types'] }));
-        // JavaScript-specific options
-        jsDefaults.setCompilerOptions(Object.assign(Object.assign({}, baseCompilerOptions), { checkJs: false }));
-        // Register custom completion provider for Database suggestions
-        monaco.languages.registerCompletionItemProvider(['javascript', 'typescript'], {
-            provideCompletionItems: () => {
-                const suggestions = [
-                    {
-                        label: 'Database',
-                        kind: monaco.languages.CompletionItemKind.Class,
-                        insertText: 'Database',
-                        documentation: 'Static Database Client for Nuraly Database Manager',
-                        detail: 'class Database',
-                    },
-                    {
-                        label: 'Database.select',
-                        kind: monaco.languages.CompletionItemKind.Method,
-                        insertText: 'Database.select(${1:"tableName"}, {${2:}})',
-                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Select data from a table with optional criteria and relations',
-                        detail: '(method) Database.select(tableName: string, options?: SelectOptions): Promise<any>',
-                    },
-                    {
-                        label: 'Database.insert',
-                        kind: monaco.languages.CompletionItemKind.Method,
-                        insertText: 'Database.insert(${1:"tableName"}, ${2:{}})',
-                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Insert data into a table',
-                        detail: '(method) Database.insert(tableName: string, data: Record<string, any>): Promise<any>',
-                    },
-                    {
-                        label: 'Database.update',
-                        kind: monaco.languages.CompletionItemKind.Method,
-                        insertText: 'Database.update(${1:"tableName"}, ${2:{}}, ${3:{}})',
-                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Update data in a table',
-                        detail: '(method) Database.update(tableName: string, data: Record<string, any>, criteria: Record<string, any>): Promise<any>',
-                    },
-                    {
-                        label: 'Database.delete',
-                        kind: monaco.languages.CompletionItemKind.Method,
-                        insertText: 'Database.delete(${1:"tableName"}, ${2:{}})',
-                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Delete data from a table',
-                        detail: '(method) Database.delete(tableName: string, criteria: Record<string, any>): Promise<any>',
-                    },
-                    {
-                        label: 'Database.createTable',
-                        kind: monaco.languages.CompletionItemKind.Method,
-                        insertText: 'Database.createTable(${1:"tableName"}, {\n  ${2:field}: { type: ${3:"varchar"}, nullable: ${4:false} }\n})',
-                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Create a new table with specified schema',
-                        detail: '(method) Database.createTable(tableName: string, schema: TableSchema, options?: Record<string, any>): Promise<any>',
-                    },
-                    {
-                        label: 'Database.paginate',
-                        kind: monaco.languages.CompletionItemKind.Method,
-                        insertText: 'Database.paginate(${1:"tableName"}, ${2:1}, ${3:10}, ${4:{}})',
-                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Get paginated results with metadata',
-                        detail: '(method) Database.paginate(tableName: string, page?: number, pageSize?: number, options?: SelectOptions): Promise<PaginationResult<any>>',
-                    },
-                    {
-                        label: 'Database.schemaQuery',
-                        kind: monaco.languages.CompletionItemKind.Method,
-                        insertText: 'Database.schemaQuery(${1:"LIST_TABLES"}${2:, "tableName"})',
-                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Execute schema queries for database introspection',
-                        detail: '(method) Database.schemaQuery(type: string, tableName?: string): Promise<any>',
-                    },
-                    {
-                        label: 'Database.join',
-                        kind: monaco.languages.CompletionItemKind.Method,
-                        insertText: 'Database.join(${1:"mainTable"}, [\n  { table: ${2:"joinTable"}, on: ${3:"field1 = field2"}, type: ${4:"inner"} }\n], ${5:{}})',
-                        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Perform complex join queries',
-                        detail: '(method) Database.join(mainTable: string, joins: JoinDefinition[], options?: Record<string, any>): Promise<any>',
-                    },
-                ];
-                return { suggestions };
-            },
-        });
-        // Register hover provider for documentation
-        monaco.languages.registerHoverProvider(['javascript', 'typescript'], {
-            provideHover: (model, position) => {
-                const word = model.getWordAtPosition(position);
-                if (!word)
-                    return;
-                const hoverDocs = {
-                    Database: {
-                        contents: [
-                            { value: '**Database**' },
-                            { value: 'Static Database Client for Nuraly Database Manager' },
-                            { value: 'Provides a comprehensive interface for database operations including:' },
-                            { value: '- Table management (create, drop, schema operations)' },
-                            { value: '- Data operations (select, insert, update, delete)' },
-                            { value: '- Advanced queries (joins, aggregations, pagination)' },
-                            { value: '- Schema introspection and management' },
-                        ],
-                    },
-                };
-                return hoverDocs[word.word] || null;
-            },
-        });
+        return (_b = (_a = this.currentTheme) === null || _a === void 0 ? void 0 : _a.includes('dark')) !== null && _b !== void 0 ? _b : false;
     }
     updated(changedProperties) {
         var _a;
         super.updated(changedProperties);
-        if (!this.isEditorReady || !this.editor)
+        if (!this.isEditorReady || !this.jar)
             return;
-        // Apply theme from mixin on every update (handles data-theme changes)
-        this.applyThemeFromMixin();
         if (changedProperties.has('code') && this.code !== changedProperties.get('code')) {
-            const model = this.editor.getModel();
-            if (model && this.code !== this.getValue()) {
-                try {
-                    const cursorPosition = this.editor.getPosition();
-                    this.editor.setValue((_a = this.code) !== null && _a !== void 0 ? _a : '');
-                    if (cursorPosition) {
-                        this.editor.setPosition(cursorPosition);
-                    }
-                }
-                catch (_b) {
-                    // Monaco services might be temporarily unavailable
-                }
+            const current = this.getValue();
+            if (this.code !== current) {
+                this.setValue(this.code);
+                this.updateLineNumbers();
             }
         }
         if (changedProperties.has('readonly')) {
-            try {
-                this.editor.updateOptions({ readOnly: this.readonly });
-            }
-            catch (_c) {
-                // Ignore
-            }
-        }
-        if (changedProperties.has('language') && this.editor.getModel()) {
-            try {
-                monaco.editor.setModelLanguage(this.editor.getModel(), this.language || 'plaintext');
-            }
-            catch (_d) {
-                // Ignore
-            }
-        }
-        if (changedProperties.has('theme')) {
-            try {
-                monaco.editor.setTheme(this.theme);
-            }
-            catch (_e) {
-                // Ignore
-            }
-        }
-        if (changedProperties.has('fontSize')) {
-            try {
-                this.editor.updateOptions({ fontSize: this.fontSize });
-            }
-            catch (_f) {
-                // Ignore
-            }
-        }
-        if (changedProperties.has('lineNumbers')) {
-            try {
-                this.editor.updateOptions({ lineNumbers: this.lineNumbers ? 'on' : 'off' });
-            }
-            catch (_g) {
-                // Ignore
-            }
-        }
-        if (changedProperties.has('minimap')) {
-            try {
-                this.editor.updateOptions({ minimap: { enabled: this.minimap } });
-            }
-            catch (_h) {
-                // Ignore
-            }
-        }
-        if (changedProperties.has('wordWrap')) {
-            try {
-                this.editor.updateOptions({ wordWrap: this.wordWrap ? 'on' : 'off' });
-            }
-            catch (_j) {
-                // Ignore
-            }
+            (_a = this.editorRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('contenteditable', this.readonly ? 'false' : 'true');
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        // Clean up Monaco editor
-        if (this.editor) {
-            const model = this.editor.getModel();
-            this.editor.dispose();
-            model === null || model === void 0 ? void 0 : model.dispose();
-            this.editor = undefined;
+        if (this.jar) {
+            this.jar.destroy();
+            this.jar = undefined;
         }
         this.isEditorReady = false;
     }
 };
 NrCodeEditorElement.styles = styles;
+NrCodeEditorElement.useShadowDom = true;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NrCodeEditorElement.prototype, "readonly", void 0);
@@ -507,24 +263,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'line-numbers' })
 ], NrCodeEditorElement.prototype, "lineNumbers", void 0);
-__decorate([
-    property({ type: Boolean })
-], NrCodeEditorElement.prototype, "minimap", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'word-wrap' })
-], NrCodeEditorElement.prototype, "wordWrap", void 0);
 __decorate([
     property({ type: Number, attribute: 'font-size' })
 ], NrCodeEditorElement.prototype, "fontSize", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'ai-completions' })
-], NrCodeEditorElement.prototype, "aiCompletions", void 0);
-__decorate([
-    property({ type: String, attribute: 'completions-endpoint' })
-], NrCodeEditorElement.prototype, "completionsEndpoint", void 0);
+    property({ type: Boolean, attribute: 'word-wrap' })
+], NrCodeEditorElement.prototype, "wordWrap", void 0);
 __decorate([
-    property({ attribute: false })
-], NrCodeEditorElement.prototype, "extraTypeDefinitions", void 0);
+    property({ type: Number, attribute: 'tab-size' })
+], NrCodeEditorElement.prototype, "tabSize", void 0);
 NrCodeEditorElement = __decorate([
     customElement('nr-code-editor')
 ], NrCodeEditorElement);