@chaibuilder/sdk 3.0.3 → 3.0.5

package/dist/core.js

@@ -1,20 +1,20 @@
-var H = Object.defineProperty;
-var V = (o, n, r) => n in o ? H(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var F = (o, n, r) => V(o, typeof n != "symbol" ? n + "" : n, r);
+var V = Object.defineProperty;
+var U = (o, n, r) => n in o ? V(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
+var $ = (o, n, r) => U(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
 import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, uniq, sortBy, round } from "lodash-es";
-import { SquareIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, ExclamationTriangleIcon, Cross1Icon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, LetterCaseCapitalizeIcon, ValueIcon, LinkBreak1Icon, EnterFullScreenIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, ReloadIcon, MagicWandIcon, MagnifyingGlassIcon, CaretRightIcon, GlobeIcon, CheckIcon, LinkBreak2Icon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, EyeNoneIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, ChatBubbleIcon, FaceIcon, ShuffleIcon, ImageIcon, PaperPlaneIcon, EraserIcon, LightningBoltIcon, ZoomInIcon, StackIcon } from "@radix-ui/react-icons";
+import { SquareIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, ExclamationTriangleIcon, Cross1Icon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, LetterCaseCapitalizeIcon, ValueIcon, LinkBreak1Icon, EnterFullScreenIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, ReloadIcon, MagicWandIcon, MagnifyingGlassIcon, CaretRightIcon, FrameIcon, CheckIcon, LinkBreak2Icon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, ChatBubbleIcon, FaceIcon, ShuffleIcon, ImageIcon, PaperPlaneIcon, EraserIcon, LightningBoltIcon, ZoomInIcon, StackIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
 import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { atomWithStorage, splitAtom, useAtomCallback } from "jotai/utils";
 import { g as generateUUID, a as getBreakpointValue, c as cn$2 } from "./common-functions-BGzDsf1z.js";
-import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, b8 as cn$1, aW as Skeleton, d as Alert, e as AlertDescription, at as Input$1, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, a9 as DialogTitle, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, a6 as DialogHeader, B as Badge, b6 as TooltipProvider, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, b1 as Textarea, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, z as CardFooter, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, aX as Slider, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, aL as Separator, aY as Switch, r as Avatar, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./toggle-C6VUu_7m.js";
+import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, b8 as cn$1, aW as Skeleton, d as Alert, e as AlertDescription, at as Input$1, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, a9 as DialogTitle, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, a6 as DialogHeader, B as Badge, b6 as TooltipProvider, aY as Switch, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, b1 as Textarea, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, z as CardFooter, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, aX as Slider, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, aL as Separator, r as Avatar, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./toggle-Cud7csHn.js";
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, h as getSplitChaiClasses, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, f as getBlocksFromHTML, i as ROOT_TEMP_KEY } from "./apply-binding-OTp8TO_7.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, h as getSplitChaiClasses, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, f as getBlocksFromHTML, i as ROOT_TEMP_KEY } from "./apply-binding-tfi-KyyV.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 { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
@@ -35,7 +35,7 @@ import Autosuggest from "react-autosuggest";
 import { useFeature } from "flagged";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
-import { default as He } from "i18next";
+import { default as Ve } from "i18next";
 import "himalaya";
 import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
 import tailwindForms from "@tailwindcss/forms";
@@ -280,7 +280,7 @@ import.meta.vitest && describe("canDropBlock Function", () => {
 });
 class PubSub {
   constructor() {
-    F(this, "subscribers", /* @__PURE__ */ new Map());
+    $(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(n, r) {
     return this.subscribers.has(n) || this.subscribers.set(n, /* @__PURE__ */ new Set()), this.subscribers.get(n).add(r), () => {
@@ -839,12 +839,12 @@ const undoRedoStateAtom = atom({
   return {
     moveBlocks: (x, y, b) => {
       const C = map(x, (j) => {
-        const w = n.find((E) => E._id === j)._parent || null, A = n.filter((E) => w ? E._parent === w : !E._parent).map((E) => E._id).indexOf(j);
-        return { _id: j, oldParent: w, oldPosition: A };
+        const A = n.find((E) => E._id === j)._parent || null, w = n.filter((E) => A ? E._parent === A : !E._parent).map((E) => E._id).indexOf(j);
+        return { _id: j, oldParent: A, oldPosition: w };
       }), B = C.find(({ _id: j }) => j === x[0]);
       B && B.oldParent === y && B.oldPosition === b || (i(x, y, b), o({
-        undo: () => each(C, ({ _id: j, oldParent: _, oldPosition: w }) => {
-          i([j], _, w);
+        undo: () => each(C, ({ _id: j, oldParent: _, oldPosition: A }) => {
+          i([j], _, A);
         }),
         redo: () => i(x, y, b)
       }));
@@ -870,8 +870,8 @@ const undoRedoStateAtom = atom({
       else {
         const B = keys(y);
         C = map(x, (j) => {
-          const _ = n.find((k) => k._id === j), w = { _id: j };
-          return each(B, (k) => w[k] = _[k]), w;
+          const _ = n.find((k) => k._id === j), A = { _id: j };
+          return each(B, (k) => A[k] = _[k]), A;
         });
       }
       c(map(x, (B) => ({ _id: B, ...y }))), o({
@@ -2381,16 +2381,16 @@ const getBlockWithChildren = (o, n) => {
           try {
             const b = p === u ? "" : p;
             console.log("prompt", x);
-            const C = x.toLowerCase().includes("translate the content"), B = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p, C) : [m(f, d)], j = await l(h, addLangToPrompt(x, g, h), B, b), { blocks: _, error: w } = j;
-            if (w) {
-              a(w);
+            const C = x.toLowerCase().includes("translate the content"), B = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p, C) : [m(f, d)], j = await l(h, addLangToPrompt(x, g, h), B, b), { blocks: _, error: A } = j;
+            if (A) {
+              a(A);
               return;
             }
             if (h === "styles") {
-              const k = _.map((A) => {
-                for (const E in A)
-                  E !== "_id" && (A[E] = `${STYLES_KEY},${A[E]}`);
-                return A;
+              const k = _.map((w) => {
+                for (const E in w)
+                  E !== "_id" && (w[E] = `${STYLES_KEY},${w[E]}`);
+                return w;
               });
               c(k);
             } else
@@ -2548,14 +2548,6 @@ const getBlockWithChildren = (o, n) => {
     },
     [o, n]
   );
-}, hiddenBlockIdsAtom = atom([]), useHiddenBlockIds = () => {
-  const [o, n] = useAtom$1(hiddenBlockIdsAtom), r = useCallback(
-    (a) => {
-      n((l) => includes(l, a) ? without(l, a) : [...l, a]);
-    },
-    [n]
-  );
-  return [o, n, r];
 }, highlightBlockIdAtom = atom(""), useHighlightBlockId = () => useAtom$1(highlightBlockIdAtom), libraryBlocksAtom = atom(
   {}
 ), useLibraryBlocks = (o) => {
@@ -3131,17 +3123,17 @@ class Content extends Component {
 class Frame extends Component {
   constructor(r, a) {
     super(r, a);
-    F(this, "setRef", (r) => {
+    $(this, "setRef", (r) => {
       this.nodeRef.current = r;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(r) : a && (a.current = r);
     });
-    F(this, "handleLoad", () => {
+    $(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
     });
     // In certain situations on a cold cache DOMContentLoaded never gets called
     // fallback to an interval to check if that's the case
-    F(this, "loadCheck", () => setInterval(() => {
+    $(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -3178,7 +3170,7 @@ class Frame extends Component {
     return delete r.head, delete r.initialContent, delete r.mountTarget, delete r.contentDidMount, delete r.contentDidUpdate, delete r.forwardedRef, /* @__PURE__ */ jsx("iframe", { ...r, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
   }
 }
-F(Frame, "defaultProps", {
+$(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -3610,26 +3602,26 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   ({ block: o, children: n }) => {
     const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: C, blockType: B } = useMemo(() => {
       var I;
-      const A = o._type;
+      const w = o._type;
       let E = o[r];
       const S = getRegisteredChaiBlock(o._type);
-      return f && ((I = S == null ? void 0 : S.i18nProps) == null ? void 0 : I.includes(r)) && has(o, `${r}-${f}`) && (E = get(o, `${r}-${f}`)), { blockContent: E, blockType: A };
+      return f && ((I = S == null ? void 0 : S.i18nProps) == null ? void 0 : I.includes(r)) && has(o, `${r}-${f}`) && (E = get(o, `${r}-${f}`)), { blockContent: E, blockType: w };
     }, [o, f]), j = useCallback(
-      (A) => {
+      (w) => {
         var S;
-        const E = A || ((S = g.current) == null ? void 0 : S.innerText);
+        const E = w || ((S = g.current) == null ? void 0 : S.innerText);
         h([b], { [r]: E }), u(null), c(null), d(-1), x(b ? [b] : []);
       },
       [b, h, c, x, f]
     ), _ = useDebouncedCallback(
-      (A) => {
-        h([b], { [r]: A });
+      (w) => {
+        h([b], { [r]: w });
       },
       [b, o, h, f],
       1e3
-    ), w = useCallback(
-      (A) => {
-        A.preventDefault(), b && (y.current = b), j(), setTimeout(() => {
+    ), A = useCallback(
+      (w) => {
+        w.preventDefault(), b && (y.current = b), j(), setTimeout(() => {
           const E = y.current;
           y.current = null, x([E]);
         }, 100);
@@ -3639,7 +3631,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     useEffect(() => {
       var v;
       if (!b) return;
-      const A = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${A}${E}`);
+      const w = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${w}${E}`);
       S && ((v = S == null ? void 0 : S.classList) == null || v.add("sr-only"), u(S));
     }, [b, B, a, i]);
     const k = useMemo(() => p ? (m(), B === "RichText" ? /* @__PURE__ */ jsx(
@@ -3649,7 +3641,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         editingElement: p,
         onChange: _,
         onClose: j,
-        onEscape: w
+        onEscape: A
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
@@ -3659,7 +3651,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         editingElement: p,
         onClose: j,
         onChange: _,
-        onEscape: w
+        onEscape: A
       }
     )) : null, [p, b, B, C, j, f]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3696,23 +3688,23 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   blockAtom: n,
   children: r
 }) => {
-  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useHiddenBlockIds(), [h] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: x, key: y } = useContext(RepeaterContext), b = useMemo(
-    () => h ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
-      index: x,
-      key: y
+  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), h = get(c, "component", null), { index: f, key: x } = useContext(RepeaterContext), y = useMemo(
+    () => m ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
+      index: f,
+      key: x
     }) : applyLanguage(i, d, c),
-    [i, d, c, g, h, x, y]
-  ), C = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), B = useMemo(
+    [i, d, c, g, m, f, x]
+  ), b = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), C = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
-  ), j = useMemo(
+  ), B = useMemo(
     () => ({
-      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
+      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": f },
       inBuilder: !0,
       lang: d || p,
+      ...y,
       ...b,
       ...C,
-      ...B,
       ...o
     }),
     [
@@ -3720,29 +3712,29 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       i._type,
       d,
       p,
+      y,
       b,
       C,
-      B,
       o
     ]
-  ), _ = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]);
-  if (isNull(f) || m.includes(i._id)) return null;
-  let w = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
-    ...j,
+  ), j = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), _ = useMemo(() => get(i, "_show", !0), [i]);
+  if (isNull(h) || !_) return null;
+  let A = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
+    ...B,
     children: r({
       _id: i._id,
       _type: i._type,
-      ...isArray(b.repeaterItems) ? {
-        repeaterItems: applyLimit(b.repeaterItems, i),
-        $repeaterItemsKey: b.$repeaterItemsKey
+      ...isArray(y.repeaterItems) ? {
+        repeaterItems: applyLimit(y.repeaterItems, i),
+        $repeaterItemsKey: y.$repeaterItemsKey
       } : {},
       ...i.partialBlockId ? { partialBlockId: i.partialBlockId } : "",
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const k = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: w }) : w;
-  return _ ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: k }) : k;
-}, PartialWrapper = ({ children: o, partialBlockId: n }) => {
+  const k = a === i._id && (l === f || f < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: A }) : A;
+  return j ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: k }) : k;
+}, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
     (d) => {
       if (d.stopPropagation(), a !== "SAVED") {
@@ -3766,7 +3758,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   ] });
 }, PartialBlocksRenderer = ({ partialBlockId: o }) => {
   const { getPartailBlocks: n } = usePartialBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom(r)), [r]);
-  return isEmpty(r) ? null : /* @__PURE__ */ jsx(PartialWrapper, { partialBlockId: o, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r }) });
+  return isEmpty(r) ? null : /* @__PURE__ */ jsx(PartialWrapper$1, { partialBlockId: o, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r }) });
 }, BlocksRenderer = ({
   blocks: o,
   parent: n = null,
@@ -3906,7 +3898,7 @@ const CanvasEventsWatcher = () => {
 }, FallbackError = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
   /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
   /* @__PURE__ */ jsx("p", { children: "Please try again." })
-] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-tDa4T69w.js")), CanvasArea = () => {
+] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-CbG2Orke.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, {}) }) }),
@@ -4217,8 +4209,8 @@ const DataBindingSelector = ({
       }
       const h = (b) => /[.,!?;:]/.test(b), f = (b, C, B) => {
         let j = "", _ = "";
-        const w = C > 0 ? b[C - 1] : "", k = C < b.length ? b[C] : "";
-        return C > 0 && (w === "." || !h(w) && w !== " ") && (j = " "), C < b.length && !h(k) && k !== " " && (_ = " "), {
+        const A = C > 0 ? b[C - 1] : "", k = C < b.length ? b[C] : "";
+        return C > 0 && (A === "." || !h(A) && A !== " ") && (j = " "), C < b.length && !h(k) && k !== " " && (_ = " "), {
           text: j + B + _,
           prefixLength: j.length,
           suffixLength: _.length
@@ -4235,9 +4227,9 @@ const DataBindingSelector = ({
           if (B !== j)
             b.chain().deleteSelection().insertContent(C).run();
           else {
-            const { state: w } = b, k = w.selection.from, A = w.doc.textBetween(Math.max(0, k - 1), k), E = w.doc.textBetween(k, Math.min(k + 1, w.doc.content.size));
+            const { state: A } = b, k = A.selection.from, w = A.doc.textBetween(Math.max(0, k - 1), k), E = A.doc.textBetween(k, Math.min(k + 1, A.doc.content.size));
             let S = "";
-            k > 0 && A !== " " && !h(A) && (S = " ");
+            k > 0 && w !== " " && !h(w) && (S = " ");
             let v = "";
             E && E !== " " && !h(E) && (v = " "), b.chain().insertContent(S + C + v).run();
           }
@@ -4251,8 +4243,8 @@ const DataBindingSelector = ({
           n(v, {}, r);
           return;
         }
-        const w = `{{${g}}}`, { text: k } = f(B, C, w), A = B.slice(0, C) + k + B.slice(C);
-        n(A, {}, r);
+        const A = `{{${g}}}`, { text: k } = f(B, C, A), w = B.slice(0, C) + k + B.slice(C);
+        n(w, {}, r);
       }
     },
     [r, n, a, c == null ? void 0 : c._id, d]
@@ -4298,7 +4290,7 @@ const DataBindingSelector = ({
   ), _ = (S) => {
     const v = ["pageType", u, S.id];
     v[1] && (r(v.join(":")), h(S.name), p(!1), x([]), b(-1));
-  }, w = (S) => {
+  }, A = (S) => {
     switch (S.key) {
       case "ArrowDown":
         S.preventDefault(), b((v) => v < f.length - 1 ? v + 1 : v);
@@ -4323,7 +4315,7 @@ const DataBindingSelector = ({
   }, [y]);
   const k = () => {
     h(""), x([]), b(-1), p(!1), r("");
-  }, A = (S) => {
+  }, w = (S) => {
     h(S), p(!isEmpty(S)), c(!0), j(S);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -4334,8 +4326,8 @@ const DataBindingSelector = ({
         {
           type: "text",
           value: m,
-          onChange: (S) => A(S.target.value),
-          onKeyDown: w,
+          onChange: (S) => w(S.target.value),
+          onKeyDown: A,
           placeholder: a(`Search ${B ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
@@ -4672,8 +4664,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       const { state: b } = u, C = b.selection.from, B = b.doc.textBetween(Math.max(0, C - 1), C), j = b.doc.textBetween(C, Math.min(C + 1, b.doc.content.size));
       let _ = "";
       C > 0 && B !== " " && !/[.,!?;:]/.test(B) && (_ = " ");
-      let w = "";
-      j && j !== " " && !/[.,!?;:]/.test(j) && (w = " "), u.chain().insertContent(_ + h + w).run();
+      let A = "";
+      j && j !== " " && !/[.,!?;:]/.test(j) && (A = " "), u.chain().insertContent(_ + h + A).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4976,11 +4968,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   ), y = useMemo(() => get(LANGUAGES, x, x), [x]), b = usePageExternalData(), C = useSelectedBlock(), B = useRegisteredChaiBlocks(), j = useMemo(
     () => get(B, [C == null ? void 0 : C._type, "i18nProps"], []),
     [B, C == null ? void 0 : C._type]
-  ), [_, w] = useState(null);
+  ), [_, A] = useState(null);
   if (c)
     return null;
   if (p.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const A = j == null ? void 0 : j.includes(o.replace("root.", ""));
+  const w = j == null ? void 0 : j.includes(o.replace("root.", ""));
   if (p.type === "array") {
     const E = _ === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
@@ -4988,7 +4980,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         "label",
         {
           htmlFor: o,
-          onClick: () => w(E ? null : o),
+          onClick: () => A(E ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             E ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
@@ -5023,7 +5015,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         /* @__PURE__ */ jsxs("label", { htmlFor: o, className: p.type === "object" ? "pb-2" : "", children: [
           r,
           " ",
-          A && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          w && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
@@ -5138,50 +5130,101 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     },
     i
   );
-}), formDataWithSelectedLang = (o, n, r) => {
+}), CommonSettings = ({ block: o, updateBlockProps: n, updateBlockPropsRealtime: r }) => {
+  const [a, l] = useState(o._name), [i, c] = useState(o._show ?? !0);
+  useEffect(() => {
+    o && (l(o._name), c(o._show ?? !0));
+  }, [o]);
+  const d = useCallback(
+    debounce((g) => {
+      n([o._id], { _name: g });
+    }, 500),
+    [o._id, n]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 items-center", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Name" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "col-span-2 rounded-md border border-gray-300 px-2 py-1 text-xs",
+          value: a,
+          onChange: (g) => {
+            const m = g.target.value;
+            l(m), r([o._id], { _name: m }), d(m);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 items-center", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Show" }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          className: "!col-span-2 !h-4 !w-7",
+          thumbClassName: "!h-3 !w-3",
+          checked: i,
+          onCheckedChange: (g) => {
+            c(g), n([o._id], { _show: g });
+          }
+        }
+      )
+    ] })
+  ] }) });
+}, formDataWithSelectedLang = (o, n, r) => {
   const a = cloneDeep(o);
   return forEach(keys(o), (l) => {
     includes(get(r, "i18nProps", []), l) && !isEmpty(n) && (a[l] = get(o, `${l}-${n}`));
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: w }, k, A) => {
-    k && (c == null ? void 0 : c._id) === n._id && a([n._id], { [k]: get(w, k) }, A);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: A }, k, w) => {
+    k && (c == null ? void 0 : c._id) === n._id && a([n._id], { [k]: get(A, k) }, w);
   }, x = useCallback(
-    debounce(({ formData: w }, k, A) => {
-      f({ formData: w }, k, A), d(w);
+    debounce(({ formData: A }, k, w) => {
+      f({ formData: A }, k, w), d(A);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), y = ({ formData: w }, k) => {
-    k && (r([n._id], { [k]: get(w, k) }), x({ formData: w }, k, { [k]: get(c, k) }));
-  }, b = ({ formData: w }, k) => {
-    k && (r([g._id], { [k]: get(w, k) }), x({ formData: w }, k, { [k]: get(c, k) }));
+  ), y = ({ formData: A }, k) => {
+    k && (r([n._id], { [k]: get(A, k) }), x({ formData: A }, k, { [k]: get(c, k) }));
+  }, b = ({ formData: A }, k) => {
+    k && (r([g._id], { [k]: get(A, k) }), x({ formData: A }, k, { [k]: get(c, k) }));
   }, { schema: C, uiSchema: B } = useMemo(() => {
-    const w = n == null ? void 0 : n._type;
-    if (!w)
+    const A = n == null ? void 0 : n._type;
+    if (!A)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: k, uiSchema: A } = getBlockFormSchemas(w);
-      if (w === "Repeater") {
+      const { schema: k, uiSchema: w } = getBlockFormSchemas(A);
+      if (A === "Repeater") {
         const E = get(n, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(A, "filter", { "ui:widget": "collectionSelect" }), set(A, "sort", { "ui:widget": "collectionSelect" })) : (set(A, "filter", { "ui:widget": "hidden" }), set(A, "sort", { "ui:widget": "hidden" }));
+        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: k, uiSchema: A };
+      return { schema: k, uiSchema: w };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
   }, [n]), { wrapperSchema: j, wrapperUiSchema: _ } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const w = g == null ? void 0 : g._type, { schema: k = {}, uiSchema: A = {} } = getBlockFormSchemas(w);
-    return { wrapperSchema: k, wrapperUiSchema: A };
+    const A = g == null ? void 0 : g._type, { schema: k = {}, uiSchema: w = {} } = getBlockFormSchemas(A);
+    return { wrapperSchema: k, wrapperUiSchema: w };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
+    /* @__PURE__ */ jsx(
+      CommonSettings,
+      {
+        block: n,
+        updateBlockProps: a,
+        updateBlockPropsRealtime: r
+      }
+    ),
+    /* @__PURE__ */ jsx("br", {}),
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((w) => !w),
+          onClick: () => u((A) => !A),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-slate-400" }),
@@ -5434,7 +5477,7 @@ const BlockStylingProps = () => {
     }
     h(v), l(v === "class" || isEmpty(S) ? "" : S);
   }, [i, p, u]);
-  const w = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), k = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), A = useCallback(
+  const A = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), k = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), w = useCallback(
     (S = !1) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
@@ -5443,15 +5486,15 @@ const BlockStylingProps = () => {
       }
       const I = get(v, "unit") !== "" ? get(v, "unit") : m;
       if (I === "auto" || I === "none") {
-        w(`${d}${I}`);
+        A(`${d}${I}`);
         return;
       }
       if (get(v, "value") === "")
         return;
       const T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
-      S ? k(T) : w(T);
+      S ? k(T) : A(T);
     },
-    [w, k, a, m, d, u]
+    [A, k, a, m, d, u]
   ), E = useCallback(
     (S) => {
       const v = getUserInputValues(`${a}`, u);
@@ -5460,15 +5503,15 @@ const BlockStylingProps = () => {
         return;
       }
       if (S === "auto" || S === "none") {
-        w(`${d}${S}`);
+        A(`${d}${S}`);
         return;
       }
       if (get(v, "value") === "")
         return;
       const I = get(v, "unit") !== "" ? get(v, "unit") : S, T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
-      w(T);
+      A(T);
     },
-    [w, a, d, u]
+    [A, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -5490,7 +5533,7 @@ const BlockStylingProps = () => {
         {
           readOnly: m === "class",
           onKeyPress: (S) => {
-            S.key === "Enter" && A();
+            S.key === "Enter" && w();
           },
           onKeyDown: (S) => {
             if (S.keyCode !== 38 && S.keyCode !== 40)
@@ -5505,7 +5548,7 @@ const BlockStylingProps = () => {
           onKeyUp: (S) => {
             j && (S.preventDefault(), _(!1));
           },
-          onBlur: () => A(),
+          onBlur: () => w(),
           onChange: (S) => {
             x(!1), l(S.target.value);
           },
@@ -5553,7 +5596,7 @@ const BlockStylingProps = () => {
           if (b(() => ""), B(!1), isEmpty(S))
             return;
           const v = `${S}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          w(L);
+          A(L);
         },
         onDrag: (S) => {
           if (isEmpty(S))
@@ -6024,11 +6067,11 @@ const COLOR_PROP = {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
-    (k, A = !0) => {
+    (k, w = !0) => {
       const E = { dark: p, mq: g, mod: u, cls: k, property: l, fullCls: "" };
       (p || u !== "") && (E.mq = "xs");
       const S = generateFullClsName(E);
-      h(x, [S], A);
+      h(x, [S], w);
     },
     [x, p, g, u, l, h]
   ), C = useCallback(() => {
@@ -6049,9 +6092,9 @@ const COLOR_PROP = {
       }[k]);
     },
     [j]
-  ), w = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && w, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !w ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), A = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && A, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !A ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -6070,7 +6113,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: w ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => C(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => C(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6474,21 +6517,21 @@ function ManualClasses() {
   const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (L = first(d)) == null ? void 0 : L.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), C = b.split(" ").filter((T) => !isEmpty(T)), B = () => {
     const T = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(m, T, !0), x("");
-  }, [j, _] = useState([]), w = ({ value: T }) => {
-    const P = T.trim().toLowerCase(), N = P.match(/.+:/g);
-    let R = [];
-    if (N && N.length > 0) {
-      const [O] = N, M = P.replace(O, "");
-      R = i.search(M).map((D) => ({
-        ...D,
-        item: { ...D.item, name: O + D.item.name }
+  }, [j, _] = useState([]), A = ({ value: T }) => {
+    const P = T.trim().toLowerCase(), R = P.match(/.+:/g);
+    let N = [];
+    if (R && R.length > 0) {
+      const [D] = R, F = P.replace(D, "");
+      N = i.search(F).map((M) => ({
+        ...M,
+        item: { ...M.item, name: D + M.item.name }
       }));
     } else
-      R = i.search(P);
-    return _(map(R, "item"));
+      N = i.search(P);
+    return _(map(N, "item"));
   }, k = () => {
     _([]);
-  }, A = (T) => T.name, E = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), S = useMemo(
+  }, w = (T) => T.name, E = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), S = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6542,9 +6585,9 @@ function ManualClasses() {
         Autosuggest,
         {
           suggestions: j,
-          onSuggestionsFetchRequested: w,
+          onSuggestionsFetchRequested: A,
           onSuggestionsClearRequested: k,
-          getSuggestionValue: A,
+          getSuggestionValue: w,
           renderSuggestion: E,
           inputProps: S,
           containerProps: {
@@ -6575,16 +6618,16 @@ function ManualClasses() {
         {
           ref: o,
           value: n,
-          onChange: (N) => r(N.target.value),
+          onChange: (R) => r(R.target.value),
           onBlur: () => {
             v(T);
           },
-          onKeyDown: (N) => {
-            N.key === "Enter" && v(T);
+          onKeyDown: (R) => {
+            R.key === "Enter" && v(T);
           },
-          onFocus: (N) => {
+          onFocus: (R) => {
             setTimeout(() => {
-              N.target.select();
+              R.target.select();
             }, 0);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
@@ -6950,15 +6993,15 @@ const registerChaiLibrary = (o, n) => {
           const j = await c({ library: n, block: o });
           let _ = r;
           if (y(first(j)) && (_ = null), !isEmpty(j)) {
-            const w = { blocks: j, uiLibrary: !0, parent: _ };
-            if (B.dataTransfer.setData("text/plain", JSON.stringify(w)), o.preview) {
+            const A = { blocks: j, uiLibrary: !0, parent: _ };
+            if (B.dataTransfer.setData("text/plain", JSON.stringify(A)), o.preview) {
               const k = new Image();
               k.src = o.preview, k.onload = () => {
                 B.dataTransfer.setDragImage(k, 0, 0);
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(w), setTimeout(() => {
+            x(A), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7010,13 +7053,13 @@ const registerChaiLibrary = (o, n) => {
       return;
     }
   }, [y, b]);
-  const B = get(y, b, []), j = useRef(null), { t: _ } = useTranslation(), w = (v) => {
+  const B = get(y, b, []), j = useRef(null), { t: _ } = useTranslation(), A = (v) => {
     j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
       j.current && C(v);
     }, 400);
   }, k = () => {
     i != null && i.id && p(i.id);
-  }, A = () => {
+  }, w = () => {
     g("");
   };
   if (d)
@@ -7040,7 +7083,7 @@ const registerChaiLibrary = (o, n) => {
       u && /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: A,
+          onClick: w,
           className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" })
         }
@@ -7061,7 +7104,7 @@ const registerChaiLibrary = (o, n) => {
           ] }) }) : map(y, (v, I) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => w(I),
+              onMouseEnter: () => A(I),
               onMouseLeave: () => clearTimeout(j.current),
               role: "button",
               onClick: () => C(I),
@@ -7146,7 +7189,7 @@ const registerChaiLibrary = (o, n) => {
             // Set the type to PartialBlock
             label: formatReadableName(b.name || x),
             description: b.description || "",
-            icon: GlobeIcon,
+            icon: FrameIcon,
             group: B,
             // Use formatted type as group
             category: "partial",
@@ -7231,15 +7274,15 @@ const registerChaiLibrary = (o, n) => {
       }
     ) : n,
     [n, d]
-  ), w = useMemo(
+  ), A = useMemo(
     () => d ? o.filter(
       (v) => reject(filter(values(_), { group: v }), { hidden: !0 }).length > 0
     ) : o.filter((v) => reject(filter(values(n), { group: v }), { hidden: !0 }).length > 0),
     [n, _, o, d]
   ), k = useMemo(
-    () => sortBy(w, (v) => CORE_GROUPS.indexOf(v) === -1 ? 99 : CORE_GROUPS.indexOf(v)),
-    [w]
-  ), A = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? k : [h], [k, h]);
+    () => sortBy(A, (v) => CORE_GROUPS.indexOf(v) === -1 ? 99 : CORE_GROUPS.indexOf(v)),
+    [A]
+  ), w = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? k : [h], [k, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7277,7 +7320,7 @@ const registerChaiLibrary = (o, n) => {
           `sidebar-${v}`
         ))
       ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: w.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: A.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         i("No blocks found matching"),
         ' "',
         d,
@@ -7285,7 +7328,7 @@ const registerChaiLibrary = (o, n) => {
       ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: E.map((v) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(v.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          h === "all" ? filter(values(A), { group: v }) : values(A),
+          h === "all" ? filter(values(w), { group: v }) : values(w),
           { hidden: !0 }
         ).map((I) => /* @__PURE__ */ jsx(
           CoreBlock,
@@ -7646,44 +7689,44 @@ const Input = ({ node: o }) => {
 }, currentAddSelection = atom(null), getBlockDisplayName = (o) => {
   var n;
   return o != null && o._name ? o._name : (o == null ? void 0 : o._type) === "Box" && (o != null && o.tag) && (o == null ? void 0 : o.tag) !== "div" ? startCase(o.tag) : ((n = o == null ? void 0 : o._type) == null ? void 0 : n.split("/").pop()) || "";
-}, Node = memo(({ node: o, style: n, dragHandle: r }) => {
-  var P;
-  const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
-  let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: C, handleClick: B } = o, j = (N) => {
-    N.stopPropagation(), !l.includes(h) && o.toggle();
+}, truncateText = (o, n) => o.length > n ? o.substring(0, n) + "..." : o, Node = memo(({ node: o, style: n, dragHandle: r }) => {
+  var R;
+  const { t: a } = useTranslation(), l = useUpdateBlocksProps(), [i] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
+  let d = null;
+  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), { id: m, data: h, isSelected: f, willReceiveDrop: x, isDragging: y, isEditing: b, handleClick: C } = o, B = get(h, "_show", !0), j = (N) => {
+    N.stopPropagation(), B && o.toggle();
   }, _ = (N) => {
-    N.isInternal && (p = N.isOpen, N.isOpen && N.close());
-  }, w = (N) => {
-    N.isInternal && p !== null && (p ? N.open() : N.close(), p = null);
-  }, [k, A] = useAtom$1(currentAddSelection), E = () => {
+    N.isInternal && (d = N.isOpen, N.isOpen && N.close());
+  }, A = (N) => {
+    N.isInternal && d !== null && (d ? N.open() : N.close(), d = null);
+  }, [k, w] = useAtom$1(currentAddSelection), E = () => {
     var N;
-    S(), o.parent.isSelected || A((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
+    S(), o.parent.isSelected || w((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
   }, S = () => {
-    A(null);
+    w(null);
   }, v = (N) => {
-    S(), N.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), B(N);
+    S(), N.stopPropagation(), !o.isOpen && B && o.toggle(), C(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      y && !o.isOpen && !b && !l.includes(h) && o.toggle();
+      x && !o.isOpen && !y && B && o.toggle();
     }, 500);
     return () => clearTimeout(N);
-  }, [y, o, b]);
-  const I = (N, R) => {
-    const O = c.contentDocument || c.contentWindow.document, M = O.querySelector(`[data-block-id=${N}]`);
-    M && M.setAttribute("data-drop", R);
-    const $ = M.getBoundingClientRect(), D = c.getBoundingClientRect();
-    $.top >= D.top && $.left >= D.left && $.bottom <= D.bottom && $.right <= D.right || (O.documentElement.scrollTop = M.offsetTop - D.top);
+  }, [x, o, y]);
+  const I = (N, D) => {
+    const F = i.contentDocument || i.contentWindow.document, O = F.querySelector(`[data-block-id=${N}]`);
+    O && O.setAttribute("data-drop", D);
+    const M = O.getBoundingClientRect(), H = i.getBoundingClientRect();
+    M.top >= H.top && M.left >= H.left && M.bottom <= H.bottom && M.right <= H.right || (F.documentElement.scrollTop = O.offsetTop - H.top);
   }, L = (N) => {
     S();
-    const R = get(o, "parent.id");
-    R !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: R, position: N }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: N });
+    const D = get(o, "parent.id");
+    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: N }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: N });
   };
-  if (h === ROOT_TEMP_KEY)
+  if (m === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
       /* @__PURE__ */ jsx("br", {}),
-      d(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
+      c(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
         "div",
         {
           role: "button",
@@ -7698,29 +7741,29 @@ const Input = ({ node: o }) => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const T = useMemo(() => has(f, "_libBlockId") && !isEmpty(f._libBlockId) && (d(PERMISSIONS.CREATE_LIBRARY_BLOCK) || d(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [f, d]);
+  const T = useMemo(() => has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, c]), P = useMemo(() => (h == null ? void 0 : h._type) === "PartialBlock" || (h == null ? void 0 : h._type) === "GlobalBlock", [h]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => g(h),
-      onMouseLeave: () => m(),
+      onMouseEnter: () => u(m),
+      onMouseLeave: () => g(),
       onClick: v,
       style: n,
-      "data-node-id": h,
-      ref: l.includes(h) ? null : r,
+      "data-node-id": m,
+      ref: r,
       onDragStart: () => _(o),
-      onDragEnd: () => w(o),
+      onDragEnd: () => A(o),
       onDragOver: (N) => {
-        N.preventDefault(), I(h, "yes");
+        N.preventDefault(), I(m, "yes");
       },
       onDragLeave: (N) => {
-        N.preventDefault(), I(h, "no");
+        N.preventDefault(), I(m, "no");
       },
       onDrop: (N) => {
-        N.preventDefault(), I(h, "no");
+        N.preventDefault(), I(m, "no");
       },
       children: [
-        d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        c(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((R = o == null ? void 0 : o.parent) == null ? void 0 : R.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
             onClick: (N) => {
@@ -7728,21 +7771,21 @@ const Input = ({ node: o }) => {
             },
             onMouseEnter: E,
             onMouseLeave: S,
-            className: "absolute -top-0.5 h-1 w-[90%] rounded bg-primary opacity-0 delay-200 duration-200 group-hover:opacity-100",
-            children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
+            className: "absolute -top-0.5 h-0.5 w-[90%] rounded bg-primary/80 opacity-0 delay-200 duration-200 group-hover:opacity-100",
+            children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary/80 p-1 outline outline-2 outline-white hover:bg-primary/80", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-2 w-2 stroke-[2] text-white" }) })
           }
         ) }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 outline-none",
-              x ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
-              y && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
+              "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
+              f ? "bg-primary/20" : "hover:bg-primary/10",
+              x && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === k ? "bg-primary/10" : "",
-              b && "opacity-20",
-              l.includes(h) ? "opacity-50" : "",
-              T && x && "bg-primary/20 text-primary"
+              y && "opacity-20",
+              B ? "" : "line-through opacity-50",
+              T && f && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7750,7 +7793,7 @@ const Input = ({ node: o }) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: `h-3 w-3 ${x ? "text-white" : "text-slate-400"}` }) })
+                    children: p && /* @__PURE__ */ jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7758,53 +7801,55 @@ const Input = ({ node: o }) => {
                   {
                     className: cn(
                       "leading-1 flex items-center",
-                      T && "text-primary/60",
-                      T && x && "text-primary/80"
+                      T && "text-orange-600/90",
+                      T && f && "text-orange-800",
+                      P && "text-purple-600/90",
+                      P && f && "text-purple-800"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(TypeIcon, { type: f == null ? void 0 : f._type }),
-                      C ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
+                      b ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
                           onDoubleClick: (N) => {
                             N.stopPropagation(), o.edit(), o.deselect();
                           },
-                          children: /* @__PURE__ */ jsx("span", { children: getBlockDisplayName(f) })
+                          children: /* @__PURE__ */ jsx("span", { title: getBlockDisplayName(h).length > 17 ? getBlockDisplayName(h) : "", children: truncateText(getBlockDisplayName(h), 17) })
                         }
                       )
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                canAddChildBlock(f == null ? void 0 : f._type) && !l.includes(h) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-px group-hover:visible", children: [
+                canAddChildBlock(h == null ? void 0 : h._type) && B && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: h }),
-                      className: "cursor-pointer rounded bg-transparent",
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
+                      className: "cursor-pointer rounded bg-transparent p-px hover:bg-primary/10",
                       asChild: !0,
-                      children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" })
+                      children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" })
                     }
                   ),
-                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", side: "bottom", children: a("Add block") })
+                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", side: "bottom", children: a("Add block inside") })
                 ] }) : null,
                 /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
                       onClick: (N) => {
-                        N.stopPropagation(), i(h), o.isOpen && o.toggle();
+                        N.stopPropagation(), l([m], { _show: !B }), o.isOpen && o.toggle();
                       },
-                      className: "cursor-pointer rounded bg-transparent",
+                      className: "cursor-pointer rounded bg-transparent p-0.5 hover:bg-primary/10",
                       asChild: !0,
-                      children: /* @__PURE__ */ jsx(EyeNoneIcon, { className: "h-4 w-4" })
+                      children: B ? /* @__PURE__ */ jsx(EyeClosedIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-4 w-4" })
                     }
                   ),
-                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", side: "bottom", children: a("Hide block") })
+                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999] text-xs", side: "bottom", children: a(B ? "Hide the block from page" : "Show the block on page") })
                 ] }),
-                /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: h, children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "h-4 w-4" }) })
+                /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: m, children: /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded bg-transparent p-px hover:bg-primary/10", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "h-3 w-3" }) }) })
               ] })
             ]
           }
@@ -7851,7 +7896,7 @@ const Input = ({ node: o }) => {
     return canAcceptChildBlock(a, l);
   };
 }, ListTree = () => {
-  const [treeData] = useAtom$1(treeDSBlocks), [ids, setIds] = useSelectedBlockIds(), [cutBlocksIds] = useCutBlockIds(), [, setHiddenBlocks] = useHiddenBlockIds(), updateBlockProps = useUpdateBlocksProps(), [, setStyleBlocks] = useSelectedStylingBlocks(), { moveBlocks } = useBlocksStoreUndoableActions(), canMove = useCanMove(), treeRef = useRef(null), [, setTreeRef] = useAtom$1(treeRefAtom), { t } = useTranslation(), [parentContext, setParentContext] = useState(null), clearSelection = () => {
+  const [treeData] = useAtom$1(treeDSBlocks), [ids, setIds] = useSelectedBlockIds(), [cutBlocksIds] = useCutBlockIds(), updateBlockProps = useUpdateBlocksProps(), [, setStyleBlocks] = useSelectedStylingBlocks(), { moveBlocks } = useBlocksStoreUndoableActions(), canMove = useCanMove(), treeRef = useRef(null), [, setTreeRef] = useAtom$1(treeRefAtom), { t } = useTranslation(), [parentContext, setParentContext] = useState(null), clearSelection = () => {
     setIds([]), setStyleBlocks([]);
   }, filteredTreeData = useMemo(() => {
     const o = (r, a) => r.filter((l) => !a.includes(l._id)).map((l) => ({
@@ -7929,6 +7974,7 @@ const Input = ({ node: o }) => {
         disabled: !hasPermission(PERMISSIONS.ADD_BLOCK),
         onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK),
         variant: "default",
+        className: "bg-primary/80",
         size: "sm",
         children: [
           "+ ",
@@ -7946,32 +7992,19 @@ const Input = ({ node: o }) => {
           treeRef.current.isEditing || handleKeyDown(o);
         },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-end gap-x-2 pb-2 text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: () => setHiddenBlocks([]),
-                  variant: "outline",
-                  className: "h-fit p-1 disabled:cursor-not-allowed disabled:opacity-50",
-                  size: "sm",
-                  children: /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-4 w-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Show hidden blocks") })
-            ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-end gap-x-1 pb-2 text-sm text-muted-foreground", children: [
             /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "h-fit p-1", onClick: () => {
                 var o;
                 return (o = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : o.openAll();
-              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(DoubleArrowDownIcon, { className: "h-3.5 w-3.5" }) }) }),
+              }, variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(DoubleArrowDownIcon, { className: "h-2 w-2" }) }) }),
               /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Expand all") })
             ] }),
             /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "h-fit p-1", onClick: () => {
                 var o;
                 return (o = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : o.closeAll();
-              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(DoubleArrowUpIcon, { className: "h-3.5 w-3.5" }) }) }),
+              }, variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(DoubleArrowUpIcon, { className: "h-2 w-2" }) }) }),
               /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Collapse all") })
             ] })
           ] }),
@@ -7999,7 +8032,7 @@ const Input = ({ node: o }) => {
               onSelect,
               childrenAccessor: (o) => o.children,
               width: "100%",
-              rowHeight: 28,
+              rowHeight: 25,
               renderDragPreview: DefaultDragPreview,
               indent: 10,
               onContextMenu,
@@ -8210,7 +8243,7 @@ const Input = ({ node: o }) => {
     "popover-foreground": ["#3d3436", "#f2e9e4"]
   }
 }, LazyCssImportModal = lazy(
-  () => import("./css-import-modal-CgSqJi_w.js").then((o) => ({ default: o.CssImportModal }))
+  () => import("./css-import-modal-CgQoE9jh.js").then((o) => ({ default: o.CssImportModal }))
 ), PREV_THEME_KEY = "chai-builder-previous-theme", DEFAULT_THEME_PRESET = [
   { shadcn_default: defaultShadcnPreset },
   { twitter_theme: twitter },
@@ -8234,16 +8267,16 @@ const Input = ({ node: o }) => {
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions();
   if (d) {
-    const w = d.map((k) => Object.keys(k)[0]);
+    const A = d.map((k) => Object.keys(k)[0]);
     DEFAULT_THEME_PRESET.forEach((k) => {
-      const A = Object.keys(k)[0];
-      w.includes(A) || d.push(k);
+      const w = Object.keys(k)[0];
+      A.includes(w) || d.push(k);
     });
   }
   const [g, m] = useTheme(), h = useThemeOptions(), { t: f } = useTranslation(), x = React.useCallback(
-    (w) => {
+    (A) => {
       const k = { ...g };
-      setPreviousTheme(k), m(w), toast.success("Theme updated", {
+      setPreviousTheme(k), m(A), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
@@ -8259,56 +8292,56 @@ const Input = ({ node: o }) => {
     },
     [g, m]
   ), y = () => {
-    const w = d.find((k) => Object.keys(k)[0] === a);
-    if (w) {
-      const k = Object.values(w)[0];
+    const A = d.find((k) => Object.keys(k)[0] === a);
+    if (A) {
+      const k = Object.values(A)[0];
       k && typeof k == "object" && "fontFamily" in k && "borderRadius" in k && "colors" in k ? (x(k), l("")) : console.error("Invalid preset structure:", k);
     } else
       console.error("Preset not found:", a);
-  }, b = (w) => {
-    x(w), l("");
+  }, b = (A) => {
+    x(A), l("");
   }, C = useDebouncedCallback(
-    (w, k) => {
+    (A, k) => {
       m(() => ({
         ...g,
         fontFamily: {
           ...g.fontFamily,
-          [w.replace(/font-/g, "")]: k
+          [A.replace(/font-/g, "")]: k
         }
       }));
     },
     [g],
     200
   ), B = React.useCallback(
-    (w) => {
+    (A) => {
       m(() => ({
         ...g,
-        borderRadius: `${w}px`
+        borderRadius: `${A}px`
       }));
     },
     [g]
   ), j = useDebouncedCallback(
-    (w, k) => {
+    (A, k) => {
       m(() => {
-        const A = get(g, `colors.${w}`);
-        return n ? set(A, 1, k) : set(A, 0, k), {
+        const w = get(g, `colors.${A}`);
+        return n ? set(w, 1, k) : set(w, 0, k), {
           ...g,
           colors: {
             ...g.colors,
-            [w]: A
+            [A]: w
           }
         };
       });
     },
     [g],
     200
-  ), _ = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([k]) => {
-    const A = get(g, `colors.${k}.${n ? 1 : 0}`);
-    return A ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+  ), _ = (A) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(A.items).map(([k]) => {
+    const w = get(g, `colors.${k}.${n ? 1 : 0}`);
+    return w ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: A,
+          value: w,
           onChange: (E) => j(k, E)
         }
       ),
@@ -8328,9 +8361,9 @@ const Input = ({ node: o }) => {
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: l, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select preset" }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((w) => {
-              const k = Object.keys(w)[0], A = k.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: k, children: capitalize(A) }, k);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((A) => {
+              const k = Object.keys(A)[0], w = k.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: k, children: capitalize(w) }, k);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: y, children: f("Apply") }) })
@@ -8342,14 +8375,14 @@ const Input = ({ node: o }) => {
           /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 text-gray-600" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Typography" })
         ] }),
-        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([w, k]) => /* @__PURE__ */ jsx(
+        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([A, k]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: w,
-            value: g.fontFamily[w.replace(/font-/g, "")] || k[Object.keys(k)[0]],
-            onChange: (A) => C(w, A)
+            label: A,
+            value: g.fontFamily[A.replace(/font-/g, "")] || k[Object.keys(k)[0]],
+            onChange: (w) => C(A, w)
           },
-          w
+          A
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (h == null ? void 0 : h.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -8375,7 +8408,7 @@ const Input = ({ node: o }) => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (w) => r(w),
+                  onCheckedChange: (A) => r(A),
                   "aria-label": "Toggle dark mode",
                   className: "mx-1"
                 }
@@ -8383,7 +8416,7 @@ const Input = ({ node: o }) => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((w) => _(w)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((A) => _(A)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: i && /* @__PURE__ */ jsx(
           LazyCssImportModal,
@@ -9023,8 +9056,8 @@ function AIChatPanel() {
     if (C) {
       const j = new FileReader();
       j.onload = (_) => {
-        var w;
-        d((w = _.target) == null ? void 0 : w.result);
+        var A;
+        d((A = _.target) == null ? void 0 : A.result);
       }, j.readAsDataURL(C);
     }
   }, x = () => {
@@ -9233,8 +9266,8 @@ const AiAssistant = () => {
       r(k), l(a), c(""), p(""), h("");
     }
   }, C = (k) => {
-    const A = a.filter((E, S) => S !== k);
-    r(A), l(A);
+    const w = a.filter((E, S) => S !== k);
+    r(w), l(w);
   }, B = (k) => {
     g(k), c(a[k].key), p(a[k].value);
   }, j = () => {
@@ -9248,11 +9281,11 @@ const AiAssistant = () => {
     }
   }, _ = (k) => {
     k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? j() : b());
-  }, w = useCallback((k) => {
-    const A = (v) => /[.,!?;:]/.test(v), E = (v, I, L) => {
+  }, A = useCallback((k) => {
+    const w = (v) => /[.,!?;:]/.test(v), E = (v, I, L) => {
       let T = "", P = "";
-      const N = I > 0 ? v[I - 1] : "", R = I < v.length ? v[I] : "";
-      return I > 0 && (N === "." || !A(N) && N !== " ") && (T = " "), I < v.length && !A(R) && R !== " " && (P = " "), {
+      const R = I > 0 ? v[I - 1] : "", N = I < v.length ? v[I] : "";
+      return I > 0 && (R === "." || !w(R) && R !== " ") && (T = " "), I < v.length && !w(N) && N !== " " && (P = " "), {
         text: T + L + P,
         prefixLength: T.length,
         suffixLength: P.length
@@ -9261,12 +9294,12 @@ const AiAssistant = () => {
     if (S) {
       const v = S.selectionStart || 0, I = S.value || "", L = S.selectionEnd || v;
       if (L > v) {
-        const O = `{{${k}}}`, { text: M } = E(I, v, O), $ = I.slice(0, v) + M + I.slice(L);
-        p($);
+        const D = `{{${k}}}`, { text: F } = E(I, v, D), O = I.slice(0, v) + F + I.slice(L);
+        p(O);
         return;
       }
-      const P = `{{${k}}}`, { text: N } = E(I, v, P), R = I.slice(0, v) + N + I.slice(v);
-      p(R);
+      const P = `{{${k}}}`, { text: R } = E(I, v, P), N = I.slice(0, v) + R + I.slice(v);
+      p(N);
     }
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
@@ -9299,7 +9332,7 @@ const AiAssistant = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: w })
+                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: A })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9324,16 +9357,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((k, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((k, w) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
         /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: k.key }),
         /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: k.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(A), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => C(A), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(w), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => C(w), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
-    ] }, A)) })
+    ] }, w)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9402,11 +9435,23 @@ function BlockAttributesToggle() {
     n && /* @__PURE__ */ jsx(BlockAttributesEditor, {})
   ] });
 }
-const SettingsPanel = () => {
+const PartialWrapper = ({ partialBlockId: o }) => {
+  const n = useBuilderProp("gotoPage", noop), { saveState: r } = useSavePage(), { selectedLang: a, fallbackLang: l } = useLanguages(), i = useCallback(
+    (c) => {
+      if (c.stopPropagation(), r !== "SAVED") {
+        toast.error("You have unsaved changes. Please save the page first.");
+        return;
+      }
+      n({ pageId: o, lang: a || l });
+    },
+    [r, n, o, a, l]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx("div", { onDoubleClick: i, className: "h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "rounded-md bg-white px-2 py-1 text-xs", children: "Partial block. Double click to edit." }) }) }) });
+}, SettingsPanel = () => {
   const o = useSelectedBlock(), { t: n } = useTranslation(), r = useBuilderProp("onError", noop), { hasPermission: a } = usePermissions();
   let l = !a(PERMISSIONS.EDIT_BLOCK);
   const i = !a(PERMISSIONS.EDIT_STYLES);
-  return isNull(o) ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-xl p-4 text-muted-foreground", children: [
+  return o && o._type === "PartialBlock" ? /* @__PURE__ */ jsx(PartialWrapper, { partialBlockId: o.partialBlockId }) : isNull(o) ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-xl p-4 text-muted-foreground", children: [
     /* @__PURE__ */ jsx(MixerHorizontalIcon, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ jsx("h1", { children: n("Please select a block to edit settings or styles") })
   ] }) }) : l && i ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-xl p-4 text-muted-foreground", children: [
@@ -9491,11 +9536,11 @@ function useSidebarDefaultPanels() {
   }, [o, n, r]);
 }
 const RootLayout = () => {
-  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = reverse([...g ?? []]), h = useCallback((A) => {
-    A.preventDefault();
+  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = reverse([...g ?? []]), h = useCallback((w) => {
+    w.preventDefault();
   }, []), f = useCallback(
-    (A) => {
-      console.log("handleMenuItemClick", A, n), r(n === A ? null : A);
+    (w) => {
+      console.log("handleMenuItemClick", w, n), r(n === w ? null : w);
     },
     [n, r]
   ), { t: x } = useTranslation(), y = useMemo(
@@ -9504,25 +9549,25 @@ const RootLayout = () => {
   ), b = useBuilderProp("htmlDir", "ltr"), C = find(y, { id: n }) ?? first(y), B = get(C, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
-      const A = find(y, { id: n });
-      A && get(A, "view", "standard") === "standard" && (a.current = n, i(get(A, "width", DEFAULT_PANEL_WIDTH)));
+      const w = find(y, { id: n });
+      w && get(w, "view", "standard") === "standard" && (a.current = n, i(get(w, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, y]);
   const j = useMemo(() => {
     if (n === null) return 0;
-    const A = find(y, { id: n });
-    return get(A, "view", "standard") === "standard" ? B : l;
+    const w = find(y, { id: n });
+    return get(w, "view", "standard") === "standard" ? B : l;
   }, [n, B, l, y]), _ = useCallback(() => {
     r(a.current);
-  }, [r, n]), w = useCallback(() => {
+  }, [r, n]), A = useCallback(() => {
     r("outline");
   }, [r]);
   useEffect(() => {
     n !== null && !find(y, { id: n }) && r("outline");
   }, [n, y]);
   const k = useCallback(
-    (A) => {
-      f(A);
+    (w) => {
+      f(w);
     },
     [f]
   );
@@ -9536,24 +9581,24 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((A, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(A, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "top",
-                  panelId: A.id,
-                  isActive: n === A.id,
-                  show: () => k(A.id)
+                  panelId: w.id,
+                  isActive: n === w.id,
+                  show: () => k(w.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(A.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-top-" + E)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m == null ? void 0 : m.map((A, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(A, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m == null ? void 0 : m.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: A.id,
-                  isActive: n === A.id,
-                  show: () => k(A.id)
+                  panelId: w.id,
+                  isActive: n === w.id,
+                  show: () => k(w.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(A.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-bottom-" + E)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -9630,7 +9675,7 @@ const RootLayout = () => {
             /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
-            close: w
+            close: A
           }) }) })
         ]
       }
@@ -9642,7 +9687,7 @@ const RootLayout = () => {
         /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
-        close: w
+        close: A
       }) }) })
     ] }) }),
     n !== null && get(C, "view") === "overlay" && /* @__PURE__ */ jsx(
@@ -9670,7 +9715,7 @@ const RootLayout = () => {
                 /* @__PURE__ */ jsx(Button, { onClick: () => _(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-5 w-5" }) })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
-                close: w
+                close: A
               }) }) })
             ]
           }
@@ -9723,8 +9768,8 @@ const RootLayout = () => {
     });
   }, h = (x) => {
     if (!c) return;
-    const y = x.clientX - p.x, b = x.clientY - p.y, C = x.currentTarget, B = C.offsetWidth, j = C.offsetHeight, _ = window.innerWidth - B, w = window.innerHeight - j, k = Math.max(0, Math.min(y, _)), A = Math.max(0, Math.min(b, w));
-    r(k, A);
+    const y = x.clientX - p.x, b = x.clientY - p.y, C = x.currentTarget, B = C.offsetWidth, j = C.offsetHeight, _ = window.innerWidth - B, A = window.innerHeight - j, k = Math.max(0, Math.min(y, _)), w = Math.max(0, Math.min(b, A));
+    r(k, w);
   }, f = () => {
     d(!1);
   };
@@ -9966,10 +10011,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   var r;
   const a = getBuildingBlocks(o), l = a[1], i = a[2], c = a[3], d = a[6], p = a[7], u = a[11], g = a[12], m = a[13], h = a[14], f = a[16], x = a[17], y = u(o, n);
   if (isAtomStateInitialized(y) && (l.has(n) && i.get(n) !== y.n || Array.from(y.d).every(
-    ([A, E]) => (
+    ([w, E]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      h(o, A).n === E
+      h(o, w).n === E
     )
   )))
     return y;
@@ -9978,34 +10023,34 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   function C() {
     l.has(n) && (x(o, n), m(o), g(o));
   }
-  function B(A) {
+  function B(w) {
     var E;
-    if (isSelfAtom(n, A)) {
-      const v = u(o, A);
+    if (isSelfAtom(n, w)) {
+      const v = u(o, w);
       if (!isAtomStateInitialized(v))
-        if (hasInitialValue(A))
-          setAtomStateValueOrPromise(o, A, A.init);
+        if (hasInitialValue(w))
+          setAtomStateValueOrPromise(o, w, w.init);
         else
           throw new Error("no atom init");
       return returnAtomValue(v);
     }
-    const S = h(o, A);
+    const S = h(o, w);
     try {
       return returnAtomValue(S);
     } finally {
-      y.d.set(A, S.n), isPendingPromise(y.v) && addPendingPromiseToDependency(n, y.v, S), (E = l.get(A)) == null || E.t.add(n), b || C();
+      y.d.set(w, S.n), isPendingPromise(y.v) && addPendingPromiseToDependency(n, y.v, S), (E = l.get(w)) == null || E.t.add(n), b || C();
     }
   }
   let j, _;
-  const w = {
+  const A = {
     get signal() {
       return j || (j = new AbortController()), j.signal;
     },
     get setSelf() {
-      return !_ && isActuallyWritableAtom(n) && (_ = (...A) => {
+      return !_ && isActuallyWritableAtom(n) && (_ = (...w) => {
         if (!b)
           try {
-            return f(o, n, ...A);
+            return f(o, n, ...w);
           } finally {
             m(o), g(o);
           }
@@ -10013,10 +10058,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }
   }, k = y.n;
   try {
-    const A = p(o, n, B, w);
-    return setAtomStateValueOrPromise(o, n, A), isPromiseLike$1(A) && (registerAbortHandler(A, () => j == null ? void 0 : j.abort()), A.then(C, C)), y;
-  } catch (A) {
-    return delete y.v, y.e = A, ++y.n, y;
+    const w = p(o, n, B, A);
+    return setAtomStateValueOrPromise(o, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => j == null ? void 0 : j.abort()), w.then(C, C)), y;
+  } catch (w) {
+    return delete y.v, y.e = w, ++y.n, y;
   } finally {
     b = !1, k !== y.n && i.get(n) === k && (i.set(n, y.n), c.add(n), (r = d.c) == null || r.call(d, n));
   }
@@ -10039,8 +10084,8 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
       if (isSelfAtom(n, b)) {
         if (!hasInitialValue(b))
           throw new Error("atom not writable");
-        const _ = j.n, w = C[0];
-        setAtomStateValueOrPromise(o, b, w), h(o, b), _ !== j.n && (l.add(b), (B = i.c) == null || B.call(i, b), m(o, b));
+        const _ = j.n, A = C[0];
+        setAtomStateValueOrPromise(o, b, A), h(o, b), _ !== j.n && (l.add(b), (B = i.c) == null || B.call(i, b), m(o, b));
         return;
       } else
         return writeAtomState(o, b, ...C);
@@ -10379,7 +10424,7 @@ export {
   getBlocksFromHTML as convertHTMLToChaiBlocks,
   generateUUID as generateBlockId,
   getBlocksFromHTML,
-  He as i18n,
+  Ve as i18n,
   cn$2 as mergeClasses,
   registerBlockSettingField,
   registerBlockSettingTemplate,
@@ -10412,7 +10457,6 @@ export {
   useCutBlockIds,
   useDarkMode,
   useDuplicateBlocks,
-  useHiddenBlockIds,
   useHighlightBlockId,
   useInlineEditing,
   useIsPageLoaded,