@nonoun/native-ui 0.2.2 → 0.2.4

package/dist/inspector.js

@@ -0,0 +1,591 @@
+import { t as e } from "./uid.js";
+import { t } from "./ui-element.js";
+var n = class extends t {
+	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("ds-theme-change", this.#r);
+	}
+	teardown() {
+		this.removeEventListener("ds-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 = "ds-variable-row";
+		let n = document.createElement("label");
+		n.className = "ds-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 = "ds-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("ds-change", {
+				bubbles: !0,
+				detail: {
+					token: e.token,
+					value: n
+				}
+			}));
+		})), this.#t = r, this.#n = s, t.append(n, r, s), this.appendChild(t);
+	}
+}, r = class extends t {
+	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("ds-change", this.#t), this.addEventListener("ds-theme-change", this.#t);
+	}
+	teardown() {
+		this.removeEventListener("ds-change", this.#t), this.removeEventListener("ds-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 = "ds-colors-strip";
+		for (let t of this.#e) {
+			let n = document.createElement("ds-color-swatch");
+			n.setAttribute("token", t.token), n.setAttribute("name", t.name), e.appendChild(n);
+		}
+		this.appendChild(e);
+	}
+	#r() {
+		this.querySelectorAll("ds-color-swatch").forEach((e) => e.refresh());
+	}
+};
+/** Parse a computed `rgb(...)` / `rgba(...)` string into [r, g, b, a] (0–255, 0–1). */
+function i(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 a(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 o(e) {
+	return Math.round(e).toString(16).padStart(2, "0");
+}
+/** sRGB → linear. */
+function s(e) {
+	return e /= 255, e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
+}
+/** linear → sRGB (0–1 range). */
+/** sRGB (0–255) → OKLCH via OKLab. Returns [L (0–1), C, H (degrees)]. */
+function c(e, t, n) {
+	let r = s(e), i = s(t), a = s(n), o = .4122214708 * r + .5363325363 * i + .0514459929 * a, c = .2119034982 * r + .6806995451 * i + .1073969566 * a, l = .0883024619 * r + .2817188376 * i + .6299787005 * a, u = Math.cbrt(o), d = Math.cbrt(c), f = Math.cbrt(l), p = .2104542553 * u + .793617785 * d - .0040720468 * f, m = 1.9779984951 * u - 2.428592205 * d + .4505937099 * f, h = .0259040371 * u + .7827717662 * d - .808675766 * f, g = Math.sqrt(m * m + h * h), _ = Math.atan2(h, m) * (180 / Math.PI);
+	return _ < 0 && (_ += 360), [
+		p,
+		g,
+		_
+	];
+}
+/** sRGB (0–255) → HSL. Returns [H (0–360), S (0–100), L (0–100)]. */
+function l(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 u(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 d(e, t, n, r) {
+	let [i, a, o] = c(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 f(e, t, n, r) {
+	let i = `#${o(e)}${o(t)}${o(n)}`;
+	return r < 1 ? `${i}${o(Math.round(r * 255))}` : i;
+}
+function p(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 m(e, t, n, r) {
+	let [i, a, o] = l(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 h(e, t, n, r) {
+	let [i, a, o] = u(e, t, n);
+	return `hsb(${i.toFixed(0)}, ${a.toFixed(1)}%, ${o.toFixed(1)}%)`;
+}
+var g = [
+	{
+		label: "OKLCH",
+		fn: d
+	},
+	{
+		label: "HEX",
+		fn: f
+	},
+	{
+		label: "RGB",
+		fn: p
+	},
+	{
+		label: "HSL",
+		fn: m
+	},
+	{
+		label: "HSB",
+		fn: h
+	}
+], _ = class extends t {
+	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 t = document.createElement("span");
+		t.className = "ds-swatch-label", t.textContent = this.name, this.#t = t, this.appendChild(t), this.#n = e("swatch"), this.style.setProperty("anchor-name", `--${this.#n}`);
+		let n = document.createElement("div");
+		n.className = "ds-swatch-popover", n.setAttribute("popover", "auto"), n.style.setProperty("position-anchor", `--${this.#n}`), this.#e = n, this.appendChild(n), this.addEventListener("click", this.#i), this.addEventListener("ds-change", this.#r), this.addEventListener("ds-theme-change", this.#r), requestAnimationFrame(() => this.#a());
+	}
+	teardown() {
+		this.removeEventListener("click", this.#i), this.removeEventListener("ds-change", this.#r), this.removeEventListener("ds-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(".ds-swatch-popover")) && this.#e) {
+			this.#o();
+			try {
+				this.#e.showPopover();
+			} catch {}
+		}
+	};
+	#a() {
+		let e = getComputedStyle(this).backgroundColor, [t, n, r] = i(e);
+		this.#t && (this.#t.style.color = a(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, a] = i(e), o = document.createElement("div");
+		o.className = "ds-swatch-popover-header", o.textContent = this.token, this.#e.appendChild(o);
+		for (let e of g) {
+			let i = e.fn(t, n, r, a), o = document.createElement("button");
+			o.className = "ds-swatch-popover-row", o.type = "button";
+			let s = document.createElement("span");
+			s.className = "ds-swatch-popover-label", s.textContent = e.label;
+			let c = document.createElement("span");
+			c.className = "ds-swatch-popover-value", c.textContent = i, o.append(s, c), o.addEventListener("click", (e) => {
+				e.stopPropagation(), navigator.clipboard.writeText(i).then(() => {
+					c.textContent = "Copied!", setTimeout(() => {
+						c.textContent = i;
+					}, 1200);
+				});
+			}), this.#e.appendChild(o);
+		}
+	}
+}, v = /* @__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("."), y = class extends t {
+	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-combobox");
+		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 v) t.style.removeProperty("--" + e);
+		e ? t.setAttribute("theme", e) : t.removeAttribute("theme"), this.dispatchEvent(new CustomEvent("ds-theme-change", {
+			bubbles: !0,
+			detail: { theme: e }
+		}));
+	}
+}, b = [
+	{
+		name: "Default",
+		value: ""
+	},
+	{
+		name: "Forest",
+		value: "forest"
+	},
+	{
+		name: "Rose",
+		value: "rose"
+	},
+	{
+		name: "Zinc",
+		value: "zinc"
+	}
+], x = [
+	{
+		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"
+	}
+], S = [
+	"neutral",
+	"accent",
+	"info",
+	"success",
+	"warning",
+	"danger"
+], C = [
+	"lowest",
+	"lower",
+	"low",
+	"base",
+	"high",
+	"higher",
+	"highest"
+], w = [
+	"brightest",
+	"brighter",
+	"bright",
+	"base",
+	"dim",
+	"dimmer",
+	"dimmest"
+], T = [
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"10",
+	"11"
+], E = [
+	"050",
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900",
+	"950"
+], D = [
+	"strongest",
+	"stronger",
+	"strong",
+	"base",
+	"weak",
+	"weaker",
+	"weakest"
+];
+function O(e, t) {
+	let n = document.createElement("div");
+	n.className = "ds-inspector-section", t && (n.dataset.family = t);
+	let r = document.createElement("h3");
+	return r.className = "ds-inspector-heading", r.textContent = e, n.appendChild(r), n;
+}
+function k(e) {
+	let t = document.createElement("h4");
+	return t.className = "ds-inspector-subheading", t.textContent = e, t;
+}
+function A(e) {
+	let t = document.createElement("ds-colors");
+	return t.setAttribute("data", JSON.stringify(e)), t;
+}
+function j(e) {
+	let t = document.createElement("ds-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 M(e) {
+	let t = document.createElement("div");
+	t.className = "ds-inspector-toolbar";
+	let n = document.createElement("ds-themes");
+	n.setAttribute("data", JSON.stringify(b)), t.appendChild(n);
+	let r = [{
+		value: "all",
+		label: "All Families"
+	}, ...S.map((e) => ({
+		value: e,
+		label: e.charAt(0).toUpperCase() + e.slice(1)
+	}))], i = document.createElement("ui-combobox");
+	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 x) t.group !== a && (a = t.group, o = O(t.group, "env"), e.appendChild(o)), o.appendChild(j(t));
+	for (let t of S) {
+		let n = O(t.charAt(0).toUpperCase() + t.slice(1), t);
+		n.appendChild(j({
+			name: "Hue",
+			token: `--color-env-hue-${t}`,
+			value: 230,
+			step: 1,
+			min: 0,
+			max: 360
+		})), n.appendChild(j({
+			name: "Chroma",
+			token: `--color-env-chroma-${t}`,
+			value: .5,
+			step: .01,
+			min: 0,
+			max: 1
+		})), n.appendChild(j({
+			name: "Lightness",
+			token: `--color-env-lightness-${t}`,
+			value: .5,
+			step: .01,
+			min: 0,
+			max: 1
+		})), n.appendChild(k("Elevation")), n.appendChild(A(C.map((e) => ({
+			name: e,
+			token: `--${t}-${e}`
+		})))), n.appendChild(k("Brightness")), n.appendChild(A(w.map((e) => ({
+			name: e,
+			token: `--${t}-${e}`
+		})))), n.appendChild(k("Solid")), n.appendChild(A(T.map((e) => ({
+			name: e,
+			token: `--${t}-${e}`
+		})))), n.appendChild(k("Scrim")), n.appendChild(A(T.map((e) => ({
+			name: e,
+			token: `--${t}-${e}-scrim`
+		})))), n.appendChild(k("Semantic")), n.appendChild(A(E.map((e) => ({
+			name: e,
+			token: `--${t}-${e}`
+		})))), n.appendChild(k("Semantic Scrim")), n.appendChild(A(E.map((e) => ({
+			name: e,
+			token: `--${t}-${e}-scrim`
+		})))), n.appendChild(k("Tint")), n.appendChild(A(D.map((e) => ({
+			name: e,
+			token: `--${t}-scrim-tint-${e}`
+		})))), n.appendChild(k("Shade")), n.appendChild(A(D.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(".ds-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("ds-colors").forEach((e) => e.refresh());
+		});
+	})), e.addEventListener("ds-theme-change", () => {
+		requestAnimationFrame(() => {
+			e.querySelectorAll("ds-variable").forEach((e) => e.sync());
+		});
+	});
+}
+export { _ as DSColorSwatch, r as DSColors, y as DSThemes, n as DSVariable, M as buildInspector };