@superdoc-dev/template-builder 0.2.0-next.8 → 0.2.0-next.9

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 (8) hide show
  1. package/dist/defaults/FieldList.d.ts.map +1 -1
  2. package/dist/defaults/FieldMenu.d.ts.map +1 -1
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/index.mjs +795 -581
  6. package/dist/types.d.ts +4 -1
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +4 -4
package/dist/index.mjs CHANGED
@@ -1,82 +1,57 @@
1
- import { jsxs as g, jsx as i } from "react/jsx-runtime";
2
- import { useState as S, useEffect as ee, useMemo as xe, useCallback as F, forwardRef as De, useRef as _, useImperativeHandle as Ee } from "react";
3
- const Ne = ({
4
- isVisible: s,
5
- position: f,
6
- availableFields: m,
7
- filteredFields: c,
8
- filterQuery: n,
9
- allowCreate: p,
10
- onSelect: H,
11
- onClose: j,
12
- onCreateField: U
1
+ import { jsxs as o, jsx as r } from "react/jsx-runtime";
2
+ import { useState as I, useEffect as se, useMemo as Ce, forwardRef as Re, useRef as U, useCallback as S, useImperativeHandle as Ne } from "react";
3
+ const ze = ({
4
+ isVisible: n,
5
+ position: l,
6
+ availableFields: u,
7
+ filteredFields: s,
8
+ filterQuery: a,
9
+ allowCreate: d,
10
+ onSelect: B,
11
+ onClose: P,
12
+ onCreateField: G,
13
+ existingFields: p = [],
14
+ onSelectExisting: T
13
15
  }) => {
14
- const [G, D] = S(!1), [T, y] = S(""), [A, k] = S("inline");
15
- ee(() => {
16
- s || (D(!1), y(""), k("inline"));
17
- }, [s]);
18
- const te = xe(() => ({
16
+ const [x, y] = I(!1), [F, N] = I(""), [q, A] = I("inline"), [J, g] = I(!0), [z, W] = I(!0);
17
+ se(() => {
18
+ n || (y(!1), N(""), A("inline"));
19
+ }, [n]);
20
+ const Q = Ce(() => ({
19
21
  position: "absolute",
20
- left: f?.left,
21
- top: f?.top,
22
+ left: l?.left,
23
+ top: l?.top,
22
24
  zIndex: 1e3,
23
25
  background: "white",
24
26
  border: "1px solid #ddd",
25
27
  borderRadius: "4px",
26
28
  boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
27
29
  padding: "8px 0",
28
- minWidth: "200px"
29
- }), [f]), Q = c ?? m, X = !!n, u = xe(() => {
30
- const r = [], x = /* @__PURE__ */ new Map();
31
- return Q.forEach((C) => {
32
- const h = C.category?.trim() || "Uncategorized", E = x.get(h);
33
- if (E !== void 0) {
34
- r[E].fields.push(C);
35
- return;
36
- }
37
- x.set(h, r.length), r.push({ category: h, fields: [C] });
38
- }), r;
39
- }, [Q]), [P, I] = S({});
40
- ee(() => {
41
- I((r) => {
42
- if (u.length === 0)
43
- return Object.keys(r).length === 0 ? r : {};
44
- const x = {};
45
- let C = Object.keys(r).length !== u.length;
46
- return u.forEach(({ category: h }, E) => {
47
- const N = X ? !0 : r[h] ?? E === 0;
48
- x[h] = N, !C && r[h] !== N && (C = !0);
49
- }), C ? x : r;
50
- });
51
- }, [u, X]);
52
- const $ = F((r) => {
53
- I((x) => ({
54
- ...x,
55
- [r]: !x[r]
56
- }));
57
- }, []);
58
- if (!s) return null;
59
- const W = async () => {
60
- const r = T.trim();
61
- if (!r) return;
62
- const x = {
30
+ width: "280px"
31
+ }), [l]), V = s ?? u, M = !!a;
32
+ if (se(() => {
33
+ M && W(!0);
34
+ }, [M]), !n) return null;
35
+ const ee = async () => {
36
+ const h = F.trim();
37
+ if (!h) return;
38
+ const j = {
63
39
  id: `custom_${Date.now()}`,
64
- label: r,
65
- category: "Custom",
66
- metadata: { mode: A }
40
+ label: h,
41
+ metadata: { mode: q }
67
42
  };
68
43
  try {
69
- if (U) {
70
- const C = await U(x);
71
- H(C || x);
44
+ if (G) {
45
+ const b = await G(j);
46
+ B(b || j);
72
47
  } else
73
- H(x);
48
+ B(j);
74
49
  } finally {
75
- D(!1), y(""), k("inline");
50
+ y(!1), N(""), A("inline");
76
51
  }
77
52
  };
78
- return /* @__PURE__ */ g("div", { className: "superdoc-field-menu", style: te, children: [
79
- X && /* @__PURE__ */ i(
53
+ return /* @__PURE__ */ o("div", { className: "superdoc-field-menu", style: Q, children: [
54
+ M && /* @__PURE__ */ r(
80
55
  "div",
81
56
  {
82
57
  style: {
@@ -84,23 +59,23 @@ const Ne = ({
84
59
  borderBottom: "1px solid #f0f0f0",
85
60
  marginBottom: "4px"
86
61
  },
87
- children: /* @__PURE__ */ g("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
62
+ children: /* @__PURE__ */ o("div", { style: { fontSize: "12px", color: "#6b7280" }, children: [
88
63
  "Filtering results for",
89
- /* @__PURE__ */ i(
64
+ /* @__PURE__ */ r(
90
65
  "span",
91
66
  {
92
67
  style: { fontWeight: 600, color: "#111827", marginLeft: "4px" },
93
- children: n
68
+ children: a
94
69
  }
95
70
  )
96
71
  ] })
97
72
  }
98
73
  ),
99
- p && !G && /* @__PURE__ */ i(
74
+ d && !x && /* @__PURE__ */ r(
100
75
  "div",
101
76
  {
102
77
  className: "field-menu-item",
103
- onClick: () => D(!0),
78
+ onClick: () => y(!0),
104
79
  style: {
105
80
  padding: "8px 16px",
106
81
  cursor: "pointer",
@@ -110,16 +85,16 @@ const Ne = ({
110
85
  children: "+ Create New Field"
111
86
  }
112
87
  ),
113
- p && G && /* @__PURE__ */ g("div", { style: { padding: "8px 16px" }, children: [
114
- /* @__PURE__ */ i(
88
+ d && x && /* @__PURE__ */ o("div", { style: { padding: "8px 16px" }, children: [
89
+ /* @__PURE__ */ r(
115
90
  "input",
116
91
  {
117
92
  type: "text",
118
- value: T,
93
+ value: F,
119
94
  placeholder: "Field name...",
120
- onChange: (r) => y(r.target.value),
121
- onKeyDown: (r) => {
122
- r.key === "Enter" && W(), r.key === "Escape" && (D(!1), y(""), k("inline"));
95
+ onChange: (h) => N(h.target.value),
96
+ onKeyDown: (h) => {
97
+ h.key === "Enter" && ee(), h.key === "Escape" && (y(!1), N(""), A("inline"));
123
98
  },
124
99
  autoFocus: !0,
125
100
  style: {
@@ -130,7 +105,7 @@ const Ne = ({
130
105
  }
131
106
  }
132
107
  ),
133
- /* @__PURE__ */ g(
108
+ /* @__PURE__ */ o(
134
109
  "div",
135
110
  {
136
111
  style: {
@@ -140,7 +115,7 @@ const Ne = ({
140
115
  fontSize: "13px"
141
116
  },
142
117
  children: [
143
- /* @__PURE__ */ g(
118
+ /* @__PURE__ */ o(
144
119
  "label",
145
120
  {
146
121
  style: {
@@ -150,20 +125,20 @@ const Ne = ({
150
125
  cursor: "pointer"
151
126
  },
152
127
  children: [
153
- /* @__PURE__ */ i(
128
+ /* @__PURE__ */ r(
154
129
  "input",
155
130
  {
156
131
  type: "radio",
157
132
  value: "inline",
158
- checked: A === "inline",
159
- onChange: () => k("inline")
133
+ checked: q === "inline",
134
+ onChange: () => A("inline")
160
135
  }
161
136
  ),
162
137
  "Inline"
163
138
  ]
164
139
  }
165
140
  ),
166
- /* @__PURE__ */ g(
141
+ /* @__PURE__ */ o(
167
142
  "label",
168
143
  {
169
144
  style: {
@@ -173,13 +148,13 @@ const Ne = ({
173
148
  cursor: "pointer"
174
149
  },
175
150
  children: [
176
- /* @__PURE__ */ i(
151
+ /* @__PURE__ */ r(
177
152
  "input",
178
153
  {
179
154
  type: "radio",
180
155
  value: "block",
181
- checked: A === "block",
182
- onChange: () => k("block")
156
+ checked: q === "block",
157
+ onChange: () => A("block")
183
158
  }
184
159
  ),
185
160
  "Block"
@@ -189,7 +164,7 @@ const Ne = ({
189
164
  ]
190
165
  }
191
166
  ),
192
- /* @__PURE__ */ g(
167
+ /* @__PURE__ */ o(
193
168
  "div",
194
169
  {
195
170
  style: {
@@ -198,27 +173,27 @@ const Ne = ({
198
173
  gap: "8px"
199
174
  },
200
175
  children: [
201
- /* @__PURE__ */ i(
176
+ /* @__PURE__ */ r(
202
177
  "button",
203
178
  {
204
- onClick: W,
205
- disabled: !T.trim(),
179
+ onClick: ee,
180
+ disabled: !F.trim(),
206
181
  style: {
207
182
  padding: "4px 12px",
208
- background: T.trim() ? "#0066cc" : "#ccc",
183
+ background: F.trim() ? "#0066cc" : "#ccc",
209
184
  color: "white",
210
185
  border: "none",
211
186
  borderRadius: "3px",
212
- cursor: T.trim() ? "pointer" : "not-allowed"
187
+ cursor: F.trim() ? "pointer" : "not-allowed"
213
188
  },
214
189
  children: "Create"
215
190
  }
216
191
  ),
217
- /* @__PURE__ */ i(
192
+ /* @__PURE__ */ r(
218
193
  "button",
219
194
  {
220
195
  onClick: () => {
221
- D(!1), y(""), k("inline");
196
+ y(!1), N(""), A("inline");
222
197
  },
223
198
  style: {
224
199
  padding: "4px 12px",
@@ -234,7 +209,7 @@ const Ne = ({
234
209
  }
235
210
  )
236
211
  ] }),
237
- p && m.length > 0 && /* @__PURE__ */ i(
212
+ d && u.length > 0 && /* @__PURE__ */ r(
238
213
  "div",
239
214
  {
240
215
  style: {
@@ -243,7 +218,110 @@ const Ne = ({
243
218
  }
244
219
  }
245
220
  ),
246
- u.length === 0 ? /* @__PURE__ */ i(
221
+ p.length > 0 && (() => {
222
+ const h = /* @__PURE__ */ new Map();
223
+ p.forEach((b) => {
224
+ const X = b.group || `individual-${b.id}`, te = h.get(X) || [];
225
+ te.push(b), h.set(X, te);
226
+ });
227
+ const j = Array.from(h.values()).map((b) => ({
228
+ ...b[0],
229
+ count: b.length
230
+ }));
231
+ return /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
232
+ /* @__PURE__ */ o(
233
+ "button",
234
+ {
235
+ type: "button",
236
+ onClick: () => g(!J),
237
+ style: {
238
+ width: "100%",
239
+ display: "flex",
240
+ alignItems: "center",
241
+ justifyContent: "space-between",
242
+ padding: "8px 16px",
243
+ background: "transparent",
244
+ border: "none",
245
+ cursor: "pointer",
246
+ fontWeight: 500,
247
+ fontSize: "13px",
248
+ color: "#374151",
249
+ textAlign: "left"
250
+ },
251
+ children: [
252
+ /* @__PURE__ */ o("span", { children: [
253
+ "Existing Fields (",
254
+ j.length,
255
+ ")"
256
+ ] }),
257
+ /* @__PURE__ */ r(
258
+ "span",
259
+ {
260
+ "aria-hidden": !0,
261
+ style: {
262
+ display: "inline-block",
263
+ width: "8px",
264
+ height: "8px",
265
+ borderRight: "2px solid #666",
266
+ borderBottom: "2px solid #666",
267
+ transform: J ? "rotate(45deg)" : "rotate(-45deg)",
268
+ transition: "transform 0.2s ease"
269
+ }
270
+ }
271
+ )
272
+ ]
273
+ }
274
+ ),
275
+ J && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: j.map((b) => /* @__PURE__ */ o(
276
+ "div",
277
+ {
278
+ className: "field-menu-item",
279
+ onClick: () => T?.(b),
280
+ style: {
281
+ padding: "8px 16px",
282
+ cursor: "pointer",
283
+ display: "flex",
284
+ alignItems: "flex-start",
285
+ justifyContent: "space-between",
286
+ gap: "8px"
287
+ },
288
+ children: [
289
+ /* @__PURE__ */ o("div", { style: { flex: 1, minWidth: 0 }, children: [
290
+ /* @__PURE__ */ r("div", { style: { fontWeight: 500, fontSize: "13px" }, children: b.alias || b.id }),
291
+ /* @__PURE__ */ r(
292
+ "div",
293
+ {
294
+ style: {
295
+ fontSize: "11px",
296
+ color: "#9ca3af",
297
+ marginTop: "2px"
298
+ },
299
+ children: b.group ? `group (${b.count} fields)` : `ID: ${b.id}`
300
+ }
301
+ )
302
+ ] }),
303
+ /* @__PURE__ */ r(
304
+ "span",
305
+ {
306
+ style: {
307
+ fontSize: "11px",
308
+ color: "#6b7280",
309
+ padding: "2px 6px",
310
+ background: "#f3f4f6",
311
+ borderRadius: "3px",
312
+ textTransform: "capitalize",
313
+ flexShrink: 0
314
+ },
315
+ children: b.mode || "inline"
316
+ }
317
+ )
318
+ ]
319
+ },
320
+ b.group || b.id
321
+ )) })
322
+ ] });
323
+ })(),
324
+ V.length === 0 ? /* @__PURE__ */ r(
247
325
  "div",
248
326
  {
249
327
  style: {
@@ -254,104 +332,112 @@ const Ne = ({
254
332
  },
255
333
  children: "No matching fields"
256
334
  }
257
- ) : u.map(({ category: r, fields: x }, C) => {
258
- const h = !!P[r], E = `${Math.max(x.length * 40, 0)}px`;
259
- return /* @__PURE__ */ g(
260
- "div",
335
+ ) : /* @__PURE__ */ o("div", { style: { borderBottom: "1px solid #f0f0f0" }, children: [
336
+ /* @__PURE__ */ o(
337
+ "button",
261
338
  {
339
+ type: "button",
340
+ onClick: () => W(!z),
262
341
  style: {
263
- borderTop: C === 0 && p ? void 0 : "1px solid #f0f0f0"
342
+ width: "100%",
343
+ display: "flex",
344
+ alignItems: "center",
345
+ justifyContent: "space-between",
346
+ padding: "8px 16px",
347
+ background: "transparent",
348
+ border: "none",
349
+ cursor: "pointer",
350
+ fontWeight: 500,
351
+ fontSize: "13px",
352
+ color: "#374151",
353
+ textAlign: "left"
264
354
  },
265
355
  children: [
266
- /* @__PURE__ */ g(
267
- "button",
356
+ /* @__PURE__ */ o("span", { children: [
357
+ "Available Fields (",
358
+ V.length,
359
+ ")"
360
+ ] }),
361
+ /* @__PURE__ */ r(
362
+ "span",
268
363
  {
269
- type: "button",
270
- onClick: () => $(r),
364
+ "aria-hidden": !0,
271
365
  style: {
272
- width: "100%",
273
- display: "flex",
274
- alignItems: "center",
275
- justifyContent: "space-between",
276
- padding: "8px 16px",
277
- background: "transparent",
278
- border: "none",
279
- cursor: "pointer",
280
- fontWeight: 500,
281
- textAlign: "left"
282
- },
283
- children: [
284
- /* @__PURE__ */ g("span", { children: [
285
- r,
286
- " (",
287
- x.length,
288
- ")"
289
- ] }),
290
- /* @__PURE__ */ i(
291
- "span",
292
- {
293
- "aria-hidden": !0,
294
- style: {
295
- display: "inline-block",
296
- width: "8px",
297
- height: "8px",
298
- borderRight: "2px solid #666",
299
- borderBottom: "2px solid #666",
300
- transform: h ? "rotate(45deg)" : "rotate(-45deg)",
301
- transition: "transform 0.2s ease",
302
- marginLeft: "12px"
303
- }
304
- }
305
- )
306
- ]
366
+ display: "inline-block",
367
+ width: "8px",
368
+ height: "8px",
369
+ borderRight: "2px solid #666",
370
+ borderBottom: "2px solid #666",
371
+ transform: z ? "rotate(45deg)" : "rotate(-45deg)",
372
+ transition: "transform 0.2s ease"
373
+ }
307
374
  }
308
- ),
309
- /* @__PURE__ */ i(
310
- "div",
375
+ )
376
+ ]
377
+ }
378
+ ),
379
+ z && /* @__PURE__ */ r("div", { style: { maxHeight: "300px", overflowY: "auto" }, children: V.map((h) => /* @__PURE__ */ o(
380
+ "div",
381
+ {
382
+ className: "field-menu-item",
383
+ onClick: () => B(h),
384
+ style: {
385
+ padding: "8px 16px",
386
+ cursor: "pointer",
387
+ display: "flex",
388
+ alignItems: "flex-start",
389
+ justifyContent: "space-between",
390
+ gap: "8px"
391
+ },
392
+ children: [
393
+ /* @__PURE__ */ o("div", { style: { flex: 1, minWidth: 0 }, children: [
394
+ /* @__PURE__ */ r("div", { style: { fontWeight: 500, fontSize: "13px" }, children: h.label || h.id }),
395
+ /* @__PURE__ */ o(
396
+ "div",
397
+ {
398
+ style: {
399
+ fontSize: "11px",
400
+ color: "#9ca3af",
401
+ marginTop: "2px"
402
+ },
403
+ children: [
404
+ "ID: ",
405
+ h.id
406
+ ]
407
+ }
408
+ )
409
+ ] }),
410
+ /* @__PURE__ */ r(
411
+ "span",
311
412
  {
312
- "data-category": r,
313
- "aria-hidden": !h,
314
413
  style: {
315
- overflow: "hidden",
316
- maxHeight: h ? E : "0px",
317
- opacity: h ? 1 : 0,
318
- transition: "max-height 0.2s ease, opacity 0.2s ease",
319
- pointerEvents: h ? "auto" : "none"
414
+ fontSize: "11px",
415
+ color: "#6b7280",
416
+ padding: "2px 6px",
417
+ background: "#f3f4f6",
418
+ borderRadius: "3px",
419
+ textTransform: "capitalize",
420
+ flexShrink: 0
320
421
  },
321
- children: /* @__PURE__ */ i("div", { style: { padding: h ? "4px 0" : 0 }, children: x.map((N) => /* @__PURE__ */ i(
322
- "div",
323
- {
324
- className: "field-menu-item",
325
- onClick: () => H(N),
326
- style: {
327
- padding: "8px 16px",
328
- cursor: "pointer",
329
- display: "flex",
330
- alignItems: "center",
331
- justifyContent: "space-between"
332
- },
333
- children: /* @__PURE__ */ i("span", { style: { fontWeight: 500 }, children: N.label })
334
- },
335
- N.id
336
- )) })
422
+ children: h.metadata?.mode || "inline"
337
423
  }
338
424
  )
339
425
  ]
340
426
  },
341
- r
342
- );
343
- }),
344
- /* @__PURE__ */ i(
427
+ h.id
428
+ )) })
429
+ ] }),
430
+ /* @__PURE__ */ r(
345
431
  "div",
346
432
  {
347
433
  style: {
348
434
  borderTop: "1px solid #eee",
349
435
  marginTop: "4px"
350
436
  },
351
- children: /* @__PURE__ */ i(
437
+ children: /* @__PURE__ */ r(
352
438
  "button",
353
439
  {
354
- onClick: j,
440
+ onClick: P,
355
441
  style: {
356
442
  width: "100%",
357
443
  padding: "6px 16px",
@@ -366,520 +452,646 @@ const Ne = ({
366
452
  }
367
453
  )
368
454
  ] });
369
- }, Re = ({
370
- fields: s,
371
- onSelect: f,
372
- onDelete: m,
373
- selectedFieldId: c
374
- }) => /* @__PURE__ */ g(
455
+ }, Be = (n) => {
456
+ const l = n.split("-");
457
+ return l.length > 2 ? l[l.length - 1].substring(0, 6) : n.substring(0, 6);
458
+ }, be = ({ field: n, onSelect: l, onDelete: u, isSelected: s, isGrouped: a = !1 }) => /* @__PURE__ */ o(
375
459
  "div",
376
460
  {
377
- className: "superdoc-field-list",
461
+ onClick: () => l(n),
378
462
  style: {
379
- width: "250px",
380
- background: "white",
381
- border: "1px solid #e5e7eb",
382
- borderRadius: "8px",
383
- padding: "16px"
463
+ position: "relative",
464
+ padding: "10px 12px",
465
+ background: s ? "#eff6ff" : "#f9fafb",
466
+ border: s ? "1px solid #3b82f6" : "1px solid #e5e7eb",
467
+ borderRadius: "6px",
468
+ cursor: "pointer",
469
+ transition: "all 0.2s",
470
+ fontSize: a ? "13px" : "14px"
471
+ },
472
+ onMouseEnter: (d) => {
473
+ s || (d.currentTarget.style.background = "#f3f4f6");
474
+ },
475
+ onMouseLeave: (d) => {
476
+ s || (d.currentTarget.style.background = "#f9fafb");
384
477
  },
478
+ title: n.alias,
385
479
  children: [
386
- /* @__PURE__ */ g("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
387
- "Template Fields (",
388
- s.length,
389
- ")"
390
- ] }),
391
- s.length === 0 ? /* @__PURE__ */ g(
392
- "div",
480
+ /* @__PURE__ */ r(
481
+ "button",
393
482
  {
394
- style: {
395
- color: "#9ca3af",
396
- fontSize: "14px",
397
- textAlign: "center",
398
- padding: "20px 0"
483
+ onClick: (d) => {
484
+ d.stopPropagation(), u(n.id);
399
485
  },
400
- children: [
401
- "No fields yet. Type ",
402
- "{{",
403
- " to add a field."
404
- ]
405
- }
406
- ) : /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: s.map((n) => /* @__PURE__ */ g(
407
- "div",
408
- {
409
- onClick: () => f(n),
410
486
  style: {
411
- position: "relative",
412
- padding: "12px",
413
- background: c === n.id ? "#eff6ff" : "#f9fafb",
414
- border: c === n.id ? "1px solid #3b82f6" : "1px solid #e5e7eb",
415
- borderRadius: "6px",
487
+ position: "absolute",
488
+ top: "6px",
489
+ right: "6px",
490
+ padding: "4px",
491
+ background: "transparent",
492
+ border: "none",
416
493
  cursor: "pointer",
417
- transition: "all 0.2s"
494
+ color: "#9ca3af",
495
+ transition: "color 0.2s",
496
+ display: "flex",
497
+ alignItems: "center",
498
+ justifyContent: "center"
418
499
  },
419
- onMouseEnter: (p) => {
420
- c !== n.id && (p.currentTarget.style.background = "#f3f4f6");
500
+ onMouseEnter: (d) => {
501
+ d.currentTarget.style.color = "#ef4444";
421
502
  },
422
- onMouseLeave: (p) => {
423
- c !== n.id && (p.currentTarget.style.background = "#f9fafb");
503
+ onMouseLeave: (d) => {
504
+ d.currentTarget.style.color = "#9ca3af";
424
505
  },
425
- title: n.alias,
426
- children: [
427
- /* @__PURE__ */ i(
428
- "button",
429
- {
430
- onClick: (p) => {
431
- p.stopPropagation(), m(n.id);
432
- },
433
- style: {
434
- position: "absolute",
435
- top: "8px",
436
- right: "8px",
437
- padding: "4px",
438
- background: "transparent",
439
- border: "none",
440
- cursor: "pointer",
441
- color: "#9ca3af",
442
- transition: "color 0.2s",
443
- display: "flex",
444
- alignItems: "center",
445
- justifyContent: "center"
446
- },
447
- onMouseEnter: (p) => {
448
- p.currentTarget.style.color = "#ef4444";
449
- },
450
- onMouseLeave: (p) => {
451
- p.currentTarget.style.color = "#9ca3af";
452
- },
453
- title: "Delete field",
454
- children: /* @__PURE__ */ i(
455
- "svg",
456
- {
457
- width: "16",
458
- height: "16",
459
- viewBox: "0 0 16 16",
460
- fill: "none",
461
- xmlns: "http://www.w3.org/2000/svg",
462
- children: /* @__PURE__ */ i(
463
- "path",
464
- {
465
- d: "M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4",
466
- stroke: "currentColor",
467
- strokeWidth: "1.5",
468
- strokeLinecap: "round",
469
- strokeLinejoin: "round"
470
- }
471
- )
472
- }
473
- )
474
- }
475
- ),
476
- /* @__PURE__ */ g("div", { style: { paddingRight: "24px" }, children: [
477
- /* @__PURE__ */ i(
506
+ title: "Delete field",
507
+ children: /* @__PURE__ */ r(
508
+ "svg",
509
+ {
510
+ width: "14",
511
+ height: "14",
512
+ viewBox: "0 0 16 16",
513
+ fill: "none",
514
+ xmlns: "http://www.w3.org/2000/svg",
515
+ children: /* @__PURE__ */ r(
516
+ "path",
517
+ {
518
+ d: "M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4",
519
+ stroke: "currentColor",
520
+ strokeWidth: "1.5",
521
+ strokeLinecap: "round",
522
+ strokeLinejoin: "round"
523
+ }
524
+ )
525
+ }
526
+ )
527
+ }
528
+ ),
529
+ /* @__PURE__ */ o("div", { style: { paddingRight: "24px" }, children: [
530
+ /* @__PURE__ */ r(
531
+ "div",
532
+ {
533
+ style: {
534
+ fontWeight: "500",
535
+ fontSize: a ? "12px" : "14px",
536
+ color: a ? "#6b7280" : "#111827"
537
+ },
538
+ children: n.alias || n.id
539
+ }
540
+ ),
541
+ /* @__PURE__ */ o(
542
+ "div",
543
+ {
544
+ style: {
545
+ display: "flex",
546
+ alignItems: "center",
547
+ gap: "6px",
548
+ fontSize: "11px",
549
+ color: "#9ca3af",
550
+ marginTop: "2px"
551
+ },
552
+ children: [
553
+ /* @__PURE__ */ o("span", { children: [
554
+ "ID: ",
555
+ n.id
556
+ ] }),
557
+ n.mode && /* @__PURE__ */ r(
558
+ "span",
559
+ {
560
+ style: {
561
+ fontSize: "9px",
562
+ padding: "2px 5px",
563
+ borderRadius: "3px",
564
+ background: n.mode === "block" ? "#dbeafe" : "#f3f4f6",
565
+ color: n.mode === "block" ? "#1e40af" : "#4b5563",
566
+ fontWeight: "500"
567
+ },
568
+ children: n.mode
569
+ }
570
+ )
571
+ ]
572
+ }
573
+ )
574
+ ] })
575
+ ]
576
+ }
577
+ ), We = ({
578
+ fields: n,
579
+ onSelect: l,
580
+ onDelete: u,
581
+ selectedFieldId: s
582
+ }) => {
583
+ const [a, d] = I(/* @__PURE__ */ new Set()), { groupedFields: B, ungroupedFields: P } = Ce(() => {
584
+ const p = {}, T = [];
585
+ return n.forEach((x) => {
586
+ x.group ? (p[x.group] || (p[x.group] = []), p[x.group].push(x)) : T.push(x);
587
+ }), { groupedFields: p, ungroupedFields: T };
588
+ }, [n]), G = (p) => {
589
+ d((T) => {
590
+ const x = new Set(T);
591
+ return x.has(p) ? x.delete(p) : x.add(p), x;
592
+ });
593
+ };
594
+ return /* @__PURE__ */ o(
595
+ "div",
596
+ {
597
+ className: "superdoc-field-list",
598
+ style: {
599
+ width: "250px",
600
+ background: "white",
601
+ border: "1px solid #e5e7eb",
602
+ borderRadius: "8px",
603
+ padding: "16px"
604
+ },
605
+ children: [
606
+ /* @__PURE__ */ o("h3", { style: { margin: "0 0 16px 0", fontSize: "16px", fontWeight: "600" }, children: [
607
+ "Template Fields (",
608
+ n.length,
609
+ ")"
610
+ ] }),
611
+ n.length === 0 ? /* @__PURE__ */ o(
612
+ "div",
613
+ {
614
+ style: {
615
+ color: "#9ca3af",
616
+ fontSize: "14px",
617
+ textAlign: "center",
618
+ padding: "20px 0"
619
+ },
620
+ children: [
621
+ "No fields yet. Type ",
622
+ "{{",
623
+ " to add a field."
624
+ ]
625
+ }
626
+ ) : /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
627
+ P.map((p) => /* @__PURE__ */ r(
628
+ be,
629
+ {
630
+ field: p,
631
+ onSelect: l,
632
+ onDelete: u,
633
+ isSelected: s === p.id
634
+ },
635
+ p.id
636
+ )),
637
+ Object.entries(B).map(([p, T]) => {
638
+ const x = a.has(p), y = T[0];
639
+ return /* @__PURE__ */ o("div", { children: [
640
+ /* @__PURE__ */ r(
478
641
  "div",
479
642
  {
480
643
  style: {
481
- fontWeight: "500",
482
- fontSize: "14px",
483
- marginBottom: n.alias && n.alias !== n.id ? "4px" : "0"
644
+ position: "relative",
645
+ padding: "12px",
646
+ background: "#f9fafb",
647
+ border: "1px solid #e5e7eb",
648
+ borderRadius: "6px",
649
+ cursor: "pointer",
650
+ transition: "all 0.2s"
651
+ },
652
+ onClick: () => G(p),
653
+ onMouseEnter: (F) => {
654
+ F.currentTarget.style.background = "#f3f4f6";
484
655
  },
485
- children: n.id
656
+ onMouseLeave: (F) => {
657
+ F.currentTarget.style.background = "#f9fafb";
658
+ },
659
+ children: /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
660
+ /* @__PURE__ */ r("span", { style: { fontSize: "12px", color: "#6b7280" }, children: x ? "▼" : "▶" }),
661
+ /* @__PURE__ */ o("div", { style: { flex: 1 }, children: [
662
+ /* @__PURE__ */ r("div", { style: { fontWeight: "500", fontSize: "14px" }, children: y.alias }),
663
+ /* @__PURE__ */ o(
664
+ "div",
665
+ {
666
+ style: {
667
+ fontSize: "11px",
668
+ color: "#9ca3af",
669
+ marginTop: "2px"
670
+ },
671
+ children: [
672
+ "group: ",
673
+ Be(p),
674
+ " (",
675
+ T.length,
676
+ " fields)"
677
+ ]
678
+ }
679
+ )
680
+ ] })
681
+ ] })
486
682
  }
487
683
  ),
488
- /* @__PURE__ */ g(
684
+ x && /* @__PURE__ */ r(
489
685
  "div",
490
686
  {
491
687
  style: {
688
+ marginLeft: "16px",
689
+ marginTop: "4px",
492
690
  display: "flex",
493
- alignItems: "center",
494
- gap: "6px",
495
- fontSize: "12px",
496
- color: "#4b5563"
691
+ flexDirection: "column",
692
+ gap: "4px"
497
693
  },
498
- children: [
499
- n.alias && n.alias !== n.id && /* @__PURE__ */ i("span", { children: n.alias }),
500
- n.mode && /* @__PURE__ */ i(
501
- "span",
502
- {
503
- style: {
504
- fontSize: "10px",
505
- padding: "2px 6px",
506
- borderRadius: "4px",
507
- background: n.mode === "block" ? "#dbeafe" : "#f3f4f6",
508
- color: n.mode === "block" ? "#1e40af" : "#4b5563",
509
- fontWeight: "500"
510
- },
511
- children: n.mode
512
- }
513
- )
514
- ]
694
+ children: T.map((F) => /* @__PURE__ */ r(
695
+ be,
696
+ {
697
+ field: F,
698
+ onSelect: l,
699
+ onDelete: u,
700
+ isSelected: s === F.id,
701
+ isGrouped: !0
702
+ },
703
+ F.id
704
+ ))
515
705
  }
516
706
  )
517
- ] })
518
- ]
519
- },
520
- n.id
521
- )) })
522
- ]
523
- }
524
- ), ae = (s) => {
525
- const f = s.helpers?.structuredContentCommands;
526
- return f?.getStructuredContentTags ? (f.getStructuredContentTags(s.state) || []).map((c) => {
527
- const n = c?.node ?? c, p = n?.attrs ?? {}, j = (n?.type?.name || "").includes("Block") ? "block" : "inline";
707
+ ] }, p);
708
+ })
709
+ ] })
710
+ ]
711
+ }
712
+ );
713
+ }, Z = (n) => {
714
+ const l = n.helpers?.structuredContentCommands;
715
+ return l?.getStructuredContentTags ? (l.getStructuredContentTags(n.state) || []).map((s) => {
716
+ const a = s?.node ?? s, d = a?.attrs ?? {}, P = (a?.type?.name || "").includes("Block") ? "block" : "inline";
528
717
  return {
529
- id: p.id,
530
- alias: p.alias || p.label || "",
531
- tag: p.tag,
532
- mode: j
718
+ id: d.id,
719
+ alias: d.alias || d.label || "",
720
+ tag: d.tag,
721
+ mode: P,
722
+ group: l.getGroup?.(d.tag) ?? void 0
533
723
  };
534
724
  }) : [];
535
- }, he = (s, f) => {
536
- if (s === f) return !0;
537
- if (s.length !== f.length) return !1;
538
- for (let m = 0; m < s.length; m += 1) {
539
- const c = s[m], n = f[m];
540
- if (!n || c.id !== n.id || c.alias !== n.alias || c.tag !== n.tag || c.position !== n.position || c.mode !== n.mode)
725
+ }, ye = (n, l) => {
726
+ if (n === l) return !0;
727
+ if (n.length !== l.length) return !1;
728
+ for (let u = 0; u < n.length; u += 1) {
729
+ const s = n[u], a = l[u];
730
+ if (!a || s.id !== a.id || s.alias !== a.alias || s.tag !== a.tag || s.position !== a.position || s.mode !== a.mode || s.group !== a.group)
541
731
  return !1;
542
732
  }
543
733
  return !0;
544
- }, Be = (s) => {
545
- if (!s) return null;
546
- if (s === !0)
734
+ }, He = (n) => {
735
+ if (!n) return null;
736
+ if (n === !0)
547
737
  return {
548
738
  selector: "#superdoc-toolbar",
549
739
  config: {},
550
740
  renderDefaultContainer: !0
551
741
  };
552
- if (typeof s == "string")
742
+ if (typeof n == "string")
553
743
  return {
554
- selector: s,
744
+ selector: n,
555
745
  config: {},
556
746
  renderDefaultContainer: !1
557
747
  };
558
- const { selector: f, ...m } = s;
748
+ const { selector: l, ...u } = n;
559
749
  return {
560
- selector: f || "#superdoc-toolbar",
561
- config: m,
562
- renderDefaultContainer: f === void 0
750
+ selector: l || "#superdoc-toolbar",
751
+ config: u,
752
+ renderDefaultContainer: l === void 0
563
753
  };
564
- }, Z = 10, Le = 250, He = 300, ye = (s) => {
565
- const f = window.innerWidth - Le - Z, m = window.innerHeight - He - Z, c = Math.min(s.left, f), n = Math.min(s.top, m);
754
+ }, ie = 10, Le = 250, Pe = 300, ve = (n) => {
755
+ const l = window.innerWidth - Le - ie, u = window.innerHeight - Pe - ie, s = Math.min(n.left, l), a = Math.min(n.top, u);
566
756
  return new DOMRect(
567
- Math.max(c, Z),
568
- Math.max(n, Z),
569
- s.width,
570
- s.height
757
+ Math.max(s, ie),
758
+ Math.max(a, ie),
759
+ n.width,
760
+ n.height
571
761
  );
572
- }, Pe = De((s, f) => {
762
+ }, Ae = Re((n, l) => {
573
763
  const {
574
- document: m,
575
- fields: c = {},
576
- menu: n = {},
577
- list: p = {},
578
- toolbar: H,
579
- onReady: j,
580
- onTrigger: U,
581
- onFieldInsert: G,
582
- onFieldUpdate: D,
583
- onFieldDelete: T,
764
+ document: u,
765
+ fields: s = {},
766
+ menu: a = {},
767
+ list: d = {},
768
+ toolbar: B,
769
+ onReady: P,
770
+ onTrigger: G,
771
+ onFieldInsert: p,
772
+ onFieldUpdate: T,
773
+ onFieldDelete: x,
584
774
  onFieldsChange: y,
585
- onFieldSelect: A,
586
- onFieldCreate: k,
587
- className: te,
588
- style: Q,
589
- documentHeight: X = "600px"
590
- } = s, [u, P] = S(
591
- c.initial || []
592
- ), [I, $] = S(null), [W, r] = S(!1), [x, C] = S(), [h, E] = S(""), [N, be] = S(() => c.available || []), q = _(null), b = _(null), R = _(null), de = _(c);
593
- de.current = c;
594
- const B = _(null), ce = _(W);
595
- ee(() => {
596
- ce.current = W;
597
- }, [W]);
598
- const K = n.trigger || "{{", ne = de.current.available || [], ue = F(
775
+ onFieldSelect: F,
776
+ onFieldCreate: N,
777
+ className: q,
778
+ style: A,
779
+ documentHeight: J = "600px"
780
+ } = n, [g, z] = I(
781
+ s.initial || []
782
+ ), [W, Q] = I(null), [V, M] = I(!1), [ee, h] = I(), [j, b] = I(""), [X, te] = I(() => s.available || []), ne = U(null), w = U(null), D = U(null), ue = U(s);
783
+ ue.current = s;
784
+ const H = U(null), pe = U(V);
785
+ se(() => {
786
+ pe.current = V;
787
+ }, [V]);
788
+ const re = a.trigger || "{{", le = ue.current.available || [], fe = S(
599
789
  (e) => {
600
790
  const t = e.trim().toLowerCase();
601
- return t ? ne.filter((o) => {
602
- const l = o.label.toLowerCase(), w = o.category?.toLowerCase() || "";
603
- return l.includes(t) || w.includes(t);
604
- }) : ne;
791
+ return t ? le.filter((i) => i.label.toLowerCase().includes(t)) : le;
605
792
  },
606
- [ne]
607
- ), re = F(
793
+ [le]
794
+ ), de = S(
608
795
  (e) => {
609
- E(e), be(ue(e));
796
+ b(e), te(fe(e));
610
797
  },
611
- [ue]
612
- ), V = F(() => {
613
- re("");
614
- }, [re]), J = F(
798
+ [fe]
799
+ ), L = S(() => {
800
+ de("");
801
+ }, [de]), Y = S(
615
802
  (e, t) => {
616
- if (!b.current?.activeEditor) return !1;
617
- const o = b.current.activeEditor, l = u, w = e === "inline" ? o.commands.insertStructuredContentInline?.({
803
+ if (!w.current?.activeEditor) return !1;
804
+ const i = w.current.activeEditor, v = g, C = e === "inline" ? i.commands.insertStructuredContentInline?.({
618
805
  attrs: {
619
806
  alias: t.alias,
620
- tag: t.metadata ? JSON.stringify(t.metadata) : t.category
807
+ tag: t.metadata ? JSON.stringify(t.metadata) : void 0
621
808
  },
622
809
  text: t.defaultValue || t.alias
623
- }) : o.commands.insertStructuredContentBlock?.({
810
+ }) : i.commands.insertStructuredContentBlock?.({
624
811
  attrs: {
625
812
  alias: t.alias,
626
- tag: t.metadata ? JSON.stringify(t.metadata) : t.category
813
+ tag: t.metadata ? JSON.stringify(t.metadata) : void 0
627
814
  },
628
815
  text: t.defaultValue || t.alias
629
816
  });
630
- if (w) {
631
- const v = ae(o);
632
- P(v), y?.(v);
633
- const a = v.find(
634
- (d) => !l.some((L) => L.id === d.id)
817
+ if (C) {
818
+ const m = Z(i);
819
+ z(m), y?.(m);
820
+ const E = m.find(
821
+ (c) => !v.some((f) => f.id === c.id)
635
822
  );
636
- a && G?.(a);
823
+ E && p?.(E);
637
824
  }
638
- return w;
825
+ return C;
639
826
  },
640
- [G, y, u]
641
- ), oe = F(
827
+ [p, y, g]
828
+ ), K = S(
642
829
  (e, t) => {
643
- if (!b.current?.activeEditor) return !1;
644
- const l = b.current.activeEditor.commands.updateStructuredContentById?.(e, {
830
+ if (!w.current?.activeEditor) return !1;
831
+ const v = w.current.activeEditor.commands.updateStructuredContentById?.(e, {
645
832
  attrs: t
646
833
  });
647
- return l && P((w) => {
648
- const v = w.map(
649
- (d) => d.id === e ? { ...d, ...t } : d
834
+ return v && z((C) => {
835
+ const m = C.map(
836
+ (c) => c.id === e ? { ...c, ...t } : c
650
837
  );
651
- y?.(v);
652
- const a = v.find((d) => d.id === e);
653
- return a && D?.(a), v;
654
- }), l;
838
+ y?.(m);
839
+ const E = m.find((c) => c.id === e);
840
+ return E && T?.(E), m;
841
+ }), v;
655
842
  },
656
- [D, y]
657
- ), ie = F(
843
+ [T, y]
844
+ ), ae = S(
658
845
  (e) => {
659
- const t = b.current?.activeEditor;
846
+ const t = w.current?.activeEditor;
660
847
  if (!t) {
661
- console.warn(
662
- "[SuperDocTemplateBuilder] deleteField called without active editor"
663
- );
664
- let a = !1;
665
- return P((d) => {
666
- if (!d.some((M) => M.id === e)) return d;
667
- const L = d.filter((M) => M.id !== e);
668
- return a = !0, y?.(L), L;
669
- }), a && (T?.(e), $((d) => d === e ? null : d)), a;
848
+ let f = !1;
849
+ return z((k) => {
850
+ if (!k.some((R) => R.id === e)) return k;
851
+ const $ = k.filter((R) => R.id !== e);
852
+ return f = !0, y?.($), $;
853
+ }), f && (x?.(e), Q((k) => k === e ? null : k)), f;
670
854
  }
671
- let o = !1;
855
+ const v = g.find((f) => f.id === e)?.group;
856
+ let C = !1;
672
857
  try {
673
- o = t.commands.deleteStructuredContentById?.(e) ?? !1;
674
- } catch (a) {
675
- console.error(
676
- "[SuperDocTemplateBuilder] Delete command failed:",
677
- a
858
+ C = t.commands.deleteStructuredContentById?.(e) ?? !1;
859
+ } catch {
860
+ C = !1;
861
+ }
862
+ let m = Z(t);
863
+ const E = m.some((f) => f.id === e);
864
+ if (!C && E && (m = m.filter((f) => f.id !== e)), v) {
865
+ const f = m.filter(
866
+ (k) => k.group === v
678
867
  );
868
+ if (f.length === 1) {
869
+ const k = f[0];
870
+ t.commands.updateStructuredContentById?.(k.id, {
871
+ attrs: { tag: void 0 }
872
+ }), m = Z(t);
873
+ }
679
874
  }
680
- let l = ae(t);
681
- const w = l.some((a) => a.id === e);
682
- !o && w && (l = l.filter((a) => a.id !== e));
683
- let v = !1;
684
- return P((a) => {
685
- if (he(a, l))
686
- return a;
687
- const d = a.some((M) => M.id === e), L = l.some((M) => M.id === e);
688
- return d && !L && (v = !0), y?.(l), l;
689
- }), v && (T?.(e), $((a) => a === e ? null : a)), o || v;
875
+ let c = !1;
876
+ return z((f) => {
877
+ if (ye(f, m))
878
+ return f;
879
+ const k = f.some((R) => R.id === e), $ = m.some((R) => R.id === e);
880
+ return k && !$ && (c = !0), y?.(m), m;
881
+ }), c && (x?.(e), Q((f) => f === e ? null : f)), C || c;
690
882
  },
691
- [T, y]
692
- ), z = F(
883
+ [x, y, g]
884
+ ), O = S(
693
885
  (e) => {
694
- if (!b.current?.activeEditor) return;
695
- b.current.activeEditor.commands.selectStructuredContentById?.(e), $(e);
696
- const o = u.find((l) => l.id === e);
697
- o && A?.(o);
886
+ if (!w.current?.activeEditor) return;
887
+ w.current.activeEditor.commands.selectStructuredContentById?.(e), Q(e);
888
+ const i = g.find((v) => v.id === e);
889
+ i && F?.(i);
698
890
  },
699
- [u, A]
700
- ), se = F(
891
+ [g, F]
892
+ ), ce = S(
701
893
  (e) => {
702
894
  if (!e) return;
703
- const t = ae(e);
704
- P((o) => he(o, t) ? o : (y?.(t), t));
895
+ const t = Z(e);
896
+ z((i) => ye(i, t) ? i : (y?.(t), t));
705
897
  },
706
898
  [y]
707
899
  );
708
- ee(() => q.current ? ((async () => {
709
- const { SuperDoc: t } = await import("superdoc"), o = {
710
- selector: q.current,
711
- document: m?.source,
712
- documentMode: m?.mode || "editing",
900
+ se(() => ne.current ? ((async () => {
901
+ const { SuperDoc: t } = await import("superdoc"), i = {
902
+ selector: ne.current,
903
+ document: u?.source,
904
+ documentMode: u?.mode || "editing",
713
905
  onReady: () => {
714
- if (l.activeEditor) {
715
- const w = l.activeEditor;
716
- w.on("update", ({ editor: v }) => {
717
- const { state: a } = v, { from: d } = a.selection;
718
- if (d >= K.length) {
719
- const le = d - K.length;
720
- if (a.doc.textBetween(le, d) === K) {
721
- const me = v.view.coordsAtPos(d), fe = ye(
906
+ if (v.activeEditor) {
907
+ const C = v.activeEditor;
908
+ C.on("update", ({ editor: m }) => {
909
+ const { state: E } = m, { from: c } = E.selection;
910
+ if (c >= re.length) {
911
+ const R = c - re.length;
912
+ if (E.doc.textBetween(R, c) === re) {
913
+ const me = m.view.coordsAtPos(c), xe = ve(
722
914
  new DOMRect(me.left, me.top, 0, 0)
723
- ), ge = () => {
724
- const Y = b.current?.activeEditor;
725
- if (!Y) return;
726
- const Te = Y.state.selection.from, Ie = Y.state.tr.delete(le, Te);
727
- Y.view.dispatch(Ie);
915
+ ), he = () => {
916
+ const oe = w.current?.activeEditor;
917
+ if (!oe) return;
918
+ const Me = oe.state.selection.from, De = oe.state.tr.delete(R, Me);
919
+ oe.view.dispatch(De);
728
920
  };
729
- R.current = ge, B.current = d, C(fe), r(!0), V(), U?.({
730
- position: { from: le, to: d },
731
- bounds: fe,
732
- cleanup: ge
921
+ D.current = he, H.current = c, h(xe), M(!0), L(), G?.({
922
+ position: { from: R, to: c },
923
+ bounds: xe,
924
+ cleanup: he
733
925
  });
734
926
  return;
735
927
  }
736
928
  }
737
- if (!ce.current)
929
+ if (!pe.current)
738
930
  return;
739
- if (B.current == null) {
740
- r(!1), V();
931
+ if (H.current == null) {
932
+ M(!1), L();
741
933
  return;
742
934
  }
743
- if (d < B.current) {
744
- r(!1), B.current = null, V();
935
+ if (c < H.current) {
936
+ M(!1), H.current = null, L();
745
937
  return;
746
938
  }
747
- const L = a.doc.textBetween(
748
- B.current,
749
- d
939
+ const f = E.doc.textBetween(
940
+ H.current,
941
+ c
750
942
  );
751
- re(L);
752
- const M = v.view.coordsAtPos(d), Se = ye(
753
- new DOMRect(M.left, M.top, 0, 0)
943
+ de(f);
944
+ const k = m.view.coordsAtPos(c), $ = ve(
945
+ new DOMRect(k.left, k.top, 0, 0)
754
946
  );
755
- C(Se);
756
- }), w.on("update", () => {
757
- se(w);
758
- }), se(w);
947
+ h($);
948
+ }), C.on("update", () => {
949
+ ce(C);
950
+ }), ce(C);
759
951
  }
760
- j?.();
952
+ P?.();
761
953
  }
762
- }, l = new t({
763
- selector: q.current,
764
- documentMode: m?.mode || "editing",
765
- ...o,
766
- ...O && {
767
- toolbar: O.selector,
954
+ }, v = new t({
955
+ selector: ne.current,
956
+ documentMode: u?.mode || "editing",
957
+ ...i,
958
+ ..._ && {
959
+ toolbar: _.selector,
768
960
  modules: {
769
961
  toolbar: {
770
- selector: O.selector,
771
- toolbarGroups: O.config.toolbarGroups || ["center"],
772
- excludeItems: O.config.excludeItems || [],
773
- ...O.config
962
+ selector: _.selector,
963
+ toolbarGroups: _.config.toolbarGroups || ["center"],
964
+ excludeItems: _.config.excludeItems || [],
965
+ ..._.config
774
966
  }
775
967
  }
776
968
  }
777
969
  });
778
- b.current = l;
970
+ w.current = v;
779
971
  })(), () => {
780
- R.current = null, B.current = null;
781
- const t = b.current;
782
- t && typeof t.destroy == "function" && t.destroy(), b.current = null;
972
+ D.current = null, H.current = null;
973
+ const t = w.current;
974
+ t && typeof t.destroy == "function" && t.destroy(), w.current = null;
783
975
  }) : void 0, [
784
- m?.source,
785
- m?.mode,
786
- K,
787
- se,
788
- j,
789
- U,
790
- H
976
+ u?.source,
977
+ u?.mode,
978
+ re,
979
+ ce,
980
+ P,
981
+ G,
982
+ B
791
983
  ]);
792
- const ve = F(
984
+ const Fe = S(
793
985
  async (e) => {
794
- R.current && (R.current(), R.current = null), B.current = null, V();
986
+ D.current && (D.current(), D.current = null), H.current = null, L();
795
987
  const t = e.metadata?.mode || "inline";
796
- if (e.id.startsWith("custom_") && k)
797
- try {
798
- const o = await k(e);
799
- if (o) {
800
- const l = o.metadata?.mode || t;
801
- J(l, {
802
- alias: o.label,
803
- category: o.category,
804
- metadata: o.metadata,
805
- defaultValue: o.defaultValue
806
- }), r(!1);
807
- return;
808
- }
809
- } catch (o) {
810
- console.error("Field creation failed:", o);
988
+ if (e.id.startsWith("custom_") && N) {
989
+ const i = await N(e);
990
+ if (i) {
991
+ const v = i.metadata?.mode || t;
992
+ Y(v, {
993
+ alias: i.label,
994
+ metadata: i.metadata,
995
+ defaultValue: i.defaultValue
996
+ }), M(!1);
997
+ return;
811
998
  }
812
- J(t, {
999
+ }
1000
+ Y(t, {
813
1001
  alias: e.label,
814
- category: e.category,
815
1002
  metadata: e.metadata,
816
1003
  defaultValue: e.defaultValue
817
- }), r(!1);
1004
+ }), M(!1);
818
1005
  },
819
- [J, k, V]
820
- ), Ce = F(() => {
821
- r(!1), B.current = null, V(), R.current && (R.current(), R.current = null);
822
- }, [V]), Fe = F(() => {
823
- if (!b.current?.activeEditor || u.length === 0)
1006
+ [Y, N, L]
1007
+ ), we = S(
1008
+ (e) => {
1009
+ D.current && (D.current(), D.current = null), H.current = null, L();
1010
+ const t = w.current?.activeEditor;
1011
+ if (!t) return;
1012
+ const i = t.helpers?.structuredContentCommands;
1013
+ if (!i) return;
1014
+ const v = e.group || `group-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`, C = i.createTagObject?.({
1015
+ group: v
1016
+ });
1017
+ if ((e.mode || "inline") === "inline" ? t.commands.insertStructuredContentInline?.({
1018
+ attrs: {
1019
+ alias: e.alias,
1020
+ tag: C
1021
+ },
1022
+ text: e.alias
1023
+ }) : t.commands.insertStructuredContentBlock?.({
1024
+ attrs: {
1025
+ alias: e.alias,
1026
+ tag: C
1027
+ },
1028
+ text: e.alias
1029
+ })) {
1030
+ e.group || K(e.id, { tag: C }), M(!1);
1031
+ const c = Z(t);
1032
+ z(c), y?.(c);
1033
+ }
1034
+ },
1035
+ [K, L, y]
1036
+ ), ke = S(() => {
1037
+ M(!1), H.current = null, L(), D.current && (D.current(), D.current = null);
1038
+ }, [L]), Se = S(() => {
1039
+ if (!w.current?.activeEditor || g.length === 0)
824
1040
  return;
825
- const e = u.findIndex(
826
- (o) => o.id === I
827
- ), t = e >= 0 ? (e + 1) % u.length : 0;
828
- z(u[t].id);
829
- }, [u, I, z]), we = F(() => {
830
- if (!b.current?.activeEditor || u.length === 0)
1041
+ const e = g.findIndex(
1042
+ (i) => i.id === W
1043
+ ), t = e >= 0 ? (e + 1) % g.length : 0;
1044
+ O(g[t].id);
1045
+ }, [g, W, O]), Te = S(() => {
1046
+ if (!w.current?.activeEditor || g.length === 0)
831
1047
  return;
832
- const e = u.findIndex(
833
- (o) => o.id === I
834
- ), t = e > 0 ? e - 1 : u.length - 1;
835
- z(u[t].id);
836
- }, [u, I, z]), ke = F(
1048
+ const e = g.findIndex(
1049
+ (i) => i.id === W
1050
+ ), t = e > 0 ? e - 1 : g.length - 1;
1051
+ O(g[t].id);
1052
+ }, [g, W, O]), Ee = S(
837
1053
  async (e) => {
838
- const { fileName: t = "document", triggerDownload: o = !0 } = e || {};
839
- try {
840
- return await b.current?.export({
841
- exportType: ["docx"],
842
- exportedName: t,
843
- triggerDownload: o
844
- });
845
- } catch (l) {
846
- throw console.error("Failed to export DOCX", l), l;
847
- }
1054
+ const { fileName: t = "document", triggerDownload: i = !0 } = e || {};
1055
+ return await w.current?.export({
1056
+ exportType: ["docx"],
1057
+ exportedName: t,
1058
+ triggerDownload: i
1059
+ });
848
1060
  },
849
1061
  []
850
1062
  );
851
- Ee(f, () => ({
852
- insertField: (e) => J("inline", e),
853
- insertBlockField: (e) => J("block", e),
854
- updateField: oe,
855
- deleteField: ie,
856
- selectField: z,
857
- nextField: Fe,
858
- previousField: we,
859
- getFields: () => u,
860
- exportTemplate: ke,
861
- getSuperDoc: () => b.current
1063
+ Ne(l, () => ({
1064
+ insertField: (e) => Y("inline", e),
1065
+ insertBlockField: (e) => Y("block", e),
1066
+ updateField: K,
1067
+ deleteField: ae,
1068
+ selectField: O,
1069
+ nextField: Se,
1070
+ previousField: Te,
1071
+ getFields: () => g,
1072
+ exportTemplate: Ee,
1073
+ getSuperDoc: () => w.current
862
1074
  }));
863
- const Me = n.component || Ne, pe = p.component || Re, O = Be(H);
864
- return /* @__PURE__ */ g(
1075
+ const Ie = a.component || ze, ge = d.component || We, _ = He(B);
1076
+ return /* @__PURE__ */ o(
865
1077
  "div",
866
1078
  {
867
- className: `superdoc-template-builder ${te || ""}`,
868
- style: Q,
1079
+ className: `superdoc-template-builder ${q || ""}`,
1080
+ style: A,
869
1081
  children: [
870
- /* @__PURE__ */ g("div", { style: { display: "flex", gap: "20px" }, children: [
871
- p.position === "left" && /* @__PURE__ */ i("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ i(
872
- pe,
1082
+ /* @__PURE__ */ o("div", { style: { display: "flex", gap: "20px" }, children: [
1083
+ d.position === "left" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
1084
+ ge,
873
1085
  {
874
- fields: u,
875
- onSelect: (e) => z(e.id),
876
- onDelete: ie,
877
- onUpdate: (e) => oe(e.id, e),
878
- selectedFieldId: I || void 0
1086
+ fields: g,
1087
+ onSelect: (e) => O(e.id),
1088
+ onDelete: ae,
1089
+ onUpdate: (e) => K(e.id, e),
1090
+ selectedFieldId: W || void 0
879
1091
  }
880
1092
  ) }),
881
- /* @__PURE__ */ g("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
882
- O?.renderDefaultContainer && /* @__PURE__ */ i(
1093
+ /* @__PURE__ */ o("div", { className: "superdoc-template-builder-document", style: { flex: 1 }, children: [
1094
+ _?.renderDefaultContainer && /* @__PURE__ */ r(
883
1095
  "div",
884
1096
  {
885
1097
  id: "superdoc-toolbar",
@@ -887,48 +1099,50 @@ const Ne = ({
887
1099
  "data-testid": "template-builder-toolbar"
888
1100
  }
889
1101
  ),
890
- /* @__PURE__ */ i(
1102
+ /* @__PURE__ */ r(
891
1103
  "div",
892
1104
  {
893
- ref: q,
1105
+ ref: ne,
894
1106
  className: "superdoc-template-builder-editor",
895
- style: { height: X },
1107
+ style: { height: J },
896
1108
  "data-testid": "template-builder-editor"
897
1109
  }
898
1110
  )
899
1111
  ] }),
900
- p.position === "right" && /* @__PURE__ */ i("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ i(
901
- pe,
1112
+ d.position === "right" && /* @__PURE__ */ r("div", { className: "superdoc-template-builder-sidebar", children: /* @__PURE__ */ r(
1113
+ ge,
902
1114
  {
903
- fields: u,
904
- onSelect: (e) => z(e.id),
905
- onDelete: ie,
906
- onUpdate: (e) => oe(e.id, e),
907
- selectedFieldId: I || void 0
1115
+ fields: g,
1116
+ onSelect: (e) => O(e.id),
1117
+ onDelete: ae,
1118
+ onUpdate: (e) => K(e.id, e),
1119
+ selectedFieldId: W || void 0
908
1120
  }
909
1121
  ) })
910
1122
  ] }),
911
- /* @__PURE__ */ i(
912
- Me,
1123
+ /* @__PURE__ */ r(
1124
+ Ie,
913
1125
  {
914
- isVisible: W,
915
- position: x,
916
- availableFields: c.available || [],
917
- filteredFields: N,
918
- filterQuery: h,
919
- allowCreate: c.allowCreate || !1,
920
- onSelect: ve,
921
- onClose: Ce,
922
- onCreateField: k
1126
+ isVisible: V,
1127
+ position: ee,
1128
+ availableFields: s.available || [],
1129
+ filteredFields: X,
1130
+ filterQuery: j,
1131
+ allowCreate: s.allowCreate || !1,
1132
+ onSelect: Fe,
1133
+ onClose: ke,
1134
+ onCreateField: N,
1135
+ existingFields: g,
1136
+ onSelectExisting: we
923
1137
  }
924
1138
  )
925
1139
  ]
926
1140
  }
927
1141
  );
928
1142
  });
929
- Pe.displayName = "SuperDocTemplateBuilder";
1143
+ Ae.displayName = "SuperDocTemplateBuilder";
930
1144
  export {
931
- Re as FieldList,
932
- Ne as FieldMenu,
933
- Pe as default
1145
+ We as FieldList,
1146
+ ze as FieldMenu,
1147
+ Ae as default
934
1148
  };