@nonoun/native-ui 0.2.10 → 0.4.0

package/dist/inspector.js

@@ -1,609 +0,0 @@
-import { A as e, E as t, It as n, Lt as r, ft as i, ht as a, pt as o, t as s } from "./components.js";
-import { G as c } from "./core.js";
-import { t as l } from "./ui-icon.js";
-var u = class extends r {
-	static observedAttributes = ["data"];
-	#e = null;
-	#t = null;
-	#n = null;
-	attributeChangedCallback(e, t, n) {
-		if (t !== n && e === "data" && n) {
-			try {
-				this.#e = JSON.parse(n);
-			} catch {}
-			this.#t && this.#a();
-		}
-	}
-	setup() {
-		super.setup();
-		let e = this.getAttribute("data");
-		if (e) try {
-			this.#e = JSON.parse(e);
-		} catch {}
-		this.#a(), this.addEventListener("native-tokens-theme-change", this.#r);
-	}
-	teardown() {
-		this.removeEventListener("native-tokens-theme-change", this.#r), this.innerHTML = "", this.#t = null, this.#n = null, super.teardown();
-	}
-	#r = () => {
-		requestAnimationFrame(() => this.#i());
-	};
-	sync() {
-		this.#i();
-	}
-	#i() {
-		if (!this.#e || !this.#t || !this.#n) return;
-		let e = getComputedStyle(document.documentElement).getPropertyValue(this.#e.token).trim();
-		if (e) {
-			this.#t.value = parseFloat(e);
-			let t = this.#e.step ?? .01;
-			this.#n.textContent = parseFloat(e).toFixed(t < .01 ? 3 : 2);
-		}
-	}
-	#a() {
-		if (!this.#e) return;
-		let e = this.#e;
-		this.innerHTML = "";
-		let t = document.createElement("div");
-		t.className = "native-tokens-variable-row";
-		let n = document.createElement("label");
-		n.className = "native-tokens-variable-label", n.textContent = e.name;
-		let r = document.createElement("ui-range");
-		r.setAttribute("min", String(e.min ?? 0)), r.setAttribute("max", String(e.max ?? 1)), r.setAttribute("step", String(e.step ?? .01)), r.setAttribute("size", "xs");
-		let i = getComputedStyle(document.documentElement).getPropertyValue(e.token).trim(), a = i ? parseFloat(i) : e.value;
-		r.setAttribute("value", String(a));
-		let o = e.step ?? .01, s = document.createElement("span");
-		s.className = "native-tokens-variable-value", s.textContent = a.toFixed(o < .01 ? 3 : 2), r.addEventListener("ui-input", ((t) => {
-			let n = t.detail.value;
-			document.documentElement.style.setProperty(e.token, String(n)), s.textContent = n.toFixed(o < .01 ? 3 : 2), this.dispatchEvent(new CustomEvent("native-tokens-change", {
-				bubbles: !0,
-				detail: {
-					token: e.token,
-					value: n
-				}
-			}));
-		})), this.#t = r, this.#n = s, t.append(n, r, s), this.appendChild(t);
-	}
-}, d = class extends r {
-	static observedAttributes = ["data"];
-	#e = [];
-	attributeChangedCallback(e, t, n) {
-		if (t !== n && e === "data" && n) {
-			try {
-				this.#e = JSON.parse(n);
-			} catch {}
-			this.isConnected && this.#n();
-		}
-	}
-	setup() {
-		super.setup();
-		let e = this.getAttribute("data");
-		if (e) try {
-			this.#e = JSON.parse(e);
-		} catch {}
-		this.#n(), this.addEventListener("native-tokens-change", this.#t), this.addEventListener("native-tokens-theme-change", this.#t);
-	}
-	teardown() {
-		this.removeEventListener("native-tokens-change", this.#t), this.removeEventListener("native-tokens-theme-change", this.#t), this.innerHTML = "", super.teardown();
-	}
-	#t = () => {
-		requestAnimationFrame(() => this.#r());
-	};
-	refresh() {
-		this.#r();
-	}
-	#n() {
-		this.innerHTML = "";
-		let e = document.createElement("div");
-		e.className = "native-tokens-colors-strip";
-		for (let t of this.#e) {
-			let n = document.createElement("native-tokens-color-swatch");
-			n.setAttribute("token", t.token), n.setAttribute("name", t.name), e.appendChild(n);
-		}
-		this.appendChild(e);
-	}
-	#r() {
-		this.querySelectorAll("native-tokens-color-swatch").forEach((e) => e.refresh());
-	}
-};
-/** Parse a computed `rgb(...)` / `rgba(...)` string into [r, g, b, a] (0–255, 0–1). */
-function f(e) {
-	let t = e.match(/[\d.]+/g);
-	return !t || t.length < 3 ? [
-		0,
-		0,
-		0,
-		1
-	] : [
-		Number(t[0]),
-		Number(t[1]),
-		Number(t[2]),
-		t[3] === void 0 ? 1 : Number(t[3])
-	];
-}
-/** Relative luminance (ITU-R BT.709). Returns true if light. */
-function p(e, t, n) {
-	let r = [
-		e,
-		t,
-		n
-	].map((e) => (e /= 255, e <= .03928 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4));
-	return .2126 * r[0] + .7152 * r[1] + .0722 * r[2] > .4;
-}
-/** Convert 0–255 component to 2-digit hex. */
-function m(e) {
-	return Math.round(e).toString(16).padStart(2, "0");
-}
-/** sRGB → linear. */
-function h(e) {
-	return e /= 255, e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
-}
-/** sRGB (0–255) → OKLCH via OKLab. Returns [L (0–1), C, H (degrees)]. */
-function g(e, t, n) {
-	let r = h(e), i = h(t), a = h(n), o = .4122214708 * r + .5363325363 * i + .0514459929 * a, s = .2119034982 * r + .6806995451 * i + .1073969566 * a, c = .0883024619 * r + .2817188376 * i + .6299787005 * a, l = Math.cbrt(o), u = Math.cbrt(s), d = Math.cbrt(c), f = .2104542553 * l + .793617785 * u - .0040720468 * d, p = 1.9779984951 * l - 2.428592205 * u + .4505937099 * d, m = .0259040371 * l + .7827717662 * u - .808675766 * d, g = Math.sqrt(p * p + m * m), _ = Math.atan2(m, p) * (180 / Math.PI);
-	return _ < 0 && (_ += 360), [
-		f,
-		g,
-		_
-	];
-}
-/** sRGB (0–255) → HSL. Returns [H (0–360), S (0–100), L (0–100)]. */
-function _(e, t, n) {
-	e /= 255, t /= 255, n /= 255;
-	let r = Math.max(e, t, n), i = Math.min(e, t, n), a = r - i, o = (r + i) / 2;
-	if (a === 0) return [
-		0,
-		0,
-		o * 100
-	];
-	let s = a / (1 - Math.abs(2 * o - 1)), c = 0;
-	return c = r === e ? ((t - n) / a + 6) % 6 : r === t ? (n - e) / a + 2 : (e - t) / a + 4, [
-		c * 60,
-		s * 100,
-		o * 100
-	];
-}
-/** sRGB (0–255) → HSB/HSV. Returns [H (0–360), S (0–100), B (0–100)]. */
-function v(e, t, n) {
-	e /= 255, t /= 255, n /= 255;
-	let r = Math.max(e, t, n), i = r - Math.min(e, t, n), a = r * 100;
-	if (r === 0) return [
-		0,
-		0,
-		a
-	];
-	let o = i / r * 100, s = 0;
-	return i !== 0 && (s = r === e ? ((t - n) / i + 6) % 6 : r === t ? (n - e) / i + 2 : (e - t) / i + 4, s *= 60), [
-		s,
-		o,
-		a
-	];
-}
-function y(e, t, n, r) {
-	let [i, a, o] = g(e, t, n), s = `oklch(${(i * 100).toFixed(1)}% ${a.toFixed(4)} ${o.toFixed(1)})`;
-	return r < 1 ? `oklch(${(i * 100).toFixed(1)}% ${a.toFixed(4)} ${o.toFixed(1)} / ${r.toFixed(2)})` : s;
-}
-function b(e, t, n, r) {
-	let i = `#${m(e)}${m(t)}${m(n)}`;
-	return r < 1 ? `${i}${m(Math.round(r * 255))}` : i;
-}
-function x(e, t, n, r) {
-	return r < 1 ? `rgba(${Math.round(e)}, ${Math.round(t)}, ${Math.round(n)}, ${r.toFixed(2)})` : `rgb(${Math.round(e)}, ${Math.round(t)}, ${Math.round(n)})`;
-}
-function S(e, t, n, r) {
-	let [i, a, o] = _(e, t, n);
-	return r < 1 ? `hsla(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%, ${r.toFixed(2)})` : `hsl(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%)`;
-}
-function C(e, t, n, r) {
-	let [i, a, o] = v(e, t, n);
-	return `hsb(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%)`;
-}
-var w = [
-	{
-		label: "OKLCH",
-		fn: y
-	},
-	{
-		label: "HEX",
-		fn: b
-	},
-	{
-		label: "RGB",
-		fn: x
-	},
-	{
-		label: "HSL",
-		fn: S
-	},
-	{
-		label: "HSB",
-		fn: C
-	}
-], T = class extends r {
-	static observedAttributes = ["token", "name"];
-	#e = null;
-	#t = null;
-	#n = "";
-	get token() {
-		return this.getAttribute("token") ?? "";
-	}
-	set token(e) {
-		this.setAttribute("token", e);
-	}
-	get name() {
-		return this.getAttribute("name") ?? "";
-	}
-	set name(e) {
-		this.setAttribute("name", e);
-	}
-	attributeChangedCallback(e, t, n) {
-		t !== n && (e === "token" && this.isConnected && (this.style.background = n ? `var(${n})` : "", this.title = `${this.name}\n${n}`, requestAnimationFrame(() => this.#a())), e === "name" && this.#t && (this.#t.textContent = n ?? "", this.title = `${n}\n${this.token}`));
-	}
-	setup() {
-		super.setup(), this.token && (this.style.background = `var(${this.token})`, this.title = `${this.name}\n${this.token}`);
-		let e = document.createElement("span");
-		e.className = "native-tokens-swatch-label", e.textContent = this.name, this.#t = e, this.appendChild(e), this.#n = n("swatch"), this.style.setProperty("anchor-name", `--${this.#n}`);
-		let t = document.createElement("div");
-		t.className = "native-tokens-swatch-popover", t.setAttribute("popover", "auto"), t.style.setProperty("position-anchor", `--${this.#n}`), this.#e = t, this.appendChild(t), this.addEventListener("click", this.#i), this.addEventListener("native-tokens-change", this.#r), this.addEventListener("native-tokens-theme-change", this.#r), requestAnimationFrame(() => this.#a());
-	}
-	teardown() {
-		this.removeEventListener("click", this.#i), this.removeEventListener("native-tokens-change", this.#r), this.removeEventListener("native-tokens-theme-change", this.#r), this.#e = null, this.#t = null, this.innerHTML = "", super.teardown();
-	}
-	/** Refresh background and contrast from current token value. */
-	refresh() {
-		this.token && (this.style.background = `var(${this.token})`), this.#a();
-	}
-	#r = () => {
-		requestAnimationFrame(() => this.refresh());
-	};
-	#i = (e) => {
-		if (!(this.#e && e.target.closest(".native-tokens-swatch-popover")) && this.#e) {
-			this.#o();
-			try {
-				this.#e.showPopover();
-			} catch {}
-		}
-	};
-	#a() {
-		let e = getComputedStyle(this).backgroundColor, [t, n, r] = f(e);
-		this.#t && (this.#t.style.color = p(t, n, r) ? "rgba(0,0,0,0.55)" : "rgba(255,255,255,0.7)");
-	}
-	#o() {
-		if (!this.#e) return;
-		this.#e.innerHTML = "";
-		let e = getComputedStyle(this).backgroundColor, [t, n, r, i] = f(e), a = document.createElement("div");
-		a.className = "native-tokens-swatch-popover-header", a.textContent = this.token, this.#e.appendChild(a);
-		for (let e of w) {
-			let a = e.fn(t, n, r, i), o = document.createElement("button");
-			o.className = "native-tokens-swatch-popover-row", o.type = "button";
-			let s = document.createElement("span");
-			s.className = "native-tokens-swatch-popover-label", s.textContent = e.label;
-			let c = document.createElement("span");
-			c.className = "native-tokens-swatch-popover-value", c.textContent = a, o.append(s, c), o.addEventListener("click", (e) => {
-				e.stopPropagation(), navigator.clipboard.writeText(a).then(() => {
-					c.textContent = "Copied!", setTimeout(() => {
-						c.textContent = a;
-					}, 1200);
-				});
-			}), this.#e.appendChild(o);
-		}
-	}
-}, E = /* @__PURE__ */ "color-env-lightness-min.color-env-lightness-max.color-env-lightness-delta.color-env-chroma.color-env-chroma-k-muted.color-env-chroma-k-vivid.color-env-chroma-k-edge.color-env-alpha.color-env-alpha-delta.color-env-hue-neutral.color-env-chroma-neutral.color-env-lightness-neutral.color-env-hue-accent.color-env-chroma-accent.color-env-lightness-accent.color-env-hue-info.color-env-chroma-info.color-env-lightness-info.color-env-hue-success.color-env-chroma-success.color-env-lightness-success.color-env-hue-warning.color-env-chroma-warning.color-env-lightness-warning.color-env-hue-danger.color-env-chroma-danger.color-env-lightness-danger".split("."), D = class extends r {
-	static observedAttributes = ["data"];
-	#e = [];
-	attributeChangedCallback(e, t, n) {
-		if (t !== n && e === "data" && n) {
-			try {
-				this.#e = JSON.parse(n);
-			} catch {}
-			this.isConnected && this.#t();
-		}
-	}
-	setup() {
-		super.setup();
-		let e = this.getAttribute("data");
-		if (e) try {
-			this.#e = JSON.parse(e);
-		} catch {}
-		this.#t();
-	}
-	teardown() {
-		this.innerHTML = "", super.teardown();
-	}
-	#t() {
-		this.innerHTML = "";
-		let e = document.documentElement.getAttribute("theme") ?? "", t = document.createElement("ui-select");
-		t.setAttribute("size", "xs"), t.setAttribute("placeholder", "Theme..."), t.setAttribute("options", JSON.stringify(this.#e.map((e) => ({
-			value: e.value,
-			label: e.name
-		})))), t.setAttribute("value", e), t.addEventListener("ui-change", ((e) => {
-			this.#n(e.detail.value);
-		})), this.appendChild(t);
-	}
-	#n(e) {
-		let t = document.documentElement;
-		for (let e of E) t.style.removeProperty("--" + e);
-		e ? t.setAttribute("theme", e) : t.removeAttribute("theme"), this.dispatchEvent(new CustomEvent("native-tokens-theme-change", {
-			bubbles: !0,
-			detail: { theme: e }
-		}));
-	}
-}, O = [
-	{
-		name: "Default",
-		value: ""
-	},
-	{
-		name: "Forest",
-		value: "forest"
-	},
-	{
-		name: "Rose",
-		value: "rose"
-	},
-	{
-		name: "Zinc",
-		value: "zinc"
-	}
-], k = [
-	{
-		name: "L min",
-		token: "--color-env-lightness-min",
-		value: .15,
-		step: .01,
-		min: 0,
-		max: 1,
-		group: "Lightness"
-	},
-	{
-		name: "L max",
-		token: "--color-env-lightness-max",
-		value: 1,
-		step: .01,
-		min: 0,
-		max: 1,
-		group: "Lightness"
-	},
-	{
-		name: "L delta",
-		token: "--color-env-lightness-delta",
-		value: .015,
-		step: .005,
-		min: 0,
-		max: .15,
-		group: "Lightness"
-	},
-	{
-		name: "Chroma",
-		token: "--color-env-chroma",
-		value: .2,
-		step: .005,
-		min: 0,
-		max: .5,
-		group: "Chroma"
-	},
-	{
-		name: "C muted",
-		token: "--color-env-chroma-k-muted",
-		value: .125,
-		step: .01,
-		min: 0,
-		max: 1,
-		group: "Chroma"
-	},
-	{
-		name: "C vivid",
-		token: "--color-env-chroma-k-vivid",
-		value: 1,
-		step: .01,
-		min: 0,
-		max: 1,
-		group: "Chroma"
-	},
-	{
-		name: "C edge",
-		token: "--color-env-chroma-k-edge",
-		value: .05,
-		step: .01,
-		min: 0,
-		max: 1,
-		group: "Chroma"
-	},
-	{
-		name: "Alpha",
-		token: "--color-env-alpha",
-		value: .85,
-		step: .01,
-		min: 0,
-		max: 1,
-		group: "Alpha"
-	},
-	{
-		name: "A delta",
-		token: "--color-env-alpha-delta",
-		value: .02,
-		step: .005,
-		min: 0,
-		max: .15,
-		group: "Alpha"
-	}
-], A = [
-	"neutral",
-	"accent",
-	"info",
-	"success",
-	"warning",
-	"danger"
-], j = [
-	"lowest",
-	"lower",
-	"low",
-	"base",
-	"high",
-	"higher",
-	"highest"
-], M = [
-	"brightest",
-	"brighter",
-	"bright",
-	"base",
-	"dim",
-	"dimmer",
-	"dimmest"
-], N = [
-	"1",
-	"2",
-	"3",
-	"4",
-	"5",
-	"6",
-	"7",
-	"8",
-	"9",
-	"10",
-	"11"
-], P = [
-	"050",
-	"100",
-	"200",
-	"300",
-	"400",
-	"500",
-	"600",
-	"700",
-	"800",
-	"900",
-	"950"
-], F = [
-	"strongest",
-	"stronger",
-	"strong",
-	"base",
-	"weak",
-	"weaker",
-	"weakest"
-];
-function I(e, t) {
-	let n = document.createElement("div");
-	n.className = "native-tokens-inspector-section", t && (n.dataset.family = t);
-	let r = document.createElement("h3");
-	return r.className = "native-tokens-inspector-heading", r.textContent = e, n.appendChild(r), n;
-}
-function L(e) {
-	let t = document.createElement("h4");
-	return t.className = "native-tokens-inspector-subheading", t.textContent = e, t;
-}
-function R(e) {
-	let t = document.createElement("native-tokens-colors");
-	return t.setAttribute("data", JSON.stringify(e)), t;
-}
-function z(e) {
-	let t = document.createElement("native-tokens-variable");
-	return t.setAttribute("data", JSON.stringify({
-		name: e.name,
-		type: "number",
-		token: e.token,
-		value: e.value,
-		step: e.step,
-		min: e.min,
-		max: e.max
-	})), t;
-}
-function B(e) {
-	let t = document.createElement("div");
-	t.className = "native-tokens-inspector-toolbar";
-	let n = document.createElement("native-tokens-themes");
-	n.setAttribute("data", JSON.stringify(O)), t.appendChild(n);
-	let r = [{
-		value: "all",
-		label: "All Families"
-	}, ...A.map((e) => ({
-		value: e,
-		label: e.charAt(0).toUpperCase() + e.slice(1)
-	}))], i = document.createElement("ui-select");
-	i.setAttribute("size", "xs"), i.setAttribute("placeholder", "Family..."), i.setAttribute("options", JSON.stringify(r)), i.setAttribute("value", "all"), t.appendChild(i), e.appendChild(t);
-	let a = "", o = null;
-	for (let t of k) t.group !== a && (a = t.group, o = I(t.group, "env"), e.appendChild(o)), o.appendChild(z(t));
-	for (let t of A) {
-		let n = I(t.charAt(0).toUpperCase() + t.slice(1), t);
-		n.appendChild(z({
-			name: "Hue",
-			token: `--color-env-hue-${t}`,
-			value: 230,
-			step: 1,
-			min: 0,
-			max: 360
-		})), n.appendChild(z({
-			name: "Chroma",
-			token: `--color-env-chroma-${t}`,
-			value: .5,
-			step: .01,
-			min: 0,
-			max: 1
-		})), n.appendChild(z({
-			name: "Lightness",
-			token: `--color-env-lightness-${t}`,
-			value: .5,
-			step: .01,
-			min: 0,
-			max: 1
-		})), n.appendChild(L("Elevation")), n.appendChild(R(j.map((e) => ({
-			name: e,
-			token: `--${t}-${e}`
-		})))), n.appendChild(L("Brightness")), n.appendChild(R(M.map((e) => ({
-			name: e,
-			token: `--${t}-${e}`
-		})))), n.appendChild(L("Solid")), n.appendChild(R(N.map((e) => ({
-			name: e,
-			token: `--${t}-${e}`
-		})))), n.appendChild(L("Scrim")), n.appendChild(R(N.map((e) => ({
-			name: e,
-			token: `--${t}-${e}-scrim`
-		})))), n.appendChild(L("Semantic")), n.appendChild(R(P.map((e) => ({
-			name: e,
-			token: `--${t}-${e}`
-		})))), n.appendChild(L("Semantic Scrim")), n.appendChild(R(P.map((e) => ({
-			name: e,
-			token: `--${t}-${e}-scrim`
-		})))), n.appendChild(L("Tint")), n.appendChild(R(F.map((e) => ({
-			name: e,
-			token: `--${t}-scrim-tint-${e}`
-		})))), n.appendChild(L("Shade")), n.appendChild(R(F.map((e) => ({
-			name: e,
-			token: `--${t}-scrim-shade-${e}`
-		})))), e.appendChild(n);
-	}
-	i.addEventListener("ui-change", ((t) => {
-		let n = t.detail.value, r = e.querySelectorAll(".native-tokens-inspector-section[data-family]");
-		for (let e of r) {
-			let t = e.dataset.family;
-			n === "all" || t === "env" ? e.hidden = !1 : e.hidden = t !== n;
-		}
-		requestAnimationFrame(() => {
-			e.querySelectorAll("native-tokens-colors").forEach((e) => e.refresh());
-		});
-	})), e.addEventListener("native-tokens-theme-change", () => {
-		requestAnimationFrame(() => {
-			e.querySelectorAll("native-tokens-variable").forEach((e) => e.sync());
-		});
-	});
-}
-/**
-* Self-contained design system inspector.
-*
-* Stamps the full color/variable inspector UI on connection.
-* Consumer usage: `<native-tokens-inspector></native-tokens-inspector>`.
-*
-* All `native-tokens-*` sub-elements are registered by the `@nonoun/native-ui/inspector`
-* entry point as a side effect of import.
-*/
-var V = class extends r {
-	setup() {
-		super.setup(), B(this);
-	}
-	teardown() {
-		this.innerHTML = "", super.teardown();
-	}
-};
-c("native-tokens-variable", u), c("native-tokens-colors", d), c("native-tokens-color-swatch", T), c("native-tokens-themes", D), c("native-tokens-inspector", V), c("ui-range", t), c("ui-select", e), c("ui-button", a), c("ui-icon", l), c("ui-listbox", o), c("ui-option", i), c("ui-layout-inspector", s);
-export { T as NativeTokensColorSwatch, d as NativeTokensColors, V as NativeTokensInspector, D as NativeTokensThemes, u as NativeTokensVariable, s as UILayoutInspector, B as buildInspector };