@overvis/hmi-workspace-ui 0.0.0-stage → 0.1.1

package/dist/starter-fields-yM4B49nd.js

@@ -0,0 +1,583 @@
+import { rr as e } from "./quick-report-DEqqwQxR.js";
+import { f as t, h as n, m as r } from "./i18n-Dt6xbSK6.js";
+import { X as i, Y as a, jt as o } from "./alert-dialog-B60PF7S9.js";
+import { A as s, G as c, H as l, L as u, M as d, R as f, U as p, V as m, Y as h, a as g, c as _, n as v, o as y, r as b, z as x } from "./spinner-BRcNKwjH.js";
+import { A as S, C, E as w, S as T, w as E, x as D } from "./panel-BCwBlB_h.js";
+import { r as O, t as k } from "./alarm-rule-lists-DaA4soF4.js";
+import { i as A } from "./run-text-DneX9rWh.js";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+import { ChevronRightIcon as P, PlusIcon as F, Trash2Icon as I } from "lucide-react";
+import { resolveLocalized as L } from "@overvis/hmi-shared";
+import { automationCommandRoles as R, automationSeverities as z } from "@overvis/hmi-shared/automation";
+import { starterPlaceholderShown as B } from "@overvis/hmi-shared/starter";
+// src/workspace/setup/starters/starter-form.ts
+var V = {
+	s: 1e3,
+	min: 6e4,
+	h: 36e5
+};
+function H(e, t) {
+	return String(t / V[e.unit]);
+}
+function U(e) {
+	return e === void 0 ? {
+		kind: "none",
+		roles: [],
+		memberIds: []
+	} : e.kind === "roles" ? {
+		kind: "roles",
+		roles: [...e.roles],
+		memberIds: []
+	} : {
+		kind: "members",
+		roles: [],
+		memberIds: [...e.userIds]
+	};
+}
+function W(e) {
+	switch (e.kind) {
+		case "number": return e.default === void 0 ? "" : String(e.default);
+		case "duration": return e.default === void 0 ? "" : H(e, e.default);
+		case "timeOfDay":
+		case "severity":
+		case "choice": return e.default ?? "";
+		case "weekdays": return [...e.default ?? []];
+		case "recipients": return U(e.default);
+		case "boolean": return e.default ?? !1;
+		case "fileName": return e.default;
+		case "parameter":
+		case "endpoint":
+		case "alarmRule":
+		case "branch":
+		case "text":
+		case "phone": return "";
+	}
+}
+function G(e, t) {
+	return {
+		key: t,
+		fields: Object.fromEntries(e.map((e) => [e.name, W(e)]))
+	};
+}
+function K(e) {
+	return Object.fromEntries(e.map((e) => [e.name, e.kind === "list" ? Array.from({ length: Math.max(1, e.minItems) }, (t, n) => G(e.fields, `row-${String(n)}`)) : W(e)]));
+}
+var q = /^-?\d+(?:[.,]\d+)?$/u;
+function ee(e) {
+	let t = e.trim();
+	return q.test(t) ? Number(t.replace(",", ".")) : null;
+}
+function te(e, t) {
+	if (t === void 0) return {
+		ok: !0,
+		value: void 0
+	};
+	if (typeof t == "boolean") return {
+		ok: !0,
+		value: t
+	};
+	if (Array.isArray(t)) return {
+		ok: !0,
+		value: [...t].sort((e, t) => e - t)
+	};
+	if (typeof t == "object") return t.kind === "none" ? {
+		ok: !0,
+		value: void 0
+	} : t.kind === "roles" ? t.roles.length === 0 ? {
+		ok: !1,
+		code: "required"
+	} : {
+		ok: !0,
+		value: {
+			kind: "roles",
+			roles: [...t.roles]
+		}
+	} : t.memberIds.length === 0 ? {
+		ok: !1,
+		code: "required"
+	} : {
+		ok: !0,
+		value: {
+			kind: "members",
+			userIds: [...t.memberIds]
+		}
+	};
+	if (t.trim() === "") return {
+		ok: !0,
+		value: void 0
+	};
+	if (e.kind === "number" || e.kind === "duration") {
+		let n = ee(t);
+		return n === null ? {
+			ok: !1,
+			code: "invalid"
+		} : {
+			ok: !0,
+			value: e.kind === "duration" ? Math.round(n * V[e.unit]) : n
+		};
+	}
+	return {
+		ok: !0,
+		value: t
+	};
+}
+function ne(e, t) {
+	let n = [], r = (e, t, r) => {
+		let i = {};
+		for (let a of e) {
+			let e = t[a.name], o = te(a, J(e));
+			o.ok ? o.value !== void 0 && (i[a.name] = o.value) : n.push({
+				path: `${r}/${a.name}`,
+				code: o.code,
+				args: {}
+			});
+		}
+		return i;
+	}, i = e.filter((n) => B(n, e, t)), a = r(i.filter((e) => e.kind !== "list"), t, "");
+	for (let e of i) e.kind === "list" && (a[e.name] = Y(t[e.name]).map((t, n) => r(e.fields, t.fields, `/${e.name}/${String(n)}`)));
+	return n.length > 0 ? {
+		ok: !1,
+		problems: n
+	} : {
+		ok: !0,
+		values: a
+	};
+}
+function J(e) {
+	if (!Array.isArray(e)) return e;
+	let t = e, n = t.filter((e) => typeof e == "number");
+	return n.length === t.length ? n : void 0;
+}
+function Y(e) {
+	return Array.isArray(e) ? e.filter((e) => typeof e == "object" && !!e && "key" in e) : [];
+}
+function re(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let e = t.get(n.path) ?? [];
+		e.push(n), t.set(n.path, e);
+	}
+	return t;
+}
+// src/workspace/setup/starters/starter-fields.tsx
+var ie = ["view_only", ...R], ae = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7
+], X = /* @__PURE__ */ new Set([
+	"parameter",
+	"weekdays",
+	"recipients",
+	"text"
+]);
+function oe({ starters: e, onPick: t }) {
+	let r = n();
+	return /* @__PURE__ */ M(w, {
+		className: "gap-2",
+		children: e.map((e) => /* @__PURE__ */ N(D, {
+			variant: "outline",
+			render: /* @__PURE__ */ M("button", { type: "button" }),
+			className: "text-left",
+			onClick: () => {
+				t(e.id);
+			},
+			children: [/* @__PURE__ */ N(C, { children: [/* @__PURE__ */ M(S, { children: L(e.name, r) }), /* @__PURE__ */ M(E, {
+				className: "line-clamp-none",
+				children: L(e.description, r)
+			})] }), /* @__PURE__ */ M(T, { children: /* @__PURE__ */ M(P, { className: "size-4 text-muted-foreground" }) })]
+		}, e.id))
+	});
+}
+function se({ workspaceId: e, placeholders: t, values: n, onChange: r, problems: i, data: a, newKey: o }) {
+	let s = re(i), c = (e, t) => s.get(e)?.map((e) => Z(e, t));
+	return /* @__PURE__ */ M(m, { children: t.filter((e) => B(e, t, n)).map((t) => t.kind === "list" ? /* @__PURE__ */ M(ue, {
+		workspaceId: e,
+		placeholder: t,
+		rows: Y(n[t.name]),
+		onChange: (e, i) => {
+			r({
+				...n,
+				[t.name]: e
+			}, i ?? `/${t.name}`);
+		},
+		data: a,
+		newKey: o,
+		problemsAt: c
+	}, t.name) : /* @__PURE__ */ M($, {
+		id: `starter-${t.name}`,
+		workspaceId: e,
+		placeholder: t,
+		value: J(n[t.name]),
+		onChange: (e) => {
+			r({
+				...n,
+				[t.name]: e
+			}, `/${t.name}`);
+		},
+		data: a,
+		problems: c(`/${t.name}`, t)
+	}, t.name)) });
+}
+function Z(e, n) {
+	let r = (e) => e === void 0 ? "" : n.kind === "duration" && typeof e == "number" ? `${H(n, e)} ${Q(n.unit)}` : String(e), { args: i } = e;
+	switch (e.code) {
+		case "required": return t("starter_problem_required");
+		case "invalid": return t("starter_problem_invalid");
+		case "unknown_placeholder": return t("starter_problem_unknown_placeholder");
+		case "out_of_range": return i.min !== void 0 && i.max !== void 0 ? t("starter_problem_out_of_range", {
+			min: r(i.min),
+			max: r(i.max)
+		}) : i.min === void 0 ? i.max === void 0 ? t("starter_problem_invalid") : t("starter_problem_out_of_range_max", { max: r(i.max) }) : t("starter_problem_out_of_range_min", { min: r(i.min) });
+		case "too_few": return t("starter_problem_too_few", { min: String(i.min ?? "") });
+		case "too_many": return t("starter_problem_too_many", { max: String(i.max ?? "") });
+		case "duplicate": return t("starter_problem_duplicate");
+		case "parameter_not_found": return t("starter_problem_parameter_not_found");
+		case "parameter_type": return i.expected === "boolean" ? t("starter_problem_parameter_type_boolean") : i.expected === "number" ? t("starter_problem_parameter_type_number") : t("starter_problem_parameter_type", { expected: String(i.expected ?? "") });
+		case "parameter_not_writable": return t("starter_problem_parameter_not_writable");
+		case "parameter_not_on_endpoint": return t("starter_problem_parameter_not_on_endpoint");
+		case "parameter_encoding": return t("starter_problem_parameter_encoding");
+		case "endpoint_not_found": return t("starter_problem_endpoint_not_found");
+		case "alarm_rule_not_found": return t("starter_problem_alarm_rule_not_found");
+		case "member_not_found": return t("starter_problem_member_not_found");
+		case "branch_not_found": return t("starter_problem_branch_not_found");
+		case "file_name_invalid": return t("starter_problem_file_name_invalid");
+		case "file_name_taken": return t("starter_problem_file_name_taken");
+	}
+}
+function Q(e) {
+	switch (e) {
+		case "s": return t("starter_unit_s");
+		case "min": return t("starter_unit_min");
+		case "h": return t("starter_unit_h");
+	}
+}
+function ce(e) {
+	switch (e) {
+		case 1: return t("report_weekday_mon");
+		case 2: return t("report_weekday_tue");
+		case 3: return t("report_weekday_wed");
+		case 4: return t("report_weekday_thu");
+		case 5: return t("report_weekday_fri");
+		case 6: return t("report_weekday_sat");
+		default: return t("report_weekday_sun");
+	}
+}
+function le() {
+	let e = r();
+	return (t) => {
+		switch (t) {
+			case "owner": return e("automation_role_owner");
+			case "admin": return e("automation_role_admin");
+			case "editor": return e("automation_role_editor");
+			case "operator": return e("automation_role_operator");
+			default: return e("automation_role_view_only");
+		}
+	};
+}
+function ue({ workspaceId: e, placeholder: t, rows: i, onChange: a, data: s, newKey: l, problemsAt: u }) {
+	let d = r(), f = n(), m = `/${t.name}`, h = t.itemLabel === void 0 ? void 0 : L(t.itemLabel, f), g = (e) => h === void 0 ? d("starter_row", { number: String(e + 1) }) : `${h} ${String(e + 1)}`, _ = t.fields.filter((e) => X.has(e.kind)), v = t.fields.filter((e) => !X.has(e.kind)), y = (e, n) => /* @__PURE__ */ M(o, {
+		type: "button",
+		variant: "ghost",
+		size: "icon-sm",
+		"aria-label": d("starter_remove_row", { row: g(n) }),
+		disabled: i.length <= t.minItems,
+		onClick: () => {
+			a(i.filter((t) => t.key !== e.key));
+		},
+		children: /* @__PURE__ */ M(I, {})
+	}), b = (n, r, o, c = !1) => /* @__PURE__ */ M($, {
+		id: `starter-${t.name}-${n.key}-${o.name}`,
+		workspaceId: e,
+		placeholder: o,
+		...c ? {
+			label: g(r),
+			labelHidden: c
+		} : {},
+		value: n.fields[o.name],
+		onChange: (e) => {
+			a(i.map((t) => t.key === n.key ? {
+				...t,
+				fields: {
+					...t.fields,
+					[o.name]: e
+				}
+			} : t), `${m}/${String(r)}/${o.name}`);
+		},
+		data: s,
+		problems: u(`${m}/${String(r)}/${o.name}`, o)
+	}, o.name), [S] = t.fields;
+	return /* @__PURE__ */ N(c, { children: [
+		/* @__PURE__ */ M(p, { children: L(t.label, f) }),
+		t.help === void 0 ? null : /* @__PURE__ */ M(x, { children: L(t.help, f) }),
+		/* @__PURE__ */ M(O, { texts: u(m, t) }),
+		t.fields.length === 1 && S !== void 0 ? /* @__PURE__ */ M("div", {
+			className: "flex flex-col gap-2",
+			children: i.map((e, t) => /* @__PURE__ */ N("div", {
+				className: "flex items-start gap-2",
+				children: [/* @__PURE__ */ M("div", {
+					className: "min-w-0 flex-1",
+					children: b(e, t, S, !0)
+				}), /* @__PURE__ */ M("div", {
+					className: "flex h-9 items-center",
+					children: y(e, t)
+				})]
+			}, e.key))
+		}) : /* @__PURE__ */ M("div", {
+			className: "flex flex-col gap-3",
+			children: i.map((e, t) => /* @__PURE__ */ N("div", {
+				className: "flex flex-col gap-3 rounded-lg border p-3",
+				children: [
+					/* @__PURE__ */ N("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ M("span", {
+							className: "font-medium",
+							children: g(t)
+						}), y(e, t)]
+					}),
+					_.map((n) => b(e, t, n)),
+					v.length === 0 ? null : /* @__PURE__ */ M("div", {
+						className: "\n                    grid grid-cols-1 gap-3\n                    sm:grid-cols-2\n                  ",
+						children: v.map((n) => b(e, t, n))
+					})
+				]
+			}, e.key))
+		}),
+		/* @__PURE__ */ M("div", { children: /* @__PURE__ */ N(o, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			disabled: i.length >= t.maxItems,
+			onClick: () => {
+				a([...i, G(t.fields, l())]);
+			},
+			children: [/* @__PURE__ */ M(F, { "data-icon": "inline-start" }), d("starter_add_row")]
+		}) })
+	] });
+}
+function $({ id: t, workspaceId: o, placeholder: c, label: p, labelHidden: m = !1, value: S, onChange: C, data: w, problems: T }) {
+	let E = r(), D = n(), P = le(), F = "optional" in c && (c.optional ?? !1), I = p ?? L(c.label, D), R = c.help === void 0 ? void 0 : L(c.help, D), B = typeof S == "string" ? S : "", V = T !== void 0 && T.length > 0, H = F ? /* @__PURE__ */ M("span", {
+		className: "font-normal text-muted-foreground",
+		children: E("starter_optional")
+	}) : null, U = /* @__PURE__ */ N(l, {
+		htmlFor: t,
+		className: m ? "sr-only" : void 0,
+		children: [I, H]
+	}), W = /* @__PURE__ */ N(j, { children: [R === void 0 ? null : /* @__PURE__ */ M(x, { children: R }), /* @__PURE__ */ M(O, { texts: T })] }), G = (e, n) => /* @__PURE__ */ N(u, {
+		"data-invalid": V || void 0,
+		children: [
+			U,
+			/* @__PURE__ */ N(s, {
+				id: t,
+				value: B,
+				"aria-invalid": V || void 0,
+				onChange: (e) => {
+					C(e.target.value);
+				},
+				children: [n ? /* @__PURE__ */ M(d, {
+					value: "",
+					children: E("starter_choose")
+				}) : null, e.map((e) => /* @__PURE__ */ M(d, {
+					value: e.id,
+					children: e.name
+				}, e.id))]
+			}),
+			W
+		]
+	});
+	switch (c.kind) {
+		case "parameter": {
+			let n = T !== void 0 || B === "" ? null : w.parameterProblem?.(c, B), r = n == null ? T : [Z(n, c)];
+			return /* @__PURE__ */ M(e, {
+				name: t,
+				label: I,
+				labelSuffix: H,
+				labelHidden: m,
+				workspaceId: o,
+				value: B,
+				onChange: C,
+				preferred: (e) => w.parameterFits(c, e),
+				...R === void 0 ? {} : { description: R },
+				invalid: r !== void 0 && r.length > 0,
+				errors: (r ?? []).map((e) => ({ message: e }))
+			});
+		}
+		case "endpoint": return G(w.endpoints, !0);
+		case "alarmRule": return G(w.alarmRules, !0);
+		case "branch": return G(w.branches, !0);
+		case "choice": return G(c.options.map((e) => ({
+			id: e.value,
+			name: L(e.label, D)
+		})), c.default === void 0);
+		case "severity": return G(z.map((e) => ({
+			id: e,
+			name: A(e)
+		})), c.default === void 0);
+		case "number":
+		case "duration": {
+			let e = c.kind === "duration" ? Q(c.unit) : c.unit === void 0 ? "" : L(c.unit, D);
+			return /* @__PURE__ */ N(u, {
+				"data-invalid": V || void 0,
+				children: [
+					U,
+					/* @__PURE__ */ N(v, { children: [/* @__PURE__ */ M(g, {
+						id: t,
+						inputMode: c.kind === "number" && c.integer === !0 ? "numeric" : "decimal",
+						value: B,
+						"aria-invalid": V || void 0,
+						onChange: (e) => {
+							C(e.target.value);
+						}
+					}), e === "" ? null : /* @__PURE__ */ M(b, {
+						align: "inline-end",
+						children: /* @__PURE__ */ M(y, { children: e })
+					})] }),
+					W
+				]
+			});
+		}
+		case "timeOfDay":
+		case "text":
+		case "fileName":
+		case "phone": return /* @__PURE__ */ N(u, {
+			"data-invalid": V || void 0,
+			children: [
+				U,
+				/* @__PURE__ */ M(_, {
+					id: t,
+					...c.kind === "timeOfDay" ? {
+						type: "time",
+						step: 60
+					} : c.kind === "text" ? { maxLength: c.maxLength } : c.kind === "phone" ? {
+						type: "tel",
+						autoComplete: "off"
+					} : {
+						maxLength: 12,
+						autoComplete: "off",
+						className: "font-mono uppercase"
+					},
+					value: B,
+					"aria-invalid": V || void 0,
+					onChange: (e) => {
+						C(e.target.value);
+					}
+				}),
+				W
+			]
+		});
+		case "boolean": return /* @__PURE__ */ N(u, {
+			orientation: "horizontal",
+			"data-invalid": V || void 0,
+			children: [/* @__PURE__ */ M(h, {
+				id: t,
+				checked: S === !0,
+				onCheckedChange: (e) => {
+					C(e);
+				}
+			}), /* @__PURE__ */ N(f, { children: [/* @__PURE__ */ M(l, {
+				htmlFor: t,
+				children: I
+			}), W] })]
+		});
+		case "weekdays": return /* @__PURE__ */ N(u, {
+			"data-invalid": V || void 0,
+			children: [
+				/* @__PURE__ */ M(l, {
+					id: t,
+					children: I
+				}),
+				/* @__PURE__ */ M(a, {
+					multiple: !0,
+					variant: "outline",
+					size: "sm",
+					spacing: 0,
+					className: "w-full",
+					"aria-labelledby": t,
+					value: (Array.isArray(S) ? S : []).map(String),
+					onValueChange: (e) => {
+						C(e.map(Number).filter((e) => Number.isInteger(e) && e >= 1 && e <= 7).sort((e, t) => e - t));
+					},
+					children: ae.map((e) => /* @__PURE__ */ M(i, {
+						value: String(e),
+						className: "min-w-0 flex-1 px-1",
+						children: ce(e)
+					}, e))
+				}),
+				W
+			]
+		});
+		case "recipients": {
+			let e = typeof S == "object" && !Array.isArray(S) ? S : {
+				kind: "none",
+				roles: [],
+				memberIds: []
+			};
+			return /* @__PURE__ */ N(u, {
+				"data-invalid": V || void 0,
+				children: [
+					U,
+					/* @__PURE__ */ N(s, {
+						id: t,
+						value: e.kind,
+						onChange: (t) => {
+							let n = [
+								"none",
+								"roles",
+								"members"
+							].find((e) => e === t.target.value);
+							n !== void 0 && C({
+								...e,
+								kind: n
+							});
+						},
+						children: [
+							F ? /* @__PURE__ */ M(d, {
+								value: "none",
+								children: E("starter_recipients_none")
+							}) : null,
+							/* @__PURE__ */ M(d, {
+								value: "roles",
+								children: E("alarm_rule_recipients_roles")
+							}),
+							/* @__PURE__ */ M(d, {
+								value: "members",
+								children: E("alarm_rule_recipients_members")
+							})
+						]
+					}),
+					e.kind === "roles" ? /* @__PURE__ */ M("div", {
+						className: "flex flex-wrap gap-4",
+						children: ie.map((t) => /* @__PURE__ */ N("label", {
+							className: "flex items-center gap-2 text-sm",
+							children: [/* @__PURE__ */ M(h, {
+								checked: e.roles.includes(t),
+								onCheckedChange: (n) => {
+									let r = n ? [...e.roles, t] : e.roles.filter((e) => e !== t);
+									C({
+										...e,
+										roles: r
+									});
+								}
+							}), P(t)]
+						}, t))
+					}) : null,
+					e.kind === "members" ? /* @__PURE__ */ M(k, {
+						members: w.members,
+						value: e.memberIds,
+						onChange: (t) => {
+							C({
+								...e,
+								memberIds: t
+							});
+						}
+					}) : null,
+					W
+				]
+			});
+		}
+	}
+}
+export { ne as i, se as n, K as r, oe as t };

package/dist/starter-handoff-BaK8Ss8I.js

@@ -0,0 +1,18 @@
+import { Value as e } from "typebox/value";
+import { alarmRuleType as t, automationType as n } from "@overvis/hmi-shared/automation";
+// src/workspace/setup/automations/starter-handoff.ts
+function r(e) {
+	return { overvisAutomationStarter: e };
+}
+function i(e) {
+	return typeof e == "object" && e && "document" in e ? e.document : void 0;
+}
+function a(t) {
+	let r = i(t);
+	return e.Check(n, r) ? r : void 0;
+}
+function o(n) {
+	let r = i(n);
+	return e.Check(t, r) ? r : void 0;
+}
+export { a as n, r, o as t };

package/dist/styles-reference.css

@@ -0,0 +1,54 @@
+/* A `data-theme="light"` subtree, such as a light-only drawing, stays light in the dark theme. */
+@custom-variant dark (&:is(.dark *):not(:is([data-theme="light"], [data-theme="light"] *)));
+
+@theme inline {
+  --font-sans: "Inter Variable", sans-serif;
+  --font-heading: "Inter Variable", sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: calc(var(--radius) - 1px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 2px);
+  --radius-2xl: calc(var(--radius) + 4px);
+  --radius-3xl: calc(var(--radius) + 8px);
+  --radius-4xl: calc(var(--radius) + 12px);
+  --shadow-xs: 0 1px 2px 0 oklch(0.2 0.02 250 / 6%);
+  --shadow-sm: 0 1px 2px 0 oklch(0.2 0.02 250 / 6%), 0 1px 3px 0 oklch(0.2 0.02 250 / 4%);
+  --shadow-md: 0 2px 6px -1px oklch(0.2 0.02 250 / 10%), 0 1px 2px 0 oklch(0.2 0.02 250 / 6%);
+  --shadow-lg: 0 8px 24px -6px oklch(0.2 0.02 250 / 14%), 0 2px 6px -1px oklch(0.2 0.02 250 / 8%);
+  --shadow-xl:
+    0 16px 40px -8px oklch(0.2 0.02 250 / 18%), 0 4px 10px -2px oklch(0.2 0.02 250 / 8%);
+}