@dstackai/sqircle 0.1.0

package/dist/sqircle.js

@@ -0,0 +1,1339 @@
+import { useEffect as e, useId as t, useMemo as n, useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/squircle/geometry.ts
+var s = {
+	width: 800,
+	viewBoxHeight: 480,
+	exponent: 12,
+	samples: 160,
+	prismHeight: 10,
+	angleDegrees: 20,
+	inlayScale: .6
+};
+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]);
+	return {
+		config: {
+			width: r,
+			viewBoxHeight: i,
+			exponent: t,
+			samples: n,
+			prismHeight: a,
+			angleDegrees: o,
+			inlayScale: c,
+			halfSize: x,
+			center: T
+		},
+		cosA: u,
+		sinA: d,
+		topPoints: E,
+		bottomPoints: D,
+		wallPoints: M,
+		hiddenPoints: N,
+		inlayPoints: P,
+		labelTransform: `matrix(${y(u)},${y(d)},${y(-u)},${y(d)},${y(T.x)},${y(T.y - a)})`,
+		topBounds: F,
+		sideBounds: I,
+		viewBox: `0 0 ${y(r)} ${y(i)}`
+	};
+}
+function l(e) {
+	return e.map((e) => `${y(e.x)},${y(e.y)}`).join(" ");
+}
+function u(e, t = {}) {
+	let n = t.gap ?? 88, r = t.material ?? "wireframe", i = t.paletteId ?? "15";
+	return Array.from({ length: Math.max(0, e) }, (t, a) => ({
+		id: `layer-${a + 1}`,
+		visible: !0,
+		offset: {
+			x: 0,
+			y: (e - a - 1) * n
+		},
+		base: {
+			material: r,
+			paletteId: i,
+			text: !1,
+			dash: !1
+		},
+		hover: void 0
+	}));
+}
+function d(e, t = 88) {
+	let n = e.length;
+	return e.map((e, r) => ({
+		...e,
+		offset: {
+			x: e.offset?.x ?? 0,
+			y: (n - r - 1) * t
+		}
+	}));
+}
+function f(e, t, n) {
+	return Array.from({ length: n }, (r, i) => {
+		let a = 2 * Math.PI * i / n, o = Math.cos(a), s = Math.sin(a);
+		return {
+			x: e * p(o, 2 / t),
+			y: e * p(s, 2 / t),
+			nx: p(o, 2 * (t - 1) / t),
+			ny: p(s, 2 * (t - 1) / t)
+		};
+	});
+}
+function p(e, t) {
+	return Math.sign(e) * Math.abs(e) ** +t;
+}
+function m(e, t, n, r, i) {
+	return {
+		x: n.x + (e.x - e.y) * r,
+		y: n.y + (e.x + e.y) * i - t
+	};
+}
+function h(e) {
+	let t = [...e, ...e], n = {
+		start: 0,
+		length: 0
+	}, r = 0, i = 0;
+	return t.forEach((t, a) => {
+		t ? (i === 0 && (r = a), i += 1, i > n.length && i <= e.length && (n = {
+			start: r % e.length,
+			length: i
+		})) : i = 0;
+	}), n.length > 0 ? n : {
+		start: 0,
+		length: e.length
+	};
+}
+function g(e, t) {
+	return {
+		start: (e.start + e.length) % t,
+		length: Math.max(0, t - e.length)
+	};
+}
+function _(e, t) {
+	return Array.from({ length: t.length }, (n, r) => e[(t.start + r) % e.length]);
+}
+function v(e) {
+	let t = e.map((e) => e.x), n = e.map((e) => e.y);
+	return {
+		minX: Math.min(...t),
+		minY: Math.min(...n),
+		maxX: Math.max(...t),
+		maxY: Math.max(...n)
+	};
+}
+function y(e) {
+	return Number(e.toFixed(2)).toString();
+}
+//#endregion
+//#region src/squircle/palettes.ts
+var b = {
+	13: {
+		id: "13",
+		label: "13 Alpha",
+		top: [
+			{
+				offset: 0,
+				color: "#f5f0ff"
+			},
+			{
+				offset: .48,
+				color: "#b388ff"
+			},
+			{
+				offset: 1,
+				color: "#0099ff"
+			}
+		],
+		side: [
+			{
+				offset: 0,
+				color: "#8250e6"
+			},
+			{
+				offset: .5,
+				color: "#596ce8"
+			},
+			{
+				offset: 1,
+				color: "#0084e8"
+			}
+		],
+		textWire: [
+			{
+				offset: 0,
+				color: "#b388ff"
+			},
+			{
+				offset: .52,
+				color: "#5c7fff"
+			},
+			{
+				offset: 1,
+				color: "#0099ff"
+			}
+		],
+		labelFill: "#2a1060",
+		topEdge: "#7c5fd0",
+		sideEdge: "#2d1466",
+		swatch: ["#b388ff", "#0099ff"]
+	},
+	14: {
+		id: "14",
+		label: "14 Alpha",
+		top: [
+			{
+				offset: 0,
+				color: "#e9fffb"
+			},
+			{
+				offset: .44,
+				color: "#44b9d6"
+			},
+			{
+				offset: 1,
+				color: "#006ce0"
+			}
+		],
+		side: [
+			{
+				offset: 0,
+				color: "#38acbc"
+			},
+			{
+				offset: .52,
+				color: "#268ccf"
+			},
+			{
+				offset: 1,
+				color: "#005fc4"
+			}
+		],
+		textWire: [
+			{
+				offset: 0,
+				color: "#44b9d6"
+			},
+			{
+				offset: .52,
+				color: "#2f8fe2"
+			},
+			{
+				offset: 1,
+				color: "#006ce0"
+			}
+		],
+		labelFill: "#063f6a",
+		topEdge: "#237aa8",
+		sideEdge: "#063f6a",
+		swatch: ["#44b9d6", "#006ce0"]
+	},
+	15: {
+		id: "15",
+		label: "15 Alpha",
+		top: [
+			{
+				offset: 0,
+				color: "#f0fbff"
+			},
+			{
+				offset: .34,
+				color: "#0099ff"
+			},
+			{
+				offset: .66,
+				color: "#5c7fff"
+			},
+			{
+				offset: 1,
+				color: "#962eff"
+			}
+		],
+		side: [
+			{
+				offset: 0,
+				color: "#008fec"
+			},
+			{
+				offset: .34,
+				color: "#139cff"
+			},
+			{
+				offset: .56,
+				color: "#587fff"
+			},
+			{
+				offset: .78,
+				color: "#7c58f7"
+			},
+			{
+				offset: 1,
+				color: "#962eff"
+			}
+		],
+		textWire: [
+			{
+				offset: 0,
+				color: "#0099ff"
+			},
+			{
+				offset: .52,
+				color: "#5c7fff"
+			},
+			{
+				offset: 1,
+				color: "#962eff"
+			}
+		],
+		labelFill: "#f7fbff",
+		topEdge: "#7c5fd0",
+		sideEdge: "#2d1466",
+		swatch: ["#0099ff", "#962eff"]
+	},
+	16: {
+		id: "16",
+		label: "16 Alpha",
+		top: [
+			{
+				offset: 0,
+				color: "#e9fbff"
+			},
+			{
+				offset: .46,
+				color: "#75cfff"
+			},
+			{
+				offset: 1,
+				color: "#2d49d8"
+			}
+		],
+		side: [
+			{
+				offset: 0,
+				color: "#59b7ec"
+			},
+			{
+				offset: .54,
+				color: "#5874e0"
+			},
+			{
+				offset: 1,
+				color: "#263fb8"
+			}
+		],
+		textWire: [
+			{
+				offset: 0,
+				color: "#75cfff"
+			},
+			{
+				offset: .52,
+				color: "#5c7fff"
+			},
+			{
+				offset: 1,
+				color: "#2d49d8"
+			}
+		],
+		labelFill: "#10246a",
+		topEdge: "#3e65c8",
+		sideEdge: "#10246a",
+		swatch: ["#75cfff", "#2d49d8"]
+	},
+	17: {
+		id: "17",
+		label: "17 Alpha",
+		top: [
+			{
+				offset: 0,
+				color: "#edf1ff"
+			},
+			{
+				offset: .46,
+				color: "#7f91ff"
+			},
+			{
+				offset: 1,
+				color: "#0099ff"
+			}
+		],
+		side: [
+			{
+				offset: 0,
+				color: "#7081ef"
+			},
+			{
+				offset: .5,
+				color: "#617fee"
+			},
+			{
+				offset: 1,
+				color: "#0084e1"
+			}
+		],
+		textWire: [
+			{
+				offset: 0,
+				color: "#7f91ff"
+			},
+			{
+				offset: .52,
+				color: "#5c9fff"
+			},
+			{
+				offset: 1,
+				color: "#0099ff"
+			}
+		],
+		labelFill: "#17245e",
+		topEdge: "#5f6ed0",
+		sideEdge: "#17245e",
+		swatch: ["#7f91ff", "#0099ff"]
+	},
+	18: {
+		id: "18",
+		label: "18 Alpha",
+		top: [
+			{
+				offset: 0,
+				color: "#f8fdff"
+			},
+			{
+				offset: .42,
+				color: "#b8e7ff"
+			},
+			{
+				offset: 1,
+				color: "#006ce0"
+			}
+		],
+		side: [
+			{
+				offset: 0,
+				color: "#86d4f3"
+			},
+			{
+				offset: .5,
+				color: "#5da6dd"
+			},
+			{
+				offset: 1,
+				color: "#005dbc"
+			}
+		],
+		textWire: [
+			{
+				offset: 0,
+				color: "#b8e7ff"
+			},
+			{
+				offset: .52,
+				color: "#42b4ff"
+			},
+			{
+				offset: 1,
+				color: "#006ce0"
+			}
+		],
+		labelFill: "#064272",
+		topEdge: "#4f94c0",
+		sideEdge: "#064272",
+		swatch: ["#b8e7ff", "#006ce0"]
+	},
+	19: {
+		id: "19",
+		label: "19 Alpha",
+		top: [
+			{
+				offset: 0,
+				color: "#e6fff9"
+			},
+			{
+				offset: .42,
+				color: "#42b4ff"
+			},
+			{
+				offset: 1,
+				color: "#8575ff"
+			}
+		],
+		side: [
+			{
+				offset: 0,
+				color: "#1ea9eb"
+			},
+			{
+				offset: .5,
+				color: "#4f8cee"
+			},
+			{
+				offset: 1,
+				color: "#7866e8"
+			}
+		],
+		textWire: [
+			{
+				offset: 0,
+				color: "#42b4ff"
+			},
+			{
+				offset: .52,
+				color: "#5c7fff"
+			},
+			{
+				offset: 1,
+				color: "#8575ff"
+			}
+		],
+		labelFill: "#12306f",
+		topEdge: "#6470d8",
+		sideEdge: "#12306f",
+		swatch: ["#42b4ff", "#8575ff"]
+	},
+	20: {
+		id: "20",
+		label: "20 Alpha",
+		top: [
+			{
+				offset: 0,
+				color: "#eef3ff"
+			},
+			{
+				offset: .38,
+				color: "#5c7fff"
+			},
+			{
+				offset: .7,
+				color: "#0099ff"
+			},
+			{
+				offset: 1,
+				color: "#b8e7ff"
+			}
+		],
+		side: [
+			{
+				offset: 0,
+				color: "#536fe8"
+			},
+			{
+				offset: .52,
+				color: "#168fe8"
+			},
+			{
+				offset: 1,
+				color: "#8fd2ee"
+			}
+		],
+		textWire: [
+			{
+				offset: 0,
+				color: "#5c7fff"
+			},
+			{
+				offset: .52,
+				color: "#0099ff"
+			},
+			{
+				offset: 1,
+				color: "#b8e7ff"
+			}
+		],
+		labelFill: "#17245e",
+		topEdge: "#5a7bd0",
+		sideEdge: "#17245e",
+		swatch: ["#5c7fff", "#b8e7ff"]
+	}
+}, x = Object.keys(b), S = "15";
+function C(e) {
+	return b[e] ?? b[15];
+}
+//#endregion
+//#region src/squircle/SquircleScene.tsx
+var w = {
+	face: .35,
+	faceOpacity: .72,
+	wire: 1.6,
+	wireOpacity: .88,
+	hidden: 1.2,
+	hiddenOpacity: .28,
+	dash: 2.2,
+	wireDash: 1.6,
+	labelWire: 1.1
+}, T = {
+	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 }) {
+	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` };
+	return /* @__PURE__ */ o("svg", {
+		className: [
+			"squircle-scene",
+			`sq-theme-${s}`,
+			u
+		].filter(Boolean).join(" "),
+		"data-theme": s,
+		viewBox: x.viewBox,
+		role: "img",
+		"aria-label": d,
+		style: S,
+		children: [/* @__PURE__ */ a(j, {
+			prefix: g,
+			geometry: x
+		}), v.map((e) => /* @__PURE__ */ a(N, {
+			layer: e,
+			geometry: x,
+			prefix: g,
+			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
+		}),
+		/* @__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(M, {
+			id: `${e}-text-surface-${n.id}`,
+			x1: -425.63,
+			y1: -.1,
+			x2: 425.6,
+			y2: .07,
+			stops: n.top
+		}),
+		/* @__PURE__ */ a(M, {
+			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 }) {
+	return /* @__PURE__ */ a("linearGradient", {
+		id: e,
+		x1: t,
+		y1: n,
+		x2: r,
+		y2: i,
+		gradientUnits: "userSpaceOnUse",
+		children: o.map((e) => /* @__PURE__ */ a("stop", {
+			offset: e.offset,
+			stopColor: e.color
+		}, `${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({
+		...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;
+	return /* @__PURE__ */ o("g", {
+		className: [
+			"sq-layer",
+			l ? "sq-has-hover" : "",
+			r ? "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(P, {
+			className: "sq-base",
+			variant: s,
+			geometry: t,
+			prefix: n
+		}), l && c ? /* @__PURE__ */ a(P, {
+			className: "sq-hover",
+			variant: c,
+			geometry: t,
+			prefix: n
+		}) : 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);
+	return /* @__PURE__ */ o("g", {
+		className: [
+			"sq-variant",
+			e,
+			`sq-material-${t.material}`
+		].join(" "),
+		children: [
+			t.material === "wireframe" ? /* @__PURE__ */ o(i, { children: [
+				/* @__PURE__ */ a("polyline", {
+					className: "sq-hidden",
+					points: h,
+					stroke: c,
+					strokeWidth: t.stroke.hidden,
+					opacity: t.stroke.hiddenOpacity
+				}),
+				/* @__PURE__ */ a("polygon", {
+					className: "sq-face sq-wire-side",
+					points: p,
+					fill: "none",
+					stroke: c,
+					strokeWidth: t.stroke.wire,
+					strokeOpacity: t.stroke.wireOpacity
+				}),
+				/* @__PURE__ */ a("polygon", {
+					className: "sq-face sq-wire-top",
+					points: m,
+					fill: "none",
+					stroke: c,
+					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,
+				fillOpacity: t.material === "transparent" ? t.opacity.transparentFace : 1,
+				stroke: s.topEdge,
+				strokeWidth: t.stroke.face,
+				strokeOpacity: t.stroke.faceOpacity
+			})] }),
+			t.dash ? /* @__PURE__ */ a("polygon", {
+				className: "sq-inlay",
+				points: g,
+				stroke: V(t, s, c),
+				strokeWidth: t.material === "wireframe" ? t.stroke.wireDash : t.stroke.dash,
+				opacity: H(t)
+			}) : null,
+			t.text ? /* @__PURE__ */ a("text", {
+				className: "sq-label",
+				transform: n.labelTransform,
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				fontFamily: t.textFontFamily,
+				fontSize: t.textSize,
+				fontWeight: t.textFontWeight,
+				...U(t, s, d, f),
+				children: t.text
+			}) : null
+		]
+	});
+}
+function F(e, t = {}, n = {}) {
+	return {
+		material: e.material ?? "wireframe",
+		paletteId: e.paletteId ?? "15",
+		text: L(e.text, I(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"),
+		stroke: {
+			...w,
+			...t,
+			...e.stroke
+		},
+		opacity: {
+			...T,
+			...n,
+			...e.opacity
+		}
+	};
+}
+function I(e) {
+	return e;
+}
+function L(e, t) {
+	return typeof e == "string" ? e.trim() ? e : null : e === !0 || t ? E : null;
+}
+function R(e) {
+	return e === "wireframe" ? "wireframe" : "solid";
+}
+function z(e) {
+	return e === "auto" ? "contrast" : e;
+}
+function B(e, t) {
+	let n = z(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 H(e) {
+	return e.material === "transparent" ? e.opacity.transparentAnnotation : e.opacity.solidAnnotation;
+}
+function U(e, t, n, r) {
+	let i = H(e);
+	return e.material === "wireframe" ? e.textStyle === "wireframe" ? {
+		fill: "none",
+		stroke: r,
+		strokeWidth: e.stroke.labelWire,
+		opacity: i
+	} : {
+		fill: n,
+		stroke: "none",
+		strokeWidth: 0,
+		opacity: 1
+	} : e.textStyle === "wireframe" ? {
+		fill: "none",
+		stroke: B(e.textColor, t.labelFill),
+		strokeWidth: e.stroke.labelWire,
+		opacity: i
+	} : {
+		fill: B(e.textColor, t.labelFill),
+		stroke: "none",
+		strokeWidth: 0,
+		opacity: i
+	};
+}
+function W(e) {
+	return JSON.stringify(e);
+}
+//#endregion
+//#region src/squircle/codeExport.ts
+function ee({ layers: e, theme: t, componentName: n = "CustomSquircle", importPath: r = "./squircle", ariaLabel: i }) {
+	let a = re(n), o = JSON.stringify(r), s = JSON.stringify(i ?? `${a} composition`), c = JSON.stringify(e.map(G), null, 2);
+	return [
+		`import { SquircleScene, type SquircleLayerConfig, type SquircleTheme } from ${o};`,
+		"",
+		`const theme: SquircleTheme = ${JSON.stringify(t)};`,
+		"",
+		`const layers: SquircleLayerConfig[] = ${c};`,
+		"",
+		`export function ${a}() {`,
+		"  return (",
+		"    <SquircleScene",
+		"      theme={theme}",
+		"      layers={layers}",
+		`      ariaLabel={${s}}`,
+		"    />",
+		"  );",
+		"}",
+		""
+	].join("\n");
+}
+function G(e) {
+	return ne({
+		...e,
+		base: K(e.base),
+		hover: e.hover ? K(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({
+		...i,
+		text: a,
+		textStyle: o,
+		textColor: s
+	});
+}
+function te(e, t) {
+	if (typeof e == "string") return e;
+	if (e === !0 || t) return "GPU";
+	if (e === !1) return !1;
+}
+function ne(e) {
+	return Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0));
+}
+function re(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"
+];
+function se(e = "15") {
+	return d([
+		{
+			id: "bottom",
+			visible: !0,
+			base: {
+				material: "wireframe",
+				paletteId: e
+			}
+		},
+		{
+			id: "middle",
+			visible: !0,
+			base: {
+				material: "wireframe",
+				paletteId: e
+			}
+		},
+		{
+			id: "top",
+			visible: !0,
+			base: {
+				material: "wireframe",
+				paletteId: e
+			}
+		}
+	], ie);
+}
+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
+	}), [
+		E,
+		F,
+		O
+	]), L = n(() => ee({
+		layers: E,
+		theme: D,
+		componentName: g ?? l,
+		importPath: _,
+		ariaLabel: `${l} composition`
+	}), [
+		D,
+		g,
+		_,
+		E,
+		l
+	]);
+	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);
+	}
+	function z(e, t) {
+		R(E.map((n) => n.id === e ? t(n) : n));
+	}
+	function B(e) {
+		N && z(N.id, (t) => ({
+			...t,
+			base: {
+				...t.base,
+				...e
+			}
+		}));
+	}
+	function V(e) {
+		N && z(N.id, (t) => ({
+			...t,
+			hover: {
+				...t.hover ?? t.base,
+				...e
+			}
+		}));
+	}
+	function H() {
+		let e = {
+			id: `layer-${E.length + 1}`,
+			visible: !0,
+			base: {
+				material: "wireframe",
+				paletteId: E.at(-1)?.base.paletteId ?? "15"
+			}
+		}, t = [...E, e];
+		k(e.id), R(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 W(e) {
+		z(e, (e) => ({
+			...e,
+			visible: e.visible === !1
+		}));
+	}
+	function G(e) {
+		v || T(e), b?.(e);
+	}
+	async function K() {
+		try {
+			await navigator.clipboard.writeText(L);
+		} 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();
+		}
+		M(!0), window.setTimeout(() => M(!1), 1400);
+	}
+	return /* @__PURE__ */ o("main", {
+		className: [
+			"squircle-editor",
+			`squircle-editor-${D}`,
+			f
+		].filter(Boolean).join(" "),
+		"data-theme": D,
+		"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", {
+				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", {
+						type: "button",
+						onClick: H,
+						children: "Add layer"
+					}),
+					/* @__PURE__ */ a("button", {
+						type: "button",
+						onClick: () => R([]),
+						children: "Clear"
+					})
+				]
+			})]
+		}), /* @__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", {
+									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) })]
+								}), /* @__PURE__ */ a("button", {
+									type: "button",
+									className: "icon-text",
+									"aria-pressed": e.visible !== !1,
+									onClick: () => W(e.id),
+									children: e.visible === !1 ? "Show" : "Hide"
+								})]
+							}, e.id);
+						})
+					})]
+				}),
+				/* @__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" : ""
+								})]
+							})]
+						}), /* @__PURE__ */ a("pre", {
+							className: "code-output",
+							children: /* @__PURE__ */ a("code", { children: L })
+						})]
+					}) : null]
+				}),
+				/* @__PURE__ */ a("aside", {
+					className: N ? "side-panel inspector-panel" : "side-panel inspector-panel is-empty",
+					children: N ? /* @__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"
+							})]
+						}),
+						/* @__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(q, {
+							title: "Hover",
+							children: [/* @__PURE__ */ a(Y, {
+								label: "Enabled",
+								checked: !!N.hover,
+								onChange: (e) => {
+									z(N.id, (t) => ({
+										...t,
+										hover: e ? {
+											...t.base,
+											material: t.base.material === "wireframe" ? "solid" : "wireframe"
+										} : 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]
+						}),
+						/* @__PURE__ */ o(q, {
+							title: "Stroke Widths",
+							children: [
+								/* @__PURE__ */ a(X, {
+									label: "Face",
+									value: N.stroke?.face ?? .35,
+									min: 0,
+									max: 1.5,
+									step: .05,
+									onChange: (e) => z(N.id, (t) => ({
+										...t,
+										stroke: {
+											...t.stroke,
+											face: e
+										}
+									}))
+								}),
+								/* @__PURE__ */ a(X, {
+									label: "Wire",
+									value: N.stroke?.wire ?? 1.6,
+									min: .4,
+									max: 4,
+									step: .1,
+									onChange: (e) => z(N.id, (t) => ({
+										...t,
+										stroke: {
+											...t.stroke,
+											wire: e
+										}
+									}))
+								}),
+								/* @__PURE__ */ a(X, {
+									label: "Dash",
+									value: N.stroke?.dash ?? 2.2,
+									min: .6,
+									max: 5,
+									step: .1,
+									onChange: (e) => z(N.id, (t) => ({
+										...t,
+										stroke: {
+											...t.stroke,
+											dash: e
+										}
+									}))
+								}),
+								/* @__PURE__ */ a(X, {
+									label: "Text outline",
+									value: N.stroke?.labelWire ?? 1.1,
+									min: .4,
+									max: 2,
+									step: .05,
+									onChange: (e) => z(N.id, (t) => ({
+										...t,
+										stroke: {
+											...t.stroke,
+											labelWire: e
+										}
+									}))
+								})
+							]
+						})
+					] }) : /* @__PURE__ */ a("p", {
+						className: "empty-note",
+						children: "Select a layer in the list or preview."
+					})
+				})
+			]
+		})]
+	});
+}
+function q({ title: e, children: t }) {
+	return /* @__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", {
+		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))
+		})]
+	});
+}
+function le({ value: e, onChange: t }) {
+	return /* @__PURE__ */ o("label", {
+		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))
+		})]
+	});
+}
+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({ label: e, value: t, onChange: n }) {
+	return /* @__PURE__ */ o("label", {
+		className: "field",
+		children: [/* @__PURE__ */ a("span", { children: e }), /* @__PURE__ */ a("input", {
+			type: "text",
+			value: t,
+			onChange: (e) => n(e.target.value)
+		})]
+	});
+}
+function X({ label: e, value: t, min: n, max: r, step: i, onChange: s }) {
+	return /* @__PURE__ */ o("label", {
+		className: "field",
+		children: [/* @__PURE__ */ o("span", { children: [
+			e,
+			": ",
+			t.toFixed(2)
+		] }), /* @__PURE__ */ a("input", {
+			type: "range",
+			min: n,
+			max: r,
+			step: i,
+			value: t,
+			onChange: (e) => s(Number(e.target.value))
+		})]
+	});
+}
+function de() {
+	return /* @__PURE__ */ o("svg", {
+		className: "copy-icon",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ a("rect", {
+			x: "9",
+			y: "9",
+			width: "11",
+			height: "11",
+			rx: "2"
+		}), /* @__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 Z(e) {
+	return typeof e.text == "string" ? e.text.trim().length > 0 : e.text === !0 || $(e).gpu === !0;
+}
+function Q(e) {
+	return typeof e.text == "string" ? e.text : (e.text === !0 || $(e).gpu, ae);
+}
+function pe(e) {
+	return e.textStyle ?? $(e).gpuStyle ?? "solid";
+}
+function $(e) {
+	return e;
+}
+//#endregion
+export { s as DEFAULT_GEOMETRY, S as DEFAULT_PALETTE_ID, b as SQUIRCLE_PALETTES, x as SQUIRCLE_PALETTE_IDS, ce as SquircleEditor, A as SquircleScene, se as createDefaultSquircleEditorLayers, c as createSquircleGeometry, u as createSquircleLayers, ee as createSquircleReactCode, C as getSquirclePalette, d as reflowLayerOffsets, re as toComponentName };
+
+//# sourceMappingURL=sqircle.js.map