@burdenoff/microfe-bigconsole 2026.729.2 → 2026.729.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.
Files changed (7) hide show
  1. package/dist/bigconsole/components/widgets/ActionConfigDialog.js +412 -305
  2. package/dist/bigconsole/components/widgets/ActionConfigDialog.js.map +1 -1
  3. package/dist/bigconsole/components/widgets/PropertiesPanel.js +481 -420
  4. package/dist/bigconsole/components/widgets/PropertiesPanel.js.map +1 -1
  5. package/dist/bigconsole/hooks/useEventWebhooks.js +6 -2
  6. package/dist/bigconsole/hooks/useEventWebhooks.js.map +1 -1
  7. package/package.json +1 -1
package/dist/bigconsole/components/widgets/ActionConfigDialog.js CHANGED
@@ -1,26 +1,23 @@
1
1
  import { memo as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
2
- import { Pencil as a, Plus as o, Zap as s } from "lucide-react";
3
- import { Button as c, Checkbox as l, Dialog as ee, DialogContent as te, DialogDescription as u, DialogFooter as ne, DialogHeader as re, DialogTitle as ie, Input as d, Select as f, SelectContent as p, SelectItem as m, SelectTrigger as h, SelectValue as g, Spinner as ae, Textarea as _ } from "@burdenoff/fe-libs/ui";
4
- import { jsx as v, jsxs as y } from "react/jsx-runtime";
2
+ import { ChevronDown as ee, ChevronRight as te, Pencil as ne, Plus as re, Zap as ie } from "lucide-react";
3
+ import { Button as ae, Checkbox as a, Dialog as oe, DialogContent as se, DialogDescription as ce, DialogFooter as le, DialogHeader as ue, DialogTitle as de, Input as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Spinner as fe, Textarea as pe } from "@burdenoff/fe-libs/ui";
4
+ import { jsx as f, jsxs as p } from "react/jsx-runtime";
5
5
  //#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
6
- var oe = [
7
- {
8
- value: "BUTTON",
9
- label: "Button"
10
- },
11
- {
12
- value: "LINK",
13
- label: "Link"
14
- },
15
- {
16
- value: "EMIT_EVENT",
17
- label: "Emit Event"
18
- },
19
- {
20
- value: "CUSTOM",
21
- label: "Custom"
22
- }
23
- ], b = [
6
+ var me = [{
7
+ value: "WEBHOOK",
8
+ label: "Call a webhook / my API",
9
+ hint: "Sends an HTTP request to the URL below every time the button is clicked."
10
+ }, {
11
+ value: "EMIT",
12
+ label: "Just emit an event (advanced)",
13
+ hint: "Emits widget:<name>:clicked. Wire it up yourself in the Webhooks/Events section."
14
+ }], he = [
15
+ "POST",
16
+ "GET",
17
+ "PUT",
18
+ "PATCH",
19
+ "DELETE"
20
+ ], ge = [
24
21
  {
25
22
  value: "PRIMARY",
26
23
  label: "Primary",
@@ -46,7 +43,7 @@ var oe = [
46
43
  label: "Danger",
47
44
  color: "var(--color-action-danger-bg)"
48
45
  }
49
- ], x = [
46
+ ], _e = [
50
47
  {
51
48
  value: "",
52
49
  label: "No icon"
@@ -103,82 +100,127 @@ var oe = [
103
100
  value: "search",
104
101
  label: "Search"
105
102
  }
106
- ], S = e(function({ isOpen: e, action: S, isLoading: C = !1, onClose: w, onSave: T }) {
107
- let E = !!S, D = r(null), [O, k] = i(""), [A, j] = i(""), [M, N] = i("BUTTON"), [P, F] = i("PRIMARY"), [I, L] = i(""), [R, z] = i(!1), [B, V] = i(!1), [H, U] = i(!1), [W, G] = i("Confirm Action"), [K, q] = i("Are you sure you want to proceed?"), [J, Y] = i("Confirm"), [X, Z] = i("Cancel"), [Q, $] = i(null);
103
+ ];
104
+ function m(e) {
105
+ return e.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
106
+ }
107
+ var h = {
108
+ display: "block",
109
+ fontSize: "var(--font-size-body-sm)",
110
+ fontWeight: "var(--font-weight-semibold)",
111
+ color: "var(--color-text-primary)",
112
+ marginBottom: "var(--space-controlGap)"
113
+ }, g = {
114
+ fontSize: "var(--font-size-body-sm)",
115
+ color: "var(--color-text-muted)",
116
+ marginTop: "var(--space-controlGap)"
117
+ }, _ = {
118
+ zIndex: 9999,
119
+ backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface))",
120
+ border: "1px solid var(--color-border)",
121
+ boxShadow: "var(--shadow-elevation-3)",
122
+ borderRadius: "var(--radius-button)"
123
+ }, v = e(function({ isOpen: e, action: v, initialWebhook: y, isLoading: b = !1, saveError: ve, onClose: ye, onSave: be }) {
124
+ let x = !!v, S = r(null), C = r(!1), [w, T] = i(""), [E, D] = i(""), [O, k] = i(!1), [A, j] = i("PRIMARY"), [M, N] = i(""), [P, F] = i("WEBHOOK"), [I, L] = i(""), [R, z] = i("POST"), [B, V] = i(!1), [H, U] = i(!1), [xe, Se] = i(!1), [W, G] = i(!1), [K, q] = i("Confirm Action"), [J, Y] = i("Are you sure you want to proceed?"), [Ce, X] = i("Confirm"), [we, Z] = i("Cancel"), [Q, $] = i(null);
108
125
  n(() => {
109
- e && (S ? (k(S.name), j(S.label), N(S.type), F(S.style), L(S.icon || ""), z(S.disabled), V(S.hidden), U(!!S.confirmation), S.confirmation && (G(S.confirmation.title), q(S.confirmation.message), Y(S.confirmation.confirmLabel || "Confirm"), Z(S.confirmation.cancelLabel || "Cancel"))) : (k(""), j(""), N("BUTTON"), F("PRIMARY"), L(""), z(!1), V(!1), U(!1), G("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel")), $(null), setTimeout(() => D.current?.focus(), 100));
110
- }, [e, S]);
111
- let se = t((e) => {
126
+ if (!e) return;
127
+ C.current = !1, L(""), z("POST"), v ? (T(v.label), D(v.name), k(!1), j(v.style), N(v.icon || ""), V(v.disabled), U(v.hidden), F("EMIT"), G(!!v.confirmation), v.confirmation ? (q(v.confirmation.title), Y(v.confirmation.message), X(v.confirmation.confirmLabel || "Confirm"), Z(v.confirmation.cancelLabel || "Cancel")) : (q("Confirm Action"), Y("Are you sure you want to proceed?"), X("Confirm"), Z("Cancel"))) : (T(""), D(""), k(!1), j("PRIMARY"), N(""), F("WEBHOOK"), V(!1), U(!1), G(!1), q("Confirm Action"), Y("Are you sure you want to proceed?"), X("Confirm"), Z("Cancel")), Se(!1), $(null);
128
+ let t = requestAnimationFrame(() => requestAnimationFrame(() => S.current?.focus()));
129
+ return () => cancelAnimationFrame(t);
130
+ }, [e, v]), n(() => {
131
+ !e || !y || C.current || (F("WEBHOOK"), L(y.url), z(y.method));
132
+ }, [e, y]);
133
+ let Te = t((e) => {
134
+ T(e), O || D(m(e)), Q && $(null);
135
+ }, [O, Q]), Ee = t((e) => {
112
136
  e.preventDefault();
113
- let t = O.trim(), n = A.trim();
137
+ let t = w.trim();
114
138
  if (!t) {
115
- $("Action name is required"), D.current?.focus();
139
+ $("Button label is required"), S.current?.focus();
116
140
  return;
117
141
  }
142
+ let n = x && v ? v.name : m(O ? E : w) || m(w);
118
143
  if (!n) {
119
- $("Action label is required");
144
+ $("Enter a label using letters or numbers");
120
145
  return;
121
146
  }
122
- let r = H ? {
123
- title: W.trim() || "Confirm Action",
124
- message: K.trim() || "Are you sure?",
125
- confirmLabel: J.trim() || "Confirm",
126
- cancelLabel: X.trim() || "Cancel"
127
- } : void 0;
128
- T(E && S ? {
129
- id: S.id,
130
- name: t,
131
- label: n,
132
- type: M,
133
- style: P,
134
- icon: I || void 0,
135
- confirmation: H ? r : null,
136
- disabled: R,
137
- hidden: B
147
+ if (P === "WEBHOOK") {
148
+ let e = I.trim();
149
+ if (!e) {
150
+ $("Enter the URL to call when the button is clicked");
151
+ return;
152
+ }
153
+ if (!/^https?:\/\//i.test(e)) {
154
+ $("Webhook URL must start with http:// or https://");
155
+ return;
156
+ }
157
+ }
158
+ let r = W ? {
159
+ title: K.trim() || "Confirm Action",
160
+ message: J.trim() || "Are you sure?",
161
+ confirmLabel: Ce.trim() || "Confirm",
162
+ cancelLabel: we.trim() || "Cancel"
163
+ } : void 0, i = P === "WEBHOOK" ? {
164
+ url: I.trim(),
165
+ method: R
166
+ } : null;
167
+ be(x && v ? {
168
+ id: v.id,
169
+ name: n,
170
+ label: t,
171
+ type: "BUTTON",
172
+ style: A,
173
+ icon: M || void 0,
174
+ confirmation: W ? r : null,
175
+ disabled: B,
176
+ hidden: H
138
177
  } : {
139
- name: t,
140
- label: n,
141
- type: M,
142
- style: P,
143
- icon: I || void 0,
178
+ name: n,
179
+ label: t,
180
+ type: "BUTTON",
181
+ style: A,
182
+ icon: M || void 0,
144
183
  confirmation: r,
145
- disabled: R,
146
- hidden: B
147
- });
184
+ disabled: B,
185
+ hidden: H
186
+ }, i);
148
187
  }, [
188
+ w,
189
+ E,
149
190
  O,
150
- A,
151
- M,
152
191
  P,
153
192
  I,
154
193
  R,
194
+ A,
195
+ M,
155
196
  B,
156
197
  H,
157
198
  W,
158
199
  K,
159
200
  J,
160
- X,
161
- E,
162
- S,
163
- T
164
- ]);
165
- return /* @__PURE__ */ v(ee, {
201
+ Ce,
202
+ we,
203
+ x,
204
+ v,
205
+ be
206
+ ]), De = (e) => ge.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)", Oe = me.find((e) => e.value === P);
207
+ return /* @__PURE__ */ f(oe, {
166
208
  open: e,
167
- onOpenChange: (e) => !e && !C && w(),
168
- children: /* @__PURE__ */ y(te, {
209
+ onOpenChange: (e) => !e && !b && ye(),
210
+ children: /* @__PURE__ */ p(se, {
169
211
  style: {
170
212
  maxWidth: "500px",
171
213
  padding: 0
172
214
  },
173
- children: [/* @__PURE__ */ v(re, {
215
+ children: [/* @__PURE__ */ f(ue, {
174
216
  style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
175
- children: /* @__PURE__ */ y("div", {
217
+ children: /* @__PURE__ */ p("div", {
176
218
  style: {
177
219
  display: "flex",
178
220
  alignItems: "center",
179
221
  gap: "var(--space-formGap)"
180
222
  },
181
- children: [/* @__PURE__ */ v("div", {
223
+ children: [/* @__PURE__ */ f("div", {
182
224
  style: {
183
225
  display: "flex",
184
226
  height: "var(--size-controlHeight-lg)",
@@ -189,38 +231,38 @@ var oe = [
189
231
  backgroundColor: "var(--color-action-primary-bg)",
190
232
  boxShadow: "var(--shadow-elevation-2)"
191
233
  },
192
- children: v(E ? a : s, { style: {
234
+ children: f(x ? ne : ie, { style: {
193
235
  height: "var(--size-icon-lg)",
194
236
  width: "var(--size-icon-lg)",
195
237
  color: "var(--color-action-primary-text)"
196
238
  } })
197
- }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v(ie, {
239
+ }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(de, {
198
240
  style: {
199
241
  fontSize: "var(--font-size-heading-h4)",
200
242
  fontWeight: "var(--font-weight-bold)",
201
243
  color: "var(--color-text-primary)",
202
244
  margin: 0
203
245
  },
204
- children: E ? "Edit Action" : "Add Action"
205
- }), /* @__PURE__ */ v(u, {
246
+ children: x ? "Edit Button" : "Add Button"
247
+ }), /* @__PURE__ */ f(ce, {
206
248
  style: {
207
249
  fontSize: "var(--font-size-body-sm)",
208
250
  color: "var(--color-text-secondary)",
209
251
  margin: "var(--space-controlGap) 0 0 0"
210
252
  },
211
- children: E ? "Update the action configuration" : "Configure a new widget action"
253
+ children: x ? "Update the button and what it does" : "Add a button and choose what it does"
212
254
  })] })]
213
255
  })
214
- }), /* @__PURE__ */ y("form", {
215
- onSubmit: se,
216
- children: [/* @__PURE__ */ y("div", {
256
+ }), /* @__PURE__ */ p("form", {
257
+ onSubmit: Ee,
258
+ children: [/* @__PURE__ */ p("div", {
217
259
  style: {
218
260
  padding: "var(--space-pagePadding)",
219
261
  maxHeight: "60vh",
220
262
  overflowY: "auto"
221
263
  },
222
264
  children: [
223
- Q && /* @__PURE__ */ v("div", {
265
+ (Q || ve) && /* @__PURE__ */ f("div", {
224
266
  style: {
225
267
  padding: "var(--space-controlGap)",
226
268
  backgroundColor: "var(--color-status-error-bgSubtle)",
@@ -228,164 +270,95 @@ var oe = [
228
270
  borderRadius: "var(--radius-button)",
229
271
  marginBottom: "var(--space-formGap)"
230
272
  },
231
- children: /* @__PURE__ */ v("p", {
273
+ children: /* @__PURE__ */ f("p", {
232
274
  style: {
233
275
  fontSize: "var(--font-size-body-sm)",
234
276
  color: "var(--color-status-error-text)",
235
277
  margin: 0
236
278
  },
237
- children: Q
279
+ children: Q || ve
238
280
  })
239
281
  }),
240
- /* @__PURE__ */ y("div", {
282
+ /* @__PURE__ */ p("div", {
241
283
  style: { marginBottom: "var(--space-formGap)" },
242
284
  children: [
243
- /* @__PURE__ */ y("label", {
244
- style: {
245
- display: "block",
246
- fontSize: "var(--font-size-body-sm)",
247
- fontWeight: "var(--font-weight-semibold)",
248
- color: "var(--color-text-primary)",
249
- marginBottom: "var(--space-controlGap)"
250
- },
251
- children: ["Name ", /* @__PURE__ */ v("span", {
285
+ /* @__PURE__ */ p("label", {
286
+ style: h,
287
+ children: ["Button label ", /* @__PURE__ */ f("span", {
252
288
  style: { color: "var(--color-status-error-text)" },
253
289
  children: "*"
254
290
  })]
255
291
  }),
256
- /* @__PURE__ */ v(d, {
257
- ref: D,
258
- value: O,
259
- onChange: (e) => {
260
- k(e.target.value), Q && $(null);
261
- },
262
- placeholder: "e.g., refresh, export, delete",
263
- disabled: C,
264
- style: {
265
- height: "var(--size-controlHeight-md)",
266
- fontSize: "var(--font-size-body-sm)"
267
- }
268
- }),
269
- /* @__PURE__ */ v("p", {
270
- style: {
271
- fontSize: "var(--font-size-body-sm)",
272
- color: "var(--color-text-muted)",
273
- marginTop: "var(--space-controlGap)"
274
- },
275
- children: "Unique identifier for this action (used in events)"
276
- })
277
- ]
278
- }),
279
- /* @__PURE__ */ y("div", {
280
- style: { marginBottom: "var(--space-formGap)" },
281
- children: [
282
- /* @__PURE__ */ y("label", {
283
- style: {
284
- display: "block",
285
- fontSize: "var(--font-size-body-sm)",
286
- fontWeight: "var(--font-weight-semibold)",
287
- color: "var(--color-text-primary)",
288
- marginBottom: "var(--space-controlGap)"
289
- },
290
- children: ["Label ", /* @__PURE__ */ v("span", {
291
- style: { color: "var(--color-status-error-text)" },
292
- children: "*"
293
- })]
294
- }),
295
- /* @__PURE__ */ v(d, {
296
- value: A,
297
- onChange: (e) => j(e.target.value),
292
+ /* @__PURE__ */ f(o, {
293
+ ref: S,
294
+ value: w,
295
+ onChange: (e) => Te(e.target.value),
298
296
  placeholder: "e.g., Refresh Data, Export CSV",
299
- disabled: C,
297
+ disabled: b,
300
298
  style: {
301
299
  height: "var(--size-controlHeight-md)",
302
300
  fontSize: "var(--font-size-body-sm)"
303
301
  }
304
302
  }),
305
- /* @__PURE__ */ v("p", {
306
- style: {
307
- fontSize: "var(--font-size-body-sm)",
308
- color: "var(--color-text-muted)",
309
- marginTop: "var(--space-controlGap)"
310
- },
311
- children: "Display text shown on the button"
303
+ /* @__PURE__ */ f("p", {
304
+ style: g,
305
+ children: "Text shown on the button"
312
306
  })
313
307
  ]
314
308
  }),
315
- /* @__PURE__ */ y("div", {
309
+ /* @__PURE__ */ p("div", {
316
310
  style: {
317
311
  display: "grid",
318
312
  gridTemplateColumns: "1fr 1fr",
319
313
  gap: "var(--space-formGap)",
320
314
  marginBottom: "var(--space-formGap)"
321
315
  },
322
- children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
323
- style: {
324
- display: "block",
325
- fontSize: "var(--font-size-body-sm)",
326
- fontWeight: "var(--font-weight-semibold)",
327
- color: "var(--color-text-primary)",
328
- marginBottom: "var(--space-controlGap)"
329
- },
330
- children: "Type"
331
- }), /* @__PURE__ */ y(f, {
332
- value: M,
333
- onValueChange: (e) => N(e),
334
- disabled: C,
335
- children: [/* @__PURE__ */ v(h, {
316
+ children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
317
+ style: h,
318
+ children: "Style"
319
+ }), /* @__PURE__ */ p(s, {
320
+ value: A,
321
+ onValueChange: (e) => j(e),
322
+ disabled: b,
323
+ children: [/* @__PURE__ */ f(u, {
336
324
  style: {
337
325
  height: "var(--size-controlHeight-md)",
338
326
  fontSize: "var(--font-size-body-sm)"
339
327
  },
340
- children: /* @__PURE__ */ v(g, {})
341
- }), /* @__PURE__ */ v(p, {
342
- style: {
343
- zIndex: 9999,
344
- backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface, #ffffff))",
345
- border: "1px solid var(--color-border)",
346
- boxShadow: "var(--shadow-elevation-3)",
347
- borderRadius: "var(--radius-button)"
348
- },
349
- children: oe.map((e) => /* @__PURE__ */ v(m, {
328
+ children: /* @__PURE__ */ f(d, {})
329
+ }), /* @__PURE__ */ f(c, {
330
+ style: _,
331
+ children: ge.map((e) => /* @__PURE__ */ f(l, {
350
332
  value: e.value,
351
333
  children: e.label
352
334
  }, e.value))
353
335
  })]
354
- })] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
355
- style: {
356
- display: "block",
357
- fontSize: "var(--font-size-body-sm)",
358
- fontWeight: "var(--font-weight-semibold)",
359
- color: "var(--color-text-primary)",
360
- marginBottom: "var(--space-controlGap)"
361
- },
362
- children: "Style"
363
- }), /* @__PURE__ */ y(f, {
364
- value: P,
365
- onValueChange: (e) => F(e),
366
- disabled: C,
367
- children: [/* @__PURE__ */ v(h, {
336
+ })] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
337
+ style: h,
338
+ children: "Icon"
339
+ }), /* @__PURE__ */ p(s, {
340
+ value: M,
341
+ onValueChange: N,
342
+ disabled: b,
343
+ children: [/* @__PURE__ */ f(u, {
368
344
  style: {
369
345
  height: "var(--size-controlHeight-md)",
370
346
  fontSize: "var(--font-size-body-sm)"
371
347
  },
372
- children: /* @__PURE__ */ v(g, {})
373
- }), /* @__PURE__ */ v(p, {
348
+ children: /* @__PURE__ */ f(d, { placeholder: "No icon" })
349
+ }), /* @__PURE__ */ f(c, {
374
350
  style: {
375
- zIndex: 9999,
376
- backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface, #ffffff))",
377
- border: "1px solid var(--color-border)",
378
- boxShadow: "var(--shadow-elevation-3)",
379
- borderRadius: "var(--radius-button)"
351
+ ..._,
352
+ maxHeight: "200px"
380
353
  },
381
- children: b.map((e) => /* @__PURE__ */ v(m, {
382
- value: e.value,
354
+ children: _e.map((e) => /* @__PURE__ */ f(l, {
355
+ value: e.value || "none",
383
356
  children: e.label
384
- }, e.value))
357
+ }, e.value || "none"))
385
358
  })]
386
359
  })] })]
387
360
  }),
388
- /* @__PURE__ */ y("div", {
361
+ /* @__PURE__ */ p("div", {
389
362
  style: {
390
363
  display: "flex",
391
364
  alignItems: "center",
@@ -395,115 +368,140 @@ var oe = [
395
368
  backgroundColor: "var(--color-bg-sunken)",
396
369
  borderRadius: "var(--radius-button)"
397
370
  },
398
- children: [/* @__PURE__ */ v("span", {
371
+ children: [/* @__PURE__ */ f("span", {
399
372
  style: {
400
373
  fontSize: "var(--font-size-body-sm)",
401
374
  color: "var(--color-text-muted)"
402
375
  },
403
376
  children: "Preview:"
404
- }), /* @__PURE__ */ v("button", {
377
+ }), /* @__PURE__ */ f("button", {
405
378
  type: "button",
406
379
  style: {
407
380
  padding: "var(--space-controlGap) var(--space-formGap)",
408
381
  fontSize: "var(--font-size-body-sm)",
409
382
  fontWeight: "var(--font-weight-medium)",
410
383
  borderRadius: "var(--radius-button)",
411
- backgroundColor: ((e) => b.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)")(P),
384
+ backgroundColor: De(A),
412
385
  color: "var(--color-action-primary-text)",
413
386
  border: "none",
414
387
  cursor: "default"
415
388
  },
416
- children: A || "Button"
389
+ children: w || "Button"
417
390
  })]
418
391
  }),
419
- /* @__PURE__ */ y("div", {
392
+ /* @__PURE__ */ p("div", {
420
393
  style: { marginBottom: "var(--space-formGap)" },
421
- children: [/* @__PURE__ */ v("label", {
422
- style: {
423
- display: "block",
424
- fontSize: "var(--font-size-body-sm)",
425
- fontWeight: "var(--font-weight-semibold)",
426
- color: "var(--color-text-primary)",
427
- marginBottom: "var(--space-controlGap)"
428
- },
429
- children: "Icon"
430
- }), /* @__PURE__ */ y(f, {
431
- value: I,
432
- onValueChange: L,
433
- disabled: C,
434
- children: [/* @__PURE__ */ v(h, {
435
- style: {
436
- height: "var(--size-controlHeight-md)",
437
- fontSize: "var(--font-size-body-sm)"
438
- },
439
- children: /* @__PURE__ */ v(g, { placeholder: "No icon" })
440
- }), /* @__PURE__ */ v(p, {
441
- style: {
442
- zIndex: 9999,
443
- backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface, #ffffff))",
444
- border: "1px solid var(--color-border)",
445
- boxShadow: "var(--shadow-elevation-3)",
446
- borderRadius: "var(--radius-button)",
447
- maxHeight: "200px"
394
+ children: [
395
+ /* @__PURE__ */ f("label", {
396
+ style: h,
397
+ children: "When clicked"
398
+ }),
399
+ /* @__PURE__ */ p(s, {
400
+ value: P,
401
+ onValueChange: (e) => {
402
+ C.current = !0, F(e);
448
403
  },
449
- children: x.map((e) => /* @__PURE__ */ v(m, {
450
- value: e.value || "none",
451
- children: e.label
452
- }, e.value || "none"))
453
- })]
454
- })]
404
+ disabled: b,
405
+ children: [/* @__PURE__ */ f(u, {
406
+ style: {
407
+ height: "var(--size-controlHeight-md)",
408
+ fontSize: "var(--font-size-body-sm)"
409
+ },
410
+ children: /* @__PURE__ */ f(d, {})
411
+ }), /* @__PURE__ */ f(c, {
412
+ style: _,
413
+ children: me.map((e) => /* @__PURE__ */ f(l, {
414
+ value: e.value,
415
+ children: e.label
416
+ }, e.value))
417
+ })]
418
+ }),
419
+ Oe && /* @__PURE__ */ f("p", {
420
+ style: g,
421
+ children: Oe.hint
422
+ })
423
+ ]
455
424
  }),
456
- /* @__PURE__ */ y("div", {
425
+ P === "WEBHOOK" && /* @__PURE__ */ p("div", {
457
426
  style: {
427
+ marginBottom: "var(--space-formGap)",
428
+ paddingLeft: "var(--space-formGap)",
429
+ borderLeft: "2px solid var(--color-border)",
458
430
  display: "flex",
459
- alignItems: "center",
460
- gap: "var(--space-sectionGap)",
461
- marginBottom: "var(--space-formGap)"
431
+ flexDirection: "column",
432
+ gap: "var(--space-controlGap)"
462
433
  },
463
- children: [/* @__PURE__ */ y("label", {
464
- style: {
465
- display: "flex",
466
- alignItems: "center",
467
- gap: "var(--space-controlGap)",
468
- cursor: "pointer"
469
- },
470
- children: [/* @__PURE__ */ v(l, {
471
- checked: R,
472
- onCheckedChange: (e) => z(e === !0),
473
- disabled: C
474
- }), /* @__PURE__ */ v("span", {
475
- style: {
476
- fontSize: "var(--font-size-body-sm)",
477
- color: "var(--color-text-primary)"
434
+ children: [
435
+ /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("label", {
436
+ style: h,
437
+ children: ["URL ", /* @__PURE__ */ f("span", {
438
+ style: { color: "var(--color-status-error-text)" },
439
+ children: "*"
440
+ })]
441
+ }), /* @__PURE__ */ f(o, {
442
+ value: I,
443
+ onChange: (e) => {
444
+ C.current = !0, L(e.target.value), Q && $(null);
478
445
  },
479
- children: "Disabled"
480
- })]
481
- }), /* @__PURE__ */ y("label", {
482
- style: {
483
- display: "flex",
484
- alignItems: "center",
485
- gap: "var(--space-controlGap)",
486
- cursor: "pointer"
487
- },
488
- children: [/* @__PURE__ */ v(l, {
489
- checked: B,
490
- onCheckedChange: (e) => V(e === !0),
491
- disabled: C
492
- }), /* @__PURE__ */ v("span", {
446
+ placeholder: "https://your-service.com/hook",
447
+ disabled: b,
493
448
  style: {
494
- fontSize: "var(--font-size-body-sm)",
495
- color: "var(--color-text-primary)"
449
+ height: "var(--size-controlHeight-md)",
450
+ fontSize: "var(--font-size-body-sm)"
451
+ }
452
+ })] }),
453
+ /* @__PURE__ */ p("div", {
454
+ style: { maxWidth: "160px" },
455
+ children: [/* @__PURE__ */ f("label", {
456
+ style: h,
457
+ children: "Method"
458
+ }), /* @__PURE__ */ p(s, {
459
+ value: R,
460
+ onValueChange: (e) => {
461
+ C.current = !0, z(e);
462
+ },
463
+ disabled: b,
464
+ children: [/* @__PURE__ */ f(u, {
465
+ style: {
466
+ height: "var(--size-controlHeight-md)",
467
+ fontSize: "var(--font-size-body-sm)"
468
+ },
469
+ children: /* @__PURE__ */ f(d, {})
470
+ }), /* @__PURE__ */ f(c, {
471
+ style: _,
472
+ children: he.map((e) => /* @__PURE__ */ f(l, {
473
+ value: e,
474
+ children: e
475
+ }, e))
476
+ })]
477
+ })]
478
+ }),
479
+ /* @__PURE__ */ f("p", {
480
+ style: g,
481
+ children: "The widget's current data is sent as the request payload."
482
+ }),
483
+ /^http:\/\//i.test(I.trim()) && /* @__PURE__ */ p("p", {
484
+ style: {
485
+ ...g,
486
+ color: "var(--color-status-warning-text)"
496
487
  },
497
- children: "Hidden"
498
- })]
499
- })]
488
+ children: [
489
+ "Warning: ",
490
+ /* @__PURE__ */ f("code", { children: "http://" }),
491
+ " is unencrypted — the widget's data will be sent in plaintext. Use",
492
+ " ",
493
+ /* @__PURE__ */ f("code", { children: "https://" }),
494
+ " if it may contain anything sensitive."
495
+ ]
496
+ })
497
+ ]
500
498
  }),
501
- /* @__PURE__ */ y("div", {
499
+ /* @__PURE__ */ p("div", {
502
500
  style: {
503
501
  paddingTop: "var(--space-formGap)",
504
502
  borderTop: "1px solid var(--color-border)"
505
503
  },
506
- children: [/* @__PURE__ */ y("label", {
504
+ children: [/* @__PURE__ */ p("label", {
507
505
  style: {
508
506
  display: "flex",
509
507
  alignItems: "center",
@@ -511,19 +509,19 @@ var oe = [
511
509
  cursor: "pointer",
512
510
  marginBottom: "var(--space-formGap)"
513
511
  },
514
- children: [/* @__PURE__ */ v(l, {
515
- checked: H,
516
- onCheckedChange: (e) => U(e === !0),
517
- disabled: C
518
- }), /* @__PURE__ */ v("span", {
512
+ children: [/* @__PURE__ */ f(a, {
513
+ checked: W,
514
+ onCheckedChange: (e) => G(e === !0),
515
+ disabled: b
516
+ }), /* @__PURE__ */ f("span", {
519
517
  style: {
520
518
  fontSize: "var(--font-size-body-sm)",
521
519
  fontWeight: "var(--font-weight-semibold)",
522
520
  color: "var(--color-text-primary)"
523
521
  },
524
- children: "Require confirmation"
522
+ children: "Ask for confirmation first"
525
523
  })]
526
- }), H && /* @__PURE__ */ y("div", {
524
+ }), W && /* @__PURE__ */ p("div", {
527
525
  style: {
528
526
  paddingLeft: "var(--space-formGap)",
529
527
  borderLeft: "2px solid var(--color-border)",
@@ -532,7 +530,7 @@ var oe = [
532
530
  gap: "var(--space-controlGap)"
533
531
  },
534
532
  children: [
535
- /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
533
+ /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
536
534
  style: {
537
535
  display: "block",
538
536
  fontSize: "var(--font-size-body-sm)",
@@ -541,16 +539,16 @@ var oe = [
541
539
  marginBottom: "var(--space-controlGap)"
542
540
  },
543
541
  children: "Dialog Title"
544
- }), /* @__PURE__ */ v(d, {
545
- value: W,
546
- onChange: (e) => G(e.target.value),
547
- disabled: C,
542
+ }), /* @__PURE__ */ f(o, {
543
+ value: K,
544
+ onChange: (e) => q(e.target.value),
545
+ disabled: b,
548
546
  style: {
549
547
  height: "var(--size-controlHeight-sm)",
550
548
  fontSize: "var(--font-size-body-sm)"
551
549
  }
552
550
  })] }),
553
- /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
551
+ /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
554
552
  style: {
555
553
  display: "block",
556
554
  fontSize: "var(--font-size-body-sm)",
@@ -559,23 +557,23 @@ var oe = [
559
557
  marginBottom: "var(--space-controlGap)"
560
558
  },
561
559
  children: "Message"
562
- }), /* @__PURE__ */ v(_, {
563
- value: K,
564
- onChange: (e) => q(e.target.value),
560
+ }), /* @__PURE__ */ f(pe, {
561
+ value: J,
562
+ onChange: (e) => Y(e.target.value),
565
563
  rows: 2,
566
- disabled: C,
564
+ disabled: b,
567
565
  style: {
568
566
  fontSize: "var(--font-size-body-sm)",
569
567
  resize: "none"
570
568
  }
571
569
  })] }),
572
- /* @__PURE__ */ y("div", {
570
+ /* @__PURE__ */ p("div", {
573
571
  style: {
574
572
  display: "grid",
575
573
  gridTemplateColumns: "1fr 1fr",
576
574
  gap: "var(--space-controlGap)"
577
575
  },
578
- children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
576
+ children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
579
577
  style: {
580
578
  display: "block",
581
579
  fontSize: "var(--font-size-body-sm)",
@@ -584,15 +582,15 @@ var oe = [
584
582
  marginBottom: "var(--space-controlGap)"
585
583
  },
586
584
  children: "Confirm Button"
587
- }), /* @__PURE__ */ v(d, {
588
- value: J,
589
- onChange: (e) => Y(e.target.value),
590
- disabled: C,
585
+ }), /* @__PURE__ */ f(o, {
586
+ value: Ce,
587
+ onChange: (e) => X(e.target.value),
588
+ disabled: b,
591
589
  style: {
592
590
  height: "var(--size-controlHeight-sm)",
593
591
  fontSize: "var(--font-size-body-sm)"
594
592
  }
595
- })] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
593
+ })] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
596
594
  style: {
597
595
  display: "block",
598
596
  fontSize: "var(--font-size-body-sm)",
@@ -601,10 +599,10 @@ var oe = [
601
599
  marginBottom: "var(--space-controlGap)"
602
600
  },
603
601
  children: "Cancel Button"
604
- }), /* @__PURE__ */ v(d, {
605
- value: X,
602
+ }), /* @__PURE__ */ f(o, {
603
+ value: we,
606
604
  onChange: (e) => Z(e.target.value),
607
- disabled: C,
605
+ disabled: b,
608
606
  style: {
609
607
  height: "var(--size-controlHeight-sm)",
610
608
  fontSize: "var(--font-size-body-sm)"
@@ -613,9 +611,118 @@ var oe = [
613
611
  })
614
612
  ]
615
613
  })]
614
+ }),
615
+ /* @__PURE__ */ p("div", {
616
+ style: {
617
+ paddingTop: "var(--space-formGap)",
618
+ borderTop: "1px solid var(--color-border)"
619
+ },
620
+ children: [/* @__PURE__ */ p("button", {
621
+ type: "button",
622
+ onClick: () => Se((e) => !e),
623
+ style: {
624
+ display: "flex",
625
+ alignItems: "center",
626
+ gap: "var(--space-controlGap)",
627
+ background: "none",
628
+ border: "none",
629
+ padding: 0,
630
+ cursor: "pointer",
631
+ fontSize: "var(--font-size-body-sm)",
632
+ fontWeight: "var(--font-weight-semibold)",
633
+ color: "var(--color-text-primary)"
634
+ },
635
+ children: [f(xe ? ee : te, { style: {
636
+ height: "14px",
637
+ width: "14px"
638
+ } }), "Advanced"]
639
+ }), xe && /* @__PURE__ */ p("div", {
640
+ style: {
641
+ marginTop: "var(--space-formGap)",
642
+ display: "flex",
643
+ flexDirection: "column",
644
+ gap: "var(--space-formGap)"
645
+ },
646
+ children: [/* @__PURE__ */ p("div", { children: [
647
+ /* @__PURE__ */ f("label", {
648
+ style: h,
649
+ children: "Event name (id)"
650
+ }),
651
+ /* @__PURE__ */ f(o, {
652
+ value: x && v ? v.name : E,
653
+ onChange: (e) => {
654
+ D(e.target.value), k(!0);
655
+ },
656
+ placeholder: "auto from label",
657
+ disabled: b || x,
658
+ style: {
659
+ height: "var(--size-controlHeight-md)",
660
+ fontSize: "var(--font-size-body-sm)",
661
+ fontFamily: "var(--font-family-mono)"
662
+ }
663
+ }),
664
+ /* @__PURE__ */ p("p", {
665
+ style: g,
666
+ children: [
667
+ "Emits",
668
+ " ",
669
+ /* @__PURE__ */ p("code", { children: [
670
+ "widget:",
671
+ x && v ? v.name : m(E || w) || "<name>",
672
+ ":clicked"
673
+ ] }),
674
+ ". ",
675
+ x ? "Fixed once created." : "Auto-derived from the label."
676
+ ]
677
+ })
678
+ ] }), /* @__PURE__ */ p("div", {
679
+ style: {
680
+ display: "flex",
681
+ alignItems: "center",
682
+ gap: "var(--space-sectionGap)"
683
+ },
684
+ children: [/* @__PURE__ */ p("label", {
685
+ style: {
686
+ display: "flex",
687
+ alignItems: "center",
688
+ gap: "var(--space-controlGap)",
689
+ cursor: "pointer"
690
+ },
691
+ children: [/* @__PURE__ */ f(a, {
692
+ checked: B,
693
+ onCheckedChange: (e) => V(e === !0),
694
+ disabled: b
695
+ }), /* @__PURE__ */ f("span", {
696
+ style: {
697
+ fontSize: "var(--font-size-body-sm)",
698
+ color: "var(--color-text-primary)"
699
+ },
700
+ children: "Disabled"
701
+ })]
702
+ }), /* @__PURE__ */ p("label", {
703
+ style: {
704
+ display: "flex",
705
+ alignItems: "center",
706
+ gap: "var(--space-controlGap)",
707
+ cursor: "pointer"
708
+ },
709
+ children: [/* @__PURE__ */ f(a, {
710
+ checked: H,
711
+ onCheckedChange: (e) => U(e === !0),
712
+ disabled: b
713
+ }), /* @__PURE__ */ f("span", {
714
+ style: {
715
+ fontSize: "var(--font-size-body-sm)",
716
+ color: "var(--color-text-primary)"
717
+ },
718
+ children: "Hidden"
719
+ })]
720
+ })]
721
+ })]
722
+ })]
616
723
  })
617
724
  ]
618
- }), /* @__PURE__ */ y(ne, {
725
+ }), /* @__PURE__ */ p(le, {
619
726
  style: {
620
727
  padding: "var(--space-formGap) var(--space-pagePadding)",
621
728
  borderTop: "1px solid var(--color-border)",
@@ -624,40 +731,40 @@ var oe = [
624
731
  justifyContent: "flex-end",
625
732
  gap: "var(--space-controlGap)"
626
733
  },
627
- children: [/* @__PURE__ */ v(c, {
734
+ children: [/* @__PURE__ */ f(ae, {
628
735
  type: "button",
629
736
  variant: "outline",
630
- onClick: w,
631
- disabled: C,
737
+ onClick: ye,
738
+ disabled: b,
632
739
  style: { height: "var(--size-controlHeight-md)" },
633
740
  children: "Cancel"
634
- }), /* @__PURE__ */ v(c, {
741
+ }), /* @__PURE__ */ f(ae, {
635
742
  type: "submit",
636
- disabled: C || !O.trim() || !A.trim(),
743
+ disabled: b || !w.trim(),
637
744
  style: {
638
745
  height: "var(--size-controlHeight-md)",
639
746
  backgroundColor: "var(--color-action-primary-bg)"
640
747
  },
641
- children: C ? /* @__PURE__ */ y("span", {
748
+ children: b ? /* @__PURE__ */ p("span", {
642
749
  style: {
643
750
  display: "flex",
644
751
  alignItems: "center",
645
752
  gap: "var(--space-iconGap)"
646
753
  },
647
- children: [/* @__PURE__ */ v(ae, { style: {
754
+ children: [/* @__PURE__ */ f(fe, { style: {
648
755
  height: "var(--size-icon-sm)",
649
756
  width: "var(--size-icon-sm)"
650
757
  } }), "Saving..."]
651
- }) : /* @__PURE__ */ y("span", {
758
+ }) : /* @__PURE__ */ p("span", {
652
759
  style: {
653
760
  display: "flex",
654
761
  alignItems: "center",
655
762
  gap: "var(--space-iconGap)"
656
763
  },
657
- children: [v(E ? a : o, { style: {
764
+ children: [f(x ? ne : re, { style: {
658
765
  height: "var(--size-icon-sm)",
659
766
  width: "var(--size-icon-sm)"
660
- } }), E ? "Update Action" : "Add Action"]
767
+ } }), x ? "Update Button" : "Add Button"]
661
768
  })
662
769
  })]
663
770
  })]
@@ -666,6 +773,6 @@ var oe = [
666
773
  });
667
774
  });
668
775
  //#endregion
669
- export { S as default };
776
+ export { v as default };
670
777
 
671
778
  //# sourceMappingURL=ActionConfigDialog.js.map