@dstackai/sqircle 0.1.0 → 0.1.1

package/dist/sqircle.js

@@ -14,7 +14,7 @@ function c(e = {}) {
 	let t = e.exponent ?? s.exponent, n = e.samples ?? s.samples, r = e.width ?? s.width, i = e.viewBoxHeight ?? s.viewBoxHeight, a = e.prismHeight ?? s.prismHeight, o = e.angleDegrees ?? s.angleDegrees, c = e.inlayScale ?? s.inlayScale, l = o * Math.PI / 180, u = Math.cos(l), d = Math.sin(l), p = f(1, t, n).map((e) => (e.x - e.y) * u), b = Math.max(...p) - Math.min(...p), x = e.halfSize ?? r / b, S = f(x, t, n), C = S.map((e) => (e.x - e.y) * u), w = S.map((e) => (e.x + e.y) * d), T = e.center ?? {
 		x: -Math.min(...C),
 		y: a - Math.min(...w)
-	}, E = S.map((e) => m(e, a, T, u, d)), D = S.map((e) => m(e, 0, T, u, d)), O = h(S.map((e) => e.nx + e.ny >= 0)), k = g(O, n), A = _(E, O), j = _(D, O).reverse(), M = [...A, ...j], N = _(D, k), P = f(x * c, t, n).map((e) => m(e, a, T, u, d)), F = v(E), I = v([...E, ...M]);
+	}, E = S.map((e) => m(e, a, T, u, d)), D = S.map((e) => m(e, 0, T, u, d)), O = h(S.map((e) => e.nx + e.ny >= 0)), ee = g(O, n), te = _(E, O), ne = _(D, O).reverse(), k = [...te, ...ne], A = _(D, ee), j = f(x * c, t, n).map((e) => m(e, a, T, u, d)), M = v(E), N = v([...E, ...k]);
 	return {
 		config: {
 			width: r,
@@ -31,12 +31,12 @@ function c(e = {}) {
 		sinA: d,
 		topPoints: E,
 		bottomPoints: D,
-		wallPoints: M,
-		hiddenPoints: N,
-		inlayPoints: P,
+		wallPoints: k,
+		hiddenPoints: A,
+		inlayPoints: j,
 		labelTransform: `matrix(${y(u)},${y(d)},${y(-u)},${y(d)},${y(T.x)},${y(T.y - a)})`,
-		topBounds: F,
-		sideBounds: I,
+		topBounds: M,
+		sideBounds: N,
 		viewBox: `0 0 ${y(r)} ${y(i)}`
 	};
 }
@@ -566,8 +566,8 @@ var w = {
 	transparentFace: .38,
 	transparentAnnotation: .62,
 	solidAnnotation: .88
-}, E = "GPU", D = 62, O = "Arial, Helvetica, sans-serif", k = 400;
-function A({ layers: e, geometry: r, selectedLayerId: i, theme: s = "light", idPrefix: l, className: u, ariaLabel: d = "Squircle scene", fitToLayers: f = !0, transitionMs: p = 220, onLayerSelect: m }) {
+}, E = "GPU", D = 62, O = "Arial, Helvetica, sans-serif", ee = 400;
+function te({ layers: e, geometry: r, selectedLayerId: i, theme: s = "light", idPrefix: l, className: u, ariaLabel: d = "Squircle scene", fitToLayers: f = !0, transitionMs: p = 220, onLayerSelect: m }) {
 	let h = t().replace(/[^a-zA-Z0-9_-]/g, ""), g = l ?? `sq-${h}`, _ = n(() => c(r), [JSON.stringify(r ?? {})]), v = e.filter((e) => e.visible !== !1), y = Math.max(0, ...v.map((e) => e.offset?.y ?? 0)), b = r?.viewBoxHeight ?? (f ? Math.max(_.config.viewBoxHeight, y + _.sideBounds.maxY + 18) : _.config.viewBoxHeight), x = r?.viewBoxHeight === b ? _ : c({
 		...r,
 		viewBoxHeight: b
@@ -583,10 +583,10 @@ function A({ layers: e, geometry: r, selectedLayerId: i, theme: s = "light", idP
 		role: "img",
 		"aria-label": d,
 		style: S,
-		children: [/* @__PURE__ */ a(j, {
+		children: [/* @__PURE__ */ a(ne, {
 			prefix: g,
 			geometry: x
-		}), v.map((e) => /* @__PURE__ */ a(N, {
+		}), v.map((e) => /* @__PURE__ */ a(A, {
 			layer: e,
 			geometry: x,
 			prefix: g,
@@ -595,9 +595,9 @@ function A({ layers: e, geometry: r, selectedLayerId: i, theme: s = "light", idP
 		}, e.id))]
 	});
 }
-function j({ prefix: e, geometry: t }) {
+function ne({ prefix: e, geometry: t }) {
 	return /* @__PURE__ */ a("defs", { children: Object.values(b).map((n) => /* @__PURE__ */ o("g", { children: [
-		/* @__PURE__ */ a(M, {
+		/* @__PURE__ */ a(k, {
 			id: `${e}-top-${n.id}`,
 			x1: t.topBounds.minX,
 			y1: t.topBounds.minY,
@@ -605,7 +605,7 @@ function j({ prefix: e, geometry: t }) {
 			y2: t.topBounds.maxY,
 			stops: n.top
 		}),
-		/* @__PURE__ */ a(M, {
+		/* @__PURE__ */ a(k, {
 			id: `${e}-side-${n.id}`,
 			x1: t.sideBounds.minX,
 			y1: t.sideBounds.minY,
@@ -613,7 +613,7 @@ function j({ prefix: e, geometry: t }) {
 			y2: t.sideBounds.maxY,
 			stops: n.side
 		}),
-		/* @__PURE__ */ a(M, {
+		/* @__PURE__ */ a(k, {
 			id: `${e}-text-surface-${n.id}`,
 			x1: -425.63,
 			y1: -.1,
@@ -621,7 +621,7 @@ function j({ prefix: e, geometry: t }) {
 			y2: .07,
 			stops: n.top
 		}),
-		/* @__PURE__ */ a(M, {
+		/* @__PURE__ */ a(k, {
 			id: `${e}-text-wire-${n.id}`,
 			x1: -64,
 			y1: -24,
@@ -631,7 +631,7 @@ function j({ prefix: e, geometry: t }) {
 		})
 	] }, n.id)) });
 }
-function M({ id: e, x1: t, y1: n, x2: r, y2: i, stops: o }) {
+function k({ id: e, x1: t, y1: n, x2: r, y2: i, stops: o }) {
 	return /* @__PURE__ */ a("linearGradient", {
 		id: e,
 		x1: t,
@@ -645,11 +645,11 @@ function M({ id: e, x1: t, y1: n, x2: r, y2: i, stops: o }) {
 		}, `${e.offset}-${e.color}`))
 	});
 }
-function N({ layer: e, geometry: t, prefix: n, selected: r, onSelect: i }) {
-	let s = F(e.base, e.stroke, e.opacity), c = e.hover ? F({
+function A({ layer: e, geometry: t, prefix: n, selected: r, onSelect: i }) {
+	let s = M(e.base, e.stroke, e.opacity), c = e.hover ? M({
 		...e.base,
 		...e.hover
-	}, e.stroke, e.opacity) : null, l = !!(c && W(c) !== W(s)), u = e.offset?.x ?? 0, d = e.offset?.y ?? 0;
+	}, e.stroke, e.opacity) : null, l = !!(c && B(c) !== B(s)), u = e.offset?.x ?? 0, d = e.offset?.y ?? 0;
 	return /* @__PURE__ */ o("g", {
 		className: [
 			"sq-layer",
@@ -661,12 +661,12 @@ function N({ layer: e, geometry: t, prefix: n, selected: r, onSelect: i }) {
 		"data-hover-enabled": String(l),
 		transform: `translate(${u} ${d})`,
 		onClick: i ? () => i(e.id) : void 0,
-		children: [/* @__PURE__ */ a(P, {
+		children: [/* @__PURE__ */ a(j, {
 			className: "sq-base",
 			variant: s,
 			geometry: t,
 			prefix: n
-		}), l && c ? /* @__PURE__ */ a(P, {
+		}), l && c ? /* @__PURE__ */ a(j, {
 			className: "sq-hover",
 			variant: c,
 			geometry: t,
@@ -674,7 +674,7 @@ function N({ layer: e, geometry: t, prefix: n, selected: r, onSelect: i }) {
 		}) : null]
 	});
 }
-function P({ className: e, variant: t, geometry: n, prefix: r }) {
+function j({ className: e, variant: t, geometry: n, prefix: r }) {
 	let s = C(t.paletteId), c = `url(#${r}-top-${s.id})`, u = `url(#${r}-side-${s.id})`, d = `url(#${r}-text-surface-${s.id})`, f = `url(#${r}-text-wire-${s.id})`, p = l(n.wallPoints), m = l(n.topPoints), h = l(n.hiddenPoints), g = l(n.inlayPoints);
 	return /* @__PURE__ */ o("g", {
 		className: [
@@ -727,9 +727,9 @@ function P({ className: e, variant: t, geometry: n, prefix: r }) {
 			t.dash ? /* @__PURE__ */ a("polygon", {
 				className: "sq-inlay",
 				points: g,
-				stroke: V(t, s, c),
+				stroke: re(t, s, c),
 				strokeWidth: t.material === "wireframe" ? t.stroke.wireDash : t.stroke.dash,
-				opacity: H(t)
+				opacity: R(t)
 			}) : null,
 			t.text ? /* @__PURE__ */ a("text", {
 				className: "sq-label",
@@ -739,24 +739,24 @@ function P({ className: e, variant: t, geometry: n, prefix: r }) {
 				fontFamily: t.textFontFamily,
 				fontSize: t.textSize,
 				fontWeight: t.textFontWeight,
-				...U(t, s, d, f),
+				...z(t, s, d, f),
 				children: t.text
 			}) : null
 		]
 	});
 }
-function F(e, t = {}, n = {}) {
+function M(e, t = {}, n = {}) {
 	return {
 		material: e.material ?? "wireframe",
 		paletteId: e.paletteId ?? "15",
-		text: L(e.text, I(e).gpu),
+		text: P(e.text, N(e).gpu),
 		dash: e.dash ?? !1,
-		textStyle: R(e.textStyle ?? I(e).gpuStyle ?? "solid"),
-		textColor: z(e.textColor ?? I(e).gpuColor ?? "contrast"),
+		textStyle: F(e.textStyle ?? N(e).gpuStyle ?? "solid"),
+		textColor: I(e.textColor ?? N(e).gpuColor ?? "contrast"),
 		textSize: e.textSize ?? D,
 		textFontFamily: e.textFontFamily ?? O,
-		textFontWeight: e.textFontWeight ?? k,
-		dashColor: z(e.dashColor ?? "contrast"),
+		textFontWeight: e.textFontWeight ?? ee,
+		dashColor: I(e.dashColor ?? "contrast"),
 		stroke: {
 			...w,
 			...t,
@@ -769,30 +769,30 @@ function F(e, t = {}, n = {}) {
 		}
 	};
 }
-function I(e) {
+function N(e) {
 	return e;
 }
-function L(e, t) {
+function P(e, t) {
 	return typeof e == "string" ? e.trim() ? e : null : e === !0 || t ? E : null;
 }
-function R(e) {
+function F(e) {
 	return e === "wireframe" ? "wireframe" : "solid";
 }
-function z(e) {
+function I(e) {
 	return e === "auto" ? "contrast" : e;
 }
-function B(e, t) {
-	let n = z(e);
+function L(e, t) {
+	let n = I(e);
 	return n === "white" ? "#ffffff" : n === "black" ? "#05070a" : t;
 }
-function V(e, t, n) {
-	return e.material === "wireframe" ? n : B(e.dashColor, t.labelFill);
+function re(e, t, n) {
+	return e.material === "wireframe" ? n : L(e.dashColor, t.labelFill);
 }
-function H(e) {
+function R(e) {
 	return e.material === "transparent" ? e.opacity.transparentAnnotation : e.opacity.solidAnnotation;
 }
-function U(e, t, n, r) {
-	let i = H(e);
+function z(e, t, n, r) {
+	let i = R(e);
 	return e.material === "wireframe" ? e.textStyle === "wireframe" ? {
 		fill: "none",
 		stroke: r,
@@ -805,81 +805,153 @@ function U(e, t, n, r) {
 		opacity: 1
 	} : e.textStyle === "wireframe" ? {
 		fill: "none",
-		stroke: B(e.textColor, t.labelFill),
+		stroke: L(e.textColor, t.labelFill),
 		strokeWidth: e.stroke.labelWire,
 		opacity: i
 	} : {
-		fill: B(e.textColor, t.labelFill),
+		fill: L(e.textColor, t.labelFill),
 		stroke: "none",
 		strokeWidth: 0,
 		opacity: i
 	};
 }
-function W(e) {
+function B(e) {
 	return JSON.stringify(e);
 }
 //#endregion
 //#region src/squircle/codeExport.ts
-function ee({ layers: e, theme: t, componentName: n = "CustomSquircle", importPath: r = "./squircle", ariaLabel: i }) {
-	let a = re(n), o = JSON.stringify(r), s = JSON.stringify(i ?? `${a} composition`), c = JSON.stringify(e.map(G), null, 2);
+function ie({ layers: e, theme: t, geometry: n, componentName: r = "CustomSquircle", importPath: i = "./squircle", styleImportPath: a, ariaLabel: o }) {
+	let s = G(r), c = JSON.stringify(i), l = V(i, a), u = JSON.stringify(o ?? `${s} composition`), d = JSON.stringify(e.map(ae), null, 2), f = n ? JSON.stringify(W(n), null, 2) : null;
 	return [
-		`import { SquircleScene, type SquircleLayerConfig, type SquircleTheme } from ${o};`,
+		`import { SquircleScene, ${f ? "type SquircleGeometryConfig, type SquircleLayerConfig, type SquircleTheme" : "type SquircleLayerConfig, type SquircleTheme"} } from ${c};`,
+		...l ? [`import ${JSON.stringify(l)};`] : [],
 		"",
 		`const theme: SquircleTheme = ${JSON.stringify(t)};`,
+		...f ? ["", `const geometry: SquircleGeometryConfig = ${f};`] : [],
 		"",
-		`const layers: SquircleLayerConfig[] = ${c};`,
+		`const layers: SquircleLayerConfig[] = ${d};`,
 		"",
-		`export function ${a}() {`,
+		`export function ${s}() {`,
 		"  return (",
 		"    <SquircleScene",
 		"      theme={theme}",
 		"      layers={layers}",
-		`      ariaLabel={${s}}`,
+		...f ? ["      geometry={geometry}"] : [],
+		`      ariaLabel={${u}}`,
 		"    />",
 		"  );",
 		"}",
 		""
 	].join("\n");
 }
-function G(e) {
-	return ne({
+function V(e, t) {
+	return t === !1 ? null : typeof t == "string" ? t : e === "@dstackai/sqircle" ? "@dstackai/sqircle/style.css" : null;
+}
+function ae(e) {
+	return W({
 		...e,
-		base: K(e.base),
-		hover: e.hover ? K(e.hover) : void 0
+		base: H(e.base),
+		hover: e.hover ? H(e.hover) : void 0
 	});
 }
-function K(e) {
-	let { gpu: t, gpuStyle: n, gpuColor: r, ...i } = e, a = te(i.text, t), o = i.textStyle ?? n, s = i.textColor ?? r;
-	return ne({
+function H(e) {
+	let { gpu: t, gpuStyle: n, gpuColor: r, ...i } = e, a = U(i.text, t), o = i.textStyle ?? n, s = i.textColor ?? r;
+	return W({
 		...i,
 		text: a,
 		textStyle: o,
 		textColor: s
 	});
 }
-function te(e, t) {
+function U(e, t) {
 	if (typeof e == "string") return e;
 	if (e === !0 || t) return "GPU";
 	if (e === !1) return !1;
 }
-function ne(e) {
+function W(e) {
 	return Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0));
 }
-function re(e) {
+function G(e) {
 	let t = e.trim().split(/[^a-zA-Z0-9]+/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("") || "CustomSquircle";
 	return /^[A-Za-z_$]/.test(t) ? t : `Squircle${t}`;
 }
 //#endregion
 //#region src/squircle/SquircleEditor.tsx
-var ie = 88, ae = "GPU", oe = [
-	"wireframe",
-	"solid",
-	"transparent"
+var oe = 88, K = "GPU", se = {
+	exponent: s.exponent,
+	prismHeight: s.prismHeight,
+	inlayScale: s.inlayScale
+}, ce = 0, le = 100, q = 4, J = 24, ue = 4, de = 36, fe = .35, pe = .82, me = 34, he = 92, ge = 62, _e = 400, ve = [
+	{
+		value: "wireframe",
+		label: "Wire",
+		title: "Gradient outline with transparent faces"
+	},
+	{
+		value: "solid",
+		label: "Solid",
+		title: "Filled prism with top and side gradients"
+	},
+	{
+		value: "transparent",
+		label: "Glass",
+		title: "Translucent filled prism"
+	}
+], ye = [{
+	value: "solid",
+	label: "Filled",
+	title: "Filled top-plane text"
+}, {
+	value: "wireframe",
+	label: "Outline",
+	title: "Outlined top-plane text"
+}], be = [
+	{
+		value: "auto",
+		label: "Auto",
+		title: "Use the palette contrast color"
+	},
+	{
+		value: "white",
+		label: "White",
+		title: "Use fixed white annotation paint"
+	},
+	{
+		value: "black",
+		label: "Black",
+		title: "Use fixed black annotation paint"
+	}
+], xe = [
+	{
+		value: "300",
+		label: "Light",
+		title: "Thin top-plane label"
+	},
+	{
+		value: "400",
+		label: "Regular",
+		title: "Default top-plane label weight"
+	},
+	{
+		value: "500",
+		label: "Medium",
+		title: "Slightly stronger top-plane label"
+	},
+	{
+		value: "600",
+		label: "Semi",
+		title: "Bold but still clean on wireframe outlines"
+	},
+	{
+		value: "700",
+		label: "Bold",
+		title: "Strongest top-plane label"
+	}
 ];
-function se(e = "15") {
+function Se(e = "15") {
 	return d([
 		{
-			id: "bottom",
+			id: "layer-1",
 			visible: !0,
 			base: {
 				material: "wireframe",
@@ -887,7 +959,7 @@ function se(e = "15") {
 			}
 		},
 		{
-			id: "middle",
+			id: "layer-2",
 			visible: !0,
 			base: {
 				material: "wireframe",
@@ -895,51 +967,67 @@ function se(e = "15") {
 			}
 		},
 		{
-			id: "top",
+			id: "layer-3",
 			visible: !0,
 			base: {
 				material: "wireframe",
 				paletteId: e
 			}
 		}
-	], ie);
+	], oe);
 }
-function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", description: u = "React component constructor with 0-N layers and exported code.", className: f, layerGap: p = ie, showCode: m, showConfig: h = !0, codeComponentName: g, codeImportPath: _ = "./squircle", theme: v, defaultTheme: y = "light", onThemeChange: b, showThemeSwitch: x = !0 }) {
-	let [S, C] = r(() => s ?? se()), [w, T] = r(y), E = t ?? S, D = v ?? w, [O, k] = r(() => E.at(-1)?.id ?? null), [j, M] = r(!1), N = E.find((e) => e.id === O) ?? null, P = m ?? h, F = Math.max(0, ...E.map((e) => e.offset?.y ?? 0)), I = n(() => ({
-		layers: E,
-		geometry: { viewBoxHeight: Math.max(480, F + 320) },
-		selectedLayerId: O
+function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeometry: f, onGeometryChange: p, title: m = "Squircle", description: h = "React component constructor with 0-N layers and exported code.", className: g, layerGap: _ = oe, showCode: v, showConfig: y = !0, codeComponentName: b, codeImportPath: x = "./squircle", theme: S, defaultTheme: C = "light", onThemeChange: w, showThemeSwitch: T = !0 }) {
+	let [E, D] = r(() => c ?? Se()), [O, ee] = r(() => ({
+		...se,
+		...f
+	})), [ne, k] = r(C), A = t ?? E, j = u ?? O, M = S ?? ne, [N, P] = r(() => A.at(-1)?.id ?? null), [F, I] = r("base"), [L, re] = r(!1), [R, z] = r(!1), B = A.find((e) => e.id === N) ?? null, V = B ? A.findIndex((e) => e.id === B.id) + 1 : null, ae = A.filter((e) => e.visible !== !1).length, H = v ?? y, U = Math.max(0, ...A.map((e) => e.offset?.y ?? 0)), W = n(() => ({
+		layers: A,
+		geometry: {
+			...j,
+			viewBoxHeight: Math.max(j.viewBoxHeight ?? s.viewBoxHeight, U + 320)
+		},
+		selectedLayerId: N
 	}), [
-		E,
-		F,
-		O
-	]), L = n(() => ee({
-		layers: E,
-		theme: D,
-		componentName: g ?? l,
-		importPath: _,
-		ariaLabel: `${l} composition`
+		j,
+		A,
+		U,
+		N
+	]), G = n(() => ie({
+		layers: A,
+		theme: M,
+		geometry: We(j),
+		componentName: b ?? m,
+		importPath: x,
+		ariaLabel: `${m} composition`
 	}), [
-		D,
-		g,
-		_,
-		E,
-		l
+		j,
+		M,
+		b,
+		x,
+		A,
+		m
 	]);
 	e(() => {
-		O && E.some((e) => e.id === O) || k(E.at(-1)?.id ?? null);
-	}, [E, O]), e(() => {
-		M(!1);
-	}, [L]);
-	function R(e, n = {}) {
-		let r = n.reflow ? d(e, p) : e;
-		t || C(r), c?.(r);
+		N && A.some((e) => e.id === N) || P(A.at(-1)?.id ?? null);
+	}, [A, N]), e(() => {
+		z(!1);
+	}, [G]);
+	function K(e, n = {}) {
+		let r = n.reflow ? d(e, _) : e;
+		t || D(r), l?.(r);
+	}
+	function q(e) {
+		let t = {
+			...j,
+			...e
+		};
+		u || ee(t), p?.(t);
 	}
-	function z(e, t) {
-		R(E.map((n) => n.id === e ? t(n) : n));
+	function J(e, t) {
+		K(A.map((n) => n.id === e ? t(n) : n));
 	}
-	function B(e) {
-		N && z(N.id, (t) => ({
+	function me(e) {
+		B && J(B.id, (t) => ({
 			...t,
 			base: {
 				...t.base,
@@ -947,205 +1035,325 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 			}
 		}));
 	}
-	function V(e) {
-		N && z(N.id, (t) => ({
+	function he(e) {
+		B && J(B.id, (t) => ({
 			...t,
 			hover: {
-				...t.hover ?? t.base,
+				...t.hover ?? {},
 				...e
 			}
 		}));
 	}
-	function H() {
+	function ge() {
 		let e = {
-			id: `layer-${E.length + 1}`,
+			id: Ve(A),
 			visible: !0,
 			base: {
 				material: "wireframe",
-				paletteId: E.at(-1)?.base.paletteId ?? "15"
+				paletteId: A.at(-1)?.base.paletteId ?? "15"
 			}
-		}, t = [...E, e];
-		k(e.id), R(t, { reflow: !0 });
+		}, t = [...A, e];
+		P(e.id), I("base"), K(t, { reflow: !0 });
 	}
-	function U() {
-		if (!N) return;
-		let e = E.filter((e) => e.id !== N.id);
-		k(e.at(-1)?.id ?? null), R(e, { reflow: !0 });
+	function _e() {
+		if (!B) return;
+		let e = A.filter((e) => e.id !== B.id);
+		P(e.at(-1)?.id ?? null), I("base"), K(e, { reflow: !0 });
 	}
-	function W(e) {
-		z(e, (e) => ({
+	function ve(e) {
+		J(e, (e) => ({
 			...e,
 			visible: e.visible === !1
 		}));
 	}
-	function G(e) {
-		v || T(e), b?.(e);
+	function ye(e) {
+		S || k(e), w?.(e);
 	}
-	async function K() {
+	async function be() {
 		try {
-			await navigator.clipboard.writeText(L);
+			await navigator.clipboard.writeText(G);
 		} catch {
 			let e = document.createElement("textarea");
-			e.value = L, e.setAttribute("readonly", ""), e.style.position = "fixed", e.style.top = "-9999px", document.body.append(e), e.select(), document.execCommand("copy"), e.remove();
+			e.value = G, e.setAttribute("readonly", ""), e.style.position = "fixed", e.style.top = "-9999px", document.body.append(e), e.select(), document.execCommand("copy"), e.remove();
 		}
-		M(!0), window.setTimeout(() => M(!1), 1400);
+		z(!0), window.setTimeout(() => z(!1), 1400);
 	}
 	return /* @__PURE__ */ o("main", {
 		className: [
 			"squircle-editor",
-			`squircle-editor-${D}`,
-			f
+			`squircle-editor-${M}`,
+			g
 		].filter(Boolean).join(" "),
-		"data-theme": D,
+		"data-theme": M,
 		"aria-label": "Squircle editor",
 		children: [/* @__PURE__ */ o("header", {
 			className: "squircle-editor-topbar",
-			children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h1", { children: l }), /* @__PURE__ */ a("p", { children: u })] }), /* @__PURE__ */ o("div", {
+			children: [/* @__PURE__ */ o("div", {
+				className: "topbar-title",
+				children: [/* @__PURE__ */ a("h1", { children: m }), /* @__PURE__ */ a("p", { children: h })]
+			}), /* @__PURE__ */ a("div", {
 				className: "topbar-actions",
-				children: [
-					x ? /* @__PURE__ */ o("div", {
-						className: "theme-switch",
-						role: "group",
-						"aria-label": "Theme",
-						children: [/* @__PURE__ */ a("button", {
-							type: "button",
-							"aria-pressed": D === "light",
-							onClick: () => G("light"),
-							children: "Light"
-						}), /* @__PURE__ */ a("button", {
-							type: "button",
-							"aria-pressed": D === "dark",
-							onClick: () => G("dark"),
-							children: "Dark"
-						})]
-					}) : null,
-					/* @__PURE__ */ a("button", {
+				children: T ? /* @__PURE__ */ o("div", {
+					className: "theme-switch",
+					role: "group",
+					"aria-label": "Theme",
+					children: [/* @__PURE__ */ a("button", {
 						type: "button",
-						onClick: H,
-						children: "Add layer"
-					}),
-					/* @__PURE__ */ a("button", {
+						"aria-pressed": M === "light",
+						onClick: () => ye("light"),
+						children: "Light"
+					}), /* @__PURE__ */ a("button", {
 						type: "button",
-						onClick: () => R([]),
-						children: "Clear"
-					})
-				]
+						"aria-pressed": M === "dark",
+						onClick: () => ye("dark"),
+						children: "Dark"
+					})]
+				}) : null
 			})]
 		}), /* @__PURE__ */ o("section", {
 			className: "squircle-editor-workspace",
 			children: [
 				/* @__PURE__ */ o("aside", {
-					className: "side-panel",
-					children: [/* @__PURE__ */ o("div", {
-						className: "panel-heading",
-						children: [/* @__PURE__ */ a("h2", { children: "Layers" }), /* @__PURE__ */ a("span", { children: E.length })]
-					}), /* @__PURE__ */ a("div", {
-						className: "squircle-editor-layer-list",
-						children: [...E].reverse().map((e, t) => {
-							let n = E.length - t;
-							return /* @__PURE__ */ o("div", {
-								className: "squircle-editor-layer-row",
-								children: [/* @__PURE__ */ o("button", {
+					className: "side-panel layers-panel",
+					children: [
+						/* @__PURE__ */ o("div", {
+							className: "panel-heading",
+							children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h2", { children: "Layers" }), /* @__PURE__ */ o("span", { children: [
+								ae,
+								"/",
+								A.length,
+								" visible"
+							] })] }), /* @__PURE__ */ o("div", {
+								className: "panel-actions",
+								children: [/* @__PURE__ */ a("button", {
 									type: "button",
-									className: e.id === O ? "layer-select is-active" : "layer-select",
-									onClick: () => k(e.id),
-									children: [/* @__PURE__ */ a("strong", { children: n === E.length ? "Top" : n === 1 ? "Bottom" : `Layer ${n}` }), /* @__PURE__ */ a("span", { children: fe(e.base) })]
+									className: "icon-button primary-action",
+									"aria-label": "Add layer",
+									title: "Add layer",
+									onClick: ge,
+									children: /* @__PURE__ */ a(je, {})
 								}), /* @__PURE__ */ a("button", {
 									type: "button",
-									className: "icon-text",
-									"aria-pressed": e.visible !== !1,
-									onClick: () => W(e.id),
-									children: e.visible === !1 ? "Show" : "Hide"
+									className: "icon-button",
+									"aria-label": "Clear layers",
+									title: "Clear layers",
+									onClick: () => K([]),
+									children: /* @__PURE__ */ a(Me, {})
 								})]
-							}, e.id);
+							})]
+						}),
+						/* @__PURE__ */ a("div", {
+							className: "squircle-editor-layer-list",
+							children: [...A].reverse().map((e, t) => {
+								let n = A.length - t, r = Re(e.base.paletteId), i = e.base.material ?? "wireframe";
+								return /* @__PURE__ */ o("article", {
+									className: e.id === N ? "squircle-editor-layer-row is-active" : "squircle-editor-layer-row",
+									children: [/* @__PURE__ */ o("button", {
+										type: "button",
+										className: "layer-select",
+										onClick: () => P(e.id),
+										title: `Edit ${Be(e.id, n, A.length)}`,
+										children: [/* @__PURE__ */ o("span", {
+											className: "layer-card-topline",
+											children: [
+												/* @__PURE__ */ a("span", {
+													className: "layer-number",
+													children: String(n).padStart(2, "0")
+												}),
+												/* @__PURE__ */ a("strong", { children: Be(e.id, n, A.length) }),
+												/* @__PURE__ */ a("span", {
+													className: `material-pill material-pill-${i}`,
+													children: ze(i)
+												})
+											]
+										}), /* @__PURE__ */ o("span", {
+											className: "layer-card-meta",
+											children: [/* @__PURE__ */ o("span", {
+												className: "layer-palette-chip",
+												children: [/* @__PURE__ */ a("span", {
+													className: "palette-swatch",
+													style: { background: `linear-gradient(135deg, ${r.swatch[0]}, ${r.swatch[1]})` }
+												}), r.label]
+											}), /* @__PURE__ */ o("span", {
+												className: "layer-feature-tags",
+												children: [
+													Q(e.base) ? /* @__PURE__ */ a("span", { children: "Text" }) : null,
+													e.base.dash ? /* @__PURE__ */ a("span", { children: "Dash" }) : null,
+													e.hover ? /* @__PURE__ */ a("span", { children: "Hover" }) : null,
+													!Q(e.base) && !e.base.dash && !e.hover ? /* @__PURE__ */ a("span", { children: "Clean" }) : null
+												]
+											})]
+										})]
+									}), /* @__PURE__ */ a("button", {
+										type: "button",
+										className: "icon-button layer-visibility",
+										"aria-label": e.visible === !1 ? "Show layer" : "Hide layer",
+										"aria-pressed": e.visible !== !1,
+										title: e.visible === !1 ? "Show layer" : "Hide layer",
+										onClick: () => ve(e.id),
+										children: e.visible === !1 ? /* @__PURE__ */ a(Pe, {}) : /* @__PURE__ */ a(Ne, {})
+									})]
+								}, e.id);
+							})
+						}),
+						/* @__PURE__ */ o(Y, {
+							title: "Shape",
+							children: [
+								/* @__PURE__ */ a(Z, {
+									label: "Radius",
+									value: He(j.exponent ?? s.exponent),
+									min: ce,
+									max: le,
+									step: 1,
+									formatValue: (e) => `${Math.round(e)}%`,
+									onChange: (e) => q({ exponent: Ue(e) })
+								}),
+								/* @__PURE__ */ a(Z, {
+									label: "Height",
+									value: j.prismHeight ?? s.prismHeight,
+									min: ue,
+									max: de,
+									step: 1,
+									formatValue: (e) => `${Math.round(e)}px`,
+									onChange: (e) => q({ prismHeight: e })
+								}),
+								/* @__PURE__ */ a(Z, {
+									label: "Dash size",
+									value: (j.inlayScale ?? s.inlayScale) * 100,
+									min: fe * 100,
+									max: pe * 100,
+									step: 1,
+									formatValue: (e) => `${Math.round(e)}%`,
+									onChange: (e) => q({ inlayScale: Ke(e / 100, 2) })
+								})
+							]
 						})
-					})]
+					]
 				}),
 				/* @__PURE__ */ o("section", {
 					className: "squircle-editor-preview",
-					children: [/* @__PURE__ */ a(A, {
-						...I,
-						theme: D,
-						ariaLabel: "Editable squircle composition",
-						onLayerSelect: k
-					}), P ? /* @__PURE__ */ o("section", {
-						className: "code-panel",
-						"aria-label": "Generated React code",
-						children: [/* @__PURE__ */ o("header", {
-							className: "code-panel-header",
-							children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h2", { children: "Code" }), /* @__PURE__ */ a("p", { children: "Copy a ready-to-use React component." })] }), /* @__PURE__ */ o("button", {
-								type: "button",
-								className: "copy-code-button",
-								"aria-label": "Copy React code",
-								title: "Copy React code",
-								onClick: K,
-								children: [/* @__PURE__ */ a(de, {}), /* @__PURE__ */ a("span", {
-									className: "copy-status",
-									"aria-live": "polite",
-									children: j ? "Copied" : ""
+					children: [
+						/* @__PURE__ */ o("div", {
+							className: "preview-toolbar",
+							children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h2", { children: "Preview" }), /* @__PURE__ */ a("span", { children: V ? `Editing Layer ${V}` : `${ae} visible layers` })] }), H ? /* @__PURE__ */ o("div", {
+								className: "preview-actions",
+								children: [/* @__PURE__ */ o("button", {
+									type: "button",
+									className: "code-toggle-button",
+									"aria-pressed": L,
+									onClick: () => re((e) => !e),
+									children: [/* @__PURE__ */ a(Ie, {}), "Code"]
+								}), /* @__PURE__ */ o("button", {
+									type: "button",
+									className: "copy-code-button",
+									"aria-label": "Copy React code",
+									title: "Copy React code",
+									onClick: be,
+									children: [/* @__PURE__ */ a(Ae, {}), /* @__PURE__ */ a("span", {
+										className: "copy-status",
+										"aria-live": "polite",
+										children: R ? "Copied" : ""
+									})]
 								})]
-							})]
-						}), /* @__PURE__ */ a("pre", {
-							className: "code-output",
-							children: /* @__PURE__ */ a("code", { children: L })
-						})]
-					}) : null]
+							}) : null]
+						}),
+						/* @__PURE__ */ a("div", {
+							className: "preview-stage",
+							children: /* @__PURE__ */ a(te, {
+								...W,
+								theme: M,
+								ariaLabel: "Editable squircle composition",
+								onLayerSelect: (e) => {
+									P(e), I("base");
+								}
+							})
+						}),
+						H ? /* @__PURE__ */ o("section", {
+							className: L ? "code-panel is-open" : "code-panel",
+							"aria-label": "Generated React code",
+							children: [/* @__PURE__ */ o("header", {
+								className: "code-panel-header",
+								children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h2", { children: "Code" }), /* @__PURE__ */ a("p", { children: "Ready-to-use React component." })] }), /* @__PURE__ */ o("button", {
+									type: "button",
+									className: "copy-code-button",
+									"aria-label": "Copy React code",
+									title: "Copy React code",
+									onClick: be,
+									children: [/* @__PURE__ */ a(Ae, {}), /* @__PURE__ */ a("span", {
+										className: "copy-status",
+										"aria-live": "polite",
+										children: R ? "Copied" : ""
+									})]
+								})]
+							}), L ? /* @__PURE__ */ a("pre", {
+								className: "code-output",
+								children: /* @__PURE__ */ a("code", { children: G })
+							}) : null]
+						}) : null
+					]
 				}),
 				/* @__PURE__ */ a("aside", {
-					className: N ? "side-panel inspector-panel" : "side-panel inspector-panel is-empty",
-					children: N ? /* @__PURE__ */ o(i, { children: [
+					className: B ? "side-panel inspector-panel" : "side-panel inspector-panel is-empty",
+					children: B ? /* @__PURE__ */ o(i, { children: [
 						/* @__PURE__ */ o("div", {
-							className: "panel-heading",
-							children: [/* @__PURE__ */ a("h2", { children: N.id }), /* @__PURE__ */ a("button", {
-								type: "button",
-								className: "icon-text danger",
-								onClick: U,
-								children: "Delete"
+							className: "inspector-heading",
+							children: [/* @__PURE__ */ o("div", { children: [
+								/* @__PURE__ */ a("span", {
+									className: "inspector-kicker",
+									children: "Selected"
+								}),
+								/* @__PURE__ */ a("h2", { children: V ? Be(B.id, V, A.length) : B.id }),
+								/* @__PURE__ */ a("p", { children: Le(B.base) })
+							] }), /* @__PURE__ */ o("div", {
+								className: "panel-actions",
+								children: [/* @__PURE__ */ a("button", {
+									type: "button",
+									className: "icon-button",
+									"aria-label": "Close inspector",
+									title: "Close inspector",
+									onClick: () => P(null),
+									children: /* @__PURE__ */ a(Fe, {})
+								}), /* @__PURE__ */ a("button", {
+									type: "button",
+									className: "icon-button danger",
+									"aria-label": "Delete layer",
+									title: "Delete layer",
+									onClick: _e,
+									children: /* @__PURE__ */ a(Me, {})
+								})]
 							})]
 						}),
-						/* @__PURE__ */ o(q, {
-							title: "Base",
-							children: [
-								/* @__PURE__ */ a(J, {
-									label: "Material",
-									value: N.base.material ?? "wireframe",
-									options: oe,
-									onChange: (e) => B({ material: e })
-								}),
-								/* @__PURE__ */ a(le, {
-									value: N.base.paletteId ?? "15",
-									onChange: (e) => B({ paletteId: e })
-								}),
-								/* @__PURE__ */ a(Y, {
-									label: "Text",
-									checked: Z(N.base),
-									onChange: (e) => B({ text: e ? Q(N.base) : !1 })
-								}),
-								Z(N.base) ? /* @__PURE__ */ a(ue, {
-									label: "Text",
-									value: Q(N.base),
-									onChange: (e) => B({ text: e })
-								}) : null,
-								/* @__PURE__ */ a(Y, {
-									label: "Dash",
-									checked: N.base.dash ?? !1,
-									onChange: (e) => B({ dash: e })
-								}),
-								/* @__PURE__ */ a(J, {
-									label: "Text paint",
-									value: pe(N.base),
-									options: ["solid", "wireframe"],
-									onChange: (e) => B({ textStyle: e })
-								})
-							]
+						/* @__PURE__ */ o("div", {
+							className: "state-switch",
+							role: "group",
+							"aria-label": "Layer state",
+							children: [/* @__PURE__ */ a("button", {
+								type: "button",
+								"aria-pressed": F === "base",
+								onClick: () => I("base"),
+								children: "Base"
+							}), /* @__PURE__ */ o("button", {
+								type: "button",
+								"aria-pressed": F === "hover",
+								onClick: () => I("hover"),
+								children: ["Hover", B.hover ? /* @__PURE__ */ a("span", {
+									className: "state-dot",
+									"aria-hidden": "true"
+								}) : null]
+							})]
 						}),
-						/* @__PURE__ */ o(q, {
-							title: "Hover",
-							children: [/* @__PURE__ */ a(Y, {
-								label: "Enabled",
-								checked: !!N.hover,
+						F === "base" ? /* @__PURE__ */ a(we, {
+							title: "Base State",
+							variant: B.base,
+							onChange: me
+						}) : /* @__PURE__ */ o(Y, {
+							title: "Hover State",
+							children: [/* @__PURE__ */ a(Ee, {
+								label: "Hover variant",
+								checked: !!B.hover,
+								title: "Swap this layer to another variant on hover.",
 								onChange: (e) => {
-									z(N.id, (t) => ({
+									J(B.id, (t) => ({
 										...t,
 										hover: e ? {
 											...t.base,
@@ -1153,26 +1361,26 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 										} : void 0
 									}));
 								}
-							}), N.hover ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(J, {
-								label: "Material",
-								value: N.hover.material ?? N.base.material ?? "wireframe",
-								options: oe,
-								onChange: (e) => V({ material: e })
-							}), /* @__PURE__ */ a(le, {
-								value: N.hover.paletteId ?? N.base.paletteId ?? "15",
-								onChange: (e) => V({ paletteId: e })
-							})] }) : null]
+							}), B.hover ? /* @__PURE__ */ a(Te, {
+								variant: {
+									...B.base,
+									...B.hover
+								},
+								onChange: he
+							}) : null]
 						}),
-						/* @__PURE__ */ o(q, {
+						/* @__PURE__ */ o(Y, {
 							title: "Stroke Widths",
+							collapsible: !0,
+							defaultOpen: !1,
 							children: [
-								/* @__PURE__ */ a(X, {
+								/* @__PURE__ */ a(Z, {
 									label: "Face",
-									value: N.stroke?.face ?? .35,
+									value: B.stroke?.face ?? .35,
 									min: 0,
 									max: 1.5,
 									step: .05,
-									onChange: (e) => z(N.id, (t) => ({
+									onChange: (e) => J(B.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1180,13 +1388,13 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(X, {
+								/* @__PURE__ */ a(Z, {
 									label: "Wire",
-									value: N.stroke?.wire ?? 1.6,
+									value: B.stroke?.wire ?? 1.6,
 									min: .4,
 									max: 4,
 									step: .1,
-									onChange: (e) => z(N.id, (t) => ({
+									onChange: (e) => J(B.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1194,13 +1402,13 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(X, {
+								/* @__PURE__ */ a(Z, {
 									label: "Dash",
-									value: N.stroke?.dash ?? 2.2,
+									value: B.stroke?.dash ?? 2.2,
 									min: .6,
 									max: 5,
 									step: .1,
-									onChange: (e) => z(N.id, (t) => ({
+									onChange: (e) => J(B.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1208,13 +1416,13 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(X, {
+								/* @__PURE__ */ a(Z, {
 									label: "Text outline",
-									value: N.stroke?.labelWire ?? 1.1,
+									value: B.stroke?.labelWire ?? 1.1,
 									min: .4,
 									max: 2,
 									step: .05,
-									onChange: (e) => z(N.id, (t) => ({
+									onChange: (e) => J(B.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1224,58 +1432,201 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 								})
 							]
 						})
-					] }) : /* @__PURE__ */ a("p", {
+					] }) : /* @__PURE__ */ o("div", {
 						className: "empty-note",
-						children: "Select a layer in the list or preview."
+						children: [/* @__PURE__ */ a("h2", { children: "No layer selected" }), /* @__PURE__ */ a("button", {
+							type: "button",
+							className: "primary-action",
+							onClick: ge,
+							children: "Add layer"
+						})]
 					})
 				})
 			]
 		})]
 	});
 }
-function q({ title: e, children: t }) {
-	return /* @__PURE__ */ o("section", {
+function Y({ title: e, children: t, collapsible: n = !1, defaultOpen: r = !0 }) {
+	return n ? /* @__PURE__ */ o("details", {
+		className: "editor-section editor-section-details",
+		open: r,
+		children: [/* @__PURE__ */ a("summary", { children: /* @__PURE__ */ a("h3", { children: e }) }), /* @__PURE__ */ a("div", {
+			className: "editor-section-body",
+			children: t
+		})]
+	}) : /* @__PURE__ */ o("section", {
 		className: "editor-section",
 		children: [/* @__PURE__ */ a("h3", { children: e }), t]
 	});
 }
-function J({ label: e, value: t, options: n, onChange: r }) {
-	return /* @__PURE__ */ o("label", {
+function we({ title: e, variant: t, onChange: n }) {
+	return /* @__PURE__ */ a(Y, {
+		title: e,
+		children: /* @__PURE__ */ a(Te, {
+			variant: t,
+			onChange: n
+		})
+	});
+}
+function Te({ variant: e, onChange: t }) {
+	return /* @__PURE__ */ o("div", {
+		className: "variant-controls",
+		children: [
+			/* @__PURE__ */ a(X, {
+				label: "Material",
+				value: e.material ?? "wireframe",
+				options: ve,
+				onChange: (e) => t({ material: e })
+			}),
+			/* @__PURE__ */ a(Oe, {
+				value: e.paletteId ?? "15",
+				onChange: (e) => t({ paletteId: e })
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "feature-grid",
+				"aria-label": "Top details",
+				children: [/* @__PURE__ */ a(Ee, {
+					label: "Text",
+					checked: Q(e),
+					title: "Toggle top-plane text for this state.",
+					onChange: (n) => t(n ? {
+						text: qe(e),
+						textColor: Ye(e)
+					} : {
+						text: !1,
+						textColor: void 0
+					})
+				}), /* @__PURE__ */ a(Ee, {
+					label: "Dash",
+					checked: e.dash ?? !1,
+					title: "Toggle the dashed inlay for this state.",
+					onChange: (n) => t(n ? {
+						dash: !0,
+						dashColor: Xe(e)
+					} : {
+						dash: !1,
+						dashColor: void 0
+					})
+				})]
+			}),
+			Q(e) ? /* @__PURE__ */ o("div", {
+				className: "nested-fields",
+				children: [
+					/* @__PURE__ */ a(ke, {
+						label: "Text",
+						value: qe(e),
+						onChange: (e) => t({ text: e })
+					}),
+					/* @__PURE__ */ a(X, {
+						label: "Text paint",
+						value: Je(e),
+						options: ye,
+						onChange: (e) => t({ textStyle: e })
+					}),
+					/* @__PURE__ */ a(De, {
+						label: "Text color",
+						value: Ye(e),
+						forcedValue: Qe(e),
+						onChange: (e) => t({ textColor: e })
+					}),
+					/* @__PURE__ */ a(Z, {
+						label: "Text size",
+						value: e.textSize ?? ge,
+						min: me,
+						max: he,
+						step: 1,
+						formatValue: (e) => `${Math.round(e)}px`,
+						onChange: (e) => t({ textSize: e })
+					}),
+					/* @__PURE__ */ a(X, {
+						label: "Font weight",
+						value: String(e.textFontWeight ?? _e),
+						options: xe,
+						onChange: (e) => t({ textFontWeight: Number(e) })
+					})
+				]
+			}) : null,
+			e.dash ? /* @__PURE__ */ a("div", {
+				className: "nested-fields",
+				children: /* @__PURE__ */ a(De, {
+					label: "Dash color",
+					value: Xe(e),
+					forcedValue: $e(e),
+					onChange: (e) => t({ dashColor: e })
+				})
+			}) : null
+		]
+	});
+}
+function Ee({ label: e, checked: t, title: n, onChange: r }) {
+	return /* @__PURE__ */ o("button", {
+		type: "button",
+		className: "feature-switch",
+		"aria-pressed": t,
+		title: n,
+		onClick: () => r(!t),
+		children: [/* @__PURE__ */ a("span", {
+			className: "feature-switch-label",
+			children: e
+		}), /* @__PURE__ */ a("span", {
+			className: "feature-switch-state",
+			children: t ? "On" : "Off"
+		})]
+	});
+}
+function De({ label: e, value: t, forcedValue: n, onChange: r }) {
+	return n ? /* @__PURE__ */ o("div", {
 		className: "field",
-		children: [/* @__PURE__ */ a("span", { children: e }), /* @__PURE__ */ a("select", {
-			value: t,
-			onChange: (e) => r(e.target.value),
-			children: n.map((e) => /* @__PURE__ */ a("option", {
-				value: e,
-				children: e
-			}, e))
+		children: [/* @__PURE__ */ a("span", { children: e }), /* @__PURE__ */ a("div", {
+			className: "forced-token",
+			title: "This material controls annotation paint from the wireframe palette.",
+			children: n
 		})]
+	}) : /* @__PURE__ */ a(X, {
+		label: e,
+		value: t,
+		options: be,
+		onChange: r
 	});
 }
-function le({ value: e, onChange: t }) {
-	return /* @__PURE__ */ o("label", {
+function X({ label: e, value: t, options: n, onChange: r }) {
+	return /* @__PURE__ */ o("div", {
 		className: "field",
-		children: [/* @__PURE__ */ a("span", { children: "Palette" }), /* @__PURE__ */ a("select", {
-			value: e,
-			onChange: (e) => t(e.target.value),
-			children: x.map((e) => /* @__PURE__ */ a("option", {
-				value: e,
-				children: b[e].label
-			}, e))
+		children: [/* @__PURE__ */ a("span", { children: e }), /* @__PURE__ */ a("div", {
+			className: "segmented-field",
+			role: "group",
+			"aria-label": e,
+			children: n.map((e) => /* @__PURE__ */ a("button", {
+				type: "button",
+				title: e.title,
+				"aria-pressed": e.value === t,
+				onClick: () => r(e.value),
+				children: e.label
+			}, e.value))
 		})]
 	});
 }
-function Y({ label: e, checked: t, onChange: n }) {
-	return /* @__PURE__ */ o("label", {
-		className: "toggle-field",
-		children: [/* @__PURE__ */ a("input", {
-			type: "checkbox",
-			checked: t,
-			onChange: (e) => n(e.target.checked)
-		}), /* @__PURE__ */ a("span", { children: e })]
+function Oe({ value: e, onChange: t }) {
+	return /* @__PURE__ */ o("div", {
+		className: "field palette-field",
+		children: [/* @__PURE__ */ a("span", { children: "Palette" }), /* @__PURE__ */ a("div", {
+			className: "palette-grid",
+			role: "group",
+			"aria-label": "Palette",
+			children: x.map((n) => /* @__PURE__ */ o("button", {
+				type: "button",
+				title: b[n].label,
+				"aria-pressed": e === n,
+				onClick: () => t(n),
+				children: [/* @__PURE__ */ a("span", {
+					className: "palette-swatch",
+					style: { background: `linear-gradient(135deg, ${b[n].swatch[0]}, ${b[n].swatch[1]})` }
+				}), /* @__PURE__ */ a("span", { children: n })]
+			}, n))
+		})]
 	});
 }
-function ue({ label: e, value: t, onChange: n }) {
+function ke({ label: e, value: t, onChange: n }) {
 	return /* @__PURE__ */ o("label", {
 		className: "field",
 		children: [/* @__PURE__ */ a("span", { children: e }), /* @__PURE__ */ a("input", {
@@ -1285,24 +1636,24 @@ function ue({ label: e, value: t, onChange: n }) {
 		})]
 	});
 }
-function X({ label: e, value: t, min: n, max: r, step: i, onChange: s }) {
+function Z({ label: e, value: t, min: n, max: r, step: i, formatValue: s, onChange: c }) {
 	return /* @__PURE__ */ o("label", {
 		className: "field",
 		children: [/* @__PURE__ */ o("span", { children: [
 			e,
 			": ",
-			t.toFixed(2)
+			s ? s(t) : t.toFixed(2)
 		] }), /* @__PURE__ */ a("input", {
 			type: "range",
 			min: n,
 			max: r,
 			step: i,
 			value: t,
-			onChange: (e) => s(Number(e.target.value))
+			onChange: (e) => c(Number(e.target.value))
 		})]
 	});
 }
-function de() {
+function Ae() {
 	return /* @__PURE__ */ o("svg", {
 		className: "copy-icon",
 		viewBox: "0 0 24 24",
@@ -1317,23 +1668,125 @@ function de() {
 		}), /* @__PURE__ */ a("path", { d: "M5 15V6.8C5 5.8 5.8 5 6.8 5H15" })]
 	});
 }
-function fe(e) {
-	let t = [e.material ?? "wireframe", e.paletteId ?? "15"];
-	return Z(e) && t.push(`text: ${Q(e)}`), e.dash && t.push("dash"), t.join(" / ");
+function je() {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ a("path", { d: "M12 5v14M5 12h14" })
+	});
+}
+function Me() {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ a("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" })
+	});
 }
-function Z(e) {
-	return typeof e.text == "string" ? e.text.trim().length > 0 : e.text === !0 || $(e).gpu === !0;
+function Ne() {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ a("path", { d: "M2.5 12s3.4-6 9.5-6 9.5 6 9.5 6-3.4 6-9.5 6-9.5-6-9.5-6Z" }), /* @__PURE__ */ a("circle", {
+			cx: "12",
+			cy: "12",
+			r: "2.8"
+		})]
+	});
+}
+function Pe() {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ a("path", { d: "M3 3l18 18M9.4 5.5A10.9 10.9 0 0 1 12 5c6.1 0 9.5 7 9.5 7a15.2 15.2 0 0 1-3 4M6.7 6.9A15.5 15.5 0 0 0 2.5 12s3.4 7 9.5 7c1.1 0 2.2-.2 3.1-.6" })
+	});
+}
+function Fe() {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ a("path", { d: "M6 6l12 12M18 6L6 18" })
+	});
+}
+function Ie() {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ a("path", { d: "M9 18 3 12l6-6M15 6l6 6-6 6" })
+	});
+}
+function Le(e) {
+	let t = [ze(e.material ?? "wireframe"), Re(e.paletteId).label];
+	return Q(e) && t.push(`text: ${qe(e)}`), e.dash && t.push("dash"), t.join(" / ");
+}
+function Re(e) {
+	return b[e] ?? b[15];
+}
+function ze(e) {
+	return e === "transparent" ? "Glass" : e === "solid" ? "Solid" : "Wire";
+}
+function Be(e, t, n) {
+	return `Layer ${t}`;
+}
+function Ve(e) {
+	let t = new Set(e.map((e) => e.id)), n = e.length + 1;
+	for (; t.has(`layer-${n}`);) n += 1;
+	return `layer-${n}`;
+}
+function He(e) {
+	let t = (J - e) / (J - q);
+	return Ge(Math.round(t * 100), ce, le);
+}
+function Ue(e) {
+	return Ke(J - Ge(e, ce, le) / 100 * (J - q), 1);
+}
+function We(e) {
+	return {
+		exponent: e.exponent ?? s.exponent,
+		prismHeight: e.prismHeight ?? s.prismHeight,
+		inlayScale: e.inlayScale ?? s.inlayScale
+	};
+}
+function Ge(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function Ke(e, t) {
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
 }
 function Q(e) {
-	return typeof e.text == "string" ? e.text : (e.text === !0 || $(e).gpu, ae);
+	return typeof e.text == "string" ? e.text.trim().length > 0 : e.text === !0 || $(e).gpu === !0;
+}
+function qe(e) {
+	return typeof e.text == "string" ? e.text : (e.text === !0 || $(e).gpu, K);
 }
-function pe(e) {
+function Je(e) {
 	return e.textStyle ?? $(e).gpuStyle ?? "solid";
 }
+function Ye(e) {
+	return Ze(e.textColor ?? $(e).gpuColor ?? "contrast");
+}
+function Xe(e) {
+	return Ze(e.dashColor ?? "contrast");
+}
+function Ze(e) {
+	return e === "contrast" ? "auto" : e;
+}
+function Qe(e) {
+	return (e.material ?? "wireframe") === "wireframe" ? Je(e) === "wireframe" ? "Wire gradient" : "Surface gradient" : null;
+}
+function $e(e) {
+	return (e.material ?? "wireframe") === "wireframe" ? "Wire gradient" : null;
+}
 function $(e) {
 	return e;
 }
 //#endregion
-export { s as DEFAULT_GEOMETRY, S as DEFAULT_PALETTE_ID, b as SQUIRCLE_PALETTES, x as SQUIRCLE_PALETTE_IDS, ce as SquircleEditor, A as SquircleScene, se as createDefaultSquircleEditorLayers, c as createSquircleGeometry, u as createSquircleLayers, ee as createSquircleReactCode, C as getSquirclePalette, d as reflowLayerOffsets, re as toComponentName };
+export { s as DEFAULT_GEOMETRY, S as DEFAULT_PALETTE_ID, b as SQUIRCLE_PALETTES, x as SQUIRCLE_PALETTE_IDS, Ce as SquircleEditor, te as SquircleScene, Se as createDefaultSquircleEditorLayers, c as createSquircleGeometry, u as createSquircleLayers, ie as createSquircleReactCode, C as getSquirclePalette, d as reflowLayerOffsets, G as toComponentName };
 
 //# sourceMappingURL=sqircle.js.map