@nonoun/native-playground 0.2.1 → 0.2.2

package/dist/editors.d.ts.map

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

package/dist/iframe/template.d.ts

@@ -10,8 +10,10 @@ export interface SrcdocOptions {
     css: string;
     /** User's JS from the JS pane */
     js: string;
-    /** URL to native-ui.css (CDN or bundled) */
-    cssUrl: string;
+    /** Pre-resolved framework CSS to inline as <style> (preferred) */
+    frameworkCss?: string;
+    /** URL to native-ui.css — fallback when frameworkCss is not available */
+    cssUrl?: string;
     /** URL to native-ui register script (CDN or bundled) */
     registerUrl: string;
     /** Optional OKLCH token overrides as CSS custom properties */

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

@@ -1 +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"}
+{"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,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAUD,wBAAgB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CAoE1D"}

package/dist/native-playground.css

@@ -170,6 +170,9 @@
   :where(native-playground) :where(.cm-editor) {
     height: 100%;
     font-size: 0.8125rem;
+    /* Force dark color-scheme so contenteditable text inherits light-on-dark
+       colors even when the parent page uses color-scheme: light dark */
+    color-scheme: dark;
   }
 
   :where(native-playground) :where(.cm-scroller) {

package/dist/native-playground.js

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

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

@@ -47,7 +47,8 @@ function h(e) {
 			doc: n,
 			extensions: d
 		}),
-		parent: t
+		parent: t,
+		root: document
 	});
 	return {
 		view: f,
@@ -74,18 +75,26 @@ function g(e) {
 	return e.replace(/<\/script>/gi, "<\\/script>");
 }
 function _(e) {
-	let { html: t, css: n, js: r, cssUrl: i, registerUrl: a, themeOverrides: o } = e;
+	let { html: t, css: n, js: r, frameworkCss: i, cssUrl: a, registerUrl: o, themeOverrides: s } = 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>` : ""}
+  ${i ? `<style id="framework-css">${i}</style>` : a ? `<link rel="stylesheet" href="${a}">` : ""}${s ? `\n  <style id="theme-overrides">:root { ${s} }</style>` : ""}
+  <style id="base-styles">
+    :where(body) {
+      font-family: var(--n-font-family, system-ui, -apple-system, sans-serif);
+      line-height: var(--n-text-line-height, 1.5);
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+    }
+  </style>
   <style id="user-css">${n}</style>
 </head>
 <body>
   ${t}
-  <script src="${a}" type="module"><\/script>
+  <script src="${o}" type="module"><\/script>
   <script>
     (function() {
       const _log = console.log;
@@ -146,17 +155,19 @@ var v = [
 	#i;
 	#a = null;
 	#o = null;
-	#s = null;
-	#c = [];
+	#s = "";
+	#c = "";
 	#l = null;
-	#u = null;
+	#u = [];
+	#d = null;
+	#f = null;
 	/** Manually trigger a preview update. */
 	run() {
-		this.#g();
+		return this.#y();
 	}
 	/** Reset all code to initial values. */
 	reset() {
-		this.#_();
+		this.#b();
 	}
 	/** Get the current code from all three editors. */
 	getCode() {
@@ -169,7 +180,7 @@ var v = [
 	/** Programmatically set code in one or more editors. */
 	setCode(e) {
 		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();
+		this.#e.autoRun.value && this.#v();
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n && this.#e) {
@@ -200,9 +211,9 @@ var v = [
 		}
 	}
 	setup() {
-		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) {
+		if (super.setup(), this.#e = p("", "", ""), this.#S(), this.#i = new e(this, { value: () => this.#e[this.#e.activeTab.value].value }), this.#p(), this.#o = new n(this), this.#f) {
 			let e = this.#e.orientation.value === "vertical";
-			this.#a = new r(this.#u, {
+			this.#a = new r(this.#f, {
 				handleSelector: ".pg-resize-handle",
 				axis: e ? "vertical" : "horizontal",
 				min: e ? 100 : 200
@@ -212,42 +223,42 @@ var v = [
 			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.#a.axis = t ? "vertical" : "horizontal", this.#a.min = t ? 100 : 200, this.#f && (this.#f.style.width = "", this.#f.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);
+			for (let t = 0; t < v.length; t++) this.#u[t].hidden = v[t] !== e;
+			this.#l && this.#l.setAttribute("value", e);
 		}), this.addEffect(() => {
 			let e = this.#e.consoleOpen.value;
-			this.#l && (this.#l.hidden = !e);
+			this.#d && (this.#d.hidden = !e);
 		}), this.addEffect(() => {
 			let e = this.#e.consoleEntries.value;
-			this.#v(e);
+			this.#x(e);
 		}), this.addEffect(() => {
-			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();
+			this.#e.html.value, this.#e.css.value, this.#e.js.value, this.#e.autoRun.value && this.#v();
+		}), window.addEventListener("message", this.#k), this.deferChildren(() => {
+			this.#h(), this.#g(), this.#y();
 		});
 	}
 	teardown() {
-		window.removeEventListener("message", this.#E), clearTimeout(this.#r);
+		window.removeEventListener("message", this.#k), clearTimeout(this.#r);
 		for (let e of this.#t.values()) e.destroy();
-		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();
+		this.#t.clear(), this.#i.destroy(), this.#a?.destroy(), this.#a = null, this.#o?.destroy(), this.#o = null, this.#n = null, this.#d = null, this.#f = null, this.#l = null, this.#u = [], super.teardown();
 	}
-	#d() {
+	#p() {
 		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 n = this.#m("pg-btn-run", "Run", "▶ Run");
+		n.addEventListener("native:press", this.#C);
+		let r = this.#m("", "Reset", "↺ Reset");
+		r.addEventListener("native:press", this.#w);
+		let i = this.#m("", "Copy", "Copy");
+		i.addEventListener("native:press", this.#T);
+		let a = this.#m("", "Console", "Console");
+		a.addEventListener("native:press", this.#E);
+		let o = this.#m("", "Expand", "Expand");
+		o.addEventListener("native:press", this.#D), t.append(n, r, i, a, o), e.appendChild(t);
 		let s = document.createElement("div");
 		s.className = "pg-split";
 		let c = document.createElement("div");
@@ -258,25 +269,25 @@ var v = [
 			let t = document.createElement("n-tab");
 			t.setAttribute("value", e), t.textContent = y[e], u.appendChild(t);
 		}
-		u.addEventListener("native:change", this.#T), this.#s = u, l.appendChild(u), c.appendChild(l);
+		u.addEventListener("native:change", this.#O), this.#l = 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 = v[e] !== this.#e.activeTab.value, c.appendChild(t), this.#c.push(t);
+			t.className = "pg-code-panel", t.setAttribute("role", "tabpanel"), t.hidden = v[e] !== this.#e.activeTab.value, c.appendChild(t), this.#u.push(t);
 		}
 		let d = document.createElement("div");
-		d.className = "pg-console", d.hidden = !this.#e.consoleOpen.value, c.appendChild(d), this.#l = d;
+		d.className = "pg-console", d.hidden = !this.#e.consoleOpen.value, c.appendChild(d), this.#d = d;
 		let f = document.createElement("div");
-		f.className = "pg-resize-handle", c.appendChild(f), s.appendChild(c), this.#u = c;
+		f.className = "pg-resize-handle", c.appendChild(f), s.appendChild(c), this.#f = 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);
 	}
-	#f(e, t, n) {
+	#m(e, t, n) {
 		let r = document.createElement("n-button");
 		return r.className = e, r.title = t, r.setAttribute("variant", "ghost"), r.textContent = n, r;
 	}
-	#p() {
+	#h() {
 		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();
@@ -295,10 +306,10 @@ var v = [
 		}
 		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;
 	}
-	#m() {
+	#g() {
 		let e = this.#e.readonly.value;
 		for (let t = 0; t < v.length; t++) {
-			let n = v[t], r = this.#c[t], i = this.#e[n], a = h({
+			let n = v[t], r = this.#u[t], i = this.#e[n], a = h({
 				parent: r,
 				initialCode: i.value,
 				language: n,
@@ -316,12 +327,33 @@ var v = [
 			this.#t.set(n, a);
 		}
 	}
-	#h() {
+	/**
+	* Resolve a CSS URL to inline text. In Vite dev mode, CSS files with @import
+	* are served as JS modules (Content-Type: text/javascript) which breaks
+	* <link rel="stylesheet"> in srcdoc iframes. Using ?inline dynamic import
+	* gets the resolved CSS as a string. Falls back to fetch() for production
+	* CDN URLs where ?inline isn't available.
+	*/
+	async #_(e) {
+		if (!e) return "";
+		if (e === this.#c && this.#s) return this.#s;
+		let t = "";
+		try {
+			t = (await import(
+				/* @vite-ignore */
+				e + "?inline"
+)).default;
+		} catch {
+			t = await (await fetch(e)).text();
+		}
+		return this.#c = e, this.#s = t, t;
+	}
+	#v() {
 		clearTimeout(this.#r), this.#r = setTimeout(() => {
-			this.#g();
+			this.#y();
 		}, this.#e.debounce.value);
 	}
-	#g() {
+	async #y() {
 		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;
@@ -329,7 +361,7 @@ var v = [
 			html: r,
 			css: i,
 			js: a,
-			cssUrl: t,
+			frameworkCss: await this.#_(t),
 			registerUrl: n,
 			themeOverrides: this.#e.previewTheme.value || void 0
 		}), this.dispatchEvent(new CustomEvent("playground:run", {
@@ -341,7 +373,7 @@ var v = [
 			}
 		}));
 	}
-	#_() {
+	#b() {
 		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,
@@ -350,10 +382,10 @@ var v = [
 				css: t,
 				js: n
 			}
-		})), this.#g();
+		})), this.#y();
 	}
-	#v(e) {
-		let t = this.#l;
+	#x(e) {
+		let t = this.#d;
 		if (t) {
 			t.textContent = "";
 			for (let n of e) {
@@ -367,7 +399,7 @@ var v = [
 			t.scrollTop = t.scrollHeight;
 		}
 	}
-	#y() {
+	#S() {
 		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");
@@ -377,13 +409,13 @@ var v = [
 		let r = this.getAttribute("preview-theme");
 		r && (this.#e.previewTheme.value = r);
 	}
-	#b = () => {
-		this.#g();
+	#C = () => {
+		this.#y();
 	};
-	#x = () => {
-		this.#_();
+	#w = () => {
+		this.#b();
 	};
-	#S = async () => {
+	#T = async () => {
 		let e = this.#e.activeTab.value, t = this.#e[e].value;
 		await this.#i.copy(), this.dispatchEvent(new CustomEvent("playground:copy", {
 			bubbles: !0,
@@ -393,17 +425,17 @@ var v = [
 			}
 		}));
 	};
-	#C = () => {
+	#E = () => {
 		this.#e.consoleOpen.value = !this.#e.consoleOpen.value;
 	};
-	#w = () => {
+	#D = () => {
 		this.#o?.present();
 	};
-	#T = (e) => {
+	#O = (e) => {
 		let t = e.detail;
 		(t?.value === "html" || t?.value === "css" || t?.value === "js") && (this.#e.activeTab.value = t.value);
 	};
-	#E = (e) => {
+	#k = (e) => {
 		if (e.source !== this.#n?.contentWindow) return;
 		let t = e.data;
 		if (!(!t || typeof t != "object") && t.type === "playground:console") {

package/dist/playground-element.d.ts

@@ -26,7 +26,7 @@ export declare class NPlayground extends NativeElement {
     #private;
     static observedAttributes: string[];
     /** Manually trigger a preview update. */
-    run(): void;
+    run(): Promise<void>;
     /** Reset all code to initial values. */
     reset(): void;
     /** Get the current code from all three editors. */

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

@@ -1 +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"}
+{"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;IAsBF,yCAAyC;IACzC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IAIpB,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;CAwZjB"}

package/dist/register.js

@@ -1,4 +1,4 @@
-import { t as e } from "./playground-element-DtAP76El.js";
+import { t as e } from "./playground-element-DgFyaxxQ.js";
 import { define as t } from "@nonoun/native-ui";
 /**
 * Register native-playground

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-playground",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Embeddable live code sandbox for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",