@burdenoff/microfe-bigconsole 2026.803.2 → 2026.803.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
- import e from "../../../hooks/useDashboardEmbedPolicy.js";
2
- import { useEffect as t, useMemo as n, useState as r } from "react";
3
- import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
1
+ import e, { themeChoiceFromPolicy as t } from "../../../hooks/useDashboardEmbedPolicy.js";
2
+ import { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
3
+ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
4
4
  //#region src/bigconsole/components/dashboard/ShareDialog/EmbedTab.tsx
5
- var s = [
5
+ var ee = [
6
6
  {
7
7
  value: "light",
8
8
  label: "Light"
@@ -16,13 +16,13 @@ var s = [
16
16
  label: "Auto (match viewer)"
17
17
  }
18
18
  ];
19
- function c(e, t) {
19
+ function l(e, t) {
20
20
  return t === "light" ? e : e.replace(/(?<=\s)src="([^"]*)"/, (e, n) => {
21
21
  let r = n.indexOf("#"), i = r === -1 ? n : n.slice(0, r), a = r === -1 ? "" : n.slice(r);
22
22
  return `src="${i}${i.includes("?") ? "&" : "?"}theme=${t}${a}"`;
23
23
  });
24
24
  }
25
- function l(e) {
25
+ function te(e) {
26
26
  let t = e.trim();
27
27
  if (!t) return null;
28
28
  try {
@@ -33,41 +33,55 @@ function l(e) {
33
33
  }
34
34
  }
35
35
  function u({ dashboardId: u, colors: d }) {
36
- let { policy: f, secret: p, loading: m, error: h, fetchPolicy: g, publishToWeb: _, setAllowedOrigins: v, rotateKey: y, unpublish: b } = e(), [x, S] = r(""), [C, w] = r([]), [T, E] = r(!1), [D, O] = r(!1), [k, A] = r("light"), [j, M] = r(null);
37
- t(() => {
36
+ 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);
37
+ n(() => {
38
38
  u && g(u);
39
- }, [u, g]);
40
- let N = f?.status === "ACTIVE", P = N ? f?.allowedParentOrigins ?? [] : C, F = n(() => p?.iframeSnippet ? c(p.iframeSnippet, k) : null, [p, k]), I = () => {
41
- M(null);
42
- let e = l(x);
39
+ }, [u, g]), n(() => {
40
+ !f || B.current === f.id || (B.current = f.id, j(t(f.presentationTheme)), N(f.showDashboardTitle), F(f.showBrandingFooter));
41
+ }, [f]), n(() => () => {
42
+ V.current && clearTimeout(V.current);
43
+ }, []);
44
+ let H = f?.status === "ACTIVE", U = H ? f?.allowedParentOrigins ?? [] : w, W = r(() => p?.iframeSnippet ? l(p.iframeSnippet, A) : null, [p, A]), G = () => {
45
+ z(null);
46
+ let e = te(S);
43
47
  if (!e) {
44
- M("Enter a valid https origin, e.g. https://example.com");
48
+ z("Enter a valid https origin, e.g. https://example.com");
45
49
  return;
46
50
  }
47
- if (P.includes(e)) {
48
- S("");
51
+ if (U.includes(e)) {
52
+ C("");
49
53
  return;
50
54
  }
51
- N && f ? v(f.id, [...P, e]) : w((t) => [...t, e]), S("");
52
- }, L = (e) => {
53
- N && f ? v(f.id, P.filter((t) => t !== e)) : w((t) => t.filter((t) => t !== e));
54
- }, R = async () => {
55
- if (M(null), C.length === 0) {
56
- M("Add at least one allowed website domain before publishing.");
55
+ H && f ? y(f.id, [...U, e]) : T((t) => [...t, e]), C("");
56
+ }, K = (e) => {
57
+ H && f ? y(f.id, U.filter((t) => t !== e)) : T((t) => t.filter((t) => t !== e));
58
+ }, q = async () => {
59
+ if (z(null), w.length === 0) {
60
+ z("Add at least one allowed website domain before publishing.");
57
61
  return;
58
62
  }
59
- if (!T) {
60
- M("Please confirm this dashboard is safe to be public.");
63
+ if (!E) {
64
+ z("Please confirm this dashboard is safe to be public.");
61
65
  return;
62
66
  }
63
- await _(u, C, !0);
64
- }, z = async (e) => {
67
+ await _(u, w, !0, {
68
+ theme: A,
69
+ showTitle: M,
70
+ showBranding: P
71
+ });
72
+ }, J = async () => {
73
+ f && (z(null), await v(f.id, {
74
+ theme: A,
75
+ showTitle: M,
76
+ showBranding: P
77
+ }) && (L(!0), V.current && clearTimeout(V.current), V.current = setTimeout(() => L(!1), 1500)));
78
+ }, Y = async (e) => {
65
79
  try {
66
- await navigator.clipboard.writeText(e), O(!0), setTimeout(() => O(!1), 1500);
80
+ await navigator.clipboard.writeText(e), k(!0), setTimeout(() => k(!1), 1500);
67
81
  } catch {
68
- M("Could not copy — select and copy manually.");
82
+ z("Could not copy — select and copy manually.");
69
83
  }
70
- }, B = {
84
+ }, X = {
71
85
  padding: "8px 14px",
72
86
  borderRadius: "8px",
73
87
  border: "none",
@@ -76,7 +90,7 @@ function u({ dashboardId: u, colors: d }) {
76
90
  fontSize: "13px",
77
91
  fontWeight: 600,
78
92
  cursor: "pointer"
79
- }, V = {
93
+ }, Z = {
80
94
  padding: "8px 14px",
81
95
  borderRadius: "8px",
82
96
  border: `1px solid ${d.borderDefault}`,
@@ -84,7 +98,7 @@ function u({ dashboardId: u, colors: d }) {
84
98
  color: d.textPrimary,
85
99
  fontSize: "13px",
86
100
  cursor: "pointer"
87
- }, H = {
101
+ }, ne = {
88
102
  flex: 1,
89
103
  padding: "8px 10px",
90
104
  borderRadius: "8px",
@@ -92,11 +106,75 @@ function u({ dashboardId: u, colors: d }) {
92
106
  background: d.bgSecondary,
93
107
  color: d.textPrimary,
94
108
  fontSize: "13px"
95
- };
96
- return /* @__PURE__ */ o("div", {
109
+ }, re = {
110
+ padding: "4px 8px",
111
+ borderRadius: "6px",
112
+ border: `1px solid ${d.borderDefault}`,
113
+ background: d.bgSecondary,
114
+ color: d.textPrimary,
115
+ fontSize: "12px",
116
+ cursor: "pointer"
117
+ }, Q = {
118
+ display: "flex",
119
+ gap: "8px",
120
+ alignItems: "flex-start",
121
+ fontSize: "12px",
122
+ color: d.textSecondary
123
+ }, $ = /* @__PURE__ */ c("div", {
124
+ style: {
125
+ display: "flex",
126
+ flexDirection: "column",
127
+ gap: "10px"
128
+ },
129
+ children: [
130
+ /* @__PURE__ */ c("label", {
131
+ style: {
132
+ display: "flex",
133
+ alignItems: "center",
134
+ justifyContent: "space-between",
135
+ gap: "8px"
136
+ },
137
+ children: [/* @__PURE__ */ s("span", {
138
+ style: {
139
+ fontSize: "12px",
140
+ color: d.textSecondary
141
+ },
142
+ children: "Theme"
143
+ }), /* @__PURE__ */ s("select", {
144
+ value: A,
145
+ onChange: (e) => {
146
+ let t = e.target.value;
147
+ (t === "light" || t === "dark" || t === "auto") && j(t);
148
+ },
149
+ style: re,
150
+ children: ee.map((e) => /* @__PURE__ */ s("option", {
151
+ value: e.value,
152
+ children: e.label
153
+ }, e.value))
154
+ })]
155
+ }),
156
+ /* @__PURE__ */ c("label", {
157
+ style: Q,
158
+ children: [/* @__PURE__ */ s("input", {
159
+ type: "checkbox",
160
+ checked: M,
161
+ onChange: (e) => N(e.target.checked)
162
+ }), /* @__PURE__ */ s("span", { children: "Show the dashboard title as a header" })]
163
+ }),
164
+ /* @__PURE__ */ c("label", {
165
+ style: Q,
166
+ children: [/* @__PURE__ */ s("input", {
167
+ type: "checkbox",
168
+ checked: P,
169
+ onChange: (e) => F(e.target.checked)
170
+ }), /* @__PURE__ */ s("span", { children: "Show a subtle “Powered by BigConsole” footer" })]
171
+ })
172
+ ]
173
+ });
174
+ return /* @__PURE__ */ c("div", {
97
175
  style: { padding: "20px 24px" },
98
176
  children: [
99
- /* @__PURE__ */ o("div", {
177
+ /* @__PURE__ */ c("div", {
100
178
  style: {
101
179
  display: "flex",
102
180
  alignItems: "center",
@@ -106,36 +184,36 @@ function u({ dashboardId: u, colors: d }) {
106
184
  background: d.bgSecondary,
107
185
  marginBottom: "16px"
108
186
  },
109
- children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", {
187
+ children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("div", {
110
188
  style: {
111
189
  fontSize: "14px",
112
190
  fontWeight: 600,
113
191
  color: d.textPrimary
114
192
  },
115
193
  children: "Publish to the web"
116
- }), /* @__PURE__ */ a("div", {
194
+ }), /* @__PURE__ */ s("div", {
117
195
  style: {
118
196
  fontSize: "12px",
119
197
  color: d.textSecondary,
120
198
  marginTop: "2px"
121
199
  },
122
- children: N ? "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."
123
- })] }), /* @__PURE__ */ a("span", {
200
+ 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."
201
+ })] }), /* @__PURE__ */ s("span", {
124
202
  style: {
125
203
  fontSize: "11px",
126
204
  fontWeight: 700,
127
205
  padding: "3px 8px",
128
206
  borderRadius: "999px",
129
207
  color: "#fff",
130
- background: N ? d.statusSuccessBg : d.textTertiary
208
+ background: H ? d.statusSuccessBg : d.textTertiary
131
209
  },
132
- children: N ? "PUBLISHED" : "PRIVATE"
210
+ children: H ? "PUBLISHED" : "PRIVATE"
133
211
  })]
134
212
  }),
135
- /* @__PURE__ */ o("div", {
213
+ /* @__PURE__ */ c("div", {
136
214
  style: { marginBottom: "16px" },
137
215
  children: [
138
- /* @__PURE__ */ a("div", {
216
+ /* @__PURE__ */ s("div", {
139
217
  style: {
140
218
  fontSize: "12px",
141
219
  fontWeight: 600,
@@ -144,40 +222,40 @@ function u({ dashboardId: u, colors: d }) {
144
222
  },
145
223
  children: "Allowed website domains"
146
224
  }),
147
- /* @__PURE__ */ o("div", {
225
+ /* @__PURE__ */ c("div", {
148
226
  style: {
149
227
  display: "flex",
150
228
  gap: "8px",
151
229
  marginBottom: "8px"
152
230
  },
153
- children: [/* @__PURE__ */ a("input", {
154
- style: H,
231
+ children: [/* @__PURE__ */ s("input", {
232
+ style: ne,
155
233
  placeholder: "https://yoursite.com",
156
- value: x,
157
- onChange: (e) => S(e.target.value),
234
+ value: S,
235
+ onChange: (e) => C(e.target.value),
158
236
  onKeyDown: (e) => {
159
- e.key === "Enter" && I();
237
+ e.key === "Enter" && G();
160
238
  }
161
- }), /* @__PURE__ */ a("button", {
162
- style: V,
163
- onClick: I,
239
+ }), /* @__PURE__ */ s("button", {
240
+ style: Z,
241
+ onClick: G,
164
242
  type: "button",
165
243
  children: "Add"
166
244
  })]
167
245
  }),
168
- P.length === 0 ? /* @__PURE__ */ a("div", {
246
+ U.length === 0 ? /* @__PURE__ */ s("div", {
169
247
  style: {
170
248
  fontSize: "12px",
171
249
  color: d.textTertiary
172
250
  },
173
251
  children: "No domains yet. Only listed https domains may frame this dashboard."
174
- }) : /* @__PURE__ */ a("div", {
252
+ }) : /* @__PURE__ */ s("div", {
175
253
  style: {
176
254
  display: "flex",
177
255
  flexDirection: "column",
178
256
  gap: "6px"
179
257
  },
180
- children: P.map((e) => /* @__PURE__ */ o("div", {
258
+ children: U.map((e) => /* @__PURE__ */ c("div", {
181
259
  style: {
182
260
  display: "flex",
183
261
  alignItems: "center",
@@ -186,19 +264,19 @@ function u({ dashboardId: u, colors: d }) {
186
264
  borderRadius: "8px",
187
265
  background: d.bgTertiary
188
266
  },
189
- children: [/* @__PURE__ */ a("span", {
267
+ children: [/* @__PURE__ */ s("span", {
190
268
  style: {
191
269
  fontSize: "13px",
192
270
  color: d.textPrimary
193
271
  },
194
272
  children: e
195
- }), /* @__PURE__ */ a("button", {
273
+ }), /* @__PURE__ */ s("button", {
196
274
  style: {
197
- ...V,
275
+ ...Z,
198
276
  padding: "2px 8px",
199
277
  color: d.statusErrorText
200
278
  },
201
- onClick: () => L(e),
279
+ onClick: () => K(e),
202
280
  type: "button",
203
281
  children: "Remove"
204
282
  })]
@@ -206,157 +284,179 @@ function u({ dashboardId: u, colors: d }) {
206
284
  })
207
285
  ]
208
286
  }),
209
- !N && /* @__PURE__ */ o("div", {
287
+ !H && /* @__PURE__ */ c("div", {
288
+ style: { marginBottom: "16px" },
289
+ children: [/* @__PURE__ */ s("div", {
290
+ style: {
291
+ fontSize: "12px",
292
+ fontWeight: 600,
293
+ color: d.textSecondary,
294
+ marginBottom: "8px"
295
+ },
296
+ children: "Presentation"
297
+ }), $]
298
+ }),
299
+ !H && /* @__PURE__ */ c("div", {
210
300
  style: { marginBottom: "8px" },
211
- children: [/* @__PURE__ */ o("label", {
301
+ children: [/* @__PURE__ */ c("label", {
212
302
  style: {
213
303
  display: "flex",
214
304
  gap: "8px",
215
305
  alignItems: "flex-start",
216
306
  marginBottom: "12px"
217
307
  },
218
- children: [/* @__PURE__ */ a("input", {
308
+ children: [/* @__PURE__ */ s("input", {
219
309
  type: "checkbox",
220
- checked: T,
221
- onChange: (e) => E(e.target.checked)
222
- }), /* @__PURE__ */ a("span", {
310
+ checked: E,
311
+ onChange: (e) => D(e.target.checked)
312
+ }), /* @__PURE__ */ s("span", {
223
313
  style: {
224
314
  fontSize: "12px",
225
315
  color: d.textSecondary
226
316
  },
227
317
  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."
228
318
  })]
229
- }), /* @__PURE__ */ a("button", {
230
- style: B,
231
- onClick: R,
319
+ }), /* @__PURE__ */ s("button", {
320
+ style: X,
321
+ onClick: q,
232
322
  disabled: m,
233
323
  type: "button",
234
324
  children: m ? "Publishing…" : "Publish to web"
235
325
  })]
236
326
  }),
237
- N && /* @__PURE__ */ o(i, { children: [F ? /* @__PURE__ */ o("div", {
238
- style: { marginBottom: "16px" },
239
- children: [
240
- /* @__PURE__ */ o("div", {
241
- style: {
242
- display: "flex",
243
- alignItems: "center",
244
- justifyContent: "space-between",
245
- marginBottom: "6px"
246
- },
247
- children: [/* @__PURE__ */ a("span", {
327
+ H && /* @__PURE__ */ c(o, { children: [
328
+ W ? /* @__PURE__ */ c("div", {
329
+ style: { marginBottom: "16px" },
330
+ children: [
331
+ /* @__PURE__ */ s("div", {
332
+ style: { marginBottom: "6px" },
333
+ children: /* @__PURE__ */ s("span", {
334
+ style: {
335
+ fontSize: "12px",
336
+ fontWeight: 600,
337
+ color: d.textSecondary
338
+ },
339
+ children: "Embed snippet"
340
+ })
341
+ }),
342
+ /* @__PURE__ */ s("textarea", {
343
+ readOnly: !0,
344
+ value: W,
345
+ style: {
346
+ width: "100%",
347
+ minHeight: "96px",
348
+ padding: "10px",
349
+ borderRadius: "8px",
350
+ border: `1px solid ${d.borderDefault}`,
351
+ background: d.bgSecondary,
352
+ color: d.textPrimary,
353
+ fontFamily: "monospace",
354
+ fontSize: "12px",
355
+ resize: "vertical"
356
+ }
357
+ }),
358
+ /* @__PURE__ */ s("button", {
359
+ style: {
360
+ ...Z,
361
+ marginTop: "8px"
362
+ },
363
+ onClick: () => Y(W),
364
+ type: "button",
365
+ children: O ? "Copied ✓" : "Copy snippet"
366
+ })
367
+ ]
368
+ }) : /* @__PURE__ */ c("div", {
369
+ style: {
370
+ fontSize: "12px",
371
+ color: d.textSecondary,
372
+ background: d.bgSecondary,
373
+ borderRadius: "8px",
374
+ padding: "10px 12px",
375
+ marginBottom: "16px"
376
+ },
377
+ children: [
378
+ "The embed link is already active. For security the snippet (which contains the secret key) is only shown once at publish time — use ",
379
+ /* @__PURE__ */ s("strong", { children: "Rotate link" }),
380
+ " to generate a fresh snippet."
381
+ ]
382
+ }),
383
+ /* @__PURE__ */ c("div", {
384
+ style: { marginBottom: "16px" },
385
+ children: [
386
+ /* @__PURE__ */ s("div", {
248
387
  style: {
249
388
  fontSize: "12px",
250
389
  fontWeight: 600,
251
- color: d.textSecondary
390
+ color: d.textSecondary,
391
+ marginBottom: "8px"
252
392
  },
253
- children: "Embed snippet"
254
- }), /* @__PURE__ */ o("label", {
393
+ children: "Presentation"
394
+ }),
395
+ $,
396
+ /* @__PURE__ */ c("div", {
255
397
  style: {
256
398
  display: "flex",
257
399
  alignItems: "center",
258
- gap: "6px"
400
+ gap: "10px",
401
+ marginTop: "10px"
259
402
  },
260
- children: [/* @__PURE__ */ a("span", {
403
+ children: [/* @__PURE__ */ s("button", {
404
+ style: Z,
405
+ onClick: J,
406
+ disabled: m,
407
+ type: "button",
408
+ children: m ? "Applying…" : "Apply changes"
409
+ }), I && /* @__PURE__ */ s("span", {
261
410
  style: {
262
411
  fontSize: "12px",
263
412
  color: d.textTertiary
264
413
  },
265
- children: "Theme"
266
- }), /* @__PURE__ */ a("select", {
267
- value: k,
268
- onChange: (e) => {
269
- let t = e.target.value;
270
- (t === "light" || t === "dark" || t === "auto") && A(t);
271
- },
272
- style: {
273
- padding: "4px 8px",
274
- borderRadius: "6px",
275
- border: `1px solid ${d.borderDefault}`,
276
- background: d.bgSecondary,
277
- color: d.textPrimary,
278
- fontSize: "12px",
279
- cursor: "pointer"
280
- },
281
- children: s.map((e) => /* @__PURE__ */ a("option", {
282
- value: e.value,
283
- children: e.label
284
- }, e.value))
414
+ children: "Updated ✓"
285
415
  })]
286
- })]
287
- }),
288
- /* @__PURE__ */ a("textarea", {
289
- readOnly: !0,
290
- value: F,
291
- style: {
292
- width: "100%",
293
- minHeight: "96px",
294
- padding: "10px",
295
- borderRadius: "8px",
296
- border: `1px solid ${d.borderDefault}`,
297
- background: d.bgSecondary,
298
- color: d.textPrimary,
299
- fontFamily: "monospace",
300
- fontSize: "12px",
301
- resize: "vertical"
302
- }
303
- }),
304
- /* @__PURE__ */ a("button", {
416
+ }),
417
+ /* @__PURE__ */ s("div", {
418
+ style: {
419
+ fontSize: "11px",
420
+ color: d.textTertiary,
421
+ marginTop: "6px"
422
+ },
423
+ children: "Changes apply to live embeds within a few seconds — no re-publish needed, and the embed link stays the same."
424
+ })
425
+ ]
426
+ }),
427
+ /* @__PURE__ */ c("div", {
428
+ style: {
429
+ display: "flex",
430
+ gap: "8px"
431
+ },
432
+ children: [/* @__PURE__ */ s("button", {
433
+ style: Z,
434
+ onClick: () => f && b(f.id),
435
+ disabled: m,
436
+ type: "button",
437
+ children: "Rotate link"
438
+ }), /* @__PURE__ */ s("button", {
305
439
  style: {
306
- ...V,
307
- marginTop: "8px"
440
+ ...Z,
441
+ color: d.statusErrorText,
442
+ borderColor: d.statusErrorText
308
443
  },
309
- onClick: () => z(F),
444
+ onClick: () => {
445
+ f && window.confirm("Unpublish this dashboard? The embed will stop working immediately for anyone using the link.") && x(f.id);
446
+ },
447
+ disabled: m,
310
448
  type: "button",
311
- children: D ? "Copied ✓" : "Copy snippet"
312
- })
313
- ]
314
- }) : /* @__PURE__ */ o("div", {
315
- style: {
316
- fontSize: "12px",
317
- color: d.textSecondary,
318
- background: d.bgSecondary,
319
- borderRadius: "8px",
320
- padding: "10px 12px",
321
- marginBottom: "16px"
322
- },
323
- children: [
324
- "The embed link is already active. For security the snippet (which contains the secret key) is only shown once at publish time — use ",
325
- /* @__PURE__ */ a("strong", { children: "Rotate link" }),
326
- " to generate a fresh snippet."
327
- ]
328
- }), /* @__PURE__ */ o("div", {
329
- style: {
330
- display: "flex",
331
- gap: "8px"
332
- },
333
- children: [/* @__PURE__ */ a("button", {
334
- style: V,
335
- onClick: () => f && y(f.id),
336
- disabled: m,
337
- type: "button",
338
- children: "Rotate link"
339
- }), /* @__PURE__ */ a("button", {
340
- style: {
341
- ...V,
342
- color: d.statusErrorText,
343
- borderColor: d.statusErrorText
344
- },
345
- onClick: () => {
346
- f && window.confirm("Unpublish this dashboard? The embed will stop working immediately for anyone using the link.") && b(f.id);
347
- },
348
- disabled: m,
349
- type: "button",
350
- children: "Unpublish"
351
- })]
352
- })] }),
353
- (j || h) && /* @__PURE__ */ a("div", {
449
+ children: "Unpublish"
450
+ })]
451
+ })
452
+ ] }),
453
+ (R || h) && /* @__PURE__ */ s("div", {
354
454
  style: {
355
455
  marginTop: "12px",
356
456
  fontSize: "12px",
357
457
  color: d.statusErrorText
358
458
  },
359
- children: j ?? h?.message
459
+ children: R ?? h?.message
360
460
  })
361
461
  ]
362
462
  });