@burdenoff/microfe-bigconsole 2026.804.2 → 2026.805.2

package/dist/bigconsole/components/dashboard/ShareDialog/EmbedTab.js

@@ -1,8 +1,10 @@
-import e, { themeChoiceFromPolicy as t } from "../../../hooks/useDashboardEmbedPolicy.js";
-import { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { BIGCONSOLE_PERMISSIONS as e } from "../../../../constants/permissions.js";
+import t, { themeChoiceFromPolicy as n } from "../../../hooks/useDashboardEmbedPolicy.js";
+import { useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { usePermissions as s } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/ShareDialog/EmbedTab.tsx
-var ee = [
+var d = [
 	{
 		value: "light",
 		label: "Light"
@@ -16,7 +18,7 @@ var ee = [
 		label: "Auto (match viewer)"
 	}
 ];
-function l(e, t) {
+function ee(e, t) {
 	return t === "light" ? e : e.replace(/(?<=\s)src="([^"]*)"/, (e, n) => {
 		let r = n.indexOf("#"), i = r === -1 ? n : n.slice(0, r), a = r === -1 ? "" : n.slice(r);
 		return `src="${i}${i.includes("?") ? "&" : "?"}theme=${t}${a}"`;
@@ -32,60 +34,60 @@ function te(e) {
 		return null;
 	}
 }
-function u({ dashboardId: u, colors: d }) {
-	let { policy: f, secret: p, loading: m, error: h, fetchPolicy: g, publishToWeb: _, applyPresentation: v, setAllowedOrigins: y, rotateKey: b, unpublish: x } = e(), [S, C] = a(""), [w, T] = a([]), [E, D] = a(!1), [O, k] = a(!1), [A, j] = a("light"), [M, N] = a(!1), [P, F] = a(!0), [I, L] = a(!1), [R, z] = a(null), B = i(null), V = i(null);
-	n(() => {
-		u && g(u);
-	}, [u, g]), n(() => {
-		!f || B.current === f.id || (B.current = f.id, j(t(f.presentationTheme)), N(f.showDashboardTitle), F(f.showBrandingFooter));
-	}, [f]), n(() => () => {
-		V.current && clearTimeout(V.current);
+function f({ dashboardId: f, colors: p }) {
+	let { policy: m, secret: h, loading: g, error: _, fetchPolicy: v, publishToWeb: y, applyPresentation: b, setAllowedOrigins: x, rotateKey: S, unpublish: ne } = t(), { hasPermission: C } = s(), w = C(e.DASHBOARD_MANAGE_EMBED), [T, E] = o(""), [D, O] = o([]), [k, A] = o(!1), [j, M] = o(!1), [N, P] = o("light"), [F, I] = o(!1), [L, R] = o(!0), [re, z] = o(!1), [B, V] = o(null), H = a(null), U = a(null);
+	r(() => {
+		f && v(f);
+	}, [f, v]), r(() => {
+		!m || H.current === m.id || (H.current = m.id, P(n(m.presentationTheme)), I(m.showDashboardTitle), R(m.showBrandingFooter));
+	}, [m]), r(() => () => {
+		U.current && clearTimeout(U.current);
 	}, []);
-	let H = f?.status === "ACTIVE", U = H ? f?.allowedParentOrigins ?? [] : w, W = r(() => p?.iframeSnippet ? l(p.iframeSnippet, A) : null, [p, A]), G = () => {
-		z(null);
-		let e = te(S);
+	let W = m?.status === "ACTIVE", G = W ? m?.allowedParentOrigins ?? [] : D, K = i(() => h?.iframeSnippet ? ee(h.iframeSnippet, N) : null, [h, N]), q = () => {
+		V(null);
+		let e = te(T);
 		if (!e) {
-			z("Enter a valid https origin, e.g. https://example.com");
+			V("Enter a valid https origin, e.g. https://example.com");
 			return;
 		}
-		if (U.includes(e)) {
-			C("");
+		if (G.includes(e)) {
+			E("");
 			return;
 		}
-		H && f ? y(f.id, [...U, e]) : T((t) => [...t, e]), C("");
-	}, K = (e) => {
-		H && f ? y(f.id, U.filter((t) => t !== e)) : T((t) => t.filter((t) => t !== e));
-	}, q = async () => {
-		if (z(null), w.length === 0) {
-			z("Add at least one allowed website domain before publishing.");
+		W && m ? x(m.id, [...G, e]) : O((t) => [...t, e]), E("");
+	}, J = (e) => {
+		W && m ? x(m.id, G.filter((t) => t !== e)) : O((t) => t.filter((t) => t !== e));
+	}, Y = async () => {
+		if (V(null), D.length === 0) {
+			V("Add at least one allowed website domain before publishing.");
 			return;
 		}
-		if (!E) {
-			z("Please confirm this dashboard is safe to be public.");
+		if (!k) {
+			V("Please confirm this dashboard is safe to be public.");
 			return;
 		}
-		await _(u, w, !0, {
-			theme: A,
-			showTitle: M,
-			showBranding: P
+		await y(f, D, !0, {
+			theme: N,
+			showTitle: F,
+			showBranding: L
 		});
-	}, J = async () => {
-		f && (z(null), await v(f.id, {
-			theme: A,
-			showTitle: M,
-			showBranding: P
-		}) && (L(!0), V.current && clearTimeout(V.current), V.current = setTimeout(() => L(!1), 1500)));
-	}, Y = async (e) => {
+	}, ie = async () => {
+		m && (V(null), await b(m.id, {
+			theme: N,
+			showTitle: F,
+			showBranding: L
+		}) && (z(!0), U.current && clearTimeout(U.current), U.current = setTimeout(() => z(!1), 1500)));
+	}, X = async (e) => {
 		try {
-			await navigator.clipboard.writeText(e), k(!0), setTimeout(() => k(!1), 1500);
+			await navigator.clipboard.writeText(e), M(!0), setTimeout(() => M(!1), 1500);
 		} catch {
-			z("Could not copy — select and copy manually.");
+			V("Could not copy — select and copy manually.");
 		}
-	}, X = {
+	}, ae = {
 		padding: "8px 14px",
 		borderRadius: "8px",
 		border: "none",
-		background: d.actionPrimaryBg,
+		background: p.actionPrimaryBg,
 		color: "#fff",
 		fontSize: "13px",
 		fontWeight: 600,
@@ -93,25 +95,25 @@ function u({ dashboardId: u, colors: d }) {
 	}, Z = {
 		padding: "8px 14px",
 		borderRadius: "8px",
-		border: `1px solid ${d.borderDefault}`,
+		border: `1px solid ${p.borderDefault}`,
 		background: "transparent",
-		color: d.textPrimary,
+		color: p.textPrimary,
 		fontSize: "13px",
 		cursor: "pointer"
-	}, ne = {
+	}, oe = {
 		flex: 1,
 		padding: "8px 10px",
 		borderRadius: "8px",
-		border: `1px solid ${d.borderDefault}`,
-		background: d.bgSecondary,
-		color: d.textPrimary,
+		border: `1px solid ${p.borderDefault}`,
+		background: p.bgSecondary,
+		color: p.textPrimary,
 		fontSize: "13px"
-	}, re = {
+	}, se = {
 		padding: "4px 8px",
 		borderRadius: "6px",
-		border: `1px solid ${d.borderDefault}`,
-		background: d.bgSecondary,
-		color: d.textPrimary,
+		border: `1px solid ${p.borderDefault}`,
+		background: p.bgSecondary,
+		color: p.textPrimary,
 		fontSize: "12px",
 		cursor: "pointer"
 	}, Q = {
@@ -119,164 +121,165 @@ function u({ dashboardId: u, colors: d }) {
 		gap: "8px",
 		alignItems: "flex-start",
 		fontSize: "12px",
-		color: d.textSecondary
-	}, $ = /* @__PURE__ */ c("div", {
+		color: p.textSecondary
+	}, $ = /* @__PURE__ */ u("div", {
 		style: {
 			display: "flex",
 			flexDirection: "column",
 			gap: "10px"
 		},
 		children: [
-			/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ u("label", {
 				style: {
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "space-between",
 					gap: "8px"
 				},
-				children: [/* @__PURE__ */ s("span", {
+				children: [/* @__PURE__ */ l("span", {
 					style: {
 						fontSize: "12px",
-						color: d.textSecondary
+						color: p.textSecondary
 					},
 					children: "Theme"
-				}), /* @__PURE__ */ s("select", {
-					value: A,
+				}), /* @__PURE__ */ l("select", {
+					value: N,
 					onChange: (e) => {
 						let t = e.target.value;
-						(t === "light" || t === "dark" || t === "auto") && j(t);
+						(t === "light" || t === "dark" || t === "auto") && P(t);
 					},
-					style: re,
-					children: ee.map((e) => /* @__PURE__ */ s("option", {
+					style: se,
+					children: d.map((e) => /* @__PURE__ */ l("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				})]
 			}),
-			/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ u("label", {
 				style: Q,
-				children: [/* @__PURE__ */ s("input", {
+				children: [/* @__PURE__ */ l("input", {
 					type: "checkbox",
-					checked: M,
-					onChange: (e) => N(e.target.checked)
-				}), /* @__PURE__ */ s("span", { children: "Show the dashboard title as a header" })]
+					checked: F,
+					onChange: (e) => I(e.target.checked)
+				}), /* @__PURE__ */ l("span", { children: "Show the dashboard title as a header" })]
 			}),
-			/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ u("label", {
 				style: Q,
-				children: [/* @__PURE__ */ s("input", {
+				children: [/* @__PURE__ */ l("input", {
 					type: "checkbox",
-					checked: P,
-					onChange: (e) => F(e.target.checked)
-				}), /* @__PURE__ */ s("span", { children: "Show a subtle “Powered by BigConsole” footer" })]
+					checked: L,
+					onChange: (e) => R(e.target.checked)
+				}), /* @__PURE__ */ l("span", { children: "Show a subtle “Powered by BigConsole” footer" })]
 			})
 		]
 	});
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ u("div", {
 		style: { padding: "20px 24px" },
 		children: [
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				style: {
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "space-between",
 					padding: "12px 14px",
 					borderRadius: "10px",
-					background: d.bgSecondary,
+					background: p.bgSecondary,
 					marginBottom: "16px"
 				},
-				children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
 					style: {
 						fontSize: "14px",
 						fontWeight: 600,
-						color: d.textPrimary
+						color: p.textPrimary
 					},
 					children: "Publish to the web"
-				}), /* @__PURE__ */ s("div", {
+				}), /* @__PURE__ */ l("div", {
 					style: {
 						fontSize: "12px",
-						color: d.textSecondary,
+						color: p.textSecondary,
 						marginTop: "2px"
 					},
-					children: H ? "This dashboard is live. Anyone with the link on an allowed website sees its live data." : "Embed this dashboard on your website. Viewers see live data — no login required."
-				})] }), /* @__PURE__ */ s("span", {
+					children: W ? "This dashboard is live. Anyone with the link on an allowed website sees its live data." : "Embed this dashboard on your website. Viewers see live data — no login required."
+				})] }), /* @__PURE__ */ l("span", {
 					style: {
 						fontSize: "11px",
 						fontWeight: 700,
 						padding: "3px 8px",
 						borderRadius: "999px",
 						color: "#fff",
-						background: H ? d.statusSuccessBg : d.textTertiary
+						background: W ? p.statusSuccessBg : p.textTertiary
 					},
-					children: H ? "PUBLISHED" : "PRIVATE"
+					children: W ? "PUBLISHED" : "PRIVATE"
 				})]
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				style: { marginBottom: "16px" },
 				children: [
-					/* @__PURE__ */ s("div", {
+					/* @__PURE__ */ l("div", {
 						style: {
 							fontSize: "12px",
 							fontWeight: 600,
-							color: d.textSecondary,
+							color: p.textSecondary,
 							marginBottom: "6px"
 						},
 						children: "Allowed website domains"
 					}),
-					/* @__PURE__ */ c("div", {
+					/* @__PURE__ */ u("div", {
 						style: {
 							display: "flex",
 							gap: "8px",
 							marginBottom: "8px"
 						},
-						children: [/* @__PURE__ */ s("input", {
-							style: ne,
+						children: [/* @__PURE__ */ l("input", {
+							style: oe,
 							placeholder: "https://yoursite.com",
-							value: S,
-							onChange: (e) => C(e.target.value),
+							value: T,
+							onChange: (e) => E(e.target.value),
 							onKeyDown: (e) => {
-								e.key === "Enter" && G();
+								e.key === "Enter" && q();
 							}
-						}), /* @__PURE__ */ s("button", {
+						}), /* @__PURE__ */ l("button", {
 							style: Z,
-							onClick: G,
+							onClick: q,
 							type: "button",
+							disabled: !w,
 							children: "Add"
 						})]
 					}),
-					U.length === 0 ? /* @__PURE__ */ s("div", {
+					G.length === 0 ? /* @__PURE__ */ l("div", {
 						style: {
 							fontSize: "12px",
-							color: d.textTertiary
+							color: p.textTertiary
 						},
 						children: "No domains yet. Only listed https domains may frame this dashboard."
-					}) : /* @__PURE__ */ s("div", {
+					}) : /* @__PURE__ */ l("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							gap: "6px"
 						},
-						children: U.map((e) => /* @__PURE__ */ c("div", {
+						children: G.map((e) => /* @__PURE__ */ u("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								justifyContent: "space-between",
 								padding: "6px 10px",
 								borderRadius: "8px",
-								background: d.bgTertiary
+								background: p.bgTertiary
 							},
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ l("span", {
 								style: {
 									fontSize: "13px",
-									color: d.textPrimary
+									color: p.textPrimary
 								},
 								children: e
-							}), /* @__PURE__ */ s("button", {
+							}), w && /* @__PURE__ */ l("button", {
 								style: {
 									...Z,
 									padding: "2px 8px",
-									color: d.statusErrorText
+									color: p.statusErrorText
 								},
-								onClick: () => K(e),
+								onClick: () => J(e),
 								type: "button",
 								children: "Remove"
 							})]
@@ -284,184 +287,184 @@ function u({ dashboardId: u, colors: d }) {
 					})
 				]
 			}),
-			!H && /* @__PURE__ */ c("div", {
+			!W && /* @__PURE__ */ u("div", {
 				style: { marginBottom: "16px" },
-				children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ l("div", {
 					style: {
 						fontSize: "12px",
 						fontWeight: 600,
-						color: d.textSecondary,
+						color: p.textSecondary,
 						marginBottom: "8px"
 					},
 					children: "Presentation"
 				}), $]
 			}),
-			!H && /* @__PURE__ */ c("div", {
+			!W && /* @__PURE__ */ u("div", {
 				style: { marginBottom: "8px" },
-				children: [/* @__PURE__ */ c("label", {
+				children: [/* @__PURE__ */ u("label", {
 					style: {
 						display: "flex",
 						gap: "8px",
 						alignItems: "flex-start",
 						marginBottom: "12px"
 					},
-					children: [/* @__PURE__ */ s("input", {
+					children: [/* @__PURE__ */ l("input", {
 						type: "checkbox",
-						checked: E,
-						onChange: (e) => D(e.target.checked)
-					}), /* @__PURE__ */ s("span", {
+						checked: k,
+						onChange: (e) => A(e.target.checked)
+					}), /* @__PURE__ */ l("span", {
 						style: {
 							fontSize: "12px",
-							color: d.textSecondary
+							color: p.textSecondary
 						},
 						children: "I understand this makes the dashboard's live data visible to anyone with the link, and I confirm it is safe to be public."
 					})]
-				}), /* @__PURE__ */ s("button", {
-					style: X,
-					onClick: q,
-					disabled: m,
+				}), /* @__PURE__ */ l("button", {
+					style: ae,
+					onClick: Y,
+					disabled: g || !w,
 					type: "button",
-					children: m ? "Publishing…" : "Publish to web"
+					children: g ? "Publishing…" : "Publish to web"
 				})]
 			}),
-			H && /* @__PURE__ */ c(o, { children: [
-				W ? /* @__PURE__ */ c("div", {
+			W && /* @__PURE__ */ u(c, { children: [
+				K ? /* @__PURE__ */ u("div", {
 					style: { marginBottom: "16px" },
 					children: [
-						/* @__PURE__ */ s("div", {
+						/* @__PURE__ */ l("div", {
 							style: { marginBottom: "6px" },
-							children: /* @__PURE__ */ s("span", {
+							children: /* @__PURE__ */ l("span", {
 								style: {
 									fontSize: "12px",
 									fontWeight: 600,
-									color: d.textSecondary
+									color: p.textSecondary
 								},
 								children: "Embed snippet"
 							})
 						}),
-						/* @__PURE__ */ s("textarea", {
+						/* @__PURE__ */ l("textarea", {
 							readOnly: !0,
-							value: W,
+							value: K,
 							style: {
 								width: "100%",
 								minHeight: "96px",
 								padding: "10px",
 								borderRadius: "8px",
-								border: `1px solid ${d.borderDefault}`,
-								background: d.bgSecondary,
-								color: d.textPrimary,
+								border: `1px solid ${p.borderDefault}`,
+								background: p.bgSecondary,
+								color: p.textPrimary,
 								fontFamily: "monospace",
 								fontSize: "12px",
 								resize: "vertical"
 							}
 						}),
-						/* @__PURE__ */ s("button", {
+						/* @__PURE__ */ l("button", {
 							style: {
 								...Z,
 								marginTop: "8px"
 							},
-							onClick: () => Y(W),
+							onClick: () => X(K),
 							type: "button",
-							children: O ? "Copied ✓" : "Copy snippet"
+							children: j ? "Copied ✓" : "Copy snippet"
 						})
 					]
-				}) : /* @__PURE__ */ c("div", {
+				}) : /* @__PURE__ */ u("div", {
 					style: {
 						fontSize: "12px",
-						color: d.textSecondary,
-						background: d.bgSecondary,
+						color: p.textSecondary,
+						background: p.bgSecondary,
 						borderRadius: "8px",
 						padding: "10px 12px",
 						marginBottom: "16px"
 					},
 					children: [
 						"The embed link is already active. For security the snippet (which contains the secret key) is only shown once at publish time — use ",
-						/* @__PURE__ */ s("strong", { children: "Rotate link" }),
+						/* @__PURE__ */ l("strong", { children: "Rotate link" }),
 						" to generate a fresh snippet."
 					]
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ u("div", {
 					style: { marginBottom: "16px" },
 					children: [
-						/* @__PURE__ */ s("div", {
+						/* @__PURE__ */ l("div", {
 							style: {
 								fontSize: "12px",
 								fontWeight: 600,
-								color: d.textSecondary,
+								color: p.textSecondary,
 								marginBottom: "8px"
 							},
 							children: "Presentation"
 						}),
 						$,
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ u("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: "10px",
 								marginTop: "10px"
 							},
-							children: [/* @__PURE__ */ s("button", {
+							children: [/* @__PURE__ */ l("button", {
 								style: Z,
-								onClick: J,
-								disabled: m,
+								onClick: ie,
+								disabled: g || !w,
 								type: "button",
-								children: m ? "Applying…" : "Apply changes"
-							}), I && /* @__PURE__ */ s("span", {
+								children: g ? "Applying…" : "Apply changes"
+							}), re && /* @__PURE__ */ l("span", {
 								style: {
 									fontSize: "12px",
-									color: d.textTertiary
+									color: p.textTertiary
 								},
 								children: "Updated ✓"
 							})]
 						}),
-						/* @__PURE__ */ s("div", {
+						/* @__PURE__ */ l("div", {
 							style: {
 								fontSize: "11px",
-								color: d.textTertiary,
+								color: p.textTertiary,
 								marginTop: "6px"
 							},
 							children: "Changes apply to live embeds within a few seconds — no re-publish needed, and the embed link stays the same."
 						})
 					]
 				}),
-				/* @__PURE__ */ c("div", {
+				w && /* @__PURE__ */ u("div", {
 					style: {
 						display: "flex",
 						gap: "8px"
 					},
-					children: [/* @__PURE__ */ s("button", {
+					children: [/* @__PURE__ */ l("button", {
 						style: Z,
-						onClick: () => f && b(f.id),
-						disabled: m,
+						onClick: () => m && S(m.id),
+						disabled: g,
 						type: "button",
 						children: "Rotate link"
-					}), /* @__PURE__ */ s("button", {
+					}), /* @__PURE__ */ l("button", {
 						style: {
 							...Z,
-							color: d.statusErrorText,
-							borderColor: d.statusErrorText
+							color: p.statusErrorText,
+							borderColor: p.statusErrorText
 						},
 						onClick: () => {
-							f && window.confirm("Unpublish this dashboard? The embed will stop working immediately for anyone using the link.") && x(f.id);
+							m && window.confirm("Unpublish this dashboard? The embed will stop working immediately for anyone using the link.") && ne(m.id);
 						},
-						disabled: m,
+						disabled: g,
 						type: "button",
 						children: "Unpublish"
 					})]
 				})
 			] }),
-			(R || h) && /* @__PURE__ */ s("div", {
+			(B || _) && /* @__PURE__ */ l("div", {
 				style: {
 					marginTop: "12px",
 					fontSize: "12px",
-					color: d.statusErrorText
+					color: p.statusErrorText
 				},
-				children: R ?? h?.message
+				children: B ?? _?.message
 			})
 		]
 	});
 }
 //#endregion
-export { u as default };
+export { f as default };
 
 //# sourceMappingURL=EmbedTab.js.map