@burdenoff/microfe-bigconsole 2026.803.1 → 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,28 @@
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
- function s(e) {
5
+ var ee = [
6
+ {
7
+ value: "light",
8
+ label: "Light"
9
+ },
10
+ {
11
+ value: "dark",
12
+ label: "Dark"
13
+ },
14
+ {
15
+ value: "auto",
16
+ label: "Auto (match viewer)"
17
+ }
18
+ ];
19
+ function l(e, t) {
20
+ return t === "light" ? e : e.replace(/(?<=\s)src="([^"]*)"/, (e, n) => {
21
+ let r = n.indexOf("#"), i = r === -1 ? n : n.slice(0, r), a = r === -1 ? "" : n.slice(r);
22
+ return `src="${i}${i.includes("?") ? "&" : "?"}theme=${t}${a}"`;
23
+ });
24
+ }
25
+ function te(e) {
6
26
  let t = e.trim();
7
27
  if (!t) return null;
8
28
  try {
@@ -12,173 +32,251 @@ function s(e) {
12
32
  return null;
13
33
  }
14
34
  }
15
- function c({ dashboardId: c, colors: l }) {
16
- let { policy: u, secret: d, loading: f, error: p, fetchPolicy: m, publishToWeb: h, setAllowedOrigins: g, rotateKey: _, unpublish: v } = e(), [y, b] = r(""), [x, S] = r([]), [C, w] = r(!1), [T, E] = r(!1), [D, O] = r(null);
17
- t(() => {
18
- c && m(c);
19
- }, [c, m]);
20
- let k = u?.status === "ACTIVE", A = k ? u?.allowedParentOrigins ?? [] : x, j = n(() => d?.iframeSnippet ? d.iframeSnippet : null, [d]), M = () => {
21
- O(null);
22
- let e = s(y);
35
+ function u({ dashboardId: u, colors: d }) {
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
+ u && g(u);
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);
23
47
  if (!e) {
24
- O("Enter a valid https origin, e.g. https://example.com");
48
+ z("Enter a valid https origin, e.g. https://example.com");
25
49
  return;
26
50
  }
27
- if (A.includes(e)) {
28
- b("");
51
+ if (U.includes(e)) {
52
+ C("");
29
53
  return;
30
54
  }
31
- k && u ? g(u.id, [...A, e]) : S((t) => [...t, e]), b("");
32
- }, N = (e) => {
33
- k && u ? g(u.id, A.filter((t) => t !== e)) : S((t) => t.filter((t) => t !== e));
34
- }, P = async () => {
35
- if (O(null), x.length === 0) {
36
- O("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.");
37
61
  return;
38
62
  }
39
- if (!C) {
40
- O("Please confirm this dashboard is safe to be public.");
63
+ if (!E) {
64
+ z("Please confirm this dashboard is safe to be public.");
41
65
  return;
42
66
  }
43
- await h(c, x, !0);
44
- }, F = 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) => {
45
79
  try {
46
- await navigator.clipboard.writeText(e), E(!0), setTimeout(() => E(!1), 1500);
80
+ await navigator.clipboard.writeText(e), k(!0), setTimeout(() => k(!1), 1500);
47
81
  } catch {
48
- O("Could not copy — select and copy manually.");
82
+ z("Could not copy — select and copy manually.");
49
83
  }
50
- }, I = {
84
+ }, X = {
51
85
  padding: "8px 14px",
52
86
  borderRadius: "8px",
53
87
  border: "none",
54
- background: l.actionPrimaryBg,
88
+ background: d.actionPrimaryBg,
55
89
  color: "#fff",
56
90
  fontSize: "13px",
57
91
  fontWeight: 600,
58
92
  cursor: "pointer"
59
- }, L = {
93
+ }, Z = {
60
94
  padding: "8px 14px",
61
95
  borderRadius: "8px",
62
- border: `1px solid ${l.borderDefault}`,
96
+ border: `1px solid ${d.borderDefault}`,
63
97
  background: "transparent",
64
- color: l.textPrimary,
98
+ color: d.textPrimary,
65
99
  fontSize: "13px",
66
100
  cursor: "pointer"
67
- }, R = {
101
+ }, ne = {
68
102
  flex: 1,
69
103
  padding: "8px 10px",
70
104
  borderRadius: "8px",
71
- border: `1px solid ${l.borderDefault}`,
72
- background: l.bgSecondary,
73
- color: l.textPrimary,
105
+ border: `1px solid ${d.borderDefault}`,
106
+ background: d.bgSecondary,
107
+ color: d.textPrimary,
74
108
  fontSize: "13px"
75
- };
76
- 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", {
77
175
  style: { padding: "20px 24px" },
78
176
  children: [
79
- /* @__PURE__ */ o("div", {
177
+ /* @__PURE__ */ c("div", {
80
178
  style: {
81
179
  display: "flex",
82
180
  alignItems: "center",
83
181
  justifyContent: "space-between",
84
182
  padding: "12px 14px",
85
183
  borderRadius: "10px",
86
- background: l.bgSecondary,
184
+ background: d.bgSecondary,
87
185
  marginBottom: "16px"
88
186
  },
89
- children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", {
187
+ children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("div", {
90
188
  style: {
91
189
  fontSize: "14px",
92
190
  fontWeight: 600,
93
- color: l.textPrimary
191
+ color: d.textPrimary
94
192
  },
95
193
  children: "Publish to the web"
96
- }), /* @__PURE__ */ a("div", {
194
+ }), /* @__PURE__ */ s("div", {
97
195
  style: {
98
196
  fontSize: "12px",
99
- color: l.textSecondary,
197
+ color: d.textSecondary,
100
198
  marginTop: "2px"
101
199
  },
102
- children: k ? "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."
103
- })] }), /* @__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", {
104
202
  style: {
105
203
  fontSize: "11px",
106
204
  fontWeight: 700,
107
205
  padding: "3px 8px",
108
206
  borderRadius: "999px",
109
207
  color: "#fff",
110
- background: k ? l.statusSuccessBg : l.textTertiary
208
+ background: H ? d.statusSuccessBg : d.textTertiary
111
209
  },
112
- children: k ? "PUBLISHED" : "PRIVATE"
210
+ children: H ? "PUBLISHED" : "PRIVATE"
113
211
  })]
114
212
  }),
115
- /* @__PURE__ */ o("div", {
213
+ /* @__PURE__ */ c("div", {
116
214
  style: { marginBottom: "16px" },
117
215
  children: [
118
- /* @__PURE__ */ a("div", {
216
+ /* @__PURE__ */ s("div", {
119
217
  style: {
120
218
  fontSize: "12px",
121
219
  fontWeight: 600,
122
- color: l.textSecondary,
220
+ color: d.textSecondary,
123
221
  marginBottom: "6px"
124
222
  },
125
223
  children: "Allowed website domains"
126
224
  }),
127
- /* @__PURE__ */ o("div", {
225
+ /* @__PURE__ */ c("div", {
128
226
  style: {
129
227
  display: "flex",
130
228
  gap: "8px",
131
229
  marginBottom: "8px"
132
230
  },
133
- children: [/* @__PURE__ */ a("input", {
134
- style: R,
231
+ children: [/* @__PURE__ */ s("input", {
232
+ style: ne,
135
233
  placeholder: "https://yoursite.com",
136
- value: y,
137
- onChange: (e) => b(e.target.value),
234
+ value: S,
235
+ onChange: (e) => C(e.target.value),
138
236
  onKeyDown: (e) => {
139
- e.key === "Enter" && M();
237
+ e.key === "Enter" && G();
140
238
  }
141
- }), /* @__PURE__ */ a("button", {
142
- style: L,
143
- onClick: M,
239
+ }), /* @__PURE__ */ s("button", {
240
+ style: Z,
241
+ onClick: G,
144
242
  type: "button",
145
243
  children: "Add"
146
244
  })]
147
245
  }),
148
- A.length === 0 ? /* @__PURE__ */ a("div", {
246
+ U.length === 0 ? /* @__PURE__ */ s("div", {
149
247
  style: {
150
248
  fontSize: "12px",
151
- color: l.textTertiary
249
+ color: d.textTertiary
152
250
  },
153
251
  children: "No domains yet. Only listed https domains may frame this dashboard."
154
- }) : /* @__PURE__ */ a("div", {
252
+ }) : /* @__PURE__ */ s("div", {
155
253
  style: {
156
254
  display: "flex",
157
255
  flexDirection: "column",
158
256
  gap: "6px"
159
257
  },
160
- children: A.map((e) => /* @__PURE__ */ o("div", {
258
+ children: U.map((e) => /* @__PURE__ */ c("div", {
161
259
  style: {
162
260
  display: "flex",
163
261
  alignItems: "center",
164
262
  justifyContent: "space-between",
165
263
  padding: "6px 10px",
166
264
  borderRadius: "8px",
167
- background: l.bgTertiary
265
+ background: d.bgTertiary
168
266
  },
169
- children: [/* @__PURE__ */ a("span", {
267
+ children: [/* @__PURE__ */ s("span", {
170
268
  style: {
171
269
  fontSize: "13px",
172
- color: l.textPrimary
270
+ color: d.textPrimary
173
271
  },
174
272
  children: e
175
- }), /* @__PURE__ */ a("button", {
273
+ }), /* @__PURE__ */ s("button", {
176
274
  style: {
177
- ...L,
275
+ ...Z,
178
276
  padding: "2px 8px",
179
- color: l.statusErrorText
277
+ color: d.statusErrorText
180
278
  },
181
- onClick: () => N(e),
279
+ onClick: () => K(e),
182
280
  type: "button",
183
281
  children: "Remove"
184
282
  })]
@@ -186,123 +284,184 @@ function c({ dashboardId: c, colors: l }) {
186
284
  })
187
285
  ]
188
286
  }),
189
- !k && /* @__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", {
190
300
  style: { marginBottom: "8px" },
191
- children: [/* @__PURE__ */ o("label", {
301
+ children: [/* @__PURE__ */ c("label", {
192
302
  style: {
193
303
  display: "flex",
194
304
  gap: "8px",
195
305
  alignItems: "flex-start",
196
306
  marginBottom: "12px"
197
307
  },
198
- children: [/* @__PURE__ */ a("input", {
308
+ children: [/* @__PURE__ */ s("input", {
199
309
  type: "checkbox",
200
- checked: C,
201
- onChange: (e) => w(e.target.checked)
202
- }), /* @__PURE__ */ a("span", {
310
+ checked: E,
311
+ onChange: (e) => D(e.target.checked)
312
+ }), /* @__PURE__ */ s("span", {
203
313
  style: {
204
314
  fontSize: "12px",
205
- color: l.textSecondary
315
+ color: d.textSecondary
206
316
  },
207
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."
208
318
  })]
209
- }), /* @__PURE__ */ a("button", {
210
- style: I,
211
- onClick: P,
212
- disabled: f,
319
+ }), /* @__PURE__ */ s("button", {
320
+ style: X,
321
+ onClick: q,
322
+ disabled: m,
213
323
  type: "button",
214
- children: f ? "Publishing…" : "Publish to web"
324
+ children: m ? "Publishing…" : "Publish to web"
215
325
  })]
216
326
  }),
217
- k && /* @__PURE__ */ o(i, { children: [j ? /* @__PURE__ */ o("div", {
218
- style: { marginBottom: "16px" },
219
- children: [
220
- /* @__PURE__ */ a("div", {
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", {
387
+ style: {
388
+ fontSize: "12px",
389
+ fontWeight: 600,
390
+ color: d.textSecondary,
391
+ marginBottom: "8px"
392
+ },
393
+ children: "Presentation"
394
+ }),
395
+ $,
396
+ /* @__PURE__ */ c("div", {
397
+ style: {
398
+ display: "flex",
399
+ alignItems: "center",
400
+ gap: "10px",
401
+ marginTop: "10px"
402
+ },
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", {
410
+ style: {
411
+ fontSize: "12px",
412
+ color: d.textTertiary
413
+ },
414
+ children: "Updated ✓"
415
+ })]
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", {
221
439
  style: {
222
- fontSize: "12px",
223
- fontWeight: 600,
224
- color: l.textSecondary,
225
- marginBottom: "6px"
440
+ ...Z,
441
+ color: d.statusErrorText,
442
+ borderColor: d.statusErrorText
226
443
  },
227
- children: "Embed snippet"
228
- }),
229
- /* @__PURE__ */ a("textarea", {
230
- readOnly: !0,
231
- value: j,
232
- style: {
233
- width: "100%",
234
- minHeight: "96px",
235
- padding: "10px",
236
- borderRadius: "8px",
237
- border: `1px solid ${l.borderDefault}`,
238
- background: l.bgSecondary,
239
- color: l.textPrimary,
240
- fontFamily: "monospace",
241
- fontSize: "12px",
242
- resize: "vertical"
243
- }
244
- }),
245
- /* @__PURE__ */ a("button", {
246
- style: {
247
- ...L,
248
- marginTop: "8px"
444
+ onClick: () => {
445
+ f && window.confirm("Unpublish this dashboard? The embed will stop working immediately for anyone using the link.") && x(f.id);
249
446
  },
250
- onClick: () => F(j),
447
+ disabled: m,
251
448
  type: "button",
252
- children: T ? "Copied ✓" : "Copy snippet"
253
- })
254
- ]
255
- }) : /* @__PURE__ */ o("div", {
256
- style: {
257
- fontSize: "12px",
258
- color: l.textSecondary,
259
- background: l.bgSecondary,
260
- borderRadius: "8px",
261
- padding: "10px 12px",
262
- marginBottom: "16px"
263
- },
264
- children: [
265
- "The embed link is already active. For security the snippet (which contains the secret key) is only shown once at publish time — use ",
266
- /* @__PURE__ */ a("strong", { children: "Rotate link" }),
267
- " to generate a fresh snippet."
268
- ]
269
- }), /* @__PURE__ */ o("div", {
270
- style: {
271
- display: "flex",
272
- gap: "8px"
273
- },
274
- children: [/* @__PURE__ */ a("button", {
275
- style: L,
276
- onClick: () => u && _(u.id),
277
- disabled: f,
278
- type: "button",
279
- children: "Rotate link"
280
- }), /* @__PURE__ */ a("button", {
281
- style: {
282
- ...L,
283
- color: l.statusErrorText,
284
- borderColor: l.statusErrorText
285
- },
286
- onClick: () => {
287
- u && window.confirm("Unpublish this dashboard? The embed will stop working immediately for anyone using the link.") && v(u.id);
288
- },
289
- disabled: f,
290
- type: "button",
291
- children: "Unpublish"
292
- })]
293
- })] }),
294
- (D || p) && /* @__PURE__ */ a("div", {
449
+ children: "Unpublish"
450
+ })]
451
+ })
452
+ ] }),
453
+ (R || h) && /* @__PURE__ */ s("div", {
295
454
  style: {
296
455
  marginTop: "12px",
297
456
  fontSize: "12px",
298
- color: l.statusErrorText
457
+ color: d.statusErrorText
299
458
  },
300
- children: D ?? p?.message
459
+ children: R ?? h?.message
301
460
  })
302
461
  ]
303
462
  });
304
463
  }
305
464
  //#endregion
306
- export { c as default };
465
+ export { u as default };
307
466
 
308
467
  //# sourceMappingURL=EmbedTab.js.map