@alfakit/vue 0.1.2 → 0.1.7

package/dist/components/fields/BuilderField.vue_vue_type_script_setup_true_lang.js

@@ -5,11 +5,11 @@ import a from "../ui/Button2.js";
 import { useField as te, useOptionalFormStore as ne } from "../form/form-context.js";
 import re from "../schema/SchemaRenderer.js";
 import { useScrollToErroredItem as ie, useVirtualList as ae } from "../../composables/use-virtual-list.js";
-import oe from "../ui/Collapsible.js";
-import se from "../ui/CollapsibleContent.js";
-import { useFieldActionContext as ce } from "../schema/field-actions.js";
-import le from "../layout/DeferredSchema.js";
-import ue from "../schema/FieldWrapper.js";
+import { useFieldActionContext as oe } from "../schema/field-actions.js";
+import se from "../layout/DeferredSchema.js";
+import ce from "../schema/FieldWrapper.js";
+import le from "../ui/Collapsible.js";
+import ue from "../ui/CollapsibleContent.js";
 import de from "./AddActionRow.js";
 import fe from "./CollapseAllActions.js";
 import pe from "./ItemHeaderActions.js";
@@ -17,27 +17,27 @@ import { useItemActionFallbacks as me, useItemMoves as he, useRunItemAction as g
 import _e from "./BuilderBlockActionsMenu.js";
 import ve from "./BuilderBlockPickerPanel.js";
 import ye from "./BuilderBlockPicker.js";
-import { VIRTUAL_ESTIMATES as be, builderItemLabel as o, builderItemSchema as xe, builderItems as Se, canAddBuilderBlock as Ce, cloneIndexedState as s, cloneRepeaterItem as we, fieldIds as Te, insertBuilderItem as Ee, isDeferredPlaceholder as De, itemActionContext as Oe, moveIndexedState as c, moveRepeaterItem as ke, removeIndexedState as l, removeRepeaterItem as Ae, reorderedItemKeys as je, resolveItemAction as Me, virtualizeOptions as Ne } from "@alfakit/core";
-import { Fragment as Pe, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as Fe, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as Ie, openBlock as v, ref as y, renderList as Le, resolveComponent as Re, resolveDynamicComponent as ze, toDisplayString as b, unref as x, withCtx as S, withKeys as C, withModifiers as w } from "vue";
-import { PencilIcon as Be } from "@lucide/vue";
+import { VIRTUAL_ESTIMATES as be, builderItemLabel as o, builderItemSchema as xe, builderItems as Se, canAddBuilderBlock as Ce, cloneIndexedState as we, cloneRepeaterItem as Te, fieldIds as Ee, insertBuilderItem as De, isDeferredPlaceholder as Oe, itemActionContext as ke, moveIndexedState as s, moveRepeaterItem as Ae, removeIndexedState as je, removeRepeaterItem as Me, reorderedItemKeys as Ne, resolveItemAction as Pe, virtualizeOptions as Fe } from "@alfakit/core";
+import { Fragment as Ie, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as Le, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as Re, openBlock as g, ref as _, renderList as ze, resolveComponent as Be, resolveDynamicComponent as Ve, toDisplayString as v, unref as y, withCtx as b, withKeys as x, withModifiers as S } from "vue";
+import { PencilIcon as He } from "@lucide/vue";
 //#region src/components/fields/BuilderField.vue?vue&type=script&setup=true&lang.ts
-var Ve = {
+var Ue = {
 	"aria-live": "polite",
 	"aria-atomic": "true",
 	class: "sr-only",
 	"data-slot": "item-move-status"
-}, He = {
+}, We = {
 	key: 0,
 	"data-slot": "builder-empty",
 	class: "bg-muted/30 flex flex-col gap-3 rounded-lg border border-dashed p-3 sm:p-4"
-}, Ue = { class: "px-1" }, We = { class: "text-sm font-medium" }, Ge = { class: "text-muted-foreground text-sm" }, Ke = {
+}, Ge = { class: "px-1" }, Ke = { class: "text-sm font-medium" }, qe = { class: "text-muted-foreground text-sm" }, Je = {
 	key: 1,
 	class: "text-muted-foreground rounded-lg border border-dashed p-4 text-center text-sm"
-}, qe = [
+}, Ye = [
 	"id",
 	"aria-labelledby",
 	"aria-describedby"
-], Je = [
+], Xe = [
 	"data-index",
 	"aria-setsize",
 	"aria-posinset",
@@ -45,197 +45,202 @@ var Ve = {
 	"draggable",
 	"onDragstart",
 	"onDrop"
-], Ye = {
+], Ze = {
 	class: "flex flex-wrap items-center gap-1 border-b px-2 py-1.5",
 	"data-slot": "item-header"
-}, Xe = ["title"], Ze = {
+}, Qe = ["title"], $e = {
 	key: 2,
 	class: "text-muted-foreground text-xs tabular-nums"
-}, Qe = { class: "flex min-w-0 flex-1 items-baseline gap-2" }, $e = {
+}, et = { class: "flex min-w-0 flex-1 items-baseline gap-2" }, tt = {
 	key: 0,
 	dir: "auto",
 	class: "min-w-0 shrink-0 truncate text-sm font-medium sm:max-w-[60%]"
-}, et = {
+}, nt = {
 	key: 1,
 	dir: "auto",
 	class: "text-muted-foreground min-w-0 truncate text-sm",
 	"data-slot": "builder-item-summary"
-}, tt = [
+}, rt = [
 	"role",
 	"tabindex",
 	"aria-label",
 	"onClick",
 	"onKeydown"
-], nt = ["innerHTML"], rt = {
+], it = ["innerHTML"], at = {
 	key: 1,
 	class: "p-4"
-}, T = /*@__PURE__*/ g({
+}, C = /*@__PURE__*/ m({
 	__name: "BuilderField",
 	props: { component: {} },
-	setup(g) {
-		let T = g, E = ee(), it = t(), at = n(), ot = ne(), D = ce(() => T.component), O = ge(D), k = me(), A = (e) => {
-			let t = T.component.items[e];
-			return t && t.type === F.value[e]?.type ? t : void 0;
-		}, j = (e, t) => Me(e, T.component, t === void 0 ? void 0 : A(t), e === "add" ? {
-			...k.add,
-			label: T.component.addActionLabel
-		} : k[e]), { value: M, setValue: st, error: ct, id: N, disabled: lt, readOnly: ut, aria: dt } = te(() => T.component), P = u(() => lt.value || ut.value), F = u(() => Se(M.value)), I = y({}), L = y({}), R = y(null), z = ae(() => F.value.length, () => Ne(T.component.virtualize, be.item, 12));
-		ie(z, () => T.component.statePath);
-		let ft = u(() => z.indexes.value.map((e) => ({
-			item: F.value[e],
+	setup(m) {
+		let C = m, w = ee(), ot = t(), st = n(), T = ne(), E = oe(() => C.component), D = ge(E), ct = me("builder"), O = (e) => {
+			let t = C.component.items[e];
+			return t && t.type === N.value[e]?.type ? t : void 0;
+		}, k = (e, t) => Pe(e, C.component, t === void 0 ? void 0 : O(t), e === "add" ? {
+			...ct.add,
+			label: C.component.addActionLabel
+		} : ct[e]), { value: A, setValue: lt, error: ut, id: j, disabled: dt, readOnly: ft, aria: pt } = te(() => C.component), M = c(() => dt.value || ft.value), N = c(() => Se(A.value)), P = _({}), F = _({}), I = _(null), L = ae(() => N.value.length, () => Fe(C.component.virtualize, be.item, 12));
+		ie(L, () => C.component.statePath);
+		let mt = c(() => L.indexes.value.map((e) => ({
+			item: N.value[e],
 			index: e
-		}))), B = (e) => T.component.blocks.find((t) => t.name === e), V = (e) => I.value[e] ?? T.component.collapsed ?? !1, H = u(() => T.component.addable && !P.value && (T.component.maxItems == null || F.value.length < T.component.maxItems)), U = u(() => T.component.deletable && !P.value && (T.component.minItems == null || F.value.length > T.component.minItems)), W = (e) => {
-			let t = B(e.type);
-			return !!(T.component.cloneable && H.value && t && Ce(T.component, t, F.value));
-		}, G = u(() => T.component.reorderable && T.component.reorderableWithDragAndDrop !== !1 && !P.value && j("reorder") !== null), K = u(() => T.component.reorderable && T.component.reorderableWithButtons !== !1 && !P.value), q = u(() => j("add")), pt = u(() => H.value && q.value !== null && !q.value.disabled && T.component.blocks.length > 0), J = u(() => !!T.component.blockActionsMenu && !P.value), mt = e(), ht = (e, t) => O(j(e, t), { item: String(t) }, () => {
-			e === "moveUp" ? X.moveWithButton(t, t - 1) : e === "moveDown" ? X.moveWithButton(t, t + 1) : e === "clone" ? xt(t) : e === "delete" && bt(t);
-		}), gt = (e, t) => void mt.trigger(e, Oe(D.value, { item: String(t) })), Y = (e) => st(e), _t = (e, t) => {
-			Y(ke(F.value, e, t)), I.value = c(I.value, e, t), L.value = c(L.value, e, t);
-		}, X = he(M, (e, t) => _t(e, t), (e) => o(T.component, F.value, e), () => F.value.length), vt = X.announcement, yt = X.container, bt = (e) => {
-			Y(Ae(F.value, e)), I.value = l(I.value, e), L.value = l(L.value, e);
+		}))), R = (e) => C.component.blocks.find((t) => t.name === e), z = (e) => P.value[e] ?? C.component.collapsed ?? !1, B = c(() => C.component.addable && !M.value && (C.component.maxItems == null || N.value.length < C.component.maxItems)), V = c(() => C.component.deletable && !M.value && (C.component.minItems == null || N.value.length > C.component.minItems)), H = (e) => {
+			let t = R(e.type);
+			return !!(C.component.cloneable && B.value && t && Ce(C.component, t, N.value));
+		}, U = c(() => C.component.reorderable && C.component.reorderableWithDragAndDrop !== !1 && !M.value && k("reorder") !== null), W = c(() => C.component.reorderable && C.component.reorderableWithButtons !== !1 && !M.value), G = c(() => k("add")), ht = c(() => B.value && G.value !== null && !G.value.disabled && C.component.blocks.length > 0), K = c(() => !!C.component.blockActionsMenu && !M.value), gt = e(), _t = (e, t) => D(k(e, t), { item: String(t) }, () => {
+			e === "moveUp" ? Y.moveWithButton(t, t - 1) : e === "moveDown" ? Y.moveWithButton(t, t + 1) : e === "clone" ? xt(t) : e === "delete" && X(t);
+		}), vt = (e, t) => void gt.trigger(e, ke(E.value, { item: String(t) })), q = (e) => lt(e), J = (e, t) => {
+			q(Ae(N.value, e, t)), P.value = s(P.value, e, t), F.value = s(F.value, e, t);
+		}, Y = he(A, (e, t) => J(e, t), (e) => o(C.component, N.value, e), () => N.value.length), yt = Y.announcement, bt = Y.container, X = (e) => {
+			q(Me(N.value, e)), P.value = je(P.value, e), F.value = je(F.value, e);
 		}, xt = (e) => {
-			Y(we(F.value, e)), I.value = s(I.value, e), L.value = s(L.value, e);
-		}, St = (e) => O(q.value, { block: e.name }, () => Y(Ee(F.value, e))), Ct = (e) => {
-			let t = R.value;
-			R.value = null, t !== null && t !== e && O(j("reorder"), { items: je(F.value.length, t, e) }, () => _t(t, e));
+			q(Te(N.value, e)), P.value = we(P.value, e), F.value = we(F.value, e);
+		}, St = (e) => D(G.value, { block: e.name }, () => q(De(N.value, e))), Ct = (e) => {
+			let t = I.value;
+			I.value = null, t !== null && t !== e && D(k("reorder"), { items: Ne(N.value.length, t, e) }, () => J(t, e));
 		}, wt = (e) => {
-			I.value = Object.fromEntries(F.value.map((t, n) => [n, e]));
+			P.value = Object.fromEntries(N.value.map((t, n) => [n, e])), e && Tt(N.value.map((e, t) => t));
+		}, Tt = (e) => {
+			e.some((e) => R(N.value[e]?.type ?? "")?.summary) && T?.refresh(C.component.statePath);
+		}, Et = (e) => {
+			let t = !z(e);
+			P.value = {
+				...P.value,
+				[e]: t
+			}, t && Tt([e]);
 		}, Z = (e) => {
-			let t = A(e)?.previewComponent ?? B(F.value[e]?.type ?? "")?.previewComponent;
-			return t ? at?.resolve(`builder-preview:${t}`) : void 0;
-		}, Tt = (e) => T.component.blockPreviews === !0 && (Z(e) !== void 0 || !!A(e)?.preview), Et = (e) => Tt(e) && !L.value[e], Dt = (e) => {
-			let t = !L.value[e];
-			L.value = {
-				...L.value,
+			let t = O(e)?.previewComponent ?? R(N.value[e]?.type ?? "")?.previewComponent;
+			return t ? st?.resolve(`builder-preview:${t}`) : void 0;
+		}, Dt = (e) => C.component.blockPreviews === !0 && (Z(e) !== void 0 || !!O(e)?.preview), Ot = (e) => Dt(e) && !F.value[e], kt = (e) => {
+			let t = !F.value[e];
+			F.value = {
+				...F.value,
 				[e]: t
-			}, t || ot?.refresh(T.component.statePath);
+			}, t || T?.refresh(C.component.statePath);
 		}, Q = (e) => {
-			P.value || Dt(e);
-		}, $ = u(() => !T.component.interactivePreviews && !P.value);
+			M.value || kt(e);
+		}, $ = c(() => !C.component.interactivePreviews && !M.value);
 		return (e, t) => {
-			let n = Re("BuilderField", !0);
-			return x(De)(T.component) ? (v(), d(le, {
+			let n = Be("BuilderField", !0);
+			return y(Oe)(C.component) ? (g(), l(se, {
 				key: 0,
-				component: T.component
+				component: C.component
 			}, {
-				default: S(({ component: e }) => [h(n, { component: e }, null, 8, ["component"])]),
+				default: b(({ component: e }) => [p(n, { component: e }, null, 8, ["component"])]),
 				_: 1
-			}, 8, ["component"])) : (v(), d(ue, {
+			}, 8, ["component"])) : (g(), l(ce, {
 				key: 1,
-				field: T.component,
-				"html-for": x(N),
-				error: x(ct)
+				field: C.component,
+				"html-for": y(j),
+				error: y(ut)
 			}, {
-				default: S(() => [m("div", {
+				default: b(() => [f("div", {
 					ref_key: "moveContainer",
-					ref: yt,
+					ref: bt,
 					class: "flex flex-col gap-3",
 					"data-slot": "builder"
 				}, [
-					m("span", Ve, b(x(vt)), 1),
-					F.value.length === 0 && pt.value ? (v(), p("div", He, [m("div", Ue, [m("p", We, b(x(E)("builder.empty_heading", {}, "Add your first block")), 1), m("p", Ge, b(x(E)("builder.empty_description", {}, "Pick one to start. You can add more, reorder and remove them at any time.")), 1)]), h(ve, {
-						component: T.component,
-						items: F.value,
+					f("span", Ue, v(y(yt)), 1),
+					N.value.length === 0 && ht.value ? (g(), d("div", We, [f("div", Ge, [f("p", Ke, v(y(w)("builder.empty_heading", {}, "Add your first block")), 1), f("p", qe, v(y(w)("builder.empty_description", {}, "Pick one to start. You can add more, reorder and remove them at any time.")), 1)]), p(ve, {
+						component: C.component,
+						items: N.value,
 						class: "bg-card max-h-[28rem] rounded-md border",
 						onPick: St
-					}, null, 8, ["component", "items"])])) : F.value.length === 0 ? (v(), p("p", Ke, b(x(E)("builder.empty", {}, "No blocks yet.")), 1)) : f("", !0),
-					T.component.collapsible && F.value.length > 0 ? (v(), d(fe, {
+					}, null, 8, ["component", "items"])])) : N.value.length === 0 ? (g(), d("p", Je, v(y(w)("builder.empty", {}, "No blocks yet.")), 1)) : u("", !0),
+					C.component.collapsible && N.value.length > 0 ? (g(), l(fe, {
 						key: 2,
-						context: x(D),
-						"collapse-all": j("collapseAll"),
-						"expand-all": j("expandAll"),
+						context: y(E),
+						"collapse-all": k("collapseAll"),
+						"expand-all": k("expandAll"),
 						onCollapseAll: t[0] ||= (e) => wt(!0),
 						onExpandAll: t[1] ||= (e) => wt(!1)
 					}, null, 8, [
 						"context",
 						"collapse-all",
 						"expand-all"
-					])) : f("", !0),
-					m("ul", {
-						id: x(N),
-						ref: x(z).attach,
-						"aria-labelledby": T.component.label ? x(Te)(x(N)).label : void 0,
-						"aria-describedby": x(dt)["aria-describedby"],
-						style: Ie(x(z).style.value),
-						class: _(x(r)("grid gap-3", F.value.length === 0 && "hidden"))
-					}, [(v(!0), p(Pe, null, Le(ft.value, ({ item: e, index: n }) => (v(), p("li", {
+					])) : u("", !0),
+					f("ul", {
+						id: y(j),
+						ref: y(L).attach,
+						"aria-labelledby": C.component.label ? y(Ee)(y(j)).label : void 0,
+						"aria-describedby": y(pt)["aria-describedby"],
+						style: Re(y(L).style.value),
+						class: h(y(r)("grid gap-3", N.value.length === 0 && "hidden"))
+					}, [(g(!0), d(Ie, null, ze(mt.value, ({ item: e, index: n }) => (g(), d("li", {
 						key: n,
 						ref_for: !0,
-						ref: x(z).item,
+						ref: y(L).item,
 						"data-index": n,
-						"aria-setsize": x(z).range.value.active ? F.value.length : void 0,
-						"aria-posinset": x(z).range.value.active ? n + 1 : void 0,
+						"aria-setsize": y(L).range.value.active ? N.value.length : void 0,
+						"aria-posinset": y(L).range.value.active ? n + 1 : void 0,
 						"data-block": e.type,
-						draggable: G.value,
-						class: _(x(r)("bg-card min-w-0 rounded-lg border shadow-xs", R.value === n && "opacity-50")),
-						onDragstart: (e) => R.value = n,
-						onDragover: t[2] ||= (e) => G.value && e.preventDefault(),
+						draggable: U.value,
+						class: h(y(r)("bg-card min-w-0 rounded-lg border shadow-xs", I.value === n && "opacity-50")),
+						onDragstart: (e) => I.value = n,
+						onDragover: t[2] ||= (e) => U.value && e.preventDefault(),
 						onDrop: (e) => Ct(n),
-						onDragend: t[3] ||= (e) => R.value = null
-					}, [h(oe, { open: !V(n) }, {
-						default: S(() => [m("div", Ye, [
-							G.value ? (v(), p("span", {
+						onDragend: t[3] ||= (e) => I.value = null
+					}, [p(le, { open: !z(n) }, {
+						default: b(() => [f("div", Ze, [
+							U.value ? (g(), d("span", {
 								key: 0,
 								class: "text-muted-foreground cursor-grab",
-								title: j("reorder")?.label ?? void 0,
+								title: k("reorder")?.label ?? void 0,
 								"aria-hidden": "true"
-							}, [h(x(i), { name: j("reorder")?.icon ?? "grip-vertical" }, null, 8, ["name"])], 8, Xe)) : f("", !0),
-							T.component.blockIcons && (B(e.type)?.icon ?? T.component.items[n]?.icon) ? (v(), d(x(i), {
+							}, [p(y(i), { name: k("reorder")?.icon ?? "grip-vertical" }, null, 8, ["name"])], 8, Qe)) : u("", !0),
+							C.component.blockIcons && (R(e.type)?.icon ?? C.component.items[n]?.icon) ? (g(), l(y(i), {
 								key: 1,
-								name: B(e.type)?.icon ?? T.component.items[n]?.icon,
+								name: R(e.type)?.icon ?? C.component.items[n]?.icon,
 								class: "text-muted-foreground size-4"
-							}, null, 8, ["name"])) : f("", !0),
-							T.component.blockNumbers ? (v(), p("span", Ze, b(x(it).number(n + 1)), 1)) : f("", !0),
-							m("span", Qe, [T.component.blockLabels ? (v(), p("span", $e, b(x(o)(T.component, F.value, n)), 1)) : f("", !0), A(n)?.summary ? (v(), p("span", et, b(A(n)?.summary), 1)) : f("", !0)]),
-							h(pe, {
-								context: x(D),
+							}, null, 8, ["name"])) : u("", !0),
+							C.component.blockNumbers ? (g(), d("span", $e, v(y(ot).number(n + 1)), 1)) : u("", !0),
+							f("span", et, [C.component.blockLabels ? (g(), d("span", tt, v(y(o)(C.component, N.value, n)), 1)) : u("", !0), O(n)?.summary ? (g(), d("span", nt, v(O(n)?.summary), 1)) : u("", !0)]),
+							p(pe, {
+								context: y(E),
 								"item-key": String(n),
 								index: n,
-								count: F.value.length,
-								resolve: (e) => j(e, n),
-								"extra-actions": J.value || P.value ? void 0 : A(n)?.actions,
-								buttons: K.value && !J.value,
-								"can-clone": W(e) && !J.value,
-								"can-delete": U.value && !J.value,
-								collapsible: !!T.component.collapsible,
-								collapsed: V(n),
-								onMove: x(X).moveWithButton,
+								count: N.value.length,
+								resolve: (e) => k(e, n),
+								"extra-actions": K.value || M.value ? void 0 : O(n)?.actions,
+								buttons: W.value && !K.value,
+								"can-clone": H(e) && !K.value,
+								"can-delete": V.value && !K.value,
+								collapsible: !!C.component.collapsible,
+								collapsed: z(n),
+								onMove: y(Y).moveWithButton,
 								onClone: (e) => xt(n),
-								onDelete: (e) => bt(n),
-								onToggle: (e) => I.value = {
-									...I.value,
-									[n]: !V(n)
-								}
+								onDelete: (e) => X(n),
+								onToggle: (e) => Et(n)
 							}, {
-								default: S(() => [Tt(n) && !P.value ? (v(), d(a, {
+								default: b(() => [Dt(n) && !M.value ? (g(), l(a, {
 									key: 0,
 									type: "button",
 									variant: "ghost",
 									size: "icon-xs",
-									"aria-label": x(E)("builder.edit_block", {}, "Edit block"),
-									"aria-pressed": !!L.value[n],
-									onClick: (e) => Dt(n)
+									"aria-label": y(w)("builder.edit_block", {}, "Edit block"),
+									"aria-pressed": !!F.value[n],
+									onClick: (e) => kt(n)
 								}, {
-									default: S(() => [h(x(i), {
+									default: b(() => [p(y(i), {
 										name: "alfakit::forms.components.builder.actions.edit",
-										fallback: x(Be)
+										fallback: y(He)
 									}, null, 8, ["fallback"])]),
 									_: 1
 								}, 8, [
 									"aria-label",
 									"aria-pressed",
 									"onClick"
-								])) : f("", !0), J.value ? (v(), d(_e, {
+								])) : u("", !0), K.value ? (g(), l(_e, {
 									key: 1,
-									label: x(o)(T.component, F.value, n) ?? "",
-									resolve: (e) => j(e, n),
-									"can-move-up": K.value && n > 0,
-									"can-move-down": K.value && n < F.value.length - 1,
-									"can-clone": W(e),
-									"can-delete": U.value,
-									"extra-actions": A(n)?.actions,
-									onAction: (e) => ht(e, n),
-									onExtra: (e) => gt(e, n)
+									label: y(o)(C.component, N.value, n) ?? "",
+									resolve: (e) => k(e, n),
+									"can-move-up": W.value && n > 0,
+									"can-move-down": W.value && n < N.value.length - 1,
+									"can-clone": H(e),
+									"can-delete": V.value,
+									"extra-actions": O(n)?.actions,
+									onAction: (e) => _t(e, n),
+									onExtra: (e) => vt(e, n)
 								}, null, 8, [
 									"label",
 									"resolve",
@@ -246,7 +251,7 @@ var Ve = {
 									"extra-actions",
 									"onAction",
 									"onExtra"
-								])) : f("", !0)]),
+								])) : u("", !0)]),
 								_: 2
 							}, 1032, [
 								"context",
@@ -265,17 +270,17 @@ var Ve = {
 								"onDelete",
 								"onToggle"
 							])
-						]), h(se, null, {
-							default: S(() => [Et(n) ? (v(), p("div", {
+						]), p(ue, null, {
+							default: b(() => [Ot(n) ? (g(), d("div", {
 								key: 0,
 								"data-slot": "builder-preview",
-								class: _(x(r)("p-4", $.value && "cursor-pointer")),
+								class: h(y(r)("p-4", $.value && "cursor-pointer")),
 								role: $.value ? "button" : void 0,
 								tabindex: $.value ? 0 : void 0,
-								"aria-label": $.value ? x(E)("builder.edit_block", {}, "Edit block") : void 0,
+								"aria-label": $.value ? y(w)("builder.edit_block", {}, "Edit block") : void 0,
 								onClick: (e) => $.value && Q(n),
-								onKeydown: [C(w((e) => $.value && Q(n), ["prevent"]), ["enter"]), C(w((e) => $.value && Q(n), ["prevent"]), ["space"])]
-							}, [m("div", { class: _(x(r)(!T.component.interactivePreviews && "pointer-events-none")) }, [Z(n) ? (v(), d(ze(Z(n)), {
+								onKeydown: [x(S((e) => $.value && Q(n), ["prevent"]), ["enter"]), x(S((e) => $.value && Q(n), ["prevent"]), ["space"])]
+							}, [f("div", { class: h(y(r)(!C.component.interactivePreviews && "pointer-events-none")) }, [Z(n) ? (g(), l(Ve(Z(n)), {
 								key: 0,
 								data: e.data,
 								block: e.type,
@@ -284,43 +289,43 @@ var Ve = {
 								"data",
 								"block",
 								"index"
-							])) : (v(), p("div", {
+							])) : (g(), d("div", {
 								key: 1,
-								innerHTML: A(n)?.preview ?? ""
-							}, null, 8, nt))], 2)], 42, tt)) : (v(), p("div", rt, [h(re, {
-								components: x(xe)(T.component, F.value, n),
-								columns: B(e.type)?.columns ?? T.component.items[n]?.columns ?? { default: 1 }
+								innerHTML: O(n)?.preview ?? ""
+							}, null, 8, it))], 2)], 42, rt)) : (g(), d("div", at, [p(re, {
+								components: y(xe)(C.component, N.value, n),
+								columns: R(e.type)?.columns ?? C.component.items[n]?.columns ?? { default: 1 }
 							}, null, 8, ["components", "columns"])]))]),
 							_: 2
 						}, 1024)]),
 						_: 2
-					}, 1032, ["open"])], 42, Je))), 128))], 14, qe),
-					H.value && q.value && T.component.blocks.length > 0 && F.value.length > 0 ? (v(), d(de, {
+					}, 1032, ["open"])], 42, Xe))), 128))], 14, Ye),
+					B.value && G.value && C.component.blocks.length > 0 && N.value.length > 0 ? (g(), l(de, {
 						key: 3,
-						alignment: T.component.addActionAlignment
+						alignment: C.component.addActionAlignment
 					}, {
-						default: S(() => [h(ye, {
-							component: T.component,
-							items: F.value,
+						default: b(() => [p(ye, {
+							component: C.component,
+							items: N.value,
 							onPick: St
 						}, {
-							default: S(() => [h(a, {
+							default: b(() => [p(a, {
 								type: "button",
 								variant: "outline",
 								size: "sm",
-								disabled: q.value?.disabled,
+								disabled: G.value?.disabled,
 								"data-slot": "builder-add"
 							}, {
-								default: S(() => [q.value?.icon ? (v(), d(x(i), {
+								default: b(() => [G.value?.icon ? (g(), l(y(i), {
 									key: 0,
-									name: q.value.icon
-								}, null, 8, ["name"])) : f("", !0), Fe(" " + b(q.value?.label), 1)]),
+									name: G.value.icon
+								}, null, 8, ["name"])) : u("", !0), Le(" " + v(G.value?.label), 1)]),
 								_: 1
 							}, 8, ["disabled"])]),
 							_: 1
 						}, 8, ["component", "items"])]),
 						_: 1
-					}, 8, ["alignment"])) : f("", !0)
+					}, 8, ["alignment"])) : u("", !0)
 				], 512)]),
 				_: 1
 			}, 8, [
@@ -332,6 +337,6 @@ var Ve = {
 	}
 });
 //#endregion
-export { T as default };
+export { C as default };
 
 //# sourceMappingURL=BuilderField.vue_vue_type_script_setup_true_lang.js.map