@cocoar/vue-page-builder 2.5.2 → 2.7.0

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 (12) hide show
  1. package/dist/PageNode.vue.d.ts +4 -3
  2. package/dist/PageNode.vue.d.ts.map +1 -1
  3. package/dist/builder/props/StyleProps.vue.d.ts.map +1 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.js +530 -448
  6. package/dist/schema.d.ts +24 -5
  7. package/dist/schema.d.ts.map +1 -1
  8. package/dist/styleMapping.d.ts +34 -0
  9. package/dist/styleMapping.d.ts.map +1 -0
  10. package/package.json +2 -2
  11. package/dist/builder/BuilderCanvasNode.vue.d.ts +0 -9
  12. package/dist/builder/BuilderCanvasNode.vue.d.ts.map +0 -1
package/dist/index.js CHANGED
@@ -1,48 +1,58 @@
1
1
  import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, provide as g, ref as _, renderList as v, resolveComponent as y, resolveDynamicComponent as b, shallowRef as x, toDisplayString as S, unref as C, useCssVars as w, useModel as T, watch as E, withCtx as D, withModifiers as O } from "vue";
2
- import { CoarButton as k, CoarCard as A, CoarCheckbox as j, CoarDivider as M, CoarFormField as N, CoarIcon as P, CoarPasswordInput as F, CoarSelect as I, CoarTab as L, CoarTabGroup as ee, CoarTextInput as R, setCoarDragImageFromElement as z } from "@cocoar/vue-ui";
2
+ import { CoarButton as k, CoarCard as A, CoarCheckbox as j, CoarDivider as M, CoarFormField as N, CoarIcon as P, CoarPasswordInput as F, CoarSelect as I, CoarTab as L, CoarTabGroup as R, CoarTextInput as z, setCoarDragImageFromElement as B } from "@cocoar/vue-ui";
3
3
  //#region src/context.ts
4
- var B = Symbol("page-renderer");
4
+ var V = Symbol("page-renderer");
5
5
  //#endregion
6
6
  //#region src/schema.ts
7
- function V(e) {
7
+ function H(e) {
8
8
  return e.type === "page" || e.type === "stack" || e.type === "card" || e.type === "section";
9
9
  }
10
- function H(e, t) {
10
+ function U(e, t) {
11
11
  return e === "page" || !t?.allowedElements ? !0 : t.allowedElements.includes(e);
12
12
  }
13
13
  //#endregion
14
+ //#region src/styleMapping.ts
15
+ function W(e, t = "column") {
16
+ let n = {};
17
+ return e ? (e.alignSelf && (n.alignSelf = e.alignSelf), e.size === "fill" ? t === "row" ? n.flex = "1 1 0%" : n.width = "100%" : e.size === "fixed" ? (n.flex = "0 0 auto", e.width && (n.width = e.width)) : e.size === "fit" ? n.flex = "0 0 auto" : e.width && (n.flex = "0 0 auto", n.width = e.width), e.minHeight && (n.minHeight = e.minHeight), n) : n;
18
+ }
19
+ function ee(e, t = "column") {
20
+ let n = W(e, t);
21
+ return e?.padding && (n.padding = e.padding), n;
22
+ }
23
+ function te(e) {
24
+ let t = {};
25
+ return e ? (e.gap && (t.gap = e.gap), e.justify && (t.justifyContent = e.justify), e.align && (t.alignItems = e.align), t) : t;
26
+ }
27
+ //#endregion
14
28
  //#region src/PageNode.vue?vue&type=script&setup=true&lang.ts
15
- var U = {
29
+ var ne = {
16
30
  key: 0,
17
31
  class: "pb-section__title"
18
- }, W = ["src", "alt"], te = /* @__PURE__ */ c({
32
+ }, re = ["src", "alt"], G = Symbol("pb-parent-direction"), ie = /* @__PURE__ */ c({
19
33
  name: "PageNode",
20
34
  __name: "PageNode",
21
35
  props: { node: {} },
22
36
  setup(c) {
23
- let u = c, p = l(B);
37
+ let u = c, p = l(V);
24
38
  if (!p) throw Error("PageNode must be rendered inside CoarPageRenderer.");
25
39
  let m = t(() => {
26
- let e = H(u.node.type, p.config);
40
+ let e = U(u.node.type, p.config);
27
41
  return e || p.reportDisallowed?.(u.node.type), e;
28
- });
29
- function g(e) {
30
- if (!e) return {};
31
- let t = {};
32
- return e.padding && (t.padding = e.padding), e.width && (t.width = e.width), t;
42
+ }), _ = l(G, void 0);
43
+ g(G, t(() => u.node.type === "stack" ? u.node.direction ?? "column" : "column"));
44
+ let x = t(() => ee(u.node.style, _?.value ?? "column"));
45
+ function w(e) {
46
+ return te(e.style);
33
47
  }
34
- function _(e) {
35
- let t = e.style?.gap, n = e.style?.align, r = {};
36
- return t && (r.gap = t), n && (r.alignItems = n), r;
37
- }
38
- let x = t(() => g(u.node.style)), w = t(() => u.node);
39
- function T(e, t) {
48
+ let T = t(() => u.node), E = t(() => "name" in u.node ? u.node.name : void 0);
49
+ function O(e, t) {
40
50
  e && p.triggerAction(e, t);
41
51
  }
42
- function E(e) {
52
+ function P(e) {
43
53
  return p.assetResolver?.(e) ?? "";
44
54
  }
45
- function O(e) {
55
+ function L(e) {
46
56
  return (e ?? []).map((e) => ({
47
57
  value: e.value,
48
58
  label: e.label
@@ -50,99 +60,99 @@ var U = {
50
60
  }
51
61
  return (t, c) => {
52
62
  let l = y("PageNode", !0);
53
- return m.value ? (h(), i(e, { key: 0 }, [w.value.type === "page" ? (h(), i("div", {
63
+ return m.value ? (h(), i(e, { key: 0 }, [T.value.type === "page" ? (h(), i("div", {
54
64
  key: 0,
55
65
  class: "pb-stack",
56
66
  style: f({
57
67
  ...x.value,
58
- ..._(w.value)
68
+ ...w(T.value)
59
69
  })
60
- }, [(h(!0), i(e, null, v(w.value.children, (e) => (h(), n(l, {
70
+ }, [(h(!0), i(e, null, v(T.value.children, (e) => (h(), n(l, {
61
71
  key: e.id,
62
72
  node: e
63
- }, null, 8, ["node"]))), 128))], 4)) : w.value.type === "stack" ? (h(), i("div", {
73
+ }, null, 8, ["node"]))), 128))], 4)) : T.value.type === "stack" ? (h(), i("div", {
64
74
  key: 1,
65
75
  class: d(["pb-stack", {
66
- "pb-stack--row": w.value.direction === "row",
67
- "pb-stack--wrap": w.value.wrap
76
+ "pb-stack--row": T.value.direction === "row",
77
+ "pb-stack--wrap": T.value.wrap
68
78
  }]),
69
79
  style: f({
70
80
  ...x.value,
71
- ..._(w.value)
81
+ ...w(T.value)
72
82
  })
73
- }, [(h(!0), i(e, null, v(w.value.children, (e) => (h(), n(l, {
83
+ }, [(h(!0), i(e, null, v(T.value.children, (e) => (h(), n(l, {
74
84
  key: e.id,
75
85
  node: e
76
- }, null, 8, ["node"]))), 128))], 6)) : w.value.type === "card" ? (h(), n(C(A), {
86
+ }, null, 8, ["node"]))), 128))], 6)) : T.value.type === "card" ? (h(), n(C(A), {
77
87
  key: 2,
78
- title: w.value.title,
88
+ title: T.value.title,
79
89
  style: f(x.value)
80
90
  }, {
81
91
  default: D(() => [a("div", {
82
92
  class: "pb-card-body",
83
- style: f(_(w.value))
84
- }, [(h(!0), i(e, null, v(w.value.children, (e) => (h(), n(l, {
93
+ style: f(w(T.value))
94
+ }, [(h(!0), i(e, null, v(T.value.children, (e) => (h(), n(l, {
85
95
  key: e.id,
86
96
  node: e
87
97
  }, null, 8, ["node"]))), 128))], 4)]),
88
98
  _: 1
89
- }, 8, ["title", "style"])) : w.value.type === "section" ? (h(), i("section", {
99
+ }, 8, ["title", "style"])) : T.value.type === "section" ? (h(), i("section", {
90
100
  key: 3,
91
101
  class: "pb-section",
92
102
  style: f(x.value)
93
- }, [w.value.title ? (h(), i("h3", U, S(w.value.title), 1)) : r("", !0), a("div", {
103
+ }, [T.value.title ? (h(), i("h3", ne, S(T.value.title), 1)) : r("", !0), a("div", {
94
104
  class: "pb-section__body",
95
- style: f(_(w.value))
96
- }, [(h(!0), i(e, null, v(w.value.children, (e) => (h(), n(l, {
105
+ style: f(w(T.value))
106
+ }, [(h(!0), i(e, null, v(T.value.children, (e) => (h(), n(l, {
97
107
  key: e.id,
98
108
  node: e
99
- }, null, 8, ["node"]))), 128))], 4)], 4)) : w.value.type === "divider" ? (h(), n(C(M), {
109
+ }, null, 8, ["node"]))), 128))], 4)], 4)) : T.value.type === "divider" ? (h(), n(C(M), {
100
110
  key: 4,
101
111
  style: f(x.value)
102
- }, null, 8, ["style"])) : w.value.type === "spacer" ? (h(), i("div", {
112
+ }, null, 8, ["style"])) : T.value.type === "spacer" ? (h(), i("div", {
103
113
  key: 5,
104
114
  class: "pb-spacer",
105
- style: f(w.value.size ? {
106
- height: w.value.size,
107
- width: w.value.size
115
+ style: f(T.value.size ? {
116
+ height: T.value.size,
117
+ width: T.value.size
108
118
  } : { flex: "1" })
109
- }, null, 4)) : w.value.type === "heading" ? (h(), n(b(`h${w.value.level ?? 2}`), {
119
+ }, null, 4)) : T.value.type === "heading" ? (h(), n(b(`h${T.value.level ?? 2}`), {
110
120
  key: 6,
111
121
  class: "pb-heading",
112
122
  style: f(x.value)
113
123
  }, {
114
- default: D(() => [o(S(w.value.text), 1)]),
124
+ default: D(() => [o(S(T.value.text), 1)]),
115
125
  _: 1
116
- }, 8, ["style"])) : w.value.type === "paragraph" ? (h(), i("p", {
126
+ }, 8, ["style"])) : T.value.type === "paragraph" ? (h(), i("p", {
117
127
  key: 7,
118
128
  class: "pb-paragraph",
119
129
  style: f(x.value)
120
- }, S(w.value.text), 5)) : w.value.type === "text-input" ? (h(), n(C(N), {
130
+ }, S(T.value.text), 5)) : T.value.type === "text-input" ? (h(), n(C(N), {
121
131
  key: 8,
122
- label: w.value.label,
123
- required: w.value.validation?.required,
124
- error: w.value.name ? C(p).getError(w.value.name) : "",
125
- disabled: w.value.disabled,
132
+ label: T.value.label,
133
+ required: T.value.validation?.required,
134
+ error: E.value ? C(p).getError(E.value) : "",
135
+ disabled: T.value.disabled,
126
136
  style: f(x.value)
127
137
  }, {
128
- default: D(() => [w.value.inputType === "password" ? (h(), n(C(F), {
138
+ default: D(() => [T.value.inputType === "password" ? (h(), n(C(F), {
129
139
  key: 0,
130
- "model-value": w.value.name ? C(p).getValue(w.value.name) ?? "" : "",
131
- placeholder: w.value.placeholder,
132
- disabled: w.value.disabled,
133
- "onUpdate:modelValue": c[0] ||= (e) => w.value.name && C(p).setValue(w.value.name, e),
134
- onBlurred: c[1] ||= (e) => w.value.name && C(p).markTouched(w.value.name)
140
+ "model-value": E.value ? C(p).getValue(E.value) ?? "" : "",
141
+ placeholder: T.value.placeholder,
142
+ disabled: T.value.disabled,
143
+ "onUpdate:modelValue": c[0] ||= (e) => E.value && C(p).setValue(E.value, e),
144
+ onBlurred: c[1] ||= (e) => E.value && C(p).markTouched(E.value)
135
145
  }, null, 8, [
136
146
  "model-value",
137
147
  "placeholder",
138
148
  "disabled"
139
- ])) : (h(), n(C(R), {
149
+ ])) : (h(), n(C(z), {
140
150
  key: 1,
141
- "model-value": w.value.name ? C(p).getValue(w.value.name) ?? "" : "",
142
- placeholder: w.value.placeholder,
143
- disabled: w.value.disabled,
144
- "onUpdate:modelValue": c[2] ||= (e) => w.value.name && C(p).setValue(w.value.name, e),
145
- onBlurred: c[3] ||= (e) => w.value.name && C(p).markTouched(w.value.name)
151
+ "model-value": E.value ? C(p).getValue(E.value) ?? "" : "",
152
+ placeholder: T.value.placeholder,
153
+ disabled: T.value.disabled,
154
+ "onUpdate:modelValue": c[2] ||= (e) => E.value && C(p).setValue(E.value, e),
155
+ onBlurred: c[3] ||= (e) => E.value && C(p).markTouched(E.value)
146
156
  }, null, 8, [
147
157
  "model-value",
148
158
  "placeholder",
@@ -155,34 +165,34 @@ var U = {
155
165
  "error",
156
166
  "disabled",
157
167
  "style"
158
- ])) : w.value.type === "checkbox" ? (h(), n(C(j), {
168
+ ])) : T.value.type === "checkbox" ? (h(), n(C(j), {
159
169
  key: 9,
160
- "model-value": w.value.name ? C(p).getValue(w.value.name) ?? !1 : !1,
161
- label: w.value.label,
162
- required: w.value.validation?.required,
163
- disabled: w.value.disabled,
170
+ "model-value": E.value ? C(p).getValue(E.value) ?? !1 : !1,
171
+ label: T.value.label,
172
+ required: T.value.validation?.required,
173
+ disabled: T.value.disabled,
164
174
  style: f(x.value),
165
- "onUpdate:modelValue": c[4] ||= (e) => w.value.name && C(p).setValue(w.value.name, e)
175
+ "onUpdate:modelValue": c[4] ||= (e) => E.value && C(p).setValue(E.value, e)
166
176
  }, null, 8, [
167
177
  "model-value",
168
178
  "label",
169
179
  "required",
170
180
  "disabled",
171
181
  "style"
172
- ])) : w.value.type === "select" ? (h(), n(C(N), {
182
+ ])) : T.value.type === "select" ? (h(), n(C(N), {
173
183
  key: 10,
174
- label: w.value.label,
175
- required: w.value.validation?.required,
176
- error: w.value.name ? C(p).getError(w.value.name) : "",
177
- disabled: w.value.disabled,
184
+ label: T.value.label,
185
+ required: T.value.validation?.required,
186
+ error: E.value ? C(p).getError(E.value) : "",
187
+ disabled: T.value.disabled,
178
188
  style: f(x.value)
179
189
  }, {
180
190
  default: D(() => [s(C(I), {
181
- "model-value": w.value.name ? C(p).getValue(w.value.name) ?? null : null,
182
- options: O(w.value.options),
183
- placeholder: w.value.placeholder,
184
- disabled: w.value.disabled,
185
- "onUpdate:modelValue": c[5] ||= (e) => w.value.name && C(p).setValue(w.value.name, e)
191
+ "model-value": E.value ? C(p).getValue(E.value) ?? null : null,
192
+ options: L(T.value.options),
193
+ placeholder: T.value.placeholder,
194
+ disabled: T.value.disabled,
195
+ "onUpdate:modelValue": c[5] ||= (e) => E.value && C(p).setValue(E.value, e)
186
196
  }, null, 8, [
187
197
  "model-value",
188
198
  "options",
@@ -196,17 +206,17 @@ var U = {
196
206
  "error",
197
207
  "disabled",
198
208
  "style"
199
- ])) : w.value.type === "button" ? (h(), n(C(k), {
209
+ ])) : T.value.type === "button" ? (h(), n(C(k), {
200
210
  key: 11,
201
211
  class: "pb-button",
202
- variant: w.value.variant ?? "primary",
203
- size: w.value.size,
204
- "icon-left": w.value.icon,
205
- disabled: w.value.validates && !C(p).isFormValid.value,
212
+ variant: T.value.variant ?? "primary",
213
+ size: T.value.size,
214
+ "icon-left": T.value.icon,
215
+ disabled: T.value.validates && !C(p).isFormValid.value,
206
216
  style: f(x.value),
207
- onClick: c[6] ||= (e) => T(w.value.action, w.value.validates)
217
+ onClick: c[6] ||= (e) => O(T.value.action, T.value.validates)
208
218
  }, {
209
- default: D(() => [o(S(w.value.label), 1)]),
219
+ default: D(() => [o(S(T.value.label), 1)]),
210
220
  _: 1
211
221
  }, 8, [
212
222
  "variant",
@@ -214,25 +224,25 @@ var U = {
214
224
  "icon-left",
215
225
  "disabled",
216
226
  "style"
217
- ])) : w.value.type === "link" ? (h(), i("button", {
227
+ ])) : T.value.type === "link" ? (h(), i("button", {
218
228
  key: 12,
219
229
  class: "pb-link",
220
230
  style: f(x.value),
221
- onClick: c[7] ||= (e) => T(w.value.action)
222
- }, S(w.value.label), 5)) : w.value.type === "image" ? (h(), i("img", {
231
+ onClick: c[7] ||= (e) => O(T.value.action)
232
+ }, S(T.value.label), 5)) : T.value.type === "image" ? (h(), i("img", {
223
233
  key: 13,
224
234
  class: "pb-image",
225
- src: E(w.value.assetId),
226
- alt: w.value.alt ?? "",
235
+ src: P(T.value.assetId),
236
+ alt: T.value.alt ?? "",
227
237
  style: f(x.value)
228
- }, null, 12, W)) : r("", !0)], 64)) : r("", !0);
238
+ }, null, 12, re)) : r("", !0)], 64)) : r("", !0);
229
239
  };
230
240
  }
231
- }), G = (e, t) => {
241
+ }), K = (e, t) => {
232
242
  let n = e.__vccOpts || e;
233
243
  for (let [e, r] of t) n[e] = r;
234
244
  return n;
235
- }, ne = /* @__PURE__ */ G(te, [["__scopeId", "data-v-0632b6f4"]]), K = { class: "coar-page-renderer" }, q = /* @__PURE__ */ G(/* @__PURE__ */ c({
245
+ }, ae = /* @__PURE__ */ K(ie, [["__scopeId", "data-v-d49524e6"]]), oe = { class: "coar-page-renderer" }, q = /* @__PURE__ */ K(/* @__PURE__ */ c({
236
246
  __name: "CoarPageRenderer",
237
247
  props: {
238
248
  schema: {},
@@ -285,7 +295,7 @@ var U = {
285
295
  o(e) && e.name && (a.value[e.name] = !0), "children" in e && e.children.forEach(m);
286
296
  }
287
297
  let v = /* @__PURE__ */ new Set();
288
- return g(B, {
298
+ return g(V, {
289
299
  get actions() {
290
300
  return n.actions;
291
301
  },
@@ -310,13 +320,13 @@ var U = {
310
320
  triggerAction(e, t = !1) {
311
321
  t && (m(n.schema), !p.value) || n.actions?.[e]?.(r.value);
312
322
  }
313
- }), (t, n) => (h(), i("div", K, [s(ne, { node: e.schema }, null, 8, ["node"])]));
323
+ }), (t, n) => (h(), i("div", oe, [s(ae, { node: e.schema }, null, 8, ["node"])]));
314
324
  }
315
325
  }), [["__scopeId", "data-v-8ff147bf"]]), J = 0;
316
326
  function Y() {
317
327
  return J += 1, `node_${J}`;
318
328
  }
319
- function X(e) {
329
+ function se(e) {
320
330
  switch (e) {
321
331
  case "page": return {
322
332
  id: Y(),
@@ -402,10 +412,10 @@ function X(e) {
402
412
  }
403
413
  //#endregion
404
414
  //#region src/builder/operations.ts
405
- function Z(e, t) {
415
+ function X(e, t) {
406
416
  let n = e, r = null, i = -1;
407
417
  for (let e of t) {
408
- if (!V(n) || e < 0 || e >= n.children.length) return null;
418
+ if (!H(n) || e < 0 || e >= n.children.length) return null;
409
419
  r = n, i = e, n = n.children[e];
410
420
  }
411
421
  return {
@@ -415,10 +425,10 @@ function Z(e, t) {
415
425
  index: i
416
426
  };
417
427
  }
418
- function re(e, t) {
428
+ function ce(e, t) {
419
429
  if (e === t) return [];
420
430
  function n(e, r) {
421
- if (!V(e)) return null;
431
+ if (!H(e)) return null;
422
432
  for (let i = 0; i < e.children.length; i++) {
423
433
  let a = e.children[i];
424
434
  if (a === t) return [...r, i];
@@ -429,14 +439,14 @@ function re(e, t) {
429
439
  }
430
440
  return n(e, []);
431
441
  }
432
- function ie(e, t) {
442
+ function Z(e, t) {
433
443
  if (e.length > t.length) return !1;
434
444
  for (let n = 0; n < e.length; n++) if (e[n] !== t[n]) return !1;
435
445
  return !0;
436
446
  }
437
- function ae(e, t, n, r) {
438
- return fe(e, t, (e) => {
439
- if (!V(e)) return e;
447
+ function le(e, t, n, r) {
448
+ return ge(e, t, (e) => {
449
+ if (!H(e)) return e;
440
450
  let t = Math.max(0, Math.min(n, e.children.length));
441
451
  return {
442
452
  ...e,
@@ -448,52 +458,52 @@ function ae(e, t, n, r) {
448
458
  };
449
459
  });
450
460
  }
451
- function oe(e, t) {
461
+ function ue(e, t) {
452
462
  if (t.length === 0) return e;
453
463
  let n = t.slice(0, -1), r = t[t.length - 1];
454
- return fe(e, n, (e) => V(e) ? {
464
+ return ge(e, n, (e) => H(e) ? {
455
465
  ...e,
456
466
  children: e.children.filter((e, t) => t !== r)
457
467
  } : e);
458
468
  }
459
- function se(e, t, n) {
469
+ function de(e, t, n) {
460
470
  if (t.length === 0) return n;
461
471
  let r = t.slice(0, -1), i = t[t.length - 1];
462
- return fe(e, r, (e) => V(e) ? {
472
+ return ge(e, r, (e) => H(e) ? {
463
473
  ...e,
464
474
  children: e.children.map((e, t) => t === i ? n : e)
465
475
  } : e);
466
476
  }
467
- function ce(e, t, n) {
468
- let r = Z(e, t);
477
+ function fe(e, t, n) {
478
+ let r = X(e, t);
469
479
  if (!r) return e;
470
480
  let i = r.node, a = { ...r.node }, o = !1;
471
481
  for (let [e, t] of Object.entries(n)) e === "type" || e === "id" || (t === "" || t == null ? i[e] !== void 0 && (delete a[e], o = !0) : i[e] !== t && (a[e] = t, o = !0));
472
- return o ? se(e, t, a) : e;
482
+ return o ? de(e, t, a) : e;
473
483
  }
474
- function le(e, t, n, r) {
475
- if (t.length === 0 || ie(t, n)) return e;
476
- let i = Z(e, t);
484
+ function pe(e, t, n, r) {
485
+ if (t.length === 0 || Z(t, n)) return e;
486
+ let i = X(e, t);
477
487
  if (!i) return e;
478
488
  let a = t.slice(0, -1), o = t[t.length - 1];
479
- return de(a, n) && r === o ? e : ae(oe(e, t), n, r, i.node);
489
+ return he(a, n) && r === o ? e : le(ue(e, t), n, r, i.node);
480
490
  }
481
- function ue(e, t, n) {
491
+ function me(e, t, n) {
482
492
  if (t.length === 0) return e;
483
- let r = t.slice(0, -1), i = t[t.length - 1], a = Z(e, r);
484
- if (!a || !V(a.node)) return e;
493
+ let r = t.slice(0, -1), i = t[t.length - 1], a = X(e, r);
494
+ if (!a || !H(a.node)) return e;
485
495
  let o = i + n;
486
- return o < 0 || o >= a.node.children.length ? e : le(e, t, r, o);
496
+ return o < 0 || o >= a.node.children.length ? e : pe(e, t, r, o);
487
497
  }
488
- function de(e, t) {
498
+ function he(e, t) {
489
499
  if (e.length !== t.length) return !1;
490
500
  for (let n = 0; n < e.length; n++) if (e[n] !== t[n]) return !1;
491
501
  return !0;
492
502
  }
493
- function fe(e, t, n) {
503
+ function ge(e, t, n) {
494
504
  function r(e, i) {
495
505
  if (i === t.length) return n(e);
496
- if (!V(e)) return e;
506
+ if (!H(e)) return e;
497
507
  let a = t[i];
498
508
  return a < 0 || a >= e.children.length ? e : {
499
509
  ...e,
@@ -504,8 +514,8 @@ function fe(e, t, n) {
504
514
  }
505
515
  //#endregion
506
516
  //#region src/builder/usePageBuilder.ts
507
- var pe = 500;
508
- function me(e = {}) {
517
+ var _e = 500;
518
+ function ve(e = {}) {
509
519
  let n = e.schema ?? x(e.initial ?? {
510
520
  id: "root",
511
521
  type: "page",
@@ -519,7 +529,7 @@ function me(e = {}) {
519
529
  return;
520
530
  }
521
531
  let n = t.path.join("/"), r = Date.now();
522
- c?.kind === "patch" && c.pathKey === n && r - c.time < pe || (o.value = [...o.value, e], s.value = []), c = {
532
+ c?.kind === "patch" && c.pathKey === n && r - c.time < _e || (o.value = [...o.value, e], s.value = []), c = {
523
533
  kind: "patch",
524
534
  pathKey: n,
525
535
  time: r
@@ -528,31 +538,31 @@ function me(e = {}) {
528
538
  function u() {
529
539
  if (o.value.length === 0) return;
530
540
  let e = o.value[o.value.length - 1];
531
- o.value = o.value.slice(0, -1), s.value = [...s.value, n.value], n.value = e, (!r.value || !Z(e, r.value)) && (r.value = []), c = null, a();
541
+ o.value = o.value.slice(0, -1), s.value = [...s.value, n.value], n.value = e, (!r.value || !X(e, r.value)) && (r.value = []), c = null, a();
532
542
  }
533
543
  function d() {
534
544
  if (s.value.length === 0) return;
535
545
  let e = s.value[s.value.length - 1];
536
- s.value = s.value.slice(0, -1), o.value = [...o.value, n.value], n.value = e, (!r.value || !Z(e, r.value)) && (r.value = []), c = null, a();
546
+ s.value = s.value.slice(0, -1), o.value = [...o.value, n.value], n.value = e, (!r.value || !X(e, r.value)) && (r.value = []), c = null, a();
537
547
  }
538
- let f = t(() => o.value.length > 0), p = t(() => s.value.length > 0), m = t(() => r.value ? Z(n.value, r.value)?.node ?? null : null);
548
+ let f = t(() => o.value.length > 0), p = t(() => s.value.length > 0), m = t(() => r.value ? X(n.value, r.value)?.node ?? null : null);
539
549
  function h(e) {
540
550
  r.value = e;
541
551
  }
542
552
  function g(e) {
543
- r.value = re(n.value, e);
553
+ r.value = ce(n.value, e);
544
554
  }
545
555
  function v(e, t, i) {
546
- let o = Z(n.value, e);
556
+ let o = X(n.value, e);
547
557
  if (!o) return;
548
- let s = n.value, c = X(t), u = "children" in o.node ? o.node.children.length : 0, d = i ?? u;
549
- n.value = ae(n.value, e, d, c), r.value = [...e, d], l(s, { kind: "structural" }), a();
558
+ let s = n.value, c = se(t), u = "children" in o.node ? o.node.children.length : 0, d = i ?? u;
559
+ n.value = le(n.value, e, d, c), r.value = [...e, d], l(s, { kind: "structural" }), a();
550
560
  }
551
561
  function y(e) {
552
562
  if (e.length === 0) return;
553
- let t = n.value, i = oe(n.value, e);
563
+ let t = n.value, i = ue(n.value, e);
554
564
  n.value = i;
555
- let o = e.slice(0, -1), s = e[e.length - 1], c = Z(i, o);
565
+ let o = e.slice(0, -1), s = e[e.length - 1], c = X(i, o);
556
566
  if (c && "children" in c.node && c.node.children.length > 0) {
557
567
  let e = Math.max(0, s - 1);
558
568
  r.value = [...o, Math.min(e, c.node.children.length - 1)];
@@ -560,15 +570,15 @@ function me(e = {}) {
560
570
  l(t, { kind: "structural" }), a();
561
571
  }
562
572
  function b(e, t) {
563
- let i = n.value, o = ue(i, e, t);
573
+ let i = n.value, o = me(i, e, t);
564
574
  i !== o && (n.value = o, r.value = [...e.slice(0, -1), e[e.length - 1] + t], l(i, { kind: "structural" }), a());
565
575
  }
566
576
  function S(e, t, i) {
567
- let o = n.value, s = le(o, e, t, i);
577
+ let o = n.value, s = pe(o, e, t, i);
568
578
  o !== s && (n.value = s, r.value = [...t, i], l(o, { kind: "structural" }), a());
569
579
  }
570
580
  function C(e, t) {
571
- let r = n.value, i = ce(n.value, e, t);
581
+ let r = n.value, i = fe(n.value, e, t);
572
582
  r !== i && (n.value = i, l(r, {
573
583
  kind: "patch",
574
584
  path: e
@@ -599,14 +609,14 @@ function me(e = {}) {
599
609
  }
600
610
  //#endregion
601
611
  //#region src/builder/useSchemaValidation.ts
602
- function he(e, n) {
612
+ function ye(e, n) {
603
613
  let r = t(() => {
604
614
  let t = [], r = [], i = new Set(n.value?.availableActions?.map((e) => e.id) ?? []), a = (n.value?.availableActions?.length ?? 0) > 0, o = new Set([
605
615
  "text-input",
606
616
  "checkbox",
607
617
  "select"
608
618
  ]);
609
- ge(e.value, (e) => {
619
+ be(e.value, (e) => {
610
620
  if (e.type === "button" && (e.action ? a && !i.has(e.action) && t.push({
611
621
  nodeId: e.id,
612
622
  field: "action",
@@ -665,25 +675,25 @@ function he(e, n) {
665
675
  })
666
676
  };
667
677
  }
668
- function ge(e, t) {
669
- if (t(e), "children" in e) for (let n of e.children) ge(n, t);
678
+ function be(e, t) {
679
+ if (t(e), "children" in e) for (let n of e.children) be(n, t);
670
680
  }
671
681
  //#endregion
672
682
  //#region src/builder/builderContext.ts
673
- var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("PageBuilderValidation"), ve = {
683
+ var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), xe = Symbol("PageBuilderValidation"), Se = {
674
684
  class: "pb-tree-grip",
675
685
  "aria-hidden": "true"
676
- }, ye = {
686
+ }, Ce = {
677
687
  class: "pb-tree-type-icon",
678
688
  "aria-hidden": "true"
679
- }, be = { class: "pb-tree-label" }, xe = { class: "pb-tree-label-text" }, Se = {
689
+ }, we = { class: "pb-tree-label" }, Te = { class: "pb-tree-label-text" }, Ee = {
680
690
  key: 0,
681
691
  class: "pb-tree-label-key"
682
- }, Ce = ["title"], we = { class: "pb-tree-actions" }, Te = ["disabled"], Ee = ["disabled"], De = {
692
+ }, De = ["title"], Oe = { class: "pb-tree-actions" }, ke = ["disabled"], Ae = ["disabled"], je = {
683
693
  key: 0,
684
694
  class: "pb-tree-add__menu",
685
695
  role: "menu"
686
- }, Oe = ["onClick"], ke = ["onClick"], Ae = /* @__PURE__ */ G(/* @__PURE__ */ c({
696
+ }, Me = ["onClick"], Ne = ["onClick"], Pe = /* @__PURE__ */ K(/* @__PURE__ */ c({
687
697
  name: "BuilderOutlineNode",
688
698
  __name: "BuilderOutlineNode",
689
699
  props: {
@@ -692,7 +702,7 @@ var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("
692
702
  depth: { default: 0 }
693
703
  },
694
704
  setup(o) {
695
- let c = o, u = l(Q), g = l($), b = l(_e), x = t(() => N.filter((e) => H(e.type, g?.value))), w = t(() => b?.byNodeId.value.get(c.node.id) ?? []), T = t(() => w.value.some((e) => e.severity === "error") ? "error" : w.value.length > 0 ? "warning" : null), E = t(() => w.value.map((e) => `• ${e.message}`).join("\n")), D = t(() => c.path.length === 0), k = t(() => {
705
+ let c = o, u = l(Q), g = l($), b = l(xe), x = t(() => N.filter((e) => U(e.type, g?.value))), w = t(() => b?.byNodeId.value.get(c.node.id) ?? []), T = t(() => w.value.some((e) => e.severity === "error") ? "error" : w.value.length > 0 ? "warning" : null), E = t(() => w.value.map((e) => `• ${e.message}`).join("\n")), D = t(() => c.path.length === 0), k = t(() => {
696
706
  let e = u.selectedPath.value;
697
707
  return e !== null && e.length === c.path.length && e.every((e, t) => e === c.path[t]);
698
708
  }), A = {
@@ -799,33 +809,33 @@ var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("
799
809
  function L() {
800
810
  F.value = !F.value;
801
811
  }
802
- function ee(e) {
812
+ function R(e) {
803
813
  F.value = !1, u.addChild(c.path, e);
804
814
  }
805
- function R(e) {
815
+ function z(e) {
806
816
  if (!F.value) return;
807
817
  let t = e.target;
808
818
  t && I.value && !I.value.contains(t) && (F.value = !1);
809
819
  }
810
- function z(e) {
820
+ function B(e) {
811
821
  e.key === "Escape" && (F.value = !1);
812
822
  }
813
823
  m(() => {
814
- document.addEventListener("click", R), document.addEventListener("keydown", z);
824
+ document.addEventListener("click", z), document.addEventListener("keydown", B);
815
825
  }), p(() => {
816
- document.removeEventListener("click", R), document.removeEventListener("keydown", z);
826
+ document.removeEventListener("click", z), document.removeEventListener("keydown", B);
817
827
  });
818
- function B() {
828
+ function V() {
819
829
  return c.path.length > 0 && c.path[c.path.length - 1] > 0;
820
830
  }
821
- function U() {
831
+ function W() {
822
832
  if (c.path.length === 0) return !1;
823
833
  let e = c.path.slice(0, -1), t = c.path[c.path.length - 1], n = u.schema.value;
824
834
  for (let t of e) {
825
- if (!V(n)) return !1;
835
+ if (!H(n)) return !1;
826
836
  n = n.children[t];
827
837
  }
828
- return V(n) && t < n.children.length - 1;
838
+ return H(n) && t < n.children.length - 1;
829
839
  }
830
840
  return (t, c) => {
831
841
  let l = y("BuilderOutlineNode", !0);
@@ -837,15 +847,15 @@ var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("
837
847
  style: f({ paddingLeft: `${8 + o.depth * 16}px` }),
838
848
  onClick: c[3] ||= O((e) => C(u).select(o.path), ["stop"])
839
849
  }, [
840
- a("span", ve, [s(C(P), {
850
+ a("span", Se, [s(C(P), {
841
851
  name: "grip-vertical",
842
852
  size: "xs"
843
853
  })]),
844
- a("span", ye, [s(C(P), {
854
+ a("span", Ce, [s(C(P), {
845
855
  name: A[o.node.type],
846
856
  size: "s"
847
857
  }, null, 8, ["name"])]),
848
- a("span", be, [a("span", xe, S(j.value), 1), M.value ? (h(), i("span", Se, S(M.value), 1)) : r("", !0)]),
858
+ a("span", we, [a("span", Te, S(j.value), 1), M.value ? (h(), i("span", Ee, S(M.value), 1)) : r("", !0)]),
849
859
  T.value ? (h(), i("span", {
850
860
  key: 0,
851
861
  class: d(["pb-tree-issue", `pb-tree-issue--${T.value}`]),
@@ -854,30 +864,30 @@ var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("
854
864
  }, [s(C(P), {
855
865
  name: T.value === "error" ? "circle-alert" : "triangle-alert",
856
866
  size: "s"
857
- }, null, 8, ["name"])], 10, Ce)) : r("", !0),
858
- a("div", we, [
867
+ }, null, 8, ["name"])], 10, De)) : r("", !0),
868
+ a("div", Oe, [
859
869
  D.value ? r("", !0) : (h(), i("button", {
860
870
  key: 0,
861
871
  type: "button",
862
872
  class: "pb-tree-btn",
863
- disabled: !B(),
873
+ disabled: !V(),
864
874
  title: "Move up",
865
875
  onClick: c[0] ||= O((e) => C(u).move(o.path, -1), ["stop"])
866
876
  }, [s(C(P), {
867
877
  name: "chevron-up",
868
878
  size: "s"
869
- })], 8, Te)),
879
+ })], 8, ke)),
870
880
  D.value ? r("", !0) : (h(), i("button", {
871
881
  key: 1,
872
882
  type: "button",
873
883
  class: "pb-tree-btn",
874
- disabled: !U(),
884
+ disabled: !W(),
875
885
  title: "Move down",
876
886
  onClick: c[1] ||= O((e) => C(u).move(o.path, 1), ["stop"])
877
887
  }, [s(C(P), {
878
888
  name: "chevron-down",
879
889
  size: "s"
880
- })], 8, Ee)),
890
+ })], 8, Ae)),
881
891
  D.value ? r("", !0) : (h(), i("button", {
882
892
  key: 2,
883
893
  type: "button",
@@ -889,7 +899,7 @@ var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("
889
899
  size: "s"
890
900
  })]))
891
901
  ])
892
- ], 4), C(V)(o.node) ? (h(), i(e, { key: 0 }, [(h(!0), i(e, null, v(o.node.children, (e, t) => (h(), n(l, {
902
+ ], 4), C(H)(o.node) ? (h(), i(e, { key: 0 }, [(h(!0), i(e, null, v(o.node.children, (e, t) => (h(), n(l, {
893
903
  key: t,
894
904
  node: e,
895
905
  path: [...o.path, t],
@@ -910,18 +920,18 @@ var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("
910
920
  }, [s(C(P), {
911
921
  name: "plus",
912
922
  size: "s"
913
- }), c[4] ||= a("span", null, "Add child", -1)], 2), F.value ? (h(), i("div", De, [
923
+ }), c[4] ||= a("span", null, "Add child", -1)], 2), F.value ? (h(), i("div", je, [
914
924
  c[5] ||= a("div", { class: "pb-tree-add__group-label" }, "Containers", -1),
915
925
  (h(!0), i(e, null, v(x.value.filter((e) => e.group === "container"), (e) => (h(), i("button", {
916
926
  key: e.type,
917
927
  type: "button",
918
928
  class: "pb-tree-add__item",
919
929
  role: "menuitem",
920
- onClick: O((t) => ee(e.type), ["stop"])
930
+ onClick: O((t) => R(e.type), ["stop"])
921
931
  }, [s(C(P), {
922
932
  name: e.icon,
923
933
  size: "s"
924
- }, null, 8, ["name"]), a("span", null, S(e.label), 1)], 8, Oe))), 128)),
934
+ }, null, 8, ["name"]), a("span", null, S(e.label), 1)], 8, Me))), 128)),
925
935
  c[6] ||= a("div", { class: "pb-tree-add__divider" }, null, -1),
926
936
  c[7] ||= a("div", { class: "pb-tree-add__group-label" }, "Elements", -1),
927
937
  (h(!0), i(e, null, v(x.value.filter((e) => e.group === "element"), (e) => (h(), i("button", {
@@ -929,34 +939,34 @@ var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("
929
939
  type: "button",
930
940
  class: "pb-tree-add__item",
931
941
  role: "menuitem",
932
- onClick: O((t) => ee(e.type), ["stop"])
942
+ onClick: O((t) => R(e.type), ["stop"])
933
943
  }, [s(C(P), {
934
944
  name: e.icon,
935
945
  size: "s"
936
- }, null, 8, ["name"]), a("span", null, S(e.label), 1)], 8, ke))), 128))
946
+ }, null, 8, ["name"]), a("span", null, S(e.label), 1)], 8, Ne))), 128))
937
947
  ])) : r("", !0)], 4)], 64)) : r("", !0)], 2);
938
948
  };
939
949
  }
940
- }), [["__scopeId", "data-v-be04973b"]]), je = { class: "pb-outline-wrap" }, Me = /* @__PURE__ */ G(/* @__PURE__ */ c({
950
+ }), [["__scopeId", "data-v-be04973b"]]), Fe = { class: "pb-outline-wrap" }, Ie = /* @__PURE__ */ K(/* @__PURE__ */ c({
941
951
  name: "BuilderOutline",
942
952
  __name: "BuilderOutline",
943
953
  setup(e) {
944
954
  let t = l(Q);
945
- return (e, n) => (h(), i("div", je, [s(Ae, {
955
+ return (e, n) => (h(), i("div", Fe, [s(Pe, {
946
956
  node: C(t).schema.value,
947
957
  path: [],
948
958
  depth: 0
949
959
  }, null, 8, ["node"])]));
950
960
  }
951
- }), [["__scopeId", "data-v-fc62f26e"]]), Ne = Symbol("PageBuilderDnd"), Pe = 80;
952
- function Fe(e) {
961
+ }), [["__scopeId", "data-v-fc62f26e"]]), Le = Symbol("PageBuilderDnd"), Re = 80;
962
+ function ze(e) {
953
963
  let t = _(!1), n = _(null), r = _(null), i = null;
954
964
  function a() {
955
965
  i !== null && (clearTimeout(i), i = null);
956
966
  }
957
967
  function o(e) {
958
968
  let t = n.value;
959
- return t ? t.kind === "new" ? !0 : !ie(t.path, e) : !1;
969
+ return t ? t.kind === "new" ? !0 : !Z(t.path, e) : !1;
960
970
  }
961
971
  function s(e) {
962
972
  a(), t.value = !0, n.value = e;
@@ -970,7 +980,7 @@ function Fe(e) {
970
980
  function u(e) {
971
981
  r.value === e && (a(), i = setTimeout(() => {
972
982
  r.value === e && (r.value = null), i = null;
973
- }, Pe));
983
+ }, Re));
974
984
  }
975
985
  function d(t, r) {
976
986
  let i = n.value;
@@ -995,41 +1005,37 @@ function Fe(e) {
995
1005
  onZoneDrop: d,
996
1006
  canDrop: o
997
1007
  };
998
- return g(Ne, f), f;
1008
+ return g(Le, f), f;
999
1009
  }
1000
- function Ie() {
1001
- let e = l(Ne);
1010
+ function Be() {
1011
+ let e = l(Le);
1002
1012
  if (!e) throw Error("useBuilderDnd must be called inside CoarPageBuilder.");
1003
1013
  return e;
1004
1014
  }
1005
1015
  //#endregion
1006
1016
  //#region src/builder/BuilderCanvasNode.vue?vue&type=script&setup=true&lang.ts
1007
- var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze = {
1017
+ var Ve = ["title", "draggable"], He = { class: "canvas-node__tab-label" }, Ue = {
1008
1018
  key: 0,
1009
1019
  class: "canvas-node__section-title"
1010
- }, Be = ["data-dropzone"], Ve = ["data-dropzone"], He = [
1020
+ }, We = ["data-dropzone"], Ge = ["data-dropzone"], Ke = [
1011
1021
  "data-dropzone",
1012
1022
  "onDragenter",
1013
1023
  "onDragover",
1014
1024
  "onDragleave",
1015
1025
  "onDrop"
1016
- ], Ue = {
1026
+ ], qe = {
1017
1027
  key: 2,
1018
1028
  class: "canvas-node__preview"
1019
- }, We = {
1029
+ }, Je = {
1020
1030
  key: 1,
1021
1031
  class: "canvas-node__spacer-preview"
1022
- }, Ge = {
1032
+ }, Ye = {
1023
1033
  key: 3,
1024
1034
  class: "canvas-node__paragraph"
1025
- }, Ke = {
1026
- key: 8,
1027
- class: "canvas-node__link",
1028
- type: "button"
1029
- }, qe = ["src", "alt"], Je = {
1035
+ }, Xe = ["src", "alt"], Ze = {
1030
1036
  key: 1,
1031
1037
  class: "canvas-node__image-placeholder"
1032
- }, Ye = /* @__PURE__ */ G(/* @__PURE__ */ c({
1038
+ }, Qe = Symbol("canvas-parent-direction"), $e = /* @__PURE__ */ K(/* @__PURE__ */ c({
1033
1039
  name: "BuilderCanvasNode",
1034
1040
  __name: "BuilderCanvasNode",
1035
1041
  props: {
@@ -1037,17 +1043,17 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1037
1043
  path: {}
1038
1044
  },
1039
1045
  setup(c) {
1040
- let u = c, p = l(Q), m = l($), g = Ie();
1041
- function _(e) {
1046
+ let u = c, p = l(Q), m = l($), _ = Be();
1047
+ function x(e) {
1042
1048
  return m?.value?.assetResolver?.(e) ?? "";
1043
1049
  }
1044
- let x = t(() => u.path.length === 0), w = t(() => u.path.join("/")), T = t(() => {
1045
- let e = g.payload.value;
1050
+ let w = t(() => u.path.length === 0), T = t(() => u.path.join("/")), E = t(() => {
1051
+ let e = _.payload.value;
1046
1052
  return !e || e.kind !== "move" ? !1 : e.path.length === u.path.length && e.path.every((e, t) => e === u.path[t]);
1047
- }), E = t(() => {
1053
+ }), A = t(() => {
1048
1054
  let e = p.selectedPath.value;
1049
1055
  return e !== null && e.length === u.path.length && e.every((e, t) => e === u.path[t]);
1050
- }), A = {
1056
+ }), L = {
1051
1057
  page: "file",
1052
1058
  stack: "layers",
1053
1059
  card: "square-dashed",
@@ -1062,122 +1068,103 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1062
1068
  button: "zap",
1063
1069
  link: "link",
1064
1070
  image: "image"
1065
- }, L = t(() => {
1071
+ }, R = t(() => {
1066
1072
  let e = u.node;
1067
1073
  return e.text ? `${e.type} · ${String(e.text).slice(0, 24)}` : e.label ? `${e.type} · ${String(e.label).slice(0, 24)}` : e.title ? `${e.type} · ${String(e.title).slice(0, 24)}` : e.name ? `${e.type} · ${String(e.name)}` : e.type;
1068
- }), ee = t(() => V(u.node) ? "container" : "element"), B = t(() => {
1074
+ }), V = t(() => H(u.node) ? "container" : "element"), U = t(() => {
1069
1075
  let e = u.node;
1070
1076
  return e.type === "stack" ? e.direction ?? "column" : "column";
1071
- }), H = t(() => {
1077
+ }), ee = l(Qe, void 0);
1078
+ g(Qe, U);
1079
+ let ne = t(() => {
1072
1080
  let e = u.node;
1073
- if (!V(e)) return {};
1074
- let t = e.style?.gap, n = e.style?.align, r = e.style?.padding;
1075
- switch (e.type) {
1076
- case "page":
1077
- case "section": return {
1078
- display: "flex",
1079
- flexDirection: "column",
1080
- ...t && { gap: t },
1081
- ...n && { alignItems: n },
1082
- ...r && { padding: r }
1083
- };
1084
- case "stack": return {
1085
- display: "flex",
1086
- flexDirection: e.direction ?? "column",
1087
- ...t && { gap: t },
1088
- ...n && { alignItems: n },
1089
- ...r && { padding: r }
1090
- };
1091
- case "card": return {
1092
- display: "flex",
1093
- flexDirection: "column",
1094
- ...t && { gap: t },
1095
- ...n && { alignItems: n }
1096
- };
1097
- default: return {};
1098
- }
1099
- }), U = t(() => {
1081
+ if (!H(e)) return {};
1082
+ let t = {
1083
+ display: "flex",
1084
+ flexDirection: e.type === "stack" ? e.direction ?? "column" : "column",
1085
+ ...te(e.style)
1086
+ };
1087
+ return e.type !== "card" && e.style?.padding && (t.padding = e.style.padding), t;
1088
+ }), re = t(() => W(u.node.style, ee?.value ?? "column")), G = t(() => {
1100
1089
  let e = u.node.style;
1101
- if (!e) return {};
1102
- let t = {};
1103
- return e.width && (t.width = e.width), t;
1090
+ return e && (e.size === "fill" || e.size === "fixed" || !e.size && e.width) ? { width: "100%" } : {};
1104
1091
  });
1105
- function W(e) {
1092
+ function ie(e) {
1106
1093
  return (e ?? []).map((e) => ({
1107
1094
  value: e.value,
1108
1095
  label: e.label
1109
1096
  }));
1110
1097
  }
1111
- function te(e) {
1098
+ function K(e) {
1112
1099
  e.stopPropagation(), p.select(u.path);
1113
1100
  }
1114
- function G(e) {
1115
- if (x.value) {
1101
+ function ae(e) {
1102
+ if (w.value) {
1116
1103
  e.preventDefault();
1117
1104
  return;
1118
1105
  }
1119
1106
  if (!e.dataTransfer) return;
1120
- g.startDrag({
1107
+ _.startDrag({
1121
1108
  kind: "move",
1122
1109
  path: [...u.path]
1123
1110
  }), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", "move");
1124
1111
  let t = e.currentTarget?.closest(".canvas-node");
1125
- t && z(e, t, {
1112
+ t && B(e, t, {
1126
1113
  offsetX: 20,
1127
1114
  offsetY: 16
1128
1115
  }), e.stopPropagation();
1129
1116
  }
1130
- function ne() {
1131
- g.endDrag();
1132
- }
1133
- function K(e) {
1134
- return `${w.value}:${e}`;
1117
+ function oe() {
1118
+ _.endDrag();
1135
1119
  }
1136
1120
  function q(e) {
1137
- return g.activeZoneKey.value === K(e);
1121
+ return `${T.value}:${e}`;
1138
1122
  }
1139
1123
  function J(e) {
1140
- let t = g.isDragging.value, n = g.canDrop(u.path);
1124
+ return _.activeZoneKey.value === q(e);
1125
+ }
1126
+ function Y(e) {
1127
+ let t = _.isDragging.value, n = _.canDrop(u.path);
1141
1128
  return {
1142
1129
  "canvas-dropzone--drag-active": t && n,
1143
1130
  "canvas-dropzone--disabled": t && !n,
1144
- "canvas-dropzone--over": q(e)
1131
+ "canvas-dropzone--over": J(e)
1145
1132
  };
1146
1133
  }
1147
- function Y(e, t) {
1148
- g.onZoneEnter(K(t), u.path) && e.preventDefault();
1134
+ function se(e, t) {
1135
+ _.onZoneEnter(q(t), u.path) && e.preventDefault();
1149
1136
  }
1150
1137
  function X(e, t) {
1151
- g.canDrop(u.path) && (e.preventDefault(), q(t) || g.onZoneEnter(K(t), u.path));
1138
+ _.canDrop(u.path) && (e.preventDefault(), J(t) || _.onZoneEnter(q(t), u.path));
1152
1139
  }
1153
- function Z(e) {
1154
- g.onZoneLeave(K(e));
1140
+ function ce(e) {
1141
+ _.onZoneLeave(q(e));
1155
1142
  }
1156
- function re(e, t) {
1157
- e.preventDefault(), e.stopPropagation(), g.onZoneDrop([...u.path], t), g.endDrag();
1143
+ function Z(e, t) {
1144
+ e.preventDefault(), e.stopPropagation(), _.onZoneDrop([...u.path], t), _.endDrag();
1158
1145
  }
1159
1146
  return (t, l) => {
1160
1147
  let u = y("BuilderCanvasNode", !0);
1161
1148
  return h(), i("div", {
1162
- class: d(["canvas-node", [`canvas-node--${ee.value}`, {
1163
- "canvas-node--selected": E.value,
1164
- "canvas-node--root": x.value,
1165
- "canvas-node--dragging": T.value
1149
+ class: d(["canvas-node", [`canvas-node--${V.value}`, {
1150
+ "canvas-node--selected": A.value,
1151
+ "canvas-node--root": w.value,
1152
+ "canvas-node--dragging": E.value
1166
1153
  }]]),
1167
- style: f(U.value),
1168
- onClick: te
1154
+ style: f(re.value),
1155
+ onClick: K
1169
1156
  }, [
1170
1157
  a("span", {
1171
- class: d(["canvas-node__tab", { "canvas-node__tab--grabbable": !x.value }]),
1172
- title: L.value,
1173
- draggable: !x.value,
1174
- onDragstart: G,
1175
- onDragend: ne
1158
+ class: d(["canvas-node__tab", { "canvas-node__tab--grabbable": !w.value }]),
1159
+ title: R.value,
1160
+ draggable: !w.value,
1161
+ onDragstart: ae,
1162
+ onDragend: oe
1176
1163
  }, [s(C(P), {
1177
- name: A[c.node.type],
1164
+ name: L[c.node.type],
1178
1165
  size: "xs"
1179
- }, null, 8, ["name"]), a("span", Re, S(L.value), 1)], 42, Le),
1180
- x.value ? r("", !0) : (h(), i("button", {
1166
+ }, null, 8, ["name"]), a("span", He, S(R.value), 1)], 42, Ve),
1167
+ w.value ? r("", !0) : (h(), i("button", {
1181
1168
  key: 0,
1182
1169
  type: "button",
1183
1170
  class: "canvas-node__delete",
@@ -1187,44 +1174,44 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1187
1174
  name: "x",
1188
1175
  size: "xs"
1189
1176
  })])),
1190
- C(V)(c.node) ? (h(), i("div", {
1177
+ C(H)(c.node) ? (h(), i("div", {
1191
1178
  key: 1,
1192
- class: d(["canvas-node__body", [`canvas-node__body--${c.node.type}`, `canvas-node__body--dir-${B.value}`]]),
1193
- style: f(H.value)
1194
- }, [c.node.type === "section" && c.node.title ? (h(), i("div", ze, S(c.node.title), 1)) : r("", !0), c.node.children.length === 0 ? (h(), i("div", {
1179
+ class: d(["canvas-node__body", [`canvas-node__body--${c.node.type}`, `canvas-node__body--dir-${U.value}`]]),
1180
+ style: f(ne.value)
1181
+ }, [c.node.type === "section" && c.node.title ? (h(), i("div", Ue, S(c.node.title), 1)) : r("", !0), c.node.children.length === 0 ? (h(), i("div", {
1195
1182
  key: 1,
1196
- class: d(["canvas-dropzone canvas-dropzone--empty", J(0)]),
1197
- "data-dropzone": K(0),
1198
- onDragenter: l[1] ||= (e) => Y(e, 0),
1183
+ class: d(["canvas-dropzone canvas-dropzone--empty", Y(0)]),
1184
+ "data-dropzone": q(0),
1185
+ onDragenter: l[1] ||= (e) => se(e, 0),
1199
1186
  onDragover: l[2] ||= (e) => X(e, 0),
1200
- onDragleave: l[3] ||= (e) => Z(0),
1201
- onDrop: l[4] ||= (e) => re(e, 0)
1202
- }, " Empty " + S(c.node.type) + " — drop something here ", 43, Be)) : (h(), i(e, { key: 2 }, [a("div", {
1203
- class: d(["canvas-dropzone", [`canvas-dropzone--${B.value}`, J(0)]]),
1204
- "data-dropzone": K(0),
1187
+ onDragleave: l[3] ||= (e) => ce(0),
1188
+ onDrop: l[4] ||= (e) => Z(e, 0)
1189
+ }, " Empty " + S(c.node.type) + " — drop something here ", 43, We)) : (h(), i(e, { key: 2 }, [a("div", {
1190
+ class: d(["canvas-dropzone", [`canvas-dropzone--${U.value}`, Y(0)]]),
1191
+ "data-dropzone": q(0),
1205
1192
  "aria-hidden": "true",
1206
- onDragenter: l[5] ||= (e) => Y(e, 0),
1193
+ onDragenter: l[5] ||= (e) => se(e, 0),
1207
1194
  onDragover: l[6] ||= (e) => X(e, 0),
1208
- onDragleave: l[7] ||= (e) => Z(0),
1209
- onDrop: l[8] ||= (e) => re(e, 0)
1210
- }, null, 42, Ve), (h(!0), i(e, null, v(c.node.children, (t, n) => (h(), i(e, { key: t.id }, [s(u, {
1195
+ onDragleave: l[7] ||= (e) => ce(0),
1196
+ onDrop: l[8] ||= (e) => Z(e, 0)
1197
+ }, null, 42, Ge), (h(!0), i(e, null, v(c.node.children, (t, n) => (h(), i(e, { key: t.id }, [s(u, {
1211
1198
  node: t,
1212
1199
  path: [...c.path, n]
1213
1200
  }, null, 8, ["node", "path"]), a("div", {
1214
- class: d(["canvas-dropzone", [`canvas-dropzone--${B.value}`, J(n + 1)]]),
1215
- "data-dropzone": K(n + 1),
1201
+ class: d(["canvas-dropzone", [`canvas-dropzone--${U.value}`, Y(n + 1)]]),
1202
+ "data-dropzone": q(n + 1),
1216
1203
  "aria-hidden": "true",
1217
- onDragenter: (e) => Y(e, n + 1),
1204
+ onDragenter: (e) => se(e, n + 1),
1218
1205
  onDragover: (e) => X(e, n + 1),
1219
- onDragleave: (e) => Z(n + 1),
1220
- onDrop: (e) => re(e, n + 1)
1221
- }, null, 42, He)], 64))), 128))], 64))], 6)) : (h(), i("div", Ue, [c.node.type === "divider" ? (h(), n(C(M), { key: 0 })) : c.node.type === "spacer" ? (h(), i("div", We)) : c.node.type === "heading" ? (h(), n(b(`h${c.node.level ?? 2}`), {
1206
+ onDragleave: (e) => ce(n + 1),
1207
+ onDrop: (e) => Z(e, n + 1)
1208
+ }, null, 42, Ke)], 64))), 128))], 64))], 6)) : (h(), i("div", qe, [c.node.type === "divider" ? (h(), n(C(M), { key: 0 })) : c.node.type === "spacer" ? (h(), i("div", Je)) : c.node.type === "heading" ? (h(), n(b(`h${c.node.level ?? 2}`), {
1222
1209
  key: 2,
1223
1210
  class: "canvas-node__heading"
1224
1211
  }, {
1225
1212
  default: D(() => [o(S(c.node.text || "Heading"), 1)]),
1226
1213
  _: 1
1227
- })) : c.node.type === "paragraph" ? (h(), i("p", Ge, S(c.node.text || "Paragraph text."), 1)) : c.node.type === "text-input" ? (h(), n(C(N), {
1214
+ })) : c.node.type === "paragraph" ? (h(), i("p", Ye, S(c.node.text || "Paragraph text."), 1)) : c.node.type === "text-input" ? (h(), n(C(N), {
1228
1215
  key: 4,
1229
1216
  label: c.node.label,
1230
1217
  required: c.node.validation?.required
@@ -1234,7 +1221,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1234
1221
  "model-value": "",
1235
1222
  placeholder: c.node.placeholder,
1236
1223
  disabled: ""
1237
- }, null, 8, ["placeholder"])) : (h(), n(C(R), {
1224
+ }, null, 8, ["placeholder"])) : (h(), n(C(z), {
1238
1225
  key: 1,
1239
1226
  "model-value": "",
1240
1227
  placeholder: c.node.placeholder,
@@ -1254,7 +1241,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1254
1241
  }, {
1255
1242
  default: D(() => [s(C(I), {
1256
1243
  "model-value": null,
1257
- options: W(c.node.options),
1244
+ options: ie(c.node.options),
1258
1245
  placeholder: c.node.placeholder,
1259
1246
  disabled: ""
1260
1247
  }, null, 8, ["options", "placeholder"])]),
@@ -1263,7 +1250,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1263
1250
  key: 7,
1264
1251
  variant: c.node.variant ?? "primary",
1265
1252
  size: c.node.size,
1266
- style: f(c.node.style?.width ? { width: c.node.style.width } : {}),
1253
+ style: f(G.value),
1267
1254
  disabled: ""
1268
1255
  }, {
1269
1256
  default: D(() => [o(S(c.node.label || "Button"), 1)]),
@@ -1272,23 +1259,29 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1272
1259
  "variant",
1273
1260
  "size",
1274
1261
  "style"
1275
- ])) : c.node.type === "link" ? (h(), i("button", Ke, S(c.node.label || "Link"), 1)) : c.node.type === "image" ? (h(), i(e, { key: 9 }, [c.node.assetId && _(c.node.assetId) ? (h(), i("img", {
1262
+ ])) : c.node.type === "link" ? (h(), i("button", {
1263
+ key: 8,
1264
+ class: "canvas-node__link",
1265
+ type: "button",
1266
+ style: f(G.value)
1267
+ }, S(c.node.label || "Link"), 5)) : c.node.type === "image" ? (h(), i(e, { key: 9 }, [c.node.assetId && x(c.node.assetId) ? (h(), i("img", {
1276
1268
  key: 0,
1277
- src: _(c.node.assetId),
1269
+ src: x(c.node.assetId),
1278
1270
  alt: c.node.alt ?? "",
1279
- class: "canvas-node__image-preview"
1280
- }, null, 8, qe)) : (h(), i("div", Je, [s(C(P), {
1271
+ class: "canvas-node__image-preview",
1272
+ style: f(G.value)
1273
+ }, null, 12, Xe)) : (h(), i("div", Ze, [s(C(P), {
1281
1274
  name: "image",
1282
1275
  size: "m"
1283
1276
  }), a("span", null, S(c.node.assetId || "No image"), 1)]))], 64)) : r("", !0)]))
1284
1277
  ], 6);
1285
1278
  };
1286
1279
  }
1287
- }), [["__scopeId", "data-v-3ae4c5ac"]]), Xe = { class: "pb-canvas-shell" }, Ze = { class: "pb-palette" }, Qe = { class: "pb-palette__group" }, $e = ["title", "onDragstart"], et = { class: "pb-palette__group" }, tt = ["title", "onDragstart"], nt = 120, rt = 60, it = /* @__PURE__ */ G(/* @__PURE__ */ c({
1280
+ }), [["__scopeId", "data-v-5a574130"]]), et = { class: "pb-canvas-shell" }, tt = { class: "pb-palette" }, nt = { class: "pb-palette__group" }, rt = ["title", "onDragstart"], it = { class: "pb-palette__group" }, at = ["title", "onDragstart"], ot = 120, st = 60, ct = /* @__PURE__ */ K(/* @__PURE__ */ c({
1288
1281
  name: "BuilderCanvas",
1289
1282
  __name: "BuilderCanvas",
1290
1283
  setup(n) {
1291
- let r = l(Q), o = l($), c = Fe(r), u = t(() => f.filter((e) => H(e.type, o?.value))), f = [
1284
+ let r = l(Q), o = l($), c = ze(r), u = t(() => f.filter((e) => U(e.type, o?.value))), f = [
1292
1285
  {
1293
1286
  type: "stack",
1294
1287
  label: "Stack",
@@ -1379,7 +1372,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1379
1372
  type: t
1380
1373
  }), e.dataTransfer.effectAllowed = "copy", e.dataTransfer.setData("text/plain", t);
1381
1374
  let n = e.currentTarget;
1382
- n && z(e, n);
1375
+ n && B(e, n);
1383
1376
  }
1384
1377
  function y() {
1385
1378
  c.endDrag();
@@ -1392,10 +1385,10 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1392
1385
  let t = e.clientX, n = e.clientY, r = document.querySelectorAll(".canvas-dropzone:not(.canvas-dropzone--empty)");
1393
1386
  for (let e of r) {
1394
1387
  let r = e.getBoundingClientRect(), i = Math.max(r.left - t, 0, t - r.right), a = Math.max(r.top - n, 0, n - r.bottom), o = Math.hypot(i, a);
1395
- if (o >= nt) e.style.opacity = "0", e.style.pointerEvents = "none";
1388
+ if (o >= ot) e.style.opacity = "0", e.style.pointerEvents = "none";
1396
1389
  else {
1397
- let t = 1 - o / nt;
1398
- e.style.opacity = t.toFixed(3), e.style.pointerEvents = o <= rt ? "auto" : "none";
1390
+ let t = 1 - o / ot;
1391
+ e.style.opacity = t.toFixed(3), e.style.pointerEvents = o <= st ? "auto" : "none";
1399
1392
  }
1400
1393
  }
1401
1394
  }
@@ -1424,8 +1417,8 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1424
1417
  let a = r.selectedPath.value;
1425
1418
  !a || a.length === 0 || (e.preventDefault(), r.remove(a));
1426
1419
  }
1427
- return m(() => window.addEventListener("keydown", T)), p(() => window.removeEventListener("keydown", T)), (t, n) => (h(), i("div", Xe, [a("div", Ze, [
1428
- a("div", Qe, [n[0] ||= a("span", { class: "pb-palette__label" }, "Containers", -1), (h(!0), i(e, null, v(u.value.filter((e) => e.group === "container"), (e) => (h(), i("button", {
1420
+ return m(() => window.addEventListener("keydown", T)), p(() => window.removeEventListener("keydown", T)), (t, n) => (h(), i("div", et, [a("div", tt, [
1421
+ a("div", nt, [n[0] ||= a("span", { class: "pb-palette__label" }, "Containers", -1), (h(!0), i(e, null, v(u.value.filter((e) => e.group === "container"), (e) => (h(), i("button", {
1429
1422
  key: e.type,
1430
1423
  type: "button",
1431
1424
  class: d(["pb-palette__card pb-palette__card--container", { "pb-palette__card--dragging": g(e.type) }]),
@@ -1436,9 +1429,9 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1436
1429
  }, [s(C(P), {
1437
1430
  name: e.icon,
1438
1431
  size: "s"
1439
- }, null, 8, ["name"]), a("span", null, S(e.label), 1)], 42, $e))), 128))]),
1432
+ }, null, 8, ["name"]), a("span", null, S(e.label), 1)], 42, rt))), 128))]),
1440
1433
  n[2] ||= a("div", { class: "pb-palette__divider" }, null, -1),
1441
- a("div", et, [n[1] ||= a("span", { class: "pb-palette__label" }, "Elements", -1), (h(!0), i(e, null, v(u.value.filter((e) => e.group === "element"), (e) => (h(), i("button", {
1434
+ a("div", it, [n[1] ||= a("span", { class: "pb-palette__label" }, "Elements", -1), (h(!0), i(e, null, v(u.value.filter((e) => e.group === "element"), (e) => (h(), i("button", {
1442
1435
  key: e.type,
1443
1436
  type: "button",
1444
1437
  class: d(["pb-palette__card pb-palette__card--element", { "pb-palette__card--dragging": g(e.type) }]),
@@ -1449,21 +1442,21 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1449
1442
  }, [s(C(P), {
1450
1443
  name: e.icon,
1451
1444
  size: "s"
1452
- }, null, 8, ["name"]), a("span", null, S(e.label), 1)], 42, tt))), 128))])
1445
+ }, null, 8, ["name"]), a("span", null, S(e.label), 1)], 42, at))), 128))])
1453
1446
  ]), a("div", {
1454
1447
  class: d(["pb-canvas", { "pb-canvas--dragging": C(c).isDragging.value }]),
1455
1448
  onClick: O(b, ["self"]),
1456
1449
  onDragover: x
1457
- }, [s(Ye, {
1450
+ }, [s($e, {
1458
1451
  node: C(r).schema.value,
1459
1452
  path: []
1460
1453
  }, null, 8, ["node"])], 34)]));
1461
1454
  }
1462
- }), [["__scopeId", "data-v-4d674269"]]), at = { class: "pb-prop-group" }, ot = {
1455
+ }), [["__scopeId", "data-v-4d674269"]]), lt = { class: "pb-prop-group" }, ut = {
1463
1456
  class: "pb-prop-seg",
1464
1457
  role: "radiogroup",
1465
1458
  "aria-label": "Stack direction"
1466
- }, st = ["aria-checked"], ct = ["aria-checked"], lt = /* @__PURE__ */ G(/* @__PURE__ */ c({
1459
+ }, dt = ["aria-checked"], ft = ["aria-checked"], pt = /* @__PURE__ */ K(/* @__PURE__ */ c({
1467
1460
  __name: "StackProps",
1468
1461
  props: {
1469
1462
  node: {},
@@ -1471,26 +1464,26 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1471
1464
  },
1472
1465
  setup(t) {
1473
1466
  let o = t;
1474
- return (t, s) => (h(), i(e, null, [a("div", at, [s[3] ||= a("span", { class: "pb-prop-label" }, "Direction", -1), a("div", ot, [a("button", {
1467
+ return (t, s) => (h(), i(e, null, [a("div", lt, [s[3] ||= a("span", { class: "pb-prop-label" }, "Direction", -1), a("div", ut, [a("button", {
1475
1468
  type: "button",
1476
1469
  class: d(["pb-prop-seg__btn", { "pb-prop-seg__btn--active": (o.node.direction ?? "column") === "column" }]),
1477
1470
  role: "radio",
1478
1471
  "aria-checked": (o.node.direction ?? "column") === "column",
1479
1472
  onClick: s[0] ||= (e) => o.patch({ direction: "column" })
1480
- }, " ↓ Column ", 10, st), a("button", {
1473
+ }, " ↓ Column ", 10, dt), a("button", {
1481
1474
  type: "button",
1482
1475
  class: d(["pb-prop-seg__btn", { "pb-prop-seg__btn--active": o.node.direction === "row" }]),
1483
1476
  role: "radio",
1484
1477
  "aria-checked": o.node.direction === "row",
1485
1478
  onClick: s[1] ||= (e) => o.patch({ direction: "row" })
1486
- }, " → Row ", 10, ct)])]), o.node.direction === "row" ? (h(), n(C(j), {
1479
+ }, " → Row ", 10, ft)])]), o.node.direction === "row" ? (h(), n(C(j), {
1487
1480
  key: 0,
1488
1481
  "model-value": !!o.node.wrap,
1489
1482
  label: "Wrap children",
1490
1483
  "onUpdate:modelValue": s[2] ||= (e) => o.patch({ wrap: e })
1491
1484
  }, null, 8, ["model-value"])) : r("", !0)], 64));
1492
1485
  }
1493
- }), [["__scopeId", "data-v-e4171f7c"]]), ut = /* @__PURE__ */ c({
1486
+ }), [["__scopeId", "data-v-e4171f7c"]]), mt = /* @__PURE__ */ c({
1494
1487
  __name: "CardProps",
1495
1488
  props: {
1496
1489
  node: {},
@@ -1499,14 +1492,14 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1499
1492
  setup(e) {
1500
1493
  let t = e;
1501
1494
  return (e, r) => (h(), n(C(N), { label: "Title" }, {
1502
- default: D(() => [s(C(R), {
1495
+ default: D(() => [s(C(z), {
1503
1496
  "model-value": t.node.title ?? "",
1504
1497
  "onUpdate:modelValue": r[0] ||= (e) => t.patch({ title: e })
1505
1498
  }, null, 8, ["model-value"])]),
1506
1499
  _: 1
1507
1500
  }));
1508
1501
  }
1509
- }), dt = /* @__PURE__ */ c({
1502
+ }), ht = /* @__PURE__ */ c({
1510
1503
  __name: "SectionProps",
1511
1504
  props: {
1512
1505
  node: {},
@@ -1515,14 +1508,14 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1515
1508
  setup(e) {
1516
1509
  let t = e;
1517
1510
  return (e, r) => (h(), n(C(N), { label: "Title" }, {
1518
- default: D(() => [s(C(R), {
1511
+ default: D(() => [s(C(z), {
1519
1512
  "model-value": t.node.title ?? "",
1520
1513
  "onUpdate:modelValue": r[0] ||= (e) => t.patch({ title: e })
1521
1514
  }, null, 8, ["model-value"])]),
1522
1515
  _: 1
1523
1516
  }));
1524
1517
  }
1525
- }), ft = /* @__PURE__ */ c({
1518
+ }), gt = /* @__PURE__ */ c({
1526
1519
  __name: "HeadingProps",
1527
1520
  props: {
1528
1521
  node: {},
@@ -1556,7 +1549,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1556
1549
  }
1557
1550
  ];
1558
1551
  return (t, a) => (h(), i(e, null, [s(C(N), { label: "Text" }, {
1559
- default: D(() => [s(C(R), {
1552
+ default: D(() => [s(C(z), {
1560
1553
  "model-value": n.node.text ?? "",
1561
1554
  "onUpdate:modelValue": a[0] ||= (e) => n.patch({ text: e })
1562
1555
  }, null, 8, ["model-value"])]),
@@ -1570,7 +1563,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1570
1563
  _: 1
1571
1564
  })], 64));
1572
1565
  }
1573
- }), pt = ["value"], mt = /* @__PURE__ */ G(/* @__PURE__ */ c({
1566
+ }), _t = ["value"], vt = /* @__PURE__ */ K(/* @__PURE__ */ c({
1574
1567
  __name: "ParagraphProps",
1575
1568
  props: {
1576
1569
  node: {},
@@ -1584,11 +1577,11 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1584
1577
  value: t.node.text ?? "",
1585
1578
  rows: "3",
1586
1579
  onInput: r[0] ||= (e) => t.patch({ text: e.target.value })
1587
- }, null, 40, pt)]),
1580
+ }, null, 40, _t)]),
1588
1581
  _: 1
1589
1582
  }));
1590
1583
  }
1591
- }), [["__scopeId", "data-v-13b6b029"]]), ht = /* @__PURE__ */ c({
1584
+ }), [["__scopeId", "data-v-13b6b029"]]), yt = /* @__PURE__ */ c({
1592
1585
  __name: "SpacerProps",
1593
1586
  props: {
1594
1587
  node: {},
@@ -1600,7 +1593,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1600
1593
  label: "Size (CSS)",
1601
1594
  hint: "Leave empty to fill available space"
1602
1595
  }, {
1603
- default: D(() => [s(C(R), {
1596
+ default: D(() => [s(C(z), {
1604
1597
  "model-value": t.node.size ?? "",
1605
1598
  placeholder: "e.g. 24px",
1606
1599
  "onUpdate:modelValue": r[0] ||= (e) => t.patch({ size: e })
@@ -1608,7 +1601,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1608
1601
  _: 1
1609
1602
  }));
1610
1603
  }
1611
- }), gt = /* @__PURE__ */ c({
1604
+ }), bt = /* @__PURE__ */ c({
1612
1605
  __name: "TextInputProps",
1613
1606
  props: {
1614
1607
  node: {},
@@ -1638,21 +1631,21 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1638
1631
  }
1639
1632
  return (t, o) => (h(), i(e, null, [
1640
1633
  s(C(N), { label: "Label" }, {
1641
- default: D(() => [s(C(R), {
1634
+ default: D(() => [s(C(z), {
1642
1635
  "model-value": n.node.label ?? "",
1643
1636
  "onUpdate:modelValue": o[0] ||= (e) => n.patch({ label: e })
1644
1637
  }, null, 8, ["model-value"])]),
1645
1638
  _: 1
1646
1639
  }),
1647
1640
  s(C(N), { label: "Name (field key)" }, {
1648
- default: D(() => [s(C(R), {
1641
+ default: D(() => [s(C(z), {
1649
1642
  "model-value": n.node.name ?? "",
1650
1643
  "onUpdate:modelValue": o[1] ||= (e) => n.patch({ name: e })
1651
1644
  }, null, 8, ["model-value"])]),
1652
1645
  _: 1
1653
1646
  }),
1654
1647
  s(C(N), { label: "Placeholder" }, {
1655
- default: D(() => [s(C(R), {
1648
+ default: D(() => [s(C(z), {
1656
1649
  "model-value": n.node.placeholder ?? "",
1657
1650
  "onUpdate:modelValue": o[2] ||= (e) => n.patch({ placeholder: e })
1658
1651
  }, null, 8, ["model-value"])]),
@@ -1678,7 +1671,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1678
1671
  }, null, 8, ["model-value"])
1679
1672
  ], 64));
1680
1673
  }
1681
- }), _t = /* @__PURE__ */ c({
1674
+ }), xt = /* @__PURE__ */ c({
1682
1675
  __name: "CheckboxProps",
1683
1676
  props: {
1684
1677
  node: {},
@@ -1691,14 +1684,14 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1691
1684
  }
1692
1685
  return (t, a) => (h(), i(e, null, [
1693
1686
  s(C(N), { label: "Label" }, {
1694
- default: D(() => [s(C(R), {
1687
+ default: D(() => [s(C(z), {
1695
1688
  "model-value": n.node.label ?? "",
1696
1689
  "onUpdate:modelValue": a[0] ||= (e) => n.patch({ label: e })
1697
1690
  }, null, 8, ["model-value"])]),
1698
1691
  _: 1
1699
1692
  }),
1700
1693
  s(C(N), { label: "Name (field key)" }, {
1701
- default: D(() => [s(C(R), {
1694
+ default: D(() => [s(C(z), {
1702
1695
  "model-value": n.node.name ?? "",
1703
1696
  "onUpdate:modelValue": a[1] ||= (e) => n.patch({ name: e })
1704
1697
  }, null, 8, ["model-value"])]),
@@ -1716,7 +1709,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1716
1709
  }, null, 8, ["model-value"])
1717
1710
  ], 64));
1718
1711
  }
1719
- }), vt = /* @__PURE__ */ c({
1712
+ }), St = /* @__PURE__ */ c({
1720
1713
  __name: "SelectProps",
1721
1714
  props: {
1722
1715
  node: {},
@@ -1729,21 +1722,21 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1729
1722
  }
1730
1723
  return (t, a) => (h(), i(e, null, [
1731
1724
  s(C(N), { label: "Label" }, {
1732
- default: D(() => [s(C(R), {
1725
+ default: D(() => [s(C(z), {
1733
1726
  "model-value": n.node.label ?? "",
1734
1727
  "onUpdate:modelValue": a[0] ||= (e) => n.patch({ label: e })
1735
1728
  }, null, 8, ["model-value"])]),
1736
1729
  _: 1
1737
1730
  }),
1738
1731
  s(C(N), { label: "Name (field key)" }, {
1739
- default: D(() => [s(C(R), {
1732
+ default: D(() => [s(C(z), {
1740
1733
  "model-value": n.node.name ?? "",
1741
1734
  "onUpdate:modelValue": a[1] ||= (e) => n.patch({ name: e })
1742
1735
  }, null, 8, ["model-value"])]),
1743
1736
  _: 1
1744
1737
  }),
1745
1738
  s(C(N), { label: "Placeholder" }, {
1746
- default: D(() => [s(C(R), {
1739
+ default: D(() => [s(C(z), {
1747
1740
  "model-value": n.node.placeholder ?? "",
1748
1741
  "onUpdate:modelValue": a[2] ||= (e) => n.patch({ placeholder: e })
1749
1742
  }, null, 8, ["model-value"])]),
@@ -1761,7 +1754,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1761
1754
  }, null, 8, ["model-value"])
1762
1755
  ], 64));
1763
1756
  }
1764
- }), yt = /* @__PURE__ */ c({
1757
+ }), Ct = /* @__PURE__ */ c({
1765
1758
  __name: "ButtonProps",
1766
1759
  props: {
1767
1760
  node: {},
@@ -1825,7 +1818,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1825
1818
  ];
1826
1819
  return (t, r) => (h(), i(e, null, [
1827
1820
  s(C(N), { label: "Label" }, {
1828
- default: D(() => [s(C(R), {
1821
+ default: D(() => [s(C(z), {
1829
1822
  "model-value": a.node.label ?? "",
1830
1823
  "onUpdate:modelValue": r[0] ||= (e) => a.patch({ label: e })
1831
1824
  }, null, 8, ["model-value"])]),
@@ -1840,7 +1833,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1840
1833
  "model-value": a.node.action ?? "",
1841
1834
  options: c.value,
1842
1835
  "onUpdate:modelValue": r[1] ||= (e) => a.patch({ action: e || void 0 })
1843
- }, null, 8, ["model-value", "options"])) : (h(), n(C(R), {
1836
+ }, null, 8, ["model-value", "options"])) : (h(), n(C(z), {
1844
1837
  key: 1,
1845
1838
  "model-value": a.node.action ?? "",
1846
1839
  placeholder: "e.g. auth:login",
@@ -1865,7 +1858,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1865
1858
  _: 1
1866
1859
  }),
1867
1860
  s(C(N), { label: "Icon (left)" }, {
1868
- default: D(() => [s(C(R), {
1861
+ default: D(() => [s(C(z), {
1869
1862
  "model-value": a.node.icon ?? "",
1870
1863
  placeholder: "e.g. log-in",
1871
1864
  "onUpdate:modelValue": r[5] ||= (e) => a.patch({ icon: e })
@@ -1879,7 +1872,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1879
1872
  }, null, 8, ["model-value"])
1880
1873
  ], 64));
1881
1874
  }
1882
- }), bt = /* @__PURE__ */ c({
1875
+ }), wt = /* @__PURE__ */ c({
1883
1876
  __name: "LinkProps",
1884
1877
  props: {
1885
1878
  node: {},
@@ -1904,7 +1897,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1904
1897
  }), n;
1905
1898
  });
1906
1899
  return (t, r) => (h(), i(e, null, [s(C(N), { label: "Label" }, {
1907
- default: D(() => [s(C(R), {
1900
+ default: D(() => [s(C(z), {
1908
1901
  "model-value": a.node.label ?? "",
1909
1902
  "onUpdate:modelValue": r[0] ||= (e) => a.patch({ label: e })
1910
1903
  }, null, 8, ["model-value"])]),
@@ -1915,7 +1908,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1915
1908
  "model-value": a.node.action ?? "",
1916
1909
  options: c.value,
1917
1910
  "onUpdate:modelValue": r[1] ||= (e) => a.patch({ action: e || void 0 })
1918
- }, null, 8, ["model-value", "options"])) : (h(), n(C(R), {
1911
+ }, null, 8, ["model-value", "options"])) : (h(), n(C(z), {
1919
1912
  key: 1,
1920
1913
  "model-value": a.node.action ?? "",
1921
1914
  placeholder: "e.g. nav:forgot-password",
@@ -1924,56 +1917,56 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1924
1917
  _: 1
1925
1918
  })], 64));
1926
1919
  }
1927
- }), xt = { class: "pb-image-asset" }, St = { class: "pb-image-asset__thumb" }, Ct = ["src", "alt"], wt = {
1920
+ }), Tt = { class: "pb-image-asset" }, Et = { class: "pb-image-asset__thumb" }, Dt = ["src", "alt"], Ot = {
1928
1921
  key: 1,
1929
1922
  class: "pb-image-asset__empty"
1930
- }, Tt = { class: "pb-image-asset__empty-label" }, Et = { class: "pb-image-asset__controls" }, Dt = {
1923
+ }, kt = { class: "pb-image-asset__empty-label" }, At = { class: "pb-image-asset__controls" }, jt = {
1931
1924
  stack: {
1932
- component: lt,
1925
+ component: pt,
1933
1926
  sectionTitle: "Layout"
1934
1927
  },
1935
1928
  card: {
1936
- component: ut,
1929
+ component: mt,
1937
1930
  sectionTitle: "Card"
1938
1931
  },
1939
1932
  section: {
1940
- component: dt,
1933
+ component: ht,
1941
1934
  sectionTitle: "Section"
1942
1935
  },
1943
1936
  heading: {
1944
- component: ft,
1937
+ component: gt,
1945
1938
  sectionTitle: "Heading"
1946
1939
  },
1947
1940
  paragraph: {
1948
- component: mt,
1941
+ component: vt,
1949
1942
  sectionTitle: "Paragraph"
1950
1943
  },
1951
1944
  spacer: {
1952
- component: ht,
1945
+ component: yt,
1953
1946
  sectionTitle: "Spacer"
1954
1947
  },
1955
1948
  "text-input": {
1956
- component: gt,
1949
+ component: bt,
1957
1950
  sectionTitle: "Text input"
1958
1951
  },
1959
1952
  checkbox: {
1960
- component: _t,
1953
+ component: xt,
1961
1954
  sectionTitle: "Checkbox"
1962
1955
  },
1963
1956
  select: {
1964
- component: vt,
1957
+ component: St,
1965
1958
  sectionTitle: "Select"
1966
1959
  },
1967
1960
  button: {
1968
- component: yt,
1961
+ component: Ct,
1969
1962
  sectionTitle: "Button"
1970
1963
  },
1971
1964
  link: {
1972
- component: bt,
1965
+ component: wt,
1973
1966
  sectionTitle: "Link"
1974
1967
  },
1975
1968
  image: {
1976
- component: /* @__PURE__ */ G(/* @__PURE__ */ c({
1969
+ component: /* @__PURE__ */ K(/* @__PURE__ */ c({
1977
1970
  __name: "ImageProps",
1978
1971
  props: {
1979
1972
  node: {},
@@ -1997,14 +1990,14 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
1997
1990
  key: 0,
1998
1991
  label: "Asset"
1999
1992
  }, {
2000
- default: D(() => [a("div", xt, [a("div", St, [p.value ? (h(), i("img", {
1993
+ default: D(() => [a("div", Tt, [a("div", Et, [p.value ? (h(), i("img", {
2001
1994
  key: 0,
2002
1995
  src: p.value,
2003
1996
  alt: u.node.alt ?? ""
2004
- }, null, 8, Ct)) : (h(), i("span", wt, [s(C(P), {
1997
+ }, null, 8, Dt)) : (h(), i("span", Ot, [s(C(P), {
2005
1998
  name: "image",
2006
1999
  size: "m"
2007
- }), a("span", Tt, S(u.node.assetId ? "No preview" : "No image"), 1)]))]), a("div", Et, [s(C(k), {
2000
+ }), a("span", kt, S(u.node.assetId ? "No preview" : "No image"), 1)]))]), a("div", At, [s(C(k), {
2008
2001
  size: "s",
2009
2002
  variant: "secondary",
2010
2003
  onClick: m
@@ -2026,13 +2019,13 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2026
2019
  label: "Asset ID",
2027
2020
  hint: "Resolved via assetResolver at render time"
2028
2021
  }, {
2029
- default: D(() => [s(C(R), {
2022
+ default: D(() => [s(C(z), {
2030
2023
  "model-value": u.node.assetId ?? "",
2031
2024
  "onUpdate:modelValue": c[0] ||= (e) => u.patch({ assetId: e })
2032
2025
  }, null, 8, ["model-value"])]),
2033
2026
  _: 1
2034
2027
  })), s(C(N), { label: "Alt text" }, {
2035
- default: D(() => [s(C(R), {
2028
+ default: D(() => [s(C(z), {
2036
2029
  "model-value": u.node.alt ?? "",
2037
2030
  "onUpdate:modelValue": c[1] ||= (e) => u.patch({ alt: e })
2038
2031
  }, null, 8, ["model-value"])]),
@@ -2042,14 +2035,43 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2042
2035
  }), [["__scopeId", "data-v-49a42b45"]]),
2043
2036
  sectionTitle: "Image"
2044
2037
  }
2045
- }, Ot = /* @__PURE__ */ c({
2038
+ }, Mt = /* @__PURE__ */ c({
2046
2039
  __name: "StyleProps",
2047
2040
  props: {
2048
2041
  node: {},
2049
2042
  patchStyle: { type: Function }
2050
2043
  },
2051
2044
  setup(a) {
2052
- let o = a, c = t(() => V(o.node)), l = [
2045
+ let o = a, c = t(() => H(o.node)), l = t(() => o.node.style ?? {}), u = t(() => l.value.size ?? (l.value.width ? "fixed" : "")), d = t(() => u.value === "fixed"), f = [
2046
+ {
2047
+ value: "",
2048
+ label: "— inherit"
2049
+ },
2050
+ {
2051
+ value: "start",
2052
+ label: "start"
2053
+ },
2054
+ {
2055
+ value: "center",
2056
+ label: "center"
2057
+ },
2058
+ {
2059
+ value: "end",
2060
+ label: "end"
2061
+ },
2062
+ {
2063
+ value: "space-between",
2064
+ label: "space-between"
2065
+ },
2066
+ {
2067
+ value: "space-around",
2068
+ label: "space-around"
2069
+ },
2070
+ {
2071
+ value: "space-evenly",
2072
+ label: "space-evenly"
2073
+ }
2074
+ ], p = [
2053
2075
  {
2054
2076
  value: "",
2055
2077
  label: "— inherit"
@@ -2070,65 +2092,125 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2070
2092
  value: "stretch",
2071
2093
  label: "stretch"
2072
2094
  }
2095
+ ], m = [
2096
+ {
2097
+ value: "",
2098
+ label: "Auto"
2099
+ },
2100
+ {
2101
+ value: "fill",
2102
+ label: "Fill"
2103
+ },
2104
+ {
2105
+ value: "fixed",
2106
+ label: "Fixed width"
2107
+ }
2073
2108
  ];
2109
+ function g(e) {
2110
+ e === "fill" ? o.patchStyle({
2111
+ size: "fill",
2112
+ width: void 0
2113
+ }) : e === "fixed" ? o.patchStyle({ size: "fixed" }) : o.patchStyle({
2114
+ size: void 0,
2115
+ width: void 0
2116
+ });
2117
+ }
2074
2118
  return (t, a) => (h(), i(e, null, [
2075
2119
  c.value ? (h(), n(C(N), {
2076
2120
  key: 0,
2077
2121
  label: "Gap"
2078
2122
  }, {
2079
- default: D(() => [s(C(R), {
2080
- "model-value": o.node.style?.gap ?? "",
2123
+ default: D(() => [s(C(z), {
2124
+ "model-value": l.value.gap ?? "",
2081
2125
  placeholder: "e.g. 8px",
2082
- "onUpdate:modelValue": a[0] ||= (e) => o.patchStyle({ gap: e })
2126
+ "onUpdate:modelValue": a[0] ||= (e) => o.patchStyle({ gap: e || void 0 })
2083
2127
  }, null, 8, ["model-value"])]),
2084
2128
  _: 1
2085
2129
  })) : r("", !0),
2086
- s(C(N), { label: "Padding" }, {
2087
- default: D(() => [s(C(R), {
2088
- "model-value": o.node.style?.padding ?? "",
2089
- placeholder: "e.g. 16px",
2090
- "onUpdate:modelValue": a[1] ||= (e) => o.patchStyle({ padding: e })
2130
+ c.value ? (h(), n(C(N), {
2131
+ key: 1,
2132
+ label: "Justify (main axis)"
2133
+ }, {
2134
+ default: D(() => [s(C(I), {
2135
+ "model-value": l.value.justify ?? "",
2136
+ options: f,
2137
+ "onUpdate:modelValue": a[1] ||= (e) => o.patchStyle({ justify: e || void 0 })
2138
+ }, null, 8, ["model-value"])]),
2139
+ _: 1
2140
+ })) : r("", !0),
2141
+ c.value ? (h(), n(C(N), {
2142
+ key: 2,
2143
+ label: "Align items (cross axis)"
2144
+ }, {
2145
+ default: D(() => [s(C(I), {
2146
+ "model-value": l.value.align ?? "",
2147
+ options: p,
2148
+ "onUpdate:modelValue": a[2] ||= (e) => o.patchStyle({ align: e || void 0 })
2149
+ }, null, 8, ["model-value"])]),
2150
+ _: 1
2151
+ })) : r("", !0),
2152
+ s(C(N), { label: "Align self" }, {
2153
+ default: D(() => [s(C(I), {
2154
+ "model-value": l.value.alignSelf ?? "",
2155
+ options: p,
2156
+ "onUpdate:modelValue": a[3] ||= (e) => o.patchStyle({ alignSelf: e || void 0 })
2091
2157
  }, null, 8, ["model-value"])]),
2092
2158
  _: 1
2093
2159
  }),
2094
- s(C(N), { label: "Width" }, {
2095
- default: D(() => [s(C(R), {
2096
- "model-value": o.node.style?.width ?? "",
2097
- placeholder: "e.g. 100%, 380px",
2098
- "onUpdate:modelValue": a[2] ||= (e) => o.patchStyle({ width: e })
2160
+ s(C(N), { label: "Size" }, {
2161
+ default: D(() => [s(C(I), {
2162
+ "model-value": u.value,
2163
+ options: m,
2164
+ "onUpdate:modelValue": a[4] ||= (e) => g(e)
2099
2165
  }, null, 8, ["model-value"])]),
2100
2166
  _: 1
2101
2167
  }),
2102
- c.value ? (h(), n(C(N), {
2103
- key: 1,
2104
- label: "Align children"
2168
+ d.value ? (h(), n(C(N), {
2169
+ key: 3,
2170
+ label: "Width"
2105
2171
  }, {
2106
- default: D(() => [s(C(I), {
2107
- "model-value": o.node.style?.align ?? "",
2108
- options: l,
2109
- "onUpdate:modelValue": a[3] ||= (e) => o.patchStyle({ align: e || void 0 })
2172
+ default: D(() => [s(C(z), {
2173
+ "model-value": l.value.width ?? "",
2174
+ placeholder: "e.g. 380px, 50%",
2175
+ "onUpdate:modelValue": a[5] ||= (e) => o.patchStyle({ width: e || void 0 })
2176
+ }, null, 8, ["model-value"])]),
2177
+ _: 1
2178
+ })) : r("", !0),
2179
+ s(C(N), { label: "Min height" }, {
2180
+ default: D(() => [s(C(z), {
2181
+ "model-value": l.value.minHeight ?? "",
2182
+ placeholder: "e.g. 100vh, 400px",
2183
+ "onUpdate:modelValue": a[6] ||= (e) => o.patchStyle({ minHeight: e || void 0 })
2110
2184
  }, null, 8, ["model-value"])]),
2111
2185
  _: 1
2112
- })) : r("", !0)
2186
+ }),
2187
+ s(C(N), { label: "Padding" }, {
2188
+ default: D(() => [s(C(z), {
2189
+ "model-value": l.value.padding ?? "",
2190
+ placeholder: "e.g. 16px",
2191
+ "onUpdate:modelValue": a[7] ||= (e) => o.patchStyle({ padding: e || void 0 })
2192
+ }, null, 8, ["model-value"])]),
2193
+ _: 1
2194
+ })
2113
2195
  ], 64));
2114
2196
  }
2115
- }), kt = { class: "pb-props" }, At = { class: "pb-props__header" }, jt = {
2197
+ }), Nt = { class: "pb-props" }, Pt = { class: "pb-props__header" }, Ft = {
2116
2198
  key: 0,
2117
2199
  class: "pb-props__empty"
2118
- }, Mt = {
2200
+ }, It = {
2119
2201
  key: 1,
2120
2202
  class: "pb-props__body"
2121
- }, Nt = {
2203
+ }, Lt = {
2122
2204
  key: 0,
2123
2205
  class: "pb-props__issues"
2124
- }, Pt = {
2206
+ }, Rt = {
2125
2207
  key: 1,
2126
2208
  class: "pb-props__section"
2127
- }, Ft = { class: "pb-props__section-title" }, It = /* @__PURE__ */ G(/* @__PURE__ */ c({
2209
+ }, zt = { class: "pb-props__section-title" }, Bt = /* @__PURE__ */ K(/* @__PURE__ */ c({
2128
2210
  name: "BuilderPropsPanel",
2129
2211
  __name: "BuilderPropsPanel",
2130
2212
  setup(o) {
2131
- let c = l(Q), u = l(_e), f = t(() => c.selectedNode.value), p = t(() => c.selectedPath.value ?? []), m = t(() => f.value ? Dt[f.value.type] : void 0), g = t(() => f.value ? u?.byNodeId.value.get(f.value.id) ?? [] : []);
2213
+ let c = l(Q), u = l(xe), f = t(() => c.selectedNode.value), p = t(() => c.selectedPath.value ?? []), m = t(() => f.value ? jt[f.value.type] : void 0), g = t(() => f.value ? u?.byNodeId.value.get(f.value.id) ?? [] : []);
2132
2214
  function _(e) {
2133
2215
  p.value && c.patch(p.value, e);
2134
2216
  }
@@ -2138,29 +2220,29 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2138
2220
  ...e
2139
2221
  } });
2140
2222
  }
2141
- return (t, o) => (h(), i("aside", kt, [a("header", At, [s(C(P), {
2223
+ return (t, o) => (h(), i("aside", Nt, [a("header", Pt, [s(C(P), {
2142
2224
  name: "settings",
2143
2225
  size: "s"
2144
- }), o[0] ||= a("span", { class: "pb-props__title" }, "Properties", -1)]), f.value ? (h(), i("div", Mt, [
2145
- g.value.length > 0 ? (h(), i("ul", Nt, [(h(!0), i(e, null, v(g.value, (e, t) => (h(), i("li", {
2226
+ }), o[0] ||= a("span", { class: "pb-props__title" }, "Properties", -1)]), f.value ? (h(), i("div", It, [
2227
+ g.value.length > 0 ? (h(), i("ul", Lt, [(h(!0), i(e, null, v(g.value, (e, t) => (h(), i("li", {
2146
2228
  key: t,
2147
2229
  class: d(["pb-props__issue", `pb-props__issue--${e.severity}`])
2148
2230
  }, [s(C(P), {
2149
2231
  name: e.severity === "error" ? "circle-alert" : "triangle-alert",
2150
2232
  size: "s"
2151
2233
  }, null, 8, ["name"]), a("span", null, S(e.message), 1)], 2))), 128))])) : r("", !0),
2152
- m.value ? (h(), i("section", Pt, [a("h4", Ft, S(m.value.sectionTitle), 1), (h(), n(b(m.value.component), {
2234
+ m.value ? (h(), i("section", Rt, [a("h4", zt, S(m.value.sectionTitle), 1), (h(), n(b(m.value.component), {
2153
2235
  node: f.value,
2154
2236
  patch: _
2155
2237
  }, null, 8, ["node"]))])) : r("", !0),
2156
2238
  f.value.type === "spacer" ? r("", !0) : (h(), i("section", {
2157
2239
  key: 2,
2158
2240
  class: d(["pb-props__section", { "pb-props__section--separated": !!m.value }])
2159
- }, [o[3] ||= a("h4", { class: "pb-props__section-title" }, "Style", -1), s(Ot, {
2241
+ }, [o[3] ||= a("h4", { class: "pb-props__section-title" }, "Style", -1), s(Mt, {
2160
2242
  node: f.value,
2161
2243
  "patch-style": y
2162
2244
  }, null, 8, ["node"])], 2))
2163
- ])) : (h(), i("div", jt, [
2245
+ ])) : (h(), i("div", Ft, [
2164
2246
  s(C(P), {
2165
2247
  name: "settings",
2166
2248
  size: "l"
@@ -2169,14 +2251,14 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2169
2251
  o[2] ||= a("p", { class: "pb-props__empty-hint" }, "Click a node in the outline or canvas to edit it.", -1)
2170
2252
  ]))]));
2171
2253
  }
2172
- }), [["__scopeId", "data-v-380ec929"]]), Lt = { class: "pb-builder__pane-header" }, Rt = { class: "pb-builder__tree-scroll" }, zt = { class: "pb-builder__pane pb-builder__pane--center" }, Bt = ["disabled"], Vt = ["disabled"], Ht = { class: "pb-builder__tab-label" }, Ut = { class: "pb-builder__tab-label" }, Wt = { class: "pb-builder__preview-pane" }, Gt = { class: "pb-builder__preview-toolbar" }, Kt = {
2254
+ }), [["__scopeId", "data-v-380ec929"]]), Vt = { class: "pb-builder__pane-header" }, Ht = { class: "pb-builder__tree-scroll" }, Ut = { class: "pb-builder__pane pb-builder__pane--center" }, Wt = ["disabled"], Gt = ["disabled"], Kt = { class: "pb-builder__tab-label" }, qt = { class: "pb-builder__tab-label" }, Jt = { class: "pb-builder__preview-pane" }, Yt = { class: "pb-builder__preview-toolbar" }, Xt = {
2173
2255
  class: "pb-builder__seg",
2174
2256
  role: "radiogroup",
2175
2257
  "aria-label": "Preview width"
2176
- }, qt = ["aria-checked"], Jt = ["aria-checked"], Yt = ["aria-checked"], Xt = { class: "pb-builder__preview" }, Zt = { class: "pb-builder__tab-label" }, Qt = { class: "pb-builder__json-pane" }, $t = { class: "pb-builder__json-toolbar" }, en = {
2258
+ }, Zt = ["aria-checked"], Qt = ["aria-checked"], $t = ["aria-checked"], en = { class: "pb-builder__preview" }, tn = { class: "pb-builder__tab-label" }, nn = { class: "pb-builder__json-pane" }, rn = { class: "pb-builder__json-toolbar" }, an = {
2177
2259
  key: 0,
2178
2260
  class: "pb-builder__json-error"
2179
- }, tn = ["disabled"], nn = ["value"], rn = 260, an = 180, on = 280, sn = 220, cn = 360, ln = 36, un = /* @__PURE__ */ G(/* @__PURE__ */ c({
2261
+ }, on = ["disabled"], sn = ["value"], cn = 260, ln = 180, un = 280, dn = 220, fn = 360, pn = 36, mn = /* @__PURE__ */ K(/* @__PURE__ */ c({
2180
2262
  __name: "CoarPageBuilder",
2181
2263
  props: /* @__PURE__ */ u({ config: {} }, {
2182
2264
  modelValue: { required: !1 },
@@ -2188,7 +2270,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2188
2270
  v0d1c4c4b: N.value,
2189
2271
  v0f378b9d: F.value
2190
2272
  }));
2191
- let c = T(n, "modelValue"), l = n, u = me({
2273
+ let c = T(n, "modelValue"), l = n, u = ve({
2192
2274
  schema: c.value === void 0 ? void 0 : c,
2193
2275
  initial: {
2194
2276
  id: "root",
@@ -2199,8 +2281,8 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2199
2281
  },
2200
2282
  children: []
2201
2283
  }
2202
- }), p = t(() => l.config), m = he(u.schema, p);
2203
- g(Q, u), g($, p), g(_e, m);
2284
+ }), p = t(() => l.config), m = ye(u.schema, p);
2285
+ g(Q, u), g($, p), g(xe, m);
2204
2286
  let v = _("editor"), y = _("full"), b = {
2205
2287
  tablet: 768,
2206
2288
  mobile: 375
@@ -2208,46 +2290,46 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2208
2290
  maxWidth: `${b[y.value]}px`,
2209
2291
  width: "100%",
2210
2292
  margin: "0 auto"
2211
- }), O = _(rn), k = _(on), A = _(!1), j = _(!1), M = _(null), N = _(`${rn}px`), F = _(`${on}px`);
2293
+ }), O = _(cn), k = _(un), A = _(!1), j = _(!1), M = _(null), N = _(`${cn}px`), F = _(`${un}px`);
2212
2294
  E([A, O], () => {
2213
- N.value = A.value ? `${ln}px` : `${O.value}px`;
2295
+ N.value = A.value ? `${pn}px` : `${O.value}px`;
2214
2296
  }), E([j, k], () => {
2215
- F.value = j.value ? `${ln}px` : `${k.value}px`;
2297
+ F.value = j.value ? `${pn}px` : `${k.value}px`;
2216
2298
  });
2217
2299
  let I = _(null);
2218
- function R(e, t) {
2300
+ function z(e, t) {
2219
2301
  if (e === "outline" && A.value || e === "props" && j.value) return;
2220
2302
  t.preventDefault(), M.value = e;
2221
2303
  let n = t.clientX, r = O.value, i = k.value;
2222
2304
  function a(t) {
2223
2305
  let a = I.value?.getBoundingClientRect().width ?? 0;
2224
2306
  if (!a) return;
2225
- let o = a - (e === "outline" ? j.value ? ln : k.value : A.value ? ln : O.value) - cn - 2, s = t.clientX - n;
2226
- e === "outline" ? O.value = Math.min(Math.max(r + s, an), Math.max(an, o)) : k.value = Math.min(Math.max(i - s, sn), Math.max(sn, o));
2307
+ let o = a - (e === "outline" ? j.value ? pn : k.value : A.value ? pn : O.value) - fn - 2, s = t.clientX - n;
2308
+ e === "outline" ? O.value = Math.min(Math.max(r + s, ln), Math.max(ln, o)) : k.value = Math.min(Math.max(i - s, dn), Math.max(dn, o));
2227
2309
  }
2228
2310
  function o() {
2229
2311
  M.value = null, window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", o), window.removeEventListener("pointercancel", o);
2230
2312
  }
2231
2313
  window.addEventListener("pointermove", a), window.addEventListener("pointerup", o), window.addEventListener("pointercancel", o);
2232
2314
  }
2233
- let z = _(JSON.stringify(u.schema.value, null, 2)), B = _(""), V = !1;
2315
+ let B = _(JSON.stringify(u.schema.value, null, 2)), V = _(""), H = !1;
2234
2316
  E(u.schema, (e) => {
2235
- V || (z.value = JSON.stringify(e, null, 2));
2317
+ H || (B.value = JSON.stringify(e, null, 2));
2236
2318
  }, { deep: !1 });
2237
- function H(e) {
2238
- V = !0, z.value = e.target.value;
2319
+ function U(e) {
2320
+ H = !0, B.value = e.target.value;
2239
2321
  try {
2240
- JSON.parse(z.value), B.value = "";
2322
+ JSON.parse(B.value), V.value = "";
2241
2323
  } catch {
2242
- B.value = "Invalid JSON";
2324
+ V.value = "Invalid JSON";
2243
2325
  }
2244
2326
  }
2245
- function U() {
2246
- V = !1;
2327
+ function W() {
2328
+ H = !1;
2247
2329
  }
2248
- function W(e) {
2330
+ function ee(e) {
2249
2331
  if (!e || typeof e != "object") return e;
2250
- let t = e, n = Array.isArray(t.children) ? t.children.map(W) : t.children;
2332
+ let t = e, n = Array.isArray(t.children) ? t.children.map(ee) : t.children;
2251
2333
  return t.type === "column" ? {
2252
2334
  ...t,
2253
2335
  type: "stack",
@@ -2264,7 +2346,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2264
2346
  };
2265
2347
  }
2266
2348
  function te(e) {
2267
- let t = W(e);
2349
+ let t = ee(e);
2268
2350
  return t.type === "page" ? t : {
2269
2351
  id: "root",
2270
2352
  type: "page",
@@ -2275,12 +2357,12 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2275
2357
  children: [t]
2276
2358
  };
2277
2359
  }
2278
- function G() {
2360
+ function ne() {
2279
2361
  try {
2280
- let e = JSON.parse(z.value);
2281
- u.replaceSchema(te(e)), B.value = "", v.value = "editor";
2362
+ let e = JSON.parse(B.value);
2363
+ u.replaceSchema(te(e)), V.value = "", v.value = "editor";
2282
2364
  } catch (e) {
2283
- B.value = e instanceof Error ? e.message : "Invalid JSON";
2365
+ V.value = e instanceof Error ? e.message : "Invalid JSON";
2284
2366
  }
2285
2367
  }
2286
2368
  return (t, c) => (h(), i("div", {
@@ -2301,7 +2383,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2301
2383
  }, [s(C(P), {
2302
2384
  name: "chevrons-right",
2303
2385
  size: "s"
2304
- })])) : (h(), i(e, { key: 0 }, [a("header", Lt, [
2386
+ })])) : (h(), i(e, { key: 0 }, [a("header", Vt, [
2305
2387
  s(C(P), {
2306
2388
  name: "list",
2307
2389
  size: "s"
@@ -2316,13 +2398,13 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2316
2398
  name: "chevrons-left",
2317
2399
  size: "s"
2318
2400
  })])
2319
- ]), a("div", Rt, [s(Me)])], 64))], 2),
2401
+ ]), a("div", Ht, [s(Ie)])], 64))], 2),
2320
2402
  a("div", {
2321
2403
  class: d(["pb-builder__divider", { "pb-builder__divider--inert": A.value }]),
2322
2404
  role: "separator",
2323
- onPointerdown: c[2] ||= (e) => R("outline", e)
2405
+ onPointerdown: c[2] ||= (e) => z("outline", e)
2324
2406
  }, null, 34),
2325
- a("section", zt, [s(C(ee), {
2407
+ a("section", Ut, [s(C(R), {
2326
2408
  modelValue: v.value,
2327
2409
  "onUpdate:modelValue": c[8] ||= (e) => v.value = e,
2328
2410
  class: "pb-builder__tabs"
@@ -2336,7 +2418,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2336
2418
  }, [s(C(P), {
2337
2419
  name: "undo-2",
2338
2420
  size: "s"
2339
- })], 8, Bt), a("button", {
2421
+ })], 8, Wt), a("button", {
2340
2422
  type: "button",
2341
2423
  class: "pb-builder__icon-btn",
2342
2424
  disabled: !C(u).canRedo.value,
@@ -2345,22 +2427,22 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2345
2427
  }, [s(C(P), {
2346
2428
  name: "redo-2",
2347
2429
  size: "s"
2348
- })], 8, Vt)]),
2430
+ })], 8, Gt)]),
2349
2431
  default: D(() => [
2350
2432
  s(C(L), { id: "editor" }, {
2351
- default: D(() => [a("span", Ht, [s(C(P), {
2433
+ default: D(() => [a("span", Kt, [s(C(P), {
2352
2434
  name: "pencil",
2353
2435
  size: "s"
2354
2436
  }), c[13] ||= o(" Editor ", -1)])]),
2355
- content: D(() => [s(it)]),
2437
+ content: D(() => [s(ct)]),
2356
2438
  _: 1
2357
2439
  }),
2358
2440
  s(C(L), { id: "preview" }, {
2359
- default: D(() => [a("span", Ut, [s(C(P), {
2441
+ default: D(() => [a("span", qt, [s(C(P), {
2360
2442
  name: "eye",
2361
2443
  size: "s"
2362
2444
  }), c[14] ||= o(" Preview ", -1)])]),
2363
- content: D(() => [a("div", Wt, [a("div", Gt, [a("div", Kt, [
2445
+ content: D(() => [a("div", Jt, [a("div", Yt, [a("div", Xt, [
2364
2446
  a("button", {
2365
2447
  type: "button",
2366
2448
  class: d(["pb-builder__seg-btn", { "pb-builder__seg-btn--active": y.value === "full" }]),
@@ -2368,7 +2450,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2368
2450
  "aria-checked": y.value === "full",
2369
2451
  title: "Full width",
2370
2452
  onClick: c[5] ||= (e) => y.value = "full"
2371
- }, " Desktop ", 10, qt),
2453
+ }, " Desktop ", 10, Zt),
2372
2454
  a("button", {
2373
2455
  type: "button",
2374
2456
  class: d(["pb-builder__seg-btn", { "pb-builder__seg-btn--active": y.value === "tablet" }]),
@@ -2376,7 +2458,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2376
2458
  "aria-checked": y.value === "tablet",
2377
2459
  title: "768px",
2378
2460
  onClick: c[6] ||= (e) => y.value = "tablet"
2379
- }, " Tablet · 768 ", 10, Jt),
2461
+ }, " Tablet · 768 ", 10, Qt),
2380
2462
  a("button", {
2381
2463
  type: "button",
2382
2464
  class: d(["pb-builder__seg-btn", { "pb-builder__seg-btn--active": y.value === "mobile" }]),
@@ -2384,8 +2466,8 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2384
2466
  "aria-checked": y.value === "mobile",
2385
2467
  title: "375px",
2386
2468
  onClick: c[7] ||= (e) => y.value = "mobile"
2387
- }, " Mobile · 375 ", 10, Yt)
2388
- ])]), a("div", Xt, [a("div", {
2469
+ }, " Mobile · 375 ", 10, $t)
2470
+ ])]), a("div", en, [a("div", {
2389
2471
  class: "pb-builder__preview-frame",
2390
2472
  style: f(x.value)
2391
2473
  }, [s(q, {
@@ -2400,25 +2482,25 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2400
2482
  _: 1
2401
2483
  }),
2402
2484
  s(C(L), { id: "json" }, {
2403
- default: D(() => [a("span", Zt, [s(C(P), {
2485
+ default: D(() => [a("span", tn, [s(C(P), {
2404
2486
  name: "code",
2405
2487
  size: "s"
2406
2488
  }), c[15] ||= o(" JSON ", -1)])]),
2407
- content: D(() => [a("div", Qt, [a("div", $t, [
2489
+ content: D(() => [a("div", nn, [a("div", rn, [
2408
2490
  c[16] ||= a("span", { class: "pb-builder__json-hint" }, "Paste or edit JSON, then click Apply", -1),
2409
- B.value ? (h(), i("span", en, S(B.value), 1)) : r("", !0),
2491
+ V.value ? (h(), i("span", an, S(V.value), 1)) : r("", !0),
2410
2492
  a("button", {
2411
2493
  class: "pb-builder__json-apply",
2412
- disabled: !!B.value,
2413
- onClick: G
2414
- }, " Apply → ", 8, tn)
2494
+ disabled: !!V.value,
2495
+ onClick: ne
2496
+ }, " Apply → ", 8, on)
2415
2497
  ]), a("textarea", {
2416
2498
  class: "pb-builder__json-editor",
2417
- value: z.value,
2499
+ value: B.value,
2418
2500
  spellcheck: "false",
2419
- onInput: H,
2420
- onBlur: U
2421
- }, null, 40, nn)])]),
2501
+ onInput: U,
2502
+ onBlur: W
2503
+ }, null, 40, sn)])]),
2422
2504
  _: 1
2423
2505
  })
2424
2506
  ]),
@@ -2427,7 +2509,7 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2427
2509
  a("div", {
2428
2510
  class: d(["pb-builder__divider", { "pb-builder__divider--inert": j.value }]),
2429
2511
  role: "separator",
2430
- onPointerdown: c[9] ||= (e) => R("props", e)
2512
+ onPointerdown: c[9] ||= (e) => z("props", e)
2431
2513
  }, null, 34),
2432
2514
  a("section", { class: d(["pb-builder__pane pb-builder__pane--props", { "pb-builder__pane--rail": j.value }]) }, [j.value ? (h(), i("button", {
2433
2515
  key: 1,
@@ -2446,9 +2528,9 @@ var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze =
2446
2528
  }, [s(C(P), {
2447
2529
  name: "chevrons-right",
2448
2530
  size: "s"
2449
- })]), s(It, { class: "pb-builder__pane-inner" })], 64))], 2)
2531
+ })]), s(Bt, { class: "pb-builder__pane-inner" })], 64))], 2)
2450
2532
  ], 2));
2451
2533
  }
2452
2534
  }), [["__scopeId", "data-v-fb26dca9"]]);
2453
2535
  //#endregion
2454
- export { un as CoarPageBuilder, q as CoarPageRenderer, V as isContainerNode, H as isElementAllowed };
2536
+ export { mn as CoarPageBuilder, q as CoarPageRenderer, H as isContainerNode, U as isElementAllowed };