@nonoun/native-codemirror 0.2.4 → 0.2.5

package/dist/codemirror-element-DqgpO8qM.js

@@ -0,0 +1,563 @@
+import { EditorView as e, drawSelection as t, highlightActiveLine as n, highlightActiveLineGutter as r, highlightSpecialChars as i, keymap as a, lineNumbers as o, placeholder as s } from "@codemirror/view";
+import { HighlightStyle as c, bracketMatching as l, foldGutter as u, foldKeymap as d, indentOnInput as f, syntaxHighlighting as p } from "@codemirror/language";
+import { tags as m } from "@lezer/highlight";
+import { defaultKeymap as h, history as g, historyKeymap as _ } from "@codemirror/commands";
+import { autocompletion as v, closeBrackets as y, closeBracketsKeymap as b, completionKeymap as x } from "@codemirror/autocomplete";
+import { Compartment as S, EditorState as C } from "@codemirror/state";
+import { NativeElement as w, createDisabledEffect as T, signal as E } from "@nonoun/native-ui";
+/**
+* NativeUI CodeMirror Theme
+*
+* Dark theme inspired by one-dark, designed to harmonize with the
+* @nonoun/native-ui OKLCH design system. Uses EditorView.theme()
+* with { dark: true } and HighlightStyle.define() for syntax tokens.
+*
+* All colors flow through --n-code-* CSS custom properties (defined in
+* codemirror.css). When native-ui foundation CSS is loaded, tokens like
+* --n-body and --n-ink provide automatic theme integration. Without it,
+* the one-dark hex fallbacks apply. Consumers can override any
+* --n-code-* var directly on .cm-editor.
+*/
+var D = "var(--n-code-bg, #282c34)", O = "var(--n-code-bg-raised, #21252b)", k = "var(--n-code-text, #abb2bf)", A = "var(--n-code-text-muted, #7d8799)", j = "var(--n-code-cursor, #528bff)", M = "var(--n-code-selection, #3E4451)", N = "var(--n-code-line-active, #2c313a)", P = "var(--n-code-bracket, #515a6b)", F = "var(--n-code-border, #3E4451)", I = "var(--n-code-button, #3E4451)", L = "var(--n-code-keyword, #c678dd)", R = "var(--n-code-string, #98c379)", z = "var(--n-code-function, #61afef)", B = "var(--n-code-variable, #e06c75)", V = "var(--n-code-type, #e5c07b)", H = "var(--n-code-operator, #56b6c2)", U = "var(--n-code-number, #d19a66)";
+const W = e.theme({
+	"&": {
+		color: k,
+		backgroundColor: D,
+		fontSize: "14px",
+		fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, monospace"
+	},
+	".cm-content": {
+		caretColor: j,
+		padding: "4px 0"
+	},
+	"&.cm-focused .cm-cursor": {
+		borderLeftColor: j,
+		borderLeftWidth: "2px"
+	},
+	"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: M },
+	".cm-activeLine": { backgroundColor: N },
+	".cm-gutters": {
+		backgroundColor: O,
+		color: A,
+		borderRight: "none",
+		paddingRight: "4px"
+	},
+	".cm-activeLineGutter": {
+		backgroundColor: N,
+		color: k
+	},
+	".cm-lineNumbers .cm-gutterElement": {
+		padding: "0 8px 0 16px",
+		minWidth: "40px"
+	},
+	".cm-foldGutter .cm-gutterElement": {
+		padding: "0 4px",
+		cursor: "pointer"
+	},
+	"&.cm-focused .cm-matchingBracket": {
+		backgroundColor: P,
+		outline: `1px solid ${P}`
+	},
+	"&.cm-focused .cm-nonmatchingBracket": { color: B },
+	".cm-searchMatch": {
+		backgroundColor: "var(--n-code-search, rgba(229, 192, 123, 0.25))",
+		outline: "1px solid var(--n-code-search-outline, rgba(229, 192, 123, 0.4))"
+	},
+	".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "var(--n-code-search-active, rgba(97, 175, 239, 0.3))" },
+	".cm-tooltip": {
+		backgroundColor: O,
+		color: k,
+		border: `1px solid ${F}`,
+		borderRadius: "6px",
+		boxShadow: "var(--n-code-shadow, 0 4px 16px rgba(0, 0, 0, 0.3))"
+	},
+	".cm-tooltip .cm-tooltip-arrow::before": {
+		borderTopColor: F,
+		borderBottomColor: F
+	},
+	".cm-tooltip .cm-tooltip-arrow::after": {
+		borderTopColor: O,
+		borderBottomColor: O
+	},
+	".cm-tooltip-autocomplete": {
+		"& > ul": {
+			fontFamily: "inherit",
+			maxHeight: "240px"
+		},
+		"& > ul > li": { padding: "4px 8px" },
+		"& > ul > li[aria-selected]": {
+			backgroundColor: M,
+			color: k
+		}
+	},
+	".cm-panels": {
+		backgroundColor: O,
+		color: k
+	},
+	".cm-panels.cm-panels-top": { borderBottom: `1px solid ${F}` },
+	".cm-panels.cm-panels-bottom": { borderTop: `1px solid ${F}` },
+	".cm-panel input, .cm-panel button, .cm-panel select": { fontSize: "inherit" },
+	".cm-panel input": {
+		backgroundColor: D,
+		color: k,
+		border: `1px solid ${F}`,
+		borderRadius: "4px",
+		padding: "2px 6px"
+	},
+	".cm-panel button": {
+		backgroundColor: I,
+		color: k,
+		border: "none",
+		borderRadius: "4px",
+		padding: "2px 8px",
+		cursor: "pointer"
+	},
+	".cm-fat-cursor .cm-cursor": {
+		display: "block",
+		backgroundColor: `${j}77`,
+		borderLeft: "none",
+		width: "0.5em"
+	},
+	".cm-selectionLayer .cm-selectionBackground": { backgroundColor: `${M}80` },
+	".cm-foldPlaceholder": {
+		backgroundColor: "transparent",
+		border: "none",
+		color: A
+	}
+}, { dark: !0 }), G = c.define([
+	{
+		tag: m.comment,
+		color: A,
+		fontStyle: "italic"
+	},
+	{
+		tag: m.lineComment,
+		color: A,
+		fontStyle: "italic"
+	},
+	{
+		tag: m.blockComment,
+		color: A,
+		fontStyle: "italic"
+	},
+	{
+		tag: m.docComment,
+		color: A,
+		fontStyle: "italic"
+	},
+	{
+		tag: m.keyword,
+		color: L
+	},
+	{
+		tag: m.controlKeyword,
+		color: L
+	},
+	{
+		tag: m.operatorKeyword,
+		color: L
+	},
+	{
+		tag: m.definitionKeyword,
+		color: L
+	},
+	{
+		tag: m.moduleKeyword,
+		color: L
+	},
+	{
+		tag: m.string,
+		color: R
+	},
+	{
+		tag: m.special(m.string),
+		color: R
+	},
+	{
+		tag: m.regexp,
+		color: R
+	},
+	{
+		tag: m.escape,
+		color: H
+	},
+	{
+		tag: m.character,
+		color: R
+	},
+	{
+		tag: m.function(m.definition(m.variableName)),
+		color: z
+	},
+	{
+		tag: m.function(m.variableName),
+		color: z
+	},
+	{
+		tag: m.variableName,
+		color: B
+	},
+	{
+		tag: m.definition(m.variableName),
+		color: B
+	},
+	{
+		tag: m.propertyName,
+		color: B
+	},
+	{
+		tag: m.definition(m.propertyName),
+		color: B
+	},
+	{
+		tag: m.typeName,
+		color: V
+	},
+	{
+		tag: m.className,
+		color: V
+	},
+	{
+		tag: m.namespace,
+		color: V
+	},
+	{
+		tag: m.macroName,
+		color: V
+	},
+	{
+		tag: m.annotation,
+		color: V
+	},
+	{
+		tag: m.number,
+		color: U
+	},
+	{
+		tag: m.integer,
+		color: U
+	},
+	{
+		tag: m.float,
+		color: U
+	},
+	{
+		tag: m.bool,
+		color: U
+	},
+	{
+		tag: m.null,
+		color: U
+	},
+	{
+		tag: m.atom,
+		color: U
+	},
+	{
+		tag: m.operator,
+		color: H
+	},
+	{
+		tag: m.punctuation,
+		color: k
+	},
+	{
+		tag: m.paren,
+		color: k
+	},
+	{
+		tag: m.squareBracket,
+		color: k
+	},
+	{
+		tag: m.brace,
+		color: k
+	},
+	{
+		tag: m.derefOperator,
+		color: k
+	},
+	{
+		tag: m.separator,
+		color: k
+	},
+	{
+		tag: m.url,
+		color: H,
+		textDecoration: "underline"
+	},
+	{
+		tag: m.link,
+		color: H
+	},
+	{
+		tag: m.labelName,
+		color: B
+	},
+	{
+		tag: m.tagName,
+		color: B
+	},
+	{
+		tag: m.attributeName,
+		color: U
+	},
+	{
+		tag: m.attributeValue,
+		color: R
+	},
+	{
+		tag: m.angleBracket,
+		color: k
+	},
+	{
+		tag: m.self,
+		color: B
+	},
+	{
+		tag: m.processingInstruction,
+		color: A
+	},
+	{
+		tag: m.meta,
+		color: A
+	},
+	{
+		tag: m.heading,
+		color: B,
+		fontWeight: "bold"
+	},
+	{
+		tag: m.heading1,
+		color: B,
+		fontWeight: "bold"
+	},
+	{
+		tag: m.heading2,
+		color: B,
+		fontWeight: "bold"
+	},
+	{
+		tag: m.heading3,
+		color: B,
+		fontWeight: "bold"
+	},
+	{
+		tag: m.emphasis,
+		fontStyle: "italic"
+	},
+	{
+		tag: m.strong,
+		fontWeight: "bold"
+	},
+	{
+		tag: m.strikethrough,
+		textDecoration: "line-through"
+	},
+	{
+		tag: m.invalid,
+		color: "var(--n-code-invalid, #ffffff)",
+		backgroundColor: B
+	}
+]), K = p(G);
+var q = class extends w {
+	static observedAttributes = [
+		"value",
+		"placeholder",
+		"readonly",
+		"disabled",
+		"line-numbers",
+		"line-wrapping",
+		"tab-size"
+	];
+	#e;
+	#t = null;
+	#n = E(!1);
+	#r = E(!1);
+	#i = E("");
+	#a = E(2);
+	#o = E(!0);
+	#s = E(!1);
+	#c = E([]);
+	#l = new S();
+	#u = new S();
+	#d = new S();
+	#f = new S();
+	#p = new S();
+	#m = new S();
+	#h = "";
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get value() {
+		return this.#t ? this.#t.state.doc.toString() : this.getAttribute("value") ?? "";
+	}
+	set value(e) {
+		this.#t && this.#t.state.doc.toString() !== e && this.#t.dispatch({ changes: {
+			from: 0,
+			to: this.#t.state.doc.length,
+			insert: e
+		} });
+	}
+	get editorView() {
+		return this.#t;
+	}
+	/** Additional CodeMirror extensions (language modes, etc.). */
+	get extensions() {
+		return this.#c.value;
+	}
+	set extensions(e) {
+		this.#c.value = e;
+	}
+	get readOnly() {
+		return this.#r.value;
+	}
+	set readOnly(e) {
+		this.#r.value = e, this.toggleAttribute("readonly", e);
+	}
+	get disabled() {
+		return this.#n.value;
+	}
+	set disabled(e) {
+		this.#n.value = e, this.toggleAttribute("disabled", e);
+	}
+	get placeholder() {
+		return this.#i.value;
+	}
+	set placeholder(e) {
+		this.#i.value = e, this.setAttribute("placeholder", e);
+	}
+	focus() {
+		this.#t?.focus();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "value":
+					this.#t && this.#t.state.doc.toString() !== (n ?? "") && this.#t.dispatch({ changes: {
+						from: 0,
+						to: this.#t.state.doc.length,
+						insert: n ?? ""
+					} });
+					break;
+				case "placeholder":
+					this.#i.value = n ?? "";
+					break;
+				case "readonly":
+					this.#r.value = n !== null;
+					break;
+				case "disabled":
+					this.#n.value = n !== null;
+					break;
+				case "line-numbers":
+					this.#o.value = n !== "false";
+					break;
+				case "line-wrapping":
+					this.#s.value = n !== null;
+					break;
+				case "tab-size":
+					this.#a.value = n === null ? 2 : parseInt(n, 10) || 2;
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setup() {
+		super.setup(), this.#n.value = this.hasAttribute("disabled"), this.#r.value = this.hasAttribute("readonly"), this.#i.value = this.getAttribute("placeholder") ?? "", this.#o.value = this.getAttribute("line-numbers") !== "false", this.#s.value = this.hasAttribute("line-wrapping");
+		let t = this.getAttribute("tab-size");
+		t && (this.#a.value = parseInt(t, 10) || 2);
+		let n = this.#g();
+		this.#h = n, this.#_(n), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(T(this, this.#n, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
+			let t = this.#r.value || this.#n.value;
+			this.#t && this.#t.dispatch({ effects: this.#l.reconfigure([C.readOnly.of(t), e.editable.of(!t)]) });
+		}), this.addEffect(() => {
+			let e = this.#i.value;
+			this.#t && this.#t.dispatch({ effects: this.#u.reconfigure(e ? s(e) : []) });
+		}), this.addEffect(() => {
+			let e = this.#c.value;
+			this.#t && this.#t.dispatch({ effects: this.#d.reconfigure(e) });
+		}), this.addEffect(() => {
+			let e = this.#o.value;
+			this.#t && this.#t.dispatch({ effects: this.#f.reconfigure(e ? [
+				o(),
+				u(),
+				r()
+			] : []) });
+		}), this.addEffect(() => {
+			let t = this.#s.value;
+			this.#t && this.#t.dispatch({ effects: this.#p.reconfigure(t ? e.lineWrapping : []) });
+		}), this.addEffect(() => {
+			let e = this.#a.value;
+			this.#t && this.#t.dispatch({ effects: this.#m.reconfigure(C.tabSize.of(e)) });
+		});
+	}
+	teardown() {
+		this.#t?.destroy(), this.#t = null, super.teardown();
+	}
+	#g() {
+		let e = this.querySelector("script[type=\"text/plain\"]");
+		if (e) {
+			let t = e.textContent ?? "";
+			return e.remove(), t.replace(/^\n/, "");
+		}
+		return this.getAttribute("value") ?? "";
+	}
+	#_(c) {
+		let p = this.#r.value || this.#n.value, m = this.#i.value, S = this.#o.value, w = this.#s.value, T = this.#a.value, E = [
+			W,
+			K,
+			i(),
+			t(),
+			f(),
+			g(),
+			l(),
+			y(),
+			v(),
+			n(),
+			a.of([
+				...b,
+				...h,
+				..._,
+				...d,
+				...x
+			]),
+			this.#l.of([C.readOnly.of(p), e.editable.of(!p)]),
+			this.#u.of(m ? s(m) : []),
+			this.#d.of(this.#c.value),
+			this.#f.of(S ? [
+				o(),
+				u(),
+				r()
+			] : []),
+			this.#p.of(w ? e.lineWrapping : []),
+			this.#m.of(C.tabSize.of(T)),
+			e.updateListener.of((e) => {
+				if (e.docChanged) {
+					let t = e.state.doc.toString();
+					this.dispatchEvent(new CustomEvent("native:input", {
+						bubbles: !0,
+						composed: !0,
+						detail: { value: t }
+					}));
+				}
+				if (e.focusChanged && !e.view.hasFocus) {
+					let t = e.state.doc.toString();
+					t !== this.#h && (this.#h = t, this.dispatchEvent(new CustomEvent("native:change", {
+						bubbles: !0,
+						composed: !0,
+						detail: { value: t }
+					})));
+				}
+			})
+		];
+		this.#t = new e({
+			state: C.create({
+				doc: c,
+				extensions: E
+			}),
+			parent: this,
+			root: this.ownerDocument
+		});
+	}
+};
+export { W as i, G as n, K as r, q as t };

package/dist/codemirror-element.d.ts

@@ -0,0 +1,42 @@
+/**
+ * <native-codemirror> Custom Element
+ *
+ * Declarative wrapper around CodeMirror 6 for the NativeUI ecosystem.
+ * Provides reactive attribute-driven config, event dispatch, and
+ * lifecycle management around a themed EditorView.
+ *
+ * @attr {string}  value        - Document content
+ * @attr {string}  placeholder  - Placeholder text for empty editor
+ * @attr {boolean} readonly     - Disable editing (still selectable)
+ * @attr {boolean} disabled     - Full disabled state
+ * @attr {boolean} line-numbers - Show line numbers (default: true)
+ * @attr {boolean} line-wrapping - Enable soft line wrapping
+ * @attr {number}  tab-size     - Tab size (default: 2)
+ * @fires native:input  - On every document change, detail: { value }
+ * @fires native:change - On blur (final commit), detail: { value }
+ */
+import type { Extension } from '@codemirror/state';
+import { NativeElement } from '@nonoun/native-ui';
+import { EditorView } from '@codemirror/view';
+export declare class NCodemirror extends NativeElement {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    get value(): string;
+    set value(val: string);
+    get editorView(): EditorView | null;
+    /** Additional CodeMirror extensions (language modes, etc.). */
+    get extensions(): Extension[];
+    set extensions(val: Extension[]);
+    get readOnly(): boolean;
+    set readOnly(val: boolean);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get placeholder(): string;
+    set placeholder(val: string);
+    focus(): void;
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    setup(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=codemirror-element.d.ts.map

package/dist/codemirror-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codemirror-element.d.ts","sourceRoot":"","sources":["../src/codemirror-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAgC,MAAM,mBAAmB,CAAC;AAEhF,OAAO,EACL,UAAU,EAQX,MAAM,kBAAkB,CAAC;AAgB1B,qBAAa,WAAY,SAAQ,aAAa;;IAC5C,MAAM,CAAC,kBAAkB,WAGvB;;IAgCF,IAAI,KAAK,IAAI,MAAM,CAGlB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EASpB;IAED,IAAI,UAAU,IAAI,UAAU,GAAG,IAAI,CAElC;IAED,+DAA+D;IAC/D,IAAI,UAAU,IAAI,SAAS,EAAE,CAE5B;IAED,IAAI,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,EAE9B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,WAAW,CAAC,GAAG,EAAE,MAAM,EAG1B;IAEQ,KAAK,IAAI,IAAI;IAMtB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAqCpF,KAAK,IAAI,IAAI;IAmGb,QAAQ,IAAI,IAAI;CAiGjB"}

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { NTheme, NHighlightStyle, NSyntaxHighlighting } from './theme.ts';
 export { NBaseExtensions } from './base-extensions.ts';
 export { createEditorView } from './factory.ts';
 export type { CreateEditorOptions } from './factory.ts';
+export { NCodemirror } from './codemirror-element.ts';
 export { EditorView, keymap, Decoration, ViewPlugin, WidgetType, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, } from '@codemirror/view';
 export type { DecorationSet, ViewUpdate } from '@codemirror/view';
 export { EditorState, Compartment, StateField, StateEffect } from '@codemirror/state';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMxD,OAAO,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtF,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhE,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAMzF,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAMlC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtD,OAAO,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtF,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhE,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAMzF,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAMlC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/native-codemirror.css

@@ -15,6 +15,26 @@
  */
 
 @layer ui {
+  /* -----------------------------------------------------------------------
+   * Host element — <native-codemirror>
+   * --------------------------------------------------------------------- */
+
+  :where(native-codemirror) {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--n-radius, 0.5rem);
+  }
+
+  :where(native-codemirror) :where(.cm-editor) {
+    height: 100%;
+  }
+
+  :where(native-codemirror)[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
   /* -----------------------------------------------------------------------
    * Editor root — color bridge vars
    * --------------------------------------------------------------------- */
@@ -33,7 +53,7 @@
     /* Interactive */
     --n-code-cursor:          var(--n-surface-accent, #528bff);
     --n-code-selection:       var(--n-color-neutral-300, #3E4451);
-    --n-code-line-active:     var(--n-color-neutral-200, #2c313a);
+    --n-code-line-active:     var(--n-color-neutral-200-scrim, #2c313a) !important;
     --n-code-bracket:         var(--n-color-neutral-600, #515a6b);
     --n-code-accent:          var(--n-surface-accent, #61afef);
 

package/dist/native-codemirror.js

@@ -1,381 +1,41 @@
-import { Decoration as e, EditorView as t, EditorView as n, ViewPlugin as r, WidgetType as i, drawSelection as a, drawSelection as o, highlightActiveLine as s, highlightActiveLine as c, highlightActiveLineGutter as ee, highlightActiveLineGutter as te, highlightSpecialChars as ne, keymap as re, keymap as ie, lineNumbers as ae, lineNumbers as oe } from "@codemirror/view";
-import { HighlightStyle as l, HighlightStyle as se, bracketMatching as u, bracketMatching as ce, foldGutter as d, foldGutter as f, foldKeymap as p, indentOnInput as le, indentOnInput as ue, syntaxHighlighting as de, syntaxHighlighting as fe, syntaxTree as pe } from "@codemirror/language";
-import { tags as me, tags as m } from "@lezer/highlight";
-import { defaultKeymap as he, defaultKeymap as h, history as g, history as _, historyKeymap as v, historyKeymap as y, redo as b, undo as x } from "@codemirror/commands";
-import { autocompletion as S, autocompletion as C, closeBrackets as w, closeBrackets as T, closeBracketsKeymap as E, closeBracketsKeymap as D, completionKeymap as O, completionKeymap as k } from "@codemirror/autocomplete";
-import { Compartment as A, EditorState as j, EditorState as M, StateEffect as N, StateField as ge } from "@codemirror/state";
+import { i as e, n as t, r as n, t as r } from "./codemirror-element-DqgpO8qM.js";
+import { Decoration as i, EditorView as a, EditorView as o, ViewPlugin as s, WidgetType as c, drawSelection as l, drawSelection as u, highlightActiveLine as d, highlightActiveLine as f, highlightActiveLineGutter as p, highlightActiveLineGutter as m, highlightSpecialChars as h, keymap as g, keymap as _, lineNumbers as v, lineNumbers as y } from "@codemirror/view";
+import { HighlightStyle as b, bracketMatching as x, bracketMatching as S, foldGutter as C, foldGutter as w, foldKeymap as T, indentOnInput as E, indentOnInput as D, syntaxHighlighting as O, syntaxTree as k } from "@codemirror/language";
+import { tags as A } from "@lezer/highlight";
+import { defaultKeymap as j, defaultKeymap as M, history as N, history as P, historyKeymap as F, historyKeymap as I, redo as L, undo as R } from "@codemirror/commands";
+import { autocompletion as z, autocompletion as B, closeBrackets as V, closeBrackets as H, closeBracketsKeymap as U, closeBracketsKeymap as W, completionKeymap as G, completionKeymap as K } from "@codemirror/autocomplete";
+import { Compartment as q, EditorState as J, EditorState as Y, StateEffect as X, StateField as Z } from "@codemirror/state";
 /**
-* NativeUI CodeMirror Theme
+* Base extension set shared by all NativeUI CodeMirror instances.
 *
-* Dark theme inspired by one-dark, designed to harmonize with the
-* @nonoun/native-ui OKLCH design system. Uses EditorView.theme()
-* with { dark: true } and HighlightStyle.define() for syntax tokens.
-*
-* All colors flow through --n-code-* CSS custom properties (defined in
-* codemirror.css). When native-ui foundation CSS is loaded, tokens like
-* --n-body and --n-ink provide automatic theme integration. Without it,
-* the one-dark hex fallbacks apply. Consumers can override any
-* --n-code-* var directly on .cm-editor.
+* Includes:
+* - Default, history, close-brackets, fold, and completion keymaps
+* - Undo/redo history
+* - Bracket matching and auto-close
+* - Autocompletion
+* - Line numbers with fold gutter
+* - Active line + gutter highlighting
+* - Selection drawing and special character highlighting
+* - Indent on input
 */
-var P = "var(--n-code-bg, #282c34)", F = "var(--n-code-bg-raised, #21252b)", I = "var(--n-code-text, #abb2bf)", L = "var(--n-code-text-muted, #7d8799)", R = "var(--n-code-cursor, #528bff)", z = "var(--n-code-selection, #3E4451)", B = "var(--n-code-line-active, #2c313a)", V = "var(--n-code-bracket, #515a6b)", H = "var(--n-code-border, #3E4451)", _e = "var(--n-code-button, #3E4451)", U = "var(--n-code-keyword, #c678dd)", W = "var(--n-code-string, #98c379)", G = "var(--n-code-function, #61afef)", K = "var(--n-code-variable, #e06c75)", q = "var(--n-code-type, #e5c07b)", J = "var(--n-code-operator, #56b6c2)", Y = "var(--n-code-number, #d19a66)";
-const X = n.theme({
-	"&": {
-		color: I,
-		backgroundColor: P,
-		fontSize: "14px",
-		fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, monospace"
-	},
-	".cm-content": {
-		caretColor: R,
-		padding: "4px 0"
-	},
-	"&.cm-focused .cm-cursor": {
-		borderLeftColor: R,
-		borderLeftWidth: "2px"
-	},
-	"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: z },
-	".cm-activeLine": { backgroundColor: B },
-	".cm-gutters": {
-		backgroundColor: F,
-		color: L,
-		borderRight: "none",
-		paddingRight: "4px"
-	},
-	".cm-activeLineGutter": {
-		backgroundColor: B,
-		color: I
-	},
-	".cm-lineNumbers .cm-gutterElement": {
-		padding: "0 8px 0 16px",
-		minWidth: "40px"
-	},
-	".cm-foldGutter .cm-gutterElement": {
-		padding: "0 4px",
-		cursor: "pointer"
-	},
-	"&.cm-focused .cm-matchingBracket": {
-		backgroundColor: V,
-		outline: `1px solid ${V}`
-	},
-	"&.cm-focused .cm-nonmatchingBracket": { color: K },
-	".cm-searchMatch": {
-		backgroundColor: "var(--n-code-search, rgba(229, 192, 123, 0.25))",
-		outline: "1px solid var(--n-code-search-outline, rgba(229, 192, 123, 0.4))"
-	},
-	".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "var(--n-code-search-active, rgba(97, 175, 239, 0.3))" },
-	".cm-tooltip": {
-		backgroundColor: F,
-		color: I,
-		border: `1px solid ${H}`,
-		borderRadius: "6px",
-		boxShadow: "var(--n-code-shadow, 0 4px 16px rgba(0, 0, 0, 0.3))"
-	},
-	".cm-tooltip .cm-tooltip-arrow::before": {
-		borderTopColor: H,
-		borderBottomColor: H
-	},
-	".cm-tooltip .cm-tooltip-arrow::after": {
-		borderTopColor: F,
-		borderBottomColor: F
-	},
-	".cm-tooltip-autocomplete": {
-		"& > ul": {
-			fontFamily: "inherit",
-			maxHeight: "240px"
-		},
-		"& > ul > li": { padding: "4px 8px" },
-		"& > ul > li[aria-selected]": {
-			backgroundColor: z,
-			color: I
-		}
-	},
-	".cm-panels": {
-		backgroundColor: F,
-		color: I
-	},
-	".cm-panels.cm-panels-top": { borderBottom: `1px solid ${H}` },
-	".cm-panels.cm-panels-bottom": { borderTop: `1px solid ${H}` },
-	".cm-panel input, .cm-panel button, .cm-panel select": { fontSize: "inherit" },
-	".cm-panel input": {
-		backgroundColor: P,
-		color: I,
-		border: `1px solid ${H}`,
-		borderRadius: "4px",
-		padding: "2px 6px"
-	},
-	".cm-panel button": {
-		backgroundColor: _e,
-		color: I,
-		border: "none",
-		borderRadius: "4px",
-		padding: "2px 8px",
-		cursor: "pointer"
-	},
-	".cm-fat-cursor .cm-cursor": {
-		display: "block",
-		backgroundColor: `${R}77`,
-		borderLeft: "none",
-		width: "0.5em"
-	},
-	".cm-selectionLayer .cm-selectionBackground": { backgroundColor: `${z}80` },
-	".cm-foldPlaceholder": {
-		backgroundColor: "transparent",
-		border: "none",
-		color: L
-	}
-}, { dark: !0 }), Z = se.define([
-	{
-		tag: m.comment,
-		color: L,
-		fontStyle: "italic"
-	},
-	{
-		tag: m.lineComment,
-		color: L,
-		fontStyle: "italic"
-	},
-	{
-		tag: m.blockComment,
-		color: L,
-		fontStyle: "italic"
-	},
-	{
-		tag: m.docComment,
-		color: L,
-		fontStyle: "italic"
-	},
-	{
-		tag: m.keyword,
-		color: U
-	},
-	{
-		tag: m.controlKeyword,
-		color: U
-	},
-	{
-		tag: m.operatorKeyword,
-		color: U
-	},
-	{
-		tag: m.definitionKeyword,
-		color: U
-	},
-	{
-		tag: m.moduleKeyword,
-		color: U
-	},
-	{
-		tag: m.string,
-		color: W
-	},
-	{
-		tag: m.special(m.string),
-		color: W
-	},
-	{
-		tag: m.regexp,
-		color: W
-	},
-	{
-		tag: m.escape,
-		color: J
-	},
-	{
-		tag: m.character,
-		color: W
-	},
-	{
-		tag: m.function(m.definition(m.variableName)),
-		color: G
-	},
-	{
-		tag: m.function(m.variableName),
-		color: G
-	},
-	{
-		tag: m.variableName,
-		color: K
-	},
-	{
-		tag: m.definition(m.variableName),
-		color: K
-	},
-	{
-		tag: m.propertyName,
-		color: K
-	},
-	{
-		tag: m.definition(m.propertyName),
-		color: K
-	},
-	{
-		tag: m.typeName,
-		color: q
-	},
-	{
-		tag: m.className,
-		color: q
-	},
-	{
-		tag: m.namespace,
-		color: q
-	},
-	{
-		tag: m.macroName,
-		color: q
-	},
-	{
-		tag: m.annotation,
-		color: q
-	},
-	{
-		tag: m.number,
-		color: Y
-	},
-	{
-		tag: m.integer,
-		color: Y
-	},
-	{
-		tag: m.float,
-		color: Y
-	},
-	{
-		tag: m.bool,
-		color: Y
-	},
-	{
-		tag: m.null,
-		color: Y
-	},
-	{
-		tag: m.atom,
-		color: Y
-	},
-	{
-		tag: m.operator,
-		color: J
-	},
-	{
-		tag: m.punctuation,
-		color: I
-	},
-	{
-		tag: m.paren,
-		color: I
-	},
-	{
-		tag: m.squareBracket,
-		color: I
-	},
-	{
-		tag: m.brace,
-		color: I
-	},
-	{
-		tag: m.derefOperator,
-		color: I
-	},
-	{
-		tag: m.separator,
-		color: I
-	},
-	{
-		tag: m.url,
-		color: J,
-		textDecoration: "underline"
-	},
-	{
-		tag: m.link,
-		color: J
-	},
-	{
-		tag: m.labelName,
-		color: K
-	},
-	{
-		tag: m.tagName,
-		color: K
-	},
-	{
-		tag: m.attributeName,
-		color: Y
-	},
-	{
-		tag: m.attributeValue,
-		color: W
-	},
-	{
-		tag: m.angleBracket,
-		color: I
-	},
-	{
-		tag: m.self,
-		color: K
-	},
-	{
-		tag: m.processingInstruction,
-		color: L
-	},
-	{
-		tag: m.meta,
-		color: L
-	},
-	{
-		tag: m.heading,
-		color: K,
-		fontWeight: "bold"
-	},
-	{
-		tag: m.heading1,
-		color: K,
-		fontWeight: "bold"
-	},
-	{
-		tag: m.heading2,
-		color: K,
-		fontWeight: "bold"
-	},
-	{
-		tag: m.heading3,
-		color: K,
-		fontWeight: "bold"
-	},
-	{
-		tag: m.emphasis,
-		fontStyle: "italic"
-	},
-	{
-		tag: m.strong,
-		fontWeight: "bold"
-	},
-	{
-		tag: m.strikethrough,
-		textDecoration: "line-through"
-	},
-	{
-		tag: m.invalid,
-		color: "var(--n-code-invalid, #ffffff)",
-		backgroundColor: K
-	}
-]), Q = fe(Z), $ = [
-	ne(),
-	o(),
-	ue(),
-	_(),
-	ce(),
-	T(),
-	C(),
-	oe(),
+const Q = [
+	h(),
+	u(),
+	D(),
+	P(),
+	S(),
+	H(),
+	B(),
+	y(),
+	w(),
 	f(),
-	c(),
-	te(),
-	ie.of([
-		...D,
-		...h,
-		...y,
-		...p,
-		...k
+	m(),
+	_.of([
+		...W,
+		...M,
+		...I,
+		...T,
+		...K
 	])
 ];
 /**
@@ -405,20 +65,20 @@ const X = n.theme({
 * });
 * ```
 */
-function ve(e, t) {
-	let { doc: r = "", extensions: i = [], readonly: a = !1 } = t ?? {}, o = [
-		X,
+function $(t, r) {
+	let { doc: i = "", extensions: a = [], readonly: s = !1 } = r ?? {}, c = [
+		e,
+		n,
 		Q,
-		$,
-		...i
+		...a
 	];
-	return a && o.push(M.readOnly.of(!0), n.editable.of(!1)), new n({
-		state: M.create({
-			doc: r,
-			extensions: o
+	return s && c.push(Y.readOnly.of(!0), o.editable.of(!1)), new o({
+		state: Y.create({
+			doc: i,
+			extensions: c
 		}),
-		parent: e,
-		root: e.ownerDocument
+		parent: t,
+		root: t.ownerDocument
 	});
 }
-export { A as Compartment, e as Decoration, j as EditorState, t as EditorView, l as HighlightStyle, $ as NBaseExtensions, Z as NHighlightStyle, Q as NSyntaxHighlighting, X as NTheme, N as StateEffect, ge as StateField, r as ViewPlugin, i as WidgetType, S as autocompletion, u as bracketMatching, w as closeBrackets, E as closeBracketsKeymap, O as completionKeymap, ve as createEditorView, he as defaultKeymap, a as drawSelection, d as foldGutter, s as highlightActiveLine, ee as highlightActiveLineGutter, g as history, v as historyKeymap, le as indentOnInput, re as keymap, ae as lineNumbers, b as redo, de as syntaxHighlighting, pe as syntaxTree, me as tags, x as undo };
+export { q as Compartment, i as Decoration, J as EditorState, a as EditorView, b as HighlightStyle, Q as NBaseExtensions, r as NCodemirror, t as NHighlightStyle, n as NSyntaxHighlighting, e as NTheme, X as StateEffect, Z as StateField, s as ViewPlugin, c as WidgetType, z as autocompletion, x as bracketMatching, V as closeBrackets, U as closeBracketsKeymap, G as completionKeymap, $ as createEditorView, j as defaultKeymap, l as drawSelection, C as foldGutter, d as highlightActiveLine, p as highlightActiveLineGutter, N as history, F as historyKeymap, E as indentOnInput, g as keymap, v as lineNumbers, L as redo, O as syntaxHighlighting, k as syntaxTree, A as tags, R as undo };

package/dist/register.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=register.d.ts.map

package/dist/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.ts"],"names":[],"mappings":""}

package/dist/register.js

@@ -0,0 +1,3 @@
+import { t as e } from "./codemirror-element-DqgpO8qM.js";
+import { define as t } from "@nonoun/native-ui";
+t("native-codemirror", e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-codemirror",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Shared CodeMirror 6 integration layer for @nonoun/native-ui ecosystem",
   "license": "MIT",
   "type": "module",
@@ -12,11 +12,18 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/native-codemirror.js"
     },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "default": "./dist/register.js"
+    },
     "./css": "./dist/native-codemirror.css"
   },
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "./dist/register.js"
+  ],
   "peerDependencies": {
     "@nonoun/native-ui": ">=0.5.0"
   },