@chaibuilder/sdk 3.2.1 → 3.2.3

package/dist/{index-CXFBOH6M.js → index-Cb4I9wM_.js}

@@ -13,7 +13,7 @@ import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
 import * as React from "react";
 import React__default, { useEffect, useCallback, useState, useMemo, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, D as DESIGN_TOKEN_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-CSWwWMjY.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, D as DESIGN_TOKEN_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-B11pPFEE.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
 import { isObject } from "@rjsf/utils";
 import { toast, Toaster } from "sonner";
@@ -3538,14 +3538,14 @@ function detectDropZone(o, n, r, a, i) {
   if (l === "canvas" && hasChildBlocks(o)) {
     const w = getChildBlocks(o), j = w[w.length - 1];
     if (j) {
-      const v = j.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = _.width - I - D, R = _.left + x + I;
+      const v = j.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = _.width - I - P, R = _.left + x + I;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
         rect: {
           top: v.bottom + h,
           left: R,
-          width: P,
+          width: D,
           height: 4
         },
         targetElement: j,
@@ -3559,13 +3559,13 @@ function detectDropZone(o, n, r, a, i) {
   if (f && !m && hasChildBlocks(o)) {
     const w = detectGapZone(o, n, r, g);
     if (w) {
-      const j = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = getChildBlocks(o), R = getSiblingsInSameRow(P, w.before, g);
+      const j = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = getChildBlocks(o), R = getSiblingsInSameRow(D, w.before, g);
       let $ = 0;
       if (R.forEach((F) => {
         const O = F.getBoundingClientRect();
         O.height > $ && ($ = O.height);
       }), g === "vertical") {
-        const F = _.width - I - D, O = _.left + x + I;
+        const F = _.width - I - P, O = _.left + x + I;
         return {
           position: "after",
           placeholderOrientation: "horizontal",
@@ -3605,7 +3605,7 @@ function detectDropZone(o, n, r, a, i) {
   if (d && p) {
     const w = detectParentEdgeProximity(d, n, r, u);
     if (w) {
-      const j = d.getBoundingClientRect(), v = window.getComputedStyle(d), _ = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, D = parseFloat(v.paddingBottom) || 0, P = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((E = i.defaultView) == null ? void 0 : E.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
+      const j = d.getBoundingClientRect(), v = window.getComputedStyle(d), _ = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, P = parseFloat(v.paddingBottom) || 0, D = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((E = i.defaultView) == null ? void 0 : E.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
       if (w === "start") {
         const O = getChildBlocks(d)[0];
         if (O) {
@@ -3616,7 +3616,7 @@ function detectDropZone(o, n, r, a, i) {
               position: "before",
               placeholderOrientation: $,
               rect: {
-                top: L.top + P - 2,
+                top: L.top + D - 2,
                 left: M,
                 width: T,
                 height: 4
@@ -3627,7 +3627,7 @@ function detectDropZone(o, n, r, a, i) {
               confidence: 0.9
             };
           } else {
-            const T = j.top + P + I, M = F.maxHeight > 0 ? F.maxHeight : j.height - I - D;
+            const T = j.top + D + I, M = F.maxHeight > 0 ? F.maxHeight : j.height - I - P;
             return {
               position: "before",
               placeholderOrientation: $,
@@ -3654,7 +3654,7 @@ function detectDropZone(o, n, r, a, i) {
               position: "after",
               placeholderOrientation: $,
               rect: {
-                top: T.bottom + P - 2,
+                top: T.bottom + D - 2,
                 left: H,
                 width: M,
                 height: 4
@@ -3665,7 +3665,7 @@ function detectDropZone(o, n, r, a, i) {
               confidence: 0.9
             };
           } else {
-            const M = j.top + P + I, H = F.maxHeight > 0 ? F.maxHeight : j.height - I - D;
+            const M = j.top + D + I, H = F.maxHeight > 0 ? F.maxHeight : j.height - I - P;
             return {
               position: "after",
               placeholderOrientation: $,
@@ -3759,25 +3759,25 @@ function getSiblingsInSameRow(o, n, r) {
   });
 }
 function calculatePlaceholderRect(o, n, r, a, i) {
-  var I, D;
-  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((D = i.defaultView) == null ? void 0 : D.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, S = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, E = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", j = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(j, o, w);
+  var I, P;
+  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((P = i.defaultView) == null ? void 0 : P.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, S = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, E = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", j = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(j, o, w);
   let _ = 0, N = 0;
-  if (v.forEach((P) => {
-    const R = P.getBoundingClientRect();
+  if (v.forEach((D) => {
+    const R = D.getBoundingClientRect();
     R.height > _ && (_ = R.height), R.width > N && (N = R.width);
   }), r === "before")
     if (a === "horizontal") {
-      const P = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
+      const D = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
       return {
         top: l.top + d - u - 2,
         left: R,
-        width: P,
+        width: D,
         height: 4
       };
     } else {
-      const P = l.top + d, R = w === "horizontal" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
+      const D = l.top + d, R = w === "horizontal" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
       return {
-        top: P,
+        top: D,
         left: l.left + p - m - 2,
         width: 4,
         height: R
@@ -3785,17 +3785,17 @@ function calculatePlaceholderRect(o, n, r, a, i) {
     }
   else if (r === "after")
     if (a === "horizontal") {
-      const P = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
+      const D = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
       return {
         top: l.bottom + d + g - 2,
         left: R,
-        width: P,
+        width: D,
         height: 4
       };
     } else {
-      const P = l.top + d, R = w === "horizontal" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
+      const D = l.top + d, R = w === "horizontal" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
       return {
-        top: P,
+        top: D,
         left: l.right + p + f - 2,
         width: 4,
         height: R
@@ -3886,8 +3886,8 @@ const LEAF_BLOCK_TYPES = [
           }
           const j = S === "up" ? -E : E;
           f.scrollBy(0, j);
-          const v = f.scrollY, _ = v > 0, N = v + h < b, I = p.current, D = h - p.current;
-          S === "up" && _ && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || S === "down" && N && D < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
+          const v = f.scrollY, _ = v > 0, N = v + h < b, I = p.current, P = h - p.current;
+          S === "up" && _ && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || S === "down" && N && P < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
         };
         d.current === null && (d.current = requestAnimationFrame(w));
       }
@@ -5628,19 +5628,19 @@ const RichTextEditor = memo(
     () => u(l._id, getBlockRuntimeProps(l._type)),
     [l._id, l._type, u, getBlockRuntimeProps]
   ), w = useMemo(() => {
-    const D = {
+    const P = {
       "data-block-id": l._id,
       "data-block-type": l._type,
       "data-block-index": h
     };
     return k && C ? {
-      ...D,
-      draggable: !0,
+      ...P,
+      draggable: !a,
       onMouseDown: S.onMouseDown,
       onDragStart: S.onDragStart,
       onDragEnd: S.onDragEnd
-    } : D;
-  }, [l._id, l._type, h, k, C, S]), j = useMemo(
+    } : P;
+  }, [l._id, l._type, h, k, C, S, a]), j = useMemo(
     () => ({
       blockProps: w,
       inBuilder: b === "edit",
@@ -5837,7 +5837,7 @@ const RichTextEditor = memo(
     /* @__PURE__ */ jsx("p", { className: "font-semibold", children: o("Oops! Something went wrong.") }),
     /* @__PURE__ */ jsx("p", { children: o("Please try again.") })
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-BNuPxnsb.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-aEl9qnMt.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -6406,7 +6406,7 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DuUAGYPy.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-BC3QU74X.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
   const c = useRef(null), [d, p] = useState(!1), u = useRTEditor({
     blockId: o,
     value: a,
@@ -7160,8 +7160,8 @@ const BlockStylingProps = () => {
       }
       if (get(_, "value") === "")
         return;
-      const D = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      v ? E(D) : B(D);
+      const P = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      v ? E(P) : B(P);
     },
     [B, E, a, m, d, u]
   ), j = useCallback(
@@ -7177,8 +7177,8 @@ const BlockStylingProps = () => {
       }
       if (get(_, "value") === "")
         return;
-      const N = get(_, "unit") !== "" ? get(_, "unit") : v, D = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      B(D);
+      const N = get(_, "unit") !== "" ? get(_, "unit") : v, P = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      B(P);
     },
     [B, a, d, u]
   );
@@ -7211,8 +7211,8 @@ const BlockStylingProps = () => {
             const _ = parseInt$1(v.target.value);
             let N = isNaN$1(_) ? 0 : _;
             v.keyCode === 38 && (N += 1), v.keyCode === 40 && (N -= 1);
-            const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            E(P);
+            const I = `${N}`, D = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+            E(D);
           },
           onKeyUp: (v) => {
             S && (v.preventDefault(), A(!1));
@@ -8117,7 +8117,7 @@ function ManualClasses() {
     return v(z);
   }, I = () => {
     v([]);
-  }, D = (L) => L.name, P = (L) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
+  }, P = (L) => L.name, D = (L) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
     L.isDesignToken && /* @__PURE__ */ jsx(DesignTokensIcon, { className: "h-4 w-4 text-gray-600" }),
     /* @__PURE__ */ jsx("span", { children: L.name })
   ] }), R = useMemo(
@@ -8169,8 +8169,8 @@ function ManualClasses() {
           suggestions: j,
           onSuggestionsFetchRequested: N,
           onSuggestionsClearRequested: I,
-          getSuggestionValue: D,
-          renderSuggestion: P,
+          getSuggestionValue: P,
+          renderSuggestion: D,
           inputProps: R,
           highlightFirstSuggestion: !0,
           onSuggestionSelected: (L, { suggestionValue: T }) => {
@@ -8587,7 +8587,7 @@ const registerChaiLibrary = (o, n) => {
               blocks: [
                 {
                   _type: "Image",
-                  styles: "#styles:,w-full",
+                  styles: "#styles:,w-full h-full object-cover",
                   image: o == null ? void 0 : o.image,
                   alt: (o == null ? void 0 : o.alt) || "",
                   _name: (o == null ? void 0 : o.name) || "Image"
@@ -8942,8 +8942,8 @@ const BlockCard = ({
   const { t: c } = useTranslation(), [d] = useBlocksStore(), [p, u] = useState(""), g = useRef(null), [m] = useAtom$1(addBlockTabAtom), f = (N = find(d, (I) => I._id === r)) == null ? void 0 : N._type, [h, x] = useState("all"), [b, y] = useState(null), C = useRef(null), k = useBuilderProp("flags.dragAndDrop", !1);
   useEffect(() => {
     const I = setTimeout(() => {
-      var D;
-      (D = g.current) == null || D.focus();
+      var P;
+      (P = g.current) == null || P.focus();
     }, 0);
     return () => clearTimeout(I);
   }, [m]), useEffect(() => {
@@ -8962,8 +8962,8 @@ const BlockCard = ({
   }, []), E = useMemo(
     () => p ? values(n).filter(
       (I) => {
-        var D, P;
-        return (((D = I.label) == null ? void 0 : D.toLowerCase()) + " " + ((P = I.type) == null ? void 0 : P.toLowerCase())).includes(p.toLowerCase());
+        var P, D;
+        return (((P = I.label) == null ? void 0 : P.toLowerCase()) + " " + ((D = I.type) == null ? void 0 : D.toLowerCase())).includes(p.toLowerCase());
       }
     ) : n,
     [n, p]
@@ -9012,12 +9012,12 @@ const BlockCard = ({
             ' "',
             p,
             '"'
-          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: _.map((I) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: _.map((I, P) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(I.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + i, children: reject(
               h === "all" ? filter(values(v), { group: I }) : values(v),
               { hidden: !0 }
-            ).map((D) => /* @__PURE__ */ jsx(
+            ).map((D, R) => /* @__PURE__ */ jsx(
               CoreBlock,
               {
                 parentId: r,
@@ -9025,7 +9025,7 @@ const BlockCard = ({
                 block: D,
                 disabled: !k && (!canAcceptChildBlock(f, D.type) || !canBeNestedInside(f, D.type))
               },
-              D.type
+              D.type + "-" + P + "-" + R
             )) })
           ] }, I)) }) })
         }
@@ -9513,7 +9513,7 @@ const useStructureValidation = () => {
     I(), o.parent.isSelected || _((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
   }, I = () => {
     _(null);
-  }, D = (T) => {
+  }, P = (T) => {
     I(), T.stopPropagation(), !o.isOpen && B && o.toggle(), k(T);
   };
   useEffect(() => {
@@ -9522,7 +9522,7 @@ const useStructureValidation = () => {
     }, 500);
     return () => clearTimeout(T);
   }, [b, o, y]);
-  const P = (T, M) => {
+  const D = (T, M) => {
     const H = l.contentDocument || l.contentWindow.document, W = H.querySelector(`[data-block-id=${T}]`);
     W && W.setAttribute("data-drop", M);
     const z = W.getBoundingClientRect(), V = l.getBoundingClientRect();
@@ -9556,20 +9556,20 @@ const useStructureValidation = () => {
     {
       onMouseEnter: () => u(f),
       onMouseLeave: () => g(),
-      onClick: D,
+      onClick: P,
       style: n,
       "data-node-id": f,
       ref: r,
       onDragStart: () => w(o),
       onDragEnd: () => j(o),
       onDragOver: (T) => {
-        T.preventDefault(), P(f, "yes");
+        T.preventDefault(), D(f, "yes");
       },
       onDragLeave: (T) => {
-        T.preventDefault(), P(f, "no");
+        T.preventDefault(), D(f, "no");
       },
       onDrop: (T) => {
-        T.preventDefault(), P(f, "no");
+        T.preventDefault(), D(f, "no");
       },
       children: [
         c(PERMISSIONS.ADD_BLOCK) && !m && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
@@ -11024,19 +11024,19 @@ const UndoRedo = () => {
   }, B = (w) => {
     w.key === "Enter" && !w.shiftKey && (w.preventDefault(), u !== null ? A() : C());
   }, E = useCallback((w) => {
-    const j = (N) => /[.,!?;:]/.test(N), v = (N, I, D) => {
-      let P = "", R = "";
+    const j = (N) => /[.,!?;:]/.test(N), v = (N, I, P) => {
+      let D = "", R = "";
       const $ = I > 0 ? N[I - 1] : "", F = I < N.length ? N[I] : "";
-      return I > 0 && ($ === "." || !j($) && $ !== " ") && (P = " "), I < N.length && !j(F) && F !== " " && (R = " "), {
-        text: P + D + R,
-        prefixLength: P.length,
+      return I > 0 && ($ === "." || !j($) && $ !== " ") && (D = " "), I < N.length && !j(F) && F !== " " && (R = " "), {
+        text: D + P + R,
+        prefixLength: D.length,
         suffixLength: R.length
       };
     }, _ = x.current;
     if (_) {
-      const N = _.selectionStart || 0, I = _.value || "", D = _.selectionEnd || N;
-      if (D > N) {
-        const O = `{{${w}}}`, { text: L } = v(I, N, O), T = I.slice(0, N) + L + I.slice(D);
+      const N = _.selectionStart || 0, I = _.value || "", P = _.selectionEnd || N;
+      if (P > N) {
+        const O = `{{${w}}}`, { text: L } = v(I, N, O), T = I.slice(0, N) + L + I.slice(P);
         p(T);
         return;
       }
@@ -11408,10 +11408,10 @@ const PartialWrapper = ({ partialBlockId: o }) => {
   }, I = (L) => {
     const T = { ...n };
     delete T[L], r(T), w(), toast.success(o("Token deleted successfully"));
-  }, D = (L) => {
+  }, P = (L) => {
     const T = n[L];
     T && (c(L), y(T.name), k(T.value), i(!1), g(!0));
-  }, P = () => {
+  }, D = () => {
     i(!0), c(null), f(""), x(""), A(""), p(!0);
   }, R = () => {
     c(null), y(""), k(""), E(""), g(!1);
@@ -11429,7 +11429,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       Button,
       {
         variant: "outline",
-        onClick: P,
+        onClick: D,
         disabled: a || l !== null,
         size: "sm",
         className: "h-7 text-xs",
@@ -11455,7 +11455,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
               {
                 variant: "ghost",
                 size: "sm",
-                onClick: () => D(L),
+                onClick: () => P(L),
                 disabled: a || l !== null,
                 className: "h-6 w-6 p-0",
                 children: /* @__PURE__ */ jsx(Pencil1Icon, { className: "h-3 w-3" })
@@ -11963,36 +11963,39 @@ const RootLayout = () => {
     const i = first(o);
     isString(i) && (a = [i, ...getParentNodeIds(n, i)]), r(a);
   }, [o, n, r]);
-}, ScreenTooSmall = () => /* @__PURE__ */ jsx("section", { className: "fixed inset-0 z-50 flex h-screen w-screen items-center justify-center bg-white bg-[linear-gradient(to_right,#f3f4f6_1px,transparent_1px),linear-gradient(to_bottom,#f3f4f6_1px,transparent_1px)] bg-[size:10px_10px] py-12 sm:py-16 lg:py-20 xl:hidden", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-md space-y-6 text-center", children: [
-  /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: "https://ucarecdn.com/fbfc3b05-cb73-4e99-92a2-3a367b7c36cd/",
-      alt: "Chai Builder",
-      className: "mx-auto h-20 w-20 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
-    }
-  ),
-  /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-5xl font-bold tracking-tight text-gray-900", children: "Screen too small" }),
-    /* @__PURE__ */ jsxs("p", { className: "mx-auto max-w-sm text-sm leading-7 text-gray-600", children: [
-      "Please view this page on greater than ",
-      /* @__PURE__ */ jsx("strong", { className: "font-medium", children: "1280px" }),
-      " screen width for the best experience."
-    ] })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center rounded-full bg-gray-100 px-4 py-2 text-sm text-gray-700", children: [
-    /* @__PURE__ */ jsx("svg", { className: "mr-2 h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-      "path",
+}, ScreenTooSmall = () => {
+  const o = useBuilderProp("smallScreenComponent", null);
+  return /* @__PURE__ */ jsx("section", { className: "fixed inset-0 z-[99999] flex h-screen w-screen items-center justify-center bg-white xl:hidden", children: o ? React__default.createElement(o) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-[linear-gradient(to_right,#f3f4f6_1px,transparent_1px),linear-gradient(to_bottom,#f3f4f6_1px,transparent_1px)] bg-[size:10px_10px] py-12 sm:py-16 lg:py-20", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-md space-y-6 text-center", children: [
+    /* @__PURE__ */ jsx(
+      "img",
       {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "2",
-        d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        src: "https://ucarecdn.com/fbfc3b05-cb73-4e99-92a2-3a367b7c36cd/",
+        alt: "Chai Builder",
+        className: "mx-auto h-20 w-20 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
       }
-    ) }),
-    "Minimum width: 1280px"
-  ] }) })
-] }) }) });
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-5xl font-bold tracking-tight text-gray-900", children: "Screen too small" }),
+      /* @__PURE__ */ jsxs("p", { className: "mx-auto max-w-sm text-sm leading-7 text-gray-600", children: [
+        "Please view this page on greater than ",
+        /* @__PURE__ */ jsx("strong", { className: "font-medium", children: "1280px" }),
+        " screen width for the best experience."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center rounded-full bg-gray-100 px-4 py-2 text-sm text-gray-700", children: [
+      /* @__PURE__ */ jsx("svg", { className: "mr-2 h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "2",
+          d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        }
+      ) }),
+      "Minimum width: 1280px"
+    ] }) })
+  ] }) }) }) });
+};
 function isSelfAtom(o, n) {
   return o.unstable_is ? o.unstable_is(n) : n === o;
 }