@nonoun/native-editor 0.2.0

package/dist/commands.d.ts

@@ -0,0 +1,17 @@
+import type { EditorView } from '@codemirror/view';
+export interface EditorCommands {
+    toggleBold(view: EditorView): boolean;
+    toggleItalic(view: EditorView): boolean;
+    toggleCode(view: EditorView): boolean;
+    toggleStrikethrough(view: EditorView): boolean;
+    setHeading(view: EditorView, level: 1 | 2 | 3): boolean;
+    toggleBulletList(view: EditorView): boolean;
+    toggleOrderedList(view: EditorView): boolean;
+    toggleBlockquote(view: EditorView): boolean;
+    insertLink(view: EditorView, url?: string, text?: string): boolean;
+    insertImage(view: EditorView, url?: string, alt?: string): boolean;
+    insertHorizontalRule(view: EditorView): boolean;
+}
+export declare const commands: EditorCommands;
+export declare const markdownKeymap: import("@codemirror/state").Extension;
+//# sourceMappingURL=commands.d.ts.map

package/dist/commands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../src/commands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAgRnD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IACtC,YAAY,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IACxC,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IACtC,mBAAmB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;IACxD,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5C,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7C,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5C,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnE,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnE,oBAAoB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;CACjD;AAED,eAAO,MAAM,QAAQ,EAAE,cAYtB,CAAC;AAMF,eAAO,MAAM,cAAc,uCAQzB,CAAC"}

package/dist/decorations.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Live Preview Decorations
+ *
+ * Reads the @lezer/markdown parse tree and builds a DecorationSet that applies
+ * visual formatting in live preview mode (Obsidian-style: markdown source with
+ * inline decorations). Wrapped in a Compartment for mode switching.
+ */
+import { Compartment } from '@codemirror/state';
+import type { Extension } from '@codemirror/state';
+/** Compartment for toggling live preview on/off */
+export declare const previewCompartment: Compartment;
+/** Create the live preview extension (active state) */
+export declare function createPreviewExtension(): Extension;
+/** Empty extension (source mode -- no decorations) */
+export declare const sourceExtension: Extension;
+//# sourceMappingURL=decorations.d.ts.map

package/dist/decorations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorations.d.ts","sourceRoot":"","sources":["../src/decorations.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAIjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAMnD,mDAAmD;AACnD,eAAO,MAAM,kBAAkB,aAAoB,CAAC;AAgWpD,uDAAuD;AACvD,wBAAgB,sBAAsB,IAAI,SAAS,CAElD;AAED,sDAAsD;AACtD,eAAO,MAAM,eAAe,EAAE,SAAc,CAAC"}

package/dist/editor-store.d.ts

@@ -0,0 +1,18 @@
+import type { Signal, ReadonlySignal } from '@nonoun/native-ui';
+export type ViewMode = 'preview' | 'source';
+export declare const DEFAULT_TOOLBAR: string[];
+export declare class EditorStore {
+    readonly mode: Signal<ViewMode>;
+    readonly disabled: Signal<boolean>;
+    readonly readonly: Signal<boolean>;
+    readonly placeholder: Signal<string>;
+    readonly toolbar: Signal<string[]>;
+    readonly src: Signal<string | null>;
+    /** True when disabled OR readonly — drives CodeMirror readOnly + editable. */
+    readonly locked: ReadonlySignal<boolean>;
+    setMode(mode: ViewMode): void;
+    toggleMode(): void;
+    setToolbar(val: string | string[]): void;
+    reset(): void;
+}
+//# sourceMappingURL=editor-store.d.ts.map

package/dist/editor-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-store.d.ts","sourceRoot":"","sources":["../src/editor-store.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAMhE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5C,eAAO,MAAM,eAAe,UAM3B,CAAC;AAMF,qBAAa,WAAW;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAA+B;IAC9D,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,CAAiB;IACnD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,CAAiB;IACnD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,CAAc;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAA2B;IAC7D,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAgB;IAEnD,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,CAEtC;IAIF,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAK7B,UAAU,IAAI,IAAI;IAIlB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;IAMxC,KAAK,IAAI,IAAI;CAUd"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { NuiEditor } from './nui-editor-element.ts';
+export { EditorStore, DEFAULT_TOOLBAR } from './editor-store.ts';
+export type { ViewMode } from './editor-store.ts';
+export { commands, markdownKeymap } from './commands.ts';
+export type { EditorCommands } from './commands.ts';
+export { previewCompartment, createPreviewExtension, sourceExtension } from './decorations.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACjE,YAAY,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/nui-editor-element-S_Z8i0qQ.js

@@ -0,0 +1,853 @@
+import { GatewayController as e, UIElement as t, batch as n, computed as r, createDisabledEffect as i, signal as a } from "@nonoun/native-ui";
+import { Compartment as o, EditorState as s, EditorView as c, nuiBaseExtensions as l, nuiSyntaxHighlighting as u, nuiTheme as ee } from "@nonoun/nui-codemirror";
+import { markdown as d } from "@codemirror/lang-markdown";
+import { Decoration as f, ViewPlugin as p, WidgetType as m, keymap as te, placeholder as h } from "@codemirror/view";
+import { Compartment as ne, EditorSelection as g, RangeSetBuilder as _ } from "@codemirror/state";
+import { syntaxTree as v } from "@codemirror/language";
+function y(e, t) {
+	let { state: n } = e, r = [], i = [];
+	for (let e of n.selection.ranges) {
+		let { from: a, to: o } = e;
+		if (a === o) r.push({
+			from: a,
+			to: o,
+			insert: t + t
+		}), i.push({ anchor: a + t.length });
+		else {
+			let e = n.sliceDoc(a, o);
+			if (e.startsWith(t) && e.endsWith(t) && e.length >= t.length * 2) {
+				let n = e.slice(t.length, e.length - t.length);
+				r.push({
+					from: a,
+					to: o,
+					insert: n
+				}), i.push({
+					anchor: a,
+					head: a + n.length
+				});
+			} else {
+				let s = n.sliceDoc(a - t.length, a), c = n.sliceDoc(o, o + t.length);
+				s === t && c === t ? (r.push({
+					from: a - t.length,
+					to: a,
+					insert: ""
+				}), r.push({
+					from: o,
+					to: o + t.length,
+					insert: ""
+				}), i.push({
+					anchor: a - t.length,
+					head: o - t.length
+				})) : (r.push({
+					from: a,
+					to: o,
+					insert: t + e + t
+				}), i.push({
+					anchor: a + t.length,
+					head: a + t.length + e.length
+				}));
+			}
+		}
+	}
+	return e.dispatch({
+		changes: r,
+		selection: g.create(i.map((e) => g.range(e.anchor, e.head ?? e.anchor)))
+	}), !0;
+}
+/** Get the full lines covered by a selection range. */
+function b(e, t, n) {
+	let { state: r } = e, i = [], a = r.doc.lineAt(t), o = r.doc.lineAt(n);
+	for (let e = a.number; e <= o.number; e++) {
+		let t = r.doc.line(e);
+		i.push({
+			from: t.from,
+			to: t.to,
+			text: t.text,
+			number: e
+		});
+	}
+	return i;
+}
+function re(e, t) {
+	let { state: n } = e, r = [];
+	for (let e of n.selection.ranges) {
+		let i = n.doc.lineAt(e.from), a = i.text.match(/^(#{1,6})\s/), o = "#".repeat(t) + " ";
+		if (a) {
+			let e = a[1].length, n = a[0];
+			e === t ? r.push({
+				from: i.from,
+				to: i.from + n.length,
+				insert: ""
+			}) : r.push({
+				from: i.from,
+				to: i.from + n.length,
+				insert: o
+			});
+		} else r.push({
+			from: i.from,
+			to: i.from,
+			insert: o
+		});
+	}
+	return e.dispatch({ changes: r }), !0;
+}
+function ie(e) {
+	let { state: t } = e, n = [];
+	for (let r of t.selection.ranges) {
+		let t = b(e, r.from, r.to), i = t.every((e) => /^- /.test(e.text));
+		for (let e of t) i ? n.push({
+			from: e.from,
+			to: e.from + 2,
+			insert: ""
+		}) : /^- /.test(e.text) || n.push({
+			from: e.from,
+			to: e.from,
+			insert: "- "
+		});
+	}
+	return e.dispatch({ changes: n }), !0;
+}
+function x(e) {
+	let { state: t } = e, n = [];
+	for (let r of t.selection.ranges) {
+		let t = b(e, r.from, r.to), i = t.every((e) => /^\d+\.\s/.test(e.text)), a = 1;
+		for (let e of t) if (i) {
+			let t = e.text.match(/^\d+\.\s/);
+			t && n.push({
+				from: e.from,
+				to: e.from + t[0].length,
+				insert: ""
+			});
+		} else if (/^\d+\.\s/.test(e.text)) {
+			let t = e.text.match(/^\d+\.\s/);
+			t && n.push({
+				from: e.from,
+				to: e.from + t[0].length,
+				insert: `${a}. `
+			}), a++;
+		} else n.push({
+			from: e.from,
+			to: e.from,
+			insert: `${a}. `
+		}), a++;
+	}
+	return e.dispatch({ changes: n }), !0;
+}
+function S(e) {
+	let { state: t } = e, n = [];
+	for (let r of t.selection.ranges) {
+		let t = b(e, r.from, r.to), i = t.every((e) => /^> /.test(e.text));
+		for (let e of t) i ? n.push({
+			from: e.from,
+			to: e.from + 2,
+			insert: ""
+		}) : /^> /.test(e.text) || n.push({
+			from: e.from,
+			to: e.from,
+			insert: "> "
+		});
+	}
+	return e.dispatch({ changes: n }), !0;
+}
+function C(e, t, n) {
+	let { state: r } = e, i = r.selection.main, a = r.sliceDoc(i.from, i.to), o = n ?? (a || "link text"), s = t ?? "url", c = `[${o}](${s})`, l = i.from + 1 + o.length + 2, u = l + s.length;
+	return e.dispatch({
+		changes: {
+			from: i.from,
+			to: i.to,
+			insert: c
+		},
+		selection: t ? { anchor: i.from + c.length } : {
+			anchor: l,
+			head: u
+		}
+	}), !0;
+}
+function w(e, t, n) {
+	let { state: r } = e, i = r.selection.main, a = n ?? "alt text", o = t ?? "url", s = `![${a}](${o})`, c = i.from + 2 + a.length + 2, l = c + o.length;
+	return e.dispatch({
+		changes: {
+			from: i.from,
+			to: i.to,
+			insert: s
+		},
+		selection: t ? { anchor: i.from + s.length } : {
+			anchor: c,
+			head: l
+		}
+	}), !0;
+}
+function T(e) {
+	let t = e.state.selection.main;
+	return e.dispatch({
+		changes: {
+			from: t.from,
+			to: t.to,
+			insert: "\n---\n"
+		},
+		selection: { anchor: t.from + 5 }
+	}), !0;
+}
+const E = {
+	toggleBold: (e) => y(e, "**"),
+	toggleItalic: (e) => y(e, "*"),
+	toggleCode: (e) => y(e, "`"),
+	toggleStrikethrough: (e) => y(e, "~~"),
+	setHeading: re,
+	toggleBulletList: ie,
+	toggleOrderedList: x,
+	toggleBlockquote: S,
+	insertLink: C,
+	insertImage: w,
+	insertHorizontalRule: T
+}, D = te.of([
+	{
+		key: "Mod-b",
+		run: (e) => E.toggleBold(e)
+	},
+	{
+		key: "Mod-i",
+		run: (e) => E.toggleItalic(e)
+	},
+	{
+		key: "Mod-e",
+		run: (e) => E.toggleCode(e)
+	},
+	{
+		key: "Mod-k",
+		run: (e) => E.insertLink(e)
+	},
+	{
+		key: "Mod-Shift-1",
+		run: (e) => E.setHeading(e, 1)
+	},
+	{
+		key: "Mod-Shift-2",
+		run: (e) => E.setHeading(e, 2)
+	},
+	{
+		key: "Mod-Shift-3",
+		run: (e) => E.setHeading(e, 3)
+	}
+]), O = new ne();
+var k = f.mark({ class: "md-bold" }), A = f.mark({ class: "md-italic" }), j = f.mark({ class: "md-code" }), M = f.mark({ class: "md-strikethrough" }), N = f.mark({ class: "md-link" }), P = f.mark({ class: "md-url" }), F = f.mark({ class: "md-syntax-marker" }), ae = f.mark({ class: "md-syntax-marker md-syntax-visible" }), I = f.line({ class: "md-heading md-heading-1" }), L = f.line({ class: "md-heading md-heading-2" }), R = f.line({ class: "md-heading md-heading-3" }), z = f.line({ class: "md-heading md-heading-4" }), B = f.line({ class: "md-heading md-heading-5" }), V = f.line({ class: "md-heading md-heading-6" }), H = f.line({ class: "md-list-item md-bullet-item" }), U = f.line({ class: "md-list-item md-ordered-item" }), W = f.line({ class: "md-blockquote" }), G = f.line({ class: "md-code-block" }), K = f.line({ class: "md-hr" }), q = {
+	ATXHeading1: I,
+	ATXHeading2: L,
+	ATXHeading3: R,
+	ATXHeading4: z,
+	ATXHeading5: B,
+	ATXHeading6: V
+}, J = new Set([
+	"HeaderMark",
+	"EmphasisMark",
+	"CodeMark",
+	"StrikethroughMark",
+	"LinkMark",
+	"QuoteMark",
+	"ListMark"
+]), oe = class extends m {
+	src;
+	alt;
+	constructor(e, t) {
+		super(), this.src = e, this.alt = t;
+	}
+	eq(e) {
+		return this.src === e.src && this.alt === e.alt;
+	}
+	toDOM() {
+		let e = document.createElement("img");
+		return e.src = this.src, e.alt = this.alt, e.className = "md-image", e.style.maxWidth = "100%", e;
+	}
+	ignoreEvent() {
+		return !1;
+	}
+};
+function Y(e, t, n) {
+	return e.sliceString(t, n);
+}
+var se = p.fromClass(class {
+	decorations;
+	constructor(e) {
+		this.decorations = this.buildDecorations(e);
+	}
+	update(e) {
+		(e.docChanged || e.viewportChanged || e.selectionSet) && (this.decorations = this.buildDecorations(e.view));
+	}
+	buildDecorations(e) {
+		let t = new _(), n = e.state.doc, r = v(e.state), i = n.lineAt(e.state.selection.main.head).number, a = [], o = [], s = [], c = [];
+		r.iterate({
+			enter(e) {
+				let t = e.name, r = q[t];
+				if (r) {
+					let t = n.lineAt(e.from), i = n.lineAt(e.to);
+					for (let e = t.number; e <= i.number; e++) {
+						let t = n.line(e);
+						a.push({
+							pos: t.from,
+							deco: r
+						});
+					}
+				}
+				if ((t === "BulletList" || t === "OrderedList") && c.push(t), t === "ListItem") {
+					let t = c[c.length - 1] === "OrderedList" ? U : H, r = n.lineAt(e.from), i = n.lineAt(e.to);
+					for (let e = r.number; e <= i.number; e++) {
+						let r = n.line(e);
+						a.push({
+							pos: r.from,
+							deco: t
+						});
+					}
+				}
+				if (t === "Blockquote") {
+					let t = n.lineAt(e.from), r = n.lineAt(e.to);
+					for (let e = t.number; e <= r.number; e++) {
+						let t = n.line(e);
+						a.push({
+							pos: t.from,
+							deco: W
+						});
+					}
+				}
+				if (t === "FencedCode") {
+					let t = n.lineAt(e.from), r = n.lineAt(e.to);
+					for (let e = t.number; e <= r.number; e++) {
+						let t = n.line(e);
+						a.push({
+							pos: t.from,
+							deco: G
+						});
+					}
+				}
+				if (t === "HorizontalRule") {
+					let t = n.lineAt(e.from);
+					a.push({
+						pos: t.from,
+						deco: K
+					});
+				}
+				if (t === "StrongEmphasis" && o.push({
+					from: e.from,
+					to: e.to,
+					deco: k
+				}), t === "Emphasis" && o.push({
+					from: e.from,
+					to: e.to,
+					deco: A
+				}), t === "InlineCode" && o.push({
+					from: e.from,
+					to: e.to,
+					deco: j
+				}), t === "Strikethrough" && o.push({
+					from: e.from,
+					to: e.to,
+					deco: M
+				}), t === "Link" && o.push({
+					from: e.from,
+					to: e.to,
+					deco: N
+				}), t === "URL" && o.push({
+					from: e.from,
+					to: e.to,
+					deco: P
+				}), J.has(t)) {
+					let t = n.lineAt(e.from).number === i ? ae : F;
+					o.push({
+						from: e.from,
+						to: e.to,
+						deco: t
+					});
+				}
+				if (t === "Image") {
+					let t = "", r = "", i = e.node.cursor();
+					if (i.firstChild()) do
+						i.name === "URL" ? t = Y(n, i.from, i.to) : i.name === "AltText" && (r = Y(n, i.from, i.to));
+					while (i.nextSibling());
+					t && s.push({
+						pos: e.to,
+						deco: f.widget({
+							widget: new oe(t, r),
+							side: 1
+						})
+					});
+				}
+			},
+			leave(e) {
+				let t = e.name;
+				(t === "BulletList" || t === "OrderedList") && c.pop();
+			}
+		});
+		let l = [];
+		for (let e of a) l.push({
+			kind: "line",
+			pos: e.pos,
+			deco: e.deco
+		});
+		for (let e of o) l.push({
+			kind: "range",
+			from: e.from,
+			to: e.to,
+			deco: e.deco
+		});
+		for (let e of s) l.push({
+			kind: "widget",
+			pos: e.pos,
+			deco: e.deco
+		});
+		l.sort((e, t) => {
+			let n = e.kind === "range" ? e.from : e.pos, r = t.kind === "range" ? t.from : t.pos;
+			if (n !== r) return n - r;
+			let i = {
+				line: 0,
+				range: 1,
+				widget: 2
+			}, a = i[e.kind] - i[t.kind];
+			return a === 0 ? e.kind === "range" && t.kind === "range" ? e.to - t.to : 0 : a;
+		});
+		let u = /* @__PURE__ */ new Set();
+		for (let e of l) if (e.kind === "line") {
+			let n = `${e.pos}:${e.deco.spec.class ?? ""}`;
+			if (u.has(n)) continue;
+			u.add(n), t.add(e.pos, e.pos, e.deco);
+		} else e.kind === "range" ? e.from < e.to && t.add(e.from, e.to, e.deco) : t.add(e.pos, e.pos, e.deco);
+		return t.finish();
+	}
+}, { decorations: (e) => e.decorations });
+/** Create the live preview extension (active state) */
+function X() {
+	return se;
+}
+/** Empty extension (source mode -- no decorations) */
+const Z = [], Q = [
+	"bold",
+	"italic",
+	"code",
+	"|",
+	"h1",
+	"h2",
+	"h3",
+	"|",
+	"bullet-list",
+	"ordered-list",
+	"blockquote",
+	"|",
+	"link",
+	"image",
+	"|",
+	"mode-toggle"
+];
+var $ = class {
+	mode = a("preview");
+	disabled = a(!1);
+	readonly = a(!1);
+	placeholder = a("");
+	toolbar = a(Q);
+	src = a(null);
+	/** True when disabled OR readonly — drives CodeMirror readOnly + editable. */
+	locked = r(() => this.disabled.value || this.readonly.value);
+	setMode(e) {
+		e !== "preview" && e !== "source" || (this.mode.value = e);
+	}
+	toggleMode() {
+		this.mode.value = this.mode.value === "preview" ? "source" : "preview";
+	}
+	setToolbar(e) {
+		this.toolbar.value = typeof e == "string" ? e.split(",").map((e) => e.trim()).filter(Boolean) : e;
+	}
+	reset() {
+		n(() => {
+			this.mode.value = "preview", this.disabled.value = !1, this.readonly.value = !1, this.placeholder.value = "", this.toolbar.value = Q, this.src.value = null;
+		});
+	}
+}, ce = {
+	bold: {
+		icon: "text-b",
+		label: "Bold",
+		action: E.toggleBold
+	},
+	italic: {
+		icon: "text-italic",
+		label: "Italic",
+		action: E.toggleItalic
+	},
+	code: {
+		icon: "code",
+		label: "Code",
+		action: E.toggleCode
+	},
+	h1: {
+		icon: "text-h-one",
+		label: "Heading 1",
+		action: (e) => E.setHeading(e, 1)
+	},
+	h2: {
+		icon: "text-h-two",
+		label: "Heading 2",
+		action: (e) => E.setHeading(e, 2)
+	},
+	h3: {
+		icon: "text-h-three",
+		label: "Heading 3",
+		action: (e) => E.setHeading(e, 3)
+	},
+	"bullet-list": {
+		icon: "list-bullets",
+		label: "Bullet List",
+		action: E.toggleBulletList
+	},
+	"ordered-list": {
+		icon: "list-numbers",
+		label: "Ordered List",
+		action: E.toggleOrderedList
+	},
+	blockquote: {
+		icon: "quotes",
+		label: "Blockquote",
+		action: E.toggleBlockquote
+	},
+	link: {
+		icon: "link",
+		label: "Link",
+		action: E.insertLink
+	},
+	image: {
+		icon: "image",
+		label: "Image",
+		action: E.insertImage
+	}
+}, le = class extends t {
+	static observedAttributes = [
+		"value",
+		"mode",
+		"toolbar",
+		"placeholder",
+		"readonly",
+		"disabled",
+		"name",
+		"src"
+	];
+	static formAssociated = !0;
+	#e;
+	#t = new $();
+	#n = new e(this);
+	#r = null;
+	#i = null;
+	#a = "";
+	#o = new o();
+	#s = new o();
+	#c = null;
+	#l = null;
+	constructor() {
+		super(), this.#e = this.attachInternals();
+	}
+	get value() {
+		return this.#r ? this.#r.state.doc.toString() : this.getAttribute("value") ?? "";
+	}
+	set value(e) {
+		this.#r && this.#r.state.doc.toString() !== e && this.#r.dispatch({ changes: {
+			from: 0,
+			to: this.#r.state.doc.length,
+			insert: e
+		} }), this.#e.setFormValue(e);
+	}
+	get mode() {
+		return this.#t.mode.value;
+	}
+	set mode(e) {
+		this.#t.setMode(e), this.setAttribute("mode", e);
+	}
+	get toolbar() {
+		return this.#t.toolbar.value;
+	}
+	set toolbar(e) {
+		this.#t.setToolbar(e);
+	}
+	get placeholder() {
+		return this.#t.placeholder.value;
+	}
+	set placeholder(e) {
+		this.#t.placeholder.value = e, this.setAttribute("placeholder", e);
+	}
+	get readOnly() {
+		return this.#t.readonly.value;
+	}
+	set readOnly(e) {
+		this.#t.readonly.value = e, this.toggleAttribute("readonly", e);
+	}
+	get disabled() {
+		return this.#t.disabled.value;
+	}
+	set disabled(e) {
+		this.#t.disabled.value = e, this.toggleAttribute("disabled", e);
+	}
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(e) {
+		this.setAttribute("name", e);
+	}
+	get src() {
+		return this.#t.src.value;
+	}
+	set src(e) {
+		this.#t.src.value = e, e == null ? this.removeAttribute("src") : this.setAttribute("src", e);
+	}
+	get loading() {
+		return this.#n.loading.value;
+	}
+	get saving() {
+		return this.#n.saving.value;
+	}
+	get dirty() {
+		return this.#n.dirty.value;
+	}
+	get error() {
+		return this.#n.error.value;
+	}
+	/** Proxy to editor commands — each method auto-passes the internal EditorView. */
+	get commands() {
+		let e = this.#r;
+		if (!e) {
+			let e = () => !1;
+			return {
+				toggleBold: e,
+				toggleItalic: e,
+				toggleCode: e,
+				toggleStrikethrough: e,
+				setHeading: e,
+				toggleBulletList: e,
+				toggleOrderedList: e,
+				toggleBlockquote: e,
+				insertLink: e,
+				insertImage: e,
+				insertHorizontalRule: e
+			};
+		}
+		return {
+			toggleBold: (t) => E.toggleBold(e),
+			toggleItalic: (t) => E.toggleItalic(e),
+			toggleCode: (t) => E.toggleCode(e),
+			toggleStrikethrough: (t) => E.toggleStrikethrough(e),
+			setHeading: (t, n) => E.setHeading(e, n),
+			toggleBulletList: (t) => E.toggleBulletList(e),
+			toggleOrderedList: (t) => E.toggleOrderedList(e),
+			toggleBlockquote: (t) => E.toggleBlockquote(e),
+			insertLink: (t, n, r) => E.insertLink(e, n, r),
+			insertImage: (t, n, r) => E.insertImage(e, n, r),
+			insertHorizontalRule: (t) => E.insertHorizontalRule(e)
+		};
+	}
+	focus() {
+		this.#r?.focus();
+	}
+	getSelection() {
+		if (!this.#r) return {
+			from: 0,
+			to: 0,
+			text: ""
+		};
+		let { from: e, to: t } = this.#r.state.selection.main;
+		return {
+			from: e,
+			to: t,
+			text: this.#r.state.sliceDoc(e, t)
+		};
+	}
+	insertText(e, t) {
+		if (!this.#r) return;
+		let n = t ?? this.#r.state.selection.main.head;
+		this.#r.dispatch({ changes: {
+			from: n,
+			to: n,
+			insert: e
+		} });
+	}
+	/** Save current content to the `src` URL via PUT. */
+	async save() {
+		let e = this.#t.src.value;
+		if (!e) return !1;
+		let t = await this.#n.save(e, this.value);
+		return t && this.dispatchEvent(new CustomEvent("nui-save", {
+			bubbles: !0,
+			composed: !0
+		})), t;
+	}
+	/** Reload content from the `src` URL. */
+	async reload() {
+		let e = this.#t.src.value;
+		if (!e) return;
+		let t = await this.#n.load(e);
+		t !== null && (this.value = t, this.dispatchEvent(new CustomEvent("nui-load", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: t }
+		})));
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t === n) return;
+		let r = this.#t;
+		switch (e) {
+			case "value":
+				this.#r && this.#r.state.doc.toString() !== (n ?? "") && this.#r.dispatch({ changes: {
+					from: 0,
+					to: this.#r.state.doc.length,
+					insert: n ?? ""
+				} }), this.#e.setFormValue(n ?? "");
+				break;
+			case "mode":
+				(n === "preview" || n === "source") && (r.mode.value = n);
+				break;
+			case "toolbar":
+				r.toolbar.value = n === null ? Q : n.split(",").map((e) => e.trim()).filter(Boolean);
+				break;
+			case "placeholder":
+				r.placeholder.value = n ?? "";
+				break;
+			case "readonly":
+				r.readonly.value = n !== null;
+				break;
+			case "disabled":
+				r.disabled.value = n !== null;
+				break;
+			case "src":
+				r.src.value = n;
+				break;
+		}
+		super.attributeChangedCallback(e, t, n);
+	}
+	setup() {
+		super.setup();
+		let e = this.#t;
+		e.mode.value = this.getAttribute("mode") || "preview", e.disabled.value = this.hasAttribute("disabled"), e.readonly.value = this.hasAttribute("readonly"), e.placeholder.value = this.getAttribute("placeholder") ?? "";
+		let t = this.getAttribute("toolbar");
+		t && e.setToolbar(t), e.src.value = this.getAttribute("src"), this.#a = this.#u(), this.#d(), this.#m(), this.#h(), this.addEffect(i(this, e.disabled, this.#e)), this.addEffect(() => {
+			let t = e.mode.value;
+			this.#r && this.#r.dispatch({ effects: O.reconfigure(t === "preview" ? X() : Z) }), this.#l && this.#l.setAttribute("value", t), this.dispatchEvent(new CustomEvent("mode-change", {
+				bubbles: !0,
+				composed: !0,
+				detail: { mode: t }
+			}));
+		}), this.addEffect(() => {
+			let t = e.locked.value;
+			this.#r && this.#r.dispatch({ effects: this.#o.reconfigure([s.readOnly.of(t), c.editable.of(!t)]) }), this.#c && this.#c.toggleAttribute("disabled", e.disabled.value);
+		}), this.addEffect(() => {
+			let t = e.placeholder.value;
+			this.#r && this.#r.dispatch({ effects: this.#s.reconfigure(t ? h(t) : []) });
+		}), this.addEffect(() => {
+			e.toolbar.value, this.#f();
+		}), this.addEffect(() => {
+			e.src.value && this.reload();
+		}), this.addEffect(() => {
+			this.toggleAttribute("loading", this.#n.loading.value);
+		}), this.addEffect(() => {
+			this.toggleAttribute("saving", this.#n.saving.value);
+		}), this.addEffect(() => {
+			let e = this.#n.dirty.value;
+			this.toggleAttribute("dirty", e), this.dispatchEvent(new CustomEvent("dirty-change", {
+				bubbles: !0,
+				composed: !0,
+				detail: { dirty: e }
+			}));
+		}), this.addEffect(() => {
+			let e = this.#n.error.value;
+			e && this.dispatchEvent(new CustomEvent("nui-error", {
+				bubbles: !0,
+				composed: !0,
+				detail: { error: e }
+			}));
+		}), this.#e.setFormValue(this.#a);
+	}
+	teardown() {
+		this.#n.destroy(), this.#r &&= (this.#r.destroy(), null), this.#c = null, this.#l = null, this.#i = null, super.teardown();
+	}
+	/**
+	* Read initial content from a `<script type="text/markdown">` child,
+	* falling back to the `value` attribute. Consumes the script tag.
+	*/
+	#u() {
+		let e = this.querySelector("script[type=\"text/markdown\"]");
+		if (e) {
+			let t = e.textContent ?? "";
+			return e.remove(), t.replace(/^\n/, "");
+		}
+		return this.getAttribute("value") ?? "";
+	}
+	#d() {
+		let e = document.createElement("ui-toolbar");
+		e.setAttribute("size", "sm"), this.#c = e, this.appendChild(e), this.#f();
+	}
+	#f() {
+		let e = this.#c;
+		if (!e) return;
+		e.innerHTML = "", this.#l = null;
+		let t = this.#t.toolbar.value;
+		for (let n of t) {
+			if (n === "|") {
+				let t = document.createElement("ui-divider");
+				t.setAttribute("vertical", ""), e.appendChild(t);
+				continue;
+			}
+			if (n === "mode-toggle") {
+				this.#p(e);
+				continue;
+			}
+			let t = ce[n];
+			if (!t) continue;
+			let r = document.createElement("ui-button");
+			r.setAttribute("variant", "ghost"), r.setAttribute("size", "sm"), r.setAttribute("square", ""), r.setAttribute("aria-label", t.label), r.setAttribute("title", t.label);
+			let i = document.createElement("ui-icon");
+			i.setAttribute("name", t.icon), r.appendChild(i), r.addEventListener("ui-press", this.#g(t.action)), e.appendChild(r);
+		}
+	}
+	#p(e) {
+		let t = document.createElement("ui-segmented-control");
+		t.setAttribute("size", "sm"), t.setAttribute("value", this.#t.mode.value), this.#l = t;
+		let n = document.createElement("ui-segment");
+		n.setAttribute("value", "preview"), n.textContent = "Preview";
+		let r = document.createElement("ui-segment");
+		r.setAttribute("value", "source"), r.textContent = "Source", t.appendChild(n), t.appendChild(r), t.addEventListener("ui-change", this.#_), e.appendChild(t);
+	}
+	#m() {
+		let e = document.createElement("div");
+		e.className = "nui-editor-surface", this.#i = e, this.appendChild(e);
+	}
+	#h() {
+		if (!this.#i) return;
+		let e = this.#t, t = this.#a, n = e.mode.value, r = e.placeholder.value, i = e.locked.value, a = [
+			ee,
+			u,
+			l,
+			d(),
+			D,
+			O.of(n === "preview" ? X() : Z),
+			this.#o.of([s.readOnly.of(i), c.editable.of(!i)]),
+			this.#s.of(r ? h(r) : []),
+			c.updateListener.of((e) => {
+				if (e.docChanged) {
+					let t = e.state.doc.toString();
+					this.#e.setFormValue(t), this.#n.markDirty(), this.dispatchEvent(new CustomEvent("change", {
+						bubbles: !0,
+						composed: !0,
+						detail: { value: t }
+					}));
+				}
+			})
+		];
+		this.#r = new c({
+			state: s.create({
+				doc: t,
+				extensions: a
+			}),
+			parent: this.#i
+		});
+	}
+	#g(e) {
+		return () => {
+			this.#r && (e(this.#r), this.#r.focus());
+		};
+	}
+	#_ = (e) => {
+		let t = e.detail;
+		t && (t.value === "preview" || t.value === "source") && (this.#t.mode.value = t.value, this.setAttribute("mode", t.value));
+	};
+};
+export { O as a, D as c, X as i, Q as n, Z as o, $ as r, E as s, le as t };

package/dist/nui-editor-element.d.ts

@@ -0,0 +1,67 @@
+import { UIElement } from '@nonoun/native-ui';
+import type { EditorCommands } from './commands.ts';
+import type { ViewMode } from './editor-store.ts';
+/**
+ * Markdown content editor with live preview and source modes.
+ *
+ * Built on CodeMirror 6, renders a toolbar and a rich editing surface.
+ * Supports form association, reactive mode switching, and configurable toolbars.
+ *
+ * @attr {string} value - The markdown string
+ * @attr {string} mode - Active view mode: "preview" or "source"
+ * @attr {string} toolbar - Comma-separated toolbar button keys
+ * @attr {string} placeholder - Placeholder text for empty editor
+ * @attr {boolean} readonly - Disable editing
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string} name - Form field name
+ * @attr {string} src - URL to load/save content from
+ * @fires change - Fired when document content changes with `{ value }` detail
+ * @fires mode-change - Fired when mode is toggled with `{ mode }` detail
+ * @fires nui-load - Fired after content is loaded from src
+ * @fires nui-save - Fired after content is saved to src
+ * @fires nui-error - Fired on load/save error with `{ error }` detail
+ * @fires dirty-change - Fired when dirty state changes with `{ dirty }` detail
+ */
+export declare class NuiEditor extends UIElement {
+    #private;
+    static observedAttributes: string[];
+    static formAssociated: boolean;
+    constructor();
+    get value(): string;
+    set value(val: string);
+    get mode(): ViewMode;
+    set mode(val: ViewMode);
+    get toolbar(): string[];
+    set toolbar(val: string[] | string);
+    get placeholder(): string;
+    set placeholder(val: string);
+    get readOnly(): boolean;
+    set readOnly(val: boolean);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get name(): string;
+    set name(val: string);
+    get src(): string | null;
+    set src(val: string | null);
+    get loading(): boolean;
+    get saving(): boolean;
+    get dirty(): boolean;
+    get error(): string | null;
+    /** Proxy to editor commands — each method auto-passes the internal EditorView. */
+    get commands(): EditorCommands;
+    focus(): void;
+    getSelection(): {
+        from: number;
+        to: number;
+        text: string;
+    };
+    insertText(text: string, position?: number): void;
+    /** Save current content to the `src` URL via PUT. */
+    save(): Promise<boolean>;
+    /** Reload content from the `src` URL. */
+    reload(): Promise<void>;
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    setup(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=nui-editor-element.d.ts.map

package/dist/nui-editor-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nui-editor-element.d.ts","sourceRoot":"","sources":["../src/nui-editor-element.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAA2C,MAAM,mBAAmB,CAAC;AAMvF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AA8BlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,SAAU,SAAQ,SAAS;;IACtC,MAAM,CAAC,kBAAkB,WAAsF;IAC/G,MAAM,CAAC,cAAc,UAAQ;;IAwB7B,IAAI,KAAK,IAAI,MAAM,CAKlB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAUpB;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,QAAQ,EAGrB;IAED,IAAI,OAAO,IAAI,MAAM,EAAE,CAEtB;IAED,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,EAEjC;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,WAAW,CAAC,GAAG,EAAE,MAAM,EAG1B;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,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAEnB;IAED,IAAI,GAAG,IAAI,MAAM,GAAG,IAAI,CAEvB;IAED,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAIzB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IAID,kFAAkF;IAClF,IAAI,QAAQ,IAAI,cAAc,CAgC7B;IAEQ,KAAK,IAAI,IAAI;IAItB,YAAY,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;IAM1D,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAQjD,qDAAqD;IAC/C,IAAI,IAAI,OAAO,CAAC,OAAO,CAAC;IAU9B,yCAAyC;IACnC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAc7B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAyCpF,KAAK,IAAI,IAAI;IAuHb,QAAQ,IAAI,IAAI;CAkLjB"}

package/dist/nui-editor.css

@@ -0,0 +1,195 @@
+/**
+ * nui-editor.css
+ * Markdown content editor — toolbar + CodeMirror surface + optional preview pane.
+ * Follows NativeUI CSS conventions: @layer ui, :where() selectors, --n-* locals.
+ */
+
+@layer ui {
+
+  /* ------------------------------------------------------------------ */
+  /*  Host element                                                       */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    border: 1px solid var(--n-border-muted-neutral);
+    border-radius: var(--n-radius, 0.5rem);
+    overflow: hidden;
+    min-height: 300px;
+    background: #282c34;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Toolbar                                                            */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) > :where(ui-toolbar) {
+    border-bottom: 1px solid color-mix(in oklch, var(--n-border-muted-neutral), transparent 50%);
+    background: #21252b;
+    min-height: 2.5rem;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Editor surface                                                     */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.nui-editor-surface) {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :where(nui-editor) :where(.cm-editor) {
+    height: 100%;
+    font-size: 0.875rem;
+    line-height: 1.6;
+  }
+
+  :where(nui-editor) :where(.cm-scroller) {
+    overflow: auto;
+    padding: 1rem;
+  }
+
+  :where(nui-editor) :where(.cm-content) {
+    padding: 0;
+  }
+
+  :where(nui-editor) :where(.cm-gutters) {
+    display: none;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Live preview — inline decorations                                  */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.md-bold) {
+    font-weight: 700;
+  }
+
+  :where(nui-editor) :where(.md-italic) {
+    font-style: italic;
+  }
+
+  :where(nui-editor) :where(.md-code) {
+    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
+    background: color-mix(in oklch, var(--n-panel-neutral, #3e4451), transparent 50%);
+    border-radius: 0.1875rem;
+    padding: 0.0625rem 0.25rem;
+  }
+
+  :where(nui-editor) :where(.md-strikethrough) {
+    text-decoration: line-through;
+  }
+
+  :where(nui-editor) :where(.md-link) {
+    color: #61afef;
+    text-decoration: underline;
+  }
+
+  :where(nui-editor) :where(.md-url) {
+    opacity: 0.4;
+    font-size: 0.85em;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Live preview — syntax markers                                      */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.md-syntax-marker) {
+    opacity: 0.3;
+  }
+
+  :where(nui-editor) :where(.md-syntax-marker-visible) {
+    opacity: 0.6;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Live preview — headings                                            */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.md-heading) {
+    font-weight: 700;
+  }
+
+  :where(nui-editor) :where(.md-heading-1) {
+    font-size: 1.5em;
+  }
+
+  :where(nui-editor) :where(.md-heading-2) {
+    font-size: 1.25em;
+  }
+
+  :where(nui-editor) :where(.md-heading-3) {
+    font-size: 1.1em;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Live preview — lists                                               */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.md-list-item) {
+    padding-left: 0.25em;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Live preview — blockquote                                          */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.md-blockquote) {
+    border-left: 3px solid #61afef;
+    padding-left: 1em;
+    opacity: 0.85;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Live preview — code blocks                                         */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.md-code-block) {
+    background: color-mix(in oklch, #1e2127, transparent 30%);
+    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
+    font-size: 0.8125rem;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Live preview — horizontal rule                                     */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.md-hr) {
+    border-bottom: 1px solid color-mix(in oklch, var(--n-border-muted-neutral), transparent 30%);
+    margin: 0.5em 0;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Live preview — image widget                                        */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.md-image) {
+    max-width: 100%;
+    border-radius: 0.375rem;
+    margin: 0.5em 0;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  States                                                             */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor[readonly]) :where(.cm-content) {
+    cursor: default;
+  }
+
+  :where(nui-editor)[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /*  Placeholder                                                        */
+  /* ------------------------------------------------------------------ */
+
+  :where(nui-editor) :where(.cm-placeholder) {
+    color: #7d8799;
+    font-style: italic;
+  }
+
+}

package/dist/nui-editor.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./nui-editor-element-S_Z8i0qQ.js";
+export { r as DEFAULT_TOOLBAR, a as EditorStore, s as NuiEditor, o as commands, n as createPreviewExtension, t as markdownKeymap, e as previewCompartment, i as sourceExtension };

package/dist/register.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Register nui-editor
+ *
+ * Side-effect module that registers the <nui-editor> custom element.
+ *
+ * Usage:
+ *   import '@nonoun/native-editor/register';
+ */
+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":"AAAA;;;;;;;GAOG"}

package/dist/register.js

@@ -0,0 +1,11 @@
+import { t as e } from "./nui-editor-element-S_Z8i0qQ.js";
+import { define as t } from "@nonoun/native-ui";
+/**
+* Register nui-editor
+*
+* Side-effect module that registers the <nui-editor> custom element.
+*
+* Usage:
+*   import '@nonoun/nui-editor/register';
+*/
+t("nui-editor", e);

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@nonoun/native-editor",
+  "version": "0.2.0",
+  "description": "Markdown content editor with live preview for @nonoun/native-ui",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/native-editor.js",
+  "module": "./dist/native-editor.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/native-editor.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "default": "./dist/register.js"
+    },
+    "./css": "./dist/native-editor.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/register.js"
+  ],
+  "peerDependencies": {
+    "@nonoun/native-ui": ">=0.5.0"
+  },
+  "dependencies": {
+    "@nonoun/native-codemirror": "^0.1.0",
+    "@codemirror/lang-markdown": "^6.3.2",
+    "@lezer/markdown": "^1.3.2"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run build:types",
+    "build:js": "vite build",
+    "build:css": "cp src/css/native-editor.css dist/native-editor.css",
+    "build:types": "tsc -p tsconfig.build.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}