@declarion/react 0.65.1 → 0.66.1

package/dist-lib/components/shared/LucideIcon.js

@@ -0,0 +1,43 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { useEffect as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/shared/LucideIcon.tsx
+var i = /* @__PURE__ */ new Map(), a = null;
+function o() {
+	return a ||= import("lucide-react/dynamic.js").then((e) => e.dynamicIconImports), a;
+}
+function s({ name: a, size: s = 14, className: c, style: l }) {
+	let [u, d] = n(() => i.get(a)), [f, p] = n(!1);
+	if (t(() => {
+		let e = i.get(a);
+		if (e) {
+			d(() => e), p(!1);
+			return;
+		}
+		d(void 0), p(!1);
+		let t = !0;
+		return o().then((e) => {
+			let n = e[a];
+			if (!n) t && p(!0);
+			else return n().then((e) => {
+				i.set(a, e.default), t && (d(() => e.default), p(!1));
+			});
+		}), () => {
+			t = !1;
+		};
+	}, [a]), f) {
+		let t = e.folder;
+		return /* @__PURE__ */ r(t, {
+			size: s,
+			cls: c,
+			style: l
+		});
+	}
+	return u ? /* @__PURE__ */ r(u, {
+		size: s,
+		className: c,
+		style: l
+	}) : null;
+}
+//#endregion
+export { s as LucideIcon };

package/dist-lib/components/shared/Markdown.js

@@ -0,0 +1,15 @@
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/shared/Markdown.tsx
+var r = t(() => import("./MarkdownRenderer.js").then((e) => ({ default: e.MarkdownRenderer })));
+function i() {
+	return /* @__PURE__ */ n("div", { className: "h-4 w-2/3 rounded bg-muted animate-pulse" });
+}
+function a(t) {
+	return /* @__PURE__ */ n(e, {
+		fallback: /* @__PURE__ */ n(i, {}),
+		children: /* @__PURE__ */ n(r, { ...t })
+	});
+}
+//#endregion
+export { a as Markdown };

package/dist-lib/{MarkdownRenderer-sK2TRZS-.js → components/shared/MarkdownRenderer.js}

@@ -1,5 +1,6 @@
-import { nt as e, wt as t } from "./useCurrentScreen-BZOHBGQZ.js";
-import { E as n } from "./PropertyGridEditor-XrP6TZ5s.js";
+import { useText as e } from "../../hooks/useText.js";
+import { isExternalHref as t } from "../../lib/safe-url.js";
+import { extractDeclarionFileId as n } from "../../lib/rich-text.js";
 import { jsx as r } from "react/jsx-runtime";
 import i, { defaultUrlTransform as a } from "react-markdown";
 import o from "remark-breaks";
@@ -12,14 +13,14 @@ function d(e) {
 function f(e) {
 	return e.startsWith("/") || e.startsWith("https://") || e.startsWith("http://") ? e : null;
 }
-function p({ href: t, children: n }) {
-	return e(t) ? /* @__PURE__ */ r("a", {
-		href: t,
+function p({ href: e, children: n }) {
+	return t(e) ? /* @__PURE__ */ r("a", {
+		href: e,
 		target: "_blank",
 		rel: "noopener noreferrer",
 		children: n
 	}) : /* @__PURE__ */ r("a", {
-		href: t,
+		href: e,
 		children: n
 	});
 }
@@ -65,8 +66,8 @@ function m(e, t) {
 		}
 	};
 }
-function h({ content: e, plugins: n = "breaks", files: a, components: o, skipHtml: s = !0, prose: f = !0 }) {
-	let h = t(), g = n === "gfm" ? u : l, _ = {
+function h({ content: t, plugins: n = "breaks", files: a, components: o, skipHtml: s = !0, prose: f = !0 }) {
+	let h = e(), g = n === "gfm" ? u : l, _ = {
 		a: p,
 		...a ? m(h, a) : {},
 		...o
@@ -75,7 +76,7 @@ function h({ content: e, plugins: n = "breaks", files: a, components: o, skipHtm
 		remarkPlugins: g,
 		components: _,
 		urlTransform: a ? d : void 0,
-		children: e
+		children: t
 	});
 	return f ? /* @__PURE__ */ r("div", {
 		className: c,

package/dist-lib/components/shared/RefreshControl.js

@@ -0,0 +1,42 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { IconBtn as t } from "../primitives/IconBtn.js";
+import { Pill as n } from "../primitives/Pill.js";
+import { useText as r } from "../../hooks/useText.js";
+import { useResponsiveMode as i } from "../../hooks/useResponsiveMode.js";
+import { Spinner as a } from "../primitives/Spinner.js";
+import { useOwnRefresh as o } from "./useOwnRefresh.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/shared/RefreshControl.tsx
+function l({ liveObject: l, realtime: u = !0 }) {
+	let d = r(), { isPhone: f } = i(), { refreshing: p, refresh: m } = o(l.refetch), h = l.isLive ? d("control.refresh.live", "Live") : d("control.refresh.paused", "Updates paused"), g = l.isLive && f ? void 0 : h;
+	return /* @__PURE__ */ c("span", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8
+		},
+		children: [/* @__PURE__ */ s(t, {
+			icon: p ? /* @__PURE__ */ s("span", {
+				"data-testid": "refresh-spinner",
+				style: { display: "inline-flex" },
+				children: /* @__PURE__ */ s(a, { size: 14 })
+			}) : /* @__PURE__ */ s(e.refresh, { size: 14 }),
+			title: d("control.refresh.title", "Refresh"),
+			disabled: l.isLoading || p,
+			onClick: m
+		}), u && /* @__PURE__ */ s("span", {
+			"data-testid": "live-indicator",
+			role: "status",
+			"aria-label": h,
+			title: l.isLive ? d("control.refresh.live_hint", "This view updates automatically in realtime.") : d("control.refresh.paused_hint", "Realtime updates are paused. Refresh manually to load the latest data."),
+			children: /* @__PURE__ */ s(n, {
+				tone: l.isLive ? "emerald" : "amber",
+				size: "xs",
+				dot: !0,
+				children: g
+			})
+		})]
+	});
+}
+//#endregion
+export { l as RefreshControl };

package/dist-lib/components/shared/StatusGroupsDisplay.js

@@ -0,0 +1,123 @@
+import { Pill as e } from "../primitives/Pill.js";
+import { useText as t } from "../../hooks/useText.js";
+import { Select as n } from "../primitives/Fields.js";
+import { StatusStepper as r } from "./StatusStepper.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/shared/StatusGroupsDisplay.tsx
+function o({ statusGroups: o, objectStatuses: s, onSetStatus: c, isPending: l, mode: u = "edit" }) {
+	let d = t();
+	return /* @__PURE__ */ i("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: 16
+		},
+		children: Object.entries(o).map(([t, o]) => {
+			let f = s?.find((e) => e.group_code === t)?.status_code, p = f ? o.statuses.find((e) => e.code === f) : void 0;
+			if (o.display_mode === "stepper") {
+				let e = u === "edit", n = e ? o.transitions && f ? /* @__PURE__ */ new Set([f, ...o.transitions[f] ?? []]) : new Set(o.statuses.map((e) => e.code)) : void 0;
+				return /* @__PURE__ */ a("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 8,
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ a("span", {
+						style: {
+							fontSize: 12,
+							color: "var(--text-3)",
+							flexShrink: 0
+						},
+						children: [d(o.name), ":"]
+					}), /* @__PURE__ */ i("div", {
+						style: {
+							minWidth: 240,
+							opacity: l ? .6 : 1,
+							pointerEvents: l ? "none" : "auto"
+						},
+						children: /* @__PURE__ */ i(r, {
+							stages: o.statuses.map((e) => ({
+								code: e.code,
+								label: d(e.name)
+							})),
+							current: f,
+							selectable: n,
+							onSelect: e ? (e) => c(t, e) : void 0,
+							compact: !0
+						})
+					})]
+				}, t);
+			}
+			if (u === "display") return /* @__PURE__ */ a("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ a("span", {
+					style: {
+						fontSize: 12,
+						color: "var(--text-3)"
+					},
+					children: [d(o.name), ":"]
+				}), p ? /* @__PURE__ */ i(e, {
+					tone: p.color ?? "slate",
+					size: "xs",
+					children: d(p.name)
+				}) : /* @__PURE__ */ i("span", {
+					style: {
+						fontSize: 12.5,
+						color: "var(--text-4)"
+					},
+					children: "—"
+				})]
+			}, t);
+			let m = (o.transitions && f ? o.statuses.filter((e) => e.code === f || (o.transitions[f]?.includes(e.code) ?? !1)) : o.statuses).map((e) => ({
+				value: e.code,
+				label: /* @__PURE__ */ a("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: 6
+					},
+					children: [e.color && /* @__PURE__ */ i("span", { style: {
+						width: 8,
+						height: 8,
+						borderRadius: 999,
+						background: `var(--pill-${e.color}, ${e.color})`,
+						display: "inline-block"
+					} }), d(e.name)]
+				})
+			}));
+			return /* @__PURE__ */ a("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ a("span", {
+					style: {
+						fontSize: 12,
+						color: "var(--text-3)"
+					},
+					children: [d(o.name), ":"]
+				}), /* @__PURE__ */ i("div", {
+					style: {
+						minWidth: 180,
+						opacity: l ? .6 : 1,
+						pointerEvents: l ? "none" : "auto"
+					},
+					children: /* @__PURE__ */ i(n, {
+						value: f ?? "",
+						options: m,
+						onChange: (e) => c(t, e)
+					})
+				})]
+			}, t);
+		})
+	});
+}
+//#endregion
+export { o as StatusGroupsDisplay };

package/dist-lib/components/shared/StatusStepper.js

@@ -0,0 +1,70 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/shared/StatusStepper.tsx
+function r({ stages: r, current: i, selectable: a, onSelect: o, compact: s = !1 }) {
+	let c = r.findIndex((e) => e.code === i);
+	return /* @__PURE__ */ t("div", {
+		role: "list",
+		style: {
+			display: "flex",
+			alignItems: "stretch",
+			borderRadius: "var(--radius-md)",
+			overflow: "hidden",
+			border: "1px solid var(--border)",
+			background: "var(--surface)"
+		},
+		children: r.map((i, l) => {
+			let u = c >= 0 && l < c, d = l === c, f = c < 0 || l > c, p = !!o && (a?.has(i.code) ?? !1), m = l === 0, h = l === r.length - 1, g = d ? "var(--accent-soft)" : u ? "var(--success-soft)" : "transparent", _ = d ? "var(--accent)" : u ? "var(--success)" : "var(--text-3)", v = m && h ? void 0 : m ? "polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%)" : h ? "polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%)" : "polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%)";
+			return /* @__PURE__ */ n("button", {
+				role: "listitem",
+				type: "button",
+				disabled: !p,
+				onClick: p ? () => o(i.code) : void 0,
+				title: i.label,
+				style: {
+					flex: 1,
+					minWidth: 0,
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					padding: s ? `6px 8px 6px ${m ? 10 : 20}px` : `8px 10px 8px ${m ? 12 : 24}px`,
+					border: 0,
+					borderLeft: l > 0 ? "1px solid var(--divider)" : "none",
+					background: g,
+					color: _,
+					fontSize: s ? 11.5 : 12.5,
+					fontFamily: "inherit",
+					fontWeight: d ? 600 : 500,
+					cursor: p ? "pointer" : "default",
+					clipPath: v,
+					whiteSpace: "nowrap"
+				},
+				children: [/* @__PURE__ */ t("span", {
+					style: {
+						width: 16,
+						height: 16,
+						borderRadius: 999,
+						flexShrink: 0,
+						background: f ? "transparent" : _,
+						border: f ? "1px solid var(--border-strong)" : "none",
+						color: f ? "var(--text-4)" : d ? "var(--accent-soft)" : "var(--success-soft)",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						fontSize: 9.5,
+						fontWeight: 700
+					},
+					children: u ? /* @__PURE__ */ t(e.check, { size: 10 }) : l + 1
+				}), /* @__PURE__ */ t("span", {
+					style: {
+						overflow: "hidden",
+						textOverflow: "ellipsis"
+					},
+					children: i.label
+				})]
+			}, i.code);
+		})
+	});
+}
+//#endregion
+export { r as StatusStepper };

package/dist-lib/components/shared/toast/DeclarionToast.js

@@ -0,0 +1,308 @@
+import { Icon as e } from "../../primitives/Icons.js";
+import { useText as t } from "../../../hooks/useText.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/shared/toast/DeclarionToast.tsx
+var c = {
+	success: {
+		tone: "success",
+		defaultTitle: (e) => e("toast.title.success", "Success")
+	},
+	error: {
+		tone: "danger",
+		defaultTitle: (e) => e("toast.title.error", "Error")
+	},
+	warning: {
+		tone: "warn",
+		defaultTitle: (e) => e("toast.title.warning", "Warning")
+	},
+	info: {
+		tone: "info",
+		defaultTitle: (e) => e("toast.title.info", "Heads up")
+	},
+	loading: {
+		tone: "info",
+		defaultTitle: (e) => e("toast.title.loading", "Working…")
+	}
+}, l = 200;
+function u({ type: t }) {
+	let n = { display: "flex" };
+	if (t === "loading") return /* @__PURE__ */ o("span", {
+		style: {
+			...n,
+			animation: "dz-toast-spin 0.9s linear infinite"
+		},
+		children: /* @__PURE__ */ o(e.loader, { size: 11 })
+	});
+	let r = t === "success" ? e.check : t === "error" ? e.x : t === "warning" ? e.warning : e.info;
+	return /* @__PURE__ */ o("span", {
+		style: n,
+		children: /* @__PURE__ */ o(r, { size: 11 })
+	});
+}
+function d({ model: d, onClose: f }) {
+	let p = t(), m = c[d.type] ?? c.info, h = m.tone, [g, _] = a(!1), [v, y] = a(!1), [b, x] = a(!1), [S, C] = a(!1), [w, T] = a(1), E = i(d.duration), D = i(!1), O = !d.sticky && d.duration > 0, k = n(() => {
+		D.current || (D.current = !0, C(!0), window.setTimeout(f, l));
+	}, [f]);
+	r(() => {
+		E.current = d.duration, T(1);
+	}, [d.createdAt, d.duration]), r(() => {
+		if (!O || g || S) return;
+		let e = Date.now(), t = window.setTimeout(k, E.current), n = 0, r = () => {
+			let t = E.current - (Date.now() - e);
+			T(Math.max(0, t) / d.duration), t > 0 && (n = requestAnimationFrame(r));
+		};
+		return n = requestAnimationFrame(r), () => {
+			window.clearTimeout(t), cancelAnimationFrame(n), E.current = Math.max(0, E.current - (Date.now() - e));
+		};
+	}, [
+		O,
+		g,
+		S,
+		d.duration,
+		d.createdAt,
+		k
+	]);
+	let A = n(() => {
+		let e = [
+			d.title,
+			d.message,
+			d.requestId ? `request_id: ${d.requestId}` : null,
+			d.details
+		].filter(Boolean).join("\n");
+		navigator.clipboard?.writeText(e), y(!0), window.setTimeout(() => y(!1), 1500);
+	}, [
+		d.title,
+		d.message,
+		d.requestId,
+		d.details
+	]), j = (e) => `var(--${h}${e})`, M = d.type === "error";
+	return /* @__PURE__ */ s("div", {
+		role: d.type === "error" ? "alert" : "status",
+		"aria-live": d.type === "error" ? "assertive" : "polite",
+		onMouseEnter: () => _(!0),
+		onMouseLeave: () => _(!1),
+		style: {
+			width: "100%",
+			background: "var(--surface)",
+			border: `1px solid ${j("-border")}`,
+			borderLeft: `3px solid ${j("")}`,
+			borderRadius: "var(--radius-md)",
+			boxShadow: "var(--shadow-toast)",
+			overflow: "hidden",
+			position: "relative",
+			animation: S ? `dz-toast-out ${l}ms ease-in forwards` : "dz-toast-in 0.24s cubic-bezier(0.16, 1, 0.3, 1)"
+		},
+		children: [/* @__PURE__ */ s("div", {
+			style: {
+				display: "flex",
+				padding: "10px 12px 11px 12px",
+				gap: 10
+			},
+			children: [
+				/* @__PURE__ */ o("div", {
+					style: {
+						width: 18,
+						height: 18,
+						marginTop: 1,
+						flexShrink: 0,
+						background: j("-soft"),
+						borderRadius: 99,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						color: j("")
+					},
+					children: /* @__PURE__ */ o(u, { type: d.type })
+				}),
+				/* @__PURE__ */ s("div", {
+					style: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [
+						/* @__PURE__ */ s("div", {
+							style: {
+								display: "flex",
+								alignItems: "baseline",
+								gap: 6
+							},
+							children: [
+								/* @__PURE__ */ o("div", {
+									style: {
+										fontSize: 12.5,
+										fontWeight: 600,
+										color: "var(--text)",
+										letterSpacing: "-0.005em",
+										userSelect: "text"
+									},
+									children: d.title || m.defaultTitle(p)
+								}),
+								(d.count ?? 0) > 1 && /* @__PURE__ */ s("span", {
+									style: {
+										background: j("-soft"),
+										color: j(""),
+										fontSize: 10,
+										padding: "1px 6px",
+										borderRadius: 99,
+										fontWeight: 600,
+										flexShrink: 0
+									},
+									children: ["×", d.count]
+								}),
+								d.requestId && /* @__PURE__ */ o("span", {
+									className: "mono",
+									style: {
+										fontSize: 10,
+										color: "var(--text-4)",
+										marginLeft: "auto",
+										userSelect: "text"
+									},
+									children: d.requestId
+								})
+							]
+						}),
+						d.message && /* @__PURE__ */ o("div", {
+							style: {
+								fontSize: 12,
+								color: "var(--text-2)",
+								marginTop: 3,
+								lineHeight: 1.5,
+								userSelect: "text",
+								cursor: "text",
+								wordBreak: "break-word"
+							},
+							children: d.message
+						}),
+						d.details && /* @__PURE__ */ s("div", {
+							style: { marginTop: 6 },
+							children: [/* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: () => x((e) => !e),
+								style: {
+									background: "transparent",
+									border: 0,
+									padding: 0,
+									cursor: "pointer",
+									color: "var(--text-3)",
+									fontSize: 11,
+									fontWeight: 500,
+									display: "inline-flex",
+									alignItems: "center",
+									gap: 4
+								},
+								children: [/* @__PURE__ */ o(e.down, {
+									size: 10,
+									style: {
+										transform: b ? "rotate(180deg)" : "none",
+										transition: "transform .15s"
+									}
+								}), b ? p("toast.hide_details", "Hide details") : p("toast.show_details", "Show details")]
+							}), b && /* @__PURE__ */ o("pre", {
+								className: "mono",
+								style: {
+									margin: "6px 0 0 0",
+									padding: "8px 10px",
+									background: "var(--surface-2)",
+									border: "1px solid var(--border)",
+									borderRadius: "var(--radius-sm)",
+									fontSize: 11,
+									lineHeight: 1.5,
+									color: "var(--text-2)",
+									whiteSpace: "pre-wrap",
+									wordBreak: "break-word",
+									userSelect: "text",
+									maxHeight: 200,
+									overflow: "auto"
+								},
+								children: d.details
+							})]
+						}),
+						(d.action || M) && /* @__PURE__ */ s("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 6,
+								marginTop: 8
+							},
+							children: [d.action && /* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => {
+									d.action?.onClick(), k();
+								},
+								style: {
+									background: j("-soft"),
+									color: j(""),
+									border: 0,
+									padding: "4px 10px",
+									borderRadius: "var(--radius-sm)",
+									fontSize: 11.5,
+									fontWeight: 600,
+									cursor: "pointer"
+								},
+								children: d.action.label
+							}), M && /* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: A,
+								title: p("toast.copy_error_message", "Copy error message"),
+								"aria-label": p("toast.copy_error_message", "Copy error message"),
+								style: {
+									display: "inline-flex",
+									alignItems: "center",
+									gap: 4,
+									background: "transparent",
+									border: "1px solid var(--border)",
+									padding: "3px 7px",
+									borderRadius: "var(--radius-sm)",
+									fontSize: 11,
+									color: v ? "var(--success)" : "var(--text-3)",
+									cursor: "pointer",
+									fontWeight: 500
+								},
+								children: [o(v ? e.check : e.copy, { size: 11 }), v ? p("control.copied", "Copied") : p("control.copy", "Copy")]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: k,
+					"aria-label": p("toast.dismiss", "Dismiss"),
+					style: {
+						width: 20,
+						height: 20,
+						padding: 0,
+						marginTop: -1,
+						flexShrink: 0,
+						background: "transparent",
+						border: 0,
+						borderRadius: "var(--radius-sm)",
+						cursor: "pointer",
+						color: "var(--text-4)",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: /* @__PURE__ */ o(e.x, { size: 12 })
+				})
+			]
+		}), O && /* @__PURE__ */ o("div", {
+			style: {
+				position: "absolute",
+				left: 0,
+				right: 0,
+				bottom: 0,
+				height: 2
+			},
+			children: /* @__PURE__ */ o("div", { style: {
+				height: "100%",
+				width: `${w * 100}%`,
+				background: j(""),
+				opacity: .55,
+				transition: g ? "none" : "width 0.1s linear"
+			} })
+		})]
+	});
+}
+//#endregion
+export { d as DeclarionToast };

package/dist-lib/components/shared/useOwnRefresh.js

@@ -0,0 +1,19 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/components/shared/useOwnRefresh.ts
+function i(i) {
+	let [a, o] = r(!1), s = n(!0);
+	return t(() => (s.current = !0, () => {
+		s.current = !1;
+	}), []), {
+		refreshing: a,
+		refresh: e(() => {
+			o(!0);
+			let e = () => {
+				s.current && o(!1);
+			};
+			Promise.resolve(i()).then(e, e);
+		}, [i])
+	};
+}
+//#endregion
+export { i as useOwnRefresh };