@declarion/react 0.65.1 → 0.66.0

package/dist-lib/components/pages/SmartRecordListPage.js

@@ -0,0 +1,12 @@
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/pages/SmartRecordListPage.tsx
+var r = () => import("./SmartRecordListPage.impl.js"), i = t(() => r().then((e) => ({ default: e.SmartRecordListPage })));
+function a(t) {
+	return /* @__PURE__ */ n(e, {
+		fallback: null,
+		children: /* @__PURE__ */ n(i, { ...t })
+	});
+}
+//#endregion
+export { a as SmartRecordListPage, r as loadSmartRecordListPage };

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

@@ -0,0 +1,350 @@
+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";
+//#region src/components/pages/auth/AuthShell.tsx
+var m = 560;
+function h(e) {
+	try {
+		return new URL(e).host;
+	} catch {
+		return e;
+	}
+}
+function g(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(() => {
+		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,
+		M?.auth_badges,
+		w
+	]), R = M?.workspace_domain ?? "", z = !!(v && R), B = M?.status_url ?? "", V = !!B, H = M?.legal_links, U = u(() => [
+		[w("auth.footer.security", "Security"), H?.security_url ?? ""],
+		[w("auth.footer.privacy", "Privacy"), H?.privacy_url ?? ""],
+		[w("auth.footer.terms", "Terms"), H?.terms_url ?? ""],
+		[w("auth.footer.docs", "Docs"), H?.docs_url ?? ""]
+	].filter(([, e]) => !!e), [
+		H?.security_url,
+		H?.privacy_url,
+		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", {
+		"data-testid": "auth-brand-panel",
+		style: {
+			padding: "36px 36px 28px",
+			background: "linear-gradient(155deg, var(--auth-panel-bg-start) 0%, var(--auth-panel-bg-mid) 40%, var(--auth-panel-bg-end) 100%)",
+			color: "var(--auth-panel-fg)",
+			display: "flex",
+			flexDirection: "column",
+			position: "relative",
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ f("div", { style: {
+				position: "absolute",
+				top: -80,
+				right: -80,
+				width: 280,
+				height: 280,
+				borderRadius: "50%",
+				background: "radial-gradient(circle, var(--auth-panel-glow-1) 0%, transparent 70%)"
+			} }),
+			/* @__PURE__ */ f("div", { style: {
+				position: "absolute",
+				bottom: -60,
+				left: -40,
+				width: 220,
+				height: 220,
+				borderRadius: "50%",
+				background: "radial-gradient(circle, var(--auth-panel-glow-2) 0%, transparent 70%)"
+			} }),
+			/* @__PURE__ */ p("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					position: "relative"
+				},
+				children: [
+					/* @__PURE__ */ f(i, {
+						appLogo: M?.app_logo,
+						size: 34
+					}),
+					N && /* @__PURE__ */ f("span", {
+						style: {
+							fontSize: 18,
+							fontWeight: 600,
+							letterSpacing: "-0.012em"
+						},
+						children: N
+					}),
+					I && /* @__PURE__ */ f("span", {
+						className: "mono",
+						style: {
+							fontSize: 10,
+							padding: "2px 6px",
+							border: "1px solid var(--auth-panel-border-faint)",
+							borderRadius: "var(--radius-sm)",
+							color: "var(--auth-panel-fg-muted)"
+						},
+						children: I
+					})
+				]
+			}),
+			(M?.app_logo || N) && /* @__PURE__ */ p("div", {
+				style: {
+					marginTop: 48,
+					position: "relative",
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: 16
+				},
+				children: [M?.app_logo && /* @__PURE__ */ f(i, {
+					appLogo: M.app_logo,
+					size: 96,
+					radius: 0
+				}), N && /* @__PURE__ */ f("span", {
+					style: {
+						fontSize: 28,
+						fontWeight: 600,
+						letterSpacing: "-0.018em",
+						color: "var(--auth-panel-fg)"
+					},
+					children: N
+				})]
+			}),
+			/* @__PURE__ */ p("div", {
+				style: {
+					marginTop: "auto",
+					position: "relative"
+				},
+				children: [
+					P && /* @__PURE__ */ f("h1", {
+						style: {
+							margin: 0,
+							fontSize: 26,
+							fontWeight: 600,
+							letterSpacing: "-0.022em",
+							lineHeight: 1.2
+						},
+						children: P
+					}),
+					F && /* @__PURE__ */ f("p", {
+						style: {
+							margin: "10px 0 0",
+							fontSize: 13,
+							color: "var(--auth-panel-fg-muted)",
+							lineHeight: 1.65
+						},
+						children: F
+					}),
+					L.length > 0 && /* @__PURE__ */ f("div", {
+						style: {
+							marginTop: 22,
+							display: "grid",
+							gridTemplateColumns: "1fr 1fr",
+							gap: 10,
+							fontSize: 11.5,
+							color: "var(--auth-panel-fg-dim)"
+						},
+						children: L.map(([t, n]) => {
+							let r = e[n];
+							return /* @__PURE__ */ p("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 6
+								},
+								children: [r && /* @__PURE__ */ f(r, {
+									size: 12,
+									style: { color: "var(--accent-hover)" }
+								}), /* @__PURE__ */ f("span", { children: t })]
+							}, t);
+						})
+					}),
+					V && /* @__PURE__ */ f("a", {
+						href: B,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: "mono",
+						style: {
+							marginTop: 20,
+							padding: "10px 12px",
+							background: "var(--auth-panel-surface-soft)",
+							border: "1px solid var(--auth-panel-border-soft)",
+							borderRadius: "var(--radius-md)",
+							display: "flex",
+							alignItems: "center",
+							gap: 8,
+							fontSize: 11.5,
+							color: "var(--auth-panel-fg-muted)",
+							textDecoration: "none"
+						},
+						children: h(B)
+					})
+				]
+			})
+		]
+	});
+	return /* @__PURE__ */ p("div", {
+		style: {
+			minHeight: "var(--app-height)",
+			background: "var(--background)",
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 0,
+			overflowX: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ p("div", {
+				style: {
+					paddingTop: X ? 12 : 16,
+					paddingBottom: X ? 12 : 16,
+					...X ? c(14) : {
+						paddingLeft: 20,
+						paddingRight: 20
+					},
+					display: "flex",
+					alignItems: "center",
+					gap: 10
+				},
+				children: [
+					/* @__PURE__ */ f(i, {
+						appLogo: M?.app_logo,
+						size: 26
+					}),
+					N && /* @__PURE__ */ f("span", {
+						style: {
+							fontSize: 14,
+							fontWeight: 600,
+							letterSpacing: "-0.01em",
+							minWidth: 0,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: N
+					}),
+					z && /* @__PURE__ */ p("span", {
+						className: "mono",
+						style: {
+							marginLeft: 6,
+							fontSize: 10.5,
+							color: "var(--text-4)",
+							padding: "2px 6px",
+							background: "var(--surface-2)",
+							border: "1px solid var(--border)",
+							borderRadius: "var(--radius-sm)"
+						},
+						children: [
+							v,
+							".",
+							R
+						]
+					}),
+					/* @__PURE__ */ f("div", { style: { flex: 1 } }),
+					/* @__PURE__ */ f(t, {
+						icon: f(T === "dark" ? e.sun : e.moon, { size: 14 }),
+						onClick: k,
+						title: w("auth.toggle_theme", "Toggle theme")
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				style: {
+					flex: 1,
+					display: "flex",
+					alignItems: X ? "flex-start" : "center",
+					justifyContent: "center",
+					paddingTop: X ? 16 : 20,
+					paddingBottom: X ? 12 : 20,
+					...X ? c(12) : {
+						paddingLeft: 20,
+						paddingRight: 20
+					},
+					minWidth: 0
+				},
+				children: /* @__PURE__ */ p("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: X ? "minmax(0, 1fr)" : "1fr 1fr",
+						gap: 0,
+						width: X ? "100%" : 980,
+						maxWidth: "100%",
+						minHeight: X ? "auto" : m,
+						background: "var(--surface)",
+						border: "1px solid var(--border)",
+						borderRadius: X ? "var(--radius-lg)" : "var(--radius-xl)",
+						overflow: "hidden",
+						boxShadow: X ? "var(--shadow-sm)" : "var(--shadow-lg)"
+					},
+					children: [
+						Z && Q,
+						/* @__PURE__ */ f("div", {
+							"data-testid": "auth-form-panel",
+							style: {
+								padding: X ? "28px 20px 24px" : "36px 40px",
+								display: "flex",
+								flexDirection: "column",
+								justifyContent: "center",
+								minWidth: 0
+							},
+							children: _
+						}),
+						!Z && Q
+					]
+				})
+			}),
+			/* @__PURE__ */ p("div", {
+				style: {
+					padding: X ? "12px 14px calc(12px + var(--safe-area-bottom))" : "14px 20px",
+					display: "flex",
+					alignItems: X ? "flex-start" : "center",
+					flexDirection: X ? "column" : "row",
+					gap: X ? 6 : 16,
+					fontSize: 11,
+					color: "var(--text-4)",
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ f("span", { children: G }),
+					U.map(([e, t]) => /* @__PURE__ */ f("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", {
+						className: "mono",
+						style: {
+							maxWidth: "100%",
+							overflowWrap: "anywhere"
+						},
+						children: Y
+					})] })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { _ as AuthShell, g as formatBuildLabel };

package/dist-lib/{Forgot.impl-6tL6SBlS.js → components/pages/auth/Forgot.impl.js}

@@ -1,14 +1,15 @@
-import { kn as e, wt as t } from "./useCurrentScreen-BZOHBGQZ.js";
-import { t as n } from "./Icons-lt-7lhYR.js";
-import { r } from "./CopyButton-DRIT_f0k.js";
-import { V as i, X as a } from "./PropertyGridEditor-XrP6TZ5s.js";
-import { t as o } from "./AuthShell-C8aVwHS7.js";
+import { callHandler as e } from "../../../api/client.js";
+import { Icon as t } from "../../primitives/Icons.js";
+import { Btn as n } from "../../primitives/Btn.js";
+import { useText as r } from "../../../hooks/useText.js";
+import { FieldLabel as i, TextInput as a } from "../../primitives/Fields.js";
+import { AuthShell as o } from "./AuthShell.js";
 import { useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { Link as u } from "react-router";
 //#region src/components/pages/auth/Forgot.impl.tsx
 function d() {
-	let d = t(), [f, p] = s(""), [m, h] = s(!1), [g, _] = s(!1);
+	let d = r(), [f, p] = s(""), [m, h] = s(!1), [g, _] = s(!1);
 	async function v(t) {
 		if (t.preventDefault(), !g) {
 			_(!0);
@@ -24,7 +25,7 @@ function d() {
 		"data-testid": "forgot-form",
 		children: [
 			/* @__PURE__ */ c("div", {
-				className: "text-accent uppercase",
+				className: "text-accent-text uppercase",
 				style: {
 					fontSize: 10.5,
 					fontWeight: 700,
@@ -55,13 +56,13 @@ function d() {
 				className: "bg-success-soft text-success",
 				style: {
 					padding: 14,
-					borderRadius: 8,
+					borderRadius: "var(--radius-md)",
 					fontSize: 12.5,
 					display: "flex",
 					gap: 8,
 					alignItems: "flex-start"
 				},
-				children: [/* @__PURE__ */ c(n.check, { size: 14 }), /* @__PURE__ */ c("div", { children: d("auth.forgot.sent", "If that email is in our system, we've sent a reset link. Check your inbox — it expires in 30 minutes.") })]
+				children: [/* @__PURE__ */ c(t.check, { size: 14 }), /* @__PURE__ */ c("div", { children: d("auth.forgot.sent", "If that email is in our system, we've sent a reset link. Check your inbox — it expires in 30 minutes.") })]
 			}) : /* @__PURE__ */ l("div", {
 				style: {
 					display: "flex",
@@ -72,14 +73,14 @@ function d() {
 					/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c(i, { children: d("auth.field.email", "Email") }), /* @__PURE__ */ c(a, {
 						value: f,
 						onChange: p,
-						prefix: /* @__PURE__ */ c(n.email, { size: 13 }),
+						prefix: /* @__PURE__ */ c(t.email, { size: 13 }),
 						placeholder: d("auth.field.email_placeholder", "you@company.com"),
 						autoFocus: !0,
 						required: !0,
 						type: "email",
 						"aria-label": d("auth.field.email", "Email")
 					})] }),
-					/* @__PURE__ */ c(r, {
+					/* @__PURE__ */ c(n, {
 						type: "submit",
 						size: "md",
 						kind: "primary",
@@ -92,7 +93,7 @@ function d() {
 					}),
 					/* @__PURE__ */ c(u, {
 						to: "/login",
-						className: "text-accent text-center no-underline",
+						className: "text-accent-text text-center no-underline",
 						style: { fontSize: 12 },
 						children: d("auth.back_to_sign_in", "← Back to sign in")
 					})

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

@@ -0,0 +1,12 @@
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/pages/auth/Forgot.tsx
+var r = t(() => import("./Forgot.impl.js").then((e) => ({ default: e.Forgot })));
+function i() {
+	return /* @__PURE__ */ n(e, {
+		fallback: null,
+		children: /* @__PURE__ */ n(r, {})
+	});
+}
+//#endregion
+export { i as Forgot };

package/dist-lib/{Reset.impl-D0pjhS6d.js → components/pages/auth/Reset.impl.js}

@@ -1,8 +1,10 @@
-import { kn as e, qn as t, wt as n } from "./useCurrentScreen-BZOHBGQZ.js";
-import { t as r } from "./Icons-lt-7lhYR.js";
-import { r as i } from "./CopyButton-DRIT_f0k.js";
-import { V as a, W as o, X as s } from "./PropertyGridEditor-XrP6TZ5s.js";
-import { t as c } from "./AuthShell-C8aVwHS7.js";
+import { ApiError as e } from "../../../types/api.js";
+import { callHandler as t } from "../../../api/client.js";
+import { Icon as n } from "../../primitives/Icons.js";
+import { Btn as r } from "../../primitives/Btn.js";
+import { useText as i } from "../../../hooks/useText.js";
+import { FieldLabel as a, PasswordInput as o, TextInput as s } from "../../primitives/Fields.js";
+import { AuthShell as c } from "./AuthShell.js";
 import { useEffect as l, useMemo as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { Link as m, useNavigate as h } from "react-router";
@@ -24,7 +26,7 @@ function x() {
 	e && e.remove();
 }
 function S() {
-	let v = n(), S = n("errors")("auth.reset_link_invalid", "Invalid or expired link. Please request a new one."), C = v("auth.reset.password_min", "Password must be at least {min} characters.", { min: g }), w = h(), [T] = d(() => y()), [E, D] = d(""), [O, k] = d(""), [A, j] = d(""), [M, N] = d(!1), [P, F] = d(null);
+	let v = i(), S = i("errors")("auth.reset_link_invalid", "Invalid or expired link. Please request a new one."), C = v("auth.reset.password_min", "Password must be at least {min} characters.", { min: g }), w = h(), [T] = d(() => y()), [E, D] = d(""), [O, k] = d(""), [A, j] = d(""), [M, N] = d(!1), [P, F] = d(null);
 	l(() => {
 		if (T) return typeof window < "u" && typeof window.history?.replaceState == "function" && window.history.replaceState(null, "", "/reset"), b(), x;
 	}, [T]);
@@ -36,7 +38,7 @@ function S() {
 			else {
 				N(!0), F(null);
 				try {
-					await e("auth.reset_password", {
+					await t("auth.reset_password", {
 						email: E,
 						token: T,
 						password: O
@@ -48,8 +50,8 @@ function S() {
 						}));
 					} catch {}
 					w("/login", { replace: !0 });
-				} catch (e) {
-					e instanceof t && e.code === "auth.password_reused" ? F(v("auth.reset.password_differ", "Your new password must differ from your current password.")) : e instanceof t && e.code === "auth.password_too_short" ? F(C) : F(S);
+				} catch (t) {
+					t instanceof e && t.code === "auth.password_reused" ? F(v("auth.reset.password_differ", "Your new password must differ from your current password.")) : t instanceof e && t.code === "auth.password_too_short" ? F(C) : F(S);
 				} finally {
 					N(!1);
 				}
@@ -60,7 +62,7 @@ function S() {
 		"data-testid": "reset-page",
 		children: [
 			/* @__PURE__ */ f("div", {
-				className: "text-accent uppercase",
+				className: "text-accent-text uppercase",
 				style: {
 					fontSize: 10.5,
 					fontWeight: 700,
@@ -88,7 +90,7 @@ function S() {
 					children: S
 				}), /* @__PURE__ */ f(m, {
 					to: "/forgot",
-					className: "text-accent no-underline",
+					className: "text-accent-text no-underline",
 					style: { fontSize: 12 },
 					children: v("auth.reset.request_new", "Request a new reset link")
 				})]
@@ -112,7 +114,7 @@ function S() {
 						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(a, { children: v("auth.field.email", "Email") }), /* @__PURE__ */ f(s, {
 							value: E,
 							onChange: D,
-							prefix: /* @__PURE__ */ f(r.email, { size: 13 }),
+							prefix: /* @__PURE__ */ f(n.email, { size: 13 }),
 							placeholder: v("auth.field.email_placeholder", "you@company.com"),
 							autoFocus: !0,
 							required: !0,
@@ -136,12 +138,12 @@ function S() {
 							className: "bg-destructive-soft text-destructive",
 							style: {
 								padding: 12,
-								borderRadius: 8,
+								borderRadius: "var(--radius-md)",
 								fontSize: 12.5
 							},
 							children: P
 						}),
-						/* @__PURE__ */ f(i, {
+						/* @__PURE__ */ f(r, {
 							type: "submit",
 							size: "md",
 							kind: "primary",
@@ -154,7 +156,7 @@ function S() {
 						}),
 						/* @__PURE__ */ f(m, {
 							to: "/login",
-							className: "text-accent text-center no-underline",
+							className: "text-accent-text text-center no-underline",
 							style: { fontSize: 12 },
 							children: v("auth.back_to_sign_in", "← Back to sign in")
 						})

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

@@ -0,0 +1,12 @@
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/pages/auth/Reset.tsx
+var r = t(() => import("./Reset.impl.js").then((e) => ({ default: e.Reset })));
+function i() {
+	return /* @__PURE__ */ n(e, {
+		fallback: null,
+		children: /* @__PURE__ */ n(r, {})
+	});
+}
+//#endregion
+export { i as Reset };