@nonoun/native-playground 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { NuiPlayground } from './nui-playground-element.ts';
+export { NPlayground } from './playground-element.ts';
 export { createPlaygroundStore } from './playground-store.ts';
 export type { PlaygroundStore, ConsoleEntry } from './playground-store.ts';
 export { createEditor } from './editors.ts';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/native-playground.css

@@ -0,0 +1,244 @@
+@layer ui {
+  /* --- Host element --- */
+  :where(native-playground) {
+    /* Layout tokens */
+    --n-pg-min-height: 400px;
+    --n-pg-radius: var(--n-radius-lg, 0.75rem);
+    --n-pg-console-max-height: 200px;
+
+    /* Code-editor chrome tokens — NativeUI first, one-dark fallbacks */
+    --n-pg-chrome: var(--n-panel-neutral, #21252b);
+    --n-pg-editor-bg: var(--n-control-neutral, #282c34);
+    --n-pg-console-bg: var(--n-body-neutral, #1e2127);
+    --n-pg-border-color: var(--n-border-muted-neutral, #3e4451);
+    --n-pg-border: 1px solid var(--n-pg-border-color);
+    --n-pg-preview-bg: var(--n-body-neutral, #ffffff);
+
+    /* Text tokens — NativeUI first, one-dark fallbacks */
+    --n-pg-text: var(--n-ink-neutral, #abb2bf);
+    --n-pg-text-muted: var(--n-ink-muted-neutral, #7d8799);
+    --n-pg-text-strong: var(--n-ink-strong-neutral, #e5e7eb);
+
+    /* Accent tokens — NativeUI first, one-dark fallbacks */
+    --n-pg-accent: var(--n-ink-accent, #61afef);
+    --n-pg-run: var(--n-ink-success, #98c379);
+    --n-pg-run-hover: var(--n-ink-hover-success, #b5e890);
+    --n-pg-run-hover-bg: var(--n-control-success, #333d37);
+    --n-pg-warn: var(--n-ink-warning, #e5c07b);
+    --n-pg-error: var(--n-ink-danger, #e06c75);
+
+    display: grid;
+    grid-template-rows: auto 1fr;
+    min-height: var(--n-pg-min-height);
+    border-radius: var(--n-pg-radius);
+    border: var(--n-pg-border);
+    overflow: hidden;
+    contain: layout;
+    container-type: inline-size;
+  }
+
+  /* Toolbar button hover background (ghost variant forces transparent) */
+  :where(native-playground) > :where(n-card-header) :where(n-button):hover,
+  :where(native-playground) > :where(n-card-header) :where(n-button)[force-hover] {
+    background: var(--n-pg-editor-bg);
+  }
+
+  /* Run button — green accent override */
+  :where(native-playground) :where(.pg-btn-run) {
+    --n-color: var(--n-pg-run);
+    --n-color-hover: var(--n-pg-run-hover);
+  }
+
+  :where(native-playground) :where(.pg-btn-run):hover,
+  :where(native-playground) :where(.pg-btn-run)[force-hover] {
+    background: var(--n-pg-run-hover-bg);
+  }
+
+  /* --- Split layout (editor + handle + preview) --- */
+  :where(native-playground) > :where(.pg-split) {
+    display: flex;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* Vertical orientation */
+  :where(native-playground[orientation="vertical"]) > :where(.pg-split) {
+    flex-direction: column;
+  }
+
+  /* Auto orientation via container query */
+  @container (max-width: 600px) {
+    :where(native-playground[orientation="auto"]) > :where(.pg-split),
+    :where(native-playground:not([orientation])) > :where(.pg-split) {
+      flex-direction: column;
+    }
+  }
+
+  /* --- Resize handle (inside editor, positioned at edge) --- */
+  :where(native-playground) :where(.pg-resize-handle) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 6px;
+    cursor: col-resize;
+    background: transparent;
+    transition: background 150ms;
+    z-index: 1;
+  }
+
+  :where(native-playground) :where(.pg-resize-handle):hover,
+  :where(native-playground) :where(.pg-editor[resizing]) :where(.pg-resize-handle) {
+    background: var(--n-pg-accent);
+  }
+
+  /* Vertical handle */
+  :where(native-playground[orientation="vertical"]) :where(.pg-resize-handle) {
+    top: auto;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: 6px;
+    cursor: row-resize;
+  }
+
+  @container (max-width: 600px) {
+    :where(native-playground[orientation="auto"]) :where(.pg-resize-handle),
+    :where(native-playground:not([orientation])) :where(.pg-resize-handle) {
+      top: auto;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: auto;
+      height: 6px;
+      cursor: row-resize;
+    }
+  }
+
+  /* --- Editor region --- */
+  :where(native-playground) :where(.pg-editor) {
+    position: relative;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    flex: 1 1 50%;
+    min-width: 200px;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--n-pg-editor-bg);
+  }
+
+  /* When resized, respect the explicit width */
+  :where(native-playground) :where(.pg-editor[style*="width"]) {
+    flex: none;
+  }
+
+  /* Vertical: respect explicit height instead */
+  :where(native-playground[orientation="vertical"]) :where(.pg-editor) {
+    min-width: 0;
+    min-height: 100px;
+  }
+
+  :where(native-playground[orientation="vertical"]) :where(.pg-editor[style*="height"]) {
+    flex: none;
+  }
+
+  /* Card-header — dark chrome context for toolbar & tab bar */
+  :where(native-playground) :where(n-card-header) {
+    background: var(--n-pg-chrome);
+    border-bottom: var(--n-pg-border);
+    padding: 0;
+    --n-ink: var(--n-pg-text-muted);
+    --n-ink-hover: var(--n-pg-text);
+    --n-ink-strong: var(--n-pg-text-strong);
+    --n-border-muted: transparent;
+    --n-surface: var(--n-pg-accent);
+    --n-surface-ink: var(--n-pg-text-strong);
+  }
+
+  /* Code panels */
+  :where(native-playground) :where(.pg-code-panel) {
+    min-height: 0;
+    overflow: auto;
+  }
+
+  :where(native-playground) :where(.pg-code-panel[hidden]) {
+    display: none;
+  }
+
+  /* CodeMirror overrides */
+  :where(native-playground) :where(.cm-editor) {
+    height: 100%;
+    font-size: 0.8125rem;
+  }
+
+  :where(native-playground) :where(.cm-scroller) {
+    overflow: auto;
+  }
+
+  :where(native-playground) :where(.cm-gutters) {
+    border-right: none;
+  }
+
+  /* --- Console --- */
+  :where(native-playground) :where(.pg-console) {
+    max-height: var(--n-pg-console-max-height);
+    overflow-y: auto;
+    border-top: var(--n-pg-border);
+    background: var(--n-pg-console-bg);
+    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
+    font-size: 0.75rem;
+    padding: 0.375rem 0.5rem;
+    color: var(--n-pg-text);
+  }
+
+  :where(native-playground) :where(.pg-console[hidden]) {
+    display: none;
+  }
+
+  :where(native-playground) :where(.pg-console-line) {
+    padding: 0.125rem 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  :where(native-playground) :where(.pg-console-warn) {
+    color: var(--n-pg-warn);
+  }
+
+  :where(native-playground) :where(.pg-console-error) {
+    color: var(--n-pg-error);
+  }
+
+  /* --- Preview --- */
+  :where(native-playground) :where(.pg-preview) {
+    flex: 1 1 50%;
+    min-width: 200px;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--n-pg-preview-bg);
+    border-left: var(--n-pg-border);
+  }
+
+  :where(native-playground[orientation="vertical"]) :where(.pg-preview) {
+    min-width: 0;
+    min-height: 100px;
+    border-left: none;
+    border-top: var(--n-pg-border);
+  }
+
+  @container (max-width: 600px) {
+    :where(native-playground[orientation="auto"]) :where(.pg-preview),
+    :where(native-playground:not([orientation])) :where(.pg-preview) {
+      border-left: none;
+      border-top: var(--n-pg-border);
+    }
+  }
+
+  :where(native-playground) :where(.pg-preview) > :where(iframe) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}

package/dist/native-playground.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./playground-element-DtAP76El.js";
+export { r as NPlayground, t as buildSrcdoc, n as createEditor, e as createPlaygroundStore };

package/dist/{nui-playground-element-DPT7rZeW.js → playground-element-DtAP76El.js}

@@ -1,68 +1,68 @@
-import { CopyController as e, UIElement as t, signal as n } from "@nonoun/native-ui";
-import { EditorState as r } from "@codemirror/state";
-import { EditorView as i } from "@codemirror/view";
-import { nuiBaseExtensions as a, nuiSyntaxHighlighting as o, nuiTheme as s } from "@nonoun/nui-codemirror";
-import { html as c } from "@codemirror/lang-html";
-import { css as l } from "@codemirror/lang-css";
-import { javascript as u } from "@codemirror/lang-javascript";
-function d(e, t, r) {
+import { CopyController as e, NativeElement as t, PresentController as n, ResizeController as r, signal as i } from "@nonoun/native-ui";
+import { EditorState as a } from "@codemirror/state";
+import { EditorView as o } from "@codemirror/view";
+import { NBaseExtensions as s, NSyntaxHighlighting as c, NTheme as l } from "@nonoun/native-codemirror";
+import { html as u } from "@codemirror/lang-html";
+import { css as d } from "@codemirror/lang-css";
+import { javascript as f } from "@codemirror/lang-javascript";
+function p(e, t, n) {
 	return {
-		html: n(e),
-		css: n(t),
-		js: n(r),
+		html: i(e),
+		css: i(t),
+		js: i(n),
 		initialHtml: e,
 		initialCss: t,
-		initialJs: r,
-		activeTab: n("html"),
-		consoleOpen: n(!1),
-		fullscreen: n(!1),
-		orientation: n("auto"),
-		autoRun: n(!0),
-		debounce: n(300),
-		readonly: n(!1),
-		consoleEntries: n([]),
-		previewTheme: n("")
+		initialJs: n,
+		activeTab: i("html"),
+		consoleOpen: i(!1),
+		fullscreen: i(!1),
+		orientation: i("auto"),
+		autoRun: i(!0),
+		debounce: i(300),
+		readonly: i(!1),
+		consoleEntries: i([]),
+		previewTheme: i("")
 	};
 }
-function f(e) {
+function m(e) {
 	switch (e) {
-		case "html": return c();
-		case "css": return l();
-		case "js": return u();
+		case "html": return u();
+		case "css": return d();
+		case "js": return f();
 	}
 }
-function p(e) {
-	let { parent: t, initialCode: n, language: c, readonly: l = !1, onChange: u } = e, d = [
+function h(e) {
+	let { parent: t, initialCode: n, language: r, readonly: i = !1, onChange: u } = e, d = [
+		l,
+		c,
 		s,
-		o,
-		a,
-		f(c),
-		r.readOnly.of(l)
+		m(r),
+		a.readOnly.of(i)
 	];
-	u && d.push(i.updateListener.of((e) => {
+	u && d.push(o.updateListener.of((e) => {
 		e.docChanged && u(e.state.doc.toString());
 	}));
-	let p = new i({
-		state: r.create({
+	let f = new o({
+		state: a.create({
 			doc: n,
 			extensions: d
 		}),
 		parent: t
 	});
 	return {
-		view: p,
+		view: f,
 		getCode() {
-			return p.state.doc.toString();
+			return f.state.doc.toString();
 		},
 		setCode(e) {
-			p.dispatch({ changes: {
+			f.dispatch({ changes: {
 				from: 0,
-				to: p.state.doc.length,
+				to: f.state.doc.length,
 				insert: e
 			} });
 		},
 		destroy() {
-			p.destroy();
+			f.destroy();
 		}
 	};
 }
@@ -70,10 +70,10 @@ function p(e) {
 * Escape `<\/script>` sequences in user-provided JS to prevent
 * breaking out of the inline script tag.
 */
-function m(e) {
+function g(e) {
 	return e.replace(/<\/script>/gi, "<\\/script>");
 }
-function h(e) {
+function _(e) {
 	let { html: t, css: n, js: r, cssUrl: i, registerUrl: a, themeOverrides: o } = e;
 	return `<!DOCTYPE html>
 <html>
@@ -115,19 +115,19 @@ function h(e) {
       window.parent.postMessage({ type: 'playground:ready' }, '*');
     })();
   <\/script>
-  <script type="module">${m(r)}<\/script>
+  <script type="module">${g(r)}<\/script>
 </body>
 </html>`;
 }
-var g = [
+var v = [
 	"html",
 	"css",
 	"js"
-], _ = {
+], y = {
 	html: "HTML",
 	css: "CSS",
 	js: "JS"
-}, v = /* @__PURE__ */ new WeakMap(), y = class extends t {
+}, b = class extends t {
 	static observedAttributes = [
 		"orientation",
 		"auto-run",
@@ -144,16 +144,19 @@ var g = [
 	#n = null;
 	#r;
 	#i;
-	#a = [];
-	#o = [];
+	#a = null;
+	#o = null;
 	#s = null;
+	#c = [];
+	#l = null;
+	#u = null;
 	/** Manually trigger a preview update. */
 	run() {
-		this.#p();
+		this.#g();
 	}
 	/** Reset all code to initial values. */
 	reset() {
-		this.#m();
+		this.#_();
 	}
 	/** Get the current code from all three editors. */
 	getCode() {
@@ -165,8 +168,8 @@ var g = [
 	}
 	/** Programmatically set code in one or more editors. */
 	setCode(e) {
-		for (let t of g) e[t] !== void 0 && (this.#e[t].value = e[t], this.#t.get(t)?.setCode(e[t]));
-		this.#e.autoRun.value && this.#f();
+		for (let t of v) e[t] !== void 0 && (this.#e[t].value = e[t], this.#t.get(t)?.setCode(e[t]));
+		this.#e.autoRun.value && this.#h();
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n && this.#e) {
@@ -197,69 +200,83 @@ var g = [
 		}
 	}
 	setup() {
-		super.setup(), this.#e = d("", "", ""), this.#g(), this.#i = new e(this, { value: () => this.#e[this.#e.activeTab.value].value }), this.#c(), this.addEffect(() => {
-			let e = this.#e.activeTab.value;
-			for (let t = 0; t < g.length; t++) {
-				let n = g[t] === e;
-				this.#a[t].setAttribute("aria-selected", String(n)), this.#o[t].hidden = !n;
+		if (super.setup(), this.#e = p("", "", ""), this.#y(), this.#i = new e(this, { value: () => this.#e[this.#e.activeTab.value].value }), this.#d(), this.#o = new n(this), this.#u) {
+			let e = this.#e.orientation.value === "vertical";
+			this.#a = new r(this.#u, {
+				handleSelector: ".pg-resize-handle",
+				axis: e ? "vertical" : "horizontal",
+				min: e ? 100 : 200
+			});
+		}
+		this.addEffect(() => {
+			let e = this.#e.orientation.value;
+			if (this.#a) {
+				let t = e === "vertical";
+				this.#a.axis = t ? "vertical" : "horizontal", this.#a.min = t ? 100 : 200, this.#u && (this.#u.style.width = "", this.#u.style.height = "");
 			}
+		}), this.addEffect(() => {
+			let e = this.#e.activeTab.value;
+			for (let t = 0; t < v.length; t++) this.#c[t].hidden = v[t] !== e;
+			this.#s && this.#s.setAttribute("value", e);
 		}), this.addEffect(() => {
 			let e = this.#e.consoleOpen.value;
-			this.#s && (this.#s.hidden = !e);
+			this.#l && (this.#l.hidden = !e);
 		}), this.addEffect(() => {
 			let e = this.#e.consoleEntries.value;
-			this.#h(e);
+			this.#v(e);
 		}), this.addEffect(() => {
-			this.#e.html.value, this.#e.css.value, this.#e.js.value, this.#e.autoRun.value && this.#f();
-		}), window.addEventListener("message", this.#S), this.deferChildren(() => {
-			this.#u(), this.#d(), this.#p();
+			this.#e.html.value, this.#e.css.value, this.#e.js.value, this.#e.autoRun.value && this.#h();
+		}), window.addEventListener("message", this.#E), this.deferChildren(() => {
+			this.#p(), this.#m(), this.#g();
 		});
 	}
 	teardown() {
-		window.removeEventListener("message", this.#S), clearTimeout(this.#r);
+		window.removeEventListener("message", this.#E), clearTimeout(this.#r);
 		for (let e of this.#t.values()) e.destroy();
-		this.#t.clear(), this.#i.destroy(), this.#n = null, this.#s = null, this.#a = [], this.#o = [], super.teardown();
+		this.#t.clear(), this.#i.destroy(), this.#a?.destroy(), this.#a = null, this.#o?.destroy(), this.#o = null, this.#n = null, this.#l = null, this.#u = null, this.#s = null, this.#c = [], super.teardown();
 	}
-	#c() {
-		let e = document.createElement("div");
-		e.className = "pg-toolbar";
-		let t = this.#l("pg-btn pg-btn-run", "Run", "▶ Run");
-		t.addEventListener("click", this.#_);
-		let n = this.#l("pg-btn pg-btn-reset", "Reset", "↺ Reset");
-		n.addEventListener("click", this.#v);
-		let r = this.#l("pg-btn pg-btn-copy", "Copy", "Copy");
-		r.addEventListener("click", this.#y);
-		let i = document.createElement("span");
-		i.className = "pg-spacer";
-		let a = this.#l("pg-btn pg-btn-console", "Console", "Console");
-		a.addEventListener("click", this.#b), e.append(t, n, r, i, a);
-		let o = document.createElement("div");
-		o.className = "pg-split";
+	#d() {
+		let e = document.createElement("n-card-header"), t = document.createElement("n-toolbar");
+		t.setAttribute("variant", "plain"), t.setAttribute("size", "md"), t.setAttribute("fill", "");
+		let n = this.#f("pg-btn-run", "Run", "▶ Run");
+		n.addEventListener("native:press", this.#b);
+		let r = this.#f("", "Reset", "↺ Reset");
+		r.addEventListener("native:press", this.#x);
+		let i = this.#f("", "Copy", "Copy");
+		i.addEventListener("native:press", this.#S);
+		let a = this.#f("", "Console", "Console");
+		a.addEventListener("native:press", this.#C);
+		let o = this.#f("", "Expand", "Expand");
+		o.addEventListener("native:press", this.#w), t.append(n, r, i, a, o), e.appendChild(t);
 		let s = document.createElement("div");
-		s.className = "pg-editor";
+		s.className = "pg-split";
 		let c = document.createElement("div");
-		c.className = "pg-tabs", c.setAttribute("role", "tablist");
-		for (let e of g) {
-			let t = document.createElement("button");
-			t.className = "pg-tab", t.setAttribute("role", "tab"), t.setAttribute("aria-selected", e === this.#e.activeTab.value ? "true" : "false"), t.textContent = _[e], v.set(t, e), t.addEventListener("click", this.#x), c.appendChild(t), this.#a.push(t);
+		c.className = "pg-editor";
+		let l = document.createElement("n-card-header"), u = document.createElement("n-tabs");
+		u.setAttribute("value", this.#e.activeTab.value), u.setAttribute("size", "sm");
+		for (let e of v) {
+			let t = document.createElement("n-tab");
+			t.setAttribute("value", e), t.textContent = y[e], u.appendChild(t);
 		}
-		s.appendChild(c);
-		for (let e = 0; e < g.length; e++) {
+		u.addEventListener("native:change", this.#T), this.#s = u, l.appendChild(u), c.appendChild(l);
+		for (let e = 0; e < v.length; e++) {
 			let t = document.createElement("div");
-			t.className = "pg-code-panel", t.setAttribute("role", "tabpanel"), t.hidden = g[e] !== this.#e.activeTab.value, s.appendChild(t), this.#o.push(t);
+			t.className = "pg-code-panel", t.setAttribute("role", "tabpanel"), t.hidden = v[e] !== this.#e.activeTab.value, c.appendChild(t), this.#c.push(t);
 		}
-		let l = document.createElement("div");
-		l.className = "pg-console", l.hidden = !this.#e.consoleOpen.value, s.appendChild(l), this.#s = l, o.appendChild(s);
-		let u = document.createElement("div");
-		u.className = "pg-preview";
-		let d = document.createElement("iframe");
-		d.setAttribute("sandbox", "allow-scripts"), d.setAttribute("title", "Preview"), u.appendChild(d), this.#n = d, o.appendChild(u), this.append(e, o);
+		let d = document.createElement("div");
+		d.className = "pg-console", d.hidden = !this.#e.consoleOpen.value, c.appendChild(d), this.#l = d;
+		let f = document.createElement("div");
+		f.className = "pg-resize-handle", c.appendChild(f), s.appendChild(c), this.#u = c;
+		let p = document.createElement("div");
+		p.className = "pg-preview";
+		let m = document.createElement("iframe");
+		m.setAttribute("sandbox", "allow-scripts"), m.setAttribute("title", "Preview"), p.appendChild(m), this.#n = m, s.appendChild(p), this.append(e, s);
 	}
-	#l(e, t, n) {
-		let r = document.createElement("button");
-		return r.className = e, r.title = t, r.textContent = n, r;
+	#f(e, t, n) {
+		let r = document.createElement("n-button");
+		return r.className = e, r.title = t, r.setAttribute("variant", "ghost"), r.textContent = n, r;
 	}
-	#u() {
+	#p() {
 		let e = this.querySelectorAll("script[type^=\"playground/\"]"), t = "", n = "", r = "";
 		for (let i of e) {
 			let e = (i.getAttribute("type") ?? "").replace("playground/", ""), a = (i.textContent ?? "").trim();
@@ -278,10 +295,10 @@ var g = [
 		}
 		this.#e.html.value = t, this.#e.css.value = n, this.#e.js.value = r, this.#e.initialHtml = t, this.#e.initialCss = n, this.#e.initialJs = r;
 	}
-	#d() {
+	#m() {
 		let e = this.#e.readonly.value;
-		for (let t = 0; t < g.length; t++) {
-			let n = g[t], r = this.#o[t], i = this.#e[n], a = p({
+		for (let t = 0; t < v.length; t++) {
+			let n = v[t], r = this.#c[t], i = this.#e[n], a = h({
 				parent: r,
 				initialCode: i.value,
 				language: n,
@@ -299,16 +316,16 @@ var g = [
 			this.#t.set(n, a);
 		}
 	}
-	#f() {
+	#h() {
 		clearTimeout(this.#r), this.#r = setTimeout(() => {
-			this.#p();
+			this.#g();
 		}, this.#e.debounce.value);
 	}
-	#p() {
+	#g() {
 		let e = this.#n;
 		if (!e) return;
 		let t = this.getAttribute("css-url") ?? "", n = this.getAttribute("register-url") ?? "", r = this.#e.html.value, i = this.#e.css.value, a = this.#e.js.value;
-		this.#e.consoleEntries.value = [], e.srcdoc = h({
+		this.#e.consoleEntries.value = [], e.srcdoc = _({
 			html: r,
 			css: i,
 			js: a,
@@ -324,7 +341,7 @@ var g = [
 			}
 		}));
 	}
-	#m() {
+	#_() {
 		let { initialHtml: e, initialCss: t, initialJs: n } = this.#e;
 		this.#e.html.value = e, this.#e.css.value = t, this.#e.js.value = n, this.#t.get("html")?.setCode(e), this.#t.get("css")?.setCode(t), this.#t.get("js")?.setCode(n), this.dispatchEvent(new CustomEvent("playground:reset", {
 			bubbles: !0,
@@ -333,10 +350,10 @@ var g = [
 				css: t,
 				js: n
 			}
-		})), this.#p();
+		})), this.#g();
 	}
-	#h(e) {
-		let t = this.#s;
+	#v(e) {
+		let t = this.#l;
 		if (t) {
 			t.textContent = "";
 			for (let n of e) {
@@ -350,7 +367,7 @@ var g = [
 			t.scrollTop = t.scrollHeight;
 		}
 	}
-	#g() {
+	#y() {
 		let e = this.getAttribute("orientation");
 		(e === "horizontal" || e === "vertical" || e === "auto") && (this.#e.orientation.value = e), this.hasAttribute("auto-run") && (this.#e.autoRun.value = !0);
 		let t = this.getAttribute("debounce");
@@ -360,13 +377,13 @@ var g = [
 		let r = this.getAttribute("preview-theme");
 		r && (this.#e.previewTheme.value = r);
 	}
-	#_ = () => {
-		this.#p();
+	#b = () => {
+		this.#g();
 	};
-	#v = () => {
-		this.#m();
+	#x = () => {
+		this.#_();
 	};
-	#y = async () => {
+	#S = async () => {
 		let e = this.#e.activeTab.value, t = this.#e[e].value;
 		await this.#i.copy(), this.dispatchEvent(new CustomEvent("playground:copy", {
 			bubbles: !0,
@@ -376,14 +393,17 @@ var g = [
 			}
 		}));
 	};
-	#b = () => {
+	#C = () => {
 		this.#e.consoleOpen.value = !this.#e.consoleOpen.value;
 	};
-	#x = (e) => {
-		let t = e.currentTarget, n = v.get(t);
-		n && (this.#e.activeTab.value = n);
+	#w = () => {
+		this.#o?.present();
+	};
+	#T = (e) => {
+		let t = e.detail;
+		(t?.value === "html" || t?.value === "css" || t?.value === "js") && (this.#e.activeTab.value = t.value);
 	};
-	#S = (e) => {
+	#E = (e) => {
 		if (e.source !== this.#n?.contentWindow) return;
 		let t = e.data;
 		if (!(!t || typeof t != "object") && t.type === "playground:console") {
@@ -395,4 +415,4 @@ var g = [
 		}
 	};
 };
-export { d as i, h as n, p as r, y as t };
+export { p as i, _ as n, h as r, b as t };

package/dist/{nui-playground-element.d.ts → playground-element.d.ts}

@@ -1,4 +1,4 @@
-import { UIElement } from '@nonoun/native-ui';
+import { NativeElement } from '@nonoun/native-ui';
 import type { TabName } from './editors.ts';
 /**
  * Interactive code playground with live preview.
@@ -22,7 +22,7 @@ import type { TabName } from './editors.ts';
  * @fires playground:copy - When code is copied, detail: { tab, code }
  * @fires playground:reset - When code is reset, detail: { html, css, js }
  */
-export declare class NuiPlayground extends UIElement {
+export declare class NPlayground extends NativeElement {
     #private;
     static observedAttributes: string[];
     /** Manually trigger a preview update. */
@@ -41,4 +41,4 @@ export declare class NuiPlayground extends UIElement {
     setup(): void;
     teardown(): void;
 }
-//# sourceMappingURL=nui-playground-element.d.ts.map
+//# sourceMappingURL=playground-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"playground-element.d.ts","sourceRoot":"","sources":["../src/playground-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuD,MAAM,mBAAmB,CAAC;AAIvG,OAAO,KAAK,EAAkB,OAAO,EAAE,MAAM,cAAc,CAAC;AAM5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,WAAY,SAAQ,aAAa;;IAC5C,MAAM,CAAC,kBAAkB,WAUvB;IAkBF,yCAAyC;IACzC,GAAG,IAAI,IAAI;IAIX,wCAAwC;IACxC,KAAK,IAAI,IAAI;IAIb,mDAAmD;IACnD,OAAO,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE;IAQpD,wDAAwD;IACxD,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI;IAYrD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAqCpF,KAAK,IAAI,IAAI;IA6Fb,QAAQ,IAAI,IAAI;CAwXjB"}

package/dist/register.d.ts

@@ -1,7 +1,7 @@
 /**
- * Register nui-playground
+ * Register native-playground
  *
- * Side-effect module that registers the <nui-playground> custom element.
+ * Side-effect module that registers the <native-playground> custom element.
  *
  * Usage:
  *   import '@nonoun/native-playground/register';

package/dist/register.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-playground",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Embeddable live code sandbox for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",
@@ -28,7 +28,7 @@
     "@nonoun/native-ui": ">=0.5.0"
   },
   "dependencies": {
-    "@nonoun/native-codemirror": "^0.1.0",
+    "@nonoun/native-codemirror": "^0.2.0",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.3"
@@ -36,7 +36,7 @@
   "scripts": {
     "build": "npm run build:js && npm run build:css && npm run build:types",
     "build:js": "vite build",
-    "build:css": "cp src/css/native-playground.css dist/native-playground.css",
+    "build:css": "cp src/css/playground.css dist/native-playground.css",
     "build:types": "tsc -p tsconfig.build.json"
   },
   "publishConfig": {

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

@@ -1 +0,0 @@
-{"version":3,"file":"nui-playground-element.d.ts","sourceRoot":"","sources":["../src/nui-playground-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,mBAAmB,CAAC;AAI9D,OAAO,KAAK,EAAkB,OAAO,EAAE,MAAM,cAAc,CAAC;AAS5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,aAAc,SAAQ,SAAS;;IAC1C,MAAM,CAAC,kBAAkB,WAUvB;IAeF,yCAAyC;IACzC,GAAG,IAAI,IAAI;IAIX,wCAAwC;IACxC,KAAK,IAAI,IAAI;IAIb,mDAAmD;IACnD,OAAO,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE;IAQpD,wDAAwD;IACxD,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI;IAYrD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAqCpF,KAAK,IAAI,IAAI;IAkEb,QAAQ,IAAI,IAAI;CAoWjB"}

package/dist/nui-playground.css

@@ -1,208 +0,0 @@
-@layer ui {
-  /* --- Host element --- */
-  :where(nui-playground) {
-    --n-pg-min-height: 400px;
-    --n-pg-radius: var(--ui-radius-lg, 0.75rem);
-    --n-pg-border: 1px solid color-mix(in oklch, var(--n-border-muted-neutral, #e0e0e0), transparent 50%);
-    --n-pg-chrome: #21252b;
-    --n-pg-editor-bg: #282c34;
-    --n-pg-preview-bg: var(--n-body-neutral, #ffffff);
-    --n-pg-console-bg: #1e2127;
-    --n-pg-console-max-height: 200px;
-    --n-pg-toolbar-height: 2.5rem;
-    --n-pg-text: #abb2bf;
-    --n-pg-text-muted: #6b7280;
-
-    display: grid;
-    grid-template-rows: var(--n-pg-toolbar-height) 1fr;
-    min-height: var(--n-pg-min-height);
-    border-radius: var(--n-pg-radius);
-    border: var(--n-pg-border);
-    overflow: hidden;
-    contain: layout;
-    container-type: inline-size;
-  }
-
-  /* --- Toolbar --- */
-  :where(nui-playground) > :where(.pg-toolbar) {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding-inline: 0.5rem;
-    border-bottom: var(--n-pg-border);
-    background: var(--n-pg-chrome);
-  }
-
-  :where(nui-playground) > :where(.pg-toolbar) :where(.pg-spacer) {
-    flex: 1;
-  }
-
-  /* Toolbar buttons */
-  :where(nui-playground) :where(.pg-btn) {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.25rem 0.625rem;
-    border: none;
-    border-radius: 0.25rem;
-    background: transparent;
-    color: var(--n-pg-text-muted);
-    font-family: inherit;
-    font-size: 0.75rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: color 150ms, background 150ms;
-    white-space: nowrap;
-  }
-
-  :where(nui-playground) :where(.pg-btn):hover {
-    color: var(--n-pg-text);
-    background: var(--n-pg-editor-bg);
-  }
-
-  :where(nui-playground) :where(.pg-btn-run) {
-    color: #98c379;
-  }
-
-  :where(nui-playground) :where(.pg-btn-run):hover {
-    color: #b5e890;
-    background: color-mix(in oklch, #98c379, transparent 85%);
-  }
-
-  /* --- Split layout (editor + preview) --- */
-  :where(nui-playground) > :where(.pg-split) {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  /* Vertical orientation */
-  :where(nui-playground[orientation="vertical"]) > :where(.pg-split) {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-  }
-
-  /* Auto orientation via container query */
-  @container (max-width: 600px) {
-    :where(nui-playground[orientation="auto"]) > :where(.pg-split),
-    :where(nui-playground:not([orientation])) > :where(.pg-split) {
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-    }
-  }
-
-  /* --- Editor region --- */
-  :where(nui-playground) :where(.pg-editor) {
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    min-height: 0;
-    overflow: hidden;
-    background: var(--n-pg-editor-bg);
-  }
-
-  /* Tab bar */
-  :where(nui-playground) :where(.pg-tabs) {
-    display: flex;
-    gap: 0;
-    background: var(--n-pg-chrome);
-    border-bottom: var(--n-pg-border);
-  }
-
-  :where(nui-playground) :where(.pg-tab) {
-    padding: 0.375rem 0.75rem;
-    font-family: inherit;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    cursor: pointer;
-    border: none;
-    background: transparent;
-    color: var(--n-pg-text-muted);
-    border-bottom: 2px solid transparent;
-    transition: color 150ms, border-color 150ms;
-  }
-
-  :where(nui-playground) :where(.pg-tab):hover {
-    color: var(--n-pg-text);
-  }
-
-  :where(nui-playground) :where(.pg-tab[aria-selected="true"]) {
-    color: #e5e7eb;
-    border-bottom-color: #61afef;
-  }
-
-  /* Code panels */
-  :where(nui-playground) :where(.pg-code-panel) {
-    min-height: 0;
-    overflow: auto;
-  }
-
-  :where(nui-playground) :where(.pg-code-panel[hidden]) {
-    display: none;
-  }
-
-  /* CodeMirror overrides */
-  :where(nui-playground) :where(.cm-editor) {
-    height: 100%;
-    font-size: 0.8125rem;
-  }
-
-  :where(nui-playground) :where(.cm-scroller) {
-    overflow: auto;
-  }
-
-  :where(nui-playground) :where(.cm-gutters) {
-    border-right: none;
-  }
-
-  /* --- Console --- */
-  :where(nui-playground) :where(.pg-console) {
-    max-height: var(--n-pg-console-max-height);
-    overflow-y: auto;
-    border-top: var(--n-pg-border);
-    background: var(--n-pg-console-bg);
-    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
-    font-size: 0.75rem;
-    padding: 0.375rem 0.5rem;
-    color: var(--n-pg-text);
-  }
-
-  :where(nui-playground) :where(.pg-console[hidden]) {
-    display: none;
-  }
-
-  :where(nui-playground) :where(.pg-console-line) {
-    padding: 0.125rem 0;
-    white-space: pre-wrap;
-    word-break: break-all;
-  }
-
-  :where(nui-playground) :where(.pg-console-warn) {
-    color: #e5c07b;
-  }
-
-  :where(nui-playground) :where(.pg-console-error) {
-    color: #e06c75;
-  }
-
-  /* --- Preview --- */
-  :where(nui-playground) :where(.pg-preview) {
-    min-height: 0;
-    overflow: hidden;
-    background: var(--n-pg-preview-bg);
-    border-left: var(--n-pg-border);
-  }
-
-  :where(nui-playground[orientation="vertical"]) :where(.pg-preview),
-  :where(nui-playground:not([orientation])) :where(.pg-preview) {
-    border-left: none;
-    border-top: var(--n-pg-border);
-  }
-
-  :where(nui-playground) :where(.pg-preview) > :where(iframe) {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: none;
-  }
-}

package/dist/nui-playground.js

@@ -1,2 +0,0 @@
-import { i as e, n as t, r as n, t as r } from "./nui-playground-element-DPT7rZeW.js";
-export { r as NuiPlayground, t as buildSrcdoc, n as createEditor, e as createPlaygroundStore };