kempo-ui 0.3.8 → 0.3.10

package/docs-src/index.page.html

@@ -53,6 +53,12 @@
           <p class="tc-muted">Container component with optional labels and border styling.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/code-editor.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Code Editor</h3>
+          <p class="tc-muted">Monaco-powered code editor with language support and theme integration.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/color-picker.html" class="card mb no-link d-b">
           <h3 class="tc-primary">ColorPicker</h3>

package/docs-src/nav.fragment.html

@@ -14,6 +14,7 @@
           <k-filter-item filter-keywords="accordion components"><a href="{{pathToRoot}}components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a href="{{pathToRoot}}components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a href="{{pathToRoot}}components/card.html">Card<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="code editor codeeditor monaco components"><a href="{{pathToRoot}}components/code-editor.html">Code Editor<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="color picker colorpicker components"><a href="{{pathToRoot}}components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="content slider components"><a href="{{pathToRoot}}components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="context state global components"><a href="{{pathToRoot}}components/context.html">Context<br><small>Component</small></a></k-filter-item>
@@ -92,6 +93,7 @@
         <a href="{{pathToRoot}}components/accordion.html">Accordion</a>
         <a href="{{pathToRoot}}components/aside.html">Aside</a>
         <a href="{{pathToRoot}}components/card.html">Card</a>
+        <a href="{{pathToRoot}}components/code-editor.html">Code Editor</a>
         <a href="{{pathToRoot}}components/color-picker.html">ColorPicker</a>
         <a href="{{pathToRoot}}components/content-slider.html">Content Slider</a>
         <a href="{{pathToRoot}}components/context.html">Context</a>

package/icons/auto_fix_high.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m800-680-38-82-82-38 82-38 38-82 38 82 82 38-82 38-38 82Zm-460 0-38-82-82-38 82-38 38-82 38 82 82 38-82 38-38 82Zm460 460-38-82-82-38 82-38 38-82 38 82 82 38-82 38-38 82ZM204-92 92-204q-12-12-12-29t12-29l446-446q12-12 29-12t29 12l112 112q12 12 12 29t-12 29L262-92q-12 12-29 12t-29-12Zm30-84 286-288-56-56-288 286 58 58Z"/></svg>

package/icons/content_copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>

package/icons/contrast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM520-163q119-15 199.5-104.5T800-480q0-123-80.5-212.5T520-797v634Z"/></svg>

package/icons/frame_source.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M344-336 200-480l144-144 56 57-87 87 87 87-56 57Zm272 0-56-57 87-87-87-87 56-57 144 144-144 144ZM200-120q-33 0-56.5-23.5T120-200v-160h80v160h160v80H200Zm400 0v-80h160v-160h80v160q0 33-23.5 56.5T760-120H600ZM120-600v-160q0-33 23.5-56.5T200-840h160v80H200v160h-80Zm640 0v-160H600v-80h160q33 0 56.5 23.5T840-760v160h-80Z"/></svg>

package/icons/fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/></svg>

package/icons/fullscreen_exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z"/></svg>

package/icons/map.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m600-120-240-84-186 72q-20 8-37-4.5T120-170v-560q0-13 7.5-23t20.5-15l212-72 240 84 186-72q20-8 37 4.5t17 33.5v560q0 13-7.5 23T812-192l-212 72Zm-40-98v-468l-160-56v468l160 56Zm80 0 120-40v-474l-120 46v468Zm-440-10 120-46v-468l-120 40v474Zm440-458v468-468Zm-320-56v468-468Z"/></svg>

package/icons/redo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M396-200q-97 0-166.5-63T160-420q0-94 69.5-157T396-640h252L544-744l56-56 200 200-200 200-56-56 104-104H396q-63 0-109.5 40T240-420q0 60 46.5 100T396-280h284v80H396Z"/></svg>

package/icons/text_decrease.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m40-200 210-560h100l210 560h-96l-51-143H187l-51 143H40Zm176-224h168l-82-232h-4l-82 232Zm384-16v-80h320v80H600Z"/></svg>

package/icons/text_increase.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m40-200 210-560h100l210 560h-96l-51-143H187l-51 143H40Zm176-224h168l-82-232h-4l-82 232Zm504 104v-120H600v-80h120v-120h80v120h120v80H800v120h-80Z"/></svg>

package/icons/undo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-200v-80h284q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l104 104-56 56-200-200 200-200 56 56-104 104h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H280Z"/></svg>

package/icons/unfold_less.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m356-160-56-56 180-180 180 180-56 56-124-124-124 124Zm124-404L300-744l56-56 124 124 124-124 56 56-180 180Z"/></svg>

package/icons/unfold_more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120 300-300l58-58 122 122 122-122 58 58-180 180ZM358-598l-58-58 180-180 180 180-58 58-122-122-122 122Z"/></svg>

package/icons/wrap_text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M588-132 440-280l148-148 56 58-50 50h96q29 0 49.5-20.5T760-390q0-29-20.5-49.5T690-460H160v-80h530q63 0 106.5 43.5T840-390q0 63-43.5 106.5T690-240h-96l50 50-56 58ZM160-240v-80h200v80H160Zm0-440v-80h640v80H160Z"/></svg>

package/llm.txt

@@ -55,6 +55,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-accordion>` `<k-accordion-header>` `<k-accordion-panel>` | `Accordion.js` | Collapsible panel groups; `for-panel` attribute links headers to panels | [accordion.html](https://dustinpoissant.github.io/kempo-ui/components/accordion.html) |
 | `<k-aside>` `<k-aside-item>` `<k-aside-label>` `<k-aside-menu>` `<k-aside-spacer>` `<k-aside-toggle>` | `Aside.js` | Sidebar/drawer; `main="push"` or `main="overlay"`, `side="left|right"` | [aside.html](https://dustinpoissant.github.io/kempo-ui/components/aside.html) |
 | `<k-card>` | `Card.js` | Bordered container; optional `label` attribute | [card.html](https://dustinpoissant.github.io/kempo-ui/components/card.html) |
+| `<k-code-editor>` | `CodeEditor.js` | Monaco-powered code editor; `value`, `language`, `controls` attributes; form-associated; theme-aware | [code-editor.html](https://dustinpoissant.github.io/kempo-ui/components/code-editor.html) |
 | `<k-color-picker>` | `ColorPicker.js` | Full color picker (hex, rgb, hsl, hsv, alpha); `value` property | [color-picker.html](https://dustinpoissant.github.io/kempo-ui/components/color-picker.html) |
 | `<k-content-slider>` | `ContentSlider.js` | Swipeable carousel | [content-slider.html](https://dustinpoissant.github.io/kempo-ui/components/content-slider.html) |
 | `<k-context>` | `Context.js` | Non-rendering state container; `set(key,value)`, `get(key)`, `delete(key)`, `clear()`, `getData()`; fires `context:create`, `context:set`, `context:delete` | [context.html](https://dustinpoissant.github.io/kempo-ui/components/context.html) |
@@ -62,7 +63,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-dropdown>` | `Dropdown.js` | Action menu with keyboard navigation | [dropdown.html](https://dustinpoissant.github.io/kempo-ui/components/dropdown.html) |
 | `<k-filter-list>` `<k-filter-item>` | `FilterList.js` `FilterItem.js` | Filter/search list; items have `filter` attribute with keywords | [filter-list.html](https://dustinpoissant.github.io/kempo-ui/components/filter-list.html) |
 | `<k-focus-capture>` | `FocusCapture.js` | Traps keyboard focus within children | [focus-capture.html](https://dustinpoissant.github.io/kempo-ui/components/focus-capture.html) |
-| `<k-html-editor>` | `HtmlEditor.js` | WYSIWYG rich text editor; `value` property | [html-editor.html](https://dustinpoissant.github.io/kempo-ui/components/html-editor.html) |
+| `<k-html-editor>` | `HtmlEditor.js` | WYSIWYG rich text editor; `value` property; `controls` attribute (`full`/`normal`/`minimal`/`none`) for built-in toolbars | [html-editor.html](https://dustinpoissant.github.io/kempo-ui/components/html-editor.html) |
 | `<k-icon>` | `Icon.js` | SVG icon; `name` (looked up in `pathsToIcons`) or `src` (direct URL); `rotation`, `direction`, `animation` attributes | [icon.html](https://dustinpoissant.github.io/kempo-ui/components/icon.html) |
 | `<k-import>` | `Import.js` | Includes external HTML fragments; `src` attribute | [import.html](https://dustinpoissant.github.io/kempo-ui/components/import.html) |
 | `<k-main>` | `Main.js` | Layout main; automatically adjusts margins when a `k-aside[main="push"]` opens | — |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -37,11 +37,11 @@
     "highlight.js": "^11.11.1",
     "js-beautify": "^1.15.4",
     "kempo-server": "^3.0.3",
-    "kempo-testing-framework": "^1.4.4",
+    "kempo-testing-framework": "^1.4.6",
     "terser": "^5.43.1"
   },
   "dependencies": {
     "@inquirer/prompts": "^8.3.0",
-    "kempo-css": "^2.1.1"
+    "kempo-css": "^2.1.9"
   }
 }

package/src/components/CodeEditor.js

@@ -0,0 +1,495 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import formatCode from '../utils/formatCode.js';
+import { getCalculatedTheme, subscribeToTheme } from '../utils/theme.js';
+
+/*
+	Default CDN URL
+*/
+const MONACO_VERSION = '0.52.2';
+const DEFAULT_MONACO_SRC = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}/min`;
+
+export default class CodeEditor extends ShadowComponent {
+	static formAssociated = true;
+
+	static properties = {
+		name: { type: String, reflect: true },
+		value: { type: String, reflect: true },
+		language: { type: String, reflect: true },
+		monacoSrc: { type: String, attribute: 'monaco-src' },
+		controls: { type: String, reflect: true },
+		editorTheme: { type: String, attribute: 'editor-theme', reflect: true },
+		hasTopToolbar: { type: Boolean, state: true },
+		hasBottomToolbar: { type: Boolean, state: true },
+		fullscreen: { type: Boolean, reflect: true },
+		wordWrap: { type: Boolean },
+		minimapEnabled: { type: Boolean }
+	};
+
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+		this.name = '';
+		this.value = '';
+		this.language = 'javascript';
+		this.monacoSrc = '';
+		this.controls = '';
+		this.controlsLoaded = false;
+		this.hasTopToolbar = false;
+		this.hasBottomToolbar = false;
+		this.monacoEditor = null;
+		this.skipValueSync = false;
+		this.editorTheme = 'auto';
+		this.wordWrap = true;
+		this.minimapEnabled = false;
+		this.fontSize = 14;
+		this.fullscreen = false;
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		if(this.hasAttribute('value')){
+			this.value = this.getAttribute('value');
+		}
+		this.slotObserver = new MutationObserver(() => this.updateToolbarVisibility());
+		this.slotObserver.observe(this, { childList: true, subtree: true });
+		this.updateToolbarVisibility();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.slotObserver?.disconnect();
+		this.monacoEditor?.dispose();
+		this.unsubscribeTheme?.();
+		if(this.fullscreen) this.exitFullscreen();
+	}
+
+	updateToolbarVisibility() {
+		const slots = new Set(Array.from(this.children).map(c => c.getAttribute('slot')));
+		const set = this.constructor.controlSets[this.controls] ?? null;
+		this.hasTopToolbar =
+			!!(set?.topLeft || set?.topRight) ||
+			['toolbar-top', 'toolbar-top-left', 'toolbar-top-right'].some(s => slots.has(s));
+		this.hasBottomToolbar =
+			!!(set?.bottomLeft || set?.bottomRight) ||
+			['toolbar-bottom', 'toolbar-bottom-left', 'toolbar-bottom-right'].some(s => slots.has(s));
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if(changedProperties.has('controls')){
+			this.updateToolbarVisibility();
+			if(this.controls && this.controls !== 'none') this.loadControls();
+		}
+		if(changedProperties.has('value') && !this.skipValueSync){
+			if(this.monacoEditor && this.monacoEditor.getValue() !== this.value){
+				this.monacoEditor.setValue(this.value);
+			}
+			this.updateFormValue();
+			this.dispatchEvent(new CustomEvent('change', {
+				detail: { value: this.value },
+				bubbles: true
+			}));
+		}
+		if(changedProperties.has('language') && this.monacoEditor){
+			const model = this.monacoEditor.getModel();
+			if(model) window.monaco.editor.setModelLanguage(model, this.language);
+			this.dispatchEvent(new CustomEvent('language-changed', { detail: { language: this.language }, bubbles: true }));
+		}
+		if(changedProperties.has('editorTheme') && this.monacoEditor){
+			window.monaco.editor.setTheme(this.resolveMonacoTheme());
+			this.dispatchEvent(new CustomEvent('editor-theme-changed', { detail: { editorTheme: this.editorTheme }, bubbles: true }));
+		}
+		if(changedProperties.has('wordWrap')){
+			this.monacoEditor?.updateOptions({ wordWrap: this.wordWrap ? 'on' : 'off' });
+			this.dispatchEvent(new CustomEvent('word-wrap-changed', { detail: { wordWrap: this.wordWrap }, bubbles: true }));
+		}
+		if(changedProperties.has('minimapEnabled')){
+			this.monacoEditor?.updateOptions({ minimap: { enabled: this.minimapEnabled } });
+			this.dispatchEvent(new CustomEvent('minimap-changed', { detail: { minimapEnabled: this.minimapEnabled }, bubbles: true }));
+		}
+		if(changedProperties.has('fullscreen')){
+			if(!this.fullscreen) this.monacoEditor?.layout({ width: 0, height: 0 });
+			requestAnimationFrame(() => this.monacoEditor?.layout());
+		}
+	}
+
+	async firstUpdated() {
+		this.monacoContainer = this.shadowRoot.querySelector('.monaco-editor-container');
+		await this.initMonaco();
+		this.dispatchEvent(new CustomEvent('ready', {
+			detail: { value: this.value },
+			bubbles: true
+		}));
+	}
+
+	/*
+		Module Loading
+	*/
+	async loadControls() {
+		if(this.controlsLoaded) return;
+		this.controlsLoaded = true;
+		const base = new URL('./codeEditorControls/', import.meta.url).href;
+		await Promise.all([
+			import(/* @vite-ignore */ `${base}FormatCode.js`),
+			import(/* @vite-ignore */ `${base}CopyCode.js`),
+			import(/* @vite-ignore */ `${base}EditorTheme.js`),
+			import(/* @vite-ignore */ `${base}Undo.js`),
+			import(/* @vite-ignore */ `${base}Redo.js`),
+			import(/* @vite-ignore */ `${base}WordWrap.js`),
+			import(/* @vite-ignore */ `${base}Minimap.js`),
+			import(/* @vite-ignore */ `${base}FindReplace.js`),
+			import(/* @vite-ignore */ `${base}FontSize.js`),
+			import(/* @vite-ignore */ `${base}FoldAll.js`),
+			import(/* @vite-ignore */ `${base}LanguageSelect.js`),
+			import(/* @vite-ignore */ `${base}Fullscreen.js`),
+			import(/* @vite-ignore */ `${base}ControlGroup.js`),
+			import(/* @vite-ignore */ `${base}ControlSpacer.js`)
+		]);
+		this.requestUpdate();
+	}
+
+	async initMonaco() {
+		if(this.monacoEditor) return;
+		if(this.monacoInitPromise) return this.monacoInitPromise;
+		this.monacoInitPromise = this._initMonaco();
+		await this.monacoInitPromise;
+		this.monacoInitPromise = null;
+	}
+
+	async _initMonaco() {
+		const src = this.monacoSrc || window.kempo?.monacoUrl || DEFAULT_MONACO_SRC;
+		await new Promise((resolve, reject) => {
+			if(window.monaco){ resolve(); return; }
+			if(window.require?.defined?.('vs/editor/editor.main')){ resolve(); return; }
+			const existing = document.querySelector(`script[src="${src}/vs/loader.js"]`);
+			if(existing){
+				existing.addEventListener('load', () => {
+					window.require.config({ paths: { vs: `${src}/vs` } });
+					window.require(['vs/editor/editor.main'], () => resolve(), reject);
+				});
+				return;
+			}
+			const script = document.createElement('script');
+			script.src = `${src}/vs/loader.js`;
+			script.onload = () => {
+				window.require.config({ paths: { vs: `${src}/vs` } });
+				window.require(['vs/editor/editor.main'], () => resolve(), reject);
+			};
+			script.onerror = reject;
+			document.head.appendChild(script);
+		});
+
+		this.monacoEditor = window.monaco.editor.create(this.monacoContainer, {
+			value: this.value,
+			language: this.language,
+			theme: this.resolveMonacoTheme(),
+			minimap: { enabled: false },
+			wordWrap: 'on',
+			fontSize: 14,
+			scrollBeyondLastLine: false,
+			automaticLayout: true,
+			tabSize: 2,
+			padding: { top: 8 }
+		});
+
+		const monacoCSS = document.querySelector('link[href*="monaco"][href*="editor.main.css"]');
+		if(monacoCSS){
+			const link = document.createElement('link');
+			link.rel = 'stylesheet';
+			link.href = monacoCSS.href;
+			this.shadowRoot.appendChild(link);
+		}
+
+		this.unsubscribeTheme = subscribeToTheme(() => {
+			if(this.monacoEditor && this.editorTheme === 'auto'){
+				window.monaco.editor.setTheme(this.resolveMonacoTheme());
+			}
+		});
+
+		this.monacoEditor.onDidChangeModelContent(() => {
+			this.skipValueSync = true;
+			this.value = this.monacoEditor.getValue();
+			this.skipValueSync = false;
+			this.updateFormValue();
+			this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true }));
+			this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value }, bubbles: true }));
+		});
+	}
+
+	/*
+		Form Integration
+	*/
+	updateFormValue() {
+		this.internals.setFormValue(this.getValue());
+	}
+
+	formResetCallback() {
+		this.value = '';
+	}
+
+	formStateRestoreCallback(state) {
+		this.value = state;
+	}
+
+	/*
+		Public Methods
+	*/
+	getValue() {
+		if(this.monacoEditor) return this.monacoEditor.getValue();
+		return this.value;
+	}
+
+	setValue(str) {
+		this.skipValueSync = true;
+		this.value = str;
+		if(this.monacoEditor) this.monacoEditor.setValue(str);
+		this.updateFormValue();
+		this.skipValueSync = false;
+		return this;
+	}
+
+	clear() {
+		return this.setValue('');
+	}
+
+	formatCode() {
+		this.monacoEditor?.getAction('editor.action.formatDocument')?.run();
+		return this;
+	}
+
+	selectAll() {
+		if(!this.monacoEditor) return this;
+		const model = this.monacoEditor.getModel();
+		if(model) this.monacoEditor.setSelection(model.getFullModelRange());
+		return this;
+	}
+
+	getSelectedText() {
+		if(!this.monacoEditor) return '';
+		return this.monacoEditor.getModel()?.getValueInRange(this.monacoEditor.getSelection()) || '';
+	}
+
+	focus() {
+		this.monacoEditor?.focus();
+		return this;
+	}
+
+	setLanguage(lang) {
+		this.language = lang;
+		return this;
+	}
+
+	setEditorTheme(theme) {
+		if(['auto', 'light', 'dark'].includes(theme)) this.editorTheme = theme;
+		return this;
+	}
+
+	copyToClipboard() {
+		navigator.clipboard.writeText(this.getValue());
+		return this;
+	}
+
+	undo() {
+		this.monacoEditor?.trigger('toolbar', 'undo');
+		return this;
+	}
+
+	redo() {
+		this.monacoEditor?.trigger('toolbar', 'redo');
+		return this;
+	}
+
+	setWordWrap(enabled) {
+		this.wordWrap = enabled;
+		return this;
+	}
+
+	setMinimap(enabled) {
+		this.minimapEnabled = enabled;
+		return this;
+	}
+
+	toggleWordWrap() {
+		return this.setWordWrap(!this.wordWrap);
+	}
+
+	toggleMinimap() {
+		return this.setMinimap(!this.minimapEnabled);
+	}
+
+	openFind() {
+		this.monacoEditor?.getAction('actions.find')?.run();
+		return this;
+	}
+
+	increaseFontSize() {
+		this.fontSize = Math.min(this.fontSize + 2, 40);
+		this.monacoEditor?.updateOptions({ fontSize: this.fontSize });
+		return this;
+	}
+
+	decreaseFontSize() {
+		this.fontSize = Math.max(this.fontSize - 2, 8);
+		this.monacoEditor?.updateOptions({ fontSize: this.fontSize });
+		return this;
+	}
+
+	foldAll() {
+		this.monacoEditor?.getAction('editor.foldAll')?.run();
+		return this;
+	}
+
+	unfoldAll() {
+		this.monacoEditor?.getAction('editor.unfoldAll')?.run();
+		return this;
+	}
+
+	enterFullscreen() {
+		this.fullscreen = true;
+		document.body.classList.add('no-scroll');
+		this.dispatchEvent(new CustomEvent('fullscreen-changed', { detail: { fullscreen: true }, bubbles: true }));
+		return this;
+	}
+
+	exitFullscreen() {
+		this.fullscreen = false;
+		document.body.classList.remove('no-scroll');
+		this.dispatchEvent(new CustomEvent('fullscreen-changed', { detail: { fullscreen: false }, bubbles: true }));
+		return this;
+	}
+
+	toggleFullscreen() {
+		return this.fullscreen ? this.exitFullscreen() : this.enterFullscreen();
+	}
+
+	/*
+		Utility Methods
+	*/
+	resolveMonacoTheme() {
+		if(this.editorTheme === 'dark') return 'vs-dark';
+		if(this.editorTheme === 'light') return 'vs';
+		return getCalculatedTheme() === 'dark' ? 'vs-dark' : 'vs';
+	}
+
+
+
+	/*
+		Rendering
+	*/
+	static controlSets = {
+		full: {
+			topLeft: html`
+				<k-cec-group>
+					<k-cec-undo></k-cec-undo>
+					<k-cec-redo></k-cec-redo>
+				</k-cec-group>
+				<k-cec-group>
+					<k-cec-format-code></k-cec-format-code>
+					<k-cec-copy-code></k-cec-copy-code>
+					<k-cec-find-replace></k-cec-find-replace>
+				</k-cec-group>
+				<k-cec-group>
+					<k-cec-word-wrap></k-cec-word-wrap>
+					<k-cec-minimap></k-cec-minimap>
+					<k-cec-fold-all></k-cec-fold-all>
+				</k-cec-group>
+				<k-cec-font-size></k-cec-font-size>
+			`,
+			topRight: html`
+				<k-cec-language></k-cec-language>
+				<k-cec-editor-theme></k-cec-editor-theme>
+				<k-cec-fullscreen></k-cec-fullscreen>
+			`,
+			bottomLeft: null,
+			bottomRight: null,
+		},
+	};
+
+	static styles = css`
+		:host {
+			display: flex;
+			flex-direction: column;
+			gap: 0;
+			height: 400px;
+			background: var(--c_bg);
+		}
+		:host([fullscreen]) {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100vw;
+			height: 100vh;
+			z-index: 10000;
+		}
+		.toolbar-top,
+		.toolbar-bottom {
+			display: flex;
+			align-items: center;
+			background: var(--bg-secondary);
+			min-height: 40px;
+		}
+		.toolbar-start {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+		}
+		.toolbar-end {
+			display: flex;
+			flex-wrap: wrap-reverse;
+			align-items: center;
+			justify-content: flex-end;
+			margin-left: auto;
+		}
+		.editor-container {
+			position: relative;
+			flex: 1;
+			min-height: 0;
+			overflow: hidden;
+		}
+		.monaco-editor-container {
+			width: 100%;
+			height: 100%;
+			box-sizing: border-box;
+			overflow: auto;
+			border: 1px solid var(--border-color);
+		}
+		[hidden] {
+			display: none !important;
+		}
+	`;
+
+	render() {
+		const set = this.constructor.controlSets[this.controls] ?? {};
+		return html`
+			${this.hasTopToolbar ? html`
+				<div class="toolbar-top bb">
+					<div class="toolbar-start">
+						<slot name="toolbar-top-left">${set.topLeft ?? ''}</slot>
+					</div>
+					<div class="toolbar-end">
+						<slot name="toolbar-top-right">${set.topRight ?? ''}</slot>
+					</div>
+				</div>
+			` : ''}
+			<div class="editor-container">
+				<div class="monaco-editor-container"></div>
+			</div>
+			${this.hasBottomToolbar ? html`
+				<div class="toolbar-bottom bt">
+					<div class="toolbar-start">
+						<slot name="toolbar-bottom-left">${set.bottomLeft ?? ''}</slot>
+					</div>
+					<div class="toolbar-end">
+						<slot name="toolbar-bottom-right">${set.bottomRight ?? ''}</slot>
+					</div>
+				</div>
+			` : ''}
+		`;
+	}
+}
+
+customElements.define('k-code-editor', CodeEditor);