@dstackai/sqircle 0.1.1 → 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)), 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]);
+	}, 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,
@@ -35,8 +35,8 @@ function c(e = {}) {
 		hiddenPoints: A,
 		inlayPoints: j,
 		labelTransform: `matrix(${y(u)},${y(d)},${y(-u)},${y(d)},${y(T.x)},${y(T.y - a)})`,
-		topBounds: M,
-		sideBounds: N,
+		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", 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 }) {
+}, 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 te({ layers: e, geometry: r, selectedLayerId: i, theme: s = "light", id
 		role: "img",
 		"aria-label": d,
 		style: S,
-		children: [/* @__PURE__ */ a(ne, {
+		children: [/* @__PURE__ */ a(M, {
 			prefix: g,
 			geometry: x
-		}), v.map((e) => /* @__PURE__ */ a(A, {
+		}), v.map((e) => /* @__PURE__ */ a(ie, {
 			layer: e,
 			geometry: x,
 			prefix: g,
+			motionTime: C,
 			selected: i === e.id,
 			onSelect: m
 		}, e.id))]
 	});
 }
-function ne({ prefix: e, geometry: t }) {
-	return /* @__PURE__ */ a("defs", { children: Object.values(b).map((n) => /* @__PURE__ */ o("g", { children: [
-		/* @__PURE__ */ a(k, {
-			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(k, {
-			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(k, {
-			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(k, {
-			id: `${e}-text-wire-${n.id}`,
-			x1: -64,
-			y1: -24,
-			x2: 64,
-			y2: 24,
-			stops: n.textWire
-		})
-	] }, n.id)) });
-}
-function k({ id: e, x1: t, y1: n, x2: r, y2: i, stops: o }) {
+		/* @__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 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 k({ id: e, x1: t, y1: n, x2: r, y2: i, stops: o }) {
 		}, `${e.offset}-${e.color}`))
 	});
 }
-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({
+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 && B(c) !== B(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,
-		children: [/* @__PURE__ */ a(j, {
+		"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(j, {
+			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 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);
+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 j({ 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: re(t, s, c),
+				points: _,
+				stroke: U(t, c, u),
 				strokeWidth: t.material === "wireframe" ? t.stroke.wireDash : t.stroke.dash,
-				opacity: R(t)
+				opacity: W(t)
 			}) : null,
 			t.text ? /* @__PURE__ */ a("text", {
 				className: "sq-label",
@@ -739,60 +1007,177 @@ function j({ className: e, variant: t, geometry: n, prefix: r }) {
 				fontFamily: t.textFontFamily,
 				fontSize: t.textSize,
 				fontWeight: t.textFontWeight,
-				...z(t, s, d, f),
+				...G(t, c, f, p),
 				children: t.text
 			}) : null
 		]
 	});
 }
-function M(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: P(e.text, N(e).gpu),
+		paletteId: oe(e.paletteId),
+		effect: ae(e.effect ?? ne),
+		text: z(e.text, R(e).gpu),
 		dash: e.dash ?? !1,
-		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 ?? ee,
-		dashColor: I(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 N(e) {
+function R(e) {
 	return e;
 }
-function P(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 F(e) {
+function B(e) {
 	return e === "wireframe" ? "wireframe" : "solid";
 }
-function I(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 L(e, t) {
-	let n = I(e);
+function H(e, t) {
+	let n = V(e);
 	return n === "white" ? "#ffffff" : n === "black" ? "#05070a" : t;
 }
-function re(e, t, n) {
-	return e.material === "wireframe" ? n : L(e.dashColor, t.labelFill);
+function U(e, t, n) {
+	return e.material === "wireframe" ? n : H(e.dashColor, t.labelFill);
 }
-function R(e) {
+function W(e) {
 	return e.material === "transparent" ? e.opacity.transparentAnnotation : e.opacity.solidAnnotation;
 }
-function z(e, t, n, r) {
-	let i = R(e);
+function G(e, t, n, r) {
+	let i = W(e);
 	return e.material === "wireframe" ? e.textStyle === "wireframe" ? {
 		fill: "none",
 		stroke: r,
@@ -805,23 +1190,73 @@ function z(e, t, n, r) {
 		opacity: 1
 	} : e.textStyle === "wireframe" ? {
 		fill: "none",
-		stroke: L(e.textColor, t.labelFill),
+		stroke: H(e.textColor, t.labelFill),
 		strokeWidth: e.stroke.labelWire,
 		opacity: i
 	} : {
-		fill: L(e.textColor, t.labelFill),
+		fill: H(e.textColor, t.labelFill),
 		stroke: "none",
 		strokeWidth: 0,
 		opacity: i
 	};
 }
-function B(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 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;
+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, ${f ? "type SquircleGeometryConfig, type SquircleLayerConfig, type SquircleTheme" : "type SquircleLayerConfig, type SquircleTheme"} } from ${c};`,
 		...l ? [`import ${JSON.stringify(l)};`] : [],
@@ -844,44 +1279,44 @@ function ie({ layers: e, theme: t, geometry: n, componentName: r = "CustomSquirc
 		""
 	].join("\n");
 }
-function V(e, t) {
+function fe(e, t) {
 	return t === !1 ? null : typeof t == "string" ? t : e === "@dstackai/sqircle" ? "@dstackai/sqircle/style.css" : null;
 }
-function ae(e) {
-	return W({
+function pe(e) {
+	return ge({
 		...e,
-		base: H(e.base),
-		hover: e.hover ? H(e.hover) : void 0
+		base: me(e.base),
+		hover: e.hover ? me(e.hover) : void 0
 	});
 }
-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({
+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 U(e, t) {
+function he(e, t) {
 	if (typeof e == "string") return e;
 	if (e === !0 || t) return "GPU";
 	if (e === !1) return !1;
 }
-function W(e) {
+function ge(e) {
 	return Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0));
 }
-function G(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 oe = 88, K = "GPU", se = {
+var ve = 88, ye = "GPU", be = {
 	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 = [
+}, 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",
@@ -897,7 +1332,23 @@ var oe = 88, K = "GPU", se = {
 		label: "Glass",
 		title: "Translucent filled prism"
 	}
-], ye = [{
+], 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"
@@ -905,7 +1356,7 @@ var oe = 88, K = "GPU", se = {
 	value: "wireframe",
 	label: "Outline",
 	title: "Outlined top-plane text"
-}], be = [
+}], Fe = [
 	{
 		value: "auto",
 		label: "Auto",
@@ -921,7 +1372,7 @@ var oe = 88, K = "GPU", se = {
 		label: "Black",
 		title: "Use fixed black annotation paint"
 	}
-], xe = [
+], Ie = [
 	{
 		value: "300",
 		label: "Light",
@@ -948,7 +1399,7 @@ var oe = 88, K = "GPU", se = {
 		title: "Strongest top-plane label"
 	}
 ];
-function Se(e = "15") {
+function Le(e = "15") {
 	return d([
 		{
 			id: "layer-1",
@@ -974,60 +1425,60 @@ function Se(e = "15") {
 				paletteId: e
 			}
 		}
-	], oe);
+	], ve);
 }
-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,
+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
-	})), [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,
+	})), [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: {
-			...j,
-			viewBoxHeight: Math.max(j.viewBoxHeight ?? s.viewBoxHeight, U + 320)
+			...A,
+			viewBoxHeight: Math.max(A.viewBoxHeight ?? s.viewBoxHeight, V + 320)
 		},
-		selectedLayerId: N
+		selectedLayerId: M
 	}), [
-		j,
 		A,
-		U,
-		N
-	]), G = n(() => ie({
-		layers: A,
-		theme: M,
-		geometry: We(j),
+		k,
+		V,
+		M
+	]), U = n(() => de({
+		layers: k,
+		theme: j,
+		geometry: st(A),
 		componentName: b ?? m,
 		importPath: x,
 		ariaLabel: `${m} composition`
 	}), [
+		A,
 		j,
-		M,
 		b,
 		x,
-		A,
+		k,
 		m
 	]);
 	e(() => {
-		N && A.some((e) => e.id === N) || P(A.at(-1)?.id ?? null);
-	}, [A, N]), e(() => {
-		z(!1);
-	}, [G]);
-	function K(e, n = {}) {
+		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 q(e) {
+	function G(e) {
 		let t = {
-			...j,
+			...A,
 			...e
 		};
 		u || ee(t), p?.(t);
 	}
-	function J(e, t) {
-		K(A.map((n) => n.id === e ? t(n) : n));
+	function K(e, t) {
+		W(k.map((n) => n.id === e ? t(n) : n));
 	}
-	function me(e) {
-		B && J(B.id, (t) => ({
+	function se(e) {
+		z && K(z.id, (t) => ({
 			...t,
 			base: {
 				...t.base,
@@ -1035,8 +1486,8 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 			}
 		}));
 	}
-	function he(e) {
-		B && J(B.id, (t) => ({
+	function ce(e) {
+		z && K(z.id, (t) => ({
 			...t,
 			hover: {
 				...t.hover ?? {},
@@ -1044,47 +1495,47 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 			}
 		}));
 	}
-	function ge() {
+	function q() {
 		let e = {
-			id: Ve(A),
+			id: it(k),
 			visible: !0,
 			base: {
 				material: "wireframe",
-				paletteId: A.at(-1)?.base.paletteId ?? "15"
+				paletteId: k.at(-1)?.base.paletteId ?? "15"
 			}
-		}, t = [...A, e];
-		P(e.id), I("base"), K(t, { reflow: !0 });
+		}, t = [...k, e];
+		N(e.id), P("base"), W(t, { 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 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 ve(e) {
-		J(e, (e) => ({
+	function ue(e) {
+		K(e, (e) => ({
 			...e,
 			visible: e.visible === !1
 		}));
 	}
-	function ye(e) {
-		S || k(e), w?.(e);
+	function J(e) {
+		S || ne(e), w?.(e);
 	}
-	async function be() {
+	async function fe() {
 		try {
-			await navigator.clipboard.writeText(G);
+			await navigator.clipboard.writeText(U);
 		} catch {
 			let e = document.createElement("textarea");
-			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();
+			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();
 		}
-		z(!0), window.setTimeout(() => z(!1), 1400);
+		R(!0), window.setTimeout(() => R(!1), 1400);
 	}
 	return /* @__PURE__ */ o("main", {
 		className: [
 			"squircle-editor",
-			`squircle-editor-${M}`,
+			`squircle-editor-${j}`,
 			g
 		].filter(Boolean).join(" "),
-		"data-theme": M,
+		"data-theme": j,
 		"aria-label": "Squircle editor",
 		children: [/* @__PURE__ */ o("header", {
 			className: "squircle-editor-topbar",
@@ -1099,13 +1550,13 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 					"aria-label": "Theme",
 					children: [/* @__PURE__ */ a("button", {
 						type: "button",
-						"aria-pressed": M === "light",
-						onClick: () => ye("light"),
+						"aria-pressed": j === "light",
+						onClick: () => J("light"),
 						children: "Light"
 					}), /* @__PURE__ */ a("button", {
 						type: "button",
-						"aria-pressed": M === "dark",
-						onClick: () => ye("dark"),
+						"aria-pressed": j === "dark",
+						onClick: () => J("dark"),
 						children: "Dark"
 					})]
 				}) : null
@@ -1121,7 +1572,7 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 							children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h2", { children: "Layers" }), /* @__PURE__ */ o("span", { children: [
 								ae,
 								"/",
-								A.length,
+								k.length,
 								" visible"
 							] })] }), /* @__PURE__ */ o("div", {
 								className: "panel-actions",
@@ -1130,29 +1581,29 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 									className: "icon-button primary-action",
 									"aria-label": "Add layer",
 									title: "Add layer",
-									onClick: ge,
-									children: /* @__PURE__ */ a(je, {})
+									onClick: q,
+									children: /* @__PURE__ */ a(Ke, {})
 								}), /* @__PURE__ */ a("button", {
 									type: "button",
 									className: "icon-button",
 									"aria-label": "Clear layers",
 									title: "Clear layers",
-									onClick: () => K([]),
-									children: /* @__PURE__ */ a(Me, {})
+									onClick: () => W([]),
+									children: /* @__PURE__ */ a(qe, {})
 								})]
 							})]
 						}),
 						/* @__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";
+							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 === N ? "squircle-editor-layer-row is-active" : "squircle-editor-layer-row",
+									className: e.id === M ? "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)}`,
+										onClick: () => N(e.id),
+										title: `Edit ${rt(e.id, n, k.length)}`,
 										children: [/* @__PURE__ */ o("span", {
 											className: "layer-card-topline",
 											children: [
@@ -1160,10 +1611,10 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 													className: "layer-number",
 													children: String(n).padStart(2, "0")
 												}),
-												/* @__PURE__ */ a("strong", { children: Be(e.id, n, A.length) }),
+												/* @__PURE__ */ a("strong", { children: rt(e.id, n, k.length) }),
 												/* @__PURE__ */ a("span", {
 													className: `material-pill material-pill-${i}`,
-													children: ze(i)
+													children: nt(i)
 												})
 											]
 										}), /* @__PURE__ */ o("span", {
@@ -1177,10 +1628,11 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 											}), /* @__PURE__ */ o("span", {
 												className: "layer-feature-tags",
 												children: [
-													Q(e.base) ? /* @__PURE__ */ a("span", { children: "Text" }) : null,
+													$(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,
-													!Q(e.base) && !e.base.dash && !e.hover ? /* @__PURE__ */ a("span", { children: "Clean" }) : null
+													!$(e.base) && !e.base.dash && !e.hover && s === "off" ? /* @__PURE__ */ a("span", { children: "Clean" }) : null
 												]
 											})]
 										})]
@@ -1190,41 +1642,41 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 										"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, {})
+										onClick: () => ue(e.id),
+										children: e.visible === !1 ? /* @__PURE__ */ a(Ye, {}) : /* @__PURE__ */ a(Je, {})
 									})]
 								}, e.id);
 							})
 						}),
-						/* @__PURE__ */ o(Y, {
+						/* @__PURE__ */ o(X, {
 							title: "Shape",
 							children: [
-								/* @__PURE__ */ a(Z, {
+								/* @__PURE__ */ a(Q, {
 									label: "Radius",
-									value: He(j.exponent ?? s.exponent),
-									min: ce,
-									max: le,
+									value: at(A.exponent ?? s.exponent),
+									min: xe,
+									max: Se,
 									step: 1,
 									formatValue: (e) => `${Math.round(e)}%`,
-									onChange: (e) => q({ exponent: Ue(e) })
+									onChange: (e) => G({ exponent: ot(e) })
 								}),
-								/* @__PURE__ */ a(Z, {
+								/* @__PURE__ */ a(Q, {
 									label: "Height",
-									value: j.prismHeight ?? s.prismHeight,
-									min: ue,
-									max: de,
+									value: A.prismHeight ?? s.prismHeight,
+									min: we,
+									max: Te,
 									step: 1,
 									formatValue: (e) => `${Math.round(e)}px`,
-									onChange: (e) => q({ prismHeight: e })
+									onChange: (e) => G({ prismHeight: e })
 								}),
-								/* @__PURE__ */ a(Z, {
+								/* @__PURE__ */ a(Q, {
 									label: "Dash size",
-									value: (j.inlayScale ?? s.inlayScale) * 100,
-									min: fe * 100,
-									max: pe * 100,
+									value: (A.inlayScale ?? s.inlayScale) * 100,
+									min: Ee * 100,
+									max: De * 100,
 									step: 1,
 									formatValue: (e) => `${Math.round(e)}%`,
-									onChange: (e) => q({ inlayScale: Ke(e / 100, 2) })
+									onChange: (e) => G({ inlayScale: lt(e / 100, 2) })
 								})
 							]
 						})
@@ -1235,41 +1687,41 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 					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", {
+							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": L,
-									onClick: () => re((e) => !e),
-									children: [/* @__PURE__ */ a(Ie, {}), "Code"]
+									"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: be,
-									children: [/* @__PURE__ */ a(Ae, {}), /* @__PURE__ */ a("span", {
+									onClick: fe,
+									children: [/* @__PURE__ */ a(Ge, {}), /* @__PURE__ */ a("span", {
 										className: "copy-status",
 										"aria-live": "polite",
-										children: R ? "Copied" : ""
+										children: L ? "Copied" : ""
 									})]
 								})]
 							}) : null]
 						}),
 						/* @__PURE__ */ a("div", {
 							className: "preview-stage",
-							children: /* @__PURE__ */ a(te, {
-								...W,
-								theme: M,
+							children: /* @__PURE__ */ a(re, {
+								...H,
+								theme: j,
 								ariaLabel: "Editable squircle composition",
 								onLayerSelect: (e) => {
-									P(e), I("base");
+									N(e), P("base");
 								}
 							})
 						}),
-						H ? /* @__PURE__ */ o("section", {
-							className: L ? "code-panel is-open" : "code-panel",
+						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",
@@ -1278,23 +1730,23 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 									className: "copy-code-button",
 									"aria-label": "Copy React code",
 									title: "Copy React code",
-									onClick: be,
-									children: [/* @__PURE__ */ a(Ae, {}), /* @__PURE__ */ a("span", {
+									onClick: fe,
+									children: [/* @__PURE__ */ a(Ge, {}), /* @__PURE__ */ a("span", {
 										className: "copy-status",
 										"aria-live": "polite",
-										children: R ? "Copied" : ""
+										children: L ? "Copied" : ""
 									})]
 								})]
-							}), L ? /* @__PURE__ */ a("pre", {
+							}), F ? /* @__PURE__ */ a("pre", {
 								className: "code-output",
-								children: /* @__PURE__ */ a("code", { children: G })
+								children: /* @__PURE__ */ a("code", { children: U })
 							}) : null]
 						}) : null
 					]
 				}),
 				/* @__PURE__ */ a("aside", {
-					className: B ? "side-panel inspector-panel" : "side-panel inspector-panel is-empty",
-					children: B ? /* @__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: "inspector-heading",
 							children: [/* @__PURE__ */ o("div", { children: [
@@ -1302,8 +1754,8 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 									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__ */ 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", {
@@ -1311,15 +1763,15 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 									className: "icon-button",
 									"aria-label": "Close inspector",
 									title: "Close inspector",
-									onClick: () => P(null),
-									children: /* @__PURE__ */ a(Fe, {})
+									onClick: () => N(null),
+									children: /* @__PURE__ */ a(Xe, {})
 								}), /* @__PURE__ */ a("button", {
 									type: "button",
 									className: "icon-button danger",
 									"aria-label": "Delete layer",
 									title: "Delete layer",
-									onClick: _e,
-									children: /* @__PURE__ */ a(Me, {})
+									onClick: le,
+									children: /* @__PURE__ */ a(qe, {})
 								})]
 							})]
 						}),
@@ -1329,31 +1781,31 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 							"aria-label": "Layer state",
 							children: [/* @__PURE__ */ a("button", {
 								type: "button",
-								"aria-pressed": F === "base",
-								onClick: () => I("base"),
+								"aria-pressed": ie === "base",
+								onClick: () => P("base"),
 								children: "Base"
 							}), /* @__PURE__ */ o("button", {
 								type: "button",
-								"aria-pressed": F === "hover",
-								onClick: () => I("hover"),
-								children: ["Hover", B.hover ? /* @__PURE__ */ a("span", {
+								"aria-pressed": ie === "hover",
+								onClick: () => P("hover"),
+								children: ["Hover", z.hover ? /* @__PURE__ */ a("span", {
 									className: "state-dot",
 									"aria-hidden": "true"
 								}) : null]
 							})]
 						}),
-						F === "base" ? /* @__PURE__ */ a(we, {
+						ie === "base" ? /* @__PURE__ */ a(ze, {
 							title: "Base State",
-							variant: B.base,
-							onChange: me
-						}) : /* @__PURE__ */ o(Y, {
+							variant: z.base,
+							onChange: se
+						}) : /* @__PURE__ */ o(X, {
 							title: "Hover State",
-							children: [/* @__PURE__ */ a(Ee, {
+							children: [/* @__PURE__ */ a(Ve, {
 								label: "Hover variant",
-								checked: !!B.hover,
+								checked: !!z.hover,
 								title: "Swap this layer to another variant on hover.",
 								onChange: (e) => {
-									J(B.id, (t) => ({
+									K(z.id, (t) => ({
 										...t,
 										hover: e ? {
 											...t.base,
@@ -1361,26 +1813,26 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 										} : void 0
 									}));
 								}
-							}), B.hover ? /* @__PURE__ */ a(Te, {
+							}), z.hover ? /* @__PURE__ */ a(Be, {
 								variant: {
-									...B.base,
-									...B.hover
+									...z.base,
+									...z.hover
 								},
-								onChange: he
+								onChange: ce
 							}) : null]
 						}),
-						/* @__PURE__ */ o(Y, {
+						/* @__PURE__ */ o(X, {
 							title: "Stroke Widths",
 							collapsible: !0,
 							defaultOpen: !1,
 							children: [
-								/* @__PURE__ */ a(Z, {
+								/* @__PURE__ */ a(Q, {
 									label: "Face",
-									value: B.stroke?.face ?? .35,
+									value: z.stroke?.face ?? .35,
 									min: 0,
 									max: 1.5,
 									step: .05,
-									onChange: (e) => J(B.id, (t) => ({
+									onChange: (e) => K(z.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1388,13 +1840,13 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(Z, {
+								/* @__PURE__ */ a(Q, {
 									label: "Wire",
-									value: B.stroke?.wire ?? 1.6,
+									value: z.stroke?.wire ?? 1.6,
 									min: .4,
 									max: 4,
 									step: .1,
-									onChange: (e) => J(B.id, (t) => ({
+									onChange: (e) => K(z.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1402,13 +1854,13 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(Z, {
+								/* @__PURE__ */ a(Q, {
 									label: "Dash",
-									value: B.stroke?.dash ?? 2.2,
+									value: z.stroke?.dash ?? 2.2,
 									min: .6,
 									max: 5,
 									step: .1,
-									onChange: (e) => J(B.id, (t) => ({
+									onChange: (e) => K(z.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1416,13 +1868,13 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 										}
 									}))
 								}),
-								/* @__PURE__ */ a(Z, {
+								/* @__PURE__ */ a(Q, {
 									label: "Text outline",
-									value: B.stroke?.labelWire ?? 1.1,
+									value: z.stroke?.labelWire ?? 1.1,
 									min: .4,
 									max: 2,
 									step: .05,
-									onChange: (e) => J(B.id, (t) => ({
+									onChange: (e) => K(z.id, (t) => ({
 										...t,
 										stroke: {
 											...t.stroke,
@@ -1437,7 +1889,7 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 						children: [/* @__PURE__ */ a("h2", { children: "No layer selected" }), /* @__PURE__ */ a("button", {
 							type: "button",
 							className: "primary-action",
-							onClick: ge,
+							onClick: q,
 							children: "Add layer"
 						})]
 					})
@@ -1446,7 +1898,7 @@ function Ce({ value: t, initialLayers: c, onChange: l, geometry: u, initialGeome
 		})]
 	});
 }
-function Y({ title: e, children: t, collapsible: n = !1, defaultOpen: r = !0 }) {
+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,
@@ -1459,106 +1911,113 @@ function Y({ title: e, children: t, collapsible: n = !1, defaultOpen: r = !0 })
 		children: [/* @__PURE__ */ a("h3", { children: e }), t]
 	});
 }
-function we({ title: e, variant: t, onChange: n }) {
-	return /* @__PURE__ */ a(Y, {
+function ze({ title: e, variant: t, onChange: n }) {
+	return /* @__PURE__ */ a(X, {
 		title: e,
-		children: /* @__PURE__ */ a(Te, {
+		children: /* @__PURE__ */ a(Be, {
 			variant: t,
 			onChange: n
 		})
 	});
 }
-function Te({ variant: e, onChange: t }) {
+function Be({ variant: e, onChange: t }) {
+	let n = e.material ?? "wireframe";
 	return /* @__PURE__ */ o("div", {
 		className: "variant-controls",
 		children: [
-			/* @__PURE__ */ a(X, {
+			/* @__PURE__ */ a(Z, {
 				label: "Material",
-				value: e.material ?? "wireframe",
-				options: ve,
+				value: n,
+				options: Me,
 				onChange: (e) => t({ material: e })
 			}),
-			/* @__PURE__ */ a(Oe, {
-				value: e.paletteId ?? "15",
+			/* @__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(Ee, {
+				children: [/* @__PURE__ */ a(Ve, {
 					label: "Text",
-					checked: Q(e),
+					checked: $(e),
 					title: "Toggle top-plane text for this state.",
 					onChange: (n) => t(n ? {
-						text: qe(e),
-						textColor: Ye(e)
+						text: ut(e),
+						textColor: ft(e)
 					} : {
 						text: !1,
 						textColor: void 0
 					})
-				}), /* @__PURE__ */ a(Ee, {
+				}), /* @__PURE__ */ a(Ve, {
 					label: "Dash",
 					checked: e.dash ?? !1,
 					title: "Toggle the dashed inlay for this state.",
 					onChange: (n) => t(n ? {
 						dash: !0,
-						dashColor: Xe(e)
+						dashColor: pt(e)
 					} : {
 						dash: !1,
 						dashColor: void 0
 					})
 				})]
 			}),
-			Q(e) ? /* @__PURE__ */ o("div", {
+			$(e) ? /* @__PURE__ */ o("div", {
 				className: "nested-fields",
 				children: [
-					/* @__PURE__ */ a(ke, {
+					/* @__PURE__ */ a(We, {
 						label: "Text",
-						value: qe(e),
+						value: ut(e),
 						onChange: (e) => t({ text: e })
 					}),
-					/* @__PURE__ */ a(X, {
+					/* @__PURE__ */ a(Z, {
 						label: "Text paint",
-						value: Je(e),
-						options: ye,
+						value: dt(e),
+						options: Pe,
 						onChange: (e) => t({ textStyle: e })
 					}),
-					/* @__PURE__ */ a(De, {
+					/* @__PURE__ */ a(He, {
 						label: "Text color",
-						value: Ye(e),
-						forcedValue: Qe(e),
+						value: ft(e),
+						forcedValue: ht(e),
 						onChange: (e) => t({ textColor: e })
 					}),
-					/* @__PURE__ */ a(Z, {
+					/* @__PURE__ */ a(Q, {
 						label: "Text size",
-						value: e.textSize ?? ge,
-						min: me,
-						max: he,
+						value: e.textSize ?? Ae,
+						min: Oe,
+						max: ke,
 						step: 1,
 						formatValue: (e) => `${Math.round(e)}px`,
 						onChange: (e) => t({ textSize: e })
 					}),
-					/* @__PURE__ */ a(X, {
+					/* @__PURE__ */ a(Z, {
 						label: "Font weight",
-						value: String(e.textFontWeight ?? _e),
-						options: xe,
+						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(De, {
+				children: /* @__PURE__ */ a(He, {
 					label: "Dash color",
-					value: Xe(e),
-					forcedValue: $e(e),
+					value: pt(e),
+					forcedValue: gt(e),
 					onChange: (e) => t({ dashColor: e })
 				})
 			}) : null
 		]
 	});
 }
-function Ee({ label: e, checked: t, title: n, onChange: r }) {
+function Ve({ label: e, checked: t, title: n, onChange: r }) {
 	return /* @__PURE__ */ o("button", {
 		type: "button",
 		className: "feature-switch",
@@ -1574,7 +2033,7 @@ function Ee({ label: e, checked: t, title: n, onChange: r }) {
 		})]
 	});
 }
-function De({ label: e, value: t, forcedValue: n, onChange: r }) {
+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("div", {
@@ -1582,14 +2041,14 @@ function De({ label: e, value: t, forcedValue: n, onChange: r }) {
 			title: "This material controls annotation paint from the wireframe palette.",
 			children: n
 		})]
-	}) : /* @__PURE__ */ a(X, {
+	}) : /* @__PURE__ */ a(Z, {
 		label: e,
 		value: t,
-		options: be,
+		options: Fe,
 		onChange: r
 	});
 }
-function X({ label: e, value: t, options: n, onChange: r }) {
+function Z({ label: e, value: t, options: n, onChange: r }) {
 	return /* @__PURE__ */ o("div", {
 		className: "field",
 		children: [/* @__PURE__ */ a("span", { children: e }), /* @__PURE__ */ a("div", {
@@ -1606,27 +2065,30 @@ function X({ label: e, value: t, options: n, onChange: r }) {
 		})]
 	});
 }
-function Oe({ value: e, onChange: t }) {
+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) => /* @__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))
+			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 ke({ 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", {
@@ -1636,7 +2098,7 @@ function ke({ label: e, value: t, onChange: n }) {
 		})]
 	});
 }
-function Z({ label: e, value: t, min: n, max: r, step: i, formatValue: s, onChange: c }) {
+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: [
@@ -1653,7 +2115,7 @@ function Z({ label: e, value: t, min: n, max: r, step: i, formatValue: s, onChan
 		})]
 	});
 }
-function Ae() {
+function Ge() {
 	return /* @__PURE__ */ o("svg", {
 		className: "copy-icon",
 		viewBox: "0 0 24 24",
@@ -1668,7 +2130,7 @@ function Ae() {
 		}), /* @__PURE__ */ a("path", { d: "M5 15V6.8C5 5.8 5.8 5 6.8 5H15" })]
 	});
 }
-function je() {
+function Ke() {
 	return /* @__PURE__ */ a("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
@@ -1676,7 +2138,7 @@ function je() {
 		children: /* @__PURE__ */ a("path", { d: "M12 5v14M5 12h14" })
 	});
 }
-function Me() {
+function qe() {
 	return /* @__PURE__ */ a("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
@@ -1684,7 +2146,7 @@ function Me() {
 		children: /* @__PURE__ */ a("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" })
 	});
 }
-function Ne() {
+function Je() {
 	return /* @__PURE__ */ o("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
@@ -1696,7 +2158,7 @@ function Ne() {
 		})]
 	});
 }
-function Pe() {
+function Ye() {
 	return /* @__PURE__ */ a("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
@@ -1704,7 +2166,7 @@ function Pe() {
 		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() {
+function Xe() {
 	return /* @__PURE__ */ a("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
@@ -1712,7 +2174,7 @@ function Fe() {
 		children: /* @__PURE__ */ a("path", { d: "M6 6l12 12M18 6L6 18" })
 	});
 }
-function Ie() {
+function Ze() {
 	return /* @__PURE__ */ a("svg", {
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
@@ -1720,73 +2182,79 @@ function Ie() {
 		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 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 Re(e) {
+function $e(e) {
 	return b[e] ?? b[15];
 }
-function ze(e) {
+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 Be(e, t, n) {
+function rt(e, t, n) {
 	return `Layer ${t}`;
 }
-function Ve(e) {
+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 He(e) {
-	let t = (J - e) / (J - q);
-	return Ge(Math.round(t * 100), ce, le);
+function at(e) {
+	let t = (Y - e) / (Y - Ce);
+	return ct(Math.round(t * 100), xe, Se);
 }
-function Ue(e) {
-	return Ke(J - Ge(e, ce, le) / 100 * (J - q), 1);
+function ot(e) {
+	return lt(Y - ct(e, xe, Se) / 100 * (Y - Ce), 1);
 }
-function We(e) {
+function st(e) {
 	return {
 		exponent: e.exponent ?? s.exponent,
 		prismHeight: e.prismHeight ?? s.prismHeight,
 		inlayScale: e.inlayScale ?? s.inlayScale
 	};
 }
-function Ge(e, t, n) {
+function ct(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function Ke(e, t) {
+function lt(e, t) {
 	let n = 10 ** t;
 	return Math.round(e * n) / n;
 }
-function Q(e) {
-	return typeof e.text == "string" ? e.text.trim().length > 0 : e.text === !0 || $(e).gpu === !0;
+function $(e) {
+	return typeof e.text == "string" ? e.text.trim().length > 0 : e.text === !0 || _t(e).gpu === !0;
 }
-function qe(e) {
-	return typeof e.text == "string" ? e.text : (e.text === !0 || $(e).gpu, K);
+function ut(e) {
+	return typeof e.text == "string" ? e.text : (e.text === !0 || _t(e).gpu, ye);
 }
-function Je(e) {
-	return e.textStyle ?? $(e).gpuStyle ?? "solid";
+function dt(e) {
+	return e.textStyle ?? _t(e).gpuStyle ?? "solid";
 }
-function Ye(e) {
-	return Ze(e.textColor ?? $(e).gpuColor ?? "contrast");
+function ft(e) {
+	return mt(e.textColor ?? _t(e).gpuColor ?? "contrast");
 }
-function Xe(e) {
-	return Ze(e.dashColor ?? "contrast");
+function pt(e) {
+	return mt(e.dashColor ?? "contrast");
 }
-function Ze(e) {
+function mt(e) {
 	return e === "contrast" ? "auto" : e;
 }
-function Qe(e) {
-	return (e.material ?? "wireframe") === "wireframe" ? Je(e) === "wireframe" ? "Wire gradient" : "Surface gradient" : null;
+function ht(e) {
+	return (e.material ?? "wireframe") === "wireframe" ? dt(e) === "wireframe" ? "Wire gradient" : "Surface gradient" : null;
 }
-function $e(e) {
+function gt(e) {
 	return (e.material ?? "wireframe") === "wireframe" ? "Wire gradient" : null;
 }
-function $(e) {
+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, te as SquircleScene, Se as createDefaultSquircleEditorLayers, c as createSquircleGeometry, u as createSquircleLayers, ie as createSquircleReactCode, C as getSquirclePalette, d as reflowLayerOffsets, G 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