@sensorario/sg-components 0.0.105 → 0.0.106

package/dist/auth/index.d.ts

@@ -0,0 +1,10 @@
+export declare const ACCESS_TOKEN_COOKIE = "simonegentili.com-access-token";
+/** `domain` and `secure` only where the browser honors them: otherwise it drops the whole cookie (e.g. http://localhost). */
+export declare const cookieScope: () => string;
+export declare const writeCookie: (name: string, value: string, maxAgeSeconds: number, sameSite?: "strict" | "lax") => void;
+/** The JWT shared by every .simonegentili.com app, or null when logged out. */
+export declare const getAccessToken: (cookieName?: string) => string | null;
+export declare const setAccessToken: (token: string, maxAgeSeconds?: number, cookieName?: string) => void;
+export declare const clearAccessToken: (cookieName?: string) => void;
+/** Reads one claim of the token payload without verifying it (the API does that). Default: the username. */
+export declare const getTokenClaim: (token?: string | null, claim?: string) => string | null;

package/dist/components/AuthPage/AuthPage.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import './AuthPage.css';
+interface AuthPageProps {
+    title: ReactNode;
+    children?: ReactNode;
+    /** Links under the card, e.g. back to the home page (router-specific, so the app passes it). */
+    footer?: ReactNode;
+    className?: string;
+}
+export declare const AuthPage: ({ title, children, footer, className }: AuthPageProps) => import("react/jsx-runtime").JSX.Element;
+export default AuthPage;

package/dist/components/AuthPage/AuthPage.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AuthPage } from './AuthPage';
+declare const meta: Meta<typeof AuthPage>;
+export default meta;
+type Story = StoryObj<typeof AuthPage>;
+export declare const Register: Story;
+export declare const RegisterError: Story;
+export declare const Registered: Story;

package/dist/components/LoginPrompt/LoginPrompt.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import './LoginPrompt.css';
+interface LoginPromptProps {
+    /** What logging in unlocks, e.g. "Accedi per vedere le sessioni." */
+    children?: ReactNode;
+    /** Shows a login button, e.g. `() => headerRef.current?.openLoginModal()`. */
+    onLogin?: () => void;
+    /** Extra content under the button, e.g. a link to the registration page. */
+    footer?: ReactNode;
+    className?: string;
+}
+export declare const LoginPrompt: ({ children, onLogin, footer, className }: LoginPromptProps) => import("react/jsx-runtime").JSX.Element;
+export default LoginPrompt;

package/dist/components/LoginPrompt/LoginPrompt.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LoginPrompt } from './LoginPrompt';
+declare const meta: Meta<typeof LoginPrompt>;
+export default meta;
+type Story = StoryObj<typeof LoginPrompt>;
+export declare const TextOnly: Story;
+export declare const WithButton: Story;
+export declare const WithRegisterLink: Story;

package/dist/components/RegisterForm/RegisterForm.d.ts

@@ -0,0 +1,9 @@
+import './RegisterForm.css';
+interface RegisterFormProps {
+    /** Calls the app's register endpoint; a thrown Error's message is shown to the user. */
+    onRegister: (email: string) => Promise<void>;
+    /** Called after a successful registration instead of showing the "check your email" message, e.g. to navigate. */
+    onRegistered?: (email: string) => void;
+}
+export declare const RegisterForm: ({ onRegister, onRegistered }: RegisterFormProps) => import("react/jsx-runtime").JSX.Element;
+export default RegisterForm;

package/dist/components/VersionNumber/VersionNumber.d.ts

@@ -0,0 +1,8 @@
+import './VersionNumber.css';
+interface VersionNumberProps {
+    /** Usually the app's own __APP_VERSION__, defined in its vite.config. */
+    version: string;
+    className?: string;
+}
+export declare const VersionNumber: ({ version, className }: VersionNumberProps) => import("react/jsx-runtime").JSX.Element;
+export default VersionNumber;

package/dist/components/VersionNumber/VersionNumber.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { VersionNumber } from './VersionNumber';
+declare const meta: Meta<typeof VersionNumber>;
+export default meta;
+export declare const Default: StoryObj<typeof VersionNumber>;

package/dist/index.d.ts

@@ -31,3 +31,8 @@ export * from './components/Select/Select';
 export * from './components/FormField/FormField';
 export * from './components/Tabs/Tabs';
 import './components/Table/Table.css';
+export * from './components/VersionNumber/VersionNumber';
+export * from './components/LoginPrompt/LoginPrompt';
+export * from './components/AuthPage/AuthPage';
+export * from './components/RegisterForm/RegisterForm';
+export { ACCESS_TOKEN_COOKIE, getAccessToken, setAccessToken, clearAccessToken, getTokenClaim } from './auth';

package/dist/index.es.js

@@ -357,7 +357,19 @@ var w = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	onNavigate: e,
 	title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
 	homePageKey: "home"
-}), k = {
+}), k = "simonegentili.com-access-token", ee = (e) => document.cookie.split("; ").find((t) => t.startsWith(`${e}=`))?.slice(e.length + 1) || null, te = () => (window.location.hostname.endsWith("simonegentili.com") ? "; domain=.simonegentili.com" : "") + (window.location.protocol === "https:" ? "; secure" : ""), A = (e, t, n, r = "strict") => {
+	document.cookie = `${e}=${t}; path=/; max-age=${n}; samesite=${r}${te()}`;
+}, j = (e = k) => ee(e), ne = (e, t = 168 * 3600, n = k) => A(n, e, t), re = (e = k) => {
+	A(e, "", 0), document.cookie = `${e}=; path=/; max-age=0`;
+}, M = (e = j(), t = "sub") => {
+	if (!e) return null;
+	try {
+		let n = JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
+		return typeof n[t] == "string" ? n[t] : null;
+	} catch {
+		return null;
+	}
+}, ie = {
 	auth: {
 		login: "Accedi",
 		logout: "Esci",
@@ -394,8 +406,18 @@ var w = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	confirm: {
 		confirm: "Conferma",
 		cancel: "Annulla"
+	},
+	version: { label: "Versione" },
+	loginPrompt: { message: "Accedi per continuare." },
+	register: {
+		title: "Registrati",
+		email: "Email",
+		placeholder: "La tua email",
+		submit: "Registrati",
+		sending: "Invio…",
+		sent: "Controlla la tua email: ti abbiamo inviato un link per completare la registrazione."
 	}
-}, ee = {
+}, ae = {
 	auth: {
 		login: "Log in",
 		logout: "Log out",
@@ -432,8 +454,18 @@ var w = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	confirm: {
 		confirm: "Confirm",
 		cancel: "Cancel"
+	},
+	version: { label: "Version" },
+	loginPrompt: { message: "Log in to continue." },
+	register: {
+		title: "Sign up",
+		email: "Email",
+		placeholder: "Your email",
+		submit: "Sign up",
+		sending: "Sending…",
+		sent: "Check your email: we sent you a link to complete your registration."
 	}
-}, te = {
+}, oe = {
 	auth: {
 		login: "Se connecter",
 		logout: "Se déconnecter",
@@ -470,8 +502,18 @@ var w = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	confirm: {
 		confirm: "Confirmer",
 		cancel: "Annuler"
+	},
+	version: { label: "Version" },
+	loginPrompt: { message: "Connectez-vous pour continuer." },
+	register: {
+		title: "S’inscrire",
+		email: "E-mail",
+		placeholder: "Votre e-mail",
+		submit: "S’inscrire",
+		sending: "Envoi…",
+		sent: "Consultez votre e-mail : nous vous avons envoyé un lien pour terminer l’inscription."
 	}
-}, ne = {
+}, se = {
 	auth: {
 		login: "Anmelden",
 		logout: "Abmelden",
@@ -508,8 +550,18 @@ var w = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	confirm: {
 		confirm: "Bestätigen",
 		cancel: "Abbrechen"
+	},
+	version: { label: "Version" },
+	loginPrompt: { message: "Melde dich an, um fortzufahren." },
+	register: {
+		title: "Registrieren",
+		email: "E-Mail",
+		placeholder: "Deine E-Mail",
+		submit: "Registrieren",
+		sending: "Wird gesendet…",
+		sent: "Prüfe deine E-Mails: Wir haben dir einen Link zum Abschließen der Registrierung geschickt."
 	}
-}, re = {
+}, ce = {
 	auth: {
 		login: "Iniciar sesión",
 		logout: "Cerrar sesión",
@@ -546,8 +598,18 @@ var w = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	confirm: {
 		confirm: "Confirmar",
 		cancel: "Cancelar"
+	},
+	version: { label: "Versión" },
+	loginPrompt: { message: "Inicia sesión para continuar." },
+	register: {
+		title: "Registrarse",
+		email: "Correo electrónico",
+		placeholder: "Tu correo electrónico",
+		submit: "Registrarse",
+		sending: "Enviando…",
+		sent: "Revisa tu correo: te hemos enviado un enlace para completar el registro."
 	}
-}, A = {
+}, le = {
 	auth: {
 		login: "ログイン",
 		logout: "ログアウト",
@@ -584,57 +646,64 @@ var w = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	confirm: {
 		confirm: "確認",
 		cancel: "キャンセル"
+	},
+	version: { label: "バージョン" },
+	loginPrompt: { message: "続行するにはログインしてください。" },
+	register: {
+		title: "新規登録",
+		email: "メールアドレス",
+		placeholder: "メールアドレス",
+		submit: "登録する",
+		sending: "送信中…",
+		sent: "メールを確認してください。登録を完了するためのリンクを送信しました。"
 	}
-}, j = [
+}, N = [
 	"it",
 	"en",
 	"fr",
 	"de",
 	"es",
 	"ja"
-], M = {
+], P = {
 	it: "Italiano",
 	en: "English",
 	fr: "Français",
 	de: "Deutsch",
 	es: "Español",
 	ja: "日本語"
-}, N = "sg-language", P = "it", F = (e) => !!e && j.includes(e), I = () => {
-	let e = document.cookie.split("; ").find((e) => e.startsWith(`${N}=`))?.slice(12);
-	return F(e) ? e : null;
-}, ie = (e) => {
-	let t = window.location.hostname.endsWith("simonegentili.com") ? "; domain=.simonegentili.com; secure" : "";
-	document.cookie = `${N}=${e}; path=/; max-age=31536000; samesite=lax${t}`;
-}, L = h.createInstance();
-L.init({
+}, F = "sg-language", I = "it", ue = (e) => !!e && N.includes(e), L = () => {
+	let e = document.cookie.split("; ").find((e) => e.startsWith(`${F}=`))?.slice(12);
+	return ue(e) ? e : null;
+}, de = (e) => A(F, e, 31536e3, "lax"), R = h.createInstance();
+R.init({
 	resources: {
-		it: { sg: k },
-		en: { sg: ee },
-		fr: { sg: te },
-		de: { sg: ne },
-		es: { sg: re },
-		ja: { sg: A }
+		it: { sg: ie },
+		en: { sg: ae },
+		fr: { sg: oe },
+		de: { sg: se },
+		es: { sg: ce },
+		ja: { sg: le }
 	},
-	lng: I() ?? P,
-	fallbackLng: P,
-	supportedLngs: [...j],
+	lng: L() ?? I,
+	fallbackLng: I,
+	supportedLngs: [...N],
 	ns: ["sg", "translation"],
 	defaultNS: "translation",
 	initAsync: !1,
 	interpolation: { escapeValue: !1 }
-}), L.on("languageChanged", ie);
-var ae = ({ resources: e }) => {
-	for (let [t, n] of Object.entries(e)) L.addResourceBundle(t, "translation", n, !0, !0);
-	return p(L), L;
-}, R = "https://api.simonegentili.com/heimdall", z = (e) => e.endsWith("/") ? e : `${e}/`, oe = (e) => {
-	let t = z(window.location.origin + window.location.pathname);
-	return e.filter((e) => t.startsWith(z(e.url))).sort((e, t) => t.url.length - e.url.length)[0] ?? null;
-}, B = ({ token: e, heimdallUrl: t = R }) => {
-	let { t: n } = m("sg", { i18n: L }), [r, i] = l(null), [o, s] = l(!1), [c, p] = l(!1);
+}), R.on("languageChanged", de);
+var fe = ({ resources: e }) => {
+	for (let [t, n] of Object.entries(e)) R.addResourceBundle(t, "translation", n, !0, !0);
+	return p(R), R;
+}, z = "https://api.simonegentili.com/heimdall", B = (e) => e.endsWith("/") ? e : `${e}/`, pe = (e) => {
+	let t = B(window.location.origin + window.location.pathname);
+	return e.filter((e) => t.startsWith(B(e.url))).sort((e, t) => t.url.length - e.url.length)[0] ?? null;
+}, V = ({ token: e, heimdallUrl: t = z }) => {
+	let { t: n } = m("sg", { i18n: R }), [r, i] = l(null), [o, s] = l(!1), [c, p] = l(!1);
 	a(() => {
 		e && fetch(`${t}/access`, { headers: { Authorization: `Bearer ${e}` } }).then((e) => e.ok ? e.json() : Promise.reject(e.status)).then((t) => i({
 			token: e,
-			app: oe(t.apps)
+			app: pe(t.apps)
 		})).catch(() => i({
 			token: e,
 			app: null
@@ -688,8 +757,8 @@ var ae = ({ resources: e }) => {
 			] })]
 		})
 	});
-}, V = "https://api.simonegentili.com/heimdall/launcher", H = ({ appsUrl: e = V, label: t, token: n = null }) => {
-	let { t: r } = m("sg", { i18n: L }), i = t ?? r("launcher.label"), [o, s] = l(!1), [u, p] = l(null), h = u?.token === n ? u.apps : null, [g, v] = l(!1), y = c(null);
+}, H = "https://api.simonegentili.com/heimdall/launcher", U = ({ appsUrl: e = H, label: t, token: n = null }) => {
+	let { t: r } = m("sg", { i18n: R }), i = t ?? r("launcher.label"), [o, s] = l(!1), [u, p] = l(null), h = u?.token === n ? u.apps : null, [g, v] = l(!1), y = c(null);
 	return a(() => {
 		!o || h !== null || fetch(e, n ? { headers: { Authorization: `Bearer ${n}` } } : void 0).then((e) => e.ok ? e.json() : Promise.reject(e.status)).then((e) => p({
 			token: n,
@@ -769,7 +838,7 @@ var ae = ({ resources: e }) => {
 			})
 		})]
 	});
-}, U = ({ src: e, name: t, size: n = 32, className: r }) => {
+}, W = ({ src: e, name: t, size: n = 32, className: r }) => {
 	let i = ["sg-avatar", r].filter(Boolean).join(" "), a = { "--avatar-size": `${n}px` };
 	return e ? /* @__PURE__ */ d("img", {
 		className: i,
@@ -783,8 +852,8 @@ var ae = ({ resources: e }) => {
 		"aria-label": t ?? void 0,
 		children: t?.trim().charAt(0).toUpperCase() || "?"
 	});
-}, W = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => {
-	let { t: r } = m("sg", { i18n: L });
+}, G = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => {
+	let { t: r } = m("sg", { i18n: R });
 	return /* @__PURE__ */ d(u, { children: e ? /* @__PURE__ */ d("button", {
 		onClick: n,
 		className: "sg-authenticator-button",
@@ -794,14 +863,14 @@ var ae = ({ resources: e }) => {
 		className: "sg-authenticator-button",
 		children: r("auth.login")
 	}) });
-}, G = 220, K = ({ open: t, onClose: n, title: r, icon: i, children: o, buttons: s, footer: c, closeLabel: u, className: p }) => {
-	let { t: h } = m("sg", { i18n: L }), [g, _] = l(!1), [y, b] = l({
+}, me = 220, K = ({ open: t, onClose: n, title: r, icon: i, children: o, buttons: s, footer: c, closeLabel: u, className: p }) => {
+	let { t: h } = m("sg", { i18n: R }), [g, _] = l(!1), [y, b] = l({
 		x: 0,
 		y: 0
 	}), x = e.useRef(null), [S, C] = l(!1), w = (e) => {
 		g || (_(!0), setTimeout(() => {
 			_(!1), e();
-		}, G));
+		}, me));
 	};
 	a(() => {
 		if (!t) return;
@@ -926,8 +995,8 @@ var ae = ({ resources: e }) => {
 			...i
 		})]
 	});
-}, se = ({ open: e, onClose: t, onLogin: n }) => {
-	let { t: r } = m("sg", { i18n: L }), [i, a] = l(""), [o, s] = l("");
+}, he = ({ open: e, onClose: t, onLogin: n }) => {
+	let { t: r } = m("sg", { i18n: R }), [i, a] = l(""), [o, s] = l("");
 	return /* @__PURE__ */ d(K, {
 		open: e,
 		onClose: t,
@@ -956,19 +1025,10 @@ var ae = ({ resources: e }) => {
 			]
 		})
 	});
-}, ce = "simonegentili.com-access-token", Y = "sg-avatar-change", X = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), le = (e) => {
-	let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
-	return t ? t.slice(e.length + 1) : null;
-}, ue = (e, t) => {
-	try {
-		return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
-	} catch {
-		return null;
-	}
-}, Z = r(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: n, cookieName: r = ce, username: i = null, usernameJwtField: o = "sub", onLogin: c, onLogout: p, onUserAuthenticated: m, appsUrl: h, heimdallUrl: g = R }, _) => {
+}, Y = "sg-avatar-change", X = (e) => j(e) !== null, Z = r(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: n, cookieName: r = k, username: i = null, usernameJwtField: o = "sub", onLogin: c, onLogout: p, onUserAuthenticated: m, appsUrl: h, heimdallUrl: g = z }, _) => {
 	let [v, y] = l(() => X(r)), [b, x] = l(!1);
 	s(_, () => ({ openLoginModal: () => x(!0) }));
-	let S = v ? le(r) : null, C = i ?? (S ? ue(S, o) : null), [w, T] = l(null), E = S && w?.token === S ? w.src : null;
+	let S = v ? j(r) : null, C = i ?? M(S, o), [w, T] = l(null), E = S && w?.token === S ? w.src : null;
 	return a(() => {
 		if (!S) return;
 		let e = !1;
@@ -995,18 +1055,18 @@ var ae = ({ resources: e }) => {
 			title: e,
 			homePageKey: t,
 			className: "quadrato-header",
-			children: [/* @__PURE__ */ d(H, {
+			children: [/* @__PURE__ */ d(U, {
 				appsUrl: h,
 				token: S
 			}), /* @__PURE__ */ f("div", {
 				className: "quadrato-header-auth",
 				children: [
-					v && E && /* @__PURE__ */ d(U, { src: E }),
+					v && E && /* @__PURE__ */ d(W, { src: E }),
 					v && C && /* @__PURE__ */ d("span", {
 						className: "quadrato-header-username",
 						children: C
 					}),
-					/* @__PURE__ */ d(W, {
+					/* @__PURE__ */ d(G, {
 						isLoggedIn: v,
 						handleLogin: () => x(!0),
 						handleLogout: () => {
@@ -1018,11 +1078,11 @@ var ae = ({ resources: e }) => {
 				]
 			})]
 		}),
-		/* @__PURE__ */ d(B, {
+		/* @__PURE__ */ d(V, {
 			token: S,
 			heimdallUrl: g
 		}),
-		/* @__PURE__ */ d(se, {
+		/* @__PURE__ */ d(he, {
 			open: b,
 			onClose: () => x(!1),
 			onLogin: async (e, t) => {
@@ -1036,8 +1096,8 @@ var ae = ({ resources: e }) => {
 Z.displayName = "QuadratoHeader";
 //#endregion
 //#region src/components/SetPasswordModal/SetPasswordModal.tsx
-var de = ({ open: e, onClose: t, onSubmit: n }) => {
-	let { t: r } = m("sg", { i18n: L }), [i, a] = l(""), [o, s] = l(""), [c, u] = l("");
+var ge = ({ open: e, onClose: t, onSubmit: n }) => {
+	let { t: r } = m("sg", { i18n: R }), [i, a] = l(""), [o, s] = l(""), [c, u] = l("");
 	return /* @__PURE__ */ d(K, {
 		open: e,
 		onClose: t,
@@ -1079,7 +1139,7 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			]
 		})
 	});
-}, fe = ({ value: e, onChange: t, swatches: n }) => {
+}, _e = ({ value: e, onChange: t, swatches: n }) => {
 	let [r, i] = l(!1), o = c(null);
 	return a(() => {
 		if (!r) return;
@@ -1128,7 +1188,7 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			})]
 		})]
 	});
-}, Q = (e) => e.split(",")[0].replace(/'/g, ""), pe = ({ value: e, onChange: t, options: n }) => {
+}, Q = (e) => e.split(",")[0].replace(/'/g, ""), ve = ({ value: e, onChange: t, options: n }) => {
 	let [r, i] = l(!1), o = c(null);
 	return a(() => {
 		if (!r) return;
@@ -1168,7 +1228,7 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			}) }, n))
 		})]
 	});
-}, me = ({ checked: e, onChange: t, label: n, icons: r, layout: i = "inline" }) => /* @__PURE__ */ f("label", {
+}, ye = ({ checked: e, onChange: t, label: n, icons: r, layout: i = "inline" }) => /* @__PURE__ */ f("label", {
 	className: i === "row" ? "sg-toggle sg-toggle--row" : "sg-toggle",
 	children: [
 		/* @__PURE__ */ d("input", {
@@ -1190,19 +1250,19 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			children: r
 		})
 	]
-}), he = ({ className: e }) => {
-	let { t, i18n: n } = m("sg", { i18n: L });
+}), be = ({ className: e }) => {
+	let { t, i18n: n } = m("sg", { i18n: R });
 	return /* @__PURE__ */ d("select", {
 		className: ["sg-language-switcher", e].filter(Boolean).join(" "),
 		value: n.resolvedLanguage,
 		onChange: (e) => n.changeLanguage(e.target.value),
 		"aria-label": t("languageSwitcher.label"),
-		children: j.map((e) => /* @__PURE__ */ d("option", {
+		children: N.map((e) => /* @__PURE__ */ d("option", {
 			value: e,
-			children: M[e]
+			children: P[e]
 		}, e))
 	});
-}, ge = ({ value: e, max: t = 100, label: n, ariaLabel: r, tone: i = "accent", size: a = "md", className: o }) => {
+}, xe = ({ value: e, max: t = 100, label: n, ariaLabel: r, tone: i = "accent", size: a = "md", className: o }) => {
 	let s = t > 0 ? Math.min(100, Math.max(0, e / t * 100)) : 0;
 	return /* @__PURE__ */ f("div", {
 		className: [
@@ -1227,8 +1287,8 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			children: n
 		})]
 	});
-}, _e = ({ kind: e = "info", boxed: t = !1, children: n, className: r }) => {
-	let { t: i } = m("sg", { i18n: L });
+}, $ = ({ kind: e = "info", boxed: t = !1, children: n, className: r }) => {
+	let { t: i } = m("sg", { i18n: R });
 	return /* @__PURE__ */ f("p", {
 		className: [
 			"sg-status",
@@ -1242,7 +1302,7 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			"aria-hidden": "true"
 		}), n ?? (e === "loading" ? i("status.loading") : null)]
 	});
-}, ve = ({ header: e, actions: t, children: r, variant: i = "default", interactive: a = !1, as: o = "div", href: s, className: c }) => n(o, {
+}, Se = ({ header: e, actions: t, children: r, variant: i = "default", interactive: a = !1, as: o = "div", href: s, className: c }) => n(o, {
 	className: [
 		"sg-card",
 		`sg-card--${i}`,
@@ -1256,8 +1316,8 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 }), r, t && /* @__PURE__ */ d("div", {
 	className: "sg-card-actions",
 	children: t
-})), ye = ({ children: e, tone: t = "neutral", onClick: n, selected: r = !1, onRemove: i, removeLabel: a, className: o }) => {
-	let { t: s } = m("sg", { i18n: L });
+})), Ce = ({ children: e, tone: t = "neutral", onClick: n, selected: r = !1, onRemove: i, removeLabel: a, className: o }) => {
+	let { t: s } = m("sg", { i18n: R });
 	return /* @__PURE__ */ f("span", {
 		className: [
 			"sg-badge",
@@ -1279,8 +1339,8 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			children: "×"
 		})]
 	});
-}, $ = ({ open: e, title: t, children: n, onConfirm: r, onCancel: i, confirmLabel: a, cancelLabel: o, danger: s = !1, icon: c }) => {
-	let { t: l } = m("sg", { i18n: L });
+}, we = ({ open: e, title: t, children: n, onConfirm: r, onCancel: i, confirmLabel: a, cancelLabel: o, danger: s = !1, icon: c }) => {
+	let { t: l } = m("sg", { i18n: R });
 	return /* @__PURE__ */ d(K, {
 		open: e,
 		onClose: i,
@@ -1301,7 +1361,7 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			children: n
 		})
 	});
-}, be = ({ invalid: e, className: t, rows: n = 3, ...r }) => /* @__PURE__ */ d("textarea", {
+}, Te = ({ invalid: e, className: t, rows: n = 3, ...r }) => /* @__PURE__ */ d("textarea", {
 	rows: n,
 	className: [
 		"input-field",
@@ -1310,7 +1370,7 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 		t
 	].filter(Boolean).join(" "),
 	...r
-}), xe = ({ invalid: e, className: t, children: n, ...r }) => /* @__PURE__ */ d("select", {
+}), Ee = ({ invalid: e, className: t, children: n, ...r }) => /* @__PURE__ */ d("select", {
 	className: [
 		"input-field",
 		"sg-select",
@@ -1319,7 +1379,7 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 	].filter(Boolean).join(" "),
 	...r,
 	children: n
-}), Se = ({ label: e, children: n, hint: r, error: a, className: s }) => {
+}), De = ({ label: e, children: n, hint: r, error: a, className: s }) => {
 	let c = o(), l = i(n) ? n : null, u = l?.props.id ?? c, p = `${u}-note`, m = a ?? r;
 	return /* @__PURE__ */ f("div", {
 		className: ["sg-field", s].filter(Boolean).join(" "),
@@ -1342,7 +1402,7 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			})
 		]
 	});
-}, Ce = ({ items: e, value: t, onChange: n, variant: r = "underline", ariaLabel: i, className: a }) => {
+}, Oe = ({ items: e, value: t, onChange: n, variant: r = "underline", ariaLabel: i, className: a }) => {
 	let o = c(null);
 	return /* @__PURE__ */ d("div", {
 		ref: o,
@@ -1372,6 +1432,84 @@ var de = ({ open: e, onClose: t, onSubmit: n }) => {
 			}, e.value);
 		})
 	});
+}, ke = ({ version: e, className: t }) => {
+	let { t: n } = m("sg", { i18n: R });
+	return /* @__PURE__ */ f("p", {
+		className: ["sg-version", t].filter(Boolean).join(" "),
+		children: [
+			n("version.label"),
+			" v",
+			e
+		]
+	});
+}, Ae = ({ children: e, onLogin: t, footer: n, className: r }) => {
+	let { t: i } = m("sg", { i18n: R });
+	return /* @__PURE__ */ f("div", {
+		className: ["sg-login-prompt", r].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ d("p", {
+				className: "sg-login-prompt-message",
+				children: e ?? i("loginPrompt.message")
+			}),
+			t && /* @__PURE__ */ d(v, {
+				label: i("auth.login"),
+				onClick: t
+			}),
+			n && /* @__PURE__ */ d("div", {
+				className: "sg-login-prompt-footer",
+				children: n
+			})
+		]
+	});
+}, je = ({ title: e, children: t, footer: n, className: r }) => /* @__PURE__ */ f("div", {
+	className: ["sg-auth-page", r].filter(Boolean).join(" "),
+	children: [/* @__PURE__ */ f("div", {
+		className: "sg-auth-page-card",
+		children: [/* @__PURE__ */ d("h1", {
+			className: "sg-auth-page-title",
+			children: e
+		}), t]
+	}), n && /* @__PURE__ */ d("div", {
+		className: "sg-auth-page-footer",
+		children: n
+	})]
+}), Me = ({ onRegister: e, onRegistered: t }) => {
+	let { t: n } = m("sg", { i18n: R }), [r, i] = l(""), [a, o] = l(!1), [s, c] = l(!1), [u, p] = l(null);
+	return s ? /* @__PURE__ */ d($, {
+		boxed: !0,
+		children: n("register.sent")
+	}) : /* @__PURE__ */ f("form", {
+		className: "sg-register-form",
+		onSubmit: async (n) => {
+			n.preventDefault();
+			let i = r.trim();
+			o(!0), p(null);
+			try {
+				await e(i), t ? t(i) : c(!0);
+			} catch (e) {
+				p(e instanceof Error ? e.message : String(e));
+			} finally {
+				o(!1);
+			}
+		},
+		children: [/* @__PURE__ */ d(De, {
+			label: n("register.email"),
+			error: u ?? void 0,
+			children: /* @__PURE__ */ d("input", {
+				className: "input-field",
+				type: "email",
+				autoComplete: "email",
+				placeholder: n("register.placeholder"),
+				value: r,
+				onChange: (e) => i(e.target.value),
+				required: !0
+			})
+		}), /* @__PURE__ */ d(v, {
+			type: "submit",
+			label: n(a ? "register.sending" : "register.submit"),
+			disabled: a || r.trim() === ""
+		})]
+	});
 };
 //#endregion
-export { Y as AVATAR_CHANGE_EVENT, B as AppAccessGate, H as AppLauncher, W as Authenticator, U as Avatar, ye as Badge, v as Button, ve as Card, fe as ColorPicker, $ as ConfirmModal, w as CookieConsent, V as DEFAULT_APPS_URL, R as DEFAULT_HEIMDALL_URL, pe as FontPicker, y as Footer, Se as FormField, D as Header, _ as Icon, q as Input, N as LANGUAGE_COOKIE, M as LANGUAGE_NAMES, he as LanguageSwitcher, K as Modal, J as PasswordInput, ge as ProgressBar, Z as QuadratoHeader, E as SGFooter, O as SGHeader, j as SUPPORTED_LANGUAGES, xe as Select, de as SetPasswordModal, _e as StatusMessage, Ce as Tabs, be as Textarea, me as Toggle, ae as createI18n, I as readLanguageCookie, L as sgI18n };
+export { k as ACCESS_TOKEN_COOKIE, Y as AVATAR_CHANGE_EVENT, V as AppAccessGate, U as AppLauncher, je as AuthPage, G as Authenticator, W as Avatar, Ce as Badge, v as Button, Se as Card, _e as ColorPicker, we as ConfirmModal, w as CookieConsent, H as DEFAULT_APPS_URL, z as DEFAULT_HEIMDALL_URL, ve as FontPicker, y as Footer, De as FormField, D as Header, _ as Icon, q as Input, F as LANGUAGE_COOKIE, P as LANGUAGE_NAMES, be as LanguageSwitcher, Ae as LoginPrompt, K as Modal, J as PasswordInput, xe as ProgressBar, Z as QuadratoHeader, Me as RegisterForm, E as SGFooter, O as SGHeader, N as SUPPORTED_LANGUAGES, Ee as Select, ge as SetPasswordModal, $ as StatusMessage, Oe as Tabs, Te as Textarea, ye as Toggle, ke as VersionNumber, re as clearAccessToken, fe as createI18n, j as getAccessToken, M as getTokenClaim, L as readLanguageCookie, ne as setAccessToken, R as sgI18n };

package/dist/sg-components.css

@@ -1,2 +1,2 @@
-.custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.custom-button--secondary{--button-bg:var(--sg-surface);--button-bg-hover:var(--sg-surface-hover);--button-color:var(--sg-text);--button-shadow:none;border:1px solid var(--sg-border)}.custom-button--danger{--button-bg:var(--sg-danger);--button-bg-hover:var(--sg-danger);--button-color:var(--sg-on-accent)}.custom-button--danger:hover:not(:disabled){filter:brightness(.92)}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:var(--sg-text-secondary);justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:var(--sg-link);text-decoration:none}.footer a:hover{text-decoration:underline}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:var(--sg-text-secondary);z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:var(--sg-link);text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{background-color:var(--sg-surface);width:100%;color:var(--sg-text);border-bottom:1px solid var(--sg-border-subtle);box-shadow:var(--sg-shadow-1);z-index:100;font-size:var(--font-size);position:sticky;top:0}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:var(--sg-text);font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:var(--accent)}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.sg-access-gate{z-index:998;box-sizing:border-box;background:var(--primary-bg);font-family:var(--font-family);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.sg-access-gate-card{border:1px solid var(--primary-border);border-radius:calc(var(--radius) * 3);background:var(--modal-bg);max-width:420px;box-shadow:var(--shadow-2);color:var(--sg-text);text-align:center;padding:24px}.sg-access-gate-card h2{font-size:var(--font-size-h1);color:var(--modal-title-color);margin:0 0 12px}.sg-access-gate-card p{color:var(--ink-muted);margin:0 0 16px}.sg-access-gate-card .sg-access-gate-error{color:var(--sg-danger)}.sg-app-launcher{font-family:var(--font-family);position:relative}.sg-app-launcher-toggle{width:40px;height:40px;color:var(--ink-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.sg-app-launcher-toggle:hover,.sg-app-launcher-toggle[aria-expanded=true]{background:var(--primary-hover-bg)}.sg-app-launcher-panel{z-index:1000;box-sizing:border-box;border:1px solid var(--primary-border);border-radius:calc(var(--radius) * 3);background:var(--modal-bg);width:320px;max-width:calc(100vw - 24px);max-height:70vh;color:var(--sg-text);box-shadow:var(--shadow-2);padding:12px;position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto}.sg-app-launcher-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;display:grid}.sg-app-launcher-app{border-radius:var(--radius);color:inherit;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;text-decoration:none;display:flex}.sg-app-launcher-app:hover,.sg-app-launcher-app:focus-visible{background:var(--primary-hover-bg)}.sg-app-launcher-app.current{background:var(--accent-soft)}.sg-app-launcher-tile{border-radius:var(--radius);background:var(--accent);width:40px;height:40px;color:var(--sg-on-accent);justify-content:center;align-items:center;font-size:18px;font-weight:600;display:flex}.sg-app-launcher-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:13px;overflow:hidden}.sg-app-launcher-message{color:var(--ink-muted);margin:0;padding:8px;font-size:13px}.sg-app-launcher-tile{position:relative}.sg-app-launcher-app.locked .sg-app-launcher-tile{background:var(--ink-muted)}.sg-app-launcher-app.locked .sg-app-launcher-name{color:var(--ink-muted)}.sg-app-launcher-lock{border:2px solid var(--modal-bg);background:var(--modal-title-color);width:20px;height:20px;color:var(--modal-bg);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:-6px;right:-6px}.sg-visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sg-avatar{--avatar-size:32px;--avatar-bg:var(--sg-accent);--avatar-color:var(--sg-on-accent);box-sizing:border-box;width:var(--avatar-size);height:var(--avatar-size);object-fit:cover;background:var(--avatar-bg);color:var(--avatar-color);box-shadow:var(--sg-shadow-1);font-family:var(--font-family);font-size:calc(var(--avatar-size) * .42);-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:600;display:inline-flex}.sg-authenticator-button{font-size:.9rem;font-family:var(--font-family);border:1px solid var(--primary-border);border-radius:var(--radius);background:var(--primary-bg);color:var(--sg-text);cursor:pointer;padding:.4rem 1rem;transition:background .15s,border-color .15s}.sg-authenticator-button:hover{background:var(--primary-hover-bg);border-color:var(--ink-muted)}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;color:var(--sg-text);box-shadow:var(--sg-shadow-3);transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:var(--sg-text);transition:color .2s}.quadrato-header-username:hover{color:var(--accent)}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:var(--sg-danger);font-size:var(--primary-font);margin:0}.sg-color-picker{font-family:var(--font-family);position:relative}.sg-color-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;display:flex}.sg-color-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-color-picker-swatch{border:1px solid var(--sg-border-subtle);border-radius:4px;flex:none;width:18px;height:18px}.sg-color-picker-popover{z-index:30;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--shadow-1);width:170px;padding:10px;position:absolute;top:calc(100% + 4px);left:0}.sg-color-picker-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.sg-color-picker-swatch-button{border:1px solid var(--sg-border-subtle);cursor:pointer;border-radius:4px;width:20px;height:20px;padding:0}.sg-color-picker-swatch-button.active{border:2px solid var(--accent)}.sg-color-picker-custom{border-top:1px solid var(--input-border);color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;font-size:11px;display:flex}.sg-color-picker-custom input[type=color]{cursor:pointer;border:none;width:26px;height:20px;padding:0}.sg-font-picker{font-family:var(--font-family);position:relative}.sg-font-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.sg-font-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-font-picker-toggle-caret{opacity:.5;flex:none;font-size:10px}.sg-font-picker-list{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);max-height:260px;box-shadow:var(--shadow-1);z-index:30;margin:0;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.sg-font-picker-option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:15px;display:block}.sg-font-picker-option.active{background:var(--accent-soft)}.sg-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family);align-items:center;gap:6px;display:flex}.sg-toggle-input{opacity:0;width:1px;height:1px;position:absolute}.sg-toggle-track{background:var(--input-border);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s cubic-bezier(.4,0,.2,1);position:relative}.sg-toggle-input:checked+.sg-toggle-track{background:var(--accent)}.sg-toggle-thumb{background:var(--input-bg);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%;transition:left .15s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px}.sg-toggle-input:checked+.sg-toggle-track .sg-toggle-thumb{left:16px}.sg-toggle-input:focus-visible+.sg-toggle-track{outline:2px solid var(--accent-strong);outline-offset:2px}.sg-toggle-label{color:var(--ink-muted);white-space:nowrap;font-size:13px}.sg-toggle-icons{align-items:center;gap:4px;display:inline-flex}.sg-toggle--row{gap:12px;width:100%;margin:8px 0}.sg-toggle--row .sg-toggle-label{color:var(--sg-text);font-size:var(--primary-font);white-space:normal;flex:1;order:-2}.sg-toggle--row .sg-toggle-icons{order:-1}.sg-language-switcher{border:1px solid var(--input-border);border-radius:var(--input-radius);background:var(--input-bg);color:var(--sg-text);font-family:var(--font-family);font-size:var(--primary-font);cursor:pointer;padding:4px 8px}.sg-progress{--progress-height:8px;--progress-track:var(--sg-surface-hover);--progress-fill:var(--sg-accent);font-family:var(--font-family);align-items:center;gap:12px;display:flex}.sg-progress--sm{--progress-height:6px}.sg-progress--success{--progress-fill:var(--sg-success)}.sg-progress--danger{--progress-fill:var(--sg-danger)}.sg-progress-track{height:var(--progress-height);background:var(--progress-track);border-radius:999px;flex:1;overflow:hidden}.sg-progress-fill{background:var(--progress-fill);height:100%;transition:width .2s var(--button-ease-standard);border-radius:999px}.sg-progress-label{color:var(--sg-text-muted);white-space:nowrap;font-size:12px}.sg-status{--status-color:var(--sg-text-muted);--status-bg:var(--sg-surface-muted);color:var(--status-color);font-family:var(--font-family);font-size:var(--primary-font);align-items:center;gap:8px;margin:0;display:flex}.sg-status--error{--status-color:var(--sg-danger);--status-bg:var(--sg-danger-soft)}.sg-status--boxed{border-radius:var(--radius);background:var(--status-bg);padding:8px 12px}.sg-status-spinner{border:2px solid var(--sg-border);border-top-color:var(--sg-accent);border-radius:50%;flex:none;width:14px;height:14px;animation:.8s linear infinite sg-status-spin}@keyframes sg-status-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.sg-status-spinner{animation-duration:2.4s}}.sg-card{--card-bg:var(--sg-surface);--card-border:var(--sg-border-subtle);--card-radius:calc(var(--radius) * 2);--card-shadow:var(--sg-shadow-1);--card-shadow-hover:var(--sg-shadow-2);--card-padding:16px;box-sizing:border-box;padding:var(--card-padding);border:1px solid var(--card-border);border-radius:var(--card-radius);background:var(--card-bg);box-shadow:var(--card-shadow);color:var(--sg-text);font-family:var(--font-family);text-align:left;text-decoration:none;display:block}.sg-card--mini{--card-padding:8px 12px}.sg-card--interactive{cursor:pointer;transition:box-shadow .18s var(--button-ease-standard), transform .2s var(--button-ease-bounce), border-color .18s var(--button-ease-standard)}.sg-card--interactive:hover,.sg-card--interactive:focus-visible{box-shadow:var(--card-shadow-hover);border-color:var(--sg-accent);transform:translateY(-2px)}.sg-card-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;display:flex}.sg-card-actions{flex-wrap:wrap;gap:8px 16px;margin-top:12px;display:flex}.sg-card-actions a{color:var(--sg-link)}.sg-badge{--badge-bg:var(--sg-surface-muted);--badge-border:var(--sg-border);--badge-color:var(--sg-text);border:1px solid var(--badge-border);background:var(--badge-bg);color:var(--badge-color);font-family:var(--font-family);white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:3px 10px;font-size:13px;line-height:1.3;display:inline-flex}.sg-badge--accent,.sg-badge--selected{--badge-bg:var(--sg-accent-soft);--badge-border:var(--sg-accent);--badge-color:var(--sg-accent-strong)}.sg-badge--success{--badge-bg:var(--sg-success-soft);--badge-border:var(--sg-success);--badge-color:var(--sg-success)}.sg-badge--danger{--badge-bg:var(--sg-danger-soft);--badge-border:var(--sg-danger);--badge-color:var(--sg-danger)}.sg-badge:has(.sg-badge-toggle){transition:transform .2s var(--button-ease-bounce);padding:0}.sg-badge:has(.sg-badge-toggle):hover{transform:translateY(-1px)}.sg-badge-toggle{border-radius:inherit;color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;padding:3px 10px}.sg-badge:has(.sg-badge-remove){padding-right:3px}.sg-badge-remove{width:20px;height:20px;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:15px;line-height:1;display:inline-flex}.sg-badge-remove:hover{background:var(--sg-surface-hover)}.sg-confirm-message{max-width:420px;color:var(--sg-text);line-height:1.5}.sg-confirm-message>p{margin:0}.sg-textarea{resize:vertical;font-family:inherit;line-height:1.4}.sg-select{cursor:pointer;font-family:inherit}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{box-sizing:border-box;border-radius:var(--radius);border-style:solid;border-width:1px;border-color:var(--input-border);background-color:var(--input-bg);width:100%;color:var(--sg-text);font-size:var(--primary-font);padding:8px}.input-field--invalid{background-color:var(--sg-danger-soft);border-color:var(--sg-danger)}.sg-field{font-family:var(--font-family);flex-direction:column;gap:4px;margin-bottom:16px;display:flex}.sg-field .input-label,.sg-field .input-wrapper{margin-bottom:0}.sg-field-hint,.sg-field-error{margin:0;font-size:12px}.sg-field-hint{color:var(--sg-text-muted)}.sg-field-error{color:var(--sg-danger)}.sg-tabs{--tabs-gap:4px;gap:var(--tabs-gap);font-family:var(--font-family);-webkit-overflow-scrolling:touch;display:flex;overflow-x:auto}.sg-tab{color:var(--sg-text-muted);font:inherit;font-size:var(--primary-font);white-space:nowrap;cursor:pointer;transition:background .15s var(--button-ease-standard), color .15s var(--button-ease-standard);background:0 0;border:none;flex:none;padding:8px 16px}.sg-tab:disabled{opacity:.5;cursor:default}.sg-tab:focus-visible{outline:2px solid var(--sg-accent-strong);outline-offset:2px}.sg-tabs--underline{--tabs-gap:8px;border-bottom:1px solid var(--sg-border)}.sg-tabs--underline .sg-tab{border-bottom:2px solid #0000;margin-bottom:-1px}.sg-tabs--underline .sg-tab:hover:not(:disabled){color:var(--sg-text)}.sg-tabs--underline .sg-tab--active{border-bottom-color:var(--sg-accent-strong);color:var(--sg-accent-strong);font-weight:600}.sg-tabs--pills .sg-tab{background:var(--sg-surface-muted);color:var(--sg-text);border-radius:999px}.sg-tabs--pills .sg-tab:hover:not(:disabled):not(.sg-tab--active){background:var(--sg-surface-hover)}.sg-tabs--pills .sg-tab--active{background:var(--sg-accent);color:var(--sg-on-accent);box-shadow:var(--sg-shadow-1)}.sg-tabs--segmented{border:1px solid var(--sg-border);background:var(--sg-surface-muted);border-radius:999px;padding:4px}.sg-tabs--segmented .sg-tab{color:var(--sg-accent-strong);border-radius:999px;flex:1;padding:6px 16px;font-weight:600}.sg-tabs--segmented .sg-tab:hover:not(:disabled):not(.sg-tab--active){background:var(--sg-accent-soft)}.sg-tabs--segmented .sg-tab--active{background:var(--sg-accent);color:var(--sg-on-accent)}:root{--sg-color-white:#fff;--sg-color-black:#000;--sg-color-gray-50:#f5f5f5;--sg-color-gray-100:#e1e5e9;--sg-color-gray-150:#e0e0e0;--sg-color-gray-200:#e6e6e6;--sg-color-gray-300:#ccc;--sg-color-gray-350:#bdbdbd;--sg-color-gray-400:#9aa3b5;--sg-color-gray-500:#647089;--sg-color-gray-600:#555;--sg-color-gray-650:#444;--sg-color-gray-700:#333;--sg-color-gray-750:#2a2a2a;--sg-color-gray-800:#222;--sg-color-gray-900:#1a1a1a;--sg-color-blue-50:#e2e7f8;--sg-color-blue-300:#86aefc;--sg-color-blue-400:#6f9cf7;--sg-color-blue-500:#5480e6;--sg-color-blue-600:#3d5fc4;--sg-color-blue-700:#2e4aa0;--sg-color-sky-500:#1ea7fd;--sg-color-green-50:#e8f5e9;--sg-color-green-400:#66bb6a;--sg-color-green-700:#2e7d32;--sg-color-red-50:#ffe5e5;--sg-color-red-400:#e57373;--sg-color-red-600:#c0392b;--sg-bg:var(--sg-color-white);--sg-surface:var(--sg-color-white);--sg-surface-muted:var(--sg-color-gray-50);--sg-surface-hover:var(--sg-color-gray-150);--sg-border:var(--sg-color-gray-300);--sg-border-subtle:var(--sg-color-gray-100);--sg-text:var(--sg-color-gray-700);--sg-text-heading:var(--sg-color-gray-800);--sg-text-secondary:var(--sg-color-gray-600);--sg-text-muted:var(--sg-color-gray-500);--sg-accent:var(--sg-color-blue-600);--sg-accent-strong:var(--sg-color-blue-700);--sg-accent-soft:var(--sg-color-blue-50);--sg-on-accent:var(--sg-color-white);--sg-action:var(--sg-color-blue-400);--sg-action-hover:var(--sg-color-blue-500);--sg-link:var(--sg-color-sky-500);--sg-success:var(--sg-color-green-700);--sg-success-soft:var(--sg-color-green-50);--sg-danger:var(--sg-color-red-600);--sg-danger-soft:var(--sg-color-red-50);--sg-overlay:#0000004d;--sg-shadow-1:0 1px 2px #0f172a14, 0 1px 3px #0f172a0f;--sg-shadow-2:0 4px 12px #0f172a1f;--sg-shadow-3:0 2px 16px #00000026;--sg-action-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--unit:3px;--radius:calc(var(--unit) * 2);--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5);--primary-bg:var(--sg-surface-muted);--primary-border:var(--sg-border);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:var(--sg-surface-hover);--modal-bg:var(--sg-surface);--modal-overlay:var(--sg-overlay);--modal-title-color:var(--sg-text-heading);--input-bg:var(--sg-surface);--input-border:var(--sg-border);--input-radius:var(--radius);--input-font:1rem;--button-bg:var(--sg-action);--button-bg-hover:var(--sg-action-hover);--button-color:var(--sg-on-accent);--button-radius:999px;--button-shadow:var(--sg-action-shadow);--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--accent:var(--sg-accent);--accent-strong:var(--sg-accent-strong);--accent-soft:var(--sg-accent-soft);--ink-muted:var(--sg-text-muted);--shadow-1:var(--sg-shadow-1);--shadow-2:var(--sg-shadow-2)}:root[data-theme=dark]{--sg-bg:var(--sg-color-gray-900);--sg-surface:var(--sg-color-gray-800);--sg-surface-muted:var(--sg-color-gray-750);--sg-surface-hover:var(--sg-color-gray-700);--sg-border:var(--sg-color-gray-600);--sg-border-subtle:var(--sg-color-gray-650);--sg-text:var(--sg-color-gray-200);--sg-text-heading:var(--sg-color-white);--sg-text-secondary:var(--sg-color-gray-350);--sg-text-muted:var(--sg-color-gray-400);--sg-accent:var(--sg-color-blue-400);--sg-accent-strong:var(--sg-color-blue-300);--sg-accent-soft:#6f9cf72e;--sg-action-hover:var(--sg-color-blue-300);--sg-link:var(--sg-color-blue-300);--sg-success:var(--sg-color-green-400);--sg-success-soft:#66bb6a26;--sg-danger:var(--sg-color-red-400);--sg-danger-soft:#e5737326;--sg-overlay:#0009;--sg-shadow-1:0 1px 2px #0000004d, 0 1px 3px #0000003d;--sg-shadow-2:0 4px 12px #0006;--sg-shadow-3:0 2px 16px #00000080}.sg-table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.sg-table{--table-border:var(--sg-border-subtle);--table-head-bg:var(--sg-surface-muted);--table-row-hover:var(--sg-surface-muted);--table-cell-padding:8px 12px;border-collapse:collapse;width:100%;color:var(--sg-text);font-family:var(--font-family);font-size:var(--primary-font)}.sg-table th,.sg-table td{padding:var(--table-cell-padding);border-bottom:1px solid var(--table-border);text-align:left;vertical-align:top}.sg-table th{background:var(--table-head-bg);color:var(--sg-text-secondary);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;font-size:12px;font-weight:600}.sg-table tbody tr:hover{background:var(--table-row-hover)}.sg-table .sg-table-num{text-align:right;font-variant-numeric:tabular-nums}
+.custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.custom-button--secondary{--button-bg:var(--sg-surface);--button-bg-hover:var(--sg-surface-hover);--button-color:var(--sg-text);--button-shadow:none;border:1px solid var(--sg-border)}.custom-button--danger{--button-bg:var(--sg-danger);--button-bg-hover:var(--sg-danger);--button-color:var(--sg-on-accent)}.custom-button--danger:hover:not(:disabled){filter:brightness(.92)}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:var(--sg-text-secondary);justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:var(--sg-link);text-decoration:none}.footer a:hover{text-decoration:underline}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:var(--sg-text-secondary);z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:var(--sg-link);text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{background-color:var(--sg-surface);width:100%;color:var(--sg-text);border-bottom:1px solid var(--sg-border-subtle);box-shadow:var(--sg-shadow-1);z-index:100;font-size:var(--font-size);position:sticky;top:0}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:var(--sg-text);font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:var(--accent)}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.sg-access-gate{z-index:998;box-sizing:border-box;background:var(--primary-bg);font-family:var(--font-family);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.sg-access-gate-card{border:1px solid var(--primary-border);border-radius:calc(var(--radius) * 3);background:var(--modal-bg);max-width:420px;box-shadow:var(--shadow-2);color:var(--sg-text);text-align:center;padding:24px}.sg-access-gate-card h2{font-size:var(--font-size-h1);color:var(--modal-title-color);margin:0 0 12px}.sg-access-gate-card p{color:var(--ink-muted);margin:0 0 16px}.sg-access-gate-card .sg-access-gate-error{color:var(--sg-danger)}.sg-app-launcher{font-family:var(--font-family);position:relative}.sg-app-launcher-toggle{width:40px;height:40px;color:var(--ink-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.sg-app-launcher-toggle:hover,.sg-app-launcher-toggle[aria-expanded=true]{background:var(--primary-hover-bg)}.sg-app-launcher-panel{z-index:1000;box-sizing:border-box;border:1px solid var(--primary-border);border-radius:calc(var(--radius) * 3);background:var(--modal-bg);width:320px;max-width:calc(100vw - 24px);max-height:70vh;color:var(--sg-text);box-shadow:var(--shadow-2);padding:12px;position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto}.sg-app-launcher-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;display:grid}.sg-app-launcher-app{border-radius:var(--radius);color:inherit;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;text-decoration:none;display:flex}.sg-app-launcher-app:hover,.sg-app-launcher-app:focus-visible{background:var(--primary-hover-bg)}.sg-app-launcher-app.current{background:var(--accent-soft)}.sg-app-launcher-tile{border-radius:var(--radius);background:var(--accent);width:40px;height:40px;color:var(--sg-on-accent);justify-content:center;align-items:center;font-size:18px;font-weight:600;display:flex}.sg-app-launcher-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:13px;overflow:hidden}.sg-app-launcher-message{color:var(--ink-muted);margin:0;padding:8px;font-size:13px}.sg-app-launcher-tile{position:relative}.sg-app-launcher-app.locked .sg-app-launcher-tile{background:var(--ink-muted)}.sg-app-launcher-app.locked .sg-app-launcher-name{color:var(--ink-muted)}.sg-app-launcher-lock{border:2px solid var(--modal-bg);background:var(--modal-title-color);width:20px;height:20px;color:var(--modal-bg);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:-6px;right:-6px}.sg-visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sg-avatar{--avatar-size:32px;--avatar-bg:var(--sg-accent);--avatar-color:var(--sg-on-accent);box-sizing:border-box;width:var(--avatar-size);height:var(--avatar-size);object-fit:cover;background:var(--avatar-bg);color:var(--avatar-color);box-shadow:var(--sg-shadow-1);font-family:var(--font-family);font-size:calc(var(--avatar-size) * .42);-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:600;display:inline-flex}.sg-authenticator-button{font-size:.9rem;font-family:var(--font-family);border:1px solid var(--primary-border);border-radius:var(--radius);background:var(--primary-bg);color:var(--sg-text);cursor:pointer;padding:.4rem 1rem;transition:background .15s,border-color .15s}.sg-authenticator-button:hover{background:var(--primary-hover-bg);border-color:var(--ink-muted)}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;color:var(--sg-text);box-shadow:var(--sg-shadow-3);transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:var(--sg-text);transition:color .2s}.quadrato-header-username:hover{color:var(--accent)}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:var(--sg-danger);font-size:var(--primary-font);margin:0}.sg-color-picker{font-family:var(--font-family);position:relative}.sg-color-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;display:flex}.sg-color-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-color-picker-swatch{border:1px solid var(--sg-border-subtle);border-radius:4px;flex:none;width:18px;height:18px}.sg-color-picker-popover{z-index:30;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--shadow-1);width:170px;padding:10px;position:absolute;top:calc(100% + 4px);left:0}.sg-color-picker-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.sg-color-picker-swatch-button{border:1px solid var(--sg-border-subtle);cursor:pointer;border-radius:4px;width:20px;height:20px;padding:0}.sg-color-picker-swatch-button.active{border:2px solid var(--accent)}.sg-color-picker-custom{border-top:1px solid var(--input-border);color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;font-size:11px;display:flex}.sg-color-picker-custom input[type=color]{cursor:pointer;border:none;width:26px;height:20px;padding:0}.sg-font-picker{font-family:var(--font-family);position:relative}.sg-font-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.sg-font-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-font-picker-toggle-caret{opacity:.5;flex:none;font-size:10px}.sg-font-picker-list{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);max-height:260px;box-shadow:var(--shadow-1);z-index:30;margin:0;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.sg-font-picker-option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:15px;display:block}.sg-font-picker-option.active{background:var(--accent-soft)}.sg-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family);align-items:center;gap:6px;display:flex}.sg-toggle-input{opacity:0;width:1px;height:1px;position:absolute}.sg-toggle-track{background:var(--input-border);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s cubic-bezier(.4,0,.2,1);position:relative}.sg-toggle-input:checked+.sg-toggle-track{background:var(--accent)}.sg-toggle-thumb{background:var(--input-bg);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%;transition:left .15s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px}.sg-toggle-input:checked+.sg-toggle-track .sg-toggle-thumb{left:16px}.sg-toggle-input:focus-visible+.sg-toggle-track{outline:2px solid var(--accent-strong);outline-offset:2px}.sg-toggle-label{color:var(--ink-muted);white-space:nowrap;font-size:13px}.sg-toggle-icons{align-items:center;gap:4px;display:inline-flex}.sg-toggle--row{gap:12px;width:100%;margin:8px 0}.sg-toggle--row .sg-toggle-label{color:var(--sg-text);font-size:var(--primary-font);white-space:normal;flex:1;order:-2}.sg-toggle--row .sg-toggle-icons{order:-1}.sg-language-switcher{border:1px solid var(--input-border);border-radius:var(--input-radius);background:var(--input-bg);color:var(--sg-text);font-family:var(--font-family);font-size:var(--primary-font);cursor:pointer;padding:4px 8px}.sg-progress{--progress-height:8px;--progress-track:var(--sg-surface-hover);--progress-fill:var(--sg-accent);font-family:var(--font-family);align-items:center;gap:12px;display:flex}.sg-progress--sm{--progress-height:6px}.sg-progress--success{--progress-fill:var(--sg-success)}.sg-progress--danger{--progress-fill:var(--sg-danger)}.sg-progress-track{height:var(--progress-height);background:var(--progress-track);border-radius:999px;flex:1;overflow:hidden}.sg-progress-fill{background:var(--progress-fill);height:100%;transition:width .2s var(--button-ease-standard);border-radius:999px}.sg-progress-label{color:var(--sg-text-muted);white-space:nowrap;font-size:12px}.sg-status{--status-color:var(--sg-text-muted);--status-bg:var(--sg-surface-muted);color:var(--status-color);font-family:var(--font-family);font-size:var(--primary-font);align-items:center;gap:8px;margin:0;display:flex}.sg-status--error{--status-color:var(--sg-danger);--status-bg:var(--sg-danger-soft)}.sg-status--boxed{border-radius:var(--radius);background:var(--status-bg);padding:8px 12px}.sg-status-spinner{border:2px solid var(--sg-border);border-top-color:var(--sg-accent);border-radius:50%;flex:none;width:14px;height:14px;animation:.8s linear infinite sg-status-spin}@keyframes sg-status-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.sg-status-spinner{animation-duration:2.4s}}.sg-card{--card-bg:var(--sg-surface);--card-border:var(--sg-border-subtle);--card-radius:calc(var(--radius) * 2);--card-shadow:var(--sg-shadow-1);--card-shadow-hover:var(--sg-shadow-2);--card-padding:16px;box-sizing:border-box;padding:var(--card-padding);border:1px solid var(--card-border);border-radius:var(--card-radius);background:var(--card-bg);box-shadow:var(--card-shadow);color:var(--sg-text);font-family:var(--font-family);text-align:left;text-decoration:none;display:block}.sg-card--mini{--card-padding:8px 12px}.sg-card--interactive{cursor:pointer;transition:box-shadow .18s var(--button-ease-standard), transform .2s var(--button-ease-bounce), border-color .18s var(--button-ease-standard)}.sg-card--interactive:hover,.sg-card--interactive:focus-visible{box-shadow:var(--card-shadow-hover);border-color:var(--sg-accent);transform:translateY(-2px)}.sg-card-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;display:flex}.sg-card-actions{flex-wrap:wrap;gap:8px 16px;margin-top:12px;display:flex}.sg-card-actions a{color:var(--sg-link)}.sg-badge{--badge-bg:var(--sg-surface-muted);--badge-border:var(--sg-border);--badge-color:var(--sg-text);border:1px solid var(--badge-border);background:var(--badge-bg);color:var(--badge-color);font-family:var(--font-family);white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:3px 10px;font-size:13px;line-height:1.3;display:inline-flex}.sg-badge--accent,.sg-badge--selected{--badge-bg:var(--sg-accent-soft);--badge-border:var(--sg-accent);--badge-color:var(--sg-accent-strong)}.sg-badge--success{--badge-bg:var(--sg-success-soft);--badge-border:var(--sg-success);--badge-color:var(--sg-success)}.sg-badge--danger{--badge-bg:var(--sg-danger-soft);--badge-border:var(--sg-danger);--badge-color:var(--sg-danger)}.sg-badge:has(.sg-badge-toggle){transition:transform .2s var(--button-ease-bounce);padding:0}.sg-badge:has(.sg-badge-toggle):hover{transform:translateY(-1px)}.sg-badge-toggle{border-radius:inherit;color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;padding:3px 10px}.sg-badge:has(.sg-badge-remove){padding-right:3px}.sg-badge-remove{width:20px;height:20px;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:15px;line-height:1;display:inline-flex}.sg-badge-remove:hover{background:var(--sg-surface-hover)}.sg-confirm-message{max-width:420px;color:var(--sg-text);line-height:1.5}.sg-confirm-message>p{margin:0}.sg-textarea{resize:vertical;font-family:inherit;line-height:1.4}.sg-select{cursor:pointer;font-family:inherit}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{box-sizing:border-box;border-radius:var(--radius);border-style:solid;border-width:1px;border-color:var(--input-border);background-color:var(--input-bg);width:100%;color:var(--sg-text);font-size:var(--primary-font);padding:8px}.input-field--invalid,.input-field[aria-invalid=true]{background-color:var(--sg-danger-soft);border-color:var(--sg-danger)}.sg-field{font-family:var(--font-family);flex-direction:column;gap:4px;margin-bottom:16px;display:flex}.sg-field .input-label,.sg-field .input-wrapper{margin-bottom:0}.sg-field-hint,.sg-field-error{margin:0;font-size:12px}.sg-field-hint{color:var(--sg-text-muted)}.sg-field-error{color:var(--sg-danger)}.sg-tabs{--tabs-gap:4px;gap:var(--tabs-gap);font-family:var(--font-family);-webkit-overflow-scrolling:touch;display:flex;overflow-x:auto}.sg-tab{color:var(--sg-text-muted);font:inherit;font-size:var(--primary-font);white-space:nowrap;cursor:pointer;transition:background .15s var(--button-ease-standard), color .15s var(--button-ease-standard);background:0 0;border:none;flex:none;padding:8px 16px}.sg-tab:disabled{opacity:.5;cursor:default}.sg-tab:focus-visible{outline:2px solid var(--sg-accent-strong);outline-offset:2px}.sg-tabs--underline{--tabs-gap:8px;border-bottom:1px solid var(--sg-border)}.sg-tabs--underline .sg-tab{border-bottom:2px solid #0000;margin-bottom:-1px}.sg-tabs--underline .sg-tab:hover:not(:disabled){color:var(--sg-text)}.sg-tabs--underline .sg-tab--active{border-bottom-color:var(--sg-accent-strong);color:var(--sg-accent-strong);font-weight:600}.sg-tabs--pills .sg-tab{background:var(--sg-surface-muted);color:var(--sg-text);border-radius:999px}.sg-tabs--pills .sg-tab:hover:not(:disabled):not(.sg-tab--active){background:var(--sg-surface-hover)}.sg-tabs--pills .sg-tab--active{background:var(--sg-accent);color:var(--sg-on-accent);box-shadow:var(--sg-shadow-1)}.sg-tabs--segmented{border:1px solid var(--sg-border);background:var(--sg-surface-muted);border-radius:999px;padding:4px}.sg-tabs--segmented .sg-tab{color:var(--sg-accent-strong);border-radius:999px;flex:1;padding:6px 16px;font-weight:600}.sg-tabs--segmented .sg-tab:hover:not(:disabled):not(.sg-tab--active){background:var(--sg-accent-soft)}.sg-tabs--segmented .sg-tab--active{background:var(--sg-accent);color:var(--sg-on-accent)}.sg-table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.sg-table{--table-border:var(--sg-border-subtle);--table-head-bg:var(--sg-surface-muted);--table-row-hover:var(--sg-surface-muted);--table-cell-padding:8px 12px;border-collapse:collapse;width:100%;color:var(--sg-text);font-family:var(--font-family);font-size:var(--primary-font)}.sg-table th,.sg-table td{padding:var(--table-cell-padding);border-bottom:1px solid var(--table-border);text-align:left;vertical-align:top}.sg-table th{background:var(--table-head-bg);color:var(--sg-text-secondary);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;font-size:12px;font-weight:600}.sg-table tbody tr:hover{background:var(--table-row-hover)}.sg-table .sg-table-num{text-align:right;font-variant-numeric:tabular-nums}.sg-version{color:var(--sg-text-muted);font-family:var(--font-family);text-align:center;margin:16px 0 0;font-size:12px}.sg-login-prompt{color:var(--sg-text-muted);font-family:var(--font-family);text-align:center;flex-direction:column;align-items:center;gap:16px;padding:48px 16px;display:flex}.sg-login-prompt-message{max-width:420px;font-size:var(--primary-font);margin:0;line-height:1.5}.sg-login-prompt-footer{font-size:13px}.sg-login-prompt-footer a{color:var(--sg-link)}.sg-auth-page{box-sizing:border-box;font-family:var(--font-family);flex-direction:column;align-items:center;gap:16px;padding:48px 16px;display:flex}.sg-auth-page-card{box-sizing:border-box;border:1px solid var(--sg-border-subtle);border-radius:calc(var(--radius) * 2);background:var(--sg-surface);width:100%;max-width:400px;box-shadow:var(--sg-shadow-1);color:var(--sg-text);padding:24px}.sg-auth-page-card p{margin:0 0 12px;line-height:1.5}.sg-auth-page-title{color:var(--sg-text-heading);font-size:var(--font-size-h1);margin:0 0 16px}.sg-auth-page-footer{font-size:13px}.sg-auth-page-footer a{color:var(--sg-link)}:root{--sg-color-white:#fff;--sg-color-black:#000;--sg-color-gray-50:#f5f5f5;--sg-color-gray-100:#e1e5e9;--sg-color-gray-150:#e0e0e0;--sg-color-gray-200:#e6e6e6;--sg-color-gray-300:#ccc;--sg-color-gray-350:#bdbdbd;--sg-color-gray-400:#9aa3b5;--sg-color-gray-500:#647089;--sg-color-gray-600:#555;--sg-color-gray-650:#444;--sg-color-gray-700:#333;--sg-color-gray-750:#2a2a2a;--sg-color-gray-800:#222;--sg-color-gray-900:#1a1a1a;--sg-color-blue-50:#e2e7f8;--sg-color-blue-300:#86aefc;--sg-color-blue-400:#6f9cf7;--sg-color-blue-500:#5480e6;--sg-color-blue-600:#3d5fc4;--sg-color-blue-700:#2e4aa0;--sg-color-sky-500:#1ea7fd;--sg-color-green-50:#e8f5e9;--sg-color-green-400:#66bb6a;--sg-color-green-700:#2e7d32;--sg-color-red-50:#ffe5e5;--sg-color-red-400:#e57373;--sg-color-red-600:#c0392b;--sg-bg:var(--sg-color-white);--sg-surface:var(--sg-color-white);--sg-surface-muted:var(--sg-color-gray-50);--sg-surface-hover:var(--sg-color-gray-150);--sg-border:var(--sg-color-gray-300);--sg-border-subtle:var(--sg-color-gray-100);--sg-text:var(--sg-color-gray-700);--sg-text-heading:var(--sg-color-gray-800);--sg-text-secondary:var(--sg-color-gray-600);--sg-text-muted:var(--sg-color-gray-500);--sg-accent:var(--sg-color-blue-600);--sg-accent-strong:var(--sg-color-blue-700);--sg-accent-soft:var(--sg-color-blue-50);--sg-on-accent:var(--sg-color-white);--sg-action:var(--sg-color-blue-400);--sg-action-hover:var(--sg-color-blue-500);--sg-link:var(--sg-color-sky-500);--sg-success:var(--sg-color-green-700);--sg-success-soft:var(--sg-color-green-50);--sg-danger:var(--sg-color-red-600);--sg-danger-soft:var(--sg-color-red-50);--sg-overlay:#0000004d;--sg-shadow-1:0 1px 2px #0f172a14, 0 1px 3px #0f172a0f;--sg-shadow-2:0 4px 12px #0f172a1f;--sg-shadow-3:0 2px 16px #00000026;--sg-action-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--unit:3px;--radius:calc(var(--unit) * 2);--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5);--primary-bg:var(--sg-surface-muted);--primary-border:var(--sg-border);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:var(--sg-surface-hover);--modal-bg:var(--sg-surface);--modal-overlay:var(--sg-overlay);--modal-title-color:var(--sg-text-heading);--input-bg:var(--sg-surface);--input-border:var(--sg-border);--input-radius:var(--radius);--input-font:1rem;--button-bg:var(--sg-action);--button-bg-hover:var(--sg-action-hover);--button-color:var(--sg-on-accent);--button-radius:999px;--button-shadow:var(--sg-action-shadow);--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--accent:var(--sg-accent);--accent-strong:var(--sg-accent-strong);--accent-soft:var(--sg-accent-soft);--ink-muted:var(--sg-text-muted);--shadow-1:var(--sg-shadow-1);--shadow-2:var(--sg-shadow-2)}:root[data-theme=dark]{--sg-bg:var(--sg-color-gray-900);--sg-surface:var(--sg-color-gray-800);--sg-surface-muted:var(--sg-color-gray-750);--sg-surface-hover:var(--sg-color-gray-700);--sg-border:var(--sg-color-gray-600);--sg-border-subtle:var(--sg-color-gray-650);--sg-text:var(--sg-color-gray-200);--sg-text-heading:var(--sg-color-white);--sg-text-secondary:var(--sg-color-gray-350);--sg-text-muted:var(--sg-color-gray-400);--sg-accent:var(--sg-color-blue-400);--sg-accent-strong:var(--sg-color-blue-300);--sg-accent-soft:#6f9cf72e;--sg-action-hover:var(--sg-color-blue-300);--sg-link:var(--sg-color-blue-300);--sg-success:var(--sg-color-green-400);--sg-success-soft:#66bb6a26;--sg-danger:var(--sg-color-red-400);--sg-danger-soft:#e5737326;--sg-overlay:#0009;--sg-shadow-1:0 1px 2px #0000004d, 0 1px 3px #0000003d;--sg-shadow-2:0 4px 12px #0006;--sg-shadow-3:0 2px 16px #00000080}.sg-register-form{flex-direction:column;display:flex}.sg-register-form .custom-button{width:100%}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensorario/sg-components",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "type": "module",
   "private": false,
   "scripts": {