@declarion/react 0.66.1 → 0.80.0

package/dist-lib/components/pages/auth/AuthShell.js

@@ -2,39 +2,40 @@ import { Icon as e } from "../../primitives/Icons.js";
 import { IconBtn as t } from "../../primitives/IconBtn.js";
 import { useText as n } from "../../../hooks/useText.js";
 import { useResponsiveMode as r } from "../../../hooks/useResponsiveMode.js";
-import { BrandLogo as i } from "../../primitives/BrandLogo.js";
-import { usePublicParams as a } from "../../../hooks/useParams.js";
-import { useBranding as o } from "../../../hooks/useBranding.js";
-import { usePreferencesStore as s } from "../../../stores/preferences.js";
-import { pageInsetX as c } from "../../../lib/page-inset.js";
-import { useEffect as l, useMemo as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { isValidLogoUrl as i } from "../../../lib/branding.js";
+import { BrandLogo as a } from "../../primitives/BrandLogo.js";
+import { usePublicParams as o } from "../../../hooks/useParams.js";
+import { useBranding as s } from "../../../hooks/useBranding.js";
+import { usePreferencesStore as c } from "../../../stores/preferences.js";
+import { pageInsetX as l } from "../../../lib/page-inset.js";
+import { useEffect as u, useMemo as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/pages/auth/AuthShell.tsx
-var m = 560;
-function h(e) {
+var h = 560;
+function g(e) {
 	try {
 		return new URL(e).host;
 	} catch {
 		return e;
 	}
 }
-function g(e, t) {
+function _(e, t) {
 	if (!e) return "";
 	let n = t ? t.slice(0, 7) : "";
 	if (!n || !t) return e;
 	let r = Math.min(e.length, t.length);
 	return e.slice(0, r) === t.slice(0, r) ? e : `${e}+${n}`;
 }
-function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x, badges: S, brandName: C }) {
-	let w = n(), T = s((e) => e.colorScheme), E = r(), D = s((e) => e.set), O = s((e) => e.hydrateFromBranding), k = () => D("colorScheme", T === "dark" ? "light" : "dark"), { branding: A } = o(), j = A?.chrome?.auth?.brand_panel;
-	l(() => {
+function v({ children: v, tenantSlug: y, tagline: b, subTagline: x, version: S, badges: C, brandName: ee }) {
+	let w = n(), T = c((e) => e.colorScheme), E = r(), D = c((e) => e.set), O = c((e) => e.hydrateFromBranding), k = () => D("colorScheme", T === "dark" ? "light" : "dark"), { branding: A } = s(), j = A?.chrome?.auth?.brand_panel;
+	u(() => {
 		O(A?.preferences);
 	}, [A, O]);
-	let M = A?.identity, N = C ?? M?.wordmark ?? M?.app_name ?? "", P = y ?? w(M?.auth_tagline), F = b ?? w(M?.auth_subtagline), I = x ?? M?.version_label ?? "", L = u(() => S && S.length ? S : (M?.auth_badges ?? []).map((e) => w(e)).filter(Boolean).slice(0, 8).map((e) => [e, "shield"]), [
-		S,
+	let M = A?.identity, N = ee ?? M?.wordmark ?? M?.app_name ?? "", P = b ?? w(M?.auth_tagline), F = x ?? w(M?.auth_subtagline), I = S ?? M?.version_label ?? "", L = d(() => C && C.length ? C : (M?.auth_badges ?? []).map((e) => w(e)).filter(Boolean).slice(0, 8).map((e) => [e, "shield"]), [
+		C,
 		M?.auth_badges,
 		w
-	]), R = M?.workspace_domain ?? "", z = !!(v && R), B = M?.status_url ?? "", V = !!B, H = M?.legal_links, U = u(() => [
+	]), R = M?.workspace_domain ?? "", z = !!(y && R), B = M?.status_url ?? "", V = !!B, H = M?.legal_links, U = d(() => [
 		[w("auth.footer.security", "Security"), H?.security_url ?? ""],
 		[w("auth.footer.privacy", "Privacy"), H?.privacy_url ?? ""],
 		[w("auth.footer.terms", "Terms"), H?.terms_url ?? ""],
@@ -45,7 +46,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 		H?.terms_url,
 		H?.docs_url,
 		w
-	]), W = M?.legal_entity ?? "", G = `© ${(/* @__PURE__ */ new Date()).getFullYear()}${W ? ` ${W}` : ""}`, { data: K } = a(), q = K?.meta, J = g(q?.version, q?.revision), Y = [q?.region ? w("auth.meta.region", "Region: {value}", { value: q.region }) : "", J ? w("auth.meta.build", "Build {value}", { value: J }) : ""].filter(Boolean).join(" · "), X = E.isPhone || E.height < m, Z = j !== "end", Q = !X && /* @__PURE__ */ p("div", {
+	]), W = M?.legal_entity ?? "", G = `© ${(/* @__PURE__ */ new Date()).getFullYear()}${W ? ` ${W}` : ""}`, { data: K } = o(), q = K?.meta, J = _(q?.version, q?.revision), Y = [q?.region ? w("auth.meta.region", "Region: {value}", { value: q.region }) : "", J ? w("auth.meta.build", "Build {value}", { value: J }) : ""].filter(Boolean).join(" · "), X = E.isPhone || E.height < h, Z = j !== "end", Q = i(M?.app_logo_on_accent) ? M?.app_logo_on_accent : M?.app_logo, $ = !X && /* @__PURE__ */ m("div", {
 		"data-testid": "auth-brand-panel",
 		style: {
 			padding: "36px 36px 28px",
@@ -57,7 +58,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 			overflow: "hidden"
 		},
 		children: [
-			/* @__PURE__ */ f("div", { style: {
+			/* @__PURE__ */ p("div", { style: {
 				position: "absolute",
 				top: -80,
 				right: -80,
@@ -66,7 +67,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 				borderRadius: "50%",
 				background: "radial-gradient(circle, var(--auth-panel-glow-1) 0%, transparent 70%)"
 			} }),
-			/* @__PURE__ */ f("div", { style: {
+			/* @__PURE__ */ p("div", { style: {
 				position: "absolute",
 				bottom: -60,
 				left: -40,
@@ -75,7 +76,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 				borderRadius: "50%",
 				background: "radial-gradient(circle, var(--auth-panel-glow-2) 0%, transparent 70%)"
 			} }),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				style: {
 					display: "flex",
 					alignItems: "center",
@@ -83,11 +84,11 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 					position: "relative"
 				},
 				children: [
-					/* @__PURE__ */ f(i, {
-						appLogo: M?.app_logo,
+					/* @__PURE__ */ p(a, {
+						appLogo: Q,
 						size: 34
 					}),
-					N && /* @__PURE__ */ f("span", {
+					N && /* @__PURE__ */ p("span", {
 						style: {
 							fontSize: 18,
 							fontWeight: 600,
@@ -95,7 +96,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 						},
 						children: N
 					}),
-					I && /* @__PURE__ */ f("span", {
+					I && /* @__PURE__ */ p("span", {
 						className: "mono",
 						style: {
 							fontSize: 10,
@@ -108,7 +109,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 					})
 				]
 			}),
-			(M?.app_logo || N) && /* @__PURE__ */ p("div", {
+			(Q || N) && /* @__PURE__ */ m("div", {
 				style: {
 					marginTop: 48,
 					position: "relative",
@@ -117,11 +118,11 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 					alignItems: "center",
 					gap: 16
 				},
-				children: [M?.app_logo && /* @__PURE__ */ f(i, {
-					appLogo: M.app_logo,
+				children: [Q && /* @__PURE__ */ p(a, {
+					appLogo: Q,
 					size: 96,
 					radius: 0
-				}), N && /* @__PURE__ */ f("span", {
+				}), N && /* @__PURE__ */ p("span", {
 					style: {
 						fontSize: 28,
 						fontWeight: 600,
@@ -131,13 +132,13 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 					children: N
 				})]
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				style: {
 					marginTop: "auto",
 					position: "relative"
 				},
 				children: [
-					P && /* @__PURE__ */ f("h1", {
+					P && /* @__PURE__ */ p("h1", {
 						style: {
 							margin: 0,
 							fontSize: 26,
@@ -147,7 +148,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 						},
 						children: P
 					}),
-					F && /* @__PURE__ */ f("p", {
+					F && /* @__PURE__ */ p("p", {
 						style: {
 							margin: "10px 0 0",
 							fontSize: 13,
@@ -156,7 +157,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 						},
 						children: F
 					}),
-					L.length > 0 && /* @__PURE__ */ f("div", {
+					L.length > 0 && /* @__PURE__ */ p("div", {
 						style: {
 							marginTop: 22,
 							display: "grid",
@@ -167,20 +168,20 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 						},
 						children: L.map(([t, n]) => {
 							let r = e[n];
-							return /* @__PURE__ */ p("div", {
+							return /* @__PURE__ */ m("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									gap: 6
 								},
-								children: [r && /* @__PURE__ */ f(r, {
+								children: [r && /* @__PURE__ */ p(r, {
 									size: 12,
-									style: { color: "var(--accent-hover)" }
-								}), /* @__PURE__ */ f("span", { children: t })]
+									style: { color: "var(--auth-panel-fg)" }
+								}), /* @__PURE__ */ p("span", { children: t })]
 							}, t);
 						})
 					}),
-					V && /* @__PURE__ */ f("a", {
+					V && /* @__PURE__ */ p("a", {
 						href: B,
 						target: "_blank",
 						rel: "noopener noreferrer",
@@ -198,13 +199,13 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 							color: "var(--auth-panel-fg-muted)",
 							textDecoration: "none"
 						},
-						children: h(B)
+						children: g(B)
 					})
 				]
 			})
 		]
 	});
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		style: {
 			minHeight: "var(--app-height)",
 			background: "var(--background)",
@@ -214,11 +215,11 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 			overflowX: "hidden"
 		},
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				style: {
 					paddingTop: X ? 12 : 16,
 					paddingBottom: X ? 12 : 16,
-					...X ? c(14) : {
+					...X ? l(14) : {
 						paddingLeft: 20,
 						paddingRight: 20
 					},
@@ -227,11 +228,11 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 					gap: 10
 				},
 				children: [
-					/* @__PURE__ */ f(i, {
+					/* @__PURE__ */ p(a, {
 						appLogo: M?.app_logo,
 						size: 26
 					}),
-					N && /* @__PURE__ */ f("span", {
+					N && /* @__PURE__ */ p("span", {
 						style: {
 							fontSize: 14,
 							fontWeight: 600,
@@ -243,7 +244,7 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 						},
 						children: N
 					}),
-					z && /* @__PURE__ */ p("span", {
+					z && /* @__PURE__ */ m("span", {
 						className: "mono",
 						style: {
 							marginLeft: 6,
@@ -255,20 +256,20 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 							borderRadius: "var(--radius-sm)"
 						},
 						children: [
-							v,
+							y,
 							".",
 							R
 						]
 					}),
-					/* @__PURE__ */ f("div", { style: { flex: 1 } }),
-					/* @__PURE__ */ f(t, {
-						icon: f(T === "dark" ? e.sun : e.moon, { size: 14 }),
+					/* @__PURE__ */ p("div", { style: { flex: 1 } }),
+					/* @__PURE__ */ p(t, {
+						icon: p(T === "dark" ? e.sun : e.moon, { size: 14 }),
 						onClick: k,
 						title: w("auth.toggle_theme", "Toggle theme")
 					})
 				]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				style: {
 					flex: 1,
 					display: "flex",
@@ -276,20 +277,20 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 					justifyContent: "center",
 					paddingTop: X ? 16 : 20,
 					paddingBottom: X ? 12 : 20,
-					...X ? c(12) : {
+					...X ? l(12) : {
 						paddingLeft: 20,
 						paddingRight: 20
 					},
 					minWidth: 0
 				},
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ m("div", {
 					style: {
 						display: "grid",
 						gridTemplateColumns: X ? "minmax(0, 1fr)" : "1fr 1fr",
 						gap: 0,
 						width: X ? "100%" : 980,
 						maxWidth: "100%",
-						minHeight: X ? "auto" : m,
+						minHeight: X ? "auto" : h,
 						background: "var(--surface)",
 						border: "1px solid var(--border)",
 						borderRadius: X ? "var(--radius-lg)" : "var(--radius-xl)",
@@ -297,8 +298,8 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 						boxShadow: X ? "var(--shadow-sm)" : "var(--shadow-lg)"
 					},
 					children: [
-						Z && Q,
-						/* @__PURE__ */ f("div", {
+						Z && $,
+						/* @__PURE__ */ p("div", {
 							"data-testid": "auth-form-panel",
 							style: {
 								padding: X ? "28px 20px 24px" : "36px 40px",
@@ -307,13 +308,13 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 								justifyContent: "center",
 								minWidth: 0
 							},
-							children: _
+							children: v
 						}),
-						!Z && Q
+						!Z && $
 					]
 				})
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				style: {
 					padding: X ? "12px 14px calc(12px + var(--safe-area-bottom))" : "14px 20px",
 					display: "flex",
@@ -325,15 +326,15 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 					minWidth: 0
 				},
 				children: [
-					/* @__PURE__ */ f("span", { children: G }),
-					U.map(([e, t]) => /* @__PURE__ */ f("a", {
+					/* @__PURE__ */ p("span", { children: G }),
+					U.map(([e, t]) => /* @__PURE__ */ p("a", {
 						href: t,
 						target: "_blank",
 						rel: "noopener noreferrer",
 						style: { color: "inherit" },
 						children: e
 					}, e)),
-					Y && /* @__PURE__ */ p(d, { children: [!X && /* @__PURE__ */ f("div", { style: { flex: 1 } }), /* @__PURE__ */ f("span", {
+					Y && /* @__PURE__ */ m(f, { children: [!X && /* @__PURE__ */ p("div", { style: { flex: 1 } }), /* @__PURE__ */ p("span", {
 						className: "mono",
 						style: {
 							maxWidth: "100%",
@@ -347,4 +348,4 @@ function _({ children: _, tenantSlug: v, tagline: y, subTagline: b, version: x,
 	});
 }
 //#endregion
-export { _ as AuthShell, g as formatBuildLabel };
+export { v as AuthShell, _ as formatBuildLabel };

package/dist-lib/components/pages/auth/CodeInput.js

@@ -0,0 +1,63 @@
+import { useResponsiveMode as e } from "../../../hooks/useResponsiveMode.js";
+import { useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+function r({ value: r, onChange: i, label: a }) {
+	let o = t([]), s = e().isPhone, c = r.padEnd(6, " ").slice(0, 6).split("");
+	function l(e) {
+		o.current[e]?.focus(), o.current[e]?.select();
+	}
+	function u(e, t) {
+		let n = t.replace(/\D/g, "").slice(-1);
+		i(c.map((t, r) => r === e ? n || " " : t).join("").trimEnd()), n && e < 5 && l(e + 1);
+	}
+	function d(e, t) {
+		t.key === "Backspace" && c[e] === " " && e > 0 && l(e - 1);
+	}
+	function f(e) {
+		let t = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
+		t && (e.preventDefault(), i(t), l(Math.min(t.length, 5)));
+	}
+	return /* @__PURE__ */ n("div", {
+		role: "group",
+		"aria-label": a,
+		style: {
+			display: "grid",
+			gridTemplateColumns: "repeat(6, minmax(0, 44px))",
+			gap: s ? 6 : 8,
+			justifyContent: "center",
+			margin: "20px 0",
+			width: "100%",
+			maxWidth: "100%"
+		},
+		children: c.map((e, t) => /* @__PURE__ */ n("input", {
+			ref: (e) => {
+				o.current[t] = e;
+			},
+			value: e.trim(),
+			"aria-label": `${a} ${t + 1}`,
+			maxLength: 1,
+			inputMode: "numeric",
+			autoComplete: t === 0 ? "one-time-code" : "off",
+			autoFocus: t === 0,
+			onChange: (e) => u(t, e.target.value),
+			onKeyDown: (e) => d(t, e),
+			onPaste: f,
+			style: {
+				width: "100%",
+				minWidth: 0,
+				height: s ? 48 : 52,
+				textAlign: "center",
+				fontSize: s ? 20 : 22,
+				fontWeight: 600,
+				background: "var(--surface-2)",
+				border: "1px solid var(--border)",
+				borderRadius: "var(--radius-md)",
+				outline: "none",
+				color: "var(--text)",
+				fontFamily: "var(--font-mono)"
+			}
+		}, t))
+	});
+}
+//#endregion
+export { r as CodeInput };

package/dist-lib/components/pages/auth/SignIn.js

@@ -1,5 +1,5 @@
 import { sanitizeRedirectPath as e } from "../../../api/auth-redirect.js";
-import { checkSetup as t, listSSOProviders as n, ssoAuthorizeUrl as r } from "../../../api/auth.js";
+import { checkSetup as t, listIdentityProviders as n, ssoAuthorizeUrl as r } from "../../../api/auth.js";
 import { useSchema as i } from "../../../hooks/useSchema.js";
 import { Icon as a } from "../../primitives/Icons.js";
 import { Btn as o } from "../../primitives/Btn.js";
@@ -29,6 +29,14 @@ var O = "sso-failure", k = {
 	azure: {
 		name: "Microsoft",
 		icon: /* @__PURE__ */ C(_, { size: 14 })
+	},
+	github: {
+		name: "GitHub",
+		icon: /* @__PURE__ */ C(a.shield, { size: 13 })
+	},
+	apple: {
+		name: "Apple",
+		icon: /* @__PURE__ */ C(a.shield, { size: 13 })
 	}
 };
 function A() {
@@ -36,7 +44,7 @@ function A() {
 		queryKey: ["check-setup"],
 		queryFn: t
 	}), { data: q } = x({
-		queryKey: ["sso-providers"],
+		queryKey: ["identity-providers"],
 		queryFn: () => n(),
 		staleTime: 6e4
 	});
@@ -217,7 +225,7 @@ function A() {
 						disabled: M,
 						children: M ? F("auth.signin.submitting", "Signing in…") : F("auth.signin.submit", "Continue")
 					}),
-					/* @__PURE__ */ w("div", {
+					G?.signup_enabled && /* @__PURE__ */ w("div", {
 						style: {
 							fontSize: 12,
 							color: "var(--text-3)",
@@ -234,7 +242,7 @@ function A() {
 									fontWeight: 500,
 									textDecoration: "none"
 								},
-								children: F("auth.signin.request_access", "Request access")
+								children: F("auth.signin.request_access", "Create an account")
 							})
 						]
 					})