@nonoun/native-playground 0.2.0

package/dist/editors.d.ts

@@ -0,0 +1,17 @@
+import { EditorView } from '@codemirror/view';
+export type TabName = 'html' | 'css' | 'js';
+export interface EditorInstance {
+    view: EditorView;
+    getCode(): string;
+    setCode(code: string): void;
+    destroy(): void;
+}
+export interface EditorOptions {
+    parent: HTMLElement;
+    initialCode: string;
+    language: TabName;
+    readonly?: boolean;
+    onChange?: (code: string) => void;
+}
+export declare function createEditor(options: EditorOptions): EditorInstance;
+//# sourceMappingURL=editors.d.ts.map

package/dist/editors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editors.d.ts","sourceRoot":"","sources":["../src/editors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,IAAI,MAAM,CAAC;IAClB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAcD,wBAAgB,YAAY,CAAC,OAAO,EAAE,aAAa,GAAG,cAAc,CA2CnE"}

package/dist/iframe/template.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Builds an HTML string for use as iframe `srcdoc` in the playground.
+ * Renders user code (HTML, CSS, JS) in an isolated iframe with
+ * native-ui loaded via external CSS and register script URLs.
+ */
+export interface SrcdocOptions {
+    /** User's HTML from the HTML pane */
+    html: string;
+    /** User's CSS from the CSS pane */
+    css: string;
+    /** User's JS from the JS pane */
+    js: string;
+    /** URL to native-ui.css (CDN or bundled) */
+    cssUrl: string;
+    /** URL to native-ui register script (CDN or bundled) */
+    registerUrl: string;
+    /** Optional OKLCH token overrides as CSS custom properties */
+    themeOverrides?: string;
+}
+export declare function buildSrcdoc(options: SrcdocOptions): string;
+//# sourceMappingURL=template.d.ts.map

package/dist/iframe/template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/iframe/template.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,aAAa;IAC5B,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAUD,wBAAgB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CAoD1D"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { NuiPlayground } from './nui-playground-element.ts';
+export { createPlaygroundStore } from './playground-store.ts';
+export type { PlaygroundStore, ConsoleEntry } from './playground-store.ts';
+export { createEditor } from './editors.ts';
+export type { EditorInstance, EditorOptions, TabName } from './editors.ts';
+export { buildSrcdoc } from './iframe/template.ts';
+export type { SrcdocOptions } from './iframe/template.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":"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"}

package/dist/nui-playground-element-DPT7rZeW.js

@@ -0,0 +1,398 @@
+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) {
+	return {
+		html: n(e),
+		css: n(t),
+		js: n(r),
+		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("")
+	};
+}
+function f(e) {
+	switch (e) {
+		case "html": return c();
+		case "css": return l();
+		case "js": return u();
+	}
+}
+function p(e) {
+	let { parent: t, initialCode: n, language: c, readonly: l = !1, onChange: u } = e, d = [
+		s,
+		o,
+		a,
+		f(c),
+		r.readOnly.of(l)
+	];
+	u && d.push(i.updateListener.of((e) => {
+		e.docChanged && u(e.state.doc.toString());
+	}));
+	let p = new i({
+		state: r.create({
+			doc: n,
+			extensions: d
+		}),
+		parent: t
+	});
+	return {
+		view: p,
+		getCode() {
+			return p.state.doc.toString();
+		},
+		setCode(e) {
+			p.dispatch({ changes: {
+				from: 0,
+				to: p.state.doc.length,
+				insert: e
+			} });
+		},
+		destroy() {
+			p.destroy();
+		}
+	};
+}
+/**
+* Escape `<\/script>` sequences in user-provided JS to prevent
+* breaking out of the inline script tag.
+*/
+function m(e) {
+	return e.replace(/<\/script>/gi, "<\\/script>");
+}
+function h(e) {
+	let { html: t, css: n, js: r, cssUrl: i, registerUrl: a, themeOverrides: o } = e;
+	return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="${i}">${o ? `\n  <style id="theme-overrides">:root { ${o} }</style>` : ""}
+  <style id="user-css">${n}</style>
+</head>
+<body>
+  ${t}
+  <script src="${a}" type="module"><\/script>
+  <script>
+    (function() {
+      const _log = console.log;
+      const _warn = console.warn;
+      const _error = console.error;
+      const _clear = console.clear;
+      function send(level, args) {
+        window.parent.postMessage({
+          type: 'playground:console',
+          level: level,
+          args: args.map(function(a) {
+            try { return typeof a === 'object' ? JSON.stringify(a) : String(a); }
+            catch (_e) { return String(a); }
+          })
+        }, '*');
+      }
+      console.log = function() { var args = [].slice.call(arguments); _log.apply(console, args); send('log', args); };
+      console.warn = function() { var args = [].slice.call(arguments); _warn.apply(console, args); send('warn', args); };
+      console.error = function() { var args = [].slice.call(arguments); _error.apply(console, args); send('error', args); };
+      console.clear = function() { _clear.call(console); send('clear', []); };
+      window.addEventListener('error', function(e) {
+        send('error', [e.message + ' (' + e.filename + ':' + e.lineno + ':' + e.colno + ')']);
+      });
+      window.addEventListener('unhandledrejection', function(e) {
+        send('error', ['Unhandled rejection: ' + e.reason]);
+      });
+      window.parent.postMessage({ type: 'playground:ready' }, '*');
+    })();
+  <\/script>
+  <script type="module">${m(r)}<\/script>
+</body>
+</html>`;
+}
+var g = [
+	"html",
+	"css",
+	"js"
+], _ = {
+	html: "HTML",
+	css: "CSS",
+	js: "JS"
+}, v = /* @__PURE__ */ new WeakMap(), y = class extends t {
+	static observedAttributes = [
+		"orientation",
+		"auto-run",
+		"debounce",
+		"active-tab",
+		"console-open",
+		"readonly",
+		"preview-theme",
+		"css-url",
+		"register-url"
+	];
+	#e;
+	#t = /* @__PURE__ */ new Map();
+	#n = null;
+	#r;
+	#i;
+	#a = [];
+	#o = [];
+	#s = null;
+	/** Manually trigger a preview update. */
+	run() {
+		this.#p();
+	}
+	/** Reset all code to initial values. */
+	reset() {
+		this.#m();
+	}
+	/** Get the current code from all three editors. */
+	getCode() {
+		return {
+			html: this.#e.html.value,
+			css: this.#e.css.value,
+			js: this.#e.js.value
+		};
+	}
+	/** 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();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n && this.#e) {
+			switch (e) {
+				case "orientation":
+					this.#e.orientation.value = n ?? "auto";
+					break;
+				case "auto-run":
+					this.#e.autoRun.value = n !== null;
+					break;
+				case "debounce":
+					this.#e.debounce.value = n === null ? 300 : Number(n) || 300;
+					break;
+				case "active-tab":
+					(n === "html" || n === "css" || n === "js") && (this.#e.activeTab.value = n);
+					break;
+				case "console-open":
+					this.#e.consoleOpen.value = n !== null;
+					break;
+				case "readonly":
+					this.#e.readonly.value = n !== null;
+					break;
+				case "preview-theme":
+					this.#e.previewTheme.value = n ?? "";
+					break;
+			}
+			super.attributeChangedCallback(e, t, n);
+		}
+	}
+	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;
+			}
+		}), this.addEffect(() => {
+			let e = this.#e.consoleOpen.value;
+			this.#s && (this.#s.hidden = !e);
+		}), this.addEffect(() => {
+			let e = this.#e.consoleEntries.value;
+			this.#h(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();
+		});
+	}
+	teardown() {
+		window.removeEventListener("message", this.#S), 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();
+	}
+	#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";
+		let s = document.createElement("div");
+		s.className = "pg-editor";
+		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);
+		}
+		s.appendChild(c);
+		for (let e = 0; e < g.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);
+		}
+		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);
+	}
+	#l(e, t, n) {
+		let r = document.createElement("button");
+		return r.className = e, r.title = t, r.textContent = n, r;
+	}
+	#u() {
+		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();
+			switch (e) {
+				case "html":
+					t = a;
+					break;
+				case "css":
+					n = a;
+					break;
+				case "js":
+					r = a;
+					break;
+			}
+			i.remove();
+		}
+		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() {
+		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({
+				parent: r,
+				initialCode: i.value,
+				language: n,
+				readonly: e,
+				onChange: (e) => {
+					i.value = e, this.dispatchEvent(new CustomEvent("playground:change", {
+						bubbles: !0,
+						detail: {
+							tab: n,
+							code: e
+						}
+					}));
+				}
+			});
+			this.#t.set(n, a);
+		}
+	}
+	#f() {
+		clearTimeout(this.#r), this.#r = setTimeout(() => {
+			this.#p();
+		}, this.#e.debounce.value);
+	}
+	#p() {
+		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({
+			html: r,
+			css: i,
+			js: a,
+			cssUrl: t,
+			registerUrl: n,
+			themeOverrides: this.#e.previewTheme.value || void 0
+		}), this.dispatchEvent(new CustomEvent("playground:run", {
+			bubbles: !0,
+			detail: {
+				html: r,
+				css: i,
+				js: a
+			}
+		}));
+	}
+	#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,
+			detail: {
+				html: e,
+				css: t,
+				js: n
+			}
+		})), this.#p();
+	}
+	#h(e) {
+		let t = this.#s;
+		if (t) {
+			t.textContent = "";
+			for (let n of e) {
+				if (n.level === "clear") {
+					t.textContent = "";
+					continue;
+				}
+				let e = document.createElement("div");
+				e.className = "pg-console-line", n.level === "warn" && e.classList.add("pg-console-warn"), n.level === "error" && e.classList.add("pg-console-error"), e.textContent = n.args.join(" "), t.appendChild(e);
+			}
+			t.scrollTop = t.scrollHeight;
+		}
+	}
+	#g() {
+		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");
+		t !== null && (this.#e.debounce.value = Number(t) || 300);
+		let n = this.getAttribute("active-tab");
+		(n === "html" || n === "css" || n === "js") && (this.#e.activeTab.value = n), this.hasAttribute("console-open") && (this.#e.consoleOpen.value = !0), this.hasAttribute("readonly") && (this.#e.readonly.value = !0);
+		let r = this.getAttribute("preview-theme");
+		r && (this.#e.previewTheme.value = r);
+	}
+	#_ = () => {
+		this.#p();
+	};
+	#v = () => {
+		this.#m();
+	};
+	#y = async () => {
+		let e = this.#e.activeTab.value, t = this.#e[e].value;
+		await this.#i.copy(), this.dispatchEvent(new CustomEvent("playground:copy", {
+			bubbles: !0,
+			detail: {
+				tab: e,
+				code: t
+			}
+		}));
+	};
+	#b = () => {
+		this.#e.consoleOpen.value = !this.#e.consoleOpen.value;
+	};
+	#x = (e) => {
+		let t = e.currentTarget, n = v.get(t);
+		n && (this.#e.activeTab.value = n);
+	};
+	#S = (e) => {
+		if (e.source !== this.#n?.contentWindow) return;
+		let t = e.data;
+		if (!(!t || typeof t != "object") && t.type === "playground:console") {
+			let e = {
+				level: t.level ?? "log",
+				args: Array.isArray(t.args) ? t.args : []
+			};
+			this.#e.consoleEntries.value = [...this.#e.consoleEntries.value, e];
+		}
+	};
+};
+export { d as i, h as n, p as r, y as t };

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

@@ -0,0 +1,44 @@
+import { UIElement } from '@nonoun/native-ui';
+import type { TabName } from './editors.ts';
+/**
+ * Interactive code playground with live preview.
+ *
+ * Renders a tabbed code editor (CodeMirror), a sandboxed iframe preview,
+ * toolbar controls, and an optional console panel. Content is sourced from
+ * `<script type="playground/html|css|js">` children at setup time.
+ *
+ * @attr {string} orientation - Layout direction: "horizontal" | "vertical" | "auto" (default "auto")
+ * @attr {boolean} auto-run - Auto-run preview on code changes (default true)
+ * @attr {number} debounce - Debounce delay in ms for auto-run (default 300)
+ * @attr {string} active-tab - Active editor tab: "html" | "css" | "js" (default "html")
+ * @attr {boolean} console-open - Whether the console panel is visible
+ * @attr {boolean} readonly - Disable editing
+ * @attr {string} preview-theme - OKLCH token overrides as CSS custom property string
+ * @attr {string} css-url - URL to native-ui.css for the iframe (required)
+ * @attr {string} register-url - URL to native-ui register script for the iframe (required)
+ *
+ * @fires playground:run - When the preview updates, detail: { html, css, js }
+ * @fires playground:change - When user edits code, detail: { tab, code }
+ * @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 {
+    #private;
+    static observedAttributes: string[];
+    /** Manually trigger a preview update. */
+    run(): void;
+    /** Reset all code to initial values. */
+    reset(): void;
+    /** Get the current code from all three editors. */
+    getCode(): {
+        html: string;
+        css: string;
+        js: string;
+    };
+    /** Programmatically set code in one or more editors. */
+    setCode(code: Partial<Record<TabName, string>>): void;
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    setup(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=nui-playground-element.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,208 @@
+@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

@@ -0,0 +1,2 @@
+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 };

package/dist/playground-store.d.ts

@@ -0,0 +1,24 @@
+import type { Signal } from '@nonoun/native-ui';
+export interface ConsoleEntry {
+    level: 'log' | 'warn' | 'error' | 'clear';
+    args: string[];
+}
+export interface PlaygroundStore {
+    html: Signal<string>;
+    css: Signal<string>;
+    js: Signal<string>;
+    initialHtml: string;
+    initialCss: string;
+    initialJs: string;
+    activeTab: Signal<'html' | 'css' | 'js'>;
+    consoleOpen: Signal<boolean>;
+    fullscreen: Signal<boolean>;
+    orientation: Signal<'horizontal' | 'vertical' | 'auto'>;
+    autoRun: Signal<boolean>;
+    debounce: Signal<number>;
+    readonly: Signal<boolean>;
+    consoleEntries: Signal<ConsoleEntry[]>;
+    previewTheme: Signal<string>;
+}
+export declare function createPlaygroundStore(initialHtml: string, initialCss: string, initialJs: string): PlaygroundStore;
+//# sourceMappingURL=playground-store.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"playground-store.d.ts","sourceRoot":"","sources":["../src/playground-store.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAE9B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAGnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAGlB,SAAS,EAAE,MAAM,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAG1B,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC;IAGvC,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,eAAe,CAsBjB"}

package/dist/register.d.ts

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

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@nonoun/native-playground",
+  "version": "0.2.0",
+  "description": "Embeddable live code sandbox for @nonoun/native-ui",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/native-playground.js",
+  "module": "./dist/native-playground.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/native-playground.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "default": "./dist/register.js"
+    },
+    "./css": "./dist/native-playground.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/register.js"
+  ],
+  "peerDependencies": {
+    "@nonoun/native-ui": ">=0.5.0"
+  },
+  "dependencies": {
+    "@nonoun/native-codemirror": "^0.1.0",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.3"
+  },
+  "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:types": "tsc -p tsconfig.build.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}