@dstackai/sqircle 0.1.0 → 0.1.2

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)), re = v(E), M = 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: re,
+		sideBounds: M,
 		viewBox: `0 0 ${y(r)} ${y(i)}`
 	};
 }
@@ -550,9 +550,12 @@ var b = {
 function C(e) {
 	return b[e] ?? b[15];
 }
+function w(e) {
+	return !!(e && e in b);
+}
 //#endregion
 //#region src/squircle/SquircleScene.tsx
-var w = {
+var T = {
 	face: .35,
 	faceOpacity: .72,
 	wire: 1.6,
@@ -562,16 +565,239 @@ var w = {
 	dash: 2.2,
 	wireDash: 1.6,
 	labelWire: 1.1
-}, T = {
+}, E = {
 	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 }) {
+}, D = "GPU", O = 62, ee = "Arial, Helvetica, sans-serif", te = 400, ne = "off", k = [
+	{
+		x: -1.12,
+		y: -1.04,
+		r: .48,
+		slot: 0,
+		i: 0,
+		sp: .95,
+		ax: .23,
+		ay: .21,
+		ar: .018
+	},
+	{
+		x: -.58,
+		y: -.7,
+		r: .49,
+		slot: 1,
+		i: 1,
+		sp: 1.1,
+		ax: .24,
+		ay: .2,
+		ar: .018
+	},
+	{
+		x: -.1,
+		y: -.16,
+		r: .47,
+		slot: 2,
+		i: 2,
+		sp: .9,
+		ax: .22,
+		ay: .23,
+		ar: .016
+	},
+	{
+		x: .46,
+		y: -.72,
+		r: .48,
+		slot: 3,
+		i: 3,
+		sp: 1.2,
+		ax: .23,
+		ay: .21,
+		ar: .018
+	},
+	{
+		x: 1.02,
+		y: -.18,
+		r: .46,
+		slot: 4,
+		i: 4,
+		sp: 1.05,
+		ax: .22,
+		ay: .23,
+		ar: .016
+	},
+	{
+		x: 1.18,
+		y: .58,
+		r: .48,
+		slot: 2,
+		i: 5,
+		sp: .85,
+		ax: .24,
+		ay: .21,
+		ar: .018
+	},
+	{
+		x: .42,
+		y: 1.08,
+		r: .47,
+		slot: 1,
+		i: 6,
+		sp: 1.3,
+		ax: .23,
+		ay: .24,
+		ar: .016
+	},
+	{
+		x: -.54,
+		y: 1.14,
+		r: .48,
+		slot: 3,
+		i: 7,
+		sp: 1,
+		ax: .24,
+		ay: .22,
+		ar: .018
+	}
+], A = [
+	{
+		x: -.82,
+		y: -.44,
+		r: .48,
+		slot: 0,
+		i: 8,
+		sp: 1.7,
+		ax: .25,
+		ay: .23,
+		ar: .016
+	},
+	{
+		x: -.2,
+		y: -1.08,
+		r: .47,
+		slot: 1,
+		i: 9,
+		sp: 1.45,
+		ax: .24,
+		ay: .22,
+		ar: .016
+	},
+	{
+		x: .66,
+		y: 0,
+		r: .49,
+		slot: 0,
+		i: 10,
+		sp: 2,
+		ax: .23,
+		ay: .25,
+		ar: .016
+	},
+	{
+		x: 1.12,
+		y: .94,
+		r: .47,
+		slot: 1,
+		i: 11,
+		sp: 1.6,
+		ax: .25,
+		ay: .23,
+		ar: .016
+	}
+], j = [
+	{
+		x: -1.08,
+		y: -.96,
+		r: .47,
+		slot: 0,
+		i: 12,
+		sp: .75,
+		ax: .2,
+		ay: .19,
+		ar: .016
+	},
+	{
+		x: -.56,
+		y: -.46,
+		r: .49,
+		slot: 1,
+		i: 13,
+		sp: .9,
+		ax: .21,
+		ay: .2,
+		ar: .016
+	},
+	{
+		x: .02,
+		y: .02,
+		r: .47,
+		slot: 2,
+		i: 14,
+		sp: .8,
+		ax: .2,
+		ay: .21,
+		ar: .016
+	},
+	{
+		x: .64,
+		y: -.6,
+		r: .48,
+		slot: 3,
+		i: 15,
+		sp: 1,
+		ax: .21,
+		ay: .19,
+		ar: .016
+	},
+	{
+		x: 1.12,
+		y: .2,
+		r: .46,
+		slot: 1,
+		i: 16,
+		sp: .85,
+		ax: .2,
+		ay: .21,
+		ar: .016
+	},
+	{
+		x: .74,
+		y: 1.08,
+		r: .49,
+		slot: 2,
+		i: 17,
+		sp: .95,
+		ax: .21,
+		ay: .2,
+		ar: .016
+	},
+	{
+		x: -.14,
+		y: 1.16,
+		r: .47,
+		slot: 0,
+		i: 18,
+		sp: .82,
+		ax: .2,
+		ay: .21,
+		ar: .016
+	},
+	{
+		x: -1.04,
+		y: .58,
+		r: .48,
+		slot: 3,
+		i: 19,
+		sp: 1.05,
+		ax: .21,
+		ay: .2,
+		ar: .016
+	}
+];
+function re({ 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
-	}), S = { "--sq-transition-ms": `${p}ms` };
+	}), S = { "--sq-transition-ms": `${p}ms` }, C = se(v.some(ce));
 	return /* @__PURE__ */ o("svg", {
 		className: [
 			"squircle-scene",
@@ -583,55 +809,94 @@ 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(M, {
 			prefix: g,
 			geometry: x
-		}), v.map((e) => /* @__PURE__ */ a(N, {
+		}), v.map((e) => /* @__PURE__ */ a(ie, {
 			layer: e,
 			geometry: x,
 			prefix: g,
+			motionTime: C,
 			selected: i === e.id,
 			onSelect: m
 		}, e.id))]
 	});
 }
-function j({ prefix: e, geometry: t }) {
-	return /* @__PURE__ */ a("defs", { children: Object.values(b).map((n) => /* @__PURE__ */ o("g", { children: [
-		/* @__PURE__ */ a(M, {
-			id: `${e}-top-${n.id}`,
-			x1: t.topBounds.minX,
-			y1: t.topBounds.minY,
-			x2: t.topBounds.maxX,
-			y2: t.topBounds.maxY,
-			stops: n.top
+function M({ prefix: e, geometry: t }) {
+	let n = l(t.topPoints), r = J(t.config.halfSize * 2 * .13), i = J(t.config.halfSize * 3.6), s = i * 2;
+	return /* @__PURE__ */ o("defs", { children: [
+		/* @__PURE__ */ a("clipPath", {
+			id: `${e}-top-clip`,
+			clipPathUnits: "userSpaceOnUse",
+			children: /* @__PURE__ */ a("polygon", { points: n })
 		}),
-		/* @__PURE__ */ a(M, {
-			id: `${e}-side-${n.id}`,
-			x1: t.sideBounds.minX,
-			y1: t.sideBounds.minY,
-			x2: t.sideBounds.maxX,
-			y2: t.sideBounds.maxY,
-			stops: n.side
+		/* @__PURE__ */ a("filter", {
+			id: `${e}-fluid-main-blur`,
+			filterUnits: "userSpaceOnUse",
+			primitiveUnits: "userSpaceOnUse",
+			x: -i,
+			y: -i,
+			width: s,
+			height: s,
+			children: /* @__PURE__ */ a("feGaussianBlur", { stdDeviation: r })
 		}),
-		/* @__PURE__ */ a(M, {
-			id: `${e}-text-surface-${n.id}`,
-			x1: -425.63,
-			y1: -.1,
-			x2: 425.6,
-			y2: .07,
-			stops: n.top
+		/* @__PURE__ */ a("filter", {
+			id: `${e}-fluid-light-blur`,
+			filterUnits: "userSpaceOnUse",
+			primitiveUnits: "userSpaceOnUse",
+			x: -i,
+			y: -i,
+			width: s,
+			height: s,
+			children: /* @__PURE__ */ a("feGaussianBlur", { stdDeviation: r })
 		}),
-		/* @__PURE__ */ a(M, {
-			id: `${e}-text-wire-${n.id}`,
-			x1: -64,
-			y1: -24,
-			x2: 64,
-			y2: 24,
-			stops: n.textWire
-		})
-	] }, n.id)) });
+		/* @__PURE__ */ a("filter", {
+			id: `${e}-frosted-blur`,
+			filterUnits: "userSpaceOnUse",
+			primitiveUnits: "userSpaceOnUse",
+			x: -i,
+			y: -i,
+			width: s,
+			height: s,
+			children: /* @__PURE__ */ a("feGaussianBlur", { stdDeviation: r })
+		}),
+		Object.values(b).map((n) => /* @__PURE__ */ o("g", { children: [
+			/* @__PURE__ */ a(N, {
+				id: `${e}-top-${n.id}`,
+				x1: t.topBounds.minX,
+				y1: t.topBounds.minY,
+				x2: t.topBounds.maxX,
+				y2: t.topBounds.maxY,
+				stops: n.top
+			}),
+			/* @__PURE__ */ a(N, {
+				id: `${e}-side-${n.id}`,
+				x1: t.sideBounds.minX,
+				y1: t.sideBounds.minY,
+				x2: t.sideBounds.maxX,
+				y2: t.sideBounds.maxY,
+				stops: n.side
+			}),
+			/* @__PURE__ */ a(N, {
+				id: `${e}-text-surface-${n.id}`,
+				x1: -425.63,
+				y1: -.1,
+				x2: 425.6,
+				y2: .07,
+				stops: n.top
+			}),
+			/* @__PURE__ */ a(N, {
+				id: `${e}-text-wire-${n.id}`,
+				x1: -64,
+				y1: -24,
+				x2: 64,
+				y2: 24,
+				stops: n.textWire
+			})
+		] }, n.id))
+	] });
 }
-function M({ id: e, x1: t, y1: n, x2: r, y2: i, stops: o }) {
+function N({ id: e, x1: t, y1: n, x2: r, y2: i, stops: o }) {
 	return /* @__PURE__ */ a("linearGradient", {
 		id: e,
 		x1: t,
@@ -645,37 +910,39 @@ 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 ie({ layer: e, geometry: t, prefix: n, motionTime: r, selected: i, onSelect: s }) {
+	let c = L(e.base, e.stroke, e.opacity), l = e.hover ? L({
 		...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, u = !!(l && K(l) !== K(c)), d = e.offset?.x ?? 0, f = e.offset?.y ?? 0;
 	return /* @__PURE__ */ o("g", {
 		className: [
 			"sq-layer",
-			l ? "sq-has-hover" : "",
-			r ? "is-selected" : "",
+			u ? "sq-has-hover" : "",
+			i ? "is-selected" : "",
 			e.className
 		].filter(Boolean).join(" "),
 		"data-layer-id": e.id,
-		"data-hover-enabled": String(l),
-		transform: `translate(${u} ${d})`,
-		onClick: i ? () => i(e.id) : void 0,
+		"data-hover-enabled": String(u),
+		transform: `translate(${d} ${f})`,
+		onClick: s ? () => s(e.id) : void 0,
 		children: [/* @__PURE__ */ a(P, {
 			className: "sq-base",
-			variant: s,
+			variant: c,
 			geometry: t,
-			prefix: n
-		}), l && c ? /* @__PURE__ */ a(P, {
+			prefix: n,
+			motionTime: r
+		}), u && l ? /* @__PURE__ */ a(P, {
 			className: "sq-hover",
-			variant: c,
+			variant: l,
 			geometry: t,
-			prefix: n
+			prefix: n,
+			motionTime: r
 		}) : null]
 	});
 }
-function P({ 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);
+function P({ className: e, variant: t, geometry: n, prefix: r, motionTime: s }) {
+	let c = le(t.paletteId), u = `url(#${r}-top-${c.id})`, d = `url(#${r}-side-${c.id})`, f = `url(#${r}-text-surface-${c.id})`, p = `url(#${r}-text-wire-${c.id})`, m = l(n.wallPoints), h = l(n.topPoints), g = l(n.hiddenPoints), _ = l(n.inlayPoints), v = `${r}-top-clip`;
 	return /* @__PURE__ */ o("g", {
 		className: [
 			"sq-variant",
@@ -686,50 +953,51 @@ function P({ className: e, variant: t, geometry: n, prefix: r }) {
 			t.material === "wireframe" ? /* @__PURE__ */ o(i, { children: [
 				/* @__PURE__ */ a("polyline", {
 					className: "sq-hidden",
-					points: h,
-					stroke: c,
+					points: g,
+					stroke: u,
 					strokeWidth: t.stroke.hidden,
 					opacity: t.stroke.hiddenOpacity
 				}),
 				/* @__PURE__ */ a("polygon", {
 					className: "sq-face sq-wire-side",
-					points: p,
+					points: m,
 					fill: "none",
-					stroke: c,
+					stroke: u,
 					strokeWidth: t.stroke.wire,
 					strokeOpacity: t.stroke.wireOpacity
 				}),
 				/* @__PURE__ */ a("polygon", {
 					className: "sq-face sq-wire-top",
-					points: m,
+					points: h,
 					fill: "none",
-					stroke: c,
+					stroke: u,
 					strokeWidth: t.stroke.wire,
 					strokeOpacity: t.stroke.wireOpacity
 				})
 			] }) : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("polygon", {
 				className: "sq-face sq-solid-side",
-				points: p,
-				fill: u,
-				fillOpacity: t.material === "transparent" ? t.opacity.transparentFace : 1,
-				stroke: s.sideEdge,
-				strokeWidth: t.stroke.face,
-				strokeOpacity: t.stroke.faceOpacity
-			}), /* @__PURE__ */ a("polygon", {
-				className: "sq-face sq-solid-top",
 				points: m,
-				fill: c,
+				fill: d,
 				fillOpacity: t.material === "transparent" ? t.opacity.transparentFace : 1,
-				stroke: s.topEdge,
+				stroke: c.sideEdge,
 				strokeWidth: t.stroke.face,
 				strokeOpacity: t.stroke.faceOpacity
+			}), /* @__PURE__ */ a(F, {
+				variant: t,
+				palette: c,
+				geometry: n,
+				prefix: r,
+				topClipId: v,
+				topFill: u,
+				topPoints: h,
+				motionTime: s
 			})] }),
 			t.dash ? /* @__PURE__ */ a("polygon", {
 				className: "sq-inlay",
-				points: g,
-				stroke: V(t, s, c),
+				points: _,
+				stroke: U(t, c, u),
 				strokeWidth: t.material === "wireframe" ? t.stroke.wireDash : t.stroke.dash,
-				opacity: H(t)
+				opacity: W(t)
 			}) : null,
 			t.text ? /* @__PURE__ */ a("text", {
 				className: "sq-label",
@@ -739,60 +1007,177 @@ function P({ className: e, variant: t, geometry: n, prefix: r }) {
 				fontFamily: t.textFontFamily,
 				fontSize: t.textSize,
 				fontWeight: t.textFontWeight,
-				...U(t, s, d, f),
+				...G(t, c, f, p),
 				children: t.text
 			}) : null
 		]
 	});
 }
-function F(e, t = {}, n = {}) {
+function F({ variant: e, palette: t, geometry: n, prefix: r, topClipId: s, topFill: c, topPoints: l, motionTime: u }) {
+	let d = e.material === "transparent" ? e.opacity.transparentFace : 1, f = e.material === "solid" ? e.effect : "off", p = n.config.halfSize, m = {
+		x: -p * 1.3,
+		y: -p * 1.3,
+		size: p * 2.6
+	};
+	return f === "fluid" ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("g", {
+		className: "sq-top-effect sq-top-effect-fluid",
+		clipPath: `url(#${s})`,
+		children: /* @__PURE__ */ o("g", {
+			transform: n.labelTransform,
+			children: [
+				/* @__PURE__ */ a("rect", {
+					x: m.x,
+					y: m.y,
+					width: m.size,
+					height: m.size,
+					fill: t.effectColors[3]
+				}),
+				/* @__PURE__ */ a("g", {
+					filter: `url(#${r}-fluid-main-blur)`,
+					children: k.map((e) => /* @__PURE__ */ a(I, {
+						blob: e,
+						palette: t,
+						geometry: n,
+						motionTime: u
+					}, e.i))
+				}),
+				/* @__PURE__ */ a("g", {
+					filter: `url(#${r}-fluid-light-blur)`,
+					opacity: .6,
+					style: { mixBlendMode: "screen" },
+					children: A.map((e) => /* @__PURE__ */ a(I, {
+						blob: e,
+						palette: t,
+						geometry: n,
+						motionTime: u
+					}, e.i))
+				})
+			]
+		})
+	}), /* @__PURE__ */ a("polygon", {
+		className: "sq-face sq-solid-top sq-effect-outline",
+		points: l,
+		fill: "none",
+		stroke: t.topEdge,
+		strokeWidth: e.stroke.face,
+		strokeOpacity: e.stroke.faceOpacity
+	})] }) : f === "frosted" ? /* @__PURE__ */ o(i, { children: [
+		/* @__PURE__ */ o("g", {
+			className: "sq-top-effect sq-top-effect-frosted",
+			clipPath: `url(#${s})`,
+			children: [/* @__PURE__ */ o("g", {
+				transform: n.labelTransform,
+				children: [/* @__PURE__ */ a("rect", {
+					x: m.x,
+					y: m.y,
+					width: m.size,
+					height: m.size,
+					fill: t.effectColors[6]
+				}), /* @__PURE__ */ a("g", {
+					filter: `url(#${r}-frosted-blur)`,
+					children: j.map((e) => /* @__PURE__ */ a(I, {
+						blob: e,
+						palette: t,
+						geometry: n,
+						motionTime: u
+					}, e.i))
+				})]
+			}), /* @__PURE__ */ a("polygon", {
+				points: l,
+				fill: "#eef2ff",
+				opacity: .16
+			})]
+		}),
+		/* @__PURE__ */ a("polygon", {
+			className: "sq-face sq-solid-top sq-effect-outline",
+			points: l,
+			fill: "none",
+			stroke: t.topEdge,
+			strokeWidth: e.stroke.face,
+			strokeOpacity: e.stroke.faceOpacity
+		}),
+		/* @__PURE__ */ a("polygon", {
+			className: "sq-face sq-frosted-rim",
+			points: l,
+			fill: "none",
+			stroke: "#ffffff",
+			strokeWidth: Math.max(.7, e.stroke.face * 1.8),
+			strokeOpacity: .52
+		})
+	] }) : /* @__PURE__ */ a("polygon", {
+		className: "sq-face sq-solid-top",
+		points: l,
+		fill: c,
+		fillOpacity: d,
+		stroke: t.topEdge,
+		strokeWidth: e.stroke.face,
+		strokeOpacity: e.stroke.faceOpacity
+	});
+}
+function I({ blob: e, palette: t, geometry: n, motionTime: r }) {
+	let i = n.config.halfSize, o = i * 2, s = i * e.x, c = i * e.y, l = o * e.r, u = o * e.ax, d = o * e.ay, f = o * e.ar, p = s + u * Math.sin(r * .62 * e.sp + e.i * 1.7) + .5 * u * Math.cos(r * .4 * e.sp + e.i * .6), m = c + d * Math.cos(r * .55 * e.sp + e.i * 2.1) + .55 * d * Math.sin(r * .34 * e.sp + e.i), h = Math.max(4, l + f * Math.sin(r * .8 + e.i * 1.2));
+	return /* @__PURE__ */ a("circle", {
+		cx: J(p),
+		cy: J(m),
+		r: J(h),
+		fill: t.effectColors[e.slot] ?? t.effectColors[3]
+	});
+}
+function L(e, t = {}, n = {}) {
 	return {
 		material: e.material ?? "wireframe",
-		paletteId: e.paletteId ?? "15",
-		text: L(e.text, I(e).gpu),
+		paletteId: oe(e.paletteId),
+		effect: ae(e.effect ?? ne),
+		text: z(e.text, R(e).gpu),
 		dash: e.dash ?? !1,
-		textStyle: R(e.textStyle ?? I(e).gpuStyle ?? "solid"),
-		textColor: z(e.textColor ?? I(e).gpuColor ?? "contrast"),
-		textSize: e.textSize ?? D,
-		textFontFamily: e.textFontFamily ?? O,
-		textFontWeight: e.textFontWeight ?? k,
-		dashColor: z(e.dashColor ?? "contrast"),
+		textStyle: B(e.textStyle ?? R(e).gpuStyle ?? "solid"),
+		textColor: V(e.textColor ?? R(e).gpuColor ?? "contrast"),
+		textSize: e.textSize ?? O,
+		textFontFamily: e.textFontFamily ?? ee,
+		textFontWeight: e.textFontWeight ?? te,
+		dashColor: V(e.dashColor ?? "contrast"),
 		stroke: {
-			...w,
+			...T,
 			...t,
 			...e.stroke
 		},
 		opacity: {
-			...T,
+			...E,
 			...n,
 			...e.opacity
 		}
 	};
 }
-function I(e) {
+function R(e) {
 	return e;
 }
-function L(e, t) {
-	return typeof e == "string" ? e.trim() ? e : null : e === !0 || t ? E : null;
+function z(e, t) {
+	return typeof e == "string" ? e.trim() ? e : null : e === !0 || t ? D : null;
 }
-function R(e) {
+function B(e) {
 	return e === "wireframe" ? "wireframe" : "solid";
 }
-function z(e) {
+function ae(e) {
+	return e === "fluid" || e === "frosted" ? e : "off";
+}
+function oe(e) {
+	return w(e) ? e : "15";
+}
+function V(e) {
 	return e === "auto" ? "contrast" : e;
 }
-function B(e, t) {
-	let n = z(e);
+function H(e, t) {
+	let n = V(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 U(e, t, n) {
+	return e.material === "wireframe" ? n : H(e.dashColor, t.labelFill);
 }
-function H(e) {
+function W(e) {
 	return e.material === "transparent" ? e.opacity.transparentAnnotation : e.opacity.solidAnnotation;
 }
-function U(e, t, n, r) {
-	let i = H(e);
+function G(e, t, n, r) {
+	let i = W(e);
 	return e.material === "wireframe" ? e.textStyle === "wireframe" ? {
 		fill: "none",
 		stroke: r,
@@ -805,81 +1190,219 @@ function U(e, t, n, r) {
 		opacity: 1
 	} : e.textStyle === "wireframe" ? {
 		fill: "none",
-		stroke: B(e.textColor, t.labelFill),
+		stroke: H(e.textColor, t.labelFill),
 		strokeWidth: e.stroke.labelWire,
 		opacity: i
 	} : {
-		fill: B(e.textColor, t.labelFill),
+		fill: H(e.textColor, t.labelFill),
 		stroke: "none",
 		strokeWidth: 0,
 		opacity: i
 	};
 }
-function W(e) {
+function K(e) {
 	return JSON.stringify(e);
 }
+function se(t) {
+	let [n, i] = r(0);
+	return e(() => {
+		if (!t) {
+			i(0);
+			return;
+		}
+		let e = () => i(performance.now() / 1e3);
+		e();
+		let n = window.setInterval(e, 33);
+		return () => window.clearInterval(n);
+	}, [t]), t ? n : 0;
+}
+function ce(e) {
+	return q(L(e.base, e.stroke, e.opacity)) ? !0 : e.hover ? q(L({
+		...e.base,
+		...e.hover
+	}, e.stroke, e.opacity)) : !1;
+}
+function q(e) {
+	return e.material === "solid" && e.effect !== "off";
+}
+function le(e) {
+	let t = C(e);
+	return {
+		id: t.id,
+		labelFill: t.labelFill,
+		topEdge: t.topEdge,
+		sideEdge: t.sideEdge,
+		top: t.top,
+		side: t.side,
+		textWire: t.textWire,
+		effectColors: ue(t)
+	};
+}
+function ue(e) {
+	let t = e.top[0]?.color ?? "#f5f0ff", n = e.top[Math.floor(e.top.length / 2)]?.color ?? t, r = e.top.at(-1)?.color ?? n, i = e.side[0]?.color ?? n;
+	return [
+		t,
+		t,
+		n,
+		r,
+		i,
+		e.side[Math.floor(e.side.length / 2)]?.color ?? i,
+		e.side.at(-1)?.color ?? e.sideEdge
+	];
+}
+function J(e) {
+	return Number(e.toFixed(1));
+}
 //#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 de({ layers: e, theme: t, geometry: n, componentName: r = "CustomSquircle", importPath: i = "./squircle", styleImportPath: a, ariaLabel: o }) {
+	let s = _e(r), c = JSON.stringify(i), l = fe(i, a), u = JSON.stringify(o ?? `${s} composition`), d = JSON.stringify(e.map(pe), null, 2), f = n ? JSON.stringify(ge(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 fe(e, t) {
+	return t === !1 ? null : typeof t == "string" ? t : e === "@dstackai/sqircle" ? "@dstackai/sqircle/style.css" : null;
+}
+function pe(e) {
+	return ge({
 		...e,
-		base: K(e.base),
-		hover: e.hover ? K(e.hover) : void 0
+		base: me(e.base),
+		hover: e.hover ? me(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 me(e) {
+	let { gpu: t, gpuStyle: n, gpuColor: r, ...i } = e, a = he(i.text, t), o = i.textStyle ?? n, s = i.textColor ?? r;
+	return ge({
 		...i,
 		text: a,
 		textStyle: o,
 		textColor: s
 	});
 }
-function te(e, t) {
+function he(e, t) {
 	if (typeof e == "string") return e;
 	if (e === !0 || t) return "GPU";
 	if (e === !1) return !1;
 }
-function ne(e) {
+function ge(e) {
 	return Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0));
 }
-function re(e) {
+function _e(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 ve = 88, ye = "GPU", be = {
+	exponent: s.exponent,
+	prismHeight: s.prismHeight,
+	inlayScale: s.inlayScale
+}, xe = 0, Se = 100, Ce = 4, Y = 24, we = 4, Te = 36, Ee = .35, De = .82, Oe = 34, ke = 92, Ae = 62, je = 400, Me = [
+	{
+		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"
+	}
+], Ne = [
+	{
+		value: "off",
+		label: "Off",
+		title: "Use the static top-face gradient"
+	},
+	{
+		value: "fluid",
+		label: "Fluid",
+		title: "Animated clipped gradient blobs on the top face"
+	},
+	{
+		value: "frosted",
+		label: "Frosted",
+		title: "Muted animated blobs with a pale glass veil and rim"
+	}
+], Pe = [{
+	value: "solid",
+	label: "Filled",
+	title: "Filled top-plane text"
+}, {
+	value: "wireframe",
+	label: "Outline",
+	title: "Outlined top-plane text"
+}], Fe = [
+	{
+		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"
+	}
+], Ie = [
+	{
+		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 Le(e = "15") {
 	return d([
 		{
-			id: "bottom",
+			id: "layer-1",
 			visible: !0,
 			base: {
 				material: "wireframe",
@@ -887,7 +1410,7 @@ function se(e = "15") {
 			}
 		},
 		{
-			id: "middle",
+			id: "layer-2",
 			visible: !0,
 			base: {
 				material: "wireframe",
@@ -895,51 +1418,67 @@ function se(e = "15") {
 			}
 		},
 		{
-			id: "top",
+			id: "layer-3",
 			visible: !0,
 			base: {
 				material: "wireframe",
 				paletteId: e
 			}
 		}
-	], ie);
+	], ve);
 }
-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 Re({ 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: _ = ve, 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 ?? Le()), [O, ee] = r(() => ({
+		...be,
+		...f
+	})), [te, ne] = r(C), k = t ?? E, A = u ?? O, j = S ?? te, [M, N] = r(() => k.at(-1)?.id ?? null), [ie, P] = r("base"), [F, I] = r(!1), [L, R] = r(!1), z = k.find((e) => e.id === M) ?? null, B = z ? k.findIndex((e) => e.id === z.id) + 1 : null, ae = k.filter((e) => e.visible !== !1).length, oe = v ?? y, V = Math.max(0, ...k.map((e) => e.offset?.y ?? 0)), H = n(() => ({
+		layers: k,
+		geometry: {
+			...A,
+			viewBoxHeight: Math.max(A.viewBoxHeight ?? s.viewBoxHeight, V + 320)
+		},
+		selectedLayerId: M
 	}), [
-		E,
-		F,
-		O
-	]), L = n(() => ee({
-		layers: E,
-		theme: D,
-		componentName: g ?? l,
-		importPath: _,
-		ariaLabel: `${l} composition`
+		A,
+		k,
+		V,
+		M
+	]), U = n(() => de({
+		layers: k,
+		theme: j,
+		geometry: st(A),
+		componentName: b ?? m,
+		importPath: x,
+		ariaLabel: `${m} composition`
 	}), [
-		D,
-		g,
-		_,
-		E,
-		l
+		A,
+		j,
+		b,
+		x,
+		k,
+		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);
+		M && k.some((e) => e.id === M) || N(k.at(-1)?.id ?? null);
+	}, [k, M]), e(() => {
+		R(!1);
+	}, [U]);
+	function W(e, n = {}) {
+		let r = n.reflow ? d(e, _) : e;
+		t || D(r), l?.(r);
+	}
+	function G(e) {
+		let t = {
+			...A,
+			...e
+		};
+		u || ee(t), p?.(t);
 	}
-	function z(e, t) {
-		R(E.map((n) => n.id === e ? t(n) : n));
+	function K(e, t) {
+		W(k.map((n) => n.id === e ? t(n) : n));
 	}
-	function B(e) {
-		N && z(N.id, (t) => ({
+	function se(e) {
+		z && K(z.id, (t) => ({
 			...t,
 			base: {
 				...t.base,
@@ -947,205 +1486,326 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 			}
 		}));
 	}
-	function V(e) {
-		N && z(N.id, (t) => ({
+	function ce(e) {
+		z && K(z.id, (t) => ({
 			...t,
 			hover: {
-				...t.hover ?? t.base,
+				...t.hover ?? {},
 				...e
 			}
 		}));
 	}
-	function H() {
+	function q() {
 		let e = {
-			id: `layer-${E.length + 1}`,
+			id: it(k),
 			visible: !0,
 			base: {
 				material: "wireframe",
-				paletteId: E.at(-1)?.base.paletteId ?? "15"
+				paletteId: k.at(-1)?.base.paletteId ?? "15"
 			}
-		}, t = [...E, e];
-		k(e.id), R(t, { reflow: !0 });
+		}, t = [...k, e];
+		N(e.id), P("base"), W(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 le() {
+		if (!z) return;
+		let e = k.filter((e) => e.id !== z.id);
+		N(e.at(-1)?.id ?? null), P("base"), W(e, { reflow: !0 });
 	}
-	function W(e) {
-		z(e, (e) => ({
+	function ue(e) {
+		K(e, (e) => ({
 			...e,
 			visible: e.visible === !1
 		}));
 	}
-	function G(e) {
-		v || T(e), b?.(e);
+	function J(e) {
+		S || ne(e), w?.(e);
 	}
-	async function K() {
+	async function fe() {
 		try {
-			await navigator.clipboard.writeText(L);
+			await navigator.clipboard.writeText(U);
 		} 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 = U, 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);
+		R(!0), window.setTimeout(() => R(!1), 1400);
 	}
 	return /* @__PURE__ */ o("main", {
 		className: [
 			"squircle-editor",
-			`squircle-editor-${D}`,
-			f
+			`squircle-editor-${j}`,
+			g
 		].filter(Boolean).join(" "),
-		"data-theme": D,
+		"data-theme": j,
 		"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": j === "light",
+						onClick: () => J("light"),
+						children: "Light"
+					}), /* @__PURE__ */ a("button", {
 						type: "button",
-						onClick: () => R([]),
-						children: "Clear"
-					})
-				]
+						"aria-pressed": j === "dark",
+						onClick: () => J("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,
+								"/",
+								k.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: q,
+									children: /* @__PURE__ */ a(Ke, {})
 								}), /* @__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: () => W([]),
+									children: /* @__PURE__ */ a(qe, {})
 								})]
-							}, e.id);
+							})]
+						}),
+						/* @__PURE__ */ a("div", {
+							className: "squircle-editor-layer-list",
+							children: [...k].reverse().map((e, t) => {
+								let n = k.length - t, r = $e(e.base.paletteId), i = e.base.material ?? "wireframe", s = tt(e.base);
+								return /* @__PURE__ */ o("article", {
+									className: e.id === M ? "squircle-editor-layer-row is-active" : "squircle-editor-layer-row",
+									children: [/* @__PURE__ */ o("button", {
+										type: "button",
+										className: "layer-select",
+										onClick: () => N(e.id),
+										title: `Edit ${rt(e.id, n, k.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: rt(e.id, n, k.length) }),
+												/* @__PURE__ */ a("span", {
+													className: `material-pill material-pill-${i}`,
+													children: nt(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: [
+													$(e.base) ? /* @__PURE__ */ a("span", { children: "Text" }) : null,
+													e.base.dash ? /* @__PURE__ */ a("span", { children: "Dash" }) : null,
+													i === "solid" && s !== "off" ? /* @__PURE__ */ a("span", { children: s }) : null,
+													e.hover ? /* @__PURE__ */ a("span", { children: "Hover" }) : null,
+													!$(e.base) && !e.base.dash && !e.hover && s === "off" ? /* @__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: () => ue(e.id),
+										children: e.visible === !1 ? /* @__PURE__ */ a(Ye, {}) : /* @__PURE__ */ a(Je, {})
+									})]
+								}, e.id);
+							})
+						}),
+						/* @__PURE__ */ o(X, {
+							title: "Shape",
+							children: [
+								/* @__PURE__ */ a(Q, {
+									label: "Radius",
+									value: at(A.exponent ?? s.exponent),
+									min: xe,
+									max: Se,
+									step: 1,
+									formatValue: (e) => `${Math.round(e)}%`,
+									onChange: (e) => G({ exponent: ot(e) })
+								}),
+								/* @__PURE__ */ a(Q, {
+									label: "Height",
+									value: A.prismHeight ?? s.prismHeight,
+									min: we,
+									max: Te,
+									step: 1,
+									formatValue: (e) => `${Math.round(e)}px`,
+									onChange: (e) => G({ prismHeight: e })
+								}),
+								/* @__PURE__ */ a(Q, {
+									label: "Dash size",
+									value: (A.inlayScale ?? s.inlayScale) * 100,
+									min: Ee * 100,
+									max: De * 100,
+									step: 1,
+									formatValue: (e) => `${Math.round(e)}%`,
+									onChange: (e) => G({ inlayScale: lt(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: B ? `Editing Layer ${B}` : `${ae} visible layers` })] }), oe ? /* @__PURE__ */ o("div", {
+								className: "preview-actions",
+								children: [/* @__PURE__ */ o("button", {
+									type: "button",
+									className: "code-toggle-button",
+									"aria-pressed": F,
+									onClick: () => I((e) => !e),
+									children: [/* @__PURE__ */ a(Ze, {}), "Code"]
+								}), /* @__PURE__ */ o("button", {
+									type: "button",
+									className: "copy-code-button",
+									"aria-label": "Copy React code",
+									title: "Copy React code",
+									onClick: fe,
+									children: [/* @__PURE__ */ a(Ge, {}), /* @__PURE__ */ a("span", {
+										className: "copy-status",
+										"aria-live": "polite",
+										children: L ? "Copied" : ""
+									})]
 								})]
-							})]
-						}), /* @__PURE__ */ a("pre", {
-							className: "code-output",
-							children: /* @__PURE__ */ a("code", { children: L })
-						})]
-					}) : null]
+							}) : null]
+						}),
+						/* @__PURE__ */ a("div", {
+							className: "preview-stage",
+							children: /* @__PURE__ */ a(re, {
+								...H,
+								theme: j,
+								ariaLabel: "Editable squircle composition",
+								onLayerSelect: (e) => {
+									N(e), P("base");
+								}
+							})
+						}),
+						oe ? /* @__PURE__ */ o("section", {
+							className: F ? "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: fe,
+									children: [/* @__PURE__ */ a(Ge, {}), /* @__PURE__ */ a("span", {
+										className: "copy-status",
+										"aria-live": "polite",
+										children: L ? "Copied" : ""
+									})]
+								})]
+							}), F ? /* @__PURE__ */ a("pre", {
+								className: "code-output",
+								children: /* @__PURE__ */ a("code", { children: U })
+							}) : null]
+						}) : null
+					]
 				}),
 				/* @__PURE__ */ a("aside", {
-					className: N ? "side-panel inspector-panel" : "side-panel inspector-panel is-empty",
-					children: N ? /* @__PURE__ */ o(i, { children: [
+					className: z ? "side-panel inspector-panel" : "side-panel inspector-panel is-empty",
+					children: z ? /* @__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: B ? rt(z.id, B, k.length) : z.id }),
+								/* @__PURE__ */ a("p", { children: Qe(z.base) })
+							] }), /* @__PURE__ */ o("div", {
+								className: "panel-actions",
+								children: [/* @__PURE__ */ a("button", {
+									type: "button",
+									className: "icon-button",
+									"aria-label": "Close inspector",
+									title: "Close inspector",
+									onClick: () => N(null),
+									children: /* @__PURE__ */ a(Xe, {})
+								}), /* @__PURE__ */ a("button", {
+									type: "button",
+									className: "icon-button danger",
+									"aria-label": "Delete layer",
+									title: "Delete layer",
+									onClick: le,
+									children: /* @__PURE__ */ a(qe, {})
+								})]
 							})]
 						}),
-						/* @__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": ie === "base",
+								onClick: () => P("base"),
+								children: "Base"
+							}), /* @__PURE__ */ o("button", {
+								type: "button",
+								"aria-pressed": ie === "hover",
+								onClick: () => P("hover"),
+								children: ["Hover", z.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,
+						ie === "base" ? /* @__PURE__ */ a(ze, {
+							title: "Base State",
+							variant: z.base,
+							onChange: se
+						}) : /* @__PURE__ */ o(X, {
+							title: "Hover State",
+							children: [/* @__PURE__ */ a(Ve, {
+								label: "Hover variant",
+								checked: !!z.hover,
+								title: "Swap this layer to another variant on hover.",
 								onChange: (e) => {
-									z(N.id, (t) => ({
+									K(z.id, (t) => ({
 										...t,
 										hover: e ? {
 											...t.base,
@@ -1153,26 +1813,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]
+							}), z.hover ? /* @__PURE__ */ a(Be, {
+								variant: {
+									...z.base,
+									...z.hover
+								},
+								onChange: ce
+							}) : null]
 						}),
-						/* @__PURE__ */ o(q, {
+						/* @__PURE__ */ o(X, {
 							title: "Stroke Widths",
+							collapsible: !0,
+							defaultOpen: !1,
 							children: [
-								/* @__PURE__ */ a(X, {
+								/* @__PURE__ */ a(Q, {
 									label: "Face",
-									value: N.stroke?.face ?? .35,
+									value: z.stroke?.face ?? .35,
 									min: 0,
 									max: 1.5,
 									step: .05,
-									onChange: (e) => z(N.id, (t) => ({
+									onChange: (e) => K(z.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1180,13 +1840,13 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(X, {
+								/* @__PURE__ */ a(Q, {
 									label: "Wire",
-									value: N.stroke?.wire ?? 1.6,
+									value: z.stroke?.wire ?? 1.6,
 									min: .4,
 									max: 4,
 									step: .1,
-									onChange: (e) => z(N.id, (t) => ({
+									onChange: (e) => K(z.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1194,13 +1854,13 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(X, {
+								/* @__PURE__ */ a(Q, {
 									label: "Dash",
-									value: N.stroke?.dash ?? 2.2,
+									value: z.stroke?.dash ?? 2.2,
 									min: .6,
 									max: 5,
 									step: .1,
-									onChange: (e) => z(N.id, (t) => ({
+									onChange: (e) => K(z.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1208,13 +1868,13 @@ function ce({ value: t, initialLayers: s, onChange: c, title: l = "Squircle", de
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(X, {
+								/* @__PURE__ */ a(Q, {
 									label: "Text outline",
-									value: N.stroke?.labelWire ?? 1.1,
+									value: z.stroke?.labelWire ?? 1.1,
 									min: .4,
 									max: 2,
 									step: .05,
-									onChange: (e) => z(N.id, (t) => ({
+									onChange: (e) => K(z.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1224,58 +1884,211 @@ 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: q,
+							children: "Add layer"
+						})]
 					})
 				})
 			]
 		})]
 	});
 }
-function q({ title: e, children: t }) {
-	return /* @__PURE__ */ o("section", {
+function X({ 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 ze({ title: e, variant: t, onChange: n }) {
+	return /* @__PURE__ */ a(X, {
+		title: e,
+		children: /* @__PURE__ */ a(Be, {
+			variant: t,
+			onChange: n
+		})
+	});
+}
+function Be({ variant: e, onChange: t }) {
+	let n = e.material ?? "wireframe";
+	return /* @__PURE__ */ o("div", {
+		className: "variant-controls",
+		children: [
+			/* @__PURE__ */ a(Z, {
+				label: "Material",
+				value: n,
+				options: Me,
+				onChange: (e) => t({ material: e })
+			}),
+			/* @__PURE__ */ a(Ue, {
+				value: et(e.paletteId),
+				onChange: (e) => t({ paletteId: e })
+			}),
+			n === "solid" ? /* @__PURE__ */ a(Z, {
+				label: "Effect",
+				value: tt(e),
+				options: Ne,
+				onChange: (e) => t({ effect: e })
+			}) : null,
+			/* @__PURE__ */ o("div", {
+				className: "feature-grid",
+				"aria-label": "Top details",
+				children: [/* @__PURE__ */ a(Ve, {
+					label: "Text",
+					checked: $(e),
+					title: "Toggle top-plane text for this state.",
+					onChange: (n) => t(n ? {
+						text: ut(e),
+						textColor: ft(e)
+					} : {
+						text: !1,
+						textColor: void 0
+					})
+				}), /* @__PURE__ */ a(Ve, {
+					label: "Dash",
+					checked: e.dash ?? !1,
+					title: "Toggle the dashed inlay for this state.",
+					onChange: (n) => t(n ? {
+						dash: !0,
+						dashColor: pt(e)
+					} : {
+						dash: !1,
+						dashColor: void 0
+					})
+				})]
+			}),
+			$(e) ? /* @__PURE__ */ o("div", {
+				className: "nested-fields",
+				children: [
+					/* @__PURE__ */ a(We, {
+						label: "Text",
+						value: ut(e),
+						onChange: (e) => t({ text: e })
+					}),
+					/* @__PURE__ */ a(Z, {
+						label: "Text paint",
+						value: dt(e),
+						options: Pe,
+						onChange: (e) => t({ textStyle: e })
+					}),
+					/* @__PURE__ */ a(He, {
+						label: "Text color",
+						value: ft(e),
+						forcedValue: ht(e),
+						onChange: (e) => t({ textColor: e })
+					}),
+					/* @__PURE__ */ a(Q, {
+						label: "Text size",
+						value: e.textSize ?? Ae,
+						min: Oe,
+						max: ke,
+						step: 1,
+						formatValue: (e) => `${Math.round(e)}px`,
+						onChange: (e) => t({ textSize: e })
+					}),
+					/* @__PURE__ */ a(Z, {
+						label: "Font weight",
+						value: String(e.textFontWeight ?? je),
+						options: Ie,
+						onChange: (e) => t({ textFontWeight: Number(e) })
+					})
+				]
+			}) : null,
+			e.dash ? /* @__PURE__ */ a("div", {
+				className: "nested-fields",
+				children: /* @__PURE__ */ a(He, {
+					label: "Dash color",
+					value: pt(e),
+					forcedValue: gt(e),
+					onChange: (e) => t({ dashColor: e })
+				})
+			}) : null
+		]
+	});
+}
+function Ve({ 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 He({ 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(Z, {
+		label: e,
+		value: t,
+		options: Fe,
+		onChange: r
 	});
 }
-function le({ value: e, onChange: t }) {
-	return /* @__PURE__ */ o("label", {
+function Z({ 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 Ue({ 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) => {
+				let r = $e(n);
+				return /* @__PURE__ */ o("button", {
+					type: "button",
+					title: r.label,
+					"aria-pressed": e === n,
+					onClick: () => t(n),
+					children: [/* @__PURE__ */ a("span", {
+						className: "palette-swatch",
+						style: { background: `linear-gradient(135deg, ${r.swatch[0]}, ${r.swatch[1]})` }
+					}), /* @__PURE__ */ a("span", { children: n })]
+				}, n);
+			})
+		})]
 	});
 }
-function ue({ label: e, value: t, onChange: n }) {
+function We({ label: e, value: t, onChange: n }) {
 	return /* @__PURE__ */ o("label", {
 		className: "field",
 		children: [/* @__PURE__ */ a("span", { children: e }), /* @__PURE__ */ a("input", {
@@ -1285,24 +2098,24 @@ function ue({ label: e, value: t, onChange: n }) {
 		})]
 	});
 }
-function X({ label: e, value: t, min: n, max: r, step: i, onChange: s }) {
+function Q({ 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 Ge() {
 	return /* @__PURE__ */ o("svg", {
 		className: "copy-icon",
 		viewBox: "0 0 24 24",
@@ -1317,23 +2130,131 @@ 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 Ke() {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ a("path", { d: "M12 5v14M5 12h14" })
+	});
 }
-function Z(e) {
-	return typeof e.text == "string" ? e.text.trim().length > 0 : e.text === !0 || $(e).gpu === !0;
+function qe() {
+	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 Q(e) {
-	return typeof e.text == "string" ? e.text : (e.text === !0 || $(e).gpu, ae);
+function Je() {
+	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(e) {
-	return e.textStyle ?? $(e).gpuStyle ?? "solid";
+function Ye() {
+	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 Xe() {
+	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 Ze() {
+	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 Qe(e) {
+	let t = [nt(e.material ?? "wireframe"), $e(e.paletteId).label], n = tt(e);
+	return (e.material ?? "wireframe") === "solid" && n !== "off" && t.push(n), $(e) && t.push(`text: ${ut(e)}`), e.dash && t.push("dash"), t.join(" / ");
+}
+function $e(e) {
+	return b[e] ?? b[15];
+}
+function et(e) {
+	return e && e in b ? e : "15";
+}
+function tt(e) {
+	return e.effect === "fluid" || e.effect === "frosted" ? e.effect : "off";
+}
+function nt(e) {
+	return e === "transparent" ? "Glass" : e === "solid" ? "Solid" : "Wire";
+}
+function rt(e, t, n) {
+	return `Layer ${t}`;
+}
+function it(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 at(e) {
+	let t = (Y - e) / (Y - Ce);
+	return ct(Math.round(t * 100), xe, Se);
+}
+function ot(e) {
+	return lt(Y - ct(e, xe, Se) / 100 * (Y - Ce), 1);
+}
+function st(e) {
+	return {
+		exponent: e.exponent ?? s.exponent,
+		prismHeight: e.prismHeight ?? s.prismHeight,
+		inlayScale: e.inlayScale ?? s.inlayScale
+	};
+}
+function ct(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function lt(e, t) {
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
 }
 function $(e) {
+	return typeof e.text == "string" ? e.text.trim().length > 0 : e.text === !0 || _t(e).gpu === !0;
+}
+function ut(e) {
+	return typeof e.text == "string" ? e.text : (e.text === !0 || _t(e).gpu, ye);
+}
+function dt(e) {
+	return e.textStyle ?? _t(e).gpuStyle ?? "solid";
+}
+function ft(e) {
+	return mt(e.textColor ?? _t(e).gpuColor ?? "contrast");
+}
+function pt(e) {
+	return mt(e.dashColor ?? "contrast");
+}
+function mt(e) {
+	return e === "contrast" ? "auto" : e;
+}
+function ht(e) {
+	return (e.material ?? "wireframe") === "wireframe" ? dt(e) === "wireframe" ? "Wire gradient" : "Surface gradient" : null;
+}
+function gt(e) {
+	return (e.material ?? "wireframe") === "wireframe" ? "Wire gradient" : null;
+}
+function _t(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, Re as SquircleEditor, re as SquircleScene, Le as createDefaultSquircleEditorLayers, c as createSquircleGeometry, u as createSquircleLayers, de as createSquircleReactCode, C as getSquirclePalette, w as isSquirclePaletteId, d as reflowLayerOffsets, _e as toComponentName };
 
 //# sourceMappingURL=sqircle.js.map