@nonoun/native-codemirror 0.2.3 → 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

@@ -7,20 +7,79 @@
  * These styles handle structural concerns (scrolling, gutter borders,
  * scrollbar appearance, border-radius) that complement the JS-driven
  * EditorView.theme() in theme.ts.
+ *
+ * All colors flow through --n-code-* CSS custom properties defined here.
+ * When native-ui foundation CSS is loaded, tokens like --n-body, --n-ink
+ * provide automatic theme integration. Without it, hex fallbacks apply.
+ * Consumers can override any --n-code-* var directly on .cm-editor.
  */
 
 @layer ui {
   /* -----------------------------------------------------------------------
-   * Editor root
+   * 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
    * --------------------------------------------------------------------- */
 
   :where(.cm-editor) {
-    /* CodeMirror chrome tokens */
-    --n-cm-scrollbar: #484c52;
-    --n-cm-scrollbar-hover: #5e6167;
-    --n-cm-match-bg: #314050;
+    /* Grounds */
+    --n-code-bg:              var(--n-color-neutral-base, #282c34);
+    --n-code-bg-raised:       var(--n-color-neutral-higher, #21252b);
+    --n-code-bg-deeper:       var(--n-color-neutral-lower, #1e2127);
+    --n-code-bg-inline:       var(--n-card, #333843);
+
+    /* Ink */
+    --n-code-text:            var(--n-ink, #abb2bf);
+    --n-code-text-muted:      var(--n-ink-muted, #7d8799);
+
+    /* 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-scrim, #2c313a) !important;
+    --n-code-bracket:         var(--n-color-neutral-600, #515a6b);
+    --n-code-accent:          var(--n-surface-accent, #61afef);
+
+    /* Chrome */
+    --n-code-border:          var(--n-border, #3E4451);
+    --n-code-button:          var(--n-color-neutral-100-scrim, #3E4451);
+    --n-code-scrollbar:       var(--n-color-neutral-200-scrim, #484c52);
+    --n-code-scrollbar-hover: var(--n-color-neutral-300-scrim, #5e6167);
+    --n-code-match:           var(--n-color-accent-050-scrim, #314050);
+    --n-code-shadow:          0 4px 16px rgba(0, 0, 0, 0.3);
+
+    /* Search */
+    --n-code-search:          rgba(229, 192, 123, 0.25);
+    --n-code-search-outline:  rgba(229, 192, 123, 0.4);
+    --n-code-search-active:   rgba(97, 175, 239, 0.3);
+
+    /* Syntax palette — curated for dark-on-dark contrast */
+    --n-code-keyword:         #c678dd;
+    --n-code-string:          #98c379;
+    --n-code-function:        #61afef;
+    --n-code-variable:        #e06c75;
+    --n-code-type:            #e5c07b;
+    --n-code-operator:        #56b6c2;
+    --n-code-number:          #d19a66;
+    --n-code-invalid:         #ffffff;
 
-    /*border-radius: var(--n-radius, 8px);*/
     overflow: hidden;
     font-variant-ligatures: contextual;
     line-height: 1.6;
@@ -69,7 +128,7 @@
 
   :where(.cm-scroller) {
     scrollbar-width: thin;
-    scrollbar-color: var(--n-cm-scrollbar) transparent;
+    scrollbar-color: var(--n-code-scrollbar) transparent;
   }
 
   :where(.cm-scroller)::-webkit-scrollbar {
@@ -82,12 +141,12 @@
   }
 
   :where(.cm-scroller)::-webkit-scrollbar-thumb {
-    background: var(--n-cm-scrollbar);
+    background: var(--n-code-scrollbar);
     border-radius: 4px;
   }
 
   :where(.cm-scroller)::-webkit-scrollbar-thumb:hover {
-    background: var(--n-cm-scrollbar-hover);
+    background: var(--n-code-scrollbar-hover);
   }
 
   :where(.cm-scroller)::-webkit-scrollbar-corner {
@@ -172,7 +231,7 @@
    * --------------------------------------------------------------------- */
 
   :where(.cm-selectionMatch) {
-    background-color: var(--n-cm-match-bg);
+    background-color: var(--n-code-match);
     border-radius: 2px;
   }
 }

package/dist/native-codemirror.js

@@ -1,375 +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 l, keymap as re, lineNumbers as ie, lineNumbers as ae } from "@codemirror/view";
-import { HighlightStyle as oe, HighlightStyle as u, bracketMatching as d, bracketMatching as f, foldGutter as p, foldGutter as m, foldKeymap as se, indentOnInput as ce, indentOnInput as le, syntaxHighlighting as ue, syntaxHighlighting as de, syntaxTree as fe } from "@codemirror/language";
-import { tags as h, tags as g } from "@lezer/highlight";
-import { defaultKeymap as _, defaultKeymap as v, history as y, history as b, historyKeymap as x, historyKeymap as S, redo as C, undo as w } from "@codemirror/commands";
-import { autocompletion as T, autocompletion as E, closeBrackets as D, closeBrackets as O, closeBracketsKeymap as k, closeBracketsKeymap as A, completionKeymap as j, completionKeymap as M } from "@codemirror/autocomplete";
-import { Compartment as N, EditorState as pe, EditorState as P, StateEffect as F, StateField as I } 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.
+* 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 L = "var(--n-code-bg, #282c34)", R = "var(--n-code-bg-dark, #21252b)", z = "var(--n-code-text, #abb2bf)", B = "var(--n-code-text-muted, #7d8799)", V = "#528bff", H = "#3E4451", U = "#c678dd", W = "#98c379", G = "#61afef", K = "#e06c75", q = "#e5c07b", J = "#56b6c2", Y = "#d19a66";
-const X = n.theme({
-	"&": {
-		color: z,
-		backgroundColor: L,
-		fontSize: "14px",
-		fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, monospace"
-	},
-	".cm-content": {
-		caretColor: V,
-		padding: "4px 0"
-	},
-	"&.cm-focused .cm-cursor": {
-		borderLeftColor: V,
-		borderLeftWidth: "2px"
-	},
-	"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: H },
-	".cm-activeLine": { backgroundColor: "#2c313a" },
-	".cm-gutters": {
-		backgroundColor: R,
-		color: B,
-		borderRight: "none",
-		paddingRight: "4px"
-	},
-	".cm-activeLineGutter": {
-		backgroundColor: "#2c313a",
-		color: z
-	},
-	".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: "#515a6b",
-		outline: "1px solid #515a6b"
-	},
-	"&.cm-focused .cm-nonmatchingBracket": { color: K },
-	".cm-searchMatch": {
-		backgroundColor: "rgba(229, 192, 123, 0.25)",
-		outline: "1px solid rgba(229, 192, 123, 0.4)"
-	},
-	".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "rgba(97, 175, 239, 0.3)" },
-	".cm-tooltip": {
-		backgroundColor: R,
-		color: z,
-		border: "1px solid #3E4451",
-		borderRadius: "6px",
-		boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)"
-	},
-	".cm-tooltip .cm-tooltip-arrow::before": {
-		borderTopColor: "#3E4451",
-		borderBottomColor: "#3E4451"
-	},
-	".cm-tooltip .cm-tooltip-arrow::after": {
-		borderTopColor: R,
-		borderBottomColor: R
-	},
-	".cm-tooltip-autocomplete": {
-		"& > ul": {
-			fontFamily: "inherit",
-			maxHeight: "240px"
-		},
-		"& > ul > li": { padding: "4px 8px" },
-		"& > ul > li[aria-selected]": {
-			backgroundColor: H,
-			color: z
-		}
-	},
-	".cm-panels": {
-		backgroundColor: R,
-		color: z
-	},
-	".cm-panels.cm-panels-top": { borderBottom: "1px solid #3E4451" },
-	".cm-panels.cm-panels-bottom": { borderTop: "1px solid #3E4451" },
-	".cm-panel input, .cm-panel button, .cm-panel select": { fontSize: "inherit" },
-	".cm-panel input": {
-		backgroundColor: L,
-		color: z,
-		border: "1px solid #3E4451",
-		borderRadius: "4px",
-		padding: "2px 6px"
-	},
-	".cm-panel button": {
-		backgroundColor: "#3E4451",
-		color: z,
-		border: "none",
-		borderRadius: "4px",
-		padding: "2px 8px",
-		cursor: "pointer"
-	},
-	".cm-fat-cursor .cm-cursor": {
-		display: "block",
-		backgroundColor: `${V}77`,
-		borderLeft: "none",
-		width: "0.5em"
-	},
-	".cm-selectionLayer .cm-selectionBackground": { backgroundColor: `${H}80` },
-	".cm-foldPlaceholder": {
-		backgroundColor: "transparent",
-		border: "none",
-		color: B
-	}
-}, { dark: !0 }), Z = u.define([
-	{
-		tag: g.comment,
-		color: B,
-		fontStyle: "italic"
-	},
-	{
-		tag: g.lineComment,
-		color: B,
-		fontStyle: "italic"
-	},
-	{
-		tag: g.blockComment,
-		color: B,
-		fontStyle: "italic"
-	},
-	{
-		tag: g.docComment,
-		color: B,
-		fontStyle: "italic"
-	},
-	{
-		tag: g.keyword,
-		color: U
-	},
-	{
-		tag: g.controlKeyword,
-		color: U
-	},
-	{
-		tag: g.operatorKeyword,
-		color: U
-	},
-	{
-		tag: g.definitionKeyword,
-		color: U
-	},
-	{
-		tag: g.moduleKeyword,
-		color: U
-	},
-	{
-		tag: g.string,
-		color: W
-	},
-	{
-		tag: g.special(g.string),
-		color: W
-	},
-	{
-		tag: g.regexp,
-		color: W
-	},
-	{
-		tag: g.escape,
-		color: J
-	},
-	{
-		tag: g.character,
-		color: W
-	},
-	{
-		tag: g.function(g.definition(g.variableName)),
-		color: G
-	},
-	{
-		tag: g.function(g.variableName),
-		color: G
-	},
-	{
-		tag: g.variableName,
-		color: K
-	},
-	{
-		tag: g.definition(g.variableName),
-		color: K
-	},
-	{
-		tag: g.propertyName,
-		color: K
-	},
-	{
-		tag: g.definition(g.propertyName),
-		color: K
-	},
-	{
-		tag: g.typeName,
-		color: q
-	},
-	{
-		tag: g.className,
-		color: q
-	},
-	{
-		tag: g.namespace,
-		color: q
-	},
-	{
-		tag: g.macroName,
-		color: q
-	},
-	{
-		tag: g.annotation,
-		color: q
-	},
-	{
-		tag: g.number,
-		color: Y
-	},
-	{
-		tag: g.integer,
-		color: Y
-	},
-	{
-		tag: g.float,
-		color: Y
-	},
-	{
-		tag: g.bool,
-		color: Y
-	},
-	{
-		tag: g.null,
-		color: Y
-	},
-	{
-		tag: g.atom,
-		color: Y
-	},
-	{
-		tag: g.operator,
-		color: J
-	},
-	{
-		tag: g.punctuation,
-		color: z
-	},
-	{
-		tag: g.paren,
-		color: z
-	},
-	{
-		tag: g.squareBracket,
-		color: z
-	},
-	{
-		tag: g.brace,
-		color: z
-	},
-	{
-		tag: g.derefOperator,
-		color: z
-	},
-	{
-		tag: g.separator,
-		color: z
-	},
-	{
-		tag: g.url,
-		color: J,
-		textDecoration: "underline"
-	},
-	{
-		tag: g.link,
-		color: J
-	},
-	{
-		tag: g.labelName,
-		color: K
-	},
-	{
-		tag: g.tagName,
-		color: K
-	},
-	{
-		tag: g.attributeName,
-		color: Y
-	},
-	{
-		tag: g.attributeValue,
-		color: W
-	},
-	{
-		tag: g.angleBracket,
-		color: z
-	},
-	{
-		tag: g.self,
-		color: K
-	},
-	{
-		tag: g.processingInstruction,
-		color: B
-	},
-	{
-		tag: g.meta,
-		color: B
-	},
-	{
-		tag: g.heading,
-		color: K,
-		fontWeight: "bold"
-	},
-	{
-		tag: g.heading1,
-		color: K,
-		fontWeight: "bold"
-	},
-	{
-		tag: g.heading2,
-		color: K,
-		fontWeight: "bold"
-	},
-	{
-		tag: g.heading3,
-		color: K,
-		fontWeight: "bold"
-	},
-	{
-		tag: g.emphasis,
-		fontStyle: "italic"
-	},
-	{
-		tag: g.strong,
-		fontWeight: "bold"
-	},
-	{
-		tag: g.strikethrough,
-		textDecoration: "line-through"
-	},
-	{
-		tag: g.invalid,
-		color: "#ffffff",
-		backgroundColor: K
-	}
-]), Q = de(Z), $ = [
-	ne(),
-	o(),
-	le(),
-	b(),
+const Q = [
+	h(),
+	u(),
+	D(),
+	P(),
+	S(),
+	H(),
+	B(),
+	y(),
+	w(),
 	f(),
-	O(),
-	E(),
-	ae(),
 	m(),
-	c(),
-	te(),
-	re.of([
-		...A,
-		...v,
-		...S,
-		...se,
-		...M
+	_.of([
+		...W,
+		...M,
+		...I,
+		...T,
+		...K
 	])
 ];
 /**
@@ -399,20 +65,20 @@ const X = n.theme({
 * });
 * ```
 */
-function me(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(P.readOnly.of(!0), n.editable.of(!1)), new n({
-		state: P.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 { N as Compartment, e as Decoration, pe as EditorState, t as EditorView, oe as HighlightStyle, $ as NBaseExtensions, Z as NHighlightStyle, Q as NSyntaxHighlighting, X as NTheme, F as StateEffect, I as StateField, r as ViewPlugin, i as WidgetType, T as autocompletion, d as bracketMatching, D as closeBrackets, k as closeBracketsKeymap, j as completionKeymap, me as createEditorView, _ as defaultKeymap, a as drawSelection, p as foldGutter, s as highlightActiveLine, ee as highlightActiveLineGutter, y as history, x as historyKeymap, ce as indentOnInput, l as keymap, ie as lineNumbers, C as redo, ue as syntaxHighlighting, fe as syntaxTree, h as tags, w 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/dist/theme.d.ts

@@ -4,6 +4,12 @@
  * 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.
  */
 import { HighlightStyle } from '@codemirror/language';
 export declare const NTheme: import("@codemirror/state").Extension;

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,cAAc,EAAsB,MAAM,sBAAsB,CAAC;AA8B1E,eAAO,MAAM,MAAM,uCAqKlB,CAAC;AAMF,eAAO,MAAM,eAAe,gBAoF1B,CAAC;AAEH,eAAO,MAAM,mBAAmB,uCAAsC,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EAAE,cAAc,EAAsB,MAAM,sBAAsB,CAAC;AAgC1E,eAAO,MAAM,MAAM,uCAqKlB,CAAC;AAMF,eAAO,MAAM,eAAe,gBAoF1B,CAAC;AAEH,eAAO,MAAM,mBAAmB,uCAAsC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-codemirror",
-  "version": "0.2.3",
+  "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"
   },